Major fixes. Design and Functionality

__tests__/components/Radio/Radio.spec.tsx

@@ -12,7 +12,6 @@ describe('Radio', () => {
 
     expect(container).toHaveStyle(`
       cursor: pointer;
-      margin: 0 5px;
     `);
     const radio = document.querySelector('.radio-circle');
 

src/components/AutoComplete/AutoComplete.stories.tsx

@@ -72,7 +72,7 @@ export const AsyncFetch: Story = () => {
       }
       uniqueIdentifier={(e) => String(e.id)}
       listDisplayProp={(e) => (
-        <Row gutter={[0, '0 10px']}>
+        <Row gutter={[0, 20]}>
           <Col flex="0 1 50px">
             <img width="100%" src={e.avatar} />
           </Col>

src/components/Calendar/Calendar.tsx

@@ -128,12 +128,70 @@ export const Calendar: React.FC<CalendarProps> = (props) => {
     });
   };
 
+  const getdateArray = () => {
+    const dateArray: React.ReactElement[] = [];
+
+    weeksDateArray.map((v) => {
+      weeks.forEach((f, i) => {
+        const selectedDate = props.date;
+        const isSelectedDate =
+          selectedDate &&
+          compareDesc(
+            new Date(
+              date.getFullYear(),
+              date.getMonth(),
+              nestedAccess(v, f),
+              selectedDate.getHours(),
+              selectedDate.getMinutes(),
+              selectedDate.getSeconds(),
+              selectedDate.getMilliseconds(),
+            ),
+            selectedDate,
+          ) === 0;
+        const today = isToday(v?.[f]);
+        const newDate = new Date(
+          date.getFullYear(),
+          date.getMonth(),
+          nestedAccess(v, f),
+          selectedDate?.getHours() || 0,
+          selectedDate?.getMinutes() || 0,
+          selectedDate?.getSeconds() || 0,
+          selectedDate?.getMilliseconds() || 0,
+        );
+        dateArray.push(
+          <Col className={css.cell} key={i} span={24 / 7}>
+            {nestedAccess(v, f) ? (
+              props.cellRender?.(newDate, f) || (
+                <Button
+                  disabled={props.disabledDate?.(newDate)}
+                  flat={!today && !isSelectedDate}
+                  shape="circle"
+                  outline={today}
+                  primary={today || isSelectedDate || false}
+                  onClick={() => {
+                    return !props.disabledDate?.(newDate) && props.onClick && props.onClick(newDate);
+                  }}
+                >
+                  {v?.[f]}
+                </Button>
+              )
+            ) : (
+              <div />
+            )}
+            {props.calendarEvents && <div className={css.dateContent}>{calendarEvent(v?.[f], css)}</div>}
+          </Col>,
+        );
+      });
+    });
+    return dateArray;
+  };
+
   const css = style;
 
   return (
     <Card elevation={props.elevation}>
       <CardBody>
-        <Row gutter={[0, '5px']} justifyContent="flex-end">
+        <Row gutter={[10, 10]} justifyContent="flex-end">
           <Col flex="0 1 auto">
             <Menu
               height="300px"
@@ -178,60 +236,7 @@ export const Calendar: React.FC<CalendarProps> = (props) => {
             </Col>
           ))}
         </Row>
-        <Row gutter={[0, 0]}>
-          {weeksDateArray.map((v) => {
-            return weeks.map((f, i) => {
-              const selectedDate = props.date;
-              const isSelectedDate =
-                selectedDate &&
-                compareDesc(
-                  new Date(
-                    date.getFullYear(),
-                    date.getMonth(),
-                    nestedAccess(v, f),
-                    selectedDate.getHours(),
-                    selectedDate.getMinutes(),
-                    selectedDate.getSeconds(),
-                    selectedDate.getMilliseconds(),
-                  ),
-                  selectedDate,
-                ) === 0;
-              const today = isToday(v?.[f]);
-              const newDate = new Date(
-                date.getFullYear(),
-                date.getMonth(),
-                nestedAccess(v, f),
-                selectedDate?.getHours() || 0,
-                selectedDate?.getMinutes() || 0,
-                selectedDate?.getSeconds() || 0,
-                selectedDate?.getMilliseconds() || 0,
-              );
-              return (
-                <Col className={css.cell} key={i} span={24 / 7}>
-                  {nestedAccess(v, f) ? (
-                    props.cellRender?.(newDate, f) || (
-                      <Button
-                        disabled={props.disabledDate?.(newDate)}
-                        flat={!today && !isSelectedDate}
-                        shape="circle"
-                        outline={today}
-                        primary={today || isSelectedDate || false}
-                        onClick={() => {
-                          return !props.disabledDate?.(newDate) && props.onClick && props.onClick(newDate);
-                        }}
-                      >
-                        {v?.[f]}
-                      </Button>
-                    )
-                  ) : (
-                    <div />
-                  )}
-                  {props.calendarEvents && <div className={css.dateContent}>{calendarEvent(v?.[f], css)}</div>}
-                </Col>
-              );
-            });
-          })}
-        </Row>
+        <Row gutter={[0, 0]}>{getdateArray()}</Row>
       </CardBody>
     </Card>
   );

src/components/DatePicker/DatePicker.tsx

@@ -28,7 +28,7 @@ export const DatePicker: React.FC<DatePickerProps> = (props) => {
     <>
       <Popover
         content={
-          <Row gutter={['0', '0']}>
+          <Row gutter={[0, 0]}>
             <Col span={24}>
               <Calendar
                 date={date || undefined}

src/components/Grid/Col.tsx

@@ -25,7 +25,7 @@ export interface ColProps extends React.DetailedHTMLProps<React.HTMLAttributes<H
   style?: React.CSSProperties;
   children?: React.ReactNode;
   /**
-   * Number of cells to occupy out off 24
+   * Number of cells to occupy out of 24
    * @default 24
    */
   span?: number;

src/components/Grid/Grid.stories.tsx

@@ -97,7 +97,7 @@ export const Responsive: Story<ColProps> = () => (
 
 export const Gutter: Story<ColProps> = (args) => {
   return (
-    <Row {...RowTemplate.args} gutter={['10px', '20px']}>
+    <Row {...RowTemplate.args} gutter={[{ xs: 10, sm: 30, md: 50, xl: 100 }, 48]}>
       <Col span={24} {...args}>
         <Card>Span 24</Card>
       </Col>

src/components/Grid/Row.tsx

@@ -1,47 +1,58 @@
 import * as React from 'react';
 import { classes } from '../../helpers';
-import { flexPosition, rowStyle } from './style';
+import { gutterStyle, rowStyle } from './style';
 
 export const Row: React.FC<RowProps> = (props) => {
   const {
     className,
     onClick,
     style,
-    children,
+    children: __children,
     gutter: __gutter,
     justifyContent: __justifyContent,
     alignItems: __alignItems,
     wrap: __wrap,
     flexDirection: __flexDirection,
     ...rest
   } = props;
+
+  const children: React.ReactElement[] = Array.isArray(__children)
+    ? (__children as React.ReactElement[])
+    : [__children];
+
+  const [RowGutterStyles, ColPadding] = gutterStyle(props);
   return (
     <div
       onClick={onClick}
-      className={classes(rowStyle, flexPosition(props), className, 'sha-el-row')}
+      className={classes(rowStyle(props), RowGutterStyles, className, 'sha-el-row')}
       style={style}
       {...rest}
     >
-      {children}
+      {children
+        .filter((child) => child !== undefined)
+        .map((child, i) => React.cloneElement(child, { key: i, style: { ...ColPadding, ...child.props.style } }))}
     </div>
   );
 };
 
 Row.defaultProps = {
   justifyContent: 'flex-start',
-  gutter: ['10px 0', '.5rem'],
+  gutter: [0, 0],
   wrap: 'wrap',
   flexDirection: 'row',
 };
 
+export type Breakpoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type Gutter = number | Partial<Record<Breakpoint, number>>;
+
 export interface RowProps extends React.HtmlHTMLAttributes<HTMLDivElement> {
-  children: React.ReactNode;
+  children: React.ReactElement | React.ReactElement[];
   style?: React.CSSProperties;
   /**
    * Spacing between elements
    * [Row, Col]
    */
-  gutter?: [React.CSSProperties['padding'], React.CSSProperties['padding']];
+  gutter?: Gutter | [Gutter, Gutter];
   justifyContent?: React.CSSProperties['justifyContent'];
   alignItems?: React.CSSProperties['alignItems'];
   className?: string;

src/components/Grid/style.ts

@@ -1,6 +1,7 @@
 import { css } from '@emotion/css';
 import { ColProps } from './Col';
-import { RowProps } from './Row';
+import { Breakpoint, Gutter, RowProps } from './Row';
+import { useWindowSize } from '../../helpers/Grid';
 
 export const colStyle = (props: ColProps) =>
   css({
@@ -41,19 +42,66 @@ export const colStyle = (props: ColProps) =>
     },
   });
 
-export const rowStyle = css({
-  boxSizing: 'border-box',
-  display: 'flex',
-});
-
-export const flexPosition = (props: RowProps) =>
+export const rowStyle = (props: RowProps) =>
   css({
+    boxSizing: 'border-box',
+    display: 'flex',
     flexDirection: props.flexDirection,
     justifyContent: props.justifyContent,
     alignItems: props.alignItems,
-    padding: props.gutter[0],
-    flexWrap: props.wrap,
-    '& > .sha-el-col': {
-      padding: props.gutter[1],
-    },
   });
+
+const breakpointRowObject = (gutter: Gutter[], breakpoint: Breakpoint) => ({
+  marginLeft: typeof gutter[0] === 'object' && gutter[0][breakpoint] !== undefined ? gutter[0][breakpoint] / -2 : null,
+  marginRight: typeof gutter[0] === 'object' && gutter[0][breakpoint] !== undefined ? gutter[0][breakpoint] / -2 : null,
+  rowGap: typeof gutter[1] === 'object' && gutter[1][breakpoint] !== undefined ? gutter[1][breakpoint] : null,
+});
+
+const breakpointColObject = (gutter: Gutter[], breakpoint: Breakpoint | '') =>
+  typeof gutter[0] === 'object' &&
+  gutter[0][breakpoint] !== undefined && {
+    paddingLeft: gutter[0][breakpoint] / 2,
+    paddingRight: gutter[0][breakpoint] / 2,
+  };
+
+export const gutterStyle = (props: RowProps): [string, { paddingLeft: number; paddingRight: number }] => {
+  const normalizedGutter = Array.isArray(props.gutter) ? props.gutter : [props.gutter, 0];
+  const defaultGutter = [
+    typeof normalizedGutter[0] === 'number' ? normalizedGutter[0] : 0,
+    typeof normalizedGutter[1] === 'number' ? normalizedGutter[1] : 0,
+  ];
+  const [width] = useWindowSize();
+
+  return [
+    css({
+      flexWrap: props.wrap,
+      rowGap: defaultGutter[1],
+      marginLeft: defaultGutter[0] / -2,
+      marginRight: defaultGutter[0] / -2,
+      '@media (max-width: 576px)': {
+        ...breakpointRowObject(normalizedGutter, 'xs'),
+      },
+      '@media (min-width: 576px)': {
+        ...breakpointRowObject(normalizedGutter, 'sm'),
+      },
+      '@media (min-width: 768px)': {
+        ...breakpointRowObject(normalizedGutter, 'md'),
+      },
+      '@media (min-width: 992px)': {
+        ...breakpointRowObject(normalizedGutter, 'lg'),
+      },
+      '@media (min-width: 1200px)': {
+        ...breakpointRowObject(normalizedGutter, 'xl'),
+      },
+    }),
+    {
+      paddingLeft: defaultGutter[0] / 2,
+      paddingRight: defaultGutter[0] / 2,
+      ...breakpointColObject(normalizedGutter, width < 576 ? 'xs' : ''),
+      ...breakpointColObject(normalizedGutter, width > 576 ? 'sm' : ''),
+      ...breakpointColObject(normalizedGutter, width > 768 ? 'md' : ''),
+      ...breakpointColObject(normalizedGutter, width > 992 ? 'lg' : ''),
+      ...breakpointColObject(normalizedGutter, width > 1200 ? 'xl' : ''),
+    },
+  ];
+};

src/components/Input/BaseInputComponent.tsx

@@ -131,21 +131,25 @@ export const BaseInputComponent = React.forwardRef<
         </fieldset>
       </Row>
       {(error !== undefined || hint !== undefined) && (
-        <Row
-          justifyContent="flex-end"
-          gutter={[0, `0 ${borderless ? '0' : before ? '5px' : '14px'}`]}
-          className={classes(css.help, 'help')}
-        >
+        <Row gutter={[0, 0]} justifyContent="flex-end" className={classes(css.help, 'help')}>
           {error && (
             <Col flex="1 0 auto">
-              <Text variant="label" className={`${css.error}`}>
+              <Text
+                padding={`0 ${borderless ? '0' : before ? '5px' : '14px'}`}
+                variant="label"
+                className={`${css.error}`}
+              >
                 {error}
               </Text>
             </Col>
           )}
           {hint && (
             <Col flex="0 1 auto">
-              <Text variant="label" className={`${css.hint}`}>
+              <Text
+                padding={`0 ${borderless ? '0' : before ? '5px' : '14px'}`}
+                variant="label"
+                className={`${css.hint}`}
+              >
                 {hint}
               </Text>
             </Col>

src/components/Layout/SidePanel.tsx

@@ -60,8 +60,8 @@ const Inner: React.FC<InnerProps> = (props) => {
         onMouseEnter={() => updateDrawerButton(true)}
         onMouseLeave={() => updateDrawerButton(false)}
       >
-        <Row gutter={[0, '0 5px 0 5px']} style={{ overflowX: 'hidden', maxWidth: width + 'px' }} wrap="nowrap">
-          <Col flex="0 0 60px" className={elevationCss(3)}>
+        <Row gutter={[0, 0]} style={{ overflowX: 'hidden', maxWidth: width + 'px' }} wrap="nowrap">
+          <Col style={{ padding: '0 5px' }} flex="0 0 60px" className={elevationCss(3)}>
             {props.logo && <div className={css.logo}>{props.logo}</div>}
             {children.map((v, i) => (
               <div className={css.item} key={`item-${i}`} onClick={() => onOpen(v, i, false, toggle)}>

src/components/List/List.tsx

@@ -27,11 +27,11 @@ export const List: React.FC<ListProps> = (props) => {
                 v &&
                 React.cloneElement(v, {
                   key: `item-${i}`,
-                  gutter: (props.densed && [0, '6px 8px 6px 9px']) || v.props.gutter,
+                  gutter: (props.densed && [16, 12]) || v.props.gutter,
                 }),
             )
           : React.cloneElement(props.children || <div />, {
-              gutter: (props.densed && [0, '6px 8px 6px 9px']) || props.children?.props.gutter,
+              gutter: (props.densed && [16, 12]) || props.children?.props.gutter,
             })}
       </ul>
     </div>

src/components/List/ListItem.tsx

@@ -28,7 +28,7 @@ export const ListItem: React.FC<ListItemProps> = (props) => {
     subtitle,
     action,
     selected,
-    gutter = [0, '12px 16px 12px 18px'],
+    gutter = [32, 24],
     element,
     className,
     ...rest