@manuscripts/style-guide 3.6.6 → 3.7.0

package/dist/cjs/components/ExpandableSection.js

@@ -16,7 +16,7 @@ const ExpandableSection = ({ title, children, defaultOpen = true, bordered = fal
             setOpen((prev) => !prev);
         }
     };
-    return ((0, jsx_runtime_1.jsxs)(Container, { bordered: bordered, children: [(0, jsx_runtime_1.jsxs)(Header, { onClick: () => setOpen((prev) => !prev), onKeyDown: handleKeyDown, tabIndex: 0, role: "button", "aria-expanded": open, children: [(0, jsx_runtime_1.jsx)(Title, { children: title }), (0, jsx_runtime_1.jsx)(ArrowIcon, { "$open": open })] }), (0, jsx_runtime_1.jsx)(ContentOuter, { "$open": open, inert: !open || undefined, children: (0, jsx_runtime_1.jsx)(ContentInner, { children: (0, jsx_runtime_1.jsx)("div", { children: children }) }) })] }));
+    return ((0, jsx_runtime_1.jsxs)(Container, { bordered: bordered, children: [(0, jsx_runtime_1.jsxs)(Header, { onClick: () => setOpen((prev) => !prev), onKeyDown: handleKeyDown, tabIndex: 0, role: "button", "aria-expanded": open, children: [(0, jsx_runtime_1.jsx)(Title, { children: title }), (0, jsx_runtime_1.jsx)(ArrowIcon, { "$open": open })] }), (0, jsx_runtime_1.jsx)(ContentOuter, { open: open, inert: !open || undefined, children: (0, jsx_runtime_1.jsx)(ContentInner, { children: (0, jsx_runtime_1.jsx)("div", { children: children }) }) })] }));
 };
 exports.ExpandableSection = ExpandableSection;
 const Container = styled_components_1.default.div `
@@ -43,12 +43,17 @@ const ArrowIcon = (0, styled_components_1.default)(icons_1.ArrowDownCircleIcon)
   transform: rotate(${(props) => (props.$open ? '180deg' : '0deg')});
 `;
 const ContentOuter = styled_components_1.default.div `
-  display: grid;
-  grid-template-rows: ${(props) => (props.$open ? '1fr' : '0fr')};
-  overflow: ${(props) => (props.$open ? 'visible' : 'hidden')};
-  transition:
-    grid-template-rows 0.25s ease,
-    overflow 0s ${(props) => (props.$open ? '0.25s' : '0s')} allow-discrete;
+  display: ${(props) => (props.open ? 'block' : 'none')};
+  // TODO: Uncomment this when we have a better solution for the overflow issue
+  // ISSUE: the width of the container is not limited
+  // - it is wider than the parent container 
+  // and the truncation is not working as expected
+  // display: grid;
+  // grid-template-rows: ${(props) => (props.open ? '1fr' : '0fr')};
+  // overflow: ${(props) => (props.open ? 'visible' : 'hidden')};
+  // transition:
+  //   grid-template-rows 0.25s ease,
+  //   overflow 0s ${(props) => (props.open ? '0.25s' : '0s')} allow-discrete;
 `;
 const ContentInner = styled_components_1.default.div `
   overflow: visible;

package/dist/cjs/components/icons/index.js

@@ -20,7 +20,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FilePdfIcon = exports.FileMainDocumentIcon = exports.FileLatexIcon = exports.FileImageIcon = exports.FileHeadshotGridIcon = 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.ChatIcon = exports.CameraIcon = exports.CalendarIcon = 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;
 exports.ToolbarBoldIcon = exports.TickIcon = exports.TaskStepDoneIcon = exports.SupplementsIcon = exports.SliderOnIcon = exports.SliderOffIcon = exports.SectionCategoryIcon = exports.SearchIcon = exports.ScrollIcon = exports.SaveStatusErrorIcon = exports.SaveStatusSavingIcon = exports.SaveStatusSavedIcon = exports.SaveStatusOfflineIcon = exports.RoleReadingIcon = exports.RoleAnnotatingIcon = exports.PlusIcon = exports.ORCIDIcon = 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.LeadingHalfLeftIcon = exports.LeadingWallpaperIcon = exports.LeadingLargeFloatIcon = exports.LeadingSmallFloatIcon = exports.LeadingHeroImageIcon = exports.LogoutIcon = exports.LockIcon = exports.LinkIcon = exports.InspectorPluginIcon = exports.InfoCircleIcon = exports.ImageRightIcon = exports.ImageDefaultIcon = exports.ImageLeftIcon = exports.HelpIcon = exports.GlobeIcon = exports.HandleOutlineIcon = exports.HandleInspectorIcon = exports.FileVideoIcon = exports.FileUnknownIcon = exports.FileTableIcon = void 0;
-exports.PencilIcon = exports.NotificationsIcon = exports.EyeIcon = exports.XIcon = exports.DangerIcon = exports.AddInstitutionIcon = exports.AddUserIcon = exports.ProfileIcon = exports.CrclTickAnimation = exports.VerticalEllipsisIcon = exports.UploadIcon = exports.TriangleExpandedIcon = exports.TriangleCollapsedIcon = exports.TranslateIcon = exports.ToolbarUnindentIcon = exports.ToolbarIndentIcon = exports.ToolbarUnorderedListIcon = exports.ToolbarUnderlineIcon = exports.ToolbarTableIcon = exports.ToolbarSymbolIcon = exports.ToolbarSuperscriptIcon = exports.ToolbarSubscriptIcon = exports.ToolbarSpecialCharactersIcon = exports.ToolbarOrderedListIcon = exports.ToolbarItalicIcon = exports.ToolbarFigureIcon = exports.ToolbarEquationIcon = exports.ToolbarCodeIcon = exports.ToolbarCitationIcon = exports.ToolbarBoxedTextIcon = void 0;
+exports.WebLinkIcon = exports.PencilIcon = exports.NotificationsIcon = exports.EyeIcon = exports.XIcon = exports.DangerIcon = exports.AddInstitutionIcon = exports.AddUserIcon = exports.ProfileIcon = exports.CrclTickAnimation = exports.VerticalEllipsisIcon = exports.UploadIcon = exports.TriangleExpandedIcon = exports.TriangleCollapsedIcon = exports.TranslateIcon = exports.ToolbarUnindentIcon = exports.ToolbarIndentIcon = exports.ToolbarUnorderedListIcon = exports.ToolbarUnderlineIcon = exports.ToolbarTableIcon = exports.ToolbarSymbolIcon = exports.ToolbarSuperscriptIcon = exports.ToolbarSubscriptIcon = exports.ToolbarSpecialCharactersIcon = exports.ToolbarOrderedListIcon = exports.ToolbarItalicIcon = exports.ToolbarFigureIcon = exports.ToolbarEquationIcon = exports.ToolbarCodeIcon = exports.ToolbarCitationIcon = exports.ToolbarBoxedTextIcon = void 0;
 var add_author_1 = require("./add-author");
 Object.defineProperty(exports, "AddAuthorIcon", { enumerable: true, get: function () { return __importDefault(add_author_1).default; } });
 var add_comment_1 = require("./add-comment");
@@ -281,3 +281,5 @@ var notifications_1 = require("./notifications");
 Object.defineProperty(exports, "NotificationsIcon", { enumerable: true, get: function () { return __importDefault(notifications_1).default; } });
 var pencil_icon_1 = require("./pencil-icon");
 Object.defineProperty(exports, "PencilIcon", { enumerable: true, get: function () { return __importDefault(pencil_icon_1).default; } });
+var weblink_1 = require("./weblink");
+Object.defineProperty(exports, "WebLinkIcon", { enumerable: true, get: function () { return __importDefault(weblink_1).default; } });

package/dist/cjs/components/icons/weblink.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const WebLinkIcon = (props) => ((0, jsx_runtime_1.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", ...props, children: [(0, jsx_runtime_1.jsxs)("g", { clipPath: "url(#clip0_24947_17865)", children: [(0, jsx_runtime_1.jsx)("path", { d: "M6.63292 12.1949L4.74758 14.0803C3.96595 14.8619 2.70017 14.8619 1.9192 14.0804C1.13808 13.2993 1.13808 12.0334 1.91905 11.2524L5.69039 7.48109C6.47136 6.70009 7.73727 6.70009 8.51823 7.48109C8.77858 7.74143 9.2007 7.74143 9.46105 7.48109C9.72139 7.22075 9.72139 6.79862 9.46105 6.53828C8.15936 5.23659 6.04927 5.23659 4.74758 6.53828L0.976266 10.3096C-0.325422 11.6113 -0.325422 13.7214 0.976266 15.0231C2.2778 16.3254 4.38805 16.3254 5.69042 15.0231L7.57577 13.1377C7.83611 12.8774 7.83611 12.4552 7.57577 12.1949C7.31542 11.9346 6.89327 11.9346 6.63292 12.1949Z", fill: "#353535" }), (0, jsx_runtime_1.jsx)("path", { d: "M15.023 0.976266C13.7213 -0.325422 11.6106 -0.325422 10.3089 0.976266L8.04688 3.23827C7.78654 3.49861 7.78654 3.92073 8.04688 4.18108C8.30722 4.44142 8.72935 4.44142 8.98969 4.18108L11.2517 1.91908C12.0327 1.13808 13.2992 1.13808 14.0802 1.91908C14.8612 2.70005 14.8612 3.96595 14.0802 4.74692L9.93222 8.89495C9.15122 9.67595 7.88535 9.67595 7.10438 8.89495C6.84404 8.63461 6.42191 8.63461 6.16157 8.89495C5.90122 9.1553 5.90122 9.57742 6.16157 9.83777C7.46325 11.1395 9.57335 11.1395 10.875 9.83777L15.023 5.68977C16.3247 4.38808 16.3247 2.27795 15.023 0.976266Z", fill: "#353535" })] }), (0, jsx_runtime_1.jsx)("defs", { children: (0, jsx_runtime_1.jsx)("clipPath", { id: "clip0_24947_17865", children: (0, jsx_runtime_1.jsx)("rect", { width: "16", height: "16", fill: "353535" }) }) })] }));
+exports.default = WebLinkIcon;

package/dist/es/components/ExpandableSection.js

@@ -10,7 +10,7 @@ export const ExpandableSection = ({ title, children, defaultOpen = true, bordere
             setOpen((prev) => !prev);
         }
     };
-    return (_jsxs(Container, { bordered: bordered, children: [_jsxs(Header, { onClick: () => setOpen((prev) => !prev), onKeyDown: handleKeyDown, tabIndex: 0, role: "button", "aria-expanded": open, children: [_jsx(Title, { children: title }), _jsx(ArrowIcon, { "$open": open })] }), _jsx(ContentOuter, { "$open": open, inert: !open || undefined, children: _jsx(ContentInner, { children: _jsx("div", { children: children }) }) })] }));
+    return (_jsxs(Container, { bordered: bordered, children: [_jsxs(Header, { onClick: () => setOpen((prev) => !prev), onKeyDown: handleKeyDown, tabIndex: 0, role: "button", "aria-expanded": open, children: [_jsx(Title, { children: title }), _jsx(ArrowIcon, { "$open": open })] }), _jsx(ContentOuter, { open: open, inert: !open || undefined, children: _jsx(ContentInner, { children: _jsx("div", { children: children }) }) })] }));
 };
 const Container = styled.div `
   border: ${(props) => props.bordered
@@ -36,12 +36,17 @@ const ArrowIcon = styled(ArrowDownCircleIcon) `
   transform: rotate(${(props) => (props.$open ? '180deg' : '0deg')});
 `;
 const ContentOuter = styled.div `
-  display: grid;
-  grid-template-rows: ${(props) => (props.$open ? '1fr' : '0fr')};
-  overflow: ${(props) => (props.$open ? 'visible' : 'hidden')};
-  transition:
-    grid-template-rows 0.25s ease,
-    overflow 0s ${(props) => (props.$open ? '0.25s' : '0s')} allow-discrete;
+  display: ${(props) => (props.open ? 'block' : 'none')};
+  // TODO: Uncomment this when we have a better solution for the overflow issue
+  // ISSUE: the width of the container is not limited
+  // - it is wider than the parent container 
+  // and the truncation is not working as expected
+  // display: grid;
+  // grid-template-rows: ${(props) => (props.open ? '1fr' : '0fr')};
+  // overflow: ${(props) => (props.open ? 'visible' : 'hidden')};
+  // transition:
+  //   grid-template-rows 0.25s ease,
+  //   overflow 0s ${(props) => (props.open ? '0.25s' : '0s')} allow-discrete;
 `;
 const ContentInner = styled.div `
   overflow: visible;

package/dist/es/components/icons/index.js

@@ -143,3 +143,4 @@ export { default as XIcon } from './x';
 export { default as EyeIcon } from './eye-icon';
 export { default as NotificationsIcon } from './notifications';
 export { default as PencilIcon } from './pencil-icon';
+export { default as WebLinkIcon } from './weblink';

package/dist/es/components/icons/weblink.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const WebLinkIcon = (props) => (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", ...props, children: [_jsxs("g", { clipPath: "url(#clip0_24947_17865)", children: [_jsx("path", { d: "M6.63292 12.1949L4.74758 14.0803C3.96595 14.8619 2.70017 14.8619 1.9192 14.0804C1.13808 13.2993 1.13808 12.0334 1.91905 11.2524L5.69039 7.48109C6.47136 6.70009 7.73727 6.70009 8.51823 7.48109C8.77858 7.74143 9.2007 7.74143 9.46105 7.48109C9.72139 7.22075 9.72139 6.79862 9.46105 6.53828C8.15936 5.23659 6.04927 5.23659 4.74758 6.53828L0.976266 10.3096C-0.325422 11.6113 -0.325422 13.7214 0.976266 15.0231C2.2778 16.3254 4.38805 16.3254 5.69042 15.0231L7.57577 13.1377C7.83611 12.8774 7.83611 12.4552 7.57577 12.1949C7.31542 11.9346 6.89327 11.9346 6.63292 12.1949Z", fill: "#353535" }), _jsx("path", { d: "M15.023 0.976266C13.7213 -0.325422 11.6106 -0.325422 10.3089 0.976266L8.04688 3.23827C7.78654 3.49861 7.78654 3.92073 8.04688 4.18108C8.30722 4.44142 8.72935 4.44142 8.98969 4.18108L11.2517 1.91908C12.0327 1.13808 13.2992 1.13808 14.0802 1.91908C14.8612 2.70005 14.8612 3.96595 14.0802 4.74692L9.93222 8.89495C9.15122 9.67595 7.88535 9.67595 7.10438 8.89495C6.84404 8.63461 6.42191 8.63461 6.16157 8.89495C5.90122 9.1553 5.90122 9.57742 6.16157 9.83777C7.46325 11.1395 9.57335 11.1395 10.875 9.83777L15.023 5.68977C16.3247 4.38808 16.3247 2.27795 15.023 0.976266Z", fill: "#353535" })] }), _jsx("defs", { children: _jsx("clipPath", { id: "clip0_24947_17865", children: _jsx("rect", { width: "16", height: "16", fill: "353535" }) }) })] }));
+export default WebLinkIcon;

package/dist/types/components/icons/index.d.ts

@@ -143,3 +143,4 @@ export { default as XIcon } from './x';
 export { default as EyeIcon } from './eye-icon';
 export { default as NotificationsIcon } from './notifications';
 export { default as PencilIcon } from './pencil-icon';
+export { default as WebLinkIcon } from './weblink';

package/dist/types/components/icons/weblink.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { IconProps } from './types';
+declare const WebLinkIcon: React.FC<IconProps>;
+export default WebLinkIcon;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@manuscripts/style-guide",
   "description": "Shared components for Manuscripts applications",
-  "version": "3.6.6",
+  "version": "3.7.0",
   "repository": "github:Atypon-OpenSource/manuscripts-style-guide",
   "license": "Apache-2.0",
   "main": "dist/cjs",