Atomic10 Components

Atomic10 is a React component library with clean, contemporary, and customizable components. New components will be created and added with future updates.

Install

Atomic10 components are simple to install and use.

npm i atomic10-components

Usage

Interactive Component Storybook Environment:

https://atomic10-storybook.jamesonb.com

Components:

Primary Button
Secondary Button

Text Input
Dropdown
Toggle Switch

Simple Card
Advanced Card

Black & White To Do Form
Color To Do Form

Primary Button

This primary button is a solid color button with rounded corners. There is a shrink hover effect on this button. Customize the color, text, and onClick function.

import { PrimaryButton } from "atomic10-components";

handleClick  =  ()  =>  {
    alert("Click");
};

<PrimaryButton  value="Click"  onClick={handleClick}  />

Properties

Name	Type	Default	Description
`bkcolor`	string	`Neon Carrot`	Background color. Accepts hex, rgb, and string
`onClick`	function	`null`	Callback for buttons onClick
`ftcolor`	string	`White`	Font color. Accepts hex, rgb, and string
`value`	string	`null`	Text of the button

Styling

List of class names for styling.

Name	Element
`a10-primary-button`	`div`

Secondary Button

This secondary button is a solid white button with colored border and text. This button has rounded corners. There is a shrink hover effect on this button. Customize the color, text, and onClick function.

import { SecondaryButton } from "atomic10-components";

handleClick  =  ()  =>  {
    alert("Click");
};

<SecondaryButton  value="Click"  onClick={handleClick}  />

Properties

Name	Type	Default	Description
`onClick`	function	`null`	Callback for buttons onClick
`color`	string	`Neon Carrot`	Border and font color. Accepts hex, rgb, and string
`value`	string	`null`	Text of the button

Styling

List of class names for styling.

Name	Element
`a10-secondary-button`	`div`

Text Input

This is a customizable input component. Just like a regular input the type, value, placeholder and more can be specified as properties along with color customization, width, and more features.

import { TextInput } from "atomic10-components";

<TextInput label="Label Input" placeholder="name@example.com" width="30%" />
<hr />
<TextInput label="Password" placeholder="Enter Password" type="password" />

Properties

Name	Type	Default	Description
`type`	string	`text`	Input type attribute
`label`	string	`null`	Label above input
`value`	string	`null`	Input value attribute
`placeholder`	string	`null`	Input placeholder value
`onChange`	function	`null`	Callback for onChange
`name`	string	`null`	Name attribute of input
`ftColor`	string	`black`	Input font color. Accepts hex, rgb, and string
`bkColor`	string	`Neon Orange`	Input bottom border color. Accepts hex, rgb, and string
`width`	string	`null`	Input width. Accepts px, %, and rem/em

Styling

List of class names for styling.

Name	Element
`a10-simple-form-group`	`div`
`a10-simple-text-label`	`label`
`a10-simple-text-input`	`input`

Dropdown

This is a customizable dropdown component. Just like a dropdown the value, onChange, and more can be specified as properties along with color customization and width. The content property is an array of objects to supply the dropdown choices(see example).

import { Dropdown } from "atomic10-components";

<Dropdown
  name='tester'
  value={this.state.value}
  onChange={e => alert(`Changed to ${e.target.value}`)}
  content={content}
/>
<hr />
<Dropdown
  name='tester'
  value={this.state.value}
  onChange={e => alert(`Changed to ${e.target.value}`)}
  content={content}
  ftColor='white'
  bkColor='#FF9933'
/>

Properties

Name	Type	Default	Description
`name`	string	`null`	Name attribute for `select` element's value
`value`	string	`null`	Dropdown value attribute
`onChange`	function	`null`	Callback for onChange
`ftColor`	string	`slategray`	Dropdown font color. Accepts hex, rgb, and string
`bkColor`	string	`#eee`	Dropdown bottom border color. Accepts hex, rgb, and string
`width`	string	`null`	Dropdown width. Accepts px, %, and rem/em
`content`	array	`null`	Content is array of choices formatted as objects

`Content-Example`:

text and value fields are require. key field is optional.

const content = [
{
   text: 'Item One',
   value: 'one',
   key: 1
 },
 {
   text: 'Item Two',
   value: 'two',
   key: 2
 },
 {
   text: 'Item Three',
   value: 'three',
   key: 3
 }
];

Styling

List of class names for styling.

Name	Element
`a10-dropdown`	`div`

Toggle Switch

This is a customizable toggle switch. The toggle can be customized with a label, checked/unchecked icons, defaultChecked state, and an onChange function.

To change the primary color from orange:

// CSS
.react-toggle {
  background: blue
}

import { ToggleSwitch } from "atomic10-components";

<ToggleSwitch
  checkIcon='power_off'
  uncheckIcon='power'
  defaultChecked={'default checked state'}
  onChange={'onChange Callback'}
  label='Example Toggle Switch'
/>

Properties

Name	Type	Default	Description
`checkIcon`	string	`null`	Icon name from Material Design
`uncheckIcon`	string	`null`	Icon name from Material Design
`defaultChecked`	state/prop	`null`	State/prop for defaultChecked value
`onChange`	function	`null`	Callback for onChange
`label`	string	`null`	Label for toggle

Styling

List of class names for styling.

Name	Element
`a10-toggle-switch-label`	`label`
`react-toggle-track`	`div`(Switch)
`react-toggle-thumb`	`div`(Slider)
`material-icons`	`i`(Icon)

Simple Card

This is a simple card that can store data for a product, service, etc. Card can have an onClick added. All content is customizable and the box will auto format as info grows.

import { SimpleCard } from "atomic10-components";

<SimpleCard
  title="Simple Card"
  subTitle="Subtitle"
  paragraph="Simple card that doesn't have an image and a button. This is a paragraph."
  onClick={() => alert("Card Click")}
/>

Properties

Name	Type	Default	Description
`bkColor`	string	`White`	Card background color. Accepts hex, rgb, and string
`brdColor`	string	`Black`	Border color. Accepts hex, rgb, and string
`onClick`	function	`null`	Callback for card onClick
`paragraph`	string	`null`	Paragraph for card
`title`	string	`null`	Text of the card
`subTitle`	string	`null`	Subtitle for card
`width`	string	`30%`	Width for card

Styling

List of class names for styling.

Name	Element
`a10-secondary-button`	`div`
`a10-title`	`div`
`a10-subtitle`	`div`
`a10-paragraph`	`div`

Advanced Card

This is an advanced card that can store data for a product, service, profile, etc. Card and button have separate customizable onClick. Image, content, and button are customizable and the box will auto format as info grows.

import { AdvancedCard } from "atomic10-components";

<AdvancedCard
  title="Simple Card"
  subTitle="Subtitle"
  paragraph="Advanced card that has an image and a button. This is a paragraph."
  onClick={() => alert("Card Click")}
  btnClick={() => alert("Button Click")}
  btnValue="Click"
  image="https://goo.gl/2QuCc5"
  width="50%"
/>

Properties

Name	Type	Default	Description
`bkColor`	string	`White`	Card background color. Accepts hex, rgb, and string
`brdColor`	string	`Black`	Border color. Accepts hex, rgb, and string
`btnClick`	function	`null`	Callback for button onClick
`btnColor`	string	`Neon Carrot`	Button color. Accepts hex, rgb, and string
`btnValue`	string	`Black`	Text of the button
`onClick`	function	`null`	Callback for card onClick
`image`	image	`null`	Image for header
`paragraph`	string	`null`	Paragraph for card
`title`	string	`null`	Text of the card
`subTitle`	string	`null`	Subtitle for card
`width`	string	`30%`	Width for card. Accepts px, %, and rem/em

Styling

List of class names for styling.

Name	Element
`a10-advanced-button`	`div`
`a10-img`	`img`
`a10-title`	`div`
`a10-subtitle`	`div`
`a10-paragraph`	`div`

Black and White To Do Form

B&W Todo

This is a black and white todo form. Items can be added to the list directly on the component, can be deleted from list, and can be completed(crossed out). The list is persistent through localStorage. You can create a function that clears this storage by removing the key of: "${title} list" from localStorage.

import { BWTodo } from "atomic10-components";

const todoList = ["Fold laundry", "Go to gym", "Wash car", "Walk the dog"];

<BWTodo list={todoList} title="B&W Todo" />

Properties

Name	Type	Default	Description
`title`	string	`null`	Title of the to do form in header
`list`	array	`null`	An array of to do items to prepopulate list

Styling

List of class names for styling.

Name	Element
`a10-header`	`div`
`a10-title`	`h2`
`myUL`(id not class)	`ul`

Colored To Do Form

Color Todo

This is a customizable colored todo form. Items can be added to the list directly on the component, can be deleted from list, and can be completed(crossed out). The list is persistent through localStorage. You can create a function that clears this storage by removing the key of: "${title} list" from localStorage. Colors, title, placeholder, and more can be customized.

import { CTodo } from "atomic10-components";

const todoList = ["Fold laundry", "Go to gym", "Wash car", "Walk the dog"];

<CTodo list={todoList} title="Color Todo" placeholder="New Item..." />

Properties

Name	Type	Default	Description
`title`	string	`null`	Title of the to do form in header
`list`	array	`null`	An array of to do items to prepopulate list
`placeholder`	string	`null`	Placeholder for form input
`bkColor`	string	`Neon Carrot`	Header background color. Accepts hex, rgb, and string
`ftColor`	string	`White`	Input font color. Accepts hex, rgb, and string
`inColor`	string	`White`	Input line color. Accepts hex, rgb, and string
`btnColor`	string	`White`	Button and title color. Accepts hex, rgb, and string

Styling

List of class names for styling.

Name	Element
`a10-color-todo`	`div`
`a10-header`	`div`
`myUL`(id not class)	`ul`

License

MIT License

Issues and Issue Tracker

Please see the open issues in our issue tracker. If you have questions, concerns, bug reports, etc, please file an issue. Our Issue Tracker

Before reporting a bug or issue please make sure it is not already reported. If it isn't, report using the following format.

Example:

Short and descriptive example bug report title

A summary of the issue and the browser/OS environment in which it occurs. If suitable, include the steps required to reproduce the bug.

This is the first step

This is the second step

Further steps, etc.

Any other information you want to share that is relevant to the issue being reported. This might include the lines of code that you have identified as causing the bug, and potential solutions (and your opinions on their merits).

A good bug/issue report shouldn't leave others needing to chase you up for more information. Please try to be as detailed as possible in your report. What is your environment? What steps will reproduce the issue? What browser(s) and OS experience the problem? What would you expect to be the outcome? All these details will help people to fix any potential bugs.

atomic10-components

Atomic10 Components

Install

Usage

Interactive Component Storybook Environment:

Components:

Primary Button

Properties

Styling

Secondary Button

Properties

Styling

Text Input

Properties

Styling

Dropdown

Properties

Content-Example:

Styling

Toggle Switch

Properties

Styling

Simple Card

Properties

Styling

Advanced Card

Properties

Styling

Black and White To Do Form

Properties

Styling

Colored To Do Form

Properties

Styling

License

Issues and Issue Tracker

Readme

Keywords

Package Sidebar

Install

Repository

Homepage

DownloadsWeekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

`Content-Example`:

Weekly Downloads