docs: updates for changes to form components (#318)

* docs: add required attributes for form components

* chore: bulk edits, mostly of english content

* chore: formatting for checkbox

* docs: french translation for required attributes for form elements

* docs: updated french content

* fix: formatting

* chore: rename to groupe de boutons radio

* chore: adding deprecated message (needing fr translation) in case we do use it

* fix: typo

* chore: uncomment dates

* chore: french updates

* chore: copyedits for french

* chore: found a few more dates that need to be uncommented

* chore: uncoment one more date

* chore: uncapitalize words

* chore: remove iframe to storybook

* chore: remove extra partial code

* chore: change example text on fr pages to fr

* chore: updates to form components

* chore: fix syntax for vars

* Render radio-group using data file

* chore: horrible missed syntax

* chore: update stringify function

* refactor: update error message content for deprecated radio message

* chore: remove extra brackets from the radio group

* chore: update gcds-components package dependency

* refactor: update error message preview

* refactor: remove component review for deprecated radio button

* chore: update options

* chore: horrible bug

* fix: add missing lang to storybook url

---------

Co-authored-by: Ethan Wallace <[email protected]>
Co-authored-by: Melanie Boeckmann <[email protected]>

.eleventy.js

@@ -154,6 +154,11 @@ module.exports = function (eleventyConfig) {
     return colourName;
   });
 
+  eleventyConfig.addFilter('stringify', (data) => {
+    return JSON.stringify(data, null, "\t")
+  })
+
+
   /* Markdown Overrides */
   let markdownLibrary = markdownIt({
     html: true,

package.json

@@ -33,7 +33,7 @@
   },
   "devDependencies": {
     "@11ty/eleventy-plugin-syntaxhighlight": "^5.0.0",
-    "@cdssnc/gcds-components": "^0.19.1",
+    "@cdssnc/gcds-components": "^0.21.0",
     "@cdssnc/gcds-tokens": "^1.13.2",
     "@cdssnc/gcds-utility": "^1.1.0",
     "@quasibit/eleventy-plugin-sitemap": "^2.1.4",

src/_data/contactus.js

@@ -0,0 +1,59 @@
+module.exports = {
+  en: {
+    options: [
+      {
+        id: "requestADemo",
+        label: "Request a demo",
+        hint: "Book a demo of GC Design System for your team.",
+        value: "Request a demo"
+      },
+      {
+        id: "reportAnIssue",
+        label: "Report an issue",
+        hint: "Communicate a problem you've found.",
+        value: "Report an issue"
+      },
+      {
+        id: "participateInUserResearch",
+        label: "Participate in user research",
+        hint: "We'll add your email to a list for user interviews and research.",
+        value: "Participate in user research"
+      },
+      {
+        id: "other",
+        label: "Other",
+        hint: "Provide a reason in the message field.",
+        value: "Other",
+      }
+    ]
+},
+fr: {
+    options: [
+      {
+        id: "requestADemo",
+        label: "Demander une démonstration",
+        hint: "Réservez une démonstration de Système de design GC pour votre équipe.",
+        value: "Request a demo | Demander une démonstration"
+      },
+      {
+        id: "reportAnIssue",
+        label: "Signaler un problème",
+        hint: "Communiquez un problème que vous avez trouvé.",
+        value: "Report an issue | Signaler un problème"
+      },
+      {
+        id: "participateInUserResearch",
+        label: "Participer à la recherche sur les utilisateur·rice·s",
+        hint: "Nous ajouterons votre adresse courriel à la liste des candidat·e·s pour la recherche sur les utilisateur·rice·s.",
+        value: "Participate in user research | Participer à la recherche sur les utilisateur·rice·s"
+      },
+      {
+        id: "other",
+        label: "Autre",
+        hint: "Indiquez une raison dans le champ du message.",
+        value: "Other | Autre",
+      }
+    ]
+  },
+};
+

src/en/components/checkbox/code.md

@@ -12,6 +12,14 @@ Use a checkbox with a [fieldset]({{ links.fieldset }}) when you are expecting th
 
 ## Coding and accessibility for checkboxes
 
+### Apply required attributes
+
+For the checkbox to function properly, always use the following attributes with `<gcds-checkbox>`:
+
+- `name`
+- `label`
+- `checkbox-id`
+
 ### Use a fieldset and the required attribute
 
 - Group checkbox options and name the group using the [fieldset component]({{ links.fieldset }}).

src/en/components/checkbox/use-case.md

@@ -30,7 +30,7 @@ Use a checkbox with a [fieldset]({{ links.fieldset }}) to make a request for inf
 <article class="bg-full-width bg-primary text-light pt-500 pb-400 my-500">
   <h2 class="mt-0 mb-400">Related components</h2>
 
-<a href="{{ links.radio }}" class="link-light">Radios</a> to give a single option from a larger set of options.
+<a href="{{ links.radioGroup }}" class="link-light">Radio groups</a> to give a single option from a larger set of options.
 
 <a href="{{ links.select }}" class="link-light">Select</a> to give a single option from a medium to long sized list in a dropdown format.
 

src/en/components/error-message/base.md

@@ -16,5 +16,7 @@ An error message is a description of a problem blocking a user goal.
 {% enddocLinks %}
 
 {% componentPreview "Error message component preview" "px-300 pt-400 pb-100" %}
-<gcds-error-message message="Error message or validation message."></gcds-error-message>
+<gcds-error-message message-id="example-message">
+Error message or validation message.
+</gcds-error-message>
 {% endcomponentPreview %}

src/en/components/file-uploader/code.md

@@ -12,6 +12,14 @@ Use the file uploader to allow a person to select and review files they’d like
 
 ## Code and accessibility for file uploader
 
+### Apply required attributes
+
+For the file uploader to function properly, always use the following attributes with `<gcds-file-uploader>`:
+
+- `name`
+- `label`
+- `uploader-id`
+
 {% include "partials/error-message.njk" %}
 
 ### Upload multiple files

src/en/components/input/code.md

@@ -3,6 +3,7 @@ title: Input
 layout: 'layouts/component-documentation.njk'
 translationKey: 'inputCode'
 tags: ['inputEN', 'code']
+date: 'git Last Modified'
 ---
 
 ## Build an input
@@ -11,6 +12,14 @@ Use an input to ask for information short, one-line response.
 
 ## Coding and accessibility for inputs
 
+### Apply required attributes
+
+For the input to function properly, always use the following attributes with `<gcds-input>`:
+
+- `name`
+- `label`
+- `input-id`
+
 ### Size inputs to fit response type
 
 - Set the `size` attribute of the input for responses you know have a specific length (size "50" = 50 characters). For example, 6 characters for a postal code or 10 characters for a phone number.

src/en/components/radio-group/base.md

@@ -0,0 +1,23 @@
+---
+layout: 'layouts/base.njk'
+github: https://github.com/cds-snc/gcds-components/tree/main/packages/web/src/components/gcds-radio-group
+figma: https://www.figma.com/file/mh2maMG2NBtk41k1O1UGHV/Canadian-Digital-Service%E2%80%A8---GC-Design-System?node-id=818%3A3759&t=ciEmm7GYyGAY73zZ-0
+permalink: false
+tags: ['radiogroupEN', 'header']
+---
+
+# Radio Group <br>`<gcds-radio-group>`
+
+_Also called: radio button, radio._
+
+The radio group is a set of options for a single selection.
+
+{% docLinks locale stage figma github %}
+{% enddocLinks %}
+
+{% componentPreview "Radio group component preview" "px-300 pt-400 pb-200" %}
+<gcds-fieldset fieldset-id="fieldset" legend="Legend" hint="Hint / Example message.">
+<gcds-radio-group name="radio" options='[{"id":"form-radio-1","label":"Label 1","hint":"Description or example to make the option clearer"},{"id":"form-radio-r","label":"Label 2","hint":"Description or example to make the option clearer"}]'>
+</gcds-radio-group>
+</gcds-fieldset>
+{% endcomponentPreview %}

src/en/components/radio-group/code.md

@@ -0,0 +1,52 @@
+---
+title: Radio group
+layout: 'layouts/component-documentation.njk'
+translationKey: 'radiogroupCode'
+tags: ['radiogroupEN', 'code']
+date: 'git Last Modified'
+---
+
+## Build a radio group
+
+Use a radio group with a [fieldset]({{ links.fieldset }}) when you're expecting a person to select only one option from a short list of responses.
+
+The radio group helps a person to make a choice by limiting their options.
+
+## Coding and accessibility for radio group
+
+### Apply required attributes
+
+For the radio group to function properly, always use the following attributes with `<gcds-radio-group>`:
+
+- `name`
+- `options`
+
+### Use the options attribute with radio group
+
+The options attribute takes an array of objects to render each radio button. The following is an example of one of the objects:
+
+{% highlight "js" %}
+{
+'id'!: '',
+'label'!: '',
+'value'!: '',
+'required'?: '',
+'disabled'?: '',
+'checked'?: '',
+'hint'?: '',
+}
+{% endhighlight %}
+
+- Within the options attribute, always use the object's `id`, `label` and `value` properties for each radio button. The rest of the properties are optional.
+
+{% include "partials/getcode.njk" %}
+
+<iframe
+  title="Overview of gcds-radio-group properties and events."
+  src="https://cds-snc.github.io/gcds-components/iframe.html?viewMode=docs&demo=true&singleStory=true&id=components-radio-group--events-properties&lang=en"
+  width="1200"
+  height="1650"
+  style="display: block; margin: 0 auto;"
+  frameBorder="0"
+  allow="clipboard-write"
+></iframe>

src/en/components/radio-group/design.md

@@ -0,0 +1,34 @@
+---
+title: Radio group
+layout: 'layouts/component-documentation.njk'
+translationKey: 'radiogroupDesign'
+tags: ['radiogroupEN', 'design']
+date: "git Last Modified"
+---
+
+## Radio group anatomy - with fieldset
+
+<ol class="anatomy-list">
+  <li>The <strong>fieldset legend</strong> acts as a heading to identify the grouped radios. Legend text is left aligned and in sentence case (only the initial letter is capitalized).</li>
+  <li>The <strong>fieldset hint text</strong> communicates specific requirements for the radio grouping to support task success.</li>
+  <li>The <strong>radio button</strong> shows, by the presence or absence of the <strong>checked button</strong>, whether an option has been selected or not.</li>
+  <li>The <strong>checked button</strong> shows that an option has been selected.</li>
+  <li>The <strong>radio label</strong> states the choice the radio button represents. Label text is in sentence case.</li>
+  <li>The <strong>radio hint text</strong> gives a person additional information about the choice.</li>
+</ol>
+
+<img class="b-sm b-default p-400" src="/images/en/components/anatomy/gcds-radio-group-anatomy.svg" alt="Radio group anatomy showing the labels Fieldset legend, Fieldset hint, Checkmark, Radio label, Radio button, and Radio hint."/>
+
+## Design and accessibility for radio group
+
+### Make radios visible and options clear
+
+- Limit the number of options to 6-7.
+- Limit text for each option to a few words or a short phrase and include hint text for more context.
+- Generally, order options alphabetically. In some cases, it can be helpful for you to order them from most to least common.
+- When possible, include an option like "None" or "None of the above" to avoid forcing an incorrect selection. With radio groups, if a person accidentally selects an option, it cannot be de-selected, or reversed.
+
+### Help a person understand how to use radios
+- Avoid assuming a person will know how to use a radio group.
+- Use the [fieldset's]({{ links.fieldset }}) hint text to include a cue for people unfamiliar with radio groups to specify they can only make a single selection. For example, "Select the response that best applies".
+- Avoid pre-selecting a radio group option. This makes it more likely that a person will miss a question and submit a wrong answer.

src/en/components/radio-group/use-case.md

@@ -0,0 +1,37 @@
+---
+title: Radio group
+layout: "layouts/component-documentation.njk"
+eleventyNavigation:
+  key: radiogroupEN
+  title: Radio group
+  locale: en
+  parent: componentsEN
+  otherNames: radio, radio button
+  description: A short set of options for single selection.
+  thumbnail: /images/common/components/preview-radio.svg
+  alt: A column of three radio selections. Each radio button circle has a thin grey border and white fill beside a thick grey line to represent the label. One of the three circles is selected and has a single dark grey circle inside of it.
+  state: published 
+translationKey: "radiogroup"
+tags: ['radiogroupEN', 'usage']
+permalink: /en/components/radio-group/
+date: 'git Last Modified'
+---
+
+Take a look at what problems radio groups solve to see if they fit the problem you're solving for.
+
+## Problems radio groups solves
+
+Use radio groups with a [fieldset]({{ links.fieldset }}). Use a radio group to request a single-option response within a short set and to:
+
+- Limit the number of possible answers to your question.
+- Specify the possible answers to your question.
+- Give a person the ability to answer without writing by selecting one item from a list.
+
+<article class="bg-full-width bg-primary text-light pt-500 pb-400 my-500">
+  <h2 class="mt-0 mb-400">Related components</h2>
+
+<a href="{{ links.checkbox }}" class="link-light">Checkboxes</a> when you are expecting the user to select multiple options from a list of items.
+
+<a href="{{ links.select }}" class="link-light">Select</a> when you can give someone a medium to large set of options for a known single selection.
+
+</article>

src/en/components/radio/base.md

@@ -8,19 +8,15 @@ tags: ['radioEN', 'header']
 
 # Radio <br>`<gcds-radio>`
 
+<gcds-error-message message-id="component-deprecated">
+This component is deprecated as of v0.21.0. Please see <gcds-link href="https://github.com/cds-snc/gcds-components/releases/tag/gcds-components-v0.21.0">Release v0.21.0</gcds-link> for details.
+</gcds-error-message>
+
 _Also called: radio button, radio group._
 
 A radio is a set of options for a single selection.
 
 {% docLinks locale stage figma github %}
 {% enddocLinks %}
 
-{% componentPreview "Radio component preview" "px-300 pt-400 pb-200" %}
-<gcds-fieldset fieldset-id="fieldset" legend="Legend" hint="Hint / Example message.">
-<gcds-radio radio-id="form-radio-1" label="Label" hint="Description or example to make the option clearer." name="radio" checked>
-</gcds-radio>
-
-<gcds-radio radio-id="form-radio-2" label="Label" hint="Description or example to make the option clearer." name="radio">
-</gcds-radio>
-</gcds-fieldset>
-{% endcomponentPreview %}
+<br/>

src/en/components/radio/code.md

@@ -18,16 +18,4 @@ The radio helps users to make a choice by limiting their options.
 
 - Group radio options and name the group using the [fieldset component]({{ links.fieldset }}).
 - Use the fieldset `legend` and `hint` attributes for the group name and instructions.
-- For required groups, set the `required` attribute in the fieldset. Setting the `required` attribute applies validation and error handling to the radio group.
-
-{% include "partials/getcode.njk" %}
-
-<iframe
-  title="Overview of gcds-radio properties and events."
-  src="https://cds-snc.github.io/gcds-components/iframe.html?viewMode=docs&demo=true&singleStory=true&id=components-radio--events-properties&lang=en"
-  width="1200"
-  height="1770"
-  style="display: block; margin: 0 auto;"
-  frameBorder="0"
-  allow="clipboard-write"
-></iframe>
+- For required groups, set the `required` attribute in the fieldset. Setting the `required` attribute applies validation and error handling to the radio group.

src/en/components/radio/use-case.md

@@ -10,7 +10,8 @@ eleventyNavigation:
   description: A short set of options for single selection.
   thumbnail: /images/common/components/preview-radio.svg
   alt: Radio component shows radio selection with black outlined circle with a black circle selected followed by unselected two options.
-  state: published
+  state: deprecated
+  lastVersion: v0.20.0
 translationKey: 'radio'
 tags: ['radioEN', 'usage']
 permalink: /en/components/radio/

src/en/components/select/code.md

@@ -12,6 +12,14 @@ Use the select to give multiple (7 or more) options to answer a single question.
 
 ## Code and accessibility for select
 
+### Apply required attributes
+
+For the select to function properly, always use the following attributes with `<gcds-select>`:
+
+- `name`
+- `label`
+- `select-id`
+
 ### Set the default value
 
 Use the `default-value` attribute to set the first option in the select list. This avoids pre-selection of an option.

src/en/components/select/use-case.md

@@ -30,6 +30,6 @@ Use select within a form to:
 
 <a href="{{ links.checkbox }}" class="link-light">Checkboxes</a> when you are expecting the user to select 1 or more options from a list of items.
 
-<a href="{{ links.radio }}" class="link-light">Radio buttons</a> when you can give someone a small set of options for a known single selection with less than 7 options.
+<a href="{{ links.radioGroup }}" class="link-light">Radio groups</a> when you can give someone a small set of options for a known single selection with less than 7 options.
 
 </article>

src/en/components/textarea/code.md

@@ -14,6 +14,14 @@ The text area gives users the option to provide the information they want to sha
 
 ## Coding and accessibility for text areas
 
+### Apply required attributes
+
+For the text area to function properly, always use the following attributes with `<gcds-textarea>`:
+
+- `name`
+- `label`
+- `textarea-id`
+
 ### Size text areas to fit response type
 
 - Use text areas for responses that may need more than 75 characters.