@mirohq/design-system-patterns 0.1.0 → 0.2.0-patterns-improvements.0
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/main.js +40 -17
- package/dist/main.js.map +1 -1
- package/dist/module.js +33 -17
- package/dist/module.js.map +1 -1
- package/dist/types.d.ts +16 -5
- package/package.json +5 -5
package/dist/main.js
CHANGED
|
@@ -8,10 +8,34 @@ var designSystemStitches = require('@mirohq/design-system-stitches');
|
|
|
8
8
|
var designSystemBox = require('@mirohq/design-system-box');
|
|
9
9
|
var designSystemButton = require('@mirohq/design-system-button');
|
|
10
10
|
var designSystemTypography = require('@mirohq/design-system-typography');
|
|
11
|
+
var criticalSVG = require('@mirohq/brand-assets/illustrations/empty-state/critical.svg');
|
|
12
|
+
var ctaSVG = require('@mirohq/brand-assets/illustrations/empty-state/cta.svg');
|
|
13
|
+
var generalSVG = require('@mirohq/brand-assets/illustrations/empty-state/general.svg');
|
|
14
|
+
var inProgressSVG = require('@mirohq/brand-assets/illustrations/empty-state/in-progress.svg');
|
|
15
|
+
var informativeSVG = require('@mirohq/brand-assets/illustrations/empty-state/informative.svg');
|
|
16
|
+
var noResultsSVG = require('@mirohq/brand-assets/illustrations/empty-state/no-results.svg');
|
|
17
|
+
var participateSVG = require('@mirohq/brand-assets/illustrations/empty-state/participate.svg');
|
|
11
18
|
|
|
12
19
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
13
20
|
|
|
14
21
|
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
22
|
+
var criticalSVG__default = /*#__PURE__*/_interopDefaultLegacy(criticalSVG);
|
|
23
|
+
var ctaSVG__default = /*#__PURE__*/_interopDefaultLegacy(ctaSVG);
|
|
24
|
+
var generalSVG__default = /*#__PURE__*/_interopDefaultLegacy(generalSVG);
|
|
25
|
+
var inProgressSVG__default = /*#__PURE__*/_interopDefaultLegacy(inProgressSVG);
|
|
26
|
+
var informativeSVG__default = /*#__PURE__*/_interopDefaultLegacy(informativeSVG);
|
|
27
|
+
var noResultsSVG__default = /*#__PURE__*/_interopDefaultLegacy(noResultsSVG);
|
|
28
|
+
var participateSVG__default = /*#__PURE__*/_interopDefaultLegacy(participateSVG);
|
|
29
|
+
|
|
30
|
+
const emptyStateIllustrations = {
|
|
31
|
+
critical: criticalSVG__default["default"],
|
|
32
|
+
cta: ctaSVG__default["default"],
|
|
33
|
+
general: generalSVG__default["default"],
|
|
34
|
+
"in-progress": inProgressSVG__default["default"],
|
|
35
|
+
informative: informativeSVG__default["default"],
|
|
36
|
+
"no-results": noResultsSVG__default["default"],
|
|
37
|
+
participate: participateSVG__default["default"]
|
|
38
|
+
};
|
|
15
39
|
|
|
16
40
|
const Container = designSystemStitches.styled(designSystemBox.Box, {
|
|
17
41
|
background: "$background-neutrals",
|
|
@@ -35,23 +59,22 @@ const Actions = designSystemStitches.styled(designSystemBox.Box, {
|
|
|
35
59
|
flexWrap: "wrap",
|
|
36
60
|
gap: "$100"
|
|
37
61
|
});
|
|
38
|
-
const
|
|
39
|
-
(
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
] })
|
|
62
|
+
const PatternEmptyState = React__default["default"].forwardRef(({ heading, description, illustration, actions, ...restProps }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(Container, { ref, ...restProps, children: [
|
|
63
|
+
illustration != null && /* @__PURE__ */ jsxRuntime.jsx(
|
|
64
|
+
Illustration,
|
|
65
|
+
{
|
|
66
|
+
src: emptyStateIllustrations[illustration],
|
|
67
|
+
"aria-hidden": true,
|
|
68
|
+
alt: ""
|
|
69
|
+
}
|
|
70
|
+
),
|
|
71
|
+
/* @__PURE__ */ jsxRuntime.jsx(designSystemTypography.Heading, { ref, level: 2, styledAs: "h3", children: heading }),
|
|
72
|
+
description != null && /* @__PURE__ */ jsxRuntime.jsx(Description, { css: { color: "$text-neutrals-subtle" }, children: description }),
|
|
73
|
+
actions != null && /* @__PURE__ */ jsxRuntime.jsxs(Actions, { children: [
|
|
74
|
+
/* @__PURE__ */ jsxRuntime.jsx(designSystemButton.Button, { ...actions.primary, variant: "primary", children: actions.primary.label }),
|
|
75
|
+
actions.secondary != null && /* @__PURE__ */ jsxRuntime.jsx(designSystemButton.Button, { ...actions.secondary, variant: "ghost", children: actions.secondary.label })
|
|
53
76
|
] })
|
|
54
|
-
);
|
|
77
|
+
] }));
|
|
55
78
|
|
|
56
|
-
exports.
|
|
79
|
+
exports.PatternEmptyState = PatternEmptyState;
|
|
57
80
|
//# sourceMappingURL=main.js.map
|
package/dist/main.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"main.js","sources":["../src/empty-state.tsx"],"sourcesContent":["import React from 'react'\nimport type { ReactNode, ElementRef } from 'react'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { Box } from '@mirohq/design-system-box'\nimport { Button } from '@mirohq/design-system-button'\nimport type { ButtonProps } from '@mirohq/design-system-button'\nimport type { BoxProps } from '@mirohq/design-system-box'\nimport { Heading } from '@mirohq/design-system-typography'\n\n// Types\n// -----------------------------------------------------------------------------\nexport interface
|
|
1
|
+
{"version":3,"file":"main.js","sources":["../src/empty-state/illustrations.ts","../src/empty-state/empty-state.tsx"],"sourcesContent":["import criticalSVG from '@mirohq/brand-assets/illustrations/empty-state/critical.svg'\nimport ctaSVG from '@mirohq/brand-assets/illustrations/empty-state/cta.svg'\nimport generalSVG from '@mirohq/brand-assets/illustrations/empty-state/general.svg'\nimport inProgressSVG from '@mirohq/brand-assets/illustrations/empty-state/in-progress.svg'\nimport informativeSVG from '@mirohq/brand-assets/illustrations/empty-state/informative.svg'\nimport noResultsSVG from '@mirohq/brand-assets/illustrations/empty-state/no-results.svg'\nimport participateSVG from '@mirohq/brand-assets/illustrations/empty-state/participate.svg'\n\nexport const emptyStateIllustrations = {\n critical: criticalSVG,\n cta: ctaSVG,\n general: generalSVG,\n 'in-progress': inProgressSVG,\n informative: informativeSVG,\n 'no-results': noResultsSVG,\n participate: participateSVG,\n}\n\nexport type EmptyStateIllustrationProps = keyof typeof emptyStateIllustrations\n","import React from 'react'\nimport type { ReactNode, ElementRef } from 'react'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { Box } from '@mirohq/design-system-box'\nimport { Button } from '@mirohq/design-system-button'\nimport type { ButtonProps } from '@mirohq/design-system-button'\nimport type { BoxProps } from '@mirohq/design-system-box'\nimport { Heading } from '@mirohq/design-system-typography'\n\nimport { emptyStateIllustrations } from './illustrations'\nimport type { EmptyStateIllustrationProps } from './illustrations'\n\n// Types\n// -----------------------------------------------------------------------------\nexport interface PatternEmptyStateProps extends Omit<BoxProps, 'children'> {\n heading: ReactNode\n description?: ReactNode\n illustration?: EmptyStateIllustrationProps\n actions?: {\n primary: ActionButton\n secondary?: ActionButton\n }\n}\n\ntype ActionButton = Omit<ButtonProps, 'variant' | 'children'> & {\n label: ReactNode\n}\n\n// Styled\n// -----------------------------------------------------------------------------\nconst Container = styled(Box, {\n background: '$background-neutrals',\n padding: '$500',\n display: 'flex',\n flexDirection: 'column',\n gap: '$50',\n minWidth: '290px',\n maxWidth: '480px',\n})\n\nconst Illustration = styled('img', {\n width: '112px',\n display: 'block',\n})\n\nconst Description = styled(Box, {\n color: '$text-neutrals-subtle',\n})\n\nconst Actions = styled(Box, {\n paddingY: '$200',\n display: 'flex',\n flexWrap: 'wrap',\n gap: '$100',\n})\n\n// Component\n// -----------------------------------------------------------------------------\nexport const PatternEmptyState = React.forwardRef<\n ElementRef<typeof Box>,\n PatternEmptyStateProps\n>(({ heading, description, illustration, actions, ...restProps }, ref) => (\n <Container ref={ref} {...restProps}>\n {illustration != null && (\n <Illustration\n src={emptyStateIllustrations[illustration]}\n aria-hidden\n alt=''\n />\n )}\n <Heading ref={ref} level={2} styledAs='h3'>\n {heading}\n </Heading>\n {description != null && (\n <Description css={{ color: '$text-neutrals-subtle' }}>\n {description}\n </Description>\n )}\n {actions != null && (\n <Actions>\n <Button {...actions.primary} variant='primary'>\n {actions.primary.label}\n </Button>\n\n {actions.secondary != null && (\n <Button {...actions.secondary} variant='ghost'>\n {actions.secondary.label}\n </Button>\n )}\n </Actions>\n )}\n </Container>\n))\n"],"names":["criticalSVG","ctaSVG","generalSVG","inProgressSVG","informativeSVG","noResultsSVG","participateSVG","styled","Box","React","jsx","Heading","jsxs","Button"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQO,MAAM,uBAA0B,GAAA;AAAA,EACrC,QAAU,EAAAA,+BAAA;AAAA,EACV,GAAK,EAAAC,0BAAA;AAAA,EACL,OAAS,EAAAC,8BAAA;AAAA,EACT,aAAe,EAAAC,iCAAA;AAAA,EACf,WAAa,EAAAC,kCAAA;AAAA,EACb,YAAc,EAAAC,gCAAA;AAAA,EACd,WAAa,EAAAC,kCAAA;AACf,CAAA;;ACcA,MAAM,SAAA,GAAYC,4BAAOC,mBAAK,EAAA;AAAA,EAC5B,UAAY,EAAA,sBAAA;AAAA,EACZ,OAAS,EAAA,MAAA;AAAA,EACT,OAAS,EAAA,MAAA;AAAA,EACT,aAAe,EAAA,QAAA;AAAA,EACf,GAAK,EAAA,KAAA;AAAA,EACL,QAAU,EAAA,OAAA;AAAA,EACV,QAAU,EAAA,OAAA;AACZ,CAAC,CAAA,CAAA;AAED,MAAM,YAAA,GAAeD,4BAAO,KAAO,EAAA;AAAA,EACjC,KAAO,EAAA,OAAA;AAAA,EACP,OAAS,EAAA,OAAA;AACX,CAAC,CAAA,CAAA;AAED,MAAM,WAAA,GAAcA,4BAAOC,mBAAK,EAAA;AAAA,EAC9B,KAAO,EAAA,uBAAA;AACT,CAAC,CAAA,CAAA;AAED,MAAM,OAAA,GAAUD,4BAAOC,mBAAK,EAAA;AAAA,EAC1B,QAAU,EAAA,MAAA;AAAA,EACV,OAAS,EAAA,MAAA;AAAA,EACT,QAAU,EAAA,MAAA;AAAA,EACV,GAAK,EAAA,MAAA;AACP,CAAC,CAAA,CAAA;AAIM,MAAM,oBAAoBC,yBAAM,CAAA,UAAA,CAGrC,CAAC,EAAE,SAAS,WAAa,EAAA,YAAA,EAAc,OAAS,EAAA,GAAG,WAAa,EAAA,GAAA,qCAC/D,SAAU,EAAA,EAAA,GAAA,EAAW,GAAG,SACtB,EAAA,QAAA,EAAA;AAAA,EAAA,YAAA,IAAgB,IACf,oBAAAC,cAAA;AAAA,IAAC,YAAA;AAAA,IAAA;AAAA,MACC,GAAA,EAAK,wBAAwB,YAAY,CAAA;AAAA,MACzC,aAAW,EAAA,IAAA;AAAA,MACX,GAAI,EAAA,EAAA;AAAA,KAAA;AAAA,GACN;AAAA,iCAEDC,8BAAQ,EAAA,EAAA,GAAA,EAAU,OAAO,CAAG,EAAA,QAAA,EAAS,MACnC,QACH,EAAA,OAAA,EAAA,CAAA;AAAA,EACC,WAAA,IAAe,wBACbD,cAAA,CAAA,WAAA,EAAA,EAAY,KAAK,EAAE,KAAA,EAAO,uBAAwB,EAAA,EAChD,QACH,EAAA,WAAA,EAAA,CAAA;AAAA,EAED,OAAA,IAAW,IACV,oBAAAE,eAAA,CAAC,OACC,EAAA,EAAA,QAAA,EAAA;AAAA,oBAACF,cAAA,CAAAG,yBAAA,EAAA,EAAQ,GAAG,OAAQ,CAAA,OAAA,EAAS,SAAQ,SAClC,EAAA,QAAA,EAAA,OAAA,CAAQ,QAAQ,KACnB,EAAA,CAAA;AAAA,IAEC,OAAQ,CAAA,SAAA,IAAa,IACpB,oBAAAH,cAAA,CAACG,yBAAQ,EAAA,EAAA,GAAG,OAAQ,CAAA,SAAA,EAAW,OAAQ,EAAA,OAAA,EACpC,QAAQ,EAAA,OAAA,CAAA,SAAA,CAAU,KACrB,EAAA,CAAA;AAAA,GAEJ,EAAA,CAAA;AAAA,CAAA,EAEJ,CACD;;;;"}
|
package/dist/module.js
CHANGED
|
@@ -4,6 +4,23 @@ import { styled } from '@mirohq/design-system-stitches';
|
|
|
4
4
|
import { Box } from '@mirohq/design-system-box';
|
|
5
5
|
import { Button } from '@mirohq/design-system-button';
|
|
6
6
|
import { Heading } from '@mirohq/design-system-typography';
|
|
7
|
+
import criticalSVG from '@mirohq/brand-assets/illustrations/empty-state/critical.svg';
|
|
8
|
+
import ctaSVG from '@mirohq/brand-assets/illustrations/empty-state/cta.svg';
|
|
9
|
+
import generalSVG from '@mirohq/brand-assets/illustrations/empty-state/general.svg';
|
|
10
|
+
import inProgressSVG from '@mirohq/brand-assets/illustrations/empty-state/in-progress.svg';
|
|
11
|
+
import informativeSVG from '@mirohq/brand-assets/illustrations/empty-state/informative.svg';
|
|
12
|
+
import noResultsSVG from '@mirohq/brand-assets/illustrations/empty-state/no-results.svg';
|
|
13
|
+
import participateSVG from '@mirohq/brand-assets/illustrations/empty-state/participate.svg';
|
|
14
|
+
|
|
15
|
+
const emptyStateIllustrations = {
|
|
16
|
+
critical: criticalSVG,
|
|
17
|
+
cta: ctaSVG,
|
|
18
|
+
general: generalSVG,
|
|
19
|
+
"in-progress": inProgressSVG,
|
|
20
|
+
informative: informativeSVG,
|
|
21
|
+
"no-results": noResultsSVG,
|
|
22
|
+
participate: participateSVG
|
|
23
|
+
};
|
|
7
24
|
|
|
8
25
|
const Container = styled(Box, {
|
|
9
26
|
background: "$background-neutrals",
|
|
@@ -27,23 +44,22 @@ const Actions = styled(Box, {
|
|
|
27
44
|
flexWrap: "wrap",
|
|
28
45
|
gap: "$100"
|
|
29
46
|
});
|
|
30
|
-
const
|
|
31
|
-
(
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
] })
|
|
47
|
+
const PatternEmptyState = React.forwardRef(({ heading, description, illustration, actions, ...restProps }, ref) => /* @__PURE__ */ jsxs(Container, { ref, ...restProps, children: [
|
|
48
|
+
illustration != null && /* @__PURE__ */ jsx(
|
|
49
|
+
Illustration,
|
|
50
|
+
{
|
|
51
|
+
src: emptyStateIllustrations[illustration],
|
|
52
|
+
"aria-hidden": true,
|
|
53
|
+
alt: ""
|
|
54
|
+
}
|
|
55
|
+
),
|
|
56
|
+
/* @__PURE__ */ jsx(Heading, { ref, level: 2, styledAs: "h3", children: heading }),
|
|
57
|
+
description != null && /* @__PURE__ */ jsx(Description, { css: { color: "$text-neutrals-subtle" }, children: description }),
|
|
58
|
+
actions != null && /* @__PURE__ */ jsxs(Actions, { children: [
|
|
59
|
+
/* @__PURE__ */ jsx(Button, { ...actions.primary, variant: "primary", children: actions.primary.label }),
|
|
60
|
+
actions.secondary != null && /* @__PURE__ */ jsx(Button, { ...actions.secondary, variant: "ghost", children: actions.secondary.label })
|
|
45
61
|
] })
|
|
46
|
-
);
|
|
62
|
+
] }));
|
|
47
63
|
|
|
48
|
-
export {
|
|
64
|
+
export { PatternEmptyState };
|
|
49
65
|
//# sourceMappingURL=module.js.map
|
package/dist/module.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"module.js","sources":["../src/empty-state.tsx"],"sourcesContent":["import React from 'react'\nimport type { ReactNode, ElementRef } from 'react'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { Box } from '@mirohq/design-system-box'\nimport { Button } from '@mirohq/design-system-button'\nimport type { ButtonProps } from '@mirohq/design-system-button'\nimport type { BoxProps } from '@mirohq/design-system-box'\nimport { Heading } from '@mirohq/design-system-typography'\n\n// Types\n// -----------------------------------------------------------------------------\nexport interface
|
|
1
|
+
{"version":3,"file":"module.js","sources":["../src/empty-state/illustrations.ts","../src/empty-state/empty-state.tsx"],"sourcesContent":["import criticalSVG from '@mirohq/brand-assets/illustrations/empty-state/critical.svg'\nimport ctaSVG from '@mirohq/brand-assets/illustrations/empty-state/cta.svg'\nimport generalSVG from '@mirohq/brand-assets/illustrations/empty-state/general.svg'\nimport inProgressSVG from '@mirohq/brand-assets/illustrations/empty-state/in-progress.svg'\nimport informativeSVG from '@mirohq/brand-assets/illustrations/empty-state/informative.svg'\nimport noResultsSVG from '@mirohq/brand-assets/illustrations/empty-state/no-results.svg'\nimport participateSVG from '@mirohq/brand-assets/illustrations/empty-state/participate.svg'\n\nexport const emptyStateIllustrations = {\n critical: criticalSVG,\n cta: ctaSVG,\n general: generalSVG,\n 'in-progress': inProgressSVG,\n informative: informativeSVG,\n 'no-results': noResultsSVG,\n participate: participateSVG,\n}\n\nexport type EmptyStateIllustrationProps = keyof typeof emptyStateIllustrations\n","import React from 'react'\nimport type { ReactNode, ElementRef } from 'react'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { Box } from '@mirohq/design-system-box'\nimport { Button } from '@mirohq/design-system-button'\nimport type { ButtonProps } from '@mirohq/design-system-button'\nimport type { BoxProps } from '@mirohq/design-system-box'\nimport { Heading } from '@mirohq/design-system-typography'\n\nimport { emptyStateIllustrations } from './illustrations'\nimport type { EmptyStateIllustrationProps } from './illustrations'\n\n// Types\n// -----------------------------------------------------------------------------\nexport interface PatternEmptyStateProps extends Omit<BoxProps, 'children'> {\n heading: ReactNode\n description?: ReactNode\n illustration?: EmptyStateIllustrationProps\n actions?: {\n primary: ActionButton\n secondary?: ActionButton\n }\n}\n\ntype ActionButton = Omit<ButtonProps, 'variant' | 'children'> & {\n label: ReactNode\n}\n\n// Styled\n// -----------------------------------------------------------------------------\nconst Container = styled(Box, {\n background: '$background-neutrals',\n padding: '$500',\n display: 'flex',\n flexDirection: 'column',\n gap: '$50',\n minWidth: '290px',\n maxWidth: '480px',\n})\n\nconst Illustration = styled('img', {\n width: '112px',\n display: 'block',\n})\n\nconst Description = styled(Box, {\n color: '$text-neutrals-subtle',\n})\n\nconst Actions = styled(Box, {\n paddingY: '$200',\n display: 'flex',\n flexWrap: 'wrap',\n gap: '$100',\n})\n\n// Component\n// -----------------------------------------------------------------------------\nexport const PatternEmptyState = React.forwardRef<\n ElementRef<typeof Box>,\n PatternEmptyStateProps\n>(({ heading, description, illustration, actions, ...restProps }, ref) => (\n <Container ref={ref} {...restProps}>\n {illustration != null && (\n <Illustration\n src={emptyStateIllustrations[illustration]}\n aria-hidden\n alt=''\n />\n )}\n <Heading ref={ref} level={2} styledAs='h3'>\n {heading}\n </Heading>\n {description != null && (\n <Description css={{ color: '$text-neutrals-subtle' }}>\n {description}\n </Description>\n )}\n {actions != null && (\n <Actions>\n <Button {...actions.primary} variant='primary'>\n {actions.primary.label}\n </Button>\n\n {actions.secondary != null && (\n <Button {...actions.secondary} variant='ghost'>\n {actions.secondary.label}\n </Button>\n )}\n </Actions>\n )}\n </Container>\n))\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAQO,MAAM,uBAA0B,GAAA;AAAA,EACrC,QAAU,EAAA,WAAA;AAAA,EACV,GAAK,EAAA,MAAA;AAAA,EACL,OAAS,EAAA,UAAA;AAAA,EACT,aAAe,EAAA,aAAA;AAAA,EACf,WAAa,EAAA,cAAA;AAAA,EACb,YAAc,EAAA,YAAA;AAAA,EACd,WAAa,EAAA,cAAA;AACf,CAAA;;ACcA,MAAM,SAAA,GAAY,OAAO,GAAK,EAAA;AAAA,EAC5B,UAAY,EAAA,sBAAA;AAAA,EACZ,OAAS,EAAA,MAAA;AAAA,EACT,OAAS,EAAA,MAAA;AAAA,EACT,aAAe,EAAA,QAAA;AAAA,EACf,GAAK,EAAA,KAAA;AAAA,EACL,QAAU,EAAA,OAAA;AAAA,EACV,QAAU,EAAA,OAAA;AACZ,CAAC,CAAA,CAAA;AAED,MAAM,YAAA,GAAe,OAAO,KAAO,EAAA;AAAA,EACjC,KAAO,EAAA,OAAA;AAAA,EACP,OAAS,EAAA,OAAA;AACX,CAAC,CAAA,CAAA;AAED,MAAM,WAAA,GAAc,OAAO,GAAK,EAAA;AAAA,EAC9B,KAAO,EAAA,uBAAA;AACT,CAAC,CAAA,CAAA;AAED,MAAM,OAAA,GAAU,OAAO,GAAK,EAAA;AAAA,EAC1B,QAAU,EAAA,MAAA;AAAA,EACV,OAAS,EAAA,MAAA;AAAA,EACT,QAAU,EAAA,MAAA;AAAA,EACV,GAAK,EAAA,MAAA;AACP,CAAC,CAAA,CAAA;AAIM,MAAM,oBAAoB,KAAM,CAAA,UAAA,CAGrC,CAAC,EAAE,SAAS,WAAa,EAAA,YAAA,EAAc,OAAS,EAAA,GAAG,WAAa,EAAA,GAAA,0BAC/D,SAAU,EAAA,EAAA,GAAA,EAAW,GAAG,SACtB,EAAA,QAAA,EAAA;AAAA,EAAA,YAAA,IAAgB,IACf,oBAAA,GAAA;AAAA,IAAC,YAAA;AAAA,IAAA;AAAA,MACC,GAAA,EAAK,wBAAwB,YAAY,CAAA;AAAA,MACzC,aAAW,EAAA,IAAA;AAAA,MACX,GAAI,EAAA,EAAA;AAAA,KAAA;AAAA,GACN;AAAA,sBAED,OAAQ,EAAA,EAAA,GAAA,EAAU,OAAO,CAAG,EAAA,QAAA,EAAS,MACnC,QACH,EAAA,OAAA,EAAA,CAAA;AAAA,EACC,WAAA,IAAe,wBACb,GAAA,CAAA,WAAA,EAAA,EAAY,KAAK,EAAE,KAAA,EAAO,uBAAwB,EAAA,EAChD,QACH,EAAA,WAAA,EAAA,CAAA;AAAA,EAED,OAAA,IAAW,IACV,oBAAA,IAAA,CAAC,OACC,EAAA,EAAA,QAAA,EAAA;AAAA,oBAAC,GAAA,CAAA,MAAA,EAAA,EAAQ,GAAG,OAAQ,CAAA,OAAA,EAAS,SAAQ,SAClC,EAAA,QAAA,EAAA,OAAA,CAAQ,QAAQ,KACnB,EAAA,CAAA;AAAA,IAEC,OAAQ,CAAA,SAAA,IAAa,IACpB,oBAAA,GAAA,CAAC,MAAQ,EAAA,EAAA,GAAG,OAAQ,CAAA,SAAA,EAAW,OAAQ,EAAA,OAAA,EACpC,QAAQ,EAAA,OAAA,CAAA,SAAA,CAAU,KACrB,EAAA,CAAA;AAAA,GAEJ,EAAA,CAAA;AAAA,CAAA,EAEJ,CACD;;;;"}
|
package/dist/types.d.ts
CHANGED
|
@@ -2,11 +2,22 @@ import React, { ReactNode } from 'react';
|
|
|
2
2
|
import { ButtonProps } from '@mirohq/design-system-button';
|
|
3
3
|
import { BoxProps } from '@mirohq/design-system-box';
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
declare const emptyStateIllustrations: {
|
|
6
|
+
critical: string;
|
|
7
|
+
cta: string;
|
|
8
|
+
general: string;
|
|
9
|
+
'in-progress': string;
|
|
10
|
+
informative: string;
|
|
11
|
+
'no-results': string;
|
|
12
|
+
participate: string;
|
|
13
|
+
};
|
|
14
|
+
declare type EmptyStateIllustrationProps = keyof typeof emptyStateIllustrations;
|
|
15
|
+
|
|
16
|
+
interface PatternEmptyStateProps extends Omit<BoxProps, 'children'> {
|
|
6
17
|
heading: ReactNode;
|
|
7
18
|
description?: ReactNode;
|
|
8
|
-
illustration?:
|
|
9
|
-
actions
|
|
19
|
+
illustration?: EmptyStateIllustrationProps;
|
|
20
|
+
actions?: {
|
|
10
21
|
primary: ActionButton;
|
|
11
22
|
secondary?: ActionButton;
|
|
12
23
|
};
|
|
@@ -14,6 +25,6 @@ interface EmptyStateProps extends Omit<BoxProps, 'children'> {
|
|
|
14
25
|
declare type ActionButton = Omit<ButtonProps, 'variant' | 'children'> & {
|
|
15
26
|
label: ReactNode;
|
|
16
27
|
};
|
|
17
|
-
declare const
|
|
28
|
+
declare const PatternEmptyState: React.ForwardRefExoticComponent<Omit<PatternEmptyStateProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
18
29
|
|
|
19
|
-
export {
|
|
30
|
+
export { EmptyStateIllustrationProps, PatternEmptyState, PatternEmptyStateProps };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mirohq/design-system-patterns",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.2.0-patterns-improvements.0",
|
|
4
4
|
"description": "",
|
|
5
5
|
"author": "Miro",
|
|
6
6
|
"source": "src/index.ts",
|
|
@@ -26,10 +26,10 @@
|
|
|
26
26
|
"react": "^16.14 || ^17 || ^18"
|
|
27
27
|
},
|
|
28
28
|
"dependencies": {
|
|
29
|
-
"@mirohq/design-system-box": "^2.1.
|
|
30
|
-
"@mirohq/design-system-
|
|
31
|
-
"@mirohq/design-system-
|
|
32
|
-
"@mirohq/design-system-
|
|
29
|
+
"@mirohq/design-system-box": "^2.1.60",
|
|
30
|
+
"@mirohq/design-system-stitches": "^2.6.29",
|
|
31
|
+
"@mirohq/design-system-typography": "^0.6.7",
|
|
32
|
+
"@mirohq/design-system-button": "^4.2.4"
|
|
33
33
|
},
|
|
34
34
|
"devDependencies": {
|
|
35
35
|
"@mirohq/brand-assets": "^0.2.1"
|