@gitlab/ui 37.0.0 → 37.1.0

package/documentation/components_documentation.js

@@ -16,7 +16,6 @@ export { default as GlNavbarDocumentation } from '../src/components/base/navbar/
 export { default as GlIntersectionObserverDocumentation } from '../src/components/utilities/intersection_observer/intersection_observer.documentation';
 export { default as GlChartDocumentation } from '../src/components/charts/chart/chart.documentation';
 export { default as GlAreaChartDocumentation } from '../src/components/charts/area/area.documentation';
-export { default as GlChartLegendDocumentation } from '../src/components/charts/legend/legend.documentation';
 export { default as GlLineChartDocumentation } from '../src/components/charts/line/line.documentation';
 export { default as GlSparklineChartDocumentation } from '../src/components/charts/sparkline/sparkline.documentation';
 export { default as GlChartSeriesLabelDocumentation } from '../src/components/charts/series_label/series_label.documentation';
@@ -64,7 +63,6 @@ export { default as GlTableDocumentation } from '../src/components/base/table/ta
 export { default as GlBreadcrumbDocumentation } from '../src/components/base/breadcrumb/breadcrumb.documentation';
 export { default as GlHeatmapDocumentation } from '../src/components/charts/heatmap/heatmap.documentation';
 export { default as GlTabsDocumentation } from '../src/components/base/tabs/tabs/tabs.documentation';
-export { default as GlTabDocumentation } from '../src/components/base/tabs/tab/tab.documentation';
 export { default as GlButtonGroupDocumentation } from '../src/components/base/button_group/button_group.documentation';
 export { default as GlFormCheckboxDocumentation } from '../src/components/base/form/form_checkbox/form_checkbox.documentation';
 export { default as GlLabelDocumentation } from '../src/components/base/label/label.documentation';

package/documentation/documented_stories.js

@@ -102,6 +102,7 @@ export const setupStorybookReadme = () =>
         'GlFormInput',
         'GlSegmentedControl',
         'GlAvatar',
+        'GlChartLegend',
         'GlAvatarLink',
         'GlPagination',
         'GlSkeletonLoader',
@@ -117,6 +118,8 @@ export const setupStorybookReadme = () =>
         'GlKeysetPagination',
         'GlForm',
         'GlTable',
+        'GlTab',
+        'GlTabs',
         'GlToast',
         'GlPaginatedList',
         'GlIntersectionObserver',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "37.0.0",
+  "version": "37.1.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",

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

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

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

@@ -179,6 +179,7 @@ describe('pagination component', () => {
     it('shows 3rd page as active and enables all buttons', () => {
       const buttons = findButtons();
       expect(buttons.at(3).classes()).toEqual(expectClassActive);
+      expect(buttons.at(3).attributes('aria-current')).toEqual('page');
       buttons.wrappers.forEach((button) => {
         expect(button.element.tagName).not.toBe('SPAN');
       });
@@ -222,6 +223,7 @@ describe('pagination component', () => {
       const buttons = findButtons();
       expect(buttons.at(0).element.tagName).toBe('SPAN');
       expect(buttons.at(1).classes()).toEqual(expectClassActive);
+      expect(buttons.at(1).attributes('aria-current')).toEqual('page');
       expect(buttons.at(buttons.length - 1).element.tagName).not.toBe('SPAN');
     });
 
@@ -310,6 +312,7 @@ describe('pagination component', () => {
       const buttons = findButtons();
       expect(buttons.at(0).element.tagName).not.toBe('SPAN');
       expect(buttons.at(7).classes()).toEqual(expectClassActive);
+      expect(buttons.at(7).attributes('aria-current')).toEqual('page');
       expect(buttons.at(buttons.length - 1).element.tagName).toBe('SPAN');
     });
 

package/src/components/base/pagination/pagination.vue

@@ -293,6 +293,7 @@ export default {
       const listeners = {};
       if (isActivePage) {
         attrs.class.push('active');
+        attrs['aria-current'] = 'page';
       }
       // Disable previous and/or next buttons if needed
       if (this.isLinkBased) {

package/src/components/base/path/__snapshots__/path.spec.js.snap

@@ -155,7 +155,9 @@ exports[`Path matches the snapshot 1`] = `
       id="path-1-item-7"
     >
       <button
+        category="tertiary"
         class="gl-path-button"
+        disabled="disabled"
       >
         <!---->
         
@@ -383,7 +385,9 @@ exports[`Path renders the list of items with icons matches the snapshot 1`] = `
       id="path-15-item-7"
     >
       <button
+        category="tertiary"
         class="gl-path-button"
+        disabled="disabled"
       >
         <!---->
         
@@ -606,7 +610,9 @@ exports[`Path renders the list of items with metrics matches the snapshot 1`] =
       id="path-11-item-7"
     >
       <button
+        category="tertiary"
         class="gl-path-button"
+        disabled="disabled"
       >
         <!---->
         

package/src/components/base/path/data.js

@@ -30,6 +30,7 @@ export const mockPathItems = [
   {
     title: 'Eighth',
     metric: '8d',
+    disabled: true,
   },
   {
     title: 'Ninth',

package/src/components/base/path/path.scss

@@ -78,7 +78,12 @@ $path-chevron-right-margin: px-to-rem(14px);
       @include gl-path-chevron;
     }
 
-    &:hover {
+    &[disabled] {
+      @include gl-text-gray-400;
+      @include gl-cursor-not-allowed;
+    }
+
+    &:not([disabled]):hover {
       @include gl-path-active-item-color($gray-100);
       @include gl-text-gray-900;
     }

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

@@ -188,6 +188,14 @@ describe('Path', () => {
         ]);
       });
     });
+
+    describe('when a disabled item is clicked', () => {
+      it('does not emit the selected event', () => {
+        clickItemAt(7);
+
+        expect(wrapper.emitted('selected')).toBeUndefined();
+      });
+    });
   });
 
   describe('slots', () => {

package/src/components/base/path/path.vue

@@ -21,9 +21,10 @@ export default {
      * A list of path items in the form:
      * ```
      * {
-     *   title:  String, required
-     *   metric: Any, optional
-     *   icon:   String, optional
+     *   title:    String, required
+     *   metric:   Any, optional
+     *   icon:     String, optional
+     *   disabled: Boolean, optional
      * }
      * ```
      */
@@ -164,7 +165,12 @@ export default {
         :key="index"
         class="gl-path-nav-list-item"
       >
-        <button :class="pathItemClass(index)" @click="onItemClicked(index)">
+        <button
+          :class="pathItemClass(index)"
+          :category="item.disabled ? 'tertiary' : undefined"
+          :disabled="item.disabled"
+          @click="onItemClicked(index)"
+        >
           <gl-icon
             v-if="shouldDisplayIcon(item.icon)"
             :name="item.icon"

package/src/components/base/tabs/tab/tab.vue

@@ -15,6 +15,9 @@ export default {
       required: false,
       default: '',
     },
+    /**
+     * Query string parameter value to use when `gl-tabs` `sync-active-tab-with-query-params` prop is set to `true`.
+     */
     queryParamValue: {
       type: String,
       required: false,
@@ -36,6 +39,7 @@ export default {
   },
 };
 </script>
+
 <template>
   <b-tab
     :title-link-class="linkClass"

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

@@ -1,18 +1,6 @@
-import examples from './examples';
 import description from './tabs.md';
 
 export default {
   description,
-  examples,
-  bootstrapComponent: 'b-tabs',
   followsDesignSystem: true,
-  propsInfo: {
-    syncActiveTabWithQueryParams: {
-      additionalInfo:
-        'Sync active tab with query string parameters. Allows for deep linking into specific tabs.',
-    },
-    queryParamName: {
-      additionalInfo: 'Name to use for query string parameter.',
-    },
-  },
 };

package/src/components/base/tabs/tabs/tabs.md

@@ -1,15 +1,10 @@
-# Tabs
-
-<!-- STORY -->
-## Usage
-
 Tabs are used to divide content into meaningful, related sections. Tabs allow users to focus on one
 specific view at a time while maintaining sight of all the relevant content options available. Each
 tab, when active, will reveal it’s own unique content.
 
 ## Using the component Vue
 
-~~~js
+~~~html
 <gl-tabs>
   <gl-tab title="Tab 1">
     Tab panel 1
@@ -22,7 +17,7 @@ tab, when active, will reveal it’s own unique content.
 
 ## Using the component HTML
 
-~~~js
+~~~html
 <div class="tabs gl-tabs">
   <ul role="tablist" class="nav gl-tabs-nav">
     <li role="presentation" class="nav-item">

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

@@ -1,8 +1,36 @@
-import { withKnobs, boolean } from '@storybook/addon-knobs';
 import { range } from 'lodash';
-import { documentedStoriesOf } from '../../../../../documentation/documented_stories';
 import { GlTabs, GlTab, GlScrollableTabs } from '../../../../index';
-import docs from './tabs.md';
+import readme from './tabs.md';
+
+const components = {
+  GlTabs,
+  GlTab,
+};
+
+const defaultValue = (prop) => GlTabs.props[prop].default;
+
+const generateProps = ({
+  justified = defaultValue('justified'),
+  actionPrimary = null,
+  actionSecondary = null,
+  actionTertiary = null,
+} = {}) => ({
+  justified,
+  actionPrimary,
+  actionSecondary,
+  actionTertiary,
+});
+
+const wrap = (template) => `
+  <gl-tabs
+    :justified="justified"
+    :action-primary="actionPrimary"
+    :action-secondary="actionSecondary"
+    :action-tertiary="actionTertiary"
+  >
+    ${template}
+  </gl-tabs>
+`;
 
 const ScrollableTabsGenerator = {
   components: {
@@ -33,167 +61,199 @@ const ScrollableTabsGenerator = {
   `,
 };
 
-const createBaseStory = () => ({
-  components: {
-    GlTabs,
-    GlTab,
+export const Default = (_args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components,
+  template: wrap(`
+    <gl-tab title="Tab 1">
+      Tab panel 1
+    </gl-tab>
+    <gl-tab title="Tab 2">
+      Tab panel 2
+    </gl-tab>
+    <gl-tab title="Tab 3">
+      Tab panel 3
+    </gl-tab>
+    <gl-tab title="Tab 4">
+      Tab panel 4
+    </gl-tab>
+    <gl-tab title="Tab 5">
+      Tab panel 5
+    </gl-tab>
+    <gl-tab title="Tab 6">
+      Tab panel 6
+    </gl-tab>
+    <gl-tab title="Tab 7">
+      Tab panel 7
+    </gl-tab>
+    <gl-tab title="Tab 8">
+      Tab panel 8
+    </gl-tab>
+    <gl-tab title="Tab 9">
+      Tab panel 9
+    </gl-tab>
+    <gl-tab title="Tab 10">
+      Tab panel 10
+    </gl-tab>
+    <gl-tab title="Tab 11">
+      Tab panel 11
+    </gl-tab>
+    <gl-tab title="Tab 12">
+      Tab panel 12
+    </gl-tab>
+    <gl-tab title="Tab 13" query-param-value="thirteenth">
+      Tab panel 13
+    </gl-tab>
+    <gl-tab title="Tab 14">
+      Tab panel 14
+    </gl-tab>`),
+});
+Default.args = generateProps();
+
+export const ContentlessTab = (_args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components,
+  template: wrap(`
+    <gl-tab title="Regular tab">
+      <p>Regular tab content.</p>
+      <p>The contentless tab is not selectable, as it has no content. This is useful for displaying things that aren't really tabs after the list of tabs.</p>
+    </gl-tab>
+    <gl-tab title="Another tab">
+      <p>Another tab's content.</p>
+    </gl-tab>
+    <template #tabs-end>
+      <li class="gl-tab-nav-item">
+        Contentless tab
+      </li>
+    </template>`),
+});
+
+export const EmptyState = (_args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components,
+  template: wrap(`
+    <template #empty>
+      This content is only displayed when there are no tabs. Useful for dynamically added/removed tabs.
+    </template>`),
+});
+
+export const JustifiedTabs = (_args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components,
+  template: wrap(`
+    <gl-tab title="Tab 1">
+      <p>Tab panel 1</p>
+    </gl-tab>
+    <gl-tab title="Tab 2">
+      <p>Tab panel 2</p>
+    </gl-tab>`),
+});
+JustifiedTabs.args = generateProps({ justified: true });
+
+export const WithCounterBadges = (_args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components,
+  template: wrap(`
+    <gl-tab>
+      <template #title>
+        <span>Tab</span>
+        <gl-badge size="sm" class="gl-tab-counter-badge">500</gl-badge>
+        <span class="sr-only">items</span>
+      </template>
+      Tab panel 1
+    </gl-tab>
+    <gl-tab>
+      <template #title>
+        <span>Tab</span>
+        <gl-badge size="sm" class="gl-tab-counter-badge">250</gl-badge>
+        <span class="sr-only">items</span>
+      </template>
+      Tab panel 2
+    </gl-tab>
+    <gl-tab>
+      <template #title>
+        <span>Tab</span>
+      </template>
+      Tab panel 3
+    </gl-tab>`),
+});
+
+export const WithActions = (_args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components,
+  template: wrap(`
+    <gl-tab title="Tab 1">
+      Tab panel 1
+    </gl-tab>`),
+});
+WithActions.args = generateProps({
+  actionPrimary: {
+    attributes: {
+      variant: 'danger',
+    },
+    text: 'Primary action',
   },
-  props: {
-    syncActiveTabWithQueryParams: {
-      type: Boolean,
-      default: boolean('sync-active-tab-with-query-params', false),
+  actionSecondary: {
+    attributes: {
+      variant: 'success',
+    },
+    text: 'Secondary action',
+  },
+  actionTertiary: {
+    attributes: {
+      variant: 'default',
     },
+    text: 'Tertiary action',
   },
 });
 
-documentedStoriesOf('base/tabs/tabs', docs)
-  .addDecorator(withKnobs)
-  .add('default', () => ({
-    ...createBaseStory(),
-    template: `
-      <gl-tabs :sync-active-tab-with-query-params="syncActiveTabWithQueryParams">
-        <gl-tab title="Tab 1">
-          Tab panel 1
-        </gl-tab>
-        <gl-tab title="Tab 2">
-          Tab panel 2
-        </gl-tab>
-        <gl-tab title="Tab 3">
-          Tab panel 3
-        </gl-tab>
-        <gl-tab title="Tab 4">
-          Tab panel 4
-        </gl-tab>
-        <gl-tab title="Tab 5">
-          Tab panel 5
-        </gl-tab>
-        <gl-tab title="Tab 6">
-          Tab panel 6
-        </gl-tab>
-        <gl-tab title="Tab 7">
-          Tab panel 7
-        </gl-tab>
-        <gl-tab title="Tab 8">
-          Tab panel 8
-        </gl-tab>
-        <gl-tab title="Tab 9">
-          Tab panel 9
-        </gl-tab>
-        <gl-tab title="Tab 10">
-          Tab panel 10
-        </gl-tab>
-        <gl-tab title="Tab 11">
-          Tab panel 11
-        </gl-tab>
-        <gl-tab title="Tab 12">
-          Tab panel 12
-        </gl-tab>
-        <gl-tab title="Tab 13" query-param-value="thirteenth">
-          Tab panel 13
-        </gl-tab>
-        <gl-tab title="Tab 14">
-          Tab panel 14
-        </gl-tab>
-      </gl-tabs>
-    `,
-  }))
-  .add('contentless tab', () => ({
-    ...createBaseStory(),
-    template: `
-      <gl-tabs>
-        <gl-tab title="Regular tab">
-          <p>Regular tab content.</p>
-          <p>The contentless tab is not selectable, as it has no content. This is useful for displaying things that aren't really tabs after the list of tabs.</p>
-        </gl-tab>
-        <gl-tab title="Another tab">
-          <p>Another tab's content.</p>
-        </gl-tab>
-        <template #tabs-end>
-          <li class="gl-tab-nav-item">
-            Contentless tab
-          </li>
-        </template>
-      </gl-tabs>
-    `,
-  }))
-  .add('empty state', () => ({
-    ...createBaseStory(),
-    template: `
-      <gl-tabs>
-        <template #empty>
-          This content is only displayed when there are no tabs. Useful for dynamically added/removed tabs.
-        </template>
-      </gl-tabs>
-    `,
-  }))
-  .add('justified tabs', () => ({
-    ...createBaseStory(),
-    template: `
-      <gl-tabs justified>
-        <gl-tab title="Tab 1">
-          <p>Tab panel 1</p>
-        </gl-tab>
-        <gl-tab title="Tab 2">
-          <p>Tab panel 2</p>
-        </gl-tab>
-      </gl-tabs>
-    `,
-  }))
-  .add('with counter badges', () => ({
-    ...createBaseStory(),
-    template: `
-      <gl-tabs>
-        <gl-tab>
-          <template #title>
-            <span>Tab</span>
-            <gl-badge size="sm" class="gl-tab-counter-badge">500</gl-badge>
-            <span class="sr-only">items</span>
-          </template>
-          Tab panel 1
-        </gl-tab>
-        <gl-tab>
-          <template #title>
-            <span>Tab</span>
-            <gl-badge size="sm" class="gl-tab-counter-badge">250</gl-badge>
-            <span class="sr-only">items</span>
-          </template>
-          Tab panel 2
-        </gl-tab>
-        <gl-tab>
-          <template #title>
-            <span>Tab</span>
-          </template>
-          Tab panel 3
-        </gl-tab>
-      </gl-tabs>
-    `,
-  }))
-  .add('with scroll', () => ({
-    ...createBaseStory(),
-    components: {
-      ScrollableTabsGenerator,
-    },
-    template: '<scrollable-tabs-generator :count="50" />',
-  }))
-  .add(
-    'with scroll and growing',
-    () => ({
-      ...createBaseStory(),
-      components: {
-        ScrollableTabsGenerator,
-      },
-      data() {
-        return {
-          count: 2,
-          intervalId: 0,
-        };
-      },
-      mounted() {
-        this.intervalId = setInterval(() => {
-          this.count += 1;
-        }, 2000);
+export const WithScroll = (_args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: {
+    ScrollableTabsGenerator,
+  },
+  template: '<scrollable-tabs-generator :count="50" />',
+});
+
+export const WithScrollAndGrowing = (_args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: {
+    ScrollableTabsGenerator,
+  },
+  data() {
+    return {
+      count: 2,
+      intervalId: 0,
+    };
+  },
+  mounted() {
+    this.intervalId = setInterval(() => {
+      this.count += 1;
+    }, 2000);
+  },
+  template: '<scrollable-tabs-generator :count="count" />',
+});
+WithScrollAndGrowing.parameters = {
+  storyshots: { disable: true },
+};
+
+export default {
+  title: 'base/tabs/tabs',
+  component: GlTabs,
+  subcomponents: { GlTab, GlScrollableTabs },
+  parameters: {
+    bootstrapComponent: 'b-tabs',
+    docs: {
+      description: {
+        component: readme,
       },
-      template: '<scrollable-tabs-generator :count="count" />',
-    }),
-    { storyshots: false }
-  );
+    },
+  },
+  argTypes: {
+    contentClass: { control: { disable: true } },
+    navClass: { control: { disable: true } },
+    syncActiveTabWithQueryParams: { control: { disable: true } },
+    queryParamName: { control: { disable: true } },
+    value: { control: { disable: true } },
+  },
+};

package/src/components/base/tabs/tabs/tabs.vue

@@ -46,11 +46,17 @@ export default {
       required: false,
       default: false,
     },
+    /**
+     * Sync active tab with query string parameters. Allows for deep linking into specific tabs.
+     */
     syncActiveTabWithQueryParams: {
       type: Boolean,
       required: false,
       default: false,
     },
+    /**
+     * Name to use for query string parameter.
+     */
     queryParamName: {
       type: String,
       required: false,