@ilo-org/react 0.17.7 → 0.17.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/lib/cjs/components/Cards/CardGroup/CardGroup.js +4 -1
  2. package/lib/cjs/components/Cards/CardGroup/index.js +4 -1
  3. package/lib/cjs/components/Cards/MultilinkCard/MultiLinkCard.js +1 -0
  4. package/lib/esm/components/Cards/CardGroup/CardGroup.js +4 -1
  5. package/lib/esm/components/Cards/CardGroup/index.js +4 -1
  6. package/lib/esm/components/Cards/MultilinkCard/MultiLinkCard.js +1 -0
  7. package/lib/styles/components/logogrid.css +1 -1
  8. package/lib/styles/components/multilinkcard.css +1 -1
  9. package/lib/styles/index.css +2 -2
  10. package/lib/styles/monorepo.css +2 -2
  11. package/package.json +19 -22
package/lib/cjs/components/Cards/CardGroup/CardGroup.js CHANGED
@@ -3,6 +3,7 @@
3
3
  var jsxRuntime = require('react/jsx-runtime');
4
4
  var classNames = require('classnames');
5
5
  var hooks_useGlobalSettings = require('../../../hooks/useGlobalSettings.js');
6
+ var components_Button_Button = require('../../Button/Button.js');
6
7
  var components_Cards_DataCard_DataCard = require('../DataCard/DataCard.js');
7
8
  var components_Cards_DetailCard_DetailCard = require('../DetailCard/DetailCard.js');
8
9
  var components_Cards_FactlistCard_FactListCard = require('../FactlistCard/FactListCard.js');
@@ -15,6 +16,8 @@ require('tslib');
15
16
  require('react');
16
17
  require('../../../GlobalCtx-10114bdd.js');
17
18
  require('../../Link/Link.js');
19
+ require('../../Icon/Icon.js');
20
+ require('@ilo-org/icons-react');
18
21
  require('../../List/List.js');
19
22
  require('../../List/ListItem.js');
20
23
  require('../../LinkList/LinkList.js');
@@ -38,7 +41,7 @@ const CardGroup = ({ cards, titleLevel = "p", cardCount, cta, type, alignment, s
38
41
  [`${baseClass}__collapsed`]: collapsed,
39
42
  });
40
43
  return (jsxRuntime.jsxs("div", Object.assign({ className: cardGroupClasses }, { children: [jsxRuntime.jsx("div", Object.assign({ className: `${baseClass}--inner` }, { children: cards &&
41
- cards.map((card, index) => (jsxRuntime.jsx(Card, Object.assign({}, card, { size: size, theme: theme, alignment: alignment, titleLevel: titleLevel }), index))) })), cta && (jsxRuntime.jsx("div", Object.assign({ className: `${baseClass}--button-wrap` }, { children: jsxRuntime.jsx("a", Object.assign({ className: `${prefix}--button ${prefix}--button--medium ${prefix}--button--secondary`, href: cta.url }, { children: jsxRuntime.jsx("span", Object.assign({ className: "button__label" }, { children: cta.label })) })) })))] })));
44
+ cards.map((card, index) => (jsxRuntime.jsx(Card, Object.assign({}, card, { size: size, theme: theme, alignment: alignment, titleLevel: titleLevel }), index))) })), cta && (jsxRuntime.jsx("div", Object.assign({ className: `${baseClass}--button-wrap` }, { children: jsxRuntime.jsx(components_Button_Button, { kind: "button", type: "secondary", size: "medium", label: cta.label, url: cta.url }) })))] })));
42
45
  };
43
46
 
44
47
  module.exports = CardGroup;
package/lib/cjs/components/Cards/CardGroup/index.js CHANGED
@@ -7,8 +7,11 @@ require('../../../hooks/useGlobalSettings.js');
7
7
  require('tslib');
8
8
  require('react');
9
9
  require('../../../GlobalCtx-10114bdd.js');
10
- require('../DataCard/DataCard.js');
10
+ require('../../Button/Button.js');
11
11
  require('../../Link/Link.js');
12
+ require('../../Icon/Icon.js');
13
+ require('@ilo-org/icons-react');
14
+ require('../DataCard/DataCard.js');
12
15
  require('../DetailCard/DetailCard.js');
13
16
  require('../FactlistCard/FactListCard.js');
14
17
  require('../../List/List.js');
package/lib/cjs/components/Cards/MultilinkCard/MultiLinkCard.js CHANGED
@@ -17,6 +17,7 @@ const MultilinkCard = ({ isvideo, eyebrow, title, size = "standard", alignment,
17
17
  [`${baseClass}__size__${size}`]: size,
18
18
  [`${baseClass}__isvideo`]: isvideo,
19
19
  [`${baseClass}__linklist`]: linklist,
20
+ [`${baseClass}__no-image`]: !image,
20
21
  });
21
22
  return (jsxRuntime.jsxs("div", Object.assign({ className: cardClasses }, { children: [link && (jsxRuntime.jsx("a", Object.assign({ className: `${baseClass}--link`, href: link, title: title }, { children: jsxRuntime.jsx("span", Object.assign({ className: `${baseClass}--link--text` }, { children: title })) }))), jsxRuntime.jsxs("div", Object.assign({ className: `${baseClass}--wrap` }, { children: [image && (jsxRuntime.jsx("div", Object.assign({ className: `${baseClass}--image--wrapper` }, { children: jsxRuntime.jsx("picture", { children: jsxRuntime.jsx("img", { className: `${baseClass}--picture`, src: image, alt: title }) }) }))), jsxRuntime.jsxs("div", Object.assign({ className: `${baseClass}--content` }, { children: [eyebrow && jsxRuntime.jsx("p", Object.assign({ className: `${baseClass}--eyebrow` }, { children: eyebrow })), title && TitleElement ? (jsxRuntime.jsx(TitleElement, Object.assign({ className: `${baseClass}--title` }, { children: title }))) : (jsxRuntime.jsx("p", Object.assign({ className: `${baseClass}--title` }, { children: title }))), image && (jsxRuntime.jsx("div", Object.assign({ className: `${baseClass}--image--wrapper` }, { children: jsxRuntime.jsx("picture", { children: jsxRuntime.jsx("img", { className: `${baseClass}--picture`, src: image, alt: title }) }) }))), intro && jsxRuntime.jsx("p", Object.assign({ className: `${baseClass}--intro` }, { children: intro })), linklist && (jsxRuntime.jsx(components_LinkList_LinkList, { headline: linklist.headline, linkgroup: linklist.linkgroup }))] }))] }))] })));
22
23
  };
package/lib/esm/components/Cards/CardGroup/CardGroup.js CHANGED
@@ -1,6 +1,7 @@
1
1
  import { jsxs, jsx } from 'react/jsx-runtime';
2
2
  import classNames from 'classnames';
3
3
  import useGlobalSettings from '../../../hooks/useGlobalSettings.js';
4
+ import Button from '../../Button/Button.js';
4
5
  import DataCard from '../DataCard/DataCard.js';
5
6
  import DetailCard from '../DetailCard/DetailCard.js';
6
7
  import FactlistCard from '../FactlistCard/FactListCard.js';
@@ -13,6 +14,8 @@ import 'tslib';
13
14
  import 'react';
14
15
  import '../../../GlobalCtx-7fb23cfa.js';
15
16
  import '../../Link/Link.js';
17
+ import '../../Icon/Icon.js';
18
+ import '@ilo-org/icons-react';
16
19
  import '../../List/List.js';
17
20
  import '../../List/ListItem.js';
18
21
  import '../../LinkList/LinkList.js';
@@ -36,7 +39,7 @@ const CardGroup = ({ cards, titleLevel = "p", cardCount, cta, type, alignment, s
36
39
  [`${baseClass}__collapsed`]: collapsed,
37
40
  });
38
41
  return (jsxs("div", Object.assign({ className: cardGroupClasses }, { children: [jsx("div", Object.assign({ className: `${baseClass}--inner` }, { children: cards &&
39
- cards.map((card, index) => (jsx(Card, Object.assign({}, card, { size: size, theme: theme, alignment: alignment, titleLevel: titleLevel }), index))) })), cta && (jsx("div", Object.assign({ className: `${baseClass}--button-wrap` }, { children: jsx("a", Object.assign({ className: `${prefix}--button ${prefix}--button--medium ${prefix}--button--secondary`, href: cta.url }, { children: jsx("span", Object.assign({ className: "button__label" }, { children: cta.label })) })) })))] })));
42
+ cards.map((card, index) => (jsx(Card, Object.assign({}, card, { size: size, theme: theme, alignment: alignment, titleLevel: titleLevel }), index))) })), cta && (jsx("div", Object.assign({ className: `${baseClass}--button-wrap` }, { children: jsx(Button, { kind: "button", type: "secondary", size: "medium", label: cta.label, url: cta.url }) })))] })));
40
43
  };
41
44
 
42
45
  export { CardGroup as default };
package/lib/esm/components/Cards/CardGroup/index.js CHANGED
@@ -5,8 +5,11 @@ import '../../../hooks/useGlobalSettings.js';
5
5
  import 'tslib';
6
6
  import 'react';
7
7
  import '../../../GlobalCtx-7fb23cfa.js';
8
- import '../DataCard/DataCard.js';
8
+ import '../../Button/Button.js';
9
9
  import '../../Link/Link.js';
10
+ import '../../Icon/Icon.js';
11
+ import '@ilo-org/icons-react';
12
+ import '../DataCard/DataCard.js';
10
13
  import '../DetailCard/DetailCard.js';
11
14
  import '../FactlistCard/FactListCard.js';
12
15
  import '../../List/List.js';
package/lib/esm/components/Cards/MultilinkCard/MultiLinkCard.js CHANGED
@@ -15,6 +15,7 @@ const MultilinkCard = ({ isvideo, eyebrow, title, size = "standard", alignment,
15
15
  [`${baseClass}__size__${size}`]: size,
16
16
  [`${baseClass}__isvideo`]: isvideo,
17
17
  [`${baseClass}__linklist`]: linklist,
18
+ [`${baseClass}__no-image`]: !image,
18
19
  });
19
20
  return (jsxs("div", Object.assign({ className: cardClasses }, { children: [link && (jsx("a", Object.assign({ className: `${baseClass}--link`, href: link, title: title }, { children: jsx("span", Object.assign({ className: `${baseClass}--link--text` }, { children: title })) }))), jsxs("div", Object.assign({ className: `${baseClass}--wrap` }, { children: [image && (jsx("div", Object.assign({ className: `${baseClass}--image--wrapper` }, { children: jsx("picture", { children: jsx("img", { className: `${baseClass}--picture`, src: image, alt: title }) }) }))), jsxs("div", Object.assign({ className: `${baseClass}--content` }, { children: [eyebrow && jsx("p", Object.assign({ className: `${baseClass}--eyebrow` }, { children: eyebrow })), title && TitleElement ? (jsx(TitleElement, Object.assign({ className: `${baseClass}--title` }, { children: title }))) : (jsx("p", Object.assign({ className: `${baseClass}--title` }, { children: title }))), image && (jsx("div", Object.assign({ className: `${baseClass}--image--wrapper` }, { children: jsx("picture", { children: jsx("img", { className: `${baseClass}--picture`, src: image, alt: title }) }) }))), intro && jsx("p", Object.assign({ className: `${baseClass}--intro` }, { children: intro })), linklist && (jsx(LinkList, { headline: linklist.headline, linkgroup: linklist.linkgroup }))] }))] }))] })));
20
21
  };
package/lib/styles/components/logogrid.css CHANGED
@@ -1 +1 @@
1
- .ilo--logo-grid--logos{display:flex;flex-flow:row wrap;grid-gap:.857449089rem}.ilo--logo-grid--link{text-decoration:none;transition:background-color .2s ease-in-out}.ilo--logo-grid__theme__dark .ilo--logo-grid--link:hover,.ilo--logo-grid__theme__light .ilo--logo-grid--link:hover{background-color:#ebf5fd}.ilo--logo-grid--item{display:flex;align-items:center;justify-content:center;height:7.18113612rem;flex:100%}.ilo--logo-grid__theme__light .ilo--logo-grid--item{background-color:#edf0f2}.ilo--logo-grid__theme__dark .ilo--logo-grid--item{background-color:#fff}.ilo--logo-grid--item img{width:auto;height:auto;max-width:8.038585209rem;max-height:2.679528403rem}
1
+ .ilo--logo-grid{--grid-gap:0.857449089rem}.ilo--logo-grid--logos{display:grid;grid-template-columns:1fr;gap:var(--grid-gap)}@media screen and (min-width:414px){.ilo--logo-grid--logos{grid-template-columns:repeat(2,1fr)}}@media screen and (min-width:610px){.ilo--logo-grid--logos{grid-template-columns:repeat(2,1fr)}.ilo--logo-grid--logos:has(>:nth-child(3)){grid-template-columns:repeat(3,1fr)}}.ilo--logo-grid--link{text-decoration:none;transition:background-color .2s ease-in-out}.ilo--logo-grid__theme__dark .ilo--logo-grid--link:hover,.ilo--logo-grid__theme__light .ilo--logo-grid--link:hover{background-color:#ebf5fd}.ilo--logo-grid--item{display:flex;align-items:center;justify-content:center;height:7.18113612rem;padding:0 12px;grid-column:span 1}.ilo--logo-grid__theme__light .ilo--logo-grid--item{background-color:#edf0f2}.ilo--logo-grid__theme__dark .ilo--logo-grid--item{background-color:#fff}.ilo--logo-grid--item img{width:100%;height:auto;max-width:9.6463022508rem;max-height:5.6806002144rem;object-fit:contain}
package/lib/styles/components/multilinkcard.css CHANGED
@@ -1 +1 @@
1
- .ilo--card__type__multilink{--max-width:28.7245444802rem;padding:calc(6 * var(--ilo-spacing-base))}.ilo--card__type__multilink .ilo--card--image--wrapper{display:none}.ilo--card__type__multilink .ilo--card--content .ilo--card--image--wrapper{display:block;margin-bottom:calc(8 * var(--ilo-spacing-base))}@media screen and (min-width:610px){.ilo--card__type__multilink{padding:calc(10 * var(--ilo-spacing-base))}}@media screen and (min-width:1024px){.ilo--card__type__multilink{padding:calc(14 * var(--ilo-spacing-base)) calc(12 * var(--ilo-spacing-base))}}.ilo--card__type__multilink .ilo--card--title{font-size:23.32px;letter-spacing:-.035em;line-height:29.15px;margin-bottom:calc(8 * var(--ilo-spacing-base));color:#2d2d2d}@media screen and (min-width:610px){.ilo--card__type__multilink .ilo--card--title{font-size:29.16px;letter-spacing:-.035em;line-height:36.45px}}.ilo--card__type__multilink .ilo--card--intro{font-size:16px;letter-spacing:normal;line-height:23.36px;margin-bottom:calc(8 * var(--ilo-spacing-base));color:#2d2d2d}@media screen and (min-width:610px){.ilo--card__type__multilink .ilo--card--intro{font-size:18.66px;letter-spacing:normal;line-height:27.24px}}.ilo--card__type__multilink.ilo--card__size__standard{--max-width:28.7245444802rem;padding:calc(12 * var(--ilo-spacing-base)) calc(10 * var(--ilo-spacing-base))}.ilo--card__type__multilink.ilo--card__size__narrow{--max-width:20.0964630225rem;padding:calc(10 * var(--ilo-spacing-base)) calc(6 * var(--ilo-spacing-base)) calc(12 * var(--ilo-spacing-base))}.ilo--card__type__multilink.ilo--card__size__narrow .ilo--card--image--wrapper{display:none}.ilo--card__type__multilink.ilo--card__size__narrow .ilo--card--content .ilo--card--image--wrapper{display:block;margin-bottom:calc(6 * var(--ilo-spacing-base))}@media screen and (min-width:610px){.ilo--card__type__multilink.ilo--card__size__narrow .ilo--card--title{font-size:23.32px;letter-spacing:-.035em;line-height:29.15px;margin-bottom:calc(6 * var(--ilo-spacing-base))}}@media screen and (min-width:610px){.ilo--card__type__multilink.ilo--card__size__narrow .ilo--card--intro{font-size:16px;letter-spacing:normal;line-height:23.36px;margin-bottom:calc(6 * var(--ilo-spacing-base))}}.ilo--card__type__multilink.ilo--card__size__fluid,.ilo--card__type__multilink.ilo--card__size__wide{--max-width:59.1639871383rem;padding:calc(10 * var(--ilo-spacing-base)) calc(6 * var(--ilo-spacing-base)) calc(12 * var(--ilo-spacing-base))}.ilo--card__type__multilink.ilo--card__size__fluid .ilo--card--title,.ilo--card__type__multilink.ilo--card__size__wide .ilo--card--title{margin-bottom:calc(3 * var(--ilo-spacing-base))}@media screen and (min-width:610px){.ilo--card__type__multilink.ilo--card__size__fluid,.ilo--card__type__multilink.ilo--card__size__wide{padding:calc(14 * var(--ilo-spacing-base)) calc(12 * var(--ilo-spacing-base))}.ilo--card__type__multilink.ilo--card__size__fluid.ilo--card__align__right .ilo--card--wrap,.ilo--card__type__multilink.ilo--card__size__wide.ilo--card__align__right .ilo--card--wrap{flex-direction:row-reverse}.ilo--card__type__multilink.ilo--card__size__fluid .ilo--card--wrap,.ilo--card__type__multilink.ilo--card__size__wide .ilo--card--wrap{display:flex;column-gap:1.7148981779rem}.ilo--card__type__multilink.ilo--card__size__fluid .ilo--card--image--wrapper,.ilo--card__type__multilink.ilo--card__size__wide .ilo--card--image--wrapper{display:block;width:50%}.ilo--card__type__multilink.ilo--card__size__fluid .ilo--card--content,.ilo--card__type__multilink.ilo--card__size__wide .ilo--card--content{width:50%}.ilo--card__type__multilink.ilo--card__size__fluid .ilo--card--content .ilo--card--image--wrapper,.ilo--card__type__multilink.ilo--card__size__wide .ilo--card--content .ilo--card--image--wrapper{display:none}}.ilo--card__type__multilink .ilo--link-list{position:relative;z-index:3}
1
+ .ilo--card__type__multilink{--max-width:28.7245444802rem;padding:calc(6 * var(--ilo-spacing-base))}.ilo--card__type__multilink .ilo--card--image--wrapper{display:none}.ilo--card__type__multilink .ilo--card--content .ilo--card--image--wrapper{display:block;margin-bottom:calc(8 * var(--ilo-spacing-base))}@media screen and (min-width:610px){.ilo--card__type__multilink{padding:calc(10 * var(--ilo-spacing-base))}}@media screen and (min-width:1024px){.ilo--card__type__multilink{padding:calc(14 * var(--ilo-spacing-base)) calc(12 * var(--ilo-spacing-base))}}.ilo--card__type__multilink .ilo--card--title{font-size:23.32px;letter-spacing:-.035em;line-height:29.15px;margin-bottom:calc(8 * var(--ilo-spacing-base));color:#2d2d2d}@media screen and (min-width:610px){.ilo--card__type__multilink .ilo--card--title{font-size:29.16px;letter-spacing:-.035em;line-height:36.45px}}.ilo--card__type__multilink .ilo--card--intro{font-size:16px;letter-spacing:normal;line-height:23.36px;margin-bottom:calc(8 * var(--ilo-spacing-base));color:#2d2d2d}@media screen and (min-width:610px){.ilo--card__type__multilink .ilo--card--intro{font-size:18.66px;letter-spacing:normal;line-height:27.24px}}.ilo--card__type__multilink.ilo--card__size__standard{--max-width:28.7245444802rem;padding:calc(12 * var(--ilo-spacing-base)) calc(10 * var(--ilo-spacing-base))}.ilo--card__type__multilink.ilo--card__size__narrow{--max-width:20.0964630225rem;padding:calc(10 * var(--ilo-spacing-base)) calc(6 * var(--ilo-spacing-base)) calc(12 * var(--ilo-spacing-base))}.ilo--card__type__multilink.ilo--card__size__narrow .ilo--card--image--wrapper{display:none}.ilo--card__type__multilink.ilo--card__size__narrow .ilo--card--content .ilo--card--image--wrapper{display:block;margin-bottom:calc(6 * var(--ilo-spacing-base))}@media screen and (min-width:610px){.ilo--card__type__multilink.ilo--card__size__narrow .ilo--card--title{font-size:23.32px;letter-spacing:-.035em;line-height:29.15px;margin-bottom:calc(6 * var(--ilo-spacing-base))}}@media screen and (min-width:610px){.ilo--card__type__multilink.ilo--card__size__narrow .ilo--card--intro{font-size:16px;letter-spacing:normal;line-height:23.36px;margin-bottom:calc(6 * var(--ilo-spacing-base))}}.ilo--card__type__multilink.ilo--card__size__fluid,.ilo--card__type__multilink.ilo--card__size__wide{--max-width:59.1639871383rem;padding:calc(10 * var(--ilo-spacing-base)) calc(6 * var(--ilo-spacing-base)) calc(12 * var(--ilo-spacing-base))}.ilo--card__type__multilink.ilo--card__size__fluid .ilo--card--title,.ilo--card__type__multilink.ilo--card__size__wide .ilo--card--title{margin-bottom:calc(3 * var(--ilo-spacing-base))}@media screen and (min-width:610px){.ilo--card__type__multilink.ilo--card__size__fluid,.ilo--card__type__multilink.ilo--card__size__wide{padding:calc(14 * var(--ilo-spacing-base)) calc(12 * var(--ilo-spacing-base))}.ilo--card__type__multilink.ilo--card__size__fluid.ilo--card__align__right .ilo--card--wrap,.ilo--card__type__multilink.ilo--card__size__wide.ilo--card__align__right .ilo--card--wrap{flex-direction:row-reverse}.ilo--card__type__multilink.ilo--card__size__fluid .ilo--card--wrap,.ilo--card__type__multilink.ilo--card__size__wide .ilo--card--wrap{display:flex;column-gap:1.7148981779rem}.ilo--card__type__multilink.ilo--card__size__fluid .ilo--card--image--wrapper,.ilo--card__type__multilink.ilo--card__size__wide .ilo--card--image--wrapper{display:block;width:50%}.ilo--card__type__multilink.ilo--card__size__fluid .ilo--card--content,.ilo--card__type__multilink.ilo--card__size__wide .ilo--card--content{width:50%}.ilo--card__type__multilink.ilo--card__size__fluid .ilo--card--content .ilo--card--image--wrapper,.ilo--card__type__multilink.ilo--card__size__wide .ilo--card--content .ilo--card--image--wrapper{display:none}.ilo--card__type__multilink.ilo--card__size__fluid.ilo--card--no-image,.ilo--card__type__multilink.ilo--card__size__wide.ilo--card--no-image{--max-width:49.3033226152rem}.ilo--card__type__multilink.ilo--card__size__fluid.ilo--card--no-image .ilo--card--content,.ilo--card__type__multilink.ilo--card__size__wide.ilo--card--no-image .ilo--card--content{width:100%}}.ilo--card__type__multilink .ilo--link-list{position:relative;z-index:3}