@gitlab/duo-ui 0.1.0 → 0.3.0

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

@@ -1,43 +0,0 @@
-<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

@@ -1,29 +0,0 @@
-<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

@@ -1,6 +0,0 @@
-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

@@ -1,99 +0,0 @@
-<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

@@ -1,66 +0,0 @@
-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

@@ -1,33 +0,0 @@
-<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

@@ -1,16 +0,0 @@
-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

@@ -1,67 +0,0 @@
-<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

@@ -1,90 +0,0 @@
-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

@@ -1,60 +0,0 @@
-<!-- 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>