@luscii-healthtech/web-ui 58.2.5 → 58.3.0

package/dist/src/components/InstrumentCard/InstrumentCard.d.ts

@@ -0,0 +1,99 @@
+import { type FC } from "react";
+/**
+ * The kind of instrument, which selects the leading icon. Overridden by
+ * `ExclamationMarkIcon` when `state` is `"error"`.
+ */
+export type InstrumentType = "info" | "questionnaire" | "numeric" | "document" | "contact" | "other" | "scripted" | "sum";
+type BaseProps = {
+    /** Selects the leading icon. */
+    type: InstrumentType;
+    /**
+     * Name of the instrument. Truncates with an ellipsis in the `detailed`
+     * variant; in `compact` it is the pill label, and is replaced by
+     * `errorMessage` when `state` is `"error"`.
+     */
+    title: string;
+    /**
+     * First cell of the meta row, e.g. `"Lesson"`. `detailed` only, and not
+     * rendered when `state` is `"error"` — the error message takes its place.
+     */
+    category?: string;
+    /**
+     * Second cell of the meta row, e.g. `"Comments ON"`, separated from
+     * `category` by a vertical rule. Rendered only alongside `category`.
+     * `detailed` only, and replaced by the error message in the error state.
+     */
+    meta?: string;
+    /**
+     * Instrument identifier, e.g. `"Id-30ry3-7240"`. Rendered as a bordered
+     * tag beneath the meta row. `detailed` only; omitted when absent.
+     */
+    id?: string;
+    /**
+     * Number shown in the trailing tag — how many times the instrument is used.
+     * `detailed` only; omitted when absent. `0` renders, it is not treated as
+     * empty.
+     */
+    count?: number;
+    /**
+     * `"compact"` is an inline pill of icon plus label, for listing
+     * instruments inside an action card. `"detailed"` is a full-width row with
+     * a title, meta row and tags.
+     *
+     * @default "compact"
+     */
+    variant?: "compact" | "detailed";
+    /** Merged onto the root element. */
+    className?: string;
+};
+/**
+ * `errorMessage` is what the error state renders — it replaces the label in
+ * the compact variant and the meta row in the detailed variant. Requiring it
+ * alongside `state="error"` makes the empty-error-label state impossible to
+ * express, rather than guarding against it at runtime.
+ *
+ * In the error state the icon becomes `ExclamationMarkIcon` and the icon,
+ * title and message all take the error colour.
+ *
+ * @default state "default"
+ */
+type StateProps = {
+    state?: "default";
+    errorMessage?: never;
+} | {
+    state: "error";
+    errorMessage: string;
+};
+export type Props = BaseProps & StateProps;
+/**
+ * Renders a single instrument belonging to an action.
+ *
+ * Use `variant="compact"` for the inline pills listed on an `ActionCard`, and
+ * `variant="detailed"` for the full rows in `ActionCardDetailed`. Both of
+ * those consumers force the variant, so it is not part of the props they
+ * accept.
+ *
+ * @example
+ * ```tsx
+ * <InstrumentCard type="info" title="How to stop smoking" />
+ *
+ * <InstrumentCard
+ *   variant="detailed"
+ *   type="questionnaire"
+ *   title="Daily health questionnaire"
+ *   category="Questionnaire"
+ *   meta="Comments ON"
+ *   id="Id-30ry3-7240"
+ *   count={4}
+ * />
+ *
+ * <InstrumentCard
+ *   type="other"
+ *   title="Instrument title"
+ *   state="error"
+ *   errorMessage="Instrument missing in protocol"
+ * />
+ * ```
+ */
+export declare const InstrumentCard: FC<Props>;
+export {};

package/dist/src/generated/components/InstrumentCard/InstrumentCard.d.ts

@@ -0,0 +1,99 @@
+import { type FC } from "react";
+/**
+ * The kind of instrument, which selects the leading icon. Overridden by
+ * `ExclamationMarkIcon` when `state` is `"error"`.
+ */
+export type InstrumentType = "info" | "questionnaire" | "numeric" | "document" | "contact" | "other" | "scripted" | "sum";
+type BaseProps = {
+    /** Selects the leading icon. */
+    type: InstrumentType;
+    /**
+     * Name of the instrument. Truncates with an ellipsis in the `detailed`
+     * variant; in `compact` it is the pill label, and is replaced by
+     * `errorMessage` when `state` is `"error"`.
+     */
+    title: string;
+    /**
+     * First cell of the meta row, e.g. `"Lesson"`. `detailed` only, and not
+     * rendered when `state` is `"error"` — the error message takes its place.
+     */
+    category?: string;
+    /**
+     * Second cell of the meta row, e.g. `"Comments ON"`, separated from
+     * `category` by a vertical rule. Rendered only alongside `category`.
+     * `detailed` only, and replaced by the error message in the error state.
+     */
+    meta?: string;
+    /**
+     * Instrument identifier, e.g. `"Id-30ry3-7240"`. Rendered as a bordered
+     * tag beneath the meta row. `detailed` only; omitted when absent.
+     */
+    id?: string;
+    /**
+     * Number shown in the trailing tag — how many times the instrument is used.
+     * `detailed` only; omitted when absent. `0` renders, it is not treated as
+     * empty.
+     */
+    count?: number;
+    /**
+     * `"compact"` is an inline pill of icon plus label, for listing
+     * instruments inside an action card. `"detailed"` is a full-width row with
+     * a title, meta row and tags.
+     *
+     * @default "compact"
+     */
+    variant?: "compact" | "detailed";
+    /** Merged onto the root element. */
+    className?: string;
+};
+/**
+ * `errorMessage` is what the error state renders — it replaces the label in
+ * the compact variant and the meta row in the detailed variant. Requiring it
+ * alongside `state="error"` makes the empty-error-label state impossible to
+ * express, rather than guarding against it at runtime.
+ *
+ * In the error state the icon becomes `ExclamationMarkIcon` and the icon,
+ * title and message all take the error colour.
+ *
+ * @default state "default"
+ */
+type StateProps = {
+    state?: "default";
+    errorMessage?: never;
+} | {
+    state: "error";
+    errorMessage: string;
+};
+export type Props = BaseProps & StateProps;
+/**
+ * Renders a single instrument belonging to an action.
+ *
+ * Use `variant="compact"` for the inline pills listed on an `ActionCard`, and
+ * `variant="detailed"` for the full rows in `ActionCardDetailed`. Both of
+ * those consumers force the variant, so it is not part of the props they
+ * accept.
+ *
+ * @example
+ * ```tsx
+ * <InstrumentCard type="info" title="How to stop smoking" />
+ *
+ * <InstrumentCard
+ *   variant="detailed"
+ *   type="questionnaire"
+ *   title="Daily health questionnaire"
+ *   category="Questionnaire"
+ *   meta="Comments ON"
+ *   id="Id-30ry3-7240"
+ *   count={4}
+ * />
+ *
+ * <InstrumentCard
+ *   type="other"
+ *   title="Instrument title"
+ *   state="error"
+ *   errorMessage="Instrument missing in protocol"
+ * />
+ * ```
+ */
+export declare const InstrumentCard: FC<Props>;
+export {};

package/dist/src/generated/index.d.ts

@@ -94,6 +94,7 @@ export { Breadcrumbs, type BreadcrumbProps } from "./components/Breadcrumbs";
 export { PageHeader, type PageHeaderProps } from "./components/PageHeader";
 export { Tag } from "./components/Tag/Tag";
 export { TagGroup } from "./components/Tag/TagGroup";
+export { InstrumentCard, type InstrumentType, type Props as InstrumentCardProps, } from "./components/InstrumentCard/InstrumentCard";
 export { Textarea, type TextareaProps, type ResizeTypes, } from "./components/Textarea/Textarea";
 export { TextEditor, type TextEditorTag, } from "./components/TextEditor/TextEditor";
 export { type TextEditorTranslations } from "./components/TextEditor/textEditorTranslations";

package/dist/src/index.d.ts

@@ -94,6 +94,7 @@ export { Breadcrumbs, type BreadcrumbProps } from "./components/Breadcrumbs";
 export { PageHeader, type PageHeaderProps } from "./components/PageHeader";
 export { Tag } from "./components/Tag/Tag";
 export { TagGroup } from "./components/Tag/TagGroup";
+export { InstrumentCard, type InstrumentType, type Props as InstrumentCardProps, } from "./components/InstrumentCard/InstrumentCard";
 export { Textarea, type TextareaProps, type ResizeTypes, } from "./components/Textarea/Textarea";
 export { TextEditor, type TextEditorTag, } from "./components/TextEditor/TextEditor";
 export { type TextEditorTranslations } from "./components/TextEditor/textEditorTranslations";

package/dist/stories/InstrumentCard.stories.d.ts

@@ -0,0 +1,43 @@
+import { type StoryObj } from "@storybook/react-vite";
+import { type InstrumentType } from "../src/components/InstrumentCard/InstrumentCard";
+declare const meta: {
+    title: string;
+    component: import("react").FC<import("../src").InstrumentCardProps>;
+    parameters: {
+        backgrounds: {
+            default: string;
+        };
+    };
+    argTypes: {
+        type: {
+            options: InstrumentType[];
+            control: {
+                type: "select";
+            };
+        };
+        variant: {
+            options: string[];
+            control: {
+                type: "select";
+            };
+        };
+        state: {
+            options: string[];
+            control: {
+                type: "select";
+            };
+        };
+        count: {
+            control: {
+                type: "number";
+            };
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Base: Story;
+export declare const EveryTypeCompact: Story;
+export declare const EveryTypeDetailed: Story;
+export declare const DetailedOptionalFields: Story;
+export declare const ErrorStates: Story;

package/dist/web-ui-tailwind.css

@@ -1624,6 +1624,9 @@ button, input:where([type='button'], [type='reset'], [type='submit']), ::file-se
 .ui\:h-\[11px\] {
   height: 11px;
 }
+.ui\:h-\[12px\] {
+  height: 12px;
+}
 .ui\:h-\[20px\] {
   height: 20px;
 }
@@ -1966,6 +1969,9 @@ button, input:where([type='button'], [type='reset'], [type='submit']), ::file-se
 .ui\:max-w-\[500px\] {
   max-width: 500px;
 }
+.ui\:max-w-\[560px\] {
+  max-width: 560px;
+}
 .ui\:max-w-\[900px\] {
   max-width: 900px;
 }
@@ -1978,6 +1984,9 @@ button, input:where([type='button'], [type='reset'], [type='submit']), ::file-se
 .ui\:max-w-screen {
   max-width: 100vw;
 }
+.ui\:min-w-0 {
+  min-width: calc(var(--ui-spacing) * 0);
+}
 .ui\:min-w-24 {
   min-width: 1.5rem;
 }
@@ -2922,6 +2931,9 @@ button, input:where([type='button'], [type='reset'], [type='submit']), ::file-se
 .ui\:bg-blue-400 {
   background-color: var(--ui-color-blue-400);
 }
+.ui\:bg-border-neutral-primary-default {
+  background-color: var(--ui-primitive-color-grey-300);
+}
 .ui\:bg-color-divider {
   background-color: #eeeeee;
 }
@@ -3848,6 +3860,12 @@ button, input:where([type='button'], [type='reset'], [type='submit']), ::file-se
 .ui\:text-green-800 {
   color: var(--ui-color-green-800);
 }
+.ui\:text-icon-brand-primary-default {
+  color: var(--ui-primitive-color-brand-700);
+}
+.ui\:text-icon-error-primary-default {
+  color: var(--ui-primitive-color-red-900);
+}
 .ui\:text-negative-solid {
   color: var(--ui-color-red-400);
 }