@gitlab/ui 33.1.2 → 36.0.0

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

@@ -2,6 +2,8 @@ import { alignOptions } from '../../../utils/constants';
 import readme from './pagination.md';
 import GlPagination from './pagination.vue';
 
+const components = { GlPagination };
+
 const generateBaseProps = ({ prevText = 'Prev', nextText = 'Next', disabled = false } = {}) => ({
   prevText,
   nextText,
@@ -30,6 +32,7 @@ const defaults = {
 };
 
 export const Default = (args, { argTypes }) => ({
+  components,
   props: Object.keys(argTypes),
   ...defaults,
   template: `<gl-pagination
@@ -44,6 +47,7 @@ export const Default = (args, { argTypes }) => ({
 Default.args = generateFullProps();
 
 export const Compact = () => ({
+  components,
   ...defaults,
   props: generateFullProps(),
   data() {
@@ -77,6 +81,7 @@ export const Compact = () => ({
 });
 
 export const LinkBased = (args, { argTypes }) => ({
+  components,
   props: Object.keys(argTypes),
   ...defaults,
   methods: {
@@ -97,6 +102,7 @@ export const LinkBased = (args, { argTypes }) => ({
 LinkBased.args = generateFullProps();
 
 export const AlignCenter = (args, { argTypes }) => ({
+  components,
   props: Object.keys(argTypes),
   ...defaults,
   template: `<gl-pagination
@@ -112,6 +118,7 @@ export const AlignCenter = (args, { argTypes }) => ({
 AlignCenter.args = generateFullProps();
 
 export const AlignRight = (args, { argTypes }) => ({
+  components,
   props: Object.keys(argTypes),
   ...defaults,
   template: `<gl-pagination

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

@@ -1,4 +1,4 @@
-import { GlPath } from '../../../../index';
+import { GlPath, GlPopover } from '../../../index';
 import { glThemes } from '../../../utils/constants';
 import { mockPathItems } from './data';
 import readme from './path.md';
@@ -28,7 +28,7 @@ export const Default = (args, { argTypes }) => ({
 Default.args = generateProps();
 
 export const WithPopovers = (args, { argTypes }) => ({
-  components: { GlPath },
+  components: { GlPath, GlPopover },
   props: Object.keys(argTypes),
   template: template(`
     <template #default="{ pathItem, pathId }">

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

@@ -1,7 +1,10 @@
 import { withKnobs, select, text } from '@storybook/addon-knobs';
+import { GlPopover, GlButton } from '../../../index';
 import { documentedStoriesOf } from '../../../../documentation/documented_stories';
 import { popoverPlacements } from '../../../utils/constants';
 
+const components = { GlPopover, GlButton };
+
 const contentString = `
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat a nisi non
   pellentesque. Pellentesque efficitur vulputate rutrum. Fusce nisl magna, porttitor in
@@ -57,10 +60,12 @@ function generateProps({ placement = popoverPlacements.top, title = 'Popover', t
 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>
@@ -81,6 +86,7 @@ documentedStoriesOf('base/popover', '')
   .add(
     'on click',
     () => ({
+      components,
       template: scopedSlotTemplate,
       props: generateProps(),
     }),

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.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_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,6 +1,8 @@
-import { GlTable } from '../../../../index';
+import { GlTable, GlFormInput } from '../../../index';
 import readme from './table.md';
 
+const components = { GlTable };
+
 const tableItems = [
   {
     column_one: 'test',
@@ -23,6 +25,7 @@ const generateProps = ({ fixed = false, footClone = false, stacked = false } = {
 });
 
 export const Default = (args, { argTypes }) => ({
+  components,
   props: Object.keys(argTypes),
   template: `
   <gl-table
@@ -55,6 +58,7 @@ export const Default = (args, { argTypes }) => ({
 Default.args = generateProps();
 
 export const Empty = (args, { argTypes }) => ({
+  components,
   props: Object.keys(argTypes),
   template: `
       <gl-table show-empty />
@@ -63,6 +67,7 @@ export const Empty = (args, { argTypes }) => ({
 Empty.parameters = { controls: { disable: true } };
 
 export const WithFilter = (args, { argTypes }) => ({
+  components: { ...components, GlFormInput },
   props: Object.keys(argTypes),
   template: `<div class="gl-line-height-normal">
       <gl-form-input v-model="filter" placeholder="Type to search" />

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

@@ -13,7 +13,6 @@ const TEST_ACTION = {
   text: 'Lorem ipsum',
 };
 const TEST_DEFAULT_PROPS = {
-  theme: 'red',
   contentClass: 'gl-test-content-class',
   navClass: 'gl-test-nav-class',
 };

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

@@ -10,7 +10,7 @@ tab, when active, will reveal it’s own unique content.
 ## Using the component Vue
 
 ~~~js
-<gl-tabs theme="indigo">
+<gl-tabs>
   <gl-tab title="Tab 1">
     Tab panel 1
   </gl-tab>
@@ -75,7 +75,7 @@ component. This is a separate Vue component because of some limitations:
 exceptions).
 
 ~~~html
-<gl-scrollable-tabs theme="indigo">
+<gl-scrollable-tabs>
   <gl-tab v-for="tab in tabs" :key="tab.key" :title="tab.title"> {{ tab.content }} </gl-tab>
 </gl-scrollable-tabs>
 ~~~

package/src/components/base/tabs/tabs/tabs.scss

@@ -52,125 +52,13 @@
 .gl-tab-nav-item-active {
   @include gl-font-weight-bold;
   @include gl-text-gray-900;
-}
-
-.gl-tab-nav-item-active-indigo {
-  @include gl-inset-border-b-2-theme-indigo-500;
-
-  &:active,
-  &:focus,
-  &:focus:active {
-    box-shadow: inset 0 -#{$gl-border-size-2} 0 0 $theme-indigo-500, $focus-ring;
-    @include gl-outline-none;
-  }
-}
-
-.gl-tab-nav-item-active-light-indigo {
-  @include gl-inset-border-b-2-theme-indigo-300;
-
-  &:active,
-  &:focus,
-  &:focus:active {
-    box-shadow: inset 0 -#{$gl-border-size-2} 0 0 $theme-indigo-300, $focus-ring;
-    @include gl-outline-none;
-  }
-}
-
-.gl-tab-nav-item-active-blue {
-  @include gl-inset-border-b-2-theme-blue-500;
-
-  &:active,
-  &:focus,
-  &:focus:active {
-    box-shadow: inset 0 -#{$gl-border-size-2} 0 0 $theme-blue-500, $focus-ring;
-    @include gl-outline-none;
-  }
-}
-
-.gl-tab-nav-item-active-light-blue {
-  @include gl-inset-border-b-2-theme-light-blue-500;
-
-  &:active,
-  &:focus,
-  &:focus:active {
-    box-shadow: inset 0 -#{$gl-border-size-2} 0 0 $theme-light-blue-500, $focus-ring;
-    @include gl-outline-none;
-  }
-}
-
-.gl-tab-nav-item-active-red {
-  @include gl-inset-border-b-2-theme-red-500;
-
-  &:active,
-  &:focus,
-  &:focus:active {
-    box-shadow: inset 0 -#{$gl-border-size-2} 0 0 $theme-red-500, $focus-ring;
-    @include gl-outline-none;
-  }
-}
-
-.gl-tab-nav-item-active-light-red {
-  @include gl-inset-border-b-2-theme-light-red-500;
-
-  &:active,
-  &:focus,
-  &:focus:active {
-    box-shadow: inset 0 -#{$gl-border-size-2} 0 0 $theme-light-red-500, $focus-ring;
-    @include gl-outline-none;
-  }
-}
-
-.gl-tab-nav-item-active-green {
-  @include gl-inset-border-b-2-theme-green-500;
-
-  &:active,
-  &:focus,
-  &:focus:active {
-    box-shadow: inset 0 -#{$gl-border-size-2} 0 0 $theme-green-500, $focus-ring;
-    @include gl-outline-none;
-  }
-}
-
-.gl-tab-nav-item-active-light-green {
-  @include gl-inset-border-b-2-theme-green-300;
-
-  &:active,
-  &:focus,
-  &:focus:active {
-    box-shadow: inset 0 -#{$gl-border-size-2} 0 0 $theme-green-300, $focus-ring;
-    @include gl-outline-none;
-  }
-}
-
-.gl-tab-nav-item-active-dark {
-  @include gl-inset-border-b-2-gray-500;
-
-  &:active,
-  &:focus,
-  &:focus:active {
-    box-shadow: inset 0 -#{$gl-border-size-2} 0 0 $gray-500, $focus-ring;
-    @include gl-outline-none;
-  }
-}
-
-.gl-tab-nav-item-active-light {
-  @include gl-inset-border-b-2-gray-300;
-
-  &:active,
-  &:focus,
-  &:focus:active {
-    box-shadow: inset 0 -#{$gl-border-size-2} 0 0 $gray-300, $focus-ring;
-    @include gl-outline-none;
-  }
-}
-
-.gl-tab-nav-item-active-gl-dark {
-  @include gl-inset-border-b-2-gray-100;
+  @include gl-inset-border-b-2-theme-accent;
 
   &:active,
   &:focus,
   &:focus:active {
-    box-shadow: inset 0 -#{$gl-border-size-2} 0 0 $gray-100, $focus-ring;
+    box-shadow: inset 0 -#{$gl-border-size-2} 0 0 var(--gl-theme-accent, $theme-indigo-500),
+      $focus-ring;
     @include gl-outline-none;
   }
 }

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

@@ -1,6 +1,6 @@
-import { mount, shallowMount } from '@vue/test-utils';
+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';
@@ -44,9 +44,12 @@ describe('tabs component', () => {
     wrapper.findAll('[role="tab"]').wrappers.find((tabWrapper) => tabWrapper.text() === text);
 
   describe('default', () => {
-    it('should have a default theme of indigo', () => {
-      buildTabs({ mountFn: shallowMount });
-      expect(wrapper.attributes('activenavitemclass')).toContain('gl-tab-nav-item-active-indigo');
+    it('the active tab should be styled', async () => {
+      buildTabs();
+
+      await nextTick();
+
+      expect(findActiveTab().classes()).toContain('gl-tab-nav-item-active');
     });
   });
 

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

@@ -1,12 +1,12 @@
-import { withKnobs, select, boolean } from '@storybook/addon-knobs';
+import { withKnobs, boolean } from '@storybook/addon-knobs';
 import { range } from 'lodash';
 import { documentedStoriesOf } from '../../../../../documentation/documented_stories';
-import { GlTabs, GlTab, GlScrollableTabs } from '../../../../../index';
-import { colorThemes } from '../../../../utils/constants';
+import { GlTabs, GlTab, GlScrollableTabs } from '../../../../index';
 import docs from './tabs.md';
 
 const ScrollableTabsGenerator = {
   components: {
+    GlTabs,
     GlScrollableTabs,
     GlTab,
   },
@@ -39,10 +39,6 @@ const createBaseStory = () => ({
     GlTab,
   },
   props: {
-    theme: {
-      type: String,
-      default: select('theme', [...Object.keys(colorThemes), 'gl-dark'], 'indigo'),
-    },
     syncActiveTabWithQueryParams: {
       type: Boolean,
       default: boolean('sync-active-tab-with-query-params', false),
@@ -55,7 +51,7 @@ documentedStoriesOf('base/tabs/tabs', docs)
   .add('default', () => ({
     ...createBaseStory(),
     template: `
-      <gl-tabs :theme="theme" :sync-active-tab-with-query-params="syncActiveTabWithQueryParams">
+      <gl-tabs :sync-active-tab-with-query-params="syncActiveTabWithQueryParams">
         <gl-tab title="Tab 1">
           Tab panel 1
         </gl-tab>
@@ -104,7 +100,7 @@ documentedStoriesOf('base/tabs/tabs', docs)
   .add('contentless tab', () => ({
     ...createBaseStory(),
     template: `
-      <gl-tabs :theme="theme">
+      <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>
@@ -123,7 +119,7 @@ documentedStoriesOf('base/tabs/tabs', docs)
   .add('empty state', () => ({
     ...createBaseStory(),
     template: `
-      <gl-tabs :theme="theme">
+      <gl-tabs>
         <template #empty>
           This content is only displayed when there are no tabs. Useful for dynamically added/removed tabs.
         </template>
@@ -133,7 +129,7 @@ documentedStoriesOf('base/tabs/tabs', docs)
   .add('justified tabs', () => ({
     ...createBaseStory(),
     template: `
-      <gl-tabs :theme="theme" justified>
+      <gl-tabs justified>
         <gl-tab title="Tab 1">
           <p>Tab panel 1</p>
         </gl-tab>
@@ -177,7 +173,7 @@ documentedStoriesOf('base/tabs/tabs', docs)
     components: {
       ScrollableTabsGenerator,
     },
-    template: '<scrollable-tabs-generator :count="50" :theme="theme" />',
+    template: '<scrollable-tabs-generator :count="50" />',
   }))
   .add(
     'with scroll and growing',
@@ -197,7 +193,7 @@ documentedStoriesOf('base/tabs/tabs', docs)
           this.count += 1;
         }, 2000);
       },
-      template: '<scrollable-tabs-generator :count="count" :theme="theme" />',
+      template: '<scrollable-tabs-generator :count="count" />',
     }),
     { storyshots: false }
   );

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

@@ -1,6 +1,6 @@
 <script>
 import { BTabs } from 'bootstrap-vue';
-import { colorThemes, tabsButtonDefaults } from '../../../../utils/constants';
+import { tabsButtonDefaults } from '../../../../utils/constants';
 import GlButton from '../../button/button.vue';
 
 const validatorHelper = (obj) =>
@@ -31,12 +31,6 @@ export default {
       default: null,
       validator: (obj) => validatorHelper(obj),
     },
-    theme: {
-      type: String,
-      required: false,
-      default: 'indigo',
-      validator: (value) => Object.keys(colorThemes).includes(value) || value === 'gl-dark',
-    },
     contentClass: {
       type: [String, Array, Object],
       required: false,
@@ -77,9 +71,6 @@ export default {
     hasActions() {
       return [this.actionPrimary, this.actionSecondary, this.actionTertiary].some(Boolean);
     },
-    activeItemBorderClass() {
-      return `gl-tab-nav-item-active-${this.theme}`;
-    },
     listeners() {
       return {
         ...this.$listeners,
@@ -214,7 +205,7 @@ export default {
     ref="bTabs"
     :no-nav-style="true"
     :no-fade="true"
-    :active-nav-item-class="`gl-tab-nav-item-active ${activeItemBorderClass}`"
+    active-nav-item-class="gl-tab-nav-item-active"
     :content-class="[contentClass, 'gl-tab-content']"
     :nav-class="[navClass, 'gl-tabs-nav']"
     :justified="justified"

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

@@ -1,11 +1,13 @@
 import Vue from 'vue';
-import { GlToast } from '../../../../index';
+import { GlToast, GlButton } from '../../../index';
 import readme from './toast.md';
 
 Vue.use(GlToast);
 
+const components = { GlToast, GlButton };
+
 const Template = () => ({
-  components: { GlToast },
+  components,
   template: `
   <gl-button @click="showToast()">
     Show default toast
@@ -23,7 +25,7 @@ const Template = () => ({
 export const Default = Template.bind({});
 
 export const WithActions = () => ({
-  components: { GlToast },
+  components,
   template: `
   <gl-button @click="showToast()">
     Show toast with actions
@@ -44,7 +46,7 @@ export const WithActions = () => ({
 });
 
 export const WithLongContent = () => ({
-  components: { GlToast },
+  components,
   template: `
   <gl-button @click="showToast()">
     Show toast with a long content

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 } from '../../../../index';
+import { GlToken, GlAvatar } from '../../../index';
 import { tokenVariants } from '../../../utils/constants';
 
 import readme from './token.md';
@@ -31,7 +31,7 @@ ViewOnly.args = generateProps({
 });
 
 export const WithAvatar = () => ({
-  components: { GlToken },
+  components: { GlToken, GlAvatar },
   template: `
     <div class="gl-display-flex">
     <gl-token><gl-avatar src="./img/avatar.png" :size="16" />Token</gl-token>

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

@@ -1,8 +1,9 @@
-import { GlTooltip, GlTooltipDirective } from '../../../../index';
+import { GlTooltip, GlTooltipDirective, GlButton } from '../../../index';
 import readme from './tooltip.md';
 
 function makeTooltip(modifier = '') {
   return {
+    components: { GlTooltip, GlButton },
     directives: {
       GlTooltip: GlTooltipDirective,
     },

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,