basic-carousel - npm Package Compare versions

Comparing version 0.7.0 to 0.7.1

package.json

 {
   "name": "basic-carousel",
-  "version": "0.7.0",
+  "version": "0.7.1",
   "description": "Lets the user navigate laterally through a sequence of child elements.",
@@ -14,4 +14,4 @@ "homepage": "https://component.kitchen",
   "dependencies": {
-    "basic-element-base": "^0.7.0",
-    "basic-component-mixins": "^0.7.0"
+    "basic-element-base": "^0.7.1",
+    "basic-component-mixins": "^0.7.1"
   },
@@ -18,0 +18,0 @@ "browserify": {

README.md

 <a name="Carousel"></a>
 ## Carousel
-Lets the user navigate laterally through a sequence of child
-elements
+Lets the user navigate laterally through a sequence of child elements.
 
 basic-carousel is an implementation of the carousel user interface pattern,
-commonly used for navigating between images, pages, and other elements.
-This pattern presents the user with a linear sequence of elements, only one of
+commonly used for navigating between images, pages, and other elements. This
+pattern presents the user with a linear sequence of elements, only one of
 which is shown at a time. The user can navigate to the next/previous element
 with a variety of input methods.
 
-basic-carousel uses its children as the elements the user will navigate through.
-In a typical use, a basic-carousel can be used to navigate between a sequence of
-images:
+[Live demo](http://basicwebcomponents.org/basic-web-components/packages/basic-carousel/)
 
+You can also view demos with optional
+[arrows](http://basicwebcomponents.org/basic-web-components/packages/basic-carousel/carouselWithArrows.html),
+[dots](http://basicwebcomponents.org/basic-web-components/packages/basic-carousel/carouselWithDots.html),
+or both [arrows and dots](http://basicwebcomponents.org/basic-web-components/packages/basic-carousel/carouselWithArrowsAndDots.html).
+
+basic-carousel uses its children as the elements the user will navigate
+through. In a typical use, a basic-carousel can be used to navigate between a
+sequence of images:
+
     <basic-carousel>
@@ -27,4 +33,4 @@ <img src="image1.jpg">
 as flexible and robust as standard HTML elements. For example, it meets the
-"Content Changes" criteria: the carousel will adapt to new child elements added
-or removed at runtime.
+"Content Changes" criteria: the carousel will adapt to new child elements
+added or removed at runtime.
 
@@ -35,4 +41,4 @@ Currently, this component does not meet the Gold Standard criteria "Size to
 whatever surface it is contained within, or 2) set it to be larger than the
-largest child element you want to display. The former approach is more common,
-and can be achieved with CSS styling such as:
+largest child element you want to display. The former approach is more
+common, and can be achieved with CSS styling such as:
 
@@ -58,6 +64,6 @@ html {
 
-* Keyboard. When the carousel has focus, the user can press Left, Right, Home,
-or End. These navigate to the expected element.
+* Keyboard. When the carousel has focus, the user can press Left, Right,
+  Home, or End. These navigate to the expected element.
 * Touch. On mobile and other touch-enabled devices, the user can drag left or
-right.
+  right.
 * Trackpad. The user can swipe left or right on a trackpad to navigate.
@@ -70,10 +76,10 @@
 
-* [basic-arrow-selection](http://github.com/basic-web-components/packages/basic-arrow-selection).
+* [basic-arrow-selection](http://github.com/basic-web-components/basic-web-components/packages/basic-arrow-selection).
   This adds prominent left and right arrow buttons on the side of the carousel.
-* [basic-page-dots](http://github.com/basic-web-components/packages/basic-page-dots).
+* [basic-page-dots](http://github.com/basic-web-components/basic-web-components/packages/basic-page-dots).
   This adds a series of small dots below the carousel to indicate the user's
   current position in the sequence.
 
-See those components for more details, but in general you can construct a common
-carousel with both arrow buttons and dots like so:
+See those components for more details, but in general you can construct a
+common carousel with both arrow buttons and dots like so:
 
@@ -80,0 +86,0 @@ <basic-arrow-selection>

src/Carousel.js

@@ -0,16 +1,52 @@
+import ElementBase from '../../basic-element-base/src/ElementBase';
+import ContentAsItems from '../../basic-component-mixins/src/ContentAsItems';
+import DirectionSelection from '../../basic-component-mixins/src/DirectionSelection';
+import DistributedChildrenAsContent from '../../basic-component-mixins/src/DistributedChildrenAsContent';
+import Generic from '../../basic-component-mixins/src/Generic';
+import ItemsSelection from '../../basic-component-mixins/src/ItemsSelection';
+import Keyboard from '../../basic-component-mixins/src/Keyboard';
+import KeyboardDirection from '../../basic-component-mixins/src/KeyboardDirection';
+import ObserveContentChanges from '../../basic-component-mixins/src/ObserveContentChanges';
+import SelectionAriaActive from '../../basic-component-mixins/src/SelectionAriaActive';
+import SlidingViewport from '../../basic-sliding-viewport/src/SlidingViewport'; // jshint ignore:line
+import SwipeDirection from '../../basic-component-mixins/src/SwipeDirection';
+import TargetInCollective from '../../basic-component-mixins/src/TargetInCollective';
+import TrackpadDirection from '../../basic-component-mixins/src/TrackpadDirection';
+
+let base = ElementBase.compose(
+  ContentAsItems,
+  DirectionSelection,
+  DistributedChildrenAsContent,
+  Generic,
+  ItemsSelection,
+  Keyboard,
+  KeyboardDirection,
+  ObserveContentChanges,
+  SelectionAriaActive,
+  SwipeDirection,
+  TargetInCollective,
+  TrackpadDirection
+);
+
+
 /**
- * @class Carousel
- * @classdesc Lets the user navigate laterally through a sequence of child
- * elements
+ * Lets the user navigate laterally through a sequence of child elements.
  *
  * basic-carousel is an implementation of the carousel user interface pattern,
- * commonly used for navigating between images, pages, and other elements.
- * This pattern presents the user with a linear sequence of elements, only one of
+ * commonly used for navigating between images, pages, and other elements. This
+ * pattern presents the user with a linear sequence of elements, only one of
  * which is shown at a time. The user can navigate to the next/previous element
  * with a variety of input methods.
  *
- * basic-carousel uses its children as the elements the user will navigate through.
- * In a typical use, a basic-carousel can be used to navigate between a sequence of
- * images:
+ * [Live demo](http://basicwebcomponents.org/basic-web-components/packages/basic-carousel/)
  *
+ * You can also view demos with optional
+ * [arrows](http://basicwebcomponents.org/basic-web-components/packages/basic-carousel/carouselWithArrows.html),
+ * [dots](http://basicwebcomponents.org/basic-web-components/packages/basic-carousel/carouselWithDots.html),
+ * or both [arrows and dots](http://basicwebcomponents.org/basic-web-components/packages/basic-carousel/carouselWithArrowsAndDots.html).
+ *
+ * basic-carousel uses its children as the elements the user will navigate
+ * through. In a typical use, a basic-carousel can be used to navigate between a
+ * sequence of images:
+ *
  *     <basic-carousel>
@@ -27,4 +63,4 @@ *       <img src="image1.jpg">
  * as flexible and robust as standard HTML elements. For example, it meets the
- * "Content Changes" criteria: the carousel will adapt to new child elements added
- * or removed at runtime.
+ * "Content Changes" criteria: the carousel will adapt to new child elements
+ * added or removed at runtime.
  *
@@ -35,4 +71,4 @@ * Currently, this component does not meet the Gold Standard criteria "Size to
  * whatever surface it is contained within, or 2) set it to be larger than the
- * largest child element you want to display. The former approach is more common,
- * and can be achieved with CSS styling such as:
+ * largest child element you want to display. The former approach is more
+ * common, and can be achieved with CSS styling such as:
  *
@@ -58,6 +94,6 @@ *     html {
  *
- * * Keyboard. When the carousel has focus, the user can press Left, Right, Home,
- * or End. These navigate to the expected element.
+ * * Keyboard. When the carousel has focus, the user can press Left, Right,
+ *   Home, or End. These navigate to the expected element.
  * * Touch. On mobile and other touch-enabled devices, the user can drag left or
- * right.
+ *   right.
  * * Trackpad. The user can swipe left or right on a trackpad to navigate.
@@ -70,10 +106,10 @@ *
  *
- * * [basic-arrow-selection](http://github.com/basic-web-components/packages/basic-arrow-selection).
+ * * [basic-arrow-selection](http://github.com/basic-web-components/basic-web-components/packages/basic-arrow-selection).
  *   This adds prominent left and right arrow buttons on the side of the carousel.
- * * [basic-page-dots](http://github.com/basic-web-components/packages/basic-page-dots).
+ * * [basic-page-dots](http://github.com/basic-web-components/basic-web-components/packages/basic-page-dots).
  *   This adds a series of small dots below the carousel to indicate the user's
  *   current position in the sequence.
  *
- * See those components for more details, but in general you can construct a common
- * carousel with both arrow buttons and dots like so:
+ * See those components for more details, but in general you can construct a
+ * common carousel with both arrow buttons and dots like so:
  *
@@ -105,36 +141,4 @@ *     <basic-arrow-selection>
  */
+class Carousel extends base {
 
-
-import ElementBase from '../../basic-element-base/src/ElementBase';
-import ContentAsItems from '../../basic-component-mixins/src/ContentAsItems';
-import DirectionSelection from '../../basic-component-mixins/src/DirectionSelection';
-import DistributedChildrenAsContent from '../../basic-component-mixins/src/DistributedChildrenAsContent';
-import Generic from '../../basic-component-mixins/src/Generic';
-import ItemsSelection from '../../basic-component-mixins/src/ItemsSelection';
-import Keyboard from '../../basic-component-mixins/src/Keyboard';
-import KeyboardDirection from '../../basic-component-mixins/src/KeyboardDirection';
-import ObserveContentChanges from '../../basic-component-mixins/src/ObserveContentChanges';
-import SelectionAriaActive from '../../basic-component-mixins/src/SelectionAriaActive';
-import SlidingViewport from '../../basic-sliding-viewport/src/SlidingViewport'; // jshint ignore:line
-import SwipeDirection from '../../basic-component-mixins/src/SwipeDirection';
-import TargetInCollective from '../../basic-component-mixins/src/TargetInCollective';
-import TrackpadDirection from '../../basic-component-mixins/src/TrackpadDirection';
-
-let base = ElementBase.compose(
-  ContentAsItems,
-  DirectionSelection,
-  DistributedChildrenAsContent,
-  Generic,
-  ItemsSelection,
-  Keyboard,
-  KeyboardDirection,
-  ObserveContentChanges,
-  SelectionAriaActive,
-  SwipeDirection,
-  TargetInCollective,
-  TrackpadDirection
-);
-
-export default class Carousel extends base {
-
   attachedCallback() {
@@ -193,1 +197,2 @@ if (super.attachedCallback) { super.attachedCallback(); }
 document.registerElement('basic-carousel', Carousel);
+export default Carousel;

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

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Lines of code

3978

increased by17.45%

Number of lines in readme file

97

increased by6.59%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

354256

decreased by-5.62%

Dependency changes

• Updatedbasic-component-mixins@^0.7.1

• Updatedbasic-element-base@^0.7.1