Add date form component

src-site/components/date-picker.md

@@ -0,0 +1,22 @@
+---
+title: Date Picker
+---
+
+A Date Picker is a form used for inputting dates, such as when creating an election in Every Election.
+
+<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>

src-site/usage/composition.md

@@ -105,8 +105,22 @@ By combining [Stacks]({{site.basedir}}/components/stack), [Grids]({{site.basedir
         <div class="ds-field">
           <button class="ds-button" type="submit">Log in</button>
         </div>
-      </form>
-    </div>
+      </form> 
+      <div>
+      <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>
   </div>
-</div>
-
+</div>

src-site/usage/getting-started.md

@@ -104,6 +104,13 @@ Although the design system—even including _all_ of the components—is relativ
 
 Follow the HTML examples in individual components docs. If you are making a page layout from scratch, see [Page layout]({{site.basedir}}/usage/page-layout).
 
+## Adding or changing components
 
+Update or create a partial file containing the component style such as `system/partials/_date-picker.scss`.
 
-
+If a new component is added:
+  1. Create a src-site/components/new-component.md file to explain it's use with an html example.
+  2. Add the html example to `src-site/usage/composition.md` to be sure it's included in Lighthouse tests. 
+  3. Add the partial to system/docs.scss (twice, import the `mixin` at the top, then add it to `optional-styles`)
+  4. Run `npm run watch:eleventy` to view changes to source site.
+  5. Once changes are complete, update the version in `package.json` and lock it with `npm install` 

system/docs.scss

@@ -30,6 +30,9 @@
 @import 'partials/_page.scss';
 @import 'partials/_party.scss';
 @import 'partials/_utilities.scss';
+@import 'partials/_date-picker.scss';
+@import 'partials/_switcher.scss';
+@import 'partials/_showcase.scss';
 
 // Generate atomic classes for documentation demos
 @import 'partials/_classes-colors.scss';
@@ -62,7 +65,10 @@ $scope: true;
   @include filter;
   @include status;
   @include codeblock;
-  @include party
+  @include party;
+  @include date-picker;
+  @include switcher;
+  @include showcase;
 }
 
 @if $scope {

system/partials/_cluster.scss

@@ -1,6 +1,4 @@
-%ds-cluster > *,
-%ds-cluster-right > *,
-%ds-cluster-center > * {
+%ds-cluster-element {
   padding-left: 0;
   list-style: none;
   display: flex;
@@ -10,6 +8,12 @@
   margin: calc(#{$ss5} * -1);
 }
 
+%ds-cluster > *,
+%ds-cluster-right > *,
+%ds-cluster-center > * {
+  @extend %ds-cluster-element
+}
+
 %ds-cluster > * > *,
 %ds-cluster-right > * > *,
 %ds-cluster-center > * > * {

system/partials/_date-picker.scss

@@ -0,0 +1,17 @@
+@mixin date-picker {
+	.ds-date {	
+		@extend %ds-cluster-element;	
+		.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;
+		}	
+		}	
+	}
+}