Update CheckoutBreadcrumbs (#2716)

apps/store/src/components/CheckoutHeader/Breadcrumbs.tsx

@@ -36,7 +36,7 @@ const Root = styled.ul({
 
 const Step = styled.li<{ active: boolean }>(({ active }) => ({
   fontSize: theme.fontSizes.xs,
-  height: theme.space.xl,
+  height: '2.25rem',
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
@@ -45,12 +45,11 @@ const Step = styled.li<{ active: boolean }>(({ active }) => ({
   color: theme.colors.textTertiary,
   backgroundColor: theme.colors.opaque1,
   borderRadius: theme.radius.xxs,
-  border: `1px solid ${theme.colors.opaque1}`,
+  border: `0.5px solid ${theme.colors.borderTranslucent1}`,
 
   ...(active && {
-    backgroundColor: theme.colors.green100,
+    backgroundColor: theme.colors.signalGreenFill,
     color: theme.colors.signalGreenText,
-    borderColor: theme.colors.green200,
   }),
 }))
 

apps/store/src/components/CheckoutHeader/CheckoutHeaderBreadcrumbs.stories.tsx

@@ -1,22 +1,34 @@
-import { Meta, StoryFn } from '@storybook/react'
-import { Breadcrumbs, BreadcrumbsProps, CheckoutStep } from './Breadcrumbs'
+import { Meta, StoryObj } from '@storybook/react'
+import { GridLayout } from '@/components/GridLayout/GridLayout'
+import { Breadcrumbs, CheckoutStep } from './Breadcrumbs'
 
-export default {
+const meta: Meta<typeof Breadcrumbs> = {
   title: 'Checkout / Header Breadcumbs',
   component: Breadcrumbs,
   argTypes: {
     steps: {
       table: { disable: true },
     },
   },
-} as Meta<typeof Breadcrumbs>
+}
+
+export default meta
+type Story = StoryObj<typeof Breadcrumbs>
 
-const Template: StoryFn<BreadcrumbsProps> = (props) => {
-  return <Breadcrumbs {...props} />
+const Template: Story = {
+  render: (args) => (
+    <GridLayout.Root>
+      <GridLayout.Content width="1/3" align="center">
+        <Breadcrumbs {...args} />
+      </GridLayout.Content>
+    </GridLayout.Root>
+  ),
 }
 
-export const Default = Template.bind({})
-Default.args = {
-  steps: [CheckoutStep.Checkout, CheckoutStep.Payment, CheckoutStep.Done],
-  activeStep: CheckoutStep.Payment,
+export const Default = {
+  ...Template,
+  args: {
+    steps: [CheckoutStep.Checkout, CheckoutStep.Payment, CheckoutStep.Done],
+    activeStep: CheckoutStep.Payment,
+  },
 }