Merge pull request #146 from rsksmart/feat/step-component

Steps component

src/components/Steps/Step/index.js

@@ -0,0 +1,16 @@
+import React from "react";
+import clsx from "clsx";
+
+import styles from "./styles.module.scss";
+
+export default function Step({children, title, index, ...props}) {
+
+  return <div className={clsx(styles.Step)}>
+    <div class={clsx(styles.StepHeader, 'd-flex gap-8 align-items-center flex-wrap py-4')}>
+      <h4 className="m-0 fs-14 fw-medium lh-base">{title}</h4>
+    </div>
+    <div class={`border-start ps-14 ms-20 py-10 markdown`}>
+      {children}
+    </div>
+  </div>
+}

src/components/Steps/Step/styles.module.scss

@@ -0,0 +1,20 @@
+.Step{
+  counter-increment: step-counter;
+  --bs-border-color: var(--rsk-step-border-color, #BFBFBF);
+}
+.StepHeader{
+  &:before{
+    content: counter(step-counter);
+    font: 500 1.25rem/1 var(--bs-body-font-family);
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    min-width: 42px;
+    text-align: center;
+    border: 1px solid var(--rsk-step-border-color, #BFBFBF);
+    background-color: var(--rsk-step-bg-color, #F2F2F2);
+    border-radius: 28px;
+    min-height: 28px;
+    color: var(--bs-body-color);
+  }
+}

src/components/Steps/index.js

@@ -0,0 +1,10 @@
+import React from "react";
+import clsx from "clsx";
+import styles from './styles.module.scss';
+
+export default function Steps({children, className, ...props}) {
+
+  return <div className={clsx(styles.StepsWrap, className)} {...props}>
+    {children}
+  </div>
+}

src/components/Steps/styles.module.scss

@@ -0,0 +1,3 @@
+.StepsWrap{
+  counter-reset: step-counter;
+}

src/pages/components.md

@@ -731,3 +731,50 @@ Available logo options you can find [here](https://github.com/inttter/md-badges)
 <Shield title="Badge with link and tooltip" tooltip="Badge with link and tooltip" href="https://rootstock.io/" color="purple" />
 <Shield title="Badge with logo" href="https://bitcoin.org/" color="gray" label="Bitcoin" labelColor="f7931a" logo="bitcoin" />
 <Shield color="F3B724" title="Zcash" logo="zcash" logoColor="black" />
+
+## Steps component
+
+The Steps component is a structured guide that breaks down complex tasks into clear, sequential steps. Each step includes a title, and detailed instructions.
+
+- **Code**
+
+```jsx
+<Steps>
+  <Step title="Intro">
+    // any md content
+  </Step>
+  <Step title="Preparing the Environment">
+    // any md content
+  </Step>
+  <Step title="Setting Up the Project">
+    // any md content
+  </Step>
+</Steps>
+````
+
+**Result**
+
+<Steps>
+
+<Step title="Intro" >
+  ![Rootstock Technology Stack - High Level](/img/concepts/rootstock-tech-stack.svg)
+</Step>
+
+<Step title="Preparing the Environment" >
+Before starting, ensure you have all necessary tools and resources. Begin by setting up a clean workspace, gathering any required materials, and organizing the tools you’ll need. This step will help you work efficiently without interruptions.
+- **Install Required Software**: Make sure all necessary software is installed on your computer. This might include a code editor, development environment, or any project-specific applications.
+- **Check Dependencies**: Review the documentation for any dependencies required. Having these pre-installed can save you troubleshooting time later.
+- **Create a Backup**: If you’re working with existing data, create a backup to prevent data loss in case of errors.
+</Step>
+
+<Step title="Setting Up the Project">
+With your environment prepared, start by initializing your project. Follow these instructions carefully to avoid setup issues later on.
+
+- **Clone the Repository**: If you’re working from an existing repository, clone it to your local machine using the following command: `git clone [repository-url]`.
+- **Install Project Dependencies**: Run `npm install` or `yarn install` to install all project dependencies. This ensures you have all the necessary libraries and tools.
+- **Configure Environment Variables**: Create a `.env` file in the root directory and add all necessary environment variables. Refer to the project documentation for required variables.
+- **Run Initial Setup Script**: Many projects have setup scripts to streamline the configuration process. Check the project’s README file for any specific setup commands.
+
+By following these steps, you should now have a basic project setup and be ready to start development.
+</Step>
+</Steps>

src/scss/base/_content.scss

@@ -162,8 +162,11 @@ ul{
       max-height: 560px;
     }
   }
-  p > img{
-    margin: 0;
+  p > img:first-child{
+    margin-top: 0;
+  }
+  p > img:last-child{
+    margin-bottom: 0;
   }
   & > :first-child {
     margin-top: 0;

src/scss/base/_theme-variables.scss

@@ -257,6 +257,10 @@ html:root {
 
   //Highlight
   --bs-highlight-bg: #{$yellow};
+
+  //Steps component
+  --rsk-step-border-color: #{$gray-250};
+  --rsk-step-bg-color: #{$gray-50};
 }
 
 
@@ -372,4 +376,8 @@ html:root {
   --rsk-input-placeholder-color: #{$gray-450};
   --rsk-input-border-color-focus: var(--bs-primary);
   --rsk-input-focus-bg: #{$gray-900};
+
+  //Steps component
+  --rsk-step-border-color: #{$gray-600};
+  --rsk-step-bg-color: #{$gray-850};
 }

src/theme/MDXComponents.js

@@ -16,10 +16,13 @@ import Button from "/src/components/Button";
 import CardsGrid from "/src/components/CardsGrid";
 import CardsGridItem from "/src/components/CardsGrid/Card";
 
+import Steps from "/src/components/Steps";
+import Step from "/src/components/Steps/Step";
+
 export default {
   // Re-use the default mapping
   ...MDXComponents,
   // Map the "<Highlight>" tag to our Highlight component
   // `Highlight` will receive all props that were passed to `<Highlight>` in MDX
-  Carousel, CarouselItem, Tabs, TabItem, Accordion, Card, Quote, Video, Filter, FilterItem, Button, CardsGrid, CardsGridItem, Shield
+  Carousel, CarouselItem, Tabs, TabItem, Accordion, Card, Quote, Video, Filter, FilterItem, Button, CardsGrid, CardsGridItem, Shield, Steps, Step
 };