Develop modal

component-overview/examples/modals/Modal-custom-background.jsx

@@ -0,0 +1,57 @@
+import { Modal, ModalBlock } from '@sb1/ffe-modals-react';
+import {
+    SecondaryButton,
+    ActionButton,
+    ButtonGroup,
+} from '@sb1/ffe-buttons-react';
+import { Heading2, Paragraph } from '@sb1/ffe-core-react';
+import { useRef } from 'react';
+import { v4 as uuid } from 'uuid';
+
+() => {
+    const modalRef = useRef();
+    const headingId = useRef(uuid()).current;
+
+    return (
+        <>
+            <ActionButton
+                type="button"
+                onClick={() => {
+                    modalRef.current.open();
+                }}
+            >
+                Åpne modal
+            </ActionButton>
+            <Modal ref={modalRef} ariaLabelledby={headingId}>
+                <div
+                    style={{
+                        height: 150,
+                        width: '100%',
+                        background: '#d8e9f2',
+                    }}
+                />
+                <ModalBlock>
+                    <Heading2 id={headingId}>En modal</Heading2>
+                    <Paragraph>
+                        Lorem ipsum dolor sit amet, consectetur adipisicing
+                        elit. Aperiam atque excepturi exercitationem harum neque
+                        obcaecati, ratione sapiente sit temporibus unde.
+                    </Paragraph>
+                    <ButtonGroup thin={true} ariaLabel="Knappegruppe">
+                        <SecondaryButton
+                            type="button"
+                            onClick={() => {
+                                modalRef.current.close();
+                            }}
+                        >
+                            Lukk modal
+                        </SecondaryButton>
+                        <ActionButton autoFocus={true} type="button">
+                            Lagre
+                        </ActionButton>
+                    </ButtonGroup>
+                </ModalBlock>
+            </Modal>
+        </>
+    );
+};

component-overview/examples/modals/Modal.jsx

@@ -0,0 +1,50 @@
+import { Modal, ModalBlock } from '@sb1/ffe-modals-react';
+import {
+    SecondaryButton,
+    ActionButton,
+    ButtonGroup,
+} from '@sb1/ffe-buttons-react';
+import { Heading2, Paragraph } from '@sb1/ffe-core-react';
+import { useRef } from 'react';
+import { v4 as uuid } from 'uuid';
+
+() => {
+    const modalRef = useRef();
+    const headingId = useRef(uuid()).current;
+
+    return (
+        <>
+            <ActionButton
+                type="button"
+                onClick={() => {
+                    modalRef.current.open();
+                }}
+            >
+                Åpne modal
+            </ActionButton>
+            <Modal ref={modalRef} ariaLabelledby={headingId}>
+                <ModalBlock>
+                    <Heading2 id={headingId}>En modal</Heading2>
+                    <Paragraph>
+                        Lorem ipsum dolor sit amet, consectetur adipisicing
+                        elit. Aperiam atque excepturi exercitationem harum neque
+                        obcaecati, ratione sapiente sit temporibus unde.
+                    </Paragraph>
+                    <ButtonGroup thin={true} ariaLabel="Knappegruppe">
+                        <SecondaryButton
+                            type="button"
+                            onClick={() => {
+                                modalRef.current.close();
+                            }}
+                        >
+                            Lukk modal
+                        </SecondaryButton>
+                        <ActionButton autoFocus={true} type="button">
+                            Lagre
+                        </ActionButton>
+                    </ButtonGroup>
+                </ModalBlock>
+            </Modal>
+        </>
+    );
+};

component-overview/src/style.less

@@ -18,3 +18,4 @@
 @import '@sb1/ffe-tabs/less/tabs';
 @import '@sb1/ffe-icons/less/ffe-icons';
 @import '@sb1/ffe-messages/less/messages';
+@import '@sb1/ffe-modals/less/modal';

packages/ffe-modals-react/package.json

@@ -25,6 +25,7 @@
         "test:watch": "ffe-buildtool jest --watch"
     },
     "dependencies": {
+        "@sb1/ffe-icons-react": "^10.0.5",
         "@sb1/ffe-modals": "^0.1.3"
     },
     "devDependencies": {

packages/ffe-modals-react/src/CloseButton.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import classnames from 'classnames';
+import { Icon } from '@sb1/ffe-icons-react';
+import { Locale } from './types';
+import { txt } from './texts';
+
+const closeIcon =
+    'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iMjQiPjxwYXRoIGQ9Ik00ODAtNDM3Ljg0NyAyNzcuMDc2LTIzNC45MjRxLTguMzA3IDguMzA4LTIwLjg4NCA4LjUtMTIuNTc2LjE5My0yMS4yNjgtOC41LTguNjkzLTguNjkyLTguNjkzLTIxLjA3NnQ4LjY5My0yMS4wNzZMNDM3Ljg0Ny00ODAgMjM0LjkyNC02ODIuOTI0cS04LjMwOC04LjMwNy04LjUtMjAuODg0LS4xOTMtMTIuNTc2IDguNS0yMS4yNjggOC42OTItOC42OTMgMjEuMDc2LTguNjkzdDIxLjA3NiA4LjY5M0w0ODAtNTIyLjE1M2wyMDIuOTI0LTIwMi45MjNxOC4zMDctOC4zMDggMjAuODg0LTguNSAxMi41NzYtLjE5MyAyMS4yNjggOC41IDguNjkzIDguNjkyIDguNjkzIDIxLjA3NnQtOC42OTMgMjEuMDc2TDUyMi4xNTMtNDgwbDIwMi45MjMgMjAyLjkyNHE4LjMwOCA4LjMwNyA4LjUgMjAuODg0LjE5MyAxMi41NzYtOC41IDIxLjI2OC04LjY5MiA4LjY5My0yMS4wNzYgOC42OTN0LTIxLjA3Ni04LjY5M0w0ODAtNDM3Ljg0N1oiLz48L3N2Zz4=';
+
+interface CloseButtonProps
+    extends Omit<React.ComponentPropsWithoutRef<'button'>, 'type'> {
+    locale: Locale;
+}
+
+export const CloseButton: React.FC<CloseButtonProps> = ({
+    className,
+    locale,
+    ...rest
+}) => {
+    return (
+        <button
+            type="button"
+            className={classnames('ffe-modal__close')}
+            aria-label={txt[locale].close}
+            {...rest}
+        >
+            <Icon fileUrl={closeIcon} size="md" />
+        </button>
+    );
+};

packages/ffe-modals-react/src/Modal.spec.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { Modal } from './Modal';
+import { render, screen } from '@testing-library/react';
+
+describe('<SystemMessage />', () => {
+    it('should render with classes', () => {
+        render(<Modal ariaLabelledby="heading-id" className="custom-class" />);
+
+        const modal = screen.getByRole('dialog', { hidden: true });
+
+        expect(modal.classList.contains('ffe-modal')).toBeTruthy();
+        expect(modal.classList.contains('custom-class')).toBeTruthy();
+    });
+
+    it('should have close button', () => {
+        render(<Modal ariaLabelledby="heading-id" className="custom-class" />);
+
+        const closeButton = screen.getByRole('button', {
+            hidden: true,
+            name: 'Lukk',
+        });
+
+        expect(closeButton).toBeInTheDocument();
+    });
+
+    it('should set up heading', () => {
+        const headingId = 'heading-id';
+
+        render(
+            <Modal ariaLabelledby={headingId} className="custom-class">
+                <h2 id={headingId}>heading</h2>
+            </Modal>,
+        );
+
+        const modal = screen.getByRole('dialog', { hidden: true });
+        const heading = screen.getByRole('heading', {
+            hidden: true,
+            name: 'heading',
+        });
+
+        expect(modal.getAttribute('aria-labelledby')).toBe(
+            heading.getAttribute('id'),
+        );
+    });
+});

packages/ffe-modals-react/src/Modal.tsx

@@ -1,7 +1,66 @@
-import React from 'react';
+import React, { useImperativeHandle, useRef } from 'react';
+import classnames from 'classnames';
+import { CloseButton } from './CloseButton';
+import { Locale } from './types';
 
-export interface ModalProps {}
+export interface ModalProps extends React.ComponentPropsWithoutRef<'dialog'> {
+    /** Id of modal heading */
+    ariaLabelledby: string;
+    /** Id of modal heading */
+    locale?: Locale;
+}
 
-export const Modal: React.FC<ModalProps> = () => {
-    return null;
+export type ModalHandle = {
+    readonly open: () => void;
+    readonly close: () => void;
 };
+
+export const Modal = React.forwardRef<ModalHandle, ModalProps>(
+    (
+        {
+            children,
+            onClick,
+            ariaLabelledby,
+            className,
+            locale = 'nb',
+            ...rest
+        },
+        ref,
+    ) => {
+        const modalRef = useRef<HTMLDialogElement>(null);
+
+        useImperativeHandle(ref, () => ({
+            open: () => {
+                modalRef.current?.showModal();
+            },
+            close: () => {
+                modalRef.current?.close();
+            },
+        }));
+
+        return (
+            // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
+            <dialog
+                {...rest}
+                ref={modalRef}
+                className={classnames('ffe-modal', className)}
+                aria-labelledby={ariaLabelledby}
+                onClick={event => {
+                    const target = event.target as HTMLDialogElement;
+                    if (target.nodeName === 'DIALOG') {
+                        target.close();
+                    }
+                    onClick?.(event);
+                }}
+            >
+                <div className="ffe-modal__body">
+                    <CloseButton
+                        onClick={() => modalRef.current?.close()}
+                        locale={locale}
+                    />
+                    {children}
+                </div>
+            </dialog>
+        );
+    },
+);

packages/ffe-modals-react/src/ModalBlock.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import classnames from 'classnames';
+
+export const ModalBlock: React.FC<React.ComponentPropsWithoutRef<'div'>> = ({
+    className,
+    ...rest
+}) => {
+    return (
+        <div className={classnames('ffe-modal__block', className)} {...rest} />
+    );
+};

packages/ffe-modals-react/src/index.ts

@@ -1 +1,2 @@
 export { Modal } from './Modal';
+export { ModalBlock } from './ModalBlock';

packages/ffe-modals-react/src/texts.ts

@@ -0,0 +1,11 @@
+const nb = {
+    close: 'Lukk',
+} as const;
+const nn = {
+    close: 'Lukk',
+} as const;
+const en = {
+    close: 'Close',
+} as const;
+
+export const txt = { nb, nn, en };

packages/ffe-modals-react/src/types.ts

@@ -0,0 +1 @@
+export type Locale = 'nb' | 'nn' | 'en';

packages/ffe-modals/less/modal.less

@@ -1,4 +1,78 @@
 @import 'theme';
+
+:is(:root):has(.ffe-modal[open]) {
+    overflow-y: hidden;
+}
+
 .ffe-modal {
+    border: none;
+    border-radius: var(--ffe-v-modal-border-radius);
+    padding: 0;
+}
+
+.ffe-modal[open] {
+    display: grid;
+    pointer-events: auto;
+}
+
+.ffe-modal::backdrop {
+    backdrop-filter: blur(4px);
+    background-color: rgba(0, 0, 0, 0.6);
+    .native & {
+        @media (prefers-color-scheme: dark) {
+            background-color: rgba(255, 255, 255, 0.1);
+        }
+    }
+}
+
+.ffe-modal__body {
     background: var(--ffe-v-modal-bg-color);
+    max-width: 600px;
+}
+
+.ffe-modal__block {
+    margin: var(--ffe-spacing-md);
+}
+
+.ffe-modal__close {
+    --background-color: var(--ffe-v-modal-bg-color);
+    --border-color: var(--ffe-v-modal-close-button-color);
+    --text-color: var(--ffe-v-modal-close-button-color);
+    --outline-color: transparent;
+
+    aspect-ratio: 1;
+    background: var(--background-color);
+    color: var(--text-color);
+    border: 2px solid var(--border-color);
+    font: inherit;
+    cursor: pointer;
+    outline: 2px solid var(--outline-color);
+    padding: var(--ffe-spacing-2xs);
+    border-radius: 50%;
+    float: right;
+    margin: var(--ffe-spacing-md);
+    outline-offset: 4px;
+    transition: all var(--ffe-transition-duration) var(--ffe-ease);
+
+    &::after {
+        content: '';
+        display: block;
+        clear: both;
+    }
+
+    .ffe-icons {
+        display: block;
+        color: inherit;
+    }
+
+    &:focus-visible {
+        --outline-color: var(--ffe-v-modal-close-button-color);
+    }
+
+    @media (hover: hover) and (pointer: fine) {
+        &:hover {
+            --background-color: var(--ffe-v-modal-close-button-color);
+            --text-color: var(--ffe-v-modal-bg-color);
+        }
+    }
 }

packages/ffe-modals/less/theme.less

@@ -1,4 +1,15 @@
 :root,
 :host {
+    --ffe-v-modal-backdrop-color: var(--ffe-farge-svart);
     --ffe-v-modal-bg-color: var(--ffe-farge-hvit);
+    --ffe-v-modal-close-button-color: var(--ffe-farge-vann);
+    --ffe-v-modal-border-radius: 24px;
+
+    @media (prefers-color-scheme: dark) {
+        .native {
+            --ffe-v-modal-bg-color: var(--ffe-farge-svart);
+            --ffe-v-modal-backdrop-color: var(--ffe-farge-hvit);
+            --ffe-v-modal-close-button-color: var(--ffe-farge-vann-70);
+        }
+    }
 }