├── .babelrc ├── .gitignore ├── .travis.yml ├── README.md ├── demo ├── README.md ├── components │ ├── Button.js │ ├── Button.scss │ ├── Card.js │ ├── Card.scss │ ├── Footer.js │ ├── Header.js │ └── Post.js ├── entry.js ├── index.html ├── scss │ ├── base │ │ ├── _body.scss │ │ ├── _initialize.scss │ │ └── _type.scss │ ├── main.scss │ ├── objects │ │ ├── _container.scss │ │ ├── _grid.scss │ │ ├── _list.scss │ │ ├── _media.scss │ │ └── _type.scss │ ├── settings │ │ ├── _baseline.scss │ │ ├── _colors.scss │ │ ├── _core.scss │ │ └── _spacing.scss │ ├── tools │ │ ├── _core.scss │ │ ├── _ms.scss │ │ ├── _rtl.scss │ │ └── _type.scss │ └── utilities │ │ ├── _align.scss │ │ ├── _bgcolor.scss │ │ ├── _clearfix.scss │ │ ├── _color.scss │ │ ├── _display.scss │ │ ├── _float.scss │ │ ├── _margin.scss │ │ ├── _opacity.scss │ │ ├── _padding.scss │ │ ├── _position.scss │ │ ├── _pull.scss │ │ ├── _push.scss │ │ ├── _size.scss │ │ ├── _text.scss │ │ ├── _transform.scss │ │ └── _weight.scss ├── svg │ └── logo.svg └── webpack.config.js ├── package-lock.json ├── package.json ├── src ├── Base.js ├── Container.js ├── Grid.js ├── GridColumn.js ├── H1.js ├── H2.js ├── H3.js ├── H4.js ├── H5.js ├── H6.js ├── List.js ├── ListItem.js ├── Media.js ├── MediaFixed.js ├── MediaFluid.js ├── P.js ├── Type.js ├── index.js └── utils │ ├── propsToUtilClasses.js │ ├── restProps.js │ └── utilsList.js ├── test ├── Base.spec.js ├── Container.spec.js ├── Grid.spec.js ├── GridColumn.spec.js ├── H1.spec.js ├── H2.spec.js ├── H3.spec.js ├── H4.spec.js ├── H5.spec.js ├── H6.spec.js ├── List.spec.js ├── ListItem.spec.js ├── Media.spec.js ├── MediaFixed.spec.js ├── MediaFluid.spec.js ├── P.js ├── Type.spec.js └── support │ ├── enzyme.js │ └── polyfills.js ├── webpack.config.js └── yarn.lock /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "test": { 4 | "presets": [ 5 | "react", 6 | ["env", { 7 | "useBuiltIns": true, 8 | "targets": { 9 | "node": "current" 10 | } 11 | }] 12 | ], 13 | "plugins": [ 14 | ["transform-object-rest-spread", { "useBuiltIns": true }], 15 | "transform-class-properties", 16 | ["transform-es2015-modules-commonjs", { "loose": true }] 17 | ] 18 | }, 19 | 20 | "cjs": { 21 | "presets": [ 22 | "react", 23 | ["env", { 24 | "useBuiltIns": true 25 | }] 26 | ], 27 | "plugins": [ 28 | ["transform-object-rest-spread", { "useBuiltIns": true }], 29 | "transform-class-properties", 30 | ["transform-es2015-modules-commonjs", { "loose": true }] 31 | ] 32 | }, 33 | 34 | "esm": { 35 | "presets": [ 36 | "react", 37 | ["env", { 38 | "useBuiltIns": true, 39 | "modules": false 40 | }] 41 | ], 42 | "plugins": [ 43 | ["transform-object-rest-spread", { "useBuiltIns": true }], 44 | "transform-class-properties", 45 | ] 46 | }, 47 | 48 | "umd": { 49 | "presets": [ 50 | "react", 51 | ["env", { 52 | "useBuiltIns": true, 53 | "modules": false 54 | }] 55 | ], 56 | "plugins": [ 57 | ["transform-object-rest-spread", { "useBuiltIns": true }], 58 | "transform-class-properties" 59 | ] 60 | } 61 | } 62 | } 63 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | cjs 3 | esm 4 | umd 5 | node_modules 6 | bundle.js 7 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | sudo: false 2 | language: node_js 3 | node_js: 4 | - '8' 5 | - '7' 6 | - '6' 7 | script: # --runInBand for faster execution on machines with limited resources 8 | - npm test -- --runInBand 9 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # React iotaCSS 2 | [![npm version](https://badge.fury.io/js/react-iotacss.svg)](https://badge.fury.io/js/react-iotacss) [![Build Status](https://travis-ci.org/iotacss/react-iotacss.svg?branch=master)](https://travis-ci.org/iotacss/react-iotacss) 3 | 4 | > Stateless React Components for iotaCSS. 5 | 6 | 7 | ## Features 8 | 9 | * Uses [iotaCSS](https://iotacss.com) styles 10 | * You can use [iotaPlate](https://github.com/iotacss/iotaplate) with it 11 | * Works on any application architecture 12 | * Great for prototyping 13 | * Production ready 14 | * Tested 15 | 16 | 17 | ## Getting Started 18 | 19 | ### Step 1: Install `react-iotacss` package 20 | 21 | ``` 22 | $ npm install --save react-iotacss 23 | ``` 24 | 25 | ### Step 2: Install iotaCSS 26 | 27 | For this example, we will use iotaPlate, iotaCSS's official CLI. 28 | 29 | ``` 30 | $ npm install -g iotaplate 31 | ``` 32 | 33 | Navigate to the directory you want to have your scss. For this example is `scss`: 34 | 35 | ``` 36 | $ cd scss 37 | $ iotaplate 38 | ``` 39 | 40 | ### Step 3: Import and use React iotaCSS 41 | 42 | ```jsx 43 | import React from 'react' 44 | 45 | // Import Container, H1 and P components 46 | import { Container, H1, P } from 'react-iotacss' 47 | 48 | // Import iotaCSS SCSS code that we generated with iotaPlate 49 | import './scss/main.scss' 50 | 51 | const App = () => ( 52 | 53 |

Getting Started with React iotaCSS

54 |

This is an example on how to get started with React iotaCSS

55 | 56 | ) 57 | ``` 58 | 59 | **Also, make sure you check the demo [here](https://github.com/iotacss/react-iotacss/tree/master/demo).** 60 | 61 | 62 | ## Documentation 63 | 64 | > **Note:** This library uses `Object.assign` which is not supported by some legacy browsers. 65 | > You should polyfill it if you need to support older browsers. 66 | 67 | ### Base 68 | 69 | The Base is responsible for translating `u` prefixed properties to iotaCSS utility classes, for example `uText="center"` will translate to `class="u-text-center"`. It's extended by all the React Components and you should use it in all your components if you want them to support React iotaCSS utility properties. Properties that are not specific to `Base` will be passed down to to the rendered `tagName`. 70 | 71 | #### Properties 72 | 73 | | Name | Type | Default | Description | 74 | | --- | --- | --- | --- | 75 | | tagName | String | div | TagName to be used | 76 | 77 | #### Example 78 | 79 | ```jsx 80 | 81 | Some paragraph 82 | 83 | ``` 84 | 85 | 86 | ### Container 87 | 88 | The Container is responsible for creating smart, flexible and responsive containers. 89 | 90 | #### Properties 91 | 92 | | Name | Type | Default | Description | 93 | | --- | --- | --- | --- | 94 | | gutter | String | '' | Container extra gutter name | 95 | | size | String | '' | Container extra size name | 96 | | className | String | '' | Allows to specify a CSS class | 97 | 98 | #### Example 99 | 100 | ```jsx 101 | 102 | Some content here 103 | 104 | ``` 105 | 106 | 107 | ### Grid 108 | 109 | The Grid is responsible for building a smart, flexible and responsive grid. 110 | 111 | #### Properties 112 | 113 | | Name | Type | Default | Description | 114 | | --- | --- | --- | --- | 115 | | align | oneOf(['right', 'center', 'top', 'middle', 'bottom', 'around', 'between']) | 'top' | Align grid vertically and horizontally | 116 | | gutter | String | '' | Grid extra gutter name | 117 | | rev | Boolean | false | Reversed grid | 118 | | equalHeight | Boolean | false | Grid with equal height | 119 | | className | String | '' | Allows to specify a CSS class | 120 | 121 | #### Example 122 | 123 | ```jsx 124 | 125 | 126 | Half width column 127 | 128 | 129 | Another half width column 130 | 131 | 132 | ``` 133 | 134 | ### List 135 | 136 | The List is responsible for creating inline, block and span lists. You can use it to build the structure of UI components like navigations or vertical lists. 137 | 138 | #### Properties 139 | 140 | | Name | Type | Default | Description | 141 | | --- | --- | --- | --- | 142 | | type | oneOf(['inline', 'block', 'span']) | 'inline' | Type of list | 143 | | align | oneOf(['top', 'middle', 'bottom']) | 'top' | Align list vertically | 144 | | gutter | String | '' | List extra gutter name | 145 | | className | String | '' | Allows to specify a CSS class | 146 | 147 | #### Example 148 | 149 | ```jsx 150 | 151 | 152 | List Item 1 153 | 154 | 155 | List Item 1 156 | 157 | 158 | ``` 159 | 160 | ### Media 161 | 162 | Media is responsible for a common design pattern where there is a fixed and a fluid width column next to each other. It's used to build the structure of sidebars, comments, avatar and other similar UI components. 163 | 164 | #### Properties 165 | 166 | | Name | Type | Default | Description | 167 | | --- | --- | --- | --- | 168 | | align | oneOf(['top', 'middle', 'bottom']) | 'top' | Align media vertically | 169 | | gutter | String | '' | Media extra gutter name | 170 | | rev | Boolean | false | Reversed media | 171 | | res | Boolean | false | Responsive media | 172 | | className | String | '' | Allows to specify a CSS class | 173 | 174 | #### Example 175 | 176 | ```jsx 177 | 178 | 179 | Fixed part of Media 180 | 181 | 182 | Fluid part of Media 183 | 184 | 185 | ``` 186 | 187 | ### Type 188 | 189 | The Type is responsible for making responsive typography a piece of cake. 190 | 191 | #### Properties 192 | 193 | | Name | Type | Default | Description | 194 | | --- | --- | --- | --- | 195 | | size | String | '' | Typography size | 196 | | tagName | String | 'p' | HTML tag to use | 197 | | className | String | '' | Allows to specify a CSS class | 198 | 199 | ```jsx 200 | Large Text 201 |

Heading 1

202 |

Heading 2

203 |

Heading 3

204 |

Heading 4

205 |
Heading 5
206 |
Heading 6
207 |

Paragraph

208 | ``` 209 | 210 | **Note: H1 - H6 and P components do not provide any size. They only use the related HTML tag.** 211 | 212 | 213 | ### Utilities 214 | 215 | React iotaCSS uses a smart way to parse properties to utility classes: 216 | 217 | ```jsx 218 | Centered text with default margin botto 219 | 220 |

Centered text with default margin bottom

221 | ``` 222 | 223 | #### Available Properties 224 | 225 | The available properties are the same as the utilities that come with iotaCSS: 226 | 227 | * uAi 228 | * uAlign 229 | * uBgcolor 230 | * uCf 231 | * uColor 232 | * uDisplay 233 | * uFd 234 | * uFloat 235 | * uJc 236 | * uM 237 | * uMt 238 | * uMr 239 | * uMb 240 | * uMl 241 | * uMv 242 | * uMh 243 | * uOpacity 244 | * uP 245 | * uPt 246 | * uPr 247 | * uPb 248 | * uPl 249 | * uPv 250 | * uPh 251 | * uPosition 252 | * uPull 253 | * uPush 254 | * uSize 255 | * uText 256 | * uTransform 257 | * uWeight 258 | 259 | 260 | #### Margin / Padding 261 | 262 | **One important note for Margin and Padding utility properties.** As decribed in the docs for [Margin](https://www.iotacss.com/docs/utilities/margin/) and [Padding](https://www.iotacss.com/docs/utilities/padding/), you will need to add an extra '-' in the SCSS configuration for the extra margin/padding sizes like the following: 263 | 264 | ```scss 265 | $iota-utils-margin-extra: ( 266 | -small: 10px 267 | ); 268 | ``` 269 | 270 | so, it will generate a class with like '.u-mb-small' instead of '.u-mbsmall'. **This is required for React iotaCSS because it always uses a '-' to separate the margin/padding direction from the extra margin/padding size.** 271 | 272 | 273 | #### Properties 274 | 275 | | Name | Type | Description | 276 | | --- | --- | --- | 277 | | uAlign | String | Vertical Align | 278 | | uBgcolor | String | Background Color | 279 | | uCf | Boolean | Clearfix | 280 | | uColor | String | Color | 281 | | uDisplay | String | Display | 282 | | uFloat | String | Float | 283 | | uM | oneOfType([PropTypes.bool, PropTypes.string]) | Margin | 284 | | uMt | oneOfType([PropTypes.bool, PropTypes.string]) | Margin Top | 285 | | uMr | oneOfType([PropTypes.bool, PropTypes.string]) | Margin Right | 286 | | uMb | oneOfType([PropTypes.bool, PropTypes.string]) | Margin Bottom | 287 | | uMl | oneOfType([PropTypes.bool, PropTypes.string]) | Margin Left | 288 | | uMv | oneOfType([PropTypes.bool, PropTypes.string]) | Margin Vertical | 289 | | uMh | oneOfType([PropTypes.bool, PropTypes.string]) | Margin Horizontal | 290 | | uOpacity | String | Opacity | 291 | | uP | oneOfType([PropTypes.bool, PropTypes.string]) | Padding | 292 | | uPt | oneOfType([PropTypes.bool, PropTypes.string]) | Padding Top | 293 | | uPr | oneOfType([PropTypes.bool, PropTypes.string]) | Padding Right | 294 | | uPb | oneOfType([PropTypes.bool, PropTypes.string]) | Padding Bottom | 295 | | uPl | oneOfType([PropTypes.bool, PropTypes.string]) | Padding Left | 296 | | uPv | oneOfType([PropTypes.bool, PropTypes.string]) | Padding Vertical | 297 | | uPh | oneOfType([PropTypes.bool, PropTypes.string]) | Padding Horizontal | 298 | | uPosition | String | Position | 299 | | uPull | String | Offset After | 300 | | uPush | String | Offset | 301 | | uText | String | Text Align | 302 | | uTransform | String | Text Transform | 303 | | uWeight | String | Font Weight | 304 | 305 | 306 | #### Example 307 | 308 | ```js 309 |

Hello World

310 | 311 |

Hello World

312 | ``` 313 | 314 | #### Responsive Utilities 315 | 316 | React iotaCSS also supports responsive utilities with a similar syntax to iotaCSS itself, with one big difference. Since in React you cannot pass two times the same property with difference values, iotaCSS introduces the 'all' word which is used in case you want to have for example a default margin everywhere and a large margin to only 'sm' breakpoint: 317 | 318 | ```jsx 319 | Right on all devices, center on tablets and up. Default margin bottom in all devices and large margin bottom in tablets and up 320 | 321 |

Right on all devices, center on tablets and up. Default margin bottom in all devices and large margin bottom in tablets and up

322 | ``` 323 | 324 | ## Testing 325 | 326 | Interactive mode 327 | 328 | ```js 329 | // NPM 330 | npm run test:watch 331 | 332 | // Yarn 333 | yarn test:watch 334 | ``` 335 | 336 | Single run mode: 337 | 338 | ```js 339 | // NPM 340 | npm test 341 | 342 | // Yarn 343 | yarn test 344 | ``` 345 | -------------------------------------------------------------------------------- /demo/README.md: -------------------------------------------------------------------------------- 1 | # React iotaCSS Demo 2 | 3 | A simple React iotaCSS demo app 4 | 5 | 6 | ## Getting Started 7 | 8 | ### Step 1 9 | 10 | Go to the root of the project, not the demo folder. 11 | 12 | 13 | ### Step 2 14 | 15 | ``` 16 | $ npm install 17 | ``` 18 | 19 | ### Step 3 20 | 21 | To start the server: 22 | 23 | ``` 24 | $ npm run dev 25 | ``` 26 | 27 | To run the tests: 28 | 29 | ``` 30 | $ npm test 31 | ``` 32 | -------------------------------------------------------------------------------- /demo/components/Button.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import PropTypes from 'prop-types' 3 | import classnames from 'classnames' 4 | 5 | import { 6 | Base 7 | } from '../../src' 8 | 9 | 10 | import './Button.scss' 11 | 12 | 13 | const Button = ({ 14 | className, 15 | children, 16 | type, 17 | ...props 18 | }) => { 19 | const buttonClasses = classnames('c-button', className, { 20 | [`c-button--${type}`]: type 21 | }) 22 | 23 | return ( 24 | 25 | {children} 26 | 27 | ) 28 | } 29 | 30 | 31 | Button.propTypes = { 32 | type: PropTypes.oneOf(['outline']), 33 | children: PropTypes.node 34 | } 35 | 36 | 37 | export default Button 38 | -------------------------------------------------------------------------------- /demo/components/Button.scss: -------------------------------------------------------------------------------- 1 | @import '../scss/settings/baseline'; 2 | @import '../scss/settings/colors'; 3 | 4 | 5 | $button-color : $color-blue; 6 | $button-color-hover : darken($color-blue, 10%); 7 | 8 | 9 | .c-button { 10 | padding: $baseline-x2 $baseline-x3; 11 | display: inline-block; 12 | font: inherit; 13 | color: $color-white; 14 | white-space: nowrap; 15 | text-align: center; 16 | vertical-align: middle; 17 | cursor: pointer; 18 | text-decoration: none; 19 | border: none; 20 | background-color: $button-color; 21 | border-radius: 3px; 22 | } 23 | 24 | .c-button:hover { background-color: $button-color-hover } 25 | 26 | 27 | .c-button--outline { 28 | padding: ( $baseline-x2 - 2 ) ( $baseline-x3 - 2 ); 29 | color: #38B2FF; 30 | border: 1px solid $button-color; 31 | background-color: transparent; 32 | } 33 | 34 | .c-button--outline:hover { 35 | color: #1893E0; 36 | border-color: $button-color-hover; 37 | background-color: transparent; 38 | } 39 | -------------------------------------------------------------------------------- /demo/components/Card.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import PropTypes from 'prop-types' 3 | import classnames from 'classnames' 4 | 5 | import { 6 | Base 7 | } from '../../src' 8 | 9 | 10 | import './Card.scss' 11 | 12 | 13 | const Card = ({ 14 | className, 15 | children, 16 | style, 17 | ...props 18 | }) => { 19 | const cardClasses = classnames('c-card', className, { 20 | [`c-card--${style}`]: style 21 | }) 22 | 23 | return ( 24 | 25 | {children} 26 | 27 | ) 28 | } 29 | 30 | 31 | Card.propTypes = { 32 | style: PropTypes.oneOf(['light']), 33 | className: PropTypes.string, 34 | children: PropTypes.node 35 | } 36 | 37 | 38 | export default Card 39 | -------------------------------------------------------------------------------- /demo/components/Card.scss: -------------------------------------------------------------------------------- 1 | @import '../scss/settings/baseline'; 2 | @import '../scss/settings/colors'; 3 | 4 | 5 | .c-card { 6 | padding: $baseline-x5; 7 | background: rgba($color-white, 0.8); 8 | border-radius: 2px; 9 | box-shadow: 0 1px 2px 0 rgba(28,45,157,0.28); 10 | } 11 | 12 | 13 | .c-card--light { background: rgba($color-white, 0.5) } 14 | -------------------------------------------------------------------------------- /demo/components/Footer.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import classnames from 'classnames' 3 | 4 | import { 5 | Base, 6 | Container, 7 | List, 8 | Media, 9 | Type 10 | } from '../../src' 11 | 12 | 13 | const Footer = ({ 14 | className, 15 | }) => { 16 | return ( 17 | 18 | 19 | 20 | 21 | Follow us on twitter 22 | 23 | 24 | Copyright © 2017 iotaCSS. All rights reserved. 25 | 26 | 27 | 28 | 29 | ) 30 | } 31 | 32 | 33 | export default Footer 34 | -------------------------------------------------------------------------------- /demo/components/Header.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import classnames from 'classnames' 3 | 4 | import logo from '../svg/logo.svg' 5 | 6 | import { 7 | Base, 8 | Container, 9 | List, 10 | Media 11 | } from '../../src' 12 | 13 | 14 | const Header = ({ 15 | className, 16 | ...props 17 | }) => { 18 | return ( 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | List Item 1 31 | 32 | 33 | List Item 2 34 | 35 | 36 | List Item 3 37 | 38 | 39 | 40 | 41 | 42 | 43 | ) 44 | } 45 | 46 | 47 | export default Header 48 | -------------------------------------------------------------------------------- /demo/components/Post.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import classnames from 'classnames' 3 | 4 | import { 5 | Type, 6 | Media, 7 | P 8 | } from '../../src' 9 | 10 | 11 | const Post = ({ 12 | title, 13 | date, 14 | className, 15 | ...props 16 | }) => { 17 | return ( 18 | 19 | 20 | {date} 21 | 22 | 23 |

24 | {title} 25 |

26 | 27 | 28 | ) 29 | } 30 | 31 | 32 | export default Post 33 | -------------------------------------------------------------------------------- /demo/entry.js: -------------------------------------------------------------------------------- 1 | import React, {Component} from 'react' 2 | import ReactDOM from 'react-dom' 3 | 4 | // Importing all CSS from iotaCSS 5 | import './scss/main.scss' 6 | 7 | // Importing custom React Components 8 | import Header from './components/Header' 9 | import Footer from './components/Footer' 10 | import Button from './components/Button' 11 | import Card from './components/Card' 12 | import Post from './components/Post' 13 | 14 | import { 15 | Container, 16 | Grid, 17 | List, 18 | H1, 19 | H2, 20 | P 21 | } from '../src' 22 | 23 | 24 | class App extends React.Component { 25 | render() { 26 | return ( 27 |
28 | 29 | 30 |
31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 |

Dashboard

39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 |

10

50 |

Published posts

51 | 52 | 53 | 54 | 55 |

10

56 |

Deleted posts

57 | 58 | 59 | 60 | 61 |

10

62 |

Scheduled posts

63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 |

All posts

72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 83 | 84 | 85 | 88 | 89 | 90 | 93 | 94 | 95 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 |
110 | ) 111 | } 112 | } 113 | 114 | const div = document.getElementById('app') 115 | ReactDOM.render(, div) 116 | -------------------------------------------------------------------------------- /demo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | React iotaCSS Demo 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /demo/scss/base/_body.scss: -------------------------------------------------------------------------------- 1 | body {} 2 | -------------------------------------------------------------------------------- /demo/scss/base/_initialize.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Global box sizing option 3 | * 4 | * Type: String 5 | */ 6 | 7 | $iota-base-initialize-box-sizing: 'border-box'; 8 | 9 | 10 | /** 11 | * Makes all heading tags ( h1 - h6 ) to be equal 12 | * to your body size. It forces you to use heading 13 | * tags with focus on your semantics and not on the 14 | * way they look. 15 | * 16 | * Type: Boolean 17 | */ 18 | 19 | $iota-base-initialize-heading-size: true; 20 | 21 | 22 | /** 23 | * Enables normalize and resets for the HTML4 form 24 | * elements 25 | * 26 | * Type: Boolean 27 | */ 28 | 29 | $iota-base-initialize-form-elements: false; 30 | 31 | 32 | /** 33 | * Enables normalize and resets for the HTML5 form 34 | * elements 35 | * 36 | * Type: Boolean 37 | */ 38 | 39 | $iota-base-initialize-html5-form-elements: false; 40 | 41 | 42 | @import 'node_modules/iotacss/base/initialize'; 43 | -------------------------------------------------------------------------------- /demo/scss/base/_type.scss: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: 'Proxima Nova'; 3 | font-size: 16px; 4 | color: $color-blue-dark; 5 | } 6 | 7 | h1, 8 | h2, 9 | h3 { font-weight: 400 } 10 | 11 | a { text-decoration: none; color: inherit; } 12 | -------------------------------------------------------------------------------- /demo/scss/main.scss: -------------------------------------------------------------------------------- 1 | @import 'settings/baseline'; 2 | @import 'settings/core'; 3 | @import 'settings/colors'; 4 | @import 'settings/spacing'; 5 | 6 | @import 'tools/core'; 7 | @import 'tools/ms'; 8 | 9 | @import 'base/initialize'; 10 | @import 'base/body'; 11 | @import 'base/type'; 12 | 13 | @import 'objects/container'; 14 | @import 'objects/grid'; 15 | @import 'objects/list'; 16 | @import 'objects/media'; 17 | @import 'objects/type'; 18 | 19 | @import 'utilities/bgcolor'; 20 | @import 'utilities/color'; 21 | @import 'utilities/display'; 22 | @import 'utilities/margin'; 23 | @import 'utilities/padding'; 24 | @import 'utilities/size'; 25 | @import 'utilities/text'; 26 | @import 'utilities/weight'; 27 | -------------------------------------------------------------------------------- /demo/scss/objects/_container.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Allows you to change the default container name 3 | * from .o-container. 4 | * 5 | * Type: String 6 | */ 7 | 8 | $iota-objs-container-namespace: 'container'; 9 | 10 | 11 | /** 12 | * Allows you to specify the default set of padding 13 | * left and right of your container. You can use a 14 | * map in case you would like to specify responsive 15 | * gutter sizes. 16 | * 17 | * Type: Number / List / Map 18 | */ 19 | 20 | $iota-objs-container-gutter-default: ( 21 | null: $baseline-x2, 22 | sm : $baseline-x3 23 | ); 24 | 25 | 26 | /** 27 | * Allows you to specify more sets of padding left and 28 | * right of your container. You can use a nested map in 29 | * case you would like to specify responsive gutter sizes. 30 | * 31 | * Type: Map 32 | */ 33 | 34 | $iota-objs-container-gutter-extra: (); 35 | 36 | 37 | /** 38 | * Allows you to specify the default max-width of your 39 | * container. You can use a map in case you would like 40 | * to specify a responsive size. 41 | * 42 | * Type: String / Map 43 | */ 44 | 45 | $iota-objs-container-size-default: 1000px; 46 | 47 | 48 | /** 49 | * Allows you to specify more sets of max-width for your 50 | * container. You can use a nested map in case you would 51 | * like to specify a responsive size. 52 | * 53 | * Type: Map 54 | */ 55 | 56 | $iota-objs-container-size-extra: (); 57 | 58 | 59 | @import 'node_modules/iotacss/objects/container'; 60 | -------------------------------------------------------------------------------- /demo/scss/objects/_grid.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Enable / Disable aligment modifiers. 3 | * .o-grid--right : Align columns on right horizontally 4 | * .o-grid--center : Align columns on center horizontally 5 | * .o-grid--middle : Align columns on middle vertically 6 | * .o-grid--bottom : Align columns on bottom vertically 7 | * 8 | * Type: Boolean 9 | */ 10 | 11 | $iota-objs-grid-aligned: true; 12 | 13 | 14 | /** 15 | * Enable / Disable reversed modifier 16 | * .o-grid--rev : Reverse columns order 17 | * 18 | * Type: Boolean 19 | */ 20 | 21 | $iota-objs-grid-rev: false; 22 | 23 | 24 | /** 25 | * Default gutter size. Use a number for a single size or 26 | * a map for a responsive size. 27 | * 28 | * Type: Number / Map 29 | */ 30 | 31 | $iota-objs-grid-gutter-default: $baseline; 32 | 33 | 34 | /** 35 | * Extra gutters map. Each gutter size will be available as a 36 | * modifier that will be named according to the gutter name. 37 | * Each gutter size will be available as a modifier that will 38 | * be named according to the gutter name. 39 | * E.g. If $iota-objs-grid-gutter-extra: ('compact': '10px'); 40 | * then .o-grid--compact will be available for use. 41 | * 42 | * Type: Map 43 | */ 44 | 45 | $iota-objs-grid-gutter-extra: ( 46 | x4: $baseline-x4 47 | ); 48 | 49 | 50 | /** 51 | * Enable / Disable flexbox on grid. 52 | * 53 | * Type: Boolean 54 | */ 55 | 56 | $iota-objs-grid-flex: $iota-global-flex; 57 | 58 | 59 | /** 60 | * Enable / Disable equal height modifier .o-grid--equal-height. 61 | * Works only if $iota-obj-grid-flex is enabled. 62 | * 63 | * Type: Boolean 64 | */ 65 | 66 | $iota-objs-grid-equal-height: false; 67 | 68 | 69 | /** 70 | * Namespace classes 71 | * 72 | * Type: String 73 | */ 74 | 75 | $iota-objs-grid-namespace : 'grid'; 76 | $iota-objs-grid-column-name : 'col'; 77 | $iota-objs-grid-align-right-name : 'right'; 78 | $iota-objs-grid-align-center-name : 'center'; 79 | $iota-objs-grid-align-top-name : 'top'; 80 | $iota-objs-grid-namespace : 'grid'; 81 | 82 | 83 | @import 'node_modules/iotacss/objects/grid'; 84 | -------------------------------------------------------------------------------- /demo/scss/objects/_list.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Enable / Disable block modifier. .o-list--block : Each list 3 | * item will have display block with a bottom margin. 4 | * 5 | * Type: Boolean 6 | */ 7 | 8 | $iota-objs-list-block: false; 9 | 10 | 11 | /** 12 | * Enable / Disable inline modifier. .o-list--inline Each list 13 | * item will have display inline-block with a right margin. 14 | * 15 | * Type: Boolean 16 | */ 17 | 18 | $iota-objs-list-inline: true; 19 | 20 | 21 | /** 22 | * Enable / Disable span modifier. .o-list--span : Each list 23 | * item will have display table-cell with a border spacing so 24 | * that they never wrap to a new row. 25 | * 26 | * Type: Boolean 27 | */ 28 | 29 | $iota-objs-list-span: false; 30 | 31 | 32 | /** 33 | * Default gutter size. Use a number for a single size or 34 | * a map for a responsive size. 35 | * 36 | * Type: Number / Map 37 | */ 38 | 39 | $iota-objs-list-gutter-default: $baseline; 40 | 41 | 42 | /** 43 | * Extra gutters map. Each gutter size will be available 44 | * as a modifier that will be named according to the gutter 45 | * name. E.g. If $iota-objs-list-gutter-extra: ('compact': '10px'); 46 | * then .o-list--compact will be available for use. 47 | * 48 | * Type: Map 49 | */ 50 | 51 | $iota-objs-list-gutter-extra: ( 52 | x4: $baseline-x4 53 | ); 54 | 55 | 56 | /** 57 | * Namespace classes 58 | * 59 | * Type: String 60 | */ 61 | 62 | $iota-objs-list-namespace : 'list'; 63 | $iota-objs-list-item-name : 'item'; 64 | $iota-objs-list-block-name : 'block'; 65 | $iota-objs-list-inline-name : 'inline'; 66 | $iota-objs-list-span-name : 'span'; 67 | 68 | 69 | @import 'node_modules/iotacss/objects/list'; 70 | -------------------------------------------------------------------------------- /demo/scss/objects/_media.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Enable / Disable aligment modifiers. 3 | * .o-media--middle Align columns at middle vertically 4 | * .o-media--bottom Align columns at bottom vertically. 5 | * 6 | * Type: Boolean 7 | */ 8 | 9 | $iota-objs-media-aligned: true; 10 | 11 | 12 | /** 13 | * Enable / Disable reversed modifier 14 | * .o-media--rev Reverse columns order 15 | * 16 | * Type: Boolean 17 | */ 18 | 19 | $iota-objs-media-rev: true; 20 | 21 | 22 | /** 23 | * Default gutter size. Use a number for a single size or 24 | * a map for a responsive size. 25 | * 26 | * Type: Number / Map 27 | */ 28 | 29 | $iota-objs-media-gutter-default: $iota-global-gutter-default; 30 | 31 | 32 | /** 33 | * Extra gutters map. Each gutter size will be available as 34 | * a modifier that will be named according to the gutter name. 35 | * Use a map for a single size or a nested map for a responsive 36 | * size. E.g. If $iota-objs-media-gutter-extra: ('compact': '10px'); 37 | * then .o-media--compact will be available for use. 38 | * 39 | * Type: Map 40 | */ 41 | 42 | $iota-objs-media-gutter-extra: ( 43 | x4: $baseline-x4 44 | ); 45 | 46 | 47 | /** 48 | * Enable / Disable flexbox 49 | * 50 | * Type: Boolean 51 | */ 52 | 53 | $iota-objs-media-flex: $iota-global-flex; 54 | 55 | 56 | /** 57 | * Enable / Disable responsive modifier. 58 | * .o-media--res Collapse fluid section bellow fixed one, 59 | * at a specific max-width breakpoint. 60 | * 61 | * Type: Boolean 62 | */ 63 | 64 | $iota-objs-media-res: true; 65 | 66 | 67 | /** 68 | * Specify max-width for breakpoint to collapse at. 69 | * 70 | * Type: Number 71 | */ 72 | 73 | $iota-objs-media-collapse-at: 767px; 74 | 75 | 76 | /** 77 | * Namespace classes 78 | * 79 | * Type: String 80 | */ 81 | 82 | $iota-objs-media-namespace : 'media'; 83 | $iota-objs-media-fixed-name : 'fixed'; 84 | $iota-objs-media-fluid-name : 'fluid'; 85 | $iota-objs-media-reversed-name : 'rev'; 86 | $iota-objs-media-align-middle-name : 'middle'; 87 | $iota-objs-media-align-bottom-name : 'bottom'; 88 | $iota-objs-media-responsive-name : 'res'; 89 | 90 | 91 | @import 'node_modules/iotacss/objects/media'; 92 | -------------------------------------------------------------------------------- /demo/scss/objects/_type.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Allows you to change the default type name from .o-type-. 3 | * 4 | * Type: String 5 | */ 6 | 7 | $iota-objs-type-namespace: 'type-'; 8 | 9 | 10 | /** 11 | * Allows you to specify typography sizes. 12 | * 13 | * Type: Map 14 | */ 15 | 16 | $iota-objs-type-sizes: ( 17 | ms1: ( 18 | null: iota-ms(0), 19 | sm : iota-ms(1) 20 | ), 21 | ms2: ( 22 | null: iota-ms(1), 23 | sm : iota-ms(2) 24 | ), 25 | ms3: ( 26 | null: iota-ms(2), 27 | sm : iota-ms(3) 28 | ), 29 | ms4: ( 30 | null: iota-ms(3), 31 | sm : iota-ms(4) 32 | ), 33 | ms5: ( 34 | null: iota-ms(4), 35 | sm : iota-ms(5) 36 | ), 37 | ms6: ( 38 | null: iota-ms(5), 39 | sm : iota-ms(6) 40 | ) 41 | ); 42 | 43 | 44 | @import 'node_modules/iotacss/objects/type'; 45 | -------------------------------------------------------------------------------- /demo/scss/settings/_baseline.scss: -------------------------------------------------------------------------------- 1 | $baseline: 7px; 2 | 3 | $baseline-x2 : $baseline * 2; 4 | $baseline-x3 : $baseline * 3; 5 | $baseline-x4 : $baseline * 4; 6 | $baseline-x5 : $baseline * 5; 7 | $baseline-x6 : $baseline * 6; 8 | $baseline-x7 : $baseline * 7; 9 | $baseline-x8 : $baseline * 8; 10 | $baseline-x9 : $baseline * 9; 11 | $baseline-x10 : $baseline * 10; 12 | -------------------------------------------------------------------------------- /demo/scss/settings/_colors.scss: -------------------------------------------------------------------------------- 1 | // Global Color Variables 2 | 3 | $color-white : #FFFFFF; 4 | $color-blue : #38B2FF; 5 | $color-blue-dark : #0D2A4A; 6 | $color-purple : #7070D5; 7 | $color-red : #FC4A33; 8 | $color-grey : #A3ADBF; 9 | $color-grey-dark : #7A8599; 10 | $color-grey-light : #F5F5F7; 11 | 12 | 13 | // Colors map for Color and Background color utility 14 | 15 | $colors: ( 16 | 'white' : $color-white, 17 | 'blue' : $color-blue, 18 | 'blue-dark' : $color-blue-dark, 19 | 'purple' : $color-purple, 20 | 'red' : $color-red, 21 | 'grey' : $color-grey, 22 | 'grey-dark' : $color-grey-dark, 23 | 'grey-light' : $color-grey-light 24 | ); 25 | -------------------------------------------------------------------------------- /demo/scss/settings/_core.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Grid columns. This setting is shared between 3 | * iotaCSS grid objects and size, pull & push 4 | * utilities. You can change it also locally to 5 | * each module. 6 | * 7 | * Type: Unitless Number / List 8 | */ 9 | 10 | $iota-global-columns: 2, 3; 11 | 12 | 13 | /** 14 | * Global namespace for Objects, Components and 15 | * Utilities 16 | * 17 | * Type: String 18 | */ 19 | 20 | $iota-global-objects-namespace : 'o-'; 21 | $iota-global-utilities-namespace : 'u-'; 22 | $iota-global-components-namespace : 'c-'; 23 | 24 | 25 | /** 26 | * Default gutters. This setting is shared between 27 | * multiple objects and utilities as the default value 28 | * for gutters. You can change it also locally to each 29 | * module. 30 | * 31 | * Type: Number / List / Map 32 | */ 33 | 34 | $iota-global-gutter-default: $baseline; 35 | 36 | 37 | /** 38 | * Enables flexbox across the app. If you do not want 39 | * all modules to use flexbox you can keep this value 40 | * false and set it to true separately to each one of 41 | * them locally. 42 | * 43 | * Type: Boolean 44 | */ 45 | 46 | $iota-global-flex: true; 47 | 48 | 49 | /** 50 | * Enables rtl across the app. If you enable this setting 51 | * the final CSS will be converted to RTL. 52 | * 53 | * Type: Boolean 54 | */ 55 | 56 | $iota-global-rtl: false; 57 | 58 | 59 | /** 60 | * Default global breakpoints map. These are the 61 | * default breakpoints map that will be shared across 62 | * all iotaCSS modules. You can change it also locally 63 | * to each module. 64 | * 65 | * Type: Map 66 | */ 67 | 68 | $iota-global-breakpoints: ( 69 | xs : "screen and ( max-width: 767px )", 70 | sm : "screen and ( min-width: 768px )" 71 | ); 72 | 73 | 74 | /** 75 | * Global breakpoint suffix naming setting. All breakpoint 76 | * specific styles have a '@breakpointName' suffix by default. 77 | * The \ character is used to escape the @ character. 78 | * 79 | * Type: String 80 | */ 81 | 82 | $iota-global-breakpoint-separator: \@; 83 | 84 | 85 | /** 86 | * Global delimiter naming setting for Size, Push and Pull 87 | * utilities. By default it is '/' (.u-1/2) and you can change 88 | * it for example to 'of' so that the generated HTML class will be 89 | * 'u-1of2'. 90 | * 91 | * Type: String 92 | */ 93 | 94 | $iota-global-delimiter: \/; 95 | 96 | 97 | @import 'node_modules/iotacss/settings/core'; 98 | -------------------------------------------------------------------------------- /demo/scss/settings/_spacing.scss: -------------------------------------------------------------------------------- 1 | // Spacing for Margin / Padding 2 | 3 | $spacing-default: 36px; 4 | 5 | $spacing-extra: ( 6 | -x2 : $baseline-x2, 7 | -x3 : $baseline-x3, 8 | -x4 : $baseline-x4, 9 | -x5 : $baseline-x5, 10 | -x6 : $baseline-x6, 11 | -x7 : $baseline-x7, 12 | -x8 : $baseline-x8 13 | ); 14 | -------------------------------------------------------------------------------- /demo/scss/tools/_core.scss: -------------------------------------------------------------------------------- 1 | @import 'node_modules/iotacss/tools/core'; 2 | -------------------------------------------------------------------------------- /demo/scss/tools/_ms.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * The base value the scale starts at. 3 | * 4 | * Number 5 | */ 6 | 7 | $iota-tools-ms-base: 16px; 8 | 9 | 10 | /** 11 | * The ratio the scale is built on 12 | * 13 | * Unitless Number 14 | */ 15 | 16 | $iota-tools-ms-ratio: 1.3; 17 | 18 | 19 | /** 20 | * Length of scale ( right part of the decimal 21 | * point ) ms will be rounded to. 22 | * 23 | * Unitless Number 24 | */ 25 | 26 | $iota-tools-ms-scale: 3; 27 | 28 | 29 | @import 'node_modules/iotacss/tools/ms'; 30 | -------------------------------------------------------------------------------- /demo/scss/tools/_rtl.scss: -------------------------------------------------------------------------------- 1 | @import 'node_modules/iotacss/tools/rtl'; 2 | -------------------------------------------------------------------------------- /demo/scss/tools/_type.scss: -------------------------------------------------------------------------------- 1 | @import 'node_modules/iotacss/tools/type'; 2 | -------------------------------------------------------------------------------- /demo/scss/utilities/_align.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Enable / Disable breakpoint specific classes 3 | * 4 | * Type: Boolean 5 | */ 6 | 7 | $iota-utils-align-res: false; 8 | 9 | 10 | /** 11 | * Override breakpoints map only for align utility 12 | * 13 | * Type: Type: Map 14 | */ 15 | 16 | $iota-utils-align-breakpoints: $iota-global-breakpoints; 17 | 18 | 19 | /** 20 | * Namespace classes 21 | * 22 | * Type: String 23 | */ 24 | 25 | $iota-utils-align-namespace : 'align'; 26 | $iota-utils-align-top-name : 'top'; 27 | $iota-utils-align-bottom-name : 'bottom'; 28 | $iota-utils-align-middle-name : 'middle'; 29 | $iota-utils-align-baseline-name : 'baseline'; 30 | 31 | 32 | @import 'node_modules/iotacss/utilities/align'; 33 | -------------------------------------------------------------------------------- /demo/scss/utilities/_bgcolor.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Background color names 3 | * 4 | * Type: Map 5 | */ 6 | 7 | $iota-utils-bgcolor-names: $colors; 8 | 9 | 10 | /** 11 | * Namespace classes 12 | * 13 | * Type: String 14 | */ 15 | 16 | $iota-utils-bgcolor-namespace: 'bgcolor-'; 17 | 18 | 19 | @import 'node_modules/iotacss/utilities/bgcolor'; 20 | -------------------------------------------------------------------------------- /demo/scss/utilities/_clearfix.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Namespace classes 3 | * 4 | * Type: String 5 | */ 6 | 7 | $iota-utils-clearfix-namespace: 'cf'; 8 | 9 | 10 | @import 'node_modules/iotacss/utilities/clearfix'; 11 | -------------------------------------------------------------------------------- /demo/scss/utilities/_color.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Color names 3 | * 4 | * Type: Map 5 | */ 6 | 7 | $iota-utils-color-names: $colors; 8 | 9 | 10 | /** 11 | * Namespace classes 12 | * 13 | * Type: String 14 | */ 15 | 16 | $iota-utils-color-namespace: 'color-'; 17 | 18 | 19 | @import 'node_modules/iotacss/utilities/color'; 20 | -------------------------------------------------------------------------------- /demo/scss/utilities/_display.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Enables / Disables breakpoint specific classes 3 | * 4 | * Type: Boolean 5 | */ 6 | 7 | $iota-utils-display-res: false; 8 | 9 | 10 | /** 11 | * Breakpoints map. Overrides the breakpoints map only 12 | * for display utility. 13 | * 14 | * Type: Map 15 | */ 16 | 17 | $iota-utils-display-breakpoints: $iota-global-breakpoints; 18 | 19 | 20 | /** 21 | * Namespace classes 22 | * 23 | * Type: String 24 | */ 25 | 26 | $iota-utils-display-namespace : ''; 27 | $iota-utils-display-block-name : 'block'; 28 | $iota-utils-display-hidden-name : 'hidden'; 29 | $iota-utils-display-inline-name : 'inline'; 30 | $iota-utils-display-inline-block-name : 'inline-block'; 31 | 32 | 33 | @import 'node_modules/iotacss/utilities/display'; 34 | -------------------------------------------------------------------------------- /demo/scss/utilities/_float.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Enables / Disables breakpoint specific classes 3 | * 4 | * Type: Boolean 5 | */ 6 | 7 | $iota-utils-float-res: false; 8 | 9 | 10 | /** 11 | * Breakpoints map. Overrides the breakpoints map only 12 | * for float utility. 13 | * 14 | * Type: Map 15 | */ 16 | 17 | $iota-utils-float-breakpoints: $iota-global-breakpoints; 18 | 19 | 20 | 21 | /** 22 | * Namespace classes 23 | * 24 | * Type: String 25 | */ 26 | 27 | $iota-utils-float-namespace : 'float-'; 28 | $iota-utils-float-left-name : 'left-'; 29 | $iota-utils-float-right-name : 'right-'; 30 | 31 | 32 | @import 'node_modules/iotacss/utilities/float'; 33 | -------------------------------------------------------------------------------- /demo/scss/utilities/_margin.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Margin default gutter. Use a number for a simple size 3 | * and a map for responsive. 4 | * 5 | * Type: Number / Map 6 | */ 7 | 8 | $iota-utils-margin-default: $spacing-default; 9 | 10 | 11 | /** 12 | * Margin extra gutters. 13 | * 14 | * Type: Map 15 | */ 16 | 17 | $iota-utils-margin-extra: $spacing-extra; 18 | 19 | 20 | /** 21 | * Enables / Disables responsive classes 22 | * 23 | * Type: Boolean 24 | */ 25 | 26 | $iota-utils-margin-res: true; 27 | 28 | 29 | /** 30 | * Breakpoints map. Overrides the breakpoints map only 31 | * for margin utility. 32 | * 33 | * Type: Map 34 | */ 35 | 36 | $iota-utils-margin-breakpoints: $iota-global-breakpoints; 37 | 38 | 39 | /** 40 | * Namespace classes 41 | * 42 | * Type: String 43 | */ 44 | 45 | $iota-utils-margin-namespace : 'm'; 46 | $iota-utils-margin-top-name : 't'; 47 | $iota-utils-margin-right-name : 'r'; 48 | $iota-utils-margin-bottom-name : 'b'; 49 | $iota-utils-margin-left-name : 'l'; 50 | $iota-utils-margin-vertical-name : 'v'; 51 | $iota-utils-margin-horizontal-name : 'h'; 52 | 53 | 54 | @import 'node_modules/iotacss/utilities/margin'; 55 | -------------------------------------------------------------------------------- /demo/scss/utilities/_opacity.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Opacity sizes 3 | * 4 | * Type: Map 5 | */ 6 | 7 | $iota-utils-opacity-sizes: (); 8 | 9 | 10 | /** 11 | * Namespace classes 12 | * 13 | * Type: String 14 | */ 15 | 16 | $iota-utils-opacity-namespace: 'opacity-'; 17 | 18 | 19 | @import 'node_modules/iotacss/utilities/opacity'; 20 | -------------------------------------------------------------------------------- /demo/scss/utilities/_padding.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Padding default gutter. Use a number for a simple size 3 | * and a map for responsive. 4 | * 5 | * Type: Number / Map 6 | */ 7 | 8 | $iota-utils-padding-default: $spacing-default; 9 | 10 | 11 | /** 12 | * Padding extra gutters. 13 | * 14 | * Type: Map 15 | */ 16 | 17 | $iota-utils-padding-extra: $spacing-extra; 18 | 19 | 20 | /** 21 | * Enables / Disables responsive classes 22 | * 23 | * Type: Boolean 24 | */ 25 | 26 | $iota-utils-padding-res: false; 27 | 28 | 29 | /** 30 | * Breakpoints map. Overrides the breakpoints map only 31 | * for padding utility. 32 | * 33 | * Type: Map 34 | */ 35 | 36 | $iota-utils-padding-breakpoints: $iota-global-breakpoints; 37 | 38 | 39 | /** 40 | * Namespace classes 41 | * 42 | * Type: String 43 | */ 44 | 45 | $iota-utils-padding-namespace : 'p'; 46 | $iota-utils-padding-top-name : 't'; 47 | $iota-utils-padding-right-name : 'r'; 48 | $iota-utils-padding-bottom-name : 'b'; 49 | $iota-utils-padding-left-name : 'l'; 50 | $iota-utils-padding-vertical-name : 'v'; 51 | $iota-utils-padding-horizontal-name : 'h'; 52 | 53 | 54 | @import 'node_modules/iotacss/utilities/padding'; 55 | -------------------------------------------------------------------------------- /demo/scss/utilities/_position.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Enable / Disable breakpoint specific classes 3 | * 4 | * Type: Boolean 5 | */ 6 | 7 | $iota-utils-position-res: false; 8 | 9 | 10 | /** 11 | * Overrides breakpoints map only for position utility 12 | * 13 | * Type: Map 14 | */ 15 | 16 | $iota-utils-position-breakpoints: $iota-global-breakpoints; 17 | 18 | 19 | /** 20 | * Namespace classes 21 | * 22 | * Type: String 23 | */ 24 | 25 | $iota-utils-position-namespace : ''; 26 | $iota-utils-position-absolute-name : 'absolute'; 27 | $iota-utils-position-fixed-name : 'fixed'; 28 | $iota-utils-position-relative-name : 'relative'; 29 | $iota-utils-position-static-name : 'static'; 30 | 31 | 32 | @import 'node_modules/iotacss/utilities/position'; 33 | -------------------------------------------------------------------------------- /demo/scss/utilities/_pull.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Namespace classes 3 | * 4 | * Type: String 5 | */ 6 | 7 | $iota-utils-pull-namespace: 'pull-'; 8 | 9 | 10 | /** 11 | * Size delimiter. Defaults to \/. Ex: .u-pull-1/3 12 | * 13 | * Type: String 14 | */ 15 | 16 | $iota-utils-pull-delimiter: $iota-global-delimiter; 17 | 18 | 19 | /** 20 | * Columns to populate pull utility for 21 | * 22 | * Type: Unitless Number / List 23 | */ 24 | 25 | $iota-utils-pull-columns: $iota-global-columns; 26 | 27 | 28 | /** 29 | * Enables / Disables breakpoint specific classes 30 | * 31 | * Type: Boolean 32 | */ 33 | 34 | $iota-utils-pull-res: false; 35 | 36 | 37 | /** 38 | * Breakpoints map. Allows you to create breakpoints only 39 | * for the pull responsive utility. 40 | * 41 | * Type: Map 42 | */ 43 | 44 | $iota-utils-pull-breakpoints: $iota-global-breakpoints; 45 | 46 | 47 | @import 'node_modules/iotacss/utilities/pull'; 48 | -------------------------------------------------------------------------------- /demo/scss/utilities/_push.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Namespace classes 3 | * 4 | * Type: String 5 | */ 6 | 7 | $iota-utils-push-namespace: 'push-'; 8 | 9 | 10 | /** 11 | * Size delimiter. Defaults to \/. Ex: .u-push-1/3 12 | * 13 | * Type: String 14 | */ 15 | 16 | $iota-utils-push-delimiter: $iota-global-delimiter; 17 | 18 | 19 | /** 20 | * Columns to populate push utility for 21 | * 22 | * Type: Unitless Number / List 23 | */ 24 | 25 | $iota-utils-push-columns: $iota-global-columns; 26 | 27 | 28 | /** 29 | * Enables / Disables breakpoint specific classes 30 | * 31 | * Type: Boolean 32 | */ 33 | 34 | $iota-utils-push-res: false; 35 | 36 | 37 | /** 38 | * Breakpoints map. Allows you to create breakpoints only 39 | * for the push responsive utility. 40 | * 41 | * Type: Map 42 | */ 43 | 44 | $iota-utils-push-breakpoints: $iota-global-breakpoints; 45 | 46 | 47 | @import 'node_modules/iotacss/utilities/push'; 48 | -------------------------------------------------------------------------------- /demo/scss/utilities/_size.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Size utility delimiter. Default to \/. Ex: .u-1/3. 3 | * 4 | * Type: String 5 | */ 6 | 7 | $iota-utils-size-delimiter: \/; 8 | 9 | 10 | /** 11 | * Size utility columns list 12 | * 13 | * Type: List 14 | */ 15 | 16 | $iota-utils-size-columns: $iota-global-columns; 17 | 18 | 19 | /** 20 | * Enables / Disables breakpoint specific classes 21 | * 22 | * Type: Boolean 23 | */ 24 | 25 | $iota-utils-size-res: true; 26 | 27 | 28 | /** 29 | * Breakpoints map. Overrides the breakpoints map only 30 | * for margin utility. 31 | * 32 | * Type: Map 33 | */ 34 | 35 | $iota-utils-size-breakpoints: $iota-global-breakpoints; 36 | 37 | 38 | /** 39 | * Namespace classes 40 | * 41 | * Type: String 42 | */ 43 | 44 | $iota-utils-size-namespace: ''; 45 | 46 | 47 | @import 'node_modules/iotacss/utilities/size'; 48 | -------------------------------------------------------------------------------- /demo/scss/utilities/_text.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Enables / Disables breakpoint specific classes 3 | * 4 | * Type: Boolean 5 | */ 6 | 7 | $iota-utils-text-res: true; 8 | 9 | 10 | /** 11 | * Overrides breakpoints map only for position utility 12 | * 13 | * Type: Map 14 | */ 15 | 16 | $iota-utils-text-breakpoints: $iota-global-breakpoints; 17 | 18 | 19 | /** 20 | * Namespace classes 21 | * 22 | * Type: String 23 | */ 24 | 25 | $iota-utils-text-namespace : 'text-'; 26 | $iota-utils-text-left-name : 'left'; 27 | $iota-utils-text-right-name : 'right'; 28 | $iota-utils-text-center-name : 'center'; 29 | 30 | 31 | @import 'node_modules/iotacss/utilities/text'; 32 | -------------------------------------------------------------------------------- /demo/scss/utilities/_transform.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Enables / Disables breakpoint specific classes 3 | * 4 | * Type: Boolean 5 | */ 6 | 7 | $iota-utils-transform-res: false; 8 | 9 | 10 | /** 11 | * Breakpoints map. Overrides the breakpoints map only 12 | * for margin utility. 13 | * 14 | * Type: Map 15 | */ 16 | 17 | $iota-utils-transform-breakpoints: $iota-global-breakpoints; 18 | 19 | 20 | /** 21 | * Namespace classes 22 | * 23 | * Type: String 24 | */ 25 | 26 | $iota-utils-transform-namespace : ''; 27 | $iota-utils-transform-capitalize-name : 'capitalize'; 28 | $iota-utils-transform-uppercase-name : 'uppercase'; 29 | $iota-utils-transform-lowercase-name : 'lowercase'; 30 | 31 | 32 | @import 'node_modules/iotacss/utilities/transform'; 33 | -------------------------------------------------------------------------------- /demo/scss/utilities/_weight.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Weight sizes 3 | * 4 | * Type: Map 5 | */ 6 | 7 | $iota-utils-weight-sizes: ( 8 | bold: 700 9 | ); 10 | 11 | 12 | /** 13 | * Namespace classes 14 | * 15 | * Type: String 16 | */ 17 | 18 | $iota-utils-weight-namespace: 'weight-'; 19 | 20 | 21 | @import 'node_modules/iotacss/utilities/weight'; 22 | -------------------------------------------------------------------------------- /demo/svg/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Group 2 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | iotaCSS 31 | 32 | 40 | 41 | 42 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /demo/webpack.config.js: -------------------------------------------------------------------------------- 1 | var path = require('path') 2 | var webpack = require('webpack') 3 | 4 | module.exports = { 5 | entry: path.join(__dirname, './entry.js'), 6 | 7 | output: { 8 | path: path.join(__dirname, 'demo'), 9 | filename: 'bundle.js' 10 | }, 11 | 12 | module: { 13 | rules: [ 14 | { 15 | test: /\.jsx?$/, 16 | use: { 17 | loader: 'babel-loader' 18 | }, 19 | exclude: /node_modules/ 20 | }, 21 | { 22 | test: /\.scss$/, 23 | use: [ 24 | 'style-loader', 25 | 'css-loader', 26 | 'sass-loader' 27 | ] 28 | }, 29 | { 30 | test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, 31 | loader: 'file-loader' 32 | } 33 | ] 34 | }, 35 | 36 | devServer: { 37 | contentBase: 'demo/' 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-iotacss", 3 | "version": "1.3.1", 4 | "description": "Stateless React Components for iotaCSS.", 5 | "main": "cjs/index.js", 6 | "jsnext:main": "esm/index.js", 7 | "module": "esm/index.js", 8 | "engine": { 9 | "node": ">=6" 10 | }, 11 | "scripts": { 12 | "build:cjs": "cross-env BABEL_ENV=cjs babel src --out-dir cjs", 13 | "build:esm": "cross-env BABEL_ENV=esm babel src --out-dir esm", 14 | "build:umd:dev": "cross-env BABEL_ENV=umd NODE_ENV=production webpack --config webpack.config.js", 15 | "build:umd:prod": "cross-env BABEL_ENV=umd NODE_ENV=development webpack --config webpack.config.js", 16 | "build": "npm run build:esm && npm run build:cjs && npm run build:umd:prod && npm run build:umd:dev", 17 | "dev": "cross-env BABEL_ENV=umd webpack-dev-server --config demo/webpack.config.js", 18 | "prepublish": "npm run build", 19 | "test": "jest", 20 | "test:watch": "jest --watch" 21 | }, 22 | "repository": { 23 | "type": "git", 24 | "url": "git+https://github.com/iotacss/react-iotacss.git" 25 | }, 26 | "keywords": [ 27 | "react", 28 | "iotacss", 29 | "harby", 30 | "bem", 31 | "oocss", 32 | "itcss" 33 | ], 34 | "files": [ 35 | "cjs", 36 | "esm", 37 | "umd" 38 | ], 39 | "author": "Dimitris Psaropoulos ", 40 | "license": "Apache-2.0", 41 | "bugs": { 42 | "url": "https://github.com/iotacss/react-iotacss/issues" 43 | }, 44 | "homepage": "https://github.com/iotacss/react-iotacss#readme", 45 | "dependencies": { 46 | "classnames": "^2.2.5", 47 | "prop-types": "^15.5.10" 48 | }, 49 | "peerDependencies": { 50 | "react": "^15.0.0-0 || ^16.0.0-0" 51 | }, 52 | "devDependencies": { 53 | "babel-cli": "^6.26.0", 54 | "babel-core": "^6.24.1", 55 | "babel-jest": "^21.2.0", 56 | "babel-loader": "^7.0.0", 57 | "babel-plugin-transform-class-properties": "^6.24.1", 58 | "babel-plugin-transform-es2015-modules-commonjs": "^6.26.0", 59 | "babel-plugin-transform-object-rest-spread": "^6.23.0", 60 | "babel-preset-env": "^1.5.1", 61 | "babel-preset-react": "^6.24.1", 62 | "cross-env": "^5.1.0", 63 | "css-loader": "^0.28.3", 64 | "enzyme": "^3.1.0", 65 | "enzyme-adapter-react-16": "^1.0.2", 66 | "file-loader": "^1.1.5", 67 | "iotacss": "^1.1.1", 68 | "jest": "^21.2.1", 69 | "node-sass": "^4.5.3", 70 | "path": "^0.12.7", 71 | "react": "^16.0.0", 72 | "react-dom": "^16.0.0", 73 | "sass-loader": "^6.0.5", 74 | "style-loader": "^0.19.0", 75 | "webpack": "^3.8.1", 76 | "webpack-dev-server": "^2.4.5" 77 | }, 78 | "jest": { 79 | "setupFiles": [ 80 | "/test/support/polyfills.js", 81 | "/test/support/enzyme.js" 82 | ] 83 | } 84 | } 85 | -------------------------------------------------------------------------------- /src/Base.js: -------------------------------------------------------------------------------- 1 | import React, {Component} from 'react' 2 | import PropTypes from 'prop-types' 3 | import classnames from 'classnames' 4 | 5 | import propsToUtilClasses from './utils/propsToUtilClasses' 6 | import restProps from './utils/restProps' 7 | 8 | 9 | class Base extends Component { 10 | 11 | static defaultProps = { 12 | tagName: 'div' 13 | } 14 | 15 | static propTypes = { 16 | /** HTML element string or React component to render */ 17 | tagName: PropTypes.oneOfType([ 18 | PropTypes.string, 19 | PropTypes.func, 20 | PropTypes.element 21 | ]), 22 | /** Applies extra classes to component */ 23 | className: PropTypes.string, 24 | 25 | /** HTML element or React component to render */ 26 | children: PropTypes.node, 27 | 28 | /** Applies vertical align using align items */ 29 | uAi: PropTypes.string, 30 | /** Applies vertical align using align utility */ 31 | uAlign: PropTypes.string, 32 | /** Applies background color value using bgcolor utility */ 33 | uBgcolor: PropTypes.string, 34 | /** Applies clearfix using clearfix utility */ 35 | uCf: PropTypes.bool, 36 | /** Applies color value using color utility */ 37 | uColor: PropTypes.string, 38 | /** Applies display type using display utility */ 39 | uDisplay: PropTypes.string, 40 | /** Applies flex direction using flex direction utility */ 41 | uFd: PropTypes.string, 42 | /** Applies float direction using float utility */ 43 | uFloat: PropTypes.string, 44 | /** Applies horizontal alignment using justify content utility */ 45 | uJc: PropTypes.string, 46 | /** Applies margin using margin utility */ 47 | uM: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]), 48 | /** Applies margin top using margin utility */ 49 | uMt: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]), 50 | /** Applies margin right using margin utility */ 51 | uMr: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]), 52 | /** Applies margin bottom using margin utility */ 53 | uMb: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]), 54 | /** Applies margin left using margin utility */ 55 | uMl: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]), 56 | /** Applies vertical margin using margin utility */ 57 | uMv: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]), 58 | /** Applies horizontal margin using margin utility */ 59 | uMh: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]), 60 | /** Applies opacity size using opacity utility */ 61 | uOpacity: PropTypes.string, 62 | /** Applies padding using margin utility */ 63 | uP: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]), 64 | /** Applies padding top using margin utility */ 65 | uPt: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]), 66 | /** Applies padding right using margin utility */ 67 | uPr: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]), 68 | /** Applies padding bottom using margin utility */ 69 | uPb: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]), 70 | /** Applies padding left using margin utility */ 71 | uPl: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]), 72 | /** Applies vertical padding using margin utility */ 73 | uPv: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]), 74 | /** Applies horizontal padding using margin utility */ 75 | uPh: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]), 76 | /** Applies position type using position utility */ 77 | uPosition: PropTypes.string, 78 | /** Applies after offset using pull utility */ 79 | uPull: PropTypes.string, 80 | /** Applies offset using push utility */ 81 | uPush: PropTypes.string, 82 | /** Applies width size using size utility */ 83 | uSize: PropTypes.string, 84 | /** Applies text alignment using text utility */ 85 | uText: PropTypes.string, 86 | /** Applies text transform using transform utility */ 87 | uTransform: PropTypes.string, 88 | /** Applies font weight size using weight utility */ 89 | uWeight: PropTypes.string 90 | } 91 | 92 | render() { 93 | const { 94 | tagName:Component, 95 | children, 96 | className, 97 | } = this.props 98 | 99 | const classes = classnames(className, 100 | propsToUtilClasses(this.props) 101 | ) 102 | 103 | const rest = restProps(Base.propTypes, this.props); 104 | 105 | return ( 106 | 107 | {children} 108 | 109 | ) 110 | } 111 | 112 | } 113 | 114 | 115 | export default Base 116 | -------------------------------------------------------------------------------- /src/Container.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import PropTypes from 'prop-types' 3 | import classnames from 'classnames' 4 | 5 | import Base from './Base' 6 | 7 | 8 | const Container = ({ 9 | gutter, 10 | size, 11 | children, 12 | className, 13 | ...props 14 | }) => { 15 | const classes = classnames('o-container', { 16 | [`o-container--${gutter}`]: gutter, 17 | [`o-container--${size}`]: size 18 | }, className) 19 | 20 | return ( 21 | 22 | {children} 23 | 24 | ) 25 | } 26 | 27 | 28 | Container.propTypes = { 29 | gutter: PropTypes.string, 30 | size: PropTypes.string, 31 | children: PropTypes.node 32 | } 33 | 34 | 35 | export default Container 36 | -------------------------------------------------------------------------------- /src/Grid.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import PropTypes from 'prop-types' 3 | import classnames from 'classnames' 4 | 5 | import Base from './Base' 6 | import GridColumn from './GridColumn' 7 | 8 | 9 | const VALIGN_OPTIONS = [ 10 | 'right', 11 | 'center', 12 | 'top', 13 | 'middle', 14 | 'bottom', 15 | 'around', 16 | 'between' 17 | ] 18 | 19 | 20 | const Grid = ({ 21 | gutter, 22 | align, 23 | rev, 24 | equalHeight, 25 | children, 26 | className, 27 | ...props 28 | }) => { 29 | const classes = classnames('o-grid', { 30 | [`o-grid--${gutter}`]: gutter, 31 | [`o-grid--${align}`]: align, 32 | 'o-grid--rev': rev, 33 | 'o-grid--equal-height': equalHeight 34 | }, className) 35 | 36 | return ( 37 | 38 | {children} 39 | 40 | ) 41 | } 42 | 43 | 44 | Grid.propTypes = { 45 | gutter: PropTypes.string, 46 | align: PropTypes.oneOf(VALIGN_OPTIONS), 47 | rev: PropTypes.bool, 48 | equalHeight: PropTypes.bool, 49 | children: PropTypes.node 50 | } 51 | 52 | 53 | Grid.Column = GridColumn 54 | 55 | 56 | export default Grid 57 | -------------------------------------------------------------------------------- /src/GridColumn.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import classnames from 'classnames' 4 | 5 | import Base from './Base' 6 | 7 | 8 | const GridColumn = ({ 9 | children, 10 | className, 11 | ...props 12 | }) => { 13 | const classes = classnames('o-grid__col', className) 14 | 15 | return ( 16 | 17 | {children} 18 | 19 | ) 20 | } 21 | 22 | 23 | GridColumn.propTypes = { 24 | children: PropTypes.node 25 | } 26 | 27 | 28 | export default GridColumn; 29 | -------------------------------------------------------------------------------- /src/H1.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import PropTypes from 'prop-types' 3 | import classnames from 'classnames' 4 | 5 | import Type from './Type' 6 | 7 | 8 | const H1 = ({ 9 | size, 10 | children, 11 | className, 12 | ...props 13 | }) => { 14 | const classes = classnames(className, { 15 | [`o-type-${size}`]: size 16 | }) 17 | 18 | return ( 19 | 20 | {children} 21 | 22 | ) 23 | } 24 | 25 | 26 | H1.propTypes = { 27 | size: PropTypes.string, 28 | children: PropTypes.node, 29 | className: PropTypes.string 30 | } 31 | 32 | 33 | export default H1 34 | -------------------------------------------------------------------------------- /src/H2.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import PropTypes from 'prop-types' 3 | import classnames from 'classnames' 4 | 5 | import Type from './Type' 6 | 7 | 8 | const H2 = ({ 9 | size, 10 | children, 11 | className, 12 | ...props 13 | }) => { 14 | const classes = classnames(className, { 15 | [`o-type-${size}`]: size 16 | }) 17 | 18 | return ( 19 | 20 | {children} 21 | 22 | ) 23 | } 24 | 25 | 26 | H2.propTypes = { 27 | size: PropTypes.string, 28 | children: PropTypes.node, 29 | className: PropTypes.string 30 | } 31 | 32 | 33 | export default H2 34 | -------------------------------------------------------------------------------- /src/H3.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import PropTypes from 'prop-types' 3 | import classnames from 'classnames' 4 | 5 | import Type from './Type' 6 | 7 | 8 | const H3 = ({ 9 | size, 10 | children, 11 | className, 12 | ...props 13 | }) => { 14 | const classes = classnames(className, { 15 | [`o-type-${size}`]: size 16 | }) 17 | 18 | return ( 19 | 20 | {children} 21 | 22 | ) 23 | } 24 | 25 | 26 | H3.propTypes = { 27 | size: PropTypes.string, 28 | children: PropTypes.node, 29 | className: PropTypes.string 30 | } 31 | 32 | 33 | export default H3 34 | -------------------------------------------------------------------------------- /src/H4.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import PropTypes from 'prop-types' 3 | import classnames from 'classnames' 4 | 5 | import Type from './Type' 6 | 7 | 8 | const H4 = ({ 9 | size, 10 | children, 11 | className, 12 | ...props 13 | }) => { 14 | const classes = classnames(className, { 15 | [`o-type-${size}`]: size 16 | }) 17 | 18 | return ( 19 | 20 | {children} 21 | 22 | ) 23 | } 24 | 25 | 26 | H4.propTypes = { 27 | size: PropTypes.string, 28 | children: PropTypes.node, 29 | className: PropTypes.string 30 | } 31 | 32 | 33 | export default H4 34 | -------------------------------------------------------------------------------- /src/H5.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import PropTypes from 'prop-types' 3 | import classnames from 'classnames' 4 | 5 | import Type from './Type' 6 | 7 | 8 | const H5 = ({ 9 | size, 10 | children, 11 | className, 12 | ...props 13 | }) => { 14 | const classes = classnames(className, { 15 | [`o-type-${size}`]: size 16 | }) 17 | 18 | return ( 19 | 20 | {children} 21 | 22 | ) 23 | } 24 | 25 | 26 | H5.propTypes = { 27 | size: PropTypes.string, 28 | children: PropTypes.node, 29 | className: PropTypes.string 30 | } 31 | 32 | 33 | export default H5 34 | -------------------------------------------------------------------------------- /src/H6.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import PropTypes from 'prop-types' 3 | import classnames from 'classnames' 4 | 5 | import Type from './Type' 6 | 7 | 8 | const H6 = ({ 9 | size, 10 | children, 11 | className, 12 | ...props 13 | }) => { 14 | const classes = classnames(className, { 15 | [`o-type-${size}`]: size 16 | }) 17 | 18 | return ( 19 | 20 | {children} 21 | 22 | ) 23 | } 24 | 25 | 26 | H6.propTypes = { 27 | size: PropTypes.string, 28 | children: PropTypes.node, 29 | className: PropTypes.string 30 | } 31 | 32 | 33 | export default H6 34 | -------------------------------------------------------------------------------- /src/List.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import PropTypes from 'prop-types' 3 | import classnames from 'classnames' 4 | 5 | import Base from './Base' 6 | import ListItem from './ListItem' 7 | 8 | 9 | const VALIGN_OPTIONS = [ 10 | 'top', 11 | 'middle', 12 | 'bottom' 13 | ] 14 | 15 | const TYPE_OPTIONS = [ 16 | 'inline', 17 | 'block', 18 | 'span' 19 | ] 20 | 21 | 22 | const List = ({ 23 | type, 24 | gutter, 25 | align, 26 | tagName, 27 | children, 28 | className, 29 | ...props 30 | }) => { 31 | const classes = classnames('o-list', { 32 | [`o-list--${type}`]: type, 33 | [`o-list--${gutter}`]: gutter, 34 | [`o-list--${align}`]: align 35 | }, className) 36 | 37 | return ( 38 | 39 | {children} 40 | 41 | ) 42 | } 43 | 44 | 45 | List.defaultProps = { 46 | type: 'inline', 47 | tagName: 'ul' 48 | } 49 | 50 | 51 | List.propTypes = { 52 | type: PropTypes.string, 53 | gutter: PropTypes.string, 54 | align: PropTypes.oneOf(VALIGN_OPTIONS), 55 | tagName: PropTypes.oneOf(['ul', 'ol']), 56 | children: PropTypes.node 57 | } 58 | 59 | 60 | List.Item = ListItem 61 | 62 | 63 | export default List 64 | -------------------------------------------------------------------------------- /src/ListItem.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import classnames from 'classnames' 4 | 5 | import Base from './Base' 6 | 7 | 8 | const ListItem = ({ 9 | children, 10 | className, 11 | ...props 12 | }) => { 13 | const classes = classnames('o-list__item', className) 14 | 15 | return ( 16 | 17 | {children} 18 | 19 | ) 20 | } 21 | 22 | 23 | ListItem.propTypes = { 24 | children: PropTypes.node 25 | } 26 | 27 | 28 | export default ListItem; 29 | -------------------------------------------------------------------------------- /src/Media.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import PropTypes from 'prop-types' 3 | import classnames from 'classnames' 4 | 5 | import Base from './Base' 6 | import MediaFixed from './MediaFixed' 7 | import MediaFluid from './MediaFluid' 8 | 9 | 10 | const VALIGN_OPTIONS = [ 11 | 'top', 12 | 'middle', 13 | 'bottom' 14 | ] 15 | 16 | 17 | const Media = ({ 18 | gutter, 19 | align, 20 | rev, 21 | res, 22 | children, 23 | className, 24 | ...props 25 | }) => { 26 | const classes = classnames('o-media', { 27 | [`o-media--${gutter}`]: gutter, 28 | [`o-media--${align}`]: align, 29 | 'o-media--rev': rev, 30 | 'o-media--res': res 31 | }, className) 32 | 33 | return ( 34 | 35 | {children} 36 | 37 | ) 38 | } 39 | 40 | 41 | Media.propTypes = { 42 | gutter: PropTypes.string, 43 | align: PropTypes.oneOf(VALIGN_OPTIONS), 44 | rev: PropTypes.bool, 45 | children: PropTypes.node 46 | } 47 | 48 | 49 | Media.Fixed = MediaFixed 50 | Media.Fluid = MediaFluid 51 | 52 | 53 | export default Media 54 | -------------------------------------------------------------------------------- /src/MediaFixed.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import classnames from 'classnames' 4 | 5 | import Base from './Base' 6 | 7 | 8 | const MediaFixed = ({ 9 | children, 10 | className, 11 | ...props 12 | }) => { 13 | const classes = classnames('o-media__fixed', className) 14 | 15 | return ( 16 | 17 | {children} 18 | 19 | ) 20 | } 21 | 22 | 23 | MediaFixed.propTypes = { 24 | children: PropTypes.node 25 | } 26 | 27 | 28 | export default MediaFixed; 29 | -------------------------------------------------------------------------------- /src/MediaFluid.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import classnames from 'classnames' 4 | 5 | import Base from './Base' 6 | 7 | 8 | const MediaFluid = ({ 9 | children, 10 | className, 11 | ...props 12 | }) => { 13 | const classes = classnames('o-media__fluid', className) 14 | 15 | return ( 16 | 17 | {children} 18 | 19 | ) 20 | } 21 | 22 | 23 | MediaFluid.propTypes = { 24 | children: PropTypes.node 25 | } 26 | 27 | 28 | export default MediaFluid; 29 | -------------------------------------------------------------------------------- /src/P.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import PropTypes from 'prop-types' 3 | import classnames from 'classnames' 4 | 5 | import Type from './Type' 6 | 7 | 8 | const P = ({ 9 | size, 10 | children, 11 | className, 12 | ...props 13 | }) => { 14 | const classes = classnames(className, { 15 | [`o-type-${size}`]: size 16 | }) 17 | 18 | return ( 19 | 20 | {children} 21 | 22 | ) 23 | } 24 | 25 | 26 | P.propTypes = { 27 | size: PropTypes.string, 28 | children: PropTypes.node, 29 | className: PropTypes.string 30 | } 31 | 32 | 33 | export default P 34 | -------------------------------------------------------------------------------- /src/Type.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import PropTypes from 'prop-types' 3 | import classnames from 'classnames' 4 | 5 | import Base from './Base' 6 | 7 | 8 | const Type = ({ 9 | size, 10 | children, 11 | className, 12 | tagName, 13 | ...props 14 | }) => { 15 | const classes = classnames(className, { 16 | [`o-type-${size}`]: size 17 | }) 18 | 19 | return ( 20 | 21 | {children} 22 | 23 | ) 24 | } 25 | 26 | 27 | Type.propTypes = { 28 | size: PropTypes.string, 29 | children: PropTypes.node, 30 | className: PropTypes.string, 31 | tagName: PropTypes.string 32 | } 33 | 34 | 35 | Type.defaultProps = { 36 | tagName: 'p' 37 | } 38 | 39 | 40 | export default Type 41 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | export {default as Base} from './Base' 2 | export {default as Container} from './Container' 3 | export {default as Grid} from './Grid' 4 | export {default as List} from './List' 5 | export {default as Media} from './Media' 6 | export {default as Type} from './Type' 7 | export {default as H1} from './H1' 8 | export {default as H2} from './H2' 9 | export {default as H3} from './H3' 10 | export {default as H4} from './H4' 11 | export {default as H5} from './H5' 12 | export {default as H6} from './H6' 13 | export {default as P} from './P' 14 | 15 | import * as ReactIota from '.' 16 | export default ReactIota 17 | -------------------------------------------------------------------------------- /src/utils/propsToUtilClasses.js: -------------------------------------------------------------------------------- 1 | import utilities from './utilsList' 2 | 3 | export default (props) => { 4 | let className = '' 5 | const propKeys = Object.keys(props) 6 | 7 | const classNames = propKeys.map(propKey => { 8 | const utilityKey = propKey.substr(1).toLowerCase() 9 | const utilityValue = props[propKey] === true ? '' : props[propKey] 10 | const utility = utilities.filter(util => { return util.name.toLowerCase() === utilityKey })[0] 11 | 12 | if (utility) { 13 | const utilityValues = typeof utilityValue === 'string' ? utilityValue.split(' ') : []; 14 | 15 | return utilityValues.map(utilityValue => { 16 | 17 | className = 'u' 18 | 19 | if (utility.namespace.length > 0) { 20 | className += `-${utility.namespace}` 21 | } 22 | 23 | if (utilityValue === 'all') { 24 | utilityValue = '' 25 | } else if (utilityValue.charAt(0) === '@') { 26 | utilityValue.replace('@', '') 27 | className += utilityValue 28 | } else { 29 | if (utilityValue.length) { 30 | className += `-${utilityValue}` 31 | } 32 | } 33 | 34 | return className 35 | }) 36 | 37 | } 38 | }) 39 | 40 | return classNames 41 | } 42 | -------------------------------------------------------------------------------- /src/utils/restProps.js: -------------------------------------------------------------------------------- 1 | export default (propTypes = {}, props = {}) => Object.keys(props) 2 | .filter(prop => !propTypes.hasOwnProperty(prop)) 3 | .reduce((previousValue, currentValue) => ( 4 | Object.assign(previousValue, { 5 | [currentValue]: props[currentValue] 6 | }) 7 | ), {}); 8 | -------------------------------------------------------------------------------- /src/utils/utilsList.js: -------------------------------------------------------------------------------- 1 | export default [ 2 | { 3 | name: 'ai', 4 | namespace: 'ai' 5 | }, 6 | { 7 | name: 'align', 8 | namespace: 'align' 9 | }, 10 | { 11 | name: 'bgcolor', 12 | namespace: 'bgcolor' 13 | }, 14 | { 15 | name: 'cf', 16 | namespace: 'cf' 17 | }, 18 | { 19 | name: 'color', 20 | namespace: 'color' 21 | }, 22 | { 23 | name: 'display', 24 | namespace: '' 25 | }, 26 | { 27 | name: 'fd', 28 | namespace: 'fd' 29 | }, 30 | { 31 | name: 'float', 32 | namespace: 'float' 33 | }, 34 | { 35 | name: 'jc', 36 | namespace: 'jc' 37 | }, 38 | { 39 | name: 'm', 40 | namespace: 'm' 41 | }, 42 | { 43 | name: 'mt', 44 | namespace: 'mt' 45 | }, 46 | { 47 | name: 'mr', 48 | namespace: 'mr' 49 | }, 50 | { 51 | name: 'mb', 52 | namespace: 'mb' 53 | }, 54 | { 55 | name: 'ml', 56 | namespace: 'ml' 57 | }, 58 | { 59 | name: 'mv', 60 | namespace: 'mv' 61 | }, 62 | { 63 | name: 'mh', 64 | namespace: 'mh' 65 | }, 66 | { 67 | name: 'opacity', 68 | namespace: 'opacity' 69 | }, 70 | { 71 | name: 'p', 72 | namespace: 'p' 73 | }, 74 | { 75 | name: 'pt', 76 | namespace: 'pt' 77 | }, 78 | { 79 | name: 'pr', 80 | namespace: 'pr' 81 | }, 82 | { 83 | name: 'pb', 84 | namespace: 'pb' 85 | }, 86 | { 87 | name: 'pl', 88 | namespace: 'pl' 89 | }, 90 | { 91 | name: 'pv', 92 | namespace: 'pv' 93 | }, 94 | { 95 | name: 'ph', 96 | namespace: 'ph' 97 | }, 98 | { 99 | name: 'position', 100 | namespace: '' 101 | }, 102 | { 103 | name: 'pull', 104 | namespace: 'pull' 105 | }, 106 | { 107 | name: 'push', 108 | namespace: 'push' 109 | }, 110 | { 111 | name: 'size', 112 | namespace: '' 113 | }, 114 | { 115 | name: 'text', 116 | namespace: 'text' 117 | }, 118 | { 119 | name: 'transform', 120 | namespace: '' 121 | }, 122 | { 123 | name: 'weight', 124 | namespace: 'weight' 125 | } 126 | ] 127 | -------------------------------------------------------------------------------- /test/Base.spec.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { shallow } from 'enzyme'; 3 | 4 | import Base from '../src/Base' 5 | 6 | describe('Base', () => { 7 | 8 | test('It renders a child when passed in', () => { 9 | const wrapper = shallow( 10 | 11 |
12 | 13 | ) 14 | 15 | expect(wrapper.contains(
)).toBe(true); 16 | }) 17 | 18 | test('It accepts extra classes', () => { 19 | const wrapper = shallow() 20 | 21 | expect(wrapper.hasClass('test')).toBe(true); 22 | }) 23 | 24 | test('It accepts tagName property', () => { 25 | const wrapper = shallow() 26 | 27 | expect(wrapper.is('h1')); 28 | }) 29 | 30 | test('It parses utility properties', () => { 31 | const wrapper = shallow() 32 | 33 | expect(wrapper.hasClass('u-text-center')).toBe(true); 34 | }) 35 | 36 | test('It adds extra classes to utility classes', () => { 37 | const wrapper = shallow() 38 | 39 | expect(wrapper.hasClass('u-text-center')).toBe(true); 40 | }) 41 | 42 | test('It accepts falsy non-string values for utility props', () => { 43 | const wrapper = shallow() 44 | 45 | expect(wrapper.hasClass('u-cf')).toBe(false); 46 | }) 47 | 48 | test('It passes down any props that are not specific to Base', () => { 49 | const wrapper = shallow() 50 | expect(wrapper.getElement().props.title).toBe('Hello there'); 51 | }) 52 | 53 | }) 54 | -------------------------------------------------------------------------------- /test/Container.spec.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { shallow } from 'enzyme'; 3 | 4 | import { Container } from '../src' 5 | 6 | describe('Container', () => { 7 | 8 | test('It renders a child when passed in', () => { 9 | const wrapper = shallow( 10 | 11 |
12 | 13 | ) 14 | 15 | expect(wrapper.contains(
)).toBe(true); 16 | }) 17 | 18 | test('It has a class', () => { 19 | const wrapper = shallow() 20 | 21 | expect(wrapper.hasClass('o-container')).toBe(true); 22 | }) 23 | 24 | test('It accepts extra classes', () => { 25 | const wrapper = shallow() 26 | 27 | expect(wrapper.hasClass('test')).toBe(true); 28 | }) 29 | 30 | test('It adds extra classes to base classes', () => { 31 | const wrapper = shallow() 32 | 33 | expect(wrapper.hasClass('o-container')).toBe(true); 34 | }) 35 | 36 | test('It accepts gutter property', () => { 37 | const wrapper = shallow() 38 | 39 | expect(wrapper.hasClass('o-container--gutter-large')).toBe(true); 40 | }) 41 | 42 | test('It accepts size property', () => { 43 | const wrapper = shallow() 44 | 45 | expect(wrapper.hasClass('o-container--size-large')).toBe(true); 46 | }) 47 | 48 | }) 49 | -------------------------------------------------------------------------------- /test/Grid.spec.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { shallow } from 'enzyme'; 3 | 4 | import { Grid } from '../src' 5 | 6 | describe('Grid', () => { 7 | 8 | test('It renders a child when passed in', () => { 9 | const wrapper = shallow( 10 | 11 |
12 | 13 | ) 14 | 15 | expect(wrapper.contains(
)).toBe(true); 16 | }) 17 | 18 | test('It has a class', () => { 19 | const wrapper = shallow() 20 | 21 | expect(wrapper.hasClass('o-grid')).toBe(true); 22 | }) 23 | 24 | test('It accepts extra classes', () => { 25 | const wrapper = shallow() 26 | 27 | expect(wrapper.hasClass('test')).toBe(true); 28 | }) 29 | 30 | test('It adds extra classes to base classes', () => { 31 | const wrapper = shallow() 32 | 33 | expect(wrapper.hasClass('o-grid')).toBe(true); 34 | }) 35 | 36 | test('It accepts gutter property', () => { 37 | const wrapper = shallow() 38 | 39 | expect(wrapper.hasClass('o-grid--large')).toBe(true); 40 | }) 41 | 42 | test('It accepts align property', () => { 43 | const wrapper = shallow() 44 | 45 | expect(wrapper.hasClass('o-grid--top')).toBe(true); 46 | }) 47 | 48 | test('It accepts rev property', () => { 49 | const wrapper = shallow() 50 | 51 | expect(wrapper.hasClass('o-grid--rev')).toBe(true); 52 | }) 53 | 54 | test('It accepts equalHeight property', () => { 55 | const wrapper = shallow() 56 | 57 | expect(wrapper.hasClass('o-grid--equal-height')).toBe(true); 58 | }) 59 | 60 | }) 61 | -------------------------------------------------------------------------------- /test/GridColumn.spec.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { shallow } from 'enzyme'; 3 | 4 | import { Grid } from '../src' 5 | 6 | describe('Grid.Column', () => { 7 | 8 | test('It renders a child when passed in', () => { 9 | const wrapper = shallow( 10 | 11 |
12 | 13 | ) 14 | 15 | expect(wrapper.contains(
)).toBe(true); 16 | }) 17 | 18 | test('It has a class', () => { 19 | const wrapper = shallow() 20 | 21 | expect(wrapper.hasClass('o-grid__col')).toBe(true); 22 | }) 23 | 24 | test('It accepts extra classes', () => { 25 | const wrapper = shallow() 26 | 27 | expect(wrapper.hasClass('test')).toBe(true); 28 | }) 29 | 30 | test('It adds extra classes to base classes', () => { 31 | const wrapper = shallow() 32 | 33 | expect(wrapper.hasClass('o-grid__col')).toBe(true); 34 | }) 35 | 36 | }) 37 | -------------------------------------------------------------------------------- /test/H1.spec.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { shallow } from 'enzyme'; 3 | 4 | import { H1 } from '../src' 5 | 6 | describe('H1', () => { 7 | 8 | test('It renders a child when passed in', () => { 9 | const wrapper = shallow( 10 |

Test

11 | ) 12 | 13 | expect(wrapper.prop('children')).toBe('Test'); 14 | }) 15 | 16 | test('It has a class', () => { 17 | const wrapper = shallow(

) 18 | 19 | expect(wrapper.hasClass('o-type-large')).toBe(true); 20 | }) 21 | 22 | test('It accepts extra classes', () => { 23 | const wrapper = shallow(

) 24 | 25 | expect(wrapper.hasClass('test')).toBe(true); 26 | }) 27 | 28 | test('It adds extra classes to base classes', () => { 29 | const wrapper = shallow(

) 30 | 31 | expect(wrapper.hasClass('o-type-large')).toBe(true); 32 | }) 33 | 34 | }) 35 | -------------------------------------------------------------------------------- /test/H2.spec.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { shallow } from 'enzyme'; 3 | 4 | import { H2 } from '../src' 5 | 6 | describe('H2', () => { 7 | 8 | test('It renders a child when passed in', () => { 9 | const wrapper = shallow( 10 |

Test

11 | ) 12 | 13 | expect(wrapper.prop('children')).toBe('Test'); 14 | }) 15 | 16 | test('It has a class', () => { 17 | const wrapper = shallow(

) 18 | 19 | expect(wrapper.hasClass('o-type-large')).toBe(true); 20 | }) 21 | 22 | test('It accepts extra classes', () => { 23 | const wrapper = shallow(

) 24 | 25 | expect(wrapper.hasClass('test')).toBe(true); 26 | }) 27 | 28 | test('It adds extra classes to base classes', () => { 29 | const wrapper = shallow(

) 30 | 31 | expect(wrapper.hasClass('o-type-large')).toBe(true); 32 | }) 33 | 34 | }) 35 | -------------------------------------------------------------------------------- /test/H3.spec.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { shallow } from 'enzyme'; 3 | 4 | import { H3 } from '../src' 5 | 6 | describe('H3', () => { 7 | 8 | test('It renders a child when passed in', () => { 9 | const wrapper = shallow( 10 |

Test

11 | ) 12 | 13 | expect(wrapper.prop('children')).toBe('Test'); 14 | }) 15 | 16 | test('It has a class', () => { 17 | const wrapper = shallow(

) 18 | 19 | expect(wrapper.hasClass('o-type-large')).toBe(true); 20 | }) 21 | 22 | test('It accepts extra classes', () => { 23 | const wrapper = shallow(

) 24 | 25 | expect(wrapper.hasClass('test')).toBe(true); 26 | }) 27 | 28 | test('It adds extra classes to base classes', () => { 29 | const wrapper = shallow(

) 30 | 31 | expect(wrapper.hasClass('o-type-large')).toBe(true); 32 | }) 33 | 34 | }) 35 | -------------------------------------------------------------------------------- /test/H4.spec.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { shallow } from 'enzyme'; 3 | 4 | import { H4 } from '../src' 5 | 6 | describe('H4', () => { 7 | 8 | test('It renders a child when passed in', () => { 9 | const wrapper = shallow( 10 |

Test

11 | ) 12 | 13 | expect(wrapper.prop('children')).toBe('Test'); 14 | }) 15 | 16 | test('It has a class', () => { 17 | const wrapper = shallow(

) 18 | 19 | expect(wrapper.hasClass('o-type-large')).toBe(true); 20 | }) 21 | 22 | test('It accepts extra classes', () => { 23 | const wrapper = shallow(

) 24 | 25 | expect(wrapper.hasClass('test')).toBe(true); 26 | }) 27 | 28 | test('It adds extra classes to base classes', () => { 29 | const wrapper = shallow(

) 30 | 31 | expect(wrapper.hasClass('o-type-large')).toBe(true); 32 | }) 33 | 34 | }) 35 | -------------------------------------------------------------------------------- /test/H5.spec.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { shallow } from 'enzyme'; 3 | 4 | import { H5 } from '../src' 5 | 6 | describe('H5', () => { 7 | 8 | test('It renders a child when passed in', () => { 9 | const wrapper = shallow( 10 |

Test
11 | ) 12 | 13 | expect(wrapper.prop('children')).toBe('Test'); 14 | }) 15 | 16 | test('It has a class', () => { 17 | const wrapper = shallow(
) 18 | 19 | expect(wrapper.hasClass('o-type-large')).toBe(true); 20 | }) 21 | 22 | test('It accepts extra classes', () => { 23 | const wrapper = shallow(
) 24 | 25 | expect(wrapper.hasClass('test')).toBe(true); 26 | }) 27 | 28 | test('It adds extra classes to base classes', () => { 29 | const wrapper = shallow(
) 30 | 31 | expect(wrapper.hasClass('o-type-large')).toBe(true); 32 | }) 33 | 34 | }) 35 | -------------------------------------------------------------------------------- /test/H6.spec.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { shallow } from 'enzyme'; 3 | 4 | import { H6 } from '../src' 5 | 6 | describe('H6', () => { 7 | 8 | test('It renders a child when passed in', () => { 9 | const wrapper = shallow( 10 |
Test
11 | ) 12 | 13 | expect(wrapper.prop('children')).toBe('Test'); 14 | }) 15 | 16 | test('It has a class', () => { 17 | const wrapper = shallow(
) 18 | 19 | expect(wrapper.hasClass('o-type-large')).toBe(true); 20 | }) 21 | 22 | test('It accepts extra classes', () => { 23 | const wrapper = shallow(
) 24 | 25 | expect(wrapper.hasClass('test')).toBe(true); 26 | }) 27 | 28 | test('It adds extra classes to base classes', () => { 29 | const wrapper = shallow(
) 30 | 31 | expect(wrapper.hasClass('o-type-large')).toBe(true); 32 | }) 33 | 34 | }) 35 | -------------------------------------------------------------------------------- /test/List.spec.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { shallow } from 'enzyme'; 3 | 4 | import { List } from '../src' 5 | 6 | describe('List', () => { 7 | 8 | test('It renders a child when passed in', () => { 9 | const wrapper = shallow( 10 | 11 |
12 | 13 | ) 14 | 15 | expect(wrapper.contains(
)).toBe(true); 16 | }) 17 | 18 | test('It has a class', () => { 19 | const wrapper = shallow() 20 | 21 | expect(wrapper.hasClass('o-list')).toBe(true); 22 | }) 23 | 24 | test('It accepts extra classes', () => { 25 | const wrapper = shallow() 26 | 27 | expect(wrapper.hasClass('test')).toBe(true); 28 | }) 29 | 30 | test('It adds extra classes to base classes', () => { 31 | const wrapper = shallow() 32 | 33 | expect(wrapper.hasClass('o-list')).toBe(true); 34 | }) 35 | 36 | test('It accepts type property', () => { 37 | const wrapper = shallow() 38 | 39 | expect(wrapper.hasClass('o-list--span')).toBe(true); 40 | }) 41 | 42 | test('It accepts gutter property', () => { 43 | const wrapper = shallow() 44 | 45 | expect(wrapper.hasClass('o-list--large')).toBe(true); 46 | }) 47 | 48 | test('It accepts align property', () => { 49 | const wrapper = shallow() 50 | 51 | expect(wrapper.hasClass('o-list--top')).toBe(true); 52 | }) 53 | 54 | test('It accepts tagName property', () => { 55 | const wrapper = shallow() 56 | 57 | expect(wrapper.is('ol')); 58 | }) 59 | 60 | }) 61 | -------------------------------------------------------------------------------- /test/ListItem.spec.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { shallow } from 'enzyme'; 3 | 4 | import { List } from '../src' 5 | 6 | describe('List.Item', () => { 7 | 8 | test('It renders a child when passed in', () => { 9 | const wrapper = shallow( 10 | 11 |
12 | 13 | ) 14 | 15 | expect(wrapper.contains(
)).toBe(true); 16 | }) 17 | 18 | test('It has a class', () => { 19 | const wrapper = shallow() 20 | 21 | expect(wrapper.hasClass('o-list__item')).toBe(true); 22 | }) 23 | 24 | test('It accepts extra classes', () => { 25 | const wrapper = shallow() 26 | 27 | expect(wrapper.hasClass('test')).toBe(true); 28 | }) 29 | 30 | test('It adds extra classes to base classes', () => { 31 | const wrapper = shallow() 32 | 33 | expect(wrapper.hasClass('o-list__item')).toBe(true); 34 | }) 35 | 36 | }) 37 | -------------------------------------------------------------------------------- /test/Media.spec.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { shallow } from 'enzyme'; 3 | 4 | import { Media } from '../src' 5 | 6 | describe('Media', () => { 7 | 8 | test('It renders a child when passed in', () => { 9 | const wrapper = shallow( 10 | 11 |
12 | 13 | ) 14 | 15 | expect(wrapper.contains(
)).toBe(true); 16 | }) 17 | 18 | test('It has a class', () => { 19 | const wrapper = shallow() 20 | 21 | expect(wrapper.hasClass('o-media')).toBe(true); 22 | }) 23 | 24 | test('It accepts extra classes', () => { 25 | const wrapper = shallow() 26 | 27 | expect(wrapper.hasClass('test')).toBe(true); 28 | }) 29 | 30 | test('It adds extra classes to base classes', () => { 31 | const wrapper = shallow() 32 | 33 | expect(wrapper.hasClass('o-media')).toBe(true); 34 | }) 35 | 36 | test('It accepts gutter property', () => { 37 | const wrapper = shallow() 38 | 39 | expect(wrapper.hasClass('o-media--large')).toBe(true); 40 | }) 41 | 42 | test('It accepts align property', () => { 43 | const wrapper = shallow() 44 | 45 | expect(wrapper.hasClass('o-media--top')).toBe(true); 46 | }) 47 | 48 | test('It accepts rev property', () => { 49 | const wrapper = shallow() 50 | 51 | expect(wrapper.hasClass('o-media--rev')).toBe(true); 52 | }) 53 | 54 | }) 55 | -------------------------------------------------------------------------------- /test/MediaFixed.spec.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { shallow } from 'enzyme'; 3 | 4 | import { Media } from '../src' 5 | 6 | describe('Media.Fixed', () => { 7 | 8 | test('It renders a child when passed in', () => { 9 | const wrapper = shallow( 10 | 11 |
12 | 13 | ) 14 | 15 | expect(wrapper.contains(
)).toBe(true); 16 | }) 17 | 18 | test('It has a class', () => { 19 | const wrapper = shallow() 20 | 21 | expect(wrapper.hasClass('o-media__fixed')).toBe(true); 22 | }) 23 | 24 | test('It accepts extra classes', () => { 25 | const wrapper = shallow() 26 | 27 | expect(wrapper.hasClass('test')).toBe(true); 28 | }) 29 | 30 | test('It adds extra classes to base classes', () => { 31 | const wrapper = shallow() 32 | 33 | expect(wrapper.hasClass('o-media__fixed')).toBe(true); 34 | }) 35 | 36 | }) 37 | -------------------------------------------------------------------------------- /test/MediaFluid.spec.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { shallow } from 'enzyme'; 3 | 4 | import { Media } from '../src' 5 | 6 | describe('Media.Fluid', () => { 7 | 8 | test('It renders a child when passed in', () => { 9 | const wrapper = shallow( 10 | 11 |
12 | 13 | ) 14 | 15 | expect(wrapper.contains(
)).toBe(true); 16 | }) 17 | 18 | test('It has a class', () => { 19 | const wrapper = shallow() 20 | 21 | expect(wrapper.hasClass('o-media__fluid')).toBe(true); 22 | }) 23 | 24 | test('It accepts extra classes', () => { 25 | const wrapper = shallow() 26 | 27 | expect(wrapper.hasClass('test')).toBe(true); 28 | }) 29 | 30 | test('It adds extra classes to base classes', () => { 31 | const wrapper = shallow() 32 | 33 | expect(wrapper.hasClass('o-media__fluid')).toBe(true); 34 | }) 35 | 36 | }) 37 | -------------------------------------------------------------------------------- /test/P.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { shallow } from 'enzyme'; 3 | 4 | import { P } from '../src' 5 | 6 | describe('P', () => { 7 | 8 | test('It renders a child when passed in', () => { 9 | const wrapper = shallow( 10 |

Test

11 | ) 12 | 13 | expect(wrapper.prop('children')).toBe('Test'); 14 | }) 15 | 16 | test('It has a class', () => { 17 | const wrapper = shallow(

) 18 | 19 | expect(wrapper.hasClass('o-type-large')).toBe(true); 20 | }) 21 | 22 | test('It accepts extra classes', () => { 23 | const wrapper = shallow(

) 24 | 25 | expect(wrapper.hasClass('test')).toBe(true); 26 | }) 27 | 28 | test('It adds extra classes to base classes', () => { 29 | const wrapper = shallow(

) 30 | 31 | expect(wrapper.hasClass('o-type-large')).toBe(true); 32 | }) 33 | 34 | }) 35 | -------------------------------------------------------------------------------- /test/Type.spec.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { shallow } from 'enzyme'; 3 | 4 | import { Type } from '../src' 5 | 6 | describe('Type', () => { 7 | 8 | test('It renders a child when passed in', () => { 9 | const wrapper = shallow( 10 | 11 |

12 | 13 | ) 14 | 15 | expect(wrapper.contains(
)).toBe(true); 16 | }) 17 | 18 | test('It has a class', () => { 19 | const wrapper = shallow() 20 | 21 | expect(wrapper.hasClass('o-type-large')).toBe(true); 22 | }) 23 | 24 | test('It accepts extra classes', () => { 25 | const wrapper = shallow() 26 | 27 | expect(wrapper.hasClass('test')).toBe(true); 28 | }) 29 | 30 | test('It adds extra classes to base classes', () => { 31 | const wrapper = shallow() 32 | 33 | expect(wrapper.hasClass('o-type-large')).toBe(true); 34 | }) 35 | 36 | test('It has a tagName property of p by default', () => { 37 | const wrapper = shallow() 38 | 39 | expect(wrapper.prop('tagName')).toBe('p'); 40 | }) 41 | 42 | test('It accepts tagName property', () => { 43 | const wrapper = shallow() 44 | 45 | expect(wrapper.prop('tagName')).toBe('h1'); 46 | }) 47 | 48 | }) 49 | -------------------------------------------------------------------------------- /test/support/enzyme.js: -------------------------------------------------------------------------------- 1 | import Enzyme from 'enzyme'; 2 | import Adapter from 'enzyme-adapter-react-16'; 3 | 4 | Enzyme.configure({ adapter: new Adapter() }); 5 | -------------------------------------------------------------------------------- /test/support/polyfills.js: -------------------------------------------------------------------------------- 1 | global.requestAnimationFrame = function (cb) { 2 | return setTimeout(cb, 0); 3 | }; 4 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | const webpack = require('webpack') 3 | 4 | const env = process.env.NODE_ENV || 'development' 5 | 6 | // webpack.config.js 7 | module.exports = { 8 | entry: path.join(__dirname, './src/index'), 9 | 10 | output: { 11 | path: path.join(__dirname, './umd'), 12 | filename: `react-iotacss.${env}.js`, 13 | 14 | // export to AMD, CommonJS, or window 15 | libraryTarget: 'umd', 16 | 17 | // the name exported to window 18 | library: 'ReactIotaCSS', 19 | 20 | // strip path comments 21 | pathinfo: env === 'development', 22 | 23 | // named define for umd 24 | umdNamedDefine: true 25 | }, 26 | 27 | module: { 28 | rules: [ 29 | { 30 | test: /\.jsx?$/, 31 | use: { 32 | loader: 'babel-loader' 33 | }, 34 | include: /src/ 35 | } 36 | ] 37 | }, 38 | 39 | plugins: env === 'development' ? [] : [ 40 | new webpack.DefinePlugin({ 41 | 'process.env.NODE_ENV': JSON.stringify('production') 42 | }), 43 | 44 | new webpack.LoaderOptionsPlugin({ 45 | minimize: env !== 'development' 46 | }), 47 | 48 | new webpack.optimize.ModuleConcatenationPlugin(), 49 | new webpack.optimize.UglifyJsPlugin({ 50 | compress: { 51 | warnings: false 52 | }, 53 | 54 | output: { 55 | comments: false, 56 | 57 | // Turned on because emoji and regex is not minified properly using default 58 | ascii_only: true 59 | } 60 | }) 61 | ], 62 | 63 | externals: { 64 | 'react' : { 65 | commonjs: 'react', 66 | commonjs2: 'react', 67 | amd: 'react', 68 | root: "React" // indicates global variable 69 | }, 70 | 71 | 'react-dom' : { 72 | commonjs: 'react-dom', 73 | commonjs2: 'react-dom', 74 | amd: 'react-dom', 75 | root: "ReactDOM" // indicates global variable 76 | } 77 | } 78 | }; 79 | --------------------------------------------------------------------------------