feat(Alert): ✨ New design and sizes

packages/css/alert.css

@@ -1,20 +1,23 @@
 @layer fds.alert {
   .fds-alert {
-    --fds-alert-border: var(--fds-semantic-border-info-default);
-    --fds-alert-border-left: 8px 0 0 0 var(--fds-alert-border) inset;
+    --fds-alert-border-color: var(--fds-semantic-border-info-default);
+    --fds-alert-border-radius: var(--fds-border_radius-medium);
     --fds-alert-color: var(--fds-semantic-text-neutral-default);
-    --fds-alert-icon-color: var(--fds-alert-border);
+    --fds-alert-icon-color: var(--fds-alert-border-color);
     --fds-alert-icon-size: var(--fds-sizing-7);
     --fds-alert-background: var(--fds-semantic-surface-info-subtle);
+    --fds-alert-padding: var(--fds-spacing-6);
 
-    box-shadow: var(--fds-alert-border-left);
+    border: 1px solid var(--fds-alert-border-color);
+    border-radius: var(--fds-alert-border-radius);
     background: var(--fds-alert-background);
     color: var(--fds-alert-color);
-    padding: var(--fds-spacing-4);
+    padding: var(--fds-alert-padding);
     display: grid;
     grid-auto-flow: column;
     grid-auto-columns: min-content auto;
     gap: var(--fds-spacing-2);
+    font: var(--fds-typography-paragraph-medium);
   }
 
   .fds-alert__icon {
@@ -29,26 +32,41 @@
   }
 
   .fds-alert--info {
-    --fds-alert-border: var(--fds-semantic-border-info-default);
+    --fds-alert-border-color: var(--fds-semantic-border-info-default);
     --fds-alert-background: var(--fds-semantic-surface-info-subtle);
   }
 
   .fds-alert--warning {
-    --fds-alert-border: var(--fds-semantic-border-warning-default);
+    --fds-alert-border-color: var(--fds-semantic-border-warning-default);
     --fds-alert-background: var(--fds-semantic-surface-warning-subtle);
   }
 
   .fds-alert--success {
-    --fds-alert-border: var(--fds-semantic-border-success-default);
+    --fds-alert-border-color: var(--fds-semantic-border-success-default);
     --fds-alert-background: var(--fds-semantic-surface-success-subtle);
   }
 
   .fds-alert--danger {
-    --fds-alert-border: var(--fds-semantic-border-danger-default);
+    --fds-alert-border-color: var(--fds-semantic-border-danger-default);
     --fds-alert-background: var(--fds-semantic-surface-danger-subtle);
   }
 
+  .fds-alert--small {
+    --fds-alert-padding: var(--fds-spacing-5);
+    --fds-alert-icon-size: var(--fds-sizing-6);
+  }
+
+  .fds-alert--medium {
+    --fds-alert-padding: var(--fds-spacing-6);
+    --fds-alert-icon-size: var(--fds-sizing-7);
+  }
+
+  .fds-alert--large {
+    --fds-alert-padding: var(--fds-spacing-7);
+    --fds-alert-icon-size: var(--fds-sizing-8);
+  }
+
   .fds-alert--elevated {
-    box-shadow: var(--fds-alert-border-left), var(--fds-shadow-small);
+    box-shadow: var(--fds-shadow-small);
   }
 }

packages/react/src/components/Alert/Alert.mdx

@@ -80,6 +80,18 @@ Kan brukes når alerten skal fremheves mer fra bakgrunnen, for eksempel dersom d
 
 ## Retningslinjer
 
+### Størrelser
+
+Når du setter `size`, endrer vi ikke størrelsen på tekst som ligger i tekstkomponenter. Fritekst som blir sendt inn vil endre størrelse i henhold til `size`-propen.
+
+Dersom du sender inn tekst ved bruk av komponenter kan du følge tabellen under for anbefalt størrelser:
+
+| Alert Størrelse | Heading størrelse | Paragraph størrelse |
+| --------------- | ----------------- | ------------------- |
+| small           | xxsmall           | small               |
+| medium          | xsmall            | medium              |
+| large           | small             | large               |
+
 ### Ikke lag andre versjoner
 
 Det er viktig at Alerts har samme utseende og formspråk på tvers av produktene, så den skal ikke justeres.

packages/react/src/components/Alert/Alert.stories.tsx

@@ -6,24 +6,30 @@ import { Alert } from '.';
 
 type Story = StoryFn<typeof Alert>;
 
-export default {
+const meta: Meta = {
   title: 'Komponenter/Alert',
   component: Alert,
   parameters: {
     layout: 'padded',
   },
-} as Meta;
+};
+
+export default meta;
 
 export const Preview: Story = (args) => <Alert {...args}></Alert>;
 
 Preview.args = {
   severity: 'info',
   elevated: false,
+  size: 'medium',
   children: 'En beskjed det er viktig at brukeren ser',
 };
 
-export const VariantInfo: Story = () => (
-  <Alert severity='info'>
+export const VariantInfo: Story = (args) => (
+  <Alert
+    {...args}
+    severity='info'
+  >
     <Heading
       level={2}
       size='xsmall'
@@ -38,8 +44,11 @@ export const VariantInfo: Story = () => (
   </Alert>
 );
 
-export const VariantSuccess: Story = () => (
-  <Alert severity='success'>
+export const VariantSuccess: Story = (args) => (
+  <Alert
+    {...args}
+    severity='success'
+  >
     <Heading
       level={2}
       size='xsmall'
@@ -54,8 +63,11 @@ export const VariantSuccess: Story = () => (
   </Alert>
 );
 
-export const VariantWarning: Story = () => (
-  <Alert severity='warning'>
+export const VariantWarning: Story = (args) => (
+  <Alert
+    {...args}
+    severity='warning'
+  >
     <Heading
       level={2}
       size='xsmall'
@@ -70,8 +82,11 @@ export const VariantWarning: Story = () => (
   </Alert>
 );
 
-export const VariantDanger: Story = () => (
-  <Alert severity='danger'>
+export const VariantDanger: Story = (args) => (
+  <Alert
+    {...args}
+    severity='danger'
+  >
     <Heading
       level={2}
       size='xsmall'
@@ -87,8 +102,8 @@ export const VariantDanger: Story = () => (
   </Alert>
 );
 
-export const MedHeading: Story = () => (
-  <Alert>
+export const MedHeading: Story = (args) => (
+  <Alert {...args}>
     <Heading
       level={2}
       size='xsmall'
@@ -103,14 +118,20 @@ export const MedHeading: Story = () => (
   </Alert>
 );
 
-export const MedKunHeading: Story = () => (
-  <Alert severity='warning'>
+export const MedKunHeading: Story = (args) => (
+  <Alert
+    {...args}
+    severity='warning'
+  >
     <Paragraph> Du har 7 dager igjen på å fullføre søknaden.</Paragraph>
   </Alert>
 );
 
-export const MedLenke: Story = () => (
-  <Alert severity='warning'>
+export const MedLenke: Story = (args) => (
+  <Alert
+    {...args}
+    severity='warning'
+  >
     <Heading
       level={2}
       size='xsmall'
@@ -125,17 +146,21 @@ export const MedLenke: Story = () => (
   </Alert>
 );
 
-export const MedShadow: Story = () => (
+export const MedShadow: Story = (args) => (
   <Alert
+    {...args}
     elevated
     severity='success'
   >
     <Paragraph>Skjemaet er lagret automatisk.</Paragraph>
   </Alert>
 );
 
-export const UtenAria: Story = () => (
-  <Alert severity='warning'>
+export const UtenAria: Story = (args) => (
+  <Alert
+    {...args}
+    severity='warning'
+  >
     <Heading
       level={2}
       size='xsmall'
@@ -150,8 +175,11 @@ export const UtenAria: Story = () => (
   </Alert>
 );
 
-export const MedAria: Story = () => (
-  <Alert severity='danger'>
+export const MedAria: Story = (args) => (
+  <Alert
+    {...args}
+    severity='danger'
+  >
     <Heading
       level={2}
       size='xsmall'

packages/react/src/components/Alert/Alert.tsx

@@ -38,11 +38,24 @@ export type AlertProps = {
    * Use this to inform screenreaders of severity.
    *  Defaults to Norwegian. */
   iconTitle?: string;
+  /** Sets the size of the alert.
+   * Does not affect font size.
+   *
+   * @default 'medium'
+   */
+  size?: 'small' | 'medium' | 'large';
 } & HTMLAttributes<HTMLDivElement>;
-
 export const Alert = forwardRef<HTMLDivElement, AlertProps>(
   (
-    { severity = 'info', elevated, iconTitle, children, className, ...rest },
+    {
+      severity = 'info',
+      elevated,
+      iconTitle,
+      size,
+      children,
+      className,
+      ...rest
+    },
     ref,
   ) => {
     const { Icon, title } = icons[severity];
@@ -52,6 +65,7 @@ export const Alert = forwardRef<HTMLDivElement, AlertProps>(
         ref={ref}
         className={cl(
           'fds-alert',
+          `fds-alert--${size}`,
           `fds-alert--${severity}`,
           elevated && `fds-alert--elevated`,
           className,
@@ -65,6 +79,7 @@ export const Alert = forwardRef<HTMLDivElement, AlertProps>(
           />
           <Paragraph
             asChild
+            size={size}
             className='fds-alert__content'
           >
             <span>{children}</span>