@gitlab/ui 63.1.3 → 63.2.0

package/dist/index.js

@@ -92,6 +92,7 @@ export { default as GlFriendlyWrap } from './components/utilities/friendly_wrap/
 export { default as GlIntersperse } from './components/utilities/intersperse/intersperse';
 export { default as GlSprintf } from './components/utilities/sprintf/sprintf';
 export { default as GlTruncate } from './components/utilities/truncate/truncate';
+export { default as GlTruncateText } from './components/utilities/truncate_text/truncate_text';
 export { GlModalDirective } from './directives/modal';
 export { GlTooltipDirective } from './directives/tooltip';
 export { GlResizeObserverDirective } from './directives/resize_observer/resize_observer';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "63.1.3",
+  "version": "63.2.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -89,7 +89,7 @@
     "@gitlab/eslint-plugin": "19.0.0",
     "@gitlab/fonts": "^1.2.0",
     "@gitlab/stylelint-config": "4.1.0",
-    "@gitlab/svgs": "3.47.0",
+    "@gitlab/svgs": "3.48.0",
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@rollup/plugin-replace": "^2.3.2",
@@ -118,7 +118,7 @@
     "bootstrap": "4.6.2",
     "cypress": "12.12.0",
     "emoji-regex": "^10.0.0",
-    "eslint": "8.40.0",
+    "eslint": "8.41.0",
     "eslint-import-resolver-jest": "3.0.2",
     "eslint-plugin-cypress": "2.13.3",
     "eslint-plugin-storybook": "0.6.12",
@@ -152,7 +152,7 @@
     "sass-loader": "^10.2.0",
     "sass-true": "^6.1.0",
     "start-server-and-test": "^1.10.6",
-    "storybook": "7.0.7",
+    "storybook": "7.0.12",
     "storybook-dark-mode": "3.0.0",
     "stylelint": "14.9.1",
     "stylelint-config-prettier": "9.0.4",

package/src/components/regions/empty_state/empty_state.stories.js

@@ -1,5 +1,5 @@
 import securityDashboardEmptyStateSvg from '@gitlab/svgs/dist/illustrations/security-dashboard-empty-state.svg';
-import issuesSvg from '@gitlab/svgs/dist/illustrations/issues.svg';
+import issuesSvg from '@gitlab/svgs/dist/illustrations/rocket-launch-md.svg';
 import GlButton from '../../base/button/button.vue';
 import GlEmptyState from './empty_state.vue';
 import readme from './empty_state.md';

package/src/components/utilities/truncate_text/constants.js

@@ -0,0 +1,5 @@
+export const STATES = {
+  INITIAL: 'initial',
+  TRUNCATED: 'truncated',
+  EXTENDED: 'extended',
+};

package/src/components/utilities/truncate_text/truncate_text.md

@@ -0,0 +1,26 @@
+The `GlTruncateText` component lets you truncate a large text by number of lines.
+The last line ends with an ellipsis if the text is truncated.
+Truncation can be toggled by a 'Show more' / 'Show less' button.
+The button will not be shown when no truncation is necessary.
+There is a separate property to set the number of lines initially shown on small screens.
+Use the `showMoreText` and `showLessText` properties to provide translated strings.
+
+> **Tip:** Try resizing the side panel to see the truncated number of lines change.
+
+## Usage
+
+```html
+<gl-truncate-text :show-more-text="__('Show more')" :show-less-text="__('Show less')" :lines="3" :mobile-lines="10">
+  {{ largeText }}
+</gl-truncate-text>
+```
+
+## Usage caveats
+
+When the size of the window is large,
+and the text is displayed on a number of lines greater than the value of the `lines` property,
+but smaller than the value of the `mobileLines` property,
+and the `Show more` button has been clicked to show the entire content of the text,
+and the window is resized to a small size,
+then instead of disappearing,
+the `Show less` button will remain visible and will do nothing when clicked.

package/src/components/utilities/truncate_text/truncate_text.scss

@@ -0,0 +1,14 @@
+/**
+  Note: although vendor-prefixes are used here, these properties are supported by all browsers.
+  See https://caniuse.com/css-line-clamp
+**/
+.gl-truncate-text {
+  // stylelint-disable-next-line value-no-vendor-prefix
+  display: -webkit-box;
+  -webkit-line-clamp: var(--mobile-lines);
+  -webkit-box-orient: vertical;
+
+  @include gl-media-breakpoint-up(sm) {
+    -webkit-line-clamp: var(--lines);
+  }
+}

package/src/components/utilities/truncate_text/truncate_text.spec.js

@@ -0,0 +1,136 @@
+import { mount } from '@vue/test-utils';
+import { createMockDirective, getBinding } from '~helpers/vue_mock_directive';
+import GlButton from '../../base/button/button.vue';
+import GlTruncateText from './truncate_text.vue';
+
+describe('GlTruncateText', () => {
+  let wrapper;
+
+  const showMoreText = 'Show more text';
+  const showLessText = 'Show less text';
+
+  const findContent = () => wrapper.find('article');
+  const findContentEl = () => findContent().element;
+  const findButton = () => wrapper.findComponent(GlButton);
+
+  const createComponent = (propsData = { showMoreText, showLessText }) => {
+    wrapper = mount(GlTruncateText, {
+      propsData,
+      directives: {
+        GlResizeObserver: createMockDirective('gl-resize-observer'),
+      },
+    });
+  };
+
+  beforeEach(() => {
+    createComponent();
+  });
+
+  describe('when mounted', () => {
+    it('the content has class `gl-truncate-text`', () => {
+      expect(findContentEl().classList).toContain('gl-truncate-text');
+    });
+
+    it('the content has style variables for `lines` and `mobile-lines` with the correct values', () => {
+      const { style } = findContentEl();
+
+      expect(style).toContain('--lines');
+      expect(style.getPropertyValue('--lines')).toBe('3');
+      expect(style).toContain('--mobile-lines');
+      expect(style.getPropertyValue('--mobile-lines')).toBe('10');
+    });
+
+    it('the button is not visible', () => {
+      expect(findButton().exists()).toBe(false);
+    });
+  });
+
+  describe.each`
+    property         | variable
+    ${'lines'}       | ${'--lines'}
+    ${'mobileLines'} | ${'--mobile-lines'}
+  `('when mounted with a value for the $property property', ({ property, variable }) => {
+    const value = 4;
+
+    beforeEach(() => {
+      createComponent({ [property]: value });
+    });
+
+    it(`the ${variable} style variable has the value of the passed ${property} property`, () => {
+      expect(findContentEl().style.getPropertyValue(variable)).toBe(value.toString());
+    });
+  });
+
+  describe('when resizing and the scroll height is smaller than the offset height', () => {
+    beforeEach(() => {
+      getBinding(findContentEl(), 'gl-resize-observer').value({
+        target: { scrollHeight: 10, offsetHeight: 20 },
+      });
+    });
+
+    it('the button remains invisible', () => {
+      expect(findButton().exists()).toBe(false);
+    });
+
+    it('the aria-expanded property is set to `true`', () => {
+      expect(findContent().attributes('aria-expanded')).toBe('true');
+    });
+  });
+
+  describe.each`
+    scrollHeight | offsetHeight | lessOrMore | showMoreVisible | ariaExpanded
+    ${10}        | ${20}        | ${'less'}  | ${false}        | ${'true'}
+    ${20}        | ${10}        | ${'more'}  | ${true}         | ${'false'}
+  `(
+    'when scroll height is $lessOrMore than the offset height',
+    ({ scrollHeight, offsetHeight, showMoreVisible, ariaExpanded }) => {
+      beforeEach(() => {
+        getBinding(findContentEl(), 'gl-resize-observer').value({
+          target: { scrollHeight, offsetHeight },
+        });
+      });
+
+      it(`the show more button should ${showMoreVisible ? 'be' : 'not be'} visible`, () => {
+        expect(findButton().exists()).toBe(showMoreVisible);
+      });
+
+      it('the content contains the "gl-truncate-text" class', () => {
+        expect(findContentEl().classList).toContain('gl-truncate-text');
+      });
+
+      it(`the "aria-expanded" property is set to ${ariaExpanded}`, () => {
+        expect(findContent().attributes('aria-expanded')).toBe(ariaExpanded);
+      });
+    }
+  );
+
+  describe('when resizing and the scroll height is greater than the offset height', () => {
+    beforeEach(() => {
+      getBinding(findContentEl(), 'gl-resize-observer').value({
+        target: { scrollHeight: 20, offsetHeight: 10 },
+      });
+    });
+
+    it('the button text displays the value for the showMoreText property', () => {
+      expect(findButton().text()).toBe(showMoreText);
+    });
+
+    describe('clicking the button', () => {
+      beforeEach(() => {
+        findButton().trigger('click');
+      });
+
+      it('removes the `gl-truncate-text` class on the content', () => {
+        expect(findContentEl().classList).not.toContain('gl-truncate-text');
+      });
+
+      it('the button text displays the value for the showLessText property', () => {
+        expect(findButton().text()).toBe(showLessText);
+      });
+
+      it('the aria-expanded property is set to `true`', () => {
+        expect(findContent().attributes('aria-expanded')).toBe('true');
+      });
+    });
+  });
+});

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

@@ -0,0 +1,43 @@
+import GlTruncateText from './truncate_text.vue';
+import readme from './truncate_text.md';
+
+const generateProps = ({
+  showMoreText = 'Show more',
+  showLessText = 'Show less',
+  lines = 3,
+  mobileLines = 10,
+} = {}) => ({
+  showMoreText,
+  showLessText,
+  lines,
+  mobileLines,
+});
+
+const content = () => [...Array(15)].map((_, i) => `line ${i + 1}`).join('\n');
+
+const template = `
+  <gl-truncate-text v-bind="$props">
+    <div class="gl-white-space-pre-line">${content()}</div>
+  </gl-truncate-text>`;
+
+const Template = (args, { argTypes }) => ({
+  components: { GlTruncateText },
+  props: Object.keys(argTypes),
+  template,
+});
+
+export const Default = Template.bind({});
+Default.args = generateProps();
+
+export default {
+  title: 'utilities/truncate-text',
+  component: GlTruncateText,
+  parameters: {
+    storyshots: { disable: true },
+    docs: {
+      description: {
+        component: readme,
+      },
+    },
+  },
+};

package/src/components/utilities/truncate_text/truncate_text.vue

@@ -0,0 +1,110 @@
+<script>
+import { GlResizeObserverDirective } from '../../../directives/resize_observer/resize_observer';
+import GlButton from '../../base/button/button.vue';
+import { STATES } from './constants';
+
+export default {
+  name: 'GlTruncateText',
+  components: {
+    GlButton,
+  },
+  directives: {
+    GlResizeObserver: GlResizeObserverDirective,
+  },
+  props: {
+    /**
+     * The text for the 'Show more' button
+     */
+    showMoreText: {
+      type: String,
+      required: false,
+      default: 'Show more',
+    },
+    /**
+     * The text for the 'Show less' button
+     */
+    showLessText: {
+      type: String,
+      required: false,
+      default: 'Show less',
+    },
+    /**
+     * The number of lines that are initially visible on larger screens
+     */
+    lines: {
+      type: Number,
+      required: false,
+      default: 3,
+    },
+    /**
+     * The number of lines that are initially visible on smaller screens
+     */
+    mobileLines: {
+      type: Number,
+      required: false,
+      default: 10,
+    },
+  },
+  data() {
+    return {
+      state: STATES.INITIAL,
+    };
+  },
+  computed: {
+    showTruncationToggle() {
+      return this.isTruncated || this.isExtended;
+    },
+    truncationToggleText() {
+      return this.isTruncated ? this.showMoreText : this.showLessText;
+    },
+    cssVariables() {
+      return { '--lines': this.lines, '--mobile-lines': this.mobileLines };
+    },
+    truncationClasses() {
+      return this.isExtended ? null : 'gl-truncate-text gl-overflow-hidden';
+    },
+    ariaExpanded() {
+      return (!this.isTruncated).toString();
+    },
+    isTruncated() {
+      return this.state === STATES.TRUNCATED;
+    },
+    isExtended() {
+      return this.state === STATES.EXTENDED;
+    },
+  },
+  methods: {
+    onResize({ target }) {
+      if (target.scrollHeight > target.offsetHeight) {
+        this.state = STATES.TRUNCATED;
+      } else if (this.isTruncated) {
+        this.state = STATES.INITIAL;
+      }
+    },
+    toggleTruncation() {
+      if (this.isTruncated) {
+        this.state = STATES.EXTENDED;
+      } else if (this.isExtended) {
+        this.state = STATES.TRUNCATED;
+      }
+    },
+  },
+};
+</script>
+
+<template>
+  <section>
+    <article
+      v-gl-resize-observer="onResize"
+      :class="truncationClasses"
+      :style="cssVariables"
+      :aria-expanded="ariaExpanded"
+    >
+      <!-- @slot Text content -->
+      <slot></slot>
+    </article>
+    <gl-button v-if="showTruncationToggle" variant="link" @click="toggleTruncation">{{
+      truncationToggleText
+    }}</gl-button>
+  </section>
+</template>

package/src/index.js

@@ -103,6 +103,7 @@ export { default as GlFriendlyWrap } from './components/utilities/friendly_wrap/
 export { default as GlIntersperse } from './components/utilities/intersperse/intersperse.vue';
 export { default as GlSprintf } from './components/utilities/sprintf/sprintf.vue';
 export { default as GlTruncate } from './components/utilities/truncate/truncate.vue';
+export { default as GlTruncateText } from './components/utilities/truncate_text/truncate_text.vue';
 
 // Directives
 export { GlModalDirective } from './directives/modal';

package/src/scss/components.scss

@@ -75,6 +75,7 @@
 @import '../components/charts/tooltip/tooltip';
 @import '../components/shared_components/charts/tooltip_default_format';
 @import '../components/utilities/truncate/truncate';
+@import '../components/utilities/truncate_text/truncate_text';
 @import '../components/base/new_dropdowns/dropdown';
 @import '../components/base/new_dropdowns/dropdown_item';
 @import '../components/base/new_dropdowns/listbox/listbox';