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

package/lib/components/container_inner.js

@@ -1,93 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _class_names = _interopRequireDefault(require("../utils/class_names"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var propTypes = {
-  _modifierClass: _propTypes.default.string,
-  'aria-label': _propTypes.default.string,
-  'aria-labelledby': _propTypes.default.string,
-  'aria-describedby': _propTypes.default.string,
-  children: _propTypes.default.node.isRequired,
-  id: _propTypes.default.string
-};
-
-function ContainerInner(_ref) {
-  var _modifierClass = _ref._modifierClass,
-      ariaLabel = _ref['aria-label'],
-      ariaLabelledby = _ref['aria-labelledby'],
-      ariaDescribedby = _ref['aria-describedby'],
-      children = _ref.children,
-      id = _ref.id;
-  var className = (0, _class_names.default)('Container--Inner', _modifierClass);
-  return _react.default.createElement("div", {
-    "aria-label": ariaLabel,
-    "aria-labelledby": ariaLabelledby,
-    "aria-describedby": ariaDescribedby,
-    className: className,
-    id: id
-  }, children);
-}
-
-ContainerInner.propTypes = propTypes;
-ContainerInner.__docgenInfo = {
-  "description": "",
-  "methods": [],
-  "displayName": "ContainerInner",
-  "props": {
-    "_modifierClass": {
-      "type": {
-        "name": "string"
-      },
-      "required": false,
-      "description": ""
-    },
-    "aria-label": {
-      "type": {
-        "name": "string"
-      },
-      "required": false,
-      "description": ""
-    },
-    "aria-labelledby": {
-      "type": {
-        "name": "string"
-      },
-      "required": false,
-      "description": ""
-    },
-    "aria-describedby": {
-      "type": {
-        "name": "string"
-      },
-      "required": false,
-      "description": ""
-    },
-    "children": {
-      "type": {
-        "name": "node"
-      },
-      "required": true,
-      "description": ""
-    },
-    "id": {
-      "type": {
-        "name": "string"
-      },
-      "required": false,
-      "description": ""
-    }
-  }
-};
-var _default = ContainerInner;
-exports.default = _default;

package/lib/components/controls.js

@@ -1,106 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _class_names = _interopRequireDefault(require("../utils/class_names"));
-
-var _refs = require("../utils/refs");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var propTypes = {
-  _modifierClass: _propTypes.default.string,
-  'aria-label': _propTypes.default.string,
-  'aria-labelledby': _propTypes.default.string,
-  'aria-describedby': _propTypes.default.string,
-  children: _propTypes.default.node.isRequired,
-  getRef: _refs.getRefPropType,
-  id: _propTypes.default.string
-};
-
-function Controls(_ref) {
-  var _modifierClass = _ref._modifierClass,
-      ariaLabel = _ref['aria-label'],
-      ariaLabelledby = _ref['aria-labelledby'],
-      ariaDescribedby = _ref['aria-describedby'],
-      children = _ref.children,
-      getRef = _ref.getRef,
-      id = _ref.id;
-  var className = (0, _class_names.default)('control-buttons', _modifierClass);
-  return _react.default.createElement("div", {
-    "aria-label": ariaLabel,
-    "aria-labelledby": ariaLabelledby,
-    "aria-describedby": ariaDescribedby,
-    className: className,
-    id: id,
-    ref: getRef
-  }, children);
-}
-
-Controls.propTypes = propTypes;
-Controls.__docgenInfo = {
-  "description": "",
-  "methods": [],
-  "displayName": "Controls",
-  "props": {
-    "_modifierClass": {
-      "type": {
-        "name": "string"
-      },
-      "required": false,
-      "description": ""
-    },
-    "aria-label": {
-      "type": {
-        "name": "string"
-      },
-      "required": false,
-      "description": ""
-    },
-    "aria-labelledby": {
-      "type": {
-        "name": "string"
-      },
-      "required": false,
-      "description": ""
-    },
-    "aria-describedby": {
-      "type": {
-        "name": "string"
-      },
-      "required": false,
-      "description": ""
-    },
-    "children": {
-      "type": {
-        "name": "node"
-      },
-      "required": true,
-      "description": ""
-    },
-    "getRef": {
-      "type": {
-        "name": "custom",
-        "raw": "getRefPropType"
-      },
-      "required": false,
-      "description": ""
-    },
-    "id": {
-      "type": {
-        "name": "string"
-      },
-      "required": false,
-      "description": ""
-    }
-  }
-};
-var _default = Controls;
-exports.default = _default;

package/styles/_mixins.scss

@@ -1,134 +0,0 @@
-@import 'variables';
-
-// == BORDERS == //
-
-@mixin border($border-width: 1px, $border-color: var(--color--gray-4)) {
-  border: $border-width solid $border-color;
-}
-
-@mixin border-b($border-width: 1px, $border-color: var(--color--gray-4)) {
-  border-bottom: $border-width solid $border-color;
-}
-
-@mixin border-l($border-width: 1px, $border-color: var(--color--gray-4)) {
-  border-left: $border-width solid $border-color;
-}
-
-@mixin border-r($border-width: 1px, $border-color: var(--color--gray-4)) {
-  border-right: $border-width solid $border-color;
-}
-
-@mixin border-t($border-width: 1px, $border-color: var(--color--gray-4)) {
-  border-top: $border-width solid $border-color;
-}
-
-// == BORDER RADII == //
-
-@mixin rounded($radius: var(--radius--med)) {
-  border-radius: $radius;
-}
-
-@mixin rounded-bottom($radius: var(--radius--med)) {
-  border-radius: 0 0 $radius $radius;
-}
-
-@mixin rounded-left($radius: var(--radius--med)) {
-  border-radius: $radius 0 0 $radius;
-}
-
-@mixin rounded-right($radius: var(--radius--med)) {
-  border-radius: 0 $radius $radius 0;
-}
-
-@mixin rounded-top($radius: var(--radius--med)) {
-  border-radius: $radius $radius 0 0;
-}
-
-// == COLLAPSIBLE == //
-
-@mixin collapsible($max-height: 100em) {
-  max-height: $max-height;
-  opacity: 1;
-  overflow: hidden;
-  transition-duration: $timing--fade;
-  transition-property: max-height, opacity;
-}
-
-@mixin collapsible-collapsed {
-  max-height: 0;
-  opacity: 0;
-}
-
-// == COLORS == //
-
-@mixin link-part-color($partNumber) {
-  background-color: nth($part-colors, $partNumber + 1);
-}
-
-// == CONTAINER == //
-
-@mixin container($max: auto) {
-  background-color: $color--invert;
-  border-radius: $radius--med;
-  box-shadow: $shadow--s;
-  max-width: $max;
-  padding: $space--base 0;
-}
-
-@mixin container-hidden {
-  opacity: 0;
-  position: absolute;
-  top: 0;
-  visibility: hidden;
-  width: 100%;
-}
-
-// == GRID == //
-
-@mixin gutter($gutter-size: $space--m) {
-  .row {
-    @media (min-width: 30em) {
-      margin-left: -$gutter-size;
-      margin-right: -$gutter-size;
-    }
-
-    [class^="column"] {
-      @media (min-width: 30em) {
-        padding-left: $gutter-size;
-        padding-right: $gutter-size;
-      }
-    }
-  }
-}
-
-@mixin vert {
-  vertical-align: middle;
-}
-
-// == LINKS == //
-
-@mixin a--color ($color: $color--dscout) {
-  border-bottom-color: rgba($color, .3);
-  color: $color;
-
-  &:hover {
-    border-bottom-color: rgba(mix(black, $color, 20%), .6);
-    color: mix(black, $color, 20%);
-  }
-}
-
-@mixin a--no-style {
-  border-bottom: none;
-
-  &:hover {
-    border-bottom: none;
-  }
-}
-
-// == VERTICAL ALIGN == //
-
-@mixin vertical-align($position: relative) {
-  position: $position;
-  top: 50%;
-  transform: translateY(-50%);
-}

package/styles/_tables.scss

@@ -1,138 +0,0 @@
-@import 'variables';
-
-/*
-@styleguide
-@title Tables
-
-Tables are implicitly styled.
-
-<table>
-  <thead>
-    <tr>
-      <th>Heading 1</th>
-      <th>Heading 2</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td>Row 1, Cell 1</td>
-      <td>Row 1, Cell 2</td>
-    </tr>
-    <tr>
-      <td>Row 1, Cell 1</td>
-      <td>Row 1, Cell 2</td>
-    </tr>
-  </tbody>
-</table>
-
-    <table>
-      <thead>
-        <tr>
-          <th>Heading 1</th>
-          <th>Heading 2</th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr>
-          <td>Row 1, Cell 1</td>
-          <td>Row 1, Cell 2</td>
-        </tr>
-        <tr>
-          <td>Row 1, Cell 1</td>
-          <td>Row 1, Cell 2</td>
-        </tr>
-      </tbody>
-    </table>
-
-A table row can be marked as "selected":
-
-<table>
-  <thead>
-    <tr>
-      <th>Heading 1</th>
-      <th>Heading 2</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td>Row 1, Cell 1</td>
-      <td>Row 1, Cell 2</td>
-    </tr>
-    <tr class="selected">
-      <td>Row 1, Cell 1</td>
-      <td>Row 1, Cell 2</td>
-    </tr>
-  </tbody>
-</table>
-
-    <table>
-      <thead>
-        <tr>
-          <th>Heading 1</th>
-          <th>Heading 2</th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr>
-          <td>Row 1, Cell 1</td>
-          <td>Row 1, Cell 2</td>
-        </tr>
-        <tr class="selected">
-          <td>Row 1, Cell 1</td>
-          <td>Row 1, Cell 2</td>
-        </tr>
-      </tbody>
-    </table>
-*/
-
-table {
-  border-collapse: collapse;
-  border-color: $color--faint;
-  border-spacing: $space--s;
-}
-
-td, th {
-  font-weight: normal;
-  padding: $space--s;
-  text-align: left;
-
-  &:first-child {
-    padding-left: $space--base;
-  }
-
-  &:last-child {
-    padding-right: $space--base;
-  }
-}
-
-tr {
-  @include border-b;
-  border-color: $color--faint;
-  transition: background $timing--hover;
-
-  &:last-child {
-    border-bottom: none;
-  }
-
-  &:hover {
-    background-color: rgba($color--main, .03);
-  }
-}
-
-thead > tr {
-  background-color: transparent !important;
-  border-color: $color--faint;
-
-  &:last-child {
-    @include border-b;
-    border-color: $color--faint;
-  }
-}
-
-caption {
-  padding: $space--s $space--base;
-}
-
-tr.selected {
-  background-color: $color--faint;
-}