@lifesg/react-design-system 2.0.0-canary.3 → 2.0.0-canary.4

package/sidenav/package.json

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

package/sidenav/sidenav-context.d.ts

@@ -0,0 +1,15 @@
+import { Dispatch, SetStateAction } from "react";
+export interface SidenavContextItem {
+    itemId: string | undefined;
+    content: React.ReactNode | undefined;
+}
+interface SidenavContextProps {
+    currentItem: SidenavContextItem | undefined;
+    previouslySelectedItemId: string | undefined;
+    selectedItem: SidenavContextItem | undefined;
+    setCurrentItem: Dispatch<SetStateAction<SidenavContextItem | undefined>>;
+    setPreviouslySelectedItemId: Dispatch<SetStateAction<string | undefined>>;
+    setSelectedItem: Dispatch<SetStateAction<SidenavContextItem | undefined>>;
+}
+export declare const SidenavContext: import("react").Context<SidenavContextProps>;
+export {};

package/sidenav/sidenav-drawer-item.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { SidenavDrawerItemProps } from "./types";
+export declare const SidenavDrawerItem: ({ id, title, onClick, children, ...otherProps }: SidenavDrawerItemProps) => JSX.Element;

package/sidenav/sidenav-drawer-item.styles.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+interface LinkButtonStyleProp {
+    $highlight?: boolean | undefined;
+    $noChildren?: boolean | undefined;
+}
+interface IconStyleProp {
+    $expanded?: boolean | undefined;
+}
+export declare const Container: import("styled-components").StyledComponent<import("react-spring").AnimatedComponent<"li">, import("styled-components").DefaultTheme, {}, never>;
+export declare const LinkButton: import("styled-components").StyledComponent<(props: import("../button").ButtonProps & import("react").RefAttributes<HTMLButtonElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>, import("styled-components").DefaultTheme, LinkButtonStyleProp, never>;
+export declare const DrawerSubitemContainer: import("styled-components").StyledComponent<import("react-spring").AnimatedComponent<"div">, import("styled-components").DefaultTheme, {}, never>;
+export declare const IconElement: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const ChevronIcon: import("styled-components").StyledComponent<{
+    (props: import("react").SVGProps<SVGSVGElement>): JSX.Element;
+    displayName: string;
+}, import("styled-components").DefaultTheme, IconStyleProp, never>;
+export declare const TextElement: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const DrawerContent: import("styled-components").StyledComponent<import("react-spring").AnimatedComponent<"ul">, import("styled-components").DefaultTheme, {}, never>;
+export {};

package/sidenav/sidenav-drawer-subitem.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { SidenavDrawerSubitemProps } from "./types";
+export declare const SidenavDrawerSubitem: ({ id, title, onClick, ...otherProps }: SidenavDrawerSubitemProps) => JSX.Element;

package/sidenav/sidenav-drawer-subitem.styles.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare const Container: import("styled-components").StyledComponent<"li", import("styled-components").DefaultTheme, {}, never>;
+export declare const LinkButton: import("styled-components").StyledComponent<(props: import("../button").ButtonProps & import("react").RefAttributes<HTMLButtonElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>, import("styled-components").DefaultTheme, {}, never>;

package/sidenav/sidenav-group.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { SidenavGroupProps } from "./types";
+export declare const SidenavGroup: ({ separator, children, ...otherProps }: SidenavGroupProps) => JSX.Element;

package/sidenav/sidenav-group.styles.d.ts

@@ -0,0 +1,2 @@
+export declare const Container: import("styled-components").StyledComponent<"ul", import("styled-components").DefaultTheme, {}, never>;
+export declare const Divider: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;

package/sidenav/sidenav-item.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { SidenavItemProps } from "./types";
+export declare const SidenavItem: ({ children, icon, title, onClick, ...otherProps }: SidenavItemProps) => JSX.Element;

package/sidenav/sidenav-item.styles.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+interface StyleProps {
+    $highlight: boolean;
+}
+export declare const Container: import("styled-components").StyledComponent<"li", import("styled-components").DefaultTheme, {}, never>;
+export declare const DefaultButton: import("styled-components").StyledComponent<(props: import("../button").ButtonProps & import("react").RefAttributes<HTMLButtonElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>, import("styled-components").DefaultTheme, StyleProps, never>;
+export declare const IconContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const TitleText: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, import("../text").TextProps, never>;
+export {};

package/sidenav/sidenav.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { SidenavProps } from "./types";
+export declare const Sidenav: (({ fixed, children, ...otherProps }: SidenavProps) => JSX.Element) & {
+    Group: ({ separator, children, ...otherProps }: import("./types").SidenavGroupProps) => JSX.Element;
+    Item: ({ children, icon, title, onClick, ...otherProps }: import("./types").SidenavItemProps) => JSX.Element;
+    DrawerItem: ({ id, title, onClick, children, ...otherProps }: import("./types").SidenavDrawerItemProps) => JSX.Element;
+    DrawerSubitem: ({ id, title, onClick, ...otherProps }: import("./types").SidenavDrawerSubitemProps) => JSX.Element;
+};

package/sidenav/sidenav.styles.d.ts

@@ -0,0 +1,11 @@
+interface StyleProps {
+    $fixed?: boolean;
+}
+interface DrawerStyleProps {
+    $showDrawer: boolean;
+}
+export declare const Wrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, StyleProps, never>;
+export declare const DesktopContainer: import("styled-components").StyledComponent<"nav", import("styled-components").DefaultTheme, {}, never>;
+export declare const MobileContainer: import("styled-components").StyledComponent<"nav", import("styled-components").DefaultTheme, {}, never>;
+export declare const DesktopDrawer: import("styled-components").StyledComponent<import("react-spring").AnimatedComponent<"ul">, import("styled-components").DefaultTheme, DrawerStyleProps, never>;
+export {};

package/sidenav/types.d.ts

@@ -0,0 +1,58 @@
+/// <reference types="react" />
+interface SidenavBaseProps {
+    id?: string | undefined;
+    "data-testid"?: string | undefined;
+    className?: string | undefined;
+}
+export interface SidenavProps extends SidenavBaseProps {
+    /** Specifies if sidenav should be fixed to left. Defaults to true */
+    fixed?: boolean | undefined;
+    /**
+     * <Sidenav.Group>
+     *   ...
+     * </Sidenav.Group>
+     */
+    children: React.ReactNode;
+}
+export interface SidenavGroupProps extends SidenavBaseProps {
+    /** Specifies if bottom divider will be rendered */
+    separator?: boolean | undefined;
+    /**
+     * <Sidenav.Item>
+     *   ...
+     * </Sidenav.Item>
+     */
+    children: React.ReactNode;
+}
+export interface SidenavItemProps extends SidenavBaseProps {
+    title: string;
+    /** The icon to be rendered */
+    icon: React.ReactNode;
+    /** Indicates if an item is initially selected */
+    selected?: boolean | undefined;
+    /** Called when item is selected */
+    onClick?: ((id: string) => void) | undefined;
+    /**
+     * <Sidenav.DrawerItem>
+     *   ...
+     * </Sidenav.DrawerItem>
+     */
+    children?: React.ReactNode | undefined;
+}
+export interface SidenavDrawerItemProps extends SidenavBaseProps {
+    title: string;
+    /**
+     * <Sidenav.DrawerSubitem>
+     *   ...
+     * </Sidenav.DrawerSubitem>
+     */
+    children?: React.ReactNode | undefined;
+    /** Called when item is selected */
+    onClick?: ((id: string) => void) | undefined;
+}
+export interface SidenavDrawerSubitemProps extends SidenavBaseProps {
+    title: string;
+    /** Called when item is selected */
+    onClick?: ((id: string) => void) | undefined;
+}
+export {};

package/smart-app-banner/index.js

@@ -369,5 +369,5 @@ import e,{jsxs as t,jsx as r,Fragment as n}from"react/jsx-runtime";import i from
     ${Er}
 `,kr=a(u)`
     ${Er}
-`,Ar="https://assets.life.gov.sg/react-design-system/img/app-icon/app-icon.png",Nr="smart-app-banner";const jr=i.forwardRef((function(e,i){const{className:a,show:o,href:l,content:c,offset:d=0,icon:s=Ar,animated:h=!1,onDismiss:g,onClick:u}=e,{title:f,message:p,buttonLabel:m,buttonAriaLabel:y,numberOfStars:F}=c,S=e=>{e.stopPropagation(),window.open(l,"_blank","noreferrer"),u?.()};return r(n,{children:o&&t(Fr,{ref:i,$isAnimated:h,$offset:d,className:a,children:[r(Sr,{onClick:g,id:`${Nr}-dismiss`,"data-testid":`${Nr}-dismiss-container`,children:r($r,{"aria-label":"Dismiss",children:r(br,{})})}),t(vr,{onClick:S,id:`${Nr}-proceed`,"data-testid":`${Nr}-proceed-container`,children:[r(Br,{src:s,alt:"lifesg-app-icon"}),t(Cr,{children:[r(Hr,{children:f}),r(xr,{children:p}),(()=>{if(isNaN(F)||F<0)return;const e=[],t=F-Math.floor(F)>=.4;for(let t=0;t<Math.floor(F);t++)e.push(r(Lr,{},`star${t}`));if(t&&e.push(r(zr,{},"halfstar")),e.length<5){const t=5-e.length;for(let n=0;n<t;n++)e.push(r(kr,{},`emptystar${n}`))}return r(_r,{children:e.slice(0,5)})})()]}),r(wr,{children:r(Dr,{onClick:S,"aria-label":y,children:m})})]})]})})}));export{jr as SmartAppBanner};
+`,Ar="https://assets.life.gov.sg/react-design-system/img/app-icon/app-icon.png",Nr="smart-app-banner";const jr=i.forwardRef((function(e,i){const{className:a,show:o,href:l,content:c,offset:d=0,icon:s=Ar,animated:h=!1,onDismiss:g,onClick:u}=e,{title:f,message:p,buttonLabel:m,buttonAriaLabel:y,numberOfStars:F}=c,S=e=>{e.stopPropagation(),window.open(l,"_blank","noreferrer"),u?.()};return r(n,{children:o&&t(Fr,{ref:i,$isAnimated:h,$offset:d,className:a,children:[r(Sr,{onClick:g,id:`${Nr}-dismiss`,"data-testid":`${Nr}-dismiss-container`,children:r($r,{"aria-label":"Dismiss",children:r(br,{})})}),t(vr,{onClick:S,id:`${Nr}-proceed`,"data-testid":`${Nr}-proceed-container`,children:[r(Br,{src:s,alt:"lifesg-app-icon"}),t(Cr,{children:[r(Hr,{children:f}),r(xr,{children:p}),(()=>{if(isNaN(F)||F<0)return;const e=[],t=F-Math.floor(F)>=.4;for(let t=0;t<Math.floor(F);t++)e.push(r(Lr,{},`star${t}`));if(t&&e.push(r(zr,{},"halfstar")),e.length<5){const t=5-e.length;for(let n=0;n<t;n++)e.push(r(kr,{},`emptystar${n}`))}return r(_r,{children:e.slice(0,5)})})()]}),r(wr,{children:r(Dr,{type:"button",onClick:S,"aria-label":y,children:m})})]})]})})}));export{jr as SmartAppBanner};
 //# sourceMappingURL=index.js.map