feat(ui-toolkit): typography and getting started

This commit is contained in:
Sara Vieira 2017-09-26 12:12:15 +01:00 committed by Sérgio Ramos
parent d9ea30bbfb
commit be4190d8cb
19 changed files with 300 additions and 56 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 47 KiB

View File

@ -1,15 +0,0 @@
```
<Anchor>Inspire the lazy</Anchor>
```
```
<span style={{'background-color': '#343434'}}>
<Anchor secondary>Inspire the lazy secondary</Anchor>
</span>
```
```
<span>
<Anchor secondary disabled>Inspire the lazy disabled</Anchor>
</span>
```

View File

@ -38,7 +38,7 @@ List of supported props:
To use this composer, you just do it as you would with any other HOC:
```js
```js static
// component implementation
const Button = (props) => (
<button>my button</button>

View File

@ -0,0 +1,5 @@
First of all we always looking for ways to improve this toolkit so if you want to contribute that would be amazing.
All of this is open source and can be found [here](https://github.com/yldio/joyent-portal/tree/master/packages/ui-toolkit).
Any problems you find or something you want to add please add a pull request 😀

View File

@ -0,0 +1,28 @@
The code can be found in:
* [Github](https://github.com/yldio/joyent-portal/tree/master/packages/ui-toolkit)
* [NPM](https://www.npmjs.com/package/joyent-ui-toolkit)
#### Install
```bash static
yarn add joyent-portal-ui-toolkit
```
#### Usage
```js static
import { H1 } from 'joyent-portal-ui-toolkit'
export default () => (
<H1>Hello World</H1>
);
```
#### Demo
```bash static
yarn styleguide
```
open http://0.0.0.0:6060

View File

@ -0,0 +1,8 @@
### What was used to build this ?
The components in this page were built using [React](https://facebook.github.io/react/) and [Styled Components](http://styled-components.com).
### What is the license ?
The licence used for this project is Mozilla Public License 2.0 (MPL-2.0).
You can read more [here](https://tldrlegal.com/license/mozilla-public-license-2.0-(mpl-2))

View File

@ -2,10 +2,9 @@ import React from 'react';
import styled from 'styled-components';
import { Input } from 'normalized-styled-components';
import { Broadcast, Subscriber } from 'react-broadcast';
import { insetShaddow, border, borderRadius } from '../../boxes';
import { border, borderRadius } from '../../boxes';
import BaseInput from './input';
import remcalc from 'remcalc';
import unitcalc from 'unitcalc';
import is from 'styled-is';
import rndId from 'rnd-id';

View File

@ -0,0 +1,5 @@
Welcome !
This page is dedicated to the UI Toolkit used by the [Joyent Team](https://www.joyent.com/) for their new products.
All you see in this page is Open Source and can be used freely.

View File

@ -0,0 +1 @@
well me and yalli really like styleguides

View File

@ -0,0 +1 @@
We do offer basic support if you find any problems with any of the components, you can create an issue [here](https://github.com/yldio/joyent-portal/tree/master/packages/ui-toolkit) and we will get back to you as soon as you can

View File

@ -0,0 +1,82 @@
### Headings
The HTML `<h1><h6>` elements represent six levels of section headings. <h1> is the highest section level and `<h6>` is the lowest.
###### Usage Notes
* Heading information may be used by user agents, for example, to construct a table of contents for a document automatically.
* Do not use lower levels to decrease heading font size: use the CSS font-size property instead.
* Avoid skipping heading levels: always start from `<h1>`, next use `<h2>` and so on.
You should consider avoiding using `<h1>` more than once on a page.
#### Heading 1
```jsx
const H1 = require('/').H1;
<H1>Inspire the lazy</H1>
```
#### Heading 2
```jsx
const H2 = require('/').H2;
<H2>Inspire the lazy</H2>
```
#### Heading 3
```jsx
const H3 = require('/').H3;
<H3>Inspire the lazy</H3>
```
#### Heading 4
```jsx
const H4 = require('/').H4;
<H4>Inspire the lazy</H4>
```
### Paragraph
The HTML `<p>` element represents a paragraph of text. Paragraphs are usually represented in visual media as blocks of text that are separated from adjacent blocks by vertical blank space and/or first-line indentation. Paragraphs are block-level elements.
```jsx
const P = require('/').P;
<P>Joyent experts provide 360 degree support for modern application architectures, including development frameworks, container orchestration tools, and hybrid cloud infrastructures.</P>
```
### Small
The HTML `<small>` element makes the text font size one size smaller (for example, from large to medium, or from small to x-small) down to the browser's minimum font size. In HTML5, this element is repurposed to represent side-comments and small print, including copyright and legal text, independent of its styled presentation.
```jsx
const Small = require('/').Small;
<Small>
Triton is 100% open source and designed to eliminate cloud provider lock-in. With support for popular container management tools like Kubernetes, augmented by our own open source project ContainerPilot, we are working with the community to deliver simple to operate platform services that are open and portable.
</Small>
```
### Label
The HTML `<label>` element represents a caption for an item in a user interface.
```jsx
const Label = require('/').Label;
<Label>
Hybrid, Modern and Open, Triton is engineered to run the worlds largest cloud native applications
</Label>
```
### Links
The HTML `<a>` element (or anchor element) creates a hyperlink to other web pages, files, locations within the same page, email addresses, or any other URL.
This is called `Anchor` because of how React Router calls routing links `Link`
#### Primary
```
const Anchor = require('/').Anchor;
<Anchor>Inspire the lazy</Anchor>
```
#### Secondary
```
const Anchor = require('/').Anchor;
<span style={{'background-color': '#343434'}}>
<Anchor secondary>Inspire the lazy secondary</Anchor>
</span>
```
#### Disabled
```
const Anchor = require('/').Anchor;
<Anchor secondary disabled>Inspire the lazy disabled</Anchor>
```

View File

@ -4,25 +4,88 @@ import remcalc from 'remcalc';
import typography from '../typography';
export const H1 = NH1.extend`
margin: 0;
${typography.color};
${typography.fontFamily};
${typography.medium};
${typography.normal};
font-size: ${remcalc(36)};
line-height: ${remcalc(45)};
font-style: normal;
font-stretch: normal;
margin: 0;
+ p,
+ small,
+ h1,
+ h2,
+ label.
+ h3,
+ h4,
+ h5,
+ div {
margin-top: ${remcalc(24)};
}
`;
export const H2 = styled.h2`
margin: 0;
${typography.color};
${typography.fontFamily};
${typography.medium};
${typography.normal};
line-height: ${remcalc(30)};
font-size: ${remcalc(24)};
+ p,
+ small,
+ h1,
+ h2,
+ label.
+ h3,
+ h4,
+ h5,
+ div {
margin-top: ${remcalc(24)};
}
`;
export const H3 = styled.h3`
margin: 0;
${typography.color};
${typography.fontFamily};
${typography.medium};
${typography.normal};
line-height: ${remcalc(26)};
font-size: ${remcalc(21)};
font-size: ${remcalc(15)};
+ p,
+ small,
+ h1,
+ h2,
+ label.
+ h3,
+ h4,
+ h5,
+ div {
margin-top: ${remcalc(24)};
}
`;
export const H4 = styled.h3`
margin: 0;
${typography.color};
${typography.fontFamily};
${typography.semibold};
line-height: ${remcalc(24)};
font-size: ${remcalc(15)};
+ p,
+ small,
+ h1,
+ h2,
+ label.
+ h3,
+ h4,
+ h5,
+ div {
margin-top: ${remcalc(12)};
}
`;

View File

@ -0,0 +1,5 @@
export { H1, H2, H3, H4 } from './headings';
export { default as P } from './p';
export { default as Small } from './small';
export { default as Label } from '../label';
export { default as Anchor } from '../anchor';

View File

@ -5,7 +5,9 @@ import remcalc from 'remcalc';
export default styled.p`
${typography.fontFamily};
${typography.normal};
${typography.color};
line-height: ${remcalc(24)};
font-size: ${remcalc(15)};
padding-bottom: ${remcalc(36)};
`;

View File

@ -5,7 +5,9 @@ import typography from '../typography';
export default Small.extend`
${typography.fontFamily};
${typography.normal};
${typography.color};
line-height: ${remcalc(18)};
font-size: ${remcalc(14)};
font-size: ${remcalc(13)};
padding-bottom: ${remcalc(12)};
`;

View File

@ -1,4 +1,4 @@
```
```js noeditor
const Colors = require('./colors').default;
<Colors />

View File

@ -1,4 +1,5 @@
import { css } from 'styled-components';
import theme from '../theme'
export const fontFamily = css`
font-family:
@ -14,6 +15,8 @@ export const fontFamily = css`
sans-serif;
`;
export const color = theme.text;
export const semibold = css`
font-weight: 600;
`;

View File

@ -4,7 +4,7 @@ const dnHandler = require('react-docgen-displayname-handler');
const snapguidist = require('snapguidist');
const path = require('path');
module.exports = snapguidist({
module.exports = {
webpackConfig: Object.assign(webpackConfig, {
resolve: Object.assign(webpackConfig.resolve, {
alias: Object.assign(webpackConfig.resolve.alias, {
@ -28,31 +28,59 @@ module.exports = snapguidist({
}),
title: 'UI Toolkit',
sections: [
// {
// name: 'Getting Started',
// content: 'src/getting-started.md'
// },
// {
// name: 'Guidelines',
// sections: [
// {
// name: 'Overview',
// content: 'src/guidelines/overview.md'
// },
// {
// name: 'Layout',
// content: 'src/guidelines/layout.md'
// }
// ]
// },
{
name: 'Theme',
name: 'Get Started',
sections: [
{
name: 'Overview',
content: 'src/overview.md'
},
{
name: 'Purpose',
content: 'src/purpose.md'
},
{
name: 'FAQ',
content: 'src/faq.md'
},
{
name: 'Support',
content: 'src/support.md'
},
{
name: 'File Structure',
content: 'src/file-structure.md'
},
{
name: 'Download',
content: 'src/download.md'
},
{
name: 'Contribute',
content: 'src/contribute.md'
}
]
},
{
name: 'Base',
sections: [
{
name: 'Typography',
content: 'src/text/Readme.md'
},
{
name: 'Baseline',
content: 'src/baseline/readme.md'
},
{
name: 'Colours',
content: 'src/theme/colors.md'
}
]
},
{
name: 'Components',
components: () => [
'src/anchor/index.js',
'src/button/index.js',
'src/breadcrumb/index.js',
'src/card/card.js',
@ -73,16 +101,43 @@ module.exports = snapguidist({
'src/message/index.js',
'src/slider/index.js'
]
},
{
name: 'Baseline',
content: 'src/baseline/readme.md'
}
// {
// name: 'F.A.Q.',
// content: 'src/faq.md'
// }
],
theme: {
color: {
base: '#494949',
link: '#3B46CC',
linkHover: '#5a62c5'
},
fontSize: {
base: 15,
text: 15,
small: 13,
h1: 36,
h2: 30,
h3: 26,
h4: 15,
h5: 14,
h6: 12
},
fontFamily: {
base: '"Libre Franklin", -apple-system, cursive'
}
},
styles: {
Logo: {
logo: {
'text-indent': -999,
'background-image': 'url("./etc/joyent-white.png")',
'background-size': 'cover',
width: 180,
'background-position': 0,
height: 39,
padding: 0,
margin: 0
}
}
},
handlers: componentPath =>
defaultHandlers.concat(dnHandler.createDisplayNameHandler(componentPath))
});
};