feat: migrate energyLabel

migration-guide.md

@@ -19,6 +19,14 @@ Passing objects with side keys as `padding` and `margin` props is no longer supp
 <Box marginTop="sm" marginLeft="md">I am a box</Box>
 ```
 
+### Extended design tokens
+With Chakra V3 we are trying to implement design tokens which are in alignment with the UI/UX Team.
+
+Tokens that have been extended in comparison to ones we had in V2 are:
+
+#### Colors
+  - `transparent`
+
 ### Animation and keyframe changes
 
 Animations are now handled through the token system configured in `token/animations.ts` file.
@@ -51,6 +59,11 @@ All animations and keyframes are automatically exported to `sharedConfig`.
   You can use `rowGap` instead of `spacingY`.
   You can use `rowGap: 0` and `gap: {yourValue}` instead of `spacingX`.
 
+### Prop changes
+
+  - `energyLabel`'s `efficiency` prop is now mandatory.
+  ***Reasoning*** this way we are ensuring that component is used with a value, because otherwise it would result in `'A'` which doesn't make sense to use as a default.
+
 ### Renamed components
 
 - `Divider` component was renamed to `Separator`, the props stay the same.

src-v2/components/energyLabel/index.stories.tsx → src/components/energyLabel/index.stories.tsx

@@ -1,6 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react';
 
-import EnergyLabel from './index';
+import { EnergyLabel } from './index';
 
 const meta: Meta<typeof EnergyLabel> = {
   title: 'Components/Data display/Energy Label',

src/components/energyLabel/index.tsx

@@ -0,0 +1,29 @@
+import React, { FC } from 'react';
+
+import { useSlotRecipe } from '@chakra-ui/react';
+
+import { Text } from '../text';
+
+import { Flex } from '../flex';
+
+import { Box } from '../box';
+
+export type EnergyLabelProps = {
+  efficiency: 'A' | 'B' | 'C' | 'D' | 'E' | 'F' | 'G';
+};
+
+export const EnergyLabel: FC<EnergyLabelProps> = (props) => {
+  const { efficiency } = props;
+  const recipe = useSlotRecipe({ key: 'energyLabel' });
+  const [recipeProps] = recipe.splitVariantProps(props);
+  const styles = recipe(recipeProps);
+
+  return (
+    <Flex css={styles.root}>
+      <Box css={styles.triangle} />
+      <Flex css={styles.textWrapper}>
+        <Text css={styles.text}>{efficiency.toString()}</Text>
+      </Flex>
+    </Flex>
+  );
+};

src/components/index.ts

@@ -5,6 +5,7 @@ export * from './badge';
 export * from './box';
 export * from './card';
 export * from './center';
+export * from './energyLabel';
 export * from './fullHeight';
 export * from './flex';
 export * from './grid';

src/themes/shared/slotRecipes/energyLabel.ts

@@ -0,0 +1,99 @@
+import { defineSlotRecipe } from '@chakra-ui/react';
+
+export const energyLabelRecipe = defineSlotRecipe({
+  className: 'chakra-energy-label',
+  slots: ['root', 'triangle', 'textWrapper', 'text'],
+  base: {
+    root: {
+      '--labelColor-A': '#4CA651',
+      '--labelColor-B': '#54B646',
+      '--labelColor-C': '#CAD143',
+      '--labelColor-D': '#FEF050',
+      '--labelColor-E': '#F1AE3D',
+      '--labelColor-F': '#EE6E2D',
+      '--labelColor-G': '#D02F26',
+      '--height': '20px',
+      height: 'var(--height)',
+      width: 'md',
+    },
+    triangle: {
+      borderTopColor: 'transparent',
+      borderBottomColor: 'transparent',
+      '--border-width': '10px',
+      borderBottomWidth: 'var(--border-width)',
+      borderTopWidth: 'var(--border-width)',
+      borderRightWidth: 'var(--border-width)',
+    },
+    textWrapper: {
+      width: 'full',
+      height: 'full',
+      justifyContent: 'end',
+      alignItems: 'center',
+      paddingRight: 'xs',
+    },
+    text: {
+      color: 'white',
+      textStyle: 'heading4',
+    },
+  },
+  variants: {
+    efficiency: {
+      A: {
+        triangle: {
+          borderRightColor: 'var(--labelColor-A)',
+        },
+        textWrapper: {
+          backgroundColor: 'var(--labelColor-A)',
+        },
+      },
+      B: {
+        triangle: {
+          borderRightColor: 'var(--labelColor-B)',
+        },
+        textWrapper: {
+          backgroundColor: 'var(--labelColor-B)',
+        },
+      },
+      C: {
+        triangle: {
+          borderRightColor: 'var(--labelColor-C)',
+        },
+        textWrapper: {
+          backgroundColor: 'var(--labelColor-C)',
+        },
+      },
+      D: {
+        triangle: {
+          borderRightColor: 'var(--labelColor-D)',
+        },
+        textWrapper: {
+          backgroundColor: 'var(--labelColor-D)',
+        },
+      },
+      E: {
+        triangle: {
+          borderRightColor: 'var(--labelColor-E)',
+        },
+        textWrapper: {
+          backgroundColor: 'var(--labelColor-E)',
+        },
+      },
+      F: {
+        triangle: {
+          borderRightColor: 'var(--labelColor-F)',
+        },
+        textWrapper: {
+          backgroundColor: 'var(--labelColor-F)',
+        },
+      },
+      G: {
+        triangle: {
+          borderRightColor: 'var(--labelColor-G)',
+        },
+        textWrapper: {
+          backgroundColor: 'var(--labelColor-G)',
+        },
+      },
+    },
+  },
+});

src/themes/shared/slotRecipes/index.ts

@@ -1,12 +1,14 @@
 import { vehicleReferenceRecipe as vehicleReference } from './vehicleReference';
 import { tableRecipe as table } from './table';
 import { simpleHeaderRecipe as simpleHeader } from './simpleHeader';
+import { energyLabelRecipe as energyLabel } from './energyLabel';
 import { cardRecipe as card } from './card';
 import { articleTeaserRecipe as articleTeaser } from './articleTeaser';
 
 export const slotRecipes = {
   articleTeaser,
   card,
+  energyLabel,
   simpleHeader,
   table,
   vehicleReference,

src/themes/shared/tokens/colors.ts

@@ -138,4 +138,5 @@ export const colors = defineTokens.colors({
   },
   none: { value: 'none' },
   currentColor: { value: 'currentColor' },
+  transparent: { value: 'transparent' },
 });