@gitlab/ui 32.17.0 → 32.20.0

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

@@ -1,33 +1,6 @@
 import * as description from './card.md';
-import examples from './examples';
 
 export default {
   followsDesignSystem: true,
   description,
-  examples,
-  propsInfo: {
-    headerClass: {
-      additionalInfo: 'Additional CSS class(es) to be applied to the header',
-    },
-    bodyClass: {
-      additionalInfo: 'Additional CSS class(es) to be applied to the body',
-    },
-    footerClass: {
-      additionalInfo: 'Additional CSS class(es) to be applied to the footer',
-    },
-  },
-  slots: [
-    {
-      name: 'header',
-      description: "The card's header content",
-    },
-    {
-      name: 'default',
-      description: "The card's main content.",
-    },
-    {
-      name: 'footer',
-      description: "The card's footer content",
-    },
-  ],
 };

package/src/components/base/card/card.md

@@ -1,7 +1,3 @@
-# GlCard
-
-<!-- STORY -->
-
 Cards are a flexible component used to display content and actions in a variety of contexts.
 They are generally restricted to a single topic and it should be easy for users to scan relevant and
 actionable information. Content, such as images and text, should be positioned within them in a

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

@@ -1,25 +1,39 @@
-import { withKnobs } from '@storybook/addon-knobs';
-import { documentedStoriesOf } from '../../../../documentation/documented_stories';
 import readme from './card.md';
-
 import GlCard from './card.vue';
 
 const components = {
   GlCard,
 };
 
-documentedStoriesOf('base/card', readme)
-  .addDecorator(withKnobs)
-  .add('default card', () => ({
-    components,
-    template: `
-      <gl-card>
-        <template #header>
-          <h3 class="gl-my-0 gl-font-weight-bold gl-font-lg">This is a custom header</h3>
-        </template>
-        Hello World
-        <template #footer>
-          <span>This is a custom footer</span>
-        </template>
-      </gl-card>`,
-  }));
+const template = `
+<gl-card>
+  <template #header>
+    <h3 class="gl-my-0 gl-font-weight-bold gl-font-lg">This is a custom header</h3>
+  </template>
+  <template #default>
+    Hello World
+  </template>
+  <template #footer>
+    <span>This is a custom footer</span>
+  </template>
+</gl-card>`;
+
+const Template = () => ({
+  components,
+  template,
+});
+
+export const Default = Template.bind({});
+
+export default {
+  title: 'base/card',
+  component: GlCard,
+  parameters: {
+    knobs: { disable: true },
+    docs: {
+      description: {
+        component: readme,
+      },
+    },
+  },
+};

package/src/components/base/card/card.vue

@@ -1,16 +1,25 @@
 <script>
 export default {
   props: {
+    /**
+     * Additional CSS class(es) to be applied to the header.
+     */
     headerClass: {
       type: [String, Object, Array],
       required: false,
       default: '',
     },
+    /**
+     * Additional CSS class(es) to be applied to the body.
+     */
     bodyClass: {
       type: [String, Object, Array],
       required: false,
       default: '',
     },
+    /**
+     * Additional CSS class(es) to be applied to the footer.
+     */
     footerClass: {
       type: [String, Object, Array],
       required: false,
@@ -23,12 +32,15 @@ export default {
 <template>
   <div class="gl-card">
     <div v-if="this.$slots.header" class="gl-card-header" :class="headerClass">
+      <!-- @slot The card's header content. -->
       <slot name="header"></slot>
     </div>
     <div class="gl-card-body" :class="bodyClass">
+      <!-- @slot The card's main content. -->
       <slot></slot>
     </div>
     <div v-if="this.$slots.footer" class="gl-card-footer" :class="footerClass">
+      <!-- @slot The card's footer content. -->
       <slot name="footer"></slot>
     </div>
   </div>

package/src/components/base/datepicker/datepicker.scss

@@ -72,6 +72,15 @@ $gl-datepicker-width: $grid-size * 30;
     @include gl-bg-size-100p;
     @include gl-w-5;
     @include gl-h-5;
+
+    &:hover {
+      @include gl-rounded-small;
+      @include gl-bg-gray-50;
+    }
+
+    &.is-disabled {
+      @include gl-cursor-not-allowed;
+    }
   }
 
   .pika-next {

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

@@ -1,6 +1,6 @@
 import { withKnobs, date } from '@storybook/addon-knobs';
 import { documentedStoriesOf } from '../../../../documentation/documented_stories';
-import useFakeDate from '../../../utils/use_fake_date';
+import { useFakeDate } from '../../../utils/use_fake_date';
 import readme from './datepicker.md';
 import GlDatepicker from './datepicker.vue';
 

package/src/components/base/daterange_picker/daterange_picker.md

@@ -1,7 +1,3 @@
-# Daterange Picker
-
-<!-- STORY -->
-
 ## Usage
 
 Daterange picker allows users to choose a date range by manually typing the start/end date

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

@@ -1,107 +1,170 @@
-import { withKnobs, date, number, boolean, text } from '@storybook/addon-knobs';
-import { documentedStoriesOf } from '../../../../documentation/documented_stories';
 import readme from './daterange_picker.md';
 import GlDaterangePicker from './daterange_picker.vue';
 
-const currentYear = 2020;
+const currentYear = 2021;
+const defaultStartDateVal = new Date(currentYear, 9, 4);
+const defaultEndDateVal = new Date(currentYear, 9, 24);
+const defaultMinDateVal = new Date(currentYear, 9, 1);
+const defaultMaxDateVal = new Date(currentYear, 11, 30);
 
-const defaultStartDate = new Date(currentYear, 7, 27);
-const defaultEndDate = new Date(currentYear, 7, 28);
-const defaultMinDate = new Date(currentYear, 0, 1);
-const defaultMaxDate = new Date(currentYear, 11, 31);
+const defaultValue = (prop) => GlDaterangePicker.props[prop].default;
 
-const template = (slot = '') => `
-  <gl-daterange-picker
-    class="d-flex"
-    :default-min-date="defaultMinDate"
-    :default-max-date="defaultMaxDate"
-    :default-start-date="defaultStartDate"
-    :default-end-date="defaultEndDate"
-    :max-date-range="maxDateRange"
-    :same-day-selection="sameDaySelection"
-    :tooltip="tooltip"
-    v-model="value"
-  >${slot}</gl-daterange-picker>`;
+const generateProps = ({
+  fromLabel = defaultValue('fromLabel'),
+  toLabel = defaultValue('toLabel'),
+  defaultMinDate = defaultMinDateVal,
+  defaultMaxDate = defaultMaxDateVal,
+  defaultStartDate = defaultStartDateVal,
+  defaultEndDate = defaultEndDateVal,
+  maxDateRange = 0,
+  sameDaySelection = false,
+  tooltip = '',
+  startPickerClass = 'gl-text-blue-500',
+  endPickerClass = 'gl-text-red-500',
+  labelClass = 'gl-font-style-italic',
+  theme = defaultValue('theme'),
+} = {}) => ({
+  defaultMinDate: new Date(defaultMinDate),
+  defaultMaxDate: new Date(defaultMaxDate),
+  defaultStartDate: new Date(defaultStartDate),
+  defaultEndDate: new Date(defaultEndDate),
+  maxDateRange,
+  sameDaySelection,
+  tooltip,
+  fromLabel,
+  toLabel,
+  startPickerClass,
+  endPickerClass,
+  labelClass,
+  theme,
+});
 
-function dateTypeKnob(name, defaultValue) {
-  return new Date(date(name, defaultValue));
-}
-
-function generateProps(props = {}) {
-  return {
-    defaultMinDate: {
-      type: Date,
-      default: dateTypeKnob('defaultMinDate', defaultMinDate),
+const Template = (template, props) => ({
+  components: { GlDaterangePicker },
+  props: Object.keys(props),
+  data() {
+    return {
+      defaultMinDateVal: this.defaultMinDate,
+      defaultMaxDateVal: this.defaultMaxDate,
+      defaultStartDateVal: this.defaultStartDate,
+      defaultEndDateVal: this.defaultEndDate,
+    };
+  },
+  watch: {
+    defaultMinDate(val) {
+      this.defaultMinDateVal = new Date(val);
     },
-    defaultMaxDate: {
-      type: Date,
-      default: dateTypeKnob('defaultMaxDate', defaultMaxDate),
+    defaultMaxDate(val) {
+      this.defaultMaxDateVal = new Date(val);
     },
-    defaultStartDate: {
-      type: Date,
-      default: dateTypeKnob('startDate', defaultStartDate),
+  },
+  template,
+});
+
+const defaultTemplate = `
+        <gl-daterange-picker
+          class="gl-display-flex"
+          :default-min-date="defaultMinDateVal"
+          :default-max-date="defaultMaxDateVal"
+          :default-start-date="defaultStartDate"
+          :default-end-date="defaultEndDate"
+          :max-date-range="maxDateRange"
+          :same-day-selection="sameDaySelection"
+          :tooltip="tooltip"
+          :from-label="fromLabel"
+          :to-label="toLabel"
+          :start-picker-class="startPickerClass"
+          :end-picker-class="endPickerClass"
+          :label-class="labelClass"
+          :theme="theme"
+        /> `;
+export const Default = Template.bind({}, defaultTemplate);
+Default.args = generateProps();
+
+const withDatesSelectedAndTooltipTemplate = `<gl-daterange-picker
+                                                class="gl-display-flex"
+                                                :default-min-date="defaultMinDateVal"
+                                                :default-max-date="defaultMaxDateVal"
+                                                :default-start-date="defaultStartDate"
+                                                :default-end-date="defaultEndDate"
+                                                :max-date-range="maxDateRange"
+                                                :same-day-selection="sameDaySelection"
+                                                :tooltip="tooltip"
+                                                :from-label="fromLabel"
+                                                :to-label="toLabel"
+                                                :start-picker-class="startPickerClass"
+                                                :end-picker-class="endPickerClass"
+                                                :label-class="labelClass"
+                                                :theme="theme">
+                                                    <template #default="{ daysSelected }">
+                                                      <span v-if="daysSelected === 1">{{ daysSelected }} day selected</span>
+                                                      <span v-else-if="daysSelected > -1">{{ daysSelected }} days selected</span>
+                                                      <span v-else>No days selected</span>
+                                                    </template>
+                                              </gl-daterange-picker>`;
+export const WithDatesSelectedAndTooltip = Template.bind({}, withDatesSelectedAndTooltipTemplate);
+WithDatesSelectedAndTooltip.args = generateProps({
+  tooltip: 'Date range limited to 31 days',
+  maxDateRange: 31,
+});
+
+export default {
+  followsDesignSystem: true,
+  title: 'base/daterange-picker',
+  component: GlDaterangePicker,
+  parameters: {
+    knobs: { disable: true },
+    docs: {
+      description: {
+        component: readme,
+      },
     },
-    defaultEndDate: {
-      type: Date,
-      default: dateTypeKnob('endDate', defaultEndDate),
+  },
+  argTypes: {
+    i18n: {
+      control: {
+        disable: true,
+      },
     },
-    maxDateRange: {
-      type: Number,
-      default: number('maxDateRange', 0),
+    startPickerTarget: {
+      control: {
+        disable: true,
+      },
     },
-    sameDaySelection: {
-      type: Boolean,
-      default: boolean('sameDaySelection', false),
+    startPickerContainer: {
+      control: {
+        disable: true,
+      },
     },
-    tooltip: {
-      default: text('tooltip', ''),
+    endPickerTarget: {
+      control: {
+        disable: true,
+      },
     },
-    ...props,
-  };
-}
-
-documentedStoriesOf('base/daterange-picker', readme)
-  .addDecorator(withKnobs)
-  .add('default', () => ({
-    props: generateProps(),
-    components: {
-      GlDaterangePicker,
+    endPickerContainer: {
+      control: {
+        disable: true,
+      },
     },
-    data() {
-      return {
-        value: {
-          startDate: defaultStartDate,
-          endDate: defaultEndDate,
-        },
-      };
+    defaultMinDate: {
+      control: {
+        type: 'date',
+      },
     },
-    template: template(),
-  }))
-  .add('with days selected and tooltip', () => ({
-    props: generateProps({
-      maxDateRange: {
-        default: number('maxDateRange', 31),
+    defaultMaxDate: {
+      control: {
+        type: 'date',
       },
-      tooltip: {
-        default: text('tooltip', 'Date range limited to 31 days'),
+    },
+    defaultStartDate: {
+      control: {
+        disable: true,
       },
-    }),
-    components: {
-      GlDaterangePicker,
     },
-    data() {
-      return {
-        value: {
-          startDate: defaultStartDate,
-          endDate: defaultEndDate,
-        },
-      };
+    defaultEndDate: {
+      control: {
+        disable: true,
+      },
     },
-    template: template(`
-      <template #default="{ daysSelected }">
-        <span v-if="daysSelected === 1">{{ daysSelected }} day selected</span>
-        <span v-else-if="daysSelected > -1">{{ daysSelected }} days selected</span>
-        <span v-else>No days selected</span>
-      </template>
-    `),
-  }));
+  },
+};

package/src/components/base/daterange_picker/daterange_picker.vue

@@ -185,8 +185,45 @@ export default {
     onEndDateSelected(endDate) {
       this.openToCalendar = false;
       this.endDate = endDate;
+      /**
+       * Emitted when start or end date selected with {startDate, endDate} value
+       *
+       * @event input
+       * */
       this.$emit('input', { startDate: this.startDate, endDate });
     },
+    onStartPickerOpen() {
+      /**
+       * Emitted when the primary action button is clicked.
+       *
+       * @event start-picker-open
+       * */
+      this.$emit('start-picker-open');
+    },
+    onStartPickerClose() {
+      /**
+       * Emitted when the start date datepicker is hidden.
+       *
+       * @event start-picker-close
+       * */
+      this.$emit('start-picker-close');
+    },
+    onEndPickerOpen() {
+      /**
+       * Emitted when the end date datepicker becomes visible.
+       *
+       * @event end-picker-open
+       * */
+      this.$emit('end-picker-open');
+    },
+    onEndPickerClose() {
+      /**
+       * Emitted when the end date datepicker is hidden.
+       *
+       * @event end-picker-close
+       * */
+      this.$emit('end-picker-close');
+    },
   },
 };
 </script>
@@ -195,6 +232,7 @@ export default {
   <div class="gl-daterange-picker">
     <div :class="startPickerClass">
       <label :class="labelClass">{{ fromLabel }}</label>
+
       <gl-datepicker
         v-model="startDate"
         :min-date="defaultMinDate"
@@ -206,8 +244,8 @@ export default {
         :target="startPickerTarget"
         :container="startPickerContainer"
         @input="onStartDateSelected"
-        @open="$emit('start-picker-open')"
-        @close="$emit('start-picker-close')"
+        @open="onStartPickerOpen"
+        @close="onStartPickerClose"
       />
     </div>
     <div :class="endPickerClass">
@@ -226,8 +264,8 @@ export default {
         :start-opened="openToCalendar"
         :default-date="toCalendarDefaultDate"
         @input="onEndDateSelected"
-        @open="$emit('end-picker-open')"
-        @close="$emit('end-picker-close')"
+        @open="onEndPickerOpen"
+        @close="onEndPickerClose"
       />
     </div>
     <div
@@ -235,6 +273,7 @@ export default {
       data-testid="daterange-picker-indicator"
       class="gl-display-flex gl-flex-direction-row gl-align-items-center gl-text-gray-500 gl-ml-2"
     >
+      <!-- @slot Content to display for days selected. The value is -1 when no date range is selected.-->
       <slot v-bind="{ daysSelected: numberOfDays }"></slot>
       <gl-icon
         v-if="tooltip"

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

@@ -11,9 +11,9 @@ import {
   GlDropdownForm,
 } from '../../../../index';
 import {
-  newButtonCategoryOptions,
+  buttonCategoryOptions,
   newDropdownVariantOptions,
-  newButtonSizeOptions,
+  buttonSizeOptions,
 } from '../../../utils/constants';
 import readme from './dropdown.md';
 
@@ -53,7 +53,7 @@ function generateProps({
   const props = {
     category: {
       type: String,
-      default: select('category', newButtonCategoryOptions, category),
+      default: select('category', buttonCategoryOptions, category),
     },
     variant: {
       type: String,
@@ -61,7 +61,7 @@ function generateProps({
     },
     size: {
       type: String,
-      default: select('size', newButtonSizeOptions, size),
+      default: select('size', buttonSizeOptions, size),
     },
     block: {
       type: Boolean,
@@ -196,7 +196,7 @@ documentedStoriesOf('base/dropdown', readme)
   .add('secondary', () => ({
     props: generateProps({
       text: 'Some dropdown',
-      category: newButtonCategoryOptions.secondary,
+      category: buttonCategoryOptions.secondary,
       variant: newDropdownVariantOptions.confirm,
     }),
     components,

package/src/components/base/dropdown/dropdown.vue

@@ -2,11 +2,11 @@
 import { BDropdown } from 'bootstrap-vue';
 import { isVisible, selectAll } from 'bootstrap-vue/src/utils/dom';
 import {
-  newButtonCategoryOptions,
+  buttonCategoryOptions,
   newDropdownVariantOptions,
-  newButtonSizeOptions,
+  buttonSizeOptions,
 } from '../../../utils/constants';
-import ButtonMixin from '../../mixins/button_mixin';
+import { ButtonMixin } from '../../mixins/button_mixin';
 import GlButton from '../button/button.vue';
 import GlIcon from '../icon/icon.vue';
 import GlLoadingIcon from '../loading_icon/loading_icon.vue';
@@ -100,8 +100,8 @@ export default {
     category: {
       type: String,
       required: false,
-      default: newButtonCategoryOptions.primary,
-      validator: (value) => Object.keys(newButtonCategoryOptions).includes(value),
+      default: buttonCategoryOptions.primary,
+      validator: (value) => Object.keys(buttonCategoryOptions).includes(value),
     },
     variant: {
       type: String,
@@ -112,8 +112,8 @@ export default {
     size: {
       type: String,
       required: false,
-      default: newButtonSizeOptions.medium,
-      validator: (value) => Object.keys(newButtonSizeOptions).includes(value),
+      default: buttonSizeOptions.medium,
+      validator: (value) => Object.keys(buttonSizeOptions).includes(value),
     },
     icon: {
       type: String,
@@ -163,10 +163,10 @@ export default {
           'gl-button': true,
           'gl-dropdown-toggle': true,
           [`btn-${this.variant}-secondary`]:
-            this.category === newButtonCategoryOptions.secondary ||
-            (this.category === newButtonCategoryOptions.tertiary && this.split),
+            this.category === buttonCategoryOptions.secondary ||
+            (this.category === buttonCategoryOptions.tertiary && this.split),
           [`btn-${this.variant}-tertiary`]:
-            this.category === newButtonCategoryOptions.tertiary && !this.split,
+            this.category === buttonCategoryOptions.tertiary && !this.split,
           'dropdown-icon-only': this.isIconOnly,
           'dropdown-icon-text': this.isIconWithText,
         },
@@ -180,8 +180,8 @@ export default {
           'split-content-button': Boolean(this.text),
           'icon-split-content-button': Boolean(this.icon),
           [`btn-${this.variant}-secondary`]:
-            this.category === newButtonCategoryOptions.secondary ||
-            this.category === newButtonCategoryOptions.tertiary,
+            this.category === buttonCategoryOptions.secondary ||
+            this.category === buttonCategoryOptions.tertiary,
         },
       ];
     },

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

@@ -1,21 +1,6 @@
-import examples from './examples';
 import description from './form_checkbox.md';
 
 export default {
   description,
-  examples,
-  bootstrapComponent: 'b-form-checkbox',
   followsDesignSystem: true,
-  events: [
-    {
-      event: 'input',
-      description: 'Emitted when checked state changes',
-      args: [
-        {
-          arg: 'checked',
-          description: 'Whether the checkbox is checked',
-        },
-      ],
-    },
-  ],
 };

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

@@ -1,8 +1,6 @@
-# Form Checkbox
-
 Form checkbox groups for general use inside forms.
 
 ## Stacked
 
-By default, the GitLab Design guide mandates the `<gl-form-checkbox-group>` be `stacked` by default
-and is non-changeable at this time.
+By default, the GitLab Design guide mandates the `<gl-form-checkbox-group>` be `stacked` and is
+non-changeable at this time.