MMI adds the note-to-trader component (#18106)

* MMI adds the note-to-trader component

* MMI adds colors vars

* MMI added component folder

* MMI adds fireEvent

* adds Box

* review fixes

* adds story

* lint fix

* prettier fix

* prettier fix

---------

Co-authored-by: Albert Olivé <[email protected]>

ui/components/institutional/note-to-trader/__snapshots__/note-to-trader.test.js.snap

@@ -0,0 +1,35 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`NoteToTrader should render the Note to trader component 1`] = `
+<div>
+  <div
+    class="box note-header box--display-flex box--flex-direction-row box--justify-content-space-between"
+  >
+    <label
+      class="box mm-text mm-label mm-label--html-for mm-text--body-md mm-text--font-weight-bold mm-text--color-text-default box--display-inline-flex box--flex-direction-row box--align-items-center"
+      for="transaction-note"
+    >
+      Transaction note
+    </label>
+    <p
+      class="box mm-text note-header__counter mm-text--body-md mm-text--color-text-default box--flex-direction-row"
+    >
+      9
+      /
+      280
+    </p>
+  </div>
+  <div
+    class="box note-field box--display-flex box--flex-direction-column"
+  >
+    <textarea
+      data-testid="transaction-note"
+      id="transaction-note"
+      maxlength="280"
+      placeholder=""
+    >
+      some text
+    </textarea>
+  </div>
+</div>
+`;

ui/components/institutional/note-to-trader/index.js

@@ -0,0 +1 @@
+export { default } from './note-to-trader';

ui/components/institutional/note-to-trader/index.scss

@@ -0,0 +1,23 @@
+.note-header {
+  line-height: 100%;
+  margin: 0 0 5px 0;
+
+  label {
+    color: var(--black);
+    margin: 0 0 4px 0;
+  }
+}
+
+.note-field {
+  textarea {
+    min-height: 90px;
+    border-radius: 5px;
+    padding: 10px;
+    font-size: 12px;
+    resize: none;
+
+    &::placeholder {
+      color: var(--color-icon-alternative);
+    }
+  }
+}

ui/components/institutional/note-to-trader/note-to-trader.js

@@ -0,0 +1,53 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {
+  DISPLAY,
+  FLEX_DIRECTION,
+  JustifyContent,
+} from '../../../helpers/constants/design-system';
+import { Label, Text } from '../../component-library';
+import Box from '../../ui/box';
+
+const NoteToTrader = (props) => {
+  const { placeholder, maxLength, onChange, noteText, labelText } = props;
+
+  return (
+    <>
+      <Box
+        className="note-header"
+        display={DISPLAY.FLEX}
+        justifyContent={JustifyContent.spaceBetween}
+      >
+        <Label htmlFor="transaction-note">{labelText}</Label>
+        <Text className="note-header__counter">
+          {noteText.length}/{maxLength}
+        </Text>
+      </Box>
+      <Box
+        display={DISPLAY.FLEX}
+        flexDirection={FLEX_DIRECTION.COLUMN}
+        className="note-field"
+      >
+        <textarea
+          id="transaction-note"
+          data-testid="transaction-note"
+          onChange={({ target: { value } }) => onChange(value)}
+          autoFocus
+          maxLength={maxLength}
+          placeholder={placeholder}
+          value={noteText}
+        />
+      </Box>
+    </>
+  );
+};
+
+NoteToTrader.propTypes = {
+  placeholder: PropTypes.string,
+  maxLength: PropTypes.string,
+  onChange: PropTypes.func,
+  noteText: PropTypes.string,
+  labelText: PropTypes.string,
+};
+
+export default NoteToTrader;

ui/components/institutional/note-to-trader/note-to-trader.stories.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import NoteToTrader from '.';
+
+export default {
+  title: 'Components/Institutional/NoteToTrader',
+  component: NoteToTrader,
+  args: {
+    placeholder:
+      'The approver will see this note when approving the transaction at the custodian.',
+    noteText: '',
+    labelText: 'Transaction note',
+    maxLength: '280',
+    onChange: () => {
+      /**/
+    },
+  },
+};
+
+export const DefaultStory = (args) => <NoteToTrader {...args} />;
+
+DefaultStory.storyName = 'NoteToTrader';

ui/components/institutional/note-to-trader/note-to-trader.test.js

@@ -0,0 +1,23 @@
+import { render, fireEvent } from '@testing-library/react';
+import React from 'react';
+import sinon from 'sinon';
+import NoteToTrader from './note-to-trader';
+
+describe('NoteToTrader', () => {
+  it('should render the Note to trader component', () => {
+    const props = {
+      placeholder: '',
+      maxLength: '280',
+      noteText: 'some text',
+      labelText: 'Transaction note',
+      onChange: sinon.spy(),
+    };
+
+    const { getByTestId, container } = render(<NoteToTrader {...props} />);
+
+    fireEvent.change(getByTestId('transaction-note'));
+    expect(getByTestId('transaction-note').value).toBe('some text');
+    expect(getByTestId('transaction-note')).toBeDefined();
+    expect(container).toMatchSnapshot();
+  });
+});