@thefittingroom/shop-ui 1.3.8 → 1.3.9
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/README.md +21 -2
- package/dist/esm/index.js +27 -6
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/index.min.js +2 -2
- package/dist/esm/tfr-size-rec.d.ts +10 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -54,9 +54,17 @@ export type TfrCssVariables = {
|
|
|
54
54
|
|
|
55
55
|
// Size Selector
|
|
56
56
|
sizeSelectorTextColor?: string
|
|
57
|
+
sizeSelectorFontSize?: string
|
|
58
|
+
sizeSelectorFontWeight?: string
|
|
57
59
|
sizeSelectorBgColor?: string
|
|
58
60
|
sizeSelectorBgColorHover?: string
|
|
59
61
|
sizeSelectorBgColorActive?: string
|
|
62
|
+
sizeSelectorButtonHeight?: string
|
|
63
|
+
sizeSelectorButtonActiveHeight?: string
|
|
64
|
+
sizeSelectorButtonBorderColor?: string
|
|
65
|
+
sizeSelectorButtonBorderWidth?: string
|
|
66
|
+
sizeSelectorButtonRadius?: string
|
|
67
|
+
sizeSelectorButtonShadow?: string
|
|
60
68
|
}
|
|
61
69
|
|
|
62
70
|
// UI Hooks
|
|
@@ -101,7 +109,8 @@ tfr.setBrandUserId(brandUserId)
|
|
|
101
109
|
|
|
102
110
|
--tfr-dark: #121212;
|
|
103
111
|
--tfr-grey: #878787;
|
|
104
|
-
--tfr-light-grey: #
|
|
112
|
+
--tfr-light-grey: #dbdcdc;
|
|
113
|
+
--tfr-dark-grey: #3f3f3f;
|
|
105
114
|
|
|
106
115
|
/* Main */
|
|
107
116
|
--tfr-main-border-color: rgba(18, 18, 18, 0.55);
|
|
@@ -123,9 +132,19 @@ tfr.setBrandUserId(brandUserId)
|
|
|
123
132
|
|
|
124
133
|
/* Size Selector */
|
|
125
134
|
--tfr-size-selector-text-color: var(--tfr-white);
|
|
135
|
+
--tfr-size-selector-font-size: 14px;
|
|
136
|
+
--tfr-size-selector-font-weight: 400;
|
|
137
|
+
--tfr-size-selector-border-color: transparent;
|
|
138
|
+
--tfr-size-selector-border-width: 0;
|
|
126
139
|
--tfr-size-selector-bg-color: var(--tfr-grey);
|
|
127
|
-
--tfr-size-selector-bg-color-hover: var(--tfr-
|
|
140
|
+
--tfr-size-selector-bg-color-hover: var(--tfr-dark-grey);
|
|
128
141
|
--tfr-size-selector-bg-color-active: var(--tfr-dark);
|
|
142
|
+
--tfr-size-selector-button-height: 35px;
|
|
143
|
+
--tfr-size-selector-button-active-height: 45px;
|
|
144
|
+
--tfr-size-selector-button-active-border-color: transparent;
|
|
145
|
+
--tfr-size-selector-button-active-border-width: 0;
|
|
146
|
+
--tfr-size-selector-button-radius: 8px;
|
|
147
|
+
--tfr-size-selector-button-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.3);
|
|
129
148
|
}
|
|
130
149
|
```
|
|
131
150
|
|
package/dist/esm/index.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
* thefittingroom v1.3.
|
|
2
|
+
* thefittingroom v1.3.9 (2024-07-05T18:33:20.009Z)
|
|
3
3
|
* Copyright 2022-present, TheFittingRoom, Inc. All rights reserved.
|
|
4
4
|
*/
|
|
5
5
|
function loadImageRecursive(imageURL, imageURLs) {
|
|
@@ -23577,7 +23577,7 @@ n(css$6,{});
|
|
|
23577
23577
|
var css$5 = "@media screen and (max-width:702px){.tfr-modal-title-logo-container{display:flex;flex-direction:column}}@media screen and (min-width:600px){.tfr-modal-content-container{border-radius:10px;height:auto}}@media screen and (max-width:599px){.tfr-mobile-hidden{display:none}.tfr-modal-content-container{min-height:100vh}.trf-logo-title{margin-bottom:10px}.tfr-modal-content-flex{height:calc(100vh - 76px)}}@media screen and (max-width:500px){.tfr-fieldset{width:90%}.tfr-how-it-works-item{flex-direction:column}.tfr-try-on-content{margin-left:0;margin-top:20px}}";
|
|
23578
23578
|
n(css$5,{});
|
|
23579
23579
|
|
|
23580
|
-
var css$4 = "#tfr-size-recommendations{background-color:var(--tfr-main-bg-color);border:var(--tfr-main-border-width) solid var(--tfr-main-border-color);border-radius:var(--tfr-main-border-radius);color:var(--tfr-dark);display:flex;font-family:var(--tfr-main-font);padding:var(--tfr-main-v-padding) var(--tfr-main-h-padding);width:var(--tfr-main-width)}#tfr-size-recommendations,#tfr-size-recommendations-container{align-items:center;flex-direction:column;justify-content:center}#tfr-size-recommendations-container{display:none;width:100%}#tfr-size-rec-login-svg{display:none}#tfr-size-rec-title{align-items:center;display:flex;font-family:var(--tfr-title-font);margin-bottom:8px}#tfr-size-rec-subtitle{font-family:var(--tfr-subtitle-font);
|
|
23580
|
+
var css$4 = "#tfr-size-recommendations{background-color:var(--tfr-main-bg-color);border:var(--tfr-main-border-width) solid var(--tfr-main-border-color);border-radius:var(--tfr-main-border-radius);color:var(--tfr-dark);display:flex;font-family:var(--tfr-main-font);padding:var(--tfr-main-v-padding) var(--tfr-main-h-padding);width:var(--tfr-main-width)}#tfr-size-recommendations,#tfr-size-recommendations-container{align-items:center;flex-direction:column;justify-content:center}#tfr-size-recommendations-container{display:none;width:100%}#tfr-size-rec-login-svg{display:none}#tfr-size-rec-title{align-items:center;display:flex;font-family:var(--tfr-title-font);margin-bottom:8px}#tfr-size-rec-subtitle{background-color:var(--tfr-grey);border-radius:4px;color:var(--tfr-white);font-family:var(--tfr-subtitle-font);padding:8px;text-align:center;width:100%}#tfr-size-rec-subtitle,#tfr-size-rec-title{font-size:14px}#tfr-size-rec-table{display:flex;flex-direction:column;font-size:12px;width:100%}.tfr-size-rec-table-row:first-of-type{border-top-width:0}.tfr-size-rec-table-row{align-items:center;border-top:var(--tfr-main-border-width) solid var(--tfr-main-border-color);display:flex;font-family:var(--tfr-row-font);height:40px;justify-content:center}.tfr-size-rec-table-cell-left,.tfr-size-rec-table-cell-right{flex:1 1 0px}.tfr-size-rec-table-cell-left{margin-right:70px;text-align:right}.tfr-size-rec-table-cell-right{margin-left:16px}.tfr-size-rec-table-cell-right.perfect{color:var(--tfr-brand-color)}#tfr-size-rec-size{display:inline-block}#tfr-size-rec-size>.tfr-size-rec-login-cta{font-weight:500;margin-left:10px}.tfr-size-rec-login-cta,.tfr-size-rec-table-cell-right{font-size:12px}.tfr-size-rec-login-cta{color:var(--tfr-muted);display:flex}#tfr-size-rec-action-login,#tfr-size-rec-action-logout{display:none;font-family:var(--tfr-cta-font)}#tfr-size-rec-action{cursor:pointer;font-size:16px;margin-top:14px;text-decoration:underline}#tfr-size-rec-select{background-color:var(--tfr-size-selector-bg-color);border-color:var(--tfr-size-selector-border-color);border-radius:var(--tfr-size-selector-button-radius);border-style:solid;border-width:var(--tfr-size-selector-border-width);box-shadow:var(--tfr-size-selector-button-shadow);color:var(--tfr-size-selector-text-color);display:none;font-size:var(--tfr-size-selector-font-size);font-weight:var(--tfr-size-selector-font-weight);margin-bottom:20px;margin-top:10px}#tfr-size-rec-select,.tfr-size-rec-select-button{align-items:center;height:var(--tfr-size-selector-button-height);justify-content:center}.tfr-size-rec-select-button{cursor:pointer;display:flex;transition:all .15s ease-in;width:80px}.tfr-size-rec-select-button:hover:not(.active){background-color:var(--tfr-size-selector-bg-color-hover);opacity:.7}.tfr-size-rec-select-button.active{background-color:var(--tfr-size-selector-bg-color-active);border-color:var(--tfr-size-selector-button-active-border-color);border-style:solid;border-width:var(--tfr-size-selector-button-active-border-width);height:var(--tfr-size-selector-button-active-height)}.tfr-size-rec-select-button.active,.tfr-size-rec-select-button:first-of-type{border-bottom-left-radius:var(--tfr-size-selector-button-radius);border-top-left-radius:var(--tfr-size-selector-button-radius)}.tfr-size-rec-select-button.active,.tfr-size-rec-select-button:last-of-type{border-bottom-right-radius:var(--tfr-size-selector-button-radius);border-top-right-radius:var(--tfr-size-selector-button-radius)}.tfr-powered-by{align-items:center;display:flex;font-size:10px;margin-top:10px}.tfr-powered-by-logo{margin:0 4px}.tfr-powered-by-logo,.tfr-powered-by-logo img{height:24px}.tfr-powered-by-text-bold{font-weight:700}#tfr-size-recommendation-error{color:#8d0000;display:none}";
|
|
23581
23581
|
n(css$4,{});
|
|
23582
23582
|
|
|
23583
23583
|
var css$3 = ".tfr-mt-10{margin-top:10px}.tfr-mt-20{margin-top:20px}.tfr-mt-15{margin-top:15px}.tfr-mt-30{margin-top:30px}.mt-40{margin-top:40px}.tfr-mb-40{margin-bottom:40px}.tfr-mb-20{margin-bottom:20px}.tfr-mr-10{margin-right:10px}.tfr-mr-15{margin-right:15px}.tfr-mt-50{margin-top:50px}.tfr-mt-60{margin-top:60px}.tfr-mb-60{margin-bottom:60px}.tfr-mr-20{margin-right:20px}.tfr-mt-15-p{margin-top:15%}.tfr-mb-13-p{margin-bottom:13%}.tfr-m-h-auto{margin-left:auto;margin-right:auto}.tfr-pt-20{padding-top:20px}.tfr-pb-50{padding-bottom:50px}.tfr-p-20{padding:20px}.tfr-pr-20{padding-right:20px}.tfr-pl-20{padding-left:20px}.tfr-pb-7-p{padding-bottom:7%}";
|
|
@@ -23589,7 +23589,7 @@ n(css$2,{});
|
|
|
23589
23589
|
var css$1 = ".tfr-title-font{font-family:Poppins,sans-serif}.tfr-body-font{font-family:Roboto,sans-serif}.tfr-light-24-300{font-size:24px;font-weight:300}.tfr-light-24-500{font-size:24px;font-weight:500}.tfr-light-22-300{font-size:22px;font-weight:300}.tfr-light-16-300{font-size:16px;font-weight:300}.tfr-medium-16-default{font-size:16px}.tfr-12-default{font-size:12px}.tfr-14-default{font-size:14px}.tfr-16-default{font-size:16px}";
|
|
23590
23590
|
n(css$1,{});
|
|
23591
23591
|
|
|
23592
|
-
var css = ":root{--tfr-brand-color:#209da7;--tfr-black:#000;--tfr-red:red;--tfr-white:#fff;--tfr-muted:#a7a7a7;--tfr-dark:#121212;--tfr-grey:#878787;--tfr-light-grey:#
|
|
23592
|
+
var css = ":root{--tfr-brand-color:#209da7;--tfr-black:#000;--tfr-red:red;--tfr-white:#fff;--tfr-muted:#a7a7a7;--tfr-dark:#121212;--tfr-grey:#878787;--tfr-light-grey:#dbdcdc;--tfr-dark-grey:#3f3f3f;--tfr-main-border-color:hsla(0,0%,7%,.55);--tfr-main-border-radius:0;--tfr-main-border-width:1px;--tfr-main-bg-color:inherit;--tfr-main-width:440px;--tfr-main-v-padding:14px;--tfr-main-h-padding:20px;--tfr-main-font:inherit;--tfr-title-font:var(--tfr-main-font);--tfr-subtitle-font:var(--tfr-main-font);--tfr-row-font:var(--tfr-main-font);--tfr-cta-font:var(--tfr-main-font);--tfr-size-selector-text-color:var(--tfr-white);--tfr-size-selector-font-size:14px;--tfr-size-selector-font-weight:400;--tfr-size-selector-border-color:transparent;--tfr-size-selector-border-width:0;--tfr-size-selector-bg-color:var(--tfr-grey);--tfr-size-selector-bg-color-hover:var(--tfr-dark-grey);--tfr-size-selector-bg-color-active:var(--tfr-dark);--tfr-size-selector-button-height:35px;--tfr-size-selector-button-active-height:45px;--tfr-size-selector-button-active-border-color:transparent;--tfr-size-selector-button-active-border-width:0;--tfr-size-selector-button-radius:8px;--tfr-size-selector-button-shadow:0 4px 4px 0 rgba(0,0,0,.3)}";
|
|
23593
23593
|
n(css,{});
|
|
23594
23594
|
|
|
23595
23595
|
const ErrorModal = (props) => {
|
|
@@ -24279,7 +24279,7 @@ class SizeRecComponent {
|
|
|
24279
24279
|
</div>`;
|
|
24280
24280
|
}
|
|
24281
24281
|
renderLoginCta() {
|
|
24282
|
-
return `<div class="tfr-size-rec-login-cta"><img src="${loginIconSrc}" />
|
|
24282
|
+
return `<div class="tfr-size-rec-login-cta"><img src="${loginIconSrc}" /> Signup or login to view</div>`;
|
|
24283
24283
|
}
|
|
24284
24284
|
renderGarmentLocations(locations) {
|
|
24285
24285
|
const html = locations
|
|
@@ -24305,7 +24305,7 @@ class SizeRecComponent {
|
|
|
24305
24305
|
Recommended Size:
|
|
24306
24306
|
<div id="tfr-size-rec-size">
|
|
24307
24307
|
<div class="tfr-size-rec-login-cta">
|
|
24308
|
-
<img src="${loginIconSrc}" />
|
|
24308
|
+
<img src="${loginIconSrc}" /> Signup or login to view
|
|
24309
24309
|
</div>
|
|
24310
24310
|
</div>
|
|
24311
24311
|
</div>
|
|
@@ -24317,7 +24317,7 @@ class SizeRecComponent {
|
|
|
24317
24317
|
<div id="tfr-size-rec-table"></div>
|
|
24318
24318
|
|
|
24319
24319
|
<div id="tfr-size-rec-action">
|
|
24320
|
-
<div id="tfr-size-rec-action-login">
|
|
24320
|
+
<div id="tfr-size-rec-action-login">Sign up or login</div>
|
|
24321
24321
|
<div id="tfr-size-rec-action-logout">Sign out of the Fitting Room</div>
|
|
24322
24322
|
</div>
|
|
24323
24323
|
|
|
@@ -24470,14 +24470,35 @@ class TfrSizeRec {
|
|
|
24470
24470
|
r.style.setProperty('--tfr-row-font', cssVariables.rowFont);
|
|
24471
24471
|
if (cssVariables.ctaFont)
|
|
24472
24472
|
r.style.setProperty('--tfr-cta-font', cssVariables.ctaFont);
|
|
24473
|
+
// Size Selector
|
|
24473
24474
|
if (cssVariables.sizeSelectorTextColor)
|
|
24474
24475
|
r.style.setProperty('--tfr-size-selector-text-color', cssVariables.sizeSelectorTextColor);
|
|
24476
|
+
if (cssVariables.sizeSelectorFontSize)
|
|
24477
|
+
r.style.setProperty('--tfr-size-selector-font-size', cssVariables.sizeSelectorFontSize);
|
|
24478
|
+
if (cssVariables.sizeSelectorFontWeight)
|
|
24479
|
+
r.style.setProperty('--tfr-size-selector-font-weight', cssVariables.sizeSelectorFontWeight);
|
|
24475
24480
|
if (cssVariables.sizeSelectorBgColor)
|
|
24476
24481
|
r.style.setProperty('--tfr-size-selector-bg-color', cssVariables.sizeSelectorBgColor);
|
|
24482
|
+
if (cssVariables.sizeSelectorBorderColor)
|
|
24483
|
+
r.style.setProperty('--tfr-size-selector-border-color', cssVariables.sizeSelectorBorderColor);
|
|
24484
|
+
if (cssVariables.sizeSelectorBorderWidth)
|
|
24485
|
+
r.style.setProperty('--tfr-size-selector-border-width', cssVariables.sizeSelectorBorderWidth);
|
|
24477
24486
|
if (cssVariables.sizeSelectorBgColorHover)
|
|
24478
24487
|
r.style.setProperty('--tfr-size-selector-bg-color-hover', cssVariables.sizeSelectorBgColorHover);
|
|
24479
24488
|
if (cssVariables.sizeSelectorBgColorActive)
|
|
24480
24489
|
r.style.setProperty('--tfr-size-selector-bg-color-active', cssVariables.sizeSelectorBgColorActive);
|
|
24490
|
+
if (cssVariables.sizeSelectorButtonHeight)
|
|
24491
|
+
r.style.setProperty('--tfr-size-selector-button-height', cssVariables.sizeSelectorButtonHeight);
|
|
24492
|
+
if (cssVariables.sizeSelectorButtonActiveHeight)
|
|
24493
|
+
r.style.setProperty('--tfr-size-selector-button-active-height', cssVariables.sizeSelectorButtonActiveHeight);
|
|
24494
|
+
if (cssVariables.sizeSelectorButtonActiveBorderColor)
|
|
24495
|
+
r.style.setProperty('--tfr-size-selector-button-active-border-color', cssVariables.sizeSelectorButtonActiveBorderColor);
|
|
24496
|
+
if (cssVariables.sizeSelectorButtonActiveBorderWidth)
|
|
24497
|
+
r.style.setProperty('--tfr-size-selector-button-active-border-width', cssVariables.sizeSelectorButtonActiveBorderWidth);
|
|
24498
|
+
if (cssVariables.sizeSelectorButtonRadius)
|
|
24499
|
+
r.style.setProperty('--tfr-size-selector-button-radius', cssVariables.sizeSelectorButtonRadius);
|
|
24500
|
+
if (cssVariables.sizeSelectorButtonShadow)
|
|
24501
|
+
r.style.setProperty('--tfr-size-selector-button-shadow', cssVariables.sizeSelectorButtonShadow);
|
|
24481
24502
|
}
|
|
24482
24503
|
}
|
|
24483
24504
|
|