@gitlab/ui 32.24.0 → 32.27.0

package/CHANGELOG.md

@@ -1,3 +1,31 @@
+# [32.27.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v32.26.0...v32.27.0) (2021-10-28)
+
+
+### Features
+
+* **GlBanner:** Add embedded prop to gl-banner ([e0669e3](https://gitlab.com/gitlab-org/gitlab-ui/commit/e0669e328fd396276c47bd246864af9108b2688d))
+
+# [32.26.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v32.25.0...v32.26.0) (2021-10-27)
+
+
+### Features
+
+* **breadcrumb:** Set default separator and fix spacing ([95a7fc8](https://gitlab.com/gitlab-org/gitlab-ui/commit/95a7fc8e3ff3a06feb77ea7cdbfa7255b6f2c3f7))
+
+# [32.25.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v32.24.1...v32.25.0) (2021-10-26)
+
+
+### Features
+
+* **css:** Add gl-top-8 utility class ([40a6aba](https://gitlab.com/gitlab-org/gitlab-ui/commit/40a6abae33d7ba02c7d203a33d2ed6b92b621ea1))
+
+## [32.24.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v32.24.0...v32.24.1) (2021-10-26)
+
+
+### Bug Fixes
+
+* revert components' `.documentations.js` files ([5fbcd1f](https://gitlab.com/gitlab-org/gitlab-ui/commit/5fbcd1f93b5e5a3b3d607cfa109425dae97631ac))
+
 # [32.24.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v32.23.0...v32.24.0) (2021-10-22)
 
 

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

@@ -0,0 +1,8 @@
+var description = "Accordions are used to group similar content and hide or show it depending on user needs or\npreferences. Accordions give users more granular control over the interface and help digest content\nin stages, rather than all at once.\n";
+
+var accordion_documentation = {
+  followsDesignSystem: true,
+  description
+};
+
+export default accordion_documentation;

package/dist/components/base/accordion/accordion_item.documentation.js

@@ -0,0 +1,7 @@
+var description = "## Usage\n\nUse `GlAccordionItem` to place the accordion item within your accordion.\n";
+
+var accordion_item_documentation = {
+  description
+};
+
+export default accordion_item_documentation;

package/dist/components/base/banner/banner.js

@@ -56,6 +56,15 @@ var script = {
         return bannerVariants.includes(value);
       }
 
+    },
+
+    /**
+     * Removes the border for banners embedded in content.
+     */
+    embedded: {
+      type: Boolean,
+      required: false,
+      default: null
     }
   },
   computed: {
@@ -92,7 +101,7 @@ var 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-card',{staticClass:"gl-px-8 gl-py-6 gl-line-height-20",class:{ 'gl-banner-introduction': _vm.isIntroducing },attrs:{"body-class":"gl-display-flex gl-p-0!"}},[(_vm.svgPath)?_c('div',{staticClass:"gl-banner-illustration"},[_c('img',{attrs:{"src":_vm.svgPath,"alt":"","role":"presentation"}})]):_vm._e(),_vm._v(" "),_c('div',{staticClass:"gl-banner-content"},[_c('h1',{staticClass:"gl-banner-title"},[_vm._v(_vm._s(_vm.title))]),_vm._v(" "),_vm._t("default"),_vm._v(" "),_c('gl-button',{attrs:{"variant":"confirm","category":"primary","data-testid":"gl-banner-primary-button","href":_vm.buttonLink},on:{"click":_vm.primaryButtonClicked}},[_vm._v(_vm._s(_vm.buttonText))]),_vm._v(" "),_vm._t("actions")],2),_vm._v(" "),_c('gl-button',{staticClass:"gl-banner-close",attrs:{"variant":_vm.isIntroducing ? 'confirm' : 'default',"category":"tertiary","size":"small","icon":"close","aria-label":"Close banner"},on:{"click":_vm.handleClose}})],1)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-card',{staticClass:"gl-px-8 gl-py-6 gl-line-height-20",class:{ 'gl-banner-introduction': _vm.isIntroducing, 'gl-border-none!': _vm.embedded },attrs:{"body-class":"gl-display-flex gl-p-0!"}},[(_vm.svgPath)?_c('div',{staticClass:"gl-banner-illustration"},[_c('img',{attrs:{"src":_vm.svgPath,"alt":"","role":"presentation"}})]):_vm._e(),_vm._v(" "),_c('div',{staticClass:"gl-banner-content"},[_c('h1',{staticClass:"gl-banner-title"},[_vm._v(_vm._s(_vm.title))]),_vm._v(" "),_vm._t("default"),_vm._v(" "),_c('gl-button',{attrs:{"variant":"confirm","category":"primary","data-testid":"gl-banner-primary-button","href":_vm.buttonLink},on:{"click":_vm.primaryButtonClicked}},[_vm._v(_vm._s(_vm.buttonText))]),_vm._v(" "),_vm._t("actions")],2),_vm._v(" "),_c('gl-button',{staticClass:"gl-banner-close",attrs:{"variant":_vm.isIntroducing ? 'confirm' : 'default',"category":"tertiary","size":"small","icon":"close","aria-label":"Close banner"},on:{"click":_vm.handleClose}})],1)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/base/breadcrumb/breadcrumb.js

@@ -1,10 +1,12 @@
 import { BBreadcrumb, BBreadcrumbItem } from 'bootstrap-vue/esm/index.js';
+import GlIcon from '../icon/icon';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 var script = {
   components: {
     BBreadcrumb,
-    BBreadcrumbItem
+    BBreadcrumbItem,
+    GlIcon
   },
   inheritAttrs: false,
   props: {
@@ -25,6 +27,12 @@ var script = {
         });
       }
     }
+  },
+  methods: {
+    isLastItem(items, index) {
+      return index === items.length - 1;
+    }
+
   }
 };
 
@@ -32,7 +40,7 @@ var 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',{staticClass:"gl-breadcrumbs"},[_c('b-breadcrumb',_vm._g(_vm._b({staticClass:"gl-breadcrumb-list"},'b-breadcrumb',_vm.$attrs,false),_vm.$listeners),[_vm._t("avatar"),_vm._v(" "),_vm._l((_vm.items),function(item,index){return [_c('b-breadcrumb-item',{key:index,staticClass:"gl-breadcrumb-item",attrs:{"text":item.text,"href":item.href,"to":item.to}}),_vm._v(" "),(index != _vm.items.length - 1)?_c('span',{key:("index " + (item.text)),staticClass:"gl-breadcrumb-separator",attrs:{"data-testid":"separator"}},[_vm._t("separator")],2):_vm._e()]})],2)],1)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"gl-breadcrumbs"},[_vm._t("avatar"),_vm._v(" "),_c('b-breadcrumb',_vm._g(_vm._b({staticClass:"gl-breadcrumb-list"},'b-breadcrumb',_vm.$attrs,false),_vm.$listeners),[_vm._l((_vm.items),function(item,index){return [_c('b-breadcrumb-item',{key:index,staticClass:"gl-breadcrumb-item",attrs:{"text":item.text,"href":item.href,"to":item.to}},[_c('span',[_vm._v(_vm._s(item.text))]),_vm._v(" "),(!_vm.isLastItem(_vm.items, index))?_c('span',{key:(index + " " + (item.text)),staticClass:"gl-breadcrumb-separator",attrs:{"data-testid":"separator"}},[_vm._t("separator",[_c('gl-icon',{attrs:{"name":"chevron-right"}})])],2):_vm._e()])]})],2)],2)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

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

@@ -0,0 +1,8 @@
+var description = "## Usage\n\nDaterange picker allows users to choose a date range by manually typing the start/end date\ninto the input fields or by using a calendar-like dropdown.\n\nA `maxDateRange` can be specified in order to limit the maximum number of days the component\nwill allow to be selected i.e. if the start date is `2020-08-01` and `maxDateRange` is set to `10`,\nthe highest selectable end date would be `2020-08-11`. This value will be offset by `1` if\n`sameDaySelection` is set to `true`. A `defaultMaxDate` will need to be\nprovided when making use of the `maxDateRange`.\n\nBy default, the component does not allow selection of the same start and end date.\nIn a scenario where this is required, the `sameDaySelection` property can be configured.\nThis is specifically useful when a single day selection is being defined as `2020-01-01 00:00:00`\nto `2020-01-01 23:59:59` instead of `2020-01-01 00:00:00` to `2020-01-02 00:00:00`.\n\nWhen `maxDateRange` is set it's a good idea to set the `tooltip` specifying the date range limit\nand to indicate the number of days currently selected using the default slot. For example:\n\n```vue\n<template #default=\"{ daysSelected }\">\n  <span v-if=\"daysSelected > -1\">{{ daysSelected }} days selected</span>\n  <span v-else>No days selected</span>\n</template>\n```\n\nThe `daysSelected` slot prop is the effective date range, thus the value is increased by one when\n`sameDaySelection` is set to `true`. When no date range has been selected the value is `-1`.\n\n### Note\n\nIf specifying a maxDateRange, it is good practice to include a date range indicator and toolip.\n";
+
+var daterange_picker_documentation = {
+  followsDesignSystem: true,
+  description
+};
+
+export default daterange_picker_documentation;