@luscii-healthtech/web-ui 7.6.3 → 8.0.0

package/README.md

@@ -83,6 +83,17 @@ The component docs file brings everything together and should be considered the
 - Usage guidelines of when and where to use the component.
 - Best practices to show what to do and what not do when working with the component.
 
+> 🔎 If you need to e.g. create a story to show how NOT to use a component, you might not want
+> to create a snapshot for that component or show it in the sidebar of Storybook. To omit a story
+> from snapshots, add the following to its parameters:
+>
+> ```ts
+> chromatic: { disableSnapshot: true },
+> ```
+>
+> To hide a story from the sidebar, prefix the story (variable) name
+> with `HIDE_`.
+
 Please see examples of other components' docs files for inspiration and try to stay consistent with how they are documented.
 
 ### Accessibility

package/dist/components/Text/Text.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from "react";
 import { RestPropped } from "../../types/general.types";
 import "./Text.css";
 /**
@@ -8,14 +8,14 @@ import "./Text.css";
  * https://v1.tailwindcss.com/docs/controlling-file-size
  */
 declare const allowedTextStyles: {
-    sm: string;
-    "sm-strong": string;
-    base: string;
-    strong: string;
-    lg: string;
-    "lg-strong": string;
-    xl: string;
-    "xl-strong": string;
+    readonly sm: "ui-text-xs ui-font-medium";
+    readonly "sm-strong": "ui-text-xs ui-font-semibold";
+    readonly base: "ui-text-sm";
+    readonly strong: "ui-text-sm ui-font-semibold";
+    readonly lg: "";
+    readonly "lg-strong": "ui-font-semibold";
+    readonly xl: "ui-text-lg";
+    readonly "xl-strong": "ui-font-semibold ui-text-lg";
 };
 export declare const allowedColors: {
     readonly base: "ui-text-slate-800";
@@ -35,20 +35,72 @@ declare const allowedHoverColors: {
 export type TextColor = keyof typeof allowedColors;
 export type TextHoverColor = keyof typeof allowedHoverColors;
 export type TextStyle = keyof typeof allowedTextStyles;
-export interface TextProps extends RestPropped {
-    text: string;
+export interface TextProps extends RestPropped, React.ComponentPropsWithoutRef<"p"> {
+    /**
+     * @deprecated
+     * Use `children` instead, as you would with a regular `<p>` tag.
+     */
+    text?: string;
+    /**
+     * @deprecated
+     * Use `variant` instead. "type" is a word that is too ambiguous and
+     * is also often used as an attribute name in HTML.
+     *
+     * @default "base"
+     */
     type?: TextStyle;
+    /**
+     * The styling variant of the text.
+     *
+     * @default "base"
+     */
+    variant?: TextStyle;
+    /**
+     * Changes the component to be rendered inline. This is useful for
+     * using this component inside of itself, for example, when you want
+     * to render bold text inside of a paragraph rendered by this same component.
+     *
+     * @default false
+     */
     inline?: boolean;
+    /**
+     * @default "base"
+     */
     color?: TextColor;
+    /**
+     * @default "base"
+     */
     hoverColor?: TextHoverColor;
+    /**
+     * Tailwind class modifier that allows you to apply hover styles on this component
+     * based on the styles of its parent.
+     * https://tailwindcss.com/docs/hover-focus-and-other-states#styling-based-on-parent-state
+     *
+     * @deprecated
+     * Since this is a Tailwind specific feature we should not expose this to the consumer. We
+     * should only use group-hover styles in the components in WebUI instead.
+     */
     hoverInGroup?: boolean;
     className?: string;
+    /**
+     * Interpret an HTML string as regular markup, instead of rendering it as a string.
+     *
+     * @default false
+     */
     containsDangerousHtml?: boolean;
+    /**
+     * With this prop enabled, text won't wrap to the next line but instead
+     * will be truncated with an ellipsis.
+     *
+     * @default false
+     */
     truncate?: boolean;
     /**
-     * When `true` will work together with the `truncate` props
+     * When `true` will work together with the `truncate` prop
      * and allow a max of two lines when breaking text before applying
-     * elipsis. Defaults to "`false`"
+     * ellipsis.
+     *
+     * @default false
      */
     clampLines?: boolean;
     "data-test-id"?: string;
@@ -56,11 +108,8 @@ export interface TextProps extends RestPropped {
 export declare const Text: {
     (props: TextProps): JSX.Element;
     defaultProps: {
-        type: string;
-        inline: boolean;
-        color: string;
-        containsDangerousHtml: boolean;
-        truncate: boolean;
+        variant: "base";
+        color: "base";
     };
 };
 export default Text;

package/dist/index.development.js

@@ -212,7 +212,10 @@ const allowedGroupHoverColors = {
   white: "ui-group-hover:ui-text-white"
 };
 const Text = (props) => {
-  var _a, _b;
+  var _a, _b, _c;
+  const { children } = props, rest = __rest(props, ["children"]);
+  const Component = props.inline ? "span" : "p";
+  const resolvedVariant = (_a = props.type) !== null && _a !== void 0 ? _a : props.variant;
   const selectedHoverColor = props.hoverColor && !props.hoverInGroup && allowedHoverColors[props.hoverColor];
   const selectedGroupHoverColor = props.hoverColor && props.hoverInGroup && allowedGroupHoverColors[props.hoverColor];
   const containerProps = {
@@ -222,7 +225,7 @@ const Text = (props) => {
       // apply different style classes
       // for now we stick with ui-font-size 16px on the body
       // so I am adjusting our styles accordingly (one step down)
-      allowedTextStyles[(_a = props.type) !== null && _a !== void 0 ? _a : "base"],
+      allowedTextStyles[resolvedVariant !== null && resolvedVariant !== void 0 ? resolvedVariant : "base"],
       allowedColors[(_b = props.color) !== null && _b !== void 0 ? _b : "base"],
       selectedHoverColor,
       selectedGroupHoverColor,
@@ -237,14 +240,11 @@ const Text = (props) => {
       props.className
     )
   };
-  return props.containsDangerousHtml ? React__namespace.default.createElement("p", Object.assign({}, containerProps, { dangerouslySetInnerHTML: { __html: props.text } })) : React__namespace.default.createElement("p", Object.assign({}, containerProps), props.text);
+  return props.containsDangerousHtml ? React__namespace.default.createElement(Component, Object.assign({}, rest, containerProps, { dangerouslySetInnerHTML: { __html: (_c = children !== null && children !== void 0 ? children : props.text) !== null && _c !== void 0 ? _c : "" } })) : React__namespace.default.createElement(Component, Object.assign({}, rest, containerProps), children !== null && children !== void 0 ? children : props.text);
 };
 Text.defaultProps = {
-  type: "base",
-  inline: false,
-  color: "base",
-  containsDangerousHtml: false,
-  truncate: false
+  variant: "base",
+  color: "base"
 };
 
 const IconWrapper = (SVGComponent) => (props) => React__namespace.default.createElement(SVGComponent, Object.assign({}, props, { role: props.onClick ? "button" : void 0 }));