diff --git a/apps/website/pages/components/button/code.tsx b/apps/website/pages/components/button/code.tsx new file mode 100644 index 0000000000..dd7055f5a4 --- /dev/null +++ b/apps/website/pages/components/button/code.tsx @@ -0,0 +1,17 @@ +import Head from "next/head"; +import type { ReactElement } from "react"; +import ButtonPageLayout from "screens/components/button/ButtonPageLayout"; +import ButtonCodePage from "screens/components/button/code/ButtonCodePage"; + +const Code = () => ( + <> + + Button Code — Halstack Design System + + + +); + +Code.getLayout = (page: ReactElement) => {page}; + +export default Code; diff --git a/apps/website/pages/components/button/index.tsx b/apps/website/pages/components/button/index.tsx index 4ff2fbb40a..0aad0ca371 100644 --- a/apps/website/pages/components/button/index.tsx +++ b/apps/website/pages/components/button/index.tsx @@ -1,21 +1,17 @@ import Head from "next/head"; import type { ReactElement } from "react"; import ButtonPageLayout from "screens/components/button/ButtonPageLayout"; -import ButtonCodePage from "screens/components/button/code/ButtonCodePage"; +import ButtonOverviewPage from "screens/components/button/overview/ButtonOverviewPage"; -const Index = () => { - return ( - <> - - Button — Halstack Design System - - - - ); -}; +const Index = () => ( + <> + + Button — Halstack Design System + + + +); -Index.getLayout = function getLayout(page: ReactElement) { - return {page}; -}; +Index.getLayout = (page: ReactElement) => {page}; export default Index; diff --git a/apps/website/pages/components/button/specifications.tsx b/apps/website/pages/components/button/specifications.tsx deleted file mode 100644 index 4d8ec9c7c8..0000000000 --- a/apps/website/pages/components/button/specifications.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import Head from "next/head"; -import type { ReactElement } from "react"; -import ButtonPageLayout from "screens/components/button/ButtonPageLayout"; -import ButtonSpecsPage from "screens/components/button/specs/ButtonSpecsPage"; - -const Specifications = () => { - return ( - <> - - Button Specs — Halstack Design System - - - - ); -}; - -Specifications.getLayout = function getLayout(page: ReactElement) { - return {page}; -}; - -export default Specifications; diff --git a/apps/website/pages/components/button/usage.tsx b/apps/website/pages/components/button/usage.tsx deleted file mode 100644 index 2cacf4f08d..0000000000 --- a/apps/website/pages/components/button/usage.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import Head from "next/head"; -import type { ReactElement } from "react"; -import ButtonPageLayout from "screens/components/button/ButtonPageLayout"; -import ButtonUsagePage from "screens/components/button/usage/ButtonUsagePage"; - -const Usage = () => { - return ( - <> - - Button Usage — Halstack Design System - - - - ); -}; - -Usage.getLayout = function getLayout(page: ReactElement) { - return {page}; -}; - -export default Usage; diff --git a/apps/website/screens/common/QuickNavContainer.tsx b/apps/website/screens/common/QuickNavContainer.tsx index 92aab42ff1..1a7e1f3f82 100644 --- a/apps/website/screens/common/QuickNavContainer.tsx +++ b/apps/website/screens/common/QuickNavContainer.tsx @@ -29,7 +29,7 @@ const getSubSectionsLinks = (sections: SectionType[]) => { return linksList; }; -const DxcQuickNavContainer = ({ title, sections, startHeadingLevel = 1 }: QuickNavContainerTypes): JSX.Element => ( +const DxcQuickNavContainer = ({ title = "On this page", sections, startHeadingLevel = 1 }: QuickNavContainerTypes): JSX.Element => ( {sections.map((section) => ( diff --git a/apps/website/screens/components/button/ButtonPageLayout.tsx b/apps/website/screens/components/button/ButtonPageLayout.tsx index 2c0a7a3f15..2f3b8b0c50 100644 --- a/apps/website/screens/components/button/ButtonPageLayout.tsx +++ b/apps/website/screens/components/button/ButtonPageLayout.tsx @@ -6,9 +6,8 @@ import { ReactNode } from "react"; const ButtonPageHeading = ({ children }: { children: ReactNode }) => { const tabs = [ - { label: "Code", path: "/components/button" }, - { label: "Usage", path: "/components/button/usage" }, - { label: "Specifications", path: "/components/button/specifications" }, + { label: "Overview", path: "/components/button" }, + { label: "Code", path: "/components/button/code" }, ]; return ( @@ -18,12 +17,9 @@ const ButtonPageHeading = ({ children }: { children: ReactNode }) => { Buttons are basic interface elements that initialize an action or function when the user interacts with - them. The appearance of the button should suggest the user takes an action that leads to different - scenarios. These elements that reinforce to the user the necessity to interact are called CTA (Call to - Action) components, which basically are designed to capture user attention and improve the user experience - within the application. + them. - + {children} diff --git a/apps/website/screens/components/button/code/ButtonCodePage.tsx b/apps/website/screens/components/button/code/ButtonCodePage.tsx index a551b9a4a5..55b13598f7 100644 --- a/apps/website/screens/components/button/code/ButtonCodePage.tsx +++ b/apps/website/screens/components/button/code/ButtonCodePage.tsx @@ -3,7 +3,6 @@ import Code from "@/common/Code"; import DocFooter from "@/common/DocFooter"; import QuickNavContainer from "@/common/QuickNavContainer"; import QuickNavContainerLayout from "@/common/QuickNavContainerLayout"; -import StatusBadge from "@/common/StatusBadge"; import Example from "@/common/example/Example"; import basicUsage from "./examples/basicUsage"; import semantic from "./examples/semantic"; @@ -26,63 +25,13 @@ const sections = [ - label - - string - - Text to be placed in the button. - - - - - mode - - 'primary' | 'secondary' | 'tertiary' - - The available button modes. - - 'primary' - - - - - - - semantic - - - - 'default' | 'error' | 'warning' | 'success' | 'info' - - Specifies the semantic meaning of the buttons, which determines its color. - - 'default' - - - - title - - string - - - Text representing advisory information related to the button's action. Under the hood, this prop also - serves as an accessible label for the component. - - - - - - type - - 'button' | 'reset' | 'submit' - + disabled - Sets the type attribute of the HTML button element. See{" "} - - MDN - {" "} - for further information. + boolean + If true, the component will be disabled. - 'button' + false @@ -111,13 +60,32 @@ const sections = [ - disabled + label - boolean + string - If true, the component will be disabled. + Text to be placed in the button. + - + + + margin - false + 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | Margin + + + Size of the margin to be applied to the component. You can pass an object with 'top', 'bottom', 'left' and + 'right' properties in order to specify different margin sizes. + + - + + + mode + + 'primary' | 'secondary' | 'tertiary' + + The available button modes. + + 'primary' @@ -129,23 +97,17 @@ const sections = [ - - margin + semantic - 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | Margin + 'default' | 'error' | 'warning' | 'success' | 'info' + Specifies the semantic meaning of the buttons, which determines its color. - Size of the margin to be applied to the component. You can pass an object with 'top', 'bottom', 'left' and - 'right' properties in order to specify different margin sizes. + 'default' - - - - - - size - - + size { @@ -170,6 +132,33 @@ const sections = [ 0 + + title + + string + + + Text representing advisory information related to the button's action. Under the hood, this prop also + serves as an accessible label for the component. + + - + + + type + + 'button' | 'reset' | 'submit' + + + Sets the type attribute of the HTML button element. See{" "} + + MDN + {" "} + for further information. + + + 'button' + + ), @@ -181,14 +170,14 @@ const sections = [ title: "Basic usage", content: , }, - { - title: "Semantic", - content: , - }, { title: "Icons", content: , }, + { + title: "Semantic", + content: , + }, { title: "Size", content: , @@ -197,15 +186,13 @@ const sections = [ }, ]; -const ButtonCodePage = () => { - return ( - - - - - - - ); -}; +const ButtonCodePage = () => ( + + + + + + +); export default ButtonCodePage; diff --git a/apps/website/screens/components/button/usage/ButtonUsagePage.tsx b/apps/website/screens/components/button/overview/ButtonOverviewPage.tsx similarity index 88% rename from apps/website/screens/components/button/usage/ButtonUsagePage.tsx rename to apps/website/screens/components/button/overview/ButtonOverviewPage.tsx index c101c6c266..c08ec795b4 100644 --- a/apps/website/screens/components/button/usage/ButtonUsagePage.tsx +++ b/apps/website/screens/components/button/overview/ButtonOverviewPage.tsx @@ -10,30 +10,46 @@ import QuickNavContainerLayout from "@/common/QuickNavContainerLayout"; import QuickNavContainer from "@/common/QuickNavContainer"; import DocFooter from "@/common/DocFooter"; import Example from "@/common/example/Example"; -import variants from "./examples/variants"; import icons from "./examples/iconUsage"; +import semantics from "./examples/semantics"; +import variants from "./examples/variants"; import HeaderDescriptionCell from "@/common/HeaderDescriptionCell"; import Code from "@/common/Code"; import Image from "@/common/Image"; -import semanticButtons from "./images/semantic_buttons.png"; +import anatomy from "./images/button_anatomy.png"; const sections = [ { - title: "Usage", + title: "Introduction", + content: ( + + The Halstack button component is a versatile and accessible UI element designed to trigger user actions across + applications. It supports multiple variants, including primary, secondary, and text buttons, ensuring + flexibility in different use cases. The button's appearance suggests the user takes an action that leads to + different scenarios. These elements that reinforce to the user the necessity to interact are called CTA (Call to + Action) components, which basically are designed to capture user attention and improve the user experience + within the application. + + ), + }, + { + title: "Anatomy", content: ( - - - In instances where buttons are vertically stacked, buttons should be the same length. - - - Horizontally displayed buttons are dependent on the amount of text, so button lengths may vary, always - considering the minimum and maximum established sizes. - - Text or icon on a button should always be centered. - - There must be 8 pixels of space between horizontally displayed buttons. - - + <> + Button's anatomy + + + Container: the interactive/clickable area of the button. + + + Icon: a visual element that complements the label, providing additional meaning or + enhancing recognition. + + + Label: displays the textual action that the button is going to carry out. + + + ), }, { @@ -192,7 +208,7 @@ const sections = [ - Semantic buttons based on their purpose + ), }, @@ -415,15 +431,13 @@ const sections = [ }, ]; -const ButtonUsagePage = () => { - return ( - - - - - - - ); -}; +const ButtonOverviewPage = () => ( + + + + + + +); -export default ButtonUsagePage; +export default ButtonOverviewPage; diff --git a/apps/website/screens/components/button/usage/examples/iconUsage.ts b/apps/website/screens/components/button/overview/examples/iconUsage.ts similarity index 64% rename from apps/website/screens/components/button/usage/examples/iconUsage.ts rename to apps/website/screens/components/button/overview/examples/iconUsage.ts index 08b9634d21..3a486b6ed5 100644 --- a/apps/website/screens/components/button/usage/examples/iconUsage.ts +++ b/apps/website/screens/components/button/overview/examples/iconUsage.ts @@ -1,29 +1,18 @@ import { DxcButton, DxcFlex, DxcInset } from "@dxc-technology/halstack-react"; const code = `() => { - return ( - - + + + - { - + diff --git a/apps/website/screens/components/button/overview/examples/semantics.ts b/apps/website/screens/components/button/overview/examples/semantics.ts new file mode 100644 index 0000000000..d2a4c0b758 --- /dev/null +++ b/apps/website/screens/components/button/overview/examples/semantics.ts @@ -0,0 +1,23 @@ +import { DxcButton, DxcInset, DxcFlex } from "@dxc-technology/halstack-react"; + +const code = `() => { + return ( + + + + + + + + + + ); +}`; + +const scope = { + DxcButton, + DxcFlex, + DxcInset, +}; + +export default { code, scope }; diff --git a/apps/website/screens/components/button/usage/examples/variants.ts b/apps/website/screens/components/button/overview/examples/variants.ts similarity index 100% rename from apps/website/screens/components/button/usage/examples/variants.ts rename to apps/website/screens/components/button/overview/examples/variants.ts diff --git a/apps/website/screens/components/button/overview/images/button_anatomy.png b/apps/website/screens/components/button/overview/images/button_anatomy.png new file mode 100644 index 0000000000..2b55662daa Binary files /dev/null and b/apps/website/screens/components/button/overview/images/button_anatomy.png differ diff --git a/apps/website/screens/components/button/specs/ButtonSpecsPage.tsx b/apps/website/screens/components/button/specs/ButtonSpecsPage.tsx deleted file mode 100644 index a6c4a5969a..0000000000 --- a/apps/website/screens/components/button/specs/ButtonSpecsPage.tsx +++ /dev/null @@ -1,2015 +0,0 @@ -import { DxcLink, DxcBulletedList, DxcFlex, DxcTable, DxcParagraph } from "@dxc-technology/halstack-react"; -import QuickNavContainerLayout from "@/common/QuickNavContainerLayout"; -import DocFooter from "@/common/DocFooter"; -import QuickNavContainer from "@/common/QuickNavContainer"; -import Code from "@/common/Code"; -import Figure from "@/common/Figure"; -import Image from "@/common/Image"; -import buttonSpecsImage from "./images/button_specs.png"; -import buttonStatesImage from "./images/button_states.png"; -import buttonAnatomyImage from "./images/button_anatomy.png"; - -const sections = [ - { - title: "Specifications", - content: ( -
- Button design specifications -
- ), - }, - { - title: "States and semantics", - content: ( - <> - - The states are the different behaviors of the button component based on the interaction of the user. For the - desktop version, we contemplate five different states by which can pass. - - - States: enabled, hover, focus, active and{" "} - disabled. - - - Semantics: default, error, warning,{" "} - success and info. - -
- Button states and semantics -
- - ), - }, - { - title: "Anatomy", - content: ( - <> - Button anatomy - - Container - Icon - Label - - - ), - }, - { - title: "Design tokens", - subSections: [ - { - title: "General", - subSections: [ - { - title: "Color", - content: ( - - - - Component token - Element - Core token - Value - - - - - - focusBorderColor - - Container border:focus - - color-blue-500 - - #33aaff - - - - ), - }, - { - title: "Spacing", - content: ( - - - - Component token - Element - Core token - Value - - - - - - paddingSmallTop - - Container (small height) - - spacing-0 - - 0rem / 0px - - - - paddingSmallLeft - - Container (small height) - - spacing-08 - - 0.5rem / 8px - - - - paddingSmallBottom - - Container (small height) - - spacing-0 - - 0rem / 0px - - - - paddingSmallRight - - Container (small height) - - spacing-08 - - 0.5rem / 8px - - - - paddingSmallOnlyIconTop - - Container (small height) - - spacing-0 - - 0rem / 0px - - - - paddingSmallOnlyIconLeft - - Container (small height) - - spacing-04 - - 0.25rem / 4px - - - - paddingSmallOnlyIconBottom - - Container (small height) - - spacing-0 - - 0rem / 0px - - - - paddingSmallOnlyIconRight - - Container (small height) - - spacing-04 - - 0.25rem / 4px - - - - paddingMediumTop - - Container (medium height) - - spacing-0 - - 0rem / 0px - - - - paddingMediumLeft - - Container (medium height) - - spacing-08 - - 0.5rem / 8px - - - - paddingMediumBottom - - Container (medium height) - - spacing-0 - - 0rem / 0px - - - - paddingMediumRight - - Container (medium height) - - spacing-08 - - 0.5rem / 8px - - - - paddingMediumOnlyIconTop - - Container (medium height) - - spacing-0 - - 0rem / 0px - - - - paddingMediumOnlyIconLeft - - Container (medium height) - - spacing-08 - - 0.5rem / 8px - - - - paddingMediumOnlyIconBottom - - Container (medium height) - - spacing-0 - - 0rem / 0px - - - - paddingMediumOnlyIconRight - - Container (medium height) - - spacing-08 - - 0.5rem / 8px - - - - paddingLargeTop - - Container (large height) - - spacing-0 - - 0rem / 0px - - - - paddingLargeLeft - - Container (large height) - - spacing-16 - - 1rem / 16px - - - - paddingLargeBottom - - Container (large height) - - spacing-0 - - 0rem / 0px - - - - paddingLargeRight - - Container (large height) - - spacing-16 - - 1rem / 16px - - - - paddingLargeOnlyIconTop - - Container (large height) - - spacing-0 - - 0rem / 0px - - - - paddingLargeOnlyIconLeft - - Container (large height) - - spacing-08 - - 0.5rem / 8px - - - - paddingLargeOnlyIconBottom - - Container (large height) - - spacing-0 - - 0rem / 0px - - - - paddingLargeOnlyIconRight - - Container (large height) - - spacing-08 - - 0.5rem / 8px - - - - ), - }, - { - title: "Width", - content: ( - <> - - The component width can adopt the following values: - - - - - Width - Value - - - - - - small - - 60px - - - - medium - - 240px - - - - large - - 480px - - - - fillParent - - - - - - - fitContent - - - - - - - - The component height is fixed: - - - - - Height - Value - - - - - - min-height - - 40px - - - - - ), - }, - { - title: "Margin", - content: ( - <> - - - - Margin - Value - - - - - - xxsmall - - 6px - - - - xsmall - - 16px - - - - small - - 24px - - - - medium - - 36px - - - - large - - 48px - - - - xlarge - - 64px - - - - xxlarge - - 100px - - - - - These values can be applied independently to each side of the component: top,{" "} - bottom, left,right. - - - ), - }, - { - title: "Typography", - content: ( - - - - Component token - Property - Core token - Value - - - - - - labelFontLineHeight - - line-height - - font-leading-normal - - 1.5em - - - - labelLetterSpacing - - letter-spacing - - font-spacing-wide-01 - - 0.025em - - - - ), - }, - ], - }, - { - title: "Primary", - subSections: [ - { - title: "Color", - content: ( - - - - Component token - Element - Core token - Value - - - - - - primaryDefaultBackgroundColor - - Button container (default) - - color-purple-700 - - #5f249f - - - - primaryErrorBackgroundColor - - Button container (error) - - color-red-700 - - #d0011b - - - - primaryWarningBackgroundColor - - Button container (warning) - - color-orange-700 - - #c26c0a - - - - primarySuccessBackgroundColor - - Button container (success) - - color-green-700 - - #24a148 - - - - primaryInfoBackgroundColor - - Button container (info) - - color-blue-700 - - #0086e6 - - - - primaryDefaultFontColor - - Label (default) - - color-white - - #ffffff - - - - primaryErrorFontColor - - Label (error) - - color-white - - #ffffff - - - - primaryWarningFontColor - - Label (warning) - - color-white - - #ffffff - - - - primarySuccessFontColor - - Label (success) - - color-white - - #ffffff - - - - primaryInfoFontColor - - Label (info) - - color-white - - #ffffff - - - - primaryHoverDefaultBackgroundColor - - Container fill:hover (default) - - color-purple-800 - - #4b1c7d - - - - primaryHoverErrorBackgroundColor - - Container fill:hover (error) - - color-red-800 - - #980115 - - - - primaryHoverWarningBackgroundColor - - Container fill:hover (warning) - - color-orange-800 - - #915108 - - - - primaryHoverSuccessBackgroundColor - - Container fill:hover (success) - - color-green-800 - - #1c7d38 - - - - primaryHoverInfoBackgroundColor - - Container fill:hover (info) - - color-blue-800 - - #0067b3 - - - - primaryActiveDefaultBackgroundColor - - Container fill:active (default) - - color-purple-900 - - #321353 - - - - primaryActiveErrorBackgroundColor - - Container fill:active (error) - - color-red-900 - - #65010e - - - - primaryActiveWarningBackgroundColor - - Container fill:active (warning) - - color-orange-900 - - #613605 - - - - primaryActiveSuccessBackgroundColor - - Container fill:active (success) - - color-green-900 - - #135325 - - - - primaryActiveInfoBackgroundColor - - Container fill:active (info) - - color-blue-900 - - #003c66 - - - - primaryDisabledDefaultBackgroundColor - - Container fill:disabled (default) - - color-purple-100 - - #f2eafa - - - - primaryDisabledErrorBackgroundColor - - Container fill:disabled (error) - - color-red-100 - - #ffe6e9 - - - - primaryDisabledWarningBackgroundColor - - Container fill:disabled (warning) - - color-orange-100 - - #fef3e7 - - - - primaryDisabledSuccessBackgroundColor - - Container fill:disabled (success) - - color-green-100 - - #eafaef - - - - primaryDisabledInfoBackgroundColor - - Container fill:disabled (info) - - color-blue-100 - - #e6f4ff - - - - primaryDisabledDefaultFontColor - - Label:disabled (default) - - color-purple-300 - - #cbacec - - - - primaryDisabledErrorFontColor - - Label:disabled (error) - - color-red-300 - - #fe9aa7 - - - - primaryDisabledWarningFontColor - - Label:disabled (warning) - - color-orange-300 - - #facf9e - - - - primaryDisabledSuccessFontColor - - Label:disabled (success) - - color-green-300 - - #acecbe - - - - primaryDisabledInfoFontColor - - Label:disabled (info) - - color-blue-300 - - #99d5ff - - - - ), - }, - { - title: "Border", - content: ( - - - - Component token - Element - Core token - Value - - - - - - primaryBorderThickness - - Container - - border-width-0 - - 0rem / 0px - - - - primaryBorderStyle - - Container - - border-style-none - - none - - - - primaryBorderRadius - - Container - - border-radius-medium - - 0.25rem / 4px - - - - ), - }, - { - title: "Typography", - content: ( - - - - Component token - Element - Core token - Value - - - - - - primaryFontFamily - - Label - - font-family-sans - - 'Open Sans', sans-serif - - - - primarySmallFontSize - - Label (small height) - - font-scale-02 - - 0.875 rem / 14px - - - - primaryMediumFontSize - - Label (medium height) - - font-scale-02 - - 0.875 rem / 14px - - - - primaryLargeFontSize - - Label (large height) - - font-scale-03 - - 1 rem / 16px - - - - primaryFontWeight - - Label - - font-semibold - - 600 - - - - ), - }, - ], - }, - { - title: "Secondary", - subSections: [ - { - title: "Color", - content: ( - - - - Component token - Element - Core token - Value - - - - - - secondaryDefaultBackgroundColor - - Container fill (default) - - color-transparent - - transparent - - - - secondaryErrorBackgroundColor - - Container fill (error) - - color-transparent - - transparent - - - - secondaryWarningBackgroundColor - - Container fill (warning) - - color-transparent - - transparent - - - - secondarySuccessBackgroundColor - - Container fill (success) - - color-transparent - - transparent - - - - secondaryInfoBackgroundColor - - Container fill (info) - - color-transparent - - transparent - - - - secondaryDefaultFontColor - - Label (default) - - color-purple-700 - - #5f249f - - - - secondaryErrorFontColor - - Label (error) - - color-red-700 - - #d0011b - - - - secondaryWarningFontColor - - Label (warning) - - color-orange-700 - - #c26c0a - - - - secondarySuccessFontColor - - Label (success) - - color-green-700 - - #24a148 - - - - secondaryInfoFontColor - - Label (info) - - color-blue-700 - - #0086e6 - - - - secondaryDefaultBorderColor - - Container border (default) - - color-purple-700 - - #5f249f - - - - secondaryErrorBorderColor - - Container border (error) - - color-red-700 - - #d0011b - - - - secondaryWarningBorderColor - - Container border (warning) - - color-orange-700 - - #c26c0a - - - - secondarySuccessBorderColor - - Container border (success) - - color-green-700 - - #24a148 - - - - secondaryInfoBorderColor - - Container border (info) - - color-blue-700 - - #0086e6 - - - - secondaryHoverDefaultBackgroundColor - - Container fill:hover (default) - - color-purple-700 - - #5f249f - - - - secondaryHoverErrorBackgroundColor - - Container fill:hover (error) - - color-red-700 - - #d0011b - - - - secondaryHoverWarningBackgroundColor - - Container fill:hover (warning) - - color-orange-700 - - #c26c0a - - - - secondaryHoverSuccessBackgroundColor - - Container fill:hover (success) - - color-green-700 - - #24a148 - - - - secondaryHoverInfoBackgroundColor - - Container fill:hover (info) - - color-blue-700 - - #0086e6 - - - - secondaryHoverDefaultFontColor - - Label:hover (default) - - color-white - - #ffffff - - - - secondaryHoverErrorFontColor - - Label:hover (error) - - color-white - - #ffffff - - - - secondaryHoverWarningFontColor - - Label:hover (warning) - - color-white - - #ffffff - - - - secondaryHoverSuccessFontColor - - Label:hover (success) - - color-white - - #ffffff - - - - secondaryHoverInfoFontColor - - Label:hover (info) - - color-white - - #ffffff - - - - secondaryActiveDefaultBackgroundColor - - Container fill:active (default) - - color-purple-800 - - #4b1c7d - - - - secondaryActiveErrorBackgroundColor - - Container fill:active (error) - - color-red-800 - - #980115 - - - - secondaryActiveWarningBackgroundColor - - Container fill:active (warning) - - color-orange-800 - - #915108 - - - - secondaryActiveSuccessBackgroundColor - - Container fill:active (success) - - color-green-800 - - #1c7d38 - - - - secondaryActiveInfoBackgroundColor - - Container fill:active (info) - - color-blue-800 - - #0067b3 - - - - secondaryDisabledDefaultBackgroundColor - - Container fill:disabled (default) - - color-transparent - - transparent - - - - secondaryDisabledErrorBackgroundColor - - Container fill:disabled (error) - - color-transparent - - transparent - - - - secondaryDisabledWarningBackgroundColor - - Container fill:disabled (warning) - - color-transparent - - transparent - - - - secondaryDisabledSuccessBackgroundColor - - Container fill:disabled (success) - - color-transparent - - transparent - - - - secondaryDisabledInfoBackgroundColor - - Container fill:disabled (info) - - color-transparent - - transparent - - - - secondaryDisabledDefaultFontColor - - Label:disabled (default) - - color-purple-300 - - #cbacec - - - - secondaryDisabledErrorFontColor - - Label:disabled (error) - - color-red-300 - - #fe9aa7 - - - - secondaryDisabledWarningFontColor - - Label:disabled (warning) - - color-orange-300 - - #facf9e - - - - secondaryDisabledSuccessFontColor - - Label:disabled (success) - - color-green-300 - - #acecbe - - - - secondaryDisabledInfoFontColor - - Label:disabled (info) - - color-blue-300 - - #99d5ff - - - - secondaryDisabledDefaultBorderColor - - Container border:disabled (default) - - color-purple-300 - - #cbacec - - - - secondaryDisabledErrorBorderColor - - Container border:disabled (error) - - color-red-300 - - #fe9aa7 - - - - secondaryDisabledWarningBorderColor - - Container border:disabled (warning) - - color-orange-300 - - #facf9e - - - - secondaryDisabledSuccessBorderColor - - Container border:disabled (success) - - color-green-300 - - #acecbe - - - - secondaryDisabledInfoBorderColor - - Container border:disabled (info) - - color-blue-300 - - #99d5ff - - - - ), - }, - { - title: "Border", - content: ( - - - - Component token - Element - Core token - Value - - - - - - secondaryBorderThickness - - Container - - border-width-1 - - 1px - - - - secondaryBorderStyle - - Container - - border-style-solid - - solid - - - - secondaryBorderRadius - - Container - - border-radius-medium - - 0.25rem / 4px - - - - ), - }, - { - title: "Typography", - content: ( - - - - Component token - Element - Core token - Value - - - - - - secondaryFontFamily - - Label - - font-family-sans - - 'Open Sans', sans-serif - - - - secondarySmallFontSize - - Label (small height) - - font-scale-02 - - 0.875rem / 14px - - - - secondaryMediumFontSize - - Label (small height) - - font-scale-02 - - 0.875rem / 14px - - - - secondaryLargeFontSize - - Label - - font-scale-03 - - 1rem / 16px - - - - secondaryFontWeight - - Label - - font-semibold - - 600 - - - - ), - }, - ], - }, - { - title: "Tertiary", - subSections: [ - { - title: "Color", - content: ( - - - - Component token - Element - Core token - Value - - - - - - tertiaryDefaultBackgroundColor - - Container fill (default) - - color-transparent - - transparent - - - - tertiaryErrorBackgroundColor - - Container fill (error) - - color-transparent - - transparent - - - - tertiaryWarningBackgroundColor - - Container fill (warning) - - color-transparent - - transparent - - - - tertiarySuccessBackgroundColor - - Container fill (success) - - color-transparent - - transparent - - - - tertiaryInfoBackgroundColor - - Container fill (info) - - color-transparent - - transparent - - - - tertiaryDefaultFontColor - - Label (default) - - color-purple-700 - - #5f249f - - - - tertiaryErrorFontColor - - Label (error) - - color-red-700 - - #d0011b - - - - tertiaryWarningFontColor - - Label (warning) - - color-orange-700 - - #c26c0a - - - - tertiarySuccessFontColor - - Label (success) - - color-green-700 - - #24a148 - - - - tertiaryInfoFontColor - - Label (info) - - color-blue-700 - - #0086e6 - - - - tertiaryHoverDefaultBackgroundColor - - Container fill:hover (default) - - color-purple-100 - - #f2eafa - - - - tertiaryHoverErrorBackgroundColor - - Container fill:hover (error) - - color-red-100 - - #ffe6e9 - - - - tertiaryHoverWarningBackgroundColor - - Container fill:hover (warning) - - color-orange-100 - - #fef3e7 - - - - tertiaryHoverSuccessBackgroundColor - - Container fill:hover (Success) - - color-green-100 - - #eafaef - - - - tertiaryHoverInfoBackgroundColor - - Container fill:hover (info) - - color-blue-100 - - #e6f4ff - - - - tertiaryActiveDefaultBackgroundColor - - Container fill:active (default) - - color-purple-200 - - #e5d5f6 - - - - tertiaryActiveErrorBackgroundColor - - Container fill:active (error) - - color-red-200 - - #ffccd3 - - - - tertiaryActiveWarningBackgroundColor - - Container fill:active (warning) - - color-orange-200 - - #fce7cf - - - - tertiaryActiveSuccessBackgroundColor - - Container fill:active (success) - - color-green-200 - - #d5f6df - - - - tertiaryActiveInfoBackgroundColor - - Container fill:active (info) - - color-blue-200 - - #cceaff - - - - tertiaryDisabledDefaultBackgroundColor - - Container fill:disabled (default) - - color-transparent - - transparent - - - - tertiaryDisabledErrorBackgroundColor - - Container fill:disabled (error) - - color-transparent - - transparent - - - - tertiaryDisabledWarningBackgroundColor - - Container fill:disabled (warning) - - color-transparent - - transparent - - - - tertiaryDisabledSuccessBackgroundColor - - Container fill:disabled (success) - - color-transparent - - transparent - - - - tertiaryDisabledInfoBackgroundColor - - Container fill:disabled (info) - - color-transparent - - transparent - - - - tertiaryDisabledDefaultFontColor - - Label:disabled (default) - - color-purple-300 - - #cbacec - - - - tertiaryDisabledErrorFontColor - - Label:disabled (error) - - color-red-300 - - #fe9aa7 - - - - tertiaryDisabledWarningFontColor - - Label:disabled (warning) - - color-orange-300 - - #facf9e - - - - tertiaryDisabledSuccessFontColor - - Label:disabled (success) - - color-green-300 - - #acecbe - - - - tertiaryDisabledInfoFontColor - - Label:disabled (info) - - color-blue-300 - - #99d5ff - - - - ), - }, - { - title: "Border", - content: ( - - - - Component token - Element - Core token - Value - - - - - - tertiaryBorderThickness - - Container - - border-width-0 - - 0rem / 0px - - - - tertiaryBorderStyle - - Container - - border-style-none - - none - - - - tertiaryBorderRadius - - Container - - border-radius-medium - - 0.25rem / 4px - - - - ), - }, - { - title: "Typography", - content: ( - - - - Component token - Element - Core token - Value - - - - - - tertiaryFontFamily - - Label - - font-family-sans - - 'Open Sans', sans-serif - - - - tertiarySmallFontSize - - Label (small height) - - font-scale-02 - - 0.875rem / 14px - - - - tertiaryMediumFontSize - - Label (medium height) - - font-scale-03 - - 0.875rem / 14px - - - - tertiaryLargeFontSize - - Label (large height) - - font-scale-03 - - 1 rem / 16px - - - - tertiaryFontWeight - - Label - - font-semibold - - 600 - - - - ), - }, - ], - }, - ], - }, - { - title: "Accessibility", - content: ( - - - Understanding WCAG 2.2 -{" "} - - 2.4.7: Focus Visible - - - - Understanding WCAG 2.2 -{" "} - - 3.2.2: On Input - - - - WAI-ARIA Authoring Practices Guide (APG) -{" "} - - Button Pattern - - - - ), - }, -]; - -const ButtonSpecsPage = () => { - return ( - - - - - - - ); -}; - -export default ButtonSpecsPage; diff --git a/apps/website/screens/components/button/specs/images/button_anatomy.png b/apps/website/screens/components/button/specs/images/button_anatomy.png deleted file mode 100644 index 954e2df9e0..0000000000 Binary files a/apps/website/screens/components/button/specs/images/button_anatomy.png and /dev/null differ diff --git a/apps/website/screens/components/button/specs/images/button_specs.png b/apps/website/screens/components/button/specs/images/button_specs.png deleted file mode 100644 index fd267c630a..0000000000 Binary files a/apps/website/screens/components/button/specs/images/button_specs.png and /dev/null differ diff --git a/apps/website/screens/components/button/specs/images/button_states.png b/apps/website/screens/components/button/specs/images/button_states.png deleted file mode 100644 index d8faa623e1..0000000000 Binary files a/apps/website/screens/components/button/specs/images/button_states.png and /dev/null differ diff --git a/apps/website/screens/components/button/usage/images/semantic_buttons.png b/apps/website/screens/components/button/usage/images/semantic_buttons.png deleted file mode 100644 index 102018d9b6..0000000000 Binary files a/apps/website/screens/components/button/usage/images/semantic_buttons.png and /dev/null differ diff --git a/packages/lib/.storybook/components/ExampleContainer.tsx b/packages/lib/.storybook/components/ExampleContainer.tsx index a72cf04038..7a1ad960e6 100644 --- a/packages/lib/.storybook/components/ExampleContainer.tsx +++ b/packages/lib/.storybook/components/ExampleContainer.tsx @@ -13,17 +13,20 @@ type PseudoStates = type Props = { children?: ReactNode; - pseudoState?: PseudoStates; + pseudoState?: PseudoStates | PseudoStates[]; expanded?: boolean; }; -const ExampleContainer = ({ children, pseudoState, expanded = false }: Props): JSX.Element => ( - +const ExampleContainer = ({ children, expanded, pseudoState }: Props): JSX.Element => ( + `${state}-all`).join(" ") : `${pseudoState}-all`} + expanded={expanded} + > {children} ); -const DivContainer = styled.div<{ expanded: boolean }>` +const DivContainer = styled.div<{ expanded: Props["expanded"] }>` margin: 15px; ${(props) => props.expanded && "height: 100vh;"} `; diff --git a/packages/lib/.storybook/preview-head.html b/packages/lib/.storybook/preview-head.html index e28cb145ff..4e1ea405ff 100644 --- a/packages/lib/.storybook/preview-head.html +++ b/packages/lib/.storybook/preview-head.html @@ -2,7 +2,6 @@ rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap&family=Material+Symbols+Outlined:FILL@0..1" /> -