From 49b4f8d8b7b248b751cc9dfc37fcbcf9d2fdfdb5 Mon Sep 17 00:00:00 2001
From: Hitomi Winberg <Hitomi.Winberg@axis.com>
Date: Tue, 12 Apr 2022 13:47:24 +0200
Subject: [PATCH 1/2] feat(stepper): allow component to stepper label

---
 packages/core/src/Stepper/Step.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/core/src/Stepper/Step.tsx b/packages/core/src/Stepper/Step.tsx
index 65676b37..ed05cedc 100644
--- a/packages/core/src/Stepper/Step.tsx
+++ b/packages/core/src/Stepper/Step.tsx
@@ -23,7 +23,7 @@ type BaseProps = HTMLAttributes<BaseElement>
 
 export interface StepContent extends BaseProps {
   /* Step's label */
-  readonly label: string
+  readonly label: ReactNode
   /* Step's content */
   readonly content: ReactNode
   /* Indicates whether the step has errors that should be resolved */
@@ -110,7 +110,7 @@ const StepHeader = styled.div`
   margin-top: -${spacing.large};
 `
 
-const StepLabel = styled(Typography)<{
+export const StepLabel = styled(Typography)<{
   readonly active: boolean
   readonly completed: boolean
 }>`

From 01adef8d9a4212dd878f1c40f2c3e2f628c2cc29 Mon Sep 17 00:00:00 2001
From: Hitomi Winberg <Hitomi.Winberg@axis.com>
Date: Tue, 12 Apr 2022 13:47:24 +0200
Subject: [PATCH 2/2] feat(stepper): allow component to stepper label

---
 packages/core/src/Stepper/Step.tsx            |  7 +-
 .../Stepper/__snapshots__/index.test.tsx.snap | 72 ++++++++++++-------
 packages/core/src/Stepper/index.test.tsx      | 14 ++--
 packages/core/src/Stepper/index.tsx           |  2 +-
 .../docs/src/mdx/coreComponents/Stepper.mdx   | 13 ++--
 5 files changed, 67 insertions(+), 41 deletions(-)

diff --git a/packages/core/src/Stepper/Step.tsx b/packages/core/src/Stepper/Step.tsx
index ed05cedc..5815eaed 100644
--- a/packages/core/src/Stepper/Step.tsx
+++ b/packages/core/src/Stepper/Step.tsx
@@ -109,8 +109,9 @@ const StepHeader = styled.div`
   position: relative;
   margin-top: -${spacing.large};
 `
+export const StepLabel = styled(Typography).attrs({ variant: 'default-text' })``
 
-export const StepLabel = styled(Typography)<{
+const StepLabelWrapper = styled.div<{
   readonly active: boolean
   readonly completed: boolean
 }>`
@@ -277,9 +278,9 @@ export const Step: FC<StepProps> = ({
         {lastStep ? null : (
           <StepDivider active={active} completed={completed} />
         )}
-        <StepLabel variant="default-text" active={active} completed={completed}>
+        <StepLabelWrapper active={active} completed={completed}>
           {label}
-        </StepLabel>
+        </StepLabelWrapper>
         {active ? (
           <StepContentContainer>{children}</StepContentContainer>
         ) : null}
diff --git a/packages/core/src/Stepper/__snapshots__/index.test.tsx.snap b/packages/core/src/Stepper/__snapshots__/index.test.tsx.snap
index ef1876d7..d488507b 100644
--- a/packages/core/src/Stepper/__snapshots__/index.test.tsx.snap
+++ b/packages/core/src/Stepper/__snapshots__/index.test.tsx.snap
@@ -297,11 +297,15 @@ exports[`Stepper Stepper 1`] = `
             <span
               className="c9"
             />
-            <p
-              className="c7 c10"
+            <div
+              className="c10"
             >
-              Step 1 Title
-            </p>
+              <p
+                className="c7"
+              >
+                Step 1 Title
+              </p>
+            </div>
             <div
               className="c11"
             >
@@ -359,11 +363,15 @@ exports[`Stepper Stepper 1`] = `
             <span
               className="c18"
             />
-            <p
-              className="c7 c19"
+            <div
+              className="c19"
             >
-              Step 2 Title
-            </p>
+              <p
+                className="c7"
+              >
+                Step 2 Title
+              </p>
+            </div>
           </div>
         </div>
         <div
@@ -386,11 +394,15 @@ exports[`Stepper Stepper 1`] = `
           <div
             className="c8"
           >
-            <p
-              className="c7 c19"
+            <div
+              className="c19"
             >
-              Step 3 Title (done)
-            </p>
+              <p
+                className="c7"
+              >
+                Step 3 Title (done)
+              </p>
+            </div>
           </div>
         </div>
       </div>
@@ -697,11 +709,15 @@ exports[`Stepper Stepper 2`] = `
             <span
               className="c9"
             />
-            <p
-              className="c7 c10"
+            <div
+              className="c10"
             >
-              Step 1 Title
-            </p>
+              <p
+                className="c7"
+              >
+                Step 1 Title
+              </p>
+            </div>
             <div
               className="c11"
             >
@@ -756,11 +772,15 @@ exports[`Stepper Stepper 2`] = `
           <div
             className="c8"
           >
-            <p
-              className="c7 c18"
+            <div
+              className="c18"
             >
-              Step 3 Title (done)
-            </p>
+              <p
+                className="c7"
+              >
+                Step 3 Title (done)
+              </p>
+            </div>
           </div>
         </div>
       </div>
@@ -1013,11 +1033,15 @@ exports[`Stepper Stepper 3`] = `
           <div
             className="c8"
           >
-            <p
-              className="c7 c9"
+            <div
+              className="c9"
             >
-              Step 1 Title
-            </p>
+              <p
+                className="c7"
+              >
+                Step 1 Title
+              </p>
+            </div>
             <div
               className="c10"
             >
diff --git a/packages/core/src/Stepper/index.test.tsx b/packages/core/src/Stepper/index.test.tsx
index e3bced53..47c6625a 100644
--- a/packages/core/src/Stepper/index.test.tsx
+++ b/packages/core/src/Stepper/index.test.tsx
@@ -2,7 +2,7 @@ import 'jest-styled-components'
 import { expect, test, describe } from '@jest/globals'
 
 import { TestRender } from '../TestUtils'
-import { Stepper } from '.'
+import { Stepper, StepLabel } from '.'
 
 const NOOP = () => {
   /** */
@@ -14,16 +14,16 @@ describe('Stepper', () => {
       <Stepper
         steps={[
           {
-            label: 'Step 1 Title',
+            label: <StepLabel>Step 1 Title</StepLabel>,
             content: <div />,
           },
           {
-            label: 'Step 2 Title',
+            label: <StepLabel>Step 2 Title</StepLabel>,
             content: <div />,
             hasErrors: true,
           },
           {
-            label: 'Step 3 Title (done)',
+            label: <StepLabel>Step 3 Title (done)</StepLabel>,
             content: <div />,
           },
         ]}
@@ -51,11 +51,11 @@ describe('Stepper', () => {
       <Stepper
         steps={[
           {
-            label: 'Step 1 Title',
+            label: <StepLabel>Step 1 Title</StepLabel>,
             content: <div />,
           },
           {
-            label: 'Step 3 Title (done)',
+            label: <StepLabel>Step 3 Title (done)</StepLabel>,
             content: <div />,
           },
         ]}
@@ -83,7 +83,7 @@ describe('Stepper', () => {
       <Stepper
         steps={[
           {
-            label: 'Step 1 Title',
+            label: <StepLabel>Step 1 Title</StepLabel>,
             content: <div />,
           },
         ]}
diff --git a/packages/core/src/Stepper/index.tsx b/packages/core/src/Stepper/index.tsx
index 678eaefe..448da40d 100644
--- a/packages/core/src/Stepper/index.tsx
+++ b/packages/core/src/Stepper/index.tsx
@@ -18,7 +18,7 @@ const StepperWrapper = styled(Paper)`
   box-shadow: none;
 `
 
-export { StepContent, StepperAction } from './Step'
+export { StepContent, StepperAction, StepLabel } from './Step'
 
 type BaseElement = HTMLDivElement
 type BaseProps = HTMLAttributes<BaseElement>
diff --git a/packages/docs/src/mdx/coreComponents/Stepper.mdx b/packages/docs/src/mdx/coreComponents/Stepper.mdx
index b74911c4..d69a8ce4 100644
--- a/packages/docs/src/mdx/coreComponents/Stepper.mdx
+++ b/packages/docs/src/mdx/coreComponents/Stepper.mdx
@@ -10,6 +10,7 @@ import {
   Typography,
   RadioButtonGroupField,
   Stepper,
+  StepLabel,
 } from 'practical-react-components-core'
 
 # Stepper
@@ -35,7 +36,7 @@ export const DemoComponent = ({}) => {
       className="my-stepper"
       steps={[
         {
-          label: 'Step 1 Title',
+          label: <StepLabel>Step 1 Title</StepLabel>,
           content: (
             <div>
               <RadioButtonGroupField
@@ -50,7 +51,7 @@ export const DemoComponent = ({}) => {
           className: 'my-step',
         },
         {
-          label: 'Step 2 Title',
+          label: <StepLabel>Step 2 Title</StepLabel>,
           content: (
             <div>
               <TextInputField label="Name" value="" placeholder="First name" />
@@ -58,7 +59,7 @@ export const DemoComponent = ({}) => {
           ),
         },
         {
-          label: 'Step 3 Title (done)',
+          label: <StepLabel>Step 3 Title (done)</StepLabel>,
           content: (
             <Typography variant="navigation-label">You are now done</Typography>
           ),
@@ -92,7 +93,7 @@ export const DemoComponent = ({}) => {
 <Stepper
   steps={[
     {
-      label: 'Step 1 Title',
+      label: <StepLabel>Step 1 Title</StepLabel>,
       content: (
         <div>
           <RadioButtonGroupField
@@ -109,7 +110,7 @@ export const DemoComponent = ({}) => {
       ),
     },
     {
-      label: 'Step 2 Title',
+      label: <StepLabel>Step 2 Title</StepLabel>,
       content: (
         <div>
           <TextInputField label="Name" value="" placeholder="First name" />
@@ -117,7 +118,7 @@ export const DemoComponent = ({}) => {
       ),
     },
     {
-      label: 'Step 3 Title (done)',
+      label: <StepLabel>Step 3 Title (done)</StepLabel>,
       content: (
         <Typography variant="navigation-label">You are now done</Typography>
       ),