Alain Afflelou Design System

Colors 

<div x-data="{ expanded: false }" class="border-b border-neutral-200 md:pb-3 text-neutral-800 text-neutral-800">
    <h2 class="font-medium py-4 md:pt-6 md:pb-3 text-base md:text-xl">
        <button type="button" @click="expanded = !expanded " class="flex justify-between items-center w-full ">
            <span class="flex flex-wrap gap-3">
                Accordion title
            </span>

            <span :class="expanded ? 'rotate-180' : ''" class="transform transition-transform duration-300">
                <svg class=" shrink-0" width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 14.5303C12.2374 14.8232 11.7626 14.8232 11.4697 14.5303L7.46967 10.5303C7.17678 10.2374 7.17678 9.76256 7.46967 9.46967C7.76256 9.17678 8.23744 9.17678 8.53033 9.46967L12 12.9393L15.4697 9.46967C15.7626 9.17678 16.2374 9.17678 16.5303 9.46967C16.8232 9.76256 16.8232 10.2374 16.5303 10.5303L12.5303 14.5303Z" fill="currentColor" />
                </svg>
            </span>
        </button>
    </h2>
    <div x-cloak x-show="expanded" x-collapse class=" ">
        <div class="grid grid-cols-2 md:grid-cols-3 gap-2 md:gap-4 pb-4 md:pb-3">
            <label class="relative select-none rounded-full cursor-pointer transition-colors hover:bg-neutral-150 hover:text-neutral-800 bg-light-white p-2 font-medium text-neutral-500 inline-flex gap-2 items-center">
                <span class="block min-w-5 w-5 h-5 rounded-full border border-dark-20" style="background-color: #0000FF"></span>
                <input :checked="$store.filter.getFilter('colors', 'Blue')" @click="$store.filter.toggleFilter('colors', 'Blue')" class="sr-only peer" type="checkbox" name="colors">
                <span class="peer-checked:text-neutral-800">Blue</span>
                <div class="peer-checked:visible invisible ml-auto peer-checked:text-neutral-800">
                    <svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path fill-rule="evenodd" clip-rule="evenodd" d="M8.99469 7.9047C8.70179 7.6118 8.22692 7.6118 7.93403 7.9047C7.64113 8.19759 7.64113 8.67246 7.93403 8.96536L10.9392 11.9706L7.93403 14.9758C7.64114 15.2687 7.64114 15.7435 7.93403 16.0364C8.22693 16.3293 8.7018 16.3293 8.99469 16.0364L11.9999 13.0312L15.0051 16.0364C15.298 16.3293 15.7729 16.3293 16.0658 16.0364C16.3586 15.7435 16.3586 15.2687 16.0658 14.9758L13.0606 11.9706L16.0658 8.96536C16.3587 8.67246 16.3587 8.19759 16.0658 7.9047C15.7729 7.6118 15.298 7.6118 15.0051 7.9047L11.9999 10.9099L8.99469 7.9047Z" fill="currentColor" />
                    </svg>
                </div>
                <span class="rounded-full absolute inset-0 peer-checked:border-neutral-800 border border-neutral-300"></span>
            </label>
            <label class="relative select-none rounded-full cursor-pointer transition-colors hover:bg-neutral-150 hover:text-neutral-800 bg-light-white p-2 font-medium text-neutral-500 inline-flex gap-2 items-center">
                <span class="block min-w-5 w-5 h-5 rounded-full border border-dark-20" style="background-color: #008000"></span>
                <input :checked="$store.filter.getFilter('colors', 'Green')" @click="$store.filter.toggleFilter('colors', 'Green')" class="sr-only peer" type="checkbox" name="colors">
                <span class="peer-checked:text-neutral-800">Green</span>
                <div class="peer-checked:visible invisible ml-auto peer-checked:text-neutral-800">
                    <svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path fill-rule="evenodd" clip-rule="evenodd" d="M8.99469 7.9047C8.70179 7.6118 8.22692 7.6118 7.93403 7.9047C7.64113 8.19759 7.64113 8.67246 7.93403 8.96536L10.9392 11.9706L7.93403 14.9758C7.64114 15.2687 7.64114 15.7435 7.93403 16.0364C8.22693 16.3293 8.7018 16.3293 8.99469 16.0364L11.9999 13.0312L15.0051 16.0364C15.298 16.3293 15.7729 16.3293 16.0658 16.0364C16.3586 15.7435 16.3586 15.2687 16.0658 14.9758L13.0606 11.9706L16.0658 8.96536C16.3587 8.67246 16.3587 8.19759 16.0658 7.9047C15.7729 7.6118 15.298 7.6118 15.0051 7.9047L11.9999 10.9099L8.99469 7.9047Z" fill="currentColor" />
                    </svg>
                </div>
                <span class="rounded-full absolute inset-0 peer-checked:border-neutral-800 border border-neutral-300"></span>
            </label>
            <label class="relative select-none rounded-full cursor-pointer transition-colors hover:bg-neutral-150 hover:text-neutral-800 bg-light-white p-2 font-medium text-neutral-500 inline-flex gap-2 items-center">
                <span class="block min-w-5 w-5 h-5 rounded-full border border-dark-20" style="background-color: #FF0000"></span>
                <input :checked="$store.filter.getFilter('colors', 'Red')" @click="$store.filter.toggleFilter('colors', 'Red')" class="sr-only peer" type="checkbox" name="colors">
                <span class="peer-checked:text-neutral-800">Red</span>
                <div class="peer-checked:visible invisible ml-auto peer-checked:text-neutral-800">
                    <svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path fill-rule="evenodd" clip-rule="evenodd" d="M8.99469 7.9047C8.70179 7.6118 8.22692 7.6118 7.93403 7.9047C7.64113 8.19759 7.64113 8.67246 7.93403 8.96536L10.9392 11.9706L7.93403 14.9758C7.64114 15.2687 7.64114 15.7435 7.93403 16.0364C8.22693 16.3293 8.7018 16.3293 8.99469 16.0364L11.9999 13.0312L15.0051 16.0364C15.298 16.3293 15.7729 16.3293 16.0658 16.0364C16.3586 15.7435 16.3586 15.2687 16.0658 14.9758L13.0606 11.9706L16.0658 8.96536C16.3587 8.67246 16.3587 8.19759 16.0658 7.9047C15.7729 7.6118 15.298 7.6118 15.0051 7.9047L11.9999 10.9099L8.99469 7.9047Z" fill="currentColor" />
                    </svg>
                </div>
                <span class="rounded-full absolute inset-0 peer-checked:border-neutral-800 border border-neutral-300"></span>
            </label>
            <label class="relative select-none rounded-full cursor-pointer transition-colors hover:bg-neutral-150 hover:text-neutral-800 bg-light-white p-2 font-medium text-neutral-500 inline-flex gap-2 items-center">
                <span class="block min-w-5 w-5 h-5 rounded-full border border-dark-20" style="background-color: #FFFF00"></span>
                <input :checked="$store.filter.getFilter('colors', 'Yellow')" @click="$store.filter.toggleFilter('colors', 'Yellow')" class="sr-only peer" type="checkbox" name="colors">
                <span class="peer-checked:text-neutral-800">Yellow</span>
                <div class="peer-checked:visible invisible ml-auto peer-checked:text-neutral-800">
                    <svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path fill-rule="evenodd" clip-rule="evenodd" d="M8.99469 7.9047C8.70179 7.6118 8.22692 7.6118 7.93403 7.9047C7.64113 8.19759 7.64113 8.67246 7.93403 8.96536L10.9392 11.9706L7.93403 14.9758C7.64114 15.2687 7.64114 15.7435 7.93403 16.0364C8.22693 16.3293 8.7018 16.3293 8.99469 16.0364L11.9999 13.0312L15.0051 16.0364C15.298 16.3293 15.7729 16.3293 16.0658 16.0364C16.3586 15.7435 16.3586 15.2687 16.0658 14.9758L13.0606 11.9706L16.0658 8.96536C16.3587 8.67246 16.3587 8.19759 16.0658 7.9047C15.7729 7.6118 15.298 7.6118 15.0051 7.9047L11.9999 10.9099L8.99469 7.9047Z" fill="currentColor" />
                    </svg>
                </div>
                <span class="rounded-full absolute inset-0 peer-checked:border-neutral-800 border border-neutral-300"></span>
            </label>
            <label class="relative select-none rounded-full cursor-pointer transition-colors hover:bg-neutral-150 hover:text-neutral-800 bg-light-white p-2 font-medium text-neutral-500 inline-flex gap-2 items-center">
                <span class="block min-w-5 w-5 h-5 rounded-full border border-dark-20" style="background-color: #800080"></span>
                <input :checked="$store.filter.getFilter('colors', 'Purple')" @click="$store.filter.toggleFilter('colors', 'Purple')" class="sr-only peer" type="checkbox" name="colors">
                <span class="peer-checked:text-neutral-800">Purple</span>
                <div class="peer-checked:visible invisible ml-auto peer-checked:text-neutral-800">
                    <svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path fill-rule="evenodd" clip-rule="evenodd" d="M8.99469 7.9047C8.70179 7.6118 8.22692 7.6118 7.93403 7.9047C7.64113 8.19759 7.64113 8.67246 7.93403 8.96536L10.9392 11.9706L7.93403 14.9758C7.64114 15.2687 7.64114 15.7435 7.93403 16.0364C8.22693 16.3293 8.7018 16.3293 8.99469 16.0364L11.9999 13.0312L15.0051 16.0364C15.298 16.3293 15.7729 16.3293 16.0658 16.0364C16.3586 15.7435 16.3586 15.2687 16.0658 14.9758L13.0606 11.9706L16.0658 8.96536C16.3587 8.67246 16.3587 8.19759 16.0658 7.9047C15.7729 7.6118 15.298 7.6118 15.0051 7.9047L11.9999 10.9099L8.99469 7.9047Z" fill="currentColor" />
                    </svg>
                </div>
                <span class="rounded-full absolute inset-0 peer-checked:border-neutral-800 border border-neutral-300"></span>
            </label>
        </div>

    </div>
</div>
 
{% set accordionContent %}
    <div class="grid grid-cols-2 md:grid-cols-3 gap-2 md:gap-4 pb-4 md:pb-3">
        {% if colors is defined %}
            {% for color in colors %}
                {% render "@checkbox-color" with {
                    name:name,
                    color:color,
                    alpine_checked:"$store.filter.getFilter('" ~ name ~ "', '" ~ color.label ~ "')",
                    alpine_click:"$store.filter.toggleFilter('" ~ name ~ "', '" ~ color.label ~ "')"
                } %}
            {% endfor %}
        {% endif %}
    </div>
{% endset %}
{% render "@accordion--filter" with {title:title,content:accordionContent} %}
 
{
  "name": "colors",
  "colors": [
    {
      "label": "Blue",
      "hex": "#0000FF"
    },
    {
      "label": "Green",
      "hex": "#008000"
    },
    {
      "label": "Red",
      "hex": "#FF0000"
    },
    {
      "label": "Yellow",
      "hex": "#FFFF00"
    },
    {
      "label": "Purple",
      "hex": "#800080"
    }
  ]
}

No notes defined.