@gitlab/ui 66.13.0 → 66.14.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "66.13.0",
+  "version": "66.14.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -94,22 +94,22 @@
     "@gitlab/eslint-plugin": "19.0.0",
     "@gitlab/fonts": "^1.2.0",
     "@gitlab/stylelint-config": "5.0.0",
-    "@gitlab/svgs": "3.62.0",
+    "@gitlab/svgs": "3.63.0",
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@rollup/plugin-replace": "^2.3.2",
-    "@storybook/addon-a11y": "7.4.2",
-    "@storybook/addon-docs": "7.4.2",
-    "@storybook/addon-essentials": "7.4.2",
-    "@storybook/addon-storyshots": "7.4.2",
-    "@storybook/addon-storyshots-puppeteer": "7.4.2",
-    "@storybook/addon-viewport": "7.4.2",
-    "@storybook/builder-webpack5": "7.4.2",
-    "@storybook/theming": "7.4.2",
-    "@storybook/vue": "7.4.2",
-    "@storybook/vue-webpack5": "7.4.2",
-    "@storybook/vue3": "7.4.2",
-    "@storybook/vue3-webpack5": "7.4.2",
+    "@storybook/addon-a11y": "7.4.3",
+    "@storybook/addon-docs": "7.4.3",
+    "@storybook/addon-essentials": "7.4.3",
+    "@storybook/addon-storyshots": "7.4.3",
+    "@storybook/addon-storyshots-puppeteer": "7.4.3",
+    "@storybook/addon-viewport": "7.4.3",
+    "@storybook/builder-webpack5": "7.4.3",
+    "@storybook/theming": "7.4.3",
+    "@storybook/vue": "7.4.3",
+    "@storybook/vue-webpack5": "7.4.3",
+    "@storybook/vue3": "7.4.3",
+    "@storybook/vue3-webpack5": "7.4.3",
     "@vue/compat": "^3.2.40",
     "@vue/compiler-sfc": "^3.2.40",
     "@vue/test-utils": "1.3.0",
@@ -128,8 +128,8 @@
     "emoji-regex": "^10.0.0",
     "eslint": "8.49.0",
     "eslint-import-resolver-jest": "3.0.2",
-    "eslint-plugin-cypress": "2.14.0",
-    "eslint-plugin-storybook": "0.6.13",
+    "eslint-plugin-cypress": "2.15.1",
+    "eslint-plugin-storybook": "0.6.14",
     "glob": "10.3.3",
     "identity-obj-proxy": "^3.0.0",
     "inquirer-select-directory": "^1.2.0",
@@ -160,7 +160,7 @@
     "sass-loader": "^10.2.0",
     "sass-true": "^6.1.0",
     "start-server-and-test": "^1.10.6",
-    "storybook": "7.4.2",
+    "storybook": "7.4.3",
     "storybook-dark-mode": "3.0.1",
     "style-dictionary": "^3.8.0",
     "stylelint": "15.10.2",

package/src/components/base/broadcast_message/broadcast_message.scss

@@ -79,12 +79,19 @@
 
   &-icon {
     @include gl-mr-5;
+    line-height: $gl-line-height-16;
 
     > svg {
       @include gl-vertical-align-bottom;
     }
   }
 
+  &-text {
+    margin-top: -$gl-spacing-scale-1;
+    margin-bottom: -$gl-spacing-scale-1;
+    @include gl-overflow-break-word;
+  }
+
   &-dismiss {
     @include gl-my-n2;
     @include gl-ml-5;

package/src/components/base/broadcast_message/broadcast_message.vue

@@ -77,10 +77,10 @@ export default {
 <template>
   <div class="gl-broadcast-message" :class="`${theme} ${type}`">
     <div class="gl-broadcast-message-content">
-      <div class="gl-broadcast-message-icon gl-line-height-normal">
+      <div class="gl-broadcast-message-icon">
         <gl-icon :name="iconName" />
       </div>
-      <div class="gl-my-n1">
+      <div class="gl-broadcast-message-text">
         <h2 class="gl-sr-only">Admin message</h2>
         <!-- @slot The broadcast message's text -->
         <slot></slot>

package/src/components/experimental/experiment_badge/experiment_badge.md

@@ -0,0 +1,9 @@
+The component is representing a badge, marking the experimental features.
+It is supposed to be used with the AI experiments, and comes with a popover explaining
+what experiment means.
+
+## Usage
+
+```html
+<gl-experiment-badge experiment-help-page-url="https://gitlab.com" popover-placement="bottom" />
+```

package/src/components/experimental/experiment_badge/experiment_badge.spec.js

@@ -0,0 +1,66 @@
+import { shallowMount } from '@vue/test-utils';
+import GlBadge from '../../base/badge/badge.vue';
+import GlPopover from '../../base/popover/popover.vue';
+import GlLink from '../../base/link/link.vue';
+import GlSprintf from '../../utilities/sprintf/sprintf.vue';
+import GlExperimentBadge, { i18n } from './experiment_badge.vue';
+
+jest.mock('lodash/uniqueId', () => () => 'fakeUniqueId');
+
+describe('GlExperimentBadge', () => {
+  let wrapper;
+
+  const findBadge = () => wrapper.findComponent(GlBadge);
+  const findPopover = () => wrapper.findComponent(GlPopover);
+  const findHelpLink = () => wrapper.findComponent(GlLink);
+
+  const createComponent = (props = {}) => {
+    wrapper = shallowMount(GlExperimentBadge, {
+      propsData: {
+        ...props,
+      },
+      stubs: {
+        GlSprintf,
+      },
+    });
+  };
+
+  beforeEach(() => {
+    createComponent();
+  });
+
+  it('renders main components', () => {
+    expect(findBadge().exists()).toBe(true);
+    expect(findPopover().exists()).toBe(true);
+  });
+
+  it('sets correct props on the badge', () => {
+    const badgeType = 'neutral';
+    const badgeSize = 'md';
+    expect(findBadge().props('variant')).toBe(badgeType);
+    expect(findBadge().props('size')).toBe(badgeSize);
+    expect(findBadge().find('span').text()).toBe(i18n.EXPERIMENT_BADGE);
+  });
+
+  it('sets correct props on the popover', () => {
+    expect(findPopover().props('triggers')).toBe('click');
+    expect(findPopover().props('title')).toBe(i18n.EXPERIMENT_POPOVER_TITLE);
+  });
+
+  it('correctly sets the placement of the popover', () => {
+    const popoverPlacement = 'right';
+    createComponent({ popoverPlacement });
+    expect(findPopover().props('placement')).toBe(popoverPlacement);
+  });
+
+  it('sets the link to the help page if passed', () => {
+    const experimentHelpPageUrl = 'https://gitlab.com';
+    createComponent({ experimentHelpPageUrl });
+    expect(findHelpLink().attributes('href')).toBe(experimentHelpPageUrl);
+  });
+
+  it('generates the unique ID to connect the button and the popover', () => {
+    expect(findBadge().attributes('id')).toBe('fakeUniqueId');
+    expect(findPopover().attributes('target')).toBe('fakeUniqueId');
+  });
+});

package/src/components/experimental/experiment_badge/experiment_badge.stories.js

@@ -0,0 +1,56 @@
+import GlExperimentBadge from './experiment_badge.vue';
+import readme from './experiment_badge.md';
+
+const defaultValue = (prop) => GlExperimentBadge.props[prop].default;
+
+const generateProps = ({
+  experimentHelpPageUrl = defaultValue('experimentHelpPageUrl'),
+  popoverPlacement = defaultValue('popoverPlacement'),
+} = {}) => ({
+  experimentHelpPageUrl,
+  popoverPlacement,
+});
+
+const Template = (args, { argTypes }) => ({
+  components: { GlExperimentBadge },
+  props: Object.keys(argTypes),
+  template: `
+    <div class='gl-h-13'>
+      <gl-experiment-badge
+        :experiment-help-page-url='experimentHelpPageUrl'
+        :popover-placement='popoverPlacement' />
+    </div>
+  `,
+});
+
+export const Default = Template.bind({});
+Default.args = generateProps();
+
+export const WithHelpPageUrl = Template.bind({});
+WithHelpPageUrl.args = {
+  ...generateProps({
+    experimentHelpPageUrl:
+      'https://docs.gitlab.com/ee/policy/experiment-beta-support.html#experiment',
+  }),
+};
+
+export const CustomPlacement = Template.bind({});
+CustomPlacement.args = {
+  ...generateProps({
+    popoverPlacement: 'right',
+  }),
+};
+
+export default {
+  title: 'experimental/experiment_badge',
+  component: GlExperimentBadge,
+  parameters: {
+    storyshots: { disable: true },
+    docs: {
+      description: {
+        component: readme,
+      },
+    },
+  },
+  argTypes: {},
+};

package/src/components/experimental/experiment_badge/experiment_badge.vue

@@ -0,0 +1,84 @@
+<script>
+import uniqueId from 'lodash/uniqueId';
+import { GlBadge, GlLink, GlPopover } from '../../../index';
+import GlSprintf from '../../utilities/sprintf/sprintf.vue';
+
+export const i18n = {
+  EXPERIMENT_BADGE: 'Experiment',
+  EXPERIMENT_POPOVER_TITLE: "What's an Experiment?",
+  EXPERIMENT_POPOVER_CONTENT:
+    "An %{linkStart}Experiment%{linkEnd} is a feature that's in the process of being developed. It's not production-ready. We encourage users to try Experimental features and provide feedback. An Experiment: %{bullets}",
+  EXPERIMENT_POPOVER_BULLETS: [
+    'May be unstable',
+    'Has no support and might not be documented',
+    'Can be removed at any time',
+  ],
+};
+
+export default {
+  name: 'GlExperimentBadge',
+  i18n,
+  components: {
+    GlBadge,
+    GlPopover,
+    GlSprintf,
+    GlLink,
+  },
+  props: {
+    /**
+     * The URL of a page to provide more explanations on the experiment.
+     */
+    experimentHelpPageUrl: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    /**
+     * The placement of the popover in relation to the button.
+     */
+    popoverPlacement: {
+      type: String,
+      required: false,
+      default: 'bottom',
+    },
+  },
+  created() {
+    this.triggerId = uniqueId('experiment-badge-');
+  },
+};
+</script>
+
+<template>
+  <gl-badge :id="triggerId" class="gl-mx-4 gl-hover-cursor-pointer" variant="neutral" size="md">
+    <span>{{ $options.i18n.EXPERIMENT_BADGE }}</span>
+    <gl-popover
+      triggers="click"
+      show-close-button
+      :placement="popoverPlacement"
+      :target="triggerId"
+      :css-classes="['gl-z-index-9999!']"
+      :title="$options.i18n.EXPERIMENT_POPOVER_TITLE"
+    >
+      <gl-sprintf :message="$options.i18n.EXPERIMENT_POPOVER_CONTENT">
+        <template #link="{ content }">
+          <gl-link
+            v-if="experimentHelpPageUrl"
+            :href="experimentHelpPageUrl"
+            target="_blank"
+            class="gl-font-sm!"
+          >
+            {{ content }}
+          </gl-link>
+          <span v-else>{{ content }}</span>
+        </template>
+        <template #bullets>
+          <ul class="gl-mb-0 gl-pl-5">
+            <li v-for="(item, i) in $options.i18n.EXPERIMENT_POPOVER_BULLETS" :key="`li-${i}`">
+              {{ item }}
+            </li>
+          </ul>
+        </template>
+      </gl-sprintf>
+    </gl-popover>
+  </gl-badge>
+</template>

package/src/index.js

@@ -96,6 +96,9 @@ export { default as GlAccordionItem } from './components/base/accordion/accordio
 export { default as GlCarousel } from './components/base/carousel/carousel.vue';
 export { default as GlCarouselSlide } from './components/base/carousel/carousel_slide.vue';
 
+// Experimental
+export { default as GlExperimentBadge } from './components/experimental/experiment_badge/experiment_badge.vue';
+
 // Utilities
 export { default as GlAnimatedNumber } from './components/utilities/animated_number/animated_number.vue';
 export { default as GlFriendlyWrap } from './components/utilities/friendly_wrap/friendly_wrap.vue';

package/src/scss/utilities.scss

@@ -8359,13 +8359,13 @@ $gl-animate-skeleton-loader-max-width: 64 * $grid-size;
 }
 .gl-overflow-break-word {
   overflow-wrap: break-word;
-  word-wrap: break-word;
   hyphens: auto;
+  -webkit-hyphens: auto;
 }
 .gl-overflow-break-word\! {
   overflow-wrap: break-word !important;
-  word-wrap: break-word !important;
   hyphens: auto !important;
+  -webkit-hyphens: auto !important;
 }
 .gl-str-truncated {
   @include str-truncated;

package/src/scss/utility-mixins/text.scss

@@ -129,8 +129,8 @@
 
 @mixin gl-overflow-break-word {
   overflow-wrap: break-word;
-  word-wrap: break-word;
   hyphens: auto;
+  -webkit-hyphens: auto; // stylelint-disable-line
 }
 
 // Deprecated, prefer `gl-text-truncate`