diff --git a/packages/calcite-components/src/components.d.ts b/packages/calcite-components/src/components.d.ts index 7f6ae2a934b..b9bb50416b7 100644 --- a/packages/calcite-components/src/components.d.ts +++ b/packages/calcite-components/src/components.d.ts @@ -9,93 +9,193 @@ import { Alignment, Appearance, CollapseDirection, FlipContext, IconType, Kind, import { RequestedItem } from "./components/accordion/interfaces"; import { IconNameOrString } from "./components/icon/interfaces"; import { RequestedItem as RequestedItem1 } from "./components/accordion-item/interfaces"; +import { ActionMessages } from "./components/action/assets/action/t9n"; import { FlipPlacement, LogicalPlacement, MenuPlacement, OverlayPositioning, ReferenceElement } from "./utils/floating-ui"; +import { ActionBarMessages } from "./components/action-bar/assets/action-bar/t9n"; import { Columns } from "./components/action-group/interfaces"; +import { ActionGroupMessages } from "./components/action-group/assets/action-group/t9n"; +import { ActionPadMessages } from "./components/action-pad/assets/action-pad/t9n"; import { AlertDuration, AlertQueue } from "./components/alert/interfaces"; import { NumberingSystem } from "./utils/locale"; +import { AlertMessages } from "./components/alert/assets/alert/t9n"; import { HeadingLevel } from "./components/functional/Heading"; +import { BlockMessages } from "./components/block/assets/block/t9n"; import { BlockSectionToggleDisplay } from "./components/block-section/interfaces"; +import { BlockSectionMessages } from "./components/block-section/assets/block-section/t9n"; import { ButtonAlignment, DropdownIconType } from "./components/button/interfaces"; +import { ButtonMessages } from "./components/button/assets/button/t9n"; +import { CardMessages } from "./components/card/assets/card/t9n"; import { ArrowType, AutoplayType } from "./components/carousel/interfaces"; +import { CarouselMessages } from "./components/carousel/assets/carousel/t9n"; import { MutableValidityState } from "./utils/form"; +import { ChipMessages } from "./components/chip/assets/chip/t9n"; import { ColorValue, InternalColor } from "./components/color-picker/interfaces"; import { Format } from "./components/color-picker/utils"; +import { ColorPickerMessages } from "./components/color-picker/assets/color-picker/t9n"; import { ComboboxChildElement, SelectionDisplay } from "./components/combobox/interfaces"; +import { ComboboxMessages } from "./components/combobox/assets/combobox/t9n"; +import { DatePickerMessages } from "./components/date-picker/assets/date-picker/t9n"; import { DateLocaleData } from "./components/date-picker/utils"; import { HoverRange } from "./utils/date"; +import { DialogMessages } from "./components/dialog/assets/dialog/t9n"; import { OverlayPositioning as OverlayPositioning1 } from "./components"; import { DialogPlacement } from "./components/dialog/interfaces"; import { RequestedItem as RequestedItem2 } from "./components/dropdown-group/interfaces"; import { ItemKeyboardEvent } from "./components/dropdown/interfaces"; +import { FilterMessages } from "./components/filter/assets/filter/t9n"; import { FlowItemLikeElement } from "./components/flow/interfaces"; +import { FlowItemMessages } from "./components/flow-item/assets/flow-item/t9n"; import { ColorStop, DataSeries } from "./components/graph/interfaces"; +import { HandleMessages } from "./components/handle/assets/handle/t9n"; import { HandleChange, HandleNudge } from "./components/handle/interfaces"; +import { InlineEditableMessages } from "./components/inline-editable/assets/inline-editable/t9n"; import { InputPlacement } from "./components/input/interfaces"; +import { InputMessages } from "./components/input/assets/input/t9n"; +import { InputDatePickerMessages } from "./components/input-date-picker/assets/input-date-picker/t9n"; +import { InputNumberMessages } from "./components/input-number/assets/input-number/t9n"; +import { InputTextMessages } from "./components/input-text/assets/input-text/t9n"; +import { InputTimePickerMessages } from "./components/input-time-picker/assets/input-time-picker/t9n"; +import { TimePickerMessages } from "./components/time-picker/assets/time-picker/t9n"; +import { InputTimeZoneMessages } from "./components/input-time-zone/assets/input-time-zone/t9n"; import { OffsetStyle, TimeZoneMode } from "./components/input-time-zone/interfaces"; import { ListDragDetail } from "./components/list/interfaces"; import { ItemData } from "./components/list-item/interfaces"; +import { ListMessages } from "./components/list/assets/list/t9n"; import { SelectionAppearance } from "./components/list/resources"; +import { ListItemMessages } from "./components/list-item/assets/list-item/t9n"; +import { MenuMessages } from "./components/menu/assets/menu/t9n"; +import { MenuItemMessages } from "./components/menu-item/assets/menu-item/t9n"; import { MenuItemCustomEvent } from "./components/menu-item/interfaces"; import { MeterFillType, MeterLabelType } from "./components/meter/interfaces"; +import { ModalMessages } from "./components/modal/assets/modal/t9n"; +import { NoticeMessages } from "./components/notice/assets/notice/t9n"; +import { PaginationMessages } from "./components/pagination/assets/pagination/t9n"; +import { PanelMessages } from "./components/panel/assets/panel/t9n"; import { ItemData as ItemData1, ListFocusId } from "./components/pick-list/shared-list-logic"; import { ICON_TYPES } from "./components/pick-list/resources"; +import { PickListItemMessages } from "./components/pick-list-item/assets/pick-list-item/t9n"; +import { PopoverMessages } from "./components/popover/assets/popover/t9n"; +import { RatingMessages } from "./components/rating/assets/rating/t9n"; +import { ScrimMessages } from "./components/scrim/assets/scrim/t9n"; import { DisplayMode } from "./components/sheet/interfaces"; import { DisplayMode as DisplayMode1 } from "./components/shell-panel/interfaces"; +import { ShellPanelMessages } from "./components/shell-panel/assets/shell-panel/t9n"; import { DragDetail } from "./utils/sortableComponent"; import { StepperItemChangeEventDetail, StepperItemEventDetail, StepperItemKeyEventDetail, StepperLayout } from "./components/stepper/interfaces"; +import { StepperMessages } from "./components/stepper/assets/stepper/t9n"; +import { StepperItemMessages } from "./components/stepper-item/assets/stepper-item/t9n"; import { TabID, TabLayout, TabPosition } from "./components/tabs/interfaces"; +import { TabNavMessages } from "./components/tab-nav/assets/tab-nav/t9n"; import { Element } from "@stencil/core"; import { TabChangeEventDetail, TabCloseEventDetail } from "./components/tab/interfaces"; +import { TabTitleMessages } from "./components/tab-title/assets/tab-title/t9n"; import { RowType, TableInteractionMode, TableLayout, TableRowFocusEvent, TableSelectionDisplay } from "./components/table/interfaces"; +import { TableMessages } from "./components/table/assets/table/t9n"; +import { TableCellMessages } from "./components/table-cell/assets/table-cell/t9n"; +import { TableHeaderMessages } from "./components/table-header/assets/table-header/t9n"; +import { TextAreaMessages } from "./components/text-area/assets/text-area/t9n"; import { TileSelectType } from "./components/tile-select/interfaces"; import { TileSelectGroupLayout } from "./components/tile-select-group/interfaces"; +import { TipMessages } from "./components/tip/assets/tip/t9n"; +import { TipManagerMessages } from "./components/tip-manager/assets/tip-manager/t9n"; import { TreeItemSelectDetail } from "./components/tree-item/interfaces"; +import { ValueListMessages } from "./components/value-list/assets/value-list/t9n"; import { ListItemAndHandle } from "./components/value-list-item/interfaces"; export { Alignment, Appearance, CollapseDirection, FlipContext, IconType, Kind, Layout, LogicalFlowPosition, Position, Scale, SelectionAppearance as SelectionAppearance1, SelectionMode, Status, Width } from "./components/interfaces"; export { RequestedItem } from "./components/accordion/interfaces"; export { IconNameOrString } from "./components/icon/interfaces"; export { RequestedItem as RequestedItem1 } from "./components/accordion-item/interfaces"; +export { ActionMessages } from "./components/action/assets/action/t9n"; export { FlipPlacement, LogicalPlacement, MenuPlacement, OverlayPositioning, ReferenceElement } from "./utils/floating-ui"; +export { ActionBarMessages } from "./components/action-bar/assets/action-bar/t9n"; export { Columns } from "./components/action-group/interfaces"; +export { ActionGroupMessages } from "./components/action-group/assets/action-group/t9n"; +export { ActionPadMessages } from "./components/action-pad/assets/action-pad/t9n"; export { AlertDuration, AlertQueue } from "./components/alert/interfaces"; export { NumberingSystem } from "./utils/locale"; +export { AlertMessages } from "./components/alert/assets/alert/t9n"; export { HeadingLevel } from "./components/functional/Heading"; +export { BlockMessages } from "./components/block/assets/block/t9n"; export { BlockSectionToggleDisplay } from "./components/block-section/interfaces"; +export { BlockSectionMessages } from "./components/block-section/assets/block-section/t9n"; export { ButtonAlignment, DropdownIconType } from "./components/button/interfaces"; +export { ButtonMessages } from "./components/button/assets/button/t9n"; +export { CardMessages } from "./components/card/assets/card/t9n"; export { ArrowType, AutoplayType } from "./components/carousel/interfaces"; +export { CarouselMessages } from "./components/carousel/assets/carousel/t9n"; export { MutableValidityState } from "./utils/form"; +export { ChipMessages } from "./components/chip/assets/chip/t9n"; export { ColorValue, InternalColor } from "./components/color-picker/interfaces"; export { Format } from "./components/color-picker/utils"; +export { ColorPickerMessages } from "./components/color-picker/assets/color-picker/t9n"; export { ComboboxChildElement, SelectionDisplay } from "./components/combobox/interfaces"; +export { ComboboxMessages } from "./components/combobox/assets/combobox/t9n"; +export { DatePickerMessages } from "./components/date-picker/assets/date-picker/t9n"; export { DateLocaleData } from "./components/date-picker/utils"; export { HoverRange } from "./utils/date"; +export { DialogMessages } from "./components/dialog/assets/dialog/t9n"; export { OverlayPositioning as OverlayPositioning1 } from "./components"; export { DialogPlacement } from "./components/dialog/interfaces"; export { RequestedItem as RequestedItem2 } from "./components/dropdown-group/interfaces"; export { ItemKeyboardEvent } from "./components/dropdown/interfaces"; +export { FilterMessages } from "./components/filter/assets/filter/t9n"; export { FlowItemLikeElement } from "./components/flow/interfaces"; +export { FlowItemMessages } from "./components/flow-item/assets/flow-item/t9n"; export { ColorStop, DataSeries } from "./components/graph/interfaces"; +export { HandleMessages } from "./components/handle/assets/handle/t9n"; export { HandleChange, HandleNudge } from "./components/handle/interfaces"; +export { InlineEditableMessages } from "./components/inline-editable/assets/inline-editable/t9n"; export { InputPlacement } from "./components/input/interfaces"; +export { InputMessages } from "./components/input/assets/input/t9n"; +export { InputDatePickerMessages } from "./components/input-date-picker/assets/input-date-picker/t9n"; +export { InputNumberMessages } from "./components/input-number/assets/input-number/t9n"; +export { InputTextMessages } from "./components/input-text/assets/input-text/t9n"; +export { InputTimePickerMessages } from "./components/input-time-picker/assets/input-time-picker/t9n"; +export { TimePickerMessages } from "./components/time-picker/assets/time-picker/t9n"; +export { InputTimeZoneMessages } from "./components/input-time-zone/assets/input-time-zone/t9n"; export { OffsetStyle, TimeZoneMode } from "./components/input-time-zone/interfaces"; export { ListDragDetail } from "./components/list/interfaces"; export { ItemData } from "./components/list-item/interfaces"; +export { ListMessages } from "./components/list/assets/list/t9n"; export { SelectionAppearance } from "./components/list/resources"; +export { ListItemMessages } from "./components/list-item/assets/list-item/t9n"; +export { MenuMessages } from "./components/menu/assets/menu/t9n"; +export { MenuItemMessages } from "./components/menu-item/assets/menu-item/t9n"; export { MenuItemCustomEvent } from "./components/menu-item/interfaces"; export { MeterFillType, MeterLabelType } from "./components/meter/interfaces"; +export { ModalMessages } from "./components/modal/assets/modal/t9n"; +export { NoticeMessages } from "./components/notice/assets/notice/t9n"; +export { PaginationMessages } from "./components/pagination/assets/pagination/t9n"; +export { PanelMessages } from "./components/panel/assets/panel/t9n"; export { ItemData as ItemData1, ListFocusId } from "./components/pick-list/shared-list-logic"; export { ICON_TYPES } from "./components/pick-list/resources"; +export { PickListItemMessages } from "./components/pick-list-item/assets/pick-list-item/t9n"; +export { PopoverMessages } from "./components/popover/assets/popover/t9n"; +export { RatingMessages } from "./components/rating/assets/rating/t9n"; +export { ScrimMessages } from "./components/scrim/assets/scrim/t9n"; export { DisplayMode } from "./components/sheet/interfaces"; export { DisplayMode as DisplayMode1 } from "./components/shell-panel/interfaces"; +export { ShellPanelMessages } from "./components/shell-panel/assets/shell-panel/t9n"; export { DragDetail } from "./utils/sortableComponent"; export { StepperItemChangeEventDetail, StepperItemEventDetail, StepperItemKeyEventDetail, StepperLayout } from "./components/stepper/interfaces"; +export { StepperMessages } from "./components/stepper/assets/stepper/t9n"; +export { StepperItemMessages } from "./components/stepper-item/assets/stepper-item/t9n"; export { TabID, TabLayout, TabPosition } from "./components/tabs/interfaces"; +export { TabNavMessages } from "./components/tab-nav/assets/tab-nav/t9n"; export { Element } from "@stencil/core"; export { TabChangeEventDetail, TabCloseEventDetail } from "./components/tab/interfaces"; +export { TabTitleMessages } from "./components/tab-title/assets/tab-title/t9n"; export { RowType, TableInteractionMode, TableLayout, TableRowFocusEvent, TableSelectionDisplay } from "./components/table/interfaces"; +export { TableMessages } from "./components/table/assets/table/t9n"; +export { TableCellMessages } from "./components/table-cell/assets/table-cell/t9n"; +export { TableHeaderMessages } from "./components/table-header/assets/table-header/t9n"; +export { TextAreaMessages } from "./components/text-area/assets/text-area/t9n"; export { TileSelectType } from "./components/tile-select/interfaces"; export { TileSelectGroupLayout } from "./components/tile-select-group/interfaces"; +export { TipMessages } from "./components/tip/assets/tip/t9n"; +export { TipManagerMessages } from "./components/tip-manager/assets/tip-manager/t9n"; export { TreeItemSelectDetail } from "./components/tree-item/interfaces"; +export { ValueListMessages } from "./components/value-list/assets/value-list/t9n"; export { ListItemAndHandle } from "./components/value-list-item/interfaces"; export namespace Components { interface CalciteAccordion { diff --git a/packages/calcite-components/src/components/accordion-item/accordion-item.e2e.ts b/packages/calcite-components/src/components/accordion-item/accordion-item.e2e.ts index 7e97b524020..4880c56c307 100644 --- a/packages/calcite-components/src/components/accordion-item/accordion-item.e2e.ts +++ b/packages/calcite-components/src/components/accordion-item/accordion-item.e2e.ts @@ -27,57 +27,55 @@ describe("calcite-accordion-item", () => { describe("theme", () => { describe("default", () => { themed( - html`content`, { - "--calcite-accordion-text-color": [ - { - shadowSelector: `.${CSS.content}`, - targetProp: "color", - }, - { - shadowSelector: `.${CSS.expandIcon}`, - targetProp: "color", - }, + "--calcite-accordion-item-text-color": { + shadowSelector: `.${CSS.description}`, + targetProp: "color", + }, + "--calcite-accordion-item-header-background-color": { + targetProp: "backgroundColor", + shadowSelector: `.${CSS.header}`, + }, + "--calcite-accordion-item-background-color": { + targetProp: "backgroundColor", + }, + "--calcite-accordion-item-expand-icon-color": { + shadowSelector: `.${CSS.expandIcon}`, + targetProp: "color", + }, + "--calcite-accordion-item-icon-color": [ { - shadowSelector: `.${CSS.description}`, + shadowSelector: `.${CSS.iconStart}`, targetProp: "color", }, - ], - "--calcite-accordion-text-color-hover": [ { - shadowSelector: `.${CSS.heading}`, + shadowSelector: `.${CSS.iconEnd}`, targetProp: "color", }, ], - "--calcite-accordion-border-color": [ - { - shadowSelector: `.${CSS.content}`, - targetProp: "borderBlockEndColor", - }, - { - shadowSelector: `.${CSS.header}`, - targetProp: "borderBlockEndColor", - }, - ], }, ); }); - describe("expanded", () => { + describe("icons", () => { themed( - html`content`, { - "--calcite-accordion-text-color-hover": [ - { - shadowSelector: `.${CSS.description}`, - targetProp: "color", - }, - ], - "--calcite-accordion-text-color-pressed": { - shadowSelector: `.${CSS.heading}`, + "--calcite-accordion-item-start-icon-color": { + shadowSelector: `.${CSS.iconStart}`, + targetProp: "color", + }, + "--calcite-accordion-item-end-icon-color": { + shadowSelector: `.${CSS.iconEnd}`, targetProp: "color", }, }, diff --git a/packages/calcite-components/src/components/accordion-item/accordion-item.scss b/packages/calcite-components/src/components/accordion-item/accordion-item.scss index 821d795b8f3..69f139c4cd7 100644 --- a/packages/calcite-components/src/components/accordion-item/accordion-item.scss +++ b/packages/calcite-components/src/components/accordion-item/accordion-item.scss @@ -3,11 +3,20 @@ * * These properties can be overridden using the component's tag as selector. * - * @prop --calcite-accordion-border-color: Specifies the component's border color. + * @prop --calcite-accordion-border-color: [Deprecate] Use --calcite-accordion-item-border-color. Specifies the component's border color. + * @prop --calcite-accordion-item-background-color: Specifies the component's background color. + * @prop --calcite-accordion-item-border-color: Specifies the component's border color. * @prop --calcite-accordion-item-content-space: Specifies the component's padding. - * @prop --calcite-accordion-text-color: Specifies the component's text color. - * @prop --calcite-accordion-text-color-hover: Specifies the component's main text color on hover. - * @prop --calcite-accordion-text-color-pressed: Specifies the component's main text color when pressed. + * @prop --calcite-accordion-item-end-icon-color: Specifies the component's end icon color. Fallback to --calcite-accordion-item-icon-color or current color. + * @prop --calcite-accordion-item-expand-icon-color: Specifies the component's expand icon color. + * @prop --calcite-accordion-item-header-background-color: Specifies the background color of the component's header. + * @prop --calcite-accordion-item-heading-text-color: Specifies the component's heading text color. + * @prop --calcite-accordion-item-icon-color: Specifies the component's default icon color. + * @prop --calcite-accordion-item-start-icon-color: Specifies the component's start icon color. Fallback to --calcite-accordion-item-icon-color or current color. + * @prop --calcite-accordion-item-text-color: Specifies the component's text color. + * @prop --calcite-accordion-text-color-hover: [Deprecated] Use --calcite-accordion-item-text-color-hover. Specifies the component's main text color on hover. + * @prop --calcite-accordion-text-color-pressed: [Deprecated] Use --calcite-accordion-item-text-color-press. Specifies the component's main text color when pressed. + * @prop --calcite-accordion-text-color: [Deprecated] Use --calcite-accordion-item-text-color. Specifies the component's text color. */ %icon-position { @@ -24,8 +33,13 @@ flex-col no-underline; - color: var(--calcite-accordion-text-color, var(--calcite-color-text-3)); + color: var(--calcite-accordion-item-text-color, var(--calcite-accordion-text-color, var(--calcite-color-text-3))); + background-color: var(--calcite-accordion-item-background-color); border-width: 0; + + .header { + background-color: var(--calcite-accordion-item-header-background-color); + } } // icon position variants for child @@ -55,7 +69,10 @@ .header { border-block-end-width: var(--calcite-border-width-sm); border-block-end-style: solid; - border-color: var(--calcite-accordion-border-color, theme("borderColor.color.2")); + border-color: var( + --calcite-accordion-item-border-color, + var(--calcite-accordion-border-color, theme("borderColor.color.2")) + ); } .header-content, @@ -84,19 +101,26 @@ .header-content { @apply focus-base flex-grow cursor-pointer; flex-direction: var(--calcite-internal-accordion-item-flex-direction); + color: var(--calcite-accordion-item-heading-text-color, var(--calcite-accordion-text-color, inherit)); &:focus { @apply focus-inset; } + // Deprecated &:focus, &:hover, &:active { - color: var(--calcite-accordion-text-color-hover, var(--calcite-color-text-2)); + color: var( + --calcite-accordion-item-heading-text-color, + var(--calcite-accordion-text-color-hover, var(--calcite-color-text-2)) + ); - .expand-icon, .heading { - color: var(--calcite-accordion-text-color-pressed, var(--calcite-color-text-1)); + color: var( + --calcite-accordion-item-heading-text-color, + var(--calcite-accordion-text-color-pressed, var(--calcite-color-text-1)) + ); } } } @@ -131,23 +155,27 @@ ease-in-out flex items-center; - margin-inline-end: var(--calcite-internal-accordion-item-icon-spacing-start); margin-inline-start: var(--calcite-internal-accordion-item-icon-spacing-end); } .icon--start { + color: var(--calcite-accordion-item-start-icon-color, var(--calcite-accordion-item-icon-color, currentColor)); margin-inline-end: var(--calcite-internal-accordion-icon-margin); } .icon--end { + color: var(--calcite-accordion-item-end-icon-color, var(--calcite-accordion-item-icon-color, currentColor)); margin-inline-end: var(--calcite-internal-accordion-icon-margin); margin-inline-start: var(--calcite-internal-accordion-icon-margin); } // accordion item icon .expand-icon { - color: var(--calcite-accordion-text-color, var(--calcite-color-text-3)); + color: var( + --calcite-accordion-item-expand-icon-color, + var(--calcite-accordion-item-text-color, var(--calcite-accordion-text-color, var(--calcite-color-text-3))) + ); margin-inline-start: var(--calcite-internal-accordion-item-icon-spacing-start); margin-inline-end: var(--calcite-internal-accordion-item-icon-spacing-end); transform: rotate(var(--calcite-internal-accordion-item-icon-rotation)); @@ -168,19 +196,31 @@ :host(:not(:focus):not(:hover):not([expanded])) { .heading { - color: var(--calcite-accordion-text-color-hover, var(--calcite-color-text-2)); + color: var( + --calcite-accordion-item-heading-text-color, + var(--calcite-accordion-item-text-color-hover, var(--calcite-color-text-2)) + ); } } :host([expanded]) { - color: var(--calcite-accordion-text-color-pressed, var(--calcite-color-text-1)); + color: var( + --calcite-accordion-item-text-color, + var(--calcite-accordion-text-color, var(--calcite-accordion-text-color-pressed, var(--calcite-color-text-1))) + ); .header { border-block-end-color: transparent; } .expand-icon { - color: var(--calcite-accordion-text-color-hover, var(--calcite-color-text-2)); + color: var( + --calcite-accordion-item-expand-icon-color, + var( + --calcite-accordion-item-text-color, + var(--calcite-accordion-text-color, var(--calcite-accordion-item-text-color-hover, var(--calcite-color-text-2))) + ) + ); transform: rotate(var(--calcite-internal-accordion-item-active-icon-rotation)); } .calcite--rtl .expand-icon { @@ -188,7 +228,10 @@ } .description { - color: var(--calcite-accordion-text-color-hover, var(--calcite-color-text-2)); + color: var( + --calcite-accordion-item-text-color, + var(--calcite-accordion-text-color, var(--calcite-accordion-item-text-color-hover, var(--calcite-color-text-2))) + ); } .content { diff --git a/packages/calcite-components/src/components/accordion/accordion.stories.ts b/packages/calcite-components/src/components/accordion/accordion.stories.ts index affe84cde28..796e8df31d0 100644 --- a/packages/calcite-components/src/components/accordion/accordion.stories.ts +++ b/packages/calcite-components/src/components/accordion/accordion.stories.ts @@ -5,7 +5,6 @@ import { placeholderImage } from "../../../.storybook/placeholder-image"; import { iconNames } from "../../../.storybook/helpers"; import { html } from "../../../support/formatting"; import { ATTRIBUTES } from "../../../.storybook/resources"; -import { setCSSVariables } from "../../tests/utils/cssTokenValues"; import { Accordion } from "./accordion"; const { scale, appearance, selectionMode } = ATTRIBUTES; @@ -218,47 +217,3 @@ const accordionItemsIconHeaderUseCases = iconHeaderUseCasesArr export const longHeading_MediumIconForLargeAccordionItem_TestOnly = (): string => html` ${accordionItemsIconHeaderUseCases} `; - -export const theming_TestOnly = (): string => - html` -
- - - ${accordionItemContent} - - - ${accordionItemContent} - - - ${accordionItemContent} - - - ${accordionItemContent} - - -
- - - ${accordionItemContent} - - - ${accordionItemContent} - - - ${accordionItemContent} - - - ${accordionItemContent} - - -
`; diff --git a/packages/calcite-components/src/custom-theme.stories.ts b/packages/calcite-components/src/custom-theme.stories.ts index 6e6adf7970f..f949d4f6cf4 100644 --- a/packages/calcite-components/src/custom-theme.stories.ts +++ b/packages/calcite-components/src/custom-theme.stories.ts @@ -10,7 +10,8 @@ import { actionPadTokens, actionGroupTokens, } from "./custom-theme/action"; -import { accordion } from "./custom-theme/accordion"; +import { accordionItemTokens } from "./custom-theme/accordion-item"; +import { accordion, accordionTokens } from "./custom-theme/accordion"; import { buttons } from "./custom-theme/button"; import { card, cardThumbnail, cardTokens } from "./custom-theme/card"; import { checkbox } from "./custom-theme/checkbox"; @@ -113,6 +114,8 @@ export default { title: "Theming/Custom Theme", args: { ...globalTokens, + ...accordionTokens, + ...accordionItemTokens, ...actionTokens, ...actionBarTokens, ...actionMenuTokens, @@ -129,6 +132,8 @@ export const themingInteractive = (args: Record): string => { export const theming_TestOnly = (): string => { return kitchenSink( { + ...accordionTokens, + ...accordionItemTokens, ...actionTokens, ...actionBarTokens, ...actionMenuTokens, diff --git a/packages/calcite-components/src/custom-theme/accordion-item.ts b/packages/calcite-components/src/custom-theme/accordion-item.ts index e58ecb4f60b..3242a32d1ec 100644 --- a/packages/calcite-components/src/custom-theme/accordion-item.ts +++ b/packages/calcite-components/src/custom-theme/accordion-item.ts @@ -1,6 +1,19 @@ import { placeholderImage } from "../../.storybook/placeholder-image"; import { html } from "../../support/formatting"; +export const accordionItemTokens = { + calciteAccordionItemBackgroundColor: "", + calciteAccordionItemBorderColor: "", + calciteAccordionItemContentSpace: "", + calciteAccordionItemEndIconColor: "", + calciteAccordionItemExpandIconColor: "", + calciteAccordionItemHeaderBackgroundColor: "", + calciteAccordionItemHeadingTextColor: "", + calciteAccordionItemIconColor: "", + calciteAccordionItemStartIconColor: "", + calciteAccordionItemTextColor: "", +}; + export const accordionItem = (idx: number): string => html` diff --git a/packages/calcite-components/src/custom-theme/accordion.ts b/packages/calcite-components/src/custom-theme/accordion.ts index f3af009055a..bf37e52279e 100644 --- a/packages/calcite-components/src/custom-theme/accordion.ts +++ b/packages/calcite-components/src/custom-theme/accordion.ts @@ -2,7 +2,20 @@ import { html } from "../../support/formatting"; import { accordionItem } from "./accordion-item"; import { tree } from "./tree"; -export const accordion = html` - ${[0, 1, 2, 3, 4].map((idx) => accordionItem(idx))} - ${tree} -`; +export const accordionTokens = { + CalciteAccordionBorderColor: "", + CalciteAccordionBackgroundColor: "", +}; +// ${[0, 1, 2, 3, 4].map((idx) => accordionItem(idx))} +// ${Array(5).map((v, idx) => accordionItem(idx))} +export const accordion = html` + ${[0, 1, 2, 3, 4].map((idx) => accordionItem(idx)).join("\n")} + ${tree} + `;