yarn add vc-components
import React from 'react';
import { Atoms } from 'vc-components';
const HelloDemo = () => (
<Atoms.Button
type="primary"
onClick={() => { console.log('hello!'); }}
>
Hello world!
</Atoms.Button>
);
View the storybook component library for more details and previews of all the available components.
yarn install
yarn storybook
The basis for the entire library. All components are built on styled components as the base, with some slight tools to make overall implementations easier. The idea behind styled components is one of css-in-js.
A library that adds base utilities such as padding, margins, colors. This is based on a theme that is passed down by the theme provider. The Theme Table details which function names relate to which theme field.
A wrapper for styled system that allows for object declaration. This allows for less code when a component is basically just an extension of styled system. System components also exposes the is
prop, which allows us to change the tag on the fly. This is useful if you want to make something a h1
tag. A common pattern in the component library is to expose some attribute like titleAttributes
allow the is
prop to be passed in to the element.
import styled from 'styled-components';
import { space } from 'styled-system';
const Card = styled.section.attrs({
p: 3
})`
${space};
`
import sys from 'system-components';
const Card = sys({
p: 3,
is: 'section'
});