From 7db2a8939c04b73e1f2e6d0c58f4f9a842584f64 Mon Sep 17 00:00:00 2001 From: Jialecl Date: Fri, 1 Aug 2025 11:34:36 +0200 Subject: [PATCH 01/12] Theming POC --- packages/lib/src/HalstackContext.tsx | 423 +- packages/lib/src/button/Button.stories.tsx | 9685 ++++++++++---------- packages/lib/src/styles/tokens.tsx | 365 + packages/lib/src/styles/variables.css | 348 +- 4 files changed, 5575 insertions(+), 5246 deletions(-) create mode 100644 packages/lib/src/styles/tokens.tsx diff --git a/packages/lib/src/HalstackContext.tsx b/packages/lib/src/HalstackContext.tsx index c4af74ba9..abb4aa6e7 100644 --- a/packages/lib/src/HalstackContext.tsx +++ b/packages/lib/src/HalstackContext.tsx @@ -1,12 +1,8 @@ import { createContext, ReactNode, useMemo } from "react"; -import Color from "color"; -import { - AdvancedTheme, - OpinionatedTheme, - TranslatedLabels, - componentTokens, - defaultTranslatedComponentLabels, -} from "./common/variables"; +import { AdvancedTheme, componentTokens, TranslatedLabels, defaultTranslatedComponentLabels } from "./common/variables"; +import styled from "@emotion/styled"; +import { css } from "@emotion/react"; +import { aliasTokens, coreTokens } from "./styles/tokens"; /** * This type is used to allow partial themes and labels objects to be passed to the HalstackProvider. @@ -15,377 +11,9 @@ import { export type DeepPartial = { [P in keyof T]?: Partial; }; - const HalstackContext = createContext(componentTokens); const HalstackLanguageContext = createContext(defaultTranslatedComponentLabels); -const addLightness = (newLightness: number, hexColor?: string) => { - try { - if (hexColor) { - const color = Color(hexColor); - const hslColor = color.hsl(); - const lightnessColor = hslColor.lightness(); - return hslColor.lightness(lightnessColor + newLightness).hex(); - } - return null; - } catch (e) { - return null; - } -}; - -const subLightness = (newLightness: number, hexColor?: string) => { - try { - if (hexColor) { - const color = Color(hexColor); - const hslColor = color.hsl(); - const lightnessColor = hslColor.lightness(); - return hslColor.lightness(lightnessColor - newLightness).hex(); - } - return null; - } catch (e) { - return null; - } -}; - -const parseTheme = (theme: DeepPartial): AdvancedTheme => { - const componentTokensCopy: AdvancedTheme = JSON.parse(JSON.stringify(componentTokens)); - - const accordionTokens = componentTokensCopy.accordion; - accordionTokens.assistiveTextFontColor = - theme.accordion?.assistiveTextFontColor ?? accordionTokens.assistiveTextFontColor; - accordionTokens.subLabelFontColor = theme.accordion?.subLabelFontColor ?? accordionTokens.subLabelFontColor; - accordionTokens.titleLabelFontColor = theme.accordion?.titleFontColor ?? accordionTokens.titleLabelFontColor; - accordionTokens.arrowColor = theme.accordion?.accentColor ?? accordionTokens.arrowColor; - accordionTokens.iconColor = theme.accordion?.accentColor ?? accordionTokens.iconColor; - accordionTokens.hoverBackgroundColor = - addLightness(57, theme.accordion?.accentColor) ?? accordionTokens.hoverBackgroundColor; - - const buttonTokens = componentTokensCopy.button; - 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(42, 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; - checkboxTokens.borderColor = theme.checkbox?.baseColor ?? checkboxTokens.borderColor; - checkboxTokens.checkColor = theme.checkbox?.checkColor ?? checkboxTokens.checkColor; - checkboxTokens.fontColor = theme.checkbox?.fontColor ?? checkboxTokens.fontColor; - checkboxTokens.hoverBackgroundColorChecked = - subLightness(15, theme.checkbox?.baseColor) ?? checkboxTokens.hoverBackgroundColorChecked; - checkboxTokens.hoverBorderColor = subLightness(15, theme.checkbox?.baseColor) ?? checkboxTokens.hoverBorderColor; - - const chipTokens = componentTokensCopy.chip; - chipTokens.backgroundColor = theme.chip?.baseColor ?? chipTokens.backgroundColor; - chipTokens.fontColor = theme.chip?.fontColor ?? chipTokens.fontColor; - chipTokens.iconColor = theme.chip?.iconColor ?? chipTokens.iconColor; - chipTokens.hoverIconColor = subLightness(10, theme.chip?.iconColor) ?? chipTokens.hoverIconColor; - chipTokens.activeIconColor = subLightness(30, theme.chip?.iconColor) ?? chipTokens.activeIconColor; - - const contextualMenuTokens = componentTokensCopy.contextualMenu; - contextualMenuTokens.selectedMenuItemBackgroundColor = - theme.contextualMenu?.accentColor ?? contextualMenuTokens.selectedMenuItemBackgroundColor; - contextualMenuTokens.hoverSelectedMenuItemBackgroundColor = - subLightness(5, theme.contextualMenu?.accentColor) ?? contextualMenuTokens.hoverSelectedMenuItemBackgroundColor; - contextualMenuTokens.activeSelectedMenuItemBackgroundColor = - subLightness(5, theme.contextualMenu?.accentColor) ?? contextualMenuTokens.activeSelectedMenuItemBackgroundColor; - contextualMenuTokens.backgroundColor = theme.contextualMenu?.baseColor ?? contextualMenuTokens.backgroundColor; - contextualMenuTokens.hoverMenuItemBackgroundColor = - subLightness(5, theme.contextualMenu?.baseColor) ?? contextualMenuTokens.hoverMenuItemBackgroundColor; - contextualMenuTokens.activeMenuItemBackgroundColor = - subLightness(5, theme.contextualMenu?.baseColor) ?? contextualMenuTokens.activeMenuItemBackgroundColor; - contextualMenuTokens.menuItemFontColor = theme.contextualMenu?.fontColor ?? contextualMenuTokens.menuItemFontColor; - contextualMenuTokens.sectionTitleFontColor = - theme.contextualMenu?.fontColor ?? contextualMenuTokens.sectionTitleFontColor; - contextualMenuTokens.iconColor = theme.contextualMenu?.iconColor ?? contextualMenuTokens.iconColor; - - const dataGridTokens = componentTokensCopy.dataGrid; - dataGridTokens.headerBackgroundColor = theme.dataGrid?.baseColor ?? dataGridTokens.headerBackgroundColor; - dataGridTokens.headerFontColor = theme.dataGrid?.headerFontColor ?? dataGridTokens.headerFontColor; - dataGridTokens.dataFontColor = theme.dataGrid?.cellFontColor ?? dataGridTokens.dataFontColor; - dataGridTokens.headerCheckboxCheckColor = theme.dataGrid?.baseColor ?? dataGridTokens.headerCheckboxCheckColor; - dataGridTokens.actionIconColor = theme.dataGrid?.baseColor ?? dataGridTokens.actionIconColor; - dataGridTokens.hoverActionIconColor = theme.dataGrid?.baseColor ?? dataGridTokens.hoverActionIconColor; - dataGridTokens.focusActionIconColor = theme.dataGrid?.baseColor ?? dataGridTokens.focusActionIconColor; - dataGridTokens.activeActionIconColor = theme.dataGrid?.baseColor ?? dataGridTokens.activeActionIconColor; - - const dateTokens = componentTokensCopy.dateInput; - dateTokens.pickerSelectedBackgroundColor = theme.dateInput?.baseColor ?? dateTokens.pickerSelectedBackgroundColor; - dateTokens.pickerSelectedFontColor = theme.dateInput?.selectedFontColor ?? dateTokens.pickerSelectedFontColor; - dateTokens.pickerActiveBackgroundColor = - subLightness(8, theme.dateInput?.baseColor) ?? dateTokens.pickerActiveBackgroundColor; - dateTokens.pickerActiveFontColor = theme.dateInput?.selectedFontColor ?? dateTokens.pickerActiveFontColor; - dateTokens.pickerCurrentYearFontColor = theme.dateInput?.baseColor ?? dateTokens.pickerCurrentYearFontColor; - dateTokens.pickerHeaderActiveBackgroundColor = - subLightness(8, theme.dateInput?.baseColor) ?? dateTokens.pickerHeaderActiveBackgroundColor; - dateTokens.pickerHeaderActiveFontColor = theme.dateInput?.selectedFontColor ?? dateTokens.pickerHeaderActiveFontColor; - dateTokens.pickerHoverBackgroundColor = - addLightness(52, theme.dateInput?.baseColor) ?? dateTokens.pickerHoverBackgroundColor; - dateTokens.pickerCurrentDateBorderColor = - addLightness(42, theme.dateInput?.baseColor) ?? dateTokens.pickerCurrentDateBorderColor; - dateTokens.pickerHeaderHoverBackgroundColor = - addLightness(52, theme.dateInput?.baseColor) ?? dateTokens.pickerHeaderHoverBackgroundColor; - - const dialogTokens = componentTokensCopy.dialog; - dialogTokens.backgroundColor = theme.dialog?.baseColor ?? dialogTokens.backgroundColor; - dialogTokens.closeIconColor = theme.dialog?.closeIconColor ?? dialogTokens.closeIconColor; - dialogTokens.overlayColor = theme.dialog?.overlayColor ?? dialogTokens.overlayColor; - - const dropdownTokens = componentTokensCopy.dropdown; - dropdownTokens.buttonBackgroundColor = theme.dropdown?.baseColor ?? dropdownTokens.buttonBackgroundColor; - dropdownTokens.buttonFontColor = theme.dropdown?.fontColor ?? dropdownTokens.buttonFontColor; - dropdownTokens.buttonIconColor = theme.dropdown?.fontColor ?? dropdownTokens.caretIconColor; - dropdownTokens.caretIconColor = theme.dropdown?.fontColor ?? dropdownTokens.caretIconColor; - dropdownTokens.optionFontColor = theme.dropdown?.optionFontColor ?? dropdownTokens.optionFontColor; - dropdownTokens.optionIconColor = theme.dropdown?.optionFontColor ?? dropdownTokens.optionIconColor; - dropdownTokens.hoverButtonBackgroundColor = - subLightness(5, theme.dropdown?.baseColor) ?? dropdownTokens.hoverButtonBackgroundColor; - dropdownTokens.activeButtonBackgroundColor = - subLightness(12, theme.dropdown?.baseColor) ?? dropdownTokens.activeButtonBackgroundColor; - dropdownTokens.hoverOptionBackgroundColor = - subLightness(5, theme.dropdown?.baseColor) ?? dropdownTokens.hoverOptionBackgroundColor; - dropdownTokens.activeOptionBackgroundColor = - subLightness(20, theme.dropdown?.baseColor) ?? dropdownTokens.activeOptionBackgroundColor; - - const fileInputTokens = componentTokensCopy.fileInput; - fileInputTokens.labelFontColor = theme.fileInput?.fontColor ?? fileInputTokens.labelFontColor; - fileInputTokens.helperTextFontColor = theme.fileInput?.fontColor ?? fileInputTokens.helperTextFontColor; - fileInputTokens.dropLabelFontColor = theme.fileInput?.fontColor ?? fileInputTokens.dropLabelFontColor; - fileInputTokens.fileNameFontColor = theme.fileInput?.fontColor ?? fileInputTokens.fileNameFontColor; - - const footerTokens = componentTokensCopy.footer; - footerTokens.backgroundColor = theme.footer?.baseColor ?? footerTokens.backgroundColor; - footerTokens.bottomLinksFontColor = theme.footer?.fontColor ?? footerTokens.bottomLinksFontColor; - footerTokens.copyrightFontColor = theme.footer?.fontColor ?? footerTokens.copyrightFontColor; - footerTokens.socialLinksColor = theme.footer?.fontColor ?? footerTokens.socialLinksColor; - footerTokens.bottomLinksDividerColor = theme.footer?.accentColor ?? footerTokens.bottomLinksDividerColor; - footerTokens.logo = theme.footer?.logo ?? footerTokens.logo; - - const headerTokens = componentTokensCopy.header; - headerTokens.backgroundColor = theme.header?.baseColor ?? headerTokens.backgroundColor; - headerTokens.underlinedColor = theme.header?.accentColor ?? headerTokens.underlinedColor; - headerTokens.menuBackgroundColor = theme.header?.menuBaseColor ?? headerTokens.menuBackgroundColor; - headerTokens.hamburgerFontColor = theme.header?.fontColor ?? headerTokens.hamburgerFontColor; - headerTokens.hamburgerIconColor = theme.header?.hamburgerColor ?? headerTokens.hamburgerIconColor; - headerTokens.hamburgerHoverColor = addLightness(90, theme.header?.hamburgerColor) ?? headerTokens.hamburgerHoverColor; - headerTokens.logo = theme.header?.logo ?? headerTokens.logo; - headerTokens.logoResponsive = theme.header?.logoResponsive ?? headerTokens.logoResponsive; - headerTokens.contentColor = theme.header?.contentColor ?? headerTokens.contentColor; - headerTokens.overlayColor = theme.header?.overlayColor ?? headerTokens.overlayColor; - - const linkTokens = componentTokensCopy.link; - linkTokens.visitedFontColor = theme.link?.baseColor ?? linkTokens.visitedFontColor; - linkTokens.visitedUnderlineColor = theme.link?.baseColor ?? linkTokens.visitedUnderlineColor; - - const navTabsTokens = componentTokensCopy.navTabs; - navTabsTokens.selectedFontColor = theme.navTabs?.baseColor ?? navTabsTokens.selectedFontColor; - navTabsTokens.unselectedFontColor = theme.navTabs?.baseColor ?? navTabsTokens.selectedFontColor; - navTabsTokens.selectedIconColor = theme.navTabs?.baseColor ?? navTabsTokens.selectedIconColor; - navTabsTokens.unselectedIconColor = theme.navTabs?.baseColor ?? navTabsTokens.selectedIconColor; - navTabsTokens.selectedUnderlineColor = theme.navTabs?.accentColor ?? navTabsTokens.selectedUnderlineColor; - navTabsTokens.hoverBackgroundColor = addLightness(55, theme.navTabs?.baseColor) ?? navTabsTokens.hoverBackgroundColor; - navTabsTokens.pressedBackgroundColor = - addLightness(50, theme.navTabs?.baseColor) ?? navTabsTokens.pressedBackgroundColor; - - const paginatorTokens = componentTokensCopy.paginator; - paginatorTokens.backgroundColor = theme.paginator?.baseColor ?? paginatorTokens.backgroundColor; - paginatorTokens.fontColor = theme.paginator?.fontColor ?? paginatorTokens.fontColor; - - const progressBarTokens = componentTokensCopy.progressBar; - progressBarTokens.trackLineColor = theme.progressBar?.accentColor ?? progressBarTokens.trackLineColor; - progressBarTokens.totalLineColor = theme.progressBar?.baseColor ?? progressBarTokens.totalLineColor; - progressBarTokens.labelFontColor = theme.progressBar?.fontColor ?? progressBarTokens.labelFontColor; - progressBarTokens.valueFontColor = theme.progressBar?.fontColor ?? progressBarTokens.valueFontColor; - progressBarTokens.helperTextFontColor = theme.progressBar?.fontColor ?? progressBarTokens.helperTextFontColor; - progressBarTokens.overlayColor = theme.progressBar?.overlayColor ?? progressBarTokens.overlayColor; - progressBarTokens.overlayFontColor = theme.progressBar?.overlayFontColor ?? progressBarTokens.overlayFontColor; - - const quickNavTokens = componentTokensCopy.quickNav; - quickNavTokens.fontColor = theme.quickNav?.fontColor ?? quickNavTokens.fontColor; - quickNavTokens.hoverFontColor = theme.quickNav?.accentColor ?? quickNavTokens.hoverFontColor; - - const radioGroupTokens = componentTokensCopy.radioGroup; - radioGroupTokens.radioInputColor = theme.radioGroup?.baseColor ?? radioGroupTokens.radioInputColor; - radioGroupTokens.labelFontColor = theme.radioGroup?.fontColor ?? radioGroupTokens.labelFontColor; - radioGroupTokens.helperTextFontColor = theme.radioGroup?.fontColor ?? radioGroupTokens.helperTextFontColor; - radioGroupTokens.radioInputLabelFontColor = theme.radioGroup?.fontColor ?? radioGroupTokens.radioInputLabelFontColor; - radioGroupTokens.hoverRadioInputColor = - subLightness(10, theme.radioGroup?.baseColor) ?? radioGroupTokens.radioInputColor; - radioGroupTokens.activeRadioInputColor = - subLightness(25, theme.radioGroup?.baseColor) ?? radioGroupTokens.radioInputColor; - - const selectTokens = componentTokensCopy.select; - selectTokens.selectedListOptionBackgroundColor = - theme.select?.selectedOptionBackgroundColor ?? selectTokens.selectedListOptionBackgroundColor; - selectTokens.valueFontColor = theme.select?.fontColor ?? selectTokens.valueFontColor; - selectTokens.labelFontColor = theme.select?.fontColor ?? selectTokens.labelFontColor; - selectTokens.helperTextFontColor = theme.select?.fontColor ?? selectTokens.helperTextFontColor; - selectTokens.listOptionFontColor = theme.select?.optionFontColor ?? selectTokens.listOptionFontColor; - selectTokens.listOptionIconColor = theme.select?.optionFontColor ?? selectTokens.listOptionIconColor; - selectTokens.placeholderFontColor = addLightness(30, theme.select?.fontColor) ?? selectTokens.placeholderFontColor; - selectTokens.collapseIndicatorColor = theme.select?.fontColor ?? selectTokens.collapseIndicatorColor; - selectTokens.hoverInputBorderColor = theme.select?.hoverBorderColor ?? selectTokens.hoverInputBorderColor; - selectTokens.selectedHoverListOptionBackgroundColor = - subLightness(5, theme.select?.selectedOptionBackgroundColor) ?? selectTokens.selectedHoverListOptionBackgroundColor; - selectTokens.selectedActiveListOptionBackgroundColor = - subLightness(15, theme.select?.selectedOptionBackgroundColor) ?? - selectTokens.selectedActiveListOptionBackgroundColor; - - const sideNavTokens = componentTokensCopy.sidenav; - sideNavTokens.backgroundColor = theme.sidenav?.baseColor ?? sideNavTokens.backgroundColor; - - const sliderTokens = componentTokensCopy.slider; - sliderTokens.labelFontColor = theme.slider?.fontColor ?? sliderTokens.labelFontColor; - sliderTokens.helperTextFontColor = theme.slider?.fontColor ?? sliderTokens.helperTextFontColor; - sliderTokens.limitValuesFontColor = theme.slider?.fontColor ?? sliderTokens.limitValuesFontColor; - sliderTokens.thumbBackgroundColor = theme.slider?.baseColor ?? sliderTokens.thumbBackgroundColor; - sliderTokens.focusThumbBackgroundColor = theme.slider?.baseColor ?? sliderTokens.focusThumbBackgroundColor; - sliderTokens.tickBackgroundColor = theme.slider?.baseColor ?? sliderTokens.tickBackgroundColor; - sliderTokens.trackLineColor = theme.slider?.baseColor ?? sliderTokens.trackLineColor; - sliderTokens.totalLineColor = theme.slider?.totalLineColor ?? sliderTokens.totalLineColor; - sliderTokens.hoverThumbBackgroundColor = - subLightness(15, theme.slider?.baseColor) ?? sliderTokens.thumbBackgroundColor; - sliderTokens.activeThumbBackgroundColor = - subLightness(15, theme.slider?.baseColor) ?? sliderTokens.thumbBackgroundColor; - - const spinnerTokens = componentTokensCopy.spinner; - spinnerTokens.trackCircleColor = theme.spinner?.accentColor ?? spinnerTokens.trackCircleColor; - spinnerTokens.totalCircleColor = theme.spinner?.baseColor ?? spinnerTokens.totalCircleColor; - spinnerTokens.trackCircleColorOverlay = theme.spinner?.overlayColor ?? spinnerTokens.trackCircleColorOverlay; - spinnerTokens.labelFontColor = theme.spinner?.fontColor ?? spinnerTokens.labelFontColor; - spinnerTokens.progressValueFontColor = theme.spinner?.fontColor ?? spinnerTokens.progressValueFontColor; - spinnerTokens.overlayLabelFontColor = theme.spinner?.overlayFontColor ?? spinnerTokens.overlayLabelFontColor; - spinnerTokens.overlayProgressValueFontColor = - theme.spinner?.overlayFontColor ?? spinnerTokens.overlayProgressValueFontColor; - - const switchTokens = componentTokensCopy.switch; - switchTokens.checkedTrackBackgroundColor = theme.switch?.checkedBaseColor ?? switchTokens.checkedTrackBackgroundColor; - switchTokens.labelFontColor = theme.switch?.fontColor ?? switchTokens.labelFontColor; - switchTokens.disabledCheckedTrackBackgroundColor = - addLightness(57, theme.switch?.checkedBaseColor) ?? switchTokens.disabledCheckedTrackBackgroundColor; - - const tableTokens = componentTokensCopy.table; - tableTokens.headerBackgroundColor = theme.table?.baseColor ?? tableTokens.headerBackgroundColor; - tableTokens.headerFontColor = theme.table?.headerFontColor ?? tableTokens.headerFontColor; - tableTokens.dataFontColor = theme.table?.cellFontColor ?? tableTokens.dataFontColor; - tableTokens.sortIconColor = theme.table?.headerFontColor ?? tableTokens.sortIconColor; - tableTokens.actionIconColor = theme.table?.baseColor ?? tableTokens.actionIconColor; - tableTokens.hoverActionIconColor = theme.table?.baseColor ?? tableTokens.hoverActionIconColor; - tableTokens.focusActionIconColor = theme.table?.baseColor ?? tableTokens.focusActionIconColor; - tableTokens.activeActionIconColor = theme.table?.baseColor ?? tableTokens.activeActionIconColor; - - const tabsTokens = componentTokensCopy.tabs; - tabsTokens.selectedFontColor = theme.tabs?.baseColor ?? tabsTokens.selectedFontColor; - tabsTokens.selectedIconColor = theme.tabs?.baseColor ?? tabsTokens.selectedIconColor; - tabsTokens.selectedUnderlineColor = theme.tabs?.baseColor ?? tabsTokens.selectedUnderlineColor; - tabsTokens.focusOutline = theme.tabs?.baseColor ?? tabsTokens.focusOutline; - tabsTokens.hoverBackgroundColor = addLightness(57, theme.tabs?.baseColor) ?? tabsTokens.hoverBackgroundColor; - tabsTokens.pressedBackgroundColor = addLightness(52, theme.tabs?.baseColor) ?? tabsTokens.pressedBackgroundColor; - - const textInputTokens = componentTokensCopy.textInput; - textInputTokens.labelFontColor = theme.textInput?.fontColor ?? textInputTokens.labelFontColor; - textInputTokens.helperTextFontColor = theme.textInput?.fontColor ?? textInputTokens.helperTextFontColor; - textInputTokens.valueFontColor = theme.textInput?.fontColor ?? textInputTokens.valueFontColor; - textInputTokens.actionIconColor = theme.textInput?.fontColor ?? textInputTokens.actionIconColor; - textInputTokens.hoverActionIconColor = theme.textInput?.fontColor ?? textInputTokens.hoverActionIconColor; - textInputTokens.focusActionIconColor = theme.textInput?.fontColor ?? textInputTokens.focusActionIconColor; - textInputTokens.activeActionIconColor = theme.textInput?.fontColor ?? textInputTokens.activeActionIconColor; - textInputTokens.hoverBorderColor = theme.textInput?.hoverBorderColor ?? textInputTokens.hoverBorderColor; - textInputTokens.suffixColor = addLightness(40, theme.textInput?.fontColor) ?? textInputTokens.suffixColor; - textInputTokens.prefixColor = addLightness(40, theme.textInput?.fontColor) ?? textInputTokens.prefixColor; - textInputTokens.placeholderFontColor = - addLightness(30, theme.textInput?.fontColor) ?? textInputTokens.placeholderFontColor; - - const textareaTokens = componentTokensCopy.textarea; - textareaTokens.labelFontColor = theme.textarea?.fontColor ?? textareaTokens.labelFontColor; - textareaTokens.helperTextFontColor = theme.textarea?.fontColor ?? textareaTokens.helperTextFontColor; - textareaTokens.valueFontColor = theme.textarea?.fontColor ?? textareaTokens.valueFontColor; - textareaTokens.hoverBorderColor = theme.textarea?.hoverBorderColor ?? textareaTokens.hoverBorderColor; - textareaTokens.placeholderFontColor = - addLightness(30, theme.textarea?.fontColor) ?? textareaTokens.placeholderFontColor; - - const toggleGroupTokens = componentTokensCopy.toggleGroup; - toggleGroupTokens.selectedBackgroundColor = - theme.toggleGroup?.selectedBaseColor ?? toggleGroupTokens.selectedBackgroundColor; - toggleGroupTokens.selectedFontColor = theme.toggleGroup?.selectedFontColor ?? toggleGroupTokens.selectedFontColor; - toggleGroupTokens.unselectedBackgroundColor = - theme.toggleGroup?.unselectedBaseColor ?? toggleGroupTokens.unselectedBackgroundColor; - toggleGroupTokens.unselectedActiveBackgroundColor = - theme.toggleGroup?.selectedBaseColor ?? toggleGroupTokens.unselectedActiveBackgroundColor; - toggleGroupTokens.unselectedFontColor = - theme.toggleGroup?.unselectedFontColor ?? toggleGroupTokens.unselectedFontColor; - toggleGroupTokens.selectedHoverBackgroundColor = - subLightness(8, theme.toggleGroup?.selectedBaseColor) ?? toggleGroupTokens.selectedHoverBackgroundColor; - toggleGroupTokens.selectedActiveBackgroundColor = - subLightness(18, theme.toggleGroup?.selectedBaseColor) ?? toggleGroupTokens.selectedActiveBackgroundColor; - toggleGroupTokens.selectedDisabledBackgroundColor = - addLightness(57, theme.toggleGroup?.selectedBaseColor) ?? toggleGroupTokens.selectedDisabledBackgroundColor; - toggleGroupTokens.selectedDisabledFontColor = - addLightness(42, theme.toggleGroup?.selectedBaseColor) ?? toggleGroupTokens.selectedDisabledFontColor; - toggleGroupTokens.unselectedHoverBackgroundColor = - subLightness(10, theme.toggleGroup?.unselectedBaseColor) ?? toggleGroupTokens.unselectedHoverBackgroundColor; - - const wizardTokens = componentTokensCopy.wizard; - wizardTokens.selectedStepBackgroundColor = theme.wizard?.baseColor ?? wizardTokens.selectedStepBackgroundColor; - wizardTokens.selectedStepFontColor = theme.wizard?.selectedStepFontColor ?? wizardTokens.selectedStepFontColor; - wizardTokens.selectedStepBorderColor = theme.wizard?.baseColor ?? wizardTokens.selectedStepBorderColor; - wizardTokens.visitedLabelFontColor = theme.wizard?.fontColor ?? wizardTokens.visitedLabelFontColor; - wizardTokens.selectedLabelFontColor = theme.wizard?.fontColor ?? wizardTokens.selectedLabelFontColor; - wizardTokens.visitedHelperTextFontColor = theme.wizard?.fontColor ?? wizardTokens.visitedHelperTextFontColor; - wizardTokens.selectedHelperTextFontColor = theme.wizard?.fontColor ?? wizardTokens.selectedHelperTextFontColor; - wizardTokens.unvisitedStepBorderColor = - addLightness(40, theme.wizard?.fontColor) ?? wizardTokens.unvisitedStepBorderColor; - wizardTokens.unvisitedStepFontColor = - addLightness(40, theme.wizard?.fontColor) ?? wizardTokens.unvisitedStepFontColor; - wizardTokens.unvisitedLabelFontColor = - addLightness(40, theme.wizard?.fontColor) ?? wizardTokens.unvisitedLabelFontColor; - wizardTokens.unvisitedHelperTextFontColor = - addLightness(40, theme.wizard?.fontColor) ?? wizardTokens.unvisitedHelperTextFontColor; - - return componentTokensCopy; -}; - -const parseAdvancedTheme = (advancedTheme: DeepPartial): AdvancedTheme => { - const allTokensCopy: AdvancedTheme = JSON.parse(JSON.stringify(componentTokens)); - - (Object.keys(allTokensCopy) as (keyof AdvancedTheme)[]).forEach((component) => { - const componentTheme = advancedTheme[component]; - if (componentTheme != null) { - (Object.keys(componentTheme) as (keyof typeof componentTheme)[]).forEach((objectKey) => { - if (componentTheme[objectKey]) { - allTokensCopy[component][objectKey] = componentTheme[objectKey]; - } - }); - } - }); - return allTokensCopy; -}; - const parseLabels = (labels: DeepPartial): TranslatedLabels => { const parsedLabels = defaultTranslatedComponentLabels; (Object.keys(labels) as (keyof TranslatedLabels)[]).forEach((component) => { @@ -404,34 +32,41 @@ const parseLabels = (labels: DeepPartial): TranslatedLabels => }; type HalstackProviderPropsType = { - theme?: DeepPartial; - advancedTheme?: DeepPartial; labels?: DeepPartial; children: ReactNode; + newTheme: { [key: string]: string }; }; -const HalstackProvider = ({ theme, advancedTheme, labels, children }: HalstackProviderPropsType): JSX.Element => { - const parsedTheme = useMemo( - () => (theme ? parseTheme(theme) : advancedTheme ? parseAdvancedTheme(advancedTheme) : null), - [theme, advancedTheme] - ); + +const HalstackThemed = styled.div<{ theme: { [key: string]: string | number } }>` + ${(props) => css` + ${Object.keys(props.theme).length ? Object.entries(props.theme).map(([key, val]) => `${key}: ${val};`) : coreTokens} + ${aliasTokens} + `} +`; + +const createTheme = (opinionatedTheme: Record = {}) => { + const vars: Record = {}; + Object.entries(coreTokens).forEach(([key, value]) => { + vars[key] = opinionatedTheme[key] ?? value; + }); + return vars; +}; + +const HalstackProvider = ({ labels, children, newTheme }: HalstackProviderPropsType): JSX.Element => { const parsedLabels = useMemo(() => (labels ? parseLabels(labels) : null), [labels]); + const parsedTheme = useMemo(() => { + const theme = createTheme(newTheme); + return theme; + }, [newTheme]); return ( - <> - {parsedTheme ? ( - - {parsedLabels ? ( - {children} - ) : ( - children - )} - - ) : parsedLabels ? ( + + {parsedLabels ? ( {children} ) : ( children )} - + ); }; diff --git a/packages/lib/src/button/Button.stories.tsx b/packages/lib/src/button/Button.stories.tsx index a91e42c35..13ceb590a 100644 --- a/packages/lib/src/button/Button.stories.tsx +++ b/packages/lib/src/button/Button.stories.tsx @@ -6,6 +6,8 @@ import DxcInset from "../inset/Inset"; import DxcTooltip from "../tooltip/Tooltip"; import { userEvent, within } from "@storybook/test"; import { Meta, StoryObj } from "@storybook/react"; +import { useState } from "react"; +import { HalstackProvider } from "../HalstackContext"; export default { title: "Button", @@ -35,4891 +37,5218 @@ const facebookIcon = ( ); -const Button = () => ( - <> +const Button = () => { + const [newTheme, setNewTheme] = useState>({ + "--color-primary-50": "#d3f0b4", + "--color-primary-100": "#a2df5e", + "--color-primary-200": "#77c81f", + "--color-primary-300": "#68ad1b", + "--color-primary-400": "#579317", + "--color-primary-500": "#487813", + "--color-primary-600": "#39600f", + "--color-primary-700": "#2b470b", + "--color-primary-800": "#1c2f07", + "--color-primary-900": "#0d1503", + "--color-secondary-50": "#d0ebff", + "--color-secondary-100": "#98d4ff", + "--color-secondary-200": "#5fbcff", + "--color-secondary-300": "#31a2f4", + "--color-secondary-400": "#2989ce", + "--color-secondary-500": "#2271a9", + "--color-secondary-600": "#1b5986", + "--color-secondary-700": "#144364", + "--color-secondary-800": "#0d2c43", + "--color-secondary-900": "#06141f", + "--color-tertiary-50": "#fbe796", + "--color-tertiary-100": "#f1ca2a", + "--color-tertiary-200": "#d3b125", + "--color-tertiary-300": "#b79a20", + "--color-tertiary-400": "#9a811b", + "--color-tertiary-500": "#7f6a16", + "--color-tertiary-600": "#655412", + "--color-tertiary-700": "#4b3f0d", + "--color-tertiary-800": "#322909", + "--color-tertiary-900": "#161304", + "--color-success-50": "#c5f2d2", + "--color-success-100": "#7ee29a", + "--color-success-200": "#53ca75", + "--color-success-300": "#48af65", + "--color-success-400": "#3d9455", + "--color-success-500": "#327a46", + "--color-success-600": "#286138", + "--color-success-700": "#1d4729", + "--color-success-800": "#132f1b", + "--color-success-900": "#09150c", + "--color-error-50": "#ffdfe3", + "--color-error-100": "#ffbcc5", + "--color-error-200": "#fe96a4", + "--color-error-300": "#fe6b7f", + "--color-error-400": "#f8334d", + "--color-error-500": "#cd2a40", + "--color-error-600": "#a32133", + "--color-error-700": "#7b1926", + "--color-error-800": "#52111a", + "--color-error-900": "#28080c", + "--color-warning-50": "#fce4c9", + "--color-warning-100": "#f9c386", + "--color-warning-200": "#f5a242", + "--color-warning-300": "#d68b35", + "--color-warning-400": "#b5752d", + "--color-warning-500": "#956025", + "--color-warning-600": "#764c1d", + "--color-warning-700": "#573916", + "--color-warning-800": "#3a250e", + "--color-warning-900": "#1b1107", + "--color-neutral-50": "#e7e7e7", + "--color-neutral-100": "#cdcdcd", + "--color-neutral-200": "#b4b4b4", + "--color-neutral-300": "#9c9c9c", + "--color-neutral-400": "#838383", + "--color-neutral-500": "#6c6c6c", + "--color-neutral-600": "#555555", + "--color-neutral-700": "#404040", + "--color-neutral-800": "#292929", + "--color-neutral-900": "#131313", + "--color-alpha-100-a": "#cdcdcd1a", + "--color-alpha-200-a": "#b4b4b433", + "--color-alpha-300-a": "#9c9c9c4d", + "--color-alpha-400-a": "#83838366", + "--color-alpha-500-a": "#6c6c6c80", + "--color-alpha-600-a": "#55555599", + "--color-alpha-700-a": "#404040b2", + "--color-alpha-800-a": "#292929cc", + "--color-alpha-900-a": "#131313e5", + "--color-black": "#000000", + "--color-white": "#ffffff", + }); + return ( <> - <> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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> + <Title title="Default" theme="light" level={2} /> + <HalstackProvider newTheme={newTheme}> + <Title title="Small" theme="light" level={2} /> + <Title title="Primary" theme="light" level={3} /> + <DxcFlex> + <DxcFlex direction="column"> <ExampleContainer> - <DxcButton icon={facebookIcon} size={{ height: "small", width: "small" }} title="Facebook" /> + <DxcButton + label="Primary" + semantic="default" + onClick={() => setNewTheme({ "--color-primary-700": "#fabada" })} + size={{ height: "small" }} + /> </ExampleContainer> - <ExampleContainer> - <DxcButton label="Medium" size={{ height: "small", width: "medium" }} /> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton label="Primary" size={{ height: "small" }} /> </ExampleContainer> - <ExampleContainer> - <DxcButton label="Large" size={{ height: "small", width: "large" }} /> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton label="Primary" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-active", "pseudo-focus"]}> + <DxcButton label="Primary" size={{ height: "small" }} /> </ExampleContainer> <ExampleContainer> - <DxcButton label="Fit content" size={{ height: "small", width: "fitContent" }} /> + <DxcButton label="Primary" size={{ height: "small" }} disabled /> </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> + <DxcFlex direction="column"> <ExampleContainer> - <DxcButton label="xxsmall" size={{ height: "small" }} margin="xxsmall" /> + <DxcButton label="Primary" icon="home" size={{ height: "small" }} /> </ExampleContainer> - <ExampleContainer> - <DxcButton label="xsmall" size={{ height: "small" }} margin="xsmall" /> + <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", "pseudo-focus"]}> + <DxcButton label="Primary" icon="home" size={{ height: "small" }} /> </ExampleContainer> <ExampleContainer> - <DxcButton label="small" size={{ height: "small" }} margin="small" /> + <DxcButton label="Primary" icon="home" size={{ height: "small" }} disabled /> </ExampleContainer> + </DxcFlex> + <DxcFlex direction="column"> <ExampleContainer> - <DxcButton label="medium" size={{ height: "small" }} margin="medium" /> + <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", "pseudo-focus"]}> + <DxcButton label="Primary" icon="home" iconPosition="after" size={{ height: "small" }} /> </ExampleContainer> <ExampleContainer> - <DxcButton label="large" size={{ height: "small" }} margin="large" /> + <DxcButton label="Primary" disabled icon="home" iconPosition="after" size={{ height: "small" }} /> </ExampleContainer> + </DxcFlex> + <DxcFlex direction="column"> <ExampleContainer> - <DxcButton label="xlarge" size={{ height: "small" }} margin="xlarge" /> + <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", "pseudo-focus"]}> + <DxcButton icon="home" size={{ height: "small" }} title="Home" /> </ExampleContainer> <ExampleContainer> - <DxcButton label="xxlarge" size={{ height: "small" }} margin="xxlarge" /> + <DxcButton icon="home" size={{ height: "small" }} disabled title="Home" /> </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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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"> + <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> - <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", "pseudo-focus"]}> - <DxcButton icon="home" size={{ height: "medium" }} title="Home" /> - </ExampleContainer> - <ExampleContainer> - <DxcButton icon="home" size={{ height: "medium" }} disabled title="Home" /> - </ExampleContainer> + <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> - </DxcFlex> - <DxcFlex> - <DxcFlex direction="column"> - <Title title="Width" theme="light" level={4} /> - <DxcFlex> + <Title title="Secondary" theme="light" level={3} /> + <DxcFlex> + <DxcFlex direction="column"> <ExampleContainer> - <DxcButton label="Small Small" size={{ height: "medium", width: "small" }} title="Facebook" /> + <DxcButton mode="secondary" label="Secondary" size={{ height: "small" }} /> </ExampleContainer> - <ExampleContainer> - <DxcButton label="Medium Medium Medium" size={{ height: "medium", width: "medium" }} /> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton mode="secondary" label="Secondary" size={{ height: "small" }} /> </ExampleContainer> - <ExampleContainer> - <DxcButton label="Large Large Large Large Large Large" size={{ height: "medium", width: "large" }} /> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton mode="secondary" label="Secondary" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-active", "pseudo-focus"]}> + <DxcButton mode="secondary" label="Secondary" size={{ height: "small" }} /> </ExampleContainer> <ExampleContainer> - <DxcButton label="Fit content" size={{ height: "medium", width: "fitContent" }} /> + <DxcButton mode="secondary" label="Secondary" size={{ height: "small" }} disabled /> </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> + <DxcFlex direction="column"> <ExampleContainer> - <DxcButton label="xxsmall" size={{ height: "medium" }} margin="xxsmall" /> + <DxcButton mode="secondary" label="Secondary" icon="home" size={{ height: "small" }} /> </ExampleContainer> - <ExampleContainer> - <DxcButton label="xsmall" size={{ height: "medium" }} margin="xsmall" /> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton mode="secondary" label="Secondary" icon="home" size={{ height: "small" }} /> </ExampleContainer> - <ExampleContainer> - <DxcButton label="small" size={{ height: "medium" }} margin="small" /> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton mode="secondary" label="Secondary" icon="home" size={{ height: "small" }} /> </ExampleContainer> - <ExampleContainer> - <DxcButton label="medium" size={{ height: "medium" }} margin="medium" /> + <ExampleContainer pseudoState={["pseudo-active", "pseudo-focus"]}> + <DxcButton mode="secondary" label="Secondary" icon="home" size={{ height: "small" }} /> </ExampleContainer> <ExampleContainer> - <DxcButton label="large" size={{ height: "medium" }} margin="large" /> + <DxcButton mode="secondary" label="Secondary" icon="home" size={{ height: "small" }} disabled /> </ExampleContainer> + </DxcFlex> + <DxcFlex direction="column"> <ExampleContainer> - <DxcButton label="xlarge" size={{ height: "medium" }} margin="xlarge" /> + <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", "pseudo-focus"]}> + <DxcButton + mode="secondary" + label="Secondary" + icon="home" + iconPosition="after" + size={{ height: "small" }} + /> </ExampleContainer> <ExampleContainer> - <DxcButton label="xxlarge" size={{ height: "medium" }} margin="xxlarge" /> + <DxcButton + mode="secondary" + label="Secondary" + icon="home" + iconPosition="after" + size={{ height: "small" }} + disabled + /> </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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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> + <DxcFlex direction="column"> <ExampleContainer> - <DxcButton icon={facebookIcon} size={{ height: "large", width: "small" }} title="Facebook" /> + <DxcButton mode="secondary" icon="home" size={{ height: "small" }} title="Home" /> </ExampleContainer> - <ExampleContainer> - <DxcButton label="Medium" size={{ height: "large", width: "medium" }} /> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton mode="secondary" icon="home" size={{ height: "small" }} title="Home" /> </ExampleContainer> - <ExampleContainer> - <DxcButton label="Large" size={{ height: "large", width: "large" }} /> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton mode="secondary" icon="home" size={{ height: "small" }} title="Home" /> + </ExampleContainer> + <ExampleContainer pseudoState={["pseudo-active", "pseudo-focus"]}> + <DxcButton mode="secondary" icon="home" size={{ height: "small" }} title="Home" /> </ExampleContainer> <ExampleContainer> - <DxcButton label="Fit content" size={{ height: "large", width: "fitContent" }} /> + <DxcButton mode="secondary" icon="home" size={{ height: "small" }} disabled title="Home" /> </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> + <Title title="Tertiary" theme="light" level={3} /> + <DxcFlex> + <DxcFlex direction="column"> <ExampleContainer> - <DxcButton label="xxsmall" size={{ height: "large" }} margin="xxsmall" /> + <DxcButton mode="tertiary" label="Tertiary" size={{ height: "small" }} /> </ExampleContainer> - <ExampleContainer> - <DxcButton label="xsmall" size={{ height: "large" }} margin="xsmall" /> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton mode="tertiary" label="Tertiary" size={{ height: "small" }} /> </ExampleContainer> - <ExampleContainer> - <DxcButton label="small" size={{ height: "large" }} margin="small" /> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton mode="tertiary" label="Tertiary" size={{ height: "small" }} /> </ExampleContainer> - <ExampleContainer> - <DxcButton label="medium" size={{ height: "large" }} margin="medium" /> + <ExampleContainer pseudoState={["pseudo-active", "pseudo-focus"]}> + <DxcButton mode="tertiary" label="Tertiary" size={{ height: "small" }} /> </ExampleContainer> <ExampleContainer> - <DxcButton label="large" size={{ height: "large" }} margin="large" /> + <DxcButton mode="tertiary" label="Tertiary" size={{ height: "small" }} disabled /> </ExampleContainer> + </DxcFlex> + <DxcFlex direction="column"> <ExampleContainer> - <DxcButton label="xlarge" size={{ height: "large" }} margin="xlarge" /> + <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", "pseudo-focus"]}> + <DxcButton mode="tertiary" label="Tertiary" icon="home" size={{ height: "small" }} /> </ExampleContainer> <ExampleContainer> - <DxcButton label="xxlarge" size={{ height: "large" }} margin="xxlarge" /> + <DxcButton mode="tertiary" label="Tertiary" icon="home" size={{ height: "small" }} disabled /> </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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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> + <DxcFlex direction="column"> <ExampleContainer> <DxcButton - icon={facebookIcon} - semantic="error" - size={{ height: "small", width: "small" }} - title="Facebook" + mode="tertiary" + label="Tertiary" + icon="home" + iconPosition="after" + size={{ height: "small" }} /> </ExampleContainer> - <ExampleContainer> - <DxcButton label="Medium" semantic="error" size={{ height: "small", width: "medium" }} /> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton + mode="tertiary" + label="Tertiary" + icon="home" + iconPosition="after" + size={{ height: "small" }} + /> </ExampleContainer> - <ExampleContainer> - <DxcButton label="Large" semantic="error" size={{ height: "small", width: "large" }} /> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton + mode="tertiary" + label="Tertiary" + icon="home" + iconPosition="after" + size={{ height: "small" }} + /> </ExampleContainer> - <ExampleContainer> - <DxcButton label="Fit content" semantic="error" size={{ height: "small", width: "fitContent" }} /> + <ExampleContainer pseudoState={["pseudo-active", "pseudo-focus"]}> + <DxcButton + mode="tertiary" + label="Tertiary" + icon="home" + iconPosition="after" + size={{ height: "small" }} + /> </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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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" + mode="tertiary" + label="Tertiary" + icon="home" + iconPosition="after" + size={{ height: "small" }} + disabled /> </ExampleContainer> + </DxcFlex> + <DxcFlex direction="column"> <ExampleContainer> - <DxcButton label="Medium" semantic="error" size={{ height: "medium", width: "medium" }} /> + <DxcButton mode="tertiary" icon="home" size={{ height: "small" }} title="Home" /> </ExampleContainer> - <ExampleContainer> - <DxcButton label="Large" semantic="error" size={{ height: "medium", width: "large" }} /> + <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", "pseudo-focus"]}> + <DxcButton mode="tertiary" icon="home" size={{ height: "small" }} title="Home" /> </ExampleContainer> <ExampleContainer> - <DxcButton label="Fit content" semantic="error" size={{ height: "medium", width: "fitContent" }} /> + <DxcButton mode="tertiary" icon="home" size={{ height: "small" }} disabled title="Home" /> </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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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> + </HalstackProvider> + <> + <Title title="Medium" theme="light" level={2} /> + <Title title="Primary" theme="light" level={2} /> + <DxcFlex> + <DxcFlex direction="column"> <ExampleContainer> - <DxcButton - icon={facebookIcon} - semantic="error" - size={{ height: "large", width: "small" }} - title="Facebook" - /> + <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", "pseudo-focus"]}> + <DxcButton label="Primary" size={{ height: "medium" }} /> </ExampleContainer> <ExampleContainer> - <DxcButton label="Medium" semantic="error" size={{ height: "large", width: "medium" }} /> + <DxcButton label="Primary" size={{ height: "medium" }} disabled /> </ExampleContainer> + </DxcFlex> + <DxcFlex direction="column"> <ExampleContainer> - <DxcButton label="Large" semantic="error" size={{ height: "large", width: "large" }} /> + <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", "pseudo-focus"]}> + <DxcButton label="Primary" icon="home" size={{ height: "medium" }} /> </ExampleContainer> <ExampleContainer> - <DxcButton label="Fit content" semantic="error" size={{ height: "large", width: "fitContent" }} /> + <DxcButton label="Primary" icon="home" size={{ height: "medium" }} disabled /> </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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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> + <DxcFlex direction="column"> <ExampleContainer> - <DxcButton - icon={facebookIcon} - semantic="warning" - size={{ height: "small", width: "small" }} - title="Facebook" - /> + <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", "pseudo-focus"]}> + <DxcButton label="Primary" icon="home" iconPosition="after" size={{ height: "medium" }} /> </ExampleContainer> <ExampleContainer> - <DxcButton label="Medium" semantic="warning" size={{ height: "small", width: "medium" }} /> + <DxcButton label="Primary" icon="home" iconPosition="after" size={{ height: "medium" }} disabled /> </ExampleContainer> + </DxcFlex> + <DxcFlex direction="column"> <ExampleContainer> - <DxcButton label="Large" semantic="warning" size={{ height: "small", width: "large" }} /> + <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", "pseudo-focus"]}> + <DxcButton icon="home" size={{ height: "medium" }} title="Home" /> </ExampleContainer> <ExampleContainer> - <DxcButton label="Fit content" semantic="warning" size={{ height: "small", width: "fitContent" }} /> + <DxcButton icon="home" size={{ height: "medium" }} disabled title="Home" /> </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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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"> + <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> - <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", "pseudo-focus"]}> - <DxcButton icon="home" semantic="warning" size={{ height: "medium" }} title="Home" /> - </ExampleContainer> - <ExampleContainer> - <DxcButton icon="home" semantic="warning" size={{ height: "medium" }} disabled title="Home" /> - </ExampleContainer> + <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> - </DxcFlex> - <DxcFlex> - <DxcFlex direction="column"> - <Title title="Width" theme="light" level={4} /> - <DxcFlex> + <Title title="Secondary" theme="light" level={3} /> + <DxcFlex> + <DxcFlex direction="column"> <ExampleContainer> - <DxcButton - icon={facebookIcon} - semantic="warning" - size={{ height: "medium", width: "small" }} - title="Facebook" - /> + <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", "pseudo-focus"]}> + <DxcButton mode="secondary" label="Secondary" size={{ height: "medium" }} /> </ExampleContainer> <ExampleContainer> - <DxcButton label="Medium" semantic="warning" size={{ height: "medium", width: "medium" }} /> + <DxcButton mode="secondary" label="Secondary" size={{ height: "medium" }} disabled /> </ExampleContainer> + </DxcFlex> + <DxcFlex direction="column"> <ExampleContainer> - <DxcButton label="Large" semantic="warning" size={{ height: "medium", width: "large" }} /> + <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", "pseudo-focus"]}> + <DxcButton mode="secondary" label="Secondary" icon="home" size={{ height: "medium" }} /> </ExampleContainer> <ExampleContainer> - <DxcButton label="Fit content" semantic="warning" size={{ height: "medium", width: "fitContent" }} /> + <DxcButton mode="secondary" label="Secondary" icon="home" size={{ height: "medium" }} disabled /> </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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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> + <DxcFlex direction="column"> <ExampleContainer> <DxcButton - icon={facebookIcon} - semantic="warning" - size={{ height: "large", width: "small" }} - title="Facebook" + mode="secondary" + label="Secondary" + icon="home" + iconPosition="after" + size={{ height: "medium" }} /> </ExampleContainer> - <ExampleContainer> - <DxcButton label="Medium" semantic="warning" size={{ height: "large", width: "medium" }} /> + <ExampleContainer pseudoState="pseudo-hover"> + <DxcButton + mode="secondary" + label="Secondary" + icon="home" + iconPosition="after" + size={{ height: "medium" }} + /> </ExampleContainer> - <ExampleContainer> - <DxcButton label="Large" semantic="warning" size={{ height: "large", width: "large" }} /> + <ExampleContainer pseudoState="pseudo-focus"> + <DxcButton + mode="secondary" + label="Secondary" + icon="home" + iconPosition="after" + size={{ height: "medium" }} + /> </ExampleContainer> - <ExampleContainer> - <DxcButton label="Fit content" semantic="warning" size={{ height: "large", width: "fitContent" }} /> + <ExampleContainer pseudoState={["pseudo-active", "pseudo-focus"]}> + <DxcButton + mode="secondary" + label="Secondary" + icon="home" + iconPosition="after" + size={{ height: "medium" }} + /> </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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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" + mode="secondary" + label="Secondary" + icon="home" + iconPosition="after" + size={{ height: "medium" }} + disabled /> </ExampleContainer> + </DxcFlex> + <DxcFlex direction="column"> <ExampleContainer> - <DxcButton label="Medium" semantic="success" size={{ height: "small", width: "medium" }} /> + <DxcButton mode="secondary" icon="home" size={{ height: "medium" }} title="Home" /> </ExampleContainer> - <ExampleContainer> - <DxcButton label="Large" semantic="success" size={{ height: "small", width: "large" }} /> + <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", "pseudo-focus"]}> + <DxcButton mode="secondary" icon="home" size={{ height: "medium" }} title="Home" /> </ExampleContainer> <ExampleContainer> - <DxcButton label="Fit content" semantic="success" size={{ height: "small", width: "fitContent" }} /> + <DxcButton mode="secondary" icon="home" size={{ height: "medium" }} disabled title="Home" /> </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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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> - </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", "pseudo-focus"]}> - <DxcButton mode="tertiary" semantic="success" label="Tertiary" size={{ height: "small" }} /> - </ExampleContainer> - <ExampleContainer> - <DxcButton mode="tertiary" semantic="success" label="Tertiary" size={{ height: "small" }} disabled /> - </ExampleContainer> + </> + <> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <DxcButton icon="home" semantic="success" title="Home" /> + </ExampleContainer> + <ExampleContainer> + <DxcButton icon="home" semantic="success" disabled title="Home" /> + </ExampleContainer> + </DxcFlex> </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", "pseudo-focus"]}> - <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"> + <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> - <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", "pseudo-focus"]}> - <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> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <DxcButton mode="secondary" semantic="success" icon="home" title="Home" /> + </ExampleContainer> + <ExampleContainer> + <DxcButton mode="secondary" semantic="success" icon="home" disabled title="Home" /> + </ExampleContainer> + </DxcFlex> </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", "pseudo-focus"]}> - <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> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <DxcButton mode="tertiary" semantic="success" icon="home" title="Home" /> + </ExampleContainer> + <ExampleContainer> + <DxcButton mode="tertiary" semantic="success" icon="home" disabled title="Home" /> + </ExampleContainer> + </DxcFlex> </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", "pseudo-focus"]}> - <DxcButton label="Primary" semantic="success" size={{ height: "medium" }} /> - </ExampleContainer> - <ExampleContainer> - <DxcButton label="Primary" semantic="success" size={{ height: "medium" }} disabled /> - </ExampleContainer> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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 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", "pseudo-focus"]}> - <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"> + <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> - <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", "pseudo-focus"]}> - <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> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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> - <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", "pseudo-focus"]}> - <DxcButton icon="home" semantic="success" size={{ height: "medium" }} title="Home" /> - </ExampleContainer> - <ExampleContainer> - <DxcButton icon="home" semantic="success" size={{ height: "medium" }} disabled title="Home" /> - </ExampleContainer> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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> - </DxcFlex> - <DxcFlex> - <DxcFlex direction="column"> - <Title title="Width" theme="light" level={4} /> - <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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 - icon={facebookIcon} - semantic="success" - size={{ height: "medium", width: "small" }} - title="Facebook" + 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", "pseudo-focus"]}> + <DxcButton + label="Primary" + semantic="info" + icon="home" + iconPosition="after" + size={{ height: "medium" }} /> </ExampleContainer> <ExampleContainer> - <DxcButton label="Medium" semantic="success" size={{ height: "medium", width: "medium" }} /> + <DxcButton + label="Primary" + semantic="info" + icon="home" + iconPosition="after" + size={{ height: "medium" }} + disabled + /> </ExampleContainer> + </DxcFlex> + <DxcFlex direction="column"> <ExampleContainer> - <DxcButton label="Large" semantic="success" size={{ height: "medium", width: "large" }} /> + <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", "pseudo-focus"]}> + <DxcButton icon="home" semantic="info" size={{ height: "medium" }} title="Home" /> </ExampleContainer> <ExampleContainer> - <DxcButton label="Fit content" semantic="success" size={{ height: "medium", width: "fitContent" }} /> + <DxcButton icon="home" semantic="info" size={{ height: "medium" }} disabled title="Home" /> </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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <DxcButton icon="home" semantic="success" title="Home" /> - </ExampleContainer> - <ExampleContainer> - <DxcButton icon="home" semantic="success" disabled title="Home" /> - </ExampleContainer> + <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> - </DxcFlex> - <DxcFlex> - <DxcFlex direction="column"> - <Title title="Width" theme="light" level={4} /> - <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 - icon={facebookIcon} - semantic="success" - size={{ height: "large", width: "small" }} - title="Facebook" - /> + <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", "pseudo-focus"]}> + <DxcButton mode="secondary" semantic="info" label="Secondary" size={{ height: "medium" }} /> </ExampleContainer> <ExampleContainer> - <DxcButton label="Medium" semantic="success" size={{ height: "large", width: "medium" }} /> + <DxcButton mode="secondary" semantic="info" label="Secondary" size={{ height: "medium" }} disabled /> </ExampleContainer> + </DxcFlex> + <DxcFlex direction="column"> <ExampleContainer> - <DxcButton label="Large" semantic="success" size={{ height: "large", width: "large" }} /> + <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", "pseudo-focus"]}> + <DxcButton mode="secondary" semantic="info" label="Secondary" icon="home" size={{ height: "medium" }} /> </ExampleContainer> <ExampleContainer> - <DxcButton label="Fit content" semantic="success" size={{ height: "large", width: "fitContent" }} /> + <DxcButton + mode="secondary" + semantic="info" + label="Secondary" + icon="home" + size={{ height: "medium" }} + disabled + /> </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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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> + <DxcFlex direction="column"> <ExampleContainer> <DxcButton - icon={facebookIcon} + 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", "pseudo-focus"]}> + <DxcButton + mode="secondary" semantic="info" - size={{ height: "small", width: "small" }} - title="Facebook" + label="Secondary" + icon="home" + iconPosition="after" + size={{ height: "medium" }} /> </ExampleContainer> <ExampleContainer> - <DxcButton label="Medium" semantic="info" size={{ height: "small", width: "medium" }} /> + <DxcButton + mode="secondary" + semantic="info" + label="Secondary" + icon="home" + iconPosition="after" + size={{ height: "medium" }} + disabled + /> </ExampleContainer> + </DxcFlex> + <DxcFlex direction="column"> <ExampleContainer> - <DxcButton label="Large" semantic="info" size={{ height: "small", width: "large" }} /> + <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", "pseudo-focus"]}> + <DxcButton mode="secondary" semantic="info" icon="home" size={{ height: "medium" }} title="Home" /> </ExampleContainer> <ExampleContainer> - <DxcButton label="Fit content" semantic="info" size={{ height: "small", width: "fitContent" }} /> + <DxcButton + mode="secondary" + semantic="info" + icon="home" + size={{ height: "medium" }} + disabled + title="Home" + /> </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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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 - icon={facebookIcon} + 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", "pseudo-focus"]}> + <DxcButton + mode="tertiary" semantic="info" - size={{ height: "medium", width: "small" }} - title="Facebook" + label="Tertiary" + icon="home" + iconPosition="after" + size={{ height: "medium" }} /> </ExampleContainer> <ExampleContainer> - <DxcButton label="Medium" semantic="info" size={{ height: "medium", width: "medium" }} /> + <DxcButton + mode="tertiary" + semantic="info" + label="Tertiary" + icon="home" + iconPosition="after" + size={{ height: "medium" }} + disabled + /> </ExampleContainer> + </DxcFlex> + <DxcFlex direction="column"> <ExampleContainer> - <DxcButton label="Large" semantic="info" size={{ height: "medium", width: "large" }} /> + <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", "pseudo-focus"]}> + <DxcButton mode="tertiary" semantic="info" icon="home" size={{ height: "medium" }} title="Home" /> </ExampleContainer> <ExampleContainer> - <DxcButton label="Fit content" semantic="info" size={{ height: "medium", width: "fitContent" }} /> + <DxcButton + mode="tertiary" + semantic="info" + icon="home" + size={{ height: "medium" }} + disabled + title="Home" + /> </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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <DxcButton label="Primary" semantic="info" icon="home" iconPosition="after" /> - </ExampleContainer> - <ExampleContainer> - <DxcButton label="Primary" semantic="info" icon="home" iconPosition="after" disabled /> - </ExampleContainer> + </> + <> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <DxcButton icon="home" semantic="info" title="Home" /> + </ExampleContainer> + <ExampleContainer> + <DxcButton icon="home" semantic="info" disabled title="Home" /> + </ExampleContainer> + </DxcFlex> </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", "pseudo-focus"]}> - <DxcButton icon="home" semantic="info" title="Home" /> - </ExampleContainer> - <ExampleContainer> - <DxcButton icon="home" semantic="info" disabled title="Home" /> - </ExampleContainer> + <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> - </DxcFlex> - <DxcFlex> - <DxcFlex direction="column"> - <Title title="Width" theme="light" level={4} /> - <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <DxcButton mode="secondary" semantic="info" label="Secondary" icon="home" iconPosition="after" /> + </ExampleContainer> <ExampleContainer> <DxcButton - icon={facebookIcon} + mode="secondary" semantic="info" - size={{ height: "large", width: "small" }} - title="Facebook" + label="Secondary" + icon="home" + iconPosition="after" + disabled /> </ExampleContainer> + </DxcFlex> + <DxcFlex direction="column"> <ExampleContainer> - <DxcButton label="Medium" semantic="info" size={{ height: "large", width: "medium" }} /> + <DxcButton mode="secondary" semantic="info" icon="home" title="Home" /> </ExampleContainer> - <ExampleContainer> - <DxcButton label="Large" semantic="info" size={{ height: "large", width: "large" }} /> + <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", "pseudo-focus"]}> + <DxcButton mode="secondary" semantic="info" icon="home" title="Home" /> </ExampleContainer> <ExampleContainer> - <DxcButton label="Fit content" semantic="info" size={{ height: "large", width: "fitContent" }} /> + <DxcButton mode="secondary" semantic="info" icon="home" disabled title="Home" /> </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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <DxcButton mode="tertiary" semantic="info" icon="home" title="Home" /> - </ExampleContainer> - <ExampleContainer> - <DxcButton mode="tertiary" semantic="info" icon="home" disabled title="Home" /> - </ExampleContainer> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <DxcButton mode="tertiary" semantic="info" icon="home" title="Home" /> + </ExampleContainer> + <ExampleContainer> + <DxcButton mode="tertiary" semantic="info" icon="home" disabled title="Home" /> + </ExampleContainer> + </DxcFlex> </DxcFlex> - </DxcFlex> + </> </> </> - </> -); + ); +}; const Tooltip = () => ( <> diff --git a/packages/lib/src/styles/tokens.tsx b/packages/lib/src/styles/tokens.tsx new file mode 100644 index 000000000..a14aabe4e --- /dev/null +++ b/packages/lib/src/styles/tokens.tsx @@ -0,0 +1,365 @@ +export const coreTokens = { + /**************/ + /** POSITION **/ + /**************/ + + /* Application Layout */ + "--z-app-layout-header": 100, + "--z-app-layout-sidenav": 110, + + /* Header */ + "--z-header-overlay": 200, + "--z-header-menu": 210, + + /* UI components */ + "--z-date-input": 300, + "--z-dropdown": 310, + "--z-textinput": 320, + "--z-select": 330, + + /* Modals and overlays */ + "--z-spinner-overlay": 400, + "--z-progressbar-overlay": 410, + "--z-dialog": 420, + "--z-alert": 430, + + /* Notifications */ + "--z-toast": 500, + + /* Tooltip (topmost) */ + "--z-tooltip": 600, + + /************/ + /** TOKENS **/ + /************/ + "--color-absolutes-black": "#000000", + "--color-absolutes-white": "#ffffff", + "--color-alpha-100-a": "#ebebeb1a", + "--color-alpha-200-a": "#dedede33", + "--color-alpha-300-a": "#d1d1d14d", + "--color-alpha-400-a": "#b5b5b566", + "--color-alpha-500-a": "#9a9a9a80", + "--color-alpha-600-a": "#79797999", + "--color-alpha-700-a": "#5b5b5bb2", + "--color-alpha-800-a": "#494949cc", + "--color-alpha-900-a": "#333333e5", + "--color-secondary-50": "#f8fcff", + "--color-secondary-100": "#d9efff", + "--color-secondary-200": "#bce3ff", + "--color-secondary-300": "#a0d7ff", + "--color-secondary-400": "#61bdff", + "--color-secondary-500": "#30a1f1", + "--color-secondary-600": "#267fbf", + "--color-secondary-700": "#1d6091", + "--color-secondary-800": "#174e74", + "--color-secondary-900": "#103651", + "--color-success-50": "#f3fcf5", + "--color-success-100": "#d1f5db", + "--color-success-200": "#acecbe", + "--color-success-300": "#87e3a0", + "--color-success-400": "#53cb75", + "--color-success-500": "#47ae64", + "--color-success-600": "#39884f", + "--color-success-700": "#2a673b", + "--color-success-800": "#225230", + "--color-success-900": "#183921", + "--color-neutral-50": "#fbfbfb", + "--color-neutral-100": "#ebebeb", + "--color-neutral-200": "#dedede", + "--color-neutral-300": "#d1d1d1", + "--color-neutral-400": "#b5b5b5", + "--color-neutral-500": "#9a9a9a", + "--color-neutral-600": "#797979", + "--color-neutral-700": "#5b5b5b", + "--color-neutral-800": "#494949", + "--color-neutral-900": "#333333", + "--color-warning-50": "#fffbf6", + "--color-warning-100": "#fde9d2", + "--color-warning-200": "#fbd9b3", + "--color-warning-300": "#f9c78f", + "--color-warning-400": "#f5a344", + "--color-warning-500": "#d58a35", + "--color-warning-600": "#a76d2b", + "--color-warning-700": "#7f5121", + "--color-warning-800": "#66421a", + "--color-warning-900": "#3d3309", + "--color-primary-50": "#fcfbfe", + "--color-primary-100": "#f0e8fa", + "--color-primary-200": "#e7d9f6", + "--color-primary-300": "#ddc9f3", + "--color-primary-400": "#c8a7eb", + "--color-primary-500": "#b487e4", + "--color-primary-600": "#9363c8", + "--color-primary-700": "#6f4b97", + "--color-primary-800": "#5a3c7a", + "--color-primary-900": "#3e2a55", + "--color-error-50": "#fff7f6", + "--color-error-100": "#ffe6e4", + "--color-error-200": "#ffd3d0", + "--color-error-300": "#ffc1bd", + "--color-error-400": "#ff9896", + "--color-error-500": "#ff696f", + "--color-error-600": "#e33248", + "--color-error-700": "#a92c37", + "--color-error-800": "#87262d", + "--color-error-900": "#5b1f21", + "--color-tertiary-50": "#fefbef", + "--color-tertiary-100": "#fcedae", + "--color-tertiary-200": "#f9de6e", + "--color-tertiary-300": "#f5cd2b", + "--color-tertiary-400": "#d4b226", + "--color-tertiary-500": "#b6981f", + "--color-tertiary-600": "#8f7818", + "--color-tertiary-700": "#6c5a12", + "--color-tertiary-800": "#57490f", + "--color-tertiary-900": "#3d3309", + "--dimensions-0": "0px", + "--dimensions-1": "1px", + "--dimensions-2": "2px", + "--dimensions-4": "4px", + "--dimensions-8": "8px", + "--dimensions-12": "12px", + "--dimensions-16": "16px", + "--dimensions-20": "20px", + "--dimensions-24": "24px", + "--dimensions-28": "28px", + "--dimensions-32": "32px", + "--dimensions-36": "36px", + "--dimensions-40": "40px", + "--dimensions-44": "44px", + "--dimensions-48": "48px", + "--dimensions-56": "56px", + "--dimensions-64": "64px", + "--dimensions-72": "72px", + "--dimensions-80": "80px", + "--dimensions-96": "96px", + "--font-size-12": "12px", + "--font-size-14": "14px", + "--font-size-16": "16px", + "--font-size-18": "18px", + "--font-size-20": "20px", + "--font-size-24": "24px", + "--font-size-32": "32px", + "--font-size-40": "40px", + "--font-size-48": "48px", + "--font-size-60": "60px", + "--font-weight-light": "300", + "--font-weight-regular": "400", + "--font-weight-semibold": "600", + "--font-weight-bold": "700", + "--font-family-mono": "Source Code Pro, mono", + "--font-family-sans": "Open Sans, sans-serif", + "--font-style-lightitalic": "light italic", + "--font-style-normal": "normal", + "--line-style-dashed": "dashed", + "--line-style-solid": "solid", +}; + +export const aliasTokens = { + "--border-color-error-light": "var(--color-error-300)", + "--border-color-error-medium": "var(--color-error-600)", + "--border-color-error-strong": "var(--color-error-700)", + "--border-color-error-stronger": "var(--color-error-800)", + "--border-color-neutral-bright": "var(--color-neutral-50)", + "--border-color-neutral-brighter": "var(--color-absolutes-white)", + "--border-color-neutral-dark": "var(--color-neutral-900)", + "--border-color-neutral-light": "var(--color-neutral-300)", + "--border-color-neutral-lighter": "var(--color-neutral-200)", + "--border-color-neutral-lightest": "var(--color-neutral-100)", + "--border-color-neutral-medium": "var(--color-neutral-400)", + "--border-color-neutral-strong": "var(--color-neutral-500)", + "--border-color-neutral-stronger": "var(--color-neutral-600)", + "--border-color-neutral-strongest": "var(--color-neutral-700)", + "--border-color-primary-light": "var(--color-primary-400)", + "--border-color-primary-lighter": "var(--color-primary-300)", + "--border-color-primary-medium": "var(--color-primary-500)", + "--border-color-primary-strong": "var(--color-primary-600)", + "--border-color-primary-stronger": "var(--color-primary-700)", + "--border-color-secondary-light": "var(--color-secondary-300)", + "--border-color-secondary-medium": "var(--color-secondary-500)", + "--border-color-secondary-strong": "var(--color-secondary-600)", + "--border-color-secondary-stronger": "var(--color-secondary-700)", + "--border-color-secondary-strongest": "var(--color-secondary-800)", + "--border-color-success-light": "var(--color-success-300)", + "--border-color-success-medium": "var(--color-success-600)", + "--border-color-warning-light": "var(--color-warning-300)", + "--border-color-warning-medium": "var(--color-warning-500)", + "--color-bg-overlay-dark": "var(--color-alpha-800-a)", + "--color-bg-yellow-light": "var(--color-tertiary-100)", + "--color-bg-alpha-light": "var(--color-alpha-300-a)", + "--color-bg-alpha-medium": "var(--color-alpha-800-a)", + "--color-bg-alpha-strong": "var(--color-alpha-900-a)", + "--color-bg-error-light": "var(--color-error-200)", + "--color-bg-error-lighter": "var(--color-error-100)", + "--color-bg-error-lightest": "var(--color-error-50)", + "--color-bg-error-medium": "var(--color-error-300)", + "--color-bg-error-strong": "var(--color-error-600)", + "--color-bg-error-stronger": "var(--color-error-700)", + "--color-bg-error-strongest": "var(--color-error-800)", + "--color-bg-neutral-light": "var(--color-neutral-100)", + "--color-bg-neutral-lighter": "var(--color-neutral-50)", + "--color-bg-neutral-lightest": "var(--color-absolutes-white)", + "--color-bg-neutral-medium": "var(--color-neutral-200)", + "--color-bg-neutral-strong": "var(--color-neutral-300)", + "--color-bg-neutral-stronger": "var(--color-neutral-800)", + "--color-bg-neutral-strongest": "var(--color-neutral-900)", + "--color-bg-primary-light": "var(--color-primary-200)", + "--color-bg-primary-lighter": "var(--color-primary-100)", + "--color-bg-primary-lightest": "var(--color-primary-50)", + "--color-bg-primary-medium": "var(--color-primary-300)", + "--color-bg-primary-strong": "var(--color-primary-700)", + "--color-bg-primary-stronger": "var(--color-primary-800)", + "--color-bg-primary-strongest": "var(--color-primary-900)", + "--color-bg-secondary-light": "var(--color-secondary-200)", + "--color-bg-secondary-lighter": "var(--color-secondary-100)", + "--color-bg-secondary-lightest": "var(--color-secondary-50)", + "--color-bg-secondary-medium": "var(--color-secondary-300)", + "--color-bg-secondary-strong": "var(--color-secondary-600)", + "--color-bg-secondary-stronger": "var(--color-secondary-700)", + "--color-bg-secondary-strongest": "var(--color-secondary-800)", + "--color-bg-success-light": "var(--color-success-200)", + "--color-bg-success-lighter": "var(--color-success-100)", + "--color-bg-success-lightest": "var(--color-success-50)", + "--color-bg-success-medium": "var(--color-success-300)", + "--color-bg-success-strong": "var(--color-success-600)", + "--color-bg-success-stronger": "var(--color-success-700)", + "--color-bg-success-strongest": "var(--color-success-800)", + "--color-bg-warning-light": "var(--color-warning-200)", + "--color-bg-warning-lighter": "var(--color-warning-100)", + "--color-bg-warning-lightest": "var(--color-warning-50)", + "--color-bg-warning-medium": "var(--color-warning-300)", + "--color-bg-warning-strong": "var(--color-warning-500)", + "--color-bg-warning-stronger": "var(--color-warning-600)", + "--color-bg-warning-strongest": "var(--color-warning-700)", + "--color-fg-error-light": "var(--color-error-300)", + "--color-fg-error-lighter": "var(--color-error-200)", + "--color-fg-error-medium": "var(--color-error-600)", + "--color-fg-error-strong": "var(--color-error-700)", + "--color-fg-error-stronger": "var(--color-error-800)", + "--color-fg-neutral-bright": "var(--color-absolutes-white)", + "--color-fg-neutral-dark": "var(--color-neutral-900)", + "--color-fg-neutral-light": "var(--color-neutral-400)", + "--color-fg-neutral-lighter": "var(--color-neutral-200)", + "--color-fg-neutral-lightest": "var(--color-neutral-100)", + "--color-fg-neutral-medium": "var(--color-neutral-500)", + "--color-fg-neutral-strong": "var(--color-neutral-600)", + "--color-fg-neutral-stronger": "var(--color-neutral-700)", + "--color-fg-neutral-strongest": "var(--color-neutral-800)", + "--color-fg-neutral-yellow-dark": "var(--color-tertiary-800)", + "--color-fg-primary-light": "var(--color-primary-300)", + "--color-fg-primary-lighter": "var(--color-primary-100)", + "--color-fg-primary-medium": "var(--color-primary-400)", + "--color-fg-primary-strong": "var(--color-primary-700)", + "--color-fg-primary-stronger": "var(--color-primary-800)", + "--color-fg-primary-strongest": "var(--color-primary-900)", + "--color-fg-secondary-light": "var(--color-secondary-500)", + "--color-fg-secondary-lighter": "var(--color-secondary-300)", + "--color-fg-secondary-medium": "var(--color-secondary-600)", + "--color-fg-secondary-strong": "var(--color-secondary-700)", + "--color-fg-secondary-stronger": "var(--color-secondary-800)", + "--color-fg-secondary-strongest": "var(--color-secondary-900)", + "--color-fg-success-light": "var(--color-success-300)", + "--color-fg-success-lighter": "var(--color-success-200)", + "--color-fg-success-medium": "var(--color-success-600)", + "--color-fg-success-strong": "var(--color-success-700)", + "--color-fg-success-stronger": "var(--color-success-800)", + "--color-fg-warning-light": "var(--color-warning-300)", + "--color-fg-warning-medium": "var(--color-warning-500)", + "--color-fg-warning-strong": "var(--color-warning-600)", + "--color-fg-warning-stronger": "var(--color-warning-800)", + "--shadow-dark": "var(--color-alpha-400-a)", + "--shadow-light": "var(--color-alpha-300-a)", + "--border-radius-none": "var(--dimensions-0)", + "--border-radius-xs": "var(--dimensions-2)", + "--border-radius-s": "var(--dimensions-4)", + "--border-radius-m": "var(--dimensions-8)", + "--border-radius-l": "var(--dimensions-16)", + "--border-radius-xl": "var(--dimensions-24)", + "--border-width-none": "var(--dimensions-0)", + "--border-width-s": "var(--dimensions-1)", + "--border-width-m": "var(--dimensions-2)", + "--border-width-l": "var(--dimensions-4)", + "--height-xxxs": "var(--dimensions-12)", + "--height-xxs": "var(--dimensions-16)", + "--height-xs": "var(--dimensions-20)", + "--height-s": "var(--dimensions-24)", + "--height-m": "var(--dimensions-32)", + "--height-l": "var(--dimensions-36)", + "--height-xl": "var(--dimensions-40)", + "--height-xxl": "var(--dimensions-48)", + "--height-xxxl": "var(--dimensions-56)", + "--shadow-high-spread": "var(--dimensions-0)", + "--shadow-high-x-position": "var(--dimensions-0)", + "--shadow-high-blur": "var(--dimensions-24)", + "--shadow-high-y-position": "var(--dimensions-24)", + "--shadow-higher-spread": "var(--dimensions-0)", + "--shadow-higher-x-position": "var(--dimensions-0)", + "--shadow-higher-blur": "var(--dimensions-48)", + "--shadow-higher-y-position": "var(--dimensions-48)", + "--shadow-low-spread": "var(--dimensions-0)", + "--shadow-low-x-position": "var(--dimensions-0)", + "--shadow-low-blur": "var(--dimensions-2)", + "--shadow-low-y-position": "var(--dimensions-2)", + "--shadow-mid-spread": "var(--dimensions-0)", + "--shadow-mid-x-position": "var(--dimensions-0)", + "--shadow-mid-blur": "var(--dimensions-12)", + "--shadow-mid-y-position": "var(--dimensions-12)", + "--spacing-gap-none": "var(--dimensions-0)", + "--spacing-gap-xxs": "var(--dimensions-2)", + "--spacing-gap-xs": "var(--dimensions-4)", + "--spacing-gap-s": "var(--dimensions-8)", + "--spacing-gap-m": "var(--dimensions-12)", + "--spacing-gap-ml": "var(--dimensions-16)", + "--spacing-gap-l": "var(--dimensions-24)", + "--spacing-gap-xl": "var(--dimensions-32)", + "--spacing-gap-xxl": "var(--dimensions-48)", + "--spacing-padding-none": "var(--dimensions-0)", + "--spacing-padding-xxxs": "var(--dimensions-2)", + "--spacing-padding-xxs": "var(--dimensions-4)", + "--spacing-padding-xs": "var(--dimensions-8)", + "--spacing-padding-s": "var(--dimensions-12)", + "--spacing-padding-m": "var(--dimensions-16)", + "--spacing-padding-ml": "var(--dimensions-20)", + "--spacing-padding-l": "var(--dimensions-24)", + "--spacing-padding-xl": "var(--dimensions-32)", + "--spacing-padding-xxl": "var(--dimensions-40)", + "--typography-body-xs": "var(--font-size-12)", + "--typography-body-s": "var(--font-size-14)", + "--typography-body-m": "var(--font-size-16)", + "--typography-body-l": "var(--font-size-18)", + "--typography-body-xl": "var(--font-size-20)", + "--typography-body-xxl": "var(--font-size-24)", + "--typography-body-regular": "var(--font-weight-regular)", + "--typography-heading-xs": "var(--font-size-12)", + "--typography-heading-s": "var(--font-size-16)", + "--typography-heading-m": "var(--font-size-20)", + "--typography-heading-l": "var(--font-size-24)", + "--typography-heading-xl": "var(--font-size-32)", + "--typography-heading-xxl": "var(--font-size-40)", + "--typography-heading-light": "var(--font-weight-light)", + "--typography-heading-regular": "var(--font-weight-regular)", + "--typography-heading-semibold": "var(--font-weight-semibold)", + "--typography-helper-text-s": "var(--font-size-12)", + "--typography-helper-text-m": "var(--font-size-14)", + "--typography-helper-text-l": "var(--font-size-16)", + "--typography-helper-text-light": "var(--font-weight-light)", + "--typography-helper-text-regular": "var(--font-weight-regular)", + "--typography-helper-text-semibold": "var(--font-weight-semibold)", + "--typography-label-s": "var(--font-size-12)", + "--typography-label-m": "var(--font-size-14)", + "--typography-label-l": "var(--font-size-16)", + "--typography-label-xl": "var(--font-size-20)", + "--typography-label-regular": "var(--font-weight-regular)", + "--typography-label-semibold": "var(--font-weight-semibold)", + "--typography-link-m": "var(--font-size-14)", + "--typography-link-regular": "var(--font-weight-regular)", + "--typography-title-s": "var(--font-size-14)", + "--typography-title-m": "var(--font-size-16)", + "--typography-title-l": "var(--font-size-20)", + "--typography-title-xl": "var(--font-size-24)", + "--typography-title-bold": "var(--font-weight-bold)", + "--border-style-default": "var(--line-style-solid)", + "--border-style-outline": "var(--line-style-dashed)", + "--typography-font-family": "var(--font-family-sans)", + "--typography-helper-text-italic": "var(--font-style-lightitalic)", +}; diff --git a/packages/lib/src/styles/variables.css b/packages/lib/src/styles/variables.css index 6107773cc..c337ccce1 100644 --- a/packages/lib/src/styles/variables.css +++ b/packages/lib/src/styles/variables.css @@ -45,76 +45,76 @@ --color-alpha-700-a: #5b5b5bb2; --color-alpha-800-a: #494949cc; --color-alpha-900-a: #333333e5; - --color-blue-50: #f8fcff; - --color-blue-100: #d9efff; - --color-blue-200: #bce3ff; - --color-blue-300: #a0d7ff; - --color-blue-400: #61bdff; - --color-blue-500: #30a1f1; - --color-blue-600: #267fbf; - --color-blue-700: #1d6091; - --color-blue-800: #174e74; - --color-blue-900: #103651; - --color-green-50: #f3fcf5; - --color-green-100: #d1f5db; - --color-green-200: #acecbe; - --color-green-300: #87e3a0; - --color-green-400: #53cb75; - --color-green-500: #47ae64; - --color-green-600: #39884f; - --color-green-700: #2a673b; - --color-green-800: #225230; - --color-green-900: #183921; - --color-grey-50: #fbfbfb; - --color-grey-100: #ebebeb; - --color-grey-200: #dedede; - --color-grey-300: #d1d1d1; - --color-grey-400: #b5b5b5; - --color-grey-500: #9a9a9a; - --color-grey-600: #797979; - --color-grey-700: #5b5b5b; - --color-grey-800: #494949; - --color-grey-900: #333333; - --color-orange-50: #fffbf6; - --color-orange-100: #fde9d2; - --color-orange-200: #fbd9b3; - --color-orange-300: #f9c78f; - --color-orange-400: #f5a344; - --color-orange-500: #d58a35; - --color-orange-600: #a76d2b; - --color-orange-700: #7f5121; - --color-orange-800: #66421a; - --color-orange-900: #3d3309; - --color-purple-50: #fcfbfe; - --color-purple-100: #f0e8fa; - --color-purple-200: #e7d9f6; - --color-purple-300: #ddc9f3; - --color-purple-400: #c8a7eb; - --color-purple-500: #b487e4; - --color-purple-600: #9363c8; - --color-purple-700: #6f4b97; - --color-purple-800: #5a3c7a; - --color-purple-900: #3e2a55; - --color-red-50: #fff7f6; - --color-red-100: #ffe6e4; - --color-red-200: #ffd3d0; - --color-red-300: #ffc1bd; - --color-red-400: #ff9896; - --color-red-500: #ff696f; - --color-red-600: #e33248; - --color-red-700: #a92c37; - --color-red-800: #87262d; - --color-red-900: #5b1f21; - --color-yellow-50: #fefbef; - --color-yellow-100: #fcedae; - --color-yellow-200: #f9de6e; - --color-yellow-300: #f5cd2b; - --color-yellow-400: #d4b226; - --color-yellow-500: #b6981f; - --color-yellow-600: #8f7818; - --color-yellow-700: #6c5a12; - --color-yellow-800: #57490f; - --color-yellow-900: #3d3309; + --color-secondary-50: #f8fcff; + --color-secondary-100: #d9efff; + --color-secondary-200: #bce3ff; + --color-secondary-300: #a0d7ff; + --color-secondary-400: #61bdff; + --color-secondary-500: #30a1f1; + --color-secondary-600: #267fbf; + --color-secondary-700: #1d6091; + --color-secondary-800: #174e74; + --color-secondary-900: #103651; + --color-success-50: #f3fcf5; + --color-success-100: #d1f5db; + --color-success-200: #acecbe; + --color-success-300: #87e3a0; + --color-success-400: #53cb75; + --color-success-500: #47ae64; + --color-success-600: #39884f; + --color-success-700: #2a673b; + --color-success-800: #225230; + --color-success-900: #183921; + --color-neutral-50: #fbfbfb; + --color-neutral-100: #ebebeb; + --color-neutral-200: #dedede; + --color-neutral-300: #d1d1d1; + --color-neutral-400: #b5b5b5; + --color-neutral-500: #9a9a9a; + --color-neutral-600: #797979; + --color-neutral-700: #5b5b5b; + --color-neutral-800: #494949; + --color-neutral-900: #333333; + --color-warning-50: #fffbf6; + --color-warning-100: #fde9d2; + --color-warning-200: #fbd9b3; + --color-warning-300: #f9c78f; + --color-warning-400: #f5a344; + --color-warning-500: #d58a35; + --color-warning-600: #a76d2b; + --color-warning-700: #7f5121; + --color-warning-800: #66421a; + --color-warning-900: #3d3309; + --color-primary-50: #fcfbfe; + --color-primary-100: #f0e8fa; + --color-primary-200: #e7d9f6; + --color-primary-300: #ddc9f3; + --color-primary-400: #c8a7eb; + --color-primary-500: #b487e4; + --color-primary-600: #9363c8; + --color-primary-700: #6f4b97; + --color-primary-800: #5a3c7a; + --color-primary-900: #3e2a55; + --color-error-50: #fff7f6; + --color-error-100: #ffe6e4; + --color-error-200: #ffd3d0; + --color-error-300: #ffc1bd; + --color-error-400: #ff9896; + --color-error-500: #ff696f; + --color-error-600: #e33248; + --color-error-700: #a92c37; + --color-error-800: #87262d; + --color-error-900: #5b1f21; + --color-tertiary-50: #fefbef; + --color-tertiary-100: #fcedae; + --color-tertiary-200: #f9de6e; + --color-tertiary-300: #f5cd2b; + --color-tertiary-400: #d4b226; + --color-tertiary-500: #b6981f; + --color-tertiary-600: #8f7818; + --color-tertiary-700: #6c5a12; + --color-tertiary-800: #57490f; + --color-tertiary-900: #3d3309; --dimensions-0: 0px; --dimensions-1: 1px; --dimensions-2: 2px; @@ -157,117 +157,117 @@ --line-style-solid: solid; /* Alias tokens */ - --border-color-error-light: var(--color-red-300); - --border-color-error-medium: var(--color-red-600); - --border-color-error-strong: var(--color-red-700); - --border-color-error-stronger: var(--color-red-800); - --border-color-neutral-bright: var(--color-grey-50); + --border-color-error-light: var(--color-error-300); + --border-color-error-medium: var(--color-error-600); + --border-color-error-strong: var(--color-error-700); + --border-color-error-stronger: var(--color-error-800); + --border-color-neutral-bright: var(--color-neutral-50); --border-color-neutral-brighter: var(--color-absolutes-white); - --border-color-neutral-dark: var(--color-grey-900); - --border-color-neutral-light: var(--color-grey-300); - --border-color-neutral-lighter: var(--color-grey-200); - --border-color-neutral-lightest: var(--color-grey-100); - --border-color-neutral-medium: var(--color-grey-400); - --border-color-neutral-strong: var(--color-grey-500); - --border-color-neutral-stronger: var(--color-grey-600); - --border-color-neutral-strongest: var(--color-grey-700); - --border-color-primary-light: var(--color-purple-400); - --border-color-primary-lighter: var(--color-purple-300); - --border-color-primary-medium: var(--color-purple-500); - --border-color-primary-strong: var(--color-purple-600); - --border-color-primary-stronger: var(--color-purple-700); - --border-color-secondary-light: var(--color-blue-300); - --border-color-secondary-medium: var(--color-blue-500); - --border-color-secondary-strong: var(--color-blue-600); - --border-color-secondary-stronger: var(--color-blue-700); - --border-color-secondary-strongest: var(--color-blue-800); - --border-color-success-light: var(--color-green-300); - --border-color-success-medium: var(--color-green-600); - --border-color-warning-light: var(--color-orange-300); - --border-color-warning-medium: var(--color-orange-500); + --border-color-neutral-dark: var(--color-neutral-900); + --border-color-neutral-light: var(--color-neutral-300); + --border-color-neutral-lighter: var(--color-neutral-200); + --border-color-neutral-lightest: var(--color-neutral-100); + --border-color-neutral-medium: var(--color-neutral-400); + --border-color-neutral-strong: var(--color-neutral-500); + --border-color-neutral-stronger: var(--color-neutral-600); + --border-color-neutral-strongest: var(--color-neutral-700); + --border-color-primary-light: var(--color-primary-400); + --border-color-primary-lighter: var(--color-primary-300); + --border-color-primary-medium: var(--color-primary-500); + --border-color-primary-strong: var(--color-primary-600); + --border-color-primary-stronger: var(--color-primary-700); + --border-color-secondary-light: var(--color-secondary-300); + --border-color-secondary-medium: var(--color-secondary-500); + --border-color-secondary-strong: var(--color-secondary-600); + --border-color-secondary-stronger: var(--color-secondary-700); + --border-color-secondary-strongest: var(--color-secondary-800); + --border-color-success-light: var(--color-success-300); + --border-color-success-medium: var(--color-success-600); + --border-color-warning-light: var(--color-warning-300); + --border-color-warning-medium: var(--color-warning-500); --color-bg-overlay-dark: var(--color-alpha-800-a); - --color-bg-yellow-light: var(--color-yellow-100); + --color-bg-yellow-light: var(--color-tertiary-100); --color-bg-alpha-light: var(--color-alpha-300-a); --color-bg-alpha-medium: var(--color-alpha-800-a); --color-bg-alpha-strong: var(--color-alpha-900-a); - --color-bg-error-light: var(--color-red-200); - --color-bg-error-lighter: var(--color-red-100); - --color-bg-error-lightest: var(--color-red-50); - --color-bg-error-medium: var(--color-red-300); - --color-bg-error-strong: var(--color-red-600); - --color-bg-error-stronger: var(--color-red-700); - --color-bg-error-strongest: var(--color-red-800); - --color-bg-neutral-light: var(--color-grey-100); - --color-bg-neutral-lighter: var(--color-grey-50); + --color-bg-error-light: var(--color-error-200); + --color-bg-error-lighter: var(--color-error-100); + --color-bg-error-lightest: var(--color-error-50); + --color-bg-error-medium: var(--color-error-300); + --color-bg-error-strong: var(--color-error-600); + --color-bg-error-stronger: var(--color-error-700); + --color-bg-error-strongest: var(--color-error-800); + --color-bg-neutral-light: var(--color-neutral-100); + --color-bg-neutral-lighter: var(--color-neutral-50); --color-bg-neutral-lightest: var(--color-absolutes-white); - --color-bg-neutral-medium: var(--color-grey-200); - --color-bg-neutral-strong: var(--color-grey-300); - --color-bg-neutral-stronger: var(--color-grey-800); - --color-bg-neutral-strongest: var(--color-grey-900); - --color-bg-primary-light: var(--color-purple-200); - --color-bg-primary-lighter: var(--color-purple-100); - --color-bg-primary-lightest: var(--color-purple-50); - --color-bg-primary-medium: var(--color-purple-300); - --color-bg-primary-strong: var(--color-purple-700); - --color-bg-primary-stronger: var(--color-purple-800); - --color-bg-primary-strongest: var(--color-purple-900); - --color-bg-secondary-light: var(--color-blue-200); - --color-bg-secondary-lighter: var(--color-blue-100); - --color-bg-secondary-lightest: var(--color-blue-50); - --color-bg-secondary-medium: var(--color-blue-300); - --color-bg-secondary-strong: var(--color-blue-600); - --color-bg-secondary-stronger: var(--color-blue-700); - --color-bg-secondary-strongest: var(--color-blue-800); - --color-bg-success-light: var(--color-green-200); - --color-bg-success-lighter: var(--color-green-100); - --color-bg-success-lightest: var(--color-green-50); - --color-bg-success-medium: var(--color-green-300); - --color-bg-success-strong: var(--color-green-600); - --color-bg-success-stronger: var(--color-green-700); - --color-bg-success-strongest: var(--color-green-800); - --color-bg-warning-light: var(--color-orange-200); - --color-bg-warning-lighter: var(--color-orange-100); - --color-bg-warning-lightest: var(--color-orange-50); - --color-bg-warning-medium: var(--color-orange-300); - --color-bg-warning-strong: var(--color-orange-500); - --color-bg-warning-stronger: var(--color-orange-600); - --color-bg-warning-strongest: var(--color-orange-700); - --color-fg-error-light: var(--color-red-300); - --color-fg-error-lighter: var(--color-red-200); - --color-fg-error-medium: var(--color-red-600); - --color-fg-error-strong: var(--color-red-700); - --color-fg-error-stronger: var(--color-red-800); + --color-bg-neutral-medium: var(--color-neutral-200); + --color-bg-neutral-strong: var(--color-neutral-300); + --color-bg-neutral-stronger: var(--color-neutral-800); + --color-bg-neutral-strongest: var(--color-neutral-900); + --color-bg-primary-light: var(--color-primary-200); + --color-bg-primary-lighter: var(--color-primary-100); + --color-bg-primary-lightest: var(--color-primary-50); + --color-bg-primary-medium: var(--color-primary-300); + --color-bg-primary-strong: var(--color-primary-700); + --color-bg-primary-stronger: var(--color-primary-800); + --color-bg-primary-strongest: var(--color-primary-900); + --color-bg-secondary-light: var(--color-secondary-200); + --color-bg-secondary-lighter: var(--color-secondary-100); + --color-bg-secondary-lightest: var(--color-secondary-50); + --color-bg-secondary-medium: var(--color-secondary-300); + --color-bg-secondary-strong: var(--color-secondary-600); + --color-bg-secondary-stronger: var(--color-secondary-700); + --color-bg-secondary-strongest: var(--color-secondary-800); + --color-bg-success-light: var(--color-success-200); + --color-bg-success-lighter: var(--color-success-100); + --color-bg-success-lightest: var(--color-success-50); + --color-bg-success-medium: var(--color-success-300); + --color-bg-success-strong: var(--color-success-600); + --color-bg-success-stronger: var(--color-success-700); + --color-bg-success-strongest: var(--color-success-800); + --color-bg-warning-light: var(--color-warning-200); + --color-bg-warning-lighter: var(--color-warning-100); + --color-bg-warning-lightest: var(--color-warning-50); + --color-bg-warning-medium: var(--color-warning-300); + --color-bg-warning-strong: var(--color-warning-500); + --color-bg-warning-stronger: var(--color-warning-600); + --color-bg-warning-strongest: var(--color-warning-700); + --color-fg-error-light: var(--color-error-300); + --color-fg-error-lighter: var(--color-error-200); + --color-fg-error-medium: var(--color-error-600); + --color-fg-error-strong: var(--color-error-700); + --color-fg-error-stronger: var(--color-error-800); --color-fg-neutral-bright: var(--color-absolutes-white); - --color-fg-neutral-dark: var(--color-grey-900); - --color-fg-neutral-light: var(--color-grey-400); - --color-fg-neutral-lighter: var(--color-grey-200); - --color-fg-neutral-lightest: var(--color-grey-100); - --color-fg-neutral-medium: var(--color-grey-500); - --color-fg-neutral-strong: var(--color-grey-600); - --color-fg-neutral-stronger: var(--color-grey-700); - --color-fg-neutral-strongest: var(--color-grey-800); - --color-fg-neutral-yellow-dark: var(--color-yellow-800); - --color-fg-primary-light: var(--color-purple-300); - --color-fg-primary-lighter: var(--color-purple-100); - --color-fg-primary-medium: var(--color-purple-400); - --color-fg-primary-strong: var(--color-purple-700); - --color-fg-primary-stronger: var(--color-purple-800); - --color-fg-primary-strongest: var(--color-purple-900); - --color-fg-secondary-light: var(--color-blue-500); - --color-fg-secondary-lighter: var(--color-blue-300); - --color-fg-secondary-medium: var(--color-blue-600); - --color-fg-secondary-strong: var(--color-blue-700); - --color-fg-secondary-stronger: var(--color-blue-800); - --color-fg-secondary-strongest: var(--color-blue-900); - --color-fg-success-light: var(--color-green-300); - --color-fg-success-lighter: var(--color-green-200); - --color-fg-success-medium: var(--color-green-600); - --color-fg-success-strong: var(--color-green-700); - --color-fg-success-stronger: var(--color-green-800); - --color-fg-warning-light: var(--color-orange-300); - --color-fg-warning-medium: var(--color-orange-500); - --color-fg-warning-strong: var(--color-orange-600); - --color-fg-warning-stronger: var(--color-orange-800); + --color-fg-neutral-dark: var(--color-neutral-900); + --color-fg-neutral-light: var(--color-neutral-400); + --color-fg-neutral-lighter: var(--color-neutral-200); + --color-fg-neutral-lightest: var(--color-neutral-100); + --color-fg-neutral-medium: var(--color-neutral-500); + --color-fg-neutral-strong: var(--color-neutral-600); + --color-fg-neutral-stronger: var(--color-neutral-700); + --color-fg-neutral-strongest: var(--color-neutral-800); + --color-fg-neutral-yellow-dark: var(--color-tertiary-800); + --color-fg-primary-light: var(--color-primary-300); + --color-fg-primary-lighter: var(--color-primary-100); + --color-fg-primary-medium: var(--color-primary-400); + --color-fg-primary-strong: var(--color-primary-700); + --color-fg-primary-stronger: var(--color-primary-800); + --color-fg-primary-strongest: var(--color-primary-900); + --color-fg-secondary-light: var(--color-secondary-500); + --color-fg-secondary-lighter: var(--color-secondary-300); + --color-fg-secondary-medium: var(--color-secondary-600); + --color-fg-secondary-strong: var(--color-secondary-700); + --color-fg-secondary-stronger: var(--color-secondary-800); + --color-fg-secondary-strongest: var(--color-secondary-900); + --color-fg-success-light: var(--color-success-300); + --color-fg-success-lighter: var(--color-success-200); + --color-fg-success-medium: var(--color-success-600); + --color-fg-success-strong: var(--color-success-700); + --color-fg-success-stronger: var(--color-success-800); + --color-fg-warning-light: var(--color-warning-300); + --color-fg-warning-medium: var(--color-warning-500); + --color-fg-warning-strong: var(--color-warning-600); + --color-fg-warning-stronger: var(--color-warning-800); --shadow-dark: var(--color-alpha-400-a); --shadow-light: var(--color-alpha-300-a); --border-radius-none: var(--dimensions-0); From a85bd835f34ca074699200f1d4939168ab2c5b11 Mon Sep 17 00:00:00 2001 From: Jialecl <jialestrabajos@gmail.com> Date: Mon, 4 Aug 2025 11:00:17 +0200 Subject: [PATCH 02/12] fixed SyntaxError: Invalid left-hand side in assignment error --- packages/lib/src/HalstackContext.tsx | 367 ++++++++++++++++++++++++++- 1 file changed, 366 insertions(+), 1 deletion(-) diff --git a/packages/lib/src/HalstackContext.tsx b/packages/lib/src/HalstackContext.tsx index abb4aa6e7..9c326b92b 100644 --- a/packages/lib/src/HalstackContext.tsx +++ b/packages/lib/src/HalstackContext.tsx @@ -2,7 +2,372 @@ import { createContext, ReactNode, useMemo } from "react"; import { AdvancedTheme, componentTokens, TranslatedLabels, defaultTranslatedComponentLabels } from "./common/variables"; import styled from "@emotion/styled"; import { css } from "@emotion/react"; -import { aliasTokens, coreTokens } from "./styles/tokens"; + +const coreTokens = { + /**************/ + /** POSITION **/ + /**************/ + + /* Application Layout */ + "--z-app-layout-header": 100, + "--z-app-layout-sidenav": 110, + + /* Header */ + "--z-header-overlay": 200, + "--z-header-menu": 210, + + /* UI components */ + "--z-date-input": 300, + "--z-dropdown": 310, + "--z-textinput": 320, + "--z-select": 330, + + /* Modals and overlays */ + "--z-spinner-overlay": 400, + "--z-progressbar-overlay": 410, + "--z-dialog": 420, + "--z-alert": 430, + + /* Notifications */ + "--z-toast": 500, + + /* Tooltip (topmost) */ + "--z-tooltip": 600, + + /************/ + /** TOKENS **/ + /************/ + "--color-absolutes-black": "#000000", + "--color-absolutes-white": "#ffffff", + "--color-alpha-100-a": "#ebebeb1a", + "--color-alpha-200-a": "#dedede33", + "--color-alpha-300-a": "#d1d1d14d", + "--color-alpha-400-a": "#b5b5b566", + "--color-alpha-500-a": "#9a9a9a80", + "--color-alpha-600-a": "#79797999", + "--color-alpha-700-a": "#5b5b5bb2", + "--color-alpha-800-a": "#494949cc", + "--color-alpha-900-a": "#333333e5", + "--color-secondary-50": "#f8fcff", + "--color-secondary-100": "#d9efff", + "--color-secondary-200": "#bce3ff", + "--color-secondary-300": "#a0d7ff", + "--color-secondary-400": "#61bdff", + "--color-secondary-500": "#30a1f1", + "--color-secondary-600": "#267fbf", + "--color-secondary-700": "#1d6091", + "--color-secondary-800": "#174e74", + "--color-secondary-900": "#103651", + "--color-success-50": "#f3fcf5", + "--color-success-100": "#d1f5db", + "--color-success-200": "#acecbe", + "--color-success-300": "#87e3a0", + "--color-success-400": "#53cb75", + "--color-success-500": "#47ae64", + "--color-success-600": "#39884f", + "--color-success-700": "#2a673b", + "--color-success-800": "#225230", + "--color-success-900": "#183921", + "--color-neutral-50": "#fbfbfb", + "--color-neutral-100": "#ebebeb", + "--color-neutral-200": "#dedede", + "--color-neutral-300": "#d1d1d1", + "--color-neutral-400": "#b5b5b5", + "--color-neutral-500": "#9a9a9a", + "--color-neutral-600": "#797979", + "--color-neutral-700": "#5b5b5b", + "--color-neutral-800": "#494949", + "--color-neutral-900": "#333333", + "--color-warning-50": "#fffbf6", + "--color-warning-100": "#fde9d2", + "--color-warning-200": "#fbd9b3", + "--color-warning-300": "#f9c78f", + "--color-warning-400": "#f5a344", + "--color-warning-500": "#d58a35", + "--color-warning-600": "#a76d2b", + "--color-warning-700": "#7f5121", + "--color-warning-800": "#66421a", + "--color-warning-900": "#3d3309", + "--color-primary-50": "#fcfbfe", + "--color-primary-100": "#f0e8fa", + "--color-primary-200": "#e7d9f6", + "--color-primary-300": "#ddc9f3", + "--color-primary-400": "#c8a7eb", + "--color-primary-500": "#b487e4", + "--color-primary-600": "#9363c8", + "--color-primary-700": "#6f4b97", + "--color-primary-800": "#5a3c7a", + "--color-primary-900": "#3e2a55", + "--color-error-50": "#fff7f6", + "--color-error-100": "#ffe6e4", + "--color-error-200": "#ffd3d0", + "--color-error-300": "#ffc1bd", + "--color-error-400": "#ff9896", + "--color-error-500": "#ff696f", + "--color-error-600": "#e33248", + "--color-error-700": "#a92c37", + "--color-error-800": "#87262d", + "--color-error-900": "#5b1f21", + "--color-tertiary-50": "#fefbef", + "--color-tertiary-100": "#fcedae", + "--color-tertiary-200": "#f9de6e", + "--color-tertiary-300": "#f5cd2b", + "--color-tertiary-400": "#d4b226", + "--color-tertiary-500": "#b6981f", + "--color-tertiary-600": "#8f7818", + "--color-tertiary-700": "#6c5a12", + "--color-tertiary-800": "#57490f", + "--color-tertiary-900": "#3d3309", + "--dimensions-0": "0px", + "--dimensions-1": "1px", + "--dimensions-2": "2px", + "--dimensions-4": "4px", + "--dimensions-8": "8px", + "--dimensions-12": "12px", + "--dimensions-16": "16px", + "--dimensions-20": "20px", + "--dimensions-24": "24px", + "--dimensions-28": "28px", + "--dimensions-32": "32px", + "--dimensions-36": "36px", + "--dimensions-40": "40px", + "--dimensions-44": "44px", + "--dimensions-48": "48px", + "--dimensions-56": "56px", + "--dimensions-64": "64px", + "--dimensions-72": "72px", + "--dimensions-80": "80px", + "--dimensions-96": "96px", + "--font-size-12": "12px", + "--font-size-14": "14px", + "--font-size-16": "16px", + "--font-size-18": "18px", + "--font-size-20": "20px", + "--font-size-24": "24px", + "--font-size-32": "32px", + "--font-size-40": "40px", + "--font-size-48": "48px", + "--font-size-60": "60px", + "--font-weight-light": "300", + "--font-weight-regular": "400", + "--font-weight-semibold": "600", + "--font-weight-bold": "700", + "--font-family-mono": "Source Code Pro, mono", + "--font-family-sans": "Open Sans, sans-serif", + "--font-style-lightitalic": "light italic", + "--font-style-normal": "normal", + "--line-style-dashed": "dashed", + "--line-style-solid": "solid", +}; + +export const aliasTokens = { + "--border-color-error-light": "var(--color-error-300)", + "--border-color-error-medium": "var(--color-error-600)", + "--border-color-error-strong": "var(--color-error-700)", + "--border-color-error-stronger": "var(--color-error-800)", + "--border-color-neutral-bright": "var(--color-neutral-50)", + "--border-color-neutral-brighter": "var(--color-absolutes-white)", + "--border-color-neutral-dark": "var(--color-neutral-900)", + "--border-color-neutral-light": "var(--color-neutral-300)", + "--border-color-neutral-lighter": "var(--color-neutral-200)", + "--border-color-neutral-lightest": "var(--color-neutral-100)", + "--border-color-neutral-medium": "var(--color-neutral-400)", + "--border-color-neutral-strong": "var(--color-neutral-500)", + "--border-color-neutral-stronger": "var(--color-neutral-600)", + "--border-color-neutral-strongest": "var(--color-neutral-700)", + "--border-color-primary-light": "var(--color-primary-400)", + "--border-color-primary-lighter": "var(--color-primary-300)", + "--border-color-primary-medium": "var(--color-primary-500)", + "--border-color-primary-strong": "var(--color-primary-600)", + "--border-color-primary-stronger": "var(--color-primary-700)", + "--border-color-secondary-light": "var(--color-secondary-300)", + "--border-color-secondary-medium": "var(--color-secondary-500)", + "--border-color-secondary-strong": "var(--color-secondary-600)", + "--border-color-secondary-stronger": "var(--color-secondary-700)", + "--border-color-secondary-strongest": "var(--color-secondary-800)", + "--border-color-success-light": "var(--color-success-300)", + "--border-color-success-medium": "var(--color-success-600)", + "--border-color-warning-light": "var(--color-warning-300)", + "--border-color-warning-medium": "var(--color-warning-500)", + "--color-bg-overlay-dark": "var(--color-alpha-800-a)", + "--color-bg-yellow-light": "var(--color-tertiary-100)", + "--color-bg-alpha-light": "var(--color-alpha-300-a)", + "--color-bg-alpha-medium": "var(--color-alpha-800-a)", + "--color-bg-alpha-strong": "var(--color-alpha-900-a)", + "--color-bg-error-light": "var(--color-error-200)", + "--color-bg-error-lighter": "var(--color-error-100)", + "--color-bg-error-lightest": "var(--color-error-50)", + "--color-bg-error-medium": "var(--color-error-300)", + "--color-bg-error-strong": "var(--color-error-600)", + "--color-bg-error-stronger": "var(--color-error-700)", + "--color-bg-error-strongest": "var(--color-error-800)", + "--color-bg-neutral-light": "var(--color-neutral-100)", + "--color-bg-neutral-lighter": "var(--color-neutral-50)", + "--color-bg-neutral-lightest": "var(--color-absolutes-white)", + "--color-bg-neutral-medium": "var(--color-neutral-200)", + "--color-bg-neutral-strong": "var(--color-neutral-300)", + "--color-bg-neutral-stronger": "var(--color-neutral-800)", + "--color-bg-neutral-strongest": "var(--color-neutral-900)", + "--color-bg-primary-light": "var(--color-primary-200)", + "--color-bg-primary-lighter": "var(--color-primary-100)", + "--color-bg-primary-lightest": "var(--color-primary-50)", + "--color-bg-primary-medium": "var(--color-primary-300)", + "--color-bg-primary-strong": "var(--color-primary-700)", + "--color-bg-primary-stronger": "var(--color-primary-800)", + "--color-bg-primary-strongest": "var(--color-primary-900)", + "--color-bg-secondary-light": "var(--color-secondary-200)", + "--color-bg-secondary-lighter": "var(--color-secondary-100)", + "--color-bg-secondary-lightest": "var(--color-secondary-50)", + "--color-bg-secondary-medium": "var(--color-secondary-300)", + "--color-bg-secondary-strong": "var(--color-secondary-600)", + "--color-bg-secondary-stronger": "var(--color-secondary-700)", + "--color-bg-secondary-strongest": "var(--color-secondary-800)", + "--color-bg-success-light": "var(--color-success-200)", + "--color-bg-success-lighter": "var(--color-success-100)", + "--color-bg-success-lightest": "var(--color-success-50)", + "--color-bg-success-medium": "var(--color-success-300)", + "--color-bg-success-strong": "var(--color-success-600)", + "--color-bg-success-stronger": "var(--color-success-700)", + "--color-bg-success-strongest": "var(--color-success-800)", + "--color-bg-warning-light": "var(--color-warning-200)", + "--color-bg-warning-lighter": "var(--color-warning-100)", + "--color-bg-warning-lightest": "var(--color-warning-50)", + "--color-bg-warning-medium": "var(--color-warning-300)", + "--color-bg-warning-strong": "var(--color-warning-500)", + "--color-bg-warning-stronger": "var(--color-warning-600)", + "--color-bg-warning-strongest": "var(--color-warning-700)", + "--color-fg-error-light": "var(--color-error-300)", + "--color-fg-error-lighter": "var(--color-error-200)", + "--color-fg-error-medium": "var(--color-error-600)", + "--color-fg-error-strong": "var(--color-error-700)", + "--color-fg-error-stronger": "var(--color-error-800)", + "--color-fg-neutral-bright": "var(--color-absolutes-white)", + "--color-fg-neutral-dark": "var(--color-neutral-900)", + "--color-fg-neutral-light": "var(--color-neutral-400)", + "--color-fg-neutral-lighter": "var(--color-neutral-200)", + "--color-fg-neutral-lightest": "var(--color-neutral-100)", + "--color-fg-neutral-medium": "var(--color-neutral-500)", + "--color-fg-neutral-strong": "var(--color-neutral-600)", + "--color-fg-neutral-stronger": "var(--color-neutral-700)", + "--color-fg-neutral-strongest": "var(--color-neutral-800)", + "--color-fg-neutral-yellow-dark": "var(--color-tertiary-800)", + "--color-fg-primary-light": "var(--color-primary-300)", + "--color-fg-primary-lighter": "var(--color-primary-100)", + "--color-fg-primary-medium": "var(--color-primary-400)", + "--color-fg-primary-strong": "var(--color-primary-700)", + "--color-fg-primary-stronger": "var(--color-primary-800)", + "--color-fg-primary-strongest": "var(--color-primary-900)", + "--color-fg-secondary-light": "var(--color-secondary-500)", + "--color-fg-secondary-lighter": "var(--color-secondary-300)", + "--color-fg-secondary-medium": "var(--color-secondary-600)", + "--color-fg-secondary-strong": "var(--color-secondary-700)", + "--color-fg-secondary-stronger": "var(--color-secondary-800)", + "--color-fg-secondary-strongest": "var(--color-secondary-900)", + "--color-fg-success-light": "var(--color-success-300)", + "--color-fg-success-lighter": "var(--color-success-200)", + "--color-fg-success-medium": "var(--color-success-600)", + "--color-fg-success-strong": "var(--color-success-700)", + "--color-fg-success-stronger": "var(--color-success-800)", + "--color-fg-warning-light": "var(--color-warning-300)", + "--color-fg-warning-medium": "var(--color-warning-500)", + "--color-fg-warning-strong": "var(--color-warning-600)", + "--color-fg-warning-stronger": "var(--color-warning-800)", + "--shadow-dark": "var(--color-alpha-400-a)", + "--shadow-light": "var(--color-alpha-300-a)", + "--border-radius-none": "var(--dimensions-0)", + "--border-radius-xs": "var(--dimensions-2)", + "--border-radius-s": "var(--dimensions-4)", + "--border-radius-m": "var(--dimensions-8)", + "--border-radius-l": "var(--dimensions-16)", + "--border-radius-xl": "var(--dimensions-24)", + "--border-width-none": "var(--dimensions-0)", + "--border-width-s": "var(--dimensions-1)", + "--border-width-m": "var(--dimensions-2)", + "--border-width-l": "var(--dimensions-4)", + "--height-xxxs": "var(--dimensions-12)", + "--height-xxs": "var(--dimensions-16)", + "--height-xs": "var(--dimensions-20)", + "--height-s": "var(--dimensions-24)", + "--height-m": "var(--dimensions-32)", + "--height-l": "var(--dimensions-36)", + "--height-xl": "var(--dimensions-40)", + "--height-xxl": "var(--dimensions-48)", + "--height-xxxl": "var(--dimensions-56)", + "--shadow-high-spread": "var(--dimensions-0)", + "--shadow-high-x-position": "var(--dimensions-0)", + "--shadow-high-blur": "var(--dimensions-24)", + "--shadow-high-y-position": "var(--dimensions-24)", + "--shadow-higher-spread": "var(--dimensions-0)", + "--shadow-higher-x-position": "var(--dimensions-0)", + "--shadow-higher-blur": "var(--dimensions-48)", + "--shadow-higher-y-position": "var(--dimensions-48)", + "--shadow-low-spread": "var(--dimensions-0)", + "--shadow-low-x-position": "var(--dimensions-0)", + "--shadow-low-blur": "var(--dimensions-2)", + "--shadow-low-y-position": "var(--dimensions-2)", + "--shadow-mid-spread": "var(--dimensions-0)", + "--shadow-mid-x-position": "var(--dimensions-0)", + "--shadow-mid-blur": "var(--dimensions-12)", + "--shadow-mid-y-position": "var(--dimensions-12)", + "--spacing-gap-none": "var(--dimensions-0)", + "--spacing-gap-xxs": "var(--dimensions-2)", + "--spacing-gap-xs": "var(--dimensions-4)", + "--spacing-gap-s": "var(--dimensions-8)", + "--spacing-gap-m": "var(--dimensions-12)", + "--spacing-gap-ml": "var(--dimensions-16)", + "--spacing-gap-l": "var(--dimensions-24)", + "--spacing-gap-xl": "var(--dimensions-32)", + "--spacing-gap-xxl": "var(--dimensions-48)", + "--spacing-padding-none": "var(--dimensions-0)", + "--spacing-padding-xxxs": "var(--dimensions-2)", + "--spacing-padding-xxs": "var(--dimensions-4)", + "--spacing-padding-xs": "var(--dimensions-8)", + "--spacing-padding-s": "var(--dimensions-12)", + "--spacing-padding-m": "var(--dimensions-16)", + "--spacing-padding-ml": "var(--dimensions-20)", + "--spacing-padding-l": "var(--dimensions-24)", + "--spacing-padding-xl": "var(--dimensions-32)", + "--spacing-padding-xxl": "var(--dimensions-40)", + "--typography-body-xs": "var(--font-size-12)", + "--typography-body-s": "var(--font-size-14)", + "--typography-body-m": "var(--font-size-16)", + "--typography-body-l": "var(--font-size-18)", + "--typography-body-xl": "var(--font-size-20)", + "--typography-body-xxl": "var(--font-size-24)", + "--typography-body-regular": "var(--font-weight-regular)", + "--typography-heading-xs": "var(--font-size-12)", + "--typography-heading-s": "var(--font-size-16)", + "--typography-heading-m": "var(--font-size-20)", + "--typography-heading-l": "var(--font-size-24)", + "--typography-heading-xl": "var(--font-size-32)", + "--typography-heading-xxl": "var(--font-size-40)", + "--typography-heading-light": "var(--font-weight-light)", + "--typography-heading-regular": "var(--font-weight-regular)", + "--typography-heading-semibold": "var(--font-weight-semibold)", + "--typography-helper-text-s": "var(--font-size-12)", + "--typography-helper-text-m": "var(--font-size-14)", + "--typography-helper-text-l": "var(--font-size-16)", + "--typography-helper-text-light": "var(--font-weight-light)", + "--typography-helper-text-regular": "var(--font-weight-regular)", + "--typography-helper-text-semibold": "var(--font-weight-semibold)", + "--typography-label-s": "var(--font-size-12)", + "--typography-label-m": "var(--font-size-14)", + "--typography-label-l": "var(--font-size-16)", + "--typography-label-xl": "var(--font-size-20)", + "--typography-label-regular": "var(--font-weight-regular)", + "--typography-label-semibold": "var(--font-weight-semibold)", + "--typography-link-m": "var(--font-size-14)", + "--typography-link-regular": "var(--font-weight-regular)", + "--typography-title-s": "var(--font-size-14)", + "--typography-title-m": "var(--font-size-16)", + "--typography-title-l": "var(--font-size-20)", + "--typography-title-xl": "var(--font-size-24)", + "--typography-title-bold": "var(--font-weight-bold)", + "--border-style-default": "var(--line-style-solid)", + "--border-style-outline": "var(--line-style-dashed)", + "--typography-font-family": "var(--font-family-sans)", + "--typography-helper-text-italic": "var(--font-style-lightitalic)", +}; /** * This type is used to allow partial themes and labels objects to be passed to the HalstackProvider. From f38bda60eaa95962f290d7368b59c8069e34bc80 Mon Sep 17 00:00:00 2001 From: Jialecl <jialestrabajos@gmail.com> Date: Fri, 8 Aug 2025 13:32:34 +0200 Subject: [PATCH 03/12] Typin error fixed --- packages/lib/src/HalstackContext.tsx | 382 +-------------------- packages/lib/src/button/Button.stories.tsx | 2 +- packages/lib/src/styles/tokens.tsx | 4 +- 3 files changed, 12 insertions(+), 376 deletions(-) diff --git a/packages/lib/src/HalstackContext.tsx b/packages/lib/src/HalstackContext.tsx index 9c326b92b..f083cb684 100644 --- a/packages/lib/src/HalstackContext.tsx +++ b/packages/lib/src/HalstackContext.tsx @@ -2,372 +2,7 @@ import { createContext, ReactNode, useMemo } from "react"; import { AdvancedTheme, componentTokens, TranslatedLabels, defaultTranslatedComponentLabels } from "./common/variables"; import styled from "@emotion/styled"; import { css } from "@emotion/react"; - -const coreTokens = { - /**************/ - /** POSITION **/ - /**************/ - - /* Application Layout */ - "--z-app-layout-header": 100, - "--z-app-layout-sidenav": 110, - - /* Header */ - "--z-header-overlay": 200, - "--z-header-menu": 210, - - /* UI components */ - "--z-date-input": 300, - "--z-dropdown": 310, - "--z-textinput": 320, - "--z-select": 330, - - /* Modals and overlays */ - "--z-spinner-overlay": 400, - "--z-progressbar-overlay": 410, - "--z-dialog": 420, - "--z-alert": 430, - - /* Notifications */ - "--z-toast": 500, - - /* Tooltip (topmost) */ - "--z-tooltip": 600, - - /************/ - /** TOKENS **/ - /************/ - "--color-absolutes-black": "#000000", - "--color-absolutes-white": "#ffffff", - "--color-alpha-100-a": "#ebebeb1a", - "--color-alpha-200-a": "#dedede33", - "--color-alpha-300-a": "#d1d1d14d", - "--color-alpha-400-a": "#b5b5b566", - "--color-alpha-500-a": "#9a9a9a80", - "--color-alpha-600-a": "#79797999", - "--color-alpha-700-a": "#5b5b5bb2", - "--color-alpha-800-a": "#494949cc", - "--color-alpha-900-a": "#333333e5", - "--color-secondary-50": "#f8fcff", - "--color-secondary-100": "#d9efff", - "--color-secondary-200": "#bce3ff", - "--color-secondary-300": "#a0d7ff", - "--color-secondary-400": "#61bdff", - "--color-secondary-500": "#30a1f1", - "--color-secondary-600": "#267fbf", - "--color-secondary-700": "#1d6091", - "--color-secondary-800": "#174e74", - "--color-secondary-900": "#103651", - "--color-success-50": "#f3fcf5", - "--color-success-100": "#d1f5db", - "--color-success-200": "#acecbe", - "--color-success-300": "#87e3a0", - "--color-success-400": "#53cb75", - "--color-success-500": "#47ae64", - "--color-success-600": "#39884f", - "--color-success-700": "#2a673b", - "--color-success-800": "#225230", - "--color-success-900": "#183921", - "--color-neutral-50": "#fbfbfb", - "--color-neutral-100": "#ebebeb", - "--color-neutral-200": "#dedede", - "--color-neutral-300": "#d1d1d1", - "--color-neutral-400": "#b5b5b5", - "--color-neutral-500": "#9a9a9a", - "--color-neutral-600": "#797979", - "--color-neutral-700": "#5b5b5b", - "--color-neutral-800": "#494949", - "--color-neutral-900": "#333333", - "--color-warning-50": "#fffbf6", - "--color-warning-100": "#fde9d2", - "--color-warning-200": "#fbd9b3", - "--color-warning-300": "#f9c78f", - "--color-warning-400": "#f5a344", - "--color-warning-500": "#d58a35", - "--color-warning-600": "#a76d2b", - "--color-warning-700": "#7f5121", - "--color-warning-800": "#66421a", - "--color-warning-900": "#3d3309", - "--color-primary-50": "#fcfbfe", - "--color-primary-100": "#f0e8fa", - "--color-primary-200": "#e7d9f6", - "--color-primary-300": "#ddc9f3", - "--color-primary-400": "#c8a7eb", - "--color-primary-500": "#b487e4", - "--color-primary-600": "#9363c8", - "--color-primary-700": "#6f4b97", - "--color-primary-800": "#5a3c7a", - "--color-primary-900": "#3e2a55", - "--color-error-50": "#fff7f6", - "--color-error-100": "#ffe6e4", - "--color-error-200": "#ffd3d0", - "--color-error-300": "#ffc1bd", - "--color-error-400": "#ff9896", - "--color-error-500": "#ff696f", - "--color-error-600": "#e33248", - "--color-error-700": "#a92c37", - "--color-error-800": "#87262d", - "--color-error-900": "#5b1f21", - "--color-tertiary-50": "#fefbef", - "--color-tertiary-100": "#fcedae", - "--color-tertiary-200": "#f9de6e", - "--color-tertiary-300": "#f5cd2b", - "--color-tertiary-400": "#d4b226", - "--color-tertiary-500": "#b6981f", - "--color-tertiary-600": "#8f7818", - "--color-tertiary-700": "#6c5a12", - "--color-tertiary-800": "#57490f", - "--color-tertiary-900": "#3d3309", - "--dimensions-0": "0px", - "--dimensions-1": "1px", - "--dimensions-2": "2px", - "--dimensions-4": "4px", - "--dimensions-8": "8px", - "--dimensions-12": "12px", - "--dimensions-16": "16px", - "--dimensions-20": "20px", - "--dimensions-24": "24px", - "--dimensions-28": "28px", - "--dimensions-32": "32px", - "--dimensions-36": "36px", - "--dimensions-40": "40px", - "--dimensions-44": "44px", - "--dimensions-48": "48px", - "--dimensions-56": "56px", - "--dimensions-64": "64px", - "--dimensions-72": "72px", - "--dimensions-80": "80px", - "--dimensions-96": "96px", - "--font-size-12": "12px", - "--font-size-14": "14px", - "--font-size-16": "16px", - "--font-size-18": "18px", - "--font-size-20": "20px", - "--font-size-24": "24px", - "--font-size-32": "32px", - "--font-size-40": "40px", - "--font-size-48": "48px", - "--font-size-60": "60px", - "--font-weight-light": "300", - "--font-weight-regular": "400", - "--font-weight-semibold": "600", - "--font-weight-bold": "700", - "--font-family-mono": "Source Code Pro, mono", - "--font-family-sans": "Open Sans, sans-serif", - "--font-style-lightitalic": "light italic", - "--font-style-normal": "normal", - "--line-style-dashed": "dashed", - "--line-style-solid": "solid", -}; - -export const aliasTokens = { - "--border-color-error-light": "var(--color-error-300)", - "--border-color-error-medium": "var(--color-error-600)", - "--border-color-error-strong": "var(--color-error-700)", - "--border-color-error-stronger": "var(--color-error-800)", - "--border-color-neutral-bright": "var(--color-neutral-50)", - "--border-color-neutral-brighter": "var(--color-absolutes-white)", - "--border-color-neutral-dark": "var(--color-neutral-900)", - "--border-color-neutral-light": "var(--color-neutral-300)", - "--border-color-neutral-lighter": "var(--color-neutral-200)", - "--border-color-neutral-lightest": "var(--color-neutral-100)", - "--border-color-neutral-medium": "var(--color-neutral-400)", - "--border-color-neutral-strong": "var(--color-neutral-500)", - "--border-color-neutral-stronger": "var(--color-neutral-600)", - "--border-color-neutral-strongest": "var(--color-neutral-700)", - "--border-color-primary-light": "var(--color-primary-400)", - "--border-color-primary-lighter": "var(--color-primary-300)", - "--border-color-primary-medium": "var(--color-primary-500)", - "--border-color-primary-strong": "var(--color-primary-600)", - "--border-color-primary-stronger": "var(--color-primary-700)", - "--border-color-secondary-light": "var(--color-secondary-300)", - "--border-color-secondary-medium": "var(--color-secondary-500)", - "--border-color-secondary-strong": "var(--color-secondary-600)", - "--border-color-secondary-stronger": "var(--color-secondary-700)", - "--border-color-secondary-strongest": "var(--color-secondary-800)", - "--border-color-success-light": "var(--color-success-300)", - "--border-color-success-medium": "var(--color-success-600)", - "--border-color-warning-light": "var(--color-warning-300)", - "--border-color-warning-medium": "var(--color-warning-500)", - "--color-bg-overlay-dark": "var(--color-alpha-800-a)", - "--color-bg-yellow-light": "var(--color-tertiary-100)", - "--color-bg-alpha-light": "var(--color-alpha-300-a)", - "--color-bg-alpha-medium": "var(--color-alpha-800-a)", - "--color-bg-alpha-strong": "var(--color-alpha-900-a)", - "--color-bg-error-light": "var(--color-error-200)", - "--color-bg-error-lighter": "var(--color-error-100)", - "--color-bg-error-lightest": "var(--color-error-50)", - "--color-bg-error-medium": "var(--color-error-300)", - "--color-bg-error-strong": "var(--color-error-600)", - "--color-bg-error-stronger": "var(--color-error-700)", - "--color-bg-error-strongest": "var(--color-error-800)", - "--color-bg-neutral-light": "var(--color-neutral-100)", - "--color-bg-neutral-lighter": "var(--color-neutral-50)", - "--color-bg-neutral-lightest": "var(--color-absolutes-white)", - "--color-bg-neutral-medium": "var(--color-neutral-200)", - "--color-bg-neutral-strong": "var(--color-neutral-300)", - "--color-bg-neutral-stronger": "var(--color-neutral-800)", - "--color-bg-neutral-strongest": "var(--color-neutral-900)", - "--color-bg-primary-light": "var(--color-primary-200)", - "--color-bg-primary-lighter": "var(--color-primary-100)", - "--color-bg-primary-lightest": "var(--color-primary-50)", - "--color-bg-primary-medium": "var(--color-primary-300)", - "--color-bg-primary-strong": "var(--color-primary-700)", - "--color-bg-primary-stronger": "var(--color-primary-800)", - "--color-bg-primary-strongest": "var(--color-primary-900)", - "--color-bg-secondary-light": "var(--color-secondary-200)", - "--color-bg-secondary-lighter": "var(--color-secondary-100)", - "--color-bg-secondary-lightest": "var(--color-secondary-50)", - "--color-bg-secondary-medium": "var(--color-secondary-300)", - "--color-bg-secondary-strong": "var(--color-secondary-600)", - "--color-bg-secondary-stronger": "var(--color-secondary-700)", - "--color-bg-secondary-strongest": "var(--color-secondary-800)", - "--color-bg-success-light": "var(--color-success-200)", - "--color-bg-success-lighter": "var(--color-success-100)", - "--color-bg-success-lightest": "var(--color-success-50)", - "--color-bg-success-medium": "var(--color-success-300)", - "--color-bg-success-strong": "var(--color-success-600)", - "--color-bg-success-stronger": "var(--color-success-700)", - "--color-bg-success-strongest": "var(--color-success-800)", - "--color-bg-warning-light": "var(--color-warning-200)", - "--color-bg-warning-lighter": "var(--color-warning-100)", - "--color-bg-warning-lightest": "var(--color-warning-50)", - "--color-bg-warning-medium": "var(--color-warning-300)", - "--color-bg-warning-strong": "var(--color-warning-500)", - "--color-bg-warning-stronger": "var(--color-warning-600)", - "--color-bg-warning-strongest": "var(--color-warning-700)", - "--color-fg-error-light": "var(--color-error-300)", - "--color-fg-error-lighter": "var(--color-error-200)", - "--color-fg-error-medium": "var(--color-error-600)", - "--color-fg-error-strong": "var(--color-error-700)", - "--color-fg-error-stronger": "var(--color-error-800)", - "--color-fg-neutral-bright": "var(--color-absolutes-white)", - "--color-fg-neutral-dark": "var(--color-neutral-900)", - "--color-fg-neutral-light": "var(--color-neutral-400)", - "--color-fg-neutral-lighter": "var(--color-neutral-200)", - "--color-fg-neutral-lightest": "var(--color-neutral-100)", - "--color-fg-neutral-medium": "var(--color-neutral-500)", - "--color-fg-neutral-strong": "var(--color-neutral-600)", - "--color-fg-neutral-stronger": "var(--color-neutral-700)", - "--color-fg-neutral-strongest": "var(--color-neutral-800)", - "--color-fg-neutral-yellow-dark": "var(--color-tertiary-800)", - "--color-fg-primary-light": "var(--color-primary-300)", - "--color-fg-primary-lighter": "var(--color-primary-100)", - "--color-fg-primary-medium": "var(--color-primary-400)", - "--color-fg-primary-strong": "var(--color-primary-700)", - "--color-fg-primary-stronger": "var(--color-primary-800)", - "--color-fg-primary-strongest": "var(--color-primary-900)", - "--color-fg-secondary-light": "var(--color-secondary-500)", - "--color-fg-secondary-lighter": "var(--color-secondary-300)", - "--color-fg-secondary-medium": "var(--color-secondary-600)", - "--color-fg-secondary-strong": "var(--color-secondary-700)", - "--color-fg-secondary-stronger": "var(--color-secondary-800)", - "--color-fg-secondary-strongest": "var(--color-secondary-900)", - "--color-fg-success-light": "var(--color-success-300)", - "--color-fg-success-lighter": "var(--color-success-200)", - "--color-fg-success-medium": "var(--color-success-600)", - "--color-fg-success-strong": "var(--color-success-700)", - "--color-fg-success-stronger": "var(--color-success-800)", - "--color-fg-warning-light": "var(--color-warning-300)", - "--color-fg-warning-medium": "var(--color-warning-500)", - "--color-fg-warning-strong": "var(--color-warning-600)", - "--color-fg-warning-stronger": "var(--color-warning-800)", - "--shadow-dark": "var(--color-alpha-400-a)", - "--shadow-light": "var(--color-alpha-300-a)", - "--border-radius-none": "var(--dimensions-0)", - "--border-radius-xs": "var(--dimensions-2)", - "--border-radius-s": "var(--dimensions-4)", - "--border-radius-m": "var(--dimensions-8)", - "--border-radius-l": "var(--dimensions-16)", - "--border-radius-xl": "var(--dimensions-24)", - "--border-width-none": "var(--dimensions-0)", - "--border-width-s": "var(--dimensions-1)", - "--border-width-m": "var(--dimensions-2)", - "--border-width-l": "var(--dimensions-4)", - "--height-xxxs": "var(--dimensions-12)", - "--height-xxs": "var(--dimensions-16)", - "--height-xs": "var(--dimensions-20)", - "--height-s": "var(--dimensions-24)", - "--height-m": "var(--dimensions-32)", - "--height-l": "var(--dimensions-36)", - "--height-xl": "var(--dimensions-40)", - "--height-xxl": "var(--dimensions-48)", - "--height-xxxl": "var(--dimensions-56)", - "--shadow-high-spread": "var(--dimensions-0)", - "--shadow-high-x-position": "var(--dimensions-0)", - "--shadow-high-blur": "var(--dimensions-24)", - "--shadow-high-y-position": "var(--dimensions-24)", - "--shadow-higher-spread": "var(--dimensions-0)", - "--shadow-higher-x-position": "var(--dimensions-0)", - "--shadow-higher-blur": "var(--dimensions-48)", - "--shadow-higher-y-position": "var(--dimensions-48)", - "--shadow-low-spread": "var(--dimensions-0)", - "--shadow-low-x-position": "var(--dimensions-0)", - "--shadow-low-blur": "var(--dimensions-2)", - "--shadow-low-y-position": "var(--dimensions-2)", - "--shadow-mid-spread": "var(--dimensions-0)", - "--shadow-mid-x-position": "var(--dimensions-0)", - "--shadow-mid-blur": "var(--dimensions-12)", - "--shadow-mid-y-position": "var(--dimensions-12)", - "--spacing-gap-none": "var(--dimensions-0)", - "--spacing-gap-xxs": "var(--dimensions-2)", - "--spacing-gap-xs": "var(--dimensions-4)", - "--spacing-gap-s": "var(--dimensions-8)", - "--spacing-gap-m": "var(--dimensions-12)", - "--spacing-gap-ml": "var(--dimensions-16)", - "--spacing-gap-l": "var(--dimensions-24)", - "--spacing-gap-xl": "var(--dimensions-32)", - "--spacing-gap-xxl": "var(--dimensions-48)", - "--spacing-padding-none": "var(--dimensions-0)", - "--spacing-padding-xxxs": "var(--dimensions-2)", - "--spacing-padding-xxs": "var(--dimensions-4)", - "--spacing-padding-xs": "var(--dimensions-8)", - "--spacing-padding-s": "var(--dimensions-12)", - "--spacing-padding-m": "var(--dimensions-16)", - "--spacing-padding-ml": "var(--dimensions-20)", - "--spacing-padding-l": "var(--dimensions-24)", - "--spacing-padding-xl": "var(--dimensions-32)", - "--spacing-padding-xxl": "var(--dimensions-40)", - "--typography-body-xs": "var(--font-size-12)", - "--typography-body-s": "var(--font-size-14)", - "--typography-body-m": "var(--font-size-16)", - "--typography-body-l": "var(--font-size-18)", - "--typography-body-xl": "var(--font-size-20)", - "--typography-body-xxl": "var(--font-size-24)", - "--typography-body-regular": "var(--font-weight-regular)", - "--typography-heading-xs": "var(--font-size-12)", - "--typography-heading-s": "var(--font-size-16)", - "--typography-heading-m": "var(--font-size-20)", - "--typography-heading-l": "var(--font-size-24)", - "--typography-heading-xl": "var(--font-size-32)", - "--typography-heading-xxl": "var(--font-size-40)", - "--typography-heading-light": "var(--font-weight-light)", - "--typography-heading-regular": "var(--font-weight-regular)", - "--typography-heading-semibold": "var(--font-weight-semibold)", - "--typography-helper-text-s": "var(--font-size-12)", - "--typography-helper-text-m": "var(--font-size-14)", - "--typography-helper-text-l": "var(--font-size-16)", - "--typography-helper-text-light": "var(--font-weight-light)", - "--typography-helper-text-regular": "var(--font-weight-regular)", - "--typography-helper-text-semibold": "var(--font-weight-semibold)", - "--typography-label-s": "var(--font-size-12)", - "--typography-label-m": "var(--font-size-14)", - "--typography-label-l": "var(--font-size-16)", - "--typography-label-xl": "var(--font-size-20)", - "--typography-label-regular": "var(--font-weight-regular)", - "--typography-label-semibold": "var(--font-weight-semibold)", - "--typography-link-m": "var(--font-size-14)", - "--typography-link-regular": "var(--font-weight-regular)", - "--typography-title-s": "var(--font-size-14)", - "--typography-title-m": "var(--font-size-16)", - "--typography-title-l": "var(--font-size-20)", - "--typography-title-xl": "var(--font-size-24)", - "--typography-title-bold": "var(--font-weight-bold)", - "--border-style-default": "var(--line-style-solid)", - "--border-style-outline": "var(--line-style-dashed)", - "--typography-font-family": "var(--font-family-sans)", - "--typography-helper-text-italic": "var(--font-style-lightitalic)", -}; +import { coreTokens, aliasTokens } from "./styles/tokens"; /** * This type is used to allow partial themes and labels objects to be passed to the HalstackProvider. @@ -395,34 +30,35 @@ const parseLabels = (labels: DeepPartial<TranslatedLabels>): TranslatedLabels => }); return parsedLabels; }; +type ThemeType = Record<string, string | number>; type HalstackProviderPropsType = { labels?: DeepPartial<TranslatedLabels>; children: ReactNode; - newTheme: { [key: string]: string }; + opinionatedTheme: ThemeType; }; -const HalstackThemed = styled.div<{ theme: { [key: string]: string | number } }>` +const HalstackThemed = styled.div<{ theme: ThemeType }>` ${(props) => css` ${Object.keys(props.theme).length ? Object.entries(props.theme).map(([key, val]) => `${key}: ${val};`) : coreTokens} ${aliasTokens} `} `; -const createTheme = (opinionatedTheme: Record<string, string | number> = {}) => { - const vars: Record<string, string | number> = {}; +const createTheme = (opinionatedTheme: ThemeType = {}) => { + const vars: ThemeType = {}; Object.entries(coreTokens).forEach(([key, value]) => { vars[key] = opinionatedTheme[key] ?? value; }); return vars; }; -const HalstackProvider = ({ labels, children, newTheme }: HalstackProviderPropsType): JSX.Element => { +const HalstackProvider = ({ labels, children, opinionatedTheme }: HalstackProviderPropsType): JSX.Element => { const parsedLabels = useMemo(() => (labels ? parseLabels(labels) : null), [labels]); const parsedTheme = useMemo(() => { - const theme = createTheme(newTheme); + const theme = createTheme(opinionatedTheme); return theme; - }, [newTheme]); + }, [opinionatedTheme]); return ( <HalstackThemed theme={parsedTheme}> diff --git a/packages/lib/src/button/Button.stories.tsx b/packages/lib/src/button/Button.stories.tsx index 13ceb590a..a51fd5d6d 100644 --- a/packages/lib/src/button/Button.stories.tsx +++ b/packages/lib/src/button/Button.stories.tsx @@ -125,7 +125,7 @@ const Button = () => { <> <> <Title title="Default" theme="light" level={2} /> - <HalstackProvider newTheme={newTheme}> + <HalstackProvider opinionatedTheme={newTheme}> <Title title="Small" theme="light" level={2} /> <Title title="Primary" theme="light" level={3} /> <DxcFlex> diff --git a/packages/lib/src/styles/tokens.tsx b/packages/lib/src/styles/tokens.tsx index a14aabe4e..2dc31f518 100644 --- a/packages/lib/src/styles/tokens.tsx +++ b/packages/lib/src/styles/tokens.tsx @@ -1,4 +1,4 @@ -export const coreTokens = { +export const coreTokens: Record<string, string | number> = { /**************/ /** POSITION **/ /**************/ @@ -155,7 +155,7 @@ export const coreTokens = { "--line-style-solid": "solid", }; -export const aliasTokens = { +export const aliasTokens: Record<string, string | number> = { "--border-color-error-light": "var(--color-error-300)", "--border-color-error-medium": "var(--color-error-600)", "--border-color-error-strong": "var(--color-error-700)", From e73153af45c47dddb3e99f0bd36e94c0c1552b46 Mon Sep 17 00:00:00 2001 From: Jialecl <jialestrabajos@gmail.com> Date: Mon, 11 Aug 2025 08:57:10 +0200 Subject: [PATCH 04/12] small improvements --- packages/lib/src/HalstackContext.tsx | 35 ++++++++++++++++++---------- 1 file changed, 23 insertions(+), 12 deletions(-) diff --git a/packages/lib/src/HalstackContext.tsx b/packages/lib/src/HalstackContext.tsx index f083cb684..59486a11b 100644 --- a/packages/lib/src/HalstackContext.tsx +++ b/packages/lib/src/HalstackContext.tsx @@ -38,30 +38,41 @@ type HalstackProviderPropsType = { opinionatedTheme: ThemeType; }; -const HalstackThemed = styled.div<{ theme: ThemeType }>` - ${(props) => css` - ${Object.keys(props.theme).length ? Object.entries(props.theme).map(([key, val]) => `${key}: ${val};`) : coreTokens} - ${aliasTokens} - `} +const HalstackThemed = styled.div<{ coreTheme?: ThemeType }>` + ${(props) => { + if (props.coreTheme) + return css` + ${Object.keys(props.coreTheme).length + ? Object.entries(props.coreTheme).map(([key, val]) => `${key}: ${val};`) + : coreTokens} + ${aliasTokens} + `; + else { + return css` + ${coreTokens} + ${aliasTokens} + `; + } + }} `; -const createTheme = (opinionatedTheme: ThemeType = {}) => { - const vars: ThemeType = {}; +const createCoreTheme = (opinionatedTheme: ThemeType = {}) => { + const newTheme: ThemeType = {}; Object.entries(coreTokens).forEach(([key, value]) => { - vars[key] = opinionatedTheme[key] ?? value; + newTheme[key] = opinionatedTheme[key] ?? value; }); - return vars; + return newTheme; }; const HalstackProvider = ({ labels, children, opinionatedTheme }: HalstackProviderPropsType): JSX.Element => { const parsedLabels = useMemo(() => (labels ? parseLabels(labels) : null), [labels]); - const parsedTheme = useMemo(() => { - const theme = createTheme(opinionatedTheme); + const parsedCoreTheme = useMemo(() => { + const theme = createCoreTheme(opinionatedTheme); return theme; }, [opinionatedTheme]); return ( - <HalstackThemed theme={parsedTheme}> + <HalstackThemed coreTheme={parsedCoreTheme}> {parsedLabels ? ( <HalstackLanguageContext.Provider value={parsedLabels}>{children}</HalstackLanguageContext.Provider> ) : ( From 9bd5f8aba7115ca70ea8275b43f7d8f6d6572253 Mon Sep 17 00:00:00 2001 From: Jialecl <jialestrabajos@gmail.com> Date: Mon, 29 Sep 2025 17:11:59 +0200 Subject: [PATCH 05/12] tokens and variables reordered, button story reverted and created a new one for the provider --- packages/lib/src/HalstackContext.stories.tsx | 60 + packages/lib/src/HalstackContext.tsx | 4 +- packages/lib/src/button/Button.stories.tsx | 9687 +++++++++--------- packages/lib/src/styles/tokens.tsx | 60 +- packages/lib/src/styles/variables.css | 60 +- 5 files changed, 4801 insertions(+), 5070 deletions(-) create mode 100644 packages/lib/src/HalstackContext.stories.tsx diff --git a/packages/lib/src/HalstackContext.stories.tsx b/packages/lib/src/HalstackContext.stories.tsx new file mode 100644 index 000000000..d7ff78e80 --- /dev/null +++ b/packages/lib/src/HalstackContext.stories.tsx @@ -0,0 +1,60 @@ +import ExampleContainer from "./../.storybook/components/ExampleContainer"; +import Title from "./../.storybook/components/Title"; +import { Meta, StoryObj } from "@storybook/react"; +import { HalstackProvider } from "./HalstackContext"; +import { useState } from "react"; +import DxcButton from "./button/Button"; + +export default { + title: "HalstackContext", + component: HalstackProvider, +} as Meta<typeof HalstackProvider>; + +const Provider = () => { + const [newTheme, setNewTheme] = useState<Record<string, string | number>>({ + "--color-primary-50": "#d3f0b4", + "--color-primary-100": "#a2df5e", + "--color-primary-200": "#77c81f", + "--color-primary-300": "#68ad1b", + "--color-primary-400": "#579317", + "--color-primary-500": "#487813", + "--color-primary-600": "#39600f", + "--color-primary-700": "#2b470b", + "--color-primary-800": "#1c2f07", + "--color-primary-900": "#0d1503", + }); + return ( + <> + <ExampleContainer> + <Title title="Default" theme="light" level={4} /> + <HalstackProvider opinionatedTheme={newTheme}> + <DxcButton + label="Primary" + semantic="default" + onClick={() => + setNewTheme({ + "--color-primary-50": "#ffd6e7", + "--color-primary-100": "#ff99c2", + "--color-primary-200": "#ff66a3", + "--color-primary-300": "#e05584", + "--color-primary-400": "#c5446d", + "--color-primary-500": "#a83659", + "--color-primary-600": "#872b47", + "--color-primary-700": "#661f35", + "--color-primary-800": "#441423", + "--color-primary-900": "#220a12", + }) + } + size={{ height: "small" }} + /> + </HalstackProvider> + </ExampleContainer> + </> + ); +}; + +type Story = StoryObj<typeof HalstackProvider>; + +export const Chromatic: Story = { + render: Provider, +}; diff --git a/packages/lib/src/HalstackContext.tsx b/packages/lib/src/HalstackContext.tsx index 75319e3d4..f1f53e54d 100644 --- a/packages/lib/src/HalstackContext.tsx +++ b/packages/lib/src/HalstackContext.tsx @@ -34,7 +34,7 @@ type ThemeType = Record<string, string | number>; type HalstackProviderPropsType = { labels?: DeepPartial<TranslatedLabels>; children: ReactNode; - opinionatedTheme: ThemeType; + opinionatedTheme?: ThemeType; }; const HalstackThemed = styled.div<{ coreTheme?: ThemeType }>` @@ -55,7 +55,7 @@ const HalstackThemed = styled.div<{ coreTheme?: ThemeType }>` }} `; -const createCoreTheme = (opinionatedTheme: ThemeType = {}) => { +const createCoreTheme = (opinionatedTheme: ThemeType | undefined = {}) => { const newTheme: ThemeType = {}; Object.entries(coreTokens).forEach(([key, value]) => { newTheme[key] = opinionatedTheme[key] ?? value; diff --git a/packages/lib/src/button/Button.stories.tsx b/packages/lib/src/button/Button.stories.tsx index a51fd5d6d..a91e42c35 100644 --- a/packages/lib/src/button/Button.stories.tsx +++ b/packages/lib/src/button/Button.stories.tsx @@ -6,8 +6,6 @@ import DxcInset from "../inset/Inset"; import DxcTooltip from "../tooltip/Tooltip"; import { userEvent, within } from "@storybook/test"; import { Meta, StoryObj } from "@storybook/react"; -import { useState } from "react"; -import { HalstackProvider } from "../HalstackContext"; export default { title: "Button", @@ -37,5218 +35,4891 @@ const facebookIcon = ( </svg> ); -const Button = () => { - const [newTheme, setNewTheme] = useState<Record<string, string | number>>({ - "--color-primary-50": "#d3f0b4", - "--color-primary-100": "#a2df5e", - "--color-primary-200": "#77c81f", - "--color-primary-300": "#68ad1b", - "--color-primary-400": "#579317", - "--color-primary-500": "#487813", - "--color-primary-600": "#39600f", - "--color-primary-700": "#2b470b", - "--color-primary-800": "#1c2f07", - "--color-primary-900": "#0d1503", - "--color-secondary-50": "#d0ebff", - "--color-secondary-100": "#98d4ff", - "--color-secondary-200": "#5fbcff", - "--color-secondary-300": "#31a2f4", - "--color-secondary-400": "#2989ce", - "--color-secondary-500": "#2271a9", - "--color-secondary-600": "#1b5986", - "--color-secondary-700": "#144364", - "--color-secondary-800": "#0d2c43", - "--color-secondary-900": "#06141f", - "--color-tertiary-50": "#fbe796", - "--color-tertiary-100": "#f1ca2a", - "--color-tertiary-200": "#d3b125", - "--color-tertiary-300": "#b79a20", - "--color-tertiary-400": "#9a811b", - "--color-tertiary-500": "#7f6a16", - "--color-tertiary-600": "#655412", - "--color-tertiary-700": "#4b3f0d", - "--color-tertiary-800": "#322909", - "--color-tertiary-900": "#161304", - "--color-success-50": "#c5f2d2", - "--color-success-100": "#7ee29a", - "--color-success-200": "#53ca75", - "--color-success-300": "#48af65", - "--color-success-400": "#3d9455", - "--color-success-500": "#327a46", - "--color-success-600": "#286138", - "--color-success-700": "#1d4729", - "--color-success-800": "#132f1b", - "--color-success-900": "#09150c", - "--color-error-50": "#ffdfe3", - "--color-error-100": "#ffbcc5", - "--color-error-200": "#fe96a4", - "--color-error-300": "#fe6b7f", - "--color-error-400": "#f8334d", - "--color-error-500": "#cd2a40", - "--color-error-600": "#a32133", - "--color-error-700": "#7b1926", - "--color-error-800": "#52111a", - "--color-error-900": "#28080c", - "--color-warning-50": "#fce4c9", - "--color-warning-100": "#f9c386", - "--color-warning-200": "#f5a242", - "--color-warning-300": "#d68b35", - "--color-warning-400": "#b5752d", - "--color-warning-500": "#956025", - "--color-warning-600": "#764c1d", - "--color-warning-700": "#573916", - "--color-warning-800": "#3a250e", - "--color-warning-900": "#1b1107", - "--color-neutral-50": "#e7e7e7", - "--color-neutral-100": "#cdcdcd", - "--color-neutral-200": "#b4b4b4", - "--color-neutral-300": "#9c9c9c", - "--color-neutral-400": "#838383", - "--color-neutral-500": "#6c6c6c", - "--color-neutral-600": "#555555", - "--color-neutral-700": "#404040", - "--color-neutral-800": "#292929", - "--color-neutral-900": "#131313", - "--color-alpha-100-a": "#cdcdcd1a", - "--color-alpha-200-a": "#b4b4b433", - "--color-alpha-300-a": "#9c9c9c4d", - "--color-alpha-400-a": "#83838366", - "--color-alpha-500-a": "#6c6c6c80", - "--color-alpha-600-a": "#55555599", - "--color-alpha-700-a": "#404040b2", - "--color-alpha-800-a": "#292929cc", - "--color-alpha-900-a": "#131313e5", - "--color-black": "#000000", - "--color-white": "#ffffff", - }); - return ( +const Button = () => ( + <> <> + <Title title="Default" theme="light" level={2} /> <> - <Title title="Default" theme="light" level={2} /> - <HalstackProvider opinionatedTheme={newTheme}> - <Title title="Small" theme="light" level={2} /> - <Title title="Primary" theme="light" level={3} /> - <DxcFlex> - <DxcFlex direction="column"> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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 - label="Primary" - semantic="default" - onClick={() => setNewTheme({ "--color-primary-700": "#fabada" })} - 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", "pseudo-focus"]}> - <DxcButton label="Primary" size={{ height: "small" }} /> + <DxcButton icon={facebookIcon} size={{ height: "small", width: "small" }} title="Facebook" /> </ExampleContainer> <ExampleContainer> - <DxcButton label="Primary" size={{ height: "small" }} disabled /> + <DxcButton label="Medium" size={{ height: "small", width: "medium" }} /> </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", "pseudo-focus"]}> - <DxcButton label="Primary" icon="home" size={{ height: "small" }} /> + <DxcButton label="Large" size={{ height: "small", width: "large" }} /> </ExampleContainer> <ExampleContainer> - <DxcButton label="Primary" icon="home" size={{ height: "small" }} disabled /> + <DxcButton label="Fit content" size={{ height: "small", width: "fitContent" }} /> </ExampleContainer> </DxcFlex> - <DxcFlex direction="column"> + </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="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", "pseudo-focus"]}> - <DxcButton label="Primary" icon="home" iconPosition="after" size={{ height: "small" }} /> + <DxcButton label="xxsmall" size={{ height: "small" }} margin="xxsmall" /> </ExampleContainer> <ExampleContainer> - <DxcButton label="Primary" disabled icon="home" iconPosition="after" size={{ height: "small" }} /> + <DxcButton label="xsmall" size={{ height: "small" }} margin="xsmall" /> </ExampleContainer> - </DxcFlex> - <DxcFlex direction="column"> <ExampleContainer> - <DxcButton icon="home" size={{ height: "small" }} title="Home" /> + <DxcButton label="small" size={{ height: "small" }} margin="small" /> </ExampleContainer> - <ExampleContainer pseudoState="pseudo-hover"> - <DxcButton icon="home" size={{ height: "small" }} title="Home" /> + <ExampleContainer> + <DxcButton label="medium" size={{ height: "small" }} margin="medium" /> </ExampleContainer> - <ExampleContainer pseudoState="pseudo-focus"> - <DxcButton icon="home" size={{ height: "small" }} title="Home" /> + <ExampleContainer> + <DxcButton label="large" size={{ height: "small" }} margin="large" /> </ExampleContainer> - <ExampleContainer pseudoState={["pseudo-active", "pseudo-focus"]}> - <DxcButton icon="home" size={{ height: "small" }} title="Home" /> + <ExampleContainer> + <DxcButton label="xlarge" size={{ height: "small" }} margin="xlarge" /> </ExampleContainer> <ExampleContainer> - <DxcButton icon="home" size={{ height: "small" }} disabled title="Home" /> + <DxcButton label="xxlarge" size={{ height: "small" }} margin="xxlarge" /> </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> + <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", "pseudo-focus"]}> + <DxcButton mode="secondary" label="Secondary" size={{ height: "small" }} /> + </ExampleContainer> + <ExampleContainer> + <DxcButton mode="secondary" label="Secondary" size={{ height: "small" }} disabled /> + </ExampleContainer> </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 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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <DxcButton icon="home" size={{ height: "medium" }} title="Home" /> + </ExampleContainer> + <ExampleContainer> + <DxcButton icon="home" size={{ height: "medium" }} disabled title="Home" /> + </ExampleContainer> </DxcFlex> - <Title title="Secondary" theme="light" level={3} /> - <DxcFlex> - <DxcFlex direction="column"> + </DxcFlex> + <DxcFlex> + <DxcFlex direction="column"> + <Title title="Width" theme="light" level={4} /> + <DxcFlex> <ExampleContainer> - <DxcButton mode="secondary" label="Secondary" size={{ height: "small" }} /> + <DxcButton label="Small Small" size={{ height: "medium", width: "small" }} title="Facebook" /> </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> + <DxcButton label="Medium Medium Medium" size={{ height: "medium", width: "medium" }} /> </ExampleContainer> - <ExampleContainer pseudoState={["pseudo-active", "pseudo-focus"]}> - <DxcButton mode="secondary" label="Secondary" size={{ height: "small" }} /> + <ExampleContainer> + <DxcButton label="Large Large Large Large Large Large" size={{ height: "medium", width: "large" }} /> </ExampleContainer> <ExampleContainer> - <DxcButton mode="secondary" label="Secondary" size={{ height: "small" }} disabled /> + <DxcButton label="Fit content" size={{ height: "medium", width: "fitContent" }} /> </ExampleContainer> </DxcFlex> - <DxcFlex direction="column"> + </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 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", "pseudo-focus"]}> - <DxcButton mode="secondary" label="Secondary" icon="home" size={{ height: "small" }} /> + <DxcButton label="xxsmall" size={{ height: "medium" }} margin="xxsmall" /> </ExampleContainer> <ExampleContainer> - <DxcButton mode="secondary" label="Secondary" icon="home" size={{ height: "small" }} disabled /> + <DxcButton label="xsmall" size={{ height: "medium" }} margin="xsmall" /> </ExampleContainer> - </DxcFlex> - <DxcFlex direction="column"> <ExampleContainer> - <DxcButton - mode="secondary" - label="Secondary" - icon="home" - iconPosition="after" - size={{ height: "small" }} - /> + <DxcButton label="small" size={{ height: "medium" }} margin="small" /> </ExampleContainer> - <ExampleContainer pseudoState="pseudo-hover"> - <DxcButton - mode="secondary" - label="Secondary" - icon="home" - iconPosition="after" - size={{ height: "small" }} - /> + <ExampleContainer> + <DxcButton label="medium" size={{ height: "medium" }} margin="medium" /> </ExampleContainer> - <ExampleContainer pseudoState="pseudo-focus"> - <DxcButton - mode="secondary" - label="Secondary" - icon="home" - iconPosition="after" - size={{ height: "small" }} - /> + <ExampleContainer> + <DxcButton label="large" size={{ height: "medium" }} margin="large" /> </ExampleContainer> - <ExampleContainer pseudoState={["pseudo-active", "pseudo-focus"]}> - <DxcButton - mode="secondary" - label="Secondary" - icon="home" - iconPosition="after" - size={{ height: "small" }} - /> + <ExampleContainer> + <DxcButton label="xlarge" size={{ height: "medium" }} margin="xlarge" /> </ExampleContainer> <ExampleContainer> - <DxcButton - mode="secondary" - label="Secondary" - icon="home" - iconPosition="after" - size={{ height: "small" }} - disabled - /> + <DxcButton label="xxlarge" size={{ height: "medium" }} margin="xxlarge" /> </ExampleContainer> </DxcFlex> - <DxcFlex direction="column"> + </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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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 mode="secondary" icon="home" size={{ height: "small" }} title="Home" /> + <DxcButton icon={facebookIcon} size={{ height: "large", width: "small" }} title="Facebook" /> </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> + <DxcButton label="Medium" size={{ height: "large", width: "medium" }} /> </ExampleContainer> - <ExampleContainer pseudoState={["pseudo-active", "pseudo-focus"]}> - <DxcButton mode="secondary" icon="home" size={{ height: "small" }} title="Home" /> + <ExampleContainer> + <DxcButton label="Large" size={{ height: "large", width: "large" }} /> </ExampleContainer> <ExampleContainer> - <DxcButton mode="secondary" icon="home" size={{ height: "small" }} disabled title="Home" /> + <DxcButton label="Fit content" size={{ height: "large", width: "fitContent" }} /> </ExampleContainer> </DxcFlex> </DxcFlex> - <Title title="Tertiary" theme="light" level={3} /> - <DxcFlex> - <DxcFlex direction="column"> + </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 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", "pseudo-focus"]}> - <DxcButton mode="tertiary" label="Tertiary" size={{ height: "small" }} /> + <DxcButton label="xxsmall" size={{ height: "large" }} margin="xxsmall" /> </ExampleContainer> <ExampleContainer> - <DxcButton mode="tertiary" label="Tertiary" size={{ height: "small" }} disabled /> + <DxcButton label="xsmall" size={{ height: "large" }} margin="xsmall" /> </ExampleContainer> - </DxcFlex> - <DxcFlex direction="column"> <ExampleContainer> - <DxcButton mode="tertiary" label="Tertiary" icon="home" size={{ height: "small" }} /> + <DxcButton label="small" size={{ height: "large" }} margin="small" /> </ExampleContainer> - <ExampleContainer pseudoState="pseudo-hover"> - <DxcButton mode="tertiary" label="Tertiary" icon="home" size={{ height: "small" }} /> + <ExampleContainer> + <DxcButton label="medium" size={{ height: "large" }} margin="medium" /> </ExampleContainer> - <ExampleContainer pseudoState="pseudo-focus"> - <DxcButton mode="tertiary" label="Tertiary" icon="home" size={{ height: "small" }} /> + <ExampleContainer> + <DxcButton label="large" size={{ height: "large" }} margin="large" /> </ExampleContainer> - <ExampleContainer pseudoState={["pseudo-active", "pseudo-focus"]}> - <DxcButton mode="tertiary" label="Tertiary" icon="home" size={{ height: "small" }} /> + <ExampleContainer> + <DxcButton label="xlarge" size={{ height: "large" }} margin="xlarge" /> </ExampleContainer> <ExampleContainer> - <DxcButton mode="tertiary" label="Tertiary" icon="home" size={{ height: "small" }} disabled /> + <DxcButton label="xxlarge" size={{ height: "large" }} margin="xxlarge" /> </ExampleContainer> </DxcFlex> - <DxcFlex direction="column"> + </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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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 - mode="tertiary" - label="Tertiary" - icon="home" - iconPosition="after" - size={{ height: "small" }} + icon={facebookIcon} + semantic="error" + size={{ height: "small", width: "small" }} + title="Facebook" /> </ExampleContainer> - <ExampleContainer pseudoState="pseudo-hover"> - <DxcButton - mode="tertiary" - label="Tertiary" - icon="home" - iconPosition="after" - size={{ height: "small" }} - /> + <ExampleContainer> + <DxcButton label="Medium" semantic="error" size={{ height: "small", width: "medium" }} /> </ExampleContainer> - <ExampleContainer pseudoState="pseudo-focus"> - <DxcButton - mode="tertiary" - label="Tertiary" - icon="home" - iconPosition="after" - size={{ height: "small" }} - /> + <ExampleContainer> + <DxcButton label="Large" semantic="error" size={{ height: "small", width: "large" }} /> </ExampleContainer> - <ExampleContainer pseudoState={["pseudo-active", "pseudo-focus"]}> - <DxcButton - mode="tertiary" - label="Tertiary" - icon="home" - iconPosition="after" - size={{ height: "small" }} - /> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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 - mode="tertiary" - label="Tertiary" - icon="home" - iconPosition="after" - size={{ height: "small" }} - disabled + icon={facebookIcon} + semantic="error" + size={{ height: "medium", width: "small" }} + title="Facebook" /> </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" /> + <DxcButton label="Medium" semantic="error" size={{ height: "medium", width: "medium" }} /> </ExampleContainer> - <ExampleContainer pseudoState="pseudo-focus"> - <DxcButton mode="tertiary" icon="home" size={{ height: "small" }} title="Home" /> - </ExampleContainer> - <ExampleContainer pseudoState={["pseudo-active", "pseudo-focus"]}> - <DxcButton mode="tertiary" icon="home" size={{ height: "small" }} title="Home" /> + <ExampleContainer> + <DxcButton label="Large" semantic="error" size={{ height: "medium", width: "large" }} /> </ExampleContainer> <ExampleContainer> - <DxcButton mode="tertiary" icon="home" size={{ height: "small" }} disabled title="Home" /> + <DxcButton label="Fit content" semantic="error" size={{ height: "medium", width: "fitContent" }} /> </ExampleContainer> </DxcFlex> </DxcFlex> - </HalstackProvider> - <> - <Title title="Medium" theme="light" level={2} /> - <Title title="Primary" theme="light" level={2} /> - <DxcFlex> - <DxcFlex direction="column"> + </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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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 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", "pseudo-focus"]}> - <DxcButton label="Primary" size={{ height: "medium" }} /> + <DxcButton + icon={facebookIcon} + semantic="error" + size={{ height: "large", width: "small" }} + title="Facebook" + /> </ExampleContainer> <ExampleContainer> - <DxcButton label="Primary" size={{ height: "medium" }} disabled /> + <DxcButton label="Medium" semantic="error" size={{ height: "large", width: "medium" }} /> </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", "pseudo-focus"]}> - <DxcButton label="Primary" icon="home" size={{ height: "medium" }} /> + <DxcButton label="Large" semantic="error" size={{ height: "large", width: "large" }} /> </ExampleContainer> <ExampleContainer> - <DxcButton label="Primary" icon="home" size={{ height: "medium" }} disabled /> + <DxcButton label="Fit content" semantic="error" size={{ height: "large", width: "fitContent" }} /> </ExampleContainer> </DxcFlex> - <DxcFlex direction="column"> + </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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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 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", "pseudo-focus"]}> - <DxcButton label="Primary" icon="home" iconPosition="after" size={{ height: "medium" }} /> + <DxcButton + icon={facebookIcon} + semantic="warning" + size={{ height: "small", width: "small" }} + title="Facebook" + /> </ExampleContainer> <ExampleContainer> - <DxcButton label="Primary" icon="home" iconPosition="after" size={{ height: "medium" }} disabled /> + <DxcButton label="Medium" semantic="warning" size={{ height: "small", width: "medium" }} /> </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", "pseudo-focus"]}> - <DxcButton icon="home" size={{ height: "medium" }} title="Home" /> + <DxcButton label="Large" semantic="warning" size={{ height: "small", width: "large" }} /> </ExampleContainer> <ExampleContainer> - <DxcButton icon="home" size={{ height: "medium" }} disabled title="Home" /> + <DxcButton label="Fit content" semantic="warning" size={{ height: "small", width: "fitContent" }} /> </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" 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", "pseudo-focus"]}> + <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> - <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 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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <DxcButton label="Primary" semantic="warning" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer> + <DxcButton label="Primary" semantic="warning" size={{ height: "medium" }} disabled /> + </ExampleContainer> </DxcFlex> - <Title title="Secondary" theme="light" level={3} /> - <DxcFlex> - <DxcFlex direction="column"> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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 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", "pseudo-focus"]}> - <DxcButton mode="secondary" label="Secondary" size={{ height: "medium" }} /> + <DxcButton + icon={facebookIcon} + semantic="warning" + size={{ height: "medium", width: "small" }} + title="Facebook" + /> </ExampleContainer> <ExampleContainer> - <DxcButton mode="secondary" label="Secondary" size={{ height: "medium" }} disabled /> + <DxcButton label="Medium" semantic="warning" size={{ height: "medium", width: "medium" }} /> </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", "pseudo-focus"]}> - <DxcButton mode="secondary" label="Secondary" icon="home" size={{ height: "medium" }} /> + <DxcButton label="Large" semantic="warning" size={{ height: "medium", width: "large" }} /> </ExampleContainer> <ExampleContainer> - <DxcButton mode="secondary" label="Secondary" icon="home" size={{ height: "medium" }} disabled /> + <DxcButton label="Fit content" semantic="warning" size={{ height: "medium", width: "fitContent" }} /> </ExampleContainer> </DxcFlex> - <DxcFlex direction="column"> + </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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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 - mode="secondary" - label="Secondary" - icon="home" - iconPosition="after" - size={{ height: "medium" }} + icon={facebookIcon} + semantic="warning" + size={{ height: "large", width: "small" }} + title="Facebook" /> </ExampleContainer> - <ExampleContainer pseudoState="pseudo-hover"> - <DxcButton - mode="secondary" - label="Secondary" - icon="home" - iconPosition="after" - size={{ height: "medium" }} - /> + <ExampleContainer> + <DxcButton label="Medium" semantic="warning" size={{ height: "large", width: "medium" }} /> </ExampleContainer> - <ExampleContainer pseudoState="pseudo-focus"> - <DxcButton - mode="secondary" - label="Secondary" - icon="home" - iconPosition="after" - size={{ height: "medium" }} - /> + <ExampleContainer> + <DxcButton label="Large" semantic="warning" size={{ height: "large", width: "large" }} /> </ExampleContainer> - <ExampleContainer pseudoState={["pseudo-active", "pseudo-focus"]}> - <DxcButton - mode="secondary" - label="Secondary" - icon="home" - iconPosition="after" - size={{ height: "medium" }} - /> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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 - mode="secondary" - label="Secondary" - icon="home" - iconPosition="after" - size={{ height: "medium" }} - disabled + icon={facebookIcon} + semantic="success" + size={{ height: "small", width: "small" }} + title="Facebook" /> </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" /> + <DxcButton label="Medium" semantic="success" size={{ height: "small", width: "medium" }} /> </ExampleContainer> - <ExampleContainer pseudoState={["pseudo-active", "pseudo-focus"]}> - <DxcButton mode="secondary" icon="home" size={{ height: "medium" }} title="Home" /> + <ExampleContainer> + <DxcButton label="Large" semantic="success" size={{ height: "small", width: "large" }} /> </ExampleContainer> <ExampleContainer> - <DxcButton mode="secondary" icon="home" size={{ height: "medium" }} disabled title="Home" /> + <DxcButton label="Fit content" semantic="success" size={{ height: "small", width: "fitContent" }} /> </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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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> + <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", "pseudo-focus"]}> + <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> - </> - <> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <DxcButton icon="home" title="Home" /> - </ExampleContainer> - <ExampleContainer> - <DxcButton icon="home" disabled title="Home" /> - </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", "pseudo-focus"]}> + <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> - <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 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", "pseudo-focus"]}> + <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> - <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 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", "pseudo-focus"]}> + <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> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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" 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", "pseudo-focus"]}> + <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> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <DxcButton mode="tertiary" icon="home" title="Home" /> - </ExampleContainer> - <ExampleContainer> - <DxcButton mode="tertiary" icon="home" disabled title="Home" /> - </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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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="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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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> + <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", "pseudo-focus"]}> + <DxcButton label="Primary" semantic="success" size={{ height: "medium" }} /> + </ExampleContainer> + <ExampleContainer> + <DxcButton label="Primary" semantic="success" size={{ height: "medium" }} disabled /> + </ExampleContainer> </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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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 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", "pseudo-focus"]}> + <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> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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"> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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 - 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", "pseudo-focus"]}> - <DxcButton - label="Primary" - semantic="info" - icon="home" - iconPosition="after" - size={{ height: "medium" }} + icon={facebookIcon} + semantic="success" + size={{ height: "medium", width: "small" }} + title="Facebook" /> </ExampleContainer> <ExampleContainer> - <DxcButton - label="Primary" - semantic="info" - icon="home" - iconPosition="after" - size={{ height: "medium" }} - disabled - /> + <DxcButton label="Medium" semantic="success" size={{ height: "medium", width: "medium" }} /> </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", "pseudo-focus"]}> - <DxcButton icon="home" semantic="info" size={{ height: "medium" }} title="Home" /> + <DxcButton label="Large" semantic="success" size={{ height: "medium", width: "large" }} /> </ExampleContainer> <ExampleContainer> - <DxcButton icon="home" semantic="info" size={{ height: "medium" }} disabled title="Home" /> + <DxcButton label="Fit content" semantic="success" size={{ height: "medium", width: "fitContent" }} /> </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="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", "pseudo-focus"]}> + <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> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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"> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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 - 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", "pseudo-focus"]}> - <DxcButton - mode="secondary" - semantic="info" - label="Secondary" - icon="home" - iconPosition="after" - size={{ height: "medium" }} + icon={facebookIcon} + semantic="success" + size={{ height: "large", width: "small" }} + title="Facebook" /> </ExampleContainer> <ExampleContainer> - <DxcButton - mode="secondary" - semantic="info" - label="Secondary" - icon="home" - iconPosition="after" - size={{ height: "medium" }} - disabled - /> + <DxcButton label="Medium" semantic="success" size={{ height: "large", width: "medium" }} /> </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", "pseudo-focus"]}> - <DxcButton mode="secondary" semantic="info" icon="home" size={{ height: "medium" }} title="Home" /> + <DxcButton label="Large" semantic="success" size={{ height: "large", width: "large" }} /> </ExampleContainer> <ExampleContainer> - <DxcButton - mode="secondary" - semantic="info" - icon="home" - size={{ height: "medium" }} - disabled - title="Home" - /> + <DxcButton label="Fit content" semantic="success" size={{ height: "large", width: "fitContent" }} /> </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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <DxcButton mode="tertiary" semantic="info" label="Tertiary" icon="home" size={{ height: "medium" }} /> - </ExampleContainer> + </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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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 - mode="tertiary" + icon={facebookIcon} semantic="info" - label="Tertiary" - icon="home" - size={{ height: "medium" }} - disabled + size={{ height: "small", width: "small" }} + title="Facebook" /> </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", "pseudo-focus"]}> - <DxcButton - mode="tertiary" - semantic="info" - label="Tertiary" - icon="home" - iconPosition="after" - size={{ height: "medium" }} - /> + <DxcButton label="Medium" semantic="info" size={{ height: "small", width: "medium" }} /> </ExampleContainer> <ExampleContainer> - <DxcButton - mode="tertiary" - semantic="info" - label="Tertiary" - icon="home" - iconPosition="after" - size={{ height: "medium" }} - disabled - /> + <DxcButton label="Large" semantic="info" size={{ height: "small", width: "large" }} /> </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", "pseudo-focus"]}> - <DxcButton mode="tertiary" semantic="info" icon="home" size={{ height: "medium" }} title="Home" /> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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 - mode="tertiary" + icon={facebookIcon} semantic="info" - icon="home" - size={{ height: "medium" }} - disabled - title="Home" + size={{ height: "medium", width: "small" }} + title="Facebook" /> </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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <DxcButton label="Primary" semantic="info" icon="home" iconPosition="after" /> - </ExampleContainer> <ExampleContainer> - <DxcButton label="Primary" semantic="info" icon="home" iconPosition="after" disabled /> + <DxcButton label="Medium" semantic="info" size={{ height: "medium", width: "medium" }} /> </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", "pseudo-focus"]}> - <DxcButton icon="home" semantic="info" title="Home" /> + <DxcButton label="Large" semantic="info" size={{ height: "medium", width: "large" }} /> </ExampleContainer> <ExampleContainer> - <DxcButton icon="home" semantic="info" disabled title="Home" /> + <DxcButton label="Fit content" semantic="info" size={{ height: "medium", width: "fitContent" }} /> </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: "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", "pseudo-focus"]}> + <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> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <DxcButton mode="secondary" semantic="info" label="Secondary" icon="home" iconPosition="after" /> - </ExampleContainer> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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 - mode="secondary" + icon={facebookIcon} semantic="info" - label="Secondary" - icon="home" - iconPosition="after" - disabled + size={{ height: "large", width: "small" }} + title="Facebook" /> </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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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", "pseudo-focus"]}> - <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 /> + <DxcButton label="Medium" semantic="info" size={{ height: "large", width: "medium" }} /> </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", "pseudo-focus"]}> - <DxcButton mode="tertiary" semantic="info" icon="home" title="Home" /> + <DxcButton label="Large" semantic="info" size={{ height: "large", width: "large" }} /> </ExampleContainer> <ExampleContainer> - <DxcButton mode="tertiary" semantic="info" icon="home" disabled title="Home" /> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <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", "pseudo-focus"]}> + <DxcButton mode="tertiary" semantic="info" icon="home" title="Home" /> + </ExampleContainer> + <ExampleContainer> + <DxcButton mode="tertiary" semantic="info" icon="home" disabled title="Home" /> + </ExampleContainer> + </DxcFlex> + </DxcFlex> </> </> - ); -}; + </> +); const Tooltip = () => ( <> diff --git a/packages/lib/src/styles/tokens.tsx b/packages/lib/src/styles/tokens.tsx index 2dc31f518..d9ff8dfe9 100644 --- a/packages/lib/src/styles/tokens.tsx +++ b/packages/lib/src/styles/tokens.tsx @@ -43,6 +43,16 @@ export const coreTokens: Record<string, string | number> = { "--color-alpha-700-a": "#5b5b5bb2", "--color-alpha-800-a": "#494949cc", "--color-alpha-900-a": "#333333e5", + "--color-primary-50": "#fcfbfe", + "--color-primary-100": "#f0e8fa", + "--color-primary-200": "#e7d9f6", + "--color-primary-300": "#ddc9f3", + "--color-primary-400": "#c8a7eb", + "--color-primary-500": "#b487e4", + "--color-primary-600": "#9363c8", + "--color-primary-700": "#6f4b97", + "--color-primary-800": "#5a3c7a", + "--color-primary-900": "#3e2a55", "--color-secondary-50": "#f8fcff", "--color-secondary-100": "#d9efff", "--color-secondary-200": "#bce3ff", @@ -53,6 +63,16 @@ export const coreTokens: Record<string, string | number> = { "--color-secondary-700": "#1d6091", "--color-secondary-800": "#174e74", "--color-secondary-900": "#103651", + "--color-tertiary-50": "#fefbef", + "--color-tertiary-100": "#fcedae", + "--color-tertiary-200": "#f9de6e", + "--color-tertiary-300": "#f5cd2b", + "--color-tertiary-400": "#d4b226", + "--color-tertiary-500": "#b6981f", + "--color-tertiary-600": "#8f7818", + "--color-tertiary-700": "#6c5a12", + "--color-tertiary-800": "#57490f", + "--color-tertiary-900": "#3d3309", "--color-success-50": "#f3fcf5", "--color-success-100": "#d1f5db", "--color-success-200": "#acecbe", @@ -63,16 +83,6 @@ export const coreTokens: Record<string, string | number> = { "--color-success-700": "#2a673b", "--color-success-800": "#225230", "--color-success-900": "#183921", - "--color-neutral-50": "#fbfbfb", - "--color-neutral-100": "#ebebeb", - "--color-neutral-200": "#dedede", - "--color-neutral-300": "#d1d1d1", - "--color-neutral-400": "#b5b5b5", - "--color-neutral-500": "#9a9a9a", - "--color-neutral-600": "#797979", - "--color-neutral-700": "#5b5b5b", - "--color-neutral-800": "#494949", - "--color-neutral-900": "#333333", "--color-warning-50": "#fffbf6", "--color-warning-100": "#fde9d2", "--color-warning-200": "#fbd9b3", @@ -83,16 +93,6 @@ export const coreTokens: Record<string, string | number> = { "--color-warning-700": "#7f5121", "--color-warning-800": "#66421a", "--color-warning-900": "#3d3309", - "--color-primary-50": "#fcfbfe", - "--color-primary-100": "#f0e8fa", - "--color-primary-200": "#e7d9f6", - "--color-primary-300": "#ddc9f3", - "--color-primary-400": "#c8a7eb", - "--color-primary-500": "#b487e4", - "--color-primary-600": "#9363c8", - "--color-primary-700": "#6f4b97", - "--color-primary-800": "#5a3c7a", - "--color-primary-900": "#3e2a55", "--color-error-50": "#fff7f6", "--color-error-100": "#ffe6e4", "--color-error-200": "#ffd3d0", @@ -103,16 +103,16 @@ export const coreTokens: Record<string, string | number> = { "--color-error-700": "#a92c37", "--color-error-800": "#87262d", "--color-error-900": "#5b1f21", - "--color-tertiary-50": "#fefbef", - "--color-tertiary-100": "#fcedae", - "--color-tertiary-200": "#f9de6e", - "--color-tertiary-300": "#f5cd2b", - "--color-tertiary-400": "#d4b226", - "--color-tertiary-500": "#b6981f", - "--color-tertiary-600": "#8f7818", - "--color-tertiary-700": "#6c5a12", - "--color-tertiary-800": "#57490f", - "--color-tertiary-900": "#3d3309", + "--color-neutral-50": "#fbfbfb", + "--color-neutral-100": "#ebebeb", + "--color-neutral-200": "#dedede", + "--color-neutral-300": "#d1d1d1", + "--color-neutral-400": "#b5b5b5", + "--color-neutral-500": "#9a9a9a", + "--color-neutral-600": "#797979", + "--color-neutral-700": "#5b5b5b", + "--color-neutral-800": "#494949", + "--color-neutral-900": "#333333", "--dimensions-0": "0px", "--dimensions-1": "1px", "--dimensions-2": "2px", diff --git a/packages/lib/src/styles/variables.css b/packages/lib/src/styles/variables.css index 44be424ac..8ca8b2f7f 100644 --- a/packages/lib/src/styles/variables.css +++ b/packages/lib/src/styles/variables.css @@ -45,6 +45,16 @@ --color-alpha-700-a: #5b5b5bb2; --color-alpha-800-a: #494949cc; --color-alpha-900-a: #333333e5; + --color-primary-50: #fcfbfe; + --color-primary-100: #f0e8fa; + --color-primary-200: #e7d9f6; + --color-primary-300: #ddc9f3; + --color-primary-400: #c8a7eb; + --color-primary-500: #b487e4; + --color-primary-600: #9363c8; + --color-primary-700: #6f4b97; + --color-primary-800: #5a3c7a; + --color-primary-900: #3e2a55; --color-secondary-50: #f8fcff; --color-secondary-100: #d9efff; --color-secondary-200: #bce3ff; @@ -55,6 +65,16 @@ --color-secondary-700: #1d6091; --color-secondary-800: #174e74; --color-secondary-900: #103651; + --color-tertiary-50: #fefbef; + --color-tertiary-100: #fcedae; + --color-tertiary-200: #f9de6e; + --color-tertiary-300: #f5cd2b; + --color-tertiary-400: #d4b226; + --color-tertiary-500: #b6981f; + --color-tertiary-600: #8f7818; + --color-tertiary-700: #6c5a12; + --color-tertiary-800: #57490f; + --color-tertiary-900: #3d3309; --color-success-50: #f3fcf5; --color-success-100: #d1f5db; --color-success-200: #acecbe; @@ -65,16 +85,6 @@ --color-success-700: #2a673b; --color-success-800: #225230; --color-success-900: #183921; - --color-neutral-50: #fbfbfb; - --color-neutral-100: #ebebeb; - --color-neutral-200: #dedede; - --color-neutral-300: #d1d1d1; - --color-neutral-400: #b5b5b5; - --color-neutral-500: #9a9a9a; - --color-neutral-600: #797979; - --color-neutral-700: #5b5b5b; - --color-neutral-800: #494949; - --color-neutral-900: #333333; --color-warning-50: #fffbf6; --color-warning-100: #fde9d2; --color-warning-200: #fbd9b3; @@ -85,16 +95,6 @@ --color-warning-700: #7f5121; --color-warning-800: #66421a; --color-warning-900: #3d3309; - --color-primary-50: #fcfbfe; - --color-primary-100: #f0e8fa; - --color-primary-200: #e7d9f6; - --color-primary-300: #ddc9f3; - --color-primary-400: #c8a7eb; - --color-primary-500: #b487e4; - --color-primary-600: #9363c8; - --color-primary-700: #6f4b97; - --color-primary-800: #5a3c7a; - --color-primary-900: #3e2a55; --color-error-50: #fff7f6; --color-error-100: #ffe6e4; --color-error-200: #ffd3d0; @@ -105,16 +105,16 @@ --color-error-700: #a92c37; --color-error-800: #87262d; --color-error-900: #5b1f21; - --color-tertiary-50: #fefbef; - --color-tertiary-100: #fcedae; - --color-tertiary-200: #f9de6e; - --color-tertiary-300: #f5cd2b; - --color-tertiary-400: #d4b226; - --color-tertiary-500: #b6981f; - --color-tertiary-600: #8f7818; - --color-tertiary-700: #6c5a12; - --color-tertiary-800: #57490f; - --color-tertiary-900: #3d3309; + --color-neutral-50: #fbfbfb; + --color-neutral-100: #ebebeb; + --color-neutral-200: #dedede; + --color-neutral-300: #d1d1d1; + --color-neutral-400: #b5b5b5; + --color-neutral-500: #9a9a9a; + --color-neutral-600: #797979; + --color-neutral-700: #5b5b5b; + --color-neutral-800: #494949; + --color-neutral-900: #333333; --dimensions-0: 0px; --dimensions-1: 1px; --dimensions-2: 2px; From fc0203cee6d21ab2e2432a8f1cebc675bf9377bc Mon Sep 17 00:00:00 2001 From: Jialecl <jialestrabajos@gmail.com> Date: Tue, 30 Sep 2025 13:47:20 +0200 Subject: [PATCH 06/12] Changed portal rendered location to next to the trigger component --- packages/lib/src/HalstackContext.stories.tsx | 75 +++-- packages/lib/src/date-input/DateInput.tsx | 105 +++---- packages/lib/src/dropdown/Dropdown.tsx | 131 ++++---- packages/lib/src/select/Select.tsx | 297 ++++++++++--------- packages/lib/src/text-input/TextInput.tsx | 205 ++++++------- 5 files changed, 432 insertions(+), 381 deletions(-) diff --git a/packages/lib/src/HalstackContext.stories.tsx b/packages/lib/src/HalstackContext.stories.tsx index d7ff78e80..983ed3634 100644 --- a/packages/lib/src/HalstackContext.stories.tsx +++ b/packages/lib/src/HalstackContext.stories.tsx @@ -4,6 +4,9 @@ import { Meta, StoryObj } from "@storybook/react"; import { HalstackProvider } from "./HalstackContext"; import { useState } from "react"; import DxcButton from "./button/Button"; +import DxcDateInput from "./date-input/DateInput"; +import DxcFlex from "./flex/Flex"; +import DxcSelect from "./select/Select"; export default { title: "HalstackContext", @@ -22,31 +25,65 @@ const Provider = () => { "--color-primary-700": "#2b470b", "--color-primary-800": "#1c2f07", "--color-primary-900": "#0d1503", + "--color-secondary-50": "#fff9d6", + "--color-secondary-100": "#ffed99", + "--color-secondary-200": "#ffe066", + "--color-secondary-300": "#e6c84d", + "--color-secondary-400": "#ccad33", + "--color-secondary-500": "#b39426", + "--color-secondary-600": "#8f741f", + "--color-secondary-700": "#6b5517", + "--color-secondary-800": "#47370f", + "--color-secondary-900": "#241b08", }); + const options = [ + { label: "Option 01", value: "1" }, + { label: "Option 02", value: "2" }, + { label: "Option 03", value: "3" }, + { label: "Option 04", value: "4" }, + ]; return ( <> <ExampleContainer> <Title title="Default" theme="light" level={4} /> <HalstackProvider opinionatedTheme={newTheme}> - <DxcButton - label="Primary" - semantic="default" - onClick={() => - setNewTheme({ - "--color-primary-50": "#ffd6e7", - "--color-primary-100": "#ff99c2", - "--color-primary-200": "#ff66a3", - "--color-primary-300": "#e05584", - "--color-primary-400": "#c5446d", - "--color-primary-500": "#a83659", - "--color-primary-600": "#872b47", - "--color-primary-700": "#661f35", - "--color-primary-800": "#441423", - "--color-primary-900": "#220a12", - }) - } - size={{ height: "small" }} - /> + <DxcFlex gap="var(--spacing-padding-l)" direction="column" alignItems="baseline"> + <DxcButton + label="Primary" + semantic="default" + onClick={() => + setNewTheme({ + "--color-primary-50": "#ffd6e7", + "--color-primary-100": "#ff99c2", + "--color-primary-200": "#ff66a3", + "--color-primary-300": "#e05584", + "--color-primary-400": "#c5446d", + "--color-primary-500": "#a83659", + "--color-primary-600": "#872b47", + "--color-primary-700": "#661f35", + "--color-primary-800": "#441423", + "--color-primary-900": "#220a12", + "--color-brown-50": "#f3e6db", + "--color-secondary-100": "#e2c7a9", + "--color-secondary-200": "#d1a577", + "--color-secondary-300": "#b88252", + "--color-secondary-400": "#99673f", + "--color-secondary-500": "#7a5232", + "--color-secondary-600": "#5c3f26", + "--color-secondary-700": "#3e2b19", + "--color-secondary-800": "#21170d", + "--color-secondary-900": "#100b06", + }) + } + size={{ height: "small" }} + /> + <DxcButton label="Primary" semantic="default" mode="secondary" size={{ height: "small" }} /> + <DxcButton label="Primary" semantic="default" mode="tertiary" size={{ height: "small" }} /> + <DxcButton label="Primary" semantic="info" size={{ height: "small" }} /> + <DxcButton label="Primary" semantic="info" mode="secondary" size={{ height: "small" }} /> + <DxcDateInput /> + <DxcSelect options={options} /> + </DxcFlex> </HalstackProvider> </ExampleContainer> </> diff --git a/packages/lib/src/date-input/DateInput.tsx b/packages/lib/src/date-input/DateInput.tsx index 8175d0b49..a73efc7ab 100644 --- a/packages/lib/src/date-input/DateInput.tsx +++ b/packages/lib/src/date-input/DateInput.tsx @@ -286,58 +286,63 @@ const DxcDateInput = forwardRef<RefType, DateInputPropsType>( }, [isOpen, disabled, calendarId]); return ( - <DateInputContainer margin={margin} size={size} ref={ref}> - {label && ( - <Label - htmlFor={dateRef.current?.getElementsByTagName("input")[0]?.id} - disabled={disabled} - hasHelperText={!!helperText} - > - {label}{" "} - {optional && <OptionalLabel disabled={disabled}>{translatedLabels.formFields.optionalLabel}</OptionalLabel>} - </Label> - )} - {helperText && <HelperText disabled={disabled}>{helperText}</HelperText>} - <Popover.Root open={isOpen}> - <Popover.Trigger asChild aria-controls={undefined}> - <DxcTextInput - name={name} - defaultValue={defaultValue} - value={value ?? innerValue} - placeholder={placeholder ? format.toUpperCase() : undefined} - action={{ - onClick: openCalendar, - icon: "filled_calendar_today", - title: "Select date", - }} - clearable={clearable} + <> + <DateInputContainer margin={margin} size={size} ref={ref}> + {label && ( + <Label + htmlFor={dateRef.current?.getElementsByTagName("input")[0]?.id} disabled={disabled} - readOnly={readOnly} - optional={optional} - onChange={handleOnChange} - onBlur={handleOnBlur} - error={error} - autocomplete={autocomplete} - size={size} - tabIndex={tabIndex} - ref={dateRef} - ariaLabel={ariaLabel} - /> - </Popover.Trigger> - <Popover.Portal> - <StyledPopoverContent - sideOffset={sideOffset} - align="end" - aria-modal - onBlur={handleDatePickerOnBlur} - onKeyDown={handleDatePickerEscKeydown} - ref={popoverContentRef} + hasHelperText={!!helperText} > - <DatePicker id={calendarId} onDateSelect={handleCalendarOnClick} date={dayjsDate} /> - </StyledPopoverContent> - </Popover.Portal> - </Popover.Root> - </DateInputContainer> + {label}{" "} + {optional && ( + <OptionalLabel disabled={disabled}>{translatedLabels.formFields.optionalLabel}</OptionalLabel> + )} + </Label> + )} + {helperText && <HelperText disabled={disabled}>{helperText}</HelperText>} + <Popover.Root open={isOpen}> + <Popover.Trigger asChild aria-controls={undefined}> + <DxcTextInput + name={name} + defaultValue={defaultValue} + value={value ?? innerValue} + placeholder={placeholder ? format.toUpperCase() : undefined} + action={{ + onClick: openCalendar, + icon: "filled_calendar_today", + title: "Select date", + }} + clearable={clearable} + disabled={disabled} + readOnly={readOnly} + optional={optional} + onChange={handleOnChange} + onBlur={handleOnBlur} + error={error} + autocomplete={autocomplete} + size={size} + tabIndex={tabIndex} + ref={dateRef} + ariaLabel={ariaLabel} + /> + </Popover.Trigger> + <Popover.Portal container={document.getElementById(`${calendarId}-portal`)}> + <StyledPopoverContent + sideOffset={sideOffset} + align="end" + aria-modal + onBlur={handleDatePickerOnBlur} + onKeyDown={handleDatePickerEscKeydown} + ref={popoverContentRef} + > + <DatePicker id={calendarId} onDateSelect={handleCalendarOnClick} date={dayjsDate} /> + </StyledPopoverContent> + </Popover.Portal> + </Popover.Root> + </DateInputContainer> + <div id={`${calendarId}-portal`}></div> + </> ); } ); diff --git a/packages/lib/src/dropdown/Dropdown.tsx b/packages/lib/src/dropdown/Dropdown.tsx index 905b419b8..d47b24b19 100644 --- a/packages/lib/src/dropdown/Dropdown.tsx +++ b/packages/lib/src/dropdown/Dropdown.tsx @@ -251,71 +251,74 @@ const DxcDropdown = ({ }, [visualFocusIndex]); return ( - <DropdownContainer - onMouseEnter={!disabled && expandOnHover ? handleOnOpenMenu : undefined} - onMouseLeave={!disabled && expandOnHover ? handleOnCloseMenu : undefined} - onBlur={!disabled ? handleOnBlur : undefined} - margin={margin} - size={size} - > - <Popover.Root open={isOpen}> - <Tooltip label={title}> - <Popover.Trigger asChild type={undefined}> - <DropdownTrigger - onClick={handleTriggerOnClick} - onKeyDown={handleTriggerOnKeyDown} - onBlur={(event) => { - event.stopPropagation(); - }} - disabled={disabled} - label={label} - margin={margin} - size={size} - id={triggerId} - aria-haspopup="true" - aria-controls={isOpen ? menuId : undefined} - aria-expanded={isOpen ? true : undefined} - aria-label="Show options" - tabIndex={tabIndex} - ref={triggerRef} - > - <DropdownTriggerContent iconPosition={iconPosition}> - {icon && ( - <DropdownTriggerIcon - disabled={disabled} - role={typeof icon === "string" ? undefined : "img"} - aria-hidden - > - {typeof icon === "string" ? <DxcIcon icon={icon} /> : icon} - </DropdownTriggerIcon> + <> + <DropdownContainer + onMouseEnter={!disabled && expandOnHover ? handleOnOpenMenu : undefined} + onMouseLeave={!disabled && expandOnHover ? handleOnCloseMenu : undefined} + onBlur={!disabled ? handleOnBlur : undefined} + margin={margin} + size={size} + > + <Popover.Root open={isOpen}> + <Tooltip label={title}> + <Popover.Trigger asChild type={undefined}> + <DropdownTrigger + onClick={handleTriggerOnClick} + onKeyDown={handleTriggerOnKeyDown} + onBlur={(event) => { + event.stopPropagation(); + }} + disabled={disabled} + label={label} + margin={margin} + size={size} + id={triggerId} + aria-haspopup="true" + aria-controls={isOpen ? menuId : undefined} + aria-expanded={isOpen ? true : undefined} + aria-label="Show options" + tabIndex={tabIndex} + ref={triggerRef} + > + <DropdownTriggerContent iconPosition={iconPosition}> + {icon && ( + <DropdownTriggerIcon + disabled={disabled} + role={typeof icon === "string" ? undefined : "img"} + aria-hidden + > + {typeof icon === "string" ? <DxcIcon icon={icon} /> : icon} + </DropdownTriggerIcon> + )} + {label && <DropdownTriggerLabel>{label}</DropdownTriggerLabel>} + </DropdownTriggerContent> + {!caretHidden && ( + <CaretIcon disabled={disabled}> + <DxcIcon icon={isOpen ? "keyboard_arrow_up" : "keyboard_arrow_down"} /> + </CaretIcon> )} - {label && <DropdownTriggerLabel>{label}</DropdownTriggerLabel>} - </DropdownTriggerContent> - {!caretHidden && ( - <CaretIcon disabled={disabled}> - <DxcIcon icon={isOpen ? "keyboard_arrow_up" : "keyboard_arrow_down"} /> - </CaretIcon> - )} - </DropdownTrigger> - </Popover.Trigger> - </Tooltip> - <Popover.Portal> - <Popover.Content aria-label="Dropdown options" asChild sideOffset={1}> - <DropdownMenu - id={menuId} - dropdownTriggerId={triggerId} - options={options} - iconsPosition={optionsIconPosition} - visualFocusIndex={visualFocusIndex} - menuItemOnClick={handleMenuItemOnClick} - onKeyDown={handleMenuOnKeyDown} - styles={{ width }} - ref={menuRef} - /> - </Popover.Content> - </Popover.Portal> - </Popover.Root> - </DropdownContainer> + </DropdownTrigger> + </Popover.Trigger> + </Tooltip> + <Popover.Portal container={document.getElementById(`${id}-portal`)}> + <Popover.Content aria-label="Dropdown options" asChild sideOffset={1}> + <DropdownMenu + id={menuId} + dropdownTriggerId={triggerId} + options={options} + iconsPosition={optionsIconPosition} + visualFocusIndex={visualFocusIndex} + menuItemOnClick={handleMenuItemOnClick} + onKeyDown={handleMenuOnKeyDown} + styles={{ width }} + ref={menuRef} + /> + </Popover.Content> + </Popover.Portal> + </Popover.Root> + </DropdownContainer> + <div id={`${id}-portal`}></div> + </> ); }; diff --git a/packages/lib/src/select/Select.tsx b/packages/lib/src/select/Select.tsx index 2dd32f93b..d09d31011 100644 --- a/packages/lib/src/select/Select.tsx +++ b/packages/lib/src/select/Select.tsx @@ -478,158 +478,161 @@ const DxcSelect = forwardRef<RefType, SelectPropsType>( ); return ( - <SelectContainer margin={margin} ref={ref} size={size}> - {label && ( - <Label - disabled={disabled} - hasMargin={!helperText} - id={labelId} - onClick={() => { - selectRef?.current?.focus(); - }} - > - {label} {optional && <span>{translatedLabels.formFields.optionalLabel}</span>} - </Label> - )} - {helperText && ( - <HelperText disabled={disabled} hasMargin> - {helperText} - </HelperText> - )} - <Popover.Root open={isOpen}> - <Popover.Trigger asChild type={undefined}> - <Select - aria-activedescendant={visualFocusIndex >= 0 ? `option-${visualFocusIndex}` : undefined} - aria-controls={isOpen ? listboxId : undefined} - aria-disabled={disabled} - aria-errormessage={error ? errorId : undefined} - aria-expanded={isOpen} - aria-haspopup="listbox" - aria-invalid={!!error} - aria-label={label ? undefined : ariaLabel} - aria-labelledby={label ? labelId : undefined} - aria-required={!disabled && !optional} + <> + <SelectContainer margin={margin} ref={ref} size={size}> + {label && ( + <Label disabled={disabled} - error={!!error} - id={selectInputId} - onBlur={handleOnBlur} - onClick={handleOnClick} - onFocus={handleOnFocus} - onKeyDown={handleOnKeyDown} - ref={selectRef} - role="combobox" - tabIndex={disabled ? -1 : tabIndex} + hasMargin={!helperText} + id={labelId} + onClick={() => { + selectRef?.current?.focus(); + }} > - {multiple && Array.isArray(selectedOption) && selectedOption.length > 0 && ( - <SelectionIndicator disabled={disabled}> - <SelectionNumber disabled={disabled}>{selectedOption.length}</SelectionNumber> - <Tooltip label={translatedLabels.select.actionClearSelectionTitle}> - <ClearOptionsAction - aria-label={translatedLabels.select.actionClearSelectionTitle} - disabled={disabled} - onClick={handleClearOptionsActionOnClick} - onMouseDown={(event) => { - // Avoid input to lose focus when pressed - event.preventDefault(); - }} - tabIndex={-1} - > - <DxcIcon icon="clear" /> - </ClearOptionsAction> - </Tooltip> - </SelectionIndicator> - )} - <TooltipWrapper condition={hasTooltip} label={getSelectedOptionLabel(placeholder, selectedOption)}> - <SearchableValueContainer> - <input - disabled={disabled} - name={name} - type="hidden" - value={ - multiple - ? (Array.isArray(value) ? value : Array.isArray(innerValue) ? innerValue : []).join(",") - : (value ?? innerValue) - } - /> - {searchable && ( - <SearchInput - aria-labelledby={label ? labelId : undefined} - autoComplete="nope" - autoCorrect="nope" + {label} {optional && <span>{translatedLabels.formFields.optionalLabel}</span>} + </Label> + )} + {helperText && ( + <HelperText disabled={disabled} hasMargin> + {helperText} + </HelperText> + )} + <Popover.Root open={isOpen}> + <Popover.Trigger asChild type={undefined}> + <Select + aria-activedescendant={visualFocusIndex >= 0 ? `option-${visualFocusIndex}` : undefined} + aria-controls={isOpen ? listboxId : undefined} + aria-disabled={disabled} + aria-errormessage={error ? errorId : undefined} + aria-expanded={isOpen} + aria-haspopup="listbox" + aria-invalid={!!error} + aria-label={label ? undefined : ariaLabel} + aria-labelledby={label ? labelId : undefined} + aria-required={!disabled && !optional} + disabled={disabled} + error={!!error} + id={selectInputId} + onBlur={handleOnBlur} + onClick={handleOnClick} + onFocus={handleOnFocus} + onKeyDown={handleOnKeyDown} + ref={selectRef} + role="combobox" + tabIndex={disabled ? -1 : tabIndex} + > + {multiple && Array.isArray(selectedOption) && selectedOption.length > 0 && ( + <SelectionIndicator disabled={disabled}> + <SelectionNumber disabled={disabled}>{selectedOption.length}</SelectionNumber> + <Tooltip label={translatedLabels.select.actionClearSelectionTitle}> + <ClearOptionsAction + aria-label={translatedLabels.select.actionClearSelectionTitle} + disabled={disabled} + onClick={handleClearOptionsActionOnClick} + onMouseDown={(event) => { + // Avoid input to lose focus when pressed + event.preventDefault(); + }} + tabIndex={-1} + > + <DxcIcon icon="clear" /> + </ClearOptionsAction> + </Tooltip> + </SelectionIndicator> + )} + <TooltipWrapper condition={hasTooltip} label={getSelectedOptionLabel(placeholder, selectedOption)}> + <SearchableValueContainer> + <input disabled={disabled} - onChange={handleSearchIOnChange} - ref={selectSearchInputRef} - size={1} - value={searchValue} - /> - )} - {(!searchable || searchValue === "") && ( - <SelectedOption - atBackground={ - (multiple ? (value ?? innerValue).length === 0 : !(value ?? innerValue)) || - (searchable && isOpen) + name={name} + type="hidden" + value={ + multiple + ? (Array.isArray(value) ? value : Array.isArray(innerValue) ? innerValue : []).join(",") + : (value ?? innerValue) } - disabled={disabled} - onMouseEnter={handleOnMouseEnter} - > - {getSelectedOptionLabel(placeholder, selectedOption)} - </SelectedOption> - )} - </SearchableValueContainer> - </TooltipWrapper> - <DxcFlex alignItems="center"> - {searchable && searchValue.length > 0 && ( - <Tooltip label={translatedLabels.select.actionClearSelectionTitle}> - <DxcActionIcon - icon="clear" - onClick={handleClearSearchActionOnClick} - tabIndex={-1} - title={translatedLabels.select.actionClearSearchTitle} /> - </Tooltip> - )} - <DxcIcon icon={isOpen ? "keyboard_arrow_up" : "keyboard_arrow_down"} /> - </DxcFlex> - </Select> - </Popover.Trigger> - <Popover.Portal> - <Popover.Content - aria-label="Select options" - onCloseAutoFocus={(event) => { - // Avoid select to lose focus when the list is closed - event.preventDefault(); - }} - onOpenAutoFocus={(event) => { - // Avoid select to lose focus when the list is opened - event.preventDefault(); - }} - sideOffset={4} - style={{ zIndex: "var(--z-dropdown)" }} - > - <Listbox - ariaLabelledBy={labelId} - currentValue={value ?? innerValue} - enableSelectAll={enableSelectAll} - handleOptionOnClick={handleOptionOnClick} - handleGroupOnClick={handleSelectAllGroup} - handleSelectAllOnClick={handleSelectAllOnClick} - virtualizedHeight={virtualizedHeight} - id={listboxId} - lastOptionIndex={lastOptionIndex} - multiple={multiple} - optional={optional} - optionalItem={optionalItem} - options={searchable ? filteredOptions : options} - searchable={searchable} - selectionType={selectionType} - styles={{ width }} - visualFocusIndex={visualFocusIndex} - /> - </Popover.Content> - </Popover.Portal> - </Popover.Root> - {!disabled && typeof error === "string" && <ErrorMessage error={error} id={errorId} />} - </SelectContainer> + {searchable && ( + <SearchInput + aria-labelledby={label ? labelId : undefined} + autoComplete="nope" + autoCorrect="nope" + disabled={disabled} + onChange={handleSearchIOnChange} + ref={selectSearchInputRef} + size={1} + value={searchValue} + /> + )} + {(!searchable || searchValue === "") && ( + <SelectedOption + atBackground={ + (multiple ? (value ?? innerValue).length === 0 : !(value ?? innerValue)) || + (searchable && isOpen) + } + disabled={disabled} + onMouseEnter={handleOnMouseEnter} + > + {getSelectedOptionLabel(placeholder, selectedOption)} + </SelectedOption> + )} + </SearchableValueContainer> + </TooltipWrapper> + <DxcFlex alignItems="center"> + {searchable && searchValue.length > 0 && ( + <Tooltip label={translatedLabels.select.actionClearSelectionTitle}> + <DxcActionIcon + icon="clear" + onClick={handleClearSearchActionOnClick} + tabIndex={-1} + title={translatedLabels.select.actionClearSearchTitle} + /> + </Tooltip> + )} + <DxcIcon icon={isOpen ? "keyboard_arrow_up" : "keyboard_arrow_down"} /> + </DxcFlex> + </Select> + </Popover.Trigger> + <Popover.Portal container={document.getElementById(`${id}-portal`)}> + <Popover.Content + aria-label="Select options" + onCloseAutoFocus={(event) => { + // Avoid select to lose focus when the list is closed + event.preventDefault(); + }} + onOpenAutoFocus={(event) => { + // Avoid select to lose focus when the list is opened + event.preventDefault(); + }} + sideOffset={4} + style={{ zIndex: "var(--z-dropdown)" }} + > + <Listbox + ariaLabelledBy={labelId} + currentValue={value ?? innerValue} + enableSelectAll={enableSelectAll} + handleOptionOnClick={handleOptionOnClick} + handleGroupOnClick={handleSelectAllGroup} + handleSelectAllOnClick={handleSelectAllOnClick} + virtualizedHeight={virtualizedHeight} + id={listboxId} + lastOptionIndex={lastOptionIndex} + multiple={multiple} + optional={optional} + optionalItem={optionalItem} + options={searchable ? filteredOptions : options} + searchable={searchable} + selectionType={selectionType} + styles={{ width }} + visualFocusIndex={visualFocusIndex} + /> + </Popover.Content> + </Popover.Portal> + </Popover.Root> + {!disabled && typeof error === "string" && <ErrorMessage error={error} id={errorId} />} + </SelectContainer> + <div id={`${id}-portal`}></div> + </> ); } ); diff --git a/packages/lib/src/text-input/TextInput.tsx b/packages/lib/src/text-input/TextInput.tsx index 579f76595..b5a9840f9 100644 --- a/packages/lib/src/text-input/TextInput.tsx +++ b/packages/lib/src/text-input/TextInput.tsx @@ -165,7 +165,7 @@ const DxcTextInput = forwardRef<RefType, TextInputPropsType>( > {children} </Popover.Trigger> - <Popover.Portal> + <Popover.Portal container={document.getElementById(`${inputId}-portal`)}> <Popover.Content aria-label="Suggestions" onCloseAutoFocus={(event) => { @@ -483,118 +483,121 @@ const DxcTextInput = forwardRef<RefType, TextInputPropsType>( }, [value, innerValue, suggestions, numberInputContext]); return ( - <TextInputContainer margin={margin} ref={ref} size={size}> - {label && ( - <Label disabled={disabled} hasMargin={!helperText} htmlFor={inputId}> - {label} {optional && <span>{translatedLabels.formFields.optionalLabel}</span>} - </Label> - )} - {helperText && ( - <HelperText disabled={disabled} hasMargin> - {helperText} - </HelperText> - )} - <AutosuggestWrapper condition={hasSuggestions(suggestions)} wrapper={autosuggestWrapperFunction}> - <TextInput - disabled={disabled} - error={!!error} - onClick={handleInputContainerOnClick} - onMouseDown={handleInputContainerOnMouseDown} - readOnly={readOnly} - ref={inputContainerRef} - > - {prefix && ( - <Addon disabled={disabled} type="prefix"> - {prefix} - </Addon> - )} - <Input - alignment={alignment} - aria-activedescendant={ - hasSuggestions(suggestions) && isOpen && visualFocusIndex !== -1 - ? `suggestion-${visualFocusIndex}` - : undefined - } - aria-autocomplete={hasSuggestions(suggestions) ? "list" : undefined} - aria-controls={hasSuggestions(suggestions) ? autosuggestId : undefined} - aria-errormessage={error ? errorId : undefined} - aria-expanded={hasSuggestions(suggestions) ? isOpen : undefined} - aria-haspopup={hasSuggestions(suggestions) ? "listbox" : undefined} - aria-invalid={!!error} - aria-label={label ? undefined : ariaLabel} - aria-required={!disabled && !optional} - autoComplete={autocomplete === "off" ? "nope" : autocomplete} + <> + <TextInputContainer margin={margin} ref={ref} size={size}> + {label && ( + <Label disabled={disabled} hasMargin={!helperText} htmlFor={inputId}> + {label} {optional && <span>{translatedLabels.formFields.optionalLabel}</span>} + </Label> + )} + {helperText && ( + <HelperText disabled={disabled} hasMargin> + {helperText} + </HelperText> + )} + <AutosuggestWrapper condition={hasSuggestions(suggestions)} wrapper={autosuggestWrapperFunction}> + <TextInput disabled={disabled} - id={inputId} - name={name} - onBlur={handleInputOnBlur} - onChange={handleInputOnChange} - onFocus={!readOnly ? openSuggestions : undefined} - onKeyDown={!readOnly ? handleInputOnKeyDown : undefined} - onMouseDown={(event) => { - event.stopPropagation(); - }} - onWheel={numberInputContext?.typeNumber === "number" ? handleNumberInputWheel : undefined} - placeholder={placeholder} - pattern={pattern} + error={!!error} + onClick={handleInputContainerOnClick} + onMouseDown={handleInputContainerOnMouseDown} readOnly={readOnly} - ref={inputRef} - role={hasSuggestions(suggestions) ? "combobox" : undefined} - maxLength={maxLength} - minLength={minLength} - tabIndex={tabIndex} - type="text" - value={value ?? innerValue} - /> - <DxcFlex> - {!disabled && !readOnly && clearable && (value ?? innerValue).length > 0 && ( - <DxcActionIcon - icon="close" - onClick={handleClearActionOnClick} - tabIndex={tabIndex} - title={translatedLabels.textInput.clearFieldActionTitle} - /> + ref={inputContainerRef} + > + {prefix && ( + <Addon disabled={disabled} type="prefix"> + {prefix} + </Addon> )} - {numberInputContext?.typeNumber === "number" && numberInputContext?.showControls && ( - <> + <Input + alignment={alignment} + aria-activedescendant={ + hasSuggestions(suggestions) && isOpen && visualFocusIndex !== -1 + ? `suggestion-${visualFocusIndex}` + : undefined + } + aria-autocomplete={hasSuggestions(suggestions) ? "list" : undefined} + aria-controls={hasSuggestions(suggestions) ? autosuggestId : undefined} + aria-errormessage={error ? errorId : undefined} + aria-expanded={hasSuggestions(suggestions) ? isOpen : undefined} + aria-haspopup={hasSuggestions(suggestions) ? "listbox" : undefined} + aria-invalid={!!error} + aria-label={label ? undefined : ariaLabel} + aria-required={!disabled && !optional} + autoComplete={autocomplete === "off" ? "nope" : autocomplete} + disabled={disabled} + id={inputId} + name={name} + onBlur={handleInputOnBlur} + onChange={handleInputOnChange} + onFocus={!readOnly ? openSuggestions : undefined} + onKeyDown={!readOnly ? handleInputOnKeyDown : undefined} + onMouseDown={(event) => { + event.stopPropagation(); + }} + onWheel={numberInputContext?.typeNumber === "number" ? handleNumberInputWheel : undefined} + placeholder={placeholder} + pattern={pattern} + readOnly={readOnly} + ref={inputRef} + role={hasSuggestions(suggestions) ? "combobox" : undefined} + maxLength={maxLength} + minLength={minLength} + tabIndex={tabIndex} + type="text" + value={value ?? innerValue} + /> + <DxcFlex> + {!disabled && !readOnly && clearable && (value ?? innerValue).length > 0 && ( <DxcActionIcon - disabled={disabled} - icon="remove" - onClick={!readOnly ? handleDecrementActionOnClick : undefined} - ref={actionRef} + icon="close" + onClick={handleClearActionOnClick} tabIndex={tabIndex} - title={translatedLabels.numberInput.decrementValueTitle} + title={translatedLabels.textInput.clearFieldActionTitle} /> + )} + {numberInputContext?.typeNumber === "number" && numberInputContext?.showControls && ( + <> + <DxcActionIcon + disabled={disabled} + icon="remove" + onClick={!readOnly ? handleDecrementActionOnClick : undefined} + ref={actionRef} + tabIndex={tabIndex} + title={translatedLabels.numberInput.decrementValueTitle} + /> + <DxcActionIcon + disabled={disabled} + icon="add" + onClick={!readOnly ? handleIncrementActionOnClick : undefined} + ref={actionRef} + tabIndex={tabIndex} + title={translatedLabels.numberInput.incrementValueTitle} + /> + </> + )} + {action && ( <DxcActionIcon disabled={disabled} - icon="add" - onClick={!readOnly ? handleIncrementActionOnClick : undefined} + icon={action.icon} + onClick={!readOnly ? action.onClick : undefined} ref={actionRef} tabIndex={tabIndex} - title={translatedLabels.numberInput.incrementValueTitle} + title={action.title ?? ""} /> - </> - )} - {action && ( - <DxcActionIcon - disabled={disabled} - icon={action.icon} - onClick={!readOnly ? action.onClick : undefined} - ref={actionRef} - tabIndex={tabIndex} - title={action.title ?? ""} - /> + )} + </DxcFlex> + {suffix && ( + <Addon disabled={disabled} type="suffix"> + {suffix} + </Addon> )} - </DxcFlex> - {suffix && ( - <Addon disabled={disabled} type="suffix"> - {suffix} - </Addon> - )} - </TextInput> - </AutosuggestWrapper> - {!disabled && typeof error === "string" && <ErrorMessage error={error} id={errorId} />} - </TextInputContainer> + </TextInput> + </AutosuggestWrapper> + {!disabled && typeof error === "string" && <ErrorMessage error={error} id={errorId} />} + </TextInputContainer> + <div id={`${inputId}-portal`}></div> + </> ); } ); From f5b573c562299a5b8cf9af3ac920ca731a6cf79f Mon Sep 17 00:00:00 2001 From: Mil4n0r <morenocarmonaenrique@gmail.com> Date: Wed, 1 Oct 2025 13:03:53 +0200 Subject: [PATCH 07/12] Added exceptions for false positives in accessibility tests --- packages/lib/src/dropdown/Dropdown.stories.tsx | 15 +++++++++++++++ packages/lib/src/text-input/TextInput.stories.tsx | 15 +++++++++++++++ .../rules/specific/date-input/disabledRules.ts | 4 +++- .../rules/specific/dropdown/disabledRules.ts | 11 +++++++++++ .../rules/specific/select/disabledRules.ts | 1 + .../rules/specific/text-input/disabledRules.ts | 11 +++++++++++ 6 files changed, 56 insertions(+), 1 deletion(-) create mode 100644 packages/lib/test/accessibility/rules/specific/dropdown/disabledRules.ts create mode 100644 packages/lib/test/accessibility/rules/specific/text-input/disabledRules.ts diff --git a/packages/lib/src/dropdown/Dropdown.stories.tsx b/packages/lib/src/dropdown/Dropdown.stories.tsx index 6a02758f6..de8a5f1f3 100644 --- a/packages/lib/src/dropdown/Dropdown.stories.tsx +++ b/packages/lib/src/dropdown/Dropdown.stories.tsx @@ -1,7 +1,9 @@ import { Meta, StoryObj } from "@storybook/react"; import { userEvent, within } from "@storybook/test"; import ExampleContainer from "../../.storybook/components/ExampleContainer"; +import preview from "../../.storybook/preview"; import Title from "../../.storybook/components/Title"; +import disabledRules from "../../test/accessibility/rules/specific/dropdown/disabledRules"; import DxcDropdown from "./Dropdown"; import DropdownMenu from "./DropdownMenu"; import { Option } from "./types"; @@ -9,6 +11,19 @@ import { Option } from "./types"; export default { title: "Dropdown", component: DxcDropdown, + parameters: { + a11y: { + config: { + rules: [ + ...disabledRules.map((ruleId) => ({ + id: ruleId, + reviewOnFail: true, + })), + ...(preview?.parameters?.a11y?.config?.rules || []), + ], + }, + }, + }, } as Meta<typeof DxcDropdown>; const iconSVG = ( diff --git a/packages/lib/src/text-input/TextInput.stories.tsx b/packages/lib/src/text-input/TextInput.stories.tsx index 88c61e4d0..ba2d9f375 100644 --- a/packages/lib/src/text-input/TextInput.stories.tsx +++ b/packages/lib/src/text-input/TextInput.stories.tsx @@ -1,14 +1,29 @@ import { Meta, StoryObj } from "@storybook/react"; import { userEvent, within } from "@storybook/test"; +import disabledRules from "../../test/accessibility/rules/specific/table/disabledRules"; import ExampleContainer from "../../.storybook/components/ExampleContainer"; import Title from "../../.storybook/components/Title"; import DxcFlex from "../flex/Flex"; import Suggestions from "./Suggestions"; import DxcTextInput from "./TextInput"; +import preview from "../../.storybook/preview"; export default { title: "Text Input", component: DxcTextInput, + parameters: { + a11y: { + config: { + rules: [ + ...disabledRules.map((ruleId) => ({ + id: ruleId, + reviewOnFail: true, + })), + ...(preview?.parameters?.a11y?.config?.rules || []), + ], + }, + }, + }, } as Meta<typeof DxcTextInput>; const action = { diff --git a/packages/lib/test/accessibility/rules/specific/date-input/disabledRules.ts b/packages/lib/test/accessibility/rules/specific/date-input/disabledRules.ts index 728ef130b..86658b004 100644 --- a/packages/lib/test/accessibility/rules/specific/date-input/disabledRules.ts +++ b/packages/lib/test/accessibility/rules/specific/date-input/disabledRules.ts @@ -3,9 +3,11 @@ * */ const disabledRules = [ - // TODO: Remove when the false positive is fixed + // TODO: Remove when the false positives are fixed // Disable aria allowed rule to prevent false positive from gridcell role not being allowed in buttons "aria-allowed-role", + // Disable aria dialog name rule to prevent false positive from dialog role not having an accessible name + "aria-dialog-name", ]; export default disabledRules; diff --git a/packages/lib/test/accessibility/rules/specific/dropdown/disabledRules.ts b/packages/lib/test/accessibility/rules/specific/dropdown/disabledRules.ts new file mode 100644 index 000000000..c97f03bed --- /dev/null +++ b/packages/lib/test/accessibility/rules/specific/dropdown/disabledRules.ts @@ -0,0 +1,11 @@ +/** + * Array of accessibility rule IDs to be disabled in both Jest and Storybook for the dropdown component. + * + */ +const disabledRules = [ + // TODO: Find a better solution + // Disable scrollable region focusable rule to prevent errors from having scrollable dropdowns with no focusable elements + "scrollable-region-focusable", +]; + +export default disabledRules; diff --git a/packages/lib/test/accessibility/rules/specific/select/disabledRules.ts b/packages/lib/test/accessibility/rules/specific/select/disabledRules.ts index 42852ed8a..df8d72fd0 100644 --- a/packages/lib/test/accessibility/rules/specific/select/disabledRules.ts +++ b/packages/lib/test/accessibility/rules/specific/select/disabledRules.ts @@ -6,6 +6,7 @@ const disabledRules = [ // TODO: Work on nested interaction with the DxcCheckbox component to prevent these issues "nested-interactive", "scrollable-region-focusable", + "aria-required-children", ]; export default disabledRules; diff --git a/packages/lib/test/accessibility/rules/specific/text-input/disabledRules.ts b/packages/lib/test/accessibility/rules/specific/text-input/disabledRules.ts new file mode 100644 index 000000000..23f31cf80 --- /dev/null +++ b/packages/lib/test/accessibility/rules/specific/text-input/disabledRules.ts @@ -0,0 +1,11 @@ +/** + * Array of accessibility rule IDs to be disabled in both Jest and Storybook for the text input component. + * + */ +const disabledRules = [ + // TODO: Find a better solution + // Disable scrollable region focusable rule to prevent errors from having scrollable suggestions with no focusable elements + "scrollable-region-focusable", +]; + +export default disabledRules; From 2151d27ec649f8ca4c52c51ae538f7eb42799f88 Mon Sep 17 00:00:00 2001 From: Jialecl <jialestrabajos@gmail.com> Date: Wed, 1 Oct 2025 16:35:11 +0200 Subject: [PATCH 08/12] added fix to other portal elements and added position absolute to portal containers --- packages/lib/src/HalstackContext.stories.tsx | 48 +++++++++++++++++++- packages/lib/src/alert/ModalAlertWrapper.tsx | 12 ++++- packages/lib/src/date-input/DateInput.tsx | 2 +- packages/lib/src/dialog/Dialog.tsx | 11 ++++- packages/lib/src/dropdown/Dropdown.tsx | 2 +- packages/lib/src/select/Select.tsx | 2 +- packages/lib/src/text-input/TextInput.tsx | 2 +- packages/lib/src/toast/ToastsQueue.tsx | 6 ++- 8 files changed, 73 insertions(+), 12 deletions(-) diff --git a/packages/lib/src/HalstackContext.stories.tsx b/packages/lib/src/HalstackContext.stories.tsx index 983ed3634..9354e19e2 100644 --- a/packages/lib/src/HalstackContext.stories.tsx +++ b/packages/lib/src/HalstackContext.stories.tsx @@ -7,6 +7,9 @@ import DxcButton from "./button/Button"; import DxcDateInput from "./date-input/DateInput"; import DxcFlex from "./flex/Flex"; import DxcSelect from "./select/Select"; +import DxcDialog from "./dialog/Dialog"; +import DxcInset from "./inset/Inset"; +import DxcAlert from "./alert/Alert"; export default { title: "HalstackContext", @@ -14,6 +17,14 @@ export default { } as Meta<typeof HalstackProvider>; const Provider = () => { + const [isDialogVisible, setDialogVisible] = useState(false); + const [isAlertVisible, setAlertVisible] = useState(false); + const handleClickDialog = () => { + setDialogVisible(!isDialogVisible); + }; + const handleClickAlert = () => { + setAlertVisible(!isAlertVisible); + }; const [newTheme, setNewTheme] = useState<Record<string, string | number>>({ "--color-primary-50": "#d3f0b4", "--color-primary-100": "#a2df5e", @@ -35,6 +46,7 @@ const Provider = () => { "--color-secondary-700": "#6b5517", "--color-secondary-800": "#47370f", "--color-secondary-900": "#241b08", + "--color-alpha-800-a": "#9a2257cc", }); const options = [ { label: "Option 01", value: "1" }, @@ -73,16 +85,48 @@ const Provider = () => { "--color-secondary-700": "#3e2b19", "--color-secondary-800": "#21170d", "--color-secondary-900": "#100b06", + "--color-alpha-800-a": "#fabadacc", }) } size={{ height: "small" }} /> - <DxcButton label="Primary" semantic="default" mode="secondary" size={{ height: "small" }} /> - <DxcButton label="Primary" semantic="default" mode="tertiary" size={{ height: "small" }} /> + <DxcButton + label="Show Dialog" + semantic="default" + mode="secondary" + size={{ height: "small" }} + onClick={handleClickDialog} + /> + {isDialogVisible && ( + <DxcDialog onCloseClick={handleClickDialog}> + <DxcInset space="var(--spacing-padding-l)"> + <DxcButton label="Primary" semantic="default" mode="tertiary" size={{ height: "small" }} /> + <DxcButton label="Primary" semantic="info" size={{ height: "small" }} /> + <DxcButton label="Primary" semantic="info" mode="secondary" size={{ height: "small" }} /> + <DxcDateInput /> + <DxcSelect options={options} /> + </DxcInset> + </DxcDialog> + )} + <DxcButton + label="Alert visibility" + semantic="default" + mode="tertiary" + size={{ height: "small" }} + onClick={handleClickAlert} + /> <DxcButton label="Primary" semantic="info" size={{ height: "small" }} /> <DxcButton label="Primary" semantic="info" mode="secondary" size={{ height: "small" }} /> <DxcDateInput /> <DxcSelect options={options} /> + + {isAlertVisible && ( + <DxcAlert + title="Information" + mode="modal" + message={{ text: "Your document has been auto-saved.", onClose: handleClickAlert }} + /> + )} </DxcFlex> </HalstackProvider> </ExampleContainer> diff --git a/packages/lib/src/alert/ModalAlertWrapper.tsx b/packages/lib/src/alert/ModalAlertWrapper.tsx index 5456dd03a..39fa00653 100644 --- a/packages/lib/src/alert/ModalAlertWrapper.tsx +++ b/packages/lib/src/alert/ModalAlertWrapper.tsx @@ -1,5 +1,5 @@ import { createPortal } from "react-dom"; -import { useEffect } from "react"; +import { useEffect, useId, useState } from "react"; import { Global, css } from "@emotion/react"; import styled from "@emotion/styled"; import { responsiveSizes } from "../common/variables"; @@ -46,6 +46,9 @@ const ModalAlertContainer = styled.div` `; const ModalAlertWrapper = ({ condition, onClose, children }: ModalAlertWrapperProps) => { + const id = useId(); + const [portalContainer, setPortalContainer] = useState<HTMLElement | null>(null); + useEffect(() => { if (condition) { const handleModalAlertKeydown = (event: KeyboardEvent) => { @@ -61,9 +64,14 @@ const ModalAlertWrapper = ({ condition, onClose, children }: ModalAlertWrapperPr } }, [condition, onClose]); + useEffect(() => { + setPortalContainer(document.getElementById(`dialog-${id}-portal`)); + }, []); + return condition ? ( <> <BodyStyle /> + <div id={`dialog-${id}-portal`} style={{ position: "absolute" }} /> {createPortal( <Modal> <Overlay onClick={onClose} /> @@ -71,7 +79,7 @@ const ModalAlertWrapper = ({ condition, onClose, children }: ModalAlertWrapperPr <FocusLock>{children}</FocusLock> </ModalAlertContainer> </Modal>, - document.body + portalContainer || document.body )} </> ) : ( diff --git a/packages/lib/src/date-input/DateInput.tsx b/packages/lib/src/date-input/DateInput.tsx index a73efc7ab..4fb9e426b 100644 --- a/packages/lib/src/date-input/DateInput.tsx +++ b/packages/lib/src/date-input/DateInput.tsx @@ -341,7 +341,7 @@ const DxcDateInput = forwardRef<RefType, DateInputPropsType>( </Popover.Portal> </Popover.Root> </DateInputContainer> - <div id={`${calendarId}-portal`}></div> + <div id={`${calendarId}-portal`} style={{ position: "absolute" }} /> </> ); } diff --git a/packages/lib/src/dialog/Dialog.tsx b/packages/lib/src/dialog/Dialog.tsx index 720b6717f..c7f0de017 100644 --- a/packages/lib/src/dialog/Dialog.tsx +++ b/packages/lib/src/dialog/Dialog.tsx @@ -1,4 +1,4 @@ -import { useContext, useEffect } from "react"; +import { useContext, useEffect, useId, useState } from "react"; import { createPortal } from "react-dom"; import styled from "@emotion/styled"; import { responsiveSizes } from "../common/variables"; @@ -66,7 +66,13 @@ const DxcDialog = ({ tabIndex = 0, disableFocusLock = false, }: DialogPropsType): JSX.Element => { + const id = useId(); const translatedLabels = useContext(HalstackLanguageContext); + const [portalContainer, setPortalContainer] = useState<HTMLElement | null>(null); + + useEffect(() => { + setPortalContainer(document.getElementById(`dialog-${id}-portal`)); + }, []); useEffect(() => { const handleKeyDown = (event: KeyboardEvent) => { @@ -85,6 +91,7 @@ const DxcDialog = ({ return ( <> <BodyStyle /> + <div id={`dialog-${id}-portal`} style={{ position: "absolute" }} /> {createPortal( <DialogContainer> {overlay && <Overlay onClick={onBackgroundClick} />} @@ -120,7 +127,7 @@ const DxcDialog = ({ )} </Dialog> </DialogContainer>, - document.body + portalContainer || document.body )} </> ); diff --git a/packages/lib/src/dropdown/Dropdown.tsx b/packages/lib/src/dropdown/Dropdown.tsx index d47b24b19..f2b10b12b 100644 --- a/packages/lib/src/dropdown/Dropdown.tsx +++ b/packages/lib/src/dropdown/Dropdown.tsx @@ -317,7 +317,7 @@ const DxcDropdown = ({ </Popover.Portal> </Popover.Root> </DropdownContainer> - <div id={`${id}-portal`}></div> + <div id={`${id}-portal`} style={{ position: "absolute" }} /> </> ); }; diff --git a/packages/lib/src/select/Select.tsx b/packages/lib/src/select/Select.tsx index d09d31011..8d31c160f 100644 --- a/packages/lib/src/select/Select.tsx +++ b/packages/lib/src/select/Select.tsx @@ -631,7 +631,7 @@ const DxcSelect = forwardRef<RefType, SelectPropsType>( </Popover.Root> {!disabled && typeof error === "string" && <ErrorMessage error={error} id={errorId} />} </SelectContainer> - <div id={`${id}-portal`}></div> + <div id={`${id}-portal`} style={{ position: "absolute" }} /> </> ); } diff --git a/packages/lib/src/text-input/TextInput.tsx b/packages/lib/src/text-input/TextInput.tsx index b5a9840f9..2e2a5d2c9 100644 --- a/packages/lib/src/text-input/TextInput.tsx +++ b/packages/lib/src/text-input/TextInput.tsx @@ -596,7 +596,7 @@ const DxcTextInput = forwardRef<RefType, TextInputPropsType>( </AutosuggestWrapper> {!disabled && typeof error === "string" && <ErrorMessage error={error} id={errorId} />} </TextInputContainer> - <div id={`${inputId}-portal`}></div> + <div id={`${inputId}-portal`} style={{ position: "absolute" }} /> </> ); } diff --git a/packages/lib/src/toast/ToastsQueue.tsx b/packages/lib/src/toast/ToastsQueue.tsx index 859cfe548..be3337ded 100644 --- a/packages/lib/src/toast/ToastsQueue.tsx +++ b/packages/lib/src/toast/ToastsQueue.tsx @@ -1,4 +1,4 @@ -import { useCallback, useEffect, useMemo, useState } from "react"; +import { useCallback, useEffect, useId, useMemo, useState } from "react"; import { createPortal } from "react-dom"; import styled from "@emotion/styled"; import DxcToast from "./Toast"; @@ -29,6 +29,7 @@ export default function DxcToastsQueue({ children, duration = 3000 }: ToastsQueu const [toasts, setToasts] = useState<QueuedToast[]>([]); const [isMounted, setIsMounted] = useState(false); // Next.js SSR mounting issue const adjustedDuration = useMemo(() => (duration > 5000 ? 5000 : duration < 3000 ? 3000 : duration), [duration]); + const id = useId(); const remove = useCallback((id: string) => { setToasts((prevToasts) => prevToasts.filter((toast) => toast.id !== id)); @@ -49,6 +50,7 @@ export default function DxcToastsQueue({ children, duration = 3000 }: ToastsQueu return ( <ToastContext.Provider value={add}> + <div id={`toasts-${id}-portal`} style={{ position: "absolute" }} /> {isMounted && createPortal( <ToastsQueue> @@ -63,7 +65,7 @@ export default function DxcToastsQueue({ children, duration = 3000 }: ToastsQueu /> ))} </ToastsQueue>, - document.body + document.getElementById(`toasts-${id}-portal`) || document.body )} {children} </ToastContext.Provider> From ca42eaf7c9ae31518726959d5f9f8b991e715674 Mon Sep 17 00:00:00 2001 From: Jialecl <jialestrabajos@gmail.com> Date: Thu, 2 Oct 2025 10:28:05 +0200 Subject: [PATCH 09/12] Checks added to containers --- packages/lib/src/alert/ModalAlertWrapper.tsx | 19 ++--- packages/lib/src/dialog/Dialog.tsx | 75 ++++++++++---------- 2 files changed, 48 insertions(+), 46 deletions(-) diff --git a/packages/lib/src/alert/ModalAlertWrapper.tsx b/packages/lib/src/alert/ModalAlertWrapper.tsx index 39fa00653..31002edb3 100644 --- a/packages/lib/src/alert/ModalAlertWrapper.tsx +++ b/packages/lib/src/alert/ModalAlertWrapper.tsx @@ -72,15 +72,16 @@ const ModalAlertWrapper = ({ condition, onClose, children }: ModalAlertWrapperPr <> <BodyStyle /> <div id={`dialog-${id}-portal`} style={{ position: "absolute" }} /> - {createPortal( - <Modal> - <Overlay onClick={onClose} /> - <ModalAlertContainer> - <FocusLock>{children}</FocusLock> - </ModalAlertContainer> - </Modal>, - portalContainer || document.body - )} + {portalContainer && + createPortal( + <Modal> + <Overlay onClick={onClose} /> + <ModalAlertContainer> + <FocusLock>{children}</FocusLock> + </ModalAlertContainer> + </Modal>, + portalContainer + )} </> ) : ( children diff --git a/packages/lib/src/dialog/Dialog.tsx b/packages/lib/src/dialog/Dialog.tsx index c7f0de017..6a4b5d3c1 100644 --- a/packages/lib/src/dialog/Dialog.tsx +++ b/packages/lib/src/dialog/Dialog.tsx @@ -92,43 +92,44 @@ const DxcDialog = ({ <> <BodyStyle /> <div id={`dialog-${id}-portal`} style={{ position: "absolute" }} /> - {createPortal( - <DialogContainer> - {overlay && <Overlay onClick={onBackgroundClick} />} - <Dialog aria-label="Dialog" aria-modal={overlay} closable={closable} role="dialog"> - {!disableFocusLock ? ( - <FocusLock> - {children} - {closable && ( - <CloseIconActionContainer> - <DxcActionIcon - icon="close" - onClick={onCloseClick} - tabIndex={tabIndex} - title={translatedLabels.dialog.closeIconAriaLabel} - /> - </CloseIconActionContainer> - )} - </FocusLock> - ) : ( - <> - {children} - {closable && ( - <CloseIconActionContainer> - <DxcActionIcon - icon="close" - onClick={onCloseClick} - tabIndex={tabIndex} - title={translatedLabels.dialog.closeIconAriaLabel} - /> - </CloseIconActionContainer> - )} - </> - )} - </Dialog> - </DialogContainer>, - portalContainer || document.body - )} + {portalContainer && + createPortal( + <DialogContainer> + {overlay && <Overlay onClick={onBackgroundClick} />} + <Dialog aria-label="Dialog" aria-modal={overlay} closable={closable} role="dialog"> + {!disableFocusLock ? ( + <FocusLock> + {children} + {closable && ( + <CloseIconActionContainer> + <DxcActionIcon + icon="close" + onClick={onCloseClick} + tabIndex={tabIndex} + title={translatedLabels.dialog.closeIconAriaLabel} + /> + </CloseIconActionContainer> + )} + </FocusLock> + ) : ( + <> + {children} + {closable && ( + <CloseIconActionContainer> + <DxcActionIcon + icon="close" + onClick={onCloseClick} + tabIndex={tabIndex} + title={translatedLabels.dialog.closeIconAriaLabel} + /> + </CloseIconActionContainer> + )} + </> + )} + </Dialog> + </DialogContainer>, + portalContainer + )} </> ); }; From 4a4a07a425a8594d640b4472d83eae18584ffe22 Mon Sep 17 00:00:00 2001 From: Mil4n0r <morenocarmonaenrique@gmail.com> Date: Thu, 2 Oct 2025 14:18:42 +0200 Subject: [PATCH 10/12] Added rules to prevent accessibility false positives --- packages/lib/src/dialog/Dialog.stories.tsx | 13 +++++++++++++ packages/lib/src/styles/variables.css | 14 +++++++------- .../rules/specific/dialog/disabledRules.ts | 11 +++++++++++ 3 files changed, 31 insertions(+), 7 deletions(-) create mode 100644 packages/lib/test/accessibility/rules/specific/dialog/disabledRules.ts diff --git a/packages/lib/src/dialog/Dialog.stories.tsx b/packages/lib/src/dialog/Dialog.stories.tsx index 94323ddfe..4be4ad64f 100644 --- a/packages/lib/src/dialog/Dialog.stories.tsx +++ b/packages/lib/src/dialog/Dialog.stories.tsx @@ -15,11 +15,24 @@ import DxcSelect from "../select/Select"; import DxcDateInput from "../date-input/DateInput"; import DxcDropdown from "../dropdown/Dropdown"; import DxcTooltip from "../tooltip/Tooltip"; +import disabledRules from "../../test/accessibility/rules/specific/dialog/disabledRules"; +import preview from "../../.storybook/preview"; export default { title: "Dialog", component: DxcDialog, parameters: { + a11y: { + config: { + rules: [ + ...disabledRules.map((ruleId) => ({ + id: ruleId, + reviewOnFail: true, + })), + ...(preview?.parameters?.a11y?.config?.rules || []), + ], + }, + }, viewport: { viewports: INITIAL_VIEWPORTS, }, diff --git a/packages/lib/src/styles/variables.css b/packages/lib/src/styles/variables.css index 783824f2b..d88b33dc9 100644 --- a/packages/lib/src/styles/variables.css +++ b/packages/lib/src/styles/variables.css @@ -12,15 +12,15 @@ --z-header-menu: 210; /* UI components */ - --z-dialog: 300; - --z-date-input: 310; - --z-dropdown: 320; - --z-textinput: 330; - --z-select: 340; + --z-date-input: 300; + --z-dropdown: 310; + --z-textinput: 320; + --z-select: 330; /* Modals and overlays */ - --z-spinner-overlay: 400; - --z-progressbar-overlay: 410; + --z-dialog: 400; + --z-spinner-overlay: 410; + --z-progressbar-overlay: 420; --z-alert: 430; /* Notifications */ diff --git a/packages/lib/test/accessibility/rules/specific/dialog/disabledRules.ts b/packages/lib/test/accessibility/rules/specific/dialog/disabledRules.ts new file mode 100644 index 000000000..da2567170 --- /dev/null +++ b/packages/lib/test/accessibility/rules/specific/dialog/disabledRules.ts @@ -0,0 +1,11 @@ +/** + * Array of accessibility rule IDs to be disabled in both Jest and Storybook for the dialog component. + * + */ +const disabledRules = [ + // TODO: Remove when the false positives are fixed + // Disable aria dialog name rule to prevent false positive from dialog role not having an accessible name + "aria-dialog-name", +]; + +export default disabledRules; From f2be06248e35feae9ab33c39ffd3134e5f23bca0 Mon Sep 17 00:00:00 2001 From: Jialecl <jialestrabajos@gmail.com> Date: Thu, 2 Oct 2025 14:56:02 +0200 Subject: [PATCH 11/12] Expanded added to visual tests --- packages/lib/src/resultset-table/ResultsetTable.stories.tsx | 2 +- packages/lib/src/table/Table.stories.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/lib/src/resultset-table/ResultsetTable.stories.tsx b/packages/lib/src/resultset-table/ResultsetTable.stories.tsx index e7e00d1c4..b4f347d27 100644 --- a/packages/lib/src/resultset-table/ResultsetTable.stories.tsx +++ b/packages/lib/src/resultset-table/ResultsetTable.stories.tsx @@ -695,7 +695,7 @@ const ResultsetTableLast = () => ( ); const ResultsetActionsCellDropdown = () => ( - <ExampleContainer> + <ExampleContainer expanded> <Title title="Dropdown Action" theme="light" level={4} /> <DxcResultsetTable columns={columns} rows={rowsIcon} itemsPerPage={2} /> </ExampleContainer> diff --git a/packages/lib/src/table/Table.stories.tsx b/packages/lib/src/table/Table.stories.tsx index fc7fdf018..d3bccfdba 100644 --- a/packages/lib/src/table/Table.stories.tsx +++ b/packages/lib/src/table/Table.stories.tsx @@ -565,7 +565,7 @@ const Table = () => ( ); const ActionsCellDropdown = () => ( - <ExampleContainer> + <ExampleContainer expanded> <Title title="Dropdown Action" theme="light" level={4} /> <DxcTable> <tr> From 6295b6879b1934f28e48872b681375c9d493296e Mon Sep 17 00:00:00 2001 From: Jialecl <jialestrabajos@gmail.com> Date: Thu, 2 Oct 2025 15:05:53 +0200 Subject: [PATCH 12/12] changed height to max-height in the table --- packages/lib/src/styles/tables/tablesStyles.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/lib/src/styles/tables/tablesStyles.tsx b/packages/lib/src/styles/tables/tablesStyles.tsx index e6d4eaa8c..3f6a28490 100644 --- a/packages/lib/src/styles/tables/tablesStyles.tsx +++ b/packages/lib/src/styles/tables/tablesStyles.tsx @@ -5,7 +5,7 @@ import { calculateWidth } from "../../table/utils"; import { spaces } from "../../common/variables"; export const TableContainer = styled.div<{ margin: TablePropsType["margin"] }>` - height: 100%; + max-height: 100%; width: ${({ margin }) => calculateWidth(margin)}; margin: ${({ margin }) => (margin && typeof margin !== "object" ? spaces[margin] : "0px")}; margin-top: ${({ margin }) => (margin && typeof margin === "object" && margin.top ? spaces[margin.top] : "")};