simplify the look of nonfeatured articles

src/components/ItemList/ItemList.tsx

@@ -1,6 +1,10 @@
 import React from "react";
 import Item from "../Item/Item";
-import { Item as mItem } from "../../model";
+import {
+  featuredOnly,
+  nonFeaturedOnly,
+  Item as mItem,
+} from "../../model";
 import "./item-list.scss";
 
 type ItemListProps = {
@@ -9,7 +13,6 @@ type ItemListProps = {
   noLeadingBorder?: boolean;
   headerStyle?: React.CSSProperties;
   itemStyle?: React.CSSProperties[];
-  greyedOut?: boolean;
 };
 
 const ItemList: React.FC<ItemListProps> = ({
@@ -19,25 +22,38 @@ const ItemList: React.FC<ItemListProps> = ({
   noLeadingBorder,
   headerStyle = {},
   itemStyle = [],
-  greyedOut = false,
-}) => (
+}) => {
+  const featuredItems = featuredOnly(items);
+  const nonFeaturedItems = nonFeaturedOnly(items);
+  
+  return (
   <div className="item-list">
     <div className="item-list__header" style={headerStyle}>
       {children}
     </div>
     <div className="item-list__list">
-      {items.map((item, i) => (
+      {featuredItems.map((item, i) => (
         <Item
           key={item.name}
           item={item}
           noLeadingBorder={noLeadingBorder}
           active={activeItem?.name === item.name}
           style={itemStyle[i]}
-          greyedOut={greyedOut}
+          greyedOut={false}
+        />
+      ))}
+      {nonFeaturedItems.map((item, i) => (
+        <Item
+          key={item.name}
+          item={item}
+          noLeadingBorder={noLeadingBorder}
+          active={activeItem?.name === item.name}
+          style={itemStyle[featuredItems.length + i]}
+          greyedOut={true}
         />
       ))}
     </div>
   </div>
-);
+);}
 
 export default ItemList;

src/components/PageItem/PageItem.tsx

@@ -9,8 +9,6 @@ import { useAnimations } from "./useAnimations";
 import "./item-page.scss";
 import { translate } from "../../config";
 import {
-  featuredOnly,
-  nonFeaturedOnly,
   groupByQuadrants,
   Item,
 } from "../../model";
@@ -36,13 +34,9 @@ type Props = {
 
 const PageItem: React.FC<Props> = ({ pageName, items, leaving, onLeave }) => {
   const itemsInRing = getItemsInRing(pageName, items);
-  const featuredItemsInRing = featuredOnly(itemsInRing);
-  const nonFeaturedItemsInRing = nonFeaturedOnly(itemsInRing);
 
   const { getAnimationState, getAnimationStates } = useAnimations({
     itemsInRing,
-    featuredItemsInRing,
-    nonFeaturedItemsInRing,
     onLeave,
     leaving,
   });
@@ -62,10 +56,10 @@ const PageItem: React.FC<Props> = ({ pageName, items, leaving, onLeave }) => {
               <h3 className="headline">{translate(item.quadrant)}</h3>
             </div>
             <ItemList
-              items={featuredItemsInRing}
+              items={itemsInRing}
               activeItem={item}
               headerStyle={getAnimationState("navHeader")}
-              itemStyle={getAnimationStates("featuredItems")}
+              itemStyle={getAnimationStates("items")}
             >
               <div className="split">
                 <div className="split__left">
@@ -82,24 +76,6 @@ const PageItem: React.FC<Props> = ({ pageName, items, leaving, onLeave }) => {
               </div>
             </ItemList>
 
-            {nonFeaturedItemsInRing.length > 0 && (
-              <div className="item-page__non-featured-items">
-                <ItemList
-                  items={nonFeaturedItemsInRing}
-                  activeItem={item}
-                  headerStyle={getAnimationState("nonFeaturedItems")}
-                  itemStyle={getAnimationStates("nonFeaturedItems")}
-                  greyedOut={true}
-                >
-                  <div className="split">
-                    <div className="split__left">
-                      <h4 className="headline">Not featured anymore</h4>
-                    </div>
-                  </div>
-                </ItemList>
-              </div>
-            )}
-
             <div
               className="item-page__footer"
               style={getAnimationState("footer")}

src/components/PageItem/item-page.scss

@@ -48,10 +48,6 @@
       padding: 0 10px 0 100px;
     }
   }
-
-  &__non-featured-items {
-    margin-top: 45px;
-  }
 }
 
 .mobile-item-page {

src/components/PageItem/useAnimations.tsx

@@ -1,7 +1,6 @@
 import { useEffect, useState, useMemo } from "react";
 import {
   Animation,
-  AnimationConfig as AbstractAnimationConfig,
   AnimationStates,
   createAnimation,
   createAnimationRunner,
@@ -10,25 +9,20 @@ import { Item } from "../../model";
 
 interface Props {
   itemsInRing: Item[];
-  featuredItemsInRing: Item[];
-  nonFeaturedItemsInRing: Item[];
   leaving: boolean;
   onLeave: () => void;
 }
 
 export const useAnimations = ({
   itemsInRing,
-  featuredItemsInRing,
-  nonFeaturedItemsInRing,
   leaving,
   onLeave,
 }: Props) => {
-  interface AnimationConfig extends AbstractAnimationConfig {
+  type AnimationConfig = {
     background: Animation;
     navHeader: Animation;
     text: Animation;
-    featuredItems: Animation[];
-    nonFeaturedItems: Animation[];
+    items: Animation[];
     footer: Animation;
   }
 
@@ -71,7 +65,7 @@ export const useAnimations = ({
         },
         600
       ),
-      featuredItems: featuredItemsInRing.map((item, i) =>
+      items: itemsInRing.map((item, i) =>
         createAnimation(
           {
             transform: "translateX(-40px)",
@@ -85,20 +79,6 @@ export const useAnimations = ({
           400 + 100 * i
         )
       ),
-      nonFeaturedItems: nonFeaturedItemsInRing.map((item, i) =>
-        createAnimation(
-          {
-            transform: "translateX(-40px)",
-            opacity: "0",
-          },
-          {
-            transition: "opacity 150ms ease-out, transform 300ms ease-out",
-            transform: "translateX(0px)",
-            opacity: "1",
-          },
-          400 + 100 * (featuredItemsInRing.length + i)
-        )
-      ),
       footer: createAnimation(
         {
           transition: "opacity 150ms ease-out, transform 300ms ease-out",
@@ -113,7 +93,7 @@ export const useAnimations = ({
         600 + itemsInRing.length * 100
       ),
     }),
-    [itemsInRing, featuredItemsInRing, nonFeaturedItemsInRing]
+    [itemsInRing]
   );
 
   const animationsOut: AnimationConfig = useMemo(
@@ -141,9 +121,9 @@ export const useAnimations = ({
         },
         0
       ),
-      featuredItems: featuredItemsInRing.map((item, i) =>
+      items: itemsInRing.map((item, i) =>
         createAnimation(
-          animationsIn.featuredItems[i].stateB,
+          animationsIn.items[i].stateB,
           {
             transition: "opacity 150ms ease-out, transform 300ms ease-out",
             transform: "translateX(40px)",
@@ -152,17 +132,6 @@ export const useAnimations = ({
           100 + 50 * i
         )
       ),
-      nonFeaturedItems: nonFeaturedItemsInRing.map((item, i) =>
-        createAnimation(
-          animationsIn.nonFeaturedItems[i].stateB,
-          {
-            transition: "opacity 150ms ease-out, transform 300ms ease-out",
-            transform: "translateX(40px)",
-            opacity: "0",
-          },
-          100 + 50 * (featuredItemsInRing.length + i)
-        )
-      ),
       footer: createAnimation(
         animationsIn.text.stateB,
         {
@@ -173,7 +142,7 @@ export const useAnimations = ({
         200 + itemsInRing.length * 50
       ),
     }),
-    [itemsInRing, featuredItemsInRing, nonFeaturedItemsInRing, animationsIn]
+    [itemsInRing, animationsIn]
   );
 
   const [animations, setAnimations] = useState<AnimationStates>(() => {