Feature/container

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

@@ -1,4 +1,2 @@
-@use 'reset.scss';
-@use 'roboto.scss';
-@use 'css-variables.scss';
-@use 'core.scss';
+/* Temporary workaround for verified Stencil bug; can use @use due to compilation error */
+@import 'reset', 'roboto', 'css-variables', 'core';

packages/web-components/src/components/cbp-app/core.scss

@@ -1,14 +1,33 @@
+/* Additional high level and utilities variables not represented by design tokens */
+:root {
+  // Using clamp is a more modern way of implementing this, but gives a variable size between the min and max points.
+  // 20px < 600px ; 32px > 600px ; 44px > 1400px
+  //--cbp-responsive-spacing-outer: clamp( var(--cbp-space-5x), 0.179rem + 2.857vw, var(--cbp-space-11x));
+  --cbp-responsive-spacing-outer: var(--cbp-space-5x);
+  --cbp-responsive-spacing-inner: var(--cbp-responsive-spacing-outer); // temporary - for discussion
+}
+@media (min-width: $cbp-breakpoint-md) {
+  :root {
+    --cbp-responsive-spacing-outer: var(--cbp-space-8x);
+  }
+}
+@media (min-width: $cbp-breakpoint-xl) {
+  :root {
+    --cbp-responsive-spacing-outer: var(--cbp-space-11x);
+  }
+}
+
 html {
   font-size: 100%;
 }
 
 body {
   color: var(--cbp-color-text-darkest);
   background-color: var(--cbp-color-branding-cbp-light);
-  font: var(--cbp-font-size-body)/1rem var(--cbp-font-family-roboto);
+  font: var(--cbp-font-size-body) / 1rem var(--cbp-font-family-roboto);
 }
 
-[data-cbp-theme="dark"] body {
+[data-cbp-theme='dark'] body {
   color: var(--cbp-color-text-lightest);
   background-color: var(--cbp-color-branding-cbp-dark);
 }
@@ -30,14 +49,14 @@ button {
   cursor: pointer;
 }
 
-[aria-disabled=true],
+[aria-disabled='true'],
 :disabled,
-input:read-only:not([type="checkbox"], [type="radio"], [type="file"], [type="range"], [type="color"]),
+input:read-only:not([type='checkbox'], [type='radio'], [type='file'], [type='range'], [type='color']),
 textarea:read-only {
   cursor: not-allowed;
 }
 
 /* Ensure that `hidden` is not overridden by other selectors setting display, such as flex or grid */
 [hidden] {
   display: none !important;
-}
+}

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

@@ -1,3 +1,4 @@
+/* TechDebt: Buttons get customized and overridden a lot and may benefit from a fully fleshed-out CSS API */
 :root {
   --cbp-button-color-text: var(--cbp-color-text-lightest);
   --cbp-button-color-text-hover: var(--cbp-color-text-lightest);
@@ -15,16 +16,22 @@
   --cbp-button-color-border-active: var(--cbp-color-interactive-active-dark);
 
   --cbp-button-color-outline-focus: var(--cbp-color-white);
+
+  --cbp-button-border-width: var(--cbp-border-size-md);
+  --cbp-button-border-style: solid;
+  --cbp-button-border-radius: var(--cbp-border-radius-soft);
 }
 
 cbp-button {
+  display: inline-block;
+
   button, a {
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    border-width: var(--cbp-border-size-md);
+    border-width: var(--cbp-button-border-width);
     border-style: solid;
-    border-radius: var(--cbp-border-radius-soft);
+    border-radius: var(--cbp-button-border-radius);
     font-weight: var(--cbp-font-weight-medium);
     text-transform: uppercase;
     letter-spacing: var(--cbp-letter-spacing-loose);

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

@@ -1,5 +1,5 @@
 export default {
-  title: 'Patterns/Button',
+  title: 'Components/Button',
   tags: ['autodocs'],
   argTypes: {
     label: {
@@ -91,18 +91,18 @@ const Template = ({ label, tag, type, href, rel, target, download, fill, color,
   return ` 
       <cbp-app>
       <cbp-button
-        ${tag !== 'button' ? 'tag="'+tag+'"' : ''}
+        ${tag !== 'button' ? `tag=${tag}` : ''}
         type="${type}"
-        ${href ? 'href="'+href+'"' : ''}
-        ${rel ? 'rel="'+rel+'"' : ''}
-        ${target ? 'target="'+target+'"' : ''}
-        ${download ? 'download="'+download+'"' : ''}
+        ${href ? `href=${href}` : ''}
+        ${rel ? `rel=${rel}` : ''}
+        ${target ? `target=${target}` : ''}
+        ${download ? `download=${download}` : ''}
         fill="${fill}"
         color="${color}"
-        ${variant !== 'default' ? 'variant="'+variant+'"' : ''}
-        ${accessibilityText ? 'accessibility-text="'+accessibilityText+'"' : ''}
-        ${disabled ? 'disabled="'+disabled+'"' : ''}
-        ${sx ? 'sx='+JSON.stringify(sx) : ''}
+        ${variant !== 'default' ? `variant=${variant}` : ''}
+        ${accessibilityText ? `accessibility-text=${accessibilityText}` : ''}
+        ${disabled ? `disabled=${disabled}` : ''}
+        ${sx ? `sx=${JSON.stringify(sx)}` : ''}
       >
         ${label}
       </cbp-button>

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

@@ -1,5 +1,5 @@
 export default {
-  title: 'Patterns/Card',
+  title: 'Components/Card',
   tags: ['autodocs'],
   argTypes: {
     title: {

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

@@ -0,0 +1,24 @@
+:root {
+  --cbp-container-color-text: var(--cbp-color-text-darkest);
+  --cbp-container-color-background: transparent;
+  --cbp-container-color-inner-background: var(--cbp-container-color-background);
+
+  --cbp-container-content-padding: 0;
+  --cbp-container-inner-width: auto;
+}
+
+cbp-container {
+  display: block;
+  color: var(--cbp-container-color-text);
+  background: var(--cbp-container-color-background);
+  padding: var(--cbp-container-content-padding);
+  max-width: 100%;
+
+  .cbp-container--inner {
+    display: block;
+    background: var(--cbp-container-color-inner-background);
+    margin: auto;
+    width: var(--cbp-container-inner-width);
+  }
+}
+

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

@@ -0,0 +1,53 @@
+export default {
+    title: 'Components/Container',
+    tags: ['autodocs'],
+    argTypes: {
+    content: {
+        name: 'Content (slotted)',
+        description: 'Content within the container may contain any markup, but Storybook does not allow adding HTML via this control.',
+        control: 'text'
+        },
+      background: {
+        description: 'The `background` CSS shorthand property, which can contain only a background-color (in any acceptable CSS value format) or any of the acceptable shorthand properties. Defaults to transparent.',
+        control: 'text',
+      },
+      textColor: {
+        description: 'The color (in any acceptable CSS value format) of the text when placed within the inner container, if placed on a colored background. Defaults to the color of the `body` text.',
+        control: 'text',
+      },
+      width: {
+        description: 'The width (in CSS units) of the inner container. Defaults to `auto` as a block-level element (takes up 100% of the space, including margins)',
+        control: 'text',
+      },
+      margins: {
+        description: 'The horizontal margins of the inner container. Acceptable values include `responsive`, `auto`, or a string in CSS units or CSS variable referencing a design token. Defaults to `auto`',
+        control: 'text',
+      },
+      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: {
+        content: 'Plain text content slotted inside of the `cbp-container` tags.',
+    }
+  };
+
+  const Template = ({ content, background, textColor, width, margins, sx }) => { 
+    return ` 
+        <cbp-app>
+        <cbp-container
+          ${background ? `background=${background}` : ''}
+          ${textColor ? `text-color=${textColor}` : ''}
+          ${width ? `width=${width}` : ''}
+          ${margins ? `margins=${margins}` : ''}
+          ${sx ? `sx=${JSON.stringify(sx)}` : ''}
+        >
+          ${content}
+        </cbp-container>
+        </cbp-app>
+      `
+  }
+
+  export const Container = Template.bind({});
+

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

@@ -0,0 +1,43 @@
+import { Component, Prop, Element, Host, h } from '@stencil/core';
+import { setCSSProps } from '../../utils/utils';
+
+@Component({
+  tag: 'cbp-container',
+  styleUrl: 'cbp-container.scss',
+})
+export class CbpContainer {
+  @Element() host: HTMLElement;
+
+  @Prop() background: string;
+  @Prop() textColor: string;
+  @Prop() width: string;
+  @Prop() padding: string;
+  /** 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, {
+      "--cbp-container-color-text": this.textColor,
+      "--cbp-container-color-background": this.background,
+      "--cbp-container-inner-width": this.width,
+      //"--cbp-container-content-padding": this.padding,
+      ...this.sx,
+    });
+  }
+
+
+  render() {
+    return (
+      <Host>
+        <div class="cbp-container--inner">
+          <slot />
+        </div>
+      </Host>
+    );
+  }
+
+}

packages/web-components/src/components/cbp-universal-header/cbp-universal-header.scss

@@ -0,0 +1,98 @@
+//@use '../../global/styles/index.scss' as *;
+
+cbp-universal-header {
+  display: block;
+
+  & > header {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    align-items: center;
+
+    color: var(--cbp-color-text-lightest);
+    background-color: var(--cbp-color-branding-dhs-blue);
+    min-height: var(--cbp-space-15x);
+    width: 100%;
+    padding: 0 var(--cbp-responsive-spacing-outer);
+
+    .cbp-universal-header__brand {
+      align-items: center;
+      display: flex;
+
+      &::after {
+        content: "CBP";
+        //color: var(--cbp-color-text-lightest);
+        font-size: var(--cbp-font-size-heading-xl);
+        margin-left: var(--cbp-space-2x);
+      }
+    }
+
+    .cbp-universal-header__content {
+
+      ul, ol {
+        display: flex;
+        gap: var(--cbp-space-4x);
+        list-style: none;
+        margin: 0;
+        padding: 0;
+
+        li {
+          display: inline;
+        }
+      }
+
+      // Button/Link - Secondary (custom) Ghost Button (Dark) styling
+      // [fill] is only present for specificity
+      cbp-button[fill] {
+        //align-items: center;
+        --cbp-button-border-width: 0;
+        --cbp-button-color-text: var(--cbp-color-interactive-secondary-lighter);
+        --cbp-button-color-fill: transparent;
+
+        :hover {
+          --cbp-button-color-text-hover: var(--cbp-color-interactive-secondary-lighter);
+          --cbp-button-color-fill-hover: var(--cbp-color-interactive-secondary-dark);
+        }
+
+        :focus {
+          --cbp-button-color-text-focus: var(--cbp-color-text-darkest);
+          --cbp-button-color-fill-focus: var(--cbp-color-interactive-focus-light);
+          --cbp-button-color-outline-focus: var(--cbp-color-black);
+        }
+
+        :active {
+          --cbp-button-color-text-active: var(--cbp-color-text-darkest);
+          --cbp-button-color-fill-active: var(--cbp-color-interactive-focus-light);
+          --cbp-button-color-outline-active: var(--cbp-color-black);
+        }
+      }
+    }
+
+
+
+  }
+}
+
+
+  // $cbp-breakpoint-md
+  @media (min-width: $cbp-breakpoint-md) { 
+    cbp-universal-header > header {
+      min-height: 5.5rem;
+
+      .cbp-universal-header__brand::after {
+        content: "";
+      }
+    }
+
+  }
+
+  //$cbp-breakpoint-lg
+  @media (min-width: $cbp-breakpoint-lg) {
+    .cbp-universal-header__content cbp-button {
+        padding: 0 var(--cbp-space-3x);
+      }
+  }
+
+
+
+