Alpaca components for Magento 2

Form 

<form class="dashboard-form ">
    <h2 class="dashboard-form__title margin-bottom-sm">
        Account Information
    </h2>

    <fieldset class="
            fieldset
            margin-bottom-sm
        ">
        <div class="input margin-bottom-sm">
            <label class="
            label
            input__label
            
        " for="firstName">
                Firist name
            </label>
            <input class="input__field " id="firstName" name="firstName" type="" placeholder="Firist name">
        </div>

        <div class="input margin-bottom-sm">
            <label class="
            label
            input__label
            
        " for="secondName">
                Second name
            </label>
            <input class="input__field " id="secondName" name="secondName" type="" placeholder="Second name">
        </div>

        <div class="checkbox ">
            <input type="checkbox" id="changeEmail" name="changeEmail" class="checkbox__field ">
            <svg class="
            checkbox__icon
            checkbox__icon--checked
            
        " role="presentation">
                <use href="/images/icons-sprite.svg#checked"></use>
            </svg>
            <svg class="
            checkbox__icon
            checkbox__icon--unchecked
            
        " role="presentation">
                <use href="/images/icons-sprite.svg#unchecked"></use>
            </svg>
            <label for="changeEmail" class="checkbox__label ">
                <span class="checkbox__text">
                    Change Email
                </span>
            </label>
        </div>

        <div class="checkbox margin-bottom-sm">
            <input type="checkbox" id="changePassword" name="changePassword" class="checkbox__field ">
            <svg class="
            checkbox__icon
            checkbox__icon--checked
            
        " role="presentation">
                <use href="/images/icons-sprite.svg#checked"></use>
            </svg>
            <svg class="
            checkbox__icon
            checkbox__icon--unchecked
            
        " role="presentation">
                <use href="/images/icons-sprite.svg#unchecked"></use>
            </svg>
            <label for="changePassword" class="checkbox__label ">
                <span class="checkbox__text">
                    Change Password
                </span>
            </label>
        </div>

        <div class="
                dashboard-form__fields
                dashboard-form--hidden
                margin-bottom-sm
             ">
            <h2 class="
                    heading
                    dashboard-form__title-form
                    margin-bottom-sm
                ">
                Change
            </h2>

            <div class="input margin-bottom-sm dashboard-form--hidden email">
                <label class="
            label
            input__label
            
        " for="email">
                    Email
                </label>
                <input class="input__field " id="email" name="email" type="" placeholder="">
            </div>

            <div class="input input--password margin-bottom-sm dashboard-form--hidden password">
                <label class="
           label
           input__label
           
       " for="password">
                    Current Password
                </label>
                <input class="input__field " id="password" name="password" type="password" placeholder="Current Password">
                <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 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 href="/images/icons-sprite.svg#visibility"></use>
                    </svg>

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

            <div class="input input--password margin-bottom-sm dashboard-form--hidden newPassword">
                <label class="
           label
           input__label
           
       " for="newPassword">
                    New Password
                </label>
                <input class="input__field " id="newPassword" name="newPassword" type="password" placeholder="New Password">
                <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 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 href="/images/icons-sprite.svg#visibility"></use>
                    </svg>

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

            <div class="input input--password margin-bottom-sm dashboard-form--hidden confirmPassword">
                <label class="
           label
           input__label
           
       " for="confirmPassword">
                    Confirm New Password
                </label>
                <input class="input__field " id="confirmPassword" name="confirmPassword" type="password" placeholder="Confirm New Password">
                <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 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 href="/images/icons-sprite.svg#visibility"></use>
                    </svg>

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

        </div>
    </fieldset>

</form>
<script src="/components/raw/dashboard-form/../dashboard-form/form.js"></script>
 
<form class="dashboard-form {{ class }}">
    {{ render '@heading' title }}

    <fieldset
        class="
            fieldset
            {{ contentClass }}
        "
    >
        {{#each fields }}
            {{ render '@input' input }}
        {{/each}}

        {{#each textareas }}
            {{ render '@input--textarea' textarea }}
        {{/each}}

        {{#each selects }}
            {{ render '@select' select merge=true }}
        {{/each}}

        {{#each checkboxes }}
            {{ render '@checkbox' checkbox }}
        {{/each}}

        <div
            class="
                dashboard-form__fields
                dashboard-form--hidden
                {{ fieldsClass }}
             "
        >
            <h2
                class="
                    heading
                    dashboard-form__title-form
                    {{ formTitleClass }}
                "
            >
                {{ formTitle }}
            </h2>

            {{#each hiddenFields}}
                {{#if hiddenField.password }}
                    {{ render '@input--password' hiddenField merge=true }}
                {{else}}
                    {{ render '@input' hiddenField }}
                {{/if}}
            {{/each}}
        </div>
    </fieldset>

    {{#if formButton}}
        {{ render '@actions-group' formButton }}
    {{/if}}

</form>
{{#if script}}
    <script src="{{ static '../dashboard-form/form.js' }}"></script>
{{/if}}
 
{
  "script": true,
  "title": {
    "tag": "h2",
    "class": "dashboard-form__title margin-bottom-sm",
    "text": "Account Information"
  },
  "contentClass": "margin-bottom-sm",
  "fieldsClass": "margin-bottom-sm",
  "fields": [
    {
      "input": {
        "class": "margin-bottom-sm",
        "field": {
          "id": "firstName",
          "name": "firstName",
          "placeholder": "Firist name"
        },
        "label": {
          "attributes": "",
          "text": "Firist name"
        }
      }
    },
    {
      "input": {
        "class": "margin-bottom-sm",
        "field": {
          "id": "secondName",
          "name": "secondName",
          "placeholder": "Second name"
        },
        "label": {
          "attributes": "",
          "text": "Second name"
        }
      }
    }
  ],
  "formTitle": "Change",
  "formTitleClass": "margin-bottom-sm",
  "checkboxes": [
    {
      "checkbox": {
        "id": "changeEmail",
        "name": "changeEmail",
        "label": {
          "text": "Change Email"
        }
      }
    },
    {
      "checkbox": {
        "class": "margin-bottom-sm",
        "id": "changePassword",
        "name": "changePassword",
        "label": {
          "text": "Change Password"
        }
      }
    }
  ],
  "hiddenFields": [
    {
      "hiddenField": {
        "class": "margin-bottom-sm dashboard-form--hidden email",
        "label": {
          "text": "Email"
        },
        "field": {
          "id": "email",
          "name": "email"
        }
      }
    },
    {
      "hiddenField": {
        "password": true,
        "class": "margin-bottom-sm dashboard-form--hidden password",
        "label": {
          "text": "Current Password"
        },
        "field": {
          "id": "password",
          "name": "password",
          "placeholder": "Current Password"
        }
      }
    },
    {
      "hiddenField": {
        "password": true,
        "class": "margin-bottom-sm dashboard-form--hidden newPassword",
        "label": {
          "text": "New Password"
        },
        "field": {
          "id": "newPassword",
          "name": "newPassword",
          "placeholder": "New Password"
        }
      }
    },
    {
      "hiddenField": {
        "password": true,
        "class": "margin-bottom-sm dashboard-form--hidden confirmPassword",
        "label": {
          "text": "Confirm New Password"
        },
        "field": {
          "id": "confirmPassword",
          "name": "confirmPassword",
          "placeholder": "Confirm New Password"
        }
      }
    }
  ]
}
  • Content: 
    $dashborad-form__title-font-family  : $font-family-base !default;
$dashborad-form__title-font-size    : $font-size-large !default;
$dashborad-form__title-font-weight  : $font-weight-bold !default;
$dashborad-form__title-padding      : $spacer--medium !default;
$dashborad-form__title-background   : $bg-color-secondary !default;
$dashborad-form__title-border       : $border-secondary !default;
$dashborad-form__title-border-width : 0 0 $border-width-secondary !default;

$dashboard-form__label-font-size    : $font-size-medium !default;

.dashboard-form {
    &__title {
        padding: $dashborad-form__title-padding;
        background: $dashborad-form__title-background;
        font-family: $dashborad-form__title-font-family;
        font-size: $dashborad-form__title-font-size;
        font-weight: $dashborad-form__title-font-weight;
        border: $dashborad-form__title-border;
        border-width: $dashborad-form__title-border-width;
    }

    &--hidden {
        display: none;
    }

    .label,
    .input__label,
    .input__field,
    select {
        font-size: $dashboard-form__label-font-size;
    }
}
  • URL: /components/raw/dashboard-form/_form.scss
  • Filesystem Path: build/components/Organisms/dashboard/form/_form.scss
  • Size: 1.1 KB
  • Content: 
    // this script is only for for components, it mirrors the dashboard form change password behavior,
// we don't use it in Theme implementation
'use strict';

class DashboardForm {
  constructor(checkboxPassword) {
    this.checkboxPassword = checkboxPassword;
    this.checkboxEmail = document.querySelector('input#changeEmail'),
    this.confirmPassword = document.querySelector('.confirmPassword'),
    this.email = document.querySelector('.email'),
    this.fields = document.querySelector('.dashboard-form__fields'),
    this.newPassword = document.querySelector('.newPassword'),
    this.password = document.querySelector('.password'),
    this.title = document.querySelector('.dashboard-form__title-form'),
    this.toggledClass = 'dashboard-form--hidden';

    if (this.checkboxEmail) {
      this.checkboxEmail.addEventListener('change', () => {
        if (this.checkboxPassword.checked && this.checkboxEmail.checked) {
          this.title.innerHTML = 'Change Email and Password';

          this.toggleElements(4);
        }
        else if (this.checkboxPassword.checked && !this.checkboxEmail.checked) {
          this.title.innerHTML = 'Change Password';

          this.toggleElements(1);
        }
        else {
          this.fields.classList.toggle(this.toggledClass);
          this.title.innerHTML = 'Change Email';

          this.toggleElements(2);
        }
      });
    }
    if (this.checkboxPassword) {
      this.checkboxPassword.addEventListener('change', () => {
        if (this.checkboxEmail.checked && this.checkboxPassword.checked) {
          this.title.innerHTML = 'Change Email and Password';

          this.toggleElements(4);
        }
        else if (this.checkboxEmail.checked && !this.checkboxPassword.checked) {
          this.title.innerHTML = 'Change Email';

          this.toggleElements(2);
        }
        else {
          this.fields.classList.toggle(this.toggledClass);
          this.title.innerHTML = 'Change Password';

          this.toggleElements(1);
        }
      });
    }
  }

  toggleElements(elements) {
    if (elements === 4) {
      this.email.classList.remove(this.toggledClass);
      this.password.classList.remove(this.toggledClass);
      this.newPassword.classList.remove(this.toggledClass);
      this.confirmPassword.classList.remove(this.toggledClass);
    }
    else if (elements === 2) {
      this.email.classList.remove(this.toggledClass);
      this.password.classList.remove(this.toggledClass);
      this.newPassword.classList.add(this.toggledClass);
      this.confirmPassword.classList.add(this.toggledClass);
    }
    else if (elements === 1) {
      this.email.classList.add(this.toggledClass);
      this.password.classList.remove(this.toggledClass);
      this.newPassword.classList.remove(this.toggledClass);
      this.confirmPassword.classList.remove(this.toggledClass);
    }
  }
}
new DashboardForm(document.querySelector('input#changePassword'));
  • URL: /components/raw/dashboard-form/form.js
  • Filesystem Path: build/components/Organisms/dashboard/form/form.js
  • Size: 2.9 KB

No notes defined.