@navikt/ds-react 0.7.4 → 0.8.0

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>
-  );
-};

package/src/header/Header.tsx

@@ -1,69 +0,0 @@
-import React, { forwardRef, HTMLAttributes } from "react";
-import cl from "classnames";
-
-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";
-}
-
-const Header = forwardRef<HTMLDivElement, HeaderProps>(
-  (
-    {
-      children,
-      className,
-      illustration,
-      description,
-      theme = "guide",
-      variant = "left",
-      ...rest
-    },
-    ref
-  ) => {
-    return (
-      <div
-        ref={ref}
-        className={cl(
-          "navds-header",
-          className,
-          `navds-header--${theme}`,
-          `navds-header--${variant}`
-        )}
-        {...rest}
-      >
-        {illustration && (
-          <div className="navds-header__illustration">{illustration}</div>
-        )}
-        <div className="navds-header__wrapper">
-          <h1 className="navds-header__title navds-title navds-title--2xl">
-            {children}
-          </h1>
-          {description && (
-            <p className="navds-body-short navds-body--s">{description}</p>
-          )}
-        </div>
-      </div>
-    );
-  }
-);
-
-export default Header;

package/src/header/index.ts

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

package/src/layouts/index.ts

@@ -1,3 +0,0 @@
-export { default as ProductPageLayout } from "./product-page/ProductPageLayout";
-export { default as ProductPagePanel } from "./product-page/ProductPagePanel";
-export { default as ProductPageSection } from "./product-page/ProductPageSection";

package/src/layouts/product-page/ProductPageLayout.tsx

@@ -1,60 +0,0 @@
-import cl from "classnames";
-import React, { Children, forwardRef, HTMLAttributes, useEffect } from "react";
-import { ContentContainer, Title } from "../..";
-
-const cls = (className, columns) =>
-  cl(
-    "navds-layout__container",
-    `navds-layout__container--${columns}-columns`,
-    className
-  );
-
-export interface ProductPageLayoutProps extends HTMLAttributes<HTMLElement> {
-  title: string;
-  children?: React.ReactNode;
-}
-
-const ProductPageLayout = forwardRef<HTMLDivElement, ProductPageLayoutProps>(
-  ({ children, title, className, ...rest }, ref) => {
-    const columns = Children.toArray(children).length;
-
-    useEffect(() => {
-      const layoutBody = document.getElementById("navds-layout-body");
-      layoutBody?.classList.add(`navds-layout__body--${columns}-columns`);
-      document.body.classList.add("navds-layout__body--white");
-      return () => {
-        layoutBody?.classList.remove(`navds-layout__body--${columns}-columns`);
-        document.body.classList.remove("navds-layout__body--white");
-      };
-    }, [columns]);
-
-    return (
-      <div ref={ref}>
-        <div id={"navds-layout-header"} className={"navds-layout__header"}>
-          <ContentContainer>
-            <div className={cls(className, columns)} {...rest}>
-              <div className={cl("navds-layout__header-content")}>
-                <Title
-                  size="2xl"
-                  className={cl("navds-layout__header-title")}
-                  level={1}
-                >
-                  {title}
-                </Title>
-              </div>
-            </div>
-          </ContentContainer>
-        </div>
-        <div id={"navds-layout-body"} className={"navds-layout__body"}>
-          <ContentContainer>
-            <div className={cls(className, columns)} {...rest}>
-              {children}
-            </div>
-          </ContentContainer>
-        </div>
-      </div>
-    );
-  }
-);
-
-export default ProductPageLayout;

package/src/layouts/product-page/ProductPagePanel.tsx

@@ -1,72 +0,0 @@
-import React, { useEffect, useRef } from "react";
-import { forwardRef, ReactNode } from "react";
-import cl from "classnames";
-import { Title, CopyToClipboard } from "../../";
-import { Attachment } from "@navikt/ds-icons";
-
-export interface ProductPagePanelProps
-  extends React.HTMLAttributes<HTMLDivElement> {
-  children: React.ReactNode;
-  anchor: string;
-  title: string;
-  icon?: ReactNode;
-  highlight?: boolean;
-  whiteBackground?: boolean;
-}
-
-const ProductPagePanel = forwardRef<HTMLDivElement, ProductPagePanelProps>(
-  ({ children, className, title, highlight, icon, anchor, ...rest }, ref) => {
-    const copyRef = useRef(null);
-
-    useEffect(() => {
-      const header = document.getElementById("navds-layout-body");
-      header?.classList.add("navds-layout__body--padding");
-    }, []);
-
-    const getLink = () => {
-      const { href, hash } = window.location;
-      const urlWithoutHash = href.replace(hash, "");
-      return `${urlWithoutHash}#${anchor}`;
-    };
-
-    return (
-      <div
-        ref={ref}
-        className={cl(
-          "navds-layout__panel",
-          icon && "navds-layout__panel--icon-margin",
-          highlight && "navds-layout__panel--highlight",
-          className
-        )}
-        {...rest}
-      >
-        <div className="navds-layout__panel-anchor">
-          <div
-            id={anchor}
-            className={cl("navds-layout__panel-anchor--child", {
-              "navds-layout__panel-anchor--child--icon": !!icon,
-            })}
-          />
-        </div>
-        {icon && <div className={"navds-layout__panel-icon"}>{icon}</div>}
-        <Title size={"xl"} className={"navds-layout__panel-title"} level={2}>
-          {title}
-        </Title>
-
-        <CopyToClipboard
-          className="navds-layout__panel-copy"
-          ref={copyRef}
-          text={getLink()}
-          label="Kopierte lenke til panel"
-          icon={<Attachment />}
-        >
-          Kopier lenke
-        </CopyToClipboard>
-
-        <div className={"navds-layout__panel-content"}>{children}</div>
-      </div>
-    );
-  }
-);
-
-export default ProductPagePanel;

package/src/layouts/product-page/ProductPageSection.tsx

@@ -1,46 +0,0 @@
-import React, { forwardRef, HTMLAttributes } from "react";
-import cl from "classnames";
-
-export interface ProductPageSectionProps
-  extends HTMLAttributes<HTMLDivElement> {
-  left?: boolean;
-  right?: boolean;
-  whiteBackground?: boolean;
-  withPadding?: boolean;
-  sticky?: boolean;
-}
-
-const ProductPageSection = forwardRef<HTMLDivElement, ProductPageSectionProps>(
-  (
-    {
-      left,
-      right,
-      children,
-      whiteBackground = true,
-      withPadding = true,
-      sticky,
-      className,
-      ...rest
-    },
-    ref
-  ) => (
-    <div
-      ref={ref}
-      className={cl(
-        "navds-layout__section",
-        left && "navds-layout__section--left",
-        right && "navds-layout__section--right",
-        !left && !right && "navds-layout__section--main",
-        whiteBackground && "navds-layout__section--white",
-        withPadding && "navds-layout__section--padding",
-        sticky && "navds-layout__section--sticky",
-        className
-      )}
-      {...rest}
-    >
-      {children}
-    </div>
-  )
-);
-
-export default ProductPageSection;

package/src/layouts/stories/components/sections/Left.tsx

@@ -1,22 +0,0 @@
-import * as React from "react";
-import { Button, Link } from "../../../..";
-
-export const Left = () => (
-  <ul className={"navds-story-menu"}>
-    <li>
-      <Link href={"#leo-quis"}>Leo quis</Link>
-    </li>
-    <li>
-      <Link href={"#proin-accumsan"}>Proin accumsan</Link>
-    </li>
-    <li>
-      <Link href={"#nulla-pariatur"}>Nulla pariatur?</Link>
-    </li>
-    <li>
-      <Link href={"#maecenas-in-pretium"}>Maecenas in pretium</Link>
-    </li>
-    <li>
-      <Button>Søk ...</Button>
-    </li>
-  </ul>
-);

package/src/layouts/stories/components/sections/Main.tsx

@@ -1,133 +0,0 @@
-import * as React from "react";
-import { Button, Cell, Grid, Title, Link, BodyLong } from "../../../..";
-
-export const Main = ({ title = true }) => (
-  <>
-    <MainOne title={title} />
-    <MainTwo title={title} />
-    <MainThree title={title} />
-  </>
-);
-
-export const MainOne = ({ title = true }) => (
-  <div>
-    {title && (
-      <Title level={1} size={"xl"} id={"leo-quis"}>
-        Leo quis
-      </Title>
-    )}
-    <BodyLong>
-      Sed ullamcorper quam eget lorem volutpat, quis cursus risus fermentum.
-      Quisque varius ornare nulla, ut condimentum sapien dapibus non. Nullam
-      eget interdum nibh
-    </BodyLong>
-  </div>
-);
-
-export const MainTwo = ({ title = true }) => (
-  <div>
-    {title && (
-      <Title level={1} size={"xl"} id={"proin-accumsan"}>
-        Proin accumsan
-      </Title>
-    )}
-    <BodyLong className={"section"}>
-      Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
-      doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo
-      inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
-    </BodyLong>
-    <Grid className={"section"}>
-      <Cell xs={6}>
-        <Link href={"#"}>Ea voluptate</Link>
-      </Cell>
-      <Cell xs={6}>
-        <Link href={"#"}>Quis autem</Link>
-      </Cell>
-    </Grid>
-    <BodyLong className={"section"}>
-      Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet,
-      consectetur, adipisci velit, sed quia non numquam eius modi tempora.
-    </BodyLong>
-    <Title level={2} size={"l"} id={"nulla-pariatur"}>
-      Nulla pariatur?
-    </Title>
-    <BodyLong className={"section"}>
-      Etiam viverra neque sit amet libero dapibus tincidunt. Pellentesque quis
-      imperdiet erat. Morbi sodales bibendum volutpat.
-    </BodyLong>
-    <table className={"section tabell tabell--stripet"}>
-      <thead>
-        <tr>
-          <th>ID</th>
-          <th>Fornavn</th>
-          <th>Etternavn</th>
-          <th>Rolle</th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr>
-          <td>1</td>
-          <td>Jean-Luc</td>
-          <td>Picard</td>
-          <td>Kaptein</td>
-        </tr>
-        <tr>
-          <td>2</td>
-          <td>William</td>
-          <td>Riker</td>
-          <td>Kommandør</td>
-        </tr>
-        <tr>
-          <td>3</td>
-          <td>Geordi</td>
-          <td>La Forge</td>
-          <td>Sjefsingeniør</td>
-        </tr>
-      </tbody>
-    </table>
-    <BodyLong className={"section"}>
-      Curabitur a purus pretium, condimentum magna ac, pellentesque diam. Nulla
-      facilisi. Nullam consequat, dui sed bibendum faucibus, metus mauris
-      commodo tortor.
-    </BodyLong>
-    <Title level={2} size={"l"} id={"luctus-justo"}>
-      Luctus justo
-    </Title>
-    <BodyLong className={"section"}>
-      Nunc eget consectetur felis, id scelerisque sapien. Ut id feugiat nulla,
-      ut cursus sem. In viverra felis vitae aliquet finibus.
-    </BodyLong>
-    <Button>Søk ...</Button>
-  </div>
-);
-
-export const MainThree = ({ title = true }) => (
-  <div>
-    {title && (
-      <Title level={1} size={"xl"} id={"maecenas-in-pretium"}>
-        Maecenas in pretium
-      </Title>
-    )}
-    <BodyLong>
-      Sed ullamcorper quam eget lorem volutpat, quis cursus risus fermentum.
-      Quisque varius ornare nulla, ut condimentum sapien dapibus non. Nullam
-      eget interdum nibh
-    </BodyLong>
-    <BodyLong>
-      Cras tempor eros sed dapibus egestas. Curabitur bibendum quam quis lectus
-      pretium lacinia. Nunc consequat ac augue quis laoreet. Donec porta, erat
-      vitae blandit egestas, arcu metus pharetra nulla, et laoreet risus purus
-      convallis turpis.
-    </BodyLong>
-    <BodyLong>
-      Suspendisse potenti. Praesent at elit interdum, porttitor sem eget,
-      blandit dolor. Nunc eget consectetur felis, id scelerisque sapien. Ut id
-      feugiat nulla, ut cursus sem. In viverra felis vitae aliquet finibus.
-    </BodyLong>
-    <BodyLong>
-      Vivamus id mi lectus. Duis ac augue magna. Aliquam ut euismod dui. Duis
-      consectetur, magna a malesuada tempus, elit urna fermentum arcu, at
-      porttitor magna sapien id enim.
-    </BodyLong>
-  </div>
-);