npm package: @siteone/system-core
Description: Design system core packages
Author: Viktor Bezdek
Latest version: 1.1.0

# @siteone/system-core

[![package version](https://img.shields.io/npm/v/@siteone/system-core.svg?style=flat-square)](https://npmjs.org/package/@siteone/system-core)
[![package downloads](https://img.shields.io/npm/dm/@siteone/system-core.svg?style=flat-square)](https://npmjs.org/package/@siteone/system-core)
[![standard-readme compliant](https://img.shields.io/badge/readme%20style-standard-brightgreen.svg?style=flat-square)](https://github.com/RichardLitt/standard-readme)
[![package license](https://img.shields.io/npm/l/@siteone/system-core.svg?style=flat-square)](https://npmjs.org/package/@siteone/system-core)
[![make a pull request](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)

> Design system core packages

## Table of Contents

-   [Install](#install)
-   [Usage](#usage)
-   [Contribute](#contribute)
-   [License](#License)

## Install

This project uses [node](https://nodejs.org) and [npm](https://www.npmjs.com). 

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

## Usage

<!-- Generated by documentation.js. Update this documentation by updating the source code. -->

### 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

```javascript
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

```javascript
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

```javascript
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](#createcomponent)** Component creator for group

### createComponent

#### Parameters

-   `componentName` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** {string} Component name
-   `as` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** {string} HTML tag name
-   `baseComponent` **React$Component&lt;any, any>** {React$Component} Component to use for this specific component

Returns **React$Component&lt;any, any>** 

### withInteractivity

Adds tappable states handling and theming support to themeable component

#### Parameters

-   `ThemeableComponent`  Themeable component to extend

#### Examples

```javascript
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