d1cbc3f032
* ui: Adds a tab selection animation to our app tabs 1. Replace all mentions of `magenta` with a themeable CSS property. 2. Add an easy way to inline style DOM nodes 3. Use CSS properties to add tab animation * Fix up rendering test * Avoid DOM noodling as much as possible
25 lines
791 B
JavaScript
25 lines
791 B
JavaScript
import { is, clickable } from 'ember-cli-page-object';
|
|
import ucfirst from 'consul-ui/utils/ucfirst';
|
|
export default function(name, items, blankKey = 'all') {
|
|
return items.reduce(function(prev, item, i, arr) {
|
|
// if item is empty then it means 'all'
|
|
// otherwise camelCase based on something-here = somethingHere for the key
|
|
const key =
|
|
item === ''
|
|
? blankKey
|
|
: item.split('-').reduce(function(prev, item, i, arr) {
|
|
if (i === 0) {
|
|
return item;
|
|
}
|
|
return prev + ucfirst(item);
|
|
});
|
|
return {
|
|
...prev,
|
|
...{
|
|
[`${key}IsSelected`]: is('.selected', `[data-test-tab="${name}_${item}"]`),
|
|
[key]: clickable(`[data-test-tab="${name}_${item}"] a`),
|
|
},
|
|
};
|
|
}, {});
|
|
}
|