Merge a406571 into 273a0cd

.changeset/late-teachers-try.md

@@ -0,0 +1,6 @@
+---
+"@navikt/ds-react": patch
+"@navikt/ds-css": patch
+---
+
+:lipstick: GuidePanel: justert design

@navikt/aksel-stylelint/src/deprecations.ts

@@ -38,4 +38,16 @@ export const deprecations: DeprecatedList = [
     classes: ["navds-modal__content"],
     message: "Renamed to `.navds-modal__body` in v5.0.0",
   },
+  {
+    classes: ["navds-guide__illustration"],
+    message: "Use `.navds-guide` instead",
+  },
+  {
+    classes: [
+      "navds-guide__illustration--small",
+      "navds-guide__illustration--medium",
+    ],
+    message:
+      "There is no 1:1 replacement for this, the size will depend on the 'poster' prop and the viewport width",
+  },
 ];

@navikt/core/css/guide-panel.css

@@ -1,72 +1,96 @@
-/**
- * GuidePanel component
- */
 .navds-guide-panel {
+  --__ac-guide-panel-guide-size: 4rem;
+
   position: relative;
-  padding-left: var(--a-spacing-10);
+  padding-top: calc(var(--__ac-guide-panel-guide-size) / 2);
 }
 
-.navds-guide-panel__content {
-  background-color: var(--ac-guide-panel-bg, var(--a-surface-default));
-  border-radius: var(--a-border-radius-medium);
-  border: 2px solid var(--ac-guide-panel-border, var(--a-border-action));
-  min-height: 7.25rem;
-  padding: var(--a-spacing-6);
-  padding-left: var(--a-spacing-14);
+.navds-guide {
+  background: var(--ac-guide-panel-illustration-bg, var(--a-surface-alt-3-subtle));
+  border: 2px solid var(--ac-guide-panel-border, var(--a-border-alt-3));
+  border-radius: var(--a-border-radius-full);
+  overflow: hidden;
+  position: absolute;
+  width: var(--__ac-guide-panel-guide-size);
+  height: var(--__ac-guide-panel-guide-size);
+  left: 50%;
+  transform: translate(-50%, -50%);
 }
 
-.navds-guide-panel--poster {
-  padding-left: 0;
-  padding-top: var(--a-spacing-12);
+.navds-guide svg,
+.navds-guide img {
+  height: 100%;
+  width: 100%;
 }
 
-.navds-guide-panel--poster .navds-guide-panel__content {
-  padding: var(--a-spacing-8);
-  padding-top: var(--a-spacing-16);
+.navds-guide-panel__content {
+  background-color: var(--ac-guide-panel-bg, var(--a-surface-default));
+  border: 2px solid var(--ac-guide-panel-border, var(--a-border-alt-3));
+  border-radius: var(--a-border-radius-large);
+  padding: var(--a-spacing-4);
+  padding-top: var(--a-spacing-12);
 }
 
-.navds-guide-panel .navds-guide {
-  position: absolute;
-  top: var(--a-spacing-4);
-  transform: translateX(-50%);
-  border: 2px solid var(--ac-guide-panel-border, var(--a-border-action));
-}
+@media (min-width: 480px) {
+  .navds-guide-panel {
+    --__ac-guide-panel-guide-size: 6.25rem;
+  }
 
-.navds-guide-panel--poster .navds-guide {
-  left: 50%;
-  top: 0;
+  .navds-guide-panel__content {
+    padding: var(--a-spacing-8);
+    padding-top: 4.25rem;
+  }
 }
 
-/**
- * Guide component
- */
-.navds-guide {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: var(--a-border-radius-full);
+/* not-poster */
+
+.navds-guide-panel--not-poster {
+  padding-top: 0;
+  padding-left: calc(var(--__ac-guide-panel-guide-size) / 2);
 }
 
-/* Guide illustration frame */
-.navds-guide__illustration {
-  background: var(--ac-guide-panel-illustration-bg, var(--a-surface-action-subtle));
-  border-radius: var(--a-border-radius-full);
-  overflow: hidden;
+.navds-guide-panel--not-poster .navds-guide {
+  left: 0;
+  top: var(--a-spacing-5);
+  transform: none;
 }
 
-.navds-guide__illustration svg,
-.navds-guide__illustration img {
-  height: 100%;
-  width: 100%;
+.navds-guide-panel--not-poster .navds-guide-panel__content {
+  padding: var(--a-spacing-4);
+  padding-left: var(--a-spacing-10);
+  min-height: calc(var(--__ac-guide-panel-guide-size) + var(--a-spacing-5) + var(--a-spacing-5));
 }
 
-/* Illustration sizes */
-.navds-guide__illustration--small {
-  height: 5rem;
-  width: 5rem;
+@media (min-width: 480px) {
+  .navds-guide-panel--not-poster {
+    --__ac-guide-panel-guide-size: 5rem;
+  }
+
+  .navds-guide-panel--not-poster .navds-guide-panel__content {
+    padding: var(--a-spacing-6);
+    padding-left: var(--a-spacing-14);
+  }
 }
 
-.navds-guide__illustration--medium {
-  height: 6rem;
-  width: 6rem;
+/* responsive-poster (on desktop) */
+
+@media (min-width: 480px) {
+  .navds-guide-panel--responsive-poster {
+    --__ac-guide-panel-guide-size: 5rem;
+
+    padding-top: 0;
+    padding-left: calc(var(--__ac-guide-panel-guide-size) / 2);
+  }
+
+  .navds-guide-panel--responsive-poster .navds-guide {
+    left: 0;
+    top: var(--a-spacing-5);
+    transform: none;
+  }
+
+  .navds-guide-panel--responsive-poster .navds-guide-panel__content {
+    padding: var(--a-spacing-6);
+    padding-left: var(--a-spacing-14);
+    min-height: calc(var(--__ac-guide-panel-guide-size) + var(--a-spacing-5) + var(--a-spacing-5));
+  }
 }

@navikt/core/css/tokens.json

@@ -156,8 +156,8 @@
   },
   "guidepanel": {
     "--ac-guide-panel-bg": "--a-surface-default",
-    "--ac-guide-panel-border": "--a-border-action",
-    "--ac-guide-panel-illustration-bg": "--a-surface-action-subtle"
+    "--ac-guide-panel-border": "--a-border-alt-3",
+    "--ac-guide-panel-illustration-bg": "--a-surface-alt-3-subtle"
   },
   "helptext": {
     "--ac-help-text-button-color": "--a-surface-action",

@navikt/core/react/src/guide-panel/GuidePanel.tsx

@@ -1,6 +1,6 @@
 import React, { forwardRef, HTMLAttributes } from "react";
-import Guide from "./Guide";
 import cl from "clsx";
+import { DefaultIllustration } from "./Illustration";
 
 export interface GuidePanelProps extends HTMLAttributes<HTMLDivElement> {
   /**
@@ -12,14 +12,14 @@ export interface GuidePanelProps extends HTMLAttributes<HTMLDivElement> {
    */
   illustration?: React.ReactNode;
   /**
-   * Poster positions guide-illustation above content
-   * @default false, renders illustation left of content
+   * Render illustation above content
+   * @default true on mobile (<480px)
    */
   poster?: boolean;
 }
 
 /**
- * A component that displays a guide panel.
+ * A component for guiding users on the website
  *
  * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/guidepanel)
  * @see 🏷️ {@link GuidePanelProps}
@@ -34,18 +34,19 @@ export interface GuidePanelProps extends HTMLAttributes<HTMLDivElement> {
  * ```
  */
 export const GuidePanel = forwardRef<HTMLDivElement, GuidePanelProps>(
-  (
-    { children, className, illustration, poster = false, color, ...rest },
-    ref
-  ) => (
+  ({ children, className, illustration, poster, ...rest }, ref) => (
     <div
       {...rest}
       ref={ref}
       className={cl("navds-guide-panel", className, {
-        "navds-guide-panel--poster": poster,
+        "navds-guide-panel--poster": poster === true,
+        "navds-guide-panel--not-poster": poster === false,
+        "navds-guide-panel--responsive-poster": poster === undefined,
       })}
     >
-      <Guide size={poster ? "medium" : "small"} illustration={illustration} />
+      <div className="navds-guide">
+        {illustration ?? <DefaultIllustration />}
+      </div>
       <div className="navds-guide-panel__content">{children}</div>
     </div>
   )