@pzh-ui/react 0.0.3 → 0.0.4
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
|
-
{"version":3,"file":"Notification.d.ts","sourceRoot":"","sources":["../../src/Notification/Notification.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAIjC,KAAK,mBAAmB,GAAG,MAAM,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,CAAA;AACvE,KAAK,gBAAgB,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,CAAA;AAExC,MAAM,WAAW,iBAAiB;IAC9B,OAAO,CAAC,EAAE,mBAAmB,CAAA;IAC7B,IAAI,CAAC,EAAE,gBAAgB,CAAA;IACvB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,KAAK,EAAE,SAAS,CAAA;IAChB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CACvB;AAoDD,eAAO,MAAM,YAAY,GAAI,yDAO1B,iBAAiB,
|
|
1
|
+
{"version":3,"file":"Notification.d.ts","sourceRoot":"","sources":["../../src/Notification/Notification.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAIjC,KAAK,mBAAmB,GAAG,MAAM,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,CAAA;AACvE,KAAK,gBAAgB,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,CAAA;AAExC,MAAM,WAAW,iBAAiB;IAC9B,OAAO,CAAC,EAAE,mBAAmB,CAAA;IAC7B,IAAI,CAAC,EAAE,gBAAgB,CAAA;IACvB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,KAAK,EAAE,SAAS,CAAA;IAChB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CACvB;AAoDD,eAAO,MAAM,YAAY,GAAI,yDAO1B,iBAAiB,4CA0DnB,CAAA"}
|
|
@@ -52,7 +52,7 @@ var l = {
|
|
|
52
52
|
}, d = ({ variant: i = "info", size: a = "m", className: o, children: s, title: d, onClose: f }) => {
|
|
53
53
|
let { icon: p, container: m, body: h } = l[i], { padding: g, iconSize: _, iconClass: v, iconMargin: y, titleClass: b, bodySize: x } = u[a];
|
|
54
54
|
return /* @__PURE__ */ n("div", {
|
|
55
|
-
className: e("inline-block rounded border", m, g, o),
|
|
55
|
+
className: e("prose prose-neutral text-pzh-blue-900 marker:text-pzh-blue-900 prose-li:my-0 prose-ul:my-0 prose-p:my-0 prose-ul:pl-5 inline-block w-full max-w-full rounded border whitespace-pre-line marker:text-xs", m, g, o),
|
|
56
56
|
children: /* @__PURE__ */ r("div", {
|
|
57
57
|
className: "flex items-start justify-between gap-2",
|
|
58
58
|
children: [/* @__PURE__ */ r("div", {
|
|
@@ -67,11 +67,14 @@ var l = {
|
|
|
67
67
|
bold: !0,
|
|
68
68
|
className: e("block", b, h),
|
|
69
69
|
children: d
|
|
70
|
-
}), s && /* @__PURE__ */ n(t, {
|
|
70
|
+
}), s && (typeof s == "string" ? /* @__PURE__ */ n(t, {
|
|
71
71
|
size: x,
|
|
72
72
|
className: h,
|
|
73
73
|
children: s
|
|
74
|
-
})
|
|
74
|
+
}) : /* @__PURE__ */ n("div", {
|
|
75
|
+
className: e("flex flex-col gap-4", h),
|
|
76
|
+
children: s
|
|
77
|
+
}))]
|
|
75
78
|
})]
|
|
76
79
|
}), f && /* @__PURE__ */ n("button", {
|
|
77
80
|
type: "button",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Notification.js","names":[],"sources":["../../src/Notification/Notification.tsx"],"sourcesContent":["import {\n Ban,\n CircleCheckSolid,\n CircleInfoSolid,\n TriangleExclamationSolid,\n XmarkLarge,\n} from '@pzh-ui/icons'\nimport { ReactNode } from 'react'\nimport { Text } from '../Text'\nimport { cn } from '../utils'\n\ntype NotificationVariant = 'info' | 'warning' | 'positive' | 'negative'\ntype NotificationSize = 'm' | 's' | 'xs'\n\nexport interface NotificationProps {\n variant?: NotificationVariant\n size?: NotificationSize\n className?: string\n children?: ReactNode\n title: ReactNode\n onClose?: () => void\n}\n\nconst variantConfig = {\n info: {\n icon: CircleInfoSolid,\n container: 'bg-pzh-blue-10 border-pzh-blue-100',\n body: 'text-pzh-blue-900',\n },\n warning: {\n icon: TriangleExclamationSolid,\n container: 'bg-pzh-yellow-10 border-pzh-yellow-100',\n body: 'text-pzh-gray-700',\n },\n positive: {\n icon: CircleCheckSolid,\n container: 'bg-pzh-green-10 border-pzh-green-100',\n body: 'text-pzh-green-900',\n },\n negative: {\n icon: Ban,\n container: 'bg-pzh-red-10 border-pzh-red-100',\n body: 'text-pzh-red-900',\n },\n} satisfies Record<NotificationVariant, unknown>\n\nconst sizeConfig = {\n m: {\n padding: 'p-4',\n iconSize: 18,\n iconClass: 'min-w-[18px]',\n iconMargin: 'mt-1',\n titleClass: 'text-heading-s',\n bodySize: 's',\n },\n s: {\n padding: 'pl-4 pr-2 py-2',\n iconSize: 16,\n iconClass: 'min-w-4 mt-0.5',\n iconMargin: 'mt-0.5',\n titleClass: 'text-heading-xs',\n bodySize: 's',\n },\n xs: {\n padding: 'pl-2 pr-1 py-1',\n iconSize: 14,\n iconClass: 'min-w-3.5 mt-[3px]',\n iconMargin: 'mt-[3px]',\n titleClass: 'text-s -mt-0.5',\n bodySize: 'xs',\n },\n} as const\n\nexport const Notification = ({\n variant = 'info',\n size = 'm',\n className,\n children,\n title,\n onClose,\n}: NotificationProps) => {\n const { icon: Icon, container, body } = variantConfig[variant]\n\n const { padding, iconSize, iconClass, iconMargin, titleClass, bodySize } =\n sizeConfig[size]\n\n return (\n <div\n className={cn(\n 'inline-block rounded border',\n container,\n padding,\n className\n )}>\n <div className=\"flex items-start justify-between gap-2\">\n <div className=\"flex items-start gap-2\">\n <Icon\n size={iconSize}\n className={cn(iconClass, iconMargin, body)}\n />\n\n <div\n className={cn('flex flex-col', {\n 'gap-1': size !== 'xs',\n })}>\n <Text\n as=\"span\"\n bold\n className={cn('block', titleClass, body)}>\n {title}\n </Text>\n\n {children
|
|
1
|
+
{"version":3,"file":"Notification.js","names":[],"sources":["../../src/Notification/Notification.tsx"],"sourcesContent":["import {\n Ban,\n CircleCheckSolid,\n CircleInfoSolid,\n TriangleExclamationSolid,\n XmarkLarge,\n} from '@pzh-ui/icons'\nimport { ReactNode } from 'react'\nimport { Text } from '../Text'\nimport { cn } from '../utils'\n\ntype NotificationVariant = 'info' | 'warning' | 'positive' | 'negative'\ntype NotificationSize = 'm' | 's' | 'xs'\n\nexport interface NotificationProps {\n variant?: NotificationVariant\n size?: NotificationSize\n className?: string\n children?: ReactNode\n title: ReactNode\n onClose?: () => void\n}\n\nconst variantConfig = {\n info: {\n icon: CircleInfoSolid,\n container: 'bg-pzh-blue-10 border-pzh-blue-100',\n body: 'text-pzh-blue-900',\n },\n warning: {\n icon: TriangleExclamationSolid,\n container: 'bg-pzh-yellow-10 border-pzh-yellow-100',\n body: 'text-pzh-gray-700',\n },\n positive: {\n icon: CircleCheckSolid,\n container: 'bg-pzh-green-10 border-pzh-green-100',\n body: 'text-pzh-green-900',\n },\n negative: {\n icon: Ban,\n container: 'bg-pzh-red-10 border-pzh-red-100',\n body: 'text-pzh-red-900',\n },\n} satisfies Record<NotificationVariant, unknown>\n\nconst sizeConfig = {\n m: {\n padding: 'p-4',\n iconSize: 18,\n iconClass: 'min-w-[18px]',\n iconMargin: 'mt-1',\n titleClass: 'text-heading-s',\n bodySize: 's',\n },\n s: {\n padding: 'pl-4 pr-2 py-2',\n iconSize: 16,\n iconClass: 'min-w-4 mt-0.5',\n iconMargin: 'mt-0.5',\n titleClass: 'text-heading-xs',\n bodySize: 's',\n },\n xs: {\n padding: 'pl-2 pr-1 py-1',\n iconSize: 14,\n iconClass: 'min-w-3.5 mt-[3px]',\n iconMargin: 'mt-[3px]',\n titleClass: 'text-s -mt-0.5',\n bodySize: 'xs',\n },\n} as const\n\nexport const Notification = ({\n variant = 'info',\n size = 'm',\n className,\n children,\n title,\n onClose,\n}: NotificationProps) => {\n const { icon: Icon, container, body } = variantConfig[variant]\n\n const { padding, iconSize, iconClass, iconMargin, titleClass, bodySize } =\n sizeConfig[size]\n\n return (\n <div\n className={cn(\n 'prose prose-neutral text-pzh-blue-900 marker:text-pzh-blue-900 prose-li:my-0 prose-ul:my-0 prose-p:my-0 prose-ul:pl-5 inline-block w-full max-w-full rounded border whitespace-pre-line marker:text-xs',\n container,\n padding,\n className\n )}>\n <div className=\"flex items-start justify-between gap-2\">\n <div className=\"flex items-start gap-2\">\n <Icon\n size={iconSize}\n className={cn(iconClass, iconMargin, body)}\n />\n\n <div\n className={cn('flex flex-col', {\n 'gap-1': size !== 'xs',\n })}>\n <Text\n as=\"span\"\n bold\n className={cn('block', titleClass, body)}>\n {title}\n </Text>\n\n {children &&\n (typeof children === 'string' ? (\n <Text size={bodySize} className={body}>\n {children}\n </Text>\n ) : (\n <div\n className={cn('flex flex-col gap-4', body)}>\n {children}\n </div>\n ))}\n </div>\n </div>\n\n {onClose && (\n <button\n type=\"button\"\n aria-label=\"Sluiten\"\n onClick={onClose}\n className={cn('cursor-pointer', iconMargin, body)}>\n <XmarkLarge size={14} className=\"min-w-6\" />\n </button>\n )}\n </div>\n </div>\n )\n}\n"],"mappings":";;;;;AAuBA,IAAM,IAAgB;CAClB,MAAM;EACF,MAAM;EACN,WAAW;EACX,MAAM;CACV;CACA,SAAS;EACL,MAAM;EACN,WAAW;EACX,MAAM;CACV;CACA,UAAU;EACN,MAAM;EACN,WAAW;EACX,MAAM;CACV;CACA,UAAU;EACN,MAAM;EACN,WAAW;EACX,MAAM;CACV;AACJ,GAEM,IAAa;CACf,GAAG;EACC,SAAS;EACT,UAAU;EACV,WAAW;EACX,YAAY;EACZ,YAAY;EACZ,UAAU;CACd;CACA,GAAG;EACC,SAAS;EACT,UAAU;EACV,WAAW;EACX,YAAY;EACZ,YAAY;EACZ,UAAU;CACd;CACA,IAAI;EACA,SAAS;EACT,UAAU;EACV,WAAW;EACX,YAAY;EACZ,YAAY;EACZ,UAAU;CACd;AACJ,GAEa,KAAgB,EACzB,aAAU,QACV,UAAO,KACP,cACA,aACA,UACA,iBACqB;CACrB,IAAM,EAAE,MAAM,GAAM,cAAW,YAAS,EAAc,IAEhD,EAAE,YAAS,aAAU,cAAW,eAAY,eAAY,gBAC1D,EAAW;CAEf,OACI,kBAAC,OAAD;EACI,WAAW,EACP,0MACA,GACA,GACA,CACJ;YACA,kBAAC,OAAD;GAAK,WAAU;aAAf,CACI,kBAAC,OAAD;IAAK,WAAU;cAAf,CACI,kBAAC,GAAD;KACI,MAAM;KACN,WAAW,EAAG,GAAW,GAAY,CAAI;IAC5C,CAAA,GAED,kBAAC,OAAD;KACI,WAAW,EAAG,iBAAiB,EAC3B,SAAS,MAAS,KACtB,CAAC;eAHL,CAII,kBAAC,GAAD;MACI,IAAG;MACH,MAAA;MACA,WAAW,EAAG,SAAS,GAAY,CAAI;gBACtC;KACC,CAAA,GAEL,MACI,OAAO,KAAa,WACjB,kBAAC,GAAD;MAAM,MAAM;MAAU,WAAW;MAC5B;KACC,CAAA,IAEN,kBAAC,OAAD;MACI,WAAW,EAAG,uBAAuB,CAAI;MACxC;KACA,CAAA,EAEZ;MACJ;OAEJ,KACG,kBAAC,UAAD;IACI,MAAK;IACL,cAAW;IACX,SAAS;IACT,WAAW,EAAG,kBAAkB,GAAY,CAAI;cAChD,kBAAC,GAAD;KAAY,MAAM;KAAI,WAAU;IAAW,CAAA;GACvC,CAAA,CAEX;;CACJ,CAAA;AAEb"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pzh-ui/react",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.4",
|
|
4
4
|
"description": "Contains default components to use in Provincie Zuid-Holland projects.",
|
|
5
5
|
"homepage": "https://github.com/Provincie-Zuid-Holland/pzh-ui#readme",
|
|
6
6
|
"publishConfig": {
|
|
@@ -74,5 +74,5 @@
|
|
|
74
74
|
"plugin:storybook/recommended"
|
|
75
75
|
]
|
|
76
76
|
},
|
|
77
|
-
"gitHead": "
|
|
77
|
+
"gitHead": "28e1a684259ab06c1b6f2893bab7e25d5480c470"
|
|
78
78
|
}
|