@gitlab/ui 34.0.0 → 36.1.0

package/documentation/all_components.js

@@ -1,5 +1,5 @@
-import * as chartComponents from '../charts';
-import * as components from '../index';
+import * as chartComponents from '../src/charts';
+import * as components from '../src';
 
 export const gitlabComponents = { ...components, ...chartComponents };
 export const gitlabChartComponents = { ...chartComponents };

package/documentation/components_documentation.js

@@ -9,9 +9,7 @@ export { default as GlFormTextDocumentation } from '../src/components/base/form/
 export { default as GlFormComboboxDocumentation } from '../src/components/base/form/form_combobox/form_combobox.documentation';
 export { default as GlGaugeChartDocumentation } from '../src/components/charts/gauge/gauge.documentation';
 export { default as GlTokenSelectorDocumentation } from '../src/components/base/token_selector/token_selector.documentation';
-export { default as GlNavItemDropdownDocumentation } from '../src/components/base/nav/nav_item_dropdown.documentation';
 export { default as GlNavDocumentation } from '../src/components/base/nav/nav.documentation';
-export { default as GlNavItemDocumentation } from '../src/components/base/nav/nav_item.documentation';
 export { default as GlFormCheckboxTreeDocumentation } from '../src/components/base/form/form_checkbox_tree/form_checkbox_tree.documentation';
 export { default as GlMarkdownDocumentation } from '../src/components/base/markdown/markdown.documentation';
 export { default as GlNavbarDocumentation } from '../src/components/base/navbar/navbar.documentation';

package/documentation/documented_stories.js

@@ -122,6 +122,10 @@ export const setupStorybookReadme = () =>
         'GlIntersectionObserver',
         'GlInfiniteScroll',
         'GlColumnChart',
+        'GlTruncate',
+        'GlNav',
+        'GlNavItem',
+        'GlNavItemDropdown',
       ],
       components: {
         GlComponentDocumentation,

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "@gitlab/ui",
-  "version": "34.0.0",
+  "version": "36.1.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "jsnext:main": "dist/index.js",
+  "source": "src/index.js",
   "sideEffects": [
     "*.css",
     "*.scss"
@@ -17,11 +18,7 @@
     "src",
     "dist",
     "scss_to_js",
-    "documentation",
-    "index.js",
-    "charts.js",
-    "utils.js",
-    "config.js"
+    "documentation"
   ],
   "scripts": {
     "build": "NODE_ENV=production rollup -c",
@@ -85,8 +82,8 @@
     "@arkweid/lefthook": "^0.7.6",
     "@babel/core": "^7.10.2",
     "@babel/preset-env": "^7.10.2",
-    "@gitlab/eslint-plugin": "10.0.1",
-    "@gitlab/stylelint-config": "3.0.0",
+    "@gitlab/eslint-plugin": "10.0.2",
+    "@gitlab/stylelint-config": "4.0.0",
     "@gitlab/svgs": "2.2.0",
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
@@ -129,7 +126,7 @@
     "npm-run-all": "^4.1.5",
     "pikaday": "^1.8.0",
     "plop": "^2.5.4",
-    "postcss": "^7.0.30",
+    "postcss": "8.4.5",
     "postcss-loader": "^3.0.0",
     "postcss-scss": "^2.1.1",
     "prettier": "2.2.1",
@@ -147,7 +144,7 @@
     "sass-true": "^5.0.0",
     "start-server-and-test": "^1.10.6",
     "storybook-readme": "5.0.9",
-    "stylelint": "13.9.0",
+    "stylelint": "14.3.0",
     "stylelint-config-prettier": "9.0.3",
     "stylelint-prettier": "2.0.0",
     "vue": "^2.6.11",

package/src/charts.js

@@ -0,0 +1,19 @@
+// Add config files
+import setConfigs from './config';
+
+setConfigs();
+
+export { default as GlChart } from './components/charts/chart/chart.vue';
+export { default as GlAreaChart } from './components/charts/area/area.vue';
+export { default as GlBarChart } from './components/charts/bar/bar.vue';
+export { default as GlGaugeChart } from './components/charts/gauge/gauge.vue';
+export { default as GlLineChart } from './components/charts/line/line.vue';
+export { default as GlChartLegend } from './components/charts/legend/legend.vue';
+export { default as GlChartSeriesLabel } from './components/charts/series_label/series_label.vue';
+export { default as GlChartTooltip } from './components/charts/tooltip/tooltip.vue';
+export { default as GlHeatmap } from './components/charts/heatmap';
+export { default as GlColumnChart } from './components/charts/column/column.vue';
+export { default as GlStackedColumnChart } from './components/charts/stacked_column/stacked_column.vue';
+export { default as GlDiscreteScatterChart } from './components/charts/discrete_scatter/discrete_scatter.vue';
+export { default as GlSingleStat } from './components/charts/single_stat/single_stat.vue';
+export { default as GlSparklineChart } from './components/charts/sparkline/sparkline.vue';

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

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

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

@@ -1,10 +1,13 @@
 import Vue from 'vue';
+import { GlAvatar } from '../../../index';
 import { GlTooltipDirective } from '../../../directives/tooltip';
 import { avatarSizeOptions, avatarShapeOptions, tooltipPlacements } from '../../../utils/constants';
 import readme from './avatar.md';
 
 Vue.directive('gl-tooltip', GlTooltipDirective);
 
+const components = { GlAvatar };
+
 const generateImageProps = ({ size = 64, shape = 'circle' } = {}) => ({
   size,
   shape,
@@ -44,6 +47,7 @@ const template = `
 `;
 
 export const Image = (args, { argTypes }) => ({
+  components,
   props: Object.keys(argTypes),
   template: `
       <gl-avatar
@@ -56,18 +60,21 @@ export const Image = (args, { argTypes }) => ({
 Image.args = generateImageProps();
 
 export const ProjectFallback = (args, { argTypes }) => ({
+  components,
   props: Object.keys(argTypes),
   template,
 });
 ProjectFallback.args = generateProjectFallbackProps();
 
 export const EmojiProjectName = (args, { argTypes }) => ({
+  components,
   props: Object.keys(argTypes),
   template,
 });
 EmojiProjectName.args = generateEmojiProjectProps();
 
 export const WithTooltip = (args, { argTypes }) => ({
+  components,
   props: Object.keys(argTypes),
   template: `
       <gl-avatar
@@ -83,6 +90,7 @@ WithTooltip.args = { ...generateImageProps(), ...generateTooltipProps() };
 
 export default {
   title: 'base/avatar',
+  component: GlAvatar,
   parameters: {
     knobs: { disable: true },
     docs: {

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

@@ -1,10 +1,13 @@
 import Vue from 'vue';
+import { GlAvatarLabeled, GlBadge } from '../../../index';
 import { GlTooltipDirective } from '../../../directives/tooltip';
 import { avatarSizeOptions, avatarShapeOptions, tooltipPlacements } from '../../../utils/constants';
 import readme from './avatar_labeled.md';
 
 Vue.directive('gl-tooltip', GlTooltipDirective);
 
+const components = { GlAvatarLabeled };
+
 const generateProps = ({
   label = 'GitLab User',
   subLabel = '@gitlab',
@@ -25,6 +28,7 @@ const generateTooltipProps = ({ tooltipText = 'Avatar tooltip', placement = 'top
 });
 
 export const Default = (args, { argTypes }) => ({
+  components,
   props: Object.keys(argTypes),
   template: `
       <gl-avatar-labeled
@@ -39,6 +43,7 @@ export const Default = (args, { argTypes }) => ({
 Default.args = generateProps();
 
 export const WithTooltip = (args, { argTypes }) => ({
+  components,
   props: Object.keys(argTypes),
   template: `
       <gl-avatar-labeled
@@ -63,6 +68,7 @@ WithTooltip.argTypes = {
 };
 
 export const WithBadges = (args, { argTypes }) => ({
+  components: { GlAvatarLabeled, GlBadge },
   props: Object.keys(argTypes),
   template: `
       <gl-avatar-labeled
@@ -87,6 +93,7 @@ WithBadges.args = generateProps();
 
 export default {
   title: 'base/avatar/labeled',
+  component: GlAvatarLabeled,
   parameters: {
     knobs: { disable: true },
     docs: {

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

@@ -1,6 +1,9 @@
+import { GlAvatarLink, GlAvatar, GlAvatarLabeled } from '../../../index';
 import { avatarSizeOptions, avatarShapeOptions } from '../../../utils/constants';
 import readme from './avatar_link.md';
 
+const components = { GlAvatarLink, GlAvatar };
+
 const generateDefaultProps = ({
   href = 'https://gitlab.com/gitlab-org/gitlab',
   shape = 'circle',
@@ -23,6 +26,7 @@ const generateImageProps = ({
 });
 
 export const Default = (args, { argTypes }) => ({
+  components,
   props: Object.keys(argTypes),
   template: `
     <gl-avatar-link target="blank" :href="href">
@@ -33,6 +37,7 @@ export const Default = (args, { argTypes }) => ({
 Default.args = { ...generateDefaultProps(), ...generateImageProps() };
 
 export const WithLabeledAvatar = (args, { argTypes }) => ({
+  components: { GlAvatarLink, GlAvatarLabeled },
   props: Object.keys(argTypes),
   template: `
   <gl-avatar-link target="blank" :href="href">
@@ -47,6 +52,7 @@ WithLabeledAvatar.args = {
 };
 
 export const WithNoImageAvatar = (args, { argTypes }) => ({
+  components,
   props: Object.keys(argTypes),
   template: `
     <gl-avatar-link target="blank" :href="href">
@@ -58,6 +64,7 @@ WithNoImageAvatar.args = { ...generateDefaultProps({}), ...generateLabelsProps({
 
 export default {
   title: 'base/avatar/avatar-link',
+  component: GlAvatarLink,
   parameters: {
     knobs: { disable: true },
     docs: {

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

@@ -1,4 +1,4 @@
-import { GlAvatarsInline, GlAvatar, GlAvatarLink, GlTooltipDirective } from '../../../../index';
+import { GlAvatarsInline, GlAvatar, GlAvatarLink, GlTooltipDirective } from '../../../index';
 import { avatarsInlineSizeOptions } from '../../../utils/constants';
 import readme from './avatars_inline.md';
 

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

@@ -1,5 +1,5 @@
 import iconSpriteInfo from '@gitlab/svgs/dist/icons.json';
-import { GlBadge } from '../../../../index';
+import { GlBadge } from '../../../index';
 import { badgeSizeOptions, badgeVariantOptions } from '../../../utils/constants';
 import readme from './badge.md';
 
@@ -36,23 +36,128 @@ const Template = (args, { argTypes }) => ({
 
 export const Default = Template.bind({});
 Default.args = generateProps();
+Default.parameters = {
+  storyshots: { disable: true },
+};
 
-export const ActionableWarning = Template.bind({});
-ActionableWarning.args = generateProps({
+export const Variants = (args, { argTypes }) => ({
+  components: { GlBadge },
+  props: Object.keys(argTypes),
+  template: `
+    <div>
+      <gl-badge
+        v-for="variant in $options.badgeVariantOptions"
+        :key="variant"
+        :href="href"
+        :variant="variant"
+        :size="size"
+        :icon="icon"
+        class="gl-mr-3"
+      >{{ variant }}</gl-badge>
+    </div>
+  `,
+  badgeVariantOptions,
+});
+Variants.args = generateProps({
+  variant: badgeVariantOptions.warning,
+});
+Variants.argTypes = {
+  content: {
+    control: { disable: true },
+  },
+  variant: {
+    control: { disable: true },
+  },
+};
+
+export const Actionable = (args, { argTypes }) => ({
+  components: { GlBadge },
+  props: Object.keys(argTypes),
+  template: `
+    <div>
+      <gl-badge
+        v-for="variant in $options.badgeVariantOptions"
+        :key="variant"
+        :href="href"
+        :variant="variant"
+        :size="size"
+        :icon="icon"
+        class="gl-mr-3"
+      >{{ variant }}</gl-badge>
+    </div>
+  `,
+  badgeVariantOptions,
+});
+Actionable.args = generateProps({
   href: '#foo',
   variant: badgeVariantOptions.warning,
 });
+Actionable.parameters = {
+  storyshots: { disable: true },
+};
+Actionable.argTypes = {
+  content: {
+    control: { disable: true },
+  },
+  variant: {
+    control: { disable: true },
+  },
+};
 
-export const LargeDanger = Template.bind({});
-LargeDanger.args = generateProps({
-  size: badgeSizeOptions.lg,
+export const Sizes = (args, { argTypes }) => ({
+  components: { GlBadge },
+  props: Object.keys(argTypes),
+  template: `
+    <div>
+      <gl-badge
+        v-for="size in $options.badgeSizeOptions"
+        :key="size"
+        :href="href"
+        :variant="variant"
+        :size="size"
+        :icon="icon"
+        class="gl-mr-3"
+      >{{ size }}</gl-badge>
+    </div>
+  `,
+  badgeSizeOptions,
+});
+Sizes.args = generateProps({
   variant: badgeVariantOptions.danger,
 });
+Sizes.argTypes = {
+  content: {
+    control: { disable: true },
+  },
+  size: {
+    control: { disable: true },
+  },
+};
 
-export const BadgeIcon = Template.bind({});
+export const BadgeIcon = (args, { argTypes }) => ({
+  components: { GlBadge },
+  props: Object.keys(argTypes),
+  template: `
+    <div>
+      <gl-badge
+        :href="href"
+        :variant="variant"
+        :size="size"
+        :icon="icon"
+      >{{ content }}</gl-badge>
+      <gl-badge
+        :href="href"
+        :variant="variant"
+        :size="size"
+        :icon="icon"
+      />
+    </div>
+  `,
+});
 BadgeIcon.args = generateProps({
   variant: badgeVariantOptions.success,
   icon: 'calendar',
+  content: 'Badge icon',
 });
 
 export default {
@@ -68,21 +173,21 @@ export default {
   },
   argTypes: {
     variant: {
+      options: Object.keys(badgeVariantOptions),
       control: {
         type: 'select',
-        options: badgeVariantOptions,
       },
     },
     size: {
+      options: Object.keys(badgeSizeOptions),
       control: {
         type: 'select',
-        options: badgeSizeOptions,
       },
     },
     icon: {
+      options: ['', ...iconSpriteInfo.icons],
       control: {
         type: 'select',
-        options: ['', ...iconSpriteInfo.icons],
       },
     },
   },

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

@@ -1,6 +1,6 @@
 import clusterPopoverSvg from '@gitlab/svgs/dist/illustrations/cluster_popover.svg';
 import serviceDeskCalloutSvg from '@gitlab/svgs/dist/illustrations/service_desk_callout.svg';
-import { GlBanner, GlButton } from '../../../../index';
+import { GlBanner, GlButton } from '../../../index';
 import { bannerVariants } from '../../../utils/constants';
 import readme from './banner.md';
 

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

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

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

@@ -1,5 +1,5 @@
 import iconSpriteInfo from '@gitlab/svgs/dist/icons.json';
-import { GlBroadcastMessage } from '../../../../index';
+import { GlBroadcastMessage } from '../../../index';
 import { colorThemes } from '../../../utils/constants';
 import readme from './broadcast_message.md';
 
@@ -29,7 +29,7 @@ const generateProps = ({
 });
 
 const Template = (args, { argTypes }) => ({
-  component: {
+  components: {
     GlBroadcastMessage,
   },
   props: Object.keys(argTypes),
@@ -39,7 +39,7 @@ export const Default = Template.bind({});
 Default.args = generateProps();
 
 const StackedStory = (args, { argTypes }) => ({
-  component: {
+  components: {
     GlBroadcastMessage,
   },
   props: Object.keys(argTypes),

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

@@ -1,4 +1,4 @@
-import { GlButton } from '../../../../index';
+import { GlButton, GlButtonGroup, GlBadge, GlDropdown, GlDropdownItem } from '../../../index';
 import {
   buttonCategoryOptions,
   buttonVariantOptions,
@@ -111,7 +111,7 @@ IconButton.args = generateProps({
 
 export const DropdownButton = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
-  components,
+  components: { GlDropdown, GlDropdownItem },
   template: wrapDropdownButton(`
       <gl-dropdown
         text="Some dropdown"
@@ -129,7 +129,7 @@ DropdownButton.args = generateProps();
 
 export const DropdownIconButton = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
-  components,
+  components: { GlDropdown, GlDropdownItem },
   template: wrapDropdownButton(`
       <gl-dropdown
         icon="download"
@@ -149,7 +149,7 @@ DropdownIconButton.args = generateProps();
 
 export const DropdownIconTextButton = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
-  components,
+  components: { GlDropdown, GlDropdownItem },
   template: wrapDropdownButton(`
       <gl-dropdown
         icon="notifications"
@@ -168,7 +168,7 @@ DropdownIconTextButton.args = generateProps();
 
 export const DropdownIconOnlyButton = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
-  components,
+  components: { GlDropdown, GlDropdownItem },
   template: wrapDropdownButton(`
       <gl-dropdown
         icon="ellipsis_v"
@@ -191,7 +191,7 @@ DropdownIconOnlyButton.args = generateProps({
 
 export const DropdownSplitButton = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
-  components,
+  components: { GlDropdown, GlDropdownItem },
   template: wrapDropdownButton(`
       <gl-dropdown
         split
@@ -210,7 +210,7 @@ DropdownSplitButton.args = generateProps({ category: 'primary', variant: 'confir
 
 export const DropdownIconSplitButton = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
-  components,
+  components: { GlDropdown, GlDropdownItem },
   template: wrapDropdownButton(`
       <gl-dropdown
         split
@@ -230,7 +230,7 @@ DropdownIconSplitButton.args = generateProps({ category: 'secondary', variant: '
 
 export const DropdownLoadingButton = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
-  components,
+  components: { GlDropdown, GlDropdownItem },
   template: `
       <gl-dropdown text="Some dropdown" :category="category" :loading="true">
         <gl-dropdown-item>Dropdown item</gl-dropdown-item>
@@ -333,7 +333,7 @@ BorderlessTertiary.args = generateProps({ category: 'tertiary' });
 
 export const LabelButton = (args, { argTypes = {} }) => ({
   props: Object.keys(argTypes),
-  components,
+  components: { GlButton, GlButtonGroup },
   template: `
       <div>
         <gl-button label>Label</gl-button>
@@ -451,7 +451,7 @@ Sizes.parameters = { controls: { disable: true } };
 
 export const Badges = (args, { argTypes = {} }) => ({
   props: Object.keys(argTypes),
-  components,
+  components: { GlButton, GlBadge },
   variants: Object.keys(badgeForButtonOptions),
   categories: buttonCategoryOptions,
   style: {
@@ -483,7 +483,7 @@ Badges.parameters = { controls: { disable: true } };
 
 export const BadgeWithSROnlyText = (args, { argTypes = {} }) => ({
   props: Object.keys(argTypes),
-  components,
+  components: { GlButton, GlBadge },
   template: `    
       <gl-button variant="confirm" buttonTextClasses="gl-display-flex gl-align-items-center">
           Submit review

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

@@ -1,4 +1,4 @@
-import { GlButton, GlButtonGroup, GlDropdown, GlDropdownItem } from '../../../../index';
+import { GlButton, GlButtonGroup, GlDropdown, GlDropdownItem } from '../../../index';
 import readme from './button_group.md';
 
 const generateProps = ({ vertical = false } = {}) => ({ vertical });

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

@@ -1,4 +1,4 @@
-import { GlButton, GlCard, GlCollapse } from '../../../../index';
+import { GlButton, GlCard, GlCollapse } from '../../../index';
 import readme from './collapse.md';
 
 const generateProps = ({ visible = false } = {}) => ({ visible });

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

@@ -1,6 +1,6 @@
 import { withKnobs } from '@storybook/addon-knobs';
 import { documentedStoriesOf } from '../../../../documentation/documented_stories';
-import { GlButton } from '../../../../index';
+import { GlButton } from '../../../index';
 import readme from './drawer.md';
 import GlDrawer from './drawer.vue';
 

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

@@ -9,7 +9,9 @@ import {
   GlDropdownItem,
   GlDropdownText,
   GlDropdownForm,
-} from '../../../../index';
+  GlButton,
+  GlSearchBoxByType,
+} from '../../../index';
 import {
   buttonCategoryOptions,
   buttonSizeOptions,
@@ -213,7 +215,7 @@ documentedStoriesOf('base/dropdown', readme)
   }))
   .add('with form', () => ({
     props: generateProps({ text: 'Some dropdown' }),
-    components,
+    components: { ...components, GlButton },
     template: wrap`
       <gl-dropdown-form class="gl-px-4">
         <gl-button>One</gl-button>
@@ -242,7 +244,7 @@ documentedStoriesOf('base/dropdown', readme)
   }))
   .add('with header and footer', () => ({
     props: generateProps({ text: 'Some dropdown', headerText: 'Header', hideHeaderBorder: true }),
-    components,
+    components: { ...components, GlSearchBoxByType },
     template: wrap`
       <template #header>
         <gl-search-box-by-type />

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

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

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

@@ -1,6 +1,6 @@
 import { withKnobs } from '@storybook/addon-knobs';
 import { documentedStoriesOf } from '../../../../documentation/documented_stories';
-import { GlDropdownForm, GlButton } from '../../../../index';
+import { GlDropdownForm, GlButton } from '../../../index';
 import readme from './dropdown_form.md';
 
 const components = {

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

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

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

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

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

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