Merge pull request #9868 from TylerAPfledderer/feat/new-avatar-theme

feat(Avatar): create component, theme, and stories

Author: pettinarip

src/@chakra-ui/gatsby-plugin/components/Avatar.ts

@@ -0,0 +1,93 @@
+import {
+  createMultiStyleConfigHelpers,
+  cssVar,
+  defineStyle,
+  getToken,
+} from "@chakra-ui/react"
+import { avatarAnatomy } from "@chakra-ui/anatomy"
+import { avatarDefaultTheme, defineMergeStyles } from "./components.utils"
+import { pick } from "lodash"
+
+const { defineMultiStyleConfig, definePartsStyle } =
+  createMultiStyleConfigHelpers(avatarAnatomy.keys)
+
+const { baseStyle: defaultBaseStyle, sizes: defaultSizes } = avatarDefaultTheme
+
+const $border = cssVar("avatar-border-color", "transparent")
+const $mlBySize = cssVar("ml-by-size")
+
+const baseStyleContainer = defineStyle((props) => {
+  const primaryLowContrast = getToken(
+    "colors",
+    "primary.lowContrast"
+  )(props.theme)
+
+  return defineMergeStyles(defaultBaseStyle?.(props).container, {
+    [$border.variable]: "transparent",
+    borderWidth: "1px",
+    "&:hover, [data-peer]:hover ~ &": {
+      boxShadow: `0.15em 0.15em 0 ${primaryLowContrast}`,
+    },
+    _focus: {
+      outline: "4px solid",
+      outlineColor: "primary.hover",
+      outlineOffset: "-1px",
+    },
+    _active: {
+      [$border.variable]: "colors.primary.hover",
+      boxShadow: "none",
+      "& img": {
+        opacity: 0.7,
+      },
+    },
+    "[role='group'] &": {
+      [$border.variable]: "colors.background.base",
+      _notLast: {
+        marginLeft: $mlBySize.reference,
+      },
+    },
+  })
+})
+
+const baseStyleExessLabel = defineStyle((props) =>
+  defineMergeStyles(defaultBaseStyle?.(props).excessLabel, {
+    bg: "body.base",
+    color: "background.base",
+    ms: $mlBySize.reference,
+  })
+)
+
+const baseStyle = definePartsStyle((props) => ({
+  container: baseStyleContainer(props),
+  excessLabel: baseStyleExessLabel(props),
+}))
+
+const USED_SIZES = ["xs", "sm", "md", "lg"] as const
+
+const pickedDefaultSizes: { [k in (typeof USED_SIZES)[number]]?: object } =
+  pick(defaultSizes, ...USED_SIZES)
+
+const sizes = defineMergeStyles(pickedDefaultSizes, {
+  xs: {
+    group: {
+      [$mlBySize.variable]: "space.-1",
+    },
+    excessLabel: {
+      fontSize: "0.563rem",
+    },
+  },
+  sm: {
+    group: {
+      [$mlBySize.variable]: "space.-2",
+    },
+    excessLabel: {
+      fontSize: "sm",
+    },
+  },
+})
+
+export const Avatar = defineMultiStyleConfig({
+  baseStyle,
+  // @ts-expect-error
+  sizes,
+})

src/@chakra-ui/gatsby-plugin/components/index.ts

@@ -1,3 +1,4 @@
+import { Avatar } from "./Avatar"
 import { Badge } from "./Badge"
 import { Button } from "./Button"
 import { Link } from "./Link"
@@ -12,7 +13,6 @@ import { Switch } from "./Switch"
 import { Input } from "./Input"
 import {
   accordionDefaultTheme,
-  avatarDefaultTheme,
   breadcrumbDefaultTheme,
   closeButtonDefaultTheme,
   codeDefaultTheme,
@@ -28,7 +28,7 @@ import {
 
 export default {
   Accordion: accordionDefaultTheme,
-  Avatar: avatarDefaultTheme,
+  Avatar,
   Badge,
   Breadcrumb: breadcrumbDefaultTheme,
   Button,

src/@chakra-ui/gatsby-plugin/semanticTokens.ts

@@ -101,12 +101,6 @@ const semanticTokens = {
         "linear-gradient(102.7deg, rgba(185, 185, 241, 0.2) 0%, rgba(84, 132, 234, 0.2) 51.56%, rgba(58, 142, 137, 0.2) 100%)",
     },
   },
-  shadows: {
-    buttonHover: {
-      _light: "4px 4px 0 var(--eth-colors-blue-100)",
-      _dark: "4px 4px 0 #352313",
-    },
-  },
 }
 
 export default semanticTokens

src/components/Avatar/Avatar.stories.tsx

@@ -0,0 +1,73 @@
+import * as React from "react"
+import { Meta, StoryObj } from "@storybook/react"
+import { VStack, AvatarGroup, HStack } from "@chakra-ui/react"
+import Avatar from "."
+
+type AvatarType = typeof Avatar
+
+const meta: Meta<AvatarType> = {
+  title: "Atoms / Media & Icons / Avatars",
+  component: Avatar,
+}
+
+export default meta
+
+type Story = StoryObj<AvatarType>
+
+export const Single: Story = {
+  args: {
+    name: "Dan Abrahmov",
+    src: "https://bit.ly/dan-abramov",
+    href: "#",
+  },
+  render: (args) => (
+    <VStack spacing={4}>
+      {["lg", "md", "sm", "xs"].map((size) => (
+        <Avatar key={size} size={size} {...args} />
+      ))}
+    </VStack>
+  ),
+}
+
+export const Group: Story = {
+  args: {
+    name: "Dan Abrahmov",
+    src: "https://bit.ly/dan-abramov",
+    href: "#",
+  },
+  render: (args) => (
+    <VStack spacing={4}>
+      {["sm", "xs"].map((size) => (
+        <AvatarGroup key={size} size={size} max={3}>
+          <Avatar {...args} />
+          <Avatar {...args} />
+          <Avatar {...args} />
+          <Avatar {...args} />
+        </AvatarGroup>
+      ))}
+    </VStack>
+  ),
+}
+
+export const WithUsername: Story = {
+  args: {
+    name: "Dan Abrahmov",
+    src: "https://bit.ly/dan-abramov",
+    href: "#",
+    label: "daneabrahmov",
+  },
+  render: (args) => (
+    <HStack spacing={16}>
+      <VStack>
+        {["md", "sm"].map((size) => (
+          <Avatar size={size} {...args} />
+        ))}
+      </VStack>
+      <VStack>
+        {["md", "sm"].map((size) => (
+          <Avatar size={size} direction="column" {...args} />
+        ))}
+      </VStack>
+    </HStack>
+  ),
+}

src/components/Avatar/index.tsx

@@ -0,0 +1,77 @@
+import * as React from "react"
+import {
+  Avatar as ChakraAvatar,
+  AvatarProps,
+  Center,
+  CenterProps,
+  FlexProps,
+  forwardRef,
+  Link,
+  LinkBox,
+  LinkOverlay,
+  LinkProps,
+  ThemingProps,
+} from "@chakra-ui/react"
+import { RxExternalLink } from "react-icons/rx"
+
+type AssignAvatarProps = Required<Pick<AvatarProps, "name" | "src">> &
+  AvatarProps
+
+type AvatarLinkProps = AssignAvatarProps &
+  Pick<LinkProps, "href"> &
+  ThemingProps<"Avatar"> & {
+    label?: string
+    direction?: "column" | "row"
+  }
+
+const Avatar = forwardRef<AvatarLinkProps, "div" | "a">((props, ref) => {
+  const { href, src, name, size = "md", label, direction = "row" } = props
+
+  const avatarProps = {
+    src,
+    name,
+    size,
+  }
+
+  const linkProps = {
+    href,
+    isExternal: true,
+    color: "primary.base",
+  }
+
+  if (label) {
+    const _direction: "column-reverse" | "row-reverse" = `${direction}-reverse`
+    return (
+      <LinkBox as={Center} ref={ref} flexDirection={_direction} columnGap="1">
+        <LinkOverlay
+          as={Link}
+          data-peer
+          display="inline-flex"
+          textDecoration="none"
+          alignItems="center"
+          gap="1"
+          p="1"
+          fontSize={size !== "md" ? "xs" : "sm"}
+          zIndex="overlay"
+          {...linkProps}
+        >
+          {label}
+          <RxExternalLink />
+        </LinkOverlay>
+        <ChakraAvatar {...avatarProps} />
+      </LinkBox>
+    )
+  }
+
+  return (
+    <ChakraAvatar
+      as={Link}
+      ref={ref}
+      showBorder
+      {...avatarProps}
+      {...linkProps}
+    />
+  )
+})
+
+export default Avatar