chore: adapt Tag to design

lib/experimental/Layouts/Utils/DataItem/index.stories.tsx

@@ -0,0 +1,63 @@
+import type { Meta, StoryObj } from "@storybook/react"
+
+import { fn } from "@storybook/test"
+import { DataItem } from "."
+
+const meta: Meta = {
+ component: DataItem,
+ parameters: {
+ layout: "centered",
+ tags: ["autodocs"],
+ },
+ args: {
+ text: "[email protected]",
+ },
+ decorators: [
+ (Story) => (
+ <div className="w-64">
+ <Story />
+ </div>
+ ),
+ ],
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Primary: Story = {}
+
+export const Navigable: Story = {
+ args: {
+ text: "Isabella Gonzalez",
+ onClick: fn(),
+ },
+}
+
+export const NavigableWithAvatar: Story = {
+ args: {
+ text: "Isabella Gonzalez",
+ avatar: {
+ src: "https://github.com/dani-moreno.png",
+ alt: "I",
+ },
+ onClick: fn(),
+ },
+}
+
+export const NavigableWithAlt: Story = {
+ args: {
+ text: "Isabella Gonzalez",
+ avatar: {
+ alt: "I",
+ },
+ onClick: fn(),
+ },
+}
+
+export const NavigableWithAutoAlt: Story = {
+ args: {
+ text: "Isabella Gonzalez",
+ avatar: {},
+ onClick: fn(),
+ },
+}

lib/experimental/Layouts/Utils/DataItem/index.tsx

@@ -0,0 +1,110 @@
+import { Icon } from "@/components/Utilities/Icon"
+import { Avatar } from "@/experimental/Information/Avatar"
+import { Check, ChevronRight, LayersFront } from "@/icons"
+import { cn } from "@/lib/utils"
+import { ComponentProps, forwardRef, useEffect, useState } from "react"
+import { getColorFromText } from "../helper"
+
+interface DataItemProps {
+ text: string
+ avatar?: Omit<ComponentProps<typeof Avatar>, "alt"> & {
+ alt?: string
+ }
+ onClick?: () => void
+}
+
+const COPIED_SHOWN_MS = 1250
+
+export const DataItem = forwardRef<HTMLDivElement, DataItemProps>(
+ ({ text, avatar, onClick }, ref) => {
+ const [copied, setCopied] = useState(false)
+
+ useEffect(() => {
+ if (copied) {
+ const timer = setTimeout(() => setCopied(false), COPIED_SHOWN_MS)
+
+ return () => clearTimeout(timer)
+ }
+ }, [copied])
+
+ const copyHandler = async () => {
+ try {
+ await navigator.clipboard.writeText(text)
+ setCopied(true)
+ } catch (error) {
+ void error
+ }
+ }
+
+ const handleClick = onClick ?? copyHandler
+
+ const short =
+ avatar?.alt ??
+ text
+ .split(/\s+/)
+ .slice(0, 2)
+ .map((e) => e[0])
+ .join("")
+ .toLocaleUpperCase()
+
+ return (
+ <div
+ ref={ref}
+ role="button"
+ className={cn(
+ "group relative flex w-full cursor-pointer flex-row items-center justify-between gap-1.5 rounded-sm py-1.5 pl-1.5 pr-2 font-medium text-f1-foreground transition-colors duration-300 hover:bg-f1-background-secondary",
+ copied
+ ? "hover:bg-f1-background-positive"
+ : "hover:bg-f1-background-secondary"
+ )}
+ onClick={handleClick}
+ aria-label={onClick ? "Navigate" : `Copy ${text} to clipboard`}
+ onKeyDown={(e) => {
+ if (e.key === "Enter" || e.key === " ") {
+ e.preventDefault()
+ handleClick()
+ }
+ }}
+ tabIndex={0}
+ >
+ <div className="flex flex-row items-center gap-1.5">
+ {!!avatar && (
+ <Avatar
+ alt={short}
+ src={avatar?.src}
+ size="xsmall"
+ color={getColorFromText(text)}
+ />
+ )}
+ <p>{text}</p>
+ </div>
+ {!onClick ? (
+ <div className="flex items-center text-f1-foreground-secondary">
+ <Icon
+ icon={LayersFront}
+ size="md"
+ className={cn(
+ "absolute right-1.5 opacity-0 transition-all duration-300",
+ !copied && "group-hover:opacity-100"
+ )}
+ />
+ <Icon
+ icon={Check}
+ size="md"
+ className={cn(
+ "absolute right-1.5 opacity-0 transition-all duration-300",
+ copied && "group-hover:opacity-100"
+ )}
+ />
+ </div>
+ ) : (
+ <div className="flex items-center text-f1-foreground-secondary opacity-0 transition-all duration-300 group-hover:opacity-100">
+ <Icon icon={ChevronRight} size="md" />
+ </div>
+ )}
+ </div>
+ )
+ }
+)
+
+DataItem.displayName = "DataItem"

lib/experimental/Layouts/Utils/TagsList/index.stories.tsx → lib/experimental/Layouts/Utils/DataList/index.stories.tsx

@@ -1,49 +1,41 @@
 import type { Meta, StoryObj } from "@storybook/react"
-import { TagsList } from "."
+import { fn } from "@storybook/test"
+import { DataList } from "."
 
 const meta: Meta = {
- component: TagsList,
+ component: DataList,
  parameters: {
  layout: "centered",
  tags: ["autodocs"],
  },
  args: {
- tags: [
+ items: [
  {
- text: "Management",
- avatar: {
- alt: "M",
- },
+ text: "[email protected]",
  },
  {
  text: "Engineering",
  avatar: {
+ src: "https://github.com/dani-moreno.png",
  alt: "E",
  },
+ onClick: fn(),
  },
  {
  text: "Managers",
  avatar: {
  alt: "M",
  },
+ onClick: fn(),
  },
  {
  text: "Office/Spain",
- avatar: {
- alt: "O",
- },
+ avatar: {},
+ onClick: fn(),
  },
  {
  text: "Office/Remote",
- avatar: {
- alt: "O",
- },
- },
- {
- text: "Engineering/Management",
- avatar: {
- alt: "E",
- },
+ onClick: fn(),
  },
  ],
  },

lib/experimental/Layouts/Utils/DataList/index.tsx

@@ -0,0 +1,20 @@
+import { ComponentProps, forwardRef } from "react"
+import { DataItem } from "../DataItem"
+
+interface DataListProps {
+ items: ComponentProps<typeof DataItem>[]
+}
+
+export const DataList = forwardRef<HTMLDivElement, DataListProps>(
+ ({ items }, ref) => {
+ return (
+ <div ref={ref} className="flex flex-col gap-0.5">
+ {items.map(({ ...props }, i) => (
+ <DataItem key={i} {...props} />
+ ))}
+ </div>
+ )
+ }
+)
+
+DataList.displayName = "DataList"

lib/experimental/Layouts/Utils/DetailsItemsList/index.stories.tsx

@@ -5,7 +5,7 @@ import { ComponentProps } from "react"
 import avatar from "~/storybook-assets/avatar.jpeg"
 import { DetailsItemsList } from "."
 import { Weekdays } from "../../../Widgets/Content/Weekdays"
-import { TagsList } from "../TagsList"
+import { DataList } from "../DataList"
 
 const manager = (
  <Badge text="Isabella González" avatar={{ src: avatar, alt: "I" }} />
@@ -17,8 +17,8 @@ const weekdays = (
  />
 )
 const teams = (
- <TagsList
- tags={[
+ <DataList
+ items={[
  { text: "Management", avatar: { alt: "M" } },
  { text: "Engineering", avatar: { alt: "E" } },
  { text: "Managers", avatar: { alt: "M" } },

lib/experimental/Layouts/Utils/exports.tsx

@@ -1,4 +1,4 @@
+export * from "./DataList"
 export * from "./DetailsItem"
 export * from "./DetailsItemsList"
-export * from "./TagsList"
 export * from "./VerticalSeparator"