mirror of
https://github.com/filecoin-project/slate.git
synced 2024-11-23 05:54:49 +03:00
Issue #8
This commit is contained in:
jasonleyser
parent
e662a09490
commit
2f700b98ff
@ -1707,3 +1707,44 @@ export const StatDownload = (props) => {
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
// ----------------------------------------------------------------------------
|
||||
// CODE BLOCK
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
const STYLES_CODE_BLOCK = css`
|
||||
background-color: ${Constants.system.pitchBlack};
|
||||
color: ${Constants.system.white};
|
||||
border-radius: 4px;
|
||||
padding: 24px 24px 24px 24px;
|
||||
word-wrap: break-word;
|
||||
white-space: pre-wrap;
|
||||
width: 100%;
|
||||
`;
|
||||
|
||||
export const CodeBlock = (props) => {
|
||||
return (
|
||||
<div css={STYLES_CODE_BLOCK}>
|
||||
<code {...props} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@ -13,26 +13,80 @@ export default class SystemPageButtons extends React.Component {
|
||||
</System.H1>
|
||||
<br />
|
||||
<br />
|
||||
<System.P>An example of button components.</System.P>
|
||||
<System.P>
|
||||
The Button component is used to trigger an action or event, such as submitting a form or saving users information.
|
||||
</System.P>
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<System.H2>Regular width</System.H2>
|
||||
<hr />
|
||||
<br />
|
||||
<System.P>
|
||||
There are three variations of the regular width button compontent.<br />
|
||||
Primary, Secondary and Disabled.
|
||||
</System.P>
|
||||
<br />
|
||||
<System.ButtonPrimary>Primary</System.ButtonPrimary>
|
||||
<System.ButtonSecondary>Secondary</System.ButtonSecondary>
|
||||
<System.ButtonDisabled>Disabled</System.ButtonDisabled>
|
||||
<br />
|
||||
<br />
|
||||
<System.CodeBlock>
|
||||
{`<System.ButtonPrimary>Primary</System.ButtonPrimary>`}
|
||||
<br /><br />
|
||||
{`<System.ButtonSecondary>Secondary</System.ButtonSecondary>`}
|
||||
<br /><br />
|
||||
{`<System.ButtonDisabled>Disabled</System.ButtonDisabled>`}
|
||||
</System.CodeBlock>
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<System.H2>Full width</System.H2>
|
||||
<hr />
|
||||
<br />
|
||||
<System.P>
|
||||
There are three variations of the full width button compontent. <br />
|
||||
Primary, Secondary and Disabled.
|
||||
</System.P>
|
||||
<br />
|
||||
<System.ButtonPrimaryFull>Primary</System.ButtonPrimaryFull>
|
||||
<br />
|
||||
<System.ButtonSecondaryFull>Secondary</System.ButtonSecondaryFull>
|
||||
<br />
|
||||
<System.ButtonDisabledFull>Disabled</System.ButtonDisabledFull>
|
||||
<br />
|
||||
<br />
|
||||
<System.CodeBlock>
|
||||
{`<System.ButtonPrimaryFull>Primary</System.ButtonPrimaryFull>`}
|
||||
<br /><br />
|
||||
{`<System.ButtonSecondaryFull>Secondary</System.ButtonSecondaryFull>`}
|
||||
<br /><br />
|
||||
{`<System.ButtonDisabledFull>Disabled</System.ButtonDisabledFull>`}
|
||||
</System.CodeBlock>
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<System.H2>Labels</System.H2>
|
||||
<hr />
|
||||
<br />
|
||||
<System.P>
|
||||
You can add the <i>type='label'</i> prop to convert any of the above buttons into a label.
|
||||
</System.P>
|
||||
<br />
|
||||
<System.ButtonPrimary type='label'>Label</System.ButtonPrimary>
|
||||
<System.ButtonSecondary type='label'>Label</System.ButtonSecondary>
|
||||
<System.ButtonDisabled type='label'>Label</System.ButtonDisabled>
|
||||
<br />
|
||||
<br />
|
||||
<System.CodeBlock>
|
||||
{`<System.ButtonPrimary type='label'>Label</System.ButtonPrimary>
|
||||
|
||||
<System.ButtonSecondary type='label'>Label</System.ButtonSecondary>
|
||||
|
||||
<System.ButtonDisabled type='label'>Label</System.ButtonDisabled>`}
|
||||
</System.CodeBlock>
|
||||
|
||||
<System.ButtonPrimary>Button Primary</System.ButtonPrimary>
|
||||
<br />
|
||||
<br />
|
||||
<System.ButtonPrimaryFull>Button Primary Full</System.ButtonPrimaryFull>
|
||||
<br />
|
||||
<br />
|
||||
<System.ButtonSecondary>Button Secondary</System.ButtonSecondary>
|
||||
<br />
|
||||
<br />
|
||||
<System.ButtonSecondaryFull>Button Secondary Full</System.ButtonSecondaryFull>
|
||||
<br />
|
||||
<br />
|
||||
<System.ButtonDisabled>Button Disabled</System.ButtonDisabled>
|
||||
<br />
|
||||
<br />
|
||||
<System.ButtonDisabledFull>Button Disabled</System.ButtonDisabledFull>
|
||||
</SystemPage>
|
||||
);
|
||||
}
|
||||
|
||||
@ -37,10 +37,63 @@ export default class SystemPageCardTabs extends React.Component {
|
||||
</System.H1>
|
||||
<br />
|
||||
<br />
|
||||
<System.P>An example of card tabs components.</System.P>
|
||||
<System.P>The CardTabGroup component is used to allow the users to switch between views.</System.P>
|
||||
<br />
|
||||
<br />
|
||||
<System.H2>Usage</System.H2>
|
||||
<hr />
|
||||
<br />
|
||||
<System.P>Define the tab group values and labels.</System.P>
|
||||
<br />
|
||||
<System.CodeBlock>
|
||||
{`const TAB_GROUP_TWO = [
|
||||
{ value: '1', label: 'Capricorn' },
|
||||
{ value: '2', label: 'Aquarius' },
|
||||
];
|
||||
|
||||
const TAB_GROUP_FOUR = [
|
||||
{ value: '1', label: 'Capricorn' },
|
||||
{ value: '2', label: 'Aquarius' },
|
||||
{ value: '3', label: 'Pisces' },
|
||||
{ value: '4', label: 'Aries' },
|
||||
];`}
|
||||
</System.CodeBlock>
|
||||
<br />
|
||||
<System.P>Define the CardTab value states and handle the state when a tab is changed.</System.P>
|
||||
<br />
|
||||
<System.CodeBlock>
|
||||
{`state = {
|
||||
eighteen: '2',
|
||||
nineteen: null,
|
||||
};
|
||||
|
||||
_handleChange = (e) => {
|
||||
this.setState({ [e.target.name]: e.target.value });
|
||||
};`}
|
||||
</System.CodeBlock>
|
||||
<br />
|
||||
<System.P>Declare the CardTabGroup component.</System.P>
|
||||
<br />
|
||||
<System.CodeBlock>
|
||||
{`<System.CardTabGroup
|
||||
name="eighteen"
|
||||
options={TAB_GROUP_TWO}
|
||||
value={this.state.eighteen}
|
||||
onChange={this._handleChange}
|
||||
/>
|
||||
|
||||
<System.CardTabGroup
|
||||
name="nineteen"
|
||||
options={TAB_GROUP_FOUR}
|
||||
value={this.state.nineteen}
|
||||
onChange={this._handleChange}
|
||||
/>`}
|
||||
</System.CodeBlock>
|
||||
<br />
|
||||
<br />
|
||||
<System.H2>Output</System.H2>
|
||||
<hr />
|
||||
<br />
|
||||
<System.CardTabGroup
|
||||
name="eighteen"
|
||||
options={TAB_GROUP_TWO}
|
||||
|
||||
@ -22,21 +22,61 @@ export default class SystemPageCheckboxes extends React.Component {
|
||||
</System.H1>
|
||||
<br />
|
||||
<br />
|
||||
<System.P>An example of checkbox components.</System.P>
|
||||
<System.P>
|
||||
The Checkbox component is used in forms when a users needs to select one or more values from multiple options.
|
||||
</System.P>
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<System.H2>Usage</System.H2>
|
||||
<hr />
|
||||
<br />
|
||||
<System.P>Define the boolean Checkbox states and handle the state change the when user checks or unchecks the CheckBox.</System.P>
|
||||
<br />
|
||||
<System.CodeBlock>
|
||||
{`state = {
|
||||
six: false,
|
||||
seven: true,
|
||||
};
|
||||
|
||||
_handleChange = (e) => {
|
||||
this.setState({ [e.target.name]: e.target.value });
|
||||
}; `}
|
||||
</System.CodeBlock>
|
||||
<br />
|
||||
<br />
|
||||
<System.P>Declare the CheckBox component.</System.P>
|
||||
<br />
|
||||
|
||||
<System.CodeBlock>
|
||||
{`<System.CheckBox name="six" value={this.state.six} onChange={this._handleChange}>
|
||||
<strong>Unchecked</strong>
|
||||
<br />
|
||||
This CheckBox default is unchecked.
|
||||
</System.CheckBox>
|
||||
|
||||
<System.CheckBox name="seven" value={this.state.seven} onChange={this._handleChange}>
|
||||
<strong>Checked</strong>
|
||||
<br />
|
||||
This CheckBox default is checked.
|
||||
</System.CheckBox>`}
|
||||
</System.CodeBlock>
|
||||
<br />
|
||||
<br />
|
||||
<System.H2>Output</System.H2>
|
||||
<hr />
|
||||
<br />
|
||||
<System.CheckBox name="six" value={this.state.six} onChange={this._handleChange}>
|
||||
<strong>I want to attend IPFS Pinning Summit</strong>
|
||||
<strong>Unchecked</strong>
|
||||
<br />
|
||||
The IPFS Pinning Summit is a 2-day virtual conference designed for the infrastructure and service providers of
|
||||
the distributed web.
|
||||
This CheckBox default is unchecked.
|
||||
</System.CheckBox>
|
||||
<br />
|
||||
<br />
|
||||
|
||||
<System.CheckBox name="seven" value={this.state.seven} onChange={this._handleChange}>
|
||||
<strong>Return Cake</strong>
|
||||
<br />I want Cake to become a different object.
|
||||
<strong>Checked</strong>
|
||||
<br />
|
||||
This CheckBox default is checked.
|
||||
</System.CheckBox>
|
||||
</SystemPage>
|
||||
);
|
||||
|
||||
@ -38,10 +38,48 @@ export default class SystemPageColors extends React.Component {
|
||||
<System.P>All of the colors the Filecoin Client uses.</System.P>
|
||||
<br />
|
||||
<br />
|
||||
<System.H2>Usage</System.H2>
|
||||
<hr />
|
||||
<br />
|
||||
<System.P>Import Constants.</System.P>
|
||||
<br />
|
||||
<System.CodeBlock>
|
||||
{`import * as Constants from '~/common/constants';`}
|
||||
</System.CodeBlock>
|
||||
<br />
|
||||
<System.P>Import Constants.</System.P>
|
||||
<br />
|
||||
<System.CodeBlock>
|
||||
{`{Constants.system.white};
|
||||
|
||||
{Constants.system.foreground};
|
||||
|
||||
{Constants.system.gray};
|
||||
|
||||
{Constants.system.border};
|
||||
|
||||
{Constants.system.darkGray};
|
||||
|
||||
{Constants.system.black};
|
||||
|
||||
{Constants.system.pitchBlack};
|
||||
|
||||
{Constants.system.brand};
|
||||
|
||||
{Constants.system.green};
|
||||
|
||||
{Constants.system.yellow};
|
||||
|
||||
{Constants.system.red};`}
|
||||
</System.CodeBlock>
|
||||
<br />
|
||||
<br />
|
||||
<System.H2>Output</System.H2>
|
||||
<hr />
|
||||
<br />
|
||||
{Object.keys(Constants.system).map((each) => {
|
||||
const hex = Constants.system[each];
|
||||
const rgba = Strings.hexToRGBA(hex);
|
||||
|
||||
return (
|
||||
<div
|
||||
key={each}
|
||||
|
||||
@ -53,9 +53,87 @@ export default class SystemPageDropdowns extends React.Component {
|
||||
</System.H1>
|
||||
<br />
|
||||
<br />
|
||||
<System.P>An example of dropdown components.</System.P>
|
||||
<System.P>The Dropdown component is used to present the user a list of values where they can select a single option.</System.P>
|
||||
<br />
|
||||
<br />
|
||||
<System.H2>Usage</System.H2>
|
||||
<hr />
|
||||
<br />
|
||||
<System.P>Define the dropdown menu options.</System.P>
|
||||
<br />
|
||||
<System.CodeBlock>
|
||||
{`const SELECT_MENU_OPTIONS = [
|
||||
{ value: '1', name: 'Capricorn' },
|
||||
{ value: '2', name: 'Aquarius' },
|
||||
{ value: '3', name: 'Pisces' },
|
||||
{ value: '4', name: 'Aries' },
|
||||
{ value: '5', name: 'Taurus' },
|
||||
{ value: '6', name: 'Gemini' },
|
||||
{ value: '7', name: 'Cancer' },
|
||||
{ value: '8', name: 'Leo' },
|
||||
{ value: '9', name: 'Virgo' },
|
||||
{ value: '10', name: 'Libra' },
|
||||
{ value: '11', name: 'Scorpio' },
|
||||
{ value: '12', name: 'Sagittarus' },
|
||||
];
|
||||
|
||||
const SELECT_MENU_MAP = {
|
||||
'1': 'Capricorn',
|
||||
'2': 'Aquarius',
|
||||
'3': 'Pisces',
|
||||
'4': 'Aries',
|
||||
'5': 'Taurus',
|
||||
'6': 'Gemini',
|
||||
'7': 'Cancer',
|
||||
'8': 'Leo',
|
||||
'9': 'Virgo',
|
||||
'10': 'Libra',
|
||||
'11': 'Scorpio',
|
||||
'12': 'Sagittarus',
|
||||
};`}
|
||||
</System.CodeBlock>
|
||||
<br />
|
||||
<System.P>Define the Dropdown value states and handle the state change the when a dropdown value is selected.</System.P>
|
||||
<br />
|
||||
<System.CodeBlock>
|
||||
{`state = {
|
||||
one: '1',
|
||||
two: '3',
|
||||
three: '1',
|
||||
};
|
||||
|
||||
_handleChange = (e) => {
|
||||
this.setState({ [e.target.name]: e.target.value });
|
||||
};`}
|
||||
</System.CodeBlock>
|
||||
<br />
|
||||
<System.P>Declare the Dropdown component.</System.P>
|
||||
<br />
|
||||
<System.CodeBlock>
|
||||
{`<System.SelectMenu
|
||||
name="one"
|
||||
value={this.state.one}
|
||||
category="horoscope"
|
||||
onChange={this._handleChange}
|
||||
options={SELECT_MENU_OPTIONS}>
|
||||
{SELECT_MENU_MAP[this.state.one]}
|
||||
</System.SelectMenu>
|
||||
|
||||
<System.SelectMenuFull
|
||||
label="Pick a horoscope"
|
||||
name="three"
|
||||
value={this.state.three}
|
||||
category="horoscope"
|
||||
onChange={this._handleChange}
|
||||
options={SELECT_MENU_OPTIONS}>
|
||||
{SELECT_MENU_MAP[this.state.three]}
|
||||
</System.SelectMenuFull>`}
|
||||
</System.CodeBlock>
|
||||
<br />
|
||||
<br />
|
||||
<System.H2>Output</System.H2>
|
||||
<hr />
|
||||
<br />
|
||||
<System.SelectMenu
|
||||
name="one"
|
||||
value={this.state.one}
|
||||
@ -66,18 +144,6 @@ export default class SystemPageDropdowns extends React.Component {
|
||||
</System.SelectMenu>
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<System.SelectMenuFull
|
||||
name="two"
|
||||
value={this.state.two}
|
||||
category="horoscope"
|
||||
onChange={this._handleChange}
|
||||
options={SELECT_MENU_OPTIONS}>
|
||||
{SELECT_MENU_MAP[this.state.two]}
|
||||
</System.SelectMenuFull>
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<System.SelectMenuFull
|
||||
label="Pick a horoscope"
|
||||
name="three"
|
||||
|
||||
@ -14,10 +14,28 @@ export default class SystemPageGlobe extends React.Component {
|
||||
</System.H1>
|
||||
<br />
|
||||
<br />
|
||||
<System.P>An example of a globe that will be used for showing peers and file transfers.</System.P>
|
||||
<System.P>The Globe component is used to show peers and file transfers on the Filecoin network.</System.P>
|
||||
<br />
|
||||
<br />
|
||||
|
||||
<System.H2>Usage</System.H2>
|
||||
<hr />
|
||||
<br />
|
||||
<System.P>Import GLRenderer.</System.P>
|
||||
<br />
|
||||
<System.CodeBlock>
|
||||
{`import GLRenderer from '~/components/three/GLRenderer';`}
|
||||
</System.CodeBlock>
|
||||
<br />
|
||||
<System.P>Declare the Globe component.</System.P>
|
||||
<br />
|
||||
<System.CodeBlock>
|
||||
{`<GLRenderer width={768} height={480} />`}
|
||||
</System.CodeBlock>
|
||||
<br />
|
||||
<br />
|
||||
<System.H2>Output</System.H2>
|
||||
<hr />
|
||||
<br />
|
||||
<GLRenderer width={768} height={480} />
|
||||
</SystemPage>
|
||||
);
|
||||
|
||||
@ -39,6 +39,7 @@ const STYLES_ICON = css`
|
||||
color: ${Constants.system.pitchBlack};
|
||||
display: inline-flex;
|
||||
transition: 200ms ease color;
|
||||
text-align: center;
|
||||
|
||||
:hover {
|
||||
color: ${Constants.system.brand};
|
||||
@ -54,10 +55,49 @@ export default class SystemPageIcons extends React.Component {
|
||||
</System.H1>
|
||||
<br />
|
||||
<br />
|
||||
<System.P>An example of every icon used in the Filecoin Client.</System.P>
|
||||
<System.P>Every icon used in the Filecoin Client.</System.P>
|
||||
<br />
|
||||
<br />
|
||||
<System.H2>Usage</System.H2>
|
||||
<hr />
|
||||
<br />
|
||||
<System.P>Import the SVG components.</System.P>
|
||||
<br />
|
||||
<System.CodeBlock>
|
||||
{`import * as SVG from '~/components/system/svg';
|
||||
|
||||
import * as OldSVG from '~/common/svg';`}
|
||||
</System.CodeBlock>
|
||||
<br />
|
||||
<System.P>Declare the SVG icons.</System.P>
|
||||
<br />
|
||||
<System.CodeBlock>
|
||||
{`<OldSVG.Home height='88px' />
|
||||
<OldSVG.Folder height='88px' />
|
||||
<OldSVG.Wallet height='88px' />
|
||||
<OldSVG.Channels height='88px' />
|
||||
<OldSVG.Deals height='88px' />
|
||||
<OldSVG.Peers height='88px' />
|
||||
<OldSVG.Deals height='88px' />
|
||||
<OldSVG.Status height='88px' />
|
||||
<OldSVG.Stats height='88px' />
|
||||
<OldSVG.DataTransfer height='88px' />
|
||||
<OldSVG.Logs height='88px' />
|
||||
<OldSVG.Miners height='88px' />
|
||||
<OldSVG.StorageMarket height='88px' />
|
||||
<SVG.BandwidthUp height='88px' />
|
||||
<SVG.BandwidthDown height='88px' />
|
||||
<SVG.Information height='88px' />
|
||||
<SVG.CopyAndPaste height='88px' />
|
||||
<SVG.FileImage height='88px' />
|
||||
<SVG.Plus height='88px' />
|
||||
<SVG.CheckBox height='88px' />`}
|
||||
</System.CodeBlock>
|
||||
<br />
|
||||
<br />
|
||||
<System.H2>Output</System.H2>
|
||||
<hr />
|
||||
<br />
|
||||
{ICONS.map((icon, i) => {
|
||||
return (
|
||||
<div css={STYLES_ICON} key={i}>
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
import * as React from 'react';
|
||||
import * as System from '~/components/system';
|
||||
|
||||
import Group from '~/components/system/Group';
|
||||
import SystemPage from '~/components/system/SystemPage';
|
||||
import ViewSourceLink from '~/components/system/ViewSourceLink';
|
||||
|
||||
@ -26,21 +27,48 @@ export default class SystemPageInputs extends React.Component {
|
||||
</System.H1>
|
||||
<br />
|
||||
<br />
|
||||
<System.P>An example of input components.</System.P>
|
||||
<br /> <br />
|
||||
<System.P>The Input component is used to get a users input in a text field or a textbox.</System.P>
|
||||
<br />
|
||||
<br />
|
||||
<System.H2>Usage</System.H2>
|
||||
<hr />
|
||||
<br />
|
||||
<System.P>Define the Input value states and handle the state change the when a change is made.</System.P>
|
||||
<br />
|
||||
<System.CodeBlock>
|
||||
{`state = {
|
||||
twelve: 'Replace me friend.',
|
||||
thirteen: '',
|
||||
fourteen: '',
|
||||
fifteen: 'aaaaa-bbbbb-ccccc-ddddd-eeee',
|
||||
sixteen: '',
|
||||
seventeen: 'Example text',
|
||||
};
|
||||
|
||||
_handleChange = (e) => {
|
||||
this.setState({ [e.target.name]: e.target.value });
|
||||
};`}
|
||||
</System.CodeBlock>
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<System.H2>Textarea</System.H2>
|
||||
<hr />
|
||||
<br />
|
||||
<System.P>Declare the Textarea component.</System.P>
|
||||
<br />
|
||||
<System.Textarea name="seventeen" value={this.state.seventeen} onChange={this._handleChange} />
|
||||
<br />
|
||||
<br />
|
||||
<System.Input name="twelve" value={this.state.twelve} onChange={this._handleChange} />
|
||||
<System.CodeBlock>
|
||||
{`<System.Textarea name="seventeen" value={this.state.seventeen} onChange={this._handleChange} />`}
|
||||
</System.CodeBlock>
|
||||
<br />
|
||||
<br />
|
||||
<System.Input
|
||||
name="thireteen"
|
||||
value={this.state.thirteen}
|
||||
placeholder="Enter your favorite year"
|
||||
onChange={this._handleChange}
|
||||
/>
|
||||
<br />
|
||||
<System.H2>Input with label and description</System.H2>
|
||||
<hr />
|
||||
<br />
|
||||
<System.P>Declare the Input component with a label and description value.</System.P>
|
||||
<br />
|
||||
<System.Input
|
||||
label="Location of your pastries"
|
||||
@ -52,6 +80,24 @@ export default class SystemPageInputs extends React.Component {
|
||||
onChange={this._handleChange}
|
||||
/>
|
||||
<br />
|
||||
<System.CodeBlock>
|
||||
{`<System.Input
|
||||
label="Location of your pastries"
|
||||
description="We need to know the location of your pastries to sell them to other people."
|
||||
tooltip="Hey friends."
|
||||
name="fourteen"
|
||||
value={this.state.fourteen}
|
||||
placeholder="Pastry Location"
|
||||
onChange={this._handleChange}
|
||||
/>`}
|
||||
</System.CodeBlock>
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<System.H2>Input with max length</System.H2>
|
||||
<hr />
|
||||
<br />
|
||||
<System.P>Declare the Input component with the maximum number of characters allowed.</System.P>
|
||||
<br />
|
||||
<System.Input
|
||||
label="Max length is 14"
|
||||
@ -61,6 +107,22 @@ export default class SystemPageInputs extends React.Component {
|
||||
onChange={this._handleChange}
|
||||
/>
|
||||
<br />
|
||||
<System.CodeBlock>
|
||||
{`<System.Input
|
||||
label="Max length is 14"
|
||||
max={14}
|
||||
name="sixteen"
|
||||
value={this.state.sixteen}
|
||||
onChange={this._handleChange}
|
||||
/>`}
|
||||
</System.CodeBlock>
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<System.H2>Input with copy and paste.</System.H2>
|
||||
<hr />
|
||||
<br />
|
||||
<System.P>Declare the Input component with copyable.</System.P>
|
||||
<br />
|
||||
<System.Input
|
||||
label="Copy and paste (read only)"
|
||||
@ -71,6 +133,24 @@ export default class SystemPageInputs extends React.Component {
|
||||
onChange={this._handleChange}
|
||||
/>
|
||||
<br />
|
||||
<System.CodeBlock>
|
||||
{`<System.Input
|
||||
label="Copy and paste (read only)"
|
||||
readOnly
|
||||
name="fifteen"
|
||||
copyable
|
||||
value={this.state.fifteen}
|
||||
onChange={this._handleChange}
|
||||
/>`}
|
||||
</System.CodeBlock>
|
||||
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<System.H2>Input with validation</System.H2>
|
||||
<hr />
|
||||
<br />
|
||||
<System.P>Declare the Input component with validation.</System.P>
|
||||
<br />
|
||||
<System.Input label="Success" placeholder="This is an uncontrolled input for success." validation="SUCCESS" />
|
||||
<br />
|
||||
@ -79,6 +159,41 @@ export default class SystemPageInputs extends React.Component {
|
||||
<br />
|
||||
<br />
|
||||
<System.Input label="Error" placeholder="This is an uncontrolled input for error." validation="ERROR" />
|
||||
<br />
|
||||
<System.CodeBlock>
|
||||
{`<System.Input label="Success" placeholder="This is an uncontrolled input for success." validation="SUCCESS" />
|
||||
|
||||
<System.Input label="Warning" placeholder="This is an uncontrolled input for warning." validation="WARNING" />
|
||||
|
||||
<System.Input label="Error" placeholder="This is an uncontrolled input for error." validation="ERROR" />
|
||||
`}
|
||||
</System.CodeBlock>
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<System.H2>Props</System.H2>
|
||||
<hr />
|
||||
<br />
|
||||
<Group title='Inputs'>
|
||||
<System.Table
|
||||
data={{
|
||||
columns: [
|
||||
{ key: 'a', name: 'Name', width: '128px' },
|
||||
{ key: 'b', name: 'Type', width: '88px' },
|
||||
{ key: 'c', name: 'Default', width: '88px' },
|
||||
{ key: 'd', name: 'Description', width: '100%' },
|
||||
|
||||
],
|
||||
rows: [
|
||||
{ id: 1, a: 'name', b: 'string', c: 'null', d:'Radio Group name' },
|
||||
{ id: 2, a: 'label', b: 'string', c: 'null', d: 'Label text' },
|
||||
{ id: 3, a: 'max', b: 'number', c: 'null', d: 'Max number of input characters' },
|
||||
{ id: 4, a: 'tooltip', b: 'string', c: 'null', d: 'Tooltip text' },
|
||||
{ id: 5, a: 'validation', b: 'string', c: 'null', d: 'Validation style. Use: SUCCESS, WARNING or ERROR' },
|
||||
],
|
||||
}}
|
||||
/>
|
||||
</Group>
|
||||
</SystemPage>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
import * as React from 'react';
|
||||
import * as System from '~/components/system';
|
||||
|
||||
import Group from '~/components/system/Group';
|
||||
import SystemPage from '~/components/system/SystemPage';
|
||||
import ViewSourceLink from '~/components/system/ViewSourceLink';
|
||||
|
||||
@ -17,10 +18,33 @@ export default class SystemPageLineCharts extends React.Component {
|
||||
<br />
|
||||
<br />
|
||||
|
||||
<System.P>An example of line chart components.</System.P>
|
||||
<System.P>The StatCard component is used to display data on a line chart.</System.P>
|
||||
<br />
|
||||
<br />
|
||||
|
||||
<System.H2>Usage</System.H2>
|
||||
<hr />
|
||||
<br />
|
||||
<System.P>Declare the StatCard component.</System.P>
|
||||
<br />
|
||||
<System.CodeBlock>
|
||||
{`<System.StatCard
|
||||
denomination="Filecoin"
|
||||
value={423123121323}
|
||||
data={[
|
||||
['2017-01-01 00:00:00 UTC', 7],
|
||||
['2017-05-01 00:00:00 UTC', 12],
|
||||
['2017-20-01 00:00:00 UTC', 16],
|
||||
['2017-24-01 00:00:00 UTC', 20],
|
||||
[new Date(), 24],
|
||||
]}>
|
||||
Amount of Filecoin
|
||||
</System.StatCard>`}
|
||||
</System.CodeBlock>
|
||||
<br />
|
||||
<br />
|
||||
<System.H2>Output</System.H2>
|
||||
<hr />
|
||||
<br />
|
||||
<System.StatCard
|
||||
denomination="Filecoin"
|
||||
value={423123121323}
|
||||
@ -35,18 +59,27 @@ export default class SystemPageLineCharts extends React.Component {
|
||||
</System.StatCard>
|
||||
<br />
|
||||
<br />
|
||||
<System.StatCard
|
||||
denomination="Bitcoin"
|
||||
value={12321345}
|
||||
data={[
|
||||
['2017-01-01 00:00:00 UTC', 27],
|
||||
['2017-05-01 00:00:00 UTC', 112],
|
||||
['2017-20-01 00:00:00 UTC', 416],
|
||||
['2017-24-01 00:00:00 UTC', 1120],
|
||||
[new Date(), 827],
|
||||
]}>
|
||||
Amount of Bitcoin
|
||||
</System.StatCard>
|
||||
<System.H2>Props</System.H2>
|
||||
<hr />
|
||||
<br />
|
||||
<Group title='StatCard'>
|
||||
<System.Table
|
||||
data={{
|
||||
columns: [
|
||||
{ key: 'a', name: 'Name', width: '128px' },
|
||||
{ key: 'b', name: 'Type', width: '88px' },
|
||||
{ key: 'c', name: 'Default', width: '88px' },
|
||||
{ key: 'd', name: 'Description', width: '100%' },
|
||||
|
||||
],
|
||||
rows: [
|
||||
{ id: 1, a: 'value', b: 'number', c: 'null', d:'The value listed in the header of the StatCard' },
|
||||
{ id: 2, a: 'denomination', b: 'string', c: 'null', d: 'String name of the value' },
|
||||
{ id: 3, a: 'data', b: 'array', c: 'null', d: 'Array of data points' },
|
||||
],
|
||||
}}
|
||||
/>
|
||||
</Group>
|
||||
</SystemPage>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
import * as React from 'react';
|
||||
import * as System from '~/components/system';
|
||||
import Group from '~/components/system/Group';
|
||||
|
||||
import SystemPage from '~/components/system/SystemPage';
|
||||
import ViewSourceLink from '~/components/system/ViewSourceLink';
|
||||
@ -9,7 +10,7 @@ const RADIO_GROUP_OPTIONS = [
|
||||
value: '1',
|
||||
label: (
|
||||
<React.Fragment>
|
||||
<strong>Breakfast Option</strong>
|
||||
<strong>Option one</strong>
|
||||
<br />I want to have cake and soda for breakfast.
|
||||
</React.Fragment>
|
||||
),
|
||||
@ -18,7 +19,7 @@ const RADIO_GROUP_OPTIONS = [
|
||||
value: '2',
|
||||
label: (
|
||||
<React.Fragment>
|
||||
<strong>Lunch Option</strong>
|
||||
<strong>Option two</strong>
|
||||
<br />I want to have cake and soda for lunch.
|
||||
</React.Fragment>
|
||||
),
|
||||
@ -27,21 +28,16 @@ const RADIO_GROUP_OPTIONS = [
|
||||
value: '3',
|
||||
label: (
|
||||
<React.Fragment>
|
||||
<strong>Dinner Option</strong>
|
||||
<strong>Option three</strong>
|
||||
<br />I want to have cake and soda for dinner.
|
||||
</React.Fragment>
|
||||
),
|
||||
},
|
||||
{
|
||||
value: '4',
|
||||
label:
|
||||
'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
|
||||
},
|
||||
}
|
||||
];
|
||||
|
||||
export default class SystemPageRadios extends React.Component {
|
||||
state = {
|
||||
five: '1',
|
||||
five: '2',
|
||||
};
|
||||
|
||||
_handleChange = (e) => {
|
||||
@ -59,16 +55,101 @@ export default class SystemPageRadios extends React.Component {
|
||||
</System.H1>
|
||||
<br />
|
||||
<br />
|
||||
<System.P>An example of radio components.</System.P>
|
||||
<System.P>The Radio component is used when you require a user to select only one value in a series of options.</System.P>
|
||||
<br />
|
||||
<br />
|
||||
<System.H2>Usage</System.H2>
|
||||
<hr />
|
||||
<br />
|
||||
<System.P>Define the radio group values and labels.</System.P>
|
||||
<br />
|
||||
<System.CodeBlock>
|
||||
{`const RADIO_GROUP_OPTIONS = [
|
||||
{
|
||||
value: '1',
|
||||
label: (
|
||||
<React.Fragment>
|
||||
<strong>Option one</strong>
|
||||
<br />I want to have cake and soda for breakfast.
|
||||
</React.Fragment>
|
||||
),
|
||||
},
|
||||
{
|
||||
value: '2',
|
||||
label: (
|
||||
<React.Fragment>
|
||||
<strong>Option two</strong>
|
||||
<br />I want to have cake and soda for lunch.
|
||||
</React.Fragment>
|
||||
),
|
||||
},
|
||||
{
|
||||
value: '3',
|
||||
label: (
|
||||
<React.Fragment>
|
||||
<strong>Option three</strong>
|
||||
<br />I want to have cake and soda for dinner.
|
||||
</React.Fragment>
|
||||
),
|
||||
}
|
||||
];`}
|
||||
</System.CodeBlock>
|
||||
<br />
|
||||
<System.P>Define the default selected option and handle the state changes when the users selects a different option.</System.P>
|
||||
<br />
|
||||
<System.CodeBlock>
|
||||
{`state = {
|
||||
default: '2',
|
||||
};
|
||||
|
||||
_handleChange = (e) => {
|
||||
this.setState({ [e.target.name]: e.target.value });
|
||||
};`}
|
||||
</System.CodeBlock>
|
||||
<br />
|
||||
<System.P>Declare the RadioGroup component.</System.P>
|
||||
<br />
|
||||
<System.CodeBlock>
|
||||
{`<System.RadioGroup
|
||||
name="five"
|
||||
options={RADIO_GROUP_OPTIONS}
|
||||
selected={this.state.default}
|
||||
onChange={this._handleChange}
|
||||
/>`}
|
||||
</System.CodeBlock>
|
||||
<br />
|
||||
<br />
|
||||
<System.H2>Output</System.H2>
|
||||
<hr />
|
||||
<br />
|
||||
<System.RadioGroup
|
||||
name="five"
|
||||
options={RADIO_GROUP_OPTIONS}
|
||||
selected={this.state.five}
|
||||
onChange={this._handleChange}
|
||||
/>
|
||||
<br />
|
||||
<br />
|
||||
<System.H2>Props</System.H2>
|
||||
<hr />
|
||||
<br />
|
||||
<Group title='RadioGroup'>
|
||||
<System.Table
|
||||
data={{
|
||||
columns: [
|
||||
{ key: 'a', name: 'Name', width: '128px' },
|
||||
{ key: 'b', name: 'Type', width: '88px' },
|
||||
{ key: 'c', name: 'Default', width: '88px' },
|
||||
{ key: 'd', name: 'Description', width: '100%' },
|
||||
|
||||
],
|
||||
rows: [
|
||||
{ id: 2, a: 'options', b: 'array', c: 'null', d: 'Array of options' },
|
||||
{ id: 3, a: 'selected', b: 'string', c: 'null', d: 'Default selected option based on the options array ID' },
|
||||
],
|
||||
}}
|
||||
/>
|
||||
</Group>
|
||||
</SystemPage>
|
||||
);
|
||||
}
|
||||
|
||||
@ -13,9 +13,24 @@ export default class SystemPageStats extends React.Component {
|
||||
</System.H1>
|
||||
<br />
|
||||
<br />
|
||||
<System.P>An example of network statistic components.</System.P>
|
||||
<System.P>The System Stats component is used to show a system stat with an upload or a download icon.</System.P>
|
||||
<br />
|
||||
<br />
|
||||
<System.H2>Usage</System.H2>
|
||||
<hr />
|
||||
<br />
|
||||
<System.P>Delcare the StatUpload and/or the StatDownload components.</System.P>
|
||||
<br />
|
||||
<System.CodeBlock>
|
||||
{`<System.StatUpload>40 mb</System.StatUpload>
|
||||
|
||||
<System.StatDownload>40 mb</System.StatDownload>`}
|
||||
</System.CodeBlock>
|
||||
<br />
|
||||
<br />
|
||||
<System.H2>Output</System.H2>
|
||||
<hr />
|
||||
<br />
|
||||
<System.StatUpload>40 mb</System.StatUpload> <System.StatDownload>40 mb</System.StatDownload>
|
||||
</SystemPage>
|
||||
);
|
||||
|
||||
@ -21,53 +21,97 @@ export default class SystemPageTables extends React.Component {
|
||||
<System.P>An example of a table component.</System.P>
|
||||
<br />
|
||||
<br />
|
||||
<System.H2>Usage</System.H2>
|
||||
<hr />
|
||||
<br />
|
||||
<System.P>Import Group component.</System.P>
|
||||
<br />
|
||||
<System.CodeBlock>
|
||||
{`import Group from '~/components/system/Group';`}
|
||||
</System.CodeBlock>
|
||||
<br />
|
||||
<System.P>Define the table data states.</System.P>
|
||||
<br />
|
||||
<System.CodeBlock>
|
||||
{`state = {
|
||||
table_data: null,
|
||||
};`}
|
||||
</System.CodeBlock>
|
||||
<br />
|
||||
<System.P>Declare the Group and Table components.</System.P>
|
||||
<br />
|
||||
|
||||
<System.CodeBlock>
|
||||
{`<Group title="Table example">
|
||||
<System.Table
|
||||
data={{
|
||||
columns: [
|
||||
{ key: 'a', name: 'Link', type: 'FILE_LINK' },
|
||||
{ key: 'b', name: 'Value', width: '88px' },
|
||||
{ key: 'c', name: 'Tooltip', tooltip: 'A tooltip.', width: '128px' },
|
||||
{ key: 'd', name: 'Copyable', copyable: true, width: '88px' },
|
||||
],
|
||||
rows: [
|
||||
{ id: 1, a: 'col 1 row 1', b: 'col 1 row 2', c: 'col 1 row 3', d: 'col 1 row 4' },
|
||||
{ id: 2, a: 'col 2 row 1', b: 'col 2 row 2', c: 'col 2 row 3', d: 'col 2 row 4'},
|
||||
{ id: 3, a: 'col 3 row 1', b: 'col 3 row 2', c: 'col 3 row 3', d: 'col 3 row 4' },
|
||||
{ id: 3, a: 'col 4 row 1', b: 'col 4 row 2', c: 'col 4 row 3', d: 'col 4 row 4' },
|
||||
],
|
||||
}}
|
||||
selectedRowId={this.state.table_data}
|
||||
onChange={this._handleChange}
|
||||
name="table_data"
|
||||
/>
|
||||
</Group>`}
|
||||
</System.CodeBlock>
|
||||
<br />
|
||||
<br />
|
||||
<System.H2>Output</System.H2>
|
||||
<hr />
|
||||
<br />
|
||||
<Group title="Table example">
|
||||
<System.Table
|
||||
data={{
|
||||
columns: [
|
||||
{ key: 'a', name: 'Column A', type: 'FILE_LINK' },
|
||||
{ key: 'b', name: 'Column B', width: '88px' },
|
||||
{ key: 'c', name: 'Column C', width: '88px' },
|
||||
{
|
||||
key: 'd',
|
||||
name: 'Column D',
|
||||
tooltip: 'A tooltip.',
|
||||
width: '128px',
|
||||
},
|
||||
{
|
||||
key: 'e',
|
||||
name: 'Column E',
|
||||
copyable: true,
|
||||
width: '88px',
|
||||
},
|
||||
{
|
||||
key: 'f',
|
||||
name: 'Column F',
|
||||
width: '88px',
|
||||
},
|
||||
{ key: 'a', name: 'Link', type: 'FILE_LINK' },
|
||||
{ key: 'b', name: 'Value', width: '88px' },
|
||||
{ key: 'c', name: 'Tooltip', tooltip: 'A tooltip.', width: '128px' },
|
||||
{ key: 'd', name: 'Copyable', copyable: true, width: '88px' },
|
||||
],
|
||||
rows: [
|
||||
{ id: 1, a: 1, b: 1, c: 1, e: 1, f: 1, d: 1 },
|
||||
{ id: 2, a: 111, b: 111, c: 111, e: 111, f: 111, d: 111 },
|
||||
{
|
||||
id: 3,
|
||||
a: 111111,
|
||||
b: 111111,
|
||||
c: 111111,
|
||||
e: null,
|
||||
f: 111111,
|
||||
d: 1111111,
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
a: 111111111111,
|
||||
b: 11111111111,
|
||||
c: 111111111111,
|
||||
e: 11111111111,
|
||||
f: 11111111111111,
|
||||
d: 1111111111111111,
|
||||
},
|
||||
{ id: 1, a: 'col 1 row 1', b: 'col 1 row 2', c: 'col 1 row 3', d: 'col 1 row 4' },
|
||||
{ id: 2, a: 'col 2 row 1', b: 'col 2 row 2', c: 'col 2 row 3', d: 'col 2 row 4'},
|
||||
{ id: 3, a: 'col 3 row 1', b: 'col 3 row 2', c: 'col 3 row 3', d: 'col 3 row 4' },
|
||||
{ id: 3, a: 'col 4 row 1', b: 'col 4 row 2', c: 'col 4 row 3', d: 'col 4 row 4' },
|
||||
],
|
||||
}}
|
||||
selectedRowId={this.state.table_data}
|
||||
onChange={this._handleChange}
|
||||
name="table_data"
|
||||
/>
|
||||
</Group>
|
||||
<br />
|
||||
<br />
|
||||
<System.H2>Props</System.H2>
|
||||
<hr />
|
||||
<br />
|
||||
<Group title="Tables">
|
||||
<System.Table
|
||||
data={{
|
||||
columns: [
|
||||
{ key: 'a', name: 'Name', width: '128px' },
|
||||
{ key: 'b', name: 'Type', width: '88px' },
|
||||
{ key: 'c', name: 'Default', width: '88px' },
|
||||
{ key: 'd', name: 'Description', width: '100%' },
|
||||
|
||||
],
|
||||
rows: [
|
||||
{ id: 1, a: 'key', b: 'string', c: 'null', d:'Column key value' },
|
||||
{ id: 2, a: 'name', b: 'string', c: 'null', d: 'Name of the column' },
|
||||
{ id: 2, a: 'tooltip', b: 'string', c: 'null', d: 'If not null a tooltip will be visable' },
|
||||
{ id: 2, a: 'copyable', b: 'boolean', c: 'false', d: 'If true, a copyable icon will be visable' },
|
||||
{ id: 2, a: 'type', b: 'string', c: 'null', d: 'Use FILE_LINK to add a linkable column' },
|
||||
{ id: 2, a: 'width', b: 'number', c: 'null', d: 'Width of the column' },
|
||||
],
|
||||
}}
|
||||
selectedRowId={this.state.table_data}
|
||||
|
||||
@ -41,13 +41,56 @@ export default class SystemPageTabs extends React.Component {
|
||||
</System.H1>
|
||||
<br />
|
||||
<br />
|
||||
<System.P>An examle of tab components.</System.P>
|
||||
<System.P>The TabGroup component is used to allow the users to switch between views.</System.P>
|
||||
<br />
|
||||
<br />
|
||||
<System.H2>Usage</System.H2>
|
||||
<hr />
|
||||
<br />
|
||||
<System.P>Define the tab group values and labels.</System.P>
|
||||
<br />
|
||||
<System.CodeBlock>
|
||||
{`const TAB_GROUP_TWO = [
|
||||
{ value: '1', label: 'Capricorn' },
|
||||
{ value: '2', label: 'Aquarius' },
|
||||
];
|
||||
|
||||
const TAB_GROUP_THREE = [
|
||||
{ value: '1', label: 'Capricorn' },
|
||||
{ value: '2', label: 'Aquarius' },
|
||||
{ value: '3', label: 'Pisces' },
|
||||
];`}
|
||||
</System.CodeBlock>
|
||||
<br />
|
||||
<System.P>Define the Tab value states and handle the state when a tab is changed.</System.P>
|
||||
<br />
|
||||
<System.CodeBlock>
|
||||
{`state = {
|
||||
eight: '1',
|
||||
nine: '1',
|
||||
ten: '1',
|
||||
};
|
||||
|
||||
_handleChange = (e) => {
|
||||
this.setState({ [e.target.name]: e.target.value });
|
||||
};`}
|
||||
</System.CodeBlock>
|
||||
<br />
|
||||
<System.P>Declare the TabGroup component.</System.P>
|
||||
<br />
|
||||
<System.CodeBlock>
|
||||
{`<System.TabGroup name="eight" options={TAB_GROUP_TWO} value={this.state.eight} onChange={this._handleChange} />
|
||||
|
||||
<System.TabGroup name="nine" options={TAB_GROUP_THREE} value={this.state.nine} onChange={this._handleChange} />
|
||||
`}
|
||||
</System.CodeBlock>
|
||||
<br />
|
||||
<br />
|
||||
<System.H2>Output</System.H2>
|
||||
<hr />
|
||||
<br />
|
||||
<System.TabGroup name="eight" options={TAB_GROUP_TWO} value={this.state.eight} onChange={this._handleChange} />
|
||||
<System.TabGroup name="nine" options={TAB_GROUP_THREE} value={this.state.nine} onChange={this._handleChange} />
|
||||
<System.TabGroup name="ten" options={TAB_GROUP_FOUR} value={this.state.ten} onChange={this._handleChange} />
|
||||
</SystemPage>
|
||||
);
|
||||
}
|
||||
|
||||
@ -25,10 +25,38 @@ export default class SystemPageToggles extends React.Component {
|
||||
</System.H1>
|
||||
<br />
|
||||
<br />
|
||||
<System.P>An example of a toggle component.</System.P>
|
||||
<System.P>The Toggle component is used to switch between two states.</System.P>
|
||||
<br />
|
||||
<br />
|
||||
<System.H2>Usage</System.H2>
|
||||
<hr />
|
||||
<br />
|
||||
<System.P>Define the Toggle boolean state and handle the state change the when a toggle is changed.</System.P>
|
||||
<br />
|
||||
<System.CodeBlock>
|
||||
{`state = {
|
||||
three: true,
|
||||
four: false,
|
||||
};
|
||||
|
||||
_handleChange = (e) => {
|
||||
this.setState({ [e.target.name]: e.target.value });
|
||||
};`}
|
||||
</System.CodeBlock>
|
||||
<br />
|
||||
<System.P>Declare the Toggle component.</System.P>
|
||||
<br />
|
||||
<System.CodeBlock>
|
||||
{`<System.Toggle active={this.state.three} name="three" onChange={this._handleChange} />
|
||||
|
||||
<System.Toggle active={this.state.four} name="four" onChange={this._handleChange} />`}
|
||||
</System.CodeBlock>
|
||||
|
||||
<br />
|
||||
<br />
|
||||
<System.H2>Output</System.H2>
|
||||
<hr />
|
||||
<br />
|
||||
<System.Toggle active={this.state.three} name="three" onChange={this._handleChange} />
|
||||
<br />
|
||||
<br />
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
import * as React from 'react';
|
||||
import * as System from '~/components/system';
|
||||
import Group from '~/components/system/Group';
|
||||
|
||||
import SystemPage from '~/components/system/SystemPage';
|
||||
import ViewSourceLink from '~/components/system/ViewSourceLink';
|
||||
@ -13,11 +14,46 @@ export default class SystemPageTooltips extends React.Component {
|
||||
</System.H1>
|
||||
<br />
|
||||
<br />
|
||||
<System.P>An example of tooltip being used.</System.P>
|
||||
<System.P>The Tooltip component is used to provide the user with more information in a message that appears when they interact with an element.</System.P>
|
||||
<br />
|
||||
<br />
|
||||
|
||||
<System.H2>Usage</System.H2>
|
||||
<hr />
|
||||
<br />
|
||||
<System.P>Declare the Tooltip component.</System.P>
|
||||
<br />
|
||||
<System.CodeBlock>
|
||||
{`<System.TooltipAnchor tooltip="Hello friends!!" />`}
|
||||
</System.CodeBlock>
|
||||
<br />
|
||||
<br />
|
||||
<System.H2>Output</System.H2>
|
||||
<hr />
|
||||
<br />
|
||||
<System.TooltipAnchor tooltip="Hello friends!!" />
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<System.H2>Props</System.H2>
|
||||
<hr />
|
||||
<br />
|
||||
<Group title='Tooltip'>
|
||||
<System.Table
|
||||
data={{
|
||||
columns: [
|
||||
{ key: 'a', name: 'Name', width: '128px' },
|
||||
{ key: 'b', name: 'Type', width: '88px' },
|
||||
{ key: 'c', name: 'Default', width: '88px' },
|
||||
{ key: 'd', name: 'Description', width: '100%' },
|
||||
|
||||
],
|
||||
rows: [
|
||||
{ id: 1, a: 'tooltip', b: 'string', c: 'null', d:'Output text on the tooltip' },
|
||||
{ id: 2, a: 'height', b: 'number', c: '24px', d: 'Height of the tooltip' },
|
||||
],
|
||||
}}
|
||||
/>
|
||||
</Group>
|
||||
</SystemPage>
|
||||
);
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user