@manuscripts/style-guide 3.0.0 → 3.0.1-LEAN-4579.0

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 (12) hide show
  1. package/dist/cjs/components/Drawer.js +13 -24
  2. package/dist/cjs/components/StyledModal.js +3 -1
  3. package/dist/cjs/components/icons/add-role.js +11 -0
  4. package/dist/cjs/components/icons/index.js +5 -3
  5. package/dist/es/components/Drawer.js +12 -23
  6. package/dist/es/components/StyledModal.js +3 -1
  7. package/dist/es/components/icons/add-role.js +6 -0
  8. package/dist/es/components/icons/index.js +1 -0
  9. package/dist/types/components/Drawer.d.ts +10 -11
  10. package/dist/types/components/icons/add-role.d.ts +4 -0
  11. package/dist/types/components/icons/index.d.ts +1 -0
  12. package/package.json +1 -1
package/dist/cjs/components/Drawer.js CHANGED
@@ -26,10 +26,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
26
26
  return (mod && mod.__esModule) ? mod : { "default": mod };
27
27
  };
28
28
  Object.defineProperty(exports, "__esModule", { value: true });
29
- exports.Drawer = void 0;
29
+ exports.Drawer = exports.DrawerItemMeta = exports.DrawerItemLabel = exports.DrawerLabelContainer = exports.DrawerIcon = exports.DrawerListItem = exports.DrawerItemsList = void 0;
30
30
  const react_1 = __importDefault(require("react"));
31
31
  const styled_components_1 = __importStar(require("styled-components"));
32
- const icons_1 = require("./icons");
33
32
  const slideIn = (0, styled_components_1.keyframes) `
34
33
  from {
35
34
  transform: translateX(100%);
@@ -40,6 +39,7 @@ const slideIn = (0, styled_components_1.keyframes) `
40
39
  `;
41
40
  const DrawerContainer = styled_components_1.default.div `
42
41
  width: ${(props) => props.width || '300px'};
42
+ padding: 40px 0 0 0;
43
43
  background: ${(props) => props.theme.colors.background.primary};
44
44
  border-right: 1px solid ${(props) => props.theme.colors.border.secondary};
45
45
  height: 100%;
@@ -51,7 +51,7 @@ const DrawerContainer = styled_components_1.default.div `
51
51
  top: 0;
52
52
  z-index: 1;
53
53
  `;
54
- const BackButton = styled_components_1.default.button `
54
+ const DrawerBackButton = styled_components_1.default.button `
55
55
  padding: 8px 16px;
56
56
  border: none;
57
57
  background: none;
@@ -69,13 +69,13 @@ const BackButton = styled_components_1.default.button `
69
69
  opacity: 0.8;
70
70
  }
71
71
  `;
72
- const ItemsList = styled_components_1.default.ul `
72
+ exports.DrawerItemsList = styled_components_1.default.ul `
73
73
  list-style: none;
74
74
  padding: 0;
75
75
  margin: 0;
76
76
  overflow-y: auto;
77
77
  `;
78
- const ListItem = styled_components_1.default.li `
78
+ exports.DrawerListItem = styled_components_1.default.li `
79
79
  padding: 8px 16px;
80
80
  cursor: pointer;
81
81
  display: flex;
@@ -91,7 +91,7 @@ const ListItem = styled_components_1.default.li `
91
91
  border-bottom: none;
92
92
  }
93
93
  `;
94
- const Icon = styled_components_1.default.span `
94
+ exports.DrawerIcon = styled_components_1.default.span `
95
95
  width: 20px;
96
96
  height: 20px;
97
97
  display: inline-flex;
@@ -99,47 +99,36 @@ const Icon = styled_components_1.default.span `
99
99
  justify-content: center;
100
100
  `;
101
101
  const DrawerTitle = styled_components_1.default.h2 `
102
- padding: 8px 16px 6px 16px;
102
+ padding: 16px 16px 48px 16px;
103
103
  margin: 0;
104
104
  font-weight: ${(props) => props.theme.font.weight.normal};
105
105
  font-size: ${(props) => props.theme.font.size.large};
106
106
  font-family: ${(props) => props.theme.font.family.sans};
107
107
  color: ${(props) => props.theme.colors.text.secondary};
108
108
  `;
109
- const LabelContainer = styled_components_1.default.div `
109
+ exports.DrawerLabelContainer = styled_components_1.default.div `
110
110
  display: flex;
111
111
  flex-direction: column;
112
112
  gap: 4px;
113
113
  `;
114
- const ItemLabel = styled_components_1.default.span `
114
+ exports.DrawerItemLabel = styled_components_1.default.span `
115
115
  font-weight: ${(props) => props.theme.font.weight.normal};
116
116
  font-size: ${(props) => props.theme.font.size.medium};
117
117
  font-family: ${(props) => props.theme.font.family.sans};
118
118
  color: ${(props) => props.theme.colors.text.primary};
119
119
  `;
120
- const ItemMeta = styled_components_1.default.span `
120
+ exports.DrawerItemMeta = styled_components_1.default.span `
121
121
  font-weight: ${(props) => props.theme.font.weight.normal};
122
122
  font-size: ${(props) => props.theme.font.size.small};
123
123
  font-family: ${(props) => props.theme.font.family.sans};
124
124
  color: ${(props) => props.theme.colors.text.secondary};
125
125
  `;
126
- const Drawer = ({ items, selectedIds = [], title, onSelect, onBack, width, }) => {
126
+ const Drawer = ({ title, onBack, width, children, }) => {
127
127
  return (react_1.default.createElement(DrawerContainer, { "data-cy": "drawer", width: width },
128
- react_1.default.createElement(BackButton, { onClick: onBack },
128
+ react_1.default.createElement(DrawerBackButton, { onClick: onBack },
129
129
  react_1.default.createElement("span", null, "\u2190"),
130
130
  "Back"),
131
131
  react_1.default.createElement(DrawerTitle, null, title),
132
- react_1.default.createElement(ItemsList, null, items.map((item) => (react_1.default.createElement(ListItem, { "data-cy": "item", key: item.id, selected: selectedIds?.includes(item.id), onClick: () => onSelect(item.id) },
133
- react_1.default.createElement(Icon, null, selectedIds?.includes(item.id) ? (react_1.default.createElement(icons_1.AddedIcon, { width: 22, height: 22 })) : (react_1.default.createElement(icons_1.AddIcon, { width: 22, height: 22 }))),
134
- react_1.default.createElement(LabelContainer, null,
135
- react_1.default.createElement(ItemLabel, null, item.label),
136
- react_1.default.createElement(ItemMeta, null,
137
- item.city && (react_1.default.createElement(react_1.default.Fragment, null,
138
- item.city,
139
- item.state || item.country ? ', ' : '')),
140
- item.state && (react_1.default.createElement(react_1.default.Fragment, null,
141
- item.state,
142
- item.country ? ', ' : '')),
143
- item.country && react_1.default.createElement(react_1.default.Fragment, null, item.country)))))))));
132
+ children));
144
133
  };
145
134
  exports.Drawer = Drawer;
package/dist/cjs/components/StyledModal.js CHANGED
@@ -49,11 +49,12 @@ exports.ModalHeader = styled_components_1.default.div `
49
49
  position: absolute;
50
50
  right: 0;
51
51
  top: 0;
52
- z-index: 1;
52
+ z-index: 3;
53
53
  `;
54
54
  exports.CloseButton = (0, styled_components_1.default)(Button_1.RoundIconButton) `
55
55
  box-shadow: none;
56
56
  text-indent: -99999px;
57
+ z-index: 2;
57
58
 
58
59
  ::before,
59
60
  ::after {
@@ -112,6 +113,7 @@ exports.ModelContent = styled_components_1.default.div `
112
113
  `;
113
114
  exports.ScrollableModalContent = (0, styled_components_1.default)(exports.ModelContent) `
114
115
  overflow-y: auto;
116
+ max-height: 100%;
115
117
  `;
116
118
  exports.StyledModal = (0, styled_components_1.default)(ReactModalAdapter).attrs({
117
119
  closeTimeoutMS: totalTransitionTime,
package/dist/cjs/components/icons/add-role.js ADDED
@@ -0,0 +1,11 @@
1
+ "use strict";
2
+ var __importDefault = (this && this.__importDefault) || function (mod) {
3
+ return (mod && mod.__esModule) ? mod : { "default": mod };
4
+ };
5
+ Object.defineProperty(exports, "__esModule", { value: true });
6
+ const react_1 = __importDefault(require("react"));
7
+ const AddRoleIcon = (props) => (react_1.default.createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props },
8
+ react_1.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M5.00688 7.74367C5.14845 7.98076 5.07101 8.28773 4.83392 8.42929C3.8872 8.99458 3.31472 9.23561 2.90515 9.40805C2.87244 9.42182 2.84077 9.43516 2.81003 9.44818C2.43279 9.60806 2.23693 9.70285 1.90606 10.0406C1.80749 10.1412 1.7037 10.3521 1.62666 10.6937C1.55288 11.0208 1.51732 11.4038 1.50512 11.7802C1.49301 12.1538 1.50432 12.5058 1.51886 12.7655C1.5261 12.8948 1.53409 13.0002 1.5402 13.0726C1.54039 13.0748 1.54057 13.077 1.54075 13.0791C1.5571 13.0965 1.58434 13.1215 1.62852 13.1526C1.72502 13.2205 1.87112 13.2957 2.07447 13.3717C2.48086 13.5237 3.04678 13.6542 3.72897 13.756C5.08851 13.959 6.82749 14.0364 8.48424 13.9842C8.76025 13.9755 8.99105 14.1922 8.99975 14.4682C9.00846 14.7442 8.79177 14.975 8.51576 14.9837C6.81518 15.0373 5.01419 14.959 3.58133 14.7451C2.86732 14.6385 2.22392 14.4953 1.72416 14.3084C1.47445 14.215 1.24327 14.1044 1.05281 13.9703C0.865818 13.8386 0.682404 13.6591 0.587339 13.416C0.571134 13.3746 0.560531 13.3312 0.555811 13.287L1.05299 13.2339C0.555811 13.287 0.555811 13.287 0.555811 13.287L0.555471 13.2837L0.554734 13.2766L0.552195 13.2508C0.550072 13.2287 0.54714 13.197 0.543741 13.1567C0.536946 13.0762 0.52826 12.9613 0.520422 12.8214C0.504795 12.5423 0.492303 12.1594 0.505648 11.7478C0.518906 11.3388 0.55807 10.8864 0.651169 10.4736C0.741001 10.0754 0.896249 9.64235 1.19176 9.34073C1.64906 8.87397 1.9757 8.71567 2.41983 8.52745C2.45104 8.51423 2.48302 8.50077 2.51589 8.48693C2.91031 8.32093 3.43386 8.10057 4.32126 7.5707C4.55835 7.42914 4.86532 7.50657 5.00688 7.74367ZM9.99312 7.74367C10.1347 7.50658 10.4417 7.42914 10.6787 7.5707C11.3743 7.98602 11.8461 8.21084 12.2004 8.36581C12.4534 8.47647 12.5688 8.77128 12.4581 9.02427C12.3474 9.27727 12.0526 9.39266 11.7996 9.282C11.4098 9.1115 10.9004 8.86775 10.1661 8.42929C9.92899 8.28773 9.85155 7.98076 9.99312 7.74367Z", fill: "#0D79D0" }),
9
+ react_1.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M7.5 7C9.15685 7 10.5 5.65685 10.5 4C10.5 2.34315 9.15685 1 7.5 1C5.84315 1 4.5 2.34315 4.5 4C4.5 5.65685 5.84315 7 7.5 7ZM7.5 8C9.70914 8 11.5 6.20914 11.5 4C11.5 1.79086 9.70914 0 7.5 0C5.29086 0 3.5 1.79086 3.5 4C3.5 6.20914 5.29086 8 7.5 8Z", fill: "#0D79D0" }),
10
+ react_1.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M13.25 13.75V15.25C13.25 15.6642 12.9142 16 12.5 16C12.0858 16 11.75 15.6642 11.75 15.25V13.75H10.25C9.83579 13.75 9.5 13.4142 9.5 13C9.5 12.5858 9.83579 12.25 10.25 12.25H11.75V10.75C11.75 10.3358 12.0858 10 12.5 10C12.9142 10 13.25 10.3358 13.25 10.75V12.25H14.75C15.1642 12.25 15.5 12.5858 15.5 13C15.5 13.4142 15.1642 13.75 14.75 13.75H13.25Z", fill: "#0D79D0" })));
11
+ exports.default = AddRoleIcon;
package/dist/cjs/components/icons/index.js CHANGED
@@ -18,9 +18,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
18
18
  return (mod && mod.__esModule) ? mod : { "default": mod };
19
19
  };
20
20
  Object.defineProperty(exports, "__esModule", { value: true });
21
- exports.HandleOutlineIcon = exports.HandleInspectorIcon = exports.FileVideoIcon = exports.FileUnknownIcon = exports.FileTableIcon = exports.FilePdfIcon = exports.FileMainDocumentIcon = exports.FileLatexIcon = exports.FileImageIcon = exports.FileGraphicalAbstractIcon = exports.FileFigureIcon = exports.FileDocumentIcon = exports.FileCorruptedIcon = exports.FileCompressedIcon = exports.FileCodeIcon = exports.FileAudioIcon = exports.EditAttrsTrackingIcon = exports.EditIcon = exports.DraggableIcon = exports.DotsIcon = exports.DeleteIcon = exports.DeleteSolidIcon = exports.CorrespondingAuthorIcon = exports.CommentIcon = exports.CommentResolveIcon = exports.CommentReplyIcon = exports.CitationCountIcon = exports.SystemUserAvatarIcon = exports.BookIcon = exports.AffiliationPlaceholderIcon = exports.AuthorPlaceholderIcon = exports.AffiliationIcon = exports.AlertIcon = exports.AvatarIcon = exports.AttentionRedIcon = exports.AttentionOrangeIcon = exports.AttentionGreenIcon = exports.AttentionBlueIcon = exports.AttachIcon = exports.ArrowUpIcon = exports.ArrowLeftIcon = exports.ArrowDownCircleIcon = exports.ArrowDownIcon = exports.AddIcon = exports.AddOutlineIcon = exports.AddNewIcon = exports.AddedIcon = exports.AddFigureIcon = exports.AddCommentIcon = exports.AddAuthorIcon = void 0;
22
- exports.TriangleExpandedIcon = exports.TriangleCollapsedIcon = exports.ToolbarUnindentIcon = exports.ToolbarIndentIcon = exports.ToolbarUnorderedListIcon = exports.ToolbarUnderlineIcon = exports.ToolbarTableIcon = exports.ToolbarSymbolIcon = exports.ToolbarSuperscriptIcon = exports.ToolbarSubscriptIcon = exports.ToolbarOrderedListIcon = exports.ToolbarItalicIcon = exports.ToolbarFigureIcon = exports.ToolbarEquationIcon = exports.ToolbarCodeIcon = exports.ToolbarCitationIcon = exports.ToolbarBoldIcon = exports.TickIcon = exports.TaskStepDoneIcon = exports.SliderOnIcon = exports.SliderOffIcon = exports.SectionCategoryIcon = exports.SearchIcon = exports.ScrollIcon = exports.SaveStatusSavingIcon = exports.SaveStatusSavedIcon = exports.SaveStatusOfflineIcon = exports.RoleReadingIcon = exports.RoleAnnotatingIcon = exports.PlusIcon = exports.OutlineUnorderedListIcon = exports.OutlineTableIcon = exports.OutlineSectionIcon = exports.OutlinePullQuoteIcon = exports.OutlineParagraphIcon = exports.OutlineOrderedListIcon = exports.OutlineManuscriptIcon = exports.OutlineFigureIcon = exports.OutlineEmbedIcon = exports.OutlineEquationIcon = exports.OutlineCodeIcon = exports.OutlineBlockQuoteIcon = exports.ManuscriptIcon = exports.LogoutIcon = exports.LockIcon = exports.LinkIcon = exports.ImageRightIcon = exports.ImageDefaultIcon = exports.ImageLeftIcon = exports.HelpIcon = void 0;
23
- exports.AddInstitutionIcon = exports.AddUserIcon = exports.ProfileIcon = exports.CrclTickAnimation = exports.VerticalEllipsisIcon = exports.UploadIcon = void 0;
21
+ exports.HandleInspectorIcon = exports.FileVideoIcon = exports.FileUnknownIcon = exports.FileTableIcon = exports.FilePdfIcon = exports.FileMainDocumentIcon = exports.FileLatexIcon = exports.FileImageIcon = exports.FileGraphicalAbstractIcon = exports.FileFigureIcon = exports.FileDocumentIcon = exports.FileCorruptedIcon = exports.FileCompressedIcon = exports.FileCodeIcon = exports.FileAudioIcon = exports.EditAttrsTrackingIcon = exports.EditIcon = exports.DraggableIcon = exports.DotsIcon = exports.DeleteIcon = exports.DeleteSolidIcon = exports.CorrespondingAuthorIcon = exports.CommentIcon = exports.CommentResolveIcon = exports.CommentReplyIcon = exports.CitationCountIcon = exports.SystemUserAvatarIcon = exports.BookIcon = exports.AffiliationPlaceholderIcon = exports.AuthorPlaceholderIcon = exports.AffiliationIcon = exports.AlertIcon = exports.AvatarIcon = exports.AttentionRedIcon = exports.AttentionOrangeIcon = exports.AttentionGreenIcon = exports.AttentionBlueIcon = exports.AttachIcon = exports.ArrowUpIcon = exports.ArrowLeftIcon = exports.ArrowDownCircleIcon = exports.ArrowDownIcon = exports.AddRoleIcon = exports.AddIcon = exports.AddOutlineIcon = exports.AddNewIcon = exports.AddedIcon = exports.AddFigureIcon = exports.AddCommentIcon = exports.AddAuthorIcon = void 0;
22
+ exports.TriangleCollapsedIcon = exports.ToolbarUnindentIcon = exports.ToolbarIndentIcon = exports.ToolbarUnorderedListIcon = exports.ToolbarUnderlineIcon = exports.ToolbarTableIcon = exports.ToolbarSymbolIcon = exports.ToolbarSuperscriptIcon = exports.ToolbarSubscriptIcon = exports.ToolbarOrderedListIcon = exports.ToolbarItalicIcon = exports.ToolbarFigureIcon = exports.ToolbarEquationIcon = exports.ToolbarCodeIcon = exports.ToolbarCitationIcon = exports.ToolbarBoldIcon = exports.TickIcon = exports.TaskStepDoneIcon = exports.SliderOnIcon = exports.SliderOffIcon = exports.SectionCategoryIcon = exports.SearchIcon = exports.ScrollIcon = exports.SaveStatusSavingIcon = exports.SaveStatusSavedIcon = exports.SaveStatusOfflineIcon = exports.RoleReadingIcon = exports.RoleAnnotatingIcon = exports.PlusIcon = exports.OutlineUnorderedListIcon = exports.OutlineTableIcon = exports.OutlineSectionIcon = exports.OutlinePullQuoteIcon = exports.OutlineParagraphIcon = exports.OutlineOrderedListIcon = exports.OutlineManuscriptIcon = exports.OutlineFigureIcon = exports.OutlineEmbedIcon = exports.OutlineEquationIcon = exports.OutlineCodeIcon = exports.OutlineBlockQuoteIcon = exports.ManuscriptIcon = exports.LogoutIcon = exports.LockIcon = exports.LinkIcon = exports.ImageRightIcon = exports.ImageDefaultIcon = exports.ImageLeftIcon = exports.HelpIcon = exports.HandleOutlineIcon = void 0;
23
+ exports.AddInstitutionIcon = exports.AddUserIcon = exports.ProfileIcon = exports.CrclTickAnimation = exports.VerticalEllipsisIcon = exports.UploadIcon = exports.TriangleExpandedIcon = void 0;
24
24
  var add_author_1 = require("./add-author");
25
25
  Object.defineProperty(exports, "AddAuthorIcon", { enumerable: true, get: function () { return __importDefault(add_author_1).default; } });
26
26
  var add_comment_1 = require("./add-comment");
@@ -35,6 +35,8 @@ var add_outline_1 = require("./add-outline");
35
35
  Object.defineProperty(exports, "AddOutlineIcon", { enumerable: true, get: function () { return __importDefault(add_outline_1).default; } });
36
36
  var add_1 = require("./add");
37
37
  Object.defineProperty(exports, "AddIcon", { enumerable: true, get: function () { return __importDefault(add_1).default; } });
38
+ var add_role_1 = require("./add-role");
39
+ Object.defineProperty(exports, "AddRoleIcon", { enumerable: true, get: function () { return __importDefault(add_role_1).default; } });
38
40
  var arrow_down_1 = require("./arrow-down");
39
41
  Object.defineProperty(exports, "ArrowDownIcon", { enumerable: true, get: function () { return __importDefault(arrow_down_1).default; } });
40
42
  var arrow_down_circle_1 = require("./arrow-down-circle");
package/dist/es/components/Drawer.js CHANGED
@@ -1,6 +1,5 @@
1
1
  import React from 'react';
2
2
  import styled, { keyframes } from 'styled-components';
3
- import { AddedIcon, AddIcon } from './icons';
4
3
  const slideIn = keyframes `
5
4
  from {
6
5
  transform: translateX(100%);
@@ -11,6 +10,7 @@ const slideIn = keyframes `
11
10
  `;
12
11
  const DrawerContainer = styled.div `
13
12
  width: ${(props) => props.width || '300px'};
13
+ padding: 40px 0 0 0;
14
14
  background: ${(props) => props.theme.colors.background.primary};
15
15
  border-right: 1px solid ${(props) => props.theme.colors.border.secondary};
16
16
  height: 100%;
@@ -22,7 +22,7 @@ const DrawerContainer = styled.div `
22
22
  top: 0;
23
23
  z-index: 1;
24
24
  `;
25
- const BackButton = styled.button `
25
+ const DrawerBackButton = styled.button `
26
26
  padding: 8px 16px;
27
27
  border: none;
28
28
  background: none;
@@ -40,13 +40,13 @@ const BackButton = styled.button `
40
40
  opacity: 0.8;
41
41
  }
42
42
  `;
43
- const ItemsList = styled.ul `
43
+ export const DrawerItemsList = styled.ul `
44
44
  list-style: none;
45
45
  padding: 0;
46
46
  margin: 0;
47
47
  overflow-y: auto;
48
48
  `;
49
- const ListItem = styled.li `
49
+ export const DrawerListItem = styled.li `
50
50
  padding: 8px 16px;
51
51
  cursor: pointer;
52
52
  display: flex;
@@ -62,7 +62,7 @@ const ListItem = styled.li `
62
62
  border-bottom: none;
63
63
  }
64
64
  `;
65
- const Icon = styled.span `
65
+ export const DrawerIcon = styled.span `
66
66
  width: 20px;
67
67
  height: 20px;
68
68
  display: inline-flex;
@@ -70,46 +70,35 @@ const Icon = styled.span `
70
70
  justify-content: center;
71
71
  `;
72
72
  const DrawerTitle = styled.h2 `
73
- padding: 8px 16px 6px 16px;
73
+ padding: 16px 16px 48px 16px;
74
74
  margin: 0;
75
75
  font-weight: ${(props) => props.theme.font.weight.normal};
76
76
  font-size: ${(props) => props.theme.font.size.large};
77
77
  font-family: ${(props) => props.theme.font.family.sans};
78
78
  color: ${(props) => props.theme.colors.text.secondary};
79
79
  `;
80
- const LabelContainer = styled.div `
80
+ export const DrawerLabelContainer = styled.div `
81
81
  display: flex;
82
82
  flex-direction: column;
83
83
  gap: 4px;
84
84
  `;
85
- const ItemLabel = styled.span `
85
+ export const DrawerItemLabel = styled.span `
86
86
  font-weight: ${(props) => props.theme.font.weight.normal};
87
87
  font-size: ${(props) => props.theme.font.size.medium};
88
88
  font-family: ${(props) => props.theme.font.family.sans};
89
89
  color: ${(props) => props.theme.colors.text.primary};
90
90
  `;
91
- const ItemMeta = styled.span `
91
+ export const DrawerItemMeta = styled.span `
92
92
  font-weight: ${(props) => props.theme.font.weight.normal};
93
93
  font-size: ${(props) => props.theme.font.size.small};
94
94
  font-family: ${(props) => props.theme.font.family.sans};
95
95
  color: ${(props) => props.theme.colors.text.secondary};
96
96
  `;
97
- export const Drawer = ({ items, selectedIds = [], title, onSelect, onBack, width, }) => {
97
+ export const Drawer = ({ title, onBack, width, children, }) => {
98
98
  return (React.createElement(DrawerContainer, { "data-cy": "drawer", width: width },
99
- React.createElement(BackButton, { onClick: onBack },
99
+ React.createElement(DrawerBackButton, { onClick: onBack },
100
100
  React.createElement("span", null, "\u2190"),
101
101
  "Back"),
102
102
  React.createElement(DrawerTitle, null, title),
103
- React.createElement(ItemsList, null, items.map((item) => (React.createElement(ListItem, { "data-cy": "item", key: item.id, selected: selectedIds?.includes(item.id), onClick: () => onSelect(item.id) },
104
- React.createElement(Icon, null, selectedIds?.includes(item.id) ? (React.createElement(AddedIcon, { width: 22, height: 22 })) : (React.createElement(AddIcon, { width: 22, height: 22 }))),
105
- React.createElement(LabelContainer, null,
106
- React.createElement(ItemLabel, null, item.label),
107
- React.createElement(ItemMeta, null,
108
- item.city && (React.createElement(React.Fragment, null,
109
- item.city,
110
- item.state || item.country ? ', ' : '')),
111
- item.state && (React.createElement(React.Fragment, null,
112
- item.state,
113
- item.country ? ', ' : '')),
114
- item.country && React.createElement(React.Fragment, null, item.country)))))))));
103
+ children));
115
104
  };
package/dist/es/components/StyledModal.js CHANGED
@@ -43,11 +43,12 @@ export const ModalHeader = styled.div `
43
43
  position: absolute;
44
44
  right: 0;
45
45
  top: 0;
46
- z-index: 1;
46
+ z-index: 3;
47
47
  `;
48
48
  export const CloseButton = styled(RoundIconButton) `
49
49
  box-shadow: none;
50
50
  text-indent: -99999px;
51
+ z-index: 2;
51
52
 
52
53
  ::before,
53
54
  ::after {
@@ -106,6 +107,7 @@ export const ModelContent = styled.div `
106
107
  `;
107
108
  export const ScrollableModalContent = styled(ModelContent) `
108
109
  overflow-y: auto;
110
+ max-height: 100%;
109
111
  `;
110
112
  export const StyledModal = styled(ReactModalAdapter).attrs({
111
113
  closeTimeoutMS: totalTransitionTime,
package/dist/es/components/icons/add-role.js ADDED
@@ -0,0 +1,6 @@
1
+ import React from 'react';
2
+ const AddRoleIcon = (props) => (React.createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props },
3
+ React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M5.00688 7.74367C5.14845 7.98076 5.07101 8.28773 4.83392 8.42929C3.8872 8.99458 3.31472 9.23561 2.90515 9.40805C2.87244 9.42182 2.84077 9.43516 2.81003 9.44818C2.43279 9.60806 2.23693 9.70285 1.90606 10.0406C1.80749 10.1412 1.7037 10.3521 1.62666 10.6937C1.55288 11.0208 1.51732 11.4038 1.50512 11.7802C1.49301 12.1538 1.50432 12.5058 1.51886 12.7655C1.5261 12.8948 1.53409 13.0002 1.5402 13.0726C1.54039 13.0748 1.54057 13.077 1.54075 13.0791C1.5571 13.0965 1.58434 13.1215 1.62852 13.1526C1.72502 13.2205 1.87112 13.2957 2.07447 13.3717C2.48086 13.5237 3.04678 13.6542 3.72897 13.756C5.08851 13.959 6.82749 14.0364 8.48424 13.9842C8.76025 13.9755 8.99105 14.1922 8.99975 14.4682C9.00846 14.7442 8.79177 14.975 8.51576 14.9837C6.81518 15.0373 5.01419 14.959 3.58133 14.7451C2.86732 14.6385 2.22392 14.4953 1.72416 14.3084C1.47445 14.215 1.24327 14.1044 1.05281 13.9703C0.865818 13.8386 0.682404 13.6591 0.587339 13.416C0.571134 13.3746 0.560531 13.3312 0.555811 13.287L1.05299 13.2339C0.555811 13.287 0.555811 13.287 0.555811 13.287L0.555471 13.2837L0.554734 13.2766L0.552195 13.2508C0.550072 13.2287 0.54714 13.197 0.543741 13.1567C0.536946 13.0762 0.52826 12.9613 0.520422 12.8214C0.504795 12.5423 0.492303 12.1594 0.505648 11.7478C0.518906 11.3388 0.55807 10.8864 0.651169 10.4736C0.741001 10.0754 0.896249 9.64235 1.19176 9.34073C1.64906 8.87397 1.9757 8.71567 2.41983 8.52745C2.45104 8.51423 2.48302 8.50077 2.51589 8.48693C2.91031 8.32093 3.43386 8.10057 4.32126 7.5707C4.55835 7.42914 4.86532 7.50657 5.00688 7.74367ZM9.99312 7.74367C10.1347 7.50658 10.4417 7.42914 10.6787 7.5707C11.3743 7.98602 11.8461 8.21084 12.2004 8.36581C12.4534 8.47647 12.5688 8.77128 12.4581 9.02427C12.3474 9.27727 12.0526 9.39266 11.7996 9.282C11.4098 9.1115 10.9004 8.86775 10.1661 8.42929C9.92899 8.28773 9.85155 7.98076 9.99312 7.74367Z", fill: "#0D79D0" }),
4
+ React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M7.5 7C9.15685 7 10.5 5.65685 10.5 4C10.5 2.34315 9.15685 1 7.5 1C5.84315 1 4.5 2.34315 4.5 4C4.5 5.65685 5.84315 7 7.5 7ZM7.5 8C9.70914 8 11.5 6.20914 11.5 4C11.5 1.79086 9.70914 0 7.5 0C5.29086 0 3.5 1.79086 3.5 4C3.5 6.20914 5.29086 8 7.5 8Z", fill: "#0D79D0" }),
5
+ React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M13.25 13.75V15.25C13.25 15.6642 12.9142 16 12.5 16C12.0858 16 11.75 15.6642 11.75 15.25V13.75H10.25C9.83579 13.75 9.5 13.4142 9.5 13C9.5 12.5858 9.83579 12.25 10.25 12.25H11.75V10.75C11.75 10.3358 12.0858 10 12.5 10C12.9142 10 13.25 10.3358 13.25 10.75V12.25H14.75C15.1642 12.25 15.5 12.5858 15.5 13C15.5 13.4142 15.1642 13.75 14.75 13.75H13.25Z", fill: "#0D79D0" })));
6
+ export default AddRoleIcon;
package/dist/es/components/icons/index.js CHANGED
@@ -20,6 +20,7 @@ export { default as AddedIcon } from './added';
20
20
  export { default as AddNewIcon } from './add-new';
21
21
  export { default as AddOutlineIcon } from './add-outline';
22
22
  export { default as AddIcon } from './add';
23
+ export { default as AddRoleIcon } from './add-role';
23
24
  export { default as ArrowDownIcon } from './arrow-down';
24
25
  export { default as ArrowDownCircleIcon } from './arrow-down-circle';
25
26
  export { default as ArrowLeftIcon } from './arrow-left';
package/dist/types/components/Drawer.d.ts CHANGED
@@ -1,17 +1,16 @@
1
1
  import React from 'react';
2
- interface DrawerProps {
3
- items: Array<{
4
- id: string;
5
- label: string;
6
- country?: string;
7
- city?: string;
8
- state?: string;
9
- }>;
10
- selectedIds?: string[];
2
+ export interface DrawerProps {
11
3
  title: string;
12
- onSelect: (id: string) => void;
13
4
  onBack: () => void;
14
5
  width?: string;
6
+ children: React.ReactNode;
15
7
  }
8
+ export declare const DrawerItemsList: import("styled-components").StyledComponent<"ul", import("styled-components").DefaultTheme, {}, never>;
9
+ export declare const DrawerListItem: import("styled-components").StyledComponent<"li", import("styled-components").DefaultTheme, {
10
+ selected?: boolean | undefined;
11
+ }, never>;
12
+ export declare const DrawerIcon: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
13
+ export declare const DrawerLabelContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
14
+ export declare const DrawerItemLabel: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
15
+ export declare const DrawerItemMeta: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
16
16
  export declare const Drawer: React.FC<DrawerProps>;
17
- export {};
package/dist/types/components/icons/add-role.d.ts ADDED
@@ -0,0 +1,4 @@
1
+ import React from 'react';
2
+ import { IconProps } from './types';
3
+ declare const AddRoleIcon: React.FC<IconProps>;
4
+ export default AddRoleIcon;
package/dist/types/components/icons/index.d.ts CHANGED
@@ -20,6 +20,7 @@ export { default as AddedIcon } from './added';
20
20
  export { default as AddNewIcon } from './add-new';
21
21
  export { default as AddOutlineIcon } from './add-outline';
22
22
  export { default as AddIcon } from './add';
23
+ export { default as AddRoleIcon } from './add-role';
23
24
  export { default as ArrowDownIcon } from './arrow-down';
24
25
  export { default as ArrowDownCircleIcon } from './arrow-down-circle';
25
26
  export { default as ArrowLeftIcon } from './arrow-left';
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": "3.0.0",
4
+ "version": "3.0.1-LEAN-4579.0",
5
5
  "repository": "github:Atypon-OpenSource/manuscripts-style-guide",
6
6
  "license": "Apache-2.0",
7
7
  "main": "dist/cjs",