Skip to content

Commit

Permalink
feat(core-step-tracker): make full width, add bg colour options
Browse files Browse the repository at this point in the history
  • Loading branch information
@marcod1419
marcod1419 committed Dec 10, 2018
1 parent ac8bde4 commit e15eaef
Show file tree
Hide file tree
Showing 7 changed files with 157 additions and 100 deletions.
Binary file modified e2e/output/components/StepTracker/baseline/chrome_headless.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
5 changes: 2 additions & 3 deletions packages/StepTracker/Step/Step.jsx
View file
Expand Up @@ -3,7 +3,6 @@ import PropTypes from 'prop-types'

import Icon from '@tds/core-decorative-icon'
import Text from '@tds/core-text'
import Flexbox from '../../../shared/components/Flexbox/Flexbox'

import styles from '../StepTracker.modules.scss'

Expand All @@ -26,11 +25,11 @@ const Step = ({ label, status, stepNumber, stepIndex }) => {
<span className={isStepActive() ? styles.iconActive : styles.icon}>
{status > stepIndex ? <Icon symbol="checkmark" size={16} variant="inverted" /> : <br />}
</span>
<Flexbox direction="row" justifyContent="center" dangerouslyAddClassName={styles.label}>
<div className={styles.label}>
<Text bold={status === stepIndex}>
{stepNumber}. {label}
</Text>
</Flexbox>
</div>
</div>
)
}
Expand Down
63 changes: 41 additions & 22 deletions packages/StepTracker/StepTracker.jsx
View file
Expand Up @@ -2,7 +2,7 @@ import React from 'react'
import PropTypes from 'prop-types'

import Text from '@tds/core-text'
import Flexbox from '../../shared/components/Flexbox/Flexbox'
import FlexGrid from '@tds/core-flex-grid'

import safeRest from '../../shared/utils/safeRest'

Expand Down Expand Up @@ -30,30 +30,44 @@ const getStepLabel = (current, steps) => {
* @version ./package.json
*/

const StepTracker = ({ current, steps, mobileStepLabelTemplate, ...rest }) => {
const StepTracker = ({ current, steps, mobileStepLabelTemplate, backgroundColour, ...rest }) => {
const stepText = parseStepText(current, steps, mobileStepLabelTemplate)
const stepLabel = getStepLabel(current, steps)
return (
<div {...safeRest(rest)} data-testid="stepTrackerContainer">
<Flexbox direction="row">
{steps.map((label, index) => {
return (
<Step
status={current}
label={label}
stepNumber={index + 1}
stepIndex={index}
key={label}
data-testid={`step-${index}`}
/>
)
})}
</Flexbox>
<div className={styles.mobileLabel}>
<Text data-testid="mobileStepLabel">
{stepText} {stepLabel}
</Text>
</div>
<div
{...safeRest(rest)}
data-testid="stepTrackerContainer"
className={backgroundColour === 'grey' ? styles.greyBg : styles.whiteBg}
>
<FlexGrid>
<FlexGrid.Row>
<FlexGrid.Col xs={12}>
<div className={styles.stepContainer}>
{steps.map((label, index) => {
return (
<Step
status={current}
label={label}
stepNumber={index + 1}
stepIndex={index}
key={label}
data-testid={`step-${index}`}
/>
)
})}
</div>
</FlexGrid.Col>
</FlexGrid.Row>
<FlexGrid.Row>
<FlexGrid.Col xs={12} md={0}>
<div className={styles.mobileLabel}>
<Text data-testid="mobileStepLabel">
{stepText} {stepLabel}
</Text>
</div>
</FlexGrid.Col>
</FlexGrid.Row>
</FlexGrid>
</div>
)
}
Expand All @@ -72,10 +86,15 @@ StepTracker.propTypes = {
* Use %current to place the current step and use %total to place the total amount of steps.
*/
mobileStepLabelTemplate: PropTypes.string,
/**
* The background colour of the StepTracker.
*/
backgroundColour: PropTypes.oneOf(['grey', 'white']),
}

StepTracker.defaultProps = {
mobileStepLabelTemplate: 'Step %{current} of %{total}:',
backgroundColour: 'grey',
}

export default StepTracker
2 changes: 2 additions & 0 deletions packages/StepTracker/StepTracker.md
View file
Expand Up @@ -4,6 +4,8 @@ will indicate both the active step and the completed steps.
`StepTracker` adjusts to accommodate smaller screens by hiding the labels, displaying only a summary. Resize your browser
window to see this behavior.

While a grey background is preferred, a white background is available through the use of the `backgroundColour` prop.

**Note** this component is not interactive, so the user cannot use it to navigate through the steps. The application will
need to provide its own navigation mechanism and state control. `StepTracker` also does not prevent the current step
from reaching integers beyond the number of steps provided; the application must prevent negative or exceeding
Expand Down
25 changes: 20 additions & 5 deletions packages/StepTracker/StepTracker.modules.scss
View file
@@ -1,10 +1,29 @@
@import '~@tds/core-colours/colours';
@import '~@tds/core-responsive/responsive';

@mixin step-tracker-padding {
padding: 1rem 0;
}

.stepContainer {
display: flex;
flex-direction: row;
}

.greyBg {
background-color: $color-athens-grey;
@include step-tracker-padding;
}

.whiteBg {
background-color: #ffffff;
@include step-tracker-padding;
}

.step {
width: 100%;
position: relative;
text-align: center;
width: 100%;

&::before,
&::after {
Expand Down Expand Up @@ -66,8 +85,4 @@
.mobileLabel {
width: 100%;
text-align: center;

@include mq($from: md) {
display: none;
}
}
159 changes: 90 additions & 69 deletions packages/StepTracker/__tests__/__snapshots__/StepTracker.spec.jsx.snap
View file
Expand Up @@ -2,93 +2,114 @@

exports[`<StepTracker /> renders 1`] = `
<div
class="greyBg"
data-testid="stepTrackerContainer"
>
<div
class="row"
class="TDS_FlexGrid-modules__flexGrid___QxDgy TDS_FlexGrid-modules__limitWidth___2SDcu TDS_FlexGrid-modules__xsReverseCancel___20p12 TDS_FlexGrid-modules__smReverseCancel___-_YfQ TDS_FlexGrid-modules__mdReverseCancel___3cUDQ TDS_FlexGrid-modules__lgReverseCancel___1lfjg TDS_FlexGrid-modules__xlReverseCancel___OIqvi TDS_flexboxgrid2__container-fluid___3c7kO"
>
<div
aria-current="false"
aria-label="Login"
class="step"
data-isactive="true"
data-testid="singleStepContainer-0"
class="TDS_Row-modules__flexRow___3CHOR TDS_Row-modules__xsReverseCancel___3qDNC TDS_Row-modules__smReverseCancel___VUTb9 TDS_Row-modules__mdReverseCancel___1MWfN TDS_Row-modules__lgReverseCancel___1Ngyt TDS_Row-modules__xlReverseCancel___16npr TDS_flexboxgrid2__row___3YyB2"
>
<span
class="iconActive"
>
<i
aria-hidden="true"
class="TDS_Icon-modules__iconCheckmark___3cAol TDS_Icon-modules__icon___13xYd TDS_Icon-modules__inverted___2mdlT TDS_Icon-modules__size16___1pm12"
/>
</span>
<div
class="row justifyContentCenter label"
>
<span
class="TDS_Typography-modules__base___gCTVZ TDS_Typography-modules__wordBreak___3dmWU TDS_Typography-modules__baseFont___2g1ZX TDS_Typography-modules__color___1Jt_W"
>
1. Login
</span>
</div>
</div>
<div
aria-current="true"
aria-label="Purchase"
class="step"
data-isactive="true"
data-testid="singleStepContainer-1"
>
<span
class="iconActive"
>
<br />
</span>
<div
class="row justifyContentCenter label"
class="TDS_flexboxgrid2__col-xs-12___3Q9tF TDS_Col-modules__xsVisible___yQn24 TDS_Col-modules__smVisible___3-waa TDS_Col-modules__mdVisible___wUg94 TDS_Col-modules__lgVisible___7FbXv TDS_Col-modules__xlVisible___1AW2r TDS_Col-modules__padding___2tLQS"
>
<span
class="TDS_Typography-modules__base___gCTVZ TDS_Typography-modules__wordBreak___3dmWU TDS_Typography-modules__boldFont___2MqlI TDS_Typography-modules__wordBreak___3dmWU TDS_Typography-modules__color___1Jt_W"
<div
class="stepContainer"
>
2. Purchase
</span>
<div
aria-current="false"
aria-label="Login"
class="step"
data-isactive="true"
data-testid="singleStepContainer-0"
>
<span
class="iconActive"
>
<i
aria-hidden="true"
class="TDS_Icon-modules__iconCheckmark___3cAol TDS_Icon-modules__icon___13xYd TDS_Icon-modules__inverted___2mdlT TDS_Icon-modules__size16___1pm12"
/>
</span>
<div
class="label"
>
<span
class="TDS_Typography-modules__base___gCTVZ TDS_Typography-modules__wordBreak___3dmWU TDS_Typography-modules__baseFont___2g1ZX TDS_Typography-modules__color___1Jt_W"
>
1. Login
</span>
</div>
</div>
<div
aria-current="true"
aria-label="Purchase"
class="step"
data-isactive="true"
data-testid="singleStepContainer-1"
>
<span
class="iconActive"
>
<br />
</span>
<div
class="label"
>
<span
class="TDS_Typography-modules__base___gCTVZ TDS_Typography-modules__wordBreak___3dmWU TDS_Typography-modules__boldFont___2MqlI TDS_Typography-modules__wordBreak___3dmWU TDS_Typography-modules__color___1Jt_W"
>
2. Purchase
</span>
</div>
</div>
<div
aria-current="false"
aria-label="Checkout"
class="step"
data-isactive="false"
data-testid="singleStepContainer-2"
>
<span
class="icon"
>
<br />
</span>
<div
class="label"
>
<span
class="TDS_Typography-modules__base___gCTVZ TDS_Typography-modules__wordBreak___3dmWU TDS_Typography-modules__baseFont___2g1ZX TDS_Typography-modules__color___1Jt_W"
>
3. Checkout
</span>
</div>
</div>
</div>
</div>
</div>
<div
aria-current="false"
aria-label="Checkout"
class="step"
data-isactive="false"
data-testid="singleStepContainer-2"
class="TDS_Row-modules__flexRow___3CHOR TDS_Row-modules__xsReverseCancel___3qDNC TDS_Row-modules__smReverseCancel___VUTb9 TDS_Row-modules__mdReverseCancel___1MWfN TDS_Row-modules__lgReverseCancel___1Ngyt TDS_Row-modules__xlReverseCancel___16npr TDS_flexboxgrid2__row___3YyB2"
>
<span
class="icon"
>
<br />
</span>
<div
class="row justifyContentCenter label"
class="TDS_flexboxgrid2__col-xs-12___3Q9tF col-md-0 TDS_Col-modules__xsVisible___yQn24 TDS_Col-modules__smVisible___3-waa TDS_Col-modules__mdHidden___3fURS TDS_Col-modules__lgHidden___38qZL TDS_Col-modules__xlHidden___d5mDh TDS_Col-modules__padding___2tLQS"
>
<span
class="TDS_Typography-modules__base___gCTVZ TDS_Typography-modules__wordBreak___3dmWU TDS_Typography-modules__baseFont___2g1ZX TDS_Typography-modules__color___1Jt_W"
<div
class="mobileLabel"
>
3. Checkout
</span>
<span
class="TDS_Typography-modules__base___gCTVZ TDS_Typography-modules__wordBreak___3dmWU TDS_Typography-modules__baseFont___2g1ZX TDS_Typography-modules__color___1Jt_W"
data-testid="mobileStepLabel"
>
<span>
Step 2 of 3:
</span>
Purchase
</span>
</div>
</div>
</div>
</div>
<div
class="mobileLabel"
>
<span
class="TDS_Typography-modules__base___gCTVZ TDS_Typography-modules__wordBreak___3dmWU TDS_Typography-modules__baseFont___2g1ZX TDS_Typography-modules__color___1Jt_W"
data-testid="mobileStepLabel"
>
<span>
Step 2 of 3:
</span>
Purchase
</span>
</div>
</div>
`;
3 changes: 2 additions & 1 deletion packages/StepTracker/package.json
View file
Expand Up @@ -27,7 +27,8 @@
"dependencies": {
"@tds/core-box": "^1.0.1",
"@tds/core-decorative-icon": "^1.0.0",
"@tds/core-text": "^1.0.3",
"@tds/core-flex-grid": "^2.3.0",
"@tds/core-text": "^1.0.2",
"prop-types": "^15.5.10"
},
"devDependencies": {
Expand Down

0 comments on commit e15eaef

Please sign in to comment.