@gitlab/ui 36.7.0 → 37.1.0

package/src/components/base/tabs/tabs/examples/index.js

@@ -1,72 +0,0 @@
-import BasicTabsExample from './tabs.basic.example.vue';
-import ContentlessTabExample from './tabs.contentless_tab.example.vue';
-import TabsWithCounterBadgesExample from './tabs.counterbadges.example.vue';
-import CustomTitleExample from './tabs.custom_title.example.vue';
-import DisabledTabExample from './tabs.disabled.example.vue';
-import JustifiedTabsExample from './tabs.justified.example.vue';
-import NoTabsExample from './tabs.no_tabs.example.vue';
-import TabsScrollableExample from './tabs.scrollable.example.vue';
-import TabsStylesOnlyExample from './tabs.styles_only.example.vue';
-
-export default [
-  {
-    name: 'Basic',
-    items: [
-      {
-        id: 'tabs-basic',
-        name: 'Basic',
-        description: 'Basic Tabs',
-        component: BasicTabsExample,
-      },
-      {
-        id: 'tabs-disabled',
-        name: 'Disabled',
-        description: 'Disabled Tab',
-        component: DisabledTabExample,
-      },
-      {
-        id: 'tabs-custom-title',
-        name: 'Custom Title',
-        description: 'Custom Title Tab',
-        component: CustomTitleExample,
-      },
-      {
-        id: 'tabs-contentless-tab',
-        name: 'Contentless Tab',
-        description: 'Contentless Tab',
-        component: ContentlessTabExample,
-      },
-      {
-        id: 'tabs-no-tabs',
-        name: 'Empty state when no tabs',
-        description: 'Empty state/content for when there are no tabs',
-        component: NoTabsExample,
-      },
-      {
-        id: 'tabs-with-counter-badges',
-        name: 'Tabs with counter badges',
-        component: TabsWithCounterBadgesExample,
-      },
-      {
-        id: 'tabs-styles-only',
-        name: 'Tabs styles only',
-        component: TabsStylesOnlyExample,
-      },
-      {
-        id: 'justified-tabs',
-        name: 'Justified tabs',
-        component: JustifiedTabsExample,
-      },
-    ],
-  },
-  {
-    name: 'Scrollable',
-    items: [
-      {
-        id: 'tabs-scrollable',
-        name: 'Scrollable tabs with lots of tabs',
-        component: TabsScrollableExample,
-      },
-    ],
-  },
-];

package/src/components/base/tabs/tabs/examples/tabs.basic.example.vue

@@ -1,6 +0,0 @@
-<template>
-  <gl-tabs>
-    <gl-tab title="Tab 1">Tab panel 1</gl-tab>
-    <gl-tab title="Tab 2">Tab panel 2</gl-tab>
-  </gl-tabs>
-</template>

package/src/components/base/tabs/tabs/examples/tabs.contentless_tab.example.vue

@@ -1,17 +0,0 @@
-<template>
-  <gl-tabs>
-    <gl-tab title="Regular tab">
-      <p>Regular tab content.</p>
-      <p>
-        The contentless tab is not selectable, as it has no content. This is useful for displaying
-        things that aren't really tabs after the list of tabs.
-      </p>
-    </gl-tab>
-    <gl-tab title="Another tab">
-      <p>Another tab's content.</p>
-    </gl-tab>
-    <template #tabs-end>
-      <li class="nav-item align-self-center">Contentless tab</li>
-    </template>
-  </gl-tabs>
-</template>

package/src/components/base/tabs/tabs/examples/tabs.counterbadges.example.vue

@@ -1,28 +0,0 @@
-<template>
-  <gl-tabs>
-    <gl-tab>
-      <template #title>
-        <span>Tab</span>
-        <gl-badge size="sm" class="gl-tab-counter-badge">500</gl-badge>
-        <span class="sr-only">items</span>
-      </template>
-      Tab panel 1
-    </gl-tab>
-    <gl-tab>
-      <template #title>
-        <span>Tab</span>
-        <gl-badge size="sm" class="gl-tab-counter-badge">250</gl-badge>
-        <span class="sr-only">items</span>
-      </template>
-      Tab panel 2
-    </gl-tab>
-    <gl-tab>
-      <template #title>
-        <span>Tab</span>
-        <gl-badge size="sm" class="gl-tab-counter-badge">250</gl-badge>
-        <span class="sr-only">items</span>
-      </template>
-      Tab panel 3
-    </gl-tab>
-  </gl-tabs>
-</template>

package/src/components/base/tabs/tabs/examples/tabs.custom_title.example.vue

@@ -1,9 +0,0 @@
-<template>
-  <gl-tabs>
-    <gl-tab title="Tab 1">
-      <template #title><i>custom</i> <strong>Title</strong></template>
-      Tab panel 1
-    </gl-tab>
-    <gl-tab title="Tab 2">Tab panel 2</gl-tab>
-  </gl-tabs>
-</template>

package/src/components/base/tabs/tabs/examples/tabs.disabled.example.vue

@@ -1,7 +0,0 @@
-<template>
-  <gl-tabs>
-    <gl-tab title="Tab 1">Tab panel 1</gl-tab>
-    <gl-tab title="Tab 2">Tab panel 2</gl-tab>
-    <gl-tab title="Tab 3" disabled>Disabled tab panel</gl-tab>
-  </gl-tabs>
-</template>

package/src/components/base/tabs/tabs/examples/tabs.justified.example.vue

@@ -1,6 +0,0 @@
-<template>
-  <gl-tabs justified>
-    <gl-tab title="Tab 1">Tab panel 1</gl-tab>
-    <gl-tab title="Tab 2">Tab panel 2</gl-tab>
-  </gl-tabs>
-</template>

package/src/components/base/tabs/tabs/examples/tabs.no_tabs.example.vue

@@ -1,8 +0,0 @@
-<template>
-  <gl-tabs>
-    <template #empty>
-      This content is only displayed when there are no tabs. Useful for dynamically added/removed
-      tabs.
-    </template>
-  </gl-tabs>
-</template>

package/src/components/base/tabs/tabs/examples/tabs.scrollable.example.vue

@@ -1,20 +0,0 @@
-<script>
-export default {
-  tabs: Array(20)
-    .fill(1)
-    .map((_, index) => index + 1)
-    .map((id) => ({
-      id,
-      title: `Tab ${id}`,
-      content: `Tab panel ${id} content...`,
-    })),
-};
-</script>
-
-<template>
-  <gl-scrollable-tabs>
-    <gl-tab v-for="tab in $options.tabs" :key="tab.id" :title="tab.title">
-      {{ tab.content }}
-    </gl-tab>
-  </gl-scrollable-tabs>
-</template>

package/src/components/base/tabs/tabs/examples/tabs.styles_only.example.vue

@@ -1,22 +0,0 @@
-<template>
-  <div class="tabs gl-tabs">
-    <ul role="tablist" class="nav gl-tabs-nav">
-      <li role="presentation" class="nav-item">
-        <a
-          role="tab"
-          target="_self"
-          href="#"
-          class="nav-link gl-tab-nav-item gl-tab-nav-item-active gl-tab-nav-item-active-indigo"
-          >Tab 1</a
-        >
-      </li>
-      <li role="presentation" class="nav-item">
-        <a role="tab" target="_self" href="#" class="nav-link gl-tab-nav-item">Tab 2</a>
-      </li>
-    </ul>
-    <div class="tab-content gl-tab-content">
-      <div role="tabpanel" class="tab-pane active">Tab panel 1</div>
-      <div role="tabpanel" class="tab-pane">Tab panel 2</div>
-    </div>
-  </div>
-</template>

package/src/components/charts/area/area.md

@@ -1 +0,0 @@
-### Area Chart

package/src/components/charts/area/examples/area.basic.example.vue

@@ -1,14 +0,0 @@
-<template>
-  <gl-area-chart
-    :data="[
-      {
-        name: 'Values',
-        data: [
-          [0, 5],
-          [4, 3],
-          [8, 10],
-        ],
-      },
-    ]"
-  />
-</template>

package/src/components/charts/area/examples/area.basic_plus.example.vue

@@ -1,25 +0,0 @@
-<template>
-  <gl-area-chart
-    :data="[
-      {
-        name: 'Values',
-        data: [
-          [0, 5],
-          [4, 3],
-          [8, 10],
-        ],
-      },
-    ]"
-    :option="{
-      series: [
-        {
-          type: 'scatter',
-          data: [
-            [2, 5],
-            [6, 10],
-          ],
-        },
-      ],
-    }"
-  />
-</template>

package/src/components/charts/area/examples/index.js

@@ -1,22 +0,0 @@
-import AreaBasicExample from './area.basic.example.vue';
-import AreaBasicPlusExample from './area.basic_plus.example.vue';
-
-export default [
-  {
-    name: 'Basic',
-    items: [
-      {
-        id: 'area-basic',
-        name: 'Basic',
-        description: 'Basic Area Chart',
-        component: AreaBasicExample,
-      },
-      {
-        id: 'area-basic-plus',
-        name: 'Basic plus custom series',
-        description: 'Basic area chart with custom series added',
-        component: AreaBasicPlusExample,
-      },
-    ],
-  },
-];

package/src/components/charts/legend/examples/index.js

@@ -1,27 +0,0 @@
-import LegendBasicExample from './legend.basic.example.vue';
-import LegendToggledExample from './legend.toggled.example.vue';
-
-export default [
-  {
-    name: 'Basic',
-    items: [
-      {
-        id: 'chart-legend-basic',
-        name: 'Basic',
-        description: 'Basic Chart Legend',
-        component: LegendBasicExample,
-      },
-    ],
-  },
-  {
-    name: 'Toggled',
-    items: [
-      {
-        id: 'chart-legend-toggled',
-        name: 'Toggled',
-        description: 'Toggled Chart Legend',
-        component: LegendToggledExample,
-      },
-    ],
-  },
-];

package/src/components/charts/legend/examples/legend.basic.example.vue

@@ -1,55 +0,0 @@
-<script>
-export default {
-  data() {
-    return {
-      chart: null,
-      options: {
-        legend: { show: false },
-        xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] },
-        yAxis: { type: 'value' },
-        // Generate the series with generateSeriesData() after
-        // https://gitlab.com/gitlab-org/gitlab-ui/-/issues/754
-        // gets implemented
-        series: [
-          {
-            color: '#1f75cb',
-            data: [820, 932, 960, 1150, 1290, 1330, 1390],
-            name: 'Series 1',
-            showSymbol: true,
-            type: 'line',
-          },
-          {
-            color: '#108548',
-            data: [1640, 1864, 1920, 2300, 2580, 2660, 2780],
-            name: 'Series 2',
-            showSymbol: true,
-            type: 'line',
-          },
-        ],
-      },
-    };
-  },
-  computed: {
-    seriesData() {
-      return this.options.series.map((series) => ({
-        type: 'solid',
-        name: series.name,
-        color: series.color,
-        data: series.data,
-      }));
-    },
-  },
-  methods: {
-    onCreated(chart) {
-      this.chart = chart;
-    },
-  },
-};
-</script>
-
-<template>
-  <div>
-    <gl-chart :options="options" @created="onCreated" />
-    <gl-chart-legend v-if="chart" :chart="chart" :series-info="seriesData" />
-  </div>
-</template>

package/src/components/charts/legend/examples/legend.toggled.example.vue

@@ -1,60 +0,0 @@
-<script>
-export default {
-  data() {
-    return {
-      chart: null,
-      options: {
-        legend: { show: false },
-        xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] },
-        yAxis: { type: 'value' },
-        // Generate the series with generateSeriesData() after
-        // https://gitlab.com/gitlab-org/gitlab-ui/-/issues/754
-        // gets implemented
-        series: [
-          {
-            color: '#1f75cb',
-            data: [820, 932, 960, 1150, 1290, 1330, 1390],
-            name: 'Toggled Series 1',
-            showSymbol: true,
-            type: 'line',
-          },
-          {
-            color: '#108548',
-            data: [1640, 1864, 1920, 2300, 2580, 2660, 2780],
-            name: 'Series 2',
-            showSymbol: true,
-            type: 'line',
-          },
-        ],
-      },
-    };
-  },
-  computed: {
-    seriesData() {
-      return this.options.series.map((series) => ({
-        type: 'solid',
-        name: series.name,
-        color: series.color,
-        data: series.data,
-      }));
-    },
-  },
-  mounted() {
-    this.$nextTick(() => {
-      document.querySelector('#js-chart-legend [role=button]').click();
-    });
-  },
-  methods: {
-    onCreated(chart) {
-      this.chart = chart;
-    },
-  },
-};
-</script>
-
-<template>
-  <div>
-    <gl-chart :options="options" @created="onCreated" />
-    <gl-chart-legend v-if="chart" id="js-chart-legend" :chart="chart" :series-info="seriesData" />
-  </div>
-</template>

package/src/components/charts/legend/legend.documentation.js

@@ -1,19 +0,0 @@
-import examples from './examples';
-import description from './legend.md';
-
-export default {
-  description,
-  examples,
-  propsInfo: {
-    averageText: {
-      additionalInfo:
-        'Text for data average (overridden by prop if needed for internationalization)',
-    },
-    maxText: {
-      additionalInfo: 'Text for max amount (overridden by prop if needed for internationalization)',
-    },
-    layout: {
-      additionalInfo: 'Sets the display layout',
-    },
-  },
-};

package/src/components/charts/line/examples/index.js

@@ -1,22 +0,0 @@
-import LineBasicExample from './line.basic.example.vue';
-import LineSeriesExample from './line.series.example.vue';
-
-export default [
-  {
-    name: 'Basic',
-    items: [
-      {
-        id: 'line-basic',
-        name: 'Basic',
-        description: 'Basic line chart',
-        component: LineBasicExample,
-      },
-      {
-        id: 'line-basic-plus',
-        name: 'Basic plus custom series',
-        description: 'Basic line chart with custom series added',
-        component: LineSeriesExample,
-      },
-    ],
-  },
-];

package/src/components/charts/line/examples/line.basic.example.vue

@@ -1,14 +0,0 @@
-<template>
-  <gl-line-chart
-    :data="[
-      {
-        name: 'Values',
-        data: [
-          [0, 5],
-          [4, 3],
-          [8, 10],
-        ],
-      },
-    ]"
-  />
-</template>

package/src/components/charts/line/examples/line.series.example.vue

@@ -1,25 +0,0 @@
-<template>
-  <gl-line-chart
-    :data="[
-      {
-        name: 'Values',
-        data: [
-          [0, 5],
-          [4, 3],
-          [8, 10],
-        ],
-      },
-    ]"
-    :option="{
-      series: [
-        {
-          type: 'scatter',
-          data: [
-            [2, 5],
-            [6, 10],
-          ],
-        },
-      ],
-    }"
-  />
-</template>