@ilo-org/react 0.9.0 → 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 +16 -0
  2. package/lib/cjs/components/Hero/Hero.js +5 -3
  3. package/lib/esm/components/Hero/Hero.js +6 -4
  4. package/lib/types/react/src/components/Hero/Hero.props.d.ts +4 -0
  5. package/package.json +2 -2
  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 +15 -6
package/CHANGELOG.md CHANGED
@@ -1,5 +1,21 @@
1
1
  # @ilo-org/react
2
2
 
3
+ ## 0.9.1
4
+
5
+ ### Patch Changes
6
+
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
18
+
3
19
  ## 0.9.0
4
20
 
5
21
  ### Minor Changes
package/lib/cjs/components/Hero/Hero.js CHANGED
@@ -22,14 +22,16 @@ const HeroImage = ({ url, alt }) => {
22
22
  const defaultSrc = sortedUrls[sortedUrls.length - 1].src;
23
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: [jsxRuntime.jsx("div", Object.assign({ className: "hero--background" }, { children: image && jsxRuntime.jsx(HeroImage, Object.assign({}, image)) })), 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';
@@ -20,14 +20,16 @@ const HeroImage = ({ url, alt }) => {
20
20
  const defaultSrc = sortedUrls[sortedUrls.length - 1].src;
21
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: [jsx("div", Object.assign({ className: "hero--background" }, { children: image && jsx(HeroImage, Object.assign({}, image)) })), 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",
3
+ "version": "0.9.1",
4
4
  "description": "React components for the ILO's Design System",
5
5
  "keywords": [
6
6
  "ui_patterns",
@@ -76,7 +76,7 @@
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.12.0",
79
+ "@ilo-org/styles": "0.13.0",
80
80
  "@ilo-org/themes": "0.7.0",
81
81
  "@ilo-org/utils": "0.0.11"
82
82
  },
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
@@ -38,36 +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
67
  <div className="hero--background">
62
68
  {image && <HeroImage {...image} />}
63
69
  </div>
64
70
  {breadcrumb && (
65
- <div className="hero--breadcrumbs">
66
- <div className="hero--breadcrumbs--wrapper">
67
- <Breadcrumb {...breadcrumb} />
71
+ <>
72
+ <div className="hero--breadcrumbs">
73
+ <div className="hero--breadcrumbs--wrapper">
74
+ <Breadcrumb {...breadcrumb} />
75
+ </div>
68
76
  </div>
69
- </div>
77
+ </>
70
78
  )}
79
+ <div className="hero--card-offset"></div>
71
80
  <div className="hero--card">
72
81
  <HeroCard {...heroCard} />
73
82
  </div>