Merge branch '350646-adjust-statistics-card-component' into 'master'

Adjust StatisticsCard component

See merge request gitlab-org/gitlab!82497

ee/app/assets/javascripts/usage_quotas/components/statistics_card.stories.js

@@ -22,6 +22,7 @@ Default.args = {
   totalValue: '1,500',
   description: 'Additional minutes used',
   helpLink: 'dummy.com/link',
+  helpLabel: 'Help link label, used for aria-label',
   percentage: 84,
 };
 
@@ -41,6 +42,7 @@ WithUnits.args = {
   totalUnit: 'GiB',
   description: 'Storage used',
   helpLink: 'dummy.com/link',
+  helpLabel: 'Help link label, used for aria-label',
   percentage: 4,
   purchaseButtonLink: 'purchase.com/test',
   purchaseButtonText: 'Purchase storage',

ee/app/assets/javascripts/usage_quotas/components/statistics_card.vue

@@ -35,6 +35,11 @@ export default {
       required: false,
       default: null,
     },
+    helpLabel: {
+      type: String,
+      required: false,
+      default: null,
+    },
     percentage: {
       type: Number,
       required: false,
@@ -65,10 +70,10 @@ export default {
     data-testid="container"
     :class="cssClass"
   >
-    <div class="gl-display-flex gl-justify-content-space-between gl-mb-3">
+    <div class="gl-display-flex gl-justify-content-space-between">
       <p
         v-if="usageValue"
-        class="gl-font-size-h-display gl-font-weight-bold"
+        class="gl-font-size-h-display gl-font-weight-bold gl-mb-3"
         data-testid="denominator"
       >
         {{ usageValue }}
@@ -95,7 +100,7 @@ export default {
         </gl-button>
       </div>
     </div>
-    <p v-if="description" class="gl-font-weight-bold gl-mt-3" data-testid="description">
+    <p v-if="description" class="gl-font-weight-bold" data-testid="description">
       {{ description }}
       <gl-link
         v-if="helpLink"
@@ -103,10 +108,11 @@ export default {
         target="_blank"
         rel="noopener noreferrer nofollow"
         class="gl-ml-2"
+        :aria-label="helpLabel"
       >
         <gl-icon name="question-o" />
       </gl-link>
     </p>
-    <gl-progress-bar v-if="percentage" :value="percentage" />
+    <gl-progress-bar v-if="percentage !== null" :value="percentage" />
   </div>
 </template>

ee/spec/frontend/usage_quotas/components/__snapshots__/statistics_card_spec.js.snap

 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`StatisticsCard denominator block renders denominator block with all elements when all props are passed 1`] = `
-"<p data-testid=\\"denominator\\" class=\\"gl-font-size-h-display gl-font-weight-bold\\">
+"<p data-testid=\\"denominator\\" class=\\"gl-font-size-h-display gl-font-weight-bold gl-mb-3\\">
   1,000
   <span data-testid=\\"denominator-usage-unit\\" class=\\"gl-font-lg\\">MiB</span> <span data-testid=\\"denominator-total\\">
         /

ee/spec/frontend/usage_quotas/components/statistics_card_spec.js

@@ -139,12 +139,20 @@ describe('StatisticsCard', () => {
       expect(wrapper.findComponent(GlProgressBar).exists()).toBe(false);
     });
 
-    it('renders progress bar if prop is passed', () => {
+    it('renders progress bar if prop is greater than 0', () => {
       const percentage = 99;
       createComponent({ percentage });
 
       expect(findProgressBar().exists()).toBe(true);
       expect(findProgressBar().attributes('value')).toBe(String(percentage));
     });
+
+    it('renders the progress bar if prop is 0', () => {
+      const percentage = 0;
+      createComponent({ percentage });
+
+      expect(findProgressBar().exists()).toBe(true);
+      expect(findProgressBar().attributes('value')).toBe(String(percentage));
+    });
   });
 });