@navikt/ds-react 6.0.0-alpha.2 → 6.0.0

package/src/button/button.stories.tsx

@@ -1,15 +1,21 @@
+import { StoryObj } from "@storybook/react";
 import React from "react";
-import { StarIcon } from "@navikt/aksel-icons";
+import { StarIcon as BaseStarIcon } from "@navikt/aksel-icons";
+import { HStack, VStack } from "../layout/stack";
 import { Button } from "./index";
 
 export default {
   title: "ds-react/Button",
   component: Button,
   parameters: {
-    chromatic: { delay: 600 },
+    chromatic: { disable: true },
   },
 };
 
+type Story = StoryObj<typeof Button>;
+
+const StarIcon = () => <BaseStarIcon aria-hidden />;
+
 const variants: (
   | "primary"
   | "secondary"
@@ -28,17 +34,7 @@ const variants: (
   "tertiary-neutral",
 ];
 
-const varSwitch = {
-  primary: "Primary",
-  secondary: "Secondary",
-  tertiary: "Tertiary",
-  danger: "Danger",
-  "primary-neutral": "Primary",
-  "secondary-neutral": "Secondary",
-  "tertiary-neutral": "Tertiary",
-};
-
-export const Default = {
+export const Controls: Story = {
   render: (props) => {
     return (
       <Button
@@ -57,7 +53,7 @@ export const Default = {
     icon: false,
     loading: false,
     iconPosition: "left",
-    children: "Knapp",
+    children: "Button",
     variant: "primary",
     size: "medium",
   },
@@ -91,192 +87,99 @@ export const Default = {
   },
 };
 
-export const Small = () => (
-  <div className="rowgap">
-    {variants.map((variant) => (
-      <Button key={variant} variant={variant} size="small">
-        {varSwitch[variant]}
-      </Button>
-    ))}
-  </div>
-);
+function ButtonGrid(props: any) {
+  return (
+    <VStack gap="2">
+      {variants.map((variant) => (
+        <HStack gap="2" key={variant}>
+          <Button variant={variant} {...props}>
+            Button
+          </Button>
+          <Button variant={variant} {...props} icon={<StarIcon />}>
+            Button
+          </Button>
+          <Button
+            variant={variant}
+            {...props}
+            icon={<StarIcon />}
+            iconPosition="right"
+          >
+            Button
+          </Button>
+          <Button variant={variant} {...props} icon={<StarIcon />} />
+        </HStack>
+      ))}
+    </VStack>
+  );
+}
 
-export const XSmall = () => (
-  <div className="rowgap">
-    {variants.map((variant) => (
-      <Button key={variant} variant={variant} size="xsmall">
-        {varSwitch[variant]}
-      </Button>
-    ))}
-  </div>
-);
+export const Medium: Story = {
+  render: () => <ButtonGrid size="medium" />,
+};
 
-export const Link = () => (
-  <div className="rowgap">
-    {variants.map((variant) => (
-      <Button key={variant} variant={variant} as="a" href="#thecakeisalie">
-        {varSwitch[variant]}
-      </Button>
-    ))}
-  </div>
-);
+export const Small: Story = {
+  render: () => <ButtonGrid size="small" />,
+};
 
-export const Loading = {
+export const XSmall: Story = {
+  render: () => <ButtonGrid size="xsmall" />,
+};
+
+export const AsLink: Story = {
   render: () => (
-    <div className="colgap chromatic-ignore">
-      <div className="rowgap">
-        {variants.map((variant) => (
-          <Button key={variant} variant={variant} loading>
-            {varSwitch[variant]}
-          </Button>
-        ))}
-      </div>
-      <div className="rowgap">
-        {variants.map((variant) => (
-          <Button key={variant} variant={variant} loading size="small">
-            {varSwitch[variant]}
-          </Button>
-        ))}
-      </div>
-      <div className="rowgap">
-        {variants.map((variant) => (
-          <Button key={variant} variant={variant} loading size="xsmall">
-            {varSwitch[variant]}
-          </Button>
-        ))}
-      </div>
-    </div>
+    <VStack gap="4">
+      <Button href="#" as="a">
+        Button as a-tag
+      </Button>
+      <Button href="#" as="a" disabled>
+        Disabled Button as a-tag
+      </Button>
+    </VStack>
   ),
+};
 
-  parameters: {
-    chromatic: { disableSnapshot: true },
-  },
+export const Loading: Story = {
+  render: () => <ButtonGrid loading />,
 };
 
-export const Icon = () => (
-  <div className="colgap ">
-    <div className="rowgap">
-      {variants.map((variant) => (
-        <Button
-          key={variant}
-          variant={variant}
-          icon={<StarIcon title="Stjerne" />}
-        />
-      ))}
-    </div>
-    <div className="rowgap">
-      {variants.map((variant) => (
-        <Button
-          key={variant}
-          variant={variant}
-          size="small"
-          icon={<StarIcon title="Stjerne" />}
-        />
-      ))}
-    </div>
-    <div className="rowgap">
-      {variants.map((variant) => (
-        <Button
-          key={variant}
-          variant={variant}
-          size="xsmall"
-          icon={<StarIcon title="Stjerne" />}
-        />
-      ))}
-    </div>
-  </div>
-);
+export const LoadingAsLink: Story = {
+  render: () => <ButtonGrid loading href="#" as="a" />,
+};
 
-export const IconWText = () => (
-  <div className="colgap">
-    <div className="rowgap">
-      {variants.map((variant, i) => (
-        <Button
-          key={variant}
-          variant={variant}
-          icon={<StarIcon title="Stjerne" />}
-          iconPosition={i % 2 ? "left" : "right"}
-        >
-          {varSwitch[variant]}
-        </Button>
-      ))}
-    </div>
-    <div className="rowgap">
-      {variants.map((variant, i) => (
-        <Button
-          key={variant}
-          variant={variant}
-          size="small"
-          icon={<StarIcon title="Stjerne" />}
-          iconPosition={i % 2 ? "left" : "right"}
-        >
-          {varSwitch[variant]}
-        </Button>
-      ))}
-    </div>
-    <div className="rowgap">
-      {variants.map((variant, i) => (
-        <Button
-          key={variant}
-          variant={variant}
-          size="xsmall"
-          icon={<StarIcon title="Stjerne" />}
-          iconPosition={i % 2 ? "left" : "right"}
-        >
-          {varSwitch[variant]}
-        </Button>
-      ))}
-    </div>
-  </div>
-);
+export const Disabled: Story = {
+  render: () => <ButtonGrid disabled />,
+};
 
-export const Disabled = () => (
-  <div className="colgap">
-    <div className="rowgap">
-      {variants.map((variant) => (
-        <Button key={variant} variant={variant} disabled>
-          {varSwitch[variant]}
-        </Button>
-      ))}
-    </div>
-    <div className="rowgap">
-      {variants.map((variant) => (
-        <Button key={variant} variant={variant} disabled as="a" href="#">
-          {varSwitch[variant]}
-        </Button>
-      ))}
-    </div>
-  </div>
-);
+export const DisabledAsLink: Story = {
+  render: () => <ButtonGrid disabled href="#" as="a" />,
+};
 
-export const LoadingWithAs = {
+export const Chromatic: Story = {
   render: () => (
-    <div className="colgap chromatic-ignore">
-      <div className="rowgap">
-        {variants.map((variant) => (
-          <Button key={variant} variant={variant} loading size="small">
-            {varSwitch[variant]}
-          </Button>
-        ))}
+    <VStack gap="6" align="center">
+      <div>
+        <h2>Medium</h2>
+        <ButtonGrid size="medium" />
       </div>
-      <div className="rowgap">
-        {variants.map((variant) => (
-          <Button
-            key={variant}
-            variant={variant}
-            loading
-            size="small"
-            as="a"
-            href="#"
-          >
-            {varSwitch[variant]}
-          </Button>
-        ))}
+      <div>
+        <h2>Small</h2>
+        <ButtonGrid size="small" />
+      </div>
+      <div>
+        <h2>XSmall</h2>
+        <ButtonGrid size="xsmall" />
       </div>
-    </div>
+      <div>
+        <h2>As Link</h2>
+        <ButtonGrid as="a" href="#" />
+      </div>
+      <div>
+        <h2>Disabled</h2>
+        <ButtonGrid disabled />
+      </div>
+    </VStack>
   ),
-
   parameters: {
-    chromatic: { disableSnapshot: true },
+    chromatic: { disable: false },
   },
 };

package/src/chat/Bubble.tsx

@@ -15,11 +15,6 @@ export interface BubbleProps extends HTMLAttributes<HTMLDivElement> {
    * Timestamp for sent message
    */
   timestamp?: string;
-  /**
-   * Background color on bubble
-   * @deprecated Use `variant` on Chat instead
-   */
-  backgroundColor?: string;
   /**
    * Overrides hoizontal position of toptext
    */
@@ -27,25 +22,9 @@ export interface BubbleProps extends HTMLAttributes<HTMLDivElement> {
 }
 
 const Bubble = forwardRef<HTMLDivElement, BubbleProps>(
-  (
-    {
-      children,
-      className,
-      name,
-      timestamp,
-      backgroundColor,
-      toptextPosition,
-      ...rest
-    },
-    ref,
-  ) => {
+  ({ children, className, name, timestamp, toptextPosition, ...rest }, ref) => {
     return (
-      <div
-        ref={ref}
-        className={cl("navds-chat__bubble", className)}
-        style={{ backgroundColor }}
-        {...rest}
-      >
+      <div ref={ref} className={cl("navds-chat__bubble", className)} {...rest}>
         {(timestamp || name) && (
           <h3
             className={cl(

package/src/chat/Chat.tsx

@@ -29,16 +29,6 @@ export interface ChatProps extends HTMLAttributes<HTMLDivElement> {
    * @default "neutral"
    */
   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
    * @default "left"
@@ -93,8 +83,6 @@ export const Chat = forwardRef<HTMLDivElement, ChatProps>(
       avatar,
       position = "left",
       variant = "neutral",
-      avatarBgColor,
-      backgroundColor,
       toptextPosition,
       size = "medium",
       ...rest
@@ -114,11 +102,7 @@ export const Chat = forwardRef<HTMLDivElement, ChatProps>(
       {...rest}
     >
       {avatar && (
-        <div
-          className="navds-chat__avatar"
-          aria-hidden
-          style={{ backgroundColor: avatarBgColor }}
-        >
+        <div className="navds-chat__avatar" aria-hidden>
           {avatar}
         </div>
       )}
@@ -130,7 +114,6 @@ export const Chat = forwardRef<HTMLDivElement, ChatProps>(
                 {React.cloneElement(child, {
                   name: name && i === 0 ? name : undefined,
                   timestamp: timestamp && i === 0 ? timestamp : undefined,
-                  backgroundColor,
                   ...child.props,
                 })}
               </BodyLong>