Cambio: add Avatar & AvatarGroup updates

Cambly · Mar 6, 2024 · cc9c6cc · cc9c6cc
1 parent 6c54b7f
commit cc9c6cc
Show file tree

Hide file tree

Showing 6 changed files with 107 additions and 12 deletions.
diff --git a/packages/syntax-core/package.json b/packages/syntax-core/package.json
@@ -14,7 +14,7 @@
   "scripts": {
     "build": "tsup",
     "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist",
-    "dev": "tsup --watch",
+    "dev": "NODE_OPTIONS=--max_old_space_size=4096 tsup --watch",
     "lint": "TIMING=1 eslint \"src/**/*.ts*\" --max-warnings 0",
     "stylelint": "stylelint \"**/*.css\"",
     "stylelint:fix": "npm run stylelint --fix",

diff --git a/packages/syntax-core/src/Avatar/Avatar.module.css b/packages/syntax-core/src/Avatar/Avatar.module.css
@@ -8,9 +8,16 @@
   background-size: cover;
   background-repeat: no-repeat;
   border-radius: 50%;
+}
+
+.avatarImageClassic {
   border: 2px solid #fff;
 }
 
+.avatarImageOutlineCambio {
+  border: 2px solid var(--color-cambio-gray-100);
+}
+
 .sm {
   width: 24px;
   height: 24px;
@@ -30,3 +37,23 @@
   width: 128px;
   height: 129px;
 }
+
+.smCambio {
+  width: 32px;
+  height: 32px;
+}
+
+.mdCambio {
+  width: 48px;
+  height: 48px;
+}
+
+.lgCambio {
+  width: 64px;
+  height: 64px;
+}
+
+.xlCambio {
+  width: 64px;
+  height: 64px;
+}
diff --git a/packages/syntax-core/src/Avatar/Avatar.tsx b/packages/syntax-core/src/Avatar/Avatar.tsx
@@ -3,6 +3,7 @@ import classNames from "classnames";
 import styles from "./Avatar.module.css";
 import Box from "../Box/Box";
 import { useAvatarGroup } from "../AvatarGroup/AvatarGroup";
+import { useTheme } from "../ThemeProvider/ThemeProvider";
 
 const sizeToIconStyles = {
   sm: { bottom: 6, marginInlineEnd: 2, height: 4, width: 4 },
@@ -11,30 +12,51 @@ const sizeToIconStyles = {
   xl: { bottom: 12, marginInlineEnd: 12, height: 16, width: 16 },
 } as const;
 
-const sizeToMargin = {
+const sizeToMarginClassic = {
   sm: -16,
   md: -28,
   lg: -48,
   xl: -88,
 } as const;
 
+const sizeToMarginCambio = {
+  sm: -12,
+  md: -20,
+  lg: -28,
+  xl: -28,
+} as const;
+
 function AvatarInternal({
   accessibilityLabel,
   icon,
+  outline,
   size = "md",
   src,
 }: {
   accessibilityLabel: string;
   icon?: React.ReactElement;
+  outline?: boolean;
   size?: "sm" | "md" | "lg" | "xl";
   src: string;
 }): ReactElement {
+  const { themeName } = useTheme();
+
   return (
-    <div className={classNames(styles.avatar, styles[size])}>
+    <div
+      className={classNames(
+        styles.avatar,
+        themeName === "classic" ? styles[size] : styles[`${size}Cambio`],
+      )}
+    >
       <img
         alt={accessibilityLabel}
         src={src}
-        className={classNames(styles.avatarImage, styles[size])}
+        className={classNames(
+          styles.avatarImage,
+          themeName === "classic" && styles.avatarImageClassic,
+          themeName === "cambio" && outline && styles.avatarImageOutlineCambio,
+          themeName === "classic" ? styles[size] : styles[`${size}Cambio`],
+        )}
       />
       {icon && (
         <Box display="flex" position="relative" justifyContent="end">
@@ -81,11 +103,18 @@ const Avatar = ({
   /**
    * Size of the avatar.
    *
+   * Classic:
    * * `sm`: 24px
    * * `md`: 40px
    * * `lg`: 72px
    * * `xl`: 128px
    *
+   * Cambio:
+   * * `sm`: 32px
+   * * `md`: 48px
+   * * `lg`: 64px
+   * * `xl`: 64px (deprecated, maps to `lg` in Cambio)
+   *
    * @defaultValue `md`
    */
   size?: "sm" | "md" | "lg" | "xl";
@@ -95,14 +124,18 @@ const Avatar = ({
   src: string;
 }): JSX.Element => {
   const avatarGroupContext = useAvatarGroup();
+  const { themeName } = useTheme();
 
   if (avatarGroupContext !== null) {
     return (
       <Box
         position="relative"
         dangerouslySetInlineStyle={{
           __style: {
-            marginInlineEnd: sizeToMargin[avatarGroupContext.size],
+            marginInlineEnd:
+              themeName === "cambio"
+                ? sizeToMarginCambio[avatarGroupContext.size]
+                : sizeToMarginClassic[avatarGroupContext.size],
           },
         }}
       >
@@ -116,6 +149,7 @@ const Avatar = ({
           <AvatarInternal
             accessibilityLabel={accessibilityLabel}
             icon={icon}
+            outline={themeName === "cambio"}
             size={avatarGroupContext.size}
             src={src}
           />

diff --git a/packages/syntax-core/src/AvatarGroup/AvatarGroup.tsx b/packages/syntax-core/src/AvatarGroup/AvatarGroup.tsx
@@ -5,8 +5,14 @@ import {
   type ReactElement,
 } from "react";
 import Box from "../Box/Box";
+import { useTheme } from "../ThemeProvider/ThemeProvider";
 
-type Size = "sm" | "md" | "lg" | "xl";
+type Size =
+  | "sm"
+  | "md"
+  | "lg"
+  /* `xl` is deprecated and mapped to `lg` in Cambio */
+  | "xl";
 type Orientation = "standard" | "reverse";
 
 type AvatarGroupContextType = {
@@ -43,11 +49,18 @@ export default function AvatarGroup({
   /**
    * Size of the avatars in the AvatarGroup.
    *
+   * Classic:
    * * `sm`: 24px
    * * `md`: 40px
    * * `lg`: 72px
    * * `xl`: 128px
    *
+   * Cambio:
+   * * `sm`: 32px
+   * * `md`: 48px
+   * * `lg`: 64px
+   * * `xl`: 64px (deprecated, maps to `lg` in Cambio)
+   *
    * @defaultValue `md`
    */
   size?: Size;
@@ -65,8 +78,11 @@ export default function AvatarGroup({
    */
   children: ReactNode;
 }): ReactElement {
+  const { themeName } = useTheme();
+  const parsedSize = themeName === "cambio" && size === "xl" ? "lg" : size;
+
   return (
-    <AvatarGroupContext.Provider value={{ size, orientation }}>
+    <AvatarGroupContext.Provider value={{ size: parsedSize, orientation }}>
       <Box
         display="flex"
         justifyContent={orientation === "standard" ? "start" : "end"}

diff --git a/packages/syntax-core/src/Box/Box.tsx b/packages/syntax-core/src/Box/Box.tsx
@@ -7,6 +7,7 @@ import type allColors from "../colors/allColors";
 import colorStyles from "../colors/colors.module.css";
 import roundingStyles from "../rounding.module.css";
 import { forwardRef } from "react";
+import { useTheme } from "../ThemeProvider/ThemeProvider";
 
 type AlignItems = "baseline" | "center" | "end" | "start" | "stretch";
 type As =
@@ -353,13 +354,22 @@ type BoxProps = {
   /**
    * Border radius of the box.
    *
+   * Classic:
    * * `none`: 0px
    * * `sm`: 8px
    * * `md`: 12px
    * * `lg`: 16px
    * * `xl`: 24px
    * * `full`: 999px
    *
+   * Cambio:
+   * * `none`: 0px
+   * * `sm`: 8px
+   * * `md`: 8px (maps to `sm`)
+   * * `lg`: 8px (maps to `sm`)
+   * * `xl`: 8px (maps to `sm`)
+   * * `full`: 999px
+   *
    * @defaultValue "none"
    */
   rounding?: "xl" | "lg" | "md" | "sm" | "full" | "none";
@@ -429,6 +439,7 @@ const Box = forwardRef<HTMLDivElement, BoxProps>(function Box(
   ref,
 ): ReactElement {
   const { as: BoxElement = "div", children, ...boxProps } = props;
+  const { themeName } = useTheme();
 
   const {
     // Classname
@@ -492,6 +503,11 @@ const Box = forwardRef<HTMLDivElement, BoxProps>(function Box(
     ...maybePassThroughProps
   } = boxProps;
 
+  const parsedRounding =
+    themeName === "cambio" && rounding && ["md", "lg", "xl"].includes(rounding)
+      ? "sm"
+      : rounding;
+
   const parsedProps = {
     className: classNames(
       styles.box,
@@ -575,7 +591,9 @@ const Box = forwardRef<HTMLDivElement, BoxProps>(function Box(
       smJustifyContent && styles[`justifyContent${smJustifyContent}Small`],
       lgJustifyContent && styles[`justifyContent${lgJustifyContent}Large`],
       position && position !== "static" && styles[position],
-      rounding && rounding !== "none" && roundingStyles[`rounding${rounding}`],
+      parsedRounding &&
+        parsedRounding !== "none" &&
+        roundingStyles[`rounding${parsedRounding}`],
       overflow && styles[`overflow${overflow}`],
       overflowX && styles[`overflowX${overflowX}`],
       overflowY && styles[`overflowY${overflowY}`],

diff --git a/packages/syntax-core/src/ThemeProvider/ThemeProvider.tsx b/packages/syntax-core/src/ThemeProvider/ThemeProvider.tsx
@@ -15,10 +15,10 @@ ThemeContext.displayName = "ThemeContext";
 const classicToCambioKeyLookup = {
   "color-base-black": "color-cambio-black",
   "color-base-destructive-100": "color-cambio-destructive-100",
-  "color-base-destructive-200": undefined, // Deprecated - to be deleted
+  "color-base-destructive-200": "color-cambio-destructive-300",
   "color-base-destructive-300": "color-cambio-destructive-300",
   "color-base-destructive-700": "color-cambio-destructive-700",
-  "color-base-destructive-800": undefined, // Deprecated - to be deleted
+  "color-base-destructive-800": "color-cambio-destructive-900",
   "color-base-destructive-900": "color-cambio-destructive-900",
   "color-base-gray-10": "color-cambio-gray-370",
   "color-base-gray-30": "color-cambio-gray-370",
@@ -43,10 +43,10 @@ const classicToCambioKeyLookup = {
   "color-base-primary-800": "color-cambio-gray-800",
   "color-base-primary-900": "color-cambio-gray-900",
   "color-base-success-100": "color-cambio-success-100",
-  "color-base-success-200": undefined, // Deprecated - to be deleted
+  "color-base-success-200": "color-cambio-success-300",
   "color-base-success-300": "color-cambio-success-300",
   "color-base-success-700": "color-cambio-success-700",
-  "color-base-success-800": undefined, // Deprecated - to be deleted
+  "color-base-success-800": "color-cambio-success-900",
   "color-base-success-900": "color-cambio-success-900",
   "color-base-purple-100": undefined, // Deprecated - to be deleted
   "color-base-purple-200": undefined, // Deprecated - to be deleted