@manuscripts/style-guide 3.1.7 → 3.2.0

package/dist/cjs/components/ToggleHeader.js

@@ -0,0 +1,64 @@
+"use strict";
+/*!
+ * © 2025 Atypon Systems LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ToggleIcon = exports.ToggleHeader = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const icons_1 = require("./icons");
+const ToggleHeader = ({ title, isOpen, onToggle, }) => {
+    return (react_1.default.createElement(ToggleHeaderContainer, { onClick: (e) => {
+            e.stopPropagation();
+            onToggle();
+        } },
+        react_1.default.createElement("span", null, title),
+        react_1.default.createElement(exports.ToggleIcon, { isOpen: isOpen }, isOpen ? react_1.default.createElement(icons_1.TriangleExpandedIcon, null) : react_1.default.createElement(icons_1.TriangleCollapsedIcon, null))));
+};
+exports.ToggleHeader = ToggleHeader;
+const ToggleHeaderContainer = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 8px;
+  margin: 8px;
+  color: #353535;
+
+  cursor: pointer;
+
+  border-top: 1px solid #f2f2f2;
+
+  font-size: 16px;
+  font-weight: 700;
+  font-family: Lato, sans-serif;
+`;
+exports.ToggleIcon = styled_components_1.default.div `
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  border: 1px solid #e2e2e2;
+  text-align: center;
+  cursor: pointer;
+
+  svg {
+    width: 19px;
+    height: 19px;
+    transform: rotate(${(props) => (props.isOpen ? '0deg' : '270deg')});
+    transition: transform 0.2s ease; // Smooth transition for rotation
+  }
+`;

package/dist/cjs/index.js

@@ -32,7 +32,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.errorsDecoder = exports.useDeepCompareCallback = exports.useDeepCompareMemo = void 0;
+exports.errorsDecoder = exports.useDeepCompareCallback = exports.useDeepCompareMemo = exports.ToggleIcon = exports.ToggleHeader = void 0;
 __exportStar(require("./components/AlertMessage"), exports);
 __exportStar(require("./components/Button"), exports);
 __exportStar(require("./components/ContextMenu"), exports);
@@ -53,6 +53,9 @@ __exportStar(require("./components/TextField"), exports);
 __exportStar(require("./components/TextFieldContainer"), exports);
 __exportStar(require("./components/TextFieldError"), exports);
 __exportStar(require("./components/TextFieldGroupContainer"), exports);
+var ToggleHeader_1 = require("./components/ToggleHeader");
+Object.defineProperty(exports, "ToggleHeader", { enumerable: true, get: function () { return ToggleHeader_1.ToggleHeader; } });
+Object.defineProperty(exports, "ToggleIcon", { enumerable: true, get: function () { return ToggleHeader_1.ToggleIcon; } });
 __exportStar(require("./components/Tooltip"), exports);
 __exportStar(require("./components/icons"), exports);
 __exportStar(require("./components/Inspector"), exports);

package/dist/es/components/ToggleHeader.js

@@ -0,0 +1,57 @@
+/*!
+ * © 2025 Atypon Systems LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import React from 'react';
+import styled from 'styled-components';
+import { TriangleCollapsedIcon, TriangleExpandedIcon } from './icons';
+export const ToggleHeader = ({ title, isOpen, onToggle, }) => {
+    return (React.createElement(ToggleHeaderContainer, { onClick: (e) => {
+            e.stopPropagation();
+            onToggle();
+        } },
+        React.createElement("span", null, title),
+        React.createElement(ToggleIcon, { isOpen: isOpen }, isOpen ? React.createElement(TriangleExpandedIcon, null) : React.createElement(TriangleCollapsedIcon, null))));
+};
+const ToggleHeaderContainer = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 8px;
+  margin: 8px;
+  color: #353535;
+
+  cursor: pointer;
+
+  border-top: 1px solid #f2f2f2;
+
+  font-size: 16px;
+  font-weight: 700;
+  font-family: Lato, sans-serif;
+`;
+export const ToggleIcon = styled.div `
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  border: 1px solid #e2e2e2;
+  text-align: center;
+  cursor: pointer;
+
+  svg {
+    width: 19px;
+    height: 19px;
+    transform: rotate(${(props) => (props.isOpen ? '0deg' : '270deg')});
+    transition: transform 0.2s ease; // Smooth transition for rotation
+  }
+`;

package/dist/es/index.js

@@ -33,6 +33,7 @@ export * from './components/TextField';
 export * from './components/TextFieldContainer';
 export * from './components/TextFieldError';
 export * from './components/TextFieldGroupContainer';
+export { ToggleHeader, ToggleIcon } from './components/ToggleHeader';
 export * from './components/Tooltip';
 export * from './components/icons';
 export * from './components/Inspector';

package/dist/types/components/ToggleHeader.d.ts

@@ -0,0 +1,26 @@
+/*!
+ * © 2025 Atypon Systems LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import React from 'react';
+interface SectionHeaderProps {
+    title: string;
+    isOpen: boolean;
+    onToggle: () => void;
+}
+export declare const ToggleHeader: React.FC<SectionHeaderProps>;
+export declare const ToggleIcon: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    isOpen: boolean;
+}, never>;
+export {};

package/dist/types/index.d.ts

@@ -34,6 +34,7 @@ export * from './components/TextField';
 export * from './components/TextFieldContainer';
 export * from './components/TextFieldError';
 export * from './components/TextFieldGroupContainer';
+export { ToggleHeader, ToggleIcon } from './components/ToggleHeader';
 export * from './components/Tooltip';
 export * from './components/icons';
 export * from './components/Inspector';

package/package.json

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