generated from bcgov/quickstart-openshift
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: progress bar UI improvements (#1436)
Co-authored-by: Derek Roberts <[email protected]> Co-authored-by: mgaseta <[email protected]>
- Loading branch information
3 people
authored
Jul 26, 2024
1 parent
dc6159c
commit 65e2473
Showing
5 changed files
with
274 additions
and
15 deletions.
There are no files selected for viewing
85 changes: 85 additions & 0 deletions
85
frontend/src/components/SeedlotRegistrationProgress/SparProgressIndicator.tsx
This file contains 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,85 @@ | ||
| import React, { useState } from 'react'; | ||
| import prefix from '../../styles/classPrefix'; | ||
| import { SparProgressStepProps } from './SparProgressStep'; | ||
|
|
||
| export interface SparProgressIndicatorProps | ||
| extends Omit<React.HTMLAttributes<HTMLUListElement>, 'onChange'> { | ||
| children?: React.ReactNode; | ||
| className?: string; | ||
| currentIndex?: number; | ||
| onChange?: (data: number) => void; | ||
| spaceEqually?: boolean; | ||
| vertical?: boolean; | ||
| } | ||
|
|
||
| /** | ||
| * Create a progress bar modified with custom icons. | ||
| * | ||
| * @param {SparProgressIndicatorProps} param0 Progress bar indicator parameters. | ||
| * @returns {JSX.Element} custom element | ||
| */ | ||
| function SparProgressIndicator({ | ||
| children, | ||
| className: customClassName, | ||
| currentIndex: controlledIndex = 0, | ||
| onChange, | ||
| spaceEqually, | ||
| vertical | ||
| }: SparProgressIndicatorProps): JSX.Element { | ||
| const [currentIndex, setCurrentIndex] = useState(controlledIndex); | ||
| const [prevControlledIndex, setPrevControlledIndex] = useState(controlledIndex); | ||
|
|
||
| const getClassName = (): string => { | ||
| let classNames = `${prefix}--progress `; | ||
| if (vertical) { | ||
| classNames += `${prefix}--progress--vertical `; | ||
| } | ||
| if (spaceEqually && !vertical) { | ||
| classNames += `${prefix}--progress--space-equal `; | ||
| } | ||
| if (customClassName) { | ||
| classNames += customClassName; | ||
| } | ||
| return classNames; | ||
| }; | ||
|
|
||
| if (controlledIndex !== prevControlledIndex) { | ||
| setCurrentIndex(controlledIndex); | ||
| setPrevControlledIndex(controlledIndex); | ||
| } | ||
|
|
||
| return ( | ||
| <ul className={getClassName()}> | ||
| {React.Children.map(children, (child, index) => { | ||
| if (!React.isValidElement<SparProgressStepProps>(child)) { | ||
| return null; | ||
| } | ||
|
|
||
| // only setup click handlers if onChange event is passed | ||
| const onClick = onChange ? () => onChange(index) : undefined; | ||
| if (index === currentIndex) { | ||
| return React.cloneElement(child, { | ||
| complete: child.props.complete, | ||
| current: child.props.complete, | ||
| onClick | ||
| }); | ||
| } | ||
| if (index < currentIndex) { | ||
| return React.cloneElement(child, { | ||
| complete: true, | ||
| onClick | ||
| }); | ||
| } | ||
| if (index > currentIndex) { | ||
| return React.cloneElement(child, { | ||
| complete: child.props.complete, | ||
| onClick | ||
| }); | ||
| } | ||
| return null; | ||
| })} | ||
| </ul> | ||
| ); | ||
| } | ||
|
|
||
| export { SparProgressIndicator }; |
113 changes: 113 additions & 0 deletions
113
frontend/src/components/SeedlotRegistrationProgress/SparProgressStep.tsx
This file contains 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,113 @@ | ||
| import React from 'react'; | ||
| import prefix from '../../styles/classPrefix'; | ||
| import { SparSVGIcon } from './SparSVGIcon'; | ||
|
|
||
| export interface SparProgressStepProps { | ||
| className?: string; | ||
| complete?: boolean; | ||
| current?: boolean; | ||
| description?: string; | ||
| disabled?: boolean; | ||
| invalid?: boolean; | ||
| label: string; | ||
| onClick?: ( | ||
| event: | ||
| | React.KeyboardEvent<HTMLButtonElement> | ||
| | React.MouseEvent<HTMLButtonElement> | ||
| ) => void; | ||
| secondaryLabel?: string; | ||
| } | ||
|
|
||
| /** | ||
| * Create a custom progress step. | ||
| * | ||
| * @param {SparProgressStepProps} props parameters of the component. | ||
| * @returns {JSX.Element} custom element | ||
| */ | ||
| const SparProgressStep = ({ | ||
| className, | ||
| complete, | ||
| current, | ||
| description, | ||
| disabled, | ||
| invalid, | ||
| label, | ||
| onClick, | ||
| secondaryLabel | ||
| }: SparProgressStepProps): JSX.Element => { | ||
| const getClassName = (): string => { | ||
| const classNames: Array<string> = [`${prefix}--progress-step`]; | ||
| classNames.push(current ? `${prefix}--progress-step--current` : ''); | ||
| classNames.push(complete ? `${prefix}--progress-step--complete` : ''); | ||
| classNames.push(!complete && !current ? `${prefix}--progress-step--incomplete` : ''); | ||
| classNames.push(disabled ? `${prefix}--progress-step--disabled` : ''); | ||
| if (className) { | ||
| classNames.push(className); | ||
| } | ||
| return classNames.join(' '); | ||
| }; | ||
|
|
||
| const getButtonClassName = (): string => { | ||
| const classNames: Array<string> = [`${prefix}--progress-step-button`]; | ||
| classNames.push(!onClick || current ? `${prefix}--progress-step-button--unclickable` : ''); | ||
| return classNames.join(' '); | ||
| }; | ||
|
|
||
| const handleKeyDown = (e: React.KeyboardEvent<HTMLButtonElement>) => { | ||
| if ((e.key === 'Enter' || e.key === 'Space') && onClick) { | ||
| onClick(e); | ||
| } | ||
| }; | ||
|
|
||
| let message = 'Incomplete'; | ||
|
|
||
| if (current) { | ||
| message = 'Current'; | ||
| } | ||
|
|
||
| if (complete) { | ||
| message = 'Complete'; | ||
| } | ||
|
|
||
| if (invalid) { | ||
| message = 'Invalid'; | ||
| } | ||
|
|
||
| return ( | ||
| <li className={getClassName()}> | ||
| <button | ||
| type="button" | ||
| className={getButtonClassName()} | ||
| disabled={disabled} | ||
| aria-disabled={disabled} | ||
| tabIndex={!current && onClick && !disabled ? 0 : -1} | ||
| onClick={!current ? onClick : undefined} | ||
| onKeyDown={handleKeyDown} | ||
| title={label} | ||
| > | ||
| <SparSVGIcon | ||
| complete={complete} | ||
| current={current} | ||
| description={description} | ||
| invalid={invalid} | ||
| svgPrefix={prefix} | ||
| /> | ||
| <div className={`${prefix}--progress-text`}> | ||
| <p className={`${prefix}--progress-label`}> | ||
| {label} | ||
| </p> | ||
|
|
||
| {secondaryLabel !== null && secondaryLabel !== undefined ? ( | ||
| <p className={`${prefix}--progress-optional`}> | ||
| {secondaryLabel} | ||
| </p> | ||
| ) : null} | ||
| </div> | ||
| <span className={`${prefix}--assistive-text`}>{message}</span> | ||
| <span className={`${prefix}--progress-line`} /> | ||
| </button> | ||
| </li> | ||
| ); | ||
| }; | ||
|
|
||
| export { SparProgressStep }; |
60 changes: 60 additions & 0 deletions
60
frontend/src/components/SeedlotRegistrationProgress/SparSVGIcon.tsx
This file contains 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,60 @@ | ||
| import React from 'react'; | ||
| import { | ||
| CheckmarkFilled, | ||
| Warning, | ||
| CircleDash, | ||
| Incomplete, | ||
| CircleFilled | ||
| } from '@carbon/icons-react'; | ||
|
|
||
| export interface SparSVGIconProps { | ||
| complete?: boolean; | ||
| current?: boolean; | ||
| description?: string; | ||
| invalid?: boolean; | ||
| svgPrefix: string; | ||
| } | ||
|
|
||
| const SparSVGIcon = ({ | ||
| complete, | ||
| current, | ||
| description, | ||
| invalid, | ||
| svgPrefix | ||
| }: SparSVGIconProps): JSX.Element => { | ||
| if (invalid) { | ||
| return ( | ||
| <Warning className={`${svgPrefix}--progress__warning`}> | ||
| <title>{description}</title> | ||
| </Warning> | ||
| ); | ||
| } | ||
| if (current && !complete) { | ||
| return ( | ||
| <Incomplete> | ||
| <title>{description}</title> | ||
| </Incomplete> | ||
| ); | ||
| } | ||
| if (current && complete) { | ||
| return ( | ||
| <CircleFilled> | ||
| <title>{description}</title> | ||
| </CircleFilled> | ||
| ); | ||
| } | ||
| if (complete && !current) { | ||
| return ( | ||
| <CheckmarkFilled> | ||
| <title>{description}</title> | ||
| </CheckmarkFilled> | ||
| ); | ||
| } | ||
| return ( | ||
| <CircleDash> | ||
| <title>{description}</title> | ||
| </CircleDash> | ||
| ); | ||
| }; | ||
|
|
||
| export { SparSVGIcon }; |
This file contains 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
This file contains 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