newspack-components 4.0.0 → 4.2.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 (10) hide show
  1. package/babel.config.js +1 -1
  2. package/colors/colors.module.scss +1 -1
  3. package/dist/cjs/action-card/style.scss +7 -12
  4. package/dist/cjs/popover/style.scss +1 -1
  5. package/dist/esm/action-card/index.js +0 -1
  6. package/dist/esm/action-card/style.scss +7 -12
  7. package/dist/esm/popover/style.scss +1 -1
  8. package/package.json +1 -1
  9. package/src/action-card/style.scss +7 -12
  10. package/src/popover/style.scss +1 -1
package/babel.config.js CHANGED
@@ -20,7 +20,7 @@ module.exports = api => {
20
20
  importSource: process.env.IMPORT_SOURCE,
21
21
  },
22
22
  ],
23
- [ '@babel/preset-typescript', { allowDeclareFields: true } ],
23
+ [ '@babel/preset-typescript', { allowDeclareFields: true, allExtensions: true, isTSX: true } ],
24
24
  ],
25
25
  };
26
26
  };
package/colors/colors.module.scss CHANGED
@@ -6,7 +6,7 @@
6
6
  @use "sass:color";
7
7
 
8
8
  @function to-rgb($color) {
9
- @return color.red($color) + ", " + color.green($color) + ", " + color.blue($color);
9
+ @return color.channel($color, "red", $space: rgb) + ", " + color.channel($color, "green", $space: rgb) + ", " + color.channel($color, "blue", $space: rgb);
10
10
  }
11
11
 
12
12
  // Primary: Hex
package/dist/cjs/action-card/style.scss CHANGED
@@ -55,7 +55,7 @@
55
55
  .components-toggle-control {
56
56
  margin-bottom: 16px;
57
57
 
58
- @media screen and ( min-width: 744px ) {
58
+ @media screen and (min-width: 744px) {
59
59
  margin-bottom: 0;
60
60
  margin-right: 16px;
61
61
  }
@@ -77,10 +77,6 @@
77
77
  padding: 0 4px;
78
78
  }
79
79
 
80
- & + & {
81
- margin-top: -16px;
82
- }
83
-
84
80
  &.mv0 {
85
81
  border-left-color: wp-colors.$gray-300;
86
82
  border-radius: 0;
@@ -122,7 +118,7 @@
122
118
  .components-toggle-control {
123
119
  margin-bottom: 16px;
124
120
 
125
- @media screen and ( min-width: 744px ) {
121
+ @media screen and (min-width: 744px) {
126
122
  margin-bottom: 0;
127
123
  margin-right: 16px;
128
124
  }
@@ -132,7 +128,7 @@
132
128
  .newspack-action-card__region-left {
133
129
  margin-bottom: 16px;
134
130
 
135
- @media screen and ( min-width: 744px ) {
131
+ @media screen and (min-width: 744px) {
136
132
  margin-bottom: 0;
137
133
  margin-right: 16px;
138
134
  }
@@ -252,7 +248,7 @@
252
248
  padding: 24px;
253
249
  display: block;
254
250
 
255
- @media screen and ( min-width: 744px ) {
251
+ @media screen and (min-width: 744px) {
256
252
  display: flex;
257
253
  }
258
254
 
@@ -261,7 +257,7 @@
261
257
  margin-bottom: 24px;
262
258
  margin-top: 0;
263
259
 
264
- @media screen and ( min-width: 744px ) {
260
+ @media screen and (min-width: 744px) {
265
261
  margin-bottom: 0;
266
262
  margin-right: 24px;
267
263
  }
@@ -308,7 +304,7 @@
308
304
  .newspack-action-card__region-left {
309
305
  margin-bottom: 24px;
310
306
 
311
- @media screen and ( min-width: 744px ) {
307
+ @media screen and (min-width: 744px) {
312
308
  margin-bottom: 0;
313
309
  margin-right: 24px;
314
310
  }
@@ -335,7 +331,7 @@
335
331
  margin-top: 24px;
336
332
  text-align: right;
337
333
 
338
- @media screen and ( min-width: 744px ) {
334
+ @media screen and (min-width: 744px) {
339
335
  align-items: flex-end;
340
336
  flex-direction: column;
341
337
  margin-left: 24px;
@@ -557,7 +553,6 @@
557
553
  }
558
554
 
559
555
  .newspack-action-card__region-top {
560
- flex: 1 1 auto;
561
556
  padding: 8px 16px 8px 0 !important;
562
557
  flex: 1;
563
558
  }
package/dist/cjs/popover/style.scss CHANGED
@@ -75,7 +75,7 @@
75
75
  }
76
76
 
77
77
  .screen-reader-text {
78
- display: flex;
78
+ opacity: 0;
79
79
  }
80
80
 
81
81
  .newspack-select-control {
package/dist/esm/action-card/index.js CHANGED
@@ -14,7 +14,6 @@ import { Icon, check, chevronDown, chevronUp, dragHandle } from '@wordpress/icon
14
14
  * Internal dependencies
15
15
  */
16
16
  import { Button, Card, Grid, Handoff, Notice, Waiting } from '../';
17
- import { ActionCardProps } from './action-card.d.ts';
18
17
  import './style.scss';
19
18
 
20
19
  /**
package/dist/esm/action-card/style.scss CHANGED
@@ -55,7 +55,7 @@
55
55
  .components-toggle-control {
56
56
  margin-bottom: 16px;
57
57
 
58
- @media screen and ( min-width: 744px ) {
58
+ @media screen and (min-width: 744px) {
59
59
  margin-bottom: 0;
60
60
  margin-right: 16px;
61
61
  }
@@ -77,10 +77,6 @@
77
77
  padding: 0 4px;
78
78
  }
79
79
 
80
- & + & {
81
- margin-top: -16px;
82
- }
83
-
84
80
  &.mv0 {
85
81
  border-left-color: wp-colors.$gray-300;
86
82
  border-radius: 0;
@@ -122,7 +118,7 @@
122
118
  .components-toggle-control {
123
119
  margin-bottom: 16px;
124
120
 
125
- @media screen and ( min-width: 744px ) {
121
+ @media screen and (min-width: 744px) {
126
122
  margin-bottom: 0;
127
123
  margin-right: 16px;
128
124
  }
@@ -132,7 +128,7 @@
132
128
  .newspack-action-card__region-left {
133
129
  margin-bottom: 16px;
134
130
 
135
- @media screen and ( min-width: 744px ) {
131
+ @media screen and (min-width: 744px) {
136
132
  margin-bottom: 0;
137
133
  margin-right: 16px;
138
134
  }
@@ -252,7 +248,7 @@
252
248
  padding: 24px;
253
249
  display: block;
254
250
 
255
- @media screen and ( min-width: 744px ) {
251
+ @media screen and (min-width: 744px) {
256
252
  display: flex;
257
253
  }
258
254
 
@@ -261,7 +257,7 @@
261
257
  margin-bottom: 24px;
262
258
  margin-top: 0;
263
259
 
264
- @media screen and ( min-width: 744px ) {
260
+ @media screen and (min-width: 744px) {
265
261
  margin-bottom: 0;
266
262
  margin-right: 24px;
267
263
  }
@@ -308,7 +304,7 @@
308
304
  .newspack-action-card__region-left {
309
305
  margin-bottom: 24px;
310
306
 
311
- @media screen and ( min-width: 744px ) {
307
+ @media screen and (min-width: 744px) {
312
308
  margin-bottom: 0;
313
309
  margin-right: 24px;
314
310
  }
@@ -335,7 +331,7 @@
335
331
  margin-top: 24px;
336
332
  text-align: right;
337
333
 
338
- @media screen and ( min-width: 744px ) {
334
+ @media screen and (min-width: 744px) {
339
335
  align-items: flex-end;
340
336
  flex-direction: column;
341
337
  margin-left: 24px;
@@ -557,7 +553,6 @@
557
553
  }
558
554
 
559
555
  .newspack-action-card__region-top {
560
- flex: 1 1 auto;
561
556
  padding: 8px 16px 8px 0 !important;
562
557
  flex: 1;
563
558
  }
package/dist/esm/popover/style.scss CHANGED
@@ -75,7 +75,7 @@
75
75
  }
76
76
 
77
77
  .screen-reader-text {
78
- display: flex;
78
+ opacity: 0;
79
79
  }
80
80
 
81
81
  .newspack-select-control {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "newspack-components",
3
- "version": "4.0.0",
3
+ "version": "4.2.0",
4
4
  "description": "Newspack design system components",
5
5
  "author": "Automattic",
6
6
  "license": "GPL-2.0-or-later",
package/src/action-card/style.scss CHANGED
@@ -55,7 +55,7 @@
55
55
  .components-toggle-control {
56
56
  margin-bottom: 16px;
57
57
 
58
- @media screen and ( min-width: 744px ) {
58
+ @media screen and (min-width: 744px) {
59
59
  margin-bottom: 0;
60
60
  margin-right: 16px;
61
61
  }
@@ -77,10 +77,6 @@
77
77
  padding: 0 4px;
78
78
  }
79
79
 
80
- & + & {
81
- margin-top: -16px;
82
- }
83
-
84
80
  &.mv0 {
85
81
  border-left-color: wp-colors.$gray-300;
86
82
  border-radius: 0;
@@ -122,7 +118,7 @@
122
118
  .components-toggle-control {
123
119
  margin-bottom: 16px;
124
120
 
125
- @media screen and ( min-width: 744px ) {
121
+ @media screen and (min-width: 744px) {
126
122
  margin-bottom: 0;
127
123
  margin-right: 16px;
128
124
  }
@@ -132,7 +128,7 @@
132
128
  .newspack-action-card__region-left {
133
129
  margin-bottom: 16px;
134
130
 
135
- @media screen and ( min-width: 744px ) {
131
+ @media screen and (min-width: 744px) {
136
132
  margin-bottom: 0;
137
133
  margin-right: 16px;
138
134
  }
@@ -252,7 +248,7 @@
252
248
  padding: 24px;
253
249
  display: block;
254
250
 
255
- @media screen and ( min-width: 744px ) {
251
+ @media screen and (min-width: 744px) {
256
252
  display: flex;
257
253
  }
258
254
 
@@ -261,7 +257,7 @@
261
257
  margin-bottom: 24px;
262
258
  margin-top: 0;
263
259
 
264
- @media screen and ( min-width: 744px ) {
260
+ @media screen and (min-width: 744px) {
265
261
  margin-bottom: 0;
266
262
  margin-right: 24px;
267
263
  }
@@ -308,7 +304,7 @@
308
304
  .newspack-action-card__region-left {
309
305
  margin-bottom: 24px;
310
306
 
311
- @media screen and ( min-width: 744px ) {
307
+ @media screen and (min-width: 744px) {
312
308
  margin-bottom: 0;
313
309
  margin-right: 24px;
314
310
  }
@@ -335,7 +331,7 @@
335
331
  margin-top: 24px;
336
332
  text-align: right;
337
333
 
338
- @media screen and ( min-width: 744px ) {
334
+ @media screen and (min-width: 744px) {
339
335
  align-items: flex-end;
340
336
  flex-direction: column;
341
337
  margin-left: 24px;
@@ -557,7 +553,6 @@
557
553
  }
558
554
 
559
555
  .newspack-action-card__region-top {
560
- flex: 1 1 auto;
561
556
  padding: 8px 16px 8px 0 !important;
562
557
  flex: 1;
563
558
  }
package/src/popover/style.scss CHANGED
@@ -75,7 +75,7 @@
75
75
  }
76
76
 
77
77
  .screen-reader-text {
78
- display: flex;
78
+ opacity: 0;
79
79
  }
80
80
 
81
81
  .newspack-select-control {