@mapbox/assembly-components - npm Package Compare versions

Comparing version 0.0.0 to 0.1.0

icon-button.js

@@ -44,2 +44,27 @@ 'use strict';
  * @param [iconClasses] {string} - Extra classes for the icon.
+ * @example
+ * import React, { PureComponent } from 'react';
+ * import { IconButton } from '@mapbox/assembly-components/icon-button';
+ *
+ * export default class Example extends PureComponent {
+ *   render() {
+ *     return (
+ *       <div>
+ *         <IconButton
+ *           tooltipContent='Close'
+ *           onClick={() => console.log('triggered on click')}
+ *           icon='close'
+ *         />
+ *
+ *         <IconButton
+ *           tooltipContent={<span className="txt-bold">tada</strong>}
+ *           onClick={() => console.log('triggered on click')}
+ *           icon='bike'
+ *           buttonClasses='p12 bg-gray'
+ *           iconClasses='color-gray-dark'
+ *         />
+ *       </div>
+ *     )
+ *   }
+ * }
  */
@@ -46,0 +71,0 @@ var IconButton = function (_React$PureComponent) {

icon.js

@@ -35,2 +35,23 @@ 'use strict';
 
+/**
+ * Display an icon.
+ *
+ * @param name {string} - The [name of the icon](https://www.mapbox.com/assembly/icons/).
+ * @param extraClasses {string} [extraClasses=''] -  Additional classes to apply to the icon element.
+ * @example
+ * import React, { PureComponent } from 'react';
+ * import { Icon } from '@mapbox/assembly-components/icon';
+ *
+ * export default class Example extends PureComponent {
+ *   render() {
+ *     return (
+ *       <div>
+ *         <Icon name='close' />
+ *         <Icon name='bicycle' extraClasses='color-gray-dark' />
+ *       </div>
+ *     )
+ *   }
+ * }
+ */
+
 var Icon = function (_React$PureComponent) {
@@ -37,0 +58,0 @@ _inherits(Icon, _React$PureComponent);

modal.js

@@ -32,2 +32,31 @@ 'use strict';
 
+/**
+ * Display a fullscreen modal.
+ *
+ * @param title {string} - Title.
+ * @param onExit {Function} - Function called when the close link is triggered.
+ * @param getApplicationNode {Function} [getApplicationNode=() => document.getElementById('app')] - The DOM node React attaches itself to when initialized.
+ * @param size {string} [size='large'] - One of `small` or `large`.
+ * @param initialFocus {string} - identify a specific element that should receive initial focus. The value should represent a selector `querySelector` can reach.
+ * @param children {Function | ReactNode} - the content the Modal is populated with.
+ * @example
+ * import React, { PureComponent } from 'react';
+ * import { Modal } from '@mapbox/assembly-components/modal';
+ *
+ * export default class Example extends PureComponent {
+ *   render() {
+ *     return (
+ *       <div>
+ *         <Modal
+ *          title='Modal title'
+ *          size='small'
+ *          onExit={() => console.log('exited') }
+ *         >
+ *          I am modal content
+ *         </Modal>
+ *       </div>
+ *     )
+ *   }
+ * }
+ */
 var Modal = function (_React$Component) {
@@ -92,4 +121,4 @@ _inherits(Modal, _React$Component);
   title: _propTypes2.default.string.isRequired,
-  onExit: _propTypes2.default.function.isRequired,
-  getApplicationNode: _propTypes2.default.function,
+  onExit: _propTypes2.default.func.isRequired,
+  getApplicationNode: _propTypes2.default.func,
   size: _propTypes2.default.oneOf(['small', 'large']),
@@ -96,0 +125,0 @@ initialFocus: _propTypes2.default.string,

package.json

 {
   "name": "@mapbox/assembly-components",
   "description": "A React component library",
-  "version": "0.0.0",
+  "version": "0.1.0",
   "author": "Mapbox",
@@ -24,2 +24,2 @@ "license": "Copyright © Mapbox",
   }
-}
+}

tooltip.js

@@ -43,2 +43,45 @@ 'use strict';
 
+/**
+ * Display a tooltip containing content.
+ *
+ * @param children {Function | ReactNode} - the content the tooltip is associated with.
+ * @param content {Function | ReactNode} - Content within the tooltip.
+ * @param placement {string} [placement='top'] - Position of the tooltip. Can be one of `top`, `bottom`, `left` or `right`.
+ * @param alignment {string} [alignment='center'] - Alignment of the content within the tooltip. Can be one of `top`, `bottom`, `left`, `right` or `center`.
+ * @param disabled {boolean} [disabled=false] - Disable the tooltip.
+ * @param backgroundColor {string} [backgroundColor='#fff'] - Background color of the tooltip.
+ * @param respondsToClick {boolean} [respondsToClick=false] - Tooltip is triggered only by mouse click.
+ * @param tooltipClasses {string} [tooltipClasses='round py6 px12 shadow-darken25 txt-s z1'] - Pass custom classes to style the tooltip container.
+ * @param testId {string} [testId=''] - For testing only.
+ * @param display {string} [display='inline-block'] - The CSS display property of the trigger elemtent.
+ * @example
+ * import React, { PureComponent } from 'react';
+ * import { Tooltip } from '@mapbox/assembly-components/tooltip';
+ *
+ * export default class Example extends PureComponent {
+ *   render() {
+ *     return (
+ *       <div>
+ *         <Tooltip content='Basic'>
+ *          <span>Basic</span>
+ *         </Tooltip>
+ *
+ *         <Tooltip
+ *           content='All options'
+ *           placement: 'top',
+ *           alignment: 'left',
+ *           disabled: true,
+ *           backgroundColor: 'red',
+ *           respondsToClick: true,
+ *           tooltipClasses: 'py6 px12 round txt-s txt-bold',
+ *           display: 'inline'
+ *          >
+ *          <span>All options</span>
+ *         </Tooltip>
+ *       </div>
+ *     )
+ *   }
+ * }
+ */
+
 var Tooltip = function (_React$Component) {
@@ -45,0 +88,0 @@ _inherits(Tooltip, _React$Component);

util/calculate-popover-position.js

@@ -35,2 +35,3 @@ 'use strict';
 var ALIGNMENT_RIGHT = 'right';
+var ALIGNMENT_CENTER = 'center';
 var POINTER_DIRECTION_DOWNWARD = 'downward';
@@ -168,4 +169,6 @@ var POINTER_DIRECTION_UPWARD = 'upward';
         calculatedPlacement = PLACEMENT_LEFT;
+        calculatedAlignment = ALIGNMENT_CENTER;
       } else if (allowPlacementAxisChange && sufficientSpaceIfPlacedOnRight) {
         calculatedPlacement = PLACEMENT_RIGHT;
+        calculatedAlignment = ALIGNMENT_CENTER;
       } else if (spaceAboveAnchor > spaceBelowAnchor) {
@@ -181,4 +184,6 @@ calculatedPlacement = PLACEMENT_TOP;
         calculatedPlacement = PLACEMENT_LEFT;
+        calculatedAlignment = ALIGNMENT_CENTER;
       } else if (allowPlacementAxisChange && sufficientSpaceIfPlacedOnRight) {
         calculatedPlacement = PLACEMENT_RIGHT;
+        calculatedAlignment = ALIGNMENT_CENTER;
       } else if (spaceBelowAnchor > spaceAboveAnchor) {
@@ -196,4 +201,6 @@ calculatedPlacement = PLACEMENT_BOTTOM;
         calculatedPlacement = PLACEMENT_TOP;
+        calculatedAlignment = ALIGNMENT_CENTER;
       } else if (allowPlacementAxisChange) {
         calculatedPlacement = PLACEMENT_BOTTOM;
+        calculatedAlignment = ALIGNMENT_CENTER;
       } else if (spaceRightOfAnchor > spaceLeftOfAnchor) {
@@ -209,4 +216,6 @@ calculatedPlacement = PLACEMENT_RIGHT;
         calculatedPlacement = PLACEMENT_TOP;
+        calculatedAlignment = ALIGNMENT_CENTER;
       } else if (allowPlacementAxisChange) {
         calculatedPlacement = PLACEMENT_BOTTOM;
+        calculatedAlignment = ALIGNMENT_CENTER;
       } else if (spaceLeftOfAnchor > spaceRightOfAnchor) {
@@ -213,0 +222,0 @@ calculatedPlacement = PLACEMENT_LEFT;

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

82585

increased by18.81%

Number of package files

17

increased by21.43%

Lines of code

1642

increased by21.09%

No dependency changes