@gitlab/ui 35.0.0 → 35.1.0

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,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "35.0.0",
+  "version": "35.1.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -85,8 +85,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 +129,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 +147,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/components/base/modal/modal.scss

@@ -53,7 +53,8 @@ body.modal-open {
 
   .modal-header {
     @include gl-bg-white;
-    @include gl-pr-3;
+    @include gl-pb-3;
+    @include gl-border-none;
 
     .modal-title {
       @include gl-font-lg;
@@ -68,6 +69,7 @@ body.modal-open {
     @include gl-bg-white;
     @include gl-relative;
     @include gl-p-5;
+    @include gl-py-3;
     @include gl-text-left;
     @include gl-white-space-normal;
     @include gl-font-base;
@@ -78,7 +80,8 @@ body.modal-open {
     @include gl-display-flex;
     @include gl-flex-direction-row;
     @include gl-p-5;
-    @include gl-bg-gray-10;
+    @include gl-pt-3;
+    @include gl-border-none;
 
     .btn {
       @include gl-m-0;

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

@@ -1,9 +1,5 @@
-import examples from './examples';
 import * as description from './nav.md';
 
 export default {
   description,
-  examples,
-  bootstrapComponent: 'b-nav',
-  propsInfo: {},
 };

package/src/components/base/nav/nav.md

@@ -1,8 +1,11 @@
-# Nav
+The navigation component is built with flexbox and provides a strong foundation for building all
+types of navigation components.
 
-<!-- STORY -->
+## `GlNavItem`
 
-## Usage
+Use `GlNavItem` to add actionable links (or router links) to your nav. `GlNavItem` wraps [`BNavItem`](https://bootstrap-vue.org/docs/components/navbar#b-nav-item).
 
-The navigation component is built with flexbox and provides a strong foundation for building all
-types of navigation components.
+## `GlNavItemDropdown`
+
+Use `GlNavItemDropdown` to place dropdown items within your nav.
+`GlNavItemDropdown` wraps [`BNavItemDropdown`](https://bootstrap-vue.org/docs/components/navbar#b-nav-item-dropdown).

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

@@ -1,23 +1,60 @@
-import { withKnobs } from '@storybook/addon-knobs';
-import { documentedStoriesOf } from '../../../../documentation/documented_stories';
-import { GlNav, GlNavItem } from '../../../../index';
-import readme from './nav.md';
-
-const components = {
+import {
   GlNav,
   GlNavItem,
-};
+  GlNavItemDropdown,
+  GlDropdownItem,
+  GlDropdownDivider,
+  GlIcon,
+} from '../../../../index';
+import readme from './nav.md';
 
-documentedStoriesOf('base/nav', readme)
-  .addDecorator(withKnobs)
-  .add('default', () => ({
-    components,
-    template: `
+export const Default = (_args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: {
+    GlNav,
+    GlNavItem,
+    GlNavItemDropdown,
+    GlDropdownItem,
+    GlDropdownDivider,
+    GlIcon,
+  },
+  template: `
+    <div style="height: 150px">
       <gl-nav>
         <gl-nav-item active>Active</gl-nav-item>
         <gl-nav-item>Link</gl-nav-item>
-        <gl-nav-item>Another Link</gl-nav-item>
+        <gl-nav-item-dropdown text="Dropdown">
+          <gl-dropdown-item>Above divider</gl-dropdown-item>
+          <gl-dropdown-divider />
+          <gl-dropdown-item>Below divider</gl-dropdown-item>
+        </gl-nav-item-dropdown>
+        <gl-nav-item-dropdown text="Dropdown">
+          <template #button-content>
+            <gl-icon name="question" />
+            <gl-icon name="angle-down" />
+          </template>
+          <gl-dropdown-item>One</gl-dropdown-item>
+          <gl-dropdown-item>Two</gl-dropdown-item>
+        </gl-nav-item-dropdown>
         <gl-nav-item disabled>Disabled</gl-nav-item>
       </gl-nav>
-    `,
-  }));
+    </div>`,
+});
+
+export default {
+  title: 'base/nav',
+  component: GlNav,
+  subcomponents: {
+    GlNavItem,
+    GlNavItemDropdown,
+  },
+  parameters: {
+    bootstrapComponent: 'b-nav',
+    knobs: { disable: true },
+    docs: {
+      description: {
+        component: readme,
+      },
+    },
+  },
+};

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

@@ -1,19 +1,5 @@
-import examples from './examples';
 import description from './truncate.md';
 
 export default {
   description,
-  examples,
-  propsInfo: {
-    text: {
-      additionalInfo: 'Text to be ellipsized',
-    },
-    position: {
-      additionalInfo: 'Ellipsis position',
-      enum: 'truncateOptions',
-    },
-    withTooltip: {
-      additionalInfo: 'Display the full text in a tooltip only if it is being truncated',
-    },
-  },
 };

package/src/components/utilities/truncate/truncate.md

@@ -1,9 +1,5 @@
-# Truncate
-
 The `GlTruncate` component lets you truncate the long texts with ellipsis.
 
-<!-- STORY -->
-
 > **Tip:** Try resizing the side panel for truncation.
 
 ## Usage

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

@@ -1,40 +1,51 @@
-import { withKnobs, text, select, boolean } from '@storybook/addon-knobs';
-import { documentedStoriesOf } from '../../../../documentation/documented_stories';
 import { GlTruncate } from '../../../../index';
 import { POSITION } from './constants';
 import readme from './truncate.md';
 
-const components = {
-  GlTruncate,
-};
-
 const template = '<gl-truncate :text="text" :position="position" :with-tooltip="withTooltip" />';
 
-function generateProps({
-  longText = 'src/thisIs/AVeryLongFilePath/that/needs/to/be/smartly/truncated/from/the/middle/so/we/dont/lose/important/information/here.vue',
+const generateProps = ({
+  text = 'src/thisIs/AVeryLongFilePath/that/needs/to/be/smartly/truncated/from/the/middle/so/we/dont/lose/important/information/here.vue',
   position = 'middle',
   withTooltip = false,
-} = {}) {
-  return {
+} = {}) => ({
+  text,
+  position,
+  withTooltip,
+});
+
+const Template = (args, { argTypes }) => ({
+  components: {
+    GlTruncate,
+  },
+  props: Object.keys(argTypes),
+  template,
+});
+export const Default = Template.bind({});
+Default.args = generateProps();
+
+export default {
+  title: 'utilities/truncate',
+  component: GlTruncate,
+  parameters: {
+    knobs: { disable: true },
+    storyshots: { disable: true },
+    docs: {
+      description: {
+        component: readme,
+      },
+    },
+  },
+  argTypes: {
     text: {
-      type: String,
-      default: text('text', longText),
+      control: 'text',
     },
     position: {
-      type: String,
-      default: select('position', Object.values(POSITION), position),
+      options: Object.values(POSITION),
+      control: 'select',
     },
     withTooltip: {
-      default: boolean('withTooltip', withTooltip),
+      control: 'boolean',
     },
-  };
-}
-
-documentedStoriesOf('utilities/truncate', readme)
-  .addParameters({ storyshots: false })
-  .addDecorator(withKnobs)
-  .add('default', () => ({
-    props: generateProps(),
-    components,
-    template,
-  }));
+  },
+};

package/src/components/utilities/truncate/truncate.vue

@@ -10,16 +10,25 @@ export default {
     GlResizeObserver: GlResizeObserverDirective,
   },
   props: {
+    /**
+     * Text to be ellipsized
+     */
     text: {
       type: String,
       required: true,
     },
+    /**
+     * Ellipsis position
+     */
     position: {
       type: String,
       required: false,
       default: POSITION.END,
       validator: (value) => Object.values(POSITION).includes(value),
     },
+    /**
+     * Display the full text in a tooltip only if it is being truncated
+     */
     withTooltip: {
       type: Boolean,
       required: false,

package/dist/components/base/nav/examples/index.js

@@ -1,13 +0,0 @@
-import BasicExample from './nav.basic.example';
-
-var index = [{
-  name: 'Basic',
-  items: [{
-    id: 'nav-basic',
-    name: 'Basic',
-    description: 'Basic Nav',
-    component: BasicExample
-  }]
-}];
-
-export default index;

package/dist/components/base/nav/examples/nav.basic.example.js

@@ -1,38 +0,0 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-/* script */
-
-/* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-nav',[_c('gl-nav-item',{attrs:{"active":""}},[_vm._v("Active")]),_vm._v(" "),_c('gl-nav-item',[_vm._v("Link")]),_vm._v(" "),_c('gl-nav-item',[_vm._v("Another Link")]),_vm._v(" "),_c('gl-nav-item',{attrs:{"disabled":""}},[_vm._v("Disabled")])],1)};
-var __vue_staticRenderFns__ = [];
-
-  /* style */
-  const __vue_inject_styles__ = undefined;
-  /* scoped */
-  const __vue_scope_id__ = undefined;
-  /* module identifier */
-  const __vue_module_identifier__ = undefined;
-  /* functional template */
-  const __vue_is_functional_template__ = false;
-  /* style inject */
-  
-  /* style inject SSR */
-  
-  /* style inject shadow dom */
-  
-
-  
-  const __vue_component__ = __vue_normalize__(
-    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
-    __vue_inject_styles__,
-    {},
-    __vue_scope_id__,
-    __vue_is_functional_template__,
-    __vue_module_identifier__,
-    false,
-    undefined,
-    undefined,
-    undefined
-  );
-
-export default __vue_component__;

package/dist/components/base/nav/nav_item.documentation.js

@@ -1,13 +0,0 @@
-var nav_item = "# Nav Item\n\n<!-- STORY -->\n\n## Usage\n\nThe navigation item component is meant to be used for for actionable links (or router-links).\n";
-
-var description = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  'default': nav_item
-});
-
-var nav_item_documentation = {
-  description,
-  bootstrapComponent: 'b-nav-item'
-};
-
-export default nav_item_documentation;

package/dist/components/base/nav/nav_item_dropdown.documentation.js

@@ -1,14 +0,0 @@
-var nav_item_dropdown = "# Nav Item Dropdown\n\n<!-- STORY -->\n\n## Usage\n\nUse `<gl-nav-item-dropdown>` to place dropdown items within your nav.\n";
-
-var description = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  'default': nav_item_dropdown
-});
-
-var nav_item_dropdown_documentation = {
-  followsDesignSystem: false,
-  description,
-  bootstrapComponent: 'b-nav-item-dropdown'
-};
-
-export default nav_item_dropdown_documentation;

package/dist/components/utilities/truncate/examples/index.js

@@ -1,13 +0,0 @@
-import TruncateBasicExample from './truncate.basic.example';
-
-var index = [{
-  name: 'Basic',
-  items: [{
-    id: 'truncate',
-    name: 'Basic',
-    description: 'Basic truncation',
-    component: TruncateBasicExample
-  }]
-}];
-
-export default index;

package/dist/components/utilities/truncate/examples/truncate.basic.example.js

@@ -1,38 +0,0 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-/* script */
-
-/* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-truncate',{attrs:{"text":"ee/app/assets/javascripts/vue_shared/security_reports/components/utils/truncate/smart-truncate/src/index.js"}})};
-var __vue_staticRenderFns__ = [];
-
-  /* style */
-  const __vue_inject_styles__ = undefined;
-  /* scoped */
-  const __vue_scope_id__ = undefined;
-  /* module identifier */
-  const __vue_module_identifier__ = undefined;
-  /* functional template */
-  const __vue_is_functional_template__ = false;
-  /* style inject */
-  
-  /* style inject SSR */
-  
-  /* style inject shadow dom */
-  
-
-  
-  const __vue_component__ = __vue_normalize__(
-    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
-    __vue_inject_styles__,
-    {},
-    __vue_scope_id__,
-    __vue_is_functional_template__,
-    __vue_module_identifier__,
-    false,
-    undefined,
-    undefined,
-    undefined
-  );
-
-export default __vue_component__;

package/src/components/base/nav/examples/index.js

@@ -1,15 +0,0 @@
-import BasicExample from './nav.basic.example.vue';
-
-export default [
-  {
-    name: 'Basic',
-    items: [
-      {
-        id: 'nav-basic',
-        name: 'Basic',
-        description: 'Basic Nav',
-        component: BasicExample,
-      },
-    ],
-  },
-];

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

@@ -1,8 +0,0 @@
-<template>
-  <gl-nav>
-    <gl-nav-item active>Active</gl-nav-item>
-    <gl-nav-item>Link</gl-nav-item>
-    <gl-nav-item>Another Link</gl-nav-item>
-    <gl-nav-item disabled>Disabled</gl-nav-item>
-  </gl-nav>
-</template>

package/src/components/base/nav/nav_item.documentation.js

@@ -1,6 +0,0 @@
-import * as description from './nav_item.md';
-
-export default {
-  description,
-  bootstrapComponent: 'b-nav-item',
-};

package/src/components/base/nav/nav_item.md

@@ -1,7 +0,0 @@
-# Nav Item
-
-<!-- STORY -->
-
-## Usage
-
-The navigation item component is meant to be used for for actionable links (or router-links).

package/src/components/base/nav/nav_item.stories.js

@@ -1,23 +0,0 @@
-import { withKnobs } from '@storybook/addon-knobs';
-import { documentedStoriesOf } from '../../../../documentation/documented_stories';
-import { GlNav, GlNavItem } from '../../../../index';
-import readme from './nav_item.md';
-
-const components = {
-  GlNav,
-  GlNavItem,
-};
-
-documentedStoriesOf('base/nav/nav-item', readme)
-  .addDecorator(withKnobs)
-  .add('default', () => ({
-    components,
-    template: `
-      <gl-nav>
-        <gl-nav-item active>Active</gl-nav-item>
-        <gl-nav-item>Link</gl-nav-item>
-        <gl-nav-item>Another Link</gl-nav-item>
-        <gl-nav-item disabled>Disabled</gl-nav-item>
-      </gl-nav>
-    `,
-  }));

package/src/components/base/nav/nav_item_dropdown.documentation.js

@@ -1,7 +0,0 @@
-import * as description from './nav_item_dropdown.md';
-
-export default {
-  followsDesignSystem: false,
-  description,
-  bootstrapComponent: 'b-nav-item-dropdown',
-};

package/src/components/base/nav/nav_item_dropdown.md

@@ -1,7 +0,0 @@
-# Nav Item Dropdown
-
-<!-- STORY -->
-
-## Usage
-
-Use `<gl-nav-item-dropdown>` to place dropdown items within your nav.

package/src/components/base/nav/nav_item_dropdown.stories.js

@@ -1,52 +0,0 @@
-import { withKnobs } from '@storybook/addon-knobs';
-import { documentedStoriesOf } from '../../../../documentation/documented_stories';
-import { GlNav, GlNavItemDropdown, GlDropdownItem, GlDropdownDivider } from '../../../../index';
-import readme from './nav_item_dropdown.md';
-
-const components = {
-  GlNav,
-  GlNavItemDropdown,
-  GlDropdownItem,
-};
-
-documentedStoriesOf('base/nav/nav-item-dropdown', readme)
-  .addDecorator(withKnobs)
-  .add('default', () => ({
-    components,
-    template: `
-      <gl-nav>
-        <gl-nav-item-dropdown text="Dropdown">
-          <gl-dropdown-item>One</gl-dropdown-item>
-          <gl-dropdown-item>Two</gl-dropdown-item>
-          <gl-dropdown-item>Three</gl-dropdown-item>
-        </gl-nav-item-dropdown>
-      </gl-nav>
-    `,
-  }))
-  .add('with divider', () => ({
-    components: { ...components, GlDropdownDivider },
-    template: `
-      <gl-nav>
-        <gl-nav-item-dropdown text="Dropdown">
-          <gl-dropdown-item>Above divider</gl-dropdown-item>
-          <gl-dropdown-divider />
-          <gl-dropdown-item>Below divider</gl-dropdown-item>
-        </gl-nav-item-dropdown>
-      </gl-nav>
-    `,
-  }))
-  .add('custom button', () => ({
-    components,
-    template: `
-      <gl-nav>
-        <gl-nav-item-dropdown text="Dropdown">
-          <template #button-content>
-            <gl-icon name="question" />
-            <gl-icon name="angle-down" />
-          </template>
-          <gl-dropdown-item>One</gl-dropdown-item>
-          <gl-dropdown-item>Two</gl-dropdown-item>
-        </gl-nav-item-dropdown>
-      </gl-nav>
-    `,
-  }));

package/src/components/utilities/truncate/examples/index.js

@@ -1,15 +0,0 @@
-import TruncateBasicExample from './truncate.basic.example.vue';
-
-export default [
-  {
-    name: 'Basic',
-    items: [
-      {
-        id: 'truncate',
-        name: 'Basic',
-        description: 'Basic truncation',
-        component: TruncateBasicExample,
-      },
-    ],
-  },
-];

package/src/components/utilities/truncate/examples/truncate.basic.example.vue

@@ -1,5 +0,0 @@
-<template>
-  <gl-truncate
-    text="ee/app/assets/javascripts/vue_shared/security_reports/components/utils/truncate/smart-truncate/src/index.js"
-  />
-</template>