refactor(roundedCard): remove unnecessary code and controls and add a…

…ll variations
eea · Jul 13, 2022 · 6305c54 · 6305c54
1 parent ca06948
commit 6305c54
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 12 deletions.
diff --git a/src/ui/Card/AvatarGrid/AvatarGrid.jsx b/src/ui/Card/AvatarGrid/AvatarGrid.jsx
@@ -26,7 +26,7 @@ AvatarGrid.Group = ({ children, ...rest }) => {
                 className={`eea rounded ${
                   rest.variant === 'default' ? '' : rest.variant
                 } ${rest.inverted ? 'inverted' : ''}`}
-                fluid={avatar.fluid}
+                fluid={rest.fluid}
               >
                 {rest.hasLink ? (
                   <Image

diff --git a/src/ui/Card/AvatarGrid/AvatarGrid.stories.jsx b/src/ui/Card/AvatarGrid/AvatarGrid.stories.jsx
@@ -26,6 +26,15 @@ export default {
         type: { summary: 'boolean' },
       },
     },
+    fluid: {
+      description: 'take up the width of its container',
+      table: {
+        type: {
+          summary: 'boolean',
+        },
+        defaultValue: { summary: false },
+      },
+    },
     hasLink: {
       description: 'Clickable card',
       table: {
@@ -57,6 +66,7 @@ export const RoundedGrid = GridTemplate.bind({});
 RoundedGrid.args = {
   variant: 'default',
   inverted: false,
+  fluid: false,
   hasLink: true,
   href: '/#',
   avatars: [

diff --git a/src/ui/Card/RoundedCard.stories.jsx b/src/ui/Card/RoundedCard.stories.jsx
@@ -11,6 +11,24 @@ export default {
     },
   },
   argTypes: {
+    variant: {
+      options: ['default', 'primary', 'secondary', 'tertiary'],
+      control: { type: 'select' },
+      description: 'card variation class',
+      table: {
+        type: {
+          summary: 'string',
+        },
+        defaultValue: { summary: 'null' },
+      },
+    },
+    inverted: {
+      description: 'Inverted card',
+      table: {
+        defaultValue: { summary: 'false' },
+        type: { summary: 'boolean' },
+      },
+    },
     hasImage: {
       description: 'true if card contains image',
       table: {
@@ -61,7 +79,12 @@ export default {
 
 const AvatarTemplate = (args) => (
   <Container>
-    <Card className="rounded" fluid={args.fluid}>
+    <Card
+      className={`rounded ${args.variant === 'default' ? '' : args.variant} ${
+        args.inverted ? 'inverted' : ''
+      }`}
+      fluid={args.fluid}
+    >
       {args.hasImage && (
         <Image src={args.src} wrapped ui={false} alt="card image" />
       )}
@@ -75,6 +98,8 @@ const AvatarTemplate = (args) => (
 
 export const Default = AvatarTemplate.bind({});
 Default.args = {
+  variant: 'default',
+  inverted: false,
   src: imgUrl,
   title: 'Lorem Ipsum',
   description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',

diff --git a/theme/themes/eea/views/card.overrides b/theme/themes/eea/views/card.overrides
@@ -236,7 +236,6 @@
 
 .ui.card.rounded {
   padding-top: @iconCardPaddingTop;
-  width: @roundedWidth;
   border: none;
 
   .image {
@@ -246,7 +245,7 @@
     img {
       width: @roundedImageWidth;
       height: @roundedImageHeight;
-      border-radius: 50%;
+      border-radius: @roundedImageBorderRadius;
     }
   }
 

diff --git a/theme/themes/eea/views/card.variables b/theme/themes/eea/views/card.variables
@@ -272,18 +272,10 @@
           Rounded Card
 *******************************/
 /* Global */
-@roundedWidth                    : 100%;
-@roundedWrapperWidth             : 100%;
-@roundedWrapperGap               : @largeGap;
-@roundedContentWrapperWidth      : 100%;
 @roundedImageBorderRadius        : @circularRadius;
 @roundedContentTitleMarginBottom : @rem-space-2;
-@roundedImageWrapperWidth        : 100%;
-@roundedImageBackgroundSize      : cover;
 @roundedContentTitleFontWeight   : @bold;
 @roundedContentTitleFontSize     : @font-size-3;
-
-/* Big */
 @roundedImageHeight           : 173px;
 @roundedImageWidth            : 173px;
 @roundedMetadataFontSize      : @font-size-1;