snurky 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                : uppercase !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';

.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;
    }
}
  • URL: /components/raw/account-form/_account-form.scss
  • Filesystem Path: build/components/Organisms/account-form/_account-form.scss
  • Size: 2.2 KB

There are no notes for this item.