@gitlab/ui 35.1.0 → 36.3.0

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

@@ -1,8 +1,8 @@
-import { withKnobs, select, text } from '@storybook/addon-knobs';
-import { GlPopover, GlButton } from '../../../../index';
-import { documentedStoriesOf } from '../../../../documentation/documented_stories';
+import { GlPopover, GlButton } from '../../../index';
 import { popoverPlacements } from '../../../utils/constants';
 
+const defaultValue = (prop) => GlPopover.props[prop].default;
+
 const components = { GlPopover, GlButton };
 
 const contentString = `
@@ -11,84 +11,88 @@ const contentString = `
   massa ac, porta condimentum libero. Ut id lacus tristique, egestas arcu non, molestie nisi.
 `;
 
-const template = `
-  <div class="gl-display-flex gl-justify-content-center gl-p-6">
-    <gl-button id="pop-top">{{placement}}</gl-button>
-    <gl-popover target="pop-top"
-      triggers="hover focus"
+const getTemplate = (id, slots = '') => `
+  <div style="height:400px;" class="gl-display-flex gl-justify-content-center gl-align-items-center">
+    <gl-button id="${id}">{{placement}}</gl-button>
+    <gl-popover
+      target="${id}"
+      :triggers="triggers"
       :title="title"
       :placement="placement"
+      :show-close-button="showCloseButton"
       content="${contentString}"
-      data-testid="popover-with-props"
-      show
-      />
-  </div>
-  `;
+      data-testid="${id}"
+      :show="$options.viewMode !== 'docs'">${slots}</gl-popover>
+  </div>`;
 
-const scopedSlotTemplate = `
-  <div class="gl-display-flex gl-justify-content-center gl-p-6">
-    <gl-button id="pop-top-two" data-testid="popover-button-click">{{placement}}</gl-button>
-    <gl-popover target="pop-top-two"
-      triggers="click"
-      :placement="placement"
-      content="${contentString}"
-    >
-      <template #title>
-        <span data-testid="popover-title">Popover title</span>
-      </template>
-    </gl-popover>
-  </div>
-`;
+const generateProps = ({
+  placement = popoverPlacements.top,
+  title = 'Popover',
+  triggers = defaultValue('triggers'),
+  cssClasses = defaultValue('cssClasses'),
+  showCloseButton = defaultValue('showCloseButton'),
+} = {}) => ({
+  placement,
+  title,
+  triggers,
+  cssClasses,
+  showCloseButton,
+});
+
+export const Default = (_args, { viewMode, argTypes }) => ({
+  viewMode,
+  components,
+  props: Object.keys(argTypes),
+  template: getTemplate('popover-with-props'),
+});
+Default.args = generateProps();
 
-function generateProps({ placement = popoverPlacements.top, title = 'Popover', triggers } = {}) {
-  return {
+export const WithCloseButton = (_args, { viewMode, argTypes }) => ({
+  viewMode,
+  components,
+  props: Object.keys(argTypes),
+  template: getTemplate('popover-with-close-button'),
+});
+WithCloseButton.args = generateProps({
+  showCloseButton: true,
+});
+
+export const OnClick = (_args, { viewMode, argTypes }) => ({
+  viewMode,
+  components,
+  props: Object.keys(argTypes),
+  template: getTemplate(
+    'popover-button-click',
+    `
+    <template #title>
+      <span data-testid="popover-title">Popover title</span>
+    </template>
+  `
+  ),
+});
+OnClick.args = generateProps({
+  triggers: 'click',
+});
+OnClick.parameters = {
+  storyshots: { disable: true },
+};
+
+export default {
+  title: 'base/popover',
+  component: GlPopover,
+  parameters: {
+    knobs: { disable: true },
+    bootstrapComponent: 'b-popover',
+  },
+  argTypes: {
     placement: {
-      type: String,
-      default: select('placement', popoverPlacements, placement),
+      options: Object.values(popoverPlacements),
+      control: {
+        type: 'select',
+      },
     },
     title: {
-      type: String,
-      default: text('title', title),
+      control: { type: 'text' },
     },
-    triggers: {
-      type: String,
-      default: text('hover focus', triggers),
-    },
-  };
-}
-
-documentedStoriesOf('base/popover', '')
-  .addDecorator(withKnobs)
-  .add('default', () => ({
-    components,
-    template,
-    props: generateProps(),
-  }))
-  .add('with close button', () => ({
-    components,
-    template: `
-      <div class="gl-display-flex gl-justify-content-center gl-p-6">
-        <gl-button id="pop-with-close-button">{{placement}}</gl-button>
-        <gl-popover
-          target="pop-with-close-button"
-          data-testid="popover-with-close-button"
-          triggers="hover focus"
-          :title="title"
-          :placement="placement"
-          content="${contentString}"
-          show
-          show-close-button
-          />
-      </div>
-    `,
-    props: generateProps(),
-  }))
-  .add(
-    'on click',
-    () => ({
-      components,
-      template: scopedSlotTemplate,
-      props: generateProps(),
-    }),
-    { storyshots: false }
-  );
+  },
+};

package/src/components/base/popover/popover.vue

@@ -18,6 +18,11 @@ export default {
       required: false,
       default: () => [],
     },
+    /**
+     * Space-separated triggers for the popover.
+     *
+     * @values click, hover, focus, manual
+     */
     triggers: {
       type: String,
       required: false,
@@ -45,6 +50,9 @@ export default {
   methods: {
     close(e) {
       this.$refs[popoverRefName].doClose();
+      /**
+       * Emitted when the close button is clicked (requires showCloseButton to be `true`).
+       */
       this.$emit('close-button-clicked', e);
     },
   },

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

@@ -1,4 +1,4 @@
-import { GlProgressBar } from '../../../../index';
+import { GlProgressBar } from '../../../index';
 import { variantOptions } from '../../../utils/constants';
 
 const generateProps = ({ value = 30, variant = variantOptions.primary } = {}) => ({

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

@@ -52,6 +52,9 @@ export default {
       additionalInfo:
         'Container for tooltip. Valid values: DOM node, selector string or `false` for default',
     },
+    searchButtonAttributes: {
+      additionalInfo: 'HTML attributes to add to the search button',
+    },
   },
   events: [
     {

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

@@ -25,6 +25,7 @@ describe('search box by click component', () => {
   };
 
   const findClearIcon = () => wrapper.findComponent(ClearIcon);
+  const findSearchButton = () => wrapper.find('[data-testid="search-button"]');
 
   it('emits input event when input changes', async () => {
     createComponent({ value: 'somevalue' });
@@ -125,8 +126,8 @@ describe('search box by click component', () => {
     });
 
     it('displays disabled search button', () => {
-      expect(wrapper.findComponent({ ref: 'searchButton' }).exists()).toBe(true);
-      expect(wrapper.findComponent({ ref: 'searchButton' }).attributes('disabled')).toBe('true');
+      expect(findSearchButton().exists()).toBe(true);
+      expect(findSearchButton().attributes('disabled')).toBe('true');
     });
 
     it('does not render clear icon even with value', () => {
@@ -145,9 +146,19 @@ describe('search box by click component', () => {
 
   it('emits submit event when search button is pressed', async () => {
     createComponent({ value: 'some-input' });
-    wrapper.findComponent({ ref: 'searchButton' }).vm.$emit('click');
+    findSearchButton().vm.$emit('click');
 
     await wrapper.vm.$nextTick();
     expect(wrapper.emitted().submit[0]).toEqual(['some-input']);
   });
+
+  it('adds `searchButtonAttributes` prop to search button', () => {
+    const searchButtonAttributes = { 'data-qa-selector': 'foo-bar' };
+
+    createComponent({ searchButtonAttributes });
+
+    expect(findSearchButton().attributes('data-qa-selector')).toBe(
+      searchButtonAttributes['data-qa-selector']
+    );
+  });
 });

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

@@ -1,6 +1,6 @@
 import { withKnobs, boolean, text } from '@storybook/addon-knobs';
 import { documentedStoriesOf } from '../../../../documentation/documented_stories';
-import { GlSearchBoxByClick } from '../../../../index';
+import { GlSearchBoxByClick } from '../../../index';
 import readme from './search_box_by_click.md';
 
 const components = {

package/src/components/base/search_box_by_click/search_box_by_click.vue

@@ -84,6 +84,11 @@ export default {
       validator: (value) =>
         value === false || typeof value === 'string' || value instanceof HTMLElement,
     },
+    searchButtonAttributes: {
+      type: Object,
+      required: false,
+      default: () => ({}),
+    },
   },
   data() {
     return {
@@ -216,11 +221,13 @@ export default {
     />
     <template #append class="gl-search-box-by-click-input-group-control">
       <gl-button
+        v-bind="searchButtonAttributes"
         ref="searchButton"
         class="gl-search-box-by-click-search-button"
         icon="search"
         :disabled="disabled"
         aria-label="Search"
+        data-testid="search-button"
         @click="search(currentValue)"
       />
     </template>

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

@@ -1,6 +1,6 @@
 import { withKnobs, boolean, text } from '@storybook/addon-knobs';
 import { documentedStoriesOf } from '../../../../documentation/documented_stories';
-import { GlSearchBoxByType } from '../../../../index';
+import { GlSearchBoxByType } from '../../../index';
 import readme from './search_box_by_type.md';
 
 const components = {

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

@@ -1,4 +1,4 @@
-import { GlSegmentedControl } from '../../../../index';
+import { GlSegmentedControl } from '../../../index';
 import readme from './segmented_control.md';
 
 const defaultOptions = [

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

@@ -1,4 +1,4 @@
-import { GlSkeletonLoader } from '../../../../index';
+import { GlSkeletonLoader } from '../../../index';
 import readme from './skeleton_loader.md';
 
 const Template = (args) => ({

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

@@ -1,4 +1,4 @@
-import { GlDeprecatedSkeletonLoading } from '../../../../index';
+import { GlDeprecatedSkeletonLoading } from '../../../index';
 import readme from './skeleton_loading.md';
 
 const components = {

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

@@ -1,4 +1,4 @@
-import { GlSorting, GlSortingItem } from '../../../../index';
+import { GlSorting, GlSortingItem } from '../../../index';
 import { makeContainer } from '../../../utils/story_decorators/container';
 import readme from './sorting.md';
 

package/src/components/base/sorting/sorting_item.stories.js

@@ -1,4 +1,4 @@
-import { GlSorting, GlSortingItem } from '../../../../index';
+import { GlSorting, GlSortingItem } from '../../../index';
 import { makeContainer } from '../../../utils/story_decorators/container';
 import readme from './sorting_item.md';
 

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

@@ -1,4 +1,4 @@
-import { GlTable, GlFormInput } from '../../../../index';
+import { GlTable, GlFormInput } from '../../../index';
 import readme from './table.md';
 
 const components = { GlTable };

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

@@ -1,6 +1,6 @@
 import { mount } from '@vue/test-utils';
 import { nextTick } from 'vue';
-import { GlButton } from '../../../../../index';
+import { GlButton } from '../../../../index';
 import { tabsButtonDefaults } from '../../../../utils/constants';
 import GlTab from '../tab/tab.vue';
 import GlTabs from './tabs.vue';

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

@@ -1,7 +1,7 @@
 import { withKnobs, boolean } from '@storybook/addon-knobs';
 import { range } from 'lodash';
 import { documentedStoriesOf } from '../../../../../documentation/documented_stories';
-import { GlTabs, GlTab, GlScrollableTabs } from '../../../../../index';
+import { GlTabs, GlTab, GlScrollableTabs } from '../../../../index';
 import docs from './tabs.md';
 
 const ScrollableTabsGenerator = {

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

@@ -1,5 +1,5 @@
 import Vue from 'vue';
-import { GlToast, GlButton } from '../../../../index';
+import { GlToast, GlButton } from '../../../index';
 import readme from './toast.md';
 
 Vue.use(GlToast);

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

@@ -1,4 +1,4 @@
-import { GlToggle } from '../../../../index';
+import { GlToggle } from '../../../index';
 import { toggleLabelPosition } from '../../../utils/constants';
 import readme from './toggle.md';
 

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

@@ -1,4 +1,4 @@
-import { GlToken, GlAvatar } from '../../../../index';
+import { GlToken, GlAvatar } from '../../../index';
 import { tokenVariants } from '../../../utils/constants';
 
 import readme from './token.md';

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

@@ -1,4 +1,4 @@
-import { GlTooltip, GlTooltipDirective, GlButton } from '../../../../index';
+import { GlTooltip, GlTooltipDirective, GlButton } from '../../../index';
 import readme from './tooltip.md';
 
 function makeTooltip(modifier = '') {

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

@@ -1,6 +1,6 @@
 import { withKnobs, object, array, boolean } from '@storybook/addon-knobs';
 import { times } from 'lodash';
-import { GlAreaChart } from '../../../../charts';
+import { GlAreaChart } from '../../../charts';
 import { documentedStoriesOf } from '../../../../documentation/documented_stories';
 import { mockAnnotationsSeries, mockAnnotationsConfigs } from '../../../utils/charts/mock_data';
 import { toolbox } from '../../../utils/charts/story_config';

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

@@ -1,4 +1,4 @@
-import { GlBarChart } from '../../../../charts';
+import { GlBarChart } from '../../../charts';
 import readme from './bar.md';
 
 const Template = (args, { argTypes }) => ({

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

@@ -1,5 +1,5 @@
-import { GlChart } from '../../../../charts';
-import { GlTabs, GlTab } from '../../../../index';
+import { GlChart } from '../../../charts';
+import { GlTabs, GlTab } from '../../../index';
 import readme from './chart.md';
 
 const Template = (args, { argTypes = {} }) => ({

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

@@ -1,4 +1,4 @@
-import { GlColumnChart } from '../../../../charts';
+import { GlColumnChart } from '../../../charts';
 import {
   mockDefaultLineData,
   mockDefaultBarData,

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

@@ -1,4 +1,4 @@
-import { GlDiscreteScatterChart } from '../../../../charts';
+import { GlDiscreteScatterChart } from '../../../charts';
 
 const Template = (args, { argTypes }) => ({
   components: { GlDiscreteScatterChart },

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

@@ -1,4 +1,4 @@
-import { GlHeatmap } from '../../../../charts';
+import { GlHeatmap } from '../../../charts';
 import { documentedStoriesOf } from '../../../../documentation/documented_stories';
 import { toolbox } from '../../../utils/charts/story_config';
 import readme from '../area/area.md';

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

@@ -1,4 +1,4 @@
-import { GlChart, GlChartLegend } from '../../../../charts';
+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';

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

@@ -1,5 +1,5 @@
 import { withKnobs, object, boolean, array } from '@storybook/addon-knobs';
-import { GlLineChart } from '../../../../charts';
+import { GlLineChart } from '../../../charts';
 import { documentedStoriesOf } from '../../../../documentation/documented_stories';
 import { mockAnnotationsSeries, mockAnnotationsConfigs } from '../../../utils/charts/mock_data';
 import { toolbox } from '../../../utils/charts/story_config';

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

@@ -1,5 +1,5 @@
 import { withKnobs, text } from '@storybook/addon-knobs';
-import { GlChartSeriesLabel } from '../../../../charts';
+import { GlChartSeriesLabel } from '../../../charts';
 import { documentedStoriesOf } from '../../../../documentation/documented_stories';
 import { colorPaletteDefault } from '../../../utils/charts/theme';
 import {

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

@@ -1,6 +1,6 @@
 import iconSpriteInfo from '@gitlab/svgs/dist/icons.json';
 import { withKnobs, text, select, boolean, number } from '@storybook/addon-knobs';
-import { GlSingleStat } from '../../../../charts';
+import { GlSingleStat } from '../../../charts';
 import { documentedStoriesOf } from '../../../../documentation/documented_stories';
 import { badgeVariantOptions } from '../../../utils/constants';
 import readme from './single_stat.md';

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

@@ -1,4 +1,4 @@
-import { GlSparklineChart } from '../../../../charts';
+import { GlSparklineChart } from '../../../charts';
 import readme from './sparkline.md';
 
 const chartData = [

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

@@ -1,4 +1,4 @@
-import { GlStackedColumnChart } from '../../../../charts';
+import { GlStackedColumnChart } from '../../../charts';
 import {
   mockDefaultStackedLineData,
   mockDefaultStackedBarData,

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

@@ -1,4 +1,4 @@
-import { GlChart, GlChartTooltip, GlChartSeriesLabel } from '../../../../charts';
+import { GlChart, GlChartTooltip, GlChartSeriesLabel } from '../../../charts';
 import {
   SERIES_NAME,
   SERIES_NAME_LONG,

package/src/components/regions/dashboard_skeleton/dashboard_skeleton.stories.js

@@ -1,4 +1,4 @@
-import { GlDashboardSkeleton } from '../../../../index';
+import { GlDashboardSkeleton } from '../../../index';
 import readme from './dashboard_skeleton.md';
 
 const defaultValue = (prop) => GlDashboardSkeleton.props[prop].default;

package/src/components/regions/empty_state/empty_state.stories.js

@@ -1,4 +1,4 @@
-import { GlButton, GlEmptyState } from '../../../../index';
+import { GlButton, GlEmptyState } from '../../../index';
 import readme from './empty_state.md';
 
 const template = `

package/src/components/utilities/friendly_wrap/friendly_wrap.stories.js

@@ -1,4 +1,4 @@
-import { GlFriendlyWrap } from '../../../../index';
+import { GlFriendlyWrap } from '../../../index';
 import readme from './friendly_wrap.md';
 
 const components = {

package/src/components/utilities/intersection_observer/intersection_observer.stories.js

@@ -1,4 +1,4 @@
-import { GlIntersectionObserver } from '../../../../index';
+import { GlIntersectionObserver } from '../../../index';
 import readme from './intersection_observer.md';
 
 const components = {

package/src/components/utilities/intersperse/intersperse.stories.js

@@ -1,4 +1,4 @@
-import { GlIntersperse } from '../../../../index';
+import { GlIntersperse } from '../../../index';
 import readme from './intersperse.md';
 
 const template = `

package/src/components/utilities/sprintf/sprintf.stories.js

@@ -1,4 +1,4 @@
-import { GlSprintf, GlButton, GlLink } from '../../../../index';
+import { GlSprintf, GlButton, GlLink } from '../../../index';
 import readme from './sprintf.md';
 
 const generateProps = ({ message = 'Written by %{author}', placeholders } = {}) => ({

package/src/components/utilities/truncate/truncate.stories.js

@@ -1,4 +1,4 @@
-import { GlTruncate } from '../../../../index';
+import { GlTruncate } from '../../../index';
 import { POSITION } from './constants';
 import readme from './truncate.md';
 

package/{config.js → src/config.js}

@@ -1,6 +1,6 @@
 import { BVConfigPlugin } from 'bootstrap-vue';
 import Vue from 'vue';
-import { tooltipDelay } from './src/utils/constants';
+import { tooltipDelay } from './utils/constants';
 
 const bFormTextGlobalConfig = {
   textVariant: 'gl-muted',

package/src/directives/hover_load/hover_load.stories.js

@@ -1,6 +1,6 @@
 import { text } from '@storybook/addon-knobs';
 import { documentedStoriesOf } from '../../../documentation/documented_stories';
-import { GlHoverLoadDirective } from '../../../index';
+import { GlHoverLoadDirective } from '../../index';
 import readme from './hover_load.md';
 
 const directives = {

package/src/directives/outside/outside.stories.js

@@ -1,4 +1,4 @@
-import { GlOutsideDirective } from '../../../index';
+import { GlOutsideDirective } from '../../index';
 import GlButton from '../../components/base/button/button.vue';
 import readme from './outside.md';
 

package/src/directives/resize_observer/resize_observer.stories.js

@@ -1,6 +1,6 @@
 import { withKnobs, select } from '@storybook/addon-knobs';
 import { documentedStoriesOf } from '../../../documentation/documented_stories';
-import { GlResizeObserverDirective } from '../../../index';
+import { GlResizeObserverDirective } from '../../index';
 import readme from './resize_observer.md';
 
 documentedStoriesOf('directives/resize-observer-directive', readme)

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

@@ -2,7 +2,7 @@ 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 } from '../../index';
 import readme from './safe_html.md';
 
 documentedStoriesOf('directives/safe-html-directive', readme)