Skip to content
This repository has been archived by the owner on Jan 6, 2022. It is now read-only.

Buttonify #282

Merged
merged 16 commits into from
Mar 2, 2017
Next Next commit
implement button component
yoshuawuyts committed Feb 27, 2017
commit af3a7e82e9b844f130e6374531fdc00e7f27ea93
122 changes: 93 additions & 29 deletions elements/button.js
Original file line number Diff line number Diff line change
@@ -2,13 +2,15 @@

const html = require('choo/html')
const css = require('sheetify')
const icon = require('./icon')
const xtend = require('xtend')

const prefix = css`
const iconElement = require('./icon')

const baseStyles = css`
:host {
text-transform: uppercase;
letter-spacing: .025em;
.btn-wrapper {
.btn-inner-wrapper {
display: flex;
flex-wrap: nowrap;
flex-direction: row;
@@ -17,10 +19,11 @@ const prefix = css`
}
}
.icon-only {
.btn-text {
display: none;
}
.btn-text { display: none }
}
`

var greenStyles = css`
.filled-green {
padding: .5rem .75rem;
font-size: .75rem;
@@ -32,6 +35,9 @@ const prefix = css`
background-color: var(--color-green-hover);
color: var(--color-white);
}
`

var redStyles = css`
.filled-red {
padding: .5rem .75rem;
font-size: .75rem;
@@ -43,6 +49,9 @@ const prefix = css`
background-color: var(--color-red-hover);
color: var(--color-white);
}
`

var plainStyles = css`
.plain {
padding: .5rem .75rem;
font-size: .75rem;
@@ -55,33 +64,88 @@ const prefix = css`
}
`

module.exports = (props, click) => {
if (typeof click === 'function') props.click = click

var child
if (props.icon) {
child = html`
<div class="btn-wrapper">
${icon({
id: props.icon
})}
<span class="btn-text ml1">${props.text}</span>
</div>`
buttonElement.green = greenButton
buttonElement.red = redButton
module.exports = plainButton

// States:
// - Text only
// - Icon only
// - Text and icon
function buttonElement (innerText, opts) {
if (!opts) {
opts = innerText
innerText = ''
}

var iconId = opts.icon
var innerHTML = null

if (innerText && !iconId) {
innerHTML = html`
<div class="btn-inner-wrapper">
<span class="btn-text">${innerText}</span>
</div>
`
} else if (!innerText && iconId) {
innerHTML = html`
<div class="btn-inner-wrapper">
${iconElement({ id: iconId })}
</div>
`
} else {
child = html`
<div class="btn-wrapper">
<span class="btn-text">${props.text}</span>
</div>`
innerHTML = html`
<div class="btn-inner-wrapper">
${iconElement({ id: iconId })}
<span class="btn-text ml1">${innerText}</span>
</div>
`
}

var defaultProps = {
'aria-label': opts.text,
'title': opts.text
}

var buttonProps = xtend(defaultProps, opts)
buttonProps.class = 'pointer ' + baseStyles + ' ' + buttonProps.class

return html`
<button
onclick=${props.click}
class="pointer ${prefix} ${props.style || ''} ${props.cls || ''}"
title=${props.title || props.text}
aria-label=${props.ariaLabel || props.text}
>
${child}
<button ${buttonProps}>
${innerHTML}
</button>
`
}

function greenButton (innerText, opts) {
if (!opts) {
opts = innerText
innerText = ''
}

opts = opts || {}
opts.class = (opts.class) ? greenStyles + ' ' + opts.class : greenStyles
return buttonElement(innerText, opts)
}

function redButton (innerText, opts) {
if (!opts) {
opts = innerText
innerText = ''
}

opts = opts || {}
opts.class = (opts.class) ? redStyles + ' ' + opts.class : redStyles
return buttonElement(innerText, opts)
}

function plainButton (innerText, opts) {
if (!opts) {
opts = innerText
innerText = ''
}

opts = opts || {}
opts.class = (opts.class) ? plainStyles + ' ' + opts.class : plainStyles
return buttonElement(innerText, opts)
}