Skip to content

Commit

Permalink
feat: details docs (#535)
Browse files Browse the repository at this point in the history 
* Update details component and docs.

* Add js example to details.

* Updated some minor issues

Co-authored-by: Dayle Salmon <[email protected]>
  • Loading branch information
@catiarodriguescosta
catiarodriguescosta and Dayle Salmon authored Dec 16, 2020
1 parent fbfaec0 commit e08cb09
Show file tree
Hide file tree
Showing 8 changed files with 363 additions and 260 deletions.
23 changes: 18 additions & 5 deletions src/wmnds/components/details/_details.njk
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,26 @@
{# Imports #}
{% from "wmnds/components/icon/_icon.njk" import wmndsIcon %}
{# Params #}
{% set summary = params.summary or "Type something"%}
{% set content = params.content or "Type something"%}
{% set isOpen = true if params.isOpen else false %}
{% set headingText = params.headingText if params.headingText else "Detail heading" %}
{% set headingHTML = params.headingHTML if params.headingHTML else null %}
{% set contentText = params.contentText if params.contentText else "Lorem ipsum dolar sit..." %}
{% set contentHTML = params.contentHTML if params.contentHTML else null %}

<details class="wmnds-details" {%- if params.expanded %} open="true" {%- endif -%}>
<summary class="wmnds-link">{{summary}}</summary>
<details class="wmnds-details" {%- if isOpen == true %} open="true" {%- endif -%}>
<summary class="wmnds-link">
{% if headingHTML -%}
{{headingHTML | safe}}
{%- else -%}
{{headingText}}
{%- endif %}
</summary>
<div class="wmnds-details__content">
<p>{{content}}</p>
{% if contentHTML %}
{{contentHTML | safe}}
{% else %}
<p>{{contentText}}</p>
{% endif %}
</div>
</details>
{% endmacro %}
222 changes: 222 additions & 0 deletions src/wmnds/components/details/_example.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,222 @@
/*
Details Element Polyfill 2.4.0
Copyright © 2019 Javan Makhmali
*/
/* eslint-disable */

(function () {
'use strict';
var element = document.createElement('details');
var elementIsNative =
typeof HTMLDetailsElement != 'undefined' && element instanceof HTMLDetailsElement;
var support = {
open: 'open' in element || elementIsNative,
toggle: 'ontoggle' in element
};
var styles =
'\ndetails, summary {\n display: block;\n}\ndetails:not([open]) > *:not(summary) {\n display: none;\n}\nsummary::before {\n content: "►";\n padding-right: 0.3rem;\n font-size: 0.6rem;\n cursor: default;\n}\n[open] > summary::before {\n content: "▼";\n}\n';
var _ref = [],
forEach = _ref.forEach,
slice = _ref.slice;
if (!support.open) {
polyfillStyles();
polyfillProperties();
polyfillToggle();
polyfillAccessibility();
}
if (support.open && !support.toggle) {
polyfillToggleEvent();
}
function polyfillStyles() {
document.head.insertAdjacentHTML('afterbegin', '<style>' + styles + '</style>');
}
function polyfillProperties() {
var prototype = document.createElement('details').constructor.prototype;
var setAttribute = prototype.setAttribute,
removeAttribute = prototype.removeAttribute;
var open = Object.getOwnPropertyDescriptor(prototype, 'open');
Object.defineProperties(prototype, {
open: {
get: function get() {
if (this.tagName == 'DETAILS') {
return this.hasAttribute('open');
} else {
if (open && open.get) {
return open.get.call(this);
}
}
},
set: function set(value) {
if (this.tagName == 'DETAILS') {
return value ? this.setAttribute('open', '') : this.removeAttribute('open');
} else {
if (open && open.set) {
return open.set.call(this, value);
}
}
}
},
setAttribute: {
value: function value(name, _value) {
var _this = this;
var call = function call() {
return setAttribute.call(_this, name, _value);
};
if (name == 'open' && this.tagName == 'DETAILS') {
var wasOpen = this.hasAttribute('open');
var result = call();
if (!wasOpen) {
var summary = this.querySelector('summary');
if (summary) summary.setAttribute('aria-expanded', true);
triggerToggle(this);
}
return result;
}
return call();
}
},
removeAttribute: {
value: function value(name) {
var _this2 = this;
var call = function call() {
return removeAttribute.call(_this2, name);
};
if (name == 'open' && this.tagName == 'DETAILS') {
var wasOpen = this.hasAttribute('open');
var result = call();
if (wasOpen) {
var summary = this.querySelector('summary');
if (summary) summary.setAttribute('aria-expanded', false);
triggerToggle(this);
}
return result;
}
return call();
}
}
});
}
function polyfillToggle() {
onTogglingTrigger(function (element) {
element.hasAttribute('open')
? element.removeAttribute('open')
: element.setAttribute('open', '');
});
}
function polyfillToggleEvent() {
if (window.MutationObserver) {
new MutationObserver(function (mutations) {
forEach.call(mutations, function (mutation) {
var target = mutation.target,
attributeName = mutation.attributeName;
if (target.tagName == 'DETAILS' && attributeName == 'open') {
triggerToggle(target);
}
});
}).observe(document.documentElement, {
attributes: true,
subtree: true
});
} else {
onTogglingTrigger(function (element) {
var wasOpen = element.getAttribute('open');
setTimeout(function () {
var isOpen = element.getAttribute('open');
if (wasOpen != isOpen) {
triggerToggle(element);
}
}, 1);
});
}
}
function polyfillAccessibility() {
setAccessibilityAttributes(document);
if (window.MutationObserver) {
new MutationObserver(function (mutations) {
forEach.call(mutations, function (mutation) {
forEach.call(mutation.addedNodes, setAccessibilityAttributes);
});
}).observe(document.documentElement, {
subtree: true,
childList: true
});
} else {
document.addEventListener('DOMNodeInserted', function (event) {
setAccessibilityAttributes(event.target);
});
}
}
function setAccessibilityAttributes(root) {
findElementsWithTagName(root, 'SUMMARY').forEach(function (summary) {
var details = findClosestElementWithTagName(summary, 'DETAILS');
summary.setAttribute('aria-expanded', details.hasAttribute('open'));
if (!summary.hasAttribute('tabindex')) summary.setAttribute('tabindex', '0');
if (!summary.hasAttribute('role')) summary.setAttribute('role', 'button');
});
}
function eventIsSignificant(event) {
return !(
event.defaultPrevented ||
event.ctrlKey ||
event.metaKey ||
event.shiftKey ||
event.target.isContentEditable
);
}
function onTogglingTrigger(callback) {
addEventListener(
'click',
function (event) {
if (eventIsSignificant(event)) {
if (event.which <= 1) {
var element = findClosestElementWithTagName(event.target, 'SUMMARY');
if (element && element.parentNode && element.parentNode.tagName == 'DETAILS') {
callback(element.parentNode);
}
}
}
},
false
);
addEventListener(
'keydown',
function (event) {
if (eventIsSignificant(event)) {
if (event.keyCode == 13 || event.keyCode == 32) {
var element = findClosestElementWithTagName(event.target, 'SUMMARY');
if (element && element.parentNode && element.parentNode.tagName == 'DETAILS') {
callback(element.parentNode);
event.preventDefault();
}
}
}
},
false
);
}
function triggerToggle(element) {
var event = document.createEvent('Event');
event.initEvent('toggle', false, false);
element.dispatchEvent(event);
}
function findElementsWithTagName(root, tagName) {
return (root.tagName == tagName ? [root] : []).concat(
typeof root.getElementsByTagName == 'function'
? slice.call(root.getElementsByTagName(tagName))
: []
);
}
function findClosestElementWithTagName(element, tagName) {
if (typeof element.closest == 'function') {
return element.closest(tagName);
} else {
while (element) {
if (element.tagName == tagName) {
return element;
} else {
element = element.parentNode;
}
}
}
}
})();
14 changes: 14 additions & 0 deletions src/wmnds/components/details/_example.njk
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
{% raw %}
{% from "wmnds/components/details/_details.njk" import wmndsDetails %}
{{
wmndsDetails({
headingText: "Detail heading",
headingHTML: null,
contentText: null,
contentHTML: "<p><strong>Some random subtitle</strong></p>
<p>Lorem ipsum dolor sit...</p>",
isOpen: false
})
}}
{% endraw %}
29 changes: 29 additions & 0 deletions src/wmnds/components/details/_properties.njk.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
{
"wmndsDetailsProps": [
{
"name": "headingText",
"type": "string",
"description": "<strong>Required.</strong> Text content for heading line. If <code class='wmnds-website-inline-code'>headingHTML</code> is supplied, this is ignored."
},
{
"name": "headingHTML",
"type": "string",
"description": "<strong>Required.</strong> HTML content for heading line."
},
{
"name": "contentText",
"type": "string",
"description": "<strong>Required.</strong> The text content of each section, which is hidden when the section is closed. If <code class='wmnds-website-inline-code'>contentHTML</code> is supplied, this is ignored."
},
{
"name": "contentHTML",
"type": "string",
"description": "<strong>Required.</strong> The HTML content of each section, which is hidden when the section is closed."
},
{
"name": "isOpen",
"type": "boolean",
"description": "If true, details will be expanded upon initial load. Defaults to <code class='wmnds-website-inline-code'>false</code>."
}
]
}
Loading

0 comments on commit e08cb09

Please sign in to comment.