17 changed files with 2609 additions and 65 deletions
@ -0,0 +1,2 @@ |
|||||
|
import '@storybook/addon-actions/register'; |
||||
|
import '@storybook/addon-links/register'; |
||||
@ -0,0 +1,4 @@ |
|||||
|
import { configure } from '@storybook/react'; |
||||
|
|
||||
|
// automatically import all files ending in *.stories.js
|
||||
|
configure(require.context('../src/stories', true, /\.stories\.js$/), module); |
||||
|
After Width: | Height: | Size: 307 B |
|
After Width: | Height: | Size: 645 B |
|
After Width: | Height: | Size: 316 B |
Binary file not shown.
|
After Width: | Height: | Size: 358 B |
|
After Width: | Height: | Size: 5.7 KiB |
@ -0,0 +1,22 @@ |
|||||
|
import React from 'react'; |
||||
|
import {ReactComponent as Pages} from '../assets/Pages.svg'; |
||||
|
import {ReactComponent as Post} from '../assets/Post.svg'; |
||||
|
|
||||
|
/** @jsx jsx */ |
||||
|
import { css, jsx } from '@emotion/core'; |
||||
|
const btnStyle = css` |
||||
|
width:58px; |
||||
|
height:58px; |
||||
|
border-radius: 19px; |
||||
|
border:0; |
||||
|
background-color:rgba(255,255,255,0.5); |
||||
|
box-shadow: |
||||
|
inset 2px 2px 3px 0px rgba(38,49,105,0.20), |
||||
|
inset 0px 0px 5px -2px RGBA(83,92,137,0.16); |
||||
|
`;
|
||||
|
export const PagesBtn = () => ( |
||||
|
<button css={btnStyle}><Pages /></button> |
||||
|
) |
||||
|
export const PostBtn = () =>( |
||||
|
<button css={btnStyle}><Post /></button> |
||||
|
) |
||||
@ -0,0 +1,117 @@ |
|||||
|
import React from 'react'; |
||||
|
import { PagesBtn, PasteBtn } from './Button'; |
||||
|
|
||||
|
/** @jsx jsx */ |
||||
|
import { css, jsx } from '@emotion/core'; |
||||
|
const overviewCardStyle = css` |
||||
|
width: 300px; |
||||
|
height: 175px; |
||||
|
border-radius: 12px; |
||||
|
border: 1px solid rgba(200,200,200,0.2); |
||||
|
background-color: #EFEEEE; |
||||
|
box-shadow: |
||||
|
6px 6px 16px 0 rgba(217,210,200,0.51), |
||||
|
-6px -6px 26px 0 rgba(255,255,255,0.83); |
||||
|
`;
|
||||
|
const layout = css` |
||||
|
padding: 10px 10px 10px 30px; |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
`;
|
||||
|
const btnPositon = css` |
||||
|
position: relative; |
||||
|
float: right; |
||||
|
`;
|
||||
|
const numberStyle = css` |
||||
|
margin-top: 10px; |
||||
|
font-size: 47px; |
||||
|
text-shadow: 0px 0px 5px rgba(0,0,0,0.2); |
||||
|
font-family: sans-serif; |
||||
|
`;
|
||||
|
const text = css` |
||||
|
font-family: sans-serif; |
||||
|
font-size: 1rem; |
||||
|
text-shadow: 0px 0px 2px rgba(0,0,0,0.2); |
||||
|
`;
|
||||
|
const link = css` |
||||
|
font-family: sans-serif; |
||||
|
text-decoration: none; |
||||
|
color: rgba(0,20,255,0.9); |
||||
|
text-shadow: 0px 0px 2px rgba(0,0,0,0.1); |
||||
|
`;
|
||||
|
const textPosition = css` |
||||
|
padding-top:10px; |
||||
|
`;
|
||||
|
|
||||
|
export const OverviewCard = () => ( |
||||
|
<div css={overviewCardStyle}> |
||||
|
<div css={layout}> |
||||
|
<div css={textPosition}> |
||||
|
<span css={numberStyle}>1 </span> |
||||
|
<p css={text}>Total Posts</p> |
||||
|
<a href="" css={link}>View all</a> |
||||
|
</div> |
||||
|
<PagesBtn css={btnPositon}></PagesBtn> |
||||
|
</div> |
||||
|
</div> |
||||
|
) |
||||
|
|
||||
|
const activityCardStyle = css` |
||||
|
width: 100%; |
||||
|
height: 125px; |
||||
|
display:flex; |
||||
|
border-radius: 12px; |
||||
|
border: 1px solid rgba(200,200,200,0.2); |
||||
|
background-color: #EFEEEE; |
||||
|
box-shadow: |
||||
|
6px 6px 16px 0 rgba(217,210,200,0.51), |
||||
|
-6px -6px 26px 0 rgba(255,255,255,0.83); |
||||
|
`;
|
||||
|
const activityBtnPosition = css` |
||||
|
height:100%; |
||||
|
width:15%; |
||||
|
display:flex; |
||||
|
justify-content:center; |
||||
|
align-items:center; |
||||
|
`;
|
||||
|
const postPosition = css` |
||||
|
display:flex; |
||||
|
width:100%; |
||||
|
flex-direction:column; |
||||
|
justify-content: space-evenly; |
||||
|
padding:10px; |
||||
|
`;
|
||||
|
const postPositionTop = css` |
||||
|
width:100%; |
||||
|
display:flex; |
||||
|
justify-content: space-between; |
||||
|
`;
|
||||
|
const horizontalLine = css` |
||||
|
max-width:100%; |
||||
|
height:2px; |
||||
|
background-color: rgba(100,100,100,0.5); |
||||
|
margin:10px; |
||||
|
`;
|
||||
|
const postPositionBottom = css` |
||||
|
width:100%; |
||||
|
display:flex; |
||||
|
justify-content:space-between; |
||||
|
`;
|
||||
|
export const ActivityCard =() => ( |
||||
|
<div css={activityCardStyle}> |
||||
|
<div css={activityBtnPosition}> |
||||
|
<PagesBtn></PagesBtn> |
||||
|
</div> |
||||
|
<div css={postPosition}> |
||||
|
<div css={postPositionTop}> |
||||
|
<span css={text}>Posts</span> |
||||
|
<span css={text}>Month date and time</span> |
||||
|
</div> |
||||
|
<div css={horizontalLine}></div> |
||||
|
<div css={postPositionBottom}> |
||||
|
<span css={text}>Hello world!</span> |
||||
|
<a href="" css={link}>View all</a> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
) |
||||
@ -0,0 +1,13 @@ |
|||||
|
import React from 'react'; |
||||
|
|
||||
|
/** @jsx jsx */ |
||||
|
import { css, jsx } from '@emotion/core'; |
||||
|
|
||||
|
export const NavBar = () => { |
||||
|
return( |
||||
|
<div> |
||||
|
<input type="text" placeholder="Search"/> |
||||
|
</div> |
||||
|
|
||||
|
); |
||||
|
} |
||||
@ -0,0 +1,12 @@ |
|||||
|
import React from 'react'; |
||||
|
|
||||
|
/** @jsx jsx */ |
||||
|
import { css, jsx } from '@emotion/core'; |
||||
|
|
||||
|
export const BasePage = () => { |
||||
|
return( |
||||
|
<div> |
||||
|
|
||||
|
</div> |
||||
|
); |
||||
|
} |
||||
@ -0,0 +1,15 @@ |
|||||
|
import React from 'react'; |
||||
|
import {PagesBtn , PostBtn} from '../components/Button'; |
||||
|
|
||||
|
|
||||
|
export default { |
||||
|
title: 'ButtonStyle', |
||||
|
} |
||||
|
|
||||
|
export const PagesButton = () => ( |
||||
|
<PagesBtn>pages</PagesBtn> |
||||
|
) |
||||
|
|
||||
|
export const PostButton = () => ( |
||||
|
<PostBtn>post</PostBtn> |
||||
|
) |
||||
@ -0,0 +1,14 @@ |
|||||
|
import React from 'react'; |
||||
|
import {OverviewCard, ActivityCard} from '../components/Card'; |
||||
|
|
||||
|
|
||||
|
export default { |
||||
|
title: 'Cards', |
||||
|
} |
||||
|
|
||||
|
export const OverView = () => ( |
||||
|
<OverviewCard>hi</OverviewCard> |
||||
|
) |
||||
|
export const Activity = () => ( |
||||
|
<ActivityCard></ActivityCard> |
||||
|
) |
||||
@ -0,0 +1,10 @@ |
|||||
|
import React from 'react'; |
||||
|
import {NavBar} from '../components/NavBar'; |
||||
|
|
||||
|
export default { |
||||
|
title: 'NavBar', |
||||
|
} |
||||
|
|
||||
|
export const NavigationBar = () => ( |
||||
|
<NavBar></NavBar> |
||||
|
) |
||||
File diff suppressed because it is too large
Loading…
Reference in new issue