@lumx/react 3.1.4 → 3.2.0

package/src/components/comment-block/CommentBlock.stories.tsx

@@ -1,30 +1,95 @@
+/* eslint-disable react/jsx-key,react/display-name */
 import React from 'react';
 import { mdiDotsHorizontal, mdiHeart, mdiReply } from '@lumx/icons';
-import { Button, CommentBlock, Emphasis, Size } from '@lumx/react';
+import { Button, CommentBlock } from '@lumx/react';
 import { IconButton } from '@lumx/react/components/button/IconButton';
-import { avatarImageKnob } from '@lumx/react/stories/knobs/image';
+import { withNestedProps } from '@lumx/react/stories/decorators/withNestedProps';
+import { avatarImageArgType, AVATAR_IMAGES } from '@lumx/react/stories/controls/image';
+import { loremIpsum } from '@lumx/react/stories/utils/lorem';
 
-export default { title: 'LumX components/comment-block/CommentBlock' };
+export default {
+    title: 'LumX components/comment-block/CommentBlock',
+    component: CommentBlock,
+    decorators: [withNestedProps()],
+    args: {
+        'avatarProps.image': AVATAR_IMAGES.avatar1,
+    },
+    argTypes: {
+        'avatarProps.image': avatarImageArgType,
+        actions: { control: false },
+        headerActions: { control: false },
+        children: { control: false },
+    },
+};
 
-export const WithHeaderActions = ({ theme }: any) => (
-    <CommentBlock
-        hasActions
-        actions={[
-            <Button key="button0" theme={theme} emphasis={Emphasis.low} size={Size.s} leftIcon={mdiHeart}>
-                24 likes
-            </Button>,
-            <Button key="button1" theme={theme} emphasis={Emphasis.low} size={Size.s} leftIcon={mdiReply}>
-                Reply
-            </Button>,
-        ]}
-        theme={theme}
-        avatarProps={{ image: avatarImageKnob(), alt: 'Avatar' }}
-        date="5 days"
-        fullDate="Monday, March 30, 2021 at 4:06 PM"
-        name="Emmitt O. Lum"
-        text="All the rumors have finally died down and many skeptics have tightened their lips, the iPod does support video format now on its fifth generation."
-        headerActions={
-            <IconButton label="Actions" icon={mdiDotsHorizontal} theme={theme} emphasis={Emphasis.low} size={Size.s} />
-        }
-    />
-);
+/**
+ * Minimal comment block
+ */
+export const Minimal = {
+    args: {
+        text: loremIpsum('short'),
+    },
+};
+
+/**
+ * Full-featured comment block
+ */
+export const FullFeatured = {
+    args: {
+        name: 'Emmitt O. Lum',
+        text: loremIpsum('short'),
+        date: '5 days ago',
+        fullDate: 'Monday, March 30, 2021 at 4:06 PM',
+        hasActions: true,
+    },
+    render: ({ theme, ...props }: any) => (
+        <CommentBlock
+            theme={theme}
+            {...props}
+            actions={[
+                <Button theme={theme} emphasis="low" size="s" leftIcon={mdiHeart}>
+                    24 likes
+                </Button>,
+                <Button theme={theme} emphasis="low" size="s" leftIcon={mdiReply}>
+                    Reply
+                </Button>,
+            ]}
+            headerActions={
+                <IconButton label="Actions" icon={mdiDotsHorizontal} theme={theme} emphasis="low" size="s" />
+            }
+        />
+    ),
+};
+
+/**
+ * Marked as relevant
+ */
+export const Relevant = {
+    ...FullFeatured,
+    args: { ...FullFeatured.args, isRelevant: true },
+};
+
+/**
+ * Comment thread
+ */
+export const Thread = {
+    ...FullFeatured,
+    args: {
+        ...FullFeatured.args,
+        isOpen: true,
+        children: [
+            <CommentBlock
+                avatarProps={{ image: AVATAR_IMAGES.avatar2, alt: '' }}
+                name="John Doe"
+                date="5 days ago"
+                text={loremIpsum('tiny')}
+            />,
+            <CommentBlock
+                avatarProps={{ image: AVATAR_IMAGES.avatar4, alt: '' }}
+                name="Jane Doe"
+                date="5 days ago"
+                text={loremIpsum('tiny')}
+            />,
+        ],
+    },
+};

package/src/components/comment-block/CommentBlock.test.tsx

@@ -1,28 +1,23 @@
 import React from 'react';
-import { mount, shallow } from 'enzyme';
-import 'jest-enzyme';
-import { commonTestsSuite, itShouldRenderStories } from '@lumx/react/testing/utils';
+import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
 
+import { render } from '@testing-library/react';
+import { queryByClassName } from '@lumx/react/testing/utils/queries';
 import { CommentBlock, CommentBlockProps } from './CommentBlock';
-import * as stories from './CommentBlock.stories';
 
 const CLASSNAME = CommentBlock.className as string;
 
-/**
- * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
- */
-const setup = (props: Partial<CommentBlockProps> = {}, shallowRendering = true) => {
-    const renderer: any = shallowRendering ? shallow : mount;
-    const wrapper: any = renderer(<CommentBlock {...(props as any)} />);
-    return { props, wrapper };
+const setup = (props: Partial<CommentBlockProps> = {}) => {
+    render(<CommentBlock {...(props as any)} />);
+    const commentBlock = queryByClassName(document.body, CLASSNAME);
+    return { props, commentBlock };
 };
 
 describe(`<${CommentBlock.displayName}>`, () => {
-    // 1. Test render via snapshot.
-    describe('Snapshots and structure', () => {
-        itShouldRenderStories(stories, CommentBlock);
-    });
-
     // Common tests suite.
-    commonTestsSuite(setup, { className: 'wrapper', prop: 'wrapper' }, { className: CLASSNAME });
+    commonTestsSuiteRTL(setup, {
+        baseClassName: CLASSNAME,
+        forwardClassName: 'commentBlock',
+        forwardAttributes: 'commentBlock',
+    });
 });

package/src/components/date-picker/DatePickerField.stories.tsx

@@ -1,93 +1,62 @@
-import React, { useState } from 'react';
-
 import { DatePickerField } from '@lumx/react';
-
-export default { title: 'LumX components/date-picker/DatePickerField' };
-
-export const Simple = ({ theme }: any) => {
-    const [value, setValue] = useState<Date | undefined>();
-
-    return (
-        <DatePickerField
-            locale="fr"
-            label="Start date"
-            placeholder="Pick a date"
-            theme={theme}
-            onChange={setValue}
-            value={value}
-            nextButtonProps={{ label: 'Next month' }}
-            previousButtonProps={{ label: 'Previous month' }}
-        />
-    );
+import { withValueOnChange } from '@lumx/react/stories/decorators/withValueOnChange';
+import { withNestedProps } from '@lumx/react/stories/decorators/withNestedProps';
+import { loremIpsum } from '@lumx/react/stories/utils/lorem';
+
+export default {
+    title: 'LumX components/date-picker/DatePickerField',
+    component: DatePickerField,
+    args: {
+        ...DatePickerField.defaultProps,
+        locale: 'fr',
+        'nextButtonProps.label': 'Next month',
+        'previousButtonProps.label': 'Previous month',
+    },
+    decorators: [withValueOnChange(), withNestedProps()],
 };
 
-export const WithDefaultValue = ({ theme }: any) => {
-    const [value, setValue] = useState<Date | undefined>(new Date('2020-05-18'));
-
-    return (
-        <DatePickerField
-            locale="fr"
-            label="Start date"
-            placeholder="Pick a date"
-            theme={theme}
-            onChange={setValue}
-            value={value}
-            nextButtonProps={{ label: 'Next month' }}
-            previousButtonProps={{ label: 'Previous month' }}
-        />
-    );
+/**
+ * Default date picker fields with only the required fields
+ */
+export const Default = {};
+
+/**
+ * With label, placeholder and helper
+ */
+export const LabelPlaceholderAndHelper = {
+    args: {
+        label: 'Date picker label',
+        placeholder: 'Pick a date',
+        helper: loremIpsum('tiny'),
+    },
 };
 
-export const WithErrorAndHelper = ({ theme }: any) => {
-    const [value, setValue] = useState<Date | undefined>(new Date('2020-05-18'));
-
-    return (
-        <DatePickerField
-            locale="fr"
-            label="Start date"
-            placeholder="Pick a date"
-            theme={theme}
-            onChange={setValue}
-            value={value}
-            hasError
-            helper="Helper"
-            nextButtonProps={{ label: 'Next month' }}
-            previousButtonProps={{ label: 'Previous month' }}
-        />
-    );
+/**
+ * Error state
+ */
+export const Error = {
+    args: {
+        ...LabelPlaceholderAndHelper.args,
+        hasError: true,
+    },
 };
 
-export const CustomMonth = ({ theme }: any) => {
-    const [value, setValue] = useState<Date | undefined>();
-
-    return (
-        <DatePickerField
-            locale="fr"
-            label="Initialized to 2019 July"
-            placeholder="Pick a date"
-            theme={theme}
-            onChange={setValue}
-            value={value}
-            defaultMonth={new Date('2019-07-14')}
-            nextButtonProps={{ label: 'Next month' }}
-            previousButtonProps={{ label: 'Previous month' }}
-        />
-    );
+/**
+ * With default value selected
+ */
+export const DefaultValue = {
+    args: {
+        ...LabelPlaceholderAndHelper.args,
+        value: new Date('2019-02-28'),
+    },
 };
 
-export const With28FebruarySelected = ({ theme }: any) => {
-    const [value, setValue] = useState<Date | undefined>(new Date('2019-02-28'));
-
-    return (
-        <DatePickerField
-            locale="fr"
-            label="Start date"
-            placeholder="Pick a date"
-            theme={theme}
-            onChange={setValue}
-            value={value}
-            nextButtonProps={{ label: 'Next month' }}
-            previousButtonProps={{ label: 'Previous month' }}
-        />
-    );
+/**
+ * With default month
+ */
+export const DefaultMonth = {
+    args: {
+        ...LabelPlaceholderAndHelper.args,
+        defaultMonth: new Date('2019-07-14'),
+    },
 };