@lumx/react 2.2.22-alpha-fix-generic-block.2 → 2.2.22-alpha-dart-sass.1

package/esm/_internal/FlexBox.js.map

@@ -1 +1 @@
-{"version":3,"file":"FlexBox.js","sources":["../../../src/components/flex-box/FlexBox.tsx"],"sourcesContent":["import { Alignment, HorizontalAlignment, Orientation, VerticalAlignment } from '@lumx/react';\nimport { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';\nimport classNames from 'classnames';\nimport castArray from 'lodash/castArray';\nimport React, { forwardRef, ReactNode } from 'react';\nimport { Size } from '..';\n\nexport type MarginAutoAlignment = Extract<Alignment, 'top' | 'bottom' | 'right' | 'left'>;\nexport type GapSize = Extract<Size, 'tiny' | 'regular' | 'medium' | 'big' | 'huge'>;\n\n/**\n * Defines the props of the component.\n */\nexport interface FlexBoxProps extends GenericProps {\n    /** Children elements. */\n    children?: ReactNode;\n    /** Whether the \"content filling space\" is enabled or not. */\n    fillSpace?: boolean;\n    /** Gap space between flexbox items. */\n    gap?: GapSize;\n    /** Flex horizontal alignment. */\n    hAlign?: VerticalAlignment;\n    /** Whether the \"auto margin\" is enabled all around or not. */\n    marginAuto?: MarginAutoAlignment | MarginAutoAlignment[];\n    /** Whether the \"content shrink\" is disabled or not. */\n    noShrink?: boolean;\n    /** Flex direction. */\n    orientation?: Orientation;\n    /** Flex vertical alignment. */\n    vAlign?: HorizontalAlignment;\n    /** Whether the \"flex wrap\" is enabled or not. */\n    wrap?: boolean;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'FlexBox';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * FlexBox component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const FlexBox: Comp<FlexBoxProps, HTMLDivElement> = forwardRef((props, ref) => {\n    const {\n        children,\n        className,\n        fillSpace,\n        gap,\n        hAlign,\n        marginAuto,\n        noShrink,\n        orientation,\n        vAlign,\n        wrap,\n        ...forwardedProps\n    } = props;\n\n    return (\n        <div\n            ref={ref}\n            {...forwardedProps}\n            className={classNames(\n                className,\n                handleBasicClasses({\n                    prefix: CLASSNAME,\n                    orientation: orientation ?? (wrap || hAlign || vAlign ? Orientation.horizontal : null),\n                    vAlign,\n                    hAlign,\n                    gap,\n                }),\n                wrap && `${CLASSNAME}--wrap`,\n                fillSpace && `${CLASSNAME}--fill-space`,\n                noShrink && `${CLASSNAME}--no-shrink`,\n                marginAuto && castArray(marginAuto).map((align) => `${CLASSNAME}--margin-auto-${align}`),\n            )}\n        >\n            {children}\n        </div>\n    );\n});\nFlexBox.displayName = COMPONENT_NAME;\nFlexBox.className = CLASSNAME;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","FlexBox","forwardRef","props","ref","children","className","fillSpace","gap","hAlign","marginAuto","noShrink","orientation","vAlign","wrap","forwardedProps","classNames","handleBasicClasses","prefix","Orientation","horizontal","castArray","map","align","displayName"],"mappings":";;;;;;AAkCA;;;AAGA,IAAMA,cAAc,GAAG,SAAvB;AAEA;;;;AAGA,IAAMC,SAAS,GAAGC,gBAAgB,CAACF,cAAD,CAAlC;AAEA;;;;;;;;IAOaG,OAA2C,GAAGC,UAAU,CAAC,UAACC,KAAD,EAAQC,GAAR,EAAgB;AAAA,MAE9EC,QAF8E,GAa9EF,KAb8E,CAE9EE,QAF8E;AAAA,MAG9EC,SAH8E,GAa9EH,KAb8E,CAG9EG,SAH8E;AAAA,MAI9EC,SAJ8E,GAa9EJ,KAb8E,CAI9EI,SAJ8E;AAAA,MAK9EC,GAL8E,GAa9EL,KAb8E,CAK9EK,GAL8E;AAAA,MAM9EC,MAN8E,GAa9EN,KAb8E,CAM9EM,MAN8E;AAAA,MAO9EC,UAP8E,GAa9EP,KAb8E,CAO9EO,UAP8E;AAAA,MAQ9EC,QAR8E,GAa9ER,KAb8E,CAQ9EQ,QAR8E;AAAA,MAS9EC,WAT8E,GAa9ET,KAb8E,CAS9ES,WAT8E;AAAA,MAU9EC,MAV8E,GAa9EV,KAb8E,CAU9EU,MAV8E;AAAA,MAW9EC,IAX8E,GAa9EX,KAb8E,CAW9EW,IAX8E;AAAA,MAY3EC,cAZ2E,4BAa9EZ,KAb8E;;AAelF,SACI;AACI,IAAA,GAAG,EAAEC;AADT,KAEQW,cAFR;AAGI,IAAA,SAAS,EAAEC,UAAU,CACjBV,SADiB,EAEjBW,kBAAkB,CAAC;AACfC,MAAAA,MAAM,EAAEnB,SADO;AAEfa,MAAAA,WAAW,EAAEA,WAAF,aAAEA,WAAF,cAAEA,WAAF,GAAkBE,IAAI,IAAIL,MAAR,IAAkBI,MAAlB,GAA2BM,WAAW,CAACC,UAAvC,GAAoD,IAFlE;AAGfP,MAAAA,MAAM,EAANA,MAHe;AAIfJ,MAAAA,MAAM,EAANA,MAJe;AAKfD,MAAAA,GAAG,EAAHA;AALe,KAAD,CAFD,EASjBM,IAAI,cAAOf,SAAP,WATa,EAUjBQ,SAAS,cAAOR,SAAP,iBAVQ,EAWjBY,QAAQ,cAAOZ,SAAP,gBAXS,EAYjBW,UAAU,IAAIW,SAAS,CAACX,UAAD,CAAT,CAAsBY,GAAtB,CAA0B,UAACC,KAAD;AAAA,uBAAcxB,SAAd,2BAAwCwB,KAAxC;AAAA,KAA1B,CAZG;AAHzB,MAkBKlB,QAlBL,CADJ;AAsBH,CArCoE;AAsCrEJ,OAAO,CAACuB,WAAR,GAAsB1B,cAAtB;AACAG,OAAO,CAACK,SAAR,GAAoBP,SAApB;;;;"}
+{"version":3,"file":"FlexBox.js","sources":["../../../src/components/flex-box/FlexBox.tsx"],"sourcesContent":["import { Alignment, HorizontalAlignment, Orientation, VerticalAlignment } from '@lumx/react';\nimport { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';\nimport classNames from 'classnames';\nimport castArray from 'lodash/castArray';\nimport React, { forwardRef, ReactNode } from 'react';\nimport { Size } from '..';\n\nexport type MarginAutoAlignment = Extract<Alignment, 'top' | 'bottom' | 'right' | 'left'>;\nexport type GapSize = Extract<Size, 'regular' | 'medium' | 'big' | 'huge'>;\n\n/**\n * Defines the props of the component.\n */\nexport interface FlexBoxProps extends GenericProps {\n    /** Children elements. */\n    children?: ReactNode;\n    /** Whether the \"content filling space\" is enabled or not. */\n    fillSpace?: boolean;\n    /** Gap space between flexbox items. */\n    gap?: GapSize;\n    /** Flex horizontal alignment. */\n    hAlign?: VerticalAlignment;\n    /** Whether the \"auto margin\" is enabled all around or not. */\n    marginAuto?: MarginAutoAlignment | MarginAutoAlignment[];\n    /** Whether the \"content shrink\" is disabled or not. */\n    noShrink?: boolean;\n    /** Flex direction. */\n    orientation?: Orientation;\n    /** Flex vertical alignment. */\n    vAlign?: HorizontalAlignment;\n    /** Whether the \"flex wrap\" is enabled or not. */\n    wrap?: boolean;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'FlexBox';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * FlexBox component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const FlexBox: Comp<FlexBoxProps, HTMLDivElement> = forwardRef((props, ref) => {\n    const {\n        children,\n        className,\n        fillSpace,\n        gap,\n        hAlign,\n        marginAuto,\n        noShrink,\n        orientation,\n        vAlign,\n        wrap,\n        ...forwardedProps\n    } = props;\n\n    return (\n        <div\n            ref={ref}\n            {...forwardedProps}\n            className={classNames(\n                className,\n                handleBasicClasses({\n                    prefix: CLASSNAME,\n                    orientation: orientation ?? (wrap || hAlign || vAlign ? Orientation.horizontal : null),\n                    vAlign,\n                    hAlign,\n                    gap,\n                }),\n                wrap && `${CLASSNAME}--wrap`,\n                fillSpace && `${CLASSNAME}--fill-space`,\n                noShrink && `${CLASSNAME}--no-shrink`,\n                marginAuto && castArray(marginAuto).map((align) => `${CLASSNAME}--margin-auto-${align}`),\n            )}\n        >\n            {children}\n        </div>\n    );\n});\nFlexBox.displayName = COMPONENT_NAME;\nFlexBox.className = CLASSNAME;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","FlexBox","forwardRef","props","ref","children","className","fillSpace","gap","hAlign","marginAuto","noShrink","orientation","vAlign","wrap","forwardedProps","classNames","handleBasicClasses","prefix","Orientation","horizontal","castArray","map","align","displayName"],"mappings":";;;;;;AAkCA;;;AAGA,IAAMA,cAAc,GAAG,SAAvB;AAEA;;;;AAGA,IAAMC,SAAS,GAAGC,gBAAgB,CAACF,cAAD,CAAlC;AAEA;;;;;;;;IAOaG,OAA2C,GAAGC,UAAU,CAAC,UAACC,KAAD,EAAQC,GAAR,EAAgB;AAAA,MAE9EC,QAF8E,GAa9EF,KAb8E,CAE9EE,QAF8E;AAAA,MAG9EC,SAH8E,GAa9EH,KAb8E,CAG9EG,SAH8E;AAAA,MAI9EC,SAJ8E,GAa9EJ,KAb8E,CAI9EI,SAJ8E;AAAA,MAK9EC,GAL8E,GAa9EL,KAb8E,CAK9EK,GAL8E;AAAA,MAM9EC,MAN8E,GAa9EN,KAb8E,CAM9EM,MAN8E;AAAA,MAO9EC,UAP8E,GAa9EP,KAb8E,CAO9EO,UAP8E;AAAA,MAQ9EC,QAR8E,GAa9ER,KAb8E,CAQ9EQ,QAR8E;AAAA,MAS9EC,WAT8E,GAa9ET,KAb8E,CAS9ES,WAT8E;AAAA,MAU9EC,MAV8E,GAa9EV,KAb8E,CAU9EU,MAV8E;AAAA,MAW9EC,IAX8E,GAa9EX,KAb8E,CAW9EW,IAX8E;AAAA,MAY3EC,cAZ2E,4BAa9EZ,KAb8E;;AAelF,SACI;AACI,IAAA,GAAG,EAAEC;AADT,KAEQW,cAFR;AAGI,IAAA,SAAS,EAAEC,UAAU,CACjBV,SADiB,EAEjBW,kBAAkB,CAAC;AACfC,MAAAA,MAAM,EAAEnB,SADO;AAEfa,MAAAA,WAAW,EAAEA,WAAF,aAAEA,WAAF,cAAEA,WAAF,GAAkBE,IAAI,IAAIL,MAAR,IAAkBI,MAAlB,GAA2BM,WAAW,CAACC,UAAvC,GAAoD,IAFlE;AAGfP,MAAAA,MAAM,EAANA,MAHe;AAIfJ,MAAAA,MAAM,EAANA,MAJe;AAKfD,MAAAA,GAAG,EAAHA;AALe,KAAD,CAFD,EASjBM,IAAI,cAAOf,SAAP,WATa,EAUjBQ,SAAS,cAAOR,SAAP,iBAVQ,EAWjBY,QAAQ,cAAOZ,SAAP,gBAXS,EAYjBW,UAAU,IAAIW,SAAS,CAACX,UAAD,CAAT,CAAsBY,GAAtB,CAA0B,UAACC,KAAD;AAAA,uBAAcxB,SAAd,2BAAwCwB,KAAxC;AAAA,KAA1B,CAZG;AAHzB,MAkBKlB,QAlBL,CADJ;AAsBH,CArCoE;AAsCrEJ,OAAO,CAACuB,WAAR,GAAsB1B,cAAtB;AACAG,OAAO,CAACK,SAAR,GAAoBP,SAApB;;;;"}

package/esm/_internal/GenericBlock.js

@@ -1,11 +1,11 @@
 import { b as _objectWithoutProperties, f as _toArray, d as _slicedToArray, c as _extends } from './_rollupPluginBabelHelpers.js';
-import { Orientation, Size } from './components.js';
+import { Orientation, Size, Alignment } from './components.js';
 import React, { forwardRef, Children } from 'react';
 import { g as getRootClassName, c as classnames } from './getRootClassName.js';
 import 'lodash/isBoolean';
-import isEmpty from 'lodash/isEmpty';
+import 'lodash/isEmpty';
 import 'lodash/kebabCase';
-import noop from 'lodash/noop';
+import 'lodash/noop';
 import { p as partitionMulti } from './partitionMulti.js';
 import { a as isComponentType } from './type.js';
 import { F as FlexBox } from './FlexBox.js';
@@ -24,29 +24,43 @@ var CLASSNAME = getRootClassName(COMPONENT_NAME);
  */
 
 var DEFAULT_PROPS = {
-  gap: Size.big,
-  orientation: Orientation.horizontal
+  gap: Size.regular,
+  orientation: Orientation.vertical,
+  hAlign: Alignment.center,
+  vAlign: Alignment.center
 };
-var Figure = noop.bind({});
+
+var Figure = function Figure() {
+  return null;
+};
+
 var isFigure = isComponentType(Figure);
-var Content = noop.bind({});
+
+var Content = function Content() {
+  return null;
+};
+
 var isContent = isComponentType(Content);
-var Actions = noop.bind({});
+
+var Actions = function Actions() {
+  return null;
+};
+
 var isActions = isComponentType(Actions);
 /**
  * The GenericBlock is a layout component made of 3 sections that can be
  * displayed either horizontally of vertically with the same gap between each section.
  *
  * The sections are:
- * - `Figure` => A visual element to display before the main content.
- * - `Content` => The main content displayed
- * - `Actions` => One or more actions to set after the element.
+ * * (Optional) `Figure` => A visual element to display before the main content.
+ * * (Required) `Content` => The main content displayed
+ * * (Optional) `Actions` => One or more actions to set after the element.
  *
  * @see https://www.figma.com/file/lzzrQmsfaXRaOyRfoEogPZ/DS%3A-playground?node-id=1%3A4076
  */
 
 var BaseGenericBlock = forwardRef(function (props, ref) {
-  var _sections$figureChild, _ref4, _sections$figureChild2, _sections$figureChild3, _sections$contentChil, _ref5, _sections$contentChil2, _sections$contentChil3, _sections$actionsChil, _ref6, _sections$actionsChil2, _sections$actionsChil3;
+  var _ref4, _sections$figureChild, _sections$figureChild2, _ref5, _sections$contentChil, _sections$contentChil2, _ref6, _sections$actionsChil, _sections$actionsChil2;
 
   var className = props.className,
       figure = props.figure,
@@ -75,42 +89,48 @@ var BaseGenericBlock = forwardRef(function (props, ref) {
 
     return {
       figureChild: figureChild,
-      figureChildProps: (_ref = figureChild) === null || _ref === void 0 ? void 0 : _ref.props,
+      figureChildProps: ((_ref = figureChild) === null || _ref === void 0 ? void 0 : _ref.props) || {},
       contentChild: contentChild,
-      contentChildProps: (_ref2 = contentChild) === null || _ref2 === void 0 ? void 0 : _ref2.props,
+      contentChildProps: ((_ref2 = contentChild) === null || _ref2 === void 0 ? void 0 : _ref2.props) || {},
       actionsChild: actionsChild,
-      actionsChildProps: (_ref3 = actionsChild) === null || _ref3 === void 0 ? void 0 : _ref3.props,
-      otherChildren: otherChildren.filter(function (child) {
-        return !isEmpty(child);
-      })
+      actionsChildProps: ((_ref3 = actionsChild) === null || _ref3 === void 0 ? void 0 : _ref3.props) || {},
+      otherChildren: otherChildren
     };
   }, [children]);
+  var actionsVAlign = Alignment.center;
+
+  if (orientation === Orientation.horizontal) {
+    actionsVAlign = Alignment.right;
+  }
+
+  var contentVAlign = Alignment.center;
+
+  if (orientation === Orientation.horizontal) {
+    contentVAlign = Alignment.left;
+  }
+
   return React.createElement(FlexBox, _extends({
     ref: ref,
     className: classnames(className, CLASSNAME),
     gap: gap,
     orientation: orientation
-  }, forwardedProps), (figure || ((_sections$figureChild = sections.figureChildProps) === null || _sections$figureChild === void 0 ? void 0 : _sections$figureChild.children)) && React.createElement(FlexBox, _extends({
-    ref: (_ref4 = sections.figureChild) === null || _ref4 === void 0 ? void 0 : _ref4.ref,
-    vAlign: forwardedProps.vAlign,
-    hAlign: forwardedProps.hAlign
+  }, forwardedProps), React.createElement(FlexBox, _extends({
+    ref: (_ref4 = sections.figureChild) === null || _ref4 === void 0 ? void 0 : _ref4.ref
   }, figureProps, sections.figureChildProps, {
-    className: classnames(figureProps === null || figureProps === void 0 ? void 0 : figureProps.className, (_sections$figureChild2 = sections.figureChildProps) === null || _sections$figureChild2 === void 0 ? void 0 : _sections$figureChild2.className, "".concat(CLASSNAME, "__figure"))
-  }), figure, (_sections$figureChild3 = sections.figureChildProps) === null || _sections$figureChild3 === void 0 ? void 0 : _sections$figureChild3.children), (((_sections$contentChil = sections.contentChildProps) === null || _sections$contentChil === void 0 ? void 0 : _sections$contentChil.children) || sections.otherChildren.length > 0) && React.createElement(FlexBox, _extends({
+    className: classnames(figureProps === null || figureProps === void 0 ? void 0 : figureProps.className, (_sections$figureChild = sections.figureChildProps) === null || _sections$figureChild === void 0 ? void 0 : _sections$figureChild.className, "".concat(CLASSNAME, "__figure"))
+  }), figure, (_sections$figureChild2 = sections.figureChildProps) === null || _sections$figureChild2 === void 0 ? void 0 : _sections$figureChild2.children), children && React.createElement(FlexBox, _extends({
     ref: (_ref5 = sections.contentChild) === null || _ref5 === void 0 ? void 0 : _ref5.ref,
     orientation: Orientation.vertical,
     fillSpace: true,
-    vAlign: forwardedProps.vAlign,
-    hAlign: forwardedProps.hAlign
+    vAlign: contentVAlign
   }, contentProps, sections.contentChildProps, {
-    className: classnames(contentProps === null || contentProps === void 0 ? void 0 : contentProps.className, (_sections$contentChil2 = sections.contentChildProps) === null || _sections$contentChil2 === void 0 ? void 0 : _sections$contentChil2.className, "".concat(CLASSNAME, "__content"))
-  }), (_sections$contentChil3 = sections.contentChildProps) === null || _sections$contentChil3 === void 0 ? void 0 : _sections$contentChil3.children, sections.otherChildren), (actions || ((_sections$actionsChil = sections.actionsChildProps) === null || _sections$actionsChil === void 0 ? void 0 : _sections$actionsChil.children)) && React.createElement(FlexBox, _extends({
+    className: classnames(contentProps === null || contentProps === void 0 ? void 0 : contentProps.className, (_sections$contentChil = sections.contentChildProps) === null || _sections$contentChil === void 0 ? void 0 : _sections$contentChil.className, "".concat(CLASSNAME, "__content"))
+  }), (_sections$contentChil2 = sections.contentChildProps) === null || _sections$contentChil2 === void 0 ? void 0 : _sections$contentChil2.children, sections.otherChildren), React.createElement(FlexBox, _extends({
     ref: (_ref6 = sections.actionsChild) === null || _ref6 === void 0 ? void 0 : _ref6.ref,
-    vAlign: forwardedProps.vAlign,
-    hAlign: forwardedProps.hAlign
+    vAlign: actionsVAlign
   }, actionsProps, sections.actionsChildProps, {
-    className: classnames(actionsProps === null || actionsProps === void 0 ? void 0 : actionsProps.className, (_sections$actionsChil2 = sections.actionsChildProps) === null || _sections$actionsChil2 === void 0 ? void 0 : _sections$actionsChil2.className, "".concat(CLASSNAME, "__actions"))
-  }), actions, (_sections$actionsChil3 = sections.actionsChildProps) === null || _sections$actionsChil3 === void 0 ? void 0 : _sections$actionsChil3.children));
+    className: classnames(actionsProps === null || actionsProps === void 0 ? void 0 : actionsProps.className, (_sections$actionsChil = sections.actionsChildProps) === null || _sections$actionsChil === void 0 ? void 0 : _sections$actionsChil.className, "".concat(CLASSNAME, "__actions"))
+  }), actions, (_sections$actionsChil2 = sections.actionsChildProps) === null || _sections$actionsChil2 === void 0 ? void 0 : _sections$actionsChil2.children));
 });
 BaseGenericBlock.displayName = COMPONENT_NAME;
 BaseGenericBlock.className = CLASSNAME;

package/esm/_internal/GenericBlock.js.map

@@ -1 +1 @@
-{"version":3,"file":"GenericBlock.js","sources":["../../../src/components/generic-block/GenericBlock.tsx"],"sourcesContent":["import React, { Children, forwardRef, ReactElement, ReactNode } from 'react';\nimport classNames from 'classnames';\nimport isEmpty from 'lodash/isEmpty';\nimport noop from 'lodash/noop';\nimport { Comp, getRootClassName, isComponentType, partitionMulti } from '@lumx/react/utils';\nimport { Orientation, Size, FlexBox, FlexBoxProps } from '@lumx/react';\n\nexport interface GenericBlockProps extends FlexBoxProps {\n    /**\n     * Component to use as visual element.\n     */\n    figure?: ReactNode;\n    /**\n     * Actions to set after the main content.\n     */\n    actions?: ReactNode;\n    /**\n     * Main content to display or sections components\n     * ({@see GenericBlock.Figure}, {@see GenericBlock.Content} & {@see GenericBlock.Actions})\n     */\n    children: ReactNode;\n    /**\n     * Orientation of the 3 sections\n     */\n    orientation?: FlexBoxProps['orientation'];\n    /**\n     * Horizontal alignment.\n     */\n    hAlign?: FlexBoxProps['hAlign'];\n    /**\n     * Vertical alignment.\n     */\n    vAlign?: FlexBoxProps['vAlign'];\n    /**\n     * The props to forward to the content.\n     * By default, the content will have the same alignment as wrapper.\n     */\n    contentProps?: Omit<FlexBoxProps, 'children'>;\n    /**\n     * props to forward to the actions element.\n     */\n    actionsProps?: Omit<FlexBoxProps, 'children'>;\n    /**\n     * props to forward to the figure element.\n     */\n    figureProps?: Omit<FlexBoxProps, 'children'>;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'GenericBlock';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * Component default props.\n */\nconst DEFAULT_PROPS: Partial<GenericBlockProps> = {\n    gap: Size.big,\n    orientation: Orientation.horizontal,\n};\n\ntype BaseGenericBlock = Comp<GenericBlockProps, HTMLDivElement>;\n\ninterface GenericBlock extends BaseGenericBlock {\n    /**\n     * Use `GenericBlock.Figure` component as children of the `GenericBlock` component as an alternative way to inject\n     * the \"figure\" section of the block (instead of using `figure` and `figureProps` props).\n     */\n    Figure: Comp<FlexBoxProps>;\n    /**\n     * Use `GenericBlock.Content` component as children of the `GenericBlock` component as an alternative way to inject\n     * the \"content\" section of the block (instead of using `content` and `contentProps` props).\n     */\n    Content: Comp<FlexBoxProps>;\n    /**\n     * Use `GenericBlock.Actions` component as children of the `GenericBlock` component as an alternative way to inject\n     * the \"actions\" section of the block (instead of using `actions` and `actionsProps` props).\n     */\n    Actions: Comp<FlexBoxProps>;\n}\n\nconst Figure = noop.bind({}) as Comp<FlexBoxProps>;\nconst isFigure = isComponentType(Figure);\n\nconst Content = noop.bind({}) as Comp<FlexBoxProps>;\nconst isContent = isComponentType(Content);\n\nconst Actions = noop.bind({}) as Comp<FlexBoxProps>;\nconst isActions = isComponentType(Actions);\n\n/**\n * The GenericBlock is a layout component made of 3 sections that can be\n * displayed either horizontally of vertically with the same gap between each section.\n *\n * The sections are:\n * - `Figure` => A visual element to display before the main content.\n * - `Content` => The main content displayed\n * - `Actions` => One or more actions to set after the element.\n *\n * @see https://www.figma.com/file/lzzrQmsfaXRaOyRfoEogPZ/DS%3A-playground?node-id=1%3A4076\n */\nconst BaseGenericBlock: BaseGenericBlock = forwardRef((props, ref) => {\n    const {\n        className,\n        figure,\n        figureProps,\n        children,\n        actions,\n        actionsProps,\n        gap,\n        orientation,\n        contentProps,\n        ...forwardedProps\n    } = props;\n\n    const sections = React.useMemo(() => {\n        // Split children by section type\n        const [[figureChild], [contentChild], [actionsChild], ...otherChildren] = partitionMulti(\n            Children.toArray(children),\n            [isFigure, isContent, isActions],\n        );\n        return {\n            figureChild,\n            figureChildProps: (figureChild as ReactElement)?.props,\n            contentChild,\n            contentChildProps: (contentChild as ReactElement)?.props,\n            actionsChild,\n            actionsChildProps: (actionsChild as ReactElement)?.props,\n            otherChildren: otherChildren.filter((child) => !isEmpty(child)),\n        };\n    }, [children]);\n\n    return (\n        <FlexBox\n            ref={ref}\n            className={classNames(className, CLASSNAME)}\n            gap={gap}\n            orientation={orientation}\n            {...forwardedProps}\n        >\n            {(figure || sections.figureChildProps?.children) && (\n                <FlexBox\n                    ref={(sections.figureChild as any)?.ref}\n                    vAlign={forwardedProps.vAlign}\n                    hAlign={forwardedProps.hAlign}\n                    {...figureProps}\n                    {...sections.figureChildProps}\n                    className={classNames(\n                        figureProps?.className,\n                        sections.figureChildProps?.className,\n                        `${CLASSNAME}__figure`,\n                    )}\n                >\n                    {figure}\n                    {sections.figureChildProps?.children}\n                </FlexBox>\n            )}\n\n            {(sections.contentChildProps?.children || sections.otherChildren.length > 0) && (\n                <FlexBox\n                    ref={(sections.contentChild as any)?.ref}\n                    orientation={Orientation.vertical}\n                    fillSpace\n                    vAlign={forwardedProps.vAlign}\n                    hAlign={forwardedProps.hAlign}\n                    {...contentProps}\n                    {...sections.contentChildProps}\n                    className={classNames(\n                        contentProps?.className,\n                        sections.contentChildProps?.className,\n                        `${CLASSNAME}__content`,\n                    )}\n                >\n                    {sections.contentChildProps?.children}\n                    {sections.otherChildren}\n                </FlexBox>\n            )}\n\n            {(actions || sections.actionsChildProps?.children) && (\n                <FlexBox\n                    ref={(sections.actionsChild as any)?.ref}\n                    vAlign={forwardedProps.vAlign}\n                    hAlign={forwardedProps.hAlign}\n                    {...actionsProps}\n                    {...sections.actionsChildProps}\n                    className={classNames(\n                        actionsProps?.className,\n                        sections.actionsChildProps?.className,\n                        `${CLASSNAME}__actions`,\n                    )}\n                >\n                    {actions}\n                    {sections.actionsChildProps?.children}\n                </FlexBox>\n            )}\n        </FlexBox>\n    );\n});\nBaseGenericBlock.displayName = COMPONENT_NAME;\nBaseGenericBlock.className = CLASSNAME;\nBaseGenericBlock.defaultProps = DEFAULT_PROPS;\n\nexport const GenericBlock: GenericBlock = Object.assign(BaseGenericBlock, { Figure, Content, Actions });\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","gap","Size","big","orientation","Orientation","horizontal","Figure","noop","bind","isFigure","isComponentType","Content","isContent","Actions","isActions","BaseGenericBlock","forwardRef","props","ref","className","figure","figureProps","children","actions","actionsProps","contentProps","forwardedProps","sections","React","useMemo","partitionMulti","Children","toArray","figureChild","contentChild","actionsChild","otherChildren","figureChildProps","contentChildProps","actionsChildProps","filter","child","isEmpty","classNames","vAlign","hAlign","length","vertical","displayName","defaultProps","GenericBlock","Object","assign"],"mappings":"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"}
+{"version":3,"file":"GenericBlock.js","sources":["../../../src/components/generic-block/GenericBlock.tsx"],"sourcesContent":["import React, { Children, forwardRef, ReactElement, ReactNode } from 'react';\nimport classNames from 'classnames';\nimport { Comp, getRootClassName, isComponentType, partitionMulti } from '@lumx/react/utils';\nimport { Orientation, Size, FlexBox, FlexBoxProps, Alignment, HorizontalAlignment } from '@lumx/react';\n\nexport interface GenericBlockProps extends FlexBoxProps {\n    /**\n     * Component to use as visual element.\n     */\n    figure?: ReactNode;\n    /**\n     * Actions to set after the main content.\n     */\n    actions?: ReactNode;\n    /**\n     * Main content to display or sections components\n     * ({@see GenericBlock.Figure}, {@see GenericBlock.Content} & {@see GenericBlock.Actions})\n     */\n    children: ReactNode;\n    /**\n     * Orientation of the 3 sections\n     */\n    orientation?: FlexBoxProps['orientation'];\n    /**\n     * Horizontal alignment.\n     */\n    hAlign?: FlexBoxProps['hAlign'];\n    /**\n     * Vertical alignment.\n     */\n    vAlign?: FlexBoxProps['vAlign'];\n    /**\n     * The props to forward to the content.\n     * By default, the content will have the same alignment as wrapper.\n     */\n    contentProps?: Omit<FlexBoxProps, 'children'>;\n    /**\n     * props to forward to the actions element.\n     */\n    actionsProps?: Omit<FlexBoxProps, 'children'>;\n    /**\n     * props to forward to the figure element.\n     */\n    figureProps?: Omit<FlexBoxProps, 'children'>;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'GenericBlock';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * Component default props.\n */\nconst DEFAULT_PROPS: Partial<GenericBlockProps> = {\n    gap: Size.regular,\n    orientation: Orientation.vertical,\n    hAlign: Alignment.center,\n    vAlign: Alignment.center,\n};\n\ntype BaseGenericBlock = Comp<GenericBlockProps, HTMLDivElement>;\n\ninterface GenericBlock extends BaseGenericBlock {\n    /**\n     * Use `GenericBlock.Figure` component as children of the `GenericBlock` component as an alternative way to inject\n     * the \"figure\" section of the block (instead of using `figure` and `figureProps` props).\n     */\n    Figure: Comp<FlexBoxProps>;\n    /**\n     * Use `GenericBlock.Content` component as children of the `GenericBlock` component as an alternative way to inject\n     * the \"content\" section of the block (instead of using `content` and `contentProps` props).\n     */\n    Content: Comp<FlexBoxProps>;\n    /**\n     * Use `GenericBlock.Actions` component as children of the `GenericBlock` component as an alternative way to inject\n     * the \"actions\" section of the block (instead of using `actions` and `actionsProps` props).\n     */\n    Actions: Comp<FlexBoxProps>;\n}\n\nconst Figure = (() => null) as any;\nconst isFigure = isComponentType(Figure);\n\nconst Content = (() => null) as any;\nconst isContent = isComponentType(Content);\n\nconst Actions = (() => null) as any;\nconst isActions = isComponentType(Actions);\n\n/**\n * The GenericBlock is a layout component made of 3 sections that can be\n * displayed either horizontally of vertically with the same gap between each section.\n *\n * The sections are:\n * * (Optional) `Figure` => A visual element to display before the main content.\n * * (Required) `Content` => The main content displayed\n * * (Optional) `Actions` => One or more actions to set after the element.\n *\n * @see https://www.figma.com/file/lzzrQmsfaXRaOyRfoEogPZ/DS%3A-playground?node-id=1%3A4076\n */\nconst BaseGenericBlock: BaseGenericBlock = forwardRef((props, ref) => {\n    const {\n        className,\n        figure,\n        figureProps,\n        children,\n        actions,\n        actionsProps,\n        gap,\n        orientation,\n        contentProps,\n        ...forwardedProps\n    } = props;\n\n    const sections = React.useMemo(() => {\n        // Split children by section type\n        const [[figureChild], [contentChild], [actionsChild], ...otherChildren] = partitionMulti(\n            Children.toArray(children),\n            [isFigure, isContent, isActions],\n        );\n        return {\n            figureChild,\n            figureChildProps: (figureChild as ReactElement)?.props || {},\n            contentChild,\n            contentChildProps: (contentChild as ReactElement)?.props || {},\n            actionsChild,\n            actionsChildProps: (actionsChild as ReactElement)?.props || {},\n            otherChildren,\n        };\n    }, [children]);\n\n    let actionsVAlign: HorizontalAlignment = Alignment.center;\n    if (orientation === Orientation.horizontal) {\n        actionsVAlign = Alignment.right;\n    }\n    let contentVAlign: HorizontalAlignment = Alignment.center;\n    if (orientation === Orientation.horizontal) {\n        contentVAlign = Alignment.left;\n    }\n\n    return (\n        <FlexBox\n            ref={ref}\n            className={classNames(className, CLASSNAME)}\n            gap={gap}\n            orientation={orientation}\n            {...forwardedProps}\n        >\n            <FlexBox\n                ref={(sections.figureChild as any)?.ref}\n                {...figureProps}\n                {...sections.figureChildProps}\n                className={classNames(\n                    figureProps?.className,\n                    sections.figureChildProps?.className,\n                    `${CLASSNAME}__figure`,\n                )}\n            >\n                {figure}\n                {sections.figureChildProps?.children}\n            </FlexBox>\n\n            {children && (\n                <FlexBox\n                    ref={(sections.contentChild as any)?.ref}\n                    orientation={Orientation.vertical}\n                    fillSpace\n                    vAlign={contentVAlign}\n                    {...contentProps}\n                    {...sections.contentChildProps}\n                    className={classNames(\n                        contentProps?.className,\n                        sections.contentChildProps?.className,\n                        `${CLASSNAME}__content`,\n                    )}\n                >\n                    {sections.contentChildProps?.children}\n                    {sections.otherChildren}\n                </FlexBox>\n            )}\n\n            <FlexBox\n                ref={(sections.actionsChild as any)?.ref}\n                vAlign={actionsVAlign}\n                {...actionsProps}\n                {...sections.actionsChildProps}\n                className={classNames(\n                    actionsProps?.className,\n                    sections.actionsChildProps?.className,\n                    `${CLASSNAME}__actions`,\n                )}\n            >\n                {actions}\n                {sections.actionsChildProps?.children}\n            </FlexBox>\n        </FlexBox>\n    );\n});\nBaseGenericBlock.displayName = COMPONENT_NAME;\nBaseGenericBlock.className = CLASSNAME;\nBaseGenericBlock.defaultProps = DEFAULT_PROPS;\n\nexport const GenericBlock: GenericBlock = Object.assign(BaseGenericBlock, { Figure, Content, Actions });\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","gap","Size","regular","orientation","Orientation","vertical","hAlign","Alignment","center","vAlign","Figure","isFigure","isComponentType","Content","isContent","Actions","isActions","BaseGenericBlock","forwardRef","props","ref","className","figure","figureProps","children","actions","actionsProps","contentProps","forwardedProps","sections","React","useMemo","partitionMulti","Children","toArray","figureChild","contentChild","actionsChild","otherChildren","figureChildProps","contentChildProps","actionsChildProps","actionsVAlign","horizontal","right","contentVAlign","left","classNames","displayName","defaultProps","GenericBlock","Object","assign"],"mappings":"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"}

package/package.json

@@ -7,8 +7,8 @@
     },
     "dependencies": {
         "@juggle/resize-observer": "^3.2.0",
-        "@lumx/core": "^2.2.22-alpha-fix-generic-block.2",
-        "@lumx/icons": "^2.2.22-alpha-fix-generic-block.2",
+        "@lumx/core": "^2.2.22-alpha-dart-sass.1",
+        "@lumx/icons": "^2.2.22-alpha-dart-sass.1",
         "@popperjs/core": "^2.5.4",
         "body-scroll-lock": "^3.1.5",
         "classnames": "^2.2.6",
@@ -120,6 +120,6 @@
         "build:storybook": "cd storybook && ./build"
     },
     "sideEffects": false,
-    "version": "2.2.22-alpha-fix-generic-block.2",
-    "gitHead": "4670b30d082cf206ed04d3fc365825d17048b2de"
+    "version": "2.2.22-alpha-dart-sass.1",
+    "gitHead": "c08fe7cee4e0d7b083670d4de6c2bd5e3807d7db"
 }

package/src/components/flex-box/FlexBox.stories.tsx

@@ -18,7 +18,7 @@ const flexViewKnobConfigs: Array<
     ['fillSpace', boolean],
     ['noShrink', boolean],
     ['wrap', boolean],
-    ['gap', select, [DEFAULT_PROPS.gap, Size.tiny, Size.regular, Size.medium, Size.big, Size.huge]],
+    ['gap', select, [DEFAULT_PROPS.gap, Size.regular, Size.medium, Size.big, Size.huge]],
     ['hAlign', select, [DEFAULT_PROPS.hAlign, Alignment.center, Alignment.top, Alignment.bottom]],
     ['vAlign', select, [DEFAULT_PROPS.vAlign, Alignment.center, Alignment.right, Alignment.left]],
     ['orientation', select, [undefined, Orientation.horizontal, Orientation.vertical]],

package/src/components/flex-box/FlexBox.tsx

@@ -6,7 +6,7 @@ import React, { forwardRef, ReactNode } from 'react';
 import { Size } from '..';
 
 export type MarginAutoAlignment = Extract<Alignment, 'top' | 'bottom' | 'right' | 'left'>;
-export type GapSize = Extract<Size, 'tiny' | 'regular' | 'medium' | 'big' | 'huge'>;
+export type GapSize = Extract<Size, 'regular' | 'medium' | 'big' | 'huge'>;
 
 /**
  * Defines the props of the component.

package/src/components/generic-block/GenericBlock.stories.tsx

@@ -0,0 +1,90 @@
+import React from 'react';
+import { mdiPencil } from '@lumx/icons';
+import { GenericBlock, Button, Icon, Size, Orientation, Alignment } from '@lumx/react';
+import { HasTheme } from '@lumx/react/utils';
+
+export default { title: 'LumX components/generic-block/GenericBlock' };
+
+const redBorderStyle = { border: '1px solid red' };
+
+/**
+ * Fill sections using props
+ */
+export const SectionsInProps = ({ theme }: HasTheme) => (
+    <GenericBlock
+        figure={<Icon icon={mdiPencil} size={Size.m} />}
+        actionsProps={{ style: redBorderStyle }}
+        figureProps={{ style: redBorderStyle }}
+        contentProps={{ style: redBorderStyle }}
+        actions={<Button theme={theme}>Button</Button>}
+    >
+        Content
+    </GenericBlock>
+);
+
+/**
+ * Fill sections using child section components.
+ */
+export const SectionsInChildren = ({ theme }: HasTheme) => (
+    <GenericBlock>
+        <GenericBlock.Figure style={redBorderStyle}>
+            <Icon icon={mdiPencil} size={Size.m} />
+        </GenericBlock.Figure>
+        <GenericBlock.Content style={redBorderStyle}>Content</GenericBlock.Content>
+        <GenericBlock.Actions style={redBorderStyle}>
+            <Button theme={theme}>Button</Button>
+        </GenericBlock.Actions>
+    </GenericBlock>
+);
+
+export const Vertical = ({ theme }: HasTheme) => (
+    <GenericBlock orientation={Orientation.vertical}>
+        <GenericBlock.Figure style={redBorderStyle}>
+            <Icon icon={mdiPencil} size={Size.m} />
+        </GenericBlock.Figure>
+        <GenericBlock.Content style={redBorderStyle}>Content</GenericBlock.Content>
+        <GenericBlock.Actions fillSpace style={redBorderStyle}>
+            <Button theme={theme}>Button</Button>
+        </GenericBlock.Actions>
+    </GenericBlock>
+);
+
+export const Horizontal = ({ theme }: HasTheme) => (
+    <GenericBlock orientation={Orientation.horizontal}>
+        <GenericBlock.Figure style={redBorderStyle}>
+            <Icon icon={mdiPencil} size={Size.m} />
+        </GenericBlock.Figure>
+        <GenericBlock.Content style={redBorderStyle}>Content</GenericBlock.Content>
+        <GenericBlock.Actions style={redBorderStyle}>
+            <Button theme={theme}>Button</Button>
+        </GenericBlock.Actions>
+    </GenericBlock>
+);
+
+export const HorizontalTop = ({ theme }: HasTheme) => (
+    <GenericBlock orientation={Orientation.horizontal} hAlign={Alignment.top}>
+        <GenericBlock.Figure style={redBorderStyle}>
+            <Icon icon={mdiPencil} size={Size.m} />
+        </GenericBlock.Figure>
+        <GenericBlock.Content style={redBorderStyle}>Content</GenericBlock.Content>
+        <GenericBlock.Actions style={redBorderStyle}>
+            <Button theme={theme}>Button</Button>
+        </GenericBlock.Actions>
+    </GenericBlock>
+);
+
+export const GapSizes = ({ theme }: HasTheme) =>
+    [Size.regular, Size.big, Size.huge].map((gap) => (
+        <GenericBlock key={gap} orientation={Orientation.vertical} gap={gap} style={{ marginBottom: 40 }}>
+            <GenericBlock.Figure style={redBorderStyle}>
+                <Icon icon={mdiPencil} size={Size.m} />
+            </GenericBlock.Figure>
+            <GenericBlock.Content style={redBorderStyle}>
+                <h2>{gap} gap size</h2>
+                <p>block description</p>
+            </GenericBlock.Content>
+            <GenericBlock.Actions style={redBorderStyle}>
+                <Button theme={theme}>Button</Button>
+            </GenericBlock.Actions>
+        </GenericBlock>
+    ));

package/src/components/generic-block/GenericBlock.test.tsx

@@ -3,7 +3,7 @@ import { mount, shallow } from 'enzyme';
 import 'jest-enzyme';
 import { commonTestsSuite } from '@lumx/react/testing/utils';
 
-import { GenericBlock, GenericBlockProps } from '.';
+import { GenericBlock, GenericBlockProps } from './GenericBlock';
 
 const CLASSNAME = GenericBlock.className as string;
 
@@ -20,51 +20,43 @@ describe(`<${GenericBlock.displayName}>`, () => {
     // 1. Test render via snapshot.
     describe('Snapshots and structure', () => {
         it('should render default', () => {
-            const wrapper = shallow(
-                <GenericBlock figure="figure" actions="actions">
-                    Content
-                </GenericBlock>,
-            );
+            const wrapper = shallow(<GenericBlock>Content</GenericBlock>);
 
-            expect(wrapper.prop('gap')).toBe('big');
-            expect(wrapper.prop('orientation')).toBe('horizontal');
+            expect(wrapper.prop('gap')).toBe('regular');
+            expect(wrapper.prop('hAlign')).toBe('center');
+            expect(wrapper.prop('orientation')).toBe('vertical');
+            expect(wrapper.prop('vAlign')).toBe('center');
 
             const figure = wrapper.find('.lumx-generic-block__figure');
-            expect(figure).toHaveLength(1);
+            expect(figure).toBeDefined();
 
             const content = wrapper.find('.lumx-generic-block__content');
-            expect(content).toHaveLength(1);
             expect(content.prop('fillSpace')).toBe(true);
+            expect(content.prop('vAlign')).toBe('center');
             expect(content.prop('orientation')).toBe('vertical');
 
             const actions = wrapper.find('.lumx-generic-block__actions');
-            expect(actions).toHaveLength(1);
+            expect(actions.prop('vAlign')).toBe('center');
         });
 
-        it('should forward vAlign & hAlign', () => {
-            const wrapper = shallow(
-                <GenericBlock figure="figure" actions="actions" vAlign="left" hAlign="bottom">
-                    Content
-                </GenericBlock>,
-            );
+        it('should render horizontal', () => {
+            const wrapper = shallow(<GenericBlock orientation="horizontal">Content</GenericBlock>);
 
-            expect(wrapper.prop('vAlign')).toBe('left');
-            expect(wrapper.prop('hAlign')).toBe('bottom');
+            expect(wrapper.prop('gap')).toBe('regular');
+            expect(wrapper.prop('hAlign')).toBe('center');
+            expect(wrapper.prop('orientation')).toBe('horizontal');
+            expect(wrapper.prop('vAlign')).toBe('center');
 
             const figure = wrapper.find('.lumx-generic-block__figure');
-            expect(figure).toHaveLength(1);
-            expect(figure.prop('vAlign')).toBe('left');
-            expect(figure.prop('hAlign')).toBe('bottom');
+            expect(figure).toBeDefined();
 
             const content = wrapper.find('.lumx-generic-block__content');
-            expect(content).toHaveLength(1);
+            expect(content.prop('fillSpace')).toBe(true);
             expect(content.prop('vAlign')).toBe('left');
-            expect(content.prop('hAlign')).toBe('bottom');
+            expect(content.prop('orientation')).toBe('vertical');
 
             const actions = wrapper.find('.lumx-generic-block__actions');
-            expect(actions).toHaveLength(1);
-            expect(actions.prop('vAlign')).toBe('left');
-            expect(actions.prop('hAlign')).toBe('bottom');
+            expect(actions.prop('vAlign')).toBe('right');
         });
 
         it('should combine figure props', () => {
@@ -82,9 +74,6 @@ describe(`<${GenericBlock.displayName}>`, () => {
             expect(figure.prop('fillSpace')).toBe(true);
             expect(figure.prop('vAlign')).toBe('left');
             expect(figure).toHaveText('Figure 1Figure 2');
-
-            expect(wrapper.find('.lumx-generic-block__content')).toHaveLength(0);
-            expect(wrapper.find('.lumx-generic-block__actions')).toHaveLength(0);
         });
 
         it('should combine content props', () => {
@@ -103,9 +92,6 @@ describe(`<${GenericBlock.displayName}>`, () => {
             expect(content.prop('fillSpace')).toBe(true);
             expect(content.prop('vAlign')).toBe('left');
             expect(content).toHaveText('Content 2Content 1');
-
-            expect(wrapper.find('.lumx-generic-block__figure')).toHaveLength(0);
-            expect(wrapper.find('.lumx-generic-block__actions')).toHaveLength(0);
         });
 
         it('should combine actions props', () => {
@@ -123,9 +109,6 @@ describe(`<${GenericBlock.displayName}>`, () => {
             expect(actions.prop('fillSpace')).toBe(true);
             expect(actions.prop('vAlign')).toBe('left');
             expect(actions).toHaveText('Actions 1Actions 2');
-
-            expect(wrapper.find('.lumx-generic-block__figure')).toHaveLength(0);
-            expect(wrapper.find('.lumx-generic-block__content')).toHaveLength(0);
         });
 
         it('should forward refs', () => {

package/src/components/generic-block/GenericBlock.tsx

@@ -1,9 +1,7 @@
 import React, { Children, forwardRef, ReactElement, ReactNode } from 'react';
 import classNames from 'classnames';
-import isEmpty from 'lodash/isEmpty';
-import noop from 'lodash/noop';
 import { Comp, getRootClassName, isComponentType, partitionMulti } from '@lumx/react/utils';
-import { Orientation, Size, FlexBox, FlexBoxProps } from '@lumx/react';
+import { Orientation, Size, FlexBox, FlexBoxProps, Alignment, HorizontalAlignment } from '@lumx/react';
 
 export interface GenericBlockProps extends FlexBoxProps {
     /**
@@ -60,8 +58,10 @@ const CLASSNAME = getRootClassName(COMPONENT_NAME);
  * Component default props.
  */
 const DEFAULT_PROPS: Partial<GenericBlockProps> = {
-    gap: Size.big,
-    orientation: Orientation.horizontal,
+    gap: Size.regular,
+    orientation: Orientation.vertical,
+    hAlign: Alignment.center,
+    vAlign: Alignment.center,
 };
 
 type BaseGenericBlock = Comp<GenericBlockProps, HTMLDivElement>;
@@ -84,13 +84,13 @@ interface GenericBlock extends BaseGenericBlock {
     Actions: Comp<FlexBoxProps>;
 }
 
-const Figure = noop.bind({}) as Comp<FlexBoxProps>;
+const Figure = (() => null) as any;
 const isFigure = isComponentType(Figure);
 
-const Content = noop.bind({}) as Comp<FlexBoxProps>;
+const Content = (() => null) as any;
 const isContent = isComponentType(Content);
 
-const Actions = noop.bind({}) as Comp<FlexBoxProps>;
+const Actions = (() => null) as any;
 const isActions = isComponentType(Actions);
 
 /**
@@ -98,9 +98,9 @@ const isActions = isComponentType(Actions);
  * displayed either horizontally of vertically with the same gap between each section.
  *
  * The sections are:
- * - `Figure` => A visual element to display before the main content.
- * - `Content` => The main content displayed
- * - `Actions` => One or more actions to set after the element.
+ * * (Optional) `Figure` => A visual element to display before the main content.
+ * * (Required) `Content` => The main content displayed
+ * * (Optional) `Actions` => One or more actions to set after the element.
  *
  * @see https://www.figma.com/file/lzzrQmsfaXRaOyRfoEogPZ/DS%3A-playground?node-id=1%3A4076
  */
@@ -126,15 +126,24 @@ const BaseGenericBlock: BaseGenericBlock = forwardRef((props, ref) => {
         );
         return {
             figureChild,
-            figureChildProps: (figureChild as ReactElement)?.props,
+            figureChildProps: (figureChild as ReactElement)?.props || {},
             contentChild,
-            contentChildProps: (contentChild as ReactElement)?.props,
+            contentChildProps: (contentChild as ReactElement)?.props || {},
             actionsChild,
-            actionsChildProps: (actionsChild as ReactElement)?.props,
-            otherChildren: otherChildren.filter((child) => !isEmpty(child)),
+            actionsChildProps: (actionsChild as ReactElement)?.props || {},
+            otherChildren,
         };
     }, [children]);
 
+    let actionsVAlign: HorizontalAlignment = Alignment.center;
+    if (orientation === Orientation.horizontal) {
+        actionsVAlign = Alignment.right;
+    }
+    let contentVAlign: HorizontalAlignment = Alignment.center;
+    if (orientation === Orientation.horizontal) {
+        contentVAlign = Alignment.left;
+    }
+
     return (
         <FlexBox
             ref={ref}
@@ -143,31 +152,26 @@ const BaseGenericBlock: BaseGenericBlock = forwardRef((props, ref) => {
             orientation={orientation}
             {...forwardedProps}
         >
-            {(figure || sections.figureChildProps?.children) && (
-                <FlexBox
-                    ref={(sections.figureChild as any)?.ref}
-                    vAlign={forwardedProps.vAlign}
-                    hAlign={forwardedProps.hAlign}
-                    {...figureProps}
-                    {...sections.figureChildProps}
-                    className={classNames(
-                        figureProps?.className,
-                        sections.figureChildProps?.className,
-                        `${CLASSNAME}__figure`,
-                    )}
-                >
-                    {figure}
-                    {sections.figureChildProps?.children}
-                </FlexBox>
-            )}
+            <FlexBox
+                ref={(sections.figureChild as any)?.ref}
+                {...figureProps}
+                {...sections.figureChildProps}
+                className={classNames(
+                    figureProps?.className,
+                    sections.figureChildProps?.className,
+                    `${CLASSNAME}__figure`,
+                )}
+            >
+                {figure}
+                {sections.figureChildProps?.children}
+            </FlexBox>
 
-            {(sections.contentChildProps?.children || sections.otherChildren.length > 0) && (
+            {children && (
                 <FlexBox
                     ref={(sections.contentChild as any)?.ref}
                     orientation={Orientation.vertical}
                     fillSpace
-                    vAlign={forwardedProps.vAlign}
-                    hAlign={forwardedProps.hAlign}
+                    vAlign={contentVAlign}
                     {...contentProps}
                     {...sections.contentChildProps}
                     className={classNames(
@@ -181,23 +185,20 @@ const BaseGenericBlock: BaseGenericBlock = forwardRef((props, ref) => {
                 </FlexBox>
             )}
 
-            {(actions || sections.actionsChildProps?.children) && (
-                <FlexBox
-                    ref={(sections.actionsChild as any)?.ref}
-                    vAlign={forwardedProps.vAlign}
-                    hAlign={forwardedProps.hAlign}
-                    {...actionsProps}
-                    {...sections.actionsChildProps}
-                    className={classNames(
-                        actionsProps?.className,
-                        sections.actionsChildProps?.className,
-                        `${CLASSNAME}__actions`,
-                    )}
-                >
-                    {actions}
-                    {sections.actionsChildProps?.children}
-                </FlexBox>
-            )}
+            <FlexBox
+                ref={(sections.actionsChild as any)?.ref}
+                vAlign={actionsVAlign}
+                {...actionsProps}
+                {...sections.actionsChildProps}
+                className={classNames(
+                    actionsProps?.className,
+                    sections.actionsChildProps?.className,
+                    `${CLASSNAME}__actions`,
+                )}
+            >
+                {actions}
+                {sections.actionsChildProps?.children}
+            </FlexBox>
         </FlexBox>
     );
 });

package/types.d.ts

@@ -1096,7 +1096,7 @@ export interface FlagProps extends GenericProps, HasTheme {
  */
 export declare const Flag: Comp<FlagProps, HTMLDivElement>;
 export declare type MarginAutoAlignment = Extract<Alignment, "top" | "bottom" | "right" | "left">;
-export declare type GapSize = Extract<Size, "tiny" | "regular" | "medium" | "big" | "huge">;
+export declare type GapSize = Extract<Size, "regular" | "medium" | "big" | "huge">;
 /**
  * Defines the props of the component.
  */

package/src/components/generic-block/GenericBlock.stories.jsx

@@ -1,106 +0,0 @@
-import React from 'react';
-import { mdiPencil } from '@lumx/icons';
-import { GenericBlock, Button, Icon, Size } from '@lumx/react';
-
-export default { title: 'LumX components/generic-block/GenericBlock' };
-
-const redBorderStyle = { border: '1px solid red' };
-
-export const SectionsInProps = ({ theme }) => (
-    <GenericBlock
-        figure={<Icon icon={mdiPencil} size={Size.m} />}
-        actionsProps={{ style: redBorderStyle }}
-        figureProps={{ style: redBorderStyle }}
-        contentProps={{ style: redBorderStyle }}
-        actions={<Button theme={theme}>Button</Button>}
-    >
-        Content
-    </GenericBlock>
-);
-
-export const SectionsInChildren = ({ theme }) => (
-    <GenericBlock>
-        <GenericBlock.Figure style={redBorderStyle}>
-            <Icon icon={mdiPencil} size={Size.m} />
-        </GenericBlock.Figure>
-        <GenericBlock.Content style={redBorderStyle}>Content</GenericBlock.Content>
-        <GenericBlock.Actions style={redBorderStyle}>
-            <Button theme={theme}>Button</Button>
-        </GenericBlock.Actions>
-    </GenericBlock>
-);
-
-const Template = ({ theme, ...props }) => (
-    <GenericBlock {...props}>
-        <GenericBlock.Figure style={redBorderStyle} {...props.figureProps}>
-            <Icon icon={mdiPencil} size={Size.m} />
-        </GenericBlock.Figure>
-        <GenericBlock.Content style={redBorderStyle} {...props.contentProps}>
-            {props.content || 'Content'}
-        </GenericBlock.Content>
-        <GenericBlock.Actions style={redBorderStyle} {...props.actionsProps}>
-            <Button theme={theme}>Button</Button>
-        </GenericBlock.Actions>
-    </GenericBlock>
-);
-
-export const Vertical = Template.bind({});
-Vertical.args = {
-    orientation: 'vertical',
-};
-
-export const VerticalAlignCenter = Template.bind({});
-VerticalAlignCenter.args = {
-    orientation: 'vertical',
-    vAlign: 'center',
-};
-
-export const VerticalOverflow = Template.bind({});
-VerticalOverflow.args = {
-    orientation: 'vertical',
-    style: { width: 300 },
-    content: (
-        <span style={{ overflow: 'hidden', textOverflow: 'ellipsis' }}>
-            _________________________________________________________________
-        </span>
-    ),
-};
-
-export const Horizontal = Template.bind({});
-Horizontal.args = {
-    orientation: 'horizontal',
-};
-
-export const HorizontalAlignRightBottom = Template.bind({});
-HorizontalAlignRightBottom.args = {
-    orientation: 'horizontal',
-    vAlign: 'right',
-    hAlign: 'bottom',
-};
-
-export const HorizontalOverflow = Template.bind({});
-HorizontalOverflow.args = {
-    orientation: 'horizontal',
-    style: { width: 300 },
-    content: (
-        <span style={{ overflow: 'hidden', textOverflow: 'ellipsis' }}>
-            _________________________________________________________________
-        </span>
-    ),
-};
-
-export const GapSizes = ({ theme }) =>
-    [Size.regular, Size.big, Size.huge].map((gap) => (
-        <GenericBlock key={gap} orientation="vertical" gap={gap} style={{ marginBottom: 40 }}>
-            <GenericBlock.Figure style={redBorderStyle}>
-                <Icon icon={mdiPencil} size={Size.m} />
-            </GenericBlock.Figure>
-            <GenericBlock.Content style={redBorderStyle}>
-                <h2>{gap} gap size</h2>
-                <p>block description</p>
-            </GenericBlock.Content>
-            <GenericBlock.Actions style={redBorderStyle}>
-                <Button theme={theme}>Button</Button>
-            </GenericBlock.Actions>
-        </GenericBlock>
-    ));