@lumx/react 2.2.22 → 2.2.23

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

@@ -0,0 +1,106 @@
+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>
+    ));

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 './GenericBlock';
+import { GenericBlock, GenericBlockProps } from '.';
 
 const CLASSNAME = GenericBlock.className as string;
 
@@ -20,43 +20,51 @@ describe(`<${GenericBlock.displayName}>`, () => {
     // 1. Test render via snapshot.
     describe('Snapshots and structure', () => {
         it('should render default', () => {
-            const wrapper = shallow(<GenericBlock>Content</GenericBlock>);
+            const wrapper = shallow(
+                <GenericBlock figure="figure" actions="actions">
+                    Content
+                </GenericBlock>,
+            );
 
-            expect(wrapper.prop('gap')).toBe('regular');
-            expect(wrapper.prop('hAlign')).toBe('center');
-            expect(wrapper.prop('orientation')).toBe('vertical');
-            expect(wrapper.prop('vAlign')).toBe('center');
+            expect(wrapper.prop('gap')).toBe('big');
+            expect(wrapper.prop('orientation')).toBe('horizontal');
 
             const figure = wrapper.find('.lumx-generic-block__figure');
-            expect(figure).toBeDefined();
+            expect(figure).toHaveLength(1);
 
             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.prop('vAlign')).toBe('center');
+            expect(actions).toHaveLength(1);
         });
 
-        it('should render horizontal', () => {
-            const wrapper = shallow(<GenericBlock orientation="horizontal">Content</GenericBlock>);
+        it('should forward vAlign & hAlign', () => {
+            const wrapper = shallow(
+                <GenericBlock figure="figure" actions="actions" vAlign="left" hAlign="bottom">
+                    Content
+                </GenericBlock>,
+            );
 
-            expect(wrapper.prop('gap')).toBe('regular');
-            expect(wrapper.prop('hAlign')).toBe('center');
-            expect(wrapper.prop('orientation')).toBe('horizontal');
-            expect(wrapper.prop('vAlign')).toBe('center');
+            expect(wrapper.prop('vAlign')).toBe('left');
+            expect(wrapper.prop('hAlign')).toBe('bottom');
 
             const figure = wrapper.find('.lumx-generic-block__figure');
-            expect(figure).toBeDefined();
+            expect(figure).toHaveLength(1);
+            expect(figure.prop('vAlign')).toBe('left');
+            expect(figure.prop('hAlign')).toBe('bottom');
 
             const content = wrapper.find('.lumx-generic-block__content');
-            expect(content.prop('fillSpace')).toBe(true);
+            expect(content).toHaveLength(1);
             expect(content.prop('vAlign')).toBe('left');
-            expect(content.prop('orientation')).toBe('vertical');
+            expect(content.prop('hAlign')).toBe('bottom');
 
             const actions = wrapper.find('.lumx-generic-block__actions');
-            expect(actions.prop('vAlign')).toBe('right');
+            expect(actions).toHaveLength(1);
+            expect(actions.prop('vAlign')).toBe('left');
+            expect(actions.prop('hAlign')).toBe('bottom');
         });
 
         it('should combine figure props', () => {
@@ -74,6 +82,9 @@ 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', () => {
@@ -92,6 +103,9 @@ 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', () => {
@@ -109,6 +123,9 @@ 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,7 +1,9 @@
 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, Alignment, HorizontalAlignment } from '@lumx/react';
+import { Orientation, Size, FlexBox, FlexBoxProps } from '@lumx/react';
 
 export interface GenericBlockProps extends FlexBoxProps {
     /**
@@ -58,10 +60,8 @@ const CLASSNAME = getRootClassName(COMPONENT_NAME);
  * Component default props.
  */
 const DEFAULT_PROPS: Partial<GenericBlockProps> = {
-    gap: Size.regular,
-    orientation: Orientation.vertical,
-    hAlign: Alignment.center,
-    vAlign: Alignment.center,
+    gap: Size.big,
+    orientation: Orientation.horizontal,
 };
 
 type BaseGenericBlock = Comp<GenericBlockProps, HTMLDivElement>;
@@ -84,13 +84,13 @@ interface GenericBlock extends BaseGenericBlock {
     Actions: Comp<FlexBoxProps>;
 }
 
-const Figure = (() => null) as any;
+const Figure = noop.bind({}) as Comp<FlexBoxProps>;
 const isFigure = isComponentType(Figure);
 
-const Content = (() => null) as any;
+const Content = noop.bind({}) as Comp<FlexBoxProps>;
 const isContent = isComponentType(Content);
 
-const Actions = (() => null) as any;
+const Actions = noop.bind({}) as Comp<FlexBoxProps>;
 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:
- * * (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.
+ * - `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.
  *
  * @see https://www.figma.com/file/lzzrQmsfaXRaOyRfoEogPZ/DS%3A-playground?node-id=1%3A4076
  */
@@ -126,24 +126,15 @@ 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,
+            actionsChildProps: (actionsChild as ReactElement)?.props,
+            otherChildren: otherChildren.filter((child) => !isEmpty(child)),
         };
     }, [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}
@@ -152,26 +143,31 @@ const BaseGenericBlock: BaseGenericBlock = forwardRef((props, ref) => {
             orientation={orientation}
             {...forwardedProps}
         >
-            <FlexBox
-                ref={(sections.figureChild as any)?.ref}
-                {...figureProps}
-                {...sections.figureChildProps}
-                className={classNames(
-                    figureProps?.className,
-                    sections.figureChildProps?.className,
-                    `${CLASSNAME}__figure`,
-                )}
-            >
-                {figure}
-                {sections.figureChildProps?.children}
-            </FlexBox>
+            {(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>
+            )}
 
-            {children && (
+            {(sections.contentChildProps?.children || sections.otherChildren.length > 0) && (
                 <FlexBox
                     ref={(sections.contentChild as any)?.ref}
                     orientation={Orientation.vertical}
                     fillSpace
-                    vAlign={contentVAlign}
+                    vAlign={forwardedProps.vAlign}
+                    hAlign={forwardedProps.hAlign}
                     {...contentProps}
                     {...sections.contentChildProps}
                     className={classNames(
@@ -185,20 +181,23 @@ const BaseGenericBlock: BaseGenericBlock = forwardRef((props, ref) => {
                 </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>
+            {(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>
     );
 });

package/src/components/index.ts

@@ -119,14 +119,14 @@ export type TypographyTitleCustom = ValueOf<typeof TypographyTitleCustom>;
 /**
  * List of typographies that can be customized (via CSS variables).
  */
-const TypographyCustom = {
+export const TypographyCustom = {
     ...TypographyTitleCustom,
-    intro: 'intro',
-    'body-large': 'body-large',
-    body: 'body',
-    quote: 'quote',
-    'publish-info': 'publish-info',
-    button: 'button',
+    intro: 'custom-intro',
+    'body-large': 'custom-body-large',
+    body: 'custom-body',
+    quote: 'custom-quote',
+    'publish-info': 'custom-publish-info',
+    button: 'custom-button',
 } as const;
 export type TypographyCustom = ValueOf<typeof TypographyCustom>;
 

package/src/components/link/Link.stories.tsx

@@ -1,6 +1,14 @@
 /* eslint-disable jsx-a11y/anchor-is-valid */
 import { mdiChevronDown, mdiLink } from '@lumx/icons';
-import { ColorPalette, ColorVariant, Link, Typography, TypographyInterface, TypographyTitleCustom } from '@lumx/react';
+import {
+    ColorPalette,
+    ColorVariant,
+    Link,
+    Typography,
+    TypographyCustom,
+    TypographyInterface,
+    TypographyTitleCustom,
+} from '@lumx/react';
 import { boolean, select, text } from '@storybook/addon-knobs';
 import React, { Fragment } from 'react';
 
@@ -13,7 +21,7 @@ const linkTypographies = { ...TypographyInterface, ...TypographyTitleCustom };
 export const SimpleLink = () => (
     <>
         <Link
-            href={text('href', 'https://google.com', 'Link 1')}
+            href={text('href', 'https://example.com', 'Link 1')}
             target={boolean('target: _blank', false, 'Link 1') ? '_blank' : ''}
             color={select('Color', ColorPalette, ColorPalette.blue, 'Link 1')}
             colorVariant={select('Color Variant', ColorVariant, ColorVariant.N, 'Link 1')}
@@ -51,14 +59,16 @@ export const WithoutHref = () => (
     </div>
 );
 
-const CustomLink: React.FC = ({ children, ...props }) =>
-    React.createElement('a', { ...props, style: { color: 'red' } }, children);
+export const WithCustomLink = () => {
+    const CustomLink: React.FC = ({ children, ...props }) =>
+        React.createElement('a', { ...props, style: { color: 'red' } }, children);
 
-export const WithCustomLink = () => (
-    <Link linkAs={CustomLink} href="https://google.com">
-        Custom link
-    </Link>
-);
+    return (
+        <Link linkAs={CustomLink} href="https://example.com">
+            Custom link
+        </Link>
+    );
+};
 
 export const DisabledLink = () => (
     // eslint-disable-next-line jsx-a11y/anchor-is-valid
@@ -67,36 +77,6 @@ export const DisabledLink = () => (
     </Link>
 );
 
-export const WithIcon = () => (
-    <>
-        {Object.values(linkTypographies).map((typography) => (
-            <Fragment key={typography}>
-                {typography}
-                <p>
-                    <Link rightIcon={mdiLink} href="https://www.google.com" typography={typography as any}>
-                        With right icon
-                    </Link>
-                </p>
-                <p>
-                    <Link leftIcon={mdiChevronDown} href="https://www.google.com" typography={typography as any}>
-                        With left icon
-                    </Link>
-                </p>
-                <p>
-                    <Link
-                        leftIcon={mdiChevronDown}
-                        rightIcon={mdiLink}
-                        href="https://www.google.com"
-                        typography={typography as any}
-                    >
-                        With right and left icon
-                    </Link>
-                </p>
-            </Fragment>
-        ))}
-    </>
-);
-
 export const WithCustomizableTypography = () => (
     <>
         <style>{`
@@ -104,8 +84,58 @@ export const WithCustomizableTypography = () => (
             --lumx-typography-custom-title1-font-size: 5px;
         }
         `}</style>
-        <Link typography={Typography.custom.title1} href="https://google.com">
+        <Link typography={Typography.custom.title1} href="https://example.com">
             Link with customizable `body` typography
         </Link>
     </>
 );
+
+export const AllTypography = () => {
+    const typographies = [undefined, ...Object.values(TypographyInterface), ...Object.values(TypographyCustom)];
+    return (
+        <table>
+            {typographies.map((typography) => (
+                <tr key={typography}>
+                    <td>{typography}</td>
+                    <td>
+                        <Link
+                            leftIcon={mdiChevronDown}
+                            rightIcon={mdiLink}
+                            typography={typography}
+                            href="https://example.com"
+                        >
+                            Link text
+                        </Link>
+                    </td>
+                </tr>
+            ))}
+        </table>
+    );
+};
+
+export const AllColor = () => {
+    const colorVariants = [undefined, ...Object.values(ColorVariant)];
+    const colors = [undefined, ...Object.values(ColorPalette)];
+    return (
+        <table style={{ borderCollapse: 'separate', borderSpacing: 5 }}>
+            <tr>
+                <td />
+                {colorVariants.map((colorVariant) => (
+                    <td key={colorVariant}>{colorVariant}</td>
+                ))}
+            </tr>
+            {colors.map((color) => (
+                <tr key={color}>
+                    <td>{color}</td>
+                    {colorVariants.map((colorVariant) => (
+                        <td key={colorVariant}>
+                            <Link href="https://example.com" color={color} colorVariant={colorVariant}>
+                                Some text
+                            </Link>
+                        </td>
+                    ))}
+                </tr>
+            ))}
+        </table>
+    );
+};

package/src/components/link/Link.tsx

@@ -4,7 +4,7 @@ import isEmpty from 'lodash/isEmpty';
 
 import classNames from 'classnames';
 
-import { Color, ColorVariant, Icon, Size, Typography, TypographyInterface, TypographyTitleCustom } from '@lumx/react';
+import { Color, ColorVariant, Icon, Size, Typography } from '@lumx/react';
 import { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';
 import { renderLink } from '@lumx/react/utils/renderLink';
 
@@ -31,7 +31,7 @@ export interface LinkProps extends GenericProps {
     /** Link target. */
     target?: HTMLAnchorProps['target'];
     /** Typography variant. */
-    typography?: TypographyInterface | TypographyTitleCustom;
+    typography?: Typography;
 }
 
 /**

package/src/components/thumbnail/useFocusPointStyle.test.ts

@@ -0,0 +1,92 @@
+import { shiftPosition } from './useFocusPointStyle';
+
+describe('shiftPosition', () => {
+    it('should always return 0% if the imageSize fits the containerSize', () => {
+        expect(
+            shiftPosition({
+                scale: 1.5,
+                focusPoint: 0,
+                imageSize: 1000,
+                containerSize: 1000,
+            }),
+        ).toEqual(0);
+        expect(
+            shiftPosition({
+                scale: 1,
+                focusPoint: 0.27,
+                imageSize: 1000,
+                containerSize: 1000,
+            }),
+        ).toEqual(0);
+        expect(
+            shiftPosition({
+                scale: 3,
+                focusPoint: 0.5,
+                imageSize: 1000,
+                containerSize: 1000,
+            }),
+        ).toEqual(0);
+        expect(
+            shiftPosition({
+                scale: 2.4,
+                focusPoint: 1,
+                imageSize: 1000,
+                containerSize: 1000,
+            }),
+        ).toEqual(0);
+    });
+
+    describe('with bigger side than container ', () => {
+        // This use case will come, for example, if you have an image in width 100%
+        // but the image after being resized to keep the ratio is higher than the container.
+        // Then we are calculating the y shift.
+
+        const image = { width: 1000, height: 1200 };
+        const container = { width: 1000, height: 300 };
+        // scale is always the minimum scale ratio. Here imagewidth/containerwidth.
+        const scale = image.width / container.width; // 1
+        it('should return 0% if focusPoint equals 0', () => {
+            expect(
+                shiftPosition({
+                    scale,
+                    focusPoint: 0,
+                    imageSize: image.height,
+                    containerSize: container.height,
+                }),
+            ).toEqual(0);
+        });
+
+        it('should return 100% if focusPoint equals 1', () => {
+            expect(
+                shiftPosition({
+                    scale,
+                    focusPoint: 1,
+                    imageSize: image.height,
+                    containerSize: container.height,
+                }),
+            ).toEqual(100);
+        });
+
+        it('should return 50% if focusPoint equals 0.5', () => {
+            expect(
+                shiftPosition({
+                    scale,
+                    focusPoint: 0.5,
+                    imageSize: image.height,
+                    containerSize: container.height,
+                }),
+            ).toEqual(50);
+        });
+
+        it('should return 16% if focusPoint equals 0.25', () => {
+            expect(
+                shiftPosition({
+                    scale,
+                    focusPoint: 0.25,
+                    imageSize: image.height,
+                    containerSize: container.height,
+                }),
+            ).toEqual(16);
+        });
+    });
+});