@siteone/system-core NPM

@siteone/system-core

Design system core packages

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 }