Merge pull request #160 from US-CBP/StructuredListDarkMode

Structured list dark mode
US-CBP · Jul 15, 2024 · 3901091 · 3901091
2 parents ea4ad49 + 37f437f
commit 3901091
Show file tree

Hide file tree

Showing 4 changed files with 187 additions and 21 deletions.
diff --git a/...ages/web-components/src/components/cbp-structured-list-item/cbp-structured-list-item.scss b/...ages/web-components/src/components/cbp-structured-list-item/cbp-structured-list-item.scss
@@ -1,11 +1,38 @@
+/** todo: update doc
+ * @prop --cbp-structured-list-item-padding: var(--cbp-space-4x);
+
+ * @prop  --cbp-structured-list-item-color-background-danger: var(--cbp-color-danger-lighter);
+ * @prop  --cbp-structured-list-item-color-background-danger-dark: var(--cbp-color-danger-darker);
+
+ * @prop  --cbp-structured-list-item-color-background-selected: var(--cbp-color-interactive-selected-light);
+ * @prop  --cbp-structured-list-item-color-background-selected-dark: var(--cbp-color-interactive-selected-dark);
+
+*/
+:root {
+  --cbp-structured-list-item-padding: var(--cbp-space-4x);
+
+  --cbp-structured-list-item-color-background-danger: var(--cbp-color-danger-lighter);
+  --cbp-structured-list-item-color-background-danger-dark: var(--cbp-color-danger-darker);
+
+  --cbp-structured-list-item-color-background-selected: var(--cbp-color-interactive-selected-light);
+  --cbp-structured-list-item-color-background-selected-dark: var(--cbp-color-interactive-selected-dark);
+
+}
+
+[data-cbp-theme=light] cbp-structured-list[context*=dark]:not([context=light-always]),
+[data-cbp-theme=dark] cbp-structured-list:not([context=dark-inverts]):not([context=light-always]) {
+  --cbp-structured-list-item-color-background-danger: var(--cbp-structured-list-item-color-background-danger-dark);  
+  --cbp-structured-list-item-color-background-selected: var(--cbp-structured-list-item-color-background-selected-dark);
+}
+
 cbp-structured-list-item {
   display: block;
 
-  &[color=danger]:not([selected]) {
-    background-color: var(--cbp-color-danger-lighter) !important;
+  &[color=danger]:not([selected]) { //techdebt: update to component vars
+    background-color: var(--cbp-structured-list-item-color-background-danger) !important;
   }
 
-  &[selected] {
-    background-color: var(--cbp-color-interactive-selected-light) !important;
+  &[selected] { //techdebt: update to component vars
+    background-color: var(--cbp-structured-list-item-color-background-selected) !important;
   }
 }
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
@@ -1,9 +1,72 @@
+/** 
+ * @prop --cbp-structured-list-item-padding: var(--cbp-space-4x);
+
+ * @prop --cbp-structured-list-color-background: var(--cbp-color-white);
+ * @prop --cbp-structured-list-color-background-dark: var(--cbp-color-gray-cool-70);
+ * @prop --cbp-structured-list-color-striped-background: var(--cbp-color-gray-cool-4);
+ * @prop --cbp-structured-list-color-striped-background-dark: var(--cbp-color-gray-cool-80);
+ * @prop --cbp-structured-list-color-background-hover: var(--cbp-color-gray-cool-10);
+ * @prop --cbp-structured-list-color-background-hover-dark: var(--cbp-color-gray-cool-90);
+ * @prop --cbp-structured-list-color: var(--cbp-color-text-darkest);
+ * @prop --cbp-structured-list-color-dark: var(--cbp-color-text-lightest);
+ * @prop --cbp-structured-list-border-color: var(--cbp-color-gray-cool-30);
+ * @prop --cbp-structured-list-border-color-dark: var(--cbp-color-gray-cool-50);
+
+ * @prop --cbp-structured-list-header-color-background: var(--cbp-color-gray-cool-30);
+ * @prop --cbp-structured-list-header-color-background-dark: var(--cbp-color-gray-cool-60);
+ * @prop --cbp-structured-list-header-color: var(--cbp-color-text-darkest);
+ * @prop --cbp-structured-list-header-color-dark: var(--cbp-color-text-lightest);
+
+ * @prop --cbp-structured-list-footer-color-background: var(--cbp-color-gray-cool-70);
+ * @prop --cbp-structured-list-footer-color-background-dark: var(--cbp-color-gray-cool-5);
+ * @prop --cbp-structured-list-footer-color: var(--cbp-color-text-lightest);
+ * @prop --cbp-structured-list-footer-color-dark: var(--cbp-color-text-darkest);
+*/
 :root {
   --cbp-structured-list-item-padding: var(--cbp-space-4x);
+
+  --cbp-structured-list-color-background: var(--cbp-color-white);
+  --cbp-structured-list-color-background-dark: var(--cbp-color-gray-cool-70);
+  --cbp-structured-list-color-striped-background: var(--cbp-color-gray-cool-4);
+  --cbp-structured-list-color-striped-background-dark: var(--cbp-color-gray-cool-80);
+  --cbp-structured-list-color-background-hover: var(--cbp-color-gray-cool-10);
+  --cbp-structured-list-color-background-hover-dark: var(--cbp-color-gray-cool-90);
+  --cbp-structured-list-color: var(--cbp-color-text-darkest);
+  --cbp-structured-list-color-dark: var(--cbp-color-text-lightest);
+  --cbp-structured-list-border-color: var(--cbp-color-gray-cool-30);
+  --cbp-structured-list-border-color-dark: var(--cbp-color-gray-cool-50);
+
+  --cbp-structured-list-header-color-background: var(--cbp-color-gray-cool-30);
+  --cbp-structured-list-header-color-background-dark: var(--cbp-color-gray-cool-60);
+  --cbp-structured-list-header-color: var(--cbp-color-text-darkest);
+  --cbp-structured-list-header-color-dark: var(--cbp-color-text-lightest);
+
+  --cbp-structured-list-footer-color-background: var(--cbp-color-gray-cool-70);
+  --cbp-structured-list-footer-color-background-dark: var(--cbp-color-gray-cool-5);
+  --cbp-structured-list-footer-color: var(--cbp-color-text-lightest);
+  --cbp-structured-list-footer-color-dark: var(--cbp-color-text-darkest);
+
 }
+
+[data-cbp-theme=light] cbp-structured-list[context*=dark]:not([context=light-always]),
+[data-cbp-theme=dark] cbp-structured-list:not([context=dark-inverts]):not([context=light-always]) {
+
+  --cbp-structured-list-color-background: var(--cbp-structured-list-color-background-dark);
+  --cbp-structured-list-color-striped-background: var(--cbp-structured-list-color-striped-background-dark);
+  --cbp-structured-list-color-background-hover: var(--cbp-structured-list-color-background-hover-dark);
+  --cbp-structured-list-color: var(--cbp-structured-list-color-dark);
+  --cbp-structured-list-border-color: var(--cbp-structured-list-border-color-dark);
+  --cbp-structured-list-header-color-background: var(--cbp-structured-list-header-color-background-dark);
+  --cbp-structured-list-header-color: var(--cbp-structured-list-header-color-dark);
+
+  --cbp-structured-list-footer-color-background: var(--cbp-structured-list-footer-color-background-dark);
+  --cbp-structured-list-footer-color: var(--cbp-structured-list-footer-color-dark);
+}
+
 cbp-structured-list {
   display: block;
-  background-color: var(--cbp-color-white);
+  background-color: var(--cbp-structured-list-color-background);
+  color: var(--cbp-structured-list-color);
 
   [slot] {
     display: flex;
@@ -19,18 +82,20 @@ cbp-structured-list {
   }
 
   [slot=cbp-structured-list-header] {
-    color: var(--cbp-color-text-darkest);
-    background-color: var(--cbp-color-gray-cool-30);
+    color: var(--cbp-structured-list-header-color);
+    background-color: var(--cbp-structured-list-header-color-background);
     font-style: italic;
   }
 
+
+
   [slot=cbp-structured-list-footer] {
-    color: var(--cbp-color-text-lightest);
-    background-color: var(--cbp-color-gray-cool-70);
+    color: var(--cbp-structured-list-footer-color);
+    background-color: var(--cbp-structured-list-footer-color-background);
   }
 
   &[striped] [role=list] > *:nth-child(even) {
-    background-color: var(--cbp-color-gray-cool-4);
+    background-color: var(--cbp-structured-list-color-striped-background);
   }
 
   // Style all list items regardless of the element used to wrap/define them (don't leave this to cbp-structured-list-item)
@@ -39,11 +104,18 @@ cbp-structured-list {
     padding: var(--cbp-structured-list-item-padding);
     border-bottom-style: solid;
     border-bottom-width: var(--cbp-border-size-md);
-    border-bottom-color: var(--cbp-color-gray-cool-30);
+    border-bottom-color: var(--cbp-structured-list-border-color);
 
     &:hover {
-      background-color: var(--cbp-color-gray-cool-10) !important;
+      background-color: var(--cbp-structured-list-color-background-hover) !important;
     }
   }
 
+  /* 
+    *Collection 
+  */
+
+  div[role=list]:only-child > *:first-child {
+    border-top: var(--cbp-border-size-md) solid var(--cbp-structured-list-border-color);
+  }
 }
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
@@ -19,6 +19,10 @@ export default {
       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',
@@ -48,26 +52,28 @@ function generateItems(items) {
 
 
 
-const StructuredListTemplate = ({ listItems, striped, selectable, showHeader, headerId, showFooter, sx }) => {
+const StructuredListTemplate = ({ listItems, striped, selectable, showHeader, headerId, showFooter, context, sx }) => {
   return ` 
         <cbp-structured-list
           ${striped ? `striped` : ''}
           ${selectable ? `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}">${listItems.length} results, filters applied, etc. This acts as the "aria-description" for the list. </div>` : ''}
 
           ${generateLIs(listItems)}
 
+          
           ${showFooter
             ? `
                 <div slot="cbp-structured-list-footer">
                   <cbp-flex align-items="center" justify-content="space-between">  
                     <div>0 items selected.</div>
                     <div>
-                      <cbp-button fill="ghost" context="dark-always" accessibility-text="Delete selected items">Delete</cbp-button>
-                      <cbp-button fill="ghost" context="dark-always" accessibility-text="Compare selected items">Compare</cbp-button>
+                      <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>
                     </div>
                 </div>
               ` 
@@ -103,12 +109,13 @@ StructuredList.args = {
 }
 
 
-const StructuredListItemsTemplate = ({ listItems, striped, selectable, showHeader, headerId, showFooter, sx }) => {
+const StructuredListItemsTemplate = ({ listItems, striped, selectable, showHeader, headerId, showFooter, context, sx }) => {
   return ` 
         <cbp-structured-list
           ${striped ? `striped` : ''}
           ${selectable ? `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}">${listItems.length} results, filters applied, etc. This acts as the "aria-description" for the list. </div>` : ''}
@@ -121,8 +128,8 @@ const StructuredListItemsTemplate = ({ listItems, striped, selectable, showHeade
                   <cbp-flex align-items="center" justify-content="space-between">  
                     <div>0 items selected.</div>
                     <div>
-                      <cbp-button fill="ghost" context="dark-always" accessibility-text="Delete selected items">Delete</cbp-button>
-                      <cbp-button fill="ghost" context="dark-always" accessibility-text="Compare selected items">Compare</cbp-button>
+                      <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>
                     </div>
                 </div>
               ` 
@@ -168,12 +175,13 @@ StructuredListItems.args = {
 }
 
 
-const StructuredListWithGridTemplate = ({ striped, selectable, showHeader, headerId, showFooter, sx }) => {
+const StructuredListWithGridTemplate = ({ striped, selectable, showHeader, headerId, showFooter, context, sx }) => {
   return ` 
         <cbp-structured-list
           ${striped ? `striped` : ''}
           ${selectable ? `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}">3 Results, filters applied, etc. This acts as the "aria-description" for the list. </div>` : ''}
@@ -244,13 +252,69 @@ const StructuredListWithGridTemplate = ({ striped, selectable, showHeader, heade
                   <cbp-flex align-items="center" justify-content="space-between">  
                     <div>0 items selected.</div>
                     <div>
-                      <cbp-button fill="ghost" context="dark-always" accessibility-text="Delete selected items">Delete</cbp-button>
-                      <cbp-button fill="ghost" context="dark-always" accessibility-text="Compare selected items">Compare</cbp-button>
+                      <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>
                     </div>
                 </div>
               ` 
             : ''}
         </cbp-structured-list>
       `;
 };
+
+const StructuredListCollectionTemplate = ({ listItems, striped, selectable, context, sx }) => {
+  return ` 
+        <cbp-structured-list
+          ${striped ? `striped` : ''}
+          ${selectable ? `selectable` : ''}
+          header-id="list-header"
+          ${context && context != 'light-inverts' ? `context=${context}` : ''}   
+          ${sx ? `sx=${JSON.stringify(sx)}` : ''}
+        >
+        
+        ${generateItems(listItems)}
+
+        
+        </cbp-structured-list>
+      `;
+};
+export const StructuredListCollection = StructuredListCollectionTemplate.bind({});
+StructuredListCollection.argTypes = {
+  listItems: {
+    description: 'Configure various aspects of the list items within the structured list.',
+    control: 'object',
+  },
+}
+StructuredListCollection.args = {
+  showHeader: false,
+  listItems: [
+    {
+      content: "<cbp-typography tag='p'><cbp-icon name='arrow-right' color='var(--cbp-link-color)' size='1rem'></cbp-icon><cbp-link href='#' target='_self' style='margin-inline-start: 0.5rem'>Internal Link</cbp-link></cbp-typography><cbp-typography tag='p'> Description text</cbp-typography><cbp-typography tag='p'> <cbp-icon name='user' size='1rem'></cbp-icon> <i>https://www.text-link.com/help-me</i></cbp-typography><cbp-tag> Tag </cbp-tag>",
+      color: 'default',
+      selected: false
+    },
+    {
+      content: "<cbp-typography tag='p'><cbp-icon name='arrow-right' color='var(--cbp-link-color)' size='1rem'></cbp-icon><cbp-link href='#' target='_self' style='margin-inline-start: 0.5rem'>Internal Link</cbp-link></cbp-typography><cbp-typography tag='p'> Description text</cbp-typography><cbp-typography tag='p'> <cbp-icon name='user' size='1rem'></cbp-icon> <i>https://www.text-link.com/help-me</i></cbp-typography><cbp-tag> Tag </cbp-tag>",
+      color: 'default',
+      selected: false
+    },
+    {
+      content: "<cbp-typography tag='p'><cbp-icon name='arrow-right' color='var(--cbp-link-color)' size='1rem'></cbp-icon><cbp-link href='#' target='_self' style='margin-inline-start: 0.5rem'>Internal Link</cbp-link></cbp-typography><cbp-typography tag='p'> Description text</cbp-typography><cbp-typography tag='p'> <cbp-icon name='user' size='1rem'></cbp-icon> <i>https://www.text-link.com/help-me</i></cbp-typography><cbp-tag> Tag </cbp-tag>",
+      color: 'default',
+      selected: false
+    },
+    {
+      content: "<cbp-typography tag='p'><cbp-icon name='arrow-right' color='var(--cbp-link-color)' size='1rem'></cbp-icon><cbp-link href='#' target='_self' style='margin-inline-start: 0.5rem'>Internal Link</cbp-link></cbp-typography><cbp-typography tag='p'> Description text</cbp-typography><cbp-typography tag='p'> <cbp-icon name='user' size='1rem'></cbp-icon> <i>https://www.text-link.com/help-me</i></cbp-typography><cbp-tag> Tag </cbp-tag>",
+      color: 'default',
+      selected: false
+    },
+    {
+      content: "<cbp-typography tag='p'><cbp-icon name='arrow-right' color='var(--cbp-link-color)' size='1rem'></cbp-icon><cbp-link href='#' target='_self' style='margin-inline-start: 0.5rem'>Internal Link</cbp-link></cbp-typography><cbp-typography tag='p'> Description text</cbp-typography><cbp-typography tag='p'> <cbp-icon name='user' size='1rem'></cbp-icon> <i>https://www.text-link.com/help-me</i></cbp-typography><cbp-tag> Tag </cbp-tag>",
+      color: 'default',
+      selected: false
+    },
+  ]
+}
+
+
 export const StructuredListWithGrid = StructuredListWithGridTemplate.bind({});
diff --git a/packages/web-components/src/components/cbp-structured-list/cbp-structured-list.tsx b/packages/web-components/src/components/cbp-structured-list/cbp-structured-list.tsx
@@ -30,6 +30,9 @@ export class CbpStructuredList {
   /** Specifies whether the list items are selectable (via checkbox - provided by the application). */
   @Prop({ reflect: true }) selectable: boolean;
 
+   /** Specifies the context of the component as it applies to the visual design and whether it inverts when light/dark mode is toggled. Default behavior is "light-inverts" and does not have to be specified. */
+   @Prop({ reflect: true }) context: "light-inverts" | "light-always" | "dark-inverts" | "dark-always";
+
   /** Supports adding inline styles as an object */
   @Prop() sx: any = {};