diff --git a/apps/website/screens/common/example/Example.tsx b/apps/website/screens/common/example/Example.tsx index 380e272215..89b3387f2f 100644 --- a/apps/website/screens/common/example/Example.tsx +++ b/apps/website/screens/common/example/Example.tsx @@ -76,11 +76,11 @@ const Example = ({ actionsVisible = true, defaultIsVisible = false, example }: E {actionsVisible && ( - {isCodeVisible && } + {isCodeVisible && } diff --git a/apps/website/screens/common/themes/advanced-theme.json b/apps/website/screens/common/themes/advanced-theme.json index ebc800ae1a..07dc71315a 100644 --- a/apps/website/screens/common/themes/advanced-theme.json +++ b/apps/website/screens/common/themes/advanced-theme.json @@ -118,50 +118,160 @@ "button": { "labelFontLineHeight": "1.5em", "labelLetterSpacing": "0.025em", - "paddingLeft": "0.5rem", - "paddingRight": "0.5rem", - "paddingTop": "0.5rem", - "paddingBottom": "0.5rem", - "focusBorderColor": "#0095ff", - "primaryBackgroundColor": "#5f249f", - "primaryFontColor": "#ffffff", - "primaryHoverBackgroundColor": "#4b1c7d", - "primaryActiveBackgroundColor": "#321353", - "primaryDisabledBackgroundColor": "#f2f2f2", - "primaryDisabledFontColor": "#999999", + "paddingSmallTop": "0px", + "paddingSmallLeft": "8px", + "paddingSmallBottom": "0px", + "paddingSmallRight": "8px", + "paddingSmallOnlyIconTop": "0px", + "paddingSmallOnlyIconLeft": "4px", + "paddingSmallOnlyIconBottom": "0px", + "paddingSmallOnlyIconRight": "4px", + "paddingMediumTop": "0px", + "paddingMediumLeft": "8px", + "paddingMediumBottom": "0px", + "paddingMediumRight": "8px", + "paddingMediumOnlyIconTop": "0px", + "paddingMediumOnlyIconLeft": "8px", + "paddingMediumOnlyIconBottom": "0px", + "paddingMediumOnlyIconRight": "8px", + "paddingLargeTop": "0px", + "paddingLargeLeft": "16px", + "paddingLargeBottom": "0px", + "paddingLargeRight": "16px", + "paddingLargeOnlyIconTop": "0px", + "paddingLargeOnlyIconLeft": "8px", + "paddingLargeOnlyIconBottom": "0px", + "paddingLargeOnlyIconRight": "8px", + "focusBorderColor": "#33aaff", + "primaryDefaultBackgroundColor": "#5f249f", + "primaryErrorBackgroundColor": "#d0011b", + "primaryWarningBackgroundColor": "#c26c0a", + "primarySuccessBackgroundColor": "#24a148", + "primaryInfoBackgroundColor": "#0086e6", + "primaryDefaultFontColor": "#ffffff", + "primaryErrorFontColor": "#ffffff", + "primaryWarningFontColor": "#ffffff", + "primarySuccessFontColor": "#ffffff", + "primaryInfoFontColor": "#ffffff", + "primaryHoverDefaultBackgroundColor": "#4b1c7d", + "primaryHoverErrorBackgroundColor": "#980115", + "primaryHoverWarningBackgroundColor": "#915108", + "primaryHoverSuccessBackgroundColor": "#1c7d38", + "primaryHoverInfoBackgroundColor": "#0067b3", + "primaryActiveDefaultBackgroundColor": "#321353", + "primaryActiveErrorBackgroundColor": "#65010e", + "primaryActiveWarningBackgroundColor": "#613605", + "primaryActiveSuccessBackgroundColor": "#135325", + "primaryActiveInfoBackgroundColor": "#003c66", + "primaryDisabledDefaultBackgroundColor": "#f2eafa", + "primaryDisabledErrorBackgroundColor": "#ffe6e9", + "primaryDisabledWarningBackgroundColor": "#fef3e7", + "primaryDisabledSuccessBackgroundColor": "#eafaef", + "primaryDisabledInfoBackgroundColor": "#e6f4ff", + "primaryDisabledDefaultFontColor": "#cbacec", + "primaryDisabledErrorFontColor": "#fe9aa7", + "primaryDisabledWarningFontColor": "#facf9e", + "primaryDisabledSuccessFontColor": "#acecbe", + "primaryDisabledInfoFontColor": "#99d5ff", "primaryBorderThickness": "0px", "primaryBorderStyle": "none", "primaryBorderRadius": "0.25rem", "primaryFontFamily": "Open Sans, sans-serif", - "primaryFontSize": "1rem", - "primaryFontWeight": "400", - "secondaryBackgroundColor": "transparent", - "secondaryFontColor": "#5f249f", - "secondaryHoverFontColor": "#ffffff", - "secondaryBorderColor": "#5f249f", - "secondaryHoverBackgroundColor": "#5f249f", - "secondaryActiveBackgroundColor": "#321353", - "secondaryDisabledBackgroundColor": "transparent", - "secondaryDisabledFontColor": "#999999", - "secondaryDisabledBorderColor": "#999999", + "primarySmallFontSize": "0.875rem", + "primaryMediumFontSize": "0.875rem", + "primaryLargeFontSize": "1rem", + "primaryFontWeight": "600", + "secondaryDefaultBackgroundColor": "transparent", + "secondaryErrorBackgroundColor": "transparent", + "secondaryWarningBackgroundColor": "transparent", + "secondarySuccessBackgroundColor": "transparent", + "secondaryInfoBackgroundColor": "transparent", + "secondaryDefaultFontColor": "#5f249f", + "secondaryErrorFontColor": "#d0011b", + "secondaryWarningFontColor": "#c26c0a", + "secondarySuccessFontColor": "#24a148", + "secondaryInfoFontColor": "#0086e6", + "secondaryDefaultBorderColor": "#5f249f", + "secondaryErrorBorderColor": "#d0011b", + "secondaryWarningBorderColor": "#c26c0a", + "secondarySuccessBorderColor": "#24a148", + "secondaryInfoBorderColor": "#0086e6", + "secondaryHoverDefaultBackgroundColor": "#5f249f", + "secondaryHoverErrorBackgroundColor": "#d0011b", + "secondaryHoverWarningBackgroundColor": "#c26c0a", + "secondaryHoverSuccessBackgroundColor": "#24a148", + "secondaryHoverInfoBackgroundColor": "#0086e6", + "secondaryHoverDefaultFontColor": "#ffffff", + "secondaryHoverErrorFontColor": "#ffffff", + "secondaryHoverWarningFontColor": "#ffffff", + "secondaryHoverSuccessFontColor": "#ffffff", + "secondaryHoverInfoFontColor": "#ffffff", + "secondaryActiveDefaultBackgroundColor": "#4b1c7d", + "secondaryActiveErrorBackgroundColor": "#980115", + "secondaryActiveWarningBackgroundColor": "#915108", + "secondaryActiveSuccessBackgroundColor": "#1c7d38", + "secondaryActiveInfoBackgroundColor": "#0067b3", + "secondaryDisabledDefaultBackgroundColor": "transparent", + "secondaryDisabledErrorBackgroundColor": "transparent", + "secondaryDisabledWarningBackgroundColor": "transparent", + "secondaryDisabledSuccessBackgroundColor": "transparent", + "secondaryDisabledInfoBackgroundColor": "transparent", + "secondaryDisabledDefaultFontColor": "#cbacec", + "secondaryDisabledErrorFontColor": "#fe9aa7", + "secondaryDisabledWarningFontColor": "#facf9e", + "secondaryDisabledSuccessFontColor": "#acecbe", + "secondaryDisabledInfoFontColor": "#99d5ff", + "secondaryDisabledDefaultBorderColor": "#cbacec", + "secondaryDisabledErrorBorderColor": "#fe9aa7", + "secondaryDisabledWarningBorderColor": "#facf9e", + "secondaryDisabledSuccessBorderColor": "#acecbe", + "secondaryDisabledInfoBorderColor": "#99d5ff", "secondaryBorderThickness": "1px", "secondaryBorderStyle": "solid", "secondaryBorderRadius": "0.25rem", "secondaryFontFamily": "Open Sans, sans-serif", - "secondaryFontSize": "1rem", - "secondaryFontWeight": "400", - "textBackgroundColor": "transparent", - "textFontColor": "#5f249f", - "textHoverBackgroundColor": "#f2eafa", - "textActiveBackgroundColor": "#e5d5f6", - "textDisabledBackgroundColor": "transparent", - "textDisabledFontColor": "#999999", - "textBorderThickness": "0px", - "textBorderStyle": "none", - "textBorderRadius": "0.25rem", - "textFontFamily": "Open Sans, sans-serif", - "textFontSize": "1rem", - "textFontWeight": "400" + "secondarySmallFontSize": "0.875rem", + "secondaryMediumFontSize": "0.875rem", + "secondaryLargeFontSize": "1rem", + "secondaryFontWeight": "600", + "tertiaryDefaultBackgroundColor": "transparent", + "tertiaryErrorBackgroundColor": "transparent", + "tertiaryWarningBackgroundColor": "transparent", + "tertiarySuccessBackgroundColor": "transparent", + "tertiaryInfoBackgroundColor": "transparent", + "tertiaryDefaultFontColor": "#5f249f", + "tertiaryErrorFontColor": "#d0011b", + "tertiaryWarningFontColor": "#c26c0a", + "tertiarySuccessFontColor": "#24a148", + "tertiaryInfoFontColor": "#0086e6", + "tertiaryHoverDefaultBackgroundColor": "#f2eafa", + "tertiaryHoverErrorBackgroundColor": "#ffe6e9", + "tertiaryHoverWarningBackgroundColor": "#fef3e7", + "tertiaryHoverSuccessBackgroundColor": "#eafaef", + "tertiaryHoverInfoBackgroundColor": "#e6f4ff", + "tertiaryActiveDefaultBackgroundColor": "#e5d5f6", + "tertiaryActiveErrorBackgroundColor": "#ffccd3", + "tertiaryActiveWarningBackgroundColor": "#fce7cf", + "tertiaryActiveSuccessBackgroundColor": "#d5f6df", + "tertiaryActiveInfoBackgroundColor": "#cceaff", + "tertiaryDisabledDefaultBackgroundColor": "transparent", + "tertiaryDisabledErrorBackgroundColor": "transparent", + "tertiaryDisabledWarningBackgroundColor": "transparent", + "tertiaryDisabledSuccessBackgroundColor": "transparent", + "tertiaryDisabledInfoBackgroundColor": "transparent", + "tertiaryDisabledDefaultFontColor": "#cbacec", + "tertiaryDisabledErrorFontColor": "#fe9aa7", + "tertiaryDisabledWarningFontColor": "#facf9e", + "tertiaryDisabledSuccessFontColor": "#acecbe", + "tertiaryDisabledInfoFontColor": "#99d5ff", + "tertiaryBorderThickness": "0px", + "tertiaryBorderStyle": "none", + "tertiaryBorderRadius": "0.25rem", + "tertiaryFontFamily": "Open Sans, sans-serif", + "tertiarySmallFontSize": "0.875rem", + "tertiaryMediumFontSize": "0.875rem", + "tertiaryLargeFontSize": "1rem", + "tertiaryFontWeight": "600" }, "card": { "height": "220px", diff --git a/apps/website/screens/components/button/code/ButtonCodePage.tsx b/apps/website/screens/components/button/code/ButtonCodePage.tsx index 30699fe824..b0db17c04f 100644 --- a/apps/website/screens/components/button/code/ButtonCodePage.tsx +++ b/apps/website/screens/components/button/code/ButtonCodePage.tsx @@ -3,9 +3,12 @@ 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"; import icons from "./examples/icons"; +import sizes from "./examples/sizes"; import TableCode from "@/common/TableCode"; const sections = [ @@ -33,13 +36,28 @@ const sections = [ mode - 'primary' | 'secondary' | 'text' + '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 @@ -122,13 +140,22 @@ const sections = [ - - size - 'small' | 'medium' | 'large' | 'fillParent' | 'fitContent' + + + size + + + + + { + "{ height: 'small' | 'medium' | 'large'; width: 'small' | 'medium' | 'large' | 'fillParent' | 'fitContent' }" + } + - Size of the component. + Object used to define the dimensions of the button in terms of height and width. - 'fitContent' + {"{ height: 'large'; width: 'fitContent' }"} @@ -154,10 +181,18 @@ const sections = [ title: "Basic usage", content: , }, + { + title: "Semantic", + content: , + }, { title: "Icons", content: , }, + { + title: "Size", + content: , + }, ], }, ]; diff --git a/apps/website/screens/components/button/code/examples/semantic.ts b/apps/website/screens/components/button/code/examples/semantic.ts new file mode 100644 index 0000000000..16ab6332e7 --- /dev/null +++ b/apps/website/screens/components/button/code/examples/semantic.ts @@ -0,0 +1,23 @@ +import { DxcButton, DxcFlex, DxcInset } 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/code/examples/sizes.ts b/apps/website/screens/components/button/code/examples/sizes.ts new file mode 100644 index 0000000000..889e21ee7c --- /dev/null +++ b/apps/website/screens/components/button/code/examples/sizes.ts @@ -0,0 +1,39 @@ +import { DxcButton, DxcInset, DxcFlex } from "@dxc-technology/halstack-react"; + +const code = `() => { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}`; + +const scope = { + DxcButton, + DxcInset, + DxcFlex, +}; + +export default { code, scope }; diff --git a/apps/website/screens/components/button/specs/ButtonSpecsPage.tsx b/apps/website/screens/components/button/specs/ButtonSpecsPage.tsx index 68f3855518..50825f3a22 100644 --- a/apps/website/screens/components/button/specs/ButtonSpecsPage.tsx +++ b/apps/website/screens/components/button/specs/ButtonSpecsPage.tsx @@ -19,7 +19,7 @@ const sections = [ ), }, { - title: "States", + title: "States and semantics", content: ( <> @@ -30,8 +30,12 @@ const sections = [ States: enabled, hover, focus, active and{" "} disabled. -
- Button states + + Semantics: default, error, warning,{" "} + success and info. + +
+ Button states and semantics
), @@ -55,6 +59,33 @@ const sections = [ { title: "General", subSections: [ + { + title: "Color", + content: ( + + + + Component token + Element + Core token + Value + + + + + + focusBorderColor + + Container border:focus + + color-blue-500 + + #33aaff + + + + ), + }, { title: "Spacing", content: ( @@ -70,41 +101,241 @@ const sections = [ - paddingLeft + paddingSmallTop - Container + Container (small height) + + spacing-0 + + 0rem / 0px + + + + paddingSmallLeft + + Container (small height) - spacing-03 + spacing-08 0.5rem / 8px - paddingRight + paddingSmallBottom - Container + Container (small height) + + spacing-0 + + 0rem / 0px + + + + paddingSmallRight + + Container (small height) - spacing-03 + spacing-08 0.5rem / 8px - paddingTop + paddingSmallOnlyIconTop - Container + 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-03 + spacing-08 0.5rem / 8px - paddingBottom + paddingMediumBottom - Container + 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-03 + spacing-08 0.5rem / 8px @@ -113,7 +344,7 @@ const sections = [ ), }, { - title: "Size", + title: "Width", content: ( <> @@ -250,124 +481,940 @@ const sections = [ - Component token - Property - Core token - Value + 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 - - - labelFontLineHeight + secondaryDisabledInfoBackgroundColor - line-height + Container fill:disabled (info) - font-leading-normal + color-transparent - 1.5 em + transparent - labelLetterSpacing + secondaryDisabledDefaultFontColor - letter-spacing + Label:disabled (default) - font-spacing-wide-01 + color-purple-300 - 0.025 em + #cbacec - - - ), - }, - ], - }, - { - title: "Primary", - subSections: [ - { - title: "Color", - content: ( - - - Component token - Element - Core token - Value + + secondaryDisabledErrorFontColor + + Label:disabled (error) + + color-red-300 + + #fe9aa7 - - - primaryBackgroundColor + secondaryDisabledWarningFontColor - Button container + Label:disabled (warning) - color-purple-700 + color-orange-300 - #5f249f + #facf9e - primaryFontColor + secondaryDisabledSuccessFontColor - Label + Label:disabled (success) - color-white + color-green-300 - #ffffff + #acecbe - primaryHoverBackgroundColor + secondaryDisabledInfoFontColor - Container fill:hover + Label:disabled (info) - color-purple-800 + color-blue-300 - #4b1c7d + #99d5ff - primaryActiveBackgroundColor + secondaryDisabledDefaultBorderColor - Container fill:active + Container border:disabled (default) - color-purple-900 + color-purple-300 - #321353 + #cbacec - primaryDisabledBackgroundColor + secondaryDisabledErrorBorderColor - Container fill:disabled + Container border:disabled (error) - color-grey-100 + color-red-300 - #f2f2f2 + #fe9aa7 - primaryDisabledFontColor + secondaryDisabledWarningBorderColor - Label:disabled + Container border:disabled (warning) - color-grey-500 + color-orange-300 - #999999 + #facf9e - primaryFocusBorderColor + secondaryDisabledSuccessBorderColor - Container border:focus + Container border:disabled (success) + + color-green-300 + + #acecbe + + + + secondaryDisabledInfoBorderColor + + Container border:disabled (info) - color-blue-600 + color-blue-300 - #0095ff + #99d5ff @@ -388,27 +1435,27 @@ const sections = [ - primaryBorderThickness + secondaryBorderThickness Container - border-width-0 + border-width-1 - 0 + 1px - primaryBorderStyle + secondaryBorderStyle Container - border-style-none + border-style-solid - none + solid - primaryBorderRadius + secondaryBorderRadius Container @@ -435,7 +1482,7 @@ const sections = [ - primaryFontFamily + secondaryFontFamily Label @@ -445,23 +1492,43 @@ const sections = [ - primaryFontSize + 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 - 1 rem / 16px + 1rem / 16px - primaryFontWeight + secondaryFontWeight Label - font-regular + font-semibold - 400 + 600 @@ -470,7 +1537,7 @@ const sections = [ ], }, { - title: "Secondary", + title: "Tertiary", subSections: [ { title: "Color", @@ -487,9 +1554,9 @@ const sections = [ - secondaryBackgroundColor + tertiaryDefaultBackgroundColor - Container fill + Container fill (default) color-transparent @@ -497,215 +1564,199 @@ const sections = [ - secondaryFontColor + tertiaryErrorBackgroundColor - Label + Container fill (error) - color-purple-700 + color-transparent - #5f249f + transparent - secondaryBorderColor + tertiaryWarningBackgroundColor - Container border + Container fill (warning) - color-purple-700 + color-transparent - #5f249f + transparent - secondaryHoverBackgroundColor + tertiarySuccessBackgroundColor - Container fill:hover + Container fill (success) - color-purple-700 + color-transparent - #5f249f + transparent - secondaryHoverFontColor + tertiaryInfoBackgroundColor - Label:hover + Container fill (info) - color-white + color-transparent - #ffffff + transparent - secondaryActiveBackgroundColor + tertiaryDefaultFontColor - Container fill:active + Label (default) - color-purple-900 + color-purple-700 - #321353 + #5f249f - secondaryDisabledBackgroundColor + tertiaryErrorFontColor - Container fill:disabled + Label (error) - color-transparent + color-red-700 - transparent + #d0011b - secondaryDisabledFontColor + tertiaryWarningFontColor - Label:disabled + Label (warning) - color-grey-500 + color-orange-700 - #999999 + #c26c0a - secondaryFocusBorderColor + tertiarySuccessFontColor - Container border:focus + Label (success) - color-blue-600 + color-green-700 - #0095ff + #24a148 - secondaryDisabledBorderColor + tertiaryInfoFontColor - Container border:disabled + Label (info) - color-grey-500 + color-blue-700 - #999999 + #0086e6 - - - ), - }, - { - title: "Border", - content: ( - - - Component token - Element - Core token - Value + + tertiaryHoverDefaultBackgroundColor + + Container fill:hover (default) + + color-purple-100 + + #f2eafa - - - secondaryBorderThickness + tertiaryHoverErrorBackgroundColor - Container + Container fill:hover (error) - border-width-1 + color-red-100 - 1px + #ffe6e9 - secondaryBorderStyle + tertiaryHoverWarningBackgroundColor - Container + Container fill:hover (warning) - border-style-solid + color-orange-100 - solid + #fef3e7 - secondaryBorderRadius + tertiaryHoverSuccessBackgroundColor - Container + Container fill:hover (Success) - border-radius-medium + color-green-100 - 0.25rem / 4px + #eafaef - - - ), - }, - { - title: "Typography", - content: ( - - - Component token - Element - Core token - Value + + tertiaryHoverInfoBackgroundColor + + Container fill:hover (info) + + color-blue-100 + + #e6f4ff - - - secondaryFontFamily + tertiaryActiveDefaultBackgroundColor - Label + Container fill:active (default) - font-family-sans + color-purple-200 - 'Open Sans', sans-serif + #e5d5f6 - secondaryFontSize + tertiaryActiveErrorBackgroundColor - Label + Container fill:active (error) - font-scale-03 + color-red-200 - 16px / 1 rem + #ffccd3 - secondaryFontWeight + tertiaryActiveWarningBackgroundColor - Label + Container fill:active (warning) - font-regular + color-orange-200 - 400 + #fce7cf - - - ), - }, - ], - }, - { - title: "Text", - subSections: [ - { - title: "Color", - content: ( - - - Component token - Element - Core token - Value + + tertiaryActiveSuccessBackgroundColor + + Container fill:active (success) + + color-green-200 + + #d5f6df + + + + tertiaryActiveInfoBackgroundColor + + Container fill:active (info) + + color-blue-200 + + #cceaff - - - textBackgroundColor + tertiaryDisabledDefaultBackgroundColor - Container fill + Container fill:disabled (default) color-transparent @@ -713,39 +1764,39 @@ const sections = [ - textFontColor + tertiaryDisabledErrorBackgroundColor - Label + Container fill:disabled (error) - color-purple-700 + color-transparent - #5f249f + transparent - textHoverBackgroundColor + tertiaryDisabledWarningBackgroundColor - Container fill:hover + Container fill:disabled (warning) - color-purple-100 + color-transparent - #f2eafa + transparent - textActiveBackgroundColor + tertiaryDisabledSuccessBackgroundColor - Container fill:active + Container fill:disabled (success) - color-purple-200 + color-transparent - #e5d5f6 + transparent - textDisabledBackgroundColor + tertiaryDisabledInfoBackgroundColor - Container fill:disabled + Container fill:disabled (info) color-transparent @@ -753,23 +1804,53 @@ const sections = [ - textDisabledFontColor + tertiaryDisabledDefaultFontColor - Label:disabled + Label:disabled (default) - color-grey-500 + color-purple-300 - #999999 + #cbacec - textFocusBorderColor + tertiaryDisabledErrorFontColor - Container border:focus + 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-600 + color-blue-300 - #0095ff + #99d5ff @@ -790,17 +1871,17 @@ const sections = [ - textBorderThickness + tertiaryBorderThickness Container border-width-0 - 0 + 0rem / 0px - textBorderStyle + tertiaryBorderStyle Container @@ -810,7 +1891,7 @@ const sections = [ - textBorderRadius + tertiaryBorderRadius Container @@ -837,7 +1918,7 @@ const sections = [ - textFontFamily + tertiaryFontFamily Label @@ -847,23 +1928,43 @@ const sections = [ - textFontSize + tertiarySmallFontSize - Label + Label (small height) + + font-scale-02 + + 0.875rem / 14px + + + + tertiaryMediumFontSize + + Label (medium height) font-scale-03 - 16px / 1 rem + 0.875rem / 14px + + + + tertiaryLargeFontSize + + Label (large height) + + font-scale-03 + + 1 rem / 16px - textFontWeight + tertiaryFontWeight Label - font-regular + font-semibold - 400 + 600 diff --git a/apps/website/screens/components/button/specs/images/button_anatomy.png b/apps/website/screens/components/button/specs/images/button_anatomy.png index 26abeaab80..954e2df9e0 100644 Binary files a/apps/website/screens/components/button/specs/images/button_anatomy.png and b/apps/website/screens/components/button/specs/images/button_anatomy.png 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 index dc1f00bc1a..fd267c630a 100644 Binary files a/apps/website/screens/components/button/specs/images/button_specs.png and b/apps/website/screens/components/button/specs/images/button_specs.png 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 index 3e061819ff..d8faa623e1 100644 Binary files a/apps/website/screens/components/button/specs/images/button_states.png and b/apps/website/screens/components/button/specs/images/button_states.png differ diff --git a/apps/website/screens/components/button/usage/ButtonUsagePage.tsx b/apps/website/screens/components/button/usage/ButtonUsagePage.tsx index 631dafec9f..a0716fdc0b 100644 --- a/apps/website/screens/components/button/usage/ButtonUsagePage.tsx +++ b/apps/website/screens/components/button/usage/ButtonUsagePage.tsx @@ -1,4 +1,11 @@ -import { DxcBulletedList, DxcFlex, DxcTable, DxcParagraph } from "@dxc-technology/halstack-react"; +import { + DxcBulletedList, + DxcFlex, + DxcTable, + DxcParagraph, + DxcTypography, + DxcAlert, +} from "@dxc-technology/halstack-react"; import QuickNavContainerLayout from "@/common/QuickNavContainerLayout"; import QuickNavContainer from "@/common/QuickNavContainer"; import DocFooter from "@/common/DocFooter"; @@ -27,7 +34,6 @@ const sections = [ ), }, - { title: "Variants", content: ( @@ -37,7 +43,7 @@ const sections = [ attributes. - Variants: primary, secondary and text. + Variants: primary, secondary and tertiary. @@ -108,6 +114,295 @@ const sections = [ ), }, + { + title: "Semantic buttons", + content: ( + <> + + Semantic buttons use specific colors to convey the nature of the action they trigger. They provide immediate + context about the action's significance or the feedback it represents. + + + + + Semantic + Description + + + + + + + Default + + + + Neutral action with no specific context. Typically used for general actions. Shown in the brand's + primary color. Use for neutral actions such as "Submit", "Save" or "Continue.” + + + + + + Error + + + + Indicates a destructive action or highlights a critical issue. Styled in red. Use for actions like + "Delete", "Remove" or "Cancel Subscription.” + + + + + + Warning + + + + Alerts the user to potential issues or actions that need caution. Styled in orange. Use for actions like + "Warning" or "Attention Needed.” + + + + + + Success + + + + Represents a positive action or confirms the completion of a task. Styled in green. Use for actions like + "Confirm", "Complete" or "Approve.” + + + + + + Info + + + + Provides additional information or context. Shown in blue, the brand's secondary color. Use for actions + like "More Info", "Details" or "Learn More.” + + + + + + ), + }, + { + title: "Sizes", + content: ( + <> + + The context in which a button is used often dictates its size. Halstack provides buttons in different sizes to + help create interfaces that are not only functional but also intuitive and accessible, catering to a wide + range of user needs and interaction scenarios. + + + Varying button sizes help establish a clear visual hierarchy, guiding users towards the most critical actions. + Primary actions are made more prominent with larger buttons, while secondary actions use smaller buttons to + avoid distraction. + + + To maintain a clear and effective visual hierarchy, avoid overusing different button sizes within a single + interface. + + + ), + subSections: [ + { + title: "Height", + subSections: [ + { + title: "Small", + content: ( + <> + + Small buttons help to maintain a clean and uncluttered interface, especially in dense layouts. They + are suitable for scenarios where precise actions are needed, often accompanied by icons for quick + recognition. + + Use cases: + + + Compact spaces: Small buttons are ideal for areas with limited space, such as + tables, forms, and other components. + + + Secondary actions: They can be used for less prominent actions that are not the + primary focus of the user’s interaction. + + + + ), + }, + { + title: "Medium", + content: ( + <> + + Medium buttons provide a good balance between visibility and space usage, making them versatile for + various design contexts. + + Use cases: + + + General use: Medium buttons are the standard size for most button interactions + across web and mobile applications. + + + Primary actions: They are often used for primary actions on forms, dialogs, and + other key interaction points. + + + Consistency: Using medium buttons as the default ensures a consistent look and feel + across the application, aiding user familiarity and navigation. + + + + ), + }, + { + title: "Large", + content: ( + <> + + Large buttons draw attention and encourage interaction, which is vital for important actions. They + create a visual hierarchy, emphasizing the most important actions and guiding users towards them. + + Use cases: + + + Prominent actions: Large buttons are used for primary or critical actions that + require high visibility, such as "Submit", "Save" or "Purchase". + + + Call to action (CTA): They are often employed in call-to-action sections where user + engagement is crucial, like landing pages. + + + + ), + }, + ], + }, + ], + }, + { + title: "Best practices for button labels:", + subSections: [ + { + title: "Be clear and concise", + content: ( + + + Use actionable language: Start with a verb that clearly describes the action. Examples: + "Submit", "Save" or "Delete". + + + Keep it short: Aim for one or two words. Longer text can make buttons harder to read and + understand quickly. + + + ), + }, + { + title: "Ensure clarity", + content: ( + + + Avoid ambiguity: Make sure the button’s purpose is immediately clear. Avoid vague labels + like "Click here" or "Go". + + + Use specific nouns: If necessary, include a noun to provide more context. Examples: "Add + item", "View details". + + + ), + }, + { + title: "Maintain consistency", + content: ( + + + Consistent terminology: Use the same terms for similar actions across your interface to + avoid confusion. For example, always use "Submit" for form submissions. + + + Sentence case: Use sentence-style capitalization—only capitalize the first word. This + improves readability and looks more approachable. + + + ), + }, + { + title: "Focus on the user", + content: ( + + + User-centric language: Write from the user’s perspective. For actions that the user + performs, consider using first-person pronouns (e.g., "My profile"). + + + Positive tone: Where possible, frame actions positively to encourage interaction. For + example, use "Continue" instead of "Next". + + + ), + }, + { + title: "Accessibility", + content: ( + + + Descriptive labels: Ensure that the button copy makes sense out of context for screen + reader users. Avoid labels like "More" without additional context. + + + Avoid jargon: Use plain language that is easily understood by all users, including those + who may not be familiar with technical terms. + + + ), + }, + { + title: "Visual hierarchy", + content: ( + + + Primary action first: Ensure the primary action stands out with a prominent position and + styling. + + + Avoid redundant text: Do not include unnecessary words that do not add value to the + action. + + + ), + }, + { + title: "Tips", + content: ( + + + Test for clarity: Show your button text to others without context to see if they + understand the action. + + + Iterate based on feedback: Be open to changing your button copy based on user feedback + and testing results. + + + Avoid punctuation: Do not use end punctuation in button labels unless absolutely + necessary. + + + ), + }, + ], + }, ]; const ButtonUsagePage = () => { diff --git a/apps/website/screens/components/button/usage/examples/iconUsage.ts b/apps/website/screens/components/button/usage/examples/iconUsage.ts index a6879b4824..08b9634d21 100644 --- a/apps/website/screens/components/button/usage/examples/iconUsage.ts +++ b/apps/website/screens/components/button/usage/examples/iconUsage.ts @@ -6,10 +6,10 @@ const code = `() => { - + @@ -17,13 +17,13 @@ const code = `() => { { - + - + diff --git a/apps/website/screens/components/button/usage/examples/variants.ts b/apps/website/screens/components/button/usage/examples/variants.ts index fd15dec525..979a376fba 100644 --- a/apps/website/screens/components/button/usage/examples/variants.ts +++ b/apps/website/screens/components/button/usage/examples/variants.ts @@ -6,7 +6,7 @@ const code = `() => { - + ); diff --git a/apps/website/screens/components/date-input/code/examples/uncontrolled.ts b/apps/website/screens/components/date-input/code/examples/uncontrolled.ts index 35dd1d4082..24d17e9998 100644 --- a/apps/website/screens/components/date-input/code/examples/uncontrolled.ts +++ b/apps/website/screens/components/date-input/code/examples/uncontrolled.ts @@ -19,7 +19,7 @@ const code = `() => { clearable ref={inputRef} /> - + ); diff --git a/apps/website/screens/components/dialog/code/examples/withContent.ts b/apps/website/screens/components/dialog/code/examples/withContent.ts index 499fd53d0b..c002921d09 100644 --- a/apps/website/screens/components/dialog/code/examples/withContent.ts +++ b/apps/website/screens/components/dialog/code/examples/withContent.ts @@ -31,7 +31,7 @@ const code = `() => { - + diff --git a/apps/website/screens/principles/iconography/examples/buttonsWithIcon.ts b/apps/website/screens/principles/iconography/examples/buttonsWithIcon.ts index 566c8d35e3..d2179f8922 100644 --- a/apps/website/screens/principles/iconography/examples/buttonsWithIcon.ts +++ b/apps/website/screens/principles/iconography/examples/buttonsWithIcon.ts @@ -19,7 +19,7 @@ const code = `() => { } - mode="text" + mode="tertiary" title="Instagram social media" /> diff --git a/apps/website/screens/theme-generator/ImportDialog.tsx b/apps/website/screens/theme-generator/ImportDialog.tsx index 5eda58d649..3b117791f5 100644 --- a/apps/website/screens/theme-generator/ImportDialog.tsx +++ b/apps/website/screens/theme-generator/ImportDialog.tsx @@ -65,7 +65,7 @@ const ImportDialog = ({ customThemeSchema, setCustomTheme, setDialogVisible }: I verticalGrow="none" /> - + { { setCustomTheme(type === "advanced-theme" ? advancedTheme : opinionatedTheme); }} icon={icons.reset} - size="fillParent" + size={{ width: "fillParent" }} /> { setDialogVisible(true); }} icon={icons.import} - size="fillParent" + size={{ width: "fillParent" }} /> { downloadFile(customTheme); }} icon={icons.export} - size="fillParent" + size={{ width: "fillParent" }} /> diff --git a/apps/website/screens/theme-generator/components/previews/Button.tsx b/apps/website/screens/theme-generator/components/previews/Button.tsx index 1ad98c78e5..19be66a85c 100644 --- a/apps/website/screens/theme-generator/components/previews/Button.tsx +++ b/apps/website/screens/theme-generator/components/previews/Button.tsx @@ -1,30 +1,112 @@ import React from "react"; -import { DxcButton } from "@dxc-technology/halstack-react"; +import { DxcButton, DxcFlex } from "@dxc-technology/halstack-react"; import Mode from "../Mode"; -import linkedinIcon from "../../images/LinkedinIcon"; import PreviewContainer from "./PreviewContainer"; const Button = () => { - const onClick = () => { - console.log("click"); - }; - return ( - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); diff --git a/apps/website/screens/theme-generator/components/previews/Dialog.tsx b/apps/website/screens/theme-generator/components/previews/Dialog.tsx index 7b4678e55d..46702e8c8e 100644 --- a/apps/website/screens/theme-generator/components/previews/Dialog.tsx +++ b/apps/website/screens/theme-generator/components/previews/Dialog.tsx @@ -50,7 +50,7 @@ const Dialog = () => { Are you sure you want to delete the 3 selected documents? - + @@ -71,7 +71,7 @@ const Dialog = () => { - + diff --git a/apps/website/screens/theme-generator/components/previews/Table.tsx b/apps/website/screens/theme-generator/components/previews/Table.tsx index e6467395f7..cbc9ad670a 100644 --- a/apps/website/screens/theme-generator/components/previews/Table.tsx +++ b/apps/website/screens/theme-generator/components/previews/Table.tsx @@ -1,6 +1,6 @@ import React, { useState } from "react"; import styled from "styled-components"; -import { DxcTable, DxcResultsetTable, DxcButton } from "@dxc-technology/halstack-react"; +import { DxcTable, DxcResultsetTable } from "@dxc-technology/halstack-react"; import Mode from "../Mode"; import PreviewContainer from "./PreviewContainer"; diff --git a/apps/website/screens/theme-generator/themes/schemas/advanced.schema.json b/apps/website/screens/theme-generator/themes/schemas/advanced.schema.json index fe0c876872..76b97d5aa5 100644 --- a/apps/website/screens/theme-generator/themes/schemas/advanced.schema.json +++ b/apps/website/screens/theme-generator/themes/schemas/advanced.schema.json @@ -118,50 +118,160 @@ "button": { "labelFontLineHeight": "length", "labelLetterSpacing": "length", - "paddingLeft": "length", - "paddingRight": "length", - "paddingTop": "length", - "paddingBottom": "length", + "paddingSmallTop": "length", + "paddingSmallLeft": "length", + "paddingSmallBottom": "length", + "paddingSmallRight": "length", + "paddingSmallOnlyIconTop": "length", + "paddingSmallOnlyIconLeft": "length", + "paddingSmallOnlyIconBottom": "length", + "paddingSmallOnlyIconRight": "length", + "paddingMediumTop": "length", + "paddingMediumLeft": "length", + "paddingMediumBottom": "length", + "paddingMediumRight": "length", + "paddingMediumOnlyIconTop": "length", + "paddingMediumOnlyIconLeft": "length", + "paddingMediumOnlyIconBottom": "length", + "paddingMediumOnlyIconRight": "length", + "paddingLargeTop": "length", + "paddingLargeLeft": "length", + "paddingLargeBottom": "length", + "paddingLargeRight": "length", + "paddingLargeOnlyIconTop": "length", + "paddingLargeOnlyIconLeft": "length", + "paddingLargeOnlyIconBottom": "length", + "paddingLargeOnlyIconRight": "length", "focusBorderColor": "color", - "primaryBackgroundColor": "color", - "primaryFontColor": "color", - "primaryHoverBackgroundColor": "color", - "primaryActiveBackgroundColor": "color", - "primaryDisabledBackgroundColor": "color", - "primaryDisabledFontColor": "color", + "primaryDefaultBackgroundColor": "color", + "primaryErrorBackgroundColor": "color", + "primaryWarningBackgroundColor": "color", + "primarySuccessBackgroundColor": "color", + "primaryInfoBackgroundColor": "color", + "primaryDefaultFontColor": "color", + "primaryErrorFontColor": "color", + "primaryWarningFontColor": "color", + "primarySuccessFontColor": "color", + "primaryInfoFontColor": "color", + "primaryHoverDefaultBackgroundColor": "color", + "primaryHoverErrorBackgroundColor": "color", + "primaryHoverWarningBackgroundColor": "color", + "primaryHoverSuccessBackgroundColor": "color", + "primaryHoverInfoBackgroundColor": "color", + "primaryActiveDefaultBackgroundColor": "color", + "primaryActiveErrorBackgroundColor": "color", + "primaryActiveWarningBackgroundColor": "color", + "primaryActiveSuccessBackgroundColor": "color", + "primaryActiveInfoBackgroundColor": "color", + "primaryDisabledDefaultBackgroundColor": "color", + "primaryDisabledErrorBackgroundColor": "color", + "primaryDisabledWarningBackgroundColor": "color", + "primaryDisabledSuccessBackgroundColor": "color", + "primaryDisabledInfoBackgroundColor": "color", + "primaryDisabledDefaultFontColor": "color", + "primaryDisabledErrorFontColor": "color", + "primaryDisabledWarningFontColor": "color", + "primaryDisabledSuccessFontColor": "color", + "primaryDisabledInfoFontColor": "color", "primaryBorderThickness": "bWidth", "primaryBorderStyle": "bStyle", "primaryBorderRadius": "length", "primaryFontFamily": "fFamily", - "primaryFontSize": "length", + "primarySmallFontSize": "length", + "primaryMediumFontSize": "length", + "primaryLargeFontSize": "length", "primaryFontWeight": "fWeight", - "secondaryBackgroundColor": "color", - "secondaryFontColor": "color", - "secondaryHoverFontColor": "color", - "secondaryBorderColor": "color", - "secondaryHoverBackgroundColor": "color", - "secondaryActiveBackgroundColor": "color", - "secondaryDisabledBackgroundColor": "color", - "secondaryDisabledFontColor": "color", - "secondaryDisabledBorderColor": "color", + "secondaryDefaultBackgroundColor": "color", + "secondaryErrorBackgroundColor": "color", + "secondaryWarningBackgroundColor": "color", + "secondarySuccessBackgroundColor": "color", + "secondaryInfoBackgroundColor": "color", + "secondaryDefaultFontColor": "color", + "secondaryErrorFontColor": "color", + "secondaryWarningFontColor": "color", + "secondarySuccessFontColor": "color", + "secondaryInfoFontColor": "color", + "secondaryDefaultBorderColor": "color", + "secondaryErrorBorderColor": "color", + "secondaryWarningBorderColor": "color", + "secondarySuccessBorderColor": "color", + "secondaryInfoBorderColor": "color", + "secondaryHoverDefaultBackgroundColor": "color", + "secondaryHoverErrorBackgroundColor": "color", + "secondaryHoverWarningBackgroundColor": "color", + "secondaryHoverSuccessBackgroundColor": "color", + "secondaryHoverInfoBackgroundColor": "color", + "secondaryHoverDefaultFontColor": "color", + "secondaryHoverErrorFontColor": "color", + "secondaryHoverWarningFontColor": "color", + "secondaryHoverSuccessFontColor": "color", + "secondaryHoverInfoFontColor": "color", + "secondaryActiveDefaultBackgroundColor": "color", + "secondaryActiveErrorBackgroundColor": "color", + "secondaryActiveWarningBackgroundColor": "color", + "secondaryActiveSuccessBackgroundColor": "color", + "secondaryActiveInfoBackgroundColor": "color", + "secondaryDisabledDefaultBackgroundColor": "color", + "secondaryDisabledErrorBackgroundColor": "color", + "secondaryDisabledWarningBackgroundColor": "color", + "secondaryDisabledSuccessBackgroundColor": "color", + "secondaryDisabledInfoBackgroundColor": "color", + "secondaryDisabledDefaultFontColor": "color", + "secondaryDisabledErrorFontColor": "color", + "secondaryDisabledWarningFontColor": "color", + "secondaryDisabledSuccessFontColor": "color", + "secondaryDisabledInfoFontColor": "color", + "secondaryDisabledDefaultBorderColor": "color", + "secondaryDisabledErrorBorderColor": "color", + "secondaryDisabledWarningBorderColor": "color", + "secondaryDisabledSuccessBorderColor": "color", + "secondaryDisabledInfoBorderColor": "color", "secondaryBorderThickness": "bWidth", "secondaryBorderStyle": "bStyle", "secondaryBorderRadius": "length", "secondaryFontFamily": "fFamily", - "secondaryFontSize": "length", + "secondarySmallFontSize": "length", + "secondaryMediumFontSize": "length", + "secondaryLargeFontSize": "length", "secondaryFontWeight": "fWeight", - "textBackgroundColor": "color", - "textFontColor": "color", - "textHoverBackgroundColor": "color", - "textActiveBackgroundColor": "color", - "textDisabledBackgroundColor": "color", - "textDisabledFontColor": "color", - "textBorderThickness": "bWidth", - "textBorderStyle": "bStyle", - "textBorderRadius": "length", - "textFontFamily": "fFamily", - "textFontSize": "length", - "textFontWeight": "fWeight" + "tertiaryDefaultBackgroundColor": "color", + "tertiaryErrorBackgroundColor": "color", + "tertiaryWarningBackgroundColor": "color", + "tertiarySuccessBackgroundColor": "color", + "tertiaryInfoBackgroundColor": "color", + "tertiaryDefaultFontColor": "color", + "tertiaryErrorFontColor": "color", + "tertiaryWarningFontColor": "color", + "tertiarySuccessFontColor": "color", + "tertiaryInfoFontColor": "color", + "tertiaryHoverDefaultBackgroundColor": "color", + "tertiaryHoverErrorBackgroundColor": "color", + "tertiaryHoverWarningBackgroundColor": "color", + "tertiaryHoverSuccessBackgroundColor": "color", + "tertiaryHoverInfoBackgroundColor": "color", + "tertiaryActiveDefaultBackgroundColor": "color", + "tertiaryActiveErrorBackgroundColor": "color", + "tertiaryActiveWarningBackgroundColor": "color", + "tertiaryActiveSuccessBackgroundColor": "color", + "tertiaryActiveInfoBackgroundColor": "color", + "tertiaryDisabledDefaultBackgroundColor": "color", + "tertiaryDisabledErrorBackgroundColor": "color", + "tertiaryDisabledWarningBackgroundColor": "color", + "tertiaryDisabledSuccessBackgroundColor": "color", + "tertiaryDisabledInfoBackgroundColor": "color", + "tertiaryDisabledDefaultFontColor": "color", + "tertiaryDisabledErrorFontColor": "color", + "tertiaryDisabledWarningFontColor": "color", + "tertiaryDisabledSuccessFontColor": "color", + "tertiaryDisabledInfoFontColor": "color", + "tertiaryBorderThickness": "bWidth", + "tertiaryBorderStyle": "bStyle", + "tertiaryBorderRadius": "length", + "tertiaryFontFamily": "fFamily", + "tertiarySmallFontSize": "length", + "tertiaryMediumFontSize": "length", + "tertiaryLargeFontSize": "length", + "tertiaryFontWeight": "fWeight" }, "card": { "height": "length", @@ -225,7 +335,7 @@ "menuItemFontSize": "length", "menuItemFontStyle": "fStyle", "menuItemFontWeight": "fWeight", - "menuItemLineHeight": "24px", + "menuItemLineHeight": "length", "hoverMenuItemBackgroundColor": "color", "activeMenuItemBackgroundColor": "color", "selectedMenuItemBackgroundColor": "color", diff --git a/packages/lib/src/HalstackContext.tsx b/packages/lib/src/HalstackContext.tsx index b506daf28b..6c8cc9dc02 100644 --- a/packages/lib/src/HalstackContext.tsx +++ b/packages/lib/src/HalstackContext.tsx @@ -75,23 +75,35 @@ const parseTheme = (theme: DeepPartial): AdvancedTheme => { boxTokens.backgroundColor = theme?.box?.baseColor ?? boxTokens.backgroundColor; const buttonTokens = componentTokensCopy.button; - buttonTokens.primaryFontColor = theme?.button?.primaryFontColor ?? buttonTokens.primaryFontColor; - buttonTokens.primaryBackgroundColor = theme?.button?.baseColor ?? buttonTokens.primaryBackgroundColor; - buttonTokens.secondaryFontColor = theme?.button?.baseColor ?? buttonTokens.secondaryFontColor; - buttonTokens.secondaryHoverFontColor = theme?.button?.secondaryHoverFontColor ?? buttonTokens.secondaryHoverFontColor; - buttonTokens.secondaryBorderColor = theme?.button?.baseColor ?? buttonTokens.secondaryBorderColor; - buttonTokens.secondaryHoverBackgroundColor = theme?.button?.baseColor ?? buttonTokens.secondaryHoverBackgroundColor; - buttonTokens.textFontColor = theme?.button?.baseColor ?? buttonTokens.textFontColor; - buttonTokens.primaryHoverBackgroundColor = - subLightness(8, theme?.button?.baseColor) ?? buttonTokens.primaryHoverBackgroundColor; - buttonTokens.primaryActiveBackgroundColor = - subLightness(18, theme?.button?.baseColor) ?? buttonTokens.primaryActiveBackgroundColor; - buttonTokens.secondaryActiveBackgroundColor = - subLightness(18, theme?.button?.baseColor) ?? buttonTokens.secondaryActiveBackgroundColor; - buttonTokens.textHoverBackgroundColor = - addLightness(57, theme?.button?.baseColor) ?? buttonTokens.textHoverBackgroundColor; - buttonTokens.textActiveBackgroundColor = - addLightness(52, theme?.button?.baseColor) ?? buttonTokens.textActiveBackgroundColor; + buttonTokens.primaryDefaultFontColor = theme?.button?.primaryFontColor ?? buttonTokens.primaryDefaultFontColor; + buttonTokens.primaryDefaultBackgroundColor = theme?.button?.baseColor ?? buttonTokens.primaryDefaultBackgroundColor; + buttonTokens.secondaryDefaultFontColor = theme?.button?.baseColor ?? buttonTokens.secondaryDefaultFontColor; + buttonTokens.secondaryHoverDefaultFontColor = + theme?.button?.secondaryHoverFontColor ?? buttonTokens.secondaryHoverDefaultFontColor; + buttonTokens.secondaryDefaultBorderColor = theme?.button?.baseColor ?? buttonTokens.secondaryDefaultBorderColor; + buttonTokens.secondaryHoverDefaultBackgroundColor = + theme?.button?.baseColor ?? buttonTokens.secondaryHoverDefaultBackgroundColor; + buttonTokens.tertiaryDefaultFontColor = theme?.button?.baseColor ?? buttonTokens.tertiaryDefaultFontColor; + buttonTokens.primaryHoverDefaultBackgroundColor = + subLightness(8, theme?.button?.baseColor) ?? buttonTokens.primaryHoverDefaultBackgroundColor; + buttonTokens.primaryActiveDefaultBackgroundColor = + subLightness(18, theme?.button?.baseColor) ?? buttonTokens.primaryActiveDefaultBackgroundColor; + buttonTokens.secondaryActiveDefaultBackgroundColor = + subLightness(18, theme?.button?.baseColor) ?? buttonTokens.secondaryActiveDefaultBackgroundColor; + buttonTokens.tertiaryHoverDefaultBackgroundColor = + addLightness(57, theme?.button?.baseColor) ?? buttonTokens.tertiaryHoverDefaultBackgroundColor; + buttonTokens.tertiaryActiveDefaultBackgroundColor = + addLightness(52, theme?.button?.baseColor) ?? buttonTokens.tertiaryActiveDefaultBackgroundColor; + buttonTokens.primaryDisabledDefaultBackgroundColor = + addLightness(57, theme?.button?.baseColor) ?? buttonTokens.primaryDisabledDefaultBackgroundColor; + buttonTokens.primaryDisabledDefaultFontColor = + addLightness(42, theme?.button?.primaryFontColor) ?? buttonTokens.primaryDisabledDefaultFontColor; + buttonTokens.secondaryDisabledDefaultBorderColor = + addLightness(42, theme?.button?.baseColor) ?? buttonTokens.secondaryDisabledDefaultBorderColor; + buttonTokens.secondaryDisabledDefaultFontColor = + addLightness(42, theme?.button?.baseColor) ?? buttonTokens.secondaryDisabledDefaultFontColor; + buttonTokens.tertiaryDisabledDefaultFontColor = + addLightness(42, theme?.button?.baseColor) ?? buttonTokens.tertiaryDisabledDefaultFontColor; const checkboxTokens = componentTokensCopy.checkbox; checkboxTokens.backgroundColorChecked = theme?.checkbox?.baseColor ?? checkboxTokens.backgroundColorChecked; diff --git a/packages/lib/src/button/Button.accessibility.test.tsx b/packages/lib/src/button/Button.accessibility.test.tsx new file mode 100644 index 0000000000..f4de911ff4 --- /dev/null +++ b/packages/lib/src/button/Button.accessibility.test.tsx @@ -0,0 +1,354 @@ +import { render } from "@testing-library/react"; +import { axe } from "../../test/accessibility/axe-helper.js"; +import DxcButton from "./Button"; + +const iconSVG = ( + + + + +); + +describe("Button component accessibility tests", () => { + it("Should not have basic accessibility issues", async () => { + const { container } = render( + + ); + const results = await axe(container); + expect(results).toHaveNoViolations(); + }); + it("Should not have basic accessibility issues for semantic error", async () => { + const { container } = render( + + ); + const results = await axe(container); + expect(results).toHaveNoViolations(); + }); + it("Should not have basic accessibility issues for semantic warning", async () => { + const { container } = render( + + ); + const results = await axe(container); + expect(results).toHaveNoViolations(); + }); + it("Should not have basic accessibility issues for semantic success", async () => { + const { container } = render( + + ); + const results = await axe(container); + expect(results).toHaveNoViolations(); + }); + it("Should not have basic accessibility issues for semantic info", async () => { + const { container } = render( + + ); + const results = await axe(container); + expect(results).toHaveNoViolations(); + }); + it("Should not have basic accessibility issues for disabled mode", async () => { + const { container } = render( + + ); + const results = await axe(container); + expect(results).toHaveNoViolations(); + }); + it("Should not have basic accessibility issues for disabled mode for semantic error", async () => { + const { container } = render( + + ); + const results = await axe(container); + expect(results).toHaveNoViolations(); + }); + it("Should not have basic accessibility issues for disabled mode for semantic warning", async () => { + const { container } = render( + + ); + const results = await axe(container); + expect(results).toHaveNoViolations(); + }); + it("Should not have basic accessibility issues for disabled mode for semantic success", async () => { + const { container } = render( + + ); + const results = await axe(container); + expect(results).toHaveNoViolations(); + }); + it("Should not have basic accessibility issues for disabled mode for semantic info", async () => { + const { container } = render( + + ); + const results = await axe(container); + expect(results).toHaveNoViolations(); + }); + it("Should not have basic accessibility issues for secondary mode", async () => { + const { container } = render( + + ); + const results = await axe(container); + expect(results).toHaveNoViolations(); + }); + it("Should not have basic accessibility issues for secondary mode for semantic error", async () => { + const { container } = render( + + ); + const results = await axe(container); + expect(results).toHaveNoViolations(); + }); + it("Should not have basic accessibility issues for secondary mode for semantic warning", async () => { + const { container } = render( + + ); + const results = await axe(container); + expect(results).toHaveNoViolations(); + }); + it("Should not have basic accessibility issues for secondary mode for semantic success", async () => { + const { container } = render( + + ); + const results = await axe(container); + expect(results).toHaveNoViolations(); + }); + it("Should not have basic accessibility issues for secondary mode for semantic info", async () => { + const { container } = render( + + ); + const results = await axe(container); + expect(results).toHaveNoViolations(); + }); + it("Should not have basic accessibility issues for tertiary mode", async () => { + const { container } = render( + + ); + const results = await axe(container); + expect(results).toHaveNoViolations(); + }); + it("Should not have basic accessibility issues for tertiary mode for semantic error", async () => { + const { container } = render( + + ); + const results = await axe(container); + expect(results).toHaveNoViolations(); + }); + it("Should not have basic accessibility issues for tertiary mode for semantic warning", async () => { + const { container } = render( + + ); + const results = await axe(container); + expect(results).toHaveNoViolations(); + }); + it("Should not have basic accessibility issues for tertiary mode for semantic success", async () => { + const { container } = render( + + ); + const results = await axe(container); + expect(results).toHaveNoViolations(); + }); + it("Should not have basic accessibility issues for tertiary mode for semantic info", async () => { + const { container } = render( + + ); + const results = await axe(container); + expect(results).toHaveNoViolations(); + }); +}); diff --git a/packages/lib/src/button/Button.stories.tsx b/packages/lib/src/button/Button.stories.tsx index 0f52a38843..9719f67c61 100644 --- a/packages/lib/src/button/Button.stories.tsx +++ b/packages/lib/src/button/Button.stories.tsx @@ -32,286 +32,4933 @@ const facebookIcon = ( ); -const smallIcon = ( - - - -); - const opinionatedTheme = { button: { - baseColor: "#5f249f", - primaryFontColor: "#ffffff", + baseColor: "#d0021b", + primaryFontColor: "#000000", secondaryHoverFontColor: "#ffffff", }, }; export const Chromatic = () => ( <> - - <ExampleContainer> - <Title title="Enabled" theme="light" level={4} /> - <DxcButton label="Primary enabled" /> - </ExampleContainer> - <ExampleContainer pseudoState="pseudo-hover"> - <Title title="Hovered" theme="light" level={4} /> - <DxcButton label="Primary hovered" /> - </ExampleContainer> - <ExampleContainer pseudoState="pseudo-focus"> - <Title title="Focused" theme="light" level={4} /> - <DxcButton label="Primary focused" /> - </ExampleContainer> - <ExampleContainer pseudoState="pseudo-active"> - <Title title="Actived" theme="light" level={4} /> - <DxcButton label="Primary actived" /> - </ExampleContainer> - <ExampleContainer> - <Title title="Disabled" theme="light" level={4} /> - <DxcButton label="Primary disabled" disabled icon="filled_bottom_app_bar" /> - </ExampleContainer> - <ExampleContainer> - <Title title="With left icon" theme="light" level={4} /> - <DxcButton label="Primary" icon="filled_bottom_app_bar" /> - </ExampleContainer> - <ExampleContainer> - <Title title="With right icon" theme="light" level={4} /> - <DxcButton label="Primary" icon="filled_bottom_app_bar" iconPosition="after" /> - </ExampleContainer> - <ExampleContainer> - <Title title="Only icon" theme="light" level={4} /> - <DxcButton icon="filled_bottom_app_bar" title="Button with no label" /> - </ExampleContainer> - <ExampleContainer> - <Title title="Big icon (SVG)" theme="light" level={4} /> - <DxcButton icon={facebookIcon} title="Facebook" /> - </ExampleContainer> - <ExampleContainer> - <Title title="Small icon (SVG)" theme="light" level={4} /> - <DxcButton icon={smallIcon} title="Button with no label" /> - </ExampleContainer> - <Title title="Secondary" theme="light" level={2} /> - <ExampleContainer> - <Title title="Enabled" theme="light" level={4} /> - <DxcButton mode="secondary" label="Secondary enabled" /> - </ExampleContainer> - <ExampleContainer pseudoState="pseudo-hover"> - <Title title="Hovered" theme="light" level={4} /> - <DxcButton mode="secondary" label="Secondary hovered" /> - </ExampleContainer> - <ExampleContainer pseudoState="pseudo-focus"> - <Title title="Focused" theme="light" level={4} /> - <DxcButton mode="secondary" label="Secondary focused" /> - </ExampleContainer> - <ExampleContainer pseudoState="pseudo-active"> - <Title title="Actived" theme="light" level={4} /> - <DxcButton mode="secondary" label="Secondary actived" /> - </ExampleContainer> - <ExampleContainer> - <Title title="Disabled" theme="light" level={4} /> - <DxcButton mode="secondary" disabled label="Secondary disabled" icon="filled_bottom_app_bar" /> - </ExampleContainer> - <ExampleContainer> - <Title title="With icon" theme="light" level={4} /> - <DxcButton mode="secondary" label="Secondary" icon="filled_bottom_app_bar" /> - </ExampleContainer> - <Title title="Text" theme="light" level={2} /> - <ExampleContainer> - <Title title="Enabled" theme="light" level={4} /> - <DxcButton mode="text" label="Text enabled" /> - </ExampleContainer> - <ExampleContainer pseudoState="pseudo-hover"> - <Title title="Hovered" theme="light" level={4} /> - <DxcButton mode="text" label="Text hovered" /> - </ExampleContainer> - <ExampleContainer pseudoState="pseudo-focus"> - <Title title="Focused" theme="light" level={4} /> - <DxcButton mode="text" label="Text focused" /> - </ExampleContainer> - <ExampleContainer pseudoState="pseudo-active"> - <Title title="Actived" theme="light" level={4} /> - <DxcButton mode="text" label="Text actived" /> - </ExampleContainer> - <ExampleContainer> - <Title title="Disabled" theme="light" level={4} /> - <DxcButton mode="text" label="Text disabled" disabled icon="filled_bottom_app_bar" /> - </ExampleContainer> - <ExampleContainer> - <Title title="With icon" theme="light" level={4} /> - <DxcButton label="Text" mode="text" icon="filled_bottom_app_bar" /> - </ExampleContainer> - <Title title="Sizes" theme="light" level={2} /> - <ExampleContainer> - <Title title="Small size" theme="light" level={4} /> - <DxcButton label="Small" size="small" /> - </ExampleContainer> - <ExampleContainer> - <Title title="Medium size" theme="light" level={4} /> - <DxcButton label="MediumSize" size="medium" /> - </ExampleContainer> - <ExampleContainer> - <Title title="Medium size with ellipsis" theme="light" level={4} /> - <DxcButton label="MediumSize" size="medium" /> - </ExampleContainer> - <ExampleContainer> - <Title title="Medium size icon after" theme="light" level={4} /> - <DxcButton label="Medium" iconPosition="after" icon="filled_bottom_app_bar" size="medium" /> - </ExampleContainer> - <ExampleContainer> - <Title title="Medium size icon before" theme="light" level={4} /> - <DxcButton label="Medium" iconPosition="before" icon="filled_bottom_app_bar" size="medium" /> - </ExampleContainer> - <ExampleContainer> - <Title title="Medium size icon after with ellipsis" theme="light" level={4} /> - <DxcButton label="Medium" iconPosition="after" icon="filled_bottom_app_bar" size="medium" /> - </ExampleContainer> - <ExampleContainer> - <Title title="Medium size icon before with ellipsis" theme="light" level={4} /> - <DxcButton label="Medium" iconPosition="before" icon="filled_bottom_app_bar" size="medium" /> - </ExampleContainer> - <ExampleContainer> - <Title title="Large size" theme="light" level={4} /> - <DxcButton label="LargeSizePrimaryButtonEx" size="large" /> - </ExampleContainer> - <ExampleContainer> - <Title title="Large size with ellipsis" theme="light" level={4} /> - <DxcButton label="LargeSizePrimaryButtonExa" size="large" /> - </ExampleContainer> - <ExampleContainer> - <Title title="Large size icon after" theme="light" level={4} /> - <DxcButton label="LargeSizePrimaryButton" iconPosition="after" icon="filled_bottom_app_bar" size="large" /> - </ExampleContainer> - <ExampleContainer> - <Title title="Large size icon before" theme="light" level={4} /> - <DxcButton label="LargeSizePrimaryButton" iconPosition="before" icon="filled_bottom_app_bar" size="large" /> - </ExampleContainer> - <ExampleContainer> - <Title title="Large size icon after with ellipsis" theme="light" level={4} /> - <DxcButton label="LargeSizePrimaryButton" iconPosition="after" icon="filled_bottom_app_bar" size="large" /> - </ExampleContainer> - <ExampleContainer> - <Title title="Large size icon before with ellipsis" theme="light" level={4} /> - <DxcButton label="LargeSizePrimaryButton" iconPosition="before" icon="filled_bottom_app_bar" size="large" /> - </ExampleContainer> - <ExampleContainer> - <Title title="FillParent size" theme="light" level={4} /> - <DxcButton label="FillParent" size="fillParent" /> - </ExampleContainer> - <ExampleContainer> - <Title title="FitContent size" theme="light" level={4} /> - <DxcButton label="FitContent" size="fitContent" /> - </ExampleContainer> - <Title title="Margins" theme="light" level={2} /> - <ExampleContainer> - <Title title="Xxsmall margin" theme="light" level={4} /> - <DxcButton label="Xxsmall margin" margin="xxsmall" /> - </ExampleContainer> - <ExampleContainer> - <Title title="Xsmall margin" theme="light" level={4} /> - <DxcButton label="Xsmall margin" margin="xsmall" /> - </ExampleContainer> - <ExampleContainer> - <Title title="Small margin" theme="light" level={4} /> - <DxcButton label="Small margin" margin="small" /> - </ExampleContainer> - <ExampleContainer> - <Title title="Medium margin" theme="light" level={4} /> - <DxcButton label="Medium margin" margin="medium" /> - </ExampleContainer> - <ExampleContainer> - <Title title="Large margin" theme="light" level={4} /> - <DxcButton label="Large margin" margin="large" /> - </ExampleContainer> - <ExampleContainer> - <Title title="Xlarge margin" theme="light" level={4} /> - <DxcButton label="Xlarge margin" margin="xlarge" /> - </ExampleContainer> - <ExampleContainer> - <Title title="Xxlarge margin" theme="light" level={4} /> - <DxcButton label="Xxlarge margin" margin="xxlarge" /> - </ExampleContainer> - <Title title="Inside a flex" theme="light" level={2} /> - <ExampleContainer> - <DxcFlex direction="column" gap="1rem"> - <DxcButton label="Button" /> - <DxcButton label="Button" /> - <DxcButton label="Button" /> + <> + <Title title="Default" theme="light" level={2} /> + <> + <Title title="Small" theme="light" level={2} /> + <Title title="Primary" theme="light" level={3} /> + <DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton label="Primary" semantic="default" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton label="Primary" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton label="Primary" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton label="Primary" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer> + <DxcButton label="Primary" size={{ height: "small" }} disabled /> + </ExampleContainer> + </DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton label="Primary" icon="home" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton label="Primary" icon="home" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton label="Primary" icon="home" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton label="Primary" icon="home" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer> + <DxcButton label="Primary" icon="home" size={{ height: "small" }} disabled /> + </ExampleContainer> + </DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton label="Primary" icon="home" iconPosition="after" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton label="Primary" icon="home" iconPosition="after" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton label="Primary" icon="home" iconPosition="after" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton label="Primary" icon="home" iconPosition="after" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer> + <DxcButton label="Primary" disabled icon="home" iconPosition="after" size={{ height: "small" }} /> + </ExampleContainer> + </DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton icon="home" size={{ height: "small" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton icon="home" size={{ height: "small" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton icon="home" size={{ height: "small" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton icon="home" size={{ height: "small" }} title="Home" /> + </ExampleContainer> + <ExampleContainer> + <DxcButton icon="home" size={{ height: "small" }} disabled title="Home" /> + </ExampleContainer> + </DxcFlex> + </DxcFlex> + <DxcFlex> + <DxcFlex direction="column"> + <Title title="Width" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer> + <DxcButton icon={facebookIcon} size={{ height: "small", width: "small" }} title="Facebook" /> + </ExampleContainer> + <ExampleContainer> + <DxcButton label="Medium" size={{ height: "small", width: "medium" }} /> + </ExampleContainer> + <ExampleContainer> + <DxcButton label="Large" size={{ height: "small", width: "large" }} /> + </ExampleContainer> + <ExampleContainer> + <DxcButton label="Fit content" size={{ height: "small", width: "fitContent" }} /> + </ExampleContainer> + </DxcFlex> + </DxcFlex> + </DxcFlex> + <ExampleContainer> + <DxcButton label="Fill parent" size={{ height: "small", width: "fillParent" }} /> + </ExampleContainer> + <DxcFlex> + <DxcFlex direction="column"> + <Title title="Margin" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer> + <DxcButton label="xxsmall" size={{ height: "small" }} margin="xxsmall" /> + </ExampleContainer> + <ExampleContainer> + <DxcButton label="xsmall" size={{ height: "small" }} margin="xsmall" /> + </ExampleContainer> + <ExampleContainer> + <DxcButton label="small" size={{ height: "small" }} margin="small" /> + </ExampleContainer> + <ExampleContainer> + <DxcButton label="medium" size={{ height: "small" }} margin="medium" /> + </ExampleContainer> + <ExampleContainer> + <DxcButton label="large" size={{ height: "small" }} margin="large" /> + </ExampleContainer> + <ExampleContainer> + <DxcButton label="xlarge" size={{ height: "small" }} margin="xlarge" /> + </ExampleContainer> + <ExampleContainer> + <DxcButton label="xxlarge" size={{ height: "small" }} margin="xxlarge" /> + </ExampleContainer> + </DxcFlex> + </DxcFlex> + </DxcFlex> + <Title title="Secondary" theme="light" level={3} /> + <DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton mode="secondary" label="Secondary" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton mode="secondary" label="Secondary" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton mode="secondary" label="Secondary" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton mode="secondary" label="Secondary" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer> + <DxcButton mode="secondary" label="Secondary" size={{ height: "small" }} disabled /> + </ExampleContainer> + </DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton mode="secondary" label="Secondary" icon="home" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton mode="secondary" label="Secondary" icon="home" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton mode="secondary" label="Secondary" icon="home" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton mode="secondary" label="Secondary" icon="home" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer> + <DxcButton mode="secondary" label="Secondary" icon="home" size={{ height: "small" }} disabled /> + </ExampleContainer> + </DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton + mode="secondary" + label="Secondary" + icon="home" + iconPosition="after" + size={{ height: "small" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton + mode="secondary" + label="Secondary" + icon="home" + iconPosition="after" + size={{ height: "small" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton + mode="secondary" + label="Secondary" + icon="home" + iconPosition="after" + size={{ height: "small" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton + mode="secondary" + label="Secondary" + icon="home" + iconPosition="after" + size={{ height: "small" }} + /> + </ExampleContainer> + <ExampleContainer> + <DxcButton + mode="secondary" + label="Secondary" + icon="home" + iconPosition="after" + size={{ height: "small" }} + disabled + /> + </ExampleContainer> + </DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton mode="secondary" icon="home" size={{ height: "small" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton mode="secondary" icon="home" size={{ height: "small" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton mode="secondary" icon="home" size={{ height: "small" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton mode="secondary" icon="home" size={{ height: "small" }} title="Home" /> + </ExampleContainer> + <ExampleContainer> + <DxcButton mode="secondary" icon="home" size={{ height: "small" }} disabled title="Home" /> + </ExampleContainer> + </DxcFlex> + </DxcFlex> + <Title title="Tertiary" theme="light" level={3} /> + <DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton mode="tertiary" label="Tertiary" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton mode="tertiary" label="Tertiary" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton mode="tertiary" label="Tertiary" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton mode="tertiary" label="Tertiary" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer> + <DxcButton mode="tertiary" label="Tertiary" size={{ height: "small" }} disabled /> + </ExampleContainer> + </DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton mode="tertiary" label="Tertiary" icon="home" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton mode="tertiary" label="Tertiary" icon="home" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton mode="tertiary" label="Tertiary" icon="home" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton mode="tertiary" label="Tertiary" icon="home" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer> + <DxcButton mode="tertiary" label="Tertiary" icon="home" size={{ height: "small" }} disabled /> + </ExampleContainer> + </DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton mode="tertiary" label="Tertiary" icon="home" iconPosition="after" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton mode="tertiary" label="Tertiary" icon="home" iconPosition="after" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton mode="tertiary" label="Tertiary" icon="home" iconPosition="after" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton mode="tertiary" label="Tertiary" icon="home" iconPosition="after" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer> + <DxcButton + mode="tertiary" + label="Tertiary" + icon="home" + iconPosition="after" + size={{ height: "small" }} + disabled + /> + </ExampleContainer> + </DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton mode="tertiary" icon="home" size={{ height: "small" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton mode="tertiary" icon="home" size={{ height: "small" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton mode="tertiary" icon="home" size={{ height: "small" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton mode="tertiary" icon="home" size={{ height: "small" }} title="Home" /> + </ExampleContainer> + <ExampleContainer> + <DxcButton mode="tertiary" icon="home" size={{ height: "small" }} disabled title="Home" /> + </ExampleContainer> + </DxcFlex> + </DxcFlex> + </> + <> + <Title title="Medium" theme="light" level={2} /> + <Title title="Primary" theme="light" level={2} /> + <DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton label="Primary" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton label="Primary" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton label="Primary" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton label="Primary" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer> + <DxcButton label="Primary" size={{ height: "medium" }} disabled /> + </ExampleContainer> + </DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton label="Primary" icon="home" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton label="Primary" icon="home" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton label="Primary" icon="home" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton label="Primary" icon="home" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer> + <DxcButton label="Primary" icon="home" size={{ height: "medium" }} disabled /> + </ExampleContainer> + </DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton label="Primary" icon="home" iconPosition="after" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton label="Primary" icon="home" iconPosition="after" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton label="Primary" icon="home" iconPosition="after" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton label="Primary" icon="home" iconPosition="after" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer> + <DxcButton label="Primary" icon="home" iconPosition="after" size={{ height: "medium" }} disabled /> + </ExampleContainer> + </DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton icon="home" size={{ height: "medium" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton icon="home" size={{ height: "medium" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton icon="home" size={{ height: "medium" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton icon="home" size={{ height: "medium" }} title="Home" /> + </ExampleContainer> + <ExampleContainer> + <DxcButton icon="home" size={{ height: "medium" }} disabled title="Home" /> + </ExampleContainer> + </DxcFlex> + </DxcFlex> + <DxcFlex> + <DxcFlex direction="column"> + <Title title="Width" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer> + <DxcButton label="Small Small" size={{ height: "medium", width: "small" }} title="Facebook" /> + </ExampleContainer> + <ExampleContainer> + <DxcButton label="Medium Medium Medium" size={{ height: "medium", width: "medium" }} /> + </ExampleContainer> + <ExampleContainer> + <DxcButton label="Large Large Large Large Large Large" size={{ height: "medium", width: "large" }} /> + </ExampleContainer> + <ExampleContainer> + <DxcButton label="Fit content" size={{ height: "medium", width: "fitContent" }} /> + </ExampleContainer> + </DxcFlex> + </DxcFlex> + </DxcFlex> + <ExampleContainer> + <DxcButton label="Fill parent" size={{ height: "medium", width: "fillParent" }} /> + </ExampleContainer> + <DxcFlex> + <DxcFlex direction="column"> + <Title title="Margin" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer> + <DxcButton label="xxsmall" size={{ height: "medium" }} margin="xxsmall" /> + </ExampleContainer> + <ExampleContainer> + <DxcButton label="xsmall" size={{ height: "medium" }} margin="xsmall" /> + </ExampleContainer> + <ExampleContainer> + <DxcButton label="small" size={{ height: "medium" }} margin="small" /> + </ExampleContainer> + <ExampleContainer> + <DxcButton label="medium" size={{ height: "medium" }} margin="medium" /> + </ExampleContainer> + <ExampleContainer> + <DxcButton label="large" size={{ height: "medium" }} margin="large" /> + </ExampleContainer> + <ExampleContainer> + <DxcButton label="xlarge" size={{ height: "medium" }} margin="xlarge" /> + </ExampleContainer> + <ExampleContainer> + <DxcButton label="xxlarge" size={{ height: "medium" }} margin="xxlarge" /> + </ExampleContainer> + </DxcFlex> + </DxcFlex> + </DxcFlex> + <Title title="Secondary" theme="light" level={3} /> + <DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton mode="secondary" label="Secondary" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton mode="secondary" label="Secondary" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton mode="secondary" label="Secondary" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton mode="secondary" label="Secondary" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer> + <DxcButton mode="secondary" label="Secondary" size={{ height: "medium" }} disabled /> + </ExampleContainer> + </DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton mode="secondary" label="Secondary" icon="home" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton mode="secondary" label="Secondary" icon="home" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton mode="secondary" label="Secondary" icon="home" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton mode="secondary" label="Secondary" icon="home" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer> + <DxcButton mode="secondary" label="Secondary" icon="home" size={{ height: "medium" }} disabled /> + </ExampleContainer> + </DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton + mode="secondary" + label="Secondary" + icon="home" + iconPosition="after" + size={{ height: "medium" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton + mode="secondary" + label="Secondary" + icon="home" + iconPosition="after" + size={{ height: "medium" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton + mode="secondary" + label="Secondary" + icon="home" + iconPosition="after" + size={{ height: "medium" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton + mode="secondary" + label="Secondary" + icon="home" + iconPosition="after" + size={{ height: "medium" }} + /> + </ExampleContainer> + <ExampleContainer> + <DxcButton + mode="secondary" + label="Secondary" + icon="home" + iconPosition="after" + size={{ height: "medium" }} + disabled + /> + </ExampleContainer> + </DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton mode="secondary" icon="home" size={{ height: "medium" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton mode="secondary" icon="home" size={{ height: "medium" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton mode="secondary" icon="home" size={{ height: "medium" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton mode="secondary" icon="home" size={{ height: "medium" }} title="Home" /> + </ExampleContainer> + <ExampleContainer> + <DxcButton mode="secondary" icon="home" size={{ height: "medium" }} disabled title="Home" /> + </ExampleContainer> + </DxcFlex> + </DxcFlex> + <Title title="Tertiary" theme="light" level={3} /> + <DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton mode="tertiary" label="Tertiary" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton mode="tertiary" label="Tertiary" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton mode="tertiary" label="Tertiary" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton mode="tertiary" label="Tertiary" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer> + <DxcButton mode="tertiary" label="Tertiary" size={{ height: "medium" }} disabled /> + </ExampleContainer> + </DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton mode="tertiary" label="Tertiary" icon="home" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton mode="tertiary" label="Tertiary" icon="home" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton mode="tertiary" label="Tertiary" icon="home" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton mode="tertiary" label="Tertiary" icon="home" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer> + <DxcButton mode="tertiary" label="Tertiary" icon="home" size={{ height: "medium" }} disabled /> + </ExampleContainer> + </DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton + mode="tertiary" + label="Tertiary" + icon="home" + iconPosition="after" + size={{ height: "medium" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton + mode="tertiary" + label="Tertiary" + icon="home" + iconPosition="after" + size={{ height: "medium" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton + mode="tertiary" + label="Tertiary" + icon="home" + iconPosition="after" + size={{ height: "medium" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton + mode="tertiary" + label="Tertiary" + icon="home" + iconPosition="after" + size={{ height: "medium" }} + /> + </ExampleContainer> + <ExampleContainer> + <DxcButton + mode="tertiary" + label="Tertiary" + icon="home" + iconPosition="after" + size={{ height: "medium" }} + disabled + /> + </ExampleContainer> + </DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton mode="tertiary" icon="home" size={{ height: "medium" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton mode="tertiary" icon="home" size={{ height: "medium" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton mode="tertiary" icon="home" size={{ height: "medium" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton mode="tertiary" icon="home" size={{ height: "medium" }} title="Home" /> + </ExampleContainer> + <ExampleContainer> + <DxcButton mode="tertiary" icon="home" size={{ height: "medium" }} disabled title="Home" /> + </ExampleContainer> + </DxcFlex> + </DxcFlex> + </> + <> + <Title title="Large" theme="light" level={2} /> + <Title title="Primary" theme="light" level={3} /> + <DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton label="Primary" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton label="Primary" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton label="Primary" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton label="Primary" /> + </ExampleContainer> + <ExampleContainer> + <DxcButton label="Primary" disabled /> + </ExampleContainer> + </DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton label="Primary" icon="home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton label="Primary" icon="home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton label="Primary" icon="home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton label="Primary" icon="home" /> + </ExampleContainer> + <ExampleContainer> + <DxcButton label="Primary" icon="home" disabled /> + </ExampleContainer> + </DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton label="Primary" icon="home" iconPosition="after" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton label="Primary" icon="home" iconPosition="after" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton label="Primary" icon="home" iconPosition="after" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton label="Primary" icon="home" iconPosition="after" /> + </ExampleContainer> + <ExampleContainer> + <DxcButton label="Primary" icon="home" iconPosition="after" disabled /> + </ExampleContainer> + </DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton icon="home" title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton icon="home" title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton icon="home" title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton icon="home" title="Home" /> + </ExampleContainer> + <ExampleContainer> + <DxcButton icon="home" disabled title="Home" /> + </ExampleContainer> + </DxcFlex> + </DxcFlex> + <DxcFlex> + <DxcFlex direction="column"> + <Title title="Width" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer> + <DxcButton icon={facebookIcon} size={{ height: "large", width: "small" }} title="Facebook" /> + </ExampleContainer> + <ExampleContainer> + <DxcButton label="Medium" size={{ height: "large", width: "medium" }} /> + </ExampleContainer> + <ExampleContainer> + <DxcButton label="Large" size={{ height: "large", width: "large" }} /> + </ExampleContainer> + <ExampleContainer> + <DxcButton label="Fit content" size={{ height: "large", width: "fitContent" }} /> + </ExampleContainer> + </DxcFlex> + </DxcFlex> + </DxcFlex> + <ExampleContainer> + <DxcButton label="Fill parent" size={{ height: "large", width: "fillParent" }} /> + </ExampleContainer> + <DxcFlex> + <DxcFlex direction="column"> + <Title title="Margin" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer> + <DxcButton label="xxsmall" size={{ height: "large" }} margin="xxsmall" /> + </ExampleContainer> + <ExampleContainer> + <DxcButton label="xsmall" size={{ height: "large" }} margin="xsmall" /> + </ExampleContainer> + <ExampleContainer> + <DxcButton label="small" size={{ height: "large" }} margin="small" /> + </ExampleContainer> + <ExampleContainer> + <DxcButton label="medium" size={{ height: "large" }} margin="medium" /> + </ExampleContainer> + <ExampleContainer> + <DxcButton label="large" size={{ height: "large" }} margin="large" /> + </ExampleContainer> + <ExampleContainer> + <DxcButton label="xlarge" size={{ height: "large" }} margin="xlarge" /> + </ExampleContainer> + <ExampleContainer> + <DxcButton label="xxlarge" size={{ height: "large" }} margin="xxlarge" /> + </ExampleContainer> + </DxcFlex> + </DxcFlex> + </DxcFlex> + <Title title="Secondary" theme="light" level={3} /> + <DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton mode="secondary" label="Secondary" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton mode="secondary" label="Secondary" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton mode="secondary" label="Secondary" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton mode="secondary" label="Secondary" /> + </ExampleContainer> + <ExampleContainer> + <DxcButton mode="secondary" label="Secondary" disabled /> + </ExampleContainer> + </DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton mode="secondary" label="Secondary" icon="home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton mode="secondary" label="Secondary" icon="home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton mode="secondary" label="Secondary" icon="home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton mode="secondary" label="Secondary" icon="home" /> + </ExampleContainer> + <ExampleContainer> + <DxcButton mode="secondary" label="Secondary" icon="home" disabled /> + </ExampleContainer> + </DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton mode="secondary" label="Secondary" icon="home" iconPosition="after" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton mode="secondary" label="Secondary" icon="home" iconPosition="after" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton mode="secondary" label="Secondary" icon="home" iconPosition="after" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton mode="secondary" label="Secondary" icon="home" iconPosition="after" /> + </ExampleContainer> + <ExampleContainer> + <DxcButton mode="secondary" label="Secondary" icon="home" iconPosition="after" disabled /> + </ExampleContainer> + </DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton mode="secondary" icon="home" title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton mode="secondary" icon="home" title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton mode="secondary" icon="home" title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton mode="secondary" icon="home" title="Home" /> + </ExampleContainer> + <ExampleContainer> + <DxcButton mode="secondary" icon="home" disabled title="Home" /> + </ExampleContainer> + </DxcFlex> + </DxcFlex> + <Title title="Tertiary" theme="light" level={3} /> + <DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton mode="tertiary" label="Tertiary" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton mode="tertiary" label="Tertiary" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton mode="tertiary" label="Tertiary" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton mode="tertiary" label="Tertiary" /> + </ExampleContainer> + <ExampleContainer> + <DxcButton mode="tertiary" label="Tertiary" disabled /> + </ExampleContainer> + </DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton mode="tertiary" label="Tertiary" icon="home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton mode="tertiary" label="Tertiary" icon="home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton mode="tertiary" label="Tertiary" icon="home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton mode="tertiary" label="Tertiary" icon="home" /> + </ExampleContainer> + <ExampleContainer> + <DxcButton mode="tertiary" label="Tertiary" icon="home" disabled /> + </ExampleContainer> + </DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton mode="tertiary" label="Tertiary" icon="home" iconPosition="after" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton mode="tertiary" label="Tertiary" icon="home" iconPosition="after" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton mode="tertiary" label="Tertiary" icon="home" iconPosition="after" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton mode="tertiary" label="Tertiary" icon="home" iconPosition="after" /> + </ExampleContainer> + <ExampleContainer> + <DxcButton mode="tertiary" label="Tertiary" icon="home" iconPosition="after" disabled /> + </ExampleContainer> + </DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton mode="tertiary" icon="home" title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton mode="tertiary" icon="home" title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton mode="tertiary" icon="home" title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton mode="tertiary" icon="home" title="Home" /> + </ExampleContainer> + <ExampleContainer> + <DxcButton mode="tertiary" icon="home" disabled title="Home" /> + </ExampleContainer> + </DxcFlex> + </DxcFlex> + </> + </> + <> + <Title title="Error" theme="light" level={2} /> + <> + <Title title="Small" theme="light" level={2} /> + <Title title="Primary" theme="light" level={3} /> + <DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton label="Primary" semantic="error" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton label="Primary" semantic="error" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton label="Primary" semantic="error" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton label="Primary" semantic="error" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer> + <DxcButton label="Primary" semantic="error" size={{ height: "small" }} disabled /> + </ExampleContainer> + </DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton label="Primary" semantic="error" icon="home" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton label="Primary" semantic="error" icon="home" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton label="Primary" semantic="error" icon="home" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton label="Primary" semantic="error" icon="home" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer> + <DxcButton label="Primary" semantic="error" icon="home" size={{ height: "small" }} disabled /> + </ExampleContainer> + </DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton label="Primary" semantic="error" icon="home" iconPosition="after" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton label="Primary" semantic="error" icon="home" iconPosition="after" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton label="Primary" semantic="error" icon="home" iconPosition="after" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton label="Primary" semantic="error" icon="home" iconPosition="after" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer> + <DxcButton + label="Primary" + semantic="error" + icon="home" + iconPosition="after" + size={{ height: "small" }} + disabled + /> + </ExampleContainer> + </DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton icon="home" semantic="error" size={{ height: "small" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton icon="home" semantic="error" size={{ height: "small" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton icon="home" semantic="error" size={{ height: "small" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton icon="home" semantic="error" size={{ height: "small" }} title="Home" /> + </ExampleContainer> + <ExampleContainer> + <DxcButton icon="home" semantic="error" size={{ height: "small" }} disabled title="Home" /> + </ExampleContainer> + </DxcFlex> + </DxcFlex> + <DxcFlex> + <DxcFlex direction="column"> + <Title title="Width" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer> + <DxcButton + icon={facebookIcon} + semantic="error" + size={{ height: "small", width: "small" }} + title="Facebook" + /> + </ExampleContainer> + <ExampleContainer> + <DxcButton label="Medium" semantic="error" size={{ height: "small", width: "medium" }} /> + </ExampleContainer> + <ExampleContainer> + <DxcButton label="Large" semantic="error" size={{ height: "small", width: "large" }} /> + </ExampleContainer> + <ExampleContainer> + <DxcButton label="Fit content" semantic="error" size={{ height: "small", width: "fitContent" }} /> + </ExampleContainer> + </DxcFlex> + </DxcFlex> + </DxcFlex> + <ExampleContainer> + <DxcButton label="Fill parent" semantic="error" size={{ height: "small", width: "fillParent" }} /> + </ExampleContainer> + <Title title="Secondary" theme="light" level={3} /> + <DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton mode="secondary" semantic="error" label="Secondary" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton mode="secondary" semantic="error" label="Secondary" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton mode="secondary" semantic="error" label="Secondary" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton mode="secondary" semantic="error" label="Secondary" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer> + <DxcButton mode="secondary" semantic="error" label="Secondary" size={{ height: "small" }} disabled /> + </ExampleContainer> + </DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton mode="secondary" semantic="error" label="Secondary" icon="home" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton mode="secondary" semantic="error" label="Secondary" icon="home" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton mode="secondary" semantic="error" label="Secondary" icon="home" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton mode="secondary" semantic="error" label="Secondary" icon="home" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer> + <DxcButton + mode="secondary" + semantic="error" + label="Secondary" + icon="home" + size={{ height: "small" }} + disabled + /> + </ExampleContainer> + </DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton + mode="secondary" + semantic="error" + label="Secondary" + icon="home" + iconPosition="after" + size={{ height: "small" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton + mode="secondary" + semantic="error" + label="Secondary" + icon="home" + iconPosition="after" + size={{ height: "small" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton + mode="secondary" + semantic="error" + label="Secondary" + icon="home" + iconPosition="after" + size={{ height: "small" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton + mode="secondary" + semantic="error" + label="Secondary" + icon="home" + iconPosition="after" + size={{ height: "small" }} + /> + </ExampleContainer> + <ExampleContainer> + <DxcButton + mode="secondary" + semantic="error" + label="Secondary" + icon="home" + iconPosition="after" + size={{ height: "small" }} + disabled + /> + </ExampleContainer> + </DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton mode="secondary" semantic="error" icon="home" size={{ height: "small" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton mode="secondary" semantic="error" icon="home" size={{ height: "small" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton mode="secondary" semantic="error" icon="home" size={{ height: "small" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton mode="secondary" semantic="error" icon="home" size={{ height: "small" }} title="Home" /> + </ExampleContainer> + <ExampleContainer> + <DxcButton + mode="secondary" + semantic="error" + icon="home" + size={{ height: "small" }} + disabled + title="Home" + /> + </ExampleContainer> + </DxcFlex> + </DxcFlex> + <Title title="Tertiary" theme="light" level={3} /> + <DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton mode="tertiary" semantic="error" label="Tertiary" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton mode="tertiary" semantic="error" label="Tertiary" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton mode="tertiary" semantic="error" label="Tertiary" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton mode="tertiary" semantic="error" label="Tertiary" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer> + <DxcButton mode="tertiary" semantic="error" label="Tertiary" size={{ height: "small" }} disabled /> + </ExampleContainer> + </DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton mode="tertiary" semantic="error" label="Tertiary" icon="home" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton mode="tertiary" semantic="error" label="Tertiary" icon="home" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton mode="tertiary" semantic="error" label="Tertiary" icon="home" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton mode="tertiary" semantic="error" label="Tertiary" icon="home" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer> + <DxcButton + mode="tertiary" + semantic="error" + label="Tertiary" + icon="home" + size={{ height: "small" }} + disabled + /> + </ExampleContainer> + </DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton + mode="tertiary" + semantic="error" + label="Tertiary" + icon="home" + iconPosition="after" + size={{ height: "small" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton + mode="tertiary" + semantic="error" + label="Tertiary" + icon="home" + iconPosition="after" + size={{ height: "small" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton + mode="tertiary" + semantic="error" + label="Tertiary" + icon="home" + iconPosition="after" + size={{ height: "small" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton + mode="tertiary" + semantic="error" + label="Tertiary" + icon="home" + iconPosition="after" + size={{ height: "small" }} + /> + </ExampleContainer> + <ExampleContainer> + <DxcButton + mode="tertiary" + semantic="error" + label="Tertiary" + icon="home" + iconPosition="after" + size={{ height: "small" }} + disabled + /> + </ExampleContainer> + </DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton mode="tertiary" semantic="error" icon="home" size={{ height: "small" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton mode="tertiary" semantic="error" icon="home" size={{ height: "small" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton mode="tertiary" semantic="error" icon="home" size={{ height: "small" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton mode="tertiary" semantic="error" icon="home" size={{ height: "small" }} title="Home" /> + </ExampleContainer> + <ExampleContainer> + <DxcButton + mode="tertiary" + semantic="error" + icon="home" + size={{ height: "small" }} + disabled + title="Home" + /> + </ExampleContainer> + </DxcFlex> + </DxcFlex> + </> + <> + <Title title="Medium" theme="light" level={2} /> + <Title title="Primary" theme="light" level={2} /> + <DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton label="Primary" semantic="error" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton label="Primary" semantic="error" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton label="Primary" semantic="error" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton label="Primary" semantic="error" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer> + <DxcButton label="Primary" semantic="error" size={{ height: "medium" }} disabled /> + </ExampleContainer> + </DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton label="Primary" semantic="error" icon="home" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton label="Primary" semantic="error" icon="home" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton label="Primary" semantic="error" icon="home" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton label="Primary" semantic="error" icon="home" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer> + <DxcButton label="Primary" semantic="error" icon="home" size={{ height: "medium" }} disabled /> + </ExampleContainer> + </DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton + label="Primary" + semantic="error" + icon="home" + iconPosition="after" + size={{ height: "medium" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton + label="Primary" + semantic="error" + icon="home" + iconPosition="after" + size={{ height: "medium" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton + label="Primary" + semantic="error" + icon="home" + iconPosition="after" + size={{ height: "medium" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton + label="Primary" + semantic="error" + icon="home" + iconPosition="after" + size={{ height: "medium" }} + /> + </ExampleContainer> + <ExampleContainer> + <DxcButton + label="Primary" + semantic="error" + icon="home" + iconPosition="after" + size={{ height: "medium" }} + disabled + /> + </ExampleContainer> + </DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton icon="home" semantic="error" size={{ height: "medium" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton icon="home" semantic="error" size={{ height: "medium" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton icon="home" semantic="error" size={{ height: "medium" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton icon="home" semantic="error" size={{ height: "medium" }} title="Home" /> + </ExampleContainer> + <ExampleContainer> + <DxcButton icon="home" semantic="error" size={{ height: "medium" }} disabled title="Home" /> + </ExampleContainer> + </DxcFlex> + </DxcFlex> + <DxcFlex> + <DxcFlex direction="column"> + <Title title="Width" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer> + <DxcButton + icon={facebookIcon} + semantic="error" + size={{ height: "medium", width: "small" }} + title="Facebook" + /> + </ExampleContainer> + <ExampleContainer> + <DxcButton label="Medium" semantic="error" size={{ height: "medium", width: "medium" }} /> + </ExampleContainer> + <ExampleContainer> + <DxcButton label="Large" semantic="error" size={{ height: "medium", width: "large" }} /> + </ExampleContainer> + <ExampleContainer> + <DxcButton label="Fit content" semantic="error" size={{ height: "medium", width: "fitContent" }} /> + </ExampleContainer> + </DxcFlex> + </DxcFlex> + </DxcFlex> + <ExampleContainer> + <DxcButton label="Fill parent" semantic="error" size={{ height: "medium", width: "fillParent" }} /> + </ExampleContainer> + <Title title="Secondary" theme="light" level={3} /> + <DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton mode="secondary" semantic="error" label="Secondary" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton mode="secondary" semantic="error" label="Secondary" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton mode="secondary" semantic="error" label="Secondary" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton mode="secondary" semantic="error" label="Secondary" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer> + <DxcButton mode="secondary" semantic="error" label="Secondary" size={{ height: "medium" }} disabled /> + </ExampleContainer> + </DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton mode="secondary" semantic="error" label="Secondary" icon="home" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton mode="secondary" semantic="error" label="Secondary" icon="home" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton mode="secondary" semantic="error" label="Secondary" icon="home" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton mode="secondary" semantic="error" label="Secondary" icon="home" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer> + <DxcButton + mode="secondary" + semantic="error" + label="Secondary" + icon="home" + size={{ height: "medium" }} + disabled + /> + </ExampleContainer> + </DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton + mode="secondary" + semantic="error" + label="Secondary" + icon="home" + iconPosition="after" + size={{ height: "medium" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton + mode="secondary" + semantic="error" + label="Secondary" + icon="home" + iconPosition="after" + size={{ height: "medium" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton + mode="secondary" + semantic="error" + label="Secondary" + icon="home" + iconPosition="after" + size={{ height: "medium" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton + mode="secondary" + semantic="error" + label="Secondary" + icon="home" + iconPosition="after" + size={{ height: "medium" }} + /> + </ExampleContainer> + <ExampleContainer> + <DxcButton + mode="secondary" + semantic="error" + label="Secondary" + icon="home" + iconPosition="after" + size={{ height: "medium" }} + disabled + /> + </ExampleContainer> + </DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton mode="secondary" semantic="error" icon="home" size={{ height: "medium" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton mode="secondary" semantic="error" icon="home" size={{ height: "medium" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton mode="secondary" semantic="error" icon="home" size={{ height: "medium" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton mode="secondary" semantic="error" icon="home" size={{ height: "medium" }} title="Home" /> + </ExampleContainer> + <ExampleContainer> + <DxcButton + mode="secondary" + semantic="error" + icon="home" + size={{ height: "medium" }} + disabled + title="Home" + /> + </ExampleContainer> + </DxcFlex> + </DxcFlex> + <Title title="Tertiary" theme="light" level={3} /> + <DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton mode="tertiary" semantic="error" label="Tertiary" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton mode="tertiary" semantic="error" label="Tertiary" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton mode="tertiary" semantic="error" label="Tertiary" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton mode="tertiary" semantic="error" label="Tertiary" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer> + <DxcButton mode="tertiary" semantic="error" label="Tertiary" size={{ height: "medium" }} disabled /> + </ExampleContainer> + </DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton mode="tertiary" semantic="error" label="Tertiary" icon="home" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton mode="tertiary" semantic="error" label="Tertiary" icon="home" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton mode="tertiary" semantic="error" label="Tertiary" icon="home" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton mode="tertiary" semantic="error" label="Tertiary" icon="home" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer> + <DxcButton + mode="tertiary" + semantic="error" + label="Tertiary" + icon="home" + size={{ height: "medium" }} + disabled + /> + </ExampleContainer> + </DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton + mode="tertiary" + semantic="error" + label="Tertiary" + icon="home" + iconPosition="after" + size={{ height: "medium" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton + mode="tertiary" + semantic="error" + label="Tertiary" + icon="home" + iconPosition="after" + size={{ height: "medium" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton + mode="tertiary" + semantic="error" + label="Tertiary" + icon="home" + iconPosition="after" + size={{ height: "medium" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton + mode="tertiary" + semantic="error" + label="Tertiary" + icon="home" + iconPosition="after" + size={{ height: "medium" }} + /> + </ExampleContainer> + <ExampleContainer> + <DxcButton + mode="tertiary" + semantic="error" + label="Tertiary" + icon="home" + iconPosition="after" + size={{ height: "medium" }} + disabled + /> + </ExampleContainer> + </DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton mode="tertiary" semantic="error" icon="home" size={{ height: "medium" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton mode="tertiary" semantic="error" icon="home" size={{ height: "medium" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton mode="tertiary" semantic="error" icon="home" size={{ height: "medium" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton mode="tertiary" semantic="error" icon="home" size={{ height: "medium" }} title="Home" /> + </ExampleContainer> + <ExampleContainer> + <DxcButton + mode="tertiary" + semantic="error" + icon="home" + size={{ height: "medium" }} + disabled + title="Home" + /> + </ExampleContainer> + </DxcFlex> + </DxcFlex> + </> + <> + <Title title="Large" theme="light" level={2} /> + <Title title="Primary" theme="light" level={3} /> + <DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton label="Primary" semantic="error" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton label="Primary" semantic="error" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton label="Primary" semantic="error" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton label="Primary" semantic="error" /> + </ExampleContainer> + <ExampleContainer> + <DxcButton label="Primary" semantic="error" disabled /> + </ExampleContainer> + </DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton label="Primary" semantic="error" icon="home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton label="Primary" semantic="error" icon="home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton label="Primary" semantic="error" icon="home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton label="Primary" semantic="error" icon="home" /> + </ExampleContainer> + <ExampleContainer> + <DxcButton label="Primary" semantic="error" icon="home" disabled /> + </ExampleContainer> + </DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton label="Primary" semantic="error" icon="home" iconPosition="after" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton label="Primary" semantic="error" icon="home" iconPosition="after" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton label="Primary" semantic="error" icon="home" iconPosition="after" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton label="Primary" semantic="error" icon="home" iconPosition="after" /> + </ExampleContainer> + <ExampleContainer> + <DxcButton label="Primary" semantic="error" icon="home" iconPosition="after" disabled /> + </ExampleContainer> + </DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton icon="home" semantic="error" title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton icon="home" semantic="error" title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton icon="home" semantic="error" title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton icon="home" semantic="error" title="Home" /> + </ExampleContainer> + <ExampleContainer> + <DxcButton icon="home" semantic="error" disabled title="Home" /> + </ExampleContainer> + </DxcFlex> + </DxcFlex> + <DxcFlex> + <DxcFlex direction="column"> + <Title title="Width" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer> + <DxcButton + icon={facebookIcon} + semantic="error" + size={{ height: "large", width: "small" }} + title="Facebook" + /> + </ExampleContainer> + <ExampleContainer> + <DxcButton label="Medium" semantic="error" size={{ height: "large", width: "medium" }} /> + </ExampleContainer> + <ExampleContainer> + <DxcButton label="Large" semantic="error" size={{ height: "large", width: "large" }} /> + </ExampleContainer> + <ExampleContainer> + <DxcButton label="Fit content" semantic="error" size={{ height: "large", width: "fitContent" }} /> + </ExampleContainer> + </DxcFlex> + </DxcFlex> + </DxcFlex> + <ExampleContainer> + <DxcButton label="Fill parent" semantic="error" size={{ height: "large", width: "fillParent" }} /> + </ExampleContainer> + <Title title="Secondary" theme="light" level={3} /> + <DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton mode="secondary" semantic="error" label="Secondary" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton mode="secondary" semantic="error" label="Secondary" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton mode="secondary" semantic="error" label="Secondary" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton mode="secondary" semantic="error" label="Secondary" /> + </ExampleContainer> + <ExampleContainer> + <DxcButton mode="secondary" semantic="error" label="Secondary" disabled /> + </ExampleContainer> + </DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton mode="secondary" semantic="error" label="Secondary" icon="home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton mode="secondary" semantic="error" label="Secondary" icon="home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton mode="secondary" semantic="error" label="Secondary" icon="home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton mode="secondary" semantic="error" label="Secondary" icon="home" /> + </ExampleContainer> + <ExampleContainer> + <DxcButton mode="secondary" semantic="error" label="Secondary" disabled icon="home" /> + </ExampleContainer> + </DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton mode="secondary" semantic="error" label="Secondary" icon="home" iconPosition="after" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton mode="secondary" semantic="error" label="Secondary" icon="home" iconPosition="after" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton mode="secondary" semantic="error" label="Secondary" icon="home" iconPosition="after" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton mode="secondary" semantic="error" label="Secondary" icon="home" iconPosition="after" /> + </ExampleContainer> + <ExampleContainer> + <DxcButton + mode="secondary" + semantic="error" + label="Secondary" + disabled + icon="home" + iconPosition="after" + /> + </ExampleContainer> + </DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton mode="secondary" semantic="error" icon="home" title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton mode="secondary" semantic="error" icon="home" title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton mode="secondary" semantic="error" icon="home" title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton mode="secondary" semantic="error" icon="home" title="Home" /> + </ExampleContainer> + <ExampleContainer> + <DxcButton mode="secondary" semantic="error" icon="home" disabled title="Home" /> + </ExampleContainer> + </DxcFlex> + </DxcFlex> + <Title title="Tertiary" theme="light" level={3} /> + <DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton mode="tertiary" semantic="error" label="Tertiary" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton mode="tertiary" semantic="error" label="Tertiary" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton mode="tertiary" semantic="error" label="Tertiary" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton mode="tertiary" semantic="error" label="Tertiary" /> + </ExampleContainer> + <ExampleContainer> + <DxcButton mode="tertiary" semantic="error" label="Tertiary" disabled /> + </ExampleContainer> + </DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton mode="tertiary" semantic="error" label="Tertiary" icon="home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton mode="tertiary" semantic="error" label="Tertiary" icon="home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton mode="tertiary" semantic="error" label="Tertiary" icon="home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton mode="tertiary" semantic="error" label="Tertiary" icon="home" /> + </ExampleContainer> + <ExampleContainer> + <DxcButton mode="tertiary" semantic="error" label="Tertiary" disabled icon="home" /> + </ExampleContainer> + </DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton mode="tertiary" semantic="error" label="Tertiary" icon="home" iconPosition="after" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton mode="tertiary" semantic="error" label="Tertiary" icon="home" iconPosition="after" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton mode="tertiary" semantic="error" label="Tertiary" icon="home" iconPosition="after" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton mode="tertiary" semantic="error" label="Tertiary" icon="home" iconPosition="after" /> + </ExampleContainer> + <ExampleContainer> + <DxcButton mode="tertiary" semantic="error" label="Tertiary" disabled icon="home" iconPosition="after" /> + </ExampleContainer> + </DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton mode="tertiary" semantic="error" icon="home" title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton mode="tertiary" semantic="error" icon="home" title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton mode="tertiary" semantic="error" icon="home" title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton mode="tertiary" semantic="error" icon="home" title="Home" /> + </ExampleContainer> + <ExampleContainer> + <DxcButton mode="tertiary" semantic="error" icon="home" disabled title="Home" /> + </ExampleContainer> + </DxcFlex> + </DxcFlex> + </> + </> + <> + <Title title="Warning" theme="light" level={2} /> + <> + <Title title="Small" theme="light" level={2} /> + <Title title="Primary" theme="light" level={3} /> + <DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton label="Primary" semantic="warning" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton label="Primary" semantic="warning" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton label="Primary" semantic="warning" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton label="Primary" semantic="warning" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer> + <DxcButton label="Primary" semantic="warning" size={{ height: "small" }} disabled /> + </ExampleContainer> + </DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton label="Primary" semantic="warning" icon="home" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton label="Primary" semantic="warning" icon="home" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton label="Primary" semantic="warning" icon="home" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton label="Primary" semantic="warning" icon="home" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer> + <DxcButton label="Primary" semantic="warning" disabled icon="home" size={{ height: "small" }} /> + </ExampleContainer> + </DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton + label="Primary" + semantic="warning" + icon="home" + iconPosition="after" + size={{ height: "small" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton + label="Primary" + semantic="warning" + icon="home" + iconPosition="after" + size={{ height: "small" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton + label="Primary" + semantic="warning" + icon="home" + iconPosition="after" + size={{ height: "small" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton + label="Primary" + semantic="warning" + icon="home" + iconPosition="after" + size={{ height: "small" }} + /> + </ExampleContainer> + <ExampleContainer> + <DxcButton + label="Primary" + semantic="warning" + disabled + icon="home" + iconPosition="after" + size={{ height: "small" }} + /> + </ExampleContainer> + </DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton icon="home" semantic="warning" size={{ height: "small" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton icon="home" semantic="warning" size={{ height: "small" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton icon="home" semantic="warning" size={{ height: "small" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton icon="home" semantic="warning" size={{ height: "small" }} title="Home" /> + </ExampleContainer> + <ExampleContainer> + <DxcButton icon="home" semantic="warning" size={{ height: "small" }} disabled title="Home" /> + </ExampleContainer> + </DxcFlex> + </DxcFlex> + <DxcFlex> + <DxcFlex direction="column"> + <Title title="Width" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer> + <DxcButton + icon={facebookIcon} + semantic="warning" + size={{ height: "small", width: "small" }} + title="Facebook" + /> + </ExampleContainer> + <ExampleContainer> + <DxcButton label="Medium" semantic="warning" size={{ height: "small", width: "medium" }} /> + </ExampleContainer> + <ExampleContainer> + <DxcButton label="Large" semantic="warning" size={{ height: "small", width: "large" }} /> + </ExampleContainer> + <ExampleContainer> + <DxcButton label="Fit content" semantic="warning" size={{ height: "small", width: "fitContent" }} /> + </ExampleContainer> + </DxcFlex> + </DxcFlex> + </DxcFlex> + <ExampleContainer> + <DxcButton label="Fill parent" semantic="warning" size={{ height: "small", width: "fillParent" }} /> + </ExampleContainer> + <Title title="Secondary" theme="light" level={3} /> + <DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton mode="secondary" semantic="warning" label="Secondary" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton mode="secondary" semantic="warning" label="Secondary" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton mode="secondary" semantic="warning" label="Secondary" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton mode="secondary" semantic="warning" label="Secondary" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer> + <DxcButton mode="secondary" semantic="warning" label="Secondary" size={{ height: "small" }} disabled /> + </ExampleContainer> + </DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton mode="secondary" semantic="warning" label="Secondary" icon="home" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton mode="secondary" semantic="warning" label="Secondary" icon="home" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton mode="secondary" semantic="warning" label="Secondary" icon="home" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton mode="secondary" semantic="warning" label="Secondary" icon="home" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer> + <DxcButton + mode="secondary" + semantic="warning" + label="Secondary" + disabled + icon="home" + size={{ height: "small" }} + /> + </ExampleContainer> + </DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton + mode="secondary" + semantic="warning" + label="Secondary" + icon="home" + iconPosition="after" + size={{ height: "small" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton + mode="secondary" + semantic="warning" + label="Secondary" + icon="home" + iconPosition="after" + size={{ height: "small" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton + mode="secondary" + semantic="warning" + label="Secondary" + icon="home" + iconPosition="after" + size={{ height: "small" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton + mode="secondary" + semantic="warning" + label="Secondary" + icon="home" + iconPosition="after" + size={{ height: "small" }} + /> + </ExampleContainer> + <ExampleContainer> + <DxcButton + mode="secondary" + semantic="warning" + label="Secondary" + disabled + icon="home" + iconPosition="after" + size={{ height: "small" }} + /> + </ExampleContainer> + </DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton mode="secondary" semantic="warning" icon="home" size={{ height: "small" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton mode="secondary" semantic="warning" icon="home" size={{ height: "small" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton mode="secondary" semantic="warning" icon="home" size={{ height: "small" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton mode="secondary" semantic="warning" icon="home" size={{ height: "small" }} title="Home" /> + </ExampleContainer> + <ExampleContainer> + <DxcButton + mode="secondary" + semantic="warning" + icon="home" + size={{ height: "small" }} + disabled + title="Home" + /> + </ExampleContainer> + </DxcFlex> + </DxcFlex> + <Title title="Tertiary" theme="light" level={3} /> + <DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton mode="tertiary" semantic="warning" label="Tertiary" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton mode="tertiary" semantic="warning" label="Tertiary" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton mode="tertiary" semantic="warning" label="Tertiary" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton mode="tertiary" semantic="warning" label="Tertiary" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer> + <DxcButton mode="tertiary" semantic="warning" label="Tertiary" size={{ height: "small" }} disabled /> + </ExampleContainer> + </DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton mode="tertiary" semantic="warning" label="Tertiary" icon="home" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton mode="tertiary" semantic="warning" label="Tertiary" icon="home" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton mode="tertiary" semantic="warning" label="Tertiary" icon="home" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton mode="tertiary" semantic="warning" label="Tertiary" icon="home" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer> + <DxcButton + mode="tertiary" + semantic="warning" + label="Tertiary" + disabled + icon="home" + size={{ height: "small" }} + /> + </ExampleContainer> + </DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton + mode="tertiary" + semantic="warning" + label="Tertiary" + icon="home" + iconPosition="after" + size={{ height: "small" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton + mode="tertiary" + semantic="warning" + label="Tertiary" + icon="home" + iconPosition="after" + size={{ height: "small" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton + mode="tertiary" + semantic="warning" + label="Tertiary" + icon="home" + iconPosition="after" + size={{ height: "small" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton + mode="tertiary" + semantic="warning" + label="Tertiary" + icon="home" + iconPosition="after" + size={{ height: "small" }} + /> + </ExampleContainer> + <ExampleContainer> + <DxcButton + mode="tertiary" + semantic="warning" + label="Tertiary" + disabled + icon="home" + iconPosition="after" + size={{ height: "small" }} + /> + </ExampleContainer> + </DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton mode="tertiary" semantic="warning" icon="home" size={{ height: "small" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton mode="tertiary" semantic="warning" icon="home" size={{ height: "small" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton mode="tertiary" semantic="warning" icon="home" size={{ height: "small" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton mode="tertiary" semantic="warning" icon="home" size={{ height: "small" }} title="Home" /> + </ExampleContainer> + <ExampleContainer> + <DxcButton + mode="tertiary" + semantic="warning" + icon="home" + size={{ height: "small" }} + disabled + title="Home" + /> + </ExampleContainer> + </DxcFlex> + </DxcFlex> + </> + <> + <Title title="Medium" theme="light" level={2} /> + <Title title="Primary" theme="light" level={2} /> + <DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton label="Primary" semantic="warning" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton label="Primary" semantic="warning" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton label="Primary" semantic="warning" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton label="Primary" semantic="warning" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer> + <DxcButton label="Primary" semantic="warning" size={{ height: "medium" }} disabled /> + </ExampleContainer> + </DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton label="Primary" semantic="warning" icon="home" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton label="Primary" semantic="warning" icon="home" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton label="Primary" semantic="warning" icon="home" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton label="Primary" semantic="warning" icon="home" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer> + <DxcButton label="Primary" semantic="warning" disabled icon="home" size={{ height: "medium" }} /> + </ExampleContainer> + </DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton + label="Primary" + semantic="warning" + icon="home" + iconPosition="after" + size={{ height: "medium" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton + label="Primary" + semantic="warning" + icon="home" + iconPosition="after" + size={{ height: "medium" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton + label="Primary" + semantic="warning" + icon="home" + iconPosition="after" + size={{ height: "medium" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton + label="Primary" + semantic="warning" + icon="home" + iconPosition="after" + size={{ height: "medium" }} + /> + </ExampleContainer> + <ExampleContainer> + <DxcButton + label="Primary" + semantic="warning" + disabled + icon="home" + iconPosition="after" + size={{ height: "medium" }} + /> + </ExampleContainer> + </DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton icon="home" semantic="warning" size={{ height: "medium" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton icon="home" semantic="warning" size={{ height: "medium" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton icon="home" semantic="warning" size={{ height: "medium" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton icon="home" semantic="warning" size={{ height: "medium" }} title="Home" /> + </ExampleContainer> + <ExampleContainer> + <DxcButton icon="home" semantic="warning" size={{ height: "medium" }} disabled title="Home" /> + </ExampleContainer> + </DxcFlex> + </DxcFlex> + <DxcFlex> + <DxcFlex direction="column"> + <Title title="Width" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer> + <DxcButton + icon={facebookIcon} + semantic="warning" + size={{ height: "medium", width: "small" }} + title="Facebook" + /> + </ExampleContainer> + <ExampleContainer> + <DxcButton label="Medium" semantic="warning" size={{ height: "medium", width: "medium" }} /> + </ExampleContainer> + <ExampleContainer> + <DxcButton label="Large" semantic="warning" size={{ height: "medium", width: "large" }} /> + </ExampleContainer> + <ExampleContainer> + <DxcButton label="Fit content" semantic="warning" size={{ height: "medium", width: "fitContent" }} /> + </ExampleContainer> + </DxcFlex> + </DxcFlex> + </DxcFlex> + <ExampleContainer> + <DxcButton label="Fill parent" semantic="warning" size={{ height: "medium", width: "fillParent" }} /> + </ExampleContainer> + <Title title="Secondary" theme="light" level={3} /> + <DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton mode="secondary" semantic="warning" label="Secondary" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton mode="secondary" semantic="warning" label="Secondary" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton mode="secondary" semantic="warning" label="Secondary" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton mode="secondary" semantic="warning" label="Secondary" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer> + <DxcButton mode="secondary" semantic="warning" label="Secondary" size={{ height: "medium" }} disabled /> + </ExampleContainer> + </DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton + mode="secondary" + semantic="warning" + label="Secondary" + icon="home" + size={{ height: "medium" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton + mode="secondary" + semantic="warning" + label="Secondary" + icon="home" + size={{ height: "medium" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton + mode="secondary" + semantic="warning" + label="Secondary" + icon="home" + size={{ height: "medium" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton + mode="secondary" + semantic="warning" + label="Secondary" + icon="home" + size={{ height: "medium" }} + /> + </ExampleContainer> + <ExampleContainer> + <DxcButton + mode="secondary" + semantic="warning" + label="Secondary" + disabled + icon="home" + size={{ height: "medium" }} + /> + </ExampleContainer> + </DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton + mode="secondary" + semantic="warning" + label="Secondary" + icon="home" + iconPosition="after" + size={{ height: "medium" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton + mode="secondary" + semantic="warning" + label="Secondary" + icon="home" + iconPosition="after" + size={{ height: "medium" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton + mode="secondary" + semantic="warning" + label="Secondary" + icon="home" + iconPosition="after" + size={{ height: "medium" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton + mode="secondary" + semantic="warning" + label="Secondary" + icon="home" + iconPosition="after" + size={{ height: "medium" }} + /> + </ExampleContainer> + <ExampleContainer> + <DxcButton + mode="secondary" + semantic="warning" + label="Secondary" + icon="home" + iconPosition="after" + size={{ height: "medium" }} + disabled + /> + </ExampleContainer> + </DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton mode="secondary" semantic="warning" icon="home" size={{ height: "medium" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton mode="secondary" semantic="warning" icon="home" size={{ height: "medium" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton mode="secondary" semantic="warning" icon="home" size={{ height: "medium" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton mode="secondary" semantic="warning" icon="home" size={{ height: "medium" }} title="Home" /> + </ExampleContainer> + <ExampleContainer> + <DxcButton + mode="secondary" + semantic="warning" + icon="home" + size={{ height: "medium" }} + disabled + title="Home" + /> + </ExampleContainer> + </DxcFlex> + </DxcFlex> + <Title title="Tertiary" theme="light" level={3} /> + <DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton mode="tertiary" semantic="warning" label="Tertiary" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton mode="tertiary" semantic="warning" label="Tertiary" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton mode="tertiary" semantic="warning" label="Tertiary" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton mode="tertiary" semantic="warning" label="Tertiary" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer> + <DxcButton mode="tertiary" semantic="warning" label="Tertiary" size={{ height: "medium" }} disabled /> + </ExampleContainer> + </DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton mode="tertiary" semantic="warning" label="Tertiary" icon="home" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton mode="tertiary" semantic="warning" label="Tertiary" icon="home" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton mode="tertiary" semantic="warning" label="Tertiary" icon="home" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton mode="tertiary" semantic="warning" label="Tertiary" icon="home" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer> + <DxcButton + mode="tertiary" + semantic="warning" + label="Tertiary" + disabled + icon="home" + size={{ height: "medium" }} + /> + </ExampleContainer> + </DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton + mode="tertiary" + semantic="warning" + label="Tertiary" + icon="home" + iconPosition="after" + size={{ height: "medium" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton + mode="tertiary" + semantic="warning" + label="Tertiary" + icon="home" + iconPosition="after" + size={{ height: "medium" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton + mode="tertiary" + semantic="warning" + label="Tertiary" + icon="home" + iconPosition="after" + size={{ height: "medium" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton + mode="tertiary" + semantic="warning" + label="Tertiary" + icon="home" + iconPosition="after" + size={{ height: "medium" }} + /> + </ExampleContainer> + <ExampleContainer> + <DxcButton + mode="tertiary" + semantic="warning" + label="Tertiary" + icon="home" + iconPosition="after" + size={{ height: "medium" }} + disabled + /> + </ExampleContainer> + </DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton mode="tertiary" semantic="warning" icon="home" size={{ height: "medium" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton mode="tertiary" semantic="warning" icon="home" size={{ height: "medium" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton mode="tertiary" semantic="warning" icon="home" size={{ height: "medium" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton mode="tertiary" semantic="warning" icon="home" size={{ height: "medium" }} title="Home" /> + </ExampleContainer> + <ExampleContainer> + <DxcButton + mode="tertiary" + semantic="warning" + icon="home" + size={{ height: "medium" }} + disabled + title="Home" + /> + </ExampleContainer> + </DxcFlex> + </DxcFlex> + </> + <> + <Title title="Large" theme="light" level={2} /> + <Title title="Primary" theme="light" level={3} /> + <DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton label="Primary" semantic="warning" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton label="Primary" semantic="warning" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton label="Primary" semantic="warning" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton label="Primary" semantic="warning" /> + </ExampleContainer> + <ExampleContainer> + <DxcButton label="Primary" semantic="warning" disabled /> + </ExampleContainer> + </DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton label="Primary" semantic="warning" icon="home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton label="Primary" semantic="warning" icon="home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton label="Primary" semantic="warning" icon="home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton label="Primary" semantic="warning" icon="home" /> + </ExampleContainer> + <ExampleContainer> + <DxcButton label="Primary" semantic="warning" disabled icon="home" /> + </ExampleContainer> + </DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton label="Primary" semantic="warning" icon="home" iconPosition="after" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton label="Primary" semantic="warning" icon="home" iconPosition="after" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton label="Primary" semantic="warning" icon="home" iconPosition="after" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton label="Primary" semantic="warning" icon="home" iconPosition="after" /> + </ExampleContainer> + <ExampleContainer> + <DxcButton label="Primary" semantic="warning" disabled icon="home" iconPosition="after" /> + </ExampleContainer> + </DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton icon="home" semantic="warning" title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton icon="home" semantic="warning" title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton icon="home" semantic="warning" title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton icon="home" semantic="warning" title="Home" /> + </ExampleContainer> + <ExampleContainer> + <DxcButton icon="home" semantic="warning" disabled title="Home" /> + </ExampleContainer> + </DxcFlex> + </DxcFlex> + <DxcFlex> + <DxcFlex direction="column"> + <Title title="Width" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer> + <DxcButton + icon={facebookIcon} + semantic="warning" + size={{ height: "large", width: "small" }} + title="Facebook" + /> + </ExampleContainer> + <ExampleContainer> + <DxcButton label="Medium" semantic="warning" size={{ height: "large", width: "medium" }} /> + </ExampleContainer> + <ExampleContainer> + <DxcButton label="Large" semantic="warning" size={{ height: "large", width: "large" }} /> + </ExampleContainer> + <ExampleContainer> + <DxcButton label="Fit content" semantic="warning" size={{ height: "large", width: "fitContent" }} /> + </ExampleContainer> + </DxcFlex> + </DxcFlex> + </DxcFlex> + <ExampleContainer> + <DxcButton label="Fill parent" semantic="warning" size={{ height: "large", width: "fillParent" }} /> + </ExampleContainer> + <Title title="Secondary" theme="light" level={3} /> + <DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton mode="secondary" semantic="warning" label="Secondary" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton mode="secondary" semantic="warning" label="Secondary" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton mode="secondary" semantic="warning" label="Secondary" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton mode="secondary" semantic="warning" label="Secondary" /> + </ExampleContainer> + <ExampleContainer> + <DxcButton mode="secondary" semantic="warning" label="Secondary" disabled /> + </ExampleContainer> + </DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton mode="secondary" semantic="warning" label="Secondary" icon="home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton mode="secondary" semantic="warning" label="Secondary" icon="home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton mode="secondary" semantic="warning" label="Secondary" icon="home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton mode="secondary" semantic="warning" label="Secondary" icon="home" /> + </ExampleContainer> + <ExampleContainer> + <DxcButton mode="secondary" semantic="warning" label="Secondary" disabled icon="home" /> + </ExampleContainer> + </DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton mode="secondary" semantic="warning" label="Secondary" icon="home" iconPosition="after" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton mode="secondary" semantic="warning" label="Secondary" icon="home" iconPosition="after" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton mode="secondary" semantic="warning" label="Secondary" icon="home" iconPosition="after" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton mode="secondary" semantic="warning" label="Secondary" icon="home" iconPosition="after" /> + </ExampleContainer> + <ExampleContainer> + <DxcButton + mode="secondary" + semantic="warning" + label="Secondary" + disabled + icon="home" + iconPosition="after" + /> + </ExampleContainer> + </DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton mode="secondary" semantic="warning" icon="home" title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton mode="secondary" semantic="warning" icon="home" title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton mode="secondary" semantic="warning" icon="home" title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton mode="secondary" semantic="warning" icon="home" title="Home" /> + </ExampleContainer> + <ExampleContainer> + <DxcButton mode="secondary" semantic="warning" icon="home" disabled title="Home" /> + </ExampleContainer> + </DxcFlex> + </DxcFlex> + <Title title="Tertiary" theme="light" level={3} /> + <DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton mode="tertiary" semantic="warning" label="Tertiary" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton mode="tertiary" semantic="warning" label="Tertiary" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton mode="tertiary" semantic="warning" label="Tertiary" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton mode="tertiary" semantic="warning" label="Tertiary" /> + </ExampleContainer> + <ExampleContainer> + <DxcButton mode="tertiary" semantic="warning" label="Tertiary" disabled /> + </ExampleContainer> + </DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton mode="tertiary" semantic="warning" label="Tertiary" icon="home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton mode="tertiary" semantic="warning" label="Tertiary" icon="home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton mode="tertiary" semantic="warning" label="Tertiary" icon="home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton mode="tertiary" semantic="warning" label="Tertiary" icon="home" /> + </ExampleContainer> + <ExampleContainer> + <DxcButton mode="tertiary" semantic="warning" label="Tertiary" disabled icon="home" /> + </ExampleContainer> + </DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton mode="tertiary" semantic="warning" label="Tertiary" icon="home" iconPosition="after" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton mode="tertiary" semantic="warning" label="Tertiary" icon="home" iconPosition="after" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton mode="tertiary" semantic="warning" label="Tertiary" icon="home" iconPosition="after" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton mode="tertiary" semantic="warning" label="Tertiary" icon="home" iconPosition="after" /> + </ExampleContainer> + <ExampleContainer> + <DxcButton + mode="tertiary" + semantic="warning" + label="Tertiary" + disabled + icon="home" + iconPosition="after" + /> + </ExampleContainer> + </DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton mode="tertiary" semantic="warning" icon="home" title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton mode="tertiary" semantic="warning" icon="home" title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton mode="tertiary" semantic="warning" icon="home" title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton mode="tertiary" semantic="warning" icon="home" title="Home" /> + </ExampleContainer> + <ExampleContainer> + <DxcButton mode="tertiary" semantic="warning" icon="home" disabled title="Home" /> + </ExampleContainer> + </DxcFlex> + </DxcFlex> + </> + </> + <> + <Title title="Success" theme="light" level={2} /> + <> + <Title title="Small" theme="light" level={2} /> + <Title title="Primary" theme="light" level={3} /> + <DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton label="Primary" semantic="success" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton label="Primary" semantic="success" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton label="Primary" semantic="success" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton label="Primary" semantic="success" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer> + <DxcButton label="Primary" semantic="success" size={{ height: "small" }} disabled /> + </ExampleContainer> + </DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton label="Primary" semantic="success" icon="home" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton label="Primary" semantic="success" icon="home" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton label="Primary" semantic="success" icon="home" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton label="Primary" semantic="success" icon="home" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer> + <DxcButton label="Primary" semantic="success" disabled icon="home" size={{ height: "small" }} /> + </ExampleContainer> + </DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton + label="Primary" + semantic="success" + icon="home" + iconPosition="after" + size={{ height: "small" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton + label="Primary" + semantic="success" + icon="home" + iconPosition="after" + size={{ height: "small" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton + label="Primary" + semantic="success" + icon="home" + iconPosition="after" + size={{ height: "small" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton + label="Primary" + semantic="success" + icon="home" + iconPosition="after" + size={{ height: "small" }} + /> + </ExampleContainer> + <ExampleContainer> + <DxcButton + label="Primary" + semantic="success" + disabled + icon="home" + iconPosition="after" + size={{ height: "small" }} + /> + </ExampleContainer> + </DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton icon="home" semantic="success" size={{ height: "small" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton icon="home" semantic="success" size={{ height: "small" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton icon="home" semantic="success" size={{ height: "small" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton icon="home" semantic="success" size={{ height: "small" }} title="Home" /> + </ExampleContainer> + <ExampleContainer> + <DxcButton icon="home" semantic="success" size={{ height: "small" }} disabled title="Home" /> + </ExampleContainer> + </DxcFlex> + </DxcFlex> + <DxcFlex> + <DxcFlex direction="column"> + <Title title="Width" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer> + <DxcButton + icon={facebookIcon} + semantic="success" + size={{ height: "small", width: "small" }} + title="Facebook" + /> + </ExampleContainer> + <ExampleContainer> + <DxcButton label="Medium" semantic="success" size={{ height: "small", width: "medium" }} /> + </ExampleContainer> + <ExampleContainer> + <DxcButton label="Large" semantic="success" size={{ height: "small", width: "large" }} /> + </ExampleContainer> + <ExampleContainer> + <DxcButton label="Fit content" semantic="success" size={{ height: "small", width: "fitContent" }} /> + </ExampleContainer> + </DxcFlex> + </DxcFlex> + </DxcFlex> + <ExampleContainer> + <DxcButton label="Fill parent" semantic="success" size={{ height: "small", width: "fillParent" }} /> + </ExampleContainer> + <Title title="Secondary" theme="light" level={3} /> + <DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton mode="secondary" semantic="success" label="Secondary" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton mode="secondary" semantic="success" label="Secondary" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton mode="secondary" semantic="success" label="Secondary" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton mode="secondary" semantic="success" label="Secondary" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer> + <DxcButton mode="secondary" semantic="success" label="Secondary" size={{ height: "small" }} disabled /> + </ExampleContainer> + </DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton mode="secondary" semantic="success" label="Secondary" icon="home" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton mode="secondary" semantic="success" label="Secondary" icon="home" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton mode="secondary" semantic="success" label="Secondary" icon="home" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton mode="secondary" semantic="success" label="Secondary" icon="home" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer> + <DxcButton + mode="secondary" + semantic="success" + label="Secondary" + disabled + icon="home" + size={{ height: "small" }} + /> + </ExampleContainer> + </DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton + mode="secondary" + semantic="success" + label="Secondary" + icon="home" + iconPosition="after" + size={{ height: "small" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton + mode="secondary" + semantic="success" + label="Secondary" + icon="home" + iconPosition="after" + size={{ height: "small" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton + mode="secondary" + semantic="success" + label="Secondary" + icon="home" + iconPosition="after" + size={{ height: "small" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton + mode="secondary" + semantic="success" + label="Secondary" + icon="home" + iconPosition="after" + size={{ height: "small" }} + /> + </ExampleContainer> + <ExampleContainer> + <DxcButton + mode="secondary" + semantic="success" + label="Secondary" + disabled + icon="home" + iconPosition="after" + size={{ height: "small" }} + /> + </ExampleContainer> + </DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton mode="secondary" semantic="success" icon="home" size={{ height: "small" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton mode="secondary" semantic="success" icon="home" size={{ height: "small" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton mode="secondary" semantic="success" icon="home" size={{ height: "small" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton mode="secondary" semantic="success" icon="home" size={{ height: "small" }} title="Home" /> + </ExampleContainer> + <ExampleContainer> + <DxcButton + mode="secondary" + semantic="success" + icon="home" + size={{ height: "small" }} + disabled + title="Home" + /> + </ExampleContainer> + </DxcFlex> + </DxcFlex> + <Title title="Tertiary" theme="light" level={3} /> + <DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton mode="tertiary" semantic="success" label="Tertiary" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton mode="tertiary" semantic="success" label="Tertiary" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton mode="tertiary" semantic="success" label="Tertiary" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton mode="tertiary" semantic="success" label="Tertiary" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer> + <DxcButton mode="tertiary" semantic="success" label="Tertiary" size={{ height: "small" }} disabled /> + </ExampleContainer> + </DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton mode="tertiary" semantic="success" label="Tertiary" icon="home" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton mode="tertiary" semantic="success" label="Tertiary" icon="home" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton mode="tertiary" semantic="success" label="Tertiary" icon="home" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton mode="tertiary" semantic="success" label="Tertiary" icon="home" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer> + <DxcButton + mode="tertiary" + semantic="success" + label="Tertiary" + disabled + icon="home" + size={{ height: "small" }} + /> + </ExampleContainer> + </DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton + mode="tertiary" + semantic="success" + label="Tertiary" + icon="home" + iconPosition="after" + size={{ height: "small" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton + mode="tertiary" + semantic="success" + label="Tertiary" + icon="home" + iconPosition="after" + size={{ height: "small" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton + mode="tertiary" + semantic="success" + label="Tertiary" + icon="home" + iconPosition="after" + size={{ height: "small" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton + mode="tertiary" + semantic="success" + label="Tertiary" + icon="home" + iconPosition="after" + size={{ height: "small" }} + /> + </ExampleContainer> + <ExampleContainer> + <DxcButton + mode="tertiary" + semantic="success" + label="Tertiary" + disabled + icon="home" + iconPosition="after" + size={{ height: "small" }} + /> + </ExampleContainer> + </DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton mode="tertiary" semantic="success" icon="home" size={{ height: "small" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton mode="tertiary" semantic="success" icon="home" size={{ height: "small" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton mode="tertiary" semantic="success" icon="home" size={{ height: "small" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton mode="tertiary" semantic="success" icon="home" size={{ height: "small" }} title="Home" /> + </ExampleContainer> + <ExampleContainer> + <DxcButton + mode="tertiary" + semantic="success" + icon="home" + size={{ height: "small" }} + disabled + title="Home" + /> + </ExampleContainer> + </DxcFlex> + </DxcFlex> + </> + <> + <Title title="Medium" theme="light" level={2} /> + <Title title="Primary" theme="light" level={2} /> + <DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton label="Primary" semantic="success" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton label="Primary" semantic="success" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton label="Primary" semantic="success" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton label="Primary" semantic="success" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer> + <DxcButton label="Primary" semantic="success" size={{ height: "medium" }} disabled /> + </ExampleContainer> + </DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton label="Primary" semantic="success" icon="home" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton label="Primary" semantic="success" icon="home" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton label="Primary" semantic="success" icon="home" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton label="Primary" semantic="success" icon="home" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer> + <DxcButton label="Primary" semantic="success" icon="home" size={{ height: "medium" }} disabled /> + </ExampleContainer> + </DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton + label="Primary" + semantic="success" + icon="home" + iconPosition="after" + size={{ height: "medium" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton + label="Primary" + semantic="success" + icon="home" + iconPosition="after" + size={{ height: "medium" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton + label="Primary" + semantic="success" + icon="home" + iconPosition="after" + size={{ height: "medium" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton + label="Primary" + semantic="success" + icon="home" + iconPosition="after" + size={{ height: "medium" }} + /> + </ExampleContainer> + <ExampleContainer> + <DxcButton + label="Primary" + semantic="success" + icon="home" + iconPosition="after" + size={{ height: "medium" }} + disabled + /> + </ExampleContainer> + </DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton icon="home" semantic="success" size={{ height: "medium" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton icon="home" semantic="success" size={{ height: "medium" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton icon="home" semantic="success" size={{ height: "medium" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton icon="home" semantic="success" size={{ height: "medium" }} title="Home" /> + </ExampleContainer> + <ExampleContainer> + <DxcButton icon="home" semantic="success" size={{ height: "medium" }} disabled title="Home" /> + </ExampleContainer> + </DxcFlex> + </DxcFlex> + <DxcFlex> + <DxcFlex direction="column"> + <Title title="Width" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer> + <DxcButton + icon={facebookIcon} + semantic="success" + size={{ height: "medium", width: "small" }} + title="Facebook" + /> + </ExampleContainer> + <ExampleContainer> + <DxcButton label="Medium" semantic="success" size={{ height: "medium", width: "medium" }} /> + </ExampleContainer> + <ExampleContainer> + <DxcButton label="Large" semantic="success" size={{ height: "medium", width: "large" }} /> + </ExampleContainer> + <ExampleContainer> + <DxcButton label="Fit content" semantic="success" size={{ height: "medium", width: "fitContent" }} /> + </ExampleContainer> + </DxcFlex> + </DxcFlex> + </DxcFlex> + <ExampleContainer> + <DxcButton label="Fill parent" semantic="success" size={{ height: "medium", width: "fillParent" }} /> + </ExampleContainer> + <Title title="Secondary" theme="light" level={3} /> + <DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton mode="secondary" semantic="success" label="Secondary" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton mode="secondary" semantic="success" label="Secondary" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton mode="secondary" semantic="success" label="Secondary" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton mode="secondary" semantic="success" label="Secondary" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer> + <DxcButton mode="secondary" semantic="success" label="Secondary" size={{ height: "medium" }} disabled /> + </ExampleContainer> + </DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton + mode="secondary" + semantic="success" + label="Secondary" + icon="home" + size={{ height: "medium" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton + mode="secondary" + semantic="success" + label="Secondary" + icon="home" + size={{ height: "medium" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton + mode="secondary" + semantic="success" + label="Secondary" + icon="home" + size={{ height: "medium" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton + mode="secondary" + semantic="success" + label="Secondary" + icon="home" + size={{ height: "medium" }} + /> + </ExampleContainer> + <ExampleContainer> + <DxcButton + mode="secondary" + semantic="success" + label="Secondary" + icon="home" + size={{ height: "medium" }} + disabled + /> + </ExampleContainer> + </DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton + mode="secondary" + semantic="success" + label="Secondary" + icon="home" + iconPosition="after" + size={{ height: "medium" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton + mode="secondary" + semantic="success" + label="Secondary" + icon="home" + iconPosition="after" + size={{ height: "medium" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton + mode="secondary" + semantic="success" + label="Secondary" + icon="home" + iconPosition="after" + size={{ height: "medium" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton + mode="secondary" + semantic="success" + label="Secondary" + icon="home" + iconPosition="after" + size={{ height: "medium" }} + /> + </ExampleContainer> + <ExampleContainer> + <DxcButton + mode="secondary" + semantic="success" + label="Secondary" + icon="home" + iconPosition="after" + size={{ height: "medium" }} + disabled + /> + </ExampleContainer> + </DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton mode="secondary" semantic="success" icon="home" size={{ height: "medium" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton mode="secondary" semantic="success" icon="home" size={{ height: "medium" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton mode="secondary" semantic="success" icon="home" size={{ height: "medium" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton mode="secondary" semantic="success" icon="home" size={{ height: "medium" }} title="Home" /> + </ExampleContainer> + <ExampleContainer> + <DxcButton + mode="secondary" + semantic="success" + icon="home" + size={{ height: "medium" }} + disabled + title="Home" + /> + </ExampleContainer> + </DxcFlex> + </DxcFlex> + <Title title="Tertiary" theme="light" level={3} /> + <DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton mode="tertiary" semantic="success" label="Tertiary" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton mode="tertiary" semantic="success" label="Tertiary" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton mode="tertiary" semantic="success" label="Tertiary" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton mode="tertiary" semantic="success" label="Tertiary" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer> + <DxcButton mode="tertiary" semantic="success" label="Tertiary" size={{ height: "medium" }} disabled /> + </ExampleContainer> + </DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton mode="tertiary" semantic="success" label="Tertiary" icon="home" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton mode="tertiary" semantic="success" label="Tertiary" icon="home" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton mode="tertiary" semantic="success" label="Tertiary" icon="home" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton mode="tertiary" semantic="success" label="Tertiary" icon="home" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer> + <DxcButton + mode="tertiary" + semantic="success" + label="Tertiary" + icon="home" + size={{ height: "medium" }} + disabled + /> + </ExampleContainer> + </DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton + mode="tertiary" + semantic="success" + label="Tertiary" + icon="home" + iconPosition="after" + size={{ height: "medium" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton + mode="tertiary" + semantic="success" + label="Tertiary" + icon="home" + iconPosition="after" + size={{ height: "medium" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton + mode="tertiary" + semantic="success" + label="Tertiary" + icon="home" + iconPosition="after" + size={{ height: "medium" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton + mode="tertiary" + semantic="success" + label="Tertiary" + icon="home" + iconPosition="after" + size={{ height: "medium" }} + /> + </ExampleContainer> + <ExampleContainer> + <DxcButton + mode="tertiary" + semantic="success" + label="Tertiary" + icon="home" + iconPosition="after" + size={{ height: "medium" }} + disabled + /> + </ExampleContainer> + </DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton mode="tertiary" semantic="success" icon="home" size={{ height: "medium" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton mode="tertiary" semantic="success" icon="home" size={{ height: "medium" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton mode="tertiary" semantic="success" icon="home" size={{ height: "medium" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton mode="tertiary" semantic="success" icon="home" size={{ height: "medium" }} title="Home" /> + </ExampleContainer> + <ExampleContainer> + <DxcButton + mode="tertiary" + semantic="success" + icon="home" + size={{ height: "medium" }} + disabled + title="Home" + /> + </ExampleContainer> + </DxcFlex> + </DxcFlex> + </> + <> + <Title title="Large" theme="light" level={2} /> + <Title title="Primary" theme="light" level={3} /> + <DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton label="Primary" semantic="success" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton label="Primary" semantic="success" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton label="Primary" semantic="success" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton label="Primary" semantic="success" /> + </ExampleContainer> + <ExampleContainer> + <DxcButton label="Primary" semantic="success" disabled /> + </ExampleContainer> + </DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton label="Primary" semantic="success" icon="home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton label="Primary" semantic="success" icon="home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton label="Primary" semantic="success" icon="home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton label="Primary" semantic="success" icon="home" /> + </ExampleContainer> + <ExampleContainer> + <DxcButton label="Primary" semantic="success" icon="home" disabled /> + </ExampleContainer> + </DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton label="Primary" semantic="success" icon="home" iconPosition="after" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton label="Primary" semantic="success" icon="home" iconPosition="after" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton label="Primary" semantic="success" icon="home" iconPosition="after" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton label="Primary" semantic="success" icon="home" iconPosition="after" /> + </ExampleContainer> + <ExampleContainer> + <DxcButton label="Primary" semantic="success" icon="home" iconPosition="after" disabled /> + </ExampleContainer> + </DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton icon="home" semantic="success" title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton icon="home" semantic="success" title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton icon="home" semantic="success" title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton icon="home" semantic="success" title="Home" /> + </ExampleContainer> + <ExampleContainer> + <DxcButton icon="home" semantic="success" disabled title="Home" /> + </ExampleContainer> + </DxcFlex> + </DxcFlex> + <DxcFlex> + <DxcFlex direction="column"> + <Title title="Width" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer> + <DxcButton + icon={facebookIcon} + semantic="success" + size={{ height: "large", width: "small" }} + title="Facebook" + /> + </ExampleContainer> + <ExampleContainer> + <DxcButton label="Medium" semantic="success" size={{ height: "large", width: "medium" }} /> + </ExampleContainer> + <ExampleContainer> + <DxcButton label="Large" semantic="success" size={{ height: "large", width: "large" }} /> + </ExampleContainer> + <ExampleContainer> + <DxcButton label="Fit content" semantic="success" size={{ height: "large", width: "fitContent" }} /> + </ExampleContainer> + </DxcFlex> + </DxcFlex> + </DxcFlex> + <ExampleContainer> + <DxcButton label="Fill parent" semantic="success" size={{ height: "large", width: "fillParent" }} /> + </ExampleContainer> + <Title title="Secondary" theme="light" level={3} /> + <DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton mode="secondary" semantic="success" label="Secondary" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton mode="secondary" semantic="success" label="Secondary" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton mode="secondary" semantic="success" label="Secondary" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton mode="secondary" semantic="success" label="Secondary" /> + </ExampleContainer> + <ExampleContainer> + <DxcButton mode="secondary" semantic="success" label="Secondary" disabled /> + </ExampleContainer> + </DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton mode="secondary" semantic="success" label="Secondary" icon="home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton mode="secondary" semantic="success" label="Secondary" icon="home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton mode="secondary" semantic="success" label="Secondary" icon="home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton mode="secondary" semantic="success" label="Secondary" icon="home" /> + </ExampleContainer> + <ExampleContainer> + <DxcButton mode="secondary" semantic="success" label="Secondary" icon="home" disabled /> + </ExampleContainer> + </DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton mode="secondary" semantic="success" label="Secondary" icon="home" iconPosition="after" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton mode="secondary" semantic="success" label="Secondary" icon="home" iconPosition="after" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton mode="secondary" semantic="success" label="Secondary" icon="home" iconPosition="after" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton mode="secondary" semantic="success" label="Secondary" icon="home" iconPosition="after" /> + </ExampleContainer> + <ExampleContainer> + <DxcButton + mode="secondary" + semantic="success" + label="Secondary" + icon="home" + iconPosition="after" + disabled + /> + </ExampleContainer> + </DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton mode="secondary" semantic="success" icon="home" title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton mode="secondary" semantic="success" icon="home" title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton mode="secondary" semantic="success" icon="home" title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton mode="secondary" semantic="success" icon="home" title="Home" /> + </ExampleContainer> + <ExampleContainer> + <DxcButton mode="secondary" semantic="success" icon="home" disabled title="Home" /> + </ExampleContainer> + </DxcFlex> + </DxcFlex> + <Title title="Tertiary" theme="light" level={3} /> + <DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton mode="tertiary" semantic="success" label="Tertiary" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton mode="tertiary" semantic="success" label="Tertiary" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton mode="tertiary" semantic="success" label="Tertiary" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton mode="tertiary" semantic="success" label="Tertiary" /> + </ExampleContainer> + <ExampleContainer> + <DxcButton mode="tertiary" semantic="success" label="Tertiary" disabled /> + </ExampleContainer> + </DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton mode="tertiary" semantic="success" label="Tertiary" icon="home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton mode="tertiary" semantic="success" label="Tertiary" icon="home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton mode="tertiary" semantic="success" label="Tertiary" icon="home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton mode="tertiary" semantic="success" label="Tertiary" icon="home" /> + </ExampleContainer> + <ExampleContainer> + <DxcButton mode="tertiary" semantic="success" label="Tertiary" icon="home" disabled /> + </ExampleContainer> + </DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton mode="tertiary" semantic="success" label="Tertiary" icon="home" iconPosition="after" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton mode="tertiary" semantic="success" label="Tertiary" icon="home" iconPosition="after" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton mode="tertiary" semantic="success" label="Tertiary" icon="home" iconPosition="after" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton mode="tertiary" semantic="success" label="Tertiary" icon="home" iconPosition="after" /> + </ExampleContainer> + <ExampleContainer> + <DxcButton + mode="tertiary" + semantic="success" + label="Tertiary" + icon="home" + iconPosition="after" + disabled + /> + </ExampleContainer> + </DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton mode="tertiary" semantic="success" icon="home" title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton mode="tertiary" semantic="success" icon="home" title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton mode="tertiary" semantic="success" icon="home" title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton mode="tertiary" semantic="success" icon="home" title="Home" /> + </ExampleContainer> + <ExampleContainer> + <DxcButton mode="tertiary" semantic="success" icon="home" disabled title="Home" /> + </ExampleContainer> + </DxcFlex> + </DxcFlex> + </> + </> + <> + <Title title="Info" theme="light" level={2} /> + <> + <Title title="Small" theme="light" level={2} /> + <Title title="Primary" theme="light" level={3} /> + <DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton label="Primary" semantic="info" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton label="Primary" semantic="info" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton label="Primary" semantic="info" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton label="Primary" semantic="info" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer> + <DxcButton label="Primary" semantic="info" size={{ height: "small" }} disabled /> + </ExampleContainer> + </DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton label="Primary" semantic="info" icon="home" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton label="Primary" semantic="info" icon="home" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton label="Primary" semantic="info" icon="home" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton label="Primary" semantic="info" icon="home" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer> + <DxcButton label="Primary" semantic="info" icon="home" size={{ height: "small" }} disabled /> + </ExampleContainer> + </DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton label="Primary" semantic="info" icon="home" iconPosition="after" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton label="Primary" semantic="info" icon="home" iconPosition="after" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton label="Primary" semantic="info" icon="home" iconPosition="after" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton label="Primary" semantic="info" icon="home" iconPosition="after" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer> + <DxcButton + label="Primary" + semantic="info" + icon="home" + iconPosition="after" + size={{ height: "small" }} + disabled + /> + </ExampleContainer> + </DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton icon="home" semantic="info" size={{ height: "small" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton icon="home" semantic="info" size={{ height: "small" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton icon="home" semantic="info" size={{ height: "small" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton icon="home" semantic="info" size={{ height: "small" }} title="Home" /> + </ExampleContainer> + <ExampleContainer> + <DxcButton icon="home" semantic="info" size={{ height: "small" }} disabled title="Home" /> + </ExampleContainer> + </DxcFlex> + </DxcFlex> + <DxcFlex> + <DxcFlex direction="column"> + <Title title="Width" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer> + <DxcButton + icon={facebookIcon} + semantic="info" + size={{ height: "small", width: "small" }} + title="Facebook" + /> + </ExampleContainer> + <ExampleContainer> + <DxcButton label="Medium" semantic="info" size={{ height: "small", width: "medium" }} /> + </ExampleContainer> + <ExampleContainer> + <DxcButton label="Large" semantic="info" size={{ height: "small", width: "large" }} /> + </ExampleContainer> + <ExampleContainer> + <DxcButton label="Fit content" semantic="info" size={{ height: "small", width: "fitContent" }} /> + </ExampleContainer> + </DxcFlex> + </DxcFlex> + </DxcFlex> + <ExampleContainer> + <DxcButton label="Fill parent" semantic="info" size={{ height: "small", width: "fillParent" }} /> + </ExampleContainer> + <Title title="Secondary" theme="light" level={3} /> + <DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton mode="secondary" semantic="info" label="Secondary" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton mode="secondary" semantic="info" label="Secondary" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton mode="secondary" semantic="info" label="Secondary" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton mode="secondary" semantic="info" label="Secondary" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer> + <DxcButton mode="secondary" semantic="info" label="Secondary" size={{ height: "small" }} disabled /> + </ExampleContainer> + </DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton mode="secondary" semantic="info" label="Secondary" icon="home" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton mode="secondary" semantic="info" label="Secondary" icon="home" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton mode="secondary" semantic="info" label="Secondary" icon="home" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton mode="secondary" semantic="info" label="Secondary" icon="home" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer> + <DxcButton + mode="secondary" + semantic="info" + label="Secondary" + icon="home" + size={{ height: "small" }} + disabled + /> + </ExampleContainer> + </DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton + mode="secondary" + semantic="info" + label="Secondary" + icon="home" + iconPosition="after" + size={{ height: "small" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton + mode="secondary" + semantic="info" + label="Secondary" + icon="home" + iconPosition="after" + size={{ height: "small" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton + mode="secondary" + semantic="info" + label="Secondary" + icon="home" + iconPosition="after" + size={{ height: "small" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton + mode="secondary" + semantic="info" + label="Secondary" + icon="home" + iconPosition="after" + size={{ height: "small" }} + /> + </ExampleContainer> + <ExampleContainer> + <DxcButton + mode="secondary" + semantic="info" + label="Secondary" + icon="home" + iconPosition="after" + size={{ height: "small" }} + disabled + /> + </ExampleContainer> + </DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton mode="secondary" semantic="info" icon="home" size={{ height: "small" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton mode="secondary" semantic="info" icon="home" size={{ height: "small" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton mode="secondary" semantic="info" icon="home" size={{ height: "small" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton mode="secondary" semantic="info" icon="home" size={{ height: "small" }} title="Home" /> + </ExampleContainer> + <ExampleContainer> + <DxcButton + mode="secondary" + semantic="info" + icon="home" + size={{ height: "small" }} + disabled + title="Home" + /> + </ExampleContainer> + </DxcFlex> + </DxcFlex> + <Title title="Tertiary" theme="light" level={3} /> + <DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton mode="tertiary" semantic="info" label="Tertiary" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton mode="tertiary" semantic="info" label="Tertiary" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton mode="tertiary" semantic="info" label="Tertiary" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton mode="tertiary" semantic="info" label="Tertiary" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer> + <DxcButton mode="tertiary" semantic="info" label="Tertiary" size={{ height: "small" }} disabled /> + </ExampleContainer> + </DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton mode="tertiary" semantic="info" label="Tertiary" icon="home" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton mode="tertiary" semantic="info" label="Tertiary" icon="home" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton mode="tertiary" semantic="info" label="Tertiary" icon="home" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton mode="tertiary" semantic="info" label="Tertiary" icon="home" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer> + <DxcButton + mode="tertiary" + semantic="info" + label="Tertiary" + icon="home" + size={{ height: "small" }} + disabled + /> + </ExampleContainer> + </DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton + mode="tertiary" + semantic="info" + label="Tertiary" + icon="home" + iconPosition="after" + size={{ height: "small" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton + mode="tertiary" + semantic="info" + label="Tertiary" + icon="home" + iconPosition="after" + size={{ height: "small" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton + mode="tertiary" + semantic="info" + label="Tertiary" + icon="home" + iconPosition="after" + size={{ height: "small" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton + mode="tertiary" + semantic="info" + label="Tertiary" + icon="home" + iconPosition="after" + size={{ height: "small" }} + /> + </ExampleContainer> + <ExampleContainer> + <DxcButton + mode="tertiary" + semantic="info" + label="Tertiary" + icon="home" + iconPosition="after" + size={{ height: "small" }} + disabled + /> + </ExampleContainer> + </DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton mode="tertiary" semantic="info" icon="home" size={{ height: "small" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton mode="tertiary" semantic="info" icon="home" size={{ height: "small" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton mode="tertiary" semantic="info" icon="home" size={{ height: "small" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton mode="tertiary" semantic="info" icon="home" size={{ height: "small" }} title="Home" /> + </ExampleContainer> + <ExampleContainer> + <DxcButton mode="tertiary" semantic="info" icon="home" size={{ height: "small" }} disabled title="Home" /> + </ExampleContainer> + </DxcFlex> + </DxcFlex> + </> + <> + <Title title="Medium" theme="light" level={2} /> + <Title title="Primary" theme="light" level={2} /> + <DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton label="Primary" semantic="info" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton label="Primary" semantic="info" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton label="Primary" semantic="info" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton label="Primary" semantic="info" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer> + <DxcButton label="Primary" semantic="info" size={{ height: "medium" }} disabled /> + </ExampleContainer> + </DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton label="Primary" semantic="info" icon="home" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton label="Primary" semantic="info" icon="home" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton label="Primary" semantic="info" icon="home" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton label="Primary" semantic="info" icon="home" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer> + <DxcButton label="Primary" semantic="info" icon="home" size={{ height: "medium" }} disabled /> + </ExampleContainer> + </DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton label="Primary" semantic="info" icon="home" iconPosition="after" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton label="Primary" semantic="info" icon="home" iconPosition="after" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton label="Primary" semantic="info" icon="home" iconPosition="after" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton label="Primary" semantic="info" icon="home" iconPosition="after" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer> + <DxcButton + label="Primary" + semantic="info" + icon="home" + iconPosition="after" + size={{ height: "medium" }} + disabled + /> + </ExampleContainer> + </DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton icon="home" semantic="info" size={{ height: "medium" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton icon="home" semantic="info" size={{ height: "medium" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton icon="home" semantic="info" size={{ height: "medium" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton icon="home" semantic="info" size={{ height: "medium" }} title="Home" /> + </ExampleContainer> + <ExampleContainer> + <DxcButton icon="home" semantic="info" size={{ height: "medium" }} disabled title="Home" /> + </ExampleContainer> + </DxcFlex> + </DxcFlex> + <DxcFlex> + <DxcFlex direction="column"> + <Title title="Width" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer> + <DxcButton + icon={facebookIcon} + semantic="info" + size={{ height: "medium", width: "small" }} + title="Facebook" + /> + </ExampleContainer> + <ExampleContainer> + <DxcButton label="Medium" semantic="info" size={{ height: "medium", width: "medium" }} /> + </ExampleContainer> + <ExampleContainer> + <DxcButton label="Large" semantic="info" size={{ height: "medium", width: "large" }} /> + </ExampleContainer> + <ExampleContainer> + <DxcButton label="Fit content" semantic="info" size={{ height: "medium", width: "fitContent" }} /> + </ExampleContainer> + </DxcFlex> + </DxcFlex> + </DxcFlex> + <ExampleContainer> + <DxcButton label="Fill parent" semantic="info" size={{ height: "medium", width: "fillParent" }} /> + </ExampleContainer> + <Title title="Secondary" theme="light" level={3} /> + <DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton mode="secondary" semantic="info" label="Secondary" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton mode="secondary" semantic="info" label="Secondary" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton mode="secondary" semantic="info" label="Secondary" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton mode="secondary" semantic="info" label="Secondary" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer> + <DxcButton mode="secondary" semantic="info" label="Secondary" size={{ height: "medium" }} disabled /> + </ExampleContainer> + </DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton mode="secondary" semantic="info" label="Secondary" icon="home" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton mode="secondary" semantic="info" label="Secondary" icon="home" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton mode="secondary" semantic="info" label="Secondary" icon="home" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton mode="secondary" semantic="info" label="Secondary" icon="home" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer> + <DxcButton + mode="secondary" + semantic="info" + label="Secondary" + icon="home" + size={{ height: "medium" }} + disabled + /> + </ExampleContainer> + </DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton + mode="secondary" + semantic="info" + label="Secondary" + icon="home" + iconPosition="after" + size={{ height: "medium" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton + mode="secondary" + semantic="info" + label="Secondary" + icon="home" + iconPosition="after" + size={{ height: "medium" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton + mode="secondary" + semantic="info" + label="Secondary" + icon="home" + iconPosition="after" + size={{ height: "medium" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton + mode="secondary" + semantic="info" + label="Secondary" + icon="home" + iconPosition="after" + size={{ height: "medium" }} + /> + </ExampleContainer> + <ExampleContainer> + <DxcButton + mode="secondary" + semantic="info" + label="Secondary" + icon="home" + iconPosition="after" + size={{ height: "medium" }} + disabled + /> + </ExampleContainer> + </DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton mode="secondary" semantic="info" icon="home" size={{ height: "medium" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton mode="secondary" semantic="info" icon="home" size={{ height: "medium" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton mode="secondary" semantic="info" icon="home" size={{ height: "medium" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton mode="secondary" semantic="info" icon="home" size={{ height: "medium" }} title="Home" /> + </ExampleContainer> + <ExampleContainer> + <DxcButton + mode="secondary" + semantic="info" + icon="home" + size={{ height: "medium" }} + disabled + title="Home" + /> + </ExampleContainer> + </DxcFlex> + </DxcFlex> + <Title title="Tertiary" theme="light" level={3} /> + <DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton mode="tertiary" semantic="info" label="Tertiary" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton mode="tertiary" semantic="info" label="Tertiary" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton mode="tertiary" semantic="info" label="Tertiary" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton mode="tertiary" semantic="info" label="Tertiary" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer> + <DxcButton mode="tertiary" semantic="info" label="Tertiary" size={{ height: "medium" }} disabled /> + </ExampleContainer> + </DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton mode="tertiary" semantic="info" label="Tertiary" icon="home" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton mode="tertiary" semantic="info" label="Tertiary" icon="home" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton mode="tertiary" semantic="info" label="Tertiary" icon="home" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton mode="tertiary" semantic="info" label="Tertiary" icon="home" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer> + <DxcButton + mode="tertiary" + semantic="info" + label="Tertiary" + icon="home" + size={{ height: "medium" }} + disabled + /> + </ExampleContainer> + </DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton + mode="tertiary" + semantic="info" + label="Tertiary" + icon="home" + iconPosition="after" + size={{ height: "medium" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton + mode="tertiary" + semantic="info" + label="Tertiary" + icon="home" + iconPosition="after" + size={{ height: "medium" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton + mode="tertiary" + semantic="info" + label="Tertiary" + icon="home" + iconPosition="after" + size={{ height: "medium" }} + /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton + mode="tertiary" + semantic="info" + label="Tertiary" + icon="home" + iconPosition="after" + size={{ height: "medium" }} + /> + </ExampleContainer> + <ExampleContainer> + <DxcButton + mode="tertiary" + semantic="info" + label="Tertiary" + icon="home" + iconPosition="after" + size={{ height: "medium" }} + disabled + /> + </ExampleContainer> + </DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton mode="tertiary" semantic="info" icon="home" size={{ height: "medium" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton mode="tertiary" semantic="info" icon="home" size={{ height: "medium" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton mode="tertiary" semantic="info" icon="home" size={{ height: "medium" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton mode="tertiary" semantic="info" icon="home" size={{ height: "medium" }} title="Home" /> + </ExampleContainer> + <ExampleContainer> + <DxcButton + mode="tertiary" + semantic="info" + icon="home" + size={{ height: "medium" }} + disabled + title="Home" + /> + </ExampleContainer> + </DxcFlex> + </DxcFlex> + </> + <> + <Title title="Large" theme="light" level={2} /> + <Title title="Primary" theme="light" level={3} /> + <DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton label="Primary" semantic="info" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton label="Primary" semantic="info" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton label="Primary" semantic="info" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton label="Primary" semantic="info" /> + </ExampleContainer> + <ExampleContainer> + <DxcButton label="Primary" semantic="info" disabled /> + </ExampleContainer> + </DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton label="Primary" semantic="info" icon="home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton label="Primary" semantic="info" icon="home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton label="Primary" semantic="info" icon="home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton label="Primary" semantic="info" icon="home" /> + </ExampleContainer> + <ExampleContainer> + <DxcButton label="Primary" semantic="info" icon="home" disabled /> + </ExampleContainer> + </DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton label="Primary" semantic="info" icon="home" iconPosition="after" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton label="Primary" semantic="info" icon="home" iconPosition="after" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton label="Primary" semantic="info" icon="home" iconPosition="after" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton label="Primary" semantic="info" icon="home" iconPosition="after" /> + </ExampleContainer> + <ExampleContainer> + <DxcButton label="Primary" semantic="info" icon="home" iconPosition="after" disabled /> + </ExampleContainer> + </DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton icon="home" semantic="info" title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton icon="home" semantic="info" title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton icon="home" semantic="info" title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton icon="home" semantic="info" title="Home" /> + </ExampleContainer> + <ExampleContainer> + <DxcButton icon="home" semantic="info" disabled title="Home" /> + </ExampleContainer> + </DxcFlex> + </DxcFlex> + <DxcFlex> + <DxcFlex direction="column"> + <Title title="Width" theme="light" level={4} /> + <DxcFlex> + <ExampleContainer> + <DxcButton + icon={facebookIcon} + semantic="info" + size={{ height: "large", width: "small" }} + title="Facebook" + /> + </ExampleContainer> + <ExampleContainer> + <DxcButton label="Medium" semantic="info" size={{ height: "large", width: "medium" }} /> + </ExampleContainer> + <ExampleContainer> + <DxcButton label="Large" semantic="info" size={{ height: "large", width: "large" }} /> + </ExampleContainer> + <ExampleContainer> + <DxcButton label="Fit content" semantic="info" size={{ height: "large", width: "fitContent" }} /> + </ExampleContainer> + </DxcFlex> + </DxcFlex> + </DxcFlex> + <ExampleContainer> + <DxcButton label="Fill parent" semantic="info" size={{ height: "large", width: "fillParent" }} /> + </ExampleContainer> + <Title title="Secondary" theme="light" level={3} /> + <DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton mode="secondary" semantic="info" label="Secondary" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton mode="secondary" semantic="info" label="Secondary" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton mode="secondary" semantic="info" label="Secondary" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton mode="secondary" semantic="info" label="Secondary" /> + </ExampleContainer> + <ExampleContainer> + <DxcButton mode="secondary" semantic="info" label="Secondary" disabled /> + </ExampleContainer> + </DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton mode="secondary" semantic="info" label="Secondary" icon="home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton mode="secondary" semantic="info" label="Secondary" icon="home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton mode="secondary" semantic="info" label="Secondary" icon="home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton mode="secondary" semantic="info" label="Secondary" icon="home" /> + </ExampleContainer> + <ExampleContainer> + <DxcButton mode="secondary" semantic="info" label="Secondary" icon="home" disabled /> + </ExampleContainer> + </DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton mode="secondary" semantic="info" label="Secondary" icon="home" iconPosition="after" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton mode="secondary" semantic="info" label="Secondary" icon="home" iconPosition="after" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton mode="secondary" semantic="info" label="Secondary" icon="home" iconPosition="after" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton mode="secondary" semantic="info" label="Secondary" icon="home" iconPosition="after" /> + </ExampleContainer> + <ExampleContainer> + <DxcButton mode="secondary" semantic="info" label="Secondary" icon="home" iconPosition="after" disabled /> + </ExampleContainer> + </DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton mode="secondary" semantic="info" icon="home" title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton mode="secondary" semantic="info" icon="home" title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton mode="secondary" semantic="info" icon="home" title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton mode="secondary" semantic="info" icon="home" title="Home" /> + </ExampleContainer> + <ExampleContainer> + <DxcButton mode="secondary" semantic="info" icon="home" disabled title="Home" /> + </ExampleContainer> + </DxcFlex> + </DxcFlex> + <Title title="Tertiary" theme="light" level={3} /> + <DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton mode="tertiary" semantic="info" label="Tertiary" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton mode="tertiary" semantic="info" label="Tertiary" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton mode="tertiary" semantic="info" label="Tertiary" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton mode="tertiary" semantic="info" label="Tertiary" /> + </ExampleContainer> + <ExampleContainer> + <DxcButton mode="tertiary" semantic="info" label="Tertiary" disabled /> + </ExampleContainer> + </DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton mode="tertiary" semantic="info" label="Tertiary" icon="home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton mode="tertiary" semantic="info" label="Tertiary" icon="home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton mode="tertiary" semantic="info" label="Tertiary" icon="home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton mode="tertiary" semantic="info" label="Tertiary" icon="home" /> + </ExampleContainer> + <ExampleContainer> + <DxcButton mode="tertiary" semantic="info" label="Tertiary" icon="home" disabled /> + </ExampleContainer> + </DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton mode="tertiary" semantic="info" label="Tertiary" icon="home" iconPosition="after" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton mode="tertiary" semantic="info" label="Tertiary" icon="home" iconPosition="after" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton mode="tertiary" semantic="info" label="Tertiary" icon="home" iconPosition="after" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton mode="tertiary" semantic="info" label="Tertiary" icon="home" iconPosition="after" /> + </ExampleContainer> + <ExampleContainer> + <DxcButton mode="tertiary" semantic="info" label="Tertiary" icon="home" iconPosition="after" disabled /> + </ExampleContainer> + </DxcFlex> + <DxcFlex direction="column"> + <ExampleContainer> + <DxcButton mode="tertiary" semantic="info" icon="home" title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton mode="tertiary" semantic="info" icon="home" title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton mode="tertiary" semantic="info" icon="home" title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState="pseudo-active"> + <DxcButton mode="tertiary" semantic="info" icon="home" title="Home" /> + </ExampleContainer> + <ExampleContainer> + <DxcButton mode="tertiary" semantic="info" icon="home" disabled title="Home" /> + </ExampleContainer> + </DxcFlex> + </DxcFlex> + </> + </> + <Title title="Opinionated theme" theme="light" level={4} /> + <DxcFlex direction="column"> + <DxcFlex gap="1rem"> + <ExampleContainer> + <HalstackProvider theme={opinionatedTheme}> + <DxcButton label="Primary" icon="home" /> + </HalstackProvider> + </ExampleContainer> + <ExampleContainer> + <HalstackProvider theme={opinionatedTheme}> + <DxcButton label="Secondary" icon="home" mode="secondary" /> + </HalstackProvider> + </ExampleContainer> + <ExampleContainer> + <HalstackProvider theme={opinionatedTheme}> + <DxcButton label="Tertiary" icon="home" mode="tertiary" /> + </HalstackProvider> + </ExampleContainer> + </DxcFlex> + <DxcFlex gap="1rem"> + <ExampleContainer> + <HalstackProvider theme={opinionatedTheme}> + <DxcButton label="Primary" icon="home" disabled /> + </HalstackProvider> + </ExampleContainer> + <ExampleContainer> + <HalstackProvider theme={opinionatedTheme}> + <DxcButton label="Secondary" icon="home" mode="secondary" disabled /> + </HalstackProvider> + </ExampleContainer> + <ExampleContainer> + <HalstackProvider theme={opinionatedTheme}> + <DxcButton label="Tertiary" icon="home" mode="tertiary" disabled /> + </HalstackProvider> + </ExampleContainer> </DxcFlex> - </ExampleContainer> - <Title title="Opinionated theme" theme="light" level={2} /> - <Title title="Primary" theme="light" level={3} /> - <ExampleContainer> - <Title title="Enabled" theme="light" level={4} /> - <HalstackProvider theme={opinionatedTheme}> - <DxcButton label="Primary" icon="filled_bottom_app_bar" /> - </HalstackProvider> - </ExampleContainer> - <ExampleContainer pseudoState="pseudo-hover"> - <Title title="Hovered" theme="light" level={4} /> - <DxcButton label="Primary hovered" icon="filled_bottom_app_bar" /> - </ExampleContainer> - <ExampleContainer pseudoState="pseudo-focus"> - <Title title="Focused" theme="light" level={4} /> - <DxcButton label="Primary focused" icon="filled_bottom_app_bar" /> - </ExampleContainer> - <ExampleContainer pseudoState="pseudo-active"> - <Title title="Actived" theme="light" level={4} /> - <DxcButton label="Primary actived" icon="filled_bottom_app_bar" /> - </ExampleContainer> - <ExampleContainer> - <Title title="Disabled" theme="light" level={4} /> - <HalstackProvider theme={opinionatedTheme}> - <DxcButton label="Primary" icon="filled_bottom_app_bar" disabled /> - </HalstackProvider> - </ExampleContainer> - <Title title="Secondary" theme="light" level={3} /> - <ExampleContainer> - <Title title="Enabled" theme="light" level={4} /> - <HalstackProvider theme={opinionatedTheme}> - <DxcButton mode="secondary" label="Secondary" icon="filled_bottom_app_bar" /> - </HalstackProvider> - </ExampleContainer> - <ExampleContainer pseudoState="pseudo-hover"> - <Title title="Hovered" theme="light" level={4} /> - <DxcButton mode="secondary" label="Secondary hovered" icon="filled_bottom_app_bar" /> - </ExampleContainer> - <ExampleContainer pseudoState="pseudo-focus"> - <Title title="Focused" theme="light" level={4} /> - <DxcButton mode="secondary" label="Secondary focused" icon="filled_bottom_app_bar" /> - </ExampleContainer> - <ExampleContainer pseudoState="pseudo-active"> - <Title title="Actived" theme="light" level={4} /> - <DxcButton mode="secondary" label="Secondary actived" icon="filled_bottom_app_bar" /> - </ExampleContainer> - <ExampleContainer> - <Title title="Disabled" theme="light" level={4} /> - <HalstackProvider theme={opinionatedTheme}> - <DxcButton mode="secondary" label="Secondary" icon="filled_bottom_app_bar" disabled /> - </HalstackProvider> - </ExampleContainer> - <Title title="Text" theme="light" level={3} /> - <ExampleContainer> - <Title title="Enabled" theme="light" level={4} /> - <HalstackProvider theme={opinionatedTheme}> - <DxcButton mode="text" label="Text" icon="filled_bottom_app_bar" /> - </HalstackProvider> - </ExampleContainer> - <ExampleContainer pseudoState="pseudo-hover"> - <Title title="Hovered" theme="light" level={4} /> - <DxcButton mode="text" label="Text hovered" icon="filled_bottom_app_bar" /> - </ExampleContainer> - <ExampleContainer pseudoState="pseudo-focus"> - <Title title="Focused" theme="light" level={4} /> - <DxcButton mode="text" label="Text focused" icon="filled_bottom_app_bar" /> - </ExampleContainer> - <ExampleContainer pseudoState="pseudo-active"> - <Title title="Actived" theme="light" level={4} /> - <DxcButton mode="text" label="Text actived" icon="filled_bottom_app_bar" /> - </ExampleContainer> - <ExampleContainer> - <Title title="Disabled" theme="light" level={4} /> - <HalstackProvider theme={opinionatedTheme}> - <DxcButton mode="text" label="Text disabled" icon="filled_bottom_app_bar" disabled /> - </HalstackProvider> - </ExampleContainer> + </DxcFlex> </> ); diff --git a/packages/lib/src/button/Button.tsx b/packages/lib/src/button/Button.tsx index 967434ef4f..664521f505 100644 --- a/packages/lib/src/button/Button.tsx +++ b/packages/lib/src/button/Button.tsx @@ -9,6 +9,7 @@ import DxcTooltip from "../tooltip/Tooltip"; const DxcButton = ({ label = "", mode = "primary", + semantic = "default", disabled = false, iconPosition = "before", title, @@ -16,7 +17,7 @@ const DxcButton = ({ icon, onClick = () => {}, margin, - size = "fitContent", + size = { height: "large", width: "fitContent" }, tabIndex = 0, }: ButtonPropsType): JSX.Element => { const colorsTheme = useTheme(); @@ -32,22 +33,25 @@ const DxcButton = ({ }} tabIndex={disabled ? -1 : tabIndex} type={type} - $mode={mode !== "primary" && mode !== "secondary" && mode !== "text" ? "primary" : mode} + $mode={mode === "primary" || mode === "secondary" || mode === "tertiary" ? mode : "primary"} hasLabel={label ? true : false} hasIcon={icon ? true : false} iconPosition={iconPosition} size={size} margin={margin} + semantic={semantic} > {label && <LabelContainer>{label}</LabelContainer>} - {icon && <IconContainer>{typeof icon === "string" ? <DxcIcon icon={icon} /> : icon}</IconContainer>} + {icon && ( + <IconContainer size={size}>{typeof icon === "string" ? <DxcIcon icon={icon} /> : icon}</IconContainer> + )} </Button> </DxcTooltip> </ThemeProvider> ); }; -const sizes = { +const widths = { small: "42px", medium: "120px", large: "240px", @@ -56,120 +60,338 @@ const sizes = { }; const calculateWidth = (margin: ButtonPropsType["margin"], size: ButtonPropsType["size"]) => - size === "fillParent" - ? `calc(${sizes[size]} - ${getMargin(margin, "left")} - ${getMargin(margin, "right")})` - : sizes[size]; - -const getButtonStyles = ($mode: ButtonPropsType["mode"], theme: AdvancedTheme["button"]) => ` - border-color: ${$mode === "secondary" ? theme.secondaryBorderColor : ""}; - border-radius: ${ - $mode === "primary" - ? theme.primaryBorderRadius - : $mode === "secondary" - ? theme.secondaryBorderRadius - : theme.textBorderRadius - }; - border-width: ${ - $mode === "primary" - ? theme.primaryBorderThickness - : $mode === "secondary" - ? theme.secondaryBorderThickness - : theme.textBorderThickness - }; - border-style: ${ - $mode === "primary" - ? theme.primaryBorderStyle - : $mode === "secondary" - ? theme.secondaryBorderStyle - : theme.textBorderStyle - }; - font-family: ${ - $mode === "primary" - ? theme.primaryFontFamily - : $mode === "secondary" - ? theme.secondaryFontFamily - : theme.textFontFamily - }; - font-size: ${ - $mode === "primary" ? theme.primaryFontSize : $mode === "secondary" ? theme.secondaryFontSize : theme.textFontSize - }; - font-weight: ${ - $mode === "primary" - ? theme.primaryFontWeight - : $mode === "secondary" - ? theme.secondaryFontWeight - : theme.textFontWeight - }; - background-color: ${ - $mode === "primary" - ? theme.primaryBackgroundColor - : $mode === "secondary" - ? theme.secondaryBackgroundColor - : theme.textBackgroundColor - }; - color: ${ - $mode === "primary" - ? theme.primaryFontColor - : $mode === "secondary" - ? theme.secondaryFontColor - : theme.textFontColor - }; - `; - -const getButtonStates = ( - disabled: ButtonPropsType["disabled"], - $mode: ButtonPropsType["mode"], - theme: AdvancedTheme["button"] -) => ` - &:hover { - background-color: ${ - $mode === "primary" - ? theme.primaryHoverBackgroundColor - : $mode === "secondary" - ? theme.secondaryHoverBackgroundColor - : theme.textHoverBackgroundColor - }; - color: ${$mode === "secondary" ? theme.secondaryHoverFontColor : ""}; - } - &:focus { - border-color: ${$mode === "secondary" ? "transparent" : ""}; - } - &:active { - background-color: ${ - $mode === "primary" - ? theme.primaryActiveBackgroundColor - : $mode === "secondary" - ? theme.secondaryActiveBackgroundColor - : theme.textActiveBackgroundColor - }; - color: ${$mode === "secondary" ? theme.secondaryHoverFontColor : ""}; - border-color: ${$mode === "secondary" ? "transparent" : ""}; - outline: none; - box-shadow: ${!disabled ? `0 0 0 2px ${theme.focusBorderColor}` : ""}; + size?.width === "fillParent" + ? `calc(${widths[size?.width]} - ${getMargin(margin, "left")} - ${getMargin(margin, "right")})` + : widths[size?.width]; + +const getHeight = (height) => { + switch (height) { + case "small": + return 1.5; + case "medium": + return 2; + case "large": + return 2.5; + default: + return 2.5; } - &:disabled { - cursor: not-allowed; - background-color: ${ - $mode === "primary" - ? theme.primaryDisabledBackgroundColor - : $mode === "secondary" - ? theme.secondaryDisabledBackgroundColor - : theme.textDisabledBackgroundColor - }; - color: ${ - $mode === "primary" - ? theme.primaryDisabledFontColor - : $mode === "secondary" - ? theme.secondaryDisabledFontColor - : theme.textDisabledFontColor - }; - border-color: ${$mode === "secondary" ? theme.secondaryDisabledBorderColor : ""}; +}; + +const getButtonStyles = ( + $mode: ButtonPropsType["mode"], + semantic: ButtonPropsType["semantic"], + theme: AdvancedTheme["button"], + size: ButtonPropsType["size"] +) => { + let enabled = ""; + let hover = ""; + let active = ""; + let focus = ""; + let disabled = ""; + + let commonPrimaryStyles = ` + font-weight: ${theme.primaryFontWeight}; + font-size: ${size?.height === "small" ? theme.primarySmallFontSize : size?.height === "medium" ? theme.primaryMediumFontSize : theme.primaryLargeFontSize}; + font-family: ${theme.primaryFontFamily}; + border-radius: ${theme.primaryBorderRadius}; + border-width ${theme.primaryBorderThickness}; + border-style: ${theme.primaryBorderStyle};`; + + let commonSecondaryStyles = ` + font-weight: ${theme.secondaryFontWeight}; + font-size: ${size?.height === "small" ? theme.secondarySmallFontSize : size?.height === "medium" ? theme.secondaryMediumFontSize : theme.secondaryLargeFontSize}; + font-family: ${theme.secondaryFontFamily}; + border-radius: ${theme.secondaryBorderRadius}; + border-width ${theme.secondaryBorderThickness}; + border-style: ${theme.secondaryBorderStyle};`; + + let commonTertiaryStyles = ` + font-weight: ${theme.tertiaryFontWeight}; + font-size: ${size?.height === "small" ? theme.tertiarySmallFontSize : size?.height === "medium" ? theme.tertiaryMediumFontSize : theme.tertiaryLargeFontSize}; + font-family: ${theme.tertiaryFontFamily}; + border-radius: ${theme.tertiaryBorderRadius}; + border-width ${theme.tertiaryBorderThickness}; + border-style: ${theme.tertiaryBorderStyle};`; + + switch ($mode) { + case "primary": + switch (semantic) { + case "default": + enabled = `background-color: ${theme.primaryDefaultBackgroundColor}; + color: ${theme.primaryDefaultFontColor};`; + hover = `background-color: ${theme.primaryHoverDefaultBackgroundColor};`; + active = `background-color: ${theme.primaryActiveDefaultBackgroundColor}; + border-color: transparent; + outline: none; + box-shadow: 0 0 0 2px ${theme.focusBorderColor};`; + disabled = `cursor: not-allowed; + background-color: ${theme.primaryDisabledDefaultBackgroundColor}; + color: ${theme.primaryDisabledDefaultFontColor};`; + break; + case "error": + enabled = `background-color: ${theme.primaryErrorBackgroundColor}; + color: ${theme.primaryErrorFontColor};`; + hover = `background-color: ${theme.primaryHoverErrorBackgroundColor};`; + active = `background-color: ${theme.primaryActiveErrorBackgroundColor}; + border-color: transparent; + outline: none; + box-shadow: 0 0 0 2px ${theme.focusBorderColor};`; + disabled = `cursor: not-allowed; + background-color: ${theme.primaryDisabledErrorBackgroundColor}; + color: ${theme.primaryDisabledErrorFontColor};`; + break; + case "warning": + enabled = `background-color: ${theme.primaryWarningBackgroundColor}; + color: ${theme.primaryWarningFontColor};`; + hover = `background-color: ${theme.primaryHoverWarningBackgroundColor};`; + active = `background-color: ${theme.primaryActiveWarningBackgroundColor}; + border-color: transparent; + outline: none; + box-shadow: 0 0 0 2px ${theme.focusBorderColor};`; + disabled = `cursor: not-allowed; + background-color: ${theme.primaryDisabledWarningBackgroundColor}; + color: ${theme.primaryDisabledWarningFontColor};`; + break; + case "success": + enabled = `background-color: ${theme.primarySuccessBackgroundColor}; + color: ${theme.primarySuccessFontColor};`; + hover = `background-color: ${theme.primaryHoverSuccessBackgroundColor};`; + active = `background-color: ${theme.primaryActiveSuccessBackgroundColor}; + border-color: transparent; + outline: none; + box-shadow: 0 0 0 2px ${theme.focusBorderColor};`; + disabled = `cursor: not-allowed; + background-color: ${theme.primaryDisabledSuccessBackgroundColor}; + color: ${theme.primaryDisabledSuccessFontColor};`; + break; + case "info": + enabled = `background-color: ${theme.primaryInfoBackgroundColor}; + color: ${theme.primaryInfoFontColor};`; + hover = `background-color: ${theme.primaryHoverInfoBackgroundColor};`; + active = `background-color: ${theme.primaryActiveInfoBackgroundColor}; + border-color: transparent; + outline: none; + box-shadow: 0 0 0 2px ${theme.focusBorderColor};`; + disabled = `cursor: not-allowed; + background-color: ${theme.primaryDisabledInfoBackgroundColor}; + color: ${theme.primaryDisabledInfoFontColor};`; + break; + default: + enabled = `background-color: ${theme.primaryDefaultBackgroundColor}; + color: ${theme.primaryDefaultFontColor};`; + break; + } + return `${commonPrimaryStyles} + ${enabled} + &:hover { + ${hover} + } + &:active { + ${active} + } + &:focus { + ${focus} + } + &:disabled { + ${disabled} + }`; + + case "secondary": + switch (semantic) { + case "default": + enabled = `background-color: ${theme.secondaryDefaultBackgroundColor}; + color: ${theme.secondaryDefaultFontColor}; + border-color ${theme.secondaryDefaultBorderColor};`; + hover = `background-color: ${theme.secondaryHoverDefaultBackgroundColor}; + color: ${theme.secondaryHoverDefaultFontColor};`; + active = `background-color: ${theme.secondaryActiveDefaultBackgroundColor}; + color: ${theme.secondaryHoverDefaultFontColor}; + border-color: transparent; + outline: none; + box-shadow: 0 0 0 2px ${theme.focusBorderColor};`; + focus = `border-color: transparent;`; + disabled = `cursor: not-allowed; + background-color: ${theme.secondaryDisabledDefaultBackgroundColor}; + color: ${theme.secondaryDisabledDefaultFontColor}; + border-color: ${theme.secondaryDisabledDefaultBorderColor};`; + break; + case "error": + enabled = `background-color: ${theme.secondaryErrorBackgroundColor}; + color: ${theme.secondaryErrorFontColor}; + border-color ${theme.secondaryErrorBorderColor};`; + hover = `background-color: ${theme.secondaryHoverErrorBackgroundColor}; + color: ${theme.secondaryHoverErrorFontColor};`; + active = `background-color: ${theme.secondaryActiveErrorBackgroundColor}; + color: ${theme.secondaryHoverErrorFontColor}; + border-color: transparent; + outline: none; + box-shadow: 0 0 0 2px ${theme.focusBorderColor};`; + focus = `border-color: transparent;`; + disabled = `cursor: not-allowed; + background-color: ${theme.secondaryDisabledErrorBackgroundColor}; + color: ${theme.secondaryDisabledErrorFontColor}; + border-color: ${theme.secondaryDisabledErrorBorderColor};`; + break; + case "warning": + enabled = `background-color: ${theme.secondaryWarningBackgroundColor}; + color: ${theme.secondaryWarningFontColor}; + border-color ${theme.secondaryWarningBorderColor};`; + hover = `background-color: ${theme.secondaryHoverWarningBackgroundColor}; + color: ${theme.secondaryHoverWarningFontColor};`; + active = `background-color: ${theme.secondaryActiveWarningBackgroundColor}; + color: ${theme.secondaryHoverWarningFontColor}; + border-color: transparent; + outline: none; + box-shadow: 0 0 0 2px ${theme.focusBorderColor};`; + focus = `border-color: transparent;`; + disabled = `cursor: not-allowed; + background-color: ${theme.secondaryDisabledWarningBackgroundColor}; + color: ${theme.secondaryDisabledWarningFontColor}; + border-color: ${theme.secondaryDisabledWarningBorderColor};`; + break; + case "success": + enabled = `background-color: ${theme.secondarySuccessBackgroundColor}; + color: ${theme.secondarySuccessFontColor}; + border-color ${theme.secondarySuccessBorderColor};`; + hover = `background-color: ${theme.secondaryHoverSuccessBackgroundColor}; + color: ${theme.secondaryHoverSuccessFontColor};`; + active = `background-color: ${theme.secondaryActiveSuccessBackgroundColor}; + color: ${theme.secondaryHoverSuccessFontColor}; + border-color: transparent; + outline: none; + box-shadow: 0 0 0 2px ${theme.focusBorderColor};`; + focus = `border-color: transparent;`; + disabled = `cursor: not-allowed; + background-color: ${theme.secondaryDisabledSuccessBackgroundColor}; + color: ${theme.secondaryDisabledSuccessFontColor}; + border-color: ${theme.secondaryDisabledSuccessBorderColor};`; + break; + case "info": + enabled = `background-color: ${theme.secondaryInfoBackgroundColor}; + color: ${theme.secondaryInfoFontColor}; + border-color ${theme.secondaryInfoBorderColor};`; + hover = `background-color: ${theme.secondaryHoverInfoBackgroundColor}; + color: ${theme.secondaryHoverInfoFontColor};`; + active = `background-color: ${theme.secondaryActiveInfoBackgroundColor}; + color: ${theme.secondaryHoverInfoFontColor}; + border-color: transparent; + outline: none; + box-shadow: 0 0 0 2px ${theme.focusBorderColor};`; + focus = `border-color: transparent;`; + disabled = `cursor: not-allowed; + background-color: ${theme.secondaryDisabledInfoBackgroundColor}; + color: ${theme.secondaryDisabledInfoFontColor}; + border-color: ${theme.secondaryDisabledInfoBorderColor};`; + break; + default: + enabled = `background-color: ${theme.secondaryDefaultBackgroundColor}; + color: ${theme.secondaryDefaultFontColor}; + border-color ${theme.secondaryDefaultBorderColor};`; + break; + } + return `${commonSecondaryStyles} + ${enabled} + &:hover { + ${hover} + } + &:active { + ${active} + } + &:focus { + ${focus} + } + &:disabled { + ${disabled} + }`; + + case "tertiary": + switch (semantic) { + case "default": + enabled = `background-color: ${theme.tertiaryDefaultBackgroundColor}; + color: ${theme.tertiaryDefaultFontColor};`; + hover = `background-color: ${theme.tertiaryHoverDefaultBackgroundColor};`; + active = `background-color: ${theme.tertiaryActiveDefaultBackgroundColor}; + border-color: transparent; + outline: none; + box-shadow: 0 0 0 2px ${theme.focusBorderColor};`; + disabled = `cursor: not-allowed; + background-color: ${theme.tertiaryDisabledDefaultBackgroundColor}; + color: ${theme.tertiaryDisabledDefaultFontColor};`; + break; + case "error": + enabled = `background-color: ${theme.tertiaryErrorBackgroundColor}; + color: ${theme.tertiaryErrorFontColor};`; + hover = `background-color: ${theme.tertiaryHoverErrorBackgroundColor};`; + active = `background-color: ${theme.tertiaryActiveErrorBackgroundColor}; + border-color: transparent; + outline: none; + box-shadow: 0 0 0 2px ${theme.focusBorderColor};`; + disabled = `cursor: not-allowed; + background-color: ${theme.tertiaryDisabledErrorBackgroundColor}; + color: ${theme.tertiaryDisabledErrorFontColor};`; + break; + case "warning": + enabled = `background-color: ${theme.tertiaryWarningBackgroundColor}; + color: ${theme.tertiaryWarningFontColor};`; + hover = `background-color: ${theme.tertiaryHoverWarningBackgroundColor};`; + active = `background-color: ${theme.tertiaryActiveWarningBackgroundColor}; + border-color: transparent; + outline: none; + box-shadow: 0 0 0 2px ${theme.focusBorderColor};`; + disabled = `cursor: not-allowed; + background-color: ${theme.tertiaryDisabledWarningBackgroundColor}; + color: ${theme.tertiaryDisabledWarningFontColor};`; + break; + case "success": + enabled = `background-color: ${theme.tertiarySuccessBackgroundColor}; + color: ${theme.tertiarySuccessFontColor};`; + hover = `background-color: ${theme.tertiaryHoverSuccessBackgroundColor};`; + active = `background-color: ${theme.tertiaryActiveSuccessBackgroundColor}; + border-color: transparent; + outline: none; + box-shadow: 0 0 0 2px ${theme.focusBorderColor};`; + disabled = `cursor: not-allowed; + background-color: ${theme.tertiaryDisabledSuccessBackgroundColor}; + color: ${theme.tertiaryDisabledSuccessFontColor};`; + break; + case "info": + enabled = `background-color: ${theme.tertiaryInfoBackgroundColor}; + color: ${theme.tertiaryInfoFontColor};`; + hover = `background-color: ${theme.tertiaryHoverInfoBackgroundColor};`; + active = `background-color: ${theme.tertiaryActiveInfoBackgroundColor}; + border-color: transparent; + outline: none; + box-shadow: 0 0 0 2px ${theme.focusBorderColor};`; + disabled = `cursor: not-allowed; + background-color: ${theme.tertiaryDisabledInfoBackgroundColor}; + color: ${theme.tertiaryDisabledInfoFontColor};`; + break; + default: + enabled = `background-color: ${theme.tertiaryDefaultBackgroundColor}; + color: ${theme.tertiaryDefaultFontColor};`; + break; + } + return `${commonTertiaryStyles} + ${enabled} + &:active { + ${active} + } + &:hover { + ${hover} + } + &:focus { + ${focus} + } + &:disabled { + ${disabled} + }`; } -`; +}; const Button = styled.button<{ hasIcon: boolean; hasLabel: boolean; + semantic: ButtonPropsType["semantic"]; disabled: ButtonPropsType["disabled"]; iconPosition: ButtonPropsType["iconPosition"]; $mode: ButtonPropsType["mode"]; @@ -181,8 +403,8 @@ const Button = styled.button<{ gap: 0.5rem; align-items: center; justify-content: center; + height: ${(props) => getHeight(props.size?.height && props.size?.height) + "rem"}; width: ${(props) => calculateWidth(props.margin, props.size)}; - height: 40px; margin: ${(props) => (props.margin && typeof props.margin !== "object" ? spaces[props.margin] : "0px")}; margin-top: ${(props) => props.margin && typeof props.margin === "object" && props.margin.top ? spaces[props.margin.top] : ""}; @@ -192,12 +414,55 @@ const Button = styled.button<{ props.margin && typeof props.margin === "object" && props.margin.bottom ? spaces[props.margin.bottom] : ""}; margin-left: ${(props) => props.margin && typeof props.margin === "object" && props.margin.left ? spaces[props.margin.left] : ""}; - padding-top: ${(props) => props.theme.paddingTop}; - padding-bottom: ${(props) => props.theme.paddingBottom}; + padding-top: ${(props) => + props.hasIcon && !props.hasLabel + ? props.size.height === "small" + ? props.theme.paddingSmallOnlyIconTop + : props.size.height === "medium" + ? props.theme.paddingMediumOnlyIconTop + : props.theme.paddingLargeOnlyIconTop + : props.size.height === "small" + ? props.theme.paddingSmallTop + : props.size.height === "medium" + ? props.theme.paddingMediumTop + : props.theme.paddingLargeTop}; + padding-bottom: ${(props) => + props.hasIcon && !props.hasLabel + ? props.size.height === "small" + ? props.theme.paddingSmallOnlyIconBottom + : props.size.height === "medium" + ? props.theme.paddingMediumOnlyIconBottom + : props.theme.paddingLargeOnlyIconBottom + : props.size.height === "small" + ? props.theme.paddingSmallBottom + : props.size.height === "medium" + ? props.theme.paddingMediumBottom + : props.theme.paddingLargeBottom}; padding-left: ${(props) => - props.hasIcon && !props.hasLabel ? props.theme.paddingLeft : `calc(${props.theme.paddingLeft} + 8px)`}; + props.hasIcon && !props.hasLabel + ? props.size.height === "small" + ? props.theme.paddingSmallOnlyIconLeft + : props.size.height === "medium" + ? props.theme.paddingMediumOnlyIconLeft + : props.theme.paddingLargeOnlyIconLeft + : props.size.height === "small" + ? props.theme.paddingSmallLeft + : props.size.height === "medium" + ? props.theme.paddingMediumLeft + : props.theme.paddingLargeLeft}; padding-right: ${(props) => - props.hasIcon && !props.hasLabel ? props.theme.paddingRight : `calc(${props.theme.paddingRight} + 8px)`}; + props.hasIcon && !props.hasLabel + ? props.size.height === "small" + ? props.theme.paddingSmallOnlyIconRight + : props.size.height === "medium" + ? props.theme.paddingMediumOnlyIconRight + : props.theme.paddingLargeOnlyIconRight + : props.size.height === "small" + ? props.theme.paddingSmallRight + : props.size.height === "medium" + ? props.theme.paddingMediumRight + : props.theme.paddingLargeRight}; + box-shadow: 0 0 0 2px transparent; font-family: ${(props) => props.theme.fontFamily}; font-size: ${(props) => props.theme.fontSize}; @@ -210,8 +475,7 @@ const Button = styled.button<{ box-shadow: 0 0 0 2px ${(props) => props.theme.focusBorderColor}; } - ${(props) => getButtonStyles(props.$mode, props.theme)} - ${(props) => getButtonStates(props.disabled, props.$mode, props.theme)} + ${(props) => getButtonStyles(props.$mode, props.semantic, props.theme, props.size)}; `; const LabelContainer = styled.span` @@ -223,13 +487,14 @@ const LabelContainer = styled.span` white-space: nowrap; `; -const IconContainer = styled.div` +const IconContainer = styled.div<{ + size: ButtonPropsType["size"]; +}>` display: flex; - font-size: 24px; - + font-size: ${(props) => (props.size.height === "small" ? "16" : props.size.height === "medium" ? "16" : "24")}px; svg { - height: 24px; - width: 24px; + height: ${(props) => (props.size.height === "small" ? "16" : props.size.height === "medium" ? "16" : "24")}px; + width: ${(props) => (props.size.height === "small" ? "16" : props.size.height === "medium" ? "16" : "24")}px; } `; diff --git a/packages/lib/src/button/types.ts b/packages/lib/src/button/types.ts index cc2609e5fb..bc8ba06530 100644 --- a/packages/lib/src/button/types.ts +++ b/packages/lib/src/button/types.ts @@ -7,6 +7,17 @@ type Margin = { }; type SVG = React.ReactNode & React.SVGProps<SVGSVGElement>; +type Size = { + /** + * Height of the component. + */ + height?: "small" | "medium" | "large"; + /* + * Width of the component. + */ + width?: "small" | "medium" | "large" | "fillParent" | "fitContent"; +}; + type Props = { /** * Text to be placed in the button. @@ -15,7 +26,11 @@ type Props = { /** * The available button modes. */ - mode?: "primary" | "secondary" | "text"; + mode?: "primary" | "secondary" | "tertiary"; + /** + * Specifies the semantic meaning of the buttons, which determines its color. + */ + semantic?: "default" | "error" | "warning" | "success" | "info"; /** * If true, the component will be disabled. */ @@ -48,7 +63,7 @@ type Props = { /** * Size of the component. */ - size?: "small" | "medium" | "large" | "fillParent" | "fitContent"; + size?: Size; /** * Value of the tabindex attribute. */ diff --git a/packages/lib/src/common/variables.ts b/packages/lib/src/common/variables.ts index c9a52cda9f..0e44fdd4d6 100644 --- a/packages/lib/src/common/variables.ts +++ b/packages/lib/src/common/variables.ts @@ -120,50 +120,160 @@ export const componentTokens = { button: { labelFontLineHeight: CoreTokens.type_leading_normal, labelLetterSpacing: CoreTokens.type_spacing_wide_01, - paddingLeft: CoreTokens.spacing_8, - paddingRight: CoreTokens.spacing_8, - paddingTop: CoreTokens.spacing_8, - paddingBottom: CoreTokens.spacing_8, - focusBorderColor: CoreTokens.color_blue_600, - primaryBackgroundColor: CoreTokens.color_purple_700, - primaryFontColor: CoreTokens.color_white, - primaryHoverBackgroundColor: CoreTokens.color_purple_800, - primaryActiveBackgroundColor: CoreTokens.color_purple_900, - primaryDisabledBackgroundColor: CoreTokens.color_grey_100, - primaryDisabledFontColor: CoreTokens.color_grey_500, + paddingSmallTop: CoreTokens.spacing_0, + paddingSmallLeft: CoreTokens.spacing_8, + paddingSmallBottom: CoreTokens.spacing_0, + paddingSmallRight: CoreTokens.spacing_8, + paddingSmallOnlyIconTop: CoreTokens.spacing_0, + paddingSmallOnlyIconLeft: CoreTokens.spacing_4, + paddingSmallOnlyIconBottom: CoreTokens.spacing_0, + paddingSmallOnlyIconRight: CoreTokens.spacing_4, + paddingMediumTop: CoreTokens.spacing_0, + paddingMediumLeft: CoreTokens.spacing_8, + paddingMediumBottom: CoreTokens.spacing_0, + paddingMediumRight: CoreTokens.spacing_8, + paddingMediumOnlyIconTop: CoreTokens.spacing_0, + paddingMediumOnlyIconLeft: CoreTokens.spacing_8, + paddingMediumOnlyIconBottom: CoreTokens.spacing_0, + paddingMediumOnlyIconRight: CoreTokens.spacing_8, + paddingLargeTop: CoreTokens.spacing_0, + paddingLargeLeft: CoreTokens.spacing_16, + paddingLargeBottom: CoreTokens.spacing_0, + paddingLargeRight: CoreTokens.spacing_16, + paddingLargeOnlyIconTop: CoreTokens.spacing_0, + paddingLargeOnlyIconLeft: CoreTokens.spacing_8, + paddingLargeOnlyIconBottom: CoreTokens.spacing_0, + paddingLargeOnlyIconRight: CoreTokens.spacing_8, + focusBorderColor: CoreTokens.color_blue_500, + primaryDefaultBackgroundColor: CoreTokens.color_purple_700, + primaryErrorBackgroundColor: CoreTokens.color_red_700, + primaryWarningBackgroundColor: CoreTokens.color_orange_700, + primarySuccessBackgroundColor: CoreTokens.color_green_700, + primaryInfoBackgroundColor: CoreTokens.color_blue_700, + primaryDefaultFontColor: CoreTokens.color_white, + primaryErrorFontColor: CoreTokens.color_white, + primaryWarningFontColor: CoreTokens.color_white, + primarySuccessFontColor: CoreTokens.color_white, + primaryInfoFontColor: CoreTokens.color_white, + primaryHoverDefaultBackgroundColor: CoreTokens.color_purple_800, + primaryHoverErrorBackgroundColor: CoreTokens.color_red_800, + primaryHoverWarningBackgroundColor: CoreTokens.color_orange_800, + primaryHoverSuccessBackgroundColor: CoreTokens.color_green_800, + primaryHoverInfoBackgroundColor: CoreTokens.color_blue_800, + primaryActiveDefaultBackgroundColor: CoreTokens.color_purple_900, + primaryActiveErrorBackgroundColor: CoreTokens.color_red_900, + primaryActiveWarningBackgroundColor: CoreTokens.color_orange_900, + primaryActiveSuccessBackgroundColor: CoreTokens.color_green_900, + primaryActiveInfoBackgroundColor: CoreTokens.color_blue_900, + primaryDisabledDefaultBackgroundColor: CoreTokens.color_purple_100, + primaryDisabledErrorBackgroundColor: CoreTokens.color_red_100, + primaryDisabledWarningBackgroundColor: CoreTokens.color_orange_100, + primaryDisabledSuccessBackgroundColor: CoreTokens.color_green_100, + primaryDisabledInfoBackgroundColor: CoreTokens.color_blue_100, + primaryDisabledDefaultFontColor: CoreTokens.color_purple_300, + primaryDisabledErrorFontColor: CoreTokens.color_red_300, + primaryDisabledWarningFontColor: CoreTokens.color_orange_300, + primaryDisabledSuccessFontColor: CoreTokens.color_green_300, + primaryDisabledInfoFontColor: CoreTokens.color_blue_300, primaryBorderThickness: CoreTokens.border_width_0, primaryBorderStyle: CoreTokens.border_none, primaryBorderRadius: CoreTokens.border_radius_medium, primaryFontFamily: CoreTokens.type_sans, - primaryFontSize: CoreTokens.type_scale_03, - primaryFontWeight: CoreTokens.type_regular, - secondaryBackgroundColor: CoreTokens.color_transparent, - secondaryFontColor: CoreTokens.color_purple_700, - secondaryHoverFontColor: CoreTokens.color_white, - secondaryBorderColor: CoreTokens.color_purple_700, - secondaryHoverBackgroundColor: CoreTokens.color_purple_700, - secondaryActiveBackgroundColor: CoreTokens.color_purple_900, - secondaryDisabledBackgroundColor: CoreTokens.color_transparent, - secondaryDisabledFontColor: CoreTokens.color_grey_500, - secondaryDisabledBorderColor: CoreTokens.color_grey_500, + primarySmallFontSize: CoreTokens.type_scale_02, + primaryMediumFontSize: CoreTokens.type_scale_02, + primaryLargeFontSize: CoreTokens.type_scale_03, + primaryFontWeight: CoreTokens.type_semibold, + secondaryDefaultBackgroundColor: CoreTokens.color_transparent, + secondaryErrorBackgroundColor: CoreTokens.color_transparent, + secondaryWarningBackgroundColor: CoreTokens.color_transparent, + secondarySuccessBackgroundColor: CoreTokens.color_transparent, + secondaryInfoBackgroundColor: CoreTokens.color_transparent, + secondaryDefaultFontColor: CoreTokens.color_purple_700, + secondaryErrorFontColor: CoreTokens.color_red_700, + secondaryWarningFontColor: CoreTokens.color_orange_700, + secondarySuccessFontColor: CoreTokens.color_green_700, + secondaryInfoFontColor: CoreTokens.color_blue_700, + secondaryDefaultBorderColor: CoreTokens.color_purple_700, + secondaryErrorBorderColor: CoreTokens.color_red_700, + secondaryWarningBorderColor: CoreTokens.color_orange_700, + secondarySuccessBorderColor: CoreTokens.color_green_700, + secondaryInfoBorderColor: CoreTokens.color_blue_700, + secondaryHoverDefaultBackgroundColor: CoreTokens.color_purple_700, + secondaryHoverErrorBackgroundColor: CoreTokens.color_red_700, + secondaryHoverWarningBackgroundColor: CoreTokens.color_orange_700, + secondaryHoverSuccessBackgroundColor: CoreTokens.color_green_700, + secondaryHoverInfoBackgroundColor: CoreTokens.color_blue_700, + secondaryHoverDefaultFontColor: CoreTokens.color_white, + secondaryHoverErrorFontColor: CoreTokens.color_white, + secondaryHoverWarningFontColor: CoreTokens.color_white, + secondaryHoverSuccessFontColor: CoreTokens.color_white, + secondaryHoverInfoFontColor: CoreTokens.color_white, + secondaryActiveDefaultBackgroundColor: CoreTokens.color_purple_800, + secondaryActiveErrorBackgroundColor: CoreTokens.color_red_800, + secondaryActiveWarningBackgroundColor: CoreTokens.color_orange_800, + secondaryActiveSuccessBackgroundColor: CoreTokens.color_green_800, + secondaryActiveInfoBackgroundColor: CoreTokens.color_blue_800, + secondaryDisabledDefaultBackgroundColor: CoreTokens.color_transparent, + secondaryDisabledErrorBackgroundColor: CoreTokens.color_transparent, + secondaryDisabledWarningBackgroundColor: CoreTokens.color_transparent, + secondaryDisabledSuccessBackgroundColor: CoreTokens.color_transparent, + secondaryDisabledInfoBackgroundColor: CoreTokens.color_transparent, + secondaryDisabledDefaultFontColor: CoreTokens.color_purple_300, + secondaryDisabledErrorFontColor: CoreTokens.color_red_300, + secondaryDisabledWarningFontColor: CoreTokens.color_orange_300, + secondaryDisabledSuccessFontColor: CoreTokens.color_green_300, + secondaryDisabledInfoFontColor: CoreTokens.color_blue_300, + secondaryDisabledDefaultBorderColor: CoreTokens.color_purple_300, + secondaryDisabledErrorBorderColor: CoreTokens.color_red_300, + secondaryDisabledWarningBorderColor: CoreTokens.color_orange_300, + secondaryDisabledSuccessBorderColor: CoreTokens.color_green_300, + secondaryDisabledInfoBorderColor: CoreTokens.color_blue_300, secondaryBorderThickness: CoreTokens.border_width_1, secondaryBorderStyle: CoreTokens.border_solid, secondaryBorderRadius: CoreTokens.border_radius_medium, secondaryFontFamily: CoreTokens.type_sans, - secondaryFontSize: CoreTokens.type_scale_03, - secondaryFontWeight: CoreTokens.type_regular, - textBackgroundColor: CoreTokens.color_transparent, - textFontColor: CoreTokens.color_purple_700, - textHoverBackgroundColor: CoreTokens.color_purple_100, - textActiveBackgroundColor: CoreTokens.color_purple_200, - textDisabledBackgroundColor: CoreTokens.color_transparent, - textDisabledFontColor: CoreTokens.color_grey_500, - textBorderThickness: CoreTokens.border_width_0, - textBorderStyle: CoreTokens.border_none, - textBorderRadius: CoreTokens.border_radius_medium, - textFontFamily: CoreTokens.type_sans, - textFontSize: CoreTokens.type_scale_03, - textFontWeight: CoreTokens.type_regular, + secondarySmallFontSize: CoreTokens.type_scale_02, + secondaryMediumFontSize: CoreTokens.type_scale_02, + secondaryLargeFontSize: CoreTokens.type_scale_03, + secondaryFontWeight: CoreTokens.type_semibold, + tertiaryDefaultBackgroundColor: CoreTokens.color_transparent, + tertiaryErrorBackgroundColor: CoreTokens.color_transparent, + tertiaryWarningBackgroundColor: CoreTokens.color_transparent, + tertiarySuccessBackgroundColor: CoreTokens.color_transparent, + tertiaryInfoBackgroundColor: CoreTokens.color_transparent, + tertiaryDefaultFontColor: CoreTokens.color_purple_700, + tertiaryErrorFontColor: CoreTokens.color_red_700, + tertiaryWarningFontColor: CoreTokens.color_orange_700, + tertiarySuccessFontColor: CoreTokens.color_green_700, + tertiaryInfoFontColor: CoreTokens.color_blue_700, + tertiaryHoverDefaultBackgroundColor: CoreTokens.color_purple_100, + tertiaryHoverErrorBackgroundColor: CoreTokens.color_red_100, + tertiaryHoverWarningBackgroundColor: CoreTokens.color_orange_100, + tertiaryHoverSuccessBackgroundColor: CoreTokens.color_green_100, + tertiaryHoverInfoBackgroundColor: CoreTokens.color_blue_100, + tertiaryActiveDefaultBackgroundColor: CoreTokens.color_purple_200, + tertiaryActiveErrorBackgroundColor: CoreTokens.color_red_200, + tertiaryActiveWarningBackgroundColor: CoreTokens.color_orange_200, + tertiaryActiveSuccessBackgroundColor: CoreTokens.color_green_200, + tertiaryActiveInfoBackgroundColor: CoreTokens.color_blue_200, + tertiaryDisabledDefaultBackgroundColor: CoreTokens.color_transparent, + tertiaryDisabledErrorBackgroundColor: CoreTokens.color_transparent, + tertiaryDisabledWarningBackgroundColor: CoreTokens.color_transparent, + tertiaryDisabledSuccessBackgroundColor: CoreTokens.color_transparent, + tertiaryDisabledInfoBackgroundColor: CoreTokens.color_transparent, + tertiaryDisabledDefaultFontColor: CoreTokens.color_purple_300, + tertiaryDisabledErrorFontColor: CoreTokens.color_red_300, + tertiaryDisabledWarningFontColor: CoreTokens.color_orange_300, + tertiaryDisabledSuccessFontColor: CoreTokens.color_green_300, + tertiaryDisabledInfoFontColor: CoreTokens.color_blue_300, + tertiaryBorderThickness: CoreTokens.border_width_0, + tertiaryBorderStyle: CoreTokens.border_none, + tertiaryBorderRadius: CoreTokens.border_radius_medium, + tertiaryFontFamily: CoreTokens.type_sans, + tertiarySmallFontSize: CoreTokens.type_scale_02, + tertiaryMediumFontSize: CoreTokens.type_scale_02, + tertiaryLargeFontSize: CoreTokens.type_scale_03, + tertiaryFontWeight: CoreTokens.type_semibold, }, card: { height: "220px", diff --git a/packages/lib/src/dialog/Dialog.stories.tsx b/packages/lib/src/dialog/Dialog.stories.tsx index f4e499d07e..cd1a84cc3a 100644 --- a/packages/lib/src/dialog/Dialog.stories.tsx +++ b/packages/lib/src/dialog/Dialog.stories.tsx @@ -258,7 +258,7 @@ export const DialogWithInputs = () => ( margin={{ bottom: "xsmall" }} /> <DxcFlex justifyContent="flex-end" gap="0.5rem"> - <DxcButton label="Cancel" mode="text" /> + <DxcButton label="Cancel" mode="tertiary" /> <DxcButton label="Save" /> </DxcFlex> </DxcFlex> @@ -279,7 +279,7 @@ const RespDialog = () => ( <DxcTextInput size="fillParent" label="Surname" /> </DxcFlex> <DxcFlex justifyContent="flex-end" gap="0.5rem"> - <DxcButton label="Cancel" mode="text" /> + <DxcButton label="Cancel" mode="tertiary" /> <DxcButton label="Save" /> </DxcFlex> </DxcFlex> diff --git a/packages/lib/src/file-input/FileInput.tsx b/packages/lib/src/file-input/FileInput.tsx index 29a848488e..fd03009132 100644 --- a/packages/lib/src/file-input/FileInput.tsx +++ b/packages/lib/src/file-input/FileInput.tsx @@ -176,7 +176,7 @@ const DxcFileInput = forwardRef<RefType, FileInputPropsType>( } onClick={handleClick} disabled={disabled} - size="fitContent" + size={{ width: "fitContent" }} tabIndex={tabIndex} /> {files.length > 0 && ( @@ -222,7 +222,7 @@ const DxcFileInput = forwardRef<RefType, FileInputPropsType>( label={buttonLabel ?? translatedLabels.fileInput.dropAreaButtonLabelDefault} onClick={handleClick} disabled={disabled} - size="fitContent" + size={{ width: "fitContent" }} /> {mode === "dropzone" ? ( <DropzoneLabel disabled={disabled}>