@gitlab/ui 32.58.0 → 32.59.0

package/documentation/documented_stories.js

@@ -116,6 +116,7 @@ export const setupStorybookReadme = () =>
         'GlModal',
         'GlKeysetPagination',
         'GlForm',
+        'GlTable',
       ],
       components: {
         GlComponentDocumentation,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "32.58.0",
+  "version": "32.59.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",

package/src/components/base/table/table.documentation.js

@@ -1,9 +1,6 @@
-import examples from './examples';
 import description from './table.md';
 
 export default {
   followsDesignSystem: false,
   description,
-  examples,
-  bootstrapComponent: 'b-table',
 };

package/src/components/base/table/table.stories.js

@@ -1,13 +1,6 @@
-import { withKnobs, boolean, select, text } from '@storybook/addon-knobs';
-import { documentedStoriesOf } from '../../../../documentation/documented_stories';
 import { GlTable } from '../../../../index';
-import { variantOptions } from '../../../utils/constants';
 import readme from './table.md';
 
-const components = {
-  GlTable,
-};
-
 const tableItems = [
   {
     column_one: 'test',
@@ -23,75 +16,96 @@ const tableItems = [
   },
 ];
 
-function generateProps() {
-  const props = {
-    fixed: {
-      type: Boolean,
-      default: boolean('fixed', false),
-    },
-    footClone: {
-      type: Boolean,
-      default: boolean('foot-clone', false),
+const generateProps = ({ fixed = false, footClone = false, stacked = false } = {}) => ({
+  fixed,
+  footClone,
+  stacked,
+});
+
+export const Default = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  template: `
+  <gl-table
+    :items="$options.items"
+    :fields="$options.fields"
+    :fixed="fixed"
+    :stacked="stacked"
+    :foot-clone="footClone"
+    hover
+    selectable
+    selected-variant="primary"
+  />
+`,
+  fields: [
+    {
+      key: 'column_one',
+      label: 'Column One',
+      variant: 'secondary',
+      sortable: false,
+      isRowHeader: false,
     },
-    stacked: {
-      type: [String, Boolean],
-      default: select('stacked', ['sm', 'md', 'lg', 'xl', true, false], false),
+    {
+      key: 'col_2',
+      label: 'Column 2',
+      formatter: (value) => value,
     },
-  };
+  ],
+  items: tableItems,
+});
+Default.args = generateProps();
 
-  return props;
-}
-
-documentedStoriesOf('base/table/table', readme)
-  .addDecorator(withKnobs)
-  .add('default', () => ({
-    components,
-    props: generateProps(),
-    template: `
-      <gl-table
-        :items="$options.items"
-        :fields="$options.fields"
-        :fixed="fixed"
-        :stacked="stacked"
-        :foot-clone="footClone"
-        hover
-        selectable
-        selected-variant="primary"
-      />
-    `,
-    fields: [
-      {
-        key: 'column_one',
-        label: 'Column One',
-        variant: select('variant', variantOptions, variantOptions.secondary),
-        sortable: boolean('sortable', false),
-        isRowHeader: boolean('isRowHeader', false),
-      },
-      {
-        key: 'col_2',
-        label: 'Column 2',
-        formatter: (value) => `${text('formatterExample', '$')}${value}`,
-      },
-    ],
-    items: tableItems,
-  }))
-  .add('empty', () => ({
-    components,
-    template: `
+export const Empty = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  template: `
       <gl-table show-empty />
     `,
-  }))
-  .add('with filter', () => ({
-    components,
-    template: `<div class="gl-line-height-normal">
+});
+Empty.parameters = { controls: { disable: true } };
+
+export const WithFilter = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  template: `<div class="gl-line-height-normal">
       <gl-form-input v-model="filter" placeholder="Type to search" />
       <br />
-      <gl-table :items="$options.items" :fields="$options.fields" :filter=filter />
-     </div>`,
-    items: tableItems,
-    data() {
-      return {
-        filter: null,
-      };
+      <gl-table 
+              :items="$options.items" 
+              :fields="$options.fields" 
+              :filter=filter
+              :fixed="fixed"
+              :stacked="stacked"
+              :foot-clone="footClone"
+              hover
+              selectable
+              selected-variant="primary"
+          />
+      </div>`,
+  items: tableItems,
+  data() {
+    return {
+      filter: null,
+    };
+  },
+});
+WithFilter.args = generateProps();
+
+export default {
+  title: 'base/table/table',
+  component: GlTable,
+  parameters: {
+    bootstrapComponent: 'b-table',
+    knobs: { disable: true },
+    docs: {
+      description: {
+        component: readme,
+      },
     },
-  }));
+  },
+  argTypes: {
+    stacked: {
+      control: {
+        type: 'select',
+        options: ['sm', 'md', 'lg', 'xl', true, false],
+      },
+    },
+  },
+};

package/src/scss/utilities.scss

@@ -7179,6 +7179,14 @@
   font-size: $gl-font-size-compact-markdown-h1 !important;
 }
 
+.gl-reset-font-size {
+  font-size: inherit;
+}
+
+.gl-reset-font-size\! {
+  font-size: inherit !important;
+}
+
 .gl-font-weight-100 {
   font-weight: 100;
 }

package/src/scss/utility-mixins/typography.scss

@@ -110,6 +110,10 @@
   font-size: $gl-font-size-compact-markdown-h1;
 }
 
+@mixin gl-reset-font-size {
+  font-size: inherit;
+}
+
 /**
 * Font-weight utilities.
 *

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

@@ -1,19 +0,0 @@
-import component from './table.basic.example';
-import componentCustomFields from './table.custom_fields.example';
-
-var index = [{
-  name: 'Basic',
-  items: [{
-    id: 'table-basic',
-    name: 'Basic',
-    description: 'Basic Table',
-    component
-  }, {
-    id: 'table-custom-fields',
-    name: 'Custom Fields',
-    description: 'Custom component fields',
-    component: componentCustomFields
-  }]
-}];
-
-export default index;

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

@@ -1,59 +0,0 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-var script = {
-  fields: [{
-    key: 'column_one',
-    label: 'Column One'
-  }, {
-    key: 'col_2',
-    label: 'Column 2'
-  }],
-  items: [{
-    column_one: 'test',
-    col_2: 1234
-  }, {
-    column_one: 'test2',
-    col_2: 5678
-  }, {
-    column_one: 'test3',
-    col_2: 9101
-  }]
-};
-
-/* script */
-const __vue_script__ = script;
-
-/* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-table',{attrs:{"items":_vm.$options.items,"fields":_vm.$options.fields}})};
-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_script__,
-    __vue_scope_id__,
-    __vue_is_functional_template__,
-    __vue_module_identifier__,
-    false,
-    undefined,
-    undefined,
-    undefined
-  );
-
-export default __vue_component__;

package/dist/components/base/table/examples/table.custom_fields.example.js

@@ -1,66 +0,0 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-var script = {
-  fields: [{
-    key: 'column_one',
-    label: 'Column One'
-  }, {
-    key: 'col_2',
-    label: 'Styled Column 2'
-  }, {
-    key: 'custom_markup',
-    label: 'Styled Virtual Column'
-  }],
-  items: [{
-    column_one: 'test',
-    col_2: 1234
-  }, {
-    column_one: 'test2',
-    col_2: 5678
-  }, {
-    column_one: 'test3',
-    col_2: 9101
-  }]
-};
-
-/* script */
-const __vue_script__ = script;
-
-/* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-table',{attrs:{"items":_vm.$options.items,"fields":_vm.$options.fields},scopedSlots:_vm._u([{key:"cell(col_2)",fn:function(ref){
-var value = ref.value;
-return [_c('span',{staticClass:"gl-font-weight-bold gl-text-green-500"},[_vm._v(_vm._s(value))])]}},{key:"cell(custom_markup)",fn:function(ref){
-var index = ref.index;
-return [_c('span',{staticClass:"gl-font-style-italic gl-text-red-500"},[_vm._v("Index: "+_vm._s(index + 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_script__,
-    __vue_scope_id__,
-    __vue_is_functional_template__,
-    __vue_module_identifier__,
-    false,
-    undefined,
-    undefined,
-    undefined
-  );
-
-export default __vue_component__;

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

@@ -1,22 +0,0 @@
-import component from './table.basic.example.vue';
-import componentCustomFields from './table.custom_fields.example.vue';
-
-export default [
-  {
-    name: 'Basic',
-    items: [
-      {
-        id: 'table-basic',
-        name: 'Basic',
-        description: 'Basic Table',
-        component,
-      },
-      {
-        id: 'table-custom-fields',
-        name: 'Custom Fields',
-        description: 'Custom component fields',
-        component: componentCustomFields,
-      },
-    ],
-  },
-];

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

@@ -1,32 +0,0 @@
-<script>
-export default {
-  fields: [
-    {
-      key: 'column_one',
-      label: 'Column One',
-    },
-    {
-      key: 'col_2',
-      label: 'Column 2',
-    },
-  ],
-  items: [
-    {
-      column_one: 'test',
-      col_2: 1234,
-    },
-    {
-      column_one: 'test2',
-      col_2: 5678,
-    },
-    {
-      column_one: 'test3',
-      col_2: 9101,
-    },
-  ],
-};
-</script>
-
-<template>
-  <gl-table :items="$options.items" :fields="$options.fields" />
-</template>

package/src/components/base/table/examples/table.custom_fields.example.vue

@@ -1,43 +0,0 @@
-<script>
-export default {
-  fields: [
-    {
-      key: 'column_one',
-      label: 'Column One',
-    },
-    {
-      key: 'col_2',
-      label: 'Styled Column 2',
-    },
-    {
-      key: 'custom_markup',
-      label: 'Styled Virtual Column',
-    },
-  ],
-  items: [
-    {
-      column_one: 'test',
-      col_2: 1234,
-    },
-    {
-      column_one: 'test2',
-      col_2: 5678,
-    },
-    {
-      column_one: 'test3',
-      col_2: 9101,
-    },
-  ],
-};
-</script>
-
-<template>
-  <gl-table :items="$options.items" :fields="$options.fields">
-    <template #cell(col_2)="{ value }">
-      <span class="gl-font-weight-bold gl-text-green-500">{{ value }}</span>
-    </template>
-    <template #cell(custom_markup)="{ index }">
-      <span class="gl-font-style-italic gl-text-red-500">Index: {{ index + 1 }}</span>
-    </template>
-  </gl-table>
-</template>