@activecollab/components/dist/esm/presentation/stackedCard/content/NoteCard.js

ActiveCollab Components

import _extends from "@babel/runtime/helpers/esm/extends";
import React from "react";
import styled from "styled-components";
import { CardProjectLine, EntityDots, Placeholder, StyledTitleBlock } from "./shared";
import { NoteIcon } from "../../../components/Icons";
import { SkeletonLoader } from "../../../components/Loaders";
import { StackedCardRow as StackRow } from "../../../components/StackedCard";
import { Body2 } from "../../../components/Typography";

/**
 * NoteCard — the new fifth type. A multi-line text card (Milanote-style): a
 * title row that owns the "…" menu, then padded body rows. The body clamps at a
 * line limit and fades out; auto-height, so the card grows with its content.
 * Inline editing lands in task 4/8 — this is the read view + placeholder.
 */

/* The body clamps at a max height and fades out with a mask so long notes end
   softly instead of hard-cropping. white-space: pre-line keeps authored breaks. */
const StyledNoteBody = styled(Body2).withConfig({
  displayName: "NoteCard__StyledNoteBody",
  componentId: "sc-e2a7no-0"
})(["display:block;max-height:132px;overflow:hidden;white-space:pre-line;-webkit-mask-image:linear-gradient(180deg,#000 72%,transparent);mask-image:linear-gradient(180deg,#000 72%,transparent);"]);
export const SAMPLE_NOTE = "Kickoff open questions before we lock the columns:\n\n\u2022 Who owns the migration off react-dnd, and does it block the canvas work or run in parallel?\n\u2022 Confirm the outline-placeholder choreography reads the same in a scrolled column.\n\u2022 Do we ship the note type in v1, or defer inline editing?";
export const NoteCard = _ref => {
  let _ref$title = _ref.title,
    title = _ref$title === void 0 ? "Kickoff notes" : _ref$title,
    _ref$body = _ref.body,
    body = _ref$body === void 0 ? SAMPLE_NOTE : _ref$body,
    _ref$showProjectName = _ref.showProjectName,
    showProjectName = _ref$showProjectName === void 0 ? false : _ref$showProjectName,
    _ref$projectName = _ref.projectName,
    projectName = _ref$projectName === void 0 ? "Marketing Site" : _ref$projectName;
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StackRow, {
    role: "title"
  }, /*#__PURE__*/React.createElement(StyledTitleBlock, null, showProjectName ? /*#__PURE__*/React.createElement(CardProjectLine, null, projectName) : null, /*#__PURE__*/React.createElement(Body2, {
    weight: "bold"
  }, title)), /*#__PURE__*/React.createElement(EntityDots, {
    "aria-label": "Note options"
  })), /*#__PURE__*/React.createElement(StackRow, {
    role: "custom",
    direction: "column"
  }, /*#__PURE__*/React.createElement(StyledNoteBody, {
    color: "secondary"
  }, body)));
};

/* ---- placeholder + skeleton ---- */

export const NotePlaceholder = props => /*#__PURE__*/React.createElement(Placeholder, _extends({
  icon: /*#__PURE__*/React.createElement(NoteIcon, null),
  label: "Write a note"
}, props));

/* Skeleton mirrors the note anatomy: a title line, then several body lines. */
export const NoteSkeleton = () => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StackRow, {
  role: "title"
}, /*#__PURE__*/React.createElement(SkeletonLoader, {
  style: {
    height: 14,
    width: "50%"
  }
})), /*#__PURE__*/React.createElement(StackRow, {
  role: "custom",
  direction: "column"
}, /*#__PURE__*/React.createElement(SkeletonLoader, {
  style: {
    height: 10,
    width: "100%"
  }
}), /*#__PURE__*/React.createElement(SkeletonLoader, {
  style: {
    height: 10,
    width: "96%"
  }
}), /*#__PURE__*/React.createElement(SkeletonLoader, {
  style: {
    height: 10,
    width: "88%"
  }
}), /*#__PURE__*/React.createElement(SkeletonLoader, {
  style: {
    height: 10,
    width: "70%"
  }
})));
//# sourceMappingURL=NoteCard.js.map