Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ViewType object accepts href | Fixes #641 #642

Merged
merged 7 commits into from
Feb 27, 2018
Merged

ViewType object accepts href | Fixes #641 #642

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
f41f5b9
ViewType object accepts href | Fixes #641
Feb 26, 2018
2aab2dd
Update ClayManagementToolbar demo | Fixes #641
Feb 26, 2018
5c02571
Update ClayManagementToolbar tests | Fixes #641
Feb 26, 2018
4319e4f
Add href to views in ClayDatasetDisplay | Fixes #641
Feb 26, 2018
85f24aa
Update ClayDatasetDisplay demos | Fixes #641
Feb 26, 2018
25fbb38
Update ClayDatasetDisplay tests | Fixes #641
Feb 26, 2018
533c078
Regen snapshots | Fixes #641
Feb 26, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions packages/clay-dataset-display/demos/a11y.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -269,6 +269,7 @@ <h1 class="page-title">
views: [
{
contentRenderer: 'cards',
href: '#cards',
icon: 'cards2',
label: 'Cards',
schema: {
Expand Down
1 change: 1 addition & 0 deletions packages/clay-dataset-display/demos/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -269,6 +269,7 @@ <h1 class="page-title">
views: [
{
contentRenderer: 'cards',
href: '#cards',
icon: 'cards2',
label: 'Cards',
schema: {
Expand Down
1 change: 1 addition & 0 deletions packages/clay-dataset-display/src/ClayDatasetDisplay.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -434,6 +434,7 @@ ClayDatasetDisplay.STATE = {
Config.shapeOf({
active: Config.bool().value(false),
disabled: Config.bool().value(false),
href: Config.string(),
icon: Config.string().required(),
id: Config.string().required(),
label: Config.string().required(),
Expand Down
1 change: 1 addition & 0 deletions packages/clay-dataset-display/src/ClayDatasetDisplay.soy
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,7 @@
active: bool,
contentRenderer: string,
disabled: bool,
href: string,
icon: string,
label: string,
schema: ?
Expand Down
1 change: 1 addition & 0 deletions packages/clay-dataset-display/src/__tests__/ClayDatasetDisplay.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -251,6 +251,7 @@ let defaultConfig = {
views: [
{
contentRenderer: 'cards',
href: '#cards',
icon: 'cards2',
label: 'Cards',
schema: {
Expand Down
18 changes: 9 additions & 9 deletions packages/clay-dataset-display/src/__tests__/__snapshots__/ClayDatasetDisplay.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -649,7 +649,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay and change view o
<div class="dropdown-menu dropdown-menu-indicator-start" ref="menu">
<ul class="list-unstyled">
<li>
<a class=" dropdown-item">
<a class=" dropdown-item" href="#cards">
<div class="dropdown-item-indicator">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-cards2" focusable="false">
<title>cards2</title>
Expand Down Expand Up @@ -1338,7 +1338,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay and change view o
<div class="dropdown-menu dropdown-menu-indicator-start" ref="menu">
<ul class="list-unstyled">
<li>
<a class=" dropdown-item">
<a class=" dropdown-item" href="#cards">
<div class="dropdown-item-indicator">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-cards2" focusable="false">
<title>cards2</title>
Expand Down Expand Up @@ -2027,7 +2027,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay and change view o
<div class="dropdown-menu dropdown-menu-indicator-start" ref="menu">
<ul class="list-unstyled">
<li>
<a class=" dropdown-item">
<a class=" dropdown-item" href="#cards">
<div class="dropdown-item-indicator">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-cards2" focusable="false">
<title>cards2</title>
Expand Down Expand Up @@ -2561,7 +2561,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with grouped item
<div class="dropdown-menu dropdown-menu-indicator-start" ref="menu">
<ul class="list-unstyled">
<li>
<a class=" dropdown-item">
<a class=" dropdown-item" href="#cards">
<div class="dropdown-item-indicator">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-cards2" focusable="false">
<title>cards2</title>
Expand Down Expand Up @@ -3441,7 +3441,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with items and li
<div class="dropdown-menu dropdown-menu-indicator-start" ref="menu">
<ul class="list-unstyled">
<li>
<a class=" dropdown-item">
<a class=" dropdown-item" href="#cards">
<div class="dropdown-item-indicator">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-cards2" focusable="false">
<title>cards2</title>
Expand Down Expand Up @@ -4438,7 +4438,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with items and li
<div class="dropdown-menu dropdown-menu-indicator-start" ref="menu">
<ul class="list-unstyled">
<li>
<a class=" dropdown-item">
<a class=" dropdown-item" href="#cards">
<div class="dropdown-item-indicator">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-cards2" focusable="false">
<title>cards2</title>
Expand Down Expand Up @@ -5281,7 +5281,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with items and li
<div class="dropdown-menu dropdown-menu-indicator-start" ref="menu">
<ul class="list-unstyled">
<li>
<a class=" dropdown-item">
<a class=" dropdown-item" href="#cards">
<div class="dropdown-item-indicator">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-cards2" focusable="false">
<title>cards2</title>
Expand Down Expand Up @@ -5634,7 +5634,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with items and se
<div class="dropdown-menu dropdown-menu-indicator-start" ref="menu">
<ul class="list-unstyled">
<li>
<a class=" dropdown-item">
<a class=" dropdown-item" href="#cards">
<div class="dropdown-item-indicator">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-cards2" focusable="false">
<title>cards2</title>
Expand Down Expand Up @@ -6973,7 +6973,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with ungrouped it
<div class="dropdown-menu dropdown-menu-indicator-start" ref="menu">
<ul class="list-unstyled">
<li>
<a class=" dropdown-item">
<a class=" dropdown-item" href="#cards">
<div class="dropdown-item-indicator">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-cards2" focusable="false">
<title>cards2</title>
Expand Down
52 changes: 52 additions & 0 deletions packages/clay-management-toolbar/demos/a11y.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,13 @@ <h4>Disabled State</h4>
</div>
</div>

<div class="row row-spacing">
<div class="col">
<h4>With links as viewTypes</h4>
<div id="link-view-types-block"></div>
</div>
</div>

<div class="row row-spacing">
<div class="col">
<h4>With Only Search</h4>
Expand Down Expand Up @@ -133,6 +140,26 @@ <h4>With search results bar with active state</h4>
},
];

const linkViewTypes= [
{
active: true,
href: '#list',
icon: 'list',
label: 'List',
},
{
disabled: true,
href: '#table',
icon: 'table',
label: 'Table',
},
{
href: '#card',
icon: 'cards2',
label: 'Card',
},
];

const spritemap = '../../../node_modules/clay/lib/images/icons/icons.svg';

//Default State
Expand Down Expand Up @@ -186,6 +213,31 @@ <h4>With search results bar with active state</h4>
},
'#disabled-block');

//Link View Types
new metal.ClayManagementToolbar({
creationMenu: {
items: [
{
href: '#1',
label: 'Add Content 1',
},
{
href: '#2',
label: 'Add Content 2',
}
]
},
filterItems: filterItems,
searchFormName: 'mySearchName',
searchInputName: 'mySearchInputName',
selectable: true,
showInfoButton: true,
sortingOrder: 'asc',
spritemap: spritemap,
viewTypes: linkViewTypes,
},
'#link-view-types-block');

//With Only Search
new metal.ClayManagementToolbar({
searchFormName: 'mySearchName',
Expand Down
52 changes: 52 additions & 0 deletions packages/clay-management-toolbar/demos/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,13 @@ <h4>Disabled State</h4>
</div>
</div>

<div class="row row-spacing">
<div class="col">
<h4>With links as viewTypes</h4>
<div id="link-view-types-block"></div>
</div>
</div>

<div class="row row-spacing">
<div class="col">
<h4>With Only Search</h4>
Expand Down Expand Up @@ -206,6 +213,26 @@ <h4>With search results bar with active state</h4>
},
];

const linkViewTypes= [
{
active: true,
href: '#list',
icon: 'list',
label: 'List',
},
{
disabled: true,
href: '#table',
icon: 'table',
label: 'Table',
},
{
href: '#card',
icon: 'cards2',
label: 'Card',
},
];

const spritemap = '../../../node_modules/clay/lib/images/icons/icons.svg';

//Default State
Expand Down Expand Up @@ -259,6 +286,31 @@ <h4>With search results bar with active state</h4>
},
'#disabled-block');

//Link View Types
new metal.ClayManagementToolbar({
creationMenu: {
items: [
{
href: '#1',
label: 'Add Content 1',
},
{
href: '#2',
label: 'Add Content 2',
}
]
},
filterItems: filterItems,
searchFormName: 'mySearchName',
searchInputName: 'mySearchInputName',
selectable: true,
showInfoButton: true,
sortingOrder: 'asc',
spritemap: spritemap,
viewTypes: linkViewTypes,
},
'#link-view-types-block');

//With Only Search
new metal.ClayManagementToolbar({
searchFormName: 'mySearchName',
Expand Down
1 change: 1 addition & 0 deletions packages/clay-management-toolbar/src/ClayManagementToolbar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -378,6 +378,7 @@ ClayManagementToolbar.STATE = {
Config.shapeOf({
active: Config.bool().value(false),
disabled: Config.bool().value(false),
href: Config.string(),
icon: Config.string().required(),
label: Config.string().required(),
})
Expand Down
2 changes: 2 additions & 0 deletions packages/clay-management-toolbar/src/ClayManagementToolbar.soy
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,7 @@
{@param? viewTypes: list<[
active: bool,
disabled: bool,
href: string,
icon: string,
label: string
]>}
Expand Down Expand Up @@ -348,6 +349,7 @@
{@param? viewTypes: list<[
active: bool,
disabled: bool,
href: string,
icon: string,
label: string
]>}
Expand Down
27 changes: 27 additions & 0 deletions packages/clay-management-toolbar/src/__tests__/ClayManagementToolbar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -227,6 +227,33 @@ describe('ClayManagementToolbar', function() {
expect(managementToolbar).toMatchSnapshot();
});

it('should render a management toolbar with links as view types', () => {
managementToolbar = new ClayManagementToolbar({
spritemap: spritemap,
viewTypes: [
{
active: true,
href: '#list',
icon: 'list',
label: 'List',
},
{
disabled: true,
href: '#table',
icon: 'table',
label: 'Table',
},
{
href: '#cards',
icon: 'cards2',
label: 'Card',
},
],
});

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

it('should render a managment toolbar with plus button', () => {
managementToolbar = new ClayManagementToolbar({
spritemap: spritemap,
Expand Down
Loading