feature/date-picker (#385)

* Create base files * Add base guidance content * Create date picker base functionality * Add multiple input setDate functionality * Add accessibility features. Cancel and accept buttons and keyboard navigation styles * Add disable dates functionality * Add min date and max date functionality * Remove comments and refactor disabled dates functionality * Add autocomplete attributes * Add theming and inverted examples * Add card carousel theming and inverted examples * Add links from date input to date picker * Add date picker and input inverted styles
digitalnsw · Feb 28, 2024 · 09f0a0a · 09f0a0a
1 parent 66e7c0b
commit 09f0a0a
Show file tree

Hide file tree

Showing 25 changed files with 1,772 additions and 164 deletions.
diff --git a/src/components/_all.scss b/src/components/_all.scss
@@ -7,6 +7,7 @@
 @import 'card-carousel/carousel';
 @import 'content-block/content-block';
 @import 'date-input/date-input';
+@import 'date-picker/date-picker';
 @import 'dialog/dialog';
 @import 'file-upload/file-upload';
 @import 'filters/filters';

diff --git a/src/components/card-carousel/_carousel.scss b/src/components/card-carousel/_carousel.scss
@@ -1,3 +1,5 @@
+/* stylelint-disable max-nesting-depth */
+
 .nsw-carousel {
   --carousel-item-auto-size: 300px;
   position: relative;
@@ -174,6 +176,28 @@
       display: block;
       margin: auto;
     }
+
+    .nsw-section--invert & {
+      border: 2px solid var(--nsw-white);
+
+      &:hover {
+        @include nsw-hover-light();
+
+        .nsw-icon {
+          color: var(--nsw-white);
+        }
+      }
+
+      &:focus {
+        @include nsw-focus($color: var(--nsw-focus-light));
+      }
+
+      .nsw-icon {
+        &:hover {
+          color: var(--nsw-white);
+        }
+      }
+    }
   }
 
   &__navigation {
@@ -206,8 +230,8 @@
 
       .nsw-carousel__nav-item button {
         background-color: transparent;
-        width: 1.5rem;
-        height: 1.5rem;
+        width: 1.6rem;
+        height: 1.6rem;
         color: var(--nsw-brand-dark);
         font-size: 12px;
         border-radius: var(--nsw-border-radius);
@@ -218,12 +242,27 @@
           @include nsw-focus(false);
           outline-offset: 2px;
         }
+
+        .nsw-section--invert & {
+          background-color: var(--nsw-white);
+          border: 1px solid var(--nsw-white);
+
+          &:focus {
+            @include nsw-focus($color: var(--nsw-focus-light));
+            outline-offset: 2px;
+          }
+        }
       }
 
       .nsw-carousel__nav-item--selected {
         button {
           background-color: var(--nsw-brand-dark);
           color: var(--nsw-white);
+
+          .nsw-section--invert & {
+            background-color: transparent;
+            border: 2px solid var(--nsw-white);
+          }
         }
       }
     }
@@ -236,7 +275,7 @@
       height: 1.2em;
       padding: 0;
       border-radius: 50%;
-      border: 1px solid var(--nsw-brand-dark);
+      border: 2px solid var(--nsw-brand-dark);
       transition: all 300ms ease-in-out;
       cursor: pointer;
       line-height: 0;

diff --git a/src/components/card-carousel/blank.hbs b/src/components/card-carousel/blank.hbs
@@ -19,3 +19,14 @@ page: true
 
 {{/_layout-container}}
 
+{{#>_layout-container brand-dark="true" invert="true"}}
+<h3>5 cards</h3>
+{{>_carousel model.carousel-five default=true loop=true}}
+
+<h3>9 cards</h3>
+{{>_carousel model.carousel-nine default=true loop=true}}
+
+<h3>Pagination</h3>
+{{>_carousel model.carousel-nine pagination=true default=true}}
+{{/_layout-container}}
+
diff --git a/src/components/card-carousel/index.hbs b/src/components/card-carousel/index.hbs
@@ -4,6 +4,7 @@ width: wide
 tabs: true
 directory: card-carousel
 intro: A card carousel displays multiple related cards horizontally, allowing users to swipe or navigate through the content.
+theme: true
 model:
   carousel-five: ../../components/card-carousel/json/carousel-five.json
   carousel-nine: ../../components/card-carousel/json/carousel-nine.json

diff --git a/src/components/card-carousel/theme.hbs b/src/components/card-carousel/theme.hbs
@@ -0,0 +1,33 @@
+---
+title: Card carousel
+width: wide
+model:
+  carousel-five: ../../components/card-carousel/json/carousel-five.json
+  carousel-nine: ../../components/card-carousel/json/carousel-nine.json
+page: true
+---
+
+{{#>_theme}}
+{{#>_layout-container}}
+<h3>5 cards</h3>
+{{>_carousel model.carousel-five default=true loop=true}}
+
+<h3>9 cards</h3>
+{{>_carousel model.carousel-nine default=true loop=true}}
+
+<h3>Pagination</h3>
+{{>_carousel model.carousel-nine pagination=true default=true}}
+
+{{/_layout-container}}
+
+{{#>_layout-container brand-dark="true" invert="true"}}
+<h3>5 cards</h3>
+{{>_carousel model.carousel-five default=true loop=true}}
+
+<h3>9 cards</h3>
+{{>_carousel model.carousel-nine default=true loop=true}}
+
+<h3>Pagination</h3>
+{{>_carousel model.carousel-nine pagination=true default=true}}
+{{/_layout-container}}
+{{/_theme}}
diff --git a/src/components/date-input/_date-input.hbs b/src/components/date-input/_date-input.hbs
@@ -6,15 +6,15 @@
   <div class="nsw-form__date-wrapper">
     <div class="nsw-form__date-input">
       <label for="{{id}}-day" class="nsw-form__label nsw-form__label--small">Day</label>
-      <input type="text" maxlength="2" id="{{id}}-day" name="{{id}}-day" class="nsw-form__input"{{#if error-text}} aria-invalid="true"{{/if}}>
+      <input type="text" maxlength="2" id="{{id}}-day" name="{{id}}-day" autocomplete="bday-day" class="nsw-form__input"{{#if error-text}} aria-invalid="true"{{/if}}>
     </div>
     <div class="nsw-form__date-input">
       <label for="{{id}}-month" class="nsw-form__label nsw-form__label--small">Month</label>
-      <input type="text" maxlength="2" id="{{id}}-month" name="{{id}}-month" class="nsw-form__input"{{#if error-text}} aria-invalid="true"{{/if}}>
+      <input type="text" maxlength="2" id="{{id}}-month" name="{{id}}-month" autocomplete="bday-month" class="nsw-form__input"{{#if error-text}} aria-invalid="true"{{/if}}>
     </div>
     <div class="nsw-form__date-input nsw-form__date-input--large">
       <label for="{{id}}-year" class="nsw-form__label nsw-form__label--small">Year</label>
-      <input type="text" maxlength="4" id="{{id}}-year" name="{{id}}-year" class="nsw-form__input"{{#if error-text}} aria-invalid="true"{{/if}}>
+      <input type="text" maxlength="4" id="{{id}}-year" name="{{id}}-year" autocomplete="bday-year" class="nsw-form__input"{{#if error-text}} aria-invalid="true"{{/if}}>
     </div>
   </div>
 </fieldset>

diff --git a/src/components/date-input/_guidance.hbs b/src/components/date-input/_guidance.hbs
@@ -31,6 +31,10 @@ layout: blank-layout.hbs
   <li>use in instances where only part of a date is needed, like a month or a year without a specific day.</li>
 </ul>
 
+<h2>Helping users pick a date</h2>
+
+<p>Users might need to pick a date from a selection, for example, to book an appointment. To do this, you can present dates in a calendar format using a <a href="/components/date-picker/index.html">date picker</a>.</p>
+
 <h2>How this component works</h2>
 
 <p>The three fields in the date input component are grouped together in a <code>fieldset</code> with a <code>legend</code> that describes them, as shown in the examples on this page. The legend is usually a question, such as 'What is your date of birth?'.</p>

diff --git a/src/components/date-input/blank.hbs b/src/components/date-input/blank.hbs
@@ -1,8 +1,10 @@
 ---
 title: Date input
-width: wide
+width: narrow
 page: true
 ---
+
+
 {{#>_layout-container}}
 
 <div class="nsw-form">
@@ -39,3 +41,40 @@ page: true
 </div>
 
 {{/_layout-container}}
+
+{{#>_layout-container brand-dark="true" invert="true"}}
+
+<div class="nsw-form">
+  <div class="nsw-form__group">
+    {{>_date-input
+      id="date"
+      label="Date of birth"
+      helper-text="For example 08 12 1990"
+    }}
+  </div>
+</div>
+
+<div class="nsw-form">
+  <div class="nsw-form__group">
+    {{>_date-input
+      id="date-error"
+      label="Date of birth"
+      required=true
+      error-text="This field is required"
+      helper-text="For example 08 12 1990"
+    }}
+  </div>
+</div>
+
+<div class="nsw-form">
+  <div class="nsw-form__group">
+    {{>_date-input
+      id="date-success"
+      label="Date of birth"
+      valid-text="This field has been validated"
+      helper-text="For example 08 12 1990"
+    }}
+  </div>
+</div>
+
+{{/_layout-container}}
diff --git a/src/components/date-input/index.hbs b/src/components/date-input/index.hbs
@@ -1,10 +1,10 @@
 ---
 title: Date input
-width: wide
+width: narrow
 tabs: true
 directory: date-input
 intro: 'A date input allows users to enter a date.'
-figma: 'URL'
+theme: true
 meta-description: 'A date input allows users to enter a date.'
 meta-index: true
 ---

diff --git a/src/components/date-input/theme.hbs b/src/components/date-input/theme.hbs
@@ -0,0 +1,81 @@
+---
+title: Date input
+width: narrow
+page: true
+---
+
+{{#>_theme}}
+{{#>_layout-container}}
+
+<div class="nsw-form">
+  <div class="nsw-form__group">
+    {{>_date-input
+      id="date"
+      label="Date of birth"
+      helper-text="For example 08 12 1990"
+    }}
+  </div>
+</div>
+
+<div class="nsw-form">
+  <div class="nsw-form__group">
+    {{>_date-input
+      id="date-error"
+      label="Date of birth"
+      required=true
+      error-text="This field is required"
+      helper-text="For example 08 12 1990"
+    }}
+  </div>
+</div>
+
+<div class="nsw-form">
+  <div class="nsw-form__group">
+    {{>_date-input
+      id="date-success"
+      label="Date of birth"
+      valid-text="This field has been validated"
+      helper-text="For example 08 12 1990"
+    }}
+  </div>
+</div>
+
+{{/_layout-container}}
+
+{{#>_layout-container brand-dark="true" invert="true"}}
+
+<div class="nsw-form">
+  <div class="nsw-form__group">
+    {{>_date-input
+      id="date"
+      label="Date of birth"
+      helper-text="For example 08 12 1990"
+    }}
+  </div>
+</div>
+
+<div class="nsw-form">
+  <div class="nsw-form__group">
+    {{>_date-input
+      id="date-error"
+      label="Date of birth"
+      required=true
+      error-text="This field is required"
+      helper-text="For example 08 12 1990"
+    }}
+  </div>
+</div>
+
+<div class="nsw-form">
+  <div class="nsw-form__group">
+    {{>_date-input
+      id="date-success"
+      label="Date of birth"
+      valid-text="This field has been validated"
+      helper-text="For example 08 12 1990"
+    }}
+  </div>
+</div>
+
+{{/_layout-container}}
+{{/_theme}}