From 2e8c9e06e7d8755f43d415adc725c2e67006db4e Mon Sep 17 00:00:00 2001 From: Jamie Henson Date: Wed, 20 Nov 2024 13:21:50 +0000 Subject: [PATCH 1/5] chore: port existing button styles to legacy files --- src/core/styles.components.css | 1 + src/core/styles/Button.stories.tsx | 202 +++++++---------------- src/core/styles/LegacyButton.stories.tsx | 162 ++++++++++++++++++ src/core/styles/buttons.css | 95 ----------- src/core/styles/legacy-buttons.css | 95 +++++++++++ 5 files changed, 314 insertions(+), 241 deletions(-) create mode 100644 src/core/styles/LegacyButton.stories.tsx create mode 100644 src/core/styles/legacy-buttons.css diff --git a/src/core/styles.components.css b/src/core/styles.components.css index 3b880f25d..cb9c83809 100644 --- a/src/core/styles.components.css +++ b/src/core/styles.components.css @@ -1,4 +1,5 @@ @import "./styles/buttons.css"; +@import "./styles/legacy-buttons.css"; @import "./styles/dropdowns.css"; @import "./styles/forms.css"; @import "./styles/layout.css"; diff --git a/src/core/styles/Button.stories.tsx b/src/core/styles/Button.stories.tsx index 5f59b499a..e9ff82dfa 100644 --- a/src/core/styles/Button.stories.tsx +++ b/src/core/styles/Button.stories.tsx @@ -1,162 +1,72 @@ import React from "react"; -import Icon from "../Icon"; export default { title: "CSS/Button", }; -export const Standard = { - render: () => ( -
- - - - - - -
- ), +const buttons = { + priority: { + default: "ui-button-priority", + iconLeft: "", + }, }; -export const Inverted = { - render: () => ( -
- - - - -
- ), -}; +const sizes = [ + { label: "Large", symbol: "lg" }, + { label: "Regular", symbol: "" }, + { label: "Small", symbol: "sm" }, + { label: "Extra small", symbol: "xs" }, +]; -export const WithIcons = { - render: () => ( -
- - - - - - -
- ), -}; +type ButtonSetType = "priority" | "primary" | "secondary"; -export const LinkStyledAsButton = { - render: () => ( -
- - Link - - - Disabled link - -
- ), -}; +const buttonSet = (type: ButtonSetType) => ( +
+ {Array(3) + .fill(0) + .map((_, index) => ( +
+ {sizes.map((size, sizeIndex) => ( + + ))} +
+ ))} +
+); -export const ExtraSmall = { - render: () => ( -
- - - - -
- ), +export const HighPriority = { + render: () => buttonSet("priority"), }; -export const Small = { - render: () => ( -
- - - - -
- ), +export const Primary = { + render: () => buttonSet("primary"), }; -export const Large = { - render: () => ( -
- - - - -
- ), +export const Secondary = { + render: () => buttonSet("secondary"), }; diff --git a/src/core/styles/LegacyButton.stories.tsx b/src/core/styles/LegacyButton.stories.tsx new file mode 100644 index 000000000..8c77415e5 --- /dev/null +++ b/src/core/styles/LegacyButton.stories.tsx @@ -0,0 +1,162 @@ +import React from "react"; +import Icon from "../Icon"; + +export default { + title: "CSS/Button (legacy)", +}; + +export const Standard = { + render: () => ( +
+ + + + + + +
+ ), +}; + +export const Inverted = { + render: () => ( +
+ + + + +
+ ), +}; + +export const WithIcons = { + render: () => ( +
+ + + + + + +
+ ), +}; + +export const LinkStyledAsButton = { + render: () => ( +
+ + Link + + + Disabled link + +
+ ), +}; + +export const ExtraSmall = { + render: () => ( +
+ + + + +
+ ), +}; + +export const Small = { + render: () => ( +
+ + + + +
+ ), +}; + +export const Large = { + render: () => ( +
+ + + + +
+ ), +}; diff --git a/src/core/styles/buttons.css b/src/core/styles/buttons.css index dab2d86df..e69de29bb 100644 --- a/src/core/styles/buttons.css +++ b/src/core/styles/buttons.css @@ -1,95 +0,0 @@ -@layer components { - .ui-btn { - @apply text-white bg-cool-black text-btn2 font-sans font-bold inline-block rounded p-btn; - @apply hover:text-white hover:bg-active-orange; - @apply active:text-white active:bg-red-orange; - @apply focus:text-white focus:bg-cool-black focus:outline-gui-focus; - @apply disabled:text-mid-grey disabled:bg-gui-unavailable disabled:cursor-not-allowed; - @apply transition-colors; - @apply inline-flex items-center justify-center; - } - - .ui-btn-alt { - transition: background-position 0.2s; - background: linear-gradient( - 61.2deg, - var(--color-active-orange) 5%, - #fe5215 19%, - #fc4a13 27%, - #f73c10 33%, - #f1280a 39%, - #e90f04 44%, - var(--color-red-orange) 50% - ); - background-size: 200% 100%; - background-position: 0% 0%; - - @apply text-white text-btn2 font-sans font-bold inline-block rounded p-btn; - @apply focus:outline-gui-focus; - @apply inline-flex items-center justify-center; - } - - .ui-btn-alt:hover, - .ui-btn-alt:focus { - background-position: 100% 0%; - } - - .ui-btn-alt:disabled { - background: linear-gradient(var(--gradient-transparent)); - @apply bg-gui-unavailable text-mid-grey cursor-not-allowed; - } - - .ui-btn-invert { - @apply text-cool-black bg-white text-btn2 font-sans font-bold inline-block rounded p-btn; - @apply hover:text-white hover:bg-active-orange; - @apply active:text-white active:bg-red-orange; - @apply focus:text-white focus:bg-cool-black focus:outline-gui-focus; - @apply disabled:text-mid-grey disabled:bg-gui-unavailable disabled:cursor-not-allowed; - @apply transition-colors; - @apply inline-flex items-center justify-center; - } - - .ui-btn-secondary { - @apply text-cool-black bg-white text-btn2 font-sans font-bold inline-block border-btn border-cool-black rounded p-btn; - @apply hover:text-cool-black hover:border-active-orange hover:bg-white; - @apply active:border-red-orange active:bg-white; - @apply focus:border-cool-black focus:bg-white focus:outline-gui-focus; - @apply disabled:text-gui-unavailable disabled:border-gui-unavailable disabled:bg-white disabled:cursor-not-allowed; - @apply transition-colors; - @apply inline-flex items-center justify-center; - } - - .ui-btn-secondary-invert { - @apply text-white bg-cool-black text-btn2 font-sans font-bold inline-block border-btn border-mid-grey rounded p-btn; - @apply hover:text-white hover:border-active-orange; - @apply active:border-red-orange; - @apply focus:outline-gui-focus; - @apply disabled:text-gui-unavailable disabled:border-gui-unavailable disabled:cursor-not-allowed; - @apply transition-colors; - @apply inline-flex items-center justify-center; - } - - .ui-btn-icon { - @apply w-24 h-24 mr-16; - } - - .ui-btn-icon-small { - @apply w-20 h-20 mr-12; - } - - .ui-btn-icon-xsmall { - @apply w-16 h-16 mr-8; - } - .ui-btn.ui-btn-disabled, - .ui-btn-invert.ui-btn-disabled { - @apply text-mid-grey bg-gui-unavailable cursor-not-allowed pointer-events-none select-none; - } - - .ui-btn-secondary.ui-btn-disabled { - @apply text-gui-unavailable border-gui-unavailable bg-white cursor-not-allowed pointer-events-none select-none; - } - - .ui-btn-secondary-invert.ui-btn-disabled { - @apply text-gui-unavailable border-gui-unavailable cursor-not-allowed pointer-events-none select-none; - } -} diff --git a/src/core/styles/legacy-buttons.css b/src/core/styles/legacy-buttons.css new file mode 100644 index 000000000..dab2d86df --- /dev/null +++ b/src/core/styles/legacy-buttons.css @@ -0,0 +1,95 @@ +@layer components { + .ui-btn { + @apply text-white bg-cool-black text-btn2 font-sans font-bold inline-block rounded p-btn; + @apply hover:text-white hover:bg-active-orange; + @apply active:text-white active:bg-red-orange; + @apply focus:text-white focus:bg-cool-black focus:outline-gui-focus; + @apply disabled:text-mid-grey disabled:bg-gui-unavailable disabled:cursor-not-allowed; + @apply transition-colors; + @apply inline-flex items-center justify-center; + } + + .ui-btn-alt { + transition: background-position 0.2s; + background: linear-gradient( + 61.2deg, + var(--color-active-orange) 5%, + #fe5215 19%, + #fc4a13 27%, + #f73c10 33%, + #f1280a 39%, + #e90f04 44%, + var(--color-red-orange) 50% + ); + background-size: 200% 100%; + background-position: 0% 0%; + + @apply text-white text-btn2 font-sans font-bold inline-block rounded p-btn; + @apply focus:outline-gui-focus; + @apply inline-flex items-center justify-center; + } + + .ui-btn-alt:hover, + .ui-btn-alt:focus { + background-position: 100% 0%; + } + + .ui-btn-alt:disabled { + background: linear-gradient(var(--gradient-transparent)); + @apply bg-gui-unavailable text-mid-grey cursor-not-allowed; + } + + .ui-btn-invert { + @apply text-cool-black bg-white text-btn2 font-sans font-bold inline-block rounded p-btn; + @apply hover:text-white hover:bg-active-orange; + @apply active:text-white active:bg-red-orange; + @apply focus:text-white focus:bg-cool-black focus:outline-gui-focus; + @apply disabled:text-mid-grey disabled:bg-gui-unavailable disabled:cursor-not-allowed; + @apply transition-colors; + @apply inline-flex items-center justify-center; + } + + .ui-btn-secondary { + @apply text-cool-black bg-white text-btn2 font-sans font-bold inline-block border-btn border-cool-black rounded p-btn; + @apply hover:text-cool-black hover:border-active-orange hover:bg-white; + @apply active:border-red-orange active:bg-white; + @apply focus:border-cool-black focus:bg-white focus:outline-gui-focus; + @apply disabled:text-gui-unavailable disabled:border-gui-unavailable disabled:bg-white disabled:cursor-not-allowed; + @apply transition-colors; + @apply inline-flex items-center justify-center; + } + + .ui-btn-secondary-invert { + @apply text-white bg-cool-black text-btn2 font-sans font-bold inline-block border-btn border-mid-grey rounded p-btn; + @apply hover:text-white hover:border-active-orange; + @apply active:border-red-orange; + @apply focus:outline-gui-focus; + @apply disabled:text-gui-unavailable disabled:border-gui-unavailable disabled:cursor-not-allowed; + @apply transition-colors; + @apply inline-flex items-center justify-center; + } + + .ui-btn-icon { + @apply w-24 h-24 mr-16; + } + + .ui-btn-icon-small { + @apply w-20 h-20 mr-12; + } + + .ui-btn-icon-xsmall { + @apply w-16 h-16 mr-8; + } + .ui-btn.ui-btn-disabled, + .ui-btn-invert.ui-btn-disabled { + @apply text-mid-grey bg-gui-unavailable cursor-not-allowed pointer-events-none select-none; + } + + .ui-btn-secondary.ui-btn-disabled { + @apply text-gui-unavailable border-gui-unavailable bg-white cursor-not-allowed pointer-events-none select-none; + } + + .ui-btn-secondary-invert.ui-btn-disabled { + @apply text-gui-unavailable border-gui-unavailable cursor-not-allowed pointer-events-none select-none; + } +} From a5be4fcb3d1b8fa5785fd0912f42058a3ffa1764 Mon Sep 17 00:00:00 2001 From: Jamie Henson Date: Wed, 20 Nov 2024 18:58:45 +0000 Subject: [PATCH 2/5] add v2 button React component, story and styles --- src/core/Button.tsx | 91 ++ src/core/styles.components.css | 1 + src/core/styles/Button.stories.tsx | 183 +++- src/core/styles/Typography.stories.tsx | 16 +- .../__snapshots__/Button.stories.tsx.snap | 980 +++++++++++++----- src/core/styles/buttons.css | 109 ++ src/core/styles/gui.css | 33 + src/core/styles/properties.css | 1 + src/core/styles/text.css | 16 - tailwind.config.js | 1 + 10 files changed, 1127 insertions(+), 304 deletions(-) create mode 100644 src/core/Button.tsx create mode 100644 src/core/styles/gui.css diff --git a/src/core/Button.tsx b/src/core/Button.tsx new file mode 100644 index 000000000..3f0237f41 --- /dev/null +++ b/src/core/Button.tsx @@ -0,0 +1,91 @@ +import React, { PropsWithChildren } from "react"; +import { IconName } from "./Icon/types"; +import Icon from "./Icon"; +import clsx from "clsx"; + +export type ButtonType = "priority" | "primary" | "secondary"; + +type ButtonSize = "lg" | "md" | "sm" | "xs"; + +type ButtonProps = { + /** + * The type of button: priority, primary, or secondary. + */ + variant?: ButtonType; + /** + * The button size: lg, sm, or xs. Leave empty for md. + */ + size?: ButtonSize; + /** + * An icon to render on the left side of the button label. + */ + leftIcon?: IconName; + /** + * An icon to render on the right side of the button label. + */ + rightIcon?: IconName; + /** + * Optional classes to add to the button element. + */ + className?: string; +} & React.ButtonHTMLAttributes; + +// got to go the long way round because of ol' mate Taily Waily +const buttonClasses: Record> = { + priority: { + lg: "ui-button-priority-lg", + md: "ui-button-priority", + sm: "ui-button-priority-sm", + xs: "ui-button-priority-xs", + }, + primary: { + lg: "ui-button-primary-lg", + md: "ui-button-primary", + sm: "ui-button-primary-sm", + xs: "ui-button-primary-xs", + }, + secondary: { + lg: "ui-button-secondary-lg", + md: "ui-button-secondary", + sm: "ui-button-secondary-sm", + xs: "ui-button-secondary-xs", + }, +}; + +export const iconModifierClasses: Record< + ButtonSize, + { left: string; right: string } +> = { + lg: { left: "ui-button-lg-left-icon", right: "ui-button-lg-right-icon" }, + md: { left: "ui-button-left-icon", right: "ui-button-right-icon" }, + sm: { left: "ui-button-sm-left-icon", right: "ui-button-sm-right-icon" }, + xs: { left: "", right: "" }, +}; + +const Button: React.FC> = ({ + variant = "primary", + size, + leftIcon, + rightIcon, + children, + className, + ...rest +}) => { + return ( + + ); +}; + +export default Button; diff --git a/src/core/styles.components.css b/src/core/styles.components.css index cb9c83809..d9a444373 100644 --- a/src/core/styles.components.css +++ b/src/core/styles.components.css @@ -5,6 +5,7 @@ @import "./styles/layout.css"; @import "./styles/shadows.css"; @import "./styles/text.css"; +@import "./styles/gui.css"; @layer components { /* Basis for icon component */ diff --git a/src/core/styles/Button.stories.tsx b/src/core/styles/Button.stories.tsx index e9ff82dfa..240b9830d 100644 --- a/src/core/styles/Button.stories.tsx +++ b/src/core/styles/Button.stories.tsx @@ -1,72 +1,169 @@ import React from "react"; +import clsx from "clsx"; +import Button, { ButtonType, iconModifierClasses } from "../Button"; +import Tooltip from "../Tooltip"; export default { - title: "CSS/Button", -}; - -const buttons = { - priority: { - default: "ui-button-priority", - iconLeft: "", - }, + title: "Components/Button", + component: Button, + tags: ["autodocs"], }; const sizes = [ - { label: "Large", symbol: "lg" }, - { label: "Regular", symbol: "" }, - { label: "Small", symbol: "sm" }, - { label: "Extra small", symbol: "xs" }, + { + label: "Large", + key: "lg", + className: { + priority: "ui-button-priority-lg", + primary: "ui-button-primary-lg", + secondary: "ui-button-secondary-lg", + }, + }, + { + label: "Regular", + className: { + priority: "ui-button-priority", + primary: "ui-button-primary", + secondary: "ui-button-secondary", + }, + }, + { + label: "Small", + key: "sm", + className: { + priority: "ui-button-priority-sm", + primary: "ui-button-primary-sm", + secondary: "ui-button-secondary-sm", + }, + }, + { + label: "Extra small", + key: "xs", + className: { + priority: "ui-button-priority-xs", + primary: "ui-button-primary-xs", + secondary: "ui-button-secondary-xs", + }, + }, ]; -type ButtonSetType = "priority" | "primary" | "secondary"; - -const buttonSet = (type: ButtonSetType) => ( -
- {Array(3) +const buttonSet = (type: ButtonType) => ( +
+ {Array(4) .fill(0) .map((_, index) => ( -
+
{sizes.map((size, sizeIndex) => ( - + {index === 1 ? ( + + + + ) : null} + {size.label} + {index === 2 ? ( + + + + ) : null} + + } + > + {clsx( + size.className[type], + { + [iconModifierClasses[size.key ?? "md"].left]: index === 1, + }, + { + [iconModifierClasses[size.key ?? "md"].right]: index === 2, + }, + )} + ))}
))}
); -export const HighPriority = { +export const ReactComponent = { + render: () => ( +
+
+ +
+
+ +
+
+ +
+
+ ), + parameters: { + docs: { + description: { + story: + "Buttons are available as a React component. The `variant` prop can be set to `priority`, `primary`, or `secondary`. The `size` prop can be set to `lg`, `sm`, or `xs`, or left undefined.\n\nIcons can be added to the left or right of the button text by setting the `leftIcon` or `rightIcon` prop to a valid icon name.", + }, + }, + }, +}; + +export const Priority = { render: () => buttonSet("priority"), + parameters: { + docs: { + description: { + story: + "Priority buttons are available as separate CSS classes for use cases outside of React. Classes: `ui-button-priority`, `ui-button-priority-lg`, `ui-button-priority-sm`, `ui-button-priority-xs`. Hover over the icons to see the active classes.\n\nIcons can be set by placing an SVG element inside the button (view the HTML tab in the individual story view for more comprehensive code examples). Adding either `ui-button-{SIZE}-left-icon` or `ui-button-{SIZE}-right-icon` to the button element will adjust the padding to accommodate the icon.", + }, + }, + }, }; export const Primary = { render: () => buttonSet("primary"), + parameters: { + docs: { + description: { + story: + "Primary buttons are available as separate CSS classes for use cases outside of React. Classes: `ui-button-primary`, `ui-button-primary-lg`, `ui-button-primary-sm`, `ui-button-primary-xs`. Hover over the icons to see the active classes.\n\nIcons can be set by placing an SVG element inside the button (view the HTML tab in the individual story view for more comprehensive code examples). Adding either `ui-button-{SIZE}-left-icon` or `ui-button-{SIZE}-right-icon` to the button element will adjust the padding to accommodate the icon.", + }, + }, + }, }; export const Secondary = { render: () => buttonSet("secondary"), + parameters: { + docs: { + description: { + story: + "Secondary buttons are available as separate CSS classes for use cases outside of React. Classes: `ui-button-secondary`, `ui-button-secondary-lg`, `ui-button-secondary-sm`, `ui-button-secondary-xs`. Hover over the icons to see the active classes.\n\nIcons can be set by placing an SVG element inside the button (view the HTML tab in the individual story view for more comprehensive code examples). Adding either `ui-button-{SIZE}-left-icon` or `ui-button-{SIZE}-right-icon` to the button element will adjust the padding to accommodate the icon.", + }, + }, + }, }; diff --git a/src/core/styles/Typography.stories.tsx b/src/core/styles/Typography.stories.tsx index cd1fd09ef..d850610dd 100644 --- a/src/core/styles/Typography.stories.tsx +++ b/src/core/styles/Typography.stories.tsx @@ -34,14 +34,14 @@ const styles = { { label: "Overline 2", className: "ui-text-overline2" }, ], gui: [ - { label: "Button label 1", className: "ui-text-button1" }, - { label: "Button label 2", className: "ui-text-button2" }, - { label: "Button label 3", className: "ui-text-button3" }, - { label: "Button label 4", className: "ui-text-button4" }, - { label: "Menu label 1", className: "ui-text-menu1" }, - { label: "Menu label 2", className: "ui-text-menu2" }, - { label: "Menu label 3", className: "ui-text-menu3" }, - { label: "Menu label 4", className: "ui-text-menu4" }, + { label: "Button label 1", className: "ui-gui-button1" }, + { label: "Button label 2", className: "ui-gui-button2" }, + { label: "Button label 3", className: "ui-gui-button3" }, + { label: "Button label 4", className: "ui-gui-button4" }, + { label: "Menu label 1", className: "ui-gui-menu1" }, + { label: "Menu label 2", className: "ui-gui-menu2" }, + { label: "Menu label 3", className: "ui-gui-menu3" }, + { label: "Menu label 4", className: "ui-gui-menu4" }, { label: "Link", className: "ui-text" }, ], code: [ diff --git a/src/core/styles/__snapshots__/Button.stories.tsx.snap b/src/core/styles/__snapshots__/Button.stories.tsx.snap index 9c3423b17..6479de4ad 100644 --- a/src/core/styles/__snapshots__/Button.stories.tsx.snap +++ b/src/core/styles/__snapshots__/Button.stories.tsx.snap @@ -1,250 +1,756 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`CSS/Button ExtraSmall smoke-test 1`] = ` -
- - - - +exports[`Components/Button Primary smoke-test 1`] = ` +
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
`; -exports[`CSS/Button Inverted smoke-test 1`] = ` -
- - - - +exports[`Components/Button Priority smoke-test 1`] = ` +
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
`; -exports[`CSS/Button Large smoke-test 1`] = ` -
- - - - +exports[`Components/Button ReactComponent smoke-test 1`] = ` +
+
+ +
+
+ +
+
+ +
`; -exports[`CSS/Button LinkStyledAsButton smoke-test 1`] = ` -
- - Link - - - Disabled link - -
-`; - -exports[`CSS/Button Small smoke-test 1`] = ` -
- - - - -
-`; - -exports[`CSS/Button Standard smoke-test 1`] = ` -
- - - - - - -
-`; - -exports[`CSS/Button WithIcons smoke-test 1`] = ` -
- - - - - - +exports[`Components/Button Secondary smoke-test 1`] = ` +
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
`; diff --git a/src/core/styles/buttons.css b/src/core/styles/buttons.css index e69de29bb..eda974c31 100644 --- a/src/core/styles/buttons.css +++ b/src/core/styles/buttons.css @@ -0,0 +1,109 @@ +@layer components { + .ui-button-base { + @apply inline-flex rounded justify-center items-center gap-12 text-neutral-000 transition-colors focus:outline-4 focus:outline-gui-blue-focus disabled:cursor-not-allowed; + } + + .ui-button-lg-base { + @apply ui-button-base ui-gui-button1 h-[56px] px-[28px] py-[17px] gap-12 [&>svg]:!w-24 [&>svg]:!h-24; + } + + .ui-button-md-base { + @apply ui-button-base ui-gui-button2 h-[48px] px-24 py-[13.5px] gap-[10px] [&>svg]:!w-24 [&>svg]:!h-24; + } + + .ui-button-sm-base { + @apply ui-button-base ui-gui-button3 h-[40px] px-20 py-[10px] gap-8 [&>svg]:!w-20 [&>svg]:!h-20; + } + + .ui-button-xs-base { + @apply ui-button-base ui-gui-button4 h-[36px] px-12 py-[9px] gap-6 [&>svg]:!w-16 [&>svg]:!h-16; + } + + .ui-button-disabled-base { + @apply disabled:bg-gui-unavailable dark:disabled:bg-gui-unavailable-dark disabled:text-gui-unavailable-dark dark:disabled:text-gui-unavailable disabled:hover:bg-gui-unavailable dark:disabled:hover:bg-gui-unavailable-dark; + } + + .ui-button-priority-base { + @apply bg-gradient-active-orange hover:bg-gradient-to-r hover:from-orange-800 hover:to-orange-800 active:bg-gradient-to-r active:from-orange-800 active:to-orange-800 disabled:bg-none ui-button-disabled-base; + } + + .ui-button-primary-base { + @apply bg-neutral-1300 dark:bg-neutral-000 text-neutral-000 dark:text-neutral-1300 hover:bg-neutral-1200 dark:hover:bg-neutral-100 active:bg-neutral-1100 dark:active:bg-neutral-200 ui-button-disabled-base; + } + + .ui-button-secondary-base { + @apply text-neutral-1300 dark:text-neutral-000 border border-neutral-600 dark:border-neutral-700 hover:border-neutral-700 dark:hover:border-neutral-600 active:border-neutral-400 dark:active:border-neutral-800 active:text-neutral-1000 dark:active:text-neutral-300 disabled:border-gui-unavailable dark:disabled:border-gui-unavailable-dark disabled:text-gui-unavailable dark:disabled:text-gui-unavailable-dark; + } + + .ui-button-priority-lg { + @apply ui-button-lg-base ui-button-priority-base; + } + + .ui-button-priority { + @apply ui-button-md-base ui-button-priority-base; + } + + .ui-button-priority-sm { + @apply ui-button-sm-base ui-button-priority-base; + } + + .ui-button-priority-xs { + @apply ui-button-xs-base ui-button-priority-base; + } + + .ui-button-primary-lg { + @apply ui-button-lg-base ui-button-primary-base; + } + + .ui-button-primary { + @apply ui-button-md-base ui-button-primary-base; + } + + .ui-button-primary-sm { + @apply ui-button-sm-base ui-button-primary-base; + } + + .ui-button-primary-xs { + @apply ui-button-xs-base ui-button-primary-base; + } + + .ui-button-secondary-lg { + @apply ui-button-lg-base ui-button-secondary-base; + } + + .ui-button-secondary { + @apply ui-button-md-base ui-button-secondary-base; + } + + .ui-button-secondary-sm { + @apply ui-button-sm-base ui-button-secondary-base; + } + + .ui-button-secondary-xs { + @apply ui-button-xs-base ui-button-secondary-base; + } + + .ui-button-lg-left-icon { + @apply pl-24; + } + + .ui-button-left-icon { + @apply pl-20; + } + + .ui-button-sm-left-icon { + @apply pl-[18px]; + } + + .ui-button-lg-right-icon { + @apply pr-24; + } + + .ui-button-right-icon { + @apply pr-20; + } + + .ui-button-sm-right-icon { + @apply pr-[18px]; + } +} diff --git a/src/core/styles/gui.css b/src/core/styles/gui.css new file mode 100644 index 000000000..8014d8ebd --- /dev/null +++ b/src/core/styles/gui.css @@ -0,0 +1,33 @@ +@layer components { + .ui-gui-menu1 { + @apply font-sans text-neutral-1000 text-p1 font-medium leading-snug; + } + + .ui-gui-menu2 { + @apply font-sans text-neutral-1000 text-p2 font-medium leading-snug; + } + + .ui-gui-menu3 { + @apply font-sans text-neutral-1000 text-p3 font-medium leading-snug; + } + + .ui-gui-menu4 { + @apply font-sans text-neutral-1000 text-p4 font-medium leading-snug; + } + + .ui-gui-button1 { + @apply font-sans text-p1 font-bold leading-snug; + } + + .ui-gui-button2 { + @apply font-sans text-p2 font-bold leading-snug; + } + + .ui-gui-button3 { + @apply font-sans text-p3 font-bold leading-snug; + } + + .ui-gui-button4 { + @apply font-sans text-p4 font-bold leading-snug; + } +} diff --git a/src/core/styles/properties.css b/src/core/styles/properties.css index c1fa135a6..062788d2b 100644 --- a/src/core/styles/properties.css +++ b/src/core/styles/properties.css @@ -86,6 +86,7 @@ --color-gui-blue-active-dark: #0080ff; --color-gui-blue-focus: #80b9f2; --color-gui-unavailable: #a8a8a8; + --color-gui-unavailable-dark: #575757; --color-gui-success-green: #11cb24; --color-gui-error-red: #fb0c0c; --color-gui-focus: #80b9f2; diff --git a/src/core/styles/text.css b/src/core/styles/text.css index e88204ee9..a0819c6bd 100644 --- a/src/core/styles/text.css +++ b/src/core/styles/text.css @@ -165,20 +165,4 @@ .ui-figcaption { @apply font-mono text-p3 text-neutral-800; } - - .ui-menu-label-1 { - @apply font-sans text-neutral-1000 text-p1 font-medium leading-snug; - } - - .ui-menu-label-2 { - @apply font-sans text-neutral-1000 text-p2 font-medium leading-snug; - } - - .ui-menu-label-3 { - @apply font-sans text-neutral-1000 text-p3 font-medium leading-snug; - } - - .ui-menu-label-4 { - @apply font-sans text-neutral-1000 text-p4 font-medium leading-snug; - } } diff --git a/tailwind.config.js b/tailwind.config.js index bf970b0a4..634b3e91f 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -128,6 +128,7 @@ module.exports = { "gui-blue-focus": "var(--color-gui-blue-focus)", "gui-blue-visited": "var(--color-gui-blue-focus)", "gui-unavailable": "var(--color-gui-unavailable)", + "gui-unavailable-dark": "var(--color-gui-unavailable-dark)", "gui-success-green": "var(--color-gui-success-green)", "gui-error-red": "var(--color-gui-error-red)", "gui-focus": "var(--color-gui-focus)", From 7a51f2429cc6031bd48bdcdbe46f98d56acba9b9 Mon Sep 17 00:00:00 2001 From: Jamie Henson Date: Thu, 21 Nov 2024 13:18:31 +0000 Subject: [PATCH 3/5] chore: remove shadows from typo/colors stories --- src/core/styles/Typography.stories.tsx | 2 +- src/core/styles/colors/Colors.stories.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/core/styles/Typography.stories.tsx b/src/core/styles/Typography.stories.tsx index d850610dd..f32a1ed25 100644 --- a/src/core/styles/Typography.stories.tsx +++ b/src/core/styles/Typography.stories.tsx @@ -54,7 +54,7 @@ const fontCell = (style) => (
diff --git a/src/core/styles/colors/Colors.stories.tsx b/src/core/styles/colors/Colors.stories.tsx index 84babbb31..a2db1829e 100644 --- a/src/core/styles/colors/Colors.stories.tsx +++ b/src/core/styles/colors/Colors.stories.tsx @@ -9,7 +9,7 @@ const colorSet = (colors, useClass = "") => colors.map((color) => (
Date: Thu, 21 Nov 2024 13:54:05 +0000 Subject: [PATCH 4/5] chore: revise Storybook category names and order --- .storybook/application.css | 3 +- .storybook/preview.tsx | 6 +- src/core/Accordion/Accordion.stories.tsx | 2 +- src/core/Code/Code.stories.tsx | 2 +- .../Code/__snapshots__/Code.stories.tsx.snap | 10 +- .../ContactFooter/ContactFooter.stories.tsx | 2 +- .../ContactFooter.stories.tsx.snap | 2 +- .../CookieMessage/CookieMessage.stories.tsx | 2 +- .../CookieMessage.stories.tsx.snap | 2 +- .../CustomerLogos/CustomerLogos.stories.tsx | 2 +- .../CustomerLogos.stories.tsx.snap | 2 +- .../DropdownMenu/DropdownMenu.stories.tsx | 2 +- .../DropdownMenu.stories.tsx.snap | 2 +- src/core/Expander/Expander.stories.tsx | 2 +- .../__snapshots__/Expander.stories.tsx.snap | 10 +- .../FeaturedLink/FeaturedLink.stories.tsx | 2 +- .../FeaturedLink.stories.tsx.snap | 12 +- src/core/Flash/Flash.stories.tsx | 2 +- .../__snapshots__/Flash.stories.tsx.snap | 2 +- src/core/Footer/Footer.stories.tsx | 2 +- .../__snapshots__/Footer.stories.tsx.snap | 2 +- src/core/Icon/Icon.stories.tsx | 2 +- .../Icon/__snapshots__/Icon.stories.tsx.snap | 16 +- src/core/Loader/Loader.stories.tsx | 2 +- .../__snapshots__/Loader.stories.tsx.snap | 6 +- src/core/Logo/Logo.stories.tsx | 2 +- .../Logo/__snapshots__/Logo.stories.tsx.snap | 2 +- src/core/Meganav/Meganav.stories.tsx | 2 +- src/core/ProductTile/ProductTile.stories.tsx | 2 +- .../ProductTile.stories.tsx.snap | 6 +- src/core/Slider/Slider.stories.tsx | 2 +- .../__snapshots__/Slider.stories.tsx.snap | 6 +- src/core/Status/Status.stories.tsx | 2 +- src/core/Table/Table.stories.tsx | 2 +- .../__snapshots__/Table.stories.tsx.snap | 2 +- src/core/Tooltip/Tooltip.stories.tsx | 2 +- .../__snapshots__/Tooltip.stories.tsx.snap | 6 +- src/core/styles/Forms.stories.tsx | 2 +- src/core/styles/Layout.stories.tsx | 2 +- src/core/styles/LegacyButton.stories.tsx | 2 +- src/core/styles/Shadows.stories.tsx | 2 +- src/core/styles/Typography.stories.tsx | 2 +- .../__snapshots__/Forms.stories.tsx.snap | 10 +- .../__snapshots__/Layout.stories.tsx.snap | 12 +- .../LegacyButton.stories.tsx.snap | 250 ++++++++++++++++++ .../__snapshots__/Shadows.stories.tsx.snap | 6 +- .../__snapshots__/Typography.stories.tsx.snap | 90 +++---- src/core/styles/colors/Colors.stories.tsx | 2 +- .../__snapshots__/Colors.stories.tsx.snap | 174 ++++++------ 49 files changed, 470 insertions(+), 219 deletions(-) create mode 100644 src/core/styles/__snapshots__/LegacyButton.stories.tsx.snap diff --git a/.storybook/application.css b/.storybook/application.css index 7bb271778..5c255b7df 100644 --- a/.storybook/application.css +++ b/.storybook/application.css @@ -46,13 +46,14 @@ .ui-theme-dark .sbdocs-content > *, .ui-theme-dark .sb-anchor > h3, .ui-theme-dark .sb-anchor > p, +.ui-theme-dark .sb-anchor > div > p, .ui-theme-dark .sb-anchor > p > code { @apply text-neutral-000; } .ui-theme-dark .sbdocs td, .ui-theme-dark .sbdocs th { - @apply text-neutral-200; + @apply !text-neutral-200; } .ui-theme-dark .sbdocs td { diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx index 96a24aa1c..c0dd1612f 100644 --- a/.storybook/preview.tsx +++ b/.storybook/preview.tsx @@ -37,7 +37,7 @@ const preview = { options: { storySort: { method: "alphabetical", - order: ["CSS", "Features", "JS Components", "Brand"], + order: ["Features", "Components", "Styles"], }, }, darkMode: { @@ -52,8 +52,8 @@ const preview = { brandImage: brandImage, }, stylePreview: true, - darkClass: ["ui-theme-dark"], - lightClass: ["ui-theme-light"], + darkClass: "ui-theme-dark", + lightClass: "ui-theme-light", }, }, loaders: [mswLoader], diff --git a/src/core/Accordion/Accordion.stories.tsx b/src/core/Accordion/Accordion.stories.tsx index 50c03716d..df6692a52 100644 --- a/src/core/Accordion/Accordion.stories.tsx +++ b/src/core/Accordion/Accordion.stories.tsx @@ -74,7 +74,7 @@ const AccordionPresentation = ({ data, options }: AccordionProps) => ( ); export default { - title: "JS Components/Accordion", + title: "Components/Accordion", component: Accordion, }; diff --git a/src/core/Code/Code.stories.tsx b/src/core/Code/Code.stories.tsx index f7c210abf..bbf4d5c3f 100644 --- a/src/core/Code/Code.stories.tsx +++ b/src/core/Code/Code.stories.tsx @@ -1,7 +1,7 @@ import Code from "../Code"; export default { - title: "JS Components/Code", + title: "Components/Code", component: Code, tags: ["autodocs"], }; diff --git a/src/core/Code/__snapshots__/Code.stories.tsx.snap b/src/core/Code/__snapshots__/Code.stories.tsx.snap index 4cef5e33b..afb08987a 100644 --- a/src/core/Code/__snapshots__/Code.stories.tsx.snap +++ b/src/core/Code/__snapshots__/Code.stories.tsx.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`JS Components/Code CodeWithLines smoke-test 1`] = ` +exports[`Components/Code CodeWithLines smoke-test 1`] = `
@@ -98,7 +98,7 @@ exports[`JS Components/Code CodeWithLines smoke-test 1`] = `
`; -exports[`JS Components/Code Java smoke-test 1`] = ` +exports[`Components/Code Java smoke-test 1`] = `
@@ -179,7 +179,7 @@ channel.subscribe(
`; -exports[`JS Components/Code Javascript smoke-test 1`] = ` +exports[`Components/Code Javascript smoke-test 1`] = `
@@ -254,7 +254,7 @@ exports[`JS Components/Code Javascript smoke-test 1`] = `
`; -exports[`JS Components/Code Kotlin smoke-test 1`] = ` +exports[`Components/Code Kotlin smoke-test 1`] = `
@@ -309,7 +309,7 @@ exports[`JS Components/Code Kotlin smoke-test 1`] = `
`; -exports[`JS Components/Code Swift smoke-test 1`] = ` +exports[`Components/Code Swift smoke-test 1`] = `
diff --git a/src/core/ContactFooter/ContactFooter.stories.tsx b/src/core/ContactFooter/ContactFooter.stories.tsx index 60042c472..eb7a2f6ff 100644 --- a/src/core/ContactFooter/ContactFooter.stories.tsx +++ b/src/core/ContactFooter/ContactFooter.stories.tsx @@ -1,7 +1,7 @@ import ContactFooter from "../ContactFooter"; export default { - title: "JS Components/Contact Footer", + title: "Components/Contact Footer", component: ContactFooter, parameters: { layout: "fullscreen", diff --git a/src/core/ContactFooter/__snapshots__/ContactFooter.stories.tsx.snap b/src/core/ContactFooter/__snapshots__/ContactFooter.stories.tsx.snap index 82458df10..9fa2fdb17 100644 --- a/src/core/ContactFooter/__snapshots__/ContactFooter.stories.tsx.snap +++ b/src/core/ContactFooter/__snapshots__/ContactFooter.stories.tsx.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`JS Components/Contact Footer Default smoke-test 1`] = ` +exports[`Components/Contact Footer Default smoke-test 1`] = `
diff --git a/src/core/CookieMessage/CookieMessage.stories.tsx b/src/core/CookieMessage/CookieMessage.stories.tsx index e89172098..fd64859a2 100644 --- a/src/core/CookieMessage/CookieMessage.stories.tsx +++ b/src/core/CookieMessage/CookieMessage.stories.tsx @@ -1,7 +1,7 @@ import CookieMessage from "../CookieMessage"; export default { - title: "JS Components/Cookie Message", + title: "Components/Cookie Message", component: CookieMessage, args: { cookieId: "cookie-namespace", diff --git a/src/core/CookieMessage/__snapshots__/CookieMessage.stories.tsx.snap b/src/core/CookieMessage/__snapshots__/CookieMessage.stories.tsx.snap index a89b0ff98..d43d5e63d 100644 --- a/src/core/CookieMessage/__snapshots__/CookieMessage.stories.tsx.snap +++ b/src/core/CookieMessage/__snapshots__/CookieMessage.stories.tsx.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`JS Components/Cookie Message Default smoke-test 1`] = ` +exports[`Components/Cookie Message Default smoke-test 1`] = `