@heliux-org/design-system-core 0.0.185 → 0.0.186

package/src/components/GridSystem/GridSystem.tsx

@@ -1,13 +1,7 @@
 import React, { ReactNode, useEffect, useRef, useState } from 'react';
-import { css, jsx } from '@emotion/react';
+import styled from '@emotion/styled';
 
 import { PropsWithChildren } from 'react';
-import { Interpolation, Theme } from '@emotion/react';
-
-type EmotionProps = {
-  css?: Interpolation<Theme>;
-};
-
 
 type ContainerProps = PropsWithChildren<{
   fluid?: boolean;
@@ -18,7 +12,8 @@ type ContainerProps = PropsWithChildren<{
   marginBottom?: string | number;
   marginLeft?: string | number;
   className?: string;
-}> & EmotionProps;
+  debug?: boolean;
+}>;
 
 interface RowProps {
   children: ReactNode;
@@ -31,6 +26,7 @@ interface RowProps {
   marginLeft?: string | number;
   fullHeight?: boolean;
   childrenMargin?: number;
+  debug?: boolean;
   [key: string]: any;
 }
 
@@ -43,6 +39,7 @@ interface ColProps {
   xl?: number;
   offset?: number;
   className?: string;
+  debug?: boolean;
   [key: string]: any;
 }
 
@@ -65,69 +62,58 @@ const getColumnWidth = (span: number): string => {
   return `${width}%`;
 };
 
-const GridContainer: React.FC<ContainerProps> = ({
-  children,
-  fluid = false,
-  fullWidth = false,
-  margin,
-  marginTop,
-  marginRight,
-  marginBottom,
-  marginLeft,
-  className = '',
-  ...props
-}) => {
-  const marginTopValue = parseMarginValue(marginTop || margin);
-  const marginRightValue = parseMarginValue(marginRight || margin);
-  const marginBottomValue = parseMarginValue(marginBottom || margin);
-  const marginLeftValue = parseMarginValue(marginLeft || margin);
-
-  const containerStyles = css`
-    box-sizing: border-box;
-    width: ${fullWidth ? `calc(100% - ${marginLeftValue} - ${marginRightValue})` : '100%'};
-    max-width: ${fluid ? 'none' : '1860px'};
-    margin-top: ${marginTopValue};
-    margin-right: ${marginRightValue};
-    margin-bottom: ${marginBottomValue};
-    margin-left: ${marginLeftValue};
-    padding-left: 15px;
-    padding-right: 15px;
-  `;
-
+const StyledContainer = styled.div<ContainerProps>`
+  box-sizing: border-box;
+  width: ${props => props.fullWidth ? `calc(100% - ${parseMarginValue(props.marginLeft || props.margin)} - ${parseMarginValue(props.marginRight || props.margin)})` : '100%'};
+  max-width: ${props => props.fluid ? 'none' : '1860px'};
+  margin-top: ${props => parseMarginValue(props.marginTop || props.margin)};
+  margin-right: ${props => parseMarginValue(props.marginRight || props.margin)};
+  margin-bottom: ${props => parseMarginValue(props.marginBottom || props.margin)};
+  margin-left: ${props => parseMarginValue(props.marginLeft || props.margin)};
+  padding-left: 15px;
+  padding-right: 15px;
+  ${props => props.debug && 'background-color: rgba(0,0,0,0.1);'}
+
+  @media (min-width: 1860px) {
+    margin-left: auto;
+    margin-right: auto;
+  }
+`;
+
+const GridContainer: React.FC<ContainerProps> = (props) => {
   return (
-    <div css={containerStyles} className={`container ${className}`} {...props}>
-      {children}
-    </div>
+    <StyledContainer className={`container ${props.className || ''}`} {...props}>
+      {props.children}
+    </StyledContainer>
   );
 };
 
-const GridRow: React.FC<RowProps> = ({
-  children,
-  className = '',
-  nogutter = false,
-  margin,
-  marginTop,
-  marginRight,
-  marginBottom,
-  marginLeft,
-  fullHeight = false,
-  childrenMargin = 0,
-  ...props
-}) => {
+const StyledRow = styled.div<RowProps>`
+  display: flex;
+  flex-wrap: wrap;
+  margin-top: ${props => parseMarginValue(props.marginTop || props.margin)};
+  margin-right: ${props => props.nogutter ? parseMarginValue(props.marginRight || props.margin) : `calc(${parseMarginValue(props.marginRight || props.margin)} - 15px)`};
+  margin-bottom: ${props => parseMarginValue(props.marginBottom || props.margin)};
+  margin-left: ${props => props.nogutter ? parseMarginValue(props.marginLeft || props.margin) : `calc(${parseMarginValue(props.marginLeft || props.margin)} - 15px)`};
+  ${props => props.fullHeight && `
+    height: ${props.remainingHeight};
+    > * {
+      margin: ${parseMarginValue(props.marginBottom || props.margin)}px;
+    }
+  `}
+  ${props => props.debug && 'background-color: rgba(0,0,0,0.2);'}
+`;
+
+const GridRow: React.FC<RowProps> = (props) => {
   const rowRef = useRef<HTMLDivElement>(null);
   const [remainingHeight, setRemainingHeight] = useState('100vh');
 
-  const marginTopValue = parseMarginValue(marginTop || margin);
-  const marginRightValue = parseMarginValue(marginRight || margin);
-  const marginBottomValue = parseMarginValue(marginBottom || margin);
-  const marginLeftValue = parseMarginValue(marginLeft || margin);
-
   useEffect(() => {
-    if (fullHeight && rowRef.current) {
+    if (props.fullHeight && rowRef.current) {
       const updateHeight = () => {
         const rowTop = rowRef.current?.getBoundingClientRect().top || 0;
         const windowHeight = window.innerHeight;
-        const newRemainingHeight = windowHeight - rowTop - parseFloat(marginBottomValue);
+        const newRemainingHeight = windowHeight - rowTop - parseFloat(parseMarginValue(props.marginBottom || props.margin));
         setRemainingHeight(`${newRemainingHeight}px`);
       };
 
@@ -135,83 +121,69 @@ const GridRow: React.FC<RowProps> = ({
       window.addEventListener('resize', updateHeight);
       return () => window.removeEventListener('resize', updateHeight);
     }
-  }, [fullHeight, marginBottomValue]);
-
-  const rowStyles = css`
-    display: flex;
-    flex-wrap: wrap;
-    margin-top: ${marginTopValue};
-    margin-right: ${nogutter ? marginRightValue : `calc(${marginRightValue} - 15px)`};
-    margin-bottom: ${marginBottomValue};
-    margin-left: ${nogutter ? marginLeftValue : `calc(${marginLeftValue} - 15px)`};
-    ${fullHeight && `
-      height: ${remainingHeight};
-      > * {
-        margin: ${marginBottomValue}px;
-      }
-    `}
-  `;
+  }, [props.fullHeight, props.margin, props.marginBottom]);
 
   return (
-    <div ref={rowRef} css={rowStyles} className={`row ${className}`} {...props}>
-      {children}
-    </div>
+    <StyledRow ref={rowRef} className={`row ${props.className || ''}`} {...props} remainingHeight={remainingHeight}>
+      {props.children}
+    </StyledRow>
   );
 };
 
-const GridCol: React.FC<ColProps> = ({ xs, sm, md, lg, xl, children, className = '', ...props }) => {
-  const columnStyles = css`
-    flex: 0 0 auto;
-    padding-right: 15px;
-    padding-left: 15px;
-
-    ${xs !== undefined && `
-      flex-basis: ${getColumnWidth(xs)};
-      max-width: ${getColumnWidth(xs)};
+const StyledCol = styled.div<ColProps>`
+  flex: 0 0 auto;
+  padding-right: 15px;
+  padding-left: 15px;
+  ${props => props.debug && 'background-color: rgba(0,0,0,0.4);'}
+
+  ${props => props.xs !== undefined && `
+    flex-basis: ${getColumnWidth(props.xs)};
+    max-width: ${getColumnWidth(props.xs)};
+  `}
+
+  @media (min-width: ${breakpoints.sm}px) {
+    ${props => props.sm !== undefined && `
+      flex-basis: ${getColumnWidth(props.sm)};
+      max-width: ${getColumnWidth(props.sm)};
     `}
+  }
 
-    @media (min-width: ${breakpoints.sm}px) {
-      ${sm !== undefined && `
-        flex-basis: ${getColumnWidth(sm)};
-        max-width: ${getColumnWidth(sm)};
-      `}
-    }
-
-    @media (min-width: ${breakpoints.md}px) {
-      ${md !== undefined && `
-        flex-basis: ${getColumnWidth(md)};
-        max-width: ${getColumnWidth(md)};
-      `}
-    }
+  @media (min-width: ${breakpoints.md}px) {
+    ${props => props.md !== undefined && `
+      flex-basis: ${getColumnWidth(props.md)};
+      max-width: ${getColumnWidth(props.md)};
+    `}
+  }
 
-    @media (min-width: ${breakpoints.lg}px) {
-      ${lg !== undefined && `
-        flex-basis: ${getColumnWidth(lg)};
-        max-width: ${getColumnWidth(lg)};
-      `}
-    }
+  @media (min-width: ${breakpoints.lg}px) {
+    ${props => props.lg !== undefined && `
+      flex-basis: ${getColumnWidth(props.lg)};
+      max-width: ${getColumnWidth(props.lg)};
+    `}
+  }
 
-    @media (min-width: ${breakpoints.xl}px) {
-      ${xl !== undefined && `
-        flex-basis: ${getColumnWidth(xl)};
-        max-width: ${getColumnWidth(xl)};
-      `}
-    }
-  `;
+  @media (min-width: ${breakpoints.xl}px) {
+    ${props => props.xl !== undefined && `
+      flex-basis: ${getColumnWidth(props.xl)};
+      max-width: ${getColumnWidth(props.xl)};
+    `}
+  }
+`;
 
+const GridCol: React.FC<ColProps> = (props) => {
   return (
-    <div css={columnStyles} className={className} {...props}>
-      {children}
-    </div>
+    <StyledCol className={props.className} {...props}>
+      {props.children}
+    </StyledCol>
   );
 };
 
 const GridExample: React.FC = () => (
-  <GridContainer fullWidth margin={8}>
-    <GridRow margin={16}>
-      <GridCol xs={12} md={6} lg={4}>Column 1</GridCol>
-      <GridCol xs={12} md={6} lg={4}>Column 2</GridCol>
-      <GridCol xs={12} md={12} lg={4}>Column 3</GridCol>
+  <GridContainer fullWidth margin={8} debug>
+    <GridRow margin={16} debug>
+      <GridCol xs={12} md={6} lg={4} debug>Column 1</GridCol>
+      <GridCol xs={12} md={6} lg={4} debug>Column 2</GridCol>
+      <GridCol xs={12} md={12} lg={4} debug>Column 3</GridCol>
     </GridRow>
   </GridContainer>
 );

package/src/components/GridSystem/__stories__/GridSystem.mdx

@@ -16,18 +16,18 @@ We are using a custom grid component
 </Canvas>
 
 ```js
-import { GridCol, GridContainer, GridRow } from "../Grid";
+import { GridCol, GridContainer, GridRow } from "../GridSystem";
 
 const GridLayout = {
   render: () => {
     return (
-  <GridContainer fullWidth margin={8}>
-    <GridRow margin={16}>
-      <GridCol xs={12} md={6} lg={4}>Column 1</GridCol>
-      <GridCol xs={12} md={6} lg={4}>Column 2</GridCol>
-      <GridCol xs={12} md={12} lg={4}>Column 3</GridCol>
-    </GridRow>
-  </GridContainer>
+      <GridContainer fullWidth margin={8} debug>
+        <GridRow margin={16} debug>
+          <GridCol xs={12} md={6} lg={4} debug>Column 1</GridCol>
+          <GridCol xs={12} md={6} lg={4} debug>Column 2</GridCol>
+          <GridCol xs={12} md={12} lg={4} debug>Column 3</GridCol>
+        </GridRow>
+      </GridContainer>    
     );
   },
 

package/src/components/GridSystem/__stories__/GridSystem.stories.jsx

@@ -10,13 +10,13 @@ export default meta;
 export const GridLayout = {
   render: () => {
     return (
-      <GridContainer fullWidth margin={8}>
-      <GridRow margin={16}>
-        <GridCol xs={12} md={6} lg={4}>Column 1</GridCol>
-        <GridCol xs={12} md={6} lg={4}>Column 2</GridCol>
-        <GridCol xs={12} md={12} lg={4}>Column 3</GridCol>
-      </GridRow>
-    </GridContainer>
+      <GridContainer fullWidth margin={8} debug>
+        <GridRow margin={16} debug>
+          <GridCol xs={12} md={6} lg={4} debug>Column 1</GridCol>
+          <GridCol xs={12} md={6} lg={4} debug>Column 2</GridCol>
+          <GridCol xs={12} md={12} lg={4} debug>Column 3</GridCol>
+        </GridRow>
+      </GridContainer>    
     );
   },
 

package/src/components/PageHeader/PageHeader.tsx

@@ -2,21 +2,15 @@ import cx from "classnames";
 import React, { useState } from "react";
 import { camelCase } from "lodash-es";
 import { getStyle } from "../../helpers/typesciptCssModulesHelper";
-
 import { PageHeaderType } from "./PageHeaderConstants";
-
 import { ComponentDefaultTestId, getTestId } from "../../tests/test-ids-utils";
 import { backwardCompatibilityForProperties } from "../../helpers/backwardCompatibilityForProperties";
-
 import Divider from "../Divider/Divider";
 import Flex from "../Flex/Flex";
 import TabList from "../Tabs/TabList/TabList";
 import Heading from "../Heading/Heading";
-
-import { Container, Row, Col } from "react-grid-system";
-
+import { GridContainer } from "../GridSystem/GridSystem";
 import { VibeComponentProps, withStaticProps } from "../../types";
-
 import styles from "./PageHeader.module.scss";
 import Text from "../Text/Text";
 import InlineEdit from "../InlineEdit/InlineEdit";
@@ -84,19 +78,22 @@ const PageHeader: React.FC<PageHeaderProps> & {
 	]);
 
 	return (
-		<aside
-			className={cx(
-				styles.PageHeader,
-				getStyle(styles, camelCase(`type-${type}`)),
-				overrideClassName
-			)}
-			role="alert"
-			data-testid={
-				dataTestId ||
-				getTestId(ComponentDefaultTestId.ATTENTION_BOX, id)
-			}
-		>
-			<Container className-={styles.PageHeader}>
+		<aside 				className={cx(
+			styles.PageHeader,
+			getStyle(styles, camelCase(`type-${type}`)),
+			overrideClassName
+		)}
+		role="alert"
+		data-testid={
+			dataTestId ||
+			getTestId(ComponentDefaultTestId.ATTENTION_BOX, id)
+		}
+>
+			<GridContainer
+				fullWidth
+				margin={8}
+				className-={styles.PageHeader}
+			>
 				<Flex>{breadcrumb}</Flex>
 				<Flex gap={5}>
 					{secondaryTitle && (
@@ -173,7 +170,7 @@ const PageHeader: React.FC<PageHeaderProps> & {
 						</Flex>
 					</div>
 				)}
-			</Container>
+			</GridContainer>
 			{divider ? (
 				<Divider className={styles.PageHeaderDivider} />
 			) : (