This task covers implementing a CSS-only version of most of the existing Codex Vue components.
### Documentation
We need to document these components in 2 places:
1. On the demo page for that component on the Codex docs site. For the MVP version, this will be added to the existing component demo markdown file in a subsection called `## CSS-only version`, which will appear below the Vue demos/usage tables. See [[ https://869329--wikimedia-codex.netlify.app/components/demos/message.html#css-only-version | demo here ]].
2. In the sandbox, maybe on a separate page from the Vue components?
### Implementation notes
Some Vue components will be very similar to their CSS-only counterpart, while some will be very different, in order to provide some level of functionality in a no-JS situation. Below are implementation notes for each component, including relative effort, similarity in markup/contents, and implementation details.
| Component | Status |Priority | Effort | Template similarity | Notes |
| --- | --- | --- | --- |
| Button | {icon check-square color=green} Done | high | low | 1:1 | Lost in the no-JS version are an accessibility check, the ability to automatically identify an icon-only button, and consistent cross-browser active styles |
| ButtonGroup | Not started |
mediumlow | low | 1:1 | Users will have to write the markup for all the buttons, rather than passing in button data. |
| Card |
In progress{icon check-square color=green} Done | high | low | 1:1 | Users will have to manually use the correct root element (span vs link). |
| Checkbox | {icon check-square color=green} Done | high | medium | 1:1 | Need to refactor Vue template markup to make the label a sibling of the input, rather than wrapping it. Should be done at the same time as Radio since they share a binary-input mixin. |
| Combobox | Not started | low | ? | ? | There are a couple of ways we could create either a fully working or temporarily less functional CSS-only combobox, need to further evaluate |
| ~~Dialog~~ | Declined | low | high | Would need to use native `<dialog>` | Effort to create a working, accessible CSS-only dialog may be too high to justify the lack of expectation of a no-JS dialog |
| Icon | {icon check-square color=green} Done | high | high | 1:1 | Would require scripting on the back end to do what the Vue component does to insert the SVG into the template |
| Lookup | Not started | low | low | Use TextInput instead | In a no-JS environment, we can fall back on a simple TextInput |
| Menu | Not started | low | low | 1:1 | Styles are easily sharable with the same template, but will people use the Menu component in a no-JS context, given we currently only cover the case of a dropdown menu? |
| MenuItem | Not started | low | low | 1:1 | Same as Menu; easy to do, but is it needed? Similar to Card, users would need to specify `<span>` or `<a>` element |
| Message | {icon check-square color=green} Done | high | low | Same, but without some features | Interactive features will not be included |
| ProgressBar |
In progress{icon check-square color=green} Done | medium | low | 1:1 | Will only include the indeterminate variant. |
| Radio | {icon check-square color=green} Done | high | medium | 1:1 | Like Checkbox, need to refactor Vue template markup to make the label a sibling of the input, rather than wrapping it. |
| SearchInput | {icon check-square color=green} Done | low | low | 1:1 | |
| SearchResultTitle | Not started | low | low | 1:1 | The main point of this component is to process a search result label and split it into chunks in order to highlight the search query via bolded text. These styles can be shared, but creating the markup will be on the user. |
| Select | {icon check-square color=green} Done | medium | medium | Completely different, will use `<select>` | Only the select handle will be styled since the native menu can't be. Sharing styles is a bit messy and will rely on mixins. |
| Tab/Tabs | Not started | medium | high | ? | Will need to get creative to make this work with no-JS (for MediaSearch, we used anchor links to select the proper tab) |
| TextInput | {icon check-square color=green} Done | high | low | 1:1 | |
| Thumbnail |
In progress{icon check-square color=green} Done | medium | medium | Similar, but maybe without placeholder icon during load | Would be nice to lazy load the image and show the placeholder in the meantime if possible |
| ToggleButton | Not started | low | medium | Would need to add a checkbox | A working no-JS ToggleButton would require a hidden checkbox input. We could implement this only for CSS-only, or for the Vue version as well. |
| ToggleButtonGroup | Not started | low | medium | Same, but might need to think about checkbox group semantics | |
| ToggleSwitch | In progress | medium | medium | 1:1 | Vue version already uses a hidden checkbox, but we might want to refactor the markup to make the label element a sibling of the input rather than wrapping it, depending on what's best for UX |
| TypeaheadSearch | {icon check-square color=green} Done | high | medium | Use SearchInput instead | Fall back on a simple SearchInput |
### Acceptance criteria
A CSS-only component has been added and documented for the following components:
- [x] Button
- [] ButtonGroup
- [] Card
- [x] Checkbox
- [] Combobox (?)
- [x] Icon
- [] Lookup
- [] Menu
- [] MenuItem
- [x] Message
- [] ProgressBar
- [x] Radio
- [x] SearchInput
- [] SearchResultTitle
- [x] Select
- [] Tabs/Tab
- [x] TextInput
- [] Thumbnail
- [] ToggleButton
- [] ToggleButtonGroup
- [] ToggleSwitch
- [x] TypeaheadSearch