@navikt/ds-react 2.0.14 → 2.0.16

package/_docs.json

@@ -701,6 +701,25 @@
           "name": "string"
         }
       },
+      "toptextPosition": {
+        "defaultValue": null,
+        "description": "Overrides hoizontal position of toptext",
+        "name": "toptextPosition",
+        "parent": {
+          "fileName": "src/chat/Bubble.tsx",
+          "name": "BubbleProps"
+        },
+        "declarations": [
+          {
+            "fileName": "src/chat/Bubble.tsx",
+            "name": "BubbleProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "\"left\" | \"right\""
+        }
+      },
       "className": {
         "defaultValue": null,
         "description": "",
@@ -880,6 +899,27 @@
           "name": "\"left\" | \"right\""
         }
       },
+      "toptextPosition": {
+        "defaultValue": {
+          "value": "Same as chat"
+        },
+        "description": "Hoizontal position of toptext",
+        "name": "toptextPosition",
+        "parent": {
+          "fileName": "src/chat/Chat.tsx",
+          "name": "ChatProps"
+        },
+        "declarations": [
+          {
+            "fileName": "src/chat/Chat.tsx",
+            "name": "ChatProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "\"left\" | \"right\""
+        }
+      },
       "className": {
         "defaultValue": null,
         "description": "",

package/cjs/chat/Bubble.js

@@ -41,9 +41,9 @@ const react_1 = __importStar(require("react"));
 const clsx_1 = __importDefault(require("clsx"));
 const typography_1 = require("../typography");
 const Bubble = (0, react_1.forwardRef)((_a, ref) => {
-    var { children, className, name, timestamp, backgroundColor } = _a, rest = __rest(_a, ["children", "className", "name", "timestamp", "backgroundColor"]);
+    var { children, className, name, timestamp, backgroundColor, toptextPosition } = _a, rest = __rest(_a, ["children", "className", "name", "timestamp", "backgroundColor", "toptextPosition"]);
     return (react_1.default.createElement("div", Object.assign({ ref: ref, className: (0, clsx_1.default)("navds-chat__bubble", className), style: { backgroundColor: backgroundColor } }, rest),
-        (timestamp || name) && (react_1.default.createElement("div", { className: "navds-chat__top-text" },
+        (timestamp || name) && (react_1.default.createElement("div", { className: (0, clsx_1.default)(`navds-chat__top-text`, toptextPosition && `navds-chat__top-text--${toptextPosition}`) },
             name && react_1.default.createElement(typography_1.Detail, { className: "navds-chat__name" }, name),
             timestamp && (react_1.default.createElement(typography_1.Detail, { className: "navds-chat__timestamp" }, timestamp)))),
         children));

package/cjs/chat/Chat.js

@@ -43,8 +43,8 @@ const clsx_1 = __importDefault(require("clsx"));
 const Bubble_1 = __importDefault(require("./Bubble"));
 const __1 = require("..");
 exports.Chat = (0, react_1.forwardRef)((_a, ref) => {
-    var { children, className, name, timestamp, avatar, position = "left", avatarBgColor, backgroundColor } = _a, rest = __rest(_a, ["children", "className", "name", "timestamp", "avatar", "position", "avatarBgColor", "backgroundColor"]);
-    return (react_1.default.createElement("div", Object.assign({ ref: ref, className: (0, clsx_1.default)("navds-chat", className, `navds-chat--${position}`) }, rest),
+    var { children, className, name, timestamp, avatar, position = "left", avatarBgColor, backgroundColor, toptextPosition } = _a, rest = __rest(_a, ["children", "className", "name", "timestamp", "avatar", "position", "avatarBgColor", "backgroundColor", "toptextPosition"]);
+    return (react_1.default.createElement("div", Object.assign({ ref: ref, className: (0, clsx_1.default)("navds-chat", className, `navds-chat--${position} navds-chat--top-text-${toptextPosition !== null && toptextPosition !== void 0 ? toptextPosition : position}`) }, rest),
         react_1.default.createElement(__1.BodyShort, { as: "div", className: "navds-chat__avatar", style: { backgroundColor: avatarBgColor } }, avatar),
         react_1.default.createElement("ol", { className: "navds-chat__bubble-wrapper" }, react_1.default.Children.map(children, (child, i) => {
             if (react_1.default.isValidElement(child)) {

package/esm/chat/Bubble.d.ts

@@ -16,6 +16,10 @@ export interface BubbleProps extends HTMLAttributes<HTMLDivElement> {
      * Background color on bubble
      */
     backgroundColor?: string;
+    /**
+     * Overrides hoizontal position of toptext
+     */
+    toptextPosition?: "left" | "right";
 }
 export type BubbleType = React.ForwardRefExoticComponent<BubbleProps & React.RefAttributes<HTMLDivElement>>;
 declare const Bubble: BubbleType;

package/esm/chat/Bubble.js

@@ -13,9 +13,9 @@ import React, { forwardRef } from "react";
 import cl from "clsx";
 import { Detail } from "../typography";
 const Bubble = forwardRef((_a, ref) => {
-    var { children, className, name, timestamp, backgroundColor } = _a, rest = __rest(_a, ["children", "className", "name", "timestamp", "backgroundColor"]);
+    var { children, className, name, timestamp, backgroundColor, toptextPosition } = _a, rest = __rest(_a, ["children", "className", "name", "timestamp", "backgroundColor", "toptextPosition"]);
     return (React.createElement("div", Object.assign({ ref: ref, className: cl("navds-chat__bubble", className), style: { backgroundColor: backgroundColor } }, rest),
-        (timestamp || name) && (React.createElement("div", { className: "navds-chat__top-text" },
+        (timestamp || name) && (React.createElement("div", { className: cl(`navds-chat__top-text`, toptextPosition && `navds-chat__top-text--${toptextPosition}`) },
             name && React.createElement(Detail, { className: "navds-chat__name" }, name),
             timestamp && (React.createElement(Detail, { className: "navds-chat__timestamp" }, timestamp)))),
         children));

package/esm/chat/Bubble.js.map

@@ -1 +1 @@
-{"version":3,"file":"Bubble.js","sourceRoot":"","sources":["../../src/chat/Bubble.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAkB,MAAM,OAAO,CAAC;AAC1D,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAyBvC,MAAM,MAAM,GAAe,UAAU,CACnC,CAAC,EAAkE,EAAE,GAAG,EAAE,EAAE;QAA3E,EAAE,QAAQ,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE,eAAe,OAAW,EAAN,IAAI,cAAhE,iEAAkE,CAAF;IAC/D,OAAO,CACL,2CACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,oBAAoB,EAAE,SAAS,CAAC,EAC9C,KAAK,EAAE,EAAE,eAAe,EAAE,eAAe,EAAE,IACvC,IAAI;QAEP,CAAC,SAAS,IAAI,IAAI,CAAC,IAAI,CACtB,6BAAK,SAAS,EAAC,sBAAsB;YAClC,IAAI,IAAI,oBAAC,MAAM,IAAC,SAAS,EAAC,kBAAkB,IAAE,IAAI,CAAU;YAC5D,SAAS,IAAI,CACZ,oBAAC,MAAM,IAAC,SAAS,EAAC,uBAAuB,IAAE,SAAS,CAAU,CAC/D,CACG,CACP;QACA,QAAQ,CACL,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Bubble.js","sourceRoot":"","sources":["../../src/chat/Bubble.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAkB,MAAM,OAAO,CAAC;AAC1D,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AA6BvC,MAAM,MAAM,GAAe,UAAU,CACnC,CACE,EAQC,EACD,GAAG,EACH,EAAE;QAVF,EACE,QAAQ,EACR,SAAS,EACT,IAAI,EACJ,SAAS,EACT,eAAe,EACf,eAAe,OAEhB,EADI,IAAI,cAPT,oFAQC,CADQ;IAIT,OAAO,CACL,2CACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,oBAAoB,EAAE,SAAS,CAAC,EAC9C,KAAK,EAAE,EAAE,eAAe,EAAE,eAAe,EAAE,IACvC,IAAI;QAEP,CAAC,SAAS,IAAI,IAAI,CAAC,IAAI,CACtB,6BACE,SAAS,EAAE,EAAE,CACX,sBAAsB,EACtB,eAAe,IAAI,yBAAyB,eAAe,EAAE,CAC9D;YAEA,IAAI,IAAI,oBAAC,MAAM,IAAC,SAAS,EAAC,kBAAkB,IAAE,IAAI,CAAU;YAC5D,SAAS,IAAI,CACZ,oBAAC,MAAM,IAAC,SAAS,EAAC,uBAAuB,IAAE,SAAS,CAAU,CAC/D,CACG,CACP;QACA,QAAQ,CACL,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/esm/chat/Chat.d.ts

@@ -30,6 +30,11 @@ export interface ChatProps extends HTMLAttributes<HTMLDivElement> {
      * @default "left"
      */
     position?: "left" | "right";
+    /**
+     * Hoizontal position of toptext
+     * @default Same as chat
+     */
+    toptextPosition?: "left" | "right";
 }
 interface ChatComponent extends React.ForwardRefExoticComponent<ChatProps & React.RefAttributes<HTMLDivElement>> {
     Bubble: BubbleType;

package/esm/chat/Chat.js

@@ -14,8 +14,8 @@ import cl from "clsx";
 import Bubble from "./Bubble";
 import { BodyLong, BodyShort } from "..";
 export const Chat = forwardRef((_a, ref) => {
-    var { children, className, name, timestamp, avatar, position = "left", avatarBgColor, backgroundColor } = _a, rest = __rest(_a, ["children", "className", "name", "timestamp", "avatar", "position", "avatarBgColor", "backgroundColor"]);
-    return (React.createElement("div", Object.assign({ ref: ref, className: cl("navds-chat", className, `navds-chat--${position}`) }, rest),
+    var { children, className, name, timestamp, avatar, position = "left", avatarBgColor, backgroundColor, toptextPosition } = _a, rest = __rest(_a, ["children", "className", "name", "timestamp", "avatar", "position", "avatarBgColor", "backgroundColor", "toptextPosition"]);
+    return (React.createElement("div", Object.assign({ ref: ref, className: cl("navds-chat", className, `navds-chat--${position} navds-chat--top-text-${toptextPosition !== null && toptextPosition !== void 0 ? toptextPosition : position}`) }, rest),
         React.createElement(BodyShort, { as: "div", className: "navds-chat__avatar", style: { backgroundColor: avatarBgColor } }, avatar),
         React.createElement("ol", { className: "navds-chat__bubble-wrapper" }, React.Children.map(children, (child, i) => {
             if (React.isValidElement(child)) {

package/esm/chat/Chat.js.map

@@ -1 +1 @@
-{"version":3,"file":"Chat.js","sourceRoot":"","sources":["../../src/chat/Chat.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAkB,MAAM,OAAO,CAAC;AAC1D,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,MAAsB,MAAM,UAAU,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,IAAI,CAAC;AAyCzC,MAAM,CAAC,MAAM,IAAI,GAAG,UAAU,CAC5B,CACE,EAUC,EACD,GAAG,EACH,EAAE;QAZF,EACE,QAAQ,EACR,SAAS,EACT,IAAI,EACJ,SAAS,EACT,MAAM,EACN,QAAQ,GAAG,MAAM,EACjB,aAAa,EACb,eAAe,OAEhB,EADI,IAAI,cATT,wGAUC,CADQ;IAIT,OAAO,CACL,2CACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,YAAY,EAAE,SAAS,EAAE,eAAe,QAAQ,EAAE,CAAC,IAC7D,IAAI;QAER,oBAAC,SAAS,IACR,EAAE,EAAC,KAAK,EACR,SAAS,EAAC,oBAAoB,EAC9B,KAAK,EAAE,EAAE,eAAe,EAAE,aAAa,EAAE,IAExC,MAAM,CACG;QACZ,4BAAI,SAAS,EAAC,4BAA4B,IACvC,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,EAAE;YACzC,IAAI,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE;gBAC/B,OAAO,CACL,oBAAC,QAAQ,IAAC,EAAE,EAAC,IAAI,IACd,KAAK,CAAC,YAAY,CAAC,KAAK,kBACvB,IAAI,EAAE,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,EACxC,SAAS,EAAE,SAAS,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,EACvD,eAAe,IACZ,KAAK,CAAC,KAAK,EACd,CACO,CACZ,CAAC;aACH;QACH,CAAC,CAAC,CACC,CACD,CACP,CAAC;AACJ,CAAC,CACe,CAAC;AAEnB,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;AAErB,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Chat.js","sourceRoot":"","sources":["../../src/chat/Chat.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAkB,MAAM,OAAO,CAAC;AAC1D,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,MAAsB,MAAM,UAAU,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,IAAI,CAAC;AA8CzC,MAAM,CAAC,MAAM,IAAI,GAAG,UAAU,CAC5B,CACE,EAWC,EACD,GAAG,EACH,EAAE;QAbF,EACE,QAAQ,EACR,SAAS,EACT,IAAI,EACJ,SAAS,EACT,MAAM,EACN,QAAQ,GAAG,MAAM,EACjB,aAAa,EACb,eAAe,EACf,eAAe,OAEhB,EADI,IAAI,cAVT,2HAWC,CADQ;IAIT,OAAO,CACL,2CACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACX,YAAY,EACZ,SAAS,EACT,eAAe,QAAQ,yBACrB,eAAe,aAAf,eAAe,cAAf,eAAe,GAAI,QACrB,EAAE,CACH,IACG,IAAI;QAER,oBAAC,SAAS,IACR,EAAE,EAAC,KAAK,EACR,SAAS,EAAC,oBAAoB,EAC9B,KAAK,EAAE,EAAE,eAAe,EAAE,aAAa,EAAE,IAExC,MAAM,CACG;QACZ,4BAAI,SAAS,EAAC,4BAA4B,IACvC,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,EAAE;YACzC,IAAI,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE;gBAC/B,OAAO,CACL,oBAAC,QAAQ,IAAC,EAAE,EAAC,IAAI,IACd,KAAK,CAAC,YAAY,CAAC,KAAK,kBACvB,IAAI,EAAE,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,EACxC,SAAS,EAAE,SAAS,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,EACvD,eAAe,IACZ,KAAK,CAAC,KAAK,EACd,CACO,CACZ,CAAC;aACH;QACH,CAAC,CAAC,CACC,CACD,CACP,CAAC;AACJ,CAAC,CACe,CAAC;AAEnB,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;AAErB,eAAe,IAAI,CAAC"}

package/package.json

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

package/src/chat/Bubble.tsx

@@ -19,6 +19,10 @@ export interface BubbleProps extends HTMLAttributes<HTMLDivElement> {
    * Background color on bubble
    */
   backgroundColor?: string;
+  /**
+   * Overrides hoizontal position of toptext
+   */
+  toptextPosition?: "left" | "right";
 }
 
 export type BubbleType = React.ForwardRefExoticComponent<
@@ -26,7 +30,18 @@ export type BubbleType = React.ForwardRefExoticComponent<
 >;
 
 const Bubble: BubbleType = forwardRef(
-  ({ children, className, name, timestamp, backgroundColor, ...rest }, ref) => {
+  (
+    {
+      children,
+      className,
+      name,
+      timestamp,
+      backgroundColor,
+      toptextPosition,
+      ...rest
+    },
+    ref
+  ) => {
     return (
       <div
         ref={ref}
@@ -35,7 +50,12 @@ const Bubble: BubbleType = forwardRef(
         {...rest}
       >
         {(timestamp || name) && (
-          <div className="navds-chat__top-text">
+          <div
+            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>

package/src/chat/Chat.tsx

@@ -33,6 +33,11 @@ export interface ChatProps extends HTMLAttributes<HTMLDivElement> {
    * @default "left"
    */
   position?: "left" | "right";
+  /**
+   * Hoizontal position of toptext
+   * @default Same as chat
+   */
+  toptextPosition?: "left" | "right";
 }
 
 interface ChatComponent
@@ -53,6 +58,7 @@ export const Chat = forwardRef<HTMLDivElement, ChatProps>(
       position = "left",
       avatarBgColor,
       backgroundColor,
+      toptextPosition,
       ...rest
     },
     ref
@@ -60,7 +66,13 @@ export const Chat = forwardRef<HTMLDivElement, ChatProps>(
     return (
       <div
         ref={ref}
-        className={cl("navds-chat", className, `navds-chat--${position}`)}
+        className={cl(
+          "navds-chat",
+          className,
+          `navds-chat--${position} navds-chat--top-text-${
+            toptextPosition ?? position
+          }`
+        )}
         {...rest}
       >
         <BodyShort

package/src/chat/chat.stories.tsx

@@ -116,6 +116,57 @@ export const Position = () => {
   );
 };
 
+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>
+  );
+};
+
 export const Avatar = () => {
   return (
     <Chat avatar={<Illustration />} timestamp="01.01.21 14:00">