From ddff830b04320d4c67bc5aadbb0b9020a4715b5a Mon Sep 17 00:00:00 2001 From: Wesley Yee Date: Tue, 5 May 2020 15:27:35 -0400 Subject: [PATCH] Rewrite sequence component (#682) * Rework sequence component to be more declarative and simple * Renamed to SimpleStepper --- .../BasicStepper/BasicVerticalStep.tsx | 86 ++++++++++ .../components/Sequence/Sequence.stories.tsx | 81 --------- .../src/components/Sequence/Sequence.test.tsx | 107 ------------ .../core/src/components/Sequence/Sequence.tsx | 156 ------------------ .../SimpleStepper/SimpleStepper.stories.tsx | 81 +++++++++ .../SimpleStepper/SimpleStepper.test.tsx | 129 +++++++++++++++ .../SimpleStepper/SimpleStepper.tsx | 84 ++++++++++ .../SimpleStepperFooter.tsx} | 59 +++---- .../SimpleStepper/SimpleStepperStep.tsx | 86 ++++++++++ .../{Sequence => SimpleStepper}/index.ts | 6 +- packages/core/src/index.ts | 2 +- 11 files changed, 498 insertions(+), 379 deletions(-) create mode 100644 packages/core/src/components/BasicStepper/BasicVerticalStep.tsx delete mode 100644 packages/core/src/components/Sequence/Sequence.stories.tsx delete mode 100644 packages/core/src/components/Sequence/Sequence.test.tsx delete mode 100644 packages/core/src/components/Sequence/Sequence.tsx create mode 100644 packages/core/src/components/SimpleStepper/SimpleStepper.stories.tsx create mode 100644 packages/core/src/components/SimpleStepper/SimpleStepper.test.tsx create mode 100644 packages/core/src/components/SimpleStepper/SimpleStepper.tsx rename packages/core/src/components/{Sequence/SequenceFooter.tsx => SimpleStepper/SimpleStepperFooter.tsx} (73%) create mode 100644 packages/core/src/components/SimpleStepper/SimpleStepperStep.tsx rename packages/core/src/components/{Sequence => SimpleStepper}/index.ts (80%) diff --git a/packages/core/src/components/BasicStepper/BasicVerticalStep.tsx b/packages/core/src/components/BasicStepper/BasicVerticalStep.tsx new file mode 100644 index 0000000000..21fbb11cf2 --- /dev/null +++ b/packages/core/src/components/BasicStepper/BasicVerticalStep.tsx @@ -0,0 +1,86 @@ +/* + * Copyright 2020 Spotify AB + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +import React, { FC } from 'react'; +import { + Step as MuiStep, + StepContent, + StepLabel, + Typography, + makeStyles, +} from '@material-ui/core'; +import SimpleStepperFooter from './SimpleStepperFooter'; + +const useStyles = makeStyles((theme) => ({ + end: { + padding: theme.spacing(3), + }, +})); + +export type StepActions = { + showNext?: boolean; + canNext?: () => boolean; + onNext?: () => void; + nextStep?: (current: number, last: number) => number; + nextText?: string; + + showBack?: boolean; + backText?: string; + onBack?: () => void; + + showRestart?: boolean; + canRestart?: () => boolean; + onRestart?: () => void; + restartText?: string; +}; + +export type StepProps = { + title: string; + children: React.ReactElement; + end?: boolean; + actions?: StepActions; +}; + +const Step: FC = ({ + title, + children, + end, + actions, + ...muiProps +}) => { + const classes = useStyles(); + + // The end step is not a part of the stepper + // It simply is the final screen with an option to have buttons such as reset or back + return end ? ( +
+ {title} + {children} + +
+ ) : ( + + + {title} + + + {children} + + + + ); +}; + +export default Step; diff --git a/packages/core/src/components/Sequence/Sequence.stories.tsx b/packages/core/src/components/Sequence/Sequence.stories.tsx deleted file mode 100644 index f1fd817487..0000000000 --- a/packages/core/src/components/Sequence/Sequence.stories.tsx +++ /dev/null @@ -1,81 +0,0 @@ -/* - * Copyright 2020 Spotify AB - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import React, { useState } from 'react'; -import { TextField } from '@material-ui/core'; -import Sequence, { StepType } from '.'; - -export default { - title: 'Sequence', - component: Sequence, -}; - -const steps = [ - { - title: 'Step 1!', - content:
Slide 1 content
, - }, - { - title: 'Step 2!', - content:
Slide 2 content
, - }, - { - title: 'Step 3!', - content:
Slide 3 content
, - }, -]; - -export const Horizontal = () => ( - -); - -export const Vertical = () => ; - -export const ConditionalButtons = () => { - const [required, setRequired] = useState(false); - const customSteps: StepType[] = [...steps]; - - customSteps[0] = { - title: 'Step 1 with required field', - actions: { - canNext: () => required, - }, - content: ( -
- setRequired(!!e.target.value)} - /> -
- ), - }; - return ; -}; - -export const CompletionStep = () => { - const completed = { - title: 'Succcess!', - content:
You've completed the sequence
, - }; - return ( - - ); -}; diff --git a/packages/core/src/components/Sequence/Sequence.test.tsx b/packages/core/src/components/Sequence/Sequence.test.tsx deleted file mode 100644 index 591ea616c2..0000000000 --- a/packages/core/src/components/Sequence/Sequence.test.tsx +++ /dev/null @@ -1,107 +0,0 @@ -/* - * Copyright 2020 Spotify AB - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ -import React from 'react'; -import { render, fireEvent } from '@testing-library/react'; -import { wrapInTestApp } from '@backstage/test-utils'; -import Sequence, { StepType } from './Sequence'; - -describe('Sequence', () => { - let steps: StepType[]; - - beforeEach(() => { - steps = [ - { - title: 'Step 0', - content:
step0
, - }, - { - title: 'Step 1', - content:
step1
, - actions: { nextStep: () => 3 }, - }, - { - title: 'Step 2', - content:
step2
, - }, - { - title: 'Step 3', - content:
step3
, - }, - ]; - }); - - it('Handles nextStep property', () => { - const rendered = render( - wrapInTestApp(), - ); - fireEvent.click(rendered.getByText('Next')); - expect(rendered.getByText('step1')).toBeInTheDocument(); - - fireEvent.click(rendered.getByText('Next')); - expect(rendered.getByText('step3')).toBeInTheDocument(); - - fireEvent.click(rendered.getByText('Back')); - expect(rendered.getByText('step1')).toBeInTheDocument(); - }); - - it('Shows controls and content when going back to first step', () => { - const rendered = render( - wrapInTestApp(), - ); - fireEvent.click(rendered.getByText('Next')); - expect(rendered.getByText('step1')).toBeInTheDocument(); - - fireEvent.click(rendered.getByText('Next')); - expect(rendered.getByText('step3')).toBeInTheDocument(); - - fireEvent.click(rendered.getByText('Back')); - expect(rendered.getByText('step1')).toBeInTheDocument(); - expect(rendered.getByText('Next')).toBeInTheDocument(); - - fireEvent.click(rendered.getByText('Back')); - expect(rendered.getByText('step0')).toBeInTheDocument(); - expect(rendered.getByText('Next')).toBeInTheDocument(); - }); - - it('uses nextText if specified in all steps', () => { - const nextTextSteps = [ - { - title: 'Step 0', - actions: { - nextText: 'Step0Next', - }, - content:
step0
, - }, - { - title: 'Final Step', - actions: { - nextText: 'FinalStepNext', - }, - content:
final step
, - }, - ]; - - const rendered = render( - wrapInTestApp( - , - ), - ); - expect(rendered.getByText('Step0Next')).toBeInTheDocument(); - fireEvent.click(rendered.getByText('Step0Next')); - - expect(rendered.getByText('FinalStepNext')).toBeInTheDocument(); - }); -}); diff --git a/packages/core/src/components/Sequence/Sequence.tsx b/packages/core/src/components/Sequence/Sequence.tsx deleted file mode 100644 index 39fe0520fa..0000000000 --- a/packages/core/src/components/Sequence/Sequence.tsx +++ /dev/null @@ -1,156 +0,0 @@ -/* - * Copyright 2020 Spotify AB - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ -import React, { Fragment, FC, useState } from 'react'; -import { - Stepper, - Step, - StepContent, - StepLabel, - Typography, - makeStyles, -} from '@material-ui/core'; -import SequenceFooter from './SequenceFooter'; - -const useStyles = makeStyles((theme: any) => ({ - content: { - padding: theme.spacing(4, 4, 4, 4), - }, - completionBox: { - padding: theme.spacing(3), - }, -})); - -type Orientation = 'horizontal' | 'vertical'; - -export type StepActions = { - showNext?: boolean; - canNext?: () => boolean; - onNext?: () => void; - nextStep?: (current: number, last: number) => number; - nextText?: string; - - showBack?: boolean; - backText?: string; - onBack?: () => void; - - showRestart?: boolean; - canRestart?: () => boolean; - onRestart?: () => void; - restartText?: string; - - completedButton?: JSX.Element; -}; - -export type StepType = { - title: string; - actions?: StepActions; - content: JSX.Element; -}; - -export interface SequenceProps { - completed?: StepType; - elevated?: boolean; - orientation: Orientation; - onSequenceStepChange?: (prevIndex: number, nextIndex: number) => void; - steps: StepType[]; - footerProps?: any; -} - -const Sequence: FC = ({ - completed, - elevated, - orientation, - onSequenceStepChange, - steps, - footerProps, -}) => { - const classes = useStyles(); - const [stepIndex, setStepIndex] = useState(0); - const [stepArray, setStepArray] = useState([0]); - const isVertical = orientation === 'vertical'; - const isCompleted = !!completed && stepIndex === steps.length; - const horizontalStep = !isVertical && steps[stepIndex]?.content; - - return ( - - - {steps.map((step, i) => ( - - - {step.title} - - {isVertical && ( - - {step.content} - - - )} - - ))} - - {isCompleted && ( -
- {completed?.title} - {completed?.content} - - {completed?.actions?.completedButton} - -
- )} - {/* Horizontal steppers have buttons on the bottom of stepper */} - {!isVertical && ( - <> -
- {horizontalStep} - -
- - )} - - ); -}; - -export default Sequence; diff --git a/packages/core/src/components/SimpleStepper/SimpleStepper.stories.tsx b/packages/core/src/components/SimpleStepper/SimpleStepper.stories.tsx new file mode 100644 index 0000000000..81f558f49d --- /dev/null +++ b/packages/core/src/components/SimpleStepper/SimpleStepper.stories.tsx @@ -0,0 +1,81 @@ +/* + * Copyright 2020 Spotify AB + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import React, { useState } from 'react'; +import { TextField } from '@material-ui/core'; +import { SimpleStepper, SimpleStepperStep } from '.'; + +export default { + title: 'SimpleStepper', + component: SimpleStepper, +}; + +export const Default = () => ( + + +
This is the content for step 1
+ + +
This is the content for step 2
+ + +
This is the content for step 3
+ + +); + +export const ConditionalButtons = () => { + const [required, setRequired] = useState(false); + + return ( + + required, + }} + > + setRequired(!!e.target.value)} + /> + + +
This is the content for step 2
+ + +
This is the content for step 3
+ + + ); +}; + +export const CompletionStep = () => { + return ( + + +
This is the content for step 1
+ + +
This is the content for step 2
+ + +
You've completed the Stepper
+ + + ); +}; diff --git a/packages/core/src/components/SimpleStepper/SimpleStepper.test.tsx b/packages/core/src/components/SimpleStepper/SimpleStepper.test.tsx new file mode 100644 index 0000000000..f07ceca6ff --- /dev/null +++ b/packages/core/src/components/SimpleStepper/SimpleStepper.test.tsx @@ -0,0 +1,129 @@ +/* + * Copyright 2020 Spotify AB + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +import React from 'react'; +import { render, fireEvent, within } from '@testing-library/react'; +import { wrapInTestApp } from '@backstage/test-utils'; +import Stepper from './SimpleStepper'; +import Step from './SimpleStepperStep'; + +const getTextInSlide = (rendered: any, index: number) => + within(rendered.getByTestId(`step${index}`)).getByText; + +describe('Stepper', () => { + it('Handles nextStep property', async () => { + const rendered = render( + wrapInTestApp( + + +
step0
+ + 3 }} + data-testid="step1" + > +
step1
+ + +
step2
+ + +
step3
+ + , + ), + ); + + fireEvent.click(getTextInSlide(rendered, 0)('Next') as Node); + expect(rendered.getByText('step1')).toBeInTheDocument(); + + fireEvent.click(getTextInSlide(rendered, 1)('Next') as Node); + expect(rendered.getByText('step3')).toBeInTheDocument(); + + fireEvent.click(getTextInSlide(rendered, 3)('Back') as Node); + expect(rendered.getByText('step1')).toBeInTheDocument(); + }); + + it('Shows controls and content when going back to first step', () => { + const rendered = render( + wrapInTestApp( + + +
step0
+ + 3 }} + data-testid="step1" + > +
step1
+ + +
step2
+ + +
step3
+ + , + ), + ); + + fireEvent.click(getTextInSlide(rendered, 0)('Next') as Node); + expect(rendered.getByText('step1')).toBeInTheDocument(); + + fireEvent.click(getTextInSlide(rendered, 1)('Next') as Node); + expect(rendered.getByText('step3')).toBeInTheDocument(); + + fireEvent.click(getTextInSlide(rendered, 3)('Back') as Node); + expect(rendered.getByText('step1')).toBeInTheDocument(); + expect(getTextInSlide(rendered, 1)('Next')).toBeInTheDocument(); + + fireEvent.click(getTextInSlide(rendered, 1)('Back') as Node); + expect(rendered.getByText('step0')).toBeInTheDocument(); + expect(getTextInSlide(rendered, 0)('Next')).toBeInTheDocument(); + }); + + it('uses nextText if specified in all steps', () => { + const rendered = render( + wrapInTestApp( + + + +
step0
+ + +
final step
+ + + , + ), + ); + expect(rendered.getByText('Step0Next')).toBeInTheDocument(); + fireEvent.click(rendered.getByText('Step0Next')); + + expect(rendered.getByText('FinalStepNext')).toBeInTheDocument(); + }); +}); diff --git a/packages/core/src/components/SimpleStepper/SimpleStepper.tsx b/packages/core/src/components/SimpleStepper/SimpleStepper.tsx new file mode 100644 index 0000000000..a13ad6b5ee --- /dev/null +++ b/packages/core/src/components/SimpleStepper/SimpleStepper.tsx @@ -0,0 +1,84 @@ +/* + * Copyright 2020 Spotify AB + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +import React, { Children, isValidElement, FC, useState } from 'react'; +import { Stepper as MuiStepper } from '@material-ui/core'; + +type InternalState = { + stepperLength: number; + stepIndex: number; + setStepIndex: any; + stepHistory: number[]; + setStepHistory: any; + onStepChange?: (prevIndex: number, nextIndex: number) => void; +}; + +const noop = () => {}; +export const VerticalStepperContext = React.createContext({ + stepperLength: 0, + stepIndex: 0, + setStepIndex: noop, + stepHistory: [], + setStepHistory: noop, + onStepChange: noop, +}); + +export interface StepperProps { + elevated?: boolean; + onStepChange?: (prevIndex: number, nextIndex: number) => void; +} + +const Stepper: FC = ({ children, elevated, onStepChange }) => { + const [stepIndex, setStepIndex] = useState(0); + const [stepHistory, setStepHistory] = useState([]); + + const steps: React.ReactNode[] = []; + let endStep; + Children.forEach(children, (child) => { + if (isValidElement(child)) { + if (child.props.end) { + endStep = child; + } else { + steps.push(child); + } + } + }); + + return ( + <> + + + {steps} + + + {stepIndex >= Children.count(children) - 1 && endStep} + + ); +}; + +export default Stepper; diff --git a/packages/core/src/components/Sequence/SequenceFooter.tsx b/packages/core/src/components/SimpleStepper/SimpleStepperFooter.tsx similarity index 73% rename from packages/core/src/components/Sequence/SequenceFooter.tsx rename to packages/core/src/components/SimpleStepper/SimpleStepperFooter.tsx index 475be30b8e..b49a62148d 100644 --- a/packages/core/src/components/Sequence/SequenceFooter.tsx +++ b/packages/core/src/components/SimpleStepper/SimpleStepperFooter.tsx @@ -13,11 +13,12 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React, { FC, ReactNode } from 'react'; +import React, { useContext, FC, ReactNode } from 'react'; import { Button, makeStyles } from '@material-ui/core'; -import { StepActions } from './Sequence'; +import { StepActions } from './SimpleStepperStep'; +import { VerticalStepperContext } from './SimpleStepper'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ root: { marginTop: theme.spacing(3), '& button': { @@ -65,37 +66,31 @@ const BackBtn: FC<{ ); -export type SequenceFooterProps = { - stepIndex: number; - setStepIndex: React.Dispatch>; - stepArray: number[]; - setStepArray: React.Dispatch>; - length: number; - actions: StepActions; - onSequenceStepChange?: (old: number, updated: number) => void; +export type SimpleStepperFooterProps = { + actions?: StepActions; children?: ReactNode; - className: string; }; -const SequenceFooter: FC = ({ - stepIndex, - setStepIndex, - stepArray, - setStepArray, - length, - onSequenceStepChange, - actions, +const SimpleStepperFooter: FC = ({ + actions = {}, children, - className, }) => { const classes = useStyles(); + const { + stepperLength, + stepIndex, + setStepIndex, + stepHistory, + setStepHistory, + onStepChange, + } = useContext(VerticalStepperContext); const onChange = (newIndex: number, callback?: () => void) => { if (callback) { callback(); } - if (onSequenceStepChange) { - onSequenceStepChange(stepIndex, newIndex); + if (onStepChange) { + onStepChange(stepIndex, newIndex); } setStepIndex(newIndex); @@ -103,23 +98,23 @@ const SequenceFooter: FC = ({ const handleNext = () => { const newIndex = actions.nextStep - ? actions.nextStep(stepIndex, length - 1) + ? actions.nextStep(stepIndex, stepperLength - 1) : stepIndex + 1; onChange(newIndex, actions.onNext); - setStepArray([...stepArray, newIndex]); + setStepHistory([...stepHistory, newIndex]); }; const handleBack = () => { - stepArray.pop(); - onChange(stepArray[stepArray.length - 1], actions.onBack); - setStepArray([...stepArray]); + stepHistory.pop(); + onChange(stepHistory[stepHistory.length - 1], actions.onBack); + setStepHistory([...stepHistory]); }; const handleRestart = () => { onChange(0, actions.onRestart); - setStepArray([0]); + setStepHistory([0]); }; return ( -
+
{[undefined, true].includes(actions.showBack) && stepIndex !== 0 && ( = ({ text={actions.nextText} handleClick={handleNext} disabled={ - (!!length && stepIndex >= length) || + (!!stepperLength && stepIndex >= stepperLength) || (!!actions.canNext && !actions.canNext()) } stepIndex={stepIndex} @@ -151,4 +146,4 @@ const SequenceFooter: FC = ({ ); }; -export default SequenceFooter; +export default SimpleStepperFooter; diff --git a/packages/core/src/components/SimpleStepper/SimpleStepperStep.tsx b/packages/core/src/components/SimpleStepper/SimpleStepperStep.tsx new file mode 100644 index 0000000000..21fbb11cf2 --- /dev/null +++ b/packages/core/src/components/SimpleStepper/SimpleStepperStep.tsx @@ -0,0 +1,86 @@ +/* + * Copyright 2020 Spotify AB + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +import React, { FC } from 'react'; +import { + Step as MuiStep, + StepContent, + StepLabel, + Typography, + makeStyles, +} from '@material-ui/core'; +import SimpleStepperFooter from './SimpleStepperFooter'; + +const useStyles = makeStyles((theme) => ({ + end: { + padding: theme.spacing(3), + }, +})); + +export type StepActions = { + showNext?: boolean; + canNext?: () => boolean; + onNext?: () => void; + nextStep?: (current: number, last: number) => number; + nextText?: string; + + showBack?: boolean; + backText?: string; + onBack?: () => void; + + showRestart?: boolean; + canRestart?: () => boolean; + onRestart?: () => void; + restartText?: string; +}; + +export type StepProps = { + title: string; + children: React.ReactElement; + end?: boolean; + actions?: StepActions; +}; + +const Step: FC = ({ + title, + children, + end, + actions, + ...muiProps +}) => { + const classes = useStyles(); + + // The end step is not a part of the stepper + // It simply is the final screen with an option to have buttons such as reset or back + return end ? ( +
+ {title} + {children} + +
+ ) : ( + + + {title} + + + {children} + + + + ); +}; + +export default Step; diff --git a/packages/core/src/components/Sequence/index.ts b/packages/core/src/components/SimpleStepper/index.ts similarity index 80% rename from packages/core/src/components/Sequence/index.ts rename to packages/core/src/components/SimpleStepper/index.ts index fe5faa2d86..00eb92a382 100644 --- a/packages/core/src/components/Sequence/index.ts +++ b/packages/core/src/components/SimpleStepper/index.ts @@ -14,5 +14,7 @@ * limitations under the License. */ -export { default } from './Sequence'; -export type { StepType } from './Sequence'; +import SimpleStepper from './SimpleStepper'; +import SimpleStepperStep from './SimpleStepperStep'; + +export { SimpleStepper, SimpleStepperStep }; diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts index 6a43e624ce..8699034efc 100644 --- a/packages/core/src/index.ts +++ b/packages/core/src/index.ts @@ -32,7 +32,7 @@ export { default as CircleProgress } from './components/ProgressBars/CircleProgr export { default as HorizontalProgress } from './components/ProgressBars/HorizontalProgress'; export { default as CopyTextButton } from './components/CopyTextButton'; export { default as Progress } from './components/Progress'; -export { default as Sequence } from './components/Sequence'; +export * from './components/SimpleStepper'; export { AlphaLabel, BetaLabel } from './components/Lifecycle'; export { default as SupportButton } from './components/SupportButton'; export { default as SortableTable } from './components/SortableTable';