[New component] GlobalAlert

.changeset/eighty-deer-brake.md

@@ -0,0 +1,6 @@
+---
+"@navikt/ds-react": minor
+"@navikt/ds-css": minor
+---
+
+GlobalAlert: :tada: New component replacing `<Alert fullWidth>`, now with built-in centering of content.

@navikt/core/css/config/_mappings.js

@@ -132,6 +132,11 @@ const StyleMappings = {
         primitivesCss,
       ],
     },
+    {
+      component: "GlobalAlert",
+      main: "alert.css",
+      dependencies: [typoCss, "button.css"],
+    },
     {
       component: "GuidePanel",
       main: "guide-panel.css",

@navikt/core/react/package.json

@@ -624,6 +624,16 @@
         "default": "./cjs/form/form-progress/index.js"
       }
     },
+    "./GlobalAlert": {
+      "import": {
+        "types": "./esm/alert/global-alert/index.d.ts",
+        "default": "./esm/alert/global-alert/index.js"
+      },
+      "require": {
+        "types": "./cjs/alert/global-alert/index.d.ts",
+        "default": "./cjs/alert/global-alert/index.js"
+      }
+    },
     "./package.json": "./package.json",
     "./Theme": {
       "import": {

@navikt/core/react/src/alert/global-alert/GlobalAlert.stories.tsx

@@ -0,0 +1,212 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import React from "react";
+import { Button } from "../../button";
+import { VStack } from "../../layout/stack";
+import { Link } from "../../link";
+import { renderStoriesForChromatic } from "../../util/renderStoriesForChromatic";
+import {
+  GlobalAlert,
+  GlobalAlertClose,
+  GlobalAlertContent,
+  GlobalAlertHeader,
+  GlobalAlertTitle,
+} from "./index";
+
+const meta: Meta<typeof GlobalAlert> = {
+  title: "ds-react/Alert/GlobalAlert",
+  component: GlobalAlert,
+  parameters: {
+    chromatic: { disable: true },
+    layout: "padded",
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof GlobalAlert>;
+
+export const Default: Story = {
+  render: (props) => {
+    return (
+      <GlobalAlert variant={props.variant ?? "announcement"} size={props.size}>
+        <GlobalAlertHeader>
+          <GlobalAlertTitle>
+            {props.title ?? "GlobalAlert title"}
+          </GlobalAlertTitle>
+          <GlobalAlertClose onClick={() => alert("Lukket!")} />
+        </GlobalAlertHeader>
+        <GlobalAlertContent>
+          {props.children ?? "GlobalAlert content"}
+        </GlobalAlertContent>
+      </GlobalAlert>
+    );
+  },
+
+  args: {
+    children: "Id elit esse enim reprehenderit enim nisi veniam nostrud.",
+    title: "GlobalAlert Title",
+    size: "medium",
+    variant: "announcement",
+  },
+  argTypes: {
+    size: {
+      control: { type: "radio" },
+      options: ["medium", "small"],
+    },
+    variant: {
+      control: { type: "select" },
+      options: ["error", "warning", "announcement", "success"],
+    },
+  },
+};
+
+export const SizeSmall: Story = {
+  render: () => {
+    return (
+      <GlobalAlert variant="announcement" size="small">
+        <GlobalAlertHeader>
+          <GlobalAlertTitle>GlobalAlert Title</GlobalAlertTitle>
+          <GlobalAlertClose onClick={() => alert("Lukket!")} />
+        </GlobalAlertHeader>
+        <DemoContent />
+      </GlobalAlert>
+    );
+  },
+};
+
+export const OnlyHeader: Story = {
+  render: () => {
+    return (
+      <VStack gap="space-16">
+        <GlobalAlert variant="announcement">
+          <GlobalAlertHeader>
+            <GlobalAlertTitle>GlobalAlert Title</GlobalAlertTitle>
+          </GlobalAlertHeader>
+        </GlobalAlert>
+        <GlobalAlert variant="announcement">
+          <GlobalAlertHeader>
+            <GlobalAlertTitle>GlobalAlert Title</GlobalAlertTitle>
+            <GlobalAlertClose onClick={() => alert("Lukket!")} />
+          </GlobalAlertHeader>
+        </GlobalAlert>
+        <GlobalAlert variant="announcement" size="small">
+          <GlobalAlertHeader>
+            <GlobalAlertTitle>GlobalAlert Title</GlobalAlertTitle>
+          </GlobalAlertHeader>
+        </GlobalAlert>
+        <GlobalAlert variant="announcement" size="small">
+          <GlobalAlertHeader>
+            <GlobalAlertTitle>GlobalAlert Title</GlobalAlertTitle>
+            <GlobalAlertClose onClick={() => alert("Lukket!")} />
+          </GlobalAlertHeader>
+        </GlobalAlert>
+      </VStack>
+    );
+  },
+};
+
+const variants = ["announcement", "warning", "error", "success"] as const;
+
+export const Compositions: Story = {
+  render: () => {
+    return (
+      <VStack gap="space-16">
+        {variants.map((variant) => (
+          <GlobalAlert variant={variant} key={variant}>
+            <GlobalAlertHeader>
+              <GlobalAlertTitle>{variant} GlobalAlert title</GlobalAlertTitle>
+              <GlobalAlertClose onClick={() => alert("Lukket!")} />
+            </GlobalAlertHeader>
+            <DemoContent />
+          </GlobalAlert>
+        ))}
+      </VStack>
+    );
+  },
+};
+
+export const CloseButton: Story = {
+  render: () => {
+    return (
+      <VStack gap="space-16">
+        <GlobalAlert variant="announcement">
+          <GlobalAlertHeader>
+            <GlobalAlertTitle>Info: GlobalAlert title</GlobalAlertTitle>
+            <GlobalAlertClose onClick={() => alert("Lukket!")} />
+          </GlobalAlertHeader>
+          <DemoContent />
+        </GlobalAlert>
+        <GlobalAlert variant="announcement" size="small">
+          <GlobalAlertHeader>
+            <GlobalAlertTitle>Info: GlobalAlert title</GlobalAlertTitle>
+            <GlobalAlertClose onClick={() => alert("Lukket!")} />
+          </GlobalAlertHeader>
+          <DemoContent />
+        </GlobalAlert>
+      </VStack>
+    );
+  },
+  parameters: {
+    layout: "padded",
+  },
+};
+
+export const WrappingTitle: Story = {
+  render: () => {
+    return (
+      <GlobalAlert variant="announcement">
+        <GlobalAlertHeader>
+          <GlobalAlertTitle>
+            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Non fugiat
+            tempore corrupti asperiores praesentium? Asperiores, doloribus?
+            Molestias, laudantium saepe. Nihil in alias praesentium maxime iure
+            ipsam? Accusantium libero quia quis!
+          </GlobalAlertTitle>
+          <GlobalAlertClose onClick={() => alert("Lukket!")} />
+        </GlobalAlertHeader>
+        <DemoContent />
+      </GlobalAlert>
+    );
+  },
+};
+
+export const Chromatic = renderStoriesForChromatic({
+  Default,
+  SizeSmall,
+  OnlyHeader,
+  Compositions,
+  CloseButton,
+  WrappingTitle,
+});
+
+export const ChromaticLight = renderStoriesForChromatic({
+  Default,
+  SizeSmall,
+  OnlyHeader,
+  Compositions,
+  CloseButton,
+  WrappingTitle,
+});
+ChromaticLight.globals = { theme: "light", mode: "darkside" };
+
+export const ChromaticDark = renderStoriesForChromatic({
+  Default,
+  SizeSmall,
+  OnlyHeader,
+  Compositions,
+  CloseButton,
+  WrappingTitle,
+});
+ChromaticDark.globals = { theme: "dark", mode: "darkside" };
+
+function DemoContent() {
+  return (
+    <GlobalAlertContent>
+      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iure unde,
+      repudiandae, deleniti exercitationem quod aut veniam sint officiis
+      necessitatibus nulla nostrum voluptatem <Link href="#">Test</Link>
+      facilis! Commodi, nobis tempora quibusdam temporibus nulla quam.{" "}
+      <Button size="small">test</Button>
+    </GlobalAlertContent>
+  );
+}

@navikt/core/react/src/alert/global-alert/close/GlobalAlertClose.tsx

@@ -0,0 +1,20 @@
+import { BaseAlert } from "../../base-alert";
+
+type GlobalAlertCloseProps = BaseAlert.CloseProps;
+
+/**
+ * @see 🏷️ {@link GlobalAlertCloseProps}
+ * @example
+ * ```jsx
+ *  <GlobalAlert>
+ *    <GlobalAlert.Header>
+ *      <GlobalAlert.Title>Info tittel</GlobalAlert.Title>
+ *     <GlobalAlert.Close onClick={() => alert("Lukket!")} />
+ *    </GlobalAlert.Header>
+ *  </GlobalAlert>
+ * ```
+ */
+const GlobalAlertClose = BaseAlert.Close;
+
+export { GlobalAlertClose };
+export type { GlobalAlertCloseProps };

@navikt/core/react/src/alert/global-alert/content/GlobalAlertContent.tsx

@@ -0,0 +1,21 @@
+import { BaseAlert } from "../../base-alert";
+
+type GlobalAlertContentProps = BaseAlert.ContentProps;
+
+/**
+ * @see 🏷️ {@link GlobalAlertContentProps}
+ * @example
+ * ```jsx
+ *  <GlobalAlert>
+ *    <GlobalAlert.Header>
+ *      <GlobalAlert.Title>Info tittel</GlobalAlert.Title>
+ *    </GlobalAlert.Header>
+ *
+ *    <GlobalAlert.Content>Innhold</GlobalAlert.Content>
+ *  </GlobalAlert>
+ * ```
+ */
+const GlobalAlertContent = BaseAlert.Content;
+
+export { GlobalAlertContent };
+export type { GlobalAlertContentProps };

@navikt/core/react/src/alert/global-alert/header/GlobalAlertHeader.tsx

@@ -0,0 +1,24 @@
+import React, { forwardRef } from "react";
+import { BaseAlert } from "../../base-alert";
+
+type GlobalAlertHeaderProps = Omit<BaseAlert.HeaderProps, "icon">;
+
+/**
+ * @see 🏷️ {@link GlobalAlertHeaderProps}
+ * @example
+ * ```jsx
+ *  <GlobalAlert variant="info">
+ *    <GlobalAlert.Header>
+ *      <GlobalAlert.Title>Info tittel</GlobalAlert.Title>
+ *    </GlobalAlert.Header>
+ *  </GlobalAlert>
+ * ```
+ */
+const GlobalAlertHeader = forwardRef<HTMLDivElement, GlobalAlertHeaderProps>(
+  (props, forwardedRef) => {
+    return <BaseAlert.Header ref={forwardedRef} {...props} />;
+  },
+);
+
+export { GlobalAlertHeader };
+export type { GlobalAlertHeaderProps };

@navikt/core/react/src/alert/global-alert/index.ts

@@ -0,0 +1,16 @@
+"use client";
+export {
+  GlobalAlert,
+  GlobalAlertHeader,
+  GlobalAlertTitle,
+  GlobalAlertContent,
+  GlobalAlertClose,
+} from "./root/GlobalAlertRoot";
+
+export type {
+  GlobalAlertProps,
+  GlobalAlertHeaderProps,
+  GlobalAlertTitleProps,
+  GlobalAlertContentProps,
+  GlobalAlertCloseProps,
+} from "./root/GlobalAlertRoot";