@ilo-org/react 0.9.0-next.2 → 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.
package/CHANGELOG.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# @ilo-org/react
|
|
2
2
|
|
|
3
|
-
## 0.9.0
|
|
3
|
+
## 0.9.0
|
|
4
4
|
|
|
5
5
|
### Minor Changes
|
|
6
6
|
|
|
@@ -8,34 +8,61 @@
|
|
|
8
8
|
|
|
9
9
|
### Patch Changes
|
|
10
10
|
|
|
11
|
-
- ca463b9b7: added full width on mobile viewport for affected cards
|
|
12
|
-
- Updated dependencies [55f0c47aa]
|
|
13
|
-
- Updated dependencies [b976f7221]
|
|
14
|
-
- Updated dependencies [ca463b9b7]
|
|
15
|
-
- @ilo-org/styles@0.11.3-next.2
|
|
16
|
-
|
|
17
|
-
## 0.8.14-next.1
|
|
18
|
-
|
|
19
|
-
### Patch Changes
|
|
20
|
-
|
|
21
|
-
- Updated dependencies [045602383]
|
|
22
|
-
- @ilo-org/styles@0.11.3-next.1
|
|
23
|
-
|
|
24
|
-
## 0.8.14-next.0
|
|
25
|
-
|
|
26
|
-
### Patch Changes
|
|
27
|
-
|
|
28
11
|
- cf4d43446: added hover effect for anchor item inside indented linked list
|
|
29
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
|
|
30
16
|
- Updated dependencies [ed548bcfc]
|
|
17
|
+
- Updated dependencies [4522e79de]
|
|
31
18
|
- Updated dependencies [bf1ec0843]
|
|
19
|
+
- Updated dependencies [34c8c9a8f]
|
|
20
|
+
- Updated dependencies [05a5a4b84]
|
|
32
21
|
- Updated dependencies [ccdb35c99]
|
|
33
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]
|
|
34
42
|
- Updated dependencies [1794fc434]
|
|
43
|
+
- Updated dependencies [c885bf0cd]
|
|
44
|
+
- Updated dependencies [ea4ac05ea]
|
|
35
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]
|
|
36
59
|
- Updated dependencies [1e58f9c7d]
|
|
37
|
-
|
|
38
|
-
|
|
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
|
|
39
66
|
|
|
40
67
|
## 0.8.13
|
|
41
68
|
|
|
@@ -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--
|
|
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: [
|
|
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;
|
|
@@ -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--
|
|
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: [
|
|
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
|
|
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.
|
|
80
|
-
"@ilo-org/themes": "0.7.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": {
|
|
@@ -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--
|
|
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
|
-
|
|
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">
|