Stockport styleguide is a React application to showcase the reusable components for the Stockport Council website. This project contains both the SASS styleing of the components and a showcase of the smbc-react-components used within the Council's website.
- Node
- npm
$ npm run setup
This project makes use of sass-lint and es-lint. To make use of these packages you will need to install these npm packages and then install the relevant IDE addons:
<button class="button-primary">Next step</button>.button-primary {
@extend .button;
@include button-colors($teal-darker, $white);
}@mixin button-colors ($buttonColour, $textColour) {
color: $textColour;
background-color: $buttonColour;
a {
color: $textColour;
}
&:hover, &:focus {
background-color: lighten($buttonColour, 5%);
}
&:active {
background-color: darken($buttonColour, 5%);
}
}Within the package.json file there is a pre-commit that will run $npm run build which bundles up the packages and adds them to the commit.
There are different sections to the styleguide that have been styled but not yet been made into react components.
| Mark | Description |
|---|---|
| 🚫 | not started |
| 🏃 | on-going |
| ☑️ | completed |
- ☑️ Colours
- ☑️ Typography
- 🚫 Navigation
- ☑️ Buttons
- 🏃 Form elements
- ☑️ Alerts
- 🚫 Tables
- 🚫 Profiles
- ☑️ Icons
- ☑️ Promotions
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
Please make sure to update tests as appropriate.