@ilo-org/react 0.9.0-next.3 → 0.9.1

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 (8) hide show
  1. package/CHANGELOG.md +59 -24
  2. package/lib/cjs/components/Hero/Hero.js +6 -4
  3. package/lib/esm/components/Hero/Hero.js +7 -5
  4. package/lib/types/react/src/components/Hero/Hero.props.d.ts +4 -0
  5. package/package.json +3 -3
  6. package/src/components/Hero/Hero.args.ts +28 -0
  7. package/src/components/Hero/Hero.props.ts +5 -0
  8. package/src/components/Hero/Hero.tsx +19 -8
package/CHANGELOG.md CHANGED
@@ -1,14 +1,22 @@
1
1
  # @ilo-org/react
2
2
 
3
- ## 0.9.0-next.3
3
+ ## 0.9.1
4
4
 
5
5
  ### Patch Changes
6
6
 
7
- - Updated dependencies [6d089ba7f]
8
- - Updated dependencies [a8ce5d3fc]
9
- - @ilo-org/styles@0.11.3-next.3
7
+ - afb53cabb: Sync hero with twig implementation
8
+ - Updated dependencies [df7080c80]
9
+ - Updated dependencies [c5eaabd55]
10
+ - Updated dependencies [720825342]
11
+ - Updated dependencies [6f86e7a94]
12
+ - Updated dependencies [94b03b9be]
13
+ - Updated dependencies [c54ce9923]
14
+ - Updated dependencies [6fe60e0d6]
15
+ - Updated dependencies [9ed7b873d]
16
+ - Updated dependencies [c173ec9f8]
17
+ - @ilo-org/styles@0.13.0
10
18
 
11
- ## 0.9.0-next.2
19
+ ## 0.9.0
12
20
 
13
21
  ### Minor Changes
14
22
 
@@ -16,34 +24,61 @@
16
24
 
17
25
  ### Patch Changes
18
26
 
19
- - ca463b9b7: added full width on mobile viewport for affected cards
20
- - Updated dependencies [55f0c47aa]
21
- - Updated dependencies [b976f7221]
22
- - Updated dependencies [ca463b9b7]
23
- - @ilo-org/styles@0.11.3-next.2
24
-
25
- ## 0.8.14-next.1
26
-
27
- ### Patch Changes
28
-
29
- - Updated dependencies [045602383]
30
- - @ilo-org/styles@0.11.3-next.1
31
-
32
- ## 0.8.14-next.0
33
-
34
- ### Patch Changes
35
-
36
27
  - cf4d43446: added hover effect for anchor item inside indented linked list
37
28
  - 3be0a12ac: reduced padding for accordion inner panel
29
+ - ca463b9b7: added full width on mobile viewport for affected cards
30
+ - 5df8f748a: fixed text input invalid state
31
+ - ee17a3bd2: Top spacing should be removed in hero card when there is no image
38
32
  - Updated dependencies [ed548bcfc]
33
+ - Updated dependencies [4522e79de]
39
34
  - Updated dependencies [bf1ec0843]
35
+ - Updated dependencies [34c8c9a8f]
36
+ - Updated dependencies [05a5a4b84]
40
37
  - Updated dependencies [ccdb35c99]
41
38
  - Updated dependencies [cf4d43446]
39
+ - Updated dependencies [e8cec8dfc]
40
+ - Updated dependencies [045602383]
41
+ - Updated dependencies [5e051fc7a]
42
+ - Updated dependencies [d74847eff]
43
+ - Updated dependencies [b04dd21bb]
44
+ - Updated dependencies [060748c0f]
45
+ - Updated dependencies [ff62947c3]
46
+ - Updated dependencies [02a0e177e]
47
+ - Updated dependencies [a010a5077]
48
+ - Updated dependencies [9b960abc2]
49
+ - Updated dependencies [55f0c47aa]
50
+ - Updated dependencies [30b275924]
51
+ - Updated dependencies [690efdabb]
52
+ - Updated dependencies [e48c3cdbd]
53
+ - Updated dependencies [01c4126c2]
54
+ - Updated dependencies [309733cdd]
55
+ - Updated dependencies [2b02101ef]
56
+ - Updated dependencies [4a5afb00e]
57
+ - Updated dependencies [aa4dce006]
42
58
  - Updated dependencies [1794fc434]
59
+ - Updated dependencies [c885bf0cd]
60
+ - Updated dependencies [ea4ac05ea]
43
61
  - Updated dependencies [3be0a12ac]
62
+ - Updated dependencies [f0dbaa608]
63
+ - Updated dependencies [b976f7221]
64
+ - Updated dependencies [ca463b9b7]
65
+ - Updated dependencies [6d089ba7f]
66
+ - Updated dependencies [ec4cec224]
67
+ - Updated dependencies [a8ce5d3fc]
68
+ - Updated dependencies [bec744d2e]
69
+ - Updated dependencies [6be769d3f]
70
+ - Updated dependencies [5df8f748a]
71
+ - Updated dependencies [ee17a3bd2]
72
+ - Updated dependencies [cfba6422c]
73
+ - Updated dependencies [03d0b6549]
74
+ - Updated dependencies [b972abe2e]
44
75
  - Updated dependencies [1e58f9c7d]
45
- - @ilo-org/styles@0.11.3-next.0
46
- - @ilo-org/themes@0.7.0-next.0
76
+ - Updated dependencies [f0e5b51b9]
77
+ - Updated dependencies [76db527a0]
78
+ - Updated dependencies [70c645779]
79
+ - Updated dependencies [86189a0d7]
80
+ - @ilo-org/styles@0.12.0
81
+ - @ilo-org/themes@0.7.0
47
82
 
48
83
  ## 0.8.13
49
84
 
package/lib/cjs/components/Hero/Hero.js CHANGED
@@ -20,16 +20,18 @@ const HeroImage = ({ url, alt }) => {
20
20
  // Sort the urls by breakpoint
21
21
  const sortedUrls = url.sort((a, b) => a.breakpoint - b.breakpoint);
22
22
  const defaultSrc = sortedUrls[sortedUrls.length - 1].src;
23
- return (jsxRuntime.jsx("figure", Object.assign({ className: "hero--figure" }, { children: jsxRuntime.jsxs("picture", { children: [sortedUrls.map((img) => (jsxRuntime.jsx("source", { srcSet: img.src, media: `(min-width: ${img.breakpoint}px)` }, img.breakpoint))), jsxRuntime.jsx("img", { className: imageClass, src: defaultSrc, alt: alt })] }) })));
23
+ return (jsxRuntime.jsx("figure", Object.assign({ className: "hero--image" }, { children: jsxRuntime.jsxs("picture", { children: [sortedUrls.map((img) => (jsxRuntime.jsx("source", { srcSet: img.src, media: `(min-width: ${img.breakpoint}px)` }, img.breakpoint))), jsxRuntime.jsx("img", { className: imageClass, src: defaultSrc, alt: alt })] }) })));
24
24
  };
25
- const Hero = ({ justify = "start", align = "baseline", cardSize = "small", posterSize = "large", image, breadcrumb, heroCard, caption, }) => {
25
+ const Hero = ({ justify = "start", align = "baseline", cardSize = "small", posterSize = "large", theme = "dark", image, breadcrumb, heroCard, caption, gap, }) => {
26
26
  const baseClass = "hero";
27
27
  const justifyClass = `${baseClass}__card-justify__${justify}`;
28
28
  const alignClass = `${baseClass}__card-align__${align}`;
29
29
  const cardSizeClass = `${baseClass}__card-size__${cardSize}`;
30
30
  const posterSizeClass = `${baseClass}__poster-size__${posterSize}`;
31
- const heroClasses = classNames(baseClass, justifyClass, alignClass, cardSizeClass, posterSizeClass);
32
- return (jsxRuntime.jsxs("div", Object.assign({ className: heroClasses }, { children: [image ? jsxRuntime.jsx(HeroImage, Object.assign({}, image)) : jsxRuntime.jsx("div", { className: "hero--figure" }), breadcrumb && (jsxRuntime.jsx("div", Object.assign({ className: "hero--breadcrumbs" }, { children: jsxRuntime.jsx("div", Object.assign({ className: "hero--breadcrumbs--wrapper" }, { children: jsxRuntime.jsx(components_Breadcrumb_Breadcrumb, Object.assign({}, breadcrumb)) })) }))), jsxRuntime.jsx("div", Object.assign({ className: "hero--card" }, { children: jsxRuntime.jsx(components_Hero_HeroCard, Object.assign({}, heroCard)) })), caption && (jsxRuntime.jsx("div", Object.assign({ className: "hero--caption" }, { children: jsxRuntime.jsx("div", Object.assign({ className: "hero--caption--wrapper" }, { children: jsxRuntime.jsx(components_Tooltip_Tooltip, Object.assign({}, caption)) })) })))] })));
31
+ const themeClass = `${baseClass}__card-theme__${theme}`;
32
+ const gapClass = `${baseClass}__gap__${gap}`;
33
+ const heroClasses = classNames(baseClass, justifyClass, alignClass, cardSizeClass, posterSizeClass, themeClass, { [gapClass]: !!gap });
34
+ return (jsxRuntime.jsxs("div", Object.assign({ className: heroClasses }, { children: [jsxRuntime.jsx("div", Object.assign({ className: "hero--background" }, { children: image && jsxRuntime.jsx(HeroImage, Object.assign({}, image)) })), breadcrumb && (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx("div", Object.assign({ className: "hero--breadcrumbs" }, { children: jsxRuntime.jsx("div", Object.assign({ className: "hero--breadcrumbs--wrapper" }, { children: jsxRuntime.jsx(components_Breadcrumb_Breadcrumb, Object.assign({}, breadcrumb)) })) })) })), jsxRuntime.jsx("div", { className: "hero--card-offset" }), jsxRuntime.jsx("div", Object.assign({ className: "hero--card" }, { children: jsxRuntime.jsx(components_Hero_HeroCard, Object.assign({}, heroCard)) })), caption && (jsxRuntime.jsx("div", Object.assign({ className: "hero--caption" }, { children: jsxRuntime.jsx("div", Object.assign({ className: "hero--caption--wrapper" }, { children: jsxRuntime.jsx(components_Tooltip_Tooltip, Object.assign({}, caption)) })) })))] })));
33
35
  };
34
36
 
35
37
  module.exports = Hero;
package/lib/esm/components/Hero/Hero.js CHANGED
@@ -1,4 +1,4 @@
1
- import { jsxs, jsx } from 'react/jsx-runtime';
1
+ import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
2
2
  import classNames from 'classnames';
3
3
  import useGlobalSettings from '../../hooks/useGlobalSettings.js';
4
4
  import HeroCard from './HeroCard.js';
@@ -18,16 +18,18 @@ const HeroImage = ({ url, alt }) => {
18
18
  // Sort the urls by breakpoint
19
19
  const sortedUrls = url.sort((a, b) => a.breakpoint - b.breakpoint);
20
20
  const defaultSrc = sortedUrls[sortedUrls.length - 1].src;
21
- return (jsx("figure", Object.assign({ className: "hero--figure" }, { children: jsxs("picture", { children: [sortedUrls.map((img) => (jsx("source", { srcSet: img.src, media: `(min-width: ${img.breakpoint}px)` }, img.breakpoint))), jsx("img", { className: imageClass, src: defaultSrc, alt: alt })] }) })));
21
+ return (jsx("figure", Object.assign({ className: "hero--image" }, { children: jsxs("picture", { children: [sortedUrls.map((img) => (jsx("source", { srcSet: img.src, media: `(min-width: ${img.breakpoint}px)` }, img.breakpoint))), jsx("img", { className: imageClass, src: defaultSrc, alt: alt })] }) })));
22
22
  };
23
- const Hero = ({ justify = "start", align = "baseline", cardSize = "small", posterSize = "large", image, breadcrumb, heroCard, caption, }) => {
23
+ const Hero = ({ justify = "start", align = "baseline", cardSize = "small", posterSize = "large", theme = "dark", image, breadcrumb, heroCard, caption, gap, }) => {
24
24
  const baseClass = "hero";
25
25
  const justifyClass = `${baseClass}__card-justify__${justify}`;
26
26
  const alignClass = `${baseClass}__card-align__${align}`;
27
27
  const cardSizeClass = `${baseClass}__card-size__${cardSize}`;
28
28
  const posterSizeClass = `${baseClass}__poster-size__${posterSize}`;
29
- const heroClasses = classNames(baseClass, justifyClass, alignClass, cardSizeClass, posterSizeClass);
30
- return (jsxs("div", Object.assign({ className: heroClasses }, { children: [image ? jsx(HeroImage, Object.assign({}, image)) : jsx("div", { className: "hero--figure" }), breadcrumb && (jsx("div", Object.assign({ className: "hero--breadcrumbs" }, { children: jsx("div", Object.assign({ className: "hero--breadcrumbs--wrapper" }, { children: jsx(Breadcrumb, Object.assign({}, breadcrumb)) })) }))), jsx("div", Object.assign({ className: "hero--card" }, { children: jsx(HeroCard, Object.assign({}, heroCard)) })), caption && (jsx("div", Object.assign({ className: "hero--caption" }, { children: jsx("div", Object.assign({ className: "hero--caption--wrapper" }, { children: jsx(Tooltip, Object.assign({}, caption)) })) })))] })));
29
+ const themeClass = `${baseClass}__card-theme__${theme}`;
30
+ const gapClass = `${baseClass}__gap__${gap}`;
31
+ const heroClasses = classNames(baseClass, justifyClass, alignClass, cardSizeClass, posterSizeClass, themeClass, { [gapClass]: !!gap });
32
+ return (jsxs("div", Object.assign({ className: heroClasses }, { children: [jsx("div", Object.assign({ className: "hero--background" }, { children: image && jsx(HeroImage, Object.assign({}, image)) })), breadcrumb && (jsx(Fragment, { children: jsx("div", Object.assign({ className: "hero--breadcrumbs" }, { children: jsx("div", Object.assign({ className: "hero--breadcrumbs--wrapper" }, { children: jsx(Breadcrumb, Object.assign({}, breadcrumb)) })) })) })), jsx("div", { className: "hero--card-offset" }), jsx("div", Object.assign({ className: "hero--card" }, { children: jsx(HeroCard, Object.assign({}, heroCard)) })), caption && (jsx("div", Object.assign({ className: "hero--caption" }, { children: jsx("div", Object.assign({ className: "hero--caption--wrapper" }, { children: jsx(Tooltip, Object.assign({}, caption)) })) })))] })));
31
33
  };
32
34
 
33
35
  export { Hero as default };
package/lib/types/react/src/components/Hero/Hero.props.d.ts CHANGED
@@ -36,6 +36,10 @@ export interface HeroProps {
36
36
  * Props for the card for the hero
37
37
  */
38
38
  heroCard: HeroCardProps;
39
+ /**
40
+ * Color of the gap space between bottom of the hero image and bottom of the card
41
+ */
42
+ gap?: "white" | "transparent" | "dark" | "light";
39
43
  /**
40
44
  * The size of the poster image
41
45
  */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ilo-org/react",
3
- "version": "0.9.0-next.3",
3
+ "version": "0.9.1",
4
4
  "description": "React components for the ILO's Design System",
5
5
  "keywords": [
6
6
  "ui_patterns",
@@ -76,8 +76,8 @@
76
76
  "@ilo-org/brand-assets": "0.2.0",
77
77
  "@ilo-org/fonts": "0.1.2",
78
78
  "@ilo-org/icons-react": "0.0.21",
79
- "@ilo-org/styles": "0.11.3-next.3",
80
- "@ilo-org/themes": "0.7.0-next.0",
79
+ "@ilo-org/styles": "0.13.0",
80
+ "@ilo-org/themes": "0.7.0",
81
81
  "@ilo-org/utils": "0.0.11"
82
82
  },
83
83
  "devDependencies": {
package/src/components/Hero/Hero.args.ts CHANGED
@@ -2,6 +2,7 @@ import { HeroProps } from "./Hero.props";
2
2
  import { defaultArgs } from "../SocialMedia";
3
3
  import { HeroCardProps } from "./HeroCard.props";
4
4
  import { ImageProps } from "../Image/Image.props";
5
+ import { BreadcrumbProps } from "../Breadcrumb/Breadcrumb.props";
5
6
 
6
7
  const lightArticleCard: HeroCardProps = {
7
8
  title: "Does Artificial Intelligence threaten decent work?",
@@ -55,8 +56,35 @@ const heroImage: ImageProps = {
55
56
  ],
56
57
  };
57
58
 
59
+ const heroBreadCrumb: BreadcrumbProps = {
60
+ home: {
61
+ indented: false,
62
+ label: "Home",
63
+ url: "/",
64
+ },
65
+ links: [
66
+ {
67
+ label: "Link One",
68
+ url: "https://www.ilo.org/",
69
+ },
70
+ {
71
+ label: "Link Two",
72
+ url: "https://www.ilo.org/",
73
+ },
74
+ {
75
+ label: "Link Three",
76
+ url: "https://www.ilo.org/",
77
+ },
78
+ {
79
+ label: "Link Four",
80
+ url: "https://www.ilo.org/",
81
+ },
82
+ ],
83
+ };
84
+
58
85
  const standard = {
59
86
  image: heroImage,
87
+ breadcrumb: heroBreadCrumb,
60
88
  heroCard: darkPortalCard,
61
89
  };
62
90
 
package/src/components/Hero/Hero.props.ts CHANGED
@@ -45,6 +45,11 @@ export interface HeroProps {
45
45
  */
46
46
  heroCard: HeroCardProps;
47
47
 
48
+ /**
49
+ * Color of the gap space between bottom of the hero image and bottom of the card
50
+ */
51
+ gap?: "white" | "transparent" | "dark" | "light";
52
+
48
53
  /**
49
54
  * The size of the poster image
50
55
  */
package/src/components/Hero/Hero.tsx CHANGED
@@ -18,7 +18,7 @@ const HeroImage: FC<ImageProps> = ({ url, alt }) => {
18
18
  const defaultSrc = sortedUrls[sortedUrls.length - 1].src;
19
19
 
20
20
  return (
21
- <figure className="hero--figure">
21
+ <figure className="hero--image">
22
22
  <picture>
23
23
  {sortedUrls.map((img) => (
24
24
  <source
@@ -38,34 +38,45 @@ const Hero: FC<HeroProps> = ({
38
38
  align = "baseline",
39
39
  cardSize = "small",
40
40
  posterSize = "large",
41
+ theme = "dark",
41
42
  image,
42
43
  breadcrumb,
43
44
  heroCard,
44
45
  caption,
46
+ gap,
45
47
  }) => {
46
48
  const baseClass = "hero";
47
49
  const justifyClass = `${baseClass}__card-justify__${justify}`;
48
50
  const alignClass = `${baseClass}__card-align__${align}`;
49
51
  const cardSizeClass = `${baseClass}__card-size__${cardSize}`;
50
52
  const posterSizeClass = `${baseClass}__poster-size__${posterSize}`;
53
+ const themeClass = `${baseClass}__card-theme__${theme}`;
54
+ const gapClass = `${baseClass}__gap__${gap}`;
55
+
51
56
  const heroClasses = classnames(
52
57
  baseClass,
53
58
  justifyClass,
54
59
  alignClass,
55
60
  cardSizeClass,
56
- posterSizeClass
61
+ posterSizeClass,
62
+ themeClass,
63
+ { [gapClass]: !!gap }
57
64
  );
58
-
59
65
  return (
60
66
  <div className={heroClasses}>
61
- {image ? <HeroImage {...image} /> : <div className="hero--figure" />}
67
+ <div className="hero--background">
68
+ {image && <HeroImage {...image} />}
69
+ </div>
62
70
  {breadcrumb && (
63
- <div className="hero--breadcrumbs">
64
- <div className="hero--breadcrumbs--wrapper">
65
- <Breadcrumb {...breadcrumb} />
71
+ <>
72
+ <div className="hero--breadcrumbs">
73
+ <div className="hero--breadcrumbs--wrapper">
74
+ <Breadcrumb {...breadcrumb} />
75
+ </div>
66
76
  </div>
67
- </div>
77
+ </>
68
78
  )}
79
+ <div className="hero--card-offset"></div>
69
80
  <div className="hero--card">
70
81
  <HeroCard {...heroCard} />
71
82
  </div>