oppdatert storybook

NVE · Nov 29, 2023 · f7dcd3e · f7dcd3e
1 parent 598594e
commit f7dcd3e
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 71 deletions.
diff --git 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
@@ -94,25 +94,19 @@ const app = html`<table>
     emphasized
     leftStroke
     title="Info tittel"
-    text="some bullshit text asdhaksjd asdijasd  "
+    text="some text asdhaksjd asdijasd  "
     variant="primary"
     open
     closable
   >
     <nve-icon slot="icon" name="info"></nve-icon>
   </nve-alert>
-  <nve-alert
-    emphasized
-    leftStroke
-    text="some bullshit text"
-    variant="danger"
-    open
-  >
+  <nve-alert emphasized leftStroke text="some text" variant="danger" open>
   </nve-alert>
   <nve-alert
     emphasized
     leftStroke
-    text="some bullshit text"
+    text="some text"
     variant="neutral"
     open
     closable
@@ -125,7 +119,7 @@ const app = html`<table>
   <nve-alert
     emphasized
     leftStroke
-    text="some bullshit text"
+    text="some text"
     variant="warning"
     open
     closable

diff --git a/src/stories/NveAlert.stories.ts b/src/stories/NveAlert.stories.ts
@@ -14,14 +14,15 @@ export default {
     closable: boolean;
     open: boolean;
     showIcon: boolean;
-    iconName: string;
   }) => 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
@@ -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`
     <nve-alert
       variant=${variant}