Work on the styling + stories

mintlify · Sep 4, 2023 · d504c2d · d504c2d
1 parent ac08f88
commit d504c2d
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 17 deletions.
diff --git a/src/Steps/Step.tsx b/src/Steps/Step.tsx
@@ -1,3 +1,4 @@
+import cn from 'clsx';
 import { ReactNode } from 'react';
 
 export type StepProps = {
@@ -8,11 +9,21 @@ export type StepProps = {
   variant?: 'subtle' | 'outline';
 };
 
-const Step = ({ indicator, title, description, children, variant }: StepProps) => {
+const Step = ({ indicator, title, description, children, variant = 'subtle' }: StepProps) => {
   return (
-    <div role="listitem" className="flex items-start gap-8">
-      <div className="absolute w-[26px] h-[26px] border-4 border-white bg-slate-100 dark:border-slate-900 dark:bg-slate-800 rounded-lg text-neutral-400 text-base font-normal flex items-center justify-center text-center ml-[-38px]">
-        {indicator}
+    <div role="listitem" className="flex items-start gap-8 first:pt-0 pt-4">
+      <div className="absolute ml-[-38px] p-1 rounded-[6px] bg-white dark:bg-zinc-900">
+        <div
+          className={cn(
+            'w-5 h-5 shrink-0 border rounded-[4px] text-sm flex items-center justify-center text-center font-mono',
+            {
+              'bg-zinc-100 dark:bg-zinc-800 text-zinc-400 border-transparent': variant === 'subtle',
+              'text-zinc-500 border-zinc-200': variant === 'outline',
+            }
+          )}
+        >
+          {indicator}
+        </div>
       </div>
       <div>
         <h3>{title}</h3>

diff --git a/src/Steps/Steps.tsx b/src/Steps/Steps.tsx
@@ -6,7 +6,7 @@ type StepsProps = {
 
 const Steps = ({ children }: StepsProps) => {
   return (
-    <div className="ml-4 mb-12 border-l border-gray-200 pl-6">
+    <div role="list" className="ml-4 mb-12 border-l border-gray-200 dark:border-neutral-800 pl-6">
       {Array.isArray(children)
         ? children.map(({ props }, index) => (
             <Step key={props.title + index} {...props} indicator={props.indicator ?? index + 1} />

diff --git a/src/stories/Display/Steps.stories.tsx b/src/stories/Display/Steps.stories.tsx
@@ -8,25 +8,56 @@ import Step from '../../Steps/Step';
 export default {
   title: 'Display/Steps',
   component: Steps,
-} as ComponentMeta<typeof Steps>;
-
-const Template: ComponentStory<typeof Steps> = (args) => (
-  <div className="ml-16 mt-8">
-    <Steps {...args}>
-      <Step title="Hello world" description="We'll get you setup here.">
+  args: {
+    children: [
+      <Step key={0} title="Hello world" description="We'll get you setup here.">
         This is the first step to getting setup.
-      </Step>
-
-      <Step title="Now let's get started" variant="outline">
+      </Step>,
+      <Step key={1} title="Now let's get started">
         The next steps to doing things are...
         <CodeBlock>
           <pre>
             This is a code block. This is a code block. This is a code block. This is a code block.
           </pre>
         </CodeBlock>
-      </Step>
-    </Steps>
+      </Step>,
+    ],
+  },
+} as ComponentMeta<typeof Steps>;
+
+const Template: ComponentStory<typeof Steps> = (args) => (
+  <div className="ml-16 mt-8">
+    <Steps {...args} />
   </div>
 );
 
-export const Default = Template.bind({});
+export const MultipleSteps = Template.bind({});
+
+export const SingleStep = Template.bind({});
+SingleStep.args = {
+  children: [
+    <Step key={0} title="Hello world" description="We'll get you setup here.">
+      This is the first step to getting setup.
+    </Step>,
+  ],
+};
+
+export const OutlineVariant = Template.bind({});
+OutlineVariant.args = {
+  children: [
+    <Step key={0} title="Hello world" description="We'll get you setup here.">
+      This is the first step to getting setup.
+    </Step>,
+    <Step key={1} title="Now let's get started" variant="outline">
+      The next steps to doing things are...
+      <CodeBlock>
+        <pre>
+          This is a code block. This is a code block. This is a code block. This is a code block.
+        </pre>
+      </CodeBlock>
+    </Step>,
+    <Step key={1} title="And another" variant="outline">
+      One more step that still needs to get finished
+    </Step>,
+  ],
+};