@ebay/skin 18.1.0 → 18.2.0

package/src/modules/section-notice.marko

@@ -0,0 +1,387 @@
+<div id="section-notice">
+    <section-header metadata=input.metadata name=input.name/>
+
+    <p>
+        A section notice conveys either system status and feedback to users about their actions and options or, for${" "}
+        <em>educational</em>
+        ${" "}section notices, contextually educates users about programs, features and opportunities.
+    </p>
+    <p>
+        To aid discoverabilty for assistive technology, each section notice is a labelled landmark region.
+    </p>
+
+    <div class="demo">
+        <div class="demo__inner">
+            <section
+                class="section-notice"
+                role="region"
+                aria-label="Notice"
+                aria-roledescription="Notice"
+            >
+                <div class="section-notice__main">
+                    <p>
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                    </p>
+                </div>
+            </section>
+        </div>
+    </div>
+
+    <highlight-code
+        type="html"
+        >
+<section class="section-notice" role="region" aria-label="Notice" aria-roledescription="Notice">
+    <div class="section-notice__main">
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+    </div>
+</section>
+    </highlight-code>
+
+    <h3 id="section-notice-status">
+        Status Section Notice
+    </h3>
+    <p>
+        A status-based section notice has a 16x16 icon representing confirmation, attention or information.
+    </p>
+
+    <div class="demo">
+        <div class="demo__inner">
+            <section
+                class="section-notice"
+                role="region"
+                aria-label="Confirmation"
+                aria-roledescription="Notice"
+            >
+                <div
+                    class="section-notice__header"
+                    id="section-notice-confirmation"
+                >
+                    <svg
+                        class="icon icon--16 icon--confirmation-filled"
+                        height="16"
+                        width="16"
+                        role="img"
+                        aria-label="Confirmation"
+                    >
+                        <icon-symbol name="confirmation-filled-16"/>
+                    </svg>
+                </div>
+                <div class="section-notice__main">
+                    <p>
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                    </p>
+                </div>
+            </section>
+
+            <section
+                class="section-notice"
+                role="region"
+                aria-label="Attention"
+                aria-roledescription="Notice"
+            >
+                <div
+                    class="section-notice__header"
+                    id="section-notice-attention"
+                >
+                    <svg
+                        class="icon icon--16 icon--attention-filled"
+                        height="16"
+                        width="16"
+                        aria-label="Attention"
+                    >
+                        <icon-symbol name="attention-filled-16"/>
+                    </svg>
+                </div>
+                <div class="section-notice__main">
+                    <p>
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                    </p>
+                </div>
+            </section>
+
+            <section
+                class="section-notice"
+                role="region"
+                aria-label="Information"
+                aria-roledescription="Notice"
+            >
+                <div
+                    class="section-notice__header"
+                    id="section-notice-information"
+                >
+                    <svg
+                        class="icon icon--16 icon--information-filled"
+                        height="16"
+                        width="16"
+                        aria-label="Information"
+                    >
+                        <icon-symbol name="information-filled-16"/>
+                    </svg>
+                </div>
+                <div class="section-notice__main">
+                    <p>
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                    </p>
+                </div>
+            </section>
+        </div>
+    </div>
+
+    <highlight-code
+        type="html"
+        >
+<section class="section-notice" role="region" aria-label="Confirmation" aria-roledescription="Notice">
+    <div class="section-notice__header" id="section-notice-confirmation">
+        <svg class="icon icon--16" height="16" width="16" role="img" aria-label="Confirmation">
+            <use href="#icon-confirmation-filled-16"></use>
+        </svg>
+    </div>
+    <div class="section-notice__main">
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+    </div>
+</section>
+
+<section class="section-notice" role="region" aria-label="Attention" aria-roledescription="Notice">
+    <div class="section-notice__header" id="section-notice-attention">
+        <svg class="icon icon--16 icon--attention-filled" height="16" width="16" aria-label="Attention">
+            <use href="#icon-attention-filled-16"></use>
+        </svg>
+    </div>
+    <div class="section-notice__main">
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+    </div>
+</section>
+
+<section class="section-notice" role="region" aria-label="Information" aria-roledescription="Notice">
+    <div class="section-notice__header" id="section-notice-information">
+        <svg class="icon icon--16 icon--information-filled" height="16" width="16" aria-label="Information">
+            <use href="#icon-information-filled-16"></use>
+        </svg>
+    </div>
+    <div class="section-notice__main">
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+    </div>
+</section>
+    </highlight-code>
+
+    <h3 id="section-notice-titled">
+        Titled Section Notice
+    </h3>
+    <p>Use a heading element to create a titled section notice.</p>
+
+    <div class="demo">
+        <div class="demo__inner">
+            <section
+                class="section-notice"
+                role="region"
+                aria-label="Confirmation"
+                aria-roledescription="Notice"
+            >
+                <div
+                    class="section-notice__header"
+                    id="section-notice-confirmation"
+                >
+                    <svg
+                        class="icon icon--16 icon--confirmation-filled"
+                        height="16"
+                        width="16"
+                        role="img"
+                        aria-label="Confirmation"
+                    >
+                        <icon-symbol name="confirmation-filled-16"/>
+                    </svg>
+                </div>
+                <div class="section-notice__main">
+                    <h3 class="section-notice__title">
+                        Notification title
+                    </h3>
+                    <p>
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                    </p>
+                </div>
+            </section>
+        </div>
+    </div>
+
+    <highlight-code
+        type="html"
+        >
+<section class="section-notice" role="region" aria-label="Confirmation" aria-roledescription="Notice">
+    <div class="section-notice__header" id="section-notice-confirmation">
+        <svg class="icon icon--16 icon--confirmation-filled" height="16" width="16" role="img" aria-label="Confirmation">
+            <use href="#icon-confirmation-filled-16"></use>
+        </svg>
+    </div>
+    <div class="section-notice__main">
+        <h3 class="section-notice__title">Notification title</h3>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+    </div>
+</section>
+    </highlight-code>
+
+    <h3 id="section-notice-dismissable">
+        Dismissable Section Notice
+    </h3>
+    <p>
+        A close button can be placed in a
+        <span class="highlight">
+            section-notice__footer
+        </span>
+         element.
+    </p>
+
+    <div class="demo">
+        <div class="demo__inner">
+            <section
+                class="section-notice"
+                role="region"
+                aria-label="Confirmation"
+                aria-roledescription="Notice"
+            >
+                <div
+                    class="section-notice__header"
+                    id="section-notice-confirmation"
+                >
+                    <svg
+                        class="icon icon--16 icon--confirmation-filled"
+                        height="16"
+                        width="16"
+                        role="img"
+                        aria-label="Confirmation"
+                    >
+                        <icon-symbol name="confirmation-filled-16"/>
+                    </svg>
+                </div>
+                <div class="section-notice__main">
+                    <h3 class="section-notice__title">
+                        Notification title
+                    </h3>
+                    <p>
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                    </p>
+                </div>
+                <div class="section-notice__footer">
+                    <button
+                        aria-label="Close notice"
+                        class="fake-link section-notice__dismiss"
+                    >
+                        <svg
+                            aria-hidden="true"
+                            class="icon icon--16"
+                            height="16"
+                            width="16"
+                        >
+                            <icon-symbol name="close-16"/>
+                        </svg>
+                    </button>
+                </div>
+            </section>
+        </div>
+    </div>
+
+    <highlight-code
+        type="html"
+        >
+<section class="section-notice" role="region" aria-label="Confirmation" aria-roledescription="Notice">
+    <div class="section-notice__header" id="section-notice-confirmation">
+        <svg class="icon icon--16 icon--confirmation-filled" height="16" width="16" role="img" aria-label="Confirmation">
+            <use href="#icon-confirmation-filled-16"></use>
+        </svg>
+    </div>
+    <div class="section-notice__main">
+        <h3 class="section-notice__title">Notification title</h3>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+    </div>
+    <div class="section-notice__footer">
+        <button aria-label="Close notice" class="fake-link section-notice__dismiss">
+            <svg aria-hidden="true" class="icon icon--16" height="16" width="16">
+                <use href="#icon-close-16"></use>
+            </svg>
+        </button>
+    </div>
+</section>
+    </highlight-code>
+
+    <h3 id="section-notice-actionable">
+        Actionable Section Notice
+    </h3>
+    <p>
+        Link or button actions can be placed in a
+        <span class="highlight">
+            section-notice__cta
+        </span>
+         element.
+    </p>
+    <section class="section-notice" role="region" aria-label="Confirmation">
+        <div class="section-notice__header">
+            <svg
+                class="icon icon--16 icon--confirmation-filled"
+                height="16"
+                width="16"
+                role="img"
+                aria-label="Confirmation"
+            >
+                <icon-symbol name="confirmation-filled-16"/>
+            </svg>
+        </div>
+        <div class="section-notice__main">
+            <h3 class="section-notice__title">
+                Notification title
+            </h3>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+        </div>
+        <p class="section-notice__cta">
+            <a href="https://www.ebay.com">
+                Action
+            </a>
+        </p>
+        <div class="section-notice__footer">
+            <button
+                aria-label="Close notice"
+                class="fake-link section-notice__dismiss"
+            >
+                <svg
+                    aria-hidden="true"
+                    class="icon icon--16"
+                    height="16"
+                    width="16"
+                >
+                    <icon-symbol name="close-16"/>
+                </svg>
+            </button>
+        </div>
+    </section>
+
+    <highlight-code
+        type="html"
+        >
+<section class="section-notice" role="region" aria-label="Confirmation" aria-roledescription="Notice">
+    <div class="section-notice__header">
+        <svg class="icon icon--16 icon--confirmation-filled" height="16" width="16" role="img" aria-label="Confirmation">
+            <use href="#icon-confirmation-filled-16"></use>
+        </svg>
+    </div>
+    <div class="section-notice__main">
+        <h3 class="section-notice__title">Notification title</h3>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+    </div>
+    <p class="section-notice__cta">
+        <a href="https://www.ebay.com">Action</a>
+    </p>
+    <div class="section-notice__footer">
+        <button aria-label="Close notice" class="fake-link section-notice__dismiss">
+            <svg aria-hidden="true" class="icon icon--16" height="16" width="16">
+                <use href="#icon-close-16"></use>
+            </svg>
+        </button>
+    </div>
+</section>
+</highlight-code>
+</div>
+export const metadata = {
+    "ds-component": {
+        name: "alert-notice",
+        version: 3,
+    },
+    submodules: ["icon"],
+};

package/src/modules/section-title.marko

@@ -0,0 +1,233 @@
+<div id="section-title">
+    <section-header metadata=input.metadata name=input.name/>
+
+    <p>Section titles function as identifiers for groups of elements.</p>
+
+    <h3 id="section-title-static">
+        Static Section Title
+    </h3>
+    <p>
+        The standard, static section title is designed to support a single line on desktop and wrap only when displayed on narrow screens such as mWeb or native.
+    </p>
+
+    <div class="demo">
+        <div class="demo__inner">
+            <div class="section-title">
+                <div class="section-title__title-container">
+                    <h2 class="section-title__title">
+                        Static Section Title
+                    </h2>
+                </div>
+            </div>
+        </div>
+    </div>
+    <highlight-code
+        type="html"
+        >
+<div class="section-title">
+    <div class="section-title__title-container">
+        <h2 class="section-title__title">Static Section Title</h2>
+    </div>
+</div>
+    </highlight-code>
+
+    <h3 id="section-title-subtitled">
+        Subtitled Section Title
+    </h3>
+    <p>
+        The subtitle is designed to support any additional information. This text should be concise and fit onto a single line.
+    </p>
+
+    <div class="demo">
+        <div class="demo__inner">
+            <div class="section-title">
+                <div class="section-title__title-container">
+                    <h2 class="section-title__title">
+                        Subtitled Section Title
+                    </h2>
+                    <span class="section-title__subtitle">
+                        Plus, guaranteed best prices.
+                    </span>
+                </div>
+            </div>
+        </div>
+    </div>
+    <highlight-code
+        type="html"
+        >
+<div class="section-title">
+    <div class="section-title__title-container">
+        <h2 class="section-title__title">Subtitled Section Title</h2>
+        <span class="section-title__subtitle">Plus, guaranteed best prices.</span>
+    </div>
+</div>
+    </highlight-code>
+
+    <h3 id="section-title-link">
+        Linked Section Title
+    </h3>
+    <p>
+        An arrow icon gives visual affordance that the title is a link. A linked section title can also have a subtitle.
+    </p>
+
+    <div class="demo">
+        <div class="demo__inner">
+            <div class="section-title">
+                <div class="section-title__title-container">
+                    <h2 class="section-title__title">
+                        Linked Section Title
+                    </h2>
+                </div>
+                <a class="section-title__cta" href="https://www.ebay.com">
+                    See all
+                </a>
+            </div>
+        </div>
+    </div>
+    <highlight-code
+        type="html"
+        >
+<div class="section-title">
+    <div class="section-title__title-container">
+        <h2 class="section-title__title">Linked Section Title</h2>
+    </div>
+    <a class="section-title__cta" href="https://www.ebay.com">Link</a>
+</div>
+    </highlight-code>
+
+    <h3 id="section-title-infotip">
+        Section Title with Favorite
+    </h3>
+
+    <div class="demo">
+        <div class="demo__inner">
+            <div class="section-title">
+                <div class="section-title__title-container">
+                    <h2 class="section-title__title">
+                        Section Title with Favorite
+                    </h2>
+                </div>
+                <div class="section-title__info">
+                    <span class="infotip">
+                        <button
+                            class="icon-btn"
+                            type="button"
+                            aria-expanded="false"
+                            aria-label="Save"
+                        >
+                            <svg
+                                class="icon icon--16"
+                                width="16"
+                                height="14"
+                                aria-hidden="true"
+                            >
+                                <icon-symbol name="save-16"/>
+                            </svg>
+                        </button>
+                    </span>
+                </div>
+            </div>
+        </div>
+    </div>
+    <highlight-code
+        type="html"
+        >
+<div class="section-title">
+    <div class="section-title__title-container">
+        <h2 class="section-title__title">Section Title with Favorite</h2>
+    </div>
+    <div class="section-title__info">
+        <span class="infotip">
+            <button class="icon-btn" type="button" aria-expanded="false" aria-label="Help">
+                <svg aria-hidden="true" class="icon icon--16" width="16" height="14">
+                    <use href="#icon-save-16"></use>
+                </svg>
+            </button>
+        </span>
+    </div>
+</div>
+    </highlight-code>
+
+    <h3 id="section-title-overflow">
+        Overflow Section Title
+    </h3>
+    <p>
+        The optional overflow control can house less frequently accessed controls, (e.g., personalization feedback).
+    </p>
+
+    <div class="demo">
+        <div class="demo__inner">
+            <div class="section-title">
+                <div class="section-title__title-container">
+                    <h2 class="section-title__title">
+                        Overflow Section Title
+                    </h2>
+                </div>
+                <div class="section-title__overflow">
+                    <span class="menu-button">
+                        <button
+                            class="menu-button__button icon-btn"
+                            type="button"
+                            aria-expanded="false"
+                            aria-haspopup="true"
+                            aria-label="Options"
+                            type="button"
+                        >
+                            <svg
+                                class="icon icon--16"
+                                width="3"
+                                height="13"
+                                aria-hidden="true"
+                            >
+                                <icon-symbol name="overflow-vertical-16"/>
+                            </svg>
+                        </button>
+                        <div class="menu-button__menu menu-button__menu--reverse">
+                            <div class="menu-button__items" role="menu">
+                                <div class="menu-button__item" role="menuitem">
+                                    <span>Item 1</span>
+                                </div>
+                                <div class="menu-button__item" role="menuitem">
+                                    <span>Item 2</span>
+                                </div>
+                                <div class="menu-button__item" role="menuitem">
+                                    <span>Item 3</span>
+                                </div>
+                            </div>
+                        </div>
+                    </span>
+                </div>
+            </div>
+        </div>
+    </div>
+    <highlight-code
+        type="html"
+        >
+<div class="section-title">
+    <div class="section-title__title-container">
+        <h2 class="section-title__title">Overflow Section Title</h2>
+    </div>
+    <div class="section-title__overflow">
+        <span class="menu-button">
+            <button class="menu-button__button icon-btn" type="button" aria-expanded="false" aria-haspopup="true" aria-label="Options" type="button">
+                <svg class="icon icon--16" width="3" height="13" aria-hidden="true">
+                    <use href="#icon-overflow-vertical-16"></use>
+                </svg>
+            </button>
+            <div class="menu-button__menu menu-button__menu--reverse">
+                <div class="menu-button__items" role="menu">
+                    <div class="menu-button__item" role="menuitem"><span>Item 1</span></div>
+                    <div class="menu-button__item" role="menuitem"><span>Item 2</span></div>
+                    <div class="menu-button__item" role="menuitem"><span>Item 3</span></div>
+                </div>
+            </div>
+        </span>
+    </div>
+</div>
+    </highlight-code>
+</div>
+export const metadata = {
+    "ds-component": {
+        version: 4,
+    },
+};