Skip to content

Commit 34aaa80

Browse files
TheSonOfThompTheSonOfThomp
committed
Merge branch 'main' into at/LG-5563-wizard-core
2 parents e7e3ccb + 7b87c56 commit 34aaa80

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

55 files changed

+2271
-464
lines changed

‎.changeset/eslint-plugin.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@lg-tools/eslint-plugin': minor
3+
---
4+
5+
First pre-release of `eslint-plugin`

‎.changeset/install-add-eslint.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@lg-tools/install': minor
3+
---
4+
5+
Adds 'eslint-plugin' to ALL_PACKAGES

‎.changeset/test-structured-clone-polyfill.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@lg-tools/test': minor
3+
---
4+
5+
Adds `structuredClone` polyfill for testing eslint plugins

‎.github/workflows/pr.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -160,7 +160,7 @@ jobs:
160160
- name: Publish to Chromatic
161161
env:
162162
NODE_OPTIONS: '--max_old_space_size=16384'
163-
uses: chromaui/action@v1
163+
uses: chromaui/action@v11.29.0
164164
with:
165165
projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
166166
buildScriptName: 'build-storybook'

‎README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -141,6 +141,7 @@ import Button from '@leafygreen-ui/button';
141141
| [@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) |
142142
| [@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) |
143143
| [@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) |
144+
| [@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) |
144145
| [@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) |
145146
| [@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) |
146147
| [@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‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
# @leafygreen-ui/vertical-stepper
2+
3+
## 3.0.0
4+
5+
### Major Changes
6+
7+
- **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`.
8+
9+
### Major Changes
10+
11+
- c9203f7: Removes `prop-types`. Updates LG core packages to latest
12+
13+
## 2.1.1
14+
15+
### Patch Changes
16+
17+
- 066c4ce: [LG-4670](https://jira.mongodb.org/browse/LG-4670): vertically stack buttons in `VerticalStepActions` on smaller breakpoints
18+
19+
## 2.1.0
20+
21+
### Minor Changes
22+
23+
- dcab77e: [LG-4413](https://jira.mongodb.org/browse/LG-4413): VerticalStepper steps always render description and media regardless of current step
24+
25+
## 2.0.0
26+
27+
### Major Changes
28+
29+
- a3f1aa9: Replaces `primaryButtonProps` and `secondaryButtonProps` with `actions` prop to enable more flexibility for CTAs in each step
30+
31+
## 1.1.0
32+
33+
### Minor Changes
34+
35+
- f78419b: [LG-4395](https://jira.mongodb.org/browse/LG-4395): Fixes buttons sizes from default to small
36+
37+
### Patch Changes
38+
39+
- 8f076fb: Fixes naming of lg private packages from `@leafygreen-ui/*` to `@lg-private/*`
40+
41+
## 1.0.0
42+
43+
### Major Changes
44+
45+
- d50a214: First major release of `VerticalStepper`. [LG-4333](https://jira.mongodb.org/browse/LG-4333)

‎packages/vertical-stepper/README.md‎

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
# Vertical Stepper
2+
3+
![npm (scoped)](https://img.shields.io/npm/v/@leafygreen-ui/vertical-stepper.svg)
4+
5+
#### [View on MongoDB.design](https://www.mongodb.design/component/vertical-stepper/example/)
6+
7+
## Installation
8+
9+
### Yarn
10+
11+
```shell
12+
yarn add @leafygreen-ui/vertical-stepper
13+
```
14+
15+
### NPM
16+
17+
```shell
18+
npm install @leafygreen-ui/vertical-stepper
19+
```
20+
21+
## Example
22+
23+
```js
24+
import Button, { Size, Variant } from `@leafygreen-ui/button`;
25+
import { VerticalStepper, VerticalStep } from `@leafygreen-ui/vertical-stepper`;
26+
27+
const [currentStep, setCurrentStep] = useState(0);
28+
29+
<VerticalStepper currentStep={currentStep}>
30+
<VerticalStep
31+
title="first step"
32+
description={
33+
<>
34+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam
35+
efficitur nunc mattis magna pretium, id mattis metus vestibulum. Integer
36+
cursus ex ante, ut molestie lorem vestibulum id.{' '}
37+
<Link href="https://www.mongodb.design/">Im a link</Link>
38+
</>
39+
}
40+
actions={
41+
<Button
42+
onClick={() => setCurrentStep(step => step + 1)}
43+
size={Size.Small}
44+
>
45+
primary button
46+
</Button>
47+
}
48+
/>
49+
<VerticalStep
50+
title="second step"
51+
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."
52+
actions={
53+
<>
54+
<Button
55+
onClick={() => setCurrentStep(step => step - 1)}
56+
size={Size.Small}
57+
>
58+
secondary button
59+
</Button>
60+
<Button
61+
onClick={() => setCurrentStep(step => step + 1)}
62+
size={Size.Small}
63+
variant={Variant.Primary}
64+
>
65+
primary button
66+
</Button>
67+
</>
68+
}
69+
media={<img alt="test" src="https://placehold.co/170x85" />}
70+
/>
71+
<VerticalStep
72+
title="third step"
73+
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."
74+
actions={
75+
<>
76+
<Button
77+
onClick={() => setCurrentStep(step => step - 1)}
78+
size={Size.Small}
79+
>
80+
secondary button
81+
</Button>
82+
<Button
83+
onClick={() => setCurrentStep(step => step + 1)}
84+
size={Size.Small}
85+
variant={Variant.Primary}
86+
>
87+
primary button
88+
</Button>
89+
</>
90+
}
91+
media={<img alt="test" src="https://placehold.co/170x100" />}
92+
/>
93+
</VerticalStepper>;
94+
```
95+
96+
## Properties
97+
98+
### `<VerticalStepper />`
99+
100+
| Prop | Type | Description | Default |
101+
| ----------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- |
102+
| darkMode | `boolean` | Determines if the component renders in dark mode | `false` |
103+
| 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` |
104+
| children | `string` | Two or more `<VerticalStep/>` components | |
105+
106+
### `<VerticalStep />`
107+
108+
| Prop | Type | Description | Default |
109+
| ----------- | ----------------- | --------------------------------------------------------------- | ------- |
110+
| title | `string` | The title of the step. | |
111+
| description | `React.ReactNode` | The description of the step. This will render below the title. | |
112+
| media | `React.ReactNode` | The image to the right of the text. E.g. `<img />` or `<svg />` | |
113+
| actions | `React.ReactNode` | Optional buttons that will render below the text. | |

‎packages/vertical-stepper/package.json‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
{
2+
"name": "@leafygreen-ui/vertical-stepper",
3+
"version": "3.0.0",
4+
"description": "LeafyGreen UI Kit Vertical Stepper",
5+
"main": "./dist/umd/index.js",
6+
"module": "./dist/esm/index.js",
7+
"types": "./dist/types/index.d.ts",
8+
"exports": {
9+
".": {
10+
"require": "./dist/umd/index.js",
11+
"import": "./dist/esm/index.js",
12+
"types": "./dist/types/index.d.ts"
13+
}
14+
},
15+
"license": "Apache-2.0",
16+
"scripts": {
17+
"build": "lg build-package",
18+
"tsc": "lg build-ts",
19+
"docs": "lg build-tsdoc"
20+
},
21+
"publishConfig": {
22+
"access": "public"
23+
},
24+
"dependencies": {
25+
"@leafygreen-ui/button": "workspace:^",
26+
"@leafygreen-ui/descendants": "workspace:^",
27+
"@leafygreen-ui/emotion": "workspace:^",
28+
"@leafygreen-ui/icon": "workspace:^",
29+
"@leafygreen-ui/lib": "workspace:^",
30+
"@leafygreen-ui/palette": "workspace:^",
31+
"@leafygreen-ui/tokens": "workspace:^",
32+
"@leafygreen-ui/typography": "workspace:^"
33+
},
34+
"peerDependencies": {
35+
"@leafygreen-ui/leafygreen-provider": "workspace:^"
36+
},
37+
"devDependencies": {
38+
"@lg-tools/build": "workspace:^",
39+
"@lg-tools/storybook-utils": "workspace:^"
40+
},
41+
"homepage": "https://github.com/10gen/leafygreen-ui/tree/main/packages/vertical-stepper",
42+
"repository": {
43+
"type": "git",
44+
"url": "https://github.com/10gen/leafygreen-ui"
45+
},
46+
"bugs": {
47+
"url": "https://jira.mongodb.org/projects/PD/summary"
48+
}
49+
}

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

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
import { css } from '@leafygreen-ui/emotion';
2+
import { createUniqueClassName, Theme } from '@leafygreen-ui/lib';
3+
import { palette } from '@leafygreen-ui/palette';
4+
import { transitionDuration } from '@leafygreen-ui/tokens';
5+
6+
import { State } from '../VerticalStep/VerticalStep.types';
7+
8+
export const stepIconClassName = createUniqueClassName('step');
9+
10+
const STEP_SIZE = 20;
11+
12+
export const getStepWrapperStyles = (isCompleted: boolean) => css`
13+
position: relative;
14+
15+
&::after {
16+
background: ${isCompleted ? palette.green.dark1 : palette.gray.base};
17+
position: absolute;
18+
width: 1px;
19+
height: calc(100% - ${STEP_SIZE}px);
20+
left: 50%;
21+
transition: background ${transitionDuration.default}ms ease;
22+
}
23+
`;
24+
25+
export const stepStyles = css`
26+
border-radius: 50%;
27+
display: flex;
28+
align-items: center;
29+
justify-content: center;
30+
border: 1px solid;
31+
transition: ${transitionDuration.default}ms ease;
32+
width: ${STEP_SIZE}px;
33+
height: ${STEP_SIZE}px;
34+
position: relative;
35+
font-size: 12px;
36+
font-weight: 500;
37+
`;
38+
39+
export const themedStateColor = {
40+
[Theme.Dark]: {
41+
[State.Future]: palette.gray.light1,
42+
[State.Completed]: palette.black,
43+
[State.Current]: palette.green.base,
44+
},
45+
[Theme.Light]: {
46+
[State.Future]: palette.gray.dark1,
47+
[State.Completed]: palette.white,
48+
[State.Current]: palette.green.dark2,
49+
},
50+
};
51+
52+
export const themedStateBgColor = {
53+
[Theme.Dark]: {
54+
[State.Future]: 'rgba(255, 255, 255, 0)',
55+
[State.Completed]: palette.green.base,
56+
[State.Current]: 'rgba(255, 255, 255, 0)',
57+
},
58+
[Theme.Light]: {
59+
[State.Future]: 'rgba(255, 255, 255, 0)',
60+
[State.Completed]: palette.green.dark1,
61+
[State.Current]: 'rgba(255, 255, 255, 0)',
62+
},
63+
};
64+
65+
export const themedStateBorderColor = {
66+
[Theme.Dark]: {
67+
[State.Future]: palette.gray.light1,
68+
[State.Completed]: palette.green.base,
69+
[State.Current]: palette.green.base,
70+
},
71+
[Theme.Light]: {
72+
[State.Future]: palette.gray.base,
73+
[State.Completed]: palette.green.dark1,
74+
[State.Current]: palette.green.dark1,
75+
},
76+
};
77+
78+
export const getThemedStateStyles = (theme: Theme, state: State) => css`
79+
color: ${themedStateColor[theme][state]};
80+
background-color: ${themedStateBgColor[theme][state]};
81+
border-color: ${themedStateBorderColor[theme][state]};
82+
`;

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

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import React from 'react';
2+
3+
import { cx } from '@leafygreen-ui/emotion';
4+
import CheckmarkIcon from '@leafygreen-ui/icon/dist/Checkmark';
5+
import { useDarkMode } from '@leafygreen-ui/leafygreen-provider';
6+
7+
import {
8+
getStepWrapperStyles,
9+
getThemedStateStyles,
10+
stepIconClassName,
11+
stepStyles,
12+
} from './StepIcon.styles';
13+
import { StepIconProps } from './StepIcon.types';
14+
15+
/**
16+
*
17+
* @internal
18+
*/
19+
export const StepIcon = ({ isCompleted, state, index }: StepIconProps) => {
20+
const { theme } = useDarkMode();
21+
22+
return (
23+
<div className={cx(stepIconClassName, getStepWrapperStyles(isCompleted))}>
24+
<div className={cx(stepStyles, getThemedStateStyles(theme, state))}>
25+
{isCompleted ? <CheckmarkIcon /> : index + 1}
26+
</div>
27+
</div>
28+
);
29+
};
30+
31+
StepIcon.displayName = 'StepIcon';

0 commit comments

Comments
 (0)