hotfix: merge with develop
This commit is contained in:
commit
9137d1a61c
|
@ -0,0 +1,54 @@
|
||||||
|
---
|
||||||
|
name: Button
|
||||||
|
---
|
||||||
|
|
||||||
|
import { Playground, PropsTable } from 'docz'
|
||||||
|
|
||||||
|
import { Button } from './button.js'
|
||||||
|
import { DoczWrapper } from '../theme.js'
|
||||||
|
|
||||||
|
# Button
|
||||||
|
|
||||||
|
<PropsTable of={Button} />
|
||||||
|
|
||||||
|
## Primary
|
||||||
|
|
||||||
|
<Playground>
|
||||||
|
<div style={{ backgroundColor: '#000', padding: '20px' }}>
|
||||||
|
<DoczWrapper>{() => <Button label="Click me!" />}</DoczWrapper>
|
||||||
|
</div>
|
||||||
|
</Playground>
|
||||||
|
|
||||||
|
## Secondary
|
||||||
|
|
||||||
|
<Playground>
|
||||||
|
<div style={{ backgroundColor: '#000', padding: '20px' }}>
|
||||||
|
<DoczWrapper>{() => <Button label="Click me!" onClick={() => alert('Clicked')} variant="secondary" />}</DoczWrapper>
|
||||||
|
</div>
|
||||||
|
</Playground>
|
||||||
|
|
||||||
|
## Primary Disabled
|
||||||
|
|
||||||
|
<Playground>
|
||||||
|
<div style={{ backgroundColor: '#000', padding: '20px' }}>
|
||||||
|
<DoczWrapper>{() => <Button label="Click me!" onClick={() => alert('Clicked')} disabled />}</DoczWrapper>
|
||||||
|
</div>
|
||||||
|
</Playground>
|
||||||
|
|
||||||
|
## Secondary Disabled
|
||||||
|
|
||||||
|
<Playground>
|
||||||
|
<div style={{ backgroundColor: '#000', padding: '20px' }}>
|
||||||
|
<DoczWrapper>
|
||||||
|
{() => <Button label="Click me!" onClick={() => alert('Clicked')} disabled variant="secondary" />}
|
||||||
|
</DoczWrapper>
|
||||||
|
</div>
|
||||||
|
</Playground>
|
||||||
|
|
||||||
|
## Link Button
|
||||||
|
|
||||||
|
<Playground>
|
||||||
|
<div style={{ backgroundColor: '#000', padding: '20px' }}>
|
||||||
|
<DoczWrapper>{() => <Button label="Click me!" isLink to="/my-route" />}</DoczWrapper>
|
||||||
|
</div>
|
||||||
|
</Playground>
|
|
@ -0,0 +1,26 @@
|
||||||
|
---
|
||||||
|
name: Input
|
||||||
|
---
|
||||||
|
|
||||||
|
import { Playground, PropsTable } from 'docz'
|
||||||
|
|
||||||
|
import { InputComponent } from './input.js'
|
||||||
|
import { DoczWrapper } from '../theme.js'
|
||||||
|
|
||||||
|
# Input
|
||||||
|
|
||||||
|
<PropsTable of={InputComponent} />
|
||||||
|
|
||||||
|
## Text Input
|
||||||
|
|
||||||
|
<Playground>
|
||||||
|
<DoczWrapper>{() => <InputComponent inputType="input" value="Hello World!" onChange={console.log} />}</DoczWrapper>
|
||||||
|
</Playground>
|
||||||
|
|
||||||
|
## Textarea
|
||||||
|
|
||||||
|
<Playground>
|
||||||
|
<DoczWrapper>
|
||||||
|
{() => <InputComponent inputType="textarea" value="I'm ZCash Electron Wallet" onChange={console.log} rows={10} />}
|
||||||
|
</DoczWrapper>
|
||||||
|
</Playground>
|
|
@ -0,0 +1,23 @@
|
||||||
|
---
|
||||||
|
name: QRCode
|
||||||
|
---
|
||||||
|
|
||||||
|
import { Playground, PropsTable } from 'docz'
|
||||||
|
|
||||||
|
import { QRCode } from './qrcode.js'
|
||||||
|
|
||||||
|
# QRCode
|
||||||
|
|
||||||
|
<PropsTable of={QRCode} />
|
||||||
|
|
||||||
|
## Basic usage
|
||||||
|
|
||||||
|
<Playground>
|
||||||
|
<QRCode value="https://astrocoders.com" />
|
||||||
|
</Playground>
|
||||||
|
|
||||||
|
## Custom size
|
||||||
|
|
||||||
|
<Playground>
|
||||||
|
<QRCode value="https://astrocoders.com" size={500} />
|
||||||
|
</Playground>
|
|
@ -0,0 +1,94 @@
|
||||||
|
// @flow
|
||||||
|
|
||||||
|
import React from 'react';
|
||||||
|
import styled from 'styled-components';
|
||||||
|
import { Link } from 'react-router-dom';
|
||||||
|
/* eslint-disable import/no-extraneous-dependencies */
|
||||||
|
// $FlowFixMe
|
||||||
|
import { darken } from 'polished';
|
||||||
|
|
||||||
|
const defaultStyles = `
|
||||||
|
padding: 10px 30px;
|
||||||
|
font-family: ${
|
||||||
|
// $FlowFixMe
|
||||||
|
props => props.theme.fontFamily
|
||||||
|
};
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 0.9em;
|
||||||
|
cursor: pointer;
|
||||||
|
outline: none;
|
||||||
|
min-width: 100px;
|
||||||
|
border-radius: 100px;
|
||||||
|
transition: background-color 0.1s ease-in-out;
|
||||||
|
`;
|
||||||
|
|
||||||
|
const Primary = styled.button`
|
||||||
|
${defaultStyles};
|
||||||
|
background-color: ${props => props.theme.colors.primary};
|
||||||
|
color: ${props => props.theme.colors.secondary};
|
||||||
|
border: none;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: ${props => darken(0.1, props.theme.colors.primary(props))};
|
||||||
|
}
|
||||||
|
|
||||||
|
&:disabled {
|
||||||
|
background-color: #3e3c42;
|
||||||
|
cursor: not-allowed;
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
const Secondary = styled.button`
|
||||||
|
${defaultStyles};
|
||||||
|
background-color: Transparent;
|
||||||
|
color: ${props => props.theme.colors.secondary};
|
||||||
|
border: 2px solid #3e3c42;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
border-color: ${props => props.theme.colors.primary};
|
||||||
|
}
|
||||||
|
|
||||||
|
&:disabled {
|
||||||
|
background-color: Transparent;
|
||||||
|
cursor: not-allowed;
|
||||||
|
color: #3e3c42;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
border-color: #3e3c42;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
label: string,
|
||||||
|
onClick?: () => void,
|
||||||
|
to?: string,
|
||||||
|
variant?: 'primary' | 'secondary',
|
||||||
|
disabled?: boolean,
|
||||||
|
};
|
||||||
|
|
||||||
|
export const Button = ({
|
||||||
|
onClick, label, to, variant, disabled,
|
||||||
|
}: Props) => {
|
||||||
|
if (to && onClick) throw new Error('Should define either "to" or "onClick"');
|
||||||
|
|
||||||
|
const component = variant === 'primary' ? (
|
||||||
|
<Primary onClick={onClick} disabled={disabled}>
|
||||||
|
{label}
|
||||||
|
</Primary>
|
||||||
|
) : (
|
||||||
|
<Secondary onClick={onClick} disabled={disabled}>
|
||||||
|
{label}
|
||||||
|
</Secondary>
|
||||||
|
);
|
||||||
|
|
||||||
|
return to ? <Link to={String(to)}>{component}</Link> : component;
|
||||||
|
};
|
||||||
|
|
||||||
|
Button.defaultProps = {
|
||||||
|
to: null,
|
||||||
|
variant: 'primary',
|
||||||
|
onClick: null,
|
||||||
|
disabled: false,
|
||||||
|
};
|
|
@ -0,0 +1,53 @@
|
||||||
|
// @flow
|
||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
import styled from 'styled-components';
|
||||||
|
|
||||||
|
// TODO: Missing styles
|
||||||
|
|
||||||
|
const defaultStyles = `
|
||||||
|
padding: 10px;
|
||||||
|
width: 100%;
|
||||||
|
outline: none;
|
||||||
|
font-family: ${props => props.theme.fontFamily}
|
||||||
|
`;
|
||||||
|
|
||||||
|
const Input = styled.input.attrs({
|
||||||
|
type: 'text',
|
||||||
|
})`
|
||||||
|
${defaultStyles};
|
||||||
|
`;
|
||||||
|
|
||||||
|
const Textarea = styled.textarea`
|
||||||
|
${defaultStyles};
|
||||||
|
`;
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
inputType?: 'input' | 'textarea' | 'dropdown',
|
||||||
|
value: string,
|
||||||
|
onChange: string => void,
|
||||||
|
rows?: number,
|
||||||
|
disabled?: boolean,
|
||||||
|
type?: string,
|
||||||
|
};
|
||||||
|
|
||||||
|
export const InputComponent = ({ inputType, onChange, ...props }: Props) => {
|
||||||
|
const inputTypes = {
|
||||||
|
input: () => <Input onChange={evt => onChange(evt.target.value)} {...props} />,
|
||||||
|
textarea: () => <Textarea onChange={evt => onChange(evt.target.value)} {...props} />,
|
||||||
|
dropdown: () => null,
|
||||||
|
};
|
||||||
|
|
||||||
|
if (!Object.keys(inputTypes).find(key => key === inputType)) {
|
||||||
|
throw new Error(`Invalid input type: ${inputType}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
return inputTypes[inputType]();
|
||||||
|
};
|
||||||
|
|
||||||
|
InputComponent.defaultProps = {
|
||||||
|
inputType: 'input',
|
||||||
|
rows: 4,
|
||||||
|
disabled: false,
|
||||||
|
type: 'text',
|
||||||
|
};
|
|
@ -11,7 +11,7 @@ const Layout = styled.div`
|
||||||
left: 200px;
|
left: 200px;
|
||||||
top: 0;
|
top: 0;
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
background: #ccc;
|
background: ${props => props.theme.colors.secondary};
|
||||||
`;
|
`;
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
|
|
|
@ -0,0 +1,15 @@
|
||||||
|
// @flow
|
||||||
|
|
||||||
|
import React from 'react';
|
||||||
|
import QR from 'qrcode.react';
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
value: string,
|
||||||
|
size?: number,
|
||||||
|
};
|
||||||
|
|
||||||
|
export const QRCode = ({ value, size }: Props) => <QR value={value} size={size} />;
|
||||||
|
|
||||||
|
QRCode.defaultProps = {
|
||||||
|
size: 128,
|
||||||
|
};
|
|
@ -13,11 +13,17 @@ const Wrapper = styled.div`
|
||||||
left: 0;
|
left: 0;
|
||||||
top: 0;
|
top: 0;
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
background-color: ${props => props.theme.colors.secondary};
|
font-family: ${props => props.theme.fontFamily}
|
||||||
|
background-color: ${props => props.theme.colors.sidebarBg};
|
||||||
|
padding: 20px;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const StyledLink = styled(Link)`
|
const StyledLink = styled(Link)`
|
||||||
color: ${props => props.theme.colors.primary};
|
color: ${props => props.theme.colors.sidebarItem};
|
||||||
|
font-size: 16px;
|
||||||
|
text-decoration: none;
|
||||||
|
font-weight: 700;
|
||||||
|
padding: 5px 0;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
type MenuItem = {
|
type MenuItem = {
|
||||||
|
|
18
app/theme.js
18
app/theme.js
|
@ -7,18 +7,26 @@ import { normalize } from 'polished'; // eslint-disable-line
|
||||||
|
|
||||||
import { DARK } from './constants/themes';
|
import { DARK } from './constants/themes';
|
||||||
|
|
||||||
|
const darkOne = '#7B00DD';
|
||||||
|
const lightOne = '#ffffff';
|
||||||
|
const brandOne = '#624cda';
|
||||||
|
const brandTwo = '#a6ede2';
|
||||||
|
|
||||||
const appTheme = {
|
const appTheme = {
|
||||||
mode: DARK,
|
mode: DARK,
|
||||||
fontFamily: 'Open Sans',
|
fontFamily: 'PT Sans',
|
||||||
colors: {
|
colors: {
|
||||||
primary: theme('mode', {
|
primary: theme('mode', {
|
||||||
light: '#000',
|
light: lightOne,
|
||||||
dark: '#fff',
|
dark: darkOne,
|
||||||
}),
|
}),
|
||||||
secondary: theme('mode', {
|
secondary: theme('mode', {
|
||||||
light: '#fff',
|
light: darkOne,
|
||||||
dark: '#000',
|
dark: lightOne,
|
||||||
}),
|
}),
|
||||||
|
sidebarBg: brandOne,
|
||||||
|
sidebarItem: brandTwo,
|
||||||
|
sidebarItemActive: lightOne,
|
||||||
},
|
},
|
||||||
size: {
|
size: {
|
||||||
title: 18,
|
title: 18,
|
||||||
|
|
10
doczrc.js
10
doczrc.js
|
@ -5,4 +5,14 @@ export default {
|
||||||
title: 'Zcash Foundation',
|
title: 'Zcash Foundation',
|
||||||
description: 'Zcash Foundation User Interface Styleguide',
|
description: 'Zcash Foundation User Interface Styleguide',
|
||||||
plugins: [css()],
|
plugins: [css()],
|
||||||
|
htmlContext: {
|
||||||
|
head: {
|
||||||
|
links: [
|
||||||
|
{
|
||||||
|
rel: 'stylesheet',
|
||||||
|
href: 'https://fonts.googleapis.com/css?family=PT+Sans:400,700',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
},
|
||||||
};
|
};
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
{
|
{
|
||||||
"name": "zec-react-wallet",
|
"name": "zec-react-wallet",
|
||||||
"version": "0.1.1",
|
"version": "0.1.1",
|
||||||
"description": "Zcash Reference",
|
"description": "Zcash Reference Wallet",
|
||||||
"main": "index.js",
|
"main": "index.js",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
|
@ -94,6 +94,7 @@
|
||||||
"history": "^4.7.2",
|
"history": "^4.7.2",
|
||||||
"p-queue": "^3.0.0",
|
"p-queue": "^3.0.0",
|
||||||
"process-exists": "^3.1.0",
|
"process-exists": "^3.1.0",
|
||||||
|
"qrcode.react": "^0.8.0",
|
||||||
"react": "^16.6.0",
|
"react": "^16.6.0",
|
||||||
"react-dom": "^16.6.0",
|
"react-dom": "^16.6.0",
|
||||||
"react-redux": "^5.0.7",
|
"react-redux": "^5.0.7",
|
||||||
|
|
|
@ -6,6 +6,7 @@
|
||||||
<meta name="theme-color" content="#000000" />
|
<meta name="theme-color" content="#000000" />
|
||||||
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
|
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
|
||||||
<link rel="shortcut icon" href="favicon.ico" />
|
<link rel="shortcut icon" href="favicon.ico" />
|
||||||
|
<link href="https://fonts.googleapis.com/css?family=PT+Sans:400,700" rel="stylesheet" />
|
||||||
|
|
||||||
<title>Zcash Reference Wallet</title>
|
<title>Zcash Reference Wallet</title>
|
||||||
</head>
|
</head>
|
||||||
|
|
13
yarn.lock
13
yarn.lock
|
@ -11318,6 +11318,19 @@ q@~0.9.6:
|
||||||
resolved "https://registry.yarnpkg.com/q/-/q-0.9.7.tgz#4de2e6cb3b29088c9e4cbc03bf9d42fb96ce2f75"
|
resolved "https://registry.yarnpkg.com/q/-/q-0.9.7.tgz#4de2e6cb3b29088c9e4cbc03bf9d42fb96ce2f75"
|
||||||
integrity sha1-TeLmyzspCIyeTLwDv51C+5bOL3U=
|
integrity sha1-TeLmyzspCIyeTLwDv51C+5bOL3U=
|
||||||
|
|
||||||
|
qr.js@0.0.0:
|
||||||
|
version "0.0.0"
|
||||||
|
resolved "https://registry.yarnpkg.com/qr.js/-/qr.js-0.0.0.tgz#cace86386f59a0db8050fa90d9b6b0e88a1e364f"
|
||||||
|
integrity sha1-ys6GOG9ZoNuAUPqQ2baw6IoeNk8=
|
||||||
|
|
||||||
|
qrcode.react@^0.8.0:
|
||||||
|
version "0.8.0"
|
||||||
|
resolved "https://registry.yarnpkg.com/qrcode.react/-/qrcode.react-0.8.0.tgz#413b31cc3b62910e39513f7bead945e01c4c34fb"
|
||||||
|
integrity sha512-16wKpuFvLwciIq2YAsfmPUCnSR8GrYPsXRK5KVdcIuX0+W/MKZbBkFhl44ttRx4TWZHqRjfztoWOxdPF0Hb9JA==
|
||||||
|
dependencies:
|
||||||
|
prop-types "^15.6.0"
|
||||||
|
qr.js "0.0.0"
|
||||||
|
|
||||||
qs@6.5.2, qs@~6.5.2:
|
qs@6.5.2, qs@~6.5.2:
|
||||||
version "6.5.2"
|
version "6.5.2"
|
||||||
resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.2.tgz#cb3ae806e8740444584ef154ce8ee98d403f3e36"
|
resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.2.tgz#cb3ae806e8740444584ef154ce8ee98d403f3e36"
|
||||||
|
|
Loading…
Reference in New Issue