@ndla/ui 34.3.6 → 34.4.0

package/src/SearchTypeResult/components/ItemResourceHeader.tsx

@@ -18,29 +18,20 @@ import { SearchItemType } from '../SearchItem';
 import resourceTypeColor from '../../utils/resourceTypeColor';
 import ContentTypeBadge from '../../ContentTypeBadge';
 
-type ItemTypeProps = {
+interface ItemTypeProps {
   contentType?: ContentType;
-};
+}
 
 const ImageElement = styled.img`
   width: 100%;
   height: 100%;
   object-fit: cover;
-`;
-
-const ImageWrapper = styled.div`
-  flex: 1;
-  border-top-left-radius: 5px;
-  border-top-right-radius: 5px;
   overflow: hidden;
 `;
 
 const NoImageElement = styled.div<ItemTypeProps>`
-  border-top-left-radius: 5px;
-  border-top-right-radius: 5px;
   flex: 1;
   background: ${(props) => props.contentType && `${resourceTypeColor(props.contentType)}`};
-  position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -59,7 +50,6 @@ const NoImageElement = styled.div<ItemTypeProps>`
 const ContentTypeWrapper = styled.div<ItemTypeProps>`
   height: 48px;
   background: ${(props) => props.contentType && `${resourceTypeColor(props.contentType)}`};
-  flex: 0 0 auto;
   position: relative;
   display: flex;
   align-items: center;
@@ -69,47 +59,59 @@ const ContentTypeWrapper = styled.div<ItemTypeProps>`
 `;
 
 const ContentTypeIcon = styled.span<ItemTypeProps>`
+  display: flex;
   position: absolute;
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='78' height='23' viewBox='17 0 78 23' fill='none'%3E%3Cpath d='M35.6874 10.8284C37.0999 8.9889 38.405 7.28934 40 6C44.8452 2.08335 48.9078 0 56 0C63.0922 0 67.6548 2.5833 72.5 6.49995C74.0499 7.75284 75.2937 9.39082 76.6385 11.1617C80.0028 15.5921 83.9988 20.8545 95 23H17C27.9865 20.8573 32.1701 15.409 35.6874 10.8284ZM352' fill='${(
-    props,
-  ) => props.contentType && `${encodeURIComponent(resourceTypeColor(props.contentType))}`}'/%3E%3C/svg%3E");
-  background-position: top;
-  background-repeat: no-repeat;
-  left: 17px;
   top: -23px;
-  height: 45px;
-  width: 78px;
-  display: flex;
+  margin-left: ${spacing.small};
   justify-content: center;
-  align-items: center;
-  z-index: 2;
+  ::before {
+    content: '';
+    position: absolute;
+    height: 23px;
+    width: 78px;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='78' height='23' viewBox='17 0 78 23' fill='none'%3E%3Cpath d='M35.6874 10.8284C37.0999 8.9889 38.405 7.28934 40 6C44.8452 2.08335 48.9078 0 56 0C63.0922 0 67.6548 2.5833 72.5 6.49995C74.0499 7.75284 75.2937 9.39082 76.6385 11.1617C80.0028 15.5921 83.9988 20.8545 95 23H17C27.9865 20.8573 32.1701 15.409 35.6874 10.8284ZM352' fill='${(
+      props,
+    ) => props.contentType && `${encodeURIComponent(resourceTypeColor(props.contentType))}`}'/%3E%3C/svg%3E");
+  }
+`;
+
+const StyledContentTypeBadge = styled(ContentTypeBadge)`
+  z-index: 1;
+  margin-top: ${spacing.xxsmall};
+
   svg {
     width: 20px;
     height: 20px;
   }
 `;
 
-type Props = {
+const Wrapper = styled.header`
+  display: grid;
+  grid-template-rows: 1fr auto;
+  overflow: hidden;
+  flex-direction: column;
+  height: 180px;
+`;
+
+interface Props {
   labels: SearchItemType['item']['labels'];
   img?: SearchItemType['item']['img'] | null;
   type?: ContentType;
-};
+}
 
 const ItemResourceHeader = ({ labels = [], img, type }: Props) => {
   const { t } = useTranslation();
   return (
-    <>
+    <Wrapper>
       {img ? (
-        <ImageWrapper>
-          <ImageElement src={img.url} alt={img.alt} />
-        </ImageWrapper>
+        <ImageElement src={img.url} alt={img.alt} />
       ) : (
         <NoImageElement contentType={type}>{type && <ContentTypeBadge type={type} border={false} />}</NoImageElement>
       )}
       <ContentTypeWrapper className="resource-type-wrapper" contentType={type}>
         {img && type && (
           <ContentTypeIcon className="resource-icon-wrapper" contentType={type}>
-            <ContentTypeBadge type={type} border={false} />
+            <StyledContentTypeBadge type={type} border={false} />
           </ContentTypeIcon>
         )}
         {type && t(`contentTypes.${type}`)}
@@ -124,7 +126,7 @@ const ItemResourceHeader = ({ labels = [], img, type }: Props) => {
           </>
         )}
       </ContentTypeWrapper>
-    </>
+    </Wrapper>
   );
 };
 

package/src/SearchTypeResult/components/ItemTopicHeader.tsx

@@ -15,11 +15,8 @@ import { SearchItemType } from '../SearchItem';
 import ContentTypeBadge from '../../ContentTypeBadge';
 import { ContentType } from '../SearchTypeResult';
 
-const Wrapper = styled.div`
-  padding: ${spacing.small} ${spacing.normal};
-  position: relative;
-  min-height: 0;
-  flex: 1;
+const Wrapper = styled.header`
+  padding: ${spacing.small} ${spacing.normal} 0;
 `;
 
 const Label = styled.div`
@@ -28,7 +25,7 @@ const Label = styled.div`
   height: 26px;
   display: flex;
   align-items: center;
-  margin-top: ${spacing.small};
+  margin: ${spacing.small} 0;
 
   .c-content-type-badge {
     width: 26px;
@@ -46,15 +43,11 @@ const Label = styled.div`
 const TopicHeaderVisualElementWrapper = styled.div`
   float: right;
   margin-left: ${spacing.small};
-  position: relative;
-  width: 112px;
-  height: 112px;
+  width: 110px;
+  height: 110px;
   display: flex;
-  justify-content: center;
-  align-items: center;
   overflow: hidden;
   border-radius: 50%;
-  -webkit-mask-image: -webkit-radial-gradient(white, black);
 `;
 
 const TopicHeaderImage = styled.img`
@@ -64,18 +57,19 @@ const TopicHeaderImage = styled.img`
   max-width: unset;
 `;
 
-type Props = {
+interface Props {
   children: ReactNode;
   image?: SearchItemType['item']['img'] | null;
   type?: ContentType;
-};
+}
+
 const ItemTopicHeader = ({ children, image, type }: Props) => {
   const { t } = useTranslation();
   return (
     <Wrapper>
       {image && (
         <TopicHeaderVisualElementWrapper>
-          <TopicHeaderImage className="topic-header-image" src={image.url} alt={image.alt} />
+          <TopicHeaderImage className="topic-header-image" src={image.url} alt="" />
         </TopicHeaderVisualElementWrapper>
       )}
       <Label className="topic-label">