Skip to content

Commit 8f7e5d1

Browse files
gesquincaMikeLockz
gesquinca
authored and
MikeLockz
committed
added guidelines markdown file and story for button (#220)
* added guidelines markdown file and story for button * Updated Button documentation based on framework Props and theming need checking * Format update test * format update test * More formatting updates for MD * Created button design guidelines * Fixed missing ) * Fixed links * fixed formatting * Update GUIDELINES.md * Update GUIDELINES.md * Update GUIDELINES.md * Create welcome.md * First stab at welcome page * Update welcome.md * Seeing if I can get welcome to appear in preview * Update index.stories.js * Update index.stories.js * Updating button structure * Update button.stories.js * Fixing button documentation rendering. * Added Full-width header * Button examples updated * Adding styled-system props table. Renaming markdown files and updating references. * capitalised GUIDELINES * Adding table of component props. * shortened disabled prop * Fixed a few typos * Updated uPort docs and Button design guidelines * uPort documentation finished * Updated MetaMasK and uPort buttons * Updated TextButton and OutlineButton * Button and Headings updated * Design guidelines added for header * Public address to sentence case * Avatar updated * Work done on inputs and forms * Update avatar.stories.js * Structural tweaks * Slider structure updated * Text area structure complete * Loader structure updated * Text structured and documentation naming made consistent * Restructuring tooltips * Tooltip design guidelines started * Props added for loader and tooltip * ToastMessage structure started * Table structure * Blockie, Image, Pill, Table and ToastMessage provider done * Added links to provider documentation * ToastMessage design guidelines done * Outreach card added * Card and pills or do/don'ts * Dos / Don'ts updated * Button design guidelines updated * button design guideline padding * Padding for design guidelines * padding * Transaction state demo docs * Transaction state doc updated * transaction state doc updated * Adding prop tables to avatar. Removing question marks from Button prop values. Added borderWidth prop values to theme. * Updated docs * Adding prop tables to Box. Adding indices prop to theme. Cleaning up Blockie and Avatar and Flex and Box. * Adding prop table to Card. Adding design guidelines for Card. Updating wording on other component docs. * Adding props tables for checkbox, field, form, heading, icon. * Committing merge resolutions. * Fixing bad markup in Avatar and Box. * Adding prop table for Image, Input, Link, Loader components. * Adding props table to Modal, Pill, Progress, PublicAddress components. * Adding props table for QRCode, Radio, Select components. * Adding props table for Select, Slider, Table, Text components. * Adding props table for Textarea, TextButton, TextArea, ToastMessage, Tooltip component. * Updating failing snapshot tests due to new theme props. * More updates * Text design guidelines updated * Added related components to text * QR code updated * PublicAddress design guidelines * Pill updates * blockie updated * Welcome updated * Removed getting started from Welcome * Added spacing between bottom cards (welcome) * Updated navigation Might revert * Adding links to the welcome page. * Renaming side nav top-level to Components from Rimble-UI. * Renaming all component markdown files to match purpose. * Adding links to stories and markdown files. Set markdown file links to absolute paths. Set links in story files using linkTo addon. * Adding local storybook build to ignore file. * Freezing all versions in storybook's package.json to remedy broken build. * Fixed references * Adding emotion to fix broken build. * Capitalised markdown files * Adding @storybook/theming module and fixing a story's markdown imports. * Renaming files again. * Adding api method and object description tables to ToastMessage.Provider component. * Adding CodeBlock component to Storybook. Adding syntax highlighting, copy snippet button. * Updating button codeblocks. * Adding CodeBlock to about half the components. * CodeBlock for input, loader metamaskbutton components. * Finished implmenting CodeBlock component in docs. * Fixing problem with showing documentation markdown on top of guideline docs. * Fixing width and alignment of all stories to be full width. * Adding CodeBlock to OutlineButton. Small style tweaks. Fixing missing links. * Renaming storybook story files to match component name. * Some format tweaks, welcome page updated, Toastmessage codeblocks added * upgrade storybook version * Revert "upgrade storybook version" This reverts commit d2e633b. * upgrade storybook * upgraded styled-system to latest version * removed ratio usaged. deprecated in styled-system. Use `size` instead. * Fixed button content guideline * yarn install * changed background to transparent instead of white Discourage users from using OutlineButton as a white button on dark backgrounds. The background and text color of the Button can be changed. * Revert "changed background to transparent instead of white" This reverts commit 38b5619. * changed this to use the "as" polymorphic prop Same output visually, but more "correct". We'll fix this with some changes to the Button components in a different branch * Removed confusing button guideline * Changelog added * Updating failing snapshot tests.
1 parent e0a58aa commit 8f7e5d1

File tree

158 files changed

+8997
-3990
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

158 files changed

+8997
-3990
lines changed

‎.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,3 +23,4 @@ yarn-error.log*
2323

2424
# Generated by storybook@4
2525
.cache
26+
example/storybook-static

‎README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
[![Travis Build Status](https://travis-ci.com/ConsenSys/rimble-ui.svg?branch=master)](https://travis-ci.com/ConsenSys/rimble-ui)
88
[![Join the community on Spectrum](https://withspectrum.github.io/badge/badge.svg)](https://spectrum.chat/rimble)
99

10-
Rimble is a project from Consensys Design, aiming to provide adaptable components and design standards for decentralized applications (dApps). Our goal is simply to to make it easier to build dApps with outstanding user experience. If you're interested, we have written a bit more about [our rationale and approach to building Rimble](https://blog.prototypr.io/this-is-rimble-d0f1ad26b8b6).
10+
Rimble is a project from ConsenSys Design, aiming to provide adaptable components and design standards for decentralized applications (dApps). Our goal is simply to to make it easier to build dApps with outstanding user experience. If you're interested, we have written a bit more about [our rationale and approach to building Rimble](https://blog.prototypr.io/this-is-rimble-d0f1ad26b8b6).
1111

1212
Rimble is in initial development and should not be considered stable today. We have made the project public in a very early stage of work in order to gather feedback from the community of designers and developers building dApps.
1313

‎example/package.json

Lines changed: 25 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,10 @@
55
"license": "MIT",
66
"private": true,
77
"dependencies": {
8-
"prop-types": "^15.7.2",
9-
"react": "16.8.4",
10-
"react-dom": "^16.8.5",
11-
"react-scripts": "^2.1.8",
8+
"prop-types": "15.7.2",
9+
"react": "16.8.6",
10+
"react-dom": "16.8.6",
11+
"react-scripts": "2.1.8",
1212
"rimble-ui": "link:.."
1313
},
1414
"scripts": {
@@ -21,16 +21,25 @@
2121
"deploy-storybook": "storybook-to-ghpages"
2222
},
2323
"devDependencies": {
24-
"@babel/core": "^7.4.0",
25-
"@storybook/addon-a11y": "^5.0.5",
26-
"@storybook/addon-actions": "^5.0.5",
27-
"@storybook/addon-links": "^5.0.5",
28-
"@storybook/addon-viewport": "^5.0.5",
29-
"@storybook/addons": "^5.0.5",
30-
"@storybook/react": "^5.0.5",
31-
"@storybook/storybook-deployer": "^2.8.1",
32-
"babel-loader": "^8.0.5",
33-
"storybook-addon-styled-component-theme": "^1.1.1",
34-
"storybook-readme": "^5.0.1"
35-
}
24+
"@babel/core": "7.4.3",
25+
"@storybook/addon-a11y": "5.0.6",
26+
"@storybook/addon-actions": "5.0.6",
27+
"@storybook/addon-links": "5.0.6",
28+
"@storybook/addon-viewport": "5.0.6",
29+
"@storybook/addons": "5.0.6",
30+
"@storybook/react": "5.0.6",
31+
"@storybook/storybook-deployer": "2.8.1",
32+
"@storybook/theming": "^5.0.6",
33+
"babel-loader": "8.0.5",
34+
"prismjs": "^1.16.0",
35+
"react-element-to-jsx-string": "^14.0.2",
36+
"storybook-addon-styled-component-theme": "1.1.1",
37+
"storybook-readme": "5.0.1"
38+
},
39+
"browserslist": [
40+
">0.2%",
41+
"not dead",
42+
"not ie <= 11",
43+
"not op_mini all"
44+
]
3645
}

‎example/src/components/CodeBlock.css

Lines changed: 187 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,187 @@
1+
/*
2+
3+
Name: Base16 Atelier Sulphurpool Light
4+
Author: Bram de Haan (http://atelierbram.github.io/syntax-highlighting/atelier-schemes/sulphurpool)
5+
6+
Prism template by Bram de Haan (http://atelierbram.github.io/syntax-highlighting/prism/)
7+
Original Base16 color scheme by Chris Kempson (https://github.com/chriskempson/base16)
8+
9+
*/
10+
code[class*='language-'],
11+
pre[class*='language-'] {
12+
font-family: Consolas, Menlo, Monaco, 'Andale Mono WT', 'Andale Mono',
13+
'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono',
14+
'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L',
15+
'Courier New', Courier, monospace;
16+
font-size: 14px;
17+
line-height: 1.375;
18+
direction: ltr;
19+
text-align: left;
20+
white-space: pre;
21+
word-spacing: normal;
22+
word-break: normal;
23+
-moz-tab-size: 4;
24+
-o-tab-size: 4;
25+
tab-size: 4;
26+
-webkit-hyphens: none;
27+
-moz-hyphens: none;
28+
-ms-hyphens: none;
29+
hyphens: none;
30+
background: #f5f7ff;
31+
color: #5e6687;
32+
}
33+
34+
pre[class*='language-']::-moz-selection,
35+
pre[class*='language-'] ::-moz-selection,
36+
code[class*='language-']::-moz-selection,
37+
code[class*='language-'] ::-moz-selection {
38+
text-shadow: none;
39+
background: #dfe2f1;
40+
}
41+
42+
pre[class*='language-']::selection,
43+
pre[class*='language-'] ::selection,
44+
code[class*='language-']::selection,
45+
code[class*='language-'] ::selection {
46+
text-shadow: none;
47+
background: #dfe2f1;
48+
}
49+
50+
/* Code blocks */
51+
pre[class*='language-'] {
52+
padding: 1em;
53+
margin: 0.5em 0;
54+
overflow: auto;
55+
}
56+
57+
/* Inline code */
58+
:not(pre) > code[class*='language-'] {
59+
padding: 0.1em;
60+
border-radius: 0.3em;
61+
}
62+
63+
.token.comment,
64+
.token.prolog,
65+
.token.doctype,
66+
.token.cdata {
67+
color: #898ea4;
68+
}
69+
70+
.token.punctuation {
71+
color: #5e6687;
72+
}
73+
74+
.token.namespace {
75+
opacity: 0.7;
76+
}
77+
78+
.token.operator,
79+
.token.boolean,
80+
.token.number {
81+
color: #c76b29;
82+
}
83+
84+
.token.property {
85+
color: #c08b30;
86+
}
87+
88+
.token.tag {
89+
color: #3d8fd1;
90+
}
91+
92+
.token.string {
93+
color: #22a2c9;
94+
}
95+
96+
.token.selector {
97+
color: #6679cc;
98+
}
99+
100+
.token.attr-name {
101+
color: #c76b29;
102+
}
103+
104+
.token.entity,
105+
.token.url,
106+
.language-css .token.string,
107+
.style .token.string {
108+
color: #22a2c9;
109+
}
110+
111+
.token.attr-value,
112+
.token.keyword,
113+
.token.control,
114+
.token.directive,
115+
.token.unit {
116+
color: #ac9739;
117+
}
118+
119+
.token.statement,
120+
.token.regex,
121+
.token.atrule {
122+
color: #22a2c9;
123+
}
124+
125+
.token.placeholder,
126+
.token.variable {
127+
color: #3d8fd1;
128+
}
129+
130+
.token.deleted {
131+
text-decoration: line-through;
132+
}
133+
134+
.token.inserted {
135+
border-bottom: 1px dotted #202746;
136+
text-decoration: none;
137+
}
138+
139+
.token.italic {
140+
font-style: italic;
141+
}
142+
143+
.token.important,
144+
.token.bold {
145+
font-weight: bold;
146+
}
147+
148+
.token.important {
149+
color: #c94922;
150+
}
151+
152+
.token.entity {
153+
cursor: help;
154+
}
155+
156+
pre > code.highlight {
157+
outline: 0.4em solid #c94922;
158+
outline-offset: 0.4em;
159+
}
160+
161+
/* overrides color-values for the Line Numbers plugin
162+
* http://prismjs.com/plugins/line-numbers/
163+
*/
164+
.line-numbers .line-numbers-rows {
165+
border-right-color: #dfe2f1;
166+
}
167+
168+
.line-numbers-rows > span:before {
169+
color: #979db4;
170+
}
171+
172+
/* overrides color-values for the Line Highlight plugin
173+
* http://prismjs.com/plugins/line-highlight/
174+
*/
175+
.line-highlight {
176+
background: rgba(107, 115, 148, 0.2);
177+
background: -webkit-linear-gradient(
178+
left,
179+
rgba(107, 115, 148, 0.2) 70%,
180+
rgba(107, 115, 148, 0)
181+
);
182+
background: linear-gradient(
183+
to right,
184+
rgba(107, 115, 148, 0.2) 70%,
185+
rgba(107, 115, 148, 0)
186+
);
187+
}

‎example/src/components/CodeBlock.js

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
import React from 'react';
2+
import { renderToStaticMarkup } from 'react-dom/server';
3+
import reactElementToJSXString from 'react-element-to-jsx-string';
4+
import Prism from 'prismjs';
5+
import PrismJsx from 'prismjs/components/prism-jsx.min';
6+
import { Flex, OutlineButton, Box, Heading, Checkbox } from 'rimble-ui';
7+
import './CodeBlock.css';
8+
9+
const jsxStringOptions = {
10+
showDefaultProps: false,
11+
};
12+
13+
class CodeBlock extends React.Component {
14+
state = { copySuccess: '' };
15+
16+
componentDidMount() {
17+
Prism.highlightAll();
18+
let code = '';
19+
this.props.textOnly
20+
? (code = this.props.children)
21+
: (code = reactElementToJSXString(this.props.children, jsxStringOptions));
22+
23+
this.setState({ code });
24+
}
25+
26+
copyToClipboard = e => {
27+
this.textArea.select();
28+
document.execCommand('copy');
29+
e.target.focus();
30+
this.setState({ copySuccess: 'Copied!' });
31+
};
32+
render() {
33+
return (
34+
<Box mb={4} minWidth={['100%', '600px', '600px']}>
35+
{this.props.textOnly ? (
36+
<Box>
37+
<Flex
38+
justifyContent={'space-between'}
39+
alignItems={'center'}
40+
position={'relative'}
41+
mb={'-1em'}
42+
>
43+
<Heading.h6>Example code</Heading.h6>
44+
<OutlineButton size="small" onClick={this.copyToClipboard}>
45+
{this.state.copySuccess
46+
? this.state.copySuccess
47+
: `Copy Snippet`}
48+
</OutlineButton>
49+
<textarea
50+
ref={textarea => (this.textArea = textarea)}
51+
style={{
52+
height: '1px',
53+
width: '1px',
54+
position: 'absolute',
55+
top: '50%',
56+
right: '3px',
57+
zIndex: '-1',
58+
}}
59+
value={this.state.code}
60+
/>
61+
</Flex>
62+
<pre className="lang-jsx">
63+
<code>{this.props.children}</code>
64+
</pre>
65+
</Box>
66+
) : (
67+
<Box>
68+
<Flex>{this.props.children}</Flex>
69+
<Flex
70+
justifyContent={'space-between'}
71+
alignItems={'center'}
72+
position={'relative'}
73+
mb={'-1em'}
74+
>
75+
<Heading.h6>Example code</Heading.h6>
76+
<OutlineButton size="small" onClick={this.copyToClipboard}>
77+
{this.state.copySuccess
78+
? this.state.copySuccess
79+
: `Copy Snippet`}
80+
</OutlineButton>
81+
<textarea
82+
ref={textarea => (this.textArea = textarea)}
83+
style={{
84+
height: '1px',
85+
width: '1px',
86+
position: 'absolute',
87+
top: '50%',
88+
right: '3px',
89+
zIndex: '-1',
90+
}}
91+
value={this.state.code}
92+
/>
93+
</Flex>
94+
<pre className="lang-jsx">
95+
<code>
96+
{reactElementToJSXString(this.props.children, jsxStringOptions)}
97+
</code>
98+
</pre>
99+
</Box>
100+
)}
101+
</Box>
102+
);
103+
}
104+
}
105+
106+
export default CodeBlock;

0 commit comments

Comments
 (0)