This repository has been archived by the owner on Jun 28, 2021. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 360
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Remove more SCSS and adding storybook for better component developing (…
…#880) * removed more CSS * Not needed files * Remove more unneeded css!
- Loading branch information
Showing
72 changed files
with
3,651 additions
and
1,664 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,29 @@ | ||
import React from 'react'; | ||
import { configure, addDecorator } from '@storybook/react'; | ||
import { withInfo } from '@storybook/addon-info'; | ||
|
||
import { ThemeProvider } from 'styled-components'; | ||
import { IntlProvider } from 'react-intl'; | ||
|
||
import getLocalMessages from '../src/helpers/setLocal'; | ||
import theme from '../src/theme'; | ||
|
||
global.__CLIENT__ = true; | ||
|
||
addDecorator((story, context) => withInfo('common info')(story)(context)); | ||
|
||
addDecorator(story => | ||
<ThemeProvider theme={theme}> | ||
<IntlProvider locale="en" messages={getLocalMessages()}> | ||
{story()} | ||
</IntlProvider> | ||
</ThemeProvider> | ||
); | ||
|
||
const req = require.context('../src/components', true, /\.stories\.js$/); | ||
|
||
function loadStories() { | ||
req.keys().forEach(filename => req(filename)); | ||
} | ||
|
||
configure(loadStories, module); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
<link rel="stylesheet" href="https://assets-1f14.kxcdn.com/main-415d4fa2919ce5d6e18b.css"> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,22 @@ | ||
// you can use this file to add your custom webpack plugins, loaders and anything you like. | ||
// This is just the basic way to add additional webpack configurations. | ||
// For more information refer the docs: https://storybook.js.org/configurations/custom-webpack-config | ||
|
||
// IMPORTANT | ||
// When you add this file, we won't add the default configurations which is similar | ||
// to "React Create App". This only has babel loader to load JavaScript. | ||
|
||
module.exports = { | ||
resolve: { | ||
extensions: ['.js'], | ||
modules: ['src', 'node_modules'] | ||
}, | ||
plugins: [ | ||
// your custom plugins | ||
], | ||
module: { | ||
rules: [ | ||
// add your custom rules. | ||
] | ||
} | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,29 @@ | ||
import styled from 'styled-components'; | ||
|
||
export default styled.div` | ||
padding-top: 5%; | ||
padding-bottom: 5%; | ||
h3 { | ||
font-size: 130%; | ||
} | ||
.row { | ||
padding-top: 1%; | ||
padding-bottom: 1%; | ||
h3 { | ||
color: ${props => props.theme.brandPrimary}; | ||
font-family: ${props => props.theme.fonts.montserrat}; | ||
} | ||
h4 { | ||
font-weight: 300; | ||
line-height: 150%; | ||
} | ||
} | ||
.credits { | ||
h3 { | ||
color: ${props => props.theme.textColor}; | ||
} | ||
h4 { | ||
font-family: ${props => props.theme.fonts.sourceSans}; | ||
} | ||
} | ||
`; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
import React from 'react'; | ||
|
||
import { storiesOf } from '@storybook/react'; | ||
|
||
import Bismillah from './index'; | ||
|
||
storiesOf('Bismillah', module).add('default', () => <Bismillah />); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,136 @@ | ||
import styled from 'styled-components'; | ||
|
||
const content = { | ||
59: 'e900', | ||
60: 'e901', | ||
48: 'e902', | ||
1: 'e904', | ||
2: 'e905', | ||
3: 'e906', | ||
4: 'e907', | ||
5: 'e908', | ||
38: 'e909', | ||
39: 'e90a', | ||
6: 'e90b', | ||
7: 'e90c', | ||
8: 'e90d', | ||
9: 'e90e', | ||
10: 'e90f', | ||
11: 'e910', | ||
12: 'e911', | ||
13: 'e912', | ||
14: 'e913', | ||
15: 'e914', | ||
16: 'e915', | ||
17: 'e916', | ||
18: 'e917', | ||
19: 'e918', | ||
20: 'e919', | ||
21: 'e91a', | ||
22: 'e91b', | ||
23: 'e91c', | ||
24: 'e91d', | ||
25: 'e91e', | ||
26: 'e91f', | ||
27: 'e920', | ||
28: 'e921', | ||
29: 'e922', | ||
30: 'e923', | ||
31: 'e924', | ||
32: 'e925', | ||
33: 'e926', | ||
40: 'e927', | ||
41: 'e928', | ||
42: 'e929', | ||
43: 'e92a', | ||
44: 'e92b', | ||
45: 'e92c', | ||
46: 'e92d', | ||
34: 'e92e', | ||
35: 'e92f', | ||
36: 'e930', | ||
37: 'e931', | ||
47: 'e932', | ||
49: 'e933', | ||
50: 'e934', | ||
51: 'e935', | ||
52: 'e936', | ||
53: 'e937', | ||
54: 'e938', | ||
55: 'e939', | ||
56: 'e93a', | ||
57: 'e93b', | ||
58: 'e93c', | ||
79: 'e93d', | ||
80: 'e93e', | ||
81: 'e93f', | ||
82: 'e940', | ||
61: 'e941', | ||
62: 'e942', | ||
63: 'e943', | ||
64: 'e944', | ||
65: 'e945', | ||
66: 'e946', | ||
67: 'e947', | ||
68: 'e948', | ||
69: 'e949', | ||
70: 'e94a', | ||
71: 'e94b', | ||
72: 'e94c', | ||
73: 'e94d', | ||
74: 'e94e', | ||
75: 'e94f', | ||
76: 'e950', | ||
77: 'e951', | ||
78: 'e952', | ||
83: 'e953', | ||
84: 'e954', | ||
85: 'e955', | ||
86: 'e956', | ||
87: 'e957', | ||
88: 'e958', | ||
89: 'e959', | ||
90: 'e95a', | ||
91: 'e95b', | ||
92: 'e95c', | ||
93: 'e95d', | ||
94: 'e95e', | ||
95: 'e95f', | ||
96: 'e960', | ||
97: 'e961', | ||
98: 'e962', | ||
99: 'e963', | ||
100: 'e964', | ||
101: 'e965', | ||
102: 'e966', | ||
103: 'e967', | ||
104: 'e968', | ||
105: 'e969', | ||
106: 'e96a', | ||
107: 'e96b', | ||
108: 'e96c', | ||
109: 'e96d', | ||
110: 'e96e', | ||
111: 'e96f', | ||
112: 'e970', | ||
113: 'e971', | ||
114: 'e972' | ||
}; | ||
|
||
export default styled.span` | ||
font-family: 'surah_names' !important; | ||
speak: none; | ||
font-style: normal; | ||
font-weight: normal; | ||
font-variant: normal; | ||
text-transform: none; | ||
line-height: 1; | ||
font-size: 25px; | ||
float: right; | ||
/* Better Font Rendering =========== */ | ||
-webkit-font-smoothing: antialiased; | ||
-moz-osx-font-smoothing: grayscale; | ||
content: ${props => content[props.id] || 'e903'}; | ||
`; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,10 @@ | ||
import styled from 'styled-components'; | ||
|
||
export default styled.div` | ||
padding-top: 70px; | ||
min-height: 100vh; | ||
@media (max-width: ${props => props.theme.screen.sm}) { | ||
padding-top: 70px; | ||
} | ||
`; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,58 @@ | ||
import styled from 'styled-components'; | ||
import { darken } from 'polished'; | ||
|
||
export default styled.h1` | ||
white-space: pre-line; | ||
color: #000; | ||
width: 100%; | ||
overflow-wrap: break-word; | ||
line-height: 1.5; | ||
word-break: break-all; | ||
text-align: right; | ||
float: left; | ||
b, | ||
span { | ||
border-color: transparent; | ||
border-width: 0 0 1px 0; | ||
border-style: solid; | ||
float: right; | ||
&.active { | ||
color: ${props => darken(0.05, props.theme.brandPrimary)}; | ||
border-color: ${props => darken(0.15, props.theme.brandPrimary)}; | ||
} | ||
} | ||
.line { | ||
direction: rtl; | ||
b, | ||
span { | ||
float: none; | ||
display: inline-block; | ||
} | ||
} | ||
b, | ||
a { | ||
font-weight: 100; | ||
padding: 0 2px; | ||
color: #000; | ||
&:hover { | ||
color: ${props => props.theme.brandPrimary}; | ||
cursor: help; | ||
} | ||
&:focus { | ||
color: ${props => darken(0.1, props.theme.brandPrimary)}; | ||
outline: none; | ||
} | ||
} | ||
p { | ||
display: block; | ||
clear: both; | ||
text-align: right; | ||
direction: rtl; | ||
float: right; | ||
} | ||
@media (max-width: ${props => props.theme.screen.sm}) { | ||
font-size: 300%; | ||
line-height: 130%; | ||
} | ||
} | ||
`; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
import React from 'react'; | ||
|
||
import { storiesOf } from '@storybook/react'; | ||
|
||
import Footer from 'components/Footer'; | ||
|
||
storiesOf('Footer', module).add('default', () => <Footer />); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,36 @@ | ||
import styled from 'styled-components'; | ||
|
||
const CONTAINER_WIDTH = 280; | ||
|
||
export default styled.div` | ||
position: fixed; | ||
left: ${CONTAINER_WIDTH * -1}px; | ||
top: 0; | ||
bottom: 0; | ||
background: #fff; | ||
z-index: 1031; | ||
box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), | ||
0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2); | ||
visibility: hidden; | ||
background: #fff; | ||
width: ${CONTAINER_WIDTH}px; | ||
transition: left 0.35s cubic-bezier(0.24, 1, 0.32, 1), visibility 0.2s; | ||
${props => (props.open ? 'left: 0; visibility: visible;' : '')} .navbar-text { | ||
margin-left: 0; | ||
.backToHome { | ||
margin-right: 23px; | ||
font-size: 17px; | ||
} | ||
} | ||
@media (max-width: ${props => props.theme.screen.sm}) { | ||
width: ${CONTAINER_WIDTH}px; | ||
left: ${CONTAINER_WIDTH * -1}px; | ||
${props => (props.open ? 'left: 0; ' : '')} .navbar-text { | ||
padding-left: 15px; | ||
} | ||
} | ||
`; |
Oops, something went wrong.