feat(Table): new component

.storybook/main.js

@@ -72,6 +72,7 @@ module.exports = {
     stories,
     addons: [
         '@storybook/addon-links',
+        '@storybook/addon-controls',
         {
             name: '@storybook/addon-storysource',
             options: {
@@ -88,7 +89,6 @@ module.exports = {
         './platform-selector-addon/register',
         './dark-mode-addon/register',
         './font-size-addon/register',
-        '@storybook/addon-controls',
     ],
     webpackFinal: async (config) => {
         config.watchOptions = {

playroom/snippets.tsx

@@ -385,6 +385,56 @@ const loadingScreenSnippets: Array<Snippet> = [
     },
 ];
 
+const tableSnippets: Array<Snippet> = [
+    {
+        group: 'Table',
+        name: 'Table',
+        code: `
+            <Table
+                heading={[
+                    'Type of food',
+                    'Calories',
+                    'Tasty Factor',
+                    'Average Price',
+                    'Rarity',
+                    'Average Rating',
+                ]}
+                columnTextAlign={["left", "right", "right", "right", "center", "right"]}
+                content={[
+                    ['Slice of pizza', '450', '95%', '5,00€', <Tag>Common</Tag>, '8/10'],
+                    ['Hamburger', '350', '87%', '3,50€', <Tag>Common</Tag>, '7.5/10'],
+                    ['Salad', '150', '70%', '4,00€', <Tag>Common</Tag>, '6/10'],
+                    ['Sushi', '200', '90%', '12,00€', <Tag type="warning">Rare</Tag>, '9/10'],
+                    ['Ice cream', '350', '95%', '3,00€', <Tag>Common</Tag>, '8/10'],
+                ]}
+            />`,
+    },
+    {
+        group: 'Table',
+        name: 'boxed Table',
+        code: `
+            <Table
+                boxed
+                heading={[
+                    'Type of food',
+                    'Calories',
+                    'Tasty Factor',
+                    'Average Price',
+                    'Rarity',
+                    'Average Rating',
+                ]}
+                columnTextAlign={["left", "right", "right", "right", "center", "right"]}
+                content={[
+                    ['Slice of pizza', '450', '95%', '5,00€', <Tag>Common</Tag>, '8/10'],
+                    ['Hamburger', '350', '87%', '3,50€', <Tag>Common</Tag>, '7.5/10'],
+                    ['Salad', '150', '70%', '4,00€', <Tag>Common</Tag>, '6/10'],
+                    ['Sushi', '200', '90%', '12,00€', <Tag type="warning">Rare</Tag>, '9/10'],
+                    ['Ice cream', '350', '95%', '3,00€', <Tag>Common</Tag>, '8/10'],
+                ]}
+            />`,
+    },
+];
+
 const listSnippets: Array<Snippet> = [
     ['RowList', 'Row'],
     ['BoxedRowList', 'BoxedRow'],
@@ -3000,4 +3050,5 @@ export default [
     ...ValueBlockSnippets,
     ...ProgressBlockSnippets,
     ...loadingScreenSnippets,
+    ...tableSnippets,
 ].sort((s1, s2) => s1.group.localeCompare(s2.group)) as Array<Snippet>;

src/__acceptance_tests__/__ssr_pages__/main-navigation-bar-large.tsx

@@ -23,7 +23,7 @@ const NavigationBarTest = (): JSX.Element => (
                     </Badge>
                 </NavigationBarAction>
                 <NavigationBarAction onPress={() => {}} aria-label="Open profile">
-                    <Avatar size={24} initials="ML" src="https://source.unsplash.com/600x600/?face" />
+                    <Avatar size={24} initials="ML" src="avatar.jpg" />
                 </NavigationBarAction>
             </NavigationBarActionGroup>
         }

src/__acceptance_tests__/__ssr_pages__/main-navigation-bar.tsx

@@ -22,7 +22,7 @@ const NavigationBarTest = (): JSX.Element => (
                     </Badge>
                 </NavigationBarAction>
                 <NavigationBarAction onPress={() => {}} aria-label="Open profile">
-                    <Avatar size={24} initials="ML" src="https://source.unsplash.com/600x600/?face" />
+                    <Avatar size={24} initials="ML" src="avatar.jpg" />
                 </NavigationBarAction>
             </NavigationBarActionGroup>
         }

src/__private_stories__/skin-components-story.tsx

@@ -43,6 +43,7 @@ import {
     Title3,
     IconButton,
     Hero,
+    Table,
 } from '..';
 import {InternalIconButton} from '../icon-button';
 import avatarImg from '../__stories__/images/avatar.jpg';
@@ -396,6 +397,43 @@ export const Default: StoryComponent<Args> = ({variant}) => {
                         button={<ButtonPrimary onPress={() => {}}>Action</ButtonPrimary>}
                         buttonLink={<ButtonLink onPress={() => {}}>Link</ButtonLink>}
                     />
+                    {/** Table */}
+                    <Table
+                        heading={[
+                            'Type of food',
+                            'Calories',
+                            'Tasty Factor',
+                            'Average Price',
+                            'Rarity',
+                            'Average Rating',
+                        ]}
+                        content={[
+                            ['Slice of pizza', '450', '95%', '5,00€', <Tag>Common</Tag>, '8/10'],
+                            ['Hamburger', '350', '87%', '3,50€', <Tag>Common</Tag>, '7.5/10'],
+                            ['Salad', '150', '70%', '4,00€', <Tag>Common</Tag>, '6/10'],
+                            ['Sushi', '200', '90%', '12,00€', <Tag type="warning">Rare</Tag>, '9/10'],
+                            ['Ice cream', '350', '95%', '3,00€', <Tag>Common</Tag>, '8/10'],
+                        ]}
+                    />
+                    {/** Table */}
+                    <Table
+                        boxed
+                        heading={[
+                            'Type of food',
+                            'Calories',
+                            'Tasty Factor',
+                            'Average Price',
+                            'Rarity',
+                            'Average Rating',
+                        ]}
+                        content={[
+                            ['Slice of pizza', '450', '95%', '5,00€', <Tag>Common</Tag>, '8/10'],
+                            ['Hamburger', '350', '87%', '3,50€', <Tag>Common</Tag>, '7.5/10'],
+                            ['Salad', '150', '70%', '4,00€', <Tag>Common</Tag>, '6/10'],
+                            ['Sushi', '200', '90%', '12,00€', <Tag type="warning">Rare</Tag>, '9/10'],
+                            ['Ice cream', '350', '95%', '3,00€', <Tag>Common</Tag>, '8/10'],
+                        ]}
+                    />
                 </Stack>
             </Box>
         </ResponsiveLayout>

src/__screenshot_tests__/table-screenshot-test.tsx

@@ -0,0 +1,127 @@
+import {openStoryPage} from '../test-utils';
+
+const cases = [
+    [
+        'desktop fullWidth',
+        {
+            device: 'DESKTOP',
+            args: {fullWidth: true},
+        },
+    ],
+    [
+        'desktop fullWidth false',
+        {
+            device: 'DESKTOP',
+            args: {fullWidth: false},
+        },
+    ],
+    [
+        'desktop boxed',
+        {
+            device: 'DESKTOP',
+            args: {boxed: true},
+        },
+    ],
+    [
+        'desktop boxed fullWidth false',
+        {
+            device: 'DESKTOP',
+            args: {boxed: true, fullWidth: false},
+        },
+    ],
+    [
+        'desktop inverse',
+        {
+            device: 'DESKTOP',
+            args: {inverse: true},
+        },
+    ],
+    [
+        'desktop boxed inverse',
+        {
+            device: 'DESKTOP',
+            args: {inverse: true, boxed: true},
+        },
+    ],
+    [
+        'desktop maxHeight',
+        {
+            device: 'DESKTOP',
+            args: {maxHeight: 200},
+        },
+    ],
+    [
+        'desktop maxHeight boxed',
+        {
+            device: 'DESKTOP',
+            args: {maxHeight: 200, boxed: true},
+        },
+    ],
+    [
+        'desktop empty case',
+        {
+            device: 'DESKTOP',
+            args: {numItems: 0},
+        },
+    ],
+    [
+        'desktop empty boxed',
+        {
+            device: 'DESKTOP',
+            args: {numItems: 0, boxed: true},
+        },
+    ],
+    [
+        'mobile',
+        {
+            device: 'MOBILE_IOS',
+            args: {},
+        },
+    ],
+    [
+        'mobile boxed',
+        {
+            device: 'MOBILE_IOS',
+            args: {boxed: true},
+        },
+    ],
+    [
+        'mobile collapse-rows',
+        {
+            device: 'MOBILE_IOS',
+            args: {responsive: 'collapse-rows'},
+        },
+    ],
+    [
+        'mobile collapse-rows boxed',
+        {
+            device: 'MOBILE_IOS',
+            args: {responsive: 'collapse-rows', boxed: true},
+        },
+    ],
+    [
+        'mobile collapse-rows inverse',
+        {
+            device: 'MOBILE_IOS',
+            args: {responsive: 'collapse-rows', inverse: true},
+        },
+    ],
+    [
+        'mobile collapse-rows boxed inverse',
+        {
+            device: 'MOBILE_IOS',
+            args: {responsive: 'collapse-rows', boxed: true, inverse: true},
+        },
+    ],
+] as const;
+
+test.each(cases)('Table %s', async (_name, {device, args}) => {
+    const page = await openStoryPage({
+        id: 'components-table--default',
+        device,
+        args,
+    });
+
+    const image = await page.screenshot();
+    expect(image).toMatchImageSnapshot();
+});

src/__stories__/table-story.tsx

@@ -0,0 +1,117 @@
+import * as React from 'react';
+import {ResponsiveLayout, Box, Table, Tag} from '..';
+
+export default {
+    title: 'Components/Table',
+    parameters: {fullScreen: true},
+};
+
+const foodList = [
+    ['Slice of pizza', '450', '95%', '5,00€', <Tag>Common</Tag>, '8/10'],
+    ['Hamburger', '350', '87%', '3,50€', <Tag>Common</Tag>, '7.5/10'],
+    ['Salad', '150', '70%', '4,00€', <Tag>Common</Tag>, '6/10'],
+    ['Sushi', '200', '90%', '12,00€', <Tag type="warning">Rare</Tag>, '9/10'],
+    ['Ice cream', '350', '95%', '3,00€', <Tag>Common</Tag>, '8/10'],
+    ['Cake', '500', '90%', '5,00€', <Tag>Common</Tag>, '8/10'],
+    ['Pasta', '300', '80%', '6,00€', <Tag>Common</Tag>, '7/10'],
+    ['Fries', '250', '85%', '2,50€', <Tag>Common</Tag>, '7/10'],
+    ['Hot dog', '400', '80%', '4,00€', <Tag>Common</Tag>, '7/10'],
+    ['Steak', '600', '95%', '15,00€', <Tag type="warning">Rare</Tag>, '9/10'],
+    ['Ramen', '400', '85%', '10,00€', <Tag type="warning">Rare</Tag>, '8/10'],
+    ['Pancakes', '350', '90%', '4,00€', <Tag>Common</Tag>, '8/10'],
+    ['Tacos', '300', '85%', '8,00€', <Tag>Common</Tag>, '7/10'],
+    ['Donuts', '300', '95%', '2,00€', <Tag>Common</Tag>, '8/10'],
+    ['Soup', '200', '80%', '3,00€', <Tag>Common</Tag>, '6/10'],
+    ['Curry', '400', '90%', '9,00€', <Tag>Common</Tag>, '8/10'],
+    ['Fish and chips', '500', '85%', '7,00€', <Tag>Common</Tag>, '7/10'],
+    ['Burger', '350', '85%', '4,00€', <Tag>Common</Tag>, '7/10'],
+    ['Kebab', '500', '90%', '6,00€', <Tag>Common</Tag>, '8/10'],
+    ['Waffles', '400', '95%', '5,00€', <Tag>Common</Tag>, '8/10'],
+    ['Pretzel', '300', '85%', '2,50€', <Tag>Common</Tag>, '7/10'],
+    ['Cheeseburger', '450', '85%', '5,00€', <Tag>Common</Tag>, '7/10'],
+    ['Nachos', '300', '80%', '3,00€', <Tag>Common</Tag>, '6/10'],
+    ['Lasagna', '500', '90%', '8,00€', <Tag>Common</Tag>, '8/10'],
+];
+
+type Args = {
+    inverse: boolean;
+    boxed: boolean;
+    responsive: 'scroll' | 'collapse-rows';
+    fullWidth: boolean;
+    maxHeight: string | undefined;
+    numItems: number;
+    emptyCase: string;
+    columnTextAlign: Array<'left' | 'right' | 'center'>;
+    rowVerticalAlign: 'top' | 'middle';
+    columnWidth: Array<number | string>;
+};
+
+export const Default: StoryComponent<Args> = ({
+    inverse,
+    boxed,
+    responsive,
+    fullWidth,
+    maxHeight,
+    numItems,
+    emptyCase,
+    columnTextAlign,
+    rowVerticalAlign,
+    columnWidth,
+}) => {
+    return (
+        <ResponsiveLayout isInverse={inverse}>
+            <Box paddingY={24}>
+                <Table
+                    fullWidth={fullWidth}
+                    maxHeight={maxHeight}
+                    responsive={responsive}
+                    boxed={boxed}
+                    heading={[
+                        'Type of food',
+                        'Calories',
+                        'Tasty Factor',
+                        'Average Price',
+                        'Rarity',
+                        'Average Rating',
+                    ]}
+                    columnTextAlign={columnTextAlign}
+                    columnWidth={columnWidth}
+                    rowVerticalAlign={rowVerticalAlign}
+                    content={foodList.slice(0, numItems)}
+                    emptyCase={emptyCase}
+                    scrollOverResponsiveLayout
+                />
+            </Box>
+        </ResponsiveLayout>
+    );
+};
+
+Default.storyName = 'Table';
+Default.args = {
+    inverse: false,
+    boxed: false,
+    responsive: 'scroll',
+    fullWidth: true,
+    maxHeight: undefined,
+    numItems: 5,
+    emptyCase: 'No food items found',
+    columnTextAlign: ['left', 'right', 'right', 'right', 'center', 'right'],
+    rowVerticalAlign: 'middle',
+    columnWidth: ['auto', 'auto', 'auto', 'auto', 'auto', 'auto'],
+};
+Default.argTypes = {
+    responsive: {
+        options: ['scroll', 'collapse-rows'],
+        control: {type: 'select'},
+    },
+    maxHeight: {
+        control: {type: 'text'},
+    },
+    numItems: {
+        control: {type: 'range', min: 0, max: foodList.length, step: 1},
+    },
+    rowVerticalAlign: {
+        options: ['top', 'middle'],
+        control: {type: 'select'},
+    },
+};