feature(FDS-342): Add input image field

packages/cascara/src/modules/DataDateTime/DataDateTime.js

@@ -5,6 +5,7 @@ import { ModuleContext } from '../context';
 import styles from '../DataModule.module.scss';
 
 import ModuleErrorBoundary from '../ModuleErrorBoundary';
+import getAccessibleLabelSetters from '../helpers';
 
 const propTypes = {
   /** A module can have an Attribute, which will be used as form field name */
@@ -28,14 +29,10 @@ const DataDateTime = ({
   ...rest
 }) => {
   const { isEditing, formMethods } = useContext(ModuleContext);
-
-  // NOTE: THESE TWO SET DEFINITIONS COULD PROBABLY BECOME A HELPER FUNCTION FOR USE IN ALL MODULES
-  // We do not want to add a redundant aria-label property if there
-  // is an html label present with a linking `for` attribute.
-  const setAriaLabel = isLabeled ? undefined : label;
-  // We do not want to set a for attribute if there is no label content
-  // because we are defining aria label instead
-  const setHtmlFor = isLabeled ? label : undefined;
+  const { setAriaLabel, setHtmlFor } = getAccessibleLabelSetters(
+    isLabeled,
+    label
+  );
 
   const renderEditing = (
     <label htmlFor={setHtmlFor}>

packages/cascara/src/modules/DataImage/DataImage.doc.mdx

@@ -0,0 +1,29 @@
+---
+title: DataImage
+propTable: ./DataImage.js
+type: 'module'
+public: false
+---
+
+A data module to display an input **image** field
+
+### Sandbox
+
+Feel free to play around with the following code:
+
+```jsx
+<ModuleSandbox
+  isEditing={true}
+  record={{
+    id: 1,
+    firstName: 'John',
+    lastName: 'Doe',
+  }}
+>
+  <DataImage
+    attribute='firstName'
+    alt='My Text'
+    src='/media/examples/login-button.png'
+  />
+</ModuleSandbox>
+```

packages/cascara/src/modules/DataImage/DataImage.fixture.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import DataImage from './DataImage';
+import ModuleSandbox from '../ModuleSandbox';
+
+const DataImageSandbox = ({ isEditing, ...rest }) => (
+  <ModuleSandbox isEditing={isEditing}>
+    <DataImage {...rest} />
+  </ModuleSandbox>
+);
+
+const srcPath = '/media/examples/my-button.png';
+
+const displayProps = {
+  label: 'Display',
+  src: srcPath,
+};
+
+const editingProps = {
+  isEditing: true,
+  label: 'Editing',
+  src: srcPath,
+  alt: 'Start',
+};
+
+// These can be used in tests
+export { displayProps, editingProps };
+
+// These are our fixtures
+export default {
+  display: <DataImageSandbox {...displayProps} />,
+  displayNoLabel: <DataImageSandbox {...displayProps} isLabeled={false} />,
+  editing: <DataImageSandbox {...editingProps} />,
+  editingNoLabel: <DataImageSandbox {...editingProps} isLabeled={false} />,
+};

packages/cascara/src/modules/DataImage/DataImage.js

@@ -0,0 +1,79 @@
+import React, { useContext } from 'react';
+import { Input } from 'reakit/Input';
+import pt from 'prop-types';
+import { ModuleContext } from '../context';
+import styles from '../DataModule.module.scss';
+
+import ModuleErrorBoundary from '../ModuleErrorBoundary';
+import getAccessibleLabelSetters from '../helpers';
+
+const propTypes = {
+  /** A module can have an Attribute, which will be used as form field name */
+  attribute: pt.string,
+  /** A Module can be defined to not present an editing state */
+  isEditable: pt.bool,
+  /** Presents the input without a label. NOT USER CONFIGURABLE */
+  isLabeled: pt.bool,
+  /** A Module needs to have a unique label relative to its context */
+  label: pt.string,
+  /** Image path */
+  src: pt.string,
+  /** A Module can have a value */
+  value: pt.string,
+};
+
+const DataImage = ({
+  attribute,
+  isEditable = true,
+  isLabeled = true,
+  label,
+  value,
+  src,
+  ...rest
+}) => {
+  const { isEditing, formMethods } = useContext(ModuleContext);
+  const { setAriaLabel, setHtmlFor } = getAccessibleLabelSetters(
+    isLabeled,
+    label
+  );
+
+  const renderEditing = (
+    <label htmlFor={setHtmlFor}>
+      {label && isLabeled && <span className={styles.LabelText}>{label}</span>}
+      <Input
+        {...rest}
+        aria-label={setAriaLabel}
+        className={styles.Input}
+        defaultValue={value}
+        id={label}
+        name={attribute || label}
+        ref={formMethods?.register}
+        src={src}
+        type={'image'}
+      />
+    </label>
+  );
+
+  const renderDisplay = (
+    <span>
+      {label && isLabeled && <span className={styles.LabelText}>{label}</span>}
+      <span aria-label={label} className={styles.Image} {...rest}>
+        {src}
+      </span>
+    </span>
+  );
+
+  // Do not render an editable input if the module is not editable
+  return (
+    <ModuleErrorBoundary>
+      <div className={styles.Image}>
+        {isEditing && isEditable ? renderEditing : renderDisplay}
+      </div>
+    </ModuleErrorBoundary>
+  );
+};
+
+DataImage.propTypes = propTypes;
+
+export { propTypes };
+export default DataImage;

packages/cascara/src/modules/DataImage/DataImage.test.js

@@ -0,0 +1,102 @@
+import { render, screen } from '@testing-library/react';
+
+import cosmosFixtures, {
+  displayProps,
+  editingProps,
+} from './DataImage.fixture';
+
+// We cannot destructure during import because the default export in Cosmos
+// multi-fixture files is an object so we need to import the fixtures first,
+// then destructure them separately.
+const { display, editing, displayNoLabel, editingNoLabel } = cosmosFixtures;
+
+describe('DataDateTime', () => {
+  // without ModuleSandbox will render the property information into a span
+  describe('display', () => {
+    // We need a place to store the view for snapshot testing. This is not required when we are using `screen` directly from RTL.
+    let view;
+
+    beforeEach(() => {
+      // Set the render container to our `view` so it is in scope for the snapshot test
+      view = render(display).container;
+    });
+
+    test('snapshot', () => {
+      expect(view).toMatchSnapshot();
+    });
+
+    test('renders a <span> by default', () => {
+      const input = screen.getByLabelText(displayProps.label);
+      // Make sure the actual DOM element is not render an input
+      expect(input.tagName).toMatch('SPAN');
+      // Make sure the dom element that has not our aria-label is the not an input
+      expect(input.classList.contains('Input')).toBe(false);
+    });
+  });
+
+  describe('editing', () => {
+    // We need a place to store the view for snapshot testing. This is not required when we are using `screen` directly from RTL.
+    let view;
+
+    beforeEach(() => {
+      // Set the render container to our `view` so it is in scope for the snapshot test
+      view = render(editing).container;
+    });
+
+    test('snapshot', () => {
+      expect(view).toMatchSnapshot();
+    });
+
+    test('renders a <input date> by default', () => {
+      const input = screen.getByLabelText(editingProps.label);
+      // Check that we also use the correct type
+      expect(input).toHaveAttribute('type', 'image');
+    });
+
+    test('renders the src', () => {
+      const input = screen.getByLabelText(editingProps.label);
+      expect(input).toHaveAttribute('alt', 'Start');
+      expect(input).toHaveAttribute('src', '/media/examples/my-button.png');
+    });
+  });
+
+  describe('accessibility', () => {
+    test('editing', () => {
+      render(editing);
+
+      const input = screen.getByLabelText(editingProps.label);
+      // The label tag is the parent wrapper
+      const label = input.closest('label');
+
+      // Test is written this way to make sure we know that both values need to be the same.
+      const linkedLabelValue = editingProps.label;
+
+      // Verify label for attribute has linked value
+      expect(label).toHaveAttribute(
+        'for',
+        expect.stringContaining(linkedLabelValue)
+      );
+      // Verify input id attribute has linked value
+      expect(input).toHaveAttribute(
+        'id',
+        expect.stringContaining(linkedLabelValue)
+      );
+      // Check that the input does NOT have an aria-label defined because there is a label tag
+      expect(input).not.toHaveAttribute('aria-label');
+    });
+
+    test('display no label', () => {
+      // Make sure that the input is still accessible with label text even when we are not showing a label tag in tables
+      render(displayNoLabel);
+      const input = screen.getByLabelText(displayProps.label);
+      expect(input).toBeDefined();
+    });
+
+    test('editing no label', () => {
+      // Make sure that the input is still accessible with label text even when we are not showing a label tag in tables
+      render(editingNoLabel);
+      const input = screen.getByLabelText(editingProps.label);
+      expect(input).toBeDefined();
+    });
+  });
+});

packages/cascara/src/modules/DataImage/DataImage.test.snap

@@ -0,0 +1,49 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DataDateTime display snapshot 1`] = `
+<div>
+  <div
+    class="Image"
+  >
+    <span>
+      <span
+        class="LabelText"
+      >
+        Display
+      </span>
+      <span
+        aria-label="Display"
+        class="Image"
+      >
+        /media/examples/my-button.png
+      </span>
+    </span>
+  </div>
+</div>
+`;
+
+exports[`DataDateTime editing snapshot 1`] = `
+<div>
+  <div
+    class="Image"
+  >
+    <label
+      for="Editing"
+    >
+      <span
+        class="LabelText"
+      >
+        Editing
+      </span>
+      <input
+        alt="Start"
+        class="Input"
+        id="Editing"
+        name="Editing"
+        src="/media/examples/my-button.png"
+        type="image"
+      />
+    </label>
+  </div>
+</div>
+`;

packages/cascara/src/modules/DataImage/index.js

@@ -0,0 +1 @@
+export { default } from './DataImage';

packages/cascara/src/modules/DataModule.module.scss

@@ -53,6 +53,8 @@ $module-background: #f0f0f0;
 
 .Email,
 .File,
+.Image,
+.Month,
 .Number,
 .Text,
 .TextArea,

packages/cascara/src/modules/DataMonth/DataMonth.doc.mdx

@@ -0,0 +1,26 @@
+---
+title: DataMonth
+propTable: ./DataMonth.js
+type: 'module'
+public: false
+---
+
+A data module to display **string** values, it renders a input of type **month**.
+
+### Sandbox
+
+Feel free to play around with the following code:
+
+```jsx
+<ModuleSandbox
+  isEditing={true}
+  record={{
+    id: 1,
+    firstName: 'John',
+    lastName: 'Doe',
+    month: '2018-05',
+  }}
+>
+  <DataText attribute='month' isEditable label='Month' value='2018-05' />
+</ModuleSandbox>
+```

packages/cascara/src/modules/DataMonth/DataMonth.fixture.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import DataMonth from './DataMonth';
+import ModuleSandbox from '../ModuleSandbox';
+
+const DataMonthSandbox = ({ isEditing, ...rest }) => (
+  <ModuleSandbox isEditing={isEditing}>
+    <DataMonth {...rest} />
+  </ModuleSandbox>
+);
+
+const monthValue = '2018-06';
+
+const displayProps = {
+  label: 'Display',
+  value: monthValue,
+};
+
+const editingProps = {
+  isEditing: true,
+  label: 'Editing',
+  max: '2018-08',
+  min: '2018-06',
+  value: monthValue,
+};
+
+// These can be used in tests
+export { displayProps, editingProps };
+
+// These are our fixtures
+export default {
+  display: <DataMonthSandbox {...displayProps} />,
+  displayNoLabel: <DataMonthSandbox {...displayProps} isLabeled={false} />,
+  editing: <DataMonthSandbox {...editingProps} />,
+  editingNoLabel: <DataMonthSandbox {...editingProps} isLabeled={false} />,
+};