Jota DS
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.
Playground
Acess the component playground, in storybook, to know how to use our Open Source Design System Storybook
Components
The components with a * have a small explanation for its use after the table since it can be a little tricky
| Component | Must have properties | optional properties |
|---|---|---|
[Accordion] |
label='Your string' id='your-accordion-id'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] |
Title='Your title' bgColor='#hexaColor'image='Your image path' |
headingVariant ='h2 | h3 | h4' paragraph='Your paragraph text' highTypography={true | false} handleClick={function} |
[Brand] |
externalUrl='Your brand link' size='small | medium | large' |
type='symbol | logotype' alt='alt text for brand' |
[Button] |
label='button label' type='primary | secondary' |
icon={true | false} iconType='any icon from our icon list' onColor={true | false}disabled={true | false} handleClick={function} |
[ButtonGroup] |
primaryLabel='first button label' tertiaryLabel='second button label |
primaryDisabled={true | false} tertiaryDisabled={true | false} onColor={true | false}handleCancel={function}handleConfirm={function} |
[ButtonIcon] |
size='small | medium | large' icon='any icon from our icon list' |
onColor={true | false}handleClick={function}handleBlur={function} |
[Cardbase] |
children='card content' |
onColor={true | false}handleClick={function}noPadding={true | false} |
[Cardimage] |
children='card content' |
onColor={true | false}handleClick={function}image='your image path' |
[InputCheckbox] |
value='checkbox text' name='Label and input name' |
disabled={true | false} onColor={true | false} handleChange={function} checked={true | false} |
[Header] |
logoSource='your-image.jpg | your-image.svg | your-image.png'linkList={[{label: '', href: '', target: '', disabled: { true | false }, currentActive: { true | false }}]} menuList={[{label: 'Your string', tagLabel:'Your string', handleClick:function}]} |
isLoggedIn={true | false}hasLinks={true | false} mainMenuIsOpen={true | false} ghost={true | false} If isLoggedIn is set to true, avatar={{name: 'Your string', imgUrl: 'your-image.jpg | your-image.svg | your-image.png', imgAlt: 'Your string', hasNotification: true | false}} |
[HeaderEmpty] |
logoSource='your-image.jpg | your-image.svg | your-image.png' |
children={React.Component} hasLinks={true | false} mainMenuIsOpen={true | false} ghost={true | false} |
[Icon] |
icon='any icon from our icon list' size='small | medium | large' |
className='name for icon class' id='your-icon-id' |
[IconShape] |
icon='any icon from our icon list' size='small | medium | large' |
variant='default | warning | helper' |
[InputPassword] |
label='Your string' id='your-input-id'placeHolder="Your placeholder" maxLength={number} handleChange={function} helperText='Warning helper text in case of error' |
error={true|false} onColor={true|false} disabled={true|false} |
[InputRadiobutton] |
listData=[{label: 'Your label',value: 'The Value',}] |
onColor={true|false} handleChange={function} listData=[{checked: true|false ,disabled: true|false}] |
[InputSearch] |
formID='your-form-id' formName ='your form name'inputID ="your-input-id" inputName='your input name' placeholder='search bar placeholder' |
ariaLabel='text for your aria label' hasPreventDefault={true|false} onColor={true|false} disabled={true|false} handleSubmit={function} handleInputChange={function} |
[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='Acessible label' 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" |
onColor={true|false} handleTabClick={function} |
[TabItem]* |
label="Tab Label" |
|
[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} |
*The tab group and tab item are used together, the tab group needs to wrap the tab item component, each tab item component will be one tab. Example:
<TabGroupTag>
<TabItemTag label='label 1'></TabItemTag>
<TabItemTag label='label 2'></TabItemTag>
<TabItemTag label='label 3'></TabItemTag>
</TabGroupTag>
*The tooltip component works when you pass the content that you want to trigger the tooltip inside it as a children, the content that will be triggered will be passed as the body prop. Example:
<TooltipTag position="top" body="this is my text inside the tooltip">
<strong>Here is my text that is always visible and will trigger the tooltip on mouse hover</strong>
</TooltipTag>
Quick start - React
1) Install
Install DS from:
yarn add @jota-ds/lib-react2) Import a component
In your React App, import a component as:
import { Button } from '@jota-ds/lib-react';
Sample usage of button component.
<Button label="Label" type="primary" />
3) Import DS default fonts
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"
/>
Quick start - NextJS
Our library can be consumed in your NextJS app. Follow the instructions below:
1) Install
yarn add @jota-ds/lib-react2) Import a component
Sample usage of a button component in NextJS.
import {DynamicButton} from "@jota-ds/lib-react/next"
Then:
<DynamicButton label="Label" type="primary" />
3) Import DS default fonts
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"
/>
CodeSandbox
Still have doubts? View our example on CodeSandbox:
