@lifesg/react-design-system 3.5.0-canary.7 → 3.5.0

package/navbar/navbar-items.styles.js

@@ -1,4 +1,4 @@
-import{ChevronUpIcon as e}from"@lifesg/react-icons/chevron-up";import t,{css as o}from"styled-components";import{ClickableIcon as i}from"../shared/clickable-icon/clickable-icon.js";import{MediaQuery as r,Font as n,Colour as l}from"../theme/index.js";import{ThemeNavbar as a}from"../theme/components/theme-helper.js";const d=t.ul`
+import{ChevronUpIcon as e}from"@lifesg/react-icons/chevron-up";import t,{css as i}from"styled-components";import{ClickableIcon as o}from"../shared/clickable-icon/clickable-icon.js";import{MediaQuery as r,Font as n,Spacing as l,Colour as a}from"../theme/index.js";import{ThemeNavbar as d}from"../theme/components/theme-helper.js";const c=t.ul`
     display: flex;
     list-style: none;
     position: relative;
@@ -8,7 +8,7 @@ import{ChevronUpIcon as e}from"@lifesg/react-icons/chevron-up";import t,{css as
     ${r.MaxWidth.lg} {
         display: none;
     }
-`,c=t.ul`
+`,s=t.ul`
     display: none;
     list-style: none;
 
@@ -17,7 +17,7 @@ import{ChevronUpIcon as e}from"@lifesg/react-icons/chevron-up";import t,{css as
         flex-direction: column;
         overflow: hidden;
     }
-`,s=t.li`
+`,h=t.li`
     display: flex;
     margin: 0 1rem;
 
@@ -28,36 +28,35 @@ import{ChevronUpIcon as e}from"@lifesg/react-icons/chevron-up";import t,{css as
 
     ${r.MaxWidth.lg} {
         flex-direction: column;
-        padding: 0.125rem 0;
         width: 100%;
         margin-left: 0rem;
     }
-`,m=o`
+`,m=i`
     ${e=>n[`body-md-${e.$weight}`]}
 
     display: flex;
     position: relative;
     align-items: center;
     text-align: center;
-    color: ${a["navbar-link-colour-text"]};
+    color: ${d["navbar-link-colour-text"]};
     height: 100%;
-    gap: 0.5rem;
+    gap: ${l["spacing-16"]};
 
     &:active,
     &:hover,
     &:focus,
     &:focus-within {
-        color: ${e=>e.$selected?a["navbar-link-colour-text-selected-hover"]:a["navbar-link-colour-text-hover"]};
+        color: ${e=>e.$selected?d["navbar-link-colour-text-selected-hover"]:d["navbar-link-colour-text-hover"]};
     }
 
     ${r.MaxWidth.lg} {
         width: 100%;
-        padding: 0.5rem 1rem;
+        padding: 10px ${l["spacing-24"]};
         text-align: left;
     }
-`,h=t.a`
+`,g=t.a`
     ${m}
-`,g=t.button`
+`,$=t.button`
     ${m}
     background: none;
     border: 0;
@@ -68,7 +67,7 @@ import{ChevronUpIcon as e}from"@lifesg/react-icons/chevron-up";import t,{css as
     box-shadow: none;
     font: inherit;
     color: inherit;
-`,$=t.div`
+`,p=t.div`
     flex: 1;
 
     overflow: hidden;
@@ -82,16 +81,16 @@ import{ChevronUpIcon as e}from"@lifesg/react-icons/chevron-up";import t,{css as
     left: 0;
     right: 0;
     height: 0.25rem;
-    background-color: ${l["border-selected"]};
+    background-color: ${a["border-selected"]};
 
-    ${e=>e.$selected&&o`
-            ${h}:active &,
-            ${h}:hover &,
-            ${h}:focus &,
+    ${e=>e.$selected&&i`
             ${g}:active &,
             ${g}:hover &,
-            ${g}:focus & {
-                background-color: ${l["border-selected-hover"]};
+            ${g}:focus &,
+            ${$}:active &,
+            ${$}:hover &,
+            ${$}:focus & {
+                background-color: ${a["border-selected-hover"]};
             }
         `};
 
@@ -103,31 +102,31 @@ import{ChevronUpIcon as e}from"@lifesg/react-icons/chevron-up";import t,{css as
         height: 100%;
         width: 0.25rem;
     }
-`,p=t.div`
+`,v=t.div`
     margin-right: -0.5rem;
-`,v=t(i)`
+`,u=t(o)`
     padding: 0.5rem;
     transform: rotate(${e=>e.$expanded?0:180}deg);
     transition: transform 300ms ease-in-out;
-    margin: auto 0.25rem auto 0;
-`,u=t(e)`
+    margin: auto 0;
+`,x=t(e)`
     height: 1.25rem;
     width: 1.25rem;
-    color: ${l.icon};
+    color: ${a.icon};
 
-    ${h}:active &,
-    ${h}:hover &,
-    ${h}:focus &,
     ${g}:active &,
     ${g}:hover &,
-    ${g}:focus & {
-        color: ${e=>e.$selected?l["icon-selected-hover"]:l["icon-hover"]};
+    ${g}:focus &,
+    ${$}:active &,
+    ${$}:hover &,
+    ${$}:focus & {
+        color: ${e=>e.$selected?a["icon-selected-hover"]:a["icon-hover"]};
     }
-`,x=t(u)`
+`,b=t(x)`
     transform: rotate(${e=>e.$expanded?0:180}deg);
     transition: transform 300ms ease-in-out;
 
     height: 1.125rem;
     width: 1.125rem;
-`;export{u as ChevronIcon,x as ChevronIconDesktop,v as ExpandCollapseButton,h as Link,g as LinkButton,p as LinkIconContainer,f as LinkIndicator,s as LinkItem,$ as LinkLabel,c as MobileWrapper,d as Wrapper};
+`;export{x as ChevronIcon,b as ChevronIconDesktop,u as ExpandCollapseButton,g as Link,$ as LinkButton,v as LinkIconContainer,f as LinkIndicator,h as LinkItem,p as LinkLabel,s as MobileWrapper,c as Wrapper};
 //# sourceMappingURL=navbar-items.styles.js.map

package/navbar/navbar-items.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"navbar-items.styles.js","sources":["../../src/navbar/navbar-items.styles.tsx"],"sourcesContent":["import { ChevronUpIcon } from \"@lifesg/react-icons/chevron-up\";\nimport styled, { css } from \"styled-components\";\nimport { ClickableIcon } from \"../shared/clickable-icon\";\nimport { Font, MediaQuery } from \"../theme\";\nimport { Colour } from \"../theme\";\nimport { ThemeNavbar } from \"../theme/components/theme-helper\";\nimport { TypographyWeight } from \"../typography\";\n\n// =============================================================================\n// STYLE INTERFACE, transient props are denoted with $\n// See more https://styled-components.com/docs/api#transient-props\n// =============================================================================\ninterface StyleProps {\n    $selected: boolean;\n    $expanded?: boolean;\n}\n\ninterface WrapperStyleProps {\n    $alignLeft: boolean | undefined;\n}\n\ninterface ItemStyleProps {\n    $hiddenBranding: boolean | undefined;\n}\n\n// =============================================================================\n// WRAPPER\n// =============================================================================\n\nexport const Wrapper = styled.ul<WrapperStyleProps>`\n    display: flex;\n    list-style: none;\n    position: relative;\n\n    ${(props) => props.$alignLeft && \"margin-right: auto;\"}\n\n    ${MediaQuery.MaxWidth.lg} {\n        display: none;\n    }\n`;\n\nexport const MobileWrapper = styled.ul`\n    display: none;\n    list-style: none;\n\n    ${MediaQuery.MaxWidth.lg} {\n        display: flex;\n        flex-direction: column;\n        overflow: hidden;\n    }\n`;\n\n// =============================================================================\n// LINK ITEMS\n// =============================================================================\nexport const LinkItem = styled.li<ItemStyleProps>`\n    display: flex;\n    margin: 0 1rem;\n\n    &:first-child {\n        // negative margin to preserve touch target size for link\n        margin-left: ${(props) => (props.$hiddenBranding ? \"-0.5rem\" : \"0\")};\n    }\n\n    ${MediaQuery.MaxWidth.lg} {\n        flex-direction: column;\n        padding: 0.125rem 0;\n        width: 100%;\n        margin-left: 0rem;\n    }\n`;\n\nconst linkCss = css<{ $selected: boolean; $weight: TypographyWeight }>`\n    ${(props) => Font[`body-md-${props.$weight}`]}\n\n    display: flex;\n    position: relative;\n    align-items: center;\n    text-align: center;\n    color: ${ThemeNavbar[\"navbar-link-colour-text\"]};\n    height: 100%;\n    gap: 0.5rem;\n\n    &:active,\n    &:hover,\n    &:focus,\n    &:focus-within {\n        color: ${(props) =>\n            props.$selected\n                ? ThemeNavbar[\"navbar-link-colour-text-selected-hover\"]\n                : ThemeNavbar[\"navbar-link-colour-text-hover\"]};\n    }\n\n    ${MediaQuery.MaxWidth.lg} {\n        width: 100%;\n        padding: 0.5rem 1rem;\n        text-align: left;\n    }\n`;\nexport const Link = styled.a<{ $selected: boolean; $weight: TypographyWeight }>`\n    ${linkCss}\n`;\n\nexport const LinkButton = styled.button<{\n    $selected: boolean;\n    $weight: TypographyWeight;\n}>`\n    ${linkCss}\n    background: none;\n    border: 0;\n    padding: 0;\n    cursor: pointer;\n    text-align: left;\n    margin: 0;\n    box-shadow: none;\n    font: inherit;\n    color: inherit;\n`;\n\nexport const LinkLabel = styled.div`\n    flex: 1;\n\n    overflow: hidden;\n    display: -webkit-box;\n    -webkit-box-orient: vertical;\n    -webkit-line-clamp: 3;\n    white-space: pre-wrap;\n`;\n\nexport const LinkIndicator = styled.div<StyleProps>`\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    height: 0.25rem;\n    background-color: ${Colour[\"border-selected\"]};\n\n    ${(props) =>\n        props.$selected &&\n        css`\n            ${Link}:active &,\n            ${Link}:hover &,\n            ${Link}:focus &,\n            ${LinkButton}:active &,\n            ${LinkButton}:hover &,\n            ${LinkButton}:focus & {\n                background-color: ${Colour[\"border-selected-hover\"]};\n            }\n        `};\n\n    ${MediaQuery.MaxWidth.lg} {\n        left: 0;\n        right: unset;\n        top: 0;\n        bottom: 0;\n        height: 100%;\n        width: 0.25rem;\n    }\n`;\n\nexport const LinkIconContainer = styled.div`\n    margin-right: -0.5rem;\n`;\n\nexport const ExpandCollapseButton = styled(ClickableIcon)<StyleProps>`\n    padding: 0.5rem;\n    transform: rotate(${(props) => (props.$expanded ? 0 : 180)}deg);\n    transition: transform 300ms ease-in-out;\n    margin: auto 0.25rem auto 0;\n`;\n\nexport const ChevronIcon = styled(ChevronUpIcon)<StyleProps>`\n    height: 1.25rem;\n    width: 1.25rem;\n    color: ${Colour.icon};\n\n    ${Link}:active &,\n    ${Link}:hover &,\n    ${Link}:focus &,\n    ${LinkButton}:active &,\n    ${LinkButton}:hover &,\n    ${LinkButton}:focus & {\n        color: ${(props) =>\n            props.$selected\n                ? Colour[\"icon-selected-hover\"]\n                : Colour[\"icon-hover\"]};\n    }\n`;\n\nexport const ChevronIconDesktop = styled(ChevronIcon)<StyleProps>`\n    transform: rotate(${(props) => (props.$expanded ? 0 : 180)}deg);\n    transition: transform 300ms ease-in-out;\n\n    height: 1.125rem;\n    width: 1.125rem;\n`;\n"],"names":["Wrapper","styled","ul","props","$alignLeft","MediaQuery","MaxWidth","lg","MobileWrapper","LinkItem","li","$hiddenBranding","linkCss","css","Font","$weight","ThemeNavbar","$selected","Link","a","LinkButton","button","LinkLabel","div","LinkIndicator","Colour","LinkIconContainer","ExpandCollapseButton","ClickableIcon","$expanded","ChevronIcon","ChevronUpIcon","icon","ChevronIconDesktop"],"mappings":"4TA6BO,MAAMA,EAAUC,EAAOC,EAAqB;;;;;MAK5CC,GAAUA,EAAMC,YAAc;;MAE/BC,EAAWC,SAASC;;;EAKbC,EAAgBP,EAAOC,EAAE;;;;MAIhCG,EAAWC,SAASC;;;;;EAUbE,EAAWR,EAAOS,EAAkB;;;;;;uBAMzBP,GAAWA,EAAMQ,gBAAkB,UAAY;;;MAGjEN,EAAWC,SAASC;;;;;;EAQpBK,EAAUC,CAAsD;MAC/DV,GAAUW,EAAK,WAAWX,EAAMY;;;;;;aAM1BC,EAAY;;;;;;;;iBAQPb,GACNA,EAAMc,UACAD,EAAY,0CACZA,EAAY;;;MAGxBX,EAAWC,SAASC;;;;;EAMbW,EAAOjB,EAAOkB,CAAoD;MACzEP;EAGOQ,EAAanB,EAAOoB,MAG/B;MACIT;;;;;;;;;;EAYOU,EAAYrB,EAAOsB,GAAG;;;;;;;;EAUtBC,EAAgBvB,EAAOsB,GAAe;;;;;;wBAM3BE,EAAO;;MAExBtB,GACCA,EAAMc,WACNJ,CAAG;cACGK;cACAA;cACAA;cACAE;cACAA;cACAA;oCACsBK,EAAO;;;;MAIrCpB,EAAWC,SAASC;;;;;;;;EAUbmB,EAAoBzB,EAAOsB,GAAG;;EAI9BI,EAAuB1B,EAAO2B,EAA0B;;wBAE5CzB,GAAWA,EAAM0B,UAAY,EAAI;;;EAK7CC,EAAc7B,EAAO8B,EAA0B;;;aAG/CN,EAAOO;;MAEdd;MACAA;MACAA;MACAE;MACAA;MACAA;iBACYjB,GACNA,EAAMc,UACAQ,EAAO,uBACPA,EAAO;;EAIZQ,EAAqBhC,EAAO6B,EAAwB;wBACxC3B,GAAWA,EAAM0B,UAAY,EAAI;;;;;"}
+{"version":3,"file":"navbar-items.styles.js","sources":["../../src/navbar/navbar-items.styles.tsx"],"sourcesContent":["import { ChevronUpIcon } from \"@lifesg/react-icons/chevron-up\";\nimport styled, { css } from \"styled-components\";\nimport { ClickableIcon } from \"../shared/clickable-icon\";\nimport { Font, MediaQuery, Spacing } from \"../theme\";\nimport { Colour } from \"../theme\";\nimport { ThemeNavbar } from \"../theme/components/theme-helper\";\nimport { TypographyWeight } from \"../typography\";\n\n// =============================================================================\n// STYLE INTERFACE, transient props are denoted with $\n// See more https://styled-components.com/docs/api#transient-props\n// =============================================================================\ninterface StyleProps {\n    $selected: boolean;\n    $expanded?: boolean;\n}\n\ninterface WrapperStyleProps {\n    $alignLeft: boolean | undefined;\n}\n\ninterface ItemStyleProps {\n    $hiddenBranding: boolean | undefined;\n}\n\n// =============================================================================\n// WRAPPER\n// =============================================================================\n\nexport const Wrapper = styled.ul<WrapperStyleProps>`\n    display: flex;\n    list-style: none;\n    position: relative;\n\n    ${(props) => props.$alignLeft && \"margin-right: auto;\"}\n\n    ${MediaQuery.MaxWidth.lg} {\n        display: none;\n    }\n`;\n\nexport const MobileWrapper = styled.ul`\n    display: none;\n    list-style: none;\n\n    ${MediaQuery.MaxWidth.lg} {\n        display: flex;\n        flex-direction: column;\n        overflow: hidden;\n    }\n`;\n\n// =============================================================================\n// LINK ITEMS\n// =============================================================================\nexport const LinkItem = styled.li<ItemStyleProps>`\n    display: flex;\n    margin: 0 1rem;\n\n    &:first-child {\n        // negative margin to preserve touch target size for link\n        margin-left: ${(props) => (props.$hiddenBranding ? \"-0.5rem\" : \"0\")};\n    }\n\n    ${MediaQuery.MaxWidth.lg} {\n        flex-direction: column;\n        width: 100%;\n        margin-left: 0rem;\n    }\n`;\n\nconst linkCss = css<{ $selected: boolean; $weight: TypographyWeight }>`\n    ${(props) => Font[`body-md-${props.$weight}`]}\n\n    display: flex;\n    position: relative;\n    align-items: center;\n    text-align: center;\n    color: ${ThemeNavbar[\"navbar-link-colour-text\"]};\n    height: 100%;\n    gap: ${Spacing[\"spacing-16\"]};\n\n    &:active,\n    &:hover,\n    &:focus,\n    &:focus-within {\n        color: ${(props) =>\n            props.$selected\n                ? ThemeNavbar[\"navbar-link-colour-text-selected-hover\"]\n                : ThemeNavbar[\"navbar-link-colour-text-hover\"]};\n    }\n\n    ${MediaQuery.MaxWidth.lg} {\n        width: 100%;\n        padding: 10px ${Spacing[\"spacing-24\"]};\n        text-align: left;\n    }\n`;\nexport const Link = styled.a<{ $selected: boolean; $weight: TypographyWeight }>`\n    ${linkCss}\n`;\n\nexport const LinkButton = styled.button<{\n    $selected: boolean;\n    $weight: TypographyWeight;\n}>`\n    ${linkCss}\n    background: none;\n    border: 0;\n    padding: 0;\n    cursor: pointer;\n    text-align: left;\n    margin: 0;\n    box-shadow: none;\n    font: inherit;\n    color: inherit;\n`;\n\nexport const LinkLabel = styled.div`\n    flex: 1;\n\n    overflow: hidden;\n    display: -webkit-box;\n    -webkit-box-orient: vertical;\n    -webkit-line-clamp: 3;\n    white-space: pre-wrap;\n`;\n\nexport const LinkIndicator = styled.div<StyleProps>`\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    height: 0.25rem;\n    background-color: ${Colour[\"border-selected\"]};\n\n    ${(props) =>\n        props.$selected &&\n        css`\n            ${Link}:active &,\n            ${Link}:hover &,\n            ${Link}:focus &,\n            ${LinkButton}:active &,\n            ${LinkButton}:hover &,\n            ${LinkButton}:focus & {\n                background-color: ${Colour[\"border-selected-hover\"]};\n            }\n        `};\n\n    ${MediaQuery.MaxWidth.lg} {\n        left: 0;\n        right: unset;\n        top: 0;\n        bottom: 0;\n        height: 100%;\n        width: 0.25rem;\n    }\n`;\n\nexport const LinkIconContainer = styled.div`\n    margin-right: -0.5rem;\n`;\n\nexport const ExpandCollapseButton = styled(ClickableIcon)<StyleProps>`\n    padding: 0.5rem;\n    transform: rotate(${(props) => (props.$expanded ? 0 : 180)}deg);\n    transition: transform 300ms ease-in-out;\n    margin: auto 0;\n`;\n\nexport const ChevronIcon = styled(ChevronUpIcon)<StyleProps>`\n    height: 1.25rem;\n    width: 1.25rem;\n    color: ${Colour.icon};\n\n    ${Link}:active &,\n    ${Link}:hover &,\n    ${Link}:focus &,\n    ${LinkButton}:active &,\n    ${LinkButton}:hover &,\n    ${LinkButton}:focus & {\n        color: ${(props) =>\n            props.$selected\n                ? Colour[\"icon-selected-hover\"]\n                : Colour[\"icon-hover\"]};\n    }\n`;\n\nexport const ChevronIconDesktop = styled(ChevronIcon)<StyleProps>`\n    transform: rotate(${(props) => (props.$expanded ? 0 : 180)}deg);\n    transition: transform 300ms ease-in-out;\n\n    height: 1.125rem;\n    width: 1.125rem;\n`;\n"],"names":["Wrapper","styled","ul","props","$alignLeft","MediaQuery","MaxWidth","lg","MobileWrapper","LinkItem","li","$hiddenBranding","linkCss","css","Font","$weight","ThemeNavbar","Spacing","$selected","Link","a","LinkButton","button","LinkLabel","div","LinkIndicator","Colour","LinkIconContainer","ExpandCollapseButton","ClickableIcon","$expanded","ChevronIcon","ChevronUpIcon","icon","ChevronIconDesktop"],"mappings":"yUA6BO,MAAMA,EAAUC,EAAOC,EAAqB;;;;;MAK5CC,GAAUA,EAAMC,YAAc;;MAE/BC,EAAWC,SAASC;;;EAKbC,EAAgBP,EAAOC,EAAE;;;;MAIhCG,EAAWC,SAASC;;;;;EAUbE,EAAWR,EAAOS,EAAkB;;;;;;uBAMzBP,GAAWA,EAAMQ,gBAAkB,UAAY;;;MAGjEN,EAAWC,SAASC;;;;;EAOpBK,EAAUC,CAAsD;MAC/DV,GAAUW,EAAK,WAAWX,EAAMY;;;;;;aAM1BC,EAAY;;WAEdC,EAAQ;;;;;;iBAMDd,GACNA,EAAMe,UACAF,EAAY,0CACZA,EAAY;;;MAGxBX,EAAWC,SAASC;;wBAEFU,EAAQ;;;EAInBE,EAAOlB,EAAOmB,CAAoD;MACzER;EAGOS,EAAapB,EAAOqB,MAG/B;MACIV;;;;;;;;;;EAYOW,EAAYtB,EAAOuB,GAAG;;;;;;;;EAUtBC,EAAgBxB,EAAOuB,GAAe;;;;;;wBAM3BE,EAAO;;MAExBvB,GACCA,EAAMe,WACNL,CAAG;cACGM;cACAA;cACAA;cACAE;cACAA;cACAA;oCACsBK,EAAO;;;;MAIrCrB,EAAWC,SAASC;;;;;;;;EAUboB,EAAoB1B,EAAOuB,GAAG;;EAI9BI,EAAuB3B,EAAO4B,EAA0B;;wBAE5C1B,GAAWA,EAAM2B,UAAY,EAAI;;;EAK7CC,EAAc9B,EAAO+B,EAA0B;;;aAG/CN,EAAOO;;MAEdd;MACAA;MACAA;MACAE;MACAA;MACAA;iBACYlB,GACNA,EAAMe,UACAQ,EAAO,uBACPA,EAAO;;EAIZQ,EAAqBjC,EAAO8B,EAAwB;wBACxC5B,GAAWA,EAAM2B,UAAY,EAAI;;;;;"}

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

@@ -1,2 +1,2 @@
-import{jsx as t}from"react/jsx-runtime";import r from"../external/dompurify/dist/purify.es.js";import e from"react";import{NBComponent as n,NotificationBanner as o}from"./notification-banner.js";const i=i=>e.forwardRef(((e,s)=>t(n,Object.assign({forwardedRef:s},e,{children:i.length>0?i.map(((e,n)=>{if("text"===e.type){const o=e.otherAttributes,i=r.sanitize(e.content);return t("p",Object.assign({},o,{dangerouslySetInnerHTML:{__html:i}}),n)}{const r=e.otherAttributes;return t(o.Link,Object.assign({},r,{children:e.content}),n)}})):(console.error("[NotificationBannerHOC] Empty data passed"),null)}))));export{i as withNotificationBanner};
+import{__rest as t}from"../_virtual/_tslib.js";import{jsx as r}from"react/jsx-runtime";import e from"../external/dompurify/dist/purify.es.js";import n from"react";import{NBComponent as i,NotificationBanner as o}from"./notification-banner.js";const s=s=>n.forwardRef(((n,a)=>r(i,Object.assign({forwardedRef:a},n,{children:s.length>0?s.map(((n,i)=>{var s;if("text"===n.type){const t=n.otherAttributes,o=e.sanitize(n.content);return r("p",Object.assign({},t,{dangerouslySetInnerHTML:{__html:o}}),i)}{const a=function(r){const{href:n}=r,i=t(r,["href"]);return"string"==typeof n&&e.isValidAttribute("a","href",n)?r:i}(null!==(s=n.otherAttributes)&&void 0!==s?s:{});return r(o.Link,Object.assign({},a,{children:n.content}),i)}})):(console.error("[NotificationBannerHOC] Empty data passed"),null)}))));export{s as withNotificationBanner};
 //# sourceMappingURL=notification-banner-hoc.js.map

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\";\nimport { NBComponent, NotificationBanner } from \"./notification-banner\";\nimport {\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":"mMAUO,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\";\nimport { NBComponent, NotificationBanner } from \"./notification-banner\";\nimport {\n    ContentLinkAttributes,\n    ContentTextAttributes,\n    NotificationBannerWithForwardedRefProps,\n    NotificationContentAttributes,\n} from \"./types\";\n\nfunction sanitizeLinkAttributes(\n    attrs: ContentLinkAttributes\n): ContentLinkAttributes {\n    const { href, ...rest } = attrs;\n\n    if (\n        typeof href !== \"string\" ||\n        !DOMPurify.isValidAttribute(\"a\", \"href\", href)\n    ) {\n        return rest;\n    }\n\n    return attrs;\n}\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 = sanitizeLinkAttributes(\n                            (attribute.otherAttributes ??\n                                {}) as ContentLinkAttributes\n                        );\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","attrs","href","rest","__rest","isValidAttribute","sanitizeLinkAttributes","_a","NotificationBanner","Link","console","error"],"mappings":"kPAyBO,MAAMA,EACTC,GAqDOC,EAAMC,YAnDa,CACtBC,EACAC,IA2CIC,EAACC,EAAWC,OAAAC,OAAA,CAACC,aAAcL,GAASD,EAAK,CAAAO,SAxCrCV,EAAKW,OAAS,EACPX,EAAKY,KAAI,CAACC,EAAWC,WACxB,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,EA1C9B,SACIO,GAEA,MAAMC,KAAEA,GAAkBD,EAATE,EAAIC,EAAKH,EAApB,CAAA,SAEN,MACoB,iBAATC,GACNN,EAAUS,iBAAiB,IAAK,OAAQH,GAKtCD,EAHIE,CAIf,CA6BgDG,CACM,QAAzBC,EAAAhB,EAAUG,uBAAe,IAAAa,EAAAA,EACtB,CAAA,GAER,OACIxB,EAACyB,EAAmBC,KAAIxB,OAAAC,OAAA,CAAA,EAEhBQ,EAAe,CAAAN,SAElBG,EAAUO,UAHNN,EAMjB,MAIRkB,QAAQC,MAAM,6CACP"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lifesg/react-design-system",
-  "version": "3.5.0-canary.7",
+  "version": "3.5.0",
   "description": "A component design system for LifeSG web apps",
   "keywords": [
     "design-system"