diginet-core-ui 1.4.39 → 1.4.40

package/src/components/grid/index.stories.js

@@ -0,0 +1,523 @@
+/* eslint-disable no-unused-vars */
+/* eslint-disable react/no-unescaped-entities */
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core';
+import { Avatar, Col, Container, Radio, Row, Typography } from 'components';
+import { ImportComp } from 'components/others/import/index.stories';
+import React, { useState } from 'react';
+import { bgColor, borderRadius4px, textCenter, textColor } from 'styles/general';
+import { useTheme } from 'theme';
+import { getProp } from 'utils';
+import { Grid } from '.';
+
+const theme = useTheme();
+Grid.defaultProps = theme?.components?.Grid?.defaultProps || {};
+Col.defaultProps = theme?.components?.Col?.defaultProps || {};
+Container.defaultProps = theme?.components?.Container?.defaultProps || {};
+Row.defaultProps = theme?.components?.Row?.defaultProps || {};
+
+export default {
+    title: 'Components/Grid',
+    component: Grid,
+    subcomponents: { Grid, Row, Col, Container },
+    parameters: {
+        componentSubtitle:
+            'Responsive layout grid adapts to screen size and orientation, ensuring consistency across layouts.',
+    },
+};
+
+const Item = props => {
+    const { children } = props;
+
+    const theme = useTheme();
+    const { colors, spacing, typography } = theme;
+
+    const ItemCSS = css`
+        ${borderRadius4px};
+        ${textCenter};
+        ${typography.heading6};
+        padding: ${spacing([2])};
+        ${bgColor(getProp(colors, 'system/on-standard'))};
+        ${textColor(getProp(colors, 'system/standard'))};
+    `;
+
+    return (
+        <div css={ItemCSS} {...props}>
+            {children}
+        </div>
+    );
+};
+
+const Note = () => {
+    const theme = useTheme();
+    const breakpoints = theme.breakpoints.values;
+    const { xs, sm, md, lg, xl } = breakpoints;
+
+    return (
+        <Typography type={'h4'}>
+            {`
+            <br/>*Note:
+                xs: screen ≥ ${xs}px
+                sm: screen ≥ ${sm}px
+                md: screen ≥ ${md}px
+                lg: screen ≥ ${lg}px
+                xl: screen ≥ ${xl}px
+            `}
+        </Typography>
+    );
+};
+
+const Template = () => {
+    return (
+        <>
+            <ImportComp components={'Grid, Row, Col'} />
+            <h1 />
+            <Typography type={'h2'}>Basic grid</Typography>
+            <Typography type={'p1'}>
+                Column widths are integer values between 1 and 12; they apply at any breakpoint and indicate how many
+                columns are occupied by the component.
+            </Typography>
+            <Typography type={'p1'}>
+                A value given to a breakpoint applies to all the other breakpoints wider than it (unless overridden, as
+                you can read later in this page). For example, <code>xs={12}</code> sizes a component to occupy the
+                whole viewport width regardless of its size.
+            </Typography>
+            <h1 />
+            <Typography type={'h4'}>
+                <code>Grid </code> like MUI
+            </Typography>
+            <Grid container spacing={2}>
+                <Grid item xs={8}>
+                    <Item>xs=8</Item>
+                </Grid>
+                <Grid item xs={4}>
+                    <Item>xs=4</Item>
+                </Grid>
+                <Grid item xs={4}>
+                    <Item>xs=4</Item>
+                </Grid>
+                <Grid item xs={8}>
+                    <Item>xs=8</Item>
+                </Grid>
+            </Grid>
+            <h1 />
+            <Typography type={'h4'}>
+                <code>Row | Col </code> like react-bootstrap
+            </Typography>
+            <Row>
+                <Col xs={8}>
+                    <Item>xs=8</Item>
+                </Col>
+                <Col xs={4}>
+                    <Item>xs=4</Item>
+                </Col>
+                <Col xs={4}>
+                    <Item>xs=4</Item>
+                </Col>
+                <Col xs={8}>
+                    <Item>xs=8</Item>
+                </Col>
+            </Row>
+            <Note />
+        </>
+    );
+};
+
+const Template2 = () => {
+    return (
+        <>
+            <ImportComp components={'Grid, Row, Col'} />
+            <h1 />
+            <Typography type={'h2'}>Grid with multiple breakpoints</Typography>
+            <Typography type={'p1'}>
+                Components may have multiple widths defined, causing the layout to change at the defined breakpoint.
+                Width values given to larger breakpoints override those given to smaller breakpoints.
+            </Typography>
+            <Typography type={'p1'}>
+                For example,{' '}
+                <code>
+                    xs={12} sm={6}
+                </code>{' '}
+                sizes a component to occupy half of the viewport width (6 columns) when viewport width is 600 or more
+                pixels. For smaller viewports, the component fills all 12 available columns.
+            </Typography>
+            <h1 />
+            <Typography type={'h4'}>
+                <code>Grid </code> like MUI
+            </Typography>
+            <Grid container spacing={2}>
+                <Grid item xs={6} md={8}>
+                    <Item>xs=6 md=8</Item>
+                </Grid>
+                <Grid item xs={6} md={4}>
+                    <Item>xs=6 md=4</Item>
+                </Grid>
+                <Grid item xs={6} md={4}>
+                    <Item>xs=6 md=4</Item>
+                </Grid>
+                <Grid item xs={6} md={8}>
+                    <Item>xs=6 md=8</Item>
+                </Grid>
+            </Grid>
+            <h1 />
+            <Typography type={'h4'}>
+                <code>Row | Col </code> like react-bootstrap
+            </Typography>
+            <Row>
+                <Col xs={6} md={8}>
+                    <Item>xs=6 md=8</Item>
+                </Col>
+                <Col xs={6} md={4}>
+                    <Item>xs=6 md=4</Item>
+                </Col>
+                <Col xs={6} md={4}>
+                    <Item>xs=6 md=4</Item>
+                </Col>
+                <Col xs={6} md={8}>
+                    <Item>xs=6 md=8</Item>
+                </Col>
+            </Row>
+            <Note />
+        </>
+    );
+};
+
+const Template3 = () => {
+    const [spacing, setSpacing] = useState(2);
+    return (
+        <>
+            <ImportComp components={'Grid, Row, Col'} />
+            <h1 />
+            <Typography type={'h2'}>Spacing</Typography>
+            <Typography type={'p1'}>
+                To control space between children, use the <code>spacing</code> prop. The spacing value can be any
+                positive number, including decimals and any string.
+            </Typography>
+            <h1 />
+            <Typography type={'h4'}>
+                <code>Grid </code> like MUI
+            </Typography>
+            <Grid container spacing={2} rowSpacing={8}>
+                <Grid item xs={12}>
+                    <Grid container style={{ justifyContent: 'center' }} spacing={spacing}>
+                        {[...Array(3).keys()].map(value => (
+                            <Grid key={value} item>
+                                <Item style={{ width: 100, height: 140 }} />
+                            </Grid>
+                        ))}
+                    </Grid>
+                </Grid>
+                <Grid item xs={12}>
+                    <Grid container style={{ justifyContent: 'center' }}>
+                        {[0, 0.5, 1, 2, 3, 4, 8, 12].map(value => (
+                            <Grid key={value} item>
+                                <Radio
+                                    name={'spacingGrid'}
+                                    label={value.toString()}
+                                    value={value}
+                                    checked={value === spacing}
+                                    onChange={() => setSpacing(value)}
+                                />
+                            </Grid>
+                        ))}
+                    </Grid>
+                    <Item style={{ width: 'max-content' }}>
+                        <code>{`<Grid container spacing={${spacing}}>`}</code>
+                    </Item>
+                </Grid>
+            </Grid>
+        </>
+    );
+};
+
+const Template4 = () => {
+    return (
+        <>
+            <ImportComp components={'Grid, Row, Col'} />
+            <h1 />
+            <Typography type={'h2'}>Row & column spacing</Typography>
+            <Typography type={'p1'}>
+                The <code>rowSpacing</code> and <code>columnSpacing</code> props allow for specifying the row and column
+                gaps independently.
+            </Typography>
+            <h1 />
+            <Typography type={'h4'}>
+                <code>Grid </code> like MUI
+            </Typography>
+            <Grid container rowSpacing={1} columnSpacing={{ xs: 1, sm: 2, md: 3 }}>
+                <Grid item xs={6}>
+                    <Item>1</Item>
+                </Grid>
+                <Grid item xs={6}>
+                    <Item>2</Item>
+                </Grid>
+                <Grid item xs={6}>
+                    <Item>3</Item>
+                </Grid>
+                <Grid item xs={6}>
+                    <Item>4</Item>
+                </Grid>
+            </Grid>
+            <h1 />
+            <Typography type={'h4'}>
+                <code>Row | Col </code> like react-bootstrap
+            </Typography>
+            <Row>
+                <Col xs={6}>
+                    <Item>1</Item>
+                </Col>
+                <Col xs={6}>
+                    <Item>2</Item>
+                </Col>
+                <Col xs={6}>
+                    <Item>3</Item>
+                </Col>
+                <Col xs={6}>
+                    <Item>4</Item>
+                </Col>
+            </Row>
+            <Note />
+        </>
+    );
+};
+
+const Template5 = () => {
+    return (
+        <>
+            <ImportComp components={'Grid, Row, Col'} />
+            <h1 />
+            <Typography type={'h2'}>Responsive values</Typography>
+            <Typography type={'p1'}>You can switch the props value based on the active breakpoint.</Typography>
+            <h1 />
+            <Typography type={'h4'}>
+                <code>Grid </code> like MUI
+            </Typography>
+            <Grid container spacing={{ xs: 2, md: 3 }} columns={{ xs: 4, sm: 8, md: 12 }}>
+                {[...Array(6)].map((_, index) => (
+                    <Grid item xs={2} sm={4} md={4} key={index}>
+                        <Item>xs=2</Item>
+                    </Grid>
+                ))}
+            </Grid>
+            <h1 />
+            <Typography type={'h4'}>
+                <code>Row | Col </code> like react-bootstrap
+            </Typography>
+            <Row>
+                {[...Array(6)].map((_, index) => (
+                    <Col xs={2} sm={4} md={4} key={index}>
+                        <Item>xs=2</Item>
+                    </Col>
+                ))}
+            </Row>
+            <Note />
+        </>
+    );
+};
+
+const Template6 = () => {
+    return (
+        <>
+            <ImportComp components={'Grid, Row, Col'} />
+            <h1 />
+            <Typography type={'h2'}>Auto-layout</Typography>
+            <Typography type={'p1'}>
+                The Auto-layout makes the <em>items</em> equitably share the available space. That also means you can
+                set the width of one <em>items</em> and the others will automatically resize around it.
+            </Typography>
+            <h1 />
+            <Typography type={'h4'}>
+                <code>Grid </code> like MUI
+            </Typography>
+            <Grid container spacing={3}>
+                <Grid item xs>
+                    <Item>xs</Item>
+                </Grid>
+                <Grid item xs={6}>
+                    <Item>xs=6</Item>
+                </Grid>
+                <Grid item xs>
+                    <Item>xs</Item>
+                </Grid>
+            </Grid>
+            <h1 />
+            <Typography type={'h4'}>
+                <code>Row | Col </code> like react-bootstrap
+            </Typography>
+            <Row>
+                <Col xs>
+                    <Item>xs</Item>
+                </Col>
+                <Col xs={6}>
+                    <Item>xs=6</Item>
+                </Col>
+                <Col xs>
+                    <Item>xs</Item>
+                </Col>
+            </Row>
+            <Note />
+        </>
+    );
+};
+
+const Template7 = () => {
+    return (
+        <>
+            <ImportComp components={'Grid, Row, Col'} />
+            <h1 />
+            <Typography type={'h2'}>Variable width content</Typography>
+            <Typography type={'p1'}>
+                Set one of the size breakpoint props to <code>"auto"</code> instead of <code>true</code> / a{' '}
+                <code>number </code>to size a column based on the natural width of its content.
+            </Typography>
+            <h1 />
+            <Typography type={'h4'}>
+                <code>Grid </code> like MUI
+            </Typography>
+            <Grid container spacing={3}>
+                <Grid item xs="auto">
+                    <Item>variable width content</Item>
+                </Grid>
+                <Grid item xs={6}>
+                    <Item>xs=6</Item>
+                </Grid>
+                <Grid item xs>
+                    <Item>xs</Item>
+                </Grid>
+            </Grid>
+            <h1 />
+            <Typography type={'h4'}>
+                <code>Row | Col </code> like react-bootstrap
+            </Typography>
+            <Row>
+                <Col xs="auto">
+                    <Item>variable width content</Item>
+                </Col>
+                <Col xs={6}>
+                    <Item>xs=6</Item>
+                </Col>
+                <Col xs>
+                    <Item>xs</Item>
+                </Col>
+            </Row>
+            <Note />
+        </>
+    );
+};
+
+const Template8 = () => {
+    return (
+        <>
+            <ImportComp components={'Grid, Row, Col'} />
+            <h1 />
+            <Typography type={'h2'}>Columns</Typography>
+            <Typography type={'p1'}>
+                You can change the default number of columns (12) with the <code>columns</code> prop.
+            </Typography>
+            <h1 />
+            <Typography type={'h4'}>
+                <code>Grid </code> like MUI
+            </Typography>
+            <Grid container spacing={2} columns={16}>
+                <Grid item xs={8}>
+                    <Item>xs=8</Item>
+                </Grid>
+                <Grid item xs={8}>
+                    <Item>xs=8</Item>
+                </Grid>
+            </Grid>
+            <h1 />
+            <Typography type={'h4'}>
+                <code>Row | Col </code> like react-bootstrap
+            </Typography>
+            <Row columns={16}>
+                <Col xs={8}>
+                    <Item>xs=8</Item>
+                </Col>
+                <Col xs={8}>
+                    <Item>xs=8</Item>
+                </Col>
+            </Row>
+            <Note />
+        </>
+    );
+};
+
+const Template9 = () => {
+    const message = `Truncation should be conditionally applicable on this long line of text as this is a much longer line than what the container can support. `;
+    return (
+        <>
+            <ImportComp components={'Grid'} />
+            <h1 />
+            <Typography type={'h2'}>Limitations</Typography>
+            <Typography type={'h3'}>white-space: nowrap</Typography>
+            <Typography type={'p1'}>
+                The initial setting on flex items is <code>min-width: auto</code>. It's causing a positioning conflict
+                when the children is using <code>white-space: nowrap;</code>. You can experience the issue with:
+            </Typography>
+            <Item style={{ width: 'max-content', whiteSpace: 'break-spaces', textAlign: 'start' }}>
+                <code>{`<Grid item xs>\n   <Typography style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>`}</code>
+            </Item>
+            <Typography type={'p1'}>
+                In order for the item to stay within the container you need to set <code>min-width: 0</code>. In
+                practice, you can set the <code>zeroMinWidth</code> prop:
+            </Typography>
+            <Item style={{ width: 'max-content', whiteSpace: 'break-spaces', textAlign: 'start' }}>
+                <code>{`<Grid item xs zeroMinWidth>\n   <Typography style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>`}</code>
+            </Item>
+            <h1 />
+            <Item style={{ width: 400, margin: '8px auto', padding: 16 }}>
+                <Grid container wrap="nowrap" spacing={2}>
+                    <Grid item>
+                        <Avatar disabled />
+                    </Grid>
+                    <Grid item xs zeroMinWidth>
+                        <Typography
+                            style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}
+                            color={'secondary'}
+                        >
+                            {message}
+                        </Typography>
+                    </Grid>
+                </Grid>
+            </Item>
+            <Item style={{ width: 400, margin: '8px auto', padding: 16 }}>
+                <Grid container wrap="nowrap" spacing={2}>
+                    <Grid item>
+                        <Avatar disabled />
+                    </Grid>
+                    <Grid item xs>
+                        <Typography
+                            style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}
+                            color={'secondary'}
+                        >
+                            {message}
+                        </Typography>
+                    </Grid>
+                </Grid>
+            </Item>
+            <Item style={{ width: 400, margin: '8px auto', padding: 16 }}>
+                <Grid container wrap="nowrap" spacing={2}>
+                    <Grid item>
+                        <Avatar disabled />
+                    </Grid>
+                    <Grid item xs>
+                        <Typography color={'secondary'}>{message}</Typography>
+                    </Grid>
+                </Grid>
+            </Item>
+            <Note />
+        </>
+    );
+};
+
+export const BasicGrid = Template.bind({});
+export const GridWithMultipleBreakpoints = Template2.bind({});
+export const Spacing = Template3.bind({});
+export const RowAndColumnSpacing = Template4.bind({});
+export const ResponsiveValues = Template5.bind({});
+export const AutoLayout = Template6.bind({});
+export const VariableWidthContent = Template7.bind({});
+export const Columns = Template8.bind({});
+export const Limitations = Template9.bind({});