@ebay/ebayui-core - npm Package Compare versions

Comparing version 0.9.1 to 1.0.0-0

dist/components/ebay-breadcrumb/index.js

@@ -11,3 +11,2 @@ 'use strict';var markoWidgets = require('marko-widgets');
     var items = inputItems.map(function (item, index) {
-        var tag = 'a';
         var ariaCurrent = null;
@@ -19,7 +18,6 @@ var role = void 0;
         if (current && !href) {
-            tag = 'span';
-            ariaCurrent = 'page';
+            ariaCurrent = 'location';
             shouldHandleClick = false;
         }
-        if (hijax) {
+        if (hijax && href) {
             role = 'button';
@@ -32,3 +30,2 @@ }
             renderBody: item.renderBody,
-            tag: tag,
             role: role,
@@ -46,4 +43,4 @@ href: href,
         hijax: hijax,
-        headingText: input.headingText || '',
-        headingLevel: input.headingLevel || 'h2' };
+        a11yHeadingText: input.a11yHeadingText || '',
+        a11yHeadingTag: input.a11yHeadingTag || 'h2' };
 
@@ -50,0 +47,0 @@ }

dist/components/ebay-breadcrumb/mock/index.js

@@ -22,3 +22,3 @@ 'use strict';var getItem = function getItem(text, href) {
     basicItems: {
-        headingText: 'Page navigation',
+        a11yHeadingText: 'Page navigation',
         items: basicItems },
@@ -31,8 +31,8 @@
     firstItemMissingHref: {
-        headingText: 'Page navigation',
+        a11yHeadingText: 'Page navigation',
         items: firstItemMissingHref },
 
-    itemsWithHeadingLevel: {
-        headingText: 'Page navigation',
-        headingLevel: 'h3',
+    itemsWithHeadingTag: {
+        a11yHeadingText: 'Page navigation',
+        a11yHeadingTag: 'h3',
         items: basicItems } };

dist/components/ebay-breadcrumb/README.md

@@ -6,3 +6,3 @@ # ebay-breadcrumb
 ```marko
-<ebay-breadcrumb heading='Page navigation'>
+<ebay-breadcrumb a11y-heading-text='Page navigation'>
     <ebay-breadcrumb-item href='https://...'>eBay</ebay-breadcrumb-item>
@@ -17,4 +17,4 @@ <ebay-breadcrumb-item href='https://...'>Auto Parts and Vehicles</ebay-breadcrumb-item>
 --- | --- | --- | ---
-`heading-text` | String | No | heading for breadcrumb which will be clipped
-`heading-level` | String | No | heading level(h1-h4) for breadcrumb and default is `h2`
+`a11y-heading-text` | String | No | heading for breadcrumb which will be clipped
+`a11y-heading-tag` | String | No | heading tag for breadcrumb (default: `"h2"`)
 `hijax` | Boolean | No | Prevent link navigation; for use with ajax
@@ -21,0 +21,0 @@

dist/components/ebay-button/index.js

@@ -67,10 +67,15 @@ 'use strict';var markoWidgets = require('marko-widgets');
 /**
-   * Handle accessibility features
+   * Handle a11y features
    * https://ebay.gitbooks.io/mindpatterns/content/input/button.html#keyboard
    * @param {MouseEvent} e
    */
-function handleKeydown(e) {var _this = this;
-    eventUtils.handleActionKeydown(e, function () {
-        _this.handleClick(e);
+function handleKeydown(originalEvent) {var _this = this;
+    eventUtils.handleActionKeydown(originalEvent, function () {
+        _this.handleClick(originalEvent);
     });
+    eventUtils.handleEscapeKeydown(originalEvent, function () {
+        if (!_this.state.disabled) {
+            emitAndFire(_this, 'button-escape', { originalEvent: originalEvent });
+        }
+    });
 }
@@ -77,0 +82,0 @@

dist/components/ebay-button/README.md

@@ -6,3 +6,3 @@ # ebay-button
 ```marko
-<ebay-button>label</ebay-button>
+<ebay-button>text</ebay-button>
 ```
@@ -26,2 +26,3 @@
 --- | --- | ---
-`button-click` | `{ originalEvent }` | click
+`button-click` | `{ originalEvent }` | click or action key pressed (space and enter)
+`button-escape` | `{ originalEvent }` | escape key pressed

dist/components/ebay-carousel/index.js

@@ -23,10 +23,11 @@ 'use strict';var _extends = Object.assign || function (target) {for (var i = 1; i < arguments.length; i++) {var source = arguments[i];for (var key in source) {if (Object.prototype.hasOwnProperty.call(source, key)) {target[key] = source[key];}}}return target;};var focusables = require('makeup-focusables');
         index: parseInt(input.index, 10) || 0,
-        itemsPerSlide: parseInt(input.itemsPerSlide, 10) || undefined,
-        accessibilityPrev: input.accessibilityPrev || 'Previous Slide',
-        accessibilityNext: input.accessibilityNext || 'Next Slide',
-        accessibilityStatus: input.accessibilityStatus || 'Showing Slide {currentSlide} of {totalSlides} - Carousel',
-        accessibilityCurrent: input.accessibilityCurrent || 'Current Slide {currentSlide} - Carousel',
-        accessibilityOther: input.accessibilityOther || 'Slide {slide} - Carousel',
-        accessibilityPause: input.accessibilityPause || 'Pause - Carousel',
-        accessibilityPlay: input.accessibilityPlay || 'Play - Carousel',
+        itemsPerSlide: parseFloat(input.itemsPerSlide, 10) || undefined,
+        a11yPreviousText: input.a11yPreviousText || 'Previous Slide',
+        a11yNextText: input.a11yNextText || 'Next Slide',
+        a11yStatusText: input.a11yStatusText || 'Showing Slide {currentSlide} of {totalSlides} - Carousel',
+        a11yStatusTag: input.a11yStatusTag || 'span',
+        a11yCurrentText: input.a11yCurrentText || 'Current Slide {currentSlide} - Carousel',
+        a11yOtherText: input.a11yOtherText || 'Slide {slide} - Carousel',
+        a11yPauseText: input.a11yPauseText || 'Pause - Carousel',
+        a11yPlayText: input.a11yPlayText || 'Play - Carousel',
         items: (input.items || []).map(function (item) {return {
@@ -42,3 +43,10 @@ htmlAttributes: processHtmlAttributes(item),
     if (itemsPerSlide) {
+        state.peek = itemsPerSlide % 1;
+        state.itemsPerSlide = itemsPerSlide - state.peek;
         state.classes.push('carousel--slides');
+
+        if (state.peek) {
+            state.noDots = true;
+        }
+
         // Only allow autoplay option for discrete carousels.
@@ -69,9 +77,10 @@ if (input.autoplay) {
     var bothControlsDisabled = prevControlDisabled && nextControlDisabled;
-    var slide = void 0,itemWidth = void 0,totalSlides = void 0,accessibilityStatus = void 0;
+    var slide = void 0,itemWidth = void 0,totalSlides = void 0,a11yStatusText = void 0;
 
     if (itemsPerSlide) {
+        var itemsInSlide = itemsPerSlide + state.peek;
         slide = getSlide(state);
-        itemWidth = 'calc(' + 100 / itemsPerSlide + '% - ' + (itemsPerSlide - 1) * gap / itemsPerSlide + 'px)';
+        itemWidth = 'calc(' + 100 / itemsInSlide + '% - ' + (itemsInSlide - 1) * gap / itemsInSlide + 'px)';
         totalSlides = getSlide(state, items.length);
-        accessibilityStatus = state.accessibilityStatus.
+        a11yStatusText = state.a11yStatusText.
         replace('{currentSlide}', slide + 1).
@@ -112,3 +121,3 @@ replace('{totalSlides}', totalSlides);
         totalSlides: totalSlides,
-        accessibilityStatus: accessibilityStatus,
+        a11yStatusText: a11yStatusText,
         prevControlDisabled: prevControlDisabled,
@@ -237,3 +246,3 @@ nextControlDisabled: nextControlDisabled,
     emitAndFire(this, 'carousel-slide', { slide: slide + 1, originalEvent: originalEvent });
-    emitAndFire(this, 'carousel-' + (direction === 1 ? 'next' : 'prev'), { originalEvent: originalEvent });
+    emitAndFire(this, 'carousel-' + (direction === 1 ? 'next' : 'previous'), { originalEvent: originalEvent });
 }
@@ -315,2 +324,3 @@
     this.once('update', this.emitUpdate);
+    emitAndFire(this, 'carousel-scroll', { index: closest });
 }
@@ -326,3 +336,3 @@
     state = this.state;var
-    index = state.index,items = state.items,itemsPerSlide = state.itemsPerSlide,autoplayInterval = state.autoplayInterval,slideWidth = state.slideWidth,gap = state.gap,config = state.config;
+    index = state.index,items = state.items,itemsPerSlide = state.itemsPerSlide,autoplayInterval = state.autoplayInterval,slideWidth = state.slideWidth,gap = state.gap,peek = state.peek,config = state.config;
     var nextIndex = getNextIndex(state, delta);
@@ -342,3 +352,3 @@ var offsetOverride = void 0;
             // Move the items in the last slide to be before the first slide.
-            for (var i = itemsPerSlide; i--;) {
+            for (var i = Math.ceil(itemsPerSlide + peek); i--;) {
                 var item = items[items.length - i - 1];
@@ -352,3 +362,3 @@ item.transform = 'translateX(' + (getMaxOffset(state) + slideWidth + gap) * -1 + 'px)';
             // Moves the items in the first slide to be after the last slide.
-            for (var _i = itemsPerSlide; _i--;) {
+            for (var _i = Math.ceil(itemsPerSlide + peek); _i--;) {
                 var _item = items[_i];
@@ -355,0 +365,0 @@ _item.transform = 'translateX(' + (getMaxOffset(state) + slideWidth + gap) + 'px)';

dist/components/ebay-carousel/README.md

@@ -20,4 +20,4 @@ # ebay-carousel
 --- | --- | --- | ---
-`accessibility-prev` | String | No | aria-label for previous control (default: "Previous Slide")
-`accessibility-next` | String | No | aria-label for next control (default: "Next Slide")
+`a11y-previous-text` | String | No | a11y text for previous control (default: "Previous Slide")
+`a11y-next-text` | String | No | a11y text for next control (default: "Next Slide")
 `index` | String | Yes | 0-based index position
@@ -30,5 +30,6 @@ `items-per-slide` | String | No | automatically fit a number of items for each carousel slide and enable slide controls
 --- | --- | --- | ---
-`accessibility-status` | String | No | status text (default: "Showing Slide {currentSlide} of {totalSlides} - Carousel")
-`accessibility-current` | String | No | pagination current slide text (default: "Current Slide {currentSlide} - Carousel")
-`accessibility-other` | String | No | pagination other slide text (default: "Slide {slide} - Carousel")
+`a11y-status-text` | String | No | status text (default: "Showing Slide {currentSlide} of {totalSlides} - Carousel")
+`a11y-status-tag` | String | No | use h1-h6 when there isn't a visible heading before the carousel (default: "span")
+`a11y-current-text` | String | No | pagination current slide text (default: "Current Slide {currentSlide} - Carousel")
+`a11y-other-text` | String | No | pagination other slide text (default: "Slide {slide} - Carousel")
 `autoplay` | Boolean or Number | No | automatically slides the carousel on an interval. If a number is supplied that is used as the interval in ms, defaults to 4000ms.
@@ -39,4 +40,4 @@
 --- | --- | --- | ---
-`accessibility-play` | String | No | autoplay play button text (default: "Play - Carousel")
-`accessibility-pause` | String | No | autoplay pause button text (default: "Pause - Carousel")
+`a11y-play-text` | String | No | autoplay play button text (default: "Play - Carousel")
+`a11y-pause-text` | String | No | autoplay pause button text (default: "Pause - Carousel")
 `paused` | Boolean | Yes | pauses the autoplay carousel
@@ -50,3 +51,3 @@ `no-dots` | Boolean | No | hides the slide dot controls
 `carousel-next` | { originalEvent } | click next control
-`carousel-prev` | { originalEvent } | click previous control
+`carousel-previous` | { originalEvent } | click previous control
 
@@ -64,2 +65,7 @@ ### Additional Events for when items-per-slide is set.
 
+### Additional Events for touch devices.
+Event | Data | Description
+--- | --- | ---
+`carousel-scroll` | `{ index }` | new index is navigated to by native scrolling
+
 Notes:
@@ -69,1 +75,2 @@
 * The `autoplay` carousel currently does not support native scrolling and will use transforms instead.
+* The `items-per-slide` attribute can be set to a float such as `3.5` to show 3 items, and half of the 4th item. This also automatically enables the `no-dots` attribute.

dist/components/ebay-checkbox/index.js

@@ -21,3 +21,3 @@ 'use strict';var markoWidgets = require('marko-widgets');
     if (!this.state.disabled) {
-        emitAndFire(this, 'checkbox-select', {
+        emitAndFire(this, 'checkbox-change', {
             originalEvent: originalEvent,
@@ -24,0 +24,0 @@ value: originalEvent.target.value,

dist/components/ebay-checkbox/README.md

@@ -21,2 +21,2 @@ # ebay-checkbox
 --- | --- | --
-`checkbox-select` | `{originalEvent, value, checked}` | selected value & checked status
+`checkbox-change` | `{ originalEvent, value, checked }` | selected value and checked status

dist/components/ebay-combobox/index.js

@@ -22,3 +22,3 @@ 'use strict';var markoWidgets = require('marko-widgets');
             value: option.value,
-            label: option.label,
+            text: option.text,
             selected: Boolean(option.selected),
@@ -123,3 +123,3 @@ renderBody: option.renderBody };});
         el = event.target;
-        // check up the tree one level (in case option-label or status was clicked)
+        // check up the tree one level (in case option text or status was clicked)
     } else if (event.target.parentNode.dataset.optionValue) {
@@ -126,0 +126,0 @@ el = event.target.parentNode;

dist/components/ebay-combobox/mock/index.js

 'use strict';var renderBody = function renderBody(stream) {return stream.write('text');};
 var options = [{
     value: 1,
-    label: 'option 1' },
+    text: 'option 1' },
 {
     value: 2,
-    label: 'option 2' },
+    text: 'option 2' },
 {
     value: 3,
-    label: 'option 3' }];
+    text: 'option 3' }];
 
@@ -12,0 +12,0 @@

dist/components/ebay-combobox/README.md

@@ -13,5 +13,5 @@ # ebay-combobox
 <ebay-combobox name="formFieldName">
-    <ebay-combobox-option value="1" label="Option 1"/>
-    <ebay-combobox-option value="2" label="Option 2"/>
-    <ebay-combobox-option value="3" label="Option 3"/>
+    <ebay-combobox-option value="1" text="Option 1"/>
+    <ebay-combobox-option value="2" text="Option 2"/>
+    <ebay-combobox-option value="3" text="Option 3"/>
 </ebay-combobox>
@@ -24,5 +24,5 @@ ```
 <ebay-combobox name="formFieldName">
-    <ebay-combobox-option value="1" label="Option 1"/>
-    <ebay-combobox-option value="2" label="Option 2" selected/>
-    <ebay-combobox-option value="3" label="Option 3"/>
+    <ebay-combobox-option value="1" text="Option 1"/>
+    <ebay-combobox-option value="2" text="Option 2" selected/>
+    <ebay-combobox-option value="3" text="Option 3"/>
 </ebay-combobox>
@@ -39,2 +39,4 @@ ```
 
+Note: For this component, `class` is applied to the root tag, while all other HTML attributes are applied to the `input` tag.
+
 ### ebay-combobox Events
@@ -62,3 +64,3 @@
 --- | --- | --- | --- | ---
-`label` | No | String | No | string label for use in the button
+`text` | No | String | No | string to use in the option
 `selected` | No | Boolean | Yes | whether or not the option is selected (**Note:** use the root `ebay-combobox` element's `selected` property to set this property)
@@ -65,0 +67,0 @@ `value` | Yes | String | Yes | used for the `value` attribute of the native `<option>`

dist/components/ebay-dialog/index.js

@@ -23,3 +23,3 @@ 'use strict';var markoWidgets = require('marko-widgets');
 function getInitialState(input) {var
-    style = input.style,_input$open = input.open,open = _input$open === undefined ? false : _input$open,type = input.type,focus = input.focus,ariaLabelClose = input.ariaLabelClose;
+    style = input.style,_input$open = input.open,open = _input$open === undefined ? false : _input$open,type = input.type,focus = input.focus,a11yCloseText = input.a11yCloseText;
     return {
@@ -32,3 +32,3 @@ htmlAttributes: processHtmlAttributes(input),
         focus: focus,
-        ariaLabelClose: ariaLabelClose };
+        a11yCloseText: a11yCloseText };
 
@@ -38,3 +38,3 @@ }
 function getTemplateData(state) {var
-    style = state.style,open = state.open,type = state.type,ariaLabelClose = state.ariaLabelClose,htmlAttributes = state.htmlAttributes;
+    style = state.style,open = state.open,type = state.type,a11yCloseText = state.a11yCloseText,htmlAttributes = state.htmlAttributes;
     var dialogClass = [state.class, 'dialog'];
@@ -70,3 +70,3 @@ var windowClass = ['dialog__window'];
         type: type,
-        ariaLabelClose: ariaLabelClose,
+        a11yCloseText: a11yCloseText,
         windowClass: windowClass };
@@ -73,0 +73,0 @@

dist/components/ebay-dialog/README.md

 # ebay-dialog
 
 ```marko
-<ebay-dialog open aria-label-close="Close Dialog">
+<ebay-dialog open a11y-close-text="Close Dialog">
   <h1>Hello World</h1>
@@ -15,3 +15,3 @@ </ebay-dialog>
 `focus` | String | No | An id for an element which will receive focus when the dialog opens (defaults to close button).
-`aria-label-close` | String | No | Aria label for close button and mask.
+`a11y-close-text` | String | No | A11y text for close button and mask.
 
@@ -18,0 +18,0 @@ ## Events

dist/components/ebay-icon/CONTRIBUTING.md

 # Contributing to <ebay-icon>
 
 ## How To Add a New Icon
-Create the file `src/components/ebay-icon/stamper/markup/name-here.html` with the minified markup.
+ 1. First add the icon to the [DS4 or DS6 folders](https://github.com/eBay/skin/tree/master/src/svg) in [@ebay/skin](https://github.com/eBay/skin).
+ 2. Publish the changes in @ebay/skin and update the dependency in this repository.
+ 3. Run `node ./scripts/import-svg` from this project to import the icons into this repository.
+
+Notes:
+
+* All Icons are automatically added to `./src/components/ebay-icon/symbols` and this folder should not be touched.

dist/components/ebay-icon/index.js

@@ -32,6 +32,6 @@ 'use strict';var markoWidgets = require('marko-widgets');
     var isInline = type === 'inline';
-    var accessibilityText = input.accessibilityText;
+    var a11yText = input.a11yText;
     var name = input.name;
     var titleId = void 0;
-    var accessibilityAttributes = void 0;
+    var a11yAttributes = void 0;
     var renderDefs = void 0;
@@ -47,7 +47,7 @@
 
-        if (accessibilityText) {
+        if (a11yText) {
             titleId = 'icon-title-' + Math.random().toString(36).substr(2, 9);
-            accessibilityAttributes = { 'aria-labelled-by': titleId, role: 'img' };
+            a11yAttributes = { 'aria-labelled-by': titleId, role: 'img' };
         } else {
-            accessibilityAttributes = { 'aria-hidden': 'true' };
+            a11yAttributes = { 'aria-hidden': 'true' };
         }
@@ -59,2 +59,3 @@ }
         classes: input.noSkinClasses ? [input.class] : ['icon', 'icon--' + name, input.class],
+        themes: input._themes,
         style: input.style,
@@ -66,4 +67,4 @@ name: name,
         isInline: isInline,
-        accessibilityText: accessibilityText,
-        accessibilityAttributes: accessibilityAttributes,
+        a11yText: a11yText,
+        a11yAttributes: a11yAttributes,
         titleId: titleId };
@@ -70,0 +71,0 @@

dist/components/ebay-icon/README.md

@@ -40,2 +40,2 @@ # ebay-icon
 --- | --- | --- | ---
-`accessibility-text` | String | No | text for non-decorative inline icon; icon is assumed to be decorative if this is not passed
+`a11y-text` | String | No | text for non-decorative inline icon; icon is assumed to be decorative if this is not passed

dist/components/ebay-icon/transformer.js

@@ -15,3 +15,4 @@ 'use strict';var path = require('path');
 
-function transform(el, context) {
+function transform(el, context) {var
+    builder = context.builder;
     var nameAttribute = el.getAttribute('name');
@@ -22,9 +23,18 @@ var typeAttribute = el.getAttribute('type');
     if (isInline && iconName) {
-        var templatePath = context.getRequirePath(path.join(__dirname, 'symbols/' + iconName + '.marko'));
-        el.prependChild(context.createNodeForEl('include', {}, JSON.stringify(templatePath)));
+        var iconPath = path.join(__dirname, 'symbols', iconName);
+        var ds4Path = path.join(iconPath, 'ds4.marko');
+        var ds6Path = path.join(iconPath, 'ds6.marko');
+        el.setAttributeValue('_themes', context.addStaticVar('icon_' + iconName, builder.arrayExpression([
+        toRequire(ds4Path),
+        toRequire(ds6Path)])));
+
     }
 
     return context;
+
+    function toRequire(file) {
+        return 'require(' + JSON.stringify(context.getRequirePath(file)) + ')';
+    }
 }
 
 module.exports = transform;

dist/components/ebay-menu/index.js

@@ -80,6 +80,6 @@ 'use strict';var markoWidgets = require('marko-widgets');
         isFake: isFake,
-        label: input.label,
+        text: input.text,
         icon: input.icon,
         iconTag: input.iconTag && input.iconTag.renderBody,
-        accessibilityText: input.accessibilityText,
+        a11yText: input.a11yText,
         noToggleIcon: input.noToggleIcon,
@@ -129,6 +129,6 @@ reverse: Boolean(input.reverse),
         isNotCheckable: !state.isRadio && !state.isCheckbox,
-        label: state.label,
+        text: state.text,
         icon: state.icon,
         iconTag: state.iconTag,
-        accessibilityText: state.accessibilityText,
+        a11yText: state.a11yText,
         noToggleIcon: state.noToggleIcon,
@@ -155,3 +155,3 @@ expanded: state.expanded,
         }
-        observer.observeRoot(this, ['label', 'expanded']);
+        observer.observeRoot(this, ['text', 'expanded']);
         if (this.state.isRadio) {
@@ -275,3 +275,3 @@ observer.observeRoot(this, ['checked'], function (itemIndex) {
 /**
-   * Handle accessibility for item (is not handled by makeup)
+   * Handle a11y for item (is not handled by makeup)
    * https://ebay.gitbooks.io/mindpatterns/content/input/menu.html#keyboard
@@ -291,2 +291,6 @@ * @param {KeyboardEvent} e
 
+function handleButtonEscape() {
+    this.setState('expanded', false);
+}
+
 function handleExpand() {
@@ -348,2 +352,3 @@ this.setState('expanded', true);
     handleItemKeydown: handleItemKeydown,
+    handleButtonEscape: handleButtonEscape,
     handleExpand: handleExpand,
@@ -350,0 +355,0 @@ handleCollapse: handleCollapse,

dist/components/ebay-menu/README.md

@@ -8,3 +8,3 @@ # ebay-menu
 ```marko
-<ebay-menu label="label">
+<ebay-menu text="text">
     <ebay-menu-item>item 1</ebay-menu-item>
@@ -20,5 +20,5 @@ <ebay-menu-item>item 2</ebay-menu-item>
 --- | --- | --- | ---
-`label` | String | Yes | button label
-`icon` | String | No | name of an `<ebay-icon>` to show to the left of the label
-`accessibility-text` | String | No | accessibility text for the button, especially for cases without label text
+`text` | String | Yes | button text
+`icon` | String | No | name of an `<ebay-icon>` to show to the left of the text
+`a11y-text` | String | No | a11y text for the button, especially for cases without text
 `no-toggle-icon` | Boolean | No | whether to hide the chevron toggle icon
@@ -25,0 +25,0 @@ `expanded` | Boolean | Yes | whether content is expanded (Note: not supported as initial attribute)

dist/components/ebay-notice/index.js

@@ -29,3 +29,4 @@ 'use strict';var processHtmlAttributes = require('../../common/html-attributes');
     var type = input.type || defaults.type;
-    var headingTag = type === 'page' && input.headingLevel ? 'h' + input.headingLevel : constants[type].headingTag;
+    var a11yHeadingTag = input.a11yHeadingTag;
+    var headingTag = type === 'page' && a11yHeadingTag ? a11yHeadingTag : constants[type].headingTag;
     var status = input.status || defaults.status;
@@ -45,4 +46,4 @@ var dismissible = input.dismissible && type === 'page' || defaults.dismissible;
         hidden: hidden,
-        ariaText: input.ariaText || '',
-        ariaLabelClose: input.ariaLabelClose || '',
+        a11yHeadingText: input.a11yHeadingText || '',
+        a11yCloseText: input.a11yCloseText || '',
         headingClass: type + '-notice__status',
@@ -66,3 +67,3 @@ contentClass: type + '-notice__content' };
     if (this.state.hidden) {
-        emitAndFire(this, 'notice-hide');
+        emitAndFire(this, 'notice-close');
     } else {
@@ -69,0 +70,0 @@ emitAndFire(this, 'notice-show');

dist/components/ebay-notice/README.md

@@ -12,4 +12,4 @@ # ebay-notice
 ```marko
-<ebay-notice heading-level="3" status="priority" type="page" aria-text="Priority">
-        <p>Couldn't load all the items, please try again later.</p>
+<ebay-notice a11y-heading-text="Priority" a11y-heading-tag="h3" status="priority" type="page">
+    <p>Couldn't load all the items, please try again later.</p>
 </ebay-notice>
@@ -24,7 +24,7 @@ ```
 `status`  | String | No | "priority" (default), "confirmation" or "information"
-`aria-text` | String | No | adding description for the notice for a11y users
-`heading-level` | String | No| used in case of "page" level notices to specify the heading tag according to the notice's placement
+`a11y-heading-text` | String | No | adding description for the notice for a11y users
+`a11y-heading-tag` | String | No| used in case of "page" level notices to specify the heading tag according to the notice's placement (default: `"h2"`)
 `dismissible` | Boolean | No | used to specify the dismiss button in page notice
 `hidden` | Boolean | Yes | whether the widget is hidden or not (Note: not supported as initial attribute)
-`aria-label-close` | String | No | adding description for the button for a11y users
+`a11y-close-text` | String | No | adding description for the button for a11y users
 
@@ -36,2 +36,2 @@ ### ebay-notice Events
 `notice-show` | the page notice was shown
-`notice-hide` | the page notice was hidden
+`notice-close` | the page notice was closed

dist/components/ebay-pagination/index.js

@@ -62,5 +62,5 @@ 'use strict';var processHtmlAttributes = require('../../common/html-attributes');
         items: items,
-        accessibilityPrev: input.accessibilityPrev || 'Previous page',
-        accessibilityNext: input.accessibilityNext || 'Next page',
-        accessibilityCurrent: input.accessibilityCurrent || 'Results Pagination - Page 1' };
+        a11yPreviousText: input.a11yPreviousText || 'Previous page',
+        a11yNextText: input.a11yNextText || 'Next page',
+        a11yCurrentText: input.a11yCurrentText || 'Results Pagination - Page 1' };
 
@@ -129,3 +129,3 @@ }
 /**
-   * Handle accessibility for item, next page and previous page respectively.
+   * Handle a11y for item, next page and previous page respectively.
    * @param {KeyboardEvent} event
@@ -132,0 +132,0 @@ */

dist/components/ebay-pagination/mock/index.js

 'use strict';var renderBody = function renderBody(stream) {return stream.write('1');};
 module.exports = {
     basicLinks: {
-        'aria-label-previous': 'Previous page',
-        'aria-label-next': 'Next page',
-        'curr-text': 'Results Pagination - Page 2',
+        a11yPreviousText: 'Previous page',
+        a11yNextText: 'Next page',
+        a11yCurrentText: 'Results Pagination - Page 2',
         items: [
@@ -56,6 +56,6 @@ {
     hijax: {
-        'ariaLabelPrevious': 'Previous page',
-        'ariaLabelNext': 'Next page',
-        'currText': 'Results Pagination - Page 2',
-        'hijax': true,
+        a11yPreviousText: 'Previous page',
+        a11yNextText: 'Next page',
+        a11yCurrentText: 'Results Pagination - Page 2',
+        hijax: true,
         items: [
@@ -82,6 +82,5 @@ {
     basicLinksWithoutCurrent: {
-        'ariaLabelPrevious': 'Previous page',
-        'ariaLabelNext': 'Next page',
-        'currText': 'Results Pagination - Page X',
-        'fakeLink': true,
+        a11yPreviousText: 'Previous page',
+        a11yNextText: 'Next page',
+        a11yCurrentText: 'Results Pagination - Page X',
         items: [
@@ -107,6 +106,5 @@ {
     basicLinksWithoutNavigation: {
-        'ariaLabelPrevious': 'Previous page',
-        'ariaLabelNext': 'Next page',
-        'currText': 'Results Pagination - Page 1',
-        'fakeLink': true,
+        a11yPreviousText: 'Previous page',
+        a11yNextText: 'Next page',
+        a11yCurrentText: 'Results Pagination - Page 1',
         items: [
@@ -121,5 +119,5 @@ {
     disabledNavigation: {
-        'ariaLabelPrevious': 'Previous page',
-        'ariaLabelNext': 'Next page',
-        'currText': 'Results Pagination - Page 2',
+        a11yPreviousText: 'Previous page',
+        a11yNextText: 'Next page',
+        a11yCurrentText: 'Results Pagination - Page 2',
         items: [
@@ -126,0 +124,0 @@ {

dist/components/ebay-pagination/README.md

 # ebay-pagination
 
-The `<ebay-pagination>` is a tag used to create a pagination navigation.
+The `<ebay-pagination>` is a tag used to create a pagination navigation. It will display up to 9 page links.
 
@@ -23,5 +23,5 @@ ## ebay-pagination Tag
 --- | --- | --- | ---
-`accessibility-prev` | String | No | aria-label for previous arrow button
-`accessibility-next` | String | No | aria-label for next arrow button
-`accessibility-current` | String | No | Description for the current page (e.g. Results of Page 1)
+`a11y-previous-text` | String | No | a11y text for previous arrow button
+`a11y-next-text` | String | No | a11y text for next arrow button
+`a11y-current-text` | String | No | Description for the current page (e.g. Results of Page 1)
 `hijax` | Boolean | No | Prevent link navigation; for use with ajax
@@ -28,0 +28,0 @@

dist/components/ebay-radio/index.js

@@ -21,3 +21,3 @@ 'use strict';var markoWidgets = require('marko-widgets');
     if (!this.state.disabled) {
-        emitAndFire(this, 'radio-select', { originalEvent: originalEvent, value: originalEvent.target.value });
+        emitAndFire(this, 'radio-change', { originalEvent: originalEvent, value: originalEvent.target.value });
     }
@@ -24,0 +24,0 @@ }

dist/components/ebay-radio/README.md

@@ -21,2 +21,2 @@ # ebay-radio
 --- | --- | --
-`radio-select` | `{ originalEvent, value }` | selected value
+`radio-change` | `{ originalEvent, value }` | selected value

dist/components/ebay-select/index.js

@@ -18,3 +18,3 @@ 'use strict';var markoWidgets = require('marko-widgets');
             value: option.value,
-            label: option.label,
+            text: option.text,
             selected: Boolean(selected) };
@@ -21,0 +21,0 @@

dist/components/ebay-select/mock/index.js

 'use strict';var renderBody = function renderBody(stream) {return stream.write('text');};
 var options = [{
     value: '1',
-    label: 'option 1' },
+    text: 'option 1' },
 {
     value: '2',
-    label: 'option 2' },
+    text: 'option 2' },
 {
     value: '3',
-    label: 'option 3' }];
+    text: 'option 3' }];
 
@@ -12,0 +12,0 @@

dist/components/ebay-select/README.md

@@ -13,5 +13,5 @@ # ebay-select
 <ebay-select name="formFieldName">
-    <ebay-select-option value="1" label="Option 1"/>
-    <ebay-select-option value="2" label="Option 2"/>
-    <ebay-select-option value="3" label="Option 3"/>
+    <ebay-select-option value="1" text="Option 1"/>
+    <ebay-select-option value="2" text="Option 2"/>
+    <ebay-select-option value="3" text="Option 3"/>
 </ebay-select>
@@ -24,5 +24,5 @@ ```
 <ebay-select name="formFieldName">
-    <ebay-select-option value="1" label="Option 1"/>
-    <ebay-select-option value="2" label="Option 2" selected/>
-    <ebay-select-option value="3" label="Option 3"/>
+    <ebay-select-option value="1" text="Option 1"/>
+    <ebay-select-option value="2" text="Option 2" selected/>
+    <ebay-select-option value="3" text="Option 3"/>
 </ebay-select>
@@ -62,3 +62,3 @@ ```
 --- | --- | --- | --- | ---
-`label` | No | String | No | string label for use in the button
+`text` | No | String | No | text to use in the option
 `selected` | No | Boolean | Yes | whether or not the option is selected (**Note:** use the root `ebay-select` element's `selected` property to set this property)
@@ -65,0 +65,0 @@ `value` | Yes | String | Yes | used for the `value` attribute of the native `<option>`

dist/components/ebay-switch/index.js

@@ -21,3 +21,3 @@ 'use strict';var markoWidgets = require('marko-widgets');
     if (!this.state.disabled) {
-        emitAndFire(this, 'switch-select', {
+        emitAndFire(this, 'switch-change', {
             originalEvent: originalEvent,
@@ -24,0 +24,0 @@ value: originalEvent.target.value,

dist/components/ebay-switch/README.md

@@ -21,2 +21,2 @@ # ebay-switch
 --- | --- | ---
-`switch-select` | `{ originalEvent, value, checked }` | selected value and checked status
+`switch-change` | `{ originalEvent, value, checked }` | selected value and checked status

dist/components/ebay-tab/index.js

@@ -83,3 +83,3 @@ 'use strict';var markoWidgets = require('marko-widgets');
 /**
-   * Handle accessibility for heading
+   * Handle a11y for heading
    * https://ebay.gitbooks.io/mindpatterns/content/disclosure/tabs.html
@@ -86,0 +86,0 @@ * @param {KeyboardEvent} e

marko.json

@@ -1,1 +0,1 @@
-{"<ebay-breadcrumb>":{"renderer":"./dist/components/ebay-breadcrumb/index.js","transformer":"./dist/common/transformer/index.js","@*":"expression","@html-attributes":"expression","@class":"string","@style":"string","@heading-text":"string","@heading-level":"string","@hijax":"boolean","@items <item>[]":{"@*":"expression","@html-attributes":"expression","@class":"string","@style":"string","@href":"string"}},"<ebay-breadcrumb-item>":{},"<ebay-button>":{"renderer":"./dist/components/ebay-button/index.js","@*":"expression","@html-attributes":"expression","@class":"string","@style":"string","@type":"string","@disabled":"boolean","@partially-disabled":"boolean","@href":"string","@priority":"string","@size":"size","@fluid":"boolean","@variant":"string"},"<ebay-carousel>":{"renderer":"./dist/components/ebay-carousel/index.js","transformer":"./dist/common/transformer/index.js","@*":"expression","@html-attributes":"expression","@class":"string","@style":"string","@index":"string","@type":"string","@slide":"string","@gap":"string","@autoplay":"boolean","@paused":"boolean","@no-dots":"boolean","@items-per-slide":"string","@accessibility-prev":"string","@accessibility-next":"string","@accessibility-status":"string","@accessibility-current":"string","@accessibility-other":"string","@accessibility-play":"string","@accessibility-pause":"string","@items <item>[]":{"@*":"expression","@html-attributes":"expression","@class":"string","@style":"string"}},"<ebay-carousel-item>":{},"<ebay-checkbox>":{"renderer":"./dist/components/ebay-checkbox/index.js","@*":"expression","@html-attributes":"expression","@class":"string","@style":"string","@disabled":"boolean"},"<ebay-combobox>":{"renderer":"./dist/components/ebay-combobox/index.js","transformer":"./dist/common/transformer/index.js","@*":"expression","@html-attributes":"expression","@class":"string","@style":"string","@name":"string","@grow":"boolean","@borderless":"boolean","@disabled":"boolean","@options <option>[]":{"@*":"expression","@html-attributes":"expression","@class":"string","@style":"string","@value":"string","@label":"string","@selected":"boolean"}},"<ebay-combobox-option>":{},"<ebay-dialog>":{"renderer":"./dist/components/ebay-dialog/index.js","@*":"expression","@html-attributes":"expression","@class":"string","@style":"string","@open":"boolean","@type":"string","@focus":"string","@aria-label-close":"string"},"<ebay-icon>":{"renderer":"./dist/components/ebay-icon/index.js","transformer":"./dist/components/ebay-icon/transformer.js","@*":"expression","@html-attributes":"expression","@class":"string","@style":"string","@type":"string","@name":"string","@accessibility-text":"string","@no-skin-classes":"boolean"},"<ebay-menu>":{"renderer":"./dist/components/ebay-menu/index.js","transformer":"./dist/components/ebay-menu/transformer.js","@*":"expression","@html-attributes":"expression","@class":"string","@style":"string","@type":"string","@label":"string","@icon":"string","@accessibility-text":"string","@no-toggle-icon":"boolean","@expanded":"boolean","@reverse":"boolean","@fix-width":"boolean","@borderless":"boolean","@size":"string","@priority":"string","@iconTag <icon>":{},"@items <item>[]":{"@*":"expression","@html-attributes":"expression","@class":"string","@style":"string","@href":"string","@type":"string","@checked":"boolean","@current":"boolean"}},"<ebay-menu-item>":{},"<ebay-notice>":{"renderer":"./dist/components/ebay-notice/index.js","@*":"expression","@html-attributes":"expression","@class":"string","@style":"string","@type":"string","@heading-level":"string","@status":"string","@hidden":"boolean","@aria-text":"string","@aria-label-close":"string","@dismissible":"boolean"},"<ebay-pagination>":{"renderer":"./dist/components/ebay-pagination/index.js","transformer":"./dist/common/transformer/index.js","@*":"expression","@html-attributes":"expression","@class":"string","@style":"string","@accessibility-prev":"string","@accessibility-next":"string","@accessibility-current":"string","@hijax":"boolean","@items <item>[]":{"@*":"expression","@html-attributes":"expression","@class":"string","@style":"string","@current":"boolean","@disabled":"boolean","@href":"string","@type":"string","@role":"string"}},"<ebay-pagination-item>":{},"<ebay-radio>":{"renderer":"./dist/components/ebay-radio/index.js","@*":"expression","@html-attributes":"expression","@class":"string","@style":"string","@disabled":"boolean"},"<ebay-select>":{"renderer":"./dist/components/ebay-select/index.js","transformer":"./dist/common/transformer/index.js","@*":"expression","@html-attributes":"expression","@class":"string","@style":"string","@grow":"boolean","@borderless":"boolean","@disabled":"boolean","@options <option>[]":{"@*":"expression","@html-attributes":"expression","@class":"string","@style":"string","@value":"string","@label":"string","@selected":"boolean"}},"<ebay-select-option>":{},"<ebay-switch>":{"renderer":"./dist/components/ebay-switch/index.js","@*":"expression","@html-attributes":"expression","@class":"string","@style":"string","@disabled":"boolean"},"<ebay-tab>":{"renderer":"./dist/components/ebay-tab/index.js","transformer":"./dist/common/transformer/index.js","@*":"expression","@html-attributes":"expression","@class":"string","@style":"string","@index":"string","@fake":"boolean","@headings <heading>[]":{"@*":"expression","@html-attributes":"expression","@class":"string","@style":"string","@href":"string"},"@panels <panel>[]":{"@*":"expression","@html-attributes":"expression","@class":"string","@style":"string"}},"<ebay-tab-heading>":{},"<ebay-tab-panel>":{},"<ebay-textbox>":{"renderer":"./dist/components/ebay-textbox/index.js","@*":"expression","@html-attributes":"expression","@class":"string","@style":"string","@invalid":"boolean","@fluid":"boolean","@multiline":"boolean"}}
+{"<ebay-breadcrumb>":{"renderer":"./dist/components/ebay-breadcrumb/index.js","transformer":"./dist/common/transformer/index.js","@*":"expression","@html-attributes":"expression","@class":"string","@style":"string","@a11y-heading-text":"string","@a11y-heading-tag":"string","@hijax":"boolean","@items <item>[]":{"@*":"expression","@html-attributes":"expression","@class":"string","@style":"string","@href":"string"}},"<ebay-breadcrumb-item>":{},"<ebay-button>":{"renderer":"./dist/components/ebay-button/index.js","@*":"expression","@html-attributes":"expression","@class":"string","@style":"string","@type":"string","@disabled":"boolean","@partially-disabled":"boolean","@href":"string","@priority":"string","@size":"size","@fluid":"boolean","@variant":"string"},"<ebay-carousel>":{"renderer":"./dist/components/ebay-carousel/index.js","transformer":"./dist/common/transformer/index.js","@*":"expression","@html-attributes":"expression","@class":"string","@style":"string","@index":"string","@type":"string","@slide":"string","@gap":"string","@autoplay":"boolean","@paused":"boolean","@no-dots":"boolean","@items-per-slide":"string","@a11y-previous-text":"string","@a11y-next-text":"string","@a11y-status-text":"string","@a11y-status-tag":"string","@a11y-current-text":"string","@a11y-other-text":"string","@a11y-play-text":"string","@a11y-pause-text":"string","@items <item>[]":{"@*":"expression","@html-attributes":"expression","@class":"string","@style":"string"}},"<ebay-carousel-item>":{},"<ebay-checkbox>":{"renderer":"./dist/components/ebay-checkbox/index.js","@*":"expression","@html-attributes":"expression","@class":"string","@style":"string","@disabled":"boolean"},"<ebay-combobox>":{"renderer":"./dist/components/ebay-combobox/index.js","transformer":"./dist/common/transformer/index.js","@*":"expression","@html-attributes":"expression","@class":"string","@style":"string","@name":"string","@grow":"boolean","@borderless":"boolean","@disabled":"boolean","@options <option>[]":{"@*":"expression","@html-attributes":"expression","@class":"string","@style":"string","@value":"string","@text":"string","@selected":"boolean"}},"<ebay-combobox-option>":{},"<ebay-dialog>":{"renderer":"./dist/components/ebay-dialog/index.js","@*":"expression","@html-attributes":"expression","@class":"string","@style":"string","@open":"boolean","@type":"string","@focus":"string","@a11y-close-text":"string"},"<ebay-icon>":{"renderer":"./dist/components/ebay-icon/index.js","transformer":"./dist/components/ebay-icon/transformer.js","@*":"expression","@html-attributes":"expression","@class":"string","@style":"string","@type":"string","@name":"string","@a11y-text":"string","@no-skin-classes":"boolean","@_themes":"expression"},"<ebay-menu>":{"renderer":"./dist/components/ebay-menu/index.js","transformer":"./dist/components/ebay-menu/transformer.js","@*":"expression","@html-attributes":"expression","@class":"string","@style":"string","@type":"string","@text":"string","@icon":"string","@a11y-text":"string","@no-toggle-icon":"boolean","@expanded":"boolean","@reverse":"boolean","@fix-width":"boolean","@borderless":"boolean","@size":"string","@priority":"string","@iconTag <icon>":{},"@items <item>[]":{"@*":"expression","@html-attributes":"expression","@class":"string","@style":"string","@href":"string","@type":"string","@checked":"boolean","@current":"boolean"}},"<ebay-menu-item>":{},"<ebay-notice>":{"renderer":"./dist/components/ebay-notice/index.js","@*":"expression","@html-attributes":"expression","@class":"string","@style":"string","@type":"string","@status":"string","@hidden":"boolean","@a11y-heading-text":"string","@a11y-heading-tag":"string","@a11y-close-text":"string","@dismissible":"boolean"},"<ebay-pagination>":{"renderer":"./dist/components/ebay-pagination/index.js","transformer":"./dist/common/transformer/index.js","@*":"expression","@html-attributes":"expression","@class":"string","@style":"string","@a11y-previous-text":"string","@a11y-next-text":"string","@a11y-current-text":"string","@hijax":"boolean","@items <item>[]":{"@*":"expression","@html-attributes":"expression","@class":"string","@style":"string","@current":"boolean","@disabled":"boolean","@href":"string","@type":"string","@role":"string"}},"<ebay-pagination-item>":{},"<ebay-radio>":{"renderer":"./dist/components/ebay-radio/index.js","@*":"expression","@html-attributes":"expression","@class":"string","@style":"string","@disabled":"boolean"},"<ebay-select>":{"renderer":"./dist/components/ebay-select/index.js","transformer":"./dist/common/transformer/index.js","@*":"expression","@html-attributes":"expression","@class":"string","@style":"string","@grow":"boolean","@borderless":"boolean","@disabled":"boolean","@options <option>[]":{"@*":"expression","@html-attributes":"expression","@class":"string","@style":"string","@value":"string","@text":"string","@selected":"boolean"}},"<ebay-select-option>":{},"<ebay-switch>":{"renderer":"./dist/components/ebay-switch/index.js","@*":"expression","@html-attributes":"expression","@class":"string","@style":"string","@disabled":"boolean"},"<ebay-tab>":{"renderer":"./dist/components/ebay-tab/index.js","transformer":"./dist/common/transformer/index.js","@*":"expression","@html-attributes":"expression","@class":"string","@style":"string","@index":"string","@fake":"boolean","@headings <heading>[]":{"@*":"expression","@html-attributes":"expression","@class":"string","@style":"string","@href":"string"},"@panels <panel>[]":{"@*":"expression","@html-attributes":"expression","@class":"string","@style":"string"}},"<ebay-tab-heading>":{},"<ebay-tab-panel>":{},"<ebay-textbox>":{"renderer":"./dist/components/ebay-textbox/index.js","@*":"expression","@html-attributes":"expression","@class":"string","@style":"string","@invalid":"boolean","@fluid":"boolean","@multiline":"boolean"}}

package.json

 {
   "name": "@ebay/ebayui-core",
-  "version": "0.9.1",
+  "version": "1.0.0-0",
   "description": "Collection of core eBay components; considered to be the building blocks for all composite structures, pages & apps.",
@@ -60,3 +60,3 @@ "scripts": {
     "@ebay/browserslist-config": "^1.0.0",
-    "@ebay/skin": "^5.1.2",
+    "@ebay/skin": "^6.0.0-2",
     "@lasso/marko-taglib": "^1.0.9",
@@ -105,3 +105,3 @@ "async": "^2.6.0",
   "peerDependencies": {
-    "@ebay/skin": "^5.1.2",
+    "@ebay/skin": "^6.0.0-2",
     "marko": "^3 || ^4",
@@ -113,3 +113,3 @@ "marko-widgets": "^6 || ^7"
     "lodash.set": "^4.3.2",
-    "makeup-expander": "~0.4.0",
+    "makeup-expander": "~0.5.0",
     "makeup-focusables": "~0.0.3",
@@ -116,0 +116,0 @@ "makeup-key-emitter": "~0.0.3",

README.md

@@ -62,3 +62,3 @@ <p>
 ```marko
-<ebay-menu label="Sort" type="radio">
+<ebay-menu text="Sort" type="radio">
     <ebay-menu-item>Price</ebay-menu-item>
@@ -83,3 +83,3 @@ <ebay-menu-item>Time</ebay-menu-item>
 
-Attributes provide initial state for a component. We can see that the menu has `label` and `type` attributes:
+Attributes provide initial state for a component. We can see that the menu has `text` and `type` attributes:
 
@@ -89,3 +89,3 @@ _template.marko_
 ```marko
-<ebay-menu label="Sort" type="radio">
+<ebay-menu text="Sort" type="radio">
     <ebay-menu-item>Price</ebay-menu-item>
@@ -97,7 +97,7 @@ <ebay-menu-item>Time</ebay-menu-item>
 
-Some attributes are stateful and can be updated via the DOM. The label attribute, for example:
+Some attributes are stateful and can be updated via the DOM. The text attribute, for example:
 
 ```js
 var menu = document.querySelector('.menu');
-menu.label = 'Sortieren';
+menu.text = 'Sortieren';
 ```
@@ -139,3 +139,3 @@
 ```marko
-<ebay-menu label="Sort" type="radio" w-onchange("onMenuChange")>
+<ebay-menu text="Sort" type="radio" w-onchange("onMenuChange")>
     <ebay-menu-item>Price</ebay-menu-item>
@@ -142,0 +142,0 @@ <ebay-menu-item>Time</ebay-menu-item>

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

901492

increased by55.83%

Number of package files

769

increased by185.87%

Lines of code

5733

increased by100.95%

Dependency changes

• + Added@ebay/skin@6.3.5(transitive)

• + Addedmakeup-expander@0.5.0(transitive)

• - Removed@ebay/skin@5.1.2(transitive)

• - Removedmakeup-expander@0.4.0(transitive)

• Updatedmakeup-expander@~0.5.0