Change to follow guidelines for BEM

Author: kasperbirch1

src/stories/Blocks/material-manifestation-item/MaterialMainfestationItem.tsx

@@ -38,12 +38,12 @@ export const MaterialMainfestationItem = ({
         />
       </div>
       <div className="material-manifestation-item__text">
-        <h2 className="material-manifestation-item__text__title text-header-h4">
+        <h2 className="material-manifestation-item__title text-header-h4">
           {title}
         </h2>
         <p className="text-small-caption">{`Af ${author} (${year})`}</p>
         <div
-          className={`material-manifestation-item__text__details ${
+          className={`material-manifestation-item__details ${
             isOpen ? "expanded" : ""
           }`}
           onClick={() => {
@@ -56,7 +56,7 @@ export const MaterialMainfestationItem = ({
         {isOpen && <ListDescription className="mt-24" data={detailsData} />}
       </div>
 
-      <div className="material-manifestation-item__reserve">
+      <div className="material-manifestation-item__buttons">
         <Button
           label="RESERVER"
           buttonType="none"
@@ -65,7 +65,7 @@ export const MaterialMainfestationItem = ({
           size="small"
           variant="filled"
         />
-        <span className="link-tag text-small-caption material-manifestation-item__reserve__find">
+        <span className="link-tag text-small-caption material-manifestation-item__find">
           Find på hylden
         </span>
       </div>

src/stories/Blocks/material-manifestation-item/material-manifestation-item.scss

@@ -15,31 +15,31 @@
   &:hover {
     filter: drop-shadow(0 4px 20px rgba(72, 72, 72, 0.1));
   }
-}
 
-.material-manifestation-item__cover {
-  display: none;
+  &__cover {
+    display: none;
 
-  @include breakpoint-s {
-    display: block;
-    grid-column: 1/2;
-    grid-row: 1/3;
-    margin-right: 46px;
+    @include breakpoint-s {
+      display: block;
+      grid-column: 1/2;
+      grid-row: 1/3;
+      margin-right: 46px;
+    }
   }
-}
-
-.material-manifestation-item__availability {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px;
-}
 
-.material-manifestation-item__text {
-  @include breakpoint-s {
-    grid-column: 2/3;
+  &__availability {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
   }
 
+  &__text {
+    color: $c-text-secondary-gray;
 
+    @include breakpoint-s {
+      grid-column: 2/3;
+    }
+  }
 
   &__title {
     color: $c-text-primary-black;
@@ -55,10 +55,6 @@
     }
   }
 
-  &, &__details p.text-small-caption {
-    color: $c-text-secondary-gray;
-  }
-
   &__details {
     margin-top: 19px;
     display: flex;
@@ -71,25 +67,29 @@
 
     &.expanded {
       img {
-        transform : rotate(180deg);
+        transform: rotate(180deg);
       }
     }
-  }
-}
 
-.material-manifestation-item__reserve {
-  @include breakpoint-s {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-self: end;
+    & p.text-small-caption {
+      color: $c-text-secondary-gray;
+    }
   }
-  button {
-    margin-top: 16px;
-    max-width: 158px;
 
+  &__buttons {
     @include breakpoint-s {
-      margin-top: 0;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-self: end;
+    }
+    button {
+      margin-top: 16px;
+      max-width: 158px;
+
+      @include breakpoint-s {
+        margin-top: 0;
+      }
     }
   }
   &__find {