Rename deadline to due date, update dependencies

client/src/components/DueDate/DueDate.jsx

@@ -0,0 +1,78 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { useTranslation } from 'react-i18next';
+
+import styles from './DueDate.module.css';
+
+const SIZES = {
+  TINY: 'tiny',
+  SMALL: 'small',
+  MEDIUM: 'medium',
+};
+
+// TODO: move to styles
+const STYLES = {
+  tiny: {
+    fontSize: '12px',
+    lineHeight: '20px',
+    padding: '0px 6px',
+  },
+  small: {
+    fontSize: '12px',
+    lineHeight: '20px',
+    padding: '2px 6px',
+  },
+  medium: {
+    lineHeight: '20px',
+    padding: '6px 12px',
+  },
+};
+
+const FORMATS = {
+  tiny: 'longDate',
+  small: 'longDate',
+  medium: 'longDateTime',
+};
+
+const DueDate = React.memo(({
+  value, size, isDisabled, onClick,
+}) => {
+  const [t] = useTranslation();
+
+  const style = {
+    ...STYLES[size],
+  };
+
+  const contentNode = (
+    <span className={classNames(styles.wrapper, onClick && styles.hoverable)} style={style}>
+      {t(`format:${FORMATS[size]}`, {
+        value,
+        postProcess: 'formatDate',
+      })}
+    </span>
+  );
+
+  return onClick ? (
+    <button type="button" disabled={isDisabled} className={styles.button} onClick={onClick}>
+      {contentNode}
+    </button>
+  ) : (
+    contentNode
+  );
+});
+
+DueDate.propTypes = {
+  value: PropTypes.instanceOf(Date).isRequired,
+  size: PropTypes.oneOf(Object.values(SIZES)),
+  isDisabled: PropTypes.bool,
+  onClick: PropTypes.func,
+};
+
+DueDate.defaultProps = {
+  size: SIZES.MEDIUM,
+  isDisabled: false,
+  onClick: undefined,
+};
+
+export default DueDate;

client/src/components/DueDate/DueDate.module.css

@@ -0,0 +1,25 @@
+.button {
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  display: inline-block;
+  outline: none;
+  padding: 0;
+}
+
+.hoverable:hover {
+  background: #d2d8dc;
+  color: #17394d;
+}
+
+.wrapper {
+  background: #dce0e4;
+  border: none;
+  border-radius: 3px;
+  color: #6a808b;
+  display: inline-block;
+  outline: none;
+  text-align: left;
+  transition: background 0.3s ease;
+  vertical-align: top;
+}

client/src/components/DueDate/index.js

@@ -0,0 +1,3 @@
+import DueDate from './DueDate';
+
+export default DueDate;