@dscout/particle 1.0.0-alpha.2 → 1.0.0-alpha.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dscout/particle",
-  "version": "1.0.0-alpha.2",
+  "version": "1.0.0-alpha.3",
   "description": "A pattern library for building dscout user interfaces",
   "main": "lib/index.js",
   "files": [
@@ -10,10 +10,8 @@
   "scripts": {
     "build": "script/build",
     "build-docs": "script/build-docs",
-    "build-styleguide": "script/build-styleguide",
     "ci": "script/ci",
     "clean": "script/clean",
-    "styleguide": "webpack-dev-server --config .styleguide/webpack.config.js --output-path .styleguide/dist --env development",
     "lint": "script/lint",
     "nano": "script/nano",
     "prebuild": "script/clean",
@@ -48,24 +46,26 @@
     "@babel/core": "^7.11.5",
     "@babel/preset-env": "^7.11.5",
     "@babel/preset-react": "^7.0.0",
-    "@storybook/addon-actions": "^6.2.9",
-    "@storybook/addon-controls": "6.2.9",
-    "@storybook/addon-docs": "6.2.9",
-    "@storybook/addon-links": "^6.2.9",
-    "@storybook/addon-toolbars": "6.2.9",
-    "@storybook/addon-viewport": "^6.2.9",
-    "@storybook/addons": "^6.2.9",
-    "@storybook/react": "^6.2.9",
-    "autoprefixer": "^7.1.4",
+    "@storybook/addon-actions": "6.3.13",
+    "@storybook/addon-controls": "6.3.13",
+    "@storybook/addon-docs": "6.3.13",
+    "@storybook/addon-links": "6.3.13",
+    "@storybook/addon-toolbars": "6.3.13",
+    "@storybook/addon-viewport": "6.3.13",
+    "@storybook/addons": "6.3.13",
+    "@storybook/builder-webpack5": "6.3.13",
+    "@storybook/manager-webpack5": "6.3.13",
+    "@storybook/react": "6.3.13",
+    "autoprefixer": "^10.4.4",
     "babel-eslint": "^9.0.0",
-    "babel-loader": "^8.0.5",
+    "babel-loader": "^8.2.3",
     "babel-plugin-transform-object-rest-spread": "^6.26.0",
     "chai": "^3.5.0",
     "chai-enzyme": "^1.0.0-beta.0",
     "cheerio": "^0.22.0",
     "core-js": "3",
-    "css-loader": "^2.1.1",
-    "cssnano": "^3.10.0",
+    "css-loader": "^6.7.1",
+    "cssnano": "^5.1.3",
     "enzyme": "3.3.0",
     "enzyme-adapter-react-16": "^1.12.1",
     "eslint": "^3.19.0",
@@ -76,33 +76,34 @@
     "eslint-plugin-jsx-a11y": "^4.0.0",
     "eslint-plugin-prettier": "^2.0.1",
     "eslint-plugin-react": "^6.10.3",
-    "file-loader": "^6.0.0",
+    "file-loader": "^6.2.0",
     "husky": "^1.3.1",
     "karma": "^1.5.0",
     "karma-chai-sinon": "^0.1.5",
     "karma-chrome-launcher": "^2.2.0",
     "karma-mocha": "^1.3.0",
-    "karma-webpack": "5.0.0-alpha.3.0",
+    "karma-webpack": "5.0.0",
     "lint-staged": "^8.0.1",
     "mini-css-extract-plugin": "^1.6.0",
     "mocha": "^3.2.0",
-    "node-sass": "^4.1.0",
-    "postcss-cli": "^3.0.0",
+    "postcss": "^8.4.8",
+    "postcss-cli": "^9.1.0",
     "postcss-discard-comments": "^2.0.4",
-    "postcss-loader": "^3.0.0",
-    "postcss-style-guide": "^0.13.0",
+    "postcss-loader": "^6.2.1",
     "prettier": "^1.3.1",
     "prop-types": "^15.7.2",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
-    "sass-loader": "^7.1.0",
+    "sass": "^1.49.9",
+    "sass-loader": "^12.2.0",
     "sinon": "4.1.3",
     "sinon-chai": "2.14.0",
-    "style-loader": "^0.23.1",
+    "stream-browserify": "^3.0.0",
+    "style-loader": "^3.3.1",
     "typescript": "^4.3.5",
-    "webpack": "^4.41.2",
-    "webpack-cli": "^3.3.10",
-    "webpack-dev-server": "^3.11.2"
+    "webpack": "^5.70.0",
+    "webpack-cli": "^4.9.2",
+    "webpack-dev-server": "^4.7.4"
   },
   "peerDependencies": {
     "prop-types": "^15.5.0",
@@ -122,7 +123,8 @@
       ]
     },
     "ignore": [
-      "docs/**"
+      "docs/**",
+      "documentation/**"
     ]
   }
 }

package/styles/_base.scss

@@ -1,6 +1,3 @@
-@import 'mixins';
-@import 'variables';
-
 html,
 body {
   height: 100%;
@@ -14,11 +11,11 @@ html {
 }
 
 body {
-  background-color: var(--Body__bg-color);
-  color: var(--Body__color);
-  font-family: var(--Body__font-family);
-  font-size: var(--Body__font-size);
-  line-height: var(--Body__line-height);
+  background-color: var(--base____bg-color);
+  color: var(--base____color);
+  font-family: var(--base____font-family);
+  font-size: var(--base____font-size);
+  line-height: var(--base____line-height);
   margin: 0;
   padding: 0;
   -webkit-font-smoothing: antialiased;

package/styles/_reset.scss

@@ -59,3 +59,8 @@ fieldset {
   border: none;
   padding: 0;
 }
+
+a {
+  color: inherit;
+  text-decoration: inherit;
+}

package/styles/components/_icons.scss

@@ -1,15 +1,12 @@
-@import '../mixins';
-
 @keyframes rotate {
   0% { transform: rotate(0deg); }
   100% { transform: rotate(360deg); }
 }
 
 .icon {
-  @include vert;
-
   height: 1.563rem;
   width: 1.563rem;
+  vertical-align: middle;
 
   &.icon--tight {
     width: auto;
@@ -21,36 +18,32 @@
 }
 
 .icon--2 {
-  @include vert;
-
   height: 3.125rem;
   width: 3.125rem;
+  vertical-align: middle;
 }
 
-.icon--3 {
-  @include vert;
-
+.icon--3 { 
   height: 4.688rem;
   width: 4.688rem;
+  vertical-align: middle;
 }
 
 .icon--4 {
-  @include vert;
-
   height: 6.25rem;
   width: 6.25rem;
+  vertical-align: middle;
 }
 
 .icon--export {
-  @include vert;
-
   height: 63px;
   width: 48px;
+  vertical-align: middle;
 }
 
 .count-icon {
   .count-icon--count {
-    font-size: $font-size--s;
+    font-size: var(--font-size--s);
   }
 
   .count-icon--icon {

package/styles/components/attribute_selector/_base.scss

@@ -34,8 +34,8 @@
 }
 
 .Attribute__Label {
-  @include border(var(--Attribute____border-width), var(--Attribute____border-color));
   background: none;
+  border: var(--Attribute____border-width) solid var(--Attribute____border-color);
   border-radius: var(--Attribute____border-radius);
   color: var(--Attribute____color);
   cursor: pointer;
@@ -46,7 +46,7 @@
   transition: border var(--timing--hover), color var(--timing--hover);
 
   &:hover {
-    @include border(var(--Attribute____border-width), var(--Attribute--hover____border-color));
+    border: var(--Attribute____border-width) solid var(--Attribute--hover____border-color);
     color: var(--Attribute--hover____color)
   }
 
@@ -57,4 +57,4 @@
     color: var(--Attribute--selected____color);
     cursor: default;
   }
-}
+}

package/styles/components/button_icon/_base.scss

@@ -0,0 +1,22 @@
+@import 'themes/bandit';
+@import 'themes/researcher';
+
+.Button-Icon {
+  align-items: center;
+  // This background color may look weird, but it's critical for supporting
+  // background transitions starting or ending with a transparent background.
+  background-color: var(--color--none);
+  border: none;
+  border-radius: var(--Button-Icon____radius);
+  cursor: pointer;
+  display: inline-flex;
+  font-size: inherit;
+  justify-content: center;
+  transition-property: background, color, height, width;
+  transition-duration: var(--Button-Icon____transition-duration);
+
+  &[disabled] {
+    cursor: default;
+    pointer-events: none;
+  }
+}

package/styles/components/button_icon/themes/_bandit.scss

@@ -0,0 +1,5 @@
+@import 'theme_builder';
+
+.theme--bandit {
+  @include generate-button-icon-theme-variables();
+}

package/styles/components/button_icon/themes/_researcher.scss

@@ -0,0 +1,5 @@
+@import 'theme_builder';
+
+.theme--researcher {
+  @include generate-button-icon-theme-variables();
+}

package/styles/components/button_icon/themes/_theme_builder.scss

@@ -0,0 +1,12 @@
+$default-variables: (
+  "Button-Icon____radius": var(--radius--circle),
+  "Button-Icon____transition-duration": var(--timing--hover)
+);
+
+@mixin generate-button-icon-theme-variables($theme-variables: ()) {
+  $variables: map-merge($default-variables, $theme-variables);
+
+  @each $name, $value in $variables {
+    --#{$name}: #{$value};
+  }
+}