@navikt/ds-react 5.2.1 → 5.3.1

package/src/guide-panel/guidepanel.stories.tsx

@@ -1,10 +1,12 @@
 import React from "react";
-import { BodyLong, GuidePanel } from "../index";
+import { BodyLong, GuidePanel, VStack } from "../index";
 import { Meta } from "@storybook/react";
+import { InformationIcon } from "@navikt/aksel-icons";
+
 export default {
   title: "ds-react/GuidePanel",
   component: GuidePanel,
-} as Meta;
+} satisfies Meta<typeof GuidePanel>;
 
 const panelText = `Sit sint eu dolore reprehenderit exercitation labore aute anim sit
 adipisicing proident. Tempor ipsum ea cupidatat qui esse do veniam
@@ -12,18 +14,16 @@ cupidatat. Excepteur irure reprehenderit esse tempor nisi duis qui ea
 enim id.`;
 
 export const Default = {
-  render: (props) => {
-    const newProps = props?.colorOverride
-      ? {
-          style: {
-            ["--ac-guide-panel-illustration-bg" as any]: "var(--a-purple-200)",
-            ["--ac-guide-panel-border" as any]: "var(--a-purple-400)",
-          },
-        }
+  render: (props: { poster: boolean; colorOverride: boolean }) => {
+    const style = props.colorOverride
+      ? ({
+          "--ac-guide-panel-illustration-bg": "var(--a-purple-200)",
+          "--ac-guide-panel-border": "var(--a-purple-400)",
+        } as React.CSSProperties)
       : {};
 
     return (
-      <GuidePanel {...newProps} poster={props?.poster}>
+      <GuidePanel style={style} poster={props?.poster}>
         {panelText}
       </GuidePanel>
     );
@@ -35,13 +35,34 @@ export const Default = {
   },
 };
 
-export const Poster = () => <GuidePanel poster>{panelText}</GuidePanel>;
+export const PosterVariants = {
+  render: () => (
+    <VStack gap="6" align="start">
+      <GuidePanel>
+        If you exclude the <code>poster</code> prop, you will get the poster
+        variant on mobile (&lt;480px) and the non-poster variant otherwise.
+      </GuidePanel>
+      <GuidePanel poster>
+        Use the <code>poster</code> prop to get the poster variant on all
+        viewports.
+      </GuidePanel>
+      <GuidePanel poster={false}>
+        Set <code>poster=false</code> to get the non-poster variant on all
+        viewports.
+      </GuidePanel>
+    </VStack>
+  ),
+
+  parameters: {
+    chromatic: { viewports: [479, 800] },
+  },
+};
 
 export const ColorOverride = () => (
   <GuidePanel
     style={{
-      ["--ac-guide-panel-illustration-bg" as any]: "var(--a-purple-200)",
-      ["--ac-guide-panel-border" as any]: "var(--a-purple-400)",
+      "--ac-guide-panel-illustration-bg": "var(--a-purple-200)",
+      "--ac-guide-panel-border": "var(--a-purple-400)",
     }}
   >
     {panelText}
@@ -63,3 +84,7 @@ export const Content = () => (
     </BodyLong>
   </GuidePanel>
 );
+
+export const CustomIllustration = () => (
+  <GuidePanel illustration={<InformationIcon />}>{panelText}</GuidePanel>
+);

package/src/guide-panel/index.ts

@@ -1,3 +1,2 @@
 export { default as GuidePanel, type GuidePanelProps } from "./GuidePanel";
-export { type GuideProps } from "./Guide";
 export { DefaultIllustration as GuideDefaultIllustration } from "./Illustration";

package/src/typography/BodyLong.tsx

@@ -1,22 +1,21 @@
 import React, { forwardRef } from "react";
 import cl from "clsx";
 import { OverridableComponent } from "../util/OverridableComponent";
+import { TypoProps } from "./types";
+import { typoClassNames } from "./util";
 
 export interface BodyLongProps
-  extends React.HTMLAttributes<HTMLParagraphElement> {
+  extends TypoProps,
+    React.HTMLAttributes<HTMLParagraphElement> {
   /**
-   * medium: 18px, small: 16px
+   * large: 20px, medium: 18px, small: 16px
    * @default "medium"
    */
-  size?: "medium" | "small";
+  size?: "large" | "medium" | "small";
   /**
-   * Paragraph text
+   * Text
    */
   children: React.ReactNode;
-  /**
-   * Adds margin-bottom
-   */
-  spacing?: boolean;
 }
 
 /**
@@ -28,8 +27,10 @@ export interface BodyLongProps
  *
  * @example
  * ```jsx
- *     <BodyLong level="1" size="xlarge">
- *       Pengestøtte når du er syk
+ *     <BodyLong>
+ *       Hvis du ikke bor sammen med begge foreldrene dine,
+ *       kan du ha rett til barnebidrag fra en eller begge foreldre mens du
+ *       fullfører videregående skole eller tilsvarende.
  *     </BodyLong>
  * ```
  */
@@ -38,16 +39,36 @@ export const BodyLong: OverridableComponent<
   HTMLParagraphElement
 > = forwardRef(
   (
-    { className, size = "medium", spacing, as: Component = "p", ...rest },
+    {
+      className,
+      size = "medium",
+      as: Component = "p",
+      spacing,
+      truncate,
+      weight = "regular",
+      align,
+      visuallyHidden,
+      textColor,
+      ...rest
+    },
     ref
   ) => (
     <Component
       {...rest}
       ref={ref}
-      className={cl(className, "navds-body-long", {
-        "navds-body-long--small": size === "small",
-        "navds-typo--spacing": !!spacing,
-      })}
+      className={cl(
+        className,
+        "navds-body-long",
+        `navds-body-long--${size}`,
+        typoClassNames({
+          spacing,
+          truncate,
+          weight,
+          align,
+          visuallyHidden,
+          textColor,
+        })
+      )}
     />
   )
 );

package/src/typography/BodyShort.tsx

@@ -1,22 +1,21 @@
-import React, { forwardRef } from "react";
 import cl from "clsx";
+import React, { forwardRef } from "react";
 import { OverridableComponent } from "../util/OverridableComponent";
+import { TypoProps } from "./types";
+import { typoClassNames } from "./util";
 
 export interface BodyShortProps
-  extends React.HTMLAttributes<HTMLParagraphElement> {
+  extends TypoProps,
+    React.HTMLAttributes<HTMLParagraphElement> {
   /**
-   * medium: 18px, small: 16px
+   * large: 20px, medium: 18px, small: 16px
    * @default "medium"
    */
-  size?: "medium" | "small";
+  size?: "large" | "medium" | "small";
   /**
    * Paragraph text
    */
   children: React.ReactNode;
-  /**
-   * Adds margin-bottom
-   */
-  spacing?: boolean;
 }
 
 /**
@@ -28,8 +27,8 @@ export interface BodyShortProps
  *
  * @example
  * ```jsx
- *     <BodyShort level="1" size="xlarge">
- *       Pengestøtte når du er syk
+ *     <BodyShort>
+ *       Du må gjøre en filtrering for å se brukere i listen.
  *     </BodyShort>
  * ```
  */
@@ -38,16 +37,36 @@ export const BodyShort: OverridableComponent<
   HTMLParagraphElement
 > = forwardRef(
   (
-    { className, size = "medium", spacing, as: Component = "p", ...rest },
+    {
+      className,
+      size = "medium",
+      as: Component = "p",
+      spacing,
+      truncate,
+      weight = "regular",
+      align,
+      visuallyHidden,
+      textColor,
+      ...rest
+    },
     ref
   ) => (
     <Component
       {...rest}
       ref={ref}
-      className={cl(className, "navds-body-short", {
-        "navds-body-short--small": size === "small",
-        "navds-typo--spacing": !!spacing,
-      })}
+      className={cl(
+        className,
+        "navds-body-short",
+        `navds-body-short--${size}`,
+        typoClassNames({
+          spacing,
+          truncate,
+          weight,
+          align,
+          visuallyHidden,
+          textColor,
+        })
+      )}
     />
   )
 );

package/src/typography/Detail.tsx

@@ -1,9 +1,12 @@
-import React, { forwardRef } from "react";
 import cl from "clsx";
+import React, { forwardRef } from "react";
 import { OverridableComponent } from "../util/OverridableComponent";
+import { TypoProps } from "./types";
+import { typoClassNames } from "./util";
 
 export interface DetailProps
-  extends React.HTMLAttributes<HTMLParagraphElement> {
+  extends TypoProps,
+    React.HTMLAttributes<HTMLParagraphElement> {
   /**
    * @deprecated Medium === small
    */
@@ -12,10 +15,6 @@ export interface DetailProps
    * Paragraph text
    */
   children: React.ReactNode;
-  /**
-   * Adds margin-bottom
-   */
-  spacing?: boolean;
   /**
    * All caps
    */
@@ -31,8 +30,8 @@ export interface DetailProps
  *
  * @example
  * ```jsx
- *     <Detail level="1" size="xlarge">
- *       Pengestøtte når du er syk
+ *     <Detail>
+ *       Du må gjøre en filtrering for å se brukere i listen.
  *     </Detail>
  * ```
  */
@@ -45,6 +44,11 @@ export const Detail: OverridableComponent<DetailProps, HTMLParagraphElement> =
         spacing,
         uppercase,
         as: Component = "p",
+        truncate,
+        weight = "regular",
+        align,
+        visuallyHidden,
+        textColor,
         ...rest
       },
       ref
@@ -52,11 +56,22 @@ export const Detail: OverridableComponent<DetailProps, HTMLParagraphElement> =
       <Component
         {...rest}
         ref={ref}
-        className={cl(className, "navds-detail", {
-          "navds-detail--small": size === "small",
-          "navds-typo--spacing": !!spacing,
-          "navds-typo--uppercase": !!uppercase,
-        })}
+        className={cl(
+          className,
+          "navds-detail",
+          typoClassNames({
+            spacing,
+            truncate,
+            weight,
+            align,
+            visuallyHidden,
+            textColor,
+            uppercase,
+          }),
+          {
+            "navds-detail--small": size === "small",
+          }
+        )}
       />
     )
   );

package/src/typography/ErrorMessage.tsx

@@ -1,9 +1,12 @@
 import React, { forwardRef } from "react";
 import cl from "clsx";
 import { OverridableComponent } from "../util/OverridableComponent";
+import { TypoProps } from "./types";
+import { typoClassNames } from "./util";
 
 export interface ErrorMessageProps
-  extends React.HTMLAttributes<HTMLParagraphElement> {
+  extends Pick<TypoProps, "spacing">,
+    React.HTMLAttributes<HTMLParagraphElement> {
   /**
    * medium: 18px, small: 16px
    * @default "medium"
@@ -13,10 +16,6 @@ export interface ErrorMessageProps
    * Error text
    */
   children: React.ReactNode;
-  /**
-   * Adds margin-bottom
-   */
-  spacing?: boolean;
 }
 
 /**
@@ -28,8 +27,8 @@ export interface ErrorMessageProps
  *
  * @example
  * ```jsx
- *     <ErrorMessage level="1" size="xlarge">
- *       Pengestøtte når du er syk
+ *     <ErrorMessage>
+ *       Du må fylle ut: Oppgi årsaken til at du har ventet mer enn 6 måneder med å søke om refusjon
  *     </ErrorMessage>
  * ```
  */
@@ -41,10 +40,17 @@ export const ErrorMessage: OverridableComponent<
     <Component
       {...rest}
       ref={ref}
-      className={cl("navds-error-message", "navds-label", className, {
-        "navds-label--small": size === "small",
-        "navds-typo--spacing": !!spacing,
-      })}
+      className={cl(
+        "navds-error-message",
+        "navds-label",
+        className,
+        typoClassNames({
+          spacing,
+        }),
+        {
+          "navds-label--small": size === "small",
+        }
+      )}
     />
   )
 );

package/src/typography/Heading.tsx

@@ -1,8 +1,12 @@
-import React, { forwardRef } from "react";
 import cl from "clsx";
+import React, { forwardRef } from "react";
 import { OverridableComponent } from "../util/OverridableComponent";
+import { TypoProps } from "./types";
+import { typoClassNames } from "./util";
 
-export interface HeadingProps extends React.HTMLAttributes<HTMLHeadingElement> {
+export interface HeadingProps
+  extends Pick<TypoProps, "spacing" | "visuallyHidden" | "align" | "textColor">,
+    React.HTMLAttributes<HTMLHeadingElement> {
   /**
    * Heading level
    * @default "1"
@@ -16,11 +20,6 @@ export interface HeadingProps extends React.HTMLAttributes<HTMLHeadingElement> {
    * Heading text
    */
   children: React.ReactNode;
-  /**
-   * Adds margin-bottom
-   * @default false
-   */
-  spacing?: boolean;
 }
 
 /**
@@ -33,22 +32,43 @@ export interface HeadingProps extends React.HTMLAttributes<HTMLHeadingElement> {
  * @example
  * ```jsx
  *     <Heading level="1" size="xlarge">
- *       Pengestøtte når du er syk
+ *       Hva kan vi hjelpe deg med?
  *     </Heading>
  * ```
  */
 export const Heading: OverridableComponent<HeadingProps, HTMLHeadingElement> =
   forwardRef(
-    ({ level = "1", size, spacing = false, className, as, ...rest }, ref) => {
+    (
+      {
+        level = "1",
+        size,
+        className,
+        as,
+        spacing,
+        align,
+        visuallyHidden,
+        textColor,
+        ...rest
+      },
+      ref
+    ) => {
       let HeadingTag = as ?? (`h${level}` as React.ElementType);
 
       return (
         <HeadingTag
           {...rest}
           ref={ref}
-          className={cl(className, "navds-heading", `navds-heading--${size}`, {
-            "navds-typo--spacing": spacing,
-          })}
+          className={cl(
+            className,
+            "navds-heading",
+            `navds-heading--${size}`,
+            typoClassNames({
+              spacing,
+              align,
+              visuallyHidden,
+              textColor,
+            })
+          )}
         />
       );
     }

package/src/typography/Ingress.tsx

@@ -15,6 +15,8 @@ export interface IngressProps
 }
 
 /**
+ * @deprecated Use `<BodyLong size="large" />`
+ *
  * Part of a set of components for displaying text with consistent typography.
  *
  * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/typography)
@@ -23,8 +25,8 @@ export interface IngressProps
  *
  * @example
  * ```jsx
- *     <Ingress level="1" size="xlarge">
- *       Pengestøtte når du er syk
+ *     <Ingress>
+ *       Hvis du ikke bor sammen med begge foreldrene dine, kan du ha rett til barnebidrag fra en eller begge foreldre mens du fullfører videregående skole eller tilsvarende.
  *     </Ingress>
  * ```
  */

package/src/typography/Label.tsx

@@ -1,9 +1,12 @@
-import React, { forwardRef } from "react";
 import cl from "clsx";
+import React, { forwardRef } from "react";
 import { OverridableComponent } from "../util/OverridableComponent";
+import { TypoProps } from "./types";
+import { typoClassNames } from "./util";
 
 export interface LabelProps
-  extends React.LabelHTMLAttributes<HTMLLabelElement> {
+  extends Omit<TypoProps, "weight" | "align" | "truncate">,
+    React.LabelHTMLAttributes<HTMLLabelElement> {
   /**
    * medium: 18px, small: 16px
    * @default "medium"
@@ -13,10 +16,6 @@ export interface LabelProps
    * Paragraph text
    */
   children: React.ReactNode;
-  /**
-   * Adds margin-bottom
-   */
-  spacing?: boolean;
 }
 
 /**
@@ -28,24 +27,40 @@ export interface LabelProps
  *
  * @example
  * ```jsx
- *     <Label level="1" size="xlarge">
- *       Pengestøtte når du er syk
+ *     <Label>
+ *       Oppgi årsaken til at du har ventet mer enn 6 måneder med å søke om refusjon
  *     </Label>
  * ```
  */
 export const Label: OverridableComponent<LabelProps, HTMLLabelElement> =
   forwardRef(
     (
-      { className, size = "medium", spacing, as: Component = "label", ...rest },
+      {
+        className,
+        size = "medium",
+        as: Component = "label",
+        spacing,
+        visuallyHidden,
+        textColor,
+        ...rest
+      },
       ref
     ) => (
       <Component
         {...rest}
         ref={ref}
-        className={cl(className, "navds-label", {
-          "navds-label--small": size === "small",
-          "navds-typo--spacing": !!spacing,
-        })}
+        className={cl(
+          className,
+          "navds-label",
+          typoClassNames({
+            spacing,
+            visuallyHidden,
+            textColor,
+          }),
+          {
+            "navds-label--small": size === "small",
+          }
+        )}
       />
     )
   );