diff --git a/src/assets/img/icon/icon-warning-neutral.svg b/src/assets/img/icon/icon-warning-neutral.svg
new file mode 100644
index 00000000..f8d0e6b2
--- /dev/null
+++ b/src/assets/img/icon/icon-warning-neutral.svg
@@ -0,0 +1,5 @@
+
diff --git a/src/assets/scss/_alert.scss b/src/assets/scss/_alert.scss
index 00caa0ac..03478bac 100644
--- a/src/assets/scss/_alert.scss
+++ b/src/assets/scss/_alert.scss
@@ -61,6 +61,14 @@
}
}
+ &.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 +132,12 @@
min-height: 106px;
}
}
+
+ .action-content {
+ @apply ml-4;
+
+ &:empty {
+ @apply hidden;
+ }
+ }
}
diff --git a/src/components/Alert/Alert.stories.js b/src/components/Alert/Alert.stories.js
index 61ac48cd..4b6a3e2c 100644
--- a/src/components/Alert/Alert.stories.js
+++ b/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: '{{label}}',
+ components: { Alert, Button },
+ template: `
+
+ {{label}}
+
+
+
+ `,
});
export const Success = Template.bind({});
@@ -61,12 +84,20 @@ 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({});
@@ -74,7 +105,7 @@ InfoNeutral.args = {
icon: true,
label: 'Info Neutral',
variant: 'info-neutral',
- id: 'alert-5',
+ id: 'alert-6',
};
export const InfoLine = Template.bind({});
@@ -82,5 +113,14 @@ 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,
};
diff --git a/src/components/Alert/Alert.unit.spec.js b/src/components/Alert/Alert.unit.spec.js
index 3ae4d3aa..5b127aa8 100644
--- a/src/components/Alert/Alert.unit.spec.js
+++ b/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'),
diff --git a/src/components/Alert/Alert.vue b/src/components/Alert/Alert.vue
index 5729887f..ffec0734 100644
--- a/src/components/Alert/Alert.vue
+++ b/src/components/Alert/Alert.vue
@@ -16,6 +16,10 @@
+
+
+
+
Fechar
@@ -77,6 +81,7 @@ export default {
'success',
'error',
'warning',
+ 'warning-neutral',
'info',
'info-neutral',
'info-line',
diff --git a/src/components/Alert/README.md b/src/components/Alert/README.md
index c9466971..b5c69c1b 100644
--- a/src/components/Alert/README.md
+++ b/src/components/Alert/README.md
@@ -12,7 +12,7 @@
```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;