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

Feature/250 active tab by class #260

Merged
merged 2 commits into from
Jun 17, 2024
Merged

Feature/250 active tab by class #260

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
bd5a413
Initial code updates
sarah-storm May 9, 2024
4dc9f51
Update to allow setting default tab based on data attribute
sarah-storm Jun 12, 2024
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
8 changes: 8 additions & 0 deletions packages/tabs/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,14 @@ const [ instance ] = tabs(elements);
}
```

## Setting the active tab
```
On page load the active tab will be set by (in order of precedence):
1. The page hash. If the page hash in the address bar matches the ID of a panel, it will be activated on page load
2. The data-active-index attribute. If the tabs node found to have a <pre>data-active-index</pre> attribute, that tab will be activated on page load. This is a zero-based index.
3. The tab specified by the activeIndex in the settings. This is a zero-based index.
4. The first tab in the set.

## API

tabs() returns an array of instances. Each instance exposes the interface
Expand Down
68 changes: 67 additions & 1 deletion packages/tabs/__tests__/unit/utils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { getActiveIndexByHash } from '../../src/lib/utils';
import { getActiveIndexByHash, getActiveIndexOnLoad } from '../../src/lib/utils';

const init = () => {
document.body.innerHTML = `<div role="tablist" data-active-index="1">
Expand Down Expand Up @@ -63,3 +63,69 @@ describe(`Tabs > utils > getActiveIndexByHash`, () => {
});

});

const initWithAttribute = () => {
document.body.innerHTML = `<div role="tablist" data-active-index="2">
<nav class="tabs__nav">
<a id="tab-1" class="tabs__nav-link js-tabs__link" href="#panel-1" role="tab">Tab 1</a>
<a id="tab-2" class="tabs__nav-link js-tabs__link " href="#panel-2" role="tab">Tab 2</a>
<a id="tab-3" class="tabs__nav-link js-tabs__link" href="#panel-3" role="tab">Tab 3</a>
</nav>
<section id="panel-1" class="tabs__section" role="tabpanel">Panel 1</section>
<section id="panel-2" class="tabs__section" role="tabpanel">
<p>Panel 2</p>
<p><a href="/">Test link</a></p>
<p><a href="/">Test link</a></p>
</section>
<section id="panel-3" class="tabs__section" role="tabpanel">
<p>Panel 3</p>
<p><a href="/">Test link</a></p>
<p><a href="/">Test link</a></p>
</section>
</div>`;
};


describe(`Tabs > utils > getActiveIndexOnLoad`, () => {
beforeAll(initWithAttribute);

it('should use the data attribute if no hash is available', async () => {
delete global.window.location;
global.window = Object.create(window);
global.window.location = {
port: '123',
protocol: 'http:',
hostname: 'localhost',
hash: ''
};
const node = document.querySelector('[role="tablist"]');
const panels = [].slice.call(document.querySelectorAll('[role=tabpanel]'));
expect(getActiveIndexOnLoad(panels, node)).toEqual(2);
});

it('should return undefined if neither hash or attribute', async () => {
const node = document.querySelector('[role="tablist"]');
node.removeAttribute('data-active-index');
const panels = [].slice.call(document.querySelectorAll('[role=tabpanel]'));
expect(getActiveIndexOnLoad(panels, node)).toEqual(undefined);
});

it('should use the hash as priority if available', async () => {
const node = document.querySelector('[role="tablist"]');
node.setAttribute('data-active-index', "1");

delete global.window.location;
global.window = Object.create(window);
global.window.location = {
port: '123',
protocol: 'http:',
hostname: 'localhost',
hash: '#panel-3'
};

const panels = [].slice.call(document.querySelectorAll('[role=tabpanel]'));
expect(getActiveIndexOnLoad(panels, node)).toEqual(2);
});

});

6 changes: 3 additions & 3 deletions packages/tabs/example/src/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,13 +78,13 @@
</style>
</head>
<body>
<div class="tabs js-tabs">
<div class="tabs__tabslist" role="tablist">
<div class="tabs js-tabs" >
<div class="tabs__tabslist" role="tablist" data-active-index="2">
<a id="tab-1" class="tabs__tab js-tabs__link" href="#panel-1" role="tab">Tab 1</a>
<a id="tab-2" class="tabs__tab js-tabs__link" href="#panel-2" role="tab">Tab 2</a>
<a id="tab-3" class="tabs__tab js-tabs__link" href="#panel-3" role="tab">Tab 3</a>
</div>
<div id="panel-1" class="tabs__tabpanel" role="tabpanel">Panel 1</div>
<div id="panel-1" class="tabs__tabpanel" role="tabpanel" hidden>Panel 1</div>
<div id="panel-2" class="tabs__tabpanel" role="tabpanel" hidden>Panel 2</div>
<div id="panel-3" class="tabs__tabpanel" role="tabpanel" hidden>Panel 3</div>
</div>
Expand Down
6 changes: 3 additions & 3 deletions packages/tabs/src/lib/factory.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { createStore } from './store';
import { findTabsAndPanels, initUI, open } from './dom';
import { getActiveIndexByHash } from './utils';
import { getActiveIndexOnLoad } from './utils';

/*
* @param settings, Object, merged defaults + options passed in as instantiation config to module default
Expand All @@ -11,11 +11,11 @@ import { getActiveIndexByHash } from './utils';
export default ({ node, settings }) => {
const Store = createStore();
const { tabs, panels } = findTabsAndPanels(node, settings);
const activeIndex = getActiveIndexByHash(panels);
const activeIndex = getActiveIndexOnLoad(panels, node);
Store.dispatch({
settings,
node,
activeIndex: activeIndex !== undefined ? +activeIndex : +settings.activeIndex,
activeIndex: activeIndex !== undefined ? +activeIndex : +settings.activeIndex,
activeTabIndex: activeIndex !== undefined ? +activeIndex : +settings.activeIndex,
tabs,
panels,
Expand Down
4 changes: 4 additions & 0 deletions packages/tabs/src/lib/utils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,10 @@ export const getActiveIndexByHash = panels => {
}, undefined);
};

export const getActiveIndexOnLoad = (panels, node) => {
return (location.hash) ? getActiveIndexByHash(panels) : (node.getAttribute("data-active-index")) ? parseInt(node.getAttribute("data-active-index")) : undefined;
};

/*
* Converts a passed selector which can be of varying types into an array of DOM Objects
*
Expand Down
Loading