@pismo/marola 0.0.1-alpha.23 → 0.0.1-alpha.24

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/assets/Advice.css +1 -1
  2. package/dist/components/Advice/Advice.d.ts +5 -3
  3. package/dist/components/Advice/Advice.js +36 -28
  4. package/dist/components/Advice/Advice.stories.d.ts +3 -1
  5. package/package.json +1 -1
package/dist/assets/Advice.css CHANGED
@@ -1 +1 @@
1
- ._u-typography-h1_954or_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_954or_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_954or_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_954or_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_954or_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_954or_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_954or_43{font-size:var(--base-font-size);font-weight:var(--base-weight);line-height:var(--base-line-height)}._u-typography-base--xxl_954or_48{font-size:var(--base-font-size-xxl);line-height:var(--base-line-height-xxl)}._u-typography-base--xl_954or_52{font-size:var(--base-font-size-xl);line-height:var(--base-line-height-xl)}._u-typography-base--lg_954or_56,._advice_954or_56 ._content_954or_56,._advice_954or_56 p{font-size:var(--base-font-size-lg);line-height:var(--base-line-height-lg)}._u-typography-base--sm_954or_61{font-size:var(--base-font-size-sm);line-height:var(--base-line-height-sm)}._u-typography-base--bold_954or_65,._advice_954or_56 ._content_954or_56,._advice_954or_56 p{font-weight:var(--base-bold)}._u-typography-base--strikethrough_954or_69{text-decoration:line-through}._u-typography-base--underlined_954or_72{text-decoration:underline}._u-typography-base--strikethrough-underlined_954or_75{text-decoration:underline line-through}._advice_954or_56{display:flex;flex-direction:column;align-items:center;padding:2rem}._advice_954or_56 ._content_954or_56,._advice_954or_56 p{margin:0;color:var(--gray-75)}
1
+ ._u-typography-h1_42bqv_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_42bqv_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_42bqv_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_42bqv_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_42bqv_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_42bqv_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_42bqv_43{font-size:var(--base-font-size);font-weight:var(--base-weight);line-height:var(--base-line-height)}._u-typography-base--xxl_42bqv_48{font-size:var(--base-font-size-xxl);line-height:var(--base-line-height-xxl)}._u-typography-base--xl_42bqv_52{font-size:var(--base-font-size-xl);line-height:var(--base-line-height-xl)}._u-typography-base--lg_42bqv_56,._advice_42bqv_56 ._content_42bqv_56,._advice_42bqv_56 p{font-size:var(--base-font-size-lg);line-height:var(--base-line-height-lg)}._u-typography-base--sm_42bqv_61{font-size:var(--base-font-size-sm);line-height:var(--base-line-height-sm)}._u-typography-base--bold_42bqv_65,._advice_42bqv_56 ._content_42bqv_56,._advice_42bqv_56 p{font-weight:var(--base-bold)}._u-typography-base--strikethrough_42bqv_69{text-decoration:line-through}._u-typography-base--underlined_42bqv_72{text-decoration:underline}._u-typography-base--strikethrough-underlined_42bqv_75{text-decoration:underline line-through}._advice_42bqv_56{display:flex;flex-direction:column;align-items:center;padding:2rem}._advice_42bqv_56 ._content_42bqv_56,._advice_42bqv_56 p{margin:0;color:var(--gray-75)}._advice_42bqv_56 ._content-no-items_42bqv_90{display:flex;flex-direction:column;align-items:center;max-width:477px}._advice_42bqv_56 ._content-no-items_42bqv_90 h3{font-size:1.5rem;font-weight:700;color:#838192;padding:0;margin:1rem 0 0}._advice_42bqv_56 ._content-no-items_42bqv_90 p{font-size:1rem;color:#838192;font-weight:400;text-align:center;margin-bottom:1.5rem}
package/dist/components/Advice/Advice.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import { Icon } from '../Icon/Icon';
2
2
  import { ReactNode } from 'react';
3
3
 
4
- export type AdviceTypes = 'without-results' | 'no-permission';
4
+ export type AdviceTypes = 'without-results' | 'no-permission' | 'no-items' | 'error-page';
5
5
  export type AdviceProps = {
6
6
  /** Advice icon.
7
7
  * This property uses the Icon Component Props
@@ -14,7 +14,9 @@ export type AdviceProps = {
14
14
  /** Type of advice */
15
15
  type?: AdviceTypes;
16
16
  /** Advice content message */
17
- content: ReactNode;
17
+ content?: ReactNode;
18
+ title?: string;
19
+ description?: string;
18
20
  /** Space seperated list of CSS classes to apply */
19
21
  className?: string;
20
22
  /** ID that tests can use to get this component from the DOM */
@@ -24,5 +26,5 @@ export type AdviceProps = {
24
26
  * Advice component provide HTML with an icon and a message.
25
27
  * Is commonly used to indicate No Permission and No Results.
26
28
  */
27
- declare const Advice: ({ icon, type, content, className, IconSvg, ...rest }: AdviceProps) => import("react/jsx-runtime").JSX.Element;
29
+ declare const Advice: ({ icon, type, content, title, description, className, IconSvg, ...rest }: AdviceProps) => import("react/jsx-runtime").JSX.Element;
28
30
  export { Advice };
package/dist/components/Advice/Advice.js CHANGED
@@ -1,40 +1,48 @@
1
1
  import '../../assets/Advice.css';
2
- import { jsxs as u, jsx as p } from "react/jsx-runtime";
3
- import { c as g } from "../../clsx-DB4S2d7J.js";
4
- import { Icon as l } from "../Icon/Icon.js";
5
- const d = "_advice_954or_56", i = "_content_954or_56", e = {
6
- "u-typography-h1": "_u-typography-h1_954or_1",
7
- "u-typography-h2": "_u-typography-h2_954or_8",
8
- "u-typography-h3": "_u-typography-h3_954or_15",
9
- "u-typography-h4": "_u-typography-h4_954or_22",
10
- "u-typography-h5": "_u-typography-h5_954or_29",
11
- "u-typography-h6": "_u-typography-h6_954or_36",
12
- "u-typography-base": "_u-typography-base_954or_43",
13
- "u-typography-base--xxl": "_u-typography-base--xxl_954or_48",
14
- "u-typography-base--xl": "_u-typography-base--xl_954or_52",
15
- "u-typography-base--lg": "_u-typography-base--lg_954or_56",
2
+ import { jsxs as y, jsx as a } from "react/jsx-runtime";
3
+ import { c as l } from "../../clsx-DB4S2d7J.js";
4
+ import { Icon as i } from "../Icon/Icon.js";
5
+ const d = "_advice_42bqv_56", n = "_content_42bqv_56", s = {
6
+ "u-typography-h1": "_u-typography-h1_42bqv_1",
7
+ "u-typography-h2": "_u-typography-h2_42bqv_8",
8
+ "u-typography-h3": "_u-typography-h3_42bqv_15",
9
+ "u-typography-h4": "_u-typography-h4_42bqv_22",
10
+ "u-typography-h5": "_u-typography-h5_42bqv_29",
11
+ "u-typography-h6": "_u-typography-h6_42bqv_36",
12
+ "u-typography-base": "_u-typography-base_42bqv_43",
13
+ "u-typography-base--xxl": "_u-typography-base--xxl_42bqv_48",
14
+ "u-typography-base--xl": "_u-typography-base--xl_42bqv_52",
15
+ "u-typography-base--lg": "_u-typography-base--lg_42bqv_56",
16
16
  advice: d,
17
- content: i,
18
- "u-typography-base--sm": "_u-typography-base--sm_954or_61",
19
- "u-typography-base--bold": "_u-typography-base--bold_954or_65",
20
- "u-typography-base--strikethrough": "_u-typography-base--strikethrough_954or_69",
21
- "u-typography-base--underlined": "_u-typography-base--underlined_954or_72",
22
- "u-typography-base--strikethrough-underlined": "_u-typography-base--strikethrough-underlined_954or_75"
17
+ content: n,
18
+ "u-typography-base--sm": "_u-typography-base--sm_42bqv_61",
19
+ "u-typography-base--bold": "_u-typography-base--bold_42bqv_65",
20
+ "u-typography-base--strikethrough": "_u-typography-base--strikethrough_42bqv_69",
21
+ "u-typography-base--underlined": "_u-typography-base--underlined_42bqv_72",
22
+ "u-typography-base--strikethrough-underlined": "_u-typography-base--strikethrough-underlined_42bqv_75",
23
+ "content-no-items": "_content-no-items_42bqv_90"
23
24
  }, h = {
24
25
  "no-permission": "eye-slash",
26
+ "no-items": "",
27
+ "error-page": "circle-exclamation",
25
28
  "without-results": "folder-magnifying-glass"
26
- }, c = ({ icon: r, type: a, content: y, className: s, IconSvg: t, ..._ }) => {
29
+ }, q = ({ icon: r, type: e, content: t, title: _, description: g, className: u, IconSvg: p, ...b }) => {
27
30
  const o = {
28
- color: (r == null ? void 0 : r.color) || "var(--accent)",
31
+ color: r != null && r.color ? r == null ? void 0 : r.color : e !== "error-page" ? "var(--accent)" : "var(--secondary-orange)",
29
32
  size: (r == null ? void 0 : r.size) || "3.375rem",
30
- icon: h[a] || (r == null ? void 0 : r.icon) || "",
31
- iconFamily: h[a] ? "fa/duotone" : (r == null ? void 0 : r.iconFamily) || "fa/duotone"
33
+ icon: h[e] || (r == null ? void 0 : r.icon) || "",
34
+ iconFamily: h[e] ? "fa/duotone" : (r == null ? void 0 : r.iconFamily) || "fa/duotone"
32
35
  };
33
- return /* @__PURE__ */ u("div", { className: g(e.advice, s), ..._, children: [
34
- t ? /* @__PURE__ */ p(t, { style: { color: o.color, height: o.size, width: o.size } }) : /* @__PURE__ */ p(l, { ...o }),
35
- typeof y == "string" ? /* @__PURE__ */ p("p", { children: y }) : /* @__PURE__ */ p("div", { className: e.content, children: y })
36
+ return /* @__PURE__ */ y("div", { className: l(s.advice, u), ...b, children: [
37
+ p && e !== "no-items" && e !== "error-page" && /* @__PURE__ */ a(p, { style: { color: o.color, height: o.size, width: o.size } }),
38
+ !p && e !== "no-items" && /* @__PURE__ */ a(i, { ...o }),
39
+ e !== "error-page" && e !== "no-items" ? typeof t == "string" ? /* @__PURE__ */ a("p", { children: t }) : /* @__PURE__ */ a("div", { className: s.content, children: t }) : /* @__PURE__ */ y("div", { className: s["content-no-items"], children: [
40
+ /* @__PURE__ */ a("h3", { children: _ }),
41
+ /* @__PURE__ */ a("p", { children: g }),
42
+ t
43
+ ] })
36
44
  ] });
37
45
  };
38
46
  export {
39
- c as Advice
47
+ q as Advice
40
48
  };
package/dist/components/Advice/Advice.stories.d.ts CHANGED
@@ -2,7 +2,7 @@ import { StoryObj } from '@storybook/react';
2
2
 
3
3
  declare const meta: {
4
4
  title: string;
5
- component: ({ icon, type, content, className, IconSvg, ...rest }: import('./Advice').AdviceProps) => import("react/jsx-runtime").JSX.Element;
5
+ component: ({ icon, type, content, title, description, className, IconSvg, ...rest }: import('./Advice').AdviceProps) => import("react/jsx-runtime").JSX.Element;
6
6
  tags: string[];
7
7
  parameters: {
8
8
  layout: string;
@@ -14,3 +14,5 @@ export declare const WithoutResults: Story;
14
14
  export declare const NoPermission: Story;
15
15
  export declare const CustomIcon: Story;
16
16
  export declare const CustomIconSVG: Story;
17
+ export declare const NoItems: Story;
18
+ export declare const ErrorPage: Story;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@pismo/marola",
3
3
  "description": "CDX tribe component library",
4
- "version": "0.0.1-alpha.23",
4
+ "version": "0.0.1-alpha.24",
5
5
  "type": "module",
6
6
  "main": "dist/main.js",
7
7
  "types": "dist/main.d.ts",