From 696d10da83f9686b70e1eec585ac7f0c53c3341d Mon Sep 17 00:00:00 2001
From: Barrett Grubbs <barrettgrubbs@gmail.com>
Date: Tue, 17 Sep 2024 13:20:44 -0400
Subject: [PATCH] update from review

---
 .../src/components/cbp-card/cbp-card.scss            | 12 ++++++++++--
 .../src/components/cbp-card/cbp-card.stories.tsx     |  4 ++--
 .../src/components/cbp-card/cbp-card.tsx             |  9 +++++----
 3 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/packages/web-components/src/components/cbp-card/cbp-card.scss b/packages/web-components/src/components/cbp-card/cbp-card.scss
index b08f45de..9f523e8d 100644
--- 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 {
@@ -34,6 +40,7 @@
   --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);
@@ -73,6 +80,7 @@ cbp-card {
     width: 100%;
     max-width: 100%;
     flex-grow: 1;
+    overflow: auto;
 
     :last-child {
       margin-bottom: 0;
@@ -239,11 +247,11 @@ cbp-card {
     }
   }
 
-  &[flag]{
+  &[variant=flag]{
     flex-direction: row;
     
     .cbp-card-flag{
-      width: 7rem;
+      min-width: var(--cbp-flag-card-min-width);
       align-content: center;
       text-align: center;
       color: var(--cbp-flag-card-color);
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
index 776e9b1e..eba3bb50 100644
--- a/packages/web-components/src/components/cbp-card/cbp-card.stories.tsx
+++ b/packages/web-components/src/components/cbp-card/cbp-card.stories.tsx
@@ -136,7 +136,7 @@ const BannerTemplate = ({ title, color, bodyText, withIcon, context, sx }) => {
 const FlagTemplate = ({ title, color, flag, bodyText, withIcon, context, sx }) => {
   return ` 
     <cbp-card
-      flag='true'
+      variant='flag'
       ${color ? `color=${color}` : ''}
       ${context && context != 'light-inverts' ? `context=${context}` : ''}
       ${sx ? 'sx=' + JSON.stringify(sx) : ''}
@@ -304,7 +304,7 @@ BannerCard.args = {
 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/pixel-art/svg" />', //documentation for dicebear https://www.dicebear.com/how-to-use/http-api/
+  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',
 };
diff --git a/packages/web-components/src/components/cbp-card/cbp-card.tsx b/packages/web-components/src/components/cbp-card/cbp-card.tsx
index 577dd56c..549ed4df 100644
--- a/packages/web-components/src/components/cbp-card/cbp-card.tsx
+++ b/packages/web-components/src/components/cbp-card/cbp-card.tsx
@@ -17,10 +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;
+  // @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;
@@ -43,11 +43,12 @@ export class CbpCard {
   render() {
     return (
       <Host>
-        {this.flag ? 
+        {/* {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" />}