Merge pull request #628 from joincivil/tobek/dapp/charter

Handle new charter schema + style output on listing page [#501] [#603]
joincivil · Nov 28, 2018 · 4ca527e · 4ca527e
2 parents acb5898 + 052a4dd
commit 4ca527e
Show file tree

Hide file tree

Showing 39 changed files with 6,754 additions and 5,270 deletions.
diff --git a/packages/components/src/ListingDetailHeader.stories.tsx b/packages/components/src/ListingDetailHeader.stories.tsx
@@ -1,6 +1,7 @@
 import { storiesOf } from "@storybook/react";
 import * as React from "react";
 import styled from "styled-components";
+import { CharterData } from "@joincivil/core";
 import { ListingDetailHeader, ListingDetailHeaderProps } from "./ListingDetailHeader";
 
 const StyledDiv = styled.div`
@@ -16,11 +17,16 @@ const Container: React.StatelessComponent = ({ children }) => (
   </StyledDiv>
 );
 
+const charter = {
+  tagline: "Civil is the decentralized marketplace for sustainable journalism.",
+  newsroomUrl: "https://civil.co",
+};
+
 storiesOf("Listing Details Header", module)
   .add("No phase label", () => {
     const props: ListingDetailHeaderProps = {
       newsroomName: "The Civil Times",
-      newsroomDescription: "Civil is the decentralized marketplace for sustainable journalism.",
+      charter: charter as CharterData,
       owner: "0x0",
       unstakedDeposit: "100 CVL",
       isInApplication: false,
@@ -36,7 +42,7 @@ storiesOf("Listing Details Header", module)
   .add("In Application", () => {
     const props: ListingDetailHeaderProps = {
       newsroomName: "The Civil Times",
-      newsroomDescription: "Civil is the decentralized marketplace for sustainable journalism.",
+      charter: charter as CharterData,
       owner: "0x0",
       unstakedDeposit: "100 CVL",
       isInApplication: true,
@@ -52,7 +58,7 @@ storiesOf("Listing Details Header", module)
   .add("Accepting Votes", () => {
     const props: ListingDetailHeaderProps = {
       newsroomName: "The Civil Times",
-      newsroomDescription: "Civil is the decentralized marketplace for sustainable journalism.",
+      charter: charter as CharterData,
       owner: "0x0",
       unstakedDeposit: "100 CVL",
       isInApplication: false,
@@ -68,7 +74,7 @@ storiesOf("Listing Details Header", module)
   .add("Revealing Votes", () => {
     const props: ListingDetailHeaderProps = {
       newsroomName: "The Civil Times",
-      newsroomDescription: "Civil is the decentralized marketplace for sustainable journalism.",
+      charter: charter as CharterData,
       owner: "0x0",
       unstakedDeposit: "100 CVL",
       isInApplication: false,

diff --git a/packages/components/src/ListingDetailHeader.tsx b/packages/components/src/ListingDetailHeader.tsx
@@ -1,7 +1,9 @@
 import * as React from "react";
 import { Link } from "react-router-dom";
 import styled from "styled-components";
+import { CharterData } from "@joincivil/core";
 import { colors, fonts } from "./styleConstants";
+import { TwitterIcon, FacebookIcon } from "./icons";
 import { Button, buttonSizes } from "./Button";
 import {
   AwaitingApprovalStatusLabel,
@@ -55,9 +57,32 @@ const StyledRegistryLinkContainer = styled.div`
   }
 `;
 
+const NewsroomLinks = styled.div`
+  display: flex;
+  margin-top: 40px;
+`;
+const VisitNewsroomButtonWrap = styled.div`
+  line-height: 32px;
+  width: 50%;
+`;
+const FollowNewsroom = styled.div`
+  display: inline-block;
+  width: 50%;
+`;
+const FollowNewsroomHeading = styled.h5`
+  margin-bottom: 10px;
+  font: 500 14px/14px ${fonts.SANS_SERIF};
+  letter-spacing: 1px;
+  color: ${colors.basic.WHITE};
+  text-transform: uppercase;
+`;
+const FollowNewsroomLink = styled.a`
+  margin-right: 20px;
+`;
+
 export interface ListingDetailHeaderProps {
   newsroomName: string;
-  newsroomDescription: string;
+  charter?: CharterData;
   registryURL?: string;
   registryLinkText?: string;
   owner: string;
@@ -79,6 +104,14 @@ export interface ListingDetailHeaderProps {
 
 export class ListingDetailHeader extends React.Component<ListingDetailHeaderProps> {
   public render(): JSX.Element {
+    let newsroomDescription = "";
+    let newsroomUrl = "";
+    if (this.props.charter) {
+      // TODO(toby) remove legacy `desc` after transition
+      newsroomDescription = this.props.charter.tagline || (this.props.charter as any).desc;
+      newsroomUrl = this.props.charter.newsroomUrl;
+    }
+
     return (
       <ListingDetailOuter>
         <StyledListingDetailHeader>
@@ -88,8 +121,35 @@ export class ListingDetailHeader extends React.Component<ListingDetailHeaderProp
               {this.renderPhaseLabel()}
 
               <ListingDetailNewsroomName>{this.props.newsroomName}</ListingDetailNewsroomName>
-              <ListingDetailNewsroomDek>{this.props.newsroomDescription}</ListingDetailNewsroomDek>
-              <Button size={buttonSizes.MEDIUM}>Support Our Work</Button>
+              <ListingDetailNewsroomDek>{newsroomDescription}</ListingDetailNewsroomDek>
+
+              <NewsroomLinks>
+                {newsroomUrl && (
+                  <VisitNewsroomButtonWrap>
+                    <Button size={buttonSizes.MEDIUM_WIDE} href={newsroomUrl} target="_blank">
+                      Visit Newsroom 🡭
+                    </Button>
+                  </VisitNewsroomButtonWrap>
+                )}
+
+                {this.props.charter &&
+                  this.props.charter.socialUrls &&
+                  (this.props.charter.socialUrls.facebook || this.props.charter.socialUrls.twitter) && (
+                    <FollowNewsroom>
+                      <FollowNewsroomHeading>Follow Newsroom</FollowNewsroomHeading>
+                      {this.props.charter.socialUrls.twitter && (
+                        <FollowNewsroomLink href={this.props.charter.socialUrls.twitter} target="_blank">
+                          <TwitterIcon />
+                        </FollowNewsroomLink>
+                      )}
+                      {this.props.charter.socialUrls.facebook && (
+                        <FollowNewsroomLink href={this.props.charter.socialUrls.facebook} target="_blank">
+                          <FacebookIcon />
+                        </FollowNewsroomLink>
+                      )}
+                    </FollowNewsroom>
+                  )}
+              </NewsroomLinks>
             </LeftShark>
 
             <RightShark>

diff --git a/...onents/src/ListingDetailPhaseCard/__snapshots__/ListingDetailsPhaseCard.stories.storyshot b/...onents/src/ListingDetailPhaseCard/__snapshots__/ListingDetailsPhaseCard.stories.storyshot
@@ -4,7 +4,7 @@ exports[`Storyshots Listing Details Phase Card Appeal Challenge: Commit Vote 1`]
 initialize {
   "0": Object {
     "attribs": Object {
-      "class": "sc-fONwsr fzhybC",
+      "class": "sc-qrIAp kGVqVY",
     },
     "children": Array [
       Object {
@@ -62,7 +62,7 @@ exports[`Storyshots Listing Details Phase Card Appeal Challenge: Resolve 1`] = `
 initialize {
   "0": Object {
     "attribs": Object {
-      "class": "sc-fONwsr fzhybC",
+      "class": "sc-qrIAp kGVqVY",
     },
     "children": Array [
       Object {
@@ -120,7 +120,7 @@ exports[`Storyshots Listing Details Phase Card Appeal Challenge: Reveal Vote - U
 initialize {
   "0": Object {
     "attribs": Object {
-      "class": "sc-fONwsr fzhybC",
+      "class": "sc-qrIAp kGVqVY",
     },
     "children": Array [
       Object {
@@ -178,7 +178,7 @@ exports[`Storyshots Listing Details Phase Card Appeal Challenge: Reveal Vote - U
 initialize {
   "0": Object {
     "attribs": Object {
-      "class": "sc-fONwsr fzhybC",
+      "class": "sc-qrIAp kGVqVY",
     },
     "children": Array [
       Object {
@@ -236,7 +236,7 @@ exports[`Storyshots Listing Details Phase Card Appeal Challenge: Reveal Vote - U
 initialize {
   "0": Object {
     "attribs": Object {
-      "class": "sc-fONwsr fzhybC",
+      "class": "sc-qrIAp kGVqVY",
     },
     "children": Array [
       Object {
@@ -294,7 +294,7 @@ exports[`Storyshots Listing Details Phase Card In Application 1`] = `
 initialize {
   "0": Object {
     "attribs": Object {
-      "class": "sc-fONwsr fzhybC",
+      "class": "sc-qrIAp kGVqVY",
     },
     "children": Array [
       Object {
@@ -352,7 +352,7 @@ exports[`Storyshots Listing Details Phase Card Rejected 1`] = `
 initialize {
   "0": Object {
     "attribs": Object {
-      "class": "sc-fONwsr fzhybC",
+      "class": "sc-qrIAp kGVqVY",
     },
     "children": Array [
       Object {
@@ -410,7 +410,7 @@ exports[`Storyshots Listing Details Phase Card Resolve Application 1`] = `
 initialize {
   "0": Object {
     "attribs": Object {
-      "class": "sc-fONwsr fzhybC",
+      "class": "sc-qrIAp kGVqVY",
     },
     "children": Array [
       Object {
@@ -468,7 +468,7 @@ exports[`Storyshots Listing Details Phase Card Under Appeal: Awaiting Appeal Dec
 initialize {
   "0": Object {
     "attribs": Object {
-      "class": "sc-fONwsr fzhybC",
+      "class": "sc-qrIAp kGVqVY",
     },
     "children": Array [
       Object {
@@ -526,7 +526,7 @@ exports[`Storyshots Listing Details Phase Card Under Appeal: Awaiting Appeal Dec
 initialize {
   "0": Object {
     "attribs": Object {
-      "class": "sc-fONwsr fzhybC",
+      "class": "sc-qrIAp kGVqVY",
     },
     "children": Array [
       Object {
@@ -584,7 +584,7 @@ exports[`Storyshots Listing Details Phase Card Under Appeal: Decision / Can Chal
 initialize {
   "0": Object {
     "attribs": Object {
-      "class": "sc-fONwsr fzhybC",
+      "class": "sc-qrIAp kGVqVY",
     },
     "children": Array [
       Object {
@@ -642,7 +642,7 @@ exports[`Storyshots Listing Details Phase Card Under Appeal: Resolve 1`] = `
 initialize {
   "0": Object {
     "attribs": Object {
-      "class": "sc-fONwsr fzhybC",
+      "class": "sc-qrIAp kGVqVY",
     },
     "children": Array [
       Object {
@@ -700,7 +700,7 @@ exports[`Storyshots Listing Details Phase Card Under Challenge: Commit Vote 1`]
 initialize {
   "0": Object {
     "attribs": Object {
-      "class": "sc-fONwsr fzhybC",
+      "class": "sc-qrIAp kGVqVY",
     },
     "children": Array [
       Object {
@@ -758,7 +758,7 @@ exports[`Storyshots Listing Details Phase Card Under Challenge: Request Appeal 1
 initialize {
   "0": Object {
     "attribs": Object {
-      "class": "sc-fONwsr fzhybC",
+      "class": "sc-qrIAp kGVqVY",
     },
     "children": Array [
       Object {
@@ -816,7 +816,7 @@ exports[`Storyshots Listing Details Phase Card Under Challenge: Resolve 1`] = `
 initialize {
   "0": Object {
     "attribs": Object {
-      "class": "sc-fONwsr fzhybC",
+      "class": "sc-qrIAp kGVqVY",
     },
     "children": Array [
       Object {
@@ -874,7 +874,7 @@ exports[`Storyshots Listing Details Phase Card Under Challenge: Reveal Vote - Us
 initialize {
   "0": Object {
     "attribs": Object {
-      "class": "sc-fONwsr fzhybC",
+      "class": "sc-qrIAp kGVqVY",
     },
     "children": Array [
       Object {
@@ -932,7 +932,7 @@ exports[`Storyshots Listing Details Phase Card Under Challenge: Reveal Vote - Us
 initialize {
   "0": Object {
     "attribs": Object {
-      "class": "sc-fONwsr fzhybC",
+      "class": "sc-qrIAp kGVqVY",
     },
     "children": Array [
       Object {
@@ -990,7 +990,7 @@ exports[`Storyshots Listing Details Phase Card Under Challenge: Reveal Vote - Us
 initialize {
   "0": Object {
     "attribs": Object {
-      "class": "sc-fONwsr fzhybC",
+      "class": "sc-qrIAp kGVqVY",
     },
     "children": Array [
       Object {
@@ -1048,7 +1048,7 @@ exports[`Storyshots Listing Details Phase Card Whitelisted 1`] = `
 initialize {
   "0": Object {
     "attribs": Object {
-      "class": "sc-fONwsr fzhybC",
+      "class": "sc-qrIAp kGVqVY",
     },
     "children": Array [
       Object {

diff --git a/...es/components/src/ListingHistoryEvent/__snapshots__/ListingHistoryEvent.stories.storyshot b/...es/components/src/ListingHistoryEvent/__snapshots__/ListingHistoryEvent.stories.storyshot
@@ -4,7 +4,7 @@ exports[`Storyshots Listing History Event Default 1`] = `
 initialize {
   "0": Object {
     "attribs": Object {
-      "class": "sc-kLIISr hEfuKa",
+      "class": "sc-jtggT jtyHqe",
     },
     "children": Array [],
     "name": "div",
@@ -49,7 +49,7 @@ exports[`Storyshots Listing History Event History Events Timelime 1`] = `
 initialize {
   "0": Object {
     "attribs": Object {
-      "class": "sc-kLIISr hEfuKa",
+      "class": "sc-jtggT jtyHqe",
     },
     "children": Array [],
     "name": "div",