@gitlab/duo-ui 0.1.0

package/src/directives/safe_html/safe_html.js

@@ -0,0 +1,35 @@
+import DOMPurify from 'dompurify';
+import { forbiddenDataAttrs, forbiddenTags } from './constants';
+
+const { sanitize } = DOMPurify;
+
+// Mitigate against future dompurify mXSS bypasses by
+// avoiding additional serialize/parse round trip.
+// See https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/1782
+// and https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/2127
+// for more details.
+const DEFAULT_CONFIG = {
+  RETURN_DOM_FRAGMENT: true,
+  ALLOW_UNKNOWN_PROTOCOLS: true,
+  FORBID_ATTR: forbiddenDataAttrs,
+  FORBID_TAGS: forbiddenTags,
+};
+
+const transform = (el, binding) => {
+  if (binding.oldValue !== binding.value) {
+    const config = { ...DEFAULT_CONFIG, ...(binding.arg ?? {}) };
+
+    el.textContent = '';
+    el.appendChild(sanitize(binding.value, config));
+  }
+};
+
+const clear = (el) => {
+  el.textContent = '';
+};
+
+export const SafeHtmlDirective = {
+  bind: transform,
+  update: transform,
+  unbind: clear,
+};

package/src/directives/safe_html/safe_html.md

@@ -0,0 +1,58 @@
+A Vue Directive to sanitize HTML to avoid any XSS vulnerabilities.
+
+## Usage
+
+This directive can be used to sanitize HTML code which may contain user input, to prevent cross-site
+scripting (XSS) vulnerabilities.
+
+Under the hood, it uses [DOMPurify](https://github.com/cure53/DOMPurify) to sanitize the provided HTML.
+
+DOMPurify will strip out dangerous HTML and will keep the safe HTML. You can refer complete list of
+[tags][1] and [attributes][2] allowed by DOMPurify.
+
+[1]: https://github.com/cure53/DOMPurify/blob/main/src/tags.js
+[2]: https://github.com/cure53/DOMPurify/blob/main/src/attrs.js
+
+## Example
+
+```html
+<script>
+import { GlSafeHtmlDirective as SafeHtml } from '@gitlab/ui';
+
+export default {
+  directives: {
+    SafeHtml,
+  },
+  data() {
+    return {
+      rawHtml: "Hello! <script>alert('XSS')</script>",
+    };
+  },
+};
+</script>
+
+<template>
+  <div v-safe-html="rawHtml"></div>
+</template>
+```
+
+## Advanced configuration
+
+```js
+// It allows only <b> tags
+const config = { ALLOWED_TAGS: ['b'] };
+
+// It doesn't allow any html tags
+const config = { ALLOWED_TAGS: [] };
+```
+
+```html
+<div v-safe-html:[config]="rawHtml"></div>
+```
+
+For advanced configuration options, please refer to [DOMPurify's documentation](https://github.com/cure53/DOMPurify#can-i-configure-dompurify).
+
+### Notes
+
+1. `target` attribute is not allowed by default - See <https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1427>.
+1. To know more about other tips & caveats - See <https://gitlab.com/groups/gitlab-org/-/epics/4273#caveats>.

package/src/directives/safe_link/mock_data.js

@@ -0,0 +1,33 @@
+export const absoluteUrls = [
+  'http://example.org',
+  'http://example.org:8080',
+  'https://example.org',
+  'https://example.org:8080',
+  'https://192.168.1.1',
+  'ftp://192.168.1.1',
+  'mailto:someone@example.com',
+];
+
+/* eslint-disable no-script-url */
+export const javascriptUrls = [
+  'javascript:',
+  'javascript:alert("XSS")',
+  'jav\tascript:alert("XSS");',
+];
+/* eslint-disable no-script-url */
+
+export const encodedJavaScriptUrls = [
+  '&#0000106&#0000097&#0000118&#0000097&#0000115&#0000099&#0000114&#0000105&#0000112&#0000116&#0000058&#0000097&#0000108&#0000101&#0000114&#0000116&#0000040&#0000039&#0000088&#0000083&#0000083&#0000039&#0000041',
+  'javascript:alert('XSS')',
+  '&#x6A&#x61&#x76&#x61&#x73&#x63&#x72&#x69&#x70&#x74&#x3A&#x61&#x6C&#x65&#x72&#x74&#x28&#x27&#x58&#x53&#x53&#x27&#x29',
+  '   javascript:alert("XSS");',
+];
+
+export const relativeUrls = [
+  './relative/link',
+  '../relative/link',
+  '/relative/link',
+  '/users/sign_in',
+  '#docs/link',
+  '#',
+];

package/src/directives/safe_link/safe_link.js

@@ -0,0 +1,56 @@
+import Vue from 'vue';
+
+const getBaseURL = () => {
+  const { protocol, host } = window.location;
+  return `${protocol}//${host}`;
+};
+
+const isExternalURL = (target, hostname) => {
+  return target === '_blank' && hostname !== window.location.hostname;
+};
+
+const secureRel = (rel) => {
+  const rels = rel ? rel.trim().split(' ') : [];
+
+  if (!rels.includes('noopener')) {
+    rels.push('noopener');
+  }
+  if (!rels.includes('noreferrer')) {
+    rels.push('noreferrer');
+  }
+  return rels.join(' ');
+};
+
+const isSafeURL = (url) => {
+  try {
+    const parsedURL = new URL(url, getBaseURL());
+    return ['http:', 'https:', 'mailto:', 'ftp:'].includes(parsedURL.protocol);
+  } catch (e) {
+    return false;
+  }
+};
+
+const transform = (el, { arg: { skipSanitization = false } = {} } = {}) => {
+  if (skipSanitization) {
+    return;
+  }
+
+  const { href, target, rel, hostname } = el;
+
+  if (!isSafeURL(href)) {
+    el.href = 'about:blank';
+  }
+
+  if (isExternalURL(target, hostname)) {
+    el.rel = secureRel(rel);
+  }
+};
+
+export const SafeLinkDirective = {
+  inserted: transform,
+  update: (...args) => {
+    Vue.nextTick(() => {
+      transform(...args);
+    });
+  },
+};

package/src/directives/safe_link/safe_link.md

@@ -0,0 +1,37 @@
+A Vue directive to make the hyperlinks secure by default.
+
+## Security measures
+
+### rel
+
+When setting target to `_blank`, the rel attribute gets set automatically to `noopener noreferrer`,
+this is done to avoid the `window.opener` [API exploit]. If you set the `rel` attribute manually,
+this will overwrite the aforementioned logic.
+
+### href
+
+This directive enforces "safe" URLs. What this means is that, if the provided `href`
+doesn't point to a safe protocol (one of `http:`, `https:`, `mailto:` or `ftp:`), then it is
+replaced with `about:blank` to prevent [URL injections].
+
+```html
+<script>
+import { GlSafeLinkDirective as SafeLink } from '@gitlab/ui';
+
+export default {
+  data() {
+    return {
+      url: 'javascript:alert(1)',
+    };
+  },
+  directives: { SafeLink },
+};
+</script>
+<template>
+  <a v-safe-link href="url" target="_blank">Click</a>
+  <!-- Renders to: <a href="about:blank" target="_blank">Click</a> -->
+</template>
+```
+
+[API exploit]: https://www.jitbit.com/alexblog/256-targetblank---the-most-underestimated-vulnerability-ever/
+[URL injections]: https://vuejs.org/v2/guide/security.html#Injecting-URLs

package/src/directives/tooltip.js

@@ -0,0 +1 @@
+export { VBTooltip as GlTooltipDirective } from '../vendor/bootstrap-vue/src/directives/tooltip/tooltip';

package/src/index.js

@@ -0,0 +1,130 @@
+// DO NOT REMOVE
+/* auto-inject-styles */
+// The line above serves as a token for rollup-plugin-replace to inject styles in production
+// builds. We do this to avoid having the stylesheet included multiple times in Storybook.
+
+// Components
+// ADD COMPONENT EXPORTS - needed for yarn generate:component. Do not remove
+export { default as GlDuoWorkflowPrompt } from './components/experimental/duo/workflow/components/duo_workflow_prompt/duo_workflow_prompt.vue';
+export { default as GlDuoWorkflowPanel } from './components/experimental/duo/workflow/components/duo_workflow_panel/duo_workflow_panel.vue';
+export { default as GlTableLite } from './components/base/table_lite/table_lite.vue';
+export { default as GlDropdownForm } from './components/base/dropdown/dropdown_form.vue';
+export { default as GlKeysetPagination } from './components/base/keyset_pagination/keyset_pagination.vue';
+export { default as GlInputGroupText } from './components/base/form/input_group_text/input_group_text.vue';
+export { default as GlFormCombobox } from './components/base/form/form_combobox/form_combobox.vue';
+export { default as GlTokenSelector } from './components/base/token_selector/token_selector.vue';
+export { default as GlNavItemDropdown } from './components/base/nav/nav_item_dropdown.vue';
+export { default as GlNav } from './components/base/nav/nav.vue';
+export { default as GlNavItem } from './components/base/nav/nav_item.vue';
+export { default as GlFormCheckboxTree } from './components/base/form/form_checkbox_tree/form_checkbox_tree.vue';
+export { default as GlMarkdown } from './components/base/markdown/markdown.vue';
+export { default as GlNavbar } from './components/base/navbar/navbar.vue';
+export { default as GlIntersectionObserver } from './components/utilities/intersection_observer/intersection_observer.vue';
+export { default as GlLink, default as GlDeprecatedLink } from './components/base/link/link.vue';
+export { default as GlIcon } from './components/base/icon/icon.vue';
+export { default as GlAnimatedChevronRightDownIcon } from './components/base/animated_icon/animated_chevron_right_down_icon.vue';
+export { default as GlAnimatedDuoChatIcon } from './components/base/animated_icon/animated_duo_chat_icon.vue';
+export { default as GlAnimatedNotificationIcon } from './components/base/animated_icon/animated_notifications_icon.vue';
+export { default as GlAnimatedSidebarIcon } from './components/base/animated_icon/animated_sidebar_icon.vue';
+export { default as GlAnimatedSmileIcon } from './components/base/animated_icon/animated_smile_icon.vue';
+export { default as GlAnimatedSortIcon } from './components/base/animated_icon/animated_sort_icon.vue';
+export { default as GlAnimatedStarIcon } from './components/base/animated_icon/animated_star_icon.vue';
+export { default as GlAnimatedTodoIcon } from './components/base/animated_icon/animated_todo_icon.vue';
+export { default as GlAnimatedUploadIcon } from './components/base/animated_icon/animated_upload_icon.vue';
+export { default as GlLoadingIcon } from './components/base/loading_icon/loading_icon.vue';
+export { default as GlModal } from './components/base/modal/modal.vue';
+export { default as GlPagination } from './components/base/pagination/pagination.vue';
+export { default as GlPaginatedList } from './components/base/paginated_list/paginated_list.vue';
+export { default as GlPopover } from './components/base/popover/popover.vue';
+export { default as GlProgressBar } from './components/base/progress_bar/progress_bar.vue';
+export { default as GlToken } from './components/base/token/token.vue';
+export { default as GlBadge } from './components/base/badge/badge.vue';
+export { default as GlBanner } from './components/base/banner/banner.vue';
+export { default as GlButton } from './components/base/button/button.vue';
+export { default as GlTooltip } from './components/base/tooltip/tooltip.vue';
+export { default as GlToast } from './components/base/toast/toast';
+export { default as GlDashboardSkeleton } from './components/regions/dashboard_skeleton/dashboard_skeleton.vue';
+export { default as GlEmptyState } from './components/regions/empty_state/empty_state.vue';
+export { default as GlForm } from './components/base/form/form.vue';
+export { default as GlFormCharacterCount } from './components/base/form/form_character_count/form_character_count.vue';
+export { default as GlFormDate } from './components/base/form/form_date/form_date.vue';
+export { default as GlFormInput } from './components/base/form/form_input/form_input.vue';
+export { default as GlFormInputGroup } from './components/base/form/form_input_group/form_input_group.vue';
+export { default as GlFormRadio } from './components/base/form/form_radio/form_radio.vue';
+export { default as GlFormRadioGroup } from './components/base/form/form_radio_group/form_radio_group.vue';
+export { default as GlFormSelect } from './components/base/form/form_select/form_select.vue';
+export { default as GlFormTextarea } from './components/base/form/form_textarea/form_textarea.vue';
+export { default as GlFormGroup } from './components/base/form/form_group/form_group.vue';
+export { default as GlFormFields } from './components/base/form/form_fields/form_fields.vue';
+export { default as GlSearchBoxByType } from './components/base/search_box_by_type/search_box_by_type.vue';
+export { default as GlSearchBoxByClick } from './components/base/search_box_by_click/search_box_by_click.vue';
+export { default as GlDropdownItem } from './components/base/dropdown/dropdown_item.vue';
+export { default as GlDropdownSectionHeader } from './components/base/dropdown/dropdown_section_header.vue';
+export { default as GlDropdownDivider } from './components/base/dropdown/dropdown_divider.vue';
+export { default as GlDropdownText } from './components/base/dropdown/dropdown_text.vue';
+export { default as GlDropdown } from './components/base/dropdown/dropdown.vue';
+// new components aiming to replace GlDropdown  - start
+export { default as GlCollapsibleListbox } from './components/base/new_dropdowns/listbox/listbox.vue';
+export { default as GlListboxItem } from './components/base/new_dropdowns/listbox/listbox_item.vue';
+export { default as GlDisclosureDropdown } from './components/base/new_dropdowns/disclosure/disclosure_dropdown.vue';
+export { default as GlDisclosureDropdownItem } from './components/base/new_dropdowns/disclosure/disclosure_dropdown_item.vue';
+export { default as GlDisclosureDropdownGroup } from './components/base/new_dropdowns/disclosure/disclosure_dropdown_group.vue';
+// new components aiming to replace GlDropdown  - end
+export { default as GlPath } from './components/base/path/path.vue';
+export { default as GlTable } from './components/base/table/table.vue';
+export { default as GlBreadcrumb } from './components/base/breadcrumb/breadcrumb.vue';
+export { default as GlScrollableTabs } from './components/base/tabs/tabs/scrollable_tabs.vue';
+export { default as GlTabs } from './components/base/tabs/tabs/tabs.vue';
+export { default as GlTab } from './components/base/tabs/tab/tab.vue';
+export { default as GlButtonGroup } from './components/base/button_group/button_group.vue';
+export { default as GlFormCheckbox } from './components/base/form/form_checkbox/form_checkbox.vue';
+export { default as GlFormCheckboxGroup } from './components/base/form/form_checkbox/form_checkbox_group.vue';
+export { default as GlAvatar } from './components/base/avatar/avatar.vue';
+export { default as GlAvatarsInline } from './components/base/avatars_inline/avatars_inline.vue';
+export { default as GlAvatarLabeled } from './components/base/avatar_labeled/avatar_labeled.vue';
+export { default as GlAvatarLink } from './components/base/avatar_link/avatar_link.vue';
+export { default as GlLabel } from './components/base/label/label.vue';
+export { default as GlDatepicker } from './components/base/datepicker/datepicker.vue';
+export { default as GlDaterangePicker } from './components/base/daterange_picker/daterange_picker.vue';
+export { default as GlToggle } from './components/base/toggle/toggle.vue';
+export { default as GlSorting } from './components/base/sorting/sorting.vue';
+export { default as GlInfiniteScroll } from './components/base/infinite_scroll/infinite_scroll.vue';
+export { default as GlAlert } from './components/base/alert/alert.vue';
+export { default as GlSegmentedControl } from './components/base/segmented_control/segmented_control.vue';
+export { default as GlSkeletonLoader } from './components/base/skeleton_loader/skeleton_loader.vue';
+export { default as GlDrawer } from './components/base/drawer/drawer.vue';
+export { default as GlCard } from './components/base/card/card.vue';
+export { default as GlFilteredSearchSuggestion } from './components/base/filtered_search/filtered_search_suggestion.vue';
+export { default as GlFilteredSearchSuggestionList } from './components/base/filtered_search/filtered_search_suggestion_list.vue';
+export { default as GlFilteredSearchTerm } from './components/base/filtered_search/filtered_search_term.vue';
+export { default as GlFilteredSearchToken } from './components/base/filtered_search/filtered_search_token.vue';
+export { default as GlFilteredSearchTokenSegment } from './components/base/filtered_search/filtered_search_token_segment.vue';
+export { default as GlFilteredSearch } from './components/base/filtered_search/filtered_search.vue';
+export { default as GlBroadcastMessage } from './components/base/broadcast_message/broadcast_message.vue';
+export { default as GlCollapse } from './components/base/collapse/collapse.vue';
+export { default as GlAccordion } from './components/base/accordion/accordion.vue';
+export { default as GlAccordionItem } from './components/base/accordion/accordion_item.vue';
+
+// Experimental
+export { default as GlExperimentBadge } from './components/experimental/experiment_badge/experiment_badge.vue';
+export { default as GlDuoUserFeedback } from './components/experimental/duo/user_feedback/user_feedback.vue';
+export { default as GlDuoChat } from './components/experimental/duo/chat/duo_chat.vue';
+export { default as GlDuoChatContextItemMenu } from './components/experimental/duo/chat/components/duo_chat_context/duo_chat_context_item_menu/duo_chat_context_item_menu.vue';
+
+// Utilities
+export { default as GlAnimatedNumber } from './components/utilities/animated_number/animated_number.vue';
+export { default as GlFriendlyWrap } from './components/utilities/friendly_wrap/friendly_wrap.vue';
+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';
+export { GlTooltipDirective } from './directives/tooltip';
+export { GlResizeObserverDirective } from './directives/resize_observer/resize_observer';
+export { GlCollapseToggleDirective } from './directives/collapse_toggle';
+export { SafeLinkDirective as GlSafeLinkDirective } from './directives/safe_link/safe_link';
+export { SafeHtmlDirective as GlSafeHtmlDirective } from './directives/safe_html/safe_html';
+export { OutsideDirective as GlOutsideDirective } from './directives/outside/outside';
+export { HoverLoadDirective as GlHoverLoadDirective } from './directives/hover_load/hover_load';

package/src/internal/color_contrast/color_contrast.md

@@ -0,0 +1,8 @@
+## Usage
+
+`GlColorContrast` is an **internal** component to display color contrast
+scores and levels for design token stories.
+
+`GlColorContrast` accepts `foreground` and `background` color props to
+calculate a contrast score (e.g. `4.5`) and level (e.g. `AA`) consistent
+with [WCAG 2.1 1.4.3: Contrast (Minimum) level](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html).

package/src/internal/color_contrast/color_contrast.vue

@@ -0,0 +1,52 @@
+<script>
+import { HEX_REGEX } from '../../utils/constants';
+import { getColorContrast } from '../../utils/utils';
+
+export default {
+  name: 'GlColorContrast',
+  props: {
+    foreground: {
+      type: String,
+      required: true,
+      validator: (value) => HEX_REGEX.test(value),
+    },
+    background: {
+      type: String,
+      required: true,
+      validator: (value) => HEX_REGEX.test(value),
+    },
+  },
+  computed: {
+    isValidColorCombination() {
+      return HEX_REGEX.test(this.foreground) && HEX_REGEX.test(this.background);
+    },
+    classes() {
+      if (!this.isValidColorCombination) return 'gl-text-gray-950';
+      const { grade } = this.contrast.level;
+      const isFail = grade === 'F';
+      const contrastScore = getColorContrast('#fff', this.background).score > 4.5;
+      const textClass = contrastScore ? 'gl-text-white' : 'gl-text-gray-950';
+      const failClasses = contrastScore
+        ? 'gl-shadow-inner-1-red-300 gl-text-red-300'
+        : 'gl-shadow-inner-1-red-500 gl-text-red-500';
+      return [isFail ? failClasses : textClass];
+    },
+    contrast() {
+      return getColorContrast(this.foreground, this.background);
+    },
+  },
+};
+</script>
+
+<template>
+  <code
+    class="gl-w-10 gl-rounded-base gl-p-2 gl-text-center gl-text-xs"
+    :class="classes"
+    :style="{ backgroundColor: background }"
+  >
+    <template v-if="isValidColorCombination">
+      {{ contrast.level.grade }} {{ contrast.score }}
+    </template>
+    <template v-else>???</template>
+  </code>
+</template>

package/src/scss/README.md

@@ -0,0 +1 @@
+This document was moved to [another location](/doc/css.md).

package/src/scss/body.scss

@@ -0,0 +1,4 @@
+body {
+  background-color: var(--gl-background-color-default);
+  color: var(--gl-text-color-default);
+}

package/src/scss/bootstrap.scss

@@ -0,0 +1,34 @@
+@import 'variables';
+@import 'bootstrap/scss/functions';
+@import 'bootstrap/scss/variables';
+@import 'bootstrap/scss/mixins';
+@import 'bootstrap/scss/root';
+@import 'bootstrap/scss/reboot';
+@import 'bootstrap/scss/type';
+@import 'bootstrap/scss/images';
+@import 'bootstrap/scss/code';
+@import 'bootstrap/scss/grid';
+@import 'bootstrap/scss/tables';
+@import 'bootstrap/scss/forms';
+@import 'bootstrap/scss/buttons';
+@import 'bootstrap/scss/transitions';
+@import 'bootstrap/scss/dropdown';
+@import 'bootstrap/scss/button-group';
+@import 'bootstrap/scss/input-group';
+@import 'bootstrap/scss/custom-forms';
+@import 'bootstrap/scss/nav';
+@import 'bootstrap/scss/navbar';
+@import 'bootstrap/scss/card';
+@import 'bootstrap/scss/breadcrumb';
+@import 'bootstrap/scss/pagination';
+@import 'bootstrap/scss/badge';
+@import 'bootstrap/scss/alert';
+@import 'bootstrap/scss/progress';
+@import 'bootstrap/scss/media';
+@import 'bootstrap/scss/list-group';
+@import 'bootstrap/scss/close';
+@import 'bootstrap/scss/modal';
+@import 'bootstrap/scss/tooltip';
+@import 'bootstrap/scss/popover';
+@import 'bootstrap/scss/utilities';
+@import 'bootstrap/scss/print';

package/src/scss/bootstrap_vue.scss

@@ -0,0 +1,25 @@
+// stylelint-disable scss/at-import-partial-extension-blacklist
+
+// imports from https://github.com/bootstrap-vue/bootstrap-vue/blob/dev/src/index.scss
+
+@import '../vendor/bootstrap-vue/src/variables.scss';
+// Disabe Tooltip and Popover colored variants which we do not use / support.
+$bv-enable-tooltip-variants: false;
+$bv-enable-popover-variants: false;
+
+@import '../vendor/bootstrap-vue/src/utilities.scss';
+
+@import '../vendor/bootstrap-vue/src/components/dropdown/index.scss';
+@import '../vendor/bootstrap-vue/src/components/form-checkbox/index.scss';
+@import '../vendor/bootstrap-vue/src/components/form-input/index.scss';
+@import '../vendor/bootstrap-vue/src/components/form-radio/index.scss';
+@import '../vendor/bootstrap-vue/src/components/input-group/index.scss';
+@import '../vendor/bootstrap-vue/src/components/modal/index.scss';
+@import '../vendor/bootstrap-vue/src/components/nav/index.scss';
+@import '../vendor/bootstrap-vue/src/components/navbar/index.scss';
+@import '../vendor/bootstrap-vue/src/components/popover/index.scss';
+@import '../vendor/bootstrap-vue/src/components/table/index.scss';
+@import '../vendor/bootstrap-vue/src/components/toast/index.scss';
+@import '../vendor/bootstrap-vue/src/components/tooltip/index.scss';
+
+// @import '../vendor/bootstrap-vue/src/icons/icons.scss';

package/src/scss/components.scss

@@ -0,0 +1,83 @@
+//
+// Import component stylesheets located in components here. i.e.
+// @import '../components/base/dropdown/dropdown'
+//
+// ADD COMPONENT IMPORTS - needed for yarn generate:component. Do not remove
+@import '../components/experimental/duo/chat/duo_chat';
+@import '../components/experimental/duo/chat/components/duo_chat_message/duo_chat_message';
+@import '../components/experimental/duo/chat/components/duo_chat_loader/duo_chat_loader';
+@import '../components/base/new_dropdowns/disclosure/disclosure_dropdown';
+@import '../components/base/keyset_pagination/keyset_pagination';
+@import '../components/charts/gauge/gauge';
+@import '../components/base/token_selector/token_selector';
+@import '../components/base/card/card';
+@import '../components/shared_components/clear_icon_button/clear_icon_button';
+@import '../components/base/accordion/accordion_item';
+@import '../components/base/alert/alert';
+@import '../components/base/avatar/avatar';
+@import '../components/base/avatar_labeled/avatar_labeled';
+@import '../components/base/avatar_link/avatar_link';
+@import '../components/base/avatars_inline/avatars_inline';
+@import '../components/base/animated_icon/animated_icon';
+@import '../components/base/badge/badge';
+@import '../components/base/breadcrumb/breadcrumb';
+@import '../components/base/banner/banner';
+@import '../components/base/broadcast_message/broadcast_message';
+@import '../components/base/datepicker/datepicker';
+@import '../components/base/daterange_picker/daterange_picker';
+@import '../components/base/drawer/drawer';
+@import '../components/base/dropdown/dropdown';
+@import '../components/base/dropdown/dropdown_divider';
+@import '../components/base/dropdown/dropdown_section_header';
+@import '../components/base/dropdown/dropdown_item';
+@import '../components/base/dropdown/dropdown_text';
+@import '../components/base/filtered_search/filtered_search';
+@import '../components/base/filtered_search/filtered_search_suggestion';
+@import '../components/base/filtered_search/filtered_search_suggestion_list';
+@import '../components/base/filtered_search/filtered_search_term';
+@import '../components/base/filtered_search/filtered_search_token';
+@import '../components/base/filtered_search/filtered_search_token_segment';
+@import '../components/base/form/form_date/form_date';
+@import '../components/base/form/form_input/form_input';
+@import '../components/base/form/form_checkbox/form_checkbox';
+@import '../components/base/form/form_group/form_group';
+@import '../components/base/form/form_radio/form_radio';
+@import '../components/base/form/form_radio_group/form_radio_group';
+@import '../components/base/form/form_select/form_select';
+@import '../components/base/form/form_combobox/form_combobox';
+@import '../components/base/icon/icon';
+@import '../components/base/infinite_scroll/infinite_scroll';
+@import '../components/base/label/label';
+@import '../components/base/link/link';
+@import '../components/base/loading_icon/loading_icon';
+@import '../components/base/markdown/markdown';
+@import '../components/base/modal/modal';
+@import '../components/base/nav/nav';
+@import '../components/base/navbar/navbar';
+@import '../components/base/button/button';
+@import '../components/base/pagination/pagination';
+@import '../components/base/path/path';
+@import '../components/base/popover/popover';
+@import '../components/base/progress_bar/progress_bar';
+@import '../components/base/search_box_by_type/search_box_by_type';
+@import '../components/base/search_box_by_click/search_box_by_click';
+@import '../components/base/segmented_control/segmented_control';
+@import '../components/base/skeleton_loader/skeleton_loader';
+@import '../components/base/tabs/tabs/tabs';
+@import '../components/base/toast/toast';
+@import '../components/base/table/table';
+@import '../components/base/toggle/toggle';
+@import '../components/base/token/token';
+@import '../components/base/tooltip/tooltip';
+@import '../components/charts/heatmap/heatmap';
+@import '../components/charts/legend/legend';
+@import '../components/charts/series_label/series_label';
+@import '../components/charts/single_stat/single_stat';
+@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';
+@import '../components/regions/empty_state/empty_state';

package/src/scss/fonts.scss

@@ -0,0 +1,67 @@
+/* -------------------------------------------------------
+GitLab Sans variable font.
+
+Usage:
+  html { font-family: 'GitLab Sans', sans-serif; }
+*/
+@font-face {
+  font-family: 'GitLab Sans';
+  font-weight: 100 900;
+  /**
+   * Applications should use a less aggressive font-display value than this.
+   * This is done to make sure Storybook Previews load the font.
+   */
+  font-display: block;
+  font-style: normal;
+  /* stylelint-disable-next-line property-no-unknown */
+  font-named-instance: 'Regular';
+  src: url('../../static/fonts/GitLabSans.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'GitLab Sans';
+  font-weight: 100 900;
+  /**
+   * Applications should use a less aggressive font-display value than this.
+   * This is done to make sure Storybook Previews load the font.
+   */
+  font-display: block;
+  font-style: italic;
+  /* stylelint-disable-next-line property-no-unknown */
+  font-named-instance: 'Regular';
+  src: url('../../static/fonts/GitLabSans-Italic.woff2') format('woff2');
+}
+
+/* -------------------------------------------------------
+Monospaced font: GitLab Mono.
+
+Usage:
+  html { font-family: 'GitLab Mono', monospace; }
+*/
+@font-face {
+  font-family: 'GitLab Mono';
+  font-weight: 100 900;
+  /**
+   * Applications should use a less aggressive font-display value than this.
+   * This is done to make sure Storybook Previews load the font.
+   */
+  font-display: block;
+  font-style: normal;
+  src: url('../../static/fonts/GitLabMono.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'GitLab Mono';
+  font-weight: 100 900;
+  /**
+   * Applications should use a less aggressive font-display value than this.
+   * This is done to make sure Storybook Previews load the font.
+   */
+  font-display: block;
+  font-style: italic;
+  src: url('../../static/fonts/GitLabMono-Italic.woff2') format('woff2');
+}
+
+* {
+  font-synthesis: none;
+}