@eeacms/volto-eea-design-system 0.2.2 → 0.2.3

package/CHANGELOG.md

@@ -4,8 +4,28 @@ 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.2.3](https://github.com/eea/volto-eea-design-system/compare/0.2.2...0.2.3)
+
+- [R2] Button  [`#154`](https://github.com/eea/volto-eea-design-system/pull/154)
+- [R2] Tab [`#155`](https://github.com/eea/volto-eea-design-system/pull/155)
+- Autobuild of docusaurus docs [`4418144`](https://github.com/eea/volto-eea-design-system/commit/4418144c194c49cdeaf6928eabd781e01d0a391e)
+- change(banner): added icon class to share icons [`48e866e`](https://github.com/eea/volto-eea-design-system/commit/48e866e4251dd517c0477cd5a42cec1a98e2f16d)
+- Autobuild of docusaurus docs [`a51745e`](https://github.com/eea/volto-eea-design-system/commit/a51745e8ec045c583f9b0bfdb93b3a0eaec67110)
+- refactor(tab): update vertical tab columns and content [`b473fab`](https://github.com/eea/volto-eea-design-system/commit/b473fabee196a3ec420e29160448d2be3d1685cc)
+- docs(button): import call to action stories [`e4eed44`](https://github.com/eea/volto-eea-design-system/commit/e4eed44e3519ae3dba7d16e252271a964fcb7a4b)
+- refactor(button): update inverted button colors [`c822021`](https://github.com/eea/volto-eea-design-system/commit/c822021ab37939632416ce74c0cc88a64b98a3c1)
+- refactor(button): add container to stories [`6c02c19`](https://github.com/eea/volto-eea-design-system/commit/6c02c1953e102f2d90ab23023d6b4dfc738ced2e)
+- refactor(call to action):render call to action with Button as="a" [`e7dfabf`](https://github.com/eea/volto-eea-design-system/commit/e7dfabfc2f006505b0f1c802dc6fb48611518bcb)
+- feat(CallToAction):add feat call to action [`ab53642`](https://github.com/eea/volto-eea-design-system/commit/ab53642f27c996f929ff871d0794add39bab6c23)
+- refactor(Button): move button to forms folder [`94996fc`](https://github.com/eea/volto-eea-design-system/commit/94996fcdf1ea7e55c63dd44e10edf1b44b9bdef5)
+- refactor(Tab):scrollbar change in mobile & vertical tab fix [`0e34cbf`](https://github.com/eea/volto-eea-design-system/commit/0e34cbf459e67b6910217f30a44a1e81f33df622)
+- refactor(Tab):minor change in secondary pointing menu variables [`280b6c4`](https://github.com/eea/volto-eea-design-system/commit/280b6c41a2107bccb38500f54eb5663ef62c7ae3)
+
 #### [0.2.2](https://github.com/eea/volto-eea-design-system/compare/0.2.1...0.2.2)
 
+> 22 April 2022
+
+- Release [`#153`](https://github.com/eea/volto-eea-design-system/pull/153)
 - fix(volto): various fixes for issues presented in ticket  #147629 [`#150`](https://github.com/eea/volto-eea-design-system/pull/150)
 - [R2] Card [updated for R3] [`#152`](https://github.com/eea/volto-eea-design-system/pull/152)
 - [R2] Ordered list [`#144`](https://github.com/eea/volto-eea-design-system/pull/144)

package/package.json

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

package/src/ui/Banner/Banner.jsx

@@ -25,7 +25,7 @@ function Banner({ image_url, image, children }) {
 Banner.Action = function ({ id, title, icon, onClick, className, color }) {
   return (
     <div className="action">
-      <Button className={className} basic inverted onClick={onClick}>
+      <Button className={className} basic icon inverted onClick={onClick}>
         <Icon className={icon} color={color}></Icon>
         <span className="mobile hidden">{title}</span>
       </Button>

package/src/ui/CallToAction/CallToAction.stories.jsx

@@ -0,0 +1,239 @@
+import React from 'react';
+import { Button, Icon, Container, Segment } from 'semantic-ui-react';
+
+export default {
+  title: 'Components/Call To Action',
+  component: Button,
+  argTypes: {
+    label: {
+      description: 'link label',
+      table: {
+        defaultValue: {
+          summary: '',
+        },
+        type: {
+          summary: 'string',
+        },
+      },
+    },
+    href: {
+      description: "link's destination url",
+      table: {
+        defaultValue: {
+          summary: '',
+        },
+        type: { summary: 'string' },
+      },
+    },
+    disabled: {
+      description: 'link disabled',
+      table: {
+        defaultValue: { summary: 'false' },
+        type: { summary: 'boolean' },
+      },
+    },
+  },
+};
+
+//Default Call To Action
+export const Default = (args) => {
+  return (
+    <Container>
+      <Button as="a" disabled={args.disabled} href={args.href} target="_blank">
+        {args.label}
+      </Button>
+    </Container>
+  );
+};
+Default.args = {
+  label: 'Default Call To Action',
+  href: '/#',
+  disabled: false,
+};
+
+//Primary Call To Action
+export const Primary = (args) => {
+  return (
+    <Container>
+      <Button
+        primary
+        as="a"
+        disabled={args.disabled}
+        href={args.href}
+        target="_blank"
+      >
+        {args.label}
+      </Button>
+    </Container>
+  );
+};
+Primary.args = {
+  label: 'Primary Call To Action',
+  href: '/#',
+  disabled: false,
+};
+
+//Secondary Call To Action
+export const Secondary = (args) => {
+  return (
+    <Container>
+      <Button
+        secondary
+        as="a"
+        disabled={args.disabled}
+        href={args.href}
+        target="_blank"
+      >
+        {args.label}
+      </Button>
+    </Container>
+  );
+};
+Secondary.args = {
+  label: 'Secondary Call To Action',
+  href: '/#',
+  disabled: false,
+};
+
+//Inverted Call To Action
+export const Inverted = (args) => {
+  return (
+    <Container>
+      <Segment compact>
+        <Button
+          primary
+          inverted
+          as="a"
+          disabled={args.disabled}
+          href={args.href1}
+          target="_blank"
+        >
+          {args.button1}
+        </Button>
+      </Segment>
+      <Segment compact>
+        <Button
+          secondary
+          inverted
+          as="a"
+          disabled={args.disabled}
+          href={args.href2}
+          target="_blank"
+        >
+          {args.button2}
+        </Button>
+      </Segment>
+      <Segment inverted compact>
+        <Button
+          inverted
+          as="a"
+          disabled={args.disabled}
+          href={args.href3}
+          target="_blank"
+        >
+          {args.button3}
+        </Button>
+      </Segment>
+    </Container>
+  );
+};
+Inverted.args = {
+  button1: 'Primary Call To Action',
+  button2: 'Secondary Call To Action',
+  button3: 'Default Call To Action',
+  href1: '/#',
+  href2: '/#',
+  href3: '/#',
+  disabled: false,
+};
+Inverted.parameters = {
+  controls: { exclude: ['label', 'href'] },
+  hideNoControlsWarning: true,
+};
+
+//Labeled Call To Action
+export const Labeled = (args) => {
+  return (
+    <Container>
+      <Button
+        className={args.variant + ' icon ' + args.icon_position + ' labeled'}
+        as="a"
+        disabled={args.disabled}
+        href={args.href}
+        target="_blank"
+      >
+        {args.label}
+        <Icon name={args.icon} />
+      </Button>
+    </Container>
+  );
+};
+Labeled.args = {
+  label: 'Labeled Call To Action',
+  icon: 'chevron right',
+  href: '/#',
+  disabled: false,
+};
+Labeled.argTypes = {
+  variant: {
+    options: ['primary', 'secondary', 'default'],
+    description: 'call to action class',
+    control: { type: 'radio' },
+    defaultValue: 'secondary',
+    table: {
+      defaultValue: { summary: 'secondary' },
+      type: { summary: 'string' },
+    },
+  },
+  icon: {
+    name: 'icon',
+    defaultValue: 'chevron right',
+    options: [
+      'chevron right',
+      'arrow right',
+      'sign-in',
+      'sign-out',
+      'play',
+      'stop',
+      'pause',
+      'download',
+      'upload',
+      'print',
+      'copy',
+      'edit',
+      'ellipsis',
+    ],
+    control: { type: 'select' },
+    description: 'call to action icon',
+    table: {
+      defaultValue: { summary: 'chevron right' },
+      type: { summary: 'string' },
+    },
+  },
+  icon_position: {
+    options: ['left', 'right'],
+    control: { type: 'radio' },
+    defaultValue: 'left',
+    description: 'icon left or right position',
+    table: {
+      defaultValue: { summary: 'left' },
+      type: { summary: 'string' },
+    },
+  },
+};
+
+//Text Button - can also play with text class
+export const Link = (args) => {
+  return (
+    <Container>
+      <a href={args.href}>{args.label}</a>
+    </Container>
+  );
+};
+Link.args = {
+  label: 'Link label',
+  href: '/#',
+};
+Link.parameters = {
+  hideNoControlsWarning: true,
+};

package/src/ui/{Button → Form/Button}/Button.stories.jsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { Button, Icon, Segment } from 'semantic-ui-react';
+import { Button, Icon, Container, Segment } from 'semantic-ui-react';
 
 export default {
-  title: 'Components/Button',
+  title: 'Components/Forms/Button',
   component: Button,
   parameters: {
     actions: {
@@ -32,7 +32,11 @@ export default {
 
 //Default Button
 export const Default = (args) => {
-  return <Button disabled={args.disabled}>{args.label}</Button>;
+  return (
+    <Container>
+      <Button disabled={args.disabled}>{args.label}</Button>
+    </Container>
+  );
 };
 Default.args = {
   label: 'Default Button',
@@ -46,9 +50,11 @@ Default.parameters = {
 //Primary button
 export const Primary = (args) => {
   return (
-    <Button primary disabled={args.disabled}>
-      {args.label}
-    </Button>
+    <Container>
+      <Button primary disabled={args.disabled}>
+        {args.label}
+      </Button>
+    </Container>
   );
 };
 Primary.args = {
@@ -63,9 +69,11 @@ Primary.parameters = {
 //secondary Button
 export const Secondary = (args) => {
   return (
-    <Button secondary disabled={args.disabled}>
-      {args.label}
-    </Button>
+    <Container>
+      <Button secondary disabled={args.disabled}>
+        {args.label}
+      </Button>
+    </Container>
   );
 };
 Secondary.args = {
@@ -80,17 +88,23 @@ Secondary.parameters = {
 //secondary Button Inverted
 export const Inverted = (args) => {
   return (
-    <Segment inverted compact>
-      <Button primary inverted disabled={args.disabled}>
-        {args.button1}
-      </Button>
-      <Button secondary inverted disabled={args.disabled}>
-        {args.button2}
-      </Button>
-      <Button inverted disabled={args.disabled}>
-        {args.button3}
-      </Button>
-    </Segment>
+    <Container>
+      <Segment compact>
+        <Button primary inverted disabled={args.disabled}>
+          {args.button1}
+        </Button>
+      </Segment>
+      <Segment compact>
+        <Button secondary inverted disabled={args.disabled}>
+          {args.button2}
+        </Button>
+      </Segment>
+      <Segment inverted compact>
+        <Button inverted disabled={args.disabled}>
+          {args.button3}
+        </Button>
+      </Segment>
+    </Container>
   );
 };
 Inverted.args = {
@@ -107,15 +121,15 @@ Inverted.parameters = {
 //Call to action button
 export const Labeled = (args) => {
   return (
-    <div className="eea">
+    <Container>
       <Button
         className={args.variant + ' icon ' + args.icon_position + ' labeled'}
         disabled={args.disabled}
       >
         {args.label}
-        <Icon name={args.icon + args.icon_position} />
+        <Icon name={args.icon} />
       </Button>
-    </div>
+    </Container>
   );
 };
 Labeled.args = {
@@ -171,12 +185,14 @@ Labeled.argTypes = {
   },
 };
 
-//Text Button - can also play with text class
+//Text Button
 export const Text = (args) => {
   return (
-    <Button as="p" disabled={args.disabled}>
-      {args.label}
-    </Button>
+    <Container>
+      <Button as="p" disabled={args.disabled}>
+        {args.label}
+      </Button>
+    </Container>
   );
 };
 Text.args = {

package/theme/themes/eea/elements/button.overrides

@@ -177,3 +177,73 @@ p.ui.button {
   font-size: @searchButtonFontSize;
   opacity: @searchButtonIconOpacity;
 }
+
+
+/************* Inverted Buttons *************/
+// Override the light colors with the defaults
+
+/* Primary - button.less - L:3128 */
+.ui.inverted.primary.buttons .button,
+.ui.inverted.primary.button {
+  box-shadow: 0px 0px 0px @invertedBorderSize @primaryColor inset !important;
+  color: @primaryColor;
+}
+.ui.inverted.primary.buttons .button:hover,
+.ui.inverted.primary.button:hover,
+.ui.inverted.primary.buttons .button:focus,
+.ui.inverted.primary.button:focus,
+.ui.inverted.primary.buttons .button.active,
+.ui.inverted.primary.button.active,
+.ui.inverted.primary.buttons .button:active,
+.ui.inverted.primary.button:active {
+  color: @invertedHoveredTextColor;
+}
+.ui.inverted.primary.buttons .button:hover,
+.ui.inverted.primary.button:hover {
+  background-color: @primaryColorHover;
+}
+.ui.inverted.primary.buttons .button:focus,
+.ui.inverted.primary.button:focus {
+  background-color: @primaryColorFocus;
+}
+.ui.inverted.primary.buttons .active.button,
+.ui.inverted.primary.active.button {
+  background-color: @primaryColorActive;
+}
+.ui.inverted.primary.buttons .button:active,
+.ui.inverted.primary.button:active {
+  background-color: @primaryColorDown;
+}
+
+/* Secondary - button.less - L:3128 */
+.ui.inverted.secondary.buttons .button,
+.ui.inverted.secondary.button {
+  box-shadow: 0px 0px 0px @invertedBorderSize @secondaryColor inset !important;
+  color: @secondaryColor;
+}
+.ui.inverted.secondary.buttons .button:hover,
+.ui.inverted.secondary.button:hover,
+.ui.inverted.secondary.buttons .button:focus,
+.ui.inverted.secondary.button:focus,
+.ui.inverted.secondary.buttons .button.active,
+.ui.inverted.secondary.button.active,
+.ui.inverted.secondary.buttons .button:active,
+.ui.inverted.secondary.button:active {
+  color: @invertedHoveredTextColor;
+}
+.ui.inverted.secondary.buttons .button:hover,
+.ui.inverted.secondary.button:hover {
+  background-color: @secondaryColorHover;
+}
+.ui.inverted.secondary.buttons .button:focus,
+.ui.inverted.secondary.button:focus {
+  background-color: @secondaryColorFocus;
+}
+.ui.inverted.secondary.buttons .active.button,
+.ui.inverted.secondary.active.button {
+  background-color: @secondaryColorActive;
+}
+.ui.inverted.secondary.buttons .button:active,
+.ui.inverted.secondary.button:active {
+  background-color: @secondaryColorDown;
+}

package/theme/themes/eea/modules/tab.overrides

@@ -4,7 +4,7 @@
 
 .ui.pointing.secondary.menu {
   a.item {
-    font-size: @mobileHeaderSize;
+    font-size: @headerSize;
   }
 
   a.item:hover {
@@ -12,10 +12,26 @@
   }
 }
 
+// Contain images inside vertical tab content
+.stretched.wide.column > .tab img {
+  max-width: @verticalTabPaneImageMaxWidth;
+}
+
+.ui.pointing.secondary.menu::-webkit-scrollbar {
+  height: @mobileTabScrollbarHeight;
+}
+
 @media only screen and (min-width: @tabletBreakpoint) {
-  .ui.pointing.secondary.menu {
-    a.item {
-      font-size: @tabletHeaderSize;
+  .ui.pointing.secondary.menu::-webkit-scrollbar {
+    height: @tabletTabScrollbarHeight;
+  }
+}
+
+@media only screen and (max-width: @largestMobileScreen) {
+  .ui.pointing.secondary.vertical.menu {
+    .item {
+      padding: @mobileItemPadding;
+      font-size: @mobileItemFontSize;
     }
   }
 }

package/theme/themes/eea/modules/tab.variables

@@ -4,8 +4,10 @@
 
 @tabActiveItemHoverColor: @secondaryColor;
 
-@mobileHeaderSize: 1.125rem;
-@tabletHeaderSize: @h4;
+@mobileItemFontSize: 1rem;
+@mobileItemPadding: 1rem 0.25rem;
+
+@headerSize: @h4;
 @headerSizeResponsive: @fontSize;
 @contentSize: @fontSize;
 
@@ -15,4 +17,11 @@
 @loadingContentOffset: -10000px;
 
 @loaderDistanceFromTop: 100px;
-@loaderSize: 2.5em;
+@loaderSize: 2.5em;
+
+/* Scrollbar */
+@mobileTabScrollbarHeight: 0;
+@tabletTabScrollbarHeight: 0.3rem;
+
+/* Images */
+@verticalTabPaneImageMaxWidth: 100%;