Compare commits

...

2 Commits

Author SHA1 Message Date
vibin d9961d11a0 sidenav 5 years ago
vibin 6614347f99 base components 5 years ago
  1. 2
      .storybook/addons.js
  2. 4
      .storybook/config.js
  3. 10
      package.json
  4. 6
      src/assets/Pages.svg
  5. 6
      src/assets/Plugins.svg
  6. 6
      src/assets/Post.svg
  7. BIN
      src/assets/Removed Apps.html
  8. 3
      src/assets/Save.svg
  9. 4
      src/assets/dashboard.svg
  10. 22
      src/components/Button.js
  11. 117
      src/components/Card.js
  12. 13
      src/components/NavBar.js
  13. 59
      src/components/SideNav.js
  14. 12
      src/constainer/BasePage.js
  15. 15
      src/stories/Button.stories.js
  16. 14
      src/stories/Card.stories.js
  17. 10
      src/stories/Navbar.stories.js
  18. 10
      src/stories/SideNav.stories.js
  19. 2430
      yarn.lock

2
.storybook/addons.js

@ -0,0 +1,2 @@
import '@storybook/addon-actions/register';
import '@storybook/addon-links/register';

4
.storybook/config.js

@ -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);

10
package.json

@ -14,7 +14,9 @@
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
"eject": "react-scripts eject",
"storybook": "start-storybook -p 9009 -s public",
"build-storybook": "build-storybook -s public"
},
"eslintConfig": {
"extends": "react-app"
@ -30,5 +32,11 @@
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"@storybook/addon-actions": "^5.2.8",
"@storybook/addon-links": "^5.2.8",
"@storybook/addons": "^5.2.8",
"@storybook/react": "^5.2.8"
}
}

6
src/assets/Pages.svg

@ -0,0 +1,6 @@
<svg width="18" height="21" viewBox="0 0 18 21" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14 3H0V21H14V3Z" fill="#FBFBFB"/>
<path d="M13.5 3.5H0.5V20.5H13.5V3.5Z" stroke="#707070"/>
<path d="M18 0H4V18H18V0Z" fill="#FBFBFB"/>
<path d="M17.5 0.5H4.5V17.5H17.5V0.5Z" stroke="#707070"/>
</svg>

After

Width:  |  Height:  |  Size: 307 B

6
src/assets/Plugins.svg

@ -0,0 +1,6 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="0.5" y="0.5" width="19" height="19" rx="1.5" stroke="#707070"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 17C13.866 17 17 13.866 17 10C17 6.13401 13.866 3 10 3C6.13401 3 3 6.13401 3 10C3 13.866 6.13401 17 10 17ZM9.99998 15.8334C13.2216 15.8334 15.8333 13.2217 15.8333 10C15.8333 6.77838 13.2216 4.16671 9.99998 4.16671C6.77832 4.16671 4.16664 6.77838 4.16664 10C4.16664 13.2217 6.77832 15.8334 9.99998 15.8334Z" fill="#707070"/>
<circle cx="7" cy="10" r="1" fill="#707070"/>
<circle cx="13" cy="10" r="1" fill="#707070"/>
</svg>

After

Width:  |  Height:  |  Size: 645 B

6
src/assets/Post.svg

@ -0,0 +1,6 @@
<svg width="19" height="21" viewBox="0 0 19 21" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M18.5 0.5H0.5V20.5H18.5V0.5Z" stroke="#707070"/>
<path d="M14.5 3.5H4.5V7.5H14.5V3.5Z" stroke="#707070"/>
<path d="M4.5 12.7109H14.573" stroke="#707070"/>
<path d="M4.5 17.2739H14.573" stroke="#707070"/>
</svg>

After

Width:  |  Height:  |  Size: 316 B

BIN
src/assets/Removed Apps.html

Binary file not shown.

3
src/assets/Save.svg

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="19.85" height="20.263" viewBox="0 0 19.85 20.263">
<path id="Path_16" data-name="Path 16" d="M16.8,0H.5V20.263H20.35V3.551ZM14.974.827V6.617H5.049V.827ZM4.222,19.436V11.579H16.214v7.857Zm15.3,0H17.041V10.752H3.395v8.684H1.327V.827H4.222V7.444H15.8V.827h.656l3.066,3.066Z" transform="translate(-0.5)"/>
</svg>

After

Width:  |  Height:  |  Size: 358 B

4
src/assets/dashboard.svg

@ -0,0 +1,4 @@
<svg width="29" height="25" viewBox="0 0 29 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M18.7624 10.0719L16.4824 11.4489C15.6754 11.9239 14.8204 12.3489 14.0124 12.7309C13.7744 12.8309 13.4894 12.9689 13.2044 13.1109C12.7218 13.3573 12.3344 13.7564 12.1025 14.2461C11.8706 14.7358 11.8072 15.2884 11.9224 15.8179C12.0235 16.2449 12.2414 16.6353 12.5517 16.9456C12.8619 17.2559 13.2524 17.4737 13.6794 17.5749C13.8667 17.614 14.0582 17.6298 14.2494 17.6219C14.693 17.6163 15.1267 17.4894 15.5034 17.255C15.8801 17.0205 16.1854 16.6875 16.3864 16.2919C16.4864 16.0549 16.6244 15.7699 16.7664 15.4849C17.1934 14.6779 17.5734 13.8229 18.0484 13.0149L19.4254 10.7349C19.4673 10.6407 19.4802 10.5362 19.4624 10.4346C19.4446 10.3331 19.3969 10.2391 19.3254 10.1649C19.258 10.0848 19.1643 10.0315 19.061 10.0144C18.9578 9.99736 18.8519 10.0177 18.7624 10.0719ZM17.2424 12.4939C16.7433 13.3188 16.299 14.1757 15.9124 15.0589C15.8053 15.3367 15.6783 15.6064 15.5324 15.8659C15.3923 16.1595 15.1549 16.3957 14.8606 16.5342C14.5662 16.6727 14.2329 16.7051 13.9174 16.6259C13.6586 16.5762 13.4208 16.45 13.2345 16.2638C13.0482 16.0775 12.9221 15.8396 12.8724 15.5809C12.7931 15.2653 12.8255 14.9321 12.964 14.6377C13.1026 14.3433 13.3387 14.1059 13.6324 13.9659C13.8704 13.8229 14.1544 13.7279 14.4394 13.5859C15.2944 13.1589 16.1964 12.7309 17.0044 12.2559L17.6214 11.8759L17.2424 12.4939Z" fill="#959595"/>
<path d="M27.4814 9.97697C27.4755 9.94451 27.4664 9.91269 27.4544 9.88197C27.4421 9.85155 27.4264 9.82269 27.4074 9.79597C26.6988 8.10304 25.6719 6.56182 24.3824 5.25597C24.3452 5.20071 24.2976 5.15317 24.2424 5.11597C22.2781 3.16591 19.7861 1.83331 17.0736 1.28246C14.3611 0.731608 11.5467 0.986594 8.97736 2.01598C8.94489 2.02186 8.91307 2.03091 8.88236 2.04298C8.85195 2.05522 8.82309 2.07099 8.79636 2.08997C7.10342 2.79854 5.56221 3.82545 4.25636 5.11497C4.2011 5.15217 4.15355 5.19971 4.11636 5.25497C1.4806 7.9135 0.00132299 11.5053 0.000361401 15.249C-0.0228012 18.4623 1.06807 21.5843 3.08736 24.084C3.12897 24.1457 3.18581 24.1956 3.25239 24.2289C3.31897 24.2622 3.39302 24.2777 3.46736 24.274H25.0314C25.1057 24.2777 25.1798 24.2622 25.2463 24.2289C25.3129 24.1956 25.3698 24.1457 25.4114 24.084C27.4314 21.5846 28.523 18.4625 28.5004 15.249C28.5011 13.4426 28.1551 11.6529 27.4814 9.97697ZM24.8414 23.324H3.70036C3.06461 22.5067 2.52756 21.6172 2.10036 20.674L3.41236 20.142C3.52232 20.0894 3.60744 19.996 3.64961 19.8817C3.69179 19.7673 3.68769 19.641 3.63819 19.5297C3.58869 19.4183 3.4977 19.3306 3.38456 19.2853C3.27142 19.24 3.14506 19.2406 3.03236 19.287L1.74636 19.808C1.26633 18.4974 0.997972 17.1189 0.951361 15.724H4.27536C4.40134 15.724 4.52216 15.6739 4.61124 15.5849C4.70032 15.4958 4.75036 15.375 4.75036 15.249C4.75036 15.123 4.70032 15.0022 4.61124 14.9131C4.52216 14.824 4.40134 14.774 4.27536 14.774H0.959361C1.01057 13.3125 1.30494 11.8697 1.83036 10.505L3.13036 11.069C3.1862 11.1065 3.25347 11.1231 3.32036 11.116C3.41189 11.1167 3.50153 11.0899 3.57766 11.0391C3.65379 10.9883 3.71291 10.9158 3.74736 10.831C3.7967 10.7175 3.79939 10.5891 3.75486 10.4737C3.71032 10.3582 3.62213 10.2649 3.50936 10.214L2.20036 9.64497C2.79348 8.38072 3.58065 7.21699 4.53336 6.19598L5.51236 7.17498C5.55523 7.22003 5.60681 7.25589 5.66397 7.2804C5.72113 7.30491 5.78267 7.31755 5.84486 7.31755C5.90705 7.31755 5.96859 7.30491 6.02575 7.2804C6.08291 7.25589 6.13449 7.22003 6.17736 7.17498C6.22241 7.1321 6.25828 7.08052 6.28279 7.02337C6.3073 6.96621 6.31994 6.90467 6.31994 6.84248C6.31994 6.78029 6.3073 6.71874 6.28279 6.66159C6.25828 6.60443 6.22241 6.55285 6.17736 6.50998L5.20036 5.53098C6.27066 4.53179 7.49761 3.71494 8.83236 3.11298L9.36236 4.41998C9.39124 4.5085 9.44906 4.58473 9.5265 4.63642C9.60395 4.68812 9.69653 4.71226 9.78936 4.70497C9.85583 4.70721 9.9216 4.69094 9.97936 4.65797C10.0921 4.60702 10.1803 4.51373 10.2249 4.39827C10.2694 4.28281 10.2667 4.15446 10.2174 4.04097L9.69836 2.75998C11.008 2.27872 12.3859 2.00869 13.7804 1.95998V5.27497C13.7804 5.40095 13.8304 5.52177 13.9195 5.61085C14.0086 5.69993 14.1294 5.74997 14.2554 5.74997C14.3813 5.74997 14.5022 5.69993 14.5912 5.61085C14.6803 5.52177 14.7304 5.40095 14.7304 5.27497V1.95897C16.1919 2.01019 17.6346 2.30455 18.9994 2.82997L18.4354 4.12997C18.386 4.24346 18.3833 4.37181 18.4279 4.48727C18.4724 4.60272 18.5606 4.69602 18.6734 4.74697C18.7292 4.7845 18.7965 4.80114 18.8634 4.79398C18.9542 4.79165 19.0425 4.76364 19.1181 4.7132C19.1936 4.66277 19.2534 4.59196 19.2904 4.50898L19.8604 3.19097C21.1219 3.78704 22.2826 4.57656 23.3004 5.53098L22.3214 6.50998C22.2763 6.55285 22.2404 6.60443 22.2159 6.66159C22.1914 6.71874 22.1788 6.78029 22.1788 6.84248C22.1788 6.90467 22.1914 6.96621 22.2159 7.02337C22.2404 7.08052 22.2763 7.1321 22.3214 7.17498C22.3631 7.22125 22.4145 7.25791 22.4718 7.28242C22.5291 7.30694 22.591 7.31872 22.6534 7.31697C22.7776 7.31144 22.8956 7.26098 22.9854 7.17498L23.9644 6.19598C24.9635 7.26627 25.7804 8.49323 26.3824 9.82798L25.0754 10.358C24.9626 10.4089 24.8744 10.5022 24.8299 10.6177C24.7853 10.7331 24.788 10.8615 24.8374 10.975C24.8662 11.0635 24.9241 11.1397 25.0015 11.1914C25.079 11.2431 25.1715 11.2673 25.2644 11.26C25.3114 11.26 25.3644 11.213 25.4544 11.213L26.7354 10.694C27.2166 12.0037 27.4866 13.3815 27.5354 14.776H24.2244C24.0984 14.776 23.9776 14.826 23.8885 14.9151C23.7994 15.0042 23.7494 15.125 23.7494 15.251C23.7494 15.377 23.7994 15.4978 23.8885 15.5868C23.9776 15.6759 24.0984 15.726 24.2244 15.726H27.5404C27.4909 17.1884 27.2011 18.6327 26.6824 20.001L25.3644 19.431C25.2517 19.3846 25.1253 19.384 25.0122 19.4293C24.899 19.4746 24.808 19.5623 24.7585 19.6737C24.709 19.785 24.7049 19.9113 24.7471 20.0257C24.7893 20.14 24.8744 20.2334 24.9844 20.286L26.3194 20.863C25.9157 21.7336 25.4202 22.5586 24.8414 23.324Z" fill="#959595"/>
</svg>

After

Width:  |  Height:  |  Size: 5.7 KiB

22
src/components/Button.js

@ -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>
)

117
src/components/Card.js

@ -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>
)

13
src/components/NavBar.js

@ -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>
);
}

59
src/components/SideNav.js

@ -0,0 +1,59 @@
import React from 'react';
import {ReactComponent as Dashboard} from '../assets/dashboard.svg';
/** @jsx jsx */
import { css, jsx } from '@emotion/core';
const layout = css`
positon: absolute;
width:25%;
height:100vh;
`;
const linkStyle=css`
text-decoration: none;
`;
const listStyle=css`
list-style: none;
`;
const listLinkStyle =css`
padding: 10px 20px 10px 20px;
cursor: pointer;
:hover{
border: 1px solid rgba(200,200,200,0.2);
}
`;
export const SideNavBar = () => {
return (
<div css={layout}>
<div>
<ul css={listStyle}>
<li css={listLinkStyle}>
<a href="" css={linkStyle}>
<Dashboard /> Dashboard
</a>
</li>
<li css={listLinkStyle}>
<a href="" css={linkStyle}>Pages
</a>
</li>
<li css={listLinkStyle}>
<a href="" css={linkStyle}>Posts
</a>
</li>
<li css={listLinkStyle}>
<a href="" css={linkStyle}>Themes
</a>
</li>
<li css={listLinkStyle}>
<a href="" css={linkStyle}>Plugins
</a>
</li>
<li css={listLinkStyle}>
<a href="" css={linkStyle}>Settings
</a>
</li>
</ul>
</div>
</div>
);
}

12
src/constainer/BasePage.js

@ -0,0 +1,12 @@
import React from 'react';
/** @jsx jsx */
import { css, jsx } from '@emotion/core';
export const BasePage = () => {
return(
<div>
</div>
);
}

15
src/stories/Button.stories.js

@ -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>
)

14
src/stories/Card.stories.js

@ -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>
)

10
src/stories/Navbar.stories.js

@ -0,0 +1,10 @@
import React from 'react';
import {NavBar} from '../components/NavBar';
export default {
title: 'NavBar',
}
export const NavigationBar = () => (
<NavBar></NavBar>
)

10
src/stories/SideNav.stories.js

@ -0,0 +1,10 @@
import React from 'react';
import {SideNavBar} from '../components/SideNav';
export default {
title: 'SideNavBar',
}
export const SideNav =() =>(
<SideNavBar></SideNavBar>
)

2430
yarn.lock

File diff suppressed because it is too large
Loading…
Cancel
Save