Merge pull request #205 from US-CBP/feature/cards-template

Example of card layout in internal template
US-CBP · Sep 23, 2024 · 9a1699d · 9a1699d
2 parents 462d3a7 + 193672a
commit 9a1699d
Showing 1 changed file with 161 additions and 2 deletions.
diff --git a/packages/web-components/src/stories/templates.stories.tsx b/packages/web-components/src/stories/templates.stories.tsx
@@ -92,7 +92,7 @@ const InternalTemplate = ({ isLoggedIn, username }) => {
         </main>
     </cbp-container>
 
-    <cbp-footer data-cbp-container-context="dark">
+    <cbp-footer context="dark-always">
       <nav slot="cbp-footer-nav">
         <cbp-flex role="list" breakpoint="37.5rem">
           <cbp-flex-item role="list-item">
@@ -220,7 +220,7 @@ const Internal2ColumnTemplate = ({ isLoggedIn, username, contentGridSize, sideba
         </cbp-panel>
       </cbp-grid>
 
-      <cbp-footer data-cbp-container-context="dark">
+      <cbp-footer context="dark-always">
         <nav slot="cbp-footer-nav">
           <cbp-flex role="list" breakpoint="37.5rem">
             <cbp-flex-item role="list-item">
@@ -262,6 +262,165 @@ Internal2Column.args = {
 
 
 
+function generateCards(numberOfCards) {
+  let html=''
+  for (let i=0; i<numberOfCards; i++) {
+    html+= `
+      <cbp-card variant="decision">
+        <cbp-typography
+          tag="h4"
+          slot="cbp-card-title"
+          id="card-heading-${i}"
+        >
+          Card Title
+        </cbp-typography>
+
+        <p>Here is an example of some body text for this decision card.</p>
+
+        <div slot="cbp-card-actions">
+          <cbp-button
+            tag="button"
+            fill="solid"
+            color="secondary"
+            context="undefined"
+            aria-describedby="card-heading-${i}"
+          >
+            Action 2
+          </cbp-button>
+          <cbp-button
+            tag="button"
+            fill="solid"
+            color="primary"
+            context="undefined"
+            aria-describedby="card-heading-${i}"
+          >
+            Action 1
+          </cbp-button>
+        </div>
+      </cbp-card>
+    `
+  }
+  return html;
+}
+
+
+
+const InternalResponsiveCardsTemplate = ({ isLoggedIn, username, numberOfCards, cardMinWidth }) => {
+  return ` 
+    <cbp-skip-nav></cbp-skip-nav>
+    <cbp-flex
+      direction="column"
+      sx='{"min-height":"100vh"}'
+    >
+      <header>
+        <cbp-universal-header
+          logo-src-lg="./assets/images/cbp-header-logo.svg"
+          logo-src-sm="./assets/images/cbp-seal.svg"
+        >
+          <ul>
+          ${ isLoggedIn
+            ? `
+            <li>
+              <cbp-button color="secondary" fill="ghost" context="dark-always">
+                <cbp-icon name="book"></cbp-icon>
+                <cbp-hide
+                  hide-at="max-width: 64em"
+                  sx='{"margin-left":"var(--cbp-space-2x)"}'
+                >App Directory</cbp-hide>
+              </cbp-button>
+            </li>
+            <li>
+              <cbp-button color="secondary" fill="ghost" context="dark-always">
+                <cbp-icon name="comment"></cbp-icon>  
+                <cbp-hide
+                  visually-hide-at="max-width: 64em"
+                  sx='{"margin-left":"var(--cbp-space-2x)"}'
+                >Feedback</cbp-hide>
+              </cbp-button>
+            </li>
+            <li>
+              <cbp-button color="secondary" fill="ghost" context="dark-always">
+                <cbp-icon name="user"></cbp-icon>
+                <cbp-hide
+                  visually-hide-at="max-width: 64em"
+                  sx='{"margin-left":"var(--cbp-space-2x)"}'
+                >${username}</cbp-hide>
+              </cbp-button>
+            </li>
+            `
+            : `
+            <li>
+              <cbp-button tag="a" href="#" color="secondary" fill="ghost" context="dark-always">
+              <cbp-icon name="right-to-bracket" sx='{"margin-right":"var(--cbp-space-2x)"}'></cbp-icon>
+              Login
+              </cbp-button>
+            </li>
+            `
+          }
+          </ul>
+        </cbp-universal-header>
+
+        <cbp-app-header>
+          <a slot="cbp-home" href="/" class="nav-home">Application Name</a>
+        </cbp-app-header>
+      </header>
+
+      <cbp-container sx='{"padding":"1rem var(--cbp-responsive-spacing-outer)","flex-grow":"2"}'>
+        <main id="main" tabindex="-1">
+          <cbp-typography tag="h1" divider="underline" sx='{"margin-bottom":"var(--cbp-space-5x)"}'>
+            Page Title
+          </cbp-typography>
+
+          <cbp-grid
+            grid-template-columns="repeat(auto-fit, minmax(${cardMinWidth},1fr)"
+            gap="var(--cbp-space-4x)"
+          >
+            ${generateCards(numberOfCards)}
+          </cbp-grid>
+        </main>
+      </cbp-container>
+
+      <cbp-footer context="dark-always">
+        <nav slot="cbp-footer-nav">
+          <cbp-flex role="list" breakpoint="37.5rem">
+            <cbp-flex-item role="list-item">
+              <cbp-button tag="a" href="#" color="secondary" fill="ghost" context="dark-always">App Overview</cbp-button>
+            </cbp-flex-item>
+            <cbp-flex-item role="list-item">
+              <cbp-button tag="a" href="#" color="secondary" fill="ghost" context="dark-always">Trainings</cbp-button>
+            </cbp-flex-item>
+            <cbp-flex-item role="list-item">
+              <cbp-button tag="a" href="#" color="secondary" fill="ghost" context="dark-always">FAQs</cbp-button>
+            </cbp-flex-item>
+            <cbp-flex-item role="list-item">
+              <cbp-button tag="a" href="#" color="secondary" fill="ghost" context="dark-always">Release Notes</cbp-button>
+            </cbp-flex-item>
+          <cbp-flex role="list">
+        </nav>
+
+        <section>
+          <cbp-typography tag="h6" variant="heading-md" context="dark-always" sx='{"margin-bottom":"var(--cbp-space-2x)"}'>Application Support</cbp-typography>
+          <p><em>This application is maintained by The Office of Information Technology: <abbr title="Targeting and Analysis Systems Program Directorate">TASPD</abbr>.</em></p>
+          <cbp-flex gap="var(--cbp-space-4x)" wrap="wrap">
+            <span>Having an issue?</span>
+            <span>Email: <cbp-link href="mailto:somebody@example.com" context="dark-always">this-application-support@abc.def.gov</cbp-link></span>
+            <span>CBP Helpdesk: <cbp-link href="tel:555-555-5555" context="dark-always">(555) 555-5555</cbp-link></span>
+          </cbp-flex>
+        </section>
+      </cbp-footer>
+    </cbp-flex>
+  `;
+};
+
+export const InternalResponsiveCards = InternalResponsiveCardsTemplate.bind({});
+InternalResponsiveCards.args = {
+  numberOfCards: '15',
+  cardMinWidth: '17rem'
+}
+
+
+
+
 /*
 const ExternalTemplate = () => {
   return `