@gitlab/ui 36.2.0 → 36.5.1

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.2.0",
+  "version": "36.5.1",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -84,7 +84,7 @@
     "@babel/preset-env": "^7.10.2",
     "@gitlab/eslint-plugin": "10.0.2",
     "@gitlab/stylelint-config": "4.0.0",
-    "@gitlab/svgs": "2.2.0",
+    "@gitlab/svgs": "2.5.0",
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@rollup/plugin-replace": "^2.3.2",

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

@@ -3295,6 +3295,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
 }
@@ -6400,6 +6408,18 @@
   padding-left: $gl-spacing-scale-7 !important;
   }
 }
+.gl-md-px-7 {
+  @include gl-media-breakpoint-up(md) {
+  padding-left: $gl-spacing-scale-7;
+  padding-right: $gl-spacing-scale-7;
+  }
+}
+.gl-md-px-7\! {
+  @include gl-media-breakpoint-up(md) {
+  padding-left: $gl-spacing-scale-7 !important;
+  padding-right: $gl-spacing-scale-7 !important;
+  }
+}
 .gl-lg-pt-0 {
   @include gl-media-breakpoint-up(lg) {
   padding-top: 0;

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/utility-mixins/spacing.scss

@@ -1209,6 +1209,12 @@
   }
 }
 
+@mixin gl-md-px-7 {
+  @include gl-media-breakpoint-up(md) {
+    @include gl-px-7;
+  }
+}
+
 @mixin gl-lg-pt-0 {
   @include gl-media-breakpoint-up(lg) {
     @include gl-pt-0;

package/dist/components/base/drawer/examples/drawer.basic.example.js

@@ -1,58 +0,0 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-var script = {
-  data() {
-    return {
-      drawerOpened: false
-    };
-  },
-
-  methods: {
-    toggle() {
-      this.drawerOpened = !this.drawerOpened;
-    },
-
-    close() {
-      this.drawerOpened = false;
-    }
-
-  }
-};
-
-/* script */
-const __vue_script__ = script;
-
-/* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_c('gl-button',{on:{"click":_vm.toggle}},[_vm._v("Toggle drawer")]),_vm._v(" "),_c('gl-drawer',{attrs:{"open":_vm.drawerOpened},on:{"close":_vm.close},scopedSlots:_vm._u([{key:"header",fn:function(){return [_vm._v("Your Title")]},proxy:true}])},[_vm._v(" "),_c('div',[_c('p',[_vm._v("First Body Item")])])])],1)};
-var __vue_staticRenderFns__ = [];
-
-  /* style */
-  const __vue_inject_styles__ = undefined;
-  /* scoped */
-  const __vue_scope_id__ = undefined;
-  /* module identifier */
-  const __vue_module_identifier__ = undefined;
-  /* functional template */
-  const __vue_is_functional_template__ = false;
-  /* style inject */
-  
-  /* style inject SSR */
-  
-  /* style inject shadow dom */
-  
-
-  
-  const __vue_component__ = __vue_normalize__(
-    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
-    __vue_inject_styles__,
-    __vue_script__,
-    __vue_scope_id__,
-    __vue_is_functional_template__,
-    __vue_module_identifier__,
-    false,
-    undefined,
-    undefined,
-    undefined
-  );
-
-export default __vue_component__;

package/dist/components/base/drawer/examples/index.js

@@ -1,13 +0,0 @@
-import Drawer from './drawer.basic.example';
-
-var index = [{
-  name: 'Basic',
-  items: [{
-    id: 'drawer',
-    name: 'Default Drawer',
-    description: 'Drawer',
-    component: Drawer
-  }]
-}];
-
-export default index;

package/dist/components/charts/single_stat/examples/index.js

@@ -1,32 +0,0 @@
-import SingleStatBadgeExample from './single_stat.badge.example';
-import SingleStatHoverExample from './single_stat.hover.example';
-import SingleStatIconExample from './single_stat.meta_icon.example';
-import SingleStatSimpleExample from './single_stat.simple.example';
-import SingleStatTitleIconExample from './single_stat.title_icon.example';
-
-var index = [{
-  name: 'Basic',
-  items: [{
-    id: 'simple',
-    name: 'Simple',
-    component: SingleStatSimpleExample
-  }, {
-    id: 'metaIcon',
-    name: 'Meta Icon',
-    component: SingleStatIconExample
-  }, {
-    id: 'badge',
-    name: 'Badge',
-    component: SingleStatBadgeExample
-  }, {
-    id: 'titleIcon',
-    name: 'Title Icon',
-    component: SingleStatTitleIconExample
-  }, {
-    id: 'hover',
-    name: 'Hover',
-    component: SingleStatHoverExample
-  }]
-}];
-
-export default index;