diff --git a/src/components/nve-alert/nve-alert.styles.ts b/src/components/nve-alert/nve-alert.styles.ts
index d350b6f2..8c88ef4c 100644
--- a/src/components/nve-alert/nve-alert.styles.ts
+++ b/src/components/nve-alert/nve-alert.styles.ts
@@ -31,10 +31,10 @@ export default css`
}
}
.alert__message::after {
- content: var(nve-alert-text);
+ content: var(--nve-alert-text);
font: var(--body-medium-default);
-
}
+
.alert__message::before{
content: var(--nve-alert-title);
font: var(--header-small);
diff --git a/src/main.ts b/src/main.ts
index 2b22dcc8..272b6710 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -94,25 +94,19 @@ const app = html`
emphasized
leftStroke
title="Info tittel"
- text="some bullshit text asdhaksjd asdijasd "
+ text="some text asdhaksjd asdijasd "
variant="primary"
open
closable
>
-
+
NveAlert(args),
argTypes: {
text: { control: { type: 'text' }},
title: { control: {type: 'text'}},
- variant: { table: { disable: true }},
+ variant: {
+ control: { type: 'select' },
+ options: ['primary', 'warning', 'success', 'danger', 'neutral'],
+ },
open: { table: { disable: true }},
- iconName: { table: { disable: true }}
},
};
@@ -34,63 +35,9 @@ export const Primary = {
emphasized: false,
closable: true,
showIcon: true,
- iconName: 'info',
open: true
},
};
-export const Warning = {
- args: {
- variant: 'warning',
- text: 'this is some example text',
- title: 'Advarsel',
- leftStroke: false,
- emphasized: false,
- closable: true,
- showIcon: true,
- iconName: 'warning',
- open: true
- },
-};
-export const Success = {
- args: {
- variant: 'success',
- text: 'this is some example text',
- title: 'Success',
- leftStroke: false,
- emphasized: false,
- closable: true,
- showIcon: true,
- iconName: 'check_circle',
- open: true
- },
-};
-
-export const Danger = {
- args: {
- variant: 'danger',
- text: 'this is some example text',
- title: 'Feil',
- leftStroke: true,
- emphasized: false,
- closable: true,
- showIcon: true,
- iconName: 'error',
- open: true
- },
-};
-export const Neutral = {
- args: {
- variant: 'neutral',
- text: 'this is some example text',
- title: 'Tittel',
- leftStroke: false,
- emphasized: false,
- closable: true,
- showIcon: true,
- iconName: 'help',
- open: true
- },
- };
diff --git a/src/stories/NveAlert.ts b/src/stories/NveAlert.ts
index 29cdf54c..eeb09530 100644
--- a/src/stories/NveAlert.ts
+++ b/src/stories/NveAlert.ts
@@ -9,7 +9,6 @@ export const NveAlert = ({
closable,
open,
showIcon,
- iconName
}: {
variant: string;
text: string;
@@ -19,8 +18,30 @@ export const NveAlert = ({
closable: boolean;
open: boolean;
showIcon: boolean;
- iconName: string;
}) => {
+
+ let iconName;
+
+ switch(variant) {
+ case 'primary':
+ iconName = 'info';
+ break;
+ case 'danger':
+ iconName = 'error';
+ break;
+ case 'success':
+ iconName = 'check_circle';
+ break;
+ case 'warning':
+ iconName = 'warning';
+ break;
+ case 'neutral':
+ iconName = 'help';
+ break;
+ default:
+ iconName = 'help';
+ }
+
return html`