@navikt/ds-react 0.7.7 → 0.8.0

package/src/help-text/index.ts

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

package/src/help-text/stories/help-text.stories.mdx

@@ -0,0 +1,35 @@
+import { Meta, Canvas } from "@storybook/addon-docs";
+import { HelpText } from "../../index";
+import { Success } from "@navikt/ds-react";
+
+<Meta title="ds-react/help-text/intro" />
+
+# Hvordan ta i bruk HelpText
+
+```jsx
+<HelpText>Exercitation esse minim esse mollit ex magna.</HelpText>
+```
+
+<Canvas>
+  <div style={{ padding: "5rem" }}>
+    <HelpText>Exercitation esse minim esse mollit ex magna.</HelpText>
+  </div>
+</Canvas>
+
+# Egen title
+
+Husk å endre på "title" slik at skjermlesere får tydeligere informasjon
+
+```jsx
+<HelpText title="vis hjelpetekst angående søknad">
+  Exercitation esse minim esse mollit ex magna.
+</HelpText>
+```
+
+<Canvas>
+  <div style={{ padding: "5rem" }}>
+    <HelpText title="vis hjelpetekst angående søknad">
+      Exercitation esse minim esse mollit ex magna.
+    </HelpText>
+  </div>
+</Canvas>

package/src/help-text/stories/help-text.stories.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+import { BodyLong } from "../../typography";
+import { HelpText } from "../index";
+
+export default {
+  title: "ds-react/help-text",
+  component: HelpText,
+};
+
+export const All = () => {
+  return (
+    <>
+      <h1>HelpText</h1>
+      <BodyLong style={{ display: "flex" }}>
+        Quis tempor incididunt sint sit veniam ad dolore cillum ut.
+        <HelpText title="show tooltip">
+          Id ullamco excepteur elit fugiat labore.
+        </HelpText>
+      </BodyLong>
+
+      <BodyLong>
+        Incididunt pariatur laborum dolor sint qui eiusmod exercitation non
+        cupidatat amet.
+      </BodyLong>
+
+      <h2>HelpText defaultOpen</h2>
+      <HelpText title="show tooltip">
+        Id ullamco excepteur elit fugiat labore.
+      </HelpText>
+    </>
+  );
+};

package/src/index.ts

@@ -2,13 +2,12 @@ export * from "./accordion";
 export * from "./accordion-menu";
 export * from "./alert";
 export * from "./button";
-export * from "./card";
-export * from "./content-container";
 export * from "./copy-to-clipboard";
 export * from "./form";
 export * from "./grid";
-export * from "./header";
+export * from "./help-text";
 export * from "./internal-header";
+export * from "./guide-panel";
 export * from "./link";
 export * from "./link-panel";
 export * from "./loader";
@@ -19,3 +18,7 @@ export * from "./speech-bubble";
 export * from "./tag";
 export * from "./typography";
 export * from "./util";
+
+/* Navno spesific packages */
+export * from "./card";
+export * from "./page-header";

package/src/link/Link.tsx

@@ -1,5 +1,6 @@
 import React, { forwardRef } from "react";
 import cl from "classnames";
+import { OverridableComponent } from "..";
 
 export interface LinkProps
   extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
@@ -9,19 +10,11 @@ export interface LinkProps
   children: React.ReactNode;
 }
 
-const Link = forwardRef<HTMLAnchorElement, LinkProps>(
-  ({ children, className, href, ...rest }, ref) => {
-    return (
-      <a
-        ref={ref}
-        href={href}
-        className={cl("navds-link", className)}
-        {...rest}
-      >
-        {children}
-      </a>
-    );
-  }
-);
+const Link: OverridableComponent<
+  LinkProps,
+  HTMLAnchorElement
+> = forwardRef(({ as: Component = "a", className, ...rest }, ref) => (
+  <Component {...rest} ref={ref} className={cl("navds-link", className)} />
+));
 
 export default Link;

package/src/link/stories/link.stories.tsx

@@ -1,7 +1,7 @@
 import React from "react";
-import { Alert } from "../..";
 import { Link } from "..";
 import { Add } from "@navikt/ds-icons";
+import { Alert } from "../..";
 import { ConfirmationPanel } from "../../form";
 export default {
   title: "ds-react/link",

package/src/link-panel/LinkPanel.tsx

@@ -1,40 +1,45 @@
 import React, { forwardRef } from "react";
-import { OverridableComponent } from "../util";
-import { Panel } from "..";
+import { Panel, OverridableComponent } from "..";
 import { Next } from "@navikt/ds-icons";
 import cl from "classnames";
+import { LinkPanelTitle, LinkPanelTitleType } from "./LinkPanelTitle";
+import {
+  LinkPanelDescription,
+  LinkPanelDescriptionType,
+} from "./LinkPanelDescription";
 
-export type LinkPanelType = OverridableComponent<LinkPanelProps>;
+export interface LinkPanelProps
+  extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+  /**
+   * Panel content
+   */
+  children?: React.ReactNode;
+  /**
+   * Toggles border on panel
+   */
+  border?: boolean;
+}
 
-export interface LinkPanelProps {
-  props: {
-    /**
-     * Panel content
-     */
-    children?: React.ReactNode;
-    /**
-     * Toggles border on panel
-     */
-    border?: boolean;
-  } & React.HTMLAttributes<HTMLAnchorElement>;
-  defaultComponent: "a";
+interface LinkPanelComponentType
+  extends OverridableComponent<LinkPanelProps, HTMLAnchorElement> {
+  Title: LinkPanelTitleType;
+  Description: LinkPanelDescriptionType;
 }
 
-const LinkPanel: LinkPanelType = forwardRef(
-  ({ children, component = "a", border = true, className, ...rest }, ref) => {
+const LinkPanelComponent: OverridableComponent<
+  LinkPanelProps,
+  HTMLAnchorElement
+> = forwardRef(
+  ({ children, as = "a", border = true, className, ...rest }, ref) => {
     return (
       <Panel
-        component={component}
+        {...rest}
+        as={as}
         border={border}
         ref={ref}
         className={cl("navds-link-panel", className)}
-        {...rest}
       >
-        {typeof children === "string" ? (
-          <LinkPanelTitle>{children}</LinkPanelTitle>
-        ) : (
-          <span className="navds-link-panel__content">{children}</span>
-        )}
+        <div className="navds-link-panel__content">{children}</div>
         <Next
           className="navds-link-panel__chevron"
           aria-label="arrow-icon pointing right"
@@ -44,26 +49,9 @@ const LinkPanel: LinkPanelType = forwardRef(
   }
 );
 
-interface LinkPanelTitleProps {
-  props: {
-    children: React.ReactNode;
-  } & React.HTMLAttributes<HTMLSpanElement>;
-  defaultComponent: "span";
-}
+const LinkPanel = LinkPanelComponent as LinkPanelComponentType;
 
-export const LinkPanelTitle: OverridableComponent<LinkPanelTitleProps> = forwardRef(
-  ({ className, component: Component = "span", ...rest }, ref) => (
-    <Component
-      ref={ref}
-      className={cl(
-        "navds-link-panel-title",
-        "navds-title",
-        "navds-title--m",
-        className
-      )}
-      {...rest}
-    />
-  )
-);
+LinkPanel.Title = LinkPanelTitle;
+LinkPanel.Description = LinkPanelDescription;
 
 export default LinkPanel;

package/src/link-panel/LinkPanelDescription.tsx

@@ -0,0 +1,23 @@
+import React, { forwardRef } from "react";
+import cl from "classnames";
+import { BodyLong } from "..";
+
+interface LinkPanelDescriptionProps
+  extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+}
+
+export type LinkPanelDescriptionType = React.ForwardRefExoticComponent<
+  LinkPanelDescriptionProps & React.RefAttributes<HTMLDivElement>
+>;
+
+export const LinkPanelDescription: LinkPanelDescriptionType = forwardRef(
+  ({ className, ...rest }, ref) => (
+    <BodyLong
+      {...rest}
+      as="div"
+      ref={ref}
+      className={cl("navds-link-panel__description", className)}
+    />
+  )
+);

package/src/link-panel/LinkPanelTitle.tsx

@@ -0,0 +1,27 @@
+import React, { forwardRef } from "react";
+import cl from "classnames";
+import { OverridableComponent } from "..";
+
+interface LinkPanelTitleProps extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+}
+
+export type LinkPanelTitleType = OverridableComponent<
+  LinkPanelTitleProps,
+  HTMLDivElement
+>;
+
+export const LinkPanelTitle: LinkPanelTitleType = forwardRef(
+  ({ className, as: Component = "div", ...rest }, ref) => (
+    <Component
+      {...rest}
+      ref={ref}
+      className={cl(
+        "navds-link-panel__title",
+        "navds-heading",
+        "navds-heading--medium",
+        className
+      )}
+    />
+  )
+);

package/src/link-panel/stories/link-panel.stories.mdx

@@ -1,5 +1,5 @@
 import { Meta, Canvas } from "@storybook/addon-docs";
-import { LinkPanel, LinkPanelTitle } from "../../index";
+import { LinkPanel } from "../../index";
 import { Success } from "@navikt/ds-react";
 import { Illustration } from "./illustration";
 
@@ -7,74 +7,103 @@ import { Illustration } from "./illustration";
 
 # Hvordan ta i bruk LinkPanel
 
-Komponenten fungerer relativt likt son `nav-frontend-lenkepanel`
+```jsx
+<LinkPanel href="#">
+  <LinkPanel.Title>
+    Consectetur eu duis aliqua eu irure fugiat fugiat eu.
+  </LinkPanel.Title>
+</LinkPanel>
+```
+
+<Canvas>
+  <LinkPanel href="#">
+    <LinkPanel.Title>
+      Consectetur eu duis aliqua eu irure fugiat fugiat eu.
+    </LinkPanel.Title>
+  </LinkPanel>
+</Canvas>
+
+## Med description
 
 ```jsx
-<LinkPanel href="#">Dette er en tekstlenke</LinkPanel>
+<LinkPanel href="#">
+  <LinkPanel.Title>
+    Consectetur eu duis aliqua eu irure fugiat fugiat eu.
+  </LinkPanel.Title>
+  <LinkPanel.Description>
+    Velit mollit do commodo elit Lorem aliqua Lorem.
+  </LinkPanel.Description>
+</LinkPanel>
 ```
 
 <Canvas>
-  <LinkPanel href="#">Dette er en tekstlenke</LinkPanel>
+  <LinkPanel href="#">
+    <LinkPanel.Title>
+      Consectetur eu duis aliqua eu irure fugiat fugiat eu.
+    </LinkPanel.Title>
+    <LinkPanel.Description>
+      Velit mollit do commodo elit Lorem aliqua Lorem.
+    </LinkPanel.Description>
+  </LinkPanel>
 </Canvas>
 
 ## Uten border
 
 ```jsx
 <LinkPanel href="#" border={false}>
-  Dette er en tekstlenke
+  <LinkPanel.Title>
+    Veniam cillum cupidatat aliqua id ipsum culpa ea.
+  </LinkPanel.Title>
 </LinkPanel>
 ```
 
 <Canvas>
   <LinkPanel href="#" border={false}>
-    Dette er en tekstlenke
+    <LinkPanel.Title>
+      Veniam cillum cupidatat aliqua id ipsum culpa ea.
+    </LinkPanel.Title>
   </LinkPanel>
 </Canvas>
 
 ## Custom styling
 
-Kan her ta i bruk `<LinkPanelTitle />` for å få riktig styling på lenke-tittel.
-
 ```jsx
-<LinkPanel href="#" style={{ textDecoration: "none" }}>
+<LinkPanel href="#">
   <div
     style={{
-      padding: "1rem",
       display: "grid",
       gridAutoFlow: "column",
-      gap: "2rem",
+      gap: "var(--navds-spacing-8)",
       alignItems: "center",
     }}
   >
     {Illustration}
     <div>
-      <LinkPanelTitle>Dagpenger</LinkPanelTitle>
-      <p>
-        Du kan få dagpenger når du er arbeidsledig og har mistet inntekten din.
-      </p>
+      <LinkPanel.Title>Consectetur eu duis aliqua</LinkPanel.Title>
+      <LinkPanel.Description>
+        Aliqua id aliquip Lorem esse
+      </LinkPanel.Description>
     </div>
   </div>
 </LinkPanel>
 ```
 
 <Canvas>
-  <LinkPanel href="#" style={{ textDecoration: "none" }}>
+  <LinkPanel href="#">
     <div
       style={{
-        padding: "1rem",
         display: "grid",
         gridAutoFlow: "column",
-        gap: "2rem",
+        gap: "var(--navds-spacing-8)",
         alignItems: "center",
       }}
     >
       {Illustration}
       <div>
-        <LinkPanelTitle>Dagpenger</LinkPanelTitle>
-        <p>
-          Du kan få dagpenger når du er arbeidsledig og har mistet inntekten
-          din.
-        </p>
+        <LinkPanel.Title>Consectetur eu duis aliqua</LinkPanel.Title>
+        <LinkPanel.Description>
+          Aliqua id aliquip Lorem esse
+        </LinkPanel.Description>
       </div>
     </div>
   </LinkPanel>

package/src/link-panel/stories/link-panel.stories.tsx

@@ -1,5 +1,6 @@
 import React from "react";
-import { LinkPanel, LinkPanelTitle } from "../index";
+import styled from "styled-components";
+import { LinkPanel } from "..";
 import { Illustration } from "./illustration";
 
 export default {
@@ -7,38 +8,46 @@ export default {
   component: LinkPanel,
 };
 
-export const All = () => {
-  return (
-    <>
-      <h1>Link</h1>
-      <LinkPanel href="#">Dette er en tekstlenke</LinkPanel>
+const StyledLinkPanel = styled(LinkPanel)`
+  .navds-link-panel__content {
+    display: grid;
+    grid-auto-flow: column;
+    gap: var(--navds-spacing-8);
+    align-items: center;
+  }
+`;
 
-      <h1>No border</h1>
-      <LinkPanel href="#" border={false}>
-        Dette er en tekstlenke
-      </LinkPanel>
+export const All = () => (
+  <>
+    <h1>Link panel</h1>
+    <LinkPanel href="#">
+      <LinkPanel.Title>
+        Consectetur eu duis aliqua eu irure fugiat fugiat eu.
+      </LinkPanel.Title>
+      <LinkPanel.Description>
+        Aliqua id aliquip Lorem esse
+      </LinkPanel.Description>
+    </LinkPanel>
 
-      <h1>Custom styling</h1>
-      <LinkPanel href="#" style={{ textDecoration: "none" }}>
-        <div
-          style={{
-            padding: "1rem",
-            display: "grid",
-            gridAutoFlow: "column",
-            gap: "2rem",
-            alignItems: "center",
-          }}
-        >
-          {Illustration}
-          <div>
-            <LinkPanelTitle>Dagpenger</LinkPanelTitle>
-            <p>
-              Du kan få dagpenger når du er arbeidsledig og har mistet inntekten
-              din.
-            </p>
-          </div>
-        </div>
-      </LinkPanel>
-    </>
-  );
-};
+    <h1>No border</h1>
+    <LinkPanel href="#" border={false}>
+      <LinkPanel.Title>
+        Veniam cillum cupidatat aliqua id ipsum culpa ea.
+      </LinkPanel.Title>
+    </LinkPanel>
+
+    <h1>Custom styling</h1>
+    <StyledLinkPanel href="#">
+      {Illustration}
+      <div>
+        <LinkPanel.Title>
+          Anim pariatur eiusmod deserunt elit cillum
+        </LinkPanel.Title>
+        <LinkPanel.Description>
+          Ex velit id voluptate labore irure ipsum exercitation sunt et id enim
+          magna veniam consequat. id aliquip Lorem esse
+        </LinkPanel.Description>
+      </div>
+    </StyledLinkPanel>
+  </>
+);