@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
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@eeacms/volto-hero-block",
3
- "version": "0.1.4",
3
+ "version": "0.2.0",
4
4
  "description": "@eeacms/volto-hero-block: Volto add-on",
5
5
  "main": "src/index.js",
6
6
  "author": "European Environment Agency: IDM2 A-Team",
@@ -8,7 +8,7 @@ Hero.propTypes = {
8
8
  fullWidth: PropTypes.bool,
9
9
  fullHeight: PropTypes.bool,
10
10
  alignContent: PropTypes.string,
11
- justifyContent: PropTypes.string,
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 ui container',
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', justifyContent = 'left', quoted } =
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-${justifyContent}`,
84
+ `text-${textAlign}`,
86
85
  )}
87
86
  >
88
- <div className={cx({ quoted })}>{children}</div>
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 { justifyContent = 'left' } = styles || {};
93
+ const { buttonAlign = 'left' } = styles || {};
95
94
  return (
96
- <div className={cx('hero-block-meta', `text-${justifyContent}`)}>
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
- quoted: {
82
- title: 'Quoted',
83
- type: 'boolean',
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: 'Align content',
97
+ title: 'Content align',
87
98
  choices: [
88
99
  ['start', 'Top'],
89
100
  ['center', 'Center'],
90
101
  ['end', 'Bottom'],
91
102
  ],
92
103
  },
93
- justifyContent: {
94
- title: 'Align Text',
104
+ textAlign: {
105
+ title: 'Text align',
95
106
  widget: 'align',
96
- },
97
- backgroundVariant: {
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
  });