From 8c1afa974b8c4e8b35e9d444e0a72c84560ee192 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gustav=20E=C3=A9n?= <gustaveen@gmail.com>
Date: Fri, 7 Jul 2023 16:55:49 +0200
Subject: [PATCH] Update CheckoutBreadcrumbs (#2716)

---
 .../components/CheckoutHeader/Breadcrumbs.tsx |  7 ++--
 .../CheckoutHeaderBreadcrumbs.stories.tsx     | 32 +++++++++++++------
 2 files changed, 25 insertions(+), 14 deletions(-)

diff --git a/apps/store/src/components/CheckoutHeader/Breadcrumbs.tsx b/apps/store/src/components/CheckoutHeader/Breadcrumbs.tsx
index 297183e89c..f413651f94 100644
--- a/apps/store/src/components/CheckoutHeader/Breadcrumbs.tsx
+++ b/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,
   }),
 }))
 
diff --git a/apps/store/src/components/CheckoutHeader/CheckoutHeaderBreadcrumbs.stories.tsx b/apps/store/src/components/CheckoutHeader/CheckoutHeaderBreadcrumbs.stories.tsx
index 2d5d6a6baa..be5a89e2fd 100644
--- a/apps/store/src/components/CheckoutHeader/CheckoutHeaderBreadcrumbs.stories.tsx
+++ b/apps/store/src/components/CheckoutHeader/CheckoutHeaderBreadcrumbs.stories.tsx
@@ -1,7 +1,8 @@
-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: {
@@ -9,14 +10,25 @@ export default {
       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,
+  },
 }