Merge branch 'main' into dependabot/npm_and_yarn/webpack-dev-middlewa…

…re-6.1.2
miljodir · Apr 16, 2024 · 05cb8b6 · 05cb8b6
2 parents f6d857d + 4ec647d
commit 05cb8b6
Show file tree

Hide file tree

Showing 8 changed files with 59 additions and 20 deletions.
diff --git 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:[email protected])
+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:[email protected])
 
 ## Kjøre opp utviklingsmiljø for Storybook lokalt
 

diff --git 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",

diff --git 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
 <div
   className="md-alert-message [md-alert-message--confirm, md-alert-message--warning, md-alert-message--error, md-alert-message--fullWidth]"
 >
-  <div className="md-alert-message__content">{Icon width="20" height="20"} {label}</div>
+  <div className="md-alert-message__content">
+    <Icon className="md-alert-message__icon" width="20" height="20" />
+    {label}
+  </div>
 
-  <button className="md-alert-message__button" onClick="{handleClick}">{Icon width="16" height="16"}</button>
+  <button className="md-alert-message__button" onClick="{handleClick}">
+    <Icon width="16" height="16" />
+  </button>
 </div>
 ```
diff --git 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/package.json b/packages/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@miljodirektoratet/md-react",
-  "version": "1.2.2",
+  "version": "1.2.4",
   "description": "React-komponenter for Miljødirektoratet",
   "author": "Miljødirektoratet",
   "main": "./dist/index.js",

diff --git 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<MdAlertMessageProps> = ({
@@ -26,6 +27,7 @@ const MdAlertMessage: React.FC<MdAlertMessageProps> = ({
   onClose,
   customIcon,
   className,
+  alignContent,
 }: MdAlertMessageProps) => {
   const classNames = classnames(
     'md-alert-message',
@@ -38,14 +40,21 @@ const MdAlertMessage: React.FC<MdAlertMessageProps> = ({
     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 = (<MdInfoIcon aria-label="Info" width="20" height="20" />) as React.ReactNode;
+    let icon = (
+      <MdInfoIcon className="md-alert-message__icon" aria-label="Info" width="20" height="20" />
+    ) as React.ReactNode;
     if (customIcon) {
       icon = customIcon;
     } else if (theme === 'confirm') {
-      icon = <MdCheckIcon aria-label="Bekreft" width="20" height="20" />;
+      icon = <MdCheckIcon className="md-alert-message__icon" aria-label="Bekreft" width="20" height="20" />;
     } else if (theme === 'warning' || theme === 'error') {
-      icon = <MdWarningIcon aria-label="Advarsel" width="20" height="20" />;
+      icon = <MdWarningIcon className="md-alert-message__icon" aria-label="Advarsel" width="20" height="20" />;
     }
     return icon;
   };
@@ -58,7 +67,7 @@ const MdAlertMessage: React.FC<MdAlertMessageProps> = ({
 
   return (
     <div className={classNames}>
-      <div className="md-alert-message__content">
+      <div className={contentClassNames}>
         {!hideIcon && renderIcon()}
         {label}
       </div>

diff --git a/packages/react/src/modal/MdModal.tsx b/packages/react/src/modal/MdModal.tsx
@@ -44,6 +44,8 @@ const MdModal: React.FunctionComponent<MdModalProps> = ({
    * 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<HTMLElement>(focusableHtmlElements);
@@ -80,7 +82,7 @@ const MdModal: React.FunctionComponent<MdModalProps> = ({
     return () => {
       return document.removeEventListener('keydown', keyListener);
     };
-  }, []);
+  }, [open]);
 
   const closeModal = (e: React.MouseEvent) => {
     if (onClose) {

diff --git 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' },
+    },
   },
 };