@ilo-org/react 0.21.0 → 0.22.0

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

@@ -1,4 +1,5 @@
 import { ButtonHTMLAttributes, ReactNode } from 'react';
+import { IconProps } from '../Icon';
 import { ButtonTypes, PositionTypes, SizeTypes } from '../../types';
 
 export type ButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "type"> & {
@@ -21,6 +22,14 @@ export type ButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "type">
     /**
      * Specify if the button should be rendered as link
      */
+    /**
+     * Specify the position of the icon
+     */
+    iconPosition?: PositionTypes;
+    /**
+     * Specify if the button renders an icon only
+     */
+    icononly?: boolean;
     link?: {
         /**
          * Specify the url for the Button's href
@@ -35,11 +44,7 @@ export type ButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "type">
          */
         target?: string;
     };
-    icon?: {
-        name: string;
-        position?: PositionTypes;
-        only?: boolean;
-    };
+    icon?: IconProps;
 };
 declare const Button: import('react').ForwardRefExoticComponent<Omit<ButtonHTMLAttributes<HTMLButtonElement>, "type"> & {
     /**
@@ -61,6 +66,14 @@ declare const Button: import('react').ForwardRefExoticComponent<Omit<ButtonHTMLA
     /**
      * Specify if the button should be rendered as link
      */
+    /**
+     * Specify the position of the icon
+     */
+    iconPosition?: PositionTypes | undefined;
+    /**
+     * Specify if the button renders an icon only
+     */
+    icononly?: boolean | undefined;
     link?: {
         /**
          * Specify the url for the Button's href
@@ -75,10 +88,6 @@ declare const Button: import('react').ForwardRefExoticComponent<Omit<ButtonHTMLA
          */
         target?: string | undefined;
     } | undefined;
-    icon?: {
-        name: string;
-        position?: PositionTypes | undefined;
-        only?: boolean | undefined;
-    } | undefined;
+    icon?: IconProps | undefined;
 } & import('react').RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
 export { Button };

package/lib/types/components/Cards/ScoreCard.d.ts

@@ -0,0 +1,60 @@
+import { PictureProps } from '../Picture';
+import { StatusProps } from '../Status';
+import { ButtonProps } from '../Button';
+
+export type ScoreCardProps = {
+    /**
+     * The theme of the card.
+     */
+    theme?: "light" | "dark";
+    /**
+     * The title level (h1, h2, h3, p, etc.).
+     */
+    titleLevel?: keyof JSX.IntrinsicElements;
+    /**
+     * The size of the card.
+     */
+    size?: "narrow" | "wide" | "fluid" | "simple";
+    /**
+     * The link URL for the card.
+     */
+    link: string;
+    /**
+     * The title text for the card.
+     */
+    title: string;
+    /**
+     * Whether the card represents a video.
+     */
+    isVideo?: boolean;
+    /**
+     * The image data for the card.
+     */
+    image?: PictureProps;
+    /**
+     * Status information for the card.
+     */
+    status?: StatusProps;
+    /**
+     * Eyebrow text to be displayed above the title.
+     */
+    eyebrow?: string;
+    /**
+     * Content to display in the card. Each item is an object with an icon, label, and optional unix date.
+     */
+    content?: {
+        items: {
+            icon: string;
+            label: string;
+            unix?: string;
+        }[];
+    };
+    /**
+     * Takes an array of `<Button />` components. Configure and handle the Button as needed and then pass it to the ScoreCard component.
+     */
+    cta?: {
+        items: React.ReactElement<ButtonProps>[];
+    };
+};
+declare const ScoreCard: import('react').ForwardRefExoticComponent<ScoreCardProps & import('react').RefAttributes<HTMLDivElement>>;
+export { ScoreCard };

package/lib/types/components/Cards/index.d.ts

@@ -7,3 +7,4 @@ export * from './FactListCard';
 export * from './DetailCard';
 export * from './DataCard';
 export * from './CardGroup';
+export * from './ScoreCard';

package/lib/types/components/Icon/Icon.props.d.ts

@@ -1,8 +1,9 @@
+export type IconSize = 16 | 20 | 24 | 32;
 export interface IconProps {
     /**
      * Specify if this should be hidden from screen readers
      */
-    hidden: boolean;
+    hidden?: boolean;
     /**
      * Specify the icon
      */
@@ -10,5 +11,17 @@ export interface IconProps {
     /**
      * Specify the icon's size
      */
-    size?: number;
+    size?: IconSize;
+    /**
+     * Specify the icon's color. This can also be a CSS variable. Defaults to `currentColor`
+     */
+    color?: string;
+    /**
+     * Give the icon a class name
+     */
+    className?: string;
+    /**
+     * Give the icon an id
+     */
+    id?: string;
 }

package/lib/types/components/Icon/index.d.ts

@@ -1 +1,2 @@
 export { default as Icon } from './Icon';
+export type { IconProps } from './Icon.props';

package/lib/types/components/Image/index.d.ts

@@ -1 +1,2 @@
 export { default as Image } from './Image';
+export type { ImageProps } from './Image.props';

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

@@ -0,0 +1,18 @@
+export type PictureURl = {
+    src: string;
+    breakpoint: number;
+};
+export type PictureProps = {
+    /**
+     * Image object containing URLs for different breakpoints.
+     */
+    url: PictureURl[] | string;
+    alt?: string;
+    loading?: "eager" | "lazy";
+    /**
+     * Optional class name to be applied to the picture element.
+     */
+    className?: string;
+};
+declare const Picture: import('react').ForwardRefExoticComponent<PictureProps & import('react').RefAttributes<HTMLPictureElement>>;
+export { Picture };

package/lib/types/components/Picture/index.d.ts

@@ -0,0 +1,2 @@
+export { Picture } from './Picture';
+export type { PictureProps } from './Picture';

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

@@ -0,0 +1,20 @@
+export type StatusProps = {
+    /**
+     * Specify the type of status.
+     */
+    statusType?: "active" | "info" | "alert" | "subtle" | "inactive";
+    /**
+     * The content inside the status component.
+     */
+    content: string;
+    /**
+     * The ID of the status element.
+     */
+    elementId?: string;
+    /**
+     * Optional class name for additional styling.
+     */
+    className?: string;
+};
+declare const Status: import('react').ForwardRefExoticComponent<StatusProps & import('react').RefAttributes<HTMLSpanElement>>;
+export { Status };

package/lib/types/components/Status/index.d.ts

@@ -0,0 +1,2 @@
+export { Status } from './Status';
+export type { StatusProps } from './Status';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ilo-org/react",
-  "version": "0.21.0",
+  "version": "0.22.0",
   "description": "React components for the ILO's Design System",
   "keywords": [
     "ui_patterns",
@@ -72,12 +72,12 @@
     "use-breakpoint": "^4.0.6",
     "video.js": "^7.21.2",
     "videojs-youtube": "^3.0.1",
-    "@ilo-org/fonts": "1.0.0",
+    "@ilo-org/brand-assets": "1.0.0",
     "@ilo-org/icons-react": "1.0.3",
+    "@ilo-org/fonts": "1.0.0",
+    "@ilo-org/styles": "1.6.0",
     "@ilo-org/themes": "0.9.1",
-    "@ilo-org/utils": "0.1.1",
-    "@ilo-org/styles": "1.5.0",
-    "@ilo-org/brand-assets": "1.0.0"
+    "@ilo-org/utils": "0.1.1"
   },
   "devDependencies": {
     "@storybook/addon-actions": "^8.1.9",
@@ -113,8 +113,8 @@
     "vite-plugin-static-copy": "^1.0.6",
     "vitest": "^2.0.5",
     "@ilo-org/eslint-config": "2.0.0",
-    "@ilo-org/typescript-config": "2.0.0",
-    "@ilo-org/prettier-config": "2.0.0"
+    "@ilo-org/prettier-config": "2.0.0",
+    "@ilo-org/typescript-config": "2.0.0"
   },
   "peerDependencies": {
     "react": "18 || 19",

package/lib/cjs/_store/Button-chunk-D32W9ElW.js

@@ -1 +0,0 @@
-"use strict";const t=require("react/jsx-runtime"),d=require("react"),j=require("./index-chunk-DCI82Tmm.js"),q=require("./useGlobalSettings-chunk-Pa38w6VS.js"),f=require("./Link-chunk-BfaKuVjz.js"),i=require("./Icon-chunk-Dej6jVSI.js"),g=d.forwardRef(({children:n,className:m,disabled:$=!1,icon:e,size:a="large",type:o="primary",style:u,name:b,link:r,...x},l)=>{const{prefix:_}=q.useGlobalSettings(),s=`${_}--button`,c=j.classnames(m,{[s]:!0,[`${s}__${a}`]:a,[`${s}__${o}`]:o,[`${s}--icon ${s}--icon--position__${(e==null?void 0:e.position)||"left"}`]:e&&!e.only,[`${s}--icon ${s}--icon--only`]:e&&e.only});return r?t.jsxs(f.Link,{ref:l,className:c,target:r.target,url:r.url,label:r.label,style:u,children:[e&&t.jsx(i.Icon,{name:e.name,hidden:!0}),n]}):t.jsxs("button",{ref:l,className:c,disabled:$,style:u,name:b,...x,children:[t.jsx("span",{className:"button__label",children:n}),e&&t.jsx(i.Icon,{name:e.name,hidden:!0})]})});exports.Button=g;

package/lib/cjs/_store/CardGroup-chunk-C_EtI9iK.js

@@ -1 +0,0 @@
-"use strict";const s=require("react/jsx-runtime"),j=require("react"),h=require("./index-chunk-DCI82Tmm.js"),N=require("./useGlobalSettings-chunk-Pa38w6VS.js"),u=require("./Button-chunk-D32W9ElW.js"),C=require("./Link-chunk-BfaKuVjz.js"),b=require("./LinkList-chunk-Eu43ZSAZ.js"),q=require("./Profile-chunk-D1tXXPUO.js"),f=require("./List-entry-DzqbzyL4.js"),w=j.forwardRef(({className:p,title:r,theme:n="light",size:e="standard",color:x,intro:t,source:o,titleLevel:m="p"},d)=>{const{prefix:a}=N.useGlobalSettings(),_=`${a}--card`,$=h.classnames(`${_}--wrapper`,p),i=h.classnames(_,`${_}__type__stat`,{[`${_}__size__${String(e)}`]:e,[`${_}__theme__${n}`]:n,[`${_}__color__${x}`]:x});return s.jsx("div",{className:$,ref:d,children:s.jsx("div",{className:i,children:s.jsx("div",{className:`${_}--wrap`,children:s.jsxs("div",{className:`${_}--content`,children:[s.jsx(m,{className:`${_}--title`,children:r}),t&&s.jsx("p",{className:`${_}--intro`,children:t}),o&&s.jsx(C.Link,{className:`${_}--source`,url:o.url,label:o.label})]})})})})}),g=j.forwardRef(({className:p,title:r,size:n="standard",alignment:e,intro:x,link:t,linklist:o,image:m,titleLevel:d="p",eyebrow:a,isVideo:_,theme:$="light"},i)=>{const{prefix:c}=N.useGlobalSettings(),l=`${c}--card`,v=h.classnames(l,p,`${l}__type__multilink`,{[`${l}__align__${e}`]:e,[`${l}__action`]:t,[`${l}__size__${n}`]:n,[`${l}__isvideo`]:_,[`${l}--no-image`]:!m,[`${l}__theme__${$}`]:$});return s.jsxs("div",{className:v,ref:i,children:[t&&s.jsx("a",{className:`${l}--link`,href:t,title:r,children:s.jsx("span",{className:`${l}--link--text`,children:r})}),s.jsxs("div",{className:`${l}--wrap`,children:[m&&s.jsx("div",{className:`${l}--image--wrapper`,children:s.jsx("picture",{children:s.jsx("img",{src:m,alt:r,className:`${l}--picture`})})}),s.jsxs("div",{className:`${l}--content`,children:[a&&s.jsx("p",{className:`${l}--eyebrow`,children:a}),s.jsx(d,{className:`${l}--title`,children:r}),m&&s.jsx("div",{className:`${l}--image--wrapper`,children:s.jsx("picture",{children:s.jsx("img",{src:m,alt:r,className:`${l}--picture`})})}),x&&s.jsx("p",{className:`${l}--intro`,children:x}),o&&s.jsx(b.LinkList,{...o})]})]})]})}),k=j.forwardRef(({className:p,title:r,theme:n="light",size:e="narrow",date:x,profile:t,link:o,titleLevel:m="p",eyebrow:d},a)=>{const{prefix:_}=N.useGlobalSettings(),$=`${_}--card`,i=h.classnames(`${$}--wrapper`,p),c=h.classnames($,`${$}__type__text`,{[`${$}__action`]:o,[`${$}__size__${String(e)}`]:e,[`${$}__theme__${n}`]:n});return s.jsx("div",{className:i,ref:a,children:s.jsxs("div",{className:c,children:[s.jsx("a",{className:`${$}--link`,href:o,title:r,children:s.jsx("span",{className:`${$}--link--text`,children:r})}),s.jsx("div",{className:`${$}--wrap`,children:s.jsxs("div",{className:`${$}--content`,children:[d&&s.jsx("p",{className:`${$}--eyebrow`,children:d}),s.jsx(m,{className:`${$}--title`,children:r}),x&&s.jsx("time",{className:`${$}--date`,dateTime:x.unix,children:x.human}),t&&s.jsx(q.Profile,{avatar:t.avatar,description:t.description,link:t.link,name:t.name,role:t.role,theme:n})]})})]})})}),y=j.forwardRef(({className:p,title:r,theme:n="light",size:e="narrow",cornercut:x,intro:t,link:o,cta:m,titleLevel:d="p",eyebrow:a},_)=>{const{prefix:$}=N.useGlobalSettings(),i=`${$}--card`,c=h.classnames(`${i}--wrapper`,p,`${i}--wrapper__type__promo`,`${i}--wrapper__type__promo__size__${e}`),l=h.classnames(i,`${i}__type__promo`,{[`${i}__action`]:o,[`${i}__size__${String(e)}`]:e,[`${i}__theme__${n}`]:n,[`${i}__cornercut`]:x});return s.jsx("div",{className:c,ref:_,children:s.jsxs("div",{className:l,children:[s.jsx("a",{className:`${i}--link`,href:o,title:r,children:s.jsx("span",{className:`${i}--link--text`,children:r})}),s.jsx("div",{className:`${i}--wrap`,children:s.jsxs("div",{className:`${i}--content`,children:[a&&s.jsx("p",{className:`${i}--eyebrow`,children:a}),s.jsx(d,{className:`${i}--title`,children:r}),t&&s.jsx("p",{className:`${i}--intro`,children:t}),(m==null?void 0:m.label)&&s.jsx("div",{className:`${i}--cta`,children:s.jsx(u.Button,{link:{url:m.url,label:m.label},size:"medium",type:"primary"})})]})})]})})}),L=j.forwardRef(({className:p,title:r,theme:n="light",size:e="narrow",date:x,link:t,linklist:o,image:m,titleLevel:d="p",eyebrow:a,isVideo:_},$)=>{const{prefix:i}=N.useGlobalSettings(),c=`${i}--card`,l=h.classnames(c,p,`${c}__type__feature`,{[`${c}__action`]:t,[`${c}__size__${String(e)}`]:e,[`${c}__theme__${n}`]:n,[`${c}__isvideo`]:_,[`${c}__linklist`]:o});return s.jsxs("div",{className:l,ref:$,children:[t&&s.jsx("a",{className:`${c}--link`,href:t,title:r,children:s.jsx("span",{className:`${c}--link--text`,children:r})}),s.jsxs("div",{className:`${c}--wrap`,children:[m&&s.jsx("div",{className:`${c}--image--wrapper`,children:s.jsx("picture",{children:s.jsx("img",{src:m,alt:r,className:`${c}--picture`})})}),s.jsxs("div",{className:`${c}--content`,children:[a&&s.jsx("p",{className:`${c}--eyebrow`,children:a}),s.jsx(d,{className:`${c}--title`,children:r}),x&&s.jsx("time",{className:`${c}--date`,dateTime:x.unix,children:x.human}),o&&s.jsx(b.LinkList,{headline:o.headline,linkgroup:o.linkgroup,theme:n})]})]})]})}),S=j.forwardRef(({className:p,title:r,theme:n="light",size:e="narrow",date:x,details:t,link:o,titleLevel:m="p",eyebrow:d,intro:a,image:_,isVideo:$=!1},i)=>{const{prefix:c}=N.useGlobalSettings(),l=`${c}--card`,v=h.classnames(l,`${l}__type__detail`,p,{[`${l}__action`]:o,[`${l}__size__${String(e)}`]:e,[`${l}__theme__${n}`]:n,[`${l}__isvideo`]:$});return s.jsxs("div",{className:v,ref:i,children:[o&&s.jsx("a",{className:`${l}--link`,href:o,title:r,children:s.jsx("span",{className:`${l}--link--text`,children:r})}),s.jsxs("div",{className:`${l}--wrap`,children:[_&&s.jsx("div",{className:`${l}--image--wrapper`,children:s.jsx("picture",{children:s.jsx("img",{className:`${l}--picture`,src:_,alt:r})})}),s.jsxs("div",{className:`${l}--content`,children:[d&&s.jsx("p",{className:`${l}--eyebrow`,children:d}),r&&s.jsx(m,{className:`${l}--title`,children:r}),a&&s.jsx("p",{className:`${l}--intro`,children:a}),x&&s.jsx("time",{className:`${l}--date`,dateTime:x.unix,children:x.human}),t&&s.jsx("p",{className:`${l}--date-extra`,children:t})]})]})]})}),G=j.forwardRef(({title:p,theme:r="light",size:n="narrow",list:e,titleLevel:x="p",className:t},o)=>{const{prefix:m}=N.useGlobalSettings(),d=`${m}--card`,a=h.classnames(d,`${d}__type__factlist`,t,{[`${d}__size__${n}`]:n,[`${d}__theme__${r}`]:r});return s.jsx("div",{className:a,ref:o,children:s.jsx("div",{className:`${d}--wrap`,children:s.jsxs("div",{className:`${d}--content`,children:[p&&s.jsx(x,{className:`${m}--card--title`,children:p}),s.jsx(f.List,{alignment:"default",ordered:"unordered",theme:r,children:e.map(_=>s.jsx(f.List.Item,{children:s.jsx("p",{children:_})},_))})]})})})}),R=j.forwardRef(({eyebrow:p,size:r="narrow",image:n,dataset:e,columns:x="one",className:t},o)=>{var i;const{prefix:m}=N.useGlobalSettings(),d=r==="narrow"?"one":x,a=`${m}--card`,_=h.classnames(a,`${a}__type__data`,t,{[`${a}__size__${String(r)}`]:r,[`${a}__type__data__columns__${d}`]:d}),$=h.classnames(`${a}--content`,{[`${a}--content__with-image`]:n,[`${a}--content__no-image-with-links`]:!n&&(e==null?void 0:e.links),[`${a}--content__default`]:!n&&!(e!=null&&e.links)});return s.jsx("div",{className:_,ref:o,children:s.jsxs("div",{className:`${a}--wrap`,children:[!n&&p&&s.jsx("div",{className:`${a}--eyebrow`,children:p}),s.jsxs("div",{className:$,children:[n&&s.jsxs("div",{className:`${a}--area--image`,children:[p&&s.jsx("div",{className:`${a}--eyebrow`,children:p}),s.jsx("div",{className:`${a}--image`,children:s.jsx("picture",{children:s.jsx("img",{className:`${a}--picture`,src:n,alt:p})})})]}),(i=e==null?void 0:e.content)==null?void 0:i.items.map((c,l)=>s.jsxs("div",{className:`${a}--area--content`,children:[s.jsx("p",{className:`${a}__type__data--content-label`,children:c.label}),s.jsx("p",{className:`${a}__type__data--content-copy`,children:c.copy})]},l)),(e==null?void 0:e.files)&&s.jsx("div",{className:`${a}--area--files`,children:s.jsxs("div",{className:`${a}__type__data--content-files`,children:[s.jsx("p",{className:`${a}__type__data--content-label`,children:e.files.headline}),e.files.items.map((c,l)=>s.jsx(u.Button,{link:{url:c.url,label:c.label,target:c.target||"_self"},size:"small"},l))]})}),(e==null?void 0:e.cta)&&s.jsx("div",{className:`${a}--area--cta`,children:s.jsxs("div",{className:`${a}__type__data--content-cta`,children:[s.jsx("p",{className:`${a}__type__data--content-label`,children:e.cta.headline}),e.cta.items.map(c=>s.jsx(u.Button,{type:"secondary",size:"small",link:{url:c.url,label:c.label,target:c.target}},c.label))]})}),(e==null?void 0:e.links)&&s.jsx("div",{className:`${a}--area--links`,children:s.jsxs("div",{className:`${a}__type__data--content-links`,children:[s.jsx("p",{className:`${a}__type__data--content-label`,children:e.links.headline}),s.jsx("div",{className:`${a}__type__data--content-links-list`,children:e.links.items.map(c=>s.jsx(j.Fragment,{children:s.jsx(C.Link,{url:c.url,label:c.label,className:`${a}__type__data--content-link`})},c.label+c.url))})]})})]})]})})}),B={stat:w,multilink:g,text:k,promo:y,feature:L,detail:S,factlist:G,data:R},F=j.forwardRef(({type:p,group:r,cardCount:n="one",cta:e,collapsed:x=!1},t)=>{const o=B[p],{prefix:m}=N.useGlobalSettings(),d=`${m}--cardgroup`,a=h.classnames(d,`${d}__count__${n}`,{[`${d}__collapsed`]:x});return s.jsxs("div",{className:a,ref:t,children:[s.jsx("div",{className:`${d}--inner`,children:r.map((_,$)=>s.jsx(o,{..._},$))}),e&&s.jsx("div",{className:`${d}--button-wrap`,children:s.jsx(u.Button,{link:{url:e.url,label:e.label},type:"secondary",size:"medium"})})]})});exports.CardGroup=F;exports.DataCard=R;exports.DetailCard=S;exports.FactListCard=G;exports.FeatureCard=L;exports.MultiLinkCard=g;exports.PromoCard=y;exports.StatCard=w;exports.TextCard=k;

package/lib/cjs/_store/Cards-entry-C_9kqjEx.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("./CardGroup-chunk-C_EtI9iK.js");exports.CardGroup=a.CardGroup;exports.DataCard=a.DataCard;exports.DetailCard=a.DetailCard;exports.FactListCard=a.FactListCard;exports.FeatureCard=a.FeatureCard;exports.MultiLinkCard=a.MultiLinkCard;exports.PromoCard=a.PromoCard;exports.StatCard=a.StatCard;exports.TextCard=a.TextCard;