@lifesg/react-design-system 1.0.0-alpha.4 → 1.0.0-alpha.5

package/layout/content.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { ContentProps } from "./types";
+export declare const Content: React.ForwardRefExoticComponent<ContentProps & React.RefAttributes<HTMLDivElement>>;

package/layout/index.css

@@ -0,0 +1 @@
+:root{--sgds-masthead-font-family:system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--sgds-masthead-background-color:hsl(0, 0%, 94%);--sgds-masthead-text-color:hsl(0, 0%, 28%);--sgds-masthead-link-color:hsl(220, 100%, 47%);--sgds-masthead-link-hover-color:hsl(220, 100%, 37%);--sgds-masthead-tablet-padding-x:1.25rem;--sgds-masthead-tablet-font-size:0.75rem;--sgds-masthead-crest-color:rgb(239, 51, 32)}

package/layout/index.d.ts

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

package/layout/index.js

@@ -0,0 +1,51 @@
+import{jsx as t}from"react/jsx-runtime";import e from"react";import i,{css as a}from"styled-components";const r={mobileS:320,mobileM:375,mobileL:480,tablet:1199,desktopM:1399,desktopL:1999,desktop4k:3840},d=t=>Object.keys(r).reduce(((e,i)=>{const a=r[i];return e[i]=`@media screen and (${t}: ${a}px)`,e}),{}),n=d("max-width"),o=(d("min-width"),e.forwardRef(((e,i)=>{const{children:a,"data-testid":r="container",type:d="flex",...n}=e;return t(m,{ref:i,"data-testid":r,type:d,...n,children:a})}))),m=i.div`
+    flex-grow: 1;
+    margin: 0 auto;
+    position: relative;
+    width: auto;
+
+    /* Max width restrictions */
+    max-width: 1344px;
+
+    ${n.desktopM} {
+        max-width: 1152px;
+    }
+
+    ${n.tablet} {
+        max-width: 960px;
+    }
+
+    ${n.mobileL} {
+        width: 100%;
+        max-width: unset;
+    }
+
+    ${t=>"grid"===t.type?a`
+                    column-gap: 2rem;
+                    display: grid;
+                    grid-template-columns: repeat(12, minmax(0, 1fr));
+                    height: auto;
+
+                    ${n.tablet} {
+                        column-gap: 1.5rem;
+                        grid-template-columns: repeat(8, minmax(0, 1fr));
+                    }
+
+                    ${n.mobileL} {
+                        column-gap: 1rem;
+                        grid-template-columns: repeat(4, minmax(0, 1fr));
+                    }
+                `:a`
+                    display: flex;
+                    height: auto;
+                `}
+`,l=e.forwardRef(((e,i)=>{const{children:a,"data-testid":r="section",...d}=e;return t(s,{ref:i,"data-testid":r,...d,children:a})})),s=i.section`
+    display: block;
+    position: relative;
+    padding: 0 1.5rem;
+
+    // Extra enforcement
+    padding-left: 1.5rem !important;
+    padding-right: 1.5rem !important;
+`,p=e.forwardRef(((e,i)=>{const{children:a,"data-testid":r="content",className:d,type:n="flex",...m}=e;return t(l,{ref:i,"data-testid":r,className:d,...m,children:t(o,{"data-testid":`${r}-container`,type:n,"data-id":"container",children:a})})})),c={Section:l,Container:o,Content:p};export{c 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\n    /* Max width restrictions */\n    max-width: 1344px;\n\n    ${MediaQuery.MaxWidth.desktopM} {\n        max-width: 1152px;\n    }\n\n    ${MediaQuery.MaxWidth.tablet} {\n        max-width: 960px;\n    }\n\n    ${MediaQuery.MaxWidth.mobileL} {\n        width: 100%;\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                    height: auto;\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\":\n            default:\n                return css`\n                    display: flex;\n                    height: auto;\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,IACR,IAMMG,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,QAiBPI,EAAkBC,EAAOC,GAAe;;;;;;;;;MASxCZ,EAAoBZ;;;;MAIpBY,EAAoBb;;;;MAIpBa,EAAoBd;;;;;MAKnBkB,GAEU,SADDA,EAAMZ,KAECqB,CAAG;;;;;;sBAMJb,EAAoBb;;;;;sBAKpBa,EAAoBd;;;;kBAOnB2B,CAAG;;;;EC3DbC,EAAUZ,EAAMC,YAjBX,CAACC,EAAqBC,KACpC,MAAMC,SACFA,EACA,cAAeC,EAAS,aACrBC,GACHJ,EAEJ,OACIK,EAACM,EAAa,CAACV,IAAKA,EAAkB,cAAAE,KAAYC,EAAUF,SACvDA,OAaPS,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,SCtBJa,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: React.ForwardRefExoticComponent<SectionProps & React.RefAttributes<HTMLDivElement>>;

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" | "grid";
+export interface ContainerProps extends CommonLayoutProps {
+    /** The type of display style. Values: "flex" | "grid" */
+    type?: ContainerType | undefined;
+}
+export interface ContentProps extends ContainerProps {
+}
+export declare type DivRef = React.Ref<HTMLDivElement>;

package/link-list/index.css

@@ -0,0 +1 @@
+:root{--sgds-masthead-font-family:system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--sgds-masthead-background-color:hsl(0, 0%, 94%);--sgds-masthead-text-color:hsl(0, 0%, 28%);--sgds-masthead-link-color:hsl(220, 100%, 47%);--sgds-masthead-link-hover-color:hsl(220, 100%, 37%);--sgds-masthead-tablet-padding-x:1.25rem;--sgds-masthead-tablet-font-size:0.75rem;--sgds-masthead-crest-color:rgb(239, 51, 32)}