OFRAG Frontend Components Library v0.0.0

Header Button: Wishlist 

<div class="header-button">
    <div class="header-button__container">

        <a href="#" class="header-button__link -icon-wishlist">

            <span class="visually-hidden">Zum Warenkorb</span>

            <span class="visually-hidden">(</span>
            <span class="header-button__label">Merkliste</span>
            <span class="visually-hidden">)</span>

            <span class="visually-hidden">Artikel im Warenkorb:</span>

            <span class="header-button__badge">12</span>

        </a>
        <button type="button" class="header-button__link--button -icon-wishlist">

            <span class="visually-hidden">Zum Warenkorb</span>

            <span class="visually-hidden">(</span>
            <span class="header-button__label">Merkliste</span>
            <span class="visually-hidden">)</span>

            <span class="visually-hidden">Artikel im Warenkorb:</span>

            <span class="header-button__badge">12</span>

        </button>
    </div>
    <div class="header-button-dropdown-root">

        <div class="dropdown">
            <button type="button" class="dropdown__toggle" style="max-width: 200px;">Hauptliste</button>
            <div class="dropdown__content" style="width: 280px; left: auto; right: 0;">

                <div class="header-button-dropdown">

                    <ul class="header-button-dropdown__list">

                        <li class="header-button-dropdown__list-item--active">

                            <button type="button" class="header-button-dropdown__name">

                                Hauptliste

                            </button>

                            <div class="header-button-dropdown__item-amount">
                                100
                            </div>

                            <div class="header-button-dropdown__active"></div>
                        </li>

                        <li class="header-button-dropdown__list-item">

                            <button type="button" class="header-button-dropdown__name">

                                Werkstatt

                            </button>

                            <div class="header-button-dropdown__item-amount">
                                100
                            </div>

                            <div class="header-button-dropdown__active"></div>
                        </li>

                        <li class="header-button-dropdown__list-item">

                            <button type="button" class="header-button-dropdown__name">

                                Herr Müller

                            </button>

                            <div class="header-button-dropdown__item-amount">
                                10
                            </div>

                            <div class="header-button-dropdown__active"></div>
                        </li>

                        <li class="header-button-dropdown__list-item">

                            <button type="button" class="header-button-dropdown__name">

                                Büro

                            </button>

                            <div class="header-button-dropdown__item-amount">
                                9
                            </div>

                            <div class="header-button-dropdown__active"></div>
                        </li>

                        <li class="header-button-dropdown__list-item">

                            <button type="button" class="header-button-dropdown__name">

                                Ein sehr langer Merklistentitel für einen Kunden mit einem sehr langen Namen

                            </button>

                            <div class="header-button-dropdown__active"></div>
                        </li>

                    </ul>

                    <div class="header-button-dropdown__link-list">

                        <a href="#" class="header-button-dropdown__link">Merklisten verwalten</a>

                    </div>

                    <div class="header-button-dropdown__button">
                        <a href="#" class="button--primary-small">Zur Merkliste</a>

                    </div>
                </div>

            </div>
        </div>

    </div>
</div>
 
{% include '@SharedComponents/modules/page/components/header/header-button/header-button.twig' %}
 
{
  "demo": false,
  "labels": {
    "title": "Zum Warenkorb",
    "items": "Artikel im Warenkorb"
  },
  "href": "#",
  "icon": "wishlist",
  "badge": "12",
  "label": "Merkliste",
  "dropdown": {
    "activeList": "Hauptliste",
    "lists": [
      {
        "name": "Hauptliste",
        "isActive": true,
        "itemAmount": 100
      },
      {
        "name": "Werkstatt",
        "itemAmount": 100
      },
      {
        "name": "Herr Müller",
        "itemAmount": 10
      },
      {
        "name": "Büro",
        "itemAmount": 9
      },
      {
        "name": "Ein sehr langer Merklistentitel für einen Kunden mit einem sehr langen Namen",
        "itemAmount": 0
      }
    ],
    "linkList": [
      {
        "title": "Merklisten verwalten",
        "href": "#"
      }
    ],
    "mobileButton": {
      "variant": "primary-small",
      "type": "a",
      "href": "#",
      "title": "Zur Merkliste"
    }
  }
}
  • Content: 
    import './header-button.scss';
import HeaderButton, {selector as sel} from 'cando-cx-components-library/components/modules/page/components/header/header-button/header-button';

export default HeaderButton;
export const selector = sel;
  • URL: /components/raw/header-button/header-button.js
  • Filesystem Path: src/components/modules/page/components/header/header-button/header-button.js
  • Size: 234 Bytes
  • Content: 
    @import "~shared/base";
@import "~cando-cx-components-library/components/modules/page/components/header/header-button/header-button";
  • URL: /components/raw/header-button/header-button.scss
  • Filesystem Path: src/components/modules/page/components/header/header-button/header-button.scss
  • Size: 133 Bytes

used for header-wishlist and header-cart