@gitlab/duo-ui 0.1.0

package/src/components/shared_components/charts/tooltip_default_format.scss

@@ -0,0 +1,18 @@
+.gl-charts-tooltip-default-format-series {
+  @apply gl-flex;
+  @apply gl-justify-between;
+
+  &-label,
+  &-value {
+    @apply gl-text-sm;
+  }
+
+  &-label {
+    @apply gl-leading-normal;
+    @apply gl-mr-7;
+  }
+
+  &-value {
+    @apply gl-font-bold;
+  }
+}

package/src/components/shared_components/charts/tooltip_default_format.vue

@@ -0,0 +1,32 @@
+<script>
+import SeriesLabel from '../../charts/series_label/series_label.vue';
+
+export default {
+  name: 'TooltipDefaultFormat',
+  components: {
+    SeriesLabel,
+  },
+  props: {
+    tooltipContent: {
+      type: Object,
+      required: true,
+    },
+  },
+};
+</script>
+<template>
+  <div>
+    <div
+      v-for="(value, label) in tooltipContent"
+      :key="`${label}${value.value}`"
+      class="gl-charts-tooltip-default-format-series"
+    >
+      <series-label :color="value.color" class="gl-charts-tooltip-default-format-series-label">
+        {{ label }}
+      </series-label>
+      <div class="gl-charts-tooltip-default-format-series-value">
+        <slot name="tooltip-value" :value="value.value">{{ value.value }}</slot>
+      </div>
+    </div>
+  </div>
+</template>

package/src/components/shared_components/clear_icon_button/clear_icon_button.scss

@@ -0,0 +1,10 @@
+.gl-clear-icon-button {
+  @apply gl-bg-transparent;
+  @apply gl-border-none;
+  @apply gl-cursor-pointer;
+  @apply gl-text-gray-500;
+
+  &:focus {
+    @apply gl-focus;
+  }
+}

package/src/components/shared_components/clear_icon_button/clear_icon_button.vue

@@ -0,0 +1,43 @@
+<script>
+import { GlTooltipDirective } from '../../../directives/tooltip';
+import GlButton from '../../base/button/button.vue';
+import { translate } from '../../../utils/i18n';
+
+export default {
+  name: 'ClearIconButton',
+  components: {
+    GlButton,
+  },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
+  props: {
+    title: {
+      type: String,
+      required: false,
+      default: () => translate('ClearIconButton.title', 'Clear'),
+    },
+    tooltipContainer: {
+      required: false,
+      default: false,
+      validator: (value) =>
+        value === false || typeof value === 'string' || value instanceof HTMLElement,
+    },
+  },
+};
+</script>
+
+<template>
+  <gl-button
+    v-gl-tooltip.hover="{ container: tooltipContainer }"
+    variant="default"
+    category="tertiary"
+    class="gl-clear-icon-button"
+    size="small"
+    name="clear"
+    icon="clear"
+    :title="title"
+    :aria-label="title"
+    v-on="$listeners"
+  />
+</template>

package/src/components/shared_components/close_button/close_button.vue

@@ -0,0 +1,29 @@
+<script>
+import { translate } from '../../../utils/i18n';
+import GlButton from '../../base/button/button.vue';
+
+export default {
+  name: 'CloseButton',
+  components: {
+    GlButton,
+  },
+  props: {
+    label: {
+      type: String,
+      required: false,
+      default: () => translate('CloseButton.title', 'Close'),
+    },
+  },
+};
+</script>
+
+<template>
+  <gl-button
+    category="tertiary"
+    size="small"
+    icon="close"
+    :aria-label="label"
+    v-bind="$attrs"
+    v-on="$listeners"
+  />
+</template>

package/src/components/utilities/animated_number/animated_number.md

@@ -0,0 +1,6 @@
+Animated numbers provide a signifier that values are being changed.
+
+## Usage
+
+The animated number component can be used with or without decimal places. Decimal places will
+not be rounded if chosen to be omitted.

package/src/components/utilities/animated_number/animated_number.vue

@@ -0,0 +1,99 @@
+<script>
+import { formatNumberToLocale } from '../../../utils/number_utils';
+
+export default {
+  name: 'AnimatedNumber',
+  props: {
+    number: {
+      type: Number,
+      required: true,
+    },
+    /**
+     * Controls how long it takes for the animation to complete.
+     */
+    duration: {
+      type: Number,
+      required: false,
+      default: 2000,
+    },
+    /**
+     * Controls the number of decimal places displayed in the output.
+     */
+    decimalPlaces: {
+      type: Number,
+      required: false,
+      default: 0,
+    },
+    useDelimiters: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    animateOnMount: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      displayNumber: 0,
+      startTime: null,
+    };
+  },
+  computed: {
+    animatedNumber() {
+      const number = this.displayNumber.toFixed(this.decimalPlaces);
+
+      if (this.useDelimiters) {
+        return formatNumberToLocale(number, { minimumFractionDigits: this.decimalPlaces });
+      }
+
+      return number;
+    },
+  },
+  ready() {
+    this.displayNumber = this.number ? this.number : 0;
+  },
+  watch: {
+    number() {
+      this.animate();
+    },
+  },
+  mounted() {
+    if (this.animateOnMount) {
+      this.animate();
+    } else {
+      this.displayNumber = this.number;
+    }
+  },
+  methods: {
+    animate() {
+      this.$emit('animating');
+      window.requestAnimationFrame(this.count);
+    },
+    count(timestamp) {
+      if (!this.startTime) {
+        this.startTime = timestamp;
+      }
+
+      const progress = timestamp - this.startTime;
+
+      if (progress < this.duration) {
+        if (this.displayNumber !== this.number) {
+          const change = (this.number - this.displayNumber) / (this.duration / 100);
+          this.displayNumber += change;
+        }
+        window.requestAnimationFrame(this.count);
+      } else {
+        this.displayNumber = this.number; // Ensures that the final number is accurate.
+        this.startTime = null;
+        this.$emit('animated');
+      }
+    },
+  },
+};
+</script>
+<template>
+  <span>{{ animatedNumber }}</span>
+</template>

package/src/components/utilities/friendly_wrap/friendly_wrap.md

@@ -0,0 +1,66 @@
+The friendly-wrap component lets you wrap text in a predictable way by appending [`<wbr>`] elements
+to specific break-symbols.
+
+[`<wbr>`]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/wbr
+
+## Internet Explorer 11
+
+IE11 doesn't support the `<wbr>` element: <https://caniuse.com/#search=wbr>
+To use this component on IE11, you'll need some CSS to preserve its behaviour:
+
+```css
+wbr {
+  display: inline-block;
+}
+```
+
+## Usage
+
+### Default
+
+By default, `GlFriendlyWrap` wraps text with slashes (`/`) as the break-symbol, which is especially
+useful when displaying paths or URLs:
+
+```html
+<gl-friendly-wrap text="/some/file/path" />
+```
+
+The code above renders to the following HTML:
+
+```html
+<span class="text-break">/<wbr>some/<wbr>file/<wbr>path</span>
+```
+
+### Custom symbols
+
+Multiple custom break-symbols can be defined via the `GlFriendlyWrap` prop:
+
+```html
+<gl-friendly-wrap
+  :symbols="[';', '-', '.']"
+  text="some;text-that.needs;to-be.wrapped"
+/>
+```
+
+Which renders to:
+
+```html
+<span class="text-break">some;<wbr>text-<wbr>that.<wbr>needs;<wbr>to-<wbr>be.<wbr>wrapped</span>
+```
+
+### Break words
+
+Symbols can be words too:
+
+```html
+<gl-friendly-wrap
+  :symbols="['and']"
+  text="it goes on and on and on and on"
+/>
+```
+
+Which renders to:
+
+```html
+<span class="text-break">it goes on and<wbr> on and<wbr> on and<wbr> on</span>
+```

package/src/components/utilities/friendly_wrap/friendly_wrap.vue

@@ -0,0 +1,33 @@
+<script>
+import { intersperse } from '../../../utils/data_utils';
+import { splitAfterSymbols } from '../../../utils/string_utils';
+
+export default {
+  name: 'GlFriendlyWrap',
+  functional: true,
+  props: {
+    /**
+     * Text to be wrapped.
+     */
+    text: {
+      type: String,
+      required: true,
+    },
+    /**
+     * A list of strings representing the break-words.
+     */
+    symbols: {
+      type: Array,
+      required: false,
+      default: () => ['/'],
+    },
+  },
+  render(createElement, { props }) {
+    const { symbols, text } = props;
+    const textParts = splitAfterSymbols(symbols, text ?? '');
+    const content = intersperse(() => createElement('wbr'), textParts);
+
+    return createElement('span', { class: 'text-break' }, content);
+  },
+};
+</script>

package/src/components/utilities/intersection_observer/intersection_observer.md

@@ -0,0 +1,16 @@
+This intersection observer component is an invisible watcher that emits events when it appears and
+dissapears from view.
+
+It acts a a vue-friendly wrapper around the [intersection observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API).
+
+Because of it's simplicity you can use it for a lot of different things.
+It's especially helpful for the lazy loading of images, and infinite scrolling of lists.
+
+Anything slotted inside this component will become the element that is being observed.
+
+This slot can also be used as a fallback for the browsers that don't support the intersection
+observer, or in the case that the observer fails to work.
+For example, adding a "Fetch more posts" button inside an observer that should fetch more posts
+automatically when visible. If the observer fails to work for any reason, the button will still be
+clickable, and the experience preserved. Please use a fallback wherever possible as
+**the intersection observer API is not supported in IE11**.

package/src/components/utilities/intersection_observer/intersection_observer.vue

@@ -0,0 +1,67 @@
+<script>
+import memoize from 'lodash/memoize';
+
+const getObserver = memoize(
+  (options) =>
+    new IntersectionObserver((entries) => {
+      entries.forEach((entry) => {
+        entry.target.$_gl_intersectionHandler(entry);
+      });
+    }, options || {})
+);
+
+export default {
+  name: 'GlIntersectionObserver',
+  props: {
+    /**
+     * Extra options to pass directly to the intersection observer API.
+     */
+    options: {
+      type: Object,
+      required: false,
+      default: null,
+    },
+  },
+  mounted() {
+    const observer = getObserver(this.options);
+
+    this.$el.$_gl_intersectionHandler = (entry) => {
+      /**
+       * Emitted when the element's visibility changes
+       */
+      this.$emit('update', entry);
+
+      if (entry.isIntersecting) {
+        /**
+         * Emitted when the element appears on the page
+         */
+        this.$emit('appear');
+      } else {
+        /**
+         * Emitted when the element disappears from the page
+         */
+        this.$emit('disappear');
+      }
+    };
+    this.$el.$_gl_intersectionObserver = observer;
+
+    observer.observe(this.$el);
+  },
+  destroyed() {
+    this.$el.$_gl_intersectionObserver.unobserve(this.$el);
+    delete this.$el.$_gl_intersectionHandler;
+    delete this.$el.$_gl_intersectionObserver;
+  },
+  // Expose getObserver method for tests
+  getObserver,
+};
+</script>
+
+<template>
+  <div>
+    <!--
+    @slot The element you wish to observe, or a fallback if the observer doesn't work.
+    -->
+    <slot></slot>
+  </div>
+</template>

package/src/components/utilities/intersperse/intersperse.md

@@ -0,0 +1,90 @@
+The intersperse component separates a list of elements
+by a given character (the default is `, `).
+
+It takes all direct descendants of its default slot and inserts
+the given separator between each item:
+
+`item 1, item 2, item 3`
+
+Optionally the character used for separating each item and the last separator can be set
+independently:
+
+* `separator="/"`  renders `item 1/item 2/item 3`
+* `lastSeparator=" and "` will render `item 1, item 2, and item 3`
+* `lastSeparator=" and "` and given two items will render `item 1 and item 2`
+
+**Note**:
+
+The component provides an inline context since the result is wrapped in a `span`.
+
+Also, whitespace elements that are direct children of the default-slot get removed to ensure
+consistent formatting.
+
+## Usage
+
+### Default
+
+```html
+<gl-intersperse>
+    <span>Item 1</span>
+    <span>Item 2</span>
+    <span>Item 3</span>
+</gl-intersperse>
+```
+
+This renders to the following HTML:
+
+```html
+<span><span>Item 1</span>, <span>Item 2</span>, <span>Item 3</span></span>
+```
+
+### Custom Separator
+
+A custom separator can be defined via the `separator` prop:
+
+```html
+<gl-intersperse separator="/">
+    <span>Item 1</span>
+    <span>Item 2</span>
+    <span>Item 3</span>
+</gl-intersperse>
+```
+
+This renders to the following HTML:
+
+```html
+<span><span>Item 1</span>/<span>Item 2</span>/<span>Item 3</span></span>
+```
+
+### Custom Last Separator
+
+A custom last separator can be defined via the `lastSeparator` prop:
+
+```html
+<gl-intersperse last-separator=" and ">
+    <span>Item 1</span>
+    <span>Item 2</span>
+    <span>Item 3</span>
+</gl-intersperse>
+```
+
+This renders to the following HTML:
+
+```html
+<span><span>Item 1</span>, <span>Item 2</span>, and <span>Item 3</span></span>
+```
+
+A custom last separator used on two items will only place `lastSeparator` between them:
+
+```html
+<gl-intersperse last-separator=" and ">
+    <span>Item 1</span>
+    <span>Item 2</span>
+</gl-intersperse>
+```
+
+This renders to the following HTML:
+
+```html
+<span><span>Item 1</span> and <span>Item 2</span></span>
+```

package/src/components/utilities/intersperse/intersperse.vue

@@ -0,0 +1,60 @@
+<!-- eslint-disable vue/multi-word-component-names -->
+<script>
+import compose from 'lodash/fp/compose';
+import fill from 'lodash/fp/fill';
+import filter from 'lodash/fp/filter';
+
+import { intersperse, insert } from '../../../utils/data_utils';
+
+const containsWhitespaceOnly = (vNode) => vNode.text.trim() === '';
+const isTag = (vNode) => typeof vNode.tag === 'string';
+const filterWhitespaceNodes = filter((vNode) => isTag(vNode) || !containsWhitespaceOnly(vNode));
+
+const insertAfterSecondLastItem = insert(-1);
+const replaceSecondLastItem = fill(-2, -1);
+
+// handles the addition of the lastSeparator in these two cases:
+// item1, item2, item3 => item1, item2, and item3
+// item1, item2 => item1 and item2
+const addLastSeparator = (lastSeparator) => (items) => {
+  if (!lastSeparator) {
+    return items;
+  }
+
+  return items.length > 3
+    ? insertAfterSecondLastItem(lastSeparator, items)
+    : replaceSecondLastItem(lastSeparator, items);
+};
+
+export default {
+  name: 'GlIntersperse',
+  functional: true,
+  props: {
+    separator: {
+      type: String,
+      default: ', ',
+      required: false,
+    },
+    lastSeparator: {
+      type: String,
+      default: '',
+      required: false,
+    },
+  },
+  render(createElement, context) {
+    const {
+      props: { separator, lastSeparator },
+      slots,
+      data,
+    } = context;
+
+    const filterAndSeparate = compose(
+      addLastSeparator(lastSeparator),
+      intersperse(separator),
+      filterWhitespaceNodes
+    );
+
+    return createElement('span', data, filterAndSeparate(slots().default));
+  },
+};
+</script>