@navikt/ds-react 0.7.4 → 0.8.0

package/src/typography/Label.tsx

@@ -1,36 +1,36 @@
 import React, { forwardRef } from "react";
 import cl from "classnames";
-import { OverridableComponent } from "../util";
+import { OverridableComponent } from "..";
 
-export interface LabelProps {
-  props: {
-    /**
-     * M: 18px, S: 16px
-     * @default "m"
-     */
-    size?: "m" | "s";
-    /**
-     * Paragraph text
-     */
-    children: React.ReactNode;
-    /**
-     * Adds margins to typo
-     */
-    spacing?: boolean;
-  } & React.HTMLAttributes<HTMLParagraphElement>;
-  defaultComponent: "p";
+export interface LabelProps extends React.HTMLAttributes<HTMLParagraphElement> {
+  /**
+   * medium: 18px, small: 16px
+   * @default "medium"
+   */
+  size?: "medium" | "small";
+  /**
+   * Paragraph text
+   */
+  children: React.ReactNode;
+  /**
+   * Adds margins to typo
+   */
+  spacing?: boolean;
 }
 
-const Label: OverridableComponent<LabelProps> = forwardRef(
+const Label: OverridableComponent<
+  LabelProps,
+  HTMLParagraphElement
+> = forwardRef(
   (
-    { className, size = "m", spacing, component: Component = "p", ...rest },
+    { className, size = "medium", spacing, as: Component = "p", ...rest },
     ref
   ) => (
     <Component
       {...rest}
       ref={ref}
       className={cl(className, "navds-label", {
-        "navds-label--s": size === "s",
+        "navds-label--small": size === "small",
         "navds-typo--spacing": !!spacing,
       })}
     />

package/src/typography/index.ts

@@ -1,4 +1,4 @@
-export { default as Title } from "./Title";
+export { default as Heading } from "./Heading";
 export { default as Ingress } from "./Ingress";
 export { default as BodyLong } from "./BodyLong";
 export { default as BodyShort } from "./BodyShort";

package/src/typography/stories/typography.stories.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Title, BodyShort, BodyLong, Detail, Ingress, Label } from "../index";
+import { Heading, BodyShort, BodyLong, Detail, Ingress, Label } from "../index";
 import "./index.css";
 
 export default {
@@ -7,21 +7,16 @@ export default {
   component: BodyLong,
 };
 
-const lorem = () => (
-  <>
-    Veniam consequat cillum pariatur officia duis aute labore anim labore.
-    Pariatur ad duis do nulla.
-  </>
-);
+const lorem = () => <>Veniam consequat cillum pariatur officia duis</>;
 
 const TitleTemplate = ({ level, size, spacing }) => (
-  <Title spacing={spacing} size={size} level={level}>
+  <Heading spacing={spacing} size={size} level={level}>
     {lorem()}
-  </Title>
+  </Heading>
 );
 
-export const TitleStory = TitleTemplate.bind({});
-TitleStory.args = { level: 1, size: "2xl", spacing: false };
+export const HeadingStory = TitleTemplate.bind({});
+HeadingStory.args = { level: 1, size: "2xlarge", spacing: false };
 
 const IngressTemplate = ({ spacing }) => (
   <Ingress spacing={spacing}>{lorem()}</Ingress>
@@ -37,7 +32,7 @@ const BodyLongTemplate = ({ spacing, size }) => (
 );
 
 export const BodyLongStory = BodyLongTemplate.bind({});
-BodyLongStory.args = { spacing: false, size: "m" };
+BodyLongStory.args = { spacing: false, size: "medium" };
 
 const BodyShortTemplate = ({ spacing, size }) => (
   <BodyShort size={size} spacing={spacing}>
@@ -46,7 +41,7 @@ const BodyShortTemplate = ({ spacing, size }) => (
 );
 
 export const BodyShortStory = BodyShortTemplate.bind({});
-BodyShortStory.args = { spacing: false, size: "m" };
+BodyShortStory.args = { spacing: false, size: "medium" };
 
 const LabelTemplate = ({ spacing, size }) => (
   <Label size={size} spacing={spacing}>
@@ -55,7 +50,7 @@ const LabelTemplate = ({ spacing, size }) => (
 );
 
 export const LabelStory = LabelTemplate.bind({});
-LabelStory.args = { spacing: false, size: "m" };
+LabelStory.args = { spacing: false, size: "medium" };
 
 const DetailTemplate = ({ spacing, size }) => (
   <Detail size={size} spacing={spacing}>
@@ -64,14 +59,14 @@ const DetailTemplate = ({ spacing, size }) => (
 );
 
 export const DetailStory = DetailTemplate.bind({});
-DetailStory.args = { spacing: false, size: "m" };
+DetailStory.args = { spacing: false, size: "medium" };
 
 export const SideInnholdEksempel = () => {
   return (
     <div style={{ maxWidth: 600 }}>
-      <Title level={1} size="2xl" spacing>
-        Title lvl 1 2xl
-      </Title>
+      <Heading level={"1"} size="2xlarge" spacing>
+        Title lvl 1 2xlarge
+      </Heading>
       <BodyLong spacing>
         BodyLong: Aliqua ad et nisi commodo sit excepteur in commodo proident
         proident. Nostrud consectetur dolore eu nostrud aliqua. Adipisicing
@@ -91,9 +86,9 @@ export const SideInnholdEksempel = () => {
         BodyLong: Dolore commodo ad veniam commodo aute voluptate est officia
         sunt proident irure consectetur excepteur.
       </BodyLong>
-      <Title level={2} size="xl" spacing>
-        Title lvl 2 xl
-      </Title>
+      <Heading level={"2"} size="xlarge" spacing>
+        Title lvl 2 xlarge
+      </Heading>
       <Ingress spacing>
         Ingress: Mollit incididunt incididunt officia amet est et non aliqua
         officia nulla et aute aliqua culpa.
@@ -109,7 +104,7 @@ export const SideInnholdEksempel = () => {
         adipisicing ut incididunt laborum laborum. Ipsum non amet laboris quis
         Lorem est laborum qui pariatur ex eu. Eiusmod proident amet esse ex.
       </BodyLong>
-      <BodyLong size="s" spacing>
+      <BodyLong size="small" spacing>
         BodyLong small: Irure dolore laborum amet occaecat ex laboris mollit
         reprehenderit nisi laborum voluptate laborum. Ipsum eu sint laborum
         adipisicing ut incididunt laborum laborum. Ipsum non amet laboris quis
@@ -119,7 +114,7 @@ export const SideInnholdEksempel = () => {
         BodyShort: Id consectetur velit sunt laboris consequat ullamco
         incididunt.
       </BodyShort>
-      <BodyShort size="s" spacing>
+      <BodyShort size="small" spacing>
         BodyShort small: Sunt amet officia sit excepteur sit pariatur sit
         reprehenderit irure ipsum.
       </BodyShort>

package/src/util/OverridableComponent.ts

@@ -1,47 +1,10 @@
-import React from "react";
+export interface OverridableComponent<Component, Element extends HTMLElement> {
+  (props: Component & React.RefAttributes<Element>): ReturnType<React.FC>;
 
-/**
- * A component whose root component can be controlled via a `component` prop.
- */
-export interface OverridableComponent<M extends OverridableTypeMap> {
-  (props: DefaultComponentProps<M>): React.ReactElement | null;
-
-  <C extends React.ElementType>(
+  <As extends React.ElementType>(
     props: {
-      component: C;
-    } & OverrideProps<M, C>
-  ): React.ReactElement | null;
-}
-
-/**
- * Props of the component if `component={Component}` is used.
- */
-// prettier-ignore
-export type OverrideProps<
-  M extends OverridableTypeMap,
-  C extends React.ElementType
-> = (
-  & BaseProps<M>
-  & Omit<React.ComponentPropsWithRef<C>, keyof BaseProps<M>>
-);
-
-/**
- * Props if `component={Component}` is NOT used.
- */
-// prettier-ignore
-export type DefaultComponentProps<
-  M extends OverridableTypeMap
-> = (
-  & BaseProps<M>
-  & Omit<React.ComponentPropsWithRef<M['defaultComponent']>, keyof BaseProps<M>>
-)
-
-/**
- * Props defined on the component.
- */
-export type BaseProps<M extends OverridableTypeMap> = M["props"];
-
-export interface OverridableTypeMap {
-  props: {};
-  defaultComponent: React.ElementType;
+      as: As;
+    } & Component &
+      Omit<React.ComponentPropsWithRef<As>, keyof Component>
+  ): ReturnType<React.FC>;
 }

package/src/util/useId.ts

@@ -9,7 +9,7 @@ const canUseDOM = (): boolean => {
   );
 };
 
-const useClientLayoutEffect = canUseDOM() ? useLayoutEffect : () => {};
+export const useClientLayoutEffect = canUseDOM() ? useLayoutEffect : () => {};
 
 export const useId: (id?: string) => string = (id) => {
   const [newId, setNewId] = useState<string | undefined>(undefined);

package/cjs/accordion-anchor-menu/AccordionAnchorMenuCollapsable.js

@@ -1,4 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var accordion_menu_1 = require("../accordion-menu");
-Object.defineProperty(exports, "AccordionAnchorMenuCollapsable", { enumerable: true, get: function () { return accordion_menu_1.AccordionMenuCollapsable; } });

package/cjs/accordion-anchor-menu/AccordionAnchorMenuItem.js

@@ -1,44 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importStar(require("react"));
-const accordion_menu_1 = require("../accordion-menu");
-const ActiveAnchorStore_1 = require("./ActiveAnchorStore");
-const AccordionAnchorMenuItem = react_1.forwardRef((props, ref) => {
-    const isAnchorActive = useIsAnchorActive(props.href && props.href.split("#")[1]);
-    return (react_1.default.createElement(accordion_menu_1.AccordionMenuItem, Object.assign({}, props, { ref: ref, active: props.active || isAnchorActive })));
-});
-const useIsAnchorActive = (anchor) => {
-    const { activeAnchor, registerAnchor, unregisterAnchor } = ActiveAnchorStore_1.useStore();
-    react_1.useEffect(() => {
-        if (anchor) {
-            const target = document.getElementById(anchor);
-            if (target) {
-                registerAnchor(anchor);
-                return () => {
-                    unregisterAnchor(anchor);
-                };
-            }
-        }
-    }, [anchor, registerAnchor, unregisterAnchor]);
-    return (anchor && activeAnchor === anchor) || false;
-};
-exports.default = AccordionAnchorMenuItem;

package/cjs/accordion-anchor-menu/ActiveAnchorStore.js

@@ -1,68 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useStore = exports.ActiveAnchorProvider = exports.ActiveAnchorContext = void 0;
-const react_1 = __importStar(require("react"));
-exports.ActiveAnchorContext = react_1.createContext({});
-exports.ActiveAnchorProvider = ({ children, }) => {
-    const [anchors, setAnchors] = react_1.useState([]);
-    const [activeAnchor, setActiveAnchor] = react_1.useState();
-    react_1.useEffect(() => {
-        const scrollListener = () => {
-            const offset = 100;
-            const lastPassedAnchor = anchors
-                .map((anchor) => document.getElementById(anchor))
-                .map((element) => ({
-                id: element.id,
-                top: element.getBoundingClientRect().top - offset,
-                scrolledToBottom: window.innerHeight + window.pageYOffset >=
-                    document.body.offsetHeight,
-            }))
-                .filter((element) => element.scrolledToBottom || element.top <= 0)
-                .sort((a, b) => (a.top < b.top ? -1 : 1))
-                .map((anchor) => anchor.id)
-                .pop();
-            // Set active anchor and related url hash
-            if (lastPassedAnchor && activeAnchor !== lastPassedAnchor) {
-                const { href, hash } = window.location;
-                const urlWithoutHash = href.replace(hash, "");
-                const urlWithAnchor = `${urlWithoutHash}#${lastPassedAnchor}`;
-                const title = document.title;
-                window.history.replaceState(window.history.state, title, urlWithAnchor);
-                setActiveAnchor(lastPassedAnchor);
-            }
-        };
-        window.addEventListener("scroll", scrollListener);
-        return () => {
-            window.removeEventListener("scroll", scrollListener);
-        };
-    }, [anchors, activeAnchor]);
-    return (react_1.default.createElement(exports.ActiveAnchorContext.Provider, { value: {
-            activeAnchor,
-            registerAnchor: react_1.useCallback((anchor) => {
-                setAnchors((anchors) => [...anchors, anchor]);
-            }, []),
-            unregisterAnchor: react_1.useCallback((anchor) => {
-                setAnchors((anchors) => anchors.filter((a) => a !== anchor));
-            }, []),
-        } }, children));
-};
-exports.useStore = () => react_1.useContext(exports.ActiveAnchorContext);

package/cjs/accordion-anchor-menu/index.js

@@ -1,8 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var AccordionAnchorMenu_1 = require("./AccordionAnchorMenu");
-Object.defineProperty(exports, "AccordionAnchorMenu", { enumerable: true, get: function () { return AccordionAnchorMenu_1.default; } });
-var AccordionAnchorMenuCollapsable_1 = require("./AccordionAnchorMenuCollapsable");
-Object.defineProperty(exports, "AccordionAnchorMenuCollapsable", { enumerable: true, get: function () { return AccordionAnchorMenuCollapsable_1.AccordionAnchorMenuCollapsable; } });
-var AccordionAnchorMenuItem_1 = require("./AccordionAnchorMenuItem");
-Object.defineProperty(exports, "AccordionAnchorMenuItem", { enumerable: true, get: function () { return AccordionAnchorMenuItem_1.default; } });

package/cjs/accordion-anchor-menu/package.json

@@ -1,6 +0,0 @@
-{
-  "sideEffects": false,
-  "main": "./index.js",
-  "module": "../../esm/accordion-anchor-menu/index.js",
-  "types": "../../esm/accordion-anchor-menu/index.d.ts"
-}

package/cjs/content-container/index.js

@@ -1,15 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !exports.hasOwnProperty(p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var ContentContainer_1 = require("./ContentContainer");
-Object.defineProperty(exports, "ContentContainer", { enumerable: true, get: function () { return ContentContainer_1.default; } });
-__exportStar(require("./ContentContainer"), exports);

package/cjs/content-container/package.json

@@ -1,6 +0,0 @@
-{
-  "sideEffects": false,
-  "main": "./index.js",
-  "module": "../../esm/content-container/index.js",
-  "types": "../../esm/content-container/index.d.ts"
-}

package/cjs/header/index.js

@@ -1,15 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !exports.hasOwnProperty(p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var Header_1 = require("./Header");
-Object.defineProperty(exports, "Header", { enumerable: true, get: function () { return Header_1.default; } });
-__exportStar(require("./Header"), exports);

package/cjs/header/package.json

@@ -1,6 +0,0 @@
-{
-  "sideEffects": false,
-  "main": "./index.js",
-  "module": "../../esm/header/index.js",
-  "types": "../../esm/header/index.d.ts"
-}

package/cjs/layouts/index.js

@@ -1,8 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var ProductPageLayout_1 = require("./product-page/ProductPageLayout");
-Object.defineProperty(exports, "ProductPageLayout", { enumerable: true, get: function () { return ProductPageLayout_1.default; } });
-var ProductPagePanel_1 = require("./product-page/ProductPagePanel");
-Object.defineProperty(exports, "ProductPagePanel", { enumerable: true, get: function () { return ProductPagePanel_1.default; } });
-var ProductPageSection_1 = require("./product-page/ProductPageSection");
-Object.defineProperty(exports, "ProductPageSection", { enumerable: true, get: function () { return ProductPageSection_1.default; } });

package/cjs/layouts/package.json

@@ -1,6 +0,0 @@
-{
-  "sideEffects": false,
-  "main": "./index.js",
-  "module": "../../esm/layouts/index.js",
-  "types": "../../esm/layouts/index.d.ts"
-}