Merge pull request #228 from US-CBP/breadcrumb

initial creation of Breadcrumb component

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

@@ -0,0 +1,25 @@
+/**
+ * @Prop --cbp-breadcrumb-color: var(--cbp-color-text-darkest);
+ * @Prop --cbp-breadcrumb-color-dark: var(--cbp-color-text-lightest);
+ */
+
+ :root{
+  --cbp-breadcrumb-color: var(--cbp-color-text-darkest);
+  --cbp-breadcrumb-color-dark: var(--cbp-color-text-lightest);
+}
+
+[data-cbp-theme=light] cbp-breadcrumb[context*=dark]:not([context=light-always]),
+[data-cbp-theme=dark] cbp-breadcrumb:not([context=dark-inverts]):not([context=light-always]) {
+  --cbp-breadcrumb-color: var(--cbp-breadcrumb-color-dark);
+}
+
+cbp-breadcrumb {
+  color: var(--cbp-breadcrumb-color);
+
+  nav {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--cbp-space-2x);
+  }
+}

packages/web-components/src/components/cbp-breadcrumb/cbp-breadcrumb.specs.mdx

@@ -0,0 +1,31 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Components/Breadcrumb/Specifications" />
+
+# cbp-breadcrumb
+
+## Purpose
+
+* Breadcrumb component exist to give users a key indicator of where they are within an application when the user happens to be deeper within the site’s architecture. the Breadcrumb is primarily made using the cbp-button & cbp-link, as such please also review the documentation for those components as well.
+
+## Functional Requirements
+
+* The Breadcrumb component acts as a wrapper for navigation links. 
+
+## Technical Specifications
+
+### User Interactions
+
+* The Breadcrumb is a composite component constructed of cbp-links & cbp-button, please see those components documentation for details on User Interactions
+
+### Responsiveness
+
+* TODO: update to come for overflow button responsiveness
+
+### Accessibility
+
+* The Breadcrumb is a composite component constructed of cbp-links & cbp-button, please see those components documentation for details on Accessibility.
+
+### Additional Notes and Considerations
+
+* 

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

@@ -0,0 +1,64 @@
+export default {
+    title: 'Components/Breadcrumb',
+    //tags: ['autodocs'],
+    argTypes: {
+      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: {
+      },
+    };
+
+    function generateBreadcrumbs(breadcrumbs, context){
+      const html =  breadcrumbs.map(({text, href}) => {
+          return ` / <cbp-link href=${href}  context=${context}> ${text}</cbp-link> `
+        }
+      );
+      return html.join('');
+    }
+
+    const Template = ({ breadcrumbs, home, context, sx}) => {
+        return ` 
+            <cbp-breadcrumb
+              ${context && context != 'light-inverts' ? `context=${context}` : ''}
+              ${sx ? `sx=${JSON.stringify(sx)}` : ''}
+            >
+              <cbp-button
+                tag="a"
+                fill="ghost"
+                color="primary"
+                variant="square"
+                context=${context}
+                href=${home}
+                accessibility-text="Home"
+              >
+                <cbp-icon
+                  name="home"
+                >
+                </cbp-icon>
+              </cbp-button>
+              ${generateBreadcrumbs(breadcrumbs, context)}
+            </cbp-breadcrumb>
+          `;
+      };
+
+      export const Breadcrumb = Template.bind({});
+        Breadcrumb.args = {
+            breadcrumbs: [
+              {
+                text: 'Test',
+                href: '#'
+              },
+              {
+                text: 'Test 2',
+                href: '#'
+              },
+            ], 
+            home: '#'
+        };

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

@@ -0,0 +1,36 @@
+import { Component, Prop, Element, Host, h } from '@stencil/core';
+import { setCSSProps } from '../../utils/utils';
+
+@Component({
+  tag: 'cbp-breadcrumb',
+  styleUrl: 'cbp-breadcrumb.scss',
+})
+export class CbpBreadcrumb {
+
+  @Element() host: HTMLElement;
+
+  /** 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 = {};
+
+  componentWillLoad() {
+    if (typeof this.sx == 'string') {
+      this.sx = JSON.parse(this.sx) || {};
+    }
+    setCSSProps(this.host, {
+      ...this.sx,
+    });
+  }
+
+  render() {
+    return (
+      <Host>
+        <nav aria-label='Breadcrumb'>
+          <slot></slot>
+        </nav>      
+      </Host>
+    );
+  }
+}

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

@@ -25,6 +25,7 @@ export default {
         'eye-slash',
         'filter',
         'globe',
+        'home',
         'landmark',
         'lock',
         'magnifying-glass',

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

@@ -124,6 +124,11 @@ export class CbpIcon {
       viewbox: "0 0 512 512",
       path: "M256 48C141.1 48 48 141.1 48 256l0 40c0 13.3-10.7 24-24 24s-24-10.7-24-24l0-40C0 114.6 114.6 0 256 0S512 114.6 512 256l0 144.1c0 48.6-39.4 88-88.1 88L313.6 488c-8.3 14.3-23.8 24-41.6 24l-32 0c-26.5 0-48-21.5-48-48s21.5-48 48-48l32 0c17.8 0 33.3 9.7 41.6 24l110.4 .1c22.1 0 40-17.9 40-40L464 256c0-114.9-93.1-208-208-208zM144 208l16 0c17.7 0 32 14.3 32 32l0 112c0 17.7-14.3 32-32 32l-16 0c-35.3 0-64-28.7-64-64l0-48c0-35.3 28.7-64 64-64zm224 0c35.3 0 64 28.7 64 64l0 48c0 35.3-28.7 64-64 64l-16 0c-17.7 0-32-14.3-32-32l0-112c0-17.7 14.3-32 32-32l16 0z",
     },
+    "home" : {
+      name: "home",
+      viewbox: "0 0 576 512",
+      path: "M575.8 255.5c0 18-15 32.1-32 32.1l-32 0 .7 160.2c0 2.7-.2 5.4-.5 8.1l0 16.2c0 22.1-17.9 40-40 40l-16 0c-1.1 0-2.2 0-3.3-.1c-1.4 .1-2.8 .1-4.2 .1L416 512l-24 0c-22.1 0-40-17.9-40-40l0-24 0-64c0-17.7-14.3-32-32-32l-64 0c-17.7 0-32 14.3-32 32l0 64 0 24c0 22.1-17.9 40-40 40l-24 0-31.9 0c-1.5 0-3-.1-4.5-.2c-1.2 .1-2.4 .2-3.6 .2l-16 0c-22.1 0-40-17.9-40-40l0-112c0-.9 0-1.9 .1-2.8l0-69.7-32 0c-18 0-32-14-32-32.1c0-9 3-17 10-24L266.4 8c7-7 15-8 22-8s15 2 21 7L564.8 231.5c8 7 12 15 11 24z"
+    },
     "landmark": {
       name: "landmark",
       viewbox: "0 0 512 512",