@lifesg/react-design-system 1.0.0-alpha.2 → 1.0.0-alpha.21

package/layout/container.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { ContainerProps } from "./types";
+export declare const Container: (props: ContainerProps & React.RefAttributes<HTMLDivElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;

package/layout/content.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { ContentProps } from "./types";
+export declare const Content: (props: ContentProps & React.RefAttributes<HTMLDivElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;

package/layout/index.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export declare const Layout: {
+    Section: (props: import("./types").SectionProps & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+    Container: (props: import("./types").ContainerProps & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+    Content: (props: import("./types").ContentProps & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+};
+export * from "./types";

package/layout/index.js

@@ -0,0 +1,55 @@
+import{jsx as t}from"react/jsx-runtime";import e from"react";import i,{css as r}from"styled-components";const a={mobileS:320,mobileM:375,mobileL:480,tablet:1199,desktopM:1399,desktopL:1999,desktop4k:3840},n=t=>Object.keys(a).reduce(((e,i)=>{const r=a[i];return e[i]=`@media screen and (${t}: ${r}px)`,e}),{}),d=n("max-width"),o=(n("min-width"),e.forwardRef(((e,i)=>{const{children:r,"data-testid":a="container",type:n="flex",...d}=e;return t(m,{ref:i,"data-testid":a,type:n,...d,children:r})}))),m=i.div`
+    flex-grow: 1;
+    margin: 0 auto;
+    position: relative;
+    width: auto;
+    height: auto;
+    padding: 0 0.75rem;
+
+    /* Max width restrictions */
+    max-width: 1320px;
+
+    ${d.desktopM} {
+        max-width: 1140px;
+    }
+
+    ${d.tablet} {
+        max-width: 720px;
+    }
+
+    ${d.mobileL} {
+        width: 100%;
+        padding: 0;
+        max-width: unset;
+    }
+
+    ${t=>{switch(t.type){case"grid":return r`
+                    column-gap: 2rem;
+                    display: grid;
+                    grid-template-columns: repeat(12, minmax(0, 1fr));
+
+                    ${d.tablet} {
+                        column-gap: 1.5rem;
+                        grid-template-columns: repeat(8, minmax(0, 1fr));
+                    }
+
+                    ${d.mobileL} {
+                        column-gap: 1rem;
+                        grid-template-columns: repeat(4, minmax(0, 1fr));
+                    }
+                `;case"flex-column":return r`
+                    display: flex;
+                    flex-direction: column;
+                `;default:return r`
+                    display: flex;
+                `}}}
+`,l=e.forwardRef(((e,i)=>{const{children:r,"data-testid":a="section",...n}=e;return t(c,{ref:i,"data-testid":a,...n,children:r})})),c=i.section`
+    display: block;
+    position: relative;
+    padding: 0 1.5rem;
+
+    // Extra enforcement
+    padding-left: 1.5rem !important;
+    padding-right: 1.5rem !important;
+`,s=e.forwardRef(((e,i)=>{const{children:r,"data-testid":a="content",className:n,type:d="flex",...m}=e;return t(l,{ref:i,"data-testid":a,className:n,...m,children:t(o,{"data-testid":`${a}-container`,type:d,"data-id":"container",children:r})})})),p={Section:l,Container:o,Content:s};export{p as Layout};
+//# sourceMappingURL=index.js.map

package/layout/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../src/spec/media-spec.ts","../../src/media/media.ts","../../src/layout/container.tsx","../../src/layout/section.tsx","../../src/layout/content.tsx","../../src/layout/index.ts"],"sourcesContent":["import { MediaWidth } from \"../media/types\";\n\nexport const MediaWidths: MediaWidth = {\n    mobileS: 320,\n    mobileM: 375,\n    mobileL: 480,\n    tablet: 1199,\n    desktopM: 1399,\n    desktopL: 1999,\n    desktop4k: 3840,\n};\n","import { MediaWidths as MediaWidthsSpec } from \"../spec/media-spec\";\nimport { MediaType, MediaWidth } from \"./types\";\n\n// =============================================================================\n// HELPER FUNCTION\n// =============================================================================\nconst getMediaQuerySpec = (type: \"max-width\" | \"min-width\") => {\n    return Object.keys(MediaWidthsSpec).reduce((accumulator, key) => {\n        const mediaWidth = MediaWidthsSpec[key as keyof MediaWidth];\n        accumulator[\n            key as keyof MediaType\n        ] = `@media screen and (${type}: ${mediaWidth}px)`;\n\n        return accumulator;\n    }, {} as MediaType);\n};\n\n// =============================================================================\n// EXPORTS\n// =============================================================================\nexport const MediaQuery = {\n    MaxWidth: getMediaQuerySpec(\"max-width\"),\n    MinWidth: getMediaQuerySpec(\"min-width\"),\n};\n\nexport const MediaWidths = MediaWidthsSpec;\n","import React from \"react\";\nimport styled, { css } from \"styled-components\";\nimport { MediaQuery } from \"../media/media\";\nimport { ContainerProps, ContainerType, DivRef } from \"./types\";\n\nconst Component = (props: ContainerProps, ref: DivRef): JSX.Element => {\n    const {\n        children,\n        \"data-testid\": testId = \"container\",\n        type = \"flex\",\n        ...otherProps\n    } = props;\n\n    return (\n        <StyledContainer\n            ref={ref}\n            data-testid={testId}\n            type={type}\n            {...otherProps}\n        >\n            {children}\n        </StyledContainer>\n    );\n};\n\n// =============================================================================\n// EXPORT\n// =============================================================================\nexport const Container = React.forwardRef(Component);\n\n// =============================================================================\n// STYLING\n// =============================================================================\ninterface StyleProps {\n    type: ContainerType;\n}\n\nconst StyledContainer = styled.div<StyleProps>`\n    flex-grow: 1;\n    margin: 0 auto;\n    position: relative;\n    width: auto;\n    height: auto;\n    padding: 0 0.75rem;\n\n    /* Max width restrictions */\n    max-width: 1320px;\n\n    ${MediaQuery.MaxWidth.desktopM} {\n        max-width: 1140px;\n    }\n\n    ${MediaQuery.MaxWidth.tablet} {\n        max-width: 720px;\n    }\n\n    ${MediaQuery.MaxWidth.mobileL} {\n        width: 100%;\n        padding: 0;\n        max-width: unset;\n    }\n\n    ${(props) => {\n        switch (props.type) {\n            case \"grid\":\n                return css`\n                    column-gap: 2rem;\n                    display: grid;\n                    grid-template-columns: repeat(12, minmax(0, 1fr));\n\n                    ${MediaQuery.MaxWidth.tablet} {\n                        column-gap: 1.5rem;\n                        grid-template-columns: repeat(8, minmax(0, 1fr));\n                    }\n\n                    ${MediaQuery.MaxWidth.mobileL} {\n                        column-gap: 1rem;\n                        grid-template-columns: repeat(4, minmax(0, 1fr));\n                    }\n                `;\n            case \"flex-column\":\n                return css`\n                    display: flex;\n                    flex-direction: column;\n                `;\n            case \"flex\":\n            default:\n                return css`\n                    display: flex;\n                `;\n        }\n    }}\n`;\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport { DivRef, SectionProps } from \"./types\";\n\nconst Component = (props: SectionProps, ref: DivRef): JSX.Element => {\n    const {\n        children,\n        \"data-testid\": testId = \"section\",\n        ...otherProps\n    } = props;\n\n    return (\n        <StyledSection ref={ref} data-testid={testId} {...otherProps}>\n            {children}\n        </StyledSection>\n    );\n};\n\n// =============================================================================\n// EXPORT\n// =============================================================================\nexport const Section = React.forwardRef(Component);\n\n// =============================================================================\n// STYLING\n// =============================================================================\nconst StyledSection = styled.section`\n    display: block;\n    position: relative;\n    padding: 0 1.5rem;\n\n    // Extra enforcement\n    padding-left: 1.5rem !important;\n    padding-right: 1.5rem !important;\n`;\n","import React from \"react\";\nimport { Container } from \"./container\";\nimport { Section } from \"./section\";\nimport { ContentProps, DivRef } from \"./types\";\n\nconst Component = (props: ContentProps, ref: DivRef): JSX.Element => {\n    const {\n        children,\n        \"data-testid\": testId = \"content\",\n        className,\n        type = \"flex\",\n        ...otherProps\n    } = props;\n\n    return (\n        <Section\n            ref={ref}\n            data-testid={testId}\n            className={className}\n            {...otherProps}\n        >\n            <Container\n                data-testid={`${testId}-container`}\n                type={type}\n                data-id=\"container\"\n            >\n                {children}\n            </Container>\n        </Section>\n    );\n};\n\n// =============================================================================\n// EXPORT\n// =============================================================================\nexport const Content = React.forwardRef(Component);\n","import { Container } from \"./container\";\nimport { Content } from \"./content\";\nimport { Section } from \"./section\";\n\nexport const Layout = {\n    Section,\n    Container,\n    Content,\n};\n\nexport * from \"./types\";\n"],"names":["MediaWidths","mobileS","mobileM","mobileL","tablet","desktopM","desktopL","desktop4k","getMediaQuerySpec","type","Object","keys","MediaWidthsSpec","reduce","accumulator","key","mediaWidth","MediaQuery","Container","React","forwardRef","props","ref","children","testId","otherProps","_jsx","StyledContainer","styled","div","css","Section","StyledSection","section","Content","className","Layout"],"mappings":"wGAEO,MAAMA,EAA0B,CACnCC,QAAS,IACTC,QAAS,IACTC,QAAS,IACTC,OAAQ,KACRC,SAAU,KACVC,SAAU,KACVC,UAAW,MCHTC,EAAqBC,GAChBC,OAAOC,KAAKC,GAAiBC,QAAO,CAACC,EAAaC,KACrD,MAAMC,EAAaJ,EAAgBG,GAKnC,OAJAD,EACIC,GACA,sBAAsBN,MAASO,OAE5BF,CAAW,GACnB,CAAe,GAMTG,EACCT,EAAkB,aCOnBU,GDNCV,EAAkB,aCMPW,EAAMC,YAvBb,CAACC,EAAuBC,KACtC,MAAMC,SACFA,EACA,cAAeC,EAAS,YAAWf,KACnCA,EAAO,UACJgB,GACHJ,EAEJ,OACIK,EAACC,GACGL,IAAKA,EACQ,cAAAE,EACbf,KAAMA,KACFgB,WAEHF,GAEP,KAeAI,EAAkBC,EAAOC,GAAe;;;;;;;;;;;MAWxCZ,EAAoBZ;;;;MAIpBY,EAAoBb;;;;MAIpBa,EAAoBd;;;;;;MAMnBkB,IACC,OAAQA,EAAMZ,MACV,IAAK,OACD,OAAOqB,CAAG;;;;;sBAKJb,EAAoBb;;;;;sBAKpBa,EAAoBd;;;;kBAK9B,IAAK,cACD,OAAO2B,CAAG;;;kBAKd,QACI,OAAOA,CAAG;;kBAGjB;ECrEIC,EAAUZ,EAAMC,YAjBX,CAACC,EAAqBC,KACpC,MAAMC,SACFA,EACA,cAAeC,EAAS,aACrBC,GACHJ,EAEJ,OACIK,EAACM,EAAa,CAACV,IAAKA,EAAkB,cAAAE,KAAYC,EAAUF,SACvDA,GAEP,IAWAS,EAAgBJ,EAAOK,OAAO;;;;;;;;ECSvBC,EAAUf,EAAMC,YA9BX,CAACC,EAAqBC,KACpC,MAAMC,SACFA,EACA,cAAeC,EAAS,UAASW,UACjCA,EAAS1B,KACTA,EAAO,UACJgB,GACHJ,EAEJ,OACIK,EAACK,EAAO,CACJT,IAAKA,EACQ,cAAAE,EACbW,UAAWA,KACPV,EAAUF,SAEdG,EAACR,EACgB,CAAA,cAAA,GAAGM,cAChBf,KAAMA,EAAI,UACF,YAEPc,SAAAA,KAGX,ICzBOa,EAAS,CAClBL,UACAb,YACAgB"}

package/layout/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@lifesg/react-design-system/layout",
+  "private": true,
+  "main": "../cjs/index.js",
+  "module": "./index.js",
+  "types": "./index.d.ts"
+}

package/layout/section.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { SectionProps } from "./types";
+export declare const Section: (props: SectionProps & React.RefAttributes<HTMLDivElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;

package/layout/types.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+export interface CommonLayoutProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+    "data-testid"?: string | undefined;
+}
+export interface SectionProps extends CommonLayoutProps {
+}
+export declare type ContainerType = "flex" | "flex-column" | "grid";
+export interface ContainerProps extends CommonLayoutProps {
+    /** The type of display style. Values: "flex" | "flex-column" | "grid" */
+    type?: ContainerType | undefined;
+}
+export interface ContentProps extends ContainerProps {
+}
+export declare type DivRef = React.Ref<HTMLDivElement>;