Merge pull request #203 from US-CBP/Card-flag-variant

Card flag variant
US-CBP · Sep 17, 2024 · 503e14a · 503e14a
2 parents 4458d50 + 696d10d
commit 503e14a
Show file tree

Hide file tree

Showing 3 changed files with 101 additions and 1 deletion.
diff --git a/packages/web-components/src/components/cbp-card/cbp-card.scss b/packages/web-components/src/components/cbp-card/cbp-card.scss
@@ -13,6 +13,12 @@
  * @prop --cbp-banner-card-color-body-background-dark: var(--cbp-color-gray-cool-60);
  * @prop --cbp-banner-card-color-border: var(--cbp-color-base-neutral-lighter);
  * @prop --cbp-banner-card-color-border-dark: var(--cbp-color-gray-cool-50);
+
+ * @prop  --cbp-flag-card-min-width: 7rem;
+ * @prop  --cbp-flag-card-color: var(--cbp-color-text-lighter);
+ * @prop  --cbp-flag-card-color-dark: var(--cbp-color-text-darker);
+ * @prop  --cbp-flag-card-color-background: var(--cbp-color-gray-cool-60);
+ * @prop  --cbp-flag-card-color-background-dark: var(--cbp-color-gray-cool-30);
 */
 
 :root {
@@ -33,6 +39,12 @@
   --cbp-banner-card-color-body-background-dark: var(--cbp-color-gray-cool-60);
   --cbp-banner-card-color-border: var(--cbp-color-base-neutral-lighter);
   --cbp-banner-card-color-border-dark: var(--cbp-color-gray-cool-50);
+
+  --cbp-flag-card-min-width: 7rem;
+  --cbp-flag-card-color: var(--cbp-color-text-lighter);
+  --cbp-flag-card-color-dark: var(--cbp-color-text-darker);
+  --cbp-flag-card-color-background: var(--cbp-color-gray-cool-60);
+  --cbp-flag-card-color-background-dark: var(--cbp-color-gray-cool-30);
 }
 
 
@@ -47,6 +59,9 @@
   --cbp-banner-card-color-title: var(--cbp-banner-card-color-title-dark);
   --cbp-banner-card-color-body-background: var(--cbp-banner-card-color-body-background-dark);
   --cbp-banner-card-color-border: var(--cbp-banner-card-color-border-dark);
+
+  --cbp-flag-card-color: var(--cbp-flag-card-color-dark);
+  --cbp-flag-card-color-background: var(--cbp-flag-card-color-background-dark);
 }
 
 cbp-card {
@@ -65,6 +80,7 @@ cbp-card {
     width: 100%;
     max-width: 100%;
     flex-grow: 1;
+    overflow: auto;
 
     :last-child {
       margin-bottom: 0;
@@ -81,6 +97,10 @@ cbp-card {
     font-weight: var(--cbp-font-weight-medium);
     font-size: var(--cbp-font-size-heading-lg);
     line-height: var(--cbp-line-height-sm);
+
+     > *{
+      color: var(--cbp-card-color-text);
+    }
   }
 
   &[variant=decision] [slot=cbp-card-title] {
@@ -226,4 +246,39 @@ cbp-card {
       --cbp-banner-card-color-body-background-dark: var(--cbp-color-danger-darker);
     }
   }
+
+  &[variant=flag]{
+    flex-direction: row;
+
+    .cbp-card-flag{
+      min-width: var(--cbp-flag-card-min-width);
+      align-content: center;
+      text-align: center;
+      color: var(--cbp-flag-card-color);
+      background-color: var(--cbp-flag-card-color-background);
+    }
+
+
+    &[color=info] {   
+      --cbp-flag-card-color-dark: (--cbp-color-text-lighter);
+      --cbp-flag-card-color-background: var(--cbp-color-info-base);
+      --cbp-flag-card-color-background-dark: var(--cbp-color-info-dark);
+    }
+
+    &[color=success] {
+      --cbp-flag-card-color-dark: (--cbp-color-text-lighter);
+      --cbp-flag-card-color-background: var(--cbp-color-success-base);
+      --cbp-flag-card-color-background-dark: var(--cbp-color-success-dark);
+    }
+
+    &[color=warning] {
+      --cbp-flag-card-color-background: var(--cbp-color-warning-dark);
+      --cbp-flag-card-color-background-dark: var(--cbp-color-warning-light);
+    }
+
+    &[color=danger] {
+      --cbp-flag-card-color-background: var(--cbp-color-danger-base);
+      --cbp-flag-card-color-background-dark: var(--cbp-color-danger-light);
+    }
+}
 }
diff --git a/packages/web-components/src/components/cbp-card/cbp-card.stories.tsx b/packages/web-components/src/components/cbp-card/cbp-card.stories.tsx
@@ -133,6 +133,26 @@ const BannerTemplate = ({ title, color, bodyText, withIcon, context, sx }) => {
   `;
 };
 
+const FlagTemplate = ({ title, color, flag, bodyText, withIcon, context, sx }) => {
+  return ` 
+    <cbp-card
+      variant='flag'
+      ${color ? `color=${color}` : ''}
+      ${context && context != 'light-inverts' ? `context=${context}` : ''}
+      ${sx ? 'sx=' + JSON.stringify(sx) : ''}
+    >
+      <div slot='cbp-card-flag'>
+        ${flag}
+      </div>
+      <cbp-typography tag='h4' slot="cbp-card-title">
+        ${withIcon ? `<cbp-icon name='triangle-exclamation' size='1.25rem'></cbp-icon>` : ''}
+        ${title}
+      </cbp-typography>
+      <p>${bodyText}</p>  
+    </cbp-card>
+  `;
+};
+
 // For testing only:
 /*
 const CardsGridTemplate = ({ title, color, stretch, bodyText, actionsLayout, actionsConfig, sx }) => {
@@ -280,3 +300,19 @@ BannerCard.args = {
   title: 'Banner Card Title',
   bodyText: 'Here is an example of some supplementary text for this purely informational card',
 };
+
+export const FlagCard = FlagTemplate.bind({});
+FlagCard.args = {
+  // flag: '<cbp-icon name="globe" size="3rem"> </cbp-icon>',
+  flag: '<img src="https://api.dicebear.com/9.x/personas/svg" />', //documentation for dicebear https://www.dicebear.com/how-to-use/http-api/
+  title: 'Card Title',
+  bodyText: 'Here is an example of some body text for this purely informational card',
+};
+FlagCard.argTypes = {
+  color: {
+    name: 'Color',
+    description: 'Set the color of the card',
+    control: 'select',
+    options: ['default', 'info', 'success', 'warning', 'danger'],
+  },
+};
diff --git a/packages/web-components/src/components/cbp-card/cbp-card.tsx b/packages/web-components/src/components/cbp-card/cbp-card.tsx
@@ -17,7 +17,10 @@ export class CbpCard {
   @Prop({ reflect: true }) color: 'info' | 'success' | 'warning' | 'danger';
 
   /** Specifies optional variants with difference from the default card. */
-  @Prop({ reflect: true }) variant: 'banner' | 'decision';
+  @Prop({ reflect: true }) variant: 'banner' | 'decision' | 'flag';
+
+  /** When present, the card will have a slot avaliable to display an img/icon flag for the card  */
+  // @Prop({ reflect: true }) flag: boolean = false;
 
   /** When present, the card will stretch vertically to fill its parent container; most useful when placed in an equally sized grid or row of cards. */
   @Prop({ reflect: true }) stretch: boolean = false;
@@ -40,6 +43,12 @@ export class CbpCard {
   render() {
     return (
       <Host>
+        {/* {this.variant == 'flag' ? 
+        <div class='cbp-card-flag'>
+          <slot name='cbp-card-flag'/>
+        </div>
+           : ''} */}
+        {this.variant === 'flag' && <div class='cbp-card-flag'><slot name='cbp-card-flag'/></div>}   
         {this.variant === 'banner' && <slot name="cbp-card-title" />}
         <div class="cbp-card-body">
           {this.variant !== 'banner' && <slot name="cbp-card-title" />}