-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
8 changed files
with
165 additions
and
105 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,19 +1,16 @@ | ||
import type { Meta, StoryObj } from "@storybook/react" | ||
|
||
import { fn } from "@storybook/test" | ||
import { Tag } from "." | ||
import { DataItem } from "." | ||
|
||
const meta: Meta = { | ||
component: Tag, | ||
component: DataItem, | ||
parameters: { | ||
layout: "centered", | ||
tags: ["autodocs"], | ||
}, | ||
args: { | ||
text: "Isabella González", | ||
avatar: { | ||
alt: "I", | ||
}, | ||
text: "[email protected]", | ||
}, | ||
decorators: [ | ||
(Story) => ( | ||
|
@@ -29,23 +26,38 @@ type Story = StoryObj<typeof meta> | |
|
||
export const Primary: Story = {} | ||
|
||
export const Avatar: 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 Clickable: Story = { | ||
export const NavigableWithAlt: Story = { | ||
args: { | ||
text: "Isabella Gonzalez", | ||
avatar: { | ||
alt: "I", | ||
}, | ||
onClick: fn(), | ||
}, | ||
} | ||
|
||
export const Alt: Story = { | ||
export const NavigableWithAutoAlt: Story = { | ||
args: { | ||
avatar: undefined, | ||
text: "Isabella Gonzalez", | ||
avatar: {}, | ||
onClick: fn(), | ||
}, | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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" |
30 changes: 11 additions & 19 deletions
30
.../Layouts/Utils/TagsList/index.stories.tsx → .../Layouts/Utils/DataList/index.stories.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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(), | ||
}, | ||
], | ||
}, | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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" |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,4 +1,4 @@ | ||
export * from "./DataList" | ||
export * from "./DetailsItem" | ||
export * from "./DetailsItemsList" | ||
export * from "./TagsList" | ||
export * from "./VerticalSeparator" |