@luscii-healthtech/web-ui 13.2.0 → 15.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,2 @@
1
+ import React from "react";
2
+ export declare const Actions: React.FC<React.ComponentPropsWithoutRef<"div">>;
@@ -1,12 +1,57 @@
1
1
  import React from "react";
2
- export type CardProps = {
2
+ import { TitleProps } from "../Title/Title";
3
+ type TitleAndMaybeActions = {
3
4
  title: string;
4
- children: React.ReactNode;
5
- dataTestId?: string;
5
+ /**
6
+ * Spaces and positions the action components correctly in relation to
7
+ * the styling of the card.
8
+ *
9
+ * @usage
10
+ * ```tsx
11
+ * <Card
12
+ * actions={
13
+ * <Card.Actions>
14
+ * <PrimaryButton />
15
+ * <SecondaryButton />
16
+ * </Card.Actions>
17
+ * }
18
+ * />
19
+ * ```
20
+ */
21
+ actions: React.ReactNode;
22
+ } | {
23
+ title: undefined;
24
+ actions: undefined;
25
+ } | {
26
+ title?: string;
27
+ /**
28
+ * The `actions` prop can only be used in conjunction with the `title` prop.
29
+ */
30
+ actions?: never;
6
31
  };
7
- /**
8
- * Card component that centralizes itself inside a container.
9
- * Specific variant made with ui-w-135 to suffice the use case needed,
10
- * more variants can be added.
11
- */
12
- export declare const Card: React.FC<CardProps>;
32
+ export type Props<C extends React.ElementType> = React.ComponentPropsWithoutRef<C> & {
33
+ as?: C;
34
+ children: React.ReactNode;
35
+ /**
36
+ * Whether or not to add the default padding to the card. Set this
37
+ * to `false` if you want to render something full width inside of the
38
+ * card, like an image or a list. You have access to the `Card.Padding`
39
+ * subcomponent to then add back the default padding wherever needed.
40
+ *
41
+ * @default true
42
+ */
43
+ padding?: boolean;
44
+ } & TitleAndMaybeActions;
45
+ export declare function Card<C extends React.ElementType = "div">(props: Props<C>): React.JSX.Element;
46
+ export declare namespace Card {
47
+ var Title: (props: TitleProps) => React.JSX.Element;
48
+ var TopBar: typeof import("./TopBar").TopBar;
49
+ var Padding: React.FC<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
50
+ children?: React.ReactNode;
51
+ }>;
52
+ var Section: React.FC<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
53
+ children?: React.ReactNode;
54
+ }>;
55
+ var Actions: React.FC<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">>;
56
+ }
57
+ export {};
@@ -0,0 +1,6 @@
1
+ import React from "react";
2
+ type Props = React.ComponentPropsWithoutRef<"div"> & {
3
+ children?: React.ReactNode;
4
+ };
5
+ export declare const Padding: React.FC<Props>;
6
+ export {};
@@ -0,0 +1,6 @@
1
+ import React from "react";
2
+ type Props = React.ComponentPropsWithoutRef<"div"> & {
3
+ children?: React.ReactNode;
4
+ };
5
+ export declare const Section: React.FC<Props>;
6
+ export {};
@@ -0,0 +1,9 @@
1
+ import React from "react";
2
+ type Props = React.ComponentPropsWithoutRef<"div"> & {
3
+ children?: React.ReactNode;
4
+ };
5
+ export declare function TopBar(props: Props): React.JSX.Element;
6
+ export declare namespace TopBar {
7
+ var Actions: React.FC<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">>;
8
+ }
9
+ export {};
@@ -4,7 +4,43 @@ import "react-quill/dist/quill.snow.css";
4
4
  import "./TextEditor.scss";
5
5
  type TextEditorProps = Pick<ReactQuillProps, "defaultValue" | "placeholder"> & {
6
6
  onValueChange: ReactQuillProps["onChange"];
7
+ /**
8
+ * Which formats to allow in the editor, like "bold" and "italic".
9
+ *
10
+ * This is different from the buttons that are shown in the toolbar,
11
+ * because a user could paste in text that has bold formatting without
12
+ * having a bold button in the toolbar. This prop determines if that is
13
+ * allowed or not.
14
+ *
15
+ * @default
16
+ *
17
+ * ["bold", "italic", "underline", "strike", "list", "link"]
18
+ *
19
+ * @example
20
+ *
21
+ * ["bold", "italic, "color", "code"]
22
+ *
23
+ * See: https://github.com/zenoamaro/react-quill#custom-formats
24
+ */
7
25
  formats: TextEditorFormat[];
26
+ /**
27
+ * Which buttons to show in the toolbar, like "bold" and "italic".
28
+ *
29
+ * @default
30
+ * [
31
+ * ["bold", "italic", "underline", "strike"],
32
+ * [{ list: "ordered" }, { list: "bullet" }],
33
+ * ["link"],
34
+ * ]
35
+ *
36
+ * @example
37
+ *
38
+ * [
39
+ * ["bold", "italic", "underline", "strike"],
40
+ * ["link", "video"],
41
+ * ]
42
+ * See: https://github.com/zenoamaro/react-quill#custom-toolbar
43
+ */
8
44
  toolbar: TextEditorToolbarOption[][];
9
45
  };
10
46
  type TextEditorToolbarOption = "bold" | "italic" | "underline" | "strike" | "link" | "video" | {
package/dist/index.d.ts CHANGED
@@ -75,7 +75,7 @@ export type { IconProps, IconKey, } from "./components/Icons/types/IconProps.typ
75
75
  export * from "./components/Icons";
76
76
  export { Divider } from "./components/Divider/Divider";
77
77
  export { FullPageModal } from "./components/Modal/FullPageModal";
78
- export { Card, type CardProps } from "./components/Card/Card";
78
+ export { Card, type Props as CardProps } from "./components/Card/Card";
79
79
  export { Dropzone, DropzoneProps } from "./components/Dropzone";
80
80
  export { FilterBar, FilterBarUtils } from "./components/FilterBar";
81
81
  export { default as DragHandle, DragHandleProps, } from "./components/DragHandle";
@@ -4368,7 +4368,7 @@ RadioGroup.propTypes = {
4368
4368
  var css_248z$4 = "/**\n * --- DEPRECATED ---\n * DON'T USE ANYTHING FROM THIS FILE IN FUTURE CHANGES. WE SHOULD BE\n * USING TAILWIND CLASSES DIRECTLY IN OUR COMPONENTS.\n */\n.cweb-section .cweb-button:last-of-type {\n margin-right: 24px;\n}\n.cweb-section .cweb-button:not(:last-of-type) {\n margin-right: 8px;\n}\n.cweb-section .cweb-button.add-button, .cweb-section .cweb-button.edit-button, .cweb-section .cweb-button.delete-button {\n margin-left: auto;\n width: 32px;\n height: 32px;\n}\n.cweb-section .cweb-button.add-button {\n background: url(\"data:image/svg+xml,%3Csvg width%3D%2244%22 height%3D%2244%22 viewBox%3D%220 0 44 44%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Ccircle cx%3D%2222%22 cy%3D%2222%22 r%3D%2222%22 fill%3D%22white%22%2F%3E%3Crect x%3D%220.5%22 y%3D%220.5%22 width%3D%2243%22 height%3D%2243%22 rx%3D%2221.5%22 stroke%3D%22%23009FE3%22%2F%3E%3Cpath fill-rule%3D%22evenodd%22 clip-rule%3D%22evenodd%22 d%3D%22M22 32C23.1046 32 24 31.1046 24 30L24 24H30C31.1046 24 32 23.1046 32 22C32 20.8954 31.1046 20 30 20H24L24 14C24 12.8954 23.1046 12 22 12C20.8954 12 20 12.8954 20 14L20 20H14C12.8954 20 12 20.8954 12 22C12 23.1046 12.8954 24 14 24H20L20 30C20 31.1046 20.8954 32 22 32Z%22 fill%3D%22%23009FE3%22%2F%3E%3C%2Fsvg%3E\") no-repeat center;\n background-size: contain;\n}\n.cweb-section .cweb-button.add-button:hover, .cweb-section .cweb-button.add-button:active, .cweb-section .cweb-button.add-button:focus {\n background: url(\"data:image/svg+xml,%3Csvg width%3D%2244%22 height%3D%2244%22 viewBox%3D%220 0 44 44%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect x%3D%220.5%22 y%3D%220.5%22 width%3D%2243%22 height%3D%2243%22 rx%3D%2221.5%22 stroke%3D%22%230A78B2%22%2F%3E%3Cpath fill-rule%3D%22evenodd%22 clip-rule%3D%22evenodd%22 d%3D%22M21 12C19.8954 12 19 12.8954 19 14V19L14 19C12.8954 19 12 19.8954 12 21V23C12 24.1046 12.8954 25 14 25H19V30C19 31.1046 19.8954 32 21 32H23C24.1046 32 25 31.1046 25 30V25H30C31.1046 25 32 24.1046 32 23V21C32 19.8954 31.1046 19 30 19L25 19V14C25 12.8954 24.1046 12 23 12H21Z%22 fill%3D%22%23007BBB%22%2F%3E%3C%2Fsvg%3E\") no-repeat center;\n background-size: contain;\n}\n.cweb-section .cweb-button.edit-button {\n background: url(\"data:image/svg+xml,%3Csvg width%3D%2244%22 height%3D%2244%22 viewBox%3D%220 0 44 44%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect x%3D%220.5%22 y%3D%220.5%22 width%3D%2243%22 height%3D%2243%22 rx%3D%2221.5%22 stroke%3D%22%23009FE3%22%2F%3E%3Cpath d%3D%22M13.5643 27.1001C13.4169 26.9527 13.1433 27.0159 13.1012 27.2266L12.0065 31.6507C11.9644 31.8614 12.1328 32.051 12.3433 31.9878L16.7851 30.9134C16.9956 30.8712 17.0799 30.5973 16.9114 30.4499L13.5643 27.1001Z%22 fill%3D%22%23009FE3%22%2F%3E%3Cpath d%3D%22M26.2161 14.1222C26.1109 14.0169 25.9214 14.0169 25.8161 14.1222L14.4484 25.4987C14.3432 25.604 14.3432 25.7936 14.4484 25.8989L18.1114 29.5647C18.2166 29.67 18.4061 29.67 18.5113 29.5647L29.879 18.1882C29.9843 18.0829 29.9843 17.8933 29.879 17.788L26.2161 14.1222Z%22 fill%3D%22%23009FE3%22%2F%3E%3Cpath d%3D%22M31.1633 12.8374C30.0475 11.7209 28.2161 11.7209 27.1004 12.8374C27.0583 12.8796 27.0583 12.9217 27.1004 12.9638L31.037 16.9035C31.0791 16.9456 31.1212 16.9456 31.1633 16.9035C32.279 15.7869 32.279 13.954 31.1633 12.8374Z%22 fill%3D%22%23009FE3%22%2F%3E%3C%2Fsvg%3E\") no-repeat center;\n background-size: contain;\n}\n.cweb-section .cweb-button.edit-button:hover, .cweb-section .cweb-button.edit-button:active, .cweb-section .cweb-button.edit-button:focus {\n background: url(\"data:image/svg+xml,%3Csvg width%3D%2244%22 height%3D%2244%22 viewBox%3D%220 0 44 44%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect x%3D%220.5%22 y%3D%220.5%22 width%3D%2243%22 height%3D%2243%22 rx%3D%2221.5%22 stroke%3D%22%23007BBB%22%2F%3E%3Cpath d%3D%22M13.5643 27.1001C13.4169 26.9527 13.1433 27.0159 13.1012 27.2266L12.0065 31.6507C11.9644 31.8614 12.1328 32.051 12.3433 31.9878L16.7851 30.9134C16.9956 30.8712 17.0799 30.5973 16.9114 30.4499L13.5643 27.1001Z%22 fill%3D%22%230A78B2%22%2F%3E%3Cpath d%3D%22M26.2161 14.1222C26.1109 14.0169 25.9214 14.0169 25.8161 14.1222L14.4484 25.4987C14.3432 25.604 14.3432 25.7936 14.4484 25.8989L18.1114 29.5647C18.2166 29.67 18.4061 29.67 18.5113 29.5647L29.879 18.1882C29.9843 18.0829 29.9843 17.8933 29.879 17.788L26.2161 14.1222Z%22 fill%3D%22%230A78B2%22%2F%3E%3Cpath d%3D%22M31.1633 12.8374C30.0475 11.7209 28.2161 11.7209 27.1004 12.8374C27.0583 12.8796 27.0583 12.9217 27.1004 12.9638L31.037 16.9035C31.0791 16.9456 31.1212 16.9456 31.1633 16.9035C32.279 15.7869 32.279 13.954 31.1633 12.8374Z%22 fill%3D%22%230A78B2%22%2F%3E%3C%2Fsvg%3E\") no-repeat center;\n background-size: contain;\n}\n.cweb-section .cweb-button.delete-button {\n background: url(\"data:image/svg+xml,%3Csvg width%3D%2244%22 height%3D%2244%22 viewBox%3D%220 0 44 44%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect x%3D%220.5%22 y%3D%220.5%22 width%3D%2243%22 height%3D%2243%22 rx%3D%2221.5%22 stroke%3D%22%23FF6266%22%2F%3E%3Cpath fill-rule%3D%22evenodd%22 clip-rule%3D%22evenodd%22 d%3D%22M13 12C12.4477 12 12 12.4477 12 13C12 13.5523 12.4477 14 13 14H31C31.5523 14 32 13.5523 32 13C32 12.4477 31.5523 12 31 12H13ZM14 16H30V30C30 31.1046 29.1046 32 28 32H16C14.8954 32 14 31.1046 14 30V16ZM17 18H19V30H17V18ZM21 18H23V30H21V18ZM27 18H25V30H27V18Z%22 fill%3D%22%23FF6266%22%2F%3E%3C%2Fsvg%3E\") no-repeat center;\n background-size: contain;\n}\n.cweb-section .cweb-button.delete-button:hover, .cweb-section .cweb-button.delete-button:active, .cweb-section .cweb-button.delete-button:focus {\n background: url(\"data:image/svg+xml,%3Csvg width%3D%2244%22 height%3D%2244%22 viewBox%3D%220 0 44 44%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath fill-rule%3D%22evenodd%22 clip-rule%3D%22evenodd%22 d%3D%22M13 12C12.4477 12 12 12.4477 12 13C12 13.5523 12.4477 14 13 14H31C31.5523 14 32 13.5523 32 13C32 12.4477 31.5523 12 31 12H13ZM14 16H30V30C30 31.1046 29.1046 32 28 32H16C14.8954 32 14 31.1046 14 30V16ZM17 18H19V30H17V18ZM21 18H23V30H21V18ZM27 18H25V30H27V18Z%22 fill%3D%22%23FC494E%22%2F%3E%3Crect x%3D%220.5%22 y%3D%220.5%22 width%3D%2243%22 height%3D%2243%22 rx%3D%2221.5%22 stroke%3D%22%23FC494E%22%2F%3E%3C%2Fsvg%3E\") no-repeat center;\n background-size: contain;\n}\n.cweb-section > .cweb-section-header {\n display: flex;\n justify-content: space-between;\n flex-direction: row;\n align-items: center;\n border-bottom: 1px solid #eeeeee;\n width: 100%;\n padding: 18px 24px;\n}\n.cweb-section > .cweb-section-footer {\n display: flex;\n justify-content: space-between;\n flex-direction: row;\n align-items: center;\n border-top: 1px solid #eeeeee;\n width: 100%;\n padding: 1rem 24px 1rem 24px;\n}\n.cweb-section > .cweb-section-footer img {\n width: 32px;\n height: 32px;\n}";
4369
4369
  styleInject(css_248z$4);
4370
4370
 
4371
- function Section(_a) {
4371
+ function Section$1(_a) {
4372
4372
  var { title, buttons, footer, children, headerAside, className, isLoading = false, loadingIndicatorProps } = _a, restProps = __rest(_a, ["title", "buttons", "footer", "children", "headerAside", "className", "isLoading", "loadingIndicatorProps"]);
4373
4373
  return React__namespace.default.createElement(
4374
4374
  "div",
@@ -4848,7 +4848,7 @@ styleInject(css_248z);
4848
4848
  const TextEditor = ({ defaultValue, onValueChange, placeholder, toolbar = [
4849
4849
  ["bold", "italic", "underline", "strike"],
4850
4850
  [{ list: "ordered" }, { list: "bullet" }],
4851
- ["link", "video"]
4851
+ ["link"]
4852
4852
  ], formats = ["bold", "italic", "underline", "strike", "list", "link"] }) => {
4853
4853
  const quillRef = React.useRef(null);
4854
4854
  React.useEffect(() => {
@@ -4977,7 +4977,7 @@ function ViewItem(_a) {
4977
4977
  );
4978
4978
  }
4979
4979
 
4980
- const Padding = (props) => {
4980
+ const Padding$1 = (props) => {
4981
4981
  return React__namespace.default.createElement("div", { className: classNames__default.default("ui-p-4", props.className) }, props.children);
4982
4982
  };
4983
4983
  const Item = (props) => {
@@ -5028,7 +5028,7 @@ const Indent = ({ children }) => {
5028
5028
  }));
5029
5029
  };
5030
5030
  UnorderedList.Item = Item;
5031
- UnorderedList.Padding = Padding;
5031
+ UnorderedList.Padding = Padding$1;
5032
5032
  UnorderedList.Indent = Indent;
5033
5033
 
5034
5034
  const FormFieldErrorMessages = (props) => {
@@ -5270,15 +5270,93 @@ const FullPageModal = ({ children, dataTestId, isOpen, onCloseClick, primaryButt
5270
5270
  };
5271
5271
  FullPageModal.Actions = FullPageModalActions;
5272
5272
 
5273
- const Card = ({ title, children, dataTestId }) => {
5274
- return React__namespace.default.createElement(
5275
- "div",
5276
- { "data-test-id": dataTestId, className: "ui-mx-auto ui-flex ui-w-135 ui-flex-col ui-rounded-lg ui-bg-white ui-p-6" },
5277
- React__namespace.default.createElement(Title, { className: "ui-mb-6", type: "sm", text: title }),
5278
- children
5273
+ const Actions = (props) => {
5274
+ const { children, className } = props, rest = __rest(props, ["children", "className"]);
5275
+ return React__namespace.default.createElement("div", Object.assign({}, rest, { className: classNames__default.default(
5276
+ /**
5277
+ * This negative margin is because of the design having just 6px
5278
+ * of space between the actions and the vertical edges of the top
5279
+ * bar. I'm imagining this inconsistent spacing will be discussed
5280
+ * in design soon, but for now this is what it should be.
5281
+ */
5282
+ "-ui-my-[10px]",
5283
+ "ui-flex ui-flex-wrap ui-justify-end ui-gap-2",
5284
+ className
5285
+ ) }), children);
5286
+ };
5287
+
5288
+ const Padding = (props) => {
5289
+ const { children, className } = props, rest = __rest(props, ["children", "className"]);
5290
+ return (
5291
+ // Using margin here, because adjacent margins collapse.
5292
+ React__namespace.default.createElement("div", Object.assign({}, rest, { className: classNames__default.default("ui-m-4", className) }), children)
5279
5293
  );
5280
5294
  };
5281
5295
 
5296
+ const Section = (props) => {
5297
+ const { children } = props, rest = __rest(props, ["children"]);
5298
+ return React__namespace.default.createElement("div", Object.assign({}, rest, { className: classNames__default.default("ui-mt-4", props.className) }), children);
5299
+ };
5300
+
5301
+ function TopBar(props) {
5302
+ const { children } = props, rest = __rest(props, ["children"]);
5303
+ return React__namespace.default.createElement("div", Object.assign({}, rest, { className: classNames__default.default("ui-my-4", props.className) }), children);
5304
+ }
5305
+ TopBar.Actions = Actions;
5306
+
5307
+ function Card(props) {
5308
+ const { as: Element = "div", title: _, actions: __, padding = true, children, className } = props, rest = __rest(props, ["as", "title", "actions", "padding", "children", "className"]);
5309
+ return React__namespace.default.createElement(
5310
+ Element,
5311
+ Object.assign({}, rest, { className: classNames__default.default("ui-overflow-hidden", "ui-rounded-lg ui-bg-white", className) }),
5312
+ React__namespace.default.createElement(RenderTopBar, Object.assign({}, props)),
5313
+ padding ? React__namespace.default.createElement(Padding, null, children) : children
5314
+ );
5315
+ }
5316
+ Card.Title = (props) => React__namespace.default.createElement(Title, Object.assign({ type: "sm" }, props));
5317
+ Card.TopBar = TopBar;
5318
+ Card.Padding = Padding;
5319
+ Card.Section = Section;
5320
+ Card.Actions = Actions;
5321
+ function RenderTopBar(props) {
5322
+ const { title, actions } = props;
5323
+ if (title && actions) {
5324
+ return React__namespace.default.createElement(
5325
+ Padding,
5326
+ null,
5327
+ React__namespace.default.createElement(
5328
+ TopBar,
5329
+ { className: "ui-flex ui-flex-wrap ui-items-center ui-justify-between" },
5330
+ React__namespace.default.createElement(Title, { type: "sm" }, title),
5331
+ React__namespace.default.createElement(Actions, null, actions)
5332
+ )
5333
+ );
5334
+ }
5335
+ if (actions) {
5336
+ return React__namespace.default.createElement(
5337
+ Padding,
5338
+ null,
5339
+ React__namespace.default.createElement(
5340
+ TopBar,
5341
+ null,
5342
+ React__namespace.default.createElement(Actions, null, actions)
5343
+ )
5344
+ );
5345
+ }
5346
+ if (title) {
5347
+ return React__namespace.default.createElement(
5348
+ Padding,
5349
+ null,
5350
+ React__namespace.default.createElement(
5351
+ TopBar,
5352
+ null,
5353
+ React__namespace.default.createElement(Title, { type: "sm" }, title)
5354
+ )
5355
+ );
5356
+ }
5357
+ return null;
5358
+ }
5359
+
5282
5360
  const CloseIcon = () => React__namespace.default.createElement(
5283
5361
  "svg",
5284
5362
  { className: "ui-h-2 ui-w-2", stroke: "currentColor", fill: "none", viewBox: "0 0 8 8" },
@@ -5607,7 +5685,7 @@ exports.SearchCancelIcon = SearchCancelIcon;
5607
5685
  exports.SearchIcon = SearchIcon;
5608
5686
  exports.SearchInput = SearchInput;
5609
5687
  exports.SecondaryButton = SecondaryButton;
5610
- exports.Section = Section;
5688
+ exports.Section = Section$1;
5611
5689
  exports.SectionItem = SectionItem;
5612
5690
  exports.SectionItemWithContent = SectionItemWithContent;
5613
5691
  exports.Select = Select;