@gitlab/ui 39.1.0 → 39.2.0

package/package.json

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

package/src/components/base/alert/alert.scss

@@ -8,6 +8,10 @@
     @include gl-pr-5;
   }
 
+  &-no-icon {
+    @include gl-pl-5;
+  }
+
   .gl-link:not(.gl-label-link) {
     @include gl-text-blue-600;
     @include gl-text-decoration-underline;

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

@@ -20,6 +20,7 @@ describe('Alert component', () => {
     });
   };
 
+  const findIcon = () => wrapper.find('.gl-alert-icon');
   const findDismissButton = () => wrapper.findComponent({ ref: 'dismiss' });
   const findTitle = () => wrapper.find('.gl-alert-title');
   const findBodyContainer = () => wrapper.find('.gl-alert-body');
@@ -31,6 +32,10 @@ describe('Alert component', () => {
       createComponent({ slots: { default: DummyComponent } });
     });
 
+    it('renders a variant icon', () => {
+      expect(findIcon().exists()).toBe(true);
+    });
+
     it('renders a dismiss button', () => {
       expect(findDismissButton().exists()).toBe(true);
     });
@@ -54,6 +59,12 @@ describe('Alert component', () => {
     });
   });
 
+  it('does not render a variant icon when showIcon = false', () => {
+    createComponent({ propsData: { showIcon: false } });
+
+    expect(findIcon().exists()).toBe(false);
+  });
+
   it('does not render a dismiss button when dismissible = false', () => {
     createComponent({ propsData: { dismissible: false } });
 

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

@@ -6,6 +6,7 @@ const template = `
   <gl-alert
     :title="title"
     :dismissible="dismissible"
+    :show-icon="showIcon"
     :dismiss-label="dismissLabel"
     :variant="variant"
     :primary-button-text="primaryButtonText"
@@ -21,6 +22,7 @@ const generateProps = ({
   title = defaultValue('title'),
   variant = defaultValue('variant'),
   dismissible = defaultValue('dismissible'),
+  showIcon = defaultValue('showIcon'),
   dismissLabel = defaultValue('dismissLabel'),
   primaryButtonText = defaultValue('primaryButtonText'),
   primaryButtonLink = defaultValue('primaryButtonLink'),
@@ -32,6 +34,7 @@ const generateProps = ({
   message: 'Lorem ipsum dolor sit amet',
   variant,
   dismissible,
+  showIcon,
   dismissLabel,
   primaryButtonText,
   primaryButtonLink,
@@ -92,6 +95,17 @@ TextLinks.parameters = {
   storyshots: { disable: true },
 };
 
+export const NoIcon = () => ({
+  components: { GlAlert },
+  template: `
+    <gl-alert :show-icon="false">
+      Lorem ipsum dolor sit amet
+    </gl-alert>`,
+});
+NoIcon.parameters = {
+  storyshots: { disable: true },
+};
+
 export const Variants = () => ({
   components: { GlAlert },
   variants: alertVariantOptions,

package/src/components/base/alert/alert.vue

@@ -28,6 +28,14 @@ export default {
       required: false,
       default: true,
     },
+    /**
+     * Shows icon based on variant.
+     */
+    showIcon: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
     /**
      * Dismiss button's aria-label.
      */
@@ -165,10 +173,12 @@ export default {
       'gl-alert',
       { 'gl-alert-sticky': sticky },
       { 'gl-alert-not-dismissible': !dismissible },
+      { 'gl-alert-no-icon': !showIcon },
       variantClass,
     ]"
   >
     <gl-icon
+      v-if="showIcon"
       :name="iconName"
       :class="{ 'gl-alert-icon': true, 'gl-alert-icon-no-title': !title }"
     />