@gitlab/duo-ui 0.1.0

package/src/utils/stories_constants.js

@@ -0,0 +1,30 @@
+/**
+ * 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

@@ -0,0 +1,5 @@
+/**
+ * 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

@@ -0,0 +1,14 @@
+/**
+ * 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

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

@@ -0,0 +1,10 @@
+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/test_utils.js

@@ -0,0 +1,33 @@
+/**
+ * Wrapper around setTimeout which executes immediately in visual tests
+ * in order to avoid flaky tests
+ */
+export function setStoryTimeout(fn, timeout) {
+  return setTimeout(fn, process.env.IS_VISUAL_TEST ? 0 : timeout);
+}
+
+// adopted this method from Bootstraps utils
+// https://github.com/bootstrap-vue/bootstrap-vue/blob/2fd03f0b1d0cc41f9930078ba8b1c16b10e4ac2f/tests/utils.js#L6
+export const waitForAnimationFrame = () =>
+  new Promise((resolve) => {
+    requestAnimationFrame(resolve);
+  });
+
+export const getResetAnimationsCSS = () => `
+  *, *::after, *::before {
+    -webkit-transition: none !important;
+    -moz-transition: none !important;
+    -ms-transition: none !important;
+    -o-transition: none !important;
+    transition: none !important;
+
+    -webkit-animation: none !important;
+    -moz-animation: none !important;
+    -ms-animation: none !important;
+    -o-animation: none !important;
+    animation: none !important;
+  }
+
+  input, textarea {
+    caret-color: transparent !important;
+  }`;

package/src/utils/use_fake_date.js

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

@@ -0,0 +1,96 @@
+/* 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

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

@@ -0,0 +1,4 @@
+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';

package/src/vendor/bootstrap/scss/_alert.scss

@@ -0,0 +1,52 @@
+//
+// Base styles
+//
+
+.alert {
+  position: relative;
+  padding: $alert-padding-y $alert-padding-x;
+  margin-bottom: $alert-margin-bottom;
+  border: $alert-border-width solid transparent;
+  @include border-radius($alert-border-radius);
+}
+
+// Headings for larger alerts
+.alert-heading {
+  // Specified to prevent conflicts of changing $headings-color
+  color: inherit;
+}
+
+// Provide class for links that match alerts
+.alert-link {
+  font-weight: $alert-link-font-weight;
+}
+
+
+// Dismissible alerts
+//
+// Expand the right padding and account for the close button's positioning.
+
+.alert-dismissible {
+  padding-right: $close-font-size + $alert-padding-x * 2;
+
+  // Adjust close link position
+  .close {
+    position: absolute;
+    top: 0;
+    right: 0;
+    z-index: 2;
+    padding: $alert-padding-y $alert-padding-x;
+    color: inherit;
+  }
+}
+
+
+// Alternate styles
+//
+// Generate contextual modifier classes for colorizing the alert.
+
+@each $color, $value in $theme-colors {
+  .alert-#{$color} {
+    @include alert-variant(theme-color-level($color, $alert-bg-level), theme-color-level($color, $alert-border-level), theme-color-level($color, $alert-color-level));
+  }
+}

package/src/vendor/bootstrap/scss/_badge.scss

@@ -0,0 +1,54 @@
+// Base class
+//
+// Requires one of the contextual, color modifier classes for `color` and
+// `background-color`.
+
+.badge {
+  display: inline-block;
+  padding: $badge-padding-y $badge-padding-x;
+  @include font-size($badge-font-size);
+  font-weight: $badge-font-weight;
+  line-height: 1;
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: baseline;
+  @include border-radius($badge-border-radius);
+  @include transition($badge-transition);
+
+  @at-root a#{&} {
+    @include hover-focus() {
+      text-decoration: none;
+    }
+  }
+
+  // Empty badges collapse automatically
+  &:empty {
+    display: none;
+  }
+}
+
+// Quick fix for badges in buttons
+.btn .badge {
+  position: relative;
+  top: -1px;
+}
+
+// Pill badges
+//
+// Make them extra rounded with a modifier to replace v3's badges.
+
+.badge-pill {
+  padding-right: $badge-pill-padding-x;
+  padding-left: $badge-pill-padding-x;
+  @include border-radius($badge-pill-border-radius);
+}
+
+// Colors
+//
+// Contextual variations (linked badges get darker on :hover).
+
+@each $color, $value in $theme-colors {
+  .badge-#{$color} {
+    @include badge-variant($value);
+  }
+}

package/src/vendor/bootstrap/scss/_breadcrumb.scss

@@ -0,0 +1,42 @@
+.breadcrumb {
+  display: flex;
+  flex-wrap: wrap;
+  padding: $breadcrumb-padding-y $breadcrumb-padding-x;
+  margin-bottom: $breadcrumb-margin-bottom;
+  @include font-size($breadcrumb-font-size);
+  list-style: none;
+  background-color: $breadcrumb-bg;
+  @include border-radius($breadcrumb-border-radius);
+}
+
+.breadcrumb-item {
+  // The separator between breadcrumbs (by default, a forward-slash: "/")
+  + .breadcrumb-item {
+    padding-left: $breadcrumb-item-padding;
+
+    &::before {
+      float: left; // Suppress inline spacings and underlining of the separator
+      padding-right: $breadcrumb-item-padding;
+      color: $breadcrumb-divider-color;
+      content: escape-svg($breadcrumb-divider);
+    }
+  }
+
+  // IE9-11 hack to properly handle hyperlink underlines for breadcrumbs built
+  // without `<ul>`s. The `::before` pseudo-element generates an element
+  // *within* the .breadcrumb-item and thereby inherits the `text-decoration`.
+  //
+  // To trick IE into suppressing the underline, we give the pseudo-element an
+  // underline and then immediately remove it.
+  + .breadcrumb-item:hover::before {
+    text-decoration: underline;
+  }
+  // stylelint-disable-next-line no-duplicate-selectors
+  + .breadcrumb-item:hover::before {
+    text-decoration: none;
+  }
+
+  &.active {
+    color: $breadcrumb-active-color;
+  }
+}