seed-button - npm Package Compare versions

Comparing version 0.2.2 to 0.3.0

index.js

@@ -6,6 +6,6 @@ var path = require('path');
   require('seed-border'),
+  require('seed-color-scheme'),
   require('seed-control'),
   require('seed-dash'),
   require('seed-publish'),
-  require('seed-states'),
   path.join(__dirname, 'scss')
@@ -12,0 +12,0 @@ );

package.json

 {
   "name": "seed-button",
-  "version": "0.2.2",
+  "version": "0.3.0",
   "description": "Button component pack for Seed",
@@ -46,8 +46,5 @@ "main": "index.js",
   "devDependencies": {
-    "jquery": "3.2.1",
     "mkdirp": "^0.5.1",
-    "node-qunit-phantomjs": "1.5.0",
     "node-sass": "^4.5.3",
     "nodemon": "1.11.0",
-    "qunitjs": "2.2.1",
     "seed-bistro": "0.1.9"
@@ -58,7 +55,7 @@ },
     "seed-border": "0.0.10",
+    "seed-color-scheme": "0.3.0",
     "seed-control": "0.1.0",
     "seed-dash": "0.0.2",
-    "seed-publish": "0.2.0",
-    "seed-states": "0.0.4"
+    "seed-publish": "0.2.0"
   }
 }

README.md

@@ -46,176 +46,10 @@ # seed-button [![Build Status](https://travis-ci.org/helpscout/seed-button.svg?branch=master)](https://travis-ci.org/helpscout/seed-button) [![npm version](https://badge.fury.io/js/seed-button.svg)](https://badge.fury.io/js/seed-button) [![dependencies Status](https://david-dm.org/helpscout/seed-button/status.svg)](https://david-dm.org/helpscout/seed-button)
 
-The following variables can be found in `_config.scss`
+This Pack's variables can be found in **[`_config.scss`](./scss/pack/seed-button/components/button/_config.scss)**.
 
-```scss
-// Button :: Config
+This Pack also has additional configs specifically for color, found in **[`/configs/_color.scss`](./scss/pack/seed-button/configs/_color.scss)**.
 
-// Dependencies
-@import "pack/seed-border/config";
-@import "pack/seed-control/config";
-@import "pack/seed-states/_index";
 
-// Namespace
-$seed-button-namespace: "c-button" !default;
-$seed-button-primary-namespace: "primary" !default;
-$seed-button-link-namespace: "link" !default;
-$seed-button-error-namespace: "is-#{$seed-states-error-namespace}" !default;
-$seed-button-success-namespace: "is-#{$seed-states-success-namespace}" !default;
-$seed-button-warning-namespace: "is-#{$seed-states-warning-namespace}" !default;
-$seed-button-selected-namespace: is-selected !default;
-
-// Animation
-$seed-button-transition: none !default;
-
-// Border
-$seed-button-border-radius: $seed-border-radius !default;
-$seed-button-border-size: $seed-border-size !default;
-$seed-button-border-style: $seed-border-style !default;
-
-// Font
-$seed-button-font-size: 1rem !default;
-$seed-button-font-weight: normal !default;
-
-// Height
-$seed-button-height: $seed-control-size-default !default;
-$seed-button-line-height: $seed-button-height - ceil($seed-button-border-size * 2) !default;
-
-// Padding
-$seed-button-padding: 0 1em !default;
-
-// Colors
-$seed-button-color: (
-  background: (
-    default: #fff,
-    hover: #f9f9f9,
-    active: #f4f4f4,
-    selected: #f1f1f1,
-  ),
-  border: (
-    default: #ddd,
-    hover: #ddd,
-    active: #ddd,
-    focus: #3197D6
-  ),
-  box-shadow: (
-    default: none,
-    active: 0 1px 2px rgba(black, 0.2) inset,
-    focus: none
-  ),
-  text: #2b2b2b,
-) !default;
-
-$seed-button-styles: (
-  #{$seed-button-primary-namespace}: (
-    _generate-states: false,
-    background: (
-      default: #3197D6,
-      hover: darken(#3197D6, 4),
-      active: darken(#3197D6, 8)
-    ),
-    border: (
-      default: #237AB3,
-      hover: #237AB3,
-      active: #237AB3,
-      focus: #237AB3
-    ),
-    box-shadow: (
-      focus: 0 0 0 1px rgba(white, 0.4) inset
-    ),
-    text: (
-      default: #fff,
-      hover: #fff,
-      active: #fff,
-      focus: #fff,
-    ),
-  ),
-
-  #{$seed-button-link-namespace}: (
-    _generate-states: true,
-    background: (
-      default: transparent,
-      hover: transparent,
-      active: transparent,
-      focus: transparent,
-    ),
-    border: (
-      default: transparent,
-      hover: transparent,
-      active: transparent,
-      focus: transparent,
-    ),
-    box-shadow: (
-      default: none,
-      hover: none,
-      active: none,
-      focus: none
-    ),
-    text: (
-      default: #3197D6,
-      hover: #3197D6
-    ),
-    text-decoration: (
-      default: none,
-      hover: underline,
-      focus: underline,
-    ),
-  ),
-) !default;
-
-
-$seed-button-color-states: (
-  #{$seed-button-error-namespace}: (
-    background: (
-      default: _state(error, border-color),
-      hover: darken(_state(error, border-color), 4),
-      active: darken(_state(error, border-color), 8)
-    ),
-    border: (
-      default: darken(_state(error, border-color), 8),
-      hover: darken(_state(error, border-color), 8),
-      active: darken(_state(error, border-color), 8)
-    ),
-    box-shadow: (
-      focus: 0 0 0 1px rgba(white, 0.4) inset
-    ),
-    text: #fff
-  ),
-  #{$seed-button-success-namespace}: (
-    background: (
-      default: _state(success, border-color),
-      hover: darken(_state(success, border-color), 4),
-      active: darken(_state(success, border-color), 8)
-    ),
-    border: (
-      default: darken(_state(success, border-color), 8),
-      hover: darken(_state(success, border-color), 8),
-      active: darken(_state(success, border-color), 8)
-    ),
-    box-shadow: (
-      focus: 0 0 0 1px rgba(white, 0.4) inset
-    ),
-    text: #fff
-  ),
-  #{$seed-button-warning-namespace}: (
-    background: (
-      default: _state(warning, border-color),
-      hover: darken(_state(warning, border-color), 4),
-      active: darken(_state(warning, border-color), 8)
-    ),
-    border: (
-      default: darken(_state(warning, border-color), 8),
-      hover: darken(_state(warning, border-color), 8),
-      active: darken(_state(warning, border-color), 8)
-    ),
-    box-shadow: (
-      focus: 0 0 0 1px rgba(white, 0.4) inset
-    ),
-    text: #fff
-  )
-) !default;
-```
-
-
 ## Tests
 
-`seed-button` has tests written with [seed-barista](https://github.com/helpscout/seed-barista) (powered by Mocha) and QUnit. QUnit tests the component in the browser (PhantomJS).
+`seed-button` has tests written with [seed-barista](https://github.com/helpscout/seed-barista) (powered by Mocha).
 
@@ -222,0 +56,0 @@ Run tests locally:

scripts/build.js

@@ -10,9 +10,3 @@ 'use strict';
 var file = pkg.name;
-var includePaths = pathfinder(
-  require('seed-border'),
-  require('seed-control'),
-  require('seed-dash'),
-  require('seed-publish'),
-  require('seed-states')
-);
+var includePaths = require('../index');
 
@@ -19,0 +13,0 @@ // Default .css compile

No alert changes

Improved metrics

Dev dependency count

4

-42.86%

Number of package files

32

3.23%

Worsened metrics

Total package byte prevSize

40631

-3.13%

Lines of code

393

-0.51%

Number of lines in readme file

60

-73.45%

Dependency changes

• + Added

  seed-color-scheme@0.3.0

• + Added

  seed-color-scheme@0.3.0
  (transitive)

• + Added

  seed-config@0.1.1
  (transitive)

• - Removed

  seed-states@0.0.4

• - Removed

  lodash@4.17.21
  (transitive)

• - Removed

  sass-pathfinder@0.0.3
  (transitive)

• - Removed

  seed-color-scheme@0.0.2
  (transitive)

• - Removed

  seed-color-scheme-helpscout@0.0.3
  (transitive)

• - Removed

  seed-states@0.0.4
  (transitive)