@navikt/ds-react 0.7.4 → 0.8.0

package/src/alert/Alert.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from "react";
+import React, { createContext, forwardRef } from "react";
 import cl from "classnames";
 import {
   ErrorFilled,
@@ -6,80 +6,103 @@ import {
   InformationFilled,
   SuccessFilled,
 } from "@navikt/ds-icons";
+import AlertContent, { AlertContentType } from "./AlertContent";
+import AlertTitle, { AlertTitleType } from "./AlertTitle";
+import { BodyLong } from "..";
 
 export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * Alert content
+   */
+  children: React.ReactNode;
   /**
    * Decides what design the alert will have
    */
   variant: "error" | "warning" | "info" | "success";
-  children: React.ReactNode;
   /**
    * Changes padding and font-sizes
-   * @default "m"
+   * @default "medium"
+   */
+  size?: "medium" | "small";
+  /**
+   * Toggles full-width Alert
+   * @default false
+   */
+  fullWidth?: boolean;
+  /**
+   * Removes background from Alert
    */
-  size?: "m" | "s";
+  inline?: boolean;
 }
 
-const Icon = ({ variant }) => {
+const Icon = ({ variant, ...props }) => {
   switch (variant) {
     case "error":
-      return (
-        <ErrorFilled
-          aria-label={`${variant}-ikon`}
-          focusable="false"
-          role="img"
-        />
-      );
+      return <ErrorFilled {...props} />;
     case "warning":
-      return (
-        <WarningFilled
-          aria-label={`${variant}-ikon`}
-          focusable="false"
-          role="img"
-        />
-      );
+      return <WarningFilled {...props} />;
     case "info":
-      return (
-        <InformationFilled
-          aria-label={`${variant}-ikon`}
-          focusable="false"
-          role="img"
-        />
-      );
+      return <InformationFilled {...props} />;
     case "success":
-      return (
-        <SuccessFilled
-          aria-label={`${variant}-ikon`}
-          focusable="false"
-          role="img"
-        />
-      );
+      return <SuccessFilled {...props} />;
     default:
       return null;
   }
 };
 
+export interface AlertContextProps {
+  size: "medium" | "small";
+}
+
+export const AlertContext = createContext<AlertContextProps | null>(null);
+interface AlertComponent
+  extends React.ForwardRefExoticComponent<
+    AlertProps & React.RefAttributes<HTMLDivElement>
+  > {
+  Title: AlertTitleType;
+  Content: AlertContentType;
+}
+
 const Alert = forwardRef<HTMLDivElement, AlertProps>(
-  ({ variant, children, className, size = "m", ...rest }, ref) => (
+  (
+    {
+      children,
+      className,
+      variant,
+      size = "medium",
+      fullWidth = false,
+      inline = false,
+      ...rest
+    },
+    ref
+  ) => (
     <div
+      {...rest}
       ref={ref}
       className={cl(
         className,
         "navds-alert",
         `navds-alert--${variant}`,
         `navds-alert--${size}`,
-        "navds-body-long",
-        { "navds-body--s": size === "s" }
+        { "navds-alert--full-width": fullWidth, "navds-alert--inline": inline }
       )}
-      {...rest}
     >
-      <span>
-        <span className="sr-only">{`${variant}-ikon`}</span>
-        <Icon variant={variant} />
-      </span>
-      <div>{children}</div>
+      <Icon
+        aria-label={`${variant}-ikon`}
+        focusable="false"
+        role="img"
+        variant={variant}
+        alt={`${variant}-ikon`}
+        className="navds-alert__icon"
+      />
+      <BodyLong as="div" size={size} className="navds-alert__wrapper">
+        {children}
+      </BodyLong>
     </div>
   )
-);
+) as AlertComponent;
+
+Alert.Title = AlertTitle;
+Alert.Content = AlertContent;
 
 export default Alert;

package/src/alert/AlertContent.tsx

@@ -0,0 +1,41 @@
+import React, { forwardRef, useContext } from "react";
+import cl from "classnames";
+import { BodyLong } from "..";
+import { AlertContext } from ".";
+
+export interface AlertContentProps
+  extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * Alert content
+   */
+  children: React.ReactNode;
+}
+
+export type AlertContentType = React.ForwardRefExoticComponent<
+  AlertContentProps & React.RefAttributes<HTMLDivElement>
+>;
+
+const AlertContent: AlertContentType = forwardRef(
+  ({ children, className, ...rest }, ref) => {
+    const context = useContext(AlertContext);
+
+    if (context === null) {
+      console.warn("AlertContent has to be wrapped in <Alert />");
+      return null;
+    }
+
+    return (
+      <BodyLong
+        {...rest}
+        as="div"
+        className={cl(className, "navds-alert__content")}
+        ref={ref}
+        size={context.size ?? "medium"}
+      >
+        {children}
+      </BodyLong>
+    );
+  }
+);
+
+export default AlertContent;

package/src/alert/AlertTitle.tsx

@@ -0,0 +1,41 @@
+import React, { forwardRef, useContext } from "react";
+import cl from "classnames";
+import { AlertContext, Heading } from "..";
+
+export interface AlertTitleProps extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * Alert content
+   */
+  children: React.ReactNode;
+}
+
+export type AlertTitleType = React.ForwardRefExoticComponent<
+  AlertTitleProps & React.RefAttributes<HTMLDivElement>
+>;
+
+const AlertTitle: AlertTitleType = forwardRef(
+  ({ children, className, ...rest }, ref) => {
+    const context = useContext(AlertContext);
+
+    if (context === null) {
+      console.warn("AlertTitle has to be wrapped in <Alert />");
+      return null;
+    }
+
+    const size = context.size === "medium" ? "small" : "xsmall";
+
+    return (
+      <Heading
+        {...rest}
+        ref={ref}
+        className={cl(className, "navds-alert__title")}
+        as="div"
+        size={size}
+      >
+        {children}
+      </Heading>
+    );
+  }
+);
+
+export default AlertTitle;

package/src/alert/stories/alert.stories.mdx

@@ -1,5 +1,5 @@
 import { Meta, Canvas } from "@storybook/addon-docs";
-import { Alert } from "../../index";
+import { Alert, Heading, BodyLong } from "../../index";
 
 <Meta title="ds-react/alert/intro" />
 
@@ -26,7 +26,7 @@ import { Alert } from "../../index";
 ## Varianter
 
 `variants`-prop kan brukes for å endre utseende mellom
-`info`, `success`, `warning` og `error`
+`info`, `success`, `warning` og `error`.
 
 <Canvas>
   <Alert variant="info">Id elit esse enim reprehenderit.</Alert>
@@ -37,19 +37,60 @@ import { Alert } from "../../index";
 
 ## Sizing
 
-Alert har to størrelser: Default 64px min-height og small 32px min-height
+Alert har to størrelser: Default 64px height og small 32px height default.
 
 <Canvas>
-  <Alert size="s" variant="info">
+  <Alert size="small" variant="info">
     Id elit esse enim reprehenderit.
   </Alert>
-  <Alert size="s" variant="success">
+  <Alert size="small" variant="success">
     Id elit esse enim reprehenderit.
   </Alert>
-  <Alert size="s" variant="warning">
+  <Alert size="small" variant="warning">
     Id elit esse enim reprehenderit.
   </Alert>
-  <Alert size="s" variant="error">
+  <Alert size="small" variant="error">
     Id elit esse enim reprehenderit.
   </Alert>
 </Canvas>
+
+## fullWidth
+
+<Canvas>
+  <div style={{ margin: 32, display: "grid", gap: 16 }}>
+    <Alert fullWidth variant="info">
+      Id elit esse enim reprehenderit.
+    </Alert>
+    <Alert fullWidth size="small" variant="info">
+      Id elit esse enim reprehenderit.
+    </Alert>
+  </div>
+</Canvas>
+
+## Med heading
+
+```jsx
+<Alert variant="info">
+  <Heading spacing size="small" level="2">
+    Aliquip duis est in commodo pariatur
+  </Heading>
+  <BodyLong>
+    Ullamco ullamco laborum et commodo sint culpa cupidatat culpa qui laboris
+    ex. Labore ex occaecat proident qui qui fugiat magna. Fugiat sint commodo
+    consequat eu aute.
+  </BodyLong>
+</Alert>
+```
+
+<Canvas>
+  <Alert variant="info">
+    <Heading spacing size="small" level="3">
+      Aliquip duis est in commodo pariatur
+    </Heading>
+    <BodyLong>
+      Ullamco ullamco laborum et commodo sint culpa cupidatat culpa qui laboris
+      ex. Labore ex occaecat proident qui qui fugiat magna. Fugiat sint commodo
+      consequat eu aute.
+    </BodyLong>
+  </Alert>
+</Canvas>

package/src/alert/stories/alert.stories.tsx

@@ -1,5 +1,6 @@
 import React from "react";
-import { Alert } from "../index";
+import { Alert } from "..";
+import { BodyLong, Heading } from "../..";
 
 export default {
   title: "ds-react/alert",
@@ -17,21 +18,104 @@ export const All = () => {
   return (
     <>
       <h1>Alert</h1>
-      {variants.map((variant) => (
+      {variants.map((variant, i) => (
         <Alert key={variant} variant={variant}>
-          Id elit esse enim reprehenderit.Tempor tempor ex exercitation id aute
-          eu.Laborum nulla nisi irure voluptate mollit fugiat.Est quis culpa
-          nostrud et reprehenderit ea sint.Eu veniam labore enim labore qui
-          eiusmod Lorem amet ad esse.
+          {new Array(i + 1).fill(
+            "Id elit esse enim reprehenderit enim nisi veniam nostrud."
+          )}
         </Alert>
       ))}
       <h2>Small</h2>
       <div>
-        {variants.map((variant) => (
-          <Alert key={variant} variant={variant} size="s">
-            Exercitation enim nisi veniam nostrud Lorem ipsum ea fugiat. Aute
-            exercitation voluptate proident sit ex reprehenderit quis ex ut
-            mollit.
+        {variants.map((variant, i) => (
+          <Alert key={variant} variant={variant} size="small">
+            {new Array(i + 1).fill(
+              "Id elit esse enim reprehenderit enim nisi veniam nostrud."
+            )}
+          </Alert>
+        ))}
+      </div>
+      <h2>Alert fullWidth</h2>
+      {variants.map((variant, i) => (
+        <Alert fullWidth key={variant} variant={variant}>
+          {new Array(i + 1).fill(
+            "Id elit esse enim reprehenderit enim nisi veniam nostrud."
+          )}
+        </Alert>
+      ))}
+      <h2>Small</h2>
+      <div>
+        {variants.map((variant, i) => (
+          <Alert fullWidth key={variant} variant={variant} size="small">
+            {new Array(i + 1).fill(
+              "Id elit esse enim reprehenderit enim nisi veniam nostrud."
+            )}
+          </Alert>
+        ))}
+      </div>
+      <h2>Inline</h2>
+      <div>
+        {variants.map((variant, i) => (
+          <Alert inline key={variant} variant={variant}>
+            {new Array(i + 1).fill(
+              "Id elit esse enim reprehenderit enim nisi veniam nostrud."
+            )}
+          </Alert>
+        ))}
+      </div>
+      <h2>Inline small</h2>
+      <div>
+        {variants.map((variant, i) => (
+          <Alert inline key={variant} variant={variant} size="small">
+            {new Array(i + 1).fill(
+              "Id elit esse enim reprehenderit enim nisi veniam nostrud."
+            )}
+          </Alert>
+        ))}
+      </div>
+      <h2>Med Heading</h2>
+      <div>
+        {variants.map((variant, i) => (
+          <Alert key={variant} variant={variant}>
+            <Heading spacing size="small" level="3">
+              Aliquip duis est in commodo pariatur
+            </Heading>
+            <BodyLong spacing>
+              Ullamco ullamco laborum et commodo sint culpa cupidatat culpa qui
+              laboris ex. Labore ex occaecat proident qui qui fugiat magna.
+              Fugiat sint commodo consequat eu aute.
+            </BodyLong>
+            <Heading level="4" size="xsmall" spacing>
+              Ullamco eiusmod Lorem eiusmod eu.
+            </Heading>
+            <BodyLong>
+              Ullamco ullamco laborum et commodo sint culpa cupidatat culpa qui
+              laboris ex. Labore ex occaecat proident qui qui fugiat magna.
+              Fugiat sint commodo consequat eu aute.
+            </BodyLong>
+          </Alert>
+        ))}
+      </div>
+      <h2>Med Heading small</h2>
+      <div>
+        {variants.map((variant, i) => (
+          <Alert key={variant} variant={variant} size="small">
+            <Heading spacing size="small" level="3">
+              Aliquip duis est in commodo pariatur
+            </Heading>
+            <BodyLong spacing>
+              Ullamco ullamco laborum et commodo sint culpa cupidatat culpa qui
+              laboris ex. Labore ex occaecat proident qui qui fugiat magna.
+              Fugiat sint commodo consequat eu aute.
+            </BodyLong>
+            <Heading level="4" size="xsmall" spacing>
+              Ullamco eiusmod Lorem eiusmod eu.
+            </Heading>
+            <BodyLong>
+              Ullamco ullamco laborum et commodo sint culpa cupidatat culpa qui
+              laboris ex. Labore ex occaecat proident qui qui fugiat magna.
+              Fugiat sint commodo consequat eu aute.
+            </BodyLong>
           </Alert>
         ))}
       </div>

package/src/button/Button.tsx

@@ -1,5 +1,6 @@
 import React, { forwardRef } from "react";
 import cl from "classnames";
+import { BodyShort, OverridableComponent } from "../";
 
 export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement> {
@@ -11,12 +12,12 @@ export interface ButtonProps
    * Changes design and interactions
    * @default "primary"
    */
-  variant?: "primary" | "secondary" | "action" | "danger";
+  variant?: "primary" | "secondary" | "tertiary" | "danger";
   /**
    * Changes padding, height and font-size
-   * @default "m"
+   * @default "medium"
    */
-  size?: "m" | "s";
+  size?: "medium" | "small";
   /**
    * Prevent the user from interacting with the button: it cannot be pressed or focused.
    * @note Avoid using if possible for accessibility purposes
@@ -25,20 +26,32 @@ export interface ButtonProps
   disabled?: boolean;
 }
 
-const Button = forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ variant = "primary", className, size = "m", ...rest }, ref) => (
-    <button
+const Button: OverridableComponent<ButtonProps, HTMLButtonElement> = forwardRef(
+  (
+    {
+      as: Component = "button",
+      variant = "primary",
+      className,
+      children,
+      size = "medium",
+      ...rest
+    },
+    ref
+  ) => (
+    <Component
+      {...rest}
       ref={ref}
       className={cl(
         className,
         "navds-button",
         `navds-button--${variant}`,
-        `navds-button--${size}`,
-        "navds-body-short",
-        { "navds-body--s": size === "s" }
+        `navds-button--${size}`
       )}
-      {...rest}
-    />
+    >
+      <BodyShort as="span" className="navds-button__inner" size={size}>
+        {children}
+      </BodyShort>
+    </Component>
   )
 );