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

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 (5) hide show
  1. package/CHANGELOG.md +47 -28
  2. package/lib/cjs/components/Hero/Hero.js +2 -2
  3. package/lib/esm/components/Hero/Hero.js +2 -2
  4. package/package.json +3 -3
  5. package/src/components/Hero/Hero.tsx +4 -2
package/CHANGELOG.md CHANGED
@@ -1,14 +1,6 @@
1
1
  # @ilo-org/react
2
2
 
3
- ## 0.9.0-next.3
4
-
5
- ### Patch Changes
6
-
7
- - Updated dependencies [6d089ba7f]
8
- - Updated dependencies [a8ce5d3fc]
9
- - @ilo-org/styles@0.11.3-next.3
10
-
11
- ## 0.9.0-next.2
3
+ ## 0.9.0
12
4
 
13
5
  ### Minor Changes
14
6
 
@@ -16,34 +8,61 @@
16
8
 
17
9
  ### Patch Changes
18
10
 
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
11
  - cf4d43446: added hover effect for anchor item inside indented linked list
37
12
  - 3be0a12ac: reduced padding for accordion inner panel
13
+ - ca463b9b7: added full width on mobile viewport for affected cards
14
+ - 5df8f748a: fixed text input invalid state
15
+ - ee17a3bd2: Top spacing should be removed in hero card when there is no image
38
16
  - Updated dependencies [ed548bcfc]
17
+ - Updated dependencies [4522e79de]
39
18
  - Updated dependencies [bf1ec0843]
19
+ - Updated dependencies [34c8c9a8f]
20
+ - Updated dependencies [05a5a4b84]
40
21
  - Updated dependencies [ccdb35c99]
41
22
  - Updated dependencies [cf4d43446]
23
+ - Updated dependencies [e8cec8dfc]
24
+ - Updated dependencies [045602383]
25
+ - Updated dependencies [5e051fc7a]
26
+ - Updated dependencies [d74847eff]
27
+ - Updated dependencies [b04dd21bb]
28
+ - Updated dependencies [060748c0f]
29
+ - Updated dependencies [ff62947c3]
30
+ - Updated dependencies [02a0e177e]
31
+ - Updated dependencies [a010a5077]
32
+ - Updated dependencies [9b960abc2]
33
+ - Updated dependencies [55f0c47aa]
34
+ - Updated dependencies [30b275924]
35
+ - Updated dependencies [690efdabb]
36
+ - Updated dependencies [e48c3cdbd]
37
+ - Updated dependencies [01c4126c2]
38
+ - Updated dependencies [309733cdd]
39
+ - Updated dependencies [2b02101ef]
40
+ - Updated dependencies [4a5afb00e]
41
+ - Updated dependencies [aa4dce006]
42
42
  - Updated dependencies [1794fc434]
43
+ - Updated dependencies [c885bf0cd]
44
+ - Updated dependencies [ea4ac05ea]
43
45
  - Updated dependencies [3be0a12ac]
46
+ - Updated dependencies [f0dbaa608]
47
+ - Updated dependencies [b976f7221]
48
+ - Updated dependencies [ca463b9b7]
49
+ - Updated dependencies [6d089ba7f]
50
+ - Updated dependencies [ec4cec224]
51
+ - Updated dependencies [a8ce5d3fc]
52
+ - Updated dependencies [bec744d2e]
53
+ - Updated dependencies [6be769d3f]
54
+ - Updated dependencies [5df8f748a]
55
+ - Updated dependencies [ee17a3bd2]
56
+ - Updated dependencies [cfba6422c]
57
+ - Updated dependencies [03d0b6549]
58
+ - Updated dependencies [b972abe2e]
44
59
  - Updated dependencies [1e58f9c7d]
45
- - @ilo-org/styles@0.11.3-next.0
46
- - @ilo-org/themes@0.7.0-next.0
60
+ - Updated dependencies [f0e5b51b9]
61
+ - Updated dependencies [76db527a0]
62
+ - Updated dependencies [70c645779]
63
+ - Updated dependencies [86189a0d7]
64
+ - @ilo-org/styles@0.12.0
65
+ - @ilo-org/themes@0.7.0
47
66
 
48
67
  ## 0.8.13
49
68
 
package/lib/cjs/components/Hero/Hero.js CHANGED
@@ -20,7 +20,7 @@ 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
25
  const Hero = ({ justify = "start", align = "baseline", cardSize = "small", posterSize = "large", image, breadcrumb, heroCard, caption, }) => {
26
26
  const baseClass = "hero";
@@ -29,7 +29,7 @@ const Hero = ({ justify = "start", align = "baseline", cardSize = "small", poste
29
29
  const cardSizeClass = `${baseClass}__card-size__${cardSize}`;
30
30
  const posterSizeClass = `${baseClass}__poster-size__${posterSize}`;
31
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)) })) })))] })));
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)) })) })))] })));
33
33
  };
34
34
 
35
35
  module.exports = Hero;
package/lib/esm/components/Hero/Hero.js CHANGED
@@ -18,7 +18,7 @@ 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
23
  const Hero = ({ justify = "start", align = "baseline", cardSize = "small", posterSize = "large", image, breadcrumb, heroCard, caption, }) => {
24
24
  const baseClass = "hero";
@@ -27,7 +27,7 @@ const Hero = ({ justify = "start", align = "baseline", cardSize = "small", poste
27
27
  const cardSizeClass = `${baseClass}__card-size__${cardSize}`;
28
28
  const posterSizeClass = `${baseClass}__poster-size__${posterSize}`;
29
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)) })) })))] })));
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)) })) })))] })));
31
31
  };
32
32
 
33
33
  export { Hero as default };
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.0",
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.12.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.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
@@ -58,7 +58,9 @@ const Hero: FC<HeroProps> = ({
58
58
 
59
59
  return (
60
60
  <div className={heroClasses}>
61
- {image ? <HeroImage {...image} /> : <div className="hero--figure" />}
61
+ <div className="hero--background">
62
+ {image && <HeroImage {...image} />}
63
+ </div>
62
64
  {breadcrumb && (
63
65
  <div className="hero--breadcrumbs">
64
66
  <div className="hero--breadcrumbs--wrapper">