atomic10-components v1.2.2

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

Styling

List of class names for styling.

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

Styling

List of class names for styling.

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

Styling

List of class names for styling.

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

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.

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

Styling

List of class names for styling.

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

Styling

List of class names for styling.

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

Styling

List of class names for styling.

Black and White To Do Form

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

Styling

List of class names for styling.

Colored To Do Form

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

Styling

List of class names for styling.

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.

1. This is the first step
2. This is the second step
3. 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.