@transferwise/components 0.0.0-experimental-e3978a5 → 0.0.0-experimental-e46526a
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/listItem/ListItem.js +1 -5
- package/build/listItem/ListItem.js.map +1 -1
- package/build/listItem/ListItem.mjs +1 -5
- package/build/listItem/ListItem.mjs.map +1 -1
- package/build/main.css +157 -157
- package/build/styles/listItem/ListItem.css +157 -157
- package/build/styles/listItem/Prompt/ListItemPrompt.css +157 -0
- package/build/styles/main.css +157 -157
- package/build/types/listItem/ListItem.d.ts +1 -3
- package/build/types/listItem/ListItem.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/listItem/ListItem.css +157 -157
- package/src/listItem/ListItem.less +1 -135
- package/src/listItem/ListItem.spec.tsx +0 -10
- package/src/listItem/ListItem.tsx +0 -6
- package/src/listItem/Prompt/ListItemPrompt.css +157 -0
- package/src/listItem/Prompt/ListItemPrompt.less +134 -0
- package/src/listItem/_stories/ListItem.story.tsx +0 -2
- package/src/main.css +157 -157
package/src/main.css
CHANGED
|
@@ -3005,6 +3005,163 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
|
|
|
3005
3005
|
text-align: left;
|
|
3006
3006
|
}
|
|
3007
3007
|
}
|
|
3008
|
+
.wds-list-item-prompt {
|
|
3009
|
+
grid-area: prompt;
|
|
3010
|
+
display: inline-flex;
|
|
3011
|
+
justify-self: start;
|
|
3012
|
+
text-align: left;
|
|
3013
|
+
padding-top: calc(8px / 2);
|
|
3014
|
+
padding-top: calc(var(--padding-x-small) / 2);
|
|
3015
|
+
padding-bottom: calc(8px / 2);
|
|
3016
|
+
padding-bottom: calc(var(--padding-x-small) / 2);
|
|
3017
|
+
padding-left: calc(8px - 1px);
|
|
3018
|
+
padding-left: calc(var(--padding-x-small) - 1px);
|
|
3019
|
+
padding-right: 8px;
|
|
3020
|
+
padding-right: var(--padding-x-small);
|
|
3021
|
+
border-radius: 10px;
|
|
3022
|
+
border-radius: var(--radius-small);
|
|
3023
|
+
word-break: break-word;
|
|
3024
|
+
word-wrap: break-word;
|
|
3025
|
+
}
|
|
3026
|
+
.wds-list-item-prompt:has(a),
|
|
3027
|
+
.wds-list-item-prompt:has(button) {
|
|
3028
|
+
position: relative;
|
|
3029
|
+
z-index: 1;
|
|
3030
|
+
}
|
|
3031
|
+
.wds-list-item-prompt a,
|
|
3032
|
+
.wds-list-item-prompt button {
|
|
3033
|
+
text-underline-offset: calc(4px / 2);
|
|
3034
|
+
text-underline-offset: calc(var(--size-4) / 2);
|
|
3035
|
+
}
|
|
3036
|
+
.wds-list-item-prompt a:first-of-type:before,
|
|
3037
|
+
.wds-list-item-prompt button:first-of-type:before {
|
|
3038
|
+
content: '';
|
|
3039
|
+
position: absolute;
|
|
3040
|
+
inset: 0;
|
|
3041
|
+
}
|
|
3042
|
+
.wds-list-item-prompt.np-prompt-icon {
|
|
3043
|
+
padding-left: calc(8px - 1px);
|
|
3044
|
+
padding-left: calc(var(--padding-x-small) - 1px);
|
|
3045
|
+
padding-right: 8px;
|
|
3046
|
+
padding-right: var(--padding-x-small);
|
|
3047
|
+
display: inline-flex;
|
|
3048
|
+
align-items: center;
|
|
3049
|
+
gap: 4px;
|
|
3050
|
+
gap: var(--size-4);
|
|
3051
|
+
}
|
|
3052
|
+
.wds-list-item-prompt .np-prompt-icon {
|
|
3053
|
+
padding-right: calc(12px / 2);
|
|
3054
|
+
padding-right: calc(var(--size-12) / 2);
|
|
3055
|
+
padding-top: calc(4px - 1px);
|
|
3056
|
+
padding-top: calc(var(--size-4) - 1px);
|
|
3057
|
+
padding-bottom: calc(4px - 1px);
|
|
3058
|
+
padding-bottom: calc(var(--size-4) - 1px);
|
|
3059
|
+
}
|
|
3060
|
+
.wds-list-item-prompt .np-prompt-icon .tw-icon-tags,
|
|
3061
|
+
.wds-list-item-prompt .np-prompt-icon .tw-icon-confetti {
|
|
3062
|
+
color: var(--color-sentiment-positive-primary);
|
|
3063
|
+
}
|
|
3064
|
+
.wds-list-item-prompt.negative {
|
|
3065
|
+
background-color: var(--color-sentiment-negative-secondary);
|
|
3066
|
+
color: var(--color-sentiment-negative-primary);
|
|
3067
|
+
}
|
|
3068
|
+
.wds-list-item-prompt.negative a,
|
|
3069
|
+
.wds-list-item-prompt.negative button {
|
|
3070
|
+
color: var(--color-sentiment-negative-primary);
|
|
3071
|
+
}
|
|
3072
|
+
.wds-list-item-prompt.negative a:hover,
|
|
3073
|
+
.wds-list-item-prompt.negative button:hover {
|
|
3074
|
+
color: var(--color-sentiment-negative-primary-hover);
|
|
3075
|
+
}
|
|
3076
|
+
.wds-list-item-prompt.negative a:active,
|
|
3077
|
+
.wds-list-item-prompt.negative button:active {
|
|
3078
|
+
color: var(--color-sentiment-negative-primary-active);
|
|
3079
|
+
}
|
|
3080
|
+
.wds-list-item-prompt.wds-list-item-prompt.negative:has(a, button):hover {
|
|
3081
|
+
background-color: var(--color-sentiment-negative-secondary-hover);
|
|
3082
|
+
}
|
|
3083
|
+
.wds-list-item-prompt.wds-list-item-prompt.negative:has(a, button):active {
|
|
3084
|
+
background-color: var(--color-sentiment-negative-secondary-active);
|
|
3085
|
+
}
|
|
3086
|
+
.wds-list-item-prompt.positive,
|
|
3087
|
+
.wds-list-item-prompt.discount,
|
|
3088
|
+
.wds-list-item-prompt.savings {
|
|
3089
|
+
background-color: var(--color-sentiment-positive-secondary);
|
|
3090
|
+
color: var(--color-sentiment-positive-primary);
|
|
3091
|
+
}
|
|
3092
|
+
.wds-list-item-prompt.positive a,
|
|
3093
|
+
.wds-list-item-prompt.discount a,
|
|
3094
|
+
.wds-list-item-prompt.savings a,
|
|
3095
|
+
.wds-list-item-prompt.positive button,
|
|
3096
|
+
.wds-list-item-prompt.discount button,
|
|
3097
|
+
.wds-list-item-prompt.savings button {
|
|
3098
|
+
color: var(--color-sentiment-positive-primary);
|
|
3099
|
+
}
|
|
3100
|
+
.wds-list-item-prompt.positive a:hover,
|
|
3101
|
+
.wds-list-item-prompt.discount a:hover,
|
|
3102
|
+
.wds-list-item-prompt.savings a:hover,
|
|
3103
|
+
.wds-list-item-prompt.positive button:hover,
|
|
3104
|
+
.wds-list-item-prompt.discount button:hover,
|
|
3105
|
+
.wds-list-item-prompt.savings button:hover {
|
|
3106
|
+
color: var(--color-sentiment-positive-primary-hover);
|
|
3107
|
+
}
|
|
3108
|
+
.wds-list-item-prompt.positive a:active,
|
|
3109
|
+
.wds-list-item-prompt.discount a:active,
|
|
3110
|
+
.wds-list-item-prompt.savings a:active,
|
|
3111
|
+
.wds-list-item-prompt.positive button:active,
|
|
3112
|
+
.wds-list-item-prompt.discount button:active,
|
|
3113
|
+
.wds-list-item-prompt.savings button:active {
|
|
3114
|
+
color: var(--color-sentiment-positive-primary-active);
|
|
3115
|
+
}
|
|
3116
|
+
.wds-list-item-prompt.wds-list-item-prompt.positive:has(a, button):hover,
|
|
3117
|
+
.wds-list-item-prompt.wds-list-item-prompt.discount:has(a, button):hover,
|
|
3118
|
+
.wds-list-item-prompt.wds-list-item-prompt.savings:has(a, button):hover {
|
|
3119
|
+
background-color: var(--color-sentiment-positive-secondary-hover);
|
|
3120
|
+
}
|
|
3121
|
+
.wds-list-item-prompt.wds-list-item-prompt.positive:has(a, button):active,
|
|
3122
|
+
.wds-list-item-prompt.wds-list-item-prompt.discount:has(a, button):active,
|
|
3123
|
+
.wds-list-item-prompt.wds-list-item-prompt.savings:has(a, button):active {
|
|
3124
|
+
background-color: var(--color-sentiment-positive-secondary-active);
|
|
3125
|
+
}
|
|
3126
|
+
.wds-list-item-prompt.neutral {
|
|
3127
|
+
background-color: rgba(134,167,189,0.10196);
|
|
3128
|
+
background-color: var(--color-background-neutral);
|
|
3129
|
+
color: #37517e;
|
|
3130
|
+
color: var(--color-content-primary);
|
|
3131
|
+
}
|
|
3132
|
+
.wds-list-item-prompt.neutral a,
|
|
3133
|
+
.wds-list-item-prompt.neutral button {
|
|
3134
|
+
color: #37517e;
|
|
3135
|
+
color: var(--color-content-primary);
|
|
3136
|
+
}
|
|
3137
|
+
.wds-list-item-prompt.wds-list-item-prompt.neutral:has(a, button):hover {
|
|
3138
|
+
background-color: var(--color-background-neutral-hover);
|
|
3139
|
+
}
|
|
3140
|
+
.wds-list-item-prompt.wds-list-item-prompt.neutral:has(a, button):active {
|
|
3141
|
+
background-color: var(--color-background-neutral-active);
|
|
3142
|
+
}
|
|
3143
|
+
.wds-list-item-prompt.warning {
|
|
3144
|
+
background-color: var(--color-sentiment-warning-secondary);
|
|
3145
|
+
color: var(--color-sentiment-warning-content);
|
|
3146
|
+
}
|
|
3147
|
+
.wds-list-item-prompt.warning a,
|
|
3148
|
+
.wds-list-item-prompt.warning button {
|
|
3149
|
+
color: var(--color-sentiment-warning-content);
|
|
3150
|
+
}
|
|
3151
|
+
.wds-list-item-prompt.warning a:hover,
|
|
3152
|
+
.wds-list-item-prompt.warning button:hover {
|
|
3153
|
+
color: var(--color-sentiment-warning-content-hover);
|
|
3154
|
+
}
|
|
3155
|
+
.wds-list-item-prompt.warning a:active,
|
|
3156
|
+
.wds-list-item-prompt.warning button:active {
|
|
3157
|
+
color: var(--color-sentiment-warning-content-active);
|
|
3158
|
+
}
|
|
3159
|
+
.wds-list-item-prompt.wds-list-item-prompt.warning:has(a, button):hover {
|
|
3160
|
+
background-color: color-mix(in srgb, var(--color-sentiment-warning-secondary) 92%, var(--color-sentiment-warning-primary));
|
|
3161
|
+
}
|
|
3162
|
+
.wds-list-item-prompt.wds-list-item-prompt.warning:has(a, button):active {
|
|
3163
|
+
background-color: color-mix(in srgb, var(--color-sentiment-warning-secondary) 84%, var(--color-sentiment-warning-primary));
|
|
3164
|
+
}
|
|
3008
3165
|
.wds-list-item {
|
|
3009
3166
|
list-style: none;
|
|
3010
3167
|
width: 100%;
|
|
@@ -3248,163 +3405,6 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
|
|
|
3248
3405
|
stroke-dasharray: calc(12px * 0.5) calc(12px * 0.5);
|
|
3249
3406
|
stroke-dasharray: var(--wds-list-item-spotlight-strokeDashSize) var(--wds-list-item-spotlight-strokeDashSize);
|
|
3250
3407
|
}
|
|
3251
|
-
.wds-list-item-prompt {
|
|
3252
|
-
grid-area: prompt;
|
|
3253
|
-
display: inline-flex;
|
|
3254
|
-
justify-self: start;
|
|
3255
|
-
text-align: left;
|
|
3256
|
-
padding-top: calc(8px / 2);
|
|
3257
|
-
padding-top: calc(var(--padding-x-small) / 2);
|
|
3258
|
-
padding-bottom: calc(8px / 2);
|
|
3259
|
-
padding-bottom: calc(var(--padding-x-small) / 2);
|
|
3260
|
-
padding-left: calc(8px - 1px);
|
|
3261
|
-
padding-left: calc(var(--padding-x-small) - 1px);
|
|
3262
|
-
padding-right: 8px;
|
|
3263
|
-
padding-right: var(--padding-x-small);
|
|
3264
|
-
border-radius: 10px;
|
|
3265
|
-
border-radius: var(--radius-small);
|
|
3266
|
-
word-break: break-word;
|
|
3267
|
-
word-wrap: break-word;
|
|
3268
|
-
}
|
|
3269
|
-
.wds-list-item-prompt:has(a),
|
|
3270
|
-
.wds-list-item-prompt:has(button) {
|
|
3271
|
-
position: relative;
|
|
3272
|
-
z-index: 1;
|
|
3273
|
-
}
|
|
3274
|
-
.wds-list-item-prompt a,
|
|
3275
|
-
.wds-list-item-prompt button {
|
|
3276
|
-
text-underline-offset: calc(4px / 2);
|
|
3277
|
-
text-underline-offset: calc(var(--size-4) / 2);
|
|
3278
|
-
}
|
|
3279
|
-
.wds-list-item-prompt a:first-of-type:before,
|
|
3280
|
-
.wds-list-item-prompt button:first-of-type:before {
|
|
3281
|
-
content: '';
|
|
3282
|
-
position: absolute;
|
|
3283
|
-
inset: 0;
|
|
3284
|
-
}
|
|
3285
|
-
.wds-list-item-prompt.np-prompt-icon {
|
|
3286
|
-
padding-left: calc(8px - 1px);
|
|
3287
|
-
padding-left: calc(var(--padding-x-small) - 1px);
|
|
3288
|
-
padding-right: 8px;
|
|
3289
|
-
padding-right: var(--padding-x-small);
|
|
3290
|
-
display: inline-flex;
|
|
3291
|
-
align-items: center;
|
|
3292
|
-
gap: 4px;
|
|
3293
|
-
gap: var(--size-4);
|
|
3294
|
-
}
|
|
3295
|
-
.wds-list-item-prompt .np-prompt-icon {
|
|
3296
|
-
padding-right: calc(12px / 2);
|
|
3297
|
-
padding-right: calc(var(--size-12) / 2);
|
|
3298
|
-
padding-top: calc(4px - 1px);
|
|
3299
|
-
padding-top: calc(var(--size-4) - 1px);
|
|
3300
|
-
padding-bottom: calc(4px - 1px);
|
|
3301
|
-
padding-bottom: calc(var(--size-4) - 1px);
|
|
3302
|
-
}
|
|
3303
|
-
.wds-list-item-prompt .np-prompt-icon .tw-icon-tags,
|
|
3304
|
-
.wds-list-item-prompt .np-prompt-icon .tw-icon-confetti {
|
|
3305
|
-
color: var(--color-sentiment-positive-primary);
|
|
3306
|
-
}
|
|
3307
|
-
.wds-list-item-prompt.negative {
|
|
3308
|
-
background-color: var(--color-sentiment-negative-secondary);
|
|
3309
|
-
color: var(--color-sentiment-negative-primary);
|
|
3310
|
-
}
|
|
3311
|
-
.wds-list-item-prompt.negative a,
|
|
3312
|
-
.wds-list-item-prompt.negative button {
|
|
3313
|
-
color: var(--color-sentiment-negative-primary);
|
|
3314
|
-
}
|
|
3315
|
-
.wds-list-item-prompt.negative a:hover,
|
|
3316
|
-
.wds-list-item-prompt.negative button:hover {
|
|
3317
|
-
color: var(--color-sentiment-negative-primary-hover);
|
|
3318
|
-
}
|
|
3319
|
-
.wds-list-item-prompt.negative a:active,
|
|
3320
|
-
.wds-list-item-prompt.negative button:active {
|
|
3321
|
-
color: var(--color-sentiment-negative-primary-active);
|
|
3322
|
-
}
|
|
3323
|
-
.wds-list-item-prompt.wds-list-item-prompt.negative:has(a, button):hover {
|
|
3324
|
-
background-color: var(--color-sentiment-negative-secondary-hover);
|
|
3325
|
-
}
|
|
3326
|
-
.wds-list-item-prompt.wds-list-item-prompt.negative:has(a, button):active {
|
|
3327
|
-
background-color: var(--color-sentiment-negative-secondary-active);
|
|
3328
|
-
}
|
|
3329
|
-
.wds-list-item-prompt.positive,
|
|
3330
|
-
.wds-list-item-prompt.discount,
|
|
3331
|
-
.wds-list-item-prompt.savings {
|
|
3332
|
-
background-color: var(--color-sentiment-positive-secondary);
|
|
3333
|
-
color: var(--color-sentiment-positive-primary);
|
|
3334
|
-
}
|
|
3335
|
-
.wds-list-item-prompt.positive a,
|
|
3336
|
-
.wds-list-item-prompt.discount a,
|
|
3337
|
-
.wds-list-item-prompt.savings a,
|
|
3338
|
-
.wds-list-item-prompt.positive button,
|
|
3339
|
-
.wds-list-item-prompt.discount button,
|
|
3340
|
-
.wds-list-item-prompt.savings button {
|
|
3341
|
-
color: var(--color-sentiment-positive-primary);
|
|
3342
|
-
}
|
|
3343
|
-
.wds-list-item-prompt.positive a:hover,
|
|
3344
|
-
.wds-list-item-prompt.discount a:hover,
|
|
3345
|
-
.wds-list-item-prompt.savings a:hover,
|
|
3346
|
-
.wds-list-item-prompt.positive button:hover,
|
|
3347
|
-
.wds-list-item-prompt.discount button:hover,
|
|
3348
|
-
.wds-list-item-prompt.savings button:hover {
|
|
3349
|
-
color: var(--color-sentiment-positive-primary-hover);
|
|
3350
|
-
}
|
|
3351
|
-
.wds-list-item-prompt.positive a:active,
|
|
3352
|
-
.wds-list-item-prompt.discount a:active,
|
|
3353
|
-
.wds-list-item-prompt.savings a:active,
|
|
3354
|
-
.wds-list-item-prompt.positive button:active,
|
|
3355
|
-
.wds-list-item-prompt.discount button:active,
|
|
3356
|
-
.wds-list-item-prompt.savings button:active {
|
|
3357
|
-
color: var(--color-sentiment-positive-primary-active);
|
|
3358
|
-
}
|
|
3359
|
-
.wds-list-item-prompt.wds-list-item-prompt.positive:has(a, button):hover,
|
|
3360
|
-
.wds-list-item-prompt.wds-list-item-prompt.discount:has(a, button):hover,
|
|
3361
|
-
.wds-list-item-prompt.wds-list-item-prompt.savings:has(a, button):hover {
|
|
3362
|
-
background-color: var(--color-sentiment-positive-secondary-hover);
|
|
3363
|
-
}
|
|
3364
|
-
.wds-list-item-prompt.wds-list-item-prompt.positive:has(a, button):active,
|
|
3365
|
-
.wds-list-item-prompt.wds-list-item-prompt.discount:has(a, button):active,
|
|
3366
|
-
.wds-list-item-prompt.wds-list-item-prompt.savings:has(a, button):active {
|
|
3367
|
-
background-color: var(--color-sentiment-positive-secondary-active);
|
|
3368
|
-
}
|
|
3369
|
-
.wds-list-item-prompt.neutral {
|
|
3370
|
-
background-color: rgba(134,167,189,0.10196);
|
|
3371
|
-
background-color: var(--color-background-neutral);
|
|
3372
|
-
color: #37517e;
|
|
3373
|
-
color: var(--color-content-primary);
|
|
3374
|
-
}
|
|
3375
|
-
.wds-list-item-prompt.neutral a,
|
|
3376
|
-
.wds-list-item-prompt.neutral button {
|
|
3377
|
-
color: #37517e;
|
|
3378
|
-
color: var(--color-content-primary);
|
|
3379
|
-
}
|
|
3380
|
-
.wds-list-item-prompt.wds-list-item-prompt.neutral:has(a, button):hover {
|
|
3381
|
-
background-color: var(--color-background-neutral-hover);
|
|
3382
|
-
}
|
|
3383
|
-
.wds-list-item-prompt.wds-list-item-prompt.neutral:has(a, button):active {
|
|
3384
|
-
background-color: var(--color-background-neutral-active);
|
|
3385
|
-
}
|
|
3386
|
-
.wds-list-item-prompt.warning {
|
|
3387
|
-
background-color: var(--color-sentiment-warning-secondary);
|
|
3388
|
-
color: var(--color-sentiment-warning-content);
|
|
3389
|
-
}
|
|
3390
|
-
.wds-list-item-prompt.warning a,
|
|
3391
|
-
.wds-list-item-prompt.warning button {
|
|
3392
|
-
color: var(--color-sentiment-warning-content);
|
|
3393
|
-
}
|
|
3394
|
-
.wds-list-item-prompt.warning a:hover,
|
|
3395
|
-
.wds-list-item-prompt.warning button:hover {
|
|
3396
|
-
color: var(--color-sentiment-warning-content-hover);
|
|
3397
|
-
}
|
|
3398
|
-
.wds-list-item-prompt.warning a:active,
|
|
3399
|
-
.wds-list-item-prompt.warning button:active {
|
|
3400
|
-
color: var(--color-sentiment-warning-content-active);
|
|
3401
|
-
}
|
|
3402
|
-
.wds-list-item-prompt.wds-list-item-prompt.warning:has(a, button):hover {
|
|
3403
|
-
background-color: color-mix(in srgb, var(--color-sentiment-warning-secondary) 92%, var(--color-sentiment-warning-primary));
|
|
3404
|
-
}
|
|
3405
|
-
.wds-list-item-prompt.wds-list-item-prompt.warning:has(a, button):active {
|
|
3406
|
-
background-color: color-mix(in srgb, var(--color-sentiment-warning-secondary) 84%, var(--color-sentiment-warning-primary));
|
|
3407
|
-
}
|
|
3408
3408
|
.np-field-control {
|
|
3409
3409
|
margin-top: 4px;
|
|
3410
3410
|
margin-top: var(--size-4);
|