Merge pull request #188 from US-CBP/Dialog-update

updates to Modal and icons
US-CBP · Aug 26, 2024 · 1fb09d2 · 1fb09d2
2 parents 9cbc471 + c0009f9
commit 1fb09d2
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 5 deletions.
diff --git a/packages/web-components/src/components/cbp-button/cbp-button.scss b/packages/web-components/src/components/cbp-button/cbp-button.scss
@@ -200,6 +200,7 @@ cbp-button {
       --cbp-button-color-border: var(--cbp-color-interactive-secondary-base);
       --cbp-button-color-border-hover: var(--cbp-color-interactive-secondary-darker);
 
+      --cbp-button-color-dark: var(--cbp-color-text-lightest);
       --cbp-button-color-bg-dark: var(--cbp-color-interactive-secondary-base);
       --cbp-button-color-bg-hover-dark: var(--cbp-color-interactive-secondary-lighter);
       --cbp-button-color-border-dark: var(--cbp-color-interactive-secondary-base);

diff --git a/packages/web-components/src/components/cbp-dialog/cbp-dialog.scss b/packages/web-components/src/components/cbp-dialog/cbp-dialog.scss
@@ -28,7 +28,7 @@ cbp-dialog {
   top: 0;
   width: 100%;
   height: 100%;
-  z-index: 999;
+  z-index: var(--cbp-z-index-level-top);
   overflow: hidden;
   background-color: rgba(0, 0, 0, 0.3); // backdrop
 
@@ -114,7 +114,7 @@ cbp-dialog {
     top: 0;
     width: 100%;
     height: 100%;
-    z-index: 999;
+    z-index: var(--cbp-z-index-level-top);
     background-color: var(--cbp-dialog-background-color)
   }
 }
diff --git a/packages/web-components/src/components/cbp-dialog/cbp-dialog.stories.tsx b/packages/web-components/src/components/cbp-dialog/cbp-dialog.stories.tsx
@@ -51,16 +51,16 @@ const renderActions = (layout, { btn1, btn2, btn3 }) => {
   if (layout === 'double') {
     return `
       <div slot="cbp-dialog-actions">
-        <cbp-button tag="${btn1.tag}" ${btn1.tag == 'a' ? `href="#"` : ''} fill="solid" color="${btn1.color}" aria-describedby="card-heading-1">${btn1.label}</cbp-button>
         <cbp-button tag="${btn2.tag}" ${btn2.tag == 'a' ? `href="#"` : ''} fill="solid" color="${btn2.color}" aria-describedby="card-heading-1">${btn2.label}</cbp-button>
+        <cbp-button tag="${btn1.tag}" ${btn1.tag == 'a' ? `href="#"` : ''} fill="solid" color="${btn1.color}" aria-describedby="card-heading-1">${btn1.label}</cbp-button>
       </div>
     `;
   } else if (layout === 'triple') {
     return `
       <div slot="cbp-dialog-actions">
-        <cbp-button tag="${btn1.tag}" ${btn1.tag == 'a' ? `href="#"` : ''} fill="solid" color="${btn1.color}" aria-describedby="card-heading-1">${btn1.label}</cbp-button>
-        <cbp-button tag="${btn2.tag}" ${btn2.tag == 'a' ? `href="#"` : ''} fill="solid" color="${btn2.color}" aria-describedby="card-heading-1">${btn2.label}</cbp-button>
         <cbp-button tag="${btn3.tag}" ${btn3.tag == 'a' ? `href="#"` : ''} fill="solid" color="${btn3.color}" aria-describedby="card-heading-1">${btn3.label}</cbp-button>
+        <cbp-button tag="${btn2.tag}" ${btn2.tag == 'a' ? `href="#"` : ''} fill="solid" color="${btn2.color}" aria-describedby="card-heading-1">${btn2.label}</cbp-button>
+        <cbp-button tag="${btn1.tag}" ${btn1.tag == 'a' ? `href="#"` : ''} fill="solid" color="${btn1.color}" aria-describedby="card-heading-1">${btn1.label}</cbp-button>
       </div>
     `;
   } else {

diff --git a/packages/web-components/src/components/cbp-icon/cbp-icon.stories.tsx b/packages/web-components/src/components/cbp-icon/cbp-icon.stories.tsx
@@ -7,6 +7,7 @@ export default {
       description: 'Named icons that are built-in to the component.',
       control: 'select',
       options: [
+        'address-book',
         'angle-down',
         'arrow-right',
         'bars',
@@ -25,6 +26,7 @@ export default {
         'globe',
         'magnifying-glass',
         'minus',
+        'pen-to-square',
         'plus',
         'right-to-bracket',
         'right-from-bracket',

diff --git a/packages/web-components/src/components/cbp-icon/cbp-icon.tsx b/packages/web-components/src/components/cbp-icon/cbp-icon.tsx
@@ -35,6 +35,11 @@ export class CbpIcon {
   // If both are used, add "-solid" to the solid variation.
   // TODO: Verify how well rotating directional icons works. Ideally, we don't need to store 4 versions of arrows, angles, chevrons, etc.
   private icons = {
+    "address-book": {
+      name: 'address-book',
+      viewbox: "0 0 512 512",
+      path: "M96 0C60.7 0 32 28.7 32 64l0 384c0 35.3 28.7 64 64 64l288 0c35.3 0 64-28.7 64-64l0-384c0-35.3-28.7-64-64-64L96 0zM208 288l64 0c44.2 0 80 35.8 80 80c0 8.8-7.2 16-16 16l-192 0c-8.8 0-16-7.2-16-16c0-44.2 35.8-80 80-80zm-32-96a64 64 0 1 1 128 0 64 64 0 1 1 -128 0zM512 80c0-8.8-7.2-16-16-16s-16 7.2-16 16l0 64c0 8.8 7.2 16 16 16s16-7.2 16-16l0-64zM496 192c-8.8 0-16 7.2-16 16l0 64c0 8.8 7.2 16 16 16s16-7.2 16-16l0-64c0-8.8-7.2-16-16-16zm16 144c0-8.8-7.2-16-16-16s-16 7.2-16 16l0 64c0 8.8 7.2 16 16 16s16-7.2 16-16l0-64z",
+    },
     "angle-down": {
       name: "angle-down",
       viewbox: "0 0 448 512",
@@ -130,6 +135,11 @@ export class CbpIcon {
       viewbox: "0 0 448 512",
       path: "M432 256c0 17.7-14.3 32-32 32L48 288c-17.7 0-32-14.3-32-32s14.3-32 32-32l352 0c17.7 0 32 14.3 32 32z",
     },
+    "pen-to-square": {
+      name: "pen-to-square",
+      viewbox: "0 0 512 512",
+      path: "M471.6 21.7c-21.9-21.9-57.3-21.9-79.2 0L362.3 51.7l97.9 97.9 30.1-30.1c21.9-21.9 21.9-57.3 0-79.2L471.6 21.7zm-299.2 220c-6.1 6.1-10.8 13.6-13.5 21.9l-29.6 88.8c-2.9 8.6-.6 18.1 5.8 24.6s15.9 8.7 24.6 5.8l88.8-29.6c8.2-2.7 15.7-7.4 21.9-13.5L437.7 172.3 339.7 74.3 172.4 241.7zM96 64C43 64 0 107 0 160L0 416c0 53 43 96 96 96l256 0c53 0 96-43 96-96l0-96c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 96c0 17.7-14.3 32-32 32L96 448c-17.7 0-32-14.3-32-32l0-256c0-17.7 14.3-32 32-32l96 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L96 64z",
+    },
     "plus": {
       name: "plus",
       viewbox: "0 0 448 512",