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

Commit

Permalink
Merge 338e4e0 into e6a9dde
Browse files Browse the repository at this point in the history
  • Loading branch information
@carloslancha
carloslancha committed Dec 27, 2017
2 parents e6a9dde + 338e4e0 commit 2a04b80
Show file tree
Hide file tree
Showing 5 changed files with 191 additions and 4 deletions.
2 changes: 1 addition & 1 deletion packages/clay-dropdown/src/items_validator.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ let itemShape = {
active: Config.bool().value(false),
checked: Config.bool().value(false),
disabled: Config.bool().value(false),
href: Config.string().required(),
href: Config.string(),
icon: Config.string(),
inputName: Config.string(),
inputValue: Config.string(),
Expand Down
11 changes: 11 additions & 0 deletions packages/clay-management-toolbar/demos/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,17 @@ <h1 class="page-title">

new metal.ClayManagementToolbar({
filterItems: [
{
items: [
{
label: 'Link 1',
href: '#mylink',
type: 'item',
},
],
label: 'Filter By (Links)',
type: 'group',
},
{
items: [
{
Expand Down
3 changes: 2 additions & 1 deletion packages/clay-management-toolbar/src/ClayManagementToolbar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,11 +12,12 @@ import templates from './ClayManagementToolbar.soy.js';
let filterItemShape = {
checked: Config.bool().value(false),
disabled: Config.bool().value(false),
href: Config.string(),
inputName: Config.string(),
inputValue: Config.string(),
label: Config.string().required(),
separator: Config.bool().value(false),
type: Config.oneOf(['checkbox', 'group', 'radiogroup']),
type: Config.oneOf(['checkbox', 'group', 'item', 'radiogroup']),
};

const filterItemsValidator = Config.arrayOf(Config.shapeOf(filterItemShape));
Expand Down
53 changes: 52 additions & 1 deletion packages/clay-management-toolbar/src/__tests__/ClayManagementToolbar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ describe('ClayManagementToolbar', function() {
expect(managementToolbar).toMatchSnapshot();
});

it('should render a management toolbar with filters dropdown', () => {
it('should render a management toolbar with filters dropdown with items of type checkbox', () => {
managementToolbar = new ClayManagementToolbar({
filterItems: [
{
Expand All @@ -86,6 +86,57 @@ describe('ClayManagementToolbar', function() {
expect(managementToolbar).toMatchSnapshot();
});

it('should render a management toolbar with filters dropdown with items of type radio', () => {
managementToolbar = new ClayManagementToolbar({
filterItems: [
{
items: [
{
label: 'Item 1',
inputValue: '1',
},
{
checked: true,
label: 'Item 2',
inputValue: '2',
},
{
disabled: true,
label: 'Item 3',
inputValue: '3',
},
],
inputName: 'item1radio',
label: 'Group 1',
type: 'radiogroup',
},
],
spritemap: spritemap,
});

expect(managementToolbar).toMatchSnapshot();
});

it('should render a management toolbar with filters dropdown with items of type item', () => {
managementToolbar = new ClayManagementToolbar({
filterItems: [
{
href: '#myItem1',
label: 'Item 1',
type: 'item',
},
{
href: '#myItem2',
label: 'Item 2',
type: 'item',
},
],
spritemap: spritemap,
});

expect(managementToolbar).toMatchSnapshot();
});

it('should render a management toolbar with view types', () => {
managementToolbar = new ClayManagementToolbar({
spritemap: spritemap,
Expand Down
126 changes: 125 additions & 1 deletion packages/clay-management-toolbar/src/__tests__/__snapshots__/ClayManagementToolbar.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -155,7 +155,7 @@ exports[`ClayManagementToolbar should render a management toolbar with descendin
</nav>
`;

exports[`ClayManagementToolbar should render a management toolbar with filters dropdown 1`] = `
exports[`ClayManagementToolbar should render a management toolbar with filters dropdown with items of type checkbox 1`] = `
<nav class="management-bar management-bar-light navbar navbar-expand-md">
<div class="container">
<ul class="navbar-nav">
Expand Down Expand Up @@ -217,6 +217,130 @@ exports[`ClayManagementToolbar should render a management toolbar with filters d
</nav>
`;

exports[`ClayManagementToolbar should render a management toolbar with filters dropdown with items of type item 1`] = `
<nav class="management-bar management-bar-light navbar navbar-expand-md">
<div class="container">
<ul class="navbar-nav">
<li class="dropdown nav-item">
<div class="dropdown">
<button aria-expanded="false" aria-haspopup="true" aria-label="toggle" class="dropdown-toggle btn nav-link navbar-breakpoint-down-d-none btn-unstyled">Filter and Order
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-caret-bottom">
<title>caret-bottom</title>
<use xlink:href="../node_modules/lexicon-ux/build/images/icons/icons.svg#caret-bottom"></use>
</svg>
</button>
<form>
<div class="dropdown-menu">
<li>
<a class=" dropdown-item" href="#myItem1">Item 1</a>
</li>
<li>
<a class=" dropdown-item" href="#myItem2">Item 2</a>
</li>
<div class="dropdown-section">
<button class="btn btn-block btn-primary" type="button">Done</button>
</div>
</div>
</form>
</div>
</li>
<li class="nav-item">
<button class="btn nav-link nav-link-monospaced order-arrow-up-active btn-unstyled" aria-label="order-arrow" type="button">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-order-arrow">
<title>order-arrow</title>
<use xlink:href="../node_modules/lexicon-ux/build/images/icons/icons.svg#order-arrow"></use>
</svg>
</button>
</li>
</ul>
<ul class="navbar-nav">
<li class="nav-item">
<button class="btn nav-btn nav-btn-monospaced btn-primary" aria-label="plus" type="button">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-plus">
<title>plus</title>
<use xlink:href="../node_modules/lexicon-ux/build/images/icons/icons.svg#plus"></use>
</svg>
</button>
</li>
</ul>
</div>
</nav>
`;

exports[`ClayManagementToolbar should render a management toolbar with filters dropdown with items of type radio 1`] = `
<nav class="management-bar management-bar-light navbar navbar-expand-md">
<div class="container">
<ul class="navbar-nav">
<li class="dropdown nav-item">
<div class="dropdown">
<button aria-expanded="false" aria-haspopup="true" aria-label="toggle" class="dropdown-toggle btn nav-link navbar-breakpoint-down-d-none btn-unstyled">Filter and Order
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-caret-bottom">
<title>caret-bottom</title>
<use xlink:href="../node_modules/lexicon-ux/build/images/icons/icons.svg#caret-bottom"></use>
</svg>
</button>
<form>
<div class="dropdown-menu">
<div class="dropdown-subheader">Group 1</div>
<div aria-label="Group 1" role="radiogroup">
<div class="dropdown-item">
<div class="custom-control custom-radio custom-control-inline">
<label>
<input class="custom-control-input" name="item1radio" value="1" ref="input" type="radio" role="radio">
<span class="custom-control-indicator"></span>
<span class="custom-control-description">Item 1</span>
</label>
</div>
</div>
<div class="dropdown-item active">
<div class="custom-control custom-radio custom-control-inline">
<label>
<input checked="" class="custom-control-input" name="item1radio" value="2" ref="input" type="radio" role="radio">
<span class="custom-control-indicator"></span>
<span class="custom-control-description">Item 2</span>
</label>
</div>
</div>
<div class="dropdown-item">
<div class="custom-control custom-radio custom-control-inline">
<label>
<input disabled="disabled" class="custom-control-input" name="item1radio" value="3" ref="input" type="radio" role="radio">
<span class="custom-control-indicator"></span>
<span class="custom-control-description">Item 3</span>
</label>
</div>
</div>
</div>
<div class="dropdown-section">
<button class="btn btn-block btn-primary" type="button">Done</button>
</div>
</div>
</form>
</div>
</li>
<li class="nav-item">
<button class="btn nav-link nav-link-monospaced order-arrow-up-active btn-unstyled" aria-label="order-arrow" type="button">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-order-arrow">
<title>order-arrow</title>
<use xlink:href="../node_modules/lexicon-ux/build/images/icons/icons.svg#order-arrow"></use>
</svg>
</button>
</li>
</ul>
<ul class="navbar-nav">
<li class="nav-item">
<button class="btn nav-btn nav-btn-monospaced btn-primary" aria-label="plus" type="button">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-plus">
<title>plus</title>
<use xlink:href="../node_modules/lexicon-ux/build/images/icons/icons.svg#plus"></use>
</svg>
</button>
</li>
</ul>
</div>
</nav>
`;

exports[`ClayManagementToolbar should render a management toolbar with id 1`] = `
<nav class="management-bar management-bar-light navbar navbar-expand-md" id="myId">
<div class="container">
Expand Down

0 comments on commit 2a04b80

Please sign in to comment.