Add constantinople page

__stories__/assets/images.stories.js

@@ -5,6 +5,7 @@ import { storiesOf } from '@storybook/react';
 import AthensImage from '../../src/assets/images/athens.png';
 import SpartaImage from '../../src/assets/images/sparta.png';
 import RomeImage from '../../src/assets/images/rome.png';
+import ConstantinopleImage from '../../src/assets/images/constantinople.png';
 import FaviconImage from '../../src/assets/images/favicon.png';
 
 const imageStyle = { height: '50vh', maxWidth: '100%' };
@@ -14,4 +15,5 @@ storiesOf('Assets|Images', module)
   .add('Athens map', () => <img src={AthensImage} alt="Athens" style={imageStyle} />)
   .add('Sparta map', () => <img src={SpartaImage} alt="Sparta" style={imageStyle} />)
   .add('Rome map', () => <img src={RomeImage} alt="Rome" style={imageStyle} />)
+  .add('Constantinople map', () => <img src={ConstantinopleImage} alt="Constantinople" style={imageStyle} />)
   .add('favicon', () => <img src={FaviconImage} alt="JoyStream" style={imageStyle} />);

__tests__/pages/__snapshots__/index.test.js.snap

@@ -209,14 +209,14 @@ exports[`IndexPage page renders correctly 1`] = `
           roles={
             Array [
               Object {
-                "hasLabel": true,
+                "hasLabel": false,
                 "image": "icon-component-mock",
                 "key": "contentCreatorsCount",
                 "title": "Content Creator",
                 "to": "/roles#content-creator",
               },
               Object {
-                "hasLabel": true,
+                "hasLabel": false,
                 "image": "icon-component-mock",
                 "key": "contentCuratorsCount",
                 "title": "Content Curator",

__tests__/pages/__snapshots__/rome.test.js.snap

@@ -169,14 +169,14 @@ exports[`RomePage page renders correctly 1`] = `
           roles={
             Array [
               Object {
-                "hasLabel": true,
+                "hasLabel": false,
                 "image": "icon-component-mock",
                 "key": "contentCreatorsCount",
                 "title": "Content Creator",
                 "to": "/roles#content-creator",
               },
               Object {
-                "hasLabel": true,
+                "hasLabel": false,
                 "image": "icon-component-mock",
                 "key": "contentCuratorsCount",
                 "title": "Content Curator",

src/components/Map/index.js

@@ -6,6 +6,7 @@ import Animated from '../AnimatedComponent';
 import athensImage from '../../assets/images/athens.png';
 import spartaImage from '../../assets/images/sparta.png';
 import romeImage from '../../assets/images/rome.png';
+import constantinopleImage from '../../assets/images/constantinople.png';
 import { ReactComponent as PointerImage } from '../../assets/svg/pointer.svg';
 
 import { mapPropTypes } from '../../propTypes';
@@ -25,6 +26,7 @@ const maps = {
   acropolis: athensImage,
   sparta: spartaImage,
   rome: romeImage,
+  constantinople: constantinopleImage,
 };
 
 const Map = ({ location, className, ...props }) => {

src/components/Map/map.stories.js

@@ -14,4 +14,5 @@ storiesOf('Components|Map', module)
   .add('athens', () => <Map location="athens" />)
   .add('acropolis', () => <Map location="acropolis" />)
   .add('sparta', () => <Map location="sparta" />)
-  .add('rome', () => <Map location="rome" />);
+  .add('rome', () => <Map location="rome" />)
+  .add('constantinople', () => <Map location="constantinople" />);

src/data/pages/constantinople.js

@@ -0,0 +1,21 @@
+const goalsData = [
+  {
+    title: 'Launch a new proposal system',
+    text: `The constantinople testnet is built around the introduction of a
+    proposal system that strengthens the governance structure of the platform,
+    shifting the day to day responsibility of monitoring the network and
+    allocating resources to voters and the council.`,
+    state: 'inprogress',
+  },
+  {
+    title: 'Introduce a fiat-backed token model',
+    text: `Constantinople introduces a new incentive structure, with a fiat (USD) pool
+    backing the testnet tokens, setting up a more realistic economic system for
+    the platform.`,
+    state: 'inprogress',
+  },
+];
+
+const launchDate = '2020/05/17 15:00';
+
+export { goalsData, launchDate };

src/data/pages/index.js

@@ -41,14 +41,14 @@ export const roles = {
       title: 'Content Creator',
       key: 'contentCreatorsCount',
       to: '/roles#content-creator',
-      hasLabel: true,
+      hasLabel: false,
     },
     {
       image: contentCuratorImage,
       title: 'Content Curator',
       key: 'contentCuratorsCount',
       to: '/roles#content-curator',
-      hasLabel: true,
+      hasLabel: false,
     },
     {
       image: validatorsImage,

src/pages/constantinople/index.js

@@ -0,0 +1,125 @@
+import React, { useState } from 'react';
+import { pagePropTypes } from '../../propTypes';
+
+import getApiPath from '../../utils/getApiPath';
+import mapStatusDataToRoles from '../../utils/mapStatusDataToRoles';
+
+import withApi from '../../components/_enhancers/withApi';
+
+import BaseLayout from '../../components/_layouts/Base';
+import HeroCard from '../../components/HeroCard';
+import TitleWrapper from '../../components/TitleWrapper';
+import RoleList from '../../components/RoleList';
+import ColumnsLayout from '../../components/ColumnsLayout';
+import LayoutWrapper from '../../components/LayoutWrapper';
+import Hero from '../../components/Hero';
+import TestnetModal from '../../components/TestnetModal';
+import Chip from '../../components/Chip';
+import Pane from '../../components/Pane';
+import GoalList from '../../components/GoalList';
+import Link from '../../components/Link';
+import MapInfo from '../../components/MapInfo';
+import SiteMetadata from '../../components/SiteMetadata';
+
+import constantinopleImage from '../../assets/svg/constantinople.svg';
+import { ReactComponent as SpecImg } from '../../assets/svg/specifications.svg';
+import { ReactComponent as ReleaseImg } from '../../assets/svg/release-doc.svg';
+import { ReactComponent as PersonIcon } from '../../assets/svg/person.svg';
+import constantinopleBuildingImg from '../../assets/svg/constantinople-building.svg';
+
+import { roles, sharedData } from '../../data/pages';
+import { goalsData, launchDate } from '../../data/pages/constantinople';
+
+import './style.scss';
+
+const ConstantinoplePage = ({ content }) => {
+  const [isModalOpen, setModalClosed] = useState(false);
+
+  return (
+    <BaseLayout>
+      <SiteMetadata title="Joystream: The video platform DAO" description="Explore the Constantinople Testnet" />
+
+      <Hero
+        image={constantinopleImage}
+        title="Constantinople Network"
+        indent
+        chip={<Chip onClick={() => setModalClosed(true)}>What is this?</Chip>}
+        animationStartValue={0}
+      >
+        <p className="ConstantinoplePage__hero-paragraph">{sharedData.rolesDescription}</p>
+        <HeroCard date={launchDate} />
+
+        <TestnetModal
+          title="Constantinople"
+          image={constantinopleBuildingImg}
+          closeModal={() => setModalClosed(false)}
+          isOpen={isModalOpen}
+        >
+          <p>
+            The Column of Constantine, also known as the Burnt Stone or the Burnt Pillar,
+            is a Roman monumental column constructed on the orders of the Roman emperor
+            Constantine the Great in 330 AD. It commemorates the declaration of Byzantium
+            as the new capital city of the Roman Empire.
+          </p>
+        </TestnetModal>
+      </Hero>
+
+      <LayoutWrapper>
+        <TitleWrapper title="Critical Documents">
+          <ColumnsLayout>
+            <Pane image={SpecImg} disabled title="Full Specifications">
+              Specs to be released
+            </Pane>
+            <Pane
+              image={ReleaseImg}
+              href="https://github.com/Joystream/joystream-landing/tree/master/testnets/constantinople"
+              title="Release Plan"
+              target="_blank"
+            >
+              Read the release plan as it was made during the planning stage, and learn more about how the development
+              evolved.
+            </Pane>
+          </ColumnsLayout>
+        </TitleWrapper>
+
+        <TitleWrapper
+          title="Testnet Goals"
+          subtitle={
+            <>
+              The goals listed below are a simplified representation of our main objectives for the Constantinople testnet.
+            </>
+          }
+        >
+          <GoalList data={goalsData} />
+        </TitleWrapper>
+      </LayoutWrapper>
+
+      <LayoutWrapper dark>
+        <TitleWrapper title="Incentivized Roles for the Constantinople Network">
+          <ColumnsLayout>
+            <RoleList roles={roles.active} content={mapStatusDataToRoles(content)} />
+          </ColumnsLayout>
+        </TitleWrapper>
+      </LayoutWrapper>
+
+      <MapInfo title="Constantinople" location="constantinople">
+        <p>
+          <strong>Constantinople was the capital city of the Roman Empire during the fourth century. </strong>
+          It was famed for its massive and complex defences as well as its architectural masterpieces
+          and opulent aristocratic palaces. As was the case with the city, we hope our Constantinople
+          testnet will be a worthy successor to Rome.
+          <br />
+          <br />
+          <Link href="https://blog.joystream.org/announcing-constantinople/">
+            <PersonIcon /> Read the blog post
+          </Link>
+        </p>
+      </MapInfo>
+    </BaseLayout>
+  );
+};
+
+ConstantinoplePage.propTypes = pagePropTypes;
+
+export { ConstantinoplePage };
+export default withApi(ConstantinoplePage, getApiPath('STATUS'));

src/pages/constantinople/style.scss

@@ -0,0 +1,7 @@
+@import '../../styles/main.scss';
+
+.ConstantinoplePage {
+  &__hero-paragraph {
+    padding-bottom: 60px;
+  }
+}

src/propTypes/index.js

@@ -18,7 +18,7 @@ export const linkPropTypes = {
 };
 
 export const mapPropTypes = {
-  location: oneOf(['athens', 'acropolis', 'sparta', 'rome']).isRequired,
+  location: oneOf(['athens', 'acropolis', 'sparta', 'rome', 'constantinople']).isRequired,
 };
 
 export const pagePropTypes = {