@transferwise/components 0.0.0-experimental-6fd476f → 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.
- package/build/main.css +28 -2
- package/build/styles/item/Item.css +28 -2
- package/build/styles/main.css +28 -2
- package/build/types/item/Item.d.ts +1 -1
- package/build/types/item/Item.d.ts.map +1 -1
- package/build/types/item/Item.types.d.ts +1 -1
- package/build/types/item/Item.types.d.ts.map +1 -1
- package/package.json +3 -3
- package/src/item/Item.css +28 -2
- package/src/item/Item.less +24 -2
- package/src/item/Item.story.tsx +53 -14
- package/src/item/Item.tsx +6 -5
- package/src/item/Item.types.ts +1 -2
- 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:
|
|
2632
|
-
border-radius: var(--radius-
|
|
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;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
.item {
|
|
2
2
|
padding: 16px;
|
|
3
|
-
border-radius:
|
|
4
|
-
border-radius: var(--radius-
|
|
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:
|
|
2632
|
-
border-radius: var(--radius-
|
|
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;
|
|
@@ -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
|
|
@@ -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,
|
|
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"}
|
|
@@ -4,7 +4,6 @@ export type ItemTypes = 'NonInteractive' | 'Navigation' | 'Radio' | 'Checkbox' |
|
|
|
4
4
|
export type EndValueProps = {
|
|
5
5
|
title?: string;
|
|
6
6
|
subtitle?: string;
|
|
7
|
-
inverted?: boolean;
|
|
8
7
|
sentiment?: Sentiment.POSITIVE | Sentiment.NEGATIVE;
|
|
9
8
|
strikethrough?: boolean;
|
|
10
9
|
bold?: boolean;
|
|
@@ -19,5 +18,6 @@ export interface ItemProps {
|
|
|
19
18
|
additionalInfo?: string;
|
|
20
19
|
inverted?: boolean;
|
|
21
20
|
endValue?: EndValueProps;
|
|
21
|
+
spotlight?: 'active' | 'inactive';
|
|
22
22
|
}
|
|
23
23
|
//# sourceMappingURL=Item.types.d.ts.map
|
|
@@ -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,
|
|
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-
|
|
3
|
+
"version": "0.0.0-experimental-2dad06c",
|
|
4
4
|
"description": "Neptune React components",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"repository": {
|
|
@@ -91,9 +91,9 @@
|
|
|
91
91
|
"rollup": "^4.18.1",
|
|
92
92
|
"rollup-preserve-directives": "^1.1.1",
|
|
93
93
|
"storybook": "^8.2.2",
|
|
94
|
+
"@transferwise/less-config": "3.1.0",
|
|
94
95
|
"@transferwise/neptune-css": "14.22.0",
|
|
95
|
-
"@wise/components-theming": "1.6.1"
|
|
96
|
-
"@transferwise/less-config": "3.1.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:
|
|
4
|
-
border-radius: var(--radius-
|
|
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-
|
|
3
|
+
border-radius: var(--radius-large);
|
|
4
4
|
background-color: var(--color-background-screen);
|
|
5
5
|
display: flex;
|
|
6
6
|
gap: 16px;
|
|
@@ -19,8 +19,30 @@
|
|
|
19
19
|
&:active {
|
|
20
20
|
background-color: var(--color-background-screen-active);
|
|
21
21
|
}
|
|
22
|
-
|
|
22
|
+
// spotlight - improve naming
|
|
23
|
+
&.active {
|
|
24
|
+
background-color: var(--color-background-neutral);
|
|
23
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
|
+
}
|
|
44
|
+
}
|
|
45
|
+
// all inverted logic can be way simpler
|
|
24
46
|
.item-media {
|
|
25
47
|
flex: 0 0 auto;
|
|
26
48
|
align-items: flex-start;
|
package/src/item/Item.story.tsx
CHANGED
|
@@ -26,13 +26,13 @@ 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
|
},
|
|
32
33
|
mediaSize: 48,
|
|
33
34
|
endValueTitle: '427,386.39 JPY',
|
|
34
35
|
endValueSubtitle: '2197.06 GBP',
|
|
35
|
-
endValueInverted: false,
|
|
36
36
|
endValueStrikethrough: false,
|
|
37
37
|
endValueSentiment: undefined,
|
|
38
38
|
},
|
|
@@ -80,24 +80,30 @@ export const Playground: Story = {
|
|
|
80
80
|
inverted: {
|
|
81
81
|
control: 'boolean',
|
|
82
82
|
table: {
|
|
83
|
-
category: '
|
|
83
|
+
category: 'Global Control',
|
|
84
84
|
},
|
|
85
85
|
},
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
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
|
+
},
|
|
89
95
|
table: {
|
|
90
|
-
category: '
|
|
96
|
+
category: 'Global Control',
|
|
91
97
|
},
|
|
92
98
|
},
|
|
93
|
-
|
|
99
|
+
endValueTitle: {
|
|
94
100
|
control: 'text',
|
|
95
101
|
table: {
|
|
96
102
|
category: 'End Value Controls',
|
|
97
103
|
},
|
|
98
104
|
},
|
|
99
|
-
|
|
100
|
-
control: '
|
|
105
|
+
endValueSubtitle: {
|
|
106
|
+
control: 'text',
|
|
101
107
|
table: {
|
|
102
108
|
category: 'End Value Controls',
|
|
103
109
|
},
|
|
@@ -128,7 +134,6 @@ export const Playground: Story = {
|
|
|
128
134
|
media,
|
|
129
135
|
endValueTitle,
|
|
130
136
|
endValueSubtitle,
|
|
131
|
-
endValueInverted,
|
|
132
137
|
endValueStrikethrough,
|
|
133
138
|
endValueSentiment,
|
|
134
139
|
...restProps
|
|
@@ -144,10 +149,10 @@ export const Playground: Story = {
|
|
|
144
149
|
value: React.cloneElement(media.value, { size: mediaSize }),
|
|
145
150
|
}
|
|
146
151
|
}
|
|
152
|
+
spotlight={restProps.spotlight}
|
|
147
153
|
endValue={{
|
|
148
154
|
title: endValueTitle,
|
|
149
155
|
subtitle: endValueSubtitle,
|
|
150
|
-
inverted: endValueInverted,
|
|
151
156
|
strikethrough: endValueStrikethrough,
|
|
152
157
|
sentiment: endValueSentiment,
|
|
153
158
|
}}
|
|
@@ -190,7 +195,7 @@ export const Variants: Story = {
|
|
|
190
195
|
additionalInfo="Additional Info"
|
|
191
196
|
inverted
|
|
192
197
|
media={{ value: <AvatarView size={48} profileName="H D" /> }}
|
|
193
|
-
endValue={{ title: 'Title Inverted', subtitle: 'Subtitle'
|
|
198
|
+
endValue={{ title: 'Title Inverted', subtitle: 'Subtitle' }}
|
|
194
199
|
/>
|
|
195
200
|
<Item
|
|
196
201
|
type="Radio"
|
|
@@ -198,15 +203,49 @@ export const Variants: Story = {
|
|
|
198
203
|
subtitle="Subtitle"
|
|
199
204
|
inverted
|
|
200
205
|
media={{ value: <AvatarView size={56} profileName="H D" /> }}
|
|
201
|
-
endValue={{ title: 'Title Inverted'
|
|
206
|
+
endValue={{ title: 'Title Inverted' }}
|
|
202
207
|
/>
|
|
203
208
|
<Item
|
|
204
209
|
type="IconButton"
|
|
205
210
|
title="Title Inverted"
|
|
206
211
|
inverted
|
|
207
212
|
media={{ value: <AvatarView size={72} profileName="H D" /> }}
|
|
208
|
-
endValue={{ subtitle: 'Subtitle Inverted'
|
|
213
|
+
endValue={{ subtitle: 'Subtitle Inverted' }}
|
|
209
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>
|
|
210
249
|
</>
|
|
211
250
|
),
|
|
212
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=
|
|
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
|
|
@@ -69,14 +70,14 @@ export const Item = ({
|
|
|
69
70
|
className={`endValue ${endValue.sentiment} ${endValue.strikethrough ? 'strikethrough' : ''}`}
|
|
70
71
|
>
|
|
71
72
|
<Body
|
|
72
|
-
className={!
|
|
73
|
-
type={!
|
|
73
|
+
className={!inverted ? 'item-title' : endValue.sentiment}
|
|
74
|
+
type={!inverted ? Typography.BODY_LARGE_BOLD : Typography.BODY_DEFAULT}
|
|
74
75
|
>
|
|
75
76
|
{endValue.title}
|
|
76
77
|
</Body>
|
|
77
78
|
<Body
|
|
78
|
-
className={
|
|
79
|
-
type={!
|
|
79
|
+
className={inverted ? 'item-title' : endValue.sentiment}
|
|
80
|
+
type={!inverted ? Typography.BODY_DEFAULT : Typography.BODY_LARGE_BOLD}
|
|
80
81
|
>
|
|
81
82
|
{endValue.subtitle}
|
|
82
83
|
</Body>
|
package/src/item/Item.types.ts
CHANGED
|
@@ -13,7 +13,6 @@ export type ItemTypes =
|
|
|
13
13
|
export type EndValueProps = {
|
|
14
14
|
title?: string;
|
|
15
15
|
subtitle?: string;
|
|
16
|
-
inverted?: boolean;
|
|
17
16
|
sentiment?: Sentiment.POSITIVE | Sentiment.NEGATIVE;
|
|
18
17
|
strikethrough?: boolean;
|
|
19
18
|
bold?: boolean;
|
|
@@ -31,8 +30,8 @@ export interface ItemProps {
|
|
|
31
30
|
additionalInfo?: string;
|
|
32
31
|
inverted?: boolean;
|
|
33
32
|
endValue?: EndValueProps;
|
|
33
|
+
spotlight?: 'active' | 'inactive';
|
|
34
34
|
// prompt?: any; // a lot of work to do here. start with this?
|
|
35
|
-
// spotlight?: 'Active' | 'Inactive';
|
|
36
35
|
// children?: ReactNode;
|
|
37
36
|
}
|
|
38
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:
|
|
2632
|
-
border-radius: var(--radius-
|
|
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;
|