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;