Merge pull request #377 from US-CBP/bugfix/Clean-up-Comments

Code clean up from storybook review

Author: bagrub

packages/web-components/src/components/cbp-action-bar/cbp-action-bar.specs.mdx

@@ -14,15 +14,15 @@ The Action Bar acts as a container for form controls (buttons) or other tools to
   * The descriptive text in the named slot is aligned left.
   * The controls are aligned to the right.
 * The Action Bar has two variants - inline and floating.
-  * The inline variant is teh default and renders in the flow of the document.
+  * The inline variant is the default and renders in the flow of the document.
   * The floating variant is rendered at bottom of viewport, primarily tools that affect the content of the whole page.
 
 ### Responsiveness
 
 * The Action Bar will fill 100% of the screen (floating) or parent (inline).
 * The Action Bar will wrap as needed at smaller screen sizes, but... 
 * It is up to the developer to make sure its contents are fully responsive.
-* The sticky variant uses the responsive padding token to adjust outer padding at the same ratio as other template elements.
+* The floating variant uses the responsive padding token to adjust outer padding at the same ratio as other template elements.
 
 ### Accessibility
 

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

@@ -78,8 +78,6 @@ cbp-app-header {
       outline-offset: calc(-2 * var(--cbp-border-size-md));
     }
 
-    // > form{
-    // display: inline-flex;
 
     input {
       flex-grow: 1;
@@ -102,6 +100,5 @@ cbp-app-header {
       gap: var(--cbp-space-4x);
       align-items: center;
     }
-
   }
 }

packages/web-components/src/components/cbp-app-header/cbp-app-header.stories.tsx

@@ -152,9 +152,7 @@ const Template = ({ drawerid, store, search, searchMethod, searchAction, items,
     // Cancel form submit event on search to prevent full page reload
     const AppHeader = document.querySelector('cbp-app-header');
     AppHeader?.addEventListener('searchSubmit', function(e) {
-      //console.log('searchSubmit event: ', e);
       e.detail.nativeEvent.preventDefault();
-      //AppHeader.closeSearch();
     });
 
     // Cancel events on anchors to prevent navigating away from the story
@@ -232,9 +230,7 @@ const AppHeaderWithSubnavTemplate = ({ drawerid, store, search, searchMethod, se
     // Cancel form submit event on search to prevent full page reload
     const AppHeader = document.querySelector('cbp-app-header');
     AppHeader?.addEventListener('searchSubmit', function(e) {
-      //console.log('searchSubmit event: ', e);
       e.detail.nativeEvent.preventDefault();
-      //AppHeader.closeSearch();
     });
 
     // Cancel events on anchors to prevent navigating away from the story

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

@@ -1,6 +1,5 @@
 import { Component, Prop, Element, Event, EventEmitter, Host, h } from '@stencil/core';
 import { setCSSProps, getElementAttrs, createNamespaceKey } from '../../utils/utils';
-//import state from './store';
 
 /**
  * The Button component represents a UI control visually styled like a button, regardless of whether 
@@ -74,10 +73,7 @@ export class CbpButton {
    * rendered on the button with the specified value.
    */
   @Prop() controls: string;
-  
-  /* ??? */
-  //@Prop() controlProp: "pressed" | "expanded";
-  
+
   /** The property on the target element being toggled by the button/control (e.g., "open"). */
   @Prop() targetProp: string;
 
@@ -105,7 +101,6 @@ export class CbpButton {
 
 
   handleClick(e): void {
-    // If this is a control for something, manage state through stencil store
     if (this.controls) {
       // If the controlled element wasn't found, try to find it again
       if (!this.controlTarget) this.controlTarget = document.querySelector(`#${this.controls}`);

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

@@ -518,11 +518,6 @@ cbp-card {
 
     &[disabled]{
 
-      // a{
-      //   pointer-events: none;
-      //   cursor: not-allowed;
-      // }
-
       --cbp-card-color-background: var(--cbp-color-interactive-disabled-light);
       --cbp-card-color-border: var(--cbp-color-interactive-disabled-dark);
       --cbp-card-color-title: var(--cbp-color-interactive-disabled-dark);

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

@@ -12,10 +12,6 @@ export default {
       description: 'Set the body text of the card',
       control: 'text',
     },
-    // color: {
-    //   control: 'select',
-    //   options: ['default', 'info', 'success', 'warning', 'danger'],
-    // },
     stretch: {
       control: 'boolean',
     },
@@ -110,10 +106,6 @@ const DecisionTemplate = ({ title, color, bodyText, actionsLayout, actionsFill,
       ${renderActions(actionsLayout, actionsFill, color,context, withIcon, actionsConfig)}
     </cbp-card>
   `;
-  // <h4 slot="cbp-card-title" id="card-heading-1">
-  //       ${withIcon ? `<cbp-icon name="triangle-exclamation" size="1.25rem"></cbp-icon>` : ''}
-  //       ${title}
-  //     </h4>
 };
 
 const BannerTemplate = ({ title, color, bodyText, withIcon, context, sx }) => {
@@ -215,97 +207,7 @@ const InteractiveTemplate = ({ title, color, disabled, bodyText, withIcon, inter
   `;
 };
 
-// For testing only:
-/*
-const CardsGridTemplate = ({ title, color, stretch, bodyText, actionsLayout, actionsConfig, sx }) => {
-  return ` 
-    <cbp-flex
-      wrap="wrap"
-      gap="1rem"
-      align-items="stretch"
-    >
-      <cbp-flex-item flex-basis="15rem">
-      <cbp-card 
-        variant="decision"
-        ${stretch ? 'stretch' : ''}
-        ${color ? `color=${color}` : ''}
-        ${sx ? `sx='${JSON.stringify(sx)}'` : ''}
-      >
-        <h4 slot="cbp-card-title">${title}</h4>
-        <p>${bodyText}</p>
-        ${renderActions(actionsLayout, actionsConfig)}
-      </cbp-card>
-      </cbp-flex-item>
-
-      <cbp-flex-item flex-basis="15rem">
-      <cbp-card 
-        variant="decision"
-        ${stretch ? 'stretch' : ''}
-        ${color ? `color=${color}` : ''}
-        ${sx ? `sx='${JSON.stringify(sx)}'` : ''}
-      >
-        <h4 slot="cbp-card-title">${title}</h4>
-        <p>
-          ${bodyText}
-          ${bodyText}
-          ${bodyText}
-        </p>
-        ${renderActions(actionsLayout, actionsConfig)}
-      </cbp-card>
-      </cbp-flex-item>
 
-      <cbp-flex-item flex-basis="15rem">      
-      <cbp-card 
-        variant="decision"  
-        ${stretch ? 'stretch' : ''}
-        ${color ? `color=${color}` : ''}
-        ${sx ? `sx='${JSON.stringify(sx)}'` : ''}
-      >
-        <h4 slot="cbp-card-title">${title}</h4>
-        <p>${bodyText}</p>
-        ${renderActions(actionsLayout, actionsConfig)}
-      </cbp-card>
-      </cbp-flex-item>
-    </cbp-flex>
-  `;
-};
-export const CardsGrid = CardsGridTemplate.bind({});
-CardsGrid.argTypes = {
-  actionsLayout: {
-    name: 'Actions Layout',
-    description: 'Choose actions layout of the card component',
-    control: 'radio',
-    options: ['single', 'double', 'triple'],
-  },
-  actionsConfig: {
-    name: 'Decision Card Actions',
-    description: 'Configure card button labels and colors. Available button colors: `primary`, `secondary`, `tertiary` and `danger`',
-    control: 'object',
-  },
-};
-CardsGrid.args = {
-  title: 'Banner Card Title',
-  bodyText: 'Here is an example of some supplementary text for this purely informational card.',
-  actionsLayout: 'single',
-  actionsConfig: {
-    btn1: {
-      label: 'Action 1',
-      tag: 'button',
-      color: 'primary',
-    },
-    btn2: {
-      label: 'Action 2',
-      tag: 'button',
-      color: 'secondary',
-    },
-    btn3: {
-      label: 'Action 3',
-      tag: 'button',
-      color: 'tertiary',
-    },
-  },
-};
-*/
 
 export const GeneralCard = GeneralTemplate.bind({});
 GeneralCard.args = {

packages/web-components/src/components/cbp-carousel-item/cbp-carousel-item.scss

@@ -1,6 +1,6 @@
 cbp-carousel-item {
   display: inline-block;
-  height: var(--cbp-carousel-item-height); //TODO: do these need values in this file if being set via prop?
+  height: var(--cbp-carousel-item-height);
   width: var(--cbp-carousel-item-width);
   flex-shrink: 0;
 

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

@@ -57,7 +57,6 @@ export class CbpCarousel {
 
   scrollToItem() {
     let carouselOffset = 0;
-    //let carouselOffsetStart = getComputedStyle(this.control).getPropertyValue('--cbp-carousel-offset');
 
     for (let x = 0; x < this.current; x++) {
       carouselOffset -= this.items[x].offsetWidth;

packages/web-components/src/components/cbp-checkbox/cbp-checklist.stories.tsx

@@ -126,15 +126,6 @@ const ChecklistHorizontalTemplate = ({ checkboxes, label, description, fieldId,
     `;
 };
 
-/*
-      <cbp-resize-observer>
-        <cbp-flex gap="var(--cbp-space-5x)" breakpoint="31rem" sx='{"width":"max-content"}'>
-          ${generateCheckboxes(context, checkboxes)}
-        </cbp-flex>
-      </cbp-resize-observer>
-    </cbp-form-field>
-*/
-
 export const ChecklistHorizontal = ChecklistHorizontalTemplate.bind({});
 ChecklistHorizontal.args = {
   gap: 'var(--cbp-space-1x) var(--cbp-space-5x)',

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

@@ -24,8 +24,6 @@ export class CbpContainer {
   /** Specifies the width of the inner container area. */
   @Prop() width: string;
 
-  //@Prop() padding: string;
-  
   /** Supports adding inline styles as an object */
   @Prop() sx: any = {};
 
@@ -37,7 +35,6 @@ export class CbpContainer {
       "--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,
     });
   }