@gitlab/ui 32.47.0 → 32.51.0

package/documentation/documented_stories.js

@@ -60,6 +60,7 @@ export const setupStorybookReadme = () =>
         'GlTableLite',
         'GlAlert',
         'GlSparklineChart',
+        'GlAvatarsInline',
         'GlSprintf',
         'GlLink',
         'GlChart',
@@ -88,7 +89,10 @@ export const setupStorybookReadme = () =>
         'GlFormCheckbox',
         'GlAccordion',
         'GlAccordionItem',
+        'GlIntersperse',
+        'GlFormSelect',
         'GlDaterangePicker',
+        'GlAvatarLabeled',
         'GlBarChart',
         'GlCarousel',
         'GlMarkdown',
@@ -107,6 +111,11 @@ export const setupStorybookReadme = () =>
         'GlFormCombobox',
         'GlChartTooltip',
         'GlInputGroupText',
+        'GlGaugeChart',
+        'GlFormRadio',
+        'GlModal',
+        'GlKeysetPagination',
+        'GlForm',
       ],
       components: {
         GlComponentDocumentation,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "32.47.0",
+  "version": "32.51.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -71,7 +71,7 @@
     "vue-runtime-helpers": "^1.1.2"
   },
   "peerDependencies": {
-    "@gitlab/svgs": "^1.116.0",
+    "@gitlab/svgs": "^1.116.0 || ^2.0.0",
     "bootstrap": "4.5.3",
     "pikaday": "^1.8.0",
     "vue": "^2.6.10"
@@ -85,7 +85,7 @@
     "@babel/preset-env": "^7.10.2",
     "@gitlab/eslint-plugin": "10.0.0",
     "@gitlab/stylelint-config": "2.6.0",
-    "@gitlab/svgs": "1.226.0",
+    "@gitlab/svgs": "2.0.0",
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@rollup/plugin-replace": "^2.3.2",

package/scss_to_js/scss_variables.js

@@ -15,6 +15,8 @@ export const glSpacingScale12 = '5rem'
 export const glSpacingScale13 = '6rem'
 export const glSpacingScale15 = '7.5rem'
 export const glSpacingScale20 = '10rem'
+export const glSpacingScale26 = '13rem'
+export const glSpacingScale62 = '31rem'
 export const breakpointSm = '576px'
 export const breakpointMd = '768px'
 export const breakpointLg = '992px'

package/scss_to_js/scss_variables.json

@@ -85,6 +85,16 @@
       "value": "20 * $grid-size",
       "compiledValue": "10rem"
     },
+    {
+      "name": "$gl-spacing-scale-26",
+      "value": "26 * $grid-size",
+      "compiledValue": "13rem"
+    },
+    {
+      "name": "$gl-spacing-scale-62",
+      "value": "62 * $grid-size",
+      "compiledValue": "31rem"
+    },
     {
       "name": "$breakpoint-sm",
       "value": "576px",

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

@@ -1,15 +1,6 @@
 import description from './avatar_labeled.md';
-import examples from './examples';
 
 export default {
   followsDesignSystem: true,
   description,
-  examples,
-  slots: [
-    {
-      name: 'meta',
-      description:
-        'Meta data to add to the avatar. Generally used for badges or user status emoji.',
-    },
-  ],
 };

package/src/components/base/avatar_labeled/avatar_labeled.md

@@ -1,6 +1,3 @@
-# Avatar labeled
-
-<!-- STORY -->
 ## Usage
 
 Avatars may also be adjacent to a text alternative, such as a user or project name. In these cases,
@@ -12,7 +9,7 @@ properties as the avatar component to modify the avatar’s shape and size.
 
 ## Using the component
 
-~~~js
+```js
 <gl-avatar-labeled
   :shape="shape"
   :size="size"
@@ -20,4 +17,4 @@ properties as the avatar component to modify the avatar’s shape and size.
   :label="label"
   :sub-label="subLabel"
 />
-~~~
+```

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

@@ -1,62 +1,32 @@
-import { text, withKnobs, select } from '@storybook/addon-knobs';
 import Vue from 'vue';
-import { documentedStoriesOf } from '../../../../documentation/documented_stories';
 import { GlTooltipDirective } from '../../../directives/tooltip';
 import { avatarSizeOptions, avatarShapeOptions, tooltipPlacements } from '../../../utils/constants';
 import readme from './avatar_labeled.md';
 
 Vue.directive('gl-tooltip', GlTooltipDirective);
 
-function generateProps() {
-  const props = {
-    label: {
-      type: String,
-      default: text('label', 'GitLab User'),
-    },
-    subLabel: {
-      type: String,
-      default: text('subLabel', '@gitlab'),
-    },
-    size: {
-      type: Number,
-      default: select('size', avatarSizeOptions, 32),
-    },
-    shape: {
-      type: String,
-      default: select('shape', avatarShapeOptions, 'circle'),
-    },
-    src: {
-      type: String,
-      default: text(
-        'src',
-        'https://assets.gitlab-static.net/uploads/-/system/group/avatar/9970/logo-extra-whitespace.png?width=64'
-      ),
-    },
-  };
-
-  return props;
-}
-
-function generateTooltipProps() {
-  const props = {
-    tooltipText: {
-      type: String,
-      default: text('tooltipText', 'Avatar tooltip'),
-    },
-    placement: {
-      type: String,
-      default: select('placement', tooltipPlacements, 'top'),
-    },
-  };
+const generateProps = ({
+  label = 'GitLab User',
+  subLabel = '@gitlab',
+  size = 32,
+  shape = 'circle',
+  src = 'https://assets.gitlab-static.net/uploads/-/system/group/avatar/9970/logo-extra-whitespace.png?width=64',
+} = {}) => ({
+  label,
+  subLabel,
+  size,
+  shape,
+  src,
+});
 
-  return props;
-}
+const generateTooltipProps = ({ tooltipText = 'Avatar tooltip', placement = 'top' } = {}) => ({
+  tooltipText,
+  placement,
+});
 
-documentedStoriesOf('base/avatar/labeled', readme)
-  .addDecorator(withKnobs)
-  .add('default', () => ({
-    props: generateProps(),
-    template: `
+export const Default = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  template: `
       <gl-avatar-labeled
         :shape="shape"
         :size="size"
@@ -65,13 +35,12 @@ documentedStoriesOf('base/avatar/labeled', readme)
         :sub-label="subLabel"
       />
     `,
-  }))
-  .add('with-tooltip', () => ({
-    props: {
-      ...generateProps(),
-      ...generateTooltipProps(),
-    },
-    template: `
+});
+Default.args = generateProps();
+
+export const WithTooltip = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  template: `
       <gl-avatar-labeled
         :shape="shape"
         :size="size"
@@ -82,10 +51,20 @@ documentedStoriesOf('base/avatar/labeled', readme)
         v-gl-tooltip="{ placement }"
       />
     `,
-  }))
-  .add('with-badges', () => ({
-    props: generateProps(),
-    template: `
+});
+WithTooltip.args = { ...generateProps(), ...generateTooltipProps() };
+WithTooltip.argTypes = {
+  placement: {
+    control: {
+      type: 'select',
+      options: tooltipPlacements,
+    },
+  },
+};
+
+export const WithBadges = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  template: `
       <gl-avatar-labeled
         :shape="shape"
         :size="size"
@@ -103,4 +82,31 @@ documentedStoriesOf('base/avatar/labeled', readme)
         </template>
       </gl-avatar-labeled>
     `,
-  }));
+});
+WithBadges.args = generateProps();
+
+export default {
+  title: 'base/avatar/labeled',
+  parameters: {
+    knobs: { disable: true },
+    docs: {
+      description: {
+        component: readme,
+      },
+    },
+  },
+  argTypes: {
+    size: {
+      control: {
+        type: 'select',
+        options: avatarSizeOptions,
+      },
+    },
+    shape: {
+      control: {
+        type: 'select',
+        options: avatarShapeOptions,
+      },
+    },
+  },
+};

package/src/components/base/avatar_labeled/avatar_labeled.vue

@@ -49,6 +49,7 @@ export default {
           <span class="gl-avatar-labeled-label">{{ label }}</span>
         </gl-link>
         <span v-else class="gl-avatar-labeled-label">{{ label }}</span>
+        <!-- @slot Metadata to add to the avatar. Generally used for badges or user status emoji. -->
         <slot name="meta"></slot>
       </div>
       <gl-link v-if="hasSubLabelLink" :href="subLabelLink" class="gl-avatar-link">

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

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

package/src/components/base/avatars_inline/avatars_inline.md

@@ -1,12 +1,10 @@
-## Avatars inline
-
 Use `<avatars-inline />` to display multiple avatars organized in a single row.
 
 ### Basic usage
 
 The `avatars` property accepts an array of objects that contains the avatar properties. By default,
 `<avatars-inline />` expects each object contained in the array to have the same shape as the
-properties of the  `<avatar />` component. You can customize the display of each avatar by
+properties of the `<avatar />` component. You can customize the display of each avatar by
 overriding the default slot:
 
 ```html

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

@@ -1,7 +1,4 @@
-import { number, boolean, object, select, withKnobs } from '@storybook/addon-knobs';
-import { documentedStoriesOf } from '../../../../documentation/documented_stories';
 import { avatarsInlineSizeOptions } from '../../../utils/constants';
-
 import readme from './avatars_inline.md';
 
 const defaultAvatars = [
@@ -12,53 +9,61 @@ const defaultAvatars = [
   { src: 'https://picsum.photos/id/1012/32' },
 ];
 
-function generateProps(avatars = defaultAvatars) {
-  const props = {
-    maxVisible: {
-      type: Number,
-      default: number('maxVisible', 2),
-    },
-    collapsed: {
-      type: Boolean,
-      default: boolean('collapsed', true),
-    },
-    size: {
-      type: Number,
-      default: select('size', avatarsInlineSizeOptions, 24),
-    },
-    avatars: {
-      type: Array,
-      default: object('avatars', avatars),
-    },
-  };
-
-  return props;
-}
+const generateProps = (
+  avatars = defaultAvatars,
+  { maxVisible = 2, collapsed = true, avatarSize = 24 } = {}
+) => ({
+  maxVisible,
+  collapsed,
+  avatarSize,
+  avatars,
+});
 
-documentedStoriesOf('base/avatar/avatars-inline', readme)
-  .addDecorator(withKnobs)
-  .add('default', () => ({
-    props: generateProps(),
-    template: `
-    <gl-avatars-inline :avatars="avatars" :collapsed="collapsed" :avatar-size="size" :max-visible="maxVisible">
+export const Default = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  template: `
+    <gl-avatars-inline :avatars="avatars" :collapsed="collapsed" :avatar-size="avatarSize" :max-visible="maxVisible">
     </gl-avatars-inline>
     `,
-  }))
-  .add('with links and tooltips', () => ({
-    props: generateProps(
-      defaultAvatars.map((avatar, index) => ({
-        ...avatar,
-        href: '//gitlab.com',
-        tooltip: `Avatar ${index}`,
-      }))
-    ),
-    template: `
-    <gl-avatars-inline :avatars="avatars" :collapsed="collapsed" :avatar-size="size" :max-visible="maxVisible">
+});
+Default.args = generateProps();
+
+export const WithLinksAndTooltips = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  template: `
+    <gl-avatars-inline :avatars="avatars" :collapsed="collapsed" :avatar-size="avatarSize" :max-visible="maxVisible">
       <template #avatar="{ avatar }">
         <gl-avatar-link target="blank" :href="avatar.href" v-gl-tooltip :title="avatar.tooltip">
-          <gl-avatar :src="avatar.src" :size="size" />
+          <gl-avatar :src="avatar.src" :size="avatarSize" />
         </gl-avatar-link>
       </template>
     </gl-avatars-inline>
     `,
-  }));
+});
+WithLinksAndTooltips.args = generateProps(
+  defaultAvatars.map((avatar, index) => ({
+    ...avatar,
+    href: '//gitlab.com',
+    tooltip: `Avatar ${index}`,
+  }))
+);
+
+export default {
+  title: 'base/avatar/avatars-inline',
+  parameters: {
+    knobs: { disable: true },
+    docs: {
+      description: {
+        component: readme,
+      },
+    },
+  },
+  argTypes: {
+    avatarSize: {
+      control: {
+        type: 'select',
+        options: avatarsInlineSizeOptions,
+      },
+    },
+  },
+};

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

@@ -1,8 +1,5 @@
-import examples from './examples';
 import description from './form.md';
 
 export default {
   description,
-  examples,
-  bootstrapComponent: 'b-form',
 };

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

@@ -1,17 +1,102 @@
-import { withKnobs } from '@storybook/addon-knobs';
-import { documentedStoriesOf } from '../../../../documentation/documented_stories';
-import { GlForm } from '../../../../index';
+import {
+  GlForm,
+  GlFormGroup,
+  GlFormInput,
+  GlFormSelect,
+  GlFormCheckbox,
+  GlButton,
+} from '../../../../index';
+import { setStoryTimeout } from '../../../utils/test_utils';
 import readme from './form.md';
 
-const components = {
-  GlForm,
-};
+export const Default = (args) => ({
+  components: {
+    GlForm,
+    GlFormGroup,
+    GlFormInput,
+    GlFormSelect,
+    GlFormCheckbox,
+    GlButton,
+  },
+  props: Object.keys(args),
+  data() {
+    return {
+      form: {
+        submitDisabled: false,
+        email: '',
+        name: '',
+        mergeState: null,
+        checked: [],
+      },
+      states: [{ text: 'Select One', value: null }, 'Open', 'Resolved', 'Closed', 'Blocked'],
+      show: true,
+    };
+  },
+  methods: {
+    onReset() {
+      this.form.name = '';
+      this.form.submitDisabled = false;
+    },
+    onSubmit(evt) {
+      evt.preventDefault();
+      this.form.submitDisabled = true;
+      setStoryTimeout(() => {
+        this.form.submitDisabled = false;
+        // eslint-disable-next-line no-alert
+        alert(JSON.stringify(this.form));
+      }, 1000);
+    },
+  },
+  template: `
+    <gl-form @submit="onSubmit" @reset="onReset">
+      <gl-form-group
+        id="input-group-1"
+        label="Email address:"
+        label-for="input-1"
+        description="We'll never share your email with anyone else."
+      >
+        <gl-form-input
+          id="input-1"
+          v-model="form.email"
+          type="email"
+          required
+          placeholder="Enter email"
+        />
+      </gl-form-group>
+
+      <gl-form-group id="input-group-2" label="Your Name:" label-for="input-2">
+        <gl-form-input id="input-2" v-model="form.name" required placeholder="Enter name" />
+      </gl-form-group>
 
-documentedStoriesOf('base/form/form', readme)
-  .addDecorator(withKnobs)
-  .add('default', () => ({
-    components,
-    template: `
-      <gl-form />
-    `,
-  }));
+      <gl-form-group id="input-group-3" label="Merge State:" label-for="input-3">
+        <gl-form-select id="input-3" v-model="form.mergeState" :options="states" required />
+      </gl-form-group>
+
+      <gl-form-group id="input-group-4">
+        <gl-form-checkbox-group id="checkboxes-4" v-model="form.checked">
+          <gl-form-checkbox value="squash">Squash Commits</gl-form-checkbox>
+          <gl-form-checkbox value="new">Create New Issue</gl-form-checkbox>
+        </gl-form-checkbox-group>
+      </gl-form-group>
+
+      <div class="gl-display-flex gl-justify-content-end">
+        <gl-button type="reset" class="gl-mr-3">Cancel</gl-button>
+        <gl-button type="submit" variant="confirm">Submit</gl-button>
+      </div>
+    </gl-form>
+  `,
+});
+
+export default {
+  title: 'base/form/form',
+  component: GlForm,
+  parameters: {
+    bootstrapComponent: 'b-form',
+    knobs: { disable: true },
+    docs: {
+      description: {
+        component: readme,
+      },
+    },
+  },
+};

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

@@ -1,37 +1,6 @@
-import examples from './examples';
 import description from './form_radio.md';
 
 export default {
   description,
-  examples,
   followsDesignSystem: true,
-  bootstrapComponent: 'b-form-radio',
-  propsInfo: {
-    checked: {
-      additionalInfo: 'The current value of the radio(s)',
-    },
-  },
-  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: 'help',
-      description:
-        'Content provided here will be shown beneath the radio. Typically used for help or descriptive text.',
-    },
-    {
-      name: 'default',
-      description: 'Content to use for the label',
-    },
-  ],
 };

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

@@ -1,10 +1,3 @@
-# GlFormRadio
-
-A radio button typically represents a single option in a group of related
-choices. Each radio button is boolean and only one can be selected at a time.
-
-## Usage
-
 `GlFormRadio` components can be used directly, or via a `GlFormRadioGroup`.
 
 Below is an example which demonstrates the direct approach. For examples using
@@ -12,13 +5,13 @@ Below is an example which demonstrates the direct approach. For examples using
 
 ```html
 <script>
-export default {
-  data() {
-    return {
-      selected: 'yes',
-    };
-  },
-};
+  export default {
+    data() {
+      return {
+        selected: 'yes',
+      };
+    },
+  };
 </script>
 
 <template>