@gitlab/ui 36.3.0 → 36.6.0

package/documentation/documented_stories.js

@@ -127,6 +127,8 @@ export const setupStorybookReadme = () =>
         'GlNavItem',
         'GlNavItemDropdown',
         'GlPopover',
+        'GlSingleStat',
+        'GlDrawer',
       ],
       components: {
         GlComponentDocumentation,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "36.3.0",
+  "version": "36.6.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -88,15 +88,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.15",
-    "@storybook/addon-docs": "6.4.15",
-    "@storybook/addon-essentials": "6.4.15",
+    "@storybook/addon-a11y": "6.4.19",
+    "@storybook/addon-docs": "6.4.19",
+    "@storybook/addon-essentials": "6.4.19",
     "@storybook/addon-knobs": "6.4.0",
-    "@storybook/addon-storyshots": "6.4.15",
-    "@storybook/addon-storyshots-puppeteer": "6.4.15",
-    "@storybook/addon-viewport": "6.4.15",
-    "@storybook/theming": "6.4.15",
-    "@storybook/vue": "6.4.15",
+    "@storybook/addon-storyshots": "6.4.19",
+    "@storybook/addon-storyshots-puppeteer": "6.4.19",
+    "@storybook/addon-viewport": "6.4.19",
+    "@storybook/theming": "6.4.19",
+    "@storybook/vue": "6.4.19",
     "@vue/test-utils": "1.3.0",
     "autoprefixer": "^9.7.6",
     "babel-jest": "^26.6.3",

package/scss_to_js/scss_variables.js

@@ -276,6 +276,7 @@ export const glFontSizeMonospaceSm = '0.6875rem'
 export const glMonospaceFont = 'Menlo, DejaVu Sans Mono, Liberation Mono, Consolas, Ubuntu Mono, Courier New, andale mono, lucida console, monospace'
 export const glRegularFont = '-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Noto Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji'
 export const glFonts = '("monospace": "Menlo", "DejaVu Sans Mono", "Liberation Mono", "Consolas", "Ubuntu Mono", "Courier New", "andale mono", "lucida console", monospace, "regular": -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", Ubuntu, Cantarell, "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji")'
+export const borderColor = '#dbdbdb'
 export const glBorderSize1 = '1px'
 export const glBorderSize2 = '2px'
 export const glBorderSize3 = '3px'

package/scss_to_js/scss_variables.json

@@ -1441,6 +1441,11 @@
       ],
       "compiledValue": "(\"monospace\": \"Menlo\", \"DejaVu Sans Mono\", \"Liberation Mono\", \"Consolas\", \"Ubuntu Mono\", \"Courier New\", \"andale mono\", \"lucida console\", monospace, \"regular\": -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Noto Sans\", Ubuntu, Cantarell, \"Helvetica Neue\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\")"
     },
+    {
+      "name": "$border-color",
+      "value": "$gray-100",
+      "compiledValue": "#dbdbdb"
+    },
     {
       "name": "$gl-border-size-1",
       "value": "1px",

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

@@ -16,19 +16,19 @@ const template = `
 
 const defaultItems = [
   {
-    text: 'First Item',
+    text: 'First item',
     href: '#',
   },
   {
-    text: 'Second Item',
+    text: 'Second item',
     href: '#',
   },
   {
-    text: 'Third Item',
+    text: 'Third item',
     href: '#',
   },
   {
-    text: 'Fourth Item',
+    text: 'Fourth item',
     to: { name: 'fourth-item' },
   },
 ];
@@ -63,19 +63,19 @@ export default {
 
 const extraItems = [
   {
-    text: 'Fifth Item',
+    text: 'Fifth item',
     href: '#',
   },
   {
-    text: 'Sixth Item',
+    text: 'Sixth item',
     href: '#',
   },
   {
-    text: 'Seventh Item',
+    text: 'Seventh item',
     href: '#',
   },
   {
-    text: 'Eighth Item',
+    text: 'Eighth item',
     href: '#',
   },
 ];

package/src/components/base/drawer/drawer.documentation.js

@@ -1,8 +1,6 @@
 import description from './drawer.md';
-import examples from './examples';
 
 export default {
   followsDesignSystem: false,
   description,
-  examples,
 };

package/src/components/base/drawer/drawer.md

@@ -1,9 +1,3 @@
-# Drawer
-
-<!-- STORY -->
-
-## Usage
-
 The drawer is used to show more information about a certain resource in the UI and potentially
 handle actions on the information.
 

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

@@ -1,13 +1,7 @@
-import { withKnobs } from '@storybook/addon-knobs';
-import { documentedStoriesOf } from '../../../../documentation/documented_stories';
-import { GlButton } from '../../../index';
+import { GlDrawer, GlButton } from '../../../index';
 import readme from './drawer.md';
-import GlDrawer from './drawer.vue';
 
-const components = {
-  GlDrawer,
-  GlButton,
-};
+const components = { GlDrawer, GlButton };
 
 const drawerContent = [
   'One',
@@ -31,7 +25,8 @@ const drawerContent = [
   )
   .join('');
 
-const getStory = (template) => ({
+export const Default = (_args, { viewMode }) => ({
+  components,
   methods: {
     toggle() {
       this.open = !this.open;
@@ -42,45 +37,68 @@ const getStory = (template) => ({
   },
   data() {
     return {
-      open: true,
+      open: viewMode !== 'docs',
     };
   },
-  components,
-  template,
-});
-
-documentedStoriesOf('base/drawer', readme)
-  .addDecorator(withKnobs)
-  .add('default', () =>
-    getStory(`
+  template: `
     <div>
       <gl-button @click="toggle">Toggle Drawer</gl-button>
       <gl-drawer :open="open" @close="close">
         <template #title>List Settings</template>
         ${drawerContent}
       </gl-drawer>
-    </div>`)
-  )
-  .add('with actions', () =>
-    getStory(`
+    </div>`,
+});
+
+export const WithActions = (_args, { viewMode }) => ({
+  components,
+  methods: {
+    toggle() {
+      this.open = !this.open;
+    },
+    close() {
+      this.open = false;
+    },
+  },
+  data() {
+    return {
+      open: viewMode !== 'docs',
+    };
+  },
+  template: `
     <div>
       <gl-button @click="toggle">Toggle Drawer</gl-button>
       <gl-drawer :open="open" @close="close">
-        <template #title>
+          <template #title>
           <h3>custom-network-policy</h3>
         </template>
         <template #header>
-          <div class="gl-mt-5">
-            <gl-button variant="confirm">Save</gl-button>
-            <gl-button class="gl-ml-3" @click="toggle">Cancel</gl-button>
-          </div>
+            <div class="gl-mt-5">
+              <gl-button variant="confirm">Save</gl-button>
+              <gl-button class="gl-ml-3" @click="toggle">Cancel</gl-button>
+            </div>
         </template>
-        ${drawerContent}
+          ${drawerContent}
       </gl-drawer>
-    </div>`)
-  )
-  .add('sidebar variant', () =>
-    getStory(`
+    </div>`,
+});
+
+export const SidebarVariant = (_args, { viewMode }) => ({
+  components,
+  methods: {
+    toggle() {
+      this.open = !this.open;
+    },
+    close() {
+      this.open = false;
+    },
+  },
+  data() {
+    return {
+      open: viewMode !== 'docs',
+    };
+  },
+  template: `
     <div>
       <gl-button @click="toggle">Toggle Drawer</gl-button>
       <gl-drawer :open="open" @close="close" variant="sidebar">
@@ -94,5 +112,19 @@ documentedStoriesOf('base/drawer', readme)
         </template>
         ${drawerContent}
       </gl-drawer>
-    </div>`)
-  );
+    </div>`,
+});
+
+export default {
+  title: 'base/drawer',
+  component: GlDrawer,
+  parameters: {
+    knobs: { disabled: true },
+    controls: { disable: true },
+    docs: {
+      description: {
+        component: readme,
+      },
+    },
+  },
+};

package/src/components/charts/single_stat/single_stat.documentation.js

@@ -1,7 +1,5 @@
-import examples from './examples';
 import description from './single_stat.md';
 
 export default {
-  examples,
   description,
 };

package/src/components/charts/single_stat/single_stat.md

@@ -1,5 +1,3 @@
-### Single Stat
-
 The single stat component is used to show a single value. The color of the meta icon / badge is
 determined by the **variant** prop, which can be one of "success", "warning", "danger", "info",
 "neutral" or "muted" (default).

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

@@ -1,100 +1,93 @@
 import iconSpriteInfo from '@gitlab/svgs/dist/icons.json';
-import { withKnobs, text, select, boolean, number } from '@storybook/addon-knobs';
 import { GlSingleStat } from '../../../charts';
-import { documentedStoriesOf } from '../../../../documentation/documented_stories';
 import { badgeVariantOptions } from '../../../utils/constants';
 import readme from './single_stat.md';
 
-const components = {
-  GlSingleStat,
-};
-
-const template = `
-    <gl-single-stat
-      :title="title"
-      :value="value"
-      :unit="unit"
-      :variant="variant"
-      :meta-text="metaText"
-      :meta-icon="metaIcon"
-      :title-icon="titleIcon"
-      :should-animate="shouldAnimate"
-      :animation-decimal-places="animationDecimalPlaces"
-    />
-  `;
-
 const generateProps = ({
   variant = GlSingleStat.props.variant.default,
   title = 'Single stat',
   value = '100',
-  unit = null,
-  metaText = null,
+  unit = '',
+  metaText = '',
   metaIcon = null,
   titleIcon = null,
   shouldAnimate = false,
   animationDecimalPlaces = 0,
 } = {}) => ({
-  variant: {
-    type: String,
-    default: select('variant', Object.values(badgeVariantOptions), variant),
-  },
-  title: {
-    type: String,
-    default: text('title', title),
-  },
-  value: {
-    type: String,
-    default: text('value', value),
-  },
-  unit: {
-    type: [String, Number],
-    default: text('unit', unit),
-  },
-  metaText: {
-    type: String,
-    default: text('metaText', metaText),
-  },
-  metaIcon: {
-    type: String,
-    default: select('metaIcon', ['', ...iconSpriteInfo.icons], metaIcon),
-  },
-  titleIcon: {
-    type: String,
-    default: select('titleIcon', ['', ...iconSpriteInfo.icons], titleIcon),
-  },
-  shouldAnimate: {
-    type: Boolean,
-    default: boolean('shouldAnimate', shouldAnimate),
-  },
-  animationDecimalPlaces: {
-    type: Number,
-    default: number('animationDecimalPlaces', animationDecimalPlaces),
-  },
+  variant,
+  title,
+  value,
+  unit,
+  metaText,
+  metaIcon,
+  titleIcon,
+  shouldAnimate,
+  animationDecimalPlaces,
 });
 
 const metaText = 'Super fast';
 const metaIcon = 'check-circle';
 const titleIcon = 'hourglass';
 
-documentedStoriesOf('charts/single-stat', readme)
-  .addDecorator(withKnobs)
-  .add('default', () => ({
-    components,
-    props: generateProps(),
-    template,
-  }))
-  .add('with badge', () => ({
-    components,
-    props: generateProps({ metaText, metaIcon }),
-    template,
-  }))
-  .add('with meta icon', () => ({
-    components,
-    props: generateProps({ metaIcon }),
-    template,
-  }))
-  .add('with title icon', () => ({
-    components,
-    props: generateProps({ titleIcon }),
-    template,
-  }));
+const Template = (args, { argTypes }) => ({
+  components: {
+    GlSingleStat,
+  },
+  props: Object.keys(argTypes),
+  template: `
+    <gl-single-stat
+      :title="title"
+      :value="value"
+      :unit="unit"
+      :variant="variant"
+      :meta-text="metaText"
+      :meta-icon="metaIcon"
+      :title-icon="titleIcon"
+      :should-animate="shouldAnimate"
+      :animation-decimal-places="animationDecimalPlaces"
+    />`,
+});
+
+export const Default = Template.bind({});
+Default.args = generateProps();
+
+export const WithBadge = Template.bind({});
+WithBadge.args = generateProps({ metaText, metaIcon });
+
+export const WithMetaIcon = Template.bind({});
+WithMetaIcon.args = generateProps({ metaIcon });
+
+export const WithTitleIcon = Template.bind({});
+WithTitleIcon.args = generateProps({ titleIcon });
+
+export default {
+  title: 'charts/single-stat',
+  component: GlSingleStat,
+  parameters: {
+    knobs: { disable: true },
+    docs: {
+      description: {
+        component: readme,
+      },
+    },
+  },
+  argTypes: {
+    variant: {
+      options: Object.values(badgeVariantOptions),
+      control: {
+        type: 'select',
+      },
+    },
+    metaIcon: {
+      options: iconSpriteInfo.icons,
+      control: 'select',
+    },
+    titleIcon: {
+      options: iconSpriteInfo.icons,
+      control: 'select',
+    },
+    unit: {
+      control: 'text',
+    },
+  },
+};

package/src/components/regions/empty_state/empty_state.spec.js

@@ -148,6 +148,55 @@ describe('empty state component', () => {
     });
   });
 
+  describe('with different titles', () => {
+    it('should render title from prop', () => {
+      component = shallowMount(EmptyState, {
+        propsData: {
+          ...props,
+        },
+      });
+
+      const title = component.find('h1');
+      expect(title.text()).toBe(props.title);
+    });
+
+    it('should render title from slot', () => {
+      const slotTitle = 'Slotted title';
+
+      component = shallowMount(EmptyState, {
+        propsData: {
+          ...props,
+          title: null,
+        },
+        slots: {
+          title: `<strong id="slotted">${slotTitle}</strong>`,
+        },
+      });
+
+      const title = component.find('#slotted');
+      expect(title.text()).toBe(slotTitle);
+    });
+
+    it('should render a slotted title over a props title', () => {
+      const slotTitle = 'Slotted title';
+
+      component = shallowMount(EmptyState, {
+        propsData: {
+          ...props,
+        },
+        slots: {
+          title: `<strong id="slotted">${slotTitle}</strong>`,
+        },
+      });
+
+      const title = component.find('#slotted');
+      const propTitle = component.find('h1');
+
+      expect(title.text()).toBe(slotTitle);
+      expect(propTitle.exists()).toBe(false);
+    });
+  });
+
   describe('with different descriptions', () => {
     it('should render description from prop', () => {
       component = shallowMount(EmptyState, {

package/src/components/regions/empty_state/empty_state.vue

@@ -11,7 +11,8 @@ export default {
      */
     title: {
       type: String,
-      required: true,
+      required: false,
+      default: null,
     },
     /**
      * The illustration's URL.
@@ -112,13 +113,15 @@ export default {
     </div>
     <div :class="compact ? 'gl-flex-grow-1 gl-flex-basis-0 gl-px-4' : 'gl-max-w-full gl-m-auto'">
       <div class="gl-mx-auto gl-my-0" :class="{ 'gl-p-5': !compact }">
-        <h1
-          ref="title"
-          class="gl-font-size-h-display gl-line-height-36"
-          :class="compact ? 'h5' : 'h4'"
-        >
-          {{ title }}
-        </h1>
+        <!--
+            @slot Use this slot to customize the empty state's title area.
+            Overrides the `title` prop.
+          -->
+        <slot ref="title" name="title">
+          <h1 class="gl-font-size-h-display gl-line-height-36" :class="compact ? 'h5' : 'h4'">
+            {{ title }}
+          </h1>
+        </slot>
         <p v-if="description || $scopedSlots.description" ref="description" class="gl-mt-3">
           <!--
             @slot Use this slot to customize the empty state's description

package/src/scss/utilities.scss

@@ -865,6 +865,46 @@
 .gl-bg-chevron-down\! {
   background-image: url($gl-icon-chevron-down) !important
 }
+.gl-border {
+  border: solid $gl-border-size-1 $border-color;
+}
+
+.gl-border\! {
+  border: solid $gl-border-size-1 $border-color !important;
+}
+
+.gl-border-t {
+  border-top: solid $gl-border-size-1 $border-color;
+}
+
+.gl-border-t\! {
+  border-top: solid $gl-border-size-1 $border-color !important;
+}
+
+.gl-border-b {
+  border-bottom: solid $gl-border-size-1 $border-color;
+}
+
+.gl-border-b\! {
+  border-bottom: solid $gl-border-size-1 $border-color !important;
+}
+
+.gl-border-l {
+  border-left: solid $gl-border-size-1 $border-color;
+}
+
+.gl-border-l\! {
+  border-left: solid $gl-border-size-1 $border-color !important;
+}
+
+.gl-border-r {
+  border-right: solid $gl-border-size-1 $border-color;
+}
+
+.gl-border-r\! {
+  border-right: solid $gl-border-size-1 $border-color !important;
+}
+
 .gl-border-none {
   border-style: none;
 }
@@ -3295,6 +3335,14 @@
   grid-column-start: 1 !important
 }
 
+.gl-grid-template-columns-2 {
+  grid-template-columns: 1fr 1fr
+}
+
+.gl-grid-template-columns-2\! {
+  grid-template-columns: 1fr 1fr !important
+}
+
 .gl-list-style-none {
   list-style-type: none
 }

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

@@ -3,6 +3,27 @@
 *
 * naming convention: gl-border-{position}-{style}
 */
+
+@mixin gl-border {
+  border: solid $gl-border-size-1 $border-color;
+}
+
+@mixin gl-border-t {
+  border-top: solid $gl-border-size-1 $border-color;
+}
+
+@mixin gl-border-b {
+  border-bottom: solid $gl-border-size-1 $border-color;
+}
+
+@mixin gl-border-l {
+  border-left: solid $gl-border-size-1 $border-color;
+}
+
+@mixin gl-border-r {
+  border-right: solid $gl-border-size-1 $border-color;
+}
+
 @mixin gl-border-none {
   border-style: none;
 }

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

@@ -10,3 +10,7 @@
 @mixin gl-grid-col-start-1 {
   grid-column-start: 1;
 }
+
+@mixin gl-grid-template-columns-2 {
+  grid-template-columns: 1fr 1fr;
+}

package/src/scss/variables.scss

@@ -391,6 +391,8 @@ $gl-fonts: (
   'regular': $gl-regular-font,
 );
 
+$border-color: $gray-100 !default;
+
 // use px for borders rather than rem
 // we don't want borders to scale with font size
 // 1px can end up being rounded to 0 after