@luscii-healthtech/web-ui 20.3.0 → 20.4.0

package/dist/components/VerticalMenu/VerticalMenu.d.ts

@@ -0,0 +1,86 @@
+import React from "react";
+import { Text } from "../Text/Text";
+import { Divider } from "../Divider/Divider";
+type Props = React.ComponentPropsWithoutRef<"div"> & {
+    /**
+     * Renders above the menu items, but below the header.
+     */
+    title?: string | React.ReactNode;
+    /**
+     * Renders above everything else.
+     */
+    header?: React.ReactNode;
+    /**
+     * Renders below everything else.
+     */
+    footer?: React.ReactNode;
+};
+type StaticComponents = {
+    Divider: typeof MenuDivider;
+    Item: typeof MenuItem;
+    ItemLayout: typeof MenuItemLayout;
+    ItemText: typeof MenuItemText;
+    ItemPadding: typeof MenuItemPadding;
+    NotificationBubble: typeof MenuItemNotificationBubble;
+};
+export declare const VerticalMenu: React.FC<Props> & StaticComponents;
+declare function MenuItemText(props: Readonly<React.ComponentPropsWithoutRef<typeof Text>>): React.JSX.Element;
+type GetClassNameFunction = (args?: {
+    /**
+     * Whether the item should display as active.
+     */
+    isActive?: boolean;
+    /**
+     * Your own class name to add to the item.
+     */
+    classNameProp?: string;
+}) => string;
+type MenuItemProps = {
+    render: (props: {
+        /**
+         * Returns the "calculated" className for the item.
+         *
+         * The `VerticalMenu` component will decide which
+         * classes should be applied to a menu item to make
+         * it appear correctly in the menu. By placing the
+         * string of these classes on your own element/component,
+         * you allow the `VerticalMenu` component to style your
+         * element correctly.
+         */
+        getClassName: GetClassNameFunction;
+    }) => React.ReactNode;
+    children?: never;
+    paddingX?: never;
+    paddingY?: never;
+} | {
+    render?: never;
+    children?: React.ReactNode;
+    paddingX?: boolean;
+    paddingY?: boolean;
+};
+declare function MenuItem(props: MenuItemProps): string | number | boolean | Iterable<React.ReactNode> | React.JSX.Element | null | undefined;
+type MenuItemLayoutProps = {
+    icon?: React.ReactNode;
+    text?: React.ReactNode;
+    className?: string;
+    children?: React.ReactNode;
+} & ({
+    aside?: React.ReactNode;
+    notificationBubbleText?: never;
+} | {
+    aside?: never;
+    notificationBubbleText?: string;
+});
+declare function MenuItemLayout(props: MenuItemLayoutProps): React.JSX.Element;
+declare function MenuItemPadding(props: Readonly<{
+    children?: React.ReactNode;
+    className?: string;
+    paddingX?: boolean;
+    paddingY?: boolean;
+}>): React.JSX.Element;
+declare function MenuItemNotificationBubble(props: Readonly<{
+    children?: React.ReactNode;
+    className?: string;
+}>): React.JSX.Element;
+declare function MenuDivider(props: React.ComponentPropsWithoutRef<typeof Divider>): React.JSX.Element;
+export {};

package/dist/index.d.ts

@@ -81,6 +81,7 @@ export type { IconProps, IconKey, } from "./components/Icons/types/IconProps.typ
 export * from "./components/Icons";
 export { Divider } from "./components/Divider/Divider";
 export { FullPageModal } from "./components/Modal/FullPageModal";
+export { VerticalMenu } from "./components/VerticalMenu/VerticalMenu";
 export { Card, type Props as CardProps } from "./components/Card/Card";
 export { Dropzone, DropzoneProps } from "./components/Dropzone";
 export { FilterBar, FilterBarUtils } from "./components/FilterBar";

package/dist/index.development.js

@@ -5409,6 +5409,95 @@ const FullPageModal = ({ children, dataTestId, isOpen = false, onCloseClick, pri
 FullPageModal.Actions = FullPageModalActions;
 FullPageModal.setAppElement = ReactModal__default.default.setAppElement;
 
+const VerticalMenu = (props) => {
+  const { className, title, header, footer } = props, rest = __rest(props, ["className", "title", "header", "footer"]);
+  return React__namespace.default.createElement(
+    "div",
+    Object.assign({ className: classNames__default.default("ui-flex ui-h-full ui-flex-col ui-px-xxs ui-py-m ui-text-slate-800", className) }, rest),
+    React__namespace.default.createElement("div", null, header),
+    React__namespace.default.createElement(Text, { className: "ui-px-m ui-pb-m ui-pt-xs", variant: "lg-strong" }, title),
+    React__namespace.default.createElement("div", null, props.children),
+    React__namespace.default.createElement("div", { className: "ui-mt-auto" }, footer)
+  );
+};
+VerticalMenu.Divider = MenuDivider;
+VerticalMenu.Item = MenuItem;
+VerticalMenu.ItemLayout = MenuItemLayout;
+VerticalMenu.ItemText = MenuItemText;
+VerticalMenu.ItemPadding = MenuItemPadding;
+VerticalMenu.NotificationBubble = MenuItemNotificationBubble;
+function MenuItemText(props) {
+  return React__namespace.default.createElement(Text, Object.assign({ color: "current", variant: "strong" }, props, { className: classNames__default.default("ui-leading-[24px]", props.className) }));
+}
+const getClassName = ({ isActive = false, classNameProp = "" } = {}) => classNames__default.default(
+  // Base
+  "ui-block ui-w-full ui-px-m ui-py-xs ui-radius-xxs",
+  // Transitions
+  "ui-transition-[color,background,transform]",
+  // States
+  "hover:ui-bg-primary-background hover:ui-text-primary focus:ui-text-primary active:ui-scale-[0.98]",
+  {
+    "ui-bg-transparent ui-text-on-surface": !isActive,
+    "ui-bg-gradient-to-r ui-from-blue-800 ui-to-blue-700 ui-text-white hover:ui-text-white focus:ui-text-white": isActive
+  },
+  classNameProp
+);
+function MenuItem(props) {
+  var _a;
+  const { children, paddingX = true, paddingY = true } = props;
+  if (children) {
+    return React__namespace.default.createElement("div", { className: classNames__default.default({
+      "ui-px-m": paddingX,
+      "ui-py-xs": paddingY
+    }) }, children);
+  }
+  return (_a = props.render) === null || _a === void 0 ? void 0 : _a.call(props, { getClassName });
+}
+function MenuItemLayout(props) {
+  const { icon, text, aside, notificationBubbleText, className, children } = props;
+  if (children) {
+    return React__namespace.default.createElement("div", null, children);
+  }
+  return React__namespace.default.createElement(
+    "div",
+    { className: classNames__default.default("ui-flex ui-items-start ui-gap-xxs", className) },
+    icon && React__namespace.default.createElement("span", null, icon),
+    text && React__namespace.default.createElement(MenuItemText, null, text),
+    aside && React__namespace.default.createElement("span", { className: "ui-ml-auto" }, aside),
+    notificationBubbleText && React__namespace.default.createElement(
+      "span",
+      { className: "ui-ml-auto" },
+      React__namespace.default.createElement(MenuItemNotificationBubble, null, notificationBubbleText)
+    )
+  );
+}
+function MenuItemPadding(props) {
+  const { children, className, paddingX = true, paddingY = true } = props;
+  return React__namespace.default.createElement("div", { className: classNames__default.default({
+    "ui-px-m": paddingX,
+    "ui-py-xs": paddingY
+  }, className) }, children);
+}
+function MenuItemNotificationBubble(props) {
+  return React__namespace.default.createElement(
+    "div",
+    { className: classNames__default.default(
+      /**
+       * Spacing `l` is 24px, which is the line height for the
+       * text size here. This makes the bubble a perfect circle when
+       * there is too little text.
+       */
+      "ui-min-w-l",
+      "ui-rounded-full ui-bg-red-500 ui-px-xxs ui-text-center",
+      props.className
+    ) },
+    React__namespace.default.createElement(Text, { color: "white", inline: true, className: "ui-align-text-bottom" }, props.children)
+  );
+}
+function MenuDivider(props) {
+  return React__namespace.default.createElement(Divider, Object.assign({ className: "ui-m-1 ui-my-xxs last:ui-border-b-1" }, props));
+}
+
 const Actions = (props) => {
   const { children, className } = props, rest = __rest(props, ["children", "className"]);
   return React__namespace.default.createElement("div", Object.assign({}, rest, { className: classNames__default.default(
@@ -5985,6 +6074,7 @@ exports.Toaster = Toaster;
 exports.TrashBinIcon = DeleteIcon;
 exports.UList = UnorderedList;
 exports.UnorderedList = UnorderedList;
+exports.VerticalMenu = VerticalMenu;
 exports.ViewItem = ViewItem;
 exports.WarningIcon = ExclamationMarkIcon;
 exports.WeekdaysPicker = WeekdaysPicker;