Skip to content

Commit d3f0dd6

Browse files
TomdangoTomdango
authored
Merge pull request NHSDigital#7 from NHSDigital/feature/tag-component
Feature/tag component
2 parents 3f59899 + d278044 commit d3f0dd6

10 files changed

+150
-2
lines changed

‎.storybook/_storybook.scss

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
.tag-demo {
2+
display: grid;
3+
grid-row-gap: 10px;
4+
width: 200px;
5+
margin: auto;
6+
padding-top: 40px;
7+
padding-bottom: 40px;
8+
background-color: transparent;
9+
}

‎.storybook/config.js

+1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { configure, addParameters } from '@storybook/react';
22
import '../src/all.scss';
3+
import './_storybook.scss';
34
import NHSTheme from './theme';
45

56
addParameters({

‎.stylelintrc.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
"rules": {
55
"selector-class-pattern": null,
66
"order/properties-alphabetical-order": null,
7-
"max-nesting-depth": null
7+
"max-nesting-depth": null,
8+
"scss/dollar-variable-pattern": null
89
}
910
}

‎CONTRIBUTING.md

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
# Contributing
2+
3+
## Development Guidelines
4+
5+
* Changes should be reviewed within the pull requests.
6+
* Anyone with write access may approve code reviews
7+
* In reviews, if there’s any contention over an issue, Tom Judd-Cooper is brought into the discussion.
8+
* Branches should be raised with naming such as feature/name-of-feature or hotfix/name-of-feature
9+
* The standard components should stay the same as the components in the nhsuk-frontend repo
10+
* If you’re not sure if a component should go in the components or extensions repository, ask one of the maintainers.
11+
12+
## Tracking work (for NHS developers)
13+
14+
* Developers can either pick up work from an internal NHS JIRA board, or from the raised issues against this project.
15+
* If the change is related to internal project work, that work is tracked in JIRA, otherwise we raise a ticket against the GitHub project.
16+
* Developers perform their changes, and link their pull request within the Service Manual #react-components channel.
17+
* If it is a project ticket, they will also raise it in that project’s Slack.
18+
* Anyone can review the changes, and once we have one approval, any of the developers with write access can then release it.
19+
* They should tag the channel with [at]here to make everyone else aware.
20+
* The pipeline then produces the patch version, and uploads it to npm.
21+
* The developer should then notify any known downstream projects about the change.

‎README.md

+4-1
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,10 @@ A storybook containing all of the components and their usage can be found [here]
5050

5151
## Maintainers
5252

53-
**We're currently looking for new maintainers!** If you have knowledge of React and would be willing to help maintain this library, you can email me (Thomas Judd-Cooper) [here](mailto:[email protected]).
53+
**We're currently looking for new maintainers!** If you have knowledge of React and would be willing to help maintain
54+
this library, you can email me (Thomas Judd-Cooper) [here](mailto:[email protected]).
55+
56+
If you are thinking about raising a pull request, please read the [Contributing Guide](CONTRIBUTING.md).
5457

5558
- Thomas Judd-Cooper ([GitHub](https://github.com/tomdango))
5659
- Luke Pearson ([GitHub](https://github.com/lukepearson))

‎src/all.scss

+3
Original file line numberDiff line numberDiff line change
@@ -3,3 +3,6 @@
33

44
// SubNavigation Component
55
@import './components/sub-navigation/SubNavigation';
6+
7+
// Tag Styling
8+
@import './styles/tag';

‎src/components.scss

+3
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,5 @@
11
// SubNavigation Component
22
@import './components/sub-navigation/SubNavigation';
3+
4+
// Tag Styling
5+
@import './styles/tag';

‎src/styles/_tag.scss

+71
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
@import 'variables';
2+
@import 'core';
3+
4+
/* ==========================================================================
5+
#TAG
6+
========================================================================== */
7+
8+
.nhsuk-tag {
9+
@include nhsuk-font($size: 16, $weight: bold, $line-height: 1);
10+
background-color: shade($color_nhsuk-blue, 10%);
11+
color: $color_nhsuk-white;
12+
display: inline-block;
13+
letter-spacing: 1px;
14+
outline: 2px solid transparent;
15+
outline-offset: -2px;
16+
padding: nhsuk-spacing(1) nhsuk-spacing(2);
17+
text-decoration: none;
18+
width: fit-content;
19+
text-transform: uppercase;
20+
21+
&--white {
22+
background-color: $color_nhsuk-white;
23+
border: 1px solid $color_nhsuk-black;
24+
color: $color_nhsuk-black;
25+
}
26+
27+
&--grey {
28+
background-color: tint($color_nhsuk-grey-1, 80%);
29+
color: shade($color_nhsuk-grey-1, 30%);
30+
}
31+
32+
&--green {
33+
background-color: tint($color_nhsuk-green, 80%);
34+
color: shade($color_nhsuk-green, 40%);
35+
}
36+
37+
&--aqua-green {
38+
background-color: tint($color_nhsuk-aqua-green, 80%);
39+
color: shade($color_nhsuk-aqua-green, 50%);
40+
}
41+
42+
&--blue {
43+
background-color: tint($color_nhsuk-blue, 80%);
44+
color: shade($color_nhsuk-blue, 30%);
45+
}
46+
47+
&--purple {
48+
background-color: tint($color_nhsuk-purple, 80%);
49+
color: shade($color_nhsuk-purple, 30%);
50+
}
51+
52+
&--pink {
53+
background-color: tint($color_nhsuk-pink, 80%);
54+
color: shade($color_nhsuk-pink, 50%);
55+
}
56+
57+
&--red {
58+
background-color: tint($color_nhsuk-red, 80%);
59+
color: shade($color_nhsuk-red, 50%);
60+
}
61+
62+
&--orange {
63+
background-color: tint($color_nhsuk-warm-yellow, 50%);
64+
color: shade($color_nhsuk-warm-yellow, 70%);
65+
}
66+
67+
&--yellow {
68+
background-color: tint($color_nhsuk-yellow, 50%);
69+
color: shade($color_nhsuk-yellow, 70%);
70+
}
71+
}

‎src/styles/_variables.scss

+2
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
11
// Settings
22
@import '~nhsuk-frontend/packages/core/settings/all';
33
@import '~nhsuk-frontend/packages/core/settings/colours';
4+
5+
$color_nhsuk-pink: #ae2573;

‎stories/Tag.stories.tsx

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import React from 'react';
2+
import { storiesOf } from '@storybook/react';
3+
4+
const stories = storiesOf('Tags', module);
5+
6+
stories.add('Basic', () => {
7+
return (
8+
<div className="tag-demo">
9+
<span className="nhsuk-tag">Standard</span>
10+
<span className="nhsuk-tag">Done</span>
11+
<span className="nhsuk-tag nhsuk-tag--white"> Started </span>
12+
<span className="nhsuk-tag nhsuk-tag--grey"> Not Started </span>
13+
<span className="nhsuk-tag nhsuk-tag--blue"> Ready to submit </span>
14+
<span className="nhsuk-tag nhsuk-tag--red"> FP69 </span>
15+
<span className="nhsuk-tag nhsuk-tag--orange"> Ceased - no cervix </span>
16+
</div>
17+
);
18+
}).add('Colours', () => {
19+
return (
20+
<div className="tag-demo">
21+
<span className="nhsuk-tag">Standard</span>
22+
<span className="nhsuk-tag nhsuk-tag--white"> Started </span>
23+
<span className="nhsuk-tag nhsuk-tag--grey"> Not Started </span>
24+
<span className="nhsuk-tag nhsuk-tag--green"> New </span>
25+
<span className="nhsuk-tag nhsuk-tag--aqua-green"> Active </span>
26+
<span className="nhsuk-tag nhsuk-tag--blue"> Pending </span>
27+
<span className="nhsuk-tag nhsuk-tag--purple"> Received </span>
28+
<span className="nhsuk-tag nhsuk-tag--pink"> Sent </span>
29+
<span className="nhsuk-tag nhsuk-tag--red"> Rejected </span>
30+
<span className="nhsuk-tag nhsuk-tag--orange"> Declined </span>
31+
<span className="nhsuk-tag nhsuk-tag--yellow"> Delayed </span>
32+
</div>
33+
);
34+
});

0 commit comments

Comments
 (0)