Skip to content

Commit

Permalink
replace butotn
Browse files Browse the repository at this point in the history
  • Loading branch information
@anemne
anemne committed Nov 25, 2024
1 parent c969378 commit 2430e1c
Show file tree
Hide file tree
Showing 5 changed files with 33 additions and 316 deletions.
58 changes: 19 additions & 39 deletions src/components/buttons/Button.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,62 +19,42 @@ interface IButton {
ariaDisabled?: boolean;
}

// const sizeClassMap: { [key in ButtonSize]: string } = {
// large: styles.large,
// medium: styles.medium,
// small: styles.small,
// };

// const typeClassMap: { [key in ButtonType]: string } = {
// primary: styles.primary,
// secondary: styles.secondary,
// };

// const backgroundClassMap: { [key in ButtonBackground]: string } = {
// dark: styles.dark,
// light: styles.light,
// };
const sizeClassMap: { [key in ButtonSize]: string } = {
large: styles.large,
medium: styles.medium,
small: styles.small,
};

// const iconColorClassMap: { [key in ButtonBackground]: string } = {
// dark: styles.iconColorDark,
// light: styles.iconColorLight,
// };
const typeClassMap: { [key in ButtonType]: string } = {
primary: styles.primary,
secondary: styles.secondary,
};

// const iconSizeClassMap: { [key in ButtonSize]: string } = {
// large: styles.iconLarge,
// medium: styles.iconMedium,
// small: styles.iconSmall,
// };
const backgroundClassMap: { [key in ButtonBackground]: string } = {
dark: styles.dark,
light: styles.light,
};

const Button = ({
// size = "large",
// type = "primary",
size = "large",
type = "primary",
onClick,
children,
disabled,
// loading,
loading,
ariaDisabled,
// icon,
// background = "dark",
background = "dark",
}: IButton) => {
// const className = `${styles.button} ${typeClassMap[type]} ${sizeClassMap[size]} ${backgroundClassMap[background]} ${loading ? styles.loading : ""}`;
// const iconColorClass = `${iconColorClassMap[background]} ${iconSizeClassMap[size]}`;
const className = `${styles.button} ${typeClassMap[type]} ${sizeClassMap[size]} ${backgroundClassMap[background]} ${loading ? styles.loading : ""}`;

return (
<button
className={styles.button}
className={className}
onClick={onClick}
disabled={disabled}
aria-disabled={ariaDisabled}
>
{children}
{/* {icon === "iconLeft" && (
<span className={`${styles.iconLeft} ${iconColorClass}`}></span>
)}
{icon === "iconRight" && (
<span className={`${styles.iconRight} ${iconColorClass}`}></span>
)} */}
</button>
);
};
Expand Down
260 changes: 10 additions & 250 deletions src/components/buttons/button.module.css
View file
Original file line number Diff line number Diff line change
@@ -1,209 +1,3 @@
:where(.button, .button-secondary) {
--_button-color-background: var(
--button-color-background,
var(--color-background-interactive-primary-default)
);
font-size: var(--button-font-size, var(--font-size-s));
font-weight: var(--button-font-weight, 600);
font-family: var(--button-font-family, inherit);
background: var(
--_button-color-background,
var(--color-background-interactive-primary-default, var(--background-color))
);
color: var(
--button-color-foreground,
var(--color-foreground-neutral-inverted, black)
);
border: var(--button-border-width, var(--border-width-base)) solid
var(--button-color-border, var(--_button-color-background));
border-radius: var(--radius-large, var(--radius-medium));

/*
We're using padding to control the height of buttons.
Instead of padding top + padding bottom + text height = button height
We're setting a min-height to ensure the button is at least a certain height.
This height is also the same as the input height.
*/
min-height: var(--button-height, var(--size-input-height-medium, 2rem));
/*
The components in Figma does have padding on top and bottom,
but if a user zooms and text wraps onto multiple lines,
that padding will only make the buttons really awkward.
*/
padding-block: 0;
padding-inline: var(--button-padding-inline, 0.75rem);
text-align: center;
line-height: 1;
outline-offset: var(--focus-ring-offset);
outline-width: var(--focus-ring-width);
outline-color: transparent;
outline-color: oklch(from var(--focus-ring-color, transparent) l c h / 0%);
outline-style: var(--focus-ring-style);

transition:
outline 145ms ease,
background-color 145ms ease,
transform 145ms ease;

&:focus-visible {
outline-color: var(--focus-ring-color);
z-index: 1;
}

&:where(:active) {
transform: scale(0.97);
}
}

:where(.button) {
--button-height: var(--size-input-height-medium);
--button-padding-inline: var(--spacing-m);
--button-font-size: var(--font-size-s);
--button-gap: var(--spacing-xs);
}

:where(.button-s) {
--button-height: var(--size-input-height-small);
--button-padding-inline: var(--spacing-m);
--button-font-size: var(--font-size-xs);
--button-gap: var(--spacing-2xs);
}

:where(.button-l) {
--button-height: var(--size-input-height-large);
--button-padding-inline: var(--spacing-l);
--button-font-size: var(--font-size-m);
--button-gap: var(--spacing-xs);
}

:where(.button),
:where(.button-secondary) {
&:where(:not(:active)):focus-visible {
outline-offset: var(--focus-ring-offset);
}
}

:where(.button) {
--button-color-foreground: var(--color-foreground-neutral-inverted);
--button-color-background: var(
--color-background-interactive-primary-default
);
--button-color-border: var(
--button-color-border,
var(--_button-color-background)
);
&:where(:not(:active):hover) {
--button-color-background: var(
--color-background-interactive-primary-hover
);
}

&:where(:is(:active)) {
--button-color-background: var(
--color-background-interactive-primary-active
);
}
}

:where(.button-secondary) {
--button-color-foreground: var(--color-foreground-interactive-default);
--button-color-background: var(
--color-background-interactive-secondary-default
);
--button-color-border: var(--color-border-interactive-default);

&:where(:not(:active):hover) {
--button-color-background: var(
--color-background-interactive-secondary-hover
);
--button-color-foreground: var(--color-foreground-interactive-hover);
--button-color-border: var(--color-border-interactive-hover);
}

&:where(:is(:active)) {
--button-color-background: var(
--color-background-interactive-secondary-active
);
--button-color-foreground: var(--color-foreground-interactive-active);
--button-color-border: var(--color-border-interactive-active);
}
}

:where(.button) {
--button-height: var(--size-input-height-medium);
--button-padding-inline: var(--spacing-m);
--button-font-size: var(--font-size-s);
--button-gap: var(--spacing-xs);
}

:where(.button-s) {
--button-height: var(--size-input-height-small);
--button-padding-inline: var(--spacing-m);
--button-font-size: var(--font-size-xs);
--button-gap: var(--spacing-2xs);
}

:where(.button-l) {
--button-height: var(--size-input-height-large);
--button-padding-inline: var(--spacing-l);
--button-font-size: var(--font-size-m);
--button-gap: var(--spacing-xs);
}

:where(.button),
:where(.button-secondary) {
&:where(:not(:active)):focus-visible {
outline-offset: var(--focus-ring-offset);
}
}

:where(.button) {
--button-color-foreground: var(--color-foreground-neutral-inverted);
--button-color-background: var(
--color-background-interactive-primary-default
);
--button-color-border: var(
--button-color-border,
var(--_button-color-background)
);
&:where(:not(:active):hover) {
--button-color-background: var(
--color-background-interactive-primary-hover
);
}

&:where(:is(:active)) {
--button-color-background: var(
--color-background-interactive-primary-active
);
}
}

:where(.button-secondary) {
--button-color-foreground: var(--color-foreground-interactive-default);
--button-color-background: var(
--color-background-interactive-secondary-default
);
--button-color-border: var(--color-border-interactive-default);

&:where(:not(:active):hover) {
--button-color-background: var(
--color-background-interactive-secondary-hover
);
--button-color-foreground: var(--color-foreground-interactive-hover);
--button-color-border: var(--color-border-interactive-hover);
}

&:where(:is(:active)) {
--button-color-background: var(
--color-background-interactive-secondary-active
);
--button-color-foreground: var(--color-foreground-interactive-active);
--button-color-border: var(--color-border-interactive-active);
}
}

/* Old code
.button {
max-width: 320px;
height: fit-content;
Expand All @@ -216,13 +10,13 @@
}

.dark {
background-color: var(--outline-dark);
background-color: var(--background-button-outline-dark);
color: var(--text-primary-light);
}

.light {
background-color: var(--Gray-100);
color: var(--Gray-900);
background-color: var(--background-bg-light-primary);
color: var(--text-primary);
}

.large {
Expand All @@ -245,61 +39,27 @@
}

.secondary.large.dark {
border: 1px solid var(--light-500);
border: 1px solid var(--background-button-outline-light);
}

.secondary.large.light {
border: 1px solid var(--outline-dark);
border: 1px solid var(--background-button-outline-dark);
}

.secondary.medium.dark {
border: 1px solid var(--light-500);
border: 1px solid var(--background-button-outline-light);
}

.secondary.medium.light {
border: 1px solid var(--outline-dark);
border: 1px solid var(--background-button-outline-dark);
}

.secondary.small.dark {
border: 0.5px solid var(--light-500);
border: 0.5px solid var(--background-button-outline-light);
}

.secondary.small.light {
border: 0.5px solid var(--outline-dark);
}
.iconLeft {
display: inline-block;
-webkit-mask: url("/_assets/arrowLeft.svg") no-repeat 50% 50%;
}
.iconRight {
display: inline-block;
width: 0.42188rem;
-webkit-mask: url("/_assets/arrowRight.svg") no-repeat 50% 50%;
}
.iconColorDark {
color: var(--text-primary-light);
}
.iconColorLight {
background-color: var(--Gray-900);
}
.iconLarge {
width: 1.5rem;
height: 1.5rem;
}
.iconMedium {
width: 1.125rem;
height: 1.125rem;
}
.iconSmall {
width: 0.875rem;
height: 0.875rem;
border: 0.5px solid var(--background-button-outline-dark);
}

.loading {
Expand All @@ -325,4 +85,4 @@
to {
transform: rotate(360deg);
}
} */
}
3 changes: 2 additions & 1 deletion ...ponents/customerCases/customerCase/contactInformation/contactSelector/ContactSelector.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,13 +42,14 @@ export default function ContactSelector({
<>
<div className={styles.locationSection}>
{locations.map((location) => (
//Todo: replace this with tag component
<Button
type={
location._id === selectedOrDefaultLocationId
? "primary"
: "secondary"
}
size={"small"}
size={"medium"}
background={
location._id === selectedOrDefaultLocationId ? "dark" : "light"
}
Expand Down
Loading

0 comments on commit 2430e1c

Please sign in to comment.