diff --git a/website/docs/components/badge.mdx b/website/docs/components/badge.mdx index bc9820a6..b14f2f9f 100644 --- a/website/docs/components/badge.mdx +++ b/website/docs/components/badge.mdx @@ -3,15 +3,21 @@ title: Badge description: A badge brings attention to information about a related component. --- -import { Badge, CalloutError, CalloutSuccess } from '@wwnds/react'; +import { Badge } from '@wwnds/react'; import { PropsTable } from '@website/components'; +import useBaseUrl from '@docusaurus/useBaseUrl'; > A badge brings attention to information about a related component. ## Anatomy -1. **A container** - an outline or background sets the badge apart from adjacent text. -1. **A label** - the badge's label conveys a single piece of metadata about the component it references. +A badge with indicators calling out the corresponding anatomy items of a navy blue container and label of “badge label” in the center. + +1. **Badge Container** - an outline or background sets the badge apart from adjacent text. +1. **Label** - the badge's label conveys a single piece of metadata about the component it references. ## Usage diff --git a/website/docs/components/button.mdx b/website/docs/components/button.mdx index faa91133..0dc4c982 100755 --- a/website/docs/components/button.mdx +++ b/website/docs/components/button.mdx @@ -3,13 +3,19 @@ title: Button description: A button allows the user to perform an action --- -import { Button, IconButton, Callout, CalloutError, CalloutSuccess } from '@wwnds/react'; +import { Button, IconButton } from '@wwnds/react'; import { PropsTable } from '@website/components'; +import useBaseUrl from '@docusaurus/useBaseUrl'; > A button allows the user to perform an action. ## Anatomy +A button with indicators calling out the corresponding anatomy items of a solid teal container, text label of “Button,” and heart icon. + 1. **Text** - button text lets the user know what will happen when they click the button. - If a button's text is not displayed inside the button, it should be displayed in a related [tooltip](tooltip). 1. **Icon** (_optional_) - an icon can be added either before or after a button to emphasize the button text or character. diff --git a/website/docs/components/callout.mdx b/website/docs/components/callout.mdx index 25f8fd85..28a01d6e 100644 --- a/website/docs/components/callout.mdx +++ b/website/docs/components/callout.mdx @@ -5,15 +5,21 @@ description: A callout brings attention to important information that is related import { Callout, CalloutError, CalloutSuccess, CalloutWarning } from '@wwnds/react'; import { PropsTable } from '@website/components'; +import useBaseUrl from '@docusaurus/useBaseUrl'; > A callout brings attention to important information that is related to the main content. ## Anatomy +A callout with indicators pointing to the corresponding anatomy items of container, icon: top left, title: right of icon, dismiss button: top right, and body text: below title and dismiss button. + 1. **Container** - the container sets the contents of the callout apart from the main content. 1. **Icon** (_optional_) - an icon can be used to add character or emphasize the title. 1. **Title** (_recommended_) - the title of a callout summarizes its contents. -1. **Dismiss button** (_optional_) - a control that allows the user to dismiss the callout. +1. **Dismiss Button** (_optional_) - a control that allows the user to dismiss the callout. 1. **Body** - the contents of the callout. ## Usage diff --git a/website/docs/components/checkbox.mdx b/website/docs/components/checkbox.mdx index 9185a7c0..5b15579e 100755 --- a/website/docs/components/checkbox.mdx +++ b/website/docs/components/checkbox.mdx @@ -5,24 +5,22 @@ tags: [field, form, input] --- import { Checkbox, CheckboxGroup } from '@wwnds/react'; import { PropsTable } from '@website/components'; +import useBaseUrl from '@docusaurus/useBaseUrl'; > A checkbox allows the user to check or uncheck an option. ## Anatomy -The anatomy for both the standalone checkbox and a group of related checkboxes are outlined here. +A checkbox group with indicators calling out the corresponding anatomy items starting with Group Label followed by three checkbox options that consist of: an unchecked control box: left, a checkbox label: right of control box, and descriptive text: below the checkbox label. -### Checkbox - -1. **Control** - the input control that conveys the current state of the checkbox to the user. -1. **Label** - a short name that lets the user know what the checkbox is checking. Clicking the label should toggle the checkbox. +1. **Group Label** - text that conveys how the checkboxes are related and prompts the user to check one or more checkbox. +1. **Control** - the input control that conveys the appropriate state of the checkbox to the user. By default it is unselected. Clicking a checkbox will check or uncheck it. +1. **Checkbox Label** - a short name that lets the user know what the checkbox is checking. Clicking the label should toggle the checkbox. 1. **Description** (_optional_) - additional text that can be used to add clarity or context to the checkbox label. Clicking the description should do nothing. -### Checkbox Group - -1. **Label** - text that conveys how the checkboxes are related and prompts the user to check one or more checkbox. -1. **Current selection**: a checked checkbox indicates that it will be included when the field is submitted. -1. **Choices** - the available checkboxes. Clicking a checkbox will check or uncheck it. ## Usage diff --git a/website/docs/components/choice-field.mdx b/website/docs/components/choice-field.mdx index b7479997..7b34ac57 100644 --- a/website/docs/components/choice-field.mdx +++ b/website/docs/components/choice-field.mdx @@ -5,23 +5,29 @@ description: A choice field allows the user to choose one or more option from a import { Choice, ChoiceField } from '@wwnds/react'; import { PropsTable } from '@website/components'; +import useBaseUrl from '@docusaurus/useBaseUrl'; > A choice field allows the user to choose one or more option from a set of related options. ## Anatomy -1. **Label**: text that conveys how the choices are related and prompts the user to choose one or more choice. -1. **Current selection**: a selected choice indicates that it will be included when the field is submitted. -1. **Choices**: the available choices. - - If the Choice Field is single-choice, all choices should be [radio buttons](radio-group#radio-button). - - If the Choice Field is multiple-choice, all choices should be [checkboxes](checkbox#checkbox). +A diagram of two choice fields: A Radio group choice field and a checkbox group choice field with indicators calling out the label: top, the current selection, and choices. + +1. **Label** - text that conveys how the choices are related and prompts the user to choose one or more choice. +1. **Current Selection** - a selected choice indicates that it will be included when the field is submitted. +1. **Choices** - the available choices. + - If the Choice Field is single-choice, all choices should be [radio buttons](radio-group) (A). + - If the Choice Field is multiple-choice, all choices should be [checkboxes](checkbox) (B). ## Usage In most cases, this component should not be used directly. Rather, you should choose ahead of time whether your field should be single-choice or multi-choice and use the corresponding implementation. -- For single-choice, use the [Radio Group](radio-group#radio-group). -- For multi-choice, use the [Checkbox Group](checkbox#checkbox-group). +- For single-choice, use the [Radio Group](radio-group). +- For multi-choice, use the [Checkbox Group](checkbox). ## React API diff --git a/website/docs/components/disclosure.mdx b/website/docs/components/disclosure.mdx index b26fe9e4..ae7628be 100755 --- a/website/docs/components/disclosure.mdx +++ b/website/docs/components/disclosure.mdx @@ -10,8 +10,8 @@ import { PropsTable } from '@website/components'; ## Anatomy -1. **Summary button** - a control that opens or closes the disclosure and conveys to the user what is contained in the disclosure body. -1. **Summary marker** - an icon that indicates that the disclosure can be opened or closed. +1. **Summary Button** - a control that opens or closes the disclosure and conveys to the user what is contained in the disclosure body. +1. **Summary Marker** - an icon that indicates that the disclosure can be opened or closed. - When displayed before the label, the marker should point to the right when closed and down when open. - When displayed after the label, the marker should point down when closed and up when open. 1. **Body** - the disclosed contents, as summarized by the summary button. diff --git a/website/docs/components/dropdown.mdx b/website/docs/components/dropdown.mdx index 8390dac5..5c4ccc25 100755 --- a/website/docs/components/dropdown.mdx +++ b/website/docs/components/dropdown.mdx @@ -5,18 +5,24 @@ description: A dropdown allows the user to select an option from a list of optio import { Dropdown, Option } from '@wwnds/react'; import { PropsTable } from '@website/components'; +import useBaseUrl from '@docusaurus/useBaseUrl'; > A dropdown allows the user to select an option from a list of options in an expandable overlay. ## Anatomy +A dropdown closed with indicators calling out the corresponding anatomy items starting with Label above the Button followed by an open Dropdown that consist of: a listbox that includes options and the selected option. + 1. **Label** - a short description or prompt that lets the user know what they will be selecting. 1. **Button** - a button that opens the dropdown listbox and displays the currently selected option. - Default text before selection should be "Select". - A marker should be displayed to the right of the button's text to convey whether the dropdown listbox is open or closed. 1. **Listbox** - a container for the list of options that only appears when opened by the dropdown button. -1. **Selected option** - the currently selected option. 1. **Options** - the available options. Clicking an unselected option will select that option, deselect the currently selected option, and close the listbox. +1. **Selected Option** - the currently selected option. ## Usage diff --git a/website/docs/components/link.mdx b/website/docs/components/link.mdx index dc101ea4..a25d17ea 100755 --- a/website/docs/components/link.mdx +++ b/website/docs/components/link.mdx @@ -5,11 +5,17 @@ description: A link allows the user to navigate to another place. import { Link } from '@wwnds/react'; import { PropsTable } from '@website/components'; +import useBaseUrl from '@docusaurus/useBaseUrl'; > A link allows the user to navigate to another place. ## Anatomy +A link with indicators calling out the corresponding anatomy items of text, labeled: Link Text’, and a launch icon: right of Link Text. + 1. **Text** - link text should succinctly describe its destination. 2. **Destination** - where the link will navigate when clicked. This is typically the address (URL) of another page, or a [fragment identifier](https://www.w3.org/Addressing/URL/4_2_Fragments.html) on the current page. diff --git a/website/docs/components/modal.mdx b/website/docs/components/modal.mdx index 493aa82e..58298ee7 100755 --- a/website/docs/components/modal.mdx +++ b/website/docs/components/modal.mdx @@ -5,18 +5,24 @@ description: A modal presents important information or simple tasks to the user import { Modal } from '@wwnds/react'; import { PropsTable } from '@website/components'; +import useBaseUrl from '@docusaurus/useBaseUrl'; > A modal presents important information or simple tasks to the user in an overlay. ## Anatomy +A Modal with indicators calling out the corresponding anatomy items starting with modal container, title: top left, close button icon: top right, body, action buttons: bottom right, and a dark backdrop overlay behind the modal. + 1. **Modal container** - the modal container provides a boundary for the contents of the modal. -1. **Backdrop overlay** - an overlay that prevents the user from interacting with the page's main content. -1. **Title** (_recommended_) - the name of the modal lets the user know what to expect from it and functions as a header for the body of the modal. +1. **Title** (recommended) - the name of the modal lets the user know what to expect from it and functions as a header for the body of the modal. +1. **Close Button** (_optional_) - a button that will always close the modal. + - This should always be included when no other controls exist inside the modal. 1. **Body** - the main content of the modal presents important information to the user or asks them to perform simple tasks before exiting the modal. -1. **Close button** (_optional_) - a button that will always close the modal. - - This should always be included when no other controls exist inside the modal. -1. **Action buttons** (_optional_) - one or more actions that will result in the dismissal of the modal. +1. **Action Buttons** (_optional_) - one or more actions that will result in the dismissal of the modal. +1. **Backdrop Overlay** - an overlay that prevents the user from interacting with the page’s main content. ## Usage diff --git a/website/docs/components/popover.mdx b/website/docs/components/popover.mdx index 6a9b6dd5..ec19b746 100644 --- a/website/docs/components/popover.mdx +++ b/website/docs/components/popover.mdx @@ -4,18 +4,24 @@ description: A popover allows the user to reveal more information or non-critica --- import { Popover } from '@wwnds/react'; -import { PropsTable, Usage } from "@website/components"; +import { PropsTable } from "@website/components"; +import useBaseUrl from '@docusaurus/useBaseUrl'; > A popover allows the user to reveal more information or non-critical tasks in an overlay. ## Anatomy -1. **Container** - the popover's container overlays the main page's content. +A popover with indicators calling out the corresponding anatomy items starting with popover container that contains, an arrow: pointing to an info icon, title: top left, close button icon: top right, body, and action buttons: bottom right. + +1. **Container Container** - the popover's container overlays the main page's content. 1. **Arrow** - a visual indicator that points to the related element. 1. **Title** (_recommended_) - the title of a callout summarizes its contents. -1. **Close button** (_optional_) - a button that will always close the popover. +1. **Close Button** (_optional_) - a button that will always close the popover. 1. **Body** - the contents of the popover. -1. **Action buttons** (_optional_) - one or more custom actions that will result in the popover closing. +1. **Action Buttons** (_optional_) - one or more custom actions that will result in the popover closing. ## Usage diff --git a/website/docs/components/progress-bar.mdx b/website/docs/components/progress-bar.mdx index a0a40360..5fd5f6d2 100644 --- a/website/docs/components/progress-bar.mdx +++ b/website/docs/components/progress-bar.mdx @@ -5,13 +5,19 @@ description: A progress bar lets the user know that something is processing or p import { ProgressBar } from '@wwnds/react'; import { PropsTable } from '@website/components'; +import useBaseUrl from '@docusaurus/useBaseUrl'; > A progress bar lets the user know that something is processing or progressing. ## Anatomy +A progress bar with indicators calling out the corresponding anatomy items of a gray track containing a teal progress indicator with a label: ‘Loading content…’ below the track. + 1. **Track** - a fixed width track for the progress indicator to travel along. -1. **Progress indicator** - an animated bar that conveys processing or progress toward completion. +1. **Progress Indicator** - an animated bar that conveys processing or progress toward completion. 1. **Label** - a description of what is progressing. ## Usage diff --git a/website/docs/components/radio-group.mdx b/website/docs/components/radio-group.mdx index 0ab3cac8..2834f25f 100755 --- a/website/docs/components/radio-group.mdx +++ b/website/docs/components/radio-group.mdx @@ -5,25 +5,23 @@ description: A radio group allows the user to select one option from a set of re import { RadioGroup, Radio } from '@wwnds/react'; import { PropsTable } from '@website/components'; +import useBaseUrl from '@docusaurus/useBaseUrl'; > A radio group allows the user to select one option from a set of related options. ## Anatomy -The anatomy for both a group of related radio buttons and a single radio button are outlined here. +A radio group with indicators calling out the corresponding anatomy items starting with Group Label followed by three radio button options that consist of: an unselected control: left, a radio button label: right of control, and description text: below the radio button label. -### Radio Group - -1. **Label** - text that conveys how the radio buttons are related and prompts the user to select a single radio button. -1. **Current selection**: a selected radio button indicates that it will be the option that is submitted. -1. **Choices** - the available radio buttons. Clicking or arrowing to an unselected radio button will deselect the currently selected radio button. - -### Radio Button - -1. **Control** - the input control that conveys the current state of the radio button to the user. -1. **Label** - a short name that lets the user know what the radio button is selecting. Clicking the label should select the radio button. +1. **Group Label** - text that conveys how the radio buttons are related and prompts the user to select a single radio button. +1. **Control** - the input control that conveys the current state of the radio button to the user. A selected radio button indicates that it will be the option that is submitted. +1. **Radio Button Label** - a short name that lets the user know what the radio button is selecting. Clicking the label should select the radio button. 1. **Description** (_optional_) - additional text that can be used to add clarity or context to the radio button label. Clicking the description should do nothing. + :::warning Single Radio Button Usage Radio buttons must always be part of a radio group. Using a single radio button by itself would allow the user to check the option but not uncheck it. diff --git a/website/docs/components/spinner.mdx b/website/docs/components/spinner.mdx index 713b8583..47ba5535 100644 --- a/website/docs/components/spinner.mdx +++ b/website/docs/components/spinner.mdx @@ -5,12 +5,18 @@ description: A spinner lets the user know that something is processing or progre import { Spinner } from '@wwnds/react'; import { PropsTable } from '@website/components'; +import useBaseUrl from '@docusaurus/useBaseUrl'; > A spinner lets the user know that something is processing or progressing. ## Anatomy -1. **Progress circle** - the circle spins to convey that something is processing and fills clockwise to convey progress toward completion. +A spinner with indicators calling out the corresponding anatomy items of an incomplete progress circle followed by a label: Loading images… on the bottom. + +1. **Progress Circle** - the circle spins to convey that something is processing and fills clockwise to convey progress toward completion. 1. **Label** - a description of what is processing or progressing. ## Usage diff --git a/website/docs/components/step-indicator.mdx b/website/docs/components/step-indicator.mdx index 51414136..5ffc46de 100644 --- a/website/docs/components/step-indicator.mdx +++ b/website/docs/components/step-indicator.mdx @@ -5,20 +5,21 @@ description: A step indicator allows users to know where they are in a long proc import { StepIndicator, Step } from '@wwnds/react'; import { PropsTable, ColorChip } from '@website/components'; +import useBaseUrl from '@docusaurus/useBaseUrl'; > A step indicator allows users to know where they are in a long process or form while they focus on completing discrete steps. ## Anatomy -A step indicator contains: +A step indicator with indicators calling out the corresponding anatomy items of four steps with each step containing a step marker (top): two completed, one active, and one incomplete, a connector, and step labels (bottom). -1. **Steps** - a list of steps, each of which is individually called a step. +1. **Step** - an individual step that is part of a list of steps. +1. **Step Marker** - the marker visually indicates whether the step is complete or incomplete. 1. **Connector** (_optional_) - a purely presentational line that visually connects the individual steps. - -A step contains: - -1. **A step marker** - the marker visually indicates whether the step is complete or incomplete. -1. **Contents** - the step's contents function as an [accessible name](https://www.w3.org/TR/accname-1.2/#dfn-accessible-name) for the step. +1. **Step Label** - text that identifies the step and function as an [accessible name](https://www.w3.org/TR/accname-1.2/#dfn-accessible-name) for the step. ## States and properties diff --git a/website/docs/components/switch.mdx b/website/docs/components/switch.mdx index a764e8e3..37a3e3bd 100755 --- a/website/docs/components/switch.mdx +++ b/website/docs/components/switch.mdx @@ -1,18 +1,18 @@ ---- + --- title: Switch description: A switch allows the user to immediately turn an option on or off. --- -import useBaseUrl from '@docusaurus/useBaseUrl'; import { Switch } from '@wwnds/react'; import { PropsTable } from '@website/components'; +import useBaseUrl from '@docusaurus/useBaseUrl'; > A switch allows the user to immediately turn an option on or off. ## Anatomy A diagram of the switch's various components. diff --git a/website/docs/components/table.mdx b/website/docs/components/table.mdx index 161cb05d..575efaf8 100644 --- a/website/docs/components/table.mdx +++ b/website/docs/components/table.mdx @@ -3,6 +3,8 @@ title: Table description: A table allows users to view data organized in rows and columns. --- +import useBaseUrl from '@docusaurus/useBaseUrl'; + > A table allows users to view data organized in rows and columns. ## Anatomy diff --git a/website/docs/components/tabs.mdx b/website/docs/components/tabs.mdx index 036b8aa5..2a6dd593 100644 --- a/website/docs/components/tabs.mdx +++ b/website/docs/components/tabs.mdx @@ -3,9 +3,9 @@ title: Tabs description: Allow the user to select layered sections of content to display within the same space. --- -import useBaseUrl from '@docusaurus/useBaseUrl'; -import { Tabs, TabList, Tab, TabPanels, TabPanel } from '@wwnds/react'; +import { Tabs } from '@wwnds/react'; import { PropsTable } from '@website/components'; +import useBaseUrl from '@docusaurus/useBaseUrl'; > Tabs allow the user to select layered sections of content to display within the same space. diff --git a/website/docs/components/tag.mdx b/website/docs/components/tag.mdx index c15f7709..d82ffa02 100644 --- a/website/docs/components/tag.mdx +++ b/website/docs/components/tag.mdx @@ -5,14 +5,20 @@ description: A tag allows the user to interact with or dismiss a status or class import { Tag } from '@wwnds/react'; import { PropsTable } from '@website/components'; +import useBaseUrl from '@docusaurus/useBaseUrl'; > A tag allows the user to interact with or dismiss a status or classification. ## Anatomy -1. **A container** - an outline or background sets the tag apart from adjacent text. -1. **A label** - the tag's label conveys a status or classification. -1. **A dismiss indicator** - an icon that appears when the tag is dismissible. +A tag with indicators calling out the corresponding anatomy items of a gray tag container container a label of “tag label” followed by a dismiss indicator. + +1. **Tag Container** - an outline or background sets the tag apart from adjacent text. +1. **Label** - the tag's label conveys a status or classification. +1. **Dismiss Indicator** - an icon that appears when the tag is dismissible. ## Usage diff --git a/website/docs/components/text-field.mdx b/website/docs/components/text-field.mdx index 19262ce5..b599aa8a 100755 --- a/website/docs/components/text-field.mdx +++ b/website/docs/components/text-field.mdx @@ -7,22 +7,26 @@ import { TextField, FieldInfo, FieldFeedback, FieldAddon } from '@wwnds/react'; import { PropsTable } from '@website/components'; +import useBaseUrl from '@docusaurus/useBaseUrl'; > A text field allows the user to enter and edit text. ## Anatomy +A text field with indicator calling out the corresponding anatomy items starting with a Label:top, a field indicator, an Input Container that includes an Input area: left, and a clear icon Addon: right. Below the Input container, indicators call out the Error Feedback: bottom left, and a Character Counter: bottom right. + 1. **Label** - a short name that lets the user know what to type in the field. -1. **Field indicator** (_optional_) - a parenthetical that lets the user know whether the field is required or optional. - - Use this to bring attention to a field that is the "odd one out." - For instance, if there are five fields in a form and only one is optional, the field indicator should say "(optional)" for that one instead of "(required)" for the other four. +1. **Field Indicator** (_optional_) - a parenthetical that lets the user know whether the field is required or optional. + Use this to bring attention to a field that is the “odd one out.” For instance, if there are five fields in a form and only one is optional, the field indicator should say “(optional)” for that one instead of “(required)” for the other four. 1. **Description** (_optional_) - additional text that can be used to add clarity to the role of the text field or help the user understand the expected input format. -1. **Input container** - a container that outlines the boundary of text field's input area and addons. -1. **Input area** - where the user enters text. -1. **Addon(s)** (_optional_) - field addons help the user control the state of the text field. - - Addons can be included before or after the input area. -1. **Error feedback** (_optional_) - feedback that lets the user know that their current input is invalid and why. -1. **Character count feedback** (_optional_) - an indicator that lets the user know how many characters they have remaining. +1. **Input Container** - a container that outlines the boundary of text field’s input area and addons. +1. **Error Feedback** (_optional_) - feedback that lets the user know that their current input is invalid and why. +1. **Input Area** - where the user enters text. +1. **Character Counter** (_optional_) - an indicator that lets the user know how many characters * +1. **Addon(s)** (_optional_) - field addons help the user control the state of the text field. Addons can be included before or after the input area. ## Usage diff --git a/website/docs/components/tooltip.mdx b/website/docs/components/tooltip.mdx index 96e7105f..fd959661 100644 --- a/website/docs/components/tooltip.mdx +++ b/website/docs/components/tooltip.mdx @@ -4,11 +4,18 @@ title: Tooltip import { Tooltip } from '@wwnds/react'; import { PropsTable } from '@website/components'; +import useBaseUrl from '@docusaurus/useBaseUrl'; > A tooltip displays the name of or description for a related element on demand. ## Anatomy +A tooltip with indicators calling out the corresponding anatomy items of a solid navy tooltip container, text label of “Text content,” and an arrow pointing to an info icon located below the tooltip. + +1. **Tooltip Container** - an outline or background sets the tooltip apart. 1. **Text** - tooltip text names or describes a related element. - If the related element does not have a name, the tooltip text is used to name it. - If the related element already has a name, the tooltip text is used to add description to the related element. diff --git a/website/docs/guides/dev/core-api.mdx b/website/docs/guides/dev/core-api.mdx index e577a6fb..f80e2337 100644 --- a/website/docs/guides/dev/core-api.mdx +++ b/website/docs/guides/dev/core-api.mdx @@ -2,8 +2,8 @@ title: Core API --- -import useBaseUrl from "@docusaurus/useBaseUrl"; import { ColorChip } from "@website/components"; +import useBaseUrl from "@docusaurus/useBaseUrl"; The `@wwnds/core` package exposes six top-level mixins for setting CSS declarations, as well as a set of customizable [variables for theming](#theming-variables). diff --git a/website/docs/patterns/multiple-choice.mdx b/website/docs/patterns/multiple-choice.mdx index 1c10e80d..3a21892c 100644 --- a/website/docs/patterns/multiple-choice.mdx +++ b/website/docs/patterns/multiple-choice.mdx @@ -82,7 +82,7 @@ The more answer choices there are, the more difficult this becomes. If we have a disability that impairs our working memory or are experiencing a temporary impairment of our working memory, this may prevent us from even being able to answer the question. -A complex question stem will contribute to this as well, which is why we also recommend [keeping the stem brief](#keep-the-stem-and-instructions-brief). +A complex question stem will contribute to this as well, which is why we also recommend [keeping the stem brief](#keep-the-stem-and-instructions-clear-and-brief). ::: ### Deliver answer feedback in its own view diff --git a/website/static/img/Anatomy_ChoiceField.png b/website/static/img/Anatomy_ChoiceField.png new file mode 100644 index 00000000..28ef2058 Binary files /dev/null and b/website/static/img/Anatomy_ChoiceField.png differ diff --git a/website/static/img/Anatomy_badge.png b/website/static/img/Anatomy_badge.png new file mode 100644 index 00000000..4cb6e487 Binary files /dev/null and b/website/static/img/Anatomy_badge.png differ diff --git a/website/static/img/Anatomy_button.png b/website/static/img/Anatomy_button.png new file mode 100644 index 00000000..ec51c9d1 Binary files /dev/null and b/website/static/img/Anatomy_button.png differ diff --git a/website/static/img/Anatomy_callout.png b/website/static/img/Anatomy_callout.png new file mode 100644 index 00000000..b90965a8 Binary files /dev/null and b/website/static/img/Anatomy_callout.png differ diff --git a/website/static/img/Anatomy_checkbox.png b/website/static/img/Anatomy_checkbox.png new file mode 100644 index 00000000..08c3c282 Binary files /dev/null and b/website/static/img/Anatomy_checkbox.png differ diff --git a/website/static/img/Anatomy_dropdown.png b/website/static/img/Anatomy_dropdown.png new file mode 100644 index 00000000..a9d97a2f Binary files /dev/null and b/website/static/img/Anatomy_dropdown.png differ diff --git a/website/static/img/Anatomy_link.png b/website/static/img/Anatomy_link.png new file mode 100644 index 00000000..ee19050e Binary files /dev/null and b/website/static/img/Anatomy_link.png differ diff --git a/website/static/img/Anatomy_modal.png b/website/static/img/Anatomy_modal.png new file mode 100644 index 00000000..b65d3c21 Binary files /dev/null and b/website/static/img/Anatomy_modal.png differ diff --git a/website/static/img/Anatomy_popover.png b/website/static/img/Anatomy_popover.png new file mode 100644 index 00000000..1993b3d0 Binary files /dev/null and b/website/static/img/Anatomy_popover.png differ diff --git a/website/static/img/Anatomy_progress-bar.png b/website/static/img/Anatomy_progress-bar.png new file mode 100644 index 00000000..6ad0f6e7 Binary files /dev/null and b/website/static/img/Anatomy_progress-bar.png differ diff --git a/website/static/img/Anatomy_radio.png b/website/static/img/Anatomy_radio.png new file mode 100644 index 00000000..9e650a39 Binary files /dev/null and b/website/static/img/Anatomy_radio.png differ diff --git a/website/static/img/Anatomy_response-indicator.png b/website/static/img/Anatomy_response-indicator.png new file mode 100644 index 00000000..dc0fadf9 Binary files /dev/null and b/website/static/img/Anatomy_response-indicator.png differ diff --git a/website/static/img/Anatomy_spinner.png b/website/static/img/Anatomy_spinner.png new file mode 100644 index 00000000..3dd3f018 Binary files /dev/null and b/website/static/img/Anatomy_spinner.png differ diff --git a/website/static/img/Anatomy_step-indicator.png b/website/static/img/Anatomy_step-indicator.png new file mode 100644 index 00000000..5121d2f2 Binary files /dev/null and b/website/static/img/Anatomy_step-indicator.png differ diff --git a/website/static/img/Anatomy_tag.png b/website/static/img/Anatomy_tag.png new file mode 100644 index 00000000..ec645cf0 Binary files /dev/null and b/website/static/img/Anatomy_tag.png differ diff --git a/website/static/img/Anatomy_textfield.png b/website/static/img/Anatomy_textfield.png new file mode 100644 index 00000000..e220defd Binary files /dev/null and b/website/static/img/Anatomy_textfield.png differ diff --git a/website/static/img/Anatomy_tooltip.png b/website/static/img/Anatomy_tooltip.png new file mode 100644 index 00000000..50d42a56 Binary files /dev/null and b/website/static/img/Anatomy_tooltip.png differ