Update and add form components

[VirginiaDooley]

Ref https://trello.com/c/lhcjgP0s/3121-review-chriss-ee-design-feedback and #74

This work:

• removes the word wrap when the text in a table is code

• makes radio button selections clear and WCAG compliant
  
• adds a date form component
  

These changes have been tested in EE per screenshots above.

[VirginiaDooley]

Review Chris's EE design feedback

[Bekabyx]

Any chance we could include this component on either layout-demo or /usage/composition/? Those are the two pages lighthouse is going to be run against so it would be nice to have :)

[VirginiaDooley]

Any chance we could include this component on either layout-demo or /usage/composition/? Those are the two pages lighthouse is going to be run against so it would be nice to have :)

Added here e72f317

[symroe]

Date picker

Some smaller points first:

• Can you call this a date picker, rather than date form? This is because the picker might be on a larger form, so the wording might get confusing.
• The frontmatter in the date-form.md file is missing the initial ---. This means the menu item isn't showing up on the components sidebar on the site.
• The site is also not building the CSS for the date picker. This is because you need to include it in system/docs.scss (twice, import the mixin at the top, then add it to optional-styles. I actually forgot to do this on my last PRs for switcher and showcase, so do you mind adding these too?
• The formatting is off on the docs page for the date picker. I think this is due to blank lines between the HTML sections. Remove these lines and it'll work ok

Now, zooming out to the content. There is a load of CSS in the mixin at the moment, including the form styling, legends, etc. Can you remove all of this as it's just duplicated?

The HTML in the markdown file isn't really in line with the other form HTML we have in the design system (it looks more like the old base theme HTML to me). I think this can be simplified to:

<div class="ds-scope site-resizer">
  <div class="ds-date">
    <div class="ds-field">
      <label for="day_0">Day</label>
      <input type="number" name="day_0" value="12" required="" id="id_date-date_0">
    </div>
    <div class="ds-field">
      <label for="month_1">Month</label>
      <input type="number" name="month_1" value="12" required="" id="id_date-date_1">
    </div>
    <div class="ds-field">
      <label for="year_2">Year</label>
      <input type="number" name="year_2" value="2025" required="" id="id_date-date_2">
    </div>
  </div>
</div>

That is, wrapping a load of ds-fields in a ds-date class.

In turn, the ds-date can be reduced to:

@mixin date-form {
  @extend %ds-cluster;
  .ds-date {
    .ds-field {
      input {
        margin: 10px 15px 5px 0;
        border: 2px solid $black;
        padding: $s1;
        max-width: 5em;
        color:$black;
      }
      &:last-child input {
        max-width: 6em;
      }
    }
  }
}

Not that I'm extending from ds-cluster here, so we can group the fields using the existing cluster code.

I'm also targeting the last-child and assuming this is a year field. I think this is better than relying on a hard coded ID as you had (what if we needed more than one date-picker on a page?), but it's not the best. We might want to use a CSS class in the HTML, but I thought that might end up being tricky in Django's forms. For now I think last-child is going to be ok.

[VirginiaDooley]

Date picker

Some smaller points first:

• Can you call this a date picker, rather than date form? This is because the picker might be on a larger form, so the wording might get confusing.
• The frontmatter in the date-form.md file is missing the initial ---. This means the menu item isn't showing up on the components sidebar on the site.
• The site is also not building the CSS for the date picker. This is because you need to include it in system/docs.scss (twice, import the mixin at the top, then add it to optional-styles. I actually forgot to do this on my last PRs for switcher and showcase, so do you mind adding these too?
• The formatting is off on the docs page for the date picker. I think this is due to blank lines between the HTML sections. Remove these lines and it'll work ok

Now, zooming out to the content. There is a load of CSS in the mixin at the moment, including the form styling, legends, etc. Can you remove all of this as it's just duplicated?

The HTML in the markdown file isn't really in line with the other form HTML we have in the design system (it looks more like the old base theme HTML to me). I think this can be simplified to:

<div class="ds-scope site-resizer">
  <div class="ds-date">
    <div class="ds-field">
      <label for="day_0">Day</label>
      <input type="number" name="day_0" value="12" required="" id="id_date-date_0">
    </div>
    <div class="ds-field">
      <label for="month_1">Month</label>
      <input type="number" name="month_1" value="12" required="" id="id_date-date_1">
    </div>
    <div class="ds-field">
      <label for="year_2">Year</label>
      <input type="number" name="year_2" value="2025" required="" id="id_date-date_2">
    </div>
  </div>
</div>

That is, wrapping a load of ds-fields in a ds-date class.

In turn, the ds-date can be reduced to:

@mixin date-form {
  @extend %ds-cluster;
  .ds-date {
    .ds-field {
      input {
        margin: 10px 15px 5px 0;
        border: 2px solid $black;
        padding: $s1;
        max-width: 5em;
        color:$black;
      }
      &:last-child input {
        max-width: 6em;
      }
    }
  }
}

Not that I'm extending from ds-cluster here, so we can group the fields using the existing cluster code.

I'm also targeting the last-child and assuming this is a year field. I think this is better than relying on a hard coded ID as you had (what if we needed more than one date-picker on a page?), but it's not the best. We might want to use a CSS class in the HTML, but I thought that might end up being tricky in Django's forms. For now I think last-child is going to be ok.

Thanks for taking the time to break this down. I had overlooked the possibility if extending an existing component so will bear that in mind next time we have a need for a new component. All your edits should now be addressed in 7297850.

[symroe]

One minor comment, but this looks good to me!

Thanks for adding the docs about making a new component too 👍

[symroe]

Very minor, but can you fix the indentation on this file?