Merge pull request #2491 from SpareBank1/semantiske-farger-messages

Semantiske farger messages
SpareBank1 · Jan 21, 2025 · 6756a8d · 6756a8d
2 parents d789b12 + ca4d507
commit 6756a8d
Show file tree

Hide file tree

Showing 14 changed files with 329 additions and 217 deletions.
diff --git a/packages/ffe-core/less/theme.less b/packages/ffe-core/less/theme.less
@@ -138,6 +138,7 @@
     /* Form element borders */
     --ffe-g-border-color: var(--ffe-farge-varmgraa);
     --ffe-g-border-radius: 8px;
+    --ffe-g-border-radius-lg: 16px;
     --ffe-g-border-width: 1px;
     --ffe-g-border-width-focus: 2px;
 

diff --git a/packages/ffe-messages-react/src/ContextMessage.spec.tsx b/packages/ffe-messages-react/src/ContextMessage.spec.tsx
@@ -9,7 +9,7 @@ describe('<ContextMessage />', () => {
         ['error', 'alert', 'Feilmelding'],
         ['success', 'group', 'Suksessmelding'],
         ['tips', 'group', 'Tipsmelding'],
-        ['news', 'group', 'Nyhetsmelding'],
+        ['warning', 'group', 'Advarsel'],
     ] as const)('should render each type %s', (type, role, name) => {
         render(<ContextMessage type={type} />);
         expect(screen.getByRole(role, { name })).toBeInTheDocument();
@@ -79,17 +79,6 @@ describe('<ContextMessage />', () => {
         expect(group.classList.contains('ffe-message--info')).toBeTruthy();
     });
 
-    it('should --colored-bg modifier classes ', () => {
-        render(<ContextMessage type="info" onColoredBg={true} />);
-        const group = screen.getByRole('group');
-        expect(group.classList.contains('ffe-message')).toBeTruthy();
-        expect(group.classList.contains('ffe-message--context')).toBeTruthy();
-        expect(
-            group.classList.contains('ffe-message--colored-bg'),
-        ).toBeTruthy();
-        expect(group.classList.contains('ffe-message--info')).toBeTruthy();
-    });
-
     it('should be closeable', async () => {
         render(<ContextMessage type="info" closeButton={true} />);
         expect(

diff --git a/packages/ffe-messages-react/src/ContextMessage.stories.tsx b/packages/ffe-messages-react/src/ContextMessage.stories.tsx
@@ -2,6 +2,7 @@ import React, { FunctionComponent } from 'react';
 import { ContextMessage } from './ContextMessage';
 import { MessageHeader } from './MessageHeader';
 import type { StoryObj, Meta } from '@storybook/react';
+import { LinkText } from '@sb1/ffe-core-react';
 
 const meta: Meta<typeof ContextMessage> = {
     title: 'Komponenter/Messages/ContextMessage',
@@ -14,11 +15,76 @@ export default meta;
 
 type Story = StoryObj<typeof ContextMessage>;
 
+const messageArgs = {
+    closeButton: true,
+    header: 'Meldingstittel',
+};
+
 export const Standard: Story = {
     args: {
+        ...messageArgs,
+        type: 'info',
+    },
+    render: args => (
+        <ContextMessage {...args}>
+            Kontekstuelle meldinger er informasjon som skal gis i en kontekst
+            <LinkText>Lenke</LinkText>
+        </ContextMessage>
+    ),
+};
+
+export const Info: Story = {
+    args: {
+        ...messageArgs,
         type: 'info',
-        closeButton: true,
-        header: 'Meldingstittel',
+    },
+    render: args => (
+        <ContextMessage {...args}>
+            Kontekstuelle meldinger er informasjon som skal gis i en kontekst
+        </ContextMessage>
+    ),
+};
+
+export const Tips: Story = {
+    args: {
+        ...messageArgs,
+        type: 'tips',
+    },
+    render: args => (
+        <ContextMessage {...args}>
+            Kontekstuelle meldinger er informasjon som skal gis i en kontekst
+        </ContextMessage>
+    ),
+};
+
+export const Success: Story = {
+    args: {
+        ...messageArgs,
+        type: 'success',
+    },
+    render: args => (
+        <ContextMessage {...args}>
+            Kontekstuelle meldinger er informasjon som skal gis i en kontekst
+        </ContextMessage>
+    ),
+};
+
+export const Warning: Story = {
+    args: {
+        ...messageArgs,
+        type: 'warning',
+    },
+    render: args => (
+        <ContextMessage {...args}>
+            Kontekstuelle meldinger er informasjon som skal gis i en kontekst
+        </ContextMessage>
+    ),
+};
+
+export const Error: Story = {
+    args: {
+        ...messageArgs,
+        type: 'error',
     },
     render: args => (
         <ContextMessage {...args}>

diff --git a/packages/ffe-messages-react/src/ContextMessage.tsx b/packages/ffe-messages-react/src/ContextMessage.tsx
@@ -16,22 +16,19 @@ export interface ContextMessageProps
     iconFileUrl?: string;
     /** Decides the language of the aria-label for the close icon */
     locale?: Locale;
-    /** info, success, tips, news or error */
+    /** info, success, tips, warning or error */
     type: MessageType;
     /** Called when closed */
     onClose?: () => void;
     /** Show close button */
     closeButton?: boolean;
-    /** Adds alternative styling for better contrast on certain backgrounds */
-    onColoredBg?: boolean;
     /** The header */
     header?: React.ReactElement<MessageHeaderProps> | string;
 }
 
 export const ContextMessage: React.FC<ContextMessageProps> = ({
     type,
     className,
-    onColoredBg,
     locale = 'nb',
     children,
     onClose,
@@ -52,7 +49,6 @@ export const ContextMessage: React.FC<ContextMessageProps> = ({
                     `ffe-message--${type}`,
                     {
                         'ffe-message--context-compact': compact,
-                        'ffe-message--colored-bg': onColoredBg,
                     },
                     className,
                 )}

diff --git a/packages/ffe-messages-react/src/MessageBox.spec.tsx b/packages/ffe-messages-react/src/MessageBox.spec.tsx
@@ -10,7 +10,7 @@ describe('<MessageBox />', () => {
         ['error', 'alert', 'Feilmelding'],
         ['success', 'group', 'Suksessmelding'],
         ['tips', 'group', 'Tipsmelding'],
-        ['news', 'group', 'Nyhetsmelding'],
+        ['warning', 'group', 'Advarsel'],
     ] as const)('should render each type %s', (type, role, name) => {
         render(<MessageBox type={type} />);
         expect(screen.getByRole(role, { name })).toBeInTheDocument();
@@ -65,15 +65,4 @@ describe('<MessageBox />', () => {
         expect(group.classList.contains('my-class')).toBeTruthy();
         expect(group.classList.contains('ffe-message--colored-bg')).toBeFalsy();
     });
-
-    it('should --colored-bg modifier classes ', () => {
-        render(<MessageBox type="info" onColoredBg={true} />);
-        const group = screen.getByRole('group');
-        expect(group.classList.contains('ffe-message')).toBeTruthy();
-        expect(group.classList.contains('ffe-message--box')).toBeTruthy();
-        expect(
-            group.classList.contains('ffe-message--colored-bg'),
-        ).toBeTruthy();
-        expect(group.classList.contains('ffe-message--info')).toBeTruthy();
-    });
 });
diff --git a/packages/ffe-messages-react/src/MessageBox.stories.tsx b/packages/ffe-messages-react/src/MessageBox.stories.tsx
@@ -2,6 +2,7 @@ import React, { FunctionComponent } from 'react';
 import { MessageBox } from './MessageBox';
 import { MessageHeader } from './MessageHeader';
 import type { StoryObj, Meta } from '@storybook/react';
+import { LinkText } from '@sb1/ffe-core-react';
 
 const meta: Meta<typeof MessageBox> = {
     title: 'Komponenter/Messages/MessageBox',
@@ -14,10 +15,80 @@ export default meta;
 
 type Story = StoryObj<typeof MessageBox>;
 
+const messageArgs = {
+    header: 'Meldingstittel',
+};
+
 export const Standard: Story = {
     args: {
+        ...messageArgs,
+        type: 'info',
+    },
+    render: args => (
+        <MessageBox {...args}>
+            Meldingsboksene skal inneholde informasjon som er nyttig og relevant
+            for brukerne.
+            <LinkText>Lenke</LinkText>
+        </MessageBox>
+    ),
+};
+
+export const Info: Story = {
+    args: {
+        ...messageArgs,
+        type: 'info',
+    },
+    render: args => (
+        <MessageBox {...args}>
+            Meldingsboksene skal inneholde informasjon som er nyttig og relevant
+            for brukerne.
+        </MessageBox>
+    ),
+};
+
+export const Tips: Story = {
+    args: {
+        ...messageArgs,
+        type: 'tips',
+    },
+    render: args => (
+        <MessageBox {...args}>
+            Meldingsboksene skal inneholde informasjon som er nyttig og relevant
+            for brukerne.
+        </MessageBox>
+    ),
+};
+
+export const Success: Story = {
+    args: {
+        ...messageArgs,
+        type: 'success',
+    },
+    render: args => (
+        <MessageBox {...args}>
+            Meldingsboksene skal inneholde informasjon som er nyttig og relevant
+            for brukerne.
+        </MessageBox>
+    ),
+};
+
+export const Warning: Story = {
+    args: {
+        ...messageArgs,
+        type: 'warning',
+    },
+    render: args => (
+        <MessageBox {...args}>
+            Meldingsboksene skal inneholde informasjon som er nyttig og relevant
+            for brukerne.
+        </MessageBox>
+    ),
+};
+
+export const Error: Story = {
+    args: {
+        ...messageArgs,
         type: 'error',
-        header: 'Meldingstittel',
     },
     render: args => (
         <MessageBox {...args}>

diff --git a/packages/ffe-messages-react/src/MessageBox.tsx b/packages/ffe-messages-react/src/MessageBox.tsx
@@ -11,10 +11,8 @@ export interface MessageBoxProps extends React.ComponentPropsWithoutRef<'div'> {
     iconFileUrl?: string;
     /** The header */
     header?: React.ReactElement<MessageHeaderProps> | string;
-    /** info, success, tips, news or error */
+    /** info, success, tips, warning or error */
     type: MessageType;
-    /** Adds alternative styling for better contrast on certain backgrounds */
-    onColoredBg?: boolean;
     /** Decides the language of the aria-label for the close icon */
     locale?: Locale;
 }
@@ -25,7 +23,6 @@ export const MessageBox: React.FC<MessageBoxProps> = ({
     iconFileUrl,
     children,
     locale = 'nb',
-    onColoredBg,
     className,
     ...rest
 }) => {
@@ -35,9 +32,6 @@ export const MessageBox: React.FC<MessageBoxProps> = ({
                 `ffe-message`,
                 `ffe-message--box`,
                 `ffe-message--${type}`,
-                {
-                    'ffe-message--colored-bg': onColoredBg,
-                },
                 className,
             )}
             role={type === 'error' ? 'alert' : 'group'}

diff --git a/packages/ffe-messages-react/src/SystemMessage.spec.tsx b/packages/ffe-messages-react/src/SystemMessage.spec.tsx
@@ -8,7 +8,7 @@ describe('<SystemMessage />', () => {
         ['error', 'alert', 'Feilmelding'],
         ['success', 'group', 'Suksessmelding'],
         ['tips', 'group', 'Tipsmelding'],
-        ['news', 'group', 'Nyhetsmelding'],
+        ['warning', 'group', 'Advarsel'],
     ] as const)('should render each type %s', (type, role, name) => {
         render(<SystemMessage type={type} />);
         expect(screen.getByRole(role, { name })).toBeInTheDocument();
@@ -24,17 +24,6 @@ describe('<SystemMessage />', () => {
         expect(group.classList.contains('ffe-message--colored-bg')).toBeFalsy();
     });
 
-    it('should --colored-bg modifier classes ', () => {
-        render(<SystemMessage type="info" onColoredBg={true} />);
-        const group = screen.getByRole('group');
-        expect(group.classList.contains('ffe-message')).toBeTruthy();
-        expect(group.classList.contains('ffe-message--system')).toBeTruthy();
-        expect(
-            group.classList.contains('ffe-message--colored-bg'),
-        ).toBeTruthy();
-        expect(group.classList.contains('ffe-message--info')).toBeTruthy();
-    });
-
     it('should be closeable', async () => {
         render(<SystemMessage type="info" />);
         expect(