@eeacms/volto-eea-design-system 0.4.3 → 0.5.0

package/CHANGELOG.md

@@ -4,8 +4,137 @@ 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.5.0](https://github.com/eea/volto-eea-design-system/compare/0.4.5...0.5.0)
+
+- fix(header-dropdown): mobile text is now visible [`#111`](https://github.com/eea/volto-eea-design-system/pull/111)
+- fix(header): Internal links in mega menu [`d8ca135`](https://github.com/eea/volto-eea-design-system/commit/d8ca13558c3e8c336800791f2fea8a8d33a2b602)
+- Update package.json [`9dc3816`](https://github.com/eea/volto-eea-design-system/commit/9dc38165a95deca1faf2dfccdc03fd6cab3d8c54)
+- refactor(header): and mega menu to latest spec #114 [`44fcf68`](https://github.com/eea/volto-eea-design-system/commit/44fcf68be242f97ced852b28ac3ab820dc0e1045)
+- fix(header): show active menu when clicking on children [`a54fa67`](https://github.com/eea/volto-eea-design-system/commit/a54fa67a1a92e2ab4216e6d149f66e1ee53aab89)
+- change(header): use Link instead of a tag for menu items [`9812b3f`](https://github.com/eea/volto-eea-design-system/commit/9812b3fba7b8305399d6972daf135b8a2d88e876)
+- change(header): hide first link(home) from header menu on site [`ae7f3b9`](https://github.com/eea/volto-eea-design-system/commit/ae7f3b9385620eb3d840dd90f512e37cd8556a6d)
+- change(header): renamed mega menu items href attribute to url [`3ed8144`](https://github.com/eea/volto-eea-design-system/commit/3ed8144589f87a9ad219c97193863c999a72cb6d)
+- change(header): disable sticky setting until feature is more stable [`1d7af95`](https://github.com/eea/volto-eea-design-system/commit/1d7af954c85cb6a8a657c1625e4ae863e562346a)
+- refactor(header): add link for menu title inside desktop mega menu [`24355d0`](https://github.com/eea/volto-eea-design-system/commit/24355d000b2bd808b2031cd2b78e60cafb9ad5b1)
+- change(megamenu): typo correction and key setting on list.items [`96d2c4f`](https://github.com/eea/volto-eea-design-system/commit/96d2c4fbfa722d22a215e8d27f1400e65fe9476e)
+- Autobuild of docusaurus docs [`e75be30`](https://github.com/eea/volto-eea-design-system/commit/e75be303421cd7ea70b0a15998636c6416459869)
+- feat(hero): added storybook implementation of hero component #172 [`17b9d16`](https://github.com/eea/volto-eea-design-system/commit/17b9d1693e31bf7b3b41ca84be7bd21f07065674)
+- Autobuild of docusaurus docs [`fe9d209`](https://github.com/eea/volto-eea-design-system/commit/fe9d209da5e493a6ce5c7fee63a47ba3d9788530)
+- feature(item): added themes to item icons #190 [`a6a2907`](https://github.com/eea/volto-eea-design-system/commit/a6a2907df09575a18fb6e81dc52e8d6651eff118)
+- Override tile image in .block parrent [`005655d`](https://github.com/eea/volto-eea-design-system/commit/005655ddff6f45e211f1ff8156b0b7efa1e47a2e)
+- Move item icon themes to item.overrides [`31e8921`](https://github.com/eea/volto-eea-design-system/commit/31e8921f4ee4d92ba3a9c58275b41dd3101cffd2)
+- Override only the width [`8d49270`](https://github.com/eea/volto-eea-design-system/commit/8d4927084e5daedcb69e6f3a57cab73a9016a55f)
+- Add end of line [`51639d8`](https://github.com/eea/volto-eea-design-system/commit/51639d804a2b84f66373fb77c569bcc43b22e303)
+- Add item themes; override .block .ui.image width based on size [`06010db`](https://github.com/eea/volto-eea-design-system/commit/06010db21398638d46d2e007317d72a7aff7e7d9)
+- refactor(hero): add full-heigh control to adjust height [`a45cb7c`](https://github.com/eea/volto-eea-design-system/commit/a45cb7c599cdc11426207001e67d8f7d727233fe)
+- refactor(utilities): update hex with color token [`8dc65ef`](https://github.com/eea/volto-eea-design-system/commit/8dc65ef55a62dcb32b6eb8a684524a8dc1fa6ba6)
+- refactor(headings): update heading sizes for mobile [`19f3cca`](https://github.com/eea/volto-eea-design-system/commit/19f3ccacaf2c744b5f5c2ec8635773de7ef0016b)
+- refactor(header): minor updates on colors and widths [`a70129f`](https://github.com/eea/volto-eea-design-system/commit/a70129fd929fedb344a47e049cca94274e84a3b1)
+- refactor(hero):make button variant and inverted different button controls [`7e182ca`](https://github.com/eea/volto-eea-design-system/commit/7e182ca9ecdb76507205d84f83cad6a79dd74a03)
+- fix(header): fix accessibility issue by David [`783dcec`](https://github.com/eea/volto-eea-design-system/commit/783dcec0d140e6e6e568d0f82833dcbf8a5c7d3d)
+- fix(header): accessibility and dropdown possition fixes [`505ac36`](https://github.com/eea/volto-eea-design-system/commit/505ac36a27d86e620fb5af515a0b8b5979610f0a)
+- refactor(header):main bar sticky on scroll up [`9c9e7c6`](https://github.com/eea/volto-eea-design-system/commit/9c9e7c6f9651c0663a1eab1856d7324a73afb2de)
+- refactor(megaMenu): update mega menu in header component [`2d1ce45`](https://github.com/eea/volto-eea-design-system/commit/2d1ce454553d116efa96288079b8b77649e10abb)
+- refactor(header): add control for inverted logo [`023ca45`](https://github.com/eea/volto-eea-design-system/commit/023ca45e6f263166211cbea0d63b1938d11221da)
+- refactor(hero): move quoted utility to h2 tag [`7376676`](https://github.com/eea/volto-eea-design-system/commit/7376676b4875494f16c49945f6b5dac19c6b8009)
+- refactor(header): update main section and and add color variations [`f2f0fd1`](https://github.com/eea/volto-eea-design-system/commit/f2f0fd1de7c04eff4b2a9b62d03dd13a1b0d69bc)
+- refactor(header): update structure and variables of top bar [`af70909`](https://github.com/eea/volto-eea-design-system/commit/af709094f94f0cc2e2309b1aedb376e45dc7f136)
+- refactor(hero):prettier & style changes [`d846884`](https://github.com/eea/volto-eea-design-system/commit/d84688440417a430afd9fd24f4c8cfeef0121203)
+- refactor(hero): align hero's text and meta seperately [`4fa958f`](https://github.com/eea/volto-eea-design-system/commit/4fa958f7c7cc6d331a8eb7aaf25dc44d6cd3632a)
+- refactor(hero):add button variant controls [`f362a7b`](https://github.com/eea/volto-eea-design-system/commit/f362a7b2ec273131fa0876f23b74c740c7217b3a)
+- refactor(hero): update variables with new design tokens [`1d97922`](https://github.com/eea/volto-eea-design-system/commit/1d9792231c50f12fd68364e201054f6ab0926665)
+- feat(hero): add hero block component and stories [`6019fc8`](https://github.com/eea/volto-eea-design-system/commit/6019fc843ec14a8afc7558e92c2d4b4bb14ee199)
+- refactor(header): add control for main section stickiness [`2f07572`](https://github.com/eea/volto-eea-design-system/commit/2f07572f78074137e7e6a49585273210ed5cedcb)
+- change(header): disabled active menu when clicking on globalnav links [`3f7b5ee`](https://github.com/eea/volto-eea-design-system/commit/3f7b5eedb038b51fbae8a14a683dc6adc919549b)
+- fix(header): transparency class should apply on the current bg color or image [`f9a0033`](https://github.com/eea/volto-eea-design-system/commit/f9a0033c5538cb19f08f26cf28d47954cc52607d)
+- refactor(header) add position sticky & transparent for main section [`29df772`](https://github.com/eea/volto-eea-design-system/commit/29df772edfe23b1752aa3d184659eea90c3c9221)
+- refactor(header): add control that toggles transparency class on main section [`b8d4bdb`](https://github.com/eea/volto-eea-design-system/commit/b8d4bdb9c527f102ffd3718f32bf1a43309a9bb4)
+- refactor(Language List): add less variables [`7ccc1cc`](https://github.com/eea/volto-eea-design-system/commit/7ccc1ccf57419b6eecbf71d479db72b84428d43a)
+- refactor(Language List): render language dropdown as ul and li elements [`3617442`](https://github.com/eea/volto-eea-design-system/commit/3617442da78af07d3f473d0c43c47dd48c9b2ac3)
+- change(header): mark top level active menu item [`665c449`](https://github.com/eea/volto-eea-design-system/commit/665c449bc2667cc1471a4b97923c897ad3506792)
+- change(header): target link instead of span directly [`9e865fb`](https://github.com/eea/volto-eea-design-system/commit/9e865fbb5b256196756c3d84de397296ac0b447a)
+- change(header): introduced item class to the mega menu link content [`00ca376`](https://github.com/eea/volto-eea-design-system/commit/00ca376ea4cf1de4851e84567b97c374ee7f66e3)
+- fix(header): dropdown disappears after window resize #116 [`fc7dd8b`](https://github.com/eea/volto-eea-design-system/commit/fc7dd8bd7911421fb734a696a2dd5d3ad3b652b0)
+- change(header): use viewport width for changing mobile text in header dropdowns [`b50fa58`](https://github.com/eea/volto-eea-design-system/commit/b50fa585c0abeedc04a46395f08e50a9e112c430)
+- update storybook header.topdropdown [`e58ac08`](https://github.com/eea/volto-eea-design-system/commit/e58ac0821af56c06272e3373383647cbbff20978)
+- rename to viewportWidth [`32162e7`](https://github.com/eea/volto-eea-design-system/commit/32162e7c695774bbb68ac63a0008e8b148f1e9f5)
+- don't connect component to store [`470b8ba`](https://github.com/eea/volto-eea-design-system/commit/470b8bade5e8f2eaabb20a7bb02c8e82ca42f8a0)
+- use volto-screen-helper width [`ea156aa`](https://github.com/eea/volto-eea-design-system/commit/ea156aad1100166ba78635163cfacdcfb913c1d4)
+- fix(header): dropdowns disappear on resize [`52338fd`](https://github.com/eea/volto-eea-design-system/commit/52338fd3e711f4918612e052dc2034a8d9bd40bd)
+- fix(header-topdropdown): dedupe html dropdown elements for topdropdowns #115 [`f10a7a8`](https://github.com/eea/volto-eea-design-system/commit/f10a7a8743a5fb2cecd0c3374ec9d894e914143f)
+- behave as mobile under 480 only [`11b99e1`](https://github.com/eea/volto-eea-design-system/commit/11b99e15cb83245a32bb04f3937f5b95a60b1e95)
+- make it account for all mobile-s,m,l [`69e23ae`](https://github.com/eea/volto-eea-design-system/commit/69e23ae8d12042f241dc53c9e296c340d5b17089)
+- fix(header-topdropdown): dedupe html elements for topdropdowns [`cd8a2a7`](https://github.com/eea/volto-eea-design-system/commit/cd8a2a7ea091e81b736438f7c2a87c254af1b092)
+- refactor(header): restore union dropdown after implementation [`7e98bab`](https://github.com/eea/volto-eea-design-system/commit/7e98bab497ee10ad89d2dfed76c7117b633206fe)
+- fix(header): mobile dropdown now visible [`34371b4`](https://github.com/eea/volto-eea-design-system/commit/34371b436f2ec100f3920f78de49983ba16679b0)
+- Add divider content for metadata field in Banner [`327ad1c`](https://github.com/eea/volto-eea-design-system/commit/327ad1c5fdca0d376d04fd36084b940e5dd016ab)
+- refactor(header): update search input [`368962e`](https://github.com/eea/volto-eea-design-system/commit/368962eabb668e2ec1bdcd18ae81658e7b1d911b)
+- refactor(header): remove unused imports [`7e232db`](https://github.com/eea/volto-eea-design-system/commit/7e232db6ce0b2553be79d98d8497fa06f548b772)
+- refactor(header): update search input and file endings [`afab36f`](https://github.com/eea/volto-eea-design-system/commit/afab36f96f245e197eff528cb1d9e6fea45bc7ba)
+- refactor(header): add fluid font sizes [`5f2743e`](https://github.com/eea/volto-eea-design-system/commit/5f2743e39107fd1bd00a54e03bf92963eb9853f2)
+- refactor(header): minor responsive fixes [`16a0006`](https://github.com/eea/volto-eea-design-system/commit/16a000634505c9e8f8b310860a30b62798a0fb87)
+
+#### [0.4.5](https://github.com/eea/volto-eea-design-system/compare/0.4.4...0.4.5)
+
+> 8 June 2022
+
+- change(tabs,footer): tabs styling and react warning fixes [`#188`](https://github.com/eea/volto-eea-design-system/pull/188)
+- Autobuild of docusaurus docs [`728c62b`](https://github.com/eea/volto-eea-design-system/commit/728c62b1ddc9ea5e7f551230b657897c6eafbc57)
+- change(tabs): Add style for tabs accordion template #187 [`fb8adbf`](https://github.com/eea/volto-eea-design-system/commit/fb8adbf84ac564a14d45bb6e8f4e1661811672d5)
+- Autobuild of docusaurus docs [`06fbae7`](https://github.com/eea/volto-eea-design-system/commit/06fbae751c4f14ace793d4aa51f1ba0b52fec735)
+- change(footer): avoid react error by providing key prop to grid column [`ef0b193`](https://github.com/eea/volto-eea-design-system/commit/ef0b1937d614a889a0c2117e483a834ed1aec1e3)
+- Cleanup [`d4b9637`](https://github.com/eea/volto-eea-design-system/commit/d4b9637ebd2d6c015f8d4323551c6cbc4b7506df)
+- Add style for tabs accordion template [`a109983`](https://github.com/eea/volto-eea-design-system/commit/a10998372a268b99991f7dda55103149f29d00cb)
+
+#### [0.4.4](https://github.com/eea/volto-eea-design-system/compare/0.4.3...0.4.4)
+
+> 8 June 2022
+
+- feat(footer,divider): refactoring and volto implementation [`#186`](https://github.com/eea/volto-eea-design-system/pull/186)
+- Make dots container of slick slider relative [`#184`](https://github.com/eea/volto-eea-design-system/pull/184)
+- [R3] Divider component [`#170`](https://github.com/eea/volto-eea-design-system/pull/170)
+- Remove a tag for menu item -> use only the class [`#183`](https://github.com/eea/volto-eea-design-system/pull/183)
+- Autobuild of docusaurus docs [`7f0962d`](https://github.com/eea/volto-eea-design-system/commit/7f0962d26986e801c46b3390a90640b4f5f8cd24)
+- fix(divider): Text colors and transform [`e524e10`](https://github.com/eea/volto-eea-design-system/commit/e524e1002bb0700ea69782cf5a95c6073ab383d2)
+- Autobuild of docusaurus docs [`1652dda`](https://github.com/eea/volto-eea-design-system/commit/1652dda1428a7e4736c0d1b818a0fe27255d12ea)
+- refactor(footer):  to latest figma design #182 [`3e0ba2b`](https://github.com/eea/volto-eea-design-system/commit/3e0ba2b659db9dc1b140d853840a06bd3ce31cab)
+- Autobuild of docusaurus docs [`58402e0`](https://github.com/eea/volto-eea-design-system/commit/58402e040a8a5080b4a07cd575fb9fe87624b593)
+- change(Divider): Rename color property to theme [`0deffc8`](https://github.com/eea/volto-eea-design-system/commit/0deffc823609d23131a85bc180e4a3f5a67a64aa)
+- change(footer): tweaked column sizes to the values before my changes [`fdf2718`](https://github.com/eea/volto-eea-design-system/commit/fdf271868e44bce2904cc28c6fa924ee4c9ba759)
+- refactor(footer): move subfooter logic to the proper component #185 [`3034577`](https://github.com/eea/volto-eea-design-system/commit/303457719128c9699dd34939bd8db2b647977667)
+- change(footer): added managed by section as properties [`9328fc3`](https://github.com/eea/volto-eea-design-system/commit/9328fc3084baf22439e1892d256d9a167b911849)
+- Autobuild of docusaurus docs [`d171921`](https://github.com/eea/volto-eea-design-system/commit/d1719215a0ec3c52474b79d647618e329a627e08)
+- lint fix [`657cf4e`](https://github.com/eea/volto-eea-design-system/commit/657cf4ed917c4ff992aa033c3d9f4884a949d86d)
+- change(footer): moved SubFooter logic to SubFooter.jsx from Footer story [`902383a`](https://github.com/eea/volto-eea-design-system/commit/902383a0bb3446dc69237099bd429ead5e30a6c1)
+- Remove unnecessary spaces [`d137981`](https://github.com/eea/volto-eea-design-system/commit/d137981430809345bfb3ad494e7ab981c93c3e51)
+- Autobuild of docusaurus docs [`5b0be9c`](https://github.com/eea/volto-eea-design-system/commit/5b0be9cc97e1166b983f46d5732e5c57f4e970d0)
+- refactor(testimonial): changed divider color to secondary [`84282f9`](https://github.com/eea/volto-eea-design-system/commit/84282f960ab22ccb8403e975c055c61d1023193a)
+- Autobuild of docusaurus docs [`e856488`](https://github.com/eea/volto-eea-design-system/commit/e85648834e23c02670957b8463d4e0fd3a649728)
+- fix(footer): story aria labels for social media links [`254bdc7`](https://github.com/eea/volto-eea-design-system/commit/254bdc7ba944943f5d08a71f9d0a3a31bdc06044)
+- docs(divider): switch to secondary color [`239844b`](https://github.com/eea/volto-eea-design-system/commit/239844be374a2f6bc4667e7ab3d2f52bfdc181ad)
+- perf(storybook): added storybook favicon [`38eabc3`](https://github.com/eea/volto-eea-design-system/commit/38eabc3124c85dd56bf5c68c0fb1e967c39055ec)
+- docs(divider): showcase path fix [`d5ea03f`](https://github.com/eea/volto-eea-design-system/commit/d5ea03f60034edc918054aa273e44b84b2537716)
+- refactor(footer): update links and logo align [`7afbab9`](https://github.com/eea/volto-eea-design-system/commit/7afbab9b37982a557ac8bfa4430205ce912c3b8b)
+- refactor(footer): logo updates and adjustments [`101bc9d`](https://github.com/eea/volto-eea-design-system/commit/101bc9dfe4136240457f335de867a83c28d59339)
+- fix(divider): restore space between classes [`c595c15`](https://github.com/eea/volto-eea-design-system/commit/c595c152c144463f33757157ed7d6797ae31ceed)
+- refactor(footer): update controls [`b0b872b`](https://github.com/eea/volto-eea-design-system/commit/b0b872b1415c9792a5886f619195f9c0471ea564)
+- refactor(footer): use tokens and adjust spacing [`2cb1669`](https://github.com/eea/volto-eea-design-system/commit/2cb166949913f725271050e863b38e7630748135)
+- refactor(Divider):add divider with content inside story [`e2d66dc`](https://github.com/eea/volto-eea-design-system/commit/e2d66dca901fa189d69b65239dc34b1969097be8)
+- refactor(footer): use remix icons for social links [`5ef9aa2`](https://github.com/eea/volto-eea-design-system/commit/5ef9aa2cebb6f96857a1920cefbf7e367b4d7c28)
+- refactor(Divider_:remove green color class & add tertiary [`95f3018`](https://github.com/eea/volto-eea-design-system/commit/95f30186bc1768e08f00ad7d5ffa2a70402ac553)
+- refactor(Divider):remove clean class and use fitted prop [`8d2be35`](https://github.com/eea/volto-eea-design-system/commit/8d2be350dcc44fd56b5fbfb791fb6b2a45bd8a52)
+- refactor(footer): update logos and less structure [`66b8e0f`](https://github.com/eea/volto-eea-design-system/commit/66b8e0f12825968d94f7d572f2823d9a8a3a239b)
+- refactor(footer): first footer updates [`d18a2ee`](https://github.com/eea/volto-eea-design-system/commit/d18a2ee59d0deb143075d8dfeb949898ad1f6399)
+- refactor(divider): remove custom divider from theme config [`a0409e8`](https://github.com/eea/volto-eea-design-system/commit/a0409e8df3c9ba043717140455369a3630f0da85)
+- refactor(testimonial): update divider [`784450a`](https://github.com/eea/volto-eea-design-system/commit/784450abdf395318fe89d8d3d0a1e398393cc93c)
+- refactor(divider): remove custom divider [`d4870d2`](https://github.com/eea/volto-eea-design-system/commit/d4870d2252ad216e82213fa1f94cc39609ae676d)
+- feat(divider): create story for divider [`b10a2e0`](https://github.com/eea/volto-eea-design-system/commit/b10a2e08b14962bed9f13317754f4124ee60d313)
+
 #### [0.4.3](https://github.com/eea/volto-eea-design-system/compare/0.4.2...0.4.3)
 
+> 3 June 2022
+
+- Release [`#181`](https://github.com/eea/volto-eea-design-system/pull/181)
 - Autobuild of docusaurus docs [`adc7b64`](https://github.com/eea/volto-eea-design-system/commit/adc7b64312b98a56a893bc99571149353a8c0f00)
 - fix(edit): Fix columns/accordion inner toolbar padding [`fafbb52`](https://github.com/eea/volto-eea-design-system/commit/fafbb525baa60c339906dc6a33d2f9418d050be6)
 - Autobuild of docusaurus docs [`12f9a51`](https://github.com/eea/volto-eea-design-system/commit/12f9a51906a6b444857c2b2c988436eeab412064)

package/package.json

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

package/src/semantic.less

@@ -233,10 +233,6 @@
   @import '@eeacms/volto-eea-design-system/../theme/themes/eea/extras/inpageNavigation';
 }
 
-& {
-  @import '@eeacms/volto-eea-design-system/../theme/themes/eea/extras/divider';
-}
-
 & {
   @import '@eeacms/volto-eea-design-system/../theme/themes/eea/extras/testimonial';
 }
@@ -276,3 +272,7 @@
 & {
   @import '@eeacms/volto-eea-design-system/../theme/themes/eea/extras/languageLabeledIcon';
 }
+
+& {
+  @import '@eeacms/volto-eea-design-system/../theme/themes/eea/extras/hero';
+}

package/src/ui/Divider/Divider.stories.jsx

@@ -0,0 +1,170 @@
+import React from 'react';
+import { Divider, Container } from 'semantic-ui-react';
+
+export default {
+  title: 'Components/Divider',
+  component: Divider,
+  argTypes: {
+    theme: {
+      options: ['default', 'primary', 'secondary', 'tertiary'],
+      control: { type: 'select' },
+      description: 'Variations of the divider',
+      table: {
+        type: {
+          summary: 'string',
+        },
+        defaultValue: {
+          summary: 'default',
+        },
+      },
+    },
+    section: {
+      description:
+        'A divider can provide greater margins to divide sections of content.',
+      table: {
+        type: {
+          summary: 'boolean',
+        },
+        defaultValue: {
+          summary: false,
+        },
+      },
+    },
+    hidden: {
+      description:
+        'A hidden divider divides content without creating a dividing line',
+      table: {
+        type: {
+          summary: 'boolean',
+        },
+        defaultValue: {
+          summary: false,
+        },
+      },
+    },
+    short: {
+      description: 'Shot divider',
+      table: {
+        type: {
+          summary: 'boolean',
+        },
+        defaultValue: {
+          summary: false,
+        },
+      },
+    },
+    fitted: {
+      description: 'Remove space above or below the divider',
+      table: {
+        type: {
+          summary: 'boolean',
+        },
+        defaultValue: {
+          summary: false,
+        },
+      },
+    },
+    content: {
+      description: 'Horizontal divider content',
+      table: {
+        type: {
+          summary: 'string | object',
+        },
+        defaultValue: {
+          summary: '',
+        },
+      },
+    },
+  },
+};
+
+function Template({ hidden, theme, section, short, fitted }) {
+  return (
+    <Container>
+      <p>
+        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
+        ligula eget dolor. Aenean massa strong. Cum sociis natoque penatibus et
+        magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
+        ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa
+        quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget,
+        arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.
+        Nullam dictum felis eu pede link mollis.
+      </p>
+      <Divider
+        hidden={hidden}
+        section={section}
+        className={`${theme === 'default' ? '' : theme} ${
+          short ? 'short' : ''
+        }`}
+        fitted={fitted}
+      />
+      <p>
+        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
+        ligula eget dolor. Aenean massa strong. Cum sociis natoque penatibus et
+        magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
+        ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa
+        quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget,
+        arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.
+        Nullam dictum felis eu pede link mollis.
+      </p>
+    </Container>
+  );
+}
+
+export const Default = Template.bind({});
+Default.args = {
+  theme: 'default',
+  hidden: false,
+  section: false,
+  short: false,
+  fitted: false,
+};
+Default.parameters = {
+  controls: { exclude: ['content'] },
+  hideNoControlsWarning: true,
+};
+
+function DividerWithContentTemplate({ content, theme, section, fitted }) {
+  return (
+    <Container>
+      <p>
+        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
+        ligula eget dolor. Aenean massa strong. Cum sociis natoque penatibus et
+        magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
+        ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa
+        quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget,
+        arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.
+        Nullam dictum felis eu pede link mollis.
+      </p>
+      <Divider
+        horizontal
+        section={section}
+        className={`${theme === 'default' ? '' : theme}`}
+        fitted={fitted}
+      >
+        <div>{content}</div>
+      </Divider>
+      <p>
+        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
+        ligula eget dolor. Aenean massa strong. Cum sociis natoque penatibus et
+        magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
+        ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa
+        quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget,
+        arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.
+        Nullam dictum felis eu pede link mollis.
+      </p>
+    </Container>
+  );
+}
+
+export const DividerWithContent = DividerWithContentTemplate.bind({});
+DividerWithContent.args = {
+  content: 'Divider Content',
+  theme: 'default',
+  section: false,
+  fitted: false,
+};
+DividerWithContent.parameters = {
+  controls: { exclude: ['short', 'hidden'] },
+  hideNoControlsWarning: true,
+};

package/src/ui/Footer/Contact.jsx

@@ -7,16 +7,18 @@ const Contact = ({ children, contacts, header, address }) =>
   children?.length ? (
     children
   ) : (
-    <>
+    <div className="contact-block">
       <p className="header">{header}</p>
       {contacts?.map((contact, index) => (
         <div className="contact" key={index}>
-          <Icon name={contact.icon} size="big"></Icon>
-          <Link to={contact.link}>{contact.text}</Link>
+          <Link to={contact.link}>
+            <Icon className={contact.icon} size="big"></Icon>
+            {contact.text}
+          </Link>
         </div>
       ))}
       {address && <p className="address">{address}</p>}
-    </>
+    </div>
   );
 
 Contact.propTypes = {

package/src/ui/Footer/FooterHeader.jsx

@@ -2,8 +2,8 @@ import React from 'react';
 
 const FooterHeader = (props) => {
   return (
-    <div className="theme-sites">
-      <p className="header">{props.children}</p>
+    <div className="theme-sites mobile hidden">
+      <p className="header text-center">{props.children}</p>
     </div>
   );
 };

package/src/ui/Footer/FooterSites.jsx

@@ -9,7 +9,7 @@ const Sites = (props) => {
 
   //fallback to props
   return (
-    <div className="theme-sites">
+    <div className="theme-sites mobile hidden">
       <div className="logos">
         <Grid columns={5}>
           {props.sites &&

package/src/ui/Footer/Social.jsx

@@ -9,9 +9,9 @@ const Social = (props) => {
 
   return (
     <div className="social">
-      {props.social.map((item, index) => (
+      {props.social?.map((item, index) => (
         <a href={item.link} aria-label={`${item.name} link`} key={index}>
-          <Icon name={item.name}></Icon>
+          <Icon className={item.icon}></Icon>
         </a>
       ))}
     </div>

package/src/ui/Footer/SubFooter.jsx

@@ -1,9 +1,63 @@
 import React from 'react';
+import Footer from './Footer';
+
+import { Grid, Image } from 'semantic-ui-react';
 
 const SubFooter = (props) => {
   if (props.children) {
     return <div>{props.children}</div>;
   }
+
+  return (
+    <div className={'subfooter'}>
+      <Grid>
+        <Grid.Column mobile={12} tablet={5} computer={6}>
+          <div className="item">
+            <p className="header text-center logo-header">
+              {props.logosHeader}
+            </p>
+
+            <Grid>
+              {props.managedBy &&
+                props.managedBy.map((manager, index) => (
+                  <Grid.Column
+                    mobile={manager.columnSize.mobile}
+                    tablet={manager.columnSize.tablet}
+                    computer={manager.columnSize.computer}
+                    key={index}
+                  >
+                    <div className={manager.className}>
+                      <a href={manager.link}>
+                        <Image src={manager.src} alt={manager.alt}></Image>
+                      </a>
+                    </div>
+                  </Grid.Column>
+                ))}
+            </Grid>
+          </div>
+        </Grid.Column>
+        <Grid.Column
+          mobile={6}
+          tablet={2}
+          computer={2}
+          className="mobile hidden"
+        ></Grid.Column>
+        <Grid.Column mobile={12} tablet={5} computer={4}>
+          <div className="item">
+            <Footer.Contact
+              contacts={props.contacts}
+              header={props.contactHeader}
+              address={props.address}
+            />
+            <Footer.Social social={props.social} />
+          </div>
+        </Grid.Column>
+      </Grid>
+      <Grid.Row>
+        <Footer.Actions actions={props.actions} />
+      </Grid.Row>
+    </div>
+  );
 };
 
 export default SubFooter;