@designbasekorea/figma-ui 0.2.0 → 0.2.3

package/dist/index.js

@@ -36,91 +36,30 @@ const DonationBadge = ({ donationUrl = 'https://buymeacoffee.com/designbase', te
 };
 DonationBadge.displayName = 'DonationBadge';
 
-const FigmaContainer = ({ header, banner, bannerPosition = 'top', children, interactionFeedback, actionButton, footer, headerHeight = 52, bannerHeight = 60, interactionHeight = 40, actionButtonHeight = 52, footerHeight = 60, footerMinHeight = 40, footerMaxHeight = 200, footerResizable = false, size = 'm', fullHeight = true, className, }) => {
+const FigmaContainer = ({ header, banner, bannerPosition = 'top', sidebar, children, interactionFeedback, actionButton, footer, sidebarWidth, size = 'm', fullHeight = true, className, }) => {
     const classes = clsx('designbase-figma-container', `designbase-figma-container--${size}`, {
         'designbase-figma-container--full-height': fullHeight,
         'designbase-figma-container--with-header': !!header,
         'designbase-figma-container--with-banner': !!banner,
         'designbase-figma-container--banner-top': !!banner && bannerPosition === 'top',
         'designbase-figma-container--banner-bottom': !!banner && bannerPosition === 'bottom',
+        'designbase-figma-container--with-sidebar': !!sidebar,
         'designbase-figma-container--with-interaction': !!interactionFeedback,
         'designbase-figma-container--with-action': !!actionButton,
         'designbase-figma-container--with-footer': !!footer,
     }, className);
-    if (!header && !banner && !interactionFeedback && !actionButton && !footer) {
-        return (React.createElement("div", { className: classes },
-            React.createElement("div", { className: "designbase-figma-container__main" }, children)));
-    }
-    const panels = [];
-    if (header) {
-        panels.push({
-            content: React.createElement("div", { className: "designbase-figma-container__header" }, header),
-            size: headerHeight,
-            minSize: headerHeight,
-            maxSize: headerHeight,
-            flexible: false,
-            resizable: false,
-            className: 'designbase-figma-container__header-panel',
-        });
-    }
-    if (banner && bannerPosition === 'top') {
-        panels.push({
-            content: React.createElement("div", { className: "designbase-figma-container__banner" }, banner),
-            size: bannerHeight,
-            minSize: bannerHeight,
-            maxSize: bannerHeight,
-            flexible: false,
-            resizable: false,
-        });
-    }
-    panels.push({
-        content: React.createElement("div", { className: "designbase-figma-container__main" }, children),
-        flexible: true,
-        resizable: false,
-    });
-    if (interactionFeedback) {
-        panels.push({
-            content: React.createElement("div", { className: "designbase-figma-container__interaction" }, interactionFeedback),
-            size: interactionHeight,
-            minSize: interactionHeight,
-            maxSize: interactionHeight,
-            flexible: false,
-            resizable: false,
-        });
-    }
-    if (actionButton) {
-        panels.push({
-            content: React.createElement("div", { className: "designbase-figma-container__action" }, actionButton),
-            size: actionButtonHeight,
-            minSize: actionButtonHeight,
-            maxSize: actionButtonHeight,
-            flexible: false,
-            resizable: false,
-        });
-    }
-    if (banner && bannerPosition === 'bottom') {
-        panels.push({
-            content: React.createElement("div", { className: "designbase-figma-container__banner" }, banner),
-            size: bannerHeight,
-            minSize: bannerHeight,
-            maxSize: bannerHeight,
-            flexible: false,
-            resizable: false,
-        });
-    }
-    if (footer) {
-        panels.push({
-            content: React.createElement("div", { className: "designbase-figma-container__footer" }, footer),
-            size: footerHeight,
-            minSize: footerMinHeight,
-            maxSize: footerMaxHeight,
-            flexible: false,
-            resizable: false,
-            className: 'designbase-figma-container__footer-panel',
-        });
-    }
     return (React.createElement("div", { className: classes },
-        React.createElement(ui.SplitView, { direction: "vertical", mode: "fixed", panels: panels, fullHeight: fullHeight, fullWidth: true, splitterSize: 1, className: "designbase-figma-container__split" })));
+        header && (React.createElement("div", { className: "designbase-figma-container__header" }, header)),
+        banner && bannerPosition === 'top' && (React.createElement("div", { className: "designbase-figma-container__banner" }, banner)),
+        React.createElement("div", { className: clsx('designbase-figma-container__main', {
+                'designbase-figma-container__main--with-sidebar': !!sidebar
+            }) }, sidebar ? (React.createElement("div", { className: "designbase-figma-container__main-content" },
+            React.createElement("div", { className: "designbase-figma-container__sidebar", style: sidebarWidth !== undefined ? { width: `${sidebarWidth}px` } : undefined }, sidebar),
+            React.createElement("div", { className: "designbase-figma-container__content" }, children))) : (children)),
+        interactionFeedback && (React.createElement("div", { className: "designbase-figma-container__interaction" }, interactionFeedback)),
+        actionButton && (React.createElement("div", { className: "designbase-figma-container__action" }, actionButton)),
+        banner && bannerPosition === 'bottom' && (React.createElement("div", { className: "designbase-figma-container__banner" }, banner)),
+        footer && (React.createElement("div", { className: "designbase-figma-container__footer" }, footer))));
 };
 FigmaContainer.displayName = 'FigmaContainer';