npm - @gitlab/ui - Versions diffs - 36.1.0 → 36.5.0 - Mend

@gitlab/ui 36.1.0 → 36.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (41) hide show

package/documentation/documented_stories.js CHANGED Viewed

@@ -126,6 +126,8 @@ export const setupStorybookReadme = () =>
         'GlNav',
         'GlNavItem',
         'GlNavItemDropdown',
+        'GlPopover',
+        'GlSingleStat',
       ],
       components: {
         GlComponentDocumentation,

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "36.1.0",
+  "version": "36.5.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -84,7 +84,7 @@
     "@babel/preset-env": "^7.10.2",
     "@gitlab/eslint-plugin": "10.0.2",
     "@gitlab/stylelint-config": "4.0.0",
-    "@gitlab/svgs": "2.2.0",
+    "@gitlab/svgs": "2.5.0",
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@rollup/plugin-replace": "^2.3.2",

package/src/components/base/popover/popover.documentation.js CHANGED Viewed

@@ -1,28 +1,3 @@
-import examples from './examples';
 export default {
   followsDesignSystem: true,
-  examples,
-  bootstrapComponent: 'b-popover',
-  bootstrapPropsInfo: {
-    target: {
-      additionalInfo:
-        'Element string ID, or a reference to an element or component, that you want to trigger the popover.',
-      required: true,
-    },
-    triggers: {
-      enum: 'triggerVariantOptions',
-    },
-    placement: {
-      enum: 'popoverPlacements',
-    },
-    boundary: {
-      additionalInfo:
-        '"scrollParent", "viewport", "window", or a reference to an HTML element. This is the container that the popover will be constrained to visually.You may need to change this if your target element is in a small container with overflow scroll',
-    },
-    container: {
-      additionalInfo:
-        'Specify container as null (default, appends to <body>) to avoid rendering problems in more complex components (like input groups, button groups, etc). You can use container to optionally specify a different element to append the popover to.',
-    },
-  },
 };

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

@@ -1,8 +1,8 @@
-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 defaultValue = (prop) => GlPopover.props[prop].default;
 const components = { GlPopover, GlButton };
 const contentString = `
@@ -11,84 +11,88 @@ const contentString = `
   massa ac, porta condimentum libero. Ut id lacus tristique, egestas arcu non, molestie nisi.
 `;
-const template = `
-  <div class="gl-display-flex gl-justify-content-center gl-p-6">
-    <gl-button id="pop-top">{{placement}}</gl-button>
-    <gl-popover target="pop-top"
-      triggers="hover focus"
+const getTemplate = (id, slots = '') => `
+  <div style="height:400px;" class="gl-display-flex gl-justify-content-center gl-align-items-center">
+    <gl-button id="${id}">{{placement}}</gl-button>
+    <gl-popover
+      target="${id}"
+      :triggers="triggers"
       :title="title"
       :placement="placement"
+      :show-close-button="showCloseButton"
       content="${contentString}"
-      data-testid="popover-with-props"
-      show
-      />
-  </div>
-  `;
+      data-testid="${id}"
+      :show="$options.viewMode !== 'docs'">${slots}</gl-popover>
+  </div>`;
-const scopedSlotTemplate = `
-  <div class="gl-display-flex gl-justify-content-center gl-p-6">
-    <gl-button id="pop-top-two" data-testid="popover-button-click">{{placement}}</gl-button>
-    <gl-popover target="pop-top-two"
-      triggers="click"
-      :placement="placement"
-      content="${contentString}"
-    >
-      <template #title>
-        <span data-testid="popover-title">Popover title</span>
-      </template>
-    </gl-popover>
-  </div>
-`;
+const generateProps = ({
+  placement = popoverPlacements.top,
+  title = 'Popover',
+  triggers = defaultValue('triggers'),
+  cssClasses = defaultValue('cssClasses'),
+  showCloseButton = defaultValue('showCloseButton'),
+} = {}) => ({
+  placement,
+  title,
+  triggers,
+  cssClasses,
+  showCloseButton,
+});
+export const Default = (_args, { viewMode, argTypes }) => ({
+  viewMode,
+  components,
+  props: Object.keys(argTypes),
+  template: getTemplate('popover-with-props'),
+});
+Default.args = generateProps();
-function generateProps({ placement = popoverPlacements.top, title = 'Popover', triggers } = {}) {
-  return {
+export const WithCloseButton = (_args, { viewMode, argTypes }) => ({
+  viewMode,
+  components,
+  props: Object.keys(argTypes),
+  template: getTemplate('popover-with-close-button'),
+});
+WithCloseButton.args = generateProps({
+  showCloseButton: true,
+});
+export const OnClick = (_args, { viewMode, argTypes }) => ({
+  viewMode,
+  components,
+  props: Object.keys(argTypes),
+  template: getTemplate(
+    'popover-button-click',
+    `
+    <template #title>
+      <span data-testid="popover-title">Popover title</span>
+    </template>
+  `
+  ),
+});
+OnClick.args = generateProps({
+  triggers: 'click',
+});
+OnClick.parameters = {
+  storyshots: { disable: true },
+};
+export default {
+  title: 'base/popover',
+  component: GlPopover,
+  parameters: {
+    knobs: { disable: true },
+    bootstrapComponent: 'b-popover',
+  },
+  argTypes: {
     placement: {
-      type: String,
-      default: select('placement', popoverPlacements, placement),
+      options: Object.values(popoverPlacements),
+      control: {
+        type: 'select',
+      },
     },
     title: {
-      type: String,
-      default: text('title', title),
+      control: { type: 'text' },
     },
-    triggers: {
-      type: String,
-      default: text('hover focus', triggers),
-    },
-  };
-}
-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>
-        <gl-popover
-          target="pop-with-close-button"
-          data-testid="popover-with-close-button"
-          triggers="hover focus"
-          :title="title"
-          :placement="placement"
-          content="${contentString}"
-          show
-          show-close-button
-          />
-      </div>
-    `,
-    props: generateProps(),
-  }))
-  .add(
-    'on click',
-    () => ({
-      components,
-      template: scopedSlotTemplate,
-      props: generateProps(),
-    }),
-    { storyshots: false }
-  );
+  },
+};

package/src/components/base/popover/popover.vue CHANGED Viewed

@@ -18,6 +18,11 @@ export default {
       required: false,
       default: () => [],
     },
+    /**
+     * Space-separated triggers for the popover.
+     *
+     * @values click, hover, focus, manual
+     */
     triggers: {
       type: String,
       required: false,
@@ -45,6 +50,9 @@ export default {
   methods: {
     close(e) {
       this.$refs[popoverRefName].doClose();
+      /**
+       * Emitted when the close button is clicked (requires showCloseButton to be `true`).
+       */
       this.$emit('close-button-clicked', e);
     },
   },

package/src/components/charts/single_stat/single_stat.documentation.js CHANGED Viewed

@@ -1,7 +1,5 @@
-import examples from './examples';
 import description from './single_stat.md';
 export default {
-  examples,
   description,
 };

package/src/components/charts/single_stat/single_stat.md CHANGED Viewed

@@ -1,5 +1,3 @@
-### Single Stat
 The single stat component is used to show a single value. The color of the meta icon / badge is
 determined by the **variant** prop, which can be one of "success", "warning", "danger", "info",
 "neutral" or "muted" (default).

package/src/components/charts/single_stat/single_stat.stories.js CHANGED Viewed

@@ -1,100 +1,93 @@
 import iconSpriteInfo from '@gitlab/svgs/dist/icons.json';
-import { withKnobs, text, select, boolean, number } from '@storybook/addon-knobs';
 import { GlSingleStat } from '../../../charts';
-import { documentedStoriesOf } from '../../../../documentation/documented_stories';
 import { badgeVariantOptions } from '../../../utils/constants';
 import readme from './single_stat.md';
-const components = {
-  GlSingleStat,
-};
-const template = `
-    <gl-single-stat
-      :title="title"
-      :value="value"
-      :unit="unit"
-      :variant="variant"
-      :meta-text="metaText"
-      :meta-icon="metaIcon"
-      :title-icon="titleIcon"
-      :should-animate="shouldAnimate"
-      :animation-decimal-places="animationDecimalPlaces"
-    />
-  `;
 const generateProps = ({
   variant = GlSingleStat.props.variant.default,
   title = 'Single stat',
   value = '100',
-  unit = null,
-  metaText = null,
+  unit = '',
+  metaText = '',
   metaIcon = null,
   titleIcon = null,
   shouldAnimate = false,
   animationDecimalPlaces = 0,
 } = {}) => ({
-  variant: {
-    type: String,
-    default: select('variant', Object.values(badgeVariantOptions), variant),
-  },
-  title: {
-    type: String,
-    default: text('title', title),
-  },
-  value: {
-    type: String,
-    default: text('value', value),
-  },
-  unit: {
-    type: [String, Number],
-    default: text('unit', unit),
-  },
-  metaText: {
-    type: String,
-    default: text('metaText', metaText),
-  },
-  metaIcon: {
-    type: String,
-    default: select('metaIcon', ['', ...iconSpriteInfo.icons], metaIcon),
-  },
-  titleIcon: {
-    type: String,
-    default: select('titleIcon', ['', ...iconSpriteInfo.icons], titleIcon),
-  },
-  shouldAnimate: {
-    type: Boolean,
-    default: boolean('shouldAnimate', shouldAnimate),
-  },
-  animationDecimalPlaces: {
-    type: Number,
-    default: number('animationDecimalPlaces', animationDecimalPlaces),
-  },
+  variant,
+  title,
+  value,
+  unit,
+  metaText,
+  metaIcon,
+  titleIcon,
+  shouldAnimate,
+  animationDecimalPlaces,
 });
 const metaText = 'Super fast';
 const metaIcon = 'check-circle';
 const titleIcon = 'hourglass';
-documentedStoriesOf('charts/single-stat', readme)
-  .addDecorator(withKnobs)
-  .add('default', () => ({
-    components,
-    props: generateProps(),
-    template,
-  }))
-  .add('with badge', () => ({
-    components,
-    props: generateProps({ metaText, metaIcon }),
-    template,
-  }))
-  .add('with meta icon', () => ({
-    components,
-    props: generateProps({ metaIcon }),
-    template,
-  }))
-  .add('with title icon', () => ({
-    components,
-    props: generateProps({ titleIcon }),
-    template,
-  }));
+const Template = (args, { argTypes }) => ({
+  components: {
+    GlSingleStat,
+  },
+  props: Object.keys(argTypes),
+  template: `
+    <gl-single-stat
+      :title="title"
+      :value="value"
+      :unit="unit"
+      :variant="variant"
+      :meta-text="metaText"
+      :meta-icon="metaIcon"
+      :title-icon="titleIcon"
+      :should-animate="shouldAnimate"
+      :animation-decimal-places="animationDecimalPlaces"
+    />`,
+});
+export const Default = Template.bind({});
+Default.args = generateProps();
+export const WithBadge = Template.bind({});
+WithBadge.args = generateProps({ metaText, metaIcon });
+export const WithMetaIcon = Template.bind({});
+WithMetaIcon.args = generateProps({ metaIcon });
+export const WithTitleIcon = Template.bind({});
+WithTitleIcon.args = generateProps({ titleIcon });
+export default {
+  title: 'charts/single-stat',
+  component: GlSingleStat,
+  parameters: {
+    knobs: { disable: true },
+    docs: {
+      description: {
+        component: readme,
+      },
+    },
+  },
+  argTypes: {
+    variant: {
+      options: Object.values(badgeVariantOptions),
+      control: {
+        type: 'select',
+      },
+    },
+    metaIcon: {
+      options: iconSpriteInfo.icons,
+      control: 'select',
+    },
+    titleIcon: {
+      options: iconSpriteInfo.icons,
+      control: 'select',
+    },
+    unit: {
+      control: 'text',
+    },
+  },
+};

package/src/components/regions/empty_state/empty_state.spec.js CHANGED Viewed

@@ -148,6 +148,55 @@ describe('empty state component', () => {
     });
   });
+  describe('with different titles', () => {
+    it('should render title from prop', () => {
+      component = shallowMount(EmptyState, {
+        propsData: {
+          ...props,
+        },
+      });
+      const title = component.find('h1');
+      expect(title.text()).toBe(props.title);
+    });
+    it('should render title from slot', () => {
+      const slotTitle = 'Slotted title';
+      component = shallowMount(EmptyState, {
+        propsData: {
+          ...props,
+          title: null,
+        },
+        slots: {
+          title: `<strong id="slotted">${slotTitle}</strong>`,
+        },
+      });
+      const title = component.find('#slotted');
+      expect(title.text()).toBe(slotTitle);
+    });
+    it('should render a slotted title over a props title', () => {
+      const slotTitle = 'Slotted title';
+      component = shallowMount(EmptyState, {
+        propsData: {
+          ...props,
+        },
+        slots: {
+          title: `<strong id="slotted">${slotTitle}</strong>`,
+        },
+      });
+      const title = component.find('#slotted');
+      const propTitle = component.find('h1');
+      expect(title.text()).toBe(slotTitle);
+      expect(propTitle.exists()).toBe(false);
+    });
+  });
   describe('with different descriptions', () => {
     it('should render description from prop', () => {
       component = shallowMount(EmptyState, {

package/src/components/regions/empty_state/empty_state.vue CHANGED Viewed

@@ -11,7 +11,8 @@ export default {
      */
     title: {
       type: String,
-      required: true,
+      required: false,
+      default: null,
     },
     /**
      * The illustration's URL.
@@ -112,13 +113,15 @@ export default {
     </div>
     <div :class="compact ? 'gl-flex-grow-1 gl-flex-basis-0 gl-px-4' : 'gl-max-w-full gl-m-auto'">
       <div class="gl-mx-auto gl-my-0" :class="{ 'gl-p-5': !compact }">
-        <h1
-          ref="title"
-          class="gl-font-size-h-display gl-line-height-36"
-          :class="compact ? 'h5' : 'h4'"
-        >
-          {{ title }}
-        </h1>
+        <!--
+            @slot Use this slot to customize the empty state's title area.
+            Overrides the `title` prop.
+          -->
+        <slot ref="title" name="title">
+          <h1 class="gl-font-size-h-display gl-line-height-36" :class="compact ? 'h5' : 'h4'">
+            {{ title }}
+          </h1>
+        </slot>
         <p v-if="description || $scopedSlots.description" ref="description" class="gl-mt-3">
           <!--
             @slot Use this slot to customize the empty state's description

package/src/scss/utilities.scss CHANGED Viewed

@@ -1981,6 +1981,14 @@
   color: inherit !important;
 }
+.gl-text-transparent {
+  color: transparent;
+}
+.gl-text-transparent\! {
+  color: transparent !important;
+}
 .gl-text-white {
   color: $white;
 }
@@ -3287,6 +3295,14 @@
   grid-column-start: 1 !important
 }
+.gl-grid-template-columns-2 {
+  grid-template-columns: 1fr 1fr
+}
+.gl-grid-template-columns-2\! {
+  grid-template-columns: 1fr 1fr !important
+}
 .gl-list-style-none {
   list-style-type: none
 }
@@ -6392,6 +6408,18 @@
   padding-left: $gl-spacing-scale-7 !important;
   }
 }
+.gl-md-px-7 {
+  @include gl-media-breakpoint-up(md) {
+  padding-left: $gl-spacing-scale-7;
+  padding-right: $gl-spacing-scale-7;
+  }
+}
+.gl-md-px-7\! {
+  @include gl-media-breakpoint-up(md) {
+  padding-left: $gl-spacing-scale-7 !important;
+  padding-right: $gl-spacing-scale-7 !important;
+  }
+}
 .gl-lg-pt-0 {
   @include gl-media-breakpoint-up(lg) {
   padding-top: 0;

package/src/scss/utility-mixins/color.scss CHANGED Viewed

@@ -11,6 +11,10 @@
   color: inherit;
 }
+@mixin gl-text-transparent {
+  color: transparent;
+}
 @mixin gl-text-white($hover: true) {
   color: $white;
 }

package/src/scss/utility-mixins/grid.scss CHANGED Viewed

@@ -10,3 +10,7 @@
 @mixin gl-grid-col-start-1 {
   grid-column-start: 1;
 }
+@mixin gl-grid-template-columns-2 {
+  grid-template-columns: 1fr 1fr;
+}

package/src/scss/utility-mixins/spacing.scss CHANGED Viewed

@@ -1209,6 +1209,12 @@
   }
 }
+@mixin gl-md-px-7 {
+  @include gl-media-breakpoint-up(md) {
+    @include gl-px-7;
+  }
+}
 @mixin gl-lg-pt-0 {
   @include gl-media-breakpoint-up(lg) {
     @include gl-pt-0;

package/dist/components/base/popover/examples/index.js DELETED Viewed

@@ -1,25 +0,0 @@
-import PopoverBasicExample from './popover.basic.example';
-import PopoverLoadingExample from './popover.loading.example';
-import PopoverNoTitleExample from './popover.notitle.example';
-var index = [{
-  name: 'Examples',
-  items: [{
-    id: 'popover-basic',
-    name: 'Basic',
-    description: 'Basic Popover',
-    component: PopoverBasicExample
-  }, {
-    id: 'popover-loading',
-    name: 'Loading',
-    description: 'Popover with Skeleton Loading',
-    component: PopoverLoadingExample
-  }, {
-    id: 'popover-no-title',
-    name: 'No title',
-    description: 'Popover with no title',
-    component: PopoverNoTitleExample
-  }]
-}];
-export default index;

package/dist/components/base/popover/examples/popover.basic.example.js DELETED Viewed

@@ -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('div',{attrs:{"id":"popovercontainer"}},[_c('gl-button',{attrs:{"id":"pop-basic"}},[_vm._v("Popover Button")]),_vm._v(" "),_c('gl-popover',{attrs:{"target":"pop-basic","container":"popovercontainer","placement":"top","title":"This is a Popover","triggers":"hover focus","content":"With a placement of top"}})],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__;