@gitlab/ui 32.26.0 → 32.27.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [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)
 
 

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/package.json

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

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

@@ -11,6 +11,7 @@ const template = `
       :button-link="buttonLink"
       :svg-path="svgPath"
       :variant="variant"
+      :embedded="embedded"
     >
       <p>GitLab Service Desk is a simple way to allow people to create issues in your GitLab instance without needing their own user account. It provides a unique email address for end users to create issues in a project, and replies can be sent either though the GitLab interface or by email. End users will only see the thread though email.</p>
     </gl-banner>
@@ -22,12 +23,14 @@ const generateProps = ({
   buttonLink = 'https://gitlab.com',
   svgPath = serviceDeskCalloutSvg,
   variant = GlBanner.props.variant.default,
+  embedded = false,
 } = {}) => ({
   title,
   buttonText,
   buttonLink,
   svgPath,
   variant,
+  embedded,
 });
 
 const Template = (args, { argTypes }) => ({
@@ -51,6 +54,11 @@ Introduction.args = generateProps({
   variant: bannerVariants[1],
 });
 
+export const Embedded = Template.bind({});
+Embedded.args = generateProps({
+  embedded: true,
+});
+
 export const WithActions = (args, { argTypes }) => ({
   components: {
     GlBanner,

package/src/components/base/banner/banner.vue

@@ -51,6 +51,14 @@ export default {
         return bannerVariants.includes(value);
       },
     },
+    /**
+     * Removes the border for banners embedded in content.
+     */
+    embedded: {
+      type: Boolean,
+      required: false,
+      default: null,
+    },
   },
   computed: {
     isIntroducing() {
@@ -83,7 +91,7 @@ export default {
 <template>
   <gl-card
     class="gl-px-8 gl-py-6 gl-line-height-20"
-    :class="{ 'gl-banner-introduction': isIntroducing }"
+    :class="{ 'gl-banner-introduction': isIntroducing, 'gl-border-none!': embedded }"
     body-class="gl-display-flex gl-p-0!"
   >
     <div v-if="svgPath" class="gl-banner-illustration">