@navikt/ds-react 0.7.7 → 0.8.0

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/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/esm/content-container/ContentContainer.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ContentContainer.js","sourceRoot":"","sources":["../../src/content-container/ContentContainer.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAkB,MAAM,OAAO,CAAC;AAC1D,OAAO,EAAE,MAAM,YAAY,CAAC;AAS5B,MAAM,gBAAgB,GAAG,UAAU,CACjC,CAAC,EAAgC,EAAE,GAAG,EAAE,EAAE;QAAzC,EAAE,QAAQ,EAAE,SAAS,OAAW,EAAN,IAAI,cAA9B,yBAAgC,CAAF;IAAY,OAAA,CACzC,2CACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,yBAAyB,EAAE,SAAS,CAAC,IAC/C,IAAI,GAEP,QAAQ,CACL,CACP,CAAA;CAAA,CACF,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/esm/content-container/index.d.ts

@@ -1,2 +0,0 @@
-export { default as ContentContainer } from "./ContentContainer";
-export * from "./ContentContainer";

package/esm/content-container/index.js

@@ -1,3 +0,0 @@
-export { default as ContentContainer } from "./ContentContainer";
-export * from "./ContentContainer";
-//# sourceMappingURL=index.js.map

package/esm/content-container/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/content-container/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACjE,cAAc,oBAAoB,CAAC"}

package/esm/header/Header.d.ts

@@ -1,27 +0,0 @@
-import React, { HTMLAttributes } from "react";
-export interface HeaderProps extends HTMLAttributes<HTMLDivElement> {
-    /**
-     * Header title
-     */
-    children: string;
-    /**
-     * Pictogram placed in header
-     */
-    illustration?: React.ReactNode;
-    /**
-     * Short text placed under title
-     */
-    description?: string;
-    /**
-     * Decides how to align content
-     * @default "left"
-     */
-    variant?: "left" | "center";
-    /**
-     * Predefined theming for header
-     * @default "guide"
-     */
-    theme?: "situation" | "product" | "guide";
-}
-declare const Header: React.ForwardRefExoticComponent<HeaderProps & React.RefAttributes<HTMLDivElement>>;
-export default Header;

package/esm/header/Header.js

@@ -1,23 +0,0 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import React, { forwardRef } from "react";
-import cl from "classnames";
-const Header = forwardRef((_a, ref) => {
-    var { children, className, illustration, description, theme = "guide", variant = "left" } = _a, rest = __rest(_a, ["children", "className", "illustration", "description", "theme", "variant"]);
-    return (React.createElement("div", Object.assign({ ref: ref, className: cl("navds-header", className, `navds-header--${theme}`, `navds-header--${variant}`) }, rest),
-        illustration && (React.createElement("div", { className: "navds-header__illustration" }, illustration)),
-        React.createElement("div", { className: "navds-header__wrapper" },
-            React.createElement("h1", { className: "navds-header__title navds-title navds-title--2xl" }, children),
-            description && (React.createElement("p", { className: "navds-body-short navds-body--s" }, description)))));
-});
-export default Header;
-//# sourceMappingURL=Header.js.map

package/esm/header/Header.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Header.js","sourceRoot":"","sources":["../../src/header/Header.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAkB,MAAM,OAAO,CAAC;AAC1D,OAAO,EAAE,MAAM,YAAY,CAAC;AA2B5B,MAAM,MAAM,GAAG,UAAU,CACvB,CACE,EAQC,EACD,GAAG,EACH,EAAE;QAVF,EACE,QAAQ,EACR,SAAS,EACT,YAAY,EACZ,WAAW,EACX,KAAK,GAAG,OAAO,EACf,OAAO,GAAG,MAAM,OAEjB,EADI,IAAI,cAPT,4EAQC,CADQ;IAIT,OAAO,CACL,2CACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACX,cAAc,EACd,SAAS,EACT,iBAAiB,KAAK,EAAE,EACxB,iBAAiB,OAAO,EAAE,CAC3B,IACG,IAAI;QAEP,YAAY,IAAI,CACf,6BAAK,SAAS,EAAC,4BAA4B,IAAE,YAAY,CAAO,CACjE;QACD,6BAAK,SAAS,EAAC,uBAAuB;YACpC,4BAAI,SAAS,EAAC,kDAAkD,IAC7D,QAAQ,CACN;YACJ,WAAW,IAAI,CACd,2BAAG,SAAS,EAAC,gCAAgC,IAAE,WAAW,CAAK,CAChE,CACG,CACF,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/esm/header/index.d.ts

@@ -1,2 +0,0 @@
-export { default as Header } from "./Header";
-export * from "./Header";

package/esm/header/index.js

@@ -1,3 +0,0 @@
-export { default as Header } from "./Header";
-export * from "./Header";
-//# sourceMappingURL=index.js.map

package/esm/header/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/header/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAC7C,cAAc,UAAU,CAAC"}

package/esm/typography/Title.d.ts

@@ -1,25 +0,0 @@
-import React from "react";
-import { OverridableComponent } from "../util";
-export interface TitleProps {
-    props: {
-        /**
-         * Heading level
-         */
-        level?: 1 | 2 | 3 | 4 | 5 | "1" | "2" | "3" | "4" | "5";
-        /**
-         * Sizes from largest "2xl" to smallest "s"
-         */
-        size: "2xl" | "xl" | "l" | "m" | "s";
-        /**
-         * Paragraph text
-         */
-        children: React.ReactNode;
-        /**
-         * Adds margins to typo
-         */
-        spacing?: boolean;
-    } & React.HTMLAttributes<HTMLHeadingElement>;
-    defaultComponent: "h1";
-}
-declare const Title: OverridableComponent<TitleProps>;
-export default Title;

package/esm/typography/Title.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Title.js","sourceRoot":"","sources":["../../src/typography/Title.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,MAAM,YAAY,CAAC;AAyB5B,MAAM,KAAK,GAAqC,UAAU,CACxD,CACE,EAQC,EACD,GAAG,EACH,EAAE;QAVF,EACE,KAAK,GAAG,CAAC,EACT,IAAI,GAAG,KAAK,EACZ,OAAO,EACP,SAAS,EACT,QAAQ,EACR,SAAS,OAEV,EADI,IAAI,cAPT,kEAQC,CADQ;IAIT,IAAI,UAAU,GAAG,SAAS,aAAT,SAAS,cAAT,SAAS,GAAK,IAAI,KAAK,EAAwB,CAAC;IAEjE,OAAO,CACL,oBAAC,UAAU,oBACL,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE,aAAa,EAAE,gBAAgB,IAAI,EAAE,EAAE;YAC9D,qBAAqB,EAAE,CAAC,CAAC,OAAO;SACjC,CAAC,KAED,QAAQ,CACE,CACd,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/src/content-container/index.ts

@@ -1,2 +0,0 @@
-export { default as ContentContainer } from "./ContentContainer";
-export * from "./ContentContainer";

package/src/content-container/stories/container.stories.mdx

@@ -1,31 +0,0 @@
-import { Meta, Canvas } from "@storybook/addon-docs";
-
-<Meta title="ds-react/content-container/intro" />
-
-# Hvordan ta i bruk ContentContainer
-
-```jsx
-<ContentContainer>
-  <div>innhold...</div>
-</ContentContainer>
-```
-
-## Bruk
-
-Komponenten fungerer som en wrapper rundt innholdet ditt på siden for å
-justere padding og max-width. Dette er all stylingen som blir applied
-
-```css
-.navds-content-container {
-  margin-left: auto;
-  margin-right: auto;
-  max-width: var(--navds-content-container-max-width);
-  padding: var(--navds-content-container-padding-small);
-}
-
-@media (min-width: 448px) {
-  .navds-content-container {
-    padding: var(--navds-content-container-padding-medium-and-larger);
-  }
-}
-```

package/src/content-container/stories/container.stories.tsx

@@ -1,33 +0,0 @@
-import * as React from "react";
-import { ContentContainer } from "../index";
-import { BodyLong } from "../../index";
-import "./style.css";
-
-export default {
-  title: "ds-react/content-container",
-  component: ContentContainer,
-  parameters: {
-    layout: "fullscreen",
-    backgrounds: {
-      default: "NAV gray",
-      values: [
-        {
-          name: "NAV gray",
-          value: "#f1f1f1",
-        },
-        {
-          name: "white",
-          value: "#ffffff",
-        },
-      ],
-    },
-  },
-};
-
-export const All = () => {
-  return (
-    <ContentContainer className={"navds-story-content-container"}>
-      <BodyLong size="m">-- Innhold --</BodyLong>
-    </ContentContainer>
-  );
-};

package/src/content-container/stories/style.css

@@ -1,15 +0,0 @@
-.navds-story-content-container {
-  display: flex;
-  border-radius: 0.25rem;
-  justify-content: center;
-  align-items: center;
-  margin-bottom: 1.5rem;
-  min-height: 10rem;
-  background: repeating-linear-gradient(
-    45deg,
-    #d6d6d6,
-    #d6d6d6 10px,
-    transparent 10px,
-    transparent 20px
-  );
-}

package/src/form/stories/error-uu.stories.tsx

@@ -1,75 +0,0 @@
-import React, { useState } from "react";
-import { Fieldset } from "../index";
-import { Meta } from "@storybook/react/types-6-0";
-import { Button, Checkbox, CheckboxGroup } from "../../index";
-export default {
-  title: "ds-react/form/uu-demo",
-  component: Fieldset,
-} as Meta;
-
-export const Demo1 = () => {
-  const [error, setError] = useState(undefined);
-  const [fieldsetError, setFieldsetError] = useState(undefined);
-  const [groupError, setGroupError] = useState(undefined);
-  const [propagation, setPropagation] = useState(true);
-  return (
-    <div>
-      <h1>Nested-erros + aria-describedby</h1>
-      <div>
-        <Button
-          style={{ marginBottom: "2rem" }}
-          onClick={() => {
-            !!fieldsetError
-              ? setFieldsetError(undefined)
-              : setFieldsetError("Fieldset error message");
-          }}
-        >
-          Toggle fieldset-error
-        </Button>
-        <Button
-          style={{ marginBottom: "2rem" }}
-          onClick={() => {
-            !!groupError
-              ? setGroupError(undefined)
-              : setGroupError("CheckboxGroup error message");
-          }}
-        >
-          Toggle checkboxgroup-error
-        </Button>
-        <Button
-          style={{ marginBottom: "2rem" }}
-          onClick={() => {
-            !!error ? setError(undefined) : setError("Textfield error message");
-          }}
-        >
-          Toggle checkbox-error
-        </Button>
-        <Button
-          style={{ marginBottom: "2rem" }}
-          onClick={() => setPropagation(!propagation)}
-        >
-          Toggle errorPropagation
-        </Button>
-      </div>
-      <Fieldset
-        errorId="FIELDSET-ERROR"
-        legend="Mollit eiusmod"
-        error={fieldsetError}
-      >
-        <CheckboxGroup
-          errorId="GROUP-ERROR"
-          errorPropagation={propagation}
-          error={groupError}
-          legend="checkboxgroup"
-          hideLegend
-        >
-          <Checkbox>Checkbox nr 1</Checkbox>
-          <Checkbox errorId="CHECKBOX-ERROR" error={error}>
-            Checkbox nr 2
-          </Checkbox>
-          <Checkbox>Checkbox nr 3</Checkbox>
-        </CheckboxGroup>
-      </Fieldset>
-    </div>
-  );
-};