@ilo-org/react 0.23.3 → 0.24.0

package/lib/types/components/Callout/Callout.d.ts

@@ -27,7 +27,7 @@ export type CalloutProps = {
      */
     isCollapsible?: boolean;
     /**
-     * Specify if callout is open (only important for collapsible items)
+     * Specify if callout is open by default (only important for collapsible items)
      */
     isOpen?: boolean;
     /**

package/lib/types/components/Nav/Navigation.props.d.ts

@@ -24,10 +24,6 @@ export interface SubsiteNavCoreProps {
              */
             drawer?: ReactNode;
         };
-        /**
-         * The site or product name
-         */
-        name: string;
         /**
          * The handler to call when the branding is clicked
          */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ilo-org/react",
-  "version": "0.23.3",
+  "version": "0.24.0",
   "description": "React components for the ILO's Design System",
   "keywords": [
     "ui_patterns",
@@ -74,10 +74,10 @@
     "videojs-youtube": "^3.0.1",
     "@ilo-org/brand-assets": "1.0.0",
     "@ilo-org/fonts": "1.0.0",
+    "@ilo-org/icons-react": "1.0.3",
+    "@ilo-org/styles": "1.8.0",
     "@ilo-org/themes": "0.9.1",
-    "@ilo-org/utils": "0.1.1",
-    "@ilo-org/styles": "1.7.2",
-    "@ilo-org/icons-react": "1.0.3"
+    "@ilo-org/utils": "0.1.1"
   },
   "devDependencies": {
     "@storybook/addon-actions": "^8.1.9",
@@ -112,8 +112,8 @@
     "vite-plugin-dts": "^3.9.1",
     "vite-plugin-static-copy": "^1.0.6",
     "vitest": "^2.0.5",
-    "@ilo-org/eslint-config": "2.0.0",
     "@ilo-org/prettier-config": "2.0.0",
+    "@ilo-org/eslint-config": "2.0.0",
     "@ilo-org/typescript-config": "2.0.0"
   },
   "peerDependencies": {

package/lib/cjs/_store/Callout-chunk-BxN0hHA0.js

@@ -1 +0,0 @@
-"use strict";const e=require("react/jsx-runtime"),N=require("./index-chunk-D921N0ug.js"),r=require("react"),p=require("./useGlobalSettings-chunk-DEacV16j.js"),g=require("./Button-chunk-B65FgSLG.js"),b=r.forwardRef(({className:i,copy:d,cta:l,isCollapsible:t,isOpen:u=!0,toggleOpenLabel:c="Less",toggleClosedLabel:o="More",headline:x,type:n},_)=>{const{prefix:$}=p.useGlobalSettings(),s=`${$}--callout`,[a,m]=r.useState(u),j=N.classnames(s,i,{[`${s}__${n}`]:n,[`${s}--open`]:a,[`${s}--collapse`]:t}),h=a?c:o;return e.jsxs("div",{className:j,ref:_,children:[e.jsx("div",{className:`${s}__sidebar`,children:e.jsx("span",{className:`${s}--icon icon icon__${n}`})}),e.jsxs("div",{className:`${s}__content`,children:[e.jsxs("div",{className:`${s}__header`,children:[e.jsx("h5",{className:`${s}__title`,children:x}),t&&e.jsxs("button",{className:`${s}--toggle`,onClick:()=>m(!a),"data-open":c,"data-closed":o,children:[e.jsx("span",{className:`${s}--button-text`,children:h}),e.jsx("span",{className:`${s}--toggle--icon`,role:"presentation"})]})]}),e.jsx("p",{className:`${s}__description`,children:d}),l&&e.jsx("div",{className:`${s}__footer`,children:e.jsx(g.Button,{type:"secondary",size:"small",link:{url:l.url,label:l.label}})})]})]})});exports.Callout=b;

package/lib/cjs/_store/SubsiteNav-chunk-Cfmr4rbb.js

@@ -1 +0,0 @@
-"use strict";const e=require("react/jsx-runtime"),u=require("react"),N=require("./useGlobalSettings-chunk-DEacV16j.js"),I=require("react-dom"),b=require("./index-chunk-D921N0ug.js"),O=require("./LanguageToggle-chunk-DdIPnYuL.js"),B=require("./useBreakpoint-chunk-B5MpfIru.js"),q=({isOpen:l,className:r,navRef:c,children:s})=>{const{prefix:a}=N.useGlobalSettings(),t=u.useRef(null),m=`${a}--nav-dropdown`,i=u.useCallback(()=>{if(!(t!=null&&t.current)||!(c!=null&&c.current))return;const o=c.current.getBoundingClientRect();t.current.style.top=`${o.bottom}px`,t.current.style.width=`${o.width}px`},[c]);return u.useEffect(()=>(i(),window.addEventListener("resize",i),()=>{window.removeEventListener("resize",i)}),[c]),typeof document>"u"?null:I.createPortal(e.jsx("div",{ref:t,className:b.classnames({[m]:!0,[`${m}--open`]:l,className:r}),children:e.jsx("div",{className:`${m}__container`,children:s})}),document.body)},S=u.memo(q),$=l=>{const{label:r,component:c,...s}=l;return c?e.jsx(c,{...s,children:r}):e.jsx("a",{...s,children:r})},M=({menu:l})=>{const{prefix:r}=N.useGlobalSettings(),c=`${r}--nav-menu-grid`,s=[];for(let a=0;a<l.length;a+=5)s.push(l.slice(a,a+5));return e.jsx("div",{className:c,children:s.map((a,t)=>e.jsx("div",{className:`${c}__column`,children:a.map(m=>{var i;return e.jsx($,{className:`${c}__item`,href:m.href,label:m.label},(i=m.label)==null?void 0:i.toString())})},t))})},k=({menu:l})=>{const{prefix:r}=N.useGlobalSettings(),c=`${r}--nav-mobile-menu`;return e.jsx("ul",{className:`${c}`,children:l.map((s,a)=>{const t=typeof s.isActive=="function"?s.isActive():s.isActive;return e.jsxs("li",{className:`${c}__item`,children:[e.jsx($,{label:s.label,href:s.href,className:`${c}__link`}),t&&e.jsx("span",{className:`${c}__marked`})]},a)})})},C=({isOpen:l,onClose:r,header:c,widgets:s,children:a,className:t})=>{const{prefix:m}=N.useGlobalSettings(),i=u.useId(),o=`${m}--nav-mobile-drawer`;return typeof document>"u"?null:I.createPortal(e.jsxs("div",{id:`${o}__${i}`,className:b.classnames(o,t,{[`${o}--open`]:l}),children:[e.jsxs("div",{className:`${o}__header`,children:[e.jsx("div",{className:`${o}__header-main`,children:c}),e.jsx("button",{className:`${o}__header-close`,onClick:r,"aria-label":"Close navigation",children:e.jsx("span",{className:`${o}__header-close__icon`})})]}),e.jsxs("div",{className:`${o}__container`,children:[e.jsx("div",{className:`${o}__widgets`,children:s}),a]})]}),document.body)},D=({options:l,selected:r})=>{const c=(l==null?void 0:l.map(a=>({label:a.label,href:a.url})))||[],s=[{label:r,href:"#",isActive:!0},...c];return e.jsx(k,{menu:s})},L=({isOpen:l,navigationProps:{branding:r,menu:{items:c,labels:s},widgets:a},onClose:t})=>{var v,f,g;const{prefix:m}=N.useGlobalSettings(),[i,o]=u.useState(!1),[j,d]=u.useState(!1),h=u.useCallback(()=>{o(!1),d(!1)},[]),_=`${m}--nav-mobile`,x=i||j,p=c.slice(0,5),n=c.slice(5);return e.jsxs(C,{isOpen:l,onClose:t,header:e.jsxs("div",{className:`${_}__branding`,children:[e.jsx("div",{className:`${_}__logo`,children:r.logo.drawer||r.logo.main}),e.jsx("h3",{className:`${_}__name`,children:r.name})]}),widgets:e.jsxs("div",{className:`${_}__widgets`,children:[(a==null?void 0:a.search)&&e.jsxs("a",{className:`${_}__widgets-search`,href:a.search.url,"aria-label":"Search",children:[e.jsx("span",{className:`${_}__widgets-search__label`,children:a.search.label}),e.jsx("span",{className:`${_}__widgets-search__icon`})]}),(a==null?void 0:a.link)&&e.jsx($,{className:`${_}__widgets-link`,href:a.link.href,"aria-label":a.link.label,label:a.link.label}),(a==null?void 0:a.language)&&e.jsxs("button",{className:`${_}__widgets-language`,onClick:()=>d(!0),"aria-expanded":j,"aria-controls":"language-list","aria-label":"Select language",children:[e.jsxs("span",{className:`${_}__widgets-language__label`,children:[a.language.label,": ",a.language.language]}),e.jsx("span",{className:`${_}__widgets-language__icon`})]})]}),children:[e.jsx(k,{menu:p}),!!n.length&&e.jsxs("button",{className:`${_}__more`,onClick:()=>o(!0),"aria-expanded":i,"aria-controls":"more-items","aria-label":"More items",children:[s.more,e.jsx("span",{className:`${_}__more__icon`})]}),e.jsx(C,{className:`${_}__nested`,header:e.jsxs("button",{className:`${_}__nested__header`,onClick:h,"aria-label":"Back to menu",children:[e.jsx("span",{className:`${_}__nested__header__icon`}),s.backToMenu]}),widgets:e.jsx("span",{className:`${_}__nested__title`,children:i?s.more:(v=a==null?void 0:a.language)==null?void 0:v.label}),isOpen:x,onClose:h,"aria-modal":"true",children:i?e.jsx(k,{menu:n,id:"more-items"}):e.jsx(D,{selected:((f=a==null?void 0:a.language)==null?void 0:f.language)||"",options:(g=a==null?void 0:a.language)==null?void 0:g.options,id:"language-list"})})]})};function G({menu:l,split:r}){const{breakpoint:c}=B.useBreakpoint(),[s,a]=u.useState(!1),[t,m]=u.useState(!1),[i,o]=u.useState(!1),j=u.useRef(null),d=["xl","xxl"].includes(c||"md"),h=d?r.desktop:r.mobile,_=l.slice(0,h),x=l.slice(h);return u.useEffect(()=>{o(!0)},[]),{menu:{facade:_,more:x},more:[s,a],mobile:[t,m],isDesktop:d,isClient:i,ref:j}}const y=({className:l,menu:r,more:c})=>{const{prefix:s}=N.useGlobalSettings(),a=`${s}--nav-menu`;return e.jsxs("div",{className:b.classnames(a,l),children:[e.jsx("ul",{className:`${a}__list`,children:r.map(({isActive:t,...m})=>{var o;const i=typeof t=="function"?t():t;return e.jsx("li",{className:`${a}__item`,children:e.jsx($,{...m,className:b.classnames({[`${a}__link`]:!0,[`${a}__link--active`]:i,[m.className||""]:m.className})})},(o=m.label)==null?void 0:o.toString())})}),c&&e.jsxs("button",{onClick:c.onClick,className:b.classnames({[`${a}__more`]:!0,[`${a}__more--open`]:c.isOpen}),"aria-expanded":c.isOpen,"aria-haspopup":"menu",children:[c.label,e.jsx("span",{className:`${a}__more-icon`})]})]})},A=u.forwardRef(({props:{branding:l,menu:{items:r,labels:c},widgets:s}},a)=>{const{prefix:t}=N.useGlobalSettings(),{menu:{facade:m,more:i},more:[o,j],mobile:[d,h],isDesktop:_,ref:x,isClient:p}=G({menu:r,split:{desktop:4,mobile:2}});u.useImperativeHandle(a,()=>x.current);const n=`${t}--subsite-nav-compact`;return e.jsxs("header",{ref:x,className:n,children:[e.jsxs("div",{className:`${n}__container`,children:[e.jsxs("nav",{className:`${n}__nav`,children:[e.jsxs("div",{className:`${n}__branding`,onClick:l==null?void 0:l.onClick,role:"button","aria-label":"Branding",tabIndex:0,children:[e.jsx("div",{className:`${n}__branding-logo`,children:l.logo.main}),e.jsx("h3",{className:`${n}__branding-name`,children:l.name})]}),e.jsx(y,{className:`${n}__menu`,menu:m,more:i.length?{label:c.more,onClick:()=>j(!o),isOpen:o}:void 0})]}),s&&e.jsxs("div",{className:`${n}__widget-bar`,children:[e.jsx("span",{className:`${n}__widget-bar-corner`}),e.jsxs("div",{className:`${n}__widget-bar-content`,children:[s.link&&e.jsx($,{className:`${n}__widget-bar-link`,href:s.link.href,label:s.link.label}),s.language&&p&&e.jsx("div",{className:`${n}__widget-bar-language`,children:e.jsx(O.LanguageToggle,{theme:"dark",...s.language,hideIcon:!_})}),s.search&&e.jsx($,{href:s.search.url,className:`${n}__widget-bar-search`,label:"","aria-label":s.search.label})]})]}),e.jsx("button",{className:`${n}__burger`,"aria-label":"Toggle navigation","aria-expanded":d,onClick:()=>h(!d),children:e.jsx("span",{className:`${n}__burger-icon`})})]}),i&&p&&e.jsx(S,{isOpen:o,navRef:x,children:e.jsx(M,{menu:i})}),p&&e.jsx(L,{isOpen:d,onClose:()=>{h(!1)},navigationProps:{widgets:s,branding:l,menu:{items:r,labels:c}}})]})}),P=u.forwardRef(({props:{branding:l,menu:{items:r,labels:c},widgets:s}},a)=>{var v,f,g;const{prefix:t}=N.useGlobalSettings(),{menu:{facade:m,more:i},more:[o,j],mobile:[d,h],isDesktop:_,ref:x,isClient:p}=G({menu:r,split:{desktop:6,mobile:5}});u.useImperativeHandle(a,()=>x.current);const n=`${t}--subsite-nav-complex`;return e.jsxs("header",{ref:x,className:n,children:[e.jsx("div",{className:b.classnames(`${n}-bg--light`),children:e.jsxs("div",{className:b.classnames(`${n}__widgets`,`${n}__container`),children:[e.jsx("span",{className:`${n}__widgets-bar-corner`}),e.jsxs("span",{className:`${n}__widgets-bar`,children:[(s==null?void 0:s.link)&&e.jsx($,{href:s.link.href,label:s.link.label,className:`${n}__widgets-bar__link`}),(s==null?void 0:s.language)&&p&&e.jsx(O.LanguageToggle,{className:`${n}__widgets-bar__language`,...s.language,hideIcon:!_})]})]})}),e.jsx("div",{className:b.classnames(`${n}-bg--light`),children:e.jsxs("div",{className:b.classnames(`${n}__branding`,`${n}__container`),children:[e.jsxs("div",{className:`${n}__branding-main`,children:[e.jsx("div",{className:`${n}__branding-main__logo`,onClick:l==null?void 0:l.onClick,role:"button","aria-label":"Branding",tabIndex:0,children:l.logo.main}),e.jsx("h3",{className:`${n}__branding-main__name`,children:l.name})]}),e.jsxs("div",{className:`${n}__branding-tag`,children:[e.jsx("h4",{className:`${n}__branding-tag__main`,children:(v=l.tag)==null?void 0:v.main}),((f=l.tag)==null?void 0:f.sub)&&e.jsx("span",{className:`${n}__branding-tag__sub`,children:(g=l.tag)==null?void 0:g.sub})]})]})}),e.jsx("div",{className:b.classnames(`${n}-bg--dark`),children:e.jsxs("nav",{className:b.classnames(`${n}__nav`,`${n}__container`),children:[e.jsxs("div",{className:`${n}__nav-mobile`,children:[e.jsx("div",{className:`${n}__nav-mobile__logo`,onClick:l==null?void 0:l.onClick,role:"button","aria-label":"Branding",tabIndex:0,children:l.logo.mobile}),e.jsx("h3",{className:`${n}__nav-mobile__name`,children:l.name})]}),m&&e.jsx(y,{className:`${n}__nav-menu`,menu:m,more:i.length?{label:c.more,onClick:()=>j(!o),isOpen:o}:void 0}),(s==null?void 0:s.search)&&e.jsx("a",{className:`${n}__nav-search`,href:s.search.url,"aria-label":s.search.label,children:e.jsx("span",{className:`${n}__nav-search__icon`})}),e.jsx("button",{className:`${n}__nav-burger`,"aria-label":"Toggle navigation","aria-expanded":d,onClick:()=>h(!d),children:e.jsx("span",{className:`${n}__nav-burger__icon`})})]})}),i&&p&&e.jsx(S,{isOpen:o,navRef:x,children:e.jsx(M,{menu:i})}),p&&e.jsx(L,{isOpen:d,onClose:()=>{h(!1)},navigationProps:{widgets:s,branding:l,menu:{items:r,labels:c}}})]})}),R={complex:P,compact:A},T=u.forwardRef(({type:l="compact",props:r},c)=>{const s=R[l];return e.jsx(s,{ref:c,props:r})});exports.SubsiteNav=T;

package/lib/esm/_store/Callout-entry-BszOwKRO.js

@@ -1,4 +0,0 @@
-import { C as l } from "./Callout-chunk-DDK_yI_b.js";
-export {
-  l as Callout
-};

package/lib/esm/_store/Nav-entry-DII1wFGi.js

@@ -1,4 +0,0 @@
-import { S as o } from "./SubsiteNav-chunk-SOH4RAJ1.js";
-export {
-  o as SubsiteNav
-};