Merge pull request #162 from solfacil/feature/add-actions-slot-inside…

…-alert

feat: add actions slot inside alert

src/assets/scss/_alert.scss

@@ -61,6 +61,15 @@
     }
   }
 
+  &.warning-neutral {
+    @apply bg-gray2;
+
+    &:before {
+      background: url(~@img/icon/icon-warning-neutral.svg?url) no-repeat center
+        center;
+    }
+  }
+
   &.info {
     @apply bg-grayPrimary text-white;
 
@@ -124,4 +133,12 @@
       min-height: 106px;
     }
   }
+
+  .action-content {
+    @apply ml-4;
+
+    &:empty {
+      @apply hidden;
+    }
+  }
 }

src/components/Alert/Alert.stories.js

@@ -1,4 +1,5 @@
 import Alert from './Alert.vue';
+import Button from '../Button/Button.vue';
 
 export default {
   title: 'Components/UI Elements/Alerts',
@@ -19,11 +20,22 @@ export default {
         'success',
         'error',
         'warning',
+        'warning-neutral',
         'info',
         'info-neutral',
         'info-line',
       ],
     },
+    actionButton: {
+      control: { type: 'boolean' },
+      defaultValue: false,
+      description:
+        'Just a demonstration of how the button is going through the action slot',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+      },
+    },
   },
   parameters: {
     componentSubtitle:
@@ -33,8 +45,19 @@ export default {
 
 const Template = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
-  components: { Alert },
-  template: '<Alert v-bind="$props">{{label}}</Alert>',
+  components: { Alert, Button },
+  template: `
+  <Alert v-bind="$props">
+    {{label}}
+    <template v-if="$props.actionButton" #action>
+      <Button 
+        id="action-button"
+        variant="primary"
+      >
+        Baixar
+      </Button>
+    </template>
+  </Alert>`,
 });
 
 export const Success = Template.bind({});
@@ -61,26 +84,43 @@ Warning.args = {
   id: 'alert-3',
 };
 
+export const WarningNeutral = Template.bind({});
+WarningNeutral.args = {
+  icon: true,
+  label: 'Warning Neutral',
+  variant: 'warning-neutral',
+  id: 'alert-4',
+};
+
 export const Info = Template.bind({});
 Info.args = {
   icon: true,
   label: 'Info',
   variant: 'info',
-  id: 'alert-4',
+  id: 'alert-5',
 };
 
 export const InfoNeutral = Template.bind({});
 InfoNeutral.args = {
   icon: true,
   label: 'Info Neutral',
   variant: 'info-neutral',
-  id: 'alert-5',
+  id: 'alert-6',
 };
 
 export const InfoLine = Template.bind({});
 InfoLine.args = {
   icon: true,
   label: 'Info Line',
   variant: 'info-line',
-  id: 'alert-6',
+  id: 'alert-7',
+};
+
+export const ActionButton = Template.bind({});
+ActionButton.args = {
+  icon: true,
+  label: 'Baixe o CSV que disponibilizamos para ver e corrigir os problemas.',
+  variant: 'warning-neutral',
+  id: 'alert-8',
+  actionButton: true,
 };

src/components/Alert/Alert.unit.spec.js

@@ -70,6 +70,7 @@ describe('Alert - Unit', () => {
       variantValidator('success') &&
         variantValidator('error') &&
         variantValidator('warning') &&
+        variantValidator('warning-neutral') &&
         variantValidator('info') &&
         variantValidator('info-neutral') &&
         variantValidator('info-line'),

src/components/Alert/Alert.vue

@@ -16,6 +16,10 @@
         <slot />
       </span>
 
+      <div class="action-content">
+        <slot name="action" />
+      </div>
+
       <span v-if="close" class="alert-close" @click="hiddenAlert">
         <em>Fechar</em>
       </span>
@@ -77,6 +81,7 @@ export default {
           'success',
           'error',
           'warning',
+          'warning-neutral',
           'info',
           'info-neutral',
           'info-line',

src/components/Alert/README.md

@@ -12,7 +12,15 @@
 
 ```js
 size: ['sm', 'md', 'lg', 'xl'];
-variant: ['success', 'error', 'warning', 'info', 'info-neutral', 'info-line'];
+variant: [
+  'success',
+  'error',
+  'warning',
+  'warning-neutral',
+  'info',
+  'info-neutral',
+  'info-line',
+];
 close;
 icon;
 iconNumber;