Skip to content

Commit f18925c

Browse files
mihir880mihir880
committed
added for carousel gallery and homepage hero
1 parent 521a2b9 commit f18925c

File tree

7 files changed

+252
-23
lines changed

7 files changed

+252
-23
lines changed

‎stories/Components/UIcomponents/Carousel/FixedSizeCarousel/FixedSizeCarousel.stories.js

+27-2
Original file line numberDiff line numberDiff line change
@@ -69,13 +69,38 @@ export default {
6969
<ul>
7070
<li>Copy HTML from the HTML tab of the canvas.</li>
7171
<li>Include Swiper library from <a href="https://swiperjs.com/get-started">here</a> in your HTML page.</li>
72-
<li>If you use fixed image size carousel, include <code>fluid-image-size-carousel.min.css</code> and initialize carousel by calling <code>swiper('.fixed-carousel', '.fixed-carousel__button-wrap');</code> functions.</li>
72+
<li>Include the CSS files listed below.</li>
73+
<li>Choose one of the following initialization methods:</li>
74+
{/* <li>If you use fixed image size carousel, include <code>fluid-image-size-carousel.min.css</code> and initialize carousel by calling <code>swiper('.fixed-carousel', '.fixed-carousel__button-wrap');</code> functions.</li>
7375
<li>If you use Fluid image size carousel, include <code>fixed-size-carousel.min.css</code> and initialize carousel by calling <code>swiper('.fluid-carousel', '.slide-content');</code> functions.</li>
7476
<li>If you use Image only carousel, include <code>image-only-carousel.min.css</code> and initialize the carousel by calling <code>swiper('.image-carousel', '.slider-slide');</code> functions.</li>
7577
<li>If you want to add left-right animation, add <code>data-viewport="true"</code> attribute to the HTML element you want to animate and include <code>viewport.min.js</code> file.</li>
76-
<li>Refer to <a href="https://github.com/undp/design-system/wiki/Swiper-documentation">this document</a> for Swiper integration & options.</li>
78+
<li>Refer to <a href="https://github.com/undp/design-system/wiki/Swiper-documentation">this document</a> for Swiper integration & options.</li> */}
79+
</ul>
80+
81+
<h4>Method 1: Automatic Initialization (Recommended)</h4>
82+
<ul>
83+
<li>Include the component initializer script:
84+
<code>&lt;script src="https://cdn.jsdelivr.net/npm/@undp/design-system/docs/js/ext-comp-loader.min.js"&gt;&lt;/script&gt;</code>
85+
</li>
86+
<li>Add the required data attributes to your carousel element:
87+
<code>data-undpds-component="swiper" data-selector=".fixed-carousel" data-arrows-selector=".fixed-carousel__button-wrap"</code>
88+
</li>
89+
<li>The carousel will initialize automatically when the page loads - no JavaScript calls required!</li>
7790
</ul>
7891

92+
<p>Additional options:</p>
93+
<ul>
94+
<li>If you want to add left-right animation, add <code>data-viewport="true"</code> attribute to the HTML element you want to animate and include <code>viewport.min.js</code> file.</li>
95+
<li>Refer to <a href="https://github.com/undp/design-system/wiki/Swiper-documentation">this document</a> for Swiper integration & options.</li>
96+
</ul>
97+
<h4>Method 2: Manual Initialization (Traditional)</h4>
98+
<ul>
99+
<li>Include <code>swiper.min.js</code> in your HTML.</li>
100+
<li>Call the initialization function directly in your JavaScript:
101+
<code>swiper('.fixed-carousel', '.fixed-carousel__button-wrap');</code>
102+
</li>
103+
</ul>
79104
<h3>CSS and JS References</h3>
80105

81106
<h4>CSS:</h4>

‎stories/Components/UIcomponents/Carousel/FluidImageSizeCarousel/FluidImageSizeCarousel.stories.js

+28-2
Original file line numberDiff line numberDiff line change
@@ -256,13 +256,39 @@ export default {
256256
<ul>
257257
<li>Copy HTML from the HTML tab of canvas.</li>
258258
<li>Include Swiper library from <a href="https://swiperjs.com/get-started">here</a> in your HTML page.</li>
259-
<li>If you use fixed image size carousel, include <code>fluid-image-size-carousel.min.css</code> and initialize carousel by calling <code>swiper('.fixed-carousel', '.fixed-carousel__button-wrap');</code> functions.</li>
259+
<li>Include the CSS files listed below.</li>
260+
<li>Choose one of the following initialization methods:</li>
261+
{/* <li>If you use fixed image size carousel, include <code>fluid-image-size-carousel.min.css</code> and initialize carousel by calling <code>swiper('.fixed-carousel', '.fixed-carousel__button-wrap');</code> functions.</li>
260262
<li>If you use Fluid image size carousel, include <code>fixed-size-carousel.min.css</code> and initialize carousel by calling <code>swiper('.fluid-carousel', '.slide-content');</code> functions.</li>
261263
<li>If you use Image only carousel, include <code>image-only-carousel.min.css</code> and initialize the carousel by calling <code>swiper('.image-carousel', '.slider-slide');</code> functions.</li>
262264
<li>If you want to add left-right animation, add <code>data-viewport="true"</code> attribute to the HTML element you want to animate and include <code>viewport.min.js</code> file.</li>
263-
<li>Refer to <a href="https://github.com/undp/design-system/wiki/Swiper-documentation">this document</a> for Swiper integration & options.</li>
265+
<li>Refer to <a href="https://github.com/undp/design-system/wiki/Swiper-documentation">this document</a> for Swiper integration & options.</li> */}
266+
</ul>
267+
268+
<h4>Method 1: Automatic Initialization (Recommended)</h4>
269+
<ul>
270+
<li>Include the component initializer script:
271+
<code>&lt;script src="https://cdn.jsdelivr.net/npm/@undp/design-system/docs/js/ext-comp-loader.min.js"&gt;&lt;/script&gt;</code>
272+
</li>
273+
<li>Add the required data attributes to your carousel element:
274+
<code>data-undpds-component="swiper" data-selector=".fluid-carousel" data-arrows-selector=".slide-content"</code>
275+
</li>
276+
<li>The carousel will initialize automatically when the page loads - no JavaScript calls required!</li>
264277
</ul>
265278

279+
280+
<h4>Method 2: Manual Initialization (Traditional)</h4>
281+
<ul>
282+
<li>Include <code>swiper.min.js</code> in your HTML.</li>
283+
<li>Call the initialization function directly in your JavaScript:
284+
<code>swiper('.fluid-carousel', '.slide-content');</code>
285+
</li>
286+
</ul>
287+
<p>Additional options:</p>
288+
<ul>
289+
<li>If you want to add left-right animation, add <code>data-viewport="true"</code> attribute to the HTML element you want to animate and include <code>viewport.min.js</code> file.</li>
290+
<li>Refer to <a href="https://github.com/undp/design-system/wiki/Swiper-documentation">this document</a> for Swiper integration & options.</li>
291+
</ul>
266292
<h3>CSS and JS References</h3>
267293

268294
<h4>CSS:</h4>

‎stories/Components/UIcomponents/Carousel/ImageOnlyCarousel/ImageOnlyCarousel.stories.js

+25-2
Original file line numberDiff line numberDiff line change
@@ -95,12 +95,35 @@ export default {
9595
<h3>Usage</h3>
9696
<p>Copy HTML from the HTML tab of canvas.</p>
9797
<p>Include Swiper library from here <a href="https://swiperjs.com/get-started">https://swiperjs.com/get-started</a> in your html page.</p>
98-
<p>If you use fixed image size carousel then include fluid-image-size-carousel.min.css and initialize carousel by calling swiper('.fixed-carousel', '.fixed-carousel__button-wrap'); functions</p>
98+
{/* <p>If you use fixed image size carousel then include fluid-image-size-carousel.min.css and initialize carousel by calling swiper('.fixed-carousel', '.fixed-carousel__button-wrap'); functions</p>
9999
<p>If you use Fluid image size carousel then include fixed-size-carousel.min.css and initialize carousel by calling swiper('.fluid-carousel', '.slide-content'); functions</p>
100100
<p>If you use Image only carousel then include image-only-carousel.min.css and initialize the carousel by calling swiper('.image-carousel', '.slider-slide'); functions.</p>
101101
<p>If you want to add left-right animation then add data-viewport=”true” attribute to the HTML element you want to animate and include viewport.min.js file.</p>
102-
<p>Refer <a href="https://github.com/undp/design-system/wiki/Swiper-documentation">this document</a> for Swiper integration & options</p>
102+
<p>Refer <a href="https://github.com/undp/design-system/wiki/Swiper-documentation">this document</a> for Swiper integration & options</p> */}
103+
104+
<h4>Method 1: Automatic Initialization (Recommended)</h4>
105+
<ul>
106+
<li>Include the component initializer script:
107+
<code>&lt;script src="https://cdn.jsdelivr.net/npm/@undp/design-system/docs/js/ext-comp-loader.min.js"&gt;&lt;/script&gt;</code>
108+
</li>
109+
<li>Add the required data attributes to your carousel element:
110+
<code>data-undpds-component="swiper" data-selector=".image-carousel" data-arrows-selector=".slider-slide"</code>
111+
</li>
112+
<li>The carousel will initialize automatically when the page loads - no JavaScript calls required!</li>
113+
</ul>
114+
<h4>Method 2: Manual Initialization (Traditional)</h4>
115+
<ul>
116+
<li>Include <code>swiper.min.js</code> in your HTML.</li>
117+
<li>Call the initialization function directly in your JavaScript:
118+
<code>swiper('.image-carousel', '.slider-slide');</code>
119+
</li>
120+
</ul>
103121

122+
<p>Additional options:</p>
123+
<ul>
124+
<li>If you want to add left-right animation, add <code>data-viewport="true"</code> attribute to the HTML element you want to animate and include <code>viewport.min.js</code> file.</li>
125+
<li>Refer to <a href="https://github.com/undp/design-system/wiki/Swiper-documentation">this document</a> for Swiper integration & options.</li>
126+
</ul>
104127
<h3>CSS and JS References</h3>
105128
<h4>CSS:</h4>
106129
<ul>

‎stories/Components/UIcomponents/Gallery/LightboxGallery/LightboxGallery.stories.js

+33-13
Original file line numberDiff line numberDiff line change
@@ -418,25 +418,40 @@ export default {
418418
<div>
419419
<h3>Usage:</h3>
420420

421-
<ul>
422-
<li>
423-
Copy HTML from the HTML tab of canvas and also include css and js
424-
files.
425-
</li>
426-
<li>
427-
Initialize lightbox gallery by calling lightboxGallery()
428-
function.
429-
</li>
430-
<li>Include below library files as well.</li>
431-
<li>
421+
422+
<ul>
423+
<li>Copy HTML from the HTML tab of the canvas.</li>
424+
<li>Include the CSS and JS files listed below.</li>
425+
<li>
432426
Refer{" "}
433427
<a href="https://github.com/undp/design-system/wiki/Swiper-documentation">
434428
this document
435429
</a>{" "}
436430
for Swiper integration & options
437431
</li>
438-
</ul>
439-
432+
<li>Choose one of the following initialization methods:</li>
433+
</ul>
434+
435+
436+
437+
<h4>Method 1: Automatic Initialization (Recommended)</h4>
438+
<ul>
439+
<li>Include the component initializer script:
440+
<code>&lt;script src="https://cdn.jsdelivr.net/npm/@undp/design-system/docs/js/ext-comp-loader.min.js"&gt;&lt;/script&gt;</code>
441+
</li>
442+
<li>Add the required data attribute to your lightbox gallery element:
443+
<code>data-undpds-component="lightbox-gallery"</code>
444+
</li>
445+
<li>The lightbox gallery will initialize automatically when the page loads - no JavaScript calls required!</li>
446+
</ul>
447+
<h4>Method 2: Manual Initialization (Traditional)</h4>
448+
<ul>
449+
<li>Include <code>lightbox-gallery.min.js</code> in your HTML.</li>
450+
<li>Call the initialization function directly in your JavaScript:
451+
<code>lightboxGallery();</code>
452+
</li>
453+
</ul>
454+
440455
<h3>CSS and JS References</h3>
441456

442457
<h4>CSS:</h4>
@@ -490,6 +505,11 @@ export default {
490505
lightbox-gallery.min.js
491506
</a>
492507
</li>
508+
<li>
509+
<a href="https://cdn.jsdelivr.net/npm/@undp/design-system/docs/js/ext-comp-loader.min.js">
510+
ext-comp-loader.min.js
511+
</a> (for automatic initialization)
512+
</li>
493513
</ul>
494514

495515
<h3>Interactions</h3>

‎stories/Components/UIcomponents/Gallery/ParallaxGallery/ParallaxGallery.stories.js

+22-1
Original file line numberDiff line numberDiff line change
@@ -165,9 +165,30 @@ export default {
165165

166166
<ul>
167167
<li>Copy the HTML from the HTML Tab of canvas and include CSS and JS in the ‘CSS and JS References’ section.</li>
168-
<li>Initialize the parallaxEffect by calling <code>parallaxEffect('.parallax-gallery-images', '.column', 'top center', 'bottom+=15% center', 'vertical', 'all');</code> function in your JS file.</li>
168+
{/* <li>Initialize the parallaxEffect by calling <code>parallaxEffect('.parallax-gallery-images', '.column', 'top center', 'bottom+=15% center', 'vertical', 'all');</code> function in your JS file.</li> */}
169169
<li>Refer to <a href="https://github.com/undp/design-system/wiki/Parallax-documentation">this document</a> for Parallax integration & options.</li>
170170
</ul>
171+
<h4>Method 1: Automatic Initialization (Recommended)</h4>
172+
<ul>
173+
<li>Include the component initializer script:
174+
<code>&lt;script src="https://cdn.jsdelivr.net/npm/@undp/design-system/docs/js/ext-comp-loader.min.js"&gt;&lt;/script&gt;</code>
175+
</li>
176+
<li>Add the required data attributes to your parallax gallery element:
177+
<code>data-undpds-component="parallax"</code> and <code>data-options</code> with a JSON configuration.
178+
</li>
179+
<li>The data-options should contain values for: triggerElement, targetSelector, triggerHook, endTriggerHook, direction, and breakpoints.</li>
180+
<li>The parallax effect will initialize automatically when the page loads - no JavaScript calls required!</li>
181+
182+
</ul>
183+
<p>See the component code for an example of the data-options format.</p>
184+
<h4>Method 2: Manual Initialization (Traditional)</h4>
185+
<ul>
186+
<li>Include <code>parallax.min.js</code> in your HTML.</li>
187+
<li>Call the initialization function directly in your JavaScript:
188+
<code>parallaxEffect('.parallax-gallery-images', '.column', 'top center', 'bottom+=15% center', 'vertical', 'all');</code>
189+
</li>
190+
</ul>
191+
171192

172193
<h3>CSS and JS References</h3>
173194

‎stories/Components/UIcomponents/Hero/HomePageHero/HomePageHero.stories.js

+38-2
Original file line numberDiff line numberDiff line change
@@ -60,9 +60,28 @@ export default {
6060
<li>Choose the variant either video or Image from the control tab on canvas.</li>
6161
<li>Grab the HTML from the HTML tab and also include css and js files listed below.</li>
6262
<li>If you want to add left-right animation then add <code>data-viewport="true"</code> attribute to your HTML element and include <code>viewport.min.js</code> file.</li>
63-
<li>If you want the image to expand size on scroll then include <code>animation.min.js</code> and initialize <code>expandToSize('.homepage-hero-full')</code>.</li>
63+
{/* <li>If you want the image to expand size on scroll then include <code>animation.min.js</code> and initialize <code>expandToSize('.homepage-hero-full')</code>.</li> */}
64+
</ul>
65+
<h4>Method 1: Automatic Initialization (Recommended)</h4>
66+
<ul>
67+
<li>Include <code>animation.min.js</code> in your HTML.</li>
68+
<li>Include the component initializer script:
69+
<code>&lt;script src="https://cdn.jsdelivr.net/npm/@undp/design-system/docs/js/ext-comp-loader.min.js"&gt;&lt;/script&gt;</code>
70+
</li>
71+
<li>Add the required data attributes to your hero element:
72+
<code>data-undpds-component="expandToSize" data-selector=".homepage-hero-full"</code>
73+
</li>
74+
<li>The expand effect will initialize automatically when the page loads - no JavaScript calls required!</li>
75+
</ul>
76+
<h4>Method 2: Manual Initialization (Traditional)</h4>
77+
<ul>
78+
<li>Include <code>animation.min.js</code> in your HTML.</li>
79+
<li>Call the initialization function directly in your JavaScript:
80+
<code>expandToSize('.homepage-hero-full');</code>
81+
</li>
6482
</ul>
6583

84+
6685
<h3>CSS and JS References</h3>
6786

6887
<h4>CSS:</h4>
@@ -126,7 +145,24 @@ export default {
126145
<li>Grab the HTML from the HTML tab and also include css and js files listed below.</li>
127146
<li>If you want to add left-right animation then add <code>data-viewport="true"</code> attribute to your HTML element and include <code>viewport.min.js</code> file.</li>
128147
</ul>
129-
148+
<h4>Method 1: Automatic Initialization (Recommended)</h4>
149+
<ul>
150+
<li>Include <code>animation.min.js</code> in your HTML.</li>
151+
<li>Include the component initializer script:
152+
<code>&lt;script src="https://cdn.jsdelivr.net/npm/@undp/design-system/docs/js/ext-comp-loader.min.js"&gt;&lt;/script&gt;</code>
153+
</li>
154+
<li>Add the required data attributes to your hero element:
155+
<code>data-undpds-component="expandToSize" data-selector=".homepage-hero-full"</code>
156+
</li>
157+
<li>The expand effect will initialize automatically when the page loads - no JavaScript calls required!</li>
158+
</ul>
159+
<h4>Method 2: Manual Initialization (Traditional)</h4>
160+
<ul>
161+
<li>Include <code>animation.min.js</code> in your HTML.</li>
162+
<li>Call the initialization function directly in your JavaScript:
163+
<code>expandToSize('.homepage-hero-full');</code>
164+
</li>
165+
</ul>
130166
<h3>CSS and JS References</h3>
131167

132168
<h4>CSS:</h4>

0 commit comments

Comments
 (0)