Spearhead/joyent-portal
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

fix(ui-toolkit): fix small bugs

Browse Source
This commit is contained in:
Sara Vieira 2017-12-18 11:25:50 +00:00 committed by Sérgio Ramos
parent 882cb68ec2
commit d0769903a3
12 changed files with 35 additions and 126 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
packages/ui-toolkit/etc/joyent-white.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 47 KiB

102
packages/ui-toolkit/etc/style.css
View File

@ -1,102 +0,0 @@
@import url('https://fonts.googleapis.com/css?family=Roboto+Mono');
@import url('https://fonts.googleapis.com/css?family=Libre+Franklin');
body {
overflow-x: hidden;
}
body .rsg--sidebar-4 {
padding: 36px 30px;
}
body h1.rsg--root-10, h2.rsg--root-10, h3.rsg--root-10, h3.rsg--para-24 {
margin-bottom: 0;
padding-bottom: 24px;
}
main.rsg--content-3 {
padding-top: 60px;
max-width: 1400px;
}
h4.rsg--h4-29,
h6.rsg--h6-31 {
margin-bottom: 0;
font-weight: 600;
padding-bottom: 12px;
}
li.rsg--li-35 {
padding-bottom: 6px;
}
p.rsg--p-32 {
margin-bottom: 0;
padding-bottom: 36px;
}
.rsg--sidebar-4 a.rsg--link-48 {
color: #fff;
font-size: 15px;
}
.rsg--sidebar-4 a.rsg--heading-71 {
font-size: 17px;
margin-bottom: 12px;
display: block;
}
.rsg--sidebar-4 .rsg--logo-5 {
border: none;
padding: 0;
}
.rsg--sidebar-4 .rsg--search-66 {
padding: 30px 0;
}
.rsg--sidebar-4 .rsg--isChild-70 {
padding-left: 16px;
}
.rsg--sidebar-4 .rsg--input-67 {
background: #FFFFFF;
border: 1px solid #D8D8D8;
box-sizing: border-box;
box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.05), inset 0px 3px 0px rgba(0, 0, 0, 0.05);
border-radius: 4px;
box-shadow: none;
padding: 8px 16px;
width: 240px;
color: #494949;
height: 48px;
}
.rsg--sidebar-4 .rsg--list-68 {
padding: 0;
}
.rsg--sidebar-4 ::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color: #494949;
opacity: 0.5;
}
.rsg--sidebar-4 ::-moz-placeholder { /* Firefox 19+ */
color: #494949;
opacity: 0.5;
}
.rsg--sidebar-4 :-ms-input-placeholder { /* IE 10+ */
color: #494949;
opacity: 0.5;
}
.rsg--sidebar-4 :-moz-placeholder { /* Firefox 18- */
color: #494949;
opacity: 0.5;
}
body .cm-s-base16-light.CodeMirror {
background: #fafafa;
color: #494949;
border-color: #d8d8d8;
padding: 9px 18px;
line-height: 16px;
}

11
packages/ui-toolkit/package.json
View File

@ -7,17 +7,20 @@
"jsnext:main": "dist/es/index.js",
"module": "dist/es/index.js",
"scripts": {
"lint-ci": "eslint . --ext .js --ext .md && echo 0 `# stylelint './src/**/*.js'`",
"lint": "eslint . --fix --ext .js --ext .md && echo 0 `# stylelint './src/**/*.js'`",
"lint-ci":
"eslint . --ext .js --ext .md && echo 0 `# stylelint './src/**/*.js'`",
"lint":
"eslint . --fix --ext .js --ext .md && echo 0 `# stylelint './src/**/*.js'`",
"test-ci": "echo 0",
"test": "echo 0",
"test:visual": "run-p serve jest",
"jest": "jest",
"serve": "http-server styleguide -p 6060 -s",
"compile:es": "babel src --out-dir dist/es",
"compile:es": "NODE_ENV='production' babel src --out-dir dist/es",
"compile:umd": "UMD=1 babel src --out-dir dist/umd",
"compile": "redrun -p compile:*",
"dev": "NODE_ENV=development npm run compile -- -- --watch --source-maps inline",
"dev":
"NODE_ENV=development npm run compile -- -- --watch --source-maps inline",
"styleguide:build": "NODE_ENV=production styleguidist build",
"styleguide": "NODE_ENV=development styleguidist server",
"prepublish": "NODE_ENV=production npm run compile"

2
packages/ui-toolkit/src/message/Readme.md
View File

@ -11,7 +11,7 @@ const { Message, Title, Description } = require('.');
sure that you choose the data center that suits your requirements. Learn
more
</Description>
</Message>;
</Message>
```
#### Error

2
packages/ui-toolkit/src/message/index.js
View File

@ -43,7 +43,7 @@ const Outlet = styled.div`
const Close = styled(CloseButton)`
position: absolute;
right: ${unitcalc(0.5)};
top: ${unitcalc(0.5)};
margin: 0;
`;
export const Message = ({ onCloseClick, children, ...type }) => (

2
packages/ui-toolkit/src/popover/Readme.md
View File

@ -3,7 +3,7 @@ const React = require('react');
const { default: Popover, Container, Target, Item, Divider } = require('./');
const { Row, Col } = require('react-styled-flexboxgrid');
<Row center="xs" between="xs">
<Row center="xs" between="xs" style={{marginTop: 80}}>
<Col xs={2}>
<Container>
<Target>Hello</Target>

18
packages/ui-toolkit/src/popover/item.js
View File

@ -1,20 +1,16 @@
import React, { Component } from 'react';
import remcalc from 'remcalc';
import is, { isNot } from 'styled-is';
import PropTypes from 'prop-types';
import { H4 as BaseH4 } from '../text/headings';
import styled from 'styled-components';
import remcalc from 'remcalc';
import Baseline from '../baseline';
const BaseItem = BaseH4.extend`
font-size: ${remcalc(16)};
text-align: left;
const BaseItem = styled.span`
display: block;
font-style: normal;
font-weight: normal;
line-height: normal;
color: ${props => props.theme.secondary};
&:not(:last-child) {
margin-bottom: ${remcalc(12)};
}
${isNot('disabled')`
cursor: pointer;

2
packages/ui-toolkit/src/styleguide/component.js
View File

@ -19,7 +19,7 @@ const Header = styled.header`
const Main = styled.div`
padding: ${remcalc(50)} ${remcalc(120)};
h4 {
h4[class*='rsg--heading'] {
margin: 0;
line-height: ${remcalc(26)};
font-size: ${remcalc(21)};

2
packages/ui-toolkit/src/styleguide/section.js
View File

@ -33,7 +33,7 @@ export default allProps => {
const Tag = depth === 2 ? CardStyled : 'div';
const TagMain = depth === 2 ? Main : 'div';
return (
<Tag>
<Tag id={name.replace(/\s+/g, '-').toLowerCase()}>
{name &&
depth !== 1 && (
<Header>

15
packages/ui-toolkit/src/styleguide/wrapper.js
View File

@ -1,11 +1,24 @@
import React from 'react';
import { ThemeProvider } from 'styled-components';
import { ThemeProvider, injectGlobal } from 'styled-components';
import theme from '../theme';
import Base from '../base';
import { RootContainer } from '../layout';
import 'codemirror/mode/jsx/jsx';
injectGlobal`
@import url('https://fonts.googleapis.com/css?family=Roboto+Mono');
@import url('https://fonts.googleapis.com/css?family=Libre+Franklin');
button {
cursor: pointer;
}
code, .CodeMirror-line * {
font-family: 'Roboto Mono';
}
`;
const StyledBase = Base.extend`
/* trick prettier */
background-color: transparent;

4
packages/ui-toolkit/src/tooltip/Readme.md
View File

@ -3,7 +3,7 @@ const React = require('react');
const { default: Tooltip, Container, Target } = require('./');
const { Row, Col } = require('react-styled-flexboxgrid');
<Row center="xs" between="xs">
<Row center="xs" between="xs" style={{marginTop: 60}}>
<Col xs={2}>
<Container>
<Target>Hello</Target>
@ -47,7 +47,7 @@ const { default: Tooltip, Container, Target } = require('./');
const { Row, Col } = require('react-styled-flexboxgrid');
<Row center="xs" between="xs">
<Col xs={2}>
<Col xs={3}>
<Container hoverable>
<Target>Hover here</Target>
<Tooltip placement="top">

1
packages/ui-toolkit/styleguide.config.js
View File

@ -10,7 +10,6 @@ const path = require('path');
module.exports = {
highlightTheme: 'base16-light',
require: [path.join(__dirname, 'etc/style.css')],
webpackConfig: Object.assign(webpackConfig, {
resolve: Object.assign(webpackConfig.resolve, {
alias: Object.assign(webpackConfig.resolve.alias, {