@siteone/system-core

Design system core packages

Table of Contents

• Install
• Usage
• Contribute
• License

Install

This project uses node and npm.

$ npm install @siteone/system-core
$ # OR
$ yarn add @siteone/system-core

Usage

Element

Base design system component with styling props and responsive superpowers

propTypes

Content alignment

Contexts

NestedThemeProvider

Uses specific theme context for all enclosed design system components.

Examples

import { NestedThemeProvider } from '@siteone/system-core'
import { Section } from '@siteone/system-components'
import React from 'react'

const MyComponent = () =>
   <NestedThemeProvider name='inverse'>
     <Section>This component and its children will be inverse (if inverse theme context is specified).</Section>
   </NestedThemeProvider>

ThemeProvider

Root theme provider. Must be at the topmost level of application. Provides base CSS normalization, base theme extended by theme provided and complete theme for enclosed application.

Examples

import { ThemeProvider } from '@siteone/system-core'
import React from 'react'
import theme from './my-theme'

const MyApp = () =>
   <ThemeProvider theme={theme}>
     <div>My application goes here</div>
   </ThemeProvider>

Creators

createGroup

Creates a factory function for creating themeable components in specified group

Parameters

• groupName {string} Component group (type] name should be pascal case singular(ex. Text, Button]
• groupBaseComponent {React$Component} Component to use for this group (overridable by specific component in this group) default: Element

Examples

import * as React from 'react'
import { withInteractivity, createGroup } from '@siteone/system-core'

// create factory for component group "text"
const createComponent = createGroup('text')
// create themeable component within that group
const MyHeading = createComponent('MyHeading', 'h1', Element)

export { MyHeading }

Returns createComponent Component creator for group

createComponent

Parameters

• componentName string {string} Component name
• as string {string} HTML tag name
• baseComponent React$Component<any, any> {React$Component} Component to use for this specific component

Returns React$Component<any, any>

withInteractivity

Adds tappable states handling and theming support to themeable component

Parameters

• ThemeableComponent Themeable component to extend

Examples

import * as React from 'react'
import { withInteractivity, createStaticComponentGroup } from '@siteone/system-components'

// create factory for component group "buttons"
const createComponent = createStaticComponentGroup('buttons')
// create component and make it interactive
const MyButton = withInteractivity( createComponent('MyButton', 'button', Element) )

export { MyButton }

• See: @emotion/core

styled

• See: @emotion/styled

Contribute

1. Fork it and create your feature branch: git checkout -b my-new-feature
2. Commit your changes: git commit -am "Add some feature"
3. Push to the branch: git push origin my-new-feature
4. Submit a pull request

License

MIT © SiteOne, contributors, sourced packages authors & contributors