This is the Open Source Design System from Meiuca
Below we have all the instructions for you to use Jota DS as a dependency and work on building your product from it. Too easy. Use it to understand how your day to day would work with a Design System, to show the advantages to your stakeholders or simply to focus on your studies.
Acess the component playground, in storybook, to know how to use our Open Source Design System Storybook
| Component | Must have properties | optional properties |
|---|---|---|
[Accordion] |
label='Your string' id='yourAccordionId'children=[string | image | others] |
onColor='true | false' labelHeadingVariant='h2 | h3 | h4' opened="true | false" |
[Alert] |
title='Your Title string' text='Your alert text'type='helper | warning ' |
isOpen='true | false' |
[Avatar] |
imgAlt='Your alt text' |
size='small | medium | large' onColor='true | false' hasNotification='true | false' imgUrl='www.yourUrl' |
[Banner] |
||
[Brand] |
||
[Button] |
||
[ButtonGroup] |
||
[ButtonIcon] |
||
[Cardbase] |
||
[Cardimage] |
||
[InputCheckbox] |
||
[Header] |
||
[HeaderEmpty] |
||
[Icon] |
||
[IconShape] |
||
[InputPassword] |
||
[InputRadiobutton] |
||
[InputSearch] |
||
[InputText] |
label='Your string' id='your-input-id'placeHolder="Your placeholder" handleChange={function} handleFocus={function} |
maxLength={number} error={true|false} onColor={true|false} disabled={true|false} |
[InputTextarea] |
label='Your string' id='your-input-id'placeHolder="Your placeholder" maxLength={number} handleChange={function} |
error={true|false} onColor={true|false} disabled={true|false} showHelper={true|false} |
[Link] |
label='Your string' href='/your-link' target='_blank|_self' |
onColor={true|false} disabled={true|false} icon={true|false} handleClick={function} |
[Menu] |
ariaLabel='Your string' menuList={[{label: 'Your string', tagLabel: 'Your string', isCurrent:true|false, handleClick: function}]} |
isOpen={true|false} |
[Modal] |
isOpen={true|false} isDoubleAction={true|false} firstActionLabel='Your string' secondActionLabel='Your string' handleConfirm={function} handleClose={function} |
isCloseDisabled={true|false} handleCancel={function} |
[Notification] |
title="Your string" content="Your string" buttonText="Your string" handleConfirm={function} handleClose={function} |
isOpen={true|false} |
[OverflowMenu] |
menuList={[{label: 'Your string', tagLabel:'Your string', handleClick:function}]} |
isOpen={true|false} onColor={true|false} toggleMenu={function} getCurrentMenuItem={function} |
[InputSelect] |
label='Your string' options]=['your option', 'your option']} handleChange={function} |
disabled={true|false} error={true|false} errorMsg='Your string' placeholder='Your string' onColor={true|false} |
[Steps] |
ariaLabel='' steps]=[{type: 'current'|'finish'|'next',title: 'Your string'}]} |
|
[Switch] |
label="Your string" checked={true|false} handleChange={function} |
disabled={true|false} onColor={true|false} |
[TabGroup] |
ariaLabel="Your string" children]=<TabItem label={'Your string'}/>} handleTabClick={function} |
onColor={true|false} |
[TagCategory] |
label="Your string" icon='shapes' |
onColor={true|false} |
[TagHighlight] |
label="Your string" tabIndex={number} |
|
[TagSelect] |
label="Your string" handleChange={function} |
disabled={true|false} onColor={true|false} active={true|false} |
[Tooltip] |
position='bottom-end'|'bottom-start'|'bottom'|'left-end'|'left-start'|'left'|'right-end'|'right-start'|'right'|'top-end'|'top-start'|'top' body='Your string' children={React.Component} |
onColor={true|false} |
[Typography] |
component='heading|subtitle|paragraph|caption' |
If component attribute is 'heading', variant='h1|h2|h3|h4|h5|h6' If component attribute is 'heading', size='x-small'|'small'|'medium'|'large'|'x-large'|'display' If component attribute is 'subtitle', size='small'|'large' If component attribute is 'paragraph', size='small'|'large' onColor={true|false} |
Install DS from:
yarn add @jota-ds/lib-reactIn your React App, import a component as:
import { Button } from '@jota-ds/lib-react';
Sample usage of button component.
<Button label="Label" type="primary" />
In your index.html, in the <head> tag, import:
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
href="https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700&display=swap"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css2?family=Lusitana:wght@400;500;600;700&display=swap"
rel="stylesheet"
/>
Our library can be consumed in your NextJS app. Follow the instructions below:
yarn add @jota-ds/lib-reactSample usage of a button component in NextJS.
import {DynamicButton} from "@jota-ds/lib-react/next"
Then:
<DynamicButton label="Label" type="primary" />
In your index.html, in the <head> tag, import:
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
href="https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700&display=swap"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css2?family=Lusitana:wght@400;500;600;700&display=swap"
rel="stylesheet"
/>