@eeacms/volto-eea-design-system 0.6.0 → 0.6.1

package/CHANGELOG.md

@@ -4,8 +4,25 @@ 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.6.1](https://github.com/eea/volto-eea-design-system/compare/0.6.0...0.6.1)
+
+- Autobuild of docusaurus docs [`aa070d4`](https://github.com/eea/volto-eea-design-system/commit/aa070d4397a7369cc439d78b6355a9e6f0c5c3ff)
+- feat(headers): added underlined titles with theming support [`af67561`](https://github.com/eea/volto-eea-design-system/commit/af675616f9e002458501cf8b90742514153a298f)
+- refactor(heading): move underline story and update controls [`2c9bfd2`](https://github.com/eea/volto-eea-design-system/commit/2c9bfd279eafc44435d223be326f9496856c2154)
+- chore(countup): package for statistics [`26fcd09`](https://github.com/eea/volto-eea-design-system/commit/26fcd09bbd8d44119d5ca957542863be8c64836b)
+- refactor(underlinedTitle): Restore text variation dropdown control [`bd8c611`](https://github.com/eea/volto-eea-design-system/commit/bd8c61129d2c80475af8d0e9310412d5c3a82169)
+- refactor(underlineTitle): add content box for different variations [`0878915`](https://github.com/eea/volto-eea-design-system/commit/087891535059d6c2d7d2c2accded20f6ba601bb5)
+- refactor(underlinedTitle): add control for changing heading size [`211f515`](https://github.com/eea/volto-eea-design-system/commit/211f5158bff2b437aac60f26ba63f9adb6be540a)
+- refactor(utilities): add color variation for headings and text [`7e3a779`](https://github.com/eea/volto-eea-design-system/commit/7e3a779ec4fa3b712fcd32124f6f83ab784d2223)
+- refactor(utilities): update border bottom utility and restore line height for headings [`7fe4a7b`](https://github.com/eea/volto-eea-design-system/commit/7fe4a7b9fee579d213fe3945a4e548ff089784bd)
+- refactor(headings): update the line height of headers according to docusaurus instructions [`9da19b3`](https://github.com/eea/volto-eea-design-system/commit/9da19b3e1ea1fd93431e00edf3dc9a443e94f27a)
+- feat(UnderlinedTitle): create story and necessary utilities [`8beb56b`](https://github.com/eea/volto-eea-design-system/commit/8beb56b64ca76fb9f0f6df0f3554e64449a64868)
+
 #### [0.6.0](https://github.com/eea/volto-eea-design-system/compare/0.5.5...0.6.0)
 
+> 1 July 2022
+
+- Pagination, Item refactoring, docusaurus updates, fixes from custom [`#205`](https://github.com/eea/volto-eea-design-system/pull/205)
 - [Tokens] Letter spacing update [`#189`](https://github.com/eea/volto-eea-design-system/pull/189)
 - Refactor docusaurus [`#180`](https://github.com/eea/volto-eea-design-system/pull/180)
 - [R2] Pagination [`#162`](https://github.com/eea/volto-eea-design-system/pull/162)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-eea-design-system",
-  "version": "0.6.0",
+  "version": "0.6.1",
   "description": "@eeacms/volto-eea-design-system: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",
@@ -22,7 +22,8 @@
   "dependencies": {
     "@eeacms/volto-corsproxy": "*",
     "remixicon": "2.5.0",
-    "react-slick": "^0.28.1"
+    "react-slick": "^0.28.1",
+    "react-countup": "^6.3.0"
   },
   "devDependencies": {
     "@cypress/code-coverage": "^3.9.5",

package/src/ui/UnderlinedTitle/UnderlinedTitle.stories.jsx

@@ -0,0 +1,98 @@
+import React from 'react';
+import { Header, Divider, Container } from 'semantic-ui-react';
+import ContentBox from '../ContentBox/ContentBox';
+
+export default {
+  title: 'Components/Heading/Underlined',
+  component: Divider,
+  argTypes: {
+    tag: {
+      name: 'Tag',
+      defaultValue: 'h2',
+      options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'],
+      control: { type: 'select' },
+      description: 'Heading HTML tag',
+      table: {
+        defaultValue: { summary: 'h2' },
+        type: { summary: 'string' },
+      },
+    },
+    title: {
+      description: 'Title text',
+      table: {
+        defaultValue: {
+          summary: '',
+        },
+        type: {
+          summary: 'string',
+        },
+      },
+    },
+    bordered: {
+      description: 'Bottom border for title',
+      table: {
+        defaultValue: { summary: 'true' },
+        type: { summary: 'boolean' },
+      },
+    },
+    variation: {
+      name: 'Heading variation',
+      defaultValue: 'tertiary',
+      options: ['primary', 'secondary', 'tertiary'],
+      control: { type: 'select' },
+      description: 'Text color variation',
+      table: {
+        defaultValue: { summary: 'tertiary' },
+        type: { summary: 'string' },
+      },
+    },
+    variant: {
+      name: 'Background variation',
+      defaultValue: 'default',
+      options: ['default', 'primary', 'secondary', 'tertiary'],
+      control: { type: 'select' },
+      description: 'Color variation',
+      table: {
+        defaultValue: { summary: 'default' },
+        type: { summary: 'string' },
+      },
+    },
+  },
+};
+
+export const Default = (args) => {
+  return (
+    <ContentBox variant={args.variant}>
+      <Container className="content-box-inner">
+        <Header
+          as={args.tag}
+          className={`${args.variation} ${args.bordered ? 'bordered' : ''}`}
+        >
+          {args.title}
+        </Header>
+        <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 pretium. Integer tincidunt. Cras dapibus. Vivamus elementum
+          semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula,
+          porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante,
+          dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla
+          ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam
+          ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi.
+        </p>
+      </Container>
+    </ContentBox>
+  );
+};
+Default.args = {
+  tag: 'h2',
+  title: 'At a glance',
+  bordered: true,
+  variation: 'tertiary',
+  variant: 'default',
+};

package/theme/themes/eea/extras/contentBox.less

@@ -33,16 +33,25 @@
   &.primary {
     background-color: @contentBoxBackgroundColorPrimary;
     color: @contentBoxColor;
+    .header {
+      color: @contentBoxColor !important;
+    }
   }
 
   &.secondary {
     background-color: @contentBoxBackgroundColorSecondary;
     color: @contentBoxColor;
+    .header {
+      color: @contentBoxColor !important;
+    }
   }
 
   &.tertiary {
     background-color: @contentBoxBackgroundColorTertiary;
     color: @contentBoxColor;
+    .header {
+      color: @contentBoxColor !important;
+    }
   }
 }
 

package/theme/themes/eea/globals/site.variables

@@ -24,7 +24,7 @@
 @googleFontRequest : '@{googleFontName}:@{googleFontSizes}&subset=@{googleSubset}';
 
 
-@bold              : 600;
+@bold              : @font-weight-7;
 @normal            : normal;
 
 /*-------------------
@@ -70,7 +70,7 @@
 ---------------*/
 
 @headerLineHeight : 1.25;
-@headerFontWeight : 700;
+@headerFontWeight : @font-weight-7;
 
 @h1 : unit((48 / @fontSize), rem);
 @h2 : unit((40 / @fontSize), rem);
@@ -176,8 +176,8 @@
 @pageBackground      : @white;
 @pageOverflowX       : hidden;
 
-@lineHeight          : 1.5;
-@mobileLineHeight    : 1.5;
+@lineHeight          : @font-lineheight-3;
+@mobileLineHeight    : @font-lineheight-3;
 @textColor           : rgba(0, 0, 0, 1);
 
 /*-------------------

package/theme/themes/eea/globals/utilities.less

@@ -1,4 +1,11 @@
-// Color utilities
+// Color
+h1, h2, h3, h4, h5, h6, p, span, .header {
+  &.primary { color: @primaryColor !important; }
+  &.secondary { color: @secondaryColor !important; }
+  &.tertiary { color: @tertiaryColor !important; }
+  &.white { color: @white !important; }
+}
+
 .color-fg-primary { color: @primaryColor !important; }
 .color-fg-secondary { color: @secondaryColor !important; }
 .color-fg-tertiary { color: @tertiaryColor !important; }
@@ -20,18 +27,18 @@
   z-index: 0;
 }
 
-// Display utilities
+// Flexbox
 .d-flex { display: flex !important; }
 .flex-items-start { align-items: flex-start !important; }
 .flex-items-end { align-items: flex-end !important; }
 .flex-items-center { align-items: center !important; }
 
-// Align text utilities
+// Align text
 .text-left { text-align: left !important; }
 .text-center { text-align: center !important;}
 .text-right { text-align: right !important; }
 
-//Quotes utilities
+// Quotes
 .quoted::before {
   content: "\ec51";
   font-family: 'remixicon' !important;
@@ -40,3 +47,9 @@
   content: "\ec52";
   font-family: 'remixicon' !important;
 }
+
+// Borders
+.bordered { 
+  border-bottom: @border-size-1 solid !important;
+  padding-bottom: @rem-space-2 !important;
+}