@gitlab/ui 37.0.0 → 37.3.0

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

@@ -1,8 +1,34 @@
-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 generateProps = ({
+  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 +59,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',
+  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,

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

@@ -1,5 +1,4 @@
 import { GlChart, GlChartLegend } from '../../../charts';
-import { documentedStoriesOf } from '../../../../documentation/documented_stories';
 import { LEGEND_LAYOUT_TABLE } from '../../../utils/charts/constants';
 import { generateSeriesData } from '../../../utils/charts/story_config';
 import {
@@ -7,7 +6,6 @@ import {
   SERIES_NAME_LONG,
   SERIES_NAME_LONG_WITHOUT_SPACES,
 } from '../../../utils/stories_utils';
-import readme from './legend.md';
 
 const generateOptions = (seriesLength, seriesNameType) => {
   return {
@@ -89,16 +87,25 @@ const getStoryOptions = (seriesLength, seriesNameType, legendLayoutType) => {
   };
 };
 
-documentedStoriesOf('charts/chart-legend', readme)
-  .add('default', () => getStoryOptions(10, SERIES_NAME_SHORT))
-  .add('default with long series names', () => getStoryOptions(10, SERIES_NAME_LONG))
-  .add('default with long series names and no spaces', () =>
-    getStoryOptions(10, SERIES_NAME_LONG_WITHOUT_SPACES)
-  )
-  .add('with tabular layout', () => getStoryOptions(10, SERIES_NAME_SHORT, LEGEND_LAYOUT_TABLE))
-  .add('with tabular layout and long series names', () =>
-    getStoryOptions(10, SERIES_NAME_LONG, LEGEND_LAYOUT_TABLE)
-  )
-  .add('with tabular layout and long series names with no spaces', () =>
-    getStoryOptions(10, SERIES_NAME_LONG_WITHOUT_SPACES, LEGEND_LAYOUT_TABLE)
-  );
+export const Default = () => getStoryOptions(10, SERIES_NAME_SHORT);
+
+export const DefaultWithLongSeriesNames = () => getStoryOptions(10, SERIES_NAME_LONG);
+
+export const DefaultWithLongSeriesNamesAndNoSpaces = () =>
+  getStoryOptions(10, SERIES_NAME_LONG_WITHOUT_SPACES);
+
+export const WithTabularLayout = () => getStoryOptions(10, SERIES_NAME_SHORT, LEGEND_LAYOUT_TABLE);
+export const WithTabularLayoutAndLongSeriesNames = () =>
+  getStoryOptions(10, SERIES_NAME_LONG, LEGEND_LAYOUT_TABLE);
+
+export const WithTabularLayoutAndLongSeriesNamesWithNoSpaces = () =>
+  getStoryOptions(10, SERIES_NAME_LONG_WITHOUT_SPACES, LEGEND_LAYOUT_TABLE);
+
+export default {
+  title: 'charts/chart-legend',
+  component: GlChartLegend,
+  parameters: {
+    controls: { disable: true },
+    knobs: { disable: true },
+  },
+};

package/src/components/charts/legend/legend.vue

@@ -39,6 +39,9 @@ export default {
       required: false,
       default: () => ({}),
     },
+    /**
+     * Text for data average (overridden by prop if needed for internationalization)
+     */
     averageText: {
       type: String,
       required: false,
@@ -54,11 +57,17 @@ export default {
       required: false,
       default: LEGEND_MIN_TEXT,
     },
+    /**
+     * Text for max amount (overridden by prop if needed for internationalization)
+     */
     maxText: {
       type: String,
       required: false,
       default: LEGEND_MAX_TEXT,
     },
+    /**
+     * Sets the display layout
+     */
     layout: {
       type: String,
       required: false,

package/src/directives/safe_html/safe_html.md

@@ -1,9 +1,5 @@
-# Safe Html
-
 A Vue Directive to sanitize HTML to avoid any XSS vulnerabilities.
 
-<!-- STORY -->
-
 ## Usage
 
 This directive can be used to sanitize HTML code which may contain user input, to prevent cross-site

package/src/directives/safe_html/safe_html.stories.js

@@ -1,50 +1,59 @@
-import { withKnobs, text } from '@storybook/addon-knobs';
 import { sanitize } from 'dompurify';
-import { escape } from 'lodash';
-import { documentedStoriesOf } from '../../../documentation/documented_stories';
-import { GlSafeHtmlDirective } from '../../index';
+import { GlSafeHtmlDirective as GlSafeHtml } from '../../index';
 import readme from './safe_html.md';
 
-documentedStoriesOf('directives/safe-html-directive', readme)
-  .addDecorator(withKnobs)
-  .addParameters({ storyshots: false, knobs: { escapeHTML: false } })
-  .add('default', () => ({
-    directives: {
-      'gl-safe-html': GlSafeHtmlDirective,
-    },
-    props: {
-      unsafeHTML: {
-        type: String,
-        default: text('Unsafe HTML', '<a href="javascript:alert(document.domain)">Click me</a>'),
-      },
+const generateProps = ({
+  unsafeHTML = '<a href="javascript:alert(document.domain)">Click me</a>',
+} = {}) => ({
+  unsafeHTML,
+});
+
+export const Default = (_args, { argTypes }) => ({
+  directives: {
+    GlSafeHtml,
+  },
+  props: Object.keys(argTypes),
+  computed: {
+    sanitizedHtml() {
+      return sanitize(this.unsafeHTML);
     },
-    computed: {
-      sanitizedHtml() {
-        return sanitize(this.unsafeHTML);
+  },
+  template: `
+  <table class="gl-table">
+    <thead>
+      <tr>
+        <th>Directive</th>
+        <th>Output</th>
+        <th>Rendered</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td><strong>v-html</strong></td>
+        <td><code>{{ unsafeHTML }}</code></td>
+        <td>N/A for security reasons</td>
+      </tr>
+      <tr>
+        <td><strong>v-safe-html</strong></td>
+        <td><code>{{ sanitizedHtml }}</code></td>
+        <td v-gl-safe-html="unsafeHTML"></td>
+      </tr>
+    </tbody>
+  </table>
+  `,
+});
+Default.args = generateProps();
+
+export default {
+  title: 'directives/safe-html-directive',
+  component: GlSafeHtml,
+  parameters: {
+    storyshots: { disable: true },
+    knobs: { disable: true },
+    docs: {
+      description: {
+        component: readme,
       },
     },
-    escape,
-    template: `
-    <table class="gl-table">
-      <thead>
-        <tr>
-          <th>Directive</th>
-          <th>Output</th>
-          <th>Rendered</th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr>
-          <td><strong>v-html</strong></td>
-          <td><code v-html="$options.escape(unsafeHTML)"></code></td>
-          <td>N/A for security reasons</td>
-        </tr>
-        <tr>
-          <td><strong>v-safe-html</strong></td>
-          <td><code v-html="$options.escape(sanitizedHtml)"></code></td>
-          <td v-gl-safe-html="unsafeHTML"></td>
-        </tr>
-      </tbody>
-    </table>
-    `,
-  }));
+  },
+};

package/src/directives/safe_link/safe_link.documentation.js

@@ -3,5 +3,4 @@ import description from './safe_link.md';
 export default {
   followsDesignSystem: false,
   description,
-  examples: false,
 };

package/src/directives/safe_link/safe_link.md

@@ -1,9 +1,5 @@
-# Safe Link Directive
-
 A Vue directive to make the hyperlinks secure by default.
 
-<!-- STORY -->
-
 ## Security measures
 
 ### rel