@pismo/marola 1.0.0-beta.0 → 1.0.0-beta.10

package/dist/components/Advice/Advice.d.ts

@@ -1,30 +1,45 @@
-import { Icon } from '../Icon/Icon';
+import { TypographyProps } from '../Typography/Typography';
+import { IconProps } from '../Icon/Icon';
 import { ReactNode } from 'react';
 
-export type AdviceTypes = 'without-results' | 'no-permission' | 'no-items' | 'error-page';
-export type AdviceProps = {
-    /** Advice icon.
-     * This property uses the Icon Component Props
-     */
-    icon?: React.ComponentProps<typeof Icon>;
-    /** Advice SVG icon */
-    IconSvg?: React.FunctionComponent<React.SVGProps<SVGSVGElement> & {
-        title?: string | undefined;
-    }>;
-    /** Type of advice */
-    type?: AdviceTypes;
-    /** Advice content message */
-    content?: ReactNode;
+export type AdviceType = 'without-results' | 'no-permission' | 'no-items' | 'error-page';
+type AdviceCommonProps = {
+    /** Advice title message */
     title?: string;
+    /** Advice title message props */
+    titleProps?: Omit<TypographyProps, 'children'>;
+    /** Advice description message */
     description?: string;
-    /** Space seperated list of CSS classes to apply */
+    /** Advice description message props */
+    descriptionProps?: Omit<TypographyProps, 'children'>;
+    /** Advice content message */
+    content?: ReactNode;
+    /** Space separated list of CSS classes to apply */
     className?: string;
     /** ID that tests can use to get this component from the DOM */
     'data-testid'?: string;
+    type?: never;
+    icon?: never;
+    iconSvg?: never;
+};
+type AdviceWithType = Omit<AdviceCommonProps, 'type'> & {
+    /** Type of advice */
+    type?: AdviceType;
+};
+type AdviceWithIcon = Omit<AdviceCommonProps, 'icon'> & {
+    /** Advice icon.
+     * This property uses the Icon Component Props
+     */
+    icon?: IconProps;
+};
+type AdviceWithIconSvg = Omit<AdviceCommonProps, 'iconSvg'> & {
+    /** Advice SVG icon */
+    iconSvg?: ReactNode;
 };
+export type AdviceProps = AdviceWithType | AdviceWithIcon | AdviceWithIconSvg;
 /**
  * Advice component provide HTML with an icon and a message.
  * Is commonly used to indicate No Permission and No Results.
  */
-declare const Advice: ({ icon, type, content, title, description, className, IconSvg, ...rest }: AdviceProps) => import("react/jsx-runtime").JSX.Element;
+declare const Advice: ({ type, icon, iconSvg: IconSvg, content, title, titleProps, description, descriptionProps, className, ...rest }: AdviceProps) => import("react/jsx-runtime").JSX.Element;
 export { Advice };

package/dist/components/Advice/Advice.js

@@ -1,47 +1,46 @@
 import '../../assets/Advice.css';
-import { jsxs as h, jsx as r } from "react/jsx-runtime";
-import { c as l } from "../../clsx-DB4S2d7J.js";
-import { Icon as i } from "../Icon/Icon.js";
-const n = "_advice_12o7p_56", d = "_content_12o7p_56", s = {
-  "u-typography-h1": "_u-typography-h1_12o7p_1",
-  "u-typography-h2": "_u-typography-h2_12o7p_8",
-  "u-typography-h3": "_u-typography-h3_12o7p_15",
-  "u-typography-h4": "_u-typography-h4_12o7p_22",
-  "u-typography-h5": "_u-typography-h5_12o7p_29",
-  "u-typography-h6": "_u-typography-h6_12o7p_36",
-  "u-typography-base": "_u-typography-base_12o7p_43",
-  "u-typography-base--xxl": "_u-typography-base--xxl_12o7p_48",
-  "u-typography-base--xl": "_u-typography-base--xl_12o7p_52",
-  "u-typography-base--lg": "_u-typography-base--lg_12o7p_56",
-  advice: n,
-  content: d,
-  "u-typography-base--sm": "_u-typography-base--sm_12o7p_61",
-  "u-typography-base--bold": "_u-typography-base--bold_12o7p_65",
-  "u-typography-base--strikethrough": "_u-typography-base--strikethrough_12o7p_69",
-  "u-typography-base--underlined": "_u-typography-base--underlined_12o7p_72",
-  "u-typography-base--strikethrough-underlined": "_u-typography-base--strikethrough-underlined_12o7p_75",
-  "content-no-items": "_content-no-items_12o7p_90"
-}, m = {
+import { jsxs as _, jsx as r } from "react/jsx-runtime";
+import { c as g } from "../../clsx-DB4S2d7J.js";
+import { Icon as h } from "../Icon/Icon.js";
+import { Typography as m } from "../Typography/Typography.js";
+const x = "_advice_1wls4_1", f = "_advice__texts_1wls4_8", u = "_advice__content_1wls4_14", c = {
+  advice: x,
+  advice__texts: f,
+  advice__content: u
+}, b = {
   "no-permission": "eye-slash",
   "no-items": "",
   "error-page": "circle-exclamation",
   "without-results": "folder-magnifying-glass"
-}, v = ({ icon: p, type: o, content: e, title: y, description: _, className: g, IconSvg: t, ...u }) => {
-  const a = {
-    color: p != null && p.color ? p == null ? void 0 : p.color : o !== "error-page" ? "var(--accent)" : "var(--secondary-orange)",
-    size: (p == null ? void 0 : p.size) || "3.375rem",
-    icon: m[o] || (p == null ? void 0 : p.icon) || ""
-  };
-  return /* @__PURE__ */ h("div", { className: l(s.advice, g), ...u, children: [
-    t && o !== "no-items" && o !== "error-page" && /* @__PURE__ */ r(t, { style: { color: a.color, height: a.size, width: a.size } }),
-    !t && o !== "no-items" && /* @__PURE__ */ r(i, { ...a }),
-    o !== "error-page" && o !== "no-items" ? typeof e == "string" ? /* @__PURE__ */ r("p", { children: e }) : /* @__PURE__ */ r("div", { className: s.content, children: e }) : /* @__PURE__ */ h("div", { className: s["content-no-items"], children: [
-      /* @__PURE__ */ r("h3", { children: y }),
-      /* @__PURE__ */ r("p", { children: _ }),
-      e
-    ] })
-  ] });
-};
+}, T = ({
+  type: e,
+  icon: a,
+  iconSvg: i,
+  content: t,
+  title: l,
+  titleProps: o = { variant: "base-xxl", color: "var(--gray-75)", bold: !0 },
+  description: n,
+  descriptionProps: s = { variant: "base-lg", color: "var(--gray-75)" },
+  className: v,
+  ...d
+}) => (e && (a = { icon: b[e] }, (e === "without-results" || e === "no-permission") && (o = Object.assign({}, o, { variant: "base-lg" })), e === "no-items" && (s = Object.assign({}, s, {
+  elementProps: { style: { maxWidth: 460, color: s.color } }
+})), e === "error-page" && (a.color = "var(--secondary-orange)")), /* @__PURE__ */ _("div", { className: g(c.advice, v), ...d, children: [
+  (a == null ? void 0 : a.icon) && /* @__PURE__ */ r(h, { icon: a.icon, size: a.size || "3.375rem", color: a.color || "var(--accent)" }),
+  i && i,
+  /* @__PURE__ */ _(
+    "div",
+    {
+      className: c.advice__texts,
+      style: e === "without-results" || e === "no-permission" ? { marginTop: -16 } : {},
+      children: [
+        l && /* @__PURE__ */ r(m, { element: "h3", ...o, children: l }),
+        n && /* @__PURE__ */ r(m, { element: "p", ...s, children: n })
+      ]
+    }
+  ),
+  /* @__PURE__ */ r("div", { className: c.advice__content, children: t && t })
+] }));
 export {
-  v as Advice
+  T as Advice
 };

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

@@ -2,7 +2,7 @@ import { StoryObj } from '@storybook/react';
 
 declare const meta: {
     title: string;
-    component: ({ icon, type, content, title, description, className, IconSvg, ...rest }: import('./Advice').AdviceProps) => import("react/jsx-runtime").JSX.Element;
+    component: ({ type, icon, iconSvg: IconSvg, content, title, titleProps, description, descriptionProps, className, ...rest }: import('./Advice').AdviceProps) => import("react/jsx-runtime").JSX.Element;
     tags: string[];
     parameters: {
         layout: string;
@@ -12,7 +12,8 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const WithoutResults: Story;
 export declare const NoPermission: Story;
-export declare const CustomIcon: Story;
-export declare const CustomIconSVG: Story;
 export declare const NoItems: Story;
 export declare const ErrorPage: Story;
+export declare const CustomIcon: Story;
+export declare const CustomIconSVG: Story;
+export declare const TotallyCustom: Story;

package/dist/components/Autocomplete/Autocomplete.d.ts

@@ -0,0 +1,50 @@
+import { InputHTMLAttributes, ReactNode, SyntheticEvent } from 'react';
+
+type AutocompleteProps<T> = InputHTMLAttributes<HTMLInputElement> & {
+    /** Label text */
+    label?: string;
+    /** Options array */
+    options?: Array<T>;
+    /** callback for new option selected */
+    onChange?: (event: SyntheticEvent<Element, Event>, newValue: T) => void;
+    /** Info message text */
+    infoMessage?: string;
+    /** Error message text */
+    errorMessage?: string;
+    /** Left icon element */
+    leftIcon?: ReactNode;
+    /** Right icon element */
+    rightIcon?: ReactNode;
+    /** Input type. Default: text */
+    type?: 'text' | 'password' | 'search';
+    /** Hide the chars counter */
+    hideCharsCounter?: boolean;
+    /** CSS classes to be applied on the container element */
+    classNameWrapper?: string;
+    /** CSS classes to be applied on the label element */
+    classNameLabel?: string;
+    /** CSS classes to be applied on the input element */
+    classNameInput?: string;
+    /** CSS classes to be applied on the info message element */
+    classNameInfoMessage?: string;
+    /** CSS classes to be applied on the error message element */
+    classNameErrorMessage?: string;
+    /** CSS classes to be applied on the chars counter element */
+    classNameCharsCounter?: 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 label element */
+    'data-testid-label'?: string;
+    /** Id to be applied as `data-testid` on the input element */
+    'data-testid-input'?: string;
+    /** Id to be applied as `data-testid` on the info message element */
+    'data-testid-infoMessage'?: string;
+    /** Id to be applied as `data-testid` on the error message element */
+    'data-testid-errorMessage'?: string;
+    /** Id to be applied as `data-testid` on the chars counter element */
+    'data-testid-charsCounter'?: string;
+};
+export declare const Autocomplete: <T extends string | (object & {
+    label: string;
+})>({ label, type, options, infoMessage, errorMessage, leftIcon, rightIcon, id, disabled, maxLength, onChange, classNameLabel, classNameInput, classNameErrorMessage, classNameInfoMessage, "data-testid-label": testIdLabel, "data-testid-input": testIdInput, "data-testid-infoMessage": testIdInfoMessage, "data-testid-errorMessage": testIdErrorMessage, ...rest }: AutocompleteProps<T>) => import("react/jsx-runtime").JSX.Element;
+export {};