feat: multi select dropdown

[HeleenSG]

Changes

Adds styling needed for the multi select dropdown element. Fixes some of the existing components for consistency. Adds link hover state. (as it was needed within this component)

Design
https://www.figma.com/design/MDbpc9K0qjyaoRGAGiDX6t/%F0%9F%8E%A8-KAT-%7C-Design-System-%7C-Components?node-id=495-3013&node-type=CANVAS&t=aTq4lTB8lbrQ5ebl-0

Visual goal

This PR adds

• Icon within input field (search for example)

This example uses tabler svg icon. (https://tabler.io/icons) Search for the icon and copy svg.

Please note that the label is added for screenreaders. While being visually hidden for sighted users. For the icon it's the other way around. It functions as the label for sighted users but is hidden for screen reader users through the use of aria-hidden.

<form action="" method="post">
    <label for="form-example-base" class="visually-hidden">Search</label>

    <div class="input-icon">
        <input id="form-example-base"
                name="form-example-base"
                type="text"
                aria-describedby="form-example-base-explanation" >

        <span class="icon " aria-hidden="true">
            <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                <circle cx="10" cy="10" r="7" />
                <line x1="21" y1="21" x2="15" y2="15" />
            </svg>
        </span>
    </div>
</form>

• Destructive state for links (for clear all for example)
  <a href="#" class="destructive">Clear all</a>

• Destructive state for buttons
  <button class="destructive">Clear all</button>

Link example:

Hover:

Link within toolbar example:

Hover:

Button example:

Hover:

Ghost button example:

Hover:

Html for full multi select dropdown element

 <div class="dropdown">
            <button aria-controls="export-add"
                    class="dropdown-button ghost"
                    id="dropdown-object-type">
                {% translate "Object types (test)" %}<span aria-hidden="true" class="icon ti-chevron-down"></span>
            </button>
            <div id="export-add"
                    aria-expanded="false"
                    class="dropdown-list"
                    role="group"
                    aria-labelledby="dropdown-object-type">
                <form action="" method="post">
                    <label for="form-example-base" class="visually-hidden">Search</label>
        
                    <div class="input-icon">
                        <input id="form-example-base"
                                name="form-example-base"
                                type="text"
                                aria-describedby="form-example-base-explanation"
                                placeholder="Search" >
        
                        <span class="icon " aria-hidden="true">
                            <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                                <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                                <circle cx="10" cy="10" r="7" />
                                <line x1="21" y1="21" x2="15" y2="15" />
                            </svg>
                        </span>
                    </div>
        
                    <div class="horizontal-view toolbar">
                        <button>Select all</button>
                        <button class="destructive">Clear all</button>
                    </div>
        
                    <ul>
                        <li class="checkbox">
                            <input type="checkbox"
                                    id="checkbox-example-list-a"
                                    name="standaard-checkbox">
                            <label for="checkbox-example-list-a">
                                <span class="tag tags-color-1-light">Type A</span>
                            </label>
                        </li>
                        <li class="checkbox">
                            <input type="checkbox"
                                    id="checkbox-example-list-b"
                                    name="standaard-checkbox">
                            <label for="checkbox-example-list-b">
                                <span class="tag tags-color-2-light">Type B</span>
                            </label>
                        </li>
                        <li class="checkbox">
                            <input type="checkbox"
                                    id="checkbox-example-list-c"
                                    name="standaard-checkbox">
                            <label for="checkbox-example-list-c">
                                <span class="tag tags-color-3-light">Type C</span>
                            </label>
                        </li>
                        <li class="checkbox">
                            <input type="checkbox"
                                    id="checkbox-example-list-d"
                                    name="standaard-checkbox">
                            <label for="checkbox-example-list-d">
                                <span class="tag tags-color-4-light">Type D</span>
                            </label>
                        </li>
                    </ul>
                </form>
            </div>
        </div>

Issue link

You have to create an issue to link to this PR. If this really is not possible, write a very detailed description here and add this PR to the project board directly.

Please add the link to the issue after "Closes".

Implements: #3040

Demo

Default state

Hover state on checkbox list

QA notes

Please note this element currently isn't implemented in the UI.

To test in the UI follow these steps:
1: Add the code from the "Html for full multi select dropdown element" block as previously mentioned.
2: Add it in the following file within rocky: "/nl-kat-coordination/rocky/rocky/templates/partials/ooi_list_toolbar.html" on line 6 (right under the following line: " <div class="horizontal-view toolbar">" (so it's within the toolbar)
4: Navigate to the object list page. You can get there by clicking on "objects" within the top navigation bar. (if you don't see "objects" click on one of your organisations)
3: A new toolbar option will appear. A button named "Object types (test). Click it to open the dropdown menu.

To test the destructive class you can add "destructive" as a class to a button or link.

• Please check html for any semantic or accessibility issues.
• Please check if the implementation matches the designs of this component within the figma kat component library.
• Please check the different states.

---

Code Checklist

• All the commits in this PR are properly PGP-signed and verified.
• This PR only contains functionality relevant to the issue.
• I have written unit tests for the changes or fixes I made.
• I have checked the documentation and made changes where necessary.
• I have performed a self-review of my code and refactored it to the best of my abilities.

• Tickets have been created for newly discovered issues.
• For any non-trivial functionality, I have added integration and/or end-to-end tests.
• I have informed others of any required .env changes files if required and changed the .env-dist accordingly.
• I have included comments in the code to elaborate on what is not self-evident from the code itself, including references to issues and discussions online, or implicit behavior of an interface.

---

Checklist for code reviewers:

Copy-paste the checklist from the docs/source/templates folder into your comment.

---

Checklist for QA:

Copy-paste the checklist from the docs/source/templates folder into your comment.

[stephanie0x00]

Checklist for QA:

• I have checked out this branch, and successfully ran a fresh make reset.
• I confirmed that there are no unintended functional regressions in this branch:
  • I have managed to pass the onboarding flow
  • Objects and Findings are created properly
  • Tasks are created and completed properly
• I confirmed that the PR's advertised feature or hotfix works as intended.
• I checked the logs for errors and/or warnings and made issues where necessary

What works:

Looks good.

What doesn't work:

n/a

Bug or feature?:

n/a

[HeleenSG]

Todo: (Feedback from @RomijnHumanoids)

• Hover state border 1px instead of 2px.
• Grey border instead of colored borders
• Check if border color is correct

Edit: As it's already merged I will add these fixes in a separate pr.