@gitlab/ui 32.43.2 → 32.43.3

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## [32.43.3](https://gitlab.com/gitlab-org/gitlab-ui/compare/v32.43.2...v32.43.3) (2021-12-08)
+
+
+### Bug Fixes
+
+* **deps:** update dependency dompurify to ^2.3.4 ([6798e4f](https://gitlab.com/gitlab-org/gitlab-ui/commit/6798e4f3e4fdd2b12b1b6e4cf8e0ac3d575cf43f))
+
 ## [32.43.2](https://gitlab.com/gitlab-org/gitlab-ui/compare/v32.43.1...v32.43.2) (2021-12-07)
 
 

package/README.md

@@ -1,6 +1,11 @@
 # GitLab UI
 
-GitLab UI is a UI component library written in [Vue.js](https://vuejs.org).
+GitLab UI is a UI component library that implements [Pajamas](https://design.gitlab.com/), our
+design system. GitLab UI is written in [Vue.js](https://vuejs.org) and its objectives are to:
+
+- Create reusable UI components to accelerate frontend development.
+- Create UI consistency for all components within GitLab.
+
 See <https://gitlab-org.gitlab.io/gitlab-ui/> for documentation.
 
 ## Usage

package/dist/components/base/form/form_textarea/form_textarea.documentation.js

@@ -1,26 +1,7 @@
-import examples from './examples';
-
 var description = "**Note:** This needs a `v-model` property to work correctly.\nSee [this issue](https://github.com/bootstrap-vue/bootstrap-vue/issues/1915) on Bootstrap Vue for\nmore information.\n";
 
 var form_textarea_documentation = {
-  description,
-  examples,
-  bootstrapComponent: 'b-form-textarea',
-  events: [{
-    event: 'input',
-    args: [{
-      arg: 'value',
-      description: '(String)'
-    }],
-    description: 'Emitted to update the v-model'
-  }, {
-    event: 'update',
-    args: [{
-      arg: 'value',
-      description: '(String)'
-    }],
-    description: `Triggered by user interaction. Emitted after any formatting (not including 'trim' or 'number' props). Useful for getting the currently entered value when the 'debounce' or 'lazy' props are set.`
-  }]
+  description
 };
 
 export default form_textarea_documentation;

package/dist/components/base/form/form_textarea/form_textarea.js

@@ -36,9 +36,17 @@ var script = {
         // Swap purpose of input and update events from underlying BFormTextarea.
         // See https://gitlab.com/gitlab-org/gitlab-ui/-/issues/631.
         input: (...args) => {
+          /**
+           * Emitted to update the v-model
+           */
           this.$emit('update', ...args);
         },
         update: (...args) => {
+          /**
+           * Triggered by user interaction.
+           * Emitted after any formatting (not including 'trim' or 'number' props).
+           * Useful for getting the currently entered value when the 'debounce' or 'lazy' props are set.
+           */
           this.$emit(model.event, ...args);
         }
       };

package/documentation/documented_stories.js

@@ -94,6 +94,7 @@ export const setupStorybookReadme = () =>
         'GlMarkdown',
         'GlTokenSelector',
         'GlTooltip',
+        'GlFormTextarea',
       ],
       components: {
         GlComponentDocumentation,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "32.43.2",
+  "version": "32.43.3",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -60,7 +60,7 @@
     "@babel/standalone": "^7.0.0",
     "bootstrap-vue": "2.20.1",
     "copy-to-clipboard": "^3.0.8",
-    "dompurify": "^2.3.3",
+    "dompurify": "^2.3.4",
     "echarts": "^5.2.1",
     "highlight.js": "^10.6.0",
     "js-beautify": "^1.8.8",
@@ -84,7 +84,7 @@
     "@babel/preset-env": "^7.10.2",
     "@gitlab/eslint-plugin": "10.0.0",
     "@gitlab/stylelint-config": "2.6.0",
-    "@gitlab/svgs": "1.225.0",
+    "@gitlab/svgs": "1.226.0",
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@rollup/plugin-replace": "^2.3.2",

package/src/components/base/form/form_textarea/form_textarea.documentation.js

@@ -1,30 +1,5 @@
-import examples from './examples';
 import description from './form_textarea.md';
 
 export default {
   description,
-  examples,
-  bootstrapComponent: 'b-form-textarea',
-  events: [
-    {
-      event: 'input',
-      args: [
-        {
-          arg: 'value',
-          description: '(String)',
-        },
-      ],
-      description: 'Emitted to update the v-model',
-    },
-    {
-      event: 'update',
-      args: [
-        {
-          arg: 'value',
-          description: '(String)',
-        },
-      ],
-      description: `Triggered by user interaction. Emitted after any formatting (not including 'trim' or 'number' props). Useful for getting the currently entered value when the 'debounce' or 'lazy' props are set.`,
-    },
-  ],
 };

package/src/components/base/form/form_textarea/form_textarea.stories.js

@@ -1,12 +1,6 @@
-import { withKnobs, boolean } from '@storybook/addon-knobs';
-import { documentedStoriesOf } from '../../../../../documentation/documented_stories';
 import { GlFormTextarea } from '../../../../../index';
 import readme from './form_textarea.md';
 
-const components = {
-  GlFormTextarea,
-};
-
 const template = `
   <gl-form-textarea
     v-model="model"
@@ -16,28 +10,35 @@ const template = `
   />
 `;
 
-function generateProps({ noResize = GlFormTextarea.props.noResize.default } = {}) {
-  return {
-    model: {
-      type: String,
-      default:
-        'We take inspiration from other companies, and we always go for the boring solutions. Just like the rest of our work, we continually adjust our values and strive always to make them better. We used to have more values, but it was difficult to remember them all, so we condensed them and gave sub-values and created an acronym. Everyone is welcome to suggest improvements.',
-    },
-    placeholder: {
-      type: String,
-      default: 'hello',
-    },
-    noResize: {
-      type: Boolean,
-      default: boolean('no-resize', noResize),
-    },
-  };
-}
+const generateProps = ({
+  model = 'We take inspiration from other companies, and we always go for the boring solutions. Just like the rest of our work, we continually adjust our values and strive always to make them better. We used to have more values, but it was difficult to remember them all, so we condensed them and gave sub-values and created an acronym. Everyone is welcome to suggest improvements.',
+  placeholder = 'hello',
+  noResize = GlFormTextarea.props.noResize.default,
+} = {}) => ({
+  model,
+  placeholder,
+  noResize,
+});
 
-documentedStoriesOf('base/form/form-textarea', readme)
-  .addDecorator(withKnobs)
-  .add('default', () => ({
-    components,
-    props: generateProps(),
-    template,
-  }));
+const Template = (args) => ({
+  components: { GlFormTextarea },
+  props: Object.keys(args),
+  template,
+});
+
+export const Default = Template.bind({});
+Default.args = generateProps();
+
+export default {
+  title: 'base/form/form-textarea',
+  component: GlFormTextarea,
+  parameters: {
+    bootstrapComponent: 'b-form-textarea',
+    knobs: { disable: true },
+    docs: {
+      description: {
+        component: readme,
+      },
+    },
+  },
+};

package/src/components/base/form/form_textarea/form_textarea.vue

@@ -38,9 +38,17 @@ export default {
         // Swap purpose of input and update events from underlying BFormTextarea.
         // See https://gitlab.com/gitlab-org/gitlab-ui/-/issues/631.
         input: (...args) => {
+          /**
+           * Emitted to update the v-model
+           */
           this.$emit('update', ...args);
         },
         update: (...args) => {
+          /**
+           * Triggered by user interaction.
+           * Emitted after any formatting (not including 'trim' or 'number' props).
+           * Useful for getting the currently entered value when the 'debounce' or 'lazy' props are set.
+           */
           this.$emit(model.event, ...args);
         },
       };

package/dist/components/base/form/form_textarea/examples/form_textarea.basic.example.js

@@ -1,47 +0,0 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-var script = {
-  // We need this because without a v-model this input will reset on every keystroke
-  // https://github.com/bootstrap-vue/bootstrap-vue/issues/1915
-  data: () => ({
-    text: ''
-  })
-};
-
-/* 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-form-textarea',{attrs:{"placeholder":"Enter something"},model:{value:(_vm.text),callback:function ($$v) {_vm.text=$$v;},expression:"text"}})};
-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/form/form_textarea/examples/form_textarea.invalid.example.js

@@ -1,47 +0,0 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-var script = {
-  // We need this because without a v-model this input will reset on every keystroke
-  // https://github.com/bootstrap-vue/bootstrap-vue/issues/1915
-  data: () => ({
-    text: 'This is invalid'
-  })
-};
-
-/* 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-form-textarea',{attrs:{"placeholder":"Enter something","state":false},model:{value:(_vm.text),callback:function ($$v) {_vm.text=$$v;},expression:"text"}})};
-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/form/form_textarea/examples/form_textarea.plaintext.example.js

@@ -1,47 +0,0 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-var script = {
-  // We need this because without a v-model this input will reset on every keystroke
-  // https://github.com/bootstrap-vue/bootstrap-vue/issues/1915
-  data: () => ({
-    text: "This is some plain text.\nIt is read only and doesn't look like an input."
-  })
-};
-
-/* 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-form-textarea',{attrs:{"plaintext":""},model:{value:(_vm.text),callback:function ($$v) {_vm.text=$$v;},expression:"text"}})};
-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/form/form_textarea/examples/form_textarea.readonly.example.js

@@ -1,45 +0,0 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-var script = {
-  data: () => ({
-    text: 'This is some readonly text.'
-  })
-};
-
-/* 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-form-textarea',{attrs:{"readonly":""},model:{value:(_vm.text),callback:function ($$v) {_vm.text=$$v;},expression:"text"}})};
-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/form/form_textarea/examples/form_textarea.submit.example.js

@@ -1,47 +0,0 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-var script = {
-  // We need this because without a v-model this input will reset on every keystroke
-  // https://github.com/bootstrap-vue/bootstrap-vue/issues/1915
-  data: () => ({
-    text: ''
-  })
-};
-
-/* 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-form-textarea',{attrs:{"placeholder":"Enter something","submit-on-enter":""},model:{value:(_vm.text),callback:function ($$v) {_vm.text=$$v;},expression:"text"}})};
-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/form/form_textarea/examples/index.js

@@ -1,37 +0,0 @@
-import FormTextAreaBasic from './form_textarea.basic.example';
-import FormTextAreaInvalid from './form_textarea.invalid.example';
-import FormTextAreaPlaintext from './form_textarea.plaintext.example';
-import FormTextReadOnlytext from './form_textarea.readonly.example';
-import FormTextSubmitOnEnter from './form_textarea.submit.example';
-
-var index = [{
-  name: 'Basic',
-  items: [{
-    id: 'form-textarea-basic',
-    name: 'Basic',
-    description: 'Basic Form Textarea',
-    component: FormTextAreaBasic
-  }, {
-    id: 'form-textarea-invalid',
-    name: 'Invalid',
-    description: 'Invalid Form Textarea',
-    component: FormTextAreaInvalid
-  }, {
-    id: 'form-textarea-plaintext',
-    name: 'Plaintext',
-    description: 'Plaintext Form Textarea',
-    component: FormTextAreaPlaintext
-  }, {
-    id: 'form-textarea-readonly',
-    name: 'Read Only',
-    description: 'Read Only Form Textarea',
-    component: FormTextReadOnlytext
-  }, {
-    id: 'form-textarea-submit-on-enter',
-    name: 'Submit On Enter',
-    description: 'Submit On Enter Form Textarea',
-    component: FormTextSubmitOnEnter
-  }]
-}];
-
-export default index;

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

@@ -1,11 +0,0 @@
-<script>
-export default {
-  // We need this because without a v-model this input will reset on every keystroke
-  // https://github.com/bootstrap-vue/bootstrap-vue/issues/1915
-  data: () => ({ text: '' }),
-};
-</script>
-
-<template>
-  <gl-form-textarea v-model="text" placeholder="Enter something" />
-</template>

package/src/components/base/form/form_textarea/examples/form_textarea.invalid.example.vue

@@ -1,11 +0,0 @@
-<script>
-export default {
-  // We need this because without a v-model this input will reset on every keystroke
-  // https://github.com/bootstrap-vue/bootstrap-vue/issues/1915
-  data: () => ({ text: 'This is invalid' }),
-};
-</script>
-
-<template>
-  <gl-form-textarea v-model="text" placeholder="Enter something" :state="false" />
-</template>

package/src/components/base/form/form_textarea/examples/form_textarea.plaintext.example.vue

@@ -1,13 +0,0 @@
-<script>
-export default {
-  // We need this because without a v-model this input will reset on every keystroke
-  // https://github.com/bootstrap-vue/bootstrap-vue/issues/1915
-  data: () => ({
-    text: "This is some plain text.\nIt is read only and doesn't look like an input.",
-  }),
-};
-</script>
-
-<template>
-  <gl-form-textarea v-model="text" plaintext />
-</template>

package/src/components/base/form/form_textarea/examples/form_textarea.readonly.example.vue

@@ -1,9 +0,0 @@
-<script>
-export default {
-  data: () => ({ text: 'This is some readonly text.' }),
-};
-</script>
-
-<template>
-  <gl-form-textarea v-model="text" readonly />
-</template>

package/src/components/base/form/form_textarea/examples/form_textarea.submit.example.vue

@@ -1,11 +0,0 @@
-<script>
-export default {
-  // We need this because without a v-model this input will reset on every keystroke
-  // https://github.com/bootstrap-vue/bootstrap-vue/issues/1915
-  data: () => ({ text: '' }),
-};
-</script>
-
-<template>
-  <gl-form-textarea v-model="text" placeholder="Enter something" submit-on-enter />
-</template>

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

@@ -1,43 +0,0 @@
-import FormTextAreaBasic from './form_textarea.basic.example.vue';
-import FormTextAreaInvalid from './form_textarea.invalid.example.vue';
-import FormTextAreaPlaintext from './form_textarea.plaintext.example.vue';
-import FormTextReadOnlytext from './form_textarea.readonly.example.vue';
-import FormTextSubmitOnEnter from './form_textarea.submit.example.vue';
-
-export default [
-  {
-    name: 'Basic',
-    items: [
-      {
-        id: 'form-textarea-basic',
-        name: 'Basic',
-        description: 'Basic Form Textarea',
-        component: FormTextAreaBasic,
-      },
-      {
-        id: 'form-textarea-invalid',
-        name: 'Invalid',
-        description: 'Invalid Form Textarea',
-        component: FormTextAreaInvalid,
-      },
-      {
-        id: 'form-textarea-plaintext',
-        name: 'Plaintext',
-        description: 'Plaintext Form Textarea',
-        component: FormTextAreaPlaintext,
-      },
-      {
-        id: 'form-textarea-readonly',
-        name: 'Read Only',
-        description: 'Read Only Form Textarea',
-        component: FormTextReadOnlytext,
-      },
-      {
-        id: 'form-textarea-submit-on-enter',
-        name: 'Submit On Enter',
-        description: 'Submit On Enter Form Textarea',
-        component: FormTextSubmitOnEnter,
-      },
-    ],
-  },
-];