Merge branch 'dev' into shadcn-mobile-menu

Author: pettinarip

package.json

@@ -39,6 +39,7 @@
     "@radix-ui/react-dialog": "^1.1.1",
     "@radix-ui/react-navigation-menu": "^1.2.0",
     "@radix-ui/react-popover": "^1.1.1",
+    "@radix-ui/react-radio-group": "^1.2.0",
     "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-visually-hidden": "^1.1.0",
     "@socialgouv/matomo-next": "^1.8.0",
@@ -131,4 +132,4 @@
     "jackspeak": "2.1.1",
     "sharp": "0.32.6"
   }
-}
+}

src/components/Footer.tsx

@@ -9,8 +9,8 @@ import Translation from "@/components/Translation"
 import { cn } from "@/lib/utils/cn"
 import { scrollIntoView } from "@/lib/utils/scrollIntoView"
 
-import { BaseLink } from "../../tailwind/Link"
 import { Button } from "../../tailwind/ui/buttons/Button"
+import { BaseLink } from "../../tailwind/ui/Link"
 
 import { List, ListItem } from "./ui/list"
 

src/components/SkipLink.tsx

@@ -2,7 +2,7 @@ import { useTranslation } from "next-i18next"
 
 import { MAIN_CONTENT_ID } from "@/lib/constants"
 
-import { BaseLink } from "../../tailwind/Link"
+import { BaseLink } from "../../tailwind/ui/Link"
 
 export const SkipLink = () => {
   const { t } = useTranslation()

tailwind/ui/Checkbox.tsx

@@ -4,6 +4,12 @@ import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
 
 import { cn } from "@/lib/utils/cn"
 
+/**
+ * Common style classes for the checkbox, radio, and switch controls
+ */
+export const commonControlClasses =
+  "size-4 border border-body-medium text-background hover:border-primary-high-contrast hover:bg-body-light focus-visible:outline-offset-4 focus-visible:outline-primary-hover disabled:cursor-not-allowed disabled:border-disabled disabled:bg-disabled aria-[invalid]:border-error aria-[invalid]:bg-error-light data-[state='checked']:not-disabled:border-primary data-[state='checked']:not-disabled:bg-primary data-[state='checked']:hover:not-disabled:bg-primary-hover"
+
 export type CheckboxProps = React.ComponentPropsWithoutRef<
   typeof CheckboxPrimitive.Root
 >
@@ -14,10 +20,7 @@ const Checkbox = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <CheckboxPrimitive.Root
     ref={ref}
-    className={cn(
-      "size-4 rounded-sm border border-body-medium text-background hover:border-primary-high-contrast hover:bg-body-light focus-visible:outline-offset-4 focus-visible:outline-primary-hover disabled:cursor-not-allowed disabled:border-disabled disabled:bg-disabled aria-[invalid]:border-error aria-[invalid]:bg-error-light data-[state='checked']:not-disabled:border-primary data-[state='checked']:not-disabled:bg-primary data-[state='checked']:hover:not-disabled:bg-primary-hover",
-      className
-    )}
+    className={cn(commonControlClasses, "rounded-sm", className)}
     {...props}
   >
     <CheckboxPrimitive.Indicator className="flex items-center justify-center">

tailwind/Link.tsx renamed to tailwind/ui/Link.tsx

@@ -0,0 +1,45 @@
+import * as React from "react"
+import { MdCircle } from "react-icons/md"
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
+
+import { cn } from "@/lib/utils/cn"
+
+import { commonControlClasses } from "./Checkbox"
+
+const RadioGroup = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  return (
+    <RadioGroupPrimitive.Root
+      className={cn("grid gap-2", className)}
+      {...props}
+      ref={ref}
+    />
+  )
+})
+RadioGroup.displayName = RadioGroupPrimitive.Root.displayName
+
+type RadioGroupItemProps = React.ComponentPropsWithoutRef<
+  typeof RadioGroupPrimitive.Item
+>
+
+const RadioGroupItem = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Item>,
+  RadioGroupItemProps
+>(({ className, ...props }, ref) => {
+  return (
+    <RadioGroupPrimitive.Item
+      ref={ref}
+      className={cn(commonControlClasses, "rounded-full", className)}
+      {...props}
+    >
+      <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
+        <MdCircle className="size-2" />
+      </RadioGroupPrimitive.Indicator>
+    </RadioGroupPrimitive.Item>
+  )
+})
+RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName
+
+export { RadioGroup, RadioGroupItem, type RadioGroupItemProps }

tailwind/ui/RadioGroup.tsx

@@ -1,11 +1,8 @@
-import { MdChevronRight, MdExpandMore, MdNightlight } from "react-icons/md"
+import { MdChevronRight, MdExpandMore } from "react-icons/md"
 import type { Meta, StoryObj } from "@storybook/react"
 
-import Translation from "@/components/Translation"
-
 import { HStack, VStack } from "../../../src/components/ui/flex"
 import { Button, type ButtonVariantProps } from "../buttons/Button"
-import { ButtonLink } from "../buttons/Button"
 
 const meta = {
   title: "Atoms / Form / ShadCn Buttons",
@@ -105,25 +102,3 @@ export const MultiLineText: Story = {
     </HStack>
   ),
 }
-
-export const OverrideStyles: Story = {
-  render: () => (
-    <>
-      <p>
-        Show custom styling examples here for visual testing of overrides from
-        the theme config
-      </p>
-      <VStack>
-        <Button aria-label="toggle" className="px-1.5">
-          <MdNightlight />
-        </Button>
-        <ButtonLink
-          className="rounded-full px-0 py-0"
-          linkProps={{ href: "#" }}
-        >
-          <Translation id="get-involved" />
-        </ButtonLink>
-      </VStack>
-    </>
-  ),
-}

tailwind/ui/__stories__/Button.stories.tsx

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from "@storybook/react/*"
+
+import { ButtonLink as ButtonLinkComponent } from "../buttons/Button"
+
+const meta = {
+  title: "Atoms / Form / ShadCn Buttons",
+  component: ButtonLinkComponent,
+} satisfies Meta<typeof ButtonLinkComponent>
+
+export default meta
+
+export const ButtonLink: StoryObj<typeof meta> = {
+  args: {
+    href: "#",
+    children: "What is Ethereum?",
+  },
+}

tailwind/ui/__stories__/ButtonLink.stories.tsx

@@ -0,0 +1,68 @@
+import type { Meta, StoryObj } from "@storybook/react/*"
+
+import { HStack } from "../../../src/components/ui/flex"
+import {
+  RadioGroup,
+  RadioGroupItem,
+  type RadioGroupItemProps,
+} from "../RadioGroup"
+
+const meta = {
+  title: "Atoms / Form / ShadCN Radio",
+  component: RadioGroup,
+} satisfies Meta<typeof RadioGroup>
+
+export default meta
+
+const DEFAULT_CHECKED = "checked"
+
+const radioSet: Array<RadioGroupItemProps & { label: string }> = [
+  {
+    id: "default",
+    value: "default",
+    label: "default",
+  },
+  {
+    id: DEFAULT_CHECKED,
+    value: DEFAULT_CHECKED,
+    label: DEFAULT_CHECKED,
+  },
+  {
+    id: "disabled",
+    value: "disabled",
+    disabled: true,
+    label: "disabled",
+  },
+  {
+    id: "disabled-checked",
+    value: "disabled-checked",
+    disabled: true,
+    checked: true,
+    label: "disabled-checked",
+  },
+  {
+    id: "invalid",
+    value: "invalid",
+    "aria-invalid": true,
+    label: "invalid",
+  },
+]
+
+export const Radio: StoryObj<typeof meta> = {
+  args: {
+    defaultValue: DEFAULT_CHECKED,
+    className: "gap-4",
+  },
+  render: (args) => (
+    <RadioGroup {...args}>
+      {radioSet.map((radio) => (
+        <HStack key={radio.id} asChild>
+          <label>
+            <RadioGroupItem {...radio} />
+            {radio.label}
+          </label>
+        </HStack>
+      ))}
+    </RadioGroup>
+  ),
+}

tailwind/ui/__stories__/RadioGroup.stories.tsx

@@ -2,19 +2,19 @@ import * as React from "react"
 import { cva, type VariantProps } from "class-variance-authority"
 import { Slot } from "@radix-ui/react-slot"
 
-import { BaseLink, type LinkProps } from "@/components/Link"
-
 import { cn } from "@/lib/utils/cn"
 import { type MatomoEventOptions, trackCustomEvent } from "@/lib/utils/matomo"
 import { scrollIntoView } from "@/lib/utils/scrollIntoView"
 
+import { BaseLink, type LinkProps } from "../Link"
+
 const buttonVariants = cva(
   "pointer inline-flex gap-2 items-center justify-center rounded border border-solid border-current text-primary transition focus-visible:outline focus-visible:outline-4 focus-visible:outline-primary-hover focus-visible:-outline-offset-1 disabled:text-disabled disabled:pointer-events-none hover:text-primary-hover [&[data-secondary='true']]:text-body [&>svg]:flex-shrink-0",
   {
     variants: {
       variant: {
         solid:
-          "!text-background bg-primary border-transparent disabled:bg-disabled disabled:text-background hover:text-background hover:bg-primary-hover hover:shadow-button-hover active:shadow-none",
+          "text-background bg-primary border-transparent disabled:bg-disabled disabled:text-background hover:text-background hover:bg-primary-hover hover:shadow-button-hover active:shadow-none",
         outline: "hover:shadow-button-hover active:shadow-none",
         ghost: "border-transparent",
         link: "border-transparent font-bold underline py-0 px-1 active:text-primary",
@@ -106,29 +106,22 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
 )
 Button.displayName = "Button"
 
-type ButtonLinkProps = ButtonProps & {
-  linkProps: LinkProps
+type ButtonLinkProps = Omit<LinkProps, "onClick"> & {
+  buttonProps?: ButtonProps
   customEventOptions?: MatomoEventOptions
 }
 
 const ButtonLink = React.forwardRef<HTMLAnchorElement, ButtonLinkProps>(
-  ({ linkProps, customEventOptions, children, ...buttonProps }, ref) => {
+  ({ buttonProps, customEventOptions, children, ...linkProps }, ref) => {
     const handleClick = () => {
       customEventOptions && trackCustomEvent(customEventOptions)
     }
     return (
       <Button asChild {...buttonProps}>
         <BaseLink
           ref={ref}
-          activeStyle={{}}
-          // TODO: Redress this override when migrating the link component
-          color={
-            buttonProps.variant === "solid" ? "background.base" : undefined
-          }
-          textDecor="none"
-          _hover={{
-            textDecor: "none",
-          }}
+          className="no-underline hover:no-underline"
+          activeClassName=""
           {...linkProps}
           onClick={handleClick}
         >