Skip to content
This repository has been archived by the owner on May 2, 2023. It is now read-only.

Commit

Permalink
feat: implement inpage navigation - INNO-1555 (#104)
Browse files Browse the repository at this point in the history 
* INNO-1555 Inpage navigation + tests

* INNO-1555 improve html in story

* INNO-1555 refactor to reuse component + test updates

* INNO-1555 add to ec-components dependency list

* INNO-1555 remove non required changes, use correct modifier, set correct category

* INNO-1555 update tests
  • Loading branch information
@haringsrob @yhuard
haringsrob authored and yhuard committed Jun 25, 2019
1 parent 849cf4e commit 0955c00
Show file tree
Hide file tree
Showing 13 changed files with 580 additions and 0 deletions.
5 changes: 5 additions & 0 deletions src/ec/packages/ec-component-inpage-navigation/.npmignore
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
__snapshots__
docs
*.story.js
*.test.js
**/*.md
Empty file added src/ec/packages/ec-component-inpage-navigation/CHANGELOG.md
View file
Empty file.
1 change: 1 addition & 0 deletions src/ec/packages/ec-component-inpage-navigation/README.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
# ECL Twig - EC Inpage navigation
276 changes: 276 additions & 0 deletions src/ec/packages/ec-component-inpage-navigation/__snapshots__/inpage-navigation.test.js.snap
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,276 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`EC - Inpage navigation renders correctly 1`] = `
<nav
class="ecl-inpage-navigation"
data-ecl-inpage-navigation="true"
>
<div
class="ecl-inpage-navigation__title"
>
Page contents
</div>
<div
class="ecl-inpage-navigation__body"
>
<button
aria-controls="ecl-inpage-navigation-list"
aria-expanded="false"
class="ecl-inpage-navigation__trigger"
data-ecl-inpage-navigation-trigger="true"
id="ecl-inpage-navigation-trigger"
type="button"
>
<span
class="ecl-inpage-navigation__trigger-current"
data-ecl-inpage-navigation-trigger-current="true"
/>
<svg
aria-hidden="true"
class="ecl-icon ecl-icon--s ecl-icon--rotate-180 ecl-inpage-navigation__trigger-icon"
focusable="false"
>
<use
xlink:href="#ui--corner-arrow"
/>
</svg>
</button>
<ul
aria-labelledby="ecl-inpage-navigation-trigger"
class="ecl-inpage-navigation__list"
data-ecl-inpage-navigation-list="true"
hidden=""
id="ecl-inpage-navigation-list"
>
<li
class="ecl-inpage-navigation__item"
>
<a
class="ecl-link ecl-link--standalone ecl-inpage-navigation__link"
data-ecl-inpage-navigation-link="true"
href="#inline-nav-1"
>
Heading 1
</a>
</li>
<li
class="ecl-inpage-navigation__item"
>
<a
class="ecl-link ecl-link--standalone ecl-inpage-navigation__link"
data-ecl-inpage-navigation-link="true"
href="#inline-nav-2"
>
Heading 2
</a>
</li>
<li
class="ecl-inpage-navigation__item"
>
<a
class="ecl-link ecl-link--standalone ecl-inpage-navigation__link"
data-ecl-inpage-navigation-link="true"
href="#inline-nav-3"
>
Heading 3
</a>
</li>
<li
class="ecl-inpage-navigation__item"
>
<a
class="ecl-link ecl-link--standalone ecl-inpage-navigation__link"
data-ecl-inpage-navigation-link="true"
href="#inline-nav-4"
>
Heading 4
</a>
</li>
</ul>
</div>
</nav>
`;

exports[`EC - Inpage navigation renders correctly with extra attributes 1`] = `
<nav
class="ecl-inpage-navigation"
data-ecl-inpage-navigation="true"
data-test="data-test-value"
data-test-1="data-test-value-1"
>
<div
class="ecl-inpage-navigation__title"
>
Page contents
</div>
<div
class="ecl-inpage-navigation__body"
>
<button
aria-controls="ecl-inpage-navigation-list"
aria-expanded="false"
class="ecl-inpage-navigation__trigger"
data-ecl-inpage-navigation-trigger="true"
id="ecl-inpage-navigation-trigger"
type="button"
>
<span
class="ecl-inpage-navigation__trigger-current"
data-ecl-inpage-navigation-trigger-current="true"
/>
<svg
aria-hidden="true"
class="ecl-icon ecl-icon--s ecl-icon--rotate-180 ecl-inpage-navigation__trigger-icon"
focusable="false"
>
<use
xlink:href="#ui--corner-arrow"
/>
</svg>
</button>
<ul
aria-labelledby="ecl-inpage-navigation-trigger"
class="ecl-inpage-navigation__list"
data-ecl-inpage-navigation-list="true"
hidden=""
id="ecl-inpage-navigation-list"
>
<li
class="ecl-inpage-navigation__item"
>
<a
class="ecl-link ecl-link--standalone ecl-inpage-navigation__link"
data-ecl-inpage-navigation-link="true"
href="#inline-nav-1"
>
Heading 1
</a>
</li>
<li
class="ecl-inpage-navigation__item"
>
<a
class="ecl-link ecl-link--standalone ecl-inpage-navigation__link"
data-ecl-inpage-navigation-link="true"
href="#inline-nav-2"
>
Heading 2
</a>
</li>
<li
class="ecl-inpage-navigation__item"
>
<a
class="ecl-link ecl-link--standalone ecl-inpage-navigation__link"
data-ecl-inpage-navigation-link="true"
href="#inline-nav-3"
>
Heading 3
</a>
</li>
<li
class="ecl-inpage-navigation__item"
>
<a
class="ecl-link ecl-link--standalone ecl-inpage-navigation__link"
data-ecl-inpage-navigation-link="true"
href="#inline-nav-4"
>
Heading 4
</a>
</li>
</ul>
</div>
</nav>
`;

exports[`EC - Inpage navigation renders correctly with extra class names 1`] = `
<nav
class="ecl-inpage-navigation custom-class custom-class--test"
data-ecl-inpage-navigation="true"
>
<div
class="ecl-inpage-navigation__title"
>
Page contents
</div>
<div
class="ecl-inpage-navigation__body"
>
<button
aria-controls="ecl-inpage-navigation-list"
aria-expanded="false"
class="ecl-inpage-navigation__trigger"
data-ecl-inpage-navigation-trigger="true"
id="ecl-inpage-navigation-trigger"
type="button"
>
<span
class="ecl-inpage-navigation__trigger-current"
data-ecl-inpage-navigation-trigger-current="true"
/>
<svg
aria-hidden="true"
class="ecl-icon ecl-icon--s ecl-icon--rotate-180 ecl-inpage-navigation__trigger-icon"
focusable="false"
>
<use
xlink:href="#ui--corner-arrow"
/>
</svg>
</button>
<ul
aria-labelledby="ecl-inpage-navigation-trigger"
class="ecl-inpage-navigation__list"
data-ecl-inpage-navigation-list="true"
hidden=""
id="ecl-inpage-navigation-list"
>
<li
class="ecl-inpage-navigation__item"
>
<a
class="ecl-link ecl-link--standalone ecl-inpage-navigation__link"
data-ecl-inpage-navigation-link="true"
href="#inline-nav-1"
>
Heading 1
</a>
</li>
<li
class="ecl-inpage-navigation__item"
>
<a
class="ecl-link ecl-link--standalone ecl-inpage-navigation__link"
data-ecl-inpage-navigation-link="true"
href="#inline-nav-2"
>
Heading 2
</a>
</li>
<li
class="ecl-inpage-navigation__item"
>
<a
class="ecl-link ecl-link--standalone ecl-inpage-navigation__link"
data-ecl-inpage-navigation-link="true"
href="#inline-nav-3"
>
Heading 3
</a>
</li>
<li
class="ecl-inpage-navigation__item"
>
<a
class="ecl-link ecl-link--standalone ecl-inpage-navigation__link"
data-ecl-inpage-navigation-link="true"
href="#inline-nav-4"
>
Heading 4
</a>
</li>
</ul>
</div>
</nav>
`;
4 changes: 4 additions & 0 deletions src/ec/packages/ec-component-inpage-navigation/demo/data.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
/* eslint-disable import/no-extraneous-dependencies, no-param-reassign */
import specData from '@ecl/ec-specs-inpage-navigation/demo/data';

export default specData;
20 changes: 20 additions & 0 deletions src/ec/packages/ec-component-inpage-navigation/demo/page-filler.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
/* eslint-disable import/no-extraneous-dependencies, no-param-reassign */

import specData from '@ecl/ec-specs-inpage-navigation/demo/data';

const loremIpsum =
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus id orci blandit, sodales tellus ut, ultricies sem. Donec ipsum risus, dignissim sit amet felis eu, viverra tempor enim. Praesent lobortis arcu ut orci commodo pellentesque. Phasellus dignissim sit amet risus at congue. Nunc vitae sapien eget augue volutpat congue. Ut quis lectus ultrices, mattis nisl non, porttitor lorem. Suspendisse potenti. Morbi ultrices, nibh at interdum tincidunt, lacus orci vestibulum velit, et rhoncus lacus tellus id velit. Etiam sed erat sit amet mauris iaculis volutpat sollicitudin ac odio. Phasellus dignissim non metus non consequat. Nam eu vestibulum nunc.';

const adapter = initialData => {
const data = { items: [] };
Object.entries(initialData.links).forEach(([, value]) => {
data.items.push({
label: value.label,
hash: value.href.replace('#', ''),
content: loremIpsum,
});
});
return data;
};

export default adapter(specData);
46 changes: 46 additions & 0 deletions src/ec/packages/ec-component-inpage-navigation/docs/inpage-navigation.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
# ECL Twig - EC Inpage navigation

npm package: `@ecl-twig/ec-component-inpage-navigation`

```shell
npm install --save @ecl-twig/ec-component-inpage-navigation
```

## Inpage navigation

### Parameters

Parameters:

- "title" (string) (default: '')
- "links" (associative array) (default: predefined structure): format:
{
href: (string) (default: ''),
label: (string) (default: '')
}
- "extra_classes" (string) (default: '')
- "extra_attributes" (array) (default: []): format: [
{
"name" (string) (default: ''),
"value" (string) (default: '')
},
...
]

### Example:

<!-- prettier-ignore -->
```twig
{% include 'path/to/inpage-navigation.html.twig' with {
title: 'Inpage navigation',
links: [
{
href: '#heading1',
label: 'Heading 1',
},
...
],
...
]
} %}
```
Loading

0 comments on commit 0955c00

Please sign in to comment.