@eeacms/volto-hero-block 0.1.4 → 0.2.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
|
@@ -4,8 +4,16 @@ All notable changes to this project will be documented in this file. Dates are d
|
|
|
4
4
|
|
|
5
5
|
Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
|
|
6
6
|
|
|
7
|
+
#### [0.2.0](https://github.com/eea/volto-hero-block/compare/0.1.4...0.2.0)
|
|
8
|
+
|
|
9
|
+
- change(hero): implemented meta alignment and renamed several options for consistency [`df08d80`](https://github.com/eea/volto-hero-block/commit/df08d80201b079a083e8c742e763c7b144fb5724)
|
|
10
|
+
- fix(hero): image dimensions when full width and height isn't enabled [`69fb38e`](https://github.com/eea/volto-hero-block/commit/69fb38e9410f2a241a5d3babca9a712df946f859)
|
|
11
|
+
- change(hero): re-added quoted option to the hero block [`d8c9c59`](https://github.com/eea/volto-hero-block/commit/d8c9c59d7e7e5feaf592a52f9cc6ff23abca2fa2)
|
|
12
|
+
|
|
7
13
|
#### [0.1.4](https://github.com/eea/volto-hero-block/compare/0.1.3...0.1.4)
|
|
8
14
|
|
|
15
|
+
> 30 June 2022
|
|
16
|
+
|
|
9
17
|
|
|
10
18
|
#### [0.1.3](https://github.com/eea/volto-hero-block/compare/0.1.2...0.1.3)
|
|
11
19
|
|
package/package.json
CHANGED
|
@@ -8,7 +8,7 @@ Hero.propTypes = {
|
|
|
8
8
|
fullWidth: PropTypes.bool,
|
|
9
9
|
fullHeight: PropTypes.bool,
|
|
10
10
|
alignContent: PropTypes.string,
|
|
11
|
-
|
|
11
|
+
textAlign: PropTypes.string,
|
|
12
12
|
backgroundVariant: PropTypes.string,
|
|
13
13
|
quoted: PropTypes.bool,
|
|
14
14
|
spaced: PropTypes.bool,
|
|
@@ -64,7 +64,7 @@ function Hero({
|
|
|
64
64
|
</div>
|
|
65
65
|
<div
|
|
66
66
|
className={cx(
|
|
67
|
-
'hero-block-inner-wrapper d-flex
|
|
67
|
+
'hero-block-inner-wrapper d-flex',
|
|
68
68
|
`flex-items-${alignContent}`,
|
|
69
69
|
)}
|
|
70
70
|
>
|
|
@@ -74,26 +74,25 @@ function Hero({
|
|
|
74
74
|
);
|
|
75
75
|
}
|
|
76
76
|
|
|
77
|
-
Hero.Text = ({ children, styles }) => {
|
|
78
|
-
const { textVariant = 'white',
|
|
79
|
-
styles || {};
|
|
77
|
+
Hero.Text = ({ children, quoted, styles }) => {
|
|
78
|
+
const { textVariant = 'white', textAlign = 'left' } = styles || {};
|
|
80
79
|
return (
|
|
81
80
|
<div
|
|
82
81
|
className={cx(
|
|
83
82
|
'hero-block-text',
|
|
84
83
|
`color-fg-${textVariant}`,
|
|
85
|
-
`text-${
|
|
84
|
+
`text-${textAlign}`,
|
|
86
85
|
)}
|
|
87
86
|
>
|
|
88
|
-
<div className={
|
|
87
|
+
<div className={quoted ? 'quoted-wrapper' : ''}>{children}</div>
|
|
89
88
|
</div>
|
|
90
89
|
);
|
|
91
90
|
};
|
|
92
91
|
|
|
93
92
|
Hero.Meta = ({ children, styles }) => {
|
|
94
|
-
const {
|
|
93
|
+
const { buttonAlign = 'left' } = styles || {};
|
|
95
94
|
return (
|
|
96
|
-
<div className={cx('hero-block-meta', `text-${
|
|
95
|
+
<div className={cx('hero-block-meta', `text-${buttonAlign}`)}>
|
|
97
96
|
{children}
|
|
98
97
|
</div>
|
|
99
98
|
);
|
|
@@ -8,6 +8,7 @@ export default ({ data }) => {
|
|
|
8
8
|
fields: [
|
|
9
9
|
'fullWidth',
|
|
10
10
|
'fullHeight',
|
|
11
|
+
'quoted',
|
|
11
12
|
'spaced',
|
|
12
13
|
'inverted',
|
|
13
14
|
'buttonLabel',
|
|
@@ -28,6 +29,11 @@ export default ({ data }) => {
|
|
|
28
29
|
type: 'boolean',
|
|
29
30
|
defaultValue: true,
|
|
30
31
|
},
|
|
32
|
+
quoted: {
|
|
33
|
+
title: 'Quoted',
|
|
34
|
+
type: 'boolean',
|
|
35
|
+
defaultValue: false,
|
|
36
|
+
},
|
|
31
37
|
spaced: {
|
|
32
38
|
title: 'Spaced',
|
|
33
39
|
type: 'boolean',
|
|
@@ -68,40 +74,38 @@ export const stylingSchema = ({ intl }) => ({
|
|
|
68
74
|
id: 'default',
|
|
69
75
|
title: 'Default',
|
|
70
76
|
fields: [
|
|
71
|
-
// 'quoted',
|
|
72
|
-
'alignContent',
|
|
73
|
-
'justifyContent',
|
|
74
77
|
'backgroundVariant',
|
|
78
|
+
'alignContent',
|
|
79
|
+
'textAlign',
|
|
75
80
|
'textVariant',
|
|
76
81
|
'buttonVariant',
|
|
82
|
+
'buttonAlign',
|
|
77
83
|
],
|
|
78
84
|
},
|
|
79
85
|
],
|
|
80
86
|
properties: {
|
|
81
|
-
|
|
82
|
-
title: '
|
|
83
|
-
|
|
87
|
+
backgroundVariant: {
|
|
88
|
+
title: 'Background theme',
|
|
89
|
+
choices: [
|
|
90
|
+
['primary', 'Primary'],
|
|
91
|
+
['secondary', 'Secondary'],
|
|
92
|
+
['tertiary', 'Tertiary'],
|
|
93
|
+
['grey', 'Grey'],
|
|
94
|
+
],
|
|
84
95
|
},
|
|
85
96
|
alignContent: {
|
|
86
|
-
title: '
|
|
97
|
+
title: 'Content align',
|
|
87
98
|
choices: [
|
|
88
99
|
['start', 'Top'],
|
|
89
100
|
['center', 'Center'],
|
|
90
101
|
['end', 'Bottom'],
|
|
91
102
|
],
|
|
92
103
|
},
|
|
93
|
-
|
|
94
|
-
title: '
|
|
104
|
+
textAlign: {
|
|
105
|
+
title: 'Text align',
|
|
95
106
|
widget: 'align',
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
title: 'Background theme',
|
|
99
|
-
choices: [
|
|
100
|
-
['primary', 'Primary'],
|
|
101
|
-
['secondary', 'Secondary'],
|
|
102
|
-
['tertiary', 'Tertiary'],
|
|
103
|
-
['grey', 'Grey'],
|
|
104
|
-
],
|
|
107
|
+
actions: ['left', 'center', 'right'],
|
|
108
|
+
defaultValue: 'left',
|
|
105
109
|
},
|
|
106
110
|
textVariant: {
|
|
107
111
|
title: 'Text theme',
|
|
@@ -119,6 +123,12 @@ export const stylingSchema = ({ intl }) => ({
|
|
|
119
123
|
['tertiary', 'Tertiary'],
|
|
120
124
|
],
|
|
121
125
|
},
|
|
126
|
+
buttonAlign: {
|
|
127
|
+
title: 'Button align',
|
|
128
|
+
widget: 'align',
|
|
129
|
+
actions: ['left', 'center', 'right'],
|
|
130
|
+
defaultValue: 'left',
|
|
131
|
+
},
|
|
122
132
|
},
|
|
123
133
|
required: [],
|
|
124
134
|
});
|