@gitlab/ui 32.17.0 → 32.20.0

package/src/components/base/form/form_checkbox/form_checkbox.stories.js

@@ -1,5 +1,3 @@
-import { withKnobs, object } from '@storybook/addon-knobs';
-import { documentedStoriesOf } from '../../../../../documentation/documented_stories';
 import { GlFormCheckbox, GlFormCheckboxGroup } from '../../../../../index';
 import readme from './form_checkbox.md';
 
@@ -8,43 +6,37 @@ const components = {
   GlFormCheckboxGroup,
 };
 
-const groupComponent = () => ({
-  components,
-  props: {
-    // Note: options allows an html property, but withKnobs escapes html characters so it won't work
-    // More info here: https://github.com/storybookjs/storybook/tree/v4.0.0-alpha.8/addons/knobs#withknobs-vs-withknobsoptions
-    options: {
-      default: object('Options', [
-        'String option',
-        { text: 'Disabled object option', value: 'disabled value', disabled: true },
-        {
-          text: 'Enabled object option',
-          value: 'html value',
-        },
-      ]),
-    },
-  },
-  template: `
-      <gl-form-checkbox-group :options="options">
-        <template #first>
-          <gl-form-checkbox value="Slot option">
-            Slot option with help text
-            <template #help>
-              Help text
-            </template>
-          </gl-form-checkbox>
+const template = `
+  <gl-form-checkbox-group>
+    <template #first>
+      <gl-form-checkbox value="Slot option">
+        Slot option with help text
+        <template #help>
+          Help text
         </template>
-        <gl-form-checkbox value="Last option">Last option</gl-form-checkbox>
-      </gl-form-checkbox-group>
-    `,
+      </gl-form-checkbox>
+    </template>
+    <gl-form-checkbox value="Last option">Last option</gl-form-checkbox>
+  </gl-form-checkbox-group>
+`;
+
+const Template = () => ({
+  components,
+  template,
 });
 
-documentedStoriesOf('base/form/form-checkbox', readme)
-  .addDecorator(withKnobs)
-  .add('default', () => ({
-    components,
-    template: `
-      <gl-form-checkbox>Checkbox</gl-form-checkbox>
-    `,
-  }))
-  .add('group', () => groupComponent());
+export const Default = Template.bind({});
+
+export default {
+  title: 'base/form/form checkbox',
+  component: GlFormCheckbox,
+  parameters: {
+    knobs: { disable: true },
+    bootstrapComponent: 'b-form-checkbox',
+    docs: {
+      description: {
+        component: readme,
+      },
+    },
+  },
+};

package/src/components/base/form/form_checkbox/form_checkbox.vue

@@ -11,18 +11,33 @@ export default {
     prop: 'checked',
     event: 'input',
   },
+  methods: {
+    change($event) {
+      /**
+       * Emitted when selected value(s) is changed due to user interaction.
+       *
+       * @event change
+       */
+      this.$emit('change', $event);
+    },
+    input($event) {
+      /**
+       * Emitted when checked state is changed.
+       *
+       * @event input
+       */
+      this.$emit('input', $event);
+    },
+  },
 };
 </script>
 
 <template>
-  <b-form-checkbox
-    v-bind="$attrs"
-    class="gl-form-checkbox"
-    @change="$emit('change', $event)"
-    @input="$emit('input', $event)"
-  >
+  <b-form-checkbox v-bind="$attrs" class="gl-form-checkbox" @change="change" @input="input">
+    <!-- @slot The checkbox content to display. -->
     <slot></slot>
     <p v-if="Boolean($scopedSlots.help)" class="help-text">
+      <!-- @slot The help text to display. -->
       <slot name="help"></slot>
     </p>
   </b-form-checkbox>

package/src/components/base/form/form_checkbox/form_checkbox_group.vue

@@ -1,7 +1,7 @@
 <script>
 import { BFormCheckboxGroup } from 'bootstrap-vue';
 import formOptionsMixin from 'bootstrap-vue/src/mixins/form-options';
-import SafeHtml from '../../../../directives/safe_html/safe_html';
+import { SafeHtmlDirective as SafeHtml } from '../../../../directives/safe_html/safe_html';
 import GlFormCheckbox from './form_checkbox.vue';
 
 export default {

package/src/components/base/form/form_input_group/form_input_group.vue

@@ -2,7 +2,7 @@
 import { BInputGroup, BInputGroupPrepend, BInputGroupAppend, BFormInput } from 'bootstrap-vue';
 import GlDropdown from '../../dropdown/dropdown.vue';
 import GlDropdownItem from '../../dropdown/dropdown_item.vue';
-import InputGroupMixin from './form_input_group_mixin';
+import { InputGroupMixin } from './form_input_group_mixin';
 
 export default {
   name: 'GlFormInputGroup',

package/src/components/base/form/form_input_group/form_input_group_mixin.js

@@ -1,4 +1,4 @@
-export default {
+export const InputGroupMixin = {
   props: {
     value: {
       type: [String, Number],

package/src/components/base/form/form_radio_group/form_radio_group.vue

@@ -1,7 +1,7 @@
 <script>
 import { BFormRadioGroup } from 'bootstrap-vue';
 import formOptionsMixin from 'bootstrap-vue/src/mixins/form-options';
-import SafeHtml from '../../../../directives/safe_html/safe_html';
+import { SafeHtmlDirective as SafeHtml } from '../../../../directives/safe_html/safe_html';
 import GlFormRadio from '../form_radio/form_radio.vue';
 
 const { model } = BFormRadioGroup.options;

package/src/components/base/tabs/tabs/examples/tabs.basic.example.vue

@@ -1,6 +1,6 @@
 <template>
   <gl-tabs>
-    <gl-tab title="First">first content</gl-tab>
-    <gl-tab title="Second">second content</gl-tab>
+    <gl-tab title="Tab 1">Tab panel 1</gl-tab>
+    <gl-tab title="Tab 2">Tab panel 2</gl-tab>
   </gl-tabs>
 </template>

package/src/components/base/tabs/tabs/examples/tabs.counterbadges.example.vue

@@ -2,24 +2,27 @@
   <gl-tabs>
     <gl-tab>
       <template #title>
-        <span>1st</span>
+        <span>Tab</span>
         <gl-badge size="sm" class="gl-tab-counter-badge">500</gl-badge>
+        <span class="sr-only">items</span>
       </template>
-      first content
+      Tab panel 1
     </gl-tab>
     <gl-tab>
       <template #title>
-        <span>2nd</span>
+        <span>Tab</span>
         <gl-badge size="sm" class="gl-tab-counter-badge">250</gl-badge>
+        <span class="sr-only">items</span>
       </template>
-      second content
+      Tab panel 2
     </gl-tab>
     <gl-tab>
       <template #title>
-        <span>3rd</span>
+        <span>Tab</span>
         <gl-badge size="sm" class="gl-tab-counter-badge">250</gl-badge>
+        <span class="sr-only">items</span>
       </template>
-      third content
+      Tab panel 3
     </gl-tab>
   </gl-tabs>
 </template>

package/src/components/base/tabs/tabs/examples/tabs.custom_title.example.vue

@@ -1,9 +1,9 @@
 <template>
   <gl-tabs>
-    <gl-tab title="First">
+    <gl-tab title="Tab 1">
       <template #title><i>custom</i> <strong>Title</strong></template>
-      first content
+      Tab panel 1
     </gl-tab>
-    <gl-tab title="Second">second content</gl-tab>
+    <gl-tab title="Tab 2">Tab panel 2</gl-tab>
   </gl-tabs>
 </template>

package/src/components/base/tabs/tabs/examples/tabs.disabled.example.vue

@@ -1,7 +1,7 @@
 <template>
   <gl-tabs>
-    <gl-tab title="First">first content</gl-tab>
-    <gl-tab title="Second">second content</gl-tab>
-    <gl-tab title="Disabled" disabled>disabled</gl-tab>
+    <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" disabled>Disabled tab panel</gl-tab>
   </gl-tabs>
 </template>

package/src/components/base/tabs/tabs/examples/tabs.justified.example.vue

@@ -1,6 +1,6 @@
 <template>
   <gl-tabs justified>
-    <gl-tab title="First tab">First content</gl-tab>
-    <gl-tab title="Second tab">Second content</gl-tab>
+    <gl-tab title="Tab 1">Tab panel 1</gl-tab>
+    <gl-tab title="Tab 2">Tab panel 2</gl-tab>
   </gl-tabs>
 </template>

package/src/components/base/tabs/tabs/examples/tabs.scrollable.example.vue

@@ -5,8 +5,8 @@ export default {
     .map((_, index) => index + 1)
     .map((id) => ({
       id,
-      title: `Lorem ${id}`,
-      content: `(${id}) Lorem ipsum dolar sit amit...`,
+      title: `Tab ${id}`,
+      content: `Tab panel ${id} content...`,
     })),
 };
 </script>

package/src/components/base/tabs/tabs/examples/tabs.styles_only.example.vue

@@ -7,16 +7,16 @@
           target="_self"
           href="#"
           class="nav-link gl-tab-nav-item gl-tab-nav-item-active gl-tab-nav-item-active-indigo"
-          >First</a
+          >Tab 1</a
         >
       </li>
       <li role="presentation" class="nav-item">
-        <a role="tab" target="_self" href="#" class="nav-link gl-tab-nav-item">Second</a>
+        <a role="tab" target="_self" href="#" class="nav-link gl-tab-nav-item">Tab 2</a>
       </li>
     </ul>
     <div class="tab-content gl-tab-content">
-      <div role="tabpanel" class="tab-pane active">first content</div>
-      <div role="tabpanel" class="tab-pane">second content</div>
+      <div role="tabpanel" class="tab-pane active">Tab panel 1</div>
+      <div role="tabpanel" class="tab-pane">Tab panel 2</div>
     </div>
   </div>
 </template>

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

@@ -11,11 +11,11 @@ tab, when active, will reveal it’s own unique content.
 
 ~~~js
 <gl-tabs theme="indigo">
-  <gl-tab title="First">
-    first content
+  <gl-tab title="Tab 1">
+    Tab panel 1
   </gl-tab>
-  <gl-tab title="Second">
-    second content
+  <gl-tab title="Tab 2">
+    Tab panel 2
   </gl-tab>
 </gl-tabs>
 ~~~
@@ -31,15 +31,15 @@ tab, when active, will reveal it’s own unique content.
         target="_self"
         href="#"
         class="nav-link gl-tab-nav-item gl-tab-nav-item-active gl-tab-nav-item-active-indigo"
-      >First</a>
+      >Tab 1</a>
     </li>
     <li role="presentation" class="nav-item">
-      <a role="tab" target="_self" href="#" class="nav-link gl-tab-nav-item">Second</a>
+      <a role="tab" target="_self" href="#" class="nav-link gl-tab-nav-item">Tab 2</a>
     </li>
   </ul>
   <div class="tab-content gl-tab-content">
-    <div role="tabpanel" class="tab-pane gl-tab-content active">first content</div>
-    <div role="tabpanel" class="tab-pane gl-tab-content">second content</div>
+    <div role="tabpanel" class="tab-pane gl-tab-content active">Tab panel 1</div>
+    <div role="tabpanel" class="tab-pane gl-tab-content">Tab panel 2</div>
   </div>
 </div>
 ~~~

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

@@ -19,8 +19,8 @@ const ScrollableTabsGenerator = {
   computed: {
     tabs() {
       return range(this.count).map((i) => ({
-        title: `Lorem ${i + 1}`,
-        content: `(${i + 1}) Lorem ipsum dolar sit amit...`,
+        title: `Tab ${i + 1}`,
+        content: `Tab panel ${i + 1} content...`,
       }));
     },
   },
@@ -56,47 +56,47 @@ documentedStoriesOf('base/tabs/tabs', docs)
     ...createBaseStory(),
     template: `
       <gl-tabs :theme="theme" :sync-active-tab-with-query-params="syncActiveTabWithQueryParams">
-        <gl-tab title="First">
-          first tab content
+        <gl-tab title="Tab 1">
+          Tab panel 1
         </gl-tab>
-        <gl-tab title="Second">
-          second tab content
+        <gl-tab title="Tab 2">
+          Tab panel 2
         </gl-tab>
-        <gl-tab title="Third">
-          third tab content
+        <gl-tab title="Tab 3">
+          Tab panel 3
         </gl-tab>
-        <gl-tab title="Fourth">
-          fourth tab content
+        <gl-tab title="Tab 4">
+          Tab panel 4
         </gl-tab>
-        <gl-tab title="Fifth">
-          fifth tab content
+        <gl-tab title="Tab 5">
+          Tab panel 5
         </gl-tab>
-        <gl-tab title="Sixth">
-          sixth tab content
+        <gl-tab title="Tab 6">
+          Tab panel 6
         </gl-tab>
-        <gl-tab title="Seventh">
-          seventh tab content
+        <gl-tab title="Tab 7">
+          Tab panel 7
         </gl-tab>
-        <gl-tab title="Eighth">
-          eighth tab content
+        <gl-tab title="Tab 8">
+          Tab panel 8
         </gl-tab>
-        <gl-tab title="Ninth">
-          ninth tab content
+        <gl-tab title="Tab 9">
+          Tab panel 9
         </gl-tab>
-        <gl-tab title="Tenth">
-          tenth tab content
+        <gl-tab title="Tab 10">
+          Tab panel 10
         </gl-tab>
-        <gl-tab title="Eleventh">
-          eleventh tab content
+        <gl-tab title="Tab 11">
+          Tab panel 11
         </gl-tab>
-        <gl-tab title="Twelfth">
-          twelfth tab content
+        <gl-tab title="Tab 12">
+          Tab panel 12
         </gl-tab>
-        <gl-tab title="Thirteenth" query-param-value="thirteenth">
-          thirteenth tab content
+        <gl-tab title="Tab 13" query-param-value="thirteenth">
+          Tab panel 13
         </gl-tab>
-        <gl-tab title="Fourteenth">
-          fourteenth tab content
+        <gl-tab title="Tab 14">
+          Tab panel 14
         </gl-tab>
       </gl-tabs>
     `,
@@ -134,11 +134,11 @@ documentedStoriesOf('base/tabs/tabs', docs)
     ...createBaseStory(),
     template: `
       <gl-tabs :theme="theme" justified>
-        <gl-tab title="First tab">
-          <p>First content</p>
+        <gl-tab title="Tab 1">
+          <p>Tab panel 1</p>
         </gl-tab>
-        <gl-tab title="Second tab">
-          <p>Second content</p>
+        <gl-tab title="Tab 2">
+          <p>Tab panel 2</p>
         </gl-tab>
       </gl-tabs>
     `,
@@ -149,23 +149,25 @@ documentedStoriesOf('base/tabs/tabs', docs)
       <gl-tabs>
         <gl-tab>
           <template #title>
-            <span>1st</span>
+            <span>Tab</span>
             <gl-badge size="sm" class="gl-tab-counter-badge">500</gl-badge>
+            <span class="sr-only">items</span>
           </template>
-          first content
+          Tab panel 1
         </gl-tab>
         <gl-tab>
           <template #title>
-            <span>2nd</span>
+            <span>Tab</span>
             <gl-badge size="sm" class="gl-tab-counter-badge">250</gl-badge>
+            <span class="sr-only">items</span>
           </template>
-          second content
+          Tab panel 2
         </gl-tab>
         <gl-tab>
           <template #title>
-            <span>3rd</span>
+            <span>Tab</span>
           </template>
-          third content
+          Tab panel 3
         </gl-tab>
       </gl-tabs>
     `,

package/src/components/mixins/button_mixin.js

@@ -1,9 +1,9 @@
-import { newButtonSizeOptionsMap } from '../../utils/constants';
+import { buttonSizeOptionsMap } from '../../utils/constants';
 
-export default {
+export const ButtonMixin = {
   computed: {
     buttonSize() {
-      return newButtonSizeOptionsMap[this.size];
+      return buttonSizeOptionsMap[this.size];
     },
   },
 };

package/src/directives/safe_html/safe_html.js

@@ -17,9 +17,7 @@ const transform = (el, binding) => {
   }
 };
 
-const SafeHtmlDirective = {
+export const SafeHtmlDirective = {
   bind: transform,
   update: transform,
 };
-
-export default SafeHtmlDirective;

package/src/directives/safe_html/safe_html.spec.js

@@ -1,6 +1,6 @@
 import { shallowMount } from '@vue/test-utils';
 import { forbiddenDataAttrs } from './constants';
-import safeHtml from './safe_html';
+import { SafeHtmlDirective as safeHtml } from './safe_html';
 
 describe('safe html directive', () => {
   let wrapper;

package/src/scss/utilities.scss

@@ -4163,6 +4163,14 @@
   min-width: $gl-spacing-scale-10 !important;
 }
 
+.gl-min-w-20 {
+  min-width: $gl-spacing-scale-20;
+}
+
+.gl-min-w-20\! {
+  min-width: $gl-spacing-scale-20 !important;
+}
+
 .gl-min-w-full {
   min-width: 100%;
 }

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

@@ -233,6 +233,10 @@
   min-width: $gl-spacing-scale-10;
 }
 
+@mixin gl-min-w-20 {
+  min-width: $gl-spacing-scale-20;
+}
+
 @mixin gl-min-w-full {
   min-width: 100%;
 }

package/src/utils/charts/mock_data.js

@@ -254,5 +254,3 @@ export const mockSecondaryTrendlineData = [
     ],
   },
 ];
-
-export default {};

package/src/utils/constants.js

@@ -85,13 +85,13 @@ export const formStateOptions = {
   invalid: false,
 };
 
-export const newButtonCategoryOptions = {
+export const buttonCategoryOptions = {
   primary: 'primary',
   secondary: 'secondary',
   tertiary: 'tertiary',
 };
 
-export const newButtonVariantOptions = {
+export const buttonVariantOptions = {
   default: 'default',
   confirm: 'confirm',
   info: 'info (deprecated)',
@@ -110,9 +110,9 @@ export const newButtonVariantOptions = {
 };
 
 export const badgeForButtonOptions = {
-  [newButtonVariantOptions.default]: badgeVariantOptions.neutral,
-  [newButtonVariantOptions.confirm]: badgeVariantOptions.info,
-  [newButtonVariantOptions.danger]: badgeVariantOptions.danger,
+  [buttonVariantOptions.default]: badgeVariantOptions.neutral,
+  [buttonVariantOptions.confirm]: badgeVariantOptions.info,
+  [buttonVariantOptions.danger]: badgeVariantOptions.danger,
 };
 
 export const newDropdownVariantOptions = {
@@ -125,12 +125,12 @@ export const newDropdownVariantOptions = {
   link: 'link',
 };
 
-export const newButtonSizeOptions = {
+export const buttonSizeOptions = {
   small: 'small',
   medium: 'medium',
 };
 
-export const newButtonSizeOptionsMap = {
+export const buttonSizeOptionsMap = {
   small: 'sm',
   medium: 'md',
 };

package/src/utils/use_fake_date.js

@@ -6,13 +6,13 @@ import MockDate from 'mockdate';
  *
  * Usage:
  *
- * import useFakeDate from '../../../../tests/utils/use_fake_date';
+ * import { useFakeDate } from '../../../../tests/utils/use_fake_date';
  * documentedStoriesOf('some|story')
  * .add('default', () => ({
  *   mixins: [useFakeDate()],
  * })
  */
-export default () => {
+export const useFakeDate = () => {
   if (process.env.IS_VISUAL_TEST) {
     return {
       created() {

package/src/utils/validation_utils.js

@@ -7,5 +7,3 @@ export const getValidationInfoText = (validation = {}) => {
       return '';
   }
 };
-
-export default {};

package/dist/components/base/accordion/accordion.documentation.js

@@ -1,20 +0,0 @@
-import examples from './examples';
-
-var description = "# GlAccordion\n\n<!-- STORY -->\n\nAccordions are used to group similar content and hide or show it depending on user needs or\npreferences. Accordions give users more granular control over the interface and help digest content\nin stages, rather than all at once.\n";
-
-var accordion_documentation = {
-  followsDesignSystem: true,
-  description,
-  examples,
-  bootstrapComponent: 'b-collapse',
-  propsInfo: {
-    autoCollapse: {
-      additionalInfo: 'When true, will have the effect of closing other accordion items when one accordion item is visible.'
-    },
-    headerLevel: {
-      additionalInfo: 'The header tag used in the accordion (h1/h2/h3/h4/h5/h6). This overrides the value provided by GlAccordion. For accessibility this should be set to an appropriate value in the context where the accordion is used.'
-    }
-  }
-};
-
-export default accordion_documentation;

package/dist/components/base/accordion/accordion_item.documentation.js

@@ -1,22 +0,0 @@
-import examples from './examples';
-
-var description = "# GlAccordionItem\n\n<!-- STORY -->\n\n## Usage\n\nUse `GlAccordionItem` to place the accordion item within your accordion.\n";
-
-var accordion_item_documentation = {
-  description,
-  examples,
-  bootstrapComponent: 'b-collapse',
-  propsInfo: {
-    title: {
-      additionalInfo: 'Used to set the title of accordion link.'
-    },
-    visible: {
-      additionalInfo: 'When set, it will ensure the accordion item is initially visible.'
-    },
-    headerLevel: {
-      additionalInfo: 'The header tag used in the accordion (h1/h2/h3/h4/h5/h6). This overrides the value provided by GlAccordion. For accessibility this should be set to an appropriate value in the context where the accordion is used.'
-    }
-  }
-};
-
-export default accordion_item_documentation;