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

card component #98

Open
wants to merge 1 commit into
base: dev
Choose a base branch
from
Open

card component #98

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
155 changes: 155 additions & 0 deletions components/Card/Card.stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,155 @@
import React from "react";
import Card from './Card';
import { documentToReactComponents } from "@contentful/rich-text-react-renderer";

export default {
component: Card,
title: "Map Components",
}

const bigCardHeader = (
<h1>This is a more elaborate card</h1>
)

const bigCardBody = documentToReactComponents(
{
nodeType: "document",
data: {},
content: [
{
nodeType: "paragraph",
content: [
{
nodeType: "text",
value: "this is a tour ",
marks: [],
data: {},
},
{
nodeType: "text",
value: "node",
marks: [{ type: "underline" }],
data: {},
},
],
data: {},
},
{
nodeType: "paragraph",
content: [
{ nodeType: "text", value: "first ", marks: [], data: {} },
{
nodeType: "text",
value: "stop",
marks: [{ type: "bold" }],
data: {},
},
{
nodeType: "text",
value: " in the tour",
marks: [],
data: {},
},
],
data: {},
},
{
nodeType: "blockquote",
content: [
{
nodeType: "paragraph",
content: [
{
nodeType: "text",
value: "this is a quote",
marks: [],
data: {},
},
],
data: {},
},
],
data: {},
},
{
nodeType: "paragraph",
content: [
{ nodeType: "text", value: "", marks: [], data: {} },
{
nodeType: "hyperlink",
content: [
{
nodeType: "text",
value: "Cooperation Jackson",
marks: [],
data: {},
},
],
data: { uri: "https://cooperationjackson.org/" },
},
{ nodeType: "text", value: "", marks: [], data: {} },
],
data: {},
},
{
nodeType: "embedded-asset-block",
content: [],
data: {
target: {
sys: {
space: {
sys: {
type: "Link",
linkType: "Space",
id: "7zzvnrgo4q2e",
},
},
id: "36r9vTMJCjkQ1OnaW1MgQm",
type: "Asset",
createdAt: "2020-06-16T21:43:48.693Z",
updatedAt: "2020-06-16T21:43:48.693Z",
environment: {
sys: { id: "dev", type: "Link", linkType: "Environment" },
},
revision: 1,
locale: "en-US",
},
fields: {
title: "Test Image",
file: {
url:
"//images.ctfassets.net/7zzvnrgo4q2e/36r9vTMJCjkQ1OnaW1MgQm/2fe20a921a6377f8574351535f86b086/Ex__cution_de_Marie_Antoinette_le_16_octobre_1793.jpg",
details: {
size: 378848,
image: { width: 1200, height: 512 },
},
fileName:
"Exécution_de_Marie_Antoinette_le_16_octobre_1793.jpg",
contentType: "image/jpeg",
},
},
},
},
},
{
nodeType: "paragraph",
content: [{ nodeType: "text", value: "", marks: [], data: {} }],
data: {},
},
],
}

);

export const card = () => (
<>
<h1>Card Component</h1>
<Card
children={"This is a basic card"}>
</Card>
<br/>
<Card
children={[bigCardHeader, bigCardBody]}>
</Card>
</>
)
31 changes: 31 additions & 0 deletions components/Card/Card.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
import React, {ReactNode} from 'react';
import styled from 'styled-components';

interface CardProps {
children?: ReactNode;
}

const CardOuter = styled.div`
padding: 40px 20px;
position: relative;
background: #FFFFFF;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1), 0px 0px 0px 1px #000000;
border-radius: 22px;
`

const CardBody = styled.div`
display: flex;
flex-direction: column;
`

const Card: React.FC = ({children}: CardProps) => {
return (
<CardOuter>
<CardBody>
{children}
</CardBody>
</CardOuter>
)
}

export default Card;