@ebay/skin 18.1.0 → 18.2.1

package/src/sass/fullscreen-dialog/stories/fullscreen-dialog.stories.js

@@ -1,168 +0,0 @@
-export default { title: "Skin/Fullscreen Dialog (DEPRECATED)" };
-
-export const closeButton = () => `
-<div aria-labelledby="fullscreen-dialog-title" aria-modal="true" class="fullscreen-dialog" role="dialog">
-    <div class="fullscreen-dialog__window">
-        <div class="fullscreen-dialog__header">
-            <h2 id="fullscreen-dialog-title">Dialog Full</h2>
-            <button class="icon-btn fullscreen-dialog__close" type="button" aria-label="Close Dialog">
-                <svg class="icon icon--16" aria-hidden="true">
-                    <use href="#icon-close-16"></use>
-                </svg>
-            </button>
-        </div>
-        <div class="fullscreen-dialog__main">
-            <h3>Heading</h3>
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.</p>
-            <p><a href="http://www.ebay.com">www.ebay.com</a></p>
-            <h3>Heading</h3>
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.</p>
-            <p><a href="http://www.ebay.com">www.ebay.com</a></p>
-        </div>
-    </div>
-</div>
-`;
-
-export const withFooter = () => `
-<div aria-labelledby="fullscreen-dialog-title" aria-modal="true" class="fullscreen-dialog" role="dialog">
-    <div class="fullscreen-dialog__window">
-        <div class="fullscreen-dialog__header">
-            <h2 id="fullscreen-dialog-title">Dialog Full</h2>
-            <button class="icon-btn fullscreen-dialog__close" type="button" aria-label="Close Dialog">
-                <svg class="icon icon--16" aria-hidden="true">
-                    <use href="#icon-close-16"></use>
-                </svg>
-            </button>
-        </div>
-        <div class="fullscreen-dialog__main">
-            <h3>Heading</h3>
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.</p>
-            <p><a href="http://www.ebay.com">www.ebay.com</a></p>
-            <h3>Heading</h3>
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.</p>
-            <p><a href="http://www.ebay.com">www.ebay.com</a></p>
-        </div>
-        <div class="fullscreen-dialog__footer">
-            <button class="btn btn--primary">Submit</button>
-            <button class="btn">Cancel</button>
-        </div>
-    </div>
-</div>
-`;
-
-export const RTL = () => `
-<div dir="rtl">
-    <div aria-labelledby="fullscreen-dialog-title" aria-modal="true" class="fullscreen-dialog" role="dialog">
-        <div class="fullscreen-dialog__window">
-            <div class="fullscreen-dialog__header">
-                <h2 id="fullscreen-dialog-title">Dialog Full</h2>
-                <button class="icon-btn fullscreen-dialog__close" type="button" aria-label="Close Dialog">
-                    <svg class="icon icon--16" aria-hidden="true">
-                        <use href="#icon-close-16"></use>
-                    </svg>
-                </button>
-            </div>
-            <div class="fullscreen-dialog__main">
-                <h3>Heading</h3>
-                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.</p>
-                <p><a href="http://www.ebay.com">www.ebay.com</a></p>
-                <h3>Heading</h3>
-                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.</p>
-                <p><a href="http://www.ebay.com">www.ebay.com</a></p>
-            </div>
-        </div>
-    </div>
-<div>
-`;
-
-export const backButton = () => `
-<div aria-labelledby="fullscreen-dialog-title" aria-modal="true" class="fullscreen-dialog" role="dialog">
-    <div class="fullscreen-dialog__window">
-        <div class="fullscreen-dialog__header">
-            <h2 id="fullscreen-dialog-title">Fullscreen Dialog</h2>
-            <button class="icon-btn fullscreen-dialog__back" type="button" aria-label="Back">
-                <svg class="icon icon--back" aria-hidden="true">
-                    <use href="#icon-back"></use>
-                </svg>
-            </button>
-        </div>
-        <div class="fullscreen-dialog__main">
-            <h3>Heading</h3>
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.</p>
-            <p><a href="http://www.ebay.com">www.ebay.com</a></p>
-            <h3>Heading</h3>
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.</p>
-            <p><a href="http://www.ebay.com">www.ebay.com</a></p>
-        </div>
-    </div>
-</div>
-`;
-
-export const secondaryButton = () => `
-<div aria-labelledby="fullscreen-dialog-title" aria-modal="true" class="fullscreen-dialog" role="dialog">
-    <div class="fullscreen-dialog__window">
-        <div class="fullscreen-dialog__header">
-            <h2 id="fullscreen-dialog-title">Fullscreen Dialog</h2>
-            <button class="fake-link fullscreen-dialog__close" type="button">Reset</button>
-        </div>
-        <div class="fullscreen-dialog__main">
-            <h3>Heading</h3>
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.</p>
-            <p><a href="http://www.ebay.com">www.ebay.com</a></p>
-            <h3>Heading</h3>
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.</p>
-            <p><a href="http://www.ebay.com">www.ebay.com</a></p>
-        </div>
-    </div>
-</div>
-`;
-
-export const textSpacing = () => `
-<div aria-labelledby="fullscreen-dialog-title" aria-modal="true" class="fullscreen-dialog demo-a11y-text-spacing" role="dialog">
-    <div class="fullscreen-dialog__window">
-        <div class="fullscreen-dialog__header">
-            <h2 id="fullscreen-dialog-title">Dialog Full</h2>
-            <button class="icon-btn fullscreen-dialog__close" type="button" aria-label="Close Dialog">
-                <svg class="icon icon--16" aria-hidden="true">
-                    <use href="#icon-close-16"></use>
-                </svg>
-            </button>
-        </div>
-        <div class="fullscreen-dialog__main">
-            <h3>Heading</h3>
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.</p>
-            <p><a href="http://www.ebay.com">www.ebay.com</a></p>
-            <h3>Heading</h3>
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.</p>
-            <p><a href="http://www.ebay.com">www.ebay.com</a></p>
-        </div>
-        <div class="fullscreen-dialog__footer">
-            <button class="btn btn--primary">Submit</button>
-            <button class="btn">Cancel</button>
-        </div>
-    </div>
-</div>
-`;
-
-export const closeButtonWithHeaderOverflow = () => `
-<div aria-labelledby="fullscreen-dialog-title" aria-modal="true" class="fullscreen-dialog" role="dialog">
-    <div class="fullscreen-dialog__window">
-        <div class="fullscreen-dialog__header">
-            <h2 id="fullscreen-dialog-title">Dialog Full screen with title so long that it needs to wrap into multiple lines. This is a fullscreen dialog so it needs to be even longer than in others before it overflows. No dialog header should ever be this long.</h2>
-            <button class="icon-btn fullscreen-dialog__close" type="button" aria-label="Close Dialog">
-                <svg class="icon icon--close-16" aria-hidden="true">
-                    <use href="#icon-close-16"></use>
-                </svg>
-            </button>
-        </div>
-        <div class="fullscreen-dialog__main">
-            <h3>Heading</h3>
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.</p>
-            <p><a href="http://www.ebay.com">www.ebay.com</a></p>
-            <h3>Heading</h3>
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.</p>
-            <p><a href="http://www.ebay.com">www.ebay.com</a></p>
-        </div>
-    </div>
-</div>
-`;

package/src/sass/gh/_gh-mixins.scss

@@ -1,197 +0,0 @@
-/* stylelint-disable no-invalid-position-at-import-rule */
-
-@mixin alert-dialog-mixin() {
-    @import "../../../dist/alert-dialog/alert-dialog.css";
-}
-
-@mixin badge-mixin() {
-    @import "../../../dist/badge/badge.css";
-}
-
-@mixin breadcrumbs-mixin() {
-    @import "../../../dist/breadcrumbs/breadcrumbs.css";
-}
-
-@mixin button-mixin() {
-    @import "../../../dist/button/button.css";
-}
-
-@mixin carousel-mixin() {
-    @import "../../../dist/carousel/carousel.css";
-}
-
-@mixin checkbox-mixin() {
-    @import "../../../dist/checkbox/checkbox.css";
-}
-
-@mixin combobox-mixin() {
-    @import "../../../dist/combobox/combobox.css";
-}
-
-@mixin confirm-dialog-mixin() {
-    @import "../../../dist/confirm-dialog/confirm-dialog.css";
-}
-
-@mixin cta-button-mixin() {
-    @import "../../../dist/cta-button/cta-button.css";
-}
-
-@mixin drawer-dialog-mixin() {
-    @import "../../../dist/drawer-dialog/drawer-dialog.css";
-}
-
-@mixin eek-mixin() {
-    @import "../../../dist/eek/eek.css";
-}
-
-@mixin field-mixin() {
-    @import "../../../dist/field/field.css";
-}
-
-@mixin filter-button-mixin() {
-    @import "../../../dist/filter-button/filter-button.css";
-}
-
-@mixin filter-menu-mixin() {
-    @import "../../../dist/filter-menu/filter-menu.css";
-}
-
-@mixin filter-menu-button-mixin() {
-    @import "../../../dist/filter-menu-button/filter-menu-button.css";
-}
-
-@mixin floating-label-mixin() {
-    @import "../../../dist/floating-label/floating-label.css";
-}
-
-@mixin fullscreen-dialog-mixin() {
-    @import "../../../dist/fullscreen-dialog/fullscreen-dialog.css";
-}
-
-@mixin global-mixin() {
-    @import "../../../dist/global/global.css";
-}
-
-@mixin icon-mixin() {
-    @import "../../../dist/icon/icon.css";
-}
-
-@mixin icon-button-mixin() {
-    @import "../../../dist/icon-button/icon-button.css";
-}
-
-@mixin infotip-mixin() {
-    @import "../../../dist/infotip/infotip.css";
-}
-
-@mixin inline-notice-mixin() {
-    @import "../../../dist/inline-notice/inline-notice.css";
-}
-
-@mixin lightbox-dialog-mixin() {
-    @import "../../../dist/lightbox-dialog/lightbox-dialog.css";
-}
-
-@mixin link-mixin() {
-    @import "../../../dist/link/link.css";
-}
-
-@mixin listbox-mixin() {
-    @import "../../../dist/listbox/listbox.css";
-}
-
-@mixin listbox-button-mixin() {
-    @import "../../../dist/listbox-button/listbox-button.css";
-}
-
-@mixin menu-mixin() {
-    @import "../../../dist/menu/menu.css";
-}
-
-@mixin menu-button-mixin() {
-    @import "../../../dist/menu-button/menu-button.css";
-}
-
-@mixin page-grid-mixin() {
-    @import "../../../dist/page-grid/page-grid.css";
-}
-
-@mixin page-notice-mixin() {
-    @import "../../../dist/page-notice/page-notice.css";
-}
-
-@mixin pagination-mixin() {
-    @import "../../../dist/pagination/pagination.css";
-}
-
-@mixin panel-dialog-mixin() {
-    @import "../../../dist/panel-dialog/panel-dialog.css";
-}
-
-@mixin progress-bar-mixin() {
-    @import "../../../dist/progress-bar/progress-bar.css";
-}
-
-@mixin progress-spinner-mixin() {
-    @import "../../../dist/progress-spinner/progress-spinner.css";
-}
-
-@mixin progress-stepper-mixin() {
-    @import "../../../dist/progress-stepper/progress-stepper.css";
-}
-
-@mixin radio-mixin() {
-    @import "../../../dist/radio/radio.css";
-}
-
-@mixin section-notice-mixin() {
-    @import "../../../dist/section-notice/section-notice.css";
-}
-
-@mixin section-title-mixin() {
-    @import "../../../dist/section-title/section-title.css";
-}
-
-@mixin select-mixin() {
-    @import "../../../dist/select/select.css";
-}
-
-@mixin signal-mixin() {
-    @import "../../../dist/signal/signal.css";
-}
-
-@mixin snackbar-dialog-mixin() {
-    @import "../../../dist/snackbar-dialog/snackbar-dialog.css";
-}
-
-@mixin switch-mixin() {
-    @import "../../../dist/switch/switch.css";
-}
-
-@mixin tabs-mixin() {
-    @import "../../../dist/tabs/tabs.css";
-}
-
-@mixin textbox-mixin() {
-    @import "../../../dist/textbox/textbox.css";
-}
-
-@mixin toast-dialog-mixin() {
-    @import "../../../dist/toast-dialog/toast-dialog.css";
-}
-
-@mixin tooltip-mixin() {
-    @import "../../../dist/tooltip/tooltip.css";
-}
-
-@mixin tourtip-mixin() {
-    @import "../../../dist/tourtip/tourtip.css";
-}
-
-@mixin typography-mixin() {
-    @import "../../../dist/typography/typography.css";
-}
-
-@mixin utility-mixin() {
-    @import "../../../dist/utility/utility.css";
-}

package/src/sass/gh/gh-mixins.less

@@ -1,195 +0,0 @@
-.alert-dialog-mixin() {
-    @import "../../../dist/alert-dialog/alert-dialog.css";
-}
-
-.badge-mixin() {
-    @import "../../../dist/badge/badge.css";
-}
-
-.breadcrumbs-mixin() {
-    @import "../../../dist/breadcrumbs/breadcrumbs.css";
-}
-
-.button-mixin() {
-    @import "../../../dist/button/button.css";
-}
-
-.carousel-mixin() {
-    @import "../../../dist/carousel/carousel.css";
-}
-
-.checkbox-mixin() {
-    @import "../../../dist/checkbox/checkbox.css";
-}
-
-.combobox-mixin() {
-    @import "../../../dist/combobox/combobox.css";
-}
-
-.confirm-dialog-mixin() {
-    @import "../../../dist/confirm-dialog/confirm-dialog.css";
-}
-
-.cta-button-mixin() {
-    @import "../../../dist/cta-button/cta-button.css";
-}
-
-.drawer-dialog-mixin() {
-    @import "../../../dist/drawer-dialog/drawer-dialog.css";
-}
-
-.eek-mixin() {
-    @import "../../../dist/eek/eek.css";
-}
-
-.field-mixin() {
-    @import "../../../dist/field/field.css";
-}
-
-.filter-button-mixin() {
-    @import "../../../dist/filter-button/filter-button.css";
-}
-
-.filter-menu-mixin() {
-    @import "../../../dist/filter-menu/filter-menu.css";
-}
-
-.filter-menu-button-mixin() {
-    @import "../../../dist/filter-menu-button/filter-menu-button.css";
-}
-
-.floating-label-mixin() {
-    @import "../../../dist/floating-label/floating-label.css";
-}
-
-.fullscreen-dialog-mixin() {
-    @import "../../../dist/fullscreen-dialog/fullscreen-dialog.css";
-}
-
-.global-mixin() {
-    @import "../../../dist/global/global.css";
-}
-
-.icon-mixin() {
-    @import "../../../dist/icon/icon.css";
-}
-
-.icon-button-mixin() {
-    @import "../../../dist/icon-button/icon-button.css";
-}
-
-.infotip-mixin() {
-    @import "../../../dist/infotip/infotip.css";
-}
-
-.inline-notice-mixin() {
-    @import "../../../dist/inline-notice/inline-notice.css";
-}
-
-.lightbox-dialog-mixin() {
-    @import "../../../dist/lightbox-dialog/lightbox-dialog.css";
-}
-
-.link-mixin() {
-    @import "../../../dist/link/link.css";
-}
-
-.listbox-mixin() {
-    @import "../../../dist/listbox/listbox.css";
-}
-
-.listbox-button-mixin() {
-    @import "../../../dist/listbox-button/listbox-button.css";
-}
-
-.menu-mixin() {
-    @import "../../../dist/menu/menu.css";
-}
-
-.menu-button-mixin() {
-    @import "../../../dist/menu-button/menu-button.css";
-}
-
-.page-grid-mixin() {
-    @import "../../../dist/page-grid/page-grid.css";
-}
-
-.page-notice-mixin() {
-    @import "../../../dist/page-notice/page-notice.css";
-}
-
-.pagination-mixin() {
-    @import "../../../dist/pagination/pagination.css";
-}
-
-.panel-dialog-mixin() {
-    @import "../../../dist/panel-dialog/panel-dialog.css";
-}
-
-.progress-bar-mixin() {
-    @import "../../../dist/progress-bar/progress-bar.css";
-}
-
-.progress-spinner-mixin() {
-    @import "../../../dist/progress-spinner/progress-spinner.css";
-}
-
-.progress-stepper-mixin() {
-    @import "../../../dist/progress-stepper/progress-stepper.css";
-}
-
-.radio-mixin() {
-    @import "../../../dist/radio/radio.css";
-}
-
-.section-notice-mixin() {
-    @import "../../../dist/section-notice/section-notice.css";
-}
-
-.section-title-mixin() {
-    @import "../../../dist/section-title/section-title.css";
-}
-
-.select-mixin() {
-    @import "../../../dist/select/select.css";
-}
-
-.signal-mixin() {
-    @import "../../../dist/signal/signal.css";
-}
-
-.snackbar-dialog-mixin() {
-    @import "../../../dist/snackbar-dialog/snackbar-dialog.css";
-}
-
-.switch-mixin() {
-    @import "../../../dist/switch/switch.css";
-}
-
-.tabs-mixin() {
-    @import "../../../dist/tabs/tabs.css";
-}
-
-.textbox-mixin() {
-    @import "../../../dist/textbox/textbox.css";
-}
-
-.toast-dialog-mixin() {
-    @import "../../../dist/toast-dialog/toast-dialog.css";
-}
-
-.tooltip-mixin() {
-    @import "../../../dist/tooltip/tooltip.css";
-}
-
-.tourtip-mixin() {
-    @import "../../../dist/tourtip/tourtip.css";
-}
-
-.typography-mixin() {
-    @import "../../../dist/typography/typography.css";
-}
-
-.utility-mixin() {
-    @import "../../../dist/utility/utility.css";
-}

package/src/sass/global/global.scss

@@ -1,50 +0,0 @@
-@import "../variables/variables";
-@import "../mixins/private/token-mixins";
-
-body {
-    @include background-color-token(color-background-primary);
-    @include color-token(color-foreground-primary);
-
-    font-family: $font-family-default;
-    font-size: var(--font-size-default);
-    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
-    -webkit-text-size-adjust: 100%;
-}
-
-fieldset {
-    border: 0;
-    padding: 0;
-}
-
-legend {
-    margin-bottom: var(--spacing-100);
-}
-
-a {
-    @include color-token(
-        link-foreground-color-default,
-        color-foreground-primary
-    );
-
-    &:visited {
-        @include color-token(
-            link-foreground-color-visited,
-            color-foreground-visited
-        );
-    }
-
-    &:hover {
-        @include color-token(
-            link-foreground-color-hover,
-            color-foreground-secondary
-        );
-    }
-
-    &:not([href]),
-    &[aria-disabled="true"] {
-        @include color-token(
-            link-forground-color-disabled,
-            color-foreground-disabled
-        );
-    }
-}