separate non featured articles on quadrant view

dist_scripts/src/model.js

@@ -16,15 +16,15 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from) {
     return to;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getFirstLetter = exports.groupByFirstLetter = exports.groupByQuadrants = exports.unfeaturedOnly = exports.featuredOnly = void 0;
+exports.getFirstLetter = exports.groupByFirstLetter = exports.groupByQuadrants = exports.nonFeaturedOnly = exports.featuredOnly = void 0;
 var featuredOnly = function (items) {
     return items.filter(function (item) { return item.featured; });
 };
 exports.featuredOnly = featuredOnly;
-var unfeaturedOnly = function (items) {
+var nonFeaturedOnly = function (items) {
     return items.filter(function (item) { return !item.featured; });
 };
-exports.unfeaturedOnly = unfeaturedOnly;
+exports.nonFeaturedOnly = nonFeaturedOnly;
 var groupByQuadrants = function (items) {
     return items.reduce(function (quadrants, item) {
         var _a;

src/animation.ts

@@ -1,35 +1,46 @@
-import React from 'react';
+import React from "react";
+
+export interface AnimationConfig {
+  [k: string]: Animation | Animation[];
+}
 
 export type Animations = {
-    [k: string]: Animation[]
+  [k: string]: Animation[];
-}
+};
 
 export type AnimationStates = {
-    [k: string]: React.CSSProperties[]
+  [k: string]: React.CSSProperties[];
-}
+};
 
-type Animation = {
+export type Animation = {
-    stateA: React.CSSProperties
+  stateA: React.CSSProperties;
-    stateB: React.CSSProperties
+  stateB: React.CSSProperties;
-    delay: number
+  delay: number;
-    run?(callback: (state: any) => any): any // todo fix
+  run?(callback: (state: any) => any): any; // todo fix
-    prepare?(callback: (state: any) => any): any // todo fix
+  prepare?(callback: (state: any) => any): any; // todo fix
-}
+};
 
 export type AnimationRunner = {
-    getState(): AnimationStates
+  getState(): AnimationStates;
-    run(): any
+  run(): any;
-    awaitAnimationComplete(callback: () => void): any
+  awaitAnimationComplete(callback: () => void): any;
-}
+};
 
-export const createAnimation = (stateA: React.CSSProperties, stateB: React.CSSProperties, delay: number): Animation => ({
+export const createAnimation = (
+  stateA: React.CSSProperties,
+  stateB: React.CSSProperties,
+  delay: number
+): Animation => ({
   stateA,
   stateB,
   delay,
 });
 
-const getAnimationStates = (animations: Animation[], stateName: 'stateA' | 'stateB' = 'stateA'): React.CSSProperties[] => {
+const getAnimationStates = (
-    return animations.map(animation => animation[stateName]);
+  animations: Animation[],
+  stateName: "stateA" | "stateB" = "stateA"
+): React.CSSProperties[] => {
+  return animations.map((animation) => animation[stateName]);
 };
 
 const getMaxTransitionTime = (transition: string) => {
@@ -54,25 +65,39 @@ const getAnimationDuration = (animation: Animation | Animation[]): number => {
   }
 
   const state = animation.stateB;
-    const maxTransition = state.transition ? getMaxTransitionTime(state.transition) : 0;
+  const maxTransition = state.transition
+    ? getMaxTransitionTime(state.transition)
+    : 0;
   return maxTransition + animation.delay;
 };
 
-const getMaxAnimationsDuration = (animations: Animations) => (
+const getMaxAnimationsDuration = (animations: Animations) =>
-    Math.max(...Object.values(animations).map(animations => getAnimationDuration(Object.values(animations))))
+  Math.max(
+    ...Object.values(animations).map((animations) =>
+      getAnimationDuration(Object.values(animations))
+    )
   );
 
-export const createAnimationRunner = (animationsIn: { [k: string]: (Animation | Animation[]) }, subscriber: () => void = () => {
+export const createAnimationRunner = (
-}): AnimationRunner => {
+  animationsIn: AnimationConfig,
-    const animations = Object.entries(animationsIn).reduce((state, [name, animation]) => ({
+  subscriber: () => void = () => {}
+): AnimationRunner => {
+  const animations = Object.entries(animationsIn).reduce(
+    (state, [name, animation]) => ({
       ...state,
-        [name]: animation instanceof Array ? animation : [animation] as Animation[],
+      [name]:
-    }), {} as Animations);
+        animation instanceof Array ? animation : ([animation] as Animation[]),
+    }),
+    {} as Animations
+  );
 
-    let state = Object.entries(animations).reduce((state, [name, animation]) => ({
+  let state = Object.entries(animations).reduce(
+    (state, [name, animation]) => ({
       ...state,
       [name]: getAnimationStates(animation),
-    }), {} as AnimationStates);
+    }),
+    {} as AnimationStates
+  );
 
   const animationsDuration = getMaxAnimationsDuration(animations);
 
@@ -83,16 +108,16 @@ export const createAnimationRunner = (animationsIn: { [k: string]: (Animation |
           state = {
             ...state,
             [name]: [
-                            ...(state[name]?.slice(0, index)),
+              ...state[name]?.slice(0, index),
               a.stateB,
-                            ...(state[name]?.slice(index + 1, state[name].length)),
+              ...state[name]?.slice(index + 1, state[name].length),
             ],
           };
           subscriber();
         }, a.delay);
       });
     });
-    }
+  };
 
   return {
     getState() {
@@ -100,11 +125,11 @@ export const createAnimationRunner = (animationsIn: { [k: string]: (Animation |
     },
     run() {
       Object.entries(animations).forEach(([name, animation]) => {
-                animate(name, animation)
+        animate(name, animation);
       });
     },
     awaitAnimationComplete(callback) {
       window.setTimeout(callback, animationsDuration);
     },
-    }
+  };
-}
+};

src/components/Item/Item.tsx

@@ -1,31 +1,43 @@
-import React from 'react';
+import React from "react";
-import classNames from 'classnames';
+import classNames from "classnames";
-import Link from '../Link/Link';
+import Link from "../Link/Link";
-import Flag from '../Flag/Flag';
+import Flag from "../Flag/Flag";
-import { Item as mItem } from '../../model';
+import { Item as mItem } from "../../model";
-import './item.scss';
+import "./item.scss";
-type ItemProps = {
+
+type Props = {
   item: mItem;
   noLeadingBorder?: boolean;
   active?: boolean;
   style: React.CSSProperties;
+  greyedOut?: boolean;
 };
 
-export default function Item({ item, noLeadingBorder = false, active = false, style = {} }: ItemProps) {
+const Item: React.FC<Props> = ({
-  return (
+  item,
+  noLeadingBorder = false,
+  active = false,
+  style = {},
+  greyedOut = false,
+}) => (
   <Link
-      className={classNames('item', {
+    className={classNames("item", {
-        'item--no-leading-border': noLeadingBorder,
+      "item--no-leading-border": noLeadingBorder,
-        'is-active': active,
+      "is-active": active,
     })}
     pageName={`${item.quadrant}/${item.name}`}
     style={style}
   >
-      <div className='item__title'>
+    <div
+      className={classNames("item__title", {
+        "greyed-out": greyedOut,
+      })}
+    >
       {item.title}
       <Flag item={item} />
     </div>
-      {item.info && <div className='item__info'>{item.info}</div>}
+    {item.info && <div className="item__info">{item.info}</div>}
   </Link>
 );
-}
+
+export default Item;

src/components/Item/item.scss

@@ -39,6 +39,10 @@
   &__title {
     font-size: 16px;
     color: var(--color-white);
+
+    &.greyed-out {
+      color: var(--color-gray-light-alt);
+    }
   }
 
   &__info {

src/components/ItemList/ItemList.tsx

@@ -1,32 +1,43 @@
-import React from 'react';
+import React from "react";
-import Item from '../Item/Item';
+import Item from "../Item/Item";
-import { Item as mItem } from '../../model';
+import { Item as mItem } from "../../model";
-import './item-list.scss';
+import "./item-list.scss";
+
 type ItemListProps = {
   items: mItem[];
   activeItem?: mItem;
   noLeadingBorder?: boolean;
   headerStyle?: React.CSSProperties;
   itemStyle?: React.CSSProperties[];
+  greyedOut?: boolean;
 };
 
-export default function ItemList({ children, items, activeItem, noLeadingBorder, headerStyle = {}, itemStyle = [] }: React.PropsWithChildren<ItemListProps>) {
+const ItemList: React.FC<ItemListProps> = ({
-  return (
+  children,
-    <div className='item-list'>
+  items,
-      <div className='item-list__header' style={headerStyle}>
+  activeItem,
+  noLeadingBorder,
+  headerStyle = {},
+  itemStyle = [],
+  greyedOut = false,
+}) => (
+  <div className="item-list">
+    <div className="item-list__header" style={headerStyle}>
       {children}
     </div>
-      <div className='item-list__list'>
+    <div className="item-list__list">
       {items.map((item, i) => (
         <Item
           key={item.name}
           item={item}
           noLeadingBorder={noLeadingBorder}
-            active={activeItem !== null && activeItem !== undefined && activeItem.name === item.name}
+          active={activeItem?.name === item.name}
           style={itemStyle[i]}
+          greyedOut={greyedOut}
         />
       ))}
     </div>
   </div>
 );
-}
+
+export default ItemList;

src/components/PageItem/PageItem.tsx

@@ -1,22 +1,25 @@
-import React, {useEffect, useState} from 'react';
+import React, { useEffect, useState, useMemo } from "react";
-import Badge from '../Badge/Badge';
+import Badge from "../Badge/Badge";
-import ItemList from '../ItemList/ItemList';
+import ItemList from "../ItemList/ItemList";
-import Link from '../Link/Link';
+import Link from "../Link/Link";
-import FooterEnd from '../FooterEnd/FooterEnd';
+import FooterEnd from "../FooterEnd/FooterEnd";
-import SetTitle from '../SetTitle';
+import SetTitle from "../SetTitle";
-import ItemRevisions from '../ItemRevisions/ItemRevisions';
+import ItemRevisions from "../ItemRevisions/ItemRevisions";
+import { useAnimations } from "./useAnimations";
+import "./item-page.scss";
+import { translate } from "../../config";
 import {
-    AnimationStates,
+  featuredOnly,
-    createAnimation,
+  nonFeaturedOnly,
-    createAnimationRunner
+  groupByQuadrants,
-} from '../../animation';
+  Item,
-import './item-page.scss';
+} from "../../model";
-import {translate} from '../../config';
-import {groupByQuadrants, Item} from '../../model';
 
 const getItem = (pageName: string, items: Item[]) => {
-    const [quadrantName, itemName] = pageName.split('/');
+  const [quadrantName, itemName] = pageName.split("/");
-    return items.filter((item) => item.quadrant === quadrantName && item.name === itemName)[0];
+  return items.filter(
+    (item) => item.quadrant === quadrantName && item.name === itemName
+  )[0];
 };
 
 const getItemsInRing = (pageName: string, items: Item[]) => {
@@ -24,216 +27,121 @@ const getItemsInRing = (pageName: string, items: Item[]) => {
   return groupByQuadrants(items)[item.quadrant][item.ring];
 };
 
-type PageItemProps = {
+type Props = {
   pageName: string;
   items: Item[];
   leaving: boolean;
   onLeave: () => void;
 };
 
-export default function PageItem({pageName, items, leaving, onLeave}: PageItemProps) {
+const PageItem: React.FC<Props> = ({ pageName, items, leaving, onLeave }) => {
   const itemsInRing = getItemsInRing(pageName, items);
+  const featuredItemsInRing = featuredOnly(itemsInRing);
+  const nonFeaturedItemsInRing = nonFeaturedOnly(itemsInRing);
 
-    const animationsIn = {
+  const { getAnimationState, getAnimationStates } = useAnimations({
-        background: createAnimation(
+    itemsInRing,
-            {
+    featuredItemsInRing,
-                transform: 'translateX(calc((100vw - 1200px) / 2 + 800px))',
+    nonFeaturedItemsInRing,
-                transition: 'transform 450ms cubic-bezier(0.24, 1.12, 0.71, 0.98)',
+    onLeave,
-            },
+    leaving,
-            {
-                transition: 'transform 450ms cubic-bezier(0.24, 1.12, 0.71, 0.98)',
-                transform: 'translateX(0)',
-            },
-            0
-        ),
-        navHeader: createAnimation(
-            {
-                transform: 'translateX(-40px)',
-                opacity: '0',
-            },
-            {
-                transition: 'opacity 150ms ease-out, transform 300ms ease-out',
-                transform: 'translateX(0px)',
-                opacity: '1',
-            },
-            300
-        ),
-        text: createAnimation(
-            {
-                transform: 'translateY(-20px)',
-                opacity: '0',
-            },
-            {
-                transition: 'opacity 150ms ease-out, transform 300ms ease-out',
-                transform: 'translateY(0px)',
-                opacity: '1',
-            },
-            600
-        ),
-        items: itemsInRing.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 * i
-            )
-        ),
-        footer: createAnimation(
-            {
-                transition: 'opacity 150ms ease-out, transform 300ms ease-out',
-                transform: 'translateX(-40px)',
-                opacity: '0',
-            },
-            {
-                transition: 'opacity 150ms ease-out, transform 300ms ease-out',
-                transform: 'translateX(0px)',
-                opacity: '1',
-            },
-            600 + itemsInRing.length * 100
-        ),
-    };
-
-    const animationsOut = {
-        background: createAnimation(animationsIn.background.stateB, animationsIn.background.stateA, 300 + itemsInRing.length * 50),
-        navHeader: createAnimation(
-            animationsIn.navHeader.stateB,
-            {
-                transition: 'opacity 150ms ease-out, transform 300ms ease-out',
-                transform: 'translateX(40px)',
-                opacity: '0',
-            },
-            0
-        ),
-        text: createAnimation(
-            animationsIn.text.stateB,
-            {
-                transform: 'translateY(20px)',
-                transition: 'opacity 150ms ease-out, transform 300ms ease-out',
-                opacity: '0',
-            },
-            0
-        ),
-        items: itemsInRing.map((item, i) =>
-            createAnimation(
-                animationsIn.items[i].stateB,
-                {
-                    transition: 'opacity 150ms ease-out, transform 300ms ease-out',
-                    transform: 'translateX(40px)',
-                    opacity: '0',
-                },
-                100 + 50 * i
-            )
-        ),
-        footer: createAnimation(
-            animationsIn.text.stateB,
-            {
-                transition: 'opacity 150ms ease-out, transform 300ms ease-out',
-                transform: 'translateX(40px)',
-                opacity: '0',
-            },
-            200 + itemsInRing.length * 50
-        ),
-    };
-
-    const [animations, setAnimations] = useState<AnimationStates>(() => {
-        return leaving ? createAnimationRunner(animationsIn).getState() : {}
   });
 
-    const [stateLeaving, setStateLeaving] = useState(leaving);
-
-    useEffect(() => {
-        if (!stateLeaving && leaving) {
-            let animationRunner = createAnimationRunner(
-                animationsOut,
-                () => setAnimations(animationRunner.getState),
-            )
-            animationRunner.run();
-            animationRunner.awaitAnimationComplete(onLeave);
-            setStateLeaving(true)
-        }
-        if (stateLeaving && !leaving) {
-            let animationRunner = createAnimationRunner(
-                animationsIn,
-                () => setAnimations(animationRunner.getState),
-            )
-            animationRunner.run();
-            setStateLeaving(false)
-        }
-    }, [stateLeaving, leaving, animationsIn, animationsOut, onLeave])
-
-    const getAnimationStates = (name: string) => {
-        if (!animations) {
-            return undefined;
-        }
-        return animations[name];
-    }
-
-    const getAnimationState = (name: string) => {
-        const animations = getAnimationStates(name)
-        if (animations === undefined || animations.length === 0) {
-            return undefined
-        }
-        return animations[0]
-    };
-
   const item = getItem(pageName, items);
 
   return (
-        <div>
+    <>
       <SetTitle title={item.title} />
-            <div className='item-page'>
+      <div className="item-page">
-                <div className='item-page__nav'>
+        <div className="item-page__nav">
-                    <div className='item-page__nav__inner'>
+          <div className="item-page__nav__inner">
-                        <div className='item-page__header' style={getAnimationState('navHeader')}>
+            <div
-                            <h3 className='headline'>{translate(item.quadrant)}</h3>
+              className="item-page__header"
+              style={getAnimationState("navHeader")}
+            >
+              <h3 className="headline">{translate(item.quadrant)}</h3>
             </div>
-
+            <ItemList
-                        <ItemList items={itemsInRing} activeItem={item} headerStyle={getAnimationState('navHeader')}
+              items={featuredItemsInRing}
-                                  itemStyle={getAnimationStates('items')}>
+              activeItem={item}
-                            <div className='split'>
+              headerStyle={getAnimationState("navHeader")}
-                                <div className='split__left'>
+              itemStyle={getAnimationStates("featuredItems")}
+            >
+              <div className="split">
+                <div className="split__left">
                   <Badge big type={item.ring}>
                     {item.ring}
                   </Badge>
                 </div>
-                                <div className='split__right'>
+                <div className="split__right">
-                                    <Link className='icon-link' pageName={item.quadrant}>
+                  <Link className="icon-link" pageName={item.quadrant}>
-                                        <span className='icon icon--pie icon-link__icon'/>
+                    <span className="icon icon--pie icon-link__icon" />
                     Quadrant Overview
                   </Link>
                 </div>
               </div>
             </ItemList>
-                        <div className='item-page__footer' style={getAnimationState('footer')}>
+
-                            <FooterEnd modifier='in-sidebar'/>
+            {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")}
+            >
+              <FooterEnd modifier="in-sidebar" />
             </div>
           </div>
         </div>
-                <div className='item-page__content' style={getAnimationState('background')}>
+        <div
-                    <div className='item-page__content__inner' style={getAnimationState('text')}>
+          className="item-page__content"
-                        <div className='item-page__header'>
+          style={getAnimationState("background")}
-                            <div className='split'>
+        >
-                                <div className='split__left'>
+          <div
-                                    <h1 className='hero-headline hero-headline--inverse'>{item.title}</h1>
+            className="item-page__content__inner"
+            style={getAnimationState("text")}
+          >
+            <div className="item-page__header">
+              <div className="split">
+                <div className="split__left">
+                  <h1 className="hero-headline hero-headline--inverse">
+                    {item.title}
+                  </h1>
                 </div>
-                                <div className='split__right'>
+                <div className="split__right">
                   <Badge big type={item.ring}>
                     {item.ring}
                   </Badge>
                 </div>
               </div>
             </div>
-                        <div className='markdown' dangerouslySetInnerHTML={{__html: item.body}}/>
+            <div
-                        {item.revisions.length > 1 && <ItemRevisions revisions={item.revisions.slice(1)}/>}
+              className="markdown"
-                    </div>
+              dangerouslySetInnerHTML={{ __html: item.body }}
+            />
+            {item.revisions.length > 1 && (
+              <ItemRevisions revisions={item.revisions.slice(1)} />
+            )}
           </div>
         </div>
       </div>
+    </>
   );
-}
+};
+
+export default PageItem;

src/components/PageItem/item-page.scss

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

src/components/PageItem/useAnimations.tsx

@@ -0,0 +1,217 @@
+import React, { useEffect, useState, useMemo } from "react";
+import {
+  Animation,
+  AnimationConfig as AbstractAnimationConfig,
+  AnimationStates,
+  createAnimation,
+  createAnimationRunner,
+} from "../../animation";
+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 {
+    background: Animation;
+    navHeader: Animation;
+    text: Animation;
+    featuredItems: Animation[];
+    nonFeaturedItems: Animation[];
+    footer: Animation;
+  }
+
+  type AnimationNames = keyof AnimationConfig;
+
+  const animationsIn: AnimationConfig = useMemo(
+    () => ({
+      background: createAnimation(
+        {
+          transform: "translateX(calc((100vw - 1200px) / 2 + 800px))",
+          transition: "transform 450ms cubic-bezier(0.24, 1.12, 0.71, 0.98)",
+        },
+        {
+          transition: "transform 450ms cubic-bezier(0.24, 1.12, 0.71, 0.98)",
+          transform: "translateX(0)",
+        },
+        0
+      ),
+      navHeader: createAnimation(
+        {
+          transform: "translateX(-40px)",
+          opacity: "0",
+        },
+        {
+          transition: "opacity 150ms ease-out, transform 300ms ease-out",
+          transform: "translateX(0px)",
+          opacity: "1",
+        },
+        300
+      ),
+      text: createAnimation(
+        {
+          transform: "translateY(-20px)",
+          opacity: "0",
+        },
+        {
+          transition: "opacity 150ms ease-out, transform 300ms ease-out",
+          transform: "translateY(0px)",
+          opacity: "1",
+        },
+        600
+      ),
+      featuredItems: featuredItemsInRing.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 * 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",
+          transform: "translateX(-40px)",
+          opacity: "0",
+        },
+        {
+          transition: "opacity 150ms ease-out, transform 300ms ease-out",
+          transform: "translateX(0px)",
+          opacity: "1",
+        },
+        600 + itemsInRing.length * 100
+      ),
+    }),
+    [itemsInRing, featuredItemsInRing, nonFeaturedItemsInRing]
+  );
+
+  const animationsOut: AnimationConfig = useMemo(
+    () => ({
+      background: createAnimation(
+        animationsIn.background.stateB,
+        animationsIn.background.stateA,
+        300 + itemsInRing.length * 50
+      ),
+      navHeader: createAnimation(
+        animationsIn.navHeader.stateB,
+        {
+          transition: "opacity 150ms ease-out, transform 300ms ease-out",
+          transform: "translateX(40px)",
+          opacity: "0",
+        },
+        0
+      ),
+      text: createAnimation(
+        animationsIn.text.stateB,
+        {
+          transform: "translateY(20px)",
+          transition: "opacity 150ms ease-out, transform 300ms ease-out",
+          opacity: "0",
+        },
+        0
+      ),
+      featuredItems: featuredItemsInRing.map((item, i) =>
+        createAnimation(
+          animationsIn.featuredItems[i].stateB,
+          {
+            transition: "opacity 150ms ease-out, transform 300ms ease-out",
+            transform: "translateX(40px)",
+            opacity: "0",
+          },
+          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,
+        {
+          transition: "opacity 150ms ease-out, transform 300ms ease-out",
+          transform: "translateX(40px)",
+          opacity: "0",
+        },
+        200 + itemsInRing.length * 50
+      ),
+    }),
+    [itemsInRing, featuredItemsInRing, nonFeaturedItemsInRing, animationsIn]
+  );
+
+  const [animations, setAnimations] = useState<AnimationStates>(() => {
+    return leaving ? createAnimationRunner(animationsIn).getState() : {};
+  });
+
+  const [stateLeaving, setStateLeaving] = useState(leaving);
+
+  useEffect(() => {
+    if (!stateLeaving && leaving) {
+      let animationRunner = createAnimationRunner(animationsOut, () =>
+        setAnimations(animationRunner.getState)
+      );
+      animationRunner.run();
+      animationRunner.awaitAnimationComplete(onLeave);
+      setStateLeaving(true);
+    }
+    if (stateLeaving && !leaving) {
+      let animationRunner = createAnimationRunner(animationsIn, () =>
+        setAnimations(animationRunner.getState)
+      );
+      animationRunner.run();
+      setStateLeaving(false);
+    }
+  }, [stateLeaving, leaving, animationsIn, animationsOut, onLeave]);
+
+  const getAnimationStates = (name: AnimationNames) => animations[name];
+
+  const getAnimationState = (name: AnimationNames) => {
+    const animations = getAnimationStates(name);
+    if (animations === undefined || animations.length === 0) {
+      return undefined;
+    }
+    return animations[0];
+  };
+
+  return {
+    getAnimationStates,
+    getAnimationState,
+  };
+};

src/index.scss

@@ -17,6 +17,7 @@
   --color-gray-dark-alt2: #434D53;
   --color-gray-normal: #7f858a;
   --color-gray-light: #7D878D;
+  --color-gray-light-alt: #adadad;
 
   --color-white: #fff;
   --color-green: #5CB449;

src/logo.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>

src/model.js

@@ -1,49 +0,0 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __spreadArray = (this && this.__spreadArray) || function (to, from) {
-    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
-        to[j] = from[i];
-    return to;
-};
-export var featuredOnly = function (items) { return items.filter(function (item) { return item.featured; }); };
-export var groupByQuadrants = function (items) {
-    return items.reduce(function (quadrants, item) {
-        var _a;
-        return (__assign(__assign({}, quadrants), (_a = {}, _a[item.quadrant] = addItemToQuadrant(quadrants[item.quadrant], item), _a)));
-    }, {});
-};
-export var groupByFirstLetter = function (items) {
-    var index = items.reduce(function (letterIndex, item) {
-        var _a;
-        return (__assign(__assign({}, letterIndex), (_a = {}, _a[getFirstLetter(item)] = addItemToList(letterIndex[getFirstLetter(item)], item), _a)));
-    }, {});
-    return Object.keys(index)
-        .sort()
-        .map(function (letter) { return ({
-        letter: letter,
-        items: index[letter],
-    }); });
-};
-var addItemToQuadrant = function (quadrant, item) {
-    var _a;
-    if (quadrant === void 0) { quadrant = {}; }
-    return (__assign(__assign({}, quadrant), (_a = {}, _a[item.ring] = addItemToRing(quadrant[item.ring], item), _a)));
-};
-var addItemToList = function (list, item) {
-    if (list === void 0) { list = []; }
-    return __spreadArray(__spreadArray([], list), [item]);
-};
-var addItemToRing = function (ring, item) {
-    if (ring === void 0) { ring = []; }
-    return __spreadArray(__spreadArray([], ring), [item]);
-};
-export var getFirstLetter = function (item) { return item.title.substr(0, 1).toUpperCase(); };

src/model.ts

@@ -1,43 +1,46 @@
-import { Ring } from "./config"
+import { Ring } from "./config";
 
 export type ItemAttributes = {
-  name: string
+  name: string;
-  ring: Ring
+  ring: Ring;
-  quadrant: string
+  quadrant: string;
-  title: string
+  title: string;
-  featured: boolean
+  featured: boolean;
-}
+};
 
-export type FlagType = 'new' | 'changed' | 'default'
+export type FlagType = "new" | "changed" | "default";
 
 export type Item = ItemAttributes & {
-  featured: boolean
+  featured: boolean;
-  body: string
+  body: string;
-  info: string
+  info: string;
-  flag: FlagType
+  flag: FlagType;
-  revisions: Revision[]
+  revisions: Revision[];
-}
+};
 
 export type Revision = ItemAttributes & {
-  body: string
+  body: string;
-  fileName: string
+  fileName: string;
-  release: string
+  release: string;
-}
+};
 
 export type Quadrant = {
-  [name: string]: Item[]
+  [name: string]: Item[];
-}
+};
 
 export type Radar = {
-  items: Item[]
+  items: Item[];
-  releases: string[]
+  releases: string[];
-}
+};
 
 export type Group = {
-  [quadrant: string]: Quadrant
+  [quadrant: string]: Quadrant;
-}
+};
 
-export const featuredOnly = (items: Item[]) => items.filter(item => item.featured);
+export const featuredOnly = (items: Item[]) =>
+  items.filter((item) => item.featured);
+export const nonFeaturedOnly = (items: Item[]) =>
+  items.filter((item) => !item.featured);
 
 export const groupByQuadrants = (items: Item[]): Group =>
   items.reduce(
@@ -45,7 +48,7 @@ export const groupByQuadrants = (items: Item[]): Group =>
       ...quadrants,
       [item.quadrant]: addItemToQuadrant(quadrants[item.quadrant], item),
     }),
-    {} as {[k: string]: Quadrant},
+    {} as { [k: string]: Quadrant }
   );
 
 export const groupByFirstLetter = (items: Item[]) => {
@@ -54,15 +57,15 @@ export const groupByFirstLetter = (items: Item[]) => {
       ...letterIndex,
       [getFirstLetter(item)]: addItemToList(
         letterIndex[getFirstLetter(item)],
-        item,
+        item
       ),
     }),
-    {} as {[k: string]: Item[]},
+    {} as { [k: string]: Item[] }
   );
 
   return Object.keys(index)
     .sort()
-    .map(letter => ({
+    .map((letter) => ({
       letter,
       items: index[letter],
     }));
@@ -77,4 +80,5 @@ const addItemToList = (list: Item[] = [], item: Item) => [...list, item];
 
 const addItemToRing = (ring: Item[] = [], item: Item) => [...ring, item];
 
-export const getFirstLetter = (item: Item) => item.title.substr(0, 1).toUpperCase();
+export const getFirstLetter = (item: Item) =>
+  item.title.substr(0, 1).toUpperCase();

src/styles/components/headline.scss

@@ -1,3 +1,7 @@
+h4.headline {
+  font-size: 18px;
+}
+
 .headline {
   margin: 0;
   padding: 0;