@navikt/ds-react 6.5.0 → 6.6.0

package/src/form/form-summary/FormSummaryValue.tsx

@@ -0,0 +1,24 @@
+import cl from "clsx";
+import React, { forwardRef } from "react";
+import { BodyLong } from "../../typography";
+
+export interface FormSummaryValueProps
+  extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+}
+
+export const FormSummaryValue = forwardRef<
+  HTMLDivElement,
+  FormSummaryValueProps
+>(({ children, className, ...rest }, ref) => (
+  <BodyLong
+    ref={ref}
+    {...rest}
+    as="dd"
+    className={cl("navds-form-summary__value", className)}
+  >
+    {children}
+  </BodyLong>
+));
+
+export default FormSummaryValue;

package/src/form/form-summary/index.ts

@@ -0,0 +1,30 @@
+"use client";
+export { default as FormSummary, type FormSummaryProps } from "./FormSummary";
+export {
+  default as FormSummaryAnswer,
+  type FormSummaryAnswerProps,
+} from "./FormSummaryAnswer";
+export {
+  default as FormSummaryAnswers,
+  type FormSummaryAnswersProps,
+} from "./FormSummaryAnswers";
+export {
+  default as FormSummaryEditLink,
+  type FormSummaryEditProps,
+} from "./FormSummaryEditLink";
+export {
+  default as FormSummaryHeader,
+  type FormSummaryHeaderProps,
+} from "./FormSummaryHeader";
+export {
+  default as FormSummaryHeading,
+  type FormSummaryHeadingProps,
+} from "./FormSummaryHeading";
+export {
+  default as FormSummaryLabel,
+  type FormSummaryLabelProps,
+} from "./FormSummaryLabel";
+export {
+  default as FormSummaryValue,
+  type FormSummaryValueProps,
+} from "./FormSummaryValue";

package/src/index.ts

@@ -26,8 +26,8 @@ export { Dropdown, type DropdownProps } from "./dropdown";
 export { ExpansionCard, type ExpansionCardProps } from "./expansion-card";
 export {
   GuidePanel,
-  type GuidePanelProps,
   GuidePanelDefaultIllustration,
+  type GuidePanelProps,
 } from "./guide-panel";
 export { HelpText, type HelpTextProps } from "./help-text";
 export {
@@ -125,6 +125,21 @@ export {
 } from "./form/confirmation-panel";
 export { ErrorSummary, type ErrorSummaryProps } from "./form/error-summary";
 export { Fieldset, type FieldsetProps } from "./form/fieldset";
+export {
+  UNSAFE_FileUpload,
+  type FileAccepted,
+  type FileItem,
+  type FileMetadata,
+  type FileObject,
+  type FileRejected,
+  type FileRejectedPartitioned,
+  type FileRejectionReason,
+  type FileUploadDropzoneProps,
+  type FileUploadItemProps,
+  type FileUploadTriggerProps,
+  type FilesPartitioned,
+} from "./form/file-upload";
+export { FormSummary, type FormSummaryProps } from "./form/form-summary";
 export {
   Radio,
   RadioGroup,
@@ -136,20 +151,6 @@ export { Select, type SelectProps } from "./form/select";
 export { Switch, type SwitchProps } from "./form/switch";
 export { Textarea, type TextareaProps } from "./form/textarea";
 export { TextField, type TextFieldProps } from "./form/textfield";
-export {
-  UNSAFE_FileUpload,
-  type FileUploadDropzoneProps,
-  type FileUploadTriggerProps,
-  type FileObject,
-  type FileRejected,
-  type FileAccepted,
-  type FileRejectedPartitioned,
-  type FilesPartitioned,
-  type FileRejectionReason,
-  type FileUploadItemProps,
-  type FileItem,
-  type FileMetadata,
-} from "./form/file-upload";
 
 /**
  * @deprecated

package/src/util/hooks/descendants/descendant.ts

@@ -143,7 +143,21 @@ export class DescendantsManager<
   };
 
   private registerNode = (node: T | null, options?: DescendantOptions<K>) => {
-    if (!node || this.descendants.has(node)) return;
+    if (!node) return;
+
+    /**
+     * While the node is registered, we have to make sure to sync options
+     * This is useful when ex. a node is disabled after it has been registered
+     */
+    const mapNode = this.descendants.get(node);
+    if (mapNode) {
+      this.descendants.set(node, {
+        index: mapNode.index,
+        node,
+        ...options,
+      } as Descendant<T, K>);
+      return;
+    }
 
     const keys = Array.from(this.descendants.keys()).concat(node);
     const sorted = sortNodes(keys);

package/src/util/hooks/descendants/useDescendant.tsx

@@ -17,11 +17,6 @@ function useDescendants<
   K extends Record<string, any> = object,
 >() {
   const descendants = useRef(new DescendantsManager<T, K>()).current;
-  useClientLayoutEffect(() => {
-    return () => {
-      descendants.destroy();
-    };
-  });
 
   return descendants;
 }

package/src/accordion/accordion.stories.tsx

@@ -1,286 +0,0 @@
-import { StoryObj } from "@storybook/react";
-import React, { useState } from "react";
-import { Accordion, AccordionProps } from ".";
-import AccordionContent from "./AccordionContent";
-import AccordionHeader from "./AccordionHeader";
-import AccordionItem from "./AccordionItem";
-
-export default {
-  title: "ds-react/Accordion",
-  component: Accordion,
-  subcomponents: {
-    AccordionItem,
-    AccordionContent,
-    AccordionHeader,
-  },
-  parameters: {
-    chromatic: { disable: true },
-  },
-  decorators: [
-    (Story) => (
-      <div
-        style={{
-          width: "600px",
-          minHeight: "100vh",
-          display: "flex",
-          flexDirection: "column",
-          gap: "1rem",
-        }}
-      >
-        <Story />
-      </div>
-    ),
-  ],
-};
-
-type Story = StoryObj<typeof Accordion>;
-
-const Content = () => (
-  <Accordion.Content>
-    Magna aliquip aliquip fugiat nostrud nostrud velit pariatur veniam officia
-    laboris voluptate officia pariatur. <a href="#Lorem">Lorem est</a> ex anim
-    velit occaecat nisi qui nostrud sit consectetur consectetur officia nostrud
-    ullamco. Est ex duis proident nostrud elit qui laborum anim minim eu
-    eiusmod. Veniam in nostrud sunt tempor velit incididunt sint ex dolor qui
-    velit id eu. Deserunt magna sunt velit in. Est exercitation id cillum qui
-    do. Minim adipisicing nostrud commodo proident occaecat aliquip nulla anim
-    proident reprehenderit. Magna ipsum officia veniam cupidatat duis veniam
-    dolore reprehenderit mollit velit. Ut consequat commodo minim occaecat id
-    pariatur. Nisi enim tempor laborum commodo. Tempor sit quis nostrud eu
-    cupidatat sunt commodo reprehenderit irure deserunt eiusmod ipsum.
-    Exercitation quis commodo cillum eiusmod eiusmod. Do laborum qui proident
-    commodo adipisicing eiusmod id.
-  </Accordion.Content>
-);
-
-const SmallContent = () => (
-  <Accordion.Content>
-    Magna aliquip aliquip fugiat nostrud <a href="#Lorem">Lorem est</a> pariatur
-    veniam officia laboris voluptate officia pariatur.ex anim
-  </Accordion.Content>
-);
-
-const Item = (props) => {
-  const [open, setOpen] = useState(false);
-
-  if (props.defaultOpen) {
-    return (
-      <Accordion.Item
-        defaultOpen={props.defaultOpen}
-        onOpenChange={console.log}
-      >
-        <Accordion.Header>Accordion header text</Accordion.Header>
-        <SmallContent />
-      </Accordion.Item>
-    );
-  }
-
-  return props.controlled ? (
-    <Accordion.Item open={open} onOpenChange={console.log}>
-      <Accordion.Header onClick={() => setOpen(!open)}>
-        Accordion header text
-      </Accordion.Header>
-      <Content />
-    </Accordion.Item>
-  ) : (
-    <Accordion.Item onOpenChange={console.log}>
-      <Accordion.Header>Accordion header text</Accordion.Header>
-      <Content />
-    </Accordion.Item>
-  );
-};
-
-export const Controls: Story = {
-  render: ({ ...props }) => {
-    return (
-      <div style={{ width: 500 }}>
-        <Accordion {...props}>
-          {[...Array(4)].map((_, y) => (
-            <Item key={y} {...props} />
-          ))}
-        </Accordion>
-      </div>
-    );
-  },
-  argTypes: {
-    variant: {
-      options: ["default", "neutral"],
-      control: { type: "select" },
-    },
-    headingSize: {
-      options: ["large", "medium", "small", "xsmall"],
-      control: { type: "select" },
-    },
-    size: {
-      options: ["large", "medium", "small"],
-      control: { type: "select" },
-    },
-  },
-
-  args: {
-    variant: "default",
-    headingSize: "medium",
-    size: "medium",
-    indent: true,
-  },
-};
-
-export const DefaultOpen: Story = {
-  render: () => {
-    return (
-      <div style={{ width: 500 }}>
-        <Accordion>
-          {[...Array(4)].map((_, y) => (
-            <Item key={y} defaultOpen={y === 2} />
-          ))}
-        </Accordion>
-      </div>
-    );
-  },
-};
-
-export const Variants: Story = {
-  render: () => {
-    return (
-      <div style={{ width: 500 }} className="colgap">
-        <h3>Default</h3>
-        <Accordion>
-          {[...Array(2)].map((_, y) => (
-            <Item key={y} defaultOpen />
-          ))}
-        </Accordion>
-        <h3>Neutral</h3>
-        <Accordion variant="neutral">
-          {[...Array(2)].map((_, y) => (
-            <Item key={y} defaultOpen />
-          ))}
-        </Accordion>
-      </div>
-    );
-  },
-};
-
-export const ControlledState: Story = {
-  render: () => {
-    const [open, setOpen] = useState(false);
-    const [open2, setOpen2] = useState(false);
-
-    return (
-      <div style={{ width: 500 }}>
-        <Accordion>
-          <Accordion.Item open={open}>
-            <Accordion.Header onClick={() => setOpen(!open)}>
-              Accordion header text
-            </Accordion.Header>
-            <Content />
-          </Accordion.Item>
-          <Accordion.Item open={open2}>
-            <Accordion.Header onClick={() => setOpen2(!open2)}>
-              Accordion header text
-            </Accordion.Header>
-            <Content />
-          </Accordion.Item>
-        </Accordion>
-      </div>
-    );
-  },
-};
-
-const SingleHeaderAccordion = ({
-  size = "medium",
-  headingSize = "medium",
-}: Partial<AccordionProps>) => {
-  return (
-    <Accordion size={size} headingSize={headingSize}>
-      <Accordion.Item>
-        <Accordion.Header>{`${size} size + ${headingSize} heading`}</Accordion.Header>
-        <Accordion.Content>a</Accordion.Content>
-      </Accordion.Item>
-      <Accordion.Item open>
-        <Accordion.Header>{`${size} size + ${headingSize} heading`}</Accordion.Header>
-        <Accordion.Content>
-          lorem ipsum dolor sit amet, consectetur adipiscing elit.
-        </Accordion.Content>
-      </Accordion.Item>
-    </Accordion>
-  );
-};
-
-const sizes: AccordionProps["size"][] = ["large", "medium", "small"];
-const headingSizes: AccordionProps["headingSize"][] = [
-  "large",
-  "medium",
-  "small",
-  "xsmall",
-];
-
-export const Size: Story = {
-  render: () => (
-    <div style={{ width: 500 }} className="colgap">
-      {sizes.map((size) => (
-        <SingleHeaderAccordion key={size} size={size} />
-      ))}
-    </div>
-  ),
-};
-
-export const HeadingSize: Story = {
-  render: () => (
-    <div style={{ width: 500 }} className="colgap">
-      {headingSizes.map((size) => (
-        <SingleHeaderAccordion key={size} headingSize={size} />
-      ))}
-    </div>
-  ),
-};
-
-export const Indent: Story = {
-  render: () => {
-    return (
-      <div style={{ width: 500 }} className="colgap">
-        <h3>No indent</h3>
-        <Accordion indent>
-          {[...Array(2)].map((_, y) => (
-            <Item key={y} defaultOpen />
-          ))}
-        </Accordion>
-        <h3>Indent</h3>
-        <Accordion indent={false}>
-          {[...Array(2)].map((_, y) => (
-            <Item key={y} defaultOpen />
-          ))}
-        </Accordion>
-      </div>
-    );
-  },
-};
-
-export const Chromatic: Story = {
-  render: (...props) => (
-    <div>
-      <div>
-        <h2>Variants</h2>
-        {Variants.render?.(...props)}
-      </div>
-      <div>
-        <h2>Size</h2>
-        {Size.render?.(...props)}
-      </div>
-      <div>
-        <h2>HeadingSize</h2>
-        {HeadingSize.render?.(...props)}
-      </div>
-      <div>
-        <h2>DefaultOpen</h2>
-        {DefaultOpen.render?.(...props)}
-      </div>
-      <div>
-        <h2>Indent</h2>
-        {Indent.render?.(...props)}
-      </div>
-    </div>
-  ),
-  parameters: {
-    chromatic: { disable: false },
-  },
-};