Add type prop to Input (#163)

src/components/Input.js

@@ -6,9 +6,10 @@ import { mergeProps } from "../utils/component";
 import Field from "./internal/Field";
 import InternalInput from "./internal/InternalInput";
 
-const { VARIANTS, COLORS, NUMERIC_REGEX } = InternalInput;
+const { TYPES, VARIANTS, COLORS, NUMERIC_REGEX } = InternalInput;
 
 const DEFAULT_PROPS = {
+  type: InternalInput.DEFAULT_PROPS.type,
   variant: InternalInput.DEFAULT_PROPS.variant,
   color: InternalInput.DEFAULT_PROPS.color,
   disabled: false,
@@ -27,6 +28,7 @@ const DEFAULT_PROPS = {
   },
 };
 
+Input.TYPES = TYPES;
 Input.VARIANTS = VARIANTS;
 Input.COLORS = COLORS;
 Input.DEFAULT_PROPS = DEFAULT_PROPS;
@@ -37,6 +39,7 @@ function Input(props) {
     DEFAULT_PROPS,
     {},
     {
+      type: (type) => TYPES.includes(type),
       variant: (variant) => VARIANTS.includes(variant),
       numericPrefix: (numericPrefix) =>
         typeof numericPrefix === "string" && numericPrefix.length > 0,
@@ -53,6 +56,7 @@ function Input(props) {
   );
   const {
     name,
+    type,
     variant,
     numericPrefix,
     numericSuffix,
@@ -105,6 +109,7 @@ function Input(props) {
       <InternalInput
         id={label ? inputId : null}
         name={name}
+        type={type}
         variant={variant}
         numericPrefix={numericPrefix}
         numericSuffix={numericSuffix}
@@ -128,6 +133,7 @@ function Input(props) {
 
 Input.propTypes = {
   name: PropTypes.string.isRequired,
+  type: PropTypes.oneOf(TYPES),
   variant: PropTypes.oneOf(VARIANTS),
   numericPrefix: PropTypes.string,
   numericSuffix: PropTypes.string,

src/components/Input.test.js

@@ -69,6 +69,14 @@ describe("Input", () => {
     });
   });
 
+  it("type password", () => {
+    render(<FormWithInput label="New credit limit" type="password" />);
+
+    const input = screen.getByLabelText("New credit limit");
+
+    expect(input).toHaveAttribute("type", "password");
+  });
+
   it("numeric variant", () => {
     render(<FormWithInput label="New credit limit" variant="numeric" />);
 

src/components/internal/InternalInput.js

@@ -5,12 +5,14 @@ import useBackground from "../../hooks/useBackground";
 import useResponsivePropsCSS from "../../hooks/useResponsivePropsCSS";
 import { mergeProps } from "../../utils/component";
 
+const TYPES = ["text", "password"];
 const VARIANTS = ["text", "numeric"];
 const COLORS = ["grey.t05", "white"];
 
 const NUMERIC_REGEX = /^\d*$/;
 
 const DEFAULT_PROPS = {
+  type: "text",
   variant: "text",
   color: "grey.t05",
   disabled: false,
@@ -20,6 +22,7 @@ const DEFAULT_PROPS = {
   __internal__focus: false,
 };
 
+InternalInput.TYPES = TYPES;
 InternalInput.VARIANTS = VARIANTS;
 InternalInput.COLORS = COLORS;
 InternalInput.NUMERIC_REGEX = NUMERIC_REGEX;
@@ -31,6 +34,7 @@ function InternalInput(props) {
     DEFAULT_PROPS,
     {},
     {
+      type: (type) => TYPES.includes(type),
       variant: (variant) => VARIANTS.includes(variant),
       numericPrefix: (numericPrefix) =>
         typeof numericPrefix === "string" && numericPrefix.length > 0,
@@ -48,6 +52,7 @@ function InternalInput(props) {
     name,
     parentName,
     id,
+    type,
     placeholder,
     variant,
     numericPrefix,
@@ -104,7 +109,7 @@ function InternalInput(props) {
         name={name}
         data-parent-name={parentName}
         placeholder={placeholder}
-        type="text"
+        type={type}
         {...(variant === "numeric" && {
           // See: https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-design-system-team-changed-the-input-type-for-numbers
           inputMode: "numeric",
@@ -132,6 +137,7 @@ InternalInput.propTypes = {
   name: PropTypes.string.isRequired,
   parentName: PropTypes.string,
   id: PropTypes.string,
+  type: PropTypes.oneOf(TYPES),
   placeholder: PropTypes.string,
   variant: PropTypes.oneOf(VARIANTS),
   numericPrefix: PropTypes.string,

website/src/pages/components/input/index.js

@@ -8,9 +8,10 @@ import RadioGroupSetting, {
 import { formatCode, nonDefaultProps } from "../../../utils/formatting";
 
 const { useTheme, Input } = allDesignSystem;
-const { VARIANTS, COLORS, DEFAULT_PROPS } = Input;
+const { TYPES, VARIANTS, COLORS, DEFAULT_PROPS } = Input;
 const scope = allDesignSystem;
 
+const typeOptions = getRadioOptions(TYPES);
 const variantOptions = getRadioOptions(VARIANTS);
 const colorOptions = getRadioOptions(COLORS);
 const isOptionalOptions = getCheckboxOptions();
@@ -20,6 +21,7 @@ const isDisabledOptions = getCheckboxOptions();
 
 function InputPage() {
   const theme = useTheme();
+  const [type, setType] = useState(DEFAULT_PROPS.type);
   const [variant, setVariant] = useState(DEFAULT_PROPS.variant);
   const [color, setColor] = useState(DEFAULT_PROPS.color);
   const [optional, setIsOptional] = useState(DEFAULT_PROPS.optional);
@@ -43,6 +45,11 @@ function InputPage() {
               prop: "name",
               value: variant === "numeric" ? "newCreditLimit" : "name",
             },
+            {
+              prop: "type",
+              value: type,
+              defaultValue: DEFAULT_PROPS.type,
+            },
             {
               prop: "variant",
               value: variant,
@@ -110,6 +117,13 @@ function InputPage() {
         }}
       >
         <RadioGroupSetting
+          heading="Type"
+          options={typeOptions}
+          selectedValue={type}
+          setSelectedValue={setType}
+        />
+        <RadioGroupSetting
+          css={{ marginLeft: theme.space[13] }}
           heading="Variant"
           options={variantOptions}
           selectedValue={variant}

website/src/pages/kitchen-sink/components/input.js

@@ -6,6 +6,7 @@ import KitchenSinkForm from "../../../components/kitchen-sink/KitchenSinkForm";
 
 function FormWithInput({
   initialValue = "",
+  type,
   placeholder,
   variant,
   numericPrefix,
@@ -25,6 +26,7 @@ function FormWithInput({
     >
       <Input
         name="name"
+        type={type}
         placeholder={placeholder}
         variant={variant}
         numericPrefix={numericPrefix}
@@ -42,6 +44,7 @@ function FormWithInput({
 
 FormWithInput.propTypes = {
   initialValue: PropTypes.string,
+  type: PropTypes.oneOf(Input.TYPES),
   placeholder: PropTypes.string,
   variant: PropTypes.oneOf(Input.VARIANTS),
   numericPrefix: PropTypes.string,
@@ -79,6 +82,12 @@ function KitchenSinkInput() {
 
             <FormWithInput label="White focus" __internal__focus />
 
+            <FormWithInput
+              label="Password"
+              type="password"
+              initialValue="Some value"
+            />
+
             <FormWithInput label="With placeholder" placeholder="Placeholder" />
 
             <FormWithInput label="With value" initialValue="Some value" />