@ilo-org/twig 1.7.2 → 1.7.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/callout/callout.behavior.js +1 -1
- package/dist/components/callout/callout.twig +9 -11
- package/dist/styles/components/callout.css +1 -1
- package/dist/styles/global.css.map +1 -1
- package/dist/styles/index.css +1 -1
- package/dist/styles/index.css.map +1 -1
- package/dist/styles/monorepo.css +1 -1
- package/dist/styles/monorepo.css.map +1 -1
- package/package.json +3 -3
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
|
|
4
4
|
const d={ANIMATIONEND:"animationend",BEFOREUNLOAD:"beforeunload",BLUR:"blur",CHANGE:"change",CLEAR_FILTERS:"clearfilters",CLICK:"click",CUSTOM_EVENT:"customevent",DISPLAY_SUBHEADING:"displaysubheading",DROPDOWN_CHANGED:"dropdownchanged",FORM_ERROR:"formerror",FORM_SUCCESS:"formsuccess",FOCUS:"focus",HEADER_HIDING:"header-hiding",INDEX_CHANGED:"indexChanged",INPUT:"input",ITEMSLOADING:"itemsloading",ITEMSLOADED:"itemsloaded",KEY_DOWN:"keydown",MOUSEMOVE:"mousemove",MOUSEOUT:"mouseout",MOUSEOVER:"mouseover",PAGESHOW:"pageshow",PAUSE_VIDEO:"pausevideo",RENDERED:"rendered",REQUEST_MADE:"requestmade",RESIZE:"resize",RESULTS_RETURNED:"resultsreturnd",SCROLL:"scroll",SIMULATED_CLICK:"simulated-click",SHOW_HIDE:"showhide",SUBMIT:"submit",TOUCH_END:"touchend",TOUCH_START:"touchstart",TRANSITIONEND:"transitionend",TWEET_LOADED:"tweetLoaded",UPDATE_POST_COUNT:"updatepostcount",UPDATE_IN_VIEWPORT_MODULES:"updateinviewportmodules",UPDATE_SEARCH_WITH_NEW_ITEMS:"updatesearchwithnewitems",UPDATE_SETTINGS:"updatesettings",WHEEL:"wheel"};
|
|
5
5
|
|
|
6
|
-
class Callout{constructor(element){this.element=element;this.toggleLabel="";this.init();}init(){this.cacheDomReferences().setupHandlers().enable();if(!this.toggleOpen&&this.toggleCollapsible){this.calcHeight();}return this}cacheDomReferences(){this.toggle=this.element.querySelector(".ilo--callout--toggle");this.toggleOpen=this.element.classList.value.includes("callout--open");this.toggleCollapsible=this.element.classList.value.includes("callout--collapse");if(this.toggle){this.toggleLabel=this.toggle.querySelector(".ilo--callout--button-text");this.toggleLabelOpen=this.toggle.getAttribute("data-open");this.toggleLabelClosed=this.toggle.getAttribute("data-closed");}this.button=this.element.querySelector(".ilo--button");return this}setupHandlers(){this.onToggle=this.handleToggle.bind(this);this.onClick=this.handleClick.bind(this);return this}enable(){if(this.toggle){this.toggle.addEventListener(d.CLICK,this.onToggle);}if(this.button){this.button.addEventListener(d.CLICK,this.onClick);}return this}calcHeight(){this.header=this.element.querySelector('[class*="--header"]');this.height=this.header.offsetHeight;this.element.style.maxHeight=`${this.height+25}px`;return this}handleClick(){return this}handleToggle(e){e.preventDefault();this.toggleOpen=!this.toggleOpen;const label=this.toggleOpen?this.toggleLabelOpen:this.toggleLabelClosed;this.element.classList.toggle("ilo--
|
|
6
|
+
class Callout{constructor(element){this.element=element;this.toggleLabel="";this.init();}init(){this.cacheDomReferences().setupHandlers().enable();if(!this.toggleOpen&&this.toggleCollapsible){this.calcHeight();}return this}cacheDomReferences(){this.toggle=this.element.querySelector(".ilo--callout--toggle");this.toggleOpen=this.element.classList.value.includes("callout--open");this.toggleCollapsible=this.element.classList.value.includes("callout--collapse");if(this.toggle){this.toggleLabel=this.toggle.querySelector(".ilo--callout--button-text");this.toggleLabelOpen=this.toggle.getAttribute("data-open");this.toggleLabelClosed=this.toggle.getAttribute("data-closed");}this.button=this.element.querySelector(".ilo--button");return this}setupHandlers(){this.onToggle=this.handleToggle.bind(this);this.onClick=this.handleClick.bind(this);return this}enable(){if(this.toggle){this.toggle.addEventListener(d.CLICK,this.onToggle);}if(this.button){this.button.addEventListener(d.CLICK,this.onClick);}return this}calcHeight(){this.header=this.element.querySelector('[class*="--header"]');this.height=this.header.offsetHeight;this.element.style.maxHeight=`${this.height+25}px`;return this}handleClick(){return this}handleToggle(e){e.preventDefault();this.toggleOpen=!this.toggleOpen;const label=this.toggleOpen?this.toggleLabelOpen:this.toggleLabelClosed;this.element.classList.toggle("ilo--callout__open");this.toggleLabel.innerText=label;return this}}
|
|
7
7
|
|
|
8
8
|
Drupal.behaviors.callout={attach(){Array.prototype.forEach.call(document.querySelectorAll(`[data-loadcomponent="Callout"]`),element=>{if(!element.dataset.jsProcessed){new Callout(element);element.dataset.jsProcessed=true;}});}};
|
|
9
9
|
|
|
@@ -1,13 +1,11 @@
|
|
|
1
|
-
{#
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
<
|
|
5
|
-
<div class="ilo--callout__sidebar">
|
|
6
|
-
<span class="ilo--callout--icon icon icon__{{alert}}"></span>
|
|
1
|
+
{# callout.twig #}
|
|
2
|
+
<div class="ilo--callout ilo--callout__{{alert}} {% if isCollapsible|boolval and isOpen|boolval %} ilo--callout__open {% endif %} {% if isCollapsible|boolval %} ilo--callout__collapse {% endif %}" data-loadcomponent="Callout">
|
|
3
|
+
<div class="ilo--callout--sidebar">
|
|
4
|
+
<span class="ilo--callout--icon ilo--callout--icon__alert__{{alert}}"></span>
|
|
7
5
|
</div>
|
|
8
|
-
<div class="ilo--
|
|
9
|
-
<div class="ilo--
|
|
10
|
-
<h5 class="ilo--
|
|
6
|
+
<div class="ilo--callout--content">
|
|
7
|
+
<div class="ilo--callout--header">
|
|
8
|
+
<h5 class="ilo--callout--title">{{ title }}</h5>
|
|
11
9
|
{% if isCollapsible|boolval %}
|
|
12
10
|
<button class="ilo--callout--toggle" type="button" data-open="{{ toggleOpenLabel }}" data-closed="{{ toggleClosedLabel }}">
|
|
13
11
|
<span class="ilo--callout--button-text">
|
|
@@ -21,9 +19,9 @@
|
|
|
21
19
|
</button>
|
|
22
20
|
{% endif %}
|
|
23
21
|
</div>
|
|
24
|
-
<p class="ilo--
|
|
22
|
+
<p class="ilo--callout--description">{{ content }}</p>
|
|
25
23
|
{% if button %}
|
|
26
|
-
<div class="ilo--
|
|
24
|
+
<div class="ilo--callout--footer">
|
|
27
25
|
{% include '@components/button/button.twig' with {
|
|
28
26
|
label: button.label,
|
|
29
27
|
url: button.url,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.ilo--callout{display:flex;transition:max-height 225ms ease-out}.ilo--
|
|
1
|
+
.ilo--callout{display:flex;transition:max-height 225ms ease-out}.ilo--callout__collapse{max-height:3.4297963558rem;overflow:hidden}.ilo--callout__open{max-height:16.077170418rem;overflow:hidden}.ilo--callout__open .ilo--callout--toggle--icon{transform:translateY(-50%) rotate(180deg)}.ilo--callout__error{background:var(--ilo-color-red-ramp)}.ilo--callout__error .ilo--callout--sidebar{background:var(--ilo-color-red)}.ilo--callout__info{background:var(--ilo-color-blue-light)}.ilo--callout__info .ilo--callout--sidebar{background:var(--ilo-color-blue)}.ilo--callout__success{background:var(--ilo-color-green-ramp)}.ilo--callout__success .ilo--callout--sidebar{background:var(--ilo-color-green)}.ilo--callout__warning{background:var(--ilo-color-yellow-ramp)}.ilo--callout__warning .ilo--callout--sidebar{background:var(--ilo-color-yellow)}.ilo--callout--sidebar{align-items:center;display:flex;flex-direction:column;padding:calc(var(--ilo-spacing-base)*5) calc(var(--ilo-spacing-base)*2);width:2.1436227224rem}.ilo--callout--sidebar .ilo--callout__icon{margin:calc(var(--ilo-spacing-base)*1)}.ilo--callout--content{color:var(--ilo-color-gray-charcoal);font-size:.7502679528rem;padding:calc(var(--ilo-spacing-base)*6);width:100%}.ilo--callout--header{display:flex;justify-content:space-between;padding-block-end:calc(var(--ilo-spacing-base)*3)}.ilo--callout--title{font-family:var(--ilo-fonts-display);font-size:var(--ilo-font-size-md);font-weight:var(--ilo-font-weight-medium);font-weight:700;letter-spacing:var(--ilo-letter-spacing-sm);line-height:var(--ilo-line-height-xlg)}.ilo--callout--description{font-weight:400}.ilo--callout--toggle{background:0 0;border:none;color:var(--ilo-color-blue-dark);cursor:pointer;font-family:var(--ilo-fonts-display);font-size:var(--ilo-font-size-md);font-weight:var(--ilo-font-weight-bold);font-weight:500;letter-spacing:var(--ilo-letter-spacing-sm);line-height:var(--ilo-line-height-xlg);padding-inline-end:calc(var(--ilo-spacing-base)*8);position:relative}.ilo--callout--toggle--icon{background-color:var(--ilo-color-blue-dark);background-position:100%;background-repeat:no-repeat;display:inline-block;height:24px;mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M20.884 8.884 12 17.768 3.116 8.884l1.768-1.768L12 14.232l7.116-7.116z' clip-rule='evenodd'/%3E%3C/svg%3E");-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M20.884 8.884 12 17.768 3.116 8.884l1.768-1.768L12 14.232l7.116-7.116z' clip-rule='evenodd'/%3E%3C/svg%3E");mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;position:absolute;right:0;top:11px;transform:translateY(-50%) rotate(0);transition:transform 225ms ease-out;width:24px}.ilo--callout--footer{padding-block-start:calc(var(--ilo-spacing-base)*5)}.ilo--callout--icon{background-repeat:no-repeat;background-size:contain;display:block;height:1.2861736334rem;width:1.2861736334rem}.ilo--callout--icon__alert__error{mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m1 15h-2v-2h2zm0-4h-2V7h2z'/%3E%3C/svg%3E");-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m1 15h-2v-2h2zm0-4h-2V7h2z'/%3E%3C/svg%3E")}.ilo--callout--icon__alert__error,.ilo--callout--icon__alert__info{background-color:var(--ilo-color-white);mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat}.ilo--callout--icon__alert__info{mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m0 15c-.55 0-1-.45-1-1v-4c0-.55.45-1 1-1s1 .45 1 1v4c0 .55-.45 1-1 1m1-8h-2V7h2z'/%3E%3C/svg%3E");-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m0 15c-.55 0-1-.45-1-1v-4c0-.55.45-1 1-1s1 .45 1 1v4c0 .55-.45 1-1 1m1-8h-2V7h2z'/%3E%3C/svg%3E")}.ilo--callout--icon__alert__success{mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10m-5.5-9.437 1.65-1.688 2.2 2.25 5.5-5.625 1.65 1.688-7.15 7.312z' clip-rule='evenodd'/%3E%3C/svg%3E");-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10m-5.5-9.437 1.65-1.688 2.2 2.25 5.5-5.625 1.65 1.688-7.15 7.312z' clip-rule='evenodd'/%3E%3C/svg%3E")}.ilo--callout--icon__alert__success,.ilo--callout--icon__alert__warning{background-color:var(--ilo-color-white);mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat}.ilo--callout--icon__alert__warning{mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 24 24'%3E%3Cpath d='M1 21h22L12 2zm12-3h-2v-2h2zm0-4h-2v-4h2z'/%3E%3C/svg%3E");-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 24 24'%3E%3Cpath d='M1 21h22L12 2zm12-3h-2v-2h2zm0-4h-2v-4h2z'/%3E%3C/svg%3E")}
|