Merge pull request #244 from US-CBP/Update/Loader_circular_text

Loader update
US-CBP · Feb 5, 2025 · a08d1b3 · a08d1b3
2 parents 5716cfd + 0a317d5
commit a08d1b3
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 16 deletions.
diff --git a/packages/web-components/src/components/cbp-loader/cbp-loader.scss b/packages/web-components/src/components/cbp-loader/cbp-loader.scss
@@ -38,6 +38,7 @@
   --cbp-loader-status-description-line-height: 3.5;
   --cbp-loader-status-indicator-color: var(--cbp-color-white);
   --cbp-loader-status-indicator-color-dark: var(--cbp-color-black);
+  --cbp-loader-status-description-padding: 0 0 0 var(--cbp-space-2x);
 
   --cbp-loader-linear-height: var(--cbp-space-2x);
   --cbp-loader-linear-width: 100%;
@@ -51,6 +52,7 @@
   --cbp-loader-status-indicator-diameter: var(--cbp-space-4x);
 
   --cbp-loader-circular-determinate: var(--cbp-loader-track-color);
+  --cbp-loader-flex-direction: row;
 }
 
 [data-cbp-theme=light] cbp-loader[context*=dark]:not([context=light-always]),
@@ -128,11 +130,13 @@ cbp-loader {
 
   /** styling for the circular variant of the loader*/
   &[variant="circular"]{
-    height: var(--cbp-loader-diameter);
-    width: var(--cbp-loader-diameter);
     display: inline-flex;
+    flex-direction: var(--cbp-loader-flex-direction);
 
     progress{
+
+      height: var(--cbp-loader-diameter);
+      width: var(--cbp-loader-diameter);
       display: flex;
       align-items: center;
       justify-content: center;
@@ -185,14 +189,33 @@ cbp-loader {
 
       .cbp-loader-desc{
         position: absolute;
-        width: inherit;      
+        width: var(--cbp-loader-diameter);      
         line-height: var(--cbp-loader-status-description-line-height);
         text-align: center;
         z-index: var(--cbp-z-index-level-3);
         color: var(--cbp-loader-color);
         font-weight: var(--cbp-font-weight-bold);
       }
+
+      label{
+        color: var(--cbp-loader-status-description-color);
+        font-size: var(--cbp-font-size-subhead);
+        font-weight: var(--cbp-font-weight-medium);
+        align-self: center;
+        padding: var(--cbp-loader-status-description-padding);
+        order: 2;
+      }
     }
+
+    &[orientation='horizontal']{
+      --cbp-loader-status-description-padding: 0 0 0 var(--cbp-space-2x);
+      --cbp-loader-flex-direction: row
+    }
+    &[orientation='vertical']:not([size="small"]){
+      --cbp-loader-status-description-padding: var(--cbp-space-2x) 0 0 0;
+      --cbp-loader-flex-direction: column
+    }
+
   }
 
 /** Color variations for Loader */

diff --git a/packages/web-components/src/components/cbp-loader/cbp-loader.stories.tsx b/packages/web-components/src/components/cbp-loader/cbp-loader.stories.tsx
@@ -26,9 +26,15 @@ export default {
             if: { arg: 'determinate', eq: true },
         },
         label : {
+            name: 'label (slotted)',
             control: 'text',
             if: { arg: 'determinate', eq: true}
         },
+        orientation: {
+            control: 'select',
+            options: ['horizontal', 'vertical'],
+            if: {arg: 'variant', eq: 'circular'}
+        },
         success : {
             control: 'boolean'
         },
@@ -49,7 +55,7 @@ export default {
     }
   };
 
-const Template = ({progressid, variant, label, size, determinate, value, max, success, error, context, sx }) => {
+const Template = ({progressid, variant, label, size, determinate, value, max, orientation, success, error, context, sx }) => {
     return ` 
         <cbp-loader
             ${progressid ? `progressid=${progressid}` : ''}
@@ -58,6 +64,7 @@ const Template = ({progressid, variant, label, size, determinate, value, max, su
             ${determinate ? 'determinate' : ''}
             ${value ? `value=${value}` : ``}
             ${max ? `max=${max}` : ``}
+            ${orientation ? `orientation=${orientation}` : ``}
             ${success ? 'success' : ''}
             ${error ? 'error' : ''}
             ${context && context != 'light-inverts' ? `context=${context}` : ''}
@@ -67,10 +74,11 @@ const Template = ({progressid, variant, label, size, determinate, value, max, su
             `${label}`
             : ``
             }
+            ${variant == 'circular' && size == 'large' && label && !(success || error)? 
+            `${label}` : `` }
         </cbp-loader>
     `;
 };
-
 export const Loader = Template.bind({});
 
 Loader.args = {

diff --git a/packages/web-components/src/components/cbp-loader/cbp-loader.tsx b/packages/web-components/src/components/cbp-loader/cbp-loader.tsx
@@ -28,6 +28,9 @@ export class CbpLoader {
   /** Used in deternminate mode to display the max value of loaded content*/
   @Prop() max: number = 100;
 
+  /** Used to set the text orientation for the circular determinate loader's description*/
+  @Prop({reflect: true}) orientation: "horizontal" | "vertical" = 'horizontal'; 
+
   /** Used to set the loader to the 'success' state of the loader */
   @Prop({mutable: true, reflect: true}) success: boolean;
 
@@ -53,7 +56,6 @@ export class CbpLoader {
     if(this.determinate && this.variant == 'circular'){
       this.host.style.setProperty("--cbp-loader-circular-determinate", `conic-gradient(var(--cbp-loader-color) ${((this.value / this.max) * 100) * 3.6}deg, var(--cbp-loader-track-color) 0deg)`)
     }
-
   }
 
   render() {
@@ -66,10 +68,10 @@ export class CbpLoader {
     }else{
       statusIndicator =  Math.round((this.value / this.max) * 100) + "%"
     }
-  
+
     return (
-      <Host >
-        {this.determinate && this.variant == 'linear' && 
+      <Host>
+        {this.determinate && 
 
             <label
               htmlFor={this.progressId}
@@ -84,7 +86,7 @@ export class CbpLoader {
               }
               <slot />
 
-              {this.size != 'small' &&
+              {this.size != 'small' && this.variant == 'linear' &&
                <span>{statusIndicator}</span>
               }
             </label> 
@@ -95,17 +97,16 @@ export class CbpLoader {
             {statusIndicator}
           </span>  
         }
-        {this.determinate && this.variant == 'circular' && this.size == 'small' && (this.success || this.error)
-        ?
-          statusIndicator
-        :
-          <progress      
+
+        {this.determinate && this.variant == 'circular' && this.size == 'small' && (this.success || this.error) ? statusIndicator : `` }
+
+        <progress      
             id={this.progressId}
             value={this.determinate ? this.value : null}
             max={this.max}
+            hidden={this.determinate && this.variant == 'circular' && this.size == 'small' && (this.success || this.error)}
           >
           </progress>
-        }
       </Host>
     );
   }