@nice-digital/nds-button 1.2.16 → 1.2.19-alpha.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/package.json +5 -5
  2. package/scss/button.scss +50 -46
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nice-digital/nds-button",
3
- "version": "1.2.16",
3
+ "version": "1.2.19-alpha.0",
4
4
  "description": "Button component for the NICE Design System",
5
5
  "author": "Ian Routledge <ian.routledge@nice.org.uk>",
6
6
  "homepage": "https://design-system.nice.org.uk/",
@@ -34,16 +34,16 @@
34
34
  "url": "https://github.com/nice-digital/nice-design-system/issues"
35
35
  },
36
36
  "dependencies": {
37
- "@nice-digital/nds-core": "^1.3.2",
37
+ "@nice-digital/nds-core": "^1.3.5-alpha.0",
38
38
  "classnames": "^2.2.6",
39
39
  "prop-types": "^15.7.2"
40
40
  },
41
41
  "peerDependencies": {
42
- "react": "^16 || ^17",
43
- "react-dom": "^16 || ^17"
42
+ "react": "^16 || ^17 || ^18",
43
+ "react-dom": "^16 || ^17 || ^18"
44
44
  },
45
45
  "devDependencies": {
46
46
  "@babel/cli": "^7.5.0"
47
47
  },
48
- "gitHead": "db5e29bc9fa8afa7e33c19a8e06a65adafd99bc5"
48
+ "gitHead": "0ddae81edebd757a52ca6a2838610049a83acebd"
49
49
  }
package/scss/button.scss CHANGED
@@ -2,28 +2,32 @@
2
2
  /// @group components
3
3
  ////
4
4
 
5
- @import '~@nice-digital/nds-core/scss/core';
5
+ @use '@nice-digital/nds-core/scss/colours';
6
+ @use '@nice-digital/nds-core/scss/focus';
7
+ @use '@nice-digital/nds-core/scss/spacing';
8
+ @use '@nice-digital/nds-core/scss/typography';
9
+ @use '@nice-digital/nds-core/scss/utils';
6
10
 
7
- $nds-button-shadow-colour: rgba(0, 0, 0, 0.2);
8
- $nds-button-border-radius: em(3px);
11
+ $button-shadow-colour: rgba(0, 0, 0, 0.2);
12
+ $button-border-radius: utils.em(3px);
9
13
 
10
14
  /// Button
11
15
  /// @since 0.1.0
12
16
  .btn {
13
- @include nds-font-size(0);
17
+ @include typography.font-size(0);
14
18
  appearance: none;
15
- background: $nds-colour-btn-primary;
16
- border: em(1px) solid $nds-colour-btn-primary-text;
17
- border-radius: $nds-button-border-radius;
18
- box-shadow: 0 em(3px) em(6px) 0 $nds-button-shadow-colour;
19
- color: $nds-colour-btn-primary-text;
19
+ background: colours.$btn-primary;
20
+ border: utils.em(1px) solid colours.$btn-primary-text;
21
+ border-radius: $button-border-radius;
22
+ box-shadow: 0 utils.em(3px) utils.em(6px) 0 $button-shadow-colour;
23
+ color: colours.$btn-primary-text;
20
24
  cursor: pointer;
21
25
  display: inline-block;
22
26
  font-family: inherit;
23
- margin: em(
24
- 0 $nds-spacing-small $nds-spacing-small -4px
27
+ margin: utils.em(
28
+ 0 spacing.$small spacing.$small -4px
25
29
  ); // Negative left margin to combat inline-block gaps
26
- padding: em($nds-spacing-small $nds-spacing-medium);
30
+ padding: utils.em(spacing.$small spacing.$medium);
27
31
  position: relative;
28
32
  text-align: left;
29
33
  text-decoration: none !important;
@@ -38,27 +42,27 @@ $nds-button-border-radius: em(3px);
38
42
  }
39
43
 
40
44
  &:visited {
41
- color: $nds-colour-btn-primary-text;
45
+ color: colours.$btn-primary-text;
42
46
  }
43
47
 
44
48
  &:hover {
45
- background: $nds-colour-btn-primary-hover;
46
- box-shadow: 0 em(5px) em(8px) 0 $nds-button-shadow-colour;
47
- color: $nds-colour-btn-primary-text;
49
+ background: colours.$btn-primary-hover;
50
+ box-shadow: 0 utils.em(5px) utils.em(8px) 0 $button-shadow-colour;
51
+ color: colours.$btn-primary-text;
48
52
  text-decoration: none;
49
53
  }
50
54
 
51
55
  &:focus {
52
- @include nds-default-focus-style;
53
- background: $nds-colour-btn-primary;
54
- border-color: $nds-colour-focus-inverse;
55
- color: $nds-colour-btn-primary-text;
56
+ @include focus.default-focus-style;
57
+ background: colours.$btn-primary;
58
+ border-color: colours.$focus-inverse;
59
+ color: colours.$btn-primary-text;
56
60
  }
57
61
 
58
62
  &:active {
59
- background: $nds-colour-btn-primary-hover;
63
+ background: colours.$btn-primary-hover;
60
64
  text-decoration: none;
61
- top: em(2px);
65
+ top: utils.em(2px);
62
66
  }
63
67
 
64
68
  // Disabled button styles
@@ -79,74 +83,74 @@ $nds-button-border-radius: em(3px);
79
83
  /// CTA/prominent button
80
84
  /// @since 0.2.0
81
85
  .btn--cta {
82
- background: $nds-colour-btn-cta;
83
- border: em(1px) solid $nds-colour-btn-cta-text;
84
- color: $nds-colour-btn-cta-text;
86
+ background: colours.$btn-cta;
87
+ border: utils.em(1px) solid colours.$btn-cta-text;
88
+ color: colours.$btn-cta-text;
85
89
 
86
90
  &:visited {
87
- color: $nds-colour-btn-cta-text;
91
+ color: colours.$btn-cta-text;
88
92
  }
89
93
 
90
94
  &:hover {
91
- background: $nds-colour-btn-cta-hover;
92
- color: $nds-colour-btn-cta-text;
95
+ background: colours.$btn-cta-hover;
96
+ color: colours.$btn-cta-text;
93
97
  }
94
98
 
95
99
  &:focus {
96
- background: $nds-colour-btn-cta-hover;
100
+ background: colours.$btn-cta-hover;
97
101
  }
98
102
 
99
103
  &:active {
100
- background: $nds-colour-btn-cta-hover;
104
+ background: colours.$btn-cta-hover;
101
105
  }
102
106
  }
103
107
 
104
108
  /// Secondary button
105
109
  /// @since 0.2.0
106
110
  .btn--secondary {
107
- background: $nds-colour-btn-secondary;
108
- border: em(1px) solid $nds-colour-btn-secondary-text;
109
- color: $nds-colour-btn-secondary-text;
111
+ background: colours.$btn-secondary;
112
+ border: utils.em(1px) solid colours.$btn-secondary-text;
113
+ color: colours.$btn-secondary-text;
110
114
 
111
115
  &:visited {
112
- color: $nds-colour-btn-secondary-text;
116
+ color: colours.$btn-secondary-text;
113
117
  }
114
118
 
115
119
  &:hover {
116
- background: $nds-colour-btn-secondary-hover;
117
- color: $nds-colour-btn-secondary-text;
120
+ background: colours.$btn-secondary-hover;
121
+ color: colours.$btn-secondary-text;
118
122
  }
119
123
 
120
124
  &:focus {
121
- background: $nds-colour-btn-secondary-hover;
125
+ background: colours.$btn-secondary-hover;
122
126
  }
123
127
 
124
128
  &:active {
125
- background: $nds-colour-btn-secondary-hover;
129
+ background: colours.$btn-secondary-hover;
126
130
  }
127
131
  }
128
132
 
129
133
  /// Inverse (light) button, for use on inverse (dark) panels/sections
130
134
  /// @since 0.2.0
131
135
  .btn--inverse {
132
- background: $nds-colour-btn-inverse;
133
- border: em(1px) solid $nds-colour-btn-inverse-text;
134
- color: $nds-colour-btn-inverse-text !important;
136
+ background: colours.$btn-inverse;
137
+ border: utils.em(1px) solid colours.$btn-inverse-text;
138
+ color: colours.$btn-inverse-text !important;
135
139
 
136
140
  &:visited {
137
- color: $nds-colour-btn-inverse-text;
141
+ color: colours.$btn-inverse-text;
138
142
  }
139
143
 
140
144
  &:hover {
141
- background: $nds-colour-btn-inverse-hover;
142
- color: $nds-colour-btn-inverse-text;
145
+ background: colours.$btn-inverse-hover;
146
+ color: colours.$btn-inverse-text;
143
147
  }
144
148
 
145
149
  &:focus {
146
- background: $nds-colour-btn-inverse-hover;
150
+ background: colours.$btn-inverse-hover;
147
151
  }
148
152
 
149
153
  &:active {
150
- background: $nds-colour-btn-inverse-hover;
154
+ background: colours.$btn-inverse-hover;
151
155
  }
152
156
  }