Component cleanup
This commit is contained in:
adilallo
@@ -0,0 +1,140 @@
|
||||
import Avatar from "../../app/components/asset/Avatar";
|
||||
|
||||
export default {
|
||||
title: "Components/Asset/Avatar",
|
||||
component: Avatar,
|
||||
parameters: {
|
||||
layout: "centered",
|
||||
docs: {
|
||||
description: {
|
||||
component:
|
||||
"Rounded profile image primitive; stacks with **`AvatarContainer`**. Fuller DS-driven Avatar behavior is **[CR-58](https://linear.app/community-rule/issue/CR-58)**.",
|
||||
},
|
||||
},
|
||||
},
|
||||
argTypes: {
|
||||
src: {
|
||||
control: { type: "text" },
|
||||
description: "The source URL of the avatar image",
|
||||
},
|
||||
alt: {
|
||||
control: { type: "text" },
|
||||
description: "Alt text for accessibility",
|
||||
},
|
||||
size: {
|
||||
control: { type: "select" },
|
||||
options: ["small", "medium", "large", "xlarge"],
|
||||
description: "The size of the avatar",
|
||||
},
|
||||
className: {
|
||||
control: { type: "text" },
|
||||
description: "Additional CSS classes",
|
||||
},
|
||||
},
|
||||
tags: ["autodocs"],
|
||||
};
|
||||
|
||||
export const Default = {
|
||||
args: {
|
||||
src: "assets/Avatar_1.png",
|
||||
alt: "User Avatar",
|
||||
size: "medium",
|
||||
},
|
||||
};
|
||||
|
||||
export const Sizes = {
|
||||
args: {
|
||||
src: "assets/Avatar_1.png",
|
||||
alt: "User Avatar",
|
||||
},
|
||||
render: (args) => (
|
||||
<div className="space-y-4">
|
||||
<div className="space-x-4">
|
||||
<Avatar {...args} size="small" />
|
||||
<Avatar {...args} size="medium" />
|
||||
<Avatar {...args} size="large" />
|
||||
<Avatar {...args} size="xlarge" />
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: "Different size variants available for the avatar component.",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const DifferentAvatars = {
|
||||
args: {
|
||||
size: "large",
|
||||
},
|
||||
render: (args) => (
|
||||
<div className="space-y-4">
|
||||
<div className="space-x-4">
|
||||
<Avatar {...args} src="assets/Avatar_1.png" alt="User 1" />
|
||||
<Avatar {...args} src="assets/Avatar_2.png" alt="User 2" />
|
||||
<Avatar {...args} src="assets/Avatar_3.png" alt="User 3" />
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: "Different avatar images available in the project.",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const AllSizesWithDifferentAvatars = {
|
||||
args: {},
|
||||
render: () => (
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">Small Size</h3>
|
||||
<div className="space-x-4">
|
||||
<Avatar size="small" src="assets/Avatar_1.png" alt="User 1" />
|
||||
<Avatar size="small" src="assets/Avatar_2.png" alt="User 2" />
|
||||
<Avatar size="small" src="assets/Avatar_3.png" alt="User 3" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">Medium Size</h3>
|
||||
<div className="space-x-4">
|
||||
<Avatar size="medium" src="assets/Avatar_1.png" alt="User 1" />
|
||||
<Avatar size="medium" src="assets/Avatar_2.png" alt="User 2" />
|
||||
<Avatar size="medium" src="assets/Avatar_3.png" alt="User 3" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">Large Size</h3>
|
||||
<div className="space-x-4">
|
||||
<Avatar size="large" src="assets/Avatar_1.png" alt="User 1" />
|
||||
<Avatar size="large" src="assets/Avatar_2.png" alt="User 2" />
|
||||
<Avatar size="large" src="assets/Avatar_3.png" alt="User 3" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">XLarge Size</h3>
|
||||
<div className="space-x-4">
|
||||
<Avatar size="xlarge" src="assets/Avatar_1.png" alt="User 1" />
|
||||
<Avatar size="xlarge" src="assets/Avatar_2.png" alt="User 2" />
|
||||
<Avatar size="xlarge" src="assets/Avatar_3.png" alt="User 3" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story:
|
||||
"Complete overview of all avatar sizes with different user images.",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
@@ -0,0 +1,206 @@
|
||||
import AvatarContainer from "../../app/components/asset/AvatarContainer";
|
||||
import Avatar from "../../app/components/asset/Avatar";
|
||||
|
||||
export default {
|
||||
title: "Components/Asset/AvatarContainer",
|
||||
component: AvatarContainer,
|
||||
parameters: {
|
||||
layout: "centered",
|
||||
docs: {
|
||||
description: {
|
||||
component:
|
||||
"Stacks multiple `Avatar` children with overlapping spacing. Lives under `asset/` next to Avatar-related chrome.",
|
||||
},
|
||||
},
|
||||
},
|
||||
argTypes: {
|
||||
size: {
|
||||
control: { type: "select" },
|
||||
options: ["small", "medium", "large", "xlarge"],
|
||||
description: "The size of the avatar container and its children",
|
||||
},
|
||||
className: {
|
||||
control: { type: "text" },
|
||||
description: "Additional CSS classes",
|
||||
},
|
||||
},
|
||||
tags: ["autodocs"],
|
||||
};
|
||||
|
||||
export const Default = {
|
||||
args: {
|
||||
size: "medium",
|
||||
},
|
||||
render: (args) => (
|
||||
<AvatarContainer {...args}>
|
||||
<Avatar size={args.size} src="assets/Avatar_1.png" alt="User 1" />
|
||||
<Avatar size={args.size} src="assets/Avatar_2.png" alt="User 2" />
|
||||
<Avatar size={args.size} src="assets/Avatar_3.png" alt="User 3" />
|
||||
</AvatarContainer>
|
||||
),
|
||||
};
|
||||
|
||||
export const Sizes = {
|
||||
args: {},
|
||||
render: () => (
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">Small Size</h3>
|
||||
<AvatarContainer size="small">
|
||||
<Avatar size="small" src="assets/Avatar_1.png" alt="User 1" />
|
||||
<Avatar size="small" src="assets/Avatar_2.png" alt="User 2" />
|
||||
<Avatar size="small" src="assets/Avatar_3.png" alt="User 3" />
|
||||
</AvatarContainer>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">Medium Size</h3>
|
||||
<AvatarContainer size="medium">
|
||||
<Avatar size="medium" src="assets/Avatar_1.png" alt="User 1" />
|
||||
<Avatar size="medium" src="assets/Avatar_2.png" alt="User 2" />
|
||||
<Avatar size="medium" src="assets/Avatar_3.png" alt="User 3" />
|
||||
</AvatarContainer>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">Large Size</h3>
|
||||
<AvatarContainer size="large">
|
||||
<Avatar size="large" src="assets/Avatar_1.png" alt="User 1" />
|
||||
<Avatar size="large" src="assets/Avatar_2.png" alt="User 2" />
|
||||
<Avatar size="large" src="assets/Avatar_3.png" alt="User 3" />
|
||||
</AvatarContainer>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">XLarge Size</h3>
|
||||
<AvatarContainer size="xlarge">
|
||||
<Avatar size="xlarge" src="assets/Avatar_1.png" alt="User 1" />
|
||||
<Avatar size="xlarge" src="assets/Avatar_2.png" alt="User 2" />
|
||||
<Avatar size="xlarge" src="assets/Avatar_3.png" alt="User 3" />
|
||||
</AvatarContainer>
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story:
|
||||
"Different size variants of the avatar container with overlapping spacing.",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const DifferentGroupSizes = {
|
||||
args: {},
|
||||
render: () => (
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">2 Users</h3>
|
||||
<AvatarContainer size="large">
|
||||
<Avatar size="large" src="assets/Avatar_1.png" alt="User 1" />
|
||||
<Avatar size="large" src="assets/Avatar_2.png" alt="User 2" />
|
||||
</AvatarContainer>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">3 Users</h3>
|
||||
<AvatarContainer size="large">
|
||||
<Avatar size="large" src="assets/Avatar_1.png" alt="User 1" />
|
||||
<Avatar size="large" src="assets/Avatar_2.png" alt="User 2" />
|
||||
<Avatar size="large" src="assets/Avatar_3.png" alt="User 3" />
|
||||
</AvatarContainer>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">4 Users</h3>
|
||||
<AvatarContainer size="large">
|
||||
<Avatar size="large" src="assets/Avatar_1.png" alt="User 1" />
|
||||
<Avatar size="large" src="assets/Avatar_2.png" alt="User 2" />
|
||||
<Avatar size="large" src="assets/Avatar_3.png" alt="User 3" />
|
||||
<Avatar size="large" src="assets/Avatar_1.png" alt="User 4" />
|
||||
</AvatarContainer>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">5 Users</h3>
|
||||
<AvatarContainer size="large">
|
||||
<Avatar size="large" src="assets/Avatar_1.png" alt="User 1" />
|
||||
<Avatar size="large" src="assets/Avatar_2.png" alt="User 2" />
|
||||
<Avatar size="large" src="assets/Avatar_3.png" alt="User 3" />
|
||||
<Avatar size="large" src="assets/Avatar_1.png" alt="User 4" />
|
||||
<Avatar size="large" src="assets/Avatar_2.png" alt="User 5" />
|
||||
</AvatarContainer>
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story:
|
||||
"Avatar containers with different numbers of users to show the overlapping effect.",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const InContext = {
|
||||
args: {},
|
||||
render: () => (
|
||||
<div className="min-h-screen bg-[var(--color-surface-default-primary)] p-8">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<h2 className="text-white font-semibold mb-6">
|
||||
Avatar Container in Context
|
||||
</h2>
|
||||
|
||||
<div className="space-y-8">
|
||||
<div className="bg-[var(--color-surface-default-secondary)] p-6 rounded-lg">
|
||||
<h3 className="text-white font-semibold mb-4">Team Members</h3>
|
||||
<div className="flex items-center space-x-4">
|
||||
<AvatarContainer size="medium">
|
||||
<Avatar size="medium" src="assets/Avatar_1.png" alt="User 1" />
|
||||
<Avatar size="medium" src="assets/Avatar_2.png" alt="User 2" />
|
||||
<Avatar size="medium" src="assets/Avatar_3.png" alt="User 3" />
|
||||
</AvatarContainer>
|
||||
<span className="text-white">3 team members</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-[var(--color-surface-default-secondary)] p-6 rounded-lg">
|
||||
<h3 className="text-white font-semibold mb-4">
|
||||
Project Contributors
|
||||
</h3>
|
||||
<div className="flex items-center space-x-4">
|
||||
<AvatarContainer size="large">
|
||||
<Avatar size="large" src="assets/Avatar_1.png" alt="User 1" />
|
||||
<Avatar size="large" src="assets/Avatar_2.png" alt="User 2" />
|
||||
<Avatar size="large" src="assets/Avatar_3.png" alt="User 3" />
|
||||
<Avatar size="large" src="assets/Avatar_1.png" alt="User 4" />
|
||||
</AvatarContainer>
|
||||
<span className="text-white">4 contributors</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-[var(--color-surface-default-secondary)] p-6 rounded-lg">
|
||||
<h3 className="text-white font-semibold mb-4">Small Team</h3>
|
||||
<div className="flex items-center space-x-4">
|
||||
<AvatarContainer size="small">
|
||||
<Avatar size="small" src="assets/Avatar_1.png" alt="User 1" />
|
||||
<Avatar size="small" src="assets/Avatar_2.png" alt="User 2" />
|
||||
</AvatarContainer>
|
||||
<span className="text-white">2 members</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story:
|
||||
"Avatar containers used in realistic contexts to show how they integrate with other UI elements.",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
@@ -1,4 +1,6 @@
|
||||
import { Icon, ICON_NAME_OPTIONS } from "../../app/components/asset";
|
||||
import Icon, {
|
||||
ICON_NAME_OPTIONS,
|
||||
} from "../../app/components/asset/icon";
|
||||
|
||||
export default {
|
||||
title: "Components/Asset/Icon",
|
||||
|
||||
@@ -0,0 +1,202 @@
|
||||
import Logo from "../../app/components/asset/Logo";
|
||||
|
||||
export default {
|
||||
title: "Components/Asset/Logo",
|
||||
component: Logo,
|
||||
parameters: {
|
||||
layout: "centered",
|
||||
docs: {
|
||||
description: {
|
||||
component:
|
||||
"The CommunityRule logo component with multiple size variants for different contexts (header, footer, home header). Can display with or without text and adapts colors based on context.",
|
||||
},
|
||||
},
|
||||
},
|
||||
argTypes: {
|
||||
size: {
|
||||
control: { type: "select" },
|
||||
options: [
|
||||
"default",
|
||||
"footer",
|
||||
"createFlow",
|
||||
"topNavFolderTop",
|
||||
"topNavHeader",
|
||||
],
|
||||
description: "The size variant of the logo",
|
||||
},
|
||||
palette: {
|
||||
control: { type: "select" },
|
||||
options: ["default", "inverse"],
|
||||
description:
|
||||
"Visual style: default (dark on light) or inverse (e.g. on teal)",
|
||||
},
|
||||
wordmark: {
|
||||
control: { type: "boolean" },
|
||||
description: "Whether to show the CommunityRule wordmark",
|
||||
},
|
||||
},
|
||||
tags: ["autodocs"],
|
||||
};
|
||||
|
||||
export const Default = {
|
||||
args: {
|
||||
size: "default",
|
||||
wordmark: true,
|
||||
},
|
||||
};
|
||||
|
||||
export const Sizes = {
|
||||
args: {
|
||||
wordmark: true,
|
||||
},
|
||||
render: (args) => (
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">Standard Sizes</h3>
|
||||
<div className="space-x-4">
|
||||
<Logo {...args} size="default" />
|
||||
<Logo {...args} size="footer" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">Responsive Sizes</h3>
|
||||
<div className="space-x-4">
|
||||
<Logo {...args} size="createFlow" />
|
||||
<Logo {...args} size="topNavFolderTop" />
|
||||
<Logo {...args} size="topNavHeader" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story:
|
||||
"Different size variants available for the logo component. Responsive sizes adapt to breakpoints.",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const IconOnly = {
|
||||
args: {
|
||||
size: "default",
|
||||
wordmark: false,
|
||||
},
|
||||
render: (args) => (
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">
|
||||
Icon Only - Standard Sizes
|
||||
</h3>
|
||||
<div className="space-x-4">
|
||||
<Logo {...args} size="default" />
|
||||
<Logo {...args} size="footer" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">
|
||||
Icon Only - Responsive Sizes
|
||||
</h3>
|
||||
<div className="space-x-4">
|
||||
<Logo {...args} size="createFlow" />
|
||||
<Logo {...args} size="topNavFolderTop" />
|
||||
<Logo {...args} size="topNavHeader" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story:
|
||||
"Logo variants with only the icon, no text. Useful for compact spaces.",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const TopContext = {
|
||||
args: {},
|
||||
render: () => (
|
||||
<div className="min-h-screen bg-gradient-to-b from-[var(--color-surface-default-primary)] to-[var(--color-surface-default-secondary)] p-8">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<h2 className="text-white font-semibold mb-6">
|
||||
Top (navigation) — responsive
|
||||
</h2>
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center space-x-4">
|
||||
<span className="text-white text-sm w-32">FolderTop:</span>
|
||||
<Logo size="topNavFolderTop" wordmark palette="inverse" />
|
||||
</div>
|
||||
<div className="flex items-center space-x-4">
|
||||
<span className="text-white text-sm w-32">Header:</span>
|
||||
<Logo size="topNavHeader" wordmark />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story:
|
||||
"`Top` (Figma Navigation / Top) logo sizes: folder-top vs header variants.",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const CreateFlowContext = {
|
||||
args: {},
|
||||
render: () => (
|
||||
<div className="min-h-screen bg-black p-8">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<h2 className="text-white font-semibold mb-6">Create Flow Context</h2>
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center space-x-4">
|
||||
<span className="text-white text-sm w-32">CreateFlow:</span>
|
||||
<Logo size="createFlow" wordmark />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story:
|
||||
"Create flow context showing responsive logo. Used in CreateFlowTopNav component.",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const CreateFlowCompletedInverse = {
|
||||
args: {},
|
||||
render: () => (
|
||||
<div
|
||||
className="min-h-screen p-8"
|
||||
style={{ background: "var(--color-teal-teal50, #c9fef9)" }}
|
||||
>
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<h2 className="font-semibold mb-6 text-[var(--color-content-invert-primary)]">
|
||||
Completed page (inverse on teal)
|
||||
</h2>
|
||||
<div className="space-y-4">
|
||||
<Logo size="createFlow" wordmark palette="inverse" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story:
|
||||
"Same size as CreateFlowTopNav with inverse palette, as used on the completed page.",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
Reference in New Issue
Block a user