@asphalt-react/button - npm Package Compare versions

Comparing version 1.14.1 to 1.16.0

CHANGELOG.md

@@ -6,2 +6,12 @@ # Change Log
 
+# [1.16.0](https://source.golabs.io/asphalt/asphalt-react/compare/v1.15.0...v1.16.0) (2022-07-26)
+
+
+### Features
+
+* **button:** add support for text qulifiers ([e049f14](https://source.golabs.io/asphalt/asphalt-react/commits/e049f149679eaf9ae72c86e476db619014e51fff))
+
+
+
+
 ## [1.14.1](https://source.golabs.io/asphalt/asphalt-react/compare/v1.14.0...v1.14.1) (2022-05-12)
@@ -8,0 +18,0 @@

dist/cjs/index.js

@@ -10,2 +10,3 @@ 'use strict';
 var context = require('@asphalt-react/context');
+var qualifier = require('@asphalt-react/qualifier');
 var SvgNormalizer = require('@asphalt-react/svg-normalizer');
@@ -181,5 +182,2 @@
 } = helper.propsUtil;
-const {
-  isSVG: isSVG$1
-} = helper.svgUtil;
 const Button = /*#__PURE__*/React.forwardRef(({
@@ -192,3 +190,3 @@ children,
   danger,
-  qualifier,
+  qualifier: qualifier$1,
   qualifierStart,
@@ -203,11 +201,6 @@ qualifierEnd,
 
-  if (outline && qualifier) {
+  if (outline && qualifier$1) {
     console.warn("Outline Button cannot have qualifiers. Added qualifier will be ignored");
-    qualifier = false;
+    qualifier$1 = false;
   }
-
-  if (qualifier && !isSVG$1(qualifier)) {
-    console.warn("Qualifier can only be SVG");
-    qualifier = false;
-  }
   /**
@@ -283,17 +276,14 @@ * Returns style of Button
   }, {
-    [styles.qualifier]: qualifier
+    [styles.qualifier]: qualifier$1
   }, {
-    [styles.end]: qualifier && qualifierEnd
+    [styles.end]: qualifier$1 && qualifierEnd
   });
-
-  const Qualifier = () => /*#__PURE__*/React__default['default'].createElement("span", {
-    className: cn__default['default'](styles.qualifierContainer)
-  }, /*#__PURE__*/React__default['default'].createElement(SvgNormalizer__default['default'], {
-    size: svgSize(size)
-  }, qualifier));
-
-  return qualifier ? /*#__PURE__*/React__default['default'].createElement("button", _extends({}, rest, {
+  return qualifier$1 ? /*#__PURE__*/React__default['default'].createElement("button", _extends({}, rest, {
     className: btnclasses,
     ref: ref
-  }), /*#__PURE__*/React__default['default'].createElement(Qualifier, null), children) : /*#__PURE__*/React__default['default'].createElement(context.Consumer, null, ({
+  }), /*#__PURE__*/React__default['default'].createElement("span", {
+    className: cn__default['default'](styles.qualifierContainer)
+  }, /*#__PURE__*/React__default['default'].createElement(qualifier.Qualifier, {
+    iconSize: svgSize(size)
+  }, qualifier$1)), children) : /*#__PURE__*/React__default['default'].createElement(context.Consumer, null, ({
     supportType
@@ -354,7 +344,7 @@ }) => {
    * Qualifiers provide a hint about the action a button will perform. Appends (default) or prepends an icon to the button's caption.
-   * Accepts SVG or SVG wrapped React component.
+   * Accepts SVG or string.
    *
    * Checkout `@asphalt-react/iconpack` for SVG wrapped React components.
    */
-  qualifier: PropTypes__default['default'].element,
+  qualifier: PropTypes__default['default'].oneOfType([PropTypes__default['default'].element, PropTypes__default['default'].string]),
 
@@ -584,5 +574,2 @@ /**
 } = helper.propsUtil;
-const {
-  isSVG
-} = helper.svgUtil;
 const ButtonLink = /*#__PURE__*/React.forwardRef(({
@@ -593,3 +580,3 @@ children,
   secondary,
-  qualifier,
+  qualifier: qualifier$1,
   as: Link,
@@ -605,4 +592,4 @@ tagProps,
 
-  if (opensInNewTab(tagProps === null || tagProps === void 0 ? void 0 : tagProps.target) && !qualifier) {
-    qualifier = /*#__PURE__*/React__default['default'].createElement(NewTab, null);
+  if (opensInNewTab(tagProps === null || tagProps === void 0 ? void 0 : tagProps.target) && !qualifier$1) {
+    qualifier$1 = /*#__PURE__*/React__default['default'].createElement(NewTab, null);
   } // filtering out `style` prop from `tagProps`
@@ -614,14 +601,3 @@
     ...restTagProps
-  } = tagProps; // show warning if icon is not an SVG
-
-  if (qualifier && !isSVG(qualifier)) {
-    console.warn("ButtonLink: `qualifier` can only be SVG");
-    qualifier = null;
-  }
-
-  const Qualifier = () => /*#__PURE__*/React__default['default'].createElement("span", {
-    className: cn__default['default'](styles.qualifierContainer)
-  }, /*#__PURE__*/React__default['default'].createElement(SvgNormalizer__default['default'], {
-    size: svgSize(size)
-  }, qualifier));
+  } = tagProps;
   /**
@@ -636,3 +612,2 @@ * Returns style of ButtonLink
 
-
   const selectBtnTypeClass = () => {
@@ -660,5 +635,5 @@ const validateBtnProp = createPropOccurValidator$1(["primary", "secondary"]);
   }), selectBtnTypeClass(), styles.link, {
-    [styles.qualifier]: qualifier
+    [styles.qualifier]: qualifier$1
   }, {
-    [styles.end]: qualifier && qualifierEnd
+    [styles.end]: qualifier$1 && qualifierEnd
   });
@@ -668,3 +643,7 @@ return /*#__PURE__*/React__default['default'].createElement(Link, _extends({}, getRelAttributes(tagProps === null || tagProps === void 0 ? void 0 : tagProps.target), restTagProps, {
     ref: ref
-  }), qualifier && /*#__PURE__*/React__default['default'].createElement(Qualifier, null), children && children);
+  }), qualifier$1 && /*#__PURE__*/React__default['default'].createElement("span", {
+    className: cn__default['default'](styles.qualifierContainer)
+  }, /*#__PURE__*/React__default['default'].createElement(qualifier.Qualifier, {
+    iconSize: svgSize(size)
+  }, qualifier$1)), children && children);
 });
@@ -705,7 +684,7 @@ ButtonLink.displayName = "ButtonLink";
    * Qualifiers provide a hint about the action a ButtonLink will perform. Appends or prepends (default) an icon to the caption.
-   * Accepts SVG or SVG wrapped React component.
+   * Accepts SVG or string.
    *
    * Checkout `@asphalt-react/iconpack` for SVG wrapped React components.
    */
-  qualifier: PropTypes__default['default'].element,
+  qualifier: PropTypes__default['default'].oneOfType([PropTypes__default['default'].element, PropTypes__default['default'].string]),
 
@@ -712,0 +691,0 @@ /**

dist/index.js

 import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import cn from 'classnames';
-import { svgUtil, INFO, SUCCESS, WARNING, DANGER, propsUtil } from '@asphalt-react/helper';
+import { INFO, SUCCESS, WARNING, DANGER, propsUtil, svgUtil } from '@asphalt-react/helper';
 import { sendStyles, Consumer } from '@asphalt-react/context';
+import { Qualifier } from '@asphalt-react/qualifier';
 import SvgNormalizer from '@asphalt-react/svg-normalizer';
@@ -169,5 +170,2 @@
 } = propsUtil;
-const {
-  isSVG: isSVG$1
-} = svgUtil;
 const Button = /*#__PURE__*/forwardRef(({
@@ -194,7 +192,2 @@ children,
   }
-
-  if (qualifier && !isSVG$1(qualifier)) {
-    console.warn("Qualifier can only be SVG");
-    qualifier = false;
-  }
   /**
@@ -274,13 +267,10 @@ * Returns style of Button
   });
-
-  const Qualifier = () => /*#__PURE__*/React.createElement("span", {
-    className: cn(styles.qualifierContainer)
-  }, /*#__PURE__*/React.createElement(SvgNormalizer, {
-    size: svgSize(size)
-  }, qualifier));
-
   return qualifier ? /*#__PURE__*/React.createElement("button", _extends({}, rest, {
     className: btnclasses,
     ref: ref
-  }), /*#__PURE__*/React.createElement(Qualifier, null), children) : /*#__PURE__*/React.createElement(Consumer, null, ({
+  }), /*#__PURE__*/React.createElement("span", {
+    className: cn(styles.qualifierContainer)
+  }, /*#__PURE__*/React.createElement(Qualifier, {
+    iconSize: svgSize(size)
+  }, qualifier)), children) : /*#__PURE__*/React.createElement(Consumer, null, ({
     supportType
@@ -341,7 +331,7 @@ }) => {
    * Qualifiers provide a hint about the action a button will perform. Appends (default) or prepends an icon to the button's caption.
-   * Accepts SVG or SVG wrapped React component.
+   * Accepts SVG or string.
    *
    * Checkout `@asphalt-react/iconpack` for SVG wrapped React components.
    */
-  qualifier: PropTypes.element,
+  qualifier: PropTypes.oneOfType([PropTypes.element, PropTypes.string]),
 
@@ -571,5 +561,2 @@ /**
 } = propsUtil;
-const {
-  isSVG
-} = svgUtil;
 const ButtonLink = /*#__PURE__*/forwardRef(({
@@ -599,14 +586,3 @@ children,
     ...restTagProps
-  } = tagProps; // show warning if icon is not an SVG
-
-  if (qualifier && !isSVG(qualifier)) {
-    console.warn("ButtonLink: `qualifier` can only be SVG");
-    qualifier = null;
-  }
-
-  const Qualifier = () => /*#__PURE__*/React.createElement("span", {
-    className: cn(styles.qualifierContainer)
-  }, /*#__PURE__*/React.createElement(SvgNormalizer, {
-    size: svgSize(size)
-  }, qualifier));
+  } = tagProps;
   /**
@@ -621,3 +597,2 @@ * Returns style of ButtonLink
 
-
   const selectBtnTypeClass = () => {
@@ -652,3 +627,7 @@ const validateBtnProp = createPropOccurValidator$1(["primary", "secondary"]);
     ref: ref
-  }), qualifier && /*#__PURE__*/React.createElement(Qualifier, null), children && children);
+  }), qualifier && /*#__PURE__*/React.createElement("span", {
+    className: cn(styles.qualifierContainer)
+  }, /*#__PURE__*/React.createElement(Qualifier, {
+    iconSize: svgSize(size)
+  }, qualifier)), children && children);
 });
@@ -689,7 +668,7 @@ ButtonLink.displayName = "ButtonLink";
    * Qualifiers provide a hint about the action a ButtonLink will perform. Appends or prepends (default) an icon to the caption.
-   * Accepts SVG or SVG wrapped React component.
+   * Accepts SVG or string.
    *
    * Checkout `@asphalt-react/iconpack` for SVG wrapped React components.
    */
-  qualifier: PropTypes.element,
+  qualifier: PropTypes.oneOfType([PropTypes.element, PropTypes.string]),
 
@@ -696,0 +675,0 @@ /**

lib/button-link.js

@@ -5,5 +5,4 @@ import React, { forwardRef } from "react"
 import cn from "classnames"
-import { svgUtil, propsUtil } from "@asphalt-react/helper"
-import SvgNormalizer from "@asphalt-react/svg-normalizer"
-
+import { propsUtil } from "@asphalt-react/helper"
+import { Qualifier } from "@asphalt-react/qualifier"
 import {
@@ -19,3 +18,2 @@ createBtnClasses,
 const { createPropOccurValidator } = propsUtil
-const { isSVG } = svgUtil
 
@@ -49,14 +47,2 @@ const ButtonLink = forwardRef(
 
-    // show warning if icon is not an SVG
-    if (qualifier && !isSVG(qualifier)) {
-      console.warn("ButtonLink: `qualifier` can only be SVG")
-      qualifier = null
-    }
-
-    const Qualifier = () => (
-      <span className={cn(styles.qualifierContainer)}>
-        <SvgNormalizer size={svgSize(size)}>{qualifier}</SvgNormalizer>
-      </span>
-    )
-
     /**
@@ -102,3 +88,7 @@ * Returns style of ButtonLink
       >
-        {qualifier && <Qualifier />}
+        {qualifier && (
+          <span className={cn(styles.qualifierContainer)}>
+            <Qualifier iconSize={svgSize(size)}>{qualifier}</Qualifier>
+          </span>
+        )}
         {children && children}
@@ -139,7 +129,7 @@ </Link>
    * Qualifiers provide a hint about the action a ButtonLink will perform. Appends or prepends (default) an icon to the caption.
-   * Accepts SVG or SVG wrapped React component.
+   * Accepts SVG or string.
    *
    * Checkout `@asphalt-react/iconpack` for SVG wrapped React components.
    */
-  qualifier: PropTypes.element,
+  qualifier: PropTypes.oneOfType([PropTypes.element, PropTypes.string]),
   /**
@@ -146,0 +136,0 @@ * Appends qualifier to the caption.

lib/button.js

@@ -6,3 +6,2 @@ import React, { forwardRef } from "react"
   propsUtil,
-  svgUtil,
   DANGER,
@@ -13,5 +12,5 @@ INFO,
 } from "@asphalt-react/helper"
+
 import { Consumer, sendStyles } from "@asphalt-react/context"
-import SvgNormalizer from "@asphalt-react/svg-normalizer"
-
+import { Qualifier } from "@asphalt-react/qualifier"
 import { createBtnClasses, svgSize } from "./helper"
@@ -21,3 +20,2 @@ import styles, { stylesheet } from "./button.css"
 const { createPropOccurValidator } = propsUtil
-const { isSVG } = svgUtil
 
@@ -52,7 +50,2 @@ const Button = forwardRef(
 
-    if (qualifier && !isSVG(qualifier)) {
-      console.warn("Qualifier can only be SVG")
-      qualifier = false
-    }
-
     /**
@@ -121,11 +114,7 @@ * Returns style of Button
 
-    const Qualifier = () => (
-      <span className={cn(styles.qualifierContainer)}>
-        <SvgNormalizer size={svgSize(size)}>{qualifier}</SvgNormalizer>
-      </span>
-    )
-
     return qualifier ? (
       <button {...rest} className={btnclasses} ref={ref}>
-        <Qualifier />
+        <span className={cn(styles.qualifierContainer)}>
+          <Qualifier iconSize={svgSize(size)}>{qualifier}</Qualifier>
+        </span>
         {children}
@@ -189,7 +178,7 @@ </button>
    * Qualifiers provide a hint about the action a button will perform. Appends (default) or prepends an icon to the button's caption.
-   * Accepts SVG or SVG wrapped React component.
+   * Accepts SVG or string.
    *
    * Checkout `@asphalt-react/iconpack` for SVG wrapped React components.
    */
-  qualifier: PropTypes.element,
+  qualifier: PropTypes.oneOfType([PropTypes.element, PropTypes.string]),
   /**
@@ -196,0 +185,0 @@ * Renders qualifier before the button's caption

package.json

 {
   "name": "@asphalt-react/button",
-  "version": "1.14.1",
+  "version": "1.16.0",
   "description": "Button",
@@ -41,4 +41,5 @@ "keywords": [
   "dependencies": {
-    "@asphalt-react/context": "^1.14.1",
+    "@asphalt-react/context": "^1.16.0",
     "@asphalt-react/helper": "^1.14.1",
+    "@asphalt-react/qualifier": "^1.16.0",
     "@asphalt-react/svg-normalizer": "^1.14.1",
@@ -48,3 +49,3 @@ "classnames": "^2.3.1",
   },
-  "gitHead": "eed9dc0befa8f1f3d2d85683efccfa3fbc33247b"
+  "gitHead": "8c0c23a0e60b0f8240dac1532c03a03545e0aaba"
 }

README.md

@@ -10,3 +10,4 @@ # Button
 
-Buttons can render an icon or [qualifier](#qualifier) before or after the caption.
+Buttons can render an icon or text before or after the caption.
+
 Buttons except ToggleButtons:
@@ -115,9 +116,9 @@
 Qualifiers provide a hint about the action a button will perform. Appends (default) or prepends an icon to the button's caption.
-Accepts SVG or SVG wrapped React component.
+Accepts SVG or string.
 
 Checkout `@asphalt-react/iconpack` for SVG wrapped React components.
 
-| type    | required | default |
-| ------- | -------- | ------- |
-| element | false    | null    |
+| type  | required | default |
+| ----- | -------- | ------- |
+| union | false    | null    |
 
@@ -324,9 +325,9 @@ ### qualifierStart
 Qualifiers provide a hint about the action a ButtonLink will perform. Appends or prepends (default) an icon to the caption.
-Accepts SVG or SVG wrapped React component.
+Accepts SVG or string.
 
 Checkout `@asphalt-react/iconpack` for SVG wrapped React components.
 
-| type    | required | default |
-| ------- | -------- | ------- |
-| element | false    | null    |
+| type  | required | default |
+| ----- | -------- | ------- |
+| union | false    | null    |
 
@@ -333,0 +334,0 @@ ### qualifierEnd

New alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

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

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Number of lines in readme file

396

0.25%

Number of medium supply chain risk alerts

0

-100%

Worsened metrics

Total package byte prevSize

152115

-0.63%

Dependency count

7

16.67%

Lines of code

2727

-1.66%

Dependency changes

• + Added

  @asphalt-react/qualifier@^1.16.0

• + Added

  @asphalt-react/qualifier@1.17.0
  (transitive)

• Updated

  @asphalt-react/context@^1.16.0