feat: add expandVerticalSteps prop

.github/workflows/tests.yml

@@ -18,9 +18,12 @@ defaults:
 jobs:
   Tests:
     runs-on: ubuntu-latest
-
     steps:
-      - uses: actions/checkout@v3
+      # - uses: actions/checkout@v3
+      - uses: actions/setup-node@v1
+        with:
+          node-version: "16"
+          registry-url: https://registry.npmjs.org/
       - name: Install dependencies
         run: yarn
       - name: Run test suite

.github/workflows/version.yml

@@ -16,7 +16,7 @@ jobs:
           persist-credentials: false
       - uses: actions/setup-node@v1
         with:
-          node-version: "18"
+          node-version: "16"
           registry-url: https://registry.npmjs.org/
       - run: yarn
       - run: npx semantic-release

CONTRIBUTING.md

@@ -16,9 +16,17 @@ cd chakra-ui-steps
 
 3. Setup all the dependencies and packages by running `yarn`.
 
-## Development
+## Install deps
 
-You'll notice that the project has been configured using yarn workspaces. Essentially this means that you can run `yarn` from the root of the project and it will install all the dependencies for all the packages. You can also run `yarn` from within a package and it will only install the dependencies for that package.
+To get started, run `yarn` from the root of the project to install all the dependencies.
+
+You'll notice that the project has been configured using yarn workspaces. Essentially this means that you can run `yarn` from the root of the project and it will install all the dependencies for all the packages in the project. You can also run `yarn` from the root of each package and it will install the dependencies for that package only.
+
+### Running the development server
+
+To run the development server, first run `cd chakra-ui-steps` to navigate to the correct directory. Then run `yarn dev`. This will start the vite server and open the browser to the demo page.
+
+Then, navigate to the `website` directory and run `yarn dev`. This will start the next dev server for the website. You can now navigate to `http://localhost:3000` to view the website.
 
 ### Running Storybook
 

README.md

@@ -2,24 +2,17 @@
   chakra-ui-steps
 </h1>
 
-<span>Steps component designed to work seamlessly with <a href="https://chakra-ui.com/" target="_blank">Chakra UI</a>.</span> <span>An interactive demo along with code examples can be viewed <a href="https://jeanverster.github.io/chakra-ui-steps-site/" target="_blank">here</a>.</span>
+<span>Steps component designed to work seamlessly with <a href="https://chakra-ui.com/" target="_blank">Chakra UI</a>.</span> <span>All documentation and a variety of code examples can be viewed <a href="https://chakra-ui-steps.vercel.app" target="_blank">here</a>.</span>
 <br />
 <br />
 
-[![MIT License](https://badgen.net/github/license/jeanverster/chakra-ui-steps "MIT License")](LICENSE.md)
 [![npm - chakra-ui-steps](https://img.shields.io/npm/v/chakra-ui-steps "chakra-ui-steps npm")](https://www.npmjs.com/package/chakra-ui-steps)
 [![bundle size - chakra-ui-steps](https://badgen.net/bundlephobia/min/chakra-ui-steps)](https://bundlephobia.com/result?p=chakra-ui-steps)
 [![bundle size - chakra-ui-steps](https://badgen.net/bundlephobia/minzip/chakra-ui-steps)](https://bundlephobia.com/result?p=chakra-ui-steps)
 [![Total Downloads - chakra-ui-steps](https://badgen.net/npm/dt/chakra-ui-steps?color=blue "chakra-ui-steps npm downloads")](https://www.npmjs.com/package/chakra-ui-steps)
+[![Weekly Downloads - chakra-ui-steps](https://badgen.net/npm/dw/chakra-ui-steps?color=blue "chakra-ui-steps npm weekly downloads")](https://www.npmjs.com/package/chakra-ui-steps)
 
-![screenshot](https://i.imgur.com/B9zbJEa.gif)
-
-## Features
-
-- Multiple orientations
-- Easily render step content
-- Custom icons
-- Size variants
+![screenshot](https://i.imgur.com/4NDju8N.png)
 
 ## Installation
 
@@ -37,12 +30,10 @@ npm i chakra-ui-steps
 
 ## Usage
 
-> NOTE: This v1.4.0 of this component requires @chakra-ui/react >= v1.6.7 to work correctly. You can follow the installation instructions <a href="https://chakra-ui.com/docs/getting-started" target="_blank">here</a>. If you aren't able to update your chakra version you can still use v1.3.0
-
-In order to get started you will need to extend the default Chakra theme with the provided `StepsTheme` object, like so:
+In order to use the `Steps` component you will need to first extend the theme with the `StepsTheme` object. This can be done in your theme file:
 
 ```jsx
-import { ChakraProvider, extendTheme } from "@chakra-ui/react";
+import { extendTheme } from "@chakra-ui/react";
 import { StepsTheme as Steps } from "chakra-ui-steps";
 
 const theme = extendTheme({
@@ -51,76 +42,41 @@ const theme = extendTheme({
   },
 });
 
-export const App = () => {
-  return (
-    <ChakraProvider theme={theme}>
-      <YourApp />
-    </ChakraProvider>
-  );
-};
+export default theme;
 ```
 
-Once that's done you should be good to go!
-
-### Basic Example
+Then you can use the `Steps` component in your app:
 
 ```jsx
-import { Step, Steps, useSteps } from "chakra-ui-steps";
-
-const content = (
-  <Flex py={4}>
-    <LoremIpsum p={1} />
-  </Flex>
-);
-
-const steps = [
-  { label: "Step 1", content },
-  { label: "Step 2", content },
-  { label: "Step 3", content },
-];
-
-export const StepsExample = () => {
-  const { nextStep, prevStep, setStep, reset, activeStep } = useSteps({
+import { Steps, Step } from "chakra-ui-steps";
+
+const Example = () => {
+  const { nextStep, prevStep, reset, activeStep } = useSteps({
     initialStep: 0,
   });
-
   return (
-    <Flex flexDir="column" width="100%">
+    <div>
       <Steps activeStep={activeStep}>
-        {steps.map(({ label, content }) => (
-          <Step label={label} key={label}>
-            {content}
-          </Step>
-        ))}
+        <Step label="Step 1" description="This is the first step" />
+        <Step label="Step 2" description="This is the second step" />
+        <Step label="Step 3" description="This is the third step" />
       </Steps>
-      {activeStep === steps.length ? (
-        <Flex p={4}>
-          <Button mx="auto" size="sm" onClick={reset}>
-            Reset
-          </Button>
-        </Flex>
-      ) : (
-        <Flex width="100%" justify="flex-end">
-          <Button
-            isDisabled={activeStep === 0}
-            mr={4}
-            onClick={prevStep}
-            size="sm"
-            variant="ghost"
-          >
-            Prev
-          </Button>
-          <Button size="sm" onClick={nextStep}>
-            {activeStep === steps.length - 1 ? "Finish" : "Next"}
-          </Button>
-        </Flex>
-      )}
-    </Flex>
+      <Button onClick={() => prevStep()}>Back</Button>
+      <Button onClick={() => nextStep()}>Next</Button>
+    </div>
   );
 };
 ```
 
-### Upgrade guide
+## Docs
+
+For a full list of available props and examples of how to use the component, please visit the <a href="https://chakra-ui-steps.vercel.app" target="_blank">documentation site</a>.
+
+If you found this package useful, please consider leaving a star ⭐️ on the repo. Thanks!
+
+<hr />
+
+## Upgrade guide
 
 If you are upgrading to v2 of this component you will need to make the following changes:
 
@@ -131,74 +87,11 @@ If you are upgrading to v2 of this component you will need to make the following
 + import { StepsTheme as Steps } from 'chakra-ui-steps';
 ```
 
-The rest of the API remains the same.
+- Previously the `Steps` component accepted a `labelOrientation` prop, this has been removed in favor of the `circles-alt` variant. If you were using this prop you will need to update your code to use the variant instead:
 
-### Custom Styles
-
-If you would like to customize the appearance of the Steps component you can do so using the multi part component styling approach as described <a href="https://chakra-ui.com/docs/styled-system/component-style#styling-multipart-components" target="_blank">here</a>. The parts available for styling are:
-
-```js
-description;
-icon;
-iconLabel;
-label;
-labelContainer;
-step;
-stepContainer;
-stepIconContainer;
-steps;
-```
-
-The default styles for each part can be found <a href="https://github.com/jeanverster/chakra-ui-steps/blob/main/chakra-ui-steps/src/theme/index.ts" target="_blank">here</a>. Below is an example of how you might change the stroke width of the icons:
-
-```js
-import { StepsTheme } from "chakra-ui-steps";
-
-const CustomSteps = {
-  ...StepsTheme,
-  baseStyle: (props) => {
-    return {
-      ...StepsTheme.baseStyle(props),
-      icon: {
-        ...StepsTheme.baseStyle(props).icon,
-        // your custom styles here
-        strokeWidth: "1px",
-      },
-    };
-  },
-};
-
-const theme = extendTheme({
-  components: {
-    Steps: CustomSteps,
-  },
-});
+```diff
+- <Steps labelOrientation="vertical" />
++ <Steps variant="circles-alt" />
 ```
 
-## Props
-
-> Note: Both the `Step` and `Steps` component extend the Chakra UI `Box` component so they accept all the default styling props.
-
-### `Steps`
-
-| Prop              | Type                 | Required | Description                                                                | Default    |
-| ----------------- | -------------------- | -------- | -------------------------------------------------------------------------- | ---------- |
-| **`activeStep`**  | number               | yes      | Currently active step                                                      | 0          |
-| **`colorScheme`** | string               | no       | Sets the color accent of the Steps component show                          | green      |
-| **`orientation`** | string               | no       | Sets the orientation of the Steps component                                | horizontal |
-| **`responsive`**  | boolean              | no       | Sets whether the component auto switches to vertical orientation on mobile | true       |
-| **`checkIcon`**   | React.ComponentType  | no       | Allows you to provide a custom check icon                                  | undefined  |
-| **`onClickStep`** | () => void           | no       | If defined, allows you to click on the step icons                          | undefined  |
-| **`state`**       | 'loading' \| 'error' | no       | Let's you set the state to error or loading                                | undefined  |
-
-### `Step`
-
-| Prop                  | Type                 | Required | Description                                                                                       | Default   |
-| --------------------- | -------------------- | -------- | ------------------------------------------------------------------------------------------------- | --------- |
-| **`label`**           | string               | no       | Sets the title of the step                                                                        | ''        |
-| **`description`**     | string               | no       | Provides extra info about the step                                                                | ''        |
-| **`icon`**            | React.ComponentType  | no       | Custom icon to overwrite the default numerical indicator of the step                              | undefined |
-| **`isCompletedStep`** | boolean              | no       | Individually control each step state, defaults to active step                                     | undefined |
-| **`isKeepError`**     | boolean              | no       | Individually control if each step should keep showing the error state                             | undefined |
-| **`checkIcon`**       | React.ComponentType  | no       | Allows you to provide a custom check icon that will override the one provided to Steps            | undefined |
-| **`state`**           | 'loading' \| 'error' | no       | Let's you set the state in a specific Step, if defined it will override the one provided to Steps | undefined |
+The rest of the API remains the same.