Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Handle new charter schema + style output on listing page [#501] [#603] #628

Merged
merged 13 commits into from
Nov 28, 2018
Merged

Handle new charter schema + style output on listing page [#501] [#603] #628

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
b122482
Handle new charter schema [#501]
tobek Nov 26, 2018
87c933f
Don't hide listing header when there's no charter
tobek Nov 26, 2018
31ad19f
Ultra-basic roster
tobek Nov 26, 2018
b2f796b
Ultra-basic charter validation/error messaging
tobek Nov 26, 2018
d5f5997
prettier
tobek Nov 26, 2018
fedb253
Style main charter content (mission, roster)
tobek Nov 26, 2018
871fdfa
Helper for rending <p> tags from plain text line breaks
tobek Nov 26, 2018
b06e3dd
"Visit Newsroom" buttons alongside charter
tobek Nov 26, 2018
e0f52b1
Merge remote-tracking branch 'origin/master' into tobek/dapp/charter
tobek Nov 26, 2018
f073adc
prettier, linting, stories
tobek Nov 26, 2018
fa1bab7
Default charter roster avatar
tobek Nov 26, 2018
759d228
Add social links to dapp charter
tobek Nov 27, 2018
052a4dd
prettier
tobek Nov 27, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 10 additions & 4 deletions packages/components/src/ListingDetailHeader.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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`
Expand All @@ -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,
Expand All @@ -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,
Expand All @@ -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,
Expand All @@ -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,
Expand Down
66 changes: 63 additions & 3 deletions packages/components/src/ListingDetailHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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,
Expand Down Expand Up @@ -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;
Expand All @@ -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>
Expand All @@ -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>
Expand Down
38 changes: 19 additions & 19 deletions ...onents/src/ListingDetailPhaseCard/__snapshots__/ListingDetailsPhaseCard.stories.storyshot
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -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 {
Expand Down
4 changes: 2 additions & 2 deletions ...es/components/src/ListingHistoryEvent/__snapshots__/ListingHistoryEvent.stories.storyshot
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -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",
Expand Down
Loading