@nice-digital/nds-button 1.2.18-alpha.0 → 2.0.1-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 +3 -3
  2. package/scss/button.scss +52 -46
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nice-digital/nds-button",
3
- "version": "1.2.18-alpha.0",
3
+ "version": "2.0.1-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,7 +34,7 @@
34
34
  "url": "https://github.com/nice-digital/nice-design-system/issues"
35
35
  },
36
36
  "dependencies": {
37
- "@nice-digital/nds-core": "^1.3.4-alpha.0",
37
+ "@nice-digital/nds-core": "^2.0.1-alpha.0",
38
38
  "classnames": "^2.2.6",
39
39
  "prop-types": "^15.7.2"
40
40
  },
@@ -45,5 +45,5 @@
45
45
  "devDependencies": {
46
46
  "@babel/cli": "^7.5.0"
47
47
  },
48
- "gitHead": "ce7769f7847946e5d9eeca4a104df2168c7f9dab"
48
+ "gitHead": "520ec14c3198c5224e5ea6f007616c408d96acbc"
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: rgb(0 0 0 / 20%);
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,76 @@ $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-border;
88
+ box-shadow: 4px 4px 8px $button-shadow-colour;
89
+ color: colours.$btn-cta-text;
85
90
 
86
91
  &:visited {
87
- color: $nds-colour-btn-cta-text;
92
+ color: colours.$btn-cta-text;
88
93
  }
89
94
 
90
95
  &:hover {
91
- background: $nds-colour-btn-cta-hover;
92
- color: $nds-colour-btn-cta-text;
96
+ background: colours.$btn-cta-hover;
97
+ box-shadow: 4px 4px 8px $button-shadow-colour;
98
+ color: colours.$btn-cta-text;
93
99
  }
94
100
 
95
101
  &:focus {
96
- background: $nds-colour-btn-cta-hover;
102
+ background: colours.$btn-cta-hover;
97
103
  }
98
104
 
99
105
  &:active {
100
- background: $nds-colour-btn-cta-hover;
106
+ background: colours.$btn-cta-hover;
101
107
  }
102
108
  }
103
109
 
104
110
  /// Secondary button
105
111
  /// @since 0.2.0
106
112
  .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;
113
+ background: colours.$btn-secondary;
114
+ border: utils.em(1px) solid colours.$btn-secondary-text;
115
+ color: colours.$btn-secondary-text;
110
116
 
111
117
  &:visited {
112
- color: $nds-colour-btn-secondary-text;
118
+ color: colours.$btn-secondary-text;
113
119
  }
114
120
 
115
121
  &:hover {
116
- background: $nds-colour-btn-secondary-hover;
117
- color: $nds-colour-btn-secondary-text;
122
+ background: colours.$btn-secondary-hover;
123
+ color: colours.$btn-secondary-text;
118
124
  }
119
125
 
120
126
  &:focus {
121
- background: $nds-colour-btn-secondary-hover;
127
+ background: colours.$btn-secondary-hover;
122
128
  }
123
129
 
124
130
  &:active {
125
- background: $nds-colour-btn-secondary-hover;
131
+ background: colours.$btn-secondary-hover;
126
132
  }
127
133
  }
128
134
 
129
135
  /// Inverse (light) button, for use on inverse (dark) panels/sections
130
136
  /// @since 0.2.0
131
137
  .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;
138
+ background: colours.$btn-inverse;
139
+ border: utils.em(1px) solid colours.$btn-inverse-text;
140
+ color: colours.$btn-inverse-text !important;
135
141
 
136
142
  &:visited {
137
- color: $nds-colour-btn-inverse-text;
143
+ color: colours.$btn-inverse-text;
138
144
  }
139
145
 
140
146
  &:hover {
141
- background: $nds-colour-btn-inverse-hover;
142
- color: $nds-colour-btn-inverse-text;
147
+ background: colours.$btn-inverse-hover;
148
+ color: colours.$btn-inverse-text;
143
149
  }
144
150
 
145
151
  &:focus {
146
- background: $nds-colour-btn-inverse-hover;
152
+ background: colours.$btn-inverse-hover;
147
153
  }
148
154
 
149
155
  &:active {
150
- background: $nds-colour-btn-inverse-hover;
156
+ background: colours.$btn-inverse-hover;
151
157
  }
152
158
  }