Added data prop to Text, Input and Frequency (#270)

src/components/Frequency.js

@@ -100,6 +100,7 @@ function Frequency(props) {
     name,
     mode,
     label,
+    data,
     annually,
     quarterly,
     monthly,
@@ -154,7 +155,7 @@ function Frequency(props) {
     },
     [isInputEmpty, isFrequencyEmpty]
   );
-  const data = useMemo(
+  const validationData = useMemo(
     () => ({
       isInputEmpty,
       isFrequencyEmpty,
@@ -176,13 +177,14 @@ function Frequency(props) {
     disabled,
     optional,
     validate,
-    data,
+    data: validationData,
   });
   const inputComponent = (
     <InternalInput
       name={`${name}.amount`}
       parentName={name}
       variant="numeric"
+      data={data}
       prefix={amountPrefix}
       color={props.color}
       placeholder={amountPlaceholder}
@@ -262,6 +264,7 @@ Frequency.propTypes = {
   mode: PropTypes.oneOf(MODES),
   label: PropTypes.string.isRequired,
   annually: PropTypes.bool,
+  data: PropTypes.object,
   quarterly: PropTypes.bool,
   monthly: PropTypes.bool,
   fortnightly: PropTypes.bool,

src/components/Frequency.test.js

@@ -146,6 +146,22 @@ describe("Frequency", () => {
     });
   });
 
+  it("with data attributes", () => {
+    render(
+      <FormWithFrequency
+        label="Salary"
+        amountPlaceholder="0.00"
+        data={{ "some-id": "true", "other-id": "other-value" }}
+      />
+    );
+
+    const amountInput = screen.getByPlaceholderText("0.00");
+
+    expect(amountInput).toHaveAttribute("data-some-id", "true");
+
+    expect(amountInput).toHaveAttribute("data-other-id", "other-value");
+  });
+
   it("with testId", () => {
     const { container } = render(
       <FormWithFrequency label="Salary" testId="my-frequency" />

src/components/Input.js

@@ -60,6 +60,7 @@ function Input(props) {
     name,
     type,
     variant,
+    data = {},
     prefix,
     suffix,
     maxLength,
@@ -79,7 +80,7 @@ function Input(props) {
   const [inputId] = useState(() => `input-${nanoid()}`);
   const [auxId] = useState(() => `input-aux-${nanoid()}`);
   const isEmpty = useCallback((value) => value.trim() === "", []);
-  const data = useMemo(
+  const validationData = useMemo(
     () => ({
       isEmpty,
       variant,
@@ -99,7 +100,7 @@ function Input(props) {
     disabled,
     optional,
     validate,
-    data,
+    data: validationData,
   });
   const onChange = useCallback(
     (event) => {
@@ -124,6 +125,7 @@ function Input(props) {
         id={label ? inputId : null}
         name={name}
         type={type}
+        data={data}
         variant={variant}
         prefix={prefix}
         suffix={suffix}
@@ -149,6 +151,7 @@ Input.propTypes = {
   name: PropTypes.string.isRequired,
   type: PropTypes.oneOf(TYPES),
   variant: PropTypes.oneOf(VARIANTS),
+  data: PropTypes.object,
   prefix: PropTypes.string,
   suffix: PropTypes.string,
   maxLength: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),

src/components/Input.test.js

@@ -269,6 +269,19 @@ describe("Input", () => {
     });
   });
 
+  it("with data attributes", () => {
+    render(
+      <FormWithInput
+        label="First name"
+        data={{ "some-id": "false", "other-id": "other-value" }}
+      />
+    );
+
+    const input = screen.getByLabelText("First name");
+    expect(input).toHaveAttribute("data-some-id", "false");
+    expect(input).toHaveAttribute("data-other-id", "other-value");
+  });
+
   it("with testId", () => {
     const { container } = render(
       <FormWithInput label="First name" testId="my-input" />

src/components/Text.js

@@ -12,6 +12,7 @@ import { mergeProps } from "../utils/component";
 import { hasOwnProperty } from "../utils/core";
 import { TEXT_STYLES, TEXT_ALIGNS } from "../utils/constants";
 import { formatArray } from "../utils/array";
+import { getDataAttributes } from "../utils/getDataAttributes";
 
 const AS = ["h1", "h2", "h3", "h4", "h5", "h6", "p"];
 const COLORS = [
@@ -95,7 +96,16 @@ function Text(props) {
     align: (align) => ALIGNS.includes(align),
     wrap: (wrap) => typeof wrap === "boolean",
   });
-  const { id, as, align, wrap, role, children, testId } = mergedProps;
+  const {
+    id,
+    as,
+    align,
+    wrap,
+    role,
+    children,
+    testId,
+    data = {},
+  } = mergedProps;
   const css = useResponsivePropsCSS(mergedProps, DEFAULT_PROPS, {
     color: (_, theme, bp) => {
       const color =
@@ -112,10 +122,19 @@ function Text(props) {
     margin: responsiveMargin,
     textStyle: responsiveTextStyle,
   });
+
+  const dataAttrs = getDataAttributes(data);
+
   const Component = as;
 
   return (
-    <Component id={id} css={css} role={role} data-testid={testId}>
+    <Component
+      id={id}
+      css={css}
+      role={role}
+      {...dataAttrs}
+      data-testid={testId}
+    >
       {children}
     </Component>
   );
@@ -140,6 +159,7 @@ Text.propTypes = {
       }
     });
   },
+  data: PropTypes.object,
   align: PropTypes.oneOf(ALIGNS),
   wrap: PropTypes.bool,
   role: PropTypes.string,

src/components/Text.test.js

@@ -157,6 +157,18 @@ describe("Text", () => {
     expect(node).toHaveAttribute("role", "alert");
   });
 
+  it("with dataAttributes", () => {
+    render(
+      <Text data={{ "some-id": "false", "other-id": "other-value" }}>
+        Hello World
+      </Text>
+    );
+
+    const node = screen.getByText("Hello World");
+    expect(node).toHaveAttribute("data-some-id", "false");
+    expect(node).toHaveAttribute("data-other-id", "other-value");
+  });
+
   it("with testId", () => {
     const { container } = render(<Text testId="my-text">Hello World</Text>);
 

src/components/internal/InternalInput.js

@@ -4,6 +4,7 @@ import useTheme from "../../hooks/useTheme";
 import useBackground from "../../hooks/useBackground";
 import useResponsivePropsCSS from "../../hooks/useResponsivePropsCSS";
 import { mergeProps } from "../../utils/component";
+import { getDataAttributes } from "../../utils/getDataAttributes";
 
 const TYPES = ["text", "password", "email", "tel"];
 const VARIANTS = ["text", "numeric", "decimal"];
@@ -52,6 +53,7 @@ function InternalInput(props) {
     name,
     parentName,
     id,
+    data = {},
     type,
     placeholder,
     variant,
@@ -94,6 +96,8 @@ function InternalInput(props) {
     },
     [pasteAllowed]
   );
+  const dataAttrs = getDataAttributes(data);
+
   const variantProps =
     variant === "numeric"
       ? {
@@ -120,6 +124,7 @@ function InternalInput(props) {
         css={inputCSS}
         id={id}
         name={name}
+        {...dataAttrs}
         data-parent-name={parentName}
         aria-label={ariaLabel}
         placeholder={placeholder}
@@ -155,6 +160,7 @@ InternalInput.propTypes = {
   suffix: PropTypes.string,
   maxLength: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   autoComplete: PropTypes.string,
+  data: PropTypes.object,
   color: PropTypes.oneOf(COLORS),
   disabled: PropTypes.bool,
   pasteAllowed: PropTypes.bool,

src/utils/getDataAttributes.js

@@ -0,0 +1,4 @@
+export const getDataAttributes = (data) =>
+  Object.fromEntries(
+    Object.entries(data).map(([key, value]) => [`data-${key}`, value])
+  );