@pismo/marola 0.0.1-alpha.4 → 0.0.1-alpha.6

package/dist/components/Typography/Typography.d.ts

@@ -1,22 +1,31 @@
 import { ComponentType, ElementType, HTMLAttributes, ReactNode } from 'react';
 
-export type VariantType = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "body-large" | "body-medium" | "body" | "body-small" | "body-tiny" | "quote-large" | "quote" | "form-input" | "form-label" | "form-hint" | "form-dropdown" | "table-header" | "table-body" | "table-body-secondary" | "button" | "link";
+export type VariantType = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'body-large' | 'body-medium' | 'body' | 'body-small' | 'body-tiny' | 'quote-large' | 'quote' | 'form-input' | 'form-label' | 'form-hint' | 'form-dropdown' | 'table-header' | 'table-body' | 'table-body-secondary' | 'button' | 'link';
 export type CommonTypographyHTMLAttributes = HTMLAttributes<HTMLParagraphElement> & HTMLAttributes<HTMLHeadingElement> & HTMLAttributes<HTMLSpanElement> & HTMLAttributes<HTMLTableCellElement>;
 export type TypographyProps = {
+    /** Text or children to display */
     children: ReactNode;
-    elementProps?: HTMLAttributes<CommonTypographyHTMLAttributes>;
-    dataTestId?: string;
+    /** The HTML element to render as on the DOM */
     element?: ElementType;
-    className?: string;
+    /** Additional props to pass down to native HTML element e.g. dataset attributes  */
     variant?: VariantType;
+    /** Space seperated list of CSS classes to apply */
+    className?: string;
+    /** Style to be visually displayed as  */
     underline?: boolean;
+    /** Whether to apply strikethrough text decoration */
     strikethrough?: boolean;
+    /** Whether to set a higher 'bold' font weight */
     bold?: boolean;
+    /** Whether to apply underline text decoration */
+    elementProps?: HTMLAttributes<CommonTypographyHTMLAttributes>;
+    /** ID that tests can use to get this component from the DOM */
+    ['data-testid']?: string;
 };
 /**
  * Typography component provide HTML 'element' field (default span) and override
  * element specific styling with 'variant'. 'className' to provide additional
  * styling. elementProps to provide additional HTML element attributes
  */
-export declare const Typography: import('react').ForwardRefExoticComponent<TypographyProps & import("react").RefAttributes<ElementType | ComponentType>>;
+export declare const Typography: import('react').ForwardRefExoticComponent<TypographyProps & import('react').RefAttributes<ElementType | ComponentType>>;
 export default Typography;

package/dist/components/Typography/Typography.js

@@ -1,73 +1,81 @@
 import '../../assets/Typography.css';
-import { jsx as y } from "react/jsx-runtime";
-import { forwardRef as u, useMemo as c } from "react";
-import { c as f } from "../../clsx-DB4S2d7J.js";
-const p = "_h1_111i6_1", g = "_h2_111i6_11", k = "_h3_111i6_21", q = "_h4_111i6_31", T = "_body_111i6_41", $ = "_quote_111i6_75", w = "_form__input_111i6_86", S = "_form__hint_111i6_91", x = "_form__label_111i6_96", N = "_form__dropdown_111i6_101", v = "_table__header_111i6_107", E = "_table__body_111i6_112", V = "_button_111i6_123", r = {
-  h1: p,
-  "h1--bold": "_h1--bold_111i6_7",
-  h2: g,
-  "h2--bold": "_h2--bold_111i6_17",
-  h3: k,
-  "h3--bold": "_h3--bold_111i6_27",
-  h4: q,
-  "h4--bold": "_h4--bold_111i6_37",
-  body: T,
-  "body--large": "_body--large_111i6_46",
-  "body--medium": "_body--medium_111i6_50",
-  "body--small": "_body--small_111i6_54",
-  "body--tiny": "_body--tiny_111i6_58",
-  "body--bold": "_body--bold_111i6_62",
-  "body--strikethrough": "_body--strikethrough_111i6_65",
-  "body--underlined": "_body--underlined_111i6_68",
-  "body--strikethrough-underlined": "_body--strikethrough-underlined_111i6_71",
-  quote: $,
-  "quote--large": "_quote--large_111i6_80",
-  form__input: w,
-  form__hint: S,
-  form__label: x,
-  form__dropdown: N,
-  table__header: v,
-  table__body: E,
-  "table__body--secondary": "_table__body--secondary_111i6_117",
-  button: V
-}, j = (e) => {
-  const _ = e.toString();
-  let o = "body";
-  return _.match(/^h[1-4]/) ? o = _ : _.match(/^h[5-6]/) && (o = "h4"), _ === "th" && (o = "table-header"), _ === "td" && (o = "table-body"), o;
-}, z = (e) => {
-  let _ = e.replace(/^([a-z]*)-/, "$1__");
-  return _ = _.replace(new RegExp("(?<!-)-(?!-)", "g"), "--"), console.log("styleString", _), _;
-}, R = u((e, _) => {
+import { jsx as f } from "react/jsx-runtime";
+import { forwardRef as c, useMemo as y } from "react";
+import { bemify as g, getBEMBase as k, getBEMBlock as q } from "../../utils/styleStrings.js";
+import { c as B } from "../../clsx-DB4S2d7J.js";
+const E = "_h1_13r5p_1", $ = "_h2_13r5p_11", w = "_h3_13r5p_21", M = "_h4_13r5p_31", v = "_body_13r5p_41", x = "_quote_13r5p_75", N = "_form__input_13r5p_98", T = "_form__hint_13r5p_103", j = "_form__label_13r5p_108", P = "_form__dropdown_13r5p_113", R = "_table__header_13r5p_131", S = "_table__body_13r5p_136", U = "_button_13r5p_159", _ = {
+  h1: E,
+  "h1--bold": "_h1--bold_13r5p_7",
+  h2: $,
+  "h2--bold": "_h2--bold_13r5p_17",
+  h3: w,
+  "h3--bold": "_h3--bold_13r5p_27",
+  h4: M,
+  "h4--bold": "_h4--bold_13r5p_37",
+  body: v,
+  "body--large": "_body--large_13r5p_46",
+  "body--medium": "_body--medium_13r5p_50",
+  "body--small": "_body--small_13r5p_54",
+  "body--tiny": "_body--tiny_13r5p_58",
+  "body--bold": "_body--bold_13r5p_62",
+  "body--strikethrough": "_body--strikethrough_13r5p_65",
+  "body--underlined": "_body--underlined_13r5p_68",
+  "body--strikethrough-underlined": "_body--strikethrough-underlined_13r5p_71",
+  quote: x,
+  "quote--large": "_quote--large_13r5p_80",
+  "quote--bold": "_quote--bold_13r5p_85",
+  "quote--strikethrough": "_quote--strikethrough_13r5p_88",
+  "quote--underlined": "_quote--underlined_13r5p_91",
+  "quote--strikethrough-underlined": "_quote--strikethrough-underlined_13r5p_94",
+  form__input: N,
+  form__hint: T,
+  form__label: j,
+  form__dropdown: P,
+  "form--bold": "_form--bold_13r5p_118",
+  "form--strikethrough": "_form--strikethrough_13r5p_121",
+  "form--underlined": "_form--underlined_13r5p_124",
+  "form--strikethrough-underlined": "_form--strikethrough-underlined_13r5p_127",
+  table__header: R,
+  table__body: S,
+  "table__body--secondary": "_table__body--secondary_13r5p_141",
+  "table--bold": "_table--bold_13r5p_146",
+  "table--strikethrough": "_table--strikethrough_13r5p_149",
+  "table--underlined": "_table--underlined_13r5p_152",
+  "table--strikethrough-underlined": "_table--strikethrough-underlined_13r5p_155",
+  button: U,
+  "button--bold": "_button--bold_13r5p_165",
+  "button--strikethrough": "_button--strikethrough_13r5p_168",
+  "button--underlined": "_button--underlined_13r5p_171",
+  "button--strikethrough-underlined": "_button--strikethrough-underlined_13r5p_174"
+}, V = ["form", "table"], W = (e) => {
+  const r = e.toString();
+  let t = "body";
+  return r.match(/^h[1-4]/) ? t = r : r.match(/^h[5-6]/) && (t = "h4"), r === "th" && (t = "table-header"), r === "td" && (t = "table-body"), t;
+}, F = c((e, r) => {
   const {
-    dataTestId: o,
-    children: b,
-    className: l,
-    underline: n = !1,
-    element: i = "span",
-    bold: a = !1,
-    variant: t = j(i),
-    strikethrough: d = !1,
-    elementProps: s
-  } = e, h = i, m = c(() => f(
-    r[z(t)],
-    l,
-    { [r[`${t}--bold`]]: a },
-    { [r[`${t}--underlined`]]: n },
-    { [r[`${t}--strikethrough`]]: d },
-    { [r[`${t}--strikethrough-underlined`]]: d && d && n }
-  ), [a, l, d, n, t]);
-  return /* @__PURE__ */ y(
-    h,
-    {
-      ref: _,
-      "data-testid": o,
-      ...s != null && s,
-      className: m,
-      children: b
-    }
-  );
+    children: t,
+    className: b,
+    underline: l = !1,
+    element: h = "span",
+    bold: u = !1,
+    variant: i = W(h),
+    strikethrough: o = !1,
+    elementProps: a
+  } = e, p = h, m = y(() => {
+    const d = g(i, V), s = k(d), n = q(d);
+    return B(
+      _[s],
+      { [_[`${d}`]]: d !== s },
+      b,
+      { [_[`${n}--bold`]]: u },
+      { [_[`${n}--underlined`]]: l },
+      { [_[`${n}--strikethrough`]]: o },
+      { [_[`${n}--strikethrough-underlined`]]: o && o && l }
+    );
+  }, [u, b, o, l, i]);
+  return /* @__PURE__ */ f(p, { ref: r, "data-testid": e["data-testid"], ...a ?? {}, className: m, children: t });
 });
 export {
-  R as Typography,
-  R as default
+  F as Typography,
+  F as default
 };

package/dist/components/Typography/Typography.stories.d.ts

@@ -0,0 +1,18 @@
+import { StoryObj } from '@storybook/react';
+
+declare const meta: {
+    title: string;
+    component: import('react').ForwardRefExoticComponent<import('./Typography').TypographyProps & import('react').RefAttributes<import('react').ElementType | import('react').ComponentType>>;
+    tags: string[];
+    argTypes: {
+        element: {
+            options: string[];
+            control: {
+                type: "select";
+            };
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Simple: Story;

package/dist/components/Typography/Typography.stories.js

@@ -0,0 +1,30 @@
+import '../../assets/global.css';
+/* empty css                    */
+import "react/jsx-runtime";
+import "../Dialog/Backdrop.js";
+import "../../react-CGNQ6M5x.js";
+import { Typography as t } from "./Typography.js";
+import "react";
+import "../Tabs/Tabs.js";
+import "../Tabs/Tab.js";
+import "../Tabs/TabPanel.js";
+import "../Table/Table.js";
+import "../Button/Button.js";
+import "../IconButton/IconButton.js";
+const y = {
+  title: "Components/Typography",
+  component: t,
+  tags: ["autodocs"],
+  argTypes: {
+    element: {
+      options: ["span", "p", "h1", "h2", "h3", "h4", "h5", "h6", "td", "th"],
+      control: { type: "select" }
+    }
+  }
+}, g = {
+  args: { children: "Example text" }
+};
+export {
+  g as Simple,
+  y as default
+};

package/dist/components/Typography/typography.test.d.ts

@@ -0,0 +1 @@
+export {};