@eeacms/volto-hero-block 0.1.2 → 0.2.0

package/CHANGELOG.md

@@ -4,8 +4,28 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+#### [0.2.0](https://github.com/eea/volto-hero-block/compare/0.1.4...0.2.0)
+
+- change(hero): implemented meta alignment and renamed several options for consistency [`df08d80`](https://github.com/eea/volto-hero-block/commit/df08d80201b079a083e8c742e763c7b144fb5724)
+- fix(hero): image dimensions when full width and height isn't enabled [`69fb38e`](https://github.com/eea/volto-hero-block/commit/69fb38e9410f2a241a5d3babca9a712df946f859)
+- change(hero): re-added quoted option to the hero block [`d8c9c59`](https://github.com/eea/volto-hero-block/commit/d8c9c59d7e7e5feaf592a52f9cc6ff23abca2fa2)
+
+#### [0.1.4](https://github.com/eea/volto-hero-block/compare/0.1.3...0.1.4)
+
+> 30 June 2022
+
+
+#### [0.1.3](https://github.com/eea/volto-hero-block/compare/0.1.2...0.1.3)
+
+> 30 June 2022
+
+- Cleanup themeing options [`#4`](https://github.com/eea/volto-hero-block/pull/4)
+
 #### [0.1.2](https://github.com/eea/volto-hero-block/compare/0.1.1...0.1.2)
 
+> 16 June 2022
+
+- Release [`#3`](https://github.com/eea/volto-hero-block/pull/3)
 - change(hero): wrap hero-block-image within a wrapper class [`2802c41`](https://github.com/eea/volto-hero-block/commit/2802c41ee8eba4c34bf6d4b4766ebafb24056602)
 - change(hero): added spaced and inverted options to the main schema [`b6865cd`](https://github.com/eea/volto-hero-block/commit/b6865cdc6dfae0d486f43fccfb31fa555af3a536)
 - change(hero): output h2 from slate instead of p tag [`0b2a4c5`](https://github.com/eea/volto-hero-block/commit/0b2a4c5070cc2bf97f31ff4cf74ade0e27434d91)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-hero-block",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "description": "@eeacms/volto-hero-block: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

package/src/components/Blocks/Hero/Hero.jsx

@@ -8,7 +8,7 @@ Hero.propTypes = {
   fullWidth: PropTypes.bool,
   fullHeight: PropTypes.bool,
   alignContent: PropTypes.string,
-  justifyContent: PropTypes.string,
+  textAlign: PropTypes.string,
   backgroundVariant: PropTypes.string,
   quoted: PropTypes.bool,
   spaced: PropTypes.bool,
@@ -64,7 +64,7 @@ function Hero({
       </div>
       <div
         className={cx(
-          'hero-block-inner-wrapper d-flex ui container',
+          'hero-block-inner-wrapper d-flex',
           `flex-items-${alignContent}`,
         )}
       >
@@ -74,26 +74,25 @@ function Hero({
   );
 }
 
-Hero.Text = ({ children, styles }) => {
-  const { textVariant = 'white', justifyContent = 'left', quoted } =
-    styles || {};
+Hero.Text = ({ children, quoted, styles }) => {
+  const { textVariant = 'white', textAlign = 'left' } = styles || {};
   return (
     <div
       className={cx(
         'hero-block-text',
         `color-fg-${textVariant}`,
-        `text-${justifyContent}`,
+        `text-${textAlign}`,
       )}
     >
-      <div className={cx({ quoted })}>{children}</div>
+      <div className={quoted ? 'quoted-wrapper' : ''}>{children}</div>
     </div>
   );
 };
 
 Hero.Meta = ({ children, styles }) => {
-  const { justifyContent = 'left' } = styles || {};
+  const { buttonAlign = 'left' } = styles || {};
   return (
-    <div className={cx('hero-block-meta', `text-${justifyContent}`)}>
+    <div className={cx('hero-block-meta', `text-${buttonAlign}`)}>
       {children}
     </div>
   );

package/src/components/Blocks/Hero/schema.js

@@ -8,6 +8,7 @@ export default ({ data }) => {
         fields: [
           'fullWidth',
           'fullHeight',
+          'quoted',
           'spaced',
           'inverted',
           'buttonLabel',
@@ -28,6 +29,11 @@ export default ({ data }) => {
         type: 'boolean',
         defaultValue: true,
       },
+      quoted: {
+        title: 'Quoted',
+        type: 'boolean',
+        defaultValue: false,
+      },
       spaced: {
         title: 'Spaced',
         type: 'boolean',
@@ -68,41 +74,38 @@ export const stylingSchema = ({ intl }) => ({
       id: 'default',
       title: 'Default',
       fields: [
-        // 'quoted',
-        'alignContent',
-        'justifyContent',
         'backgroundVariant',
+        'alignContent',
+        'textAlign',
         'textVariant',
         'buttonVariant',
+        'buttonAlign',
       ],
     },
   ],
   properties: {
-    quoted: {
-      title: 'Quoted',
-      type: 'boolean',
+    backgroundVariant: {
+      title: 'Background theme',
+      choices: [
+        ['primary', 'Primary'],
+        ['secondary', 'Secondary'],
+        ['tertiary', 'Tertiary'],
+        ['grey', 'Grey'],
+      ],
     },
     alignContent: {
-      title: 'Align content',
+      title: 'Content align',
       choices: [
         ['start', 'Top'],
         ['center', 'Center'],
         ['end', 'Bottom'],
       ],
     },
-    justifyContent: {
-      title: 'Align Text',
+    textAlign: {
+      title: 'Text align',
       widget: 'align',
-    },
-    backgroundVariant: {
-      title: 'Background theme',
-      choices: [
-        ['primary', 'Primary'],
-        ['secondary', 'Secondary'],
-        ['tertiary', 'Tertiary'],
-        ['grey', 'Grey'],
-      ],
-      defaultValue: 'primary',
+      actions: ['left', 'center', 'right'],
+      defaultValue: 'left',
     },
     textVariant: {
       title: 'Text theme',
@@ -110,18 +113,21 @@ export const stylingSchema = ({ intl }) => ({
         ['primary', 'Primary'],
         ['secondary', 'Secondary'],
         ['tertiary', 'Tertiary'],
-        ['white', 'White'],
       ],
-      defaultValue: 'white',
     },
     buttonVariant: {
       title: 'Button theme',
       choices: [
-        ['default', 'Default'],
         ['primary', 'Primary'],
         ['secondary', 'Secondary'],
+        ['tertiary', 'Tertiary'],
       ],
-      defaultValue: 'default',
+    },
+    buttonAlign: {
+      title: 'Button align',
+      widget: 'align',
+      actions: ['left', 'center', 'right'],
+      defaultValue: 'left',
     },
   },
   required: [],