@gitlab/ui 72.11.1 → 72.12.0

package/dist/index.js

@@ -1,105 +0,0 @@
-export { default as GlTableLite } from './components/base/table_lite/table_lite';
-export { default as GlDropdownForm } from './components/base/dropdown/dropdown_form';
-export { default as GlKeysetPagination } from './components/base/keyset_pagination/keyset_pagination';
-export { default as GlInputGroupText } from './components/base/form/input_group_text/input_group_text';
-export { default as GlFormText } from './components/base/form/form_text/form_text';
-export { default as GlFormCombobox } from './components/base/form/form_combobox/form_combobox';
-export { default as GlTokenSelector } from './components/base/token_selector/token_selector';
-export { default as GlNavItemDropdown } from './components/base/nav/nav_item_dropdown';
-export { default as GlNav } from './components/base/nav/nav';
-export { default as GlNavItem } from './components/base/nav/nav_item';
-export { default as GlFormCheckboxTree } from './components/base/form/form_checkbox_tree/form_checkbox_tree';
-export { default as GlMarkdown } from './components/base/markdown/markdown';
-export { default as GlNavbar } from './components/base/navbar/navbar';
-export { default as GlIntersectionObserver } from './components/utilities/intersection_observer/intersection_observer';
-export { default as GlLink } from './components/base/link/link';
-export { default as GlIcon } from './components/base/icon/icon';
-export { default as GlLoadingIcon } from './components/base/loading_icon/loading_icon';
-export { default as GlModal } from './components/base/modal/modal';
-export { default as GlPagination } from './components/base/pagination/pagination';
-export { default as GlPaginatedList } from './components/base/paginated_list/paginated_list';
-export { default as GlPopover } from './components/base/popover/popover';
-export { default as GlProgressBar } from './components/base/progress_bar/progress_bar';
-export { default as GlToken } from './components/base/token/token';
-export { default as GlBadge } from './components/base/badge/badge';
-export { default as GlBanner } from './components/base/banner/banner';
-export { default as GlButton } from './components/base/button/button';
-export { default as GlTooltip } from './components/base/tooltip/tooltip';
-export { default as GlToast } from './components/base/toast/toast';
-export { default as GlDashboardSkeleton } from './components/regions/dashboard_skeleton/dashboard_skeleton';
-export { default as GlEmptyState } from './components/regions/empty_state/empty_state';
-export { default as GlForm } from './components/base/form/form';
-export { default as GlFormInput } from './components/base/form/form_input/form_input';
-export { default as GlFormInputGroup } from './components/base/form/form_input_group/form_input_group';
-export { default as GlFormRadio } from './components/base/form/form_radio/form_radio';
-export { default as GlFormRadioGroup } from './components/base/form/form_radio_group/form_radio_group';
-export { default as GlFormSelect } from './components/base/form/form_select/form_select';
-export { default as GlFormTextarea } from './components/base/form/form_textarea/form_textarea';
-export { default as GlFormGroup } from './components/base/form/form_group/form_group';
-export { default as GlFormFields } from './components/base/form/form_fields/form_fields';
-export { default as GlSearchBoxByType } from './components/base/search_box_by_type/search_box_by_type';
-export { default as GlSearchBoxByClick } from './components/base/search_box_by_click/search_box_by_click';
-export { default as GlDropdownItem } from './components/base/dropdown/dropdown_item';
-export { default as GlDropdownSectionHeader } from './components/base/dropdown/dropdown_section_header';
-export { default as GlDropdownDivider } from './components/base/dropdown/dropdown_divider';
-export { default as GlDropdownText } from './components/base/dropdown/dropdown_text';
-export { default as GlDropdown } from './components/base/dropdown/dropdown';
-export { default as GlCollapsibleListbox } from './components/base/new_dropdowns/listbox/listbox';
-export { default as GlListboxItem } from './components/base/new_dropdowns/listbox/listbox_item';
-export { default as GlDisclosureDropdown } from './components/base/new_dropdowns/disclosure/disclosure_dropdown';
-export { default as GlDisclosureDropdownItem } from './components/base/new_dropdowns/disclosure/disclosure_dropdown_item';
-export { default as GlDisclosureDropdownGroup } from './components/base/new_dropdowns/disclosure/disclosure_dropdown_group';
-export { default as GlPath } from './components/base/path/path';
-export { default as GlTable } from './components/base/table/table';
-export { default as GlBreadcrumb } from './components/base/breadcrumb/breadcrumb';
-export { default as GlScrollableTabs } from './components/base/tabs/tabs/scrollable_tabs';
-export { default as GlTabs } from './components/base/tabs/tabs/tabs';
-export { default as GlTab } from './components/base/tabs/tab/tab';
-export { default as GlButtonGroup } from './components/base/button_group/button_group';
-export { default as GlFormCheckbox } from './components/base/form/form_checkbox/form_checkbox';
-export { default as GlFormCheckboxGroup } from './components/base/form/form_checkbox/form_checkbox_group';
-export { default as GlAvatar } from './components/base/avatar/avatar';
-export { default as GlAvatarsInline } from './components/base/avatars_inline/avatars_inline';
-export { default as GlAvatarLabeled } from './components/base/avatar_labeled/avatar_labeled';
-export { default as GlAvatarLink } from './components/base/avatar_link/avatar_link';
-export { default as GlLabel } from './components/base/label/label';
-export { default as GlDatepicker } from './components/base/datepicker/datepicker';
-export { default as GlDaterangePicker } from './components/base/daterange_picker/daterange_picker';
-export { default as GlToggle } from './components/base/toggle/toggle';
-export { default as GlSorting } from './components/base/sorting/sorting';
-export { default as GlSortingItem } from './components/base/sorting/sorting_item';
-export { default as GlInfiniteScroll } from './components/base/infinite_scroll/infinite_scroll';
-export { default as GlAlert } from './components/base/alert/alert';
-export { default as GlSegmentedControl } from './components/base/segmented_control/segmented_control';
-export { default as GlSkeletonLoader } from './components/base/skeleton_loader/skeleton_loader';
-export { default as GlDrawer } from './components/base/drawer/drawer';
-export { default as GlCard } from './components/base/card/card';
-export { default as GlFilteredSearchSuggestion } from './components/base/filtered_search/filtered_search_suggestion';
-export { default as GlFilteredSearchSuggestionList } from './components/base/filtered_search/filtered_search_suggestion_list';
-export { default as GlFilteredSearchTerm } from './components/base/filtered_search/filtered_search_term';
-export { default as GlFilteredSearchToken } from './components/base/filtered_search/filtered_search_token';
-export { default as GlFilteredSearchTokenSegment } from './components/base/filtered_search/filtered_search_token_segment';
-export { default as GlFilteredSearch } from './components/base/filtered_search/filtered_search';
-export { default as GlBroadcastMessage } from './components/base/broadcast_message/broadcast_message';
-export { default as GlCollapse } from './components/base/collapse/collapse';
-export { default as GlAccordion } from './components/base/accordion/accordion';
-export { default as GlAccordionItem } from './components/base/accordion/accordion_item';
-export { default as GlCarousel } from './components/base/carousel/carousel';
-export { default as GlCarouselSlide } from './components/base/carousel/carousel_slide';
-export { default as GlExperimentBadge } from './components/experimental/experiment_badge/experiment_badge';
-export { default as GlDuoUserFeedback } from './components/experimental/duo/user_feedback/user_feedback';
-export { default as GlDuoChat } from './components/experimental/duo/chat/duo_chat';
-export { default as GlAnimatedNumber } from './components/utilities/animated_number/animated_number';
-export { default as GlFriendlyWrap } from './components/utilities/friendly_wrap/friendly_wrap';
-export { default as GlIntersperse } from './components/utilities/intersperse/intersperse';
-export { default as GlSprintf } from './components/utilities/sprintf/sprintf';
-export { default as GlTruncate } from './components/utilities/truncate/truncate';
-export { default as GlTruncateText } from './components/utilities/truncate_text/truncate_text';
-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/dist/tokens/common_story_options.js

@@ -1,109 +0,0 @@
-import { colorFromBackground, relativeLuminance, rgbFromHex } from '../utils/utils';
-import { WHITE, GRAY_950 } from '../../dist/tokens/js/tokens';
-
-const CONTRAST_LEVELS = [{
-  grade: 'F',
-  min: 0,
-  max: 3
-}, {
-  grade: 'AA+',
-  min: 3,
-  max: 4.5
-}, {
-  grade: 'AA',
-  min: 4.5,
-  max: 7
-}, {
-  grade: 'AAA',
-  min: 7,
-  max: 22
-}];
-const methods = {
-  isAlpha(value) {
-    return value.startsWith('rgba(');
-  },
-  getTokenName(name, key) {
-    return [name, key].filter(Boolean).join('.');
-  },
-  getTextColorClass(value) {
-    if (this.isAlpha(value)) return '';
-    const textColorVariant = colorFromBackground(value, 4.5);
-    return {
-      'gl-text-gray-950': textColorVariant === 'dark',
-      'gl-text-white': textColorVariant === 'light'
-    };
-  },
-  getColorContrast() {
-    let foreground = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'light';
-    let background = arguments.length > 1 ? arguments[1] : undefined;
-    const foregroundColor = {
-      light: WHITE,
-      dark: GRAY_950
-    };
-    // Formula: http://www.w3.org/TR/2008/REC-WCAG20-20081211/#contrast-ratiodef
-    const foregroundLuminance = relativeLuminance(rgbFromHex(foregroundColor[foreground])) + 0.05;
-    const backgroundLuminance = relativeLuminance(rgbFromHex(background)) + 0.05;
-    let score = foregroundLuminance / backgroundLuminance;
-    if (backgroundLuminance > foregroundLuminance) {
-      score = 1 / score;
-    }
-    const level = CONTRAST_LEVELS.find(_ref => {
-      let {
-        min,
-        max
-      } = _ref;
-      return score >= min && score < max;
-    });
-    return {
-      score: (Math.round(score * 10) / 10).toFixed(1),
-      level
-    };
-  },
-  getColorContrastClass(foreground, background) {
-    const {
-      grade
-    } = this.getColorContrast(foreground, background).level;
-    const isFail = grade === 'F';
-    const classes = {
-      light: isFail ? 'gl-inset-border-1-red-500 gl-text-red-500' : 'gl-text-gray-950',
-      dark: isFail ? 'gl-inset-border-1-red-300 gl-text-red-300' : 'gl-text-white'
-    };
-    return classes[foreground];
-  }
-};
-const template = `
-  <ul
-    class="gl-list-style-none gl-m-0 gl-p-0"
-  >
-    <li
-      v-for="(token, key) in tokens"
-      :key="key"
-      class="gl-display-flex gl-flex-wrap gl-align-items-center gl-justify-content-space-between gl-gap-3 gl-p-3"
-      :class="getTextColorClass(token.$value)"
-      :style="{ backgroundColor: token.$value }"
-    >
-      <code class="gl-reset-color">{{ getTokenName(name, key) }}</code>
-      <div class="gl-display-flex gl-align-items-center gl-gap-3">
-        <code class="gl-reset-color">{{ token.$value }}</code>
-        <code
-          v-if="!isAlpha(token.$value)"
-          class="gl-w-10 gl-text-center gl-rounded-base gl-font-xs gl-p-2 gl-bg-gray-950"
-          :class="getColorContrastClass('dark', token.$value)"
-        >
-          {{ getColorContrast('dark', token.$value).level.grade }}
-          {{ getColorContrast('dark', token.$value).score }}
-        </code>
-        <code
-          v-if="!isAlpha(token.$value)"
-          class="gl-w-10 gl-text-center gl-rounded-base gl-font-xs gl-p-2 gl-bg-white"
-          :class="getColorContrastClass('light', token.$value)"
-        >
-          {{ getColorContrast('light', token.$value).level.grade }}
-          {{ getColorContrast('light', token.$value).score }}
-        </code>
-      </div>
-    </li>
-  </ul>
-`;
-
-export { methods, template };

package/dist/utils/breakpoints.js

@@ -1,20 +0,0 @@
-const breakpoints = {
-  xl: 1200,
-  lg: 992,
-  md: 768,
-  sm: 576,
-  xs: 0
-};
-const GlBreakpointInstance = {
-  windowWidth: () => window.innerWidth,
-  getBreakpointSize() {
-    const windowWidth = this.windowWidth();
-    const breakpoint = Object.keys(breakpoints).find(key => windowWidth > breakpoints[key]);
-    return breakpoint;
-  },
-  isDesktop() {
-    return ['xl', 'lg'].includes(this.getBreakpointSize());
-  }
-};
-
-export { GlBreakpointInstance, breakpoints };