18 |
--------------------------------------------------------------------------------
/components/02-elements/price/_price.scss:
--------------------------------------------------------------------------------
1 | $price__spacing : $spacer !default;
2 | $price__color--special : $green !default;
3 | $price__font-weight : $font-weight-bold !default;
4 | $price__font-weight--old : $font-weight-normal !default;
5 | $price__font-weight--special: $font-weight-bold !default;
6 |
7 | .price {
8 | &__value {
9 | font-weight: $price__font-weight;
10 |
11 | &--old {
12 | text-decoration: line-through;
13 | font-weight: $price__font-weight--old;
14 | margin-right: $price__spacing;
15 | }
16 |
17 | &--special {
18 | color: $price__color--special;
19 | font-weight: $price__font-weight--special;
20 |
21 | & > ins {
22 | text-decoration: none;
23 | }
24 | }
25 |
26 | &--between {
27 | display: block;
28 |
29 | &:last-child {
30 | margin-top: $price__spacing;
31 | }
32 | }
33 | }
34 |
35 | &__text {
36 | font-weight: $price__font-weight--old;
37 | }
38 | }
39 |
--------------------------------------------------------------------------------
/components/02-elements/price/price.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | name: 'price',
3 | context: {
4 | regularPrice: '1 400.00',
5 | specialPrice: '',
6 | prefix: {
7 | tag: '',
8 | text: '$'
9 | },
10 | suffix: {
11 | tag: '',
12 | text: ''
13 | },
14 | },
15 | variants: [
16 | {
17 | name: 'with-special-price',
18 | context: {
19 | oldPriceClass: '',
20 | prefix: {
21 | tag: '',
22 | closingTag: '',
23 | text: '$'
24 | },
25 | regularPrice: '1 400.00',
26 | regularPriceClass: '',
27 | specialPrice: '1 299.99',
28 | specialPriceClass: '',
29 | suffix: {
30 | tag: '',
31 | closingTag: '',
32 | text: ''
33 | },
34 | }
35 | },
36 | {
37 | name: 'between',
38 | context: {
39 | priceClass: 'price__value--between',
40 | textBeforeFromPrice: 'From',
41 | textBeforeToPrice: 'To',
42 | fromPrice: '61.00',
43 | toPrice: '79.00',
44 | }
45 | }
46 | ]
47 | }
48 |
--------------------------------------------------------------------------------
/components/02-elements/price/price.hbs:
--------------------------------------------------------------------------------
1 |
20 |
--------------------------------------------------------------------------------
/components/02-elements/rating/README.md:
--------------------------------------------------------------------------------
1 | # Rating component
2 |
3 | ## Accessible rating
4 | * Rating component (which shows the average rate) should be focusable (`tabindex="0"`) and should have `aria-label` set with descriptive value and average rating value.
5 | * Rating--rate component has to be usable with keyboard.
6 | It acts like a small form with `input type="button"` behing the stars. moving focus we see that background changes and with space click we can set the field selected/star active.
7 |
8 | What should be done to keep it working for AT:
9 | * keep ratio inputs in `fieldset` and add `legend` to set some label
10 | * use `role="listbox"` `aria-required="true"` and `aria-labelledby="
"` to make list of options with required rating field
11 | * use `role="option"` & `aria-selected` on the input radio wrapper
12 | * use `aria-label` for input radio `label` elements
13 |
--------------------------------------------------------------------------------
/components/02-elements/rating/rating.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | context: {
3 | ariaLabel: 'Average rating: 72%',
4 | title: 'Average rating: 72%',
5 | star: {
6 | attributes: 'style="width: 72%"'
7 | }
8 | },
9 | variants: [
10 | {
11 | name: 'rate',
12 | context: {
13 | script: true,
14 | star: {
15 | attributes: ''
16 | },
17 | rateItems: [
18 | {
19 | id: 'Rating_1',
20 | name: 'ratings[1]',
21 | labelText: 'Rate option, 1 of 5. Click to vote'
22 | },
23 | {
24 | id: 'Rating_2',
25 | name: 'ratings[2]',
26 | labelText: 'Rate option, 2 of 5. Click to vote'
27 | },
28 | {
29 | id: 'Rating_3',
30 | name: 'ratings[3]',
31 | labelText: 'Rate option, 3 of 5. Click to vote'
32 | },
33 | {
34 | id: 'Rating_4',
35 | name: 'ratings[4]',
36 | labelText: 'Rate option, 4 of 5. Click to vote'
37 | },
38 | {
39 | id: 'Rating_5',
40 | name: 'ratings[5]',
41 | labelText: 'Rate option, 5 of 5. Click to vote'
42 | }
43 | ]
44 | }
45 | }
46 | ]
47 | }
48 |
--------------------------------------------------------------------------------
/components/02-elements/rating/rating.hbs:
--------------------------------------------------------------------------------
1 |
22 |
--------------------------------------------------------------------------------
/components/02-elements/skip-nav/_skip-nav.scss:
--------------------------------------------------------------------------------
1 | .skip-nav {
2 | @include visually-hidden('focus');
3 | padding: 12px $spacer--extra-large;
4 | top: 0;
5 | left: 0;
6 |
7 | &.focus-visible,
8 | &:hover {
9 | position: absolute;
10 | margin: $spacer;
11 | background-color: $color-primary;
12 | color: $black;
13 | }
14 |
15 | &--relative {
16 | &.focus-visible,
17 | &:hover {
18 | display: block;
19 | position: relative;
20 | margin: $spacer--medium;
21 | }
22 | }
23 | }
24 |
--------------------------------------------------------------------------------
/components/02-elements/skip-nav/skip-nav--list.hbs:
--------------------------------------------------------------------------------
1 |
13 |
14 | {{#if script}}
15 |
16 | {{/if}}
17 |
--------------------------------------------------------------------------------
/components/02-elements/skip-nav/skip-nav.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | context: {
3 | text: 'Skip to content',
4 | anchor: '#maincontent',
5 | script: true
6 | },
7 | variants: [
8 | {
9 | name: 'list',
10 | context: {
11 | anchor: [
12 | {
13 | value: '#header',
14 | text: 'Go to top'
15 | },
16 | {
17 | value: '#maincontent',
18 | text: 'Go to main content'
19 | }
20 | ]
21 | }
22 | }
23 | ]
24 | }
25 |
--------------------------------------------------------------------------------
/components/02-elements/skip-nav/skip-nav.hbs:
--------------------------------------------------------------------------------
1 |
5 | {{ text }}
6 |
7 | {{#if script}}
8 |
9 | {{/if}}
10 |
--------------------------------------------------------------------------------
/components/02-elements/skip-nav/skip-nav.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 | const skipNavLink = document.querySelector('.skip-nav');
3 |
4 | function skipNavigation(skipElem) {
5 | skipElem.addEventListener('click', (e) => {
6 | let targetElem = document.querySelector(e.target.hash);
7 | if (targetElem) {
8 | targetElem.setAttribute('tabindex', -1)
9 | targetElem.focus();
10 | targetElem.addEventListener('focusout', (e) => {
11 | e.target.removeAttribute('tabindex');
12 | })
13 | }
14 | })
15 | }
16 |
17 | skipNavigation(skipNavLink);
18 |
--------------------------------------------------------------------------------
/components/02-elements/swatch/README.md:
--------------------------------------------------------------------------------
1 | # Swatches accessibility
2 |
3 | Swatches require following aria structure to be accessible for assistive technology and keyboard:
4 |
5 | 1. Swatches wrapper `.swatch__wrapper` should have following aria attributes:
6 | * `role="listbox"` to easy list swatch's options
7 | * `aria-activedescendant` with value of selected swatch option
8 | * `tabindex="0"` to make element focusable
9 | * `aria-required` with value `true` or `false` depending if swatch option is required
10 | * `aria-invalid` with value `true` if required field is not filled (if none of options is selected) or with the value `false` if required field is field (option is selected)
11 |
12 | 2. Swatch option `.swatch__option` should have following aria attributes:
13 | * `role="option"` to show options of swatch
14 | * `tabindex="0"` to make element focusable
15 | * `aria-label` with value of the name/label of swatch option if the swatch option is not a text but graphic element - icon or image (color option - ex: "Green")
16 | * `aria-describedby` with value of the listbox label/heading if exist
17 | * `aria-selected` with value `true` if the option was selected
18 |
--------------------------------------------------------------------------------
/components/02-elements/swatch/swatch.hbs:
--------------------------------------------------------------------------------
1 |
2 | {{#if heading}}
3 | <{{{ heading.tag }}}
4 | id="{{ heading.id }}"
5 | class="swatch__title {{ heading.class }}"
6 | >
7 | {{ heading.text }}
8 |
9 | {{/if}}
10 |
11 |
15 | {{#each options }}
16 |
24 |
28 | {{ this.text }}
29 |
30 |
31 | {{/each }}
32 |
33 |
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
'
21 | },
22 | secondSection: {
23 | class: '',
24 | html: 'It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
'
25 | }
26 | }
27 | };
28 |
--------------------------------------------------------------------------------
/components/03-modules/additional-content/additional-content.hbs:
--------------------------------------------------------------------------------
1 |
2 | {{ render '@image--picture' image }}
3 |
4 |
5 | {{{ firstSection.html }}}
6 |
7 |
8 | {{{ secondSection.html }}}
9 |
10 |
11 |
2 | <{{heading.tag}} class="brief-info__heading {{heading.class}}">
3 | {{heading.text}}
4 |
5 |
25 |
2 | {{#if title}}
3 | <{{{title.tag}}} class="bundle-option__title">
4 | {{ title.message }}
5 |
6 | {{/if}}
7 |
8 | {{#each checkboxes }}
9 | {{ render '@checkbox' this merge=true }}
10 | {{/each}}
11 |
12 | {{#if qty }}
13 | {{ render '@input' qty merge=true }}
14 | {{/if}}
15 |
16 |
--------------------------------------------------------------------------------
/components/03-modules/bundle-option/bundle-option--select.hbs:
--------------------------------------------------------------------------------
1 |
2 | {{#if title}}
3 | <{{{title.tag}}} class="bundle-option__title">
4 | {{ title.message }}
5 |
6 | {{/if}}
7 |
8 | {{ render '@select' select merge=true }}
9 |
10 | {{#if qty }}
11 | {{ render '@input' qty merge=true }}
12 | {{/if}}
13 |
14 |
--------------------------------------------------------------------------------
/components/03-modules/bundle-option/bundle-option.hbs:
--------------------------------------------------------------------------------
1 |
2 | {{#if title}}
3 | <{{{title.tag}}} class="bundle-option__title">
4 | {{ title.message }}
5 |
6 | {{/if}}
7 |
8 | {{ render '@radio' radio merge=true }}
9 |
10 | {{#if qty }}
11 | {{ render '@input' qty merge=true }}
12 | {{/if}}
13 |
14 |
--------------------------------------------------------------------------------
/components/03-modules/cart-list-item/cart-list-item.hbs:
--------------------------------------------------------------------------------
1 |
2 |
3 | {{ render '@image' productImage }}
4 |
5 |
6 |
7 |
8 | {{ productName }}
9 |
10 |
11 |
12 | {{ render '@input' qtyInput }}
13 |
14 |
15 | {{ productPrice }}
16 |
17 |
18 | {{ render '@list--description' attributes }}
19 |
20 |
21 | {{ render '@button--icon' editIcon }}
22 | {{ render '@button--icon' removeIcon }}
23 |
24 |
25 |
2 | {{#each buttons }}
3 | {{ render '@button' this }}
4 | {{/each}}
5 |
6 |
--------------------------------------------------------------------------------
/components/03-modules/dashboard/form/_form.scss:
--------------------------------------------------------------------------------
1 | $dashborad-form-margin: 30px !default;
2 |
3 | .dashboard-form {
4 | &__title {
5 | margin-bottom: $dashborad-form-margin;
6 | padding-bottom: 10px;
7 | border-bottom: 1px solid $gray;
8 | }
9 |
10 | &__divider,
11 | &__select {
12 | margin-bottom: $dashborad-form-margin;
13 | }
14 |
15 | &--hidden {
16 | display: none;
17 | }
18 | }
19 |
--------------------------------------------------------------------------------
/components/03-modules/dashboard/items/_items.scss:
--------------------------------------------------------------------------------
1 | $dashboard-items-padding : 15px !default;
2 | $dashboard-items-margin : 15px !default;
3 | $dashboard-items__item-max-width : calc(50% - #{$spacer--medium}) !default;
4 | $dashboard-items__item-margin : 15px $spacer--medium 15px 0 !default;
5 |
6 | .dashboard-items {
7 | &__title {
8 | margin-bottom: $dashboard-items-margin;
9 | padding-bottom: 10px;
10 | border-bottom: 1px solid $gray;
11 | }
12 |
13 | &__content {
14 | margin: 0;
15 | }
16 |
17 | &__address {
18 | margin-bottom: $dashboard-items-margin;
19 | }
20 |
21 | &__item {
22 | max-width: $dashboard-items__item-max-width;
23 | margin: $dashboard-items__item-margin;
24 | padding: $dashboard-items-padding 0;
25 | }
26 | }
27 |
--------------------------------------------------------------------------------
/components/03-modules/dashboard/items/items.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | label: 'Items',
3 | name: 'dashboard-items',
4 | context: {
5 | title: 'Addresses',
6 | informations: [
7 | {
8 | title: 'Contact information',
9 | class: 'col-sm-3',
10 | information: 'qweqwe qwe qwe@qwe.com',
11 | actions: {
12 | links: [
13 | {
14 | title: 'Edit'
15 | },
16 | {
17 | title: 'Change password'
18 | }
19 | ]
20 | }
21 | },
22 | {
23 | title: 'Address second',
24 | class: 'col-sm-3',
25 | information: 'Second address qwe@qwe.com',
26 | actions: {
27 | links: [
28 | {
29 | title: 'Edit'
30 | }
31 | ]
32 | }
33 | }
34 | ]
35 | }
36 | }
37 |
--------------------------------------------------------------------------------
/components/03-modules/dashboard/items/items.hbs:
--------------------------------------------------------------------------------
1 |
2 | {{#if title }}
3 |
4 | {{ title }}
5 |
6 | {{/if}}
7 | {{#if informations }}
8 |
9 | {{#each informations }}
10 |
11 | {{#if this.title }}
12 |
13 | {{ this.title }}
14 |
15 | {{/if}}
16 | {{#if this.information }}
17 |
18 | {{ this.information }}
19 |
20 | {{/if}}
21 | {{#if actions }}
22 | {{> '@action' actions }}
23 | {{/if}}
24 |
25 | {{/each}}
26 |
27 | {{/if}}
28 |
2 |
3 | {{ actualPage }}
4 |
5 |
6 |
7 |
8 | {{ title }}
9 |
10 |
11 | {{> '@list--link' list }}
12 |
13 |
2 | {{#if title }}
3 |
11 | {{/if }}
12 |
13 | {{ render '@table' table }}
14 |
15 |
2 |
8 | {{ render '@heading' title }}
9 | {{ render '@icon' icon }}
10 |
11 |
16 | {{ render '@list--link' categories }}
17 |
18 |
20 |
--------------------------------------------------------------------------------
/components/03-modules/filter/filter--range.hbs:
--------------------------------------------------------------------------------
1 |
2 |
8 | {{ render '@heading' title }}
9 | {{ render '@icon' icon }}
10 |
11 |
16 | {{ text }}
17 | {{#if componentObject }}
18 | {{ render (component componentObject.name) componentObject.config }}
19 | {{/if }}
20 |
21 |
23 |
--------------------------------------------------------------------------------
/components/03-modules/filter/filter--swatch.hbs:
--------------------------------------------------------------------------------
1 |
2 |
8 | {{ render '@heading' title }}
9 | {{ render '@icon' icon }}
10 |
11 |
31 |
32 |
--------------------------------------------------------------------------------
/components/03-modules/filter/filter.hbs:
--------------------------------------------------------------------------------
1 |
2 |
8 | {{ render '@heading' title }}
9 | {{ render '@icon' icon }}
10 |
11 |
16 |
17 | {{#each checkboxes }}
18 |
19 | {{render '@checkbox--link' this }}
20 |
21 | {{/each }}
22 |
23 |
24 |
26 |
--------------------------------------------------------------------------------
/components/03-modules/filters/filters.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | title: 'Filters',
3 | context: {
4 | tag: 'div',
5 | activeFiltersHeading: 'Now Shopping by',
6 | skip: {
7 | tag: 'button',
8 | class: 'button button--secondary filters__skip-button',
9 | attributes: 'type="button"',
10 | text: 'Skip to products'
11 | },
12 | allFiltersHeading: 'Shopping Options',
13 | switcherIcon: {
14 | id: 'angle-down',
15 | title: 'Arrow down',
16 | class: 'filters__switcher-icon'
17 | },
18 | divider: {
19 | class: 'filters__divider'
20 | },
21 | dropdownList: {
22 | class: 'dropdown-list--secondary'
23 | }
24 | }
25 | };
26 |
--------------------------------------------------------------------------------
/components/03-modules/filters/filters.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | (function Filters() {
4 | const filters = {
5 | init() {
6 | this.switcher = document.querySelector('.filters__switcher');
7 | this.icon = document.querySelector('.filters__switcher-icon');
8 | this.filters = document.querySelector('.filters__list');
9 | this.switcher.addEventListener('click', this.toggle.bind(this));
10 | },
11 | toggle() {
12 | switch (this.switcher.dataset.stateCurrent) {
13 | case 'hidden':
14 | this.show();
15 | break;
16 | case 'display':
17 | this.hide();
18 | break
19 | }
20 | },
21 | show() {
22 | this.filters.classList.remove('filters__list--mobile-hidden');
23 | this.icon.classList.add('filters__switcher-icon--active');
24 | this.switcher.dataset.stateCurrent = 'display'
25 | },
26 | hide() {
27 | document.querySelector('.filters__list').classList.add('filters__list--mobile-hidden');
28 | this.icon.classList.remove('filters__switcher-icon--active');
29 | this.switcher.dataset.stateCurrent = 'hidden';
30 | }
31 | };
32 | filters.init();
33 | }());
34 |
35 |
--------------------------------------------------------------------------------
/components/03-modules/footer/footer.hbs:
--------------------------------------------------------------------------------
1 |
27 |
28 |
29 |
--------------------------------------------------------------------------------
/components/03-modules/footer/footer.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | const scrollToTop = document.querySelector('.footer__scroll-top');
4 |
5 | scrollToTop.addEventListener('click', () => {
6 | window.scrollTo(0, 0);
7 | });
8 |
--------------------------------------------------------------------------------
/components/03-modules/gallery/gallery.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | title: 'Product grid item',
3 | context: {
4 | class: '',
5 | typeHorizontal: false,
6 | imageMain: {
7 | dataSrc: '/images/gallery/product-img-496-496.jpg'
8 | },
9 | thumbs: [
10 | {
11 | imageThumb: {
12 | dataSrc: '/images/gallery/product-img-80-80.jpg',
13 | active: true
14 | }
15 | },
16 | {
17 | imageThumb: {
18 | dataSrc: '/images/gallery/product-img-80-80.jpg'
19 | }
20 | },
21 | {
22 | imageThumb: {
23 | dataSrc: '/images/gallery/product-img-80-80.jpg'
24 | }
25 | },
26 | {
27 | imageThumb: {
28 | dataSrc: '/images/gallery/product-img-80-80.jpg'
29 | }
30 | }
31 | ]
32 | },
33 | variants: [
34 | {
35 | name: 'horizontal',
36 | context: {
37 | typeHorizontal: true
38 | },
39 | },
40 | {
41 | name: 'with-label',
42 | context: {
43 | productLabel: {
44 | class: 'badge--new gallery__product-label',
45 | text: 'new'
46 | }
47 | }
48 | }
49 | ]
50 | };
51 |
--------------------------------------------------------------------------------
/components/03-modules/minicart-content/minicart-content.hbs:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | {{ counter}}
6 |
7 |
8 |
9 | {{ total }}
10 |
11 |
12 | {{ price }}
13 |
14 |
15 |
16 |
17 | {{ render '@button--secondary' checkoutButton }}
18 |
19 |
20 | {{#each products}}
21 | {{ render '@minicart-product' this merge=true }}
22 | {{/each}}
23 |
24 |
29 |
2 |
3 | {{ render '@image' productImage }}
4 |
5 |
6 |
11 | {{#if configurable }}
12 | {{ render '@dropdown-list' attributes }}
13 | {{/if}}
14 |
15 | {{ productPrice }}
16 |
17 |
18 |
19 | {{ render '@input' productQty }}
20 | {{#if updateQty }}
21 | {{ render '@button' updateQty }}
22 | {{/if}}
23 |
24 |
25 | {{ render '@button--icon' editIcon }}
26 | {{ render '@button--icon' removeIcon }}
27 |
28 |
29 |
30 |
Terms and conditions and I am happy to receive your newsletter with all your promotions.'
32 | }
33 | }
34 | }
35 | };
36 |
--------------------------------------------------------------------------------
/components/03-modules/newsletter/newsletter.hbs:
--------------------------------------------------------------------------------
1 |
14 |
--------------------------------------------------------------------------------
/components/03-modules/popup/popup.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | context: {
3 | popupTrigger: true,
4 | buttonPopupTrigger: {
5 | class: 'popup-trigger',
6 | text: 'Popup trigger button',
7 | attributes: 'data-popuptrigger="popup-1" type="button"'
8 | },
9 | class: '',
10 | popupId: 'popup-1',
11 | content: 'button',
12 | buttonClose: {
13 | tag: 'button',
14 | text: '',
15 | class: 'button--icon popup__close-button',
16 | icon: {
17 | id: 'close',
18 | title: 'Close',
19 | class: 'button__icon popup__close-button-icon'
20 | },
21 | attributes: 'type="button" aria-label="close popup button, click to close the popup"'
22 | },
23 | script: true
24 | }
25 | };
26 |
--------------------------------------------------------------------------------
/components/03-modules/popup/popup.hbs:
--------------------------------------------------------------------------------
1 | {{#if popupTrigger }}
2 | {{ render '@button' buttonPopupTrigger merge=true }}
3 | {{/if}}
4 |
14 |
15 | {{#if script }}
16 |
17 | {{/if}}
18 |
--------------------------------------------------------------------------------
/components/03-modules/product-view/product-review/product-review.hbs:
--------------------------------------------------------------------------------
1 |
2 |
3 | {{ title }}
4 |
5 |
6 | {{ render '@review--summary' summary merge=true }}
7 |
8 |
9 |
10 | {{#each reviews }}
11 |
12 | {{ render '@review--default' this }}
13 |
14 | {{/each}}
15 |
16 |
19 |
--------------------------------------------------------------------------------
/components/03-modules/quantity-update/quantity-update.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | context: {
3 | input: {
4 | id: 'qty',
5 | min: '1',
6 | defaultValue: '1',
7 | ariaLabel: 'Change the quantity'
8 | },
9 | minusQtyButton: {
10 | tag: 'button',
11 | class: 'button--icon quantity-update__button quantity-update__button--minus quantity-update__button--disabled',
12 | attributes: 'type="button" aria-label="Decrease the quantity"',
13 | icon: {
14 | id: 'minus',
15 | title: 'Minus mark',
16 | class: 'button__icon quantity-update__icon'
17 | }
18 | },
19 | plusQtyButton: {
20 | tag: 'button',
21 | class: 'button--icon quantity-update__button quantity-update__button--plus',
22 | attributes: 'type="button" aria-label="Increase the quantity"',
23 | icon: {
24 | id: 'plus',
25 | title: 'Plus mark',
26 | class: 'button__icon quantity-update__icon'
27 | }
28 | },
29 | script: true
30 | }
31 | }
32 |
--------------------------------------------------------------------------------
/components/03-modules/quantity-update/quantity-update.hbs:
--------------------------------------------------------------------------------
1 |
2 | {{> '@button--icon' minusQtyButton }}
3 |
4 |
14 | {{#if script}}
15 |
16 | {{/if}}
17 |
--------------------------------------------------------------------------------
/components/03-modules/range/range.hbs:
--------------------------------------------------------------------------------
1 |
2 |
7 |
8 | {{ render '@input' rangeInputLower }}
9 |
10 | {{ filter.suffix.lowerText }}
11 |
12 | -
13 | {{ render '@input' rangeInputUpper }}
14 |
15 | {{ filter.suffix.upperText }}
16 |
17 |
18 |
2 |
3 | {{ addTitle }}:
4 |
5 | {{ productTitle }}
6 |
7 |
8 | {{ render '@rating--rate' rate merge=true }}
9 |
10 | {{ render '@input' nickname }}
11 | {{ render '@input' summary }}
12 | {{ render '@input--textarea' textReview }}
13 | {{ render '@button' submitReview merge=true }}
14 |
15 | * Required fields
16 |
17 |
18 |
2 |
3 |
4 | {{ author }}
5 |
6 |
7 | {{ date }}
8 |
9 | {{> '@rating' rating }}
10 |
11 |
12 |
13 | {{ title }}
14 |
15 |
16 |
19 |
20 |
2 |
3 |
4 | {{#each slides }}
5 |
9 | {{ render (component content) contentContext }}
10 |
11 | {{/each}}
12 |
13 |
14 |
15 |
16 | {{render '@button--icon' iconPrev }}
17 |
18 | {{render '@button--icon' iconNext }}
19 |
20 |
21 | {{#if navigation }}
22 |
23 | {{/if}}
24 |
2 | {{ render '@heading' title }}
3 | {{#if button }}
4 |
5 | {{ render '@button--secondary' button }}
6 |
7 | {{/if }}
8 |
2 | {{ render '@header' }}
3 |
4 |
5 | {{ render '@heading' mainHeading }}
6 |
14 |
15 |
2 | {{ render '@header' }}
3 |
4 |
5 |
6 | {{ render '@dashboard-nav' }}
7 |
8 |
9 | {{ render '@dashboard-form' }}
10 | {{> '@action' buttons }}
11 |
12 |
13 |
14 |
2 | {{ render '@header' }}
3 |
4 |
5 |
6 |
7 | {{ render '@dashboard-nav' }}
8 |
9 |
10 |
11 |
12 | {{> '@dashboard-form' contactInfo }}
13 |
14 | {{> '@dashboard-form' address }}
15 |
16 |
17 | {{> '@action' buttons }}
18 |
19 |
20 |
21 |
2 | {{ render '@header' }}
3 |
4 |
5 |
6 |
7 | {{ render '@dashboard-nav' }}
8 |
9 |
10 |
11 | {{> '@dashboard-items' addresses }}
12 |
13 | {{> '@dashboard-items' additionalAddresses }}
14 |
15 | {{> '@action' buttons }}
16 |
17 |
18 |
19 |
2 | {{ render '@header' }}
3 |
4 |
5 |
6 | {{ render '@dashboard-nav' }}
7 |
8 |
9 | {{ render '@heading' mainTitle }}
10 | {{> '@dashboard-form' form }}
11 | {{> '@action' buttons }}
12 |
13 |
14 |
15 |
2 | {{ render '@header' }}
3 |
4 |
5 |
6 | {{ render '@dashboard-nav' }}
7 |
8 |
9 | {{ render '@title-wrapper' titleWrapper }}
10 | {{> '@dashboard-items' accountInformation }}
11 | {{> '@dashboard-items' legalAddress }}
12 | {{> '@dashboard-items' contacts }}
13 |
14 |
15 |
16 |
2 | {{ render '@header' }}
3 |
4 |
5 |
6 | {{ render '@dashboard-nav' }}
7 |
8 |
9 | {{ render '@title-wrapper' titleWrapper }}
10 | {{ render '@heading' businessStructureHeading }}
11 | {{ render '@dashboard-actions-toolbar' businessStructureActions }}
12 |
13 |
14 |
15 |
2 | {{ render '@header' }}
3 |
4 |
5 |
6 | {{ render '@dashboard-nav' }}
7 |
8 |
9 | {{ render '@title-wrapper' titleWrapper }}
10 | {{ render '@dashboard-actions-toolbar' filtersActions }}
11 | {{> '@dashboard-table' users }}
12 | {{ render '@toolbar' toolbar merge=true }}
13 | {{ render '@dashboard-actions-toolbar' actions }}
14 |
15 |
16 |
17 |
2 | {{ render '@header' }}
3 |
4 |
5 |
6 |
7 | {{ render '@dashboard-nav' }}
8 |
9 |
10 |
11 | {{ render '@dashboard-table' }}
12 |
13 | {{> '@dashboard-items' account }}
14 |
15 | {{> '@dashboard-items' addreses }}
16 |
17 |
18 |
19 |
2 | {{ render '@header' }}
3 |
4 |
5 |
6 |
7 | {{ render '@dashboard-nav' }}
8 |
9 |
10 |
11 | {{> '@dashboard-table' products }}
12 |
13 | {{> '@action' button }}
14 |
15 |
16 |
17 |
2 | {{ render '@header' }}
3 |
4 |
5 |
6 |
7 | {{ render '@dashboard-nav' }}
8 |
9 |
10 |
11 | {{> '@message' message }}
12 |
13 | {{> '@action' action }}
14 |
15 |
16 |
17 |
2 | {{ render '@header' }}
3 |
4 |
5 |
6 |
7 | {{ render '@dashboard-nav' }}
8 |
9 |
10 |
11 | {{> '@dashboard-form' form }}
12 |
13 | {{> '@action' buttons }}
14 |
15 |
16 |
17 |
2 | {{ render '@header' }}
3 |
4 |
5 |
6 |
7 | {{ render '@dashboard-nav' }}
8 |
9 |
10 |
11 | {{> '@dashboard-form' generalInformation }}
12 |
13 | {{> '@dashboard-form' eventInformation }}
14 |
15 | {{> '@dashboard-form' eventInformationSecondPart }}
16 |
17 | {{> '@dashboard-form' registrantInformation }}
18 |
19 | {{> '@action' addRegistrant }}
20 |
21 | {{> '@dashboard-form' shippingAddress }}
22 |
23 | {{> '@dashboard-form' hiddenNewAddressForm }}
24 |
25 | {{> '@action' buttons }}
26 |
27 |
28 |
29 |
2 | {{ render '@header' }}
3 |
4 |
5 |
6 |
7 | {{ render '@dashboard-nav' }}
8 |
9 |
10 |
11 | {{> '@dashboard-form' form }}
12 |
13 | {{> '@action' buttons }}
14 |
15 |
16 |
17 |
2 | {{ render '@header' }}
3 |
4 |
5 |
6 |
7 | {{ render '@dashboard-nav' }}
8 |
9 |
10 |
11 | {{> '@dashboard-table' giftRegistry }}
12 |
13 | {{> '@action' buttons }}
14 |
15 |
16 |
17 |
2 | {{ render '@header' }}
3 |
4 |
5 |
6 |
7 | {{ render '@dashboard-nav' }}
8 |
9 |
10 |
11 | {{> '@dashboard-form' form }}
12 |
13 | {{> '@action' buttons }}
14 |
15 |
16 |
17 |
2 | {{ render '@header' }}
3 |
4 |
5 |
6 |
7 | {{ render '@dashboard-nav' }}
8 |
9 |
10 |
11 | {{> '@dashboard-table' invitations }}
12 |
13 | {{> '@action' buttons }}
14 |
15 |
16 |
17 |
2 | {{ render '@header' }}
3 |
4 |
5 |
6 |
7 | {{ render '@dashboard-nav' }}
8 |
9 |
10 |
11 |
12 | {{ title }}
13 |
14 |
15 |
16 | {{> '@information' info }}
17 |
18 |
19 | {{> '@input' contactEmailAddress }}
20 |
21 | {{> '@dashboard-form' form }}
22 |
23 | {{> '@action' addReturnItem }}
24 |
25 | {{> '@input--textarea' comments }}
26 |
27 | {{> '@action' action }}
28 |
29 |
30 |
31 |
2 | {{ render '@header' }}
3 |
4 |
5 |
6 | {{ render '@dashboard-nav' }}
7 |
8 |
9 | {{ render '@dashboard-table' }}
10 | {{ render '@toolbar--pager' toolbar merge=true }}
11 | {{> '@action' action }}
12 |
13 |
14 |
15 |
2 | {{ render '@header' }}
3 |
4 |
5 |
6 | {{ render '@dashboard-nav' }}
7 |
8 |
9 | {{ render '@title-wrapper' titleWrapper }}
10 | {{ render '@dashboard-actions-toolbar' filtersActions }}
11 | {{> '@dashboard-table' users }}
12 | {{ render '@toolbar' toolbar merge=true }}
13 |
14 |
15 |
16 |
2 | {{ render '@header' }}
3 |
4 |
5 |
6 |
7 | {{ render '@dashboard-nav' }}
8 |
9 |
10 |
11 | {{> '@dashboard-form' form }}
12 |
13 | {{> '@action' buttons }}
14 |
15 |
16 |
17 |
2 | {{ render '@header' }}
3 |
4 |
5 |
6 |
7 | {{ render '@dashboard-nav' }}
8 |
9 |
10 |
11 | {{> '@dashboard-form' form }}
12 |
13 | {{> '@action' addRow }}
14 |
15 | {{> '@information' uploadInfo }}
16 |
17 | {{> '@file-upload' fileUpload }}
18 |
19 | {{> '@action' buttons }}
20 |
21 |
22 |
23 |
2 | {{ render '@header' }}
3 |
4 |
5 |
6 |
7 | {{ render '@dashboard-nav' }}
8 |
9 |
10 |
32 |
33 |
34 |
2 | {{ render '@header' }}
3 |
4 |
5 |
6 |
7 | {{ render '@dashboard-nav' }}
8 |
9 |
10 |
11 | {{> '@dashboard-table' reviews }}
12 |
13 | {{> '@action' button }}
14 |
15 |
16 |
17 |
2 | {{ render '@header' }}
3 |
4 |
5 |
6 | {{ render '@dashboard-nav' }}
7 |
8 |
9 |
10 | {{ render '@title-wrapper' titleWrapper }}
11 |
12 | {{ description }}
13 |
14 |
15 | {{ render '@dashboard-actions-toolbar' }}
16 |
17 |
18 |
19 |
2 | {{ render '@header' }}
3 |
4 |
5 |
6 | {{ render '@dashboard-nav' }}
7 |
8 |
9 | {{ render '@title-wrapper' titleWrapper }}
10 | {{> '@dashboard-table' itemsOrdered }}
11 | {{ render '@toolbar' toolbar merge=true }}
12 |
13 |
14 |
15 |
2 | {{ render '@header' }}
3 |
4 |
5 |
6 |
7 | {{ render '@dashboard-nav' }}
8 |
9 |
10 |
11 |
12 |
13 | {{ returnNumer }}
14 |
15 |
16 |
17 | {{ returnStatus }}
18 |
19 |
20 |
21 | {{> '@dashboard-items' addresses }}
22 |
23 | {{> '@dashboard-table' returns }}
24 |
25 | {{> '@dashboard-form' comments }}
26 |
27 | {{> '@action' buttons }}
28 |
29 |
30 |
31 |
2 | {{ render '@header' }}
3 |
4 |
5 |
6 |
7 | {{ render '@dashboard-nav' }}
8 |
9 |
10 |
11 | {{> '@dashboard-table' returns }}
12 |
13 | {{> '@action' buttons }}
14 |
15 |
16 |
17 |
2 | {{ render '@header' }}
3 |
4 |
5 |
6 |
7 | {{ render '@dashboard-nav' }}
8 |
9 |
10 |
11 | {{> '@information' info }}
12 |
13 | {{> '@dashboard-table' points }}
14 |
15 | {{> '@dashboard-form' form }}
16 |
17 | {{> '@action' buttons }}
18 |
19 |
20 |
21 |
2 | {{ render '@header' }}
3 |
4 |
5 |
6 | {{ render '@dashboard-nav' }}
7 |
8 |
9 | {{ render '@heading' mainTitle }}
10 | {{> '@dashboard-form' form }}
11 | {{> '@action' buttons }}
12 |
13 |
14 |
15 |
2 | {{ render '@header' }}
3 |
4 |
5 |
6 | {{ render '@dashboard-nav' }}
7 |
8 |
9 | {{ render '@title-wrapper' titleWrapper }}
10 | {{> '@dashboard-table' itemsOrdered }}
11 | {{ render '@toolbar' toolbar merge=true }}
12 | {{ render '@dashboard-actions-toolbar' actions }}
13 |
14 |
15 |
16 |
2 | {{ render '@header' }}
3 |
4 |
5 |
6 |
7 | {{ render '@dashboard-nav' }}
8 |
9 |
10 |
11 | {{ render '@information' }}
12 |
13 |
14 |
15 |
2 | {{ render '@header' }}
3 |
4 |
5 |
6 | {{ render '@heading' mainHeading }}
7 |
8 | {{ info }}
9 |
10 |
19 |
20 |
21 |
2 | {{ render '@header' }}
3 |
4 |
5 | {{ render '@banner' }}
6 |
7 |
8 | {{ render '@banner' bannerSmall1 }}
9 | {{ render '@banner' bannerSmall2 }}
10 | {{ render '@banner' bannerSmall3 }}
11 |
12 |
13 | {{ render '@banner' bannerMedium1 }}
14 | {{ render '@banner' bannerMedium2 }}
15 |
16 |
17 | {{ render '@heading' brandBlockHeading }}
18 | {{ render '@list--link-content' brandsList }}
19 |
20 |
21 |
22 | {{{ cmsBlock }}}
23 |
24 |
25 |
27 |
{{ title }}
5 |
11 |
12 | There is no a11y erros! Well done!
13 |
14 |
15 |
16 | {{{ yield }}}
17 |
18 |
19 |
20 |
21 |
22 |
--------------------------------------------------------------------------------
/components/_docs-only-styles.hbs:
--------------------------------------------------------------------------------
1 |
2 |
3 | {{ title }}
5 | {{ title }}
5 |
2 |
4 |
--------------------------------------------------------------------------------
/public/images/login/banner-304-144.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SnowdogApps/magento2-alpaca-components/1a88626c3fe124052d2e8b2fa4c78ee6067af856/public/images/login/banner-304-144.jpg
--------------------------------------------------------------------------------
/public/images/login/banner-304-144@2x.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SnowdogApps/magento2-alpaca-components/1a88626c3fe124052d2e8b2fa4c78ee6067af856/public/images/login/banner-304-144@2x.jpg
--------------------------------------------------------------------------------
/public/images/login/banner-304-144@3x.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SnowdogApps/magento2-alpaca-components/1a88626c3fe124052d2e8b2fa4c78ee6067af856/public/images/login/banner-304-144@3x.jpg
--------------------------------------------------------------------------------
/public/images/login/banner-464-360@2x.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SnowdogApps/magento2-alpaca-components/1a88626c3fe124052d2e8b2fa4c78ee6067af856/public/images/login/banner-464-360@2x.jpg
--------------------------------------------------------------------------------
/public/images/login/banner-656-360.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SnowdogApps/magento2-alpaca-components/1a88626c3fe124052d2e8b2fa4c78ee6067af856/public/images/login/banner-656-360.jpg
--------------------------------------------------------------------------------
/public/images/product-view/banner.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SnowdogApps/magento2-alpaca-components/1a88626c3fe124052d2e8b2fa4c78ee6067af856/public/images/product-view/banner.jpg
--------------------------------------------------------------------------------
/public/images/product-view/slider-image.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SnowdogApps/magento2-alpaca-components/1a88626c3fe124052d2e8b2fa4c78ee6067af856/public/images/product-view/slider-image.jpg
--------------------------------------------------------------------------------
/public/images/product/cart-product-160_160.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SnowdogApps/magento2-alpaca-components/1a88626c3fe124052d2e8b2fa4c78ee6067af856/public/images/product/cart-product-160_160.jpg
--------------------------------------------------------------------------------
/public/images/product/minicart-product-72_72.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SnowdogApps/magento2-alpaca-components/1a88626c3fe124052d2e8b2fa4c78ee6067af856/public/images/product/minicart-product-72_72.png
--------------------------------------------------------------------------------
/public/images/product/product-base.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SnowdogApps/magento2-alpaca-components/1a88626c3fe124052d2e8b2fa4c78ee6067af856/public/images/product/product-base.jpg
--------------------------------------------------------------------------------
/public/images/product/product-img-230_180.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SnowdogApps/magento2-alpaca-components/1a88626c3fe124052d2e8b2fa4c78ee6067af856/public/images/product/product-img-230_180.png
--------------------------------------------------------------------------------
/public/images/product/product-img-70_46.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SnowdogApps/magento2-alpaca-components/1a88626c3fe124052d2e8b2fa4c78ee6067af856/public/images/product/product-img-70_46.png
--------------------------------------------------------------------------------
/public/images/product/product-second.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SnowdogApps/magento2-alpaca-components/1a88626c3fe124052d2e8b2fa4c78ee6067af856/public/images/product/product-second.jpg
--------------------------------------------------------------------------------
/public/images/slider/slider-1500_500.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SnowdogApps/magento2-alpaca-components/1a88626c3fe124052d2e8b2fa4c78ee6067af856/public/images/slider/slider-1500_500.png
--------------------------------------------------------------------------------
/public/images/slider/slider-1920_500.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SnowdogApps/magento2-alpaca-components/1a88626c3fe124052d2e8b2fa4c78ee6067af856/public/images/slider/slider-1920_500.png
--------------------------------------------------------------------------------
/public/images/slider/slider-480_510.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SnowdogApps/magento2-alpaca-components/1a88626c3fe124052d2e8b2fa4c78ee6067af856/public/images/slider/slider-480_510.png
--------------------------------------------------------------------------------
/public/images/slider/slider-768_500.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SnowdogApps/magento2-alpaca-components/1a88626c3fe124052d2e8b2fa4c78ee6067af856/public/images/slider/slider-768_500.png
--------------------------------------------------------------------------------
/public/images/slider/slider-992_646.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SnowdogApps/magento2-alpaca-components/1a88626c3fe124052d2e8b2fa4c78ee6067af856/public/images/slider/slider-992_646.png
--------------------------------------------------------------------------------
/public/images/swatch/swatch-green.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SnowdogApps/magento2-alpaca-components/1a88626c3fe124052d2e8b2fa4c78ee6067af856/public/images/swatch/swatch-green.jpg
--------------------------------------------------------------------------------
/public/images/swatch/swatch-orange.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SnowdogApps/magento2-alpaca-components/1a88626c3fe124052d2e8b2fa4c78ee6067af856/public/images/swatch/swatch-orange.jpg
--------------------------------------------------------------------------------
/public/images/swatch/swatch-red.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SnowdogApps/magento2-alpaca-components/1a88626c3fe124052d2e8b2fa4c78ee6067af856/public/images/swatch/swatch-red.jpg
--------------------------------------------------------------------------------
/public/images/swatch/swatch-white.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SnowdogApps/magento2-alpaca-components/1a88626c3fe124052d2e8b2fa4c78ee6067af856/public/images/swatch/swatch-white.jpg
--------------------------------------------------------------------------------
/public/tests/a11y-test.js:
--------------------------------------------------------------------------------
1 | 'use-strict'
2 |
3 |
4 | function logError(error) {
5 | const a11yWrap = document.getElementById('a11y-test');
6 | const errorMsg = `${error.name}
7 | ${error.message}`;
8 |
9 | error.element.classList.add('a11y-test__error-element');
10 | console.log(`%c ${error.name}\n\n${error.message}`, 'color: #ff5252');
11 | a11yWrap.classList.add('a11y-test--error');
12 | a11yWrap.innerHTML += errorMsg;
13 | }
14 |
15 | document.addEventListener('DOMContentLoaded', function() {
16 | accessibilityjs.scanForProblems(document, logError)
17 | });
18 |
--------------------------------------------------------------------------------
/static.json:
--------------------------------------------------------------------------------
1 | {
2 | "root": "dest/"
3 | }
4 |
--------------------------------------------------------------------------------
12 |