@nice-digital/nds-action-banner 1.2.20-alpha.0 → 1.2.21-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 +4 -4
  2. package/scss/action-banner.scss +43 -37
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nice-digital/nds-action-banner",
3
- "version": "1.2.20-alpha.0",
3
+ "version": "1.2.21-alpha.0",
4
4
  "description": "Action banner component for the NICE Design System",
5
5
  "keywords": [
6
6
  "banner"
@@ -34,8 +34,8 @@
34
34
  "url": "https://github.com/nice-digital/nice-design-system/issues"
35
35
  },
36
36
  "dependencies": {
37
- "@nice-digital/icons": "^3.0.1-alpha.0",
38
- "@nice-digital/nds-core": "^1.3.4-alpha.0",
37
+ "@nice-digital/icons": "^3.0.2-alpha.0",
38
+ "@nice-digital/nds-core": "^1.3.5-alpha.0",
39
39
  "classnames": "^2.3.1",
40
40
  "prop-types": "^15.7.2"
41
41
  },
@@ -46,5 +46,5 @@
46
46
  "devDependencies": {
47
47
  "@babel/cli": "^7.5.0"
48
48
  },
49
- "gitHead": "ce7769f7847946e5d9eeca4a104df2168c7f9dab"
49
+ "gitHead": "0ddae81edebd757a52ca6a2838610049a83acebd"
50
50
  }
package/scss/action-banner.scss CHANGED
@@ -2,24 +2,30 @@
2
2
  /// @group components
3
3
  ////
4
4
 
5
- @import '~@nice-digital/nds-core/scss/core';
6
- @import '~@nice-digital/icons/scss/nice-icons';
5
+ @use '@nice-digital/nds-core/scss/colours';
6
+ @use '@nice-digital/nds-core/scss/focus';
7
+ @use '@nice-digital/nds-core/scss/layout';
8
+ @use '@nice-digital/nds-core/scss/media-queries';
9
+ @use '@nice-digital/nds-core/scss/spacing';
10
+ @use '@nice-digital/nds-core/scss/typography';
11
+ @use '@nice-digital/nds-core/scss/utils';
12
+ @use '@nice-digital/nds-core/scss/visibility';
7
13
 
8
14
  // Default action banner background colour
9
15
  /// @since 1.0.0
10
- $nds-action-banner-default-background: $nds-colour-nice-cool-teal;
16
+ $action-banner-default-background: colours.$nice-cool-teal;
11
17
 
12
18
  // Subtle default banner border colour
13
19
  /// @since 1.0.0
14
- $nds-action-banner-default-border: $nds-colour-nice-black;
20
+ $action-banner-default-border: colours.$nice-black;
15
21
 
16
22
  // Subtle action banner background colour
17
23
  /// @since 1.0.0
18
- $nds-action-banner-subtle-background: $nds-colour-nice-grey-3;
24
+ $action-banner-subtle-background: colours.$nice-grey-3;
19
25
 
20
26
  // Subtle action banner border colour
21
27
  /// @since 1.0.0
22
- $nds-action-banner-subtle-border: $nds-colour-nice-grey-2;
28
+ $action-banner-subtle-border: colours.$nice-grey-2;
23
29
 
24
30
  /// Action banner component. Used to highlight
25
31
  /// and give context to a call-to-action.
@@ -28,27 +34,27 @@ $nds-action-banner-subtle-border: $nds-colour-nice-grey-2;
28
34
  ///
29
35
  /// @since 0.3.1
30
36
  .action-banner {
31
- @include nds-hide-print;
32
- @include nds-links-inverse;
33
- background: $nds-action-banner-default-background;
34
- border: 1px solid $nds-action-banner-default-border;
35
- color: $nds-colour-text-inverse;
36
- margin: em(0 0 $nds-spacing-large);
37
- padding: em($nds-spacing-medium 0);
37
+ @include visibility.hide-print;
38
+ @include typography.links-inverse;
39
+ background: $action-banner-default-background;
40
+ border: 1px solid $action-banner-default-border;
41
+ color: colours.$text-inverse;
42
+ margin: utils.em(0 0 spacing.$large);
43
+ padding: utils.em(spacing.$medium 0);
38
44
  position: relative;
39
45
 
40
46
  &__container {
41
- @include nds-container;
47
+ @include layout.container;
42
48
  }
43
49
 
44
50
  &__text {
45
- margin-bottom: em($nds-spacing-medium);
51
+ margin-bottom: utils.em(spacing.$medium);
46
52
  }
47
53
 
48
54
  &__title {
49
- @include nds-font-size(3);
50
- color: $nds-colour-text-inverse;
51
- margin: em(0 0 $nds-spacing-x-small);
55
+ @include typography.font-size(3);
56
+ color: colours.$text-inverse;
57
+ margin: utils.em(0 0 spacing.$x-small);
52
58
  }
53
59
 
54
60
  &__intro {
@@ -56,21 +62,21 @@ $nds-action-banner-subtle-border: $nds-colour-nice-grey-2;
56
62
  }
57
63
 
58
64
  &__actions {
59
- @include nds-inverse-button-focus;
65
+ @include focus.inverse-button-focus;
60
66
  .btn {
61
67
  margin: 0;
62
68
  }
63
69
  }
64
70
 
65
71
  &__close {
66
- @include nds-inverse-button-focus;
72
+ @include focus.inverse-button-focus;
67
73
  appearance: none;
68
74
  background: 0;
69
75
  border: 0;
70
- color: $nds-colour-text-inverse;
76
+ color: colours.$text-inverse;
71
77
  cursor: pointer;
72
78
  line-height: 1;
73
- padding: rem($nds-spacing-small);
79
+ padding: utils.rem(spacing.$small);
74
80
  position: absolute;
75
81
  right: 0;
76
82
  top: 0;
@@ -81,50 +87,50 @@ $nds-action-banner-subtle-border: $nds-colour-nice-grey-2;
81
87
  }
82
88
 
83
89
  &:focus {
84
- @include nds-inverse-focus-style;
90
+ @include focus.inverse-focus-style;
85
91
  }
86
92
  }
87
93
 
88
94
  &--subtle {
89
- @include nds-links-default;
90
- background: $nds-action-banner-subtle-background;
91
- border: 1px solid $nds-action-banner-subtle-border;
92
- color: $nds-colour-text;
95
+ @include typography.links-default;
96
+ background: $action-banner-subtle-background;
97
+ border: 1px solid $action-banner-subtle-border;
98
+ color: colours.$text;
93
99
 
94
100
  .action-banner__title {
95
- color: $nds-colour-text;
101
+ color: colours.$text;
96
102
  }
97
103
 
98
104
  .action-banner__close {
99
- color: $nds-colour-text;
105
+ color: colours.$text;
100
106
  }
101
107
 
102
108
  .action-banner__actions {
103
- @include nds-default-button-focus;
109
+ @include focus.default-button-focus;
104
110
  }
105
111
  }
106
112
 
107
113
  &--closeable {
108
114
  .action-banner__title {
109
- padding-right: rem($nds-spacing-large); // Make room for close button
115
+ padding-right: utils.rem(spacing.$large); // Make room for close button
110
116
  }
111
117
  }
112
118
 
113
- @include mq($from: md) {
114
- @include nds-clearfix;
119
+ @include media-queries.mq($from: md) {
120
+ @include layout.clearfix;
115
121
 
116
122
  &__text {
117
123
  margin-bottom: 0;
118
- width: percentage(3*0.25);
124
+ width: percentage(3 * 0.25);
119
125
  }
120
126
 
121
127
  &__actions {
122
128
  position: absolute;
123
- right: rem($nds-spacing-medium);
129
+ right: utils.rem(spacing.$medium);
124
130
  text-align: right;
125
131
  top: 50%;
126
132
  transform: translateY(-50%);
127
- width: percentage(1*0.25);
133
+ width: percentage(1 * 0.25);
128
134
  }
129
135
 
130
136
  &--closeable {
@@ -133,7 +139,7 @@ $nds-action-banner-subtle-border: $nds-colour-nice-grey-2;
133
139
  }
134
140
 
135
141
  .action-banner__actions {
136
- right: rem($nds-spacing-x-large);
142
+ right: utils.rem(spacing.$x-large);
137
143
  }
138
144
  }
139
145
  }