@eeacms/volto-eea-design-system 0.2.1 → 0.2.4

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

@@ -0,0 +1,96 @@
+import React from 'react';
+import { Card, Image, Container } from 'semantic-ui-react';
+import imgUrl from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/images/avatar.png';
+
+export default {
+  title: 'Components/Card/Rounded Card',
+  component: Card,
+  parameters: {
+    actions: {
+      handles: ['click'],
+    },
+  },
+  argTypes: {
+    hasImage: {
+      description: 'true if card contains image',
+      table: {
+        type: {
+          summary: 'boolean',
+        },
+        defaultValue: { summary: true },
+      },
+    },
+    title: {
+      description: 'card header',
+      table: {
+        type: {
+          summary: 'string',
+        },
+        defaultValue: { summary: ' "" ' },
+      },
+    },
+    description: {
+      description: 'card main content',
+      table: {
+        type: {
+          summary: 'string',
+        },
+        defaultValue: { summary: ' "" ' },
+      },
+    },
+    fluid: {
+      description: 'take up the width of its container',
+      table: {
+        type: {
+          summary: 'boolean',
+        },
+        defaultValue: { summary: false },
+      },
+    },
+    avatarVariant: {
+      options: ['big', 'small'],
+      control: { type: 'inline-radio' },
+      defaultValue: 'big',
+      description: 'rounded card size class',
+      table: {
+        type: {
+          summary: 'string',
+        },
+        defaultValue: { summary: ' "" ' },
+      },
+    },
+    src: {
+      description: 'rounded card image url',
+      table: {
+        type: {
+          summary: 'string',
+        },
+        defaultValue: { summary: ' "" ' },
+      },
+    },
+  },
+};
+
+const AvatarTemplate = (args) => (
+  <Container>
+    <Card className={`rounded ${args.avatarVariant}`} fluid={args.fluid}>
+      {args.hasImage && (
+        <Image src={args.src} wrapped ui={false} alt="card image" />
+      )}
+      <Card.Content>
+        <Card.Header>{args.title}</Card.Header>
+        <Card.Description>{args.description}</Card.Description>
+      </Card.Content>
+    </Card>
+  </Container>
+);
+
+export const Default = AvatarTemplate.bind({});
+Default.args = {
+  avatarVariant: 'big',
+  src: imgUrl,
+  title: 'Lorem Ipsum',
+  description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+  hasImage: true,
+  fluid: false,
+};

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: {
@@ -30,12 +30,31 @@ export default {
   },
 };
 
+//Default Button
+export const Default = (args) => {
+  return (
+    <Container>
+      <Button disabled={args.disabled}>{args.label}</Button>
+    </Container>
+  );
+};
+Default.args = {
+  label: 'Default Button',
+  disabled: false,
+};
+Default.parameters = {
+  controls: { exclude: ['animated', 'variant'] },
+  hideNoControlsWarning: true,
+};
+
 //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 = {
@@ -50,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 = {
@@ -65,54 +86,74 @@ Secondary.parameters = {
 };
 
 //secondary Button Inverted
-export const SecondaryInverted = (args) => {
+export const Inverted = (args) => {
   return (
-    <Segment inverted compact>
-      <Button secondary inverted disabled={args.disabled}>
-        {args.label}
-      </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>
   );
 };
-SecondaryInverted.args = {
-  label: 'Secondary Button',
+Inverted.args = {
+  button1: 'Primary Inverted',
+  button2: 'Secondary Inverted',
+  button3: 'Default Inverted',
   disabled: false,
 };
-SecondaryInverted.parameters = {
-  controls: { exclude: ['animated', 'variant'] },
+Inverted.parameters = {
+  controls: { exclude: ['animated', 'variant', 'label'] },
   hideNoControlsWarning: true,
 };
 
 //Call to action button
-export const CallToAction = (args) => {
+export const Labeled = (args) => {
   return (
-    <Button
-      icon
-      labelPosition="right"
-      className="action"
-      disabled={args.disabled}
-    >
-      {args.label}
-      <Icon name={args.icon} />
-    </Button>
+    <Container>
+      <Button
+        className={args.variant + ' icon ' + args.icon_position + ' labeled'}
+        disabled={args.disabled}
+      >
+        {args.label}
+        <Icon name={args.icon} />
+      </Button>
+    </Container>
   );
 };
-CallToAction.args = {
+Labeled.args = {
   label: 'CALL TO ACTION BUTTON',
   icon: 'chevron right',
   disabled: false,
 };
-CallToAction.parameters = {
-  controls: { exclude: ['animated', 'variant'] },
+Labeled.parameters = {
+  controls: { exclude: ['animated'] },
   hideNoControlsWarning: true,
 };
-CallToAction.argTypes = {
+Labeled.argTypes = {
+  variant: {
+    options: ['primary', 'secondary', 'default'],
+    control: { type: 'radio' },
+    defaultValue: 'secondary',
+  },
+
   label: {
-    name: 'button label',
-    type: { name: 'string', required: true },
+    name: 'label',
+    type: { name: 'string', required: false },
   },
   icon: {
-    name: 'button icon',
+    name: 'icon',
     type: { name: 'string', required: false },
     defaultValue: 'chevron  right',
     options: [
@@ -136,14 +177,22 @@ CallToAction.argTypes = {
       defaultValue: { summary: 'chevron right' },
     },
   },
+
+  icon_position: {
+    options: [' left', ' right'],
+    control: { type: 'radio' },
+    defaultValue: ' left',
+  },
 };
 
-//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 = {
@@ -154,16 +203,3 @@ Text.parameters = {
   controls: { exclude: ['animated', 'variant'] },
   hideNoControlsWarning: true,
 };
-
-//Cancel Button
-export const Cancel = (args) => {
-  return <Button disabled={args.disabled}>{args.label}</Button>;
-};
-Cancel.args = {
-  label: 'Cancel Button',
-  disabled: false,
-};
-Cancel.parameters = {
-  controls: { exclude: ['animated', 'variant'] },
-  hideNoControlsWarning: true,
-};

package/src/ui/KeyContent/KeyContent.jsx

@@ -8,15 +8,21 @@ KeyContent.propTypes = {
 
 function KeyContent({ children, ...rest }) {
   return (
-    <div className={`eea key-content ${rest.variant}`} {...rest}>
+    <div className="eea key-content" {...rest}>
       {children}
     </div>
   );
 }
 
-KeyContent.Title = ({ children }) => <p className="title">{children}</p>;
+KeyContent.Title = ({ children }) => <h2 className="title">{children}</h2>;
 KeyContent.List = ({ children, ...rest }) => (
-  <List bulleted horizontal={false} items={rest.items}></List>
+  <List as="ul" bulleted horizontal={false}>
+    {rest.items.map((item, index) => (
+      <List.Item as="li" className="item" key={index}>
+        {item}
+      </List.Item>
+    ))}
+  </List>
 );
 
 export default KeyContent;

package/src/ui/KeyContent/KeyContent.stories.jsx

@@ -24,7 +24,7 @@ export default {
 };
 
 const DefaultTemplate = (args) => (
-  <KeyContent variant="colored" {...args}>
+  <KeyContent {...args}>
     <KeyContent.Title>{args.title}</KeyContent.Title>
     <KeyContent.List {...args}></KeyContent.List>
   </KeyContent>
@@ -39,24 +39,3 @@ Default.args = {
     '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. ',
   ],
 };
-
-const SecondaryTemplate = (args) => (
-  <KeyContent {...args}>
-    <KeyContent.Title>{args.title}</KeyContent.Title>
-    <KeyContent.List {...args}></KeyContent.List>
-  </KeyContent>
-);
-
-export const Secondary = SecondaryTemplate.bind({});
-Secondary.args = {
-  title: 'Lorem ipsum',
-  items: [
-    'Sed pulvinar nisi, convallis sed non non eu, erat.',
-    'Consectetur adipiscing elit ut aliquam, purus sit amet luctus venenatis',
-    'Lorem ipsum dolor sit amet, consectetur',
-    'Purus sit amet luctus venenatis, lectus',
-    'Sed placerat sit erat sed massa in leo sit in ac vivamus tincidunt tincidunt tristique mi molestie dictum faucibus mauris',
-    'Luctus malesuada non in adipiscing convallis consectetur egestas sed',
-    'Vulputate gravida amet amet convallis quis',
-  ],
-};

package/src/ui/Loader/Loader.stories.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Loader } from 'semantic-ui-react';
+import { Dimmer, Loader, Image, Segment } from 'semantic-ui-react';
 
 export default {
   title: 'Components/Loader',
@@ -19,9 +19,22 @@ export default {
   },
 };
 
-const Template = (args) => <Loader {...args} inline="centered" />;
+const DefaultTemplate = (args) => <Loader {...args} inline="centered" />;
 
-export const Default = Template.bind({});
+const FullPageTemplate = (args) => (
+  <Segment>
+    <Dimmer active>
+      <Loader {...args} className="eea-loader" />
+    </Dimmer>
+
+    <Image
+      src="https://react.semantic-ui.com/images/wireframe/short-paragraph.png"
+      alt="paragraph"
+    />
+  </Segment>
+);
+
+export const Default = DefaultTemplate.bind({});
 Default.args = {
   active: true,
   content: '',
@@ -43,3 +56,8 @@ Default.argTypes = {
     control: { type: 'select' },
   },
 };
+
+export const FullPageLoader = FullPageTemplate.bind({});
+FullPageLoader.args = {
+  content: 'Loading...',
+};

package/src/ui/Testimonial/Testimonial.jsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import Divider from '../Divider/Divider';
-import Avatar from '../Avatar/Avatar';
+
 import Pullquote from '../Pullquote/Pullquote';
-import { Grid } from 'semantic-ui-react';
+import { Grid, Card, Image } from 'semantic-ui-react';
 
 Testimonial.propTypes = {
   title: PropTypes.string,
@@ -24,12 +24,13 @@ Testimonial.Avatar = ({ children, ...rest }) => {
   return (
     <Grid.Column mobile={12} tablet={2} computer={2}>
       <div className="avatar-wrapper">
-        <Avatar {...rest} image_url={rest.image_url} avatarSize="small">
-          <Avatar.Content>
-            <Avatar.Title>{rest.title}</Avatar.Title>
-            <Avatar.Metadata>{rest.metadata}</Avatar.Metadata>
-          </Avatar.Content>
-        </Avatar>
+        <Card className={`eea avatar small`} fluid={rest.fluid}>
+          <Image src={rest.src} wrapped ui={false} alt="card image" />
+          <Card.Content>
+            <Card.Header>{rest.title}</Card.Header>
+            <Card.Description>{rest.description}</Card.Description>
+          </Card.Content>
+        </Card>
       </div>
     </Grid.Column>
   );

package/src/ui/Testimonial/Testimonial.stories.jsx

@@ -2,6 +2,7 @@ import React from 'react';
 // eslint-disable-next-line import/no-unresolved
 import imgUrl from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/images/avatar.png';
 import Testimonial from './Testimonial';
+import { Container } from 'semantic-ui-react';
 
 export default {
   title: 'Components/Testimonial',
@@ -28,17 +29,19 @@ export default {
 };
 
 const InlineTemplate = (args) => (
-  <Testimonial {...args}>
-    <Testimonial.Avatar
-      image_url={imgUrl}
-      title={args.avatarTitle}
-      metadata={args.avatarInfo}
-    ></Testimonial.Avatar>
-    <Testimonial.Content>
-      <Testimonial.Title>{args.title}</Testimonial.Title>
-      <Testimonial.Pullquote>{args.quote}</Testimonial.Pullquote>
-    </Testimonial.Content>
-  </Testimonial>
+  <Container>
+    <Testimonial {...args}>
+      <Testimonial.Avatar
+        src={imgUrl}
+        title={args.avatarTitle}
+        description={args.avatarInfo}
+      ></Testimonial.Avatar>
+      <Testimonial.Content>
+        <Testimonial.Title>{args.title}</Testimonial.Title>
+        <Testimonial.Pullquote>{args.quote}</Testimonial.Pullquote>
+      </Testimonial.Content>
+    </Testimonial>
+  </Container>
 );
 
 export const Inline = InlineTemplate.bind({});

package/src/ui/Timeline/Timeline.jsx

@@ -37,7 +37,7 @@ Timeline.Content = (args) => (
 
 Timeline.Icon = (args) => (
   <Grid.Column width={2} className="line">
-    <Icon name={args.icon} color={args.color} inverted circular />
+    <Icon className={args.icon} color={args.color} inverted circular />
   </Grid.Column>
 );
 

package/src/ui/Timeline/Timeline.stories.jsx

@@ -73,7 +73,7 @@ const TemplateReversed = (args) => (
 
 export const Default = Template.bind({});
 Default.args = {
-  icon: 'user',
+  icon: 'ri-user-3-fill',
   time: 'Date and time',
   title: 'Title',
   description: 'description',
@@ -83,7 +83,7 @@ Default.args = {
 
 Default.argTypes = {
   icon: {
-    description: 'timeline item icon',
+    description: 'timeline item icon class',
     table: {
       type: {
         summary: 'string',
@@ -152,7 +152,7 @@ Default.argTypes = {
 
 export const DefaultReversed = TemplateReversed.bind({});
 DefaultReversed.args = {
-  icon: 'user',
+  icon: 'ri-user-3-fill',
   time: 'Date and time',
   title: 'Title',
   description: 'description',
@@ -162,7 +162,7 @@ DefaultReversed.args = {
 
 DefaultReversed.argTypes = {
   icon: {
-    description: 'timeline item icon',
+    description: 'timeline item icon class',
     table: {
       type: {
         summary: 'string',
@@ -234,7 +234,7 @@ export const Multiple = (args) => <TimelineEEA {...args}></TimelineEEA>;
 Multiple.args = {
   items: [
     {
-      icon: 'time',
+      icon: 'ri-time-line',
       time: 'Date and time',
       title: 'Title 1',
       description: 'description 1',
@@ -242,7 +242,7 @@ Multiple.args = {
       tags: [],
     },
     {
-      icon: 'check circle',
+      icon: 'ri-checkbox-circle-line',
       time: 'Date and time',
       title: 'Title 2',
       description: 'description 2',
@@ -250,11 +250,11 @@ Multiple.args = {
       tags: [],
     },
     {
-      icon: 'minus circle',
+      icon: 'ri-indeterminate-circle-line',
       time: 'Date and time',
       title: 'Title 3',
       description: 'description 3',
-      color: 'teal',
+      color: 'violet',
       tags: [],
     },
   ],
@@ -281,7 +281,7 @@ export const MultipleReversed = (args) => (
 MultipleReversed.args = {
   items: [
     {
-      icon: 'time',
+      icon: 'ri-time-line',
       time: 'Date and time',
       title: 'Title 1',
       description: 'description 1',
@@ -289,7 +289,7 @@ MultipleReversed.args = {
       tags: [],
     },
     {
-      icon: 'check circle',
+      icon: 'ri-checkbox-circle-line',
       time: 'Date and time',
       title: 'Title 2',
       description: 'description 2',
@@ -297,11 +297,11 @@ MultipleReversed.args = {
       tags: [],
     },
     {
-      icon: 'minus circle',
+      icon: 'ri-indeterminate-circle-line',
       time: 'Date and time',
       title: 'Title 3',
       description: 'description 3',
-      color: 'teal',
+      color: 'violet',
       tags: [],
     },
   ],

package/src/ui/index.js

@@ -20,12 +20,10 @@ export Pullquote from './Pullquote/Pullquote';
 
 export Timeline from './Timeline/Timeline';
 
-export Avatar from './Avatar/Avatar';
-
 export Testimonial from './Testimonial/Testimonial';
 
-export AvatarGrid from './AvatarGrid/AvatarGrid';
+export AvatarGrid from './Card/AvatarGrid/AvatarGrid';
 
 export KeyContent from './KeyContent/KeyContent';
 
-export PublicationCard from './PublicationCard/PublicationCard';
+export RelatedContent from './Card/RelatedContent/RelatedContent';

package/theme/theme.config

@@ -83,16 +83,14 @@
 @timeline    : 'eea';
 @footer      : 'eea';
 @header      : 'eea';
-@tag         : 'eea';
-@tagList     : 'eea';
-@content     : 'eea';
+@tag        : 'eea';
 @inpageNavigation : 'eea';
-@avatar      : 'eea';
 @divider     : 'eea';
 @testimonial : 'eea';
 @avatarGrid  : 'eea';
 @keyContent  : 'eea';
 @publicationCard  : 'eea';
+@relatedContent  : 'eea';
 
 /*******************************
             Folders

package/theme/themes/eea/collections/breadcrumb.overrides

@@ -1,3 +1,15 @@
+/*******************************
+    Pastanaga Theme Overrides
+*******************************/
+
+.ui.breadcrumb {
+  display: flex;
+  align-items: center;
+
+  .home.icon {
+    margin-right: 0;
+  }
+}
 /*******************************
         Theme Overrides
 *******************************/
@@ -21,24 +33,4 @@
     width: @breadcrumbIconWidth;
     font-size: @breadcrumbIconFontSize;
   }
-
-  a:first-child {
-    padding: @breadcrumbFirstChildPadding;
-  }
-}
-
-@media only screen and (min-width: @tabletBreakpoint) {
-  .ui.breadcrumb {
-    .section {
-      padding: @tabletBreadcrumbPadding;
-    }
-  }
-}
-
-@media only screen and (min-width: @computerBreakpoint) {
-  .ui.breadcrumb {
-    .section {
-      padding: @computerBreadcrumbPadding;
-    }
-  }
 }

package/theme/themes/eea/collections/breadcrumb.variables

@@ -7,7 +7,7 @@
 --------------------*/
 
 @verticalMargin: 0em;
-@display: inline-block;
+@display: flex;
 @verticalAlign: middle;
 
 @mobileBreadcrumbPadding: 0;
@@ -28,10 +28,10 @@
 @dividerColor: @deepBlue;
 
 @dividerSize: @relativeSmall;
-@dividerVerticalAlign: sub;
+@dividerVerticalAlign: baseline;
 
 @iconDividerSize: 0.75rem;
-@iconDividerVerticalAlign: sub;
+@iconDividerVerticalAlign: baseline;
 
 @sectionMargin: 0em;
 @sectionPadding: 0em;