-
Notifications
You must be signed in to change notification settings - Fork 30
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Initial commit of tab html css and js
- Loading branch information
Sean Elliott
committed
Dec 17, 2019
1 parent
a00eabe
commit cd90238
Showing
10 changed files
with
259 additions
and
26 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
Large diffs are not rendered by default.
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
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 |
|---|---|---|
| @@ -1,3 +1,14 @@ | ||
| <div class="nsw-wysiwyg-content nsw-container"> | ||
| <h1>Tab navigation</h1> | ||
| </div> | ||
| <div class="nsw-tabs js-tabs"> | ||
| <ul class="nsw-tabs__list"> | ||
| {{#each tabitems}} | ||
| <li class="nsw-tabs__list-item"> | ||
| <a href="#{{urlHash}}" class="nsw-tabs__link">{{title}}</a> | ||
| </li> | ||
| {{/each}} | ||
| </ul> | ||
| {{#each tabitems}} | ||
| <section id="{{urlHash}}" class="nsw-tabs__content nsw-wysiwyg-content"> | ||
| {{{content}}} | ||
| </section> | ||
| {{/each}} | ||
| </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,63 @@ | ||
| .nsw-tabs{ | ||
| @include nsw-spacing(margin-top, md); | ||
|
|
||
| &__list{ | ||
| margin: 0; | ||
| padding: 0; | ||
| list-style: none; | ||
| display: flex; | ||
| position: relative; | ||
|
|
||
| &::after{ | ||
| content: ''; | ||
| width: 100%; | ||
| height: 2px; | ||
| position: absolute; | ||
| left: 0; | ||
| bottom: 0; | ||
| background-color: $light20; | ||
| z-index: 0; | ||
| } | ||
| } | ||
|
|
||
| // &__list-item{ | ||
|
|
||
| // } | ||
|
|
||
| &__link{ | ||
| @include nsw-spacing(padding, sm md); | ||
| @include font-stack; | ||
| display: block; | ||
| position: relative; | ||
| text-decoration: none; | ||
| color: $dark80; | ||
| z-index: 2; | ||
|
|
||
| &:hover{ | ||
| @include nsw-hover; | ||
| } | ||
|
|
||
| &:focus{ | ||
| @include nsw-focus; | ||
| } | ||
|
|
||
| .is-selected &{ | ||
| @include font-stack('heading'); | ||
|
|
||
| &::after{ | ||
| content: ''; | ||
| position: absolute; | ||
| bottom: 0; | ||
| left: 0; | ||
| width: 100%; | ||
| height: 4px; | ||
| background-color: $nsw-primary-blue; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| &__content{ | ||
| @include nsw-spacing(padding, lg md); | ||
| border-bottom: solid 1px $light20; | ||
| } | ||
| } |
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 |
|---|---|---|
| @@ -1,4 +1,7 @@ | ||
| --- | ||
| title: Tab navigation [INCOMPLETE] | ||
| title: Tab navigation | ||
| model: tab-navigation.json | ||
| --- | ||
| {{>_tab-navigation}} | ||
| <div class="nsw-container"> | ||
| {{>_tab-navigation model}} | ||
| </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,50 @@ | ||
| import { uniqueId } from '../../global/scripts/helpers/utilities' | ||
|
|
||
| function Tabs(element) { | ||
| this.tab = element | ||
| this.tabList = element.querySelector('ul') | ||
| this.tabItems = this.tabList.querySelectorAll('li') | ||
| this.tabContents = [] | ||
| this.selectedTab = null | ||
| this.showHideEvent = (e) => this.showHide(e) | ||
| } | ||
|
|
||
| Tabs.prototype.init = function init() { | ||
| this.setUpDom() | ||
| // this.controls() | ||
| } | ||
|
|
||
| Tabs.prototype.setUpDom = function setUpDom() { | ||
| this.tab.classList.add('is-ready') | ||
| this.tabList.setAttribute('role', 'tablist') | ||
| this.tabItems.forEach((item, index) => { | ||
| const itemElem = item | ||
| const itemLink = item.querySelector('a') | ||
| const content = this.tab.querySelector(itemLink.hash) | ||
| const uID = uniqueId('accordion') | ||
| item.classList.toggle('is-selected', index === 0) | ||
| itemElem.setAttribute('role', 'presentation') | ||
| itemLink.setAttribute('role', 'tab') | ||
| itemLink.setAttribute('id', uID) | ||
| itemLink.setAttribute('tabindex', '-1') | ||
| itemLink.setAttribute('aria-selected', index === 0) | ||
| if (index === 0) this.selectedTab = itemLink | ||
| content.setAttribute('role', 'tabpanel') | ||
| content.setAttribute('role', 'tabpanel') | ||
| content.setAttribute('aria-labelledBy', uID) | ||
| content.setAttribute('tabindex', '-1') | ||
| content.hidden = index !== 0 | ||
| }) | ||
| } | ||
|
|
||
| Tabs.prototype.changeTabs = function changeTabs(e) { | ||
| const clickedTab = e.currentTarget | ||
| clickedTab.focus() | ||
| clickedTab.removeAttrubute('tabindex') | ||
| clickedTab.setAttribute('aria-selected', true) | ||
| this.selectedTab.removeAttrubute('aria-selected') | ||
| this.selectedTab.setAttribute('tabindex', '-1') | ||
| } | ||
|
|
||
|
|
||
| export default Tabs |
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,19 @@ | ||
| { | ||
| "tabitems": [ | ||
| { | ||
| "title": "New and existing homes", | ||
| "urlHash": "section1", | ||
| "content": "<h2>New and existing homes</h2><p>As a first home buyer, you may be eligible for a <a href='https://www.revenue.nsw.gov.au/taxes-duties-levies-royalties/transfer-duty'>transfer duty</a> concession or exemption.</p><ul><li>If your home is valued at less than $650,000, you can apply for a full exemption so that you don’t have to pay transfer duty.</li><li>If the value of your home is between $650,000 and $800,000, you can apply for a concessional rate of transfer duty. The amount you’ll have to pay will be based on the value of your home.</li></ul>" | ||
| }, | ||
| { | ||
| "title": "Vacant land", | ||
| "urlHash": "section2", | ||
| "content": "<h2>Vacant land</h2> <p>The FHBAS applies to vacant land on which you plan to build your home.</p><ul> <li>You won’t pay any <a href='https://www.revenue.nsw.gov.au/taxes-duties-levies-royalties/transfer-duty'>transfer duty</a> if your land is valued at less than $350,000.</li><li>For land valued between $350,000 and $450,000, you’ll receive a concessional rate.</li></ul>" | ||
| }, | ||
| { | ||
| "title": "Knockdown rebuild", | ||
| "urlHash": "section3", | ||
| "content": " <h2>Knockdown rebuild</h2> <p>If you’re like many Sydney homeowners, you wish you had a more spacious and luxurious home. The problem is, you don’t want to give up your prized location!<br/>KnockDown Rebuild by Metricon gives you the best of both worlds.</p><p>You can have a gorgeous, modern home with plenty of space for your family – without giving up the location you love. All you have to do is demolish your existing dwelling and replace it with your dream Metricon home.</p>" | ||
| } | ||
| ] | ||
| } |
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