@navikt/ds-react 0.7.4 → 0.8.0

package/src/popover/PopoverContent.tsx

@@ -0,0 +1,26 @@
+import React, { forwardRef } from "react";
+import cl from "classnames";
+
+export interface PopoverContentProps
+  extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * Modal.Content content
+   */
+  children: React.ReactNode;
+}
+
+export type PopoverContentType = React.ForwardRefExoticComponent<
+  PopoverContentProps & React.RefAttributes<HTMLDivElement>
+>;
+
+const PopoverContent: PopoverContentType = forwardRef(
+  ({ className, ...rest }, ref) => (
+    <div
+      {...rest}
+      ref={ref}
+      className={cl("navds-popover__content", className)}
+    />
+  )
+);
+
+export default PopoverContent;

package/src/popover/index.ts

@@ -1,2 +1,3 @@
 export { default as Popover } from "./Popover";
 export * from "./Popover";
+export { PopoverContentProps } from "./PopoverContent";

package/src/popover/stories/popover.stories.tsx

@@ -17,17 +17,15 @@ const Template = (props) => {
     <>
       <div
         style={{
-          background: "#eee",
-          border: "1px solid blue",
+          background: "var(--navds-color-gray-60)",
           textAlign: "center",
-          width: "150px",
+          width: "2rem",
+          height: "2rem",
         }}
         ref={(el) => setAnchorEl(el)}
-      >
-        {props.placement}
-      </div>
+      ></div>
       <Popover {...props} anchorEl={anchorEl} onClose={() => {}} open>
-        <div style={{ margin: "1rem" }}>Contents</div>
+        <Popover.Content>{props.placement}</Popover.Content>
       </Popover>
     </>
   );
@@ -40,6 +38,7 @@ export const All = () => {
         display: "flex",
         flexWrap: "wrap",
         margin: "4rem 8rem 4rem 8rem",
+        gap: "4rem",
       }}
     >
       {placements.map((placement) => (
@@ -47,7 +46,6 @@ export const All = () => {
           style={{
             width: "20%",
             height: "100px",
-            margin: "4rem",
           }}
         >
           <Template placement={placement} />

package/src/speech-bubble/Bubble.tsx

@@ -7,7 +7,7 @@ export interface BubbleProps extends HTMLAttributes<HTMLDivElement> {
    */
   children: React.ReactNode;
   /**
-   * User defined toptext, normally "username + date"
+   * User defined toptext, normally "name + date"
    */
   topText?: React.ReactNode;
   /**

package/src/tag/Tag.tsx

@@ -1,33 +1,41 @@
 import React, { forwardRef, HTMLAttributes } from "react";
 import cl from "classnames";
+import { BodyShort, Detail } from "..";
 
 export interface TagProps extends HTMLAttributes<HTMLSpanElement> {
   /**
-   * Component content
+   * Tag
    */
   children: React.ReactNode;
   /**
    * Changes background-color and border-color
+   *
    */
   variant: "warning" | "error" | "info" | "success";
+  /**
+   * Changes sizing of tag
+   * @default "medium"
+   */
+  size?: "medium" | "small";
 }
 
 const Tag = forwardRef<HTMLSpanElement, TagProps>(
-  ({ children, className, variant, ...rest }, ref) => {
+  ({ className, variant, size = "medium", ...rest }, ref) => {
+    const Component = size === "medium" ? BodyShort : Detail;
+
     return (
-      <span
+      <Component
+        {...rest}
         ref={ref}
+        as="span"
+        size={size}
         className={cl(
           "navds-tag",
           className,
-          "navds-detail",
-          "navds-detail--s",
-          `navds-tag--${variant}`
+          `navds-tag--${variant}`,
+          `navds-tag--${size}`
         )}
-        {...rest}
-      >
-        {children}
-      </span>
+      />
     );
   }
 );

package/src/tag/stories/tag.stories.mdx

@@ -30,3 +30,27 @@ Veldig enkel Tag-komponent som er lik `nav-frontend-etiketter`
   <Tag variant="success"> Success tag</Tag>
   <Tag variant="error">Error tag</Tag>
 </Canvas>
+
+## Sizing
+
+```jsx
+<Tag variant="info" size="small"> Info tag</Tag>
+<Tag variant="warning" size="small"> Warning tag</Tag>
+<Tag variant="success" size="small"> Success tag</Tag>
+<Tag variant="error" size="small">Error tag</Tag>
+```
+
+<Canvas>
+  <Tag variant="info" size="small">
+    Info tag
+  </Tag>
+  <Tag variant="warning" size="small">
+    Warning tag
+  </Tag>
+  <Tag variant="success" size="small">
+    Success tag
+  </Tag>
+  <Tag variant="error" size="small">
+    Error tag
+  </Tag>
+</Canvas>

package/src/tag/stories/tag.stories.tsx

@@ -14,6 +14,19 @@ export const All = () => {
       <Tag variant="warning"> Warning tag</Tag>
       <Tag variant="success"> Success tag</Tag>
       <Tag variant="error">Error tag</Tag>
+      <h1>Tag small</h1>
+      <Tag variant="info" size="small">
+        Info tag
+      </Tag>
+      <Tag variant="warning" size="small">
+        Warning tag
+      </Tag>
+      <Tag variant="success" size="small">
+        Success tag
+      </Tag>
+      <Tag variant="error" size="small">
+        Error tag
+      </Tag>
     </div>
   );
 };

package/src/typography/BodyLong.tsx

@@ -1,36 +1,37 @@
 import React, { forwardRef } from "react";
 import cl from "classnames";
-import { OverridableComponent } from "../util";
+import { OverridableComponent } from "..";
 
-export interface BodyLongProps {
-  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 BodyLongProps
+  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 BodyLong: OverridableComponent<BodyLongProps> = forwardRef(
+const BodyLong: OverridableComponent<
+  BodyLongProps,
+  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-body-long", {
-        "navds-body--s": size === "s",
+        "navds-body-long--small": size === "small",
         "navds-typo--spacing": !!spacing,
       })}
     />

package/src/typography/BodyShort.tsx

@@ -1,36 +1,37 @@
 import React, { forwardRef } from "react";
 import cl from "classnames";
-import { OverridableComponent } from "../util/OverridableComponent";
+import { OverridableComponent } from "..";
 
-export interface BodyShortProps {
-  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 BodyShortProps
+  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 BodyShort: OverridableComponent<BodyShortProps> = forwardRef(
+const BodyShort: OverridableComponent<
+  BodyShortProps,
+  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-body-short", {
-        "navds-body--s": size === "s",
+        "navds-body-short--small": size === "small",
         "navds-typo--spacing": !!spacing,
       })}
     />

package/src/typography/Detail.tsx

@@ -1,36 +1,37 @@
 import React, { forwardRef } from "react";
 import cl from "classnames";
-import { OverridableComponent } from "../util";
+import { OverridableComponent } from "..";
 
-export interface DetailProps {
-  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 DetailProps
+  extends React.HTMLAttributes<HTMLParagraphElement> {
+  /**
+   * medium: 14px bold, small: 14px
+   * @default "medium"
+   */
+  size?: "medium" | "small";
+  /**
+   * Paragraph text
+   */
+  children: React.ReactNode;
+  /**
+   * Adds margins to typo
+   */
+  spacing?: boolean;
 }
 
-const Detail: OverridableComponent<DetailProps> = forwardRef(
+const Detail: OverridableComponent<
+  DetailProps,
+  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-detail", {
-        "navds-detail--s": size === "s",
+        "navds-detail--small": size === "small",
         "navds-typo--spacing": !!spacing,
       })}
     />

package/src/typography/Heading.tsx

@@ -0,0 +1,45 @@
+import React, { forwardRef } from "react";
+import cl from "classnames";
+import { OverridableComponent } from "..";
+
+export interface HeadingProps extends React.HTMLAttributes<HTMLHeadingElement> {
+  /**
+   * Heading level
+   * @default "1"
+   */
+  level?: "1" | "2" | "3" | "4" | "5" | "6";
+  /**
+   * Sizes from largest "2xl" to smallest "s"
+   */
+  size: "2xlarge" | "xlarge" | "large" | "medium" | "small" | "xsmall";
+  /**
+   * Heading text
+   */
+  children: React.ReactNode;
+  /**
+   * Adds margins to typo
+   * @default false
+   */
+  spacing?: boolean;
+}
+
+const Heading: OverridableComponent<
+  HeadingProps,
+  HTMLHeadingElement
+> = forwardRef(
+  ({ level = "1", size, spacing = false, className, as, ...rest }, ref) => {
+    let HeadingTag = as ?? (`h${level}` as React.ElementType);
+
+    return (
+      <HeadingTag
+        {...rest}
+        ref={ref}
+        className={cl(className, "navds-heading", `navds-heading--${size}`, {
+          "navds-typo--spacing": spacing,
+        })}
+      />
+    );
+  }
+);
+
+export default Heading;

package/src/typography/Ingress.tsx

@@ -1,31 +1,30 @@
 import React, { forwardRef } from "react";
 import cl from "classnames";
-import { OverridableComponent } from "../util";
+import { OverridableComponent } from "..";
 
-export interface IngressProps {
-  props: {
-    /**
-     * Paragraph text
-     */
-    children: React.ReactNode;
-    /**
-     * Adds margins to typo
-     */
-    spacing?: boolean;
-  } & React.HTMLAttributes<HTMLParagraphElement>;
-  defaultComponent: "p";
+export interface IngressProps
+  extends React.HTMLAttributes<HTMLParagraphElement> {
+  /**
+   * Ingress text
+   */
+  children: React.ReactNode;
+  /**
+   * Adds margins to typo
+   */
+  spacing?: boolean;
 }
 
-const Ingress: OverridableComponent<IngressProps> = forwardRef(
-  ({ className, spacing, component: Component = "p", ...rest }, ref) => (
-    <Component
-      {...rest}
-      ref={ref}
-      className={cl(className, "navds-ingress", {
-        "navds-typo--spacing": !!spacing,
-      })}
-    />
-  )
-);
+const Ingress: OverridableComponent<
+  IngressProps,
+  HTMLParagraphElement
+> = forwardRef(({ className, spacing, as: Component = "p", ...rest }, ref) => (
+  <Component
+    {...rest}
+    ref={ref}
+    className={cl(className, "navds-ingress", {
+      "navds-typo--spacing": !!spacing,
+    })}
+  />
+));
 
 export default Ingress;