JSS Styles rework

[nfour]

Intention is to further componentize the project, getting away from CSS dependencies.

• Demonstrate JSS
• Convert components to JSS
  • BodyContent
  • BodySchema
  • BodySchemaSwitcher
  • ContentContainer
  • CopyButton
  • Description
  • Example
  • ExternalLink
  • Header
  • Indicator
  • Method
  • Navigation
  • NavigationMethod
  • NavigationTag
  • Overlay
  • Page
  • Property
  • PropertyConstraints
  • Response
  • SecurityContainer
  • ServiceContainer
  • Base
  • Demo
  • general/base scss
  • Refactor all variables, themes

Features

• Modular CSS
• Static theming support
• Dynamic theming support
  • Cant support, pending upstream PR's

Deps

• Removed sass-loader node-sass balloon-css

[nfour]

Examples:

// Foo.styles.js
import { createSheet } from '../../theme'

export const styles = createSheet((theme) => ({
  foo: {
    background: 'transparent',
    color: 'white'
  }
}))

// Foo.js
import { styles } from './Foo.styles'

@styles
export default class Foo extends Component {
  render () {
    const { classes } = this.props

    return <div className={classes.foo}></div>
  }
}

[brendo]

Looking good man, checked it out locally to have a play around 👍

Did you want a hand with the remaining components or happy just knocking them off one by one?

[brendo]

Note JSS and Jest snapshots might need some work.

styled-components/jest-styled-components#29
https://github.com/cssinjs/react-jss/issues/93

[nfour]

The remainder of this MR is busywork, feels like 20% left to do in terms of time put in.

The testing stuff IMO just needs to pass for the components, thus if classNames can be mocked, we will be fine. Snapshotting JSS can come in after those PR's are in, in jest-styled-components.

[brendo]

remove