@eeacms/volto-eea-design-system 1.0.0-alpha.7 → 1.0.0-alpha.9

package/CHANGELOG.md

@@ -4,6 +4,65 @@ 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).
 
+### [1.0.0-alpha.9](https://github.com/eea/volto-eea-design-system/compare/1.0.0-alpha.8...1.0.0-alpha.9) - 28 December 2022
+
+#### :nail_care: Enhancements
+
+- change(contextnav): Default title is text, custom title is link #273 from eea/context-nav-link-title [ichim-david - [`ef7bdb7`](https://github.com/eea/volto-eea-design-system/commit/ef7bdb7c40cd12c3d7e059074aa5797b8cb3378c)]
+
+#### :hammer_and_wrench: Others
+
+- Release alpha 9 [Alin Voinea - [`8d30ef7`](https://github.com/eea/volto-eea-design-system/commit/8d30ef7a14d1476c88ab5c004247c5f4d90f6cd6)]
+- Show document and folder content-type in Navigation listing [andreiggr - [`8471db3`](https://github.com/eea/volto-eea-design-system/commit/8471db3b3d555e8602f1076d0f96a2ba38a12247)]
+- Context nav title link to # [andreiggr - [`a27a6b7`](https://github.com/eea/volto-eea-design-system/commit/a27a6b78bcda0eb6037f73f1d36b06e00e3ffc52)]
+- Default title is text, custom title is link [andreiggr - [`1ae95b0`](https://github.com/eea/volto-eea-design-system/commit/1ae95b05b67423121566448c6b0cededca4b2b1d)]
+### [1.0.0-alpha.8](https://github.com/eea/volto-eea-design-system/compare/1.0.0-alpha.7...1.0.0-alpha.8) - 23 December 2022
+
+#### :rocket: New Features
+
+- feat(copyright): Align copyright options with Volto integration - refs #158210 [Alin Voinea - [`6bac7f6`](https://github.com/eea/volto-eea-design-system/commit/6bac7f6a9ad969af4be1c8c08a18a1144d5bad63)]
+
+#### :nail_care: Enhancements
+
+- change(logos): cleanup eea logo reference to only eea-logo and eea-logo-white.svg [David Ichim - [`2796e05`](https://github.com/eea/volto-eea-design-system/commit/2796e054a21a9025036c8b2882afe23a6984cd37)]
+- change(item): removed requirement for aligned classes to be on content [David Ichim - [`30c0d5d`](https://github.com/eea/volto-eea-design-system/commit/30c0d5d2de7ac05172cfb726b60a8bd763de7b31)]
+- change(item): use default logic of setting align class on content [David Ichim - [`6b5b47c`](https://github.com/eea/volto-eea-design-system/commit/6b5b47c10ce5a6d3710bedd492aa3d362d62d225)]
+- refactor(logos): convert storybook logo names to lowercase [Antonis Tarantilis - [`c4b24ec`](https://github.com/eea/volto-eea-design-system/commit/c4b24ec8796f8fffd87158a55f4ac19624ebe04c)]
+- refactor(logos): convert logo names to lowercase [Antonis Tarantilis - [`07b8228`](https://github.com/eea/volto-eea-design-system/commit/07b822864490b4cc63bef94f3306466ba5933e16)]
+- refactor(logo): import theme site logos to the story [Antonis Tarantilis - [`2f29136`](https://github.com/eea/volto-eea-design-system/commit/2f29136ca457f2419ca25a5292a036b2cd0fc402)]
+- refactor(logo): add eea roboto font logo variations [Antonis Tarantilis - [`de1224a`](https://github.com/eea/volto-eea-design-system/commit/de1224a97568c0b48b509c65170a6080d8a058d4)]
+- refactor(logo): add container and segment to logo story [Antonis Tarantilis - [`61eff16`](https://github.com/eea/volto-eea-design-system/commit/61eff16fcd080194fe1187656d67ef73a7dd4d6c)]
+- refactor(logo): update logo and mega search gradient [Antonis Tarantilis - [`e11f44d`](https://github.com/eea/volto-eea-design-system/commit/e11f44d59334fc02e3833a133b20e7b2240a2022)]
+- refactor(logo): update logo [Antonis Tarantilis - [`170efe5`](https://github.com/eea/volto-eea-design-system/commit/170efe5bfc7fd4988f4a4d4aac18ace32c360cd6)]
+
+#### :house: Internal changes
+
+- chore(npmignore): Reduce npmjs package size [Alin Voinea - [`164c8a5`](https://github.com/eea/volto-eea-design-system/commit/164c8a5ad0f7241eb8e30c53eccfdff9cec1fb93)]
+- chore(npmignore): Reduce npmjs package size [Alin Voinea - [`ade9d5b`](https://github.com/eea/volto-eea-design-system/commit/ade9d5ba3411efc47cdd3b461fd60b2b7389f9be)]
+- chore(docs): renamed logo mdx to md [Giorgos Stamatis - [`52e9d46`](https://github.com/eea/volto-eea-design-system/commit/52e9d46bb2decabdc935eeee84dacc3e063e3616)]
+
+#### :house: Documentation changes
+
+- docs(logo): update eea logos and add logo wrapper [Antonis Tarantilis - [`91cdd66`](https://github.com/eea/volto-eea-design-system/commit/91cdd6636dfb102e4712177ad5fa7e952eb6ea45)]
+- docs(logo): update logos on docusaurus [Antonis Tarantilis - [`760e101`](https://github.com/eea/volto-eea-design-system/commit/760e1012892ab28b25e8d9b0de50cfa0ba07addf)]
+- docs(logos): add dark mode logos [Dora Anastasiou - [`ccc1609`](https://github.com/eea/volto-eea-design-system/commit/ccc1609643cff5f851942ab95198d44252ddb22e)]
+- docs(logos): change eea logo to svg [Giorgos Stamatis - [`f57b846`](https://github.com/eea/volto-eea-design-system/commit/f57b846ca9d635f5af4d1adeee280a5adcaf7b5f)]
+- docs(logos): add zipped svgs for download [Giorgos Stamatis - [`5855bf8`](https://github.com/eea/volto-eea-design-system/commit/5855bf83b471a9849ee71370d7eee4f6a1d12a44)]
+- docs(logos): move to static, add download [Dora Anastasiou - [`8c1fd5f`](https://github.com/eea/volto-eea-design-system/commit/8c1fd5f9a64bd8fb976687fe5ed96bc515b95393)]
+- docs(logos): wisef logo update [Dora Anastasiou - [`8f90b59`](https://github.com/eea/volto-eea-design-system/commit/8f90b59d03c1c4eaa760dd981e082f237c09e96f)]
+- docs(logos): updated svgs [Dora Anastasiou - [`dc224e1`](https://github.com/eea/volto-eea-design-system/commit/dc224e1dbcf46a29b0639afde694d44221affe27)]
+- docs(logos): svgs without classes [Dora Anastasiou - [`28a5833`](https://github.com/eea/volto-eea-design-system/commit/28a58336ac57deb3eec7287b6fbf5cd58ada8a7e)]
+- docs(logos): improve eea logo visibility [Dora Anastasiou - [`82188ab`](https://github.com/eea/volto-eea-design-system/commit/82188abb99aa080d7bea15975497e03c653d311c)]
+- docs(logos): add thematic logos [Dora Anastasiou - [`5a21a30`](https://github.com/eea/volto-eea-design-system/commit/5a21a3076e506e6bd7f82fa97697f81825e87255)]
+
+#### :hammer_and_wrench: Others
+
+- logo update or docusaurus thematic logo listing #274 from eea/develop [ichim-david - [`dde90be`](https://github.com/eea/volto-eea-design-system/commit/dde90beb68ac129e476ece22e7ced4640786f094)]
+- bump package version [David Ichim - [`b4628be`](https://github.com/eea/volto-eea-design-system/commit/b4628bed134abc76e38a243d4e98143e19cef989)]
+- feature(docusaurus, storybook): logos selection for sites plus inverted options #253 from eea/doc-logo-page [ichim-david - [`dbfc90d`](https://github.com/eea/volto-eea-design-system/commit/dbfc90d035dc40e9d4054347f00fde4de486d63d)]
+- (feat): Add ability to disable the language select from website top menu  - refs #158616 [dobri1408 - [`411c8e4`](https://github.com/eea/volto-eea-design-system/commit/411c8e4afaf0b2b9edfdeeecdca22aa4cc41f329)]
+- test(Jenkins): Run tests and cypress with latest canary @plone/volto [Alin Voinea - [`92feea0`](https://github.com/eea/volto-eea-design-system/commit/92feea09796c9ef0530f65fa1d34139905133215)]
+- Proof reading page header section [ichim-david - [`230239e`](https://github.com/eea/volto-eea-design-system/commit/230239e1b22734fb8606656985bc5e513731e244)]
 ### [1.0.0-alpha.7](https://github.com/eea/volto-eea-design-system/compare/1.0.0-alpha.6...1.0.0-alpha.7) - 16 December 2022
 
 #### :rocket: New Features
@@ -235,7 +294,7 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - Update dependencies [Alin Voinea - [`ee30a2b`](https://github.com/eea/volto-eea-design-system/commit/ee30a2bad3769163d3ab4d996c0a7be8fcb4bc6e)]
 - add announcement bar, showing that EEA DS is WIP [Antonio De Marinis - [`e14aeac`](https://github.com/eea/volto-eea-design-system/commit/e14aeac02cf922493aff4f83c8d80af95cc63eb9)]
 - more explanations [Antonio De Marinis - [`a8b2272`](https://github.com/eea/volto-eea-design-system/commit/a8b22728659125ba6ea6fb41f29571a8f1b9953b)]
-### [1.0.0-alpha.1](https://github.com/eea/volto-eea-design-system/compare/0.9.5...1.0.0-alpha.1) - 20 October 2022
+### [1.0.0-alpha.1](https://github.com/eea/volto-eea-design-system/compare/0.9.6...1.0.0-alpha.1) - 20 October 2022
 
 #### :nail_care: Enhancements
 
@@ -256,6 +315,13 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 #### :hammer_and_wrench: Others
 
 - Release 1.0.0-alpha.1 [Alin Voinea - [`70e4d97`](https://github.com/eea/volto-eea-design-system/commit/70e4d97c6a2b13f3b98efe1e2ba93174be2df476)]
+### [0.9.6](https://github.com/eea/volto-eea-design-system/compare/0.9.5...0.9.6) - 16 December 2022
+
+#### :hammer_and_wrench: Others
+
+- Release 0.9.6 [Alin Voinea - [`ae19b83`](https://github.com/eea/volto-eea-design-system/commit/ae19b837678ef5a6a26ebe7c69577e446b13ed50)]
+- Release-it [Alin Voinea - [`1f5671d`](https://github.com/eea/volto-eea-design-system/commit/1f5671de5a36a721f86a2f8ae4077fd2e0ffafb5)]
+- feature(copyright): image information #250 from eea/feature-copyright [ichim-david - [`7b323ed`](https://github.com/eea/volto-eea-design-system/commit/7b323ed27e15f9b4265618099089526c97aa89a1)]
 ### [0.9.5](https://github.com/eea/volto-eea-design-system/compare/0.9.4...0.9.5) - 20 October 2022
 
 #### :bug: Bug Fixes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-eea-design-system",
-  "version": "1.0.0-alpha.7",
+  "version": "1.0.0-alpha.9",
   "description": "@eeacms/volto-eea-design-system: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

package/src/ui/Banner/Banner.stories.jsx

@@ -44,16 +44,11 @@ export default {
         type: { summary: 'boolean' },
       },
     },
-    copyrightPosition: {
-      name: 'Position',
-      control: {
-        type: 'inline-radio',
-        options: ['left', 'right'],
-      },
-      type: { name: 'string' },
+    copyright: {
       table: {
         category: 'Copyright',
-        defaultValue: { summary: '"left"' },
+        defaultValue: { summary: '""' },
+        type: { summary: 'string' },
       },
     },
     copyrightIcon: {
@@ -63,11 +58,16 @@ export default {
         type: { summary: 'string' },
       },
     },
-    copyrightText: {
+    copyrightPosition: {
+      name: 'Position',
+      control: {
+        type: 'inline-radio',
+        options: ['left', 'right'],
+      },
+      type: { name: 'string' },
       table: {
         category: 'Copyright',
-        defaultValue: { summary: '""' },
-        type: { summary: 'string' },
+        defaultValue: { summary: '"left"' },
       },
     },
   },
@@ -131,7 +131,7 @@ const Template = (args) => (
         <Copyright.Icon>
           <Icon className={args.copyrightIcon} />
         </Copyright.Icon>
-        <Copyright.Text>{args.copyrightText}</Copyright.Text>
+        <Copyright.Text>{args.copyright}</Copyright.Text>
       </Copyright>
     </Banner.Content>
   </Banner>
@@ -152,5 +152,5 @@ Default.args = {
   hideDownloadButton: false,
   copyrightPosition: 'left',
   copyrightIcon: 'ri-copyright-line',
-  copyrightText: 'Image copyright: Velit fusce sed sem ut.',
+  copyright: 'Image copyright: Velit fusce sed sem ut.',
 };

package/src/ui/ContextNavigation/ContextNavigation.stories.jsx

@@ -111,13 +111,23 @@ const sidenavItems = [
     url: '/#',
     is_in_path: true,
   },
+  {
+    '@id': 'About',
+    review_state: null,
+    title: 'About',
+    items: [],
+    url: '/#',
+    is_in_path: true,
+  },
 ];
 
 function Template({ ...args }) {
   return (
     <Container>
       <nav className="context-navigation">
-        <div className="context-navigation-header">{args.header}</div>
+        <div className="context-navigation-header">
+          {args?.header ? <a href="/#">{args?.header}</a> : 'Navigation'}
+        </div>
         <div role="list" className="ui list">
           {args.sidenavItems &&
             args.sidenavItems.map((element, index) => {
@@ -133,63 +143,68 @@ function Template({ ...args }) {
                   <div className="content">
                     <a
                       title={element.title}
-                      className="contenttype-folder"
+                      className={
+                        element?.items?.length > 0
+                          ? 'contenttype-folder'
+                          : 'contenttype-document'
+                      }
                       href={element.url}
                     >
                       {element.title}
                     </a>
-                    {element.items.length > 0 &&
-                      element.items.map((subelement, index) => {
-                        return (
-                          <div className="list" role="list">
-                            <div
-                              role="listitem"
-                              className={
-                                (subelement.is_current ? 'active ' : '') +
-                                (subelement.is_in_path ? 'in_path ' : '') +
-                                'item level-2'
-                              }
-                            >
-                              <div className="content">
-                                <a
-                                  title={subelement.title}
-                                  className="contenttype-document"
-                                  href={subelement.url}
-                                >
-                                  {subelement.title}
-                                </a>
-                                {subelement.items.length > 0 &&
-                                  subelement.items.map(
-                                    (subparelement, index) => {
-                                      return (
-                                        <div className="list" role="list">
-                                          <div
-                                            role="listitem"
-                                            className={
-                                              (subparelement.is_current
-                                                ? 'active '
-                                                : '') + 'item level-3'
-                                            }
-                                          >
-                                            <div className="content">
-                                              <a
-                                                title={subparelement.title}
-                                                className="contenttype-document"
-                                                href={subparelement.url}
-                                              >
-                                                {subparelement.title}
-                                              </a>
+                    {element?.items?.length > 0
+                      ? element.items.map((subelement, index) => {
+                          return (
+                            <div className="list" role="list">
+                              <div
+                                role="listitem"
+                                className={
+                                  (subelement.is_current ? 'active ' : '') +
+                                  (subelement.is_in_path ? 'in_path ' : '') +
+                                  'item level-2'
+                                }
+                              >
+                                <div className="content">
+                                  <a
+                                    title={subelement.title}
+                                    className="contenttype-document"
+                                    href={subelement.url}
+                                  >
+                                    {subelement.title}
+                                  </a>
+                                  {subelement?.items?.length > 0 &&
+                                    subelement.items.map(
+                                      (subparelement, index) => {
+                                        return (
+                                          <div className="list" role="list">
+                                            <div
+                                              role="listitem"
+                                              className={
+                                                (subparelement.is_current
+                                                  ? 'active '
+                                                  : '') + 'item level-3'
+                                              }
+                                            >
+                                              <div className="content">
+                                                <a
+                                                  title={subparelement.title}
+                                                  className="contenttype-document"
+                                                  href={subparelement.url}
+                                                >
+                                                  {subparelement.title}
+                                                </a>
+                                              </div>
                                             </div>
                                           </div>
-                                        </div>
-                                      );
-                                    },
-                                  )}
+                                        );
+                                      },
+                                    )}
+                                </div>
                               </div>
                             </div>
-                          </div>
-                        );
-                      })}
+                          );
+                        })
+                      : null}
                   </div>
                 </div>
               );
@@ -207,6 +222,6 @@ export default {
 
 export const Default = Template.bind({});
 Default.args = {
-  header: 'Navigation',
+  header: '',
   sidenavItems: sidenavItems,
 };

package/src/ui/Footer/Footer.stories.js

@@ -11,7 +11,7 @@ import Copernicus from '@eeacms/volto-eea-design-system/../theme/themes/eea/asse
 import Industry from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/logo/industry.svg';
 import Marine from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/logo/marine.svg';
 import Eionet from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/logo/eionet.svg';
-import EEA from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/logo/eea-white.svg';
+import EEA from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/logo/eea-logo-white.svg';
 
 export default {
   title: 'Layout/Footer',

package/src/ui/Header/Header.jsx

@@ -41,6 +41,7 @@ const TopDropdownMenu = ({
   children,
   className,
   icon,
+  hasLanguageDropdown = true,
   id,
   tabletText,
   mobileText,
@@ -50,19 +51,39 @@ const TopDropdownMenu = ({
   const isTablet = viewportWidth < 991;
   const isMobile = viewportWidth < 767;
 
-  const Component = ({ mobileText }) => (
-    <Dropdown
-      id={id}
-      className={className}
-      text={mobileText || text}
-      icon={icon || 'chevron down'}
-      aria-label="dropdown"
-      closeOnChange={false}
-      closeOnBlur={true}
-    >
-      <Dropdown.Menu role="group">{children}</Dropdown.Menu>
-    </Dropdown>
-  );
+  const Component = ({ mobileText }) => {
+    return (
+      <>
+        {children.props['aria-label'] === 'language switcher' ? (
+          hasLanguageDropdown && (
+            <Dropdown
+              id={id}
+              className={className}
+              text={mobileText || text}
+              icon={icon || 'chevron down'}
+              aria-label="dropdown"
+              closeOnChange={false}
+              closeOnBlur={true}
+            >
+              <Dropdown.Menu role="group">{children}</Dropdown.Menu>
+            </Dropdown>
+          )
+        ) : (
+          <Dropdown
+            id={id}
+            className={className}
+            text={mobileText || text}
+            icon={icon || 'chevron down'}
+            aria-label="dropdown"
+            closeOnChange={false}
+            closeOnBlur={true}
+          >
+            <Dropdown.Menu role="group">{children}</Dropdown.Menu>
+          </Dropdown>
+        )}
+      </>
+    );
+  };
   return (
     <>
       {isMobile ? (

package/src/ui/Header/Header.stories.js

@@ -3,8 +3,8 @@ import Header from './Header';
 import { Dropdown, Image, Segment, Container } from 'semantic-ui-react';
 import { Logo } from '@eeacms/volto-eea-design-system/ui';
 
-import LogoImage from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/images/Header/eea-logo.svg';
-import InvertedLogoImage from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/logo/EEA-Logo-White-2.svg';
+import LogoImage from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/logo/eea-logo.svg';
+import InvertedLogoImage from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/logo/eea-logo-white.svg';
 import globeIcon from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/images/Header/global-line.svg';
 import eeaFlag from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/images/Header/eea.png';
 import cx from 'classnames';
@@ -1276,6 +1276,7 @@ const Template = (args) => {
     tabletLinksMenuTitle,
     mobileLinksMenuTitle,
     menuItems,
+    hasLanguageDropdown,
   } = args;
 
   const [language, setLanguage] = React.useState('en');
@@ -1347,6 +1348,7 @@ const Template = (args) => {
 
           <Header.TopDropdownMenu
             id="language-switcher"
+            hasLanguageDropdown={hasLanguageDropdown}
             className="item"
             text={`${language.toUpperCase()}`}
             mobileText={`${language.toUpperCase()}`}
@@ -1588,6 +1590,7 @@ Default.args = {
   linksMenuTitle: 'Environmental information systems',
   tabletLinksMenuTitle: 'EEA information systems',
   mobileLinksMenuTitle: 'EEA information systems',
+  hasLanguageDropdown: true,
   links,
   languages,
   menuItems,

package/src/ui/Hero/Hero.jsx

@@ -26,9 +26,9 @@ function Hero({
   children,
 
   has_copyright,
-  copyrightPosition,
+  copyright,
   copyrightIcon,
-  copyrightText,
+  copyrightPosition,
 }) {
   return (
     // full width prop
@@ -52,7 +52,7 @@ function Hero({
                 <Copyright.Icon>
                   <Icon className={copyrightIcon} />
                 </Copyright.Icon>
-                <Copyright.Text>{copyrightText}</Copyright.Text>
+                <Copyright.Text>{copyright}</Copyright.Text>
               </Copyright>
             )}
           </div>

package/src/ui/Hero/Hero.stories.jsx

@@ -81,7 +81,7 @@ export default {
         type: { summary: 'string' },
       },
     },
-    copyrightText: {
+    copyright: {
       table: {
         category: 'Copyright',
         defaultValue: { summary: '""' },
@@ -131,7 +131,7 @@ Default.args = {
   has_copyright: true,
   copyrightPosition: 'left',
   copyrightIcon: 'ri-copyright-line',
-  copyrightText: 'Image copyright: Velit fusce sed sem ut.',
+  copyright: 'Image copyright: Velit fusce sed sem ut.',
 };
 Default.parameters = {
   controls: {
@@ -168,7 +168,7 @@ Playground.args = {
   has_copyright: true,
   copyrightPosition: 'left',
   copyrightIcon: 'ri-copyright-line',
-  copyrightText: 'Image copyright: Velit fusce sed sem ut.',
+  copyright: 'Image copyright: Velit fusce sed sem ut.',
 };
 Playground.argTypes = {
   fullWidth: {
@@ -246,16 +246,11 @@ Playground.argTypes = {
       type: { summary: 'string' },
     },
   },
-  copyrightPosition: {
-    name: 'Position',
-    control: {
-      type: 'inline-radio',
-      options: ['left', 'right'],
-    },
-    type: { name: 'string' },
+  copyright: {
     table: {
       category: 'Copyright',
-      defaultValue: { summary: '"left"' },
+      defaultValue: { summary: '""' },
+      type: { summary: 'string' },
     },
   },
   copyrightIcon: {
@@ -265,11 +260,15 @@ Playground.argTypes = {
       type: { summary: 'string' },
     },
   },
-  copyrightText: {
+  copyrightPosition: {
+    control: {
+      type: 'inline-radio',
+      options: ['left', 'right'],
+    },
+    type: { name: 'string' },
     table: {
       category: 'Copyright',
-      defaultValue: { summary: '""' },
-      type: { summary: 'string' },
+      defaultValue: { summary: '"left"' },
     },
   },
 };

package/src/ui/Item/ItemGroupWithIcons.stories.js

@@ -33,12 +33,12 @@ export default {
         defaultValue: { summary: 'medium' },
       },
     },
-    flexAlign: {
+    verticalAlign: {
       name: 'vertical align',
-      options: ['start', 'center', 'end'],
+      options: ['top', 'middle', 'bottom'],
       control: { type: 'select' },
       table: {
-        defaultValue: { summary: 'center' },
+        defaultValue: { summary: 'middle' },
       },
     },
     colorVariation: {
@@ -59,13 +59,11 @@ function SingleItem({
   imageSize,
   colorVariation,
   description,
-  flexAlign,
+  verticalAlign,
   stackable,
 }) {
   return (
-    <Item
-      className={`flex-items-${flexAlign} ${stackable ? ' stackable' : ''}`}
-    >
+    <Item className={`${stackable ? ' stackable' : ''}`}>
       {mediaType === 'image' ? (
         <Item.Image
           className={`ui ${imageSize}`}
@@ -75,7 +73,7 @@ function SingleItem({
       ) : (
         <Icon className={`${imageSize} ${icon} ${colorVariation}`} />
       )}
-      <Item.Content>
+      <Item.Content verticalAlign={verticalAlign}>
         <Item.Description>{description}</Item.Description>
       </Item.Content>
     </Item>
@@ -95,7 +93,7 @@ DefaultItem.args = {
   imageUrl: GlobeEco,
   icon: 'ri-leaf-line',
   imageSize: 'medium',
-  flexAlign: 'center',
+  verticalAlign: 'middle',
   colorVariation: 'secondary',
   stackable: false,
   description:
@@ -126,7 +124,7 @@ function ItemGroup({
   icon,
   imageSize,
   colorVariation,
-  flexAlign,
+  verticalAlign,
   ColumnLeft,
   ColumnRight,
   stackable,
@@ -141,7 +139,7 @@ function ItemGroup({
                 <SingleItem
                   key={item.childKey}
                   {...item}
-                  flexAlign={flexAlign}
+                  verticalAlign={verticalAlign}
                   mediaType={mediaType}
                   imageSize={imageSize}
                   colorVariation={colorVariation}
@@ -156,7 +154,7 @@ function ItemGroup({
                 <SingleItem
                   key={item.childKey}
                   {...item}
-                  flexAlign={flexAlign}
+                  verticalAlign={verticalAlign}
                   mediaType={mediaType}
                   imageSize={imageSize}
                   colorVariation={colorVariation}
@@ -179,7 +177,7 @@ DefaultGroup.args = {
   mediaType: 'image',
   imageSize: 'medium',
   colorVariation: 'secondary',
-  flexAlign: 'center',
+  verticalAlign: 'middle',
   stackable: false,
   ColumnLeft: [
     {
@@ -228,7 +226,7 @@ function ItemFlexGroup({
   icon,
   imageSize,
   colorVariation,
-  flexAlign,
+  verticalAlign,
   Items,
   stackable,
 }) {
@@ -239,7 +237,7 @@ function ItemFlexGroup({
           <SingleItem
             key={item.childKey}
             {...item}
-            flexAlign={flexAlign}
+            verticalAlign={verticalAlign}
             mediaType={mediaType}
             imageSize={imageSize}
             colorVariation={colorVariation}
@@ -259,7 +257,7 @@ FlexGroup.args = {
   mediaType: 'image',
   imageSize: 'medium',
   colorVariation: 'secondary',
-  flexAlign: 'center',
+  verticalAlign: 'middle',
   stackable: false,
   Items: [
     {