resolve conflicts

.changeset/gentle-olives-talk.md

@@ -1,5 +1,5 @@
 ---
-"@espressive/cascara": patch
+'@espressive/cascara': patch
 ---
 
 chore(FDS-346): [Cascara Form] - remove resolveAllowedActions prop from form

.vscode/settings.json

@@ -65,5 +65,6 @@
     "partially-covered": "rgba(235, 198, 52, 1)"
   },
   "jest.jestCommandLine": "yarn test",
-  "jest.showCoverageOnLoad": true
+  "jest.showCoverageOnLoad": true,
+  "peacock.color": "#850c37"
 }

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

@@ -56,8 +56,11 @@ $module-background: #f0f0f0;
 .Image,
 .Month,
 .Number,
+.Tel,
+.Password,
 .Text,
 .TextArea,
+.Time,
 .Select {
   @extend %ModuleContainer;
 }

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

@@ -20,7 +20,7 @@ const propTypes = {
   value: pt.string,
 };
 
-const DataDateTime = ({
+const DataMonth = ({
   attribute,
   isEditable = true,
   isLabeled = true,
@@ -69,7 +69,7 @@ const DataDateTime = ({
   );
 };
 
-DataDateTime.propTypes = propTypes;
+DataMonth.propTypes = propTypes;
 
 export { propTypes };
-export default DataDateTime;
+export default DataMonth;

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

@@ -0,0 +1,31 @@
+---
+title: DataPassword
+propTable: ./DataPassword.js
+type: 'module'
+public: false
+---
+
+A data module to display **mask** values, it renders a input of type **password**.
+
+### Sandbox
+
+Feel free to play around with the following code:
+
+```jsx
+<ModuleSandbox
+  isEditing={true}
+  record={{
+    id: 1,
+    firstName: 'John',
+    lastName: 'Doe',
+    passowrd: 'testpassword',
+  }}
+>
+  <DataDateTime
+    attribute='state'
+    isEditable={true}
+    label='State'
+    value='testpassword'
+  />
+</ModuleSandbox>
+```

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

@@ -0,0 +1,33 @@
+import React from 'react';
+import DataPassword from './DataPassword';
+import ModuleSandbox from '../ModuleSandbox';
+
+const DataPasswordSandbox = ({ isEditing, ...rest }) => (
+  <ModuleSandbox isEditing={isEditing}>
+    <DataPassword {...rest} />
+  </ModuleSandbox>
+);
+
+const passwordValue = 'mypassword';
+
+const displayProps = {
+  label: 'Display',
+  value: passwordValue,
+};
+
+const editingProps = {
+  isEditing: true,
+  label: 'Editing',
+  value: passwordValue,
+};
+
+// These can be used in tests
+export { displayProps, editingProps };
+
+// These are our fixtures
+export default {
+  display: <DataPasswordSandbox {...displayProps} />,
+  displayNoLabel: <DataPasswordSandbox {...displayProps} isLabeled={false} />,
+  editing: <DataPasswordSandbox {...editingProps} />,
+  editingNoLabel: <DataPasswordSandbox {...editingProps} isLabeled={false} />,
+};

packages/cascara/src/modules/DataPassword/DataPassword.js

@@ -0,0 +1,75 @@
+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,
+  /** A Module can have a value */
+  value: pt.string,
+};
+
+const DataPassword = ({
+  attribute,
+  isEditable = true,
+  isLabeled = true,
+  label,
+  value,
+  ...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.Password}
+        defaultValue={value}
+        id={label}
+        name={attribute || label}
+        ref={formMethods?.register}
+        type='password'
+      />
+    </label>
+  );
+
+  const renderDisplay = (
+    <span>
+      {label && isLabeled && <span className={styles.LabelText}>{label}</span>}
+      <span aria-label={label} className={styles.Password} {...rest}>
+        ******
+      </span>
+    </span>
+  );
+
+  // Do not render an editable input if the module is not editable
+  return (
+    <ModuleErrorBoundary>
+      <div className={styles.Text}>
+        {isEditing && isEditable ? renderEditing : renderDisplay}
+      </div>
+    </ModuleErrorBoundary>
+  );
+};
+
+DataPassword.propTypes = propTypes;
+
+export { propTypes };
+export default DataPassword;

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

@@ -0,0 +1,104 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+
+import cosmosFixtures, {
+  displayProps,
+  editingProps,
+} from './DataPassword.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('DataPassword', () => {
+  // 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 our aria-label is the input
+      expect(input.classList.contains('Password')).toBe(true);
+    });
+  });
+
+  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', 'password');
+      expect(input).toHaveValue('mypassword');
+    });
+
+    test('change value', () => {
+      const newPassword = 'newPassword';
+      const input = screen.getByLabelText(editingProps.label);
+      fireEvent.change(input, { target: { value: newPassword } });
+      expect(input).toHaveValue(newPassword);
+    });
+  });
+
+  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/DataPassword/DataPassword.test.snap

@@ -0,0 +1,48 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DataPassword display snapshot 1`] = `
+<div>
+  <div
+    class="Text"
+  >
+    <span>
+      <span
+        class="LabelText"
+      >
+        Display
+      </span>
+      <span
+        aria-label="Display"
+        class="Password"
+      >
+        ******
+      </span>
+    </span>
+  </div>
+</div>
+`;
+
+exports[`DataPassword editing snapshot 1`] = `
+<div>
+  <div
+    class="Text"
+  >
+    <label
+      for="Editing"
+    >
+      <span
+        class="LabelText"
+      >
+        Editing
+      </span>
+      <input
+        class="Password"
+        id="Editing"
+        name="Editing"
+        type="password"
+        value="mypassword"
+      />
+    </label>
+  </div>
+</div>
+`;

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

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

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

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