@pismo/marola 1.0.0-beta.63 → 1.0.0-beta.65

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.
@@ -1 +1 @@
1
- ._u-typography-h1_13xad_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_13xad_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_13xad_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_13xad_22,._page-header__main-left-content_13xad_22 ._title_13xad_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_13xad_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_13xad_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_13xad_43,._page-header__main-left-content_13xad_22 ._subtitle_13xad_43{margin:0;font-size:var(--base-font-size);font-weight:var(--base-weight);line-height:var(--base-line-height)}._u-typography-base--xxl_13xad_49{font-size:var(--base-font-size-xxl);line-height:var(--base-line-height-xxl)}._u-typography-base--xl_13xad_53{font-size:var(--base-font-size-xl);line-height:var(--base-line-height-xl)}._u-typography-base--lg_13xad_57{font-size:var(--base-font-size-lg);line-height:var(--base-line-height-lg)}._u-typography-base--sm_13xad_61{font-size:var(--base-font-size-sm);line-height:var(--base-line-height-sm)}._u-typography-base--bold_13xad_65,._page-header__main-left-content_13xad_22 ._title_13xad_22{font-weight:var(--base-bold)}._u-typography-base--strikethrough_13xad_68{text-decoration:line-through}._u-typography-base--underlined_13xad_71{text-decoration:underline}._u-typography-base--strikethrough-underlined_13xad_74{text-decoration:underline line-through}._page-header_13xad_22{display:flex;flex-direction:column;justify-content:center;width:100%;min-height:7.375rem;background:var(--cream);-webkit-font-smoothing:antialiased!important}._page-header_13xad_22:has(._page-header__top-content_13xad_87){justify-content:flex-start}._page-header__top-content_13xad_87,._page-header__main-content_13xad_90,._page-header__bottom-content_13xad_90{width:64rem;max-width:100%;margin:0 auto}._page-header__top-content_13xad_87{padding:1rem 0 .5rem}._page-header__top-content_13xad_87 button{width:fit-content;height:1.125rem;padding:0;line-height:1.125rem}._page-header__breadcrumb_13xad_104{display:flex;gap:.25rem;align-items:center}._page-header__breadcrumb__separator_13xad_109{height:1.125rem;padding:0;margin-right:-.25rem;line-height:1.125rem}._page-header__main-content_13xad_90{position:relative;display:flex}._page-header__main-left-content_13xad_22{display:flex;flex:1;flex-direction:column;justify-content:center}._page-header__main-left-content_13xad_22 ._title_13xad_22,._page-header__main-left-content_13xad_22 ._subtitle_13xad_43{display:block;width:100%;padding:0;margin:0;color:var(--gray-90)}._page-header__main-left-content_13xad_22 ._account-header_13xad_133{flex:1}._page-header__main-left-content_13xad_22 ._account-header--container_13xad_136{position:absolute;max-width:80%;height:5.75rem;background-color:var(--white-100);border:1px solid var(--border-secondary);border-radius:8px}._page-header__main-right-content_13xad_144{display:flex;align-items:center;margin-bottom:1.125rem}._page-header__bottom-content_13xad_90{margin-top:.8125rem}._account-header-margin_13xad_153{margin-bottom:16px}
1
+ ._u-typography-h1_1loyf_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_1loyf_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_1loyf_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_1loyf_22,._page-header__main-left-content_1loyf_22 ._title_1loyf_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_1loyf_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_1loyf_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_1loyf_43,._page-header__main-left-content_1loyf_22 ._subtitle_1loyf_43{margin:0;font-size:var(--base-font-size);font-weight:var(--base-weight);line-height:var(--base-line-height)}._u-typography-base--xxl_1loyf_49{font-size:var(--base-font-size-xxl);line-height:var(--base-line-height-xxl)}._u-typography-base--xl_1loyf_53{font-size:var(--base-font-size-xl);line-height:var(--base-line-height-xl)}._u-typography-base--lg_1loyf_57{font-size:var(--base-font-size-lg);line-height:var(--base-line-height-lg)}._u-typography-base--sm_1loyf_61{font-size:var(--base-font-size-sm);line-height:var(--base-line-height-sm)}._u-typography-base--bold_1loyf_65,._page-header__main-left-content_1loyf_22 ._title_1loyf_22{font-weight:var(--base-bold)}._u-typography-base--strikethrough_1loyf_68{text-decoration:line-through}._u-typography-base--underlined_1loyf_71{text-decoration:underline}._u-typography-base--strikethrough-underlined_1loyf_74{text-decoration:underline line-through}._page-header_1loyf_22{display:flex;flex-direction:column;justify-content:center;width:100%;min-height:7.375rem;background:var(--cream);-webkit-font-smoothing:antialiased!important}._page-header_1loyf_22:has(._page-header__top-content_1loyf_87){justify-content:flex-start}._page-header__top-content_1loyf_87,._page-header__main-content_1loyf_90,._page-header__bottom-content_1loyf_90{width:64rem;max-width:100%;margin:0 auto}._page-header__top-content_1loyf_87{padding:1rem 0 .5rem}._page-header__top-content_1loyf_87 button{width:fit-content;height:1.125rem;padding:0;line-height:1.125rem}._page-header__breadcrumb_1loyf_104{display:flex;gap:.25rem;align-items:center}._page-header__breadcrumb_1loyf_104 button{color:var(--gray-95)}._page-header__breadcrumb_1loyf_104 button:hover:enabled{color:var(--hover)}._page-header__breadcrumb__separator_1loyf_115{height:1.125rem;padding:0;margin-right:-.25rem;line-height:1.125rem}._page-header__main-content_1loyf_90{position:relative;display:flex}._page-header__main-left-content_1loyf_22{display:flex;flex:1;flex-direction:column;justify-content:center}._page-header__main-left-content_1loyf_22 ._title_1loyf_22,._page-header__main-left-content_1loyf_22 ._subtitle_1loyf_43{display:block;width:100%;padding:0;margin:0;color:var(--gray-90)}._page-header__main-left-content_1loyf_22 ._account-header_1loyf_139{flex:1}._page-header__main-left-content_1loyf_22 ._account-header--container_1loyf_142{position:absolute;max-width:80%;height:5.75rem;background-color:var(--white-100);border:1px solid var(--border-secondary);border-radius:8px}._page-header__main-right-content_1loyf_150{display:flex;align-items:center;margin-bottom:1.125rem}._page-header__bottom-content_1loyf_90{margin-top:.8125rem}._account-header-margin_1loyf_159{margin-bottom:16px}
@@ -6,9 +6,11 @@ export interface DescriptionProps {
6
6
  value: React.ReactNode;
7
7
  /** Renders skeleton when true */
8
8
  isLoading?: boolean;
9
+ /** Description label and value color */
10
+ color?: string;
9
11
  /** Sets the data-testid prefix for label, value and skeletons */
10
12
  'data-testid'?: string;
11
13
  /** Sets the label and value onto the same line */
12
14
  inline?: boolean;
13
15
  }
14
- export declare const Description: ({ label, value, isLoading, "data-testid": dataTestId, inline, }: DescriptionProps) => import("react/jsx-runtime").JSX.Element;
16
+ export declare const Description: ({ label, value, isLoading, color, "data-testid": dataTestId, inline, }: DescriptionProps) => import("react/jsx-runtime").JSX.Element;
@@ -1,9 +1,9 @@
1
1
  import '../../assets/Description.css';
2
- import { jsxs as n, jsx as t } from "react/jsx-runtime";
3
- import { c as s } from "../../clsx-DB4S2d7J.js";
2
+ import { jsxs as s, jsx as t } from "react/jsx-runtime";
3
+ import { c as i } from "../../clsx-DB4S2d7J.js";
4
4
  import { Skeleton as o } from "../Skeleton/Skeleton.js";
5
- import { Typography as p } from "../Typography/Typography.js";
6
- const i = "_container_he0z3_78", a = {
5
+ import { Typography as y } from "../Typography/Typography.js";
6
+ const u = "_container_he0z3_78", a = {
7
7
  "u-typography-h1": "_u-typography-h1_he0z3_1",
8
8
  "u-typography-h2": "_u-typography-h2_he0z3_8",
9
9
  "u-typography-h3": "_u-typography-h3_he0z3_15",
@@ -19,36 +19,46 @@ const i = "_container_he0z3_78", a = {
19
19
  "u-typography-base--strikethrough": "_u-typography-base--strikethrough_he0z3_68",
20
20
  "u-typography-base--underlined": "_u-typography-base--underlined_he0z3_71",
21
21
  "u-typography-base--strikethrough-underlined": "_u-typography-base--strikethrough-underlined_he0z3_74",
22
- container: i,
22
+ container: u,
23
23
  "container--text": "_container--text_he0z3_82",
24
24
  "container--inline": "_container--inline_he0z3_85"
25
- }, c = ({
26
- label: y,
27
- value: _,
25
+ }, d = ({
26
+ label: _,
27
+ value: n,
28
28
  isLoading: r,
29
+ color: h = "var(--gray-95)",
29
30
  "data-testid": e = "Description",
30
- inline: h
31
- }) => /* @__PURE__ */ n(
31
+ inline: p
32
+ }) => /* @__PURE__ */ s(
32
33
  "div",
33
34
  {
34
- className: s([a.container, { [a["container--inline"]]: h }]),
35
+ className: i([a.container, { [a["container--inline"]]: p }]),
35
36
  "data-testid": `${e}-container`,
36
37
  children: [
37
- /* @__PURE__ */ t(p, { className: a["container--text"], variant: "base", "data-testid": `${e}-label`, children: r ? /* @__PURE__ */ t(o, { style: { width: 70, marginBottom: 2 }, "data-testid": `${e}-skeletonLabel` }) : y }),
38
38
  /* @__PURE__ */ t(
39
- p,
39
+ y,
40
+ {
41
+ color: h,
42
+ className: a["container--text"],
43
+ variant: "base",
44
+ "data-testid": `${e}-label`,
45
+ children: r ? /* @__PURE__ */ t(o, { style: { width: 70, marginBottom: 2 }, "data-testid": `${e}-skeletonLabel` }) : _
46
+ }
47
+ ),
48
+ /* @__PURE__ */ t(
49
+ y,
40
50
  {
41
51
  className: a["container--text"],
42
52
  bold: !0,
43
- color: "var(--gray-95)",
44
- variant: h ? "base" : "base-lg",
53
+ color: h,
54
+ variant: p ? "base" : "base-lg",
45
55
  "data-testid": `${e}-value`,
46
- children: r ? /* @__PURE__ */ t(o, { style: { width: 100 }, "data-testid": `${e}-skeletonValue` }) : _ || "-"
56
+ children: r ? /* @__PURE__ */ t(o, { style: { width: 100 }, "data-testid": `${e}-skeletonValue` }) : n || "-"
47
57
  }
48
58
  )
49
59
  ]
50
60
  }
51
61
  );
52
62
  export {
53
- c as Description
63
+ d as Description
54
64
  };
@@ -2,7 +2,7 @@ import { StoryObj } from '@storybook/react';
2
2
 
3
3
  declare const meta: {
4
4
  title: string;
5
- component: ({ label, value, isLoading, "data-testid": dataTestId, inline, }: import('./Description').DescriptionProps) => import("react/jsx-runtime").JSX.Element;
5
+ component: ({ label, value, isLoading, color, "data-testid": dataTestId, inline, }: import('./Description').DescriptionProps) => import("react/jsx-runtime").JSX.Element;
6
6
  tags: string[];
7
7
  parameters: {
8
8
  layout: string;
@@ -11,7 +11,9 @@ declare const meta: {
11
11
  export default meta;
12
12
  type Story = StoryObj<typeof meta>;
13
13
  export declare const Simple: Story;
14
+ export declare const WithColor: Story;
14
15
  export declare const InLine: Story;
16
+ export declare const InLineWithColor: Story;
15
17
  export declare const Loading: Story;
16
18
  export declare const LoadingInline: Story;
17
19
  export declare const InLineWithButton: Story;
@@ -1,92 +1,92 @@
1
1
  import '../../assets/PageHeader.css';
2
- import { jsx as a, Fragment as i, jsxs as l } from "react/jsx-runtime";
2
+ import { jsx as e, Fragment as l, jsxs as i } from "react/jsx-runtime";
3
3
  import { useMemo as H } from "react";
4
- import { c as d } from "../../clsx-DB4S2d7J.js";
4
+ import { c as _ } from "../../clsx-DB4S2d7J.js";
5
5
  import { Icon as I } from "../Icon/Icon.js";
6
6
  import { IconButton as T } from "../IconButton/IconButton.js";
7
- const $ = "_title_13xad_22", q = "_subtitle_13xad_43", e = {
8
- "u-typography-h1": "_u-typography-h1_13xad_1",
9
- "u-typography-h2": "_u-typography-h2_13xad_8",
10
- "u-typography-h3": "_u-typography-h3_13xad_15",
11
- "u-typography-h4": "_u-typography-h4_13xad_22",
12
- "page-header__main-left-content": "_page-header__main-left-content_13xad_22",
7
+ const $ = "_title_1loyf_22", q = "_subtitle_1loyf_43", a = {
8
+ "u-typography-h1": "_u-typography-h1_1loyf_1",
9
+ "u-typography-h2": "_u-typography-h2_1loyf_8",
10
+ "u-typography-h3": "_u-typography-h3_1loyf_15",
11
+ "u-typography-h4": "_u-typography-h4_1loyf_22",
12
+ "page-header__main-left-content": "_page-header__main-left-content_1loyf_22",
13
13
  title: $,
14
- "u-typography-h5": "_u-typography-h5_13xad_29",
15
- "u-typography-h6": "_u-typography-h6_13xad_36",
16
- "u-typography-base": "_u-typography-base_13xad_43",
14
+ "u-typography-h5": "_u-typography-h5_1loyf_29",
15
+ "u-typography-h6": "_u-typography-h6_1loyf_36",
16
+ "u-typography-base": "_u-typography-base_1loyf_43",
17
17
  subtitle: q,
18
- "u-typography-base--xxl": "_u-typography-base--xxl_13xad_49",
19
- "u-typography-base--xl": "_u-typography-base--xl_13xad_53",
20
- "u-typography-base--lg": "_u-typography-base--lg_13xad_57",
21
- "u-typography-base--sm": "_u-typography-base--sm_13xad_61",
22
- "u-typography-base--bold": "_u-typography-base--bold_13xad_65",
23
- "u-typography-base--strikethrough": "_u-typography-base--strikethrough_13xad_68",
24
- "u-typography-base--underlined": "_u-typography-base--underlined_13xad_71",
25
- "u-typography-base--strikethrough-underlined": "_u-typography-base--strikethrough-underlined_13xad_74",
26
- "page-header": "_page-header_13xad_22",
27
- "page-header__top-content": "_page-header__top-content_13xad_87",
28
- "page-header__main-content": "_page-header__main-content_13xad_90",
29
- "page-header__bottom-content": "_page-header__bottom-content_13xad_90",
30
- "page-header__breadcrumb": "_page-header__breadcrumb_13xad_104",
31
- "page-header__breadcrumb__separator": "_page-header__breadcrumb__separator_13xad_109",
32
- "account-header": "_account-header_13xad_133",
33
- "account-header--container": "_account-header--container_13xad_136",
34
- "page-header__main-right-content": "_page-header__main-right-content_13xad_144",
35
- "account-header-margin": "_account-header-margin_13xad_153"
18
+ "u-typography-base--xxl": "_u-typography-base--xxl_1loyf_49",
19
+ "u-typography-base--xl": "_u-typography-base--xl_1loyf_53",
20
+ "u-typography-base--lg": "_u-typography-base--lg_1loyf_57",
21
+ "u-typography-base--sm": "_u-typography-base--sm_1loyf_61",
22
+ "u-typography-base--bold": "_u-typography-base--bold_1loyf_65",
23
+ "u-typography-base--strikethrough": "_u-typography-base--strikethrough_1loyf_68",
24
+ "u-typography-base--underlined": "_u-typography-base--underlined_1loyf_71",
25
+ "u-typography-base--strikethrough-underlined": "_u-typography-base--strikethrough-underlined_1loyf_74",
26
+ "page-header": "_page-header_1loyf_22",
27
+ "page-header__top-content": "_page-header__top-content_1loyf_87",
28
+ "page-header__main-content": "_page-header__main-content_1loyf_90",
29
+ "page-header__bottom-content": "_page-header__bottom-content_1loyf_90",
30
+ "page-header__breadcrumb": "_page-header__breadcrumb_1loyf_104",
31
+ "page-header__breadcrumb__separator": "_page-header__breadcrumb__separator_1loyf_115",
32
+ "account-header": "_account-header_1loyf_139",
33
+ "account-header--container": "_account-header--container_1loyf_142",
34
+ "page-header__main-right-content": "_page-header__main-right-content_1loyf_150",
35
+ "account-header-margin": "_account-header-margin_1loyf_159"
36
36
  }, D = ({
37
37
  title: n,
38
- subtitle: g,
39
- rightChildren: u,
40
- bottomChildren: o,
41
- classNameWrapper: y,
42
- classNameTitle: x,
38
+ subtitle: y,
39
+ rightChildren: g,
40
+ bottomChildren: h,
41
+ classNameWrapper: u,
42
+ classNameTitle: f,
43
43
  classNameSubtitle: k,
44
44
  headerBubble: r,
45
45
  "data-testid-wrapper": N,
46
- "data-testid-title": f,
47
- "data-testid-subtitle": v,
46
+ "data-testid-title": v,
47
+ "data-testid-subtitle": x,
48
48
  "data-testid-account-header": C,
49
49
  ...L
50
50
  }) => {
51
51
  const {
52
- breadcrumb: h,
52
+ breadcrumb: s,
53
53
  backLinkText: p,
54
- onBackLinkClick: s,
54
+ onBackLinkClick: c,
55
55
  classNameBackLink: m,
56
56
  "data-testid-backLink": b,
57
57
  ...w
58
58
  } = L;
59
- r && (n || g || o) && console.error("headerBubble prop can not be used with title, subtitle or bottomChildren"), !r && !n && console.error("title prop is required when not using headerBubble");
60
- const j = r ? d([e["page-header"], y, e["account-header-margin"]]) : d([e["page-header"], y]), B = H(() => {
61
- const _ = [];
62
- return p && s && _.push({
59
+ r && (n || y || h) && console.error("headerBubble prop can not be used with title, subtitle or bottomChildren"), !r && !n && console.error("title prop is required when not using headerBubble");
60
+ const j = r ? _([a["page-header"], u, a["account-header-margin"]]) : _([a["page-header"], u]), B = H(() => {
61
+ const o = [];
62
+ return p && c && o.push({
63
63
  label: p,
64
64
  className: m,
65
65
  "data-testid": b,
66
- onClick: s
67
- }), h && _.push(...h), /* @__PURE__ */ a("div", { className: e["page-header__top-content"], children: /* @__PURE__ */ a("div", { className: e["page-header__breadcrumb"], children: _.map((t, c) => /* @__PURE__ */ a(
66
+ onClick: c
67
+ }), s && o.push(...s), /* @__PURE__ */ e("div", { className: a["page-header__top-content"], children: /* @__PURE__ */ e("div", { className: a["page-header__breadcrumb"], children: o.map((t, d) => /* @__PURE__ */ e(
68
68
  T,
69
69
  {
70
- icon: c === 0 ? /* @__PURE__ */ a(I, { icon: "arrow-left" }) : /* @__PURE__ */ a("span", { className: e["page-header__breadcrumb__separator"], children: "/" }),
70
+ icon: d === 0 ? /* @__PURE__ */ e(I, { icon: "house-blank" }) : /* @__PURE__ */ e("span", { className: a["page-header__breadcrumb__separator"], children: "/" }),
71
71
  onClick: () => t.onClick && t.onClick(),
72
72
  className: t.className,
73
73
  "data-testid": t["data-testid"],
74
- disabled: _.length === 1 ? !1 : c === _.length - 1,
74
+ disabled: o.length === 1 ? !1 : d === o.length - 1,
75
75
  children: t.label
76
76
  },
77
- `${t.label}_${c}`
77
+ `${t.label}_${d}`
78
78
  )) }) });
79
- }, [h, p, m, b, s]);
80
- return /* @__PURE__ */ a(i, { children: /* @__PURE__ */ l("div", { className: j, "data-testid": N, ...w, children: [
79
+ }, [s, p, m, b, c]);
80
+ return /* @__PURE__ */ e(l, { children: /* @__PURE__ */ i("div", { className: j, "data-testid": N, ...w, children: [
81
81
  B,
82
- /* @__PURE__ */ l("div", { className: e["page-header__main-content"], children: [
83
- /* @__PURE__ */ a("div", { className: e["page-header__main-left-content"], children: r ? /* @__PURE__ */ a(i, { children: /* @__PURE__ */ a("div", { className: e["account-header"], children: /* @__PURE__ */ a("div", { className: e["account-header--container"], "data-testid": C, children: r }) }) }) : /* @__PURE__ */ l(i, { children: [
84
- /* @__PURE__ */ a("h1", { className: d(e.title, x), "data-testid": f, children: n }),
85
- /* @__PURE__ */ a("h2", { className: d(e.subtitle, k), "data-testid": v, children: g })
82
+ /* @__PURE__ */ i("div", { className: a["page-header__main-content"], children: [
83
+ /* @__PURE__ */ e("div", { className: a["page-header__main-left-content"], children: r ? /* @__PURE__ */ e(l, { children: /* @__PURE__ */ e("div", { className: a["account-header"], children: /* @__PURE__ */ e("div", { className: a["account-header--container"], "data-testid": C, children: r }) }) }) : /* @__PURE__ */ i(l, { children: [
84
+ /* @__PURE__ */ e("h1", { className: _(a.title, f), "data-testid": v, children: n }),
85
+ /* @__PURE__ */ e("h2", { className: _(a.subtitle, k), "data-testid": x, children: y })
86
86
  ] }) }),
87
- u && /* @__PURE__ */ a("div", { className: e["page-header__main-right-content"], children: u })
87
+ g && /* @__PURE__ */ e("div", { className: a["page-header__main-right-content"], children: g })
88
88
  ] }),
89
- o && /* @__PURE__ */ a("div", { className: e["page-header__bottom-content"], children: o })
89
+ h && /* @__PURE__ */ e("div", { className: a["page-header__bottom-content"], children: h })
90
90
  ] }) });
91
91
  };
92
92
  export {
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@pismo/marola",
3
3
  "description": "CDX tribe component library",
4
- "version": "1.0.0-beta.63",
4
+ "version": "1.0.0-beta.65",
5
5
  "type": "module",
6
6
  "main": "dist/main.js",
7
7
  "types": "dist/main.d.ts",