Merge pull request #2565 from SpareBank1/update-modal-documentation

Update modal documentation
SpareBank1 · Feb 24, 2025 · 1736bf5 · 1736bf5
2 parents a6b003d + 9719764
commit 1736bf5
Show file tree

Hide file tree

Showing 3 changed files with 76 additions and 15 deletions.
diff --git a/count-stories.js b/count-stories.js
@@ -8,31 +8,28 @@ function countStoryFiles(directoryPath) {
 
     // Folders to exclude
     const excludeFolders = [
+        'ffe-accordion-react',
+        'ffe-account-selector-react',
         'ffe-buttons-react',
-        'ffe-messages-react',
-        'ffe-feedback-react',
+        'ffe-cards-react',
         'ffe-chips-react',
+        'ffe-collapse-react',
         'ffe-core',
-        'ffe-accordion-react',
+        'ffe-core-react',
         'ffe-datepicker-react',
+        'ffe-chart-donut-react',
+        'ffe-feedback-react',
+        'ffe-formatters',
         'ffe-form-react',
-        'ffe-cards-react',
-        'ffe-collapse-react',
-        'ffe-datepicker-react',
         'ffe-grid-react',
         'ffe-icons-react',
         'ffe-lists-react',
+        'ffe-messages-react',
+        'ffe-modals-react',
         'ffe-pagination-react',
         'ffe-searchable-dropdown-react',
         'ffe-spinner-react',
-        'ffe-chart-donut-react',
-        'ffe-spinner-react',
-        'ffe-account-selector-react',
-        'ffe-modals-react',
-        'ffe-core-react',
         'ffe-tabs-react',
-        'ffe-formatters',
-        'ffe-header'
     ];
 
     const colors = {

diff --git a/packages/ffe-modals-react/src/Modal.mdx b/packages/ffe-modals-react/src/Modal.mdx
@@ -18,13 +18,20 @@ En modal skal alltid ha en heading nivå 2. Ikke bruk modalvinduer for funksjone
 For å lukke eller åpne en modal brukes `ModalHandle`. Innhold kan plasseres i en eller flere `<ModalBlock/>`.
 
 ## Standard
+
 <Canvas of={ModalStories.Standard} />
 <Controls of={ModalStories.Standard} />
 
 ## Tilpasset bakgrunn
 
 <Canvas of={ModalStories.Custom} />
 
+## Utsene i dark modalen
+
+Modalen følger css classen `regard-color-scheme-preference` og vil se slik ut i dark mode.
+
+<Canvas of={ModalStories.DarkMode} />
+
 ## Veiledning for bruk
 
 Modaler benyttes når vi ønsker å beholde brukerens navigasjonskontekst og bør aller helst bare benyttes i to hovedsituasjoner;
@@ -46,6 +53,7 @@ Ettersom modaler lett kan lukkes bør de ikke inneholde for mange funksjoner ell
 side vurderes. Funksjonelle prosesser over flere steg må aldri legges i en modal.
 
 ### Informasjonsmodaler
+
 Modaler med informasjon skal brukes på samme måte som tooltip eller pop-over, men i større format og med plass til mer tekst.
 Teksten er oftest midtstilt, men kan også være venstrestilt i større modaler med mye tekst.
 Informasjonsmodaler kan inneholde flere steg, men bør da ha knapper både for ‘Neste’ og for ‘Avbryt’.
@@ -58,12 +66,14 @@ Knappene skal plasseres midtstilt i mindre modaler, og høyrestilt i større mod
 primærknappen som aktiverer funksjonen (f.eks. «ok» eller «send inn).
 
 ### Kontrollmodaler
+
 Modalvinduer som benyttes for å kontrollere eller varsle om handlinger/endringer. Eksempler på dette vil være:
-* Å kontrollere input og endringer: «er du sikker på at du vil endre telefonnummer?»
-* Varslinger om utlogging ved lengre perioder med inaktivitet
 
+- Å kontrollere input og endringer: «er du sikker på at du vil endre telefonnummer?»
+- Varslinger om utlogging ved lengre perioder med inaktivitet
 
 ## Universell Utforming
+
 For å opprettholde dokumentstruktur med tanke på overskriftshierarki må modalvinduet benytte `<h2/>` som overskriftsnivå
 for sin hovedoverskrift. Ikke tillat tastaturnavigasjon utenfor eller «bak» modalvinduet. Så lenge modalen er aktivert
 vil tastaturnavigasjon måtte begrenses til selve modalen.
diff --git a/packages/ffe-modals-react/src/Modal.stories.tsx b/packages/ffe-modals-react/src/Modal.stories.tsx
@@ -123,3 +123,57 @@ export const Custom: Story = {
         );
     },
 };
+
+export const DarkMode: Story = {
+    args: {
+        ariaLabelledby: 'heading-id',
+        locale: 'nb',
+        onClose: () => null,
+        portalContainer: document.body,
+    },
+    render: function Render(args) {
+        const modalRef = useRef<ModalHandle>(null);
+        const headingId = args.ariaLabelledby;
+
+        return (
+            <>
+                <ActionButton
+                    type="button"
+                    onClick={() => {
+                        modalRef.current?.open();
+                    }}
+                >
+                    Åpne modal
+                </ActionButton>
+                <Modal
+                    ref={modalRef}
+                    {...args}
+                    className={'dark-mode regard-color-scheme-preference'}
+                >
+                    <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>
+            </>
+        );
+    },
+};