@gitlab/ui 36.4.0 → 36.7.0

package/documentation/documented_stories.js

@@ -128,6 +128,10 @@ export const setupStorybookReadme = () =>
         'GlNavItemDropdown',
         'GlPopover',
         'GlSingleStat',
+        'GlDrawer',
+        'GlHeatmap',
+        'GlFormRadioGroup',
+        'GlChartSeriesLabel',
       ],
       components: {
         GlComponentDocumentation,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "36.4.0",
+  "version": "36.7.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -76,7 +76,8 @@
     "vue": "^2.6.10"
   },
   "resolutions": {
-    "chokidar": "^3.5.2"
+    "chokidar": "^3.5.2",
+    "sane": "^5.0.1"
   },
   "devDependencies": {
     "@arkweid/lefthook": "^0.7.6",
@@ -88,15 +89,15 @@
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@rollup/plugin-replace": "^2.3.2",
-    "@storybook/addon-a11y": "6.4.15",
-    "@storybook/addon-docs": "6.4.15",
-    "@storybook/addon-essentials": "6.4.15",
+    "@storybook/addon-a11y": "6.4.19",
+    "@storybook/addon-docs": "6.4.19",
+    "@storybook/addon-essentials": "6.4.19",
     "@storybook/addon-knobs": "6.4.0",
-    "@storybook/addon-storyshots": "6.4.15",
-    "@storybook/addon-storyshots-puppeteer": "6.4.15",
-    "@storybook/addon-viewport": "6.4.15",
-    "@storybook/theming": "6.4.15",
-    "@storybook/vue": "6.4.15",
+    "@storybook/addon-storyshots": "6.4.19",
+    "@storybook/addon-storyshots-puppeteer": "6.4.19",
+    "@storybook/addon-viewport": "6.4.19",
+    "@storybook/theming": "6.4.19",
+    "@storybook/vue": "6.4.19",
     "@vue/test-utils": "1.3.0",
     "autoprefixer": "^9.7.6",
     "babel-jest": "^26.6.3",
@@ -122,7 +123,6 @@
     "mockdate": "^2.0.5",
     "node-sass": "^4.14.1",
     "node-sass-magic-importer": "^5.3.2",
-    "nodemon": "^1.11.0",
     "npm-run-all": "^4.1.5",
     "pikaday": "^1.8.0",
     "plop": "^2.5.4",

package/scss_to_js/scss_variables.js

@@ -276,6 +276,7 @@ export const glFontSizeMonospaceSm = '0.6875rem'
 export const glMonospaceFont = 'Menlo, DejaVu Sans Mono, Liberation Mono, Consolas, Ubuntu Mono, Courier New, andale mono, lucida console, monospace'
 export const glRegularFont = '-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Noto Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji'
 export const glFonts = '("monospace": "Menlo", "DejaVu Sans Mono", "Liberation Mono", "Consolas", "Ubuntu Mono", "Courier New", "andale mono", "lucida console", monospace, "regular": -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", Ubuntu, Cantarell, "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji")'
+export const borderColor = '#dbdbdb'
 export const glBorderSize1 = '1px'
 export const glBorderSize2 = '2px'
 export const glBorderSize3 = '3px'

package/scss_to_js/scss_variables.json

@@ -1441,6 +1441,11 @@
       ],
       "compiledValue": "(\"monospace\": \"Menlo\", \"DejaVu Sans Mono\", \"Liberation Mono\", \"Consolas\", \"Ubuntu Mono\", \"Courier New\", \"andale mono\", \"lucida console\", monospace, \"regular\": -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Noto Sans\", Ubuntu, Cantarell, \"Helvetica Neue\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\")"
     },
+    {
+      "name": "$border-color",
+      "value": "$gray-100",
+      "compiledValue": "#dbdbdb"
+    },
     {
       "name": "$gl-border-size-1",
       "value": "1px",

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

@@ -16,19 +16,19 @@ const template = `
 
 const defaultItems = [
   {
-    text: 'First Item',
+    text: 'First item',
     href: '#',
   },
   {
-    text: 'Second Item',
+    text: 'Second item',
     href: '#',
   },
   {
-    text: 'Third Item',
+    text: 'Third item',
     href: '#',
   },
   {
-    text: 'Fourth Item',
+    text: 'Fourth item',
     to: { name: 'fourth-item' },
   },
 ];
@@ -63,19 +63,19 @@ export default {
 
 const extraItems = [
   {
-    text: 'Fifth Item',
+    text: 'Fifth item',
     href: '#',
   },
   {
-    text: 'Sixth Item',
+    text: 'Sixth item',
     href: '#',
   },
   {
-    text: 'Seventh Item',
+    text: 'Seventh item',
     href: '#',
   },
   {
-    text: 'Eighth Item',
+    text: 'Eighth item',
     href: '#',
   },
 ];

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

@@ -1,8 +1,6 @@
 import description from './drawer.md';
-import examples from './examples';
 
 export default {
   followsDesignSystem: false,
   description,
-  examples,
 };

package/src/components/base/drawer/drawer.md

@@ -1,9 +1,3 @@
-# Drawer
-
-<!-- STORY -->
-
-## Usage
-
 The drawer is used to show more information about a certain resource in the UI and potentially
 handle actions on the information.
 

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

@@ -1,13 +1,7 @@
-import { withKnobs } from '@storybook/addon-knobs';
-import { documentedStoriesOf } from '../../../../documentation/documented_stories';
-import { GlButton } from '../../../index';
+import { GlDrawer, GlButton } from '../../../index';
 import readme from './drawer.md';
-import GlDrawer from './drawer.vue';
 
-const components = {
-  GlDrawer,
-  GlButton,
-};
+const components = { GlDrawer, GlButton };
 
 const drawerContent = [
   'One',
@@ -31,7 +25,8 @@ const drawerContent = [
   )
   .join('');
 
-const getStory = (template) => ({
+export const Default = (_args, { viewMode }) => ({
+  components,
   methods: {
     toggle() {
       this.open = !this.open;
@@ -42,45 +37,68 @@ const getStory = (template) => ({
   },
   data() {
     return {
-      open: true,
+      open: viewMode !== 'docs',
     };
   },
-  components,
-  template,
-});
-
-documentedStoriesOf('base/drawer', readme)
-  .addDecorator(withKnobs)
-  .add('default', () =>
-    getStory(`
+  template: `
     <div>
       <gl-button @click="toggle">Toggle Drawer</gl-button>
       <gl-drawer :open="open" @close="close">
         <template #title>List Settings</template>
         ${drawerContent}
       </gl-drawer>
-    </div>`)
-  )
-  .add('with actions', () =>
-    getStory(`
+    </div>`,
+});
+
+export const WithActions = (_args, { viewMode }) => ({
+  components,
+  methods: {
+    toggle() {
+      this.open = !this.open;
+    },
+    close() {
+      this.open = false;
+    },
+  },
+  data() {
+    return {
+      open: viewMode !== 'docs',
+    };
+  },
+  template: `
     <div>
       <gl-button @click="toggle">Toggle Drawer</gl-button>
       <gl-drawer :open="open" @close="close">
-        <template #title>
+          <template #title>
           <h3>custom-network-policy</h3>
         </template>
         <template #header>
-          <div class="gl-mt-5">
-            <gl-button variant="confirm">Save</gl-button>
-            <gl-button class="gl-ml-3" @click="toggle">Cancel</gl-button>
-          </div>
+            <div class="gl-mt-5">
+              <gl-button variant="confirm">Save</gl-button>
+              <gl-button class="gl-ml-3" @click="toggle">Cancel</gl-button>
+            </div>
         </template>
-        ${drawerContent}
+          ${drawerContent}
       </gl-drawer>
-    </div>`)
-  )
-  .add('sidebar variant', () =>
-    getStory(`
+    </div>`,
+});
+
+export const SidebarVariant = (_args, { viewMode }) => ({
+  components,
+  methods: {
+    toggle() {
+      this.open = !this.open;
+    },
+    close() {
+      this.open = false;
+    },
+  },
+  data() {
+    return {
+      open: viewMode !== 'docs',
+    };
+  },
+  template: `
     <div>
       <gl-button @click="toggle">Toggle Drawer</gl-button>
       <gl-drawer :open="open" @close="close" variant="sidebar">
@@ -94,5 +112,19 @@ documentedStoriesOf('base/drawer', readme)
         </template>
         ${drawerContent}
       </gl-drawer>
-    </div>`)
-  );
+    </div>`,
+});
+
+export default {
+  title: 'base/drawer',
+  component: GlDrawer,
+  parameters: {
+    knobs: { disabled: true },
+    controls: { disable: true },
+    docs: {
+      description: {
+        component: readme,
+      },
+    },
+  },
+};

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

@@ -1,54 +1,6 @@
-import examples from './examples';
 import description from './form_radio_group.md';
 
 export default {
   description,
-  examples,
   followsDesignSystem: true,
-  bootstrapComponent: 'b-form-radio-group',
-  propsInfo: {
-    options: {
-      additionalInfo: 'Array of objects representing the radios to render',
-    },
-    valueField: {
-      additionalInfo: 'Field name in the options prop that should be used for the value',
-    },
-    textField: {
-      additionalInfo: 'Field name in the options prop that should be used for the text label',
-    },
-    htmlField: {
-      additionalInfo:
-        'Field name in the options prop that should be used for the html label instead of text field. Use with caution.',
-    },
-    disabledField: {
-      additionalInfo: 'Field name in the options prop that should be used for the disabled state',
-    },
-    checked: {
-      additionalInfo: 'The current value of the checked radio in the group',
-    },
-  },
-  events: [
-    {
-      event: 'input',
-      args: [{ arg: 'checked', description: 'current selected value of radio group' }],
-      description: 'Emitted when the selected value is changed',
-    },
-    {
-      event: 'change',
-      args: [{ arg: 'checked', description: 'current selected value of radio group' }],
-      description: 'Emitted when the selected value is changed due to user interaction',
-    },
-  ],
-  slots: [
-    {
-      name: 'first',
-      description:
-        'Slot for GlFormRadios that will appear before radios generated from options prop',
-    },
-    {
-      name: 'default',
-      description:
-        'Slot for GlFormRadios that will appear after radios generated from options prop',
-    },
-  ],
 };

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

@@ -1,5 +1,3 @@
-# GlFormRadioGroup
-
 The `GlFormRadioGroup` component provides an alternative and sometimes more
 compact way of setting up a group of `GlFormRadio` components.
 

package/src/components/base/form/form_radio_group/form_radio_group.stories.js

@@ -1,30 +1,16 @@
-import { withKnobs, object, text } from '@storybook/addon-knobs';
-import { documentedStoriesOf } from '../../../../../documentation/documented_stories';
-import { GlFormRadioGroup, GlFormRadio } from '../../../../index';
+import { GlFormRadioGroup } from '../../../../index';
 import readme from './form_radio_group.md';
 
-const components = {
-  GlFormRadioGroup,
-  GlFormRadio,
-};
-
 const defaultOptions = [
   { value: 'pizza', text: 'Pizza' },
   { value: 'tacos', text: 'Tacos' },
   { value: 'burger', text: 'Burger', disabled: true },
 ];
-
-function generateProps({ name = 'radio-group-name', options = defaultOptions } = {}) {
-  return {
-    name: {
-      type: String,
-      default: text('name', name),
-    },
-    options: {
-      default: object('options', options),
-    },
-  };
-}
+const data = () => ({ selected: 'slot-option' });
+const generateProps = ({ name = 'radio-group-name', options = defaultOptions } = {}) => ({
+  name,
+  options,
+});
 
 const template = `
   <div>
@@ -45,13 +31,48 @@ const template = `
     </gl-form-radio-group>
   </div>`;
 
-const data = () => ({ selected: 'slot-option' });
+const Template = (args, { argTypes }) => ({
+  components: {
+    GlFormRadioGroup,
+  },
+  props: Object.keys(argTypes),
+  template,
+  data,
+});
+export const Default = Template.bind({});
+Default.args = generateProps();
 
-documentedStoriesOf('base/form/form-radio-group', readme)
-  .addDecorator(withKnobs)
-  .add('default', () => ({
-    components,
-    props: generateProps(),
-    data,
-    template,
-  }));
+export default {
+  title: 'base/form/form-radio-group',
+  component: GlFormRadioGroup,
+  parameters: {
+    knobs: { disable: true },
+    bootstrapComponent: 'b-form-radio-group',
+    docs: {
+      description: {
+        component: readme,
+      },
+    },
+  },
+  argTypes: {
+    options: {
+      description: 'Array of objects representing the radios to render',
+    },
+    valueField: {
+      description: 'Field name in the options prop that should be used for the value',
+    },
+    textField: {
+      description: 'Field name in the options prop that should be used for the text label',
+    },
+    htmlField: {
+      description:
+        'Field name in the options prop that should be used for the html label instead of text field. Use with caution.',
+    },
+    disabledField: {
+      description: 'Field name in the options prop that should be used for the disabled state',
+    },
+    checked: {
+      description: 'The current value of the checked radio in the group',
+    },
+  },
+};

package/src/components/base/form/form_radio_group/form_radio_group.vue

@@ -17,6 +17,24 @@ export default {
   mixins: [formOptionsMixin],
   inheritAttrs: false,
   model,
+  methods: {
+    onInput(e) {
+      /**
+       * Emitted when the selected value is changed.
+       *
+       * @event input
+       */
+      this.$emit('input', e);
+    },
+    onChange(e) {
+      /**
+       * Emitted when the selected value is changed.
+       *
+       * @event change
+       */
+      this.$emit('change', e);
+    },
+  },
 };
 </script>
 <template>
@@ -25,9 +43,10 @@ export default {
     stacked
     v-bind="$attrs"
     v-on="$listeners"
-    @input="$emit('input', $event)"
-    @change="$emit('change', $event)"
+    @input="onInput"
+    @change="onChange"
   >
+    <!-- @slot Slot for GlFormRadios that will appear before radios generated from options prop -->
     <slot name="first"></slot>
     <gl-form-radio
       v-for="(option, idx) in formOptions"
@@ -38,6 +57,7 @@ export default {
       <span v-if="option.html" v-safe-html="option.html"></span>
       <span v-else>{{ option.text }}</span>
     </gl-form-radio>
+    <!-- @slot Slot for GlFormRadios that will appear after radios generated from options prop -->
     <slot></slot>
   </b-form-radio-group>
 </template>

package/src/components/base/paginated_list/__snapshots__/paginated_list.spec.js.snap

@@ -42,7 +42,7 @@ exports[`Paginated List Pagination renders 1 item on page 7 with page size of 2
     limits="[object Object]"
     nexttext="Next"
     perpage="2"
-    prevtext="Prev"
+    prevtext="Previous"
     totalitems="13"
     value="7"
   />
@@ -119,7 +119,7 @@ exports[`Paginated List Pagination renders 3 items on page 2 with default page s
     limits="[object Object]"
     nexttext="Next"
     perpage="10"
-    prevtext="Prev"
+    prevtext="Previous"
     totalitems="13"
     value="2"
   />
@@ -222,7 +222,7 @@ exports[`Paginated List Pagination renders 5 items on page 1 for a page size of
     limits="[object Object]"
     nexttext="Next"
     perpage="5"
-    prevtext="Prev"
+    prevtext="Previous"
     totalitems="13"
     value="1"
   />
@@ -390,7 +390,7 @@ exports[`Paginated List Pagination renders 10 items for a default page size of 1
     limits="[object Object]"
     nexttext="Next"
     perpage="10"
-    prevtext="Prev"
+    prevtext="Previous"
     totalitems="13"
     value="1"
   />
@@ -597,7 +597,7 @@ exports[`Paginated List Pagination renders 13 items for a default page size of 2
     limits="[object Object]"
     nexttext="Next"
     perpage="20"
-    prevtext="Prev"
+    prevtext="Previous"
     totalitems="13"
     value="1"
   />
@@ -717,7 +717,7 @@ exports[`Paginated List Search states renders the list filtered by search result
     limits="[object Object]"
     nexttext="Next"
     perpage="10"
-    prevtext="Prev"
+    prevtext="Previous"
     totalitems="2"
     value="1"
   />
@@ -837,7 +837,7 @@ exports[`Paginated List Searchless states renders the list with nested items, wh
     limits="[object Object]"
     nexttext="Next"
     perpage="10"
-    prevtext="Prev"
+    prevtext="Previous"
     totalitems="2"
     value="1"
   />
@@ -888,7 +888,7 @@ exports[`Paginated List props filter filters on default "id" key 1`] = `
     limits="[object Object]"
     nexttext="Next"
     perpage="10"
-    prevtext="Prev"
+    prevtext="Previous"
     totalitems="1"
     value="1"
   />
@@ -939,7 +939,7 @@ exports[`Paginated List props filter filters on provided "myKey" key 1`] = `
     limits="[object Object]"
     nexttext="Next"
     perpage="10"
-    prevtext="Prev"
+    prevtext="Previous"
     totalitems="1"
     value="1"
   />
@@ -990,7 +990,7 @@ exports[`Paginated List props filter filters with provided filter function 1`] =
     limits="[object Object]"
     nexttext="Next"
     perpage="10"
-    prevtext="Prev"
+    prevtext="Previous"
     totalitems="1"
     value="1"
   />

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

@@ -4,7 +4,11 @@ import GlPagination from './pagination.vue';
 
 const components = { GlPagination };
 
-const generateBaseProps = ({ prevText = 'Prev', nextText = 'Next', disabled = false } = {}) => ({
+const generateBaseProps = ({
+  prevText = 'Previous',
+  nextText = 'Next',
+  disabled = false,
+} = {}) => ({
   prevText,
   nextText,
   disabled,

package/src/components/base/pagination/pagination.vue

@@ -82,7 +82,7 @@ export default {
     prevText: {
       type: String,
       required: false,
-      default: 'Prev',
+      default: 'Previous',
     },
     /**
      * When using the compact pagination, use this prop to pass the next page number

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

@@ -1,8 +1,6 @@
-import examples from './examples';
 import description from './heatmap.md';
 
 export default {
   description,
-  examples,
   followsDesignSystem: true,
 };