pdavies88
commented
2 years ago Segmented Progress Bar Analysis: JSX to TSX Conversion:
Events to be converted:
dispatchAnalyticsEvent
Should become: @Event({ eventName: 'component-library-analytics', composed: true, bubbles: true, }) componentLibraryAnalytics: EventEmitter;
Props to be converted:
- Current @Prop() current?: number;
- Total @Prop() total?: number;
- AriaLabel @Prop() ariaLabel?: string; (Dependent on Current and Total to create)
HTML Structure to be converted:
div to host element: https://stenciljs.com/docs/host-element
Notes: If attempting to move away from Lodash in the Web-Components can use a native alternative to range here
Range is being used to create the array of segments to be displayed for the steps in the progress bar based on the total that is set via props.
CSS Conversion:
The following CSS would need to ported to a localized file:
.progress-bar-segmented { display: flex; width: 100%; height: 6px; }
.progress-segment { content: " "; flex: 1; margin-left: 2px; margin-right: 2px; background-color: $color-gray-lighter; &-complete { background-color: $color-primary; } &:first-child { margin-left: 0; } &:last-child { margin-right: 0; } }
CSS should be styled via the Shadow DOM which will be used in conjunction With the Host Element: https://stenciljs.com/docs/styling
Unit Test Conversion:
Current Test Suite:
component-library/packages/react-components/src/components/SegmentedProgressBar/SegmentedProgressBar.unit.spec.jsx
Suggested Tests to Implement in new Suite:
- Does the html render
- Does it pass the axe check
- Does it fire an analytics event on change
- Does it replace the aria label when an ariaLabel prop is passed
Issue Description
We currently have
<SegmentedProgressBar>which is used in two files:However, since it is used in the forms system to indicate which chapter a user is on, it is used in every form application, which is most of
vets-website.We should develop a Web Component replacement for this component.
Styles
https://github.com/department-of-veterans-affairs/veteran-facing-services-tools/blob/8ce0431d342a5be24170d9329e19257eb6e678db/packages/formation/sass/modules/_m-progress-bar.scss#L1
Acceptance Criteria
<va-segmented-progress-bar>is written