@pismo/marola 0.0.1-alpha.5 → 0.0.1-alpha.7

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

@@ -0,0 +1,43 @@
+import { StoryObj } from '@storybook/react';
+
+declare const meta: {
+    title: string;
+    component: ({ label, infoMessage, errorMessage, leftIcon, rightIcon, id, disabled, type, maxLength, hideCharsCounter, onChange, classNameWrapper, classNameLabel, classNameInput, classNameInfoMessage, classNameErrorMessage, classNameCharsCounter, "data-testid-wrapper": testIdWrapper, "data-testid-label": testIdLabel, "data-testid-input": testIdInput, "data-testid-infoMessage": testIdInfoMessage, "data-testid-errorMessage": testIdErrorMessage, "data-testid-charsCounter": testIdCharsCounter, ...rest }: import('react').InputHTMLAttributes<HTMLInputElement> & {
+        label?: string | undefined;
+        infoMessage?: string | undefined;
+        errorMessage?: string | undefined;
+        leftIcon?: import('react').ReactNode;
+        rightIcon?: import('react').ReactNode;
+        type?: "text" | "password" | undefined;
+        hideCharsCounter?: boolean | undefined;
+        classNameWrapper?: string | undefined;
+        classNameLabel?: string | undefined;
+        classNameInput?: string | undefined;
+        classNameInfoMessage?: string | undefined;
+        classNameErrorMessage?: string | undefined;
+        classNameCharsCounter?: string | undefined;
+        'data-testid-wrapper'?: string | undefined;
+        'data-testid-label'?: string | undefined;
+        'data-testid-input'?: string | undefined;
+        'data-testid-infoMessage'?: string | undefined;
+        'data-testid-errorMessage'?: string | undefined;
+        'data-testid-charsCounter'?: string | undefined;
+    }) => import("react/jsx-runtime").JSX.Element;
+    tags: string[];
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Simple: Story;
+export declare const WithLabel: Story;
+export declare const WithPlaceholder: Story;
+export declare const Disabled: Story;
+export declare const WithMaxLength: Story;
+export declare const WithMaxLengthAndHideCharsCounter: Story;
+export declare const WithLeftIcon: Story;
+export declare const WithRightIconAndClickEvent: Story;
+export declare const WithBothIcons: Story;
+export declare const WithInfoMessage: Story;
+export declare const WithErrorMessage: Story;

package/dist/components/Input/Input.stories.js

@@ -0,0 +1,106 @@
+import { jsx as a } from "react/jsx-runtime";
+import { useState as t } from "react";
+import { Input as n } from "./Input.js";
+const m = {
+  title: "Components/Input",
+  component: n,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "padded"
+  }
+}, g = {
+  args: {}
+}, u = {
+  name: "With label",
+  args: {
+    label: "What is your name?"
+  }
+}, W = {
+  name: "With placeholder",
+  args: {
+    label: "What is your name?",
+    placeholder: "What is your name?"
+  }
+}, d = {
+  args: {
+    label: "What is your name?",
+    value: "Marola DS",
+    disabled: !0
+  }
+}, p = {
+  name: "With max length",
+  args: {
+    label: "What is your name?",
+    infoMessage: "Text length counter",
+    maxLength: 10
+  }
+}, y = {
+  name: "With max length and no chars counter",
+  args: {
+    label: "What is your name?",
+    infoMessage: "Text length counter",
+    maxLength: 10,
+    hideCharsCounter: !0
+  }
+}, f = {
+  name: "With left icon",
+  args: {
+    label: "What is your name?",
+    placeholder: "Hey, I have an icon!",
+    leftIcon: "😁"
+  }
+}, b = {
+  name: "With right icon and click event",
+  render: () => {
+    const [o, s] = t(""), [r, h] = t(!1);
+    return /* @__PURE__ */ a(
+      n,
+      {
+        label: "What is your name?",
+        placeholder: "What is your name?",
+        type: r ? "text" : "password",
+        rightIcon: /* @__PURE__ */ a("span", { style: { cursor: "pointer" }, onClick: () => h((e) => !e), children: "😁" }),
+        value: o,
+        onChange: (e) => s(e.target.value),
+        infoMessage: "Type something and click on the icon"
+      }
+    );
+  }
+}, x = {
+  name: "With both icons",
+  args: {
+    label: "What is your name?",
+    placeholder: "Hey, I have icons!",
+    leftIcon: "😁",
+    rightIcon: "😁"
+  }
+}, I = {
+  name: "With info message",
+  args: {
+    label: "What is your name?",
+    placeholder: "What is your name?",
+    infoMessage: "The name must have less than 50 chars"
+  }
+}, M = {
+  name: "With error message",
+  args: {
+    label: "What is your name?",
+    placeholder: "What is your name?",
+    infoMessage: "The name must have less than 50 chars",
+    errorMessage: "Invalid name"
+  }
+};
+export {
+  d as Disabled,
+  g as Simple,
+  x as WithBothIcons,
+  M as WithErrorMessage,
+  I as WithInfoMessage,
+  u as WithLabel,
+  f as WithLeftIcon,
+  p as WithMaxLength,
+  y as WithMaxLengthAndHideCharsCounter,
+  W as WithPlaceholder,
+  b as WithRightIconAndClickEvent,
+  m as default
+};

package/dist/components/LoadingSpinner/LoadingSpinner.d.ts

@@ -1,5 +1,7 @@
 export interface LoadingSpinnerProps {
+    /** Whether to invert colours or not */
     invert?: boolean;
+    /** Space seperated list of CSS classes to apply */
     classNames?: string;
 }
 export declare const LoadingSpinner: ({ invert, classNames }: LoadingSpinnerProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,14 @@
+import { StoryObj } from '@storybook/react';
+
+declare const meta: {
+    title: string;
+    component: ({ invert, classNames }: import('./LoadingSpinner').LoadingSpinnerProps) => import("react/jsx-runtime").JSX.Element;
+    tags: string[];
+    decorators: ((Story: import('@storybook/types').PartialStoryFn<import('@storybook/react').ReactRenderer, {
+        invert?: boolean | undefined;
+        classNames?: string | undefined;
+    }>) => import("react/jsx-runtime").JSX.Element)[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Simple: Story;

package/dist/components/LoadingSpinner/LoadingSpinner.stories.js

@@ -0,0 +1,38 @@
+import '../../assets/global.css';
+import { jsx as t } from "react/jsx-runtime";
+/* empty css                    */
+import "../Button/Button.js";
+import "react";
+import "../Dialog/Backdrop.js";
+import "../Typography/Typography.js";
+import "../IconButton/IconButton.js";
+import { LoadingSpinner as i } from "./LoadingSpinner.js";
+import "../Table/Table.js";
+import "../Tabs/Tabs.js";
+const g = {
+  title: "Components/LoadingSpinner",
+  component: i,
+  tags: ["autodocs"],
+  decorators: [
+    (o) => /* @__PURE__ */ t(
+      "div",
+      {
+        style: {
+          backgroundColor: "#423755",
+          width: "5em",
+          height: "5em",
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center"
+        },
+        children: /* @__PURE__ */ t(o, {})
+      }
+    )
+  ]
+}, f = {
+  args: {}
+};
+export {
+  f as Simple,
+  g as default
+};

package/dist/components/PageHeader/PageHeader.d.ts

@@ -2,25 +2,35 @@ import { RequireAllOrNone } from '../../types/helpers';
 import { ReactNode } from 'react';
 
 type PageHeaderCommonProps = {
+    /** Title text */
     title: string;
+    /** Subtitle text */
     subtitle?: string;
-    rightChildren?: ReactNode;
-    bottomChildren?: ReactNode;
+    /** Back link text */
     backLinkText?: string;
+    /** Callback called when `back link` is clicked */
     onBackLinkClick?: () => void;
-    wrapperClassName?: string;
-    backLinkClassName?: string;
-    titleClassName?: string;
-    subtitleClassName?: string;
-    rightChildrenClassName?: string;
-    bottomChildrenClassName?: string;
-    wrapperTestId?: string;
-    backLinkTestId?: string;
-    titleTestId?: string;
-    subtitleTestId?: string;
-    rightChildrenTestId?: string;
-    bottomChildrenTestId?: string;
+    /** Element to be rendered on the right slot of the component */
+    rightChildren?: ReactNode;
+    /** Element to be rendered on the bottom slot of the component */
+    bottomChildren?: ReactNode;
+    /** CSS classes to be applied on the container element */
+    classNameWrapper?: string;
+    /** CSS classes to be applied on the back link element */
+    classNameBackLink?: string;
+    /** CSS classes to be applied on the title element */
+    classNameTitle?: string;
+    /** CSS classes to be applied on the subtitle element */
+    classNameSubtitle?: string;
+    /** Id to be applied as `data-testid` on the container element */
+    'data-testid-wrapper'?: string;
+    /** Id to be applied as `data-testid` on the back link element */
+    'data-testid-backLink'?: string;
+    /** Id to be applied as `data-testid` on the title element */
+    'data-testid-title'?: string;
+    /** Id to be applied as `data-testid` on the subtitle element */
+    'data-testid-subtitle'?: string;
 };
 type PageHeaderProps = RequireAllOrNone<PageHeaderCommonProps, 'backLinkText' | 'onBackLinkClick'>;
-export declare const PageHeader: ({ title, subtitle, backLinkText, onBackLinkClick, rightChildren, bottomChildren, wrapperClassName, backLinkClassName, titleClassName, subtitleClassName, rightChildrenClassName, bottomChildrenClassName, wrapperTestId, backLinkTestId, titleTestId, subtitleTestId, rightChildrenTestId, bottomChildrenTestId, ...rest }: PageHeaderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const PageHeader: ({ title, subtitle, backLinkText, onBackLinkClick, rightChildren, bottomChildren, classNameWrapper, classNameBackLink, classNameTitle, classNameSubtitle, "data-testid-wrapper": wrapperTestId, "data-testid-backLink": backLinkTestId, "data-testid-title": titleTestId, "data-testid-subtitle": subtitleTestId, ...rest }: PageHeaderProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/PageHeader/PageHeader.js

@@ -1,69 +1,51 @@
 import '../../assets/PageHeader.css';
-import { jsxs as c, jsx as t } from "react/jsx-runtime";
-import { c as a } from "../../clsx-DB4S2d7J.js";
-import * as i from "react";
-const C = (n) => /* @__PURE__ */ i.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512", "data-waves-icon": "fa/solid/arrow-left", fill: "currentColor", color: "currentColor", width: "1em", height: "1em", style: {
+import { jsxs as a, jsx as t } from "react/jsx-runtime";
+import { c as n } from "../../clsx-DB4S2d7J.js";
+import * as _ from "react";
+const w = (c) => /* @__PURE__ */ _.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512", "data-waves-icon": "fa/solid/arrow-left", fill: "currentColor", color: "currentColor", width: "1em", height: "1em", style: {
   fill: "currentcolor",
   color: "currentcolor",
   width: "1em",
   height: "1em"
-}, ...n }, /* @__PURE__ */ i.createElement("path", { d: "M447.1 256C447.1 273.7 433.7 288 416 288H109.3l105.4 105.4c12.5 12.5 12.5 32.75 0 45.25C208.4 444.9 200.2 448 192 448s-16.38-3.125-22.62-9.375l-160-160c-12.5-12.5-12.5-32.75 0-45.25l160-160c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25L109.3 224H416C433.7 224 447.1 238.3 447.1 256z" })), y = C, H = "_title_cz9x0_46", j = "_subtitle_cz9x0_47", e = {
+}, ...c }, /* @__PURE__ */ _.createElement("path", { d: "M447.1 256C447.1 273.7 433.7 288 416 288H109.3l105.4 105.4c12.5 12.5 12.5 32.75 0 45.25C208.4 444.9 200.2 448 192 448s-16.38-3.125-22.62-9.375l-160-160c-12.5-12.5-12.5-32.75 0-45.25l160-160c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25L109.3 224H416C433.7 224 447.1 238.3 447.1 256z" })), z = "_title_cz9x0_46", b = "_subtitle_cz9x0_47", e = {
   "page-header": "_page-header_cz9x0_1",
   "page-header__top-content": "_page-header__top-content_cz9x0_10",
   "page-header__main-content": "_page-header__main-content_cz9x0_13",
   "page-header__bottom-content": "_page-header__bottom-content_cz9x0_13",
   "page-header__main-left-content": "_page-header__main-left-content_cz9x0_40",
-  title: H,
-  subtitle: j,
+  title: z,
+  subtitle: b,
   "page-header__main-right-content": "_page-header__main-right-content_cz9x0_64"
-}, L = ({
-  title: n,
-  subtitle: s,
+}, y = ({
+  title: c,
+  subtitle: d,
   backLinkText: r,
-  onBackLinkClick: d,
-  rightChildren: o,
-  bottomChildren: _,
-  wrapperClassName: l,
-  backLinkClassName: h,
-  titleClassName: m,
-  subtitleClassName: p,
-  rightChildrenClassName: g,
-  bottomChildrenClassName: f,
-  wrapperTestId: x,
-  backLinkTestId: u,
-  titleTestId: v,
-  subtitleTestId: w,
-  rightChildrenTestId: z,
-  bottomChildrenTestId: N,
-  ...b
-}) => /* @__PURE__ */ c("div", { className: a([e["page-header"], l]), "data-testid": x, ...b, children: [
-  r && /* @__PURE__ */ t("div", { className: e["page-header__top-content"], children: /* @__PURE__ */ c("button", { type: "button", onClick: d, className: h, "data-testid": u, children: [
-    /* @__PURE__ */ t(y, { fontSize: 16 }),
+  onBackLinkClick: s,
+  rightChildren: i,
+  bottomChildren: o,
+  classNameWrapper: l,
+  classNameBackLink: h,
+  classNameTitle: m,
+  classNameSubtitle: p,
+  "data-testid-wrapper": g,
+  "data-testid-backLink": x,
+  "data-testid-title": f,
+  "data-testid-subtitle": u,
+  ...v
+}) => /* @__PURE__ */ a("div", { className: n([e["page-header"], l]), "data-testid": g, ...v, children: [
+  r && /* @__PURE__ */ t("div", { className: e["page-header__top-content"], children: /* @__PURE__ */ a("button", { type: "button", onClick: s, className: h, "data-testid": x, children: [
+    /* @__PURE__ */ t(w, { fontSize: 16 }),
     r
   ] }) }),
-  /* @__PURE__ */ c("div", { className: e["page-header__main-content"], children: [
-    /* @__PURE__ */ c("div", { className: e["page-header__main-left-content"], children: [
-      /* @__PURE__ */ t("h1", { className: a(e.title, m), "data-testid": v, children: n }),
-      /* @__PURE__ */ t("h3", { className: a(e.subtitle, p), "data-testid": w, children: s })
+  /* @__PURE__ */ a("div", { className: e["page-header__main-content"], children: [
+    /* @__PURE__ */ a("div", { className: e["page-header__main-left-content"], children: [
+      /* @__PURE__ */ t("h1", { className: n(e.title, m), "data-testid": f, children: c }),
+      /* @__PURE__ */ t("h2", { className: n(e.subtitle, p), "data-testid": u, children: d })
     ] }),
-    o && /* @__PURE__ */ t(
-      "div",
-      {
-        className: a(e["page-header__main-right-content"], g),
-        "data-testid": z,
-        children: o
-      }
-    )
+    i && /* @__PURE__ */ t("div", { className: e["page-header__main-right-content"], children: i })
   ] }),
-  _ && /* @__PURE__ */ t(
-    "div",
-    {
-      className: a(e["page-header__bottom-content"], f),
-      "data-testid": N,
-      children: _
-    }
-  )
+  o && /* @__PURE__ */ t("div", { className: e["page-header__bottom-content"], children: o })
 ] });
 export {
-  L as PageHeader
+  y as PageHeader
 };

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

@@ -0,0 +1,43 @@
+import { StoryObj } from '@storybook/react';
+
+declare const meta: {
+    title: string;
+    component: ({ title, subtitle, backLinkText, onBackLinkClick, rightChildren, bottomChildren, classNameWrapper, classNameBackLink, classNameTitle, classNameSubtitle, "data-testid-wrapper": wrapperTestId, "data-testid-backLink": backLinkTestId, "data-testid-title": titleTestId, "data-testid-subtitle": subtitleTestId, ...rest }: (Required<Pick<{
+        title: string;
+        subtitle?: string | undefined;
+        backLinkText?: string | undefined;
+        onBackLinkClick?: (() => void) | undefined;
+        rightChildren?: import('react').ReactNode;
+        bottomChildren?: import('react').ReactNode;
+        classNameWrapper?: string | undefined;
+        classNameBackLink?: string | undefined;
+        classNameTitle?: string | undefined;
+        classNameSubtitle?: string | undefined;
+        'data-testid-wrapper'?: string | undefined;
+        'data-testid-backLink'?: string | undefined;
+        'data-testid-title'?: string | undefined;
+        'data-testid-subtitle'?: string | undefined;
+    }, "backLinkText" | "onBackLinkClick">> | Partial<Record<"backLinkText" | "onBackLinkClick", never>>) & Omit<{
+        title: string;
+        subtitle?: string | undefined;
+        backLinkText?: string | undefined;
+        onBackLinkClick?: (() => void) | undefined;
+        rightChildren?: import('react').ReactNode;
+        bottomChildren?: import('react').ReactNode;
+        classNameWrapper?: string | undefined;
+        classNameBackLink?: string | undefined;
+        classNameTitle?: string | undefined;
+        classNameSubtitle?: string | undefined;
+        'data-testid-wrapper'?: string | undefined;
+        'data-testid-backLink'?: string | undefined;
+        'data-testid-title'?: string | undefined;
+        'data-testid-subtitle'?: string | undefined;
+    }, "backLinkText" | "onBackLinkClick">) => import("react/jsx-runtime").JSX.Element;
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Simple: Story;
+export declare const WithBackLink: Story;
+export declare const WithRightChildren: Story;
+export declare const WithBottomChildren: Story;

package/dist/components/PageHeader/PageHeader.stories.js

@@ -0,0 +1,49 @@
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import { Button as r } from "../Button/Button.js";
+import { Tab as e } from "../Tabs/Tab.js";
+import { TabPanel as a } from "../Tabs/TabPanel.js";
+import { Tabs as o } from "../Tabs/Tabs.js";
+import { PageHeader as l } from "./PageHeader.js";
+const g = {
+  title: "Components/PageHeader",
+  component: l,
+  tags: ["autodocs"]
+}, c = {
+  args: {
+    title: "Marola Design System",
+    subtitle: "A Pismo design system"
+  }
+}, i = {
+  name: "With back link",
+  args: {
+    ...c.args,
+    backLinkText: "Back",
+    onBackLinkClick: () => alert("Back button clicked!")
+  }
+}, u = {
+  name: "With right children",
+  args: {
+    ...i.args,
+    rightChildren: /* @__PURE__ */ t(r, { variant: "quick", onClick: () => alert("button clicked"), children: "Click me!" })
+  }
+}, p = {
+  name: "With bottom children",
+  args: {
+    ...i.args,
+    bottomChildren: /* @__PURE__ */ n(o, { children: [
+      /* @__PURE__ */ t(e, { value: "1", children: "Tab 1" }),
+      /* @__PURE__ */ t(e, { value: "2", children: "Tab 2" }),
+      /* @__PURE__ */ t(e, { value: "3", children: "Tab 3" }),
+      /* @__PURE__ */ t(a, { value: "1", children: "Tab 1 content" }),
+      /* @__PURE__ */ t(a, { value: "2", children: "Tab 2 content" }),
+      /* @__PURE__ */ t(a, { value: "3", children: "Tab 3 content" })
+    ] })
+  }
+};
+export {
+  c as Simple,
+  i as WithBackLink,
+  p as WithBottomChildren,
+  u as WithRightChildren,
+  g as default
+};

package/dist/components/Pagination/Pagination.d.ts

@@ -29,7 +29,7 @@ export type PaginationProps = {
     language?: PaginationLanguages;
     t?: PaginationTranslations;
 } & PaginationParams & PaginationCommonProps;
-export declare const defaultTranslations: {
+export declare const paginationDefaultTranslations: {
     [key in PaginationLanguages]: PaginationTranslations;
 };
 export declare const Pagination: (props: PaginationProps) => import("react/jsx-runtime").JSX.Element;