From dbc0bd9b4cc74449c55ae92bb1eb6ae362902f2a Mon Sep 17 00:00:00 2001
From: Klink <85062+dogmar@users.noreply.github.com>
Date: Fri, 20 Oct 2023 14:34:46 -0700
Subject: [PATCH] fix: Broken styles on Stepper when importing (#529)

---
 src/components/Stepper.tsx               | 239 +++--------------------
 src/components/StepperStep.tsx           | 174 +++++++++++++++++
 src/components/StepperStepConnection.tsx |  54 +++++
 3 files changed, 254 insertions(+), 213 deletions(-)
 create mode 100644 src/components/StepperStep.tsx
 create mode 100644 src/components/StepperStepConnection.tsx

diff --git a/src/components/Stepper.tsx b/src/components/Stepper.tsx
index 08d352eb..06e1e889 100644
--- a/src/components/Stepper.tsx
+++ b/src/components/Stepper.tsx
@@ -9,19 +9,18 @@ import {
   useState,
 } from 'react'
 import { mergeRefs } from '@react-aria/utils'
-import { useTheme } from 'styled-components'
+import styled from 'styled-components'
 
 import useResizeObserver from '../hooks/useResizeObserver'
 
-import StatusOkIcon from './icons/StatusOkIcon'
 import type createIcon from './icons/createIcon'
-import Tooltip from './Tooltip'
-import WrapWithIf from './WrapWithIf'
+import { StepperStepConnection } from './StepperStepConnection'
+import { StepperStep } from './StepperStep'
 
-const DEFAULT_CIRCLE_SIZE = 48
-const DEFAULT_ICON_SIZE = 24
-const COMPACT_CIRCLE_SIZE = 32
-const COMPACT_ICON_SIZE = 16
+export const DEFAULT_CIRCLE_SIZE = 48
+export const DEFAULT_ICON_SIZE = 24
+export const COMPACT_CIRCLE_SIZE = 32
+export const COMPACT_ICON_SIZE = 16
 
 type StepBaseProps = {
   stepTitle?: ReactNode
@@ -35,7 +34,7 @@ type StepBaseProps = {
   canComplete?: boolean
 }
 
-type StepProps = StepBaseProps & {
+export type StepProps = StepBaseProps & {
   isActive?: boolean
   isComplete?: boolean
   circleSize?: number
@@ -43,10 +42,11 @@ type StepProps = StepBaseProps & {
   collapseTitles?: boolean
 }
 
-type StepConnectionProps = {
+export type StepConnectionProps = {
   isActive: boolean
   vertical?: boolean
   compact?: boolean
+  circleSize?: number
 }
 
 export type StepperSteps = (StepBaseProps & { key: string })[]
@@ -60,188 +60,15 @@ type StepperProps = {
   compact?: boolean
 }
 
-function Step({
-  isActive = false,
-  isComplete = false,
-  stepTitle,
-  IconComponent,
-  imageUrl = '',
-  iconSize,
-  circleSize,
-  vertical = false,
-  collapseTitles = false,
-  compact = false,
-  canComplete = true,
-  ...props
-}: StepProps) {
-  const theme = useTheme()
-  const bounceEase = 'cubic-bezier(.37,1.4,.62,1)'
-  const shownClassName = 'shown'
-  const completeIconStyles = {
-    opacity: '1',
-    transform: 'scale(0)',
-    transition: 'all 0.2s ease',
-    [`&.${shownClassName}`]: {
-      transform: 'scale(1)',
-      opacity: '1',
-      transition: `transform 0.3s ${bounceEase}, opacity 0.1s ease`,
-      transitionDelay: '0.1s',
-    },
-  }
-
-  circleSize =
-    circleSize ?? (compact ? COMPACT_CIRCLE_SIZE : DEFAULT_CIRCLE_SIZE)
-  iconSize = iconSize ?? (compact ? COMPACT_ICON_SIZE : DEFAULT_ICON_SIZE)
-
-  return (
-    <div
-      css={{
-        display: 'flex',
-        width: compact ? 'auto' : '100%',
-        minWidth: compact ? 'auto' : '68px',
-        maxWidth: vertical || compact ? '100%' : '100px',
-        flexDirection: vertical || compact ? 'row' : 'column',
-        alignItems: 'center',
-        alignSelf: 'center',
-      }}
-      {...props}
-    >
-      <WrapWithIf
-        condition={collapseTitles && !!stepTitle}
-        wrapper={<Tooltip label={stepTitle} />}
-      >
-        <div
-          css={{
-            position: 'relative',
-            width: circleSize,
-            height: circleSize,
-            marginLeft: vertical || compact ? 'none' : 'auto',
-            marginRight: vertical || compact ? 'none' : 'auto',
-            borderRadius: '100%',
-            backgroundColor:
-              theme.mode === 'light'
-                ? theme.colors['fill-zero']
-                : theme.colors['fill-one'],
-            border: `1px solid ${
-              isActive ? theme.colors['border-selected'] : theme.colors.border
-            }`,
-            transition: 'all 0.2s ease',
-            transitionDelay: '0.1',
-            flexShrink: 0,
-          }}
-        >
-          <div
-            className={canComplete && isComplete ? '' : shownClassName}
-            css={{
-              display: 'flex',
-              width: '100%',
-              height: '100%',
-              position: 'absolute',
-              justifyContent: 'center',
-              alignItems: 'center',
-              ...completeIconStyles,
-            }}
-          >
-            {IconComponent && (
-              <IconComponent
-                size={iconSize}
-                color={
-                  isActive
-                    ? theme.colors['icon-default']
-                    : theme.colors['icon-xlight']
-                }
-              />
-            )}
-            {imageUrl && (
-              <img
-                src={imageUrl}
-                width={iconSize}
-                height={iconSize}
-                css={{
-                  opacity: isActive ? 1 : 0.5,
-                }}
-              />
-            )}
-          </div>
-          <div
-            className={canComplete && isComplete ? shownClassName : ''}
-            css={{
-              display: 'flex',
-              width: '100%',
-              height: '100%',
-              position: 'absolute',
-              justifyContent: 'center',
-              alignItems: 'center',
-              ...completeIconStyles,
-            }}
-          >
-            <StatusOkIcon
-              color={
-                compact
-                  ? theme.colors['text-xlight']
-                  : theme.colors['icon-success']
-              }
-              size={iconSize}
-            />
-          </div>
-        </div>
-      </WrapWithIf>
-      {!collapseTitles && (
-        <div
-          css={{
-            ...theme.partials.text.body2,
-            marginTop: vertical || compact ? 'none' : theme.spacing.small,
-            marginLeft: vertical || compact ? theme.spacing.small : 'none',
-            marginRight: compact ? theme.spacing.small : 'none',
-            textAlign: vertical || compact ? 'left' : 'center',
-            color: isActive ? theme.colors.text : theme.colors['text-xlight'],
-            transition: 'all 0.2s ease',
-            transitionDelay: '0.1s',
-            flexShrink: vertical || compact ? 1 : 0,
-          }}
-        >
-          {stepTitle}
-        </div>
-      )}
-    </div>
-  )
-}
-
-function StepConnection({
-  isActive = false,
-  vertical = false,
-  compact = false,
-  ...props
-}: StepConnectionProps) {
-  const theme = useTheme()
-
-  return (
-    <div
-      css={{
-        width: compact ? '16px' : vertical ? 1 : '100%',
-        height: vertical ? 30 : 1,
-        flexGrow: compact ? 0 : 1,
-        backgroundColor: theme.colors.border,
-        position: 'relative',
-        alignSelf: compact ? 'center' : 'none',
-      }}
-      aria-hidden="true"
-      {...props}
-    >
-      <div
-        css={{
-          width: vertical ? 1 : isActive ? '100%' : 0,
-          height: vertical ? (isActive ? 30 : 0) : '100%',
-          position: 'absolute',
-          left: 0,
-          top: 0,
-          backgroundColor: theme.colors['border-selected'],
-          transition: 'width 0.1s ease-out, height 0.1s ease-out',
-        }}
-      />
-    </div>
-  )
-}
+const StepperSC = styled.div<{ $compact: boolean; $vertical: boolean }>(
+  ({ $compact, $vertical }) => ({
+    display: 'flex',
+    width: $compact ? 'auto' : '100%',
+    flexDirection: $vertical ? 'column' : 'row',
+    justifyContent: 'space-between',
+    overflow: 'hidden',
+  })
+)
 
 function StepperRef(
   {
@@ -254,7 +81,6 @@ function StepperRef(
   }: StepperProps,
   ref: Ref<any>
 ) {
-  const theme = useTheme()
   const eltRef = useRef<HTMLDivElement>()
   const mergedRef = mergeRefs(ref, eltRef)
   const [collapseTitles, setCollapseTitles] = useState(true)
@@ -274,19 +100,14 @@ function StepperRef(
   useResizeObserver(eltRef, attemptCollapse)
 
   return (
-    <div
+    <StepperSC
+      $compact={compact}
+      $vertical={vertical}
       ref={mergedRef}
-      css={{
-        display: 'flex',
-        width: compact ? 'auto' : '100%',
-        flexDirection: vertical ? 'column' : 'row',
-        justifyContent: 'space-between',
-        overflow: 'hidden',
-      }}
     >
       {steps.map((step, index) => (
         <Fragment key={step.key}>
-          <Step
+          <StepperStep
             isActive={stepIndex === index}
             isComplete={stepIndex > index}
             stepTitle={step.stepTitle}
@@ -300,24 +121,16 @@ function StepperRef(
             canComplete={step.canComplete}
           />
           {index < steps.length - 1 && (
-            <StepConnection
+            <StepperStepConnection
               isActive={stepIndex > index}
               vertical={vertical}
-              css={{
-                marginTop: vertical
-                  ? theme.spacing.small
-                  : compact
-                  ? 0
-                  : (step.circleSize || DEFAULT_CIRCLE_SIZE) / 2,
-                marginBottom: vertical ? theme.spacing.small : 'none',
-                marginLeft: vertical ? theme.spacing.large : 'none',
-              }}
+              circleSize={step.circleSize}
               compact={compact}
             />
           )}
         </Fragment>
       ))}
-    </div>
+    </StepperSC>
   )
 }
 
diff --git a/src/components/StepperStep.tsx b/src/components/StepperStep.tsx
new file mode 100644
index 00000000..0a412f8f
--- /dev/null
+++ b/src/components/StepperStep.tsx
@@ -0,0 +1,174 @@
+import styled, { useTheme } from 'styled-components'
+
+import StatusOkIcon from './icons/StatusOkIcon'
+import Tooltip from './Tooltip'
+import WrapWithIf from './WrapWithIf'
+import {
+  COMPACT_CIRCLE_SIZE,
+  COMPACT_ICON_SIZE,
+  DEFAULT_CIRCLE_SIZE,
+  DEFAULT_ICON_SIZE,
+  type StepProps,
+} from './Stepper'
+
+const bounceEase = 'cubic-bezier(.37,1.4,.62,1)'
+const shownClassName = 'shown'
+const StepperStepSC = styled.div<{
+  $compact: boolean
+  $vertical: boolean
+  $isActive: boolean
+  $circleSize: number
+}>(({ theme, $compact, $vertical, $isActive, $circleSize }) => ({
+  display: 'flex',
+  width: $compact ? 'auto' : '100%',
+  minWidth: $vertical || $compact ? 'auto' : 68,
+  maxWidth: $vertical || $compact ? '100%' : 100,
+  flexDirection: $vertical || $compact ? 'row' : 'column',
+  alignItems: 'center',
+  alignSelf: 'center',
+  '.stepInner': {
+    position: 'relative',
+    width: $circleSize,
+    height: $circleSize,
+    marginLeft: $vertical || $compact ? 'none' : 'auto',
+    marginRight: $vertical || $compact ? 'none' : 'auto',
+    borderRadius: '100%',
+    backgroundColor:
+      theme.mode === 'light'
+        ? theme.colors['fill-zero']
+        : theme.colors['fill-one'],
+    border: `1px solid ${
+      $isActive ? theme.colors['border-selected'] : theme.colors.border
+    }`,
+    transition: 'all 0.2s ease',
+    transitionDelay: '0.1',
+    flexShrink: 0,
+  },
+}))
+const StepperStepTitleSC = styled.div<{
+  $compact: boolean
+  $vertical: boolean
+  $isActive: boolean
+}>(({ theme, $compact, $vertical, $isActive }) => ({
+  ...theme.partials.text.body2,
+  marginTop: $vertical || $compact ? 'none' : theme.spacing.small,
+  marginLeft: $vertical || $compact ? theme.spacing.small : 'none',
+  marginRight: $compact ? theme.spacing.small : 'none',
+  textAlign: $vertical || $compact ? 'left' : 'center',
+  color: $isActive ? theme.colors.text : theme.colors['text-xlight'],
+  transition: 'all 0.2s ease',
+  transitionDelay: '0.1s',
+  flexShrink: $vertical || $compact ? 1 : 0,
+}))
+const StepperStepIconSC = styled.div<{
+  $compact: boolean
+  $vertical: boolean
+  $isActive: boolean
+}>(({ $isActive }) => ({
+  display: 'flex',
+  width: '100%',
+  height: '100%',
+  position: 'absolute',
+  justifyContent: 'center',
+  alignItems: 'center',
+
+  opacity: '1',
+  transform: 'scale(0)',
+  transition: 'all 0.2s ease',
+  img: {
+    opacity: $isActive ? 1 : 0.5,
+  },
+  [`&.${shownClassName}`]: {
+    transform: 'scale(1)',
+    opacity: '1',
+    transition: `transform 0.3s ${bounceEase}, opacity 0.1s ease`,
+    transitionDelay: '0.1s',
+  },
+}))
+
+export function StepperStep({
+  isActive = false,
+  isComplete = false,
+  stepTitle,
+  IconComponent,
+  imageUrl = '',
+  iconSize,
+  circleSize,
+  vertical = false,
+  collapseTitles = false,
+  compact = false,
+  canComplete = true,
+  ...props
+}: StepProps) {
+  const theme = useTheme()
+
+  circleSize =
+    circleSize ?? (compact ? COMPACT_CIRCLE_SIZE : DEFAULT_CIRCLE_SIZE)
+  iconSize = iconSize ?? (compact ? COMPACT_ICON_SIZE : DEFAULT_ICON_SIZE)
+
+  return (
+    <StepperStepSC
+      $compact={compact}
+      $vertical={vertical}
+      $isActive={isActive}
+      $circleSize={circleSize}
+      {...props}
+    >
+      <WrapWithIf
+        condition={collapseTitles && !!stepTitle}
+        wrapper={<Tooltip label={stepTitle} />}
+      >
+        <div className="stepInner">
+          <StepperStepIconSC
+            $compact={compact}
+            $vertical={vertical}
+            $isActive={isActive}
+            className={canComplete && isComplete ? '' : shownClassName}
+          >
+            {IconComponent && (
+              <IconComponent
+                size={iconSize}
+                color={
+                  isActive
+                    ? theme.colors['icon-default']
+                    : theme.colors['icon-xlight']
+                }
+              />
+            )}
+            {imageUrl && (
+              <img
+                src={imageUrl}
+                width={iconSize}
+                height={iconSize}
+              />
+            )}
+          </StepperStepIconSC>
+          <StepperStepIconSC
+            $compact={compact}
+            $vertical={vertical}
+            $isActive={isActive}
+            className={canComplete && isComplete ? shownClassName : ''}
+          >
+            <StatusOkIcon
+              color={
+                compact
+                  ? theme.colors['text-xlight']
+                  : theme.colors['icon-success']
+              }
+              size={iconSize}
+            />
+          </StepperStepIconSC>
+        </div>
+      </WrapWithIf>
+      {!collapseTitles && (
+        <StepperStepTitleSC
+          $compact={compact}
+          $vertical={vertical}
+          $isActive={isActive}
+        >
+          {stepTitle}
+        </StepperStepTitleSC>
+      )}
+    </StepperStepSC>
+  )
+}
diff --git a/src/components/StepperStepConnection.tsx b/src/components/StepperStepConnection.tsx
new file mode 100644
index 00000000..e04ba776
--- /dev/null
+++ b/src/components/StepperStepConnection.tsx
@@ -0,0 +1,54 @@
+import styled from 'styled-components'
+
+import { DEFAULT_CIRCLE_SIZE, type StepConnectionProps } from './Stepper'
+
+const StepperStepConnectionSC = styled.div<{
+  $compact: boolean
+  $vertical: boolean
+  $isActive: boolean
+  $circleSize: number
+}>(({ theme, $vertical, $compact, $isActive, $circleSize }) => ({
+  width: $compact ? '16px' : $vertical ? 1 : '100%',
+  height: $vertical ? 30 : 1,
+  flexGrow: $compact ? 0 : 1,
+  backgroundColor: theme.colors.border,
+  position: 'relative',
+  alignSelf: $compact ? 'center' : 'none',
+  marginTop: $vertical
+    ? theme.spacing.small
+    : $compact
+    ? 0
+    : ($circleSize || DEFAULT_CIRCLE_SIZE) / 2,
+  marginBottom: $vertical ? theme.spacing.small : 'none',
+  marginLeft: $vertical ? theme.spacing.large : 'none',
+  '.stepConnectionInner': {
+    width: $vertical ? 1 : $isActive ? '100%' : 0,
+    height: $vertical ? ($isActive ? 30 : 0) : '100%',
+    position: 'absolute',
+    left: 0,
+    top: 0,
+    backgroundColor: theme.colors['border-selected'],
+    transition: 'width 0.1s ease-out, height 0.1s ease-out',
+  },
+}))
+
+export function StepperStepConnection({
+  isActive = false,
+  vertical = false,
+  compact = false,
+  circleSize = DEFAULT_CIRCLE_SIZE,
+  ...props
+}: StepConnectionProps) {
+  return (
+    <StepperStepConnectionSC
+      $isActive={isActive}
+      $vertical={vertical}
+      $compact={compact}
+      $circleSize={circleSize}
+      aria-hidden="true"
+      {...props}
+    >
+      <div className="stepConnectionInner" />
+    </StepperStepConnectionSC>
+  )
+}