mirror of
https://github.com/zhigang1992/docz.git
synced 2026-04-30 02:56:10 +08:00
chore: move css examples to a new repository
This commit is contained in:
Pedro Nauck
@@ -1,326 +0,0 @@
|
||||
# Change Log
|
||||
|
||||
All notable changes to this project will be documented in this file.
|
||||
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
||||
|
||||
<a name="0.11.0"></a>
|
||||
# [0.11.0](https://github.com/pedronauck/docz/compare/v0.10.3...v0.11.0) (2018-09-02)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* **docz:** move docz/docz-core to dev dependency on examples ([e7153a4](https://github.com/pedronauck/docz/commit/e7153a4))
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a name="0.10.3"></a>
|
||||
## [0.10.3](https://github.com/pedronauck/docz/compare/v0.9.6...v0.10.3) (2018-08-16)
|
||||
|
||||
|
||||
|
||||
|
||||
**Note:** Version bump only for package docz-example-css-less
|
||||
|
||||
<a name="0.10.2"></a>
|
||||
## [0.10.2](https://github.com/pedronauck/docz/compare/v0.10.1...v0.10.2) (2018-08-13)
|
||||
|
||||
|
||||
|
||||
|
||||
**Note:** Version bump only for package docz-example-css-less
|
||||
|
||||
<a name="0.10.1"></a>
|
||||
## [0.10.1](https://github.com/pedronauck/docz/compare/v0.10.0...v0.10.1) (2018-08-13)
|
||||
|
||||
|
||||
|
||||
|
||||
**Note:** Version bump only for package docz-example-css-less
|
||||
|
||||
<a name="0.10.0"></a>
|
||||
# [0.10.0](https://github.com/pedronauck/docz/compare/v0.9.6...v0.10.0) (2018-08-13)
|
||||
|
||||
|
||||
|
||||
|
||||
**Note:** Version bump only for package docz-example-css-less
|
||||
|
||||
<a name="0.9.6"></a>
|
||||
## [0.9.6](https://github.com/pedronauck/docz/compare/v0.9.5...v0.9.6) (2018-08-06)
|
||||
|
||||
|
||||
|
||||
|
||||
**Note:** Version bump only for package docz-example-css-less
|
||||
|
||||
<a name="0.9.5"></a>
|
||||
## [0.9.5](https://github.com/pedronauck/docz/compare/v0.9.4...v0.9.5) (2018-08-04)
|
||||
|
||||
|
||||
|
||||
|
||||
**Note:** Version bump only for package docz-example-css-less
|
||||
|
||||
<a name="0.9.4"></a>
|
||||
## [0.9.4](https://github.com/pedronauck/docz/compare/v0.9.4-beta.1...v0.9.4) (2018-08-04)
|
||||
|
||||
|
||||
|
||||
|
||||
**Note:** Version bump only for package docz-example-css-less
|
||||
|
||||
<a name="0.9.3"></a>
|
||||
## [0.9.3](https://github.com/pedronauck/docz/compare/v0.9.2...v0.9.3) (2018-08-03)
|
||||
|
||||
|
||||
|
||||
|
||||
**Note:** Version bump only for package docz-example-css-less
|
||||
|
||||
<a name="0.9.2"></a>
|
||||
## [0.9.2](https://github.com/pedronauck/docz/compare/v0.9.1...v0.9.2) (2018-08-02)
|
||||
|
||||
|
||||
|
||||
|
||||
**Note:** Version bump only for package docz-example-css-less
|
||||
|
||||
<a name="0.9.1"></a>
|
||||
## [0.9.1](https://github.com/pedronauck/docz/compare/v0.9.0...v0.9.1) (2018-08-02)
|
||||
|
||||
|
||||
|
||||
|
||||
**Note:** Version bump only for package docz-example-css-less
|
||||
|
||||
<a name="0.9.0"></a>
|
||||
# [0.9.0](https://github.com/pedronauck/docz/compare/v0.9.0-beta.1...v0.9.0) (2018-08-02)
|
||||
|
||||
|
||||
|
||||
|
||||
**Note:** Version bump only for package docz-example-css-less
|
||||
|
||||
<a name="0.9.0-beta.1"></a>
|
||||
# [0.9.0-beta.1](https://github.com/pedronauck/docz/compare/v0.9.0-beta.0...v0.9.0-beta.1) (2018-08-01)
|
||||
|
||||
|
||||
|
||||
|
||||
**Note:** Version bump only for package docz-example-css-less
|
||||
|
||||
<a name="0.9.0-beta.0"></a>
|
||||
# [0.9.0-beta.0](https://github.com/pedronauck/docz/compare/v0.8.0...v0.9.0-beta.0) (2018-08-01)
|
||||
|
||||
|
||||
|
||||
|
||||
**Note:** Version bump only for package docz-example-css-less
|
||||
|
||||
<a name="0.8.0"></a>
|
||||
# [0.8.0](https://github.com/pedronauck/docz/compare/v0.7.1...v0.8.0) (2018-07-28)
|
||||
|
||||
|
||||
|
||||
|
||||
**Note:** Version bump only for package docz-example-css-less
|
||||
|
||||
<a name="0.7.1"></a>
|
||||
## [0.7.1](https://github.com/pedronauck/docz/compare/v0.7.0...v0.7.1) (2018-07-24)
|
||||
|
||||
|
||||
|
||||
|
||||
**Note:** Version bump only for package docz-example-css-less
|
||||
|
||||
<a name="0.7.0"></a>
|
||||
# [0.7.0](https://github.com/pedronauck/docz/compare/v0.6.2...v0.7.0) (2018-07-23)
|
||||
|
||||
|
||||
|
||||
|
||||
**Note:** Version bump only for package docz-example-css-less
|
||||
|
||||
<a name="0.6.2"></a>
|
||||
## [0.6.2](https://github.com/pedronauck/docz/compare/v0.6.1...v0.6.2) (2018-07-20)
|
||||
|
||||
|
||||
|
||||
|
||||
**Note:** Version bump only for package docz-example-css-less
|
||||
|
||||
<a name="0.6.1"></a>
|
||||
## [0.6.1](https://github.com/pedronauck/docz/compare/v0.6.0...v0.6.1) (2018-07-19)
|
||||
|
||||
|
||||
|
||||
|
||||
**Note:** Version bump only for package docz-example-css-less
|
||||
|
||||
<a name="0.6.0"></a>
|
||||
# [0.6.0](https://github.com/pedronauck/docz/compare/v0.5.9...v0.6.0) (2018-07-19)
|
||||
|
||||
|
||||
|
||||
|
||||
**Note:** Version bump only for package docz-example-css-less
|
||||
|
||||
<a name="0.5.9"></a>
|
||||
## [0.5.9](https://github.com/pedronauck/docz/compare/v0.5.8...v0.5.9) (2018-07-16)
|
||||
|
||||
|
||||
|
||||
|
||||
**Note:** Version bump only for package docz-example-css-less
|
||||
|
||||
<a name="0.5.8"></a>
|
||||
## [0.5.8](https://github.com/pedronauck/docz/compare/v0.5.7...v0.5.8) (2018-07-11)
|
||||
|
||||
|
||||
|
||||
|
||||
**Note:** Version bump only for package docz-example-css-less
|
||||
|
||||
<a name="0.5.7"></a>
|
||||
## [0.5.7](https://github.com/pedronauck/docz/compare/v0.5.6...v0.5.7) (2018-07-11)
|
||||
|
||||
|
||||
|
||||
|
||||
**Note:** Version bump only for package docz-example-css-less
|
||||
|
||||
<a name="0.5.6"></a>
|
||||
## [0.5.6](https://github.com/pedronauck/docz/compare/v0.5.5...v0.5.6) (2018-07-11)
|
||||
|
||||
|
||||
|
||||
|
||||
**Note:** Version bump only for package docz-example-css-less
|
||||
|
||||
<a name="0.5.5"></a>
|
||||
## [0.5.5](https://github.com/pedronauck/docz/compare/v0.5.4...v0.5.5) (2018-07-07)
|
||||
|
||||
|
||||
|
||||
|
||||
**Note:** Version bump only for package docz-example-css-less
|
||||
|
||||
<a name="0.5.4"></a>
|
||||
## [0.5.4](https://github.com/pedronauck/docz/compare/v0.5.3...v0.5.4) (2018-07-07)
|
||||
|
||||
|
||||
|
||||
|
||||
**Note:** Version bump only for package docz-example-css-less
|
||||
|
||||
<a name="0.5.3"></a>
|
||||
## [0.5.3](https://github.com/pedronauck/docz/compare/v0.5.2...v0.5.3) (2018-07-05)
|
||||
|
||||
|
||||
|
||||
|
||||
**Note:** Version bump only for package docz-example-css-less
|
||||
|
||||
<a name="0.5.2"></a>
|
||||
## [0.5.2](https://github.com/pedronauck/docz/compare/v0.5.1...v0.5.2) (2018-07-05)
|
||||
|
||||
|
||||
|
||||
|
||||
**Note:** Version bump only for package docz-example-css-less
|
||||
|
||||
<a name="0.5.1"></a>
|
||||
## [0.5.1](https://github.com/pedronauck/docz/compare/v0.3.4...v0.5.1) (2018-07-03)
|
||||
|
||||
|
||||
|
||||
|
||||
**Note:** Version bump only for package docz-example-css-less
|
||||
|
||||
<a name="0.5.0"></a>
|
||||
# [0.5.0](https://github.com/pedronauck/docz/compare/v0.3.4...v0.5.0) (2018-07-03)
|
||||
|
||||
|
||||
|
||||
|
||||
**Note:** Version bump only for package docz-example-css-less
|
||||
|
||||
<a name="0.4.0"></a>
|
||||
# [0.4.0](https://github.com/pedronauck/docz/compare/v0.3.4...v0.4.0) (2018-06-30)
|
||||
|
||||
|
||||
|
||||
|
||||
**Note:** Version bump only for package docz-example-css-less
|
||||
|
||||
<a name="0.3.4"></a>
|
||||
## [0.3.4](https://github.com/pedronauck/docz/compare/v0.3.3...v0.3.4) (2018-06-26)
|
||||
|
||||
|
||||
|
||||
|
||||
**Note:** Version bump only for package docz-example-css-less
|
||||
|
||||
<a name="0.3.3"></a>
|
||||
## [0.3.3](https://github.com/pedronauck/docz/compare/v0.3.2...v0.3.3) (2018-06-26)
|
||||
|
||||
|
||||
|
||||
|
||||
**Note:** Version bump only for package docz-example-css-less
|
||||
|
||||
<a name="0.3.2"></a>
|
||||
## [0.3.2](https://github.com/pedronauck/docz/compare/v0.3.1...v0.3.2) (2018-06-25)
|
||||
|
||||
|
||||
|
||||
|
||||
**Note:** Version bump only for package docz-example-css-less
|
||||
|
||||
<a name="0.3.1"></a>
|
||||
## [0.3.1](https://github.com/pedronauck/docz/compare/v0.2.11...v0.3.1) (2018-06-25)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* **docz-default-theme:** dark mode and responsiveness ([#87](https://github.com/pedronauck/docz/issues/87)) ([a4db115](https://github.com/pedronauck/docz/commit/a4db115)), closes [#81](https://github.com/pedronauck/docz/issues/81)
|
||||
|
||||
|
||||
|
||||
|
||||
<a name="0.3.0"></a>
|
||||
# [0.3.0](https://github.com/pedronauck/docz/compare/v0.3.0-beta.0...v0.3.0) (2018-06-25)
|
||||
|
||||
|
||||
|
||||
|
||||
**Note:** Version bump only for package docz-example-css-less
|
||||
|
||||
<a name="0.3.0-beta.0"></a>
|
||||
# [0.3.0-beta.0](https://github.com/pedronauck/docz/compare/v0.2.11...v0.3.0-beta.0) (2018-06-25)
|
||||
|
||||
|
||||
|
||||
|
||||
**Note:** Version bump only for package docz-example-css-less
|
||||
|
||||
<a name="0.2.11"></a>
|
||||
## [0.2.11](https://github.com/pedronauck/docz/compare/v0.2.10...v0.2.11) (2018-06-22)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* some changes on css examples ([058660f](https://github.com/pedronauck/docz/commit/058660f))
|
||||
|
||||
|
||||
|
||||
|
||||
<a name="0.2.10"></a>
|
||||
## [0.2.10](https://github.com/pedronauck/docz/compare/v0.2.9...v0.2.10) (2018-06-21)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* **docz-plugin-css:** add initial version ([#78](https://github.com/pedronauck/docz/issues/78)) ([299372e](https://github.com/pedronauck/docz/commit/299372e))
|
||||
@@ -1,11 +0,0 @@
|
||||
import { css } from 'docz-plugin-css'
|
||||
|
||||
export default {
|
||||
title: 'CSS Less',
|
||||
plugins: [
|
||||
css({
|
||||
preprocessor: 'less',
|
||||
cssmodules: true,
|
||||
}),
|
||||
],
|
||||
}
|
||||
@@ -1,19 +0,0 @@
|
||||
{
|
||||
"name": "docz-example-css-less",
|
||||
"version": "0.11.0",
|
||||
"license": "MIT",
|
||||
"scripts": {
|
||||
"dev": "docz dev",
|
||||
"build": "docz build"
|
||||
},
|
||||
"dependencies": {
|
||||
"classnames": "^2.2.6",
|
||||
"prop-types": "^15.6.2",
|
||||
"react": "^16.5.0",
|
||||
"react-dom": "^16.5.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"docz": "^0.11.0",
|
||||
"docz-plugin-css": "^0.11.0"
|
||||
}
|
||||
}
|
||||
@@ -1,23 +0,0 @@
|
||||
import React, { Fragment } from 'react'
|
||||
import cx from 'classnames'
|
||||
import t from 'prop-types'
|
||||
|
||||
import styles from './Alert.module.less'
|
||||
|
||||
export const Alert = ({ children, kind }) => (
|
||||
<div
|
||||
className={cx(styles.alert, {
|
||||
[styles[kind]]: true,
|
||||
})}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
)
|
||||
|
||||
Alert.propTypes = {
|
||||
kind: t.oneOf(['info', 'positive', 'negative', 'warning']),
|
||||
}
|
||||
|
||||
Alert.defaultProps = {
|
||||
kind: 'info',
|
||||
}
|
||||
@@ -1,40 +0,0 @@
|
||||
---
|
||||
name: Alert
|
||||
menu: Components
|
||||
---
|
||||
|
||||
import { Playground, PropsTable } from 'docz'
|
||||
import { Alert } from './Alert'
|
||||
|
||||
# Alert
|
||||
|
||||
## Properties
|
||||
|
||||
<PropsTable of={Alert} />
|
||||
|
||||
## Basic usage
|
||||
|
||||
<Playground>
|
||||
<Alert>Some message</Alert>
|
||||
</Playground>
|
||||
|
||||
## Using different kinds
|
||||
|
||||
<Playground>
|
||||
<Alert kind="info">Some message</Alert>
|
||||
<Alert kind="positive">Some message</Alert>
|
||||
<Alert kind="negative">Some message</Alert>
|
||||
<Alert kind="warning">Some message</Alert>
|
||||
</Playground>
|
||||
|
||||
## Use with children as a function
|
||||
|
||||
<Playground>
|
||||
{() => {
|
||||
const message = 'Hello world'
|
||||
|
||||
return (
|
||||
<Alert>{message}</Alert>
|
||||
)
|
||||
}}
|
||||
</Playground>
|
||||
@@ -1,22 +0,0 @@
|
||||
.alert {
|
||||
padding: 15px 20px;
|
||||
background: white;
|
||||
border-radius: 3px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.info {
|
||||
background: #5352ED;
|
||||
}
|
||||
|
||||
.positive {
|
||||
background: #2ED573;
|
||||
}
|
||||
|
||||
.negative {
|
||||
background: #FF4757;
|
||||
}
|
||||
|
||||
.warning {
|
||||
background: #FFA502;
|
||||
}
|
||||
@@ -1,3 +0,0 @@
|
||||
body {
|
||||
background: white;
|
||||
}
|
||||
@@ -1,23 +0,0 @@
|
||||
---
|
||||
name: Getting Started
|
||||
route: /
|
||||
order: 1
|
||||
---
|
||||
|
||||
import './index.less'
|
||||
|
||||
# Getting Started
|
||||
|
||||
Design systems enable teams to build better products faster by making design reusable—reusability makes scale possible. This is the heart and primary value of design systems. A design system is a collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications.
|
||||
|
||||
Regardless of the technologies and tools behind them, a successful design system follows these guiding principles:
|
||||
|
||||
- **It’s consistent**. The way components are built and managed follows a predictable pattern.
|
||||
- **It’s self-contained**. Your design system is treated as a standalone dependency.
|
||||
- **It’s reusable**. You’ve built components so they can be reused in many contexts.
|
||||
- **It’s accessible**. Applications built with your design system are usable by as many people as possible, no matter how they access the web.
|
||||
- **It’s robust**. No matter the product or platform to which your design system is applied, it should perform with grace and minimal bugs.
|
||||
|
||||
## Consistency
|
||||
|
||||
Your first, most important task when starting out is to define the rules of your system, document them, and ensure that everyone follows them. When you have clearly documented code standards and best practices in place, designers and developers from across your organization can easily use and, more importantly, contribute to your design system.
|
||||
@@ -1,326 +0,0 @@
|
||||
# Change Log
|
||||
|
||||
All notable changes to this project will be documented in this file.
|
||||
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
||||
|
||||
<a name="0.11.0"></a>
|
||||
# [0.11.0](https://github.com/pedronauck/docz/compare/v0.10.3...v0.11.0) (2018-09-02)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* **docz:** move docz/docz-core to dev dependency on examples ([e7153a4](https://github.com/pedronauck/docz/commit/e7153a4))
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a name="0.10.3"></a>
|
||||
## [0.10.3](https://github.com/pedronauck/docz/compare/v0.9.6...v0.10.3) (2018-08-16)
|
||||
|
||||
|
||||
|
||||
|
||||
**Note:** Version bump only for package docz-example-css-postcss
|
||||
|
||||
<a name="0.10.2"></a>
|
||||
## [0.10.2](https://github.com/pedronauck/docz/compare/v0.10.1...v0.10.2) (2018-08-13)
|
||||
|
||||
|
||||
|
||||
|
||||
**Note:** Version bump only for package docz-example-css-postcss
|
||||
|
||||
<a name="0.10.1"></a>
|
||||
## [0.10.1](https://github.com/pedronauck/docz/compare/v0.10.0...v0.10.1) (2018-08-13)
|
||||
|
||||
|
||||
|
||||
|
||||
**Note:** Version bump only for package docz-example-css-postcss
|
||||
|
||||
<a name="0.10.0"></a>
|
||||
# [0.10.0](https://github.com/pedronauck/docz/compare/v0.9.6...v0.10.0) (2018-08-13)
|
||||
|
||||
|
||||
|
||||
|
||||
**Note:** Version bump only for package docz-example-css-postcss
|
||||
|
||||
<a name="0.9.6"></a>
|
||||
## [0.9.6](https://github.com/pedronauck/docz/compare/v0.9.5...v0.9.6) (2018-08-06)
|
||||
|
||||
|
||||
|
||||
|
||||
**Note:** Version bump only for package docz-example-css-postcss
|
||||
|
||||
<a name="0.9.5"></a>
|
||||
## [0.9.5](https://github.com/pedronauck/docz/compare/v0.9.4...v0.9.5) (2018-08-04)
|
||||
|
||||
|
||||
|
||||
|
||||
**Note:** Version bump only for package docz-example-css-postcss
|
||||
|
||||
<a name="0.9.4"></a>
|
||||
## [0.9.4](https://github.com/pedronauck/docz/compare/v0.9.4-beta.1...v0.9.4) (2018-08-04)
|
||||
|
||||
|
||||
|
||||
|
||||
**Note:** Version bump only for package docz-example-css-postcss
|
||||
|
||||
<a name="0.9.3"></a>
|
||||
## [0.9.3](https://github.com/pedronauck/docz/compare/v0.9.2...v0.9.3) (2018-08-03)
|
||||
|
||||
|
||||
|
||||
|
||||
**Note:** Version bump only for package docz-example-css-postcss
|
||||
|
||||
<a name="0.9.2"></a>
|
||||
## [0.9.2](https://github.com/pedronauck/docz/compare/v0.9.1...v0.9.2) (2018-08-02)
|
||||
|
||||
|
||||
|
||||
|
||||
**Note:** Version bump only for package docz-example-css-postcss
|
||||
|
||||
<a name="0.9.1"></a>
|
||||
## [0.9.1](https://github.com/pedronauck/docz/compare/v0.9.0...v0.9.1) (2018-08-02)
|
||||
|
||||
|
||||
|
||||
|
||||
**Note:** Version bump only for package docz-example-css-postcss
|
||||
|
||||
<a name="0.9.0"></a>
|
||||
# [0.9.0](https://github.com/pedronauck/docz/compare/v0.9.0-beta.1...v0.9.0) (2018-08-02)
|
||||
|
||||
|
||||
|
||||
|
||||
**Note:** Version bump only for package docz-example-css-postcss
|
||||
|
||||
<a name="0.9.0-beta.1"></a>
|
||||
# [0.9.0-beta.1](https://github.com/pedronauck/docz/compare/v0.9.0-beta.0...v0.9.0-beta.1) (2018-08-01)
|
||||
|
||||
|
||||
|
||||
|
||||
**Note:** Version bump only for package docz-example-css-postcss
|
||||
|
||||
<a name="0.9.0-beta.0"></a>
|
||||
# [0.9.0-beta.0](https://github.com/pedronauck/docz/compare/v0.8.0...v0.9.0-beta.0) (2018-08-01)
|
||||
|
||||
|
||||
|
||||
|
||||
**Note:** Version bump only for package docz-example-css-postcss
|
||||
|
||||
<a name="0.8.0"></a>
|
||||
# [0.8.0](https://github.com/pedronauck/docz/compare/v0.7.1...v0.8.0) (2018-07-28)
|
||||
|
||||
|
||||
|
||||
|
||||
**Note:** Version bump only for package docz-example-css-postcss
|
||||
|
||||
<a name="0.7.1"></a>
|
||||
## [0.7.1](https://github.com/pedronauck/docz/compare/v0.7.0...v0.7.1) (2018-07-24)
|
||||
|
||||
|
||||
|
||||
|
||||
**Note:** Version bump only for package docz-example-css-postcss
|
||||
|
||||
<a name="0.7.0"></a>
|
||||
# [0.7.0](https://github.com/pedronauck/docz/compare/v0.6.2...v0.7.0) (2018-07-23)
|
||||
|
||||
|
||||
|
||||
|
||||
**Note:** Version bump only for package docz-example-css-postcss
|
||||
|
||||
<a name="0.6.2"></a>
|
||||
## [0.6.2](https://github.com/pedronauck/docz/compare/v0.6.1...v0.6.2) (2018-07-20)
|
||||
|
||||
|
||||
|
||||
|
||||
**Note:** Version bump only for package docz-example-css-postcss
|
||||
|
||||
<a name="0.6.1"></a>
|
||||
## [0.6.1](https://github.com/pedronauck/docz/compare/v0.6.0...v0.6.1) (2018-07-19)
|
||||
|
||||
|
||||
|
||||
|
||||
**Note:** Version bump only for package docz-example-css-postcss
|
||||
|
||||
<a name="0.6.0"></a>
|
||||
# [0.6.0](https://github.com/pedronauck/docz/compare/v0.5.9...v0.6.0) (2018-07-19)
|
||||
|
||||
|
||||
|
||||
|
||||
**Note:** Version bump only for package docz-example-css-postcss
|
||||
|
||||
<a name="0.5.9"></a>
|
||||
## [0.5.9](https://github.com/pedronauck/docz/compare/v0.5.8...v0.5.9) (2018-07-16)
|
||||
|
||||
|
||||
|
||||
|
||||
**Note:** Version bump only for package docz-example-css-postcss
|
||||
|
||||
<a name="0.5.8"></a>
|
||||
## [0.5.8](https://github.com/pedronauck/docz/compare/v0.5.7...v0.5.8) (2018-07-11)
|
||||
|
||||
|
||||
|
||||
|
||||
**Note:** Version bump only for package docz-example-css-postcss
|
||||
|
||||
<a name="0.5.7"></a>
|
||||
## [0.5.7](https://github.com/pedronauck/docz/compare/v0.5.6...v0.5.7) (2018-07-11)
|
||||
|
||||
|
||||
|
||||
|
||||
**Note:** Version bump only for package docz-example-css-postcss
|
||||
|
||||
<a name="0.5.6"></a>
|
||||
## [0.5.6](https://github.com/pedronauck/docz/compare/v0.5.5...v0.5.6) (2018-07-11)
|
||||
|
||||
|
||||
|
||||
|
||||
**Note:** Version bump only for package docz-example-css-postcss
|
||||
|
||||
<a name="0.5.5"></a>
|
||||
## [0.5.5](https://github.com/pedronauck/docz/compare/v0.5.4...v0.5.5) (2018-07-07)
|
||||
|
||||
|
||||
|
||||
|
||||
**Note:** Version bump only for package docz-example-css-postcss
|
||||
|
||||
<a name="0.5.4"></a>
|
||||
## [0.5.4](https://github.com/pedronauck/docz/compare/v0.5.3...v0.5.4) (2018-07-07)
|
||||
|
||||
|
||||
|
||||
|
||||
**Note:** Version bump only for package docz-example-css-postcss
|
||||
|
||||
<a name="0.5.3"></a>
|
||||
## [0.5.3](https://github.com/pedronauck/docz/compare/v0.5.2...v0.5.3) (2018-07-05)
|
||||
|
||||
|
||||
|
||||
|
||||
**Note:** Version bump only for package docz-example-css-postcss
|
||||
|
||||
<a name="0.5.2"></a>
|
||||
## [0.5.2](https://github.com/pedronauck/docz/compare/v0.5.1...v0.5.2) (2018-07-05)
|
||||
|
||||
|
||||
|
||||
|
||||
**Note:** Version bump only for package docz-example-css-postcss
|
||||
|
||||
<a name="0.5.1"></a>
|
||||
## [0.5.1](https://github.com/pedronauck/docz/compare/v0.3.4...v0.5.1) (2018-07-03)
|
||||
|
||||
|
||||
|
||||
|
||||
**Note:** Version bump only for package docz-example-css-postcss
|
||||
|
||||
<a name="0.5.0"></a>
|
||||
# [0.5.0](https://github.com/pedronauck/docz/compare/v0.3.4...v0.5.0) (2018-07-03)
|
||||
|
||||
|
||||
|
||||
|
||||
**Note:** Version bump only for package docz-example-css-postcss
|
||||
|
||||
<a name="0.4.0"></a>
|
||||
# [0.4.0](https://github.com/pedronauck/docz/compare/v0.3.4...v0.4.0) (2018-06-30)
|
||||
|
||||
|
||||
|
||||
|
||||
**Note:** Version bump only for package docz-example-css-postcss
|
||||
|
||||
<a name="0.3.4"></a>
|
||||
## [0.3.4](https://github.com/pedronauck/docz/compare/v0.3.3...v0.3.4) (2018-06-26)
|
||||
|
||||
|
||||
|
||||
|
||||
**Note:** Version bump only for package docz-example-css-postcss
|
||||
|
||||
<a name="0.3.3"></a>
|
||||
## [0.3.3](https://github.com/pedronauck/docz/compare/v0.3.2...v0.3.3) (2018-06-26)
|
||||
|
||||
|
||||
|
||||
|
||||
**Note:** Version bump only for package docz-example-css-postcss
|
||||
|
||||
<a name="0.3.2"></a>
|
||||
## [0.3.2](https://github.com/pedronauck/docz/compare/v0.3.1...v0.3.2) (2018-06-25)
|
||||
|
||||
|
||||
|
||||
|
||||
**Note:** Version bump only for package docz-example-css-postcss
|
||||
|
||||
<a name="0.3.1"></a>
|
||||
## [0.3.1](https://github.com/pedronauck/docz/compare/v0.2.11...v0.3.1) (2018-06-25)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* **docz-default-theme:** dark mode and responsiveness ([#87](https://github.com/pedronauck/docz/issues/87)) ([a4db115](https://github.com/pedronauck/docz/commit/a4db115)), closes [#81](https://github.com/pedronauck/docz/issues/81)
|
||||
|
||||
|
||||
|
||||
|
||||
<a name="0.3.0"></a>
|
||||
# [0.3.0](https://github.com/pedronauck/docz/compare/v0.3.0-beta.0...v0.3.0) (2018-06-25)
|
||||
|
||||
|
||||
|
||||
|
||||
**Note:** Version bump only for package docz-example-css-postcss
|
||||
|
||||
<a name="0.3.0-beta.0"></a>
|
||||
# [0.3.0-beta.0](https://github.com/pedronauck/docz/compare/v0.2.11...v0.3.0-beta.0) (2018-06-25)
|
||||
|
||||
|
||||
|
||||
|
||||
**Note:** Version bump only for package docz-example-css-postcss
|
||||
|
||||
<a name="0.2.11"></a>
|
||||
## [0.2.11](https://github.com/pedronauck/docz/compare/v0.2.10...v0.2.11) (2018-06-22)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* some changes on css examples ([058660f](https://github.com/pedronauck/docz/commit/058660f))
|
||||
|
||||
|
||||
|
||||
|
||||
<a name="0.2.10"></a>
|
||||
## [0.2.10](https://github.com/pedronauck/docz/compare/v0.2.9...v0.2.10) (2018-06-21)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* **docz-plugin-css:** add initial version ([#78](https://github.com/pedronauck/docz/issues/78)) ([299372e](https://github.com/pedronauck/docz/commit/299372e))
|
||||
@@ -1,11 +0,0 @@
|
||||
import { css } from 'docz-plugin-css'
|
||||
|
||||
export default {
|
||||
title: 'CSS PostCSS',
|
||||
plugins: [
|
||||
css({
|
||||
preprocessor: 'postcss',
|
||||
cssmodules: true,
|
||||
}),
|
||||
],
|
||||
}
|
||||
@@ -1,19 +0,0 @@
|
||||
{
|
||||
"name": "docz-example-css-postcss",
|
||||
"version": "0.11.0",
|
||||
"license": "MIT",
|
||||
"scripts": {
|
||||
"dev": "docz dev",
|
||||
"build": "docz build"
|
||||
},
|
||||
"dependencies": {
|
||||
"classnames": "^2.2.6",
|
||||
"prop-types": "^15.6.2",
|
||||
"react": "^16.5.0",
|
||||
"react-dom": "^16.5.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"docz": "^0.11.0",
|
||||
"docz-plugin-css": "^0.11.0"
|
||||
}
|
||||
}
|
||||
@@ -1,23 +0,0 @@
|
||||
import React, { Fragment } from 'react'
|
||||
import cx from 'classnames'
|
||||
import t from 'prop-types'
|
||||
|
||||
import styles from './Alert.module.css'
|
||||
|
||||
export const Alert = ({ children, kind }) => (
|
||||
<div
|
||||
className={cx(styles.alert, {
|
||||
[styles[kind]]: true,
|
||||
})}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
)
|
||||
|
||||
Alert.propTypes = {
|
||||
kind: t.oneOf(['info', 'positive', 'negative', 'warning']),
|
||||
}
|
||||
|
||||
Alert.defaultProps = {
|
||||
kind: 'info',
|
||||
}
|
||||
@@ -1,40 +0,0 @@
|
||||
---
|
||||
name: Alert
|
||||
menu: Components
|
||||
---
|
||||
|
||||
import { Playground, PropsTable } from 'docz'
|
||||
import { Alert } from './Alert'
|
||||
|
||||
# Alert
|
||||
|
||||
## Properties
|
||||
|
||||
<PropsTable of={Alert} />
|
||||
|
||||
## Basic usage
|
||||
|
||||
<Playground>
|
||||
<Alert>Some message</Alert>
|
||||
</Playground>
|
||||
|
||||
## Using different kinds
|
||||
|
||||
<Playground>
|
||||
<Alert kind="info">Some message</Alert>
|
||||
<Alert kind="positive">Some message</Alert>
|
||||
<Alert kind="negative">Some message</Alert>
|
||||
<Alert kind="warning">Some message</Alert>
|
||||
</Playground>
|
||||
|
||||
## Use with children as a function
|
||||
|
||||
<Playground>
|
||||
{() => {
|
||||
const message = 'Hello world'
|
||||
|
||||
return (
|
||||
<Alert>{message}</Alert>
|
||||
)
|
||||
}}
|
||||
</Playground>
|
||||
@@ -1,22 +0,0 @@
|
||||
.alert {
|
||||
padding: 15px 20px;
|
||||
background: white;
|
||||
border-radius: 3px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.info {
|
||||
background: #5352ED;
|
||||
}
|
||||
|
||||
.positive {
|
||||
background: #2ED573;
|
||||
}
|
||||
|
||||
.negative {
|
||||
background: #FF4757;
|
||||
}
|
||||
|
||||
.warning {
|
||||
background: #FFA502;
|
||||
}
|
||||
@@ -1,3 +0,0 @@
|
||||
body {
|
||||
background: white;
|
||||
}
|
||||
@@ -1,23 +0,0 @@
|
||||
---
|
||||
name: Getting Started
|
||||
route: /
|
||||
order: 1
|
||||
---
|
||||
|
||||
import './index.css'
|
||||
|
||||
# Getting Started
|
||||
|
||||
Design systems enable teams to build better products faster by making design reusable—reusability makes scale possible. This is the heart and primary value of design systems. A design system is a collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications.
|
||||
|
||||
Regardless of the technologies and tools behind them, a successful design system follows these guiding principles:
|
||||
|
||||
- **It’s consistent**. The way components are built and managed follows a predictable pattern.
|
||||
- **It’s self-contained**. Your design system is treated as a standalone dependency.
|
||||
- **It’s reusable**. You’ve built components so they can be reused in many contexts.
|
||||
- **It’s accessible**. Applications built with your design system are usable by as many people as possible, no matter how they access the web.
|
||||
- **It’s robust**. No matter the product or platform to which your design system is applied, it should perform with grace and minimal bugs.
|
||||
|
||||
## Consistency
|
||||
|
||||
Your first, most important task when starting out is to define the rules of your system, document them, and ensure that everyone follows them. When you have clearly documented code standards and best practices in place, designers and developers from across your organization can easily use and, more importantly, contribute to your design system.
|
||||
@@ -1,336 +0,0 @@
|
||||
# Change Log
|
||||
|
||||
All notable changes to this project will be documented in this file.
|
||||
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
||||
|
||||
<a name="0.11.0"></a>
|
||||
# [0.11.0](https://github.com/pedronauck/docz/compare/v0.10.3...v0.11.0) (2018-09-02)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* **docz:** move docz/docz-core to dev dependency on examples ([e7153a4](https://github.com/pedronauck/docz/commit/e7153a4))
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a name="0.10.3"></a>
|
||||
## [0.10.3](https://github.com/pedronauck/docz/compare/v0.9.6...v0.10.3) (2018-08-16)
|
||||
|
||||
|
||||
|
||||
|
||||
**Note:** Version bump only for package docz-example-css-sass
|
||||
|
||||
<a name="0.10.2"></a>
|
||||
## [0.10.2](https://github.com/pedronauck/docz/compare/v0.10.1...v0.10.2) (2018-08-13)
|
||||
|
||||
|
||||
|
||||
|
||||
**Note:** Version bump only for package docz-example-css-sass
|
||||
|
||||
<a name="0.10.1"></a>
|
||||
## [0.10.1](https://github.com/pedronauck/docz/compare/v0.10.0...v0.10.1) (2018-08-13)
|
||||
|
||||
|
||||
|
||||
|
||||
**Note:** Version bump only for package docz-example-css-sass
|
||||
|
||||
<a name="0.10.0"></a>
|
||||
# [0.10.0](https://github.com/pedronauck/docz/compare/v0.9.6...v0.10.0) (2018-08-13)
|
||||
|
||||
|
||||
|
||||
|
||||
**Note:** Version bump only for package docz-example-css-sass
|
||||
|
||||
<a name="0.9.6"></a>
|
||||
## [0.9.6](https://github.com/pedronauck/docz/compare/v0.9.5...v0.9.6) (2018-08-06)
|
||||
|
||||
|
||||
|
||||
|
||||
**Note:** Version bump only for package docz-example-css-sass
|
||||
|
||||
<a name="0.9.5"></a>
|
||||
## [0.9.5](https://github.com/pedronauck/docz/compare/v0.9.4...v0.9.5) (2018-08-04)
|
||||
|
||||
|
||||
|
||||
|
||||
**Note:** Version bump only for package docz-example-css-sass
|
||||
|
||||
<a name="0.9.4"></a>
|
||||
## [0.9.4](https://github.com/pedronauck/docz/compare/v0.9.4-beta.1...v0.9.4) (2018-08-04)
|
||||
|
||||
|
||||
|
||||
|
||||
**Note:** Version bump only for package docz-example-css-sass
|
||||
|
||||
<a name="0.9.3"></a>
|
||||
## [0.9.3](https://github.com/pedronauck/docz/compare/v0.9.2...v0.9.3) (2018-08-03)
|
||||
|
||||
|
||||
|
||||
|
||||
**Note:** Version bump only for package docz-example-css-sass
|
||||
|
||||
<a name="0.9.2"></a>
|
||||
## [0.9.2](https://github.com/pedronauck/docz/compare/v0.9.1...v0.9.2) (2018-08-02)
|
||||
|
||||
|
||||
|
||||
|
||||
**Note:** Version bump only for package docz-example-css-sass
|
||||
|
||||
<a name="0.9.1"></a>
|
||||
## [0.9.1](https://github.com/pedronauck/docz/compare/v0.9.0...v0.9.1) (2018-08-02)
|
||||
|
||||
|
||||
|
||||
|
||||
**Note:** Version bump only for package docz-example-css-sass
|
||||
|
||||
<a name="0.9.0"></a>
|
||||
# [0.9.0](https://github.com/pedronauck/docz/compare/v0.9.0-beta.1...v0.9.0) (2018-08-02)
|
||||
|
||||
|
||||
|
||||
|
||||
**Note:** Version bump only for package docz-example-css-sass
|
||||
|
||||
<a name="0.9.0-beta.1"></a>
|
||||
# [0.9.0-beta.1](https://github.com/pedronauck/docz/compare/v0.9.0-beta.0...v0.9.0-beta.1) (2018-08-01)
|
||||
|
||||
|
||||
|
||||
|
||||
**Note:** Version bump only for package docz-example-css-sass
|
||||
|
||||
<a name="0.9.0-beta.0"></a>
|
||||
# [0.9.0-beta.0](https://github.com/pedronauck/docz/compare/v0.8.0...v0.9.0-beta.0) (2018-08-01)
|
||||
|
||||
|
||||
|
||||
|
||||
**Note:** Version bump only for package docz-example-css-sass
|
||||
|
||||
<a name="0.8.0"></a>
|
||||
# [0.8.0](https://github.com/pedronauck/docz/compare/v0.7.1...v0.8.0) (2018-07-28)
|
||||
|
||||
|
||||
|
||||
|
||||
**Note:** Version bump only for package docz-example-css-sass
|
||||
|
||||
<a name="0.7.1"></a>
|
||||
## [0.7.1](https://github.com/pedronauck/docz/compare/v0.7.0...v0.7.1) (2018-07-24)
|
||||
|
||||
|
||||
|
||||
|
||||
**Note:** Version bump only for package docz-example-css-sass
|
||||
|
||||
<a name="0.7.0"></a>
|
||||
# [0.7.0](https://github.com/pedronauck/docz/compare/v0.6.2...v0.7.0) (2018-07-23)
|
||||
|
||||
|
||||
|
||||
|
||||
**Note:** Version bump only for package docz-example-css-sass
|
||||
|
||||
<a name="0.6.2"></a>
|
||||
## [0.6.2](https://github.com/pedronauck/docz/compare/v0.6.1...v0.6.2) (2018-07-20)
|
||||
|
||||
|
||||
|
||||
|
||||
**Note:** Version bump only for package docz-example-css-sass
|
||||
|
||||
<a name="0.6.1"></a>
|
||||
## [0.6.1](https://github.com/pedronauck/docz/compare/v0.6.0...v0.6.1) (2018-07-19)
|
||||
|
||||
|
||||
|
||||
|
||||
**Note:** Version bump only for package docz-example-css-sass
|
||||
|
||||
<a name="0.6.0"></a>
|
||||
# [0.6.0](https://github.com/pedronauck/docz/compare/v0.5.9...v0.6.0) (2018-07-19)
|
||||
|
||||
|
||||
|
||||
|
||||
**Note:** Version bump only for package docz-example-css-sass
|
||||
|
||||
<a name="0.5.9"></a>
|
||||
## [0.5.9](https://github.com/pedronauck/docz/compare/v0.5.8...v0.5.9) (2018-07-16)
|
||||
|
||||
|
||||
|
||||
|
||||
**Note:** Version bump only for package docz-example-css-sass
|
||||
|
||||
<a name="0.5.8"></a>
|
||||
## [0.5.8](https://github.com/pedronauck/docz/compare/v0.5.7...v0.5.8) (2018-07-11)
|
||||
|
||||
|
||||
|
||||
|
||||
**Note:** Version bump only for package docz-example-css-sass
|
||||
|
||||
<a name="0.5.7"></a>
|
||||
## [0.5.7](https://github.com/pedronauck/docz/compare/v0.5.6...v0.5.7) (2018-07-11)
|
||||
|
||||
|
||||
|
||||
|
||||
**Note:** Version bump only for package docz-example-css-sass
|
||||
|
||||
<a name="0.5.6"></a>
|
||||
## [0.5.6](https://github.com/pedronauck/docz/compare/v0.5.5...v0.5.6) (2018-07-11)
|
||||
|
||||
|
||||
|
||||
|
||||
**Note:** Version bump only for package docz-example-css-sass
|
||||
|
||||
<a name="0.5.5"></a>
|
||||
## [0.5.5](https://github.com/pedronauck/docz/compare/v0.5.4...v0.5.5) (2018-07-07)
|
||||
|
||||
|
||||
|
||||
|
||||
**Note:** Version bump only for package docz-example-css-sass
|
||||
|
||||
<a name="0.5.4"></a>
|
||||
## [0.5.4](https://github.com/pedronauck/docz/compare/v0.5.3...v0.5.4) (2018-07-07)
|
||||
|
||||
|
||||
|
||||
|
||||
**Note:** Version bump only for package docz-example-css-sass
|
||||
|
||||
<a name="0.5.3"></a>
|
||||
## [0.5.3](https://github.com/pedronauck/docz/compare/v0.5.2...v0.5.3) (2018-07-05)
|
||||
|
||||
|
||||
|
||||
|
||||
**Note:** Version bump only for package docz-example-css-sass
|
||||
|
||||
<a name="0.5.2"></a>
|
||||
## [0.5.2](https://github.com/pedronauck/docz/compare/v0.5.1...v0.5.2) (2018-07-05)
|
||||
|
||||
|
||||
|
||||
|
||||
**Note:** Version bump only for package docz-example-css-sass
|
||||
|
||||
<a name="0.5.1"></a>
|
||||
## [0.5.1](https://github.com/pedronauck/docz/compare/v0.3.4...v0.5.1) (2018-07-03)
|
||||
|
||||
|
||||
|
||||
|
||||
**Note:** Version bump only for package docz-example-css-sass
|
||||
|
||||
<a name="0.5.0"></a>
|
||||
# [0.5.0](https://github.com/pedronauck/docz/compare/v0.3.4...v0.5.0) (2018-07-03)
|
||||
|
||||
|
||||
|
||||
|
||||
**Note:** Version bump only for package docz-example-css-sass
|
||||
|
||||
<a name="0.4.0"></a>
|
||||
# [0.4.0](https://github.com/pedronauck/docz/compare/v0.3.4...v0.4.0) (2018-06-30)
|
||||
|
||||
|
||||
|
||||
|
||||
**Note:** Version bump only for package docz-example-css-sass
|
||||
|
||||
<a name="0.3.4"></a>
|
||||
## [0.3.4](https://github.com/pedronauck/docz/compare/v0.3.3...v0.3.4) (2018-06-26)
|
||||
|
||||
|
||||
|
||||
<a name="0.3.0"></a>
|
||||
# [0.3.0](https://github.com/pedronauck/docz/compare/v0.3.0-beta.0...v0.3.0) (2018-06-25)
|
||||
|
||||
|
||||
|
||||
<a name="0.3.0-beta.0"></a>
|
||||
# [0.3.0-beta.0](https://github.com/pedronauck/docz/compare/v0.2.11...v0.3.0-beta.0) (2018-06-25)
|
||||
|
||||
|
||||
|
||||
|
||||
**Note:** Version bump only for package docz-example-css-sass
|
||||
|
||||
<a name="0.3.3"></a>
|
||||
## [0.3.3](https://github.com/pedronauck/docz/compare/v0.3.2...v0.3.3) (2018-06-26)
|
||||
|
||||
|
||||
|
||||
|
||||
**Note:** Version bump only for package docz-example-css-sass
|
||||
|
||||
<a name="0.3.2"></a>
|
||||
## [0.3.2](https://github.com/pedronauck/docz/compare/v0.3.1...v0.3.2) (2018-06-25)
|
||||
|
||||
|
||||
|
||||
|
||||
**Note:** Version bump only for package docz-example-css-sass
|
||||
|
||||
<a name="0.3.1"></a>
|
||||
## [0.3.1](https://github.com/pedronauck/docz/compare/v0.2.11...v0.3.1) (2018-06-25)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* **docz-default-theme:** dark mode and responsiveness ([#87](https://github.com/pedronauck/docz/issues/87)) ([a4db115](https://github.com/pedronauck/docz/commit/a4db115)), closes [#81](https://github.com/pedronauck/docz/issues/81)
|
||||
|
||||
|
||||
|
||||
|
||||
<a name="0.3.0"></a>
|
||||
# [0.3.0](https://github.com/pedronauck/docz/compare/v0.3.0-beta.0...v0.3.0) (2018-06-25)
|
||||
|
||||
|
||||
|
||||
|
||||
**Note:** Version bump only for package docz-example-css-sass
|
||||
|
||||
<a name="0.3.0-beta.0"></a>
|
||||
# [0.3.0-beta.0](https://github.com/pedronauck/docz/compare/v0.2.11...v0.3.0-beta.0) (2018-06-25)
|
||||
|
||||
|
||||
|
||||
|
||||
**Note:** Version bump only for package docz-example-css-sass
|
||||
|
||||
<a name="0.2.11"></a>
|
||||
## [0.2.11](https://github.com/pedronauck/docz/compare/v0.2.10...v0.2.11) (2018-06-22)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* some changes on css examples ([058660f](https://github.com/pedronauck/docz/commit/058660f))
|
||||
|
||||
|
||||
|
||||
|
||||
<a name="0.2.10"></a>
|
||||
## [0.2.10](https://github.com/pedronauck/docz/compare/v0.2.9...v0.2.10) (2018-06-21)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* **docz-plugin-css:** add initial version ([#78](https://github.com/pedronauck/docz/issues/78)) ([299372e](https://github.com/pedronauck/docz/commit/299372e))
|
||||
@@ -1,11 +0,0 @@
|
||||
import { css } from 'docz-plugin-css'
|
||||
|
||||
export default {
|
||||
plugins: [
|
||||
title: 'CSS Sass',
|
||||
css({
|
||||
preprocessor: 'sass',
|
||||
cssmodules: true,
|
||||
}),
|
||||
],
|
||||
}
|
||||
@@ -1,19 +0,0 @@
|
||||
{
|
||||
"name": "docz-example-css-sass",
|
||||
"version": "0.11.0",
|
||||
"license": "MIT",
|
||||
"scripts": {
|
||||
"dev": "docz dev",
|
||||
"build": "docz build"
|
||||
},
|
||||
"dependencies": {
|
||||
"classnames": "^2.2.6",
|
||||
"prop-types": "^15.6.2",
|
||||
"react": "^16.5.0",
|
||||
"react-dom": "^16.5.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"docz": "^0.11.0",
|
||||
"docz-plugin-css": "^0.11.0"
|
||||
}
|
||||
}
|
||||
@@ -1,23 +0,0 @@
|
||||
import React, { Fragment } from 'react'
|
||||
import cx from 'classnames'
|
||||
import t from 'prop-types'
|
||||
|
||||
import styles from './Alert.module.scss'
|
||||
|
||||
export const Alert = ({ children, kind }) => (
|
||||
<div
|
||||
className={cx(styles.alert, {
|
||||
[styles[kind]]: true,
|
||||
})}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
)
|
||||
|
||||
Alert.propTypes = {
|
||||
kind: t.oneOf(['info', 'positive', 'negative', 'warning']),
|
||||
}
|
||||
|
||||
Alert.defaultProps = {
|
||||
kind: 'info',
|
||||
}
|
||||
@@ -1,40 +0,0 @@
|
||||
---
|
||||
name: Alert
|
||||
menu: Components
|
||||
---
|
||||
|
||||
import { Playground, PropsTable } from 'docz'
|
||||
import { Alert } from './Alert'
|
||||
|
||||
# Alert
|
||||
|
||||
## Properties
|
||||
|
||||
<PropsTable of={Alert} />
|
||||
|
||||
## Basic usage
|
||||
|
||||
<Playground>
|
||||
<Alert>Some message</Alert>
|
||||
</Playground>
|
||||
|
||||
## Using different kinds
|
||||
|
||||
<Playground>
|
||||
<Alert kind="info">Some message</Alert>
|
||||
<Alert kind="positive">Some message</Alert>
|
||||
<Alert kind="negative">Some message</Alert>
|
||||
<Alert kind="warning">Some message</Alert>
|
||||
</Playground>
|
||||
|
||||
## Use with children as a function
|
||||
|
||||
<Playground>
|
||||
{() => {
|
||||
const message = 'Hello world'
|
||||
|
||||
return (
|
||||
<Alert>{message}</Alert>
|
||||
)
|
||||
}}
|
||||
</Playground>
|
||||
@@ -1,22 +0,0 @@
|
||||
.alert {
|
||||
padding: 15px 20px;
|
||||
background: white;
|
||||
border-radius: 3px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.info {
|
||||
background: #5352ED;
|
||||
}
|
||||
|
||||
.positive {
|
||||
background: #2ED573;
|
||||
}
|
||||
|
||||
.negative {
|
||||
background: #FF4757;
|
||||
}
|
||||
|
||||
.warning {
|
||||
background: #FFA502;
|
||||
}
|
||||
@@ -1,23 +0,0 @@
|
||||
---
|
||||
name: Getting Started
|
||||
route: /
|
||||
order: 1
|
||||
---
|
||||
|
||||
import './index.scss'
|
||||
|
||||
# Getting Started
|
||||
|
||||
Design systems enable teams to build better products faster by making design reusable—reusability makes scale possible. This is the heart and primary value of design systems. A design system is a collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications.
|
||||
|
||||
Regardless of the technologies and tools behind them, a successful design system follows these guiding principles:
|
||||
|
||||
- **It’s consistent**. The way components are built and managed follows a predictable pattern.
|
||||
- **It’s self-contained**. Your design system is treated as a standalone dependency.
|
||||
- **It’s reusable**. You’ve built components so they can be reused in many contexts.
|
||||
- **It’s accessible**. Applications built with your design system are usable by as many people as possible, no matter how they access the web.
|
||||
- **It’s robust**. No matter the product or platform to which your design system is applied, it should perform with grace and minimal bugs.
|
||||
|
||||
## Consistency
|
||||
|
||||
Your first, most important task when starting out is to define the rules of your system, document them, and ensure that everyone follows them. When you have clearly documented code standards and best practices in place, designers and developers from across your organization can easily use and, more importantly, contribute to your design system.
|
||||
@@ -1,3 +0,0 @@
|
||||
body {
|
||||
background: white;
|
||||
}
|
||||
@@ -1,326 +0,0 @@
|
||||
# Change Log
|
||||
|
||||
All notable changes to this project will be documented in this file.
|
||||
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
||||
|
||||
<a name="0.11.0"></a>
|
||||
# [0.11.0](https://github.com/pedronauck/docz/compare/v0.10.3...v0.11.0) (2018-09-02)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* **docz:** move docz/docz-core to dev dependency on examples ([e7153a4](https://github.com/pedronauck/docz/commit/e7153a4))
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a name="0.10.3"></a>
|
||||
## [0.10.3](https://github.com/pedronauck/docz/compare/v0.9.6...v0.10.3) (2018-08-16)
|
||||
|
||||
|
||||
|
||||
|
||||
**Note:** Version bump only for package docz-example-css-stylus
|
||||
|
||||
<a name="0.10.2"></a>
|
||||
## [0.10.2](https://github.com/pedronauck/docz/compare/v0.10.1...v0.10.2) (2018-08-13)
|
||||
|
||||
|
||||
|
||||
|
||||
**Note:** Version bump only for package docz-example-css-stylus
|
||||
|
||||
<a name="0.10.1"></a>
|
||||
## [0.10.1](https://github.com/pedronauck/docz/compare/v0.10.0...v0.10.1) (2018-08-13)
|
||||
|
||||
|
||||
|
||||
|
||||
**Note:** Version bump only for package docz-example-css-stylus
|
||||
|
||||
<a name="0.10.0"></a>
|
||||
# [0.10.0](https://github.com/pedronauck/docz/compare/v0.9.6...v0.10.0) (2018-08-13)
|
||||
|
||||
|
||||
|
||||
|
||||
**Note:** Version bump only for package docz-example-css-stylus
|
||||
|
||||
<a name="0.9.6"></a>
|
||||
## [0.9.6](https://github.com/pedronauck/docz/compare/v0.9.5...v0.9.6) (2018-08-06)
|
||||
|
||||
|
||||
|
||||
|
||||
**Note:** Version bump only for package docz-example-css-stylus
|
||||
|
||||
<a name="0.9.5"></a>
|
||||
## [0.9.5](https://github.com/pedronauck/docz/compare/v0.9.4...v0.9.5) (2018-08-04)
|
||||
|
||||
|
||||
|
||||
|
||||
**Note:** Version bump only for package docz-example-css-stylus
|
||||
|
||||
<a name="0.9.4"></a>
|
||||
## [0.9.4](https://github.com/pedronauck/docz/compare/v0.9.4-beta.1...v0.9.4) (2018-08-04)
|
||||
|
||||
|
||||
|
||||
|
||||
**Note:** Version bump only for package docz-example-css-stylus
|
||||
|
||||
<a name="0.9.3"></a>
|
||||
## [0.9.3](https://github.com/pedronauck/docz/compare/v0.9.2...v0.9.3) (2018-08-03)
|
||||
|
||||
|
||||
|
||||
|
||||
**Note:** Version bump only for package docz-example-css-stylus
|
||||
|
||||
<a name="0.9.2"></a>
|
||||
## [0.9.2](https://github.com/pedronauck/docz/compare/v0.9.1...v0.9.2) (2018-08-02)
|
||||
|
||||
|
||||
|
||||
|
||||
**Note:** Version bump only for package docz-example-css-stylus
|
||||
|
||||
<a name="0.9.1"></a>
|
||||
## [0.9.1](https://github.com/pedronauck/docz/compare/v0.9.0...v0.9.1) (2018-08-02)
|
||||
|
||||
|
||||
|
||||
|
||||
**Note:** Version bump only for package docz-example-css-stylus
|
||||
|
||||
<a name="0.9.0"></a>
|
||||
# [0.9.0](https://github.com/pedronauck/docz/compare/v0.9.0-beta.1...v0.9.0) (2018-08-02)
|
||||
|
||||
|
||||
|
||||
|
||||
**Note:** Version bump only for package docz-example-css-stylus
|
||||
|
||||
<a name="0.9.0-beta.1"></a>
|
||||
# [0.9.0-beta.1](https://github.com/pedronauck/docz/compare/v0.9.0-beta.0...v0.9.0-beta.1) (2018-08-01)
|
||||
|
||||
|
||||
|
||||
|
||||
**Note:** Version bump only for package docz-example-css-stylus
|
||||
|
||||
<a name="0.9.0-beta.0"></a>
|
||||
# [0.9.0-beta.0](https://github.com/pedronauck/docz/compare/v0.8.0...v0.9.0-beta.0) (2018-08-01)
|
||||
|
||||
|
||||
|
||||
|
||||
**Note:** Version bump only for package docz-example-css-stylus
|
||||
|
||||
<a name="0.8.0"></a>
|
||||
# [0.8.0](https://github.com/pedronauck/docz/compare/v0.7.1...v0.8.0) (2018-07-28)
|
||||
|
||||
|
||||
|
||||
|
||||
**Note:** Version bump only for package docz-example-css-stylus
|
||||
|
||||
<a name="0.7.1"></a>
|
||||
## [0.7.1](https://github.com/pedronauck/docz/compare/v0.7.0...v0.7.1) (2018-07-24)
|
||||
|
||||
|
||||
|
||||
|
||||
**Note:** Version bump only for package docz-example-css-stylus
|
||||
|
||||
<a name="0.7.0"></a>
|
||||
# [0.7.0](https://github.com/pedronauck/docz/compare/v0.6.2...v0.7.0) (2018-07-23)
|
||||
|
||||
|
||||
|
||||
|
||||
**Note:** Version bump only for package docz-example-css-stylus
|
||||
|
||||
<a name="0.6.2"></a>
|
||||
## [0.6.2](https://github.com/pedronauck/docz/compare/v0.6.1...v0.6.2) (2018-07-20)
|
||||
|
||||
|
||||
|
||||
|
||||
**Note:** Version bump only for package docz-example-css-stylus
|
||||
|
||||
<a name="0.6.1"></a>
|
||||
## [0.6.1](https://github.com/pedronauck/docz/compare/v0.6.0...v0.6.1) (2018-07-19)
|
||||
|
||||
|
||||
|
||||
|
||||
**Note:** Version bump only for package docz-example-css-stylus
|
||||
|
||||
<a name="0.6.0"></a>
|
||||
# [0.6.0](https://github.com/pedronauck/docz/compare/v0.5.9...v0.6.0) (2018-07-19)
|
||||
|
||||
|
||||
|
||||
|
||||
**Note:** Version bump only for package docz-example-css-stylus
|
||||
|
||||
<a name="0.5.9"></a>
|
||||
## [0.5.9](https://github.com/pedronauck/docz/compare/v0.5.8...v0.5.9) (2018-07-16)
|
||||
|
||||
|
||||
|
||||
|
||||
**Note:** Version bump only for package docz-example-css-stylus
|
||||
|
||||
<a name="0.5.8"></a>
|
||||
## [0.5.8](https://github.com/pedronauck/docz/compare/v0.5.7...v0.5.8) (2018-07-11)
|
||||
|
||||
|
||||
|
||||
|
||||
**Note:** Version bump only for package docz-example-css-stylus
|
||||
|
||||
<a name="0.5.7"></a>
|
||||
## [0.5.7](https://github.com/pedronauck/docz/compare/v0.5.6...v0.5.7) (2018-07-11)
|
||||
|
||||
|
||||
|
||||
|
||||
**Note:** Version bump only for package docz-example-css-stylus
|
||||
|
||||
<a name="0.5.6"></a>
|
||||
## [0.5.6](https://github.com/pedronauck/docz/compare/v0.5.5...v0.5.6) (2018-07-11)
|
||||
|
||||
|
||||
|
||||
|
||||
**Note:** Version bump only for package docz-example-css-stylus
|
||||
|
||||
<a name="0.5.5"></a>
|
||||
## [0.5.5](https://github.com/pedronauck/docz/compare/v0.5.4...v0.5.5) (2018-07-07)
|
||||
|
||||
|
||||
|
||||
|
||||
**Note:** Version bump only for package docz-example-css-stylus
|
||||
|
||||
<a name="0.5.4"></a>
|
||||
## [0.5.4](https://github.com/pedronauck/docz/compare/v0.5.3...v0.5.4) (2018-07-07)
|
||||
|
||||
|
||||
|
||||
|
||||
**Note:** Version bump only for package docz-example-css-stylus
|
||||
|
||||
<a name="0.5.3"></a>
|
||||
## [0.5.3](https://github.com/pedronauck/docz/compare/v0.5.2...v0.5.3) (2018-07-05)
|
||||
|
||||
|
||||
|
||||
|
||||
**Note:** Version bump only for package docz-example-css-stylus
|
||||
|
||||
<a name="0.5.2"></a>
|
||||
## [0.5.2](https://github.com/pedronauck/docz/compare/v0.5.1...v0.5.2) (2018-07-05)
|
||||
|
||||
|
||||
|
||||
|
||||
**Note:** Version bump only for package docz-example-css-stylus
|
||||
|
||||
<a name="0.5.1"></a>
|
||||
## [0.5.1](https://github.com/pedronauck/docz/compare/v0.3.4...v0.5.1) (2018-07-03)
|
||||
|
||||
|
||||
|
||||
|
||||
**Note:** Version bump only for package docz-example-css-stylus
|
||||
|
||||
<a name="0.5.0"></a>
|
||||
# [0.5.0](https://github.com/pedronauck/docz/compare/v0.3.4...v0.5.0) (2018-07-03)
|
||||
|
||||
|
||||
|
||||
|
||||
**Note:** Version bump only for package docz-example-css-stylus
|
||||
|
||||
<a name="0.4.0"></a>
|
||||
# [0.4.0](https://github.com/pedronauck/docz/compare/v0.3.4...v0.4.0) (2018-06-30)
|
||||
|
||||
|
||||
|
||||
|
||||
**Note:** Version bump only for package docz-example-css-stylus
|
||||
|
||||
<a name="0.3.4"></a>
|
||||
## [0.3.4](https://github.com/pedronauck/docz/compare/v0.3.3...v0.3.4) (2018-06-26)
|
||||
|
||||
|
||||
|
||||
|
||||
**Note:** Version bump only for package docz-example-css-stylus
|
||||
|
||||
<a name="0.3.3"></a>
|
||||
## [0.3.3](https://github.com/pedronauck/docz/compare/v0.3.2...v0.3.3) (2018-06-26)
|
||||
|
||||
|
||||
|
||||
|
||||
**Note:** Version bump only for package docz-example-css-stylus
|
||||
|
||||
<a name="0.3.2"></a>
|
||||
## [0.3.2](https://github.com/pedronauck/docz/compare/v0.3.1...v0.3.2) (2018-06-25)
|
||||
|
||||
|
||||
|
||||
|
||||
**Note:** Version bump only for package docz-example-css-stylus
|
||||
|
||||
<a name="0.3.1"></a>
|
||||
## [0.3.1](https://github.com/pedronauck/docz/compare/v0.2.11...v0.3.1) (2018-06-25)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* **docz-default-theme:** dark mode and responsiveness ([#87](https://github.com/pedronauck/docz/issues/87)) ([a4db115](https://github.com/pedronauck/docz/commit/a4db115)), closes [#81](https://github.com/pedronauck/docz/issues/81)
|
||||
|
||||
|
||||
|
||||
|
||||
<a name="0.3.0"></a>
|
||||
# [0.3.0](https://github.com/pedronauck/docz/compare/v0.3.0-beta.0...v0.3.0) (2018-06-25)
|
||||
|
||||
|
||||
|
||||
|
||||
**Note:** Version bump only for package docz-example-css-stylus
|
||||
|
||||
<a name="0.3.0-beta.0"></a>
|
||||
# [0.3.0-beta.0](https://github.com/pedronauck/docz/compare/v0.2.11...v0.3.0-beta.0) (2018-06-25)
|
||||
|
||||
|
||||
|
||||
|
||||
**Note:** Version bump only for package docz-example-css-stylus
|
||||
|
||||
<a name="0.2.11"></a>
|
||||
## [0.2.11](https://github.com/pedronauck/docz/compare/v0.2.10...v0.2.11) (2018-06-22)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* some changes on css examples ([058660f](https://github.com/pedronauck/docz/commit/058660f))
|
||||
|
||||
|
||||
|
||||
|
||||
<a name="0.2.10"></a>
|
||||
## [0.2.10](https://github.com/pedronauck/docz/compare/v0.2.9...v0.2.10) (2018-06-21)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* **docz-plugin-css:** add initial version ([#78](https://github.com/pedronauck/docz/issues/78)) ([299372e](https://github.com/pedronauck/docz/commit/299372e))
|
||||
@@ -1,11 +0,0 @@
|
||||
import { css } from 'docz-plugin-css'
|
||||
|
||||
export default {
|
||||
plugins: [
|
||||
title: 'CSS Styles',
|
||||
css({
|
||||
preprocessor: 'stylus',
|
||||
cssmodules: true,
|
||||
}),
|
||||
],
|
||||
}
|
||||
@@ -1,19 +0,0 @@
|
||||
{
|
||||
"name": "docz-example-css-stylus",
|
||||
"version": "0.11.0",
|
||||
"license": "MIT",
|
||||
"scripts": {
|
||||
"dev": "docz dev",
|
||||
"build": "docz build"
|
||||
},
|
||||
"dependencies": {
|
||||
"classnames": "^2.2.6",
|
||||
"prop-types": "^15.6.2",
|
||||
"react": "^16.5.0",
|
||||
"react-dom": "^16.5.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"docz": "^0.11.0",
|
||||
"docz-plugin-css": "^0.11.0"
|
||||
}
|
||||
}
|
||||
@@ -1,23 +0,0 @@
|
||||
import React, { Fragment } from 'react'
|
||||
import cx from 'classnames'
|
||||
import t from 'prop-types'
|
||||
|
||||
import styles from './Alert.module.styl'
|
||||
|
||||
export const Alert = ({ children, kind }) => (
|
||||
<div
|
||||
className={cx(styles.alert, {
|
||||
[styles[kind]]: true,
|
||||
})}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
)
|
||||
|
||||
Alert.propTypes = {
|
||||
kind: t.oneOf(['info', 'positive', 'negative', 'warning']),
|
||||
}
|
||||
|
||||
Alert.defaultProps = {
|
||||
kind: 'info',
|
||||
}
|
||||
@@ -1,40 +0,0 @@
|
||||
---
|
||||
name: Alert
|
||||
menu: Components
|
||||
---
|
||||
|
||||
import { Playground, PropsTable } from 'docz'
|
||||
import { Alert } from './Alert'
|
||||
|
||||
# Alert
|
||||
|
||||
## Properties
|
||||
|
||||
<PropsTable of={Alert} />
|
||||
|
||||
## Basic usage
|
||||
|
||||
<Playground>
|
||||
<Alert>Some message</Alert>
|
||||
</Playground>
|
||||
|
||||
## Using different kinds
|
||||
|
||||
<Playground>
|
||||
<Alert kind="info">Some message</Alert>
|
||||
<Alert kind="positive">Some message</Alert>
|
||||
<Alert kind="negative">Some message</Alert>
|
||||
<Alert kind="warning">Some message</Alert>
|
||||
</Playground>
|
||||
|
||||
## Use with children as a function
|
||||
|
||||
<Playground>
|
||||
{() => {
|
||||
const message = 'Hello world'
|
||||
|
||||
return (
|
||||
<Alert>{message}</Alert>
|
||||
)
|
||||
}}
|
||||
</Playground>
|
||||
@@ -1,22 +0,0 @@
|
||||
.alert {
|
||||
padding: 15px 20px;
|
||||
background: white;
|
||||
border-radius: 3px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.info {
|
||||
background: #5352ED;
|
||||
}
|
||||
|
||||
.positive {
|
||||
background: #2ED573;
|
||||
}
|
||||
|
||||
.negative {
|
||||
background: #FF4757;
|
||||
}
|
||||
|
||||
.warning {
|
||||
background: #FFA502;
|
||||
}
|
||||
@@ -1,23 +0,0 @@
|
||||
---
|
||||
name: Getting Started
|
||||
route: /
|
||||
order: 1
|
||||
---
|
||||
|
||||
import './index.styl'
|
||||
|
||||
# Getting Started
|
||||
|
||||
Design systems enable teams to build better products faster by making design reusable—reusability makes scale possible. This is the heart and primary value of design systems. A design system is a collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications.
|
||||
|
||||
Regardless of the technologies and tools behind them, a successful design system follows these guiding principles:
|
||||
|
||||
- **It’s consistent**. The way components are built and managed follows a predictable pattern.
|
||||
- **It’s self-contained**. Your design system is treated as a standalone dependency.
|
||||
- **It’s reusable**. You’ve built components so they can be reused in many contexts.
|
||||
- **It’s accessible**. Applications built with your design system are usable by as many people as possible, no matter how they access the web.
|
||||
- **It’s robust**. No matter the product or platform to which your design system is applied, it should perform with grace and minimal bugs.
|
||||
|
||||
## Consistency
|
||||
|
||||
Your first, most important task when starting out is to define the rules of your system, document them, and ensure that everyone follows them. When you have clearly documented code standards and best practices in place, designers and developers from across your organization can easily use and, more importantly, contribute to your design system.
|
||||
@@ -1,3 +0,0 @@
|
||||
body {
|
||||
background: white;
|
||||
}
|
||||
3
examples/css/README.md
Normal file
3
examples/css/README.md
Normal file
@@ -0,0 +1,3 @@
|
||||
# ⚠️ [MOVED REPO](https://github.com/pedronauck/docz-plugin-css/tree/master/examples)
|
||||
|
||||
To avoid some performances issues, we moved all css examples to some new repo!
|
||||
@@ -1,3 +0,0 @@
|
||||
{
|
||||
"presets": ["react-native", "@babel/preset-flow"]
|
||||
}
|
||||
@@ -1,4 +0,0 @@
|
||||
[ignore]
|
||||
<PROJECT_ROOT>/node_modules/**
|
||||
[libs]
|
||||
./flow-typed
|
||||
@@ -1,11 +0,0 @@
|
||||
{
|
||||
"requirePragma": false,
|
||||
"printWidth": 80,
|
||||
"tabWidth": 2,
|
||||
"useTabs": false,
|
||||
"semi": false,
|
||||
"singleQuote": true,
|
||||
"trailingComma": "es5",
|
||||
"bracketSpacing": true,
|
||||
"jsxBracketSameLine": false
|
||||
}
|
||||
@@ -1,24 +0,0 @@
|
||||
{
|
||||
"name": "docz-example-react-native-flow",
|
||||
"version": "0.11.0",
|
||||
"license": "MIT",
|
||||
"scripts": {
|
||||
"dev": "docz dev",
|
||||
"build": "docz build"
|
||||
},
|
||||
"dependencies": {
|
||||
"react": "^16.5.0",
|
||||
"react-dom": "^16.5.0",
|
||||
"react-native": "^0.56.0",
|
||||
"styled-components": "^3.4.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.0.0",
|
||||
"@babel/preset-flow": "^7.0.0",
|
||||
"babel-preset-react-native": "^5.0.2",
|
||||
"docz": "^0.11.0",
|
||||
"docz-plugin-react-native": "^0.11.0",
|
||||
"flow-bin": "^0.80.0",
|
||||
"flow-typed": "^2.5.1"
|
||||
}
|
||||
}
|
||||
@@ -1,36 +0,0 @@
|
||||
// @flow
|
||||
|
||||
import React, { Fragment } from 'react'
|
||||
import { Text as BaseText } from 'react-native'
|
||||
import styled from 'styled-components/native'
|
||||
|
||||
const kinds = {
|
||||
info: '#5352ED',
|
||||
positive: '#2ED573',
|
||||
negative: '#FF4757',
|
||||
warning: '#FFA502',
|
||||
}
|
||||
|
||||
type Kind = 'info' | 'positive' | 'negative' | 'warning'
|
||||
|
||||
type AlertProps = {
|
||||
/**
|
||||
* Set this to change alert kind
|
||||
*/
|
||||
kind: Kind,
|
||||
}
|
||||
|
||||
const AlertStyled = styled.View`
|
||||
padding: 15px 20px;
|
||||
background: white;
|
||||
border-radius: 3px;
|
||||
background: ${({ kind = 'info' }) => kinds[kind]};
|
||||
`
|
||||
|
||||
export const Text = styled(BaseText)`
|
||||
color: white;
|
||||
`
|
||||
|
||||
export const Alert = ({ kind = 'info', ...props }: AlertProps) => (
|
||||
<AlertStyled {...props} kind={kind} />
|
||||
)
|
||||
@@ -1,43 +0,0 @@
|
||||
---
|
||||
name: Alert
|
||||
menu: Components
|
||||
---
|
||||
|
||||
import { Playground, PropsTable } from 'docz'
|
||||
import { Alert, Text } from './Alert'
|
||||
|
||||
# Alert
|
||||
|
||||
## Properties
|
||||
|
||||
<PropsTable of={Alert} />
|
||||
|
||||
## Basic usage
|
||||
|
||||
<Playground>
|
||||
<Alert>
|
||||
<Text>Some message</Text>
|
||||
</Alert>
|
||||
</Playground>
|
||||
|
||||
## Using different kinds
|
||||
|
||||
<Playground>
|
||||
<Alert kind="info"><Text>Some message</Text></Alert>
|
||||
<Alert kind="positive"><Text>Some message</Text></Alert>
|
||||
<Alert kind="negative"><Text>Some message</Text></Alert>
|
||||
<Alert kind="warning"><Text>Some message</Text></Alert>
|
||||
</Playground>
|
||||
|
||||
|
||||
## Use with children as a function
|
||||
|
||||
<Playground>
|
||||
{() => {
|
||||
const message = 'Hello world'
|
||||
|
||||
return (
|
||||
<Alert><Text>{message}</Text></Alert>
|
||||
)
|
||||
}}
|
||||
</Playground>
|
||||
@@ -1,74 +0,0 @@
|
||||
// @flow
|
||||
import React from 'react'
|
||||
import styled from 'styled-components/native'
|
||||
|
||||
const scales = {
|
||||
small: `
|
||||
width: 100px;
|
||||
padding: 5px 10px;
|
||||
font-size: 14;
|
||||
`,
|
||||
normal: `
|
||||
width: 130px;
|
||||
padding: 10px 20px;
|
||||
font-size: 16;
|
||||
`,
|
||||
big: `
|
||||
width: 180px;
|
||||
padding: 20px 30px;
|
||||
font-size: 18;
|
||||
`,
|
||||
}
|
||||
|
||||
const kind = (bg, color) => `
|
||||
background: ${bg};
|
||||
border-color: red;
|
||||
color: ${color};
|
||||
transition: all .3s;
|
||||
`
|
||||
|
||||
const kinds = {
|
||||
primary: kind('#1FB6FF', 'white'),
|
||||
secondary: kind('#5352ED', 'white'),
|
||||
cancel: kind('#FF4949', 'white'),
|
||||
dark: kind('#273444', 'white'),
|
||||
gray: kind('#8492A6', 'white'),
|
||||
}
|
||||
|
||||
const getScale = ({ scale = 'normal' }) => scales[scale]
|
||||
const getKind = ({ kind = 'primary' }) => kinds[kind]
|
||||
|
||||
const ButtonStyled = styled.TouchableOpacity`
|
||||
${getKind};
|
||||
${getScale};
|
||||
cursor: pointer;
|
||||
margin: 3px 5px;
|
||||
border: 0;
|
||||
border-radius: 3px;
|
||||
`
|
||||
|
||||
const Text = styled.Text`
|
||||
${getScale};
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
color: white;
|
||||
text-align: center;
|
||||
color: ${p => kinds[p.outline]};
|
||||
`
|
||||
|
||||
type ButtonProps = {
|
||||
scale: 'small' | 'normal' | 'big',
|
||||
kind: 'primary' | 'secondary' | 'cancel' | 'dark' | 'gray',
|
||||
children: Node,
|
||||
}
|
||||
|
||||
export const Button = ({
|
||||
scale = 'normal',
|
||||
kind = 'primary',
|
||||
outline = false,
|
||||
children,
|
||||
}: ButtonProps) => (
|
||||
<ButtonStyled scale={scale} kind={kind} outline={outline}>
|
||||
<Text scale={scale}>{children}</Text>
|
||||
</ButtonStyled>
|
||||
)
|
||||
@@ -1,12 +0,0 @@
|
||||
# Change Log
|
||||
|
||||
All notable changes to this project will be documented in this file.
|
||||
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
||||
|
||||
<a name="0.11.0"></a>
|
||||
# [0.11.0](https://github.com/pedronauck/docz/compare/v0.10.3...v0.11.0) (2018-09-02)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* integration with react native ([#271](https://github.com/pedronauck/docz/issues/271)) ([ac359ce](https://github.com/pedronauck/docz/commit/ac359ce))
|
||||
6
examples/react-native-prop-types/doczrc.js
vendored
6
examples/react-native-prop-types/doczrc.js
vendored
@@ -1,6 +0,0 @@
|
||||
import { reactNative } from 'docz-plugin-react-native'
|
||||
|
||||
export default {
|
||||
title: 'React Native',
|
||||
plugins: [reactNative()],
|
||||
}
|
||||
@@ -1,46 +0,0 @@
|
||||
---
|
||||
name: Button
|
||||
menu: Components
|
||||
---
|
||||
|
||||
import { Playground, PropsTable } from 'docz'
|
||||
import { Button } from './Button'
|
||||
|
||||
# Button
|
||||
|
||||
Buttons make common actions more obvious and help users more easily perform them. Buttons use labels and sometimes icons to communicate the action that will occur when the user touches them.
|
||||
|
||||
### Best practices
|
||||
|
||||
- Group buttons logically into sets based on usage and importance.
|
||||
- Ensure that button actions are clear and consistent.
|
||||
- The main action of a group set can be a primary button.
|
||||
- Select a single button variation and do not mix them.
|
||||
|
||||
## Properties
|
||||
|
||||
<PropsTable of={Button} />
|
||||
|
||||
## Basic usage
|
||||
|
||||
<Playground>
|
||||
<Button>Click me</Button>
|
||||
</Playground>
|
||||
|
||||
## With different sizes
|
||||
|
||||
<Playground>
|
||||
<Button scale="small">Click me</Button>
|
||||
<Button scale="normal">Click me</Button>
|
||||
<Button scale="big">Click me</Button>
|
||||
</Playground>
|
||||
|
||||
## With different colors
|
||||
|
||||
<Playground>
|
||||
<Button kind="primary">Click me</Button>
|
||||
<Button kind="secondary">Click me</Button>
|
||||
<Button kind="cancel">Click me</Button>
|
||||
<Button kind="dark">Click me</Button>
|
||||
<Button kind="gray">Click me</Button>
|
||||
</Playground>
|
||||
@@ -1,21 +0,0 @@
|
||||
---
|
||||
name: Getting Started
|
||||
route: /
|
||||
order: 1
|
||||
---
|
||||
|
||||
# Getting Started
|
||||
|
||||
Design systems enable teams to build better products faster by making design reusable—reusability makes scale possible. This is the heart and primary value of design systems. A design system is a collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications.
|
||||
|
||||
Regardless of the technologies and tools behind them, a successful design system follows these guiding principles:
|
||||
|
||||
- **It’s consistent**. The way components are built and managed follows a predictable pattern.
|
||||
- **It’s self-contained**. Your design system is treated as a standalone dependency.
|
||||
- **It’s reusable**. You’ve built components so they can be reused in many contexts.
|
||||
- **It’s accessible**. Applications built with your design system are usable by as many people as possible, no matter how they access the web.
|
||||
- **It’s robust**. No matter the product or platform to which your design system is applied, it should perform with grace and minimal bugs.
|
||||
|
||||
## Consistency
|
||||
|
||||
Your first, most important task when starting out is to define the rules of your system, document them, and ensure that everyone follows them. When you have clearly documented code standards and best practices in place, designers and developers from across your organization can easily use and, more importantly, contribute to your design system.
|
||||
@@ -1,5 +1,5 @@
|
||||
{
|
||||
"name": "docz-example-react-native-prop-types",
|
||||
"name": "docz-example-react-native",
|
||||
"version": "0.11.0",
|
||||
"license": "MIT",
|
||||
"scripts": {
|
||||
Reference in New Issue
Block a user