[UXE-33] feat(Template) Creates DeleteWizard template package
#3291
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,64 @@ | ||
| --- | ||
| '@leafygreen-ui/delete-wizard': minor | ||
| --- | ||
|
|
||
| Initial release of `DeleteWizard`. | ||
|
|
||
| ```tsx | ||
| <DeleteWizard | ||
| onStepChange={...} | ||
| onCancel={...} | ||
| onDelete={...} | ||
| > | ||
| <DeleteWizard.Header | ||
| pageTitle="Demo Delete Wizard" | ||
| /> | ||
| <DeleteWizard.Step requiresAcknowledgement> | ||
| <DeleteWizard.StepContent> | ||
| <div>Step 1 contents</div> | ||
| </DeleteWizard.StepContent> | ||
| <DeleteWizard.Footer | ||
| backButtonText="Go back" | ||
| cancelButtonText="Cancel flow" | ||
| primaryButtonText='Continue to next step' | ||
| /> | ||
| </DeleteWizard.Step> | ||
|
|
||
| <DeleteWizard.Step requiresAcknowledgement> | ||
| <DeleteWizard.StepContent> | ||
| <div>Step 2 contents</div> | ||
| </DeleteWizard.StepContent> | ||
| <DeleteWizard.Footer | ||
| backButtonText="Go back" | ||
| cancelButtonText="Cancel flow" | ||
| primaryButtonText='Delete my thing' | ||
| /> | ||
| </DeleteWizard.Step> | ||
| </DeleteWizard> | ||
| ``` | ||
|
|
||
| ### DeleteWizard | ||
| Establishes a context, and only renders the `activeStep` (managed internally, or provided with the `activeStep` prop). Accepts a `DeleteWizard.Header` and any number of `DeleteWizard.Step`s as children. | ||
|
|
||
| `DeleteWizard` and all sub-components include template styling. | ||
|
|
||
| ### DeleteWizard.Header | ||
| A convenience wrapper around `CanvasHeader` | ||
|
|
||
| ### DeleteWizard.Step | ||
| A convenience wrapper around `Wizard.Step` to ensure the correct context. | ||
| Like the basic `Wizard.Step`, if `requiresAcknowledgement` is true, the step must have `isAcknowledged` set in context, (or passed in as a controlled prop) for the Footer's primary button to be enabled. (see the Wizard and DeleteWizard demos in Storybook) | ||
|
|
||
|
|
||
| ### DeleteWizard.StepContent | ||
| A styled `div` for use inside a `DeleteWizard.Step` to ensure proper page scrolling and footer positioning | ||
|
|
||
| ### DeleteWizard.Footer | ||
| A wrapper around `Wizard.Footer` with embedded styles and convenience props for the DeleteWizard template. | ||
| `DeleteWizard.Footer` accepts optional `backButtonText`, `cancelButtonText` and `primaryButtonText` props for simpler wizard creation. | ||
| The primary button variant is defined based on the `activeStep`— `"danger"` for the final steps, and `"primary"` for all preceding steps. | ||
| Also defines the `leftGlyph` to <TrashIcon /> for the final step. | ||
|
|
||
| You can override this behavior by providing the button props object (see FormFooter). | ||
|
|
||
| Use the top level `onDelete`, `onCancel` and `onStepChange` callbacks to handle footer button clicks. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| --- | ||
| '@leafygreen-ui/wizard': patch | ||
| --- | ||
|
|
||
| Exports `WizardStepContext` & `WizardStepContextData` types |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change | ||||
|---|---|---|---|---|---|---|
| @@ -0,0 +1,76 @@ | ||||||
| # Delete Wizard | ||||||
|
|
||||||
|  | ||||||
|
|
||||||
| #### [View on MongoDB.design](https://www.mongodb.design/component/delete-wizard/live-example/) | ||||||
|
|
||||||
| ## Installation | ||||||
|
|
||||||
| ### PNPM | ||||||
|
|
||||||
| ```shell | ||||||
| pnpm add @leafygreen-ui/delete-wizard | ||||||
| ``` | ||||||
|
|
||||||
| ### Yarn | ||||||
|
|
||||||
| ```shell | ||||||
| yarn add @leafygreen-ui/delete-wizard | ||||||
| ``` | ||||||
|
|
||||||
| ### NPM | ||||||
|
|
||||||
| ```shell | ||||||
| npm install @leafygreen-ui/delete-wizard | ||||||
| ``` | ||||||
|
|
||||||
| ```tsx | ||||||
| <DeleteWizard> | ||||||
| <DeleteWizard.Header | ||||||
| pageTitle="Demo Delete Wizard" | ||||||
| /> | ||||||
| <DeleteWizard.Step requiresAcknowledgement> | ||||||
| <DeleteWizard.StepContent> | ||||||
| <div>Step 1 contents<div> | ||||||
|
There was a problem hiding this comment. Unclosed div tag. The closing tag should be
Collaborator
Author
There was a problem hiding this comment. 👍 (just a README, but someone could copy it so I'll fix)
Suggested change
|
||||||
| </DeleteWizard.StepContent> | ||||||
| <DeleteWizard.Footer | ||||||
| primaryButtonProps={{ | ||||||
| children: 'Continue to next step', | ||||||
| }} | ||||||
| /> | ||||||
| </DeleteWizard.Step> | ||||||
|
|
||||||
| <DeleteWizard.Step requiresAcknowledgement> | ||||||
| <DeleteWizard.StepContent> | ||||||
| <div>Step 2 contents</div> | ||||||
| </DeleteWizard.StepContent> | ||||||
| <DeleteWizard.Footer | ||||||
| primaryButtonProps={{ | ||||||
| leftGlyph: <TrashIcon />, | ||||||
| variant: 'danger', | ||||||
| children: 'Delete my thing', | ||||||
| onClick: handleDelete, | ||||||
| }} | ||||||
| /> | ||||||
| </DeleteWizard.Step> | ||||||
| </DeleteWizard> | ||||||
| ``` | ||||||
|
|
||||||
| ### DeleteWizard | ||||||
|
|
||||||
| Establishes a context, and only renders the `activeStep` (managed internally, or provided with the `activeStep` prop). Accepts a `DeleteWizard.Header` and any number of `DeleteWizard.Step`s as children. | ||||||
|
|
||||||
| `DeleteWizard` and all sub-components include template styling. | ||||||
|
|
||||||
| ### DeleteWizard.Header | ||||||
|
|
||||||
| A convenience wrapper around `CanvasHeader` | ||||||
|
|
||||||
| ### DeleteWizard.Step | ||||||
|
|
||||||
| A convenience wrapper around `Wizard.Step` to ensure the correct context. | ||||||
| Like the basic `Wizard.Step`, if `requiresAcknowledgement` is true, the step must have `isAcknowledged` set in context, (or passed in as a controlled prop) for the Footer's primary button to be enabled. (see the Wizard and DeleteWizard demos in Storybook) | ||||||
|
|
||||||
| ### DeleteWizard.Footer | ||||||
|
|
||||||
| A wrapper around Wizard.Footer with embedded styles for the DeleteWizard template | ||||||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,52 @@ | ||
| { | ||
| "name": "@leafygreen-ui/delete-wizard", | ||
| "version": "0.0.1", | ||
| "description": "LeafyGreen UI Kit Delete Wizard", | ||
| "main": "./dist/umd/index.js", | ||
| "module": "./dist/esm/index.js", | ||
| "types": "./dist/types/index.d.ts", | ||
| "license": "Apache-2.0", | ||
| "exports": { | ||
| ".": { | ||
| "require": "./dist/umd/index.js", | ||
| "import": "./dist/esm/index.js", | ||
| "types": "./dist/types/index.d.ts" | ||
| }, | ||
| "./testing": { | ||
| "require": "./dist/umd/testing/index.js", | ||
| "import": "./dist/esm/testing/index.js", | ||
| "types": "./dist/types/testing/index.d.ts" | ||
| } | ||
| }, | ||
| "scripts": { | ||
| "build": "lg-build bundle", | ||
| "tsc": "lg-build tsc", | ||
| "docs": "lg-build docs" | ||
| }, | ||
| "publishConfig": { | ||
| "access": "public" | ||
| }, | ||
| "dependencies": { | ||
| "@leafygreen-ui/canvas-header": "workspace:^", | ||
| "@leafygreen-ui/compound-component": "workspace:^", | ||
| "@leafygreen-ui/emotion": "workspace:^", | ||
| "@leafygreen-ui/form-footer": "workspace:^", | ||
| "@leafygreen-ui/icon": "workspace:^", | ||
| "@leafygreen-ui/lib": "workspace:^", | ||
| "@leafygreen-ui/tokens": "workspace:^", | ||
| "@leafygreen-ui/wizard": "workspace:^", | ||
| "@lg-tools/test-harnesses": "workspace:^" | ||
| }, | ||
| "homepage": "https://github.com/mongodb/leafygreen-ui/tree/main/packages/delete-wizard", | ||
| "repository": { | ||
| "type": "git", | ||
| "url": "https://github.com/mongodb/leafygreen-ui" | ||
| }, | ||
| "bugs": { | ||
| "url": "https://jira.mongodb.org/projects/LG/summary" | ||
| }, | ||
| "devDependencies": { | ||
| "@faker-js/faker": "^10.1.0", | ||
| "@leafygreen-ui/typography": "workspace:^" | ||
| } | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,144 @@ | ||
| /* eslint-disable no-console */ | ||
| import React from 'react'; | ||
| import { faker } from '@faker-js/faker'; | ||
| import { StoryObj } from '@storybook/react'; | ||
| import { userEvent, within } from '@storybook/test'; | ||
|
|
||
| import { css } from '@leafygreen-ui/emotion'; | ||
| import BeakerIcon from '@leafygreen-ui/icon/Beaker'; | ||
| import { BackLink, Body } from '@leafygreen-ui/typography'; | ||
|
|
||
| import { ExampleStepContent } from './testUtils/ExampleStepContent'; | ||
| import { DeleteWizard } from '.'; | ||
|
|
||
| faker.seed(0); | ||
| const demoResourceName = faker.database.mongodbObjectId(); | ||
| const demoSteps = [ | ||
| { | ||
| description: faker.lorem.paragraph(), | ||
| content: faker.lorem.paragraphs(24), | ||
| }, | ||
| { | ||
| description: faker.lorem.paragraph(), | ||
| content: faker.lorem.paragraphs(24), | ||
| }, | ||
| ]; | ||
|
|
||
| export default { | ||
| title: 'Templates/DeleteWizard', | ||
| component: DeleteWizard, | ||
| }; | ||
|
|
||
| export const LiveExample: StoryObj<typeof DeleteWizard> = { | ||
| parameters: { | ||
| controls: { | ||
| exclude: ['children', 'onStepChange'], | ||
| }, | ||
| chromatic: { | ||
| disableSnapshot: true, | ||
| }, | ||
| }, | ||
| args: { | ||
| activeStep: undefined, | ||
| }, | ||
| render: args => { | ||
| const handleCancel = () => { | ||
| console.log('[STORYBOOK]: Cancelling wizard. Reloading iFrame'); | ||
| window.location.reload(); | ||
| }; | ||
|
|
||
| const handleDelete = () => { | ||
| alert('[STORYBOOK]: Deleting thing!'); | ||
| console.log('[STORYBOOK]: Deleting thing! Reloading iFrame'); | ||
| window.location.reload(); | ||
| }; | ||
|
|
||
| const handleStepChange = step => { | ||
| console.log('[STORYBOOK] step changed to ', step); | ||
| }; | ||
|
|
||
| return ( | ||
| <div | ||
| className={css` | ||
| margin: -100px; | ||
| `} | ||
| > | ||
| <DeleteWizard | ||
| activeStep={args.activeStep} | ||
| onStepChange={handleStepChange} | ||
| onCancel={handleCancel} | ||
| onDelete={handleDelete} | ||
| className={css` | ||
| height: 100vh; | ||
| width: 100vw; | ||
| `} | ||
| > | ||
| <DeleteWizard.Header | ||
| pageTitle="Demo Delete Wizard" | ||
| resourceName={demoResourceName} | ||
| resourceIcon={<BeakerIcon />} | ||
| backLink={<BackLink href="#">Back</BackLink>} | ||
| className={css` | ||
| margin-inline: 72px; | ||
| `} | ||
| /> | ||
| <DeleteWizard.Step> | ||
| <ExampleStepContent | ||
| index={0} | ||
| description={demoSteps[0].description} | ||
| content={demoSteps[0].content.split('\n').map((p, i) => ( | ||
| <Body key={i}>{p}</Body> | ||
| ))} | ||
| /> | ||
| <DeleteWizard.Footer | ||
| cancelButtonText="Cancel wizard" | ||
| primaryButtonText="Continue to next step" | ||
| /> | ||
| </DeleteWizard.Step> | ||
|
|
||
| <DeleteWizard.Step requiresAcknowledgement> | ||
| <ExampleStepContent | ||
| index={1} | ||
| description={demoSteps[1].description} | ||
| content={demoSteps[1].content.split('\n').map((p, i) => ( | ||
| <Body key={i}>{p}</Body> | ||
| ))} | ||
| /> | ||
| <DeleteWizard.Footer | ||
| backButtonText="Go back" | ||
| cancelButtonText="Cancel wizard" | ||
| primaryButtonText="Delete the thing" | ||
| /> | ||
| </DeleteWizard.Step> | ||
| </DeleteWizard> | ||
| </div> | ||
| ); | ||
| }, | ||
| }; | ||
|
|
||
| export const Step1: StoryObj<typeof DeleteWizard> = { | ||
| args: { | ||
| activeStep: 0, | ||
| }, | ||
| render: LiveExample.render, | ||
| }; | ||
|
|
||
| export const Step2Default: StoryObj<typeof DeleteWizard> = { | ||
| args: { | ||
| activeStep: 1, | ||
| }, | ||
| render: LiveExample.render, | ||
| }; | ||
|
|
||
| export const Step2Acknowledged: StoryObj<typeof DeleteWizard> = { | ||
| args: { | ||
| activeStep: 1, | ||
| }, | ||
| play: ({ canvasElement }) => { | ||
| const checkbox = within(canvasElement).getByTestId( | ||
| 'acknowledgement-checkbox', | ||
| ); | ||
| userEvent.click(checkbox); | ||
| }, | ||
| render: LiveExample.render, | ||
| }; |
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I forgot where we landed on changeset voice. Did we want this much information in the changeset?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
In an initial changeset, I think this is appropriate