-
Notifications
You must be signed in to change notification settings - Fork 6
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix: denali tabs behavior and add story (#49)
* fix: denali tabs behavior and add story - removes possible combination of secondary and vertical which does not exist in denali * refactor: vertical denali-tabs to denali-sidebar
- Loading branch information
1 parent
6738486
commit 6cf3092
Showing
13 changed files
with
171 additions
and
67 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,9 @@ | ||
{{! Copyright 2020, Verizon Media. Licensed under the terms of the MIT license. See accompanying LICENSE.md file for terms. }} | ||
<div class="tabs is-vertical is-primary" ...attributes> | ||
<ul> | ||
{{yield (hash | ||
Tab=(component "denali-tabs/tab") | ||
LinkToTab=(component "denali-tabs/link-to-tab") | ||
)}} | ||
</ul> | ||
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
/** | ||
* Copyright 2020, Verizon Media | ||
* Licensed under the terms of the MIT license. See accompanying LICENSE.md file for terms. | ||
*/ | ||
import Component from '@glimmer/component'; | ||
|
||
export default class DenaliSidebarComponent extends Component {} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,6 @@ | ||
/** | ||
* Copyright 2020, Verizon Media | ||
* Licensed under the terms of the MIT license. See accompanying LICENSE.md file for terms. | ||
*/ | ||
|
||
export const STYLES = ['primary', 'secondary']; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
export { default } from '@denali-design/ember/components/denali-sidebar'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,47 @@ | ||
import { hbs } from 'ember-cli-htmlbars'; | ||
import { withKnobs, array, text } from '@storybook/addon-knobs'; | ||
import { attribute, example } from './knob-categories'; | ||
|
||
export default { | ||
title: 'DenaliSidebar', | ||
component: 'DenaliSidebar', | ||
decorators: [withKnobs], | ||
}; | ||
|
||
export const Default = () => ({ | ||
template: hbs` | ||
<DenaliSidebar as |Sidebar|> | ||
<Sidebar.LinkToTab @route=".">{{linkToTab}}</Sidebar.LinkToTab> | ||
<Sidebar.Tab>{{tabOne}}</Sidebar.Tab> | ||
<Sidebar.Tab @isActive={{true}}>{{tabTwo}}</Sidebar.Tab> | ||
<Sidebar.Tab @isDisabled={{true}}>{{tabThree}}</Sidebar.Tab> | ||
</DenaliSidebar> | ||
`, | ||
context: { | ||
linkToTab: 'LinkTo Sidebar Tab', | ||
tabOne: 'Normal Sidebar Tab', | ||
tabTwo: 'Active Sidebar Tab', | ||
tabThree: 'Disabled Sidebar Tab', | ||
}, | ||
}); | ||
|
||
export const Playground = () => ({ | ||
template: hbs` | ||
<DenaliSidebar class={{class}} as |Sidebar|> | ||
{{#each tabs as |tab|}} | ||
<Sidebar.Tab | ||
@isActive={{eq activeTab tab}} | ||
@isDisabled={{contains tab disabledTabs}} | ||
> | ||
{{tab}} | ||
</Sidebar.Tab> | ||
{{/each}} | ||
</DenaliSidebar> | ||
`, | ||
context: { | ||
tabs: array('tabs', ['Ember', 'Denali', 'Sidebar'], ',', example), | ||
activeTab: text('activeTab', 'Denali', example), | ||
disabledTabs: array('disabledTabs', ['Ember'], ',', example), | ||
class: text('class', '', attribute), | ||
}, | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,49 @@ | ||
import { hbs } from 'ember-cli-htmlbars'; | ||
import { withKnobs, array, select, text } from '@storybook/addon-knobs'; | ||
import { argument, attribute, example } from './knob-categories'; | ||
import { STYLES } from '../addon/components/denali-tabs-enums'; | ||
|
||
export default { | ||
title: 'DenaliTabs', | ||
component: 'DenaliTabs', | ||
decorators: [withKnobs], | ||
}; | ||
|
||
export const Default = () => ({ | ||
template: hbs` | ||
<DenaliTabs as |Tabs|> | ||
<Tabs.LinkToTab @route=".">{{linkToTab}}</Tabs.LinkToTab> | ||
<Tabs.Tab>{{tabOne}}</Tabs.Tab> | ||
<Tabs.Tab @isActive={{true}}>{{tabTwo}}</Tabs.Tab> | ||
<Tabs.Tab @isDisabled={{true}}>{{tabThree}}</Tabs.Tab> | ||
</DenaliTabs> | ||
`, | ||
context: { | ||
linkToTab: 'linkToTab', | ||
tabOne: 'Denali', | ||
tabTwo: 'Active Tab', | ||
tabThree: 'Disabled Tab', | ||
}, | ||
}); | ||
|
||
export const Playground = () => ({ | ||
template: hbs` | ||
<DenaliTabs class={{class}} @style={{style}} as |Tabs|> | ||
{{#each tabs as |tab|}} | ||
<Tabs.Tab | ||
@isActive={{eq activeTab tab}} | ||
@isDisabled={{contains tab disabledTabs}} | ||
> | ||
{{tab}} | ||
</Tabs.Tab> | ||
{{/each}} | ||
</DenaliTabs> | ||
`, | ||
context: { | ||
style: select('style', STYLES, STYLES[0], argument), | ||
tabs: array('tabs', ['Ember', 'Denali', 'Tabs'], ',', example), | ||
activeTab: text('activeTab', 'Denali', example), | ||
disabledTabs: array('disabledTabs', ['Tabs'], ',', example), | ||
class: text('class', '', attribute), | ||
}, | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,46 @@ | ||
import { module, test } from 'qunit'; | ||
import { setupRenderingTest } from 'ember-qunit'; | ||
import { render } from '@ember/test-helpers'; | ||
import { hbs } from 'ember-cli-htmlbars'; | ||
|
||
module('Integration | Component | denali-sidebar', function (hooks) { | ||
setupRenderingTest(hooks); | ||
|
||
test('it renders', async function (assert) { | ||
await render(hbs` | ||
<DenaliSidebar> | ||
The Greatest Sidebar | ||
</DenaliSidebar> | ||
`); | ||
|
||
assert.dom('.tabs').hasClass('is-primary', 'DenaliSidebar renders a primary style by default'); | ||
assert.dom('.tabs').hasClass('is-vertical', 'DenaliSidebar renders a vertical style by default'); | ||
}); | ||
|
||
test('it can yield a `Tab` sub component', async function (assert) { | ||
await render(hbs` | ||
<DenaliSidebar as |Sidebar|> | ||
<Sidebar.Tab> | ||
The Greatest Tab | ||
</Sidebar.Tab> | ||
</DenaliSidebar> | ||
`); | ||
|
||
assert.dom('.tabs li span').hasText('The Greatest Tab', 'DenaliSidebar can yield a `Tab` sub component'); | ||
}); | ||
|
||
test('it can yield a `LinkToTab` sub component', async function (assert) { | ||
await render(hbs` | ||
<DenaliSidebar as |Sidebar|> | ||
<Sidebar.LinkToTab | ||
@route="/" | ||
> | ||
The Greatest Tab | ||
</Sidebar.LinkToTab> | ||
</DenaliSidebar> | ||
`); | ||
assert | ||
.dom('.tabs li.ember-view a') | ||
.hasText('The Greatest Tab', 'DenaliSidebar can yield a `LinkToTab` sub component'); | ||
}); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters