@gitlab/ui 33.1.2 → 36.0.0

package/src/components/charts/tooltip/tooltip.stories.js

@@ -1,4 +1,4 @@
-import { GlChart, GlChartTooltip, GlChartSeriesLabel } from '../../../../charts';
+import { GlChart, GlChartTooltip, GlChartSeriesLabel } from '../../../charts';
 import {
   SERIES_NAME,
   SERIES_NAME_LONG,

package/src/components/regions/dashboard_skeleton/dashboard_skeleton.stories.js

@@ -1,4 +1,4 @@
-import { GlDashboardSkeleton } from '../../../../index';
+import { GlDashboardSkeleton } from '../../../index';
 import readme from './dashboard_skeleton.md';
 
 const defaultValue = (prop) => GlDashboardSkeleton.props[prop].default;

package/src/components/regions/empty_state/empty_state.stories.js

@@ -1,4 +1,4 @@
-import { GlButton, GlEmptyState } from '../../../../index';
+import { GlButton, GlEmptyState } from '../../../index';
 import readme from './empty_state.md';
 
 const template = `

package/src/components/utilities/friendly_wrap/friendly_wrap.stories.js

@@ -1,4 +1,4 @@
-import { GlFriendlyWrap } from '../../../../index';
+import { GlFriendlyWrap } from '../../../index';
 import readme from './friendly_wrap.md';
 
 const components = {

package/src/components/utilities/intersection_observer/intersection_observer.stories.js

@@ -1,4 +1,4 @@
-import { GlIntersectionObserver } from '../../../../index';
+import { GlIntersectionObserver } from '../../../index';
 import readme from './intersection_observer.md';
 
 const components = {

package/src/components/utilities/intersperse/intersperse.stories.js

@@ -1,4 +1,4 @@
-import { GlIntersperse } from '../../../../index';
+import { GlIntersperse } from '../../../index';
 import readme from './intersperse.md';
 
 const template = `

package/src/components/utilities/sprintf/sprintf.stories.js

@@ -1,4 +1,4 @@
-import { GlSprintf, GlButton, GlLink } from '../../../../index';
+import { GlSprintf, GlButton, GlLink } from '../../../index';
 import readme from './sprintf.md';
 
 const generateProps = ({ message = 'Written by %{author}', placeholders } = {}) => ({

package/src/components/utilities/truncate/truncate.documentation.js

@@ -1,19 +1,5 @@
-import examples from './examples';
 import description from './truncate.md';
 
 export default {
   description,
-  examples,
-  propsInfo: {
-    text: {
-      additionalInfo: 'Text to be ellipsized',
-    },
-    position: {
-      additionalInfo: 'Ellipsis position',
-      enum: 'truncateOptions',
-    },
-    withTooltip: {
-      additionalInfo: 'Display the full text in a tooltip only if it is being truncated',
-    },
-  },
 };

package/src/components/utilities/truncate/truncate.md

@@ -1,9 +1,5 @@
-# Truncate
-
 The `GlTruncate` component lets you truncate the long texts with ellipsis.
 
-<!-- STORY -->
-
 > **Tip:** Try resizing the side panel for truncation.
 
 ## Usage

package/src/components/utilities/truncate/truncate.stories.js

@@ -1,40 +1,51 @@
-import { withKnobs, text, select, boolean } from '@storybook/addon-knobs';
-import { documentedStoriesOf } from '../../../../documentation/documented_stories';
-import { GlTruncate } from '../../../../index';
+import { GlTruncate } from '../../../index';
 import { POSITION } from './constants';
 import readme from './truncate.md';
 
-const components = {
-  GlTruncate,
-};
-
 const template = '<gl-truncate :text="text" :position="position" :with-tooltip="withTooltip" />';
 
-function generateProps({
-  longText = 'src/thisIs/AVeryLongFilePath/that/needs/to/be/smartly/truncated/from/the/middle/so/we/dont/lose/important/information/here.vue',
+const generateProps = ({
+  text = 'src/thisIs/AVeryLongFilePath/that/needs/to/be/smartly/truncated/from/the/middle/so/we/dont/lose/important/information/here.vue',
   position = 'middle',
   withTooltip = false,
-} = {}) {
-  return {
+} = {}) => ({
+  text,
+  position,
+  withTooltip,
+});
+
+const Template = (args, { argTypes }) => ({
+  components: {
+    GlTruncate,
+  },
+  props: Object.keys(argTypes),
+  template,
+});
+export const Default = Template.bind({});
+Default.args = generateProps();
+
+export default {
+  title: 'utilities/truncate',
+  component: GlTruncate,
+  parameters: {
+    knobs: { disable: true },
+    storyshots: { disable: true },
+    docs: {
+      description: {
+        component: readme,
+      },
+    },
+  },
+  argTypes: {
     text: {
-      type: String,
-      default: text('text', longText),
+      control: 'text',
     },
     position: {
-      type: String,
-      default: select('position', Object.values(POSITION), position),
+      options: Object.values(POSITION),
+      control: 'select',
     },
     withTooltip: {
-      default: boolean('withTooltip', withTooltip),
+      control: 'boolean',
     },
-  };
-}
-
-documentedStoriesOf('utilities/truncate', readme)
-  .addParameters({ storyshots: false })
-  .addDecorator(withKnobs)
-  .add('default', () => ({
-    props: generateProps(),
-    components,
-    template,
-  }));
+  },
+};

package/src/components/utilities/truncate/truncate.vue

@@ -10,16 +10,25 @@ export default {
     GlResizeObserver: GlResizeObserverDirective,
   },
   props: {
+    /**
+     * Text to be ellipsized
+     */
     text: {
       type: String,
       required: true,
     },
+    /**
+     * Ellipsis position
+     */
     position: {
       type: String,
       required: false,
       default: POSITION.END,
       validator: (value) => Object.values(POSITION).includes(value),
     },
+    /**
+     * Display the full text in a tooltip only if it is being truncated
+     */
     withTooltip: {
       type: Boolean,
       required: false,

package/{config.js → src/config.js}

@@ -1,6 +1,6 @@
 import { BVConfigPlugin } from 'bootstrap-vue';
 import Vue from 'vue';
-import { tooltipDelay } from './src/utils/constants';
+import { tooltipDelay } from './utils/constants';
 
 const bFormTextGlobalConfig = {
   textVariant: 'gl-muted',

package/src/directives/hover_load/hover_load.stories.js

@@ -1,6 +1,6 @@
 import { text } from '@storybook/addon-knobs';
 import { documentedStoriesOf } from '../../../documentation/documented_stories';
-import { GlHoverLoadDirective } from '../../../index';
+import { GlHoverLoadDirective } from '../../index';
 import readme from './hover_load.md';
 
 const directives = {

package/src/directives/outside/outside.stories.js

@@ -1,4 +1,4 @@
-import { GlOutsideDirective } from '../../../index';
+import { GlOutsideDirective } from '../../index';
 import GlButton from '../../components/base/button/button.vue';
 import readme from './outside.md';
 

package/src/directives/resize_observer/resize_observer.stories.js

@@ -1,6 +1,6 @@
 import { withKnobs, select } from '@storybook/addon-knobs';
 import { documentedStoriesOf } from '../../../documentation/documented_stories';
-import { GlResizeObserverDirective } from '../../../index';
+import { GlResizeObserverDirective } from '../../index';
 import readme from './resize_observer.md';
 
 documentedStoriesOf('directives/resize-observer-directive', readme)

package/src/directives/safe_html/safe_html.stories.js

@@ -2,7 +2,7 @@ import { withKnobs, text } from '@storybook/addon-knobs';
 import { sanitize } from 'dompurify';
 import { escape } from 'lodash';
 import { documentedStoriesOf } from '../../../documentation/documented_stories';
-import { GlSafeHtmlDirective } from '../../../index';
+import { GlSafeHtmlDirective } from '../../index';
 import readme from './safe_html.md';
 
 documentedStoriesOf('directives/safe-html-directive', readme)

package/src/index.js

@@ -0,0 +1,111 @@
+// 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 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 GlFormText } from './components/base/form/form_text/form_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 } from './components/base/link/link.vue';
+export { default as GlIcon } from './components/base/icon/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 GlSkeletonLoading,
+  default as GlDeprecatedSkeletonLoading,
+} from './components/base/skeleton_loading/skeleton_loading.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 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 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';
+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 GlSortingItem } from './components/base/sorting/sorting_item.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';
+export { default as GlCarousel } from './components/base/carousel/carousel.vue';
+export { default as GlCarouselSlide } from './components/base/carousel/carousel_slide.vue';
+export { default as RichTextEditor } from './components/editors/rich_text_editor/rich_text_editor.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';
+
+// 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/scss/utilities.scss

@@ -1848,6 +1848,14 @@
   box-shadow: inset 0 0 0 $gl-border-size-1 $red-600 !important
 }
 
+.gl-inset-border-b-2-theme-accent {
+  box-shadow: inset 0 -#{$gl-border-size-2} 0 0 var(--gl-theme-accent, $theme-indigo-500)
+}
+
+.gl-inset-border-b-2-theme-accent\! {
+  box-shadow: inset 0 -#{$gl-border-size-2} 0 0 var(--gl-theme-accent, $theme-indigo-500) !important
+}
+
 .gl-inset-border-b-2-theme-indigo-500 {
   box-shadow: inset 0 -#{$gl-border-size-2} 0 0 $theme-indigo-500
 }

package/src/scss/utility-mixins/box-shadow.scss

@@ -104,6 +104,10 @@
   box-shadow: inset 0 0 0 $gl-border-size-1 $red-600;
 }
 
+@mixin gl-inset-border-b-2-theme-accent {
+  box-shadow: inset 0 -#{$gl-border-size-2} 0 0 var(--gl-theme-accent, $theme-indigo-500);
+}
+
 @mixin gl-inset-border-b-2-theme-indigo-500 {
   box-shadow: inset 0 -#{$gl-border-size-2} 0 0 $theme-indigo-500;
 }

package/{utils.js → src/utils.js}

@@ -1 +1 @@
-export { default as GlBreakpointInstance, breakpoints } from './src/utils/breakpoints';
+export { default as GlBreakpointInstance, breakpoints } from './utils/breakpoints';

package/charts.js

@@ -1,19 +0,0 @@
-// Add config files
-import setConfigs from './config';
-
-setConfigs();
-
-export { default as GlChart } from './src/components/charts/chart/chart.vue';
-export { default as GlAreaChart } from './src/components/charts/area/area.vue';
-export { default as GlBarChart } from './src/components/charts/bar/bar.vue';
-export { default as GlGaugeChart } from './src/components/charts/gauge/gauge.vue';
-export { default as GlLineChart } from './src/components/charts/line/line.vue';
-export { default as GlChartLegend } from './src/components/charts/legend/legend.vue';
-export { default as GlChartSeriesLabel } from './src/components/charts/series_label/series_label.vue';
-export { default as GlChartTooltip } from './src/components/charts/tooltip/tooltip.vue';
-export { default as GlHeatmap } from './src/components/charts/heatmap';
-export { default as GlColumnChart } from './src/components/charts/column/column.vue';
-export { default as GlStackedColumnChart } from './src/components/charts/stacked_column/stacked_column.vue';
-export { default as GlDiscreteScatterChart } from './src/components/charts/discrete_scatter/discrete_scatter.vue';
-export { default as GlSingleStat } from './src/components/charts/single_stat/single_stat.vue';
-export { default as GlSparklineChart } from './src/components/charts/sparkline/sparkline.vue';

package/dist/components/base/nav/examples/index.js

@@ -1,13 +0,0 @@
-import BasicExample from './nav.basic.example';
-
-var index = [{
-  name: 'Basic',
-  items: [{
-    id: 'nav-basic',
-    name: 'Basic',
-    description: 'Basic Nav',
-    component: BasicExample
-  }]
-}];
-
-export default index;

package/dist/components/base/nav/examples/nav.basic.example.js

@@ -1,38 +0,0 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-/* script */
-
-/* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-nav',[_c('gl-nav-item',{attrs:{"active":""}},[_vm._v("Active")]),_vm._v(" "),_c('gl-nav-item',[_vm._v("Link")]),_vm._v(" "),_c('gl-nav-item',[_vm._v("Another Link")]),_vm._v(" "),_c('gl-nav-item',{attrs:{"disabled":""}},[_vm._v("Disabled")])],1)};
-var __vue_staticRenderFns__ = [];
-
-  /* style */
-  const __vue_inject_styles__ = undefined;
-  /* scoped */
-  const __vue_scope_id__ = undefined;
-  /* module identifier */
-  const __vue_module_identifier__ = undefined;
-  /* functional template */
-  const __vue_is_functional_template__ = false;
-  /* style inject */
-  
-  /* style inject SSR */
-  
-  /* style inject shadow dom */
-  
-
-  
-  const __vue_component__ = __vue_normalize__(
-    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
-    __vue_inject_styles__,
-    {},
-    __vue_scope_id__,
-    __vue_is_functional_template__,
-    __vue_module_identifier__,
-    false,
-    undefined,
-    undefined,
-    undefined
-  );
-
-export default __vue_component__;

package/dist/components/base/nav/nav_item.documentation.js

@@ -1,13 +0,0 @@
-var nav_item = "# Nav Item\n\n<!-- STORY -->\n\n## Usage\n\nThe navigation item component is meant to be used for for actionable links (or router-links).\n";
-
-var description = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  'default': nav_item
-});
-
-var nav_item_documentation = {
-  description,
-  bootstrapComponent: 'b-nav-item'
-};
-
-export default nav_item_documentation;

package/dist/components/base/nav/nav_item_dropdown.documentation.js

@@ -1,14 +0,0 @@
-var nav_item_dropdown = "# Nav Item Dropdown\n\n<!-- STORY -->\n\n## Usage\n\nUse `<gl-nav-item-dropdown>` to place dropdown items within your nav.\n";
-
-var description = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  'default': nav_item_dropdown
-});
-
-var nav_item_dropdown_documentation = {
-  followsDesignSystem: false,
-  description,
-  bootstrapComponent: 'b-nav-item-dropdown'
-};
-
-export default nav_item_dropdown_documentation;

package/dist/components/utilities/truncate/examples/index.js

@@ -1,13 +0,0 @@
-import TruncateBasicExample from './truncate.basic.example';
-
-var index = [{
-  name: 'Basic',
-  items: [{
-    id: 'truncate',
-    name: 'Basic',
-    description: 'Basic truncation',
-    component: TruncateBasicExample
-  }]
-}];
-
-export default index;

package/dist/components/utilities/truncate/examples/truncate.basic.example.js

@@ -1,38 +0,0 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-/* script */
-
-/* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-truncate',{attrs:{"text":"ee/app/assets/javascripts/vue_shared/security_reports/components/utils/truncate/smart-truncate/src/index.js"}})};
-var __vue_staticRenderFns__ = [];
-
-  /* style */
-  const __vue_inject_styles__ = undefined;
-  /* scoped */
-  const __vue_scope_id__ = undefined;
-  /* module identifier */
-  const __vue_module_identifier__ = undefined;
-  /* functional template */
-  const __vue_is_functional_template__ = false;
-  /* style inject */
-  
-  /* style inject SSR */
-  
-  /* style inject shadow dom */
-  
-
-  
-  const __vue_component__ = __vue_normalize__(
-    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
-    __vue_inject_styles__,
-    {},
-    __vue_scope_id__,
-    __vue_is_functional_template__,
-    __vue_module_identifier__,
-    false,
-    undefined,
-    undefined,
-    undefined
-  );
-
-export default __vue_component__;