Defined as the goodwill a speaker cultivates between themself and their audience, a condition of receptivity
Major.Minor.Update
xx.xx.xxxx
Install eunoia
npm i eunoia
It is recommended that this library be used alongside styled components and Material UI
// import
import { Button } from "eunoia"
/**
* Every component is accessible directly via the
* universal import "eunoia" designed to be a
* single dependency import.
*
* Checkout the storybook
* https://eunoia.netlify.app/
* for detailed documentation
*
**/
// use!
render(){
return <Button>Hello from εὔνοιᾰ!</Button>
}const Default = () => <Button onClick={action('clicked')}>Default Button</Button> primary?: boolean
transparent?: boolean
blackFont?: booleanimport { RightArrow } from 'eunoia'
// use
const Right_Arrow = () => <RightArrow scalingFactor={2} color="#000000" />- RightArrow
- LeftArrow
- DownArrow
- UpArrow
- Dribbble
- Github
- Medium
- Home
- Menu
color?: string
offset?: string
scalingFactor?: number
name?: string
font?: stringimport { PhotoshopIcon } from 'eunoia'
// use
const Photoshop_Icon = () => <PhotoshopIcon name="photoshop" font="Roboto" color="#000000" scalingFactor={1} />- Photoshop
- Illustrator
- Experience Designer
- Figma
- Sketch
- Invision
- After Effects
- Indesign
- Material Design
- Creative Cloud
import { ReactIcon } from 'eunoia'
// use
const React_Icon = () => <ReactIcon scalingFactor={1} name="React.js" font="Roboto" color="#000000" />- React
- Python
- Webpack
- Node.js
- Javascript
- PHP
- Git (Large)
- Jenkins
- Kubernetes
- Docker
- Sass
- CSS (3)
- HTML (5)
- Yarn
- NPM
- Ubuntu
- MySQL
- JQuery
- Firebase (Cloud)
- C++ (ISO)
- Typescript
import { JiraIcon } from 'eunoia'
// use
const Jira_Icon = () => <JiraIcon scalingFactor={1} name="Jira" font="Roboto" color="#000000" />- JiraIcon
- GithubIndustryIcon
- BitbucketIcon
- ConfluenceIcon
- GoogleAnalyticsIcon
- GoogleCloudIcon
- AWSIcon
- InvisionIndustryIcon
- SlackIcon
- MicrosoftIcon
color?: string
offset?: string
scalingFactor?: number | nullimport { UIStyle } from 'eunoia'
// use as required
const Gld = UIStyle.UIColors.gold UIColors: {
white: '#FFFFFF',
lightGrey: '#00000029',
black: '#000000',
gold: '#E1A87A',
darkGrey: '#212121',
mediumGrey: '#5D5D5D',
}import { Menu } from 'eunoia'
// use as required
render(){
return <Menu config={config} options={options} />
}The menu component take two args. The first is an object called config that details the style of the menu. The second is an array of objects called options. This array contains a list of items that are rendered to the menu. The menu has both mobile and desktop support and is built over Material UI.
The Menu uses react-router to implement navigation. if you want custom navigation, it can be overridden by passing a JSX component as the icon param in the array of objects options arg.
See the Menu Storybook for an example with source code
config
config: {
fontColor?: string
activeSection?: string
hideOnMobile?: boolean
DisableMobile?: boolean
fontOverride?: string
boldText?: boolean
spacing?: any
row?: boolean
fontSize?: string
mobileBreakpoint?: number | undefined
breakpoints: {
xs?: boolean
sm?: boolean
xl?: boolean
}
}options
options: Array<{
title?: string | undefined
link?: string | undefined | any // this is a local nav link with react-router-dom
exRef: string | undefined // this is an external link
newTab?: boolean
icon?: any
main?: boolean | undefined
}>import { Card } from 'eunoia'
// use as required
render(){
return <Card config={config} />
}The card component is built on top of the Material UI Card component and has similar behavior. It is a flex card with a box shadow that is designed for content sharing. It takes a config object that determines the layout of the card and its content.
See the Card Storybook for an example with source code\
config
config: {
shouldRender: boolean | undefined
imageURL?: string | undefined
imageAltText?: string | undefined
content?: string
title: string
centerTitle?: boolean | undefined
centerContent?: boolean | undefined
fontOverride?: string | undefined
fontColor?: string | undefined
fontSize?: string | undefined
fontSizeTitle?: string | undefined
height?: string | number | undefined
link?: string | undefined | any
event?: any | undefined
containImage?: boolean | undefined // not yet implemented
}import { BannerCard } from 'eunoia'
// use as required
render(){
return <BannerCard config={config} />
}The card component is built on top of the Material UI Card component and has similar behavior. It is a flex card with a box shadow that is designed for content sharing . It takes a config object that determines the layout of the card and its content. It differs from the regular card component because the image is rendered to the right side, and is a little more particular, especially for mobile
See the Card Storybook for an example with source code\
config
config: {
shouldRender: boolean | undefined
imageURL?: string | undefined
imageAltText?: string | undefined
content?: string
title: string
centerTitle?: boolean | undefined
centerContent?: boolean | undefined
fontOverride?: string | undefined
fontColor?: string | undefined
fontSize?: string | undefined
fontSizeTitle?: string | undefined
height?: string | number | undefined
link?: string | undefined | any
event?: any | undefined
containImage?: boolean | undefined
imageWidth?: number | undefined
}import { SectionHeader } from 'eunoia'
// use as required
render(){
return <SectionHeader config={config}>Design! :)</SectionHeader>
}The section header component is just CSS and takes a config object detailed below. Styles can be overridden using styled(SectionHeader) from styled-components, or can be used as-is.
See the SectionHeader Storybook for an example with source code\
config
config: {
shouldRender: boolean | undefined
text?: string
centerText?: boolean | undefined
fontOverride?: string | undefined
fontColor?: string | undefined
fontSize?: number | undefined
height?: number | undefined
backgroundColor?: string | undefined
}🤟💻🔨 :)