Merge pull request #101 from xfiveco/XCORNER-15-create-account-page

Xcorner 15 create account page

.github/workflows/pull_request_review.yml

@@ -17,7 +17,7 @@ jobs:
 
     strategy:
       matrix:
-        node: [14.x]
+        node: [18.x]
 
     steps:
     - name: Checkout code

.prettierignore

@@ -2,4 +2,4 @@
 /assets/dist
 
 *.json
-*.html
+*.html

assets/scss/components/_quick-search-results.scss

@@ -1,4 +1,3 @@
-
 /* ==========================================================================
    #QUICK-SEARCH-RESULTS
    ========================================================================== */

assets/scss/components/_wishlist-dropdown.scss

@@ -1,9 +1,13 @@
-
 /* ==========================================================================
    #WISHLIST-DROPDOWN
    ========================================================================== */
 
 .c-wishlist-dropdown {
+    .c-button {
+        align-items: center;
+        display: inline-flex;
+    }
+
     > ul {
         display: none;
 
@@ -24,9 +28,4 @@
             }
         }
     }
-
-    .c-button {
-        align-items: center;
-        display: inline-flex;
-    }
 }

assets/scss/pages/auth-page.scss

@@ -0,0 +1,21 @@
+.p-auth__section {
+    padding: 1.5rem;
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+
+    @include bp(medium) {
+        padding: 3rem 5rem;
+        gap: 3rem;
+    }
+}
+
+.p-auth__title {
+    color: $color-black;
+    font-family: $font-semi-bold;
+    font-size: 2.625rem;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 1.33;
+    margin: 0;
+}

assets/scss/pages/create-account-page.scss

@@ -0,0 +1,107 @@
+.p-create-account__form {
+    display: grid;
+    gap: 3rem;
+}
+
+.p-create-account__fields {
+    display: grid;
+    grid-template-columns: repeat(1, 1fr);
+    gap: 1.5rem;
+
+    @include bp(medium) {
+        grid-template-columns: repeat(2, 1fr);
+        gap: 3rem;
+    }
+
+    @include bp(large) {
+        grid-template-columns: repeat(3, 1fr);
+        gap: 3rem;
+    }
+
+    .c-form__field {
+        grid-area: auto;
+
+        &:nth-child(1) {
+            @include bp(large) {
+                grid-area: 1 / 1;
+            }
+        }
+
+        &:nth-child(2) {
+            @include bp(large) {
+                grid-area: 2 / 1;
+            }
+        }
+
+        &:nth-child(3) {
+            @include bp(large) {
+                grid-area: 2 / 2;
+            }
+        }
+
+        &:nth-child(4) {
+            @include bp(large) {
+                grid-area: 3 / 1;
+            }
+        }
+
+        &:nth-child(5) {
+            @include bp(large) {
+                grid-area: 3 / 2;
+            }
+        }
+
+        &:nth-child(6) {
+            @include bp(large) {
+                grid-area: 4 / 1;
+            }
+        }
+
+        &:nth-child(7) {
+            @include bp(large) {
+                grid-area: 4 / 2;
+            }
+        }
+
+        &:nth-child(8) {
+            @include bp(large) {
+                grid-area: 5 / 1;
+            }
+        }
+
+        &:nth-child(9) {
+            @include bp(large) {
+                grid-area: 5 / 2;
+            }
+        }
+
+        &:nth-child(10) {
+            @include bp(large) {
+                grid-area: 5 / 3;
+            }
+        }
+
+        &:nth-child(11) {
+            @include bp(large) {
+                grid-area: 6 / 1;
+            }
+        }
+
+        &:nth-child(12) {
+            @include bp(large) {
+                grid-area: 6 / 2;
+            }
+        }
+
+        &:nth-child(13) {
+            @include bp(large) {
+                grid-area: 6 / 3;
+            }
+        }
+
+        .c-form__input,
+        .c-form__input--select {
+            width: 100%;
+        }
+    }
+}

assets/scss/pages/login-page.scss

@@ -1,25 +1,3 @@
-.p-login__section {
-    padding: 1.5rem;
-    display: flex;
-    flex-direction: column;
-    gap: 1.5rem;
-
-    @include bp(medium) {
-        padding: 3rem 5rem;
-        gap: 3rem;
-    }
-}
-
-.p-login__title {
-    color: $color-black;
-    font-family: $font-semi-bold;
-    font-size: 2.625rem;
-    font-style: normal;
-    font-weight: 600;
-    line-height: 1.33;
-    margin: 0;
-}
-
 .p-login__form {
     display: flex;
     flex-direction: column;
@@ -97,14 +75,12 @@
 }
 
 .p-login__customer-intro {
-    strong {
-        color: $color-neutrals-500;
-        font-family: $font-semi-bold;
-        font-size: 1rem;
-        font-style: normal;
-        font-weight: 600;
-        line-height: 1.5rem;
-    }
+    color: $color-neutrals-500;
+    font-family: $font-semi-bold;
+    font-size: 1rem;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 1.5rem;
 }
 
 .p-login__customer-facts {

assets/scss/pages/pages.scss

@@ -1,2 +1,4 @@
 @import './contact-page';
+@import './auth-page';
 @import './login-page';
+@import './create-account-page';

assets/scss/settings/_colors.scss

@@ -2,7 +2,7 @@ $color-gray-6: #666;
 $color-gray-c: #ccc;
 $color-gray-e5: #e5e5e5;
 
-//X-Corner V2
+// X-Corner V2
 
 $color-black: #272727;
 $color-white: white;

assets/scss/tools/_container.scss

@@ -9,7 +9,7 @@
     padding-right: rem-calc(10px);
     margin-left: auto;
     margin-right: auto;
-    
+
     @include bp(medium) {
         padding-left: 0;
         padding-right: 0;

assets/scss/utilities/_colors.scss

@@ -1,4 +1,4 @@
-$u-color-red-300: #d74444;
+$u-color-red-300: $color-red-300;
 
 .u-required {
     color: $u-color-red-300;

assets/scss/utilities/_container.scss

@@ -1,4 +1,3 @@
-
 /* ==========================================================================
    #CONTAINER
    ========================================================================== */

templates/components/common/forms/checkbox.html

@@ -1,6 +1,6 @@
 <div 
     id="{{id}}" 
-    class="js-form-field c-form__checkbox-field" 
+    class="js-form-field c-form__field" 
     data-validation="{{validation}}" 
     {{#if private_id}}
         data-type="{{private_id}}"

templates/components/common/forms/date-options.html

@@ -1,16 +1,16 @@
 {{#unless this.value}}
-    <option class="c-input-option" value="">---</option>
+    <option class="c-form__input" value="">---</option>
     {{#each this.items}}
         <option value="{{value}}">
             {{label}}
         </option>
     {{/each}}
 {{else}}
     {{#unless this.isRequired}}
-        <option class="c-input-option" value="">---</option>
+        <option class="c-form__input" value="">---</option>
     {{/unless}}
     {{#each this.items}}
-        <option class="c-input-option"
+        <option class="c-form__input"
             {{#if ../this.value '==' value}} 
                 selected 
             {{/if}}

templates/components/common/forms/date.html

@@ -1,5 +1,5 @@
 <div 
-    class="js-form-field" 
+    class="js-form-field c-form__field" 
     id="{{id}}" 
     data-validation="{{validation}}" 
     {{#if private_id}}
@@ -15,7 +15,7 @@
         {{/if}}
     </label>
     <div>
-        <div class="js-form-field c-datepicker-field">
+        <div class="js-form-field c-form__field">
             <label for="{{id}}_month" class="u-visually-hidden">Select month</label>
             <select 
                 name="{{month.name}}"
@@ -32,12 +32,12 @@
             {{> components/common/forms/date-options month isRequired=required}}
             </select>
         </div>
-        <div class="js-form-field c-datepicker-field">
+        <div class="js-form-field c-form__field">
             <label for="{{id}}_day" class="u-visually-hidden">Select day</label>
             <select 
                 name="{{day.name}}"
                 id="{{id}}_day"
-                class="js-input js-select-input"
+                class="js-input js-select-input c-form__input c-form__input--select"
                 data-label="day"
                 aria-required="{{required}}"
                 aria-labelledby="{{id}}"
@@ -49,7 +49,7 @@
             {{> components/common/forms/date-options day isRequired=required}}
             </select>
         </div>
-        <div class="js-form-field c-datepicker-field">
+        <div class="js-form-field c-form__field">
             <label for="{{id}}_year" class="u-visually-hidden">Select year</label>
             <select 
                 name="{{year.name}}"

templates/components/common/forms/multiline.html

@@ -1,4 +1,4 @@
-<div class="js-form-field c-textarea-field" id="{{id}}" data-validation="{{validation}}">
+<div class="js-form-field c-form__field" id="{{id}}" data-validation="{{validation}}">
     <label for="{{id}}_input" class="c-form__label">
         {{label}}
         {{#if required}}

templates/components/common/forms/number.html

@@ -1,5 +1,5 @@
 <div
-    class="js-form-field c-number-field"
+    class="js-form-field c-form__field"
     id="{{id}}"
     data-validation="{{validation}}"
 >
@@ -8,7 +8,7 @@
         <small>*</small>
         {{/if}}
     </label>
-    <input type="number" class="js-form-input js-input c-number-input" data-label="{{label}}" data-rule="lowerThan" min="{{limitfrom}}" max="{{limitto}}"
+    <input type="number" class="js-form-input js-input c-form__input" data-label="{{label}}" data-rule="lowerThan" min="{{limitfrom}}" max="{{limitto}}"
     title="{{lang 'forms.range' limitFrom=limitfrom limitTo=limitto}}" value="{{value}}" id="{{id}}_input" name="{{name}}"
     aria-required="{{required}}" aria-labelledby="{{id}}" aria-live="polite" {{#if private_id}} data-field-type="{{private_id}}" {{/if}} {{#if
     required}} required {{/if}} >

templates/components/common/forms/password.html

@@ -1,5 +1,5 @@
 <div 
-    class="js-form-field c-password-field" 
+    class="js-form-field c-form__field" 
     id="{{id}}" 
     data-validation="{{validation}}" 
     {{#if private_id}}
@@ -14,7 +14,7 @@
     </label>
     <input 
         type="password"
-        class="js-form-input c-form__input c-form__input--password"
+        class="js-form-input c-form__input"
         id="{{id}}_input"
         data-label="{{label}}"
         name="{{name}}"

templates/components/common/forms/radio.html

@@ -1,5 +1,5 @@
 <div
-    class="js-form-field c-form__radio-field"
+    class="js-form-field c-form__field"
     id="{{id}}"
     data-validation="{{validation}}"
 >

templates/components/common/forms/select.html

@@ -1,5 +1,5 @@
 <div 
-    class="js-form-field c-select-field" 
+    class="js-form-field c-form__field" 
     id="{{id}}" 
     data-validation="{{validation}}" 
     {{#if private_id}} 

templates/components/common/forms/selectortext.html

@@ -1,5 +1,5 @@
 <div 
-    class="js-form-field c-text-field" 
+    class="js-form-field c-form__field" 
     id="{{id}}" 
     data-validation="{{validation}}" 
     {{#if private_id}}
@@ -18,7 +18,7 @@
             id="{{id}}_input"
             name="{{name}}"
             value="{{value}}"
-            class="js-form-input js-input c-form__input c-form__input--text"
+            class="js-form-input js-input c-form__input"
             aria-required="{{required}}"
             aria-labelledby="{{id}}"
             aria-live="polite"