refactor(header): implementation in preparation for Volto integration #…

…20 #97

.github/ISSUE_TEMPLATE/bug_report.md

@@ -4,35 +4,40 @@ about: Create a report to help us improve
 title: ''
 labels: ''
 assignees: ''
-
 ---
 
 ## React guidelines
+
 ### Basic guidelines
+
 - [ ] One React component per file
-- [ ]  Use best practice naming conventions, follow the library styles (semantic-ui-less, semantic-ui-react).
+- [ ] Use best practice naming conventions, follow the library styles (semantic-ui-less, semantic-ui-react).
 - [ ] Ensure every file uses Unix line endings
 
 ### Naming guidelines
+
 - [ ] Filename: Use PascalCase for filenames. E.g., ItemCard.jsx
-- [ ]  Variable naming: Use PascalCase for React components and camelCase for their instances
+- [ ] Variable naming: Use PascalCase for React components and camelCase for their instances
 - [ ] Use the filename as the component name, ReservationCard.jsx should have a reference name of ReservationCard
 - [ ] Use camelCase for prop names, or PascalCase if the prop value is a React component
 
 ### Component best practice guidelines
+
 - [ ] Don't hard-code values, make them props
 - [ ] Avoid using inline styles except for setting background images or visibility of elements
 - [ ] Use imports relative to the package name
 - [ ] Use whitespace to separate and group imports from other code
 - [ ] Large composite components (for example the Footer) should be abstracted and split into multiple subcomponents
 
 ### Storybook best practice guidelines
+
 - [ ] Aim for realistic demo aspects, For example, a mix of short and long text.
 - [ ] Variations should be provided as separate stories
 - [ ] Aim for a comprehensive but realistic set of control options
 - [ ] Provide guidelines as to what combinations of props and variations are allowed
 
 ## Theming guidelines
+
 - [ ] Style directly the SUI components without introducing new markup or classes
 - [ ] Use variables everywhere it is possible
 - [ ] Remove or modify overrides to use variables instead of hard-coded values

.github/ISSUE_TEMPLATE/feature_request.md

@@ -4,38 +4,43 @@ about: Suggest an idea for this project
 title: ''
 labels: ''
 assignees: ''
-
 ---
 
 ## React guidelines
+
 ### Basic guidelines
+
 - [ ] One React component per file
-- [ ]  Use best practice naming conventions, follow the library styles (semantic-ui-less, semantic-ui-react).
+- [ ] Use best practice naming conventions, follow the library styles (semantic-ui-less, semantic-ui-react).
 - [ ] Ensure every file uses Unix line endings
 
 ### Naming guidelines
+
 - [ ] Filename: Use PascalCase for filenames. E.g., ItemCard.jsx
-- [ ]  Variable naming: Use PascalCase for React components and camelCase for their instances
+- [ ] Variable naming: Use PascalCase for React components and camelCase for their instances
 - [ ] Use the filename as the component name, ReservationCard.jsx should have a reference name of ReservationCard
 - [ ] Use camelCase for prop names, or PascalCase if the prop value is a React component
 
 ### Component best practice guidelines
+
 - [ ] Don't hard-code values, make them props
 - [ ] Avoid using inline styles except for setting background images or visibility of elements
 - [ ] Use imports relative to the package name
 - [ ] Use whitespace to separate and group imports from other code
 - [ ] Large composite components (for example the Footer) should be abstracted and split into multiple subcomponents
 
 ### Storybook best practice guidelines
+
 - [ ] Aim for realistic demo aspects, For example, a mix of short and long text.
 - [ ] Variations should be provided as separate stories
 - [ ] Aim for a comprehensive but realistic set of control options
 - [ ] Provide guidelines as to what combinations of props and variations are allowed
 
 ## Theming guidelines
+
 - [ ] Style directly the SUI components without introducing new markup or classes
 - [ ] Use variables everywhere it is possible
-- [ ] Remove or modify overrides to use variables instead of hard-coded values 
+- [ ] Remove or modify overrides to use variables instead of hard-coded values
 - [ ] Don't add HTML tags to the css specificity selector
 - [ ] Add custom classes after the semantic ui classes
 - [ ] Use Semantic UI naming style

src/helpers/index.js

@@ -0,0 +1,2 @@
+export useClickOutside from './useClickOutside';
+export usePrevious from './usePrevious';

src/helpers/useClickOutside.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import { doesNodeContainClick } from 'semantic-ui-react/dist/commonjs/lib';
+
+/**
+ * Call the callback when a click happens outside the targetRefs elements
+ */
+export default function useClickOutside({ targetRefs = [], callback }) {
+  const handleClickOutside = React.useCallback(
+    (e) => {
+      const isInsideTarget =
+        targetRefs.findIndex(
+          (nodeRef) =>
+            nodeRef.current && doesNodeContainClick(nodeRef.current, e),
+        ) > -1;
+
+      if (isInsideTarget) return;
+      callback();
+    },
+    [callback, targetRefs],
+  );
+
+  React.useLayoutEffect(() => {
+    document.addEventListener('mousedown', handleClickOutside, false);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside, false);
+    };
+  }, [handleClickOutside]);
+
+  return null;
+}

src/helpers/usePrevious.js

@@ -0,0 +1,9 @@
+import React from 'react';
+
+export default function usePrevious(value) {
+  const ref = React.useRef();
+  React.useEffect(() => {
+    ref.current = value;
+  });
+  return ref.current;
+}

src/semantic.less

@@ -223,3 +223,27 @@
 & {
   @import '@eeacms/volto-eea-design-system/../theme/themes/eea/extras/inpageNavigation';
 }
+
+& {
+  @import '@eeacms/volto-eea-design-system/../theme/themes/eea/extras/avatar';
+}
+
+& {
+  @import '@eeacms/volto-eea-design-system/../theme/themes/eea/extras/divider';
+}
+
+& {
+  @import '@eeacms/volto-eea-design-system/../theme/themes/eea/extras/testimonial';
+}
+
+& {
+  @import '@eeacms/volto-eea-design-system/../theme/themes/eea/extras/tags';
+}
+
+& {
+  @import '@eeacms/volto-eea-design-system/../theme/themes/eea/extras/avatarGrid';
+}
+
+& {
+  @import '@eeacms/volto-eea-design-system/../theme/themes/eea/extras/keyContent';
+}

src/ui/Avatar/Avatar.jsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+Avatar.propTypes = {
+  title: PropTypes.string,
+  info: PropTypes.string,
+};
+
+function Avatar({ image_url, children, ...rest }) {
+  return (
+    <div className={`eea avatar  ${rest.avatarSize}`} {...rest}>
+      <div className="wrapper">
+        <div className="image-wrapper">
+          <div
+            className="image"
+            style={{ backgroundImage: `url(${image_url})` }}
+          ></div>
+        </div>
+        <div className="content-wrapper">{children}</div>
+      </div>
+    </div>
+  );
+}
+
+Avatar.Content = ({ children }) => {
+  return <div className="content">{children}</div>;
+};
+
+Avatar.Title = ({ children }) => <p className="title">{children}</p>;
+Avatar.Metadata = ({ children }) => <p className="metadata">{children}</p>;
+
+export default Avatar;

src/ui/Avatar/Avatar.stories.jsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import Avatar from './Avatar';
+// eslint-disable-next-line import/no-unresolved
+import imgUrl from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/images/avatar.png';
+
+export default {
+  title: 'Components/Avatar',
+  component: Avatar,
+  argTypes: {
+    title: {
+      description: 'avatar title',
+      table: {
+        defaultValue: { summary: '""' },
+        type: { summary: 'string' },
+      },
+    },
+    info: {
+      description: 'avatar secondary info',
+      table: {
+        defaultValue: { summary: '""' },
+        type: { summary: 'string' },
+      },
+    },
+    image: {
+      description: 'avatar image',
+      table: {
+        defaultValue: { summary: '""' },
+      },
+    },
+  },
+};
+
+const DefaultTemplate = (args) => (
+  <Avatar avatarSize="big" {...args} image_url={imgUrl}>
+    <Avatar.Content>
+      <Avatar.Title>{args.title}</Avatar.Title>
+      <Avatar.Metadata>{args.info}</Avatar.Metadata>
+    </Avatar.Content>
+  </Avatar>
+);
+
+export const Default = DefaultTemplate.bind({});
+Default.args = {
+  title: 'Lorem ipsum',
+  info: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+};
+
+const SmallTemplate = (args) => (
+  <Avatar avatarSize="small" {...args} image_url={imgUrl}>
+    <Avatar.Content>
+      <Avatar.Title>{args.title}</Avatar.Title>
+      <Avatar.Metadata>{args.info}</Avatar.Metadata>
+    </Avatar.Content>
+  </Avatar>
+);
+
+export const Small = SmallTemplate.bind({});
+Small.args = {
+  title: 'Lorem ipsum',
+  info: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+};

src/ui/AvatarGrid/AvatarGrid.jsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Avatar from '../Avatar/Avatar';
+import { Grid } from 'semantic-ui-react';
+
+AvatarGrid.propTypes = {
+  title: PropTypes.string,
+};
+
+function AvatarGrid({ children, ...rest }) {
+  return (
+    <div className="eea avatar-grid" {...rest}>
+      <div className="wrapper">{children}</div>
+    </div>
+  );
+}
+
+AvatarGrid.Content = ({ children }) => {
+  return <div className="content">{children}</div>;
+};
+
+AvatarGrid.Title = ({ children, ...rest }) => (
+  <p className={`grid-title  ${rest.showTitle ? '' : 'hidden'}`}>{children}</p>
+);
+AvatarGrid.Group = ({ children, ...rest }) => {
+  let avatars = rest.avatars;
+  if (rest.avatars.length > 3) {
+    avatars = avatars.slice(0, 3);
+  }
+  return (
+    <div className="avatar group">
+      <Grid>
+        {avatars.map((avatar) => (
+          <Grid.Column mobile={12} tablet={4} computer={4}>
+            <div className="avatar-wrapper">
+              <Avatar {...rest} image_url={avatar.image_url} avatarSize="big">
+                <Avatar.Content>
+                  <Avatar.Title>{avatar.title}</Avatar.Title>
+                  <Avatar.Metadata>{avatar.metadata}</Avatar.Metadata>
+                </Avatar.Content>
+              </Avatar>
+            </div>
+          </Grid.Column>
+        ))}
+      </Grid>
+    </div>
+  );
+};
+export default AvatarGrid;

src/ui/AvatarGrid/AvatarGrid.stories.jsx

@@ -0,0 +1,66 @@
+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 AvatarGrid from './AvatarGrid';
+
+export default {
+  title: 'Components/Avatar Grid',
+  component: AvatarGrid,
+  argTypes: {
+    showTitle: {
+      description: 'show / hide title',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: true },
+      },
+    },
+    title: {
+      description: 'avatar grid title',
+      table: {
+        defaultValue: { summary: '""' },
+        type: { summary: 'string' },
+      },
+    },
+    avatars: {
+      description: 'avatar data',
+      table: {
+        type: { summary: 'Object' },
+        defaultValue: { summary: ' "" ' },
+      },
+    },
+  },
+};
+
+const GridTemplate = (args) => (
+  <AvatarGrid>
+    <AvatarGrid.Content>
+      <AvatarGrid.Title showTitle={args.showTitle}>
+        {args.title}
+      </AvatarGrid.Title>
+      <AvatarGrid.Group avatars={args.avatars}></AvatarGrid.Group>
+    </AvatarGrid.Content>
+  </AvatarGrid>
+);
+
+export const Default = GridTemplate.bind({});
+Default.args = {
+  title: 'Amet - Lorem ipsum dolor sit amet',
+  showTitle: true,
+  avatars: [
+    {
+      image_url: imgUrl,
+      title: 'Lorem ipsum',
+      metadata: 'Urna auctor pharetra aenean sed gravida quam',
+    },
+    {
+      image_url: imgUrl,
+      title: 'Lorem ipsum',
+      metadata: 'Duis vel eu placerat proin diam id enim suspendisse erat',
+    },
+    {
+      image_url: imgUrl,
+      title: 'Lorem ipsum',
+      metadata: 'Egetisi gravida pellentesque volutpat diamon',
+    },
+  ],
+};

src/ui/Banner/Banner.jsx

@@ -10,7 +10,7 @@ Banner.propTypes = {
 
 function Banner({ image_url, image, children }) {
   return (
-    <div className="eea-page-banner">
+    <div className="eea banner">
       <div
         className="image"
         style={image ? { backgroundImage: `url(${image_url})` } : {}}

src/ui/Divider/Divider.jsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+function Divider({ ...rest }) {
+  return <div className="eea divider" {...rest}></div>;
+}
+
+export default Divider;