From 519ead9ab87df166c0811992153cae9f737822dd Mon Sep 17 00:00:00 2001 From: alexcss Date: Thu, 7 Nov 2024 12:22:55 +0200 Subject: [PATCH] Steps component --- src/components/Steps/Step/index.js | 16 +++++++ src/components/Steps/Step/styles.module.scss | 20 +++++++++ src/components/Steps/index.js | 10 +++++ src/components/Steps/styles.module.scss | 3 ++ src/pages/components.md | 47 ++++++++++++++++++++ src/scss/base/_content.scss | 7 ++- src/scss/base/_theme-variables.scss | 8 ++++ src/theme/MDXComponents.js | 5 ++- 8 files changed, 113 insertions(+), 3 deletions(-) create mode 100644 src/components/Steps/Step/index.js create mode 100644 src/components/Steps/Step/styles.module.scss create mode 100644 src/components/Steps/index.js create mode 100644 src/components/Steps/styles.module.scss diff --git a/src/components/Steps/Step/index.js b/src/components/Steps/Step/index.js new file mode 100644 index 00000000..23d08502 --- /dev/null +++ b/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
+
+

{title}

+
+
+ {children} +
+
+} diff --git a/src/components/Steps/Step/styles.module.scss b/src/components/Steps/Step/styles.module.scss new file mode 100644 index 00000000..f1fa7033 --- /dev/null +++ b/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); + } +} diff --git a/src/components/Steps/index.js b/src/components/Steps/index.js new file mode 100644 index 00000000..f1203264 --- /dev/null +++ b/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
+ {children} +
+} diff --git a/src/components/Steps/styles.module.scss b/src/components/Steps/styles.module.scss new file mode 100644 index 00000000..57f5a99c --- /dev/null +++ b/src/components/Steps/styles.module.scss @@ -0,0 +1,3 @@ +.StepsWrap{ + counter-reset: step-counter; +} diff --git a/src/pages/components.md b/src/pages/components.md index bcdf4f33..a2981c19 100644 --- a/src/pages/components.md +++ b/src/pages/components.md @@ -731,3 +731,50 @@ Available logo options you can find [here](https://github.com/inttter/md-badges) + +## 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 + + + // any md content + + + // any md content + + + // any md content + + +```` + +**Result** + + + + + ![Rootstock Technology Stack - High Level](/img/concepts/rootstock-tech-stack.svg) + + + +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. + + + +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. + + diff --git a/src/scss/base/_content.scss b/src/scss/base/_content.scss index 7ee96eef..84c16775 100644 --- a/src/scss/base/_content.scss +++ b/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; diff --git a/src/scss/base/_theme-variables.scss b/src/scss/base/_theme-variables.scss index 77eac9ca..9cd94e58 100644 --- a/src/scss/base/_theme-variables.scss +++ b/src/scss/base/_theme-variables.scss @@ -252,6 +252,10 @@ html:root { --rsk-input-placeholder-color: #{$gray-550}; --rsk-input-border-color-focus: var(--bs-primary); --rsk-input-focus-bg: #{$gray-100}; + + //Steps component + --rsk-step-border-color: #{$gray-250}; + --rsk-step-bg-color: #{$gray-50}; } @@ -366,4 +370,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}; } diff --git a/src/theme/MDXComponents.js b/src/theme/MDXComponents.js index f7ac39bb..6dd5a53a 100644 --- a/src/theme/MDXComponents.js +++ b/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 "" tag to our Highlight component // `Highlight` will receive all props that were passed to `` 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 };