cruc components for Magento 2

Account Form: Registration 

<div class="account-form">
    <p class="account-form__info">
        Creating an account has many benefits: check out faster, keep more than one address, track orders and more.
    </p>
    <form class="account-form__form">
        <fieldset class="
                fieldset account-form__fieldset
                margin-bottom-xl
            ">
            <legend class="
                    fieldset__legend
                    account-form__legend
                    
                ">
                Personal information
            </legend>
            <div class="input margin-bottom-sm">
                <label class="
            label
            input__label
            
        " for="firstname">
        First name *
    </label>
                <input class="input__field " id="firstname" name="fisrtname" type="text" placeholder="" aria-required="true" autocomplete="name" required>
            </div>

            <div class="input margin-bottom-sm">
                <label class="
            label
            input__label
            
        " for="lastname">
        Last name *
    </label>
                <input class="input__field " id="lastname" name="lastname" type="text" placeholder="" aria-required="true" autocomplete="family-name" required>
            </div>

            <div class="checkbox account-form__newsletter-checkbox">
                <input type="checkbox" id="is_subscribed" name="is_subscribed" class="checkbox__field account-form__newsletter-checkbox-field">
                <svg class="
            checkbox__icon
            checkbox__icon--checked
            
        " role="presentation">
        <use xlink:href="/images/icons-sprite.svg#checked"></use>
    </svg>
                <svg class="
            checkbox__icon
            checkbox__icon--unchecked
            
        " role="presentation">
        <use xlink:href="/images/icons-sprite.svg#unchecked"></use>
    </svg>
                <label for="is_subscribed" class="checkbox__label account-form__newsletter-checkbox-label">
        <span class="checkbox__text">
            Sign Up for Newsletter
        </span>
    </label>
            </div>

        </fieldset>
        <fieldset class="
                fieldset account-form__fieldset
                
            ">
            <legend class="account-form__legend">
                Sign-In information
            </legend>
            <div class="input margin-bottom-sm">
                <label class="
            label
            input__label
            
        " for="registration-email">
        Email *
    </label>
                <input class="input__field " id="registration-email" name="email" type="email" placeholder="" aria-required="true" autocomplete="email" required>
            </div>

            <div class="margin-bottom-sm">
                <div class="input input--password margin-bottom-m">
                    <label class="
           label
           input__label
           
       " for="registration-password">
        Password *
    </label>
                    <input class="input__field " id="registration-password" name="password" type="password" placeholder="" aria-required="true" autocomplete="off" required>
                    <button type="button" class="
            button
            button--icon
            input__button-pass
        " aria-label="Show/hide password">
        <svg
    class="icon icon--secondary input__button-pass-icon-view"
    
        role="presentation"
        focusable="false"
>
        <title>view password icon</title>
    <use xlink:href="/images/icons-sprite.svg#visibility-off"></use>
</svg>

        <svg
    class="icon icon--secondary input__button-pass-icon-hide"
    
        role="presentation"
        focusable="false"
>
        <title>hide password icon</title>
    <use xlink:href="/images/icons-sprite.svg#visibility"></use>
</svg>

    </button>
                </div>
                <script src="/components/raw/input/input-password.js"></script>

                <div class="account-form__password-strength">
                    <div class="password-strength password-none">
                        <div class="password-strength__handle ">
                            Password Strength:
                            <span class="password-strength__indicator" aria-live="polite">
            No Password
        </span>
                        </div>
                    </div>

                </div>
            </div>
            <div class="input input--password margin-bottom-sm">
                <label class="
           label
           input__label
           
       " for="registration-confirm-password">
        Confirm password *
    </label>
                <input class="input__field " id="registration-confirm-password" name="password-confirmation" type="password" placeholder="" aria-required="true" autocomplete="off" required>
                <button type="button" class="
            button
            button--icon
            input__button-pass
        " aria-label="Show/hide password">
        <svg
    class="icon icon--secondary input__button-pass-icon-view"
    
        role="presentation"
        focusable="false"
>
        <title>view password icon</title>
    <use xlink:href="/images/icons-sprite.svg#visibility-off"></use>
</svg>

        <svg
    class="icon icon--secondary input__button-pass-icon-hide"
    
        role="presentation"
        focusable="false"
>
        <title>hide password icon</title>
    <use xlink:href="/images/icons-sprite.svg#visibility"></use>
</svg>

    </button>
            </div>
            <script src="/components/raw/input/input-password.js"></script>

        </fieldset>
        <div class="account-form__actions">
            <button class="button account-form__button">
    Create an Account
</button>

        </div>
        <div class="account-form__validation-tips">
            * Required Fields
        </div>
    </form>
</div>
 
<div class="account-form">
    <p class="account-form__info">
        {{{ signUpInfo }}}
    </p>
    <form class="account-form__form">
        <fieldset
            class="
                fieldset account-form__fieldset
                {{ personalSection.fieldset.class }}
            "
            {{ personalSection.fieldset.attributes }}
        >
            <legend
                class="
                    fieldset__legend
                    account-form__legend
                    {{ personalSection.legend.class }}
                "
                {{ personalSection.legend.attributes }}
            >
                {{ personalSection.legend.text }}
            </legend>
            {{ render '@input' firstName }}
            {{ render '@input' lastName }}
            {{ render '@checkbox' newsletterCheckbox }}
        </fieldset>
        <fieldset
            class="
                fieldset account-form__fieldset
                {{ signInSection.fieldset.class }}
            "
            {{ signInSection.fieldset.attributes }}
        >
            <legend
                class="{{ signInSection.legend.class }}"
                {{ signInSection.legend.attributes }}
            >
                {{ signInSection.legend.text }}
            </legend>
            {{ render '@input' email }}
            <div class="{{ passwordWrapClass }}">
                {{ render '@input--password' password merge=true }}
                <div class="account-form__password-strength">
                    {{ render '@password-strength' passwordStrength.none }}
                </div>
            </div>
            {{ render '@input--password' passwordConfirmation merge=true }}
        </fieldset>
        <div class="account-form__actions">
            {{ render '@button' registrationButton }}
        </div>
        <div class="account-form__validation-tips">
            {{{ validationTips }}}
        </div>
    </form>
</div>
 
{
  "signInInfo": "If you have an account, sign in with your email address.",
  "signInSection": {
    "fieldset": {
      "attributes": "",
      "class": ""
    },
    "legend": {
      "class": "account-form__legend",
      "text": "Sign-In information"
    }
  },
  "email": {
    "attributes": "",
    "class": "margin-bottom-sm",
    "label": {
      "attributes": "",
      "text": "Email *",
      "hidden": false
    },
    "field": {
      "attributes": "aria-required=\"true\" autocomplete=\"email\" required",
      "class": "",
      "id": "registration-email",
      "name": "email",
      "placeholder": "",
      "type": "email"
    }
  },
  "passwordWrapClass": "margin-bottom-sm",
  "password": {
    "attributes": "",
    "class": "margin-bottom-m",
    "label": {
      "attributes": "",
      "text": "Password *",
      "hidden": false
    },
    "field": {
      "attributes": "aria-required=\"true\" autocomplete=\"off\" required",
      "class": "",
      "id": "registration-password",
      "name": "password",
      "placeholder": "",
      "type": "password"
    },
    "script": true,
    "passwordTrigger": true
  },
  "loginButton": {
    "class": "account-form__button",
    "tag": "button",
    "text": "Sign in"
  },
  "forgotPassword": {
    "text": "Forgot Your Password",
    "class": "account-form__forgot-password"
  },
  "validationTips": "* Required Fields",
  "signUpInfo": "Creating an account has many benefits: check out faster, keep more than one address, track orders and more.",
  "personalSection": {
    "fieldset": {
      "attributes": "",
      "class": "margin-bottom-xl"
    },
    "legend": {
      "class": "",
      "text": "Personal information"
    }
  },
  "firstName": {
    "attributes": "",
    "class": "margin-bottom-sm",
    "label": {
      "attributes": "",
      "text": "First name *",
      "hidden": false
    },
    "field": {
      "attributes": "aria-required=\"true\" autocomplete=\"name\" required",
      "class": "",
      "id": "firstname",
      "name": "fisrtname",
      "placeholder": "",
      "type": "text"
    }
  },
  "lastName": {
    "attributes": "",
    "class": "margin-bottom-sm",
    "label": {
      "attributes": "",
      "text": "Last name *",
      "hidden": false
    },
    "field": {
      "attributes": "aria-required=\"true\" autocomplete=\"family-name\" required",
      "class": "",
      "id": "lastname",
      "name": "lastname",
      "placeholder": "",
      "type": "text"
    }
  },
  "newsletterCheckbox": {
    "class": "account-form__newsletter-checkbox",
    "id": "is_subscribed",
    "name": "is_subscribed",
    "label": {
      "text": "Sign Up for Newsletter",
      "class": "account-form__newsletter-checkbox-label"
    },
    "input": {
      "class": "account-form__newsletter-checkbox-field"
    },
    "icon": {
      "class": "account-form__newsletter-checkbox-icon"
    }
  },
  "passwordConfirmation": {
    "passwordTrigger": true,
    "attributes": "",
    "class": "margin-bottom-sm",
    "label": {
      "attributes": "",
      "text": "Confirm password *",
      "hidden": false
    },
    "field": {
      "attributes": "aria-required=\"true\" autocomplete=\"off\" required",
      "class": "",
      "id": "registration-confirm-password",
      "name": "password-confirmation",
      "placeholder": "",
      "type": "password"
    }
  },
  "passwordStrength": {
    "none": {
      "text": "Password Strength:",
      "noPassword": "No Password",
      "class": "password-none"
    },
    "weak": {
      "text": "",
      "noPassword": "Weak",
      "class": "password-weak"
    },
    "medium": {
      "text": "",
      "noPassword": "Medium",
      "class": "password-medium"
    },
    "strong": {
      "text": "",
      "noPassword": "Strong",
      "class": "password-strong"
    },
    "veryStrong": {
      "text": "",
      "noPassword": "Very strong",
      "class": "password-very-strong"
    }
  },
  "registrationButton": {
    "class": "account-form__button",
    "tag": "button",
    "text": "Create an Account"
  }
}
  • Content: 
    $account-form__padding                              : $spacer 0 0 !default;
$account-form__actions-margin                       : $spacer--medium 0 !default;
$account-form__actions-width                        : 100% !default;
$account-form__actions-width\@medium                : auto !default;

$account-form__button-min-width                     : 208px !default;

$account-form__form-margin                          : 0 !default;

$account-form__fieldset-max-width\@medium           : 432px !default;
$account-form__fieldset-width                       : 100% !default;
$account-form__fieldset-margin                      : 0 0 $spacer--semi-large !default;

$account-form__legend-font-family                   : $font-family-base !default;
$account-form__legend-font-size                     : $font-size-large !default;
$account-form__legend-font-weight                   : $font-weight-bold !default;
$account-form__legend-margin                        : 0 !default;
$account-form__legend-padding                       : 0 0 $spacer--medium 0 !default;
$account-form__legend-width                         : 100% !default;
$account-form__legend-text-transform                : none !default;

$account-form__forgot-password-margin               : $spacer--medium 0 0 0 !default;
$account-form__forgot-password-color                : $gray-darker !default;
$account-form__forgot-password-font-weight          : $font-weight-bold !default;
$account-form__forgot-password-text-decoration      : none !default;
$account-form__forgot-password-text-decoration-hover: underline !default;
$account-form__forgot-password-line-height          : 48px !default;

$account-form__info-width                           : 656px !default;
$account-form__info-margin                          : $spacer--extra-large auto !default;
$account-form__info-font-size                       : $font-size-medium !default;

$account-form__validation-tips-margin               : 0 0 $spacer--semi-medium !default;
$account-form__validation-tips-font-size            : $font-size-medium !default;
  • URL: /components/raw/account-form/_account-form-variables.scss
  • Filesystem Path: build/components/Organisms/account-form/_account-form-variables.scss
  • Size: 2.1 KB
  • Content: 
    @import 'account-form-variables';

//sass-lint: disable no-ids
.account-form {
    padding: $account-form__padding;

    &__info {
        max-width: $account-form__info-width;
        margin: $account-form__info-margin;
        font-size: $account-form__info-font-size;
        text-align: center;
    }

    &__form {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: $account-form__form-margin;
    }

    &__fieldset {
        width: $account-form__fieldset-width;
        margin: $account-form__fieldset-margin;

        @include mq($screen-m) {
            max-width: $account-form__fieldset-max-width\@medium;
        }
    }

    &__legend {
        margin: $account-form__legend-margin;
        padding: $account-form__legend-padding;
        width: $account-form__legend-width;
        font-family: $account-form__legend-font-family;
        font-size: $account-form__legend-font-size;
        font-weight: $account-form__legend-font-weight;
        text-transform: $account-form__legend-text-transform;
        text-align: center;

        &--hidden {
            @include visually-hidden();
        }
    }

    &__actions {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        width: $account-form__actions-width;
        margin: $account-form__actions-margin;

        @include mq($screen-m) {
            width: $account-form__actions-width\@medium;
        }
    }

    &__button {
        width: 100%;
        min-width: $account-form__button-min-width;
    }

    &__forgot-password,
    &__link {
        margin: $account-form__forgot-password-margin;
        color: $account-form__forgot-password-color;
        font-weight: $account-form__forgot-password-font-weight;
        text-decoration: $account-form__forgot-password-text-decoration;
        line-height: $account-form__forgot-password-line-height;

        &.focus-visible,
        &:hover {
            text-decoration: $account-form__forgot-password-text-decoration-hover;
        }
    }

    &__validation-tips {
        margin: $account-form__validation-tips-margin;
        font-size: $account-form__validation-tips-font-size;
    }

    .input {
        &.customer-name-prefix {
            .form__fieldset {
                display: flex;
                justify-content: space-between;
                border: 0;
                padding: 0;

                label.input__label[for="firstname"] {
                    display: none;

                    & ~ .form__fieldset .input__label[for="firstname"] {
                        display: block;
                    }
                }
            }
        }
        &.required.customer-name-prefix {
            margin: 0;
        }
    }
}
.customer-account-create {
    .form-create-account {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: $account-form__form-margin;
        @include mq($screen-l) {
            display: grid;
            grid-template-columns: 1fr 1fr;
            align-items: stretch;
            margin: auto;
            max-width: 900px;
        }
        .account-form__fieldset {
            display: flex;
            flex-wrap: wrap;
            & ~ fieldset.fieldset.account-form__fieldset {
                display: block;
            }
            .field.checkbox,
            .field.choice,
            .field.taxvat,
            .field.company,
            .field.date.field-dob,
            .input--datepicker,
            .input--password,
            .account-form__input {
                width: 100%;
            }
            input#firstname {
                margin-right: 12px;
            }
            input#lastname {
                margin-left: 12px;
            }
        }
    }
    .checkbox {
        display: flex;
        align-items: center;
    }
}
//sass-lint: enable no-ids
  • URL: /components/raw/account-form/_account-form.scss
  • Filesystem Path: build/components/Organisms/account-form/_account-form.scss
  • Size: 4 KB

There are no notes for this item.