From 998b7c1a0ac5675c2f824d6bf2c22c28b308d874 Mon Sep 17 00:00:00 2001 From: Clas Robert Olsson Date: Wed, 3 Apr 2024 08:53:16 +0200 Subject: [PATCH 1/6] Update README.md figma link changed --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index ce68155c..62402fec 100644 --- a/README.md +++ b/README.md @@ -55,7 +55,7 @@ Dersom du ønsker endringer eller ønsker å bidra med nye komponenter, gjøres For nye komponenter med tilhørende css, skal det også opprettes en README.md fil i mappen for css-fila, som beskriver HTML-strukturen til komponenten. Dette fordi man skal kunne bruke css-filen til å bygge komponenten selv, uten å inkludere React-komponenten. Se en eksisterende css-fil og README.md i `packages/css/..` for eksempler på oppbygging av README-fil. -Før man lager nye komponenter skal design defineres i [Figma](https://www.figma.com/file/6BUqOC0xQZz6AggPvI2iSR/MD---Designsystem?node-id=0%3A1&t=6GlPVAsZW9HT0IEs-0). For å få tilgang til Figma, send en foresørsel til [ithelp](mailto:ithjelp@miljodir.no) +Før man lager nye komponenter skal design defineres i [Figma](https://www.figma.com/files/943790322753665785/project/42920500/Milj%C3%B8direktoratets-designsystem?fuid=1167043987031502102). For å få tilgang til Figma, send en foresørsel til [ithelp](mailto:ithjelp@miljodir.no) ## Kjøre opp utviklingsmiljø for Storybook lokalt From 2c5aa323fc3cbf2a53d5ba3a8c6497fc55479d73 Mon Sep 17 00:00:00 2001 From: Kajsa Eggum Date: Tue, 9 Apr 2024 13:25:04 +0200 Subject: [PATCH 2/6] Fix for focus trap not attached --- packages/react/src/modal/MdModal.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/react/src/modal/MdModal.tsx b/packages/react/src/modal/MdModal.tsx index 462fddfe..6c63428c 100644 --- a/packages/react/src/modal/MdModal.tsx +++ b/packages/react/src/modal/MdModal.tsx @@ -44,6 +44,8 @@ const MdModal: React.FunctionComponent = ({ * Also focuses on the first focusable element when modal is opened. */ useEffect(() => { + if (!open) return; + const keyListener = (event: KeyboardEvent) => { if (event.key === 'Tab') { const focusableElements = modalRef.current?.querySelectorAll(focusableHtmlElements); @@ -80,7 +82,7 @@ const MdModal: React.FunctionComponent = ({ return () => { return document.removeEventListener('keydown', keyListener); }; - }, []); + }, [open]); const closeModal = (e: React.MouseEvent) => { if (onClose) { From 8a4b7a5128110e6ee97b49513bfa6dcedfa63264 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Tue, 9 Apr 2024 11:35:24 +0000 Subject: [PATCH 3/6] Bump md-react version to 1.2.3 --- packages/react/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/package.json b/packages/react/package.json index 49ccfb47..76ca2942 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -1,6 +1,6 @@ { "name": "@miljodirektoratet/md-react", - "version": "1.2.2", + "version": "1.2.3", "description": "React-komponenter for Miljødirektoratet", "author": "Miljødirektoratet", "main": "./dist/index.js", From 1d46acd4984af4fa762cfcf930b0ce6791fadeba Mon Sep 17 00:00:00 2001 From: Kajsa Eggum Date: Fri, 12 Apr 2024 15:11:29 +0200 Subject: [PATCH 4/6] More complex alert message contents --- packages/css/src/messages/AlertMessage.md | 9 +++++-- packages/css/src/messages/alertMessage.css | 25 +++++++++++++------ .../react/src/messages/MdAlertMessage.tsx | 19 ++++++++++---- stories/Messages/AlertMessage.stories.tsx | 16 ++++++++++-- 4 files changed, 53 insertions(+), 16 deletions(-) diff --git a/packages/css/src/messages/AlertMessage.md b/packages/css/src/messages/AlertMessage.md index 76d74d97..e653512f 100644 --- a/packages/css/src/messages/AlertMessage.md +++ b/packages/css/src/messages/AlertMessage.md @@ -10,8 +10,13 @@ See [Storybook](https://miljodir.github.io/md-components) for examples and more
-
{Icon width="20" height="20"} {label}
+
+ + {label} +
- +
``` diff --git a/packages/css/src/messages/alertMessage.css b/packages/css/src/messages/alertMessage.css index c212745e..7cb5d4ba 100644 --- a/packages/css/src/messages/alertMessage.css +++ b/packages/css/src/messages/alertMessage.css @@ -2,10 +2,10 @@ .md-info-box { display: flex; align-items: center; - gap: 1em; + gap: 1rem; font-family: 'Open sans'; - font-size: 1em; - padding: 1em; + font-size: 1rem; + padding: 1rem; background-color: var(--mdSecondaryColor20); border: 1px dashed var(--mdPrimaryColor); } @@ -19,7 +19,7 @@ align-items: center; justify-content: space-between; font-family: 'Open sans'; - font-size: 1em; + font-size: 1rem; width: 100%; background-color: var(--mdPrimaryColor10); } @@ -39,18 +39,29 @@ color: #fff; } +.md-alert-message__icon { + flex-shrink: 0; +} + .md-alert-message__content { display: flex; align-items: center; - gap: 1em; - padding: 1em; + gap: 1rem; + padding: 1rem; +} + +.md-alert-message__content--start { + align-items: flex-start; +} +.md-alert-message__content--end { + align-items: flex-end; } .md-alert-message__button { border: 0; background-color: transparent; margin: 0; - padding: 1em; + padding: 1rem; cursor: pointer; } diff --git a/packages/react/src/messages/MdAlertMessage.tsx b/packages/react/src/messages/MdAlertMessage.tsx index f5f402e2..41afe957 100644 --- a/packages/react/src/messages/MdAlertMessage.tsx +++ b/packages/react/src/messages/MdAlertMessage.tsx @@ -8,13 +8,14 @@ import MdXIcon from '../icons/MdXIcon'; export interface MdAlertMessageProps { theme?: 'info' | 'confirm' | 'warning' | 'error'; - label?: string; + label?: string | React.ReactNode; hideIcon?: boolean; closable?: boolean; fullWidth?: boolean; onClose?(_e: React.MouseEvent): void; customIcon?: React.ReactNode | string; className?: string; + alignContent?: 'start' | 'center' | 'end'; } const MdAlertMessage: React.FC = ({ @@ -26,6 +27,7 @@ const MdAlertMessage: React.FC = ({ onClose, customIcon, className, + alignContent, }: MdAlertMessageProps) => { const classNames = classnames( 'md-alert-message', @@ -38,14 +40,21 @@ const MdAlertMessage: React.FC = ({ className, ); + const contentClassNames = classnames('md-alert-message__content', { + 'md-alert-message__content--start': alignContent === 'start', + 'md-alert-message__content--end': alignContent === 'end', + }); + const renderIcon = () => { - let icon = () as React.ReactNode; + let icon = ( + + ) as React.ReactNode; if (customIcon) { icon = customIcon; } else if (theme === 'confirm') { - icon = ; + icon = ; } else if (theme === 'warning' || theme === 'error') { - icon = ; + icon = ; } return icon; }; @@ -58,7 +67,7 @@ const MdAlertMessage: React.FC = ({ return (
-
+
{!hideIcon && renderIcon()} {label}
diff --git a/stories/Messages/AlertMessage.stories.tsx b/stories/Messages/AlertMessage.stories.tsx index ee6e017d..024c31e4 100644 --- a/stories/Messages/AlertMessage.stories.tsx +++ b/stories/Messages/AlertMessage.stories.tsx @@ -31,10 +31,11 @@ export default { argTypes: { label: { type: { name: 'string', required: true }, - description: 'The text to display on hover', + description: + 'The content to display in the alert message. Can be either a plain string or a html-node containing subcontents.', table: { type: { - summary: 'text', + summary: 'text | ReactNode', }, }, control: 'text', @@ -108,6 +109,17 @@ export default { }, control: { type: 'text' }, }, + alignContent: { + description: 'Decides vertical alignement of content i.e. icon and label.', + table: { + type: { + defaultValue: { summary: 'center' }, + summary: 'text', + }, + }, + options: ['start', 'center', 'end'], + control: { type: 'inline-radio' }, + }, }, }; From 7fae70744751c313c3cda916dd42afdbfd22e438 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Mon, 15 Apr 2024 06:41:26 +0000 Subject: [PATCH 5/6] Bump md-css version to 1.1.2 --- packages/css/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/css/package.json b/packages/css/package.json index e1ee4446..26c20ac1 100644 --- a/packages/css/package.json +++ b/packages/css/package.json @@ -1,6 +1,6 @@ { "name": "@miljodirektoratet/md-css", - "version": "1.1.1", + "version": "1.1.2", "description": "CSS for Miljødirektoratet", "author": "Miljødirektoratet", "main": "./src/index.css", From 11c826c4110574612a6c806a12b526bab1b59585 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Mon, 15 Apr 2024 06:41:29 +0000 Subject: [PATCH 6/6] Bump md-react version to 1.2.4 --- packages/react/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/package.json b/packages/react/package.json index 76ca2942..5af2af44 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -1,6 +1,6 @@ { "name": "@miljodirektoratet/md-react", - "version": "1.2.3", + "version": "1.2.4", "description": "React-komponenter for Miljødirektoratet", "author": "Miljødirektoratet", "main": "./dist/index.js",