@designbasekorea/figma-ui 0.2.1 → 0.2.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.
- package/dist/index.css +1 -1
- package/dist/index.css.map +1 -1
- package/dist/index.d.ts +0 -8
- package/dist/index.esm.css +1 -1
- package/dist/index.esm.css.map +1 -1
- package/dist/index.esm.js +13 -77
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +12 -76
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.esm.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React, { useRef, useState, useEffect, createContext, useContext, useCallback } from 'react';
|
|
2
2
|
import { HeartFilledIcon, CoffeeFilledIcon, ChevronDownIcon, AppWindowIcon, YoutubeIcon, InstagramIcon, FigmaIcon, MailIcon, ExternalLinkIcon, MoreHorizontalIcon, CloseIcon, CircleCheckFilledIcon, ResizableIcon, GripVerticalIcon, ChevronRightIcon } from '@designbasekorea/icons';
|
|
3
|
-
import { Button,
|
|
3
|
+
import { Button, Badge, Toggle, Spinner, SegmentControl, Logo, ToastContainer, Toast, Input, Modal, Progressbar, RandomGradient } from '@designbasekorea/ui';
|
|
4
4
|
export * from '@designbasekorea/ui';
|
|
5
5
|
|
|
6
6
|
function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);}else for(f in e)e[f]&&(n&&(n+=" "),n+=f);return n}function clsx(){for(var e,t,f=0,n="",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
|
|
@@ -35,7 +35,7 @@ const DonationBadge = ({ donationUrl = 'https://buymeacoffee.com/designbase', te
|
|
|
35
35
|
};
|
|
36
36
|
DonationBadge.displayName = 'DonationBadge';
|
|
37
37
|
|
|
38
|
-
const FigmaContainer = ({ header, banner, bannerPosition = 'top', sidebar, children, interactionFeedback, actionButton, footer,
|
|
38
|
+
const FigmaContainer = ({ header, banner, bannerPosition = 'top', sidebar, children, interactionFeedback, actionButton, footer, sidebarWidth, size = 'm', fullHeight = true, className, }) => {
|
|
39
39
|
const classes = clsx('designbase-figma-container', `designbase-figma-container--${size}`, {
|
|
40
40
|
'designbase-figma-container--full-height': fullHeight,
|
|
41
41
|
'designbase-figma-container--with-header': !!header,
|
|
@@ -47,82 +47,18 @@ const FigmaContainer = ({ header, banner, bannerPosition = 'top', sidebar, child
|
|
|
47
47
|
'designbase-figma-container--with-action': !!actionButton,
|
|
48
48
|
'designbase-figma-container--with-footer': !!footer,
|
|
49
49
|
}, className);
|
|
50
|
-
if (!header && !banner && !interactionFeedback && !actionButton && !footer) {
|
|
51
|
-
return (React.createElement("div", { className: classes },
|
|
52
|
-
React.createElement("div", { className: "designbase-figma-container__main" }, children)));
|
|
53
|
-
}
|
|
54
|
-
const panels = [];
|
|
55
|
-
if (header) {
|
|
56
|
-
panels.push({
|
|
57
|
-
content: React.createElement("div", { className: "designbase-figma-container__header" }, header),
|
|
58
|
-
size: headerHeight,
|
|
59
|
-
minSize: headerHeight,
|
|
60
|
-
maxSize: headerHeight,
|
|
61
|
-
flexible: false,
|
|
62
|
-
resizable: false,
|
|
63
|
-
className: 'designbase-figma-container__header-panel',
|
|
64
|
-
});
|
|
65
|
-
}
|
|
66
|
-
if (banner && bannerPosition === 'top') {
|
|
67
|
-
panels.push({
|
|
68
|
-
content: React.createElement("div", { className: "designbase-figma-container__banner" }, banner),
|
|
69
|
-
size: bannerHeight,
|
|
70
|
-
minSize: bannerHeight,
|
|
71
|
-
maxSize: bannerHeight,
|
|
72
|
-
flexible: false,
|
|
73
|
-
resizable: false,
|
|
74
|
-
});
|
|
75
|
-
}
|
|
76
|
-
panels.push({
|
|
77
|
-
content: (React.createElement("div", { className: "designbase-figma-container__main" }, sidebar ? (React.createElement("div", { className: "designbase-figma-container__main-content" },
|
|
78
|
-
React.createElement("div", { className: "designbase-figma-container__sidebar", style: { width: `${sidebarWidth}px` } }, sidebar),
|
|
79
|
-
React.createElement("div", { className: "designbase-figma-container__content" }, children))) : (children))),
|
|
80
|
-
flexible: true,
|
|
81
|
-
resizable: false,
|
|
82
|
-
});
|
|
83
|
-
if (interactionFeedback) {
|
|
84
|
-
panels.push({
|
|
85
|
-
content: React.createElement("div", { className: "designbase-figma-container__interaction" }, interactionFeedback),
|
|
86
|
-
size: interactionHeight,
|
|
87
|
-
minSize: interactionHeight,
|
|
88
|
-
maxSize: interactionHeight,
|
|
89
|
-
flexible: false,
|
|
90
|
-
resizable: false,
|
|
91
|
-
});
|
|
92
|
-
}
|
|
93
|
-
if (actionButton) {
|
|
94
|
-
panels.push({
|
|
95
|
-
content: React.createElement("div", { className: "designbase-figma-container__action" }, actionButton),
|
|
96
|
-
size: actionButtonHeight,
|
|
97
|
-
minSize: actionButtonHeight,
|
|
98
|
-
maxSize: actionButtonHeight,
|
|
99
|
-
flexible: false,
|
|
100
|
-
resizable: false,
|
|
101
|
-
});
|
|
102
|
-
}
|
|
103
|
-
if (banner && bannerPosition === 'bottom') {
|
|
104
|
-
panels.push({
|
|
105
|
-
content: React.createElement("div", { className: "designbase-figma-container__banner" }, banner),
|
|
106
|
-
size: bannerHeight,
|
|
107
|
-
minSize: bannerHeight,
|
|
108
|
-
maxSize: bannerHeight,
|
|
109
|
-
flexible: false,
|
|
110
|
-
resizable: false,
|
|
111
|
-
});
|
|
112
|
-
}
|
|
113
|
-
if (footer) {
|
|
114
|
-
panels.push({
|
|
115
|
-
content: React.createElement("div", { className: "designbase-figma-container__footer" }, footer),
|
|
116
|
-
size: footerHeight,
|
|
117
|
-
minSize: footerMinHeight,
|
|
118
|
-
maxSize: footerMaxHeight,
|
|
119
|
-
flexible: false,
|
|
120
|
-
resizable: false,
|
|
121
|
-
className: 'designbase-figma-container__footer-panel',
|
|
122
|
-
});
|
|
123
|
-
}
|
|
124
50
|
return (React.createElement("div", { className: classes },
|
|
125
|
-
React.createElement(
|
|
51
|
+
header && (React.createElement("div", { className: "designbase-figma-container__header" }, header)),
|
|
52
|
+
banner && bannerPosition === 'top' && (React.createElement("div", { className: "designbase-figma-container__banner" }, banner)),
|
|
53
|
+
React.createElement("div", { className: clsx('designbase-figma-container__main', {
|
|
54
|
+
'designbase-figma-container__main--with-sidebar': !!sidebar
|
|
55
|
+
}) }, sidebar ? (React.createElement("div", { className: "designbase-figma-container__main-content" },
|
|
56
|
+
React.createElement("div", { className: "designbase-figma-container__sidebar", style: sidebarWidth !== undefined ? { width: `${sidebarWidth}px` } : undefined }, sidebar),
|
|
57
|
+
React.createElement("div", { className: "designbase-figma-container__content" }, children))) : (children)),
|
|
58
|
+
interactionFeedback && (React.createElement("div", { className: "designbase-figma-container__interaction" }, interactionFeedback)),
|
|
59
|
+
actionButton && (React.createElement("div", { className: "designbase-figma-container__action" }, actionButton)),
|
|
60
|
+
banner && bannerPosition === 'bottom' && (React.createElement("div", { className: "designbase-figma-container__banner" }, banner)),
|
|
61
|
+
footer && (React.createElement("div", { className: "designbase-figma-container__footer" }, footer))));
|
|
126
62
|
};
|
|
127
63
|
FigmaContainer.displayName = 'FigmaContainer';
|
|
128
64
|
|