Styled

components.ui-button-fancy.js

import Ember from 'ember';
import UIButton from './ui-button';
import styled from '../utils/styled';

//export default styled(UIButton);

export default styled.button`
	background: purple;
  color: white;
	padding: 20px;
`;

components.ui-button.js

import Ember from 'ember';
import styled from '../utils/styled';

export default Ember.Component.extend({
  tagName: 'button',
});

components.ui-heading.js

import Ember from 'ember';
import styled from '../utils/styled';

//export default styled(UIButton);

export default styled.h1`
	color: #333;
  font-size: 30px;
`;

components.ui-primary-button.js

import Ember from 'ember';
import UIButton from './ui-button';
import styled from '../utils/styled';

export default styled(UIButton, `
	background: yellow;
`);

components.ui-secondary-button.js

import Ember from 'ember';
import styled from '../utils/styled';

export default styled(Ember.Component.extend({
	tagName: 'button',
  text: 'Hello',
  didInsertElement() {
    this._super(...arguments);
    console.log(this.get('text'))
  },
  click() {
    console.log('Button was clicked'); 
  },
}), `
	background: yellow;
`);

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle'
});

templates.application.hbs

<h1>Welcome to {{appName}}</h1>
<br>
<br>
{{outlet}}
<br>
<br>

{{#ui-button}}Simple{{/ui-button}}
{{#ui-button-fancy}}Fancy{{/ui-button-fancy}}
{{#ui-primary-button}}Primary{{/ui-primary-button}}
{{#ui-secondary-button}}Secondary{{/ui-secondary-button}}
{{#ui-heading}}Heading 1{{/ui-heading}}

templates.components.ui-button-fancy.hbs

{{yield}}

templates.components.ui-button.hbs

{{yield}}

templates.components.ui-heading.hbs

{{yield}}

templates.components.ui-primary-button.hbs

{{yield}}

templates.components.ui-secondary-button.hbs

{{yield}}

twiddle.json

{
  "version": "0.12.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.12.0",
    "ember-template-compiler": "2.12.0",
    "ember-testing": "2.12.0"
  },
  "addons": {
    "ember-data": "2.12.1"
  }
}

utils.styled.js

import Ember from 'ember';

const styled = (component, styles) => {
  if (typeof component === 'string') {
    return Ember.Component.extend({
      tagName: component,
      attributeBindings: ['_componentStyle:style'],
      _componentStyle: styles,
    });
  } else {
    return component.extend({
      attributeBindings: ['_componentStyle:style'],
      _componentStyle: styles,
    });
  }
}

styled.button = (styles) => {
  return styled('button', styles);
}

styled.h1 = (styles) => {
  return styled('h1', styles);
}

export default styled;