@s-ui/react-atom-action-button - npm Package Compare versions

Comparing version 1.5.0 to 1.6.0

CHANGELOG.md

@@ -1,5 +0,47 @@
-# Change Log
+# CHANGELOG
 
-All notable changes to this project will be documented in this file.
+# 1.6.0 (2021-12-09)
 
+
+### Bug Fixes
+
+* **components/atom/actionButton:** Fix typo in readme documentation ([b76e1b7](https://github.com/SUI-Components/sui-components/commit/b76e1b78968ea162d61641a797a8ad88fecc413f))
+
+
+
+# 1.1.0 (2021-10-20)
+
+
+### Bug Fixes
+
+* **components/atom/actionButton/demo:** Updated demo from playground to js file ([8c2afb4](https://github.com/SUI-Components/sui-components/commit/8c2afb4688b8706f9b295a34a47764be872eff8f))
+
+
+### Features
+
+* **components/atom/actionButton/demo:** Add types to demo ([dc9c06f](https://github.com/SUI-Components/sui-components/commit/dc9c06f627604ccc287cbcaa362a371b8a80712d))
+* **components/atom/actionButton/demo:** Update on style for form section ([739d236](https://github.com/SUI-Components/sui-components/commit/739d236399e5cf039fa07d907e38cf709c15c218))
+* **components/atom/actionButton/demo:** Updated demo with more examples ([6e6fd7c](https://github.com/SUI-Components/sui-components/commit/6e6fd7c923306b8e47ca463921cf1f786fa2d9a5))
+* **Root:** normalize bborder variables ([b5da148](https://github.com/SUI-Components/sui-components/commit/b5da1482ca96b523f0c168c7040783ce78a7f14d))
+
+
+
+# 1.5.0 (2020-12-21)
+
+
+### Bug Fixes
+
+* **atom/actionButton:** fix propTypes ([e09b8ba](https://github.com/SUI-Components/sui-components/commit/e09b8ba3d6200ae34a22fa42a353279ec4b08a0e))
+
+
+
+# 1.4.0 (2020-11-24)
+
+
+### Features
+
+* **atom/actionButton:** Use new jsx runtime ([c1e84ab](https://github.com/SUI-Components/sui-components/commit/c1e84ab26b6241fd5ce7f7f62e284f87af8814fd))
+
+
+
 # 1.3.0 (2020-07-21)
@@ -10,3 +52,3 @@
 
-* baseclass naming ([1630cbd](https://github.com/SUI-Components/sui-components/commit/1630cbd442335e2823ca61f5029cbc29c83b865e))
+* **atom/actionButton:** baseclass naming ([1630cbd](https://github.com/SUI-Components/sui-components/commit/1630cbd442335e2823ca61f5029cbc29c83b865e))
 
@@ -20,3 +62,3 @@
 
-* pass extra props down to button ([e41f84a](https://github.com/SUI-Components/sui-components/commit/e41f84a30eee42153cd50b9d1b5023bdf040c52f))
+* **atom/actionButton:** pass extra props down to button ([e41f84a](https://github.com/SUI-Components/sui-components/commit/e41f84a30eee42153cd50b9d1b5023bdf040c52f))
 
@@ -30,6 +72,6 @@
 
-* clean up styles ([c5d7807](https://github.com/SUI-Components/sui-components/commit/c5d78075db0b501073690eb1bedb3833644a7afb))
-* remove unnecessary config file ([fce57d0](https://github.com/SUI-Components/sui-components/commit/fce57d09f9e5bc128cd7dd5f843249b32c2d61cf))
-* remove unnecessary export ([84384d2](https://github.com/SUI-Components/sui-components/commit/84384d2a86293c0acd3d938961f12f4e5748411e))
-* remove unused mixin ([5cb2d12](https://github.com/SUI-Components/sui-components/commit/5cb2d12ff953f68b8481b7aab9ed6d6573068341))
+* **atom/actionButton:** clean up styles ([c5d7807](https://github.com/SUI-Components/sui-components/commit/c5d78075db0b501073690eb1bedb3833644a7afb))
+* **atom/actionButton:** remove unnecessary config file ([fce57d0](https://github.com/SUI-Components/sui-components/commit/fce57d09f9e5bc128cd7dd5f843249b32c2d61cf))
+* **atom/actionButton:** remove unnecessary export ([84384d2](https://github.com/SUI-Components/sui-components/commit/84384d2a86293c0acd3d938961f12f4e5748411e))
+* **atom/actionButton:** remove unused mixin ([5cb2d12](https://github.com/SUI-Components/sui-components/commit/5cb2d12ff953f68b8481b7aab9ed6d6573068341))
 
@@ -39,11 +81,11 @@
 
-* add basic config file for action button ([19e18fb](https://github.com/SUI-Components/sui-components/commit/19e18fb302d75187fe95c4182683b67fe326d596))
-* generate component ([84f13b0](https://github.com/SUI-Components/sui-components/commit/84f13b06913e4780bb0955c12ae97c43c2deee7a))
-* implement ActionButton component ([c780bf9](https://github.com/SUI-Components/sui-components/commit/c780bf96d98e73bb58835445540273066f47ff07))
-* implement main component ([505d3ed](https://github.com/SUI-Components/sui-components/commit/505d3ed8d4c458b0b7f5eb52fff3392eb6f24af0))
-* implement styles for component ([eb3fc84](https://github.com/SUI-Components/sui-components/commit/eb3fc8403ca159306ac5f50ba447ce5661e0d75d))
-* simplify styles, add variables for filledPositive bg color ([33fd49c](https://github.com/SUI-Components/sui-components/commit/33fd49cb2b39755ca0a56a0056c559c65b4a43ef))
-* update component deps to include react-atom-icon ([93b3484](https://github.com/SUI-Components/sui-components/commit/93b34847bfeb809fc4727583f49e9202f8ba974b))
+* **atom/actionButton:** add basic config file for action button ([19e18fb](https://github.com/SUI-Components/sui-components/commit/19e18fb302d75187fe95c4182683b67fe326d596))
+* **atom/actionButton:** generate component ([84f13b0](https://github.com/SUI-Components/sui-components/commit/84f13b06913e4780bb0955c12ae97c43c2deee7a))
+* **atom/actionButton:** implement ActionButton component ([c780bf9](https://github.com/SUI-Components/sui-components/commit/c780bf96d98e73bb58835445540273066f47ff07))
+* **atom/actionButton:** implement main component ([505d3ed](https://github.com/SUI-Components/sui-components/commit/505d3ed8d4c458b0b7f5eb52fff3392eb6f24af0))
+* **atom/actionButton:** implement styles for component ([eb3fc84](https://github.com/SUI-Components/sui-components/commit/eb3fc8403ca159306ac5f50ba447ce5661e0d75d))
+* **atom/actionButton:** simplify styles, add variables for filledPositive bg color ([33fd49c](https://github.com/SUI-Components/sui-components/commit/33fd49cb2b39755ca0a56a0056c559c65b4a43ef))
+* **atom/actionButton:** update component deps to include react-atom-icon ([93b3484](https://github.com/SUI-Components/sui-components/commit/93b34847bfeb809fc4727583f49e9202f8ba974b))
 
 
 

lib/ActionButton.js

 import _extends from "@babel/runtime/helpers/esm/extends";
-import { jsx as _jsx } from "react/jsx-runtime";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+var _excluded = ["children", "className", "color", "disabled", "focused", "href", "icon", "isButton", "isSubmit", "link", "linkFactory", "size", "style", "target", "title"];
+import ActionButtonWrapper from './ActionButtonWrapper';
+import AtomIcon, { ATOM_ICON_COLORS, ATOM_ICON_SIZES } from '@s-ui/react-atom-icon';
+import cx from 'classnames';
 import PropTypes from 'prop-types';
+import { BASE_CLASS, COLORS, MODIFIERS, SIZES, STYLES, CLASSES, COLOR_CLASSES } from './config';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 
-var ActionButton = function ActionButton(_ref) {
+var AtomActionButton = function AtomActionButton(_ref) {
   var children = _ref.children,
+      className = _ref.className,
+      _ref$color = _ref.color,
+      color = _ref$color === void 0 ? COLORS.PRIMARY : _ref$color,
+      disabled = _ref.disabled,
+      focused = _ref.focused,
       href = _ref.href,
-      target = _ref.target,
-      disabled = _ref.disabled,
+      icon = _ref.icon,
+      isButton = _ref.isButton,
       isSubmit = _ref.isSubmit,
-      isButton = _ref.isButton,
       link = _ref.link,
-      Link = _ref.linkFactory,
-      attrs = _objectWithoutPropertiesLoose(_ref, ["children", "href", "target", "disabled", "isSubmit", "isButton", "link", "linkFactory"]);
+      linkFactory = _ref.linkFactory,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? SIZES.MEDIUM : _ref$size,
+      _ref$style = _ref.style,
+      style = _ref$style === void 0 ? STYLES.FILLED_NEGATIVE : _ref$style,
+      target = _ref.target,
+      title = _ref.title,
+      restProps = _objectWithoutPropertiesLoose(_ref, _excluded);
 
-  if (isSubmit) attrs.type = 'submit';
-  if (isButton) attrs.type = 'button';
-  return link ? /*#__PURE__*/_jsx(Link, _extends({}, attrs, {
+  var classNames = cx(BASE_CLASS, COLOR_CLASSES[color], CLASSES[style], CLASSES[size], focused && CLASSES[MODIFIERS.ACTIVE_FOCUSED], disabled && CLASSES[MODIFIERS.DISABLED], link && CLASSES[MODIFIERS.LINK], className);
+
+  var buttonProps = _extends({
     href: href,
+    isButton: isButton,
+    isSubmit: isSubmit,
+    link: link,
+    linkFactory: linkFactory,
     target: target,
-    rel: target === '_blank' ? 'noopener' : undefined,
-    children: children
-  })) : /*#__PURE__*/_jsx("button", _extends({}, attrs, {
-    disabled: disabled,
-    children: children
+    title: title
+  }, restProps);
+
+  return /*#__PURE__*/_jsxs(ActionButtonWrapper, _extends({}, buttonProps, {
+    className: classNames,
+    children: [/*#__PURE__*/_jsx("div", {
+      className: BASE_CLASS + "-icon",
+      children: /*#__PURE__*/_jsx(AtomIcon, {
+        size: ATOM_ICON_SIZES.medium,
+        color: ATOM_ICON_COLORS.currentColor,
+        children: icon
+      })
+    }), /*#__PURE__*/_jsx("div", {
+      className: BASE_CLASS + "-text",
+      children: children
+    })]
   }));
 };
 
-ActionButton.propTypes = process.env.NODE_ENV !== "production" ? {
-  /**
-   * Content to be included in the button
-   */
-  children: PropTypes.node,
-
-  /**
-   * Disable: faded with no interaction.
-   */
-  disabled: PropTypes.bool,
-
-  /**
-   * URL to be added on the HTML link
-   */
-  href: PropTypes.string,
-
-  /**
-   * HTML element: if true, render a link. Otherwise render a button
-   */
-  link: PropTypes.bool,
-
-  /**
-   * Factory used to create navigation links
-   */
-  linkFactory: PropTypes.func,
-
-  /**
-   * if true, type="submit" (needed when several buttons coexist under the same form)
-   */
-  isSubmit: PropTypes.bool,
-
-  /**
-   * if true, type="button" (needed when several buttons coexist under the same form)
-   */
-  isButton: PropTypes.bool,
-
-  /**
-   * Target to be added on the HTML link
-   */
-  target: PropTypes.string
-} : {};
-ActionButton.defaultProps = {
-  // eslint-disable-next-line react/prop-types
-  linkFactory: function linkFactory(_temp) {
-    var _ref2 = _temp === void 0 ? {} : _temp,
-        children = _ref2.children,
-        rest = _objectWithoutPropertiesLoose(_ref2, ["children"]);
-
-    return /*#__PURE__*/_jsx("a", _extends({}, rest, {
-      children: children
-    }));
-  }
-};
-export default ActionButton;
+AtomActionButton.displayName = 'AtomActionButton';
+export default AtomActionButton;

lib/index.js

@@ -1,199 +0,3 @@
-import { jsxs as _jsxs } from "react/jsx-runtime";
-import { jsx as _jsx } from "react/jsx-runtime";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import _extends from "@babel/runtime/helpers/esm/extends";
-import PropTypes from 'prop-types';
-import cx from 'classnames';
-import AtomIcon, { ATOM_ICON_COLORS, ATOM_ICON_SIZES } from '@s-ui/react-atom-icon';
-import ActionButton from './ActionButton';
-/**
- * Base class for the component
- */
-
-var BASE_CLASS = 'sui-AtomActionButton';
-/**
- * Available colors for the Action Button
- */
-
-var COLORS = {
-  PRIMARY: 'primary',
-  ACCENT: 'accent',
-  NEUTRAL: 'neutral'
-};
-/**
- * Available modifiers for the Action Button
- */
-
-var MODIFIERS = {
-  ACTIVE_FOCUSED: 'active',
-  DISABLED: 'disabled',
-  LINK: 'link'
-};
-/**
- * Available sizes for the Action Button
- */
-
-var SIZES = {
-  SMALL: 'small',
-  MEDIUM: 'medium',
-  LARGE: 'large'
-};
-/**
- * Available styles for the Action Button
- */
-
-var STYLES = {
-  FILLED_NEGATIVE: 'filledNegative',
-  FILLED_POSITIVE: 'filledPositive',
-  OUTLINE: 'outline',
-  FLAT: 'flat'
-};
-
-var createClasses = function createClasses(array, sufix) {
-  if (sufix === void 0) {
-    sufix = '';
-  }
-
-  return array.reduce(function (res, key) {
-    var _extends2;
-
-    return _extends({}, res, (_extends2 = {}, _extends2[key] = BASE_CLASS + "--" + key + sufix, _extends2));
-  }, {});
-};
-
-var CLASSES = createClasses([].concat(Object.values(SIZES), Object.values(STYLES), Object.values(MODIFIERS)));
-var COLOR_CLASSES = createClasses([].concat(Object.values(COLORS)), 'Color');
-
-var AtomActionButton = function AtomActionButton(props) {
-  var children = props.children,
-      className = props.className,
-      _props$color = props.color,
-      color = _props$color === void 0 ? COLORS.PRIMARY : _props$color,
-      disabled = props.disabled,
-      focused = props.focused,
-      href = props.href,
-      icon = props.icon,
-      isButton = props.isButton,
-      isSubmit = props.isSubmit,
-      link = props.link,
-      linkFactory = props.linkFactory,
-      _props$size = props.size,
-      size = _props$size === void 0 ? SIZES.MEDIUM : _props$size,
-      _props$style = props.style,
-      style = _props$style === void 0 ? STYLES.FILLED_NEGATIVE : _props$style,
-      target = props.target,
-      title = props.title,
-      restProps = _objectWithoutPropertiesLoose(props, ["children", "className", "color", "disabled", "focused", "href", "icon", "isButton", "isSubmit", "link", "linkFactory", "size", "style", "target", "title"]);
-
-  var classNames = cx(BASE_CLASS, COLOR_CLASSES[color], CLASSES[style], CLASSES[size], focused && CLASSES[MODIFIERS.ACTIVE_FOCUSED], disabled && CLASSES[MODIFIERS.DISABLED], link && CLASSES[MODIFIERS.LINK], className);
-
-  var buttonProps = _extends({
-    href: href,
-    isButton: isButton,
-    isSubmit: isSubmit,
-    link: link,
-    linkFactory: linkFactory,
-    target: target,
-    title: title
-  }, restProps);
-
-  return /*#__PURE__*/_jsxs(ActionButton, _extends({}, buttonProps, {
-    className: classNames,
-    children: [/*#__PURE__*/_jsx("div", {
-      className: BASE_CLASS + "-icon",
-      children: /*#__PURE__*/_jsx(AtomIcon, {
-        size: ATOM_ICON_SIZES.medium,
-        color: ATOM_ICON_COLORS.currentColor,
-        children: icon
-      })
-    }), /*#__PURE__*/_jsx("div", {
-      className: BASE_CLASS + "-text",
-      children: children
-    })]
-  }));
-};
-
-AtomActionButton.displayName = 'AtomActionButton';
-AtomActionButton.propTypes = process.env.NODE_ENV !== "production" ? {
-  /**
-   * Content to be included in the button
-   */
-  children: PropTypes.node,
-
-  /**
-   * Classes to add to button
-   */
-  className: PropTypes.any,
-
-  /**
-   * Color of button:
-   * 'primary' (default),
-   * 'accent',
-   * 'neutral'
-   */
-  color: PropTypes.oneOf(Object.values(COLORS)),
-
-  /**
-   * Disabled: faded with no interaction.
-   */
-  disabled: PropTypes.bool,
-
-  /**
-   * Modifier: state of :active, :focus
-   */
-  focused: PropTypes.bool,
-
-  /**
-   * URL to be added on the HTML link
-   */
-  href: PropTypes.string,
-
-  /**
-   * Icon to be displayed (required)
-   */
-  icon: PropTypes.node.isRequired,
-
-  /**
-   * HTML element: if true, render a link. Otherwise render a button
-   */
-  link: PropTypes.bool,
-
-  /**
-   * Size of the icon
-   * {SMALL: 'small',
-   * MEDIUM: 'medium',
-   * LARGE: 'large'}
-   */
-  size: PropTypes.oneOf(Object.values(SIZES)),
-
-  /**
-   * Style of the button: 'filledNegative' (default), 'filledPositive', 'outline', 'flat'
-   */
-  style: PropTypes.oneOf(Object.values(STYLES)),
-
-  /**
-   * Target to be added on the HTML link
-   */
-  target: PropTypes.string,
-
-  /**
-   * Title to be added on button or link
-   */
-  title: PropTypes.string,
-
-  /**
-   * Factory used to create navigation link
-   */
-  linkFactory: PropTypes.func,
-
-  /**
-   * if true, type="submit" (needed when several action buttons coexist under the same form)
-   */
-  isSubmit: PropTypes.bool,
-
-  /**
-   * if true, type="button" (needed when several action buttons coexist under the same form)
-   */
-  isButton: PropTypes.bool
-} : {};
+import { COLORS, SIZES, STYLES } from './config';
+import AtomActionButton from './ActionButton';
 export default AtomActionButton;
@@ -200,0 +4,0 @@ export { COLORS as atomActionButtonColors };

package.json

 {
   "name": "@s-ui/react-atom-action-button",
-  "version": "1.5.0",
+  "version": "1.6.0",
   "description": "",
   "main": "lib/index.js",
   "scripts": {
-    "prepare": "npx rimraf ./lib && npm run build:js && npm run build:styles",
-    "build:js": "../../../node_modules/.bin/babel --presets sui ./src --out-dir ./lib",
-    "build:styles": "../../../node_modules/.bin/cpx './src/**/*.scss' ./lib"
+    "prepare": "npm run build:js && npm run build:styles",
+    "build:js": "babel --presets sui ./src --out-dir ./lib",
+    "build:styles": "cpx './src/**/*.scss' ./lib"
   },
@@ -11,0 +11,0 @@ "dependencies": {

README.md

@@ -19,3 +19,3 @@ # AtomActionButton
 ```js
-import ActionButton from '@s-ui/react-action-atom-button'
+import AtomActionButton from '@s-ui/react-atom-action-button'
 
@@ -29,5 +29,5 @@ const Icon = () => {
 return (<div>
-  <ActionButton icon={Icon}>Normal</ActionButton>
-  <ActionButton icon={Icon} focused>Focused</ActionButton>
-  <ActionButton icon={Icon} size='large' disabled>Disabled, Large</ActionButton>
+  <AtomActionButton icon={Icon}>Normal</AtomActionButton>
+  <AtomActionButton icon={Icon} focused>Focused</AtomActionButton>
+  <AtomActionButton icon={Icon} size='large' disabled>Disabled, Large</AtomActionButton>
 </div>)
@@ -34,0 +34,0 @@

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

SPDX disjunction

License

SPDX disjunction for an artifact's license information

Found 1 instance in 1 package

Mixed license

License

(Experimental) Package contains multiple licenses.

Found 1 instance in 1 package

Fixed alerts

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

SPDX disjunction

License

SPDX disjunction for an artifact's license information

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

34298

increased by93.78%

Number of package files

13

increased by85.71%

Lines of code

654

increased by168.03%

Number of low supply chain risk alerts

1

decreased by-66.67%

Worsened metrics

Number of low license alerts

2

increased by100%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes