From b2a5671fd62414e95c5c08ef6ea780ee2680f64e Mon Sep 17 00:00:00 2001 From: Matthew Dingee <52176351+humancompanion-usds@users.noreply.github.com> Date: Tue, 20 Feb 2024 13:16:01 -0500 Subject: [PATCH] Starts to bring mobile buttons into VADS. [Amends #2391] --- _config.yml | 5 +-- config/gulp/build.js | 3 -- src/_about/whats-new.md | 1 + src/_components/button/index.md | 40 ++++++++++++++------ src/_components/template.md | 9 +++-- src/_includes/a11y/do-not-disable-buttons.md | 10 +++-- src/_includes/storybook-preview.html | 9 ++++- 7 files changed, 50 insertions(+), 27 deletions(-) diff --git a/_config.yml b/_config.yml index 7b22d7366..ea79ee5e8 100644 --- a/_config.yml +++ b/_config.yml @@ -33,8 +33,6 @@ uswds_link: https://designsystem.digital.gov/ # People -sketch_for_teams_admin: "Kevin Hoffman" -sketch_library_owner: "Lillian Boot, Barb Denney" experimental_reviewer_1: "Matthew Dingee" @@ -90,5 +88,6 @@ exclude: # Default for building locally. # See configuration files in jekyll-configs/ for environment overrides. -storybook_path: "http://127.0.0.1:6006" +storybook_path: "http://localhost:6006" storybook_prod_uswds_path: "https://design.va.gov/storybook/?path=/docs/uswds" +storybook_mobile_path: "https://department-of-veterans-affairs.github.io/va-mobile-library" diff --git a/config/gulp/build.js b/config/gulp/build.js index 230f972a5..1a31ed99c 100644 --- a/config/gulp/build.js +++ b/config/gulp/build.js @@ -1,8 +1,6 @@ var gulp = require('gulp'); -//var clean = require('gulp-clean'); gulp.task('build', - //gulp.series( gulp.series( 'json', 'fonts', @@ -11,5 +9,4 @@ gulp.task('build', 'css', 'storybook', ) -// ) ); diff --git a/src/_about/whats-new.md b/src/_about/whats-new.md index 3b0176fee..df120c037 100644 --- a/src/_about/whats-new.md +++ b/src/_about/whats-new.md @@ -97,6 +97,7 @@ See the [component-library release notes](https://github.com/department-of-veter ### Documentation updates * Renamed Featured Content to [Summary box]({{ site.baseurl }}/components/summary-box). +* Moved [List]({{ site.baseurl }}/components/list) to components. * Added [Design tokens]({{ site.baseurl }}/foundation/design-tokens) to the Foundation section. * Updated the [Contributing]({{ site.baseurl }}/about/developers/contributing) page for developers. * Added the [Language toggle]({{ site.baseurl }}/components/language-toggle) component. diff --git a/src/_components/button/index.md b/src/_components/button/index.md index 1b1530fdb..70a3e0558 100644 --- a/src/_components/button/index.md +++ b/src/_components/button/index.md @@ -22,33 +22,46 @@ anchors: {% include _site-in-this-section.html %} -## Examples - v1 +## Examples - v3 ### Default - Primary -{% include storybook-preview.html height="100px" story="components-va-button--primary" link_text="va-button--primary" %} +{% include storybook-preview.html height="100px" story="uswds-va-button--primary" link_text="va-button--primary" %} ### Default - Secondary -{% include storybook-preview.html height="100px" story="components-va-button--secondary" link_text="va-button--secondary" %} +{% include storybook-preview.html height="100px" story="uswds-va-button--secondary" link_text="va-button--secondary" %} ### Default - Big -{% include storybook-preview.html height="100px" story="components-va-button--big" link_text="va-button--big" %} +{% include storybook-preview.html height="100px" story="uswds-va-button--big" link_text="va-button--big" %} ### Continue -{% include storybook-preview.html height="100px" story="components-va-button--continue" link_text="va-button--continue" %} +{% include storybook-preview.html height="100px" story="uswds-va-button--continue" link_text="va-button--continue" %} ### Back -{% include storybook-preview.html height="100px" story="components-va-button--back" link_text="va-button--back" %} +{% include storybook-preview.html height="100px" story="uswds-va-button--back" link_text="va-button--back" %} -## Examples - v3 +### Destructive + +{% include storybook-preview.html height="100px" story="button--destructive" link_text="" base_path=site.storybook_mobile_path %} + +### Base - Primary (mobile only) + +{% include storybook-preview.html height="100px" story="button--base" link_text="" base_path=site.storybook_mobile_path %} + +### Base - Secondary (mobile only) + +{% include storybook-preview.html height="100px" story="button--base-secondary" link_text="" base_path=site.storybook_mobile_path %} + + +## Examples - v1 ### Default - Primary -{% include storybook-preview.html height="100px" story="uswds-va-button--primary" link_text="va-button--primary v3 along with additional variations" %} +{% include storybook-preview.html height="100px" story="components-va-button--primary" link_text="va-button--primary v1 along with additional variations" %} ## Usage @@ -59,7 +72,7 @@ anchors: #### When to use a button * **Actions.** Use buttons for clickable actions you want users to take on a page, such as “Add”, “Close”, “Cancel”, or “Save.” Buttons **do things**, links **go places**. Refer to guidance on [Links vs. buttons](#links-vs-buttons). -* **Triggers.** Buttons can also trigger functionality via Javascript. For example, closing a modal window. +* **Triggers.** Buttons can also trigger functionality via Javascript. For example, closing a modal window. #### When to consider something else @@ -72,11 +85,14 @@ anchors: * **Arrows are reserved.** Arrow icons should only appear for "Back" and "Continue" buttons that appear in forms. * **Avoid disabling buttons.** [Disabling buttons is strongly discouraged.](#do-not-disable-buttons) - ### Choosing between variations -* **Use primary for the most important action.** Use the primary button for the most important action that you want the user to take on the page, or in a section. -* **Use secondary for non-primary actions.** Use secondary buttons for any actions that need to be _downplayed_ against other actions on the page, or in a section. +* **Use Primary for the most important action.** Use the primary button for the most important action that you want the user to take on the page, or in a section. Also, use primary buttons to take the user to the next step in a process. +* **Use Secondary for non-primary actions.** Use secondary buttons for any actions that need to be _downplayed_ against other actions on the page, or in a section. Also, use secondary buttons for actions that happen on the current page. +* **Use Big primary buttons for the only action.** Use the big variation of the primary button for the only action on the page. +* **Use Continue and Back for advancing to the next step and returning to the previous step, respectively.** Note that these buttons can be used as a pair from [button pair]({{ site.baseurl }}/components/button/button-pair). Also, note that the Back button should not be used if it is only navigating rather than taking an action (like submitting data ala the Continue button). +* **Use Base, primary and secondary, in dark mode in mobile applications.** Use the base variations for dark mode or when primary buttons will not pass the required color contrast ratio. +* **Use destructive for actions that have serious consequences.** Use the destructive button for any action that cannot be reversed and may result in data loss. Currently used in the mobile app when canceling an appointment and when removing contact information. ### Placement diff --git a/src/_components/template.md b/src/_components/template.md index e5cc990ab..5e62a5a72 100644 --- a/src/_components/template.md +++ b/src/_components/template.md @@ -25,16 +25,18 @@ anchors: {% include storybook-preview.html story="components-va-component-name--default" link_text=page.web-component %} - ### Variation 1 Add Storybook examples as necessary. - ### Variation 2 Add Storybook examples as necessary. +### Variation 3 (mobile only) + +{% include storybook-preview.html height="100px" story="name" base_path=site.storybook_mobile_path %} + ## Usage ### When to use Component name @@ -42,7 +44,6 @@ Add Storybook examples as necessary. * **In this context**: Explain the scenario or user context where this component is, or could be, used. * **In this task**: Explain the user task or tasks where this component is, or could be, used. - ### When to consider something else * **Not in this context**: Explain which scenarios or user context where this component is not, or should not, be used. @@ -64,7 +65,7 @@ Describe the key interactions for this component. ### Choosing between variations -Help the designer and developer understand when to choose between any variations of this component. +Help the designer and developer understand when to choose between any variations of this component. Include mobile variations here. ### Placement diff --git a/src/_includes/a11y/do-not-disable-buttons.md b/src/_includes/a11y/do-not-disable-buttons.md index 9fc90b61e..bf3b3c4b6 100644 --- a/src/_includes/a11y/do-not-disable-buttons.md +++ b/src/_includes/a11y/do-not-disable-buttons.md @@ -12,13 +12,17 @@ In addition, disabled buttons can be unintentionally read out and accessed by mo While it is technically possible, we strongly discourage disabling buttons. Here are recommendations on how to handle specific interactions: -* **Lack of required fields.** When a user attempts to submit a form without entering all required form fields: - * Announce the error and shift focus to the first unfilled required form field. +* **Lack of required fields.** When a user attempts to submit a form without entering all required form fields: + * Announce the error and shift focus to the first unfilled required form field. * Properly indicate required form elements (the right thing will happen for you when you use the required property on form fields in the Design System). * **No longer valid options.** If certain options in a form are no longer valid then there are two options: 1. Replace the form elements that can no longer be changed with text representing the current value instead of the current value within a disabled input. 2. Hide the form elements that are no longer valid. - + +Additional suggestions: + +* **Provide additional context.** Provide additional context surrounding a button that tells a user what to expect when a button is tapped. + #### Is it ever valid to disable a button? Post-form submission or post-action it can be appropriate to disable the submit or action button as the system is in-between states and loading or taking action. This behavior is often seen on buttons that make a purchase or reservation to prevent the user from accidentally triggering the action multiple times. \ No newline at end of file diff --git a/src/_includes/storybook-preview.html b/src/_includes/storybook-preview.html index cbe2c6101..75e2b1218 100644 --- a/src/_includes/storybook-preview.html +++ b/src/_includes/storybook-preview.html @@ -1,3 +1,8 @@ +{% assign storybook_path = site.storybook_path %} +{% if include.base_path %} + {% assign storybook_path = include.base_path %} +{% endif %} +
-[{% if include.link_text %}View {{ include.link_text}}{% else %}See this{% endif %} in Storybook]({{ site.storybook_path }}/?path=/docs/{{ include.story }}) +[{% if include.link_text %}View {{ include.link_text}}{% else %}See this{% endif %} in Storybook]({{ storybook_path }}/?path=/docs/{{ include.story }})