fix(components): add grid structure to various components

add grid to Testimonial add grid to AvatarGrid
eea · Mar 3, 2022 · cc33546 · cc33546
1 parent b8e74f1
commit cc33546
Show file tree

Hide file tree

Showing 7 changed files with 55 additions and 43 deletions.
diff --git a/src/ui/AvatarGrid/AvatarGrid.jsx b/src/ui/AvatarGrid/AvatarGrid.jsx
@@ -1,6 +1,7 @@
 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,
@@ -22,18 +23,26 @@ 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">
-      {rest.avatars.map((avatar, index) => (
-        <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>
+        {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>
   );
 };

diff --git a/src/ui/Testimonial/Testimonial.jsx b/src/ui/Testimonial/Testimonial.jsx
@@ -3,6 +3,7 @@ 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';
 
 Testimonial.propTypes = {
   title: PropTypes.string,
@@ -13,27 +14,33 @@ function Testimonial({ children, ...rest }) {
   return (
     <div className="eea testimonial" {...rest}>
       <Divider />
-      <div className="wrapper">{children}</div>
+      <Grid>{children}</Grid>
       <Divider />
     </div>
   );
 }
 
 Testimonial.Avatar = ({ children, ...rest }) => {
   return (
-    <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>
-    </div>
+    <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>
+      </div>
+    </Grid.Column>
   );
 };
 
 Testimonial.Content = ({ children }) => {
-  return <div className="content">{children}</div>;
+  return (
+    <Grid.Column mobile={12} tablet={10} computer={10}>
+      <div className="content">{children}</div>
+    </Grid.Column>
+  );
 };
 
 Testimonial.Title = ({ children }) => <p className="title">{children}</p>;

diff --git a/src/ui/Testimonial/Testimonial.stories.jsx b/src/ui/Testimonial/Testimonial.stories.jsx
@@ -43,7 +43,7 @@ const InlineTemplate = (args) => (
 
 export const Inline = InlineTemplate.bind({});
 Inline.args = {
-  avatarTitle: 'Joe Doe',
+  avatarTitle: 'Jane Doe',
   avatarInfo: 'EEA Analyst',
   title: 'Amet - Lorem ipsum dolor sit amet',
   quote:

diff --git a/theme/themes/eea/extras/avatar.less b/theme/themes/eea/extras/avatar.less
@@ -79,6 +79,7 @@
         margin-top: @avatarContentMarginTopSmall;
         .title {
           font-weight: @avatarContentTitleFontWeightSmall;
+          color: @darkCyan;
           text-align: center;
           font-size: @avatarContentTitleFontSizeSmall;
           line-height: @avatarContentTitleLineHeightSmall;

diff --git a/theme/themes/eea/extras/avatar.variables b/theme/themes/eea/extras/avatar.variables
@@ -3,7 +3,7 @@
 *******************************/
 
 /* Big */
-@avatarWidthBig                 : 257px;
+@avatarWidthBig                 : 100%;
 @avatarWrapperWidth             : 100%;
 @avatarImageWrapperWidth        : 100%;
 @avatarImageHeightBig           : 150px;
@@ -22,13 +22,13 @@
 
 
 /* Small */
-@avatarWidthSmall                       : 151.83px;
+@avatarWidthSmall                       : 100%;
 @avatarImageHeightSmall                 : 130px;
 @avatarImageWidthSmall                  : 130px;
-@avatarContentMarginTopSmall            : 8.35px;
+@avatarContentMarginTopSmall            : 20px;
 @avatarContentTitleFontWeightSmall      : 500;
 @avatarContentTitleFontSizeSmall        : 20px;
 @avatarContentTitleLineHeightSmall      : 30px;
-@avatarMetadataFontSizeSmall            : 18px;
+@avatarMetadataFontSizeSmall            : 16px;
 @avatarMetadataFontWeightSmall          : 300;
 @avatarMetadataMarginTop                : 8.84px;
diff --git a/theme/themes/eea/extras/avatarGrid.less b/theme/themes/eea/extras/avatarGrid.less
@@ -20,7 +20,6 @@
         width: 100%;
         font-weight: 700;
         font-size: 36px;
-        line-height: 20px;
         text-align: center;
       }
 

diff --git a/theme/themes/eea/extras/testimonial.less b/theme/themes/eea/extras/testimonial.less
@@ -8,25 +8,21 @@
 --------------------*/
 
 .eea.testimonial {
-  width: 900px;
+  width: 100%;
 
-  .wrapper {
+  .avatar-wrapper {
     display: flex;
-    margin-top: 36px;
-    margin-bottom: 31.14px;
+    justify-content: center;
+    flex-direction: column;
+    height: 100%;
+  }
 
-    .avatar-wrapper {
-      display: flex;
-      justify-content: center;
-      flex-direction: column;
-    }
-    .content .title {
-      margin: 0 2rem;
-      font-weight: 500;
-      font-size: 36px;
-      line-height: 150%;
-      letter-spacing: -0.015em;
-      color: #3d5265;
-    }
+  .content .title {
+    margin: 0 2rem;
+    font-weight: 500;
+    font-size: 36px;
+    line-height: 150%;
+    letter-spacing: -0.015em;
+    color: #3d5265;
   }
 }