refactor(vertical-stepper): move vertical stepper package from private to leafygreen-ui

README.md

@@ -141,6 +141,7 @@ import Button from '@leafygreen-ui/button';
 | [@leafygreen-ui/toolbar](./packages/toolbar)                         | [![version](https://img.shields.io/npm/v/@leafygreen-ui/toolbar)](https://www.npmjs.com/package/@leafygreen-ui/toolbar)                         | ![downloads](https://img.shields.io/npm/dm/@leafygreen-ui/toolbar?color=white)             | [Live Example](http://mongodb.design/component/toolbar/live-example)                  |
 | [@leafygreen-ui/tooltip](./packages/tooltip)                         | [![version](https://img.shields.io/npm/v/@leafygreen-ui/tooltip)](https://www.npmjs.com/package/@leafygreen-ui/tooltip)                         | ![downloads](https://img.shields.io/npm/dm/@leafygreen-ui/tooltip?color=white)             | [Live Example](http://mongodb.design/component/tooltip/live-example)                  |
 | [@leafygreen-ui/typography](./packages/typography)                   | [![version](https://img.shields.io/npm/v/@leafygreen-ui/typography)](https://www.npmjs.com/package/@leafygreen-ui/typography)                   | ![downloads](https://img.shields.io/npm/dm/@leafygreen-ui/typography?color=white)          | [Live Example](http://mongodb.design/component/typography/live-example)               |
+| [@leafygreen-ui/vertical-stepper](./packages/vertical-stepper)       | [![version](https://img.shields.io/npm/v/@leafygreen-ui/vertical-stepper)](https://www.npmjs.com/package/@leafygreen-ui/vertical-stepper)       | ![downloads](https://img.shields.io/npm/dm/@leafygreen-ui/vertical-stepper?color=white)    | [Live Example](http://mongodb.design/component/vertical-stepper/live-example)         |
 | [@lg-charts/chart-card](./charts/chart-card)                         | [![version](https://img.shields.io/npm/v/@lg-charts/chart-card)](https://www.npmjs.com/package/@lg-charts/chart-card)                           | ![downloads](https://img.shields.io/npm/dm/@lg-charts/chart-card?color=white)              | [Live Example](http://mongodb.design/component/chart-card/live-example)               |
 | [@lg-charts/colors](./charts/colors)                                 | [![version](https://img.shields.io/npm/v/@lg-charts/colors)](https://www.npmjs.com/package/@lg-charts/colors)                                   | ![downloads](https://img.shields.io/npm/dm/@lg-charts/colors?color=white)                  | [Live Example](http://mongodb.design/component/colors/live-example)                   |
 | [@lg-charts/core](./charts/core)                                     | [![version](https://img.shields.io/npm/v/@lg-charts/core)](https://www.npmjs.com/package/@lg-charts/core)                                       | ![downloads](https://img.shields.io/npm/dm/@lg-charts/core?color=white)                    | [Live Example](http://mongodb.design/component/core/live-example)                     |

packages/vertical-stepper/CHANGELOG.md

@@ -0,0 +1,45 @@
+# @leafygreen-ui/vertical-stepper
+
+## 3.0.0
+
+### Major Changes
+
+- **Package has been renamed and moved!** This package is now published under the `@leafygreen-ui` scope. All dependencies and import paths must be updated from `@lg-private/vertical-stepper` to `@leafygreen-ui/vertical-stepper`.
+
+### Major Changes
+
+- c9203f7: Removes `prop-types`. Updates LG core packages to latest
+
+## 2.1.1
+
+### Patch Changes
+
+- 066c4ce: [LG-4670](https://jira.mongodb.org/browse/LG-4670): vertically stack buttons in `VerticalStepActions` on smaller breakpoints
+
+## 2.1.0
+
+### Minor Changes
+
+- dcab77e: [LG-4413](https://jira.mongodb.org/browse/LG-4413): VerticalStepper steps always render description and media regardless of current step
+
+## 2.0.0
+
+### Major Changes
+
+- a3f1aa9: Replaces `primaryButtonProps` and `secondaryButtonProps` with `actions` prop to enable more flexibility for CTAs in each step
+
+## 1.1.0
+
+### Minor Changes
+
+- f78419b: [LG-4395](https://jira.mongodb.org/browse/LG-4395): Fixes buttons sizes from default to small
+
+### Patch Changes
+
+- 8f076fb: Fixes naming of lg private packages from `@leafygreen-ui/*` to `@lg-private/*`
+
+## 1.0.0
+
+### Major Changes
+
+- d50a214: First major release of `VerticalStepper`. [LG-4333](https://jira.mongodb.org/browse/LG-4333)

packages/vertical-stepper/README.md

@@ -0,0 +1,113 @@
+# Vertical Stepper
+
+![npm (scoped)](https://img.shields.io/npm/v/@leafygreen-ui/vertical-stepper.svg)
+
+#### [View on MongoDB.design](https://www.mongodb.design/component/vertical-stepper/example/)
+
+## Installation
+
+### Yarn
+
+```shell
+yarn add @leafygreen-ui/vertical-stepper
+```
+
+### NPM
+
+```shell
+npm install @leafygreen-ui/vertical-stepper
+```
+
+## Example
+
+```js
+import Button, { Size, Variant } from `@leafygreen-ui/button`;
+import { VerticalStepper, VerticalStep } from `@leafygreen-ui/vertical-stepper`;
+
+const [currentStep, setCurrentStep] = useState(0);
+
+<VerticalStepper currentStep={currentStep}>
+  <VerticalStep
+    title="first step"
+    description={
+      <>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam
+        efficitur nunc mattis magna pretium, id mattis metus vestibulum. Integer
+        cursus ex ante, ut molestie lorem vestibulum id.{' '}
+        <Link href="https://www.mongodb.design/">Im a link</Link>
+      </>
+    }
+    actions={
+      <Button
+        onClick={() => setCurrentStep(step => step + 1)}
+        size={Size.Small}
+      >
+        primary button
+      </Button>
+    }
+  />
+  <VerticalStep
+    title="second step"
+    description="In eleifend, ante eget rhoncus dignissim, ex ex interdum arcu, quis commodo erat lectus non felis. Nulla malesuada dui non consectetur placerat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos."
+    actions={
+      <>
+        <Button
+          onClick={() => setCurrentStep(step => step - 1)}
+          size={Size.Small}
+        >
+          secondary button
+        </Button>
+        <Button
+          onClick={() => setCurrentStep(step => step + 1)}
+          size={Size.Small}
+          variant={Variant.Primary}
+        >
+          primary button
+        </Button>
+      </>
+    }
+    media={<img alt="test" src="https://placehold.co/170x85" />}
+  />
+  <VerticalStep
+    title="third step"
+    description="In eleifend, ante eget rhoncus dignissim, ex ex interdum arcu, quis commodo erat lectus non felis. Nulla malesuada dui non consectetur placerat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In eleifend, ante eget rhoncus dignissim, ex ex interdum arcu, quis commodo erat lectus non felis. Nulla malesuada dui non consectetur placerat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In eleifend, ante eget rhoncus dignissim, ex ex interdum arcu, quis commodo erat lectus non felis."
+    actions={
+      <>
+        <Button
+          onClick={() => setCurrentStep(step => step - 1)}
+          size={Size.Small}
+        >
+          secondary button
+        </Button>
+        <Button
+          onClick={() => setCurrentStep(step => step + 1)}
+          size={Size.Small}
+          variant={Variant.Primary}
+        >
+          primary button
+        </Button>
+      </>
+    }
+    media={<img alt="test" src="https://placehold.co/170x100" />}
+  />
+</VerticalStepper>;
+```
+
+## Properties
+
+### `<VerticalStepper />`
+
+| Prop        | Type      | Description                                                                                                                                             | Default |
+| ----------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- |
+| darkMode    | `boolean` | Determines if the component renders in dark mode                                                                                                        | `false` |
+| currentStep | `number`  | Zero-based. The index of the current step that will appear active. All steps will be marked as completed if the currentStep equals the number of steps. | `0`     |
+| children    | `string`  | Two or more `<VerticalStep/>` components                                                                                                                |         |
+
+### `<VerticalStep />`
+
+| Prop        | Type              | Description                                                     | Default |
+| ----------- | ----------------- | --------------------------------------------------------------- | ------- |
+| title       | `string`          | The title of the step.                                          |         |
+| description | `React.ReactNode` | The description of the step. This will render below the title.  |         |
+| media       | `React.ReactNode` | The image to the right of the text. E.g. `<img />` or `<svg />` |         |
+| actions     | `React.ReactNode` | Optional buttons that will render below the text.               |         |

packages/vertical-stepper/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@leafygreen-ui/vertical-stepper",
+  "version": "3.0.0",
+  "description": "LeafyGreen UI Kit Vertical Stepper",
+  "main": "./dist/umd/index.js",
+  "module": "./dist/esm/index.js",
+  "types": "./dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "require": "./dist/umd/index.js",
+      "import": "./dist/esm/index.js",
+      "types": "./dist/types/index.d.ts"
+    }
+  },
+  "license": "Apache-2.0",
+  "scripts": {
+    "build": "lg build-package",
+    "tsc": "lg build-ts",
+    "docs": "lg build-tsdoc"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@leafygreen-ui/button": "workspace:^",
+    "@leafygreen-ui/descendants": "workspace:^",
+    "@leafygreen-ui/emotion": "workspace:^",
+    "@leafygreen-ui/icon": "workspace:^",
+    "@leafygreen-ui/lib": "workspace:^",
+    "@leafygreen-ui/palette": "workspace:^",
+    "@leafygreen-ui/tokens": "workspace:^",
+    "@leafygreen-ui/typography": "workspace:^"
+  },
+  "peerDependencies": {
+    "@leafygreen-ui/leafygreen-provider": "workspace:^"
+  },
+  "devDependencies": {
+    "@lg-tools/build": "workspace:^",
+    "@lg-tools/storybook-utils": "workspace:^"
+  },
+  "homepage": "https://github.com/10gen/leafygreen-ui/tree/main/packages/vertical-stepper",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/10gen/leafygreen-ui"
+  },
+  "bugs": {
+    "url": "https://jira.mongodb.org/projects/PD/summary"
+  }
+}

packages/vertical-stepper/src/StepIcon/StepIcon.styles.ts

@@ -0,0 +1,82 @@
+import { css } from '@leafygreen-ui/emotion';
+import { createUniqueClassName, Theme } from '@leafygreen-ui/lib';
+import { palette } from '@leafygreen-ui/palette';
+import { transitionDuration } from '@leafygreen-ui/tokens';
+
+import { State } from '../VerticalStep/VerticalStep.types';
+
+export const stepIconClassName = createUniqueClassName('step');
+
+const STEP_SIZE = 20;
+
+export const getStepWrapperStyles = (isCompleted: boolean) => css`
+  position: relative;
+
+  &::after {
+    background: ${isCompleted ? palette.green.dark1 : palette.gray.base};
+    position: absolute;
+    width: 1px;
+    height: calc(100% - ${STEP_SIZE}px);
+    left: 50%;
+    transition: background ${transitionDuration.default}ms ease;
+  }
+`;
+
+export const stepStyles = css`
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid;
+  transition: ${transitionDuration.default}ms ease;
+  width: ${STEP_SIZE}px;
+  height: ${STEP_SIZE}px;
+  position: relative;
+  font-size: 12px;
+  font-weight: 500;
+`;
+
+export const themedStateColor = {
+  [Theme.Dark]: {
+    [State.Future]: palette.gray.light1,
+    [State.Completed]: palette.black,
+    [State.Current]: palette.green.base,
+  },
+  [Theme.Light]: {
+    [State.Future]: palette.gray.dark1,
+    [State.Completed]: palette.white,
+    [State.Current]: palette.green.dark2,
+  },
+};
+
+export const themedStateBgColor = {
+  [Theme.Dark]: {
+    [State.Future]: 'rgba(255, 255, 255, 0)',
+    [State.Completed]: palette.green.base,
+    [State.Current]: 'rgba(255, 255, 255, 0)',
+  },
+  [Theme.Light]: {
+    [State.Future]: 'rgba(255, 255, 255, 0)',
+    [State.Completed]: palette.green.dark1,
+    [State.Current]: 'rgba(255, 255, 255, 0)',
+  },
+};
+
+export const themedStateBorderColor = {
+  [Theme.Dark]: {
+    [State.Future]: palette.gray.light1,
+    [State.Completed]: palette.green.base,
+    [State.Current]: palette.green.base,
+  },
+  [Theme.Light]: {
+    [State.Future]: palette.gray.base,
+    [State.Completed]: palette.green.dark1,
+    [State.Current]: palette.green.dark1,
+  },
+};
+
+export const getThemedStateStyles = (theme: Theme, state: State) => css`
+  color: ${themedStateColor[theme][state]};
+  background-color: ${themedStateBgColor[theme][state]};
+  border-color: ${themedStateBorderColor[theme][state]};
+`;

packages/vertical-stepper/src/StepIcon/StepIcon.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+
+import { cx } from '@leafygreen-ui/emotion';
+import CheckmarkIcon from '@leafygreen-ui/icon/dist/Checkmark';
+import { useDarkMode } from '@leafygreen-ui/leafygreen-provider';
+
+import {
+  getStepWrapperStyles,
+  getThemedStateStyles,
+  stepIconClassName,
+  stepStyles,
+} from './StepIcon.styles';
+import { StepIconProps } from './StepIcon.types';
+
+/**
+ *
+ * @internal
+ */
+export const StepIcon = ({ isCompleted, state, index }: StepIconProps) => {
+  const { theme } = useDarkMode();
+
+  return (
+    <div className={cx(stepIconClassName, getStepWrapperStyles(isCompleted))}>
+      <div className={cx(stepStyles, getThemedStateStyles(theme, state))}>
+        {isCompleted ? <CheckmarkIcon /> : index + 1}
+      </div>
+    </div>
+  );
+};
+
+StepIcon.displayName = 'StepIcon';

packages/vertical-stepper/src/StepIcon/StepIcon.types.ts

@@ -0,0 +1,11 @@
+import { InternalVerticalStepProps } from '../VerticalStep';
+
+export type StepIconProps = Pick<
+  InternalVerticalStepProps,
+  'index' | 'state'
+> & {
+  /**
+   * Whether the step is completed
+   */
+  isCompleted: boolean;
+};

packages/vertical-stepper/src/StepIcon/index.ts

@@ -0,0 +1,2 @@
+export { StepIcon } from './StepIcon';
+export { stepIconClassName } from './StepIcon.styles';