From c15f8cada3a45477e2750101691a35d638883d88 Mon Sep 17 00:00:00 2001 From: Francis Rupert Date: Thu, 14 Jan 2021 12:41:14 -0600 Subject: [PATCH 01/46] amends #369 --- components/alerts/index.md | 90 ++++++++++++-------------------------- 1 file changed, 28 insertions(+), 62 deletions(-) diff --git a/components/alerts/index.md b/components/alerts/index.md index 6b568a00..32e94bfb 100644 --- a/components/alerts/index.md +++ b/components/alerts/index.md @@ -24,108 +24,72 @@ Variations are styled with `class="fsa-alert fsa-alert--[type]"`. ### Success -
- -
-```html +{% capture snippet %} -``` +{% endcapture %} + +{% include preview-and-snippet.html %} ### Warning -
- -
-```html +{% capture snippet %} -``` +{% endcapture %} + +{% include preview-and-snippet.html %} ### Error -
- -
-```html +{% capture snippet %} -``` +{% endcapture %} + +{% include preview-and-snippet.html %} ### Info -
- -
-```html +{% capture snippet %} -``` +{% endcapture %} + +{% include preview-and-snippet.html %} ### No icon -
- -```html +{% capture snippet %} -``` +{% endcapture %} + +{% include preview-and-snippet.html %} ### Example: Dark Background From 485a3ca3e42e33dd60c1305066eb5f4f93bf41be Mon Sep 17 00:00:00 2001 From: Francis Rupert Date: Thu, 14 Jan 2021 12:48:16 -0600 Subject: [PATCH 03/46] Box [amends #369] --- components/box/index.md | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/components/box/index.md b/components/box/index.md index 4ee035c1..a3fa6212 100644 --- a/components/box/index.md +++ b/components/box/index.md @@ -8,15 +8,13 @@ intro: "" jump_menu: true --- -
-
-

Deserunt db excepturi rem asperiores. Sapiente aliquid, hic natus.

-
+{% capture snippet %} +
+

Deserunt excepturi rem asperiores. Sapiente aliquid, hic natus.

+{% endcapture %} -```html -... -``` +{% include preview-and-snippet.html %} ## Variations From efcdd3ee86ce0aad41a3cf0030c61d13df666c5d Mon Sep 17 00:00:00 2001 From: Francis Rupert Date: Thu, 14 Jan 2021 12:53:25 -0600 Subject: [PATCH 04/46] Breadcrumb [amends #369] --- components/breadcrumbs/index.md | 139 ++++++++------------------------ 1 file changed, 35 insertions(+), 104 deletions(-) diff --git a/components/breadcrumbs/index.md b/components/breadcrumbs/index.md index eb499619..a8483114 100644 --- a/components/breadcrumbs/index.md +++ b/components/breadcrumbs/index.md @@ -8,79 +8,57 @@ intro: "Breadcrumbs are a secondary navigation element used to help orient a Use jump_menu: true --- -
-
- -
-
-```html +{% capture snippet %}
-``` +{% endcapture %} + +{% include preview-and-snippet.html %} ## Examples Breadcrumbs are typically paired with the `

` page title. The following examples demonstrate how `fsa-breadcrumb` works in concert with the `

` Page Title. +### Single Item + +{% capture snippet %} +
+ +
+

Sports

+{% endcapture %} + +{% include preview-and-snippet.html %} + ### Reflect current page Avoid using the same redundant label for the last crumb to reflect the current page, instead provide an alternate label that suffiently describes the page without being the same literal text. In this example, the last crumb is indeed the current page - though with an alternate text label accurately describing the current page. -
-
- -
-

Inspection #1234

-
-```html +{% capture snippet %}

Inspection #1234

-``` +{% endcapture %} + +{% include preview-and-snippet.html %} ### Reflect parent @@ -108,31 +88,7 @@ When an alternate label (to the Page Title) cannot sufficiently describe the cur In this example the immediate parent, *American League*, acts as the last crumb to the current page, *Kansas City Royals*. -
-
- -
-

Kansas City Royals

-
-```html +{% capture snippet %}

Kansas City Royals

-``` - -## Single Item Variation - -
-
- -
-

Sports

-
-```html -
- -
-

Sports

-``` +{% endcapture %} + +{% include preview-and-snippet.html %} ## Usage From 2f005a3651330f026ec3cc03603a2b2d6a89c29e Mon Sep 17 00:00:00 2001 From: Francis Rupert Date: Thu, 14 Jan 2021 12:59:15 -0600 Subject: [PATCH 05/46] minor spacing tweak [amends #369] --- _includes/preview-and-snippet.html | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/_includes/preview-and-snippet.html b/_includes/preview-and-snippet.html index b814f7ea..6cc68ab2 100644 --- a/_includes/preview-and-snippet.html +++ b/_includes/preview-and-snippet.html @@ -4,9 +4,7 @@ {% endcomment %} {% if snippet %} -
- {{ snippet }} -
+
{{ snippet }}
```html{{ snippet }}``` {% endif %} From a7c0d939353cdf5b7eaa0e0975063ec834b5de0e Mon Sep 17 00:00:00 2001 From: Francis Rupert Date: Thu, 14 Jan 2021 12:59:33 -0600 Subject: [PATCH 06/46] Button Group [amends #369] --- components/button-group/index.md | 82 +++++++++----------------------- 1 file changed, 22 insertions(+), 60 deletions(-) diff --git a/components/button-group/index.md b/components/button-group/index.md index 87ac898b..8746536d 100644 --- a/components/button-group/index.md +++ b/components/button-group/index.md @@ -25,121 +25,83 @@ Button groups are wrapped in a `` tag and always start with `class="fsa-bt ### Default -
- - - - - - -
-```html +{% capture snippet %} -``` +{% endcapture %} + +{% include preview-and-snippet.html %} ### Small -
- - - - - - -
-```html +{% capture snippet %} -``` +{% endcapture %} +{% include preview-and-snippet.html %} ### Large -
- - - - - - -
-```html +{% capture snippet %} -``` +{% endcapture %} +{% include preview-and-snippet.html %} ### Block -
- - - - - - -
-```html +{% capture snippet %} -``` +{% endcapture %} + +{% include preview-and-snippet.html %} ### Example: none selected -
- - - - - - -
-```html +{% capture snippet %} -``` +{% endcapture %} + +{% include preview-and-snippet.html %} ### Example: as `` element Each item, `fsa-btn-group__item`, will typically be a `
-```html +{% capture snippet %}
Loading Commodities
@@ -443,24 +268,12 @@ Progress indicators are styled with `class="fsa-progress [fsa-progress--[variati -``` +{% endcapture %} + +{% include preview-and-snippet.html %} ### Paired with Box -
-
-
-
Processing claims
-
- -
-
- Ipsum magni blanditiis inve labore hic atque expedita voluptate fuga! -
-
-```html +{% capture snippet %}
Processing claims
@@ -473,7 +286,9 @@ Progress indicators are styled with `class="fsa-progress [fsa-progress--[variati
Ipsum magni blanditiis inve labore hic atque expedita voluptate fuga!
-``` +{% endcapture %} + +{% include preview-and-snippet.html %} ### Paired with Header From 85e51d2485a3265444e64cc7edccfbc4b0745c20 Mon Sep 17 00:00:00 2001 From: Francis Rupert Date: Fri, 15 Jan 2021 12:19:54 -0600 Subject: [PATCH 19/46] Radio [amends #369] --- components/radio/index.md | 248 ++++++-------------------------------- 1 file changed, 38 insertions(+), 210 deletions(-) diff --git a/components/radio/index.md b/components/radio/index.md index 8c95738e..17264678 100644 --- a/components/radio/index.md +++ b/components/radio/index.md @@ -13,35 +13,7 @@ jump_menu: true Its most common usage is as a nested component of the [Form Fields]({{ site.baseurl }}components/form-fields//) component. -
-
    -
  • - - - - -
    • -
  • - - - - -
    • -
  • - - - - -
    • -
  • - - - - -
    • -
-
-```html +{% capture snippet %}
  • @@ -68,7 +40,9 @@ Its most common usage is as a nested component of the [Form Fields]({{ site.base
-``` +{% endcapture %} + +{% include preview-and-snippet.html %} ## Variations @@ -76,40 +50,18 @@ Its most common usage is as a nested component of the [Form Fields]({{ site.base ### Default -
- - - - -
-```html +{% capture snippet %} -``` +{% endcapture %} + +{% include preview-and-snippet.html %} ### Solo -
- - - - - - - - - - - - - - - - -
-```html +{% capture snippet %} @@ -126,7 +78,9 @@ Its most common usage is as a nested component of the [Form Fields]({{ site.base -``` +{% endcapture %} + +{% include preview-and-snippet.html %} ## States @@ -134,84 +88,40 @@ Radio states are styled not by a `class`, but depending on their state (primaril ### Checked -
- - - - -
-```html +{% capture snippet %} -``` +{% endcapture %} + +{% include preview-and-snippet.html %} ### Disabled -
- - - - -
-```html +{% capture snippet %} -``` +{% endcapture %} + +{% include preview-and-snippet.html %} ### Disabled and Checked -
- - - - -
-```html +{% capture snippet %} -``` +{% endcapture %} + +{% include preview-and-snippet.html %} ### Within a [Field]({{ site.baseurl }}components/form-fields/) -
-
- -
    -
  • - - - - -
    • -
  • - - - - -
    • -
  • - - - - -
    • -
  • - - - - -
    • -
- Choose that one special pie -
-
-```html +{% capture snippet %}
    @@ -240,45 +150,15 @@ Radio states are styled not by a `class`, but depending on their state (primaril
- Helpful message here + Choose that one special pie
-``` +{% endcapture %} + +{% include preview-and-snippet.html %} ### Within a [Field]({{ site.baseurl }}components/form-fields/), horizontal list -
-
- -
    -
  • - - - - -
    • -
  • - - - - -
    • -
  • - - - - -
    • -
  • - - - - -
    • -
- Choose that one special pie -
-
-```html +{% capture snippet %}
    @@ -309,59 +189,13 @@ Radio states are styled not by a `class`, but depending on their state (primaril
Choose that one special pie
-``` +{% endcapture %} + +{% include preview-and-snippet.html %} ### Solo Example within a [Table]({{ site.baseurl }}components/tables/) -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Caption that is hidden visually, but read by screenreader
- - - - - CommodityLoan Rate30-Day Period PCPAlternative PCPEffective LDP Rate
- - - - - Barley $/Bushel1.753.302.600.00
- - - - - Canola $/Cwt.8.9415.9915.890.00
-
-```html +{% capture snippet %} @@ -408,7 +242,9 @@ Radio states are styled not by a `class`, but depending on their state (primaril
Caption that is hidden visually, but read by screenreader
-``` +{% endcapture %} + +{% include preview-and-snippet.html %} ## Usage @@ -443,12 +279,4 @@ If you customize a radio button, ensure they continue to meet the the accessibil * Users should be able to tap on or click on either the text `
-
-
-
-
-
Screen ID
-
XYZ-WEB-007
-
-
-
-
-```html +{% capture snippet %}
@@ -57,7 +39,9 @@ jump_menu: true
-``` +{% endcapture %} + +{% include preview-and-snippet.html %} ## Usage From 46721c71f869f55b79212c4927f6ebccfcbbd9d4 Mon Sep 17 00:00:00 2001 From: Francis Rupert Date: Fri, 15 Jan 2021 12:24:08 -0600 Subject: [PATCH 21/46] Search [amends #369] --- components/search/index.md | 288 ++++++------------------------------- 1 file changed, 43 insertions(+), 245 deletions(-) diff --git a/components/search/index.md b/components/search/index.md index 1d1291d0..c5d9348e 100644 --- a/components/search/index.md +++ b/components/search/index.md @@ -32,24 +32,7 @@ jump_menu: true ### Default -
-
- -
-
-```html +{% capture snippet %}
-``` +{% endcapture %} + +{% include preview-and-snippet.html %} ### Default, with label -
-
- -
-
-```html +{% capture snippet %}
-``` +{% endcapture %} + +{% include preview-and-snippet.html %} ### Default, with Icon -
-
- -
-
-```html +{% capture snippet %}
-``` +{% endcapture %} + +{% include preview-and-snippet.html %} ### Default, with Select -
-
- -
-
-```html +{% capture snippet %}
-``` +{% endcapture %} + +{% include preview-and-snippet.html %} ### Default, with Select and Labels -
-
- -
-
-```html +{% capture snippet %}
-``` +{% endcapture %} + +{% include preview-and-snippet.html %} ### Small -
-
- -
-
-```html +{% capture snippet %}
-``` +{% endcapture %} + +{% include preview-and-snippet.html %} ### Small, with Icon -
-
- -
-
-```html +{% capture snippet %}
-``` +{% endcapture %} + +{% include preview-and-snippet.html %} ### Small, with Select -
-
- -
-
-```html +{% capture snippet %}
-``` +{% endcapture %} + +{% include preview-and-snippet.html %} ### Large -
-
- -
-
-```html +{% capture snippet %}
-``` +{% endcapture %} + +{% include preview-and-snippet.html %} ### Large, with Icon -
-
- -
-
-```html +{% capture snippet %}
-``` +{% endcapture %} + +{% include preview-and-snippet.html %} ### Large, with Select -
-
- -
-
-```html +{% capture snippet %}
-``` +{% endcapture %} +{% include preview-and-snippet.html %} ## Usage From b7f11a7f99ba82144968997e788e9050e515a04b Mon Sep 17 00:00:00 2001 From: Francis Rupert Date: Fri, 15 Jan 2021 12:28:37 -0600 Subject: [PATCH 22/46] Select [amends #369] --- components/select/index.md | 161 ++++++++----------------------------- 1 file changed, 32 insertions(+), 129 deletions(-) diff --git a/components/select/index.md b/components/select/index.md index 68d15ebd..f40d82dc 100644 --- a/components/select/index.md +++ b/components/select/index.md @@ -34,16 +34,7 @@ The style for ` - - - - - - -
-```html +{% capture snippet %} ` components always start with `class="fsa-select"`, modi -``` +{% endcapture %} + +{% include preview-and-snippet.html %} ### Full-width -
- -
-```html +{% capture snippet %} ` components always start with `class="fsa-select"`, modi -``` +{% endcapture %} + +{% include preview-and-snippet.html %} ### Small -
- -
-```html +{% capture snippet %} ` components always start with `class="fsa-select"`, modi -``` +{% endcapture %} + +{% include preview-and-snippet.html %} ### Large -
- -
-```html +{% capture snippet %} ` components always start with `class="fsa-select"`, modi -``` +{% endcapture %} + +{% include preview-and-snippet.html %} ### Example: opt-group `` allows for grouping of multiple ` - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-```html +{% capture snippet %} ` components always start with `class="fsa-select"`, modi -``` +{% endcapture %} + +{% include preview-and-snippet.html %} ### Within a [Field]({{ site.baseurl }}components/form-fields/) -
-
- - - Instructional message here -
-
-```html +{% capture snippet %}
` components always start with `class="fsa-select"`, modi Instructional message here
-``` +{% endcapture %} + +{% include preview-and-snippet.html %} ## States ### Error -
- -
-```html +{% capture snippet %} ` components always start with `class="fsa-select"`, modi -``` +{% endcapture %} + +{% include preview-and-snippet.html %} ### Disabled Disabled select components do not have a `class="fsa-select--[variation]"`, instead using the `disabled` attribute. -
- -
-```html +{% capture snippet %} -``` +{% endcapture %} + +{% include preview-and-snippet.html %} ## Responsive From 1f647969183cac28d2fbd234f8e3884004011f9d Mon Sep 17 00:00:00 2001 From: Francis Rupert Date: Fri, 15 Jan 2021 12:32:31 -0600 Subject: [PATCH 23/46] Select Multi [amends #369] --- components/select-multi/index.md | 312 ++++++++----------------------- 1 file changed, 77 insertions(+), 235 deletions(-) diff --git a/components/select-multi/index.md b/components/select-multi/index.md index 43924578..18f67483 100644 --- a/components/select-multi/index.md +++ b/components/select-multi/index.md @@ -60,49 +60,7 @@ Its most common usage is as a nested component of the [Form Fields]({{ site.base The style for Select Multi components always start with `class="fsa-select-multi"`. -
-
-
    -
  • - - -
    • -
  • - - -
    • -
  • - - -
    • -
  • - - -
    • -
  • - - -
    • -
  • - - -
    • -
  • - - -
    • -
  • - - -
    • -
  • - - -
    • -
-
-
-```html +{% capture snippet %}
  • @@ -113,64 +71,45 @@ The style for Select Multi components always start with `class="fsa-select-multi
    • - - ... - +
  • + + +
    • +
  • + + +
    • +
  • + + +
    • +
  • + + +
    • +
  • + + +
    • +
  • + + +
    • +
  • + + +
-``` +{% endcapture %} + +{% include preview-and-snippet.html %} ### Select All Use `data-behavior="select-multi select-multi-all"` to trigger the JavaScript to select or unselect all options. [*See JavaScript Guidance](#javascript-guidance). -
-
-
    -
  • - - -
    • -
  • - - -
    • -
  • - - -
    • -
  • - - -
    • -
  • - - -
    • -
  • - - -
    • -
  • - - -
    • -
  • - - -
    • -
  • - - -
    • -
  • - - -
    • -
-
-
-```html +{% capture snippet %}
  • @@ -185,60 +124,45 @@ Use `data-behavior="select-multi select-multi-all"` to trigger the JavaScript to
    • +
  • + + +
    • +
  • + + +
    • +
  • + + +
    • +
  • + + +
    • +
  • + + +
    • +
  • + + +
    • +
  • + + +
    • +
+
+{% endcapture %} - ... - - -
-``` +{% include preview-and-snippet.html %} ## States ### Disabled, all -
-
-
    -
  • - - -
    • -
  • - - -
    • -
  • - - -
    • -
  • - - -
    • -
  • - - -
    • -
  • - - -
    • -
  • - - -
    • -
  • - - -
    • -
  • - - -
    • -
-
-
-```html +{% capture snippet %}
  • @@ -279,55 +203,15 @@ Use `data-behavior="select-multi select-multi-all"` to trigger the JavaScript to
-``` +{% endcapture %} + +{% include preview-and-snippet.html %} ### Disabled, some Items "One" and "Four" below are disabled. -
-
-
    -
  • - - -
    • -
  • - - -
    • -
  • - - -
    • -
  • - - -
    • -
  • - - -
    • -
  • - - -
    • -
  • - - -
    • -
  • - - -
    • -
  • - - -
    • -
-
-
-```html +{% capture snippet %}
  • @@ -368,57 +252,13 @@ Items "One" and "Four" below are disabled.
-``` +{% endcapture %} + +{% include preview-and-snippet.html %} ### Within a [Field]({{ site.baseurl }}components/form-fields/) -
-
- -
-
    -
  • - - -
    • -
  • - - -
    • -
  • - - -
    • -
  • - - -
    • -
  • - - -
    • -
  • - - -
    • -
  • - - -
    • -
  • - - -
    • -
  • - - -
    • -
-
- Instructional message here -
-
-```html +{% capture snippet %}
@@ -463,7 +303,9 @@ Items "One" and "Four" below are disabled.
Instructional message here
-``` +{% endcapture %} + +{% include preview-and-snippet.html %} ## Usage From 21a4554329c9437995261a1a8515e073541cc386 Mon Sep 17 00:00:00 2001 From: Francis Rupert Date: Fri, 15 Jan 2021 12:45:25 -0600 Subject: [PATCH 24/46] Slider [amends #369] --- _data/navvy.yml | 5 ++ components/slider/index.md | 100 +++++++++++++------------------------ 2 files changed, 40 insertions(+), 65 deletions(-) diff --git a/_data/navvy.yml b/_data/navvy.yml index f2c83926..db3364f1 100644 --- a/_data/navvy.yml +++ b/_data/navvy.yml @@ -108,6 +108,11 @@ img: "img/subcategories/select-multi.png" keyword: "Selection,Choose,Choice,Combo" + - subtitle: "Slider" + subhref: "components/slider" + img: "img/subcategories/slider.png" + keyword: "Range" + - subtitle: "Spinbox" subhref: "components/spinbox" img: "img/subcategories/spinbox.png" diff --git a/components/slider/index.md b/components/slider/index.md index 487e68ef..1800ff0b 100644 --- a/components/slider/index.md +++ b/components/slider/index.md @@ -13,58 +13,49 @@ title_label: 'May require JavaScript' At its root the Slider component is a native `` form element with an attribute `type` of `range`. -
- -
-```html +{% capture snippet %} -``` +{% endcapture %} + +{% include preview-and-snippet.html %} ## Variations ### Full-width -
- -
-```html +{% capture snippet %} -``` +{% endcapture %} + +{% include preview-and-snippet.html %} ### Disabled -
- -
-```html +{% capture snippet %} -``` +{% endcapture %} + +{% include preview-and-snippet.html %} ### Vertical -
-
- -
-
-```html +{% capture snippet %}
-``` +{% endcapture %} + +{% include preview-and-snippet.html %} ### Vertical, Custom Height -
-
- -
-
-```html +{% capture snippet %}
-``` +{% endcapture %} + +{% include preview-and-snippet.html %} ## Examples @@ -72,64 +63,41 @@ At its root the Slider component is a native `` form element with an attr Combine with [Level]({{ site.baseurl }}layout/level/) layout component to arrange Slider with an `` element (note [JavaScript guidance](#javascript-guidance)). -
-
- - - - 90 -
-
-```html +{% capture snippet %}
90
-``` +{% endcapture %} + +{% include preview-and-snippet.html %} ### With output, Full-width Combine the `fsa-slider--block` variation with [Level]({{ site.baseurl }}layout/level/) to arrange Slider with an `` element (note [JavaScript guidance](#javascript-guidance)). -
-
- - - - 10 -
-
-```html +{% capture snippet %}
10
-``` +{% endcapture %} + +{% include preview-and-snippet.html %} ### Within Field component Nested within a [Form Field]({{ site.baseurl }}components/form-fields/). -
-
- - -
-
- -
- - - - 90 -
-
+{% capture snippet %} +
+ +
-```html
@@ -139,7 +107,9 @@ Nested within a [Form Field]({{ site.baseurl }}components/form-fields/). 90
-``` +{% endcapture %} + +{% include preview-and-snippet.html %} ## Usage From 2b43327ec1fbf1ebb9e157c73de6008c00a02c09 Mon Sep 17 00:00:00 2001 From: Francis Rupert Date: Fri, 15 Jan 2021 12:48:14 -0600 Subject: [PATCH 25/46] Spinbox [amends #369] --- components/spinbox/index.md | 194 +++++++++--------------------------- 1 file changed, 45 insertions(+), 149 deletions(-) diff --git a/components/spinbox/index.md b/components/spinbox/index.md index 404186bd..42b147ab 100644 --- a/components/spinbox/index.md +++ b/components/spinbox/index.md @@ -29,18 +29,7 @@ Its most common usage is as a nested component of the [Form Fields]({{ site.base ### Default -
-
-
- -
- -
-
-```html +{% capture snippet %}
@@ -50,22 +39,13 @@ Its most common usage is as a nested component of the [Form Fields]({{ site.base
-``` +{% endcapture %} + +{% include preview-and-snippet.html %} ### Align Right -
-
-
- -
- -
-
-```html +{% capture snippet %}
@@ -75,22 +55,13 @@ Its most common usage is as a nested component of the [Form Fields]({{ site.base
-``` +{% endcapture %} + +{% include preview-and-snippet.html %} ### Small -
-
-
- -
- -
-
-```html +{% capture snippet %}
@@ -100,22 +71,13 @@ Its most common usage is as a nested component of the [Form Fields]({{ site.base
-``` +{% endcapture %} + +{% include preview-and-snippet.html %} ### Large -
-
-
- -
- -
-
-```html +{% capture snippet %}
@@ -125,24 +87,15 @@ Its most common usage is as a nested component of the [Form Fields]({{ site.base
-``` +{% endcapture %} + +{% include preview-and-snippet.html %} ### Step Value (`step="5"`) The Spinbox Component allows for incrementing of data by utilizing the `step=""` attribute of the `input` element. -
-
-
- -
- -
-
-```html +{% capture snippet %}
@@ -152,24 +105,15 @@ The Spinbox Component allows for incrementing of data by utilizing the `step=""`
-``` +{% endcapture %} + +{% include preview-and-snippet.html %} ### Step Value with Minimum and Maximum This example uses `step="100"` `min="-400"` `max="500"` for attributes. -
-
-
- -
- -
-
-```html +{% capture snippet %}
@@ -179,22 +123,13 @@ This example uses `step="100"` `min="-400"` `max="500"` for attributes.
-``` +{% endcapture %} + +{% include preview-and-snippet.html %} ### Decimal Step Value (`step=".01"`) -
-
-
- -
- -
-
-```html +{% capture snippet %}
@@ -204,22 +139,13 @@ This example uses `step="100"` `min="-400"` `max="500"` for attributes.
-``` +{% endcapture %} + +{% include preview-and-snippet.html %} ### Larger Step Values (`step="5000"`) -
-
-
- -
- -
-
-```html +{% capture snippet %}
@@ -229,28 +155,13 @@ This example uses `step="100"` `min="-400"` `max="500"` for attributes.
-``` +{% endcapture %} + +{% include preview-and-snippet.html %} ### Within a [Field]({{ site.baseurl }}components/form-fields/) -
-
- -
-
-
- -
- -
-
- Instructional message here -
-
-```html +{% capture snippet %}
@@ -266,24 +177,16 @@ This example uses `step="100"` `min="-400"` `max="500"` for attributes.
Instructional message here
-``` +{% endcapture %} + +{% include preview-and-snippet.html %} + ## States ### Disabled -
-
-
- -
- -
-
-```html +{% capture snippet %}
@@ -293,22 +196,13 @@ This example uses `step="100"` `min="-400"` `max="500"` for attributes.
-``` +{% endcapture %} + +{% include preview-and-snippet.html %} ### Readonly -
-
-
- -
- -
-
-```html +{% capture snippet %}
@@ -318,7 +212,9 @@ This example uses `step="100"` `min="-400"` `max="500"` for attributes.
-``` +{% endcapture %} + +{% include preview-and-snippet.html %} ## Usage From 6c9caab2e5f638818b0591032d72d5a893c97eee Mon Sep 17 00:00:00 2001 From: Francis Rupert Date: Fri, 15 Jan 2021 12:53:59 -0600 Subject: [PATCH 26/46] Stepped Tabs [amends #369] --- components/stepped-tabs/index.md | 143 ++++--------------------------- 1 file changed, 17 insertions(+), 126 deletions(-) diff --git a/components/stepped-tabs/index.md b/components/stepped-tabs/index.md index 286844e5..fa6dd33e 100644 --- a/components/stepped-tabs/index.md +++ b/components/stepped-tabs/index.md @@ -52,37 +52,7 @@ Each Step (`fsa-stepped-tabs__label`) can be one of three possible states. In th ### Default -
- -
-```html +{% capture snippet %} -``` +{% endcapture %} + +{% include preview-and-snippet.html %} ### Buttons **Actionable** steps can be an `` element or ` - -
  • - -
    • -
  • - - Dol - -
    • -
  • - - Or Sit Amet - -
    • - -
    - - - -```html + +{% capture snippet %} -``` +{% endcapture %} + +{% include preview-and-snippet.html %} ### Actionable: none Use when user should be **prevented** from using Stepped Tabs as a means of navigation (forward backwards within a process), utilize this variation. Each `fsa-stepped-tabs__label` is a `` instead of an actionable `` or ` - -
    - The inspection request identifies this site enrolled in three Land Use programs. While technically possible, it is quite rare and needs to be verified. -
    - -
    -
    - Jane Doe - Assigned to Todd Stanley on - -
    -
    -
    -
    - Todd Stanley commented on - - -
    -
    - On my way to the site now. -
    -
    -
    -
    - Todd Stanley changed the status to - In Progress on - -
    -
    -
    -
    - SPAR Bot closed 8 sub-tasks, 99+ remain open -
    -
    -
    -
    - Jane Doe changed the Due Date to - on - -
    -
    -
    -
    - Jane Doe commented on - -
    -
    - This Inspection remains on hold as operator has been using the last two months to address soil pH level. -
    -
    -
    -
    - Jane Doe Rejected this Inspection Request on - -
    -
    -
    -
    - -
    -
    -
    - -
    - -
    -
    - - -```html +{% capture snippet %}
    @@ -188,7 +100,9 @@ The `fsa-timeline` component's structure enables flexible usage of other Design
    -``` +{% endcapture %} + +{% include preview-and-snippet.html %} ## Variations @@ -197,38 +111,22 @@ Timelines are styled with `class="fsa-timeline"` on the external `
    ` and `cl System nodes are styled with `class="fsa-timeline__item--system"` ### System -
    -
    -
    - Lorem ipsum dolor sit, amet consectetur adipisicing elit. -
    -
    -
    -```html + +{% capture snippet %}
    Lorem ipsum dolor sit, amet consectetur adipisicing elit.
    -``` +{% endcapture %} + +{% include preview-and-snippet.html %} ### User User nodes are styled with `class="fsa-timeline__item--user"` -
    -
    -
    - Jane Doe commented on - - -
    -
    - At voluptatibus reiciendis voluptatum molestiae vel magni utem veritatis quas commodi repellendus laborum illo nesciunt odit vitae nisi eius. Gemino quis obcaecati ut hic minus aut, eius maxime perspiciatis, distinctio facilis excepturi. Deserunt, aliquid tenetur. Atque, culpa. Quos, magni! -
    -
    -
    -```html +{% capture snippet %}
    Jane Doe commented on @@ -239,27 +137,15 @@ User nodes are styled with `class="fsa-timeline__item--user"` At voluptatibus reiciendis voluptatum molestiae vel magni utem veritatis quas commodi repellendus laborum illo nesciunt odit vitae nisi eius. Gemino quis obcaecati ut hic minus aut, eius maxime perspiciatis, distinctio facilis excepturi. Deserunt, aliquid tenetur. Atque, culpa. Quos, magni!
    -``` +{% endcapture %} + +{% include preview-and-snippet.html %} ### Edit comment Editing nodes are styled with `class="fsa-timeline__item--editing"` -
    -
    -
    - -
    -
    -
    - -
    - - -
    -
    -
    -```html +{% capture snippet %}
    @@ -272,26 +158,15 @@ Editing nodes are styled with `class="fsa-timeline__item--editing"`
    -``` +{% endcapture %} + +{% include preview-and-snippet.html %} ### Add a comment Add Comment nodes are styled with `class="fsa-timeline__item--add-comment"` -
    -
    -
    - -
    -
    -
    - -
    - -
    -
    -
    -```html +{% capture snippet %}
    @@ -303,7 +178,9 @@ Add Comment nodes are styled with `class="fsa-timeline__item--add-comment"`
    -``` +{% endcapture %} + +{% include preview-and-snippet.html %} ## Usage From ee5ced62774dfc843fcb2d36a05930fb39f7a10c Mon Sep 17 00:00:00 2001 From: Francis Rupert Date: Fri, 15 Jan 2021 13:16:04 -0600 Subject: [PATCH 32/46] Global Navigation [amends #369] --- components/top-nav/index.md | 1422 ++++++++--------------------------- 1 file changed, 331 insertions(+), 1091 deletions(-) diff --git a/components/top-nav/index.md b/components/top-nav/index.md index 0cbfeeb8..70409925 100644 --- a/components/top-nav/index.md +++ b/components/top-nav/index.md @@ -4,52 +4,14 @@ parent: "Components" type: "UI Component" title: "Global Navigation" shortName: "component__top-nav" -intro: "The Global Navigation Component shall be used to create a cohesive User Experience across all FPAC applications." +intro: "The Global Navigation Component may be used to create a cohesive User Experience across all FPAC applications." jump_menu: true title_label: 'May Require JavaScript' --- -
    - -
    -```html +This navigation component is not necessarily the required Global Navigation structure; rather, it effectively serves as ready-made UI Pattern implemented with FPAC Design System styles and parts. + +{% capture snippet %} -``` +{% endcapture %} + +{% include preview-and-snippet.html %} ## Variations @@ -100,47 +64,7 @@ title_label: 'May Require JavaScript'
    -
    - -
    -```html +{% capture snippet %} -``` +{% endcapture %} + +{% include preview-and-snippet.html %} ## Examples @@ -187,151 +113,7 @@ title_label: 'May Require JavaScript' Expanding upon the menu, utilize the sub menus with `class="fsa-nav-global__sub-menu"`. -
    - -
    -```html +{% capture snippet %} -``` -### Sub Menus: expanded, single list +{% endcapture %} -
    -
    - -
    -
    -```html - + +{% endcapture %} -
    - -
    +{% include preview-and-snippet.html %} - +### Sub Menus: expanded, single list, multi-column - -
  • - - Resources - -
    • - - - - -``` +{% capture snippet %} +
    + -
    - -```html - -``` + + +{% endcapture %} -### Sub Menus: expanded, grouped lists +{% include preview-and-snippet.html %} -
    -
    - -
    -
    -```html - -``` - -### With Search - -
    -
    -```html +{% endcapture %} + +{% include preview-and-snippet.html %} + +### With Search + +{% capture snippet %} -``` +{% endcapture %} + +{% include preview-and-snippet.html %} ### With Search, scoped -
    - -
    -```html +{% capture snippet %} -``` +{% endcapture %} + +{% include preview-and-snippet.html %} ## Responsive @@ -1658,7 +898,7 @@ Always refer to the [Accessibility Guide]({{ site.baseurl }}guides/accessibility ### Summary -The JavaScript for the Top Navigation is used to set a couple of `aria-` attributes to increase usability and accessibility. The attribute changes listed below also affect visual state of the menu and menu items. +This Global Navigation example component used JavaScript to set a couple of `aria-` attributes to increase usability and accessibility. The attribute changes listed below also affect visual state of the menu and menu items. ### Main Level Open From cc7dc356091c0951094461aaf8afd8a90f325044 Mon Sep 17 00:00:00 2001 From: Francis Rupert Date: Fri, 15 Jan 2021 13:17:03 -0600 Subject: [PATCH 33/46] Tophat [amends #369] --- components/tophat/index.md | 52 ++++++-------------------------------- 1 file changed, 8 insertions(+), 44 deletions(-) diff --git a/components/tophat/index.md b/components/tophat/index.md index 5a12c88e..7dbfaee3 100644 --- a/components/tophat/index.md +++ b/components/tophat/index.md @@ -7,27 +7,7 @@ intro: "Indicates associated USDA agency and organization." jump_menu: true --- -
    -
    -
    -
    - - - - USDA - United States Department of Agriculture - - -
    -
    - - Farm Production and Conservation - -
    -
    -
    -
    -```html +{% capture snippet %}
    @@ -46,7 +26,9 @@ jump_menu: true
    -``` +{% endcapture %} + +{% include preview-and-snippet.html %} ## Variations @@ -58,27 +40,7 @@ jump_menu: true -
    -
    -
    -
    - - - - USDA - United States Department of Agriculture - - -
    -
    - - Farm Production and Conservation - -
    -
    -
    -
    -```html +{% capture snippet %}
    @@ -97,7 +59,9 @@ jump_menu: true
    -``` +{% endcapture %} + +{% include preview-and-snippet.html %} ## Responsive From b08d4097cbdb406b2861d7c36181c0840503bd33 Mon Sep 17 00:00:00 2001 From: Francis Rupert Date: Fri, 15 Jan 2021 13:18:01 -0600 Subject: [PATCH 34/46] Topper [amends #369] --- components/topper/index.md | 26 ++++++++------------------ 1 file changed, 8 insertions(+), 18 deletions(-) diff --git a/components/topper/index.md b/components/topper/index.md index 1d697bb4..af61ff2f 100644 --- a/components/topper/index.md +++ b/components/topper/index.md @@ -7,20 +7,15 @@ intro: "Provides a way for a User to return to the top of the page." jump_menu: true --- -
    -
    -
    - Return to top -
    -
    -
    -```html +{% capture snippet %}
    Return to top
    -``` +{% endcapture %} + +{% include preview-and-snippet.html %} ## Variations @@ -32,20 +27,15 @@ jump_menu: true -
    -
    -
    - Return to top -
    -
    -
    -```html +{% capture snippet %}
    Return to top
    -``` +{% endcapture %} + +{% include preview-and-snippet.html %} ## Usage From 9dea432bd65531c623f601e90a507e0a8736614e Mon Sep 17 00:00:00 2001 From: Francis Rupert Date: Fri, 15 Jan 2021 13:23:31 -0600 Subject: [PATCH 35/46] Typography [amends #369] --- visual-style/typography/index.md | 146 +++++++++++-------------------- 1 file changed, 52 insertions(+), 94 deletions(-) diff --git a/visual-style/typography/index.md b/visual-style/typography/index.md index 6413ac2e..44d047bc 100644 --- a/visual-style/typography/index.md +++ b/visual-style/typography/index.md @@ -69,22 +69,16 @@ Should the Web Font, Source Sans Pro, fail to load for any reason. ## Headings -
    -

    h1 header

    -

    h2 header

    -

    h3 header

    -

    h4 header

    -
    h5 header
    -
    h6 header
    -
    -```html +{% capture snippet %}

    h1 header

    h2 header

    h3 header

    h4 header

    h5 header
    h6 header
    -``` +{% endcapture %} + +{% include preview-and-snippet.html %} ### Customizing Heading Size @@ -94,23 +88,20 @@ All `h1`-`h6` elements have a deliberate size assigned to establish a predictabl ### Default -
    -

    Yosemite National Park is set within California’s Sierra Nevada mountains.

    -

    It’s famed for its giant, ancient sequoias, and for Tunnel View, the iconic vista of towering Bridalveil Fall and the granite cliffs of El Capitan and Half Dome.

    -
    -```html +{% capture snippet %}

    Yosemite National Park is set within California’s Sierra Nevada mountains.

    It’s famed for its giant, ancient sequoias, and for Tunnel View, the iconic vista of towering Bridalveil Fall and the granite cliffs of El Capitan and Half Dome.

    -``` +{% endcapture %} + +{% include preview-and-snippet.html %} ### Lead -
    -

    Lorem ipsum dolor bold text dignissim brevitas vindico nisl. Inline link olim aliquip tego ideo, iustum validus regula. Enim conventio praesent, duis hendrerit consequat ingenium neque et saepius suscipere velit. Ideo enim mara facilisis ad, validus abluo eligo odio.

    -
    -```html +{% capture snippet %}

    Lorem ipsum dolor bold text dignissim brevitas vindico nisl. Inline link olim aliquip tego ideo, iustum validus regula. Enim conventio praesent, duis hendrerit consequat ingenium neque et saepius suscipere velit. Ideo enim mara facilisis ad, validus abluo eligo odio.

    -``` +{% endcapture %} + +{% include preview-and-snippet.html %} ### Customizing Font Size @@ -118,82 +109,49 @@ Most elements and components have a deliberate size assigned to them, Utilities ## Text Elements -
    -

    The a element and external a element

    -

    The abbr element and an abbr element with title examples

    -

    The b element example, though you probably want to use strong

    -

    The cite element example

    -

    The code element example

    -

    The del element example

    -

    The dfn element and dfn element with title examples

    -

    The em element example

    -

    The i element example, though you probably want to use em

    -

    The ins element example

    -

    The kbd element example

    -

    The mark element example

    -

    The q element example

    -

    The q element inside a q element example

    -

    The s element example

    -

    The samp element example

    -

    The small element example

    -

    The span element example

    -

    The strong element example

    -

    The sub element example

    -

    The sup element example

    -

    The example

    -

    The u element example

    -

    The var element example

    -
    -```html -anchor element -external anchor -abbr -b element -cite element -code element -del element -dfn element -em element -i element -ins element -kbd element -mark element -q element -q element inside a q element -s element -samp element -small element -span element -strong element -sub element -sup element - -u element -var element -``` +{% capture snippet %} +

    The a element and external a element

    +

    The abbr element and an abbr element with title examples

    +

    The b element example, though you probably want to use strong

    +

    The cite element example

    +

    The code element example

    +

    The del element example

    +

    The dfn element and dfn element with title examples

    +

    The em element example

    +

    The i element example, though you probably want to use em

    +

    The ins element example

    +

    The kbd element example

    +

    The mark element example

    +

    The q element example

    +

    The q element inside a q element example

    +

    The s element example

    +

    The samp element example

    +

    The small element example

    +

    The span element example

    +

    The strong element example

    +

    The sub element example

    +

    The sup element example

    +

    The example

    +

    The u element example

    +

    The var element example

    +{% endcapture %} + +{% include preview-and-snippet.html %} ## Typographical Scale -
    -
    Yosemite National Park is set within California’s Sierra Nevada mountains. It’s famed for its giant, ancient sequoias, and for Tunnel View, the iconic vista of towering Bridalveil Fall and the granite cliffs of El Capitan and Half Dome.
    -
    Yosemite National Park is set within California’s Sierra Nevada mountains. It’s famed for its giant, ancient sequoias, and for Tunnel View, the iconic vista of towering Bridalveil Fall and the granite cliffs of El Capitan and Half Dome.
    -
    Yosemite National Park is set within California’s Sierra Nevada mountains. It’s famed for its giant, ancient sequoias, and for Tunnel View, the iconic vista of towering Bridalveil Fall and the granite cliffs of El Capitan and Half Dome.
    -
    Yosemite National Park is set within California’s Sierra Nevada mountains. It’s famed for its giant, ancient sequoias, and for Tunnel View, the iconic vista of towering Bridalveil Fall and the granite cliffs of El Capitan and Half Dome.
    -
    Yosemite National Park is set within California’s Sierra Nevada mountains. It’s famed for its giant, ancient sequoias, and for Tunnel View, the iconic vista of towering Bridalveil Fall and the granite cliffs of El Capitan and Half Dome.
    -
    Yosemite National Park is set within California’s Sierra Nevada mountains. It’s famed for its giant, ancient sequoias, and for Tunnel View, the iconic vista of towering Bridalveil Fall and the granite cliffs of El Capitan and Half Dome.
    -
    Yosemite National Park is set within California’s Sierra Nevada mountains. It’s famed for its giant, ancient sequoias, and for Tunnel View, the iconic vista of towering Bridalveil Fall and the granite cliffs of El Capitan and Half Dome.
    -
    Yosemite National Park is set within California’s Sierra Nevada mountains. It’s famed for its giant, ancient sequoias, and for Tunnel View, the iconic vista of towering Bridalveil Fall and the granite cliffs of El Capitan and Half Dome.
    -
    -```html -
    Yosemite National Park is set within California’s Sierra Nevada mountains. It’s famed for its giant, ancient sequoias, and for Tunnel View, the iconic vista of towering Bridalveil Fall and the granite cliffs of El Capitan and Half Dome.
    -
    Yosemite National Park is set within California’s Sierra Nevada mountains. It’s famed for its giant, ancient sequoias, and for Tunnel View, the iconic vista of towering Bridalveil Fall and the granite cliffs of El Capitan and Half Dome.
    -
    Yosemite National Park is set within California’s Sierra Nevada mountains. It’s famed for its giant, ancient sequoias, and for Tunnel View, the iconic vista of towering Bridalveil Fall and the granite cliffs of El Capitan and Half Dome.
    -
    Yosemite National Park is set within California’s Sierra Nevada mountains. It’s famed for its giant, ancient sequoias, and for Tunnel View, the iconic vista of towering Bridalveil Fall and the granite cliffs of El Capitan and Half Dome.
    -
    Yosemite National Park is set within California’s Sierra Nevada mountains. It’s famed for its giant, ancient sequoias, and for Tunnel View, the iconic vista of towering Bridalveil Fall and the granite cliffs of El Capitan and Half Dome.
    -
    Yosemite National Park is set within California’s Sierra Nevada mountains. It’s famed for its giant, ancient sequoias, and for Tunnel View, the iconic vista of towering Bridalveil Fall and the granite cliffs of El Capitan and Half Dome.
    -
    Yosemite National Park is set within California’s Sierra Nevada mountains. It’s famed for its giant, ancient sequoias, and for Tunnel View, the iconic vista of towering Bridalveil Fall and the granite cliffs of El Capitan and Half Dome.
    -
    Yosemite National Park is set within California’s Sierra Nevada mountains. It’s famed for its giant, ancient sequoias, and for Tunnel View, the iconic vista of towering Bridalveil Fall and the granite cliffs of El Capitan and Half Dome.
    -``` +{% capture snippet %} +
    Yosemite National Park is set within California’s Sierra Nevada mountains. It’s famed for its giant, ancient sequoias, and for Tunnel View, the iconic vista of towering Bridalveil Fall and the granite cliffs of El Capitan and Half Dome.
    +
    Yosemite National Park is set within California’s Sierra Nevada mountains. It’s famed for its giant, ancient sequoias, and for Tunnel View, the iconic vista of towering Bridalveil Fall and the granite cliffs of El Capitan and Half Dome.
    +
    Yosemite National Park is set within California’s Sierra Nevada mountains. It’s famed for its giant, ancient sequoias, and for Tunnel View, the iconic vista of towering Bridalveil Fall and the granite cliffs of El Capitan and Half Dome.
    +
    Yosemite National Park is set within California’s Sierra Nevada mountains. It’s famed for its giant, ancient sequoias, and for Tunnel View, the iconic vista of towering Bridalveil Fall and the granite cliffs of El Capitan and Half Dome.
    +
    Yosemite National Park is set within California’s Sierra Nevada mountains. It’s famed for its giant, ancient sequoias, and for Tunnel View, the iconic vista of towering Bridalveil Fall and the granite cliffs of El Capitan and Half Dome.
    +
    Yosemite National Park is set within California’s Sierra Nevada mountains. It’s famed for its giant, ancient sequoias, and for Tunnel View, the iconic vista of towering Bridalveil Fall and the granite cliffs of El Capitan and Half Dome.
    +
    Yosemite National Park is set within California’s Sierra Nevada mountains. It’s famed for its giant, ancient sequoias, and for Tunnel View, the iconic vista of towering Bridalveil Fall and the granite cliffs of El Capitan and Half Dome.
    +
    Yosemite National Park is set within California’s Sierra Nevada mountains. It’s famed for its giant, ancient sequoias, and for Tunnel View, the iconic vista of towering Bridalveil Fall and the granite cliffs of El Capitan and Half Dome.
    +{% endcapture %} + +{% include preview-and-snippet.html %} ### Customizing Font Size From 15afb9a29ab768b4de7f3633e9a888fa7df3759d Mon Sep 17 00:00:00 2001 From: Francis Rupert Date: Fri, 29 Jan 2021 10:11:15 -0600 Subject: [PATCH 36/46] Anatomy: Stepped Tabs [closes #388] --- components/stepped-tabs/index.md | 25 +++++++++++++++++++------ img/anatomy/stepped-tabs.png | Bin 0 -> 9539 bytes 2 files changed, 19 insertions(+), 6 deletions(-) create mode 100644 img/anatomy/stepped-tabs.png diff --git a/components/stepped-tabs/index.md b/components/stepped-tabs/index.md index fa6dd33e..b5ffc595 100644 --- a/components/stepped-tabs/index.md +++ b/components/stepped-tabs/index.md @@ -39,14 +39,27 @@ jump_menu: true -### Step States +## Anatomy -Each Step (`fsa-stepped-tabs__label`) can be one of three possible states. In the above example: +Each Step can be one of three possible states. -1. **Step 1**: Completed -1. **Step 2**: Current -1. **Step 3**: Incomplete / Upcoming / Future -1. **Step 4**: Incomplete / Upcoming / Future +```html + + Label + +``` + +{% capture anatomy__markers %} + +1. fsa-stepped-tabs__label--complete +1. fsa-stepped-tabs__label--active +1. fsa-stepped-tabs__label--incomplete + +{% endcapture %} + +{% assign anatomy__image-off = "stepped-tabs.png" %} + +{% include anatomy.html %} ## Variations and Examples diff --git a/img/anatomy/stepped-tabs.png b/img/anatomy/stepped-tabs.png new file mode 100644 index 0000000000000000000000000000000000000000..60544e1c3edb40028ee10fd268e3788102b97afa GIT binary patch literal 9539 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 literal 0 HcmV?d00001 From ed00551ce67653ddbb32a9bee8f7356316414c1f Mon Sep 17 00:00:00 2001 From: Francis Rupert Date: Fri, 29 Jan 2021 11:47:42 -0600 Subject: [PATCH 37/46] Anatomy: Level [closes #391] --- components/level/index.md | 16 +++++++++++++--- img/anatomy/level--off.png | Bin 0 -> 3187 bytes img/anatomy/level--on.png | Bin 0 -> 4445 bytes 3 files changed, 13 insertions(+), 3 deletions(-) create mode 100644 img/anatomy/level--off.png create mode 100644 img/anatomy/level--on.png diff --git a/components/level/index.md b/components/level/index.md index 9ecbe38c..610fb773 100644 --- a/components/level/index.md +++ b/components/level/index.md @@ -36,15 +36,25 @@ jump_menu: true {% include related-cards.html %} -## Structure +## Anatomy ```html - - item + + item item ``` +{% capture anatomy__markers %} +1. Container +1. Item +{% endcapture %} + +{% assign anatomy__image-off = "level--off.png" %} +{% assign anatomy__image-on = "level--on.png" %} + +{% include anatomy.html %} + ## Level Container ### Display diff --git a/img/anatomy/level--off.png b/img/anatomy/level--off.png new file mode 100644 index 0000000000000000000000000000000000000000..55fed31930a828e49937a85a0d3b18e419fe62af GIT binary patch literal 3187 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 LGbz{B|LA`J-mrS) literal 0 HcmV?d00001 diff --git a/img/anatomy/level--on.png b/img/anatomy/level--on.png new file mode 100644 index 0000000000000000000000000000000000000000..cae20deed75a298ea11dd79a2dbf853389f22475 GIT binary patch literal 4445 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 Date: Fri, 29 Jan 2021 12:24:09 -0600 Subject: [PATCH 38/46] Anatomy: Form Field [closes #390] --- components/form-fields/index.md | 91 +++++++++++++++++++------------- img/anatomy/form-field--on.png | Bin 0 -> 7639 bytes 2 files changed, 54 insertions(+), 37 deletions(-) create mode 100644 img/anatomy/form-field--on.png diff --git a/components/form-fields/index.md b/components/form-fields/index.md index 199c5d1d..0b8b0197 100644 --- a/components/form-fields/index.md +++ b/components/form-fields/index.md @@ -29,6 +29,60 @@ title_label: 'JavaScript Included' +## Anatomy + +{% assign anatomy__image-on = "form-field--on.png" %} + +{% include anatomy.html %} +```html +
    + + + This is how people can contact you +
    +``` + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    MarkerSelectorDescriptionRequired
    1fsa-field__label
    Provide the standard style and position of the label of the form element
    		Yes
    2fsa-field__label-desc
    Paired with fsa-field__label, may be used to indicate Required or Optional fields, or omitted.
    		No
    3fsa-field__item
    Provides standardized style and position for form elements. Explore Usage and Variations for the variety of form elements available in this space.
    		Yes
    4fsa-field__help
    Provides instructional text in a standardized location
    		No, though advised
    5fsa-field__message
    Provides validation and error messaging in standardized location, e.g. Error state
    		No, though advised
    + ## Usage {% include do-dont.html %} @@ -884,43 +938,6 @@ By using `fsa-field--columns` paired with use of the [Grid System]({{ site.baseu {% endcapture %} {% include preview-and-snippet.html %} -## CSS Class Overview - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    SelectorDescriptionRequired
    fsa-field__labelProvide the standard style and position of the label of the form elementYes
    fsa-field__label-descPaired with fsa-field__label, may be used to indicate Required or Optional fields, or omitted.No
    fsa-field__itemProvides standardized style and position for form elementsYes
    fsa-field__helpProvides instructional text in a standardized locationNo, though advised
    fsa-field__messageProvides validation and error messaging in standardized locationNo, though advised
    - ## Form Validation Guidelines Common themes that should be followed when developing a validation and messaging system that will help to optimize the workflow of a User. This allows for a more positive User Experience when an system or User error has taken place. diff --git a/img/anatomy/form-field--on.png b/img/anatomy/form-field--on.png new file mode 100644 index 0000000000000000000000000000000000000000..e811d90a9f75f27391b92a9b03256d06d318c4ba GIT binary patch literal 7639 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 ID?Ii8AB@95 Date: Mon, 1 Feb 2021 09:50:51 -0600 Subject: [PATCH 39/46] Class Overview remove --- components/date-picker/index.md | 39 --------------------------------- 1 file changed, 39 deletions(-) diff --git a/components/date-picker/index.md b/components/date-picker/index.md index 9db20bf5..36dff1af 100644 --- a/components/date-picker/index.md +++ b/components/date-picker/index.md @@ -380,45 +380,6 @@ The following list of conversion specifiers are valid for use within the date fo -## CSS Class Overview - -The below Overview of CSS Classes are identical to the [Form Fields Component]({{ site.baseurl }}/components/form-fields/), and the Date Picker augments this component by utilizing JavaScript that builds the neccessary CSS at run-time. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    SelectorDescriptionRequired
    fsa-field__labelProvide the standard style and position of the label of the form elementYes
    fsa-field__label-descPaired with fsa-field__label, may be used to indicate Required or Optional fields, or omitted.No
    fsa-field__itemProvides standardized style and position for form elementsYes
    fsa-field__helpProvides instructional text in a standardized locationNo, though advised
    fsa-field__messageProvides validation and error messaging in standardized locationNo, though advised
    - ## Keyboard Navigation The following keyboard commands allows the user to navigate Date Picker's calendar when in focus. From cefa6c2683efcdadfa2cf3ccd145f3c93f057291 Mon Sep 17 00:00:00 2001 From: Francis Rupert Date: Mon, 1 Feb 2021 10:30:58 -0600 Subject: [PATCH 40/46] starts #383 --- components/button-group/index.md | 2 +- components/buttons/index.md | 2 +- components/checkbox/index.md | 2 +- components/date-picker/index.md | 4 ++- components/form-fields/index.md | 4 ++- components/lists/index.md | 1 + components/radio/index.md | 2 +- components/scratch/index.md | 57 ++++++++++++++++++++++++++++++++ components/tophat/index.md | 2 +- 9 files changed, 69 insertions(+), 7 deletions(-) create mode 100644 components/scratch/index.md diff --git a/components/button-group/index.md b/components/button-group/index.md index 8746536d..e44ccdeb 100644 --- a/components/button-group/index.md +++ b/components/button-group/index.md @@ -4,7 +4,7 @@ parent: "Components" type: "UI Component" title: "Button Group" shortName: "component__button-group" -intro: "Use button groups as a mechanism to toggle between multiple button actions." +intro: "Toggle between multiple button actions." relatedItems: - "Action Bar with Table" jump_menu: true diff --git a/components/buttons/index.md b/components/buttons/index.md index 1b2b022a..2b3a0dbe 100644 --- a/components/buttons/index.md +++ b/components/buttons/index.md @@ -4,7 +4,7 @@ parent: "Components" type: "UI Component" title: "Buttons" shortName: "component__buttons" -intro: "Signal key actions on a page, form, or dialog." +intro: "Signal key actions on a page, form, or dialog." relatedItems: - "Action Bar with Table" - "Button Group" diff --git a/components/checkbox/index.md b/components/checkbox/index.md index 84a3ae3c..742ff5ad 100644 --- a/components/checkbox/index.md +++ b/components/checkbox/index.md @@ -4,7 +4,7 @@ parent: "Components" type: "UI Component" title: "Checkbox" shortName: "component__checkbox" -intro: "A form element enabling the selection of one or more options from a visible list." +intro: "Provide a visble list of options and allow one or more selections." custom_js: "checkbox.js" relatedItemsrelatedItems: - "Action Bar with Table" diff --git a/components/date-picker/index.md b/components/date-picker/index.md index 36dff1af..7c2b80ef 100644 --- a/components/date-picker/index.md +++ b/components/date-picker/index.md @@ -3,7 +3,7 @@ layout: page parent: "Components" type: "UI Component" title: "Date Picker" -intro: "The Date Picker augments an Input element or Form Field with the ability to select a date in a Calendar view." +intro: "Choose a valid formatted date." jump_menu: true custom_js: "datepicker-demo.js" relatedItems: @@ -12,6 +12,8 @@ relatedItems: title_label: 'JavaScript Included' --- +This extends the [Text Input]({{ site.baseurl }}components/text-input/) or the [Form Fields]({{ site.baseurl }}components/form-fields/) component with the ability to select a valid date from a Calendar view. +
    diff --git a/components/form-fields/index.md b/components/form-fields/index.md index 0b8b0197..637fdaa7 100644 --- a/components/form-fields/index.md +++ b/components/form-fields/index.md @@ -4,7 +4,7 @@ parent: "Components" type: "UI Component" title: "Form Fields" shortName: "component__form-fields" -intro: "Form fields are multifaceted components that allow Developers to create application forms with appropriate instructional and validation features." +intro: "Provide structured form controls for data entry." jump_menu: true custom_js: ["select-other.js", "datepicker-demo.js"] relatedItems: @@ -21,6 +21,8 @@ relatedItems: title_label: 'JavaScript Included' --- +Create application forms with appropriate instructional and validation features. +
    diff --git a/components/lists/index.md b/components/lists/index.md index 928ea5ad..53a2bd96 100644 --- a/components/lists/index.md +++ b/components/lists/index.md @@ -1,6 +1,7 @@ --- layout: page parent: "Components" +type: "UI Component" intro: "Structure content into concise sementic sections." title: "Lists" jump_menu: true diff --git a/components/radio/index.md b/components/radio/index.md index 17264678..8fd2e297 100644 --- a/components/radio/index.md +++ b/components/radio/index.md @@ -4,7 +4,7 @@ parent: "Components" type: "UI Component" title: "Radio" shortName: "component__radio" -intro: "Radio buttons allow users to see all available choices at once and select exactly one option." +intro: "Provide a visble list of options and allow exactly one selection." relatedItems: - "Action Bar with Table" - "Form Fields" diff --git a/components/scratch/index.md b/components/scratch/index.md new file mode 100644 index 00000000..1db61800 --- /dev/null +++ b/components/scratch/index.md @@ -0,0 +1,57 @@ +--- +layout: page +parent: "Components" +title: "SCRATCH" +intro: "scratch intro" +suppress_code_toggle: true +relatedItems: + - "Buttons" + - "Button Group" + - "Checkbox" + - "Date Picker" + - "Form Fields" + - "Radio" + - "Search" + - "Select" + - "Select Multi" + - "Slider" + - "Spinbox" + - "Stepped Control" + - "Switch" + - "Text Input" + - "Textarea" + - "Badges" + - "Growl Notifications" + - "Inline Alerts" + - "Labels" + - "Modal" + - "Progress" + - "Splash" + - "Box" + - "Divider" + - "Grid System" + - "Level" + - "Media Object" + - "Section" + - "Breadcrumbs" + - "Content Tabs" + - "Links" + - "Pagination" + - "Stepped Tabs" + - "Lists" + - "Tables" + - "Timeline" + - "Application Header" + - "Global Nav" + - "Top Hat" + - "Footer" + - "Topper" + - "Screen ID" + - "Action Bar with Table" + - "Stepped Process" + - "Page Title Area" + - "Destroy Prompt" +--- + +{% include related-cards.html %} + diff --git a/components/tophat/index.md b/components/tophat/index.md index 7dbfaee3..6f218957 100644 --- a/components/tophat/index.md +++ b/components/tophat/index.md @@ -3,7 +3,7 @@ layout: page parent: "Components" type: "UI Component" title: "Top Hat" -intro: "Indicates associated USDA agency and organization." +intro: "Indicate associated USDA agency and organization." jump_menu: true --- From 95820a03f77c574a2dd49d82ab183b5694061125 Mon Sep 17 00:00:00 2001 From: Francis Rupert Date: Mon, 1 Feb 2021 16:56:05 -0600 Subject: [PATCH 41/46] Continues #383 --- components/checkbox/index.md | 2 +- components/form-fields/index.md | 2 +- components/radio/index.md | 2 +- components/search/index.md | 2 +- components/select-multi/index.md | 4 +++- components/select/index.md | 4 ++-- components/slider/index.md | 2 +- components/spinbox/index.md | 4 ++-- components/stepped-control/index.md | 2 +- components/text-input/index.md | 2 +- components/textarea/index.md | 2 +- 11 files changed, 15 insertions(+), 13 deletions(-) diff --git a/components/checkbox/index.md b/components/checkbox/index.md index 742ff5ad..79f24472 100644 --- a/components/checkbox/index.md +++ b/components/checkbox/index.md @@ -4,7 +4,7 @@ parent: "Components" type: "UI Component" title: "Checkbox" shortName: "component__checkbox" -intro: "Provide a visble list of options and allow one or more selections." +intro: "Make one or more selections from a visible list of options." custom_js: "checkbox.js" relatedItemsrelatedItems: - "Action Bar with Table" diff --git a/components/form-fields/index.md b/components/form-fields/index.md index 637fdaa7..9862c9d8 100644 --- a/components/form-fields/index.md +++ b/components/form-fields/index.md @@ -4,7 +4,7 @@ parent: "Components" type: "UI Component" title: "Form Fields" shortName: "component__form-fields" -intro: "Provide structured form controls for data entry." +intro: "Data entry from a variety of structured form controls." jump_menu: true custom_js: ["select-other.js", "datepicker-demo.js"] relatedItems: diff --git a/components/radio/index.md b/components/radio/index.md index 8fd2e297..aa8b5334 100644 --- a/components/radio/index.md +++ b/components/radio/index.md @@ -4,7 +4,7 @@ parent: "Components" type: "UI Component" title: "Radio" shortName: "component__radio" -intro: "Provide a visble list of options and allow exactly one selection." +intro: "Make a single selection from a visible list of options." relatedItems: - "Action Bar with Table" - "Form Fields" diff --git a/components/search/index.md b/components/search/index.md index c5d9348e..2bdff182 100644 --- a/components/search/index.md +++ b/components/search/index.md @@ -4,7 +4,7 @@ parent: "Components" type: "UI Component" title: "Search" shortName: "component__search" -intro: "Allow users to search for specific content if they know what search terms to use or can’t find desired content in the main navigation" +intro: "Find specific content via user input." relatedItems: - "Buttons" - "Text Input" diff --git a/components/select-multi/index.md b/components/select-multi/index.md index 18f67483..553c8203 100644 --- a/components/select-multi/index.md +++ b/components/select-multi/index.md @@ -4,11 +4,13 @@ parent: "Components" type: "UI Component" title: "Select Multi" shortName: "component__select-multi" -intro: "The Select Multi component provides an easy way to have a scrollable list of options to select from, while also having the option to Select All." +intro: "Make one or more selections from structured scrollable list of otpions." jump_menu: true title_label: 'May require JavaScript' --- +The Select Multi component provides an easy way to have a scrollable list of options to select from, while also having the option to Select All. + Its most common usage is as a nested component of the [Form Fields]({{ site.baseurl }}components/form-fields//) component.
    diff --git a/components/select/index.md b/components/select/index.md index f40d82dc..b1e74d07 100644 --- a/components/select/index.md +++ b/components/select/index.md @@ -4,13 +4,13 @@ parent: "Components" type: "UI Component" title: "Select" shortName: "component__select" -intro: "Sometimes referred to as a “drop down,” the select element allows users to select one option from a list." +intro: "Select a single option from a list." relatedItems: - "Form Fields" jump_menu: true --- -Its most common usage is as a nested component of the [Form Fields]({{ site.baseurl }}components/form-fields//) component. +Often referred to as a "drop down" or "pull down" menu, its most common usage is as a nested component of the [Form Fields]({{ site.baseurl }}components/form-fields//) component.