Skip to content
This repository was archived by the owner on May 13, 2024. It is now read-only.

Commit b1b7139

Browse files
cezaraugustocezaraugusto
committed
initial setup
0 parents  commit b1b7139

File tree

7 files changed

+9946
-0
lines changed

7 files changed

+9946
-0
lines changed

‎.gitignore‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log.*
5+
6+
# Directory for instrumented libs generated by jscoverage/JSCover
7+
lib-cov
8+
9+
# Coverage directory used by tools like istanbul
10+
coverage
11+
12+
# Dependency directory
13+
node_modules
14+
15+
# Temp files
16+
.DS_Store
17+
.DS-Store
18+
19+
# vim swap files
20+
*.swp
21+
22+
# webstrom
23+
.idea

‎.storybook/config.js‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
/* This Source Code Form is subject to the terms of the Mozilla Public
2+
* License, v. 2.0. If a copy of the MPL was not distributed with this file,
3+
* You can obtain one at http://mozilla.org/MPL/2.0/. */
4+
5+
import { configure } from '@storybook/react';
6+
7+
function loadStories() {
8+
const req = require.context('../stories', true, /\.js$/);
9+
req.keys().forEach(filename => req(filename));
10+
}
11+
12+
configure(loadStories, module);

‎brave-ui/browserButton.js‎

Lines changed: 168 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,168 @@
1+
/* This Source Code Form is subject to the terms of the Mozilla Public
2+
* License, v. 2.0. If a copy of the MPL was not distributed with this file,
3+
* You can obtain one at http://mozilla.org/MPL/2.0/. */
4+
5+
/**
6+
* Implementator notes:
7+
* This file is the home of default, primary and secondary icons
8+
* There are other several buttons that may benefit
9+
* from it, which is still an early draft.
10+
*
11+
* Plan is to make the component easy to change, so if your
12+
* addition requires a lot of changes, consider creating another
13+
* component using this as a boilerlate
14+
*/
15+
16+
import React from 'react'
17+
import {StyleSheet, css} from 'aphrodite/no-important'
18+
import theme from './theme'
19+
20+
const BrowserButton = (props) => {
21+
const theming = {}
22+
23+
// Default button theme
24+
// TODO: do we really need a default button?
25+
theming['--bg'] = theme.browserButton.default.bg
26+
theming['--color'] = theme.browserButton.default.color
27+
theming['--hoverColor'] = theme.browserButton.default.hoverColor
28+
29+
// Primary button theme
30+
theming['--primary-bg'] = theme.browserButton.primary.bg
31+
theming['--primary-gradient1'] = theme.browserButton.primary.gradient1
32+
theming['--primary-gradient2'] = theme.browserButton.primary.gradient2
33+
theming['--primary-color'] = theme.browserButton.primary.color
34+
theming['--primary-hoverColor'] = theme.browserButton.primary.hoverColor
35+
theming['--primary-borderHoverColor'] = theme.browserButton.primary.borderHoverColor
36+
37+
// Secondary button theme
38+
theming['--secondary-bg'] = theme.browserButton.secondary.bg
39+
theming['--secondary-color'] = theme.browserButton.secondary.color
40+
theming['--secondary-hoverColor'] = theme.browserButton.secondary.hoverColor
41+
theming['--secondary-borderHoverColor'] = theme.browserButton.secondary.borderHoverColor
42+
43+
/**
44+
* Custom style is a separate entity and is also defined as a prop
45+
* i.e. <BrowserButton size='16px' fontSize='10px' />
46+
*/
47+
const customStyle = {}
48+
49+
if (props.size != null) {
50+
customStyle['--size'] = props.size
51+
}
52+
53+
if (props.fontSize != null) {
54+
customStyle['--fontSize'] = props.fontSize
55+
customStyle['--size'] = `calc(${props.fontSize} * 2)`
56+
}
57+
58+
return (
59+
<button
60+
data-test-id={props.testId}
61+
style={Object.assign(theming, customStyle)}
62+
onClick={props.onClick}
63+
disabled={props.disabled}
64+
className={css(
65+
styles.browserButton,
66+
props.as === 'primary' && styles.browserButton_primaryColor,
67+
props.as === 'secondary' && styles.browserButton_secondaryColor,
68+
props.disabled && styles.browserButton_disabled
69+
)}
70+
>
71+
{props.label}
72+
</button>
73+
)
74+
}
75+
76+
const styles = StyleSheet.create({
77+
browserButton: {
78+
// Positioning properties
79+
position: 'relative',
80+
display: 'inline-block',
81+
textAlign: 'center',
82+
83+
// Font properties
84+
fontSize: `var(--fontSize, 13px)`,
85+
color: `var(--color)`,
86+
87+
// Box/Border properties
88+
boxShadow: '0px 1px 5px -1px rgba(0, 0, 0, 0.5)',
89+
boxSizing: 'border-box',
90+
outline: 'none',
91+
border: 'none',
92+
borderRadius: '2px',
93+
94+
// Background properties
95+
backgroundSize: '16px',
96+
backgroundPosition: 'center center',
97+
backgroundRepeat: 'no-repeat',
98+
backgroundImage: 'none',
99+
backgroundColor: `var(--bg)`,
100+
101+
// Sizing properties
102+
lineHeight: 1.25, // TODO: this should be calculated instead of hard coded
103+
width: 'auto',
104+
minWidth: `calc(var(--fontSize, 13px) * 6)`,
105+
height: `var(--size, 32px)`,
106+
whiteSpace: 'nowrap',
107+
108+
// Spacing properties
109+
paddingTop: '5px',
110+
paddingBottom: '5px',
111+
paddingRight: '16px',
112+
paddingLeft: '16px',
113+
marginTop: 0,
114+
marginRight: 0,
115+
marginBottom: 0,
116+
marginLeft: 0,
117+
118+
// Mouse properties
119+
WebkitAppRegion: 'no-drag',
120+
cursor: 'pointer',
121+
userSelect: 'none',
122+
123+
// Transition properties
124+
transition: '.1s opacity, .1s background',
125+
126+
':hover': {
127+
color: `var(--hoverColor)`
128+
},
129+
130+
':active': {
131+
// push the button down when active
132+
bottom: '-1px'
133+
}
134+
},
135+
136+
browserButton_disabled: {
137+
pointerEvents: 'none',
138+
animation: 'none',
139+
opacity: 0.25
140+
},
141+
142+
browserButton_primaryColor: {
143+
background: `var(--primary-bg)`,
144+
borderLeft: '2px solid transparent',
145+
borderRight: '2px solid transparent',
146+
borderTop: `2px solid var(--primary-gradient1)`,
147+
borderBottom: `2px solid var(--primary-gradient2)`,
148+
color: `var(--primary-color)`,
149+
150+
':hover': {
151+
border: `2px solid var(--primary-borderHoverColor)`,
152+
color: `var(--primary-hoverColor)`
153+
}
154+
},
155+
156+
browserButton_secondaryColor: {
157+
background: `var(--secondary-bg)`,
158+
border: '1px solid white',
159+
color: `var(--secondary-color)`,
160+
161+
':hover': {
162+
border: `1px solid var(--secondary-borderHoverColor)`,
163+
color: `var(--secondary-hoverColor)`
164+
}
165+
}
166+
})
167+
168+
export default BrowserButton

‎brave-ui/theme.js‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
/* This Source Code Form is subject to the terms of the Mozilla Public
2+
* License, v. 2.0. If a copy of the MPL was not distributed with this file,
3+
* You can obtain one at http://mozilla.org/MPL/2.0/. */
4+
5+
const theme = {
6+
browserButton: {
7+
default: {
8+
bg: '#fff',
9+
color: '#5a5a5a',
10+
hoverColor: '#000'
11+
},
12+
primary: {
13+
bg: 'linear-gradient(#ff7a1d, #ff5000)',
14+
gradient1: '#ff7a1d',
15+
gradient2: '#ff5000',
16+
color: '#fff',
17+
hoverColor: '#fff',
18+
borderHoverColor: '#fff'
19+
},
20+
secondary: {
21+
bg: 'linear-gradient(#fff, #ececec)',
22+
color: '#666',
23+
hoverColor: 'rgb(153, 153, 153)',
24+
borderHoverColor: '#444'
25+
}
26+
}
27+
}
28+
29+
export default theme

0 commit comments

Comments
 (0)