@transferwise/components 0.0.0-experimental-2b7bcad → 0.0.0-experimental-1467862

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/build/main.css +3 -3
  2. package/build/styles/listItem/ListItem.css +3 -3
  3. package/build/styles/listItem/ListItem.grid.css +3 -3
  4. package/build/styles/main.css +3 -3
  5. package/package.json +3 -3
  6. package/src/listItem/ListItem.css +3 -3
  7. package/src/listItem/ListItem.grid.css +3 -3
  8. package/src/listItem/ListItem.grid.less +3 -3
  9. package/src/listItem/_stories/ListItem.story.tsx +4 -4
  10. package/src/main.css +3 -3
package/build/main.css CHANGED
@@ -2640,7 +2640,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
2640
2640
  gap: 4px 16px;
2641
2641
  gap: var(--size-4) var(--size-16);
2642
2642
  }
2643
- @container (min-width: 375px) {
2643
+ @container (min-width: 380px) {
2644
2644
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
2645
2645
  grid-template-columns: auto 1fr auto;
2646
2646
  grid-template-rows: auto auto auto;
@@ -2728,7 +2728,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
2728
2728
  grid-template-areas: "body";
2729
2729
  }
2730
2730
  }
2731
- @container (min-width: 297px) and (max-width: 375px) {
2731
+ @container (min-width: 290px) and (max-width: 380px) {
2732
2732
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl .wds-list-item-media {
2733
2733
  margin-bottom: 12px;
2734
2734
  margin-bottom: var(--size-12);
@@ -2856,7 +2856,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
2856
2856
  grid-template-areas: "body";
2857
2857
  }
2858
2858
  }
2859
- @container (max-width: 296px) {
2859
+ @container (max-width: 290px) {
2860
2860
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
2861
2861
  grid-template-columns: auto 1fr;
2862
2862
  grid-template-rows: auto auto auto;
package/build/styles/listItem/ListItem.css CHANGED
@@ -5,7 +5,7 @@
5
5
  gap: 4px 16px;
6
6
  gap: var(--size-4) var(--size-16);
7
7
  }
8
- @container (min-width: 375px) {
8
+ @container (min-width: 380px) {
9
9
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
10
10
  grid-template-columns: auto 1fr auto;
11
11
  grid-template-rows: auto auto auto;
@@ -93,7 +93,7 @@
93
93
  grid-template-areas: "body";
94
94
  }
95
95
  }
96
- @container (min-width: 297px) and (max-width: 375px) {
96
+ @container (min-width: 290px) and (max-width: 380px) {
97
97
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl .wds-list-item-media {
98
98
  margin-bottom: 12px;
99
99
  margin-bottom: var(--size-12);
@@ -221,7 +221,7 @@
221
221
  grid-template-areas: "body";
222
222
  }
223
223
  }
224
- @container (max-width: 296px) {
224
+ @container (max-width: 290px) {
225
225
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
226
226
  grid-template-columns: auto 1fr;
227
227
  grid-template-rows: auto auto auto;
package/build/styles/listItem/ListItem.grid.css CHANGED
@@ -5,7 +5,7 @@
5
5
  gap: 4px 16px;
6
6
  gap: var(--size-4) var(--size-16);
7
7
  }
8
- @container (min-width: 375px) {
8
+ @container (min-width: 380px) {
9
9
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
10
10
  grid-template-columns: auto 1fr auto;
11
11
  grid-template-rows: auto auto auto;
@@ -93,7 +93,7 @@
93
93
  grid-template-areas: "body";
94
94
  }
95
95
  }
96
- @container (min-width: 297px) and (max-width: 375px) {
96
+ @container (min-width: 290px) and (max-width: 380px) {
97
97
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl .wds-list-item-media {
98
98
  margin-bottom: 12px;
99
99
  margin-bottom: var(--size-12);
@@ -221,7 +221,7 @@
221
221
  grid-template-areas: "body";
222
222
  }
223
223
  }
224
- @container (max-width: 296px) {
224
+ @container (max-width: 290px) {
225
225
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
226
226
  grid-template-columns: auto 1fr;
227
227
  grid-template-rows: auto auto auto;
package/build/styles/main.css CHANGED
@@ -2640,7 +2640,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
2640
2640
  gap: 4px 16px;
2641
2641
  gap: var(--size-4) var(--size-16);
2642
2642
  }
2643
- @container (min-width: 375px) {
2643
+ @container (min-width: 380px) {
2644
2644
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
2645
2645
  grid-template-columns: auto 1fr auto;
2646
2646
  grid-template-rows: auto auto auto;
@@ -2728,7 +2728,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
2728
2728
  grid-template-areas: "body";
2729
2729
  }
2730
2730
  }
2731
- @container (min-width: 297px) and (max-width: 375px) {
2731
+ @container (min-width: 290px) and (max-width: 380px) {
2732
2732
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl .wds-list-item-media {
2733
2733
  margin-bottom: 12px;
2734
2734
  margin-bottom: var(--size-12);
@@ -2856,7 +2856,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
2856
2856
  grid-template-areas: "body";
2857
2857
  }
2858
2858
  }
2859
- @container (max-width: 296px) {
2859
+ @container (max-width: 290px) {
2860
2860
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
2861
2861
  grid-template-columns: auto 1fr;
2862
2862
  grid-template-rows: auto auto auto;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@transferwise/components",
3
- "version": "0.0.0-experimental-2b7bcad",
3
+ "version": "0.0.0-experimental-1467862",
4
4
  "description": "Neptune React components",
5
5
  "license": "Apache-2.0",
6
6
  "repository": {
@@ -84,9 +84,9 @@
84
84
  "storybook-addon-tag-badges": "^2.0.1",
85
85
  "storybook-addon-test-codegen": "^2.0.1",
86
86
  "@transferwise/less-config": "3.1.2",
87
- "@transferwise/neptune-css": "14.24.5",
88
87
  "@wise/components-theming": "1.6.4",
89
- "@wise/wds-configs": "0.0.0"
88
+ "@wise/wds-configs": "0.0.0",
89
+ "@transferwise/neptune-css": "14.24.5"
90
90
  },
91
91
  "peerDependencies": {
92
92
  "@transferwise/icons": "^3.22.3",
package/src/listItem/ListItem.css CHANGED
@@ -5,7 +5,7 @@
5
5
  gap: 4px 16px;
6
6
  gap: var(--size-4) var(--size-16);
7
7
  }
8
- @container (min-width: 375px) {
8
+ @container (min-width: 380px) {
9
9
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
10
10
  grid-template-columns: auto 1fr auto;
11
11
  grid-template-rows: auto auto auto;
@@ -93,7 +93,7 @@
93
93
  grid-template-areas: "body";
94
94
  }
95
95
  }
96
- @container (min-width: 297px) and (max-width: 375px) {
96
+ @container (min-width: 290px) and (max-width: 380px) {
97
97
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl .wds-list-item-media {
98
98
  margin-bottom: 12px;
99
99
  margin-bottom: var(--size-12);
@@ -221,7 +221,7 @@
221
221
  grid-template-areas: "body";
222
222
  }
223
223
  }
224
- @container (max-width: 296px) {
224
+ @container (max-width: 290px) {
225
225
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
226
226
  grid-template-columns: auto 1fr;
227
227
  grid-template-rows: auto auto auto;
package/src/listItem/ListItem.grid.css CHANGED
@@ -5,7 +5,7 @@
5
5
  gap: 4px 16px;
6
6
  gap: var(--size-4) var(--size-16);
7
7
  }
8
- @container (min-width: 375px) {
8
+ @container (min-width: 380px) {
9
9
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
10
10
  grid-template-columns: auto 1fr auto;
11
11
  grid-template-rows: auto auto auto;
@@ -93,7 +93,7 @@
93
93
  grid-template-areas: "body";
94
94
  }
95
95
  }
96
- @container (min-width: 297px) and (max-width: 375px) {
96
+ @container (min-width: 290px) and (max-width: 380px) {
97
97
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl .wds-list-item-media {
98
98
  margin-bottom: 12px;
99
99
  margin-bottom: var(--size-12);
@@ -221,7 +221,7 @@
221
221
  grid-template-areas: "body";
222
222
  }
223
223
  }
224
- @container (max-width: 296px) {
224
+ @container (max-width: 290px) {
225
225
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
226
226
  grid-template-columns: auto 1fr;
227
227
  grid-template-rows: auto auto auto;
package/src/listItem/ListItem.grid.less CHANGED
@@ -3,7 +3,7 @@
3
3
  display: grid;
4
4
  gap: var(--size-4) var(--size-16);
5
5
 
6
- @container (min-width: 375px) {
6
+ @container (min-width: 380px) {
7
7
  &.wds-list-item-hasMedia-hasControl {
8
8
  &.wds-list-item-hasInfo-hasPrompt {
9
9
  grid-template-columns: auto 1fr auto;
@@ -149,7 +149,7 @@
149
149
  }
150
150
  }
151
151
 
152
- @container (min-width: 297px) and (max-width: 375px) {
152
+ @container (min-width: 290px) and (max-width: 380px) {
153
153
  &.wds-list-item-hasMedia-hasControl {
154
154
  .wds-list-item-media {
155
155
  margin-bottom: var(--size-12);
@@ -378,7 +378,7 @@
378
378
  }
379
379
  }
380
380
 
381
- @container (max-width: 296px) {
381
+ @container (max-width: 290px) {
382
382
  &.wds-list-item-hasMedia-hasControl {
383
383
  &.wds-list-item-hasInfo-hasPrompt {
384
384
  grid-template-columns: auto 1fr;
package/src/listItem/_stories/ListItem.story.tsx CHANGED
@@ -277,9 +277,9 @@ export const Responsiveness: Story = {
277
277
  return (
278
278
  <ol
279
279
  className="list-unstyled"
280
- style={{ display: 'grid', gridTemplateColumns: '320px 360px 400px', gap: 16 }}
280
+ style={{ display: 'grid', gridTemplateColumns: '290px 350px 381px', gap: 16 }}
281
281
  >
282
- <div style={{ width: '320px' }}>
282
+ <div style={{ width: '290px' }}>
283
283
  <ListItem
284
284
  {...args}
285
285
  subtitle={lorem10}
@@ -289,7 +289,7 @@ export const Responsiveness: Story = {
289
289
  prompt={PROMPTS.interactive}
290
290
  />
291
291
  </div>
292
- <div style={{ width: '360px' }}>
292
+ <div style={{ width: '350px' }}>
293
293
  <ListItem
294
294
  {...args}
295
295
  subtitle={lorem10}
@@ -299,7 +299,7 @@ export const Responsiveness: Story = {
299
299
  prompt={PROMPTS.interactive}
300
300
  />
301
301
  </div>
302
- <div style={{ width: '400px' }}>
302
+ <div style={{ width: '381px' }}>
303
303
  <ListItem
304
304
  {...args}
305
305
  subtitle={lorem10}
package/src/main.css CHANGED
@@ -2640,7 +2640,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
2640
2640
  gap: 4px 16px;
2641
2641
  gap: var(--size-4) var(--size-16);
2642
2642
  }
2643
- @container (min-width: 375px) {
2643
+ @container (min-width: 380px) {
2644
2644
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
2645
2645
  grid-template-columns: auto 1fr auto;
2646
2646
  grid-template-rows: auto auto auto;
@@ -2728,7 +2728,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
2728
2728
  grid-template-areas: "body";
2729
2729
  }
2730
2730
  }
2731
- @container (min-width: 297px) and (max-width: 375px) {
2731
+ @container (min-width: 290px) and (max-width: 380px) {
2732
2732
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl .wds-list-item-media {
2733
2733
  margin-bottom: 12px;
2734
2734
  margin-bottom: var(--size-12);
@@ -2856,7 +2856,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
2856
2856
  grid-template-areas: "body";
2857
2857
  }
2858
2858
  }
2859
- @container (max-width: 296px) {
2859
+ @container (max-width: 290px) {
2860
2860
  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
2861
2861
  grid-template-columns: auto 1fr;
2862
2862
  grid-template-rows: auto auto auto;