Step one component

src/features/common/components/button/button.component.tsx

@@ -0,0 +1,19 @@
+import { ArrowIcon } from "features/common/icons/arrow.icon";
+import styles from "./button.module.scss";
+
+export const Button = ({
+  label,
+  onClick,
+}: {
+  label: string;
+  onClick?: () => void;
+}) => {
+  return (
+    <button className={styles.button} onClick={onClick}>
+      {label}
+      <div className={styles.button_arrow}>
+        <ArrowIcon />
+      </div>
+    </button>
+  );
+};

src/features/common/components/button/button.module.scss

@@ -0,0 +1,55 @@
+@use "libs/theme/styles/variables" as *;
+@use "libs/theme/styles/mixins" as *;
+
+.button {
+  display: flex;
+  padding: 0.75rem 2rem;
+  justify-content: center;
+  align-items: center;
+  gap: 0.5rem;
+  align-self: stretch;
+  border-radius: 0.375rem;
+  font-size: 1rem;
+  line-height: 1.5rem;
+  font-style: normal;
+  font-weight: 500;
+  letter-spacing: 0.2px;
+  background-color: var(--sky);
+  color: $color_fg_on_button_primary;
+  border: 0px;
+  cursor: pointer;
+
+  @media #{$breakpoint-dimension-sm} {
+    width: fit-content;
+    margin: auto;
+  }
+}
+
+.button_arrow {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 0.75rem;
+  width: 0.75rem;
+  border: 0;
+
+  svg {
+    height: 0.75rem;
+    width: 0.75rem;
+
+    path {
+      fill: $color_fg_on_button_primary;
+    }
+  }
+
+  @media #{$breakpoint-dimension-sm} {
+    height: 1rem;
+    width: 1rem;
+
+    svg {
+      height: 0.875rem;
+      width: 0.875rem;
+    }
+  }
+}

src/features/common/icons/arrow.icon.tsx

@@ -0,0 +1,28 @@
+export const ArrowIcon = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="18"
+      height="18"
+      viewBox="0 0 18 18"
+      fill="none"
+    >
+      <path
+        d="M10.8242 4.44727L15.3767 8.99977L10.8242 13.5523"
+        stroke="white"
+        strokeWidth="1.5"
+        strokeMiterlimit="10"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M2.625 9H15.2475"
+        stroke="white"
+        strokeWidth="1.5"
+        strokeMiterlimit="10"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};

src/features/debugger/components/codeblock/codeblock.component.tsx

@@ -0,0 +1,50 @@
+import styles from "./codeblock.module.scss";
+
+export type RequestData = {
+  url: string;
+  params: {
+    key: string;
+    value: string;
+    isEditable?: boolean;
+  }[];
+};
+interface CodeBlockProps {
+  title: string;
+  type: "request" | "json";
+  requestData?: RequestData;
+}
+
+export const Codeblock = (props: CodeBlockProps) => {
+  const { title, type, requestData } = props;
+  return (
+    <div className={styles.scroll_container}>
+      <div className={styles.container}>
+        <div className={styles.title_container}>{title}</div>
+        <div className={styles.code_block}>
+          {type === "request" && requestData ? (
+            <>
+              <div className={styles.code_line}>
+                <p className={styles.code_line_number}>01</p>
+                <p className={styles.param_value} data-editable={"true"}>
+                  <span>{`${requestData.url}?`}</span>
+                </p>
+              </div>
+              {requestData.params.map((data, idx) => (
+                <div key={idx} className={styles.code_line}>
+                  <p className={styles.code_line_number}>{`0${idx + 2}`}</p>
+                  <p
+                    className={styles.param_value}
+                    data-editable={data.isEditable ? "true" : "false"}
+                  >
+                    {`${idx > 0 ? "&" : ""}${data.key}=`}
+                    <span>{data.value}</span>
+                  </p>
+                </div>
+              ))}
+            </>
+          ) : null}
+        </div>
+      </div>
+    </div>
+  );
+};

src/features/debugger/components/codeblock/codeblock.module.scss

@@ -0,0 +1,59 @@
+@use "libs/theme/styles/variables" as *;
+@use "libs/theme/styles/mixins" as *;
+
+
+.scroll_container {
+  overflow-x: auto;
+  overflow-y: hidden;
+  max-width: 100%;
+}
+.container {
+  width: 544px;
+  border: 0.5px solid var(--color_border_light);
+  background-color: var(--color_bg_light);
+}
+
+.title_container {
+    padding: 24px;
+    color: var(--color_fg_bold);
+    text-transform: uppercase;
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 20px;
+    border-bottom: 0.5px solid var(--color_border_light);
+}
+
+.code_block {
+  color: var(--color_fg_link);
+  font-feature-settings: 'liga' off, 'clig' off;
+  font-family: "Roboto Mono";
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 32px;
+  letter-spacing: 0.15px;
+  margin-left: 1.5rem;
+  padding: 1.5rem 0;
+}
+
+.code_line {
+  display: flex;
+  &:first-child {
+    gap: 1rem;
+  }
+  &:not(:first-child) {
+    gap: 2rem;
+  }
+}
+
+.code_line_number {
+  color: var(--functional-gray-550);
+}
+
+.param_value {
+   &[data-editable="true"] span{
+    border: 1px solid var(--seafoam);
+    padding: 0 0.5rem;
+    cursor: pointer;
+  }
+}

src/features/debugger/components/steps/debugger-steps.component.tsx

@@ -1,4 +1,4 @@
-"use client"
+"use client";
 import { ComponentType, useState } from "react";
 import styles from "./debugger-steps.module.scss";
 import { StepOne, StepTwo, StepThree, StepFour } from "./index";
@@ -38,25 +38,34 @@ export const DebuggerSteps = () => {
     <div className={styles.container}>
       <div className={styles.wrapper}>
         <div className={styles.content}>
-          {stepsList.map((step, index) => {
+          {stepsList.map(({ id, label, component: Component }, index) => {
             const state =
               index < currentStepIndex
                 ? "completed"
                 : index === currentStepIndex
                 ? "current"
                 : "upcoming";
             return (
-              <div
-                key={step.id}
-                className={styles.step_container}
-                data-state={state}
-                aria-current={state === "current" ? "step" : undefined}
-                aria-label={`${step.label} ${state}`}
-              >
-                <div className={styles.step_content}>
-                  {" "}
-                  <div className={styles.step_number}>{index + 1}</div>
-                  <p>{step.label}</p>
+              <div key={id} className={styles.step_container}>
+                <div
+                  className={styles.step_title_container}
+                  data-state={state}
+                  aria-current={state === "current" ? "step" : undefined}
+                  aria-label={`${label} ${state}`}
+                >
+                  <div className={styles.step_title_content}>
+                    {" "}
+                    <div className={styles.step_number}>{index + 1}</div>
+                    <p>{label}</p>
+                  </div>
+                </div>
+
+                <div
+                  className={styles.step_content}
+                  data-open={state === "current"}
+                  aria-hidden={state !== "current"}
+                >
+                  <Component />
                 </div>
               </div>
             );

src/features/debugger/components/steps/debugger-steps.module.scss

@@ -3,6 +3,7 @@
 
 .container {
   @include Container;
+  margin-bottom: 100px;
 }
 
 .wrapper {
@@ -17,7 +18,7 @@
   backdrop-filter: blur(40px);
 }
 
-.step_container {
+.step_title_container {
   display: flex;
   padding: 0 24px;
   align-items: center;
@@ -31,15 +32,15 @@
   }
 }
 
-.step_content {
+.step_title_content {
     display: flex;
     padding: 16px 40px 16px 0;
     align-items: center;
     gap: 12px;
     color: var(--color_fg_bold);
 }
 
-.step_container:not(:last-child) {
+.step_container:not(:last-child) .step_title_container {
     border-bottom: 0.5px solid var(--color_border_light);
 }
 
@@ -53,4 +54,20 @@
   background-color: var(--color_fg_default);
   color: var(--color_bg_layer);
   flex-shrink: 0;
+}
+
+.step_content {
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  align-items: center;
+  gap: 2rem;
+  margin: 0;
+  max-height: 0; 
+  overflow: hidden;
+  transition: max-height 0.5s ease-out;
+  &[data-open="true"] {
+    max-height: fit-content;
+    margin: 2rem 1rem;
+  }
 }

src/features/debugger/components/steps/step-one/step-one.component.tsx

@@ -1,3 +1,40 @@
+import { Button } from "features/common/components/button/button.component";
+import { Codeblock, RequestData } from "../../codeblock/codeblock.component";
+
+//TODO: replace with actual data coming from local state and api endpoint
+const REQUEST_DATA: RequestData = {
+  url: "https://samples.auth0.com/authorize",
+  params: [
+    {
+      key: "client_id",
+      value: "testvalue1234456677888",
+      isEditable: true,
+    },
+    {
+      key: "redirect_uri",
+      value: "https://openidconnect.net/callback",
+    },
+    {
+      key: "scope",
+      value: "openid profile email phone address",
+      isEditable: true,
+    },
+    {
+      key: "response_type",
+      value: "code"
+    },
+    {
+      key: "state",
+      value: "12345678909876543212"
+    }
+  ],
+};
+
 export const StepOne = () => {
-    return <p>Step One</p>
-}
+  return (
+    <>
+      <Codeblock title="Request" type="request" requestData={REQUEST_DATA} />
+      <Button label="Start" />
+    </>
+  );
+};