change(card): implement title on image within image section

- this way we simplify the transformation from normal card to card with header on the image section - heading on image is capitalized
eea · Jan 19, 2023 · ff6cc60 · ff6cc60
1 parent 281f9c0
commit ff6cc60
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 33 deletions.
diff --git a/src/ui/Card/Card.stories.jsx b/src/ui/Card/Card.stories.jsx
@@ -86,14 +86,12 @@ const CardTemplate = ({ variant, inverted, titleOnImage, card }) => (
 
       {/* Title */}
       {!titleOnImage || !card.hasImage ? (
-        <Card.Header>
-          <a href={card.href}>{card.title}</a>
-        </Card.Header>
+        <Card.Header>{card.title}</Card.Header>
       ) : (
         ''
       )}
 
-      {/* Decription */}
+      {/* Description */}
       <Card.Description>{card.description}</Card.Description>
     </Card.Content>
 
@@ -108,21 +106,12 @@ const CardTemplate = ({ variant, inverted, titleOnImage, card }) => (
 );
 
 const CardImage = (card) => (
-  <div className="image-with-title">
-    <Image
-      as="a"
-      href={card.href}
-      src={card.imgUrl}
-      wrapped
-      ui={false}
-      alt="card image"
-    />
+  <a href={card.href} className={'image'}>
+    <Image src={card.imgUrl} ui={false} alt="card image" />
     <div className="gradient">
-      <Card.Header>
-        <a href={card.href}>{card.title}</a>
-      </Card.Header>
+      <Card.Header>{card.title}</Card.Header>
     </div>
-  </div>
+  </a>
 );
 
 const MetaRight = (args) => (
@@ -213,7 +202,7 @@ CardGrid.args = {
       fluid: true,
     },
     {
-      title: 'State of Europe\'s environment',
+      title: "State of Europe's environment",
       description:
         'Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis.Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis. Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis.',
       hasImage: false,
@@ -272,7 +261,7 @@ FluidGrid.args = {
       fluid: true,
     },
     {
-      title: 'State of Europe\'s environment',
+      title: "State of Europe's environment",
       description:
         'Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis.Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis. Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis.',
       hasImage: false,
@@ -323,7 +312,6 @@ function CarouselCardsContent({
   inverted,
   settings,
   cards,
-  ...rest
 }) {
   const slider = React.useRef(null);
   return (
@@ -382,7 +370,7 @@ CarouselCards.args = {
   },
   cards: [
     {
-      title: 'State of Europe\'s environment',
+      title: "State of Europe's environment",
       meta: 'March 20, 2022.',
       imgUrl:
         'https://www.eea.europa.eu/media/pictures/european-environment-agency-building-with/image_large',

diff --git a/theme/themes/eea/views/card.overrides b/theme/themes/eea/views/card.overrides
@@ -26,8 +26,7 @@
 }
 
 .ui.cards > .card:not(.rounded) > .image,
-.ui.card:not(.rounded) > .image,
-.ui.card .image-with-title .image {
+.ui.card:not(.rounded) > .image {
   overflow: @cardImageOverflow;
   height: @cardImageHeight;
 
@@ -256,18 +255,14 @@
       Image with title
 *******************************/
 // Adding the default image css for image inside image-with-title
-.ui.cards > .card > .image, .ui.card .image-with-title > .image {
+.ui.cards > .card > .image {
   position: relative;
   display: block;
   flex: 0 0 auto;
-  padding: 0em;
+  padding: 0;
   background: transparent;
 }
 
-.image-with-title {
-  position: relative;
-}
-
 // Gradient Mixin
 .gradientMix(@type; @colors; @dir: 0deg; @prefixes: webkit, moz, ms, o; @index: length(@prefixes)) when (@index > 0) {
   .gradientMix(@type; @colors; @dir; @prefixes; (@index - 1));
@@ -281,7 +276,7 @@
   }
 }
 
-.image-with-title .gradient {
+.card .gradient {
   display: flex;
   align-items: end;
   position: absolute;
@@ -292,18 +287,19 @@
   .gradientMix(linear; rgba(46, 62, 76, 0.65) 38.6%, rgba(46, 62, 76, 0.169) 59.52%, rgba(69, 95, 106, 0) 79.64%; 13.39deg);
 }
 
-.image-with-title .header a {
+.gradient .header {
   font-size: var(--image-header-font-size, @imageTitleFontSize);
   color: @imageTitleColor;
   font-weight: @imageTitleFontWeight;
   line-height: @imageTitleLineHeight;
+  text-transform: @imageTitleTextTransform;
 }
 
 @media only screen and (min-width: @tabletBreakpoint) {
-  .image-with-title .gradient {
+  .card .gradient {
     padding-block: @imageTitlePaddingBlock;
   }
-  .image-with-title .header a {
+  .gradient .header {
     --image-header-font-size: @font-size-7;
   }
 }

diff --git a/theme/themes/eea/views/card.variables b/theme/themes/eea/views/card.variables
@@ -272,6 +272,7 @@
 @imageTitleLineHeight: @font-lineheight-0;
 @imageTitlePadding: @rem-space-6;
 @imageTitlePaddingBlock: @rem-space-2;
+@imageTitleTextTransform: uppercase;
 
 /*******************************
           Rounded Card