@gitlab/ui 36.5.0 → 36.5.1

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## [36.5.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v36.5.0...v36.5.1) (2022-02-11)
+
+
+### Bug Fixes
+
+* **breadcrumb:** Use sentence case for examples ([ace4a4f](https://gitlab.com/gitlab-org/gitlab-ui/commit/ace4a4fa048131c768b0442ac0b677f20258446a))
+
 # [36.5.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v36.4.0...v36.5.0) (2022-02-10)
 
 

package/dist/components/base/drawer/drawer.documentation.js

@@ -1,11 +1,8 @@
-import examples from './examples';
-
-var description = "# Drawer\n\n<!-- STORY -->\n\n## Usage\n\nThe drawer is used to show more information about a certain resource in the UI and potentially\nhandle actions on the information.\n\n### By default\n\n```html\n<gl-drawer :open=\"open\" @close=\"close\">\n  <template #header>Your Title</template>\n  <template>\n   ...children\n  </template>\n</gl-drawer>\n```\n\n- `v-bind:open` will be a boolean you will pass to `gl-drawer` and `@close` is a listener that will\nbe a function that will toggle open to `false`.\n";
+var description = "The drawer is used to show more information about a certain resource in the UI and potentially\nhandle actions on the information.\n\n### By default\n\n```html\n<gl-drawer :open=\"open\" @close=\"close\">\n  <template #header>Your Title</template>\n  <template>\n   ...children\n  </template>\n</gl-drawer>\n```\n\n- `v-bind:open` will be a boolean you will pass to `gl-drawer` and `@close` is a listener that will\nbe a function that will toggle open to `false`.\n";
 
 var drawer_documentation = {
   followsDesignSystem: false,
-  description,
-  examples
+  description
 };
 
 export default drawer_documentation;

package/documentation/documented_stories.js

@@ -128,6 +128,7 @@ export const setupStorybookReadme = () =>
         'GlNavItemDropdown',
         'GlPopover',
         'GlSingleStat',
+        'GlDrawer',
       ],
       components: {
         GlComponentDocumentation,

package/package.json

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

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

@@ -16,19 +16,19 @@ const template = `
 
 const defaultItems = [
   {
-    text: 'First Item',
+    text: 'First item',
     href: '#',
   },
   {
-    text: 'Second Item',
+    text: 'Second item',
     href: '#',
   },
   {
-    text: 'Third Item',
+    text: 'Third item',
     href: '#',
   },
   {
-    text: 'Fourth Item',
+    text: 'Fourth item',
     to: { name: 'fourth-item' },
   },
 ];
@@ -63,19 +63,19 @@ export default {
 
 const extraItems = [
   {
-    text: 'Fifth Item',
+    text: 'Fifth item',
     href: '#',
   },
   {
-    text: 'Sixth Item',
+    text: 'Sixth item',
     href: '#',
   },
   {
-    text: 'Seventh Item',
+    text: 'Seventh item',
     href: '#',
   },
   {
-    text: 'Eighth Item',
+    text: 'Eighth item',
     href: '#',
   },
 ];

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

@@ -1,8 +1,6 @@
 import description from './drawer.md';
-import examples from './examples';
 
 export default {
   followsDesignSystem: false,
   description,
-  examples,
 };

package/src/components/base/drawer/drawer.md

@@ -1,9 +1,3 @@
-# Drawer
-
-<!-- STORY -->
-
-## Usage
-
 The drawer is used to show more information about a certain resource in the UI and potentially
 handle actions on the information.
 

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

@@ -1,13 +1,7 @@
-import { withKnobs } from '@storybook/addon-knobs';
-import { documentedStoriesOf } from '../../../../documentation/documented_stories';
-import { GlButton } from '../../../index';
+import { GlDrawer, GlButton } from '../../../index';
 import readme from './drawer.md';
-import GlDrawer from './drawer.vue';
 
-const components = {
-  GlDrawer,
-  GlButton,
-};
+const components = { GlDrawer, GlButton };
 
 const drawerContent = [
   'One',
@@ -31,7 +25,8 @@ const drawerContent = [
   )
   .join('');
 
-const getStory = (template) => ({
+export const Default = (_args, { viewMode }) => ({
+  components,
   methods: {
     toggle() {
       this.open = !this.open;
@@ -42,45 +37,68 @@ const getStory = (template) => ({
   },
   data() {
     return {
-      open: true,
+      open: viewMode !== 'docs',
     };
   },
-  components,
-  template,
-});
-
-documentedStoriesOf('base/drawer', readme)
-  .addDecorator(withKnobs)
-  .add('default', () =>
-    getStory(`
+  template: `
     <div>
       <gl-button @click="toggle">Toggle Drawer</gl-button>
       <gl-drawer :open="open" @close="close">
         <template #title>List Settings</template>
         ${drawerContent}
       </gl-drawer>
-    </div>`)
-  )
-  .add('with actions', () =>
-    getStory(`
+    </div>`,
+});
+
+export const WithActions = (_args, { viewMode }) => ({
+  components,
+  methods: {
+    toggle() {
+      this.open = !this.open;
+    },
+    close() {
+      this.open = false;
+    },
+  },
+  data() {
+    return {
+      open: viewMode !== 'docs',
+    };
+  },
+  template: `
     <div>
       <gl-button @click="toggle">Toggle Drawer</gl-button>
       <gl-drawer :open="open" @close="close">
-        <template #title>
+          <template #title>
           <h3>custom-network-policy</h3>
         </template>
         <template #header>
-          <div class="gl-mt-5">
-            <gl-button variant="confirm">Save</gl-button>
-            <gl-button class="gl-ml-3" @click="toggle">Cancel</gl-button>
-          </div>
+            <div class="gl-mt-5">
+              <gl-button variant="confirm">Save</gl-button>
+              <gl-button class="gl-ml-3" @click="toggle">Cancel</gl-button>
+            </div>
         </template>
-        ${drawerContent}
+          ${drawerContent}
       </gl-drawer>
-    </div>`)
-  )
-  .add('sidebar variant', () =>
-    getStory(`
+    </div>`,
+});
+
+export const SidebarVariant = (_args, { viewMode }) => ({
+  components,
+  methods: {
+    toggle() {
+      this.open = !this.open;
+    },
+    close() {
+      this.open = false;
+    },
+  },
+  data() {
+    return {
+      open: viewMode !== 'docs',
+    };
+  },
+  template: `
     <div>
       <gl-button @click="toggle">Toggle Drawer</gl-button>
       <gl-drawer :open="open" @close="close" variant="sidebar">
@@ -94,5 +112,19 @@ documentedStoriesOf('base/drawer', readme)
         </template>
         ${drawerContent}
       </gl-drawer>
-    </div>`)
-  );
+    </div>`,
+});
+
+export default {
+  title: 'base/drawer',
+  component: GlDrawer,
+  parameters: {
+    knobs: { disabled: true },
+    controls: { disable: true },
+    docs: {
+      description: {
+        component: readme,
+      },
+    },
+  },
+};

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

@@ -1,58 +0,0 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-var script = {
-  data() {
-    return {
-      drawerOpened: false
-    };
-  },
-
-  methods: {
-    toggle() {
-      this.drawerOpened = !this.drawerOpened;
-    },
-
-    close() {
-      this.drawerOpened = false;
-    }
-
-  }
-};
-
-/* 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('div',[_c('gl-button',{on:{"click":_vm.toggle}},[_vm._v("Toggle drawer")]),_vm._v(" "),_c('gl-drawer',{attrs:{"open":_vm.drawerOpened},on:{"close":_vm.close},scopedSlots:_vm._u([{key:"header",fn:function(){return [_vm._v("Your Title")]},proxy:true}])},[_vm._v(" "),_c('div',[_c('p',[_vm._v("First Body Item")])])])],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/dist/components/base/drawer/examples/index.js

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

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

@@ -1,29 +0,0 @@
-<script>
-export default {
-  data() {
-    return {
-      drawerOpened: false,
-    };
-  },
-  methods: {
-    toggle() {
-      this.drawerOpened = !this.drawerOpened;
-    },
-    close() {
-      this.drawerOpened = false;
-    },
-  },
-};
-</script>
-
-<template>
-  <div>
-    <gl-button @click="toggle">Toggle drawer</gl-button>
-    <gl-drawer :open="drawerOpened" @close="close">
-      <template #header>Your Title</template>
-      <div>
-        <p>First Body Item</p>
-      </div>
-    </gl-drawer>
-  </div>
-</template>

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

@@ -1,15 +0,0 @@
-import Drawer from './drawer.basic.example.vue';
-
-export default [
-  {
-    name: 'Basic',
-    items: [
-      {
-        id: 'drawer',
-        name: 'Default Drawer',
-        description: 'Drawer',
-        component: Drawer,
-      },
-    ],
-  },
-];