@eeacms/volto-eea-design-system 0.7.3 → 0.8.0

package/CHANGELOG.md

@@ -4,8 +4,89 @@ 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.8.0](https://github.com/eea/volto-eea-design-system/compare/0.7.6...0.8.0)
+
+- change(Cards):  All variations accessibility fixes #210 [`#210`](https://github.com/eea/volto-eea-design-system/issues/210)
+- Update package.json [`3870cf3`](https://github.com/eea/volto-eea-design-system/commit/3870cf3265f0dab4e181c94a6657b9fa408bf186)
+- Header refactor 153536 #226 from eea/header-refactor-153536 [`87a6fe7`](https://github.com/eea/volto-eea-design-system/commit/87a6fe73211eb028861e099a67e90d365c5111ea)
+- change(typography): inherit header colors with @headerColor variable [`91d9357`](https://github.com/eea/volto-eea-design-system/commit/91d93577772534f67bb74df0c9ed260bbaccdd4c)
+- change(typography): modified lineheight-0 after headers now use 1.2 instead of 1.25 [`04d78a8`](https://github.com/eea/volto-eea-design-system/commit/04d78a8b0094d9187548e1e3b16d6fbf2248821c)
+- change(breadcrumb): use tertiary color also for breadcrumb [`c5cbd44`](https://github.com/eea/volto-eea-design-system/commit/c5cbd44bcabae36bcb99a1e987d701e2ea75434b)
+- fix(heroblock): color even on edit page by inheriting color instead of using the tertiary color [`ac53fb7`](https://github.com/eea/volto-eea-design-system/commit/ac53fb74dedafcce231d1ca72843eff8a589c530)
+- change(site): removed Archivo import as we should only use Roboto font [`a6af056`](https://github.com/eea/volto-eea-design-system/commit/a6af0564667075d2012c114acb2ad8e1f39b926f)
+- change(heading): on homepage on the first hero set font size to h1 and inherit color [`5711096`](https://github.com/eea/volto-eea-design-system/commit/5711096e45c57b0c3c871f8dcf870c05405d217d)
+- change(headers): added headerColor variable so that thematic sites can easily choose another heading color [`f09d2c5`](https://github.com/eea/volto-eea-design-system/commit/f09d2c5e95e82077cc7dfef43a5c56fc73d435c3)
+- change(headings): only h2-h6 get tertiary color [`7d81308`](https://github.com/eea/volto-eea-design-system/commit/7d81308c4c0d52d5610a922146f5b426d9eaf323)
+- change(style): color, space and adjust line-height as described in docusaurus [`3366da2`](https://github.com/eea/volto-eea-design-system/commit/3366da262ba2dc1c34f57964accf4d6ef6ed37e1)
+- change(docusaurus): use tertiary color for headings and body color mirroring the design system styles [`145fe73`](https://github.com/eea/volto-eea-design-system/commit/145fe7348a19b51784a2879225d1b71a642eed45)
+- change(docusaurus): use the tertiary color for body and heading colors [`11c4ed4`](https://github.com/eea/volto-eea-design-system/commit/11c4ed4683df4527ce79155bc65424789e3864af)
+- change(docusaurus, fonts): documented font letter spacing modification [`522712a`](https://github.com/eea/volto-eea-design-system/commit/522712aeddb55f4ff96fdf4e8bea26f4575504ec)
+- change(docusaurus): use Roboto font from google fonts also for docusaurus [`adca8e9`](https://github.com/eea/volto-eea-design-system/commit/adca8e911faac2d541eb2b9fecf1d9db5b8f9b4c)
+- fix(docusaurus): typography guideline now has real font values for headings, body, caption and small text [`9508db9`](https://github.com/eea/volto-eea-design-system/commit/9508db918687b524c4d464539b9a4667399abb43)
+- change(fonts): typo fixes for typography section of docusaurus [`cae4b02`](https://github.com/eea/volto-eea-design-system/commit/cae4b02b20ff578f5cad7c4238c36baa3cae545a)
+- change(fonts): modified footer and header values afer global font size changes [`f160d35`](https://github.com/eea/volto-eea-design-system/commit/f160d354b36dc2bee0707b6d63097d5f08408abe)
+- change(fonts): updated font sizes with values given in figma [`4b0ae48`](https://github.com/eea/volto-eea-design-system/commit/4b0ae48ab140d8bbbf6ccbf46eda8d957195ca50)
+- change(fonts): modified headings font size as well as line height [`f0771ea`](https://github.com/eea/volto-eea-design-system/commit/f0771ea1942b6ef436a03c256491a690a52d7413)
+- change(fonts): updated font sizes with values given in figma [`f16eef7`](https://github.com/eea/volto-eea-design-system/commit/f16eef7128ed4f2e7fe97b1ec77f651dc062b771)
+- Autobuild of docusaurus docs [`b7bba2c`](https://github.com/eea/volto-eea-design-system/commit/b7bba2cfa2feebce9d2f1448d88dbf0682a821d7)
+- feature(item): icon is now stackable moving the icon on top #220 [`b716acf`](https://github.com/eea/volto-eea-design-system/commit/b716acfc850345d666d99840445798cdae201a63)
+- Autobuild of docusaurus docs [`bb6dc01`](https://github.com/eea/volto-eea-design-system/commit/bb6dc01543bdb6a0ebf8a10a00d54c40b6b39b7b)
+- fix(item): remove duplicate argType [`dde0be5`](https://github.com/eea/volto-eea-design-system/commit/dde0be5f7fe362143e248f7e53aa1d2e5df1fda0)
+- refactor(item): add stackable functionality [`8d714fa`](https://github.com/eea/volto-eea-design-system/commit/8d714fad0465cc71650dcb41236d5667ccc3e789)
+- refactor(publicationCard): add links and fix accessibily issue [`80adf6c`](https://github.com/eea/volto-eea-design-system/commit/80adf6ce0f01e577c34ddba8b345a1fc562f6711)
+- fix(tab): add tabindex for accessibility error [`ab512be`](https://github.com/eea/volto-eea-design-system/commit/ab512be71b86a3b696a228840e34d297928485ab)
+- refactor(roundedCard): add optional link for image and header [`a6d3bf2`](https://github.com/eea/volto-eea-design-system/commit/a6d3bf27031d189c403c4a099b09a9066a1620a2)
+- refactor(iconCards): run prettier [`fe84e46`](https://github.com/eea/volto-eea-design-system/commit/fe84e46adbc385098385120d14e7583b890db027)
+- fix(iconCard): add aria-label at links [`44f64c7`](https://github.com/eea/volto-eea-design-system/commit/44f64c7127c0ccabbbf81eb5a838ee0f63284cea)
+- refactor(roundedCard): remove unnecessary code and controls and add all variations [`6305c54`](https://github.com/eea/volto-eea-design-system/commit/6305c54df14faada4058c602af2e33dbc4fad39d)
+- refactor(card): add tertiary hover and update css selectors [`ca06948`](https://github.com/eea/volto-eea-design-system/commit/ca069484da914520c92f7d67ac92c476ff2ee4a2)
+- refactor(iconCard): add control for variations and link [`5e1b6a1`](https://github.com/eea/volto-eea-design-system/commit/5e1b6a1c7ab9fdce138c5643bc01763a02bed287)
+- refactor(card): css updates for card variations and styling updates [`c8b4a43`](https://github.com/eea/volto-eea-design-system/commit/c8b4a43dd25c50e77e8c71fa8fbc45cd70bde94e)
+- fix(card): merge fix [`df440ec`](https://github.com/eea/volto-eea-design-system/commit/df440ecd89eeb228f6f28df9109b84460cdfd523)
+- fix(carousel): restore missing variable [`1728312`](https://github.com/eea/volto-eea-design-system/commit/1728312162d102aa2812eb3c7a55dac83bca8a04)
+- refactor(carousel): update card titles to display styling fix [`edd966b`](https://github.com/eea/volto-eea-design-system/commit/edd966b5648be51f2d4056c68489648574506656)
+- fix(carousel): restore flex grow for cards and opacity for arrows [`ce71305`](https://github.com/eea/volto-eea-design-system/commit/ce71305ab3fed5ff5c09b577e970050d3b29a2cb)
+- feat(IconCard): card with icon instead of image [`a85a179`](https://github.com/eea/volto-eea-design-system/commit/a85a1791e3a1245474dcafc4fd833350156dccb4)
+- refactor(card): update meta section and controls [`5e28e12`](https://github.com/eea/volto-eea-design-system/commit/5e28e12bacec6a226659553b8244aeb0165378c9)
+- refactor(card): add links to cards and replace description with title in carousel [`0258737`](https://github.com/eea/volto-eea-design-system/commit/0258737d26bbb3015ee6222ec878e0477001f615)
+- fix(card): fix content gaps, adjust new meta section and update text color for default [`f1a78e1`](https://github.com/eea/volto-eea-design-system/commit/f1a78e14fc9a4b809572bd5d4d45bd10711c6eaa)
+- refactor(card): add new section in meta and remove links [`bfb82ae`](https://github.com/eea/volto-eea-design-system/commit/bfb82ae9635d26ef478db3d63b39f67b25d11fd5)
+- refactor(carousel) add links in carousel cards & update structure and variables of less files [`f99cb21`](https://github.com/eea/volto-eea-design-system/commit/f99cb219f3a95f5aab49a180434a4f5e0db14462)
+
+#### [0.7.6](https://github.com/eea/volto-eea-design-system/compare/0.7.5...0.7.6)
+
+> 15 August 2022
+
+- change(footer): Footer updates 147837 #225 [`fa9ae58`](https://github.com/eea/volto-eea-design-system/commit/fa9ae580c7fd45fb4983672167cb5b0b33cc6279)
+- Autobuild of docusaurus docs [`03b82a6`](https://github.com/eea/volto-eea-design-system/commit/03b82a6a3e20731865de424d6cbce827f64d9504)
+- change(footer): fix missing key warning from react dev [`77f72d5`](https://github.com/eea/volto-eea-design-system/commit/77f72d5bdc719805a6314058c741387ee7155d28)
+- Autobuild of docusaurus docs [`f6930f5`](https://github.com/eea/volto-eea-design-system/commit/f6930f57c7a0b63de20f0fad757c6f1409e43ca2)
+- change(footer): Footer updates 147837 #222 [`32fed23`](https://github.com/eea/volto-eea-design-system/commit/32fed231f1209caeddb18e0bb75d670f20bafb88)
+- change(footer): set actions before thematic section on mobile [`db25f96`](https://github.com/eea/volto-eea-design-system/commit/db25f966a214c94677192215181453e9d59ca957)
+- refactor(footer): initial redesign of main section [`8e85617`](https://github.com/eea/volto-eea-design-system/commit/8e85617157cdc31a7470acfcd72b85d8fadd1bce)
+- refactor(footer): restructure theme sites logo columns [`dcba45a`](https://github.com/eea/volto-eea-design-system/commit/dcba45a0bfd832c7d5d1e092db8ea4040eceda57)
+
+#### [0.7.5](https://github.com/eea/volto-eea-design-system/compare/0.7.3...0.7.5)
+
+> 11 August 2022
+
+- change(megamenu): mobile improvements with See all links, active elements and non accordion children #224 [`6767b99`](https://github.com/eea/volto-eea-design-system/commit/6767b99fea3925b35e9dede0a67ea90242e5e730)
+- Update package.json [`e21e00d`](https://github.com/eea/volto-eea-design-system/commit/e21e00dc1e0b54daef2c71311a9da709bc1f7e6d)
+- Autobuild of docusaurus docs [`ca7c756`](https://github.com/eea/volto-eea-design-system/commit/ca7c75680763219f0acdc4c91d348c4520de13f4)
+- change(megamenu): mobile menu improvements #223 [`b3cabfe`](https://github.com/eea/volto-eea-design-system/commit/b3cabfe3ddc42c2ea39ae20d01bb6fd0db478ecc)
+- change(megamenu): enable active border only for items not titles [`fb0b869`](https://github.com/eea/volto-eea-design-system/commit/fb0b8696dd73cbf3083c3006a7cff5a1901a6bac)
+- change(megamenu): removed icon from at a change menu items and they are no longer bold as requested [`043e772`](https://github.com/eea/volto-eea-design-system/commit/043e77219979711d2f25845c6811b546e791fbf7)
+- change(megamenu): mobile menu design tweaks as seen in latest figma [`26d74dc`](https://github.com/eea/volto-eea-design-system/commit/26d74dc063f0b3f8d541c714a10038d79145047e)
+- change(megamenu): handle default active sub accordion [`6192a99`](https://github.com/eea/volto-eea-design-system/commit/6192a9938b53522682953cb73d7ccfc6ef9c1aec)
+- change(megamenu): fixed key error warnings [`075bf01`](https://github.com/eea/volto-eea-design-system/commit/075bf0167554869e9fc2f4938c972112e4afa2f7)
+- change(megamenu): reset first level panels after each item pass [`175351b`](https://github.com/eea/volto-eea-design-system/commit/175351bdc9bab5c2d02b2717c24071ba62d4b924)
+- change(megamenu): render accordion only if children have children [`be63ce2`](https://github.com/eea/volto-eea-design-system/commit/be63ce2a8e240eac26eedeff0ca104813afbc6b3)
+
 #### [0.7.3](https://github.com/eea/volto-eea-design-system/compare/0.7.2...0.7.3)
 
+> 4 August 2022
+
+- Release [`#218`](https://github.com/eea/volto-eea-design-system/pull/218)
 - Autobuild of docusaurus docs [`93ddb4d`](https://github.com/eea/volto-eea-design-system/commit/93ddb4d3c856adc4a99ad3260671d7c78615bd74)
 - change(megamenu): added icon on mega menu header section [`d0ad4d8`](https://github.com/eea/volto-eea-design-system/commit/d0ad4d80fc4941e0cdbd8a2d81415387f86efc1c)
 

package/package.json

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

package/src/ui/Card/AvatarGrid/AvatarGrid.jsx

@@ -1,11 +1,6 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { Grid, Card, Image } from 'semantic-ui-react';
 
-AvatarGrid.propTypes = {
-  title: PropTypes.string,
-};
-
 function AvatarGrid({ children, ...rest }) {
   return (
     <div className="eea avatar-grid" {...rest}>
@@ -18,11 +13,6 @@ AvatarGrid.Content = ({ children }) => {
   return <div className="content">{children}</div>;
 };
 
-AvatarGrid.Title = ({ children, ...rest }) => (
-  <h3 className={`grid-title  ${rest.showTitle ? '' : 'hidden'}`}>
-    {children}
-  </h3>
-);
 AvatarGrid.Group = ({ children, ...rest }) => {
   let avatars = rest.avatars;
 
@@ -32,10 +22,32 @@ AvatarGrid.Group = ({ children, ...rest }) => {
         {avatars.map((avatar, index) => (
           <Grid.Column key={index} mobile={12} tablet={4} computer={4}>
             <div className="avatar-wrapper">
-              <Card className={`eea rounded big`} fluid={avatar.fluid}>
-                <Image src={avatar.src} wrapped ui={false} alt="card image" />
+              <Card
+                className={`eea rounded ${
+                  rest.variant === 'default' ? '' : rest.variant
+                } ${rest.inverted ? 'inverted' : ''}`}
+                fluid={rest.fluid}
+              >
+                {rest.hasLink ? (
+                  <Image
+                    as="a"
+                    href={rest.href}
+                    src={avatar.src}
+                    wrapped
+                    ui={false}
+                    alt="card image"
+                  />
+                ) : (
+                  <Image src={avatar.src} wrapped ui={false} alt="card image" />
+                )}
                 <Card.Content>
-                  <Card.Header>{avatar.title}</Card.Header>
+                  {rest.hasLink ? (
+                    <Card.Header>
+                      <a href={rest.href}>{avatar.title}</a>
+                    </Card.Header>
+                  ) : (
+                    <Card.Header>{avatar.title}</Card.Header>
+                  )}
                   <Card.Description>{avatar.description}</Card.Description>
                 </Card.Content>
               </Card>

package/src/ui/Card/AvatarGrid/AvatarGrid.stories.jsx

@@ -8,18 +8,38 @@ export default {
   title: 'Components/Card/Rounded Card',
   component: AvatarGrid,
   argTypes: {
-    showTitle: {
-      description: 'show / hide title',
+    variant: {
+      options: ['default', 'primary', 'secondary', 'tertiary'],
+      control: { type: 'select' },
+      description: 'card variation class',
       table: {
+        type: {
+          summary: 'string',
+        },
+        defaultValue: { summary: 'default' },
+      },
+    },
+    inverted: {
+      description: 'Inverted card',
+      table: {
+        defaultValue: { summary: 'false' },
         type: { summary: 'boolean' },
-        defaultValue: { summary: true },
       },
     },
-    title: {
-      description: 'avatar grid title',
+    fluid: {
+      description: 'take up the width of its container',
       table: {
-        defaultValue: { summary: '""' },
-        type: { summary: 'string' },
+        type: {
+          summary: 'boolean',
+        },
+        defaultValue: { summary: false },
+      },
+    },
+    hasLink: {
+      description: 'Clickable card',
+      table: {
+        defaultValue: { summary: 'true' },
+        type: { summary: 'boolean' },
       },
     },
     avatars: {
@@ -36,10 +56,7 @@ const GridTemplate = (args) => (
   <Container>
     <AvatarGrid>
       <AvatarGrid.Content>
-        <AvatarGrid.Title showTitle={args.showTitle}>
-          {args.title}
-        </AvatarGrid.Title>
-        <AvatarGrid.Group avatars={args.avatars}></AvatarGrid.Group>
+        <AvatarGrid.Group avatars={args.avatars} {...args}></AvatarGrid.Group>
       </AvatarGrid.Content>
     </AvatarGrid>
   </Container>
@@ -47,8 +64,11 @@ const GridTemplate = (args) => (
 
 export const RoundedGrid = GridTemplate.bind({});
 RoundedGrid.args = {
-  title: 'Amet - Lorem ipsum dolor sit amet',
-  showTitle: true,
+  variant: 'default',
+  inverted: false,
+  fluid: false,
+  hasLink: true,
+  href: '/#',
   avatars: [
     {
       src: imgUrl,