Add DateControl

src/components/DateControl/index.css

@@ -0,0 +1,75 @@
+@import "../../custom-properties.css";
+
+/** @define DateControl; */
+
+.DateControl {
+  border: none;
+  padding-top: 1.75rem;
+  position: relative;
+}
+
+.DateControl-legend {
+  display: block;
+  font: 600 var(--type-3)/1.75rem system-ui;
+  position: absolute;
+  top: 0;
+}
+
+.DateControl-label {
+  display: block;
+  font: 300 var(--type-2)/1.75rem system-ui;
+}
+
+.DateControl-hint {
+  color: color(var(--black) tint(30%));
+  font: 300 var(--type-0)/1.5rem system-ui;
+}
+
+.DateControl-validation {
+  margin-top: 0.5rem;
+}
+
+.DateControl-validationInner {
+  color: var(--red);
+  font: 600 var(--type-0)/1.5rem system-ui;
+}
+
+.DateControl-labelsAndElements {
+  display: grid;
+  grid-gap: 0.5rem 1rem;
+  grid-template-columns: 4rem 4rem 6rem;
+  margin-top: 0.5rem;
+}
+
+.DateControl-element {
+  -moz-appearance: textfield; /* stylelint-disable-line property-no-vendor-prefix */
+  appearance: none;
+  border: none;
+  border-radius: 0;
+  box-shadow: inset 0 0 0 1px var(--black),
+    inset 0.25rem 0.25rem color(var(--black) tint(80%));
+  font: 300 var(--type-2)/1.75rem system-ui;
+  grid-row: 2;
+  max-width: 100%;
+  padding: 0.5rem 0.75rem;
+}
+
+.DateControl-element::-webkit-inner-spin-button,
+.DateControl-element::-webkit-outer-spin-button {
+  appearance: none;
+  margin: 0;
+}
+
+/**
+ * errored
+ */
+
+.DateControl--errored {
+  box-shadow: inset 0.25rem 0 0 var(--red);
+  padding-left: 1rem;
+}
+
+.DateControl--errored .DateControl-element {
+  box-shadow: inset 0 0 0 1px var(--red),
+    inset 0.25rem 0.25rem color(var(--red) tint(80%));
+}

src/components/DateControl/index.js

@@ -0,0 +1,58 @@
+import PropTypes from "prop-types";
+import React from "react";
+
+import "./index.css";
+
+const DateControl = ({ errored, hint, id, label, validation }) => {
+  const className = `DateControl ${errored ? "DateControl--errored" : ""}`;
+  return (
+    <fieldset className={className}>
+      <legend className="DateControl-legend">{label}</legend>
+      {hint && <p className="DateControl-hint">{hint}</p>}
+      {validation && (
+        <p className="DateControl-validation">
+          <strong className="DateControl-validationInner">{validation}</strong>
+        </p>
+      )}
+      <div className="DateControl-labelsAndElements">
+        <label className="DateControl-label" htmlFor={`${id}-day`}>
+          Day
+        </label>
+        <input
+          className="DateControl-element"
+          name={`${id}-day`}
+          id={`${id}-day`}
+          type="number"
+        />
+        <label className="DateControl-label" htmlFor={`${id}-month`}>
+          Month
+        </label>
+        <input
+          className="DateControl-element"
+          name={`${id}-month`}
+          id={`${id}-month`}
+          type="number"
+        />
+        <label className="DateControl-label" htmlFor={`${id}-year`}>
+          Year
+        </label>
+        <input
+          className="DateControl-element"
+          name={`${id}-year`}
+          id={`${id}-year`}
+          type="number"
+        />
+      </div>
+    </fieldset>
+  );
+};
+
+DateControl.propTypes = {
+  errored: PropTypes.bool,
+  hint: PropTypes.string,
+  id: PropTypes.string.isRequired,
+  label: PropTypes.string.isRequired,
+  validation: PropTypes.string
+};
+
+export default DateControl;

src/pages/guidance/requesting-information.js

@@ -5,6 +5,7 @@ import AnyOfManyChoiceControl from "../../components/AnyOfManyChoiceControl";
 import Breadcrumbs from "../../components/Breadcrumbs";
 import ChoiceControl from "../../components/ChoiceControl";
 import CurrencyControl from "../../components/CurrencyControl";
+import DateControl from "../../components/DateControl";
 import HeadingOne from "../../components/HeadingOne";
 import HeadingTwo from "../../components/HeadingTwo";
 import Link from "../../components/Link";
@@ -117,10 +118,30 @@ const Pages = () => (
       <Link href="https://github.com/barnardos/design-system/issues/160">{`research`}</Link>
       {` on GitHub.`}
     </Paragraph>
+    <HeadingTwo>{`DateControl`}</HeadingTwo>
+    <Paragraph>{`Use this component for date entry. You should:`}</Paragraph>
+    <UnorderedList>
+      <ListItem>{`use it instead of dropdowns`}</ListItem>
+      <ListItem>{`allow flexible data entry, for
+    example 01 and 1`}</ListItem>
+      <ListItem>{`trigger a numeric keyboard when available`}</ListItem>
+      <ListItem>{`avoid auto-tabbing between fields`}</ListItem>
+      <ListItem>{`avoid using calendar pickers`}</ListItem>
+    </UnorderedList>
+    <div className="Pages-example">
+      <DateControl id="date-control-example" label="Date of birth" />
+    </div>
+    <Paragraph>
+      {`View `}
+      <Link href="https://github.com/barnardos/design-system/tree/master/src/components/DateControl">{`code`}</Link>
+      {` and `}
+      <Link href="https://github.com/barnardos/design-system/issues/75">{`research`}</Link>
+      {` on GitHub.`}
+    </Paragraph>
     <HeadingOne>{`Choices`}</HeadingOne>
     <Paragraph>{`Use the components below for choices. You should:`}</Paragraph>
     <UnorderedList>
-      <ListItem>{`use them instead of drop downs`}</ListItem>
+      <ListItem>{`use them instead of dropdowns`}</ListItem>
       <ListItem>{`limit the options to eight or less`}</ListItem>
     </UnorderedList>
     <HeadingTwo>{`OneOfManyChoiceControl`}</HeadingTwo>