@pismo/marola 2.1.47 → 2.1.49

package/README.md

@@ -33,3 +33,15 @@ browser
 #### Node version
 
 This project uses a .nvmrc file, to auto switch node version follow [these steps](https://github.com/nvm-sh/nvm?tab=readme-ov-file#zsh) from the nvm project .
+
+
+#### Publishing
+
+This project is distributed to the Pismo's microfrontends via npm. To publish a new version of this library follow the following steps:
+1 - Create a new branch from main and work on whatever updates, fixes or new features are needed.
+2 - Before updating the version, pull from main to guarantee you are on the last published version.
+3 - In the package.json file, update the version following the version semantics convention
+4 - Open a Pull Request with your changes and send it to review on the design system guild channel
+5 - When the PR is approved and the pipelines have passed, merge the branch
+6 - Checkout main and pull from origin
+7 - Run yarn publish (you will be requested for your NPM OTP, which should be available on your Google Authenticator App)

package/dist/assets/Alert.css

@@ -1 +1 @@
-._u-typography-h1_1043z_1{font-size:var(--heading-font-size-1);font-weight:var(--heading-font-weight);line-height:var(--heading-line-height-1);margin:0}._u-typography-h2_1043z_8{font-size:var(--heading-font-size-2);font-weight:var(--heading-font-weight);line-height:var(--heading-line-height-2);margin:0}._u-typography-h3_1043z_15{font-size:var(--heading-font-size-3);font-weight:var(--heading-font-weight);line-height:var(--heading-line-height-3);margin:0}._u-typography-h4_1043z_22{font-size:var(--heading-font-size-4);font-weight:var(--heading-font-weight);line-height:var(--heading-line-height-4);margin:0}._u-typography-h5_1043z_29{font-size:var(--heading-font-size-5);font-weight:var(--heading-font-weight);line-height:var(--heading-line-height-5);margin:0}._u-typography-h6_1043z_36{font-size:var(--heading-font-size-6);font-weight:var(--heading-font-weight);line-height:var(--heading-line-height-6);margin:0}._u-typography-base_1043z_43{margin:0;font-size:var(--base-font-size);font-weight:var(--base-weight);line-height:var(--base-line-height)}._u-typography-base--xxl_1043z_49{font-size:var(--base-font-size-xxl);line-height:var(--base-line-height-xxl)}._u-typography-base--xl_1043z_53{font-size:var(--base-font-size-xl);line-height:var(--base-line-height-xl)}._u-typography-base--lg_1043z_57{font-size:var(--base-font-size-lg);line-height:var(--base-line-height-lg)}._u-typography-base--sm_1043z_61{font-size:var(--base-font-size-sm);line-height:var(--base-line-height-sm)}._u-typography-base--bold_1043z_65{font-weight:var(--base-bold)}._u-typography-base--strikethrough_1043z_68{text-decoration:line-through}._u-typography-base--underlined_1043z_71{text-decoration:underline}._u-typography-base--strikethrough-underlined_1043z_74{text-decoration:underline line-through}._container_1043z_78{display:flex;width:100%;padding:16px;border:1px solid;border-radius:6px}._container--success_1043z_85{background-color:var(--green-1);border-color:var(--green-3)}._container--warning_1043z_89{background-color:var(--gold-1);border-color:var(--gold-3)}._container--error_1043z_93{background-color:var(--error-background);border-color:var(--error-border)}._container--info_1043z_97{background-color:var(--blue-1);border-color:var(--blue-3)}._container--default_1043z_101{background-color:var(--white-100);border-color:var(--border)}._container--close-icon_1043z_105{justify-self:flex-end;margin-left:16px;cursor:pointer}._container--content_1043z_110{width:100%}
+._u-typography-h1_zek1y_1{font-size:var(--heading-font-size-1);font-weight:var(--heading-font-weight);line-height:var(--heading-line-height-1);margin:0}._u-typography-h2_zek1y_8{font-size:var(--heading-font-size-2);font-weight:var(--heading-font-weight);line-height:var(--heading-line-height-2);margin:0}._u-typography-h3_zek1y_15{font-size:var(--heading-font-size-3);font-weight:var(--heading-font-weight);line-height:var(--heading-line-height-3);margin:0}._u-typography-h4_zek1y_22{font-size:var(--heading-font-size-4);font-weight:var(--heading-font-weight);line-height:var(--heading-line-height-4);margin:0}._u-typography-h5_zek1y_29{font-size:var(--heading-font-size-5);font-weight:var(--heading-font-weight);line-height:var(--heading-line-height-5);margin:0}._u-typography-h6_zek1y_36{font-size:var(--heading-font-size-6);font-weight:var(--heading-font-weight);line-height:var(--heading-line-height-6);margin:0}._u-typography-base_zek1y_43{margin:0;font-size:var(--base-font-size);font-weight:var(--base-weight);line-height:var(--base-line-height)}._u-typography-base--xxl_zek1y_49{font-size:var(--base-font-size-xxl);line-height:var(--base-line-height-xxl)}._u-typography-base--xl_zek1y_53{font-size:var(--base-font-size-xl);line-height:var(--base-line-height-xl)}._u-typography-base--lg_zek1y_57{font-size:var(--base-font-size-lg);line-height:var(--base-line-height-lg)}._u-typography-base--sm_zek1y_61{font-size:var(--base-font-size-sm);line-height:var(--base-line-height-sm)}._u-typography-base--bold_zek1y_65{font-weight:var(--base-bold)}._u-typography-base--strikethrough_zek1y_68{text-decoration:line-through}._u-typography-base--underlined_zek1y_71{text-decoration:underline}._u-typography-base--strikethrough-underlined_zek1y_74{text-decoration:underline line-through}._container_zek1y_78{display:flex;width:100%;padding:16px;border:1px solid;border-radius:6px}._container_zek1y_78 ._container--wrapper-content_zek1y_85{width:100%;display:flex;flex-direction:column;gap:.5rem}._container_zek1y_78 ._container--wrapper-content_zek1y_85 ._container--wrapper-header_zek1y_91,._container_zek1y_78 ._container--wrapper-content_zek1y_85 ._container--wrapper-body_zek1y_92{width:100%;display:flex;align-items:center;gap:.75rem}._container_zek1y_78 ._container--wrapper-content_zek1y_85 ._container--wrapper-header_zek1y_91 ._container--title_zek1y_98,._container_zek1y_78 ._container--wrapper-content_zek1y_85 ._container--wrapper-header_zek1y_91 ._container--content_zek1y_99,._container_zek1y_78 ._container--wrapper-content_zek1y_85 ._container--wrapper-body_zek1y_92 ._container--title_zek1y_98,._container_zek1y_78 ._container--wrapper-content_zek1y_85 ._container--wrapper-body_zek1y_92 ._container--content_zek1y_99{width:100%}._container_zek1y_78 ._container--wrapper-content_zek1y_85 ._container--wrapper-header_zek1y_91 ._container--icon_zek1y_104,._container_zek1y_78 ._container--wrapper-content_zek1y_85 ._container--wrapper-body_zek1y_92 ._container--icon_zek1y_104{display:flex}._container_zek1y_78 ._container--wrapper-content_zek1y_85 ._container--wrapper-header_zek1y_91 ._container--icon_zek1y_104._hidden-icon_zek1y_108,._container_zek1y_78 ._container--wrapper-content_zek1y_85 ._container--wrapper-body_zek1y_92 ._container--icon_zek1y_104._hidden-icon_zek1y_108{visibility:hidden}._container--success_zek1y_112{background-color:var(--green-1);border-color:var(--green-3)}._container--success_zek1y_112 ._container--icon_zek1y_104 svg{fill:var(--green-6)}._container--warning_zek1y_119{background-color:var(--gold-1);border-color:var(--gold-3)}._container--warning_zek1y_119 ._container--icon_zek1y_104 svg{fill:var(--gold-6)}._container--error_zek1y_126{background-color:var(--error-background);border-color:var(--error-border)}._container--error_zek1y_126 ._container--icon_zek1y_104 svg{fill:var(--error-text)}._container--info_zek1y_133{background-color:var(--blue-1);border-color:var(--blue-3)}._container--info_zek1y_133 ._container--icon_zek1y_104 svg{fill:var(--blue-6)}._container--default_zek1y_140{background-color:var(--white-100);border-color:var(--border)}._container--close-icon_zek1y_144{justify-self:flex-end;margin-left:16px;cursor:pointer}._container--content_zek1y_99{width:100%}

package/dist/components/Alert/Alert.d.ts

@@ -1,10 +1,16 @@
 import { ReactNode } from 'react';
+import { IconName } from '../Icon/types';
 type AlertType = 'success' | 'error' | 'info' | 'warning' | 'default';
 type AlertProps = {
     type?: AlertType;
-    children: ReactNode;
+    children?: ReactNode;
+    title?: ReactNode;
+    content?: ReactNode;
     'data-testid'?: string;
     onClose?: () => void;
+    useDefaultIcon?: boolean;
+    customIconName?: IconName;
+    className?: string;
 };
-export declare const Alert: ({ type, children, "data-testid": dataTestId, onClose }: AlertProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Alert: ({ type, children, "data-testid": dataTestId, onClose, className, useDefaultIcon, customIconName, title, content, }: AlertProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Alert/Alert.js

@@ -1,45 +1,76 @@
-import { jsxs as p, jsx as a } from "react/jsx-runtime";
-import { c as y } from "../../clsx-OuTLNxxd.js";
-import { Icon as s } from "../Icon/Icon.js";
-import '../../assets/Alert.css';const h = "_container_1043z_78", t = {
-  "u-typography-h1": "_u-typography-h1_1043z_1",
-  "u-typography-h2": "_u-typography-h2_1043z_8",
-  "u-typography-h3": "_u-typography-h3_1043z_15",
-  "u-typography-h4": "_u-typography-h4_1043z_22",
-  "u-typography-h5": "_u-typography-h5_1043z_29",
-  "u-typography-h6": "_u-typography-h6_1043z_36",
-  "u-typography-base": "_u-typography-base_1043z_43",
-  "u-typography-base--xxl": "_u-typography-base--xxl_1043z_49",
-  "u-typography-base--xl": "_u-typography-base--xl_1043z_53",
-  "u-typography-base--lg": "_u-typography-base--lg_1043z_57",
-  "u-typography-base--sm": "_u-typography-base--sm_1043z_61",
-  "u-typography-base--bold": "_u-typography-base--bold_1043z_65",
-  "u-typography-base--strikethrough": "_u-typography-base--strikethrough_1043z_68",
-  "u-typography-base--underlined": "_u-typography-base--underlined_1043z_71",
-  "u-typography-base--strikethrough-underlined": "_u-typography-base--strikethrough-underlined_1043z_74",
-  container: h,
-  "container--success": "_container--success_1043z_85",
-  "container--warning": "_container--warning_1043z_89",
-  "container--error": "_container--error_1043z_93",
-  "container--info": "_container--info_1043z_97",
-  "container--default": "_container--default_1043z_101",
-  "container--close-icon": "_container--close-icon_1043z_105",
-  "container--content": "_container--content_1043z_110"
-}, g = ({ type: e = "default", children: n, "data-testid": o, onClose: r }) => {
-  const _ = y(t.container, t[`container--${e}`]);
-  return /* @__PURE__ */ p("div", { "data-testid": o, className: _, children: [
-    /* @__PURE__ */ a("div", { className: t["container--content"], children: n }),
-    !!r && /* @__PURE__ */ a(
+import { jsxs as t, jsx as n } from "react/jsx-runtime";
+import { c as l } from "../../clsx-OuTLNxxd.js";
+import { Icon as i } from "../Icon/Icon.js";
+import '../../assets/Alert.css';const z = "_container_zek1y_78", e = {
+  "u-typography-h1": "_u-typography-h1_zek1y_1",
+  "u-typography-h2": "_u-typography-h2_zek1y_8",
+  "u-typography-h3": "_u-typography-h3_zek1y_15",
+  "u-typography-h4": "_u-typography-h4_zek1y_22",
+  "u-typography-h5": "_u-typography-h5_zek1y_29",
+  "u-typography-h6": "_u-typography-h6_zek1y_36",
+  "u-typography-base": "_u-typography-base_zek1y_43",
+  "u-typography-base--xxl": "_u-typography-base--xxl_zek1y_49",
+  "u-typography-base--xl": "_u-typography-base--xl_zek1y_53",
+  "u-typography-base--lg": "_u-typography-base--lg_zek1y_57",
+  "u-typography-base--sm": "_u-typography-base--sm_zek1y_61",
+  "u-typography-base--bold": "_u-typography-base--bold_zek1y_65",
+  "u-typography-base--strikethrough": "_u-typography-base--strikethrough_zek1y_68",
+  "u-typography-base--underlined": "_u-typography-base--underlined_zek1y_71",
+  "u-typography-base--strikethrough-underlined": "_u-typography-base--strikethrough-underlined_zek1y_74",
+  container: z,
+  "container--wrapper-content": "_container--wrapper-content_zek1y_85",
+  "container--wrapper-header": "_container--wrapper-header_zek1y_91",
+  "container--wrapper-body": "_container--wrapper-body_zek1y_92",
+  "container--title": "_container--title_zek1y_98",
+  "container--content": "_container--content_zek1y_99",
+  "container--icon": "_container--icon_zek1y_104",
+  "hidden-icon": "_hidden-icon_zek1y_108",
+  "container--success": "_container--success_zek1y_112",
+  "container--warning": "_container--warning_zek1y_119",
+  "container--error": "_container--error_zek1y_126",
+  "container--info": "_container--info_zek1y_133",
+  "container--default": "_container--default_zek1y_140",
+  "container--close-icon": "_container--close-icon_zek1y_144"
+}, b = {
+  success: "circle-check",
+  error: "circle-exclamation",
+  info: "circle-info",
+  warning: "circle-exclamation",
+  default: void 0
+}, w = ({
+  type: y = "default",
+  children: a,
+  "data-testid": _,
+  onClose: p,
+  className: d,
+  useDefaultIcon: u,
+  customIconName: g,
+  title: s,
+  content: h
+}) => {
+  const k = l(e.container, e[`container--${y}`], d), r = g ?? (u ? b[y] : void 0), o = s ?? (!h && a ? a : void 0), c = h ?? (s && a ? a : void 0);
+  return /* @__PURE__ */ t("div", { "data-testid": _, className: k, children: [
+    /* @__PURE__ */ t("div", { className: e["container--wrapper-content"], children: [
+      o ? /* @__PURE__ */ t("div", { className: e["container--wrapper-header"], children: [
+        r && /* @__PURE__ */ n("div", { className: e["container--icon"], children: /* @__PURE__ */ n(i, { icon: r }) }),
+        o && /* @__PURE__ */ n("div", { className: e["container--title"], children: o })
+      ] }) : null,
+      c ? /* @__PURE__ */ t("div", { className: e["container--wrapper-body"], children: [
+        r && /* @__PURE__ */ n("div", { className: l(e["container--icon"], o && e["hidden-icon"]), children: /* @__PURE__ */ n(i, { icon: r }) }),
+        c && /* @__PURE__ */ n("div", { className: e["container--content"], children: c })
+      ] }) : null
+    ] }),
+    !!p && /* @__PURE__ */ n(
       "div",
       {
-        "data-testid": `${o}-close-button`,
-        onClick: () => r(),
-        className: t["container--close-icon"],
-        children: /* @__PURE__ */ a(s, { icon: "xmark" })
+        "data-testid": `${_}-close-button`,
+        onClick: () => p(),
+        className: e["container--close-icon"],
+        children: /* @__PURE__ */ n(i, { icon: "xmark" })
       }
     )
   ] });
 };
 export {
-  g as Alert
+  w as Alert
 };

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

@@ -1,11 +1,16 @@
 import { StoryObj } from '@storybook/react';
 declare const meta: {
     title: string;
-    component: ({ type, children, "data-testid": dataTestId, onClose }: {
+    component: ({ type, children, "data-testid": dataTestId, onClose, className, useDefaultIcon, customIconName, title, content, }: {
         type?: ("default" | "error" | "success" | "info" | "warning") | undefined;
-        children: import('react').ReactNode;
+        children?: import('react').ReactNode;
+        title?: import('react').ReactNode;
+        content?: import('react').ReactNode;
         'data-testid'?: string | undefined;
         onClose?: (() => void) | undefined;
+        useDefaultIcon?: boolean | undefined;
+        customIconName?: import('../Icon/types').IconName | undefined;
+        className?: string | undefined;
     }) => import("react/jsx-runtime").JSX.Element;
     tags: string[];
     parameters: {
@@ -14,6 +19,8 @@ declare const meta: {
 };
 export default meta;
 type Story = StoryObj<typeof meta>;
+export declare const TypeUseDefaultIconWithTitleAndContent: Story;
+export declare const TypeUseCustomIcon: Story;
 export declare const General: Story;
 export declare const Success: Story;
 export declare const Error: Story;

package/dist/components/Icon/types.d.ts

@@ -2,4 +2,4 @@
  * This file is automatically generated. Any changes will be lost.
  * run "yarn generate-icon-types" or "yarn build" to regenerate it.
  */
-export type IconName = 'alien-8bit' | 'arrow-down-arrow-up' | 'arrow-down-z-a' | 'arrow-left' | 'arrow-right' | 'arrow-right-to-arc' | 'arrow-up-right-from-square' | 'arrows-rotate' | 'badge-check' | 'bell' | 'building-columns' | 'calendar-days' | 'check-double' | 'chevron-down' | 'chevron-right' | 'chevron-up' | 'chevrons-right' | 'circle' | 'circle-arrow-right' | 'circle-check' | 'circle-check-outline' | 'circle-exclamation' | 'circle-exclamation-outline' | 'circle-info' | 'circle-minus' | 'circle-plus' | 'circle-x' | 'circle-xmark' | 'circle-xmark-outline' | 'clock' | 'clock-rotate-left' | 'coin' | 'coins' | 'computer-classic' | 'copy' | 'credit-card' | 'credit-card-blank' | 'credit-card-front' | 'download' | 'ellipsis-vertical' | 'empty-img' | 'empty-set' | 'eye' | 'eye-slash' | 'filter-list' | 'fingerprint' | 'folder-magnifying-glass' | 'folder-open' | 'gift-card' | 'grid-2' | 'grid-horizontal' | 'grip-dots-vertical' | 'headphones-simple' | 'house-blank' | 'id-badge' | 'inbox-full' | 'laptop' | 'light/star' | 'list' | 'loader' | 'lock-keyhole' | 'lock-keyhole-open' | 'logo' | 'magnifying-glass' | 'map-location-dot' | 'map-pin' | 'mobile-screen-button' | 'money-bill-transfer' | 'money-bill-trend-up' | 'money-bills' | 'notes-medical' | 'paste' | 'pen' | 'pen-to-square' | 'percent' | 'piggy-bank' | 'plus' | 'rectangle-history' | 'rectangle-history-circle-user' | 'rectangle-terminal' | 'rotate' | 'scale-balanced' | 'sd-card' | 'sd-cards' | 'server' | 'sheet-plastic' | 'sidebar' | 'sitemap' | 'solid/star' | 'squirrel' | 'stethoscope' | 'store' | 'timer' | 'trash' | 'trash-can' | 'upload' | 'user' | 'user-gear' | 'user-group' | 'user-tie' | 'user-tie-hair' | 'user-vneck' | 'users' | 'wallet' | 'warehouse-full' | 'xmark';
+export type IconName = 'alien-8bit' | 'arrow-down-arrow-up' | 'arrow-down-z-a' | 'arrow-left' | 'arrow-right' | 'arrow-right-to-arc' | 'arrow-up-right-from-square' | 'arrows-rotate' | 'badge-check' | 'bell' | 'building-columns' | 'calendar-days' | 'check-double' | 'chevron-down' | 'chevron-right' | 'chevron-up' | 'chevrons-right' | 'circle' | 'circle-arrow-right' | 'circle-check' | 'circle-check-outline' | 'circle-exclamation' | 'circle-exclamation-outline' | 'circle-info' | 'circle-minus' | 'circle-plus' | 'circle-x' | 'circle-xmark' | 'circle-xmark-outline' | 'clock' | 'clock-rotate-left' | 'coin' | 'coins' | 'computer-classic' | 'copy' | 'credit-card' | 'credit-card-blank' | 'credit-card-front' | 'download' | 'ellipsis-vertical' | 'empty-img' | 'empty-set' | 'eye' | 'eye-slash' | 'filter-list' | 'fingerprint' | 'folder-magnifying-glass' | 'folder-open' | 'gift-card' | 'graduation-cap' | 'grid-2' | 'grid-horizontal' | 'grip-dots-vertical' | 'headphones-simple' | 'house-blank' | 'id-badge' | 'inbox-full' | 'laptop' | 'light/star' | 'list' | 'loader' | 'lock-keyhole' | 'lock-keyhole-open' | 'logo' | 'magnifying-glass' | 'map-location-dot' | 'map-pin' | 'mobile-screen-button' | 'money-bill-transfer' | 'money-bill-trend-up' | 'money-bills' | 'notes-medical' | 'paste' | 'pen' | 'pen-to-square' | 'percent' | 'piggy-bank' | 'plus' | 'rectangle-history' | 'rectangle-history-circle-user' | 'rectangle-terminal' | 'rotate' | 'scale-balanced' | 'sd-card' | 'sd-cards' | 'server' | 'sheet-plastic' | 'sidebar' | 'sitemap' | 'solid/star' | 'squirrel' | 'stethoscope' | 'store' | 'timer' | 'trash' | 'trash-can' | 'upload' | 'user' | 'user-gear' | 'user-group' | 'user-group-crown' | 'user-tie' | 'user-tie-hair' | 'user-vneck' | 'users' | 'wallet' | 'warehouse-full' | 'xmark';