@gitlab/duo-ui 0.1.0 → 0.2.0

package/src/utils/stories_constants.js

@@ -1,30 +0,0 @@
-/**
- * Arg types subcategories to be used to organize props within arg tables
- */
-
-export const ARG_TYPE_SUBCATEGORY_LOOK_AND_FEEL = 'Look & feel';
-export const ARG_TYPE_SUBCATEGORY_STATE = 'State';
-export const ARG_TYPE_SUBCATEGORY_SEARCH = 'Search';
-export const ARG_TYPE_SUBCATEGORY_ACCESSIBILITY = 'Accessibility';
-export const ARG_TYPE_SUBCATEGORY_INFINITE_SCROLL = 'Infinite scroll';
-
-/**
- * These are used to test varying lengths of series names
- */
-export const SERIES_NAME_SHORT = 'SERIES_NAME_SHORT';
-export const SERIES_NAME_LONG = 'SERIES_NAME_LONG';
-export const SERIES_NAME_LONG_WITHOUT_SPACES = 'SERIES_NAME_LONG_WITHOUT_SPACES';
-
-export const SERIES_NAME = {
-  [SERIES_NAME_SHORT]: 'Series ',
-  [SERIES_NAME_LONG]:
-    'Series name long. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt interdum sapien ut blandit. Nulla fermentum nisi id euismod vulputate. END',
-  [SERIES_NAME_LONG_WITHOUT_SPACES]:
-    'Series_name_long._Lorem_ipsum_dolor_sit_amet,_consectetur_adipiscing_elit._Sed_tincidunt_interdum_sapien_ut_blandit._Nulla_fermentum_nisi_id_euismod_vulputate._END',
-};
-
-/**
- * Reused constants for ListBox
- */
-
-export const LISTBOX_CONTAINER_HEIGHT = '370px';

package/src/utils/stories_utils.js

@@ -1,5 +0,0 @@
-/**
- * Builds the parameters object disable one or multiple controls.
- */
-export const disableControls = (controls = []) =>
-  Object.fromEntries(controls.map((control) => [control, { control: { disable: true } }]));

package/src/utils/story_decorators/container.js

@@ -1,14 +0,0 @@
-/**
- * Return a story decorator function, which wraps the given story in a `div`
- * element with the given `style` attributes.
- *
- * @param {object} style The style attribute to apply to the container.
- * @return {function} The story decorator.
- */
-export const makeContainer =
-  (style, tag = 'div') =>
-  (Story) => ({
-    render(h) {
-      return h(tag, { style }, [h(Story())]);
-    },
-  });

package/src/utils/string_utils.js

@@ -1,79 +0,0 @@
-import emojiRegexFactory from 'emoji-regex';
-
-/**
- * Split the given string after each occurrence of each of the given symbols.
- *
- * Symbols are strings, and can be of length one or more. Zero-length symbols
- * are ignored.
- *
- * Unlike with `String::split`, the symbol is left in results, with
- * the split occurring _after_ the symbol.
- *
- * For example:
- *
- *     splitAfterSymbols(['/'], 'a/b/c')    // ['a/', 'b/', 'c']
- *     splitAfterSymbols(['foo'], 'foobar') // ['foo', 'bar']
- *
- * @param {string[]} symbols The symbols to split the string by.
- * @param {string} string The string to split.
- * @returns {string[]} The resulting strings.
- */
-export const splitAfterSymbols = (symbols, string) => {
-  const textParts = [];
-  let textPartStartIndex = 0;
-
-  if (string.length === 0) {
-    return [string];
-  }
-
-  for (let i = 0; i < string.length; ) {
-    let symbolFound = false;
-
-    for (let j = 0; j < symbols.length; j += 1) {
-      const symbol = symbols[j];
-
-      if (!symbol) {
-        // eslint-disable-next-line no-continue
-        continue;
-      }
-
-      symbolFound = string.slice(i, i + symbol.length) === symbol;
-
-      if (symbolFound) {
-        const textPartEndIndex = i + symbol.length;
-        const textPart = string.slice(textPartStartIndex, textPartEndIndex);
-        textParts.push(textPart);
-        textPartStartIndex = textPartEndIndex;
-        i = textPartStartIndex;
-        break;
-      }
-    }
-
-    if (!symbolFound) {
-      i += 1;
-    }
-  }
-
-  const final = string.slice(textPartStartIndex);
-  if (final) {
-    textParts.push(final);
-  }
-
-  return textParts;
-};
-
-const startsWithEmojiRegex = `^(${emojiRegexFactory().source})`;
-
-export const getAvatarChar = (name) => {
-  if (name) {
-    // Check if string starts with an emoji (which could be multiple characters and zero-width joined)
-    const match = name.match(startsWithEmojiRegex);
-    if (match) {
-      // Return the first match
-      return match[0];
-    }
-    return name.charAt(0).toUpperCase();
-  }
-
-  return '';
-};

package/src/utils/svgs/svg_paths.js

@@ -1,10 +0,0 @@
-export const scrollHandleSvgPath =
-  'path://M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zM6 4a1 1 0 0 0-1 1v6a1 1 0 0 0 2 0V5a1 1 0 0 0-1-1zm4 0a1 1 0 0 0-1 1v6a1 1 0 0 0 2 0V5a1 1 0 0 0-1-1z';
-export const marqueeSelectionSvgPath =
-  'path://M-6.251 -7L-7 -7L-7 -4.753A0.749 0.749 0 0 0 -5.502 -4.753L-5.502 -5.502L-4.753 -5.502A0.749 0.749 0 0 0 -4.753 -7L-6.251 -7ZM-6.251 -2.0067A0.749 0.749 0 0 1 -5.502 -1.2577L-5.502 1.239A0.749 0.749 0 1 1 -7 1.239L-7 -1.2577A0.749 0.749 0 0 1 -6.251 -2.0067ZM0.8455 0.8455L2.3505 4.3578L4.3578 2.3505L0.8455 0.8455ZM0.2883 -1.023L5.6251 1.264A0.9987 0.9987 0 0 1 5.9387 2.8888L4.943 3.8835L6.7616 5.703A0.749 0.749 0 1 1 5.703 6.7616L3.8835 4.943L2.8888 5.9387A0.9987 0.9987 0 0 1 1.264 5.6251L-1.023 0.2883C-1.3785 -0.5406 -0.5406 -1.3785 0.2883 -1.023ZM-6.251 6.9813L-7 6.9813L-7 4.7343A0.749 0.749 0 1 1 -5.502 4.7343L-5.502 5.4833L-4.753 5.4833A0.749 0.749 0 1 1 -4.753 6.9813L-6.251 6.9813ZM-2.0067 -6.251A0.749 0.749 0 0 1 -1.2577 -7L1.239 -7A0.749 0.749 0 1 1 1.239 -5.502L-1.2577 -5.502A0.749 0.749 0 0 1 -2.0067 -6.251ZM6.2323 -7L6.9813 -7L6.9813 -4.753A0.749 0.749 0 1 1 5.4833 -4.753L5.4833 -5.502L4.7343 -5.502A0.749 0.749 0 1 1 4.7343 -7L6.2323 -7Z';
-export const redoSvgPath =
-  'path://M1.8332 -6.7552A7.0001 7.0001 0 0 0 -5.6875 -4.082L-5.6875 -5.4689A0.6563 0.6563 0 0 0 -7 -5.4689L-7 -1.7501L-3.2812 -1.7501A0.6563 0.6563 0 0 0 -3.2812 -3.0626L-4.7923 -3.0626A5.6876 5.6876 0 1 1 -5.2526 2.1822A0.6563 0.6563 0 0 0 -6.4645 2.6853A7.0001 7.0001 0 1 0 1.8332 -6.7561Z';
-export const clearAllSvgPath =
-  'path://M-1.8332 -6.7552A7.0001 7.0001 0 0 1 5.6875 -4.082L5.6875 -5.4689A0.6563 0.6563 0 1 1 7 -5.4689L7 -1.7501L3.2812 -1.7501A0.6563 0.6563 0 1 1 3.2812 -3.0626L4.7923 -3.0626A5.6876 5.6876 0 1 0 5.2526 2.1822A0.6563 0.6563 0 1 1 6.4645 2.6853A7.0001 7.0001 0 1 1 -1.8332 -6.7561Z';
-export const downloadSvgPath =
-  'path://M3.78 -0.841A0.75 0.75 0 0 0 2.72 -0.841L0.75 1.129L0.75 -6.25A0.75 0.75 0 0 0 -0.75 -6.25L-0.75 1.129L-2.72 -0.841A0.75 0.75 0 0 0 -3.78 0.219L-0.53 3.469L0 4L0.53 3.47L3.78 0.22A0.75 0.75 0 0 0 3.78 -0.841ZM-5.5 1.75A0.75 0.75 0 0 0 -7 1.75L-7 5A2 2 0 0 0 -5 7L5 7A2 2 0 0 0 7 5L7 1.75A0.75 0.75 0 0 0 5.5 1.75L5.5 5A0.5 0.5 0 0 1 5 5.5L-5 5.5A0.5 0.5 0 0 1 -5.5 5L-5.5 1.75Z';

package/src/utils/use_fake_date.js

@@ -1,27 +0,0 @@
-import MockDate from 'mockdate';
-
-/**
- * When applied to a story, this mixin mocks the current date to make
- * visual tests that rely on the date deterministic
- *
- * Usage:
- *
- * import { useFakeDate } from '../../../../tests/utils/use_fake_date';
- * documentedStoriesOf('some|story')
- * .add('default', () => ({
- *   mixins: [useFakeDate()],
- * })
- */
-export const useFakeDate = () => {
-  if (process.env.IS_VISUAL_TEST) {
-    return {
-      created() {
-        MockDate.set('2020-01-10', 0);
-      },
-      destroyed() {
-        MockDate.reset();
-      },
-    };
-  }
-  return {};
-};

package/src/utils/use_mock_intersection_observer.js

@@ -1,96 +0,0 @@
-/* global jest, beforeEach, afterEach */
-/* eslint-disable class-methods-use-this, max-classes-per-file, camelcase */
-import isMatch from 'lodash/isMatch';
-
-/**
- * This class gives us a JSDom friendly DOM observer which we can manually trigger in tests
- *
- * Use this in place of MutationObserver or IntersectionObserver
- *
- * This class is largely influenced from [a test helper][1] in the main GitLab project
- *
- * [1]: https://gitlab.com/gitlab-org/gitlab/blob/a123813c63147392b95cd03c4744ae9db0575b0f/spec/frontend/helpers/mock_dom_observer.js#L95
- */
-class MockObserver {
-  constructor(cb) {
-    this.$_cb = cb;
-    this.$_observers = [];
-  }
-
-  observe(node, options = {}) {
-    this.$_observers.push([node, options]);
-  }
-
-  disconnect() {
-    this.$_observers = [];
-  }
-
-  takeRecords() {}
-
-  // eslint-disable-next-line camelcase
-  $_triggerObserve(nodeParam, { entry = {}, options = {} } = {}) {
-    const nodes = this.$_getNodesFromParam(nodeParam);
-
-    nodes.forEach((node) => {
-      if (this.$_hasObserver(node, options)) {
-        this.$_cb([{ target: node, ...entry }]);
-      }
-    });
-  }
-
-  // eslint-disable-next-line camelcase
-  $_hasObserver(node, options = {}) {
-    return this.$_observers.some(
-      ([obvNode, obvOptions]) => node === obvNode && isMatch(options, obvOptions)
-    );
-  }
-
-  $_getNodesFromParam(nodeParam) {
-    if (!nodeParam) {
-      return this.$_observers.map(([node]) => node);
-    }
-    if (!Array.isArray(nodeParam)) {
-      return [nodeParam];
-    }
-
-    return nodeParam;
-  }
-}
-
-class MockIntersectionObserver extends MockObserver {
-  unobserve(node) {
-    this.$_observers = this.$_observers.filter(([obvNode]) => node !== obvNode);
-  }
-}
-
-export const useMockIntersectionObserver = () => {
-  let instances;
-  let origObserver;
-
-  beforeEach(() => {
-    instances = [];
-    origObserver = global.IntersectionObserver;
-    global.IntersectionObserver = jest.fn().mockImplementation((...args) => {
-      const mockObserver = new MockIntersectionObserver(...args);
-
-      instances.push(mockObserver);
-
-      return mockObserver;
-    });
-  });
-
-  afterEach(() => {
-    instances = [];
-    global.IntersectionObserver = origObserver;
-  });
-
-  const trigger = (observer, ...args) => {
-    observer.$_triggerObserve(...args);
-  };
-
-  const getInstances = () => {
-    return instances;
-  };
-
-  return { getInstances, trigger };
-};

package/src/utils/utils.js

@@ -1,206 +0,0 @@
-import { isVisible } from '../vendor/bootstrap-vue/src/utils/dom';
-import { COMMA, CONTRAST_LEVELS, labelColorOptions, focusableTags } from './constants';
-
-export function debounceByAnimationFrame(fn) {
-  let requestId;
-
-  return function debounced(...args) {
-    if (requestId) {
-      window.cancelAnimationFrame(requestId);
-    }
-    requestId = window.requestAnimationFrame(() => fn.apply(this, args));
-  };
-}
-
-export function throttle(fn) {
-  let frameId = null;
-
-  return (...args) => {
-    if (frameId) {
-      return;
-    }
-
-    frameId = window.requestAnimationFrame(() => {
-      fn(...args);
-      frameId = null;
-    });
-  };
-}
-
-export function rgbFromHex(hex) {
-  const cleanHex = hex.replace('#', '');
-  const rgb =
-    cleanHex.length === 3
-      ? cleanHex.split('').map((val) => val + val)
-      : cleanHex.match(/[\da-f]{2}/gi);
-  const [r, g, b] = rgb.map((val) => parseInt(val, 16));
-  return [r, g, b];
-}
-
-export function rgbFromString(color, sub) {
-  const rgb = color.substring(sub, color.length - 1).split(COMMA);
-  const [r, g, b] = rgb.map((i) => parseInt(i, 10));
-  return [r, g, b];
-}
-
-export function hexToRgba(hex, opacity = 1) {
-  const [r, g, b] = rgbFromHex(hex);
-
-  return `rgba(${r}, ${g}, ${b}, ${opacity})`;
-}
-
-export function toSrgb(value) {
-  const normalized = value / 255;
-  return normalized <= 0.03928 ? normalized / 12.92 : ((normalized + 0.055) / 1.055) ** 2.4;
-}
-
-export function relativeLuminance(rgb) {
-  // WCAG 2.1 formula: https://www.w3.org/TR/WCAG21/#dfn-relative-luminance
-  // -
-  // WCAG 3.0 will use APAC
-  // Using APAC would be the ultimate goal, but was dismissed by engineering as of now
-  // See https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/3418#note_1370107090
-  return 0.2126 * toSrgb(rgb[0]) + 0.7152 * toSrgb(rgb[1]) + 0.0722 * toSrgb(rgb[2]);
-}
-
-export function colorFromBackground(backgroundColor, contrastRatio = 2.4) {
-  let color;
-  const lightColor = rgbFromHex('#FFFFFF');
-  const darkColor = rgbFromHex('#18171d');
-
-  if (backgroundColor.startsWith('#')) {
-    color = rgbFromHex(backgroundColor);
-  } else if (backgroundColor.startsWith('rgba(')) {
-    color = rgbFromString(backgroundColor, 5);
-  } else if (backgroundColor.startsWith('rgb(')) {
-    color = rgbFromString(backgroundColor, 4);
-  }
-
-  const luminance = relativeLuminance(color);
-  const lightLuminance = relativeLuminance(lightColor);
-  const darkLuminance = relativeLuminance(darkColor);
-
-  const contrastLight = (lightLuminance + 0.05) / (luminance + 0.05);
-  const contrastDark = (luminance + 0.05) / (darkLuminance + 0.05);
-
-  // Using a default threshold contrast of 2.4 instead of 3
-  // as this will solve weird color combinations in the mid tones
-  return contrastLight >= contrastRatio || contrastLight > contrastDark
-    ? labelColorOptions.light
-    : labelColorOptions.dark;
-}
-
-export function getColorContrast(foreground, background) {
-  // Formula: http://www.w3.org/TR/2008/REC-WCAG20-20081211/#contrast-ratiodef
-  const backgroundLuminance = relativeLuminance(rgbFromHex(background)) + 0.05;
-  const foregroundLuminance = relativeLuminance(rgbFromHex(foreground)) + 0.05;
-
-  let score = backgroundLuminance / foregroundLuminance;
-  if (foregroundLuminance > backgroundLuminance) {
-    score = 1 / score;
-  }
-
-  const level = CONTRAST_LEVELS.find(({ min, max }) => {
-    return score >= min && score < max;
-  });
-
-  return {
-    score: (Math.round(score * 10) / 10).toFixed(1),
-    level,
-  };
-}
-
-export function uid() {
-  return Math.random().toString(36).substring(2);
-}
-
-/**
- * Receives an element and validates that it can be focused
- * @param { HTMLElement } The element we want to validate
- * @return { boolean } Is the element focusable
- */
-
-export function isElementFocusable(elt) {
-  if (!elt) return false;
-
-  const { tagName } = elt;
-
-  const isValidTag = focusableTags.includes(tagName);
-  const hasValidType = elt.getAttribute('type') !== 'hidden';
-  const isDisabled = elt.getAttribute('disabled') === '' || elt.getAttribute('disabled');
-  const hasValidZIndex = elt.getAttribute('z-index') !== '-1';
-  const isInvalidAnchorTag = tagName === 'A' && !elt.getAttribute('href');
-
-  return isValidTag && hasValidType && !isDisabled && hasValidZIndex && !isInvalidAnchorTag;
-}
-
-/**
- * Receives an element and validates that it is reachable via sequential keyboard navigation
- * @param { HTMLElement } The element to validate
- * @return { boolean } Is the element focusable in a sequential tab order
- */
-
-export function isElementTabbable(el) {
-  if (!el) return false;
-
-  const tabindex = parseInt(el.getAttribute('tabindex'), 10);
-  return tabindex > -1;
-}
-
-/**
- * Receives an array of HTML elements and focus the first one possible
- * @param { Array.<HTMLElement> } An array of element to potentially focus
- * @return { undefined }
- */
-
-export function focusFirstFocusableElement(elts) {
-  const focusableElt = elts.find((el) => isElementFocusable(el));
-
-  if (focusableElt) focusableElt.focus();
-}
-
-/**
- * Returns true if the current environment is considered a development environment (it's not
- * production or test).
- *
- * @returns {boolean}
- */
-export function isDev() {
-  return !['test', 'production'].includes(process.env.NODE_ENV);
-}
-
-/**
- * Prints a warning message to the console in non-test and non-production environments.
- * @param {string} message message to print to the console
- * @param {HTMLElement} element component that triggered the warning
- */
-export function logWarning(message = '', element = '') {
-  if (message.length && isDev()) {
-    console.warn(message, element); // eslint-disable-line no-console
-  }
-}
-
-/**
- * Stop default event handling and propagation
- */
-export function stopEvent(
-  event,
-  { preventDefault = true, stopPropagation = true, stopImmediatePropagation = false } = {}
-) {
-  if (preventDefault) {
-    event.preventDefault();
-  }
-  if (stopPropagation) {
-    event.stopPropagation();
-  }
-  if (stopImmediatePropagation) {
-    event.stopImmediatePropagation();
-  }
-}
-
-/**
- * Return an Array of visible items
- */
-export function filterVisible(els) {
-  return (els || []).filter((el) => isVisible(el));
-}

package/src/utils.js

@@ -1,4 +0,0 @@
-export { GlBreakpointInstance, breakpoints } from './utils/breakpoints';
-
-export * as formValidators from './components/base/form/form_fields/validators';
-export * as formMappers from './components/base/form/form_fields/mappers';