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

package/index.js

@@ -3827,7 +3827,7 @@ object-assign
         padding: 0;
     }
 `,Masthead=()=>{useEffect((()=>{e()||t()}),[]);const e=()=>document.getElementById(SCRIPT_ID),t=()=>{if(!document.getElementById(SCRIPT_ID)){const e=document.createElement("script");e.id=SCRIPT_ID,e.type="module",e.src=SCRIPT_SRC,document.head.appendChild(e)}};return jsx(Wrapper$e,{dangerouslySetInnerHTML:{__html:"<sgds-masthead></sgds-masthead>"}})},SCRIPT_ID="lifesg-ds-masthead-script",SCRIPT_SRC="https://cdn.jsdelivr.net/npm/@govtechsg/sgds-web-component/Masthead/index.js",Modal=Object.assign(Modal$1,{Box:ModalBox}),NAVBAR_HEIGHT={notCompress:6,compress:4},NAVBAR_MOBILE_HEIGHT=3.5,Wrapper$d=styled.div`
-    position: ${e=>e.$fixed?"fixed":"relative"};
+    position: ${e=>e.$fixed?"sticky":"relative"};
     background-color: white;
     z-index: 30;
     top: 0;
@@ -3871,36 +3871,37 @@ object-assign
     color: ${Color.Neutral[1]};
 `,NavBrandContainer=styled.div`
     display: flex;
-    height: 100%;
     flex-direction: row;
     align-items: center;
     flex-shrink: 0;
+
+    height: ${e=>e.$compress?1.5:2}rem;
+
+    ${MediaQuery.MaxWidth.tablet} {
+        height: 1.5rem;
+    }
 `,NavSeparator=styled.div`
     display: flex;
     background-color: ${Color.Neutral[5]};
-    height: ${e=>e.$compress?2:2.5}rem;
+    height: 100%;
     width: 1px;
-    margin: 0 ${e=>e.$compress?1.125:1.5}rem;
+    margin: 0 ${e=>e.$compress?1:1.5}rem;
 
     ${MediaQuery.MaxWidth.tablet} {
-        height: 1.5rem;
         margin: 0 1rem;
     }
 `,Clickable=styled.a`
     display: flex;
     justify-content: center;
+    height: 100%;
 
     img {
         width: auto;
-        height: ${e=>"primary"===e.$type?e.$compress?1.25:1.625:e.$compress?2:2.5}rem;
+        height: 100%;
         transition: ${Transition.Base};
         object-fit: contain;
-
-        ${MediaQuery.MaxWidth.tablet} {
-            height: ${e=>"primary"===e.$type?1:1.5}rem;
-        }
     }
-`,Brand=({resources:e,compress:t,onClick:r,"data-testid":n="navbar-brand",type:i})=>jsx(Clickable,Object.assign({role:"link","aria-label":e.brandName+"-app-home-page",onClick:e=>{r&&r(e,i)},$compress:t,tabIndex:0,"data-testid":n,$type:i},{children:jsx(ImageWithFallback,{src:e.logoSrc,alt:e.brandName+"-app-logo"})})),VISIBILITY_STYLE=e=>e?css`
+`,Brand=({resources:e,onClick:t,"data-id":r,"data-testid":n="navbar-brand",type:i})=>jsx(Clickable,Object.assign({role:"link","aria-label":e.brandName+"-app-home-page",onClick:e=>{t&&t(e,i)},tabIndex:0,"data-id":r,"data-testid":n,$type:i},{children:jsx(ImageWithFallback,{src:e.logoSrc,alt:e.brandName+"-app-logo"})})),VISIBILITY_STYLE=e=>e?css`
             right: 0;
             transition: all 300ms cubic-bezier(0.21, 0.79, 0.53, 1);
             transition-delay: 200ms;
@@ -4235,7 +4236,7 @@ object-assign
     :hover {
         color: ${Color.Neutral[1]};
     }
-`,NavbarItems=({items:e,selectedId:t,mobile:r=!1,onItemClick:n})=>{const[i,a]=useState(-1),[o,s]=useState(!1),l=useRef(null);useEffect((()=>{const e=e=>{l.current&&!l.current.contains(e.target)&&c()};return document.addEventListener("click",e,!0),()=>{document.removeEventListener("click",e,!0)}}),[]);const c=()=>{s(!1)},p=(e,t)=>r=>{r.stopPropagation(),a(t),s(!0),n(r,e)},d=(e,t)=>{e.stopPropagation(),n(e,t),s(!1)},u=()=>e.map(((e,n)=>{if("component"===e.itemType){const t=e&&e.children||null;return jsx("li",{children:t},n)}{const a=(e=>{if(e.id===t)return!0;if((null==e?void 0:e.subMenu)&&e.subMenu.length>=1)return!!e.subMenu.find((e=>e.id===t));return!1})(e),{children:s,options:l}=e,c=__rest$1(e,["children","options"]),u=a?r?"bold":"semibold":"regular",h=r?`link__mobile-${n+1}`:`link__${n+1}`,f=i>=0&&i===n&&o;return jsxs(LinkItem,{children:[jsxs(Link,Object.assign({"data-testid":h,weight:u,$selected:a},c,{onClick:p(e,n)},l,{children:[jsx(LinkLabel,{children:s}),a&&jsx(LinkIndicator,{}),r&&e.subMenu&&jsx(LinkIconContainer,{children:jsx(ExpandCollapseButton,Object.assign({"data-testid":`${h}-expand-collapse-button`,$selected:f,focusHighlight:!1,focusOutline:"browser","aria-label":f?"Collapse":"Expand"},{children:jsx(ChevronIcon$1,{})}))})]})),f&&jsx(Menu,{items:e.subMenu,mobile:r,onItemClick:d})]},n)}}));if(e&&e.length>0){return jsx(r?MobileWrapper:Wrapper$9,Object.assign({ref:l},{children:u()}))}return jsx(Fragment,{})},Component$1=(e,t)=>{var{items:r,id:n,selectedId:i,compress:a=!1,fixed:o=!0,resources:s=DEFAULT_RESOURCES,hideNavElements:l=!1,drawerDismissalExclusions:c=[],actionButtons:p,onItemClick:d,onActionButtonClick:u,onBrandClick:h,masthead:f=!0,layout:m="default"}=e,y=__rest$1(e,["items","id","selectedId","compress","fixed","resources","hideNavElements","drawerDismissalExclusions","actionButtons","onItemClick","onActionButtonClick","onBrandClick","masthead","layout"]);const[g,b]=useState(!1),[v,_]=useState(!1),x="stretch"===m,S=useRef(),{primary:C=DEFAULT_RESOURCES.primary,secondary:$}=s;useImperativeHandle(t,(()=>Object.assign(S.current,{dismissDrawer:()=>{w()}})),[g]),useEffect((()=>(k(),window.addEventListener("resize",k),()=>{window.removeEventListener("resize",k)})),[]);const w=()=>{b(!1),setTimeout((()=>{_(!1)}),550)},T=e=>g&&-1===c.indexOf(e),k=()=>{window.innerWidth<=MediaWidths$1.tablet&&g&&w()},E=(e,t)=>{h&&(e.preventDefault(),h(t)),T("brand-click")&&w()},A=(e,t)=>{t.onClick?t.onClick(e):d&&(e.preventDefault(),d(t)),!(null==t?void 0:t.subMenu)&&T("item-click")&&w()},D=(e,t)=>{t.args&&t.args.onClick?t.args.onClick(e):u&&(e.preventDefault(),u(t)),T("item-click")&&w()},I=()=>{b(!0),_(!0)},P=()=>{T("close-button-click")&&w()};return jsxs(Wrapper$d,Object.assign({ref:S,$fixed:o,id:n||"navbar-wrapper","data-testid":y["data-testid"]||"navbar-wrapper"},{children:[f&&jsx(Masthead,{}),jsxs(Layout.Content,Object.assign({stretch:x},{children:[jsxs(Nav,Object.assign({$compress:a},{children:[jsxs(NavBrandContainer,{children:[jsx(Brand,{resources:C,compress:a,onClick:E,"data-testid":"main__brand",type:"primary"}),$&&jsxs(Fragment,{children:[jsx(NavSeparator,{$compress:a}),jsx(Brand,{resources:$,compress:a,onClick:E,"data-testid":"main__brand-secondary",type:"secondary"})]})]}),!l&&jsxs(NavElementsContainer,{children:[jsx(NavbarItems,{items:r.desktop,onItemClick:A,selectedId:i}),jsx(NavbarActionButtons,{actionButtons:p,onActionButtonClick:D}),jsx(MobileMenuButton,Object.assign({"aria-label":"Open nav menu","data-testid":"button__mobile-menu",onClick:I,focusHighlight:!1},{children:jsx(MobileMenuIcon,{})}))]})]})),!l&&jsx(Overlay,Object.assign({show:v,enableOverlayClick:!0,onOverlayClick:P},{children:jsxs(Drawer,Object.assign({show:g,resources:{primary:C,secondary:$},onClose:P,onBrandClick:E,actionButtons:p},{children:[jsx(NavbarItems,{items:r.mobile||r.desktop,onItemClick:A,selectedId:i,mobile:!0}),jsx(NavbarActionButtons,{actionButtons:p,onActionButtonClick:D,mobile:!0})]}))}))]}))]}))},Navbar=forwardRef(Component$1),DEFAULT_RESOURCES={primary:{brandName:"LifeSG",logoSrc:"https://assets.life.gov.sg/lifesg/logo-lifesg.svg"}},NavbarHeight=NAVBAR_HEIGHT,NavbarMobileHeight=NAVBAR_MOBILE_HEIGHT,commonLinkStyle=css`
+`,NavbarItems=({items:e,selectedId:t,mobile:r=!1,onItemClick:n})=>{const[i,a]=useState(-1),[o,s]=useState(!1),l=useRef(null);useEffect((()=>{const e=e=>{l.current&&!l.current.contains(e.target)&&c()};return document.addEventListener("click",e,!0),()=>{document.removeEventListener("click",e,!0)}}),[]);const c=()=>{s(!1)},p=(e,t)=>r=>{r.stopPropagation(),a(t),s(!0),n(r,e)},d=(e,t)=>{e.stopPropagation(),n(e,t),s(!1)},u=()=>e.map(((e,n)=>{if("component"===e.itemType){const t=e&&e.children||null;return jsx("li",{children:t},n)}{const a=(e=>{if(e.id===t)return!0;if((null==e?void 0:e.subMenu)&&e.subMenu.length>=1)return!!e.subMenu.find((e=>e.id===t));return!1})(e),{children:s,options:l}=e,c=__rest$1(e,["children","options"]),u=a?r?"bold":"semibold":"regular",h=r?`link__mobile-${n+1}`:`link__${n+1}`,f=i>=0&&i===n&&o;return jsxs(LinkItem,{children:[jsxs(Link,Object.assign({"data-testid":h,weight:u,$selected:a},c,{onClick:p(e,n)},l,{children:[jsx(LinkLabel,{children:s}),a&&jsx(LinkIndicator,{}),r&&e.subMenu&&jsx(LinkIconContainer,{children:jsx(ExpandCollapseButton,Object.assign({"data-testid":`${h}-expand-collapse-button`,$selected:f,focusHighlight:!1,focusOutline:"browser","aria-label":f?"Collapse":"Expand"},{children:jsx(ChevronIcon$1,{})}))})]})),f&&jsx(Menu,{items:e.subMenu,mobile:r,onItemClick:d})]},n)}}));if(e&&e.length>0){return jsx(r?MobileWrapper:Wrapper$9,Object.assign({ref:l},{children:u()}))}return jsx(Fragment,{})},Component$1=(e,t)=>{var{items:r,className:n,id:i,selectedId:a,compress:o=!1,fixed:s=!0,resources:l=DEFAULT_RESOURCES,hideNavElements:c=!1,drawerDismissalExclusions:p=[],actionButtons:d,onItemClick:u,onActionButtonClick:h,onBrandClick:f,masthead:m=!0,layout:y="default"}=e,g=__rest$1(e,["items","className","id","selectedId","compress","fixed","resources","hideNavElements","drawerDismissalExclusions","actionButtons","onItemClick","onActionButtonClick","onBrandClick","masthead","layout"]);const[b,v]=useState(!1),[_,x]=useState(!1),S="stretch"===y,C=useRef(),{primary:$=DEFAULT_RESOURCES.primary,secondary:w}=l;useImperativeHandle(t,(()=>Object.assign(C.current,{dismissDrawer:()=>{T()}})),[b]),useEffect((()=>(E(),window.addEventListener("resize",E),()=>{window.removeEventListener("resize",E)})),[]);const T=()=>{v(!1),setTimeout((()=>{x(!1)}),550)},k=e=>b&&-1===p.indexOf(e),E=()=>{window.innerWidth<=MediaWidths$1.tablet&&b&&T()},A=(e,t)=>{f&&(e.preventDefault(),f(t)),k("brand-click")&&T()},D=(e,t)=>{t.onClick?t.onClick(e):u&&(e.preventDefault(),u(t)),!(null==t?void 0:t.subMenu)&&k("item-click")&&T()},I=(e,t)=>{t.args&&t.args.onClick?t.args.onClick(e):h&&(e.preventDefault(),h(t)),k("item-click")&&T()},P=()=>{v(!0),x(!0)},M=()=>{k("close-button-click")&&T()};return jsxs(Wrapper$d,Object.assign({ref:C,$fixed:s,className:n,id:i||"navbar-wrapper","data-testid":g["data-testid"]||"navbar-wrapper"},{children:[m&&jsx(Masthead,{}),jsxs(Layout.Content,Object.assign({stretch:S},{children:[jsxs(Nav,Object.assign({$compress:o},{children:[jsxs(NavBrandContainer,Object.assign({$compress:o,"data-id":"brand-container"},{children:[jsx(Brand,{resources:$,onClick:A,"data-id":"brand-primary","data-testid":"main__brand",type:"primary"}),w&&jsxs(Fragment,{children:[jsx(NavSeparator,{$compress:o}),jsx(Brand,{resources:w,onClick:A,"data-id":"brand-secondary","data-testid":"main__brand-secondary",type:"secondary"})]})]})),!c&&jsxs(NavElementsContainer,{children:[jsx(NavbarItems,{items:r.desktop,onItemClick:D,selectedId:a}),jsx(NavbarActionButtons,{actionButtons:d,onActionButtonClick:I}),jsx(MobileMenuButton,Object.assign({"aria-label":"Open nav menu","data-testid":"button__mobile-menu",onClick:P,focusHighlight:!1},{children:jsx(MobileMenuIcon,{})}))]})]})),!c&&jsx(Overlay,Object.assign({show:_,enableOverlayClick:!0,onOverlayClick:M},{children:jsxs(Drawer,Object.assign({show:b,resources:{primary:$,secondary:w},onClose:M,onBrandClick:A,actionButtons:d},{children:[jsx(NavbarItems,{items:r.mobile||r.desktop,onItemClick:D,selectedId:a,mobile:!0}),jsx(NavbarActionButtons,{actionButtons:d,onActionButtonClick:I,mobile:!0})]}))}))]}))]}))},Navbar=forwardRef(Component$1),DEFAULT_RESOURCES={primary:{brandName:"LifeSG",logoSrc:"https://assets.life.gov.sg/lifesg/logo-lifesg.svg"}},NavbarHeight=NAVBAR_HEIGHT,NavbarMobileHeight=NAVBAR_MOBILE_HEIGHT,commonLinkStyle=css`
     color: ${Color.Validation.Orange.Icon};
 
     svg {