Skip to content

feat(docs): Form Element Documentation #419

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 18 commits into
base: feat/spec-0.10
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
The table of contents is too big for display.
Diff view
Diff view
  •  
  •  
  •  
7 changes: 7 additions & 0 deletions .config/dictionaries/project.dic
Original file line number Diff line number Diff line change
Expand Up @@ -164,13 +164,16 @@ ltail
maindbname
mapref
markdownlint
maxsplit
mdformat
mdit
mdlint
MDLINTS
mdns
MEMMAP
memx
Metadatum
metno
mgrybyk
mimalloc
minicbor
Expand All @@ -197,6 +200,7 @@ nolfs
notadb
nsec
nsecs
nums
OCSP
Oleksandr
oneshot
Expand Down Expand Up @@ -252,6 +256,7 @@ retriggering
ristretto
rlib
rngs
rowname
rsplit
rulelist
RULENAME
Expand All @@ -276,6 +281,8 @@ sitedocs
skiplist
slotno
smac
sourcenote
sourcenotes
stevenj
stringzilla
subnetwork
Expand Down
4 changes: 3 additions & 1 deletion .markdownlint.jsonc
Original file line number Diff line number Diff line change
Expand Up @@ -151,7 +151,9 @@
// MD033/no-inline-html - Inline HTML
"MD033": {
// Allowed elements
"allowed_elements": []
"allowed_elements": [
"br"
]
},
// MD034/no-bare-urls - Bare URL used
"MD034": true,
Expand Down
8 changes: 4 additions & 4 deletions Earthfile
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
VERSION 0.8

IMPORT github.com/input-output-hk/catalyst-ci/earthly/mdlint:v3.4.1 AS mdlint-ci
IMPORT github.com/input-output-hk/catalyst-ci/earthly/cspell:v3.4.1 AS cspell-ci
IMPORT github.com/input-output-hk/catalyst-ci/earthly/python:v3.4.1 AS python-ci
IMPORT github.com/input-output-hk/catalyst-ci:v3.4.1 AS cat-ci
IMPORT github.com/input-output-hk/catalyst-ci/earthly/mdlint:v3.4.4 AS mdlint-ci
IMPORT github.com/input-output-hk/catalyst-ci/earthly/cspell:v3.4.4 AS cspell-ci
IMPORT github.com/input-output-hk/catalyst-ci/earthly/python:v3.4.4 AS python-ci
IMPORT github.com/input-output-hk/catalyst-ci:v3.4.4 AS cat-ci

FROM debian:stable-slim

Expand Down
2 changes: 1 addition & 1 deletion docs/Earthfile
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
VERSION 0.8

IMPORT github.com/input-output-hk/catalyst-ci/earthly/docs:v3.4.1 AS docs-ci
IMPORT github.com/input-output-hk/catalyst-ci/earthly/docs:v3.4.4 AS docs-ci

IMPORT .. AS repo

Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
VERSION 0.8

IMPORT github.com/input-output-hk/catalyst-ci/earthly/cddl:v3.4.1 AS cddl-ci
IMPORT github.com/input-output-hk/catalyst-ci/earthly/cddl:v3.4.4 AS cddl-ci

check-cddl:
FROM cddl-ci+cddl-base
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
VERSION 0.8

IMPORT github.com/input-output-hk/catalyst-ci/earthly/cddl:v3.4.1 AS cddl-ci
IMPORT github.com/input-output-hk/catalyst-ci/earthly/cddl:v3.4.4 AS cddl-ci

check-cddl:
FROM cddl-ci+cddl-base
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
VERSION 0.8

IMPORT github.com/input-output-hk/catalyst-ci/earthly/cddl:v3.4.1 AS cddl-ci
IMPORT github.com/input-output-hk/catalyst-ci/earthly/cddl:v3.4.4 AS cddl-ci

todo-check-cddl:
FROM cddl-ci+cddl-base
Expand Down
25 changes: 24 additions & 1 deletion docs/src/architecture/08_concepts/signed_doc/docs/.pages
Original file line number Diff line number Diff line change
@@ -1 +1,24 @@
title: Defined Document Types
title: Defined Document Types
nav:
- Brand Parameters: brand_parameters.md
- Brand Parameters Form Template: brand_parameters_form_template.md
- Campaign Parameters: campaign_parameters.md
- Campaign Parameters Form Template: campaign_parameters_form_template.md
- Category Parameters: category_parameters.md
- Category Parameters Form Template: category_parameters_form_template.md
- Comment Moderation Action: comment_moderation_action.md
- Contest Delegation: contest_delegation.md
- Contest Parameters: contest_parameters.md
- Contest Parameters Form Template: contest_parameters_form_template.md
- Proposal: proposal.md
- Proposal Comment: proposal_comment.md
- Proposal Comment Form Template: proposal_comment_form_template.md
- Proposal Comment Presentation Template: proposal_comment_presentation_template.md
- Proposal Form Template: proposal_form_template.md
- Proposal Moderation Action: proposal_moderation_action.md
- Proposal Presentation Template: proposal_presentation_template.md
- Proposal Submission Action: proposal_submission_action.md
- Rep Nomination: rep_nomination.md
- Rep Nomination Form Template: rep_nomination_form_template.md
- Rep Profile: rep_profile.md
- Rep Profile Form Template: rep_profile_form_template.md
Original file line number Diff line number Diff line change
@@ -1 +1,14 @@
title: Form Template Elements
nav:
- Drop Down Single Select: drop_down_single_select.md
- Multi Line Text Entry: multi_line_text_entry.md
- Multi Line Text Entry List Markdown: multi_line_text_entry_list_markdown.md
- Multi Line Text Entry Markdown: multi_line_text_entry_markdown.md
- Multi Select: multi_select.md
- Radio Button Select: radio_button_select.md
- Section: section.md
- Single Grouped Tag Selector: single_grouped_tag_selector.md
- Single Line Https Url Entry: single_line_https_url_entry.md
- Single Line Https Url Entry List: single_line_https_url_entry_list.md
- Single Line Text Entry: single_line_text_entry.md
- Single Line Text Entry List: single_line_text_entry_list.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,241 @@
# Form Template Element - Drop Down Single Select

UI - Drop Down Selection of a single entry from the defined enum.

Select one option from a selector styled as a dropdown menu.
Only one choice is allowed.

## Parent Elements

The Drop Down Single Select form element, can appear as a child of:

* [Section](section.md)

## Definition

<!-- markdownlint-disable MD013 MD046 max-one-sentence-per-line -->
??? example "Definition: Drop Down Single Select"

```json
{
"$defs": {
"dropDownSingleSelect": {
"contentMediaType": "text/plain",
"pattern": "^[^\\n]*$",
"type": "string"
}
},
"$schema": "https://json-schema.org/draft/2020-12/schema"
}
```
<!-- markdownlint-enable MD013 MD046 max-one-sentence-per-line -->

## Parameters

The Drop Down Single Select form element takes the following parameters:

<!---HTML START-->
<!-- markdownlint-disable -->
<div id="element_Drop_Down_Single_Select_parameters" style="padding-left:0px;padding-right:0px;padding-top:10px;padding-bottom:10px;overflow-x:auto;overflow-y:auto;width:100%;height:auto;">
<style>
#element_Drop_Down_Single_Select_parameters table {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', 'Fira Sans', 'Droid Sans', Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

#element_Drop_Down_Single_Select_parameters thead, tbody, tfoot, tr, td, th { border-style: none; }
tr { background-color: transparent; }
#element_Drop_Down_Single_Select_parameters p { margin: 0; padding: 0; }
#element_Drop_Down_Single_Select_parameters .gt_table { display: table; border-collapse: collapse; line-height: normal; margin-left: auto; margin-right: auto; color: #333333; font-size: 16px; font-weight: normal; font-style: normal; background-color: #FFFFFF; width: 100%; border-top-style: solid; border-top-width: 2px; border-top-color: #5F5F5F; border-right-style: none; border-right-width: 2px; border-right-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #5F5F5F; border-left-style: none; border-left-width: 2px; border-left-color: #D3D3D3; }
#element_Drop_Down_Single_Select_parameters .gt_caption { padding-top: 4px; padding-bottom: 4px; }
#element_Drop_Down_Single_Select_parameters .gt_title { color: #333333; font-size: 125%; font-weight: initial; padding-top: 4px; padding-bottom: 4px; padding-left: 5px; padding-right: 5px; border-bottom-color: #FFFFFF; border-bottom-width: 0; }
#element_Drop_Down_Single_Select_parameters .gt_subtitle { color: #333333; font-size: 85%; font-weight: initial; padding-top: 3px; padding-bottom: 5px; padding-left: 5px; padding-right: 5px; border-top-color: #FFFFFF; border-top-width: 0; }
#element_Drop_Down_Single_Select_parameters .gt_heading { background-color: #FFFFFF; text-align: center; border-bottom-color: #FFFFFF; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; }
#element_Drop_Down_Single_Select_parameters .gt_bottom_border { border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #5F5F5F; }
#element_Drop_Down_Single_Select_parameters .gt_col_headings { border-top-style: solid; border-top-width: 2px; border-top-color: #5F5F5F; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #5F5F5F; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; }
#element_Drop_Down_Single_Select_parameters .gt_col_heading { color: #FFFFFF; background-color: #0076BA; font-size: 100%; font-weight: normal; text-transform: inherit; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; vertical-align: bottom; padding-top: 5px; padding-bottom: 5px; padding-left: 5px; padding-right: 5px; overflow-x: hidden; }
#element_Drop_Down_Single_Select_parameters .gt_column_spanner_outer { color: #FFFFFF; background-color: #0076BA; font-size: 100%; font-weight: normal; text-transform: inherit; padding-top: 0; padding-bottom: 0; padding-left: 4px; padding-right: 4px; }
#element_Drop_Down_Single_Select_parameters .gt_column_spanner_outer:first-child { padding-left: 0; }
#element_Drop_Down_Single_Select_parameters .gt_column_spanner_outer:last-child { padding-right: 0; }
#element_Drop_Down_Single_Select_parameters .gt_column_spanner { border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #5F5F5F; vertical-align: bottom; padding-top: 5px; padding-bottom: 5px; overflow-x: hidden; display: inline-block; width: 100%; }
#element_Drop_Down_Single_Select_parameters .gt_spanner_row { border-bottom-style: hidden; }
#element_Drop_Down_Single_Select_parameters .gt_group_heading { padding-top: 8px; padding-bottom: 8px; padding-left: 5px; padding-right: 5px; color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; text-transform: inherit; border-top-style: solid; border-top-width: 2px; border-top-color: #5F5F5F; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #5F5F5F; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; vertical-align: middle; text-align: left; }
#element_Drop_Down_Single_Select_parameters .gt_empty_group_heading { padding: 0.5px; color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; border-top-style: solid; border-top-width: 2px; border-top-color: #5F5F5F; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #5F5F5F; vertical-align: middle; }
#element_Drop_Down_Single_Select_parameters .gt_from_md> :first-child { margin-top: 0; }
#element_Drop_Down_Single_Select_parameters .gt_from_md> :last-child { margin-bottom: 0; }
#element_Drop_Down_Single_Select_parameters .gt_row { padding-top: 8px; padding-bottom: 8px; padding-left: 5px; padding-right: 5px; margin: 10px; border-top-style: none; border-top-width: 1px; border-top-color: #D5D5D5; border-left-style: none; border-left-width: 1px; border-left-color: #D5D5D5; border-right-style: none; border-right-width: 1px; border-right-color: #D5D5D5; vertical-align: middle; overflow-x: hidden; }
#element_Drop_Down_Single_Select_parameters .gt_stub { color: #333333; background-color: #89D3FE; font-size: 100%; font-weight: initial; text-transform: inherit; border-right-style: solid; border-right-width: 2px; border-right-color: #D5D5D5; padding-left: 5px; padding-right: 5px; }
#element_Drop_Down_Single_Select_parameters .gt_stub_row_group { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; text-transform: inherit; border-right-style: solid; border-right-width: 2px; border-right-color: #D3D3D3; padding-left: 5px; padding-right: 5px; vertical-align: top; }
#element_Drop_Down_Single_Select_parameters .gt_row_group_first td { border-top-width: 2px; }
#element_Drop_Down_Single_Select_parameters .gt_row_group_first th { border-top-width: 2px; }
#element_Drop_Down_Single_Select_parameters .gt_striped { background-color: #EDF7FC; }
#element_Drop_Down_Single_Select_parameters .gt_table_body { border-top-style: solid; border-top-width: 2px; border-top-color: #5F5F5F; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #5F5F5F; }
#element_Drop_Down_Single_Select_parameters .gt_sourcenotes { color: #333333; background-color: #FFFFFF; border-bottom-style: none; border-bottom-width: 2px; border-bottom-color: #D3D3D3; border-left-style: none; border-left-width: 2px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 2px; border-right-color: #D3D3D3; }
#element_Drop_Down_Single_Select_parameters .gt_sourcenote { font-size: 90%; padding-top: 4px; padding-bottom: 4px; padding-left: 5px; padding-right: 5px; text-align: left; }
#element_Drop_Down_Single_Select_parameters .gt_left { text-align: left; }
#element_Drop_Down_Single_Select_parameters .gt_center { text-align: center; }
#element_Drop_Down_Single_Select_parameters .gt_right { text-align: right; font-variant-numeric: tabular-nums; }
#element_Drop_Down_Single_Select_parameters .gt_font_normal { font-weight: normal; }
#element_Drop_Down_Single_Select_parameters .gt_font_bold { font-weight: bold; }
#element_Drop_Down_Single_Select_parameters .gt_font_italic { font-style: italic; }
#element_Drop_Down_Single_Select_parameters .gt_super { font-size: 65%; }
#element_Drop_Down_Single_Select_parameters .gt_footnote_marks { font-size: 75%; vertical-align: 0.4em; position: initial; }
#element_Drop_Down_Single_Select_parameters .gt_asterisk { font-size: 100%; vertical-align: 0; }

</style>
<table class="gt_table" data-quarto-disable-processing="false" data-quarto-bootstrap="false">
<thead>

<tr class="gt_heading">
<td colspan="3" class="gt_heading gt_title gt_font_normal">Drop Down Single Select</td>
</tr>
<tr class="gt_heading">
<td colspan="3" class="gt_heading gt_subtitle gt_font_normal gt_bottom_border">

Parameters

</td>
</tr>

</thead>
<tbody class="gt_table_body">
<tr class="gt_group_heading_row">
<th class="gt_group_heading" colspan="3">default</th>
</tr>
<tr>
<th class="gt_row gt_left gt_stub">Required</th>
<td class="gt_row gt_left">yes</td>
<td class="gt_row gt_left">Is the parameter required?</td>
</tr>
<tr>
<th class="gt_row gt_left gt_stub">Type</th>
<td class="gt_row gt_left gt_striped">string</td>
<td class="gt_row gt_left gt_striped"><a href="https://www.rfc-editor.org/rfc/rfc8259.html">JSON</a> Type of the parameter.</td>
</tr>
<tr>
<th class="gt_row gt_left gt_stub">Example</th>
<td class="gt_row gt_left">option 1</td>
<td class="gt_row gt_left">An Example of the parameter.</td>
</tr>
<tr class="gt_group_heading_row">
<th class="gt_group_heading" colspan="3">description</th>
</tr>
<tr>
<th class="gt_row gt_left gt_stub">Required</th>
<td class="gt_row gt_left gt_striped">optional</td>
<td class="gt_row gt_left gt_striped">Is the parameter required?</td>
</tr>
<tr>
<th class="gt_row gt_left gt_stub">Type</th>
<td class="gt_row gt_left">string</td>
<td class="gt_row gt_left"><a href="https://www.rfc-editor.org/rfc/rfc8259.html">JSON</a> Type of the parameter.</td>
</tr>
<tr>
<th class="gt_row gt_left gt_stub">Example</th>
<td class="gt_row gt_left gt_striped">Drop Down Single Selector.
Choose a value from the options presented.</td>
<td class="gt_row gt_left gt_striped">An Example of the parameter.</td>
</tr>
<tr class="gt_group_heading_row">
<th class="gt_group_heading" colspan="3">enum</th>
</tr>
<tr>
<th class="gt_row gt_left gt_stub">Required</th>
<td class="gt_row gt_left">yes</td>
<td class="gt_row gt_left">Is the parameter required?</td>
</tr>
<tr>
<th class="gt_row gt_left gt_stub">Type</th>
<td class="gt_row gt_left gt_striped">array</td>
<td class="gt_row gt_left gt_striped"><a href="https://www.rfc-editor.org/rfc/rfc8259.html">JSON</a> Type of the parameter.</td>
</tr>
<tr>
<th class="gt_row gt_left gt_stub">Items</th>
<td class="gt_row gt_left">Link to parameter Items</td>
<td class="gt_row gt_left">TODO</td>
</tr>
<tr>
<th class="gt_row gt_left gt_stub">Example</th>
<td class="gt_row gt_left gt_striped">['option 1', 'option 2', 'option 3']</td>
<td class="gt_row gt_left gt_striped">An Example of the parameter.</td>
</tr>
<tr class="gt_group_heading_row">
<th class="gt_group_heading" colspan="3">title</th>
</tr>
<tr>
<th class="gt_row gt_left gt_stub">Required</th>
<td class="gt_row gt_left">yes</td>
<td class="gt_row gt_left">Is the parameter required?</td>
</tr>
<tr>
<th class="gt_row gt_left gt_stub">Type</th>
<td class="gt_row gt_left gt_striped">string</td>
<td class="gt_row gt_left gt_striped"><a href="https://www.rfc-editor.org/rfc/rfc8259.html">JSON</a> Type of the parameter.</td>
</tr>
<tr>
<th class="gt_row gt_left gt_stub">Example</th>
<td class="gt_row gt_left">Selector</td>
<td class="gt_row gt_left">An Example of the parameter.</td>
</tr>
<tr class="gt_group_heading_row">
<th class="gt_group_heading" colspan="3">x-guidance</th>
</tr>
<tr>
<th class="gt_row gt_left gt_stub">Required</th>
<td class="gt_row gt_left gt_striped">optional</td>
<td class="gt_row gt_left gt_striped">Is the parameter required?</td>
</tr>
<tr>
<th class="gt_row gt_left gt_stub">Type</th>
<td class="gt_row gt_left">string</td>
<td class="gt_row gt_left"><a href="https://www.rfc-editor.org/rfc/rfc8259.html">JSON</a> Type of the parameter.</td>
</tr>
<tr>
<th class="gt_row gt_left gt_stub">Example</th>
<td class="gt_row gt_left gt_striped">It is recommended that a good choice be made.
A bad choice could effect prospects of success.
A good choice could improve them.
So make a good choice.</td>
<td class="gt_row gt_left gt_striped">An Example of the parameter.</td>
</tr>
<tr class="gt_group_heading_row">
<th class="gt_group_heading" colspan="3">x-icon</th>
</tr>
<tr>
<th class="gt_row gt_left gt_stub">Required</th>
<td class="gt_row gt_left">optional</td>
<td class="gt_row gt_left">Is the parameter required?</td>
</tr>
<tr>
<th class="gt_row gt_left gt_stub">Type</th>
<td class="gt_row gt_left gt_striped">string</td>
<td class="gt_row gt_left gt_striped"><a href="https://www.rfc-editor.org/rfc/rfc8259.html">JSON</a> Type of the parameter.</td>
</tr>
<tr>
<th class="gt_row gt_left gt_stub">Choices</th>
<td class="gt_row gt_left"><a href="../../form_templates/#icons">Icons</a></td>
<td class="gt_row gt_left">All the choices.</td>
</tr>
<tr>
<th class="gt_row gt_left gt_stub">Example</th>
<td class="gt_row gt_left gt_striped">emoji-happy</td>
<td class="gt_row gt_left gt_striped">An Example of the parameter.</td>
</tr>
</tbody>


</table>

</div>


<!-- markdownlint-enable -->
<!---HTML END-->


## Example Usage

This is an Example Form Template showing just the Drop Down Single Select form element, and its parents.

TODO
Loading
Loading