Merge branch 'dev' into Shadcn_Migrate_developers/index.ts

Author: pettinarip

.all-contributorsrc

@@ -12670,6 +12670,24 @@
       "contributions": [
         "content"
       ]
+    },
+    {
+      "login": "itzVarsha",
+      "name": "Varshitha",
+      "avatar_url": "https://avatars.githubusercontent.com/u/138134029?v=4",
+      "profile": "https://github.com/itzVarsha",
+      "contributions": [
+        "maintenance"
+      ]
+    },
+    {
+      "login": "alexandriaroberts",
+      "name": "Alexandria Roberts",
+      "avatar_url": "https://avatars.githubusercontent.com/u/31341867?v=4",
+      "profile": "https://alexandriaroberts.dev/",
+      "contributions": [
+        "code"
+      ]
     }
   ],
   "contributorsPerLine": 7,

README.md

@@ -1939,6 +1939,8 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
     <tr>
       <td align="center" valign="top" width="14.28%"><a href="https://growthepie.xyz"><img src="https://avatars.githubusercontent.com/u/32496674?v=4?s=100" width="100px;" alt="Matthias Seidl"/><br /><sub><b>Matthias Seidl</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/commits?author=mseidlx" title="Code">💻</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/JoeChenJ"><img src="https://avatars.githubusercontent.com/u/171761102?v=4?s=100" width="100px;" alt="JoeChenJ"/><br /><sub><b>JoeChenJ</b></sub></a><br /><a href="#content-JoeChenJ" title="Content">🖋</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/itzVarsha"><img src="https://avatars.githubusercontent.com/u/138134029?v=4?s=100" width="100px;" alt="Varshitha"/><br /><sub><b>Varshitha</b></sub></a><br /><a href="#maintenance-itzVarsha" title="Maintenance">🚧</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://alexandriaroberts.dev/"><img src="https://avatars.githubusercontent.com/u/31341867?v=4?s=100" width="100px;" alt="Alexandria Roberts"/><br /><sub><b>Alexandria Roberts</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/commits?author=alexandriaroberts" title="Code">💻</a></td>
     </tr>
   </tbody>
 </table>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ethereum-org-website",
-  "version": "9.4.1",
+  "version": "9.4.2",
   "license": "MIT",
   "private": true,
   "scripts": {
@@ -36,6 +36,7 @@
     "@hookform/resolvers": "^3.8.0",
     "@next/bundle-analyzer": "^14.2.5",
     "@radix-ui/react-accordion": "^1.2.0",
+    "@radix-ui/react-avatar": "^1.1.2",
     "@radix-ui/react-checkbox": "^1.1.1",
     "@radix-ui/react-compose-refs": "^1.1.0",
     "@radix-ui/react-dialog": "^1.1.1",

public/images/0xparc-logo.svg

@@ -0,0 +1,57 @@
+import * as React from "react"
+import { VStack } from "@chakra-ui/react"
+import { Meta, StoryObj } from "@storybook/react"
+
+import DocLink from "."
+
+const meta = {
+  title: "Molecules / Navigation / DocLink",
+  component: DocLink,
+  tags: ["autodocs"],
+} satisfies Meta<typeof DocLink>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    href: "/history/",
+    children: "History of Ethereum",
+  },
+  render: (args) => (
+    <VStack spacing={4} align="stretch">
+      <DocLink {...args} />
+    </VStack>
+  ),
+}
+
+export const ExternalLink: Story = {
+  args: {
+    href: "https://ethereum.org",
+    children: "Ethereum Website",
+    isExternal: true,
+  },
+  render: (args) => (
+    <VStack spacing={4} align="stretch">
+      <DocLink {...args} />
+    </VStack>
+  ),
+}
+
+export const MultipleLinks: Story = {
+  args: {
+    href: "#",
+  },
+  render: () => (
+    <VStack spacing={4} align="stretch">
+      <DocLink href="/history/">History of Ethereum</DocLink>
+      <DocLink href="https://ethereum.org" isExternal>
+        Ethereum Website
+      </DocLink>
+      <DocLink href="/developers/docs/intro-to-ethereum/">
+        Introduction to Ethereum
+      </DocLink>
+    </VStack>
+  ),
+}

src/components/DocLink/DocLink.stories.tsx

@@ -2,9 +2,9 @@ import { AiOutlineArrowRight } from "react-icons/ai"
 
 import { cn } from "@/lib/utils/cn"
 
-import { Center, Flex, Stack } from "./ui/flex"
-import { LinkBox, LinkOverlay } from "./ui/link-box"
-import Emoji from "./Emoji"
+import Emoji from "../Emoji"
+import { Center, Flex, Stack } from "../ui/flex"
+import { LinkBox, LinkOverlay } from "../ui/link-box"
 
 import { useRtlFlip } from "@/hooks/useRtlFlip"
 

src/components/DocLink.tsx renamed to src/components/DocLink/index.tsx

@@ -1,8 +1,7 @@
-import * as React from "react"
-import { AvatarGroup, HStack, VStack } from "@chakra-ui/react"
-import { Meta, StoryObj } from "@storybook/react"
+import type { Meta, StoryObj } from "@storybook/react"
 
-import Avatar from "."
+import { Avatar, AvatarGroup } from "../avatar"
+import { HStack, VStack } from "../flex"
 
 const meta = {
   title: "Atoms / Media & Icons / Avatars",
@@ -15,13 +14,13 @@ type Story = StoryObj<typeof meta>
 
 export const Single: Story = {
   args: {
-    name: "Dan Abrahmov",
+    name: "dan abrahmov",
     src: "https://bit.ly/dan-abramov",
     href: "#",
   },
   render: (args) => (
-    <VStack spacing={4}>
-      {["lg", "md", "sm", "xs"].map((size) => (
+    <VStack className="gap-4">
+      {(["lg", "md", "sm", "xs"] as const).map((size) => (
         <Avatar key={size} size={size} {...args} />
       ))}
     </VStack>
@@ -35,12 +34,12 @@ export const Group: Story = {
     href: "#",
   },
   render: (args) => (
-    <VStack spacing={4}>
-      {["sm", "xs"].map((size) => (
+    <VStack className="gap-4">
+      {(["sm", "xs"] as const).map((size) => (
         <AvatarGroup key={size} size={size} max={3}>
-          <Avatar {...args} />
-          <Avatar {...args} />
-          <Avatar {...args} />
+          <Avatar dataTest="one" {...args} />
+          <Avatar dataTest="two" {...args} />
+          <Avatar dataTest="three" {...args} />
           <Avatar {...args} />
         </AvatarGroup>
       ))}
@@ -51,19 +50,19 @@ export const Group: Story = {
 export const WithUsername: Story = {
   args: {
     name: "Dan Abrahmov",
-    src: "https://bit.ly/dan-abramov",
-    href: "#",
+    src: "http://bit.ly/dan-abramov",
+    href: "http://bit.ly/dan-abramov",
     label: "daneabrahmov",
   },
   render: (args) => (
-    <HStack spacing={16}>
+    <HStack className="gap-4">
       <VStack>
-        {["md", "sm"].map((size, idx) => (
+        {(["md", "sm", "xs"] as const).map((size, idx) => (
           <Avatar key={idx} size={size} {...args} />
         ))}
       </VStack>
       <VStack>
-        {["md", "sm"].map((size, idx) => (
+        {(["md", "sm", "xs"] as const).map((size, idx) => (
           <Avatar key={idx} size={size} direction="column" {...args} />
         ))}
       </VStack>