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

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/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,30 @@
+/*******************************
+    Pastanaga Theme Overrides
+*******************************/
+
+.ui.breadcrumb {
+  display: flex;
+  align-items: center;
+  padding-right: 1rem;
+  padding-left: 1rem;
+
+  //a.section {
+  //  color: #0074a3;
+  //}
+  //
+  //.section.active {
+  //  color: #4e7372;
+  //}
+
+  .home.icon {
+    margin-right: 0;
+  }
+
+  @media only screen and (min-width: @tabletBreakpoint) {
+    padding-right: 0;
+    padding-left: 0;
+  }
+}
 /*******************************
         Theme Overrides
 *******************************/
@@ -21,24 +48,5 @@
     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;

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

@@ -1,3 +1,119 @@
+/*******************************
+     Pastanaga Theme Overrides
+*******************************/
+
+.ui.form .inline.field {
+  margin: 0;
+}
+
+.ui.form .inline.field.help .wrapper {
+  border-bottom: none;
+}
+
+.ui.form .inline.field.help {
+  padding-bottom: @15px;
+}
+
+.ui.form .inline.field .help {
+  padding-top: @10px;
+  padding-bottom: @10px;
+  border-bottom: 1px solid @lightGreyBorderColor;
+}
+
+.ui.form p.help {
+  color: #878f93;
+  font-size: @13px;
+  font-weight: 300;
+  line-height: initial;
+}
+
+.ui.form .ui.input input:not([type]),
+.ui.form .ui.input input[type='date'],
+.ui.form .ui.input input[type='datetime-local'],
+.ui.form .ui.input input[type='email'],
+.ui.form .ui.input input[type='number'],
+.ui.form .ui.input input[type='password'],
+.ui.form .ui.input input[type='search'],
+.ui.form .ui.input input[type='tel'],
+.ui.form .ui.input input[type='time'],
+.ui.form .ui.input input[type='text'],
+.ui.form .ui.input input[type='file'],
+.ui.form .ui.input input[type='url'],
+.ui.form textarea {
+  height: 60px;
+  border-width: 0 0 @1px 0;
+  border-radius: 0;
+  padding: @inputVerticalPadding 0;
+
+  &:focus {
+    border-radius: 0;
+  }
+}
+
+.ui.form .field > .selection.dropdown {
+  height: 60px;
+}
+
+.ui.form .DraftEditor-root {
+  border-bottom: @inputBorder;
+}
+
+// From the original, due to the wrapper around label
+.ui.form .field .wrapper > label {
+  display: block;
+  margin: @labelMargin;
+  color: @labelColor;
+  font-size: @labelFontSize;
+  font-weight: @labelFontWeight;
+  hyphens: auto;
+  text-transform: @labelTextTransform;
+}
+
+.ui.form .toolbar {
+  position: absolute;
+  z-index: 1;
+  top: 0;
+  right: 0;
+  display: flex;
+  height: 60px;
+  align-items: center;
+  margin-right: 1rem;
+
+  .item {
+    cursor: pointer;
+  }
+}
+
+.ui.form .field .ui.basic.button.delete-button {
+  padding: 0;
+  border: none;
+  margin-left: 10px;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+
+  &:hover,
+  &:focus {
+    -webkit-box-shadow: none;
+    box-shadow: none;
+    color: #e40166 !important;
+  }
+}
+
+.ui.form .inline.field .link-form-container {
+  .wrapper {
+    display: flex;
+    border-bottom: 1px solid @lightGreyBorderColor;
+
+    .ui.input.input-anchorlink-theme {
+      vertical-align: unset;
+
+      input {
+        height: unset;
+      }
+    }
+  }
+}
+
 /*******************************
          Theme Overrides
 *******************************/