@activecollab/components
Version:
ActiveCollab Components
91 lines (85 loc) • 5.71 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.StyledSettingRow = exports.SettingsHeader = exports.SettingsContent = exports.SettingRow = exports.RowText = void 0;
var _react = _interopRequireDefault(require("react"));
var _styledComponents = _interopRequireDefault(require("styled-components"));
var _tokens = require("./tokens");
var _Card = require("../../components/Card");
var _IconButton = require("../../components/IconButton");
var _Icons = require("../../components/Icons");
var _Typography = require("../../components/Typography");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
/**
* Shared building blocks for the System Settings presentation stories
* (`Presentation/System Settings/*`). The settings page header, the max-width
* body column and the "row" card (title + description on the left, a control on
* the right) are defined once here and reused by the Index, General and
* Security stories so the chrome stays identical and in one place.
*
* Mirrors the app: PageHeader.jsx + BackButton.js (header) and the repeated
* `Card variant="paper-2"` row pattern from the SystemSettings pages.
*/
/* ------------------------------------------------------------------ */
/* Settings page header (mirrors PageHeader.jsx + BackButton.js) */
/* ------------------------------------------------------------------ */
var StyledSettingsHeader = _styledComponents.default.div.withConfig({
displayName: "settings__StyledSettingsHeader",
componentId: "sc-1el9eq3-0"
})(["display:flex;align-items:center;justify-content:space-between;margin:12px 0;width:100%;height:40px;flex-shrink:0;.header-left{display:flex;align-items:center;width:100%;max-width:100%;@media (min-width:", "){min-width:0;}}.back-button{flex-shrink:0;margin-right:4px;@media (min-width:", "){margin-right:8px;}}.page-title-desktop{display:none;margin-right:8px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;@media (min-width:", "){display:block;}}.page-title-mobile{display:block;margin-right:8px;font-weight:300;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;@media (min-width:", "){display:none;}}.page-header-spacer{display:none;height:100%;width:208px;flex-shrink:0;@media (min-width:", "){display:flex;}}"], _tokens.SM, _tokens.MD, _tokens.MD, _tokens.MD, _tokens.SM);
var SettingsHeader = exports.SettingsHeader = function SettingsHeader(_ref) {
var title = _ref.title,
backTitle = _ref.backTitle;
return /*#__PURE__*/_react.default.createElement(StyledSettingsHeader, null, /*#__PURE__*/_react.default.createElement("div", {
className: "header-left"
}, backTitle ? /*#__PURE__*/_react.default.createElement(_IconButton.IconButton, {
variant: "text gray",
className: "back-button"
}, /*#__PURE__*/_react.default.createElement(_Icons.ArrowLeftIcon, null)) : null, /*#__PURE__*/_react.default.createElement(_Typography.Title2, {
className: "page-title-desktop"
}, title), /*#__PURE__*/_react.default.createElement(_Typography.Header2, {
className: "page-title-mobile"
}, title)), /*#__PURE__*/_react.default.createElement("div", {
className: "page-header-spacer"
}));
};
/* ------------------------------------------------------------------ */
/* Shared layout pieces */
/* ------------------------------------------------------------------ */
/** The page body, max-width 850px and left-aligned (mirrors the app Page). */
var SettingsContent = exports.SettingsContent = _styledComponents.default.div.withConfig({
displayName: "settings__SettingsContent",
componentId: "sc-1el9eq3-1"
})(["display:flex;flex-direction:column;flex-grow:1;width:100%;max-width:850px;"]);
/** A settings row card: title + description on the left, control on the right. */
var StyledSettingRow = exports.StyledSettingRow = (0, _styledComponents.default)(_Card.Card).withConfig({
displayName: "settings__StyledSettingRow",
componentId: "sc-1el9eq3-2"
})(["box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;min-height:68px;padding:12px 16px 12px 20px;margin-bottom:4px;", ""], function (_ref2) {
var $clickable = _ref2.$clickable;
return $clickable ? "\n cursor: pointer;\n\n &:hover {\n background-color: var(--color-theme-200);\n }\n " : "";
});
var RowText = exports.RowText = _styledComponents.default.div.withConfig({
displayName: "settings__RowText",
componentId: "sc-1el9eq3-3"
})(["display:flex;flex-direction:column;flex:1 1 0%;min-width:0;padding-right:12px;.row-title{margin-bottom:2px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}.row-description{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}.row-description-wrap{white-space:normal;}"]);
var SettingRow = exports.SettingRow = function SettingRow(_ref3) {
var title = _ref3.title,
description = _ref3.description,
control = _ref3.control,
onClick = _ref3.onClick,
_ref3$wrapDescription = _ref3.wrapDescription,
wrapDescription = _ref3$wrapDescription === void 0 ? false : _ref3$wrapDescription;
return /*#__PURE__*/_react.default.createElement(StyledSettingRow, {
variant: "paper-2",
$clickable: Boolean(onClick),
onClick: onClick
}, /*#__PURE__*/_react.default.createElement(RowText, null, /*#__PURE__*/_react.default.createElement(_Typography.Body2, {
className: "row-title"
}, title), description ? /*#__PURE__*/_react.default.createElement(_Typography.Caption1, {
className: wrapDescription ? "row-description-wrap" : "row-description",
color: "tertiary"
}, description) : null), control);
};
//# sourceMappingURL=settings.js.map