filecoin-project/slate
1
1
Fork 0
mirror of https://github.com/filecoin-project/slate.git synced 2024-11-23 22:12:19 +03:00
Code Issues Packages Projects Releases Wiki Activity

design system: adds default font for each component

Browse Source
This commit is contained in:
@wwwjim 2020-07-02 01:37:20 -07:00
parent 4af8cca5ba
commit e98d8b2ac4
14 changed files with 144 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
components/system/components/CardTabGroup.js
View File

@ -11,6 +11,7 @@ const TAB_GROUP_SIZE_MAP = {
}; };
const STYLES_CARD_TAB_GROUP = css` const STYLES_CARD_TAB_GROUP = css`
font-family: ${Constants.font.text};
width: 100%; width: 100%;
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;

1
components/system/components/CheckBox.js
View File

@ -5,6 +5,7 @@ import * as SVG from "~/components/system/svg";
import { css } from "@emotion/react"; import { css } from "@emotion/react";
const STYLES_CHECKBOX = css` const STYLES_CHECKBOX = css`
font-family: ${Constants.font.text};
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
justify-content: space-between; justify-content: space-between;

2
components/system/components/CodeBlock.js
View File

@ -4,7 +4,7 @@ import * as Constants from "~/common/constants";
import { css } from "@emotion/react"; import { css } from "@emotion/react";
const STYLES_CODE_BLOCK = css` const STYLES_CODE_BLOCK = css`
font-family: "mono"; font-family: ${Constants.system.mono};
background-color: ${Constants.system.black}; background-color: ${Constants.system.black};
color: ${Constants.system.white}; color: ${Constants.system.white};
border-radius: 4px; border-radius: 4px;

42
components/system/components/Input.js
View File

@ -1,13 +1,14 @@
import * as React from 'react'; import * as React from "react";
import * as Constants from '~/common/constants'; import * as Constants from "~/common/constants";
import * as SVG from '~/components/system/svg'; import * as SVG from "~/components/system/svg";
import * as Strings from '~/common/strings'; import * as Strings from "~/common/strings";
import { css } from '@emotion/react'; import { css } from "@emotion/react";
import { DescriptionGroup } from '~/components/system/components/fragments/DescriptionGroup'; import { DescriptionGroup } from "~/components/system/components/fragments/DescriptionGroup";
const INPUT_STYLES = ` const INPUT_STYLES = `
font-family: ${Constants.font.text};
-webkit-appearance: none; -webkit-appearance: none;
width: 100%; width: 100%;
height: 40px; height: 40px;
@ -33,12 +34,14 @@ const STYLES_INPUT_CONTAINER = css`
const STYLES_INPUT = css` const STYLES_INPUT = css`
${INPUT_STYLES} ${INPUT_STYLES}
padding: 0 24px 0 24px; padding: 0 24px 0 24px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15), inset 0 0 0 1px ${Constants.system.darkGray}; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15),
inset 0 0 0 1px ${Constants.system.darkGray};
:focus { :focus {
outline: 0; outline: 0;
border: 0; border: 0;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.07), inset 0 0 0 2px ${Constants.system.brand}; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.07),
inset 0 0 0 2px ${Constants.system.brand};
} }
::placeholder { ::placeholder {
@ -82,7 +85,7 @@ export class Input extends React.Component {
_handleCopy = (e) => { _handleCopy = (e) => {
this._input.select(); this._input.select();
document.execCommand('copy'); document.execCommand("copy");
}; };
_handleKeyUp = (e) => { _handleKeyUp = (e) => {
@ -95,7 +98,10 @@ export class Input extends React.Component {
}; };
_handleChange = (e) => { _handleChange = (e) => {
if (!Strings.isEmpty(this.props.pattern) && !Strings.isEmpty(e.target.value)) { if (
!Strings.isEmpty(this.props.pattern) &&
!Strings.isEmpty(e.target.value)
) {
const TestRegex = new RegExp(this.props.pattern); const TestRegex = new RegExp(this.props.pattern);
if (!TestRegex.test(e.target.value)) { if (!TestRegex.test(e.target.value)) {
e.preventDefault(); e.preventDefault();
@ -116,7 +122,11 @@ export class Input extends React.Component {
render() { render() {
return ( return (
<div css={STYLES_INPUT_CONTAINER} style={this.props.containerStyle}> <div css={STYLES_INPUT_CONTAINER} style={this.props.containerStyle}>
<DescriptionGroup tooltip={this.props.tooltip} label={this.props.label} description={this.props.description} /> <DescriptionGroup
tooltip={this.props.tooltip}
label={this.props.label}
description={this.props.description}
/>
<input <input
ref={(c) => { ref={(c) => {
this._input = c; this._input = c;
@ -133,12 +143,18 @@ export class Input extends React.Component {
style={{ style={{
...this.props.style, ...this.props.style,
boxShadow: this.props.validation boxShadow: this.props.validation
? `0 1px 4px rgba(0, 0, 0, 0.07), 0 0 4px ${INPUT_COLOR_MAP[this.props.validation]}` ? `0 1px 4px rgba(0, 0, 0, 0.07), 0 0 4px ${
INPUT_COLOR_MAP[this.props.validation]
}`
: null, : null,
}} }}
/> />
{this.props.copyable ? ( {this.props.copyable ? (
<SVG.CopyAndPaste height="16px" css={STYLES_COPY_AND_PASTE} onClick={this._handleCopy} /> <SVG.CopyAndPaste
height="16px"
css={STYLES_COPY_AND_PASTE}
onClick={this._handleCopy}
/>
) : null} ) : null}
</div> </div>
); );

106
components/system/components/Notification.js
View File

@ -1,13 +1,14 @@
import * as React from 'react'; import * as React from "react";
import * as Constants from '~/common/constants'; import * as Constants from "~/common/constants";
import * as SVG from '~/components/system/svg'; import * as SVG from "~/components/system/svg";
import * as Strings from '~/common/strings'; import * as Strings from "~/common/strings";
import { css } from '@emotion/react'; import { css } from "@emotion/react";
import { DescriptionGroup } from '~/components/system/components/fragments/DescriptionGroup'; import { DescriptionGroup } from "~/components/system/components/fragments/DescriptionGroup";
const STYLES_NOTIFICATION = css` const STYLES_NOTIFICATION = css`
font-family: ${Constants.font.text};
background-color: ${Constants.system.white}; background-color: ${Constants.system.white};
border-radius: 5px; border-radius: 5px;
padding: 15px 15px 3px 15px; padding: 15px 15px 3px 15px;
@ -29,7 +30,7 @@ const STYLES_CLOSE = css`
top: 8px; top: 8px;
right: 8px; right: 8px;
cursor: pointer; cursor: pointer;
` `;
const NOTIF_COLOR_MAP = { const NOTIF_COLOR_MAP = {
SUCCESS: Constants.system.lightGreen, SUCCESS: Constants.system.lightGreen,
@ -39,48 +40,67 @@ const NOTIF_COLOR_MAP = {
}; };
const ICON_MAP = { const ICON_MAP = {
SUCCESS: <SVG.CheckCircle SUCCESS: (
css={STYLES_ICON} <SVG.CheckCircle
height="24px" css={STYLES_ICON}
style={{ height="24px"
color: `${Constants.system.green}` style={{
}} color: `${Constants.system.green}`,
/>, }}
ERROR: <SVG.XCircle />
css={STYLES_ICON} ),
height="24px" ERROR: (
style={{ <SVG.XCircle
color: `${Constants.system.red}` css={STYLES_ICON}
}} height="24px"
/>, style={{
WARNING: <SVG.AlertCircle color: `${Constants.system.red}`,
css={STYLES_ICON} }}
height="24px" />
style={{ ),
color: `${Constants.system.yellow}` WARNING: (
}} <SVG.AlertCircle
/>, css={STYLES_ICON}
INFO: <SVG.InfoCircle height="24px"
css={STYLES_ICON} style={{
height="24px" color: `${Constants.system.yellow}`,
style={{ }}
color: `${Constants.system.lightBlue}` />
}} ),
/>, INFO: (
} <SVG.InfoCircle
css={STYLES_ICON}
height="24px"
style={{
color: `${Constants.system.lightBlue}`,
}}
/>
),
};
export class Notification extends React.Component { export class Notification extends React.Component {
render() { render() {
return ( return (
<div css={STYLES_NOTIFICATION} style={{ <div
boxShadow: `0 1px 4px rgba(0, 0, 0, 0.07), 0 0 4px 1px ${NOTIF_COLOR_MAP[this.props.status || 'INFO']}` css={STYLES_NOTIFICATION}
}} style={{
boxShadow: `0 1px 4px rgba(0, 0, 0, 0.07), 0 0 4px 1px ${
NOTIF_COLOR_MAP[this.props.status || "INFO"]
}`,
}}
> >
{ICON_MAP[this.props.status || 'INFO']} {ICON_MAP[this.props.status || "INFO"]}
<DescriptionGroup tooltip={this.props.tooltip} label={this.props.label} description={this.props.description} <DescriptionGroup
style={{ marginBottom: '0' }} tooltip={this.props.tooltip}
label={this.props.label}
description={this.props.description}
style={{ marginBottom: "0" }}
/> />
{this.props.onClose ? <SVG.X css={STYLES_CLOSE} onClick={this.props.onClose}/> : <div></div>} {this.props.onClose ? (
<SVG.X css={STYLES_CLOSE} onClick={this.props.onClose} />
) : (
<div />
)}
</div> </div>
); );
} }

18
components/system/components/PopoverNavigation.js
View File

@ -1,14 +1,16 @@
import * as React from 'react'; import * as React from "react";
import * as Constants from '~/common/constants'; import * as Constants from "~/common/constants";
import { css } from '@emotion/react'; import { css } from "@emotion/react";
const STYLES_POPOVER = css` const STYLES_POPOVER = css`
font-family: ${Constants.font.text};
position: absolute; position: absolute;
width: 288px; width: 288px;
border-radius: 4px; border-radius: 4px;
background-color: ${Constants.system.white}; background-color: ${Constants.system.white};
box-shadow: inset 0 0 0 1px ${Constants.system.border}, 0 1px 4px rgba(0, 0, 0, 0.07); box-shadow: inset 0 0 0 1px ${Constants.system.border},
0 1px 4px rgba(0, 0, 0, 0.07);
`; `;
const STYLES_POPOVER_ITEM = css` const STYLES_POPOVER_ITEM = css`
@ -32,7 +34,7 @@ const STYLES_POPOVER_ITEM = css`
export class PopoverNavigation extends React.Component { export class PopoverNavigation extends React.Component {
static defaultProps = { static defaultProps = {
onNavigateTo: () => { onNavigateTo: () => {
console.error('requires onNavigateTo'); console.error("requires onNavigateTo");
}, },
}; };
@ -41,7 +43,11 @@ export class PopoverNavigation extends React.Component {
<div css={STYLES_POPOVER} style={this.props.style}> <div css={STYLES_POPOVER} style={this.props.style}>
{this.props.navigation.map((each) => { {this.props.navigation.map((each) => {
return ( return (
<div key={each.value} css={STYLES_POPOVER_ITEM} onClick={() => this.props.onNavigateTo({ id: each.value })}> <div
key={each.value}
css={STYLES_POPOVER_ITEM}
onClick={() => this.props.onNavigateTo({ id: each.value })}
>
{each.text} {each.text}
</div> </div>
); );

1
components/system/components/RadioGroup.js
View File

@ -4,6 +4,7 @@ import * as Constants from "~/common/constants";
import { css } from "@emotion/react"; import { css } from "@emotion/react";
const STYLES_RADIO = css` const STYLES_RADIO = css`
font-family: ${Constants.font.text};
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
justify-content: space-between; justify-content: space-between;

23
components/system/components/SelectMenus.js
View File

@ -1,12 +1,13 @@
import * as React from 'react'; import * as React from "react";
import * as Constants from '~/common/constants'; import * as Constants from "~/common/constants";
import * as SVG from '~/components/system/svg'; import * as SVG from "~/components/system/svg";
import { css } from '@emotion/react'; import { css } from "@emotion/react";
import { DescriptionGroup } from '~/components/system/components/fragments/DescriptionGroup'; import { DescriptionGroup } from "~/components/system/components/fragments/DescriptionGroup";
const INPUT_STYLES = ` const INPUT_STYLES = `
font-family: ${Constants.font.text};
-webkit-appearance: none; -webkit-appearance: none;
width: 100%; width: 100%;
height: 40px; height: 40px;
@ -80,7 +81,10 @@ export const SelectMenu = (props) => {
<div css={props.className ? props.className : STYLES_SELECT_MENU}> <div css={props.className ? props.className : STYLES_SELECT_MENU}>
<label css={STYLES_SELECT_MENU_LABEL} htmlFor={`id-${props.name}`}> <label css={STYLES_SELECT_MENU_LABEL} htmlFor={`id-${props.name}`}>
{props.children} {props.category ? <span css={STYLES_SELECT_MENU_CATEGORY}>{props.category}</span> : null} {props.children}{" "}
{props.category ? (
<span css={STYLES_SELECT_MENU_CATEGORY}>{props.category}</span>
) : null}
<SVG.ChevronDown height="16px" css={STYLES_SELECT_MENU_CHEVRON} /> <SVG.ChevronDown height="16px" css={STYLES_SELECT_MENU_CHEVRON} />
</label> </label>
<select <select
@ -88,7 +92,8 @@ export const SelectMenu = (props) => {
value={props.value} value={props.value}
onChange={props.onChange} onChange={props.onChange}
name={props.name} name={props.name}
id={`id-${props.name}`}> id={`id-${props.name}`}
>
{props.options.map((each) => { {props.options.map((each) => {
return ( return (
<option value={each.value} key={each.value}> <option value={each.value} key={each.value}>
@ -102,4 +107,6 @@ export const SelectMenu = (props) => {
); );
}; };
export const SelectMenuFull = (props) => <SelectMenu {...props} css={STYLES_SELECT_MENU_FULL} />; export const SelectMenuFull = (props) => (
<SelectMenu {...props} css={STYLES_SELECT_MENU_FULL} />
);

1
components/system/components/StatCard.js
View File

@ -7,6 +7,7 @@ import { LineChart } from "~/vendor/react-chartkick";
import "chart.js"; import "chart.js";
const STYLES_STAT_CARD = css` const STYLES_STAT_CARD = css`
font-family: ${Constants.font.text};
width: 100%; width: 100%;
box-shadow: 0 0 0 1px ${Constants.system.gray}, 0 1px 4px rgba(0, 0, 0, 0.04); box-shadow: 0 0 0 1px ${Constants.system.gray}, 0 1px 4px rgba(0, 0, 0, 0.04);
border-radius: 4px; border-radius: 4px;

1
components/system/components/TabGroup.js
View File

@ -4,6 +4,7 @@ import * as Constants from "~/common/constants";
import { css } from "@emotion/react"; import { css } from "@emotion/react";
const STYLES_TAB_GROUP = css` const STYLES_TAB_GROUP = css`
font-family: ${Constants.font.text};
width: 100%; width: 100%;
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;

1
components/system/components/Table.js
View File

@ -18,6 +18,7 @@ const TABLE_COLUMN_WIDTH_DEFAULTS = {
}; };
const STYLES_TABLE_PLACEHOLDER = css` const STYLES_TABLE_PLACEHOLDER = css`
font-family: ${Constants.font.text};
display: block; display: block;
width: 100%; width: 100%;
padding: 20px; padding: 20px;

12
components/system/components/Textarea.js
View File

@ -1,11 +1,12 @@
import * as React from 'react'; import * as React from "react";
import * as Constants from '~/common/constants'; import * as Constants from "~/common/constants";
import { css } from '@emotion/react'; import { css } from "@emotion/react";
import TextareaAutoSize from '~/vendor/react-textarea-autosize'; import TextareaAutoSize from "~/vendor/react-textarea-autosize";
const STYLES_TEXTAREA = css` const STYLES_TEXTAREA = css`
font-family: ${Constants.font.text};
-webkit-appearance: none; -webkit-appearance: none;
width: 100%; width: 100%;
min-height: 160px; min-height: 160px;
@ -23,7 +24,8 @@ const STYLES_TEXTAREA = css`
box-sizing: border-box; box-sizing: border-box;
transition: 200ms ease all; transition: 200ms ease all;
padding: 16px 24px 16px 24px; padding: 16px 24px 16px 24px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15), inset 0 0 0 1px ${Constants.system.darkGray}; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15),
inset 0 0 0 1px ${Constants.system.darkGray};
`; `;
export class Textarea extends React.Component { export class Textarea extends React.Component {

15
components/system/components/Toggle.js
View File

@ -1,9 +1,10 @@
import * as React from 'react'; import * as React from "react";
import * as Constants from '~/common/constants'; import * as Constants from "~/common/constants";
import { css } from '@emotion/react'; import { css } from "@emotion/react";
const STYLES_TOGGLE = css` const STYLES_TOGGLE = css`
font-family: ${Constants.font.text};
display: inline-flex; display: inline-flex;
height: 40px; height: 40px;
border-radius: 40px; border-radius: 40px;
@ -40,8 +41,12 @@ export class Toggle extends React.Component {
onClick={this._handleChange} onClick={this._handleChange}
style={{ style={{
backgroundColor: this.props.active ? Constants.system.brand : null, backgroundColor: this.props.active ? Constants.system.brand : null,
}}> }}
<figure css={STYLES_DIAL} style={{ transform: this.props.active ? `translateX(40px)` : null }} /> >
<figure
css={STYLES_DIAL}
style={{ transform: this.props.active ? `translateX(40px)` : null }}
/>
</div> </div>
); );
} }

1
components/system/components/Typography.js
View File

@ -67,6 +67,7 @@ export const H2 = (props) => {
}; };
const STYLES_P = css` const STYLES_P = css`
font-family: ${Constants.font.text};
font-size: ${Constants.typescale.lvl1}; font-size: ${Constants.typescale.lvl1};
line-height: 1.5; line-height: 1.5;