@activecollab/components/dist/esm/presentation/shared/settings.js

ActiveCollab Components

/**
 * 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.
 */
import React from "react";
import styled from "styled-components";
import { MD, SM } from "./tokens";
import { Card } from "../../components/Card";
import { IconButton } from "../../components/IconButton";
import { ArrowLeftIcon } from "../../components/Icons";
import { Body2, Caption1, Header2, Title2 } from "../../components/Typography";

/* ------------------------------------------------------------------ */
/* Settings page header (mirrors PageHeader.jsx + BackButton.js)       */
/* ------------------------------------------------------------------ */

const StyledSettingsHeader = styled.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;}}"], SM, MD, MD, MD, SM);
export const SettingsHeader = _ref => {
  let title = _ref.title,
    backTitle = _ref.backTitle;
  return /*#__PURE__*/React.createElement(StyledSettingsHeader, null, /*#__PURE__*/React.createElement("div", {
    className: "header-left"
  }, backTitle ? /*#__PURE__*/React.createElement(IconButton, {
    variant: "text gray",
    className: "back-button"
  }, /*#__PURE__*/React.createElement(ArrowLeftIcon, null)) : null, /*#__PURE__*/React.createElement(Title2, {
    className: "page-title-desktop"
  }, title), /*#__PURE__*/React.createElement(Header2, {
    className: "page-title-mobile"
  }, title)), /*#__PURE__*/React.createElement("div", {
    className: "page-header-spacer"
  }));
};

/* ------------------------------------------------------------------ */
/* Shared layout pieces                                                */
/* ------------------------------------------------------------------ */

/** The page body, max-width 850px and left-aligned (mirrors the app Page). */
export const SettingsContent = styled.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. */
export const StyledSettingRow = styled(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;", ""], _ref2 => {
  let $clickable = _ref2.$clickable;
  return $clickable ? "\n    cursor: pointer;\n\n    &:hover {\n      background-color: var(--color-theme-200);\n    }\n  " : "";
});
export const RowText = styled.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;}"]);
export const SettingRow = _ref3 => {
  let 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.createElement(StyledSettingRow, {
    variant: "paper-2",
    $clickable: Boolean(onClick),
    onClick: onClick
  }, /*#__PURE__*/React.createElement(RowText, null, /*#__PURE__*/React.createElement(Body2, {
    className: "row-title"
  }, title), description ? /*#__PURE__*/React.createElement(Caption1, {
    className: wrapDescription ? "row-description-wrap" : "row-description",
    color: "tertiary"
  }, description) : null), control);
};
//# sourceMappingURL=settings.js.map