Skip to content

Commit 3369248

Browse files
timea-solidtimea-solid
committed
cleaned buttons from jss
1 parent 90e6fe9 commit 3369248

4 files changed

Lines changed: 43 additions & 59 deletions

File tree

‎src/style.js‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -285,6 +285,48 @@ export const style = { // styleModule
285285
}
286286
}
287287

288+
/**
289+
* Get the button style, based on options.
290+
* See https://design.inrupt.com/atomic-core/?cat=Atoms#Buttons
291+
*/
292+
style.getButtonStyle = function getButtonStyle (options = {}) {
293+
// default to primary color
294+
const color = (options.buttonColor === 'Secondary') ? '#01c9ea' : '#7c4dff'
295+
let backgroundColor = color
296+
let fontColor = '#ffffff'
297+
let borderColor = color
298+
// default to primary color
299+
let hoverBackgroundColor = (options.buttonColor === 'Secondary') ? '#37cde6' : '#9f7dff'
300+
let hoverFontColor = fontColor
301+
if (options.needsBorder) {
302+
backgroundColor = '#ffffff'
303+
fontColor = color
304+
borderColor = color
305+
hoverBackgroundColor = color
306+
hoverFontColor = backgroundColor
307+
}
308+
309+
return {
310+
'background-color': `${backgroundColor}`,
311+
color: `${fontColor}`,
312+
'font-family': 'Raleway, Roboto, sans-serif',
313+
'border-radius': '0.25em',
314+
'border-color': `${borderColor}`,
315+
border: '1px solid',
316+
cursor: 'pointer',
317+
'font-size': '.8em',
318+
'text-decoration': 'none',
319+
padding: '0.5em 4em',
320+
transition: '0.25s all ease-in-out',
321+
outline: 'none',
322+
'&:hover': {
323+
'background-color': `${hoverBackgroundColor}`,
324+
color: `${hoverFontColor}`,
325+
transition: '0.25s all ease-in-out'
326+
}
327+
}
328+
}
329+
288330
style.setStyle = function setStyle (ele, styleName) {
289331
ele.style = style[styleName]
290332
}

‎src/widgets/buttons.ts‎

Lines changed: 1 addition & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ import * as ns from '../ns'
66
import * as style from '../style'
77
import * as debug from '../debug'
88
import { info } from '../log'
9-
import { getClasses } from '../jss'
109
import { uploadFiles, makeDraggable, makeDropTarget } from './dragAndDrop'
1110
import { store } from 'solid-logic'
1211
import * as utils from '../utils'
@@ -541,48 +540,6 @@ export function deleteButtonWithCheck (
541540
return deleteButton // or button div? caller may change size of image
542541
}
543542

544-
/**
545-
* Get the button style, based on options.
546-
* See https://design.inrupt.com/atomic-core/?cat=Atoms#Buttons
547-
*/
548-
function getButtonStyle (options: ButtonWidgetOptions = {}) {
549-
// default to primary color
550-
const color: string = (options.buttonColor === 'Secondary') ? '#01c9ea' : '#7c4dff'
551-
let backgroundColor: string = color
552-
let fontColor: string = '#ffffff'
553-
let borderColor: string = color
554-
// default to primary color
555-
let hoverBackgroundColor: string = (options.buttonColor === 'Secondary') ? '#37cde6' : '#9f7dff'
556-
let hoverFontColor: string = fontColor
557-
if (options.needsBorder) {
558-
backgroundColor = '#ffffff'
559-
fontColor = color
560-
borderColor = color
561-
hoverBackgroundColor = color
562-
hoverFontColor = backgroundColor
563-
}
564-
565-
return {
566-
'background-color': `${backgroundColor}`,
567-
color: `${fontColor}`,
568-
'font-family': 'Raleway, Roboto, sans-serif',
569-
'border-radius': '0.25em',
570-
'border-color': `${borderColor}`,
571-
border: '1px solid',
572-
cursor: 'pointer',
573-
'font-size': '.8em',
574-
'text-decoration': 'none',
575-
padding: '0.5em 4em',
576-
transition: '0.25s all ease-in-out',
577-
outline: 'none',
578-
'&:hover': {
579-
'background-color': `${hoverBackgroundColor}`,
580-
color: `${hoverFontColor}`,
581-
transition: '0.25s all ease-in-out'
582-
}
583-
}
584-
}
585-
586543
/* Make a button
587544
*
588545
* @param dom - the DOM document object
@@ -606,12 +563,8 @@ export function button (dom: HTMLDocument, iconURI: string | undefined, text: st
606563
button.setAttribute('style', style.buttonStyle)
607564
} else {
608565
button.textContent = text.toLocaleUpperCase()
609-
const style = getButtonStyle(options)
610-
const { classes } = getClasses(dom.head, {
611-
textButton: style
612-
})
613566

614-
button.classList.add(classes.textButton)
567+
button.setAttribute('style', style.getButtonStyle(options))
615568
}
616569
if (handler) {
617570
button.addEventListener('click', handler, false)

‎test/helpers/dom-with-head.ts‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,5 @@
1-
21
import { JSDOM } from 'jsdom'
32

4-
// FIXME: Not sure why this is needed, but
5-
// JSS tries to do .insertBefore on a StyleSheet element,
6-
// and that seems to fail in JSDOM (it works fine in the browser)
73
export function domWithHead () {
84
const window = new JSDOM('<!DOCTYPE html><head></head><body><p>Hello world</p></body>').window
95
const dom = window.document

‎test/unit/widgets/buttons.test.ts‎

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -128,13 +128,6 @@ describe('button', () => {
128128
const handler = () => {}
129129
expect(button(domWithHead(), iconURI, text, handler)).toBeTruthy()
130130
})
131-
it('has the style class from JSS', () => {
132-
const iconURI = ''
133-
const text = 'txt'
134-
const handler = () => {}
135-
const buttonElt = button(domWithHead(), iconURI, text, handler)
136-
expect(buttonElt.classList[0]).toEqual(expect.stringMatching(/^textButton-\d-\d-\d$/))
137-
})
138131
it('calls the callback when you click it', (done) => {
139132
const iconURI = ''
140133
const text = 'txt'

0 commit comments

Comments
 (0)