Merge pull request #215 from US-CBP/bugfix/storybook8.3

Style the design tokens page with temporary CSS
US-CBP · Oct 16, 2024 · 9e6c972 · 9e6c972
2 parents f516d43 + 6cd8735
commit 9e6c972
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 6 deletions.
diff --git a/packages/web-components/assets/css/storybook-canvas.css b/packages/web-components/assets/css/storybook-canvas.css
@@ -7,4 +7,31 @@ body:has(cbp-app[data-cbp-theme="light"]) {
 body:has(cbp-app[data-cbp-theme="dark"]) {
   /*--cbp-color-body-background: var(--cbp-color-branding-cbp-dark);*/
   background-color: var(--cbp-color-branding-cbp-dark);
-}
+}
+
+/* TechDebt: Remove when table component is added to design tokens story */
+#design-tokens h2 {
+  margin-block-end: 1rem;
+}
+
+#design-tokens table {
+  width: 100%;
+  border-collapse: collapse;
+  border: solid 1px #999;
+  margin-block-end: 2rem;
+}
+
+#design-tokens tr {
+  border-block-end: solid 1px #999;
+}
+
+
+#design-tokens th,
+#design-tokens td {
+  text-align: left;
+  width: 33.3%;
+  padding: .5rem;
+  margin: 0;
+  border: 0;
+  border-block-end: solid 1px #999;
+}
diff --git a/packages/web-components/src/components/cbp-app/core.scss b/packages/web-components/src/components/cbp-app/core.scss
@@ -1,7 +1,7 @@
 /* Additional high level and utilities variables not represented by design tokens */
 :root {
   color-scheme: light;
-  interpolate-size: allow-keywords;
+  //interpolate-size: allow-keywords;
   --cbp-app-color-scheme: light; // Is this needed?
 
   --cbp-color-body-text: var(--cbp-color-text-darkest);

diff --git a/packages/web-components/src/stories/Design-tokens.stories.tsx b/packages/web-components/src/stories/Design-tokens.stories.tsx
@@ -173,14 +173,13 @@ const Template = () => {
       <tbody>
         ${outputTableRow(contents)}
       </tbody>
-    </table>
-    <br /><br />`;
+    </table>`;
   });
 
   return `
-    <cbp-app>
+    <main id="design-tokens">
       ${pageContents}
-    </cbp-app>
+    </main>
 `;
 };