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