@ebay/skin 18.1.0 → 18.2.0

package/src/modules/details.marko

@@ -0,0 +1,231 @@
+<div id="details">
+    <section-header metadata=input.metadata name=input.name/>
+
+    <p>
+        A details element is an interactive control used to expand and collapse content.
+    </p>
+    <p>
+        <strong>NOTE:</strong>
+         The
+        <a href="https://github.com/javan/details-element-polyfill">
+            details-element-polyfill
+        </a>
+         is required to polyfill older browsers.
+    </p>
+
+    <h3>Default Details</h3>
+
+    <div class="demo">
+        <div class="demo__inner">
+            <details class="details">
+                <summary class="details__summary">
+                    <span class="details__label">
+                        Details
+                    </span>
+                    <span class="details__icon" hidden>
+                        <svg class="icon icon--16" aria-hidden="true">
+                            <icon-symbol name="chevron-down-16"/>
+                        </svg>
+                    </span>
+                </summary>
+                <p>
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                </p>
+            </details>
+        </div>
+    </div>
+
+    <highlight-code
+        type="html"
+        >
+<details class="details">
+    <summary class="details__summary">
+        <span class="details__label">Details</span>
+        <span class="details__icon" hidden>
+            <svg class="icon icon--16" aria-hidden="true">
+                <use href="#icon-chevron-down-16"></use>
+            </svg>
+        </span>
+    </summary>
+    <p>Sample content</p>
+</details>
+    </highlight-code>
+
+    <h3>Opened Details</h3>
+    <p>
+        Apply the
+        <span class="highlight">
+            open
+        </span>
+         attribute to change the state.
+    </p>
+
+    <div class="demo">
+        <div class="demo__inner">
+            <details class="details" open>
+                <summary class="details__summary">
+                    <span class="details__label">
+                        Details
+                    </span>
+                    <span class="details__icon" hidden>
+                        <svg class="icon icon--16" aria-hidden="true">
+                            <icon-symbol name="chevron-down-16"/>
+                        </svg>
+                    </span>
+                </summary>
+                <p>
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                </p>
+            </details>
+        </div>
+    </div>
+
+    <highlight-code
+        type="html"
+        >
+<details class="details" open>
+    <summary class="details__summary">
+        <span class="details__label">Details</span>
+        <span class="details__icon" hidden>
+            <svg class="icon icon--16" aria-hidden="true">
+                <use href="#icon-chevron-down-16"></use>
+            </svg>
+        </span>
+    </summary>
+    <p>Sample content</p>
+</details>
+    </highlight-code>
+
+    <h3>Centered Details</h3>
+    <p>
+        Apply the
+        <span class="highlight">
+            details__summary--center
+        </span>
+         class to center the summary.
+    </p>
+
+    <div class="demo">
+        <div class="demo__inner">
+            <details class="details">
+                <summary class="details__summary details__summary--center">
+                    <span class="details__label">
+                        Details
+                    </span>
+                    <span class="details__icon" hidden>
+                        <svg class="icon icon--16" aria-hidden="true">
+                            <icon-symbol name="chevron-down-16"/>
+                        </svg>
+                    </span>
+                </summary>
+                <p>
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                </p>
+            </details>
+        </div>
+    </div>
+
+    <highlight-code
+        type="html"
+        >
+<details class="details">
+    <summary class="details__summary details__summary--center">
+        <span class="details__label">Details</span>
+        <span class="details__icon" hidden>
+            <svg class="icon icon--16" aria-hidden="true">
+                <use href="#icon-chevron-down-16"></use>
+            </svg>
+        </span>
+    </summary>
+    <p>Sample content</p>
+</details>
+    </highlight-code>
+
+    <h3>Small Details</h3>
+    <p>
+        Apply the
+        <span class="highlight">
+            details__summary--small
+        </span>
+         class to use the smaller version of summary.
+    </p>
+    <div class="demo">
+        <div class="demo__inner">
+            <details class="details">
+                <summary class="details__summary details__summary--small">
+                    <span class="details__label">
+                        Details
+                    </span>
+                    <span class="details__icon" hidden>
+                        <svg class="icon icon--16" aria-hidden="true">
+                            <icon-symbol name="chevron-down-16"/>
+                        </svg>
+                    </span>
+                </summary>
+                <p>
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                </p>
+            </details>
+        </div>
+    </div>
+
+    <highlight-code
+        type="html"
+        >
+<details class="details">
+    <summary class="details__summary details__summary--small">
+        <span class="details__label">Details</span>
+        <span class="details__icon" hidden>
+            <svg class="icon icon--16" aria-hidden="true">
+                <use href="#icon-chevron-down-16"></use>
+            </svg>
+        </span>
+    </summary>
+    <p>Sample content</p>
+</details>
+    </highlight-code>
+
+    <h3>RTL Details</h3>
+    <p>Works with right-to-left languages.</p>
+    <div class="demo">
+        <div class="demo__inner">
+            <details class="details" dir="rtl">
+                <summary class="details__summary">
+                    <span class="details__label">
+                        Details
+                    </span>
+                    <span class="details__icon" hidden>
+                        <svg class="icon icon--16" aria-hidden="true">
+                            <icon-symbol name="chevron-down-16"/>
+                        </svg>
+                    </span>
+                </summary>
+                <p>
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                </p>
+            </details>
+        </div>
+    </div>
+    <highlight-code
+        type="html"
+        >
+<details class="details" dir="rtl">
+    <summary class="details__summary">
+        <span class="details__label">Details</span>
+        <span class="details__icon" hidden>
+            <svg class="icon icon--16" aria-hidden="true">
+                <use href="#icon-chevron-down-16"></use>
+            </svg>
+        </span>
+    </summary>
+    <p>Sample content</p>
+</details>
+    </highlight-code>
+</div>
+export const metadata = {
+    "ds-component": {
+        name: "expansion",
+        version: 1.2,
+    },
+    submodules: ["icon"],
+};

package/src/modules/donut-chart.marko

@@ -0,0 +1,183 @@
+<div id="donut-chart">
+    <section-header metadata=input.metadata name=input.name/>
+    <h3>ALPHA: APIs are subject to change</h3>
+
+    <p>
+        The donut chart is a data visualization module designed to display comparative data in an easily digestible and
+        visually appealing format. Our donut chart is composed of four sections: the title, metric, graph, and
+        legend, each serving a distinct purpose to enhance the user's understanding of the data presented.
+    </p>
+
+    <p>
+        In practice, the <span class="highlight">.donut-chart__graph</span> is where we will load in the third-party donut chart.
+    </p>
+
+    <h3> Small container </h3>
+    <div class="demo">
+        <div class="demo__inner">
+            <div class="donut-chart" style="width: 200px;">
+                <div class="donut-chart__grid">
+                    <h2 class="donut-chart__title">
+                        Donut chart title
+                    </h2>
+                    <div class="donut-chart__metric">
+                        <div class="donut-chart__metric-value">
+                            175
+                        </div>
+                        <div class="donut-chart__metric-label">
+                            Returns processed
+                        </div>
+                    </div>
+                    <div class="donut-chart__graph">
+                        <div>Graph placeholder</div>
+                    </div>
+                    <div class="donut-chart__legend">
+                        <div class="chart-legend">
+                            <dl aria-label="Example donut chart legend">
+                                <div class="chart-legend__item">
+                                    <dt class="chart-legend__label">Portion 1</dt>
+                                    <dd class="chart-legend__value">10%</dd>
+                                </div>
+                                <div class="chart-legend__item">
+                                    <dt class="chart-legend__label">Portion 2</dt>
+                                    <dd class="chart-legend__value">20%</dd>
+                                </div>
+                                <div class="chart-legend__item">
+                                    <dt class="chart-legend__label">Portion 3</dt>
+                                    <dd class="chart-legend__value">30%</dd>
+                                </div>
+                            </dl>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <highlight-code type="html" >
+<div class="donut-chart" style="width: 200px;">
+    <div class="donut-chart__grid">
+        <div class="donut-chart__title">
+            Donut chart title
+        </div>
+        <div class="donut-chart__metric">
+            <div class="donut-chart__metric-value">
+                175
+            </div>
+            <div class="donut-chart__metric-label">
+                Returns processed
+            </div>
+        </div>
+        <div class="donut-chart__graph">
+            <div>Graph placeholder</div>
+        </div>
+        <div class="donut-chart__legend">
+            <div class="chart-legend">
+                <dl aria-label="Example donut chart legend">
+                    <div class="chart-legend__item">
+                        <dt class="chart-legend__label">Portion 1</dt>
+                        <dd class="chart-legend__value">10%</dd>
+                    </div>
+                    <div class="chart-legend__item">
+                        <dt class="chart-legend__label">Portion 2</dt>
+                        <dd class="chart-legend__value">20%</dd>
+                    </div>
+                    <div class="chart-legend__item">
+                        <dt class="chart-legend__label">Portion 3</dt>
+                        <dd class="chart-legend__value">30%</dd>
+                    </div>
+                </dl>
+            </div>
+        </div>
+    </div>
+</div>
+    </highlight-code>
+
+    <h3> Variable width container </h3>
+    <div class="demo">
+        <div class="demo__inner">
+            <div class="donut-chart">
+                <div class="donut-chart__grid">
+                    <h2 class="donut-chart__title">
+                        Donut chart title
+                    </h2>
+                    <div class="donut-chart__metric">
+                        <div class="donut-chart__metric-value">
+                            175
+                        </div>
+                        <div class="donut-chart__metric-label">
+                            Returns processed
+                        </div>
+                    </div>
+                    <div class="donut-chart__graph">
+                        <div>Graph placeholder</div>
+                    </div>
+                    <div class="donut-chart__legend">
+                        <div class="chart-legend">
+                            <dl aria-label="Example donut chart legend">
+                                <div class="chart-legend__item">
+                                    <dt class="chart-legend__label">Portion 1</dt>
+                                    <dd class="chart-legend__value">10%</dd>
+                                </div>
+                                <div class="chart-legend__item">
+                                    <dt class="chart-legend__label">Portion 2</dt>
+                                    <dd class="chart-legend__value">20%</dd>
+                                </div>
+                                <div class="chart-legend__item">
+                                    <dt class="chart-legend__label">Portion 3</dt>
+                                    <dd class="chart-legend__value">30%</dd>
+                                </div>
+                            </dl>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <highlight-code type="html" >
+<div class="donut-chart">
+    <div class="donut-chart__grid">
+        <div class="donut-chart__title">
+            Donut chart title
+        </div>
+        <div class="donut-chart__metric">
+            <div class="donut-chart__metric-value">
+                175
+            </div>
+            <div class="donut-chart__metric-label">
+                Returns processed
+            </div>
+        </div>
+        <div class="donut-chart__graph">
+            <div>Graph placeholder</div>
+        </div>
+        <div class="donut-chart__legend">
+            <div class="chart-legend">
+                <dl aria-label="Example donut chart legend">
+                    <div class="chart-legend__item">
+                        <dt class="chart-legend__label">Portion 1</dt>
+                        <dd class="chart-legend__value">10%</dd>
+                    </div>
+                    <div class="chart-legend__item">
+                        <dt class="chart-legend__label">Portion 2</dt>
+                        <dd class="chart-legend__value">20%</dd>
+                    </div>
+                    <div class="chart-legend__item">
+                        <dt class="chart-legend__label">Portion 3</dt>
+                        <dd class="chart-legend__value">30%</dd>
+                    </div>
+                </dl>
+            </div>
+        </div>
+    </div>
+</div>
+    </highlight-code>
+
+</div>
+export const metadata = {
+            "ds-component": {
+                "name": "donut-chart",
+                "version": 1
+            },
+            "submodules": ["chart-legend"]
+
+};

package/src/modules/education-notice.marko

@@ -0,0 +1,253 @@
+<div id="education-notice">
+    <section-header metadata=input.metadata name=input.name/>
+
+    <h3 id="education-notice-default">Education Notice</h3>
+    <p>The education notice is meant to display a variety of informational content. By default it has a gray background color that has less prominence.</p>
+
+    <p>Education notice can use any large <span class="highlight">24x24</span> program badge icon. The icon can be black or blue. They are black by default, but approved program badges can use blue. If the blue is too prominent or noisy, program badges can use black as well.</p>
+
+    <div class="demo">
+        <div class="demo__inner">
+            <section class="education-notice" role="region" aria-label="Education" aria-roledescription="Notice">
+                <div class="education-notice__header">
+                    <svg class="icon icon--24" height="24" width="24" aria-label="Education">
+                        <icon-symbol name="lightbulb-24" />
+                    </svg>
+                    <h3 class="education-notice__title">Did you know?</h3>
+                </div>
+                <div class="education-notice__main">
+                    <p>You can now split payments on two cards.</p>
+                </div>
+            </section>
+        </div>
+    </div>
+
+    <highlight-code type="html" >
+<section class="education-notice" role="region" aria-label="Education" aria-roledescription="Notice">
+    <div class="education-notice__header">
+        <svg class="icon icon--24" height="24" width="24" aria-label="Education">
+            <use href="#icon-lightbulb-24"></use>
+        </svg>
+        <h3 class="education-notice__title">Did you know?</h3>
+    </div>
+    <div class="education-notice__main">
+        <p>You can now split payments on two cards.</p>
+    </div>
+</section>
+    </highlight-code>
+
+    <h3 id="education-notice-prominent-icon">Education Notice with a Prominent Icon</h3>
+
+    <p>Default educational notice (gray background) can use a blue icon by adding an <span class="highlight">icon--prominent</span> modifier on the icon element.</p>
+
+    <div class="demo">
+        <div class="demo__inner">
+            <section class="education-notice" role="region" aria-label="Education" aria-roledescription="Notice">
+                <div class="education-notice__header">
+                    <svg class="icon icon--24 icon--prominent" height="24" width="24" aria-label="Education">
+                        <icon-symbol name="lightbulb-24" />
+                    </svg>
+                    <h3 class="education-notice__title">Did you know?</h3>
+                </div>
+                <div class="education-notice__main">
+                    <p>You can now split payments on two cards.</p>
+                </div>
+            </section>
+        </div>
+    </div>
+
+    <highlight-code type="html" >
+<section class="education-notice" role="region" aria-label="Education" aria-roledescription="Notice">
+    <div class="education-notice__header">
+        <svg class="icon icon--24 icon--prominent" height="24" width="24" aria-label="Education">
+            <use href="#icon-lightbulb-24"></use>
+        </svg>
+        <h3 class="education-notice__title">Did you know?</h3>
+    </div>
+    <div class="education-notice__main">
+        <p>You can now split payments on two cards.</p>
+    </div>
+</section>
+    </highlight-code>
+
+    <h3 id="education-notice-prominent">Prominent Education Notice</h3>
+    <p>The prominent education notice includes a background color that pops a bit more. It can be used with a <span class="highlight">education-notice--prominent</span> modifier.</p>
+
+    <div class="demo">
+        <div class="demo__inner">
+            <section class="education-notice education-notice--prominent" role="region" aria-label="Education" aria-roledescription="Notice">
+                <div class="education-notice__header">
+                    <svg class="icon icon--24" height="24" width="24" aria-label="Education">
+                        <icon-symbol name="authenticity-guarantee-24" />
+                    </svg>
+                    <h3 class="education-notice__title">Authenticity Guaranteed</h3>
+                </div>
+                <div class="education-notice__main">
+                    <p>Authenticity Guarantee means your item is authentic or your money back.</p>
+                </div>
+            </section>
+        </div>
+    </div>
+
+    <highlight-code type="html" >
+<section class="education-notice education-notice--prominent" role="region" aria-label="Education" aria-roledescription="Notice">
+    <div class="education-notice__header">
+        <svg class="icon icon--24" height="24" width="24" aria-label="Education">
+            <use href="#icon-authenticity-guarantee-24"></use>
+        </svg>
+        <h3 class="education-notice__title">Authenticity Guaranteed</h3>
+    </div>
+    <div class="education-notice__main">
+        <p>Authenticity Guarantee means your item is authentic or your money back.</p>
+    </div>
+</section>
+    </highlight-code>
+
+    <h3 id="education-notice-default">Dismissable Education Notice</h3>
+    <p>A close button can be placed in a <span class="highlight">education-notice__header</span> element.</p>
+
+    <div class="demo">
+        <div class="demo__inner">
+            <section class="education-notice" role="region" aria-label="Education" aria-roledescription="Notice">
+                <div class="education-notice__header">
+                    <svg class="icon icon--24" height="24" width="24" aria-label="Education">
+                        <icon-symbol name="lightbulb-24" />
+                    </svg>
+                    <h3 class="education-notice__title">Did you know?</h3>
+                    <button aria-label="Close notice" type="button" class="icon-btn icon-btn--small education-notice__dismiss">
+                        <svg aria-hidden="true" class="icon icon--16" height="16" width="16">
+                        <icon-symbol name="close-16" />
+                        </svg>
+                    </button>
+                </div>
+                <div class="education-notice__main">
+                    <p>You can now split payments on two cards.</p>
+                </div>
+            </section>
+        </div>
+    </div>
+
+    <highlight-code type="html" >
+<section class="education-notice" role="region" aria-label="Education" aria-roledescription="Notice">
+    <div class="education-notice__header">
+        <svg class="icon icon--24" height="24" width="24" aria-label="Education">
+            <use href="#icon-lightbulb-24"></use>
+        </svg>
+        <h3 class="education-notice__title">Did you know?</h3>
+        <button aria-label="Close notice" type="button" class="icon-btn icon-btn--small education-notice__dismiss">
+            <svg aria-hidden="true" class="icon icon--16" height="16" width="16">
+                <use href="#icon-close-16"></use>
+            </svg>
+        </button>
+    </div>
+    <div class="education-notice__main">
+        <p>You can now split payments on two cards.</p>
+    </div>
+</section>
+    </highlight-code>
+
+    <h3 id="education-notice-actionable">Actionable Education Notice</h3>
+    <p>Link or button actions can be placed in the <span class="highlight">education-notice__footer</span> element.</p>
+
+    <h4 id="education-notice-actionable-using-link">Actionable Education Notice Using Link</h4>
+    <div class="demo">
+        <div class="demo__inner">
+            <section class="education-notice" role="region" aria-label="Education" aria-roledescription="Notice">
+                <div class="education-notice__header">
+                    <svg class="icon icon--24" height="24" width="24" aria-label="Education">
+                        <icon-symbol name="the-ebay-vault-24" />
+                    </svg>
+                    <h3 class="education-notice__title">The Vault</h3>
+                    <button aria-label="Close notice" type="button" class="icon-btn icon-btn--small icon-btn--small education-notice__dismiss">
+                        <svg aria-hidden="true" class="icon icon--16" height="16" width="16">
+                        <icon-symbol name="close-16" />
+                        </svg>
+                    </button>
+                </div>
+                <div class="education-notice__main">
+                    <p>You can now use the Vault to store items like this securely.</p>
+                </div>
+                <div class="education-notice__footer">
+                    <a href="https://www.ebay.com">Learn more link</a>
+                </div>
+            </section>
+        </div>
+    </div>
+
+    <highlight-code type="html" >
+<section class="education-notice" role="region" aria-label="Education" aria-roledescription="Notice">
+    <div class="education-notice__header">
+        <svg class="icon icon--24" height="24" width="24" aria-label="Education">
+            <use href="#icon-the-ebay-vault-24"></use>
+        </svg>
+        <h3 class="education-notice__title">The Vault</h3>
+        <button aria-label="Close notice" type="button" class="icon-btn icon-btn--small education-notice__dismiss">
+            <svg aria-hidden="true" class="icon icon--16" height="16" width="16">
+                <use href="#icon-close-16"></use>
+            </svg>
+        </button>
+    </div>
+    <div class="education-notice__main">
+        <p>You can now use the Vault to store items like this securely.</p>
+    </div>
+    <div class="education-notice__footer">
+        <a href="https://www.ebay.com">Learn more link</a>
+    </div>
+</section>
+    </highlight-code>
+
+    <h4 id="education-notice-actionable-using-button">Actionable Education Notice Using Fake Button</h4>
+    <div class="demo">
+        <div class="demo__inner">
+            <section class="education-notice" role="region" aria-label="Education" aria-roledescription="Notice">
+                <div class="education-notice__header">
+                    <svg class="icon icon--24" height="24" width="24" aria-label="Education">
+                        <icon-symbol name="the-ebay-vault-24" />
+                    </svg>
+                    <h3 class="education-notice__title">The Vault</h3>
+                    <button aria-label="Close notice" type="button" class="icon-btn icon-btn--small education-notice__dismiss">
+                        <svg aria-hidden="true" class="icon icon--16" height="16" width="16">
+                        <icon-symbol name="close-16" />
+                        </svg>
+                    </button>
+                </div>
+                <div class="education-notice__main">
+                    <p>You can now use the Vault to store items like this securely.</p>
+                </div>
+                <div class="education-notice__footer">
+                    <button class="fake-link">Learn more button</button>
+                </div>
+            </section>
+        </div>
+    </div>
+
+    <highlight-code type="html" >
+<section class="education-notice" role="region" aria-label="Education" aria-roledescription="Notice">
+    <div class="education-notice__header">
+        <svg class="icon icon--24" height="24" width="24" aria-label="Education">
+            <use href="#icon-the-ebay-vault-24"></use>
+        </svg>
+        <h3 class="education-notice__title">The Vault</h3>
+        <button aria-label="Close notice" type="button" class="icon-btn icon-btn--small education-notice__dismiss">
+            <svg aria-hidden="true" class="icon icon--16" height="16" width="16">
+                <use href="#icon-close-16"></use>
+            </svg>
+        </button>
+    </div>
+    <div class="education-notice__main">
+        <p>You can now use the Vault to store items like this securely.</p>
+    </div>
+    <div class="education-notice__footer">
+        <button class="fake-link">Learn more button</button>
+    </div>
+</section>
+    </highlight-code>
+
+</div>
+export const metadata = {
+            "ds-component": {
+                "name": "education-notice",
+                "version": 1
+            }
+
+};