Skip to content

Commit

Permalink
Button/Badge: various Cambio updates
Browse files Browse the repository at this point in the history
  • Loading branch information
christianvuerings committed Mar 20, 2024
1 parent df07a81 commit 4cadf19
Show file tree
Hide file tree
Showing 8 changed files with 216 additions and 11 deletions.
5 changes: 5 additions & 0 deletions .changeset/lucky-queens-draw.md
@@ -0,0 +1,5 @@
---
"@cambly/syntax-core": minor
---

Button/Badge: various Cambio updates
12 changes: 12 additions & 0 deletions packages/syntax-core/src/Badge/Badge.stories.tsx
Expand Up @@ -14,6 +14,7 @@ export default {
argTypes: {
color: {
options: [
// Classic
"gray200",
"gray900",
"destructive700",
Expand All @@ -22,6 +23,17 @@ export default {
"success700",
"primary700",
"purple700",
// Cambio
"sky",
"success300",
"destructive300",
"orange",
"tan",
"gray370",
"gray870",
"lilac",
"thistle",
"pink",
],
control: { type: "radio" },
},
Expand Down
106 changes: 100 additions & 6 deletions packages/syntax-core/src/Badge/Badge.tsx
Expand Up @@ -3,7 +3,7 @@ import Box from "../Box/Box";
import styles from "./Badge.module.css";
import { useTheme } from "../ThemeProvider/ThemeProvider";

const BadgeColor = [
const badgeColorClassic = [
"gray200",
"gray900",
"destructive700",
Expand All @@ -14,13 +14,78 @@ const BadgeColor = [
"purple700",
] as const;

const badgeColorCambio = [
"sky",
"success300",
"destructive300",
"orange",
"tan",
"gray370",
"gray870",
"lilac",
"thistle",
"pink",
] as const;

const badgeColorClassicToCambio = {
gray200: "gray370",
gray900: "gray870",
destructive700: "destructive300",
orange700: "orange",
yellow700: "tan",
success700: "success300",
primary700: "sky",
purple700: "lilac",
sky: "sky",
success300: "success300",
destructive300: "destructive300",
orange: "orange",
tan: "tan",
gray370: "gray370",
gray870: "gray870",
lilac: "lilac",
thistle: "thistle",
pink: "pink",
} as const;

const badgeColorCambioToClassic = {
gray200: "gray200",
gray900: "gray900",
destructive700: "destructive700",
orange700: "orange700",
yellow700: "yellow700",
success700: "success700",
primary700: "primary700",
purple700: "purple700",
sky: "primary700",
success300: "success700",
destructive300: "destructive700",
orange: "orange700",
tan: "yellow700",
gray370: "gray200",
gray870: "gray900",
lilac: "purple700",
thistle: "purple700",
pink: "purple700",
} as const;

const textColorForBackgroundColor = (
color: (typeof BadgeColor)[number],
color: (typeof badgeColorClassic)[number] | (typeof badgeColorCambio)[number],
): "gray900" | "white" => {
switch (color) {
case "gray200":
case "yellow700":
return "gray900";
case "gray370":
case "destructive300":
case "orange":
case "tan":
case "success300":
case "sky":
case "thistle":
case "pink":
case "lilac":
return "gray900";
default:
return "white";
}
Expand All @@ -45,28 +110,57 @@ const Badge = ({
/**
* The color of the badge
*
* Classic colors:
* * `gray200` => maps to neutralLight in Cambio
* * `gray900` => maps to neutralDark in Cambio
* * `destructive700` => maps to destructive in Cambio
* * `orange700` => maps to orange in Cambio
* * `yellow700` => maps to tan in Cambio
* * `success700` => maps to success in Cambio
* * `primary700` => maps to sky in Cambio
* * `purple700` => maps to lilac in Cambio
*
* Cambio colors:
* * `sky`
* * `success300`
* * `destructive300`
* * `orange`
* * `tan`
* * `gray370`
* * `gray870`
* * `lilac`
* * `thistle`
* * `pink`
*
* @defaultValue "primary700"
*/
color?: (typeof BadgeColor)[number];
color?:
| (typeof badgeColorClassic)[number]
| (typeof badgeColorCambio)[number];
}): JSX.Element => {
const { themeName } = useTheme();

const mappedColor =
themeName === "cambio"
? badgeColorClassicToCambio[color]
: badgeColorCambioToClassic[color];

return (
<Box
display={themeName === "classic" ? "inlineBlock" : "inlineFlex"}
paddingX={themeName === "classic" ? 2 : 3}
paddingY={1}
rounding={themeName === "classic" ? "full" : "sm"}
backgroundColor={color}
backgroundColor={mappedColor}
alignItems="center"
justifyContent="center"
height={themeName === "cambio" ? 32 : undefined}
>
<Typography color={textColorForBackgroundColor(color)}>
<Typography color={textColorForBackgroundColor(mappedColor)}>
<Box display="flex" gap={1} alignItems="center" justifyContent="start">
{Icon && <Icon className={styles.icon} />}
<Typography
color={textColorForBackgroundColor(color)}
color={textColorForBackgroundColor(mappedColor)}
size={100}
weight={themeName === "classic" ? "bold" : "medium"}
>
Expand Down
2 changes: 1 addition & 1 deletion packages/syntax-core/src/Box/Box.stories.tsx
Expand Up @@ -288,7 +288,7 @@ export const Margin: StoryObj<typeof Box> = {
alignItems="center"
justifyContent="center"
>
<Typography color="gray200" tooltip={`${margin * 4}px`}>
<Typography tooltip={`${margin * 4}px`}>
margin=&quot;{margin}&quot;
</Typography>
</Box>
Expand Down
4 changes: 4 additions & 0 deletions packages/syntax-core/src/Button/Button.module.css
Expand Up @@ -47,6 +47,10 @@
cursor: auto;
}

.disabledCambioPrimary {
opacity: 0.5;
}

.fullWidth {
width: 100%;
}
Expand Down
26 changes: 22 additions & 4 deletions packages/syntax-core/src/Button/Button.tsx
Expand Up @@ -162,6 +162,9 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
? classicBackgroundColor(classicColor(color))
: cambioBackgroundColor(cambioColor(color), on);

const disabledCambioPrimary =
themeName === "cambio" && color === "primary" && disabled;

return (
<button
data-testid={dataTestId}
Expand All @@ -188,7 +191,13 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
)}
>
{!loading && StartIcon && (
<StartIcon className={classNames(styles.icon, iconSize[size])} />
<StartIcon
className={classNames(
styles.icon,
iconSize[size],
disabledCambioPrimary && styles.disabledCambioPrimary,
)}
/>
)}
{((loading && loadingText) || (!loading && text)) && (
<Box paddingX={1}>
Expand All @@ -198,8 +207,11 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
}
>
<span
// Temporary - until we have cambio colors on Typogrphay
className={foregroundColorClass}
className={classNames(
// Temporary - until we have cambio colors on Typography
foregroundColorClass,
disabledCambioPrimary && styles.disabledCambioPrimary,
)}
style={{ fontWeight: 500 }}
>
{loading ? loadingText : text}
Expand All @@ -208,7 +220,13 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
</Box>
)}
{!loading && EndIcon && (
<EndIcon className={classNames(styles.icon, iconSize[size])} />
<EndIcon
className={classNames(
styles.icon,
iconSize[size],
disabledCambioPrimary && styles.disabledCambioPrimary,
)}
/>
)}
{loading && (
<svg
Expand Down
16 changes: 16 additions & 0 deletions packages/syntax-core/src/colors/allColors.ts
Expand Up @@ -47,6 +47,22 @@ const colors = [
"yellow700",
"yellow800",
"yellow900",

// Cambio specific colors
"gray370",
"gray870",
"cream",
"lilac",
"navy",
"orange",
"pink",
"purple",
"red",
"sky",
"slate",
"tan",
"teal",
"thistle",
] as const;

export default colors;

0 comments on commit 4cadf19

Please sign in to comment.