Merge pull request #181 from US-CBP/descriptive-list

Descriptive list

packages/web-components/src/components/cbp-list/cbp-list.scss

@@ -25,13 +25,20 @@
   --cbp-link-list-icon-margin: calc(var(--cbp-space-5x) * -1);
   --cbp-link-list-icon-color: var(--cbp-color-interactive-primary-dark);
   --cbp-link-list-icon-color-dark: var(--cbp-color-interactive-primary-dark);
+
+  --cbp-desc-list-color: var(--cbp-color-text-darker);
+  --cbp-desc-list-color-dark: var(--cbp-color-text-lighter);
+  --cbp-desc-list-description-color: var(--cbp-color-text-darkest);
+  --cbp-desc-list-description-color-dark: var(--cbp-color-text-lightest);
 }
 
 
 [data-cbp-theme=light] cbp-list[context*=dark]:not([context=light-always]),
 [data-cbp-theme=dark] cbp-list:not([context=dark-inverts]):not([context=light-always]) {
   --cbp-list-item-color: var(--cbp-list-item-color-dark);
   --cbp-link-list-icon-color: var(--cbp-link-list-icon-color-dark);
+  --cbp-desc-list-color: var(--cbp-desc-list-color-dark);
+  --cbp-desc-list-description-color: var(--cbp-desc-list-description-color-dark);
 }
 
 cbp-list {
@@ -148,5 +155,31 @@ cbp-list {
         padding-inline-end: var(--cbp-space-3x);
       }     
     }
+  }
+
+  //Description List
+
+  dl{
+    padding-inline-start: var(--cbp-space-12x);
+
+    dt{
+      color: var(--cbp-desc-list-color);
+      font-size: var(--cbp-font-size-heading-sm);
+      font-weight: var(--cbp-font-weight-medium);
+      line-height: var(--cbp-line-height-sm);
+      padding-block-end: var(--cbp-space-2x);
+
+      cbp-icon{
+        margin-inline-start: calc(var(--cbp-space-9x) * -1);
+        padding-inline-end: var(--cbp-space-3x);
+      }
+    }
+
+    dd{
+      color: var(--cbp-desc-list-description-color);
+      line-height: var(--cbp-line-height-xs);
+      padding-block-end: var(--cbp-space-6x);
+    }
   } 
-}
+}
+

packages/web-components/src/components/cbp-list/cbp-list.stories.tsx

@@ -2,11 +2,11 @@ export default {
     title: 'Components/List',
     tags: ['autodocs'],
     argTypes: {
-        tag: {
-          control: 'select',
-          description: 'Type of List',
-          options: ['ul', 'ol'],
-        },
+        // tag: {
+        //   control: 'select',
+        //   description: 'Type of List',
+        //   options: ['ul', 'ol'],
+        // },
         // size: {
         //   control: 'select',
         //   description: 'Font size of list text',
@@ -25,9 +25,9 @@ export default {
           control: 'object',
         },
     },   
-    args: {
-      tag: 'ul',
-    },
+    // args: {
+    //   tag: 'ul',
+    // },
 };
 
 function generateItems(items) {
@@ -123,15 +123,19 @@ List.argTypes ={
       description: 'Font size of list text',
       options: ['normal', 'large'],
     },
+    tag: {
+      control: 'select',
+      description: 'Type of List',
+      options: ['ul', 'ol'],
+    },
 }
 
 //Unstyled
 
-const UnstyledTemplate = ({listItems, tag, size, accessibilityText, context, sx}) => {
+const UnstyledTemplate = ({listItems, size, accessibilityText, context, sx}) => {
   return ` 
   <cbp-list
     variant= 'unstyled'
-    ${tag ? `tag=${tag}` : ''}
     ${size ? `size=${size}` : ''}
     ${accessibilityText ? `accessibility-text="${accessibilityText}"` : ''}
     ${context && context != 'light-inverts' ? `context=${context}` : ''}
@@ -312,4 +316,56 @@ export const IconLinkList = IconListTemplate.bind({});
             color: "var(--cbp-color-red-50)",
           },
         ]
-};
+};
+
+function generateDescriptionItems(items) {
+  const html = items.map(({ content, description, icon, color}) => {
+      return `
+              <dt>
+                <cbp-icon name='${icon}' color='${color}' size='1.25rem'></cbp-icon>
+                ${content}
+              </dt>
+              <dd>
+                ${description}
+              </dd>
+              `;      
+  });
+  return html.join('');
+}
+
+const DescriptionListTemplate = ({linkListItems, accessibilityText, context, sx}) => {
+  return ` 
+    <cbp-list
+      tag='dl' 
+      ${accessibilityText ? `accessibility-text="${accessibilityText}"` : ''}
+      ${context && context != 'light-inverts' ? `context=${context}` : ''}
+      ${sx ? 'sx=' + JSON.stringify(sx) : ''}
+    >
+      ${generateDescriptionItems(linkListItems)}
+  </cbp-list>
+  `;
+};
+
+export const DescriptionLinkList = DescriptionListTemplate.bind({});
+  DescriptionLinkList.args = {
+      linkListItems: [
+          {
+            content: "Always pay with Cash.",
+            description: "When shopping for extremely good deals, alwasy be prepared to pay with cash. Cash lets you have a powerful negotiating tool when trying to get the best price possible for your new pet turtle",
+            icon: "plus",
+            color: "var(--cbp-color-green-cool-50)",
+          },
+          {
+            content: "Make sure to get a receipt.",
+            description: "Don't leave the pet shop or other location without a receipt for your new turtle. Otherwise getting a refund or exchange later will be pretty hard to acheive.",
+            icon: "book",
+            color: "var(--cbp-color-green-cool-50)",
+          },
+          {
+            content: "Call our 24-hour, 7-day-a-week hotline for all your burning, turtle-related questions.",
+            description: "What do turtles eat? Why won't he come out of his shell? I bathed my turtle in radioactive fluid and he's not deeloping martial arts skills. In fact he's stopping moving entirely. get thes important questions answered by calling our hotline anytime, anywhere",
+            icon: "exclamation-circle",
+            color: "var(--cbp-color-red-50)",
+          },
+        ]
+};

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

@@ -14,7 +14,7 @@ export class CbpList {
   @Prop({ reflect: true }) variant: 'unstyled' | 'link' | 'icon'; 
 
   /** Specifies the semantic tag to be rendered. */
-  @Prop() tag: 'ul' | 'ol' = 'ul';
+  @Prop() tag: 'ul' | 'ol' | 'dl' = 'ul';
 
   /** Specifies the font size for the list */
   @Prop({ reflect: true }) size: 'normal' | 'large' = 'normal';