@helsenorge/designsystem-react 5.2.0-beta.0 → 5.3.0

package/components/Panel/Panel.d.ts

@@ -22,68 +22,70 @@ export declare enum PanelLayout {
     layout3c = "layout3c"
 }
 export interface PanelProps {
-    children?: React.ReactNode;
-    /** Title of the panel */
-    title?: string;
-    /** Changes the underlying element of the title. Default: h2 */
-    titleHtmlMarkup?: TitleTags;
     /** Adds custom classes to the element. */
     className?: string;
-    /** Sets the data-testid attribute. */
-    testId?: string;
-    /** Displays a status on the left side: defualt normal */
-    status?: keyof typeof PanelStatus;
-    /** Displayed on top of the panel with a status icon */
-    statusMessage?: string;
-    /** Changes the visual representation of the panel. */
-    variant?: keyof typeof PanelVariant;
-    /** Url to details, renders as a button with anchor tag */
-    url?: string;
-    /** target used in the button: default is _self */
-    target?: AnchorTarget;
-    /** Icon displayed in title */
-    icon?: React.ReactNode;
-    /** Display icon on right */
-    iconRight?: boolean;
     /** Panel section A content */
     contentA?: React.ReactNode | string;
-    /** Panel section B content*/
+    /** Panel section B content */
     contentB?: React.ReactNode | string;
-    /** A version of panel that prioritises content-B visually and audibly */
-    prioritiseMetaDataInContentB?: boolean;
+    /** Content for a container that renders above A and B regardless of layout */
+    contentHeader?: React.ReactNode;
+    /** Container acts as a button, clicking anywhere triggers a panel button click */
+    containerAsButton?: boolean;
+    /** Panel children */
+    children?: React.ReactNode;
+    /** Displays date with icon */
+    date?: string;
+    /** Expands or collapses the panel */
+    expanded?: boolean;
+    /** Whether the panel can be focused */
+    focusable?: boolean;
+    /** Icon displayed in title */
+    icon?: React.ReactNode;
     /** Panel button text */
     buttonText?: string;
     /** Panel button close text */
     buttonTextClose?: string;
     /** HTML markup for panel button. Default: a */
     buttonHtmlMarkup?: ButtonTags;
-    /** Callback when panel button is clicked  */
+    /** Callback when the panel button is clicked */
     buttonOnClick?: ButtonProps['onClick'];
     /** Panel button is aria-labelledby the text in the button itself + the element set in buttonAriaLabelledById. Default: auto-generated id for title (if title is set). */
     buttonAriaLabelledById?: string;
     /** Panel button aria label */
     buttonAriaLabel?: string;
-    /** Show close button in bottom of Panel Expand */
-    /** @deprecated Has no effect anymore due to accessbility reasons. No close button is shown in expanded content. Will be removed in 2.0.0 */
-    showCloseButtonInExpand?: boolean;
-    /** Layout (see description) */
+    /** Layout of the panel */
     layout?: keyof typeof PanelLayout;
-    /** Clicking anywhere on the container will trigger a click on the panel's button */
-    containerAsButton?: boolean;
-    /** Displays time with icon */
-    time?: string;
-    /** Displays date with icon */
-    date?: string;
     /** Removes top border when variant is "line" */
     noTopBorder?: boolean;
-    /** Opens or closes the panel */
-    expanded?: boolean;
-    /** Called when panel is open/closed. */
+    /** Called when the panel is opened/closed */
     onExpand?: (isExpanded: boolean) => void;
     /** Whether to render children when closed (in which case they are hidden with CSS). Default: false */
     renderChildrenWhenClosed?: boolean;
-    /** Whether panel is focusable or not */
-    focusable?: boolean;
+    /** Displays a status on the left side: default normal */
+    status?: keyof typeof PanelStatus;
+    /** Displayed on top of the panel with a status icon */
+    statusMessage?: string;
+    /** Sets the data-testid attribute for testing purposes */
+    testId?: string;
+    /** Displays time with icon */
+    time?: string;
+    /** Title of the panel */
+    title?: string;
+    /** Changes the underlying element of the title. Default: h2 */
+    titleHtmlMarkup?: TitleTags;
+    /** Changes the visual representation of the panel */
+    variant?: keyof typeof PanelVariant;
+    /** URL to details, renders as a button with anchor tag */
+    url?: string;
+    /** target used in the button: default is _self */
+    target?: AnchorTarget;
+    /** @deprecated Has no effect anymore due to accessibility reasons. No close button is shown in expanded content. Will be removed in 2.0.0 */
+    showCloseButtonInExpand?: boolean;
+}
+export interface LayoutProps extends Pick<PanelProps, 'contentA' | 'contentB' | 'contentHeader' | 'icon' | 'layout' | 'status' | 'statusMessage'> {
+    ctaContainer?: React.ReactNode;
+    titleElement: React.ReactNode;
 }
 declare const Panel: React.ForwardRefExoticComponent<PanelProps & React.RefAttributes<HTMLHeadingElement>>;
 export default Panel;

package/components/Panel/Panel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Panel.d.ts","sourceRoot":"","sources":["../../../src/components/Panel/Panel.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Panel.d.ts","sourceRoot":"","sources":["../../../src/components/Panel/Panel.tsx"],"names":[],"mappings":"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"}

package/components/Panel/componentdata.json

@@ -1 +1 @@
-{"props":{"title":{"defaultValue":null,"description":"Title of the panel","name":"title","parent":{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"},"declarations":[{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"}],"required":false,"type":{"name":"string"}},"titleHtmlMarkup":{"defaultValue":null,"description":"Changes the underlying element of the title. Default: h2","name":"titleHtmlMarkup","parent":{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"},"declarations":[{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"}],"required":false,"type":{"name":"enum","raw":"TitleTags","value":[{"value":"\"h1\""},{"value":"\"h2\""},{"value":"\"h3\""},{"value":"\"h4\""},{"value":"\"h5\""},{"value":"\"span\""}]}},"className":{"defaultValue":null,"description":"Adds custom classes to the element.","name":"className","parent":{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"},"declarations":[{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"}],"required":false,"type":{"name":"string"}},"testId":{"defaultValue":null,"description":"Sets the data-testid attribute.","name":"testId","parent":{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"},"declarations":[{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"}],"required":false,"type":{"name":"string"}},"status":{"defaultValue":null,"description":"Displays a status on the left side: defualt normal","name":"status","parent":{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"},"declarations":[{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"}],"required":false,"type":{"name":"enum","raw":"\"normal\" | \"new\" | \"error\" | \"draft\"","value":[{"value":"\"normal\""},{"value":"\"new\""},{"value":"\"error\""},{"value":"\"draft\""}]}},"statusMessage":{"defaultValue":null,"description":"Displayed on top of the panel with a status icon","name":"statusMessage","parent":{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"},"declarations":[{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"}],"required":false,"type":{"name":"string"}},"variant":{"defaultValue":null,"description":"Changes the visual representation of the panel.","name":"variant","parent":{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"},"declarations":[{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"}],"required":false,"type":{"name":"enum","raw":"\"fill\" | \"white\" | \"stroke\" | \"line\"","value":[{"value":"\"fill\""},{"value":"\"white\""},{"value":"\"stroke\""},{"value":"\"line\""}]}},"url":{"defaultValue":null,"description":"Url to details, renders as a button with anchor tag","name":"url","parent":{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"},"declarations":[{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"}],"required":false,"type":{"name":"string"}},"target":{"defaultValue":null,"description":"target used in the button: default is _self","name":"target","parent":{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"},"declarations":[{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"}],"required":false,"type":{"name":"enum","raw":"AnchorTarget","value":[{"value":"\"_self\""},{"value":"\"_blank\""},{"value":"\"_parent\""},{"value":"\"_top\""}]}},"icon":{"defaultValue":null,"description":"Icon displayed in title","name":"icon","parent":{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"},"declarations":[{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"}],"required":false,"type":{"name":"ReactNode"}},"iconRight":{"defaultValue":null,"description":"Display icon on right","name":"iconRight","parent":{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"},"declarations":[{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"}],"required":false,"type":{"name":"boolean"}},"contentA":{"defaultValue":null,"description":"Panel section A content","name":"contentA","parent":{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"},"declarations":[{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"}],"required":false,"type":{"name":"ReactNode"}},"contentB":{"defaultValue":null,"description":"Panel section B content","name":"contentB","parent":{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"},"declarations":[{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"}],"required":false,"type":{"name":"ReactNode"}},"prioritiseMetaDataInContentB":{"defaultValue":null,"description":"A version of panel that prioritises content-B visually and audibly","name":"prioritiseMetaDataInContentB","parent":{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"},"declarations":[{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"}],"required":false,"type":{"name":"boolean"}},"buttonText":{"defaultValue":null,"description":"Panel button text","name":"buttonText","parent":{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"},"declarations":[{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"}],"required":false,"type":{"name":"string"}},"buttonTextClose":{"defaultValue":null,"description":"Panel button close text","name":"buttonTextClose","parent":{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"},"declarations":[{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"}],"required":false,"type":{"name":"string"}},"buttonHtmlMarkup":{"defaultValue":null,"description":"HTML markup for panel button. Default: a","name":"buttonHtmlMarkup","parent":{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"},"declarations":[{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"}],"required":false,"type":{"name":"enum","raw":"ButtonTags","value":[{"value":"\"button\""},{"value":"\"a\""}]}},"buttonOnClick":{"defaultValue":null,"description":"Callback when panel button is clicked","name":"buttonOnClick","parent":{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"},"declarations":[{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"}],"required":false,"type":{"name":"((e?: MouseEvent<HTMLElement, MouseEvent> | FormEvent<{}> | KeyboardEvent<HTMLUListElement> | null) => void)"}},"buttonAriaLabelledById":{"defaultValue":null,"description":"Panel button is aria-labelledby the text in the button itself + the element set in buttonAriaLabelledById. Default: auto-generated id for title (if title is set).","name":"buttonAriaLabelledById","parent":{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"},"declarations":[{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"}],"required":false,"type":{"name":"string"}},"buttonAriaLabel":{"defaultValue":null,"description":"Panel button aria label","name":"buttonAriaLabel","parent":{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"},"declarations":[{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"}],"required":false,"type":{"name":"string"}},"showCloseButtonInExpand":{"defaultValue":null,"description":"@deprecated Has no effect anymore due to accessbility reasons. No close button is shown in expanded content. Will be removed in 2.0.0","name":"showCloseButtonInExpand","parent":{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"},"declarations":[{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"}],"required":false,"type":{"name":"boolean"}},"layout":{"defaultValue":null,"description":"Layout (see description)","name":"layout","parent":{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"},"declarations":[{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"}],"required":false,"type":{"name":"enum","raw":"\"layout1\" | \"layout2\" | \"layout3a\" | \"layout3b\" | \"layout3c\"","value":[{"value":"\"layout1\""},{"value":"\"layout2\""},{"value":"\"layout3a\""},{"value":"\"layout3b\""},{"value":"\"layout3c\""}]}},"containerAsButton":{"defaultValue":null,"description":"Clicking anywhere on the container will trigger a click on the panel's button","name":"containerAsButton","parent":{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"},"declarations":[{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"}],"required":false,"type":{"name":"boolean"}},"time":{"defaultValue":null,"description":"Displays time with icon","name":"time","parent":{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"},"declarations":[{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"}],"required":false,"type":{"name":"string"}},"date":{"defaultValue":null,"description":"Displays date with icon","name":"date","parent":{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"},"declarations":[{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"}],"required":false,"type":{"name":"string"}},"noTopBorder":{"defaultValue":null,"description":"Removes top border when variant is \"line\"","name":"noTopBorder","parent":{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"},"declarations":[{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"}],"required":false,"type":{"name":"boolean"}},"expanded":{"defaultValue":null,"description":"Opens or closes the panel","name":"expanded","parent":{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"},"declarations":[{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"}],"required":false,"type":{"name":"boolean"}},"onExpand":{"defaultValue":null,"description":"Called when panel is open/closed.","name":"onExpand","parent":{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"},"declarations":[{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"}],"required":false,"type":{"name":"((isExpanded: boolean) => void)"}},"renderChildrenWhenClosed":{"defaultValue":null,"description":"Whether to render children when closed (in which case they are hidden with CSS). Default: false","name":"renderChildrenWhenClosed","parent":{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"},"declarations":[{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"}],"required":false,"type":{"name":"boolean"}},"focusable":{"defaultValue":null,"description":"Whether panel is focusable or not","name":"focusable","parent":{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"},"declarations":[{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"}],"required":false,"type":{"name":"boolean"}}}}
+{"props":{"className":{"defaultValue":null,"description":"Adds custom classes to the element.","name":"className","parent":{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"},"declarations":[{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"}],"required":false,"type":{"name":"string"}},"contentA":{"defaultValue":null,"description":"Panel section A content","name":"contentA","parent":{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"},"declarations":[{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"}],"required":false,"type":{"name":"ReactNode"}},"contentB":{"defaultValue":null,"description":"Panel section B content","name":"contentB","parent":{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"},"declarations":[{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"}],"required":false,"type":{"name":"ReactNode"}},"contentHeader":{"defaultValue":null,"description":"Content for a container that renders above A and B regardless of layout","name":"contentHeader","parent":{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"},"declarations":[{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"}],"required":false,"type":{"name":"ReactNode"}},"containerAsButton":{"defaultValue":null,"description":"Container acts as a button, clicking anywhere triggers a panel button click","name":"containerAsButton","parent":{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"},"declarations":[{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"}],"required":false,"type":{"name":"boolean"}},"children":{"defaultValue":null,"description":"Panel children","name":"children","parent":{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"},"declarations":[{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"}],"required":false,"type":{"name":"ReactNode"}},"date":{"defaultValue":null,"description":"Displays date with icon","name":"date","parent":{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"},"declarations":[{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"}],"required":false,"type":{"name":"string"}},"expanded":{"defaultValue":null,"description":"Expands or collapses the panel","name":"expanded","parent":{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"},"declarations":[{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"}],"required":false,"type":{"name":"boolean"}},"focusable":{"defaultValue":null,"description":"Whether the panel can be focused","name":"focusable","parent":{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"},"declarations":[{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"}],"required":false,"type":{"name":"boolean"}},"icon":{"defaultValue":null,"description":"Icon displayed in title","name":"icon","parent":{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"},"declarations":[{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"}],"required":false,"type":{"name":"ReactNode"}},"buttonText":{"defaultValue":null,"description":"Panel button text","name":"buttonText","parent":{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"},"declarations":[{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"}],"required":false,"type":{"name":"string"}},"buttonTextClose":{"defaultValue":null,"description":"Panel button close text","name":"buttonTextClose","parent":{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"},"declarations":[{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"}],"required":false,"type":{"name":"string"}},"buttonHtmlMarkup":{"defaultValue":null,"description":"HTML markup for panel button. Default: a","name":"buttonHtmlMarkup","parent":{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"},"declarations":[{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"}],"required":false,"type":{"name":"enum","raw":"ButtonTags","value":[{"value":"\"button\""},{"value":"\"a\""}]}},"buttonOnClick":{"defaultValue":null,"description":"Callback when the panel button is clicked","name":"buttonOnClick","parent":{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"},"declarations":[{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"}],"required":false,"type":{"name":"((e?: MouseEvent<HTMLElement, MouseEvent> | FormEvent<{}> | KeyboardEvent<HTMLUListElement> | null) => void)"}},"buttonAriaLabelledById":{"defaultValue":null,"description":"Panel button is aria-labelledby the text in the button itself + the element set in buttonAriaLabelledById. Default: auto-generated id for title (if title is set).","name":"buttonAriaLabelledById","parent":{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"},"declarations":[{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"}],"required":false,"type":{"name":"string"}},"buttonAriaLabel":{"defaultValue":null,"description":"Panel button aria label","name":"buttonAriaLabel","parent":{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"},"declarations":[{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"}],"required":false,"type":{"name":"string"}},"layout":{"defaultValue":null,"description":"Layout of the panel","name":"layout","parent":{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"},"declarations":[{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"}],"required":false,"type":{"name":"enum","raw":"\"layout1\" | \"layout2\" | \"layout3a\" | \"layout3b\" | \"layout3c\"","value":[{"value":"\"layout1\""},{"value":"\"layout2\""},{"value":"\"layout3a\""},{"value":"\"layout3b\""},{"value":"\"layout3c\""}]}},"noTopBorder":{"defaultValue":null,"description":"Removes top border when variant is \"line\"","name":"noTopBorder","parent":{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"},"declarations":[{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"}],"required":false,"type":{"name":"boolean"}},"onExpand":{"defaultValue":null,"description":"Called when the panel is opened/closed","name":"onExpand","parent":{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"},"declarations":[{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"}],"required":false,"type":{"name":"((isExpanded: boolean) => void)"}},"renderChildrenWhenClosed":{"defaultValue":null,"description":"Whether to render children when closed (in which case they are hidden with CSS). Default: false","name":"renderChildrenWhenClosed","parent":{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"},"declarations":[{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"}],"required":false,"type":{"name":"boolean"}},"status":{"defaultValue":null,"description":"Displays a status on the left side: default normal","name":"status","parent":{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"},"declarations":[{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"}],"required":false,"type":{"name":"enum","raw":"\"normal\" | \"new\" | \"error\" | \"draft\"","value":[{"value":"\"normal\""},{"value":"\"new\""},{"value":"\"error\""},{"value":"\"draft\""}]}},"statusMessage":{"defaultValue":null,"description":"Displayed on top of the panel with a status icon","name":"statusMessage","parent":{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"},"declarations":[{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"}],"required":false,"type":{"name":"string"}},"testId":{"defaultValue":null,"description":"Sets the data-testid attribute for testing purposes","name":"testId","parent":{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"},"declarations":[{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"}],"required":false,"type":{"name":"string"}},"time":{"defaultValue":null,"description":"Displays time with icon","name":"time","parent":{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"},"declarations":[{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"}],"required":false,"type":{"name":"string"}},"title":{"defaultValue":null,"description":"Title of the panel","name":"title","parent":{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"},"declarations":[{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"}],"required":false,"type":{"name":"string"}},"titleHtmlMarkup":{"defaultValue":null,"description":"Changes the underlying element of the title. Default: h2","name":"titleHtmlMarkup","parent":{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"},"declarations":[{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"}],"required":false,"type":{"name":"enum","raw":"TitleTags","value":[{"value":"\"h1\""},{"value":"\"h2\""},{"value":"\"h3\""},{"value":"\"h4\""},{"value":"\"h5\""},{"value":"\"span\""}]}},"variant":{"defaultValue":null,"description":"Changes the visual representation of the panel","name":"variant","parent":{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"},"declarations":[{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"}],"required":false,"type":{"name":"enum","raw":"\"fill\" | \"white\" | \"stroke\" | \"line\"","value":[{"value":"\"fill\""},{"value":"\"white\""},{"value":"\"stroke\""},{"value":"\"line\""}]}},"url":{"defaultValue":null,"description":"URL to details, renders as a button with anchor tag","name":"url","parent":{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"},"declarations":[{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"}],"required":false,"type":{"name":"string"}},"target":{"defaultValue":null,"description":"target used in the button: default is _self","name":"target","parent":{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"},"declarations":[{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"}],"required":false,"type":{"name":"enum","raw":"AnchorTarget","value":[{"value":"\"_self\""},{"value":"\"_blank\""},{"value":"\"_parent\""},{"value":"\"_top\""}]}},"showCloseButtonInExpand":{"defaultValue":null,"description":"@deprecated Has no effect anymore due to accessibility reasons. No close button is shown in expanded content. Will be removed in 2.0.0","name":"showCloseButtonInExpand","parent":{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"},"declarations":[{"fileName":"src/components/Panel/Panel.tsx","name":"PanelProps"}],"required":false,"type":{"name":"boolean"}}}}

package/components/Panel/styles.module.scss

@@ -4,11 +4,6 @@
 @import '../../scss/palette';
 @import '../../scss/font-settings';
 
-.panel-wrapper {
-  width: 100%;
-  outline: none;
-}
-
 @mixin panel-padding {
   padding: getSpacer(s) getSpacer(s) getSpacer(s) getSpacer(s);
 
@@ -35,161 +30,186 @@
   }
 }
 
+$layout-sm-gap: getSpacer(s);
+$layout-md-col-gap: getSpacer(m);
+
+.panel-wrapper {
+  width: 100%;
+  outline: none;
+}
+
 .panel {
   @include panel-padding;
 
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
   outline: none;
   position: relative;
   width: 100%;
   box-sizing: border-box;
 
-  &__container {
+  &__layout-1,
+  &__layout-2,
+  &__layout-3 {
+    display: grid;
+    grid-auto-rows: auto;
+    grid-template-columns: 1fr;
+    gap: $layout-sm-gap $layout-sm-gap;
+    width: 100%;
+
     @media (min-width: map.get($grid-breakpoints, md)) {
-      display: flex;
-      flex-direction: row;
-      flex: 1;
+      column-gap: $layout-md-col-gap;
     }
+  }
 
-    &--prioritiseMetaDataInContentB,
-    &--layout3 {
-      @media (min-width: map.get($grid-breakpoints, lg)) {
-        display: flex;
-        flex-direction: row;
-      }
+  &__layout-1 {
+    &--with-icon {
+      grid-template-columns: auto 1fr;
     }
-    &--layout2#{&}--prioritiseMetaDataInContentB {
-      @media (min-width: map.get($grid-breakpoints, md)) {
-        display: flex;
-        flex-direction: row;
+
+    @media (min-width: map.get($grid-breakpoints, md)) {
+      grid-template-rows: auto auto;
+      grid-template-columns: 1fr auto;
+
+      &--with-icon {
+        grid-template-columns: auto 1fr auto;
       }
-    }
-    &--layout1#{&}--prioritiseMetaDataInContentB {
-      @media (min-width: map.get($grid-breakpoints, lg)) {
-        display: block;
+
+      &__content-a {
+        grid-column: span 2;
       }
     }
+  }
 
-    &--grow {
-      flex: 1;
+  &__layout-2 {
+    &--with-icon {
+      grid-template-columns: auto 1fr;
     }
-  }
 
-  &--with-icon {
-    display: flex;
-    flex-direction: row;
+    @media (min-width: map.get($grid-breakpoints, md)) {
+      grid-template-rows: auto auto;
+      grid-template-columns: 1fr auto;
 
-    @include panel-padding-icon;
-  }
+      &--with-icon {
+        grid-template-columns: auto 1fr auto;
+      }
 
-  &__icon {
-    padding-right: getSpacer(s);
+      &__content-a {
+        grid-row: span 2;
+      }
 
-    @media (min-width: map.get($grid-breakpoints, md)) {
-      padding-right: getSpacer(l);
+      &__last-column {
+        max-width: 200px;
+      }
     }
 
-    &--right {
-      padding-left: getSpacer(s);
+    @media (min-width: map.get($grid-breakpoints, lg)) {
+      grid-template-columns: minmax(auto, 760px) auto;
+
+      &--with-icon {
+        grid-template-columns: auto minmax(auto, 760px) auto;
+      }
     }
   }
 
-  &__badge {
-    display: inline-block;
-    vertical-align: text-bottom;
-  }
+  &__layout-3 {
+    &--with-icon {
+      grid-template-columns: auto 1fr;
+    }
 
-  &__content-left {
-    &--flex {
-      display: flex;
+    &__last-column {
+      display: grid;
+      row-gap: $layout-sm-gap;
     }
-  }
 
-  &__content-right {
-    &--layout1 {
-      display: flex;
-      flex-direction: column;
+    @media (min-width: map.get($grid-breakpoints, lg)) {
+      grid-template-rows: auto;
 
-      @media (min-width: map.get($grid-breakpoints, md)) {
-        flex-direction: row;
+      &--a {
+        grid-template-columns: 3fr 2fr;
+      }
+      &--a#{&}--with-icon {
+        grid-template-columns: auto 3fr 2fr;
       }
-    }
 
-    &--layout2 {
-      display: flex;
-      flex-direction: column;
+      &--b {
+        grid-template-columns: 4.5fr 5.5fr;
+      }
+      &--b#{&}--with-icon {
+        grid-template-columns: auto 4.5fr 5.5fr;
+      }
 
-      @media (min-width: map.get($grid-breakpoints, md)) {
-        max-width: 200px;
+      &--c {
+        grid-template-columns: 3.5fr 6.5fr;
+      }
+      &--c#{&}--with-icon {
+        grid-template-columns: auto 3.5fr 6.5fr;
       }
-    }
 
-    &--layout3 {
-      display: flex;
-      flex-direction: column;
-      padding-left: 0;
+      &__last-column {
+        grid-template-columns: 1fr auto;
+        column-gap: $layout-md-col-gap;
 
-      @media (min-width: map.get($grid-breakpoints, lg)) {
-        flex-direction: row;
-        padding-left: getSpacer(m);
+        &__content-b {
+          flex: 1;
+        }
       }
     }
+  }
 
-    &--layout3a {
-      flex: 0.4;
-    }
+  &--with-icon {
+    @include panel-padding-icon;
+  }
 
-    &--layout3b {
-      flex: 0.55;
-    }
+  &__icon {
+    grid-row: span 3;
 
-    &--layout3c {
-      flex: 0.65;
+    &--no-content {
+      grid-row: span 2;
     }
 
-    &--prioritiseMetaDataInContentB {
-      padding-bottom: getSpacer(s);
-      order: 1;
-
+    &--layout-1,
+    &--layout-2 {
       @media (min-width: map.get($grid-breakpoints, md)) {
-        order: 2;
+        grid-row: span 2;
+        padding-right: getSpacer(2xs);
       }
     }
 
-    &--layout2#{&}--prioritiseMetaDataInContentB {
-      @media (min-width: map.get($grid-breakpoints, md)) {
-        padding-bottom: 0;
-      }
+    @media (min-width: map.get($grid-breakpoints, lg)) {
+      grid-row: span 2;
+      padding-right: getSpacer(2xs);
     }
-    &--layout3#{&}--prioritiseMetaDataInContentB {
+
+    &--layout-3 {
+      grid-row: span 2;
+
       @media (min-width: map.get($grid-breakpoints, lg)) {
-        padding-bottom: 0;
+        grid-row: span 1;
       }
     }
   }
 
+  &__badge {
+    display: inline-block;
+    vertical-align: text-bottom;
+  }
+
   &__btn-container {
     display: flex;
     flex-direction: column;
+    justify-content: flex-end;
 
     &--no-content-b {
       @media (min-width: map.get($grid-breakpoints, lg)) {
-        align-self: flex-end;
         flex-direction: row;
+        grid-column: span 2;
       }
     }
 
-    &--layout3 {
-      display: flex;
-      align-self: initial;
+    &--no-button {
       flex-direction: column;
-
-      @media (min-width: map.get($grid-breakpoints, lg)) {
-        align-self: flex-end;
-      }
-    }
-
-    &--padding-top {
-      padding-top: getSpacer(s);
     }
   }
 
@@ -212,8 +232,6 @@
     }
   }
 
-  // Panel variants
-
   &--fill {
     background-color: $neutral50;
   }
@@ -283,7 +301,6 @@
     cursor: pointer;
   }
 
-  // Panel status
   &--status {
     &::before {
       content: '';
@@ -316,6 +333,23 @@
   }
 }
 
+.title-container {
+  padding-bottom: getSpacer(s);
+
+  &--no-content-a {
+    padding-bottom: 0;
+  }
+
+  &__title {
+    vertical-align: top;
+    display: inline;
+
+    &--badge {
+      padding-right: getSpacer(2xs);
+    }
+  }
+}
+
 .panel-details {
   background-color: $neutral50;
   display: none;
@@ -340,17 +374,14 @@
   &--white {
     background: $white;
   }
-
-  &--with-icon {
-    @include panel-padding-icon;
-  }
 }
 
 .status-message {
   font-size: $font-size-sm;
   color: $cherry500;
   display: flex;
-  margin-bottom: getSpacer(2xs);
+  margin-bottom: getSpacer(2xs) * -1;
+  grid-column: 1 / -1;
 
   span {
     padding-left: 5px;
@@ -363,93 +394,8 @@
   }
 }
 
-.panel-content-a {
-  flex: 1;
-  padding-right: 0;
-
-  @media (min-width: map.get($grid-breakpoints, md)) {
-    padding-right: getSpacer(m);
-  }
-
-  &__title-container {
-    padding-bottom: getSpacer(s);
-  }
-
-  &__title {
-    vertical-align: top;
-    display: inline;
-
-    &--badge {
-      padding-right: getSpacer(2xs);
-    }
-  }
-
-  &--layout3a {
-    flex: 0.6;
-  }
-
-  &--layout3b {
-    flex: 0.45;
-  }
-
-  &--layout3c {
-    flex: 0.35;
-  }
-
-  &--prioritiseMetaDataInContentB {
-    padding-bottom: getSpacer(s);
-
-    @media (min-width: map.get($grid-breakpoints, md)) {
-      padding-bottom: 0;
-    }
-  }
-}
-
-.panel-content-b {
-  flex: 1;
-  padding-top: 0;
-
-  @media (min-width: map.get($grid-breakpoints, lg)) {
-    padding-top: getSpacer(s);
-  }
-
-  &--layout1 {
-    padding-top: getSpacer(s);
-    padding-left: 0;
-
-    @media (min-width: map.get($grid-breakpoints, md)) {
-      padding-right: getSpacer(m);
-    }
-
-    @media (min-width: map.get($grid-breakpoints, lg)) {
-      padding-top: getSpacer(s);
-    }
-  }
-
-  &--layout2 {
-    padding-top: getSpacer(s);
-
-    @media (min-width: map.get($grid-breakpoints, md)) {
-      padding-top: 0;
-    }
-  }
-
-  &--layout3 {
-    padding-top: getSpacer(s);
-
-    @media (min-width: map.get($grid-breakpoints, lg)) {
-      padding-right: getSpacer(m);
-      padding-top: 0;
-    }
-  }
-
-  &--prioritiseMetaDataInContentB {
-    padding-top: 0;
-
-    @media (min-width: map.get($grid-breakpoints, lg)) {
-      padding-top: 0;
-    }
-  }
+.header-container {
+  grid-column: 1 / -1;
 }
 
 .datetime-container {