@transferwise/components 0.0.0-experimental-85a752f → 0.0.0-experimental-2dad06c

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 (14) hide show
  1. package/build/main.css +28 -2
  2. package/build/styles/item/Item.css +28 -2
  3. package/build/styles/main.css +28 -2
  4. package/build/types/item/Item.d.ts +1 -1
  5. package/build/types/item/Item.d.ts.map +1 -1
  6. package/build/types/item/Item.types.d.ts +1 -0
  7. package/build/types/item/Item.types.d.ts.map +1 -1
  8. package/package.json +3 -3
  9. package/src/item/Item.css +28 -2
  10. package/src/item/Item.less +23 -1
  11. package/src/item/Item.story.tsx +49 -1
  12. package/src/item/Item.tsx +2 -1
  13. package/src/item/Item.types.ts +1 -1
  14. package/src/main.css +28 -2
package/build/main.css CHANGED
@@ -2628,8 +2628,8 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
2628
2628
  }
2629
2629
  .item {
2630
2630
  padding: 16px;
2631
- border-radius: 16px;
2632
- border-radius: var(--radius-medium);
2631
+ border-radius: 24px;
2632
+ border-radius: var(--radius-large);
2633
2633
  background-color: #ffffff;
2634
2634
  background-color: var(--color-background-screen);
2635
2635
  display: flex;
@@ -2647,6 +2647,32 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
2647
2647
  .item:active {
2648
2648
  background-color: var(--color-background-screen-active);
2649
2649
  }
2650
+ .item.active {
2651
+ background-color: rgba(134,167,189,0.10196);
2652
+ background-color: var(--color-background-neutral);
2653
+ }
2654
+ .item.active:hover {
2655
+ background-color: var(--color-background-neutral-hover);
2656
+ }
2657
+ .item.active:active {
2658
+ background-color: var(--color-background-neutral-active);
2659
+ }
2660
+ .item.inactive {
2661
+ background-color: rgba(134, 167, 189, 0.025);
2662
+ border: 1px dashed rgba(0,0,0,0.10196);
2663
+ border: 1px dashed var(--color-border-neutral);
2664
+ }
2665
+ @supports (color: color-mix(in lch, red, blue)) {
2666
+ .item.inactive {
2667
+ background-color: color-mix(in srgb, var(--color-background-neutral) 25%, transparent);
2668
+ }
2669
+ }
2670
+ .item.inactive:hover {
2671
+ background-color: color-mix(in srgb, var(--color-background-neutral-hover) 25%, transparent);
2672
+ }
2673
+ .item.inactive:active {
2674
+ background-color: color-mix(in srgb, var(--color-background-neutral-active) 25%, transparent);
2675
+ }
2650
2676
  .item-media {
2651
2677
  flex: 0 0 auto;
2652
2678
  align-items: flex-start;
package/build/styles/item/Item.css CHANGED
@@ -1,7 +1,7 @@
1
1
  .item {
2
2
  padding: 16px;
3
- border-radius: 16px;
4
- border-radius: var(--radius-medium);
3
+ border-radius: 24px;
4
+ border-radius: var(--radius-large);
5
5
  background-color: #ffffff;
6
6
  background-color: var(--color-background-screen);
7
7
  display: flex;
@@ -19,6 +19,32 @@
19
19
  .item:active {
20
20
  background-color: var(--color-background-screen-active);
21
21
  }
22
+ .item.active {
23
+ background-color: rgba(134,167,189,0.10196);
24
+ background-color: var(--color-background-neutral);
25
+ }
26
+ .item.active:hover {
27
+ background-color: var(--color-background-neutral-hover);
28
+ }
29
+ .item.active:active {
30
+ background-color: var(--color-background-neutral-active);
31
+ }
32
+ .item.inactive {
33
+ background-color: rgba(134, 167, 189, 0.025);
34
+ border: 1px dashed rgba(0,0,0,0.10196);
35
+ border: 1px dashed var(--color-border-neutral);
36
+ }
37
+ @supports (color: color-mix(in lch, red, blue)) {
38
+ .item.inactive {
39
+ background-color: color-mix(in srgb, var(--color-background-neutral) 25%, transparent);
40
+ }
41
+ }
42
+ .item.inactive:hover {
43
+ background-color: color-mix(in srgb, var(--color-background-neutral-hover) 25%, transparent);
44
+ }
45
+ .item.inactive:active {
46
+ background-color: color-mix(in srgb, var(--color-background-neutral-active) 25%, transparent);
47
+ }
22
48
  .item-media {
23
49
  flex: 0 0 auto;
24
50
  align-items: flex-start;
package/build/styles/main.css CHANGED
@@ -2628,8 +2628,8 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
2628
2628
  }
2629
2629
  .item {
2630
2630
  padding: 16px;
2631
- border-radius: 16px;
2632
- border-radius: var(--radius-medium);
2631
+ border-radius: 24px;
2632
+ border-radius: var(--radius-large);
2633
2633
  background-color: #ffffff;
2634
2634
  background-color: var(--color-background-screen);
2635
2635
  display: flex;
@@ -2647,6 +2647,32 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
2647
2647
  .item:active {
2648
2648
  background-color: var(--color-background-screen-active);
2649
2649
  }
2650
+ .item.active {
2651
+ background-color: rgba(134,167,189,0.10196);
2652
+ background-color: var(--color-background-neutral);
2653
+ }
2654
+ .item.active:hover {
2655
+ background-color: var(--color-background-neutral-hover);
2656
+ }
2657
+ .item.active:active {
2658
+ background-color: var(--color-background-neutral-active);
2659
+ }
2660
+ .item.inactive {
2661
+ background-color: rgba(134, 167, 189, 0.025);
2662
+ border: 1px dashed rgba(0,0,0,0.10196);
2663
+ border: 1px dashed var(--color-border-neutral);
2664
+ }
2665
+ @supports (color: color-mix(in lch, red, blue)) {
2666
+ .item.inactive {
2667
+ background-color: color-mix(in srgb, var(--color-background-neutral) 25%, transparent);
2668
+ }
2669
+ }
2670
+ .item.inactive:hover {
2671
+ background-color: color-mix(in srgb, var(--color-background-neutral-hover) 25%, transparent);
2672
+ }
2673
+ .item.inactive:active {
2674
+ background-color: color-mix(in srgb, var(--color-background-neutral-active) 25%, transparent);
2675
+ }
2650
2676
  .item-media {
2651
2677
  flex: 0 0 auto;
2652
2678
  align-items: flex-start;
package/build/types/item/Item.d.ts CHANGED
@@ -1,3 +1,3 @@
1
1
  import { ItemProps } from './Item.types';
2
- export declare const Item: ({ type, title, subtitle, additionalInfo, inverted, media, endValue, }: ItemProps) => import("react").JSX.Element;
2
+ export declare const Item: ({ type, title, subtitle, additionalInfo, inverted, media, spotlight, endValue, }: ItemProps) => import("react").JSX.Element;
3
3
  //# sourceMappingURL=Item.d.ts.map
package/build/types/item/Item.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Item.d.ts","sourceRoot":"","sources":["../../../src/item/Item.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAIzC,eAAO,MAAM,IAAI,0EAQd,SAAS,gCAmEX,CAAC"}
1
+ {"version":3,"file":"Item.d.ts","sourceRoot":"","sources":["../../../src/item/Item.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAIzC,eAAO,MAAM,IAAI,qFASd,SAAS,gCAmEX,CAAC"}
package/build/types/item/Item.types.d.ts CHANGED
@@ -18,5 +18,6 @@ export interface ItemProps {
18
18
  additionalInfo?: string;
19
19
  inverted?: boolean;
20
20
  endValue?: EndValueProps;
21
+ spotlight?: 'active' | 'inactive';
21
22
  }
22
23
  //# sourceMappingURL=Item.types.d.ts.map
package/build/types/item/Item.types.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Item.types.d.ts","sourceRoot":"","sources":["../../../src/item/Item.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAEtC,MAAM,MAAM,SAAS,GACjB,gBAAgB,GAChB,YAAY,GACZ,OAAO,GACP,UAAU,GACV,QAAQ,GACR,QAAQ,GACR,YAAY,CAAC;AAEjB,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,SAAS,CAAC,QAAQ,GAAG,SAAS,CAAC,QAAQ,CAAC;IACpD,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB,CAAC;AAEF,MAAM,WAAW,SAAS;IACxB,IAAI,EAAE,SAAS,CAAC;IAEhB,KAAK,CAAC,EAAE;QAEN,KAAK,EAAE,SAAS,CAAC;KAClB,CAAC;IACF,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,aAAa,CAAC;CAI1B"}
1
+ {"version":3,"file":"Item.types.d.ts","sourceRoot":"","sources":["../../../src/item/Item.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAEtC,MAAM,MAAM,SAAS,GACjB,gBAAgB,GAChB,YAAY,GACZ,OAAO,GACP,UAAU,GACV,QAAQ,GACR,QAAQ,GACR,YAAY,CAAC;AAEjB,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,SAAS,CAAC,QAAQ,GAAG,SAAS,CAAC,QAAQ,CAAC;IACpD,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB,CAAC;AAEF,MAAM,WAAW,SAAS;IACxB,IAAI,EAAE,SAAS,CAAC;IAEhB,KAAK,CAAC,EAAE;QAEN,KAAK,EAAE,SAAS,CAAC;KAClB,CAAC;IACF,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,aAAa,CAAC;IACzB,SAAS,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAC;CAGnC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@transferwise/components",
3
- "version": "0.0.0-experimental-85a752f",
3
+ "version": "0.0.0-experimental-2dad06c",
4
4
  "description": "Neptune React components",
5
5
  "license": "Apache-2.0",
6
6
  "repository": {
@@ -92,8 +92,8 @@
92
92
  "rollup-preserve-directives": "^1.1.1",
93
93
  "storybook": "^8.2.2",
94
94
  "@transferwise/less-config": "3.1.0",
95
- "@wise/components-theming": "1.6.1",
96
- "@transferwise/neptune-css": "14.22.0"
95
+ "@transferwise/neptune-css": "14.22.0",
96
+ "@wise/components-theming": "1.6.1"
97
97
  },
98
98
  "peerDependencies": {
99
99
  "@transferwise/icons": "^3.13.1",
package/src/item/Item.css CHANGED
@@ -1,7 +1,7 @@
1
1
  .item {
2
2
  padding: 16px;
3
- border-radius: 16px;
4
- border-radius: var(--radius-medium);
3
+ border-radius: 24px;
4
+ border-radius: var(--radius-large);
5
5
  background-color: #ffffff;
6
6
  background-color: var(--color-background-screen);
7
7
  display: flex;
@@ -19,6 +19,32 @@
19
19
  .item:active {
20
20
  background-color: var(--color-background-screen-active);
21
21
  }
22
+ .item.active {
23
+ background-color: rgba(134,167,189,0.10196);
24
+ background-color: var(--color-background-neutral);
25
+ }
26
+ .item.active:hover {
27
+ background-color: var(--color-background-neutral-hover);
28
+ }
29
+ .item.active:active {
30
+ background-color: var(--color-background-neutral-active);
31
+ }
32
+ .item.inactive {
33
+ background-color: rgba(134, 167, 189, 0.025);
34
+ border: 1px dashed rgba(0,0,0,0.10196);
35
+ border: 1px dashed var(--color-border-neutral);
36
+ }
37
+ @supports (color: color-mix(in lch, red, blue)) {
38
+ .item.inactive {
39
+ background-color: color-mix(in srgb, var(--color-background-neutral) 25%, transparent);
40
+ }
41
+ }
42
+ .item.inactive:hover {
43
+ background-color: color-mix(in srgb, var(--color-background-neutral-hover) 25%, transparent);
44
+ }
45
+ .item.inactive:active {
46
+ background-color: color-mix(in srgb, var(--color-background-neutral-active) 25%, transparent);
47
+ }
22
48
  .item-media {
23
49
  flex: 0 0 auto;
24
50
  align-items: flex-start;
package/src/item/Item.less CHANGED
@@ -1,6 +1,6 @@
1
1
  .item {
2
2
  padding: 16px;
3
- border-radius: var(--radius-medium);
3
+ border-radius: var(--radius-large);
4
4
  background-color: var(--color-background-screen);
5
5
  display: flex;
6
6
  gap: 16px;
@@ -19,6 +19,28 @@
19
19
  &:active {
20
20
  background-color: var(--color-background-screen-active);
21
21
  }
22
+ // spotlight - improve naming
23
+ &.active {
24
+ background-color: var(--color-background-neutral);
25
+
26
+ &:hover {
27
+ background-color: var(--color-background-neutral-hover);
28
+ }
29
+ &:active {
30
+ background-color: var(--color-background-neutral-active);
31
+ }
32
+ }
33
+ &.inactive {
34
+ background-color: color-mix(in srgb, var(--color-background-neutral) 25%, transparent);
35
+ border: 1px dashed var(--color-border-neutral);
36
+
37
+ &:hover {
38
+ background-color: color-mix(in srgb, var(--color-background-neutral-hover) 25%, transparent);
39
+ }
40
+ &:active {
41
+ background-color: color-mix(in srgb, var(--color-background-neutral-active) 25%, transparent);
42
+ }
43
+ }
22
44
  }
23
45
  // all inverted logic can be way simpler
24
46
  .item-media {
package/src/item/Item.story.tsx CHANGED
@@ -26,6 +26,7 @@ export default {
26
26
  subtitle: 'Subtitle',
27
27
  additionalInfo: 'Additional Info',
28
28
  inverted: false,
29
+ spotlight: undefined,
29
30
  media: {
30
31
  value: <AvatarView profileName="H D" />,
31
32
  },
@@ -82,7 +83,19 @@ export const Playground: Story = {
82
83
  category: 'Global Control',
83
84
  },
84
85
  },
85
-
86
+ spotlight: {
87
+ control: 'radio',
88
+ options: ['ACTIVE', 'INACTIVE', 'none'],
89
+ defaultValue: 'none',
90
+ mapping: {
91
+ ACTIVE: 'active',
92
+ INACTIVE: 'inactive',
93
+ none: undefined,
94
+ },
95
+ table: {
96
+ category: 'Global Control',
97
+ },
98
+ },
86
99
  endValueTitle: {
87
100
  control: 'text',
88
101
  table: {
@@ -136,6 +149,7 @@ export const Playground: Story = {
136
149
  value: React.cloneElement(media.value, { size: mediaSize }),
137
150
  }
138
151
  }
152
+ spotlight={restProps.spotlight}
139
153
  endValue={{
140
154
  title: endValueTitle,
141
155
  subtitle: endValueSubtitle,
@@ -198,6 +212,40 @@ export const Variants: Story = {
198
212
  media={{ value: <AvatarView size={72} profileName="H D" /> }}
199
213
  endValue={{ subtitle: 'Subtitle Inverted' }}
200
214
  />
215
+ <br />
216
+ <div className="p-b-1">
217
+ <Item
218
+ type="Navigation"
219
+ spotlight="active"
220
+ title="Title Inverted"
221
+ subtitle="Subtitle"
222
+ additionalInfo="Additional Info"
223
+ media={{ value: <AvatarView size={48} profileName="H D" /> }}
224
+ endValue={{ title: 'Title', subtitle: 'Subtitle' }}
225
+ />
226
+ </div>
227
+ <div className="p-b-1">
228
+ <Item
229
+ type="Navigation"
230
+ spotlight="inactive"
231
+ title="Title Inverted"
232
+ subtitle="Subtitle"
233
+ additionalInfo="Additional Info"
234
+ media={{ value: <AvatarView size={48} profileName="H D" /> }}
235
+ endValue={{ title: 'Title', subtitle: 'Subtitle' }}
236
+ />
237
+ </div>
238
+ <div className="p-b-1">
239
+ <Item
240
+ type="Navigation"
241
+ spotlight="inactive"
242
+ title="Title Inverted"
243
+ subtitle="Subtitle"
244
+ additionalInfo="Additional Info"
245
+ media={{ value: <AvatarView size={48} profileName="H D" /> }}
246
+ endValue={{ title: 'Title', subtitle: 'Subtitle' }}
247
+ />
248
+ </div>
201
249
  </>
202
250
  ),
203
251
  };
package/src/item/Item.tsx CHANGED
@@ -17,6 +17,7 @@ export const Item = ({
17
17
  additionalInfo,
18
18
  inverted,
19
19
  media,
20
+ spotlight,
20
21
  endValue,
21
22
  }: ItemProps) => {
22
23
  const returnType = (): ReactNode => {
@@ -45,7 +46,7 @@ export const Item = ({
45
46
 
46
47
  // clean up how classes are applied
47
48
  return (
48
- <div className={`item ${inverted ? 'inverted' : ''}`}>
49
+ <div className={`item ${inverted ? 'inverted' : ''} ${spotlight}`}>
49
50
  {media && <div className="item-media">{media?.value}</div>}
50
51
  <div className="startValue">
51
52
  <Body
package/src/item/Item.types.ts CHANGED
@@ -30,8 +30,8 @@ export interface ItemProps {
30
30
  additionalInfo?: string;
31
31
  inverted?: boolean;
32
32
  endValue?: EndValueProps;
33
+ spotlight?: 'active' | 'inactive';
33
34
  // prompt?: any; // a lot of work to do here. start with this?
34
- // spotlight?: 'Active' | 'Inactive';
35
35
  // children?: ReactNode;
36
36
  }
37
37
 
package/src/main.css CHANGED
@@ -2628,8 +2628,8 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
2628
2628
  }
2629
2629
  .item {
2630
2630
  padding: 16px;
2631
- border-radius: 16px;
2632
- border-radius: var(--radius-medium);
2631
+ border-radius: 24px;
2632
+ border-radius: var(--radius-large);
2633
2633
  background-color: #ffffff;
2634
2634
  background-color: var(--color-background-screen);
2635
2635
  display: flex;
@@ -2647,6 +2647,32 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
2647
2647
  .item:active {
2648
2648
  background-color: var(--color-background-screen-active);
2649
2649
  }
2650
+ .item.active {
2651
+ background-color: rgba(134,167,189,0.10196);
2652
+ background-color: var(--color-background-neutral);
2653
+ }
2654
+ .item.active:hover {
2655
+ background-color: var(--color-background-neutral-hover);
2656
+ }
2657
+ .item.active:active {
2658
+ background-color: var(--color-background-neutral-active);
2659
+ }
2660
+ .item.inactive {
2661
+ background-color: rgba(134, 167, 189, 0.025);
2662
+ border: 1px dashed rgba(0,0,0,0.10196);
2663
+ border: 1px dashed var(--color-border-neutral);
2664
+ }
2665
+ @supports (color: color-mix(in lch, red, blue)) {
2666
+ .item.inactive {
2667
+ background-color: color-mix(in srgb, var(--color-background-neutral) 25%, transparent);
2668
+ }
2669
+ }
2670
+ .item.inactive:hover {
2671
+ background-color: color-mix(in srgb, var(--color-background-neutral-hover) 25%, transparent);
2672
+ }
2673
+ .item.inactive:active {
2674
+ background-color: color-mix(in srgb, var(--color-background-neutral-active) 25%, transparent);
2675
+ }
2650
2676
  .item-media {
2651
2677
  flex: 0 0 auto;
2652
2678
  align-items: flex-start;