From 6ea2fa1ec17ce235401a8ac741afa8fede920d26 Mon Sep 17 00:00:00 2001 From: Odisseas Simou Date: Mon, 28 Mar 2022 11:15:43 +0000 Subject: [PATCH 01/29] feat(DownLoadLabeledIcon) : add new component --- .../DownloadLabeledIcon.jsx | 21 ++++++++ .../DownloadLabeledIcon.stories.jsx | 51 +++++++++++++++++++ 2 files changed, 72 insertions(+) create mode 100644 src/ui/DownloadLabeledIcon/DownloadLabeledIcon.jsx create mode 100644 src/ui/DownloadLabeledIcon/DownloadLabeledIcon.stories.jsx diff --git a/src/ui/DownloadLabeledIcon/DownloadLabeledIcon.jsx b/src/ui/DownloadLabeledIcon/DownloadLabeledIcon.jsx new file mode 100644 index 0000000000..c300089095 --- /dev/null +++ b/src/ui/DownloadLabeledIcon/DownloadLabeledIcon.jsx @@ -0,0 +1,21 @@ +import React from 'react'; + +function DownloadLabeledIcon({ children, ...rest }) { + return
+ {children} +
+} + +DownloadLabeledIcon.Label = ({ children, ...rest }) => ( +
{children}
+); + +DownloadLabeledIcon.Icon = ({ children, ...rest }) => ( +
{children}
+); + +DownloadLabeledIcon.Dropdown = ({ children, ...rest }) => ( +
{children}
+); + +export default DownloadLabeledIcon; \ No newline at end of file diff --git a/src/ui/DownloadLabeledIcon/DownloadLabeledIcon.stories.jsx b/src/ui/DownloadLabeledIcon/DownloadLabeledIcon.stories.jsx new file mode 100644 index 0000000000..559aac9bfa --- /dev/null +++ b/src/ui/DownloadLabeledIcon/DownloadLabeledIcon.stories.jsx @@ -0,0 +1,51 @@ +import React from 'react'; +import DownloadLabeledIcon from './DownloadLabeledIcon'; +// eslint-disable-next-line import/no-unresolved + +export default { + title: 'Components/Labeled Icons/Download', + component: DownloadLabeledIcon, + argTypes: { + label: { + description: 'Download Label', + table: { + defaultValue: { summary: '""' }, + type: { summary: 'string' }, + }, + }, + icon: { + description: 'Download Icon', + table: { + defaultValue: { summary: '""' }, + type: { summary: 'string' }, + } + }, + items: { + description: 'array of list content', + table: { + type: { summary: 'object' }, + defaultValue: { summary: ' "" ' }, + }, + }, + }, +}; + +const DefaultTemplate = (args) => ( + + {args.label} + {args.icon} + + +); + +export const Default = DefaultTemplate.bind({}); +Default.args = { + title: 'Download', + icon: , + + items: [ + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Massa volutpat, feugiat lacus libero morbi dui. Ipsum vestibulum, faucibus aliquam pharetra ullamcorper accumsan. Mauris et blandit magna velit aliquam mattis tristique cursus. Gravida quis porta dictum sed nisl gravida. Dictum sapien purus ultrices leo felis quis.', + 'Turpis feugiat felis id imperdiet imperdiet suspendisse. Sed pulvinar nisi, convallis sed non non eu, erat. ', + 'Felis malesuada in elementum turpis. Enim, eu adipiscing sit fames ornare amet, suscipit. Neque, faucibus facilisi egestas vitae viverra tristique cum viverra elit. Nunc fermentum bibendum fames ultricies turpis habitant. ', + ], +}; \ No newline at end of file From 6d8e3acb3bac1a4174d4bb526d6188cb5e5f8faa Mon Sep 17 00:00:00 2001 From: Odisseas Simou Date: Mon, 28 Mar 2022 12:47:48 +0000 Subject: [PATCH 02/29] style(downloadLabeledIcon) : fix styling --- src/semantic.less | 4 ++ .../DownloadLabeledIcon.jsx | 47 ++++++++++---- .../DownloadLabeledIcon.stories.jsx | 20 +++--- src/ui/index.js | 2 + theme/theme.config | 1 + .../eea/extras/downloadLabeledIcon.less | 64 +++++++++++++++++++ .../eea/extras/downloadLabeledIcon.variables | 32 ++++++++++ 7 files changed, 147 insertions(+), 23 deletions(-) create mode 100644 theme/themes/eea/extras/downloadLabeledIcon.less create mode 100644 theme/themes/eea/extras/downloadLabeledIcon.variables diff --git a/src/semantic.less b/src/semantic.less index 170f4d115a..755987006d 100644 --- a/src/semantic.less +++ b/src/semantic.less @@ -256,3 +256,7 @@ & { @import '@eeacms/volto-eea-design-system/../theme/themes/eea/extras/publicationCard'; } + +& { + @import '@eeacms/volto-eea-design-system/../theme/themes/eea/extras/downloadLabeledIcon'; +} diff --git a/src/ui/DownloadLabeledIcon/DownloadLabeledIcon.jsx b/src/ui/DownloadLabeledIcon/DownloadLabeledIcon.jsx index c300089095..d7625c5778 100644 --- a/src/ui/DownloadLabeledIcon/DownloadLabeledIcon.jsx +++ b/src/ui/DownloadLabeledIcon/DownloadLabeledIcon.jsx @@ -1,21 +1,42 @@ -import React from 'react'; +import React, { useState, useContext, createContext } from 'react'; +import { Icon } from 'semantic-ui-react'; +const DownloadContext = createContext(); function DownloadLabeledIcon({ children, ...rest }) { - return
- {children} -
+ const [hidden, setHidden] = useState(true); + return +
+ {children} +
+ } -DownloadLabeledIcon.Label = ({ children, ...rest }) => ( -
{children}
-); +DownloadLabeledIcon.Label = ({ children, ...rest }) => { + const context = useContext(DownloadContext); + return
context.setHidden(!context.hidden)}>{children}
+}; -DownloadLabeledIcon.Icon = ({ children, ...rest }) => ( -
{children}
-); +DownloadLabeledIcon.Icon = ({ children, ...rest }) => { + const context = useContext(DownloadContext); + return
context.setHidden(!context.hidden)}>
+}; -DownloadLabeledIcon.Dropdown = ({ children, ...rest }) => ( -
{children}
-); +DownloadLabeledIcon.Dropdown = ({ children, ...rest }) => { + const context = useContext(DownloadContext); + return
+
+ +
+
+}; export default DownloadLabeledIcon; \ No newline at end of file diff --git a/src/ui/DownloadLabeledIcon/DownloadLabeledIcon.stories.jsx b/src/ui/DownloadLabeledIcon/DownloadLabeledIcon.stories.jsx index 559aac9bfa..410b018697 100644 --- a/src/ui/DownloadLabeledIcon/DownloadLabeledIcon.stories.jsx +++ b/src/ui/DownloadLabeledIcon/DownloadLabeledIcon.stories.jsx @@ -20,7 +20,7 @@ export default { type: { summary: 'string' }, } }, - items: { + links: { description: 'array of list content', table: { type: { summary: 'object' }, @@ -31,21 +31,21 @@ export default { }; const DefaultTemplate = (args) => ( - + + {args.icon} {args.label} - {args.icon} ); export const Default = DefaultTemplate.bind({}); Default.args = { - title: 'Download', - icon: , - - items: [ - 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Massa volutpat, feugiat lacus libero morbi dui. Ipsum vestibulum, faucibus aliquam pharetra ullamcorper accumsan. Mauris et blandit magna velit aliquam mattis tristique cursus. Gravida quis porta dictum sed nisl gravida. Dictum sapien purus ultrices leo felis quis.', - 'Turpis feugiat felis id imperdiet imperdiet suspendisse. Sed pulvinar nisi, convallis sed non non eu, erat. ', - 'Felis malesuada in elementum turpis. Enim, eu adipiscing sit fames ornare amet, suscipit. Neque, faucibus facilisi egestas vitae viverra tristique cum viverra elit. Nunc fermentum bibendum fames ultricies turpis habitant. ', + label: 'Download', + icon: "ri-download-line", + downloadIcon: 'ri-download-line', + links: [ + { linkName: 'PDF', href: '#' }, + { linkName: 'SVG', href: '#' }, + { linkName: 'PNG', href: '#' }, ], }; \ No newline at end of file diff --git a/src/ui/index.js b/src/ui/index.js index 7e3e4d527b..a85858d021 100644 --- a/src/ui/index.js +++ b/src/ui/index.js @@ -27,3 +27,5 @@ export AvatarGrid from './AvatarGrid/AvatarGrid'; export KeyContent from './KeyContent/KeyContent'; export PublicationCard from './PublicationCard/PublicationCard'; + +export DownloadLabeledIcon from './DownloadLabeledIcon/DownloadLabeledIcon'; diff --git a/theme/theme.config b/theme/theme.config index 2b3c15d229..789e06196d 100644 --- a/theme/theme.config +++ b/theme/theme.config @@ -91,6 +91,7 @@ @avatarGrid : 'eea'; @keyContent : 'eea'; @publicationCard : 'eea'; +@downloadLabeledIcon :'eea'; /******************************* Folders diff --git a/theme/themes/eea/extras/downloadLabeledIcon.less b/theme/themes/eea/extras/downloadLabeledIcon.less new file mode 100644 index 0000000000..7da89c438c --- /dev/null +++ b/theme/themes/eea/extras/downloadLabeledIcon.less @@ -0,0 +1,64 @@ +@type: 'extra'; +@element: 'downloadLabeledIcon'; + +@import (multiple) '../../theme.config'; + +/******************************* + Download Labeled Icon +*******************************/ +.eea.download.labeled.icon { + .label { + font-size: 14px; + color: @deepBlue; + cursor: pointer; + } + .icon.wrapper { + width: 68px; + text-align: center; + display: flex; + justify-content: center; + .icon { + cursor: pointer; + font-size: @downloadLabeledIconIconFontSize; + color: @mediumPersianBlue; + display: flex; + width: @iconWidth; + height: @downloadLabeledIconWrapperIconHeight; + align-items: center; + } + } + + .link.wrapper { + position: absolute; + cursor: pointer; + background-color: @downloadLabeledIconLinkWrapperBackgroundColor; + z-index: @downloadLabeledIconLinkWrapperZIndex; + margin-right: @downloadLabeledIconLinkWrapperMarginRight; + width: @downloadLabeledIconLinkWrapperWidth; + padding-left: @downloadLabeledIconLinkWrapperPaddingLeft; + padding-top: @downloadLabeledIconLinkWrapperPaddingTop; + ul { + list-style-type: none; + margin-block-start: @downloadLabeledIconUlMarginBlockStart; + padding-inline-start: @downloadLabeledIconUlPaddingInlineStart; + a { + display: flex; + justify-content: space-around; + font-weight: @downloadLabeledIconALinkontWeight; + font-size: @downloadLabeledIconLinkFontSize; + .icon { + font-size: @downloadLabeledIconLinkIconFontSize; + } + } + a:hover { + color: @downloadLabeledIconALinkColorHover; + } + li:hover { + background-color: @downloadLabeledIconLiHover; + } + } + } + .link.wrapper.hidden { + display: none; + } +} diff --git a/theme/themes/eea/extras/downloadLabeledIcon.variables b/theme/themes/eea/extras/downloadLabeledIcon.variables new file mode 100644 index 0000000000..ff95382f47 --- /dev/null +++ b/theme/themes/eea/extras/downloadLabeledIcon.variables @@ -0,0 +1,32 @@ +/******************************* + Download Labeled Icon +*******************************/ + +/* Extra */ +@downloadLabeledIconWrapperWidth: 100%; +@downloadLabeledIconWrapperBorderTop: 0px; +@downloadLabeledIconWrapperColor: @white; +@downloadLabeledIconWrapperFontSize: 14px; + +/* Icon */ +@downloadLabeledIconIconFontSize: 25px; +@downloadLabeledIconWrapperIconHeight: 20px; + +/* Link Wrapper */ +@downloadLabeledIconLinkWrapperBackgroundColor: #f9f9f9; +@downloadLabeledIconLinkWrapperZIndex: 1; +@downloadLabeledIconLinkWrapperMarginRight: 2.1em; +@downloadLabeledIconLinkWrapperWidth: 5em; +@downloadLabeledIconLinkWrapperPaddingLeft: 9px; +@downloadLabeledIconLinkWrapperPaddingTop: 5px; + +/* List */ +@downloadLabeledIconUlMarginBlockStart: 0; +@downloadLabeledIconUlPaddingInlineStart: 0px; +@downloadLabeledIconLiHover: @deepBlue; + +/* Link */ +@downloadLabeledIconALinkontWeight: 700; +@downloadLabeledIconLinkFontSize: 14px; +@downloadLabeledIconLinkIconFontSize: 16px; +@downloadLabeledIconALinkColorHover: @white; From 455801701d2958515885ba2c398312f0c56057b0 Mon Sep 17 00:00:00 2001 From: Odisseas Simou Date: Tue, 29 Mar 2022 07:44:48 +0000 Subject: [PATCH 03/29] style(downloadLabeledIcon) : fix alignment --- .../DownloadLabeledIcon.jsx | 2 +- .../DownloadLabeledIcon.stories.jsx | 4 +- .../eea/extras/downloadLabeledIcon.less | 76 +++++++++++-------- .../eea/extras/downloadLabeledIcon.variables | 17 ++++- 4 files changed, 61 insertions(+), 38 deletions(-) diff --git a/src/ui/DownloadLabeledIcon/DownloadLabeledIcon.jsx b/src/ui/DownloadLabeledIcon/DownloadLabeledIcon.jsx index d7625c5778..9fcee42722 100644 --- a/src/ui/DownloadLabeledIcon/DownloadLabeledIcon.jsx +++ b/src/ui/DownloadLabeledIcon/DownloadLabeledIcon.jsx @@ -1,4 +1,4 @@ -import React, { useState, useContext, createContext } from 'react'; + import React, { useState, useContext, createContext } from 'react'; import { Icon } from 'semantic-ui-react'; const DownloadContext = createContext(); diff --git a/src/ui/DownloadLabeledIcon/DownloadLabeledIcon.stories.jsx b/src/ui/DownloadLabeledIcon/DownloadLabeledIcon.stories.jsx index 410b018697..7055423223 100644 --- a/src/ui/DownloadLabeledIcon/DownloadLabeledIcon.stories.jsx +++ b/src/ui/DownloadLabeledIcon/DownloadLabeledIcon.stories.jsx @@ -41,8 +41,8 @@ const DefaultTemplate = (args) => ( export const Default = DefaultTemplate.bind({}); Default.args = { label: 'Download', - icon: "ri-download-line", - downloadIcon: 'ri-download-line', + icon: "ri-download-2-fill", + downloadIcon: 'ri-download-2-fill', links: [ { linkName: 'PDF', href: '#' }, { linkName: 'SVG', href: '#' }, diff --git a/theme/themes/eea/extras/downloadLabeledIcon.less b/theme/themes/eea/extras/downloadLabeledIcon.less index 7da89c438c..86d81d3480 100644 --- a/theme/themes/eea/extras/downloadLabeledIcon.less +++ b/theme/themes/eea/extras/downloadLabeledIcon.less @@ -7,13 +7,18 @@ Download Labeled Icon *******************************/ .eea.download.labeled.icon { + width: @downloadLabeledIconWidth; + display: flex; + justify-content: center; + flex-wrap: wrap; .label { - font-size: 14px; - color: @deepBlue; + width: @downloadLabeledIconLabelWidth; + font-size: @downloadLabeledIconLabelFontSize; + color: @downloadLabeledIconLabelColor; cursor: pointer; } .icon.wrapper { - width: 68px; + width: 100%; text-align: center; display: flex; justify-content: center; @@ -22,43 +27,48 @@ font-size: @downloadLabeledIconIconFontSize; color: @mediumPersianBlue; display: flex; - width: @iconWidth; + width: @downloadLabeledIconIconWidth; height: @downloadLabeledIconWrapperIconHeight; align-items: center; } } - .link.wrapper { - position: absolute; - cursor: pointer; - background-color: @downloadLabeledIconLinkWrapperBackgroundColor; - z-index: @downloadLabeledIconLinkWrapperZIndex; - margin-right: @downloadLabeledIconLinkWrapperMarginRight; - width: @downloadLabeledIconLinkWrapperWidth; - padding-left: @downloadLabeledIconLinkWrapperPaddingLeft; - padding-top: @downloadLabeledIconLinkWrapperPaddingTop; - ul { - list-style-type: none; - margin-block-start: @downloadLabeledIconUlMarginBlockStart; - padding-inline-start: @downloadLabeledIconUlPaddingInlineStart; - a { - display: flex; - justify-content: space-around; - font-weight: @downloadLabeledIconALinkontWeight; - font-size: @downloadLabeledIconLinkFontSize; - .icon { - font-size: @downloadLabeledIconLinkIconFontSize; + .dropdown { + width: @downloadLabeledIconDropdownWIdth; + + .link.wrapper { + position: absolute; + cursor: pointer; + background-color: @downloadLabeledIconLinkWrapperBackgroundColor; + z-index: @downloadLabeledIconLinkWrapperZIndex; + margin-right: @downloadLabeledIconLinkWrapperMarginRight; + width: @downloadLabeledIconLinkWrapperWidth; + padding-left: @downloadLabeledIconLinkWrapperPaddingLeft; + padding-top: @downloadLabeledIconLinkWrapperPaddingTop; + ul { + list-style-type: none; + margin-block-start: @downloadLabeledIconUlMarginBlockStart; + padding-inline-start: @downloadLabeledIconUlPaddingInlineStart; + a { + display: flex; + justify-content: space-around; + font-weight: @downloadLabeledIconALinkFontWeight; + font-size: @downloadLabeledIconLinkFontSize; + .icon { + font-size: @downloadLabeledIconLinkIconFontSize; + line-height: @downloadLabeledIconLinkIconLineHeight; + } + } + a:hover { + color: @downloadLabeledIconALinkColorHover; + } + li:hover { + background-color: @downloadLabeledIconLiHover; } - } - a:hover { - color: @downloadLabeledIconALinkColorHover; - } - li:hover { - background-color: @downloadLabeledIconLiHover; } } - } - .link.wrapper.hidden { - display: none; + .link.wrapper.hidden { + display: none; + } } } diff --git a/theme/themes/eea/extras/downloadLabeledIcon.variables b/theme/themes/eea/extras/downloadLabeledIcon.variables index ff95382f47..2d0a3fa134 100644 --- a/theme/themes/eea/extras/downloadLabeledIcon.variables +++ b/theme/themes/eea/extras/downloadLabeledIcon.variables @@ -2,6 +2,14 @@ Download Labeled Icon *******************************/ +/* Body */ +@downloadLabeledIconWidth: 62px; + +/* Label */ +@downloadLabeledIconLabelWidth: 100%; +@downloadLabeledIconLabelFontSize: 14px; +@downloadLabeledIconLabelColor: @deepBlue; + /* Extra */ @downloadLabeledIconWrapperWidth: 100%; @downloadLabeledIconWrapperBorderTop: 0px; @@ -11,22 +19,27 @@ /* Icon */ @downloadLabeledIconIconFontSize: 25px; @downloadLabeledIconWrapperIconHeight: 20px; +@downloadLabeledIconIconWidth: 19px; /* Link Wrapper */ @downloadLabeledIconLinkWrapperBackgroundColor: #f9f9f9; @downloadLabeledIconLinkWrapperZIndex: 1; @downloadLabeledIconLinkWrapperMarginRight: 2.1em; -@downloadLabeledIconLinkWrapperWidth: 5em; +@downloadLabeledIconLinkWrapperWidth: 4em; @downloadLabeledIconLinkWrapperPaddingLeft: 9px; @downloadLabeledIconLinkWrapperPaddingTop: 5px; +/* Dropdown */ +@downloadLabeledIconDropdownWIdth: 100%; + /* List */ @downloadLabeledIconUlMarginBlockStart: 0; @downloadLabeledIconUlPaddingInlineStart: 0px; @downloadLabeledIconLiHover: @deepBlue; /* Link */ -@downloadLabeledIconALinkontWeight: 700; +@downloadLabeledIconALinkFontWeight: 700; @downloadLabeledIconLinkFontSize: 14px; @downloadLabeledIconLinkIconFontSize: 16px; +@downloadLabeledIconLinkIconLineHeight: 20px; @downloadLabeledIconALinkColorHover: @white; From 8f5cd31257a306a58c1d9cdbf7cb428701412369 Mon Sep 17 00:00:00 2001 From: Odisseas Simou Date: Tue, 29 Mar 2022 08:19:42 +0000 Subject: [PATCH 04/29] feat(newTabLabeledIcon) : add new component --- src/semantic.less | 4 + .../NewTabLabeledIcon/NewTabLabeledIcon.jsx | 18 +++++ .../NewTabLabeledIcon.stories.jsx | 37 ++++++++++ src/ui/index.js | 2 + theme/theme.config | 1 + .../themes/eea/extras/newTabLabeledIcon.less | 74 +++++++++++++++++++ .../eea/extras/newTabLabeledIcon.variables | 48 ++++++++++++ 7 files changed, 184 insertions(+) create mode 100644 src/ui/NewTabLabeledIcon/NewTabLabeledIcon.jsx create mode 100644 src/ui/NewTabLabeledIcon/NewTabLabeledIcon.stories.jsx create mode 100644 theme/themes/eea/extras/newTabLabeledIcon.less create mode 100644 theme/themes/eea/extras/newTabLabeledIcon.variables diff --git a/src/semantic.less b/src/semantic.less index 755987006d..d1698bb9b8 100644 --- a/src/semantic.less +++ b/src/semantic.less @@ -260,3 +260,7 @@ & { @import '@eeacms/volto-eea-design-system/../theme/themes/eea/extras/downloadLabeledIcon'; } + +& { + @import '@eeacms/volto-eea-design-system/../theme/themes/eea/extras/newTabLabeledIcon'; +} diff --git a/src/ui/NewTabLabeledIcon/NewTabLabeledIcon.jsx b/src/ui/NewTabLabeledIcon/NewTabLabeledIcon.jsx new file mode 100644 index 0000000000..0740ddb5d8 --- /dev/null +++ b/src/ui/NewTabLabeledIcon/NewTabLabeledIcon.jsx @@ -0,0 +1,18 @@ +import React from 'react'; +import { Icon } from 'semantic-ui-react'; + +function NewTabLabeledIcon({ children, ...rest }) { + return
+ {children} +
+} + +NewTabLabeledIcon.Label = ({ children, ...rest }) => { + return
context.setHidden(!context.hidden)}>{children}
+}; + +NewTabLabeledIcon.Icon = ({ children, ...rest }) => { + return
context.setHidden(!context.hidden)}>
+}; + +export default NewTabLabeledIcon; \ No newline at end of file diff --git a/src/ui/NewTabLabeledIcon/NewTabLabeledIcon.stories.jsx b/src/ui/NewTabLabeledIcon/NewTabLabeledIcon.stories.jsx new file mode 100644 index 0000000000..2d91537c1a --- /dev/null +++ b/src/ui/NewTabLabeledIcon/NewTabLabeledIcon.stories.jsx @@ -0,0 +1,37 @@ +import React from 'react'; +import NewTabLabeledIcon from './NewTabLabeledIcon'; +// eslint-disable-next-line import/no-unresolved + +export default { + title: 'Components/Labeled Icons/New Tab', + component: NewTabLabeledIcon, + argTypes: { + label: { + description: 'New Tab Label', + table: { + defaultValue: { summary: '""' }, + type: { summary: 'string' }, + }, + }, + icon: { + description: 'New Tab Icon', + table: { + defaultValue: { summary: '""' }, + type: { summary: 'string' }, + } + } + }, +}; + +const DefaultTemplate = (args) => ( + + {args.icon} + {args.label} + +); + +export const Default = DefaultTemplate.bind({}); +Default.args = { + label: 'Open in new Tab', + icon: "ri-share-box-fill" +}; \ No newline at end of file diff --git a/src/ui/index.js b/src/ui/index.js index a85858d021..046a456dae 100644 --- a/src/ui/index.js +++ b/src/ui/index.js @@ -29,3 +29,5 @@ export KeyContent from './KeyContent/KeyContent'; export PublicationCard from './PublicationCard/PublicationCard'; export DownloadLabeledIcon from './DownloadLabeledIcon/DownloadLabeledIcon'; + +export NewTabLabeledIcon from './NewTabLabeledIcon/NewTabLabeledIcon'; diff --git a/theme/theme.config b/theme/theme.config index 789e06196d..d9b52a73fc 100644 --- a/theme/theme.config +++ b/theme/theme.config @@ -92,6 +92,7 @@ @keyContent : 'eea'; @publicationCard : 'eea'; @downloadLabeledIcon :'eea'; +@newTabLabeledIcon : 'eea'; /******************************* Folders diff --git a/theme/themes/eea/extras/newTabLabeledIcon.less b/theme/themes/eea/extras/newTabLabeledIcon.less new file mode 100644 index 0000000000..6d054a7839 --- /dev/null +++ b/theme/themes/eea/extras/newTabLabeledIcon.less @@ -0,0 +1,74 @@ +@type: 'extra'; +@element: 'newTabLabeledIcon'; + +@import (multiple) '../../theme.config'; + +/******************************* + Download Labeled Icon +*******************************/ +.eea.new.tab.labeled.icon { + width: @newTabLabeledIconWidth; + display: flex; + justify-content: center; + flex-wrap: wrap; + .label { + width: @newTabLabeledIconLabelWidth; + font-size: @newTabLabeledIconLabelFontSize; + color: @newTabLabeledIconLabelColor; + cursor: pointer; + } + .icon.wrapper { + width: @newTabLabeledIconIconWrapperWidth; + text-align: center; + display: flex; + justify-content: center; + .icon { + cursor: pointer; + font-size: @newTabLabeledIconIconFontSize; + color: @mediumPersianBlue; + display: flex; + width: @newTabLabeledIconIconWidth; + height: @newTabLabeledIconWrapperIconHeight; + align-items: center; + } + } + + .dropdown { + width: @newTabLabeledIconDropdownWIdth; + + .link.wrapper { + position: absolute; + cursor: pointer; + background-color: @newTabLabeledIconLinkWrapperBackgroundColor; + z-index: @newTabLabeledIconLinkWrapperZIndex; + margin-right: @newTabLabeledIconLinkWrapperMarginRight; + width: @newTabLabeledIconLinkWrapperWidth; + padding-left: @newTabLabeledIconLinkWrapperPaddingLeft; + padding-top: @newTabLabeledIconLinkWrapperPaddingTop; + ul { + list-style-type: none; + margin-block-start: @newTabLabeledIconUlMarginBlockStart; + padding-inline-start: @newTabLabeledIconUlPaddingInlineStart; + a { + display: flex; + justify-content: space-around; + font-weight: @newTabLabeledIconALinkFontWeight; + font-size: @newTabLabeledIconLinkFontSize; + .icon { + font-size: @newTabLabeledIconLinkIconFontSize; + line-height: @newTabLabeledIconLinkIconLineHeight; + } + } + a:hover { + color: @newTabLabeledIconALinkColorHover; + } + li:hover { + background-color: @newTabLabeledIconLiHover; + } + } + } + .link.wrapper.hidden { + display: none; + } + } +} diff --git a/theme/themes/eea/extras/newTabLabeledIcon.variables b/theme/themes/eea/extras/newTabLabeledIcon.variables new file mode 100644 index 0000000000..b986a66134 --- /dev/null +++ b/theme/themes/eea/extras/newTabLabeledIcon.variables @@ -0,0 +1,48 @@ +/******************************* + Download Labeled Icon +*******************************/ + +/* Body */ +@newTabLabeledIconWidth: 103px; + +/* Label */ +@newTabLabeledIconLabelWidth: 100%; +@newTabLabeledIconLabelFontSize: 14px; +@newTabLabeledIconLabelColor: @deepBlue; + +/* Extra */ +@newTabLabeledIconWrapperWidth: 100%; +@newTabLabeledIconWrapperBorderTop: 0px; +@newTabLabeledIconWrapperColor: @white; +@newTabLabeledIconWrapperFontSize: 14px; + +/* Icon Wrapper */ +@newTabLabeledIconIconWrapperWidth: 100%; + +/* Icon */ +@newTabLabeledIconIconFontSize: 25px; +@newTabLabeledIconWrapperIconHeight: 20px; +@newTabLabeledIconIconWidth: 19px; + +/* Link Wrapper */ +@newTabLabeledIconLinkWrapperBackgroundColor: #f9f9f9; +@newTabLabeledIconLinkWrapperZIndex: 1; +@newTabLabeledIconLinkWrapperMarginRight: 2.1em; +@newTabLabeledIconLinkWrapperWidth: 4em; +@newTabLabeledIconLinkWrapperPaddingLeft: 9px; +@newTabLabeledIconLinkWrapperPaddingTop: 5px; + +/* Dropdown */ +@newTabLabeledIconDropdownWIdth: 100%; + +/* List */ +@newTabLabeledIconUlMarginBlockStart: 0; +@newTabLabeledIconUlPaddingInlineStart: 0px; +@newTabLabeledIconLiHover: @deepBlue; + +/* Link */ +@newTabLabeledIconALinkFontWeight: 700; +@newTabLabeledIconLinkFontSize: 14px; +@newTabLabeledIconLinkIconFontSize: 16px; +@newTabLabeledIconLinkIconLineHeight: 20px; +@newTabLabeledIconALinkColorHover: @white; From b1a9ada3dd7dae9e1841cfde5319a6ab37b15de2 Mon Sep 17 00:00:00 2001 From: Odisseas Simou Date: Tue, 29 Mar 2022 09:18:14 +0000 Subject: [PATCH 05/29] fix(newTabLabeledIcon) : add link item --- src/ui/NewTabLabeledIcon/NewTabLabeledIcon.jsx | 6 +++--- src/ui/NewTabLabeledIcon/NewTabLabeledIcon.stories.jsx | 8 ++++++++ 2 files changed, 11 insertions(+), 3 deletions(-) diff --git a/src/ui/NewTabLabeledIcon/NewTabLabeledIcon.jsx b/src/ui/NewTabLabeledIcon/NewTabLabeledIcon.jsx index 0740ddb5d8..1c8a94885d 100644 --- a/src/ui/NewTabLabeledIcon/NewTabLabeledIcon.jsx +++ b/src/ui/NewTabLabeledIcon/NewTabLabeledIcon.jsx @@ -3,16 +3,16 @@ import { Icon } from 'semantic-ui-react'; function NewTabLabeledIcon({ children, ...rest }) { return
- {children} + {children}
} NewTabLabeledIcon.Label = ({ children, ...rest }) => { - return
context.setHidden(!context.hidden)}>{children}
+ return
{children}
}; NewTabLabeledIcon.Icon = ({ children, ...rest }) => { - return
context.setHidden(!context.hidden)}>
+ return
}; export default NewTabLabeledIcon; \ No newline at end of file diff --git a/src/ui/NewTabLabeledIcon/NewTabLabeledIcon.stories.jsx b/src/ui/NewTabLabeledIcon/NewTabLabeledIcon.stories.jsx index 2d91537c1a..a45fc7e440 100644 --- a/src/ui/NewTabLabeledIcon/NewTabLabeledIcon.stories.jsx +++ b/src/ui/NewTabLabeledIcon/NewTabLabeledIcon.stories.jsx @@ -13,6 +13,13 @@ export default { type: { summary: 'string' }, }, }, + link: { + description: 'New Tab Link', + table: { + defaultValue: { summary: '""' }, + type: { summary: 'string' }, + }, + }, icon: { description: 'New Tab Icon', table: { @@ -33,5 +40,6 @@ const DefaultTemplate = (args) => ( export const Default = DefaultTemplate.bind({}); Default.args = { label: 'Open in new Tab', + link: '/#', icon: "ri-share-box-fill" }; \ No newline at end of file From 91b042f8c16bd3e99659c1c24a5f2a946c72b03f Mon Sep 17 00:00:00 2001 From: Odisseas Simou Date: Tue, 29 Mar 2022 09:26:26 +0000 Subject: [PATCH 06/29] fix(LabeledIcon) : fix lint errors fix NewTabLabeledIcon lint errors fix DownloadLabeledIcon lint errors --- .../DownloadLabeledIcon.jsx | 82 +- .../DownloadLabeledIcon.stories.jsx | 78 +- .../NewTabLabeledIcon/NewTabLabeledIcon.jsx | 18 +- .../NewTabLabeledIcon.stories.jsx | 66 +- theme/themes/eea/elements/loader.overrides | 6 +- theme/themes/eea/extras/blockquote.less | 2 +- theme/themes/eea/extras/footer.less | 472 +++--- theme/themes/eea/extras/header.less | 1358 ++++++++--------- theme/themes/eea/extras/publicationCard.less | 124 +- 9 files changed, 1121 insertions(+), 1085 deletions(-) diff --git a/src/ui/DownloadLabeledIcon/DownloadLabeledIcon.jsx b/src/ui/DownloadLabeledIcon/DownloadLabeledIcon.jsx index 9fcee42722..90f1c92834 100644 --- a/src/ui/DownloadLabeledIcon/DownloadLabeledIcon.jsx +++ b/src/ui/DownloadLabeledIcon/DownloadLabeledIcon.jsx @@ -1,42 +1,68 @@ - import React, { useState, useContext, createContext } from 'react'; +import React, { useState, useContext, createContext } from 'react'; import { Icon } from 'semantic-ui-react'; const DownloadContext = createContext(); function DownloadLabeledIcon({ children, ...rest }) { - const [hidden, setHidden] = useState(true); - return -
- {children} -
+ const [hidden, setHidden] = useState(true); + return ( + +
{children}
 + ); } -DownloadLabeledIcon.Label = ({ children, ...rest }) => { - const context = useContext(DownloadContext); - return
context.setHidden(!context.hidden)}>{children}
+const Label = ({ children, ...rest }) => { + const context = useContext(DownloadContext); + return ( +
context.setHidden(!context.hidden)} + role="button" + tabIndex={0} + onKeyDown={() => context.setHidden(!context.hidden)} + > + {children} +
+ ); }; -DownloadLabeledIcon.Icon = ({ children, ...rest }) => { - const context = useContext(DownloadContext); - return
context.setHidden(!context.hidden)}>
+const IconItem = ({ children, ...rest }) => { + const context = useContext(DownloadContext); + return ( +
context.setHidden(!context.hidden)} + onKeyDown={() => context.setHidden(!context.hidden)} + role="button" + tabIndex={0} + > + +
+ ); }; -DownloadLabeledIcon.Dropdown = ({ children, ...rest }) => { - const context = useContext(DownloadContext); - return
-
- -
+const Dropdown = ({ children, ...rest }) => { + const context = useContext(DownloadContext); + return ( +
+
+ +
+ ); }; -export default DownloadLabeledIcon; \ No newline at end of file +DownloadLabeledIcon.Label = Label; +DownloadLabeledIcon.Icon = IconItem; +DownloadLabeledIcon.Dropdown = Dropdown; + +export default DownloadLabeledIcon; diff --git a/src/ui/DownloadLabeledIcon/DownloadLabeledIcon.stories.jsx b/src/ui/DownloadLabeledIcon/DownloadLabeledIcon.stories.jsx index 7055423223..e44a73b2b5 100644 --- a/src/ui/DownloadLabeledIcon/DownloadLabeledIcon.stories.jsx +++ b/src/ui/DownloadLabeledIcon/DownloadLabeledIcon.stories.jsx @@ -3,49 +3,51 @@ import DownloadLabeledIcon from './DownloadLabeledIcon'; // eslint-disable-next-line import/no-unresolved export default { - title: 'Components/Labeled Icons/Download', - component: DownloadLabeledIcon, - argTypes: { - label: { - description: 'Download Label', - table: { - defaultValue: { summary: '""' }, - type: { summary: 'string' }, - }, - }, - icon: { - description: 'Download Icon', - table: { - defaultValue: { summary: '""' }, - type: { summary: 'string' }, - } - }, - links: { - description: 'array of list content', - table: { - type: { summary: 'object' }, - defaultValue: { summary: ' "" ' }, - }, - }, + title: 'Components/Labeled Icons/Download', + component: DownloadLabeledIcon, + argTypes: { + label: { + description: 'Download Label', + table: { + defaultValue: { summary: '""' }, + type: { summary: 'string' }, + }, }, + icon: { + description: 'Download Icon', + table: { + defaultValue: { summary: '""' }, + type: { summary: 'string' }, + }, + }, + links: { + description: 'array of list content', + table: { + type: { summary: 'object' }, + defaultValue: { summary: ' "" ' }, + }, + }, + }, }; const DefaultTemplate = (args) => ( - - {args.icon} - {args.label} - - + + + {args.icon} + + {args.label} + + ); export const Default = DefaultTemplate.bind({}); Default.args = { - label: 'Download', - icon: "ri-download-2-fill", - downloadIcon: 'ri-download-2-fill', - links: [ - { linkName: 'PDF', href: '#' }, - { linkName: 'SVG', href: '#' }, - { linkName: 'PNG', href: '#' }, - ], -}; \ No newline at end of file + label: 'Download', + icon: 'ri-download-2-fill', + downloadIcon: 'ri-download-2-fill', + links: [ + { linkName: 'PDF', href: '#' }, + { linkName: 'SVG', href: '#' }, + { linkName: 'PNG', href: '#' }, + ], +}; diff --git a/src/ui/NewTabLabeledIcon/NewTabLabeledIcon.jsx b/src/ui/NewTabLabeledIcon/NewTabLabeledIcon.jsx index 1c8a94885d..d679986134 100644 --- a/src/ui/NewTabLabeledIcon/NewTabLabeledIcon.jsx +++ b/src/ui/NewTabLabeledIcon/NewTabLabeledIcon.jsx @@ -2,17 +2,25 @@ import React from 'react'; import { Icon } from 'semantic-ui-react'; function NewTabLabeledIcon({ children, ...rest }) { - return
- {children} + return ( + + ); } NewTabLabeledIcon.Label = ({ children, ...rest }) => { - return
{children}
+ return
{children}
; }; NewTabLabeledIcon.Icon = ({ children, ...rest }) => { - return
+ return ( +
+ +
+ ); }; -export default NewTabLabeledIcon; \ No newline at end of file +export default NewTabLabeledIcon; diff --git a/src/ui/NewTabLabeledIcon/NewTabLabeledIcon.stories.jsx b/src/ui/NewTabLabeledIcon/NewTabLabeledIcon.stories.jsx index a45fc7e440..7762cfb209 100644 --- a/src/ui/NewTabLabeledIcon/NewTabLabeledIcon.stories.jsx +++ b/src/ui/NewTabLabeledIcon/NewTabLabeledIcon.stories.jsx @@ -3,43 +3,45 @@ import NewTabLabeledIcon from './NewTabLabeledIcon'; // eslint-disable-next-line import/no-unresolved export default { - title: 'Components/Labeled Icons/New Tab', - component: NewTabLabeledIcon, - argTypes: { - label: { - description: 'New Tab Label', - table: { - defaultValue: { summary: '""' }, - type: { summary: 'string' }, - }, - }, - link: { - description: 'New Tab Link', - table: { - defaultValue: { summary: '""' }, - type: { summary: 'string' }, - }, - }, - icon: { - description: 'New Tab Icon', - table: { - defaultValue: { summary: '""' }, - type: { summary: 'string' }, - } - } + title: 'Components/Labeled Icons/New Tab', + component: NewTabLabeledIcon, + argTypes: { + label: { + description: 'New Tab Label', + table: { + defaultValue: { summary: '""' }, + type: { summary: 'string' }, + }, }, + link: { + description: 'New Tab Link', + table: { + defaultValue: { summary: '""' }, + type: { summary: 'string' }, + }, + }, + icon: { + description: 'New Tab Icon', + table: { + defaultValue: { summary: '""' }, + type: { summary: 'string' }, + }, + }, + }, }; const DefaultTemplate = (args) => ( - - {args.icon} - {args.label} - + + + {args.icon} + + {args.label} + ); export const Default = DefaultTemplate.bind({}); Default.args = { - label: 'Open in new Tab', - link: '/#', - icon: "ri-share-box-fill" -}; \ No newline at end of file + label: 'Open in new Tab', + link: '/#', + icon: 'ri-share-box-fill', +}; diff --git a/theme/themes/eea/elements/loader.overrides b/theme/themes/eea/elements/loader.overrides index 465f99c8b7..73068e0a57 100644 --- a/theme/themes/eea/elements/loader.overrides +++ b/theme/themes/eea/elements/loader.overrides @@ -15,10 +15,10 @@ justify-content: center; padding-bottom: 1em; background: rgba(255, 255, 255, 0.95); + background-image: url('../assets/images/loaderImage.png'); + background-position: center; + background-repeat: no-repeat; border-radius: 72px 30px 0px 32px; font-size: @bigFontSize; font-weight: @loaderTextFontWeight; - background-image: url('../assets/images/loaderImage.png'); - background-repeat:no-repeat; - background-position:center; } diff --git a/theme/themes/eea/extras/blockquote.less b/theme/themes/eea/extras/blockquote.less index 2144d56a62..5f02f87b3b 100644 --- a/theme/themes/eea/extras/blockquote.less +++ b/theme/themes/eea/extras/blockquote.less @@ -36,7 +36,7 @@ font-weight: @slateQuoteFontWeight; br { - content: ""; + content: ''; display: flex; margin: @slateQuoteGap 0; } diff --git a/theme/themes/eea/extras/footer.less b/theme/themes/eea/extras/footer.less index 11c861f4d7..cd1ba367df 100644 --- a/theme/themes/eea/extras/footer.less +++ b/theme/themes/eea/extras/footer.less @@ -8,261 +8,259 @@ --------------------*/ footer { - display: flex; - flex-direction: column; - align-items: center; - background: @footerBackgroundGrandient; - color: @white; + display: flex; + flex-direction: column; + align-items: center; + background: @footerBackgroundGrandient; + color: @white; + + .visual { + width: @visualWidth; + padding: @mobileVisualPadding; + background-image: @visualBackgroundImage; + background-position: @visualBackgroundPosition; + background-size: @visualBackgroundSize; + + .theme-sites { + padding: @mobileThemeSitesPadding; + + .header { + font-weight: @headerFontWeight; + font-size: @mobileHeaderFontSize; + margin-bottom: @mobileHeaderMarginBottom; + text-align: center; + } + + .logos .logo { + display: flex; + align-items: center; + justify-content: center; + } + } + .subfooter { + .item { + margin-top: @mobileItemMarginTop; + + .site.logo { + .description { + margin: @mobileDescriptionMargin; + font-size: @mobileDescriptionFontSize; + line-height: @mobileDescriptionLineHeight; + } + } - .visual { - width: @visualWidth; - padding: @mobileVisualPadding; - background-image: @visualBackgroundImage; - background-position: @visualBackgroundPosition; - background-size: @visualBackgroundSize; - - .theme-sites { - padding: @mobileThemeSitesPadding; - - .header { - font-weight: @headerFontWeight; - font-size: @mobileHeaderFontSize; - margin-bottom: @mobileHeaderMarginBottom; - text-align: center; - } + .eionet.logo { + display: flex; + align-items: center; + margin-top: @eionetMarginTop; + + img { + width: @mobileEionetLogoWidth; + margin-left: @mobileEionetLogoMarginLeft; + margin-right: @mobileEionetLogoMarginRight; + } + + .description { + padding-top: @mobileEionetDescriptionPaddingTop; + font-size: @mobileEionetDescriptionFontSize; + line-height: @mobileEionetDescriptionLineHeight; + font-weight: @eionetDescriptionFontWeight; + } + } - .logos .logo { - display: flex; - align-items: center; - justify-content: center; - } + .header { + margin-bottom: @mobileItemHeaderMarginBottom; + font-size: @mobileItemHeaderFontSize; + font-weight: @itemHeaderFontWeight; } - .subfooter { - .item { - margin-top: @mobileItemMarginTop; - - .site.logo { - .description { - margin: @mobileDescriptionMargin; - font-size: @mobileDescriptionFontSize; - line-height: @mobileDescriptionLineHeight; - } - } - - .eionet.logo { - display: flex; - align-items: center; - margin-top: @eionetMarginTop; - - img { - width: @mobileEionetLogoWidth; - margin-left: @mobileEionetLogoMarginLeft; - margin-right: @mobileEionetLogoMarginRight; - } - - .description { - padding-top: @mobileEionetDescriptionPaddingTop; - font-size: @mobileEionetDescriptionFontSize; - line-height: @mobileEionetDescriptionLineHeight; - font-weight: @eionetDescriptionFontWeight; - } - } - - .header { - margin-bottom: @mobileItemHeaderMarginBottom; - font-size: @mobileItemHeaderFontSize; - font-weight: @itemHeaderFontWeight; - } - - .contact { - display: flex; - align-items: center; - margin: @contactMargin; - font-size: @mobileContactFontSize; - - a { - color: @menuLinkColor; - } - } - .address { - font-size: @mobileAdressFontSize; - } - - .social a { - color: @socialIconColor; - - &:active, - &:hover { - color: @socialIconColor; - } - - i.icon { - font-size: @mobileSocialIconSize; - } - } - } - .menu { - display: flex; - align-items: center; - justify-content: space-around; - margin: @mobileMenuMargin; - - a { - color: @menuLinkColor; - font-weight: @menuFontWeight; - font-size: @mobileMenuFontSize; - cursor: pointer; - - &:hover, - &:active { - color: @menuLinkColor; - } - } - } + + .contact { + display: flex; + align-items: center; + margin: @contactMargin; + font-size: @mobileContactFontSize; + + a { + color: @menuLinkColor; + } + } + .address { + font-size: @mobileAdressFontSize; } + + .social a { + color: @socialIconColor; + + &:active, + &:hover { + color: @socialIconColor; + } + + i.icon { + font-size: @mobileSocialIconSize; + } + } + } + .menu { + display: flex; + align-items: center; + justify-content: space-around; + margin: @mobileMenuMargin; + + a { + color: @menuLinkColor; + font-weight: @menuFontWeight; + font-size: @mobileMenuFontSize; + cursor: pointer; + + &:hover, + &:active { + color: @menuLinkColor; + } + } + } } + } } - + @media only screen and (min-width: @tabletBreakpoint) { - footer { - .visual { - .theme-sites { - .header { - font-size: @tabletHeaderFontSize; - margin-bottom: @tabletHeaderMarginBottom; - } + footer { + .visual { + .theme-sites { + .header { + font-size: @tabletHeaderFontSize; + margin-bottom: @tabletHeaderMarginBottom; + } + } + .subfooter { + .item { + margin-top: @tabletItemMarginTop; + + .site.logo { + img { + width: @tabletSiteLogoWidth; + display: @tabletSiteLogoDisplay; } - .subfooter { - .item { - margin-top: @tabletItemMarginTop; - - .site.logo { - img { - width: @tabletSiteLogoWidth; - display: @tabletSiteLogoDisplay; - } - .description { - font-size: @tabletDescriptionFontSize; - line-height: @tabletDescriptionLineHeight; - } - } - - .eionet.logo { - img { - width: @tabletEionetLogoWidth; - margin-left: @tabletEionetLogoMarginLeft; - } - - .description { - padding-top: @tabletEionetDescriptionPaddingTop; - font-size: @tabetEionetDescriptionFontSize; - line-height: @tabletEionetDescriptionLineHeight; - } - } - - .header { - margin-bottom: @tabletItemHeaderMarginBottom; - font-size: @tabletItemHeaderFontSize; - } - - .contact { - font-size: @tabletContactFontSize; - - i.big.icon { - margin-right: @tabletContactIconMarginRight; - font-size: @tabletContactIconFontSize; - } - } - - .address { - font-size: @tabletAddressFontSize; - } - - .social a i.icon { - font-size: @tabletSocialIconSize; - } - } - .menu { - width: @tabletMenuWidth; - margin: @tabletMenuMargin; - - a { - font-size: @tabletMenuFontSize; - } - } + .description { + font-size: @tabletDescriptionFontSize; + line-height: @tabletDescriptionLineHeight; } + } + + .eionet.logo { + img { + width: @tabletEionetLogoWidth; + margin-left: @tabletEionetLogoMarginLeft; + } + + .description { + padding-top: @tabletEionetDescriptionPaddingTop; + font-size: @tabetEionetDescriptionFontSize; + line-height: @tabletEionetDescriptionLineHeight; + } + } + + .header { + margin-bottom: @tabletItemHeaderMarginBottom; + font-size: @tabletItemHeaderFontSize; + } + + .contact { + font-size: @tabletContactFontSize; + + i.big.icon { + margin-right: @tabletContactIconMarginRight; + font-size: @tabletContactIconFontSize; + } + } + + .address { + font-size: @tabletAddressFontSize; + } + + .social a i.icon { + font-size: @tabletSocialIconSize; + } + } + .menu { + width: @tabletMenuWidth; + margin: @tabletMenuMargin; + + a { + font-size: @tabletMenuFontSize; + } } + } } + } } - + @media only screen and (min-width: @computerBreakpoint) { - footer { + footer { + .visual { + padding: @computerVisualPadding; - .visual { - padding: @computerVisualPadding; + .theme-sites { + padding: @computerThemeSitesPadding; - .theme-sites { - padding: @computerThemeSitesPadding; + .header { + font-size: @computerHeaderFontSize; + margin-bottom: @computerHeaderMarginBottom; + } + } + .subfooter { + .item { + margin-top: @computerItemMarginTop; + + .site.logo { + img { + width: @computerSiteLogoWidth; + } + .description { + margin: @computerDescriptionMargin; + } + } + + .eionet.logo { + img { + width: @computerEionetLogoWidth; + margin-left: @computerEionetLogoMarginLeft; + margin-right: @computerEionetLogoMarginRight; + } - .header { - font-size: @computerHeaderFontSize; - margin-bottom: @computerHeaderMarginBottom; - } + .description { + font-size: @computerEionetDescriptionFontSize; + line-height: @computerEionetDescriptionLineHeight; } - .subfooter { - .item { - margin-top: @computerItemMarginTop; - - .site.logo { - img { - width: @computerSiteLogoWidth; - } - .description { - margin: @computerDescriptionMargin; - } - - } - - .eionet.logo { - img { - width: @computerEionetLogoWidth; - margin-left: @computerEionetLogoMarginLeft; - margin-right: @computerEionetLogoMarginRight; - } - - .description { - font-size: @computerEionetDescriptionFontSize; - line-height: @computerEionetDescriptionLineHeight; - } - } - - .header { - margin-bottom: @computerItemHeaderMarginBottom; - font-size: @computerItemHeaderFontSize; - } - - .contact { - font-size: @computerContactFontSize; - - i.big.icon { - font-size: @computerContactIconFontSize; - } - } - - .social a i.icon { - font-size: @computerSocialIconSize; - } - } - .menu { - justify-content: flex-end; - width: 100%; - - a { - padding-left: 3rem; - font-size: @computerMenuFontSize; - } - } + } + + .header { + margin-bottom: @computerItemHeaderMarginBottom; + font-size: @computerItemHeaderFontSize; + } + + .contact { + font-size: @computerContactFontSize; + + i.big.icon { + font-size: @computerContactIconFontSize; } + } + + .social a i.icon { + font-size: @computerSocialIconSize; + } + } + .menu { + justify-content: flex-end; + width: 100%; + + a { + padding-left: 3rem; + font-size: @computerMenuFontSize; + } } + } } + } } diff --git a/theme/themes/eea/extras/header.less b/theme/themes/eea/extras/header.less index d10220c591..4b074ba158 100644 --- a/theme/themes/eea/extras/header.less +++ b/theme/themes/eea/extras/header.less @@ -1,679 +1,679 @@ -@type: 'extra'; -@element: 'header'; - -@import (multiple) '../../theme.config'; - -/******************************* - Header -*******************************/ - -.eea.header { - background: @white; - - /* Top header section */ - .top.bar { - display: flex; - align-items: center; - height: @mobileTopSectionHeight; - background: @topSectionBackground; - - .ui.container { - display: flex; - align-items: center; - justify-content: space-between; - z-index: @topSectionZindex; - } - .item { - display: flex; - align-items: center; - color: @topSectionItemColor; - font-weight: @topSectionItemFontWeight; - font-size: @mobileTopSectionItemFontSize; - } - .ui.dropdown { - border: none !important; - height: auto !important; - border-radius: @defaultBorderRadius; - color: @topSectionItemColor; - - font-size: @dropdownFontSize; - font-weight: @dropdownFontWeight; - - .menu { - margin-top: @mobileDropdownMenuMarginTop; - left: @dropdownMenuLeft; - right: @dropdownMenuRight; - - .wrapper { - display: flex; - flex-direction: column; - gap: @dropdownMenuWrapperGap; - white-space: @dropdownMenuContentWhiteSpace; - margin: @dropdownMenuWrapperMargin; - - .item { - &:hover { - background: @dropdownMenuItemBackgroundColorHover; - color: @dropdownMenuItemColorHover; - cursor: pointer; - } - } - } - } - } - - /* Official union dropdowns */ - .official-union { - display: flex; - gap: @officialUnionGap; - } - .official-union.mobile.or.lower.hidden { - .ui.dropdown .menu { - padding: @tabletOfficialUnionPadding; - - .content { - max-width: @tabletOfficialUnionMaxWidth; - } - - p { - font-size: @officialUnionMenuFontSize; - font-weight: @officialUnionTextFontWeight; - white-space: @dropdownMenuContentWhiteSpace; - } - a { - font-size: @officialUnionMenuFontSize; - font-weight: @officialUnionLinkFontWeight; - white-space: @dropdownMenuContentWhiteSpace; - color: @officialUnionLinkColor; - } - } - } - .official-union.mobile.only { - img { - width: @tabletOfficialUnionImageWidth; - } - - .ui.dropdown { - font-size: @mobileTopSectionItemFontSize; - - .menu { - padding: @mobileOfficialUnionPadding; - - .content { - max-width: @mobileOfficialUnionMaxWidth; - - p, - a { - font-size: @mobileDropdownMenuContentFontSize; - font-weight: @dropdownMenuContentFontWeight; - white-space: @dropdownMenuContentWhiteSpace; - } - - i.icon, - i.icons { - font-size: @mobileTopSectionItemFontSize; - } - } - } - } - } - - /* Theme sites dropdown */ - #theme-sites.ui.dropdown .menu { - .wrapper { - width: @themeSitesMenuWidth; - - .item { - padding: @themeSitesMenuItemPadding; - - &:hover { - a.site { - color: @white; - } - } - - a.site { - color: @themeSitesMenuSiteLinkColor; - font-weight: @themeSitesMenuSiteLinkFontWeight; - } - } - } - } - - /* Language dropdown */ - #language-switcher { - font-size: @mobileLanguageFontSize; - - img { - width: @mobileOfficialUnionImageWidth; - } - .menu { - top: @mobileLanguageMenuTop; - color: @japaneseIndigo; - - .wrapper { - .item { - justify-content: flex-end; - padding: @languageMenuPadding; - font-weight: @languageMenuItemFontWeight; - font-size: @mobileLanguageFontSize; - - span.country-code { - margin-left: @mobileLanguageCountryCodeMarginLeft; - font-weight: @mobileLanguageCountryCodeFontWeight; - } - } - } - } - } - } - - /* Main header section */ - .main.bar { - .ui.container { - display: flex; - align-items: center; - justify-content: space-between; - height: @mobileMainSectionHeight; - - .ui.grid { - /* All margins and paddings removed for main header */ - width: 100%; - margin-top: 0; - margin-bottom: 0; - margin-left: 0; - margin-right: 0; - - div:first-child { - padding-left: 0; - } - - div:last-child { - padding-right: 0; - } - } - - #logo { - width: @logoWidth; - max-width: @mobileLogoMaxWidth; - margin-top: @mobileLogoMarginTop; - } - - .main-menu { - display: flex; - align-items: flex-end; - justify-content: flex-end; - width: 100%; - - .item { - color: @mainMenuItemColor; - font-size: @mainMenuItemFontSize; - font-weight: @mainMenuItemFontWeight; - place-self: @mainMenuItemPlaceSelf; - } - - .item.active { - color: @mainMenuItemActiveColor; - border-bottom: @mainMenuItemActiveBorder; - } - } - } - - /* Search Box */ - #search-box { - position: relative; - z-index: 99999; - overflow: scroll; - width: 100%; - height: @mobilePopUpHeight; - background: @searchBoxBackgroundGradient; - - .ui.container { - height: 100%; - align-items: baseline; - } - .wrapper { - position: relative; - width: 100%; - margin-top: @mobilePopupMarginTop; - display: flex; - flex-direction: column; - gap: @searchBoxWrapperGap; - - .action { - display: flex; - justify-content: center; - } - } - } - } -} - -/*************************************** -Header Actions - Burger and Search Icons -***************************************/ -.burger-action { - display: flex; - align-items: center; - justify-content: center; - cursor: pointer; - width: @mobileActionsBoxWidth; - height: @mobileMainSectionHeight; - background-color: @darkCerulean; -} - -.burger-action.desktop { - display: none; -} - -.burger-action.mobile { - display: flex; - flex-direction: column; - cursor: pointer; -} - -.search-action { - cursor: pointer; - display: flex; - width: @mobileActionsBoxWidth; - height: @mobileMainSectionHeight; - align-items: center; - justify-content: center; - background-color: @darkCyan; -} - -.burger-action, -.search-action, -.burger-action.mobile { - img { - width: 60%; - } - // icon to be used - i.icon { - margin: 0; - color: @white; - font-size: 1em; - display: flex; - justify-content: center; - align-items: center; - } -} - -@media only screen and (min-width: @tabletBreakpoint) { - .eea.header { - .top.bar { - height: @tabletTopSectionHeight; - - .item { - font-size: @tabletTopSectionItemFontSize; - } - - .ui.dropdown .menu { - margin-top: @tabletDropdownMenuMarginTop; - } - - /* Language dropdown */ - #language-switcher { - font-size: @tabletLanguageFontSize; - - img { - width: 19px; - } - - .menu { - top: @tabletLanguageMenuTop; - .wrapper .item { - font-size: @tabletLanguageFontSize; - } - } - } - } - .main.bar { - .ui.container { - height: 117px; - - #logo { - max-width: @tabletLogoMaxWidth; - margin-top: @tabletLogoMarginTop; - } - } - - /* Search box */ - #search-box { - height: @tabletPopUpHeight; - .wrapper { - margin-top: @tabletPopupMarginTop; - } - } - } - } - - .text.menu { - display: none; - } - - .burger-action.mobile { - display: flex; - } - - /* Action Boxes */ - .burger-action.mobile, - .search-action { - width: @tabletActionsBoxWidth; - height: @tabletMainSectionHeight; - } -} - -@media only screen and (min-width: @computerBreakpoint) { - .eea.header { - .top.bar { - height: @computerTopSectionHeight; - } - - .main.bar { - .ui.container { - height: 160px; - - #logo { - max-width: @computerLogoMaxWidth; - margin-top: @computerLogoMarginTop; - } - - .ui.text.menu { - display: flex; - width: 88%; - max-height: 20px; - justify-content: space-between; - margin: 0; - } - } - - /* Search box */ - #search-box { - height: @computerPopUpHeight; - - .wrapper { - margin-top: @computerPopupMarginTop; - - .action { - justify-content: flex-end; - } - } - } - } - } - - .burger-action.mobile { - display: none; - } - - .burger-action.desktop { - display: flex; - width: @computerActionsBoxWidth; - height: @computerMainSectionHeight; - } - - .search-action { - width: @computerActionsBoxWidth; - height: @computerMainSectionHeight; - } -} - -@media only screen and (max-width: 960px) { - #theme-sites { - display: none; - } -} - -/************************ - MEGA MENU -************************/ - -#mega-menu { - position: relative; - z-index: 9999; - overflow: scroll; - width: 100%; - background: @megaMenuBackgroundGradient; - - .ui.container { - height: 100%; - align-items: baseline; - } - - .toggle, - [id^='drop'] { - display: none; - } - nav { - margin: 0; - padding: 0; - width: 100%; - margin-top: @tabletPopupMarginTop; - } - - nav:after { - content: ''; - display: table; - clear: both; - } - - nav ul { - float: left; - padding: 0; - margin: 0; - list-style: none; - position: relative; - - > li a { - padding: 0; - } - } - - nav ul li { - display: inline-block; - font-size: @mobileMegaMenuFontSize; - } - - nav a { - display: flex; - color: @mobileMegaMenuColor; - padding: @megaMenuLinkPadding; - line-height: @megaMenuLineHeight; - word-break: @megaMenuWordBreak; - } - - nav ul ul { - display: none; - position: absolute; - top: 0; - } - - nav ul li:hover > ul, - nav ul li:active > ul { - display: inherit; - display: flex; - flex-direction: column; - } - - nav ul ul li { - float: none; - display: list-item; - } - - nav ul ul ul li { - left: 0; - } - - li > a:only-child:after { - content: ''; - } - - @media all and (max-width: @largestMobileScreen) { - height: @mobilePopUpHeight; - nav { - margin-top: @mobilePopupMarginTop; - } - .menu, - li { - width: 100%; - } - - .toggle + a, - .menu { - display: none; - } - - .toggle { - display: block; - padding: @toggleMenuFirstPadding; - color: @mobileMegaMenuColor; - line-height: @megaMenuLineHeight; - } - - [id^='drop']:checked + ul { - display: block; - } - - nav ul li { - display: block; - width: 100%; - } - - nav .menu > li > .toggle, - nav .menu > li > a { - padding: @mobileToggleMenuFirstPadding; - } - nav ul ul .toggle, - nav ul ul a { - padding: @mobileToggleMenuSecondPadding; - } - - nav ul ul ul a { - padding: @mobileToggleMenuThirdPadding; - } - - nav ul ul { - float: none; - position: static; - color: @mobileMegaMenuColor; - } - - nav ul ul li:hover > ul, - nav ul li:hover > ul { - display: none; - } - - nav ul ul li { - display: block; - width: 100%; - } - - nav ul ul ul li { - position: static; - } - } - - .menu { - display: flex; - flex-direction: column; - } - .sub { - left: 100%; - } - - @media all and (min-width: @tabletBreakpoint) { - height: @tabletPopUpHeight; - nav { - .menu { - width: 33.33%; - font-size: @tabletMegaMenuFontSize; - > li { - width: 100%; - display: flex; - justify-content: space-between; - align-items: @megaMenuLiAlignItems; - margin-bottom: @tabletMegaMenuMarginBottom; - - &.hasSubMenu:after { - content: @megaMenuAfterIcon; - font-family: 'Icons'; - font-size: @tabletMegaMenuIconAfterFontSize; - color: @white; - } - a { - display: flex; - justify-content: space-between; - align-items: @megaMenuLiAlignItems; - max-width: 100%; - padding-left: 2rem; - } - } - } - - .sub.second { - width: 100%; - left: 100%; - > li { - width: 100%; - display: flex; - justify-content: space-between; - align-items: @megaMenuLiAlignItems; - margin-bottom: @tabletMegaMenuMarginBottom; - - &.hasSubMenu:after { - content: @megaMenuAfterIcon; - font-family: 'Icons'; - font-size: @tabletMegaMenuIconAfterFontSize; - color: @megaMenuIconAfterColor; - } - a { - max-width: 100%; - padding-left: 2rem; - } - } - } - .sub.third { - left: 100%; - width: 100%; - min-height: 50vh; - li { - margin-bottom: @tabletMegaMenuMarginBottom; - > a { - max-width: 100%; - } - } - } - } - ul li:hover > a span { - text-decoration: underline; - } - } - - @media only screen and (min-width: @computerBreakpoint) { - height: @computerPopUpHeight; - nav { - margin-top: @computerPopupMarginTop; - .menu { - > li { - font-size: @computerMegaMenuFirstFontSize; - margin-bottom: @computerMegaMenuMarginBottom; - &.hasSubMenu:after { - font-size: @computerMegaMenuIconAfterFontSize; - } - } - } - .sub.second li { - font-size: @computerMegaMenuSecondFontSize; - margin-bottom: @computerMegaMenuMarginBottom; - &.hasSubMenu:after { - font-size: @computerMegaMenuIconAfterFontSize; - } - } - .sub.third li { - font-size: @computerMegaMenuThirdFontSize; - margin-bottom: @computerMegaMenuMarginBottom; - } - } - } -} +@type: 'extra'; +@element: 'header'; + +@import (multiple) '../../theme.config'; + +/******************************* + Header +*******************************/ + +.eea.header { + background: @white; + + /* Top header section */ + .top.bar { + display: flex; + align-items: center; + height: @mobileTopSectionHeight; + background: @topSectionBackground; + + .ui.container { + display: flex; + align-items: center; + justify-content: space-between; + z-index: @topSectionZindex; + } + .item { + display: flex; + align-items: center; + color: @topSectionItemColor; + font-weight: @topSectionItemFontWeight; + font-size: @mobileTopSectionItemFontSize; + } + .ui.dropdown { + border: none !important; + height: auto !important; + border-radius: @defaultBorderRadius; + color: @topSectionItemColor; + + font-size: @dropdownFontSize; + font-weight: @dropdownFontWeight; + + .menu { + margin-top: @mobileDropdownMenuMarginTop; + left: @dropdownMenuLeft; + right: @dropdownMenuRight; + + .wrapper { + display: flex; + flex-direction: column; + gap: @dropdownMenuWrapperGap; + white-space: @dropdownMenuContentWhiteSpace; + margin: @dropdownMenuWrapperMargin; + + .item { + &:hover { + background: @dropdownMenuItemBackgroundColorHover; + color: @dropdownMenuItemColorHover; + cursor: pointer; + } + } + } + } + } + + /* Official union dropdowns */ + .official-union { + display: flex; + gap: @officialUnionGap; + } + .official-union.mobile.or.lower.hidden { + .ui.dropdown .menu { + padding: @tabletOfficialUnionPadding; + + .content { + max-width: @tabletOfficialUnionMaxWidth; + } + + p { + font-size: @officialUnionMenuFontSize; + font-weight: @officialUnionTextFontWeight; + white-space: @dropdownMenuContentWhiteSpace; + } + a { + font-size: @officialUnionMenuFontSize; + font-weight: @officialUnionLinkFontWeight; + white-space: @dropdownMenuContentWhiteSpace; + color: @officialUnionLinkColor; + } + } + } + .official-union.mobile.only { + img { + width: @tabletOfficialUnionImageWidth; + } + + .ui.dropdown { + font-size: @mobileTopSectionItemFontSize; + + .menu { + padding: @mobileOfficialUnionPadding; + + .content { + max-width: @mobileOfficialUnionMaxWidth; + + p, + a { + font-size: @mobileDropdownMenuContentFontSize; + font-weight: @dropdownMenuContentFontWeight; + white-space: @dropdownMenuContentWhiteSpace; + } + + i.icon, + i.icons { + font-size: @mobileTopSectionItemFontSize; + } + } + } + } + } + + /* Theme sites dropdown */ + #theme-sites.ui.dropdown .menu { + .wrapper { + width: @themeSitesMenuWidth; + + .item { + padding: @themeSitesMenuItemPadding; + + &:hover { + a.site { + color: @white; + } + } + + a.site { + color: @themeSitesMenuSiteLinkColor; + font-weight: @themeSitesMenuSiteLinkFontWeight; + } + } + } + } + + /* Language dropdown */ + #language-switcher { + font-size: @mobileLanguageFontSize; + + img { + width: @mobileOfficialUnionImageWidth; + } + .menu { + top: @mobileLanguageMenuTop; + color: @japaneseIndigo; + + .wrapper { + .item { + justify-content: flex-end; + padding: @languageMenuPadding; + font-weight: @languageMenuItemFontWeight; + font-size: @mobileLanguageFontSize; + + span.country-code { + margin-left: @mobileLanguageCountryCodeMarginLeft; + font-weight: @mobileLanguageCountryCodeFontWeight; + } + } + } + } + } + } + + /* Main header section */ + .main.bar { + .ui.container { + display: flex; + align-items: center; + justify-content: space-between; + height: @mobileMainSectionHeight; + + .ui.grid { + /* All margins and paddings removed for main header */ + width: 100%; + margin-top: 0; + margin-bottom: 0; + margin-left: 0; + margin-right: 0; + + div:first-child { + padding-left: 0; + } + + div:last-child { + padding-right: 0; + } + } + + #logo { + width: @logoWidth; + max-width: @mobileLogoMaxWidth; + margin-top: @mobileLogoMarginTop; + } + + .main-menu { + display: flex; + align-items: flex-end; + justify-content: flex-end; + width: 100%; + + .item { + color: @mainMenuItemColor; + font-size: @mainMenuItemFontSize; + font-weight: @mainMenuItemFontWeight; + place-self: @mainMenuItemPlaceSelf; + } + + .item.active { + color: @mainMenuItemActiveColor; + border-bottom: @mainMenuItemActiveBorder; + } + } + } + + /* Search Box */ + #search-box { + position: relative; + z-index: 99999; + overflow: scroll; + width: 100%; + height: @mobilePopUpHeight; + background: @searchBoxBackgroundGradient; + + .ui.container { + height: 100%; + align-items: baseline; + } + .wrapper { + position: relative; + width: 100%; + margin-top: @mobilePopupMarginTop; + display: flex; + flex-direction: column; + gap: @searchBoxWrapperGap; + + .action { + display: flex; + justify-content: center; + } + } + } + } +} + +/*************************************** +Header Actions - Burger and Search Icons +***************************************/ +.burger-action { + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + width: @mobileActionsBoxWidth; + height: @mobileMainSectionHeight; + background-color: @darkCerulean; +} + +.burger-action.desktop { + display: none; +} + +.burger-action.mobile { + display: flex; + flex-direction: column; + cursor: pointer; +} + +.search-action { + cursor: pointer; + display: flex; + width: @mobileActionsBoxWidth; + height: @mobileMainSectionHeight; + align-items: center; + justify-content: center; + background-color: @darkCyan; +} + +.burger-action, +.search-action, +.burger-action.mobile { + img { + width: 60%; + } + // icon to be used + i.icon { + margin: 0; + color: @white; + font-size: 1em; + display: flex; + justify-content: center; + align-items: center; + } +} + +@media only screen and (min-width: @tabletBreakpoint) { + .eea.header { + .top.bar { + height: @tabletTopSectionHeight; + + .item { + font-size: @tabletTopSectionItemFontSize; + } + + .ui.dropdown .menu { + margin-top: @tabletDropdownMenuMarginTop; + } + + /* Language dropdown */ + #language-switcher { + font-size: @tabletLanguageFontSize; + + img { + width: 19px; + } + + .menu { + top: @tabletLanguageMenuTop; + .wrapper .item { + font-size: @tabletLanguageFontSize; + } + } + } + } + .main.bar { + .ui.container { + height: 117px; + + #logo { + max-width: @tabletLogoMaxWidth; + margin-top: @tabletLogoMarginTop; + } + } + + /* Search box */ + #search-box { + height: @tabletPopUpHeight; + .wrapper { + margin-top: @tabletPopupMarginTop; + } + } + } + } + + .text.menu { + display: none; + } + + .burger-action.mobile { + display: flex; + } + + /* Action Boxes */ + .burger-action.mobile, + .search-action { + width: @tabletActionsBoxWidth; + height: @tabletMainSectionHeight; + } +} + +@media only screen and (min-width: @computerBreakpoint) { + .eea.header { + .top.bar { + height: @computerTopSectionHeight; + } + + .main.bar { + .ui.container { + height: 160px; + + #logo { + max-width: @computerLogoMaxWidth; + margin-top: @computerLogoMarginTop; + } + + .ui.text.menu { + display: flex; + width: 88%; + max-height: 20px; + justify-content: space-between; + margin: 0; + } + } + + /* Search box */ + #search-box { + height: @computerPopUpHeight; + + .wrapper { + margin-top: @computerPopupMarginTop; + + .action { + justify-content: flex-end; + } + } + } + } + } + + .burger-action.mobile { + display: none; + } + + .burger-action.desktop { + display: flex; + width: @computerActionsBoxWidth; + height: @computerMainSectionHeight; + } + + .search-action { + width: @computerActionsBoxWidth; + height: @computerMainSectionHeight; + } +} + +@media only screen and (max-width: 960px) { + #theme-sites { + display: none; + } +} + +/************************ + MEGA MENU +************************/ + +#mega-menu { + position: relative; + z-index: 9999; + overflow: scroll; + width: 100%; + background: @megaMenuBackgroundGradient; + + .ui.container { + height: 100%; + align-items: baseline; + } + + .toggle, + [id^='drop'] { + display: none; + } + nav { + margin: 0; + padding: 0; + width: 100%; + margin-top: @tabletPopupMarginTop; + } + + nav:after { + content: ''; + display: table; + clear: both; + } + + nav ul { + float: left; + padding: 0; + margin: 0; + list-style: none; + position: relative; + + > li a { + padding: 0; + } + } + + nav ul li { + display: inline-block; + font-size: @mobileMegaMenuFontSize; + } + + nav a { + display: flex; + color: @mobileMegaMenuColor; + padding: @megaMenuLinkPadding; + line-height: @megaMenuLineHeight; + word-break: @megaMenuWordBreak; + } + + nav ul ul { + display: none; + position: absolute; + top: 0; + } + + nav ul li:hover > ul, + nav ul li:active > ul { + display: inherit; + display: flex; + flex-direction: column; + } + + nav ul ul li { + float: none; + display: list-item; + } + + nav ul ul ul li { + left: 0; + } + + li > a:only-child:after { + content: ''; + } + + @media all and (max-width: @largestMobileScreen) { + height: @mobilePopUpHeight; + nav { + margin-top: @mobilePopupMarginTop; + } + .menu, + li { + width: 100%; + } + + .toggle + a, + .menu { + display: none; + } + + .toggle { + display: block; + padding: @toggleMenuFirstPadding; + color: @mobileMegaMenuColor; + line-height: @megaMenuLineHeight; + } + + [id^='drop']:checked + ul { + display: block; + } + + nav ul li { + display: block; + width: 100%; + } + + nav .menu > li > .toggle, + nav .menu > li > a { + padding: @mobileToggleMenuFirstPadding; + } + nav ul ul .toggle, + nav ul ul a { + padding: @mobileToggleMenuSecondPadding; + } + + nav ul ul ul a { + padding: @mobileToggleMenuThirdPadding; + } + + nav ul ul { + float: none; + position: static; + color: @mobileMegaMenuColor; + } + + nav ul ul li:hover > ul, + nav ul li:hover > ul { + display: none; + } + + nav ul ul li { + display: block; + width: 100%; + } + + nav ul ul ul li { + position: static; + } + } + + .menu { + display: flex; + flex-direction: column; + } + .sub { + left: 100%; + } + + @media all and (min-width: @tabletBreakpoint) { + height: @tabletPopUpHeight; + nav { + .menu { + width: 33.33%; + font-size: @tabletMegaMenuFontSize; + > li { + width: 100%; + display: flex; + justify-content: space-between; + align-items: @megaMenuLiAlignItems; + margin-bottom: @tabletMegaMenuMarginBottom; + + &.hasSubMenu:after { + content: @megaMenuAfterIcon; + font-family: 'Icons'; + font-size: @tabletMegaMenuIconAfterFontSize; + color: @white; + } + a { + display: flex; + justify-content: space-between; + align-items: @megaMenuLiAlignItems; + max-width: 100%; + padding-left: 2rem; + } + } + } + + .sub.second { + width: 100%; + left: 100%; + > li { + width: 100%; + display: flex; + justify-content: space-between; + align-items: @megaMenuLiAlignItems; + margin-bottom: @tabletMegaMenuMarginBottom; + + &.hasSubMenu:after { + content: @megaMenuAfterIcon; + font-family: 'Icons'; + font-size: @tabletMegaMenuIconAfterFontSize; + color: @megaMenuIconAfterColor; + } + a { + max-width: 100%; + padding-left: 2rem; + } + } + } + .sub.third { + left: 100%; + width: 100%; + min-height: 50vh; + li { + margin-bottom: @tabletMegaMenuMarginBottom; + > a { + max-width: 100%; + } + } + } + } + ul li:hover > a span { + text-decoration: underline; + } + } + + @media only screen and (min-width: @computerBreakpoint) { + height: @computerPopUpHeight; + nav { + margin-top: @computerPopupMarginTop; + .menu { + > li { + font-size: @computerMegaMenuFirstFontSize; + margin-bottom: @computerMegaMenuMarginBottom; + &.hasSubMenu:after { + font-size: @computerMegaMenuIconAfterFontSize; + } + } + } + .sub.second li { + font-size: @computerMegaMenuSecondFontSize; + margin-bottom: @computerMegaMenuMarginBottom; + &.hasSubMenu:after { + font-size: @computerMegaMenuIconAfterFontSize; + } + } + .sub.third li { + font-size: @computerMegaMenuThirdFontSize; + margin-bottom: @computerMegaMenuMarginBottom; + } + } + } +} diff --git a/theme/themes/eea/extras/publicationCard.less b/theme/themes/eea/extras/publicationCard.less index 578ff01671..7a38759c0d 100644 --- a/theme/themes/eea/extras/publicationCard.less +++ b/theme/themes/eea/extras/publicationCard.less @@ -1,62 +1,62 @@ -@type: 'extra'; -@element: 'publicationCard'; - -@import (multiple) '../../theme.config'; - -/*------------------- - Publication Card ---------------------*/ - -.eea.publication.card { - color: @publicationCardtextColor; - //position: relative; - height: @publicationCardHeight; - background-color: @publicationCardBackgroundColor; - display: flex; - flex-direction: column; - justify-content: space-between; - - a { - display: contents; - text-decoration: none; - color: @publicationCardtextColor; - cursor: pointer; - } - - .header{ - background-repeat: no-repeat; - background-position: center; - background-size: contain; - height: calc(100% - @cardDescriptionMaxHeight); - } - - .description { - background-color: @publicationCardDescriptionColor; - height: @cardDescriptionHeight; - padding: @cardDescriptionPadding; - //position: absolute; - //bottom: 0; - width: @cardDescriptionWidth; - max-height: @cardDescriptionMaxHeight; - - .tag { - font-size: @cardDescriptionTagFontSize; - font-weight: @cardDescriptionTagFontWeight; - } - - .text { - font-size: @cardDescriptionTextFontSize; - font-weight: @cardDescriptionTextFontWeight; - } - } -} - -@media only screen and (min-width: @computerBreakpoint) { - .eea.publication.card { - margin: @publicationCardMargin; - - .description { - height: @computerCardDescriptionHeight; - } - } - } \ No newline at end of file +@type: 'extra'; +@element: 'publicationCard'; + +@import (multiple) '../../theme.config'; + +/*------------------- + Publication Card +--------------------*/ + +.eea.publication.card { + color: @publicationCardtextColor; + //position: relative; + height: @publicationCardHeight; + background-color: @publicationCardBackgroundColor; + display: flex; + flex-direction: column; + justify-content: space-between; + + a { + display: contents; + text-decoration: none; + color: @publicationCardtextColor; + cursor: pointer; + } + + .header { + background-repeat: no-repeat; + background-position: center; + background-size: contain; + height: calc(100% - @cardDescriptionMaxHeight); + } + + .description { + background-color: @publicationCardDescriptionColor; + height: @cardDescriptionHeight; + padding: @cardDescriptionPadding; + //position: absolute; + //bottom: 0; + width: @cardDescriptionWidth; + max-height: @cardDescriptionMaxHeight; + + .tag { + font-size: @cardDescriptionTagFontSize; + font-weight: @cardDescriptionTagFontWeight; + } + + .text { + font-size: @cardDescriptionTextFontSize; + font-weight: @cardDescriptionTextFontWeight; + } + } +} + +@media only screen and (min-width: @computerBreakpoint) { + .eea.publication.card { + margin: @publicationCardMargin; + + .description { + height: @computerCardDescriptionHeight; + } + } +} From 787d648342d78c4f9d28fde9d08e83089ef7b08f Mon Sep 17 00:00:00 2001 From: Odisseas Simou Date: Tue, 29 Mar 2022 10:59:26 +0000 Subject: [PATCH 07/29] feat(labeledIconGroup) : add new component --- src/semantic.less | 4 + src/ui/LabeledIconGroup/LabeledIconGroup.jsx | 34 ++++++++ .../LabeledIconGroup.stories.jsx | 82 +++++++++++++++++++ src/ui/index.js | 2 + theme/theme.config | 1 + theme/themes/eea/extras/labeledIconGroup.less | 18 ++++ .../eea/extras/labeledIconGroup.variables | 0 7 files changed, 141 insertions(+) create mode 100644 src/ui/LabeledIconGroup/LabeledIconGroup.jsx create mode 100644 src/ui/LabeledIconGroup/LabeledIconGroup.stories.jsx create mode 100644 theme/themes/eea/extras/labeledIconGroup.less create mode 100644 theme/themes/eea/extras/labeledIconGroup.variables diff --git a/src/semantic.less b/src/semantic.less index d1698bb9b8..a1bea3cae9 100644 --- a/src/semantic.less +++ b/src/semantic.less @@ -264,3 +264,7 @@ & { @import '@eeacms/volto-eea-design-system/../theme/themes/eea/extras/newTabLabeledIcon'; } + +& { + @import '@eeacms/volto-eea-design-system/../theme/themes/eea/extras/labeledIconGroup'; +} \ No newline at end of file diff --git a/src/ui/LabeledIconGroup/LabeledIconGroup.jsx b/src/ui/LabeledIconGroup/LabeledIconGroup.jsx new file mode 100644 index 0000000000..85ded14e25 --- /dev/null +++ b/src/ui/LabeledIconGroup/LabeledIconGroup.jsx @@ -0,0 +1,34 @@ +import React from 'react'; +import NewTabLabeledIcon from '../NewTabLabeledIcon/NewTabLabeledIcon'; +import DownloadLabeledIcon from '../DownloadLabeledIcon/DownloadLabeledIcon'; + +function LabeledIconGroup({ children, ...rest }) { + return ( +
+ {children} +
+ ); +} + +LabeledIconGroup.Download = ({ children, ...rest }) => { + return
+ + {rest.icon} + + {rest.label} + +
; +}; + +LabeledIconGroup.NewTab = ({ children, ...rest }) => { + return ( +
+ + {rest.icon} + + {rest.label} +
+ ); +}; + +export default LabeledIconGroup; diff --git a/src/ui/LabeledIconGroup/LabeledIconGroup.stories.jsx b/src/ui/LabeledIconGroup/LabeledIconGroup.stories.jsx new file mode 100644 index 0000000000..13df1b83ef --- /dev/null +++ b/src/ui/LabeledIconGroup/LabeledIconGroup.stories.jsx @@ -0,0 +1,82 @@ +import React from 'react'; +import LabeledIconGroup from './LabeledIconGroup'; +// eslint-disable-next-line import/no-unresolved + +export default { + title: 'Components/Labeled Icons/Group', + component: LabeledIconGroup, + argTypes: { + newTabLabel: { + description: 'New Tab Label', + table: { + defaultValue: { summary: '""' }, + type: { summary: 'string' }, + }, + }, + newTabLink: { + description: 'New Tab Link', + table: { + defaultValue: { summary: '""' }, + type: { summary: 'string' }, + }, + }, + newTabIcon: { + description: 'New Tab Icon', + table: { + defaultValue: { summary: '""' }, + type: { summary: 'string' }, + }, + }, + downloadLabel: { + description: 'Download Label', + table: { + defaultValue: { summary: '""' }, + type: { summary: 'string' }, + }, + }, + downloadIcon: { + description: 'Download Icon', + table: { + defaultValue: { summary: '""' }, + type: { summary: 'string' }, + }, + }, + downloadLinks: { + description: 'array of list content', + table: { + type: { summary: 'object' }, + defaultValue: { summary: ' "" ' }, + }, + }, + }, +}; + +const DefaultTemplate = (args) => ( +
+ + + + {args.newTab.label} + +
+); + +export const Default = DefaultTemplate.bind({}); +Default.args = { + newTab: { + label: 'Open in new Tab', + link: '/#', + icon: 'ri-share-box-fill', + }, + download: { + label: 'Download', + icon: 'ri-download-2-fill', + downloadIcon: 'ri-download-2-fill', + links: [ + { linkName: 'PDF', href: '#' }, + { linkName: 'SVG', href: '#' }, + { linkName: 'PNG', href: '#' }, + ], + } + +}; diff --git a/src/ui/index.js b/src/ui/index.js index 046a456dae..bae943429b 100644 --- a/src/ui/index.js +++ b/src/ui/index.js @@ -31,3 +31,5 @@ export PublicationCard from './PublicationCard/PublicationCard'; export DownloadLabeledIcon from './DownloadLabeledIcon/DownloadLabeledIcon'; export NewTabLabeledIcon from './NewTabLabeledIcon/NewTabLabeledIcon'; + +export LabeledIconGroup from './LabeledIconGroup/LabeledIconGroup'; diff --git a/theme/theme.config b/theme/theme.config index d9b52a73fc..cc17b79312 100644 --- a/theme/theme.config +++ b/theme/theme.config @@ -93,6 +93,7 @@ @publicationCard : 'eea'; @downloadLabeledIcon :'eea'; @newTabLabeledIcon : 'eea'; +@labeledIconGroup : 'eea'; /******************************* Folders diff --git a/theme/themes/eea/extras/labeledIconGroup.less b/theme/themes/eea/extras/labeledIconGroup.less new file mode 100644 index 0000000000..221f2aacaf --- /dev/null +++ b/theme/themes/eea/extras/labeledIconGroup.less @@ -0,0 +1,18 @@ +@type: 'extra'; +@element: 'labeledIconGroup'; + +@import (multiple) '../../theme.config'; + +/******************************* + Labeled Icon Group +*******************************/ +.eea.labeled.icon.group { + width: 100%; + display: flex; + justify-content: center; + + .group.wrapper { + margin-left: 10px; + margin-right: 10px; + } +} diff --git a/theme/themes/eea/extras/labeledIconGroup.variables b/theme/themes/eea/extras/labeledIconGroup.variables new file mode 100644 index 0000000000..e69de29bb2 From d00200c278e1dab02b449b460a325e0f2e7b8ccd Mon Sep 17 00:00:00 2001 From: Alexis Sourtzis Date: Tue, 29 Mar 2022 11:12:29 +0000 Subject: [PATCH 08/29] feat(LanguageLabeledIcon):add new component --- src/semantic.less | 4 + .../LanguageLabeledIcon.jsx | 102 ++++++++++++++++++ .../LanguageLabeledIcon.stories.jsx | 32 ++++++ src/ui/index.js | 2 + theme/theme.config | 1 + .../eea/extras/languageLabeledIcon.less | 72 +++++++++++++ .../eea/extras/languageLabeledIcon.variables | 4 + 7 files changed, 217 insertions(+) create mode 100644 src/ui/LanguageLabeledIcon/LanguageLabeledIcon.jsx create mode 100644 src/ui/LanguageLabeledIcon/LanguageLabeledIcon.stories.jsx create mode 100644 theme/themes/eea/extras/languageLabeledIcon.less create mode 100644 theme/themes/eea/extras/languageLabeledIcon.variables diff --git a/src/semantic.less b/src/semantic.less index 170f4d115a..979582f157 100644 --- a/src/semantic.less +++ b/src/semantic.less @@ -256,3 +256,7 @@ & { @import '@eeacms/volto-eea-design-system/../theme/themes/eea/extras/publicationCard'; } + +& { + @import '@eeacms/volto-eea-design-system/../theme/themes/eea/extras/languageLabeledIcon'; +} diff --git a/src/ui/LanguageLabeledIcon/LanguageLabeledIcon.jsx b/src/ui/LanguageLabeledIcon/LanguageLabeledIcon.jsx new file mode 100644 index 0000000000..51d0f5c15d --- /dev/null +++ b/src/ui/LanguageLabeledIcon/LanguageLabeledIcon.jsx @@ -0,0 +1,102 @@ +import React, { useState, useContext, createContext } from 'react'; + +const LanguageContext = createContext(); + +function LanguageLabeledIcon({ children, ...rest }) { + const [hidden, seHidden] = useState(true); + const [language, setLanguage] = useState('EN'); + return ( + +
{children}
+ + ); +} + +const Label = ({ children, ...rest }) => { + const context = useContext(LanguageContext); + return ( +
context.setHidden(!context.hidden)} + onKeyDown={() => context.setHidden(!context.hidden)} + role="button" + tabIndex={0} + > + {children} +
+ ); +}; + +LanguageLabeledIcon.Label = Label; + +const Icon = ({ children, ...rest }) => { + const context = useContext(LanguageContext); + return ( +
context.setHidden(!context.hidden)} + onKeyDown={() => context.setHidden(!context.hidden)} + role="button" + tabIndex={0} + > + {rest.icon} + {context.language} +
+ ); +}; + +LanguageLabeledIcon.Icon = Icon; + +const Dropdown = ({ children, ...rest }) => { + const context = useContext(LanguageContext); + + var length = rest.items.length; + var first = rest.items.slice(0, length / 2); + var second = rest.items.slice(length / 2); + + return ( +
+
+
    + {first.map((item, index) => ( +
  • +
    context.setLanguage(item.key.toUpperCase())} + onKeyDown={() => context.setHidden(!context.hidden)} + role="button" + tabIndex={0} + > + {item.text} {item.key} +
    +
    • + ))} +
+
    + {second.map((item, index) => ( +
  • +
    context.setLanguage(item.key.toUpperCase())} + onKeyDown={() => context.setHidden(!context.hidden)} + role="button" + tabIndex={0} + > + {item.text} {item.key} +
    +
    • + ))} +
+
+
+ ); +}; + +LanguageLabeledIcon.Dropdown = Dropdown; + +export default LanguageLabeledIcon; diff --git a/src/ui/LanguageLabeledIcon/LanguageLabeledIcon.stories.jsx b/src/ui/LanguageLabeledIcon/LanguageLabeledIcon.stories.jsx new file mode 100644 index 0000000000..4d574f9269 --- /dev/null +++ b/src/ui/LanguageLabeledIcon/LanguageLabeledIcon.stories.jsx @@ -0,0 +1,32 @@ +import React from 'react'; +import LanguageLabeledIcon from './LanguageLabeledIcon'; + +export default { + title: 'Components/Labeled Icons/Language', + component: LanguageLabeledIcon, + argTypes: {}, +}; + +const Template = (args) => ( + + + {args.title} + + +); + +export const Default = Template.bind({}); +Default.args = { + title: 'Repost Language', + icon: , + items: [ + { text: 'English', key: 'EN' }, + { text: 'Russian', key: 'Ru' }, + { text: 'Russian', key: 'Ru' }, + { text: 'Russian', key: 'Ru' }, + { text: 'Russian', key: 'Ru' }, + { text: 'Russian', key: 'Ru' }, + ], +}; diff --git a/src/ui/index.js b/src/ui/index.js index 7e3e4d527b..afc8561247 100644 --- a/src/ui/index.js +++ b/src/ui/index.js @@ -27,3 +27,5 @@ export AvatarGrid from './AvatarGrid/AvatarGrid'; export KeyContent from './KeyContent/KeyContent'; export PublicationCard from './PublicationCard/PublicationCard'; + +export LanguageLabeledIcon from './LanguageLabeledIcon/LanguageLabeledIcon'; diff --git a/theme/theme.config b/theme/theme.config index 2b3c15d229..898b6f7451 100644 --- a/theme/theme.config +++ b/theme/theme.config @@ -91,6 +91,7 @@ @avatarGrid : 'eea'; @keyContent : 'eea'; @publicationCard : 'eea'; +@languageLabeledIcon : 'eea'; /******************************* Folders diff --git a/theme/themes/eea/extras/languageLabeledIcon.less b/theme/themes/eea/extras/languageLabeledIcon.less new file mode 100644 index 0000000000..c746be1666 --- /dev/null +++ b/theme/themes/eea/extras/languageLabeledIcon.less @@ -0,0 +1,72 @@ +@type: 'extra'; +@element: 'languageLabeledIcon'; + +@import (multiple) '../../theme.config'; + +/******************************* + Language Labeled Icon +*******************************/ + +.eea.language.labeled.icon { + display: inline-flex; + flex-direction: column; + align-items: center; + width: 220px; + + .icon.wrapper { + font-size: 14px; + font-weight: 400; + color: #3D5265; + cursor: pointer; + display: flex; + align-items: center; + + i { + color:#0065A4; + margin-right: 3px; + font-size: 1.5rem; + } + + } + + .label { + color: #3D5265; + font-size: 14px; + font-weight: 400; + cursor: pointer; + } + + .dropdown { + + background-color: #F9F9F9; + + .link.wrapper { + display: flex; + + &.hidden { + display: none; + } + + ul { + list-style-type: none; + margin: 0; + color: #2E3E4C; + padding: 10px 0 10px 0; + + li{ + padding: 5px; + cursor: pointer; + } + + li:hover { + color: white; + background-color: #2E3E4C; + } + + li span { + font-weight: bold; + } + } + } + } +} \ No newline at end of file diff --git a/theme/themes/eea/extras/languageLabeledIcon.variables b/theme/themes/eea/extras/languageLabeledIcon.variables new file mode 100644 index 0000000000..679481388f --- /dev/null +++ b/theme/themes/eea/extras/languageLabeledIcon.variables @@ -0,0 +1,4 @@ +/******************************* + Language Labeled Icon +*******************************/ + From 535cee4795dff75b35856cb4406a9bd33ee07ca4 Mon Sep 17 00:00:00 2001 From: Odisseas Simou Date: Tue, 29 Mar 2022 11:28:35 +0000 Subject: [PATCH 09/29] chore(labeledIconGroup) : lint changes --- src/semantic.less | 2 +- src/ui/LabeledIconGroup/LabeledIconGroup.jsx | 36 ++--- .../LabeledIconGroup.stories.jsx | 136 +++++++++--------- 3 files changed, 89 insertions(+), 85 deletions(-) diff --git a/src/semantic.less b/src/semantic.less index a1bea3cae9..a8f5ae10d3 100644 --- a/src/semantic.less +++ b/src/semantic.less @@ -267,4 +267,4 @@ & { @import '@eeacms/volto-eea-design-system/../theme/themes/eea/extras/labeledIconGroup'; -} \ No newline at end of file +} diff --git a/src/ui/LabeledIconGroup/LabeledIconGroup.jsx b/src/ui/LabeledIconGroup/LabeledIconGroup.jsx index 85ded14e25..51a7ba0f41 100644 --- a/src/ui/LabeledIconGroup/LabeledIconGroup.jsx +++ b/src/ui/LabeledIconGroup/LabeledIconGroup.jsx @@ -3,32 +3,36 @@ import NewTabLabeledIcon from '../NewTabLabeledIcon/NewTabLabeledIcon'; import DownloadLabeledIcon from '../DownloadLabeledIcon/DownloadLabeledIcon'; function LabeledIconGroup({ children, ...rest }) { - return ( -
- {children} -
- ); + return ( +
+ {children} +
+ ); } LabeledIconGroup.Download = ({ children, ...rest }) => { - return
+ return ( +
+ - {rest.icon} + {rest.icon} {rest.label} -
; + +
+ ); }; LabeledIconGroup.NewTab = ({ children, ...rest }) => { - return ( -
- - {rest.icon} - - {rest.label} -
- ); + return ( +
+ + {rest.icon} + {rest.label} + +
+ ); }; export default LabeledIconGroup; diff --git a/src/ui/LabeledIconGroup/LabeledIconGroup.stories.jsx b/src/ui/LabeledIconGroup/LabeledIconGroup.stories.jsx index 13df1b83ef..4db8604975 100644 --- a/src/ui/LabeledIconGroup/LabeledIconGroup.stories.jsx +++ b/src/ui/LabeledIconGroup/LabeledIconGroup.stories.jsx @@ -3,80 +3,80 @@ import LabeledIconGroup from './LabeledIconGroup'; // eslint-disable-next-line import/no-unresolved export default { - title: 'Components/Labeled Icons/Group', - component: LabeledIconGroup, - argTypes: { - newTabLabel: { - description: 'New Tab Label', - table: { - defaultValue: { summary: '""' }, - type: { summary: 'string' }, - }, - }, - newTabLink: { - description: 'New Tab Link', - table: { - defaultValue: { summary: '""' }, - type: { summary: 'string' }, - }, - }, - newTabIcon: { - description: 'New Tab Icon', - table: { - defaultValue: { summary: '""' }, - type: { summary: 'string' }, - }, - }, - downloadLabel: { - description: 'Download Label', - table: { - defaultValue: { summary: '""' }, - type: { summary: 'string' }, - }, - }, - downloadIcon: { - description: 'Download Icon', - table: { - defaultValue: { summary: '""' }, - type: { summary: 'string' }, - }, - }, - downloadLinks: { - description: 'array of list content', - table: { - type: { summary: 'object' }, - defaultValue: { summary: ' "" ' }, - }, - }, + title: 'Components/Labeled Icons/Group', + component: LabeledIconGroup, + argTypes: { + newTabLabel: { + description: 'New Tab Label', + table: { + defaultValue: { summary: '""' }, + type: { summary: 'string' }, + }, }, + newTabLink: { + description: 'New Tab Link', + table: { + defaultValue: { summary: '""' }, + type: { summary: 'string' }, + }, + }, + newTabIcon: { + description: 'New Tab Icon', + table: { + defaultValue: { summary: '""' }, + type: { summary: 'string' }, + }, + }, + downloadLabel: { + description: 'Download Label', + table: { + defaultValue: { summary: '""' }, + type: { summary: 'string' }, + }, + }, + downloadIcon: { + description: 'Download Icon', + table: { + defaultValue: { summary: '""' }, + type: { summary: 'string' }, + }, + }, + downloadLinks: { + description: 'array of list content', + table: { + type: { summary: 'object' }, + defaultValue: { summary: ' "" ' }, + }, + }, + }, }; const DefaultTemplate = (args) => ( -
- - - - {args.newTab.label} - -
+
+ + + + {args.newTab.label} + + +
); export const Default = DefaultTemplate.bind({}); Default.args = { - newTab: { - label: 'Open in new Tab', - link: '/#', - icon: 'ri-share-box-fill', - }, - download: { - label: 'Download', - icon: 'ri-download-2-fill', - downloadIcon: 'ri-download-2-fill', - links: [ - { linkName: 'PDF', href: '#' }, - { linkName: 'SVG', href: '#' }, - { linkName: 'PNG', href: '#' }, - ], - } - + newTab: { + label: 'Open in new Tab', + link: '/#', + icon: 'ri-share-box-fill', + }, + download: { + label: 'Download', + icon: 'ri-download-2-fill', + downloadIcon: 'ri-download-2-fill', + links: [ + { linkName: 'PDF', href: '#' }, + { linkName: 'SVG', href: '#' }, + { linkName: 'PNG', href: '#' }, + ], + }, }; From daa10653ca37f3e83302e2ebcc566b5f5ec4c4d9 Mon Sep 17 00:00:00 2001 From: Odisseas Simou Date: Tue, 29 Mar 2022 11:40:12 +0000 Subject: [PATCH 10/29] fix(LabeledIconGroup) : fix links for tests fix DownloadLabeledIcon links for tests --- .../DownloadLabeledIcon.stories.jsx | 6 +- .../LabeledIconGroup.stories.jsx | 108 +++++++----------- 2 files changed, 43 insertions(+), 71 deletions(-) diff --git a/src/ui/DownloadLabeledIcon/DownloadLabeledIcon.stories.jsx b/src/ui/DownloadLabeledIcon/DownloadLabeledIcon.stories.jsx index e44a73b2b5..7a7dec4fd8 100644 --- a/src/ui/DownloadLabeledIcon/DownloadLabeledIcon.stories.jsx +++ b/src/ui/DownloadLabeledIcon/DownloadLabeledIcon.stories.jsx @@ -46,8 +46,8 @@ Default.args = { icon: 'ri-download-2-fill', downloadIcon: 'ri-download-2-fill', links: [ - { linkName: 'PDF', href: '#' }, - { linkName: 'SVG', href: '#' }, - { linkName: 'PNG', href: '#' }, + { linkName: 'PDF', href: '/#' }, + { linkName: 'SVG', href: '/#' }, + { linkName: 'PNG', href: '/#' }, ], }; diff --git a/src/ui/LabeledIconGroup/LabeledIconGroup.stories.jsx b/src/ui/LabeledIconGroup/LabeledIconGroup.stories.jsx index 4db8604975..fabf29db21 100644 --- a/src/ui/LabeledIconGroup/LabeledIconGroup.stories.jsx +++ b/src/ui/LabeledIconGroup/LabeledIconGroup.stories.jsx @@ -3,80 +3,52 @@ import LabeledIconGroup from './LabeledIconGroup'; // eslint-disable-next-line import/no-unresolved export default { - title: 'Components/Labeled Icons/Group', - component: LabeledIconGroup, - argTypes: { - newTabLabel: { - description: 'New Tab Label', - table: { - defaultValue: { summary: '""' }, - type: { summary: 'string' }, - }, + title: 'Components/Labeled Icons/Group', + component: LabeledIconGroup, + argTypes: { + newTab: { + description: 'NewTabLabeledIcon Component Contents', + table: { + type: { summary: 'Object' }, + defaultValue: { summary: ' "" ' }, + }, + }, + download: { + description: 'DownloadLabeledIcon Component Contents', + table: { + type: { summary: 'Object' }, + defaultValue: { summary: ' "" ' }, + }, + } }, - newTabLink: { - description: 'New Tab Link', - table: { - defaultValue: { summary: '""' }, - type: { summary: 'string' }, - }, - }, - newTabIcon: { - description: 'New Tab Icon', - table: { - defaultValue: { summary: '""' }, - type: { summary: 'string' }, - }, - }, - downloadLabel: { - description: 'Download Label', - table: { - defaultValue: { summary: '""' }, - type: { summary: 'string' }, - }, - }, - downloadIcon: { - description: 'Download Icon', - table: { - defaultValue: { summary: '""' }, - type: { summary: 'string' }, - }, - }, - downloadLinks: { - description: 'array of list content', - table: { - type: { summary: 'object' }, - defaultValue: { summary: ' "" ' }, - }, - }, - }, }; const DefaultTemplate = (args) => ( -
- - - - {args.newTab.label} - - -
+
+ + + + {args.newTab.label} + + +
); export const Default = DefaultTemplate.bind({}); Default.args = { - newTab: { - label: 'Open in new Tab', - link: '/#', - icon: 'ri-share-box-fill', - }, - download: { - label: 'Download', - icon: 'ri-download-2-fill', - downloadIcon: 'ri-download-2-fill', - links: [ - { linkName: 'PDF', href: '#' }, - { linkName: 'SVG', href: '#' }, - { linkName: 'PNG', href: '#' }, - ], - }, + newTab: { + label: 'Open in new Tab', + link: '/#', + icon: 'ri-share-box-fill', + }, + download: { + label: 'Download', + icon: 'ri-download-2-fill', + downloadIcon: 'ri-download-2-fill', + links: [ + { linkName: 'PDF', href: '/#' }, + { linkName: 'SVG', href: '/#' }, + { linkName: 'PNG', href: '/#' }, + ], + }, }; From ab364763bb2526adbbb7fc3c656a16b497568940 Mon Sep 17 00:00:00 2001 From: Odisseas Simou Date: Tue, 29 Mar 2022 11:40:55 +0000 Subject: [PATCH 11/29] chore(LabeledIconGroup) : lint changes --- .../LabeledIconGroup.stories.jsx | 80 +++++++++---------- 1 file changed, 40 insertions(+), 40 deletions(-) diff --git a/src/ui/LabeledIconGroup/LabeledIconGroup.stories.jsx b/src/ui/LabeledIconGroup/LabeledIconGroup.stories.jsx index fabf29db21..40dda00223 100644 --- a/src/ui/LabeledIconGroup/LabeledIconGroup.stories.jsx +++ b/src/ui/LabeledIconGroup/LabeledIconGroup.stories.jsx @@ -3,52 +3,52 @@ import LabeledIconGroup from './LabeledIconGroup'; // eslint-disable-next-line import/no-unresolved export default { - title: 'Components/Labeled Icons/Group', - component: LabeledIconGroup, - argTypes: { - newTab: { - description: 'NewTabLabeledIcon Component Contents', - table: { - type: { summary: 'Object' }, - defaultValue: { summary: ' "" ' }, - }, - }, - download: { - description: 'DownloadLabeledIcon Component Contents', - table: { - type: { summary: 'Object' }, - defaultValue: { summary: ' "" ' }, - }, - } + title: 'Components/Labeled Icons/Group', + component: LabeledIconGroup, + argTypes: { + newTab: { + description: 'NewTabLabeledIcon Component Contents', + table: { + type: { summary: 'Object' }, + defaultValue: { summary: ' "" ' }, + }, + }, + download: { + description: 'DownloadLabeledIcon Component Contents', + table: { + type: { summary: 'Object' }, + defaultValue: { summary: ' "" ' }, + }, }, + }, }; const DefaultTemplate = (args) => ( -
- - - - {args.newTab.label} - - -
+
+ + + + {args.newTab.label} + + +
); export const Default = DefaultTemplate.bind({}); Default.args = { - newTab: { - label: 'Open in new Tab', - link: '/#', - icon: 'ri-share-box-fill', - }, - download: { - label: 'Download', - icon: 'ri-download-2-fill', - downloadIcon: 'ri-download-2-fill', - links: [ - { linkName: 'PDF', href: '/#' }, - { linkName: 'SVG', href: '/#' }, - { linkName: 'PNG', href: '/#' }, - ], - }, + newTab: { + label: 'Open in new Tab', + link: '/#', + icon: 'ri-share-box-fill', + }, + download: { + label: 'Download', + icon: 'ri-download-2-fill', + downloadIcon: 'ri-download-2-fill', + links: [ + { linkName: 'PDF', href: '/#' }, + { linkName: 'SVG', href: '/#' }, + { linkName: 'PNG', href: '/#' }, + ], + }, }; From 110558eeec37d5b5f616a95298a313ba230dd6f4 Mon Sep 17 00:00:00 2001 From: Odisseas Simou Date: Tue, 29 Mar 2022 12:57:47 +0000 Subject: [PATCH 12/29] feat(languageLabeledIcon) : add new component add styling changes for all labeled icons allign items in labeled icon group --- src/ui/LabeledIconGroup/LabeledIconGroup.jsx | 15 ++ .../LabeledIconGroup.stories.jsx | 20 +++ .../eea/extras/downloadLabeledIcon.less | 2 +- theme/themes/eea/extras/labeledIconGroup.less | 6 +- .../eea/extras/labeledIconGroup.variables | 9 ++ .../eea/extras/languageLabeledIcon.less | 143 +++++++++--------- .../eea/extras/languageLabeledIcon.variables | 38 +++++ .../themes/eea/extras/newTabLabeledIcon.less | 1 + 8 files changed, 158 insertions(+), 76 deletions(-) diff --git a/src/ui/LabeledIconGroup/LabeledIconGroup.jsx b/src/ui/LabeledIconGroup/LabeledIconGroup.jsx index 51a7ba0f41..9fb3af0627 100644 --- a/src/ui/LabeledIconGroup/LabeledIconGroup.jsx +++ b/src/ui/LabeledIconGroup/LabeledIconGroup.jsx @@ -1,6 +1,7 @@ import React from 'react'; import NewTabLabeledIcon from '../NewTabLabeledIcon/NewTabLabeledIcon'; import DownloadLabeledIcon from '../DownloadLabeledIcon/DownloadLabeledIcon'; +import LanguageLabeledIcon from '../LanguageLabeledIcon/LanguageLabeledIcon'; function LabeledIconGroup({ children, ...rest }) { return ( @@ -35,4 +36,18 @@ LabeledIconGroup.NewTab = ({ children, ...rest }) => { ); }; +LabeledIconGroup.Language = ({ children, ...rest }) => { + return ( +
+ + + {rest.title} + + +
+ ); +}; + export default LabeledIconGroup; diff --git a/src/ui/LabeledIconGroup/LabeledIconGroup.stories.jsx b/src/ui/LabeledIconGroup/LabeledIconGroup.stories.jsx index 40dda00223..c4571e7d46 100644 --- a/src/ui/LabeledIconGroup/LabeledIconGroup.stories.jsx +++ b/src/ui/LabeledIconGroup/LabeledIconGroup.stories.jsx @@ -20,6 +20,13 @@ export default { defaultValue: { summary: ' "" ' }, }, }, + language: { + description: 'LanguageLabeledIcon Component Contents', + table: { + type: { summary: 'Object' }, + defaultValue: { summary: ' "" ' }, + }, + }, }, }; @@ -30,6 +37,7 @@ const DefaultTemplate = (args) => ( {args.newTab.label} +
); @@ -51,4 +59,16 @@ Default.args = { { linkName: 'PNG', href: '/#' }, ], }, + language: { + title: 'Repost Language', + icon: , + items: [ + { text: 'English', key: 'EN' }, + { text: 'Russian', key: 'Ru' }, + { text: 'Russian', key: 'Ru' }, + { text: 'Russian', key: 'Ru' }, + { text: 'Russian', key: 'Ru' }, + { text: 'Russian', key: 'Ru' }, + ], + }, }; diff --git a/theme/themes/eea/extras/downloadLabeledIcon.less b/theme/themes/eea/extras/downloadLabeledIcon.less index 86d81d3480..c9f3784ade 100644 --- a/theme/themes/eea/extras/downloadLabeledIcon.less +++ b/theme/themes/eea/extras/downloadLabeledIcon.less @@ -22,6 +22,7 @@ text-align: center; display: flex; justify-content: center; + padding: 8px; .icon { cursor: pointer; font-size: @downloadLabeledIconIconFontSize; @@ -43,7 +44,6 @@ z-index: @downloadLabeledIconLinkWrapperZIndex; margin-right: @downloadLabeledIconLinkWrapperMarginRight; width: @downloadLabeledIconLinkWrapperWidth; - padding-left: @downloadLabeledIconLinkWrapperPaddingLeft; padding-top: @downloadLabeledIconLinkWrapperPaddingTop; ul { list-style-type: none; diff --git a/theme/themes/eea/extras/labeledIconGroup.less b/theme/themes/eea/extras/labeledIconGroup.less index 221f2aacaf..1bea11f801 100644 --- a/theme/themes/eea/extras/labeledIconGroup.less +++ b/theme/themes/eea/extras/labeledIconGroup.less @@ -7,12 +7,12 @@ Labeled Icon Group *******************************/ .eea.labeled.icon.group { - width: 100%; + width: @labeledIconGroupWidth; display: flex; justify-content: center; .group.wrapper { - margin-left: 10px; - margin-right: 10px; + margin-left: @labeledIconGroupWrapperMarginLeft; + margin-right: @labeledIconGroupWrapperMarginRight; } } diff --git a/theme/themes/eea/extras/labeledIconGroup.variables b/theme/themes/eea/extras/labeledIconGroup.variables index e69de29bb2..8fc1e640e7 100644 --- a/theme/themes/eea/extras/labeledIconGroup.variables +++ b/theme/themes/eea/extras/labeledIconGroup.variables @@ -0,0 +1,9 @@ + +/******************************* + Labeled Icon Group +*******************************/ + +@labeledIconGroupWidth : 100%; + +@labeledIconGroupWrapperMarginLeft: 10px; +@labeledIconGroupWrapperMarginRight: 10px; \ No newline at end of file diff --git a/theme/themes/eea/extras/languageLabeledIcon.less b/theme/themes/eea/extras/languageLabeledIcon.less index c746be1666..74c7f41a01 100644 --- a/theme/themes/eea/extras/languageLabeledIcon.less +++ b/theme/themes/eea/extras/languageLabeledIcon.less @@ -1,72 +1,71 @@ -@type: 'extra'; -@element: 'languageLabeledIcon'; - -@import (multiple) '../../theme.config'; - -/******************************* - Language Labeled Icon -*******************************/ - -.eea.language.labeled.icon { - display: inline-flex; - flex-direction: column; - align-items: center; - width: 220px; - - .icon.wrapper { - font-size: 14px; - font-weight: 400; - color: #3D5265; - cursor: pointer; - display: flex; - align-items: center; - - i { - color:#0065A4; - margin-right: 3px; - font-size: 1.5rem; - } - - } - - .label { - color: #3D5265; - font-size: 14px; - font-weight: 400; - cursor: pointer; - } - - .dropdown { - - background-color: #F9F9F9; - - .link.wrapper { - display: flex; - - &.hidden { - display: none; - } - - ul { - list-style-type: none; - margin: 0; - color: #2E3E4C; - padding: 10px 0 10px 0; - - li{ - padding: 5px; - cursor: pointer; - } - - li:hover { - color: white; - background-color: #2E3E4C; - } - - li span { - font-weight: bold; - } - } - } - } -} \ No newline at end of file +@type: 'extra'; +@element: 'languageLabeledIcon'; + +@import (multiple) '../../theme.config'; + +/******************************* + Language Labeled Icon +*******************************/ + +.eea.language.labeled.icon { + display: inline-flex; + flex-direction: column; + align-items: center; + width: @languageLabeledIconWidth; + + .icon.wrapper { + font-size: @languageLabeledIconIconWrapperFontSize; + font-weight: @languageLabeledIconIconWrapperFontWeight; + color: @languageLabeledIconIconWrapperColor; + cursor: pointer; + display: flex; + align-items: center; + + i { + color: @languageLabeledIconIconWrapperIconColor; + margin-right: @languageLabeledIconIconWrapperIconMarginRight; + font-size: @languageLabeledIconIconWrapperIconFontSize; + } + } + + .label { + color: @languageLabeledIconLabelColor; + font-size: @languageLabeledIconLabelFontSize; + font-weight: @languageLabeledIconLabelFontWeight; + cursor: pointer; + } + + .dropdown { + background-color: @languageLabeledIconDropdownBackgroundColor; + + .link.wrapper { + display: flex; + width: @languageLabeledIconDropdowLinkWrapperWidth; + + &.hidden { + display: none; + } + + ul { + list-style-type: none; + margin: 0; + color: @languageLabeledIconLabelUlColor; + padding: @languageLabeledIconLabelUlPadding; + + li { + padding: 5px; + cursor: pointer; + } + + li:hover { + color: @languageLabeledIconLabelUlLiColor; + background-color: @languageLabeledIconLabelUlLiBackgroundColor; + } + + li span { + font-weight: @languageLabeledIconLabelUlLiSpanFontWeight; + } + } + } + } +} diff --git a/theme/themes/eea/extras/languageLabeledIcon.variables b/theme/themes/eea/extras/languageLabeledIcon.variables index 679481388f..0d9bbb4b50 100644 --- a/theme/themes/eea/extras/languageLabeledIcon.variables +++ b/theme/themes/eea/extras/languageLabeledIcon.variables @@ -2,3 +2,41 @@ Language Labeled Icon *******************************/ +/* Body */ +@languageLabeledIconWidth : 110px; + +/* Icon Wrapper */ +@languageLabeledIconIconWrapperFontSize : 14px; +@languageLabeledIconIconWrapperFontWeight : 400; +@languageLabeledIconIconWrapperColor : @deepBlue; + +/* Icon */ +@languageLabeledIconIconWrapperIconColor : @mediumPersianBlue; +@languageLabeledIconIconWrapperIconMarginRight : 3px; +@languageLabeledIconIconWrapperIconFontSize : 1.5rem; + +/* Label */ +@languageLabeledIconLabelColor : @deepBlue; +@languageLabeledIconLabelFontSize : 14px; +@languageLabeledIconLabelFontWeight: 400; + +/* Dropdown */ +@languageLabeledIconDropdownBackgroundColor : #f9f9f9; + +/* Link */ +@languageLabeledIconDropdowLinkWrapperWidth : 180px; + + +/* List */ +@languageLabeledIconLabelUlMargin :0; +@languageLabeledIconLabelUlColor : @japaneseIndigo; +@languageLabeledIconLabelUlPaddingTop : 10px; +@languageLabeledIconLabelUlPaddingRight : 0; +@languageLabeledIconLabelUlPaddingBottom : 10px; +@languageLabeledIconLabelUlPaddingLeft : 0; +@languageLabeledIconLabelUlPadding : @languageLabeledIconLabelUlPaddingTop @languageLabeledIconLabelUlPaddingRight @languageLabeledIconLabelUlPaddingBottom @languageLabeledIconLabelUlPaddingLeft; + +/* List Item */ +@languageLabeledIconLabelUlLiColor :@white; +@languageLabeledIconLabelUlLiBackgroundColor : @japaneseIndigo; +@languageLabeledIconLabelUlLiSpanFontWeight : 700; \ No newline at end of file diff --git a/theme/themes/eea/extras/newTabLabeledIcon.less b/theme/themes/eea/extras/newTabLabeledIcon.less index 6d054a7839..a8458e8482 100644 --- a/theme/themes/eea/extras/newTabLabeledIcon.less +++ b/theme/themes/eea/extras/newTabLabeledIcon.less @@ -22,6 +22,7 @@ text-align: center; display: flex; justify-content: center; + padding: 8px; .icon { cursor: pointer; font-size: @newTabLabeledIconIconFontSize; From 00f3022cdc2bfad634707f0d6d05768868f599be Mon Sep 17 00:00:00 2001 From: Alexis Sourtzis Date: Wed, 30 Mar 2022 08:40:23 +0000 Subject: [PATCH 13/29] fix(Labeled Icons):minor bug fix --- src/ui/LabeledIconGroup/LabeledIconGroup.stories.jsx | 10 +++++----- .../LanguageLabeledIcon.stories.jsx | 2 +- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/ui/LabeledIconGroup/LabeledIconGroup.stories.jsx b/src/ui/LabeledIconGroup/LabeledIconGroup.stories.jsx index c4571e7d46..87e02bdd87 100644 --- a/src/ui/LabeledIconGroup/LabeledIconGroup.stories.jsx +++ b/src/ui/LabeledIconGroup/LabeledIconGroup.stories.jsx @@ -6,7 +6,7 @@ export default { title: 'Components/Labeled Icons/Group', component: LabeledIconGroup, argTypes: { - newTab: { + tab: { description: 'NewTabLabeledIcon Component Contents', table: { type: { summary: 'Object' }, @@ -34,8 +34,8 @@ const DefaultTemplate = (args) => (
- - {args.newTab.label} + + {args.tab.label} @@ -44,7 +44,7 @@ const DefaultTemplate = (args) => ( export const Default = DefaultTemplate.bind({}); Default.args = { - newTab: { + tab: { label: 'Open in new Tab', link: '/#', icon: 'ri-share-box-fill', @@ -61,7 +61,7 @@ Default.args = { }, language: { title: 'Repost Language', - icon: , + icon: , items: [ { text: 'English', key: 'EN' }, { text: 'Russian', key: 'Ru' }, diff --git a/src/ui/LanguageLabeledIcon/LanguageLabeledIcon.stories.jsx b/src/ui/LanguageLabeledIcon/LanguageLabeledIcon.stories.jsx index 4d574f9269..6ced311d5f 100644 --- a/src/ui/LanguageLabeledIcon/LanguageLabeledIcon.stories.jsx +++ b/src/ui/LanguageLabeledIcon/LanguageLabeledIcon.stories.jsx @@ -20,7 +20,7 @@ const Template = (args) => ( export const Default = Template.bind({}); Default.args = { title: 'Repost Language', - icon: , + icon: , items: [ { text: 'English', key: 'EN' }, { text: 'Russian', key: 'Ru' }, From 1436e2bc270f8f079f07b7909254bd2e6e087084 Mon Sep 17 00:00:00 2001 From: Alexis Sourtzis Date: Wed, 30 Mar 2022 11:46:37 +0000 Subject: [PATCH 14/29] fix(LanguageLabeledIcon):bug fix & languages change --- .../LabeledIconGroup.stories.jsx | 12 ++++---- .../LanguageLabeledIcon.jsx | 8 ++--- .../LanguageLabeledIcon.stories.jsx | 29 ++++++++++--------- .../eea/extras/languageLabeledIcon.less | 5 +++- .../eea/extras/languageLabeledIcon.variables | 2 +- 5 files changed, 31 insertions(+), 25 deletions(-) diff --git a/src/ui/LabeledIconGroup/LabeledIconGroup.stories.jsx b/src/ui/LabeledIconGroup/LabeledIconGroup.stories.jsx index 87e02bdd87..cc939f2a40 100644 --- a/src/ui/LabeledIconGroup/LabeledIconGroup.stories.jsx +++ b/src/ui/LabeledIconGroup/LabeledIconGroup.stories.jsx @@ -63,12 +63,12 @@ Default.args = { title: 'Repost Language', icon: , items: [ - { text: 'English', key: 'EN' }, - { text: 'Russian', key: 'Ru' }, - { text: 'Russian', key: 'Ru' }, - { text: 'Russian', key: 'Ru' }, - { text: 'Russian', key: 'Ru' }, - { text: 'Russian', key: 'Ru' }, + { name: 'English', code: 'en' }, + { name: 'eesti', code: 'et' }, + { name: 'Suomi', code: 'fi' }, + { name: 'Français', code: 'fr' }, + { name: 'Deutsch', code: 'de' }, + { name: 'magyar', code: 'hu' }, ], }, }; diff --git a/src/ui/LanguageLabeledIcon/LanguageLabeledIcon.jsx b/src/ui/LanguageLabeledIcon/LanguageLabeledIcon.jsx index 51d0f5c15d..85ddb5bda1 100644 --- a/src/ui/LanguageLabeledIcon/LanguageLabeledIcon.jsx +++ b/src/ui/LanguageLabeledIcon/LanguageLabeledIcon.jsx @@ -68,12 +68,12 @@ const Dropdown = ({ children, ...rest }) => { {first.map((item, index) => (
  • context.setLanguage(item.key.toUpperCase())} + onClick={() => context.setLanguage(item.code.toUpperCase())} onKeyDown={() => context.setHidden(!context.hidden)} role="button" tabIndex={0} > - {item.text} {item.key} + {item.name} {item.code}
    • ))} @@ -82,12 +82,12 @@ const Dropdown = ({ children, ...rest }) => { {second.map((item, index) => (
  • context.setLanguage(item.key.toUpperCase())} + onClick={() => context.setLanguage(item.code.toUpperCase())} onKeyDown={() => context.setHidden(!context.hidden)} role="button" tabIndex={0} > - {item.text} {item.key} + {item.name} {item.code}
    • ))} diff --git a/src/ui/LanguageLabeledIcon/LanguageLabeledIcon.stories.jsx b/src/ui/LanguageLabeledIcon/LanguageLabeledIcon.stories.jsx index 6ced311d5f..d0d6d466a7 100644 --- a/src/ui/LanguageLabeledIcon/LanguageLabeledIcon.stories.jsx +++ b/src/ui/LanguageLabeledIcon/LanguageLabeledIcon.stories.jsx @@ -1,5 +1,6 @@ import React from 'react'; import LanguageLabeledIcon from './LanguageLabeledIcon'; +import { Container } from 'semantic-ui-react'; export default { title: 'Components/Labeled Icons/Language', @@ -8,13 +9,15 @@ export default { }; const Template = (args) => ( - - - {args.title} - - + + + + {args.title} + + + ); export const Default = Template.bind({}); @@ -22,11 +25,11 @@ Default.args = { title: 'Repost Language', icon: , items: [ - { text: 'English', key: 'EN' }, - { text: 'Russian', key: 'Ru' }, - { text: 'Russian', key: 'Ru' }, - { text: 'Russian', key: 'Ru' }, - { text: 'Russian', key: 'Ru' }, - { text: 'Russian', key: 'Ru' }, + { name: 'English', code: 'en' }, + { name: 'eesti', code: 'et' }, + { name: 'Suomi', code: 'fi' }, + { name: 'Français', code: 'fr' }, + { name: 'Deutsch', code: 'de' }, + { name: 'magyar', code: 'hu' }, ], }; diff --git a/theme/themes/eea/extras/languageLabeledIcon.less b/theme/themes/eea/extras/languageLabeledIcon.less index 74c7f41a01..99c77e9e6b 100644 --- a/theme/themes/eea/extras/languageLabeledIcon.less +++ b/theme/themes/eea/extras/languageLabeledIcon.less @@ -36,11 +36,14 @@ } .dropdown { - background-color: @languageLabeledIconDropdownBackgroundColor; .link.wrapper { + background-color: @languageLabeledIconDropdownBackgroundColor; display: flex; width: @languageLabeledIconDropdowLinkWrapperWidth; + position: absolute; + z-index: 1; + transform: translate(-50%,0); &.hidden { display: none; diff --git a/theme/themes/eea/extras/languageLabeledIcon.variables b/theme/themes/eea/extras/languageLabeledIcon.variables index 0d9bbb4b50..675d157786 100644 --- a/theme/themes/eea/extras/languageLabeledIcon.variables +++ b/theme/themes/eea/extras/languageLabeledIcon.variables @@ -24,7 +24,7 @@ @languageLabeledIconDropdownBackgroundColor : #f9f9f9; /* Link */ -@languageLabeledIconDropdowLinkWrapperWidth : 180px; +@languageLabeledIconDropdowLinkWrapperWidth : max-content; /* List */ From 4ae85307a62526fed75ef0b1d37ad59076370b5a Mon Sep 17 00:00:00 2001 From: Antonis Tarantilis Date: Wed, 30 Mar 2022 14:29:40 +0000 Subject: [PATCH 15/29] refactor(labeledIcons): adjust download icon to figma and replace px with rems --- .../eea/extras/downloadLabeledIcon.less | 20 ++++++++---- .../eea/extras/downloadLabeledIcon.variables | 32 +++++++++---------- 2 files changed, 28 insertions(+), 24 deletions(-) diff --git a/theme/themes/eea/extras/downloadLabeledIcon.less b/theme/themes/eea/extras/downloadLabeledIcon.less index c9f3784ade..41f0909fbe 100644 --- a/theme/themes/eea/extras/downloadLabeledIcon.less +++ b/theme/themes/eea/extras/downloadLabeledIcon.less @@ -7,10 +7,13 @@ Download Labeled Icon *******************************/ .eea.download.labeled.icon { - width: @downloadLabeledIconWidth; display: flex; justify-content: center; flex-wrap: wrap; + width: @downloadLabeledIconWidth; + min-width: @downloadLabeledIconMinWidth; + text-align: @downloadLabeledIconTextAlign; + .label { width: @downloadLabeledIconLabelWidth; font-size: @downloadLabeledIconLabelFontSize; @@ -18,11 +21,12 @@ cursor: pointer; } .icon.wrapper { - width: 100%; text-align: center; display: flex; justify-content: center; - padding: 8px; + width: @downloadLabeledIconWrapperWidth; + padding: @downloadLabeledIconWrapperPadding; + .icon { cursor: pointer; font-size: @downloadLabeledIconIconFontSize; @@ -35,6 +39,7 @@ } .dropdown { + position: relative; width: @downloadLabeledIconDropdownWIdth; .link.wrapper { @@ -42,18 +47,19 @@ cursor: pointer; background-color: @downloadLabeledIconLinkWrapperBackgroundColor; z-index: @downloadLabeledIconLinkWrapperZIndex; - margin-right: @downloadLabeledIconLinkWrapperMarginRight; width: @downloadLabeledIconLinkWrapperWidth; - padding-top: @downloadLabeledIconLinkWrapperPaddingTop; + ul { list-style-type: none; - margin-block-start: @downloadLabeledIconUlMarginBlockStart; + margin: @downloadLabeledIconUlMargin; padding-inline-start: @downloadLabeledIconUlPaddingInlineStart; + a { display: flex; - justify-content: space-around; + justify-content: center; font-weight: @downloadLabeledIconALinkFontWeight; font-size: @downloadLabeledIconLinkFontSize; + padding: @downloadLabeledIconLinkIconPadding; .icon { font-size: @downloadLabeledIconLinkIconFontSize; line-height: @downloadLabeledIconLinkIconLineHeight; diff --git a/theme/themes/eea/extras/downloadLabeledIcon.variables b/theme/themes/eea/extras/downloadLabeledIcon.variables index 2d0a3fa134..9dca0d2a71 100644 --- a/theme/themes/eea/extras/downloadLabeledIcon.variables +++ b/theme/themes/eea/extras/downloadLabeledIcon.variables @@ -3,43 +3,41 @@ *******************************/ /* Body */ -@downloadLabeledIconWidth: 62px; +@downloadLabeledIconWidth: min-content; +@downloadLabeledIconMinWidth: 5rem; +@downloadLabeledIconTextAlign: center; /* Label */ @downloadLabeledIconLabelWidth: 100%; -@downloadLabeledIconLabelFontSize: 14px; +@downloadLabeledIconLabelFontSize: 0.875rem; @downloadLabeledIconLabelColor: @deepBlue; -/* Extra */ +/* Wrapper */ @downloadLabeledIconWrapperWidth: 100%; -@downloadLabeledIconWrapperBorderTop: 0px; -@downloadLabeledIconWrapperColor: @white; -@downloadLabeledIconWrapperFontSize: 14px; +@downloadLabeledIconWrapperPadding: 0.5rem; /* Icon */ -@downloadLabeledIconIconFontSize: 25px; -@downloadLabeledIconWrapperIconHeight: 20px; -@downloadLabeledIconIconWidth: 19px; +@downloadLabeledIconIconFontSize: 1.563rem; +@downloadLabeledIconWrapperIconHeight: 1.25rem; +@downloadLabeledIconIconWidth: 1.25rem; /* Link Wrapper */ @downloadLabeledIconLinkWrapperBackgroundColor: #f9f9f9; @downloadLabeledIconLinkWrapperZIndex: 1; -@downloadLabeledIconLinkWrapperMarginRight: 2.1em; -@downloadLabeledIconLinkWrapperWidth: 4em; -@downloadLabeledIconLinkWrapperPaddingLeft: 9px; -@downloadLabeledIconLinkWrapperPaddingTop: 5px; +@downloadLabeledIconLinkWrapperWidth: 100%; /* Dropdown */ @downloadLabeledIconDropdownWIdth: 100%; /* List */ -@downloadLabeledIconUlMarginBlockStart: 0; +@downloadLabeledIconUlMargin: 0.25rem 0; @downloadLabeledIconUlPaddingInlineStart: 0px; @downloadLabeledIconLiHover: @deepBlue; /* Link */ @downloadLabeledIconALinkFontWeight: 700; -@downloadLabeledIconLinkFontSize: 14px; -@downloadLabeledIconLinkIconFontSize: 16px; -@downloadLabeledIconLinkIconLineHeight: 20px; +@downloadLabeledIconLinkFontSize: 0.875rem; +@downloadLabeledIconLinkIconFontSize: 1rem; +@downloadLabeledIconLinkIconPadding: 0.125rem 0; +@downloadLabeledIconLinkIconLineHeight: 1.25rem; @downloadLabeledIconALinkColorHover: @white; From 9f9d3cba5115c5c91aaaca49c1f834950400673a Mon Sep 17 00:00:00 2001 From: Antonis Tarantilis Date: Wed, 30 Mar 2022 14:48:20 +0000 Subject: [PATCH 16/29] refactor(labeledIcons): add variable for icon color --- theme/themes/eea/extras/downloadLabeledIcon.less | 6 +++--- theme/themes/eea/extras/downloadLabeledIcon.variables | 1 + 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/theme/themes/eea/extras/downloadLabeledIcon.less b/theme/themes/eea/extras/downloadLabeledIcon.less index 41f0909fbe..124bf90833 100644 --- a/theme/themes/eea/extras/downloadLabeledIcon.less +++ b/theme/themes/eea/extras/downloadLabeledIcon.less @@ -29,12 +29,12 @@ .icon { cursor: pointer; - font-size: @downloadLabeledIconIconFontSize; - color: @mediumPersianBlue; display: flex; + align-items: center; + font-size: @downloadLabeledIconIconFontSize; + color: @downloadLabeledIconColor; width: @downloadLabeledIconIconWidth; height: @downloadLabeledIconWrapperIconHeight; - align-items: center; } } diff --git a/theme/themes/eea/extras/downloadLabeledIcon.variables b/theme/themes/eea/extras/downloadLabeledIcon.variables index 9dca0d2a71..2774a77fb1 100644 --- a/theme/themes/eea/extras/downloadLabeledIcon.variables +++ b/theme/themes/eea/extras/downloadLabeledIcon.variables @@ -20,6 +20,7 @@ @downloadLabeledIconIconFontSize: 1.563rem; @downloadLabeledIconWrapperIconHeight: 1.25rem; @downloadLabeledIconIconWidth: 1.25rem; +@downloadLabeledIconColor: @mediumPersianBlue; /* Link Wrapper */ @downloadLabeledIconLinkWrapperBackgroundColor: #f9f9f9; From 904615d789ea711678f43ce9f9d02a450289031f Mon Sep 17 00:00:00 2001 From: Antonis Tarantilis Date: Wed, 30 Mar 2022 14:49:07 +0000 Subject: [PATCH 17/29] refactor(labeledIcons): adjust new tab labeled icon to figma and replace px with rems --- .../themes/eea/extras/newTabLabeledIcon.less | 58 ++++--------------- .../eea/extras/newTabLabeledIcon.variables | 45 ++++---------- 2 files changed, 22 insertions(+), 81 deletions(-) diff --git a/theme/themes/eea/extras/newTabLabeledIcon.less b/theme/themes/eea/extras/newTabLabeledIcon.less index a8458e8482..531f80a3e1 100644 --- a/theme/themes/eea/extras/newTabLabeledIcon.less +++ b/theme/themes/eea/extras/newTabLabeledIcon.less @@ -4,72 +4,38 @@ @import (multiple) '../../theme.config'; /******************************* - Download Labeled Icon + New Tab Labeled Icon *******************************/ .eea.new.tab.labeled.icon { - width: @newTabLabeledIconWidth; display: flex; justify-content: center; flex-wrap: wrap; + width: @newTabLabeledIconWidth; + min-width: @newTabLabeledIconMinWidth; + text-align: @newTabLabeledIconTextAlign; + .label { width: @newTabLabeledIconLabelWidth; font-size: @newTabLabeledIconLabelFontSize; color: @newTabLabeledIconLabelColor; cursor: pointer; } + .icon.wrapper { - width: @newTabLabeledIconIconWrapperWidth; text-align: center; display: flex; justify-content: center; - padding: 8px; + width: @newTabLabeledIconIconWrapperWidth; + padding: @newTabLabeledIconWrapperPadding; + .icon { cursor: pointer; - font-size: @newTabLabeledIconIconFontSize; - color: @mediumPersianBlue; display: flex; + align-items: center; + font-size: @newTabLabeledIconIconFontSize; + color: @newTabLabeledIconColor; width: @newTabLabeledIconIconWidth; height: @newTabLabeledIconWrapperIconHeight; - align-items: center; - } - } - - .dropdown { - width: @newTabLabeledIconDropdownWIdth; - - .link.wrapper { - position: absolute; - cursor: pointer; - background-color: @newTabLabeledIconLinkWrapperBackgroundColor; - z-index: @newTabLabeledIconLinkWrapperZIndex; - margin-right: @newTabLabeledIconLinkWrapperMarginRight; - width: @newTabLabeledIconLinkWrapperWidth; - padding-left: @newTabLabeledIconLinkWrapperPaddingLeft; - padding-top: @newTabLabeledIconLinkWrapperPaddingTop; - ul { - list-style-type: none; - margin-block-start: @newTabLabeledIconUlMarginBlockStart; - padding-inline-start: @newTabLabeledIconUlPaddingInlineStart; - a { - display: flex; - justify-content: space-around; - font-weight: @newTabLabeledIconALinkFontWeight; - font-size: @newTabLabeledIconLinkFontSize; - .icon { - font-size: @newTabLabeledIconLinkIconFontSize; - line-height: @newTabLabeledIconLinkIconLineHeight; - } - } - a:hover { - color: @newTabLabeledIconALinkColorHover; - } - li:hover { - background-color: @newTabLabeledIconLiHover; - } - } - } - .link.wrapper.hidden { - display: none; } } } diff --git a/theme/themes/eea/extras/newTabLabeledIcon.variables b/theme/themes/eea/extras/newTabLabeledIcon.variables index b986a66134..c8ab4af61f 100644 --- a/theme/themes/eea/extras/newTabLabeledIcon.variables +++ b/theme/themes/eea/extras/newTabLabeledIcon.variables @@ -1,48 +1,23 @@ /******************************* - Download Labeled Icon + New Tab Labeled Icon *******************************/ /* Body */ -@newTabLabeledIconWidth: 103px; +@newTabLabeledIconWidth: min-content; +@newTabLabeledIconMinWidth: 7rem; +@newTabLabeledIconTextAlign: center; /* Label */ @newTabLabeledIconLabelWidth: 100%; -@newTabLabeledIconLabelFontSize: 14px; +@newTabLabeledIconLabelFontSize: 0.875rem; @newTabLabeledIconLabelColor: @deepBlue; - -/* Extra */ -@newTabLabeledIconWrapperWidth: 100%; -@newTabLabeledIconWrapperBorderTop: 0px; -@newTabLabeledIconWrapperColor: @white; -@newTabLabeledIconWrapperFontSize: 14px; +@newTabLabeledIconColor: @mediumPersianBlue; /* Icon Wrapper */ @newTabLabeledIconIconWrapperWidth: 100%; +@newTabLabeledIconWrapperPadding: 0.5rem; /* Icon */ -@newTabLabeledIconIconFontSize: 25px; -@newTabLabeledIconWrapperIconHeight: 20px; -@newTabLabeledIconIconWidth: 19px; - -/* Link Wrapper */ -@newTabLabeledIconLinkWrapperBackgroundColor: #f9f9f9; -@newTabLabeledIconLinkWrapperZIndex: 1; -@newTabLabeledIconLinkWrapperMarginRight: 2.1em; -@newTabLabeledIconLinkWrapperWidth: 4em; -@newTabLabeledIconLinkWrapperPaddingLeft: 9px; -@newTabLabeledIconLinkWrapperPaddingTop: 5px; - -/* Dropdown */ -@newTabLabeledIconDropdownWIdth: 100%; - -/* List */ -@newTabLabeledIconUlMarginBlockStart: 0; -@newTabLabeledIconUlPaddingInlineStart: 0px; -@newTabLabeledIconLiHover: @deepBlue; - -/* Link */ -@newTabLabeledIconALinkFontWeight: 700; -@newTabLabeledIconLinkFontSize: 14px; -@newTabLabeledIconLinkIconFontSize: 16px; -@newTabLabeledIconLinkIconLineHeight: 20px; -@newTabLabeledIconALinkColorHover: @white; +@newTabLabeledIconIconFontSize: 1.563rem; +@newTabLabeledIconWrapperIconHeight: 1.25rem; +@newTabLabeledIconIconWidth: 1.25rem; From 5741e3d2e95665ef12670335b12d29cfbf998fdc Mon Sep 17 00:00:00 2001 From: Antonis Tarantilis Date: Wed, 30 Mar 2022 15:06:20 +0000 Subject: [PATCH 18/29] refactor(labeledIcons): adjust language labeled icon to figma --- .../eea/extras/languageLabeledIcon.less | 16 ++++---- .../eea/extras/languageLabeledIcon.variables | 37 +++++++++---------- 2 files changed, 27 insertions(+), 26 deletions(-) diff --git a/theme/themes/eea/extras/languageLabeledIcon.less b/theme/themes/eea/extras/languageLabeledIcon.less index 99c77e9e6b..8ff725b2aa 100644 --- a/theme/themes/eea/extras/languageLabeledIcon.less +++ b/theme/themes/eea/extras/languageLabeledIcon.less @@ -12,14 +12,16 @@ flex-direction: column; align-items: center; width: @languageLabeledIconWidth; + min-width: @languageLabeledIconMinWidth; + text-align: @languageLabeledIconTextAlign; .icon.wrapper { - font-size: @languageLabeledIconIconWrapperFontSize; - font-weight: @languageLabeledIconIconWrapperFontWeight; - color: @languageLabeledIconIconWrapperColor; cursor: pointer; display: flex; align-items: center; + font-size: @languageLabeledIconIconWrapperFontSize; + font-weight: @languageLabeledIconIconWrapperFontWeight; + color: @languageLabeledIconIconWrapperColor; i { color: @languageLabeledIconIconWrapperIconColor; @@ -38,10 +40,10 @@ .dropdown { .link.wrapper { - background-color: @languageLabeledIconDropdownBackgroundColor; - display: flex; - width: @languageLabeledIconDropdowLinkWrapperWidth; + display: flex; position: absolute; + width: @languageLabeledIconDropdowLinkWrapperWidth; + background-color: @languageLabeledIconDropdownBackgroundColor; z-index: 1; transform: translate(-50%,0); @@ -56,8 +58,8 @@ padding: @languageLabeledIconLabelUlPadding; li { - padding: 5px; cursor: pointer; + padding: @languageLabeledIconLabelUlLiPadding; } li:hover { diff --git a/theme/themes/eea/extras/languageLabeledIcon.variables b/theme/themes/eea/extras/languageLabeledIcon.variables index 675d157786..b1d99d3560 100644 --- a/theme/themes/eea/extras/languageLabeledIcon.variables +++ b/theme/themes/eea/extras/languageLabeledIcon.variables @@ -3,40 +3,39 @@ *******************************/ /* Body */ -@languageLabeledIconWidth : 110px; +@languageLabeledIconWidth : min-content; +@languageLabeledIconMinWidth: 7rem; +@languageLabeledIconTextAlign: center; /* Icon Wrapper */ -@languageLabeledIconIconWrapperFontSize : 14px; +@languageLabeledIconIconWrapperFontSize : 0.875rem; @languageLabeledIconIconWrapperFontWeight : 400; @languageLabeledIconIconWrapperColor : @deepBlue; /* Icon */ -@languageLabeledIconIconWrapperIconColor : @mediumPersianBlue; -@languageLabeledIconIconWrapperIconMarginRight : 3px; -@languageLabeledIconIconWrapperIconFontSize : 1.5rem; +@languageLabeledIconIconWrapperIconColor: @mediumPersianBlue; +@languageLabeledIconIconWrapperIconMarginRight: 0.25rem; +@languageLabeledIconIconWrapperIconFontSize: 1.5rem; /* Label */ -@languageLabeledIconLabelColor : @deepBlue; -@languageLabeledIconLabelFontSize : 14px; +@languageLabeledIconLabelColor: @deepBlue; +@languageLabeledIconLabelFontSize: 0.875rem; @languageLabeledIconLabelFontWeight: 400; /* Dropdown */ -@languageLabeledIconDropdownBackgroundColor : #f9f9f9; +@languageLabeledIconDropdownBackgroundColor: #f9f9f9; /* Link */ -@languageLabeledIconDropdowLinkWrapperWidth : max-content; +@languageLabeledIconDropdowLinkWrapperWidth: max-content; /* List */ -@languageLabeledIconLabelUlMargin :0; -@languageLabeledIconLabelUlColor : @japaneseIndigo; -@languageLabeledIconLabelUlPaddingTop : 10px; -@languageLabeledIconLabelUlPaddingRight : 0; -@languageLabeledIconLabelUlPaddingBottom : 10px; -@languageLabeledIconLabelUlPaddingLeft : 0; -@languageLabeledIconLabelUlPadding : @languageLabeledIconLabelUlPaddingTop @languageLabeledIconLabelUlPaddingRight @languageLabeledIconLabelUlPaddingBottom @languageLabeledIconLabelUlPaddingLeft; +@languageLabeledIconLabelUlMargin:0; +@languageLabeledIconLabelUlColor: @japaneseIndigo; +@languageLabeledIconLabelUlPadding: 0.25rem; /* List Item */ -@languageLabeledIconLabelUlLiColor :@white; -@languageLabeledIconLabelUlLiBackgroundColor : @japaneseIndigo; -@languageLabeledIconLabelUlLiSpanFontWeight : 700; \ No newline at end of file +@languageLabeledIconLabelUlLiPadding: 0.125rem 0.313rem; +@languageLabeledIconLabelUlLiColor: @white; +@languageLabeledIconLabelUlLiBackgroundColor: @japaneseIndigo; +@languageLabeledIconLabelUlLiSpanFontWeight: 700; \ No newline at end of file From c04264229c91bfdea927fd22f4ee1e8ddbcebd5c Mon Sep 17 00:00:00 2001 From: Antonis Tarantilis Date: Wed, 30 Mar 2022 15:48:07 +0000 Subject: [PATCH 19/29] refactor(labeledIcons): update colors on download links --- theme/themes/eea/extras/downloadLabeledIcon.less | 2 ++ theme/themes/eea/extras/downloadLabeledIcon.variables | 3 ++- 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/theme/themes/eea/extras/downloadLabeledIcon.less b/theme/themes/eea/extras/downloadLabeledIcon.less index 124bf90833..169169873e 100644 --- a/theme/themes/eea/extras/downloadLabeledIcon.less +++ b/theme/themes/eea/extras/downloadLabeledIcon.less @@ -60,6 +60,8 @@ font-weight: @downloadLabeledIconALinkFontWeight; font-size: @downloadLabeledIconLinkFontSize; padding: @downloadLabeledIconLinkIconPadding; + color: @downloadLabeledIconALinkColor; + .icon { font-size: @downloadLabeledIconLinkIconFontSize; line-height: @downloadLabeledIconLinkIconLineHeight; diff --git a/theme/themes/eea/extras/downloadLabeledIcon.variables b/theme/themes/eea/extras/downloadLabeledIcon.variables index 2774a77fb1..78eb19e0dd 100644 --- a/theme/themes/eea/extras/downloadLabeledIcon.variables +++ b/theme/themes/eea/extras/downloadLabeledIcon.variables @@ -33,7 +33,7 @@ /* List */ @downloadLabeledIconUlMargin: 0.25rem 0; @downloadLabeledIconUlPaddingInlineStart: 0px; -@downloadLabeledIconLiHover: @deepBlue; +@downloadLabeledIconLiHover: @japaneseIndigo; /* Link */ @downloadLabeledIconALinkFontWeight: 700; @@ -41,4 +41,5 @@ @downloadLabeledIconLinkIconFontSize: 1rem; @downloadLabeledIconLinkIconPadding: 0.125rem 0; @downloadLabeledIconLinkIconLineHeight: 1.25rem; +@downloadLabeledIconALinkColor: @japaneseIndigo; @downloadLabeledIconALinkColorHover: @white; From 5fa5ca9103a5d8ad1510c90cc8c46d0c82abcc63 Mon Sep 17 00:00:00 2001 From: Antonis Tarantilis Date: Wed, 30 Mar 2022 15:51:09 +0000 Subject: [PATCH 20/29] refactor(labeledIcons): update margins for group labeled icons --- theme/themes/eea/extras/labeledIconGroup.less | 3 ++- theme/themes/eea/extras/labeledIconGroup.variables | 4 ++-- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/theme/themes/eea/extras/labeledIconGroup.less b/theme/themes/eea/extras/labeledIconGroup.less index 1bea11f801..273e8cc2a1 100644 --- a/theme/themes/eea/extras/labeledIconGroup.less +++ b/theme/themes/eea/extras/labeledIconGroup.less @@ -7,9 +7,10 @@ Labeled Icon Group *******************************/ .eea.labeled.icon.group { - width: @labeledIconGroupWidth; display: flex; justify-content: center; + flex-wrap: wrap; + width: @labeledIconGroupWidth; .group.wrapper { margin-left: @labeledIconGroupWrapperMarginLeft; diff --git a/theme/themes/eea/extras/labeledIconGroup.variables b/theme/themes/eea/extras/labeledIconGroup.variables index 8fc1e640e7..abde4d86db 100644 --- a/theme/themes/eea/extras/labeledIconGroup.variables +++ b/theme/themes/eea/extras/labeledIconGroup.variables @@ -5,5 +5,5 @@ @labeledIconGroupWidth : 100%; -@labeledIconGroupWrapperMarginLeft: 10px; -@labeledIconGroupWrapperMarginRight: 10px; \ No newline at end of file +@labeledIconGroupWrapperMarginLeft: 0.25rem; +@labeledIconGroupWrapperMarginRight: 0.25rem; \ No newline at end of file From aa61f9b7d449c08c08bc4c004da6a0458598c828 Mon Sep 17 00:00:00 2001 From: Alexis Sourtzis Date: Thu, 31 Mar 2022 12:17:36 +0000 Subject: [PATCH 21/29] refactor(DownloadLabeledIcon):implement with pop up --- .../DownloadLabeledIcon.jsx | 44 +++++++------------ .../DownloadLabeledIcon.stories.jsx | 23 +++++++--- .../eea/extras/downloadLabeledIcon.less | 7 ++- 3 files changed, 39 insertions(+), 35 deletions(-) diff --git a/src/ui/DownloadLabeledIcon/DownloadLabeledIcon.jsx b/src/ui/DownloadLabeledIcon/DownloadLabeledIcon.jsx index 90f1c92834..cd5bebae7f 100644 --- a/src/ui/DownloadLabeledIcon/DownloadLabeledIcon.jsx +++ b/src/ui/DownloadLabeledIcon/DownloadLabeledIcon.jsx @@ -1,51 +1,37 @@ -import React, { useState, useContext, createContext } from 'react'; -import { Icon } from 'semantic-ui-react'; +import React from 'react'; +import { Icon, Popup } from 'semantic-ui-react'; -const DownloadContext = createContext(); function DownloadLabeledIcon({ children, ...rest }) { - const [hidden, setHidden] = useState(true); return ( - -
    {children}
    -     +
    + +
    ); } const Label = ({ children, ...rest }) => { - const context = useContext(DownloadContext); - return ( -
    context.setHidden(!context.hidden)} - role="button" - tabIndex={0} - onKeyDown={() => context.setHidden(!context.hidden)} - > - {children} -
    - ); + return
    {children}
    ; }; const IconItem = ({ children, ...rest }) => { - const context = useContext(DownloadContext); return ( -
    context.setHidden(!context.hidden)} - onKeyDown={() => context.setHidden(!context.hidden)} - role="button" - tabIndex={0} - > +
    ); }; const Dropdown = ({ children, ...rest }) => { - const context = useContext(DownloadContext); return (
    -
    +
      {rest.links !== null && rest.links.map((item, index) => ( diff --git a/src/ui/DownloadLabeledIcon/DownloadLabeledIcon.stories.jsx b/src/ui/DownloadLabeledIcon/DownloadLabeledIcon.stories.jsx index 7a7dec4fd8..691faf7a29 100644 --- a/src/ui/DownloadLabeledIcon/DownloadLabeledIcon.stories.jsx +++ b/src/ui/DownloadLabeledIcon/DownloadLabeledIcon.stories.jsx @@ -20,6 +20,13 @@ export default { type: { summary: 'string' }, }, }, + downloadIcon: { + description: 'Download option Icon', + table: { + defaultValue: { summary: '""' }, + type: { summary: 'string' }, + }, + }, links: { description: 'array of list content', table: { @@ -31,11 +38,17 @@ export default { }; const DefaultTemplate = (args) => ( - - - {args.icon} - - {args.label} + + + {args.icon} + + {args.label} +
    + } + > ); diff --git a/theme/themes/eea/extras/downloadLabeledIcon.less b/theme/themes/eea/extras/downloadLabeledIcon.less index 169169873e..f952280fee 100644 --- a/theme/themes/eea/extras/downloadLabeledIcon.less +++ b/theme/themes/eea/extras/downloadLabeledIcon.less @@ -37,13 +37,18 @@ height: @downloadLabeledIconWrapperIconHeight; } } +} + +.ui.popup.download-popup { + margin: 0; + padding: 0; + border: none; .dropdown { position: relative; width: @downloadLabeledIconDropdownWIdth; .link.wrapper { - position: absolute; cursor: pointer; background-color: @downloadLabeledIconLinkWrapperBackgroundColor; z-index: @downloadLabeledIconLinkWrapperZIndex; From 0f3dd8f0388484f94351a0ab0798ab53e84c9229 Mon Sep 17 00:00:00 2001 From: Alexis Sourtzis Date: Thu, 31 Mar 2022 12:18:47 +0000 Subject: [PATCH 22/29] refactor(LanguageLabeledIcon):implement with pop up --- .../LanguageLabeledIcon.jsx | 38 ++++++-------- .../LanguageLabeledIcon.stories.jsx | 49 ++++++++++++++----- .../eea/extras/languageLabeledIcon.less | 9 +++- 3 files changed, 58 insertions(+), 38 deletions(-) diff --git a/src/ui/LanguageLabeledIcon/LanguageLabeledIcon.jsx b/src/ui/LanguageLabeledIcon/LanguageLabeledIcon.jsx index 85ddb5bda1..24c6315814 100644 --- a/src/ui/LanguageLabeledIcon/LanguageLabeledIcon.jsx +++ b/src/ui/LanguageLabeledIcon/LanguageLabeledIcon.jsx @@ -1,37 +1,33 @@ import React, { useState, useContext, createContext } from 'react'; +import { Popup } from 'semantic-ui-react'; const LanguageContext = createContext(); function LanguageLabeledIcon({ children, ...rest }) { - const [hidden, seHidden] = useState(true); const [language, setLanguage] = useState('EN'); return ( -
    {children}
    +
    + +
    ); } const Label = ({ children, ...rest }) => { - const context = useContext(LanguageContext); - return ( -
    context.setHidden(!context.hidden)} - onKeyDown={() => context.setHidden(!context.hidden)} - role="button" - tabIndex={0} - > - {children} -
    - ); + return
    {children}
    ; }; LanguageLabeledIcon.Label = Label; @@ -39,13 +35,7 @@ LanguageLabeledIcon.Label = Label; const Icon = ({ children, ...rest }) => { const context = useContext(LanguageContext); return ( -
    context.setHidden(!context.hidden)} - onKeyDown={() => context.setHidden(!context.hidden)} - role="button" - tabIndex={0} - > +
    {rest.icon} {context.language}
    @@ -63,7 +53,7 @@ const Dropdown = ({ children, ...rest }) => { return (
    -
    +
      {first.map((item, index) => (
    • diff --git a/src/ui/LanguageLabeledIcon/LanguageLabeledIcon.stories.jsx b/src/ui/LanguageLabeledIcon/LanguageLabeledIcon.stories.jsx index d0d6d466a7..e9191177bf 100644 --- a/src/ui/LanguageLabeledIcon/LanguageLabeledIcon.stories.jsx +++ b/src/ui/LanguageLabeledIcon/LanguageLabeledIcon.stories.jsx @@ -1,28 +1,53 @@ import React from 'react'; import LanguageLabeledIcon from './LanguageLabeledIcon'; -import { Container } from 'semantic-ui-react'; export default { title: 'Components/Labeled Icons/Language', component: LanguageLabeledIcon, - argTypes: {}, + argTypes: { + label: { + description: 'Download Label', + table: { + defaultValue: { summary: '""' }, + type: { summary: 'string' }, + }, + }, + icon: { + description: 'Language Icon', + table: { + defaultValue: { summary: '""' }, + type: { summary: 'string' }, + }, + }, + items: { + description: 'array of language list', + table: { + type: { summary: 'object' }, + defaultValue: { summary: ' "" ' }, + }, + }, + }, }; const Template = (args) => ( - - - - {args.title} - - - + + + {args.label} +
    + } + > + + ); export const Default = Template.bind({}); Default.args = { - title: 'Repost Language', + label: 'Repost Language', icon: , items: [ { name: 'English', code: 'en' }, diff --git a/theme/themes/eea/extras/languageLabeledIcon.less b/theme/themes/eea/extras/languageLabeledIcon.less index 8ff725b2aa..ed83a9ed40 100644 --- a/theme/themes/eea/extras/languageLabeledIcon.less +++ b/theme/themes/eea/extras/languageLabeledIcon.less @@ -18,6 +18,7 @@ .icon.wrapper { cursor: pointer; display: flex; + justify-content: center; align-items: center; font-size: @languageLabeledIconIconWrapperFontSize; font-weight: @languageLabeledIconIconWrapperFontWeight; @@ -36,16 +37,20 @@ font-weight: @languageLabeledIconLabelFontWeight; cursor: pointer; } +} + +.ui.popup.language-popup { + margin: 0; + padding: 0; + border: none; .dropdown { .link.wrapper { display: flex; - position: absolute; width: @languageLabeledIconDropdowLinkWrapperWidth; background-color: @languageLabeledIconDropdownBackgroundColor; z-index: 1; - transform: translate(-50%,0); &.hidden { display: none; From 3015864ce740f534aa204402f85a9f392e342513 Mon Sep 17 00:00:00 2001 From: Alexis Sourtzis Date: Thu, 31 Mar 2022 12:19:35 +0000 Subject: [PATCH 23/29] fix(LabeledIconGroup):fix based on Langauge & Download Labeled icon components changes --- src/ui/LabeledIconGroup/LabeledIconGroup.jsx | 30 ++++++++++++++----- .../LabeledIconGroup.stories.jsx | 2 +- 2 files changed, 23 insertions(+), 9 deletions(-) diff --git a/src/ui/LabeledIconGroup/LabeledIconGroup.jsx b/src/ui/LabeledIconGroup/LabeledIconGroup.jsx index 9fb3af0627..979e8d4828 100644 --- a/src/ui/LabeledIconGroup/LabeledIconGroup.jsx +++ b/src/ui/LabeledIconGroup/LabeledIconGroup.jsx @@ -14,11 +14,17 @@ function LabeledIconGroup({ children, ...rest }) { LabeledIconGroup.Download = ({ children, ...rest }) => { return (
    - - - {rest.icon} - - {rest.label} + + + {rest.icon} + + {rest.label} +
    + } + >
    @@ -39,9 +45,17 @@ LabeledIconGroup.NewTab = ({ children, ...rest }) => { LabeledIconGroup.Language = ({ children, ...rest }) => { return (
    - - - {rest.title} + + + {rest.label} +
    + } + > diff --git a/src/ui/LabeledIconGroup/LabeledIconGroup.stories.jsx b/src/ui/LabeledIconGroup/LabeledIconGroup.stories.jsx index cc939f2a40..5692fec947 100644 --- a/src/ui/LabeledIconGroup/LabeledIconGroup.stories.jsx +++ b/src/ui/LabeledIconGroup/LabeledIconGroup.stories.jsx @@ -60,7 +60,7 @@ Default.args = { ], }, language: { - title: 'Repost Language', + label: 'Repost Language', icon: , items: [ { name: 'English', code: 'en' }, From 4b7dd314230145b6239fd800d41f546ab5d9eebb Mon Sep 17 00:00:00 2001 From: Antonis Tarantilis Date: Thu, 31 Mar 2022 13:28:27 +0000 Subject: [PATCH 24/29] refactor(labeledIcon): add group wrapper in labeled icon stories --- .../DownloadLabeledIcon.stories.jsx | 30 ++++++++++--------- .../LanguageLabeledIcon.stories.jsx | 29 ++++++++++-------- .../NewTabLabeledIcon.stories.jsx | 16 +++++----- 3 files changed, 41 insertions(+), 34 deletions(-) diff --git a/src/ui/DownloadLabeledIcon/DownloadLabeledIcon.stories.jsx b/src/ui/DownloadLabeledIcon/DownloadLabeledIcon.stories.jsx index 691faf7a29..be1906fe45 100644 --- a/src/ui/DownloadLabeledIcon/DownloadLabeledIcon.stories.jsx +++ b/src/ui/DownloadLabeledIcon/DownloadLabeledIcon.stories.jsx @@ -1,6 +1,6 @@ import React from 'react'; import DownloadLabeledIcon from './DownloadLabeledIcon'; -// eslint-disable-next-line import/no-unresolved +import LabeledIconGroup from '../LabeledIconGroup/LabeledIconGroup'; export default { title: 'Components/Labeled Icons/Download', @@ -38,19 +38,21 @@ export default { }; const DefaultTemplate = (args) => ( - - - {args.icon} - - {args.label} -
    - } - > - - + + + + {args.icon} + + {args.label} +
    + } + > + + + ); export const Default = DefaultTemplate.bind({}); diff --git a/src/ui/LanguageLabeledIcon/LanguageLabeledIcon.stories.jsx b/src/ui/LanguageLabeledIcon/LanguageLabeledIcon.stories.jsx index e9191177bf..07a49410c4 100644 --- a/src/ui/LanguageLabeledIcon/LanguageLabeledIcon.stories.jsx +++ b/src/ui/LanguageLabeledIcon/LanguageLabeledIcon.stories.jsx @@ -1,5 +1,6 @@ import React from 'react'; import LanguageLabeledIcon from './LanguageLabeledIcon'; +import LabeledIconGroup from '../LabeledIconGroup/LabeledIconGroup'; export default { title: 'Components/Labeled Icons/Language', @@ -30,19 +31,21 @@ export default { }; const Template = (args) => ( - - - {args.label} -
    - } - > - - + + + + {args.label} +
    + } + > + + + ); export const Default = Template.bind({}); diff --git a/src/ui/NewTabLabeledIcon/NewTabLabeledIcon.stories.jsx b/src/ui/NewTabLabeledIcon/NewTabLabeledIcon.stories.jsx index 7762cfb209..9131c30ff4 100644 --- a/src/ui/NewTabLabeledIcon/NewTabLabeledIcon.stories.jsx +++ b/src/ui/NewTabLabeledIcon/NewTabLabeledIcon.stories.jsx @@ -1,6 +1,6 @@ import React from 'react'; import NewTabLabeledIcon from './NewTabLabeledIcon'; -// eslint-disable-next-line import/no-unresolved +import LabeledIconGroup from '../LabeledIconGroup/LabeledIconGroup'; export default { title: 'Components/Labeled Icons/New Tab', @@ -31,12 +31,14 @@ export default { }; const DefaultTemplate = (args) => ( - - - {args.icon} - - {args.label} - + + + + {args.icon} + + {args.label} + + ); export const Default = DefaultTemplate.bind({}); From 9c1ecddc52c81be1d952d0af67862a284eba9eec Mon Sep 17 00:00:00 2001 From: Antonis Tarantilis Date: Thu, 31 Mar 2022 13:29:25 +0000 Subject: [PATCH 25/29] refactor(labeledIcon): adjust paddings --- theme/themes/eea/extras/downloadLabeledIcon.less | 2 +- theme/themes/eea/extras/downloadLabeledIcon.variables | 4 ++-- theme/themes/eea/extras/labeledIconGroup.less | 1 + theme/themes/eea/extras/labeledIconGroup.variables | 1 + 4 files changed, 5 insertions(+), 3 deletions(-) diff --git a/theme/themes/eea/extras/downloadLabeledIcon.less b/theme/themes/eea/extras/downloadLabeledIcon.less index f952280fee..03c2068bf9 100644 --- a/theme/themes/eea/extras/downloadLabeledIcon.less +++ b/theme/themes/eea/extras/downloadLabeledIcon.less @@ -57,7 +57,7 @@ ul { list-style-type: none; margin: @downloadLabeledIconUlMargin; - padding-inline-start: @downloadLabeledIconUlPaddingInlineStart; + padding: @downloadLabeledIconUlPaddingInlineStart; a { display: flex; diff --git a/theme/themes/eea/extras/downloadLabeledIcon.variables b/theme/themes/eea/extras/downloadLabeledIcon.variables index 78eb19e0dd..668ae70d24 100644 --- a/theme/themes/eea/extras/downloadLabeledIcon.variables +++ b/theme/themes/eea/extras/downloadLabeledIcon.variables @@ -32,14 +32,14 @@ /* List */ @downloadLabeledIconUlMargin: 0.25rem 0; -@downloadLabeledIconUlPaddingInlineStart: 0px; +@downloadLabeledIconUlPaddingInlineStart: 0.25rem 0px; @downloadLabeledIconLiHover: @japaneseIndigo; /* Link */ @downloadLabeledIconALinkFontWeight: 700; @downloadLabeledIconLinkFontSize: 0.875rem; @downloadLabeledIconLinkIconFontSize: 1rem; -@downloadLabeledIconLinkIconPadding: 0.125rem 0; +@downloadLabeledIconLinkIconPadding: 0.125rem 0.875rem; @downloadLabeledIconLinkIconLineHeight: 1.25rem; @downloadLabeledIconALinkColor: @japaneseIndigo; @downloadLabeledIconALinkColorHover: @white; diff --git a/theme/themes/eea/extras/labeledIconGroup.less b/theme/themes/eea/extras/labeledIconGroup.less index 273e8cc2a1..d828d32de8 100644 --- a/theme/themes/eea/extras/labeledIconGroup.less +++ b/theme/themes/eea/extras/labeledIconGroup.less @@ -11,6 +11,7 @@ justify-content: center; flex-wrap: wrap; width: @labeledIconGroupWidth; + padding: @labeledIconGroupPadding; .group.wrapper { margin-left: @labeledIconGroupWrapperMarginLeft; diff --git a/theme/themes/eea/extras/labeledIconGroup.variables b/theme/themes/eea/extras/labeledIconGroup.variables index abde4d86db..33dc487e61 100644 --- a/theme/themes/eea/extras/labeledIconGroup.variables +++ b/theme/themes/eea/extras/labeledIconGroup.variables @@ -4,6 +4,7 @@ *******************************/ @labeledIconGroupWidth : 100%; +@labeledIconGroupPadding : 0 2rem; @labeledIconGroupWrapperMarginLeft: 0.25rem; @labeledIconGroupWrapperMarginRight: 0.25rem; \ No newline at end of file From ac286931282c0a69bc6d7803e96cbe302db8994f Mon Sep 17 00:00:00 2001 From: Alexis Sourtzis Date: Thu, 5 May 2022 07:08:23 +0000 Subject: [PATCH 26/29] refactor(LanguageLabeledIcon): set language code to uppercase and minor storybook change --- src/ui/LabeledIconGroup/LabeledIconGroup.stories.jsx | 2 +- src/ui/LanguageLabeledIcon/LanguageLabeledIcon.jsx | 4 ++-- src/ui/LanguageLabeledIcon/LanguageLabeledIcon.stories.jsx | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/ui/LabeledIconGroup/LabeledIconGroup.stories.jsx b/src/ui/LabeledIconGroup/LabeledIconGroup.stories.jsx index 5692fec947..0cdeef620a 100644 --- a/src/ui/LabeledIconGroup/LabeledIconGroup.stories.jsx +++ b/src/ui/LabeledIconGroup/LabeledIconGroup.stories.jsx @@ -60,7 +60,7 @@ Default.args = { ], }, language: { - label: 'Repost Language', + label: 'Language', icon: , items: [ { name: 'English', code: 'en' }, diff --git a/src/ui/LanguageLabeledIcon/LanguageLabeledIcon.jsx b/src/ui/LanguageLabeledIcon/LanguageLabeledIcon.jsx index 24c6315814..3658b80e53 100644 --- a/src/ui/LanguageLabeledIcon/LanguageLabeledIcon.jsx +++ b/src/ui/LanguageLabeledIcon/LanguageLabeledIcon.jsx @@ -63,7 +63,7 @@ const Dropdown = ({ children, ...rest }) => { role="button" tabIndex={0} > - {item.name} {item.code} + {item.name} {item.code.toUpperCase()}
    ))} @@ -77,7 +77,7 @@ const Dropdown = ({ children, ...rest }) => { role="button" tabIndex={0} > - {item.name} {item.code} + {item.name} {item.code.toUpperCase()}
    ))} diff --git a/src/ui/LanguageLabeledIcon/LanguageLabeledIcon.stories.jsx b/src/ui/LanguageLabeledIcon/LanguageLabeledIcon.stories.jsx index 07a49410c4..025b500e7d 100644 --- a/src/ui/LanguageLabeledIcon/LanguageLabeledIcon.stories.jsx +++ b/src/ui/LanguageLabeledIcon/LanguageLabeledIcon.stories.jsx @@ -50,7 +50,7 @@ const Template = (args) => ( export const Default = Template.bind({}); Default.args = { - label: 'Repost Language', + label: 'Language', icon: , items: [ { name: 'English', code: 'en' }, From 78f55442a80cbc2f716ba81274ed08204e3c502a Mon Sep 17 00:00:00 2001 From: Alexis Sourtzis Date: Thu, 5 May 2022 09:53:44 +0000 Subject: [PATCH 27/29] refactor(LanguageLabeledIcons):minor storybook change --- src/ui/LabeledIconGroup/LabeledIconGroup.stories.jsx | 4 ++-- src/ui/LanguageLabeledIcon/LanguageLabeledIcon.stories.jsx | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/ui/LabeledIconGroup/LabeledIconGroup.stories.jsx b/src/ui/LabeledIconGroup/LabeledIconGroup.stories.jsx index 0cdeef620a..28d632b6d2 100644 --- a/src/ui/LabeledIconGroup/LabeledIconGroup.stories.jsx +++ b/src/ui/LabeledIconGroup/LabeledIconGroup.stories.jsx @@ -64,11 +64,11 @@ Default.args = { icon: , items: [ { name: 'English', code: 'en' }, - { name: 'eesti', code: 'et' }, + { name: 'Eesti', code: 'et' }, { name: 'Suomi', code: 'fi' }, { name: 'Français', code: 'fr' }, { name: 'Deutsch', code: 'de' }, - { name: 'magyar', code: 'hu' }, + { name: 'Magyar', code: 'hu' }, ], }, }; diff --git a/src/ui/LanguageLabeledIcon/LanguageLabeledIcon.stories.jsx b/src/ui/LanguageLabeledIcon/LanguageLabeledIcon.stories.jsx index 025b500e7d..b9b96051ce 100644 --- a/src/ui/LanguageLabeledIcon/LanguageLabeledIcon.stories.jsx +++ b/src/ui/LanguageLabeledIcon/LanguageLabeledIcon.stories.jsx @@ -54,10 +54,10 @@ Default.args = { icon: , items: [ { name: 'English', code: 'en' }, - { name: 'eesti', code: 'et' }, + { name: 'Eesti', code: 'et' }, { name: 'Suomi', code: 'fi' }, { name: 'Français', code: 'fr' }, { name: 'Deutsch', code: 'de' }, - { name: 'magyar', code: 'hu' }, + { name: 'Magyar', code: 'hu' }, ], }; From 724be48bebb5421663969b694fca79181f007977 Mon Sep 17 00:00:00 2001 From: github-actions Date: Wed, 1 Jun 2022 11:31:53 +0000 Subject: [PATCH 28/29] Autobuild of docusaurus docs --- docs/404.html | 4 +- docs/assets/js/41d5c757.07613484.js | 1 + docs/assets/js/41d5c757.c570a674.js | 1 - ...n.c8998ab1.js => runtime~main.89d33043.js} | 2 +- docs/blog/archive/index.html | 4 +- docs/docs/category/components/index.html | 4 +- docs/docs/category/maps-and-charts/index.html | 4 +- docs/docs/category/publications/index.html | 4 +- docs/docs/category/web-content/index.html | 4 +- docs/docs/category/web-development/index.html | 4 +- docs/docs/dataguide/intro/index.html | 4 +- docs/docs/intro/index.html | 4 +- docs/docs/pubguide/design/index.html | 4 +- docs/docs/pubguide/writing/index.html | 4 +- docs/docs/webcontent/intro/index.html | 4 +- .../webdev/Components/Accordion/index.html | 4 +- .../webdev/Components/Blockquote/index.html | 4 +- .../webdev/Components/Breadcrumb/index.html | 4 +- .../docs/webdev/Components/Buttons/index.html | 4 +- docs/docs/webdev/Components/Cards/index.html | 4 +- .../docs/webdev/Components/Comment/index.html | 4 +- .../docs/webdev/Components/Confirm/index.html | 4 +- .../docs/webdev/Components/Divider/index.html | 4 +- .../Components/Forms/Checkbox/index.html | 4 +- .../Components/Forms/Dropdown/index.html | 4 +- .../webdev/Components/Forms/Radio/index.html | 4 +- .../Components/Forms/TextArea/index.html | 4 +- .../Components/Forms/TextInput/index.html | 4 +- .../webdev/Components/Headings/index.html | 4 +- docs/docs/webdev/Components/Image/index.html | 4 +- .../Components/Inpage-Navigation/index.html | 4 +- docs/docs/webdev/Components/Item/index.html | 4 +- docs/docs/webdev/Components/Labels/index.html | 4 +- docs/docs/webdev/Components/Lists/index.html | 4 +- docs/docs/webdev/Components/Loader/index.html | 4 +- docs/docs/webdev/Components/Logo/index.html | 4 +- .../webdev/Components/Messages/index.html | 4 +- docs/docs/webdev/Components/Modal/index.html | 4 +- .../webdev/Components/Pagination/index.html | 4 +- docs/docs/webdev/Components/Popup/index.html | 4 +- .../webdev/Components/Progress/index.html | 4 +- .../Components/Search/Filters/index.html | 4 +- .../Components/Search/Searchbox/index.html | 4 +- .../Components/Search/Suggestions/index.html | 4 +- .../docs/webdev/Components/Segment/index.html | 4 +- .../webdev/Components/Statistic/index.html | 4 +- docs/docs/webdev/Components/Tab/index.html | 4 +- docs/docs/webdev/Components/Table/index.html | 4 +- .../Components/Visuals/Charts/index.html | 4 +- .../Components/Visuals/Dashboard/index.html | 4 +- .../webdev/Components/Visuals/Maps/index.html | 4 +- .../docs/webdev/Guidelines/colours/index.html | 4 +- .../webdev/Guidelines/iconography/index.html | 4 +- docs/docs/webdev/Guidelines/images/index.html | 4 +- docs/docs/webdev/Guidelines/intro/index.html | 4 +- .../docs/webdev/Guidelines/spacing/index.html | 4 +- .../webdev/Guidelines/typography/index.html | 4 +- .../Resources/developer-guidelines/index.html | 4 +- .../Resources/theming-guidelines/index.html | 4 +- docs/docs/webdev/Templates/Grid/index.html | 4 +- .../webdev/Templates/PageHeader/index.html | 4 +- .../webdev/Templates/SiteFooter/index.html | 4 +- .../webdev/Templates/SiteHeader/index.html | 4 +- docs/docs/webdev/Utilities/intro/index.html | 4 +- docs/docs/whatsnew/index.html | 6 +- docs/index.html | 4 +- website/docs/2-whatsnew.md | 56 ++++++++++++++++--- 67 files changed, 178 insertions(+), 136 deletions(-) create mode 100644 docs/assets/js/41d5c757.07613484.js delete mode 100644 docs/assets/js/41d5c757.c570a674.js rename docs/assets/js/{runtime~main.c8998ab1.js => runtime~main.89d33043.js} (99%) diff --git a/docs/404.html b/docs/404.html index 23f9ccd445..3e7151b9bc 100644 --- a/docs/404.html +++ b/docs/404.html @@ -5,13 +5,13 @@ Page Not Found | EEA Design System - +

    Page Not Found

    We could not find what you were looking for.

    Please contact the owner of the site that linked you to the original URL and let them know their link is broken.

    - + \ No newline at end of file diff --git a/docs/assets/js/41d5c757.07613484.js b/docs/assets/js/41d5c757.07613484.js new file mode 100644 index 0000000000..25259d3616 --- /dev/null +++ b/docs/assets/js/41d5c757.07613484.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[6245],{3905:function(e,a,t){t.d(a,{Zo:function(){return c},kt:function(){return p}});var i=t(7294);function n(e,a,t){return a in e?Object.defineProperty(e,a,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[a]=t,e}function o(e,a){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);a&&(i=i.filter((function(a){return Object.getOwnPropertyDescriptor(e,a).enumerable}))),t.push.apply(t,i)}return t}function m(e){for(var a=1;a=0||(n[t]=e[t]);return n}(e,a);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(i=0;i=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(n[t]=e[t])}return n}var l=i.createContext({}),d=function(e){var a=i.useContext(l),t=a;return e&&(t="function"==typeof e?e(a):m(m({},a),e)),t},c=function(e){var a=d(e.components);return i.createElement(l.Provider,{value:a},e.children)},s={inlineCode:"code",wrapper:function(e){var a=e.children;return i.createElement(i.Fragment,{},a)}},f=i.forwardRef((function(e,a){var t=e.components,n=e.mdxType,o=e.originalType,l=e.parentName,c=r(e,["components","mdxType","originalType","parentName"]),f=d(t),p=n,b=f["".concat(l,".").concat(p)]||f[p]||s[p]||o;return t?i.createElement(b,m(m({ref:a},c),{},{components:t})):i.createElement(b,m({ref:a},c))}));function p(e,a){var t=arguments,n=a&&a.mdxType;if("string"==typeof e||n){var o=t.length,m=new Array(o);m[0]=f;var r={};for(var l in a)hasOwnProperty.call(a,l)&&(r[l]=a[l]);r.originalType=e,r.mdxType="string"==typeof e?e:n,m[1]=r;for(var d=2;d
    - + \ No newline at end of file diff --git a/docs/docs/webdev/Guidelines/intro/index.html b/docs/docs/webdev/Guidelines/intro/index.html index 68f617ea72..a2e5570e1d 100644 --- a/docs/docs/webdev/Guidelines/intro/index.html +++ b/docs/docs/webdev/Guidelines/intro/index.html @@ -5,14 +5,14 @@ Intro | EEA Design System - +

    Intro

    Guidelines

    The DS v1 is the EEA's design system, created with a set of guiding principles that followed throughout the process. By following a user-centered design approach and best UX practices, the DS v1 is the result of in-depth research into the users' needs and goals, offering solutions that are assessed, tested and revised continuously. All components included in the DS v1 follow the Web Content Accessibility Guidelines (WCAG).

    The main characteristics of our design system are:

    • Minimal use of drop shadows
    • Sharp edges and corners
    • Uncluttered, distraction-free design
    • High readability with clear typography
    • Easily adjusted for responsive design

    We emphasize more on functionality rather than appearance and in parallel we try to offer a consistent appearance irrespective of the screen resolution and types of devices. Trying not to use unnecessary designing elements, we focus on faster site designing and minimum loading time.

    - + \ No newline at end of file diff --git a/docs/docs/webdev/Guidelines/spacing/index.html b/docs/docs/webdev/Guidelines/spacing/index.html index e75ec77942..be7f13bb64 100644 --- a/docs/docs/webdev/Guidelines/spacing/index.html +++ b/docs/docs/webdev/Guidelines/spacing/index.html @@ -5,7 +5,7 @@ Spacing | EEA Design System - + @@ -13,7 +13,7 @@

    Spacing

    To ensure that layouts are visually balanced, most measurements align to 8px, which corresponds to both spacing and the overall layout. Components are sized in 8px increments, ensuring a consistent visual rhythm across each screen. Smaller elements, such as icons, can align to a 4px grid, while typography can fall on a 4px baseline grid, meaning that each line’s typographic baseline is spaced in increments of 4px from its neighbor.

    - + \ No newline at end of file diff --git a/docs/docs/webdev/Guidelines/typography/index.html b/docs/docs/webdev/Guidelines/typography/index.html index f195d35f5b..d8ccf6d8f4 100644 --- a/docs/docs/webdev/Guidelines/typography/index.html +++ b/docs/docs/webdev/Guidelines/typography/index.html @@ -5,13 +5,13 @@ Typography | EEA Design System - +

    Typography

    Primary Font: Roboto

    We use Roboto as our Primary font. Roboto allows letters to take up as much space as it needs and ultimately, making for an improved experience for the reader.

    Web Safe Font: Arial

    We use Arial as an alternative font. It is similar in character and style to Roboto typeface and is a commonly available system font.

    Base Font Size

    We set 16px (1rem) as the base font size for body text to ensure readability. It is the default font size for most browsers.

    Heading 1

    FontFont sizeLine heightExample
    mobileRoboto30px or 1.875rem45px or 2.8rem

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    mobileArchivo30px or 1.875rem45px or 2.8rem

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    desktopRoboto48px or 3rem72px or 4.5rem

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    desktopArchivo48px or 3rem72px or 4.5rem

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    Heading 2

    FontFont sizeLine heightExample
    mobileRoboto24px or 1.5rem36px or 2.25rem

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.

    desktopRoboto40px or 2.5rem60px or 3.75rem

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    Heading 3

    FontFont sizeLine heightExample
    mobileRoboto20px or 1.25rem30px or 1.875rem

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

    desktopRoboto36px or 2.25rem54px or 3.375rem

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    Heading 4

    FontFont sizeLine heightExample
    mobileRoboto18px or 1.125rem27px or 1.7rem

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

    desktopRoboto24px or 1.5rem36px or 2.25rem

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.

    Heading 5

    FontFont sizeLine heightExample
    desktopRoboto20px or 1.25rem30px or 1.875rem

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

    Heading 6

    FontFont sizeLine heightExample
    desktopRoboto18px or 1.125rem27px or 1.7rem

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

    Body

    FontFont sizeLine heightExample
    mobileRoboto16px or 1rem24px or 1.5rem

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

    desktopRoboto16px or 1rem24px or 1.5rem

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

    Caption

    FontFont sizeLine heightExample
    mobileRoboto14px or 0.875rem21px or 1.3rem

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

    desktopRoboto16px or 0.875rem21px or 1.3rem

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

    Small Text

    FontFont sizeLine heightExample
    mobileRoboto12px or 0.75rem18px or 1.125rem

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

    desktopRoboto12px or 0.75rem18px or 1.125rem

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

    Weight

    Font weight is the thickness of a font's stroke, with various weights used to differentiate content hierarchy. The bold style emphasizes the importance in comparison with the regular font style in the font family. We use 400 for regular and 600 for bold. Usually, the bold style is assigned to headings. Regular text is used for body text.

    Line height

    Line spacing is commonly measured as a percentage of font size. Conventional wisdom is that line spacing of 130%-150% is ideal for readability. In fact, anything from about 120% up to 200% is acceptable, but 150% tends to be the most quoted sweet spot (and a WCAG recommendation). You should experiment to see what looks best with your text. The line-height value is always divisible by 4 to support the grid.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    		100%

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    		150%

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    		250%

    Line length

    Line-length is the number of characters displayed in a single line. Lines that are too long or too short can distract readers. For readability, limit to no more than 80 characters including spaces for desktop. Line length for mobile is recommended to use 40 to 60 characters including space per line.

    - + \ No newline at end of file diff --git a/docs/docs/webdev/Resources/developer-guidelines/index.html b/docs/docs/webdev/Resources/developer-guidelines/index.html index 79b905eb36..142078a8ee 100644 --- a/docs/docs/webdev/Resources/developer-guidelines/index.html +++ b/docs/docs/webdev/Resources/developer-guidelines/index.html @@ -5,7 +5,7 @@ Developer Guidelines | EEA Design System - + @@ -70,7 +70,7 @@ guidelines as to what combinations of props and variations are allowed, to ensure a consistent look and feel. One place to document these constraints is in the control options we have in Storybook.

    - + \ No newline at end of file diff --git a/docs/docs/webdev/Resources/theming-guidelines/index.html b/docs/docs/webdev/Resources/theming-guidelines/index.html index 887d1390b5..ab4a2b3c76 100644 --- a/docs/docs/webdev/Resources/theming-guidelines/index.html +++ b/docs/docs/webdev/Resources/theming-guidelines/index.html @@ -5,7 +5,7 @@ Theming Guidelines | EEA Design System - + @@ -28,7 +28,7 @@ it's simply a job of changing one global variable:

    // site.variables
    /* This adjusts the meta alignment across all elements */
    @metaAlign: right;

    The same is true with colors used in components, try to avoid custom values set on components only as they should be part of the site.variables color pallete.

    Semantic UI global setting example

    We see this rule played out in many places within site.variables:

    // site.variables
    /*--------------
    Form Input
    ---------------*/
    /* This adjusts the default form input across all elements */
    @inputBackground        : @white;

    Then within form.variables we have several rules that make use of the global setting:

    // form.variables
    /* Text Area */
    @textAreaBackground: @inputBackground;

    /* Inverted */
    @invertedInputBackground: @inputBackground;

    Check components design when having odd numbers or images

    As written down in the Card component issue, if your component accepts images consider how they would adapt in case there is a mix between portrait and landscapei images.

    What about situations where you have an odd number of elements or the body of the components differ in size?

    The components need to be checked for such situations and to ensure they are flexible to deal with these mix and match elements.

    Ex:

    If the card is flex based and the parent wrapper is flex as well, consider adding a max-height to the card body or image wrapper so that they all keep a standard size.

    Code formatting

    • CSS and less files should be formatted using prettier. Indent space will be 2 spaces.
    • Files should be edited as Unix files, with LF line endings.
    - + \ No newline at end of file diff --git a/docs/docs/webdev/Templates/Grid/index.html b/docs/docs/webdev/Templates/Grid/index.html index 6aa5b2ce9b..849b4e80df 100644 --- a/docs/docs/webdev/Templates/Grid/index.html +++ b/docs/docs/webdev/Templates/Grid/index.html @@ -5,7 +5,7 @@ Grid | EEA Design System - + @@ -16,7 +16,7 @@

    Don’ts

    Do not make gutters too large or the same width as the columns. Oversized gutters will not leave enough room for content and may prevent a layout from appearing unified.

    Breakpoints

    A breakpoint is the screen size threshold determined by specific layout requirements. At a given breakpoint range, the layout adjusts to suit the screen size and orientation. ΕΕΑ provides responsive layouts based on 4-column, 8-column, and 12-column grids, available for use across different screens, devices, and orientations. Each breakpoint range determines the number of columns, and recommended margins and gutters for each display size.

    BreakpointsColumnsGuttersMargins
    Mobile320-480px420px or 1.25rem30px or 1.875rem
    Tablet481-835px8 20px or 1.25rem40px or 2.5rem
    Desktop1025px and above1220px or 1.25rem140px or 8.75rem
    - + \ No newline at end of file diff --git a/docs/docs/webdev/Templates/PageHeader/index.html b/docs/docs/webdev/Templates/PageHeader/index.html index 4fa616248c..e12a1897d8 100644 --- a/docs/docs/webdev/Templates/PageHeader/index.html +++ b/docs/docs/webdev/Templates/PageHeader/index.html @@ -5,13 +5,13 @@ Page Header | EEA Design System - +

    Page Header

    The page header component provides users the context of the page. It is always placed just below the site header.

    Anatomy

    ComponentsMandatoryOptional
    Page titleyesno
    Meta( content type, published date, modified date, reading time )noyes
    Download - Bookmark actionsnoyes
    Breadcrumb
    Breadcrumb component provides information on the page and its relationship to the site's hierarchy and structure.
    It is optional if your website's navigational structure has less than 3 levels.    		noyes

    Do's

    • ensure the pages contain all the components and elements in the anatomy table above
    • always use a page header when building your internal pages
    • when choosing a background image, make sure it highlights the main object related to the content, and it is meaningful

    Don'ts

    • don't use more than one page header per page
    • do not use a background image unless there is a communication need, as it might be a distraction

    When to use

    • to highlight the topic of the page, or to show important information about the page

    When not to use

    • page header is not used for homepage of the website
    - + \ No newline at end of file diff --git a/docs/docs/webdev/Templates/SiteFooter/index.html b/docs/docs/webdev/Templates/SiteFooter/index.html index 9d7ece6d0e..3aaf1f3fd7 100644 --- a/docs/docs/webdev/Templates/SiteFooter/index.html +++ b/docs/docs/webdev/Templates/SiteFooter/index.html @@ -5,13 +5,13 @@ Site Footer | EEA Design System - +

    Site Footer

    The core footer provides supplementary information such as copyright, legal, privacy, social media, contact information and links to other important sites within the EEA. It is always placed at the bottom of every page.

    Anatomy

    ComponentsMandatoryOptional
    EEA Networkyesno
    Content owner detailsyesno
    Contact Information
    		yesno
    Legal navigationyesno

    Do's

    • make sure the footer contain all the elements in the anatomy table above

    Don'ts

    • don't use more than one footer per page

    When to use

    • always use a footer when building your page

    When not to use

    • do not follow these guidelines when you are updating sites that fall under a different category of the EEA portal
    - + \ No newline at end of file diff --git a/docs/docs/webdev/Templates/SiteHeader/index.html b/docs/docs/webdev/Templates/SiteHeader/index.html index 72c6c8bcdb..b8d2c4dd6e 100644 --- a/docs/docs/webdev/Templates/SiteHeader/index.html +++ b/docs/docs/webdev/Templates/SiteHeader/index.html @@ -5,13 +5,13 @@ Site Header | EEA Design System - +

    Site Header

    The EEA header shows users that they are on EEA portal and which service they are using.

    Anatomy

    ComponentsMandatoryOptional
    An official website of the EU statementyesno
    Environmental Information systems dropdownyesno
    European Environmental Agency logoyesno
    Language selectyesno
    Search iconyesno
    Menuyesno

    Do’s

    • You must use the EEA header at the top of every page if your service is being hosted on one of these domains:
      • Eea.europa.eu
    • Make sure that contain all mandatory element from the Anatomy table

    Dont’s

    • You must not use the EEA header if your service is not being hosted in one of the above domains.
    - + \ No newline at end of file diff --git a/docs/docs/webdev/Utilities/intro/index.html b/docs/docs/webdev/Utilities/intro/index.html index 632fec8683..48b92df9ae 100644 --- a/docs/docs/webdev/Utilities/intro/index.html +++ b/docs/docs/webdev/Utilities/intro/index.html @@ -5,13 +5,13 @@ Utilities | EEA Design System - +

    Utilities

    - + \ No newline at end of file diff --git a/docs/docs/whatsnew/index.html b/docs/docs/whatsnew/index.html index 40937ce77d..42e84a9ed3 100644 --- a/docs/docs/whatsnew/index.html +++ b/docs/docs/whatsnew/index.html @@ -5,13 +5,13 @@ What's new | EEA Design System - +
    -

    What's new

    All notable changes to this project will be documented in this file. Dates are displayed in UTC.

    Generated by auto-changelog.

    Unreleased - 2022-05-31T14:06:35.648Z

    🚀 New Features

    • feat(Carousel): create carousel for cards 2b0d737
    • feat(ItemwithIcons): Initial Item group with icons, new item variation 7f4ea47
    • feat(utilities): add file and basic utilities 05c88b2
    • feat(utilities): add file with basic utilities classes #173 855185f

    🐛 Bug Fixes

    • fix(tokens): hsla function for shadows b8e5d37
    • fix(tokens): remove css var from less file a9c4224
    • fix(carousel):add storybook controls descriptions 269a603
    • fix(table): Set responsive breakpoint to @tabletBreakpoint 067e018
    • fix(item): remove image width css from item.less 7b21cb2

    💅 Enhancements

    • refactor(docusaurus): restructured and improved sections navigation #174 b47b026
    • refactor(item): import item.less in theme definitions c516374
    • change(tokens): rename gap to space and added em spaces 719efc4
    • refactor(tokens): add 12 and 14px font size token #176 3681147
    • refactor(Label):add corner,ribbon & basic label stories and styles e2bbbb9
    • refactor(Label):style changes based on label importance class ce4d5d1
    • refactor(item): add classes for size, set default to tile and add controls for grouped items d5a0405
    • refactor(tokens): add borders, shadows, shapes and z-index tokens 7069106
    • change(tokens): name spacing tokens gaps and added missing values up to 80px as documented 9fbd912
    • refactor(quote): Rename sourceInfo to extra info 76c2b40
    • refactor(item): WIP replacing unstackable with row e3a44de
    • refactor(tocens): add color design tokens 13bb165
    • refactor(item): adjust margins to match figma designs 6334581
    • refactor(carousel): remove title from story and color on card hover 12a1d7c
    • change(tokens): updated sizes with 4-8-16px increments 1f53d65
    • change(tokens): added size tokens to be used for width of elements cda5dea
    • change(utilities): values need important rule 96150d9
    • change(tokens): added also rem space values aedbbdd
    • refactor(tokens): add 14px font size token 8d8695d
    • change(tokens): updated z-index tokens with negative values 404efe4
    • refactor(tokens): remove conditional border radius f0fe5ad

    🏠 Documentation changes

    • docs(website): created new sections, improved website navigation 243f0be
    • docs(docusaurus): copyedit, improved navigation 998762a
    • docs(homepage): adding design system homepage with links for upcoming sections c9a9685
    • docs(website): restructuring, moved current DS docs to new folder 8bb612f
    • docs(homepage): copy editing ee37d6f

    🛠️ Others

    • feature(homepage): added Item group with icons #167 2ec99f5
    • feature(tokens): added borders, z-index, shadows tokens #171 74c1788
    • feature(tokens): added initial color design tokens #169 da3eae0
    • perf(carousel): added slick library ca9be51

    0.3.1 - 2022-05-19

    🐛 Bug Fixes

    • fix(input,segment): toggle inputs and padding fixes within Volto sidebar forms de030d6

    💅 Enhancements

    • change(login): restored width of login container to 376px 0564293

    0.3.0 - 2022-05-17

    🚀 New Features

    • feat(Callout):create Callout component with Blockquote style 3d486b1
    • feat(callout): Align the Callout component with Volto slate component e9343ff

    🐛 Bug Fixes

    • fix(testimonial): fix storybook arg names b9df52f
    • fix(table): tweak responsive table for extra long headers 7f9f9e2
    • fix(quote): fix color and padding issue 310d6b3
    • fix(accordion): Fix accordion active title color 57af165
    • fix(testimonial): remove info arguement 9593d95

    💅 Enhancements

    • refactor(Table):add responsive mobile table story and styles aed69e6
    • refactor(testimonial): adjust to volto design | fix avatar image size 546070e
    • refactor(Quote):rename Pullquote component to Quote 9384a0c
    • refactor(Quote):rename Quote.Metadata to Quote.SourceInfo dfae8b1
    • refactor(Quote): rename Author to Source 6d400f6
    • refactor(Quote):move Testimonial component under Quote folder e2467c2
    • refactor(testimonial): readjust rounded card b419334
    • refactor(Table):wrap table with semantic ui container 24ac2bb
    • refactor(Testimonial):minor storybook bug fix 7b6d128
    • refactor(Callout): wrap story with semantic ui container ead362d
    • refactor(quote): update action name to match the functionality caf2e35
    • refactor(table): add borders to responsive table with celled attribute 8a71a67
    • change(table): make use of headerSortableWhiteSpace variable fd836fb
    • change(table): use the @mobileLandscapeBreakpoint for max 480px media query 90880ab
    • refactor(Quote):rename pullquote to Quote in Testimonial f54da19
    • refactor(Testimonial): change card class name e995c32
    • refactor(Testimonial): prettier changes 904594b

    🛠️ Others

    • feature(tokens): added tokens folder for design tokens we can use in the system a542172
    • perf(lint): fix f2ef3ab
    • Release 0.3.0 8724b28

    0.2.4 - 2022-05-13

    💅 Enhancements

    • change(segment): brought back overrides from pastanaga into our theme 14efd02
    • change(container): removed padding from containers restoring thus the defaults c2ed813
    • change(grid-story): added container as grid width is influenced by container width 459f481
    • change(breadcrumb): removed padding from breadcrumb added by container c5df567
    • change(container): modified all outputted widths to align to grid 9f29cef
    • change(breakpoints): restore Semantic UI breakpoints, adding extra needed values e7f5b1e
    • change(container): restore maxWidth to 100% now that the last value is 1120px 8b55c58
    • change(header): wrap header globalnav links useful for editing section 10d4f56
    • change(breadcrumb): added vertical variant to the breadcrumbs like we do in Volto f405f84
    • change(breakpoints): added also contentBreakpoint for backward compatibility b6c9212

    🛠️ Others

    • [JENKINSFILE] Add failure comment, no jenkins fail c325bf1
    • prettier changes 134da52
    • [JENKINSFILE] format PR comments 739438c
    • [JENKINSFILE] mention comment author in comment 39a26aa
    • [JENKINSFILE] remove debug, add error per stage 903eecd

    0.2.3 - 2022-04-29

    🚀 New Features

    • feat(CallToAction):add feat call to action ab53642

    💅 Enhancements

    • refactor(button): add container to stories 6c02c19
    • refactor(tab): update vertical tab columns and content b473fab
    • refactor(call to action):render call to action with Button as="a" e7dfabf
    • refactor(button): update inverted button colors c822021
    • refactor(Tab):scrollbar change in mobile & vertical tab fix 0e34cbf
    • change(banner): added icon class to share icons 48e866e
    • refactor(Button): move button to forms folder 94996fc
    • refactor(Tab):minor change in secondary pointing menu variables 280b6c4

    🏠 Documentation changes

    • docs(button): import call to action stories e4eed44

    0.2.2 - 2022-04-22

    🐛 Bug Fixes

    • fix(publicationCard): restore line endings 582859e
    • fix(form): added back overrides from Pastanaga theme a3f7ff8
    • fix(OrderedList) : add list only if sub list exists 8acbc8d
    • fix(label): update highlight label color d55bbb0
    • fix(publication card): run prettier 81a5bfc
    • fix(avatar) : fix naming convention for arg 84fc5fa
    • fix(tab): restore mobile font sizes 58f39be
    • fix(addForm): add min height to add form and fixed block chooser overflow ca4415d
    • fix(OrderedList): adjust margins to fourth sublists 663d384
    • fix(dropdown): being hidden because of third party css 7d353df
    • fix(modal): overflow hidden as clearfix of last child from modal b4923f5
    • fix(RelatedContent):fix merge conflict adc34bf
    • fix(button): labeled class needs to be placed after left or right keyword 53d1204

    💅 Enhancements

    • refactor(card): prettier fixes e10e3d6
    • refactor(card): add card variations e16d05b
    • refactor(card): remove stories 0deb0ca
    • refactor(card):delete primary and secondary card stories 1f95d22
    • refactor(Avatar) : remake avatar as card variant ea77cdd
    • refactor(card): add styles for card variations 7407bd3
    • refactor(storybook): add story with related content inside of a tab dca008a
    • refactor(card): Rename variables from avatar to rounded be01316
    • refactor(avatar): update less variables and layer structure f965db1
    • refactor(PublicationCard):remake publication card to be a semantic card variation 5a0c6ab
    • change(button): simplified button styling fe892d6
    • change(button): simplified storybook naming and examples 9a7df4f
    • refactor(Avatar) : convert avatar component to card variation 2004a94
    • refactor(Related Content): change in grid and add see all button 955450e
    • change(button): added back button.overrides from pastanaga theme 3b55acb
    • refactor(card): add card class control 68c91a9
    • refactor(card):delete publication card variables & overrides files 6be8a03
    • refactor(OrderedList): rename TOC to Ordered List and add container to the story e00c4db
    • refactor(card): add card grid fluid story with no columns f38251c
    • refactor(list): remove horizontal control 1f5e576
    • refactor(avatarGrid): update less variables and layer structure db554a8
    • refactor(Related Content):show button when there are more hidden cards 57ff1c8
    • refactor(RelatedContent):change to use new card variant instead of publication card component 7cf424a
    • change(breadcrumb): brought back pastanaga overrides to breadcrumbs bca1c93
    • refactor(card):delete publication card folder & story 68bf773
    • change(buttons): modified basic and circular variant behavior c06fed9
    • refactor(card):tertiary variation minor story update 87b8dca
    • refactor(DescriptionList): add container to story d647c1a
    • refactor(List):render ordered list with ol,li tags 87813c1
    • refactor(OrderedList) : change table of contents story to ordered list cb6197c
    • refactor(publicationCard): update tag and name variables c109ad9
    • refactor(UnorderedList): update list as ul, list items as li and add container to strory 2c096e1
    • refactor(card):organize controls and minor bug fixes f3f6e35
    • refactor(less variables): publication card style changes c5a84e9
    • refactor(less variables): add less to related content e1a5543
    • refactor(RelatedContent):delete publication card component 2ed0ed4
    • change(button): basic button is again without padding, border and background 5a907c7
    • refactor(PublicationCard):remove link wrapper 5911a0d
    • refactor(less variables): change publication card height per viewport d7a5256
    • refactor(Timeline):change timeline icons b2fe0bf
    • refactor(publicationCard): replace px with rems 53bf8da
    • refactor(Related Content): change in related content grid bf856ce
    • refactor(List):render description list with dl,dt,dd tags ec669a7
    • change(button): show only labeled variant for buttons with icons bf49944
    • refactor(card): import image for rounded card ca5a47e
    • refactor(progress): add container to story dfb33bb
    • refactor(storybook): add publication card story with different description sizes 23af97b
    • refactor(List):render default list with dl & dt tags ece2280
    • refactor(storybook): add publication cards stories with longer description 37adefa
    • change(button): basic icon buttons no longer have box shadows c2f3ea3
    • refactor(card): remove story afc5f79
    • refactor(less variables): change card description line number per device 6946fda
    • refactor(card): update rounded card image path 8db3a85
    • refactor(DefaultList): add container to story f971193
    • change(button): bumped z-index of sidenav expand button 445ed8a
    • change(progress,label): color accessibility fixes #151 09cf6e3
    • change(button): text button now has an underline with a focus border like other buttons cdd9043
    • refactor(card): update card variation grids path 756589c
    • refactor(card): minor fixes 3a880d7
    • change(button): primary color is blue and secondary is green 53e0a0c
    • refactor(List):change styles to match with the tags lists are rendered 2673890
    • refactor(progress): update colors for accessibility ea2f454
    • refactor(card): move avatarGrid & relatedContent to Card folder 1959d52
    • refactor(Timeline): change storybook timeline colors to fix accessibility issues 79da8dc
    • change(segment): restore light grey background color for secondary segments 8716b08
    • refactor(relatedContent): adjust column paddings 8a1520d
    • refactor(storybook): clear up code 3ada154
    • refactor(card): use the rounded class for avatar grid 8c000f3
    • refactor(card) Update rounded card class 140b587
    • refactor(avatar): add variable for image border radius c23341c
    • refactor(label): add container to story 565101f
    • refactor(progress): update value color for accessibility error 6fc76f8
    • refactor(card):use jsx extension 413d328

    🏠 Internal changes

    • chore(Avatar) : add container to stories 41b748c
    • style(OrderedList): prettier fixes ed95e4d

    🛠️ Others

    0.2.1 - 2022-04-08

    🐛 Bug Fixes

    • fix(version): Switch to 2.0.0.alpha.1 83b8b8e

    🛠️ Others

    • cleanup(loader): Remove useless HTML d1d180c

    0.2.0 - 2022-04-04

    🚀 New Features

    • feat(card) : add new default card color-schme 965adea
    • feat(label): Handle slate links and footnotes f382431

    🐛 Bug Fixes

    • fix(buttons,toggles): border and background color when active 147629 #139 ea36f31
    • fix(checkboxes): background color when they are toggles 4b6ab67
    • fix(buttons): border set on basic buttons appearing on svg elements of Volto UI 69ca73f
    • fix(label): Zotero/Footnotes inside label 0ee4d58
    • fix(card) : add control for image url in storybook b28e530
    • fix(less variables):change font family e4bca9e
    • fix(storybook):minor bug fix 9fc53bc
    • fix(tag): fixes merged theme config eb30363
    • fix(Banner): prop types fix a270e5b

    💅 Enhancements

    • refactor(tag): splits Tags component to TagList and tag, changes default tags style 78a5f8c
    • refactor(Banner):add banner share pop up in banner story c9688b2
    • refactor(tag): remove classes and actions that add background color ce9b6f9
    • refactor(Banner):change banner's image wrapper implementation 9153dd1
    • change(package): bump release version to 1.10.0 7e984c1
    • refactor(card): align cards and images, update less variables d47c978
    • refactor(card): add class inverted for default card 919a56e
    • refactor(tag): changes component name e1db068
    • refactor(tag): changes color metallicBlue to bottleGreen e4b68ac
    • refactor(less variables): change tag list mobile view fcded3d
    • refactor(tagList): update story to not use tag color classes 8b5b61b
    • refactor(Banner):minor bug fix ff8c352
    • refactor(Banner): add metadata field sub component 327b7e7
    • refactor(banner): add and adjust remix icon for banner action 1bf3ffa
    • refactor(banner): replace px with rem and adjust share popup padding a568329
    • refactor(Banner):add type class to metadata field and apply styles to it 86a2866
    • refactor(less variables):change tag list styles 8670087
    • refactor(banner): share items display flex on desktop 3ff8684
    • change(banner): added background gradient, share popup, metadata show and hide #136 2f5dcca
    • refactor(banner): update gradient 570ee1e
    • refactor(tags): removes hardcoded ':' ea58e86
    • refactor(card): remove card border bc77739

    🏠 Internal changes

    • style(card) : add lint and prettier changes 9d9a773
    • style(tag): remove comments 501fcdf
    • style(tag): stylelint and prettier changes 08b6386

    🛠️ Others

    0.1.9 - 2022-03-25

    🚀 New Features

    • feat(all): 1.9 release #124 0d3f6fb
    • feat(callout): Align volto-slate callout with blockquote style 9e0bb49

    🐛 Bug Fixes

    • fix(inpageNavigation): restore hidden on top functionality c554e6e
    • fix(list): Fix TOC margin on 3rd level f17da79
    • fix(inpageNavigation) : add smooth scroll animation 42f6564

    💅 Enhancements

    • refactor(footer): update visual and mobile margins 64f05af
    • refactor(header): restore union dropdown after implementation a7029c5
    • refactor(pullquote): adjust to the new figma design 78e4606
    • refactor(breadcrumb): adjust font sizes and import remix divider 5fcabaf
    • change(header): use viewport width for changing mobile text in header dropdowns 5a7868e
    • refactor(inpageNavigation): adjust to the new figma design 4073acf
    • refactor(tab): add max width for tab items 366d279
    • refactor(less variables):change pullquote styles 9ad94bb
    • refactor(Pullquote):change quote positions and add Pullquote.Metadata sub component 6bce35f
    • refactor(inpageNavigation): Update to remix icons 19a6061
    • refactor(inpageNavigation) : move icon & text to be in column 0953910
    • change(breadcrumbs): modified breadcrumbs template to behave like breadrumb template 490a559
    • change(package): bump release version to 1.9.0 43a6e4b
    • refactor(breadcrumb): adjust font sizes and import remix divider #120 09a3a01
    • change(menu): modified secondaryPointingItemMaxWidth to a value that equals to 250 ea138a1
    • refactor(pullquote): introduce meta section, use remix icons, integrate slate callouts #119 fd740c9
    • refactor(footer): updated visuals and gradients #117 e5c6d18
    • change(scrollToTop): feature inpage navigation revamp #121 3cf20a8
    • refactor(footer): update visual and gradient 764ec23
    • change(header): use 12px font size for mobile resolution dropdowns 6dad0fa
    • change(nav): added navDepth to 3 in order to enable mega menu integration c4f73fd

    🏠 Internal changes

    • style(inpageNavigation) : lint changes 3641d78
    • style(inpageNavigation) : add less variables 0699c70
    • style(pullquote): create variable for icon font size fea9b0a
    • style(inpageNavigation) : add lint & prettier changes f8dd012
    • style(inpageNavigation): remove comment 1aee011

    🛠️ Others

    0.1.8 - 2022-03-18

    🐛 Bug Fixes

    • fix(card): avoid long links from spilling outside of card body area 95b8951

    💅 Enhancements

    • change(typography): set heading sizes as detailed in docusaurus typography section 189bf20
    • change(docusaurus): content tweaks, inpage navigation section #112 b62d1b1

    🏠 Internal changes

    • chore(docusaurus): fixed grid tablet breakpoint value c7fbc09

    🏠 Documentation changes

    • docs(docusaurus): capitalization remove bf8fa44
    • docs(docusaurus): update 1c04976
    • docs(docusaurus): comment address on pr 112 6e4fe3b
    • docs(docusaurus): color minor update 13f9fda
    • docs(docusaurus): tabs and breadcrump update d0547e5

    🛠️ Others

    • doc(colours): add more content ec66248
    • Add divider content for metadata field in Banner f1e34bd
    • Release 1.8.0 fd6ba04

    0.1.7 - 2022-03-15

    🚀 New Features

    • feat(less): add global gap sizes 3c83f20
    • feat(icons): import remix css 29967fb

    🐛 Bug Fixes

    • fix(menu): fix border overflow for tabs and pagination e88721f
    • fix(accordion): responsive and accessibility issues c225935

    💅 Enhancements

    • refactor(menu): update paddings for tabs and pagination 533a509
    • refactor(accordion): import semantic icon for remix arrows 9aa77d8
    • refactor(all) icons, accordion, button and menu itml #108 52ed2ca
    • change(storybook): segment stories now contain several elements 98a7654
    • change(table): inherit header alignment instead of hard-coding values ebb5193
    • refactor(icons): add remix icons c4c1a92
    • refactor(container): restore mobile width to auto 2df184c
    • refactor(button): update action button hover color bb09d71

    🏠 Internal changes

    • chore(docusaurus): docs delete 5f9d733

    🏠 Documentation changes

    • docs(colors): corrections da64c4c
    • docs(list): default list showcase 8ded062

    🛠️ Others

    • bug(form): input min-width more specific to not break volto interface 3f5b5d4
    • Update package.json 3dba28b

    0.1.6 - 2022-03-11

    🚀 New Features

    • feat(cards): add custom display for volto-block-image-cards 645096a
    • feat(PublicationCard):create publication card component & styles 3e5f9b7
    • feat(PublicationCard):create publication card component & styles 12cdd5d
    • feat(Related Content): create Related Content component 77eda95
    • feat(Related Content): create Related Content component 08d495b
    • feat(pagination,related) added several r3 components #105 08d47c1

    🐛 Bug Fixes

    • fix(Related Content): limit publication card number to 4 e7df032
    • fix(less variables):rename publication card variables 55c6fb8
    • fix(Publication Card): add link to card and arg name fix 36a7c96
    • fix(radio): fix bullet scaling issue with firefox 5f02c95
    • fix(radio): fix bullet scaling issue with firefox dbb2e27

    💅 Enhancements

    • refactor(form): remove custom classes and add container to form items 6b5442a
    • refactor(form): remove custom classes and add container to form items d1ec083
    • refactor(form): update form wrapper component a719576
    • refactor(form): update form wrapper component 0736ec7
    • refactor(form): adjust form items to volto theming 4213cfb
    • refactor(form): adjust form items to volto theming 374ffbc
    • refactor(breadcrumb): remove custom class anf and new variables b3cb83d
    • refactor(breadcrumb): remove custom class anf and new variables d5808ad
    • refactor(storybook): clear up unnecessary form elements controls f7e7d5b
    • refactor(storybook): small change in unordered list story 3ffd872
    • refactor(storybook): small change in unordered list story 6ce16e9
    • refactor(pagination): fix menu overrides for tabs that affects pagination fe8c4ca
    • refactor(pagination): fix menu overrides for tabs that affects pagination 3f4b726
    • refactor(Loader):remove image & add background image 70fe041
    • refactor(Loader):remove image & add background image ac38126
    • refactor(list): remove selection control a09b179
    • refactor(list): remove selection control 17bf710
    • refactor(storybook):unordered list minor change df2b727
    • refactor(storybook):unordered list minor change ef6db73
    • refactor(colors): remove metalic blue color b2f95b6
    • refactor(colors): remove metalic blue color 1eea33f
    • refactor(button): update variables b1774d8
    • refactor(button): update variables 061f3e3
    • change(blockquote): treat slate as a variation of blockquote component 19bd9a5
    • refactor(container): remove important from rules e984771
    • refactor(storybook):add textarea control to add/remove fluid class 475f540
    • refactor(container): remove important from rules 1cc6984
    • refactor(storybook): add required attribute to form fields fecee27
    • refactor(progressBar): update progress bar colors with vars c4ef1f0
    • refactor(progressBar): update progress bar colors with vars a44d73c
    • refactor(storybook): add required attribute to form fields 21da79e
    • refactor(list): adjust bullet size 2b29e4e
    • refactor(list): adjust bullet size 61c341c
    • refactor(statistic): add inverted background to global variables 1427e70
    • refactor(statistic): add inverted background to global variables ea25dfa
    • refactor(statistic): remove custom class 46cc560
    • refactor(container): update mobile width d548a44
    • refactor(grid): replace px with rem units e792f51
    • refactor(statistic): remove custom class b5c8e7c
    • change(docusaurus): updated template to change what's new title 3e15f4d
    • change(footer): added display variable for footer site logos d5b3c2f
    • refactor(grid): replace px with rem units f0331d0
    • change(github): auto deploy only on develop branch 11d6b4e
    • refactor(header): implementation in preparation for Volto integration #20 #89 95b136d
    • change(github): trigger autobuild when modifying templates contents 46094b1

    🏠 Internal changes

    • style(list): prettier fixes f9e3b05
    • style(list): prettier fixes 8eb715b
    • chore(github): merge changes from develop to develop-itml 063bd6e
    • chore(github): build deployment only on develop branch a5a1b08
    • chore(github): build deployment only on develop branch bb455aa
    • chore(github): merge changes from develop to develop-itml 129c12f

    🛠️ Others

    • Revert "chore(github): merge changes from develop to develop-itml" ca9520f
    • refactor breadcrumbs component, make it functional and customizable e902d69
    • rollback(cards): move custom display to volto-block-image-cards 2564b1e
    • bring back segment wrapper and make it attached 8458f03
    • no display: flex for blockquote added from slate 5595ce1
    • Add rule about code length a5f3652
    • Add indenting rule 15c44cb
    • fix warning related to proptype 946c6c6
    • fix profile section css overflow db5126f
    • Add rule about import sorting 804e188
    • don't use volto-slate 6a02976
    • remove segment custom width 1d3ea40
    • Add rule about naming vars 8f9020f
    • update style for accordion title 0b0d678
    • Release 1.6.0 e771e65
    • update bbcab87
    • add margin to <br> element to simulate gap as in design c6685c1
    • make breadcrumbs default size as tiny 589581f
    • remove uneeded style 82a8fb1
    • Add rule about hardcoded values e04e0df
    • Add file mode rule 65c9a93
    • Add DRY rule 66c9c3a
    • set profile section overflow to auto 71ab47f
    • Add Sonarqube tag using eea-website-frontend addons list 647a6e3
    • removed override already present in card.less 50d2ab2
    • update 7a1d482
    • Add functional components rule; add classnames rule 91a0b06
    • added comment about need for removal of this fix later 65b8166

    0.1.5 - 2022-03-08

    🚀 New Features

    • feat(cards): add custom display for volto-block-image-cards f49ffb6
    • feat(KeyContent): add new component 2534c54
    • feat(docusaurus): Updated developer guidelines ca146ff
    • feat(storybook): add testimonial component 55d9747
    • feat(storybook): add AvatarGrid component b668445
    • feat(storybook):add Loader component f675834

    🐛 Bug Fixes

    • fix(breakpoints): fix largest screen breakpoint bug on scaling e4a11c8
    • fix(profile): section css overflow and padding issues #95 bb9eb0f
    • fix(storybook): lint auto changes for AvatarGrid b8e74f1
    • fix(components): add grid structure to various components cc33546
    • fix(header) re-added span tags removed in pull request #74 00702d7

    💅 Enhancements

    • refactor(button): styling updates 37afda5
    • refactor(tab): updates on variables and overrides 54bf703
    • change(blockquote): treat slate as a variation of blockquote component 5e8a8b8
    • change(footer): added display variable for footer site logos 2f942b4
    • refactor(checkbox/radio): remove header from message and adjust top position of bullet 4a072b3
    • refactor(color): remove secondaryColorDarken variable 74c8ba0
    • change(docusaurus): updated template to change what's new title 58f58c8
    • change(github): auto deploy only on develop branch bfa35a3
    • refactor(header): implementation in preparation for Volto integration #20 #97 cddda20
    • refactor(breadcrumbs): component, make it functional and pluggable #32 #94 9f42e80
    • change(card): added styles for volto cards integration #92 a46ac21
    • refactor(grid): remove column count from example ac0e9cf
    • change(github): trigger autobuild when modifying templates contents 5f7d152
    • refactor(grid): remove custom grid 1d978a9
    • refactor(Form):change form field wrapper implementation 73cdd6d
    • refactor(message): update colors to match design 633ce31
    • refactor(checkbox/radio): update variables and remove important rules ad533b4
    • refactor(less variables): add variables to less for new components 47df026
    • refactor(Tab): fix vertical tab alignment 401bdf2
    • refactor(lint changes): add lint changes 6f6847f
    • refactor(inpageNavigation): adjust to volto theming 62f74ea
    • refactor(message): updates on styling b4cf850
    • refactor(banner): update class name ef0969b
    • change(github): use develop for auto pushing a32a723

    🏠 Internal changes

    • style(design-system): unix eol 631fa90
    • style(checkbox/radio): prettier fixes a04939f
    • style(design-system): unix eol 3c753f0
    • style(message): stylelint fix 5b75057

    🏠 Documentation changes

    • docs(docusaurus): visuals guidelines 544a950
    • docs(docusaurus): search guidelines 0fb229d
    • docs(docusaurus): loader page 892a25d

    🛠️ Others

    • Reformat header.less 1f99dfc
    • Close menu when changing path 65daea9
    • refactor breadcrumbs component, make it functional and customizable 4ec374e
    • rollback(cards): move custom display to volto-block-image-cards 79d4c89
    • Open overlay menu on global menu click cc749bc
    • bring back segment wrapper and make it attached 9f413ff
    • Use renderMenuItem also in mobile menu 02de0bb
    • Fix clicking outside closes menu af52664
    • Cleanup args in header story 2bf6a30
    • fix warning related to proptype 824b9be
    • fix profile section css overflow 8fd2654
    • don't use volto-slate 70ca3d4
    • remove segment custom width 4a60d84
    • update 96f4af0
    • Fix TopDropdownMenu component rendering in mobile a4626de
    • Add usePrevious hook 797faba
    • make breadcrumbs default size as tiny 3c8e1c6
    • Update package.json fa020cb
    • Add rule about hardcoded values 0c6912c
    • set profile section overflow to auto 8db62bb
    • added comment about need for removal of this fix later 6fdbd71
    • Add Sonarqube tag using eea-website-frontend addons list 6051724
    • removed override already present in card.less 93c4e5a
    • Remove console.log calls 8a3a4cb
    • update 81bb7d4
    • Update comment ffa2400
    • merge develop into this branch ad5b388
    • WIP a8d97f1
    • Use header.less from develop branch 99edbc6
    • WIP 57b5783
    • WIP 785da36
    • WIP 5d1eba9
    • adds Tags e37fc19
    • Add useClickOutside hook 70364c8
    • Implement outside click handling fa6f818
    • Simplify overlay menu template 28b0478
    • fixes less variables, fixes tags positioning cc19b9b
    • WIP 15bc0f4
    • no display: flex for blockquote added from slate 312a893
    • Add rule about code length 318cd48
    • Add indenting rule d589685
    • Add rule about import sorting cd337c1
    • Add rule about naming vars b112de0
    • Bring back classNames from header subpopup e477a51
    • removes tags hashtag from jsx 6b8b3e9
    • WIP d481324
    • fixes undefined on empty classes 4b29080
    • stylelint changes a5ab830
    • Footer link color @white 578e4f7
    • add margin to <br> element to simulate gap as in design 9ab9a97
    • impors colors from site variables 6117267
    • small fix for the link in footer action 72df049
    • remove uneeded style 66e9064
    • use proper naming conventions for var naming 596e314
    • Add file mode rule 805baa7
    • use less variables b43ac8d
    • Add DRY rule 2f1584e
    • Add functional components rule; add classnames rule 1b2915e
    • fix z-index of header 7d2a5d6
    • Remove comment 7d120b1

    0.1.4 - 2022-03-01

    💅 Enhancements

    • refactor(pagination): adjust to volto theming 06cc3b6
    • refactor(Form):create form field wrapper file 95b9934
    • refactor(megaMenu): update margins for menu items 230e476
    • refactor(megaMenu): update gradient 47f2ea4

    🏠 Documentation changes

    • docs(docusaurus): divider page c6bb238

    🛠️ Others

    0.1.4-beta.0 - 2022-02-25

    🚀 New Features

    • feat(github): added feature and bug reports templates with our guidelines as checkboxes 1549093

    0.1.3 - 2022-02-25

    🐛 Bug Fixes

    • fix(all): change eol to unix 62e7224
    • fix(banner): separate url value f9c9140
    • fix(all): merge eol c68f6e0
    • fix(blockquote): align self property now uses a valid entry ec76163

    💅 Enhancements

    • refactor(megaMenu): new implementation ff013af
    • change(volto): removed customizations made for ims theme from volto-eea-design-system bc8d514
    • refactor(Timeline): divide to sub components and change files to .jsx 3e2bd3b
    • refactor(header): update variables 4e5d08d
    • refactor(Header): link header's menu to mega menu 08406d8
    • refactor(Menu): change mega menu implementation 455a51b
    • refactor(Grid):minor changes and delete extra files 272585d
    • refactor(timeline): adjust to volto theming b98641a
    • refactor(megaMenu): fix link hover issue for tablet 564e972
    • refactor(header): add remix icons and minor updates c9c97dd
    • refactor(Header): change header buttons implementation 6608b8c
    • refactor(Header): add sub components and change existing Main 74c35a3
    • refactor(table): adjust to volto theming ab7a0e8
    • refactor(Footer): delete Actions & ThemeSites files and clear imports 7a78456
    • refactor(header): update variables 326655a
    • refactor(Breadcrumb): add react router link and minor bug fix 073a3a3
    • refactor(Header): show menu on search & minor bug fix 4d49a8a
    • refactor(List): add extra default list story 95665cd
    • change(docusaurus) change generation of what's new section and bump package version 6c35cff
    • refactor(Footer): minor code changes 67cb4bc
    • refactor(Menu): add class to mega menu items for styling 19baa34
    • change(accordion): modified default accordion stories titles with real accordion names cf11cc8
    • refactor(Header): accessibility image alt fix a7347a6
    • refactor(header): adjust to volto in progress 760beca
    • refactor(Header): header items as storybook arguments 388c752
    • refactor(banner): update less variables 35b0a98
    • refactor(banner): actions as buttons; don't hardcode url for banner image; subcomponentize Banner, add Banner.Action; add developer guidelines on inline styles and line endings; 6dd5a41
    • refactor(blockquote): fix responsive margins and sizes rems 209f94f
    • refactor(Input): label position and style change 970074a
    • refactor(header): update dropdown menu 32eb0fa
    • refactor(timeline): theming updates c80c9aa
    • refactor(Blockquote):remove image stories a6357ca
    • change(docusaurus) proofread blockquote usage section and removed unused api section 0bb29fd
    • change(infrastructure) cherry-pick fix 9639243 skipping jenkins on auto commits fc744cd
    • change(ci) build storybook and docusaurus only when pushing to develop-itml branch 4de0cbf
    • change(infrastructure): modify whats new doc when committing the auto deployment 39df33e
    • change(blockquote): introduce float argument for blockquote with image storybook 8fc7290
    • refactor(pullquote): add word break 2245e53
    • refactor(Banner): minor bug fix b9073b6
    • refactor(table): fix th font weight a96a0a7
    • refactor(comment): remove avatar border radius d42c37b
    • refactor(banner): adjust title size 7a24d9c
    • refactor(Image): change image path a580da6
    • change(infrastructure): specify that docs folder contains changes for deployment a1ca915

    🏠 Internal changes

    • style(input) prettier fixes e83fa0c
    • chore(storybook): prettier fix 354c7b3
    • chore(design system): technical commit for edw integration tests 9f76035
    • style(storybook): prettier fixes 3c9ad34
    • chore(infrastructure) updated branch with changes from bitbucket 77866f8

    🛠️ Others

    • doc(colours):fix color to better show primary ones 705b789
    • doc(colours):change font size to fit text in one line 4ad7516
    • bump package release to 1.3.0 f3cfe4f
    • Refactor banner into content subcomponent f8df238
    • lint fixes cda322d
    • rollback don'ts grammar change and disable unresolved import for Banner.stories.jsx a1bd715
    • Add space line in component d4d1a5f

    0.1.2 - 2022-02-17

    🚀 New Features

    • feat(blockquote) added blockquote styles as a custom module d30662e

    🐛 Bug Fixes

    • fix(inpageNavigation): hide at the top of the page 97ef500
    • fix(footer):missing image ac91a29
    • fix(comment):fix broken image 8125dc1
    • fix(message): fix font loading fdc498e
    • fix(logo): logo change 5f8c8af

    💅 Enhancements

    • refactor(storybook): multiple components fixes 4a3ff51
    • change(infrastructure) re-enable integration tests for auto release stack ce8daf8
    • refactor(storybook): global site files styling update f3770f1
    • refactor(storybook): multiple components 9277aac
    • refactor(footer) adjust to volto theming update a59f1c3
    • refactor(header): minor styling update dd6b55c
    • refactor(Header): change header mega menu 7559b57
    • refactor(banner): adjust to volto theming 451b949
    • refactor(accordion): minor styling update aeaf25f
    • refactor(footer): adjust to volto theming bdff176
    • refactor(footer):mobile responsiveness 14822be
    • refactor(storybook): main and custom less files update 1607760
    • refactor(timeline): update after removing timeline addon f54d380
    • refactor(Footer): replace with subcomponents 378c652
    • refactor(Header): header change 029e850
    • refactor(Header): change header bar 2b766fd
    • change(docusaurus) use itml branch for docusaurus deployment 6e286c5
    • refactor(accordion): adjust to volto theming 971fcb8
    • refactor(Header): add sub components 7f955db
    • change(docusaurus) tweak auto deployment to always commit changes from docs a2940da
    • refactor(banner): less and variables files created d5b1a8a
    • refactor(label): adjust to volto theming 3c945e1
    • refactor(message): adjust to volto theming 3e950fc
    • refactor(Footer): add sub components and props c3d1487
    • refactor(modal): modal and confirm adjust to volto theming 83b60e9
    • refactor(comment): adjust to volto theming 84348c3
    • refactor(storybook):adjust headings 32f64f9
    • refactor(Header): add comments to header menu c2c83b2
    • refactor(Accordion): clear up accordion stories code 4e59b8f
    • refactor(segmant): adjust to volto theming 3ab211e
    • refactor(button) minor styling update 8782bb2
    • refactor(banner): change image position cdd76d5
    • refactor(breadcrumbs): update less variables 640817e
    • refactor(list): adjust to volto theming 1079c73
    • refactor(timeline):adjust timeline module 213eb11
    • refactor(blockquote):adjust to volto theming 5eec87f
    • refactor(progress): add progress bar colors ccf3c98
    • refactor(pullquote):adjust to volto theming fee4466
    • refactor(Header): change mobile mega menu c7ecf18
    • refactor(statistic): adjust to volto theming b726e49
    • refactor(button) adjust to volto theming eb257f8
    • refactor(form): minor styling update 79934b2
    • refactor(Footer): create Actions & Sites sub components 446840b
    • refactor(inpageNavigation): adjust to volto theming 85c631a
    • refactor(Inpage Navigation): changed button's display 36e5b4f
    • enhancement(docusaurus) modified headings to be within release versions 19ace30
    • refactor(storybook): move components to ui folder cb91f88
    • refactor(Header): change mega menu de0fc6b
    • refactor(Pullquote): divide Pullquote to sub components 34413c4
    • enhancement(docusaurus) replace changelog when auto-building docs Refs #145331 da25c0e
    • refactor(popup): adjust to volto theming d0d192d
    • refactor(card):adjust to volto theming 2ab6f91
    • refactor(item): adjust to volto theming 89a16af
    • refactor(pullquotes) remove unnecessary variables e0d20a3
    • refactor(progress):adjust to volto theming d1ab950
    • refactor(blockquote) change variables names 36fd5be
    • refactor(comment): adjust font sizes 0311ed1
    • refactor(InpageNavigation): clear up code 1d7afdc
    • refactor(container): change variable name for computer padding 26d123f
    • refactor(inpageNavigation): remove imports 25c1d1c
    • refactor(storybook): update ui index components exports ce78d47
    • change(infrastructure) auto build storybook when pushing to develop-itml branch of volto-eea-design-system e9aa5bc
    • refactor(storybook): delete demo stories 8b58d02
    • change(docusaurus) align deployment steps for building docusaurus 37e4ce0
    • refactor(storybook): remove components from customizations folder 8930ede
    • refactor(tab): minor styling update 1252ad0
    • refactor(comment): change avatar src e5f9c4c
    • refactor(banner) : change file type and folder 878742b
    • refactor(form elements):changed text 919beea
    • refactor(Image): change image src b971084
    • refactor(Pullquote): add component propTypes d32c5e6
    • refactor(blockquote): adjust font sizes d71a3ce
    • refactor(footer): update font sizes 1c91c35
    • refactor(Blockquote): add component proTypes ea02649
    • refactor(logo): update image f611372
    • refactor(docusaurus): restore config f2c5239
    • refactor(blockquote): update component name 572e655
    • refactor(header): fix story header import ceda6c7
    • change(infrastructure) auto build docusaurus when pushing to develop-itml branch 7bebdf5
    • refactor(storybook): remove components from customization folder 4a9bb9b
    • refactor(banner):story rename 56ff603
    • change(testing) removed navigation from cypress tests until component is finished 5549f4c
    • refactor(Segment): change to .jsx extension 5cb35d8
    • refactor(Pullquote): change to .jsx extension 564cf7e
    • refactor(PopUp):change to .jsx extension dcb24ff
    • refactor(InpageNavigation): change to .jsx extension dfefce3
    • refactor(Blockquote): change to .jsx extension 44a1645
    • refactor(heading): story name update aa10f34

    🏠 Internal changes

    • style(footer): prettier fix 902c257
    • style(storybook): prettier fixes 59f941d

    🏠 Documentation changes

    • docs(docusaurus):multiple page updates 2aba73e
    • docs(docusaurus):update page content 565697f
    • docs(grid):update components grid 60eb083
    • docs(docusaurus): page adjustments 0641eac
    • docs(docusaurus):updated various pages f860176
    • docs(docusaurus): logo change 3af5e5c

    🛠️ Others

    • added sortable table stories and descriptions 6d44dd7
    • Layout components theming 5861013
    • recovered files from origin a4ac04f
    • grid component & stories changes 4a5752e
    • Updated what's new section with actual commits from volto-eea-design-system repo fc5e3c3
    • Docusaurus title possible fix. db699e7
    • form elements stories added description & default values 6b4f6eb
    • removed API tabs 58aa928
    • Layout updates 854f388
    • Refs #142123 removed extra customization of semantic.less: ab9de81
    • added page-header,footer and grid in docusaurus 660c8e3
    • Manual docs build and commit 666eb6a
    • added svg & png files f1338d5
    • added missing components to docusaurus 934dfd8
    • Control descriptions updated 56581eb
    • Grid updates 700332d
    • Button theming update 0ec68b6
    • site variebales & overrides changes 7251162
    • Table and Tabs theming 49f0860
    • Responsiveness updates 48e1351
    • added various components to docusaurus 550d719
    • Checkbox and radio updates 24652a2
    • remove images from typography and colour docs 8493e92
    • added guidelines' text and finished all components 02d75fc
    • added more missing components in docusaurus 8be8263
    • Prettier changes on docusaurus 5f1e5eb
    • Grid updates ae09945
    • Minor fixes for tests 3bdf306
    • Layout updates 8b7a4dc
    • Footer and TOC theming bb3d3c4
    • Refs #145331 manually commit changelog until autobuild is stabilized 93168b0
    • label component changes df8c0ff
    • added several sections to the theming guidelines ff1a649
    • Updated removed files. 84f9b8c
    • added more docusaurus components 52a3b9e
    • Progress Bar 9f2efc9
    • Modal and Confirm updates 3b306c6
    • Add proper changes to whatsnew meant in previous commit 40f78e3
    • Form Descriptions de0dfbc
    • Prettier fixes 1337e6f
    • Deleted files b82f982
    • add new images for spacing 7b7b2c4
    • Messages Theming ad621a3
    • added new content to docusaurus 1c83452
    • Minor less updates a36a8bb
    • Tabs and lists updates e37eef1
    • Inpage nav and timeline components 76f0f82
    • Prettier updated files 679b9d2
    • dropdown initial d8aef26
    • Prettier changes f068af0
    • List initial 6d3b969
    • List story updated e96a6f6
    • Statistics updates 74bf639
    • styling c169cc0
    • timeline comp storybook changes 1f42686
    • feature(docusaurus) added theming guidelines ded1f04
    • Properly commented out integration tests. 48b3a15
    • Reattempting commented out integrations tests. 3dd8211
    • Button theming 4231e1c
    • Card initial 06dace5
    • form element storybook changes c4b06aa
    • Pagination theming 2a80175
    • Accordion theming 8061bf9
    • global var updates and radio story 9526ee2
    • created pullquote component & stories df35563
    • Item stories added description & default values 9d459f2
    • storybook clean up code bffd326
    • List updates 28f1b53
    • Button classes updates 788c289
    • Prettier fixes 678c9be
    • Removed header title from partial docusaurus components. ed7c45e
    • created banner component and stories 9be170f
    • Breadcrumb stories description & defaultValue -- clean up code 186ab65
    • Refs #142123 added customization of semantic.less: 1e02356
    • Card stories added description & default values f6b408f
    • Statistic and accordion updates 16064ce
    • breadcrumb component & stories changes 5bceb98
    • Container initial 3eb7155
    • doc(docusaurus):Fix text for various parts bfd3fa2
    • blockquote component & stories 879b640
    • Refs #143412 removed doc comments breaking doc building e6a6756
    • Popup updates ce2d641
    • Global variables for colors and borders added 6e5fbd6
    • Tab stories changes 5429cfb
    • Confirm stories added description & default value 85cda14
    • Kebab case class names b41cd07
    • Card and Comment class updates 3899465
    • Accordion updates c97ba39
    • item stories changes 772e41f
    • Accordion class updates 9cdde86
    • Comment stories added description & default value cb6f25b
    • Accrodion stories description & default value ab8fb88
    • Pullquotes updates c598421
    • Modal and confirm class updates 0ae47e6
    • Tab and paggination updates 96796ff
    • Form Updates e986a9f
    • Classes renamed 73c8c3d
    • List and item less updates ce0de17
    • Confirm theming 36e20ce
    • container overrides changes 4b3970b
    • Docusaurus theming fc4a8c5
    • refacto(headings): update mobile headings sizes b2e9f83
    • list stories and style changes c61db53
    • Tab theming e31e6c3
    • Message and pagination classes updates c230687
    • Segment initial d5724fe
    • Refs #143412 removed doc comments from api_markdown breaking doc building efeacba
    • Timeline and responsiveness updates 1ed1524
    • Refs #142123 use swap font-display for performance reasons 083738f
    • Breadcrumb stories minor changes 3d0d17c
    • Table component stories minor change 0bf4083
    • List stories changes a64b304
    • blockquote component minor changes cdf71a8
    • ckeckbox stories minor change 6d6e508
    • image component storybook changes 91290ec
    • button overrides changes d5b78dd
    • accordion overrides changes fdcf7d5
    • Accordion component and stories changes 5079247
    • Card theming 23bbb9d
    • statistic overrides changes 2b11cb5
    • Refs #143412 build docs only on pull request like we do with storybook 473bb87
    • Card component stories minor change | added link icon deb423a
    • comment component stories changes f1c5e75
    • Accordion component bug fixed 815e91d
    • Refs #145331 use iso date to release so that we see also time ceedf08
    • correct connfig for doco 93e1313
    • Item updates fae93d4
    • added layout grid 2e6be55
    • tab overrides changes 87aaf32
    • message overrides changes 6dccfca
    • segment storie changes 296371f
    • progress component stories changes df10c2e
    • message comp storybook changes c86b405
    • Accordion cmponent stories | minor bug fix 6de0d81
    • Refs #145331 add all changes when auto building docusaurus ce11cce
    • perf(timeline):removed semantic timeline package 0aeb34a
    • Tablet Breakpoint update b229c27
    • Refs #143412 set storyBook Url to eea.github.io b7fdecb
    • bump package version to signaling of a major release c835f1d
    • small commit to trigger deployment of storybook and docusaurus be46ea3
    • doc(accordion):revert previous change 3de02da
    • fix typo for caption @desktop line-height pixel number 1671552
    • Commented out integration tests. 574cfec
    • popup overrides changes a9555e3
    • container component stories fixes 692cfce
    • Added timeline to package json fixed f2e93e0
    • Refs #142123 modified import of volto-eea-design-system icon.less: a7fab7d
    • Refs #142123 reference icon.less from this package: 5616e6d
    • Menu component stories change 2797716
    • Image stories minor change ddb9f1d
    • card component stories changes 6ccba1e
    • Added timeline to package json 93031d6
    • table stories code clean up b7b2a56
    • Refs #143412 removed extra baseUrl from docusaurus config 79f36da
    • Accordion stories minor change ffe808a
    • Theme assets 3f4bea4
    • Merged with develop 167ec9f

    0.1.2-beta.2 - 2022-01-03

    0.1.2-beta.1 - 2021-12-22

    🛠️ Others

    • Tab component stories minor changes 4690a6f
    • Comment component stories minor changes a87cb6a
    • Form stories changes fc30c90
    • Grid component stories minor changes 798fdd0
    • Image component stories minor changes be93385
    • Menu component stories minor changes cb1f9a8
    • Dropdown component stories minor changes 57cf954
    • Header component stories minor changes 264fd46
    • Confirn component minor changes 9a00bc1
    • Item component stories minor changes 6994fa0
    • Label component stories changes 5cc5843
    • Container component stories minor changes e6e40b3
    • Message component stories minor changes ba9d377
    • Breadcrumb component stories minor changes ff7a176
    • Modal component stories minor changes af1fe6a
    • List stories changes 0016042
    • Button component stories minor changes 690dfd2
    • Radio component stories minor changes 84eac30
    • Progress component stories minor changes e676357
    • Pagination component stories minor changes b1af226
    • Segment component stories minor changes 5f8c7ef
    • Refs #143412 eslint fixes for component stories badcb91
    • Table component stories minor changes 7c104b8
    • Refs #143412 more eslint fixes a88c091
    • Refs #143412 warn for broken links instead of throwing bd5821c
    • Refs #143412 merge changes from develop-itml to develop branch bca28b9
    • made tabs dynamic for api tab ea37ecb
    • Basic storybook/Docusaurus components 840ab60
    • created List directory & srories based on semantic-ui List component 51f1901
    • made tabs as component easy to call for other components 07bae49
    • Popup Component | minor fixes 2ff9908
    • created stories for Tab component 95e3a73
    • created Table directory and stories based on semantic-ui Table component e16115d
    • List component stories - minor changes de11343
    • created stories for Comment component a20f884
    • created stories for Grid component 360d2a8
    • created stories for Image component 3c1d2bc
    • created stories for Menu component 17e3b37
    • Added untracked files 75f0afd
    • created Dropdown stories d6a2538
    • created Header component stories b833979
    • created stories for semantic-ui Confirm component 6fddccc
    • created Statistic directory and stories with semantic-ui Statistic component cd62498
    • created Item component stories 90ec2be
    • created stories for Container component 41934f6
    • created Label component stories 71732f6
    • created Message component stories adcbeab
    • created Modal component stories c25409d
    • Breadcrumb component stories and minor changes 6264d92
    • created Pagination component stories 57cdad3
    • created Segment component stories d8d01d7
    • created stories for Radio component 1fd062d
    • Menu stories minor changes 6ba5e0d
    • Statistic component stories minor changes 3c874a5
    • Card component stories minor changes 290bda8
    • Accrordion stories minor changes 2ee3f59
    • renamed Demo folder to Layout b9f6d05
    • remove test exclusion 94dba3e
    • Accordion component stories minor changes e672d59
    • fix docusaurus url (removed trailing /) b6c59fc
    • Item component stories - minor changes f0a9902
    • eea logos and assets b435b51

    0.1.2-beta.0 - 2021-12-18

    🛠️ Others

    • Refs #140454 added github action to build docusaurus to the develop branch abe6a72

    0.1.1 - 2021-12-16

    🛠️ Others

    • Refs #140454 changed the following to volto-eea-design-system: 6791d41
    • Refs #140454 corrected base url for docusaurus website build 98271b3
    • Initial test changes on design system/docusaurus. 9dad612
    • After prettier check 9ec40b4
    • Refs #140454 restore SearchWidget.jsx content and removed dummy text from docs intro page 7505df8
    • Refs #140454 added references to eea and the storybook in the docusaurus footer 42bbfcd
    • Refs #140454 lint fixes 9502f2b
    • Add SonarQube badges a4e0a40
    • Refs #140454 brought changes from develop-itml and upgrades docusaurus 207c873
    • Refs #140454 removed extra content not needed by the docusaurus site bc68ebe
    • Refs #140454 updated docusaurus to latest beta d68ed8a

    0.1.1-beta.0 - 2021-12-09

    🛠️ Others

    • Refs #140454 moved header and footer templates from volto-ims-theme: e2d5e56
    • Refs #140454 added website folder with docusaurus site skeleton 6fd15f4
    • Refs #142794 added commented implementation of the header and footer area: 773ad87
    • Refs #140454 changed the following: 4137ec4
    • Refs #140454 removed storybook from volto-eea-design-system: a129ffb
    • Refs #140454 added storybook as a dev dependency: e04ae4e
    • Refs #140454 updated Breadcrumbs.jsx to latest version: 63fe507
    • Refs #140454 we should use jsx and not mdx for storybook tests 3668e66
    • Refs #140454 updated eea-design-system readme with extra info on package contents d2efc3d
    • Refs #142010 - Optimize Volto-addons gitflow pipelines 3af46d2
    • Refs #140454 Renamed folders of docusaurus website: 15bca74
    • Add demo story 757c409
    • Refs #142794 enabled minimum css so that header looks decent adbe233
    • Refs #140454 use the develop branch for the readme linking, it's always more up to date 23dcf16
    • Refs #140454 added missing themes reference for the eea theme e9ca244
    • Refs #140454 modified assets imports after move to volto-eea-design-system 2250cc7
    • Load footer in segment 80d38a9
    • Refs #140454 bump package version to 1.1.0 from 0.1.1 from develop branch: 1314039
    • Refs #142794 keep toolbalWidth variables in case design system runs in an older version of Volto 1a8b305
    • Refs #142794 changed the following: fbb80b1
    • Refs #140454 moved storybook scripts to the scripts section 705c4c3
    • Refs #140454 removed dangling comma 514f24d
    • Refs #140454 changed link to the start of the docs 0e16fdf
    • Refs #140454 add h1 to the list of elements that are max 800px and centered 7d3c30f
    • Add Sonarqube tag using ims-frontend addons list 8d657d0

    0.1.0 - 2021-11-17

    🛠️ Others

    • Refs #140454 changed the following to volto-eea-design-system: 40d2af6
    • Refs #141204 elements folder now has the variables and overrides from pastanaga theme 595b4e6
    • Refs #141204 use font awesome from SemanticUI instead of Pastanaga: 4e273ca
    • Refs #141204 removed the components customizations from volto-eea-design-system: c98c260
    • Refs #141204 added customizations folder from volto-ims-theme to volto-eea-design-system: ff4bf44
    • Refs #141204 modules folder now has the variables and overrides from pastanaga theme f2841b6
    • Refs #141204 customized Comments.jsx to remove unnecessary container b2e95d7
    • Refs #132149 added initial commit for volto-eea-design-system: 2934b91
    • Refs #141204 collection folder now has the variables and overrides from pastanaga: 213d496
    • Refs #141204 removed search widget customization, we can use volto-ims-theme for that file b7e8b0c
    • Refs #141204 stylelint quick fixes 5595925
    • Refs #141204 changed the following: 769f4f9
    • Refs #141204 changed the following to the eea theme: 06d8d86
    • Refs #141204 eea site.variables now use all values from pastanaga's site.variables 6535c0f
    • Refs #141204 simplified container overrides: 5125003
    • Release 1.0.0 177d0ce
    • Refs #141204 globals folder now has the variables and overrides from pastanaga theme 116a0c3
    • Refs #141204 changed the following: 2e7f423
    • Refs #141204 modules folder now has the variables and overrides from pastanaga theme: 27a201d
    • Refs #141204 text elements are now with a max width and centered within content-area: bbed7bb
    • Refs #141204 added main.variables entries from pastanaga to eea theme 1cbbc55
    • Refs #141204 modified theme image imports for component customizations ef3238a
    • Refs #141204 modified container width to be auto: 2e8d2e0
    • Refs #141204 modified several icons to use the \f values instead of \e: c397145
    • Refs #141204 changed the following: c518eda
    • Refs #141204 ensure that main column isn't enlarged over the sidebar section on edit f7a2868
    • Refs #141204 changed the following to the form styling: eb92e05
    • Refs #141204 modified path of theme folder location for image selection f8cca45
    • Refs #141204 added missing mobileScrollbarWidth variables introduced as part of the mobile navigation pull request 444c78d
    • Refs #140454 reference font and image path from ~volto-themes instead of relative ec93ed3
    • Refs #141204 ensure that Volto doesn't crash when site module is set to eea: 51f2f27
    • Refs #141204 added tiny size prop to Breadcrumbs in order to have it as 12px 56a12e2

    0.0.1 - 2021-11-17

    🛠️ Others

    - +

    What's new

    All notable changes to this project will be documented in this file. Dates are displayed in UTC.

    Generated by auto-changelog.

    Unreleased - 2022-06-01T11:30:27.373Z

    🚀 New Features

    • feat(languageLabeledIcon) : add new component 110558e
    • feat(LanguageLabeledIcon):add new component d00200c
    • feat(newTabLabeledIcon) : add new component 8f5cd31
    • feat(labeledIconGroup) : add new component 787d648
    • feat(DownLoadLabeledIcon) : add new component 6ea2fa1

    🐛 Bug Fixes

    • fix(LabeledIcon) : fix lint errors 91b042f
    • fix(LabeledIconGroup) : fix links for tests daa1065
    • fix(LanguageLabeledIcon):bug fix & languages change 1436e2b
    • fix(LabeledIconGroup):fix based on Langauge & Download Labeled icon components changes 3015864
    • fix(newTabLabeledIcon) : add link item b1a9ada
    • fix(Labeled Icons):minor bug fix 00f3022

    💅 Enhancements

    • refactor(labeledIcons): adjust new tab labeled icon to figma and replace px with rems 904615d
    • refactor(LanguageLabeledIcon):implement with pop up 0f3dd8f
    • refactor(labeledIcon): add group wrapper in labeled icon stories 4b7dd31
    • refactor(DownloadLabeledIcon):implement with pop up aa61f9b
    • refactor(labeledIcons): adjust language labeled icon to figma 5741e3d
    • refactor(labeledIcons): adjust download icon to figma and replace px with rems 4ae8530
    • refactor(LanguageLabeledIcons):minor storybook change 78f5544
    • refactor(LanguageLabeledIcon): set language code to uppercase and minor storybook change ac28693
    • refactor(labeledIcon): adjust paddings 9c1ecdd
    • refactor(labeledIcons): update margins for group labeled icons 5fa5ca9
    • refactor(labeledIcons): add variable for icon color 9f9d3cb
    • refactor(labeledIcons): update colors on download links c042642

    🏠 Internal changes

    • chore(labeledIconGroup) : lint changes 535cee4
    • style(downloadLabeledIcon) : fix styling 6d8e3ac
    • style(downloadLabeledIcon) : fix alignment 4558017
    • chore(LabeledIconGroup) : lint changes ab36476

    0.4.0 - 2022-06-01

    🚀 New Features

    • feat(Carousel): create carousel for cards 2b0d737
    • feat(ItemwithIcons): Initial Item group with icons, new item variation 7f4ea47
    • feat(utilities): add file and basic utilities 05c88b2
    • feat(utilities): add file with basic utilities classes #173 855185f

    🐛 Bug Fixes

    • fix(tokens): hsla function for shadows b8e5d37
    • fix(tokens): remove css var from less file a9c4224
    • fix(carousel):add storybook controls descriptions 269a603
    • fix(item): remove image width css from item.less 7b21cb2
    • fix(table): Set responsive breakpoint to @tabletBreakpoint 067e018

    💅 Enhancements

    • refactor(item): import item.less in theme definitions c516374
    • refactor(Label):add corner,ribbon & basic label stories and styles e2bbbb9
    • refactor(Label):style changes based on label importance class ce4d5d1
    • change(tokens): rename gap to space and added em spaces 719efc4
    • refactor(item): add classes for size, set default to tile and add controls for grouped items d5a0405
    • refactor(tokens): add borders, shadows, shapes and z-index tokens 7069106
    • change(tokens): name spacing tokens gaps and added missing values up to 80px as documented 9fbd912
    • refactor(quote): Rename sourceInfo to extra info 76c2b40
    • refactor(item): WIP replacing unstackable with row e3a44de
    • refactor(tocens): add color design tokens 13bb165
    • refactor(item): adjust margins to match figma designs 6334581
    • refactor(carousel): remove title from story and color on card hover 12a1d7c
    • change(tokens): updated sizes with 4-8-16px increments 1f53d65
    • change(tokens): added size tokens to be used for width of elements cda5dea
    • change(utilities): values need important rule 96150d9
    • change(tokens): added also rem space values aedbbdd
    • change(tokens): updated z-index tokens with negative values 404efe4
    • refactor(tokens): add 14px font size token 8d8695d
    • refactor(docusaurus): restructured and improved sections navigation #174 b47b026
    • refactor(tokens): add 12 and 14px font size token #176 3681147
    • refactor(tokens): remove conditional border radius f0fe5ad

    🏠 Documentation changes

    • docs(website): created new sections, improved website navigation 243f0be
    • docs(homepage): adding design system homepage with links for upcoming sections c9a9685
    • docs(docusaurus): copyedit, improved navigation 998762a
    • docs(website): restructuring, moved current DS docs to new folder 8bb612f
    • docs(homepage): copy editing ee37d6f

    🛠️ Others

    • Release 0.4.0 f4bc509
    • feature(homepage): added Item group with icons #167 2ec99f5
    • feature(tokens): added borders, z-index, shadows tokens #171 74c1788
    • feature(tokens): added initial color design tokens #169 da3eae0
    • perf(carousel): added slick library ca9be51

    0.3.1 - 2022-05-19

    🐛 Bug Fixes

    • fix(input,segment): toggle inputs and padding fixes within Volto sidebar forms de030d6

    💅 Enhancements

    • change(login): restored width of login container to 376px 0564293

    0.3.0 - 2022-05-17

    🚀 New Features

    • feat(Callout):create Callout component with Blockquote style 3d486b1
    • feat(callout): Align the Callout component with Volto slate component e9343ff

    🐛 Bug Fixes

    • fix(testimonial): fix storybook arg names b9df52f
    • fix(table): tweak responsive table for extra long headers 7f9f9e2
    • fix(quote): fix color and padding issue 310d6b3
    • fix(accordion): Fix accordion active title color 57af165
    • fix(testimonial): remove info arguement 9593d95

    💅 Enhancements

    • refactor(Table):add responsive mobile table story and styles aed69e6
    • refactor(testimonial): adjust to volto design | fix avatar image size 546070e
    • refactor(Quote):rename Pullquote component to Quote 9384a0c
    • refactor(Quote):rename Quote.Metadata to Quote.SourceInfo dfae8b1
    • refactor(Quote): rename Author to Source 6d400f6
    • refactor(Quote):move Testimonial component under Quote folder e2467c2
    • refactor(testimonial): readjust rounded card b419334
    • refactor(Table):wrap table with semantic ui container 24ac2bb
    • refactor(Testimonial):minor storybook bug fix 7b6d128
    • refactor(Callout): wrap story with semantic ui container ead362d
    • refactor(quote): update action name to match the functionality caf2e35
    • refactor(table): add borders to responsive table with celled attribute 8a71a67
    • change(table): make use of headerSortableWhiteSpace variable fd836fb
    • change(table): use the @mobileLandscapeBreakpoint for max 480px media query 90880ab
    • refactor(Quote):rename pullquote to Quote in Testimonial f54da19
    • refactor(Testimonial): change card class name e995c32
    • refactor(Testimonial): prettier changes 904594b

    🛠️ Others

    • feature(tokens): added tokens folder for design tokens we can use in the system a542172
    • perf(lint): fix f2ef3ab
    • Release 0.3.0 8724b28

    0.2.4 - 2022-05-13

    💅 Enhancements

    • change(segment): brought back overrides from pastanaga into our theme 14efd02
    • change(container): removed padding from containers restoring thus the defaults c2ed813
    • change(grid-story): added container as grid width is influenced by container width 459f481
    • change(breadcrumb): removed padding from breadcrumb added by container c5df567
    • change(container): modified all outputted widths to align to grid 9f29cef
    • change(breakpoints): restore Semantic UI breakpoints, adding extra needed values e7f5b1e
    • change(container): restore maxWidth to 100% now that the last value is 1120px 8b55c58
    • change(header): wrap header globalnav links useful for editing section 10d4f56
    • change(breadcrumb): added vertical variant to the breadcrumbs like we do in Volto f405f84
    • change(breakpoints): added also contentBreakpoint for backward compatibility b6c9212

    🛠️ Others

    • [JENKINSFILE] Add failure comment, no jenkins fail c325bf1
    • prettier changes 134da52
    • [JENKINSFILE] format PR comments 739438c
    • [JENKINSFILE] mention comment author in comment 39a26aa
    • [JENKINSFILE] remove debug, add error per stage 903eecd

    0.2.3 - 2022-04-29

    🚀 New Features

    • feat(CallToAction):add feat call to action ab53642

    💅 Enhancements

    • refactor(button): add container to stories 6c02c19
    • refactor(tab): update vertical tab columns and content b473fab
    • refactor(call to action):render call to action with Button as="a" e7dfabf
    • refactor(button): update inverted button colors c822021
    • refactor(Tab):scrollbar change in mobile & vertical tab fix 0e34cbf
    • change(banner): added icon class to share icons 48e866e
    • refactor(Button): move button to forms folder 94996fc
    • refactor(Tab):minor change in secondary pointing menu variables 280b6c4

    🏠 Documentation changes

    • docs(button): import call to action stories e4eed44

    0.2.2 - 2022-04-22

    🐛 Bug Fixes

    • fix(publicationCard): restore line endings 582859e
    • fix(form): added back overrides from Pastanaga theme a3f7ff8
    • fix(OrderedList) : add list only if sub list exists 8acbc8d
    • fix(label): update highlight label color d55bbb0
    • fix(publication card): run prettier 81a5bfc
    • fix(avatar) : fix naming convention for arg 84fc5fa
    • fix(tab): restore mobile font sizes 58f39be
    • fix(addForm): add min height to add form and fixed block chooser overflow ca4415d
    • fix(OrderedList): adjust margins to fourth sublists 663d384
    • fix(dropdown): being hidden because of third party css 7d353df
    • fix(modal): overflow hidden as clearfix of last child from modal b4923f5
    • fix(RelatedContent):fix merge conflict adc34bf
    • fix(button): labeled class needs to be placed after left or right keyword 53d1204

    💅 Enhancements

    • refactor(card): prettier fixes e10e3d6
    • refactor(card): add card variations e16d05b
    • refactor(card): remove stories 0deb0ca
    • refactor(card):delete primary and secondary card stories 1f95d22
    • refactor(Avatar) : remake avatar as card variant ea77cdd
    • refactor(card): add styles for card variations 7407bd3
    • refactor(storybook): add story with related content inside of a tab dca008a
    • refactor(card): Rename variables from avatar to rounded be01316
    • refactor(avatar): update less variables and layer structure f965db1
    • refactor(PublicationCard):remake publication card to be a semantic card variation 5a0c6ab
    • change(button): simplified button styling fe892d6
    • change(button): simplified storybook naming and examples 9a7df4f
    • refactor(Avatar) : convert avatar component to card variation 2004a94
    • refactor(Related Content): change in grid and add see all button 955450e
    • change(button): added back button.overrides from pastanaga theme 3b55acb
    • refactor(card): add card class control 68c91a9
    • refactor(card):delete publication card variables & overrides files 6be8a03
    • refactor(OrderedList): rename TOC to Ordered List and add container to the story e00c4db
    • refactor(card): add card grid fluid story with no columns f38251c
    • refactor(list): remove horizontal control 1f5e576
    • refactor(avatarGrid): update less variables and layer structure db554a8
    • refactor(Related Content):show button when there are more hidden cards 57ff1c8
    • refactor(RelatedContent):change to use new card variant instead of publication card component 7cf424a
    • change(breadcrumb): brought back pastanaga overrides to breadcrumbs bca1c93
    • refactor(card):delete publication card folder & story 68bf773
    • change(buttons): modified basic and circular variant behavior c06fed9
    • refactor(card):tertiary variation minor story update 87b8dca
    • refactor(DescriptionList): add container to story d647c1a
    • refactor(List):render ordered list with ol,li tags 87813c1
    • refactor(OrderedList) : change table of contents story to ordered list cb6197c
    • refactor(publicationCard): update tag and name variables c109ad9
    • refactor(UnorderedList): update list as ul, list items as li and add container to strory 2c096e1
    • refactor(card):organize controls and minor bug fixes f3f6e35
    • refactor(less variables): publication card style changes c5a84e9
    • refactor(less variables): add less to related content e1a5543
    • refactor(RelatedContent):delete publication card component 2ed0ed4
    • change(button): basic button is again without padding, border and background 5a907c7
    • refactor(PublicationCard):remove link wrapper 5911a0d
    • refactor(less variables): change publication card height per viewport d7a5256
    • refactor(Timeline):change timeline icons b2fe0bf
    • refactor(publicationCard): replace px with rems 53bf8da
    • refactor(Related Content): change in related content grid bf856ce
    • refactor(List):render description list with dl,dt,dd tags ec669a7
    • change(button): show only labeled variant for buttons with icons bf49944
    • refactor(card): import image for rounded card ca5a47e
    • refactor(progress): add container to story dfb33bb
    • refactor(storybook): add publication card story with different description sizes 23af97b
    • refactor(List):render default list with dl & dt tags ece2280
    • refactor(storybook): add publication cards stories with longer description 37adefa
    • change(button): basic icon buttons no longer have box shadows c2f3ea3
    • refactor(card): remove story afc5f79
    • refactor(less variables): change card description line number per device 6946fda
    • refactor(card): update rounded card image path 8db3a85
    • refactor(DefaultList): add container to story f971193
    • change(button): bumped z-index of sidenav expand button 445ed8a
    • change(progress,label): color accessibility fixes #151 09cf6e3
    • change(button): text button now has an underline with a focus border like other buttons cdd9043
    • refactor(card): update card variation grids path 756589c
    • refactor(card): minor fixes 3a880d7
    • change(button): primary color is blue and secondary is green 53e0a0c
    • refactor(List):change styles to match with the tags lists are rendered 2673890
    • refactor(progress): update colors for accessibility ea2f454
    • refactor(card): move avatarGrid & relatedContent to Card folder 1959d52
    • refactor(Timeline): change storybook timeline colors to fix accessibility issues 79da8dc
    • change(segment): restore light grey background color for secondary segments 8716b08
    • refactor(relatedContent): adjust column paddings 8a1520d
    • refactor(storybook): clear up code 3ada154
    • refactor(card): use the rounded class for avatar grid 8c000f3
    • refactor(card) Update rounded card class 140b587
    • refactor(avatar): add variable for image border radius c23341c
    • refactor(label): add container to story 565101f
    • refactor(progress): update value color for accessibility error 6fc76f8
    • refactor(card):use jsx extension 413d328

    🏠 Internal changes

    • chore(Avatar) : add container to stories 41b748c
    • style(OrderedList): prettier fixes ed95e4d

    🛠️ Others

    0.2.1 - 2022-04-08

    🐛 Bug Fixes

    • fix(version): Switch to 2.0.0.alpha.1 83b8b8e

    🛠️ Others

    • cleanup(loader): Remove useless HTML d1d180c

    0.2.0 - 2022-04-04

    🚀 New Features

    • feat(card) : add new default card color-schme 965adea
    • feat(label): Handle slate links and footnotes f382431

    🐛 Bug Fixes

    • fix(buttons,toggles): border and background color when active 147629 #139 ea36f31
    • fix(checkboxes): background color when they are toggles 4b6ab67
    • fix(buttons): border set on basic buttons appearing on svg elements of Volto UI 69ca73f
    • fix(label): Zotero/Footnotes inside label 0ee4d58
    • fix(card) : add control for image url in storybook b28e530
    • fix(less variables):change font family e4bca9e
    • fix(storybook):minor bug fix 9fc53bc
    • fix(tag): fixes merged theme config eb30363
    • fix(Banner): prop types fix a270e5b

    💅 Enhancements

    • refactor(tag): splits Tags component to TagList and tag, changes default tags style 78a5f8c
    • refactor(Banner):add banner share pop up in banner story c9688b2
    • refactor(tag): remove classes and actions that add background color ce9b6f9
    • refactor(Banner):change banner's image wrapper implementation 9153dd1
    • change(package): bump release version to 1.10.0 7e984c1
    • refactor(card): align cards and images, update less variables d47c978
    • refactor(card): add class inverted for default card 919a56e
    • refactor(tag): changes component name e1db068
    • refactor(tag): changes color metallicBlue to bottleGreen e4b68ac
    • refactor(less variables): change tag list mobile view fcded3d
    • refactor(tagList): update story to not use tag color classes 8b5b61b
    • refactor(Banner):minor bug fix ff8c352
    • refactor(Banner): add metadata field sub component 327b7e7
    • refactor(banner): add and adjust remix icon for banner action 1bf3ffa
    • refactor(banner): replace px with rem and adjust share popup padding a568329
    • refactor(Banner):add type class to metadata field and apply styles to it 86a2866
    • refactor(less variables):change tag list styles 8670087
    • refactor(banner): share items display flex on desktop 3ff8684
    • change(banner): added background gradient, share popup, metadata show and hide #136 2f5dcca
    • refactor(banner): update gradient 570ee1e
    • refactor(tags): removes hardcoded ':' ea58e86
    • refactor(card): remove card border bc77739

    🏠 Internal changes

    • style(card) : add lint and prettier changes 9d9a773
    • style(tag): remove comments 501fcdf
    • style(tag): stylelint and prettier changes 08b6386

    🛠️ Others

    0.1.9 - 2022-03-25

    🚀 New Features

    • feat(all): 1.9 release #124 0d3f6fb
    • feat(callout): Align volto-slate callout with blockquote style 9e0bb49

    🐛 Bug Fixes

    • fix(inpageNavigation): restore hidden on top functionality c554e6e
    • fix(list): Fix TOC margin on 3rd level f17da79
    • fix(inpageNavigation) : add smooth scroll animation 42f6564

    💅 Enhancements

    • refactor(footer): update visual and mobile margins 64f05af
    • refactor(header): restore union dropdown after implementation a7029c5
    • refactor(pullquote): adjust to the new figma design 78e4606
    • refactor(breadcrumb): adjust font sizes and import remix divider 5fcabaf
    • change(header): use viewport width for changing mobile text in header dropdowns 5a7868e
    • refactor(inpageNavigation): adjust to the new figma design 4073acf
    • refactor(tab): add max width for tab items 366d279
    • refactor(less variables):change pullquote styles 9ad94bb
    • refactor(Pullquote):change quote positions and add Pullquote.Metadata sub component 6bce35f
    • refactor(inpageNavigation): Update to remix icons 19a6061
    • refactor(inpageNavigation) : move icon & text to be in column 0953910
    • change(breadcrumbs): modified breadcrumbs template to behave like breadrumb template 490a559
    • change(package): bump release version to 1.9.0 43a6e4b
    • refactor(breadcrumb): adjust font sizes and import remix divider #120 09a3a01
    • change(menu): modified secondaryPointingItemMaxWidth to a value that equals to 250 ea138a1
    • refactor(pullquote): introduce meta section, use remix icons, integrate slate callouts #119 fd740c9
    • refactor(footer): updated visuals and gradients #117 e5c6d18
    • change(scrollToTop): feature inpage navigation revamp #121 3cf20a8
    • refactor(footer): update visual and gradient 764ec23
    • change(header): use 12px font size for mobile resolution dropdowns 6dad0fa
    • change(nav): added navDepth to 3 in order to enable mega menu integration c4f73fd

    🏠 Internal changes

    • style(inpageNavigation) : lint changes 3641d78
    • style(inpageNavigation) : add less variables 0699c70
    • style(pullquote): create variable for icon font size fea9b0a
    • style(inpageNavigation) : add lint & prettier changes f8dd012
    • style(inpageNavigation): remove comment 1aee011

    🛠️ Others

    0.1.8 - 2022-03-18

    🐛 Bug Fixes

    • fix(card): avoid long links from spilling outside of card body area 95b8951

    💅 Enhancements

    • change(typography): set heading sizes as detailed in docusaurus typography section 189bf20
    • change(docusaurus): content tweaks, inpage navigation section #112 b62d1b1

    🏠 Internal changes

    • chore(docusaurus): fixed grid tablet breakpoint value c7fbc09

    🏠 Documentation changes

    • docs(docusaurus): capitalization remove bf8fa44
    • docs(docusaurus): update 1c04976
    • docs(docusaurus): comment address on pr 112 6e4fe3b
    • docs(docusaurus): color minor update 13f9fda
    • docs(docusaurus): tabs and breadcrump update d0547e5

    🛠️ Others

    • doc(colours): add more content ec66248
    • Add divider content for metadata field in Banner f1e34bd
    • Release 1.8.0 fd6ba04

    0.1.7 - 2022-03-15

    🚀 New Features

    • feat(less): add global gap sizes 3c83f20
    • feat(icons): import remix css 29967fb

    🐛 Bug Fixes

    • fix(menu): fix border overflow for tabs and pagination e88721f
    • fix(accordion): responsive and accessibility issues c225935

    💅 Enhancements

    • refactor(menu): update paddings for tabs and pagination 533a509
    • refactor(accordion): import semantic icon for remix arrows 9aa77d8
    • refactor(all) icons, accordion, button and menu itml #108 52ed2ca
    • change(storybook): segment stories now contain several elements 98a7654
    • change(table): inherit header alignment instead of hard-coding values ebb5193
    • refactor(icons): add remix icons c4c1a92
    • refactor(container): restore mobile width to auto 2df184c
    • refactor(button): update action button hover color bb09d71

    🏠 Internal changes

    • chore(docusaurus): docs delete 5f9d733

    🏠 Documentation changes

    • docs(colors): corrections da64c4c
    • docs(list): default list showcase 8ded062

    🛠️ Others

    • bug(form): input min-width more specific to not break volto interface 3f5b5d4
    • Update package.json 3dba28b

    0.1.6 - 2022-03-11

    🚀 New Features

    • feat(cards): add custom display for volto-block-image-cards 645096a
    • feat(PublicationCard):create publication card component & styles 3e5f9b7
    • feat(PublicationCard):create publication card component & styles 12cdd5d
    • feat(Related Content): create Related Content component 77eda95
    • feat(Related Content): create Related Content component 08d495b
    • feat(pagination,related) added several r3 components #105 08d47c1

    🐛 Bug Fixes

    • fix(Related Content): limit publication card number to 4 e7df032
    • fix(less variables):rename publication card variables 55c6fb8
    • fix(Publication Card): add link to card and arg name fix 36a7c96
    • fix(radio): fix bullet scaling issue with firefox 5f02c95
    • fix(radio): fix bullet scaling issue with firefox dbb2e27

    💅 Enhancements

    • refactor(form): remove custom classes and add container to form items 6b5442a
    • refactor(form): remove custom classes and add container to form items d1ec083
    • refactor(form): update form wrapper component a719576
    • refactor(form): update form wrapper component 0736ec7
    • refactor(form): adjust form items to volto theming 4213cfb
    • refactor(form): adjust form items to volto theming 374ffbc
    • refactor(breadcrumb): remove custom class anf and new variables b3cb83d
    • refactor(breadcrumb): remove custom class anf and new variables d5808ad
    • refactor(storybook): clear up unnecessary form elements controls f7e7d5b
    • refactor(storybook): small change in unordered list story 3ffd872
    • refactor(storybook): small change in unordered list story 6ce16e9
    • refactor(pagination): fix menu overrides for tabs that affects pagination fe8c4ca
    • refactor(pagination): fix menu overrides for tabs that affects pagination 3f4b726
    • refactor(Loader):remove image & add background image 70fe041
    • refactor(Loader):remove image & add background image ac38126
    • refactor(list): remove selection control a09b179
    • refactor(list): remove selection control 17bf710
    • refactor(storybook):unordered list minor change df2b727
    • refactor(storybook):unordered list minor change ef6db73
    • refactor(colors): remove metalic blue color b2f95b6
    • refactor(colors): remove metalic blue color 1eea33f
    • refactor(button): update variables b1774d8
    • refactor(button): update variables 061f3e3
    • change(blockquote): treat slate as a variation of blockquote component 19bd9a5
    • refactor(container): remove important from rules e984771
    • refactor(storybook):add textarea control to add/remove fluid class 475f540
    • refactor(container): remove important from rules 1cc6984
    • refactor(storybook): add required attribute to form fields fecee27
    • refactor(progressBar): update progress bar colors with vars c4ef1f0
    • refactor(progressBar): update progress bar colors with vars a44d73c
    • refactor(storybook): add required attribute to form fields 21da79e
    • refactor(list): adjust bullet size 2b29e4e
    • refactor(list): adjust bullet size 61c341c
    • refactor(statistic): add inverted background to global variables 1427e70
    • refactor(statistic): add inverted background to global variables ea25dfa
    • refactor(statistic): remove custom class 46cc560
    • refactor(container): update mobile width d548a44
    • refactor(grid): replace px with rem units e792f51
    • refactor(statistic): remove custom class b5c8e7c
    • change(docusaurus): updated template to change what's new title 3e15f4d
    • change(footer): added display variable for footer site logos d5b3c2f
    • refactor(grid): replace px with rem units f0331d0
    • change(github): auto deploy only on develop branch 11d6b4e
    • refactor(header): implementation in preparation for Volto integration #20 #89 95b136d
    • change(github): trigger autobuild when modifying templates contents 46094b1

    🏠 Internal changes

    • style(list): prettier fixes f9e3b05
    • style(list): prettier fixes 8eb715b
    • chore(github): merge changes from develop to develop-itml 063bd6e
    • chore(github): build deployment only on develop branch a5a1b08
    • chore(github): build deployment only on develop branch bb455aa
    • chore(github): merge changes from develop to develop-itml 129c12f

    🛠️ Others

    • Revert "chore(github): merge changes from develop to develop-itml" ca9520f
    • refactor breadcrumbs component, make it functional and customizable e902d69
    • rollback(cards): move custom display to volto-block-image-cards 2564b1e
    • bring back segment wrapper and make it attached 8458f03
    • no display: flex for blockquote added from slate 5595ce1
    • Add rule about code length a5f3652
    • Add indenting rule 15c44cb
    • fix warning related to proptype 946c6c6
    • fix profile section css overflow db5126f
    • Add rule about import sorting 804e188
    • don't use volto-slate 6a02976
    • remove segment custom width 1d3ea40
    • Add rule about naming vars 8f9020f
    • update style for accordion title 0b0d678
    • Release 1.6.0 e771e65
    • update bbcab87
    • add margin to <br> element to simulate gap as in design c6685c1
    • make breadcrumbs default size as tiny 589581f
    • remove uneeded style 82a8fb1
    • Add rule about hardcoded values e04e0df
    • Add file mode rule 65c9a93
    • Add DRY rule 66c9c3a
    • set profile section overflow to auto 71ab47f
    • Add Sonarqube tag using eea-website-frontend addons list 647a6e3
    • removed override already present in card.less 50d2ab2
    • update 7a1d482
    • Add functional components rule; add classnames rule 91a0b06
    • added comment about need for removal of this fix later 65b8166

    0.1.5 - 2022-03-08

    🚀 New Features

    • feat(cards): add custom display for volto-block-image-cards f49ffb6
    • feat(KeyContent): add new component 2534c54
    • feat(docusaurus): Updated developer guidelines ca146ff
    • feat(storybook): add testimonial component 55d9747
    • feat(storybook): add AvatarGrid component b668445
    • feat(storybook):add Loader component f675834

    🐛 Bug Fixes

    • fix(breakpoints): fix largest screen breakpoint bug on scaling e4a11c8
    • fix(profile): section css overflow and padding issues #95 bb9eb0f
    • fix(storybook): lint auto changes for AvatarGrid b8e74f1
    • fix(components): add grid structure to various components cc33546
    • fix(header) re-added span tags removed in pull request #74 00702d7

    💅 Enhancements

    • refactor(button): styling updates 37afda5
    • refactor(tab): updates on variables and overrides 54bf703
    • change(blockquote): treat slate as a variation of blockquote component 5e8a8b8
    • change(footer): added display variable for footer site logos 2f942b4
    • refactor(checkbox/radio): remove header from message and adjust top position of bullet 4a072b3
    • refactor(color): remove secondaryColorDarken variable 74c8ba0
    • change(docusaurus): updated template to change what's new title 58f58c8
    • change(github): auto deploy only on develop branch bfa35a3
    • refactor(header): implementation in preparation for Volto integration #20 #97 cddda20
    • refactor(breadcrumbs): component, make it functional and pluggable #32 #94 9f42e80
    • change(card): added styles for volto cards integration #92 a46ac21
    • refactor(grid): remove column count from example ac0e9cf
    • change(github): trigger autobuild when modifying templates contents 5f7d152
    • refactor(grid): remove custom grid 1d978a9
    • refactor(Form):change form field wrapper implementation 73cdd6d
    • refactor(message): update colors to match design 633ce31
    • refactor(checkbox/radio): update variables and remove important rules ad533b4
    • refactor(less variables): add variables to less for new components 47df026
    • refactor(Tab): fix vertical tab alignment 401bdf2
    • refactor(lint changes): add lint changes 6f6847f
    • refactor(inpageNavigation): adjust to volto theming 62f74ea
    • refactor(message): updates on styling b4cf850
    • refactor(banner): update class name ef0969b
    • change(github): use develop for auto pushing a32a723

    🏠 Internal changes

    • style(design-system): unix eol 631fa90
    • style(checkbox/radio): prettier fixes a04939f
    • style(design-system): unix eol 3c753f0
    • style(message): stylelint fix 5b75057

    🏠 Documentation changes

    • docs(docusaurus): visuals guidelines 544a950
    • docs(docusaurus): search guidelines 0fb229d
    • docs(docusaurus): loader page 892a25d

    🛠️ Others

    • Reformat header.less 1f99dfc
    • Close menu when changing path 65daea9
    • refactor breadcrumbs component, make it functional and customizable 4ec374e
    • rollback(cards): move custom display to volto-block-image-cards 79d4c89
    • Open overlay menu on global menu click cc749bc
    • bring back segment wrapper and make it attached 9f413ff
    • Use renderMenuItem also in mobile menu 02de0bb
    • Fix clicking outside closes menu af52664
    • Cleanup args in header story 2bf6a30
    • fix warning related to proptype 824b9be
    • fix profile section css overflow 8fd2654
    • don't use volto-slate 70ca3d4
    • remove segment custom width 4a60d84
    • update 96f4af0
    • Fix TopDropdownMenu component rendering in mobile a4626de
    • Add usePrevious hook 797faba
    • make breadcrumbs default size as tiny 3c8e1c6
    • Update package.json fa020cb
    • Add rule about hardcoded values 0c6912c
    • set profile section overflow to auto 8db62bb
    • added comment about need for removal of this fix later 6fdbd71
    • Add Sonarqube tag using eea-website-frontend addons list 6051724
    • removed override already present in card.less 93c4e5a
    • Remove console.log calls 8a3a4cb
    • update 81bb7d4
    • Update comment ffa2400
    • merge develop into this branch ad5b388
    • WIP a8d97f1
    • Use header.less from develop branch 99edbc6
    • WIP 57b5783
    • WIP 785da36
    • WIP 5d1eba9
    • adds Tags e37fc19
    • Add useClickOutside hook 70364c8
    • Implement outside click handling fa6f818
    • Simplify overlay menu template 28b0478
    • fixes less variables, fixes tags positioning cc19b9b
    • WIP 15bc0f4
    • no display: flex for blockquote added from slate 312a893
    • Add rule about code length 318cd48
    • Add indenting rule d589685
    • Add rule about import sorting cd337c1
    • Add rule about naming vars b112de0
    • Bring back classNames from header subpopup e477a51
    • removes tags hashtag from jsx 6b8b3e9
    • WIP d481324
    • fixes undefined on empty classes 4b29080
    • stylelint changes a5ab830
    • Footer link color @white 578e4f7
    • add margin to <br> element to simulate gap as in design 9ab9a97
    • impors colors from site variables 6117267
    • small fix for the link in footer action 72df049
    • remove uneeded style 66e9064
    • use proper naming conventions for var naming 596e314
    • Add file mode rule 805baa7
    • use less variables b43ac8d
    • Add DRY rule 2f1584e
    • Add functional components rule; add classnames rule 1b2915e
    • fix z-index of header 7d2a5d6
    • Remove comment 7d120b1

    0.1.4 - 2022-03-01

    💅 Enhancements

    • refactor(pagination): adjust to volto theming 06cc3b6
    • refactor(Form):create form field wrapper file 95b9934
    • refactor(megaMenu): update margins for menu items 230e476
    • refactor(megaMenu): update gradient 47f2ea4

    🏠 Documentation changes

    • docs(docusaurus): divider page c6bb238

    🛠️ Others

    0.1.4-beta.0 - 2022-02-25

    🚀 New Features

    • feat(github): added feature and bug reports templates with our guidelines as checkboxes 1549093

    0.1.3 - 2022-02-25

    🐛 Bug Fixes

    • fix(all): change eol to unix 62e7224
    • fix(banner): separate url value f9c9140
    • fix(all): merge eol c68f6e0
    • fix(blockquote): align self property now uses a valid entry ec76163

    💅 Enhancements

    • refactor(megaMenu): new implementation ff013af
    • change(volto): removed customizations made for ims theme from volto-eea-design-system bc8d514
    • refactor(Timeline): divide to sub components and change files to .jsx 3e2bd3b
    • refactor(header): update variables 4e5d08d
    • refactor(Header): link header's menu to mega menu 08406d8
    • refactor(Menu): change mega menu implementation 455a51b
    • refactor(Grid):minor changes and delete extra files 272585d
    • refactor(timeline): adjust to volto theming b98641a
    • refactor(megaMenu): fix link hover issue for tablet 564e972
    • refactor(header): add remix icons and minor updates c9c97dd
    • refactor(Header): change header buttons implementation 6608b8c
    • refactor(Header): add sub components and change existing Main 74c35a3
    • refactor(table): adjust to volto theming ab7a0e8
    • refactor(Footer): delete Actions & ThemeSites files and clear imports 7a78456
    • refactor(header): update variables 326655a
    • refactor(Breadcrumb): add react router link and minor bug fix 073a3a3
    • refactor(Header): show menu on search & minor bug fix 4d49a8a
    • refactor(List): add extra default list story 95665cd
    • change(docusaurus) change generation of what's new section and bump package version 6c35cff
    • refactor(Footer): minor code changes 67cb4bc
    • refactor(Menu): add class to mega menu items for styling 19baa34
    • change(accordion): modified default accordion stories titles with real accordion names cf11cc8
    • refactor(Header): accessibility image alt fix a7347a6
    • refactor(header): adjust to volto in progress 760beca
    • refactor(Header): header items as storybook arguments 388c752
    • refactor(banner): update less variables 35b0a98
    • refactor(banner): actions as buttons; don't hardcode url for banner image; subcomponentize Banner, add Banner.Action; add developer guidelines on inline styles and line endings; 6dd5a41
    • refactor(blockquote): fix responsive margins and sizes rems 209f94f
    • refactor(Input): label position and style change 970074a
    • refactor(header): update dropdown menu 32eb0fa
    • refactor(timeline): theming updates c80c9aa
    • refactor(Blockquote):remove image stories a6357ca
    • change(docusaurus) proofread blockquote usage section and removed unused api section 0bb29fd
    • change(infrastructure) cherry-pick fix 9639243 skipping jenkins on auto commits fc744cd
    • change(ci) build storybook and docusaurus only when pushing to develop-itml branch 4de0cbf
    • change(infrastructure): modify whats new doc when committing the auto deployment 39df33e
    • change(blockquote): introduce float argument for blockquote with image storybook 8fc7290
    • refactor(pullquote): add word break 2245e53
    • refactor(Banner): minor bug fix b9073b6
    • refactor(table): fix th font weight a96a0a7
    • refactor(comment): remove avatar border radius d42c37b
    • refactor(banner): adjust title size 7a24d9c
    • refactor(Image): change image path a580da6
    • change(infrastructure): specify that docs folder contains changes for deployment a1ca915

    🏠 Internal changes

    • style(input) prettier fixes e83fa0c
    • chore(storybook): prettier fix 354c7b3
    • chore(design system): technical commit for edw integration tests 9f76035
    • style(storybook): prettier fixes 3c9ad34
    • chore(infrastructure) updated branch with changes from bitbucket 77866f8

    🛠️ Others

    • doc(colours):fix color to better show primary ones 705b789
    • doc(colours):change font size to fit text in one line 4ad7516
    • bump package release to 1.3.0 f3cfe4f
    • Refactor banner into content subcomponent f8df238
    • lint fixes cda322d
    • rollback don'ts grammar change and disable unresolved import for Banner.stories.jsx a1bd715
    • Add space line in component d4d1a5f

    0.1.2 - 2022-02-17

    🚀 New Features

    • feat(blockquote) added blockquote styles as a custom module d30662e

    🐛 Bug Fixes

    • fix(inpageNavigation): hide at the top of the page 97ef500
    • fix(footer):missing image ac91a29
    • fix(comment):fix broken image 8125dc1
    • fix(message): fix font loading fdc498e
    • fix(logo): logo change 5f8c8af

    💅 Enhancements

    • refactor(storybook): multiple components fixes 4a3ff51
    • change(infrastructure) re-enable integration tests for auto release stack ce8daf8
    • refactor(storybook): global site files styling update f3770f1
    • refactor(storybook): multiple components 9277aac
    • refactor(footer) adjust to volto theming update a59f1c3
    • refactor(header): minor styling update dd6b55c
    • refactor(Header): change header mega menu 7559b57
    • refactor(banner): adjust to volto theming 451b949
    • refactor(accordion): minor styling update aeaf25f
    • refactor(footer): adjust to volto theming bdff176
    • refactor(footer):mobile responsiveness 14822be
    • refactor(storybook): main and custom less files update 1607760
    • refactor(timeline): update after removing timeline addon f54d380
    • refactor(Footer): replace with subcomponents 378c652
    • refactor(Header): header change 029e850
    • refactor(Header): change header bar 2b766fd
    • change(docusaurus) use itml branch for docusaurus deployment 6e286c5
    • refactor(accordion): adjust to volto theming 971fcb8
    • refactor(Header): add sub components 7f955db
    • change(docusaurus) tweak auto deployment to always commit changes from docs a2940da
    • refactor(banner): less and variables files created d5b1a8a
    • refactor(label): adjust to volto theming 3c945e1
    • refactor(message): adjust to volto theming 3e950fc
    • refactor(Footer): add sub components and props c3d1487
    • refactor(modal): modal and confirm adjust to volto theming 83b60e9
    • refactor(comment): adjust to volto theming 84348c3
    • refactor(storybook):adjust headings 32f64f9
    • refactor(Header): add comments to header menu c2c83b2
    • refactor(Accordion): clear up accordion stories code 4e59b8f
    • refactor(segmant): adjust to volto theming 3ab211e
    • refactor(button) minor styling update 8782bb2
    • refactor(banner): change image position cdd76d5
    • refactor(breadcrumbs): update less variables 640817e
    • refactor(list): adjust to volto theming 1079c73
    • refactor(timeline):adjust timeline module 213eb11
    • refactor(blockquote):adjust to volto theming 5eec87f
    • refactor(progress): add progress bar colors ccf3c98
    • refactor(pullquote):adjust to volto theming fee4466
    • refactor(Header): change mobile mega menu c7ecf18
    • refactor(statistic): adjust to volto theming b726e49
    • refactor(button) adjust to volto theming eb257f8
    • refactor(form): minor styling update 79934b2
    • refactor(Footer): create Actions & Sites sub components 446840b
    • refactor(inpageNavigation): adjust to volto theming 85c631a
    • refactor(Inpage Navigation): changed button's display 36e5b4f
    • enhancement(docusaurus) modified headings to be within release versions 19ace30
    • refactor(storybook): move components to ui folder cb91f88
    • refactor(Header): change mega menu de0fc6b
    • refactor(Pullquote): divide Pullquote to sub components 34413c4
    • enhancement(docusaurus) replace changelog when auto-building docs Refs #145331 da25c0e
    • refactor(popup): adjust to volto theming d0d192d
    • refactor(card):adjust to volto theming 2ab6f91
    • refactor(item): adjust to volto theming 89a16af
    • refactor(pullquotes) remove unnecessary variables e0d20a3
    • refactor(progress):adjust to volto theming d1ab950
    • refactor(blockquote) change variables names 36fd5be
    • refactor(comment): adjust font sizes 0311ed1
    • refactor(InpageNavigation): clear up code 1d7afdc
    • refactor(container): change variable name for computer padding 26d123f
    • refactor(inpageNavigation): remove imports 25c1d1c
    • refactor(storybook): update ui index components exports ce78d47
    • change(infrastructure) auto build storybook when pushing to develop-itml branch of volto-eea-design-system e9aa5bc
    • refactor(storybook): delete demo stories 8b58d02
    • change(docusaurus) align deployment steps for building docusaurus 37e4ce0
    • refactor(storybook): remove components from customizations folder 8930ede
    • refactor(tab): minor styling update 1252ad0
    • refactor(comment): change avatar src e5f9c4c
    • refactor(banner) : change file type and folder 878742b
    • refactor(form elements):changed text 919beea
    • refactor(Image): change image src b971084
    • refactor(Pullquote): add component propTypes d32c5e6
    • refactor(blockquote): adjust font sizes d71a3ce
    • refactor(footer): update font sizes 1c91c35
    • refactor(Blockquote): add component proTypes ea02649
    • refactor(logo): update image f611372
    • refactor(docusaurus): restore config f2c5239
    • refactor(blockquote): update component name 572e655
    • refactor(header): fix story header import ceda6c7
    • change(infrastructure) auto build docusaurus when pushing to develop-itml branch 7bebdf5
    • refactor(storybook): remove components from customization folder 4a9bb9b
    • refactor(banner):story rename 56ff603
    • change(testing) removed navigation from cypress tests until component is finished 5549f4c
    • refactor(Segment): change to .jsx extension 5cb35d8
    • refactor(Pullquote): change to .jsx extension 564cf7e
    • refactor(PopUp):change to .jsx extension dcb24ff
    • refactor(InpageNavigation): change to .jsx extension dfefce3
    • refactor(Blockquote): change to .jsx extension 44a1645
    • refactor(heading): story name update aa10f34

    🏠 Internal changes

    • style(footer): prettier fix 902c257
    • style(storybook): prettier fixes 59f941d

    🏠 Documentation changes

    • docs(docusaurus):multiple page updates 2aba73e
    • docs(docusaurus):update page content 565697f
    • docs(grid):update components grid 60eb083
    • docs(docusaurus): page adjustments 0641eac
    • docs(docusaurus):updated various pages f860176
    • docs(docusaurus): logo change 3af5e5c

    🛠️ Others

    • added sortable table stories and descriptions 6d44dd7
    • Layout components theming 5861013
    • recovered files from origin a4ac04f
    • grid component & stories changes 4a5752e
    • Updated what's new section with actual commits from volto-eea-design-system repo fc5e3c3
    • Docusaurus title possible fix. db699e7
    • form elements stories added description & default values 6b4f6eb
    • removed API tabs 58aa928
    • Layout updates 854f388
    • Refs #142123 removed extra customization of semantic.less: ab9de81
    • added page-header,footer and grid in docusaurus 660c8e3
    • Manual docs build and commit 666eb6a
    • added svg & png files f1338d5
    • added missing components to docusaurus 934dfd8
    • Control descriptions updated 56581eb
    • Grid updates 700332d
    • Button theming update 0ec68b6
    • site variebales & overrides changes 7251162
    • Table and Tabs theming 49f0860
    • Responsiveness updates 48e1351
    • added various components to docusaurus 550d719
    • Checkbox and radio updates 24652a2
    • remove images from typography and colour docs 8493e92
    • added guidelines' text and finished all components 02d75fc
    • added more missing components in docusaurus 8be8263
    • Prettier changes on docusaurus 5f1e5eb
    • Grid updates ae09945
    • Minor fixes for tests 3bdf306
    • Layout updates 8b7a4dc
    • Footer and TOC theming bb3d3c4
    • Refs #145331 manually commit changelog until autobuild is stabilized 93168b0
    • label component changes df8c0ff
    • added several sections to the theming guidelines ff1a649
    • Updated removed files. 84f9b8c
    • added more docusaurus components 52a3b9e
    • Progress Bar 9f2efc9
    • Modal and Confirm updates 3b306c6
    • Add proper changes to whatsnew meant in previous commit 40f78e3
    • Form Descriptions de0dfbc
    • Prettier fixes 1337e6f
    • Deleted files b82f982
    • add new images for spacing 7b7b2c4
    • Messages Theming ad621a3
    • added new content to docusaurus 1c83452
    • Minor less updates a36a8bb
    • Tabs and lists updates e37eef1
    • Inpage nav and timeline components 76f0f82
    • Prettier updated files 679b9d2
    • dropdown initial d8aef26
    • Prettier changes f068af0
    • List initial 6d3b969
    • List story updated e96a6f6
    • Statistics updates 74bf639
    • styling c169cc0
    • timeline comp storybook changes 1f42686
    • feature(docusaurus) added theming guidelines ded1f04
    • Properly commented out integration tests. 48b3a15
    • Reattempting commented out integrations tests. 3dd8211
    • Button theming 4231e1c
    • Card initial 06dace5
    • form element storybook changes c4b06aa
    • Pagination theming 2a80175
    • Accordion theming 8061bf9
    • global var updates and radio story 9526ee2
    • created pullquote component & stories df35563
    • Item stories added description & default values 9d459f2
    • storybook clean up code bffd326
    • List updates 28f1b53
    • Button classes updates 788c289
    • Prettier fixes 678c9be
    • Removed header title from partial docusaurus components. ed7c45e
    • created banner component and stories 9be170f
    • Breadcrumb stories description & defaultValue -- clean up code 186ab65
    • Refs #142123 added customization of semantic.less: 1e02356
    • Card stories added description & default values f6b408f
    • Statistic and accordion updates 16064ce
    • breadcrumb component & stories changes 5bceb98
    • Container initial 3eb7155
    • doc(docusaurus):Fix text for various parts bfd3fa2
    • blockquote component & stories 879b640
    • Refs #143412 removed doc comments breaking doc building e6a6756
    • Popup updates ce2d641
    • Global variables for colors and borders added 6e5fbd6
    • Tab stories changes 5429cfb
    • Confirm stories added description & default value 85cda14
    • Kebab case class names b41cd07
    • Card and Comment class updates 3899465
    • Accordion updates c97ba39
    • item stories changes 772e41f
    • Accordion class updates 9cdde86
    • Comment stories added description & default value cb6f25b
    • Accrodion stories description & default value ab8fb88
    • Pullquotes updates c598421
    • Modal and confirm class updates 0ae47e6
    • Tab and paggination updates 96796ff
    • Form Updates e986a9f
    • Classes renamed 73c8c3d
    • List and item less updates ce0de17
    • Confirm theming 36e20ce
    • container overrides changes 4b3970b
    • Docusaurus theming fc4a8c5
    • refacto(headings): update mobile headings sizes b2e9f83
    • list stories and style changes c61db53
    • Tab theming e31e6c3
    • Message and pagination classes updates c230687
    • Segment initial d5724fe
    • Refs #143412 removed doc comments from api_markdown breaking doc building efeacba
    • Timeline and responsiveness updates 1ed1524
    • Refs #142123 use swap font-display for performance reasons 083738f
    • Breadcrumb stories minor changes 3d0d17c
    • Table component stories minor change 0bf4083
    • List stories changes a64b304
    • blockquote component minor changes cdf71a8
    • ckeckbox stories minor change 6d6e508
    • image component storybook changes 91290ec
    • button overrides changes d5b78dd
    • accordion overrides changes fdcf7d5
    • Accordion component and stories changes 5079247
    • Card theming 23bbb9d
    • statistic overrides changes 2b11cb5
    • Refs #143412 build docs only on pull request like we do with storybook 473bb87
    • Card component stories minor change | added link icon deb423a
    • comment component stories changes f1c5e75
    • Accordion component bug fixed 815e91d
    • Refs #145331 use iso date to release so that we see also time ceedf08
    • correct connfig for doco 93e1313
    • Item updates fae93d4
    • added layout grid 2e6be55
    • tab overrides changes 87aaf32
    • message overrides changes 6dccfca
    • segment storie changes 296371f
    • progress component stories changes df10c2e
    • message comp storybook changes c86b405
    • Accordion cmponent stories | minor bug fix 6de0d81
    • Refs #145331 add all changes when auto building docusaurus ce11cce
    • perf(timeline):removed semantic timeline package 0aeb34a
    • Tablet Breakpoint update b229c27
    • Refs #143412 set storyBook Url to eea.github.io b7fdecb
    • bump package version to signaling of a major release c835f1d
    • small commit to trigger deployment of storybook and docusaurus be46ea3
    • doc(accordion):revert previous change 3de02da
    • fix typo for caption @desktop line-height pixel number 1671552
    • Commented out integration tests. 574cfec
    • popup overrides changes a9555e3
    • container component stories fixes 692cfce
    • Added timeline to package json fixed f2e93e0
    • Refs #142123 modified import of volto-eea-design-system icon.less: a7fab7d
    • Refs #142123 reference icon.less from this package: 5616e6d
    • Menu component stories change 2797716
    • Image stories minor change ddb9f1d
    • card component stories changes 6ccba1e
    • Added timeline to package json 93031d6
    • table stories code clean up b7b2a56
    • Refs #143412 removed extra baseUrl from docusaurus config 79f36da
    • Accordion stories minor change ffe808a
    • Theme assets 3f4bea4
    • Merged with develop 167ec9f

    0.1.2-beta.2 - 2022-01-03

    0.1.2-beta.1 - 2021-12-22

    🛠️ Others

    • Tab component stories minor changes 4690a6f
    • Comment component stories minor changes a87cb6a
    • Form stories changes fc30c90
    • Grid component stories minor changes 798fdd0
    • Image component stories minor changes be93385
    • Menu component stories minor changes cb1f9a8
    • Dropdown component stories minor changes 57cf954
    • Header component stories minor changes 264fd46
    • Confirn component minor changes 9a00bc1
    • Item component stories minor changes 6994fa0
    • Label component stories changes 5cc5843
    • Container component stories minor changes e6e40b3
    • Message component stories minor changes ba9d377
    • Breadcrumb component stories minor changes ff7a176
    • Modal component stories minor changes af1fe6a
    • List stories changes 0016042
    • Button component stories minor changes 690dfd2
    • Radio component stories minor changes 84eac30
    • Progress component stories minor changes e676357
    • Pagination component stories minor changes b1af226
    • Segment component stories minor changes 5f8c7ef
    • Refs #143412 eslint fixes for component stories badcb91
    • Table component stories minor changes 7c104b8
    • Refs #143412 more eslint fixes a88c091
    • Refs #143412 warn for broken links instead of throwing bd5821c
    • Refs #143412 merge changes from develop-itml to develop branch bca28b9
    • made tabs dynamic for api tab ea37ecb
    • Basic storybook/Docusaurus components 840ab60
    • created List directory & srories based on semantic-ui List component 51f1901
    • made tabs as component easy to call for other components 07bae49
    • Popup Component | minor fixes 2ff9908
    • created stories for Tab component 95e3a73
    • created Table directory and stories based on semantic-ui Table component e16115d
    • List component stories - minor changes de11343
    • created stories for Comment component a20f884
    • created stories for Grid component 360d2a8
    • created stories for Image component 3c1d2bc
    • created stories for Menu component 17e3b37
    • Added untracked files 75f0afd
    • created Dropdown stories d6a2538
    • created Header component stories b833979
    • created stories for semantic-ui Confirm component 6fddccc
    • created Statistic directory and stories with semantic-ui Statistic component cd62498
    • created Item component stories 90ec2be
    • created stories for Container component 41934f6
    • created Label component stories 71732f6
    • created Message component stories adcbeab
    • created Modal component stories c25409d
    • Breadcrumb component stories and minor changes 6264d92
    • created Pagination component stories 57cdad3
    • created Segment component stories d8d01d7
    • created stories for Radio component 1fd062d
    • Menu stories minor changes 6ba5e0d
    • Statistic component stories minor changes 3c874a5
    • Card component stories minor changes 290bda8
    • Accrordion stories minor changes 2ee3f59
    • renamed Demo folder to Layout b9f6d05
    • remove test exclusion 94dba3e
    • Accordion component stories minor changes e672d59
    • fix docusaurus url (removed trailing /) b6c59fc
    • Item component stories - minor changes f0a9902
    • eea logos and assets b435b51

    0.1.2-beta.0 - 2021-12-18

    🛠️ Others

    • Refs #140454 added github action to build docusaurus to the develop branch abe6a72

    0.1.1 - 2021-12-16

    🛠️ Others

    • Refs #140454 changed the following to volto-eea-design-system: 6791d41
    • Refs #140454 corrected base url for docusaurus website build 98271b3
    • Initial test changes on design system/docusaurus. 9dad612
    • After prettier check 9ec40b4
    • Refs #140454 restore SearchWidget.jsx content and removed dummy text from docs intro page 7505df8
    • Refs #140454 added references to eea and the storybook in the docusaurus footer 42bbfcd
    • Refs #140454 lint fixes 9502f2b
    • Add SonarQube badges a4e0a40
    • Refs #140454 brought changes from develop-itml and upgrades docusaurus 207c873
    • Refs #140454 removed extra content not needed by the docusaurus site bc68ebe
    • Refs #140454 updated docusaurus to latest beta d68ed8a

    0.1.1-beta.0 - 2021-12-09

    🛠️ Others

    • Refs #140454 moved header and footer templates from volto-ims-theme: e2d5e56
    • Refs #140454 added website folder with docusaurus site skeleton 6fd15f4
    • Refs #142794 added commented implementation of the header and footer area: 773ad87
    • Refs #140454 changed the following: 4137ec4
    • Refs #140454 removed storybook from volto-eea-design-system: a129ffb
    • Refs #140454 added storybook as a dev dependency: e04ae4e
    • Refs #140454 updated Breadcrumbs.jsx to latest version: 63fe507
    • Refs #140454 we should use jsx and not mdx for storybook tests 3668e66
    • Refs #140454 updated eea-design-system readme with extra info on package contents d2efc3d
    • Refs #142010 - Optimize Volto-addons gitflow pipelines 3af46d2
    • Refs #140454 Renamed folders of docusaurus website: 15bca74
    • Add demo story 757c409
    • Refs #142794 enabled minimum css so that header looks decent adbe233
    • Refs #140454 use the develop branch for the readme linking, it's always more up to date 23dcf16
    • Refs #140454 added missing themes reference for the eea theme e9ca244
    • Refs #140454 modified assets imports after move to volto-eea-design-system 2250cc7
    • Load footer in segment 80d38a9
    • Refs #140454 bump package version to 1.1.0 from 0.1.1 from develop branch: 1314039
    • Refs #142794 keep toolbalWidth variables in case design system runs in an older version of Volto 1a8b305
    • Refs #142794 changed the following: fbb80b1
    • Refs #140454 moved storybook scripts to the scripts section 705c4c3
    • Refs #140454 removed dangling comma 514f24d
    • Refs #140454 changed link to the start of the docs 0e16fdf
    • Refs #140454 add h1 to the list of elements that are max 800px and centered 7d3c30f
    • Add Sonarqube tag using ims-frontend addons list 8d657d0

    0.1.0 - 2021-11-17

    🛠️ Others

    • Refs #140454 changed the following to volto-eea-design-system: 40d2af6
    • Refs #141204 elements folder now has the variables and overrides from pastanaga theme 595b4e6
    • Refs #141204 use font awesome from SemanticUI instead of Pastanaga: 4e273ca
    • Refs #141204 removed the components customizations from volto-eea-design-system: c98c260
    • Refs #141204 added customizations folder from volto-ims-theme to volto-eea-design-system: ff4bf44
    • Refs #141204 modules folder now has the variables and overrides from pastanaga theme f2841b6
    • Refs #141204 customized Comments.jsx to remove unnecessary container b2e95d7
    • Refs #132149 added initial commit for volto-eea-design-system: 2934b91
    • Refs #141204 collection folder now has the variables and overrides from pastanaga: 213d496
    • Refs #141204 removed search widget customization, we can use volto-ims-theme for that file b7e8b0c
    • Refs #141204 stylelint quick fixes 5595925
    • Refs #141204 changed the following: 769f4f9
    • Refs #141204 changed the following to the eea theme: 06d8d86
    • Refs #141204 eea site.variables now use all values from pastanaga's site.variables 6535c0f
    • Refs #141204 simplified container overrides: 5125003
    • Release 1.0.0 177d0ce
    • Refs #141204 globals folder now has the variables and overrides from pastanaga theme 116a0c3
    • Refs #141204 changed the following: 2e7f423
    • Refs #141204 modules folder now has the variables and overrides from pastanaga theme: 27a201d
    • Refs #141204 text elements are now with a max width and centered within content-area: bbed7bb
    • Refs #141204 added main.variables entries from pastanaga to eea theme 1cbbc55
    • Refs #141204 modified theme image imports for component customizations ef3238a
    • Refs #141204 modified container width to be auto: 2e8d2e0
    • Refs #141204 modified several icons to use the \f values instead of \e: c397145
    • Refs #141204 changed the following: c518eda
    • Refs #141204 ensure that main column isn't enlarged over the sidebar section on edit f7a2868
    • Refs #141204 changed the following to the form styling: eb92e05
    • Refs #141204 modified path of theme folder location for image selection f8cca45
    • Refs #141204 added missing mobileScrollbarWidth variables introduced as part of the mobile navigation pull request 444c78d
    • Refs #140454 reference font and image path from ~volto-themes instead of relative ec93ed3
    • Refs #141204 ensure that Volto doesn't crash when site module is set to eea: 51f2f27
    • Refs #141204 added tiny size prop to Breadcrumbs in order to have it as 12px 56a12e2

    0.0.1 - 2021-11-17

    🛠️ Others

    + \ No newline at end of file diff --git a/docs/index.html b/docs/index.html index c04e0302f0..18311e14e7 100644 --- a/docs/index.html +++ b/docs/index.html @@ -5,13 +5,13 @@ Welcome to EEA Design System Homepage | EEA Design System - +

    EEA Design System

    Creating a consistent user experience for our digital products

    Get started

    I am a...

    Web developer

    Design system for web developers

    Web designer

    Design system for web designers

    Web content creator

    Tips and tricks for writing for the web

    Publication writer

    Writing manual for publications

    Publication designer

    Design system for publications

    Data scientist

    Design system for data scientists

    - + \ No newline at end of file diff --git a/website/docs/2-whatsnew.md b/website/docs/2-whatsnew.md index 0282334e5f..50284dc72d 100644 --- a/website/docs/2-whatsnew.md +++ b/website/docs/2-whatsnew.md @@ -6,7 +6,48 @@ 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). -### [Unreleased](https://github.com/eea/volto-eea-design-system/compare/0.3.1...HEAD) - 2022-05-31T14:06:35.648Z +### [Unreleased](https://github.com/eea/volto-eea-design-system/compare/0.4.0...HEAD) - 2022-06-01T11:30:27.373Z + +#### :rocket: New Features + +- feat(languageLabeledIcon) : add new component [`110558e`](https://github.com/eea/volto-eea-design-system/commit/110558eeec37d5b5f616a95298a313ba230dd6f4) +- feat(LanguageLabeledIcon):add new component [`d00200c`](https://github.com/eea/volto-eea-design-system/commit/d00200c278e1dab02b449b460a325e0f2e7b8ccd) +- feat(newTabLabeledIcon) : add new component [`8f5cd31`](https://github.com/eea/volto-eea-design-system/commit/8f5cd31257a306a58c1d9cdbf7cb428701412369) +- feat(labeledIconGroup) : add new component [`787d648`](https://github.com/eea/volto-eea-design-system/commit/787d648342d78c4f9d28fde9d08e83089ef7b08f) +- feat(DownLoadLabeledIcon) : add new component [`6ea2fa1`](https://github.com/eea/volto-eea-design-system/commit/6ea2fa1ec17ce235401a8ac741afa8fede920d26) + +#### :bug: Bug Fixes + +- fix(LabeledIcon) : fix lint errors [`91b042f`](https://github.com/eea/volto-eea-design-system/commit/91b042f8c16bd3e99659c1c24a5f2a946c72b03f) +- fix(LabeledIconGroup) : fix links for tests [`daa1065`](https://github.com/eea/volto-eea-design-system/commit/daa10653ca37f3e83302e2ebcc566b5f5ec4c4d9) +- fix(LanguageLabeledIcon):bug fix & languages change [`1436e2b`](https://github.com/eea/volto-eea-design-system/commit/1436e2bc270f8f079f07b7909254bd2e6e087084) +- fix(LabeledIconGroup):fix based on Langauge & Download Labeled icon components changes [`3015864`](https://github.com/eea/volto-eea-design-system/commit/3015864ce740f534aa204402f85a9f392e342513) +- fix(newTabLabeledIcon) : add link item [`b1a9ada`](https://github.com/eea/volto-eea-design-system/commit/b1a9ada3dd7dae9e1841cfde5319a6ab37b15de2) +- fix(Labeled Icons):minor bug fix [`00f3022`](https://github.com/eea/volto-eea-design-system/commit/00f3022cdc2bfad634707f0d6d05768868f599be) + +#### :nail_care: Enhancements + +- refactor(labeledIcons): adjust new tab labeled icon to figma and replace px with rems [`904615d`](https://github.com/eea/volto-eea-design-system/commit/904615d789ea711678f43ce9f9d02a450289031f) +- refactor(LanguageLabeledIcon):implement with pop up [`0f3dd8f`](https://github.com/eea/volto-eea-design-system/commit/0f3dd8f0388484f94351a0ab0798ab53e84c9229) +- refactor(labeledIcon): add group wrapper in labeled icon stories [`4b7dd31`](https://github.com/eea/volto-eea-design-system/commit/4b7dd314230145b6239fd800d41f546ab5d9eebb) +- refactor(DownloadLabeledIcon):implement with pop up [`aa61f9b`](https://github.com/eea/volto-eea-design-system/commit/aa61f9b7d449c08c08bc4c004da6a0458598c828) +- refactor(labeledIcons): adjust language labeled icon to figma [`5741e3d`](https://github.com/eea/volto-eea-design-system/commit/5741e3d2e95665ef12670335b12d29cfbf998fdc) +- refactor(labeledIcons): adjust download icon to figma and replace px with rems [`4ae8530`](https://github.com/eea/volto-eea-design-system/commit/4ae85307a62526fed75ef0b1d37ad59076370b5a) +- refactor(LanguageLabeledIcons):minor storybook change [`78f5544`](https://github.com/eea/volto-eea-design-system/commit/78f55442a80cbc2f716ba81274ed08204e3c502a) +- refactor(LanguageLabeledIcon): set language code to uppercase and minor storybook change [`ac28693`](https://github.com/eea/volto-eea-design-system/commit/ac286931282c0a69bc6d7803e96cbe302db8994f) +- refactor(labeledIcon): adjust paddings [`9c1ecdd`](https://github.com/eea/volto-eea-design-system/commit/9c1ecddc52c81be1d952d0af67862a284eba9eec) +- refactor(labeledIcons): update margins for group labeled icons [`5fa5ca9`](https://github.com/eea/volto-eea-design-system/commit/5fa5ca9103a5d8ad1510c90cc8c46d0c82abcc63) +- refactor(labeledIcons): add variable for icon color [`9f9d3cb`](https://github.com/eea/volto-eea-design-system/commit/9f9d3cba5115c5c91aaaca49c1f834950400673a) +- refactor(labeledIcons): update colors on download links [`c042642`](https://github.com/eea/volto-eea-design-system/commit/c04264229c91bfdea927fd22f4ee1e8ddbcebd5c) + +#### :house: Internal changes + +- chore(labeledIconGroup) : lint changes [`535cee4`](https://github.com/eea/volto-eea-design-system/commit/535cee4795dff75b35856cb4406a9bd33ee07ca4) +- style(downloadLabeledIcon) : fix styling [`6d8e3ac`](https://github.com/eea/volto-eea-design-system/commit/6d8e3acb3bac1a4174d4bb526d6188cb5e5f8faa) +- style(downloadLabeledIcon) : fix alignment [`4558017`](https://github.com/eea/volto-eea-design-system/commit/455801701d2958515885ba2c398312f0c56057b0) +- chore(LabeledIconGroup) : lint changes [`ab36476`](https://github.com/eea/volto-eea-design-system/commit/ab364763bb2526adbbb7fc3c656a16b497568940) + +### [0.4.0](https://github.com/eea/volto-eea-design-system/compare/0.3.1...0.4.0) - 2022-06-01 #### :rocket: New Features @@ -20,17 +61,15 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog). - fix(tokens): hsla function for shadows [`b8e5d37`](https://github.com/eea/volto-eea-design-system/commit/b8e5d37a6e88321b1e2daf995b407c4ddd6e866e) - fix(tokens): remove css var from less file [`a9c4224`](https://github.com/eea/volto-eea-design-system/commit/a9c422476b412287713a6b475406615c3aed2aca) - fix(carousel):add storybook controls descriptions [`269a603`](https://github.com/eea/volto-eea-design-system/commit/269a60383ed1e54fc57e26d4eed6b37d1da32236) -- fix(table): Set responsive breakpoint to @tabletBreakpoint [`067e018`](https://github.com/eea/volto-eea-design-system/commit/067e01842030bfa5639e2a55cb8af5047bb2996f) - fix(item): remove image width css from item.less [`7b21cb2`](https://github.com/eea/volto-eea-design-system/commit/7b21cb2d5ddf6a6f72646f47fd268a0bd7af757d) +- fix(table): Set responsive breakpoint to @tabletBreakpoint [`067e018`](https://github.com/eea/volto-eea-design-system/commit/067e01842030bfa5639e2a55cb8af5047bb2996f) #### :nail_care: Enhancements -- refactor(docusaurus): restructured and improved sections navigation #174 [`b47b026`](https://github.com/eea/volto-eea-design-system/commit/b47b0266ffd6baeaf1a5aea1a7ab22c909976de1) - refactor(item): import item.less in theme definitions [`c516374`](https://github.com/eea/volto-eea-design-system/commit/c51637480192dbece828616010174648ac865e2e) -- change(tokens): rename gap to space and added em spaces [`719efc4`](https://github.com/eea/volto-eea-design-system/commit/719efc44070ef87f049a92e4da96bb111e9fc8ff) -- refactor(tokens): add 12 and 14px font size token #176 [`3681147`](https://github.com/eea/volto-eea-design-system/commit/368114729536f03dd85c2d3565b984c3bdfe3a72) - refactor(Label):add corner,ribbon & basic label stories and styles [`e2bbbb9`](https://github.com/eea/volto-eea-design-system/commit/e2bbbb947113a59127f91b86917ef0edbf36ab16) - refactor(Label):style changes based on label importance class [`ce4d5d1`](https://github.com/eea/volto-eea-design-system/commit/ce4d5d1a5bf1b1183242a253e37c509d61f82b8c) +- change(tokens): rename gap to space and added em spaces [`719efc4`](https://github.com/eea/volto-eea-design-system/commit/719efc44070ef87f049a92e4da96bb111e9fc8ff) - refactor(item): add classes for size, set default to tile and add controls for grouped items [`d5a0405`](https://github.com/eea/volto-eea-design-system/commit/d5a0405abba4e5f5d36f899dc9e47f43a96d5e49) - refactor(tokens): add borders, shadows, shapes and z-index tokens [`7069106`](https://github.com/eea/volto-eea-design-system/commit/7069106c2b0ada9cdbad63249b4ada7fde72e05f) - change(tokens): name spacing tokens gaps and added missing values up to 80px as documented [`9fbd912`](https://github.com/eea/volto-eea-design-system/commit/9fbd912a6f027150149d82678f88885a939120b0) @@ -43,20 +82,23 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog). - change(tokens): added size tokens to be used for width of elements [`cda5dea`](https://github.com/eea/volto-eea-design-system/commit/cda5dea1f6ad1ae980c89999d323d7b385894025) - change(utilities): values need important rule [`96150d9`](https://github.com/eea/volto-eea-design-system/commit/96150d9a22cb6be6f338f1e9d052cbd65e3602fc) - change(tokens): added also rem space values [`aedbbdd`](https://github.com/eea/volto-eea-design-system/commit/aedbbddaf7f8be88ed2f8a2b8c21b60752896c53) -- refactor(tokens): add 14px font size token [`8d8695d`](https://github.com/eea/volto-eea-design-system/commit/8d8695dce62e7f29af01447308460e4fe3f72b21) - change(tokens): updated z-index tokens with negative values [`404efe4`](https://github.com/eea/volto-eea-design-system/commit/404efe4244d67276b435e60a1d7a69aaa90e3d8a) +- refactor(tokens): add 14px font size token [`8d8695d`](https://github.com/eea/volto-eea-design-system/commit/8d8695dce62e7f29af01447308460e4fe3f72b21) +- refactor(docusaurus): restructured and improved sections navigation #174 [`b47b026`](https://github.com/eea/volto-eea-design-system/commit/b47b0266ffd6baeaf1a5aea1a7ab22c909976de1) +- refactor(tokens): add 12 and 14px font size token #176 [`3681147`](https://github.com/eea/volto-eea-design-system/commit/368114729536f03dd85c2d3565b984c3bdfe3a72) - refactor(tokens): remove conditional border radius [`f0fe5ad`](https://github.com/eea/volto-eea-design-system/commit/f0fe5ada7b74e9c87623dd2b2774283dd89b9a58) #### :house: Documentation changes - docs(website): created new sections, improved website navigation [`243f0be`](https://github.com/eea/volto-eea-design-system/commit/243f0be4d7fa6e988da0ca0f586f5ea478573eef) -- docs(docusaurus): copyedit, improved navigation [`998762a`](https://github.com/eea/volto-eea-design-system/commit/998762a5bd40d08f619c00743b66d82b43aed653) - docs(homepage): adding design system homepage with links for upcoming sections [`c9a9685`](https://github.com/eea/volto-eea-design-system/commit/c9a968508acff74d1182e68cf049046dafd564c5) +- docs(docusaurus): copyedit, improved navigation [`998762a`](https://github.com/eea/volto-eea-design-system/commit/998762a5bd40d08f619c00743b66d82b43aed653) - docs(website): restructuring, moved current DS docs to new folder [`8bb612f`](https://github.com/eea/volto-eea-design-system/commit/8bb612f1313dfc739d7912aa2e3252f468e1122f) - docs(homepage): copy editing [`ee37d6f`](https://github.com/eea/volto-eea-design-system/commit/ee37d6f1d282b973af744f4305c0eb94c0993113) #### :hammer_and_wrench: Others +- Release 0.4.0 [`f4bc509`](https://github.com/eea/volto-eea-design-system/commit/f4bc50928ab877f3670b181dbe6e8cfff7fa2daa) - feature(homepage): added Item group with icons #167 [`2ec99f5`](https://github.com/eea/volto-eea-design-system/commit/2ec99f53aeb183b24073be4014a9c2ec30d5235c) - feature(tokens): added borders, z-index, shadows tokens #171 [`74c1788`](https://github.com/eea/volto-eea-design-system/commit/74c178837cedc7ee9fc55effde1096dc03245574) - feature(tokens): added initial color design tokens #169 [`da3eae0`](https://github.com/eea/volto-eea-design-system/commit/da3eae05d07783aa5eadaed5d508ee3be8acc47d) From 2cf78e57a12f05125daab8ee9ba2359fa9ac9a43 Mon Sep 17 00:00:00 2001 From: EEA Jenkins <@users.noreply.github.com> Date: Thu, 2 Jun 2022 16:34:28 +0000 Subject: [PATCH 29/29] Automated release 0.4.1 --- CHANGELOG.md | 35 +++++++++++++++++++++++++++++++++++ package.json | 2 +- 2 files changed, 36 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 43608ddce3..643eb3ad24 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,8 +4,43 @@ 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.4.1](https://github.com/eea/volto-eea-design-system/compare/0.4.0...0.4.1) + +- [R3] Labeled icons [`#137`](https://github.com/eea/volto-eea-design-system/pull/137) +- Autobuild of docusaurus docs [`724be48`](https://github.com/eea/volto-eea-design-system/commit/724be48bebb5421663969b694fca79181f007977) +- refactor(LanguageLabeledIcons):minor storybook change [`78f5544`](https://github.com/eea/volto-eea-design-system/commit/78f55442a80cbc2f716ba81274ed08204e3c502a) +- refactor(LanguageLabeledIcon): set language code to uppercase and minor storybook change [`ac28693`](https://github.com/eea/volto-eea-design-system/commit/ac286931282c0a69bc6d7803e96cbe302db8994f) +- refactor(labeledIcon): adjust paddings [`9c1ecdd`](https://github.com/eea/volto-eea-design-system/commit/9c1ecddc52c81be1d952d0af67862a284eba9eec) +- refactor(labeledIcon): add group wrapper in labeled icon stories [`4b7dd31`](https://github.com/eea/volto-eea-design-system/commit/4b7dd314230145b6239fd800d41f546ab5d9eebb) +- fix(LabeledIconGroup):fix based on Langauge & Download Labeled icon components changes [`3015864`](https://github.com/eea/volto-eea-design-system/commit/3015864ce740f534aa204402f85a9f392e342513) +- refactor(LanguageLabeledIcon):implement with pop up [`0f3dd8f`](https://github.com/eea/volto-eea-design-system/commit/0f3dd8f0388484f94351a0ab0798ab53e84c9229) +- refactor(DownloadLabeledIcon):implement with pop up [`aa61f9b`](https://github.com/eea/volto-eea-design-system/commit/aa61f9b7d449c08c08bc4c004da6a0458598c828) +- refactor(labeledIcons): update margins for group labeled icons [`5fa5ca9`](https://github.com/eea/volto-eea-design-system/commit/5fa5ca9103a5d8ad1510c90cc8c46d0c82abcc63) +- refactor(labeledIcons): update colors on download links [`c042642`](https://github.com/eea/volto-eea-design-system/commit/c04264229c91bfdea927fd22f4ee1e8ddbcebd5c) +- refactor(labeledIcons): adjust language labeled icon to figma [`5741e3d`](https://github.com/eea/volto-eea-design-system/commit/5741e3d2e95665ef12670335b12d29cfbf998fdc) +- refactor(labeledIcons): adjust new tab labeled icon to figma and replace px with rems [`904615d`](https://github.com/eea/volto-eea-design-system/commit/904615d789ea711678f43ce9f9d02a450289031f) +- refactor(labeledIcons): add variable for icon color [`9f9d3cb`](https://github.com/eea/volto-eea-design-system/commit/9f9d3cba5115c5c91aaaca49c1f834950400673a) +- refactor(labeledIcons): adjust download icon to figma and replace px with rems [`4ae8530`](https://github.com/eea/volto-eea-design-system/commit/4ae85307a62526fed75ef0b1d37ad59076370b5a) +- fix(LanguageLabeledIcon):bug fix & languages change [`1436e2b`](https://github.com/eea/volto-eea-design-system/commit/1436e2bc270f8f079f07b7909254bd2e6e087084) +- fix(Labeled Icons):minor bug fix [`00f3022`](https://github.com/eea/volto-eea-design-system/commit/00f3022cdc2bfad634707f0d6d05768868f599be) +- feat(languageLabeledIcon) : add new component [`110558e`](https://github.com/eea/volto-eea-design-system/commit/110558eeec37d5b5f616a95298a313ba230dd6f4) +- chore(LabeledIconGroup) : lint changes [`ab36476`](https://github.com/eea/volto-eea-design-system/commit/ab364763bb2526adbbb7fc3c656a16b497568940) +- fix(LabeledIconGroup) : fix links for tests [`daa1065`](https://github.com/eea/volto-eea-design-system/commit/daa10653ca37f3e83302e2ebcc566b5f5ec4c4d9) +- chore(labeledIconGroup) : lint changes [`535cee4`](https://github.com/eea/volto-eea-design-system/commit/535cee4795dff75b35856cb4406a9bd33ee07ca4) +- feat(LanguageLabeledIcon):add new component [`d00200c`](https://github.com/eea/volto-eea-design-system/commit/d00200c278e1dab02b449b460a325e0f2e7b8ccd) +- feat(labeledIconGroup) : add new component [`787d648`](https://github.com/eea/volto-eea-design-system/commit/787d648342d78c4f9d28fde9d08e83089ef7b08f) +- fix(LabeledIcon) : fix lint errors [`91b042f`](https://github.com/eea/volto-eea-design-system/commit/91b042f8c16bd3e99659c1c24a5f2a946c72b03f) +- fix(newTabLabeledIcon) : add link item [`b1a9ada`](https://github.com/eea/volto-eea-design-system/commit/b1a9ada3dd7dae9e1841cfde5319a6ab37b15de2) +- feat(newTabLabeledIcon) : add new component [`8f5cd31`](https://github.com/eea/volto-eea-design-system/commit/8f5cd31257a306a58c1d9cdbf7cb428701412369) +- style(downloadLabeledIcon) : fix alignment [`4558017`](https://github.com/eea/volto-eea-design-system/commit/455801701d2958515885ba2c398312f0c56057b0) +- style(downloadLabeledIcon) : fix styling [`6d8e3ac`](https://github.com/eea/volto-eea-design-system/commit/6d8e3acb3bac1a4174d4bb526d6188cb5e5f8faa) +- feat(DownLoadLabeledIcon) : add new component [`6ea2fa1`](https://github.com/eea/volto-eea-design-system/commit/6ea2fa1ec17ce235401a8ac741afa8fede920d26) + #### [0.4.0](https://github.com/eea/volto-eea-design-system/compare/0.3.1...0.4.0) +> 1 June 2022 + +- Release [`#177`](https://github.com/eea/volto-eea-design-system/pull/177) - [Homepage] Carousel [`#161`](https://github.com/eea/volto-eea-design-system/pull/161) - [R2] Label [`#160`](https://github.com/eea/volto-eea-design-system/pull/160) - docs(homepage): adding homepage with links for upcoming sections [`#166`](https://github.com/eea/volto-eea-design-system/pull/166) diff --git a/package.json b/package.json index f7d55e5948..543f764350 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@eeacms/volto-eea-design-system", - "version": "0.4.0", + "version": "0.4.1", "description": "@eeacms/volto-eea-design-system: Volto add-on", "main": "src/index.js", "author": "European Environment Agency: IDM2 A-Team",