@navikt/ds-react 4.1.6 → 4.2.0

package/esm/timeline/Pin.js.map

@@ -1 +1 @@
-{"version":3,"file":"Pin.js","sourceRoot":"","sources":["../../src/timeline/Pin.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Pin.js","sourceRoot":"","sources":["../../src/timeline/Pin.tsx"],"names":[],"mappings":"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"}

package/esm/timeline/TimelineRow.js

@@ -35,7 +35,7 @@ export const TimelineRow = forwardRef((_a, ref) => {
         React.createElement("div", { className: cl("navds-timeline__row", {
                 "navds-timeline__row--active": active,
             }) },
-            React.createElement("ol", Object.assign({}, rest, { ref: ref, "aria-label": periods.length === 0
+            React.createElement("ol", Object.assign({}, rest, { tabIndex: -1, ref: ref, "aria-label": periods.length === 0
                     ? "Ingen perioder"
                     : `${format(earliest.start, "dd.MM.yyyy")} til ${format(latest.end, "dd.MM.yyyy")}`, className: cl("navds-timeline__row-periods", className), onKeyDown: (e) => {
                     if (e.key === "ArrowDown" || e.key === "ArrowUp") {

package/esm/timeline/TimelineRow.js.map

@@ -1 +1 @@
-{"version":3,"file":"TimelineRow.js","sourceRoot":"","sources":["../../src/timeline/TimelineRow.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"TimelineRow.js","sourceRoot":"","sources":["../../src/timeline/TimelineRow.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AACpD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACtD,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,MAAM,MAAM,UAAU,CAAC;AAK9B,OAAO,EAAE,MAAM,MAAM,CAAC;AA0BtB,MAAM,CAAC,MAAM,WAAW,GAAG,UAAU,CACnC,CAAC,EAAsD,EAAE,GAAG,EAAE,EAAE;QAA/D,EAAE,KAAK,EAAE,SAAS,EAAE,UAAU,GAAG,IAAI,EAAE,IAAI,OAAW,EAAN,IAAI,cAApD,4CAAsD,CAAF;IACnD,MAAM,EAAE,OAAO,EAAE,EAAE,EAAE,MAAM,EAAE,GAAG,aAAa,EAAE,CAAC;IAChD,MAAM,EAAE,YAAY,EAAE,GAAG,kBAAkB,EAAE,CAAC;IAE9C,MAAM,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;QACrC,OAAO,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAC/B,CAAC,EAAE,EAAsB,CAAC,CAAC;IAE3B,MAAM,QAAQ,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;QACvC,OAAO,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAC/B,CAAC,EAAE,EAAsB,CAAC,CAAC;IAE3B,MAAM,cAAc,GAAG,OAAO,CAAC,IAAI,CACjC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,IAAI,CAAC,CAAC,CAAC,CAAC,cAAc,CAC1C,CAAC;IAEF,OAAO,CACL;QACG,KAAK,IAAI,CACR,oBAAC,SAAS,IACR,EAAE,EAAE,UAAU,EACd,EAAE,EAAE,gBAAgB,EAAE,EAAE,EACxB,SAAS,EAAC,2BAA2B,EACrC,IAAI,EAAC,OAAO;YAEX,IAAI;YACJ,KAAK,CACI,CACb;QACD,6BACE,SAAS,EAAE,EAAE,CAAC,qBAAqB,EAAE;gBACnC,6BAA6B,EAAE,MAAM;aACtC,CAAC;YAEF,4CACM,IAAI,IACR,QAAQ,EAAE,CAAC,CAAC,EACZ,GAAG,EAAE,GAAG,gBAEN,OAAO,CAAC,MAAM,KAAK,CAAC;oBAClB,CAAC,CAAC,gBAAgB;oBAClB,CAAC,CAAC,GAAG,MAAM,CAAC,QAAQ,CAAC,KAAK,EAAE,YAAY,CAAC,QAAQ,MAAM,CACnD,MAAM,CAAC,GAAG,EACV,YAAY,CACb,EAAE,EAET,SAAS,EAAE,EAAE,CAAC,6BAA6B,EAAE,SAAS,CAAC,EACvD,SAAS,EAAE,CAAC,CAAC,EAAE,EAAE;oBACf,IAAI,CAAC,CAAC,GAAG,KAAK,WAAW,IAAI,CAAC,CAAC,GAAG,KAAK,SAAS,EAAE;wBAChD,CAAC,CAAC,cAAc,EAAE,CAAC;wBACnB,YAAY,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC;qBACrB;gBACH,CAAC,KAEA,OAAO;gBACN,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE;oBACrB,OAAO,CACL,4BAAI,GAAG,EAAE,UAAU,MAAM,CAAC,EAAE,EAAE;wBAC5B,oBAAC,aAAa,CAAC,QAAQ,IACrB,KAAK,EAAE;gCACL,QAAQ,EAAE,MAAM,CAAC,EAAE;gCACnB,UAAU,EAAE,CAAA,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAE,EAAE,MAAK,MAAM,CAAC,EAAE;gCAC5C,SAAS,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,SAAS;6BAC7B;4BAED,oBAAC,MAAM,IACL,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,GAAG,EAAE,MAAM,CAAC,YAAY,EACxB,IAAI,EAAE,MAAM,CAAC,IAAI,EACjB,GAAG,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,GAAG,GAChB,CACqB,CACtB,CACN,CAAC;gBACJ,CAAC,CAAC,CACD,CACD,CACL,CACJ,CAAC;AACJ,CAAC,CACiB,CAAC;AAErB,WAAW,CAAC,aAAa,GAAG,KAAK,CAAC;AAElC,eAAe,WAAW,CAAC"}

package/esm/timeline/period/ClickablePeriod.js

@@ -1,7 +1,7 @@
 import { autoUpdate, arrow as flArrow, flip, offset, safePolygon, shift, useDismiss, useFloating, useFocus, useHover, useInteractions, } from "@floating-ui/react";
-import { useEventListener, mergeRefs } from "../../util";
 import cl from "clsx";
-import React, { useCallback, useMemo, useRef, useState } from "react";
+import React, { useMemo, useRef, useState } from "react";
+import { mergeRefs } from "../../util";
 import { usePeriodContext } from "../hooks/usePeriodContext";
 import { useRowContext } from "../hooks/useRowContext";
 import { useTimelineContext } from "../hooks/useTimelineContext";
@@ -34,15 +34,6 @@ const ClickablePeriod = React.memo(({ onSelectPeriod, start, end, status, croppe
         useDismiss(context),
     ]);
     const mergedRef = useMemo(() => mergeRefs([refs.setReference, periodRef]), [periodRef, refs.setReference]);
-    useEventListener("focusin", useCallback((e) => {
-        var _a;
-        if (![
-            refs.reference.current,
-            (_a = refs === null || refs === void 0 ? void 0 : refs.floating) === null || _a === void 0 ? void 0 : _a.current,
-        ].some((element) => element === null || element === void 0 ? void 0 : element.contains(e.target))) {
-            open && setOpen(false);
-        }
-    }, [open, refs.reference, refs === null || refs === void 0 ? void 0 : refs.floating]));
     const staticSide = {
         top: "bottom",
         right: "left",
@@ -86,6 +77,9 @@ const ClickablePeriod = React.memo(({ onSelectPeriod, start, end, status, croppe
             React.createElement("span", { className: "navds-timeline__period--inner" }, icon)),
         children && (React.createElement("div", Object.assign({ className: "navds-timeline__popover", "data-placement": placement, "aria-hidden": !open, ref: refs.setFloating }, getFloatingProps({
             tabIndex: -1,
+            onBlur: (e) => e.target.previousSibling !== document.activeElement &&
+                open &&
+                setOpen(false),
         }), { style: Object.assign(Object.assign({}, floatingStyles), { display: open ? undefined : "none" }) }),
             React.createElement("div", { className: "navds-timeline__popover-content" }, children),
             React.createElement("div", { ref: (node) => {

package/esm/timeline/period/ClickablePeriod.js.map

@@ -1 +1 @@
-{"version":3,"file":"ClickablePeriod.js","sourceRoot":"","sources":["../../../src/timeline/period/ClickablePeriod.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"ClickablePeriod.js","sourceRoot":"","sources":["../../../src/timeline/period/ClickablePeriod.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "4.1.6",
+  "version": "4.2.0",
   "description": "Aksel react-components for NAV designsystem",
   "author": "Aksel | NAV designsystem team",
   "license": "MIT",
@@ -38,7 +38,7 @@
   },
   "dependencies": {
     "@floating-ui/react": "0.24.1",
-    "@navikt/aksel-icons": "^4.1.6",
+    "@navikt/aksel-icons": "^4.2.0",
     "@radix-ui/react-tabs": "1.0.0",
     "@radix-ui/react-toggle-group": "1.0.0",
     "clsx": "^1.2.1",

package/src/chat/Bubble.tsx

@@ -17,6 +17,7 @@ export interface BubbleProps extends HTMLAttributes<HTMLDivElement> {
   timestamp?: string;
   /**
    * Background color on bubble
+   * @deprecated Use `variant` on Chat instead
    */
   backgroundColor?: string;
   /**
@@ -46,17 +47,20 @@ const Bubble = forwardRef<HTMLDivElement, BubbleProps>(
         {...rest}
       >
         {(timestamp || name) && (
-          <div
+          <h3
             className={cl(
               `navds-chat__top-text`,
               toptextPosition && `navds-chat__top-text--${toptextPosition}`
             )}
           >
-            {name && <Detail className="navds-chat__name">{name}</Detail>}
-            {timestamp && (
-              <Detail className="navds-chat__timestamp">{timestamp}</Detail>
+            {name && <Detail as="span">{name}</Detail>}
+            {name && timestamp && (
+              <Detail as="span" aria-hidden>
+                &bull;
+              </Detail>
             )}
-          </div>
+            {timestamp && <Detail as="span">{timestamp}</Detail>}
+          </h3>
         )}
         {children}
       </div>

package/src/chat/Chat.tsx

@@ -1,7 +1,10 @@
 import React, { forwardRef, HTMLAttributes } from "react";
 import cl from "clsx";
-import Bubble, { BubbleProps } from "./Bubble";
-import { BodyLong, BodyShort } from "../typography";
+import Bubble from "./Bubble";
+import { BodyLong } from "../typography";
+
+export const POSITIONS = ["left", "right"] as const;
+export const SIZES = ["medium", "small"] as const;
 
 export interface ChatProps extends HTMLAttributes<HTMLDivElement> {
   /**
@@ -17,27 +20,40 @@ export interface ChatProps extends HTMLAttributes<HTMLDivElement> {
    */
   timestamp?: string;
   /**
-   * Avatar for messenger. Regular text for initials works to
+   * Avatar for messenger. Regular text for initials works too, but it will be hidden for screen readers.
+   */
+  avatar?: React.ReactNode;
+  /**
+   * Changes background color on avatar and bubbles.
+   * Avoid using the same background as the surface behind Chat.
+   * @default "subtle"
    */
-  avatar: React.ReactNode;
+  variant?: "subtle" | "info" | "neutral";
   /**
    * Background color on bubbles
+   * @deprecated Use `variant` instead
    */
   backgroundColor?: string;
   /**
    * Background color for avatar
+   * @deprecated Use `variant` instead
    */
   avatarBgColor?: string;
   /**
-   * Positions avatar and Bubbles
+   * Positions avatar and bubbles
    * @default "left"
    */
-  position?: "left" | "right";
+  position?: (typeof POSITIONS)[number];
   /**
    * Hoizontal position of toptext
-   * @default Same as chat
+   * @default Same as position
+   */
+  toptextPosition?: (typeof POSITIONS)[number];
+  /**
+   * Affects padding and font size in bubbles
+   * @default "medium"
    */
-  toptextPosition?: "left" | "right";
+  size?: (typeof SIZES)[number];
 }
 
 interface ChatComponent
@@ -47,24 +63,23 @@ interface ChatComponent
   /**
    * @see 🏷️ {@link BubbleProps}
    */
-  Bubble: React.ForwardRefExoticComponent<
-    BubbleProps & React.RefAttributes<HTMLDivElement>
-  >;
+  Bubble: typeof Bubble;
 }
 
 /**
- * A component for displaying chat messages.
+ * A component for communicating dialogs between two parties.
  *
  * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/chat)
  * @see 🏷️ {@link ChatProps}
  *
  * @example
  * ```jsx
- * <Chat>
- *   <Chat.Bubble avatar="A" name="Alice">Hello!</Chat.Bubble>
+ * <Chat avatar="A" name="Alice" timestamp="01.01.21 14:00">
+ *   <Chat.Bubble>Hello!</Chat.Bubble>
+ *   <Chat.Bubble>How can I help you?</Chat.Bubble>
  * </Chat>
- * <Chat>
- *   <Chat.Bubble avatar="B" name="Bob">Hi there!</Chat.Bubble>
+ * <Chat avatar="B" name="Bob" timestamp="01.01.21 14:01" position="right">
+ *   <Chat.Bubble>Hi there!</Chat.Bubble>
  * </Chat>
  * ```
  */
@@ -77,51 +92,54 @@ export const Chat = forwardRef<HTMLDivElement, ChatProps>(
       timestamp,
       avatar,
       position = "left",
+      variant = "subtle",
       avatarBgColor,
       backgroundColor,
       toptextPosition,
+      size = "medium",
       ...rest
-    },
+    }: ChatProps,
     ref
-  ) => {
-    return (
-      <div
-        ref={ref}
-        className={cl(
-          "navds-chat",
-          className,
-          `navds-chat--${position} navds-chat--top-text-${
-            toptextPosition ?? position
-          }`
-        )}
-        {...rest}
-      >
-        <BodyShort
-          as="div"
+  ) => (
+    <div
+      ref={ref}
+      className={cl(
+        "navds-chat",
+        className,
+        `navds-chat--${position}`,
+        `navds-chat--top-text-${toptextPosition ?? position}`,
+        `navds-chat--${size}`,
+        `navds-chat--${variant}`
+      )}
+      {...rest}
+    >
+      {avatar && (
+        <div
           className="navds-chat__avatar"
+          aria-hidden
           style={{ backgroundColor: avatarBgColor }}
         >
           {avatar}
-        </BodyShort>
-        <ol className="navds-chat__bubble-wrapper">
-          {React.Children.map(children, (child, i) => {
-            if (React.isValidElement(child)) {
-              return (
-                <BodyLong as="li">
-                  {React.cloneElement(child, {
-                    name: name && i === 0 ? name : undefined,
-                    timestamp: timestamp && i === 0 ? timestamp : undefined,
-                    backgroundColor,
-                    ...child.props,
-                  })}
-                </BodyLong>
-              );
-            }
-          })}
-        </ol>
-      </div>
-    );
-  }
+        </div>
+      )}
+      <ol className="navds-chat__bubble-wrapper">
+        {React.Children.map(children, (child, i) => {
+          if (React.isValidElement(child)) {
+            return (
+              <BodyLong as="li" size={size}>
+                {React.cloneElement(child, {
+                  name: name && i === 0 ? name : undefined,
+                  timestamp: timestamp && i === 0 ? timestamp : undefined,
+                  backgroundColor,
+                  ...child.props,
+                })}
+              </BodyLong>
+            );
+          }
+        })}
+      </ol>
+    </div>
+  )
 ) as ChatComponent;
 
 Chat.Bubble = Bubble;

package/src/chat/chat.stories.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { Chat } from "../index";
 import { Meta } from "@storybook/react";
+import { POSITIONS, SIZES } from "./Chat";
 
 export default {
   title: "ds-react/Chat",
@@ -16,19 +17,25 @@ export default {
         type: "text",
       },
     },
+    position: {
+      control: { type: "radio" },
+      options: POSITIONS,
+    },
+    toptextPosition: {
+      control: { type: "radio" },
+      options: POSITIONS,
+    },
+    size: {
+      control: { type: "radio" },
+      options: SIZES,
+    },
   },
-} as Meta;
+} satisfies Meta<typeof Chat>;
 
 export const Default = {
   render: (props) => {
     return (
-      <Chat
-        avatar={props?.avatar ?? "ON"}
-        name={props?.name ?? "Ola Normann"}
-        timestamp={props?.timestamp ?? "01.01.21 14:00"}
-        avatarBgColor={props?.avatarBgColor}
-        backgroundColor={props?.backgroundColor}
-      >
+      <Chat {...props}>
         <Chat.Bubble>
           Aute minim nisi sunt mollit duis sunt nulla minim non proident.
         </Chat.Bubble>
@@ -48,141 +55,156 @@ export const Default = {
   },
 };
 
-export const Farger = () => {
-  return (
-    <Chat
-      avatar="ON"
-      name="Ola Normann"
-      timestamp="01.01.21 14:00"
-      avatarBgColor="var(--a-lightblue-200)"
-      backgroundColor="var(--a-lightblue-100)"
-    >
+export const Small = () => (
+  <Chat avatar="ON" name="Ola Normann" timestamp="01.01.21 14:00" size="small">
+    <Chat.Bubble>
+      Aute minim nisi sunt mollit duis sunt nulla minim non proident.
+    </Chat.Bubble>
+    <Chat.Bubble>Tempor fugiat amet eu sint in in ullamco.</Chat.Bubble>
+    <Chat.Bubble>
+      Adipisicing laborum est eu laborum est sit in commodo enim sint laboris
+      labore nisi ut.
+    </Chat.Bubble>
+  </Chat>
+);
+
+export const Colors = () => (
+  <Chat
+    avatar="NAV"
+    name="NAV"
+    timestamp="01.01.21 14:00"
+    avatarBgColor="var(--a-surface-alt-1-subtle)"
+    backgroundColor="var(--a-surface-warning-subtle)"
+  >
+    <Chat.Bubble>
+      Aute minim nisi sunt mollit duis sunt nulla minim non proident.
+    </Chat.Bubble>
+    <Chat.Bubble backgroundColor="lightYellow">
+      Tempor fugiat amet eu sint in in ullamco.
+    </Chat.Bubble>
+    <Chat.Bubble>
+      Adipisicing laborum est eu laborum est sit in commodo enim sint laboris
+      labore nisi ut.
+    </Chat.Bubble>
+  </Chat>
+);
+
+export const Variants = () => (
+  <div className="colgap">
+    <Chat avatar="NAV" name="NAV" timestamp="01.01.21 14:00" variant="info">
       <Chat.Bubble>
         Aute minim nisi sunt mollit duis sunt nulla minim non proident.
       </Chat.Bubble>
+    </Chat>
+    <Chat
+      avatar="KN"
+      name="Kari Nordmann"
+      timestamp="01.01.21 14:03"
+      variant="neutral"
+      position="right"
+    >
       <Chat.Bubble>Tempor fugiat amet eu sint in in ullamco.</Chat.Bubble>
+    </Chat>
+    <Chat
+      avatar="ON"
+      name="Ola Nordmann"
+      timestamp="01.01.21 14:07"
+      variant="subtle"
+      position="right"
+    >
       <Chat.Bubble>
         Adipisicing laborum est eu laborum est sit in commodo enim sint laboris
         labore nisi ut.
       </Chat.Bubble>
     </Chat>
-  );
-};
-
-export const Position = () => {
-  return (
-    <div className="colgap">
-      <Chat
-        avatar="ON"
-        name="Ola Normann"
-        timestamp="01.01.21 14:00"
-        backgroundColor="rgba(255, 249, 240, 1)"
-        avatarBgColor="rgba(255, 236, 204, 1)"
-      >
-        <Chat.Bubble>
-          Adipisicing laborum est eu laborum est sit in commodo enim sint
-          laboris labore nisi ut.
-        </Chat.Bubble>
-      </Chat>
-      <Chat
-        avatar="KH"
-        name="Kari Høyli"
-        timestamp="01.01.21 14:32"
-        position="right"
-        backgroundColor="rgba(230, 240, 255, 1)"
-        avatarBgColor="rgba(204, 225, 255, 1)"
-      >
-        <Chat.Bubble>
-          Reprehenderit pariatur officia exercitation laboris.
-        </Chat.Bubble>
-        <Chat.Bubble>
-          Enim velit deserunt do quis. Eu fugiat magna esse dolore ad sunt sit
-          est dolore incididunt. Occaecat cupidatat magna.
-        </Chat.Bubble>
-      </Chat>
-      <Chat
-        avatar="ON"
-        name="Ola Normann"
-        timestamp="01.01.21 15:00"
-        backgroundColor="rgba(255, 249, 240, 1)"
-        avatarBgColor="rgba(255, 236, 204, 1)"
-      >
-        <Chat.Bubble>
-          Exercitation irure Lorem cupidatat culpa anim cillum esse ullamco qui
-          dolore laborum et Lorem. Labore sunt duis id Lorem voluptate commodo
-          ea esse. Dolore esse aliqua proident ea ad commodo ut dolore voluptate
-          labore sunt aute.
-        </Chat.Bubble>
-      </Chat>
-    </div>
-  );
-};
-
-export const ToptextPosition = () => {
-  return (
-    <div className="colgap">
-      <Chat
-        avatar="ON"
-        name="Ola Normann"
-        timestamp="01.01.21 14:00"
-        backgroundColor="rgba(255, 249, 240, 1)"
-        avatarBgColor="rgba(255, 236, 204, 1)"
-        toptextPosition="right"
-      >
-        <Chat.Bubble>
-          Adipisicing laborum est eu laborum est sit in commodo enim sint
-          laboris labore nisi ut.
-        </Chat.Bubble>
-      </Chat>
-      <Chat
-        avatar="KH"
-        name="Kari Høyli"
-        timestamp="01.01.21 14:32"
-        position="right"
-        backgroundColor="rgba(230, 240, 255, 1)"
-        avatarBgColor="rgba(204, 225, 255, 1)"
-        toptextPosition="left"
-      >
-        <Chat.Bubble>
-          Reprehenderit pariatur officia exercitation laboris.
-        </Chat.Bubble>
-        <Chat.Bubble>
-          Enim velit deserunt do quis. Eu fugiat magna esse dolore ad sunt sit
-          est dolore incididunt. Occaecat cupidatat magna.
-        </Chat.Bubble>
-      </Chat>
-      <Chat
-        avatar="ON"
-        name="Ola Normann"
-        timestamp="01.01.21 15:00"
-        backgroundColor="rgba(255, 249, 240, 1)"
-        avatarBgColor="rgba(255, 236, 204, 1)"
-      >
-        <Chat.Bubble toptextPosition="right">
-          Exercitation irure Lorem cupidatat culpa anim cillum esse ullamco qui
-          dolore laborum et Lorem. Labore sunt duis id Lorem voluptate commodo
-          ea esse. Dolore esse aliqua proident ea ad commodo ut dolore voluptate
-          labore sunt aute.
-        </Chat.Bubble>
-      </Chat>
-    </div>
-  );
-};
+  </div>
+);
 
-export const Avatar = () => {
-  return (
-    <Chat avatar={<Illustration />} timestamp="01.01.21 14:00">
+export const Position = () => (
+  <div className="colgap">
+    <Chat avatar="ON" name="Ola Normann" timestamp="01.01.21 14:00">
       <Chat.Bubble>
-        Aute minim nisi sunt mollit duis sunt nulla minim non proident.
+        Adipisicing laborum est eu laborum est sit in commodo enim sint laboris
+        labore nisi ut.
       </Chat.Bubble>
-      <Chat.Bubble>Tempor fugiat amet eu sint in in ullamco.</Chat.Bubble>
+    </Chat>
+    <Chat
+      avatar="KH"
+      name="Kari Høyli"
+      timestamp="01.01.21 14:32"
+      position="right"
+      variant="info"
+    >
+      <Chat.Bubble>
+        Reprehenderit pariatur officia exercitation laboris.
+      </Chat.Bubble>
+      <Chat.Bubble>
+        Enim velit deserunt do quis. Eu fugiat magna esse dolore ad sunt sit est
+        dolore incididunt. Occaecat cupidatat magna.
+      </Chat.Bubble>
+    </Chat>
+    <Chat avatar="ON" name="Ola Normann" timestamp="01.01.21 15:00">
+      <Chat.Bubble>
+        Exercitation irure Lorem cupidatat culpa anim cillum esse ullamco qui
+        dolore laborum et Lorem. Labore sunt duis id Lorem voluptate commodo ea
+        esse. Dolore esse aliqua proident ea ad commodo ut dolore voluptate
+        labore sunt aute.
+      </Chat.Bubble>
+    </Chat>
+  </div>
+);
+
+export const ToptextPosition = () => (
+  <div className="colgap">
+    <Chat
+      avatar="ON"
+      name="Ola Normann"
+      timestamp="01.01.21 14:00"
+      toptextPosition="right"
+    >
       <Chat.Bubble>
         Adipisicing laborum est eu laborum est sit in commodo enim sint laboris
         labore nisi ut.
       </Chat.Bubble>
     </Chat>
-  );
-};
+    <Chat
+      name="Kari Høyli"
+      timestamp="01.01.21 14:32"
+      position="right"
+      variant="info"
+      toptextPosition="left"
+    >
+      <Chat.Bubble>
+        Reprehenderit pariatur officia exercitation laboris.
+      </Chat.Bubble>
+      <Chat.Bubble>
+        Enim velit deserunt do quis. Eu fugiat magna esse dolore ad sunt sit est
+        dolore incididunt. Occaecat cupidatat magna.
+      </Chat.Bubble>
+    </Chat>
+    <Chat avatar="ON" name="Ola Normann" timestamp="01.01.21 15:00">
+      <Chat.Bubble toptextPosition="right">
+        Exercitation irure Lorem cupidatat culpa anim cillum esse ullamco qui
+        dolore laborum et Lorem. Labore sunt duis id Lorem voluptate commodo ea
+        esse. Dolore esse aliqua proident ea ad commodo ut dolore voluptate
+        labore sunt aute.
+      </Chat.Bubble>
+    </Chat>
+  </div>
+);
+
+export const Avatar = () => (
+  <Chat avatar={<Illustration />} timestamp="01.01.21 14:00">
+    <Chat.Bubble>
+      Aute minim nisi sunt mollit duis sunt nulla minim non proident.
+    </Chat.Bubble>
+    <Chat.Bubble>Tempor fugiat amet eu sint in in ullamco.</Chat.Bubble>
+    <Chat.Bubble>
+      Adipisicing laborum est eu laborum est sit in commodo enim sint laboris
+      labore nisi ut.
+    </Chat.Bubble>
+  </Chat>
+);
 
 const Illustration = () => (
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 54 93">