Merge pull request #216 from US-CBP/structured-list-select

Structured list select
US-CBP · Oct 17, 2024 · c5cf432 · c5cf432
2 parents 9e6c972 + 87fc72f
commit c5cf432
Show file tree

Hide file tree

Showing 3 changed files with 120 additions and 3 deletions.
diff --git a/packages/web-components/src/components/cbp-structured-list-item/cbp-structured-list-item.tsx b/packages/web-components/src/components/cbp-structured-list-item/cbp-structured-list-item.tsx
@@ -1,4 +1,4 @@
-import { Component, Prop, Element, Host, h } from '@stencil/core';
+import { Component, Prop, Element, Host, h, Listen } from '@stencil/core';
 import { setCSSProps } from '../../utils/utils';
 
 @Component({
@@ -28,6 +28,11 @@ export class CbpStructuredListItem {
     });
   }
 
+  @Listen('stateChanged')
+  stateChangedHandler({detail: {checked}}){
+    this.selected = checked;
+  }
+
   render() {
     return (
       <Host role="listitem">

diff --git a/packages/web-components/src/components/cbp-structured-list/cbp-structured-list.scss b/packages/web-components/src/components/cbp-structured-list/cbp-structured-list.scss
@@ -80,7 +80,7 @@ cbp-structured-list {
     font-weight: var(--cbp-font-weight-bold);
 
     // Nesting 2 flex contexts will not take up 100% of the width
-    *:only-child {
+    *:only-child{
       flex-basis: 100%;
     }
   }
@@ -109,4 +109,32 @@ cbp-structured-list {
   div[role=list]:only-child > *:first-child {
     border-top: var(--cbp-border-size-md) solid var(--cbp-structured-list-border-color);
   }
+
+  /** Selectable */
+
+  &[selectable] [slot=cbp-structured-list-header] {
+    gap: var(--cbp-space-4x);
+  }
+
+  &[selectable] cbp-structured-list-item{
+    display: flex;
+    flex-direction: row; 
+    align-items: center;
+    gap: var(--cbp-space-4x);
+  }
+
+  cbp-structured-list-item[selected]{
+
+    --cbp-structured-list-color-background: var(--cbp-color-interactive-selected-light);
+    --cbp-structured-list-border-color: var(--cbp-color-gray-cool-30);
+    --cbp-structured-list-color-background-dark: var(--cbp-color-interactive-selected-dark);
+    --cbp-structured-list-border-color-dark: var(--cbp-color-gray-cool-50);
+
+    &:hover{
+    --cbp-structured-list-color-background: var(--cbp-color-gray-cool-10);
+    --cbp-structured-list-border-color: var(--cbp-color-gray-cool-30);
+    --cbp-structured-list-color-background-dark: var(--cbp-color-gray-cool-90);
+    --cbp-structured-list-border-color-dark: var(--cbp-color-gray-cool-50);
+    }
+  }
 }
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
@@ -49,7 +49,25 @@ function generateItems(items) {
   return html.join('');
 }
 
-
+function generateSelectableItems(items, context){
+  const html = items.map(({ content, color, selected }, index) => {
+    return `<cbp-structured-list-item ${color != 'default' ? `color="${color}"` : ''} ${selected ? `selected` : ''} >
+    <cbp-checkbox 
+      value= ${index}
+      ${context && context != 'light-inverts' ? `context=${context}` : ''}   
+    >
+      <input
+        type="checkbox"
+        name="checkbox"
+        value=${index}
+      />
+      <span style='display: none'>Checkbox ${index}</span>
+    </cbp-checkbox>
+    ${content}
+    </cbp-structured-list-item>`;
+  });
+  return html.join('');
+}
 
 
 const StructuredListTemplate = ({ listItems, striped, selectable, showHeader, headerId, showFooter, context, sx }) => {
@@ -365,4 +383,70 @@ StructuredListMedia.args = {
       selected: false
     },
   ]
+}
+
+
+/*<------------------------------------ Select ---------------------------------------->*/
+
+const StructuredListSelectableTemplate = ({ listItems, striped, showHeader, headerId, context, sx }) => {
+  return ` 
+       <cbp-structured-list
+          ${striped ? `striped` : ''}
+          selectable
+          header-id="list-header"
+          ${context && context != 'light-inverts' ? `context=${context}` : ''}   
+          ${sx ? `sx=${JSON.stringify(sx)}` : ''}
+        >
+        ${showHeader ? `<div slot="cbp-structured-list-header" id="${headerId}"><cbp-checkbox><input type="checkbox" /><span style='display: none'>check all</span></cbp-checkbox> <span>XX results - Y filters Applied Updated: XX/XX/XXXX XX:XX:XX EST</span></div>` : ''}
+    
+        ${generateSelectableItems(listItems, context)}
+          <div slot="cbp-structured-list-footer">
+            <cbp-action-bar variant='inline' context="dark-inverts"> 
+              <div slot='cbp-action-bar-info'>XXX items selected.</div>
+              <cbp-button fill="ghost" context="dark-inverts" accessibility-text="Delete selected items">Delete</cbp-button>
+              <cbp-button fill="ghost" context="dark-inverts" accessibility-text="Compare selected items">Compare</cbp-button>
+            </cbp-action-bar>
+          </div>
+      
+        </cbp-structured-list>
+      `;
+
+};
+export const StructuredListSelectable = StructuredListSelectableTemplate.bind({});
+StructuredListSelectable.argTypes = {
+  listItems: {
+    description: 'Configure various aspects of the list items within the structured list.',
+    control: 'object',
+  },
+}
+StructuredListSelectable.args = {
+  showHeader: false,
+  listItems: [
+    {
+      content: "Structured List Selectable Item 1",
+      color: 'default',
+      selected: false
+    },
+    {
+      content: "Structured List Selectable Item 2",
+      color: 'default', 
+      selected: false
+    },
+    {
+      content: "Structured List Selectable Item 3",
+      color: 'default',
+      selected: false
+    },
+    {
+      content: "Structured List Selectable Item 4: this is a very looooooooooooooooooong entry to show what some text wrap looks like with a while the structured list is in the selectable state",
+      color: 'default',
+      selected: false
+    },
+    {
+      content: "Structured List Selectable Item 5",
+      color: 'danger',
+      selected: false
+    },
+
+  ]
 }