6f36e62f92
# Conflicts: # packages/my-joy-beta/src/components/__tests__/__image_snapshots__/key-value-ui-js-key-value-submitting-1-snap.png # packages/my-joy-beta/src/components/__tests__/__snapshots__/key-value.spec.js.snap # packages/my-joy-beta/src/components/create-instance/__tests__/__image_snapshots__/images-ui-js-images-images-name-stuff-image-name-stuff-1-snap.png # packages/my-joy-beta/src/components/instances/__tests__/__image_snapshots__/snapshots-ui-js-item-mutating-1-snap.png # packages/my-joy-beta/src/components/instances/__tests__/__image_snapshots__/summary-ui-js-summary-1-snap.png # packages/my-joy-beta/src/components/instances/__tests__/__image_snapshots__/summary-ui-js-summary-instance-1-snap.png # packages/my-joy-beta/src/components/instances/__tests__/__image_snapshots__/summary-ui-js-summary-instance-2-snap.png # packages/my-joy-beta/src/components/instances/__tests__/__image_snapshots__/summary-ui-js-summary-starting-stopping-rebooting-removing-1-snap.png # packages/my-joy-beta/src/components/instances/__tests__/__image_snapshots__/summary-ui-js-summary-state-provisioning-1-snap.png # packages/my-joy-beta/src/components/instances/__tests__/__image_snapshots__/summary-ui-js-summary-state-running-1-snap.png # packages/my-joy-beta/src/components/instances/__tests__/__image_snapshots__/summary-ui-js-summary-state-stopped-1-snap.png # packages/my-joy-beta/src/components/instances/__tests__/__snapshots__/metadata.spec.js.snap # packages/my-joy-beta/src/components/instances/__tests__/__snapshots__/summary.spec.js.snap # packages/my-joy-beta/src/containers/create-instance/__tests__/__snapshots__/metadata.spec.js.snap # packages/my-joy-beta/src/containers/create-instance/__tests__/__snapshots__/user-script.spec.js.snap # packages/my-joy-beta/src/containers/instances/__tests__/__image_snapshots__/cns-ui-js-cns-loading-1-snap.png # packages/my-joy-beta/src/containers/instances/__tests__/__image_snapshots__/firewall-ui-js-firewall-loading-1-snap.png # packages/my-joy-beta/src/containers/instances/__tests__/__image_snapshots__/list-ui-js-list-loading-1-snap.png # packages/my-joy-beta/src/containers/instances/__tests__/__image_snapshots__/metadata-ui-js-metadata-metadata-1-snap.png # packages/my-joy-beta/src/containers/instances/__tests__/__image_snapshots__/networks-ui-js-networks-loading-1-snap.png # packages/my-joy-beta/src/containers/instances/__tests__/__image_snapshots__/summary-ui-js-summary-loading-1-snap.png # packages/my-joy-beta/src/containers/instances/__tests__/__image_snapshots__/summary-ui-js-summary-starting-stopping-rebooting-removing-1-snap.png # packages/my-joy-beta/src/containers/instances/__tests__/__image_snapshots__/summary-ui-js-summary-starting-stopping-rebooting-removing-2-snap.png # packages/my-joy-beta/src/containers/instances/__tests__/__image_snapshots__/summary-ui-js-summary-starting-stopping-rebooting-removing-3-snap.png # packages/my-joy-beta/src/containers/instances/__tests__/__image_snapshots__/tags-ui-js-tags-editing-removing-1-snap.png # packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/metadata.spec.js.snap # packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/summary.spec.js.snap |
||
---|---|---|
.. | ||
__tests___ | ||
index.js | ||
Readme.md |
Primary Button
Primary button to be used once per page. Only use to indicate main action per pattern. Min. width: 120px
const React = require('react');
const { default: Button } = require('./');
<span>
<Button>Inspire the lazy</Button>
</span>;
Secondary Button
Secondary buttons can be used freely to indicate other actions on patterns. Min. width: 120px
const React = require('react');
const { default: Button } = require('./');
<span>
<Button secondary>Inspire the brave</Button>
</span>;
Disabled Button
Disabled buttons can be used freely to indicate that no action is permitted in this button. Min. width: 120px
const React = require('react');
const { default: Button } = require('./');
<span>
<Button secondary disabled>
Inspire the brave
</Button>
</span>;
Small Button
Small buttons are supporters of the secondary button. They can be used within cluttered or complex patterns to free up space.
const React = require('react');
const { default: Button } = require('./');
<span>
<Button secondary small>
Inspire the brave
</Button>
</span>;
Loading Button
const React = require('react');
const { default: Button } = require('./');
<span>
<Button secondary loading>
Inspire the liars
</Button>
</span>;
Quick Action
Quick action buttons can be embedded in components to give additional functionality. They can be used in either primary or secondary color palettes, depending on importance.
const React = require('react');
const { default: Button } = require('./');
const { Actions } = require('../icons');
<span>
<Button secondary icon rect>
<Actions />
</Button>
<Button secondary icon rect disabled>
<Actions />
</Button>
</span>;
Primary
Primary anchor is a type of a link that sits outside the body text.
const React = require('react');
const Anchor = require('../text').Anchor;
<Anchor href="https://joyent.com">Inspire the lazy</Anchor>;
Reversed
Reversed anchors is used on dark backgrounds, where a default anchor would not provide enough contrast.
const React = require('react');
const Anchor = require('../text').Anchor;
<span
style={{
'background-color': '#3B46CC',
height: 80,
width: 250,
display: 'flex',
'align-items': 'center',
'justify-content': 'center'
}}
>
<Anchor href="https://joyent.com" reversed>
Inspire the lazy secondary
</Anchor>
</span>;
In-paragraph anchor
In-paragraph anchor is a link that sits inside a text components. The default state does not have an underline. The underline appears on hover and click.
const React = require('react');
const Anchor = require('../text').Anchor;
<p>
Body text. Crack that whip. Give the past a slip. Step on a crack. Break your
momma's back. When a problem comes along.You must whip it.
<Anchor href="#">Learn More</Anchor>
</p>;
Disabled
Disabled anchors cannot be actioned and the cursor is disabled.
const React = require('react');
const Anchor = require('../text').Anchor;
<Anchor disabled href="https://joyent.com">
Inspire the lazy disabled
</Anchor>;