Merge pull request #11 from decentraland/feat/themes-addon

feat: themes addon

.storybook/config.js

@@ -2,6 +2,15 @@ const { configure, addDecorator } = require('@storybook/react')
 const centered = require('@storybook/addon-centered').default
 const { setOptions } = require('@storybook/addon-options')
 
+let themeSwitcher
+let darkTheme
+let lightTheme
+if (process.env.NODE_ENV !== 'test') {
+  themeSwitcher = require('../addons/themes').default
+  darkTheme = require('../src/themes/alternative/dark-theme.css')
+  lightTheme = require('../src/themes/alternative/light-theme.css')
+}
+
 setOptions({
   name: 'decentraland-ui',
   url: 'https://github.com/decentraland/ui',
@@ -19,6 +28,17 @@ setOptions({
 })
 
 addDecorator(centered)
+if (process.env.NODE_ENV !== 'test') {
+  let checked = false
+  addDecorator(
+    themeSwitcher(
+      darkTheme,
+      lightTheme,
+      () => checked,
+      value => (checked = value)
+    )
+  )
+}
 
 // this is to make storyshots work (and jest in general) because it lacks webpack's require.context function
 if (!require.context) {
@@ -31,4 +51,5 @@ const req = require.context('../src/components', true, /.stories.tsx?$/)
 function loadStories() {
   req.keys().forEach(filename => req(filename))
 }
+
 configure(loadStories, module)

.storybook/webpack.config.js

@@ -1,5 +1,6 @@
 // load the default config generator.
 const genDefaultConfig = require('../webpack.config.js')
+const cssRule = genDefaultConfig.module.rules[0]
 module.exports = {
   ...genDefaultConfig,
   externals: {},
@@ -20,7 +21,22 @@ module.exports = {
         ],
         enforce: 'pre'
       },
-      ...genDefaultConfig.module.rules
+      {
+        oneOf: [
+          // add themes here so they are loaded using the raw-loader
+          {
+            test: /alternative\/.*\.css$/,
+            use: ['raw-loader']
+          },
+          // everything else should be loaded using style-loader, css-loader and postcss-loader
+          {
+            test: /\.css$/,
+            use: ['style-loader', ...cssRule.use.slice(1)]
+          }
+        ]
+      },
+      ...genDefaultConfig.module.rules.slice(1)
     ]
-  }
+  },
+  plugins: []
 }

addons/themes.js

@@ -0,0 +1,91 @@
+const React = require('react')
+const { Checkbox } = require('semantic-ui-react')
+
+function addStyle(id, css) {
+  removeStyle('switch-theme')
+  const head = document.head || document.getElementsByTagName('head')[0]
+  const style = document.createElement('style')
+
+  style.id = id
+  style.type = 'text/css'
+
+  if (style.styleSheet) {
+    // This is required for IE8 and below.
+    style.styleSheet.cssText = css
+  } else {
+    style.appendChild(document.createTextNode(css))
+  }
+
+  head.appendChild(style)
+}
+
+function removeStyle(id) {
+  const element = document.getElementById(id)
+  if (element) {
+    element.remove()
+  }
+}
+
+class SwitchTheme extends React.PureComponent {
+  constructor(props) {
+    super(props)
+    this.state = {
+      checked: !!this.props.isChecked()
+    }
+    this.toggleStyle(this.state.checked)
+  }
+
+  toggleStyle(toggle) {
+    if (toggle) {
+      addStyle('switch-theme', this.props.themeA)
+    } else {
+      addStyle('switch-theme', this.props.themeB)
+    }
+  }
+
+  handleClick() {
+    const toggle = !this.props.isChecked()
+    this.toggleStyle(toggle)
+    this.props.onChange(toggle)
+    this.setState({ checked: toggle })
+  }
+
+  render() {
+    return React.createElement(
+      'div',
+      {
+        style: {
+          zIndex: 1000,
+          position: 'fixed'
+        },
+        onClick: this.handleClick.bind(this)
+      },
+      React.createElement(
+        Checkbox,
+        {
+          style: { margin: 20 },
+          label: 'Dark theme',
+          slider: true,
+          checked: this.state.checked
+        },
+        null
+      )
+    )
+  }
+}
+
+export default (themeA, themeB, isChecked, onChange) => storyFn => {
+  return [
+    React.createElement(
+      SwitchTheme,
+      {
+        themeA: themeA,
+        themeB: themeB,
+        isChecked: isChecked,
+        onChange: onChange
+      },
+      null
+    ),
+    storyFn()
+  ]
+}

codecov.yaml

@@ -8,7 +8,11 @@ coverage:
   range: "70...100"
 
   status:
-    project: yes
+    project:
+      default:
+        target: auto
+        threshold: 2
+        base: auto 
     patch: no
     changes: no
 

src/components/Address/Address.css

@@ -0,0 +1,3 @@
+.dcl.address {
+  color: var(--text);
+}

src/components/Header/Header.css

@@ -1,5 +1,6 @@
 .ui.header {
   font-family: var(--font-print);
+  color: var(--text);
 }
 
 .ui.header.sub + .ui.header {

src/components/Mana/Mana.css

@@ -12,8 +12,8 @@
   display: inline-block;
 }
 
-.dcl.mana.black .symbol {
-  color: black;
+.dcl.mana.text .symbol {
+  color: var(--text);
 }
 
 .dcl.mana + .dcl.mana {

src/components/Mana/Mana.stories.tsx

@@ -11,8 +11,8 @@ storiesOf('Mana', module)
       <Mana>1,235,345</Mana>
     </>
   ))
-  .add('Black', () => (
-    <Mana size="small" black>
+  .add('Text', () => (
+    <Mana size="small" text>
       20
     </Mana>
   ))

src/components/Mana/Mana.tsx

@@ -5,6 +5,7 @@ import { Header } from 'semantic-ui-react'
 type Props = {
   size?: 'tiny' | 'small' | 'medium' | 'large' | 'huge'
   black?: boolean
+  text?: boolean
   inline?: boolean
   className?: string
   children?: React.ReactChild
@@ -16,8 +17,14 @@ export class Mana extends React.Component<Props> {
   }
 
   render() {
-    const { size, className, black, inline, children, ...rest } = this.props
-    const classes = `dcl mana ${black ? 'black ' : ''}${
+    let { size, className, black, text, inline, children, ...rest } = this.props
+    if (black) {
+      console.warn(
+        'Deprecation Warning: the prop `black` of <Mana/> component has been deprecated in favor of `text`.'
+      )
+      text = true
+    }
+    const classes = `dcl mana ${text ? 'text ' : ''}${
       inline ? 'inline ' : ''
     }${className}`.trim()
     return (

src/components/Navbar/Navbar.css

@@ -51,9 +51,12 @@
   height: 48px;
   background-color: var(--secondary);
   border-radius: 100%;
-  background-image: url(../../assets/chevron-dark.svg);
-  background-repeat: no-repeat;
-  background-position: 17px 16px;
+  padding: 15px 12px;
+  color: var(--text-on-secondary);
+}
+
+.dcl.navbar-back .icon.chevron.left {
+  font-size: 18px;
 }
 
 .dcl.navbar .ui.menu .item {
@@ -110,5 +113,10 @@
     height: 36px;
     background-position: 13px 12px;
     background-size: 22%;
+    padding: 9px;
+  }
+
+  .dcl.navbar-back .icon.chevron.left {
+    font-size: 14px;
   }
 }

src/components/Navbar/Navbar.tsx

@@ -64,7 +64,9 @@ export class Navbar extends React.PureComponent<Props, State> {
     return (
       <div className="dcl navbar" role="navigation">
         <div className="dcl navbar-logo">
-          <span className="dcl navbar-back" onClick={onBack} />
+          <span className="dcl navbar-back" onClick={onBack}>
+            <Icon name="chevron left" />
+          </span>
         </div>
       </div>
     )

src/components/Pagination/Pagination.css

@@ -1,6 +1,7 @@
 .ui.pagination.menu {
   border: none;
   box-shadow: none;
+  background: transparent;
 }
 
 .ui.pagination.menu .item:before {
@@ -10,6 +11,17 @@
 .ui.pagination.menu .item {
   border-radius: var(--radius);
   font-size: 14px;
+  color: var(--text);
+}
+
+.ui.pagination.menu .item:hover {
+  color: var(--text-on-secondary);
+  background: var(--secondary);
+}
+
+.ui.pagination.menu .item.active {
+  color: var(--text-on-primary);
+  background: var(--primary);
 }
 
 .ui.pagination.menu .item + .item {

src/components/Radio/Radio.css

@@ -4,13 +4,57 @@
   margin-right: 4em;
   padding-top: 8px;
   padding-bottom: 8px;
+  color: var(--text);
+}
+
+.ui.slider.checkbox input:focus ~ .box:before,
+.ui.slider.checkbox input:focus ~ label:before {
+  background-color: var(--outline);
+}
+
+.ui.slider.checkbox input:focus:checked ~ .box,
+.ui.slider.checkbox input:focus:checked ~ label,
+.ui.slider.checkbox input:checked ~ label,
+.ui.slider.checkbox input:checked ~ .box {
+  color: var(
+    --text
+  ) !important; /* this is due to an !important in semantic-ui */
+}
+
+.ui.slider.checkbox input:focus:checked ~ .box:before,
+.ui.slider.checkbox input:focus:checked ~ label:before,
+.ui.slider.checkbox input:checked ~ .box:before,
+.ui.slider.checkbox input:checked ~ label:before {
+  background-color: var(
+    --primary
+  ) !important; /* this is due to an !important in semantic-ui */
+}
+
+.ui.checkbox.slider input.hidden + label {
+  padding-top: 0px;
+  font-size: 14px;
+  font-weight: normal;
 }
 
 .ui.radio.checkbox .box,
 .ui.radio.checkbox label {
   padding-left: 48px;
 }
 
+.ui.checkbox .box:before,
+.ui.checkbox label:before,
+.ui.checkbox .box:hover::before,
+.ui.checkbox label:hover::before,
+.ui.checkbox .box:active::before,
+.ui.checkbox label:active::before,
+.ui.checkbox .box:focus::before,
+.ui.checkbox label:focus::before,
+.ui.radio.checkbox input:focus ~ .box:before,
+.ui.radio.checkbox input:focus ~ label:before {
+  background: transparent;
+  background-color: transparent;
+}
+
 .ui.radio.checkbox input:checked ~ .box:before,
 .ui.radio.checkbox input:checked ~ label:before {
   background-color: var(--primary);

src/components/Table/Table.css

@@ -15,6 +15,7 @@
 .ui.basic.table tbody tr td {
   border-top: none;
   padding: 12px 24px;
+  color: var(--text);
 }
 
 .ui.basic.table tbody tr:last-child td {