@gitlab/ui 32.45.1 → 32.49.0

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

@@ -1,36 +0,0 @@
-import AvatarsInlineExample from './avatars.inline.example.vue';
-import AvatarsInlineLargeExample from './avatars.inline_large.example.vue';
-import AvatarsInlineLinksAndTooltipsExample from './avatars.inline_links_and_tooltips.example.vue';
-import AvatarsInlineLinksAndTooltipsBadgeExample from './avatars.inline_links_and_tooltips_badge.example.vue';
-
-export default [
-  {
-    name: 'Basic',
-    items: [
-      {
-        id: 'avatars-inline',
-        name: 'Avatars Inline',
-        description: 'Inline Avatars',
-        component: AvatarsInlineExample,
-      },
-      {
-        id: 'avatars-inline-large',
-        name: 'Avatars Inline Large',
-        description: 'Inline Avatars Large',
-        component: AvatarsInlineLargeExample,
-      },
-      {
-        id: 'avatars-inline-links-and-tooltips',
-        name: 'Avatars inline with links and tooltips',
-        description: 'Inline Avatars with Links and Tooltips',
-        component: AvatarsInlineLinksAndTooltipsExample,
-      },
-      {
-        id: 'avatars-inline-links-and-tooltips-badge',
-        name: 'Avatars inline with tooltip on badge',
-        description: 'Inline Avatars with Tooltip on Badge',
-        component: AvatarsInlineLinksAndTooltipsBadgeExample,
-      },
-    ],
-  },
-];

package/src/components/base/form/form_combobox/examples/form_combobox.basic.example.vue

@@ -1,31 +0,0 @@
-<script>
-export default {
-  tokens: [
-    'giraffe',
-    'dog',
-    'dodo',
-    'komodo dragon',
-    'hippo',
-    'platypus',
-    'jackalope',
-    'quetzal',
-    'badger',
-    'vicuña',
-    'whale',
-    'xenarthra',
-  ],
-  data() {
-    return {
-      inputVal: '',
-    };
-  },
-};
-</script>
-
-<template>
-  <gl-form-combobox
-    v-model="inputVal"
-    :token-list="$options.tokens"
-    label-text="Animals We Tolerate"
-  />
-</template>

package/src/components/base/form/form_combobox/examples/index.js

@@ -1,15 +0,0 @@
-import BasicExample from './form_combobox.basic.example.vue';
-
-export default [
-  {
-    name: 'Basic',
-    items: [
-      {
-        id: 'form-combobox-basic',
-        name: 'Basic',
-        description: 'Basic Combobox',
-        component: BasicExample,
-      },
-    ],
-  },
-];

package/src/components/base/form/form_radio/examples/form_radio.basic.example.vue

@@ -1,16 +0,0 @@
-<script>
-export default {
-  data() {
-    return {
-      selected: 'one',
-    };
-  },
-};
-</script>
-
-<template>
-  <div>
-    <gl-form-radio v-model="selected" value="one">One</gl-form-radio>
-    <gl-form-radio v-model="selected" value="two">Two</gl-form-radio>
-  </div>
-</template>

package/src/components/base/form/form_radio/examples/form_radio.checked_disabled.example.vue

@@ -1,13 +0,0 @@
-<script>
-export default {
-  data() {
-    return {
-      checked: 'foo',
-    };
-  },
-};
-</script>
-
-<template>
-  <gl-form-radio v-model="checked" value="foo" disabled>Disabled and checked</gl-form-radio>
-</template>

package/src/components/base/form/form_radio/examples/index.js

@@ -1,22 +0,0 @@
-import FormRadioBasic from './form_radio.basic.example.vue';
-import FormRadioCheckedDisabled from './form_radio.checked_disabled.example.vue';
-
-export default [
-  {
-    name: 'Basic',
-    items: [
-      {
-        id: 'form-radio-basic',
-        name: 'Basic',
-        description: 'Basic GlFormRadio',
-        component: FormRadioBasic,
-      },
-      {
-        id: 'form-radio-checked-disabled',
-        name: 'Checked and disabled radio',
-        description: 'Checked and disabled GlFormRadio',
-        component: FormRadioCheckedDisabled,
-      },
-    ],
-  },
-];

package/src/components/base/form/input_group_text/examples/index.js

@@ -1,15 +0,0 @@
-import BasicExample from './input_group_text.basic.example.vue';
-
-export default [
-  {
-    name: 'Basic',
-    items: [
-      {
-        id: 'input-group-text-basic',
-        name: 'Basic',
-        description: 'Basic Input Group Text',
-        component: BasicExample,
-      },
-    ],
-  },
-];

package/src/components/base/form/input_group_text/examples/input_group_text.basic.example.vue

@@ -1,3 +0,0 @@
-<template>
-  <gl-input-group-text>Some text</gl-input-group-text>
-</template>

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

@@ -1,43 +0,0 @@
-import BasicExample from './keyset_pagination.basic.example.vue';
-import EventsExample from './keyset_pagination.events.example.vue';
-import I18nExample from './keyset_pagination.internationalization.example.vue';
-import LinksExample from './keyset_pagination.links.example.vue';
-import SlotsExample from './keyset_pagination.slots.example.vue';
-
-export default [
-  {
-    name: 'Usage examples',
-    items: [
-      {
-        id: 'keyset-pagination-basic',
-        name: 'Basic',
-        description: 'Basic Cursor Pagination',
-        component: BasicExample,
-      },
-      {
-        id: 'keyset-pagination-slots',
-        name: 'Custom button slots',
-        description: 'Custom "Prev" or "Next" button content',
-        component: SlotsExample,
-      },
-      {
-        id: 'keyset-pagination-links',
-        name: 'Link buttons',
-        description: '"Prev" and "Next" buttons as link buttons',
-        component: LinksExample,
-      },
-      {
-        id: 'keyset-pagination-events',
-        name: 'Button events',
-        description: '"prev" and "next" events',
-        component: EventsExample,
-      },
-      {
-        id: 'keyset-pagination-i18n',
-        name: 'Internationalization',
-        description: 'Internationalizing the "Prev" and "Next" button text',
-        component: I18nExample,
-      },
-    ],
-  },
-];

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

@@ -1,16 +0,0 @@
-<script>
-export default {
-  data() {
-    return {
-      pageInfo: {
-        hasPreviousPage: true,
-        hasNextPage: true,
-      },
-    };
-  },
-};
-</script>
-
-<template>
-  <gl-keyset-pagination v-bind="pageInfo" />
-</template>

package/src/components/base/keyset_pagination/examples/keyset_pagination.events.example.vue

@@ -1,29 +0,0 @@
-<script>
-/* eslint-disable no-alert */
-export default {
-  data() {
-    return {
-      pageInfo: {
-        startCursor:
-          'eyJpZCI6IjE3NTg1ODciLCJyZWxlYXNlZF9hdCI6IjIwMjAtMDgtMjAgMTQ6NDc6MDguNTQ1MjE1MDAwIFVUQyJ9',
-        endCursor:
-          'eyJpZCI6IjEyNjcxNzkiLCJyZWxlYXNlZF9hdCI6IjIwMjAtMDItMTkgMjE6MDA6MDUuODU5NTQ2MDAwIFVUQyJ9',
-        hasPreviousPage: true,
-        hasNextPage: true,
-      },
-    };
-  },
-  methods: {
-    onPrev(startCursor) {
-      alert(`"prev" event fired with start cursor: "${startCursor}"`);
-    },
-    onNext(endCursor) {
-      alert(`"next" event fired with end cursor: "${endCursor}"`);
-    },
-  },
-};
-</script>
-
-<template>
-  <gl-keyset-pagination v-bind="pageInfo" @prev="onPrev($event)" @next="onNext($event)" />
-</template>

package/src/components/base/keyset_pagination/examples/keyset_pagination.internationalization.example.vue

@@ -1,23 +0,0 @@
-<script>
-export default {
-  data() {
-    return {
-      pageInfo: {
-        hasPreviousPage: true,
-        hasNextPage: true,
-      },
-    };
-  },
-  methods: {
-    // Stub version of our i18n function in GitLab
-    // eslint-disable-next-line no-underscore-dangle
-    __(text) {
-      return text;
-    },
-  },
-};
-</script>
-
-<template>
-  <gl-keyset-pagination v-bind="pageInfo" :prev-text="__('Prev')" :next-text="__('Next')" />
-</template>

package/src/components/base/keyset_pagination/examples/keyset_pagination.links.example.vue

@@ -1,20 +0,0 @@
-<script>
-export default {
-  data() {
-    return {
-      pageInfo: {
-        hasPreviousPage: true,
-        hasNextPage: true,
-      },
-    };
-  },
-};
-</script>
-
-<template>
-  <gl-keyset-pagination
-    v-bind="pageInfo"
-    prev-button-link="https://example.com/prev"
-    next-button-link="https://example.com/next"
-  />
-</template>

package/src/components/base/keyset_pagination/examples/keyset_pagination.slots.example.vue

@@ -1,23 +0,0 @@
-<script>
-export default {
-  data() {
-    return {
-      pageInfo: {
-        hasPreviousPage: true,
-        hasNextPage: true,
-      },
-    };
-  },
-};
-</script>
-
-<template>
-  <gl-keyset-pagination v-bind="pageInfo">
-    <template #previous-button-content>
-      <span style="color: hotpink" class="gl-font-weight-bold">🦄 ᎮᏒᏋᏉᎥᎧᏬᏕ</span>
-    </template>
-    <template #next-button-content>
-      <span style="color: purple" class="gl-font-weight-bold">ᏁᏋጀᏖ 🌈</span>
-    </template>
-  </gl-keyset-pagination>
-</template>

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

@@ -1,39 +0,0 @@
-import ModalBasicExample from './modal.basic.example.vue';
-import ModalDisabledExample from './modal.disabled.example.vue';
-import ModalSizesExample from './modal.sizes.example.vue';
-
-export default [
-  {
-    name: 'Basic',
-    items: [
-      {
-        id: 'modal-basic',
-        name: 'Basic',
-        description: 'Basic Modal',
-        component: ModalBasicExample,
-      },
-    ],
-  },
-  {
-    name: 'Disabled',
-    items: [
-      {
-        id: 'modal-disabled',
-        name: 'Disabled',
-        description: 'Disabled Modal',
-        component: ModalDisabledExample,
-      },
-    ],
-  },
-  {
-    name: 'Sizes',
-    items: [
-      {
-        id: 'modal-sizes',
-        name: 'Sizes',
-        description: 'Modal Sizes',
-        component: ModalSizesExample,
-      },
-    ],
-  },
-];

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

@@ -1,39 +0,0 @@
-<script>
-export default {
-  computed: {
-    primaryProps() {
-      return {
-        text: 'Okay',
-      };
-    },
-    secondaryProps() {
-      return {
-        text: 'Secondary',
-      };
-    },
-    cancelProps() {
-      return {
-        text: 'Cancel',
-      };
-    },
-  },
-};
-</script>
-
-<template>
-  <div>
-    <gl-button v-gl-modal-directive="'basic-modal-id'" category="primary" variant="confirm">
-      Open modal
-    </gl-button>
-    <gl-modal
-      modal-id="basic-modal-id"
-      title="Example title"
-      no-fade
-      :action-primary="primaryProps"
-      :action-secondary="secondaryProps"
-      :action-cancel="cancelProps"
-    >
-      This is my content
-    </gl-modal>
-  </div>
-</template>

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

@@ -1,58 +0,0 @@
-<script>
-export default {
-  data() {
-    return {
-      enteredText: '',
-    };
-  },
-  computed: {
-    primaryProps() {
-      return {
-        text: 'Okay',
-        attributes: [{ disabled: !this.canSubmit }, { variant: 'confirm' }],
-      };
-    },
-    secondaryProps() {
-      return {
-        text: 'Secondary',
-        attributes: [{ disabled: !this.canSubmit }, { variant: 'confirm', category: 'secondary' }],
-      };
-    },
-    cancelProps() {
-      return {
-        text: 'Cancel',
-      };
-    },
-    canSubmit() {
-      return this.enteredText === 'gitlab';
-    },
-  },
-  methods: {
-    clearInput() {
-      this.enteredText = '';
-    },
-  },
-};
-</script>
-
-<template>
-  <div>
-    <gl-button v-gl-modal-directive="'basic-modal-id'" category="primary" variant="confirm">
-      Open modal
-    </gl-button>
-    <gl-modal
-      modal-id="basic-modal-id"
-      title="Example title"
-      no-fade
-      :action-primary="primaryProps"
-      :action-secondary="secondaryProps"
-      :action-cancel="cancelProps"
-      @primary="clearInput"
-      @secondary="clearInput"
-      @cancel="clearInput"
-    >
-      <p>Enter "gitlab" to change the button state.</p>
-      <input v-model="enteredText" type="text" />
-    </gl-modal>
-  </div>
-</template>

package/src/components/base/modal/examples/modal.sizes.example.vue

@@ -1,61 +0,0 @@
-<script>
-export default {
-  computed: {
-    primaryProps() {
-      return {
-        text: 'Okay',
-      };
-    },
-    secondaryProps() {
-      return {
-        text: 'Secondary',
-      };
-    },
-    cancelProps() {
-      return {
-        text: 'Cancel',
-      };
-    },
-  },
-};
-</script>
-
-<template>
-  <div>
-    <gl-button v-gl-modal-directive="'small-modal-id'" variant="confirm">Small Modal</gl-button>
-    <gl-button v-gl-modal-directive="'medium-modal-id'" variant="confirm">Default Modal</gl-button>
-    <gl-button v-gl-modal-directive="'large-modal-id'" variant="confirm">Large Modal</gl-button>
-    <gl-modal
-      modal-id="small-modal-id"
-      title="Example title"
-      no-fade
-      :action-primary="primaryProps"
-      :action-secondary="secondaryProps"
-      :action-cancel="cancelProps"
-      size="sm"
-    >
-      <p>Small modal: 512px</p>
-    </gl-modal>
-    <gl-modal
-      modal-id="medium-modal-id"
-      title="Example title"
-      no-fade
-      :action-primary="primaryProps"
-      :action-secondary="secondaryProps"
-      :action-cancel="cancelProps"
-    >
-      <p>Medium modal: 768px (default)</p>
-    </gl-modal>
-    <gl-modal
-      modal-id="large-modal-id"
-      title="Example title"
-      no-fade
-      :action-primary="primaryProps"
-      :action-secondary="secondaryProps"
-      :action-cancel="cancelProps"
-      size="lg"
-    >
-      <p>Large modal: 990px</p>
-    </gl-modal>
-  </div>
-</template>

package/src/components/charts/discrete_scatter/discrete_scatter.md

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

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

@@ -1,31 +0,0 @@
-<script>
-export default {
-  data() {
-    return {
-      chartData: [
-        {
-          data: [
-            ['19 May', 6.95],
-            ['20 May', 7.58],
-            ['21 May', 8.81],
-            ['22 May', 8.33],
-            ['22 May', 10],
-            ['23 May', 9.96],
-            ['24 May', 7.24],
-            ['25 May', 4.26],
-          ],
-          type: 'scatter',
-        },
-      ],
-    };
-  },
-};
-</script>
-<template>
-  <gl-discrete-scatter-chart
-    :data="chartData"
-    :option="{}"
-    y-axis-title="Pushes by day"
-    x-axis-title="Date"
-  />
-</template>

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

@@ -1,15 +0,0 @@
-import DiscreteScatterChartBasicExample from './discrete_scatter.basic.example.vue';
-
-export default [
-  {
-    name: 'Basic',
-    items: [
-      {
-        id: 'discrete-scatter-basic',
-        name: 'Basic',
-        description: 'Basic Discrete Scatter Chart',
-        component: DiscreteScatterChartBasicExample,
-      },
-    ],
-  },
-];

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

@@ -1,5 +0,0 @@
-<template>
-  <div>
-    <gl-gauge-chart :value="48" :min="0" :max="100" :thresholds="[38, 82]" :split-number="10" />
-  </div>
-</template>

package/src/components/charts/gauge/examples/gauge.no_thresholds.example.vue

@@ -1,5 +0,0 @@
-<template>
-  <div>
-    <gl-gauge-chart :value="48" :min="0" :max="100" :split-number="10" />
-  </div>
-</template>

package/src/components/charts/gauge/examples/gauge.no_value.example.vue

@@ -1,5 +0,0 @@
-<template>
-  <div>
-    <gl-gauge-chart :min="0" :max="100" :thresholds="[38, 82]" :split-number="10" />
-  </div>
-</template>

package/src/components/charts/gauge/examples/gauge.with_text.example.vue

@@ -1,12 +0,0 @@
-<template>
-  <div>
-    <gl-gauge-chart
-      :value="48"
-      text="48Mbps"
-      :min="0"
-      :max="100"
-      :thresholds="[38, 82]"
-      :split-number="10"
-    />
-  </div>
-</template>

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

@@ -1,36 +0,0 @@
-import BasicExample from './gauge.basic.example.vue';
-import NoThresholdsExample from './gauge.no_thresholds.example.vue';
-import NoValueExample from './gauge.no_value.example.vue';
-import WithTextExample from './gauge.with_text.example.vue';
-
-export default [
-  {
-    name: 'Basic',
-    items: [
-      {
-        id: 'gauge-basic',
-        name: 'Basic',
-        description: 'Basic Gauge',
-        component: BasicExample,
-      },
-      {
-        id: 'gauge-no-thresholds',
-        name: 'No thresholds set',
-        description: 'Gauge with no thresholds set',
-        component: NoThresholdsExample,
-      },
-      {
-        id: 'gauge-no-value',
-        name: 'No value set',
-        description: 'Gauge with no value set',
-        component: NoValueExample,
-      },
-      {
-        id: 'gauge-with-text',
-        name: 'With text set',
-        description: 'Gauge with custom text set',
-        component: WithTextExample,
-      },
-    ],
-  },
-];

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

@@ -1,15 +0,0 @@
-import StackedColumnChartBasicExample from './stacked_column.basic.example.vue';
-
-export default [
-  {
-    name: 'Basic',
-    items: [
-      {
-        id: 'stacked-column-basic',
-        name: 'Basic',
-        description: 'Basic Stacked Column Chart',
-        component: StackedColumnChartBasicExample,
-      },
-    ],
-  },
-];