5396: rename search result item

Author: Sine Jespersen

architecture/adr-001-skeleton-screens.md

@@ -40,4 +40,4 @@ client side or server side.
 Because we want to use existing styling setup in conjunction
 with the Skeleton Screen Classes we sometimes need to ignore the existing
 BEM rules that we normally comply to.
-See eg. the [search result styling](../src/stories/Library/search-result-item/search-result-item-skeleton.scss).
+See eg. the [search result styling](../src/stories/Library/card-list-item/card-list-item-skeleton.scss).

base.scss

@@ -38,8 +38,8 @@
 @import "./src/stories/Library/autosuggest-text/autosuggest-text";
 @import "./src/stories/Library/autosuggest-material/autosuggest-material";
 @import "./src/stories/Library/material-card/material-card";
-@import "./src/stories/Library/search-result-item/search-result-item";
-@import "./src/stories/Library/search-result-item/search-result-item-skeleton";
+@import "./src/stories/Library/card-list-item/card-list-item";
+@import "./src/stories/Library/card-list-item/card-list-item-skeleton";
 @import "./src/stories/Library/Lists/list-reservation/list-reservation";
 @import "./src/stories/Library/Lists/list-dashboard/list-dashboard";
 @import "./src/stories/Library/Lists/list-description/list-description";

src/stories/Library/search-result-item/SearchResultItem.stories.tsx renamed to src/stories/Library/card-list-item/CardListItem.stories.tsx

@@ -1,12 +1,11 @@
 import { withDesign } from "storybook-addon-designs";
 import { ComponentMeta, ComponentStory } from "@storybook/react";
-
-import { SearchResultItem } from "./SearchResultItem";
-import { SearchResultItemSkeleton } from "./SearchResultItemSkeleton";
+import { CardListItem } from "./CardListItem";
+import { CardListItemSkeleton } from "./CardListItemSkeleton";
 
 export default {
-  title: "Library / Search Result Item",
-  component: SearchResultItem,
+  title: "Library / Card List Item",
+  component: CardListItem,
   decorators: [withDesign],
   parameters: {
     design: {
@@ -50,10 +49,10 @@ export default {
       defaultValue: 3,
     },
   },
-} as ComponentMeta<typeof SearchResultItem>;
+} as ComponentMeta<typeof CardListItem>;
 
-export const Item: ComponentStory<typeof SearchResultItem> = (args) => {
-  return <SearchResultItem {...args} />;
+export const Item: ComponentStory<typeof CardListItem> = (args) => {
+  return <CardListItem {...args} />;
 };
 
 export const ContentOverload = Item.bind({});
@@ -64,8 +63,6 @@ ContentOverload.args = {
   availabilityLabels: 25,
 };
 
-export const SkeletonItem: ComponentStory<
-  typeof SearchResultItemSkeleton
-> = () => {
-  return <SearchResultItemSkeleton />;
+export const SkeletonItem: ComponentStory<typeof CardListItemSkeleton> = () => {
+  return <CardListItemSkeleton />;
 };

src/stories/Library/search-result-item/SearchResultItem.tsx renamed to src/stories/Library/card-list-item/CardListItem.tsx

@@ -8,7 +8,7 @@ import HorizontalTermLine, {
 } from "../horizontal-term-line/HorizontalTermLine";
 import { getCoverTint } from "../cover/helper";
 
-export type SearchResultItemProps = {
+export type CardListItemProps = {
   heartFill?: boolean;
   title: string;
   author: string;
@@ -18,15 +18,15 @@ export type SearchResultItemProps = {
   tintIndex: number;
 };
 
-export const SearchResultItem = ({
+export const CardListItem = ({
   heartFill,
   title,
   author,
   year,
   horizontalTermLineData,
   availabilityLabels,
   tintIndex,
-}: SearchResultItemProps) => {
+}: CardListItemProps) => {
   const materialTypes: AvailabilityLabelPropsType["manifestationType"][] = [
     "Bog",
     "Ebog",
@@ -35,29 +35,29 @@ export const SearchResultItem = ({
   ];
 
   return (
-    <a href="/" className="search-result-item arrow arrow__hover--right-small">
-      <div className="search-result-item__cover">
+    <a href="/" className="card-list-item arrow arrow__hover--right-small">
+      <div className="card-list-item__cover">
         <Cover
           src="images/book_cover_3.jpg"
           size="small"
           animate={false}
           tint={getCoverTint(tintIndex)}
         />
       </div>
-      <div className="search-result-item__text">
-        <div className="search-result-item__meta">
+      <div className="card-list-item__text">
+        <div className="card-list-item__meta">
           <ButtonFavourite fill={heartFill} />
           {horizontalTermLineData && (
             <HorizontalTermLine {...horizontalTermLineData} />
           )}
         </div>
 
-        <h2 className="search-result-item__title text-header-h4 mb-4">
+        <h2 className="card-list-item__title text-header-h4 mb-4">
           <a href="">{title}</a>
         </h2>
         <p className="text-small-caption">{`Af ${author} (${year})`}</p>
       </div>
-      <div className="search-result-item__availability">
+      <div className="card-list-item__availability">
         {/* We render the amount of availability labels defined by the story. */}
         {Array(availabilityLabels)
           .fill(0)

src/stories/Library/search-result-item/SearchResultItemSkeleton.tsx renamed to src/stories/Library/card-list-item/CardListItemSkeleton.tsx

@@ -1,6 +1,6 @@
-export const SearchResultItemSkeleton = () => {
+export const CardListItemSkeleton = () => {
   return (
-    <div className="search-result-item arrow arrow__hover--right-small ssc">
+    <div className="card-list-item arrow arrow__hover--right-small ssc">
       <div className="ssc-square cover--size-small">&nbsp;</div>
       <div className="ssc-wrapper">
         <div className="ssc-head-line mb" />

src/stories/Library/search-result-item/search-result-item-skeleton.scss renamed to src/stories/Library/card-list-item/card-list-item-skeleton.scss

@@ -2,7 +2,7 @@
 // we deliberately not follow the BEM naming convention here.
 /* stylelint-disable plugin/stylelint-bem-namics */
 
-.search-result-item {
+.card-list-item {
   &.ssc {
     grid-template-columns: min-content 1fr;
   }

src/stories/Library/search-result-item/search-result-item.scss renamed to src/stories/Library/card-list-item/card-list-item.scss

@@ -1,4 +1,4 @@
-.search-result-item {
+.card-list-item {
   background-color: #fff;
   padding: 16px 24px;
   display: grid;
@@ -20,17 +20,17 @@
   }
 }
 
-@include arrow("search-result-item");
+@include arrow("card-list-item");
 
-.search-result-item__cover {
+.card-list-item__cover {
   grid-row: span 2;
 
   @include breakpoint-s {
     grid-row: auto;
   }
 }
 
-.search-result-item__availability {
+.card-list-item__availability {
   grid-column: 2;
   display: flex;
   align-content: center;
@@ -42,12 +42,12 @@
   }
 }
 
-.search-result-item__meta {
+.card-list-item__meta {
   display: flex;
   gap: 10px;
 }
 
-.search-result-item__title {
+.card-list-item__title {
   margin-top: 10px;
 
   & > a {

src/stories/Library/search-result-page/SearchResultPage.tsx

@@ -1,4 +1,4 @@
-import { SearchResultItem } from "../search-result-item/SearchResultItem";
+import { CardListItem } from "../card-list-item/CardListItem";
 import { SearchResultInfo } from "./SearchResultInfo";
 import ResultPager from "./ResultPager";
 import { SearchResultTitle } from "./SearchResultTitle";
@@ -17,7 +17,7 @@ export type SearchResultPageProps = {
 };
 
 const SearchResultList = data.searchResult.map((item, i) => {
-  return <SearchResultItem {...item} tintIndex={i} />;
+  return <CardListItem {...item} tintIndex={i} />;
 });
 
 export const SearchResultPage = ({

src/stories/Library/search-result-page/SearchResultPageSkeleton.tsx

@@ -1,5 +1,5 @@
 import { SearchResultTitle } from "./SearchResultTitle";
-import { SearchResultItemSkeleton } from "../search-result-item/SearchResultItemSkeleton";
+import { CardListItemSkeleton } from "../card-list-item/CardListItemSkeleton";
 
 export type SearchResultPageSkeletonProps = {
   title: string;
@@ -35,19 +35,19 @@ export const SearchResultPageSkeleton = ({
       </div>
       <ul className="search-result-page__list my-32">
         <li>
-          <SearchResultItemSkeleton />
+          <CardListItemSkeleton />
         </li>
         <li>
-          <SearchResultItemSkeleton />
+          <CardListItemSkeleton />
         </li>
         <li>
-          <SearchResultItemSkeleton />
+          <CardListItemSkeleton />
         </li>
         <li>
-          <SearchResultItemSkeleton />
+          <CardListItemSkeleton />
         </li>
         <li>
-          <SearchResultItemSkeleton />
+          <CardListItemSkeleton />
         </li>
       </ul>
     </div>