Skip to content
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Commit f08c5a6

Browse files
author
Yuliya Adamska
committedNov 6, 2024·
chore(site): add share example
1 parent 6da1e38 commit f08c5a6

File tree

1 file changed

+78
-46
lines changed

1 file changed

+78
-46
lines changed
 

‎site/views/examples/share.njk

+78-46
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ layout: content
33
title: Share
44
name: Share
55
seoTitle: ESL Share - custom element to trigger various share actions for page or url with metadata based on ESL web components
6-
tags: [examples, beta]
6+
tags: [examples]
77
icon: examples/share.svg
88
aside:
99
components:
@@ -20,59 +20,91 @@ aside:
2020
}
2121
</style>
2222

23-
<section>
24-
<h2>Share example</h2>
23+
<section class="row">
24+
<div class="col-12">
25+
<uip-root>
26+
<script type="text/html"
27+
label="Default share button"
28+
uip-snippet
29+
uip-snippet-js="js-snippet-share">
30+
<h4>Share button with default icon rendering</h4>
31+
<esl-share-button name="linkedin" default-icon></esl-share-button>
32+
</script>
2533

26-
<h3>Share button examples</h3>
27-
<p>Example of share button with default icon rendering.</p>
28-
<esl-share-button name="linkedin" default-icon></esl-share-button>
29-
<hr>
34+
<script type="text/html"
35+
label="Share button with custom config"
36+
uip-snippet
37+
uip-snippet-js="js-snippet-share">
38+
<h4>Share button with defining config via markup</h4>
39+
<p>The button's configuration uses attributes to specify the URL and title of the page to be shared.</p>
40+
<esl-share-button action="media" link="//www.linkedin.com/sharing/share-offsite/?url={u}" name="linkedin"
41+
share-url="https://esl-ui.com/" share-title="Exadel Smart Library" tabindex="0" role="button"
42+
title="LinkedIn">
43+
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="esl-share-icon" fill="#fff"
44+
focusable="false" role="presentation" style="background-color:#0b77b3;" viewBox="0 0 27.99 27.99">
45+
<path d="M6.37 11.33h3.25v10.45H6.37zM8 6.13A1.88 1.88 0 116.12 8 1.88 1.88 0 018 6.13M11.65 11.33h3.12v1.43h.05a3.4 3.4 0 013.07-1.69c3.29 0 3.9 2.17 3.9 5v5.73h-3.25v-5.11c0-1.21 0-2.77-1.69-2.77s-1.94 1.32-1.94 2.69v5.17h-3.25V11.33z"></path>
46+
</svg>
47+
</esl-share-button>
48+
<hr>
3049

31-
<p>Another example of share button.</p>
32-
<esl-share-button name="linkedin">
33-
Share me through Linkedin
34-
</esl-share-button>
35-
<hr>
50+
<p>The same button is defined via config and the name attribute.</p>
51+
<esl-share-button name="linkedin" share-url="https://esl-ui.com/" share-title="Exadel Smart Library"
52+
title="Linkedin">
53+
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="esl-share-icon" fill="#fff"
54+
focusable="false" role="presentation" style="background-color:#0b77b3;" viewBox="0 0 27.99 27.99">
55+
<path d="M6.37 11.33h3.25v10.45H6.37zM8 6.13A1.88 1.88 0 116.12 8 1.88 1.88 0 018 6.13M11.65 11.33h3.12v1.43h.05a3.4 3.4 0 013.07-1.69c3.29 0 3.9 2.17 3.9 5v5.73h-3.25v-5.11c0-1.21 0-2.77-1.69-2.77s-1.94 1.32-1.94 2.69v5.17h-3.25V11.33z"></path>
56+
</svg>
57+
</esl-share-button>
58+
</script>
3659

37-
<p>Example of share button with defining config via markup. The button's configuration uses attributes to specify the URL and title of the page to be shared.</p>
38-
<esl-share-button action="media" link="//www.linkedin.com/sharing/share-offsite/?url={u}" name="linkedin" share-url="https://esl-ui.com/" share-title="Exadel Smart Library" tabindex="0" role="button" title="LinkedIn">
39-
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="esl-share-icon" fill="#fff" focusable="false" role="presentation" style="background-color:#0b77b3;" viewBox="0 0 27.99 27.99"><path d="M6.37 11.33h3.25v10.45H6.37zM8 6.13A1.88 1.88 0 116.12 8 1.88 1.88 0 018 6.13M11.65 11.33h3.12v1.43h.05a3.4 3.4 0 013.07-1.69c3.29 0 3.9 2.17 3.9 5v5.73h-3.25v-5.11c0-1.21 0-2.77-1.69-2.77s-1.94 1.32-1.94 2.69v5.17h-3.25V11.33z"></path></svg>
40-
</esl-share-button>
41-
<hr>
60+
<script type="text/html"
61+
label="Share list"
62+
uip-snippet
63+
uip-snippet-js="js-snippet-share">
64+
<h4>Share buttons from a specified group</h4>
65+
<esl-share-list list="group:demo"></esl-share-list>
66+
<hr>
4267

43-
<p>The same button is defined via config and the name attribute.</p>
44-
<esl-share-button name="linkedin" share-url="https://esl-ui.com/" share-title="Exadel Smart Library" title="Linkedin">
45-
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="esl-share-icon" fill="#fff" focusable="false" role="presentation" style="background-color:#0b77b3;" viewBox="0 0 27.99 27.99"><path d="M6.37 11.33h3.25v10.45H6.37zM8 6.13A1.88 1.88 0 116.12 8 1.88 1.88 0 018 6.13M11.65 11.33h3.12v1.43h.05a3.4 3.4 0 013.07-1.69c3.29 0 3.9 2.17 3.9 5v5.73h-3.25v-5.11c0-1.21 0-2.77-1.69-2.77s-1.94 1.32-1.94 2.69v5.17h-3.25V11.33z"></path></svg>
46-
</esl-share-button>
47-
<hr>
68+
<h4>List of share buttons of group 'alternative'</h4>
69+
<p>Shows buttons from a specified group.</p>
70+
<esl-share-list list=" group:alternative"></esl-share-list>
71+
<hr>
4872

49-
<h3>Share list examples</h3>
50-
<p>Shows buttons from a specified group.</p>
51-
<esl-share-list list="group:demo"></esl-share-list>
52-
<hr>
73+
<h4>List of share buttons of the mix of Facebook, the group 'alternative', and Twitter button</h4>
74+
<p>Shows a Facebook button, buttons from a specified group, and a Twitter button.</p>
75+
<esl-share-list list="facebook group:alternative twitter"></esl-share-list>
76+
<hr>
5377

54-
<h4>Displays list of share buttons of group 'alternative'</h4>
55-
<p>Shows buttons from a specified group.</p>
56-
<esl-share-list list=" group:alternative "></esl-share-list>
57-
<hr>
78+
<h4>List of share buttons which presents buttons with all action types</h4>
79+
<p>This example shows a button with the native share mechanism on the device which will be inactive on the
80+
desktop browser.</p>
81+
<esl-share-list list="copy linkedin mail native-share print"></esl-share-list>
82+
<hr>
5883

59-
<h4>Displays list of share buttons of the mix of Facebook, the group 'alternative', and Twitter button</h4>
60-
<p>Shows a Facebook button, buttons from a specified group, and a Twitter button.</p>
61-
<esl-share-list list="facebook group:alternative twitter"></esl-share-list>
62-
<hr>
84+
<h4>List of share buttons (without group or list)</h4>
85+
<p>Shows all available buttons from config. The component's configuration uses attributes to specify the URL and
86+
title of the page to be shared.</p>
87+
<esl-share-list share-url="https://esl-ui.com/" share-title="Exadel Smart Library"></esl-share-list>
88+
</script>
6389

64-
<h4>List of share buttons which presents buttons with all action types</h4>
65-
<p>This example shows a button with the native share mechanism on the device which will be inactive on the desktop browser.</p>
66-
<esl-share-list list="copy linkedin mail native-share print"></esl-share-list>
67-
<hr>
90+
<script type="text/html"
91+
label="Share popup trigger"
92+
uip-snippet
93+
uip-snippet-js="js-snippet-share">
94+
<h4>Trigger icon</h4>
95+
<p>Hovering or clicking on the icon shows a popup with the list of share icons. The component's configuration uses attributes to specify the URL and title of the page to be shared.</p>
96+
<esl-share list="group:demo" share-url="https://esl-ui.com/" share-title="Exadel Smart Library">{% include 'static/assets/examples/share-trigger-icon.svg' %}</esl-share>
97+
</script>
6898

69-
<h4>Displays list of share buttons (without group or list)</h4>
70-
<p>Shows all available buttons from config. The component's configuration uses attributes to specify the URL and title of the page to be shared.</p>
71-
<esl-share-list share-url="https://esl-ui.com/" share-title="Exadel Smart Library"></esl-share-list>
72-
<hr>
73-
74-
<h3>Share popup trigger example</h3>
75-
<p>Displays trigger icon. Hovering or clicking on the icon shows a popup with the list of share icons. The component's configuration uses attributes to specify the URL and title of the page to be shared.</p>
76-
<esl-share list="group:demo" share-url="https://esl-ui.com/" share-title="Exadel Smart Library">{% include 'static/assets/examples/share-trigger-icon.svg' %}</esl-share>
99+
<script id="js-snippet-share" type="text/plain">
100+
import { ESLShare } from '@exadel/esl';
101+
ESLShare.register();
102+
</script>
77103

104+
<uip-snippets class="uip-toolbar" dropdown-view="@xs"></uip-snippets>
105+
<uip-preview></uip-preview>
106+
<uip-editor label="Source code (HTML)" collapsible copy></uip-editor>
107+
<uip-editor source="js" label="Source code (JS)" collapsible collapsed copy></uip-editor>
108+
</uip-root>
109+
</div>
78110
</section>

0 commit comments

Comments
 (0)
Please sign in to comment.