@gitlab/ui 40.3.0 → 40.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "40.3.0",
+  "version": "40.6.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -87,15 +87,15 @@
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@rollup/plugin-replace": "^2.3.2",
-    "@storybook/addon-a11y": "6.4.22",
-    "@storybook/addon-docs": "6.4.22",
-    "@storybook/addon-essentials": "6.4.22",
+    "@storybook/addon-a11y": "6.5.0",
+    "@storybook/addon-docs": "6.5.0",
+    "@storybook/addon-essentials": "6.5.0",
     "@storybook/addon-knobs": "6.4.0",
-    "@storybook/addon-storyshots": "6.4.22",
-    "@storybook/addon-storyshots-puppeteer": "6.4.22",
-    "@storybook/addon-viewport": "6.4.22",
-    "@storybook/theming": "6.4.22",
-    "@storybook/vue": "6.4.22",
+    "@storybook/addon-storyshots": "6.5.0",
+    "@storybook/addon-storyshots-puppeteer": "6.5.0",
+    "@storybook/addon-viewport": "6.5.0",
+    "@storybook/theming": "6.5.0",
+    "@storybook/vue": "6.5.0",
     "@vue/test-utils": "1.3.0",
     "autoprefixer": "^9.7.6",
     "babel-jest": "^26.6.3",

package/src/components/base/avatar/avatar.scss

@@ -1,7 +1,7 @@
 $gl-avatar-identicon-bgs: $red-50, $purple-50, $theme-indigo-50, $blue-50, $green-50, $orange-50,
   $gray-50;
 
-.gl-avatar {
+@mixin gl-avatar {
   @include gl-border-1;
   @include gl-border-solid;
   @include gl-border-gray-a-08;
@@ -9,7 +9,7 @@ $gl-avatar-identicon-bgs: $red-50, $purple-50, $theme-indigo-50, $blue-50, $gree
   @include gl-flex-shrink-0;
 }
 
-.gl-avatar-s16 {
+@mixin gl-avatar-s16 {
   @include gl-w-5;
   @include gl-h-5;
   @include gl-font-sm;
@@ -17,7 +17,7 @@ $gl-avatar-identicon-bgs: $red-50, $purple-50, $theme-indigo-50, $blue-50, $gree
   @include gl-rounded-small;
 }
 
-.gl-avatar-s24 {
+@mixin gl-avatar-s24 {
   @include gl-w-6;
   @include gl-h-6;
   @include gl-font-sm;
@@ -25,7 +25,7 @@ $gl-avatar-identicon-bgs: $red-50, $purple-50, $theme-indigo-50, $blue-50, $gree
   @include gl-rounded-base;
 }
 
-.gl-avatar-s32 {
+@mixin gl-avatar-s32 {
   @include gl-w-7;
   @include gl-h-7;
   @include gl-font-base;
@@ -33,7 +33,7 @@ $gl-avatar-identicon-bgs: $red-50, $purple-50, $theme-indigo-50, $blue-50, $gree
   @include gl-rounded-base;
 }
 
-.gl-avatar-s48 {
+@mixin gl-avatar-s48 {
   @include gl-w-9;
   @include gl-h-9;
   @include gl-font-size-h2;
@@ -41,7 +41,7 @@ $gl-avatar-identicon-bgs: $red-50, $purple-50, $theme-indigo-50, $blue-50, $gree
   @include gl-rounded-lg;
 }
 
-.gl-avatar-s64 {
+@mixin gl-avatar-s64 {
   @include gl-w-11;
   @include gl-h-11;
   @include gl-font-size-h-display;
@@ -49,7 +49,7 @@ $gl-avatar-identicon-bgs: $red-50, $purple-50, $theme-indigo-50, $blue-50, $gree
   @include gl-rounded-lg;
 }
 
-.gl-avatar-s96 {
+@mixin gl-avatar-s96 {
   @include gl-w-13;
   @include gl-h-13;
   @include gl-font-size-h-display-xl;
@@ -57,6 +57,142 @@ $gl-avatar-identicon-bgs: $red-50, $purple-50, $theme-indigo-50, $blue-50, $gree
   @include gl-rounded-lg;
 }
 
+.gl-avatar {
+  @include gl-avatar;
+}
+
+.gl-avatar-s16 {
+  @include gl-avatar-s16;
+}
+
+.gl-avatar-s24 {
+  @include gl-avatar-s24;
+}
+
+.gl-avatar-s32 {
+  @include gl-avatar-s32;
+}
+
+.gl-avatar-s48 {
+  @include gl-avatar-s48;
+}
+
+.gl-avatar-s64 {
+  @include gl-avatar-s64;
+}
+
+.gl-avatar-s96 {
+  @include gl-avatar-s96;
+}
+
+.gl-sm-avatar-s16 {
+  @include gl-media-breakpoint-up(sm) {
+    @include gl-avatar-s16;
+  }
+}
+
+.gl-md-avatar-s16 {
+  @include gl-media-breakpoint-up(md) {
+    @include gl-avatar-s16;
+  }
+}
+
+.gl-lg-avatar-s16 {
+  @include gl-media-breakpoint-up(lg) {
+    @include gl-avatar-s16;
+  }
+}
+
+.gl-sm-avatar-s24 {
+  @include gl-media-breakpoint-up(sm) {
+    @include gl-avatar-s24;
+  }
+}
+
+.gl-md-avatar-s24 {
+  @include gl-media-breakpoint-up(md) {
+    @include gl-avatar-s24;
+  }
+}
+
+.gl-lg-avatar-s24 {
+  @include gl-media-breakpoint-up(lg) {
+    @include gl-avatar-s24;
+  }
+}
+
+.gl-sm-avatar-s32 {
+  @include gl-media-breakpoint-up(sm) {
+    @include gl-avatar-s32;
+  }
+}
+
+.gl-md-avatar-s32 {
+  @include gl-media-breakpoint-up(md) {
+    @include gl-avatar-s32;
+  }
+}
+
+.gl-lg-avatar-s32 {
+  @include gl-media-breakpoint-up(lg) {
+    @include gl-avatar-s32;
+  }
+}
+
+.gl-sm-avatar-s48 {
+  @include gl-media-breakpoint-up(sm) {
+    @include gl-avatar-s48;
+  }
+}
+
+.gl-md-avatar-s48 {
+  @include gl-media-breakpoint-up(md) {
+    @include gl-avatar-s48;
+  }
+}
+
+.gl-lg-avatar-s48 {
+  @include gl-media-breakpoint-up(lg) {
+    @include gl-avatar-s48;
+  }
+}
+
+.gl-sm-avatar-s64 {
+  @include gl-media-breakpoint-up(sm) {
+    @include gl-avatar-s64;
+  }
+}
+
+.gl-md-avatar-s64 {
+  @include gl-media-breakpoint-up(md) {
+    @include gl-avatar-s64;
+  }
+}
+
+.gl-lg-avatar-s64 {
+  @include gl-media-breakpoint-up(lg) {
+    @include gl-avatar-s64;
+  }
+}
+
+.gl-sm-avatar-s96 {
+  @include gl-media-breakpoint-up(sm) {
+    @include gl-avatar-s96;
+  }
+}
+
+.gl-md-avatar-s96 {
+  @include gl-media-breakpoint-up(md) {
+    @include gl-avatar-s96;
+  }
+}
+
+.gl-lg-avatar-s96 {
+  @include gl-media-breakpoint-up(lg) {
+    @include gl-avatar-s96;
+  }
+}
+
 .gl-avatar-circle {
   @include gl-rounded-full;
 }

package/src/components/base/avatar/avatar.spec.js

@@ -18,16 +18,42 @@ describe('GlAvatar', () => {
       expect(wrapper.props('size')).toBe(avatarSizeOptions[1]);
     });
 
-    it.each([96, 64, 48, 32, 24, 16])('accepts size %s', (size) => {
-      createWrapper({ size });
+    describe('when number is passed', () => {
+      it.each([96, 64, 48, 32, 24, 16])('accepts size %s', (size) => {
+        createWrapper({ size });
 
-      expect(wrapper.props('size')).toBe(size);
+        expect(wrapper.props('size')).toBe(size);
+      });
+
+      it.each([12, 28, 36, 54, 98])('displays an error for size %s', (size) => {
+        createWrapper({ size });
+
+        expect(wrapper).toHaveLoggedVueErrors();
+      });
+
+      it('adds correct CSS class to avatar', () => {
+        createWrapper({ size: 16 });
+
+        expect(wrapper.classes()).toContain('gl-avatar-s16');
+      });
     });
 
-    it.each([12, 28, 36, 54, 98])('displays an error for size %s', (size) => {
-      createWrapper({ size });
+    describe('when object is passed', () => {
+      it('displays error if any of the sizes are invalid', () => {
+        createWrapper({ size: { default: 16, md: 32, lg: 65 } });
+
+        expect(wrapper).toHaveLoggedVueErrors();
+      });
+
+      it('adds correct CSS classes to avatar', () => {
+        createWrapper({ size: { default: 16, md: 32, lg: 64 } });
 
-      expect(wrapper).toHaveLoggedVueErrors();
+        expect(wrapper.classes()).toContain(
+          'gl-avatar-s16',
+          'gl-md-avatar-s32',
+          'gl-lg-avatar-s64'
+        );
+      });
     });
   });
 });

package/src/components/base/avatar/avatar.stories.js

@@ -59,6 +59,22 @@ export const Image = (args, { argTypes }) => ({
 });
 Image.args = generateImageProps();
 
+export const ResponsiveImage = (args, { argTypes }) => ({
+  components,
+  props: Object.keys(argTypes),
+  template: `
+      <gl-avatar
+        :size="size"
+        :shape="shape"
+        src="https://about.gitlab.com/images/press/gitlab-summit-south-africa.jpg"
+      />
+    `,
+});
+ResponsiveImage.args = generateImageProps({ size: { default: 24, sm: 32, md: 48, lg: 96 } });
+ResponsiveImage.argTypes = {
+  size: { control: 'object' },
+};
+
 export const ProjectFallback = (args, { argTypes }) => ({
   components,
   props: Object.keys(argTypes),

package/src/components/base/avatar/avatar.vue

@@ -1,5 +1,6 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <script>
+import { isNumber } from 'lodash';
 import { avatarShapeOptions, avatarSizeOptions } from '../../../utils/constants';
 import { getAvatarChar } from '../../../utils/string_utils';
 
@@ -28,18 +29,24 @@ export default {
       default: 'avatar',
     },
     size: {
-      type: Number,
+      type: [Number, Object],
       required: false,
       default: avatarSizeOptions[1],
       validator: (value) => {
-        const isValidSize = avatarSizeOptions.includes(value);
+        const sizes = isNumber(value) ? [value] : Object.values(value);
+
+        const areValidSizes = sizes.every((size) => {
+          const isValidSize = avatarSizeOptions.includes(size);
+
+          if (!isValidSize) {
+            /* eslint-disable-next-line no-console */
+            console.error(`Avatar size should be one of [${avatarSizeOptions}], received: ${size}`);
+          }
 
-        if (!isValidSize) {
-          /* eslint-disable-next-line no-console */
-          console.error(`Avatar size should be one of [${avatarSizeOptions}], received: ${value}`);
-        }
+          return isValidSize;
+        });
 
-        return isValidSize;
+        return areValidSizes;
       },
     },
     shape: {
@@ -49,8 +56,19 @@ export default {
     },
   },
   computed: {
-    sizeClass() {
-      return `gl-avatar-s${this.size}`;
+    sizeClasses() {
+      if (isNumber(this.size)) {
+        return `gl-avatar-s${this.size}`;
+      }
+
+      const { default: defaultSize, ...nonDefaultSizes } = this.size;
+
+      return [
+        `gl-avatar-s${defaultSize || avatarSizeOptions[1]}`,
+        ...Object.entries(nonDefaultSizes).map(
+          ([breakpoint, size]) => `gl-${breakpoint}-avatar-s${size}`
+        ),
+      ];
     },
     isCircle() {
       return this.shape === avatarShapeOptions.circle;
@@ -74,14 +92,14 @@ export default {
     v-if="src"
     :src="src"
     :alt="alt"
-    :class="['gl-avatar', { 'gl-avatar-circle': isCircle }, sizeClass]"
+    :class="['gl-avatar', { 'gl-avatar-circle': isCircle }, sizeClasses]"
   />
   <div
     v-else
     :class="[
       'gl-avatar gl-avatar-identicon',
       { 'gl-avatar-circle': isCircle },
-      sizeClass,
+      sizeClasses,
       identiconBackgroundClass,
     ]"
   >

package/src/components/charts/line/line.spec.js

@@ -195,5 +195,14 @@ describe('line component', () => {
 
       expect(findLegend().props('layout')).toBe(LEGEND_LAYOUT_TABLE);
     });
+    it('can be hidden', async () => {
+      createShallowWrapper({
+        showLegend: false,
+      });
+
+      await wrapper.vm.$nextTick();
+
+      expect(findLegend().exists()).toBe(false);
+    });
   });
 });

package/src/components/charts/line/line.stories.js

@@ -62,6 +62,7 @@ const template = `<gl-line-chart
   :thresholds="thresholds"
   :annotations="annotations"
   :includeLegendAvgMax="includeLegendAvgMax"
+  :showLegend="showLegend"
 />`;
 
 const generateProps = ({
@@ -70,7 +71,9 @@ const generateProps = ({
   thresholds = [],
   annotations = [],
   includeLegendAvgMax = true,
+  showLegend = true,
 } = {}) => ({
+  showLegend,
   includeLegendAvgMax,
   option,
   thresholds,
@@ -173,6 +176,27 @@ WithToolbox.args = generateProps({
   },
 });
 
+export const NoLegend = Template.bind({});
+NoLegend.args = generateProps({
+  data: [
+    {
+      name: 'Time Series',
+      data: generateTimeSeries(),
+    },
+  ],
+  option: {
+    animation: false,
+    xAxis: {
+      type: 'time',
+      name: 'Time',
+      axisLabel: {
+        formatter: timeSeriesDateFormatter,
+      },
+    },
+  },
+  showLegend: false,
+});
+
 export default {
   title: 'charts/line-chart',
   component: GlLineChart,

package/src/components/charts/line/line.vue

@@ -117,6 +117,11 @@ export default {
         return [LEGEND_LAYOUT_INLINE, LEGEND_LAYOUT_TABLE].indexOf(layout) !== -1;
       },
     },
+    showLegend: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
   },
   data() {
     // Part of the tooltip related data can be
@@ -230,6 +235,9 @@ export default {
     legendStyle() {
       return { paddingLeft: `${grid.left}px` };
     },
+    hasLegend() {
+      return this.compiledOptions && this.showLegend;
+    },
     seriesInfo() {
       return this.compiledOptions.series.reduce((acc, series, index) => {
         if (series.type === 'line') {
@@ -366,7 +374,7 @@ export default {
       <tooltip-default-format v-else :tooltip-content="dataTooltipContent" />
     </chart-tooltip>
     <chart-legend
-      v-if="compiledOptions"
+      v-if="hasLegend"
       :chart="chart"
       :style="legendStyle"
       :series-info="seriesInfo"

package/src/scss/utilities.scss

@@ -418,6 +418,14 @@
   background-color: $purple-50 !important
 }
 
+.gl-bg-purple-800 {
+  background-color: $purple-800
+}
+
+.gl-bg-purple-800\! {
+  background-color: $purple-800 !important
+}
+
 .gl-bg-red-50 {
   background-color: $red-50
 }
@@ -1197,6 +1205,14 @@
   border-color: $blue-700 !important;
 }
 
+.gl-border-purple-700 {
+  border-color: $purple-700;
+}
+
+.gl-border-purple-700\! {
+  border-color: $purple-700 !important;
+}
+
 .gl-border-gray-a-08 {
   border-color: $t-gray-a-08;
 }
@@ -2475,6 +2491,14 @@
   color: $purple-700 !important;
 }
 
+.gl-text-purple-800 {
+  color: $purple-800;
+}
+
+.gl-text-purple-800\! {
+  color: $purple-800 !important;
+}
+
 .gl-text-theme-indigo-200 {
   color: $theme-indigo-200;
 }
@@ -4723,6 +4747,14 @@
   min-height: $gl-spacing-scale-7 !important;
 }
 
+.gl-min-h-8 {
+  min-height: $gl-spacing-scale-8;
+}
+
+.gl-min-h-8\! {
+  min-height: $gl-spacing-scale-8 !important;
+}
+
 .gl-max-w-15 {
   max-width: $gl-spacing-scale-15;
 }

package/src/scss/utility-mixins/background.scss

@@ -146,6 +146,10 @@
   background-color: $purple-50;
 }
 
+@mixin gl-bg-purple-800 {
+  background-color: $purple-800;
+}
+
 @mixin gl-bg-red-50 {
   background-color: $red-50;
 }

package/src/scss/utility-mixins/border.scss

@@ -147,6 +147,10 @@
   border-color: $blue-700;
 }
 
+@mixin gl-border-purple-700 {
+  border-color: $purple-700;
+}
+
 @mixin gl-border-gray-a-08 {
   border-color: $t-gray-a-08;
 }

package/src/scss/utility-mixins/color.scss

@@ -193,6 +193,10 @@
   color: $purple-700;
 }
 
+@mixin gl-text-purple-800 {
+  color: $purple-800;
+}
+
 @mixin gl-text-theme-indigo-200 {
   color: $theme-indigo-200;
 }

package/src/scss/utility-mixins/sizing.scss

@@ -329,6 +329,10 @@
   min-height: $gl-spacing-scale-7;
 }
 
+@mixin gl-min-h-8 {
+  min-height: $gl-spacing-scale-8;
+}
+
 @mixin gl-max-w-15 {
   max-width: $gl-spacing-scale-15;
 }