@gitlab/ui 50.0.1 → 50.1.0

package/package.json

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

package/scss_to_js/scss_variables.js

@@ -331,6 +331,7 @@ export const glDropdownWidthNarrow = '10rem'
 export const glDropdownWidthWide = '25rem'
 export const glMaxDropdownMaxHeight = '19.5rem'
 export const glBroadcastMessageTextMaxWidth = '58.375rem'
+export const glBroadcastMessageNotificationMaxWidth = '18.75rem'
 export const glModalSmallWidth = '32rem'
 export const glModalMediumWidth = '48rem'
 export const glModalLargeWidth = '61.875rem'

package/scss_to_js/scss_variables.json

@@ -1765,6 +1765,11 @@
       "value": "px-to-rem(934px)",
       "compiledValue": "58.375rem"
     },
+    {
+      "name": "$gl-broadcast-message-notification-max-width",
+      "value": "px-to-rem(300px)",
+      "compiledValue": "18.75rem"
+    },
     {
       "name": "$gl-modal-small-width",
       "value": "px-to-rem(512px)",

package/src/components/base/broadcast_message/broadcast_message.scss

@@ -1,5 +1,4 @@
 .gl-broadcast-message {
-  @include gl-text-contrast-light;
   @include gl-display-flex;
   @include gl-justify-content-space-between;
   @include gl-align-items-flex-start;
@@ -8,8 +7,10 @@
   @include gl-pl-5;
   @include gl-pr-4;
   @include gl-py-5;
-  @include gl-inset-border-b-1-gray-900;
-  @include gl-bg-theme-indigo-700;
+
+  &.indigo {
+    @include gl-bg-theme-indigo-700;
+  }
 
   &.light-indigo {
     @include gl-bg-theme-indigo-500;
@@ -47,6 +48,21 @@
     @include gl-bg-gray-300;
   }
 
+  &.banner {
+    @include gl-text-contrast-light;
+    @include gl-inset-border-b-1-gray-900;
+  }
+
+  &.notification {
+    @include gl-rounded-base;
+    @include gl-bg-white;
+    @include gl-border-solid;
+    @include gl-border-gray-100;
+    @include gl-border-1;
+    @include gl-shadow-x0-y2-b4-s0;
+    max-width: $gl-broadcast-message-notification-max-width;
+  }
+
   &-content {
     @include gl-display-flex;
     @include gl-justify-content-center;

package/src/components/base/broadcast_message/broadcast_message.spec.js

@@ -1,22 +1,32 @@
 import { shallowMount } from '@vue/test-utils';
 import GlBroadcastMessage from './broadcast_message.vue';
+import { TYPE_NOTIFICATION } from './constants';
 
 describe('Broadcast message component', () => {
   let wrapper;
 
-  const createComponent = (options) => {
-    wrapper = shallowMount(GlBroadcastMessage, options);
+  const createComponent = (propsData = {}) => {
+    wrapper = shallowMount(GlBroadcastMessage, {
+      slots: { default: 'some message' },
+      propsData,
+    });
   };
 
   const findDismissButton = () => wrapper.findComponent({ ref: 'dismiss' });
 
-  beforeEach(() => {
-    createComponent({ slots: { default: 'some message' } });
-  });
-
   it('clicking on dismiss button emits a dismiss event', () => {
+    createComponent();
     findDismissButton().vm.$emit('click');
-
     expect(wrapper.emitted('dismiss')).toHaveLength(1);
   });
+
+  it('dismiss button does not appear when dismissible is false', () => {
+    createComponent({ dismissible: false });
+    expect(findDismissButton().exists()).toBe(false);
+  });
+
+  it('dismiss button always appears for notification broadcast messages', () => {
+    createComponent({ dismissible: false, type: TYPE_NOTIFICATION });
+    expect(findDismissButton().exists()).toBe(true);
+  });
 });

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

@@ -1,17 +1,18 @@
 import iconSpriteInfo from '@gitlab/svgs/dist/icons.json';
 import { GlBroadcastMessage } from '../../../index';
 import { colorThemes } from '../../../utils/constants';
+import { TYPE_LIST, TYPE_NOTIFICATION } from './constants';
 import readme from './broadcast_message.md';
 
 const template = `
-    <div>
-      <gl-broadcast-message
-        :icon-name="iconName"
-        :dismiss-label="dismissLabel"
-        :theme="theme">
-        {{ text }}
-      </gl-broadcast-message>
-    </div>
+    <gl-broadcast-message
+      :icon-name="iconName"
+      :dismissible="dismissible"
+      :dismiss-label="dismissLabel"
+      :theme="theme"
+      :type="type">
+      {{ text }}
+    </gl-broadcast-message>
   `;
 
 const defaultValue = (prop) => GlBroadcastMessage.props[prop].default;
@@ -19,45 +20,45 @@ const defaultValue = (prop) => GlBroadcastMessage.props[prop].default;
 const generateProps = ({
   text = 'Tuesday June 12th, at 14:30 UTC we will perform database maintenance that will require up to 1 minute of downtime.',
   iconName = defaultValue('iconName'),
+  dismissible = defaultValue('dismissible'),
   dismissLabel = defaultValue('dismissLabel'),
   theme = defaultValue('theme'),
+  type = defaultValue('type'),
 } = {}) => ({
   text,
   iconName,
+  dismissible,
   dismissLabel,
   theme,
+  type,
 });
 
-const Template = (args, { argTypes }) => ({
+const DefaultStory = (args, { argTypes }) => ({
   components: {
     GlBroadcastMessage,
   },
   props: Object.keys(argTypes),
-  template,
+  template: `<div>${template}</div>`,
 });
-export const Default = Template.bind({});
+export const Default = DefaultStory.bind({});
 Default.args = generateProps();
 
+const NotificationStory = (args, { argTypes }) => ({
+  components: {
+    GlBroadcastMessage,
+  },
+  props: Object.keys(argTypes),
+  template: `<div>${template}</div>`,
+});
+export const Notification = NotificationStory.bind({});
+Notification.args = generateProps({ type: TYPE_NOTIFICATION });
+
 const StackedStory = (args, { argTypes }) => ({
   components: {
     GlBroadcastMessage,
   },
   props: Object.keys(argTypes),
-  template: `
-    <div>
-      <gl-broadcast-message
-        :icon-name="iconName"
-        :dismiss-label="dismissLabel"
-        :theme="theme">
-          {{ text }}
-      </gl-broadcast-message>
-      <gl-broadcast-message
-        :icon-name="iconName"
-        :dismiss-label="dismissLabel"
-        :theme="theme">
-          {{ text }}
-      </gl-broadcast-message>
-    </div>`,
+  template: `<div>${template}${template}</div>`,
 });
 export const Stacked = StackedStory.bind({});
 Stacked.args = generateProps();
@@ -84,5 +85,9 @@ export default {
       options: Object.keys(colorThemes),
       control: 'select',
     },
+    type: {
+      options: TYPE_LIST,
+      control: 'select',
+    },
   },
 };

package/src/components/base/broadcast_message/broadcast_message.vue

@@ -2,6 +2,7 @@
 import { colorThemes } from '../../../utils/constants';
 import CloseButton from '../../shared_components/close_button/close_button.vue';
 import GlIcon from '../icon/icon.vue';
+import { TYPE_BANNER, TYPE_NOTIFICATION, TYPE_LIST } from './constants';
 
 export default {
   components: {
@@ -17,6 +18,14 @@ export default {
       required: false,
       default: 'bullhorn',
     },
+    /**
+     * Allow the broadcast message to be dismissed by a user.
+     */
+    dismissible: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
     /**
      * The dismiss button's label, it is visible in mobile viewports and used for the button's aria-label attribute.
      */
@@ -34,6 +43,21 @@ export default {
       default: Object.keys(colorThemes)[0],
       validator: (value) => Object.keys(colorThemes).includes(value),
     },
+    /**
+     * The base layout to use. `notification` type broadcast messages are not compatible
+     with the `dismissible` or `theme` props.
+     */
+    type: {
+      type: String,
+      required: false,
+      default: TYPE_BANNER,
+      validator: (value) => TYPE_LIST.includes(value),
+    },
+  },
+  computed: {
+    showDismissButton() {
+      return this.dismissible || this.type === TYPE_NOTIFICATION;
+    },
   },
   methods: {
     onDismiss() {
@@ -50,7 +74,7 @@ export default {
 </script>
 
 <template>
-  <div class="gl-broadcast-message" :class="theme" role="alert">
+  <div class="gl-broadcast-message" :class="`${theme} ${type}`" role="alert">
     <div class="gl-broadcast-message-content">
       <div class="gl-broadcast-message-icon gl-line-height-normal">
         <gl-icon :name="iconName" />
@@ -61,6 +85,7 @@ export default {
       </div>
     </div>
     <close-button
+      v-if="showDismissButton"
       ref="dismiss"
       class="gl-close-btn-color-inherit gl-broadcast-message-dismiss"
       :label="dismissLabel"

package/src/components/base/broadcast_message/constants.js

@@ -0,0 +1,3 @@
+export const TYPE_BANNER = 'banner';
+export const TYPE_NOTIFICATION = 'notification';
+export const TYPE_LIST = [TYPE_BANNER, TYPE_NOTIFICATION];

package/src/scss/variables.scss

@@ -469,6 +469,7 @@ $gl-max-dropdown-max-height: px-to-rem(312px);
 
 // Broadcast messages
 $gl-broadcast-message-text-max-width: px-to-rem(934px);
+$gl-broadcast-message-notification-max-width: px-to-rem(300px);
 
 // Modal Widths
 $gl-modal-small-width: px-to-rem(512px);