Feature/checklist horizontal

packages/react-components/components/stencil-generated/index.ts

@@ -36,11 +36,13 @@ export const CbpHide = /*@__PURE__*/createReactComponent<JSX.CbpHide, HTMLCbpHid
 export const CbpIcon = /*@__PURE__*/createReactComponent<JSX.CbpIcon, HTMLCbpIconElement>('cbp-icon');
 export const CbpLink = /*@__PURE__*/createReactComponent<JSX.CbpLink, HTMLCbpLinkElement>('cbp-link');
 export const CbpList = /*@__PURE__*/createReactComponent<JSX.CbpList, HTMLCbpListElement>('cbp-list');
+export const CbpMulticol = /*@__PURE__*/createReactComponent<JSX.CbpMulticol, HTMLCbpMulticolElement>('cbp-multicol');
 export const CbpNavItem = /*@__PURE__*/createReactComponent<JSX.CbpNavItem, HTMLCbpNavItemElement>('cbp-nav-item');
 export const CbpNotice = /*@__PURE__*/createReactComponent<JSX.CbpNotice, HTMLCbpNoticeElement>('cbp-notice');
 export const CbpPagination = /*@__PURE__*/createReactComponent<JSX.CbpPagination, HTMLCbpPaginationElement>('cbp-pagination');
 export const CbpPanel = /*@__PURE__*/createReactComponent<JSX.CbpPanel, HTMLCbpPanelElement>('cbp-panel');
 export const CbpRadio = /*@__PURE__*/createReactComponent<JSX.CbpRadio, HTMLCbpRadioElement>('cbp-radio');
+export const CbpResizeObserver = /*@__PURE__*/createReactComponent<JSX.CbpResizeObserver, HTMLCbpResizeObserverElement>('cbp-resize-observer');
 export const CbpSection = /*@__PURE__*/createReactComponent<JSX.CbpSection, HTMLCbpSectionElement>('cbp-section');
 export const CbpSegmentedButtonGroup = /*@__PURE__*/createReactComponent<JSX.CbpSegmentedButtonGroup, HTMLCbpSegmentedButtonGroupElement>('cbp-segmented-button-group');
 export const CbpSkipNav = /*@__PURE__*/createReactComponent<JSX.CbpSkipNav, HTMLCbpSkipNavElement>('cbp-skip-nav');
@@ -52,6 +54,7 @@ export const CbpTable = /*@__PURE__*/createReactComponent<JSX.CbpTable, HTMLCbpT
 export const CbpTabs = /*@__PURE__*/createReactComponent<JSX.CbpTabs, HTMLCbpTabsElement>('cbp-tabs');
 export const CbpTag = /*@__PURE__*/createReactComponent<JSX.CbpTag, HTMLCbpTagElement>('cbp-tag');
 export const CbpToast = /*@__PURE__*/createReactComponent<JSX.CbpToast, HTMLCbpToastElement>('cbp-toast');
+export const CbpToggle = /*@__PURE__*/createReactComponent<JSX.CbpToggle, HTMLCbpToggleElement>('cbp-toggle');
 export const CbpTooltip = /*@__PURE__*/createReactComponent<JSX.CbpTooltip, HTMLCbpTooltipElement>('cbp-tooltip');
 export const CbpTypography = /*@__PURE__*/createReactComponent<JSX.CbpTypography, HTMLCbpTypographyElement>('cbp-typography');
 export const CbpUniversalHeader = /*@__PURE__*/createReactComponent<JSX.CbpUniversalHeader, HTMLCbpUniversalHeaderElement>('cbp-universal-header');

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 ` 
       <cbp-checkbox
-        ${value ? `value=${value}` : ''}
+        ${name ? `name="${name}"` : ''}
+        ${value ? `value="${value}"` : ''}
+        ${fieldId ? `field-id="${fieldId}"` : ''}
         ${disabled ? `disabled=${disabled}` : ''}
         ${checked ? `checked=${checked}` : ''}
         ${indeterminate ? `indeterminate=${indeterminate}` : ''}

packages/web-components/src/components/cbp-checkbox/cbp-checkbox.tsx

@@ -1,5 +1,5 @@
 import { Component, Element, Prop, Event, EventEmitter, Watch, Host, h } from '@stencil/core';
-import { setCSSProps} from '../../utils/utils';
+import { setCSSProps, createNamespaceKey } from '../../utils/utils';
 
 
 /**
@@ -22,6 +22,9 @@ export class CbpCheckbox {
   /** Optionally set the `value` attribute of the checkbox at the component level. Not needed if the slotted checkbox has a value. */
   @Prop() value: string;
 
+  /** Optionally specify the ID of the checkbox input here, which is used to generate related pattern node IDs and associate everything for accessibility */
+  @Prop({ mutable: true }) fieldId: string = createNamespaceKey('cbp-checkbox');
+
   /** Marks the checkbox as checked by default when specified. */
   @Prop() checked: boolean;
 
@@ -78,6 +81,8 @@ export class CbpCheckbox {
     // query the DOM for the slotted form field and wire it up for accessibility and attach an event listener to it
     this.formField = this.host.querySelector('input[type=checkbox]');
     if (this.formField) {
+      const checkboxId = this.formField.getAttribute('id');
+      checkboxId ? this.fieldId = checkboxId : this.formField.setAttribute('id', this.fieldId);
       this.formField.addEventListener('change', () => this.handleChange());
     }
   }
@@ -96,7 +101,7 @@ export class CbpCheckbox {
   render() {
     return (
       <Host>
-        <label>
+        <label htmlFor={this.fieldId}>
           <slot />
         </label>
       </Host>

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 `
+    <cbp-checkbox
+      ${context && context != 'light-inverts' ? `context=${context}` : ''}
+    >
+      <input 
+        type="checkbox" 
+        name="${name}"
+        value="${value}"
+        ${checked ? `checked` : ''}
+        ${disabled ? `disabled` : ''}
+      />
+      ${label}
+    </cbp-checkbox>`;
+  });
+  return html.join('');
+}
+
+const ChecklistTemplate = ({ checkboxes, label, description, fieldId, error, context, sx }) => {
+  return ` 
+    <cbp-form-field group
+      ${label ? `label="${label}"` : ''}
+      ${description ? `description="${description}"` : ''}
+      ${fieldId ? `field-id="${fieldId}"` : ''}
+      ${error ? `error` : ''}
+      ${context && context != 'light-inverts' ? `context=${context}` : ''}
+      ${sx ? `sx=${JSON.stringify(sx)}` : ''}
+    >
+      ${generateCheckboxes(context, checkboxes)}
+    </cbp-form-field>
+    `;
+};
+
+export const Checklist = ChecklistTemplate.bind({});
+
+
+
+
+const ChecklistHorizontalTemplate = ({ checkboxes, label, description, fieldId, group, error, gap, breakpoint, context, sx }) => {
+  return ` 
+    <cbp-form-field
+      ${label ? `label="${label}"` : ''}
+      ${description ? `description="${description}"` : ''}
+      ${fieldId ? `field-id="${fieldId}"` : ''}
+      ${group ? `group` : ''}
+      ${error ? `error` : ''}
+      ${context && context != 'light-inverts' ? `context=${context}` : ''}
+      ${sx ? `sx=${JSON.stringify(sx)}` : ''}
+    >
+      <cbp-flex
+        ${gap ? `gap="${gap}"` : ''}
+        ${breakpoint ? `breakpoint="${breakpoint}"` : ''}
+        sx='{"width":"max-content"}'
+      >
+        ${generateCheckboxes(context, checkboxes)}
+      </cbp-flex>
+    </cbp-form-field>
+    `;
+};
+
+/*
+      <cbp-resize-observer>
+        <cbp-flex gap="var(--cbp-space-5x)" breakpoint="31rem" sx='{"width":"max-content"}'>
+          ${generateCheckboxes(context, checkboxes)}
+        </cbp-flex>
+      </cbp-resize-observer>
+    </cbp-form-field>
+*/
+
+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 ` 
+    <cbp-form-field
+      ${label ? `label="${label}"` : ''}
+      ${description ? `description="${description}"` : ''}
+      ${fieldId ? `field-id="${fieldId}"` : ''}
+      ${group ? `group` : ''}
+      ${error ? `error` : ''}
+      ${context && context != 'light-inverts' ? `context=${context}` : ''}
+      ${sx ? `sx=${JSON.stringify(sx)}` : ''}
+    >
+      <cbp-multicol nobreak
+        ${gap ? `gap="${gap}"` : ''}
+        ${columns ? `columns="${columns}"` : ''}
+        ${width ? `width="${width}"` : ''}
+      >
+        ${generateCheckboxes(context, checkboxes)}
+      </cbp-multicol>
+    </cbp-form-field>
+    `;
+};
+
+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
+    },
+  ],
+}

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);