@manuscripts/style-guide 0.30.19 → 0.30.20

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/cjs/components/SubmissionInspector/BaseInformation.js +33 -7
  2. package/dist/es/components/SubmissionInspector/BaseInformation.js +33 -7
  3. package/package.json +1 -1
package/dist/cjs/components/SubmissionInspector/BaseInformation.js CHANGED
@@ -44,7 +44,8 @@ const AttentionRed_1 = __importDefault(require("@manuscripts/assets/react/Attent
44
44
  const date_fns_1 = require("date-fns");
45
45
  const react_1 = __importStar(require("react"));
46
46
  const react_modern_calendar_datepicker_1 = __importDefault(require("react-modern-calendar-datepicker"));
47
- const styled_components_1 = __importDefault(require("styled-components"));
47
+ const react_tooltip_1 = __importDefault(require("react-tooltip"));
48
+ const styled_components_1 = __importStar(require("styled-components"));
48
49
  const Button_1 = require("../Button");
49
50
  const Dialog_1 = require("../Dialog");
50
51
  const types_1 = require("./types");
@@ -91,11 +92,15 @@ const CalenderDatePicker = ({ submission, handleDateChange, Button }) => {
91
92
  } })));
92
93
  };
93
94
  const BaseInformation = ({ submission, handleDateChange, userRole }) => {
94
- const Button = ({ ref }) => (react_1.default.createElement(DateButton, { ref: ref, criticality: submission.currentStep.criticality, disabled: userRole !== 'pe' },
95
- (0, date_fns_1.format)(submission.currentStep.dueDate, 'd MMM, EEEE'),
96
- submission.currentStep.criticality ===
97
- types_1.SubmissionCriticality.DUE_TODAY && react_1.default.createElement(AttentionOrange_1.default, null),
98
- submission.currentStep.criticality === types_1.SubmissionCriticality.OVERDUE && (react_1.default.createElement(AttentionRed_1.default, null))));
95
+ const Button = ({ ref }) => (react_1.default.createElement(Container, null,
96
+ react_1.default.createElement("div", { "data-tip": true, "data-for": submission.id },
97
+ react_1.default.createElement(DateButton, { ref: ref, criticality: submission.currentStep.criticality, disabled: userRole !== 'pe' },
98
+ (0, date_fns_1.format)(submission.currentStep.dueDate, 'd MMM, EEEE'),
99
+ submission.currentStep.criticality ===
100
+ types_1.SubmissionCriticality.DUE_TODAY && react_1.default.createElement(AttentionOrange_1.default, null),
101
+ submission.currentStep.criticality ===
102
+ types_1.SubmissionCriticality.OVERDUE && react_1.default.createElement(AttentionRed_1.default, null))),
103
+ react_1.default.createElement(react_tooltip_1.default, { id: submission.id, place: "bottom", effect: "solid", offset: { top: 10 }, className: "tooltip", disable: userRole == 'pe' }, "No permissions to reschedule")));
99
104
  return (react_1.default.createElement(Grid, null,
100
105
  react_1.default.createElement(DateLabel, null, "Due date"),
101
106
  react_1.default.createElement(Value, null,
@@ -133,6 +138,12 @@ const potentialDueDate = (stepDueDate, dueDate, submissionDueDate) => {
133
138
  });
134
139
  return (0, date_fns_1.add)(submissionDueDate, duration);
135
140
  };
141
+ const Container = styled_components_1.default.div `
142
+ .tooltip {
143
+ border-radius: 6px;
144
+ padding: ${(props) => props.theme.grid.unit * 2}px;
145
+ }
146
+ `;
136
147
  const Grid = styled_components_1.default.div `
137
148
  display: grid;
138
149
  grid-template-columns: 30% auto;
@@ -155,6 +166,10 @@ const Label = styled_components_1.default.div `
155
166
  const DateLabel = (0, styled_components_1.default)(Label) `
156
167
  color: ${(props) => props.theme.colors.text.primary};
157
168
  `;
169
+ const disabledStyle = (0, styled_components_1.css) `
170
+ background-color: ${(props) => props.theme.colors.background.secondary} !important;
171
+ color: ${(props) => props.theme.colors.text.secondary} !important;
172
+ `;
158
173
  const DateButton = (0, styled_components_1.default)(Button_1.IconTextButton) `
159
174
  border: 1px solid ${(props) => props.theme.colors.border.secondary}!important;
160
175
  box-sizing: border-box;
@@ -167,9 +182,20 @@ const DateButton = (0, styled_components_1.default)(Button_1.IconTextButton) `
167
182
  width: 100%;
168
183
  height: ${(props) => props.theme.grid.unit * 7.5}px;
169
184
  justify-content: space-between;
170
- background: transparent !important;
171
185
  padding: 0 ${(props) => props.theme.grid.unit * 2}px 0
172
186
  ${(props) => props.theme.grid.unit * 4}px;
187
+
188
+ ${(props) => props.disabled && disabledStyle}
189
+
190
+ &:focus {
191
+ border-color: ${(props) => props.theme.colors.border.field.hover}!important;
192
+ background-color: ${(props) => props.theme.colors.background.fifth};
193
+ }
194
+
195
+ &:hover {
196
+ background-color: ${(props) => props.theme.colors.background.fifth};
197
+ }
198
+
173
199
  svg {
174
200
  margin-right: 0;
175
201
  }
package/dist/es/components/SubmissionInspector/BaseInformation.js CHANGED
@@ -19,7 +19,8 @@ import AttentionRed from '@manuscripts/assets/react/AttentionRed';
19
19
  import { add, format, intervalToDuration } from 'date-fns';
20
20
  import React, { useCallback, useMemo, useState } from 'react';
21
21
  import DatePicker from 'react-modern-calendar-datepicker';
22
- import styled from 'styled-components';
22
+ import ReactTooltip from 'react-tooltip';
23
+ import styled, { css } from 'styled-components';
23
24
  import { IconTextButton } from '../Button';
24
25
  import { Category, Dialog, MessageContainer } from '../Dialog';
25
26
  import { SubmissionCriticality } from './types';
@@ -66,11 +67,15 @@ const CalenderDatePicker = ({ submission, handleDateChange, Button }) => {
66
67
  } })));
67
68
  };
68
69
  export const BaseInformation = ({ submission, handleDateChange, userRole }) => {
69
- const Button = ({ ref }) => (React.createElement(DateButton, { ref: ref, criticality: submission.currentStep.criticality, disabled: userRole !== 'pe' },
70
- format(submission.currentStep.dueDate, 'd MMM, EEEE'),
71
- submission.currentStep.criticality ===
72
- SubmissionCriticality.DUE_TODAY && React.createElement(AttentionOrange, null),
73
- submission.currentStep.criticality === SubmissionCriticality.OVERDUE && (React.createElement(AttentionRed, null))));
70
+ const Button = ({ ref }) => (React.createElement(Container, null,
71
+ React.createElement("div", { "data-tip": true, "data-for": submission.id },
72
+ React.createElement(DateButton, { ref: ref, criticality: submission.currentStep.criticality, disabled: userRole !== 'pe' },
73
+ format(submission.currentStep.dueDate, 'd MMM, EEEE'),
74
+ submission.currentStep.criticality ===
75
+ SubmissionCriticality.DUE_TODAY && React.createElement(AttentionOrange, null),
76
+ submission.currentStep.criticality ===
77
+ SubmissionCriticality.OVERDUE && React.createElement(AttentionRed, null))),
78
+ React.createElement(ReactTooltip, { id: submission.id, place: "bottom", effect: "solid", offset: { top: 10 }, className: "tooltip", disable: userRole == 'pe' }, "No permissions to reschedule")));
74
79
  return (React.createElement(Grid, null,
75
80
  React.createElement(DateLabel, null, "Due date"),
76
81
  React.createElement(Value, null,
@@ -107,6 +112,12 @@ const potentialDueDate = (stepDueDate, dueDate, submissionDueDate) => {
107
112
  });
108
113
  return add(submissionDueDate, duration);
109
114
  };
115
+ const Container = styled.div `
116
+ .tooltip {
117
+ border-radius: 6px;
118
+ padding: ${(props) => props.theme.grid.unit * 2}px;
119
+ }
120
+ `;
110
121
  const Grid = styled.div `
111
122
  display: grid;
112
123
  grid-template-columns: 30% auto;
@@ -129,6 +140,10 @@ const Label = styled.div `
129
140
  const DateLabel = styled(Label) `
130
141
  color: ${(props) => props.theme.colors.text.primary};
131
142
  `;
143
+ const disabledStyle = css `
144
+ background-color: ${(props) => props.theme.colors.background.secondary} !important;
145
+ color: ${(props) => props.theme.colors.text.secondary} !important;
146
+ `;
132
147
  const DateButton = styled(IconTextButton) `
133
148
  border: 1px solid ${(props) => props.theme.colors.border.secondary}!important;
134
149
  box-sizing: border-box;
@@ -141,9 +156,20 @@ const DateButton = styled(IconTextButton) `
141
156
  width: 100%;
142
157
  height: ${(props) => props.theme.grid.unit * 7.5}px;
143
158
  justify-content: space-between;
144
- background: transparent !important;
145
159
  padding: 0 ${(props) => props.theme.grid.unit * 2}px 0
146
160
  ${(props) => props.theme.grid.unit * 4}px;
161
+
162
+ ${(props) => props.disabled && disabledStyle}
163
+
164
+ &:focus {
165
+ border-color: ${(props) => props.theme.colors.border.field.hover}!important;
166
+ background-color: ${(props) => props.theme.colors.background.fifth};
167
+ }
168
+
169
+ &:hover {
170
+ background-color: ${(props) => props.theme.colors.background.fifth};
171
+ }
172
+
147
173
  svg {
148
174
  margin-right: 0;
149
175
  }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@manuscripts/style-guide",
3
3
  "description": "Shared components for Manuscripts applications",
4
- "version": "0.30.19",
4
+ "version": "0.30.20",
5
5
  "repository": "gitlab:mpapp-public/manuscripts-style-guide",
6
6
  "license": "Apache-2.0",
7
7
  "main": "dist/cjs",