Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature/avatar component #129

Merged
merged 16 commits into from
Sep 28, 2023
Merged

Feature/avatar component #129

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
3e706ba
feat: add avatar primitives
Twonarly1 Sep 26, 2023
f6af536
feat: add initial avatar component
Twonarly1 Sep 26, 2023
b72e957
feat: add recipes
Twonarly1 Sep 26, 2023
70a86c0
feat: add initial storybook examples
Twonarly1 Sep 26, 2023
3b84f0c
Merge branch 'master' into feature/avatar-component
Twonarly1 Sep 26, 2023
f6a6e26
feat: add spec file and update storybook with toggle example
Twonarly1 Sep 26, 2023
eb747d7
feat: update recipe styles and base avatar file
Twonarly1 Sep 27, 2023
6216140
feat: add demo to example apps
Twonarly1 Sep 27, 2023
2cbec0f
chore: add justify content prop
Twonarly1 Sep 27, 2023
4b8bb35
chore: add changesets
Twonarly1 Sep 27, 2023
2baa2a3
chore: remove duplicate props
Twonarly1 Sep 27, 2023
86ff82c
Merge branch 'master' into feature/avatar-component
Twonarly1 Sep 27, 2023
4803cc4
Merge branch 'master' into feature/avatar-component
Twonarly1 Sep 28, 2023
d3358bc
refactor: update sorybook meta
Twonarly1 Sep 28, 2023
9faa4ec
chore: omit required prop id
Twonarly1 Sep 28, 2023
81f884d
chore: requested changes and update recipe to simplify component file
Twonarly1 Sep 28, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
chore: omit required prop id
  • Loading branch information
@Twonarly1
Twonarly1 committed Sep 28, 2023
commit 9faa4ec2377f4d12869c78ca29c0dd8be649533f
4 changes: 2 additions & 2 deletions examples/next/src/components/AvatarDemo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,9 +13,9 @@ const AvatarToggleDemo = () => {
<Wrapper title="Avatar">
<Flex direction="column" gap={2}>
{isLoaded ? (
<Avatar src="/img/logo.png" alt="avatar" id="" />
<Avatar src="/img/logo.png" alt="avatar" />
) : (
<Avatar src="" alt="" id="" />
<Avatar src="" alt="" />
)}
<Button
data-testid="toggle"
Expand Down
4 changes: 2 additions & 2 deletions examples/vite-react/src/components/AvatarDemo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,9 @@ const AvatarToggleDemo = () => {
<Wrapper title="Avatar">
<Flex direction="column" gap={2}>
{isLoaded ? (
<Avatar src="/img/logo.png" alt="avatar" id="" />
<Avatar src="/img/logo.png" alt="avatar" />
) : (
<Avatar src="" alt="" id="" />
<Avatar src="" alt="" />
)}
<Button
data-testid="toggle"
Expand Down
22 changes: 11 additions & 11 deletions src/components/core/Avatar/Avatar.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,9 @@ const AvatarToggle = () => {
return (
<Flex direction="column" gap={2}>
{isLoaded ? (
<Avatar src="/img/logo.png" alt="avatar" id="" />
<Avatar src="/img/logo.png" alt="avatar" />
) : (
<Avatar src="" alt="" id="" />
<Avatar src="" />
)}
<Button
data-testid="toggle"
Expand All @@ -37,22 +37,22 @@ export const Toggle: Story = {
export const Variants: Story = {
render: () => (
<HStack gap={2}>
<Avatar src="/img/logo.png" alt="avatar" id="" />
<Avatar variant="square" src="/img/logo.png" alt="avatar" id="" />
<Avatar src="/img/logo.png" alt="avatar" />
<Avatar variant="square" src="/img/logo.png" alt="avatar" />
</HStack>
),
};

export const Sizes: Story = {
render: () => (
<HStack gap={2}>
<Avatar size="xs" src="/img/logo.png" alt="avatar" id="" />
<Avatar size="sm" src="/img/logo.png" alt="avatar" id="" />
<Avatar src="/img/logo.png" alt="avatar" id="" />
<Avatar size="lg" src="/img/logo.png" alt="avatar" id="" />
<Avatar size="xl" src="/img/logo.png" alt="avatar" id="" />
<Avatar size="2xl" src="/img/logo.png" alt="avatar" id="" />
<Avatar size="3xl" src="/img/logo.png" alt="avatar" id="" />
<Avatar size="xs" src="/img/logo.png" alt="avatar" />
<Avatar size="sm" src="/img/logo.png" alt="avatar" />
<Avatar src="/img/logo.png" alt="avatar" />
<Avatar size="lg" src="/img/logo.png" alt="avatar" />
<Avatar size="xl" src="/img/logo.png" alt="avatar" />
<Avatar size="2xl" src="/img/logo.png" alt="avatar" />
<Avatar size="3xl" src="/img/logo.png" alt="avatar" />
</HStack>
),
};
Expand Down
5 changes: 4 additions & 1 deletion src/components/core/Avatar/Avatar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,10 @@ import { useIsMounted } from "lib/hooks";
import type { PrimitiveAvatarProps } from "components/primitives";
import type { AvatarVariantProps } from "generated/panda/recipes";

export interface Props extends PrimitiveAvatarProps, AvatarVariantProps {
export interface Props
// TODO: remove children omit once `@ark-ui/react` fixes required children type
extends Omit<PrimitiveAvatarProps, "id">,
AvatarVariantProps {
src?: string;
alt?: string;
fallback?: string;
Expand Down