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

package/CHANGELOG.md

@@ -4,6 +4,74 @@ 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.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
+
+- feat(item): normalized size for image or icon items #258 from eea/refactor-items [ichim-david - [`945170f`](https://github.com/eea/volto-eea-design-system/commit/945170f1503be68aa3fc1bd950a97eeebfd81037)]
+
+#### :bug: Bug Fixes
+
+- fix(item): removed margin set for description which pushed the text from icon [David Ichim - [`d9d4031`](https://github.com/eea/volto-eea-design-system/commit/d9d40310fcfb1bd214bd901b79dcbac41e9a8518)]
+- fix(card): rounded after removal of has--rounded--true style class [David Ichim - [`d4727af`](https://github.com/eea/volto-eea-design-system/commit/d4727afdecf3d25e3e5bc98d472b976d60154183)]
+- fix(project): Proper paths if volto-eea-design-system package is not installed, but in development #270 from eea/correct_paths [ichim-david - [`0f8ee8d`](https://github.com/eea/volto-eea-design-system/commit/0f8ee8d770f1b26d4315be8f615d58a61acbafc8)]
+
+#### :nail_care: Enhancements
+
+- change(item): added tiny size that outputs 24px icon sizes [David Ichim - [`2ea9636`](https://github.com/eea/volto-eea-design-system/commit/2ea96363a957f9033cb5bfe2d7fd311e92377493)]
+- change(image):  added preview image size default to 400px [David Ichim - [`a0aa867`](https://github.com/eea/volto-eea-design-system/commit/a0aa867e932d1b3c0bf449553726d6feb645853e)]
+- change(item): rename large to big class [David Ichim - [`24ff127`](https://github.com/eea/volto-eea-design-system/commit/24ff1275b9a0556b85ab86757bc0c84f50357e7d)]
+- change(item): set same height as width on item images [David Ichim - [`69cbd23`](https://github.com/eea/volto-eea-design-system/commit/69cbd23ca53dd68ae9f7c00a69ed2d8820746305)]
+- refactor(item): update item part 2 [Antonis Tarantilis - [`9812ae2`](https://github.com/eea/volto-eea-design-system/commit/9812ae2e41ac86cfd4c56e13af8af570b752966f)]
+- refactor(item): update spacing [Antonis Tarantilis - [`2fd91c4`](https://github.com/eea/volto-eea-design-system/commit/2fd91c4aa1a76dd2f7099d3f24f94067e95e06a1)]
+- refactor(item): update icon variations and paddings [Antonis Tarantilis - [`6a407b3`](https://github.com/eea/volto-eea-design-system/commit/6a407b3e7f743eb7b73247bcc5d489685d567bc6)]
+- refactor(item): update image and icon sizes [Antonis Tarantilis - [`b802573`](https://github.com/eea/volto-eea-design-system/commit/b8025735121aaa0024a5783afbde0f6be3715618)]
+- refactor(item): initial values for new sizes  & add description class [Antonis Tarantilis - [`3546296`](https://github.com/eea/volto-eea-design-system/commit/3546296f0cacb96411c8c67b98e9763e2b843b05)]
+- refactor(item): update operator for condition controls [Antonis Tarantilis - [`149ccb2`](https://github.com/eea/volto-eea-design-system/commit/149ccb2f1e498c27e5550214cdee25eb808ab27e)]
+- refactor(item): add icon and more size options [Antonis Tarantilis - [`1120bb6`](https://github.com/eea/volto-eea-design-system/commit/1120bb62d9ab908c5c97a4871a66e3c08c5c7ece)]
+
+#### :hammer_and_wrench: Others
+
+- Release 1.0.0-alpha.7 [Alin Voinea - [`7e66bcc`](https://github.com/eea/volto-eea-design-system/commit/7e66bcc296b389bc55073e7f99681534977dce3a)]
+- added back descriptionDistance variable until package release [David Ichim - [`3af811a`](https://github.com/eea/volto-eea-design-system/commit/3af811a8d86a132e16de118697ba5a4302a8a4da)]
+- Back to dev [Alin Voinea - [`cb531c9`](https://github.com/eea/volto-eea-design-system/commit/cb531c933c907bdbb88c9de0f1df2eb7ce899a4c)]
+- Proper paths if the package is not installed, but in development [Tiberiu Ichim - [`7a2655f`](https://github.com/eea/volto-eea-design-system/commit/7a2655f7cf9d3c687f172eefcf2b4cff4b12f832)]
+- Update .project.eslintrc.js [ichim-david - [`a2fd3f2`](https://github.com/eea/volto-eea-design-system/commit/a2fd3f23473325976c2b146e066eeb538d140dce)]
+### [1.0.0-alpha.6](https://github.com/eea/volto-eea-design-system/compare/1.0.0-alpha.5...1.0.0-alpha.6) - 7 December 2022
+
+#### :rocket: New Features
+
+- feat(Header): add hideSearch prop [Miu Razvan - [`13ddfe5`](https://github.com/eea/volto-eea-design-system/commit/13ddfe59a6bd7fe2050b70ac4524a6f6c5c169ea)]
+- feat(Docusaurus):  Image copyright information #257 from eea/image-copyright-info [ichim-david - [`2119515`](https://github.com/eea/volto-eea-design-system/commit/21195153240da052acb7171f7904449ed7854cb3)]
+- feat(copyright): create copyright component and import it in banner [Antonis Tarantilis - [`8fcde9d`](https://github.com/eea/volto-eea-design-system/commit/8fcde9df2915585e2336024436cef76642820d75)]
+
+#### :bug: Bug Fixes
+
+- fix(tags): content gap when using tags-content wrapper [David Ichim - [`c4eb9b8`](https://github.com/eea/volto-eea-design-system/commit/c4eb9b89d4ea09f936b7fcdc22a84105fd8639af)]
+
+#### :nail_care: Enhancements
+
+- change(copyright): removed copyrightVariant from Banner and Hero stories [David Ichim - [`ac62e07`](https://github.com/eea/volto-eea-design-system/commit/ac62e079d4eafb818f9cae25880a04d9e069d107)]
+- change(copyright): now uses text color css variable with fallback to white [David Ichim - [`ee7268b`](https://github.com/eea/volto-eea-design-system/commit/ee7268ba359f079dfce45fd0fe91f75ae5c37e94)]
+- change(copyright): removed color variant [David Ichim - [`747b8a2`](https://github.com/eea/volto-eea-design-system/commit/747b8a27155569247d4975837587e3320327fce9)]
+- change(copyright): line height to match page header implementation [David Ichim - [`a56254e`](https://github.com/eea/volto-eea-design-system/commit/a56254e7588cfc6aca999f550084d79dca6e9a6c)]
+- change(copyright): implementation to add classes on content sections [David Ichim - [`e10bde6`](https://github.com/eea/volto-eea-design-system/commit/e10bde674f2b1f722ec6c70734e4a72c018f4afe)]
+- change(tagList): modified implementation to align to volto-tags-block [David Ichim - [`7a57a3d`](https://github.com/eea/volto-eea-design-system/commit/7a57a3d4bf7ede4b5ab5f3ef045d664aaaf67f2c)]
+- refactor(hero): add copyright component to hero [Antonis Tarantilis - [`0fa88fa`](https://github.com/eea/volto-eea-design-system/commit/0fa88fad3e7b48789dc6d0462b9f78dd359b8949)]
+- refactor(copyright): remove data section [Antonis Tarantilis - [`52cb09d`](https://github.com/eea/volto-eea-design-system/commit/52cb09dc363bb0a2e363ec86dcefb4c57e07a14d)]
+
+#### :house: Documentation changes
+
+- docs(copyright): copyright documentation [Dora Anastasiou - [`a90ed76`](https://github.com/eea/volto-eea-design-system/commit/a90ed766e60b5eb5b027beb36d2b1967d2c41fa3)]
+
+#### :hammer_and_wrench: Others
+
+- Release 1.0.0-alpha.6 [Alin Voinea - [`6ca32f0`](https://github.com/eea/volto-eea-design-system/commit/6ca32f03c1860781d3c1c4ff9558713ad8acac95)]
+- feature(copyright): image information #250 from eea/feature-copyright [ichim-david - [`a8618c7`](https://github.com/eea/volto-eea-design-system/commit/a8618c7f0230a19b6c973aa2c9646463de9eeffb)]
+- lint fix by introducing local variable tagsGap [David Ichim - [`7b6c0ae`](https://github.com/eea/volto-eea-design-system/commit/7b6c0ae2ebfed06221700faf9a0d0c2bdeb60d99)]
+- grammar fixes [ichim-david - [`cb2a5a5`](https://github.com/eea/volto-eea-design-system/commit/cb2a5a5fd9dfc01eccc179721b06988742f5b2e2)]
+- Update usage_markdown.md [ichim-david - [`f76d4a2`](https://github.com/eea/volto-eea-design-system/commit/f76d4a242f795451d64ef2d192d0006a0ed5eac1)]
+- Update 3-images.md [ichim-david - [`1b0ef03`](https://github.com/eea/volto-eea-design-system/commit/1b0ef033f9c8a36aaa739f268263f24a6d0fb473)]
 ### [1.0.0-alpha.5](https://github.com/eea/volto-eea-design-system/compare/1.0.0-alpha.4...1.0.0-alpha.5) - 29 November 2022
 
 #### :rocket: New Features
@@ -51,7 +119,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 #### :hammer_and_wrench: Others
 
-- Release 1.0.0-alpha.5 [Alin Voinea - [`dcd60c9`](https://github.com/eea/volto-eea-design-system/commit/dcd60c9285caf60b23ed97a9ca5daed0a943bc24)]
 - feature(Docusaurus): Updates on color palette information including thematic websites #231 from eea/refactor-docusaurus [ichim-david - [`ec7843d`](https://github.com/eea/volto-eea-design-system/commit/ec7843dea07f626dc1c71ae1baa8bb5b0caa52f3)]
 - Back to dev [Alin Voinea - [`563fbc5`](https://github.com/eea/volto-eea-design-system/commit/563fbc5fac0d4b0295690d0a3a4e04271753f18a)]
 - perf(docusaurus): added remixicon and roboto locally [Giorgos Stamatis - [`b67b1a7`](https://github.com/eea/volto-eea-design-system/commit/b67b1a72bc9cdc7c62a25967e81b430f8b62d558)]

package/package.json

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

package/razzle.extend.js

@@ -7,8 +7,13 @@ const modify = (config, { target, dev }, webpack) => {
   config.resolve.alias['../../theme.config$'] = themeConfigPath;
   config.resolve.alias['../../theme.config'] = themeConfigPath;
 
-  const projectRootPath = path.resolve('.');
-  const themesPath = `${projectRootPath}/node_modules/@eeacms/volto-eea-design-system/theme/themes`;
+  const designSystem = '@eeacms/volto-eea-design-system';
+  const designSystemPath =
+    config.resolve.alias[designSystem] ||
+    path.dirname(require.resolve(designSystem));
+  const themeLessPath = path.resolve(`${designSystemPath}/../theme`);
+
+  const themesPath = `${themeLessPath}/themes`;
 
   config.resolve.alias['eea-volto-themes'] = themesPath;
   config.resolve.alias['ui-theme'] = `${themesPath}/eea/`;

package/src/semantic.less

@@ -284,3 +284,7 @@
 & {
   @import '@eeacms/volto-eea-design-system/../theme/themes/eea/extras/hero';
 }
+
+& {
+  @import '@eeacms/volto-eea-design-system/../theme/themes/eea/extras/copyright';
+}

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

@@ -2,7 +2,8 @@ import React from 'react';
 import Banner from './Banner';
 // eslint-disable-next-line import/no-unresolved
 import imgUrl from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/images/banner.png';
-import { Popup } from 'semantic-ui-react';
+import { Popup, Icon } from 'semantic-ui-react';
+import Copyright from '../Copyright/Copyright';
 
 export default {
   title: 'Components/Page Header',
@@ -43,6 +44,32 @@ export default {
         type: { summary: 'boolean' },
       },
     },
+    copyrightPosition: {
+      name: 'Position',
+      control: {
+        type: 'inline-radio',
+        options: ['left', 'right'],
+      },
+      type: { name: 'string' },
+      table: {
+        category: 'Copyright',
+        defaultValue: { summary: '"left"' },
+      },
+    },
+    copyrightIcon: {
+      table: {
+        category: 'Copyright',
+        defaultValue: { summary: '""' },
+        type: { summary: 'string' },
+      },
+    },
+    copyrightText: {
+      table: {
+        category: 'Copyright',
+        defaultValue: { summary: '""' },
+        type: { summary: 'string' },
+      },
+    },
   },
 };
 
@@ -100,6 +127,12 @@ const Template = (args) => (
           </>
         </Banner.Metadata>
       )}
+      <Copyright copyrightPosition={args.copyrightPosition}>
+        <Copyright.Icon>
+          <Icon className={args.copyrightIcon} />
+        </Copyright.Icon>
+        <Copyright.Text>{args.copyrightText}</Copyright.Text>
+      </Copyright>
     </Banner.Content>
   </Banner>
 );
@@ -117,4 +150,7 @@ Default.args = {
   image: true,
   hideShareButton: false,
   hideDownloadButton: false,
+  copyrightPosition: 'left',
+  copyrightIcon: 'ri-copyright-line',
+  copyrightText: 'Image copyright: Velit fusce sed sem ut.',
 };

package/src/ui/Copyright/Copyright.jsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+Copyright.propTypes = {
+  copyrightPosition: PropTypes.oneOf(['left', 'right']),
+};
+
+function Copyright({ children, ...rest }) {
+  return (
+    <div className={`eea copyright ${rest.copyrightPosition}`}>
+      <div className={'wrapper'}>{children}</div>
+    </div>
+  );
+}
+
+Copyright.Icon = ({ children, ...rest }) => (
+  <span {...rest} className={'icon-wrapper'}>
+    {children}
+  </span>
+);
+
+Copyright.Text = ({ children, ...rest }) => (
+  <span {...rest} className={'icon-content'}>
+    {children}
+  </span>
+);
+export default Copyright;

package/src/ui/Copyright/Copyright.stories.jsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import Copyright from './Copyright';
+import { Container, Icon, Segment } from 'semantic-ui-react';
+
+export default {
+  title: 'Components/Copyright',
+  component: Copyright,
+  argTypes: {
+    copyrightPosition: {
+      name: 'Position',
+      control: {
+        type: 'inline-radio',
+        options: ['left', 'right'],
+      },
+      type: { name: 'string' },
+      table: {
+        defaultValue: { summary: '"left"' },
+      },
+    },
+  },
+};
+
+export const Default = (args) => (
+  <Container>
+    <Segment className={'inverted'}>
+      <Copyright copyrightPosition={args.copyrightPosition}>
+        <Copyright.Icon>
+          <Icon className={args.icon} />
+        </Copyright.Icon>
+        <Copyright.Text>{args.text}</Copyright.Text>
+      </Copyright>
+    </Segment>
+  </Container>
+);
+
+Default.args = {
+  copyrightPosition: 'left',
+  icon: 'ri-copyright-line',
+  text: 'Image copyright: Velit fusce sed sem ut.',
+};

package/src/ui/Header/Header.jsx

@@ -107,6 +107,7 @@ const Main = ({
   pathname,
   transparency,
   inverted,
+  hideSearch,
 }) => {
   const history = useHistory();
   const [activeItem, setActiveItem] = React.useState(pathname);
@@ -231,18 +232,20 @@ const Main = ({
                   ))}
                 </div>
               )}
-              <div
-                className="search-action"
-                onClick={searchOnClick}
-                role="none"
-                ref={searchButtonRef}
-              >
-                {/* <Icon name={!state.activeSearch ? 'search' : 'close'} /> */}
-                <Image
-                  src={!searchIsActive ? `${searchIcon}` : `${closeIcon}`}
-                  alt="search button open/close"
-                />
-              </div>
+              {!hideSearch && (
+                <div
+                  className="search-action"
+                  onClick={searchOnClick}
+                  role="none"
+                  ref={searchButtonRef}
+                >
+                  {/* <Icon name={!state.activeSearch ? 'search' : 'close'} /> */}
+                  <Image
+                    src={!searchIsActive ? `${searchIcon}` : `${closeIcon}`}
+                    alt="search button open/close"
+                  />
+                </div>
+              )}
               <Header.BurgerAction
                 className={`mobile ${burger}`}
                 onClick={mobileBurgerOnClick}

package/src/ui/Hero/Hero.jsx

@@ -1,6 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+import { Icon } from 'semantic-ui-react';
+import Copyright from '../Copyright/Copyright';
+
 Hero.propTypes = {
   image: PropTypes.bool,
   fullWidth: PropTypes.bool,
@@ -21,6 +24,11 @@ function Hero({
   alignContent,
   backgroundVariant,
   children,
+
+  has_copyright,
+  copyrightPosition,
+  copyrightIcon,
+  copyrightText,
 }) {
   return (
     // full width prop
@@ -36,7 +44,18 @@ function Hero({
         <div
           className={`hero-block-inner-wrapper d-flex ui container flex-items-${alignContent}`}
         >
-          <div className="hero-block-body">{children}</div>
+          <div className="hero-block-body">
+            {children}
+
+            {has_copyright && (
+              <Copyright copyrightPosition={copyrightPosition}>
+                <Copyright.Icon>
+                  <Icon className={copyrightIcon} />
+                </Copyright.Icon>
+                <Copyright.Text>{copyrightText}</Copyright.Text>
+              </Copyright>
+            )}
+          </div>
         </div>
       </div>
     </div>

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

@@ -54,6 +54,40 @@ export default {
         type: { summary: 'boolean' },
       },
     },
+    has_copyright: {
+      name: 'Copyright',
+      table: {
+        category: 'Copyright',
+        defaultValue: { summary: '' },
+        type: { summary: 'boolean' },
+      },
+    },
+    copyrightPosition: {
+      name: 'Position',
+      control: {
+        type: 'inline-radio',
+        options: ['left', 'right'],
+      },
+      type: { name: 'string' },
+      table: {
+        category: 'Copyright',
+        defaultValue: { summary: '"left"' },
+      },
+    },
+    copyrightIcon: {
+      table: {
+        category: 'Copyright',
+        defaultValue: { summary: '""' },
+        type: { summary: 'string' },
+      },
+    },
+    copyrightText: {
+      table: {
+        category: 'Copyright',
+        defaultValue: { summary: '""' },
+        type: { summary: 'string' },
+      },
+    },
   },
 };
 
@@ -93,6 +127,11 @@ Default.args = {
   inverted: true,
   alignContent: 'center',
   backgroundVariant: 'grey',
+
+  has_copyright: true,
+  copyrightPosition: 'left',
+  copyrightIcon: 'ri-copyright-line',
+  copyrightText: 'Image copyright: Velit fusce sed sem ut.',
 };
 Default.parameters = {
   controls: {
@@ -125,6 +164,11 @@ Playground.args = {
   inverted: true,
   alignContent: 'center',
   backgroundVariant: 'tertiary',
+
+  has_copyright: true,
+  copyrightPosition: 'left',
+  copyrightIcon: 'ri-copyright-line',
+  copyrightText: 'Image copyright: Velit fusce sed sem ut.',
 };
 Playground.argTypes = {
   fullWidth: {
@@ -202,4 +246,30 @@ Playground.argTypes = {
       type: { summary: 'string' },
     },
   },
+  copyrightPosition: {
+    name: 'Position',
+    control: {
+      type: 'inline-radio',
+      options: ['left', 'right'],
+    },
+    type: { name: 'string' },
+    table: {
+      category: 'Copyright',
+      defaultValue: { summary: '"left"' },
+    },
+  },
+  copyrightIcon: {
+    table: {
+      category: 'Copyright',
+      defaultValue: { summary: '""' },
+      type: { summary: 'string' },
+    },
+  },
+  copyrightText: {
+    table: {
+      category: 'Copyright',
+      defaultValue: { summary: '""' },
+      type: { summary: 'string' },
+    },
+  },
 };