@cmsgov/design-system-core - npm Package Compare versions

Comparing version 3.4.1 to 3.4.2

dist/components/Button/Button.js

@@ -97,14 +97,11 @@ 'use strict';
       var disabledClass = this.props.disabled && 'ds-c-button--disabled';
+      var sizeClass = this.props.size && 'ds-c-button--' + this.props.size;
+      var inverseClass = this.props.inverse && 'ds-c-button--inverse';
 
-      if (this.props.inverse) {
-        if (disabledClass) {
-          disabledClass += '-inverse';
-        } else if (variationClass) {
-          variationClass += '-inverse';
-        } else {
-          variationClass = 'ds-c-button--inverse';
-        }
+      // primary/danger/success variations don't need the inverse class
+      if (this.props.variation === 'primary' || this.props.variation === 'danger' || this.props.variation === 'success') {
+        inverseClass = '';
       }
 
-      return (0, _classnames2.default)('ds-c-button', disabledClass, !disabledClass && variationClass, this.props.size && 'ds-c-button--' + this.props.size, this.props.className);
+      return (0, _classnames2.default)('ds-c-button', disabledClass, variationClass, inverseClass, sizeClass, this.props.className);
     }
@@ -111,0 +108,0 @@ }, {

package.json

 {
   "name": "@cmsgov/design-system-core",
-  "version": "3.4.1",
+  "version": "3.4.2",
   "publishConfig": {
@@ -12,3 +12,3 @@ "access": "public"
   "dependencies": {
-    "@cmsgov/design-system-support": "^3.4.1",
+    "@cmsgov/design-system-support": "^3.4.2",
     "classnames": "^2.2.5",
@@ -15,0 +15,0 @@ "core-js": "^2.5.3",

src/components/Badge/Badge.example.jsx

@@ -8,10 +8,6 @@ import React, { Fragment } from 'react';
     <Badge>Default badge</Badge>
-    <Badge variation="info">
-      Badge with <code>variation</code> prop
-    </Badge>
-    <Badge size="big">
-      Badge with <code>size</code> prop
-    </Badge>
+    <Badge variation="info">Badge with `variation` prop</Badge>
+    <Badge size="big">Badge with `size` prop</Badge>
   </Fragment>,
   document.getElementById('js-example')
 );

src/components/Button/Button.example.jsx

@@ -0,18 +1,19 @@
+import React, { Fragment } from 'react';
 import Button from './Button';
-import React from 'react';
 import ReactDOM from 'react-dom';
 
 ReactDOM.render(
-  <div>
-    <Button>Button</Button>
-
-    <Button
-      className="ds-u-margin-left--1"
-      href="javascript:void(0);"
-      variation="primary"
-    >
-      Anchor button
+  <Fragment>
+    <Button className="ds-u-margin-right--1">Button</Button>
+    <Button className="ds-u-margin-right--1" variation="primary">
+      Button with `variation` prop
     </Button>
-  </div>,
+    <Button className="ds-u-margin-right--1" disabled>
+      Button with `disabled` prop
+    </Button>
+    <Button className="ds-u-margin-right--1" href="javascript:void(0);">
+      Button with `href` prop
+    </Button>
+  </Fragment>,
   document.getElementById('js-example')
 );

src/components/Button/Button.jsx

@@ -60,13 +60,14 @@ import PropTypes from 'prop-types';
   classNames() {
-    let variationClass = this.props.variation && `ds-c-button--${this.props.variation}`;
-    let disabledClass = this.props.disabled && 'ds-c-button--disabled';
+    const variationClass = this.props.variation && `ds-c-button--${this.props.variation}`;
+    const disabledClass = this.props.disabled && 'ds-c-button--disabled';
+    const sizeClass = this.props.size && `ds-c-button--${this.props.size}`;
+    let inverseClass = this.props.inverse && 'ds-c-button--inverse';
 
-    if (this.props.inverse) {
-      if (disabledClass) {
-        disabledClass += '-inverse';
-      } else if (variationClass) {
-        variationClass += '-inverse';
-      } else {
-        variationClass = 'ds-c-button--inverse';
-      }
+    // primary/danger/success variations don't need the inverse class
+    if (
+      this.props.variation === 'primary' ||
+      this.props.variation === 'danger' ||
+      this.props.variation === 'success'
+    ) {
+      inverseClass = '';
     }
@@ -77,4 +78,5 @@
       disabledClass,
-      !disabledClass && variationClass,
-      this.props.size && `ds-c-button--${this.props.size}`,
+      variationClass,
+      inverseClass,
+      sizeClass,
       this.props.className
@@ -81,0 +83,0 @@ );

src/components/Button/Button.test.jsx

@@ -74,3 +74,3 @@ import Button from './Button.jsx';
 
-  it('appends additional class names', () => {
+  it('applies additional classes', () => {
     const props = { className: 'foobar' };
@@ -82,12 +82,11 @@ const wrapper = shallow(<Button {...props}>{buttonText}</Button>);
 
-  it('renders as a success button', () => {
-    const props = { variation: 'success' };
+  it('applies variation classes', () => {
+    const props = { variation: 'danger' };
     const wrapper = shallow(<Button {...props}>{buttonText}</Button>);
 
     expect(wrapper.hasClass('ds-c-button')).toBe(true);
-    expect(wrapper.hasClass('ds-c-button--success')).toBe(true);
-    expect(wrapper.hasClass('ds-c-button--primary')).toBe(false);
+    expect(wrapper.hasClass('ds-c-button--danger')).toBe(true);
   });
 
-  it('renders as a small button', () => {
+  it('applies size classes', () => {
     const props = { size: 'small' };
@@ -100,15 +99,13 @@ const wrapper = shallow(<Button {...props}>{buttonText}</Button>);
 
-  it('overrides variation class when disabled', () => {
-    const props = {
-      disabled: true,
-      variation: 'primary'
-    };
+  it('applies disabled class', () => {
+    const props = { disabled: true };
     const wrapper = shallow(<Button {...props}>{buttonText}</Button>);
 
+    expect(wrapper.hasClass('ds-c-button')).toBe(true);
     expect(wrapper.hasClass('ds-c-button--disabled')).toBe(true);
-    expect(wrapper.hasClass('ds-c-button--primary')).toBe(false);
   });
 
-  it('applies inverse suffix to variation class', () => {
+  it('applies disabled, inverse, and variation classes together', () => {
     const props = {
+      disabled: true,
       inverse: true,
@@ -119,26 +116,29 @@ variation: 'transparent'
 
-    expect(wrapper.hasClass('ds-c-button--transparent-inverse')).toBe(true);
-    expect(wrapper.hasClass('ds-c-button--transparent')).toBe(false);
+    expect(wrapper.hasClass('ds-c-button--transparent')).toBe(true);
+    expect(wrapper.hasClass('ds-c-button--inverse')).toBe(true);
+    expect(wrapper.hasClass('ds-c-button--disabled')).toBe(true);
     expect(wrapper.hasClass('ds-c-button')).toBe(true);
-    expect(wrapper.hasClass('ds-c-button--inverse')).toBe(false);
   });
 
-  it('applies inverse suffix to disabled class', () => {
+  it('doesnt apply inverse to primary/danger/success variations', () => {
     const props = {
       inverse: true,
-      disabled: true
+      variation: 'primary'
     };
     const wrapper = shallow(<Button {...props}>{buttonText}</Button>);
 
-    expect(wrapper.hasClass('ds-c-button--disabled-inverse')).toBe(true);
-    expect(wrapper.hasClass('ds-c-button')).toBe(true);
+    expect(wrapper.hasClass('ds-c-button--inverse')).toBe(false);
+    expect(wrapper.hasClass('ds-c-button--primary')).toBe(true);
   });
 
-  it('applies inverse suffix to default button class', () => {
-    const props = { inverse: true };
+  it('applies inverse to default/transparent variations', () => {
+    const props = {
+      inverse: true,
+      variation: 'transparent'
+    };
     const wrapper = shallow(<Button {...props}>{buttonText}</Button>);
 
     expect(wrapper.hasClass('ds-c-button--inverse')).toBe(true);
-    expect(wrapper.hasClass('ds-c-button')).toBe(true);
+    expect(wrapper.hasClass('ds-c-button--transparent')).toBe(true);
   });
 });

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

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

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

Number of package files

394

increased by4.51%

Worsened metrics

Total package byte prevSize

1699713

decreased by-1.7%

Lines of code

13792

decreased by-0.02%

Number of medium supply chain risk alerts

29

increased by3.57%

Dependency changes

• Updated@cmsgov/design-system-support@^3.4.2