@navikt/ds-react 0.7.4 → 0.8.0

package/esm/layouts/product-page/ProductPagePanel.d.ts

@@ -1,12 +0,0 @@
-import React from "react";
-import { ReactNode } from "react";
-export interface ProductPagePanelProps extends React.HTMLAttributes<HTMLDivElement> {
-    children: React.ReactNode;
-    anchor: string;
-    title: string;
-    icon?: ReactNode;
-    highlight?: boolean;
-    whiteBackground?: boolean;
-}
-declare const ProductPagePanel: React.ForwardRefExoticComponent<ProductPagePanelProps & React.RefAttributes<HTMLDivElement>>;
-export default ProductPagePanel;

package/esm/layouts/product-page/ProductPagePanel.js

@@ -1,40 +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, { useEffect, useRef } from "react";
-import { forwardRef } from "react";
-import cl from "classnames";
-import { Title, CopyToClipboard } from "../../";
-import { Attachment } from "@navikt/ds-icons";
-const ProductPagePanel = forwardRef((_a, ref) => {
-    var { children, className, title, highlight, icon, anchor } = _a, rest = __rest(_a, ["children", "className", "title", "highlight", "icon", "anchor"]);
-    const copyRef = useRef(null);
-    useEffect(() => {
-        const header = document.getElementById("navds-layout-body");
-        header === null || header === void 0 ? void 0 : header.classList.add("navds-layout__body--padding");
-    }, []);
-    const getLink = () => {
-        const { href, hash } = window.location;
-        const urlWithoutHash = href.replace(hash, "");
-        return `${urlWithoutHash}#${anchor}`;
-    };
-    return (React.createElement("div", Object.assign({ ref: ref, className: cl("navds-layout__panel", icon && "navds-layout__panel--icon-margin", highlight && "navds-layout__panel--highlight", className) }, rest),
-        React.createElement("div", { className: "navds-layout__panel-anchor" },
-            React.createElement("div", { id: anchor, className: cl("navds-layout__panel-anchor--child", {
-                    "navds-layout__panel-anchor--child--icon": !!icon,
-                }) })),
-        icon && React.createElement("div", { className: "navds-layout__panel-icon" }, icon),
-        React.createElement(Title, { size: "xl", className: "navds-layout__panel-title", level: 2 }, title),
-        React.createElement(CopyToClipboard, { className: "navds-layout__panel-copy", ref: copyRef, text: getLink(), label: "Kopierte lenke til panel", icon: React.createElement(Attachment, null) }, "Kopier lenke"),
-        React.createElement("div", { className: "navds-layout__panel-content" }, children)));
-});
-export default ProductPagePanel;
-//# sourceMappingURL=ProductPagePanel.js.map

package/esm/layouts/product-page/ProductPagePanel.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ProductPagePanel.js","sourceRoot":"","sources":["../../../src/layouts/product-page/ProductPagePanel.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,EAAE,UAAU,EAAa,MAAM,OAAO,CAAC;AAC9C,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,EAAE,KAAK,EAAE,eAAe,EAAE,MAAM,QAAQ,CAAC;AAChD,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAY9C,MAAM,gBAAgB,GAAG,UAAU,CACjC,CAAC,EAAgE,EAAE,GAAG,EAAE,EAAE;QAAzE,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,OAAW,EAAN,IAAI,cAA9D,iEAAgE,CAAF;IAC7D,MAAM,OAAO,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;IAE7B,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,MAAM,GAAG,QAAQ,CAAC,cAAc,CAAC,mBAAmB,CAAC,CAAC;QAC5D,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,SAAS,CAAC,GAAG,CAAC,6BAA6B,EAAE;IACvD,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,OAAO,GAAG,GAAG,EAAE;QACnB,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,MAAM,CAAC,QAAQ,CAAC;QACvC,MAAM,cAAc,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;QAC9C,OAAO,GAAG,cAAc,IAAI,MAAM,EAAE,CAAC;IACvC,CAAC,CAAC;IAEF,OAAO,CACL,2CACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACX,qBAAqB,EACrB,IAAI,IAAI,kCAAkC,EAC1C,SAAS,IAAI,gCAAgC,EAC7C,SAAS,CACV,IACG,IAAI;QAER,6BAAK,SAAS,EAAC,4BAA4B;YACzC,6BACE,EAAE,EAAE,MAAM,EACV,SAAS,EAAE,EAAE,CAAC,mCAAmC,EAAE;oBACjD,yCAAyC,EAAE,CAAC,CAAC,IAAI;iBAClD,CAAC,GACF,CACE;QACL,IAAI,IAAI,6BAAK,SAAS,EAAE,0BAA0B,IAAG,IAAI,CAAO;QACjE,oBAAC,KAAK,IAAC,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,2BAA2B,EAAE,KAAK,EAAE,CAAC,IAChE,KAAK,CACA;QAER,oBAAC,eAAe,IACd,SAAS,EAAC,0BAA0B,EACpC,GAAG,EAAE,OAAO,EACZ,IAAI,EAAE,OAAO,EAAE,EACf,KAAK,EAAC,0BAA0B,EAChC,IAAI,EAAE,oBAAC,UAAU,OAAG,mBAGJ;QAElB,6BAAK,SAAS,EAAE,6BAA6B,IAAG,QAAQ,CAAO,CAC3D,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/esm/layouts/product-page/ProductPageSection.d.ts

@@ -1,10 +0,0 @@
-import React, { HTMLAttributes } from "react";
-export interface ProductPageSectionProps extends HTMLAttributes<HTMLDivElement> {
-    left?: boolean;
-    right?: boolean;
-    whiteBackground?: boolean;
-    withPadding?: boolean;
-    sticky?: boolean;
-}
-declare const ProductPageSection: React.ForwardRefExoticComponent<ProductPageSectionProps & React.RefAttributes<HTMLDivElement>>;
-export default ProductPageSection;

package/esm/layouts/product-page/ProductPageSection.js

@@ -1,19 +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 ProductPageSection = forwardRef((_a, ref) => {
-    var { left, right, children, whiteBackground = true, withPadding = true, sticky, className } = _a, rest = __rest(_a, ["left", "right", "children", "whiteBackground", "withPadding", "sticky", "className"]);
-    return (React.createElement("div", Object.assign({ 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));
-});
-export default ProductPageSection;
-//# sourceMappingURL=ProductPageSection.js.map

package/esm/layouts/product-page/ProductPageSection.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ProductPageSection.js","sourceRoot":"","sources":["../../../src/layouts/product-page/ProductPageSection.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAkB,MAAM,OAAO,CAAC;AAC1D,OAAO,EAAE,MAAM,YAAY,CAAC;AAW5B,MAAM,kBAAkB,GAAG,UAAU,CACnC,CACE,EASC,EACD,GAAG,EACH,EAAE;QAXF,EACE,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,eAAe,GAAG,IAAI,EACtB,WAAW,GAAG,IAAI,EAClB,MAAM,EACN,SAAS,OAEV,EADI,IAAI,cART,sFASC,CADQ;IAGN,OAAA,CACH,2CACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACX,uBAAuB,EACvB,IAAI,IAAI,6BAA6B,EACrC,KAAK,IAAI,8BAA8B,EACvC,CAAC,IAAI,IAAI,CAAC,KAAK,IAAI,6BAA6B,EAChD,eAAe,IAAI,8BAA8B,EACjD,WAAW,IAAI,gCAAgC,EAC/C,MAAM,IAAI,+BAA+B,EACzC,SAAS,CACV,IACG,IAAI,GAEP,QAAQ,CACL,CACP,CAAA;CAAA,CACF,CAAC;AAEF,eAAe,kBAAkB,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/accordion-anchor-menu/AccordionAnchorMenu.tsx

@@ -1,35 +0,0 @@
-import React, { forwardRef, HTMLAttributes } from "react";
-import { AccordionMenu as BaseAccordionMenu } from "../accordion-menu";
-import { Title } from "..";
-import { ActiveAnchorProvider } from "./ActiveAnchorStore";
-import cl from "classnames";
-
-export interface AccordionAnchorMenuProps
-  extends HTMLAttributes<HTMLDivElement> {
-  title?: string;
-  children: React.ReactNode;
-}
-
-const AccordionAnchorMenu = forwardRef<
-  HTMLDivElement,
-  AccordionAnchorMenuProps
->(({ children, title, className, ...rest }, ref) => (
-  <div
-    className={cl("navds-accordion-anchor-menu", className)}
-    ref={ref}
-    {...rest}
-  >
-    {title && (
-      <Title level={2} size="m" className="navds-accordion-anchor-menu__title">
-        {title}
-      </Title>
-    )}
-    <ActiveAnchorProvider>
-      <BaseAccordionMenu aria-label={title || "Meny"}>
-        {children}
-      </BaseAccordionMenu>
-    </ActiveAnchorProvider>
-  </div>
-));
-
-export default AccordionAnchorMenu;

package/src/accordion-anchor-menu/AccordionAnchorMenuCollapsable.tsx

@@ -1 +0,0 @@
-export { AccordionMenuCollapsable as AccordionAnchorMenuCollapsable } from "../accordion-menu";

package/src/accordion-anchor-menu/AccordionAnchorMenuItem.tsx

@@ -1,39 +0,0 @@
-import React, { forwardRef, useEffect } from "react";
-import { AccordionMenuItem, AccordionMenuItemType } from "../accordion-menu";
-import { useStore } from "./ActiveAnchorStore";
-
-const AccordionAnchorMenuItem: AccordionMenuItemType = forwardRef(
-  (props, ref) => {
-    const isAnchorActive = useIsAnchorActive(
-      props.href && props.href.split("#")[1]
-    );
-
-    return (
-      <AccordionMenuItem
-        {...props}
-        ref={ref}
-        active={props.active || isAnchorActive}
-      />
-    );
-  }
-);
-
-const useIsAnchorActive = (anchor: string | undefined) => {
-  const { activeAnchor, registerAnchor, unregisterAnchor } = useStore();
-
-  useEffect(() => {
-    if (anchor) {
-      const target = document.getElementById(anchor);
-      if (target) {
-        registerAnchor(anchor);
-        return () => {
-          unregisterAnchor(anchor);
-        };
-      }
-    }
-  }, [anchor, registerAnchor, unregisterAnchor]);
-
-  return (anchor && activeAnchor === anchor) || false;
-};
-
-export default AccordionAnchorMenuItem;

package/src/accordion-anchor-menu/ActiveAnchorStore.tsx

@@ -1,73 +0,0 @@
-import React, {
-  createContext,
-  useCallback,
-  useContext,
-  useState,
-  useEffect,
-} from "react";
-
-export interface ActiveAnchorStore {
-  activeAnchor?: string;
-  registerAnchor: (anchor: string) => void;
-  unregisterAnchor: (anchor: string) => void;
-}
-
-export const ActiveAnchorContext = createContext({} as ActiveAnchorStore);
-export const ActiveAnchorProvider = ({
-  children,
-}: {
-  children: React.ReactNode;
-}) => {
-  const [anchors, setAnchors] = useState<string[]>([]);
-  const [activeAnchor, setActiveAnchor] = useState<string>();
-
-  useEffect(() => {
-    const scrollListener = () => {
-      const offset = 100;
-      const lastPassedAnchor = anchors
-        .map((anchor) => document.getElementById(anchor) as HTMLElement)
-        .map((element: HTMLElement) => ({
-          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 (
-    <ActiveAnchorContext.Provider
-      value={{
-        activeAnchor,
-        registerAnchor: useCallback((anchor) => {
-          setAnchors((anchors) => [...anchors, anchor]);
-        }, []),
-        unregisterAnchor: useCallback((anchor) => {
-          setAnchors((anchors) => anchors.filter((a) => a !== anchor));
-        }, []),
-      }}
-    >
-      {children}
-    </ActiveAnchorContext.Provider>
-  );
-};
-export const useStore = () => useContext(ActiveAnchorContext);

package/src/accordion-anchor-menu/index.ts

@@ -1,3 +0,0 @@
-export { default as AccordionAnchorMenu } from "./AccordionAnchorMenu";
-export { AccordionAnchorMenuCollapsable } from "./AccordionAnchorMenuCollapsable";
-export { default as AccordionAnchorMenuItem } from "./AccordionAnchorMenuItem";

package/src/accordion-anchor-menu/stories/menu.stories.mdx

@@ -1,14 +0,0 @@
-import { Meta, Canvas } from "@storybook/addon-docs";
-import { AccordionAnchorMenu } from "../../index";
-import { Success } from "@navikt/ds-react";
-
-<Meta title="ds-react/accordion-anchor-menu/intro" />
-
-# AccordionAnchorMenu
-
-NOTE: Komponenten er ikke oppdatert og er veldig buggy. Ville ungått bruk av denne om mulig og bare brukt
-vanlig `AccordionMenu`. Hvorvidt vi kommer til å oppdatere denne og ta den med i 1.0 er usikkert.
-
-`AccordionAnchorMenu` er en meny-komponent som implementerer `AccordionMenu` med context
-for lytting på aktiv anchor/heading. Dette vil si at active-state settes automatisk.
-når man scroller forbi den relevante linken på siden.

package/src/accordion-anchor-menu/stories/menu.stories.tsx

@@ -1,125 +0,0 @@
-import * as React from "react";
-import {
-  AccordionAnchorMenu as Menu,
-  AccordionAnchorMenuCollapsable as Collapsable,
-  AccordionAnchorMenuItem as Item,
-} from "../index";
-import {
-  ProductPageLayout as Layout,
-  ProductPageSection as Section,
-  ProductPagePanel as Panel,
-} from "../../index";
-import { Right } from "../../layouts/stories/components/sections/Right";
-import { LightBulb, Telephone } from "@navikt/ds-icons";
-import { MainOne } from "../../layouts/stories/components/sections/Main";
-import { MainTwo } from "../../layouts/stories/components/sections/Main";
-import { MainThree } from "../../layouts/stories/components/sections/Main";
-import { Link, HashRouter as Router } from "react-router-dom";
-
-export default {
-  title: "ds-react/accordion-anchor-menu",
-  component: { Menu },
-  parameters: {
-    layout: "fullscreen",
-  },
-};
-
-export const All = () => (
-  <Layout title={"Nunc et lorem"}>
-    <Section left sticky withPadding={false}>
-      <Menu title={"Minima"}>
-        <Item href={"#leo-quis"}>Leo quis</Item>
-        <Collapsable title={"Proin accumsan"}>
-          <Item href={"#nulla-pariatur"}>Nulla pariatur</Item>
-          <Item href={"#luctus-justo"}>Luctus justo</Item>
-        </Collapsable>
-        <Item href={"#maecenas-in-pretium"}>Maecenas in pretium</Item>
-      </Menu>
-    </Section>
-    <Section whiteBackground={false} withPadding={false}>
-      <Panel
-        title={"Leo quis"}
-        anchor={"leo-quis"}
-        highlight={true}
-        icon={<LightBulb />}
-      >
-        <MainOne title={false} />
-      </Panel>
-      <Panel title={"Proin accumsan"} anchor={"proin-accumsan"}>
-        <MainTwo title={false} />
-      </Panel>
-      <Panel
-        title={"Maecenas in pretium"}
-        anchor={"maecenas-in-pretium"}
-        icon={<Telephone />}
-      >
-        <MainThree title={false} />
-      </Panel>
-    </Section>
-    <Section right sticky>
-      <Right />
-    </Section>
-  </Layout>
-);
-
-export const ReactRouter = () => (
-  <Layout title={"Nunc et lorem"}>
-    <Section left sticky withPadding={false}>
-      <Menu>
-        <Item component={Link} to="/link1">
-          Leo quis
-        </Item>
-        <Collapsable title={"Proin accumsan"}>
-          <Item component={Link} to="/link2">
-            Nulla pariatur
-          </Item>
-          <Item component={Link} to="/link3">
-            Luctus justo
-          </Item>
-        </Collapsable>
-        <Collapsable title={"Sint cupidatat"}>
-          <Item component={Link} to="/link4">
-            Nulla pariatur
-          </Item>
-          <Item component={Link} to="/link5">
-            Luctus justo
-          </Item>
-        </Collapsable>
-        <Item component={Link} to="/link6">
-          Maecenas in pretium
-        </Item>
-      </Menu>
-    </Section>
-    <Section whiteBackground={false} withPadding={false}>
-      <Panel
-        title={"Leo quis"}
-        anchor={"leo-quis"}
-        highlight={true}
-        icon={<LightBulb />}
-      >
-        <MainOne title={false} />
-      </Panel>
-      <Panel title={"Proin accumsan"} anchor={"proin-accumsan"}>
-        <MainTwo title={false} />
-      </Panel>
-      <Panel
-        title={"Maecenas in pretium"}
-        anchor={"maecenas-in-pretium"}
-        icon={<Telephone />}
-      >
-        <MainThree title={false} />
-      </Panel>
-    </Section>
-    <Section right sticky>
-      <Right />
-    </Section>
-  </Layout>
-);
-
-ReactRouter.decorators = [
-  (Story) => (
-    <Router>
-      <Story />
-    </Router>
-  ),
-];

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