lightning-base-components 1.28.11-alpha → 1.28.13-alpha

package/src/lightning/datatable/__examples__/withSingleRowSelectionMode/withSingleRowSelectionMode.html

@@ -0,0 +1,20 @@
+<template>
+    <p>Render using: {singleRowSelectionMode}</p>
+    <lightning-input
+        type="checkbox"
+        label="Use checkboxes for selection"
+        name="usecheckbox"
+        onchange={handleCheckboxChange}
+        checked={useCheckbox}
+        >
+    </lightning-input>
+    <lightning-datatable
+        key-field="id"
+        columns={columns}
+        data={data}
+        selected-rows={selectedRows}
+        single-row-selection-mode={singleRowSelectionMode}
+        row-number-offset="0"
+        max-row-selection="1">
+    </lightning-datatable>
+</template>

package/src/lightning/datatable/__examples__/withTextWrapping/withTextWrapping.html

@@ -0,0 +1,14 @@
+<template>
+    <lightning-button
+        label="Change text wrapping max lines"
+        class="changeTextWrappingMaxLines"
+        onclick={changeTextWrappingMaxLines}>
+    </lightning-button>
+    <lightning-datatable
+        key-field="id"
+        columns={columns}
+        data={data}
+        hide-checkbox-column
+        wrap-text-max-lines={wrapTextMaxLines}>
+    </lightning-datatable>
+</template>

package/src/lightning/datatable/__examples__/withVirtualization/withVirtualization.html

@@ -0,0 +1,12 @@
+<template>
+    <div style="height:100vh;">
+        <lightning-datatable
+            data-render-mode="role-based"
+            key-field="id"
+            data={data}
+            columns={columns}
+            render-mode="role-based"
+            render-config={renderConfig}>
+        </lightning-datatable>
+    </div>
+</template>

package/src/lightning/datatable/__examples__/withoutTableHeader/withoutTableHeader.html

@@ -0,0 +1,10 @@
+<template>
+    <div style="height: 300px;">
+        <lightning-datatable
+            key-field="id"
+            data={data}
+            columns={columns}
+            hide-table-header>
+        </lightning-datatable>
+    </div>
+</template>

package/src/lightning/dialog/__examples__/basic/basic.html

@@ -0,0 +1,22 @@
+<template>
+    <lightning-dialog header="Create Contact" onclose={handleDialogClose} oncancel={handleDialogCancel}>
+        <lightning-input-name label="Contact Name"></lightning-input-name>
+        <div slot="footer">
+            <button class="slds-button slds-button_brand" onclick={handleCancel}>Cancel</button>
+            <button class="slds-button slds-button_brand" onclick={handleSave}>Save</button>
+        </div>
+    </lightning-dialog>
+
+    <template if:true={enteredName}>
+        Entered Name: {enteredName}
+    </template>
+
+    <div>
+        <lightning-button-icon
+            label="Create Contact"
+            icon-name="utility:add"
+            onclick={openCreateContactDialog}>
+        </lightning-button-icon>
+    </div>
+
+</template>

package/src/lightning/dualListbox/__examples__/minmax/minmax.html

@@ -0,0 +1,12 @@
+<template>
+    <lightning-dual-listbox name="languages"
+                            label="Select Options (at least 5 and at most 10)"
+                            source-label="Available"
+                            selected-label="Selected"
+                            field-level-help="This is a dual listbox"
+                            options={options}
+                            min={min}
+                            max={max}
+                            value={values}></lightning-dual-listbox>
+
+</template>

package/src/lightning/dualListbox/__examples__/required/required.html

@@ -0,0 +1,11 @@
+<template>
+    <lightning-dual-listbox name="languages"
+                            label="Select Options (Option 2 and Option 5 are required)"
+                            source-label="Available"
+                            selected-label="Selected"
+                            field-level-help="This is a dual listbox"
+                            options={options}
+                            required-options={requiredOptions}
+                            value={values}></lightning-dual-listbox>
+
+</template>

package/src/lightning/dualListbox/__examples__/selected/selected.html

@@ -0,0 +1,10 @@
+<template>
+    <lightning-dual-listbox name="languages"
+                            label="Select Languages"
+                            source-label="Available"
+                            selected-label="Selected"
+                            field-level-help="This is a dual listbox"
+                            options={options}
+                            value={values}></lightning-dual-listbox>
+
+</template>

package/src/lightning/dualListbox/__examples__/simple/simple.html

@@ -0,0 +1,12 @@
+<template>
+    <lightning-dual-listbox name="languages"
+                            label="Select Languages"
+                            source-label="Available"
+                            selected-label="Selected"
+                            field-level-help="Select your preferred languages"
+                            options={options}
+                            onchange={handleChange}></lightning-dual-listbox>
+    <div class="slds-box" >
+        <p>Selected values are: {selected}</p>
+    </div>
+</template>

package/src/lightning/dynamicIcon/__examples__/ellie/ellie.html

@@ -0,0 +1,9 @@
+<template>
+    <p>
+        The ellie icon is a pulsing blue circle, which pulses and stops after one animation cycle.
+    </p>
+    <lightning-dynamic-icon 
+        type="ellie" 
+        alternative-text="Ellie intelligence">
+    </lightning-dynamic-icon>
+</template>

package/src/lightning/dynamicIcon/__examples__/eq/eq.html

@@ -0,0 +1,10 @@
+<template>
+    <p>
+        EQ Icon - The eq icon displays an animated graph with three bars that rise and fall randomly.
+    </p>
+    <lightning-dynamic-icon
+        type="eq"
+        option="play"
+        alternative-text="Recording in progress">
+    </lightning-dynamic-icon>
+</template>

package/src/lightning/dynamicIcon/__examples__/score/score.html

@@ -0,0 +1,10 @@
+<template>
+    <p>
+        The score icon is a green filled circle or a red unfilled circle.
+    </p>
+    <lightning-dynamic-icon 
+        type="score" 
+        option="negative" 
+        alternative-text="Negative score">
+    </lightning-dynamic-icon>
+</template>

package/src/lightning/dynamicIcon/__examples__/strength/strength.html

@@ -0,0 +1,10 @@
+<template>
+    <p>
+        The strength icon displays three animated horizontal circles that are colored green or red.
+    </p>
+    <lightning-dynamic-icon 
+        type="strength" 
+        option="2" 
+        alternative-text="Strength: 2">
+    </lightning-dynamic-icon>
+</template>

package/src/lightning/dynamicIcon/__examples__/trend/trend.html

@@ -0,0 +1,10 @@
+<template>
+    <p>
+        The trend icon displays animated arrows that point up, down, or straight.
+    </p>
+    <lightning-dynamic-icon 
+        type="trend" 
+        option="down" 
+        alternative-text="Trending down">
+    </lightning-dynamic-icon>
+</template>

package/src/lightning/dynamicIcon/__examples__/waffle/waffle.html

@@ -0,0 +1,9 @@
+<template>
+    <p>
+        The waffle icon is a square made up of a 3x3 grid of circles. This icon animates on hover.
+    </p>
+    <lightning-dynamic-icon 
+        type="waffle" 
+        alternative-text="Application launcher">
+    </lightning-dynamic-icon>
+</template>

package/src/lightning/formattedAddress/__examples__/basic/basic.html

@@ -0,0 +1,46 @@
+<template>
+    <div class="slds-m-vertical_medium">
+        <h1 class="slds-text-heading_small">Formatted Address</h1>
+        <p class="slds-text-body_regular">This component formats an address and automatically links it to Google Maps.</p>
+    </div>
+
+    <lightning-formatted-address
+        street="121 Spear St."
+        city="San Francisco"
+        country="US"
+        province="CA"
+        postal-code="94105"
+    ></lightning-formatted-address>
+
+    <div class="slds-m-vertical_medium">
+        <h1 class="slds-text-heading_small">Formatted Address in Plain Text</h1>
+        <p class="slds-text-body_regular">This component formats an address but doesn't link to Google Maps.</p>
+    </div>
+
+    <lightning-formatted-address
+        street="121 Spear St."
+        city="San Francisco"
+        country="US"
+        province="CA"
+        postal-code="94105"
+        disabled
+    ></lightning-formatted-address>
+
+    <div class="slds-m-vertical_medium">
+        <h1 class="slds-text-heading_small">Formatted Address where variant='plain'</h1>
+        <p class="slds-text-body_regular">This component does not have the slds-truncate class attached to each address line, so lines will wrap instead of truncating.</p>
+    </div>
+
+    <div style="width: 100px; word-break: break-all;">
+        <lightning-formatted-address
+            street="45 Ffordd Penmynydd"
+            city="St Mary's Church in the Hollow of the White Hazel near a Rapid Whirlpool and the Church of St. Tysilio near the Red Cave"
+            country="United Kingdom"
+            province="Wales"
+            postal-code="LL61 5UJ"
+            variant="plain"
+            disabled
+        ></lightning-formatted-address>
+    </div>
+    
+</template>

package/src/lightning/formattedAddress/__examples__/customLocale/customLocale.html

@@ -0,0 +1,22 @@
+<template>
+    <h1 class="slds-text-heading_small">Address in Spanish format</h1>
+
+    <lightning-formatted-address
+        street="Avenida Concha Espina, Nº 1"
+        city="Madrid"
+        postal-code="28036"
+        country="España"
+        locale="es-ES"
+    ></lightning-formatted-address>
+
+    <h1 class="slds-text-heading_small">Address in Japanese format</h1>
+
+    <lightning-formatted-address
+        street="下連雀1丁目1−83"
+        city="三鷹市"
+        country="日本"
+        province="東京都"
+        postal-code="181–0013"
+        locale="ja-JP"
+    ></lightning-formatted-address>
+</template>

package/src/lightning/formattedAddress/__examples__/latitude/latitude.html

@@ -0,0 +1,18 @@
+<template>
+    <div class="slds-m-vertical_medium">
+        <h1 class="slds-text-heading_small">Formatted Address with Coordinates</h1>
+        <p class="slds-text-body_regular">This component formats an address, and automatically links it to Google Maps
+            using latitude and longitude coordinates for faster map rendering.
+        </p>
+    </div>
+
+    <lightning-formatted-address
+        street="121 Spear St."
+        city="San Francisco"
+        country="US"
+        province="CA"
+        postal-code="94105"
+        latitude="37.792179"
+        longitude="-122.392735"
+    ></lightning-formatted-address>
+</template>

package/src/lightning/formattedDateTime/__examples__/date/date.html

@@ -0,0 +1,8 @@
+<template>
+    <div class="slds-box">
+        <h2 class="header">Date Formatting</h2>
+        <p><lightning-formatted-date-time value="1547250828000"></lightning-formatted-date-time></p>
+        <p><lightning-formatted-date-time value="1547250828000" year="2-digit" month="short" day="2-digit" weekday="narrow"></lightning-formatted-date-time></p>
+        <p><lightning-formatted-date-time value="1547250828000" year="2-digit" month="short" day="2-digit" weekday="long"></lightning-formatted-date-time></p>
+    </div>
+</template>

package/src/lightning/formattedDateTime/__examples__/datetime/datetime.html

@@ -0,0 +1,11 @@
+<template>
+    <div class="slds-box">
+        <h2 class="header">Date and Time Formatting</h2>
+        <p><lightning-formatted-date-time value="1547250828000" year="2-digit" month="short" day="2-digit" hour="numeric"
+                                       weekday="long" era="short"></lightning-formatted-date-time></p>
+        <p><lightning-formatted-date-time value="1547250828000" year="numeric" month="numeric" day="numeric" hour="2-digit"
+                                        minute="2-digit" time-zone-name="short"></lightning-formatted-date-time></p>
+        <p><lightning-formatted-date-time value="1547250828000" year="numeric" month="numeric" day="numeric" hour="2-digit"
+                                        minute="2-digit" time-zone="UTC" time-zone-name="short" hour12={ampm}></lightning-formatted-date-time></p>
+    </div>
+</template>

package/src/lightning/formattedDateTime/__examples__/time/time.html

@@ -0,0 +1,11 @@
+<template>
+    <div class="slds-box">
+        <h2 class="header">Time Formatting</h2>
+        <p><lightning-formatted-date-time value="1547250828000" hour="numeric"></lightning-formatted-date-time></p>
+        <p><lightning-formatted-date-time value="1547250828000" hour="2-digit" second="2-digit"></lightning-formatted-date-time></p>
+        <p><lightning-formatted-date-time value="1547250828000" hour="2-digit" minute="2-digit" time-zone="UTC"
+                                        time-zone-name="short"></lightning-formatted-date-time></p>
+        <p><lightning-formatted-date-time value="1547250828000" hour="2-digit" minute="2-digit" second="2-digit" hour12={ampm}
+                                        time-zone-name="long"></lightning-formatted-date-time></p>
+    </div>
+</template>

package/src/lightning/formattedEmail/__examples__/basic/basic.html

@@ -0,0 +1,19 @@
+<template>
+        <div class="slds-m-vertical_medium">
+                <h1 class="slds-text-heading_small">Formatted Email</h1>
+                <p class="slds-text-body_regular">Default behavior displays an email address with an email icon. The email address is automatically linked to open the default mail app.</p>
+            </div>
+    <p><lightning-formatted-email value="email@example.com" ></lightning-formatted-email></p>
+
+    <div class="slds-m-vertical_medium">
+            <h1 class="slds-text-heading_small">Formatted Email Without an Icon</h1>
+            <p class="slds-text-body_regular">Remove the icon using the <code>hide-icon</code> attribute.</p>
+        </div>
+    <p><lightning-formatted-email value="email@example.com" hide-icon></lightning-formatted-email></p>
+
+    <div class="slds-m-vertical_medium">
+            <h1 class="slds-text-heading_small">Formatted Email With a Label</h1>
+            <p class="slds-text-body_regular">Display custom text instead of the email address with the <code>label</code> attribute.</p>
+        </div>
+    <p><lightning-formatted-email value="email@example.com" label="Email Us!" ></lightning-formatted-email></p>
+</template>

package/src/lightning/formattedEmail/__examples__/onclick/onclick.html

@@ -0,0 +1,4 @@
+<template>
+    <p>Click the email link: <lightning-formatted-email value="email@example.com" onclick={handleClick}></lightning-formatted-email></p>
+    <p aria-live="polite">Click count: {count}</p>
+</template>

package/src/lightning/formattedLocation/__examples__/basic/basic.html

@@ -0,0 +1,3 @@
+<template>
+    <p><lightning-formatted-location latitude="22" longitude="122.2222"></lightning-formatted-location></p>
+</template>

package/src/lightning/formattedName/__examples__/long/long.html

@@ -0,0 +1,14 @@
+<template>
+    <div class="slds-box">
+        <h3 class="header">Default (Long Format)</h3>
+        <lightning-formatted-name
+                first-name="John"
+                last-name="Doe"
+                middle-name="Middleton"
+                informal-name="Jo"
+                suffix="The 3rd"
+                salutation="Mr."
+        >
+        </lightning-formatted-name>
+    </div>
+</template>

package/src/lightning/formattedName/__examples__/medium/medium.html

@@ -0,0 +1,14 @@
+<template>
+    <div class="slds-box">
+        <h3 class="header">Medium Format</h3>
+        <lightning-formatted-name
+                first-name="John"
+                last-name="Doe"
+                middle-name="Middleton"
+                informal-name="Jo"
+                suffix="The 3rd"
+                salutation="Mr."
+                format="medium"
+        ></lightning-formatted-name>
+    </div>
+</template>

package/src/lightning/formattedName/__examples__/short/short.html

@@ -0,0 +1,14 @@
+<template>
+    <div class="slds-box">
+        <h3 class="header">Short Format</h3>
+        <lightning-formatted-name
+                first-name="John"
+                last-name="Doe"
+                middle-name="Middleton"
+                informal-name="Jo"
+                suffix="The 3rd"
+                salutation="Mr."
+                format="short"
+        ></lightning-formatted-name>
+    </div>
+</template>

package/src/lightning/formattedNumber/__examples__/currency/currency.html

@@ -0,0 +1,10 @@
+<template>
+    <p><lightning-formatted-number value="12.34" format-style="currency" currency-code="USD"></lightning-formatted-number></p>
+    <p><lightning-formatted-number value="12.34" format-style="currency" currency-code="USD" currency-display-as="code"></lightning-formatted-number></p>
+    <p><lightning-formatted-number value="12.34" format-style="currency" currency-code="USD" currency-display-as="name"></lightning-formatted-number></p>
+    <p><lightning-formatted-number value="12.34" format-style="currency" currency-code="USD" currency-display-as="symbol"></lightning-formatted-number></p>
+    <p><lightning-formatted-number value="12.34" format-style="currency" currency-code="EUR"></lightning-formatted-number></p>
+    <p><lightning-formatted-number value="12.34" format-style="currency" currency-code="EUR" currency-display-as="name"></lightning-formatted-number></p>
+    <p><lightning-formatted-number value="12.34" format-style="currency" currency-code="CNY"></lightning-formatted-number></p>
+    <p><lightning-formatted-number value="123456789012345" format-style="currency" currency-code="EUR" minimum-fraction-digits="2" maximum-fraction-digits="2"></lightning-formatted-number></p>
+</template>

package/src/lightning/formattedNumber/__examples__/decimal/decimal.html

@@ -0,0 +1,8 @@
+<template>
+    <p><lightning-formatted-number value="1234.5678"></lightning-formatted-number></p>
+    <p><lightning-formatted-number value="1234.5678" maximum-fraction-digits="2"></lightning-formatted-number></p>
+    <p><lightning-formatted-number value="12.34" format-style="decimal" minimum-integer-digits="5"></lightning-formatted-number></p>
+    <p><lightning-formatted-number value="12.34" format-style="decimal" minimum-fraction-digits="5"></lightning-formatted-number></p>
+    <p><lightning-formatted-number value="12.34" format-style="decimal" minimum-significant-digits="5"></lightning-formatted-number></p>
+    <p><lightning-formatted-number value="123456789.123456789" minimum-fraction-digits="9"></lightning-formatted-number></p>
+</template>

package/src/lightning/formattedNumber/__examples__/percent/percent.html

@@ -0,0 +1,8 @@
+<template>
+    <p><lightning-formatted-number value="1" format-style="percent"></lightning-formatted-number></p>
+    <p><lightning-formatted-number value="0.5" format-style="percent"></lightning-formatted-number></p>
+    <p><lightning-formatted-number value="0.1234" format-style="percent"></lightning-formatted-number></p>
+    <p><lightning-formatted-number value="0.1234" format-style="percent" maximum-fraction-digits="3"></lightning-formatted-number></p>
+    <p><lightning-formatted-number value="0.1234" format-style="percent" maximum-fraction-digits="1"></lightning-formatted-number></p>
+    <p><lightning-formatted-number value="2.3" format-style="percent"></lightning-formatted-number></p>
+</template>

package/src/lightning/formattedPhone/__examples__/basic/basic.html

@@ -0,0 +1,7 @@
+<template>
+    <p><lightning-formatted-phone value="+18005551212" ></lightning-formatted-phone></p>
+    <p><lightning-formatted-phone value="8005551212"></lightning-formatted-phone></p>
+    <p><lightning-formatted-phone value="18005551212"></lightning-formatted-phone></p>
+    <p><lightning-formatted-phone value="1333333" ></lightning-formatted-phone></p>
+    <p><lightning-formatted-phone value="18005551212" disabled></lightning-formatted-phone></p>
+</template>

package/src/lightning/formattedRichText/__examples__/basic/basic.html

@@ -0,0 +1,22 @@
+<template>
+    <div>
+        <p>
+            <lightning-formatted-rich-text value="Plain boring text"></lightning-formatted-rich-text>
+        </p>
+        <p>
+            <lightning-formatted-rich-text value="This &lt;em&gt;is&lt;/em&gt; some simple rich text. &lt;strong&gt;Hello!&lt;/strong&gt;"></lightning-formatted-rich-text>
+        </p>
+        <p>
+            <lightning-formatted-rich-text value="This is a link to &lt;a href=&quot;http://www.salesforce.com&quot;&gt;Salesforce&lt;/a&gt;"></lightning-formatted-rich-text>
+        </p>
+        <p>
+            <lightning-formatted-rich-text value={svgRichText}></lightning-formatted-rich-text>
+        </p>
+        <p>
+            <lightning-formatted-rich-text value={listRichText} class="slds-text-body_small"></lightning-formatted-rich-text>
+        </p>
+        <p>
+            <lightning-formatted-rich-text value={linkifyRichText} class="slds-text-body_small"></lightning-formatted-rich-text>
+        </p>
+    </div>
+</template>

package/src/lightning/formattedText/__examples__/basic/basic.html

@@ -0,0 +1,6 @@
+<template>
+    <p><lightning-formatted-text value="Email salesforce.com and info.salesforce.com" ></lightning-formatted-text></p>
+    <p><lightning-formatted-text value="Email info@salesforce.com" ></lightning-formatted-text></p>
+    <p><lightning-formatted-text value="Email salesforce.com and info.salesforce.com" linkify></lightning-formatted-text></p>
+    <p><lightning-formatted-text value="Email info@salesforce.com" linkify></lightning-formatted-text></p>
+</template>

package/src/lightning/formattedTime/__examples__/basic/basic.html

@@ -0,0 +1,4 @@
+<template>
+    <p>Simple Time value: <lightning-formatted-time value="22:12:30.999"></lightning-formatted-time></p>
+    <p>Time value with Z suffix: <lightning-formatted-time value="22:12:30.999Z"></lightning-formatted-time></p>
+</template>

package/src/lightning/formattedUrl/__examples__/basic/basic.html

@@ -0,0 +1,32 @@
+<template>
+    <div class="slds-m-top_medium slds-m-bottom_x-large">
+        <h2 class="slds-text-heading_small">
+            Absolute URLs are created if the value doesn't begin with /
+        </h2>
+        <div class="slds-p-around_medium">
+            <p><lightning-formatted-url value="my/path" tooltip="Omit leading slash" target="_blank"></lightning-formatted-url></p>
+            <p><lightning-formatted-url value="www.salesforce.com" tooltip="Use full domain name" target="_blank"></lightning-formatted-url></p>
+            <p><lightning-formatted-url value="https://salesforce.com" tooltip="Use https://domain-name" label="Visit salesforce.com" target="_blank" ></lightning-formatted-url></p>
+        </div>
+    </div>
+
+    <div class="slds-m-top_medium slds-m-bottom_x-large">
+        <h2 class="slds-text-heading_small">
+            Relative URLs are created if the value begins with /
+        </h2>
+        <div class="slds-p-around_medium">
+            <p><lightning-formatted-url value="/my/path" tooltip="Include leading slash" target="_blank"></lightning-formatted-url></p>
+            <p><lightning-formatted-url value="/my/path" label="Visit /my/path on this website" target="_blank"></lightning-formatted-url></p>
+        </div>
+    </div>
+
+    <div class="slds-m-top_medium slds-m-bottom_x-large">
+        <h2 class="slds-text-heading_small">
+            Only http, https, and ftp protocols are supported.
+        </h2>
+        <div class="slds-p-around_medium">
+            <p><lightning-formatted-url value="https://www.salesforce.com" target="_blank"></lightning-formatted-url></p>
+            <p><lightning-formatted-url value="ftp://public.ftp-servers.example.com/path/to/myfile.txt" target="_blank"></lightning-formatted-url></p>
+        </div>
+    </div>
+</template>

package/src/lightning/groupedCombobox/__examples__/basic/basic.html

@@ -0,0 +1,36 @@
+<template>
+    <lightning-grouped-combobox
+        label="Standard GroupedCombobox"
+        items={items}
+        onselect={handleSelect}
+        placeholder="Standard"
+    >
+    </lightning-grouped-combobox>
+
+    <lightning-grouped-combobox
+        label="label-inline GroupedCombobox"
+        items={items}
+        onselect={handleSelect}
+        variant="label-inline"
+        placeholder="label-inline"
+    >
+    </lightning-grouped-combobox>
+
+    <lightning-grouped-combobox
+        label="label-stacked GroupedCombobox"
+        items={items}
+        onselect={handleSelect}
+        variant="label-stacked"
+        placeholder="label-stacked"
+    >
+    </lightning-grouped-combobox>
+
+    <lightning-grouped-combobox
+        label="label-hidden GroupedCombobox"
+        items={items}
+        onselect={handleSelect}
+        variant="label-hidden"
+        placeholder="label-hidden"
+    >
+    </lightning-grouped-combobox>
+</template>

package/src/lightning/helptext/__examples__/basic/basic.css

@@ -0,0 +1,7 @@
+.lgc-bg {
+    background-color: rgb(242 242 242);
+}
+
+.lgc-bg-inverse {
+    background-color: var(--slds-g-color-surface-container-inverse-1);
+}

package/src/lightning/helptext/__examples__/basic/basic.html

@@ -0,0 +1,27 @@
+<template>
+    <div class="slds-m-top_medium slds-m-bottom_x-large">
+        <p class="slds-m-bottom_medium">
+            Helptext example using a default icon. Mouse over or focus on the icon to view the helptext content.
+        </p>
+
+        <p class="slds-m-bottom_medium">The tooltip displays on the lower left of the icon or above the icon if space is available. It automatically adjusts its position according to the viewport.</p>
+
+        <!-- Simple -->
+        <div class="slds-p-around_medium lgc-bg">
+            Subscribe
+            <lightning-helptext content="You'll receive weekly updates"></lightning-helptext>
+        </div>
+    </div>
+
+    <div class="slds-m-top_medium slds-m-bottom_x-large">
+        <p class="slds-m-bottom_medium">
+            Helptext example with an alternative icon.
+        </p>
+
+        <!-- Simple -->
+        <div class="slds-p-around_medium lgc-bg">
+            Short Text
+            <lightning-helptext icon-name="utility:salesforce1" content="Full text explanation of feature"></lightning-helptext>
+        </div>
+    </div>
+</template>