Skip to content

Commit 521a2b9

Browse files
mihir880mihir880
committed
added for Multiselect biocard, Accordian, CountrySite Header
1 parent f296101 commit 521a2b9

File tree

6 files changed

+91
-35
lines changed

6 files changed

+91
-35
lines changed

‎stories/Components/Forms/Dropdowns/Multiselect/MultiSelect.stories.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -101,7 +101,7 @@ export default {
101101
<li>Include the CSS and JS files listed below, as well as the component initializer script.</li>
102102
<li>If you choose the Checkbox variant, then include <code>checkbox.min.css</code>.</li>
103103
<li>If you choose the Radio button variant, then include <code>radio.min.css</code>.</li>
104-
<li>Initialize the multi-select by calling the <code>multiSelect()</code> function.</li>
104+
{/* <li>Initialize the multi-select by calling the <code>multiSelect()</code> function.</li> */}
105105
</ol>
106106

107107
<h3>CSS and JS References</h3>

‎stories/Components/Navigationcomponents/Mainnavigation/CountrySiteHeader/CountrySiteHeader.stories.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -231,7 +231,8 @@ export default {
231231
<h4>Default mega menu Usage:</h4>
232232
<ol>
233233
<li>Copy HTML from the HTML tab of canvas and also include the CSS and JS files listed below.</li>
234-
<li>Initialize the <code>navigationInitialize()</code>, <code>langSwitch()</code> functions in your JS file’s document ready, For example:</li>
234+
<li>Add the <code>data-undpds-component="country-site-header"</code> attribute to the header element.</li>
235+
{/* <li>Initialize the <code>navigationInitialize()</code>, <code>langSwitch()</code> functions in your JS file’s document ready, For example:</li> */}
235236
</ol>
236237

237238
<pre><code>

‎stories/Components/Navigationcomponents/Mainnavigation/CountrySiteHeader/CountrySiteHeaderDropdown.stories.js

+13-10
Original file line numberDiff line numberDiff line change
@@ -425,35 +425,38 @@ mobile nav container here ... <br />
425425

426426

427427
<h3>Usage:</h3>
428-
429-
<h4>Default Dropdown Usage:</h4>
430-
428+
<h4>Automatic Initialization (Recommended):</h4>
431429
<ol>
432-
<li>Copy HTML from the HTML tab of canvas and also include the css and Js files listed below.</li>
433-
<li>Initialize the <strong>navigationInitialize()</strong>, <strong>langSwitch()</strong> function in your js file’s document ready</li>
430+
<li>Copy HTML from the HTML tab of canvas.</li>
431+
<li>Add the <code>data-undpds-component="country-header"</code> attribute to the header element.</li>
432+
<li>If you want to enable overflow functionality, also add the <code>data-overflow="true"</code> attribute.</li>
433+
{/* <li>Add the <code>data-undpds-component="language-switcher"</code> attribute to any language switcher elements within the header.</li> */}
434+
<li>Include the CSS and JS files listed below, including the component initializer.</li>
435+
<li>The component will automatically initialize when the page loads.</li>
434436
</ol>
435437

436438
<h4>Dropdown menu Usage:</h4>
437439

438440
<ol>
439441
<li>Copy HTML from the HTML tab of canvas and also include the css and Js files listed below.</li>
440-
<li>Initialize the <strong>navigationInitialize()</strong>, <strong>navigationMultiLevelEdgeDetection()</strong>, and <strong>langSwitch()</strong> function in your js file’s document ready. For example:</li>
442+
<li>Add the <code>data-undpds-component="country-header"</code> attribute to the header element.</li>
443+
{/* <li>Initialize the <strong>navigationInitialize()</strong>, <strong>navigationMultiLevelEdgeDetection()</strong>, and <strong>langSwitch()</strong> function in your js file’s document ready. For example:</li> */}
441444
</ol>
442445

443-
<pre>
446+
{/* <pre>
444447
<code>
445448
$(document).ready(function() &#123; <br />
446449
&emsp;&emsp;navigationInitialize(); <br />
447450
&emsp;&emsp;navigationMultiLevelEdgeDetection(); <br />
448451
&#125;);
449452
</code>
450-
</pre>
453+
</pre> */}
451454

452-
<h4>Overflow Usage:</h4>
455+
{/* <h4>Overflow Usage:</h4>
453456
454457
<ol>
455458
<li>In addition to the steps above, Initialize the <strong>navigationOverFlow()</strong> function in your js file’s document ready.</li>
456-
</ol>
459+
</ol> */}
457460

458461

459462
<h3>CSS and JS References</h3>

‎stories/Components/UIcomponents/Accordion/Accordion.stories.js

+15
Original file line numberDiff line numberDiff line change
@@ -144,6 +144,21 @@ export default {
144144
</a>{" "}
145145
and then use following code:
146146
</p>
147+
<h4>Initialization</h4>
148+
<p>There are two ways to initialize the accordion component:</p>
149+
150+
<h5>Method 1: Automatic Initialization (Recommended)</h5>
151+
<p>
152+
Add the <code>data-undpds-component="accordion"</code> attribute to the accordion element and include the component initializer script:
153+
</p>
154+
<pre>
155+
<code>
156+
&lt;script src="https://cdn.jsdelivr.net/npm/@undp/design-system/docs/js/ext-comp-loader.js"&gt;&lt;/script&gt;
157+
</code>
158+
</pre>
159+
160+
<h5>Method 2: Manual Initialization</h5>
161+
<p>Call the <code>accordion()</code> function in your JavaScript:</p>
147162
<pre>
148163
<code>
149164
$(document).ready(function() &#123; <br />

‎stories/Components/UIcomponents/Cards/BioCard/BioCard.stories.js

+10-2
Original file line numberDiff line numberDiff line change
@@ -143,10 +143,18 @@ export default {
143143
<ul>
144144
<li>Choose the size either large or medium from the control tab on canvas.</li>
145145
<li>Copy the HTML from the HTML tab in the canvas and include the CSS and JS files listed below.</li>
146+
<li>Add the <code>data-undpds-component="modal"</code> attribute to the container element to enable automatic initialization.</li>
146147
<li>If you want left-right animation, add <code>data-viewport=”true”</code> attribute to your HTML element and include <code>viewport.min.js</code> file.</li>
147-
<li>If you want to add a modal on click, include <code>modal.min.js</code> and initialize <code>modal();</code> on load.</li>
148+
<li>If you want to add a modal on click, include <code>modal.min.js</code>. </li>
148149
</ul>
149-
150+
<h4>Example:</h4>
151+
<pre>
152+
<code>
153+
&lt;div class="grid-x" data-undpds-component="modal"&gt;
154+
&lt;!-- BioCard content --&gt;
155+
&lt;/div&gt;
156+
</code>
157+
</pre>
150158
<h3>CSS and JS References</h3>
151159

152160
<h4>CSS:</h4>

‎stories/assets/js/ext-comp-loader.js

+50-21
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,15 @@
2121

2222
// Initialize based on component type
2323
switch (componentType) {
24+
case 'accordion':
25+
// Check if the accordion function exists in the global scope
26+
if (typeof accordion === 'function') {
27+
accordion();
28+
element.setAttribute('data-initialized', 'true');
29+
} else {
30+
console.warn('Accordion component requires accordion function. Make sure accordion.min.js is loaded.');
31+
}
32+
break;
2433
case 'sidebar':
2534
if (typeof sidebarNav === 'function' && typeof sidebarMenu === 'function') {
2635
sidebarNav();
@@ -47,37 +56,57 @@
4756
console.warn('Multi Select component requires multiSelect function');
4857
}
4958
break;
59+
case 'language-switcher':
60+
if (typeof langSwitch === 'function') {
61+
langSwitch();
62+
element.setAttribute('data-initialized', 'true');
63+
} else {
64+
console.warn('Language Switcher component requires langSwitch function');
65+
}
66+
break;
67+
5068
case 'country-header':
51-
if (typeof navigationInitialize === 'function' &&
52-
typeof langSwitch === 'function') {
69+
if (typeof navigationInitialize === 'function') {
70+
navigationInitialize();
71+
navigationOverFlow();
72+
73+
// Add edge detection for multi-level menus
74+
if (typeof navigationMultiLevelEdgeDetection === 'function') {
75+
navigationMultiLevelEdgeDetection();
76+
}
77+
element.setAttribute('data-initialized', 'true');
78+
} else {
79+
console.warn('Country Header requires navigationInitialize function');
80+
}
81+
break;
82+
case 'country-site-header':
83+
// Initialize functions based on the documented approach for external users
84+
if (typeof navigationInitialize === 'function') {
85+
// Call navigationInitialize without locale parameter as shown in documentation
5386
navigationInitialize();
5487

55-
// Initialize overflow if the element has overflow attribute
56-
if (element.hasAttribute('data-overflow') &&
57-
element.getAttribute('data-overflow') === 'true') {
58-
if (typeof navigationOverFlow === 'function') {
59-
navigationOverFlow();
60-
} else {
61-
console.warn('Country Header overflow requires navigationOverFlow function');
62-
}
88+
// Call navigationOverFlow if needed
89+
if (typeof navigationOverFlow === 'function') {
90+
navigationOverFlow();
6391
}
6492

65-
// Initialize multi-level edge detection
93+
// Call navigationMultiLevelEdgeDetection
6694
if (typeof navigationMultiLevelEdgeDetection === 'function') {
6795
navigationMultiLevelEdgeDetection();
68-
} else {
69-
console.warn('Country Header multi-level edge detection requires navigationMultiLevelEdgeDetection function');
70-
}
71-
72-
// Initialize language switcher
73-
if (typeof langSwitch === 'function') {
74-
langSwitch();
75-
console.log("inside langSwitch");
7696
}
7797

7898
element.setAttribute('data-initialized', 'true');
7999
} else {
80-
console.warn('Country Header component requires navigationInitialize and langSwitch functions');
100+
console.warn('CountrySiteHeader component requires navigationInitialize function');
101+
}
102+
break;
103+
case 'modal':
104+
// Initialize modal functionality
105+
if (typeof modal === 'function') {
106+
modal();
107+
element.setAttribute('data-initialized', 'true');
108+
} else {
109+
console.warn('Modal component requires modal function');
81110
}
82111
break;
83112
}
@@ -91,7 +120,7 @@
91120
initializeComponents();
92121
}
93122

94-
// Also run when the window loads (as a fallback)
123+
// Also run when the window loads (as a fallback) // wait until whole dom is loaded
95124
window.addEventListener('load', function() {
96125
// Check for any components that weren't initialized yet
97126
const uninitializedComponents = document.querySelectorAll('[data-undpds-component]:not([data-initialized])');

0 commit comments

Comments
 (0)