Skip to content

🍯 Components library focused on accessibility/customization

License

Notifications You must be signed in to change notification settings

Applelo/compotes

Repository files navigation

Compotes

A components library focused on customization/accessibility

✨ Features

  • πŸ‘¨β€πŸŽ¨ Minimal CSS to do your customization
  • 🦾 Accessibility in mind
  • πŸ“  Fully typed

🍏 Compotes

  • Drilldown
  • Collapse/Accordion

And more to come!

🍯 Pots

Vanilla JS/TS
npm i -D compotes

# yarn
yarn add -D compotes

# pnpm
pnpm add -D compotes


A proper documentation and Vue 3/Nuxt 3 packages will arrive soon stay tuned!

Usage

Drilldown

import 'compotes/css/drilldown.css' // loaded by vitejs
import { Drilldown } from 'compotes'

const drilldown = new Drilldown('.c-drilldown', {
  dynamicHeight: true,
})
<nav class="c-drilldown" aria-label="Drilldown Example">
  <ul class="c-drilldown-menu">
    <li>
      <button class="c-drilldown-next">
        Go to section 1
      </button>
      <ul class="c-drilldown-menu" id="test">
        <li>
          <button class="c-drilldown-back">
            Go Back
          </button>
        </li>
        <li>
          <button class="c-drilldown-next">
            Go to section 1 1
          </button>
          <ul class="c-drilldown-menu">
            <li>
              <button class="c-drilldown-back">
                Go Back
              </button>
            </li>
            <li>
              Item Section 1 1
            </li>
            <li>
              Item Section 1 1
            </li>
          </ul>
        </li>
        <li>
          Item Section 1
        </li>
      </ul>
    </li>
  </ul>
</nav>

Collapse

import 'compotes/css/collapse.css' // loaded by vitejs
import { Collapse } from 'compotes'

const drilldown = new Collapse('.c-collapse')
<button class="c-collapse-trigger" aria-expanded="false" aria-controls="collapse-id">
  Trigger collapse
</button>
<div class="c-collapse" id="collapse-id">
  <p style="width: 200px;">
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Mollitia facere possimus impedit facilis culpa illo earum deserunt consequuntur minus. Ad et qui labore reprehenderit magnam exercitationem placeat magni nesciunt suscipit.
  </p>
</div>

πŸ™‹β€β™‚οΈ Why ?

A lot of components library are already shipped with styles but as a Front End developer, I always wants to override a lot. Futhermore, there are not always accessible or they are shipped with jQuery.

There are some good library like React Aria but it's made to work on one framework and I work on different tech like Wordpress, Symfony or VueJS.

This library provide only the compotes and it's you to make a tart.

πŸ‘¨β€πŸ’Ό License

MIT