diff --git a/packages/ui-toolkit/etc/joyent-white.png b/packages/ui-toolkit/etc/joyent-white.png new file mode 100644 index 00000000..7dcb0232 Binary files /dev/null and b/packages/ui-toolkit/etc/joyent-white.png differ diff --git a/packages/ui-toolkit/src/anchor/usage.md b/packages/ui-toolkit/src/anchor/usage.md deleted file mode 100644 index a7517b84..00000000 --- a/packages/ui-toolkit/src/anchor/usage.md +++ /dev/null @@ -1,15 +0,0 @@ -``` -Inspire the lazy -``` - -``` - - Inspire the lazy secondary - -``` - -``` - - Inspire the lazy disabled - -``` diff --git a/packages/ui-toolkit/src/baseline/readme.md b/packages/ui-toolkit/src/baseline/readme.md index a1bccac2..248b9e91 100644 --- a/packages/ui-toolkit/src/baseline/readme.md +++ b/packages/ui-toolkit/src/baseline/readme.md @@ -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) => ( diff --git a/packages/ui-toolkit/src/contribute.md b/packages/ui-toolkit/src/contribute.md new file mode 100644 index 00000000..d10c40e5 --- /dev/null +++ b/packages/ui-toolkit/src/contribute.md @@ -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 😀 \ No newline at end of file diff --git a/packages/ui-toolkit/src/download.md b/packages/ui-toolkit/src/download.md new file mode 100644 index 00000000..eadc2157 --- /dev/null +++ b/packages/ui-toolkit/src/download.md @@ -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 () => ( +

Hello World

+); +``` + +#### Demo + +```bash static +yarn styleguide +``` + +open http://0.0.0.0:6060 \ No newline at end of file diff --git a/packages/ui-toolkit/src/faq.md b/packages/ui-toolkit/src/faq.md index e69de29b..695e5330 100644 --- a/packages/ui-toolkit/src/faq.md +++ b/packages/ui-toolkit/src/faq.md @@ -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)) \ No newline at end of file diff --git a/packages/ui-toolkit/src/file-structure.md b/packages/ui-toolkit/src/file-structure.md new file mode 100644 index 00000000..e69de29b diff --git a/packages/ui-toolkit/src/form/base/toggle.js b/packages/ui-toolkit/src/form/base/toggle.js index e9015575..bb27d0a6 100644 --- a/packages/ui-toolkit/src/form/base/toggle.js +++ b/packages/ui-toolkit/src/form/base/toggle.js @@ -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'; diff --git a/packages/ui-toolkit/src/overview.md b/packages/ui-toolkit/src/overview.md new file mode 100644 index 00000000..e92185cc --- /dev/null +++ b/packages/ui-toolkit/src/overview.md @@ -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. \ No newline at end of file diff --git a/packages/ui-toolkit/src/purpose.md b/packages/ui-toolkit/src/purpose.md new file mode 100644 index 00000000..41b1eb04 --- /dev/null +++ b/packages/ui-toolkit/src/purpose.md @@ -0,0 +1 @@ +well me and yalli really like styleguides \ No newline at end of file diff --git a/packages/ui-toolkit/src/support.md b/packages/ui-toolkit/src/support.md new file mode 100644 index 00000000..c19334d2 --- /dev/null +++ b/packages/ui-toolkit/src/support.md @@ -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 \ No newline at end of file diff --git a/packages/ui-toolkit/src/text/Readme.md b/packages/ui-toolkit/src/text/Readme.md new file mode 100644 index 00000000..3c8b68ba --- /dev/null +++ b/packages/ui-toolkit/src/text/Readme.md @@ -0,0 +1,82 @@ +### Headings +The HTML `

–

` elements represent six levels of section headings.

is the highest section level and `

` 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 `

`, next use `

` and so on. +You should consider avoiding using `

` more than once on a page. + +#### Heading 1 +```jsx +const H1 = require('/').H1; +

Inspire the lazy

+``` +#### Heading 2 +```jsx +const H2 = require('/').H2; +

Inspire the lazy

+``` +#### Heading 3 +```jsx +const H3 = require('/').H3; +

Inspire the lazy

+``` +#### Heading 4 +```jsx +const H4 = require('/').H4; +

Inspire the lazy

+``` +### Paragraph + +The HTML `

` 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; +

Joyent experts provide 360 degree support for modern application architectures, including development frameworks, container orchestration tools, and hybrid cloud infrastructures.

+``` + +### Small + +The HTML `` 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; + +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. + +``` + +### Label + +The HTML `