From 2430e1cf0f3c3039e12c648b2cee5cdd1417dae3 Mon Sep 17 00:00:00 2001 From: Ane Date: Mon, 25 Nov 2024 08:53:15 +0100 Subject: [PATCH] replace butotn --- src/components/buttons/Button.tsx | 58 ++-- src/components/buttons/button.module.css | 260 +----------------- .../contactSelector/ContactSelector.tsx | 3 +- src/components/link/link.module.css | 2 +- src/styles/global.css | 26 +- 5 files changed, 33 insertions(+), 316 deletions(-) diff --git a/src/components/buttons/Button.tsx b/src/components/buttons/Button.tsx index 1af532eb6..841e257da 100644 --- a/src/components/buttons/Button.tsx +++ b/src/components/buttons/Button.tsx @@ -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 ( ); }; diff --git a/src/components/buttons/button.module.css b/src/components/buttons/button.module.css index b119b448c..0c7625922 100644 --- a/src/components/buttons/button.module.css +++ b/src/components/buttons/button.module.css @@ -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; @@ -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 { @@ -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 { @@ -325,4 +85,4 @@ to { transform: rotate(360deg); } -} */ +} diff --git a/src/components/customerCases/customerCase/contactInformation/contactSelector/ContactSelector.tsx b/src/components/customerCases/customerCase/contactInformation/contactSelector/ContactSelector.tsx index efd70bd2b..e086b10b2 100644 --- a/src/components/customerCases/customerCase/contactInformation/contactSelector/ContactSelector.tsx +++ b/src/components/customerCases/customerCase/contactInformation/contactSelector/ContactSelector.tsx @@ -42,13 +42,14 @@ export default function ContactSelector({ <>
{locations.map((location) => ( + //Todo: replace this with tag component