diff --git a/packages/react-components/components/stencil-generated/index.ts b/packages/react-components/components/stencil-generated/index.ts index 749d0490..4296ab8e 100644 --- a/packages/react-components/components/stencil-generated/index.ts +++ b/packages/react-components/components/stencil-generated/index.ts @@ -36,11 +36,13 @@ export const CbpHide = /*@__PURE__*/createReactComponent('cbp-icon'); export const CbpLink = /*@__PURE__*/createReactComponent('cbp-link'); export const CbpList = /*@__PURE__*/createReactComponent('cbp-list'); +export const CbpMulticol = /*@__PURE__*/createReactComponent('cbp-multicol'); export const CbpNavItem = /*@__PURE__*/createReactComponent('cbp-nav-item'); export const CbpNotice = /*@__PURE__*/createReactComponent('cbp-notice'); export const CbpPagination = /*@__PURE__*/createReactComponent('cbp-pagination'); export const CbpPanel = /*@__PURE__*/createReactComponent('cbp-panel'); export const CbpRadio = /*@__PURE__*/createReactComponent('cbp-radio'); +export const CbpResizeObserver = /*@__PURE__*/createReactComponent('cbp-resize-observer'); export const CbpSection = /*@__PURE__*/createReactComponent('cbp-section'); export const CbpSegmentedButtonGroup = /*@__PURE__*/createReactComponent('cbp-segmented-button-group'); export const CbpSkipNav = /*@__PURE__*/createReactComponent('cbp-skip-nav'); @@ -52,6 +54,7 @@ export const CbpTable = /*@__PURE__*/createReactComponent('cbp-tabs'); export const CbpTag = /*@__PURE__*/createReactComponent('cbp-tag'); export const CbpToast = /*@__PURE__*/createReactComponent('cbp-toast'); +export const CbpToggle = /*@__PURE__*/createReactComponent('cbp-toggle'); export const CbpTooltip = /*@__PURE__*/createReactComponent('cbp-tooltip'); export const CbpTypography = /*@__PURE__*/createReactComponent('cbp-typography'); export const CbpUniversalHeader = /*@__PURE__*/createReactComponent('cbp-universal-header'); diff --git a/packages/web-components/src/components/cbp-checkbox/cbp-checkbox.stories.tsx b/packages/web-components/src/components/cbp-checkbox/cbp-checkbox.stories.tsx index 163094ca..195a0415 100644 --- a/packages/web-components/src/components/cbp-checkbox/cbp-checkbox.stories.tsx +++ b/packages/web-components/src/components/cbp-checkbox/cbp-checkbox.stories.tsx @@ -15,6 +15,10 @@ export default { description: 'Specifies the `value` attribute of the slotted checkbox.', control: 'text', }, + fieldId: { + description: 'Specifies the `id` attribute of the slotted checkbox.', + control: 'text', + }, checked: { description: 'Specifies the `checked` attribute of the slotted checkbox, which represents its initial checked state only.', control: 'boolean', @@ -38,10 +42,12 @@ export default { }, }; -const Template = ({ label, name, value, checked, indeterminate, disabled, context, sx }) => { +const Template = ({ label, name, value, fieldId, checked, indeterminate, disabled, context, sx }) => { return ` this.handleChange()); } } @@ -96,7 +101,7 @@ export class CbpCheckbox { render() { return ( - diff --git a/packages/web-components/src/components/cbp-checkbox/cbp-checklist.stories.tsx b/packages/web-components/src/components/cbp-checkbox/cbp-checklist.stories.tsx new file mode 100644 index 00000000..70c5517c --- /dev/null +++ b/packages/web-components/src/components/cbp-checkbox/cbp-checklist.stories.tsx @@ -0,0 +1,269 @@ +export default { + title: 'Components/Checkbox/Checklist', + //tags: ['autodocs'], + argTypes: { + label: { + control: 'text', + }, + description: { + control: 'text', + }, + fieldId: { + control: 'text', + }, + error: { + control: 'boolean', + }, + context : { + control: 'select', + options: [ "light-inverts", "light-always", "dark-inverts", "dark-always"] + }, + sx: { + description: 'Supports adding inline styles as an object of key-value pairs comprised of CSS properties and values. Values should reference design tokens when possible.', + control: 'object', + }, + }, + args: { + label: "Checklist Group Label", + description: 'Field description.', + checkboxes: [ + { + label: "Checkbox 1", + name: "checkbox", + value: "1", + checked: false, + disabled: false + }, + { + label: "Checkbox 2", + name: "checkbox", + value: "2", + checked: false, + disabled: false + }, + { + label: "Checkbox 3", + name: "checkbox", + value: "3", + checked: false, + disabled: false + }, + { + label: "Checkbox 4", + name: "checkbox", + value: "4", + checked: false, + disabled: false + }, + ], + }, +}; + + + +function generateCheckboxes(context, checkboxes) { + const html = checkboxes.map(({ label, name, value, checked, disabled }) => { + return ` + + + ${label} + `; + }); + return html.join(''); +} + +const ChecklistTemplate = ({ checkboxes, label, description, fieldId, error, context, sx }) => { + return ` + + ${generateCheckboxes(context, checkboxes)} + + `; +}; + +export const Checklist = ChecklistTemplate.bind({}); + + + + +const ChecklistHorizontalTemplate = ({ checkboxes, label, description, fieldId, group, error, gap, breakpoint, context, sx }) => { + return ` + + + ${generateCheckboxes(context, checkboxes)} + + + `; +}; + +/* + + + ${generateCheckboxes(context, checkboxes)} + + + +*/ + +export const ChecklistHorizontal = ChecklistHorizontalTemplate.bind({}); +ChecklistHorizontal.args = { + gap: 'var(--cbp-space-5x)', + breakpoint: '35rem' +} + + + +const ChecklistMultiColumnTemplate = ({ checkboxes, gap, columns, width, label, description, fieldId, group, error, context, sx }) => { + return ` + + + ${generateCheckboxes(context, checkboxes)} + + + `; +}; + +export const ChecklistMultiColumn = ChecklistMultiColumnTemplate.bind({}); +ChecklistMultiColumn.args = { + gap: 'var(--cbp-space-4x)', + columns: '3', + width: '10rem', + checkboxes: [ + { + label: "Checkbox 1", + name: "checkbox", + value: "1", + checked: false, + disabled: false + }, + { + label: "Checkbox 2", + name: "checkbox", + value: "2", + checked: false, + disabled: false + }, + { + label: "Checkbox 3", + name: "checkbox", + value: "3", + checked: false, + disabled: false + }, + { + label: "Checkbox 4", + name: "checkbox", + value: "4", + checked: false, + disabled: false + }, + { + label: "Checkbox 5", + name: "checkbox", + value: "5", + checked: false, + disabled: false + }, + { + label: "Checkbox 6", + name: "checkbox", + value: "6", + checked: false, + disabled: false + }, + { + label: "Checkbox 7", + name: "checkbox", + value: "7", + checked: false, + disabled: false + }, + { + label: "Checkbox 8", + name: "checkbox", + value: "8", + checked: false, + disabled: false + }, + { + label: "Checkbox 9", + name: "checkbox", + value: "9", + checked: false, + disabled: false + }, + { + label: "Checkbox 10", + name: "checkbox", + value: "10", + checked: false, + disabled: false + }, + { + label: "Checkbox 11", + name: "checkbox", + value: "11", + checked: false, + disabled: false + }, + { + label: "Checkbox 12", + name: "checkbox", + value: "12", + checked: false, + disabled: false + }, + { + label: "Checkbox 13", + name: "checkbox", + value: "13", + checked: false, + disabled: false + }, + { + label: "Checkbox 14", + name: "checkbox", + value: "14", + checked: false, + disabled: false + }, + ], +} diff --git a/packages/web-components/src/components/cbp-dropdown-item/cbp-dropdown-item.scss b/packages/web-components/src/components/cbp-dropdown-item/cbp-dropdown-item.scss index df5cec65..6919d275 100644 --- a/packages/web-components/src/components/cbp-dropdown-item/cbp-dropdown-item.scss +++ b/packages/web-components/src/components/cbp-dropdown-item/cbp-dropdown-item.scss @@ -61,10 +61,10 @@ cbp-dropdown-item { border-block-end: var(--cbp-dropdown-item-border-size) solid var(--cbp-dropdown-item-color-border); } - &:last-of-type { + &:not([hidden]):last-of-type() { border-block-end-width: 0; } - + &[selected] { --cbp-dropdown-item-color: var(--cbp-color-text-dark); --cbp-dropdown-item-color-dark: var(--cbp-color-text-light); diff --git a/packages/web-components/src/components/cbp-form-field/cbp-form-field.stories.tsx b/packages/web-components/src/components/cbp-form-field/cbp-form-field.stories.tsx index aeb9a542..53e786a5 100644 --- a/packages/web-components/src/components/cbp-form-field/cbp-form-field.stories.tsx +++ b/packages/web-components/src/components/cbp-form-field/cbp-form-field.stories.tsx @@ -37,79 +37,6 @@ export default { -function generateCheckboxes(context, checkboxes) { - const html = checkboxes.map(({ label, name, value, checked, disabled }) => { - return ` - - - ${label} - `; - }); - return html.join(''); -} - -const ChecklistTemplate = ({ checkboxes, label, description, fieldId, group, error, context, sx }) => { - return ` - - ${generateCheckboxes(context, checkboxes)} - - `; -}; - -export const Checklist = ChecklistTemplate.bind({}); -Checklist.args = { - checkboxes: [ - { - label: "Checkbox 1", - name: "checkbox", - value: "1", - checked: false, - disabled: false - }, - { - label: "Checkbox 2", - name: "checkbox", - value: "2", - checked: false, - disabled: false - }, - { - label: "Checkbox 3", - name: "checkbox", - value: "3", - checked: false, - disabled: false - }, - { - label: "Checkbox 4", - name: "checkbox", - value: "4", - checked: false, - disabled: false - }, - ], - label: "Checklist Group Label", - group: true -} - - - const TextInputTemplate = ({ label, description, fieldId, error, readonly, disabled, value, context, sx }) => { return ` { - return ` - - - ${label} - `; - }); - return html.join(''); -} - -const RadioListTemplate = ({ radios, label, description, fieldId, group, error, context, sx }) => { - return ` - - ${generateRadios(context, radios)} - - `; -}; - -export const RadioList = RadioListTemplate.bind({}); -RadioList.args = { - radios: [ - { - label: "Radio button 1", - name: "radio", - value: "1", - checked: false, - disabled: false - }, - { - label: "Radio button 2", - name: "radio", - value: "2", - checked: false, - disabled: false - }, - { - label: "Radio button 3", - name: "radio", - value: "3", - checked: false, - disabled: false - }, - { - label: "Radio button 4", - name: "radio", - value: "4", - checked: false, - disabled: false - }, - ], - label: "Radio List Group Label", - group: true -} - const SelectTemplate = ({ label, description, fieldId, error, disabled, context, sx }) => { diff --git a/packages/web-components/src/components/cbp-multicol/api-docs.mdx b/packages/web-components/src/components/cbp-multicol/api-docs.mdx new file mode 100644 index 00000000..6135873d --- /dev/null +++ b/packages/web-components/src/components/cbp-multicol/api-docs.mdx @@ -0,0 +1,6 @@ +import { Meta, Markdown } from "@storybook/blocks"; +import Docs from './readme.md?raw'; + + + +{Docs} \ No newline at end of file diff --git a/packages/web-components/src/components/cbp-multicol/cbp-multicol.scss b/packages/web-components/src/components/cbp-multicol/cbp-multicol.scss new file mode 100644 index 00000000..b8b1d26f --- /dev/null +++ b/packages/web-components/src/components/cbp-multicol/cbp-multicol.scss @@ -0,0 +1,11 @@ +cbp-multicol { + display: block; + + & > * { + max-width: 100%; + } + + &[nobreak] > * { + break-inside: avoid; + } +} diff --git a/packages/web-components/src/components/cbp-multicol/cbp-multicol.specs.mdx b/packages/web-components/src/components/cbp-multicol/cbp-multicol.specs.mdx new file mode 100644 index 00000000..4ca4e521 --- /dev/null +++ b/packages/web-components/src/components/cbp-multicol/cbp-multicol.specs.mdx @@ -0,0 +1,37 @@ +import { Meta } from '@storybook/addon-docs'; + + + +# cbp-multicol + +## Purpose + +The Multicol component is a wrapper that invokes a CSS Multi-column layout context, ideal for using with semantic lists and checklists/radio lists. + +## Functional Requirements + +* The Multicol component is a container and its contents are provided by the application (slotted). +* Immediate children are automatically organized into a column layout per the CSS Multicol specification. +* The Multicol component implements the CSS Multicol API as a component API with some minor naming changes. + +## Technical Specifications + +### User Interactions + +* As a non-interactive layout component, there are no explicit user interactions. However, the native multi-column layout responds to changes in the device or viewport that affect content sizing according to the specified (max) columns and (minimum) column width. + +### Responsiveness + +* Multi-column layout is by default responsive when a (minimum) width is specified in relative units. +* Always use relative CSS units such as `rem`. Using pixels is fragile and may break if users have custom text sizing or spacing. + +### Accessibility + +N/A + +### Additional Notes and Considerations + +* Because Multi=column layout has a parent-child relationship, be aware that nesting children inside of any component (e.g., ``) that is present in the DOM will affect this behavior and the intended children may not be displayed as intended. +* Individual immediate children may use the following CSS to affect multi-column layout, if needed/desired: + * column-span: all; + * break-inside: avoid; diff --git a/packages/web-components/src/components/cbp-multicol/cbp-multicol.stories.tsx b/packages/web-components/src/components/cbp-multicol/cbp-multicol.stories.tsx new file mode 100644 index 00000000..e8e7399c --- /dev/null +++ b/packages/web-components/src/components/cbp-multicol/cbp-multicol.stories.tsx @@ -0,0 +1,90 @@ +export default { + title: 'Components/Multicol', + //tags: ['autodocs'], + argTypes: { + columns: { + control: 'number', + }, + width: { + control: 'text', + }, + gap: { + control: 'text', + }, + rule: { + control: 'text', + }, + nobreak: { + control: 'boolean', + }, + sx: { + description: 'Supports adding inline styles as an object of key-value pairs comprised of CSS properties and values. Values should reference design tokens when possible.', + control: 'object', + }, + }, + args: { + content: [ + { + text: 'Item 1', + }, + { + text: 'Item 2', + }, + { + text: 'Item 3', + }, + { + text: 'Item 4', + }, + { + text: 'Item 5', + }, + { + text: 'Item 6', + }, + { + text: 'Item 7', + }, + { + text: 'Item 8', + }, + { + text: 'Item 9', + }, + { + text: 'Item 10', + }, + ], + }, +}; + +function createChildren(children) { + const html = children.map(({ text }) => { + return `
  • ${text}
  • `; + }); + return html.join(''); +} + +const Template = ({ content, columns, width, gap, rule, nobreak, sx }) => { + return ` +
      + + ${createChildren(content)} + +
    + `; +}; + +export const Multicol = Template.bind({}); +Multicol.args = { + columns: 2, + width: '8rem', + gap: 'var(--cbp-space-4x)' +}; \ No newline at end of file diff --git a/packages/web-components/src/components/cbp-multicol/cbp-multicol.tsx b/packages/web-components/src/components/cbp-multicol/cbp-multicol.tsx new file mode 100644 index 00000000..7757dec9 --- /dev/null +++ b/packages/web-components/src/components/cbp-multicol/cbp-multicol.tsx @@ -0,0 +1,56 @@ +import { Component, Prop, Element, Host, h } from '@stencil/core'; +import { setCSSProps } from '../../utils/utils'; + +/** + * @slot - The default slot contains any content or children to be arranged in a multi-column layout. + */ +@Component({ + tag: 'cbp-multicol', + styleUrl: 'cbp-multicol.scss', +}) +export class CbpMulticol { + + @Element() host: HTMLElement; + + /** Specifies the maximum number of columns */ + @Prop() columns: number; + + /** + * Specifies the minimum column width in CSS units (preferably relative units such as `rem`). + * The column width may affect how many columns are actually used based upon available space. + */ + @Prop() width: string; + + /** Specifies the gap between columns in CSS units (preferably relative units such as `rem`). */ + @Prop() gap: string; + + /** Specifies the rule separating each column (syntax is similar to CSS borders, including a width, style, and color). */ + @Prop() rule: string; + + /** Specifies that children shall not be broken to spread contents across columns (using `break-inside: avoid` CSS). */ + @Prop( {reflect: true}) nobreak: boolean; + + /** Supports adding inline styles as an object */ + @Prop() sx: any = {}; + + componentWillLoad() { + if (typeof this.sx == 'string') { + this.sx = JSON.parse(this.sx) || {}; + } + setCSSProps(this.host, { + 'column-count': this.columns, + 'column-width': this.width, + 'column-gap': this.gap, + 'column-rule': this.rule, + ...this.sx, + }); + } + + render() { + return ( + + + + ); + } +} diff --git a/packages/web-components/src/components/cbp-radio/cbp-radiolist.stories.tsx b/packages/web-components/src/components/cbp-radio/cbp-radiolist.stories.tsx new file mode 100644 index 00000000..0473152f --- /dev/null +++ b/packages/web-components/src/components/cbp-radio/cbp-radiolist.stories.tsx @@ -0,0 +1,269 @@ +export default { + title: 'Components/Radio/RadioList', + //tags: ['autodocs'], + argTypes: { + label: { + control: 'text', + }, + description: { + control: 'text', + }, + fieldId: { + control: 'text', + }, + error: { + control: 'boolean', + }, + context : { + control: 'select', + options: [ "light-inverts", "light-always", "dark-inverts", "dark-always"] + }, + sx: { + description: 'Supports adding inline styles as an object of key-value pairs comprised of CSS properties and values. Values should reference design tokens when possible.', + control: 'object', + }, + }, + args: { + label: "Radio List Group Label", + description: 'Field description.', + radios: [ + { + label: "Radio 1", + name: "radio", + value: "1", + checked: false, + disabled: false + }, + { + label: "Radio 2", + name: "radio", + value: "2", + checked: false, + disabled: false + }, + { + label: "Radio 3", + name: "radio", + value: "3", + checked: false, + disabled: false + }, + { + label: "Radio 4", + name: "radio", + value: "4", + checked: false, + disabled: false + }, + ], + }, +}; + + + +function generateRadios(context, radios) { + const html = radios.map(({ label, name, value, checked, disabled }) => { + return ` + + + ${label} + `; + }); + return html.join(''); +} + +const RadioListTemplate = ({ radios, label, description, fieldId, error, context, sx }) => { + return ` + + ${generateRadios(context, radios)} + + `; +}; + +export const RadioList = RadioListTemplate.bind({}); + + + + +const RadioListHorizontalTemplate = ({ radios, label, description, fieldId, group, error, gap, breakpoint, context, sx }) => { + return ` + + + ${generateRadios(context, radios)} + + + `; +}; + +/* + + + ${generateCheckboxes(context, checkboxes)} + + +
    +*/ + +export const RadioListHorizontal = RadioListHorizontalTemplate.bind({}); +RadioListHorizontal.args = { + gap: 'var(--cbp-space-5x)', + breakpoint: '28rem' +} + + + +const RadioListMultiColumnTemplate = ({ radios, gap, columns, width, label, description, fieldId, group, error, context, sx }) => { + return ` + + + ${generateRadios(context, radios)} + + + `; +}; + +export const RadioListMultiColumn = RadioListMultiColumnTemplate.bind({}); +RadioListMultiColumn.args = { + gap: 'var(--cbp-space-4x)', + columns: '3', + width: '6rem', + radios: [ + { + label: "Radio 1", + name: "radio", + value: "1", + checked: false, + disabled: false + }, + { + label: "Radio 2", + name: "radio", + value: "2", + checked: false, + disabled: false + }, + { + label: "Radio 3", + name: "radio", + value: "3", + checked: false, + disabled: false + }, + { + label: "Radio 4", + name: "radio", + value: "4", + checked: false, + disabled: false + }, + { + label: "Radio 5", + name: "radio", + value: "5", + checked: false, + disabled: false + }, + { + label: "Radio 6", + name: "radio", + value: "6", + checked: false, + disabled: false + }, + { + label: "Radio 7", + name: "radio", + value: "7", + checked: false, + disabled: false + }, + { + label: "Radio 8", + name: "radio", + value: "8", + checked: false, + disabled: false + }, + { + label: "Radio 9", + name: "radio", + value: "9", + checked: false, + disabled: false + }, + { + label: "Radio 10", + name: "radio", + value: "10", + checked: false, + disabled: false + }, + { + label: "Radio 11", + name: "radio", + value: "11", + checked: false, + disabled: false + }, + { + label: "Radio 12", + name: "radio", + value: "12", + checked: false, + disabled: false + }, + { + label: "Radio 13", + name: "radio", + value: "13", + checked: false, + disabled: false + }, + { + label: "Radio 14", + name: "radio", + value: "14", + checked: false, + disabled: false + }, + ], +} diff --git a/packages/web-components/src/components/cbp-resize-observer/cbp-resize-observer.scss b/packages/web-components/src/components/cbp-resize-observer/cbp-resize-observer.scss new file mode 100644 index 00000000..d58ad58a --- /dev/null +++ b/packages/web-components/src/components/cbp-resize-observer/cbp-resize-observer.scss @@ -0,0 +1,5 @@ +cbp-resize-observer { + max-width: 100%; + display: inline-block; + overflow: visible; +} diff --git a/packages/web-components/src/components/cbp-resize-observer/cbp-resize-observer.tsx b/packages/web-components/src/components/cbp-resize-observer/cbp-resize-observer.tsx new file mode 100644 index 00000000..7f834628 --- /dev/null +++ b/packages/web-components/src/components/cbp-resize-observer/cbp-resize-observer.tsx @@ -0,0 +1,103 @@ +import { Component, Element, Prop, Event, EventEmitter, Host, h } from '@stencil/core'; + +/** + * @slot - any markup or content may be placed in the default slot. + */ +@Component({ + tag: 'cbp-resize-observer', + styleUrl: 'cbp-resize-observer.scss' +}) +export class CbpResizeObserver { + + private observer: ResizeObserver; + private observedEl: Element + //private parentEl: HTMLElement; + //private childEl: HTMLElement; + + @Element() host: HTMLElement; + + /** Optionally specify a selector with which to query the closest matching parent of the host tag to observe. */ + @Prop() parent: string; + + /** Optionally specify a selector with which to query the a child of the host tag to observe. */ + @Prop() child: string; + + /** A custom event emitted when the click event occurs for either a rendered button or anchor/link. */ + @Event() resized!: EventEmitter; + + + async getCurrentSize() { + return this.getClientRect(); + } + getClientRect() { + return this.host.getBoundingClientRect(); + } + + + componentDidLoad() { + // TODO: still need to figure out what comparisons are useful at this level - parent or children + const children = this.host.children; + this.observedEl = this.host; //this.host.querySelector(child) or this.host.closest(parent); ? + /* + ResizeObserver object structure: + Entries[]: + Entries[0]: ResizeObserverEntry (I've never seen more than 1 entry...) + borderBoxSize[]: ResizeObserverSize + contentBoxSize[]: ResizeObserverSize + contentRect: DOMRectReadOnly <- this is what we want + bottom + height + left + right + top + width + x + y + devicePixelContentBoxSize[]: ResizeObserverSize + target + */ + this.observer = new ResizeObserver(([{ contentRect }]) => { + const {width, height, top, bottom, left, right, x, y} = contentRect; + console.log('Resize Observer: ', width, height, children, children[0].getBoundingClientRect()); + + // TODO: do comparisons, such as to check for overflow (against child? this depends what we're observing) + // When using browser zoom, the numbers reported back are sometimes sub-pixel and trigger a flickering of the controls; adding +1 fixes this. + /* + if (width+1 > this.wrapper.scrollWidth) { + // + } + else { + // + } + */ + + + // TechDebt: should this be debounced? + this.resized.emit({ + width: width, + height: height, + top: top, + bottom: bottom, + left: left, + right: right, + x: x, + y: y + }); + + }); + this.observer.observe(this.observedEl); + } + + disconnectedCallback(){ + this.observer.disconnect() + } + + render() { + return ( + + + + ); + } + +} diff --git a/packages/web-components/src/components/cbp-structured-list/cbp-structured-list.stories.tsx b/packages/web-components/src/components/cbp-structured-list/cbp-structured-list.stories.tsx index d9214123..fca3af9b 100644 --- a/packages/web-components/src/components/cbp-structured-list/cbp-structured-list.stories.tsx +++ b/packages/web-components/src/components/cbp-structured-list/cbp-structured-list.stories.tsx @@ -86,8 +86,8 @@ const StructuredListTemplate = ({ listItems, striped, selectable, showHeader, he ${showFooter ? `
    - -
    0 items selected.
    + +
    0 items selected.
    Delete Compare
    @@ -141,8 +141,8 @@ const StructuredListItemsTemplate = ({ listItems, striped, selectable, showHeade ${showFooter ? `
    - -
    0 items selected.
    + +
    0 items selected.
    Delete Compare
    @@ -264,8 +264,8 @@ const StructuredListWithGridTemplate = ({ striped, selectable, showHeader, heade ${showFooter ? `
    - -
    0 items selected.
    + +
    0 items selected.
    Delete Compare
    @@ -606,8 +606,8 @@ const StructuredListSelectableTemplate = ({ listItems, striped, showHeader, head ${generateSelectableItems(listItems, context)}
    - -
    XXX items selected.
    + +
    XXX items selected.
    Delete Compare
    diff --git a/packages/web-components/src/components/cbp-table/cbp-table.scss b/packages/web-components/src/components/cbp-table/cbp-table.scss index 6057b6bc..28bddced 100644 --- a/packages/web-components/src/components/cbp-table/cbp-table.scss +++ b/packages/web-components/src/components/cbp-table/cbp-table.scss @@ -94,6 +94,7 @@ cbp-table { } th, td { + color: var(--cbp-table-color); text-align: left; padding: var(--cbp-space-3x) var(--cbp-space-4x); diff --git a/packages/web-components/src/components/cbp-table/cbp-table.stories.tsx b/packages/web-components/src/components/cbp-table/cbp-table.stories.tsx index 6eb8efb6..410b8867 100644 --- a/packages/web-components/src/components/cbp-table/cbp-table.stories.tsx +++ b/packages/web-components/src/components/cbp-table/cbp-table.stories.tsx @@ -21,9 +21,14 @@ export default { }; -function generateTableRows(data, selectable) { +function generateTableRows(data, selectable, context) { const html = data.map( ({ row }, i) => { - const checkbox = `Select row ${i+1}` + const checkbox = ` + + + Select row ${i+1} + + ` let cells = row.map( ({td}) => { return ` ${td} @@ -52,17 +57,35 @@ const Template = ({ tableData, selectable, striped, context, sx }) => { Table Caption - ${ selectable ? `Select All` : ''} + ${ selectable ? ` + + + Select All + + ` + : '' + } Header 1 Header 2 Header 3 Header 4 + Header 5 - ${generateTableRows(tableData, selectable)} + ${generateTableRows(tableData, selectable, context)} + + ${ selectable ? ` + +
    0 items selected.
    + Delete + Compare +
    + ` : ''} `; }; @@ -77,6 +100,16 @@ BasicTable.args = { {td: 'Cell Text'}, {td: 'Cell Text'}, {td: 'Cell Text'}, + {td: 'Cell Text'}, + ] + }, + { + row: [ + {td: 'Cell Text'}, + {td: 'Cell Text'}, + {td: 'Cell Text'}, + {td: 'Cell Text'}, + {td: 'Cell Text'}, ] }, { @@ -85,6 +118,7 @@ BasicTable.args = { {td: 'Cell Text'}, {td: 'Cell Text'}, {td: 'Cell Text'}, + {td: 'Cell Text'}, ] }, { @@ -93,6 +127,7 @@ BasicTable.args = { {td: 'Cell Text'}, {td: 'Cell Text'}, {td: 'Cell Text'}, + {td: 'Cell Text'}, ] }, { @@ -101,6 +136,7 @@ BasicTable.args = { {td: 'Cell Text'}, {td: 'Cell Text'}, {td: 'Cell Text'}, + {td: 'Cell Text'}, ] }, ]