feat(#1264): add goa-calendar and goa-datepicker components

apps/angular-demo/src/app/input-component/input-component.component.html

@@ -1,5 +1,10 @@
 <h1>Input</h1>
 
+<goa-date-picker
+  goaValue
+  [formControl]="reactiveDate2FormCtrl"
+></goa-date-picker>
+
 <h2>Basic</h2>
 <goa-input
   id="foo"

apps/angular-demo/src/app/input-component/input-component.component.ts

@@ -22,6 +22,8 @@
   minDate = format(this.date, "yyyy-MM-dd");
   maxDate = format(this.getDateWithMonthOffset(1), "yyyy-MM-dd");
 
+  reactiveDate2FormCtrl = new FormControl(new Date());
+
   wcVal = "event bound";
   tempDrivenVal = "template bound";
   reactiveFormCtrl = new FormControl("reactive form");
@@ -48,7 +50,7 @@
     }
   }
 
   updateInput(event: any) {
     this.wcVal = event.detail.value;
   }
 
@@ -58,15 +60,15 @@
     return d;
   }
 
   onInputChangeEvent(event: any) {
     console.log("onEvent", event.detail);
   }
 
   onFocusEvent(event: any) {
     console.log("on Focus Event: ", event.detail);
   }
 
   onBlurEvent(event: any) {
     console.log("on Blur Event: ", event.detail);
   }
 

libs/docs/src/components/common/Calendar.stories.mdx

@@ -0,0 +1,186 @@
+import { Meta, Story } from "@storybook/addon-docs";
+import {
+  Props,
+  Prop,
+  Tabs,
+  Tab,
+  CodeSnippet,
+  SupportInfo,
+} from "@abgov/shared/storybook-common";
+import { GoACalendar } from "@abgov/react-components";
+
+<Meta title="Components/Calendar" />
+
+# Calendar
+
+### Calendar allows for date selection
+
+[Figma design component](https://www.figma.com/file/dcR7GrX9kBvnLxA71m2ia8/Component---Date-picker?type=design&node-id=2295%3A53257&mode=design&t=db97sQqDODSxf6bj-1)
+
+---
+
+#### Properties
+
+<Props showTabs={true}>
+  <Prop name="name" type="string" description="Name of the calendar field" />
+  <Prop name="value" type="string" description="Value of the calendar date" />
+  <Prop
+    name="min"
+    type="string"
+    defaultValue="5 years previous"
+    description="Minimum date value allowed"
+  />
+  <Prop
+    name="max"
+    type="string"
+    defaultValue="5 years forward"
+    description="Maximum date value allowed"
+  />
+  <Prop
+    name="onChange"
+    lang="react"
+    type="(name: string, value: Date) => void"
+    description="Callback function invoked when calendar date is changed."
+  />
+</Props>
+
+<details>
+  <summary>Additional Properties</summary>
+  <Props showTabs={true}>
+    <Prop
+      name="mt"
+      type="none | 3xs | 2xs | xs | s | m | l | xl | 2xl | 3xl | 4xl"
+      defaultValue="none"
+      description="Top margin"
+    />
+    <Prop
+      name="mr"
+      type="none | 3xs | 2xs | xs | s | m | l | xl | 2xl | 3xl | 4xl"
+      defaultValue="none"
+      description="Right margin"
+    />
+    <Prop
+      name="mb"
+      type="none | 3xs | 2xs | xs | s | m | l | xl | 2xl | 3xl | 4xl"
+      defaultValue="none"
+      description="Bottom margin"
+    />
+    <Prop
+      name="ml"
+      type="none | 3xs | 2xs | xs | s | m | l | xl | 2xl | 3xl | 4xl"
+      defaultValue="none"
+      description="Left margin"
+    />
+  </Props>
+</details>
+
+#### Basic
+
+<Story name="Basic">
+  <GoACalendar onChange={() => {}} />
+</Story>
+
+<Tabs>
+  <Tab label="Angular">
+    <CodeSnippet
+      lang="html"
+      code={`<goa-calendar></goa-calendar>`}
+    />
+  </Tab>
+  <Tab label="React">
+    <CodeSnippet
+      lang="tsx"
+      code={`<GoACalendar onChange={() => {}} />`}
+    />
+  </Tab>
+</Tabs>
+
+#### Date
+
+<Story name="Date">
+  <GoACalendar onChange={() => {}} value={new Date()} />
+</Story>
+
+<Tabs>
+  <Tab label="Angular">
+    <CodeSnippet
+      lang="ts"
+      code={`
+	    export class SomeComponent {
+	      date = new Date();
+	    }
+    `}
+    />
+    <CodeSnippet
+      lang="html"
+      code={`
+		<goa-calendar [value]="date"></goa-calendar>
+    `}
+    />
+  </Tab>
+  <Tab label="React">
+    <CodeSnippet
+      lang="tsx"
+      code={`
+		<GoACalendar onChange={() => {}} value={new Date()} />
+    `}
+    />
+  </Tab>
+</Tabs>
+
+#### Min/Max
+
+<Story name="MinMax">
+  <GoACalendar
+    onChange={() => {}}
+    value={new Date(2023, 3, 1)}
+    min={new Date(2023, 2, 1)}
+    max={new Date(2023, 4, 1)}
+  />
+</Story>
+
+<Tabs>
+  <Tab label="Angular">
+    <CodeSnippet
+      lang="ts"
+      code={`
+        import { FormControl } from "@angular/forms";
+        export class SomeComponent {
+          reactiveFormCtrl = new FormControl(new Date());
+          min = new Date(2023, 2, 1);
+          max = new Date(2023, 4, 1);	    
+        }
+    `}
+    />
+    <CodeSnippet
+      lang="html"
+      code={`
+		<goa-calendar 
+          goaValue 
+          [formControl]="reactiveFormCtrl" 
+          [value]="reactiveFormCtrl.value"
+          [min]="min" 
+          [max]="max"
+        >
+        </goa-calendar>
+    `}
+    />
+  </Tab>
+  <Tab label="React">
+    <CodeSnippet
+      lang="tsx"
+      code={`
+		<GoACalendar 
+          onChange={() => {}} 
+          value={new Date(2023, 3, 1)} 
+          min={new Date(2023, 2, 1)} 
+          max={new Date(2023, 4, 1)}
+        />
+    `}
+    />
+  </Tab>
+</Tabs>
+
+---
+
+<SupportInfo />