Chore/create datepicker component

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@govconnex/ui",
-  "version": "0.0.169",
+  "version": "0.0.171",
   "description": "GovConnex UI - React Component Library",
   "scripts": {
     "build:tokens": "./tokens-build.sh",
@@ -119,6 +119,7 @@
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@popperjs/core": "^2.11.6",
     "classnames": "^2.3.2",
+    "react-datepicker": "^2.14.0",
     "react-helmet": "^6.1.0",
     "react-popper": "^2.3.0",
     "react-table": "^7.8.0",

src/components/Datepicker/ComponentSummary.mdx

@@ -0,0 +1,4 @@
+A datepicker is a graphical user interface (GUI) element that allows users to easily select a date from a calendar. It is commonly used in web forms and applications to streamline the process of entering dates. A typical datepicker consists of an input field, where users can manually enter a date, and a graphical calendar interface that pops up when users interact with the input field.
+
+##Figma Link
+Figma link not available 

src/components/Datepicker/Datepicker.stories.tsx

@@ -0,0 +1,67 @@
+import React from "react";
+import {ComponentStory, ComponentMeta} from "@storybook/react";
+import DatePicker from "./DatePicker";
+import Button from "../Button";
+import {withDesign} from "storybook-addon-designs";
+import ComponentSummary from "./ComponentSummary.mdx";
+import ReactDOMServer from "react-dom/server";
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+  title: "Components/DatePicker",
+  component: DatePicker,
+  decorators: [withDesign],
+  parameters: {
+    docs: {
+      description: {
+        component: ReactDOMServer.renderToString(<ComponentSummary />),
+      },
+    },
+  },
+} as ComponentMeta<typeof DatePicker>;
+
+const Template: ComponentStory<typeof DatePicker> = (args) => {
+  const [shown, setShown] = React.useState(false);
+  const buttonRef = React.useRef(null);
+
+  // override on close
+  const overriddenArgs = {
+    ...args,
+    onClose: () => {
+      setShown(false);
+    },
+  };
+
+  return (
+    <>
+      <Button
+        ref={buttonRef}
+        onClick={() => {
+          setShown(true);
+        }}
+      >
+        Show Date Picker
+      </Button>
+      {shown && <DatePicker anchorEl={buttonRef} {...overriddenArgs} />}
+    </>
+  );
+};
+
+export const Basic = Template.bind({});
+
+export const WithDefaultDate = Template.bind({});
+// More on args: https://storybook.js.org/docs/react/writing-stories/args
+WithDefaultDate.args = {
+  defaultDate: new Date("2022-01-02"),
+  defaultTime: "10:35",
+  hasTime: true,
+  onChange: (value) => {
+    console.log("date: ", value);
+  },
+  onTimeChange: (value) => {
+    console.log("time: ", value);
+  },
+  "data-cy": "popover",
+  "data-cy-clear": "clear",
+  "data-cy-today": "today",
+};

src/components/Datepicker/Datepicker.styles.ts

@@ -0,0 +1,128 @@
+import styled from "styled-components";
+
+const StyledDatePickerWrapper = styled.div`
+  .react-datepicker {
+    border: none;
+  }
+
+  .react-datepicker {
+    font-family: sans-serif;
+    border-radius: 4px;
+  }
+
+  .react-datepicker__header {
+    background-color: #ffffff;
+    color: #000000;
+    border: none;
+    padding: 10px;
+    text-align: center;
+    border-bottom: 1px solid #ccc;
+  }
+
+  .react-datepicker__portal .react-datepicker__current-month,
+  .react-datepicker__portal .react-datepicker-time__header {
+    font-size: 1.44rem;
+  }
+
+  .react-datepicker__current-month,
+  .react-datepicker-time__header,
+  .react-datepicker-year-header {
+    margin-top: 1px;
+    color: #000;
+    font-size: 0.944rem;
+  }
+
+  .react-datepicker__navigation {
+    margin-left: 20px;
+    margin-right: 20px;
+    background: none;
+    line-height: 1.7rem;
+    text-align: center;
+    cursor: pointer;
+    position: absolute;
+    top: 30px;
+    width: 0;
+    padding: 0;
+    border: 0.45rem solid transparent;
+    z-index: 1;
+    height: 10px;
+    width: 10px;
+    text-indent: -999em;
+    overflow: hidden;
+  }
+
+  .react-datepicker__navigation--previous {
+    left: 10px;
+    border-right-color: #ccc;
+  }
+
+  .react-datepicker__navigation--previous:hover {
+    border-right-color: #b3b3b3;
+  }
+
+  .react-datepicker__navigation--previous--disabled,
+  .react-datepicker__navigation--previous--disabled:hover {
+    border-right-color: #e6e6e6;
+    cursor: default;
+  }
+
+  .react-datepicker__navigation--next {
+    right: 10px;
+    border-left-color: #ccc;
+  }
+
+  .react-datepicker__navigation--next--with-time:not(
+      .react-datepicker__navigation--next--with-today-button
+    ) {
+    right: 80px;
+  }
+
+  .react-datepicker__navigation--next:hover {
+    border-left-color: #b3b3b3;
+  }
+
+  .react-datepicker__day-names {
+    display: flex;
+    justify-content: space-around;
+    margin-top: 10px;
+  }
+
+  .react-datepicker__week {
+    display: flex;
+    justify-content: space-around;
+    margin-bottom: 10px;
+  }
+
+  .react-datepicker__day {
+    width: 30px;
+    height: 30px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 14px;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: background-color 0.3s;
+
+    &:hover {
+      background-color: rgb(74 131 169);
+      color: #ffffff;
+    }
+  }
+
+  .react-datepicker__month {
+    padding: 10px;
+  }
+
+  .react-datepicker__day--selected {
+    background-color: #3498db;
+    color: #ffffff;
+  }
+
+  .react-datepicker__day--keyboard-selected {
+    background-color: #3498db;
+    color: #ffffff;
+  }
+`;
+
+export default StyledDatePickerWrapper;

src/components/Datepicker/Datepicker.test.tsx

@@ -0,0 +1,10 @@
+import React from "react";
+import {render} from "../test-utils";
+
+import DatePicker from "./DatePicker";
+
+describe("DatePicker", () => {
+  test("renders the DatePicker component", () => {
+    render(<DatePicker />);
+  });
+});