@lifesg/react-design-system 4.0.0-alpha.1 → 4.0.0-alpha.10

package/navbar/types.d.ts

@@ -1,101 +1,289 @@
 import type { ButtonProps } from "../button";
 import type { TypographyLinkProps } from "../typography";
+/**
+ * Props for a standard navigation link item.
+ */
 export interface NavItemLinkProps<T> extends NavItemCommonProps<T> {
     itemType?: "link";
     subMenu?: NavItemCommonProps<T>[] | undefined;
 }
+/**
+ * Props for a custom component slot navigation item.
+ */
 export interface NavItemComponentProps {
     itemType: "component";
     children: JSX.Element;
 }
+/**
+ * A single navigation item rendered by the navbar.
+ */
 export type NavItemProps<T> = NavItemLinkProps<T> | NavItemComponentProps;
+/**
+ * Shared props for link-type navigation items.
+ *
+ * `T` is the type of the arbitrary `options` payload.
+ */
 export interface NavItemCommonProps<T> extends TypographyLinkProps {
     id: string;
     "data-testid"?: string | undefined;
+    /**
+     * Arbitrary data passed through to callback arguments such as `onItemClick`.
+     */
     options?: T | undefined;
 }
+/**
+ * Desktop and mobile navigation item lists for the navbar.
+ *
+ * `T` is the type of the arbitrary `options` payload on each item.
+ */
 export interface NavItemsProps<T> {
+    /**
+     * Items rendered in the desktop navbar.
+     */
     desktop: NavItemProps<T>[];
+    /**
+     * Items rendered in the mobile drawer. Falls back to `desktop` when omitted.
+     */
     mobile?: NavItemProps<T>[] | undefined;
 }
+/** Props for a `"download"` type action button in the navbar. */
 export interface NavbarActionButtonDownloadProps {
     type: "download";
     args?: ButtonProps | undefined;
+    /**
+     * When `true`, the button remains visible outside the mobile drawer rather
+     * than being collapsed into it.
+     *
+     * @default false
+     */
     uncollapsible?: boolean | undefined;
 }
+/** Props for a `"button"` type action button in the navbar. */
 export interface NavbarActionButtonCtaProps {
     type: "button";
     args: ButtonProps;
+    /**
+     * When `true`, the button remains visible outside the mobile drawer rather
+     * than being collapsed into it.
+     *
+     * @default false
+     */
     uncollapsible?: boolean | undefined;
 }
-export interface NavbarButtonComponentProps {
+/** Props for the internal `"component"` type action button wrapper. */
+interface NavbarButtonComponentProps {
+    /** The custom component to be rendered */
     render: JSX.Element;
 }
+/** Props for a `"component"` type action button in the navbar. */
 export interface NavbarActionButtonComponentProps {
     type: "component";
     args?: NavbarButtonComponentProps | undefined;
+    /**
+     * When `true`, the button remains visible outside the mobile drawer rather
+     * than being collapsed into it.
+     *
+     * @default false
+     */
     uncollapsible?: boolean | undefined;
 }
+/**
+ * Props for a single action button in the navbar.
+ *
+ * `type` discriminates between `"button"`, `"download"`, and `"component"`.
+ */
 export type NavbarButtonProps = NavbarActionButtonDownloadProps | NavbarActionButtonCtaProps | NavbarActionButtonComponentProps;
+/** Props for the desktop and mobile action button lists in the navbar. */
 export interface NavbarActionButtonsProps {
+    /**
+     * Action buttons rendered in the desktop navbar.
+     */
     desktop: NavbarButtonProps[];
-    /** Navbar action buttons for mobile drawer. Takes desktop if not specified */
+    /**
+     * Action buttons rendered in the mobile drawer. Falls back to `desktop`
+     * when omitted.
+     */
     mobile?: NavbarButtonProps[] | undefined;
 }
+/**
+ * Branding identity for a primary or secondary brand slot in the navbar.
+ */
 export interface NavbarBrandingProps {
+    /** The name of the brand, used for accessibility and alt text. */
     brandName: string;
+    /** The source URL for the brand logo image. */
     logoSrc: string;
 }
+/**
+ * Logo resources for the primary and secondary brand slots in the navbar.
+ *
+ */
 export interface NavbarResourcesProps {
+    /**
+     * When omitted, a default logo derived from the active theme is used.
+     */
     primary?: NavbarBrandingProps | undefined;
+    /**
+     * When omitted, the secondary brand slot is hidden.
+     */
     secondary?: NavbarBrandingProps | undefined;
 }
+/**
+ * Props shared between `NavbarProps` and `NavbarDrawerProps`.
+ */
 export interface NavbarSharedProps {
+    /**
+     * Branding and logo resources for the navbar.
+     */
     resources?: NavbarResourcesProps | undefined;
+    /** Action buttons rendered in the navbar and mobile drawer. */
     actionButtons?: NavbarActionButtonsProps | undefined;
-    /** Specifies if brand logos are visible */
+    /**
+     * Hides all brand logos from the navbar and drawer.
+     *
+     * @default false
+     */
     hideNavBranding?: boolean | undefined;
-    /** Hide the selected link indicator across the navbar */
+    /**
+     * Hides the active-item underline indicator across desktop and drawer views.
+     *
+     * @default false
+     */
     hideLinkIndicator?: boolean | undefined;
 }
+/**
+ * Identifies the user action that can dismiss the mobile navigation drawer.
+ *
+ * Pass one or more values to `drawerDismissalExclusions` on `NavbarProps` to
+ * prevent those actions from closing the drawer.
+ *
+ * - `"close-button-click"` — the drawer's close button or overlay click
+ * - `"item-click"` — clicking a nav item or action button
+ * - `"brand-click"` — clicking a brand logo
+ */
 export type DrawerDismissalMethod = "close-button-click" | "item-click" | "brand-click";
+/**
+ * Props for the internal mobile navigation drawer panel.
+ */
 export interface NavbarDrawerProps extends NavbarSharedProps {
+    /**
+     * Controls whether the drawer is visible.
+     */
     show: boolean;
     children: JSX.Element | JSX.Element[];
+    /**
+     * Called when the drawer requests to be closed via the close button or
+     * overlay click.
+     */
     onClose?: (() => void) | undefined;
-    /** Triggered when the brand icon is being clicked */
+    /**
+     * Called when a brand logo inside the drawer is clicked.
+     */
     onBrandClick?: ((event: React.MouseEvent<HTMLAnchorElement>, type: BrandType) => void) | undefined;
-    /** Custom aria-label for the mobile navigation drawer */
+    /**
+     * Accessible label announced for the mobile navigation drawer.
+     */
     drawerLabel?: string | undefined;
-    /** Ref to the mobile menu button for focus management */
+    /**
+     * Ref to the mobile menu button used to return focus when the drawer closes.
+     */
     mobileMenuRef?: React.RefObject<HTMLButtonElement> | undefined;
 }
+/**
+ * Identifies which brand slot was interacted with in brand-related callbacks.
+ */
 export type BrandType = "primary" | "secondary";
+/**
+ * Imperative methods exposed by the `Navbar` component via `ref`.
+ */
 export type NavbarDrawerApi = {
+    /**
+     * Programmatically closes the mobile navigation drawer with its exit
+     * animation.
+     */
     dismissDrawer: () => void;
 };
+/**
+ * Imperative handle returned by `Navbar` via `ref`.
+ *
+ * Extends `HTMLDivElement` with `NavbarDrawerApi`. Use the ref to dismiss the
+ * mobile drawer programmatically without needing to manage drawer state
+ * externally.
+ */
 export type NavbarDrawerHandle = HTMLDivElement & NavbarDrawerApi;
+/**
+ * Props for the `Navbar` component.
+ */
 export interface NavbarProps<T = void> extends NavbarSharedProps {
     items: NavItemsProps<T>;
     className?: string | undefined;
     id?: string | undefined;
     "data-testid"?: string | undefined;
+    /**
+     * The currently selected navigation item identifier.
+     * Must match the `id` of one of the rendered items.
+     */
     selectedId?: string | undefined;
-    /** Specifies if the Navbar should be compressed */
+    /**
+     * Reduces the height and logo size of the navbar.
+     *
+     * @default false
+     */
     compress?: boolean | undefined;
-    /** Specifies if Navbar should be fixed to top */
+    /**
+     * Pins the navbar to the top of the viewport while the page scrolls.
+     *
+     * @default true
+     */
     fixed?: boolean | undefined;
-    /** Specifies which methods will not dismiss the drawer */
+    /**
+     * Drawer dismissal methods that should be suppressed. The drawer will not
+     * close when the user performs any of the listed actions.
+     */
     drawerDismissalExclusions?: DrawerDismissalMethod[] | undefined;
+    /**
+     * Hides nav items and action buttons, leaving only the brand area visible.
+     *
+     * @default false
+     */
     hideNavElements?: boolean | undefined;
+    /**
+     * Called when a brand logo is clicked. `type` identifies which brand slot
+     * was activated.
+     */
     onBrandClick?: ((type: BrandType) => void) | undefined;
+    /**
+     * Called when a navigation item is activated from the desktop bar or the
+     * mobile drawer. The item's full props object is passed as the argument.
+     */
     onItemClick?: ((item: NavItemProps<T> | NavItemCommonProps<T>) => void) | undefined;
+    /**
+     * Called when an action button without its own `onClick` handler is
+     * activated. The button's full props object is passed as the argument.
+     */
     onActionButtonClick?: ((actionButton: NavbarButtonProps) => void) | undefined;
-    /** Specifies if masthead should be rendered */
+    /**
+     * Renders the `Masthead` (SGDS official government banner) above the navbar.
+     *
+     * @default true
+     */
     masthead?: boolean | undefined;
+    /**
+     * Controls how the navbar content fills its container. `"stretch"` expands
+     * to the full container width; `"default"` uses the standard content width.
+     *
+     * @default "default"
+     */
     layout?: "default" | "stretch" | undefined;
-    /** Custom aria-label for the main navigation header */
+    /**
+     * Accessible label announced for the main navigation header.
+     *
+     * @default "Main navigation menu"
+     */
     headerLabel?: string | undefined;
-    /** Custom aria-label for the mobile navigation drawer */
+    /**
+     * Accessible label announced for the mobile navigation drawer.
+     */
     drawerLabel?: string | undefined;
 }
+export {};

package/notification-banner/notification-banner-hoc.d.ts

@@ -1,3 +1,9 @@
 import React from "react";
 import type { NotificationBannerWithForwardedRefProps, NotificationContentAttributes } from "./types";
+/**
+ * Higher-order component that wraps `NotificationBanner` and renders its
+ * content from a structured data array.
+ * *
+ * @param data Content items to render inside the banner.
+ */
 export declare const withNotificationBanner: (data: NotificationContentAttributes[]) => (props: NotificationBannerWithForwardedRefProps & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null;

package/notification-banner/notification-banner-hoc.js.map

@@ -1 +1 @@
-{"version":3,"file":"notification-banner-hoc.js","sources":["../../src/notification-banner/notification-banner-hoc.tsx"],"sourcesContent":["import DOMPurify from \"dompurify\";\nimport React from \"react\";\n\nimport { NBComponent, NotificationBanner } from \"./notification-banner\";\nimport type {\n    ContentLinkAttributes,\n    ContentTextAttributes,\n    NotificationBannerWithForwardedRefProps,\n    NotificationContentAttributes,\n} from \"./types\";\n\nexport const withNotificationBanner = (\n    data: NotificationContentAttributes[]\n) => {\n    const ComponentToReturn = (\n        props: NotificationBannerWithForwardedRefProps,\n        ref: React.Ref<HTMLDivElement>\n    ) => {\n        const renderContent = () => {\n            if (data.length > 0) {\n                return data.map((attribute, index) => {\n                    if (attribute.type === \"text\") {\n                        const otherAttributes =\n                            attribute.otherAttributes as ContentTextAttributes;\n\n                        const sanitizedContent = DOMPurify.sanitize(\n                            attribute.content\n                        );\n                        return (\n                            <p\n                                key={index}\n                                {...otherAttributes}\n                                dangerouslySetInnerHTML={{\n                                    __html: sanitizedContent,\n                                }}\n                            />\n                        );\n                    } else {\n                        const otherAttributes =\n                            attribute.otherAttributes as ContentLinkAttributes;\n                        return (\n                            <NotificationBanner.Link\n                                key={index}\n                                {...otherAttributes}\n                            >\n                                {attribute.content}\n                            </NotificationBanner.Link>\n                        );\n                    }\n                });\n            }\n\n            console.error(\"[NotificationBannerHOC] Empty data passed\");\n            return null;\n        };\n\n        return (\n            <NBComponent forwardedRef={ref} {...props}>\n                {renderContent()}\n            </NBComponent>\n        );\n    };\n\n    return React.forwardRef(ComponentToReturn);\n};\n"],"names":["withNotificationBanner","data","React","forwardRef","props","ref","_jsx","NBComponent","Object","assign","forwardedRef","children","length","map","attribute","index","type","otherAttributes","sanitizedContent","DOMPurify","sanitize","content","dangerouslySetInnerHTML","__html","NotificationBanner","Link","console","error"],"mappings":"mMAWO,MAAMA,EACTC,GAmDOC,EAAMC,YAjDa,CACtBC,EACAC,IAyCIC,EAACC,EAAWC,OAAAC,OAAA,CAACC,aAAcL,GAASD,EAAK,CAAAO,SAtCrCV,EAAKW,OAAS,EACPX,EAAKY,KAAI,CAACC,EAAWC,KACxB,GAAuB,SAAnBD,EAAUE,KAAiB,CAC3B,MAAMC,EACFH,EAAUG,gBAERC,EAAmBC,EAAUC,SAC/BN,EAAUO,SAEd,OACIf,EAAA,IAAAE,OAAAC,OAAA,GAEQQ,EAAe,CACnBK,wBAAyB,CACrBC,OAAQL,KAHPH,EAOjB,CAAO,CACH,MAAME,EACFH,EAAUG,gBACd,OACIX,EAACkB,EAAmBC,KAAIjB,OAAAC,OAAA,CAAA,EAEhBQ,EAAe,CAAAN,SAElBG,EAAUO,UAHNN,EAMjB,MAIRW,QAAQC,MAAM,6CACP"}
+{"version":3,"file":"notification-banner-hoc.js","sources":["../../src/notification-banner/notification-banner-hoc.tsx"],"sourcesContent":["import DOMPurify from \"dompurify\";\nimport React from \"react\";\n\nimport { NBComponent, NotificationBanner } from \"./notification-banner\";\nimport type {\n    ContentLinkAttributes,\n    ContentTextAttributes,\n    NotificationBannerWithForwardedRefProps,\n    NotificationContentAttributes,\n} from \"./types\";\n\n/**\n * Higher-order component that wraps `NotificationBanner` and renders its\n * content from a structured data array.\n * *\n * @param data Content items to render inside the banner.\n */\nexport const withNotificationBanner = (\n    data: NotificationContentAttributes[]\n) => {\n    const ComponentToReturn = (\n        props: NotificationBannerWithForwardedRefProps,\n        ref: React.Ref<HTMLDivElement>\n    ) => {\n        const renderContent = () => {\n            if (data.length > 0) {\n                return data.map((attribute, index) => {\n                    if (attribute.type === \"text\") {\n                        const otherAttributes =\n                            attribute.otherAttributes as ContentTextAttributes;\n\n                        const sanitizedContent = DOMPurify.sanitize(\n                            attribute.content\n                        );\n                        return (\n                            <p\n                                key={index}\n                                {...otherAttributes}\n                                dangerouslySetInnerHTML={{\n                                    __html: sanitizedContent,\n                                }}\n                            />\n                        );\n                    } else {\n                        const otherAttributes =\n                            attribute.otherAttributes as ContentLinkAttributes;\n                        return (\n                            <NotificationBanner.Link\n                                key={index}\n                                {...otherAttributes}\n                            >\n                                {attribute.content}\n                            </NotificationBanner.Link>\n                        );\n                    }\n                });\n            }\n\n            console.error(\"[NotificationBannerHOC] Empty data passed\");\n            return null;\n        };\n\n        return (\n            <NBComponent forwardedRef={ref} {...props}>\n                {renderContent()}\n            </NBComponent>\n        );\n    };\n\n    return React.forwardRef(ComponentToReturn);\n};\n"],"names":["withNotificationBanner","data","React","forwardRef","props","ref","_jsx","NBComponent","Object","assign","forwardedRef","children","length","map","attribute","index","type","otherAttributes","sanitizedContent","DOMPurify","sanitize","content","dangerouslySetInnerHTML","__html","NotificationBanner","Link","console","error"],"mappings":"mMAiBO,MAAMA,EACTC,GAmDOC,EAAMC,YAjDa,CACtBC,EACAC,IAyCIC,EAACC,EAAWC,OAAAC,OAAA,CAACC,aAAcL,GAASD,EAAK,CAAAO,SAtCrCV,EAAKW,OAAS,EACPX,EAAKY,KAAI,CAACC,EAAWC,KACxB,GAAuB,SAAnBD,EAAUE,KAAiB,CAC3B,MAAMC,EACFH,EAAUG,gBAERC,EAAmBC,EAAUC,SAC/BN,EAAUO,SAEd,OACIf,EAAA,IAAAE,OAAAC,OAAA,GAEQQ,EAAe,CACnBK,wBAAyB,CACrBC,OAAQL,KAHPH,EAOjB,CAAO,CACH,MAAME,EACFH,EAAUG,gBACd,OACIX,EAACkB,EAAmBC,KAAIjB,OAAAC,OAAA,CAAA,EAEhBQ,EAAe,CAAAN,SAElBG,EAAUO,UAHNN,EAMjB,MAIRW,QAAQC,MAAM,6CACP"}

package/notification-banner/notification-banner.d.ts

@@ -1,8 +1,14 @@
 import React from "react";
 import type { NotificationBannerProps, NotificationBannerWithForwardedRefProps } from "./types";
-export declare const NBComponent: ({ children, visible, dismissible, sticky, onDismiss, id, forwardedRef, maxCollapsedHeight, onClick, actionButton, icon, ...otherProps }: NotificationBannerWithForwardedRefProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const NBComponent: ({ children, visible, dismissible, sticky, onDismiss, id, forwardedRef, maxCollapsedHeight, onClick, actionButton, icon, className, ...otherProps }: NotificationBannerWithForwardedRefProps) => import("react/jsx-runtime").JSX.Element | null;
+/**
+ * A full-width informational banner that sits at the top of the page.
+ *
+ * Use `NotificationBanner` to surface important or persistent messages that
+ * should remain visible until the user dismisses them.
+ * @keywords alert, announcement, banner, message
+ */
 export declare const NotificationBanner: ((props: NotificationBannerProps & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null) & {
-    Link: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("..").TypographyLinkProps & {
-        ref?: React.RefObject<HTMLAnchorElement> | undefined;
-    }, never>> & string;
+    /** Renders an inline link styled for use inside a `NotificationBanner`. */
+    Link: (props: import("..").TypographyLinkProps & React.RefAttributes<HTMLAnchorElement>) => React.ReactElement | null;
 };

package/notification-banner/notification-banner.js

@@ -1,2 +1,2 @@
-import{__rest as i}from"../_virtual/_tslib.js";import{jsx as t,jsxs as e}from"react/jsx-runtime";import{CrossIcon as n}from"@lifesg/react-icons";import o,{useState as r,useEffect as s}from"react";import{useResizeDetector as a}from"../external/react-resize-detector/build/index.esm.js";import{ContentLink as l,Wrapper as c,Container as d,IconContainer as b,ContentContainer as m,Content as f,ContentWrapper as h,ContentText as p,StyledIconButton as u,AccessibleBannerButton as g,ActionButton as k}from"./notification-banner.styles.js";const C=o=>{var{children:l,visible:C=!0,dismissible:j=!0,sticky:y=!0,onDismiss:v,id:w,forwardedRef:O,maxCollapsedHeight:$,onClick:H,actionButton:R,icon:B}=o,D=i(o,["children","visible","dismissible","sticky","onDismiss","id","forwardedRef","maxCollapsedHeight","onClick","actionButton","icon"]);const N=D["data-testid"],[P,_]=r(C),{height:z=0,ref:I}=a();s((()=>{_(C)}),[C]);const L=i=>{i.stopPropagation(),_(!1),j&&v&&v()},q=i=>{(null==R?void 0:R.onClick)&&(i.stopPropagation(),R.onClick(i))};if(!P)return null;return e(c,Object.assign({ref:O,$sticky:y,$clickable:!!H,onClick:H,role:"region"},D,{children:[e(d,{id:x("container",w),children:[B&&t(b,{"aria-hidden":!0,children:B}),t(m,{children:t(f,{"data-testid":x("text-content",N),children:e(h,{children:[t(p,{$maxCollapsedHeight:$&&z>$?$:void 0,children:t("div",{ref:I,children:l})}),R?t(k,Object.assign({id:x("action-button",w),"data-testid":x("action-button",N),type:"button"},R,{onClick:q,children:R.children})):null]})})}),j&&t(u,{tabIndex:0,onClick:L,id:x("dismiss-button",w),"data-testid":x("dismiss-button",N),focusOutline:"browser",focusHighlight:!1,type:"button","aria-label":"close",children:t(n,{"aria-hidden":!0})})]}),H&&t(g,{"aria-label":"Clickable banner",type:"button"})]}))},x=(i,t="wrapper")=>`${t}-${i}`,j=o.forwardRef(((i,e)=>t(C,Object.assign({},i,{forwardedRef:e}))));j.displayName="NotificationBanner";const y=Object.assign(j,{Link:l});export{C as NBComponent,y as NotificationBanner};
+import{__rest as e}from"../_virtual/_tslib.js";import{jsx as i,jsxs as t}from"react/jsx-runtime";import{CrossIcon as s}from"@lifesg/react-icons";import o from"clsx";import r,{useState as n,useRef as a,useEffect as l}from"react";import{useResizeDetector as c}from"../external/react-resize-detector/build/index.esm.js";import{Layout as d}from"../layout/index.js";import{VisuallyHidden as m}from"../shared/accessibility/index.js";import{ClickableIcon as p}from"../shared/clickable-icon/clickable-icon.js";import"../theme/theme-provider/index.js";import{formatUnitValue as f}from"../theme/utils/css-variable.js";import"../theme/theme-provider/context.js";import"../theme/tokens/border.js";import"../theme/tokens/colour.js";import"../theme/tokens/font.js";import"../theme/tokens/media-query.js";import{useApplyStyle as h}from"../theme/utils/use-apply-styles.js";import"../theme/utils/use-media-query.js";import{Typography as u}from"../typography/index.js";import{contentLink as b,tokens as j,wrapper as k,wrapperSticky as x,wrapperClickable as g,iconContainer as v,contentContainer as y,content as N,contentWrapper as C,contentText as w,contentTextCollapsed as O,dismissButton as B,actionButton as R}from"./notification-banner.styles.js";const H=r=>{var{children:u,visible:b=!0,dismissible:H=!0,sticky:L=!0,onDismiss:D,id:P,forwardedRef:$,maxCollapsedHeight:_,onClick:z,actionButton:I,icon:T,className:A}=r,E=e(r,["children","visible","dismissible","sticky","onDismiss","id","forwardedRef","maxCollapsedHeight","onClick","actionButton","icon","className"]);const F=E["data-testid"],[G,J]=n(b),{height:K=0,ref:M}=c(),Q=a(null),S=_&&K>_;h(Q,{[j.contentText.maxCollapsedHeight]:S?f(_,"px"):void 0}),l((()=>{J(b)}),[b]);const U=e=>{e.stopPropagation(),J(!1),H&&D&&D()},V=e=>{(null==I?void 0:I.onClick)&&(e.stopPropagation(),I.onClick(e))};if(!G)return null;return t("div",Object.assign({ref:$,className:o(k,L&&x,!!z&&g,A),onClick:z,role:"region"},E,{children:[t(d.Content,{id:q("container",P),children:[T&&i("div",{className:v,"aria-hidden":!0,children:T}),i("div",{className:y,children:i("div",{className:N,"data-testid":q("text-content",F),children:t("div",{className:C,children:[i("div",{ref:Q,className:o(w,S&&O),children:i("div",{ref:M,children:u})}),I?i("button",Object.assign({className:R,id:q("action-button",P),"data-testid":q("action-button",F),type:"button"},I,{onClick:V,children:I.children})):null]})})}),H&&i(p,{className:B,tabIndex:0,onClick:U,id:q("dismiss-button",P),"data-testid":q("dismiss-button",F),focusOutline:"browser",focusHighlight:!1,type:"button","aria-label":"close",children:i(s,{"aria-hidden":!0})})]}),z&&i(m,{children:i("button",{"aria-label":"Clickable banner",type:"button"})})]}))},L=r.forwardRef((function(e,t){return i(u.LinkBL,Object.assign({ref:t,className:o(b,e.className)},e))}));L.displayName="NotificationBanner.Link";const q=(e,i="wrapper")=>`${i}-${e}`,D=r.forwardRef(((e,t)=>i(H,Object.assign({},e,{forwardedRef:t}))));D.displayName="NotificationBanner";const P=Object.assign(D,{Link:L});export{H as NBComponent,P as NotificationBanner};
 //# sourceMappingURL=notification-banner.js.map

package/notification-banner/notification-banner.js.map

@@ -1 +1 @@
-{"version":3,"file":"notification-banner.js","sources":["../../src/notification-banner/notification-banner.tsx"],"sourcesContent":["import { CrossIcon } from \"@lifesg/react-icons\";\nimport type { NamedExoticComponent } from \"react\";\nimport React, { useEffect, useState } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport {\n    AccessibleBannerButton,\n    ActionButton,\n    Container,\n    Content,\n    ContentContainer,\n    ContentLink as NBLink,\n    ContentText,\n    ContentWrapper,\n    IconContainer,\n    StyledIconButton,\n    Wrapper,\n} from \"./notification-banner.styles\";\nimport type {\n    NotificationBannerProps,\n    NotificationBannerWithForwardedRefProps,\n} from \"./types\";\n\nexport const NBComponent = ({\n    children,\n    visible = true,\n    dismissible = true,\n    sticky = true,\n    onDismiss,\n    id,\n    forwardedRef,\n    maxCollapsedHeight,\n    onClick,\n    actionButton,\n    icon,\n    ...otherProps\n}: NotificationBannerWithForwardedRefProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const testId = otherProps[\"data-testid\"];\n\n    const [isVisible, setVisible] = useState<boolean>(visible);\n    const { height: contentHeight = 0, ref: contentRef } = useResizeDetector();\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        setVisible(visible);\n    }, [visible]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleDismiss = (event: React.MouseEvent<HTMLButtonElement>) => {\n        event.stopPropagation();\n        setVisible(false);\n\n        if (dismissible && onDismiss) onDismiss();\n    };\n\n    const handleActionButtonOnClick = (\n        event: React.MouseEvent<HTMLButtonElement>\n    ) => {\n        if (!actionButton?.onClick) {\n            // let it bubble\n            return;\n        }\n        event.stopPropagation();\n        actionButton.onClick(event);\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    if (!isVisible) return null;\n\n    const renderDismissButton = () => (\n        <StyledIconButton\n            tabIndex={0}\n            onClick={handleDismiss}\n            id={formatId(\"dismiss-button\", id)}\n            data-testid={formatId(\"dismiss-button\", testId)}\n            focusOutline=\"browser\"\n            focusHighlight={false}\n            type=\"button\"\n            aria-label=\"close\"\n        >\n            <CrossIcon aria-hidden />\n        </StyledIconButton>\n    );\n\n    const renderActionButton = () => {\n        if (!actionButton) return null;\n\n        return (\n            <ActionButton\n                id={formatId(\"action-button\", id)}\n                data-testid={formatId(\"action-button\", testId)}\n                type=\"button\"\n                {...actionButton}\n                onClick={handleActionButtonOnClick}\n            >\n                {actionButton.children}\n            </ActionButton>\n        );\n    };\n\n    const renderContent = () => (\n        <Content data-testid={formatId(\"text-content\", testId)}>\n            <ContentWrapper>\n                <ContentText\n                    $maxCollapsedHeight={\n                        maxCollapsedHeight && contentHeight > maxCollapsedHeight\n                            ? maxCollapsedHeight\n                            : undefined\n                    }\n                >\n                    <div ref={contentRef}>{children}</div>\n                </ContentText>\n                {renderActionButton()}\n            </ContentWrapper>\n        </Content>\n    );\n\n    const renderAccessibleBannerButton = () => (\n        <AccessibleBannerButton aria-label={\"Clickable banner\"} type=\"button\" />\n    );\n\n    return (\n        <Wrapper\n            ref={forwardedRef}\n            $sticky={sticky}\n            $clickable={!!onClick}\n            onClick={onClick}\n            role=\"region\"\n            {...otherProps}\n        >\n            <Container id={formatId(\"container\", id)}>\n                {icon && <IconContainer aria-hidden>{icon}</IconContainer>}\n                <ContentContainer>{renderContent()}</ContentContainer>\n                {dismissible && renderDismissButton()}\n            </Container>\n            {onClick && renderAccessibleBannerButton()}\n        </Wrapper>\n    );\n};\n\n/**\n * Intermediate component to handle passing the ref as a prop\n */\nconst NBWithRef = (\n    props: NotificationBannerProps,\n    ref: React.Ref<HTMLDivElement>\n) => {\n    return <NBComponent {...props} forwardedRef={ref} />;\n};\n\n// =============================================================================\n// HELPER FUNCTIONS\n// =============================================================================\nconst formatId = (componentName: string, id = \"wrapper\"): string => {\n    return `${id}-${componentName}`;\n};\n\n// =============================================================================\n// EXPORTABLE\n// =============================================================================\nconst Base = React.forwardRef(NBWithRef);\n(Base as NamedExoticComponent).displayName = \"NotificationBanner\";\nexport const NotificationBanner = Object.assign(Base, {\n    Link: NBLink,\n});\n"],"names":["NBComponent","_a","children","visible","dismissible","sticky","onDismiss","id","forwardedRef","maxCollapsedHeight","onClick","actionButton","icon","otherProps","__rest","testId","isVisible","setVisible","useState","height","contentHeight","ref","contentRef","useResizeDetector","useEffect","handleDismiss","event","stopPropagation","handleActionButtonOnClick","_jsxs","Wrapper","Object","assign","$sticky","$clickable","role","Container","formatId","_jsx","IconContainer","ContentContainer","Content","ContentWrapper","ContentText","$maxCollapsedHeight","undefined","ActionButton","type","StyledIconButton","tabIndex","focusOutline","focusHighlight","CrossIcon","AccessibleBannerButton","componentName","Base","React","forwardRef","props","displayName","NotificationBanner","Link","NBLink"],"mappings":"shBAuBO,MAAMA,EAAeC,IAAA,IAAAC,SACxBA,EAAQC,QACRA,GAAU,EAAIC,YACdA,GAAc,EAAIC,OAClBA,GAAS,EAAIC,UACbA,EAASC,GACTA,EAAEC,aACFA,EAAYC,mBACZA,EAAkBC,QAClBA,EAAOC,aACPA,EAAYC,KACZA,GAAIX,EACDY,EAAUC,EAAAb,EAZW,oIAiBxB,MAAMc,EAASF,EAAW,gBAEnBG,EAAWC,GAAcC,EAAkBf,IAC1CgB,OAAQC,EAAgB,EAAGC,IAAKC,GAAeC,IAKvDC,GAAU,KACNP,EAAWd,EAAQ,GACpB,CAACA,IAKJ,MAAMsB,EAAiBC,IACnBA,EAAMC,kBACNV,GAAW,GAEPb,GAAeE,GAAWA,GAAW,EAGvCsB,EACFF,KAEKf,aAAY,EAAZA,EAAcD,WAInBgB,EAAMC,kBACNhB,EAAaD,QAAQgB,GAAM,EAM/B,IAAKV,EAAW,OAAO,KAsDvB,OACIa,EAACC,EAAOC,OAAAC,OAAA,CACJX,IAAKb,EAAYyB,QACR5B,EAAM6B,aACDxB,EACdA,QAASA,EACTyB,KAAK,UACDtB,EAAU,CAAAX,SAAA,CAEd2B,EAACO,EAAS,CAAC7B,GAAI8B,EAAS,YAAa9B,GAAGL,SAAA,CACnCU,GAAQ0B,EAACC,EAAa,CAAA,eAAA,EAAArC,SAAcU,IACrC0B,EAACE,EAAgB,CAAAtC,SA/BzBoC,EAACG,EAAO,CAAA,cAAcJ,EAAS,eAAgBtB,GAAOb,SAClD2B,EAACa,EAAc,CAAAxC,SAAA,CACXoC,EAACK,EAAW,CAAAC,oBAEJnC,GAAsBW,EAAgBX,EAChCA,OACAoC,EAAS3C,SAGnBoC,EAAA,MAAA,CAAKjB,IAAKC,EAAUpB,SAAGA,MAzB9BS,EAGD2B,EAACQ,EAAYf,OAAAC,OAAA,CACTzB,GAAI8B,EAAS,gBAAiB9B,GAAG,cACpB8B,EAAS,gBAAiBtB,GACvCgC,KAAK,UACDpC,EAAY,CAChBD,QAASkB,WAERjB,EAAaT,YAVI,YAgDjBE,GA/DTkC,EAACU,EAAgB,CACbC,SAAU,EACVvC,QAASe,EACTlB,GAAI8B,EAAS,iBAAkB9B,GAAG,cACrB8B,EAAS,iBAAkBtB,GACxCmC,aAAa,UACbC,gBAAgB,EAChBJ,KAAK,SAAQ,aACF,QAAO7C,SAElBoC,EAACc,EAAS,CAAA,eAAA,SAuDT1C,GAjBL4B,EAACe,EAAsB,CAAA,aAAa,mBAAoBN,KAAK,cAkBnD,EAiBZV,EAAW,CAACiB,EAAuB/C,EAAK,YACnC,GAAGA,KAAM+C,IAMdC,EAAOC,EAAMC,YAjBD,CACdC,EACArC,IAEOiB,EAACtC,EAAW+B,OAAAC,OAAA,GAAK0B,GAAOlD,aAAca,OAchDkC,EAA8BI,YAAc,2BAChCC,EAAqB7B,OAAOC,OAAOuB,EAAM,CAClDM,KAAMC"}
+{"version":3,"file":"notification-banner.js","sources":["../../src/notification-banner/notification-banner.tsx"],"sourcesContent":["import { CrossIcon } from \"@lifesg/react-icons\";\nimport clsx from \"clsx\";\nimport type { NamedExoticComponent } from \"react\";\nimport React, { useEffect, useRef, useState } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { Layout } from \"../layout\";\nimport { VisuallyHidden } from \"../shared/accessibility\";\nimport { ClickableIcon } from \"../shared/clickable-icon\";\nimport { formatUnitValue, useApplyStyle } from \"../theme\";\nimport { Typography } from \"../typography\";\nimport * as styles from \"./notification-banner.styles\";\nimport type {\n    NotificationBannerProps,\n    NotificationBannerWithForwardedRefProps,\n} from \"./types\";\n\nexport const NBComponent = ({\n    children,\n    visible = true,\n    dismissible = true,\n    sticky = true,\n    onDismiss,\n    id,\n    forwardedRef,\n    maxCollapsedHeight,\n    onClick,\n    actionButton,\n    icon,\n    className,\n    ...otherProps\n}: NotificationBannerWithForwardedRefProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const testId = otherProps[\"data-testid\"];\n\n    const [isVisible, setVisible] = useState<boolean>(visible);\n    const { height: contentHeight = 0, ref: contentRef } = useResizeDetector();\n    const contentTextRef = useRef<HTMLDivElement>(null);\n\n    const isCollapsed =\n        maxCollapsedHeight && contentHeight > maxCollapsedHeight;\n\n    useApplyStyle(contentTextRef, {\n        [styles.tokens.contentText.maxCollapsedHeight]: isCollapsed\n            ? formatUnitValue(maxCollapsedHeight, \"px\")\n            : undefined,\n    });\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        setVisible(visible);\n    }, [visible]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleDismiss = (event: React.MouseEvent<HTMLButtonElement>) => {\n        event.stopPropagation();\n        setVisible(false);\n\n        if (dismissible && onDismiss) onDismiss();\n    };\n\n    const handleActionButtonOnClick = (\n        event: React.MouseEvent<HTMLButtonElement>\n    ) => {\n        if (!actionButton?.onClick) {\n            // let it bubble\n            return;\n        }\n        event.stopPropagation();\n        actionButton.onClick(event);\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    if (!isVisible) return null;\n\n    const renderDismissButton = () => (\n        <ClickableIcon\n            className={styles.dismissButton}\n            tabIndex={0}\n            onClick={handleDismiss}\n            id={formatId(\"dismiss-button\", id)}\n            data-testid={formatId(\"dismiss-button\", testId)}\n            focusOutline=\"browser\"\n            focusHighlight={false}\n            type=\"button\"\n            aria-label=\"close\"\n        >\n            <CrossIcon aria-hidden />\n        </ClickableIcon>\n    );\n\n    const renderActionButton = () => {\n        if (!actionButton) return null;\n\n        return (\n            <button\n                className={styles.actionButton}\n                id={formatId(\"action-button\", id)}\n                data-testid={formatId(\"action-button\", testId)}\n                type=\"button\"\n                {...actionButton}\n                onClick={handleActionButtonOnClick}\n            >\n                {actionButton.children}\n            </button>\n        );\n    };\n\n    const renderContent = () => (\n        <div\n            className={styles.content}\n            data-testid={formatId(\"text-content\", testId)}\n        >\n            <div className={styles.contentWrapper}>\n                <div\n                    ref={contentTextRef}\n                    className={clsx(\n                        styles.contentText,\n                        isCollapsed && styles.contentTextCollapsed\n                    )}\n                >\n                    <div ref={contentRef}>{children}</div>\n                </div>\n                {renderActionButton()}\n            </div>\n        </div>\n    );\n\n    const renderAccessibleBannerButton = () => (\n        <VisuallyHidden>\n            <button aria-label={\"Clickable banner\"} type=\"button\" />\n        </VisuallyHidden>\n    );\n\n    return (\n        <div\n            ref={forwardedRef}\n            className={clsx(\n                styles.wrapper,\n                sticky && styles.wrapperSticky,\n                !!onClick && styles.wrapperClickable,\n                className\n            )}\n            onClick={onClick}\n            role=\"region\"\n            {...otherProps}\n        >\n            <Layout.Content id={formatId(\"container\", id)}>\n                {icon && (\n                    <div className={styles.iconContainer} aria-hidden>\n                        {icon}\n                    </div>\n                )}\n                <div className={styles.contentContainer}>{renderContent()}</div>\n                {dismissible && renderDismissButton()}\n            </Layout.Content>\n            {onClick && renderAccessibleBannerButton()}\n        </div>\n    );\n};\n\n/**\n * Intermediate component to handle passing the ref as a prop\n */\nconst NBWithRef = (\n    props: NotificationBannerProps,\n    ref: React.Ref<HTMLDivElement>\n) => {\n    return <NBComponent {...props} forwardedRef={ref} />;\n};\n\nconst NBLink = React.forwardRef<\n    HTMLAnchorElement,\n    React.ComponentProps<typeof Typography.LinkBL>\n>(function NotificationBannerLink(props, ref) {\n    return (\n        <Typography.LinkBL\n            ref={ref}\n            className={clsx(styles.contentLink, props.className)}\n            {...props}\n        />\n    );\n});\n(NBLink as NamedExoticComponent).displayName = \"NotificationBanner.Link\";\n\n// =============================================================================\n// HELPER FUNCTIONS\n// =============================================================================\nconst formatId = (componentName: string, id = \"wrapper\"): string => {\n    return `${id}-${componentName}`;\n};\n\n// =============================================================================\n// EXPORTABLE\n// =============================================================================\nconst Base = React.forwardRef(NBWithRef);\n(Base as NamedExoticComponent).displayName = \"NotificationBanner\";\n\n// @catalog\n/**\n * A full-width informational banner that sits at the top of the page.\n *\n * Use `NotificationBanner` to surface important or persistent messages that\n * should remain visible until the user dismisses them.\n * @keywords alert, announcement, banner, message\n */\nexport const NotificationBanner = Object.assign(Base, {\n    /** Renders an inline link styled for use inside a `NotificationBanner`. */\n    Link: NBLink,\n});\n"],"names":["NBComponent","_a","children","visible","dismissible","sticky","onDismiss","id","forwardedRef","maxCollapsedHeight","onClick","actionButton","icon","className","otherProps","__rest","testId","isVisible","setVisible","useState","height","contentHeight","ref","contentRef","useResizeDetector","contentTextRef","useRef","isCollapsed","useApplyStyle","styles.tokens","contentText","formatUnitValue","undefined","useEffect","handleDismiss","event","stopPropagation","handleActionButtonOnClick","_jsxs","clsx","styles.wrapper","styles.wrapperSticky","styles.wrapperClickable","role","Layout","Content","formatId","_jsx","styles.iconContainer","styles.contentContainer","styles.content","styles.contentWrapper","styles.contentText","styles.contentTextCollapsed","Object","assign","styles.actionButton","type","ClickableIcon","styles.dismissButton","tabIndex","focusOutline","focusHighlight","CrossIcon","VisuallyHidden","NBLink","React","forwardRef","props","Typography","LinkBL","styles.contentLink","displayName","componentName","Base","NotificationBanner","Link"],"mappings":"itCAiBO,MAAMA,EAAeC,IAAA,IAAAC,SACxBA,EAAQC,QACRA,GAAU,EAAIC,YACdA,GAAc,EAAIC,OAClBA,GAAS,EAAIC,UACbA,EAASC,GACTA,EAAEC,aACFA,EAAYC,mBACZA,EAAkBC,QAClBA,EAAOC,aACPA,EAAYC,KACZA,EAAIC,UACJA,GAASZ,EACNa,EAAUC,EAAAd,EAbW,gJAkBxB,MAAMe,EAASF,EAAW,gBAEnBG,EAAWC,GAAcC,EAAkBhB,IAC1CiB,OAAQC,EAAgB,EAAGC,IAAKC,GAAeC,IACjDC,EAAiBC,EAAuB,MAExCC,EACFlB,GAAsBY,EAAgBZ,EAE1CmB,EAAcH,EAAgB,CAC1B,CAACI,EAAcC,YAAYrB,oBAAqBkB,EAC1CI,EAAgBtB,EAAoB,WACpCuB,IAMVC,GAAU,KACNf,EAAWf,EAAQ,GACpB,CAACA,IAKJ,MAAM+B,EAAiBC,IACnBA,EAAMC,kBACNlB,GAAW,GAEPd,GAAeE,GAAWA,GAAW,EAGvC+B,EACFF,KAEKxB,aAAY,EAAZA,EAAcD,WAInByB,EAAMC,kBACNzB,EAAaD,QAAQyB,GAAM,EAM/B,IAAKlB,EAAW,OAAO,KA6DvB,OACIqB,uBACIhB,IAAKd,EACLK,UAAW0B,EACPC,EACAnC,GAAUoC,IACR/B,GAAWgC,EACb7B,GAEJH,QAASA,EACTiC,KAAK,UACD7B,aAEJwB,EAACM,EAAOC,QAAO,CAACtC,GAAIuC,EAAS,YAAavC,GAAGL,SAAA,CACxCU,GACGmC,SAAKlC,UAAWmC,4BACXpC,IAGTmC,EAAA,MAAA,CAAKlC,UAAWoC,EAAuB/C,SA5C/C6C,EAAA,MAAA,CACIlC,UAAWqC,EAAc,cACZJ,EAAS,eAAgB9B,GAAOd,SAE7CoC,EAAA,MAAA,CAAKzB,UAAWsC,EAAqBjD,SAAA,CACjC6C,EAAA,MAAA,CACIzB,IAAKG,EACLZ,UAAW0B,EACPa,EACAzB,GAAe0B,GAClBnD,SAED6C,EAAA,MAAA,CAAKzB,IAAKC,EAAUrB,SAAGA,MA7B9BS,EAGDoC,EAAA,SAAAO,OAAAC,OAAA,CACI1C,UAAW2C,EACXjD,GAAIuC,EAAS,gBAAiBvC,iBACjBuC,EAAS,gBAAiB9B,GACvCyC,KAAK,UACD9C,EAAY,CAChBD,QAAS2B,EAAyBnC,SAEjCS,EAAaT,YAXI,YA8DjBE,GA9ET2C,EAACW,EAAa,CACV7C,UAAW8C,EACXC,SAAU,EACVlD,QAASwB,EACT3B,GAAIuC,EAAS,iBAAkBvC,GAAG,cACrBuC,EAAS,iBAAkB9B,GACxC6C,aAAa,UACbC,gBAAgB,EAChBL,KAAK,SAAQ,aACF,QAAOvD,SAElB6C,EAACgB,EAAS,CAAA,eAAA,SAqETrD,GA3BLqC,EAACiB,EAAc,CAAA9D,SACX6C,EAAA,SAAA,CAAA,aAAoB,mBAAoBU,KAAK,gBA2B3C,EAcRQ,EAASC,EAAMC,YAGnB,SAAgCC,EAAO9C,GACrC,OACIyB,EAACsB,EAAWC,OAAMhB,OAAAC,OAAA,CACdjC,IAAKA,EACLT,UAAW0B,EAAKgC,EAAoBH,EAAMvD,YACtCuD,GAGhB,IACCH,EAAgCO,YAAc,0BAK/C,MAAM1B,EAAW,CAAC2B,EAAuBlE,EAAK,YACnC,GAAGA,KAAMkE,IAMdC,EAAOR,EAAMC,YA/BD,CACdC,EACA9C,IAEOyB,EAAC/C,EAAWsD,OAAAC,OAAA,GAAKa,GAAO5D,aAAcc,OA4BhDoD,EAA8BF,YAAc,2BAUhCG,EAAqBrB,OAAOC,OAAOmB,EAAM,CAElDE,KAAMX"}

package/notification-banner/notification-banner.styles.d.ts

@@ -1,23 +1,17 @@
-interface WrapperStyleProps {
-    $sticky: boolean;
-    $clickable: boolean;
-}
-interface ContentStyleProps {
-    $maxCollapsedHeight?: number;
-}
-export declare const Wrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, WrapperStyleProps>> & string;
-export declare const Container: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("..").ContentProps & import("react").RefAttributes<HTMLDivElement>, never>> & string & Omit<(props: import("..").ContentProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null, keyof import("react").Component<any, {}, any>>;
-export declare const ContentContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const Content: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ContentStyleProps>> & string;
-export declare const ContentWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const ContentText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
-    $maxCollapsedHeight?: number;
-}>> & string;
-export declare const ContentLink: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("..").TypographyLinkProps & {
-    ref?: import("react").RefObject<HTMLAnchorElement> | undefined;
-}, never>> & string;
-export declare const StyledIconButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("../shared/clickable-icon").ClickableIconProps & import("react").RefAttributes<HTMLButtonElement>, never>> & string & Omit<(props: import("../shared/clickable-icon").ClickableIconProps & import("react").RefAttributes<HTMLButtonElement>) => React.ReactElement | null, keyof import("react").Component<any, {}, any>>;
-export declare const ActionButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;
-export declare const AccessibleBannerButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;
-export declare const IconContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export {};
+export declare const tokens: {
+    contentText: {
+        maxCollapsedHeight: string;
+    };
+};
+export declare const wrapper: import("@linaria/core").LinariaClassName;
+export declare const wrapperSticky: import("@linaria/core").LinariaClassName;
+export declare const wrapperClickable: import("@linaria/core").LinariaClassName;
+export declare const contentContainer: import("@linaria/core").LinariaClassName;
+export declare const content: import("@linaria/core").LinariaClassName;
+export declare const contentWrapper: import("@linaria/core").LinariaClassName;
+export declare const contentText: import("@linaria/core").LinariaClassName;
+export declare const contentTextCollapsed: import("@linaria/core").LinariaClassName;
+export declare const contentLink: import("@linaria/core").LinariaClassName;
+export declare const dismissButton: import("@linaria/core").LinariaClassName;
+export declare const actionButton: import("@linaria/core").LinariaClassName;
+export declare const iconContainer: import("@linaria/core").LinariaClassName;

package/notification-banner/notification-banner.styles.js

@@ -1,112 +1,2 @@
-import e,{css as i}from"styled-components";import{Layout as r}from"../layout/index.js";import{ClickableIcon as o}from"../shared/clickable-icon/clickable-icon.js";import{Typography as t}from"../typography/index.js";import{V3_Colour as n,V3_Motion as a,V3_Radius as l,V3_Spacing as s,V3_Font as d}from"../v3_theme/index.js";const p=i`
-    color: ${n["hyperlink-inverse"]};
-
-    svg {
-        color: ${n["icon-primary-inverse"]};
-    }
-
-    &:hover,
-    &:active,
-    &:visited,
-    &:focus {
-        color: ${n["hyperlink-inverse"]};
-        svg {
-            color: ${n["icon-primary-inverse"]};
-        }
-    }
-`,c=e.div`
-    position: ${e=>e.$sticky?"sticky":"relative"};
-    left: 0;
-    top: 0;
-    width: 100%;
-    transition: all ${a["duration-800"]} ${a["ease-default"]};
-    background: ${n["bg-inverse-subtle"]};
-    border-radius: ${l.none};
-    z-index: 25;
-    cursor: ${e=>e.$clickable?"pointer":"default"};
-`,g=e(r.Content)``,m=e.div`
-    flex: 1;
-    align-items: flex-start;
-    padding: ${s["spacing-24"]} 0;
-`,$=e.div`
-    display: flex;
-    flex: 1;
-    align-items: flex-start;
-
-    ${d["body-baseline-regular"]}
-    color: ${n["text-inverse"]};
-
-    p {
-        display: inline-block;
-    }
-
-    strong {
-        ${d["body-baseline-semibold"]}
-        color: ${n["text-inverse"]};
-    }
-
-    a {
-        ${d["body-baseline-regular"]}
-        ${p}
-    }
-`,h=e.div`
-    display: flex;
-    flex-direction: column;
-    flex: 1;
-`,v=e.div`
-    flex: 1;
-    word-wrap: break-word;
-    overflow-wrap: break-word;
-    ${e=>{const r="linear-gradient(to bottom, black 50%, transparent 100%)";if(e.$maxCollapsedHeight)return i`
-                max-height: ${e.$maxCollapsedHeight}px;
-                overflow: hidden;
-                -webkit-mask-image: ${r};
-                mask-image: ${r};
-            `}}
-`,b=e(t.LinkBL)`
-    position: relative;
-
-    ${p}
-`,f=e(o)`
-    margin-right: -${s["spacing-24"]};
-    padding-left: ${s["spacing-16"]};
-    height: max-content;
-    svg {
-        height: 1.5rem;
-        width: 1.5rem;
-        color: ${n["icon-inverse"]};
-    }
-`,x=e.button`
-    display: flex;
-    align-items: center;
-    gap: ${s["spacing-4"]};
-    align-self: flex-start;
-    margin-top: ${s["spacing-8"]};
-
-    border: none;
-    background: transparent;
-    color: ${n["hyperlink-inverse"]};
-    ${d["body-md-semibold"]};
-
-    cursor: pointer;
-`,k=e.button`
-    clip: rect(0 0 0 0);
-    clip-path: inset(50%);
-    height: 1px;
-    overflow: hidden;
-    position: absolute;
-    white-space: nowrap;
-    width: 1px;
-`,y=e.div`
-    height: 1.5rem;
-    width: 1.5rem;
-    margin: ${s["spacing-24"]} ${s["spacing-24"]} 0 0;
-    flex-shrink: 0;
-
-    svg {
-        height: 100%;
-        width: 100%;
-        color: ${n["hyperlink-inverse"]};
-    }
-`;export{k as AccessibleBannerButton,x as ActionButton,g as Container,$ as Content,m as ContentContainer,b as ContentLink,v as ContentText,h as ContentWrapper,y as IconContainer,f as StyledIconButton,c as Wrapper};
+import"./notification-banner.styles_uxlysy.css";const t={contentText:{maxCollapsedHeight:"--fds-internal-notificationBanner-contentText-maxCollapsedHeight"}},n="w17suq18",i="w1ixs8gf",c="w1trwg7u",a="cmwsx4o",e="c1qc2rgl",o="cb6cjs3",s="cia23af",r="c1uktajc",l="c12st863",x="d1hjtr0v",f="azqyi5b",b="i6bp33n";export{f as actionButton,e as content,a as contentContainer,l as contentLink,s as contentText,r as contentTextCollapsed,o as contentWrapper,x as dismissButton,b as iconContainer,t as tokens,n as wrapper,c as wrapperClickable,i as wrapperSticky};
 //# sourceMappingURL=notification-banner.styles.js.map

package/notification-banner/notification-banner.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"notification-banner.styles.js","sources":["../../src/notification-banner/notification-banner.styles.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport { Layout } from \"../layout\";\nimport { ClickableIcon } from \"../shared/clickable-icon\";\nimport { Typography } from \"../typography\";\nimport {\n    V3_Colour,\n    V3_Font,\n    V3_Motion,\n    V3_Radius,\n    V3_Spacing,\n} from \"../v3_theme\";\n\n// =============================================================================\n// STYLE INTERFACES, transient props are denoted with $\n// See more https://styled-components.com/docs/api#transient-props\n// =============================================================================\ninterface WrapperStyleProps {\n    $sticky: boolean;\n    $clickable: boolean;\n}\n\ninterface ContentStyleProps {\n    $maxCollapsedHeight?: number;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\nconst commonLinkStyle = css`\n    color: ${V3_Colour[\"hyperlink-inverse\"]};\n\n    svg {\n        color: ${V3_Colour[\"icon-primary-inverse\"]};\n    }\n\n    &:hover,\n    &:active,\n    &:visited,\n    &:focus {\n        color: ${V3_Colour[\"hyperlink-inverse\"]};\n        svg {\n            color: ${V3_Colour[\"icon-primary-inverse\"]};\n        }\n    }\n`;\n\nexport const Wrapper = styled.div<WrapperStyleProps>`\n    position: ${(props) => (props.$sticky ? \"sticky\" : \"relative\")};\n    left: 0;\n    top: 0;\n    width: 100%;\n    transition: all ${V3_Motion[\"duration-800\"]} ${V3_Motion[\"ease-default\"]};\n    background: ${V3_Colour[\"bg-inverse-subtle\"]};\n    border-radius: ${V3_Radius[\"none\"]};\n    z-index: 25;\n    cursor: ${(props) => (props.$clickable ? \"pointer\" : \"default\")};\n`;\n\nexport const Container = styled(Layout.Content)``;\n\nexport const ContentContainer = styled.div`\n    flex: 1;\n    align-items: flex-start;\n    padding: ${V3_Spacing[\"spacing-24\"]} 0;\n`;\n\nexport const Content = styled.div<ContentStyleProps>`\n    display: flex;\n    flex: 1;\n    align-items: flex-start;\n\n    ${V3_Font[\"body-baseline-regular\"]}\n    color: ${V3_Colour[\"text-inverse\"]};\n\n    p {\n        display: inline-block;\n    }\n\n    strong {\n        ${V3_Font[\"body-baseline-semibold\"]}\n        color: ${V3_Colour[\"text-inverse\"]};\n    }\n\n    a {\n        ${V3_Font[\"body-baseline-regular\"]}\n        ${commonLinkStyle}\n    }\n`;\n\nexport const ContentWrapper = styled.div`\n    display: flex;\n    flex-direction: column;\n    flex: 1;\n`;\n\nexport const ContentText = styled.div<{ $maxCollapsedHeight?: number }>`\n    flex: 1;\n    word-wrap: break-word;\n    overflow-wrap: break-word;\n    ${(props) => {\n        const gradient =\n            \"linear-gradient(to bottom, black 50%, transparent 100%)\";\n        if (props.$maxCollapsedHeight) {\n            return css`\n                max-height: ${props.$maxCollapsedHeight}px;\n                overflow: hidden;\n                -webkit-mask-image: ${gradient};\n                mask-image: ${gradient};\n            `;\n        }\n    }}\n`;\n\nexport const ContentLink = styled(Typography.LinkBL)`\n    position: relative;\n\n    ${commonLinkStyle}\n`;\n\nexport const StyledIconButton = styled(ClickableIcon)`\n    margin-right: -${V3_Spacing[\"spacing-24\"]};\n    padding-left: ${V3_Spacing[\"spacing-16\"]};\n    height: max-content;\n    svg {\n        height: 1.5rem;\n        width: 1.5rem;\n        color: ${V3_Colour[\"icon-inverse\"]};\n    }\n`;\n\nexport const ActionButton = styled.button`\n    display: flex;\n    align-items: center;\n    gap: ${V3_Spacing[\"spacing-4\"]};\n    align-self: flex-start;\n    margin-top: ${V3_Spacing[\"spacing-8\"]};\n\n    border: none;\n    background: transparent;\n    color: ${V3_Colour[\"hyperlink-inverse\"]};\n    ${V3_Font[\"body-md-semibold\"]};\n\n    cursor: pointer;\n`;\n\nexport const AccessibleBannerButton = styled.button`\n    clip: rect(0 0 0 0);\n    clip-path: inset(50%);\n    height: 1px;\n    overflow: hidden;\n    position: absolute;\n    white-space: nowrap;\n    width: 1px;\n`;\n\nexport const IconContainer = styled.div`\n    height: 1.5rem;\n    width: 1.5rem;\n    margin: ${V3_Spacing[\"spacing-24\"]} ${V3_Spacing[\"spacing-24\"]} 0 0;\n    flex-shrink: 0;\n\n    svg {\n        height: 100%;\n        width: 100%;\n        color: ${V3_Colour[\"hyperlink-inverse\"]};\n    }\n`;\n"],"names":["commonLinkStyle","css","V3_Colour","Wrapper","styled","div","props","$sticky","V3_Motion","V3_Radius","$clickable","Container","Layout","Content","ContentContainer","V3_Spacing","V3_Font","ContentWrapper","ContentText","gradient","$maxCollapsedHeight","ContentLink","Typography","LinkBL","StyledIconButton","ClickableIcon","ActionButton","button","AccessibleBannerButton","IconContainer"],"mappings":"kUA6BA,MAAMA,EAAkBC,CAAG;aACdC,EAAU;;;iBAGNA,EAAU;;;;;;;iBAOVA,EAAU;;qBAENA,EAAU;;;EAKlBC,EAAUC,EAAOC,GAAsB;gBACnCC,GAAWA,EAAMC,QAAU,SAAW;;;;sBAIjCC,EAAU,mBAAmBA,EAAU;kBAC3CN,EAAU;qBACPO,EAAgB;;cAEtBH,GAAWA,EAAMI,WAAa,UAAY;EAG5CC,EAAYP,EAAOQ,EAAOC,QAAQ,GAElCC,EAAmBV,EAAOC,GAAG;;;eAG3BU,EAAW;EAGbF,EAAUT,EAAOC,GAAsB;;;;;MAK9CW,EAAQ;aACDd,EAAU;;;;;;;UAObc,EAAQ;iBACDd,EAAU;;;;UAIjBc,EAAQ;UACRhB;;EAIGiB,EAAiBb,EAAOC,GAAG;;;;EAM3Ba,EAAcd,EAAOC,GAAqC;;;;MAIhEC,IACC,MAAMa,EACF,0DACJ,GAAIb,EAAMc,oBACN,OAAOnB,CAAG;8BACQK,EAAMc;;sCAEED;8BACRA;aAEtB;EAIKE,EAAcjB,EAAOkB,EAAWC,OAAO;;;MAG9CvB;EAGOwB,EAAmBpB,EAAOqB,EAAc;qBAChCV,EAAW;oBACZA,EAAW;;;;;iBAKdb,EAAU;;EAIdwB,EAAetB,EAAOuB,MAAM;;;WAG9BZ,EAAW;;kBAEJA,EAAW;;;;aAIhBb,EAAU;MACjBc,EAAQ;;;EAKDY,EAAyBxB,EAAOuB,MAAM;;;;;;;;EAUtCE,EAAgBzB,EAAOC,GAAG;;;cAGzBU,EAAW,iBAAiBA,EAAW;;;;;;iBAMpCb,EAAU;;"}
+{"version":3,"file":"notification-banner.styles.js","sources":["../../src/notification-banner/notification-banner.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Font, Motion, Radius, Spacing } from \"../theme\";\n\nexport const tokens = {\n    contentText: {\n        maxCollapsedHeight:\n            \"--fds-internal-notificationBanner-contentText-maxCollapsedHeight\",\n    },\n};\n\nconst linkStyle = `\n    color: ${Colour[\"hyperlink-inverse\"]};\n\n    svg {\n        color: ${Colour[\"icon-primary-inverse\"]};\n    }\n\n    &:hover,\n    &:active,\n    &:visited,\n    &:focus {\n        color: ${Colour[\"hyperlink-inverse\"]};\n        svg {\n            color: ${Colour[\"icon-primary-inverse\"]};\n        }\n    }\n`;\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const wrapper = css`\n    position: relative;\n    left: 0;\n    top: 0;\n    width: 100%;\n    transition: all ${Motion[\"duration-800\"]} ${Motion[\"ease-default\"]};\n    background: ${Colour[\"bg-inverse-subtle\"]};\n    border-radius: ${Radius[\"none\"]};\n    z-index: 25;\n    cursor: default;\n`;\n\nexport const wrapperSticky = css`\n    position: sticky;\n`;\n\nexport const wrapperClickable = css`\n    cursor: pointer;\n`;\n\nexport const contentContainer = css`\n    flex: 1;\n    align-items: flex-start;\n    padding: ${Spacing[\"spacing-24\"]} 0;\n`;\n\nexport const content = css`\n    display: flex;\n    flex: 1;\n    align-items: flex-start;\n\n    ${Font[\"body-baseline-regular\"]}\n    color: ${Colour[\"text-inverse\"]};\n\n    p {\n        display: inline-block;\n    }\n\n    strong {\n        ${Font[\"body-baseline-semibold\"]}\n        color: ${Colour[\"text-inverse\"]};\n    }\n\n    a {\n        ${Font[\"body-baseline-regular\"]}\n        ${linkStyle}\n    }\n`;\n\nexport const contentWrapper = css`\n    display: flex;\n    flex-direction: column;\n    flex: 1;\n`;\n\nexport const contentText = css`\n    ${tokens.contentText.maxCollapsedHeight}: initial;\n    flex: 1;\n    word-wrap: break-word;\n    overflow-wrap: break-word;\n`;\n\nexport const contentTextCollapsed = css`\n    max-height: var(${tokens.contentText.maxCollapsedHeight});\n    overflow: hidden;\n    -webkit-mask-image: linear-gradient(to bottom, black 50%, transparent 100%);\n    mask-image: linear-gradient(to bottom, black 50%, transparent 100%);\n`;\n\nexport const contentLink = css`\n    position: relative;\n    ${linkStyle}\n`;\n\nexport const dismissButton = css`\n    margin-right: calc(${Spacing[\"spacing-24\"]} * -1);\n    padding-left: ${Spacing[\"spacing-16\"]};\n    height: max-content;\n\n    svg {\n        height: 1.5rem;\n        width: 1.5rem;\n        color: ${Colour[\"icon-inverse\"]};\n    }\n`;\n\nexport const actionButton = css`\n    display: flex;\n    align-items: center;\n    gap: ${Spacing[\"spacing-4\"]};\n    align-self: flex-start;\n    margin-top: ${Spacing[\"spacing-8\"]};\n\n    border: none;\n    background: transparent;\n    color: ${Colour[\"hyperlink-inverse\"]};\n    ${Font[\"body-md-semibold\"]};\n\n    cursor: pointer;\n`;\n\nexport const iconContainer = css`\n    height: 1.5rem;\n    width: 1.5rem;\n    margin: ${Spacing[\"spacing-24\"]} ${Spacing[\"spacing-24\"]} 0 0;\n    flex-shrink: 0;\n\n    svg {\n        height: 100%;\n        width: 100%;\n        color: ${Colour[\"hyperlink-inverse\"]};\n    }\n`;\n"],"names":["tokens","contentText","maxCollapsedHeight","wrapper","wrapperSticky","wrapperClickable","contentContainer","content","contentWrapper","contentTextCollapsed","contentLink","dismissButton","actionButton","iconContainer"],"mappings":"mFAIO,MAAMA,EAAS,CAClBC,YAAa,CACTC,mBACI,qEAyBCC,EAAO,WAYPC,EAAa,WAIbC,EAAgB,WAIhBC,EAAgB,UAMhBC,EAAO,WAuBPC,EAAc,UAMdP,EAAW,UAOXQ,EAAoB,WAOpBC,EAAW,WAKXC,EAAa,WAYbC,EAAY,UAeZC,EAAa"}