Merge pull request #71 from kleros/chore/dot-migration

Chore/dot breadcrumb migration

Author: alcercu

src/lib/breadcrumb.tsx

@@ -1,72 +1,79 @@
 import React from "react";
-import styled from "styled-components";
-import { borderBox, small, button } from "../styles/common-style";
-
-const Wrapper = styled.div`
-  ${borderBox}
-  display: flex;
-  flex-wrap: wrap;
-  gap: 2px 0;
-`;
-
-const Element = styled.button<{ clickable?: boolean }>`
-  ${button}
-  background: none;
-  padding: 0;
-
-  :hover {
-    ${({ clickable, theme }) =>
-      clickable
-        ? `small { color: ${theme.klerosUIComponentsPrimaryText}; }`
-        : `cursor: text !important`}
-  }
-`;
-
-const Content = styled.small`
-  ${small}
-  transition: color ease
-    ${({ theme }) => theme.klerosUIComponentsTransitionSpeed};
-`;
-
-const Separator = styled(Content)`
-  margin: 0px 8px;
-`;
-
-const ActiveElement = styled(Content)`
-  color: ${({ theme }) => theme.klerosUIComponentsPrimaryText};
-`;
+import { cn } from "../utils";
+import { Button } from "react-aria-components";
+import { clsx } from "clsx";
 
 interface BreadcrumbProps {
   items: { text: string; value: any }[];
   // eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
   callback?: Function;
   clickable?: boolean;
   className?: string;
+  variant?: "primary" | "secondary";
 }
 
-const Breadcrumb: React.FC<BreadcrumbProps> = ({
+const Content: React.FC<
+  React.ComponentProps<"small"> & { variant?: "primary" | "secondary" }
+> = ({ children, className, variant, ...props }) => (
+  <small
+    className={cn(
+      "ease-ease transition-colors",
+      "text-klerosUIComponentsSecondaryText text-sm break-words",
+      className,
+      variant === "primary" && "text-klerosUIComponentsPrimaryBlue",
+    )}
+    {...props}
+  >
+    {children}
+  </small>
+);
+
+function Breadcrumb({
   items,
   callback,
   clickable,
   className,
-}) => (
-  <Wrapper {...{ className }}>
-    {items.map(({ text, value }, i) =>
-      i === items.length - 1 ? (
-        <ActiveElement key={i}>{text}</ActiveElement>
-      ) : (
-        <React.Fragment key={i}>
-          <Element
-            onClick={() => (callback ? callback(value) : null)}
-            {...{ clickable }}
+  variant,
+}: Readonly<BreadcrumbProps>) {
+  return (
+    <div
+      className={cn(
+        "box-border flex flex-wrap items-center gap-y-0.5",
+        className,
+      )}
+    >
+      {items.map(({ text, value }, i) =>
+        i === items.length - 1 ? (
+          <Content
+            className="text-klerosUIComponentsPrimaryText font-semibold"
+            {...{ variant }}
+            key={i}
           >
-            <Content>{text}</Content>
-          </Element>
-          <Separator>{"/"}</Separator>
-        </React.Fragment>
-      ),
-    )}
-  </Wrapper>
-);
+            {text}
+          </Content>
+        ) : (
+          <React.Fragment key={i}>
+            <Button
+              className={clsx(clickable ? "cursor-pointer" : "cursor-text")}
+              onPress={() => (callback ? callback(value) : null)}
+            >
+              <Content
+                className={clsx(
+                  clickable && "hover:text-klerosUIComponentsPrimaryText",
+                )}
+                {...{ variant }}
+              >
+                {text}
+              </Content>
+            </Button>
+            <Content className="mx-2" {...{ variant }}>
+              {"/"}
+            </Content>
+          </React.Fragment>
+        ),
+      )}
+    </div>
+  );
+}
 
 export default Breadcrumb;

src/lib/dot.tsx

@@ -1,16 +1,16 @@
-import styled from "styled-components";
-import { borderBox } from "../styles/common-style";
-
+import React from "react";
+import { cn } from "../utils";
 interface DotProps {
   color: string;
+  className?: string;
 }
 
-const Dot = styled.div<DotProps>`
-  ${borderBox}
-  background: ${({ color }) => color};
-  border-radius: 50%;
-  width: 8px;
-  height: 8px;
-`;
-
+function Dot({ color, className }: Readonly<DotProps>) {
+  return (
+    <div
+      style={{ background: color }}
+      className={cn("box-border h-2 w-2 rounded-full", className)}
+    />
+  );
+}
 export default Dot;

src/lib/dropdown/base-item.tsx

@@ -47,10 +47,6 @@ const StyledText = styled.p`
   user-select: none;
 `;
 
-const StyledDot = styled(Dot)`
-  margin-right: 8px;
-`;
-
 const CountDisplay = styled.label`
   width: 24px;
   height: 24px;
@@ -89,7 +85,7 @@ const BaseItem: React.FC<IBaseItem> = ({
     {...{ onClick, ...props }}
   >
     {icon ?? (Icon && <Icon className="item-icon" />)}
-    {dot && <StyledDot color={dot} />}
+    {dot && <Dot className="mr-2" color={dot} />}
     <StyledText>{text}</StyledText>
     {childrenCount !== undefined ? (
       <CountDisplay className="count-display">

src/stories/breadcrumb.stories.tsx

@@ -0,0 +1,38 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { IPreviewArgs } from "./utils";
+
+import BreadcrumbComponent from "../lib/breadcrumb";
+
+const meta = {
+  component: BreadcrumbComponent,
+  title: "Pagination/Breadcrumb",
+  tags: ["autodocs"],
+  argTypes: {
+    variant: {
+      options: ["primary", "secondary"],
+      control: { type: "radio" },
+    },
+    clickable: {
+      control: "boolean",
+    },
+  },
+} satisfies Meta<typeof BreadcrumbComponent>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta> & IPreviewArgs;
+
+export const Breadcrumb: Story = {
+  args: {
+    variant: "primary",
+    themeUI: "dark",
+    backgroundUI: "light",
+    items: [
+      { text: "General Court", value: 0 },
+      { text: "Blockchain", value: 1 },
+      { text: "Non-Technical", value: 2 },
+    ],
+    clickable: false,
+  },
+};

src/styles/global.css

@@ -157,6 +157,8 @@
 
   --radius-base: var(--klerosUIComponentsBaseRadius);
 
+  --default-transition-duration: var(--klerosUIComponentsTransitionSpeed);
+
   /* Animations */
   @keyframes fadeIn {
     0% {