✨(front) add description to Buttons

We want to display full description below buttons for mobile specific
displays.

src/frontend/src/primitives/Button.tsx

@@ -5,10 +5,14 @@ import {
 import { type RecipeVariantProps } from '@/styled-system/css'
 import { buttonRecipe, type ButtonRecipe } from './buttonRecipe'
 import { TooltipWrapper, type TooltipWrapperProps } from './TooltipWrapper'
+import { ReactNode } from 'react'
 
 export type ButtonProps = RecipeVariantProps<ButtonRecipe> &
   RACButtonsProps &
-  TooltipWrapperProps
+  TooltipWrapperProps & {
+    // Use tooltip as description below the button.
+    description?: boolean
+  }
 
 export const Button = ({
   tooltip,
@@ -22,7 +26,10 @@ export const Button = ({
       <RACButton
         className={buttonRecipe(variantProps)}
         {...(componentProps as RACButtonsProps)}
-      />
+      >
+        {componentProps.children as ReactNode}
+        {props.description && <span>{tooltip}</span>}
+      </RACButton>
     </TooltipWrapper>
   )
 }

src/frontend/src/primitives/LinkButton.tsx

@@ -2,10 +2,14 @@ import { Link, LinkProps } from 'react-aria-components'
 import { type RecipeVariantProps } from '@/styled-system/css'
 import { buttonRecipe, type ButtonRecipe } from './buttonRecipe'
 import { TooltipWrapper, type TooltipWrapperProps } from './TooltipWrapper'
+import { ReactNode } from 'react'
 
 type LinkButtonProps = RecipeVariantProps<ButtonRecipe> &
   LinkProps &
-  TooltipWrapperProps
+  TooltipWrapperProps & {
+    // Use tooltip as description below the button.
+    description?: boolean
+  }
 
 export const LinkButton = ({
   tooltip,
@@ -16,7 +20,12 @@ export const LinkButton = ({
 
   return (
     <TooltipWrapper tooltip={tooltip} tooltipType={tooltipType}>
-      <Link className={buttonRecipe(variantProps)} {...componentProps} />
+      <Link className={buttonRecipe(variantProps)} {...componentProps}>
+        <>
+          {componentProps.children as ReactNode}
+          {props.description && <span>{tooltip}</span>}
+        </>
+      </Link>
     </TooltipWrapper>
   )
 }

src/frontend/src/primitives/ToggleButton.tsx

@@ -1,9 +1,17 @@
 import {
   ToggleButton as RACToggleButton,
-  ToggleButtonProps,
+  ToggleButtonProps as RACToggleButtonProps,
 } from 'react-aria-components'
 import { type ButtonRecipeProps, buttonRecipe } from './buttonRecipe'
 import { TooltipWrapper, TooltipWrapperProps } from './TooltipWrapper'
+import { ReactNode } from 'react'
+
+export type ToggleButtonProps = RACToggleButtonProps &
+  ButtonRecipeProps &
+  TooltipWrapperProps & {
+    // Use tooltip as description below the button.
+    description?: boolean
+  }
 
 /**
  * React aria ToggleButton with our button styles, that can take a tooltip if needed
@@ -12,14 +20,20 @@ export const ToggleButton = ({
   tooltip,
   tooltipType,
   ...props
-}: ToggleButtonProps & ButtonRecipeProps & TooltipWrapperProps) => {
+}: ToggleButtonProps) => {
   const [variantProps, componentProps] = buttonRecipe.splitVariantProps(props)
+
   return (
     <TooltipWrapper tooltip={tooltip} tooltipType={tooltipType}>
       <RACToggleButton
         {...componentProps}
         className={buttonRecipe(variantProps)}
-      />
+      >
+        <>
+          {componentProps.children as ReactNode}
+          {props.description && <span>{tooltip}</span>}
+        </>
+      </RACToggleButton>
     </TooltipWrapper>
   )
 }

src/frontend/src/primitives/buttonRecipe.ts

@@ -1,9 +1,5 @@
 import { type RecipeVariantProps, cva } from '@/styled-system/css'
 
-export type ButtonRecipe = typeof buttonRecipe
-
-export type ButtonRecipeProps = RecipeVariantProps<ButtonRecipe>
-
 export const buttonRecipe = cva({
   base: {
     display: 'flex',
@@ -222,6 +218,16 @@ export const buttonRecipe = cva({
     shySelected: {
       true: {},
     },
+    description: {
+      true: {
+        flexDirection: 'column',
+        gap: '0.5rem',
+        '& span': {
+          fontSize: '13px',
+          textAlign: 'center',
+        },
+      },
+    },
     // if the button is next to other ones to make a "button group", tell where the button is to handle radius
     groupPosition: {
       left: {
@@ -255,3 +261,7 @@ export const buttonRecipe = cva({
     variant: 'primary',
   },
 })
+
+export type ButtonRecipe = typeof buttonRecipe
+
+export type ButtonRecipeProps = RecipeVariantProps<ButtonRecipe>