@papillonbits/components 0.2.0 → 0.3.0

package/build/index.scss

@@ -0,0 +1 @@
+@import '~@papillonbits/css/build/primer/index.scss';

package/build/primer/Blankslate/Blankslate.js

@@ -0,0 +1,39 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Blankslate = Blankslate;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _Blankslate = require("./Blankslate.prop");
+
+var _Blankslate2 = _interopRequireDefault(require("./Blankslate.scss"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function Blankslate(_ref) {
+  var _cx;
+
+  var className = _ref.className,
+      heading = _ref.heading,
+      text = _ref.text,
+      variant = _ref.variant,
+      hasCleanBackground = _ref.hasCleanBackground;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: (0, _classnames["default"])(className, _Blankslate2["default"].blankslate, (_cx = {}, (0, _defineProperty2["default"])(_cx, _Blankslate2["default"]['blankslate-narrow'], variant === _Blankslate.blankslateVariant.narrow), (0, _defineProperty2["default"])(_cx, _Blankslate2["default"]['blankslate-capped'], variant === _Blankslate.blankslateVariant.capped === true), (0, _defineProperty2["default"])(_cx, _Blankslate2["default"]['blankslate-spacious'], variant === _Blankslate.blankslateVariant.spacious), (0, _defineProperty2["default"])(_cx, _Blankslate2["default"]['blankslate-large'], variant === _Blankslate.blankslateVariant.large), (0, _defineProperty2["default"])(_cx, _Blankslate2["default"]['blankslate-clean-background'], hasCleanBackground === true), _cx)),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("h3", {
+      children: heading
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+      children: text
+    })]
+  });
+}
+
+Blankslate.propTypes = _Blankslate.propTypes;
+Blankslate.defaultProps = _Blankslate.defaultProps;

package/build/primer/Blankslate/Blankslate.prop.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.propTypes = exports.defaultProps = exports.blankslateVariant = void 0;
+
+var _propTypes = require("prop-types");
+
+var blankslateVariant = {
+  "default": 'default',
+  narrow: 'narrow',
+  capped: 'capped',
+  spacious: 'spacious',
+  large: 'large'
+};
+exports.blankslateVariant = blankslateVariant;
+var propTypes = {
+  className: _propTypes.string,
+  heading: _propTypes.string.isRequired,
+  text: _propTypes.string.isRequired,
+  variant: (0, _propTypes.oneOf)(Object.keys(blankslateVariant)),
+  hasCleanBackground: _propTypes.bool
+};
+exports.propTypes = propTypes;
+var defaultProps = {
+  className: null,
+  variant: blankslateVariant["default"],
+  hasCleanBackground: false
+};
+exports.defaultProps = defaultProps;

package/build/primer/Blankslate/Blankslate.scss

@@ -0,0 +1,91 @@
+@import '../../index.scss';
+
+// stylelint-disable selector-max-type
+.blankslate {
+  position: relative;
+  padding: $spacer-5;
+  text-align: center;
+
+  p {
+    color: var(--color-fg-muted);
+  }
+
+  code {
+    // stylelint-disable-next-line primer/spacing
+    padding: 2px 5px 3px;
+    font-size: $h5-size;
+    background: var(--color-canvas-default);
+    border: $border-width $border-style var(--color-border-muted);
+    border-radius: $border-radius;
+  }
+
+  img {
+    width: 56px;
+    height: 56px;
+  }
+}
+
+.blankslate-icon {
+  margin-right: $spacer-1;
+  margin-bottom: $spacer-2;
+  margin-left: $spacer-1;
+  color: var(--color-fg-muted);
+}
+
+.blankslate-image {
+  margin-bottom: $spacer-3;
+}
+
+.blankslate-heading {
+  margin-bottom: $spacer-1;
+}
+
+.blankslate-action {
+  margin-top: $spacer-3;
+
+  &:first-of-type {
+    margin-top: $spacer-4;
+  }
+
+  &:last-of-type {
+    margin-bottom: $spacer-2;
+  }
+}
+
+.blankslate-capped {
+  border-radius: 0 0 $border-radius $border-radius;
+}
+
+.blankslate-spacious {
+  padding: ($spacer-6 * 2) $spacer-6;
+}
+
+.blankslate-narrow {
+  max-width: 485px;
+  margin: 0 auto;
+}
+
+// was .large-format
+// QUESTION: should we deprecate this?
+.blankslate-large {
+  img {
+    width: 80px;
+    height: 80px;
+  }
+
+  h3 {
+    margin: $spacer-3 0;
+    //font-size: $h3-size; // This doesn't actually make the text larger. Should this be $h2-size?
+    font-size: $h2-size;
+  }
+
+  p {
+    font-size: $h4-size;
+  }
+}
+
+// was .clean-background
+// TO DO: deprecate this and use utility instead
+.blankslate-clean-background {
+  border: 0;
+}

package/build/primer/Blankslate/index.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Blankslate", {
+  enumerable: true,
+  get: function get() {
+    return _Blankslate.Blankslate;
+  }
+});
+Object.defineProperty(exports, "blankslateVariant", {
+  enumerable: true,
+  get: function get() {
+    return _Blankslate2.blankslateVariant;
+  }
+});
+
+var _Blankslate = require("./Blankslate");
+
+var _Blankslate2 = require("./Blankslate.prop");

package/build/primer/index.js

@@ -5,11 +5,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.primer = void 0;
 
-var _Button = require("./Button");
+var _Blankslate = require("./Blankslate");
 
 var primer = {
-  Button: {
-    Button: _Button.Button
+  Blankslate: {
+    Blankslate: _Blankslate.Blankslate,
+    blankslateVariant: _Blankslate.blankslateVariant
   }
 };
 exports.primer = primer;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@papillonbits/components",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Papillon Bits Components",
   "homepage": "https://github.com/papillonbits/papillonbits/tree/master/packages/components",
   "repository": {
@@ -28,5 +28,8 @@
     "build-acceptance": "npm run build",
     "build-release": "npm run build"
   },
-  "gitHead": "f15c51ecd881bdccf888d995a5392857f0fc1516"
+  "dependencies": {
+    "@papillonbits/css": "^0.3.0"
+  },
+  "gitHead": "e21b90bddff729df1b0b2998089b915dfd9a98c5"
 }

package/build/primer/Button/Button.js

@@ -1,29 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Button = Button;
-
-var _classnames = _interopRequireDefault(require("classnames"));
-
-var _Button = require("./Button.prop");
-
-var _Button2 = _interopRequireDefault(require("./Button.scss"));
-
-var _jsxRuntime = require("react/jsx-runtime");
-
-function Button(_ref) {
-  var className = _ref.className,
-      text = _ref.text;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
-    className: (0, _classnames["default"])(className, _Button2["default"].btn),
-    type: "button",
-    children: text
-  });
-}
-
-Button.propTypes = _Button.propTypes;
-Button.defaultProps = _Button.defaultProps;

package/build/primer/Button/Button.prop.js

@@ -1,18 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.propTypes = exports.defaultProps = void 0;
-
-var _propTypes = require("prop-types");
-
-var propTypes = {
-  className: _propTypes.string,
-  text: _propTypes.string.isRequired
-};
-exports.propTypes = propTypes;
-var defaultProps = {
-  className: null
-};
-exports.defaultProps = defaultProps;

package/build/primer/Button/Button.scss

@@ -1,27 +0,0 @@
-@import './misc.scss';
-@import '../index.scss';
-
-.btn {
-  position: relative;
-  display: inline-block;
-  line-height: 20px;
-  white-space: nowrap;
-  vertical-align: middle;
-  cursor: pointer;
-  user-select: none;
-  appearance: none;
-
-  &:hover {
-    text-decoration: none;
-  }
-
-  &:disabled,
-  &.disabled,
-  &[aria-disabled='true'] {
-    cursor: default;
-
-    .octicon {
-      color: inherit;
-    }
-  }
-}

package/build/primer/Button/index.js

@@ -1,13 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "Button", {
-  enumerable: true,
-  get: function get() {
-    return _Button.Button;
-  }
-});
-
-var _Button = require("./Button");

package/build/primer/Button/misc.scss

@@ -1,24 +0,0 @@
-.btn-link {
-  display: inline-block;
-  padding: 0;
-  font-size: inherit;
-  text-decoration: none;
-  white-space: nowrap;
-  cursor: pointer;
-  user-select: none;
-  background-color: transparent;
-  border: 0;
-  appearance: none;
-
-  &:hover {
-    text-decoration: underline;
-  }
-
-  &:disabled,
-  &[aria-disabled='true'] {
-    &,
-    &:hover {
-      cursor: default;
-    }
-  }
-}