@flodesk/grain 5.1.2 → 5.3.1

package/es/components/button.js

@@ -3,7 +3,7 @@ import "core-js/modules/es.object.freeze.js";
 import "core-js/modules/es.object.define-properties.js";
 import "core-js/modules/es.array.index-of.js";
 import "core-js/modules/es.symbol.js";
-var _excluded = ["children", "variant", "isDisabled", "icon", "hasFullWidth"];
+var _excluded = ["children", "variant", "isDisabled", "icon", "hasFullWidth", "hasSpinner"];
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
@@ -23,6 +23,7 @@ import styled from '@emotion/styled';
 import PropTypes from 'prop-types';
 import { css } from '@emotion/react';
 import { transitions } from '../foundational';
+import { Spinner } from './spinner';
 var variables = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  --grn-paddingX-m: 16px;\n  --grn-borderColor: var(--grn-color-fade4);\n  --grn-borderColor-hover: var(--grn-color-fade6);\n  --grn-borderColor-active: var(--grn-color-grey8);\n"])));
 var variants = {
   neutral: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    color: inherit;\n    background-color: transparent;\n    border-color: var(--grn-borderColor);\n\n    &:hover {\n      border-color: var(--grn-borderColor-hover);\n    }\n    &:active {\n      border-color: var(--grn-borderColor-active);\n    }\n  "]))),
@@ -40,14 +41,18 @@ export var Button = function Button(_ref) {
       isDisabled = _ref.isDisabled,
       icon = _ref.icon,
       hasFullWidth = _ref.hasFullWidth,
+      hasSpinner = _ref.hasSpinner,
       props = _objectWithoutProperties(_ref, _excluded);
 
   return /*#__PURE__*/React.createElement(Wrapper, Object.assign({
     variant: variant,
     disabled: isDisabled,
     icon: icon,
-    hasFullWidth: hasFullWidth
-  }, props), icon && /*#__PURE__*/React.createElement(Icon, {
+    hasFullWidth: hasFullWidth,
+    hasSpinner: hasSpinner
+  }, props), hasSpinner && /*#__PURE__*/React.createElement(Spinner, {
+    color: "currentColor"
+  }), icon && /*#__PURE__*/React.createElement(Icon, {
     icon: icon,
     color: "currentColor"
   }), children);
@@ -58,5 +63,6 @@ Button.propTypes = {
   variant: PropTypes.oneOf(Object.keys(variants)),
   onClick: PropTypes.func,
   isDisabled: PropTypes.bool,
-  hasFullWidth: PropTypes.bool
+  hasFullWidth: PropTypes.bool,
+  hasSpinner: PropTypes.bool
 };

package/es/components/index.js

@@ -5,8 +5,10 @@ export { TextInput } from './text-input';
 export { Arrange } from './arrange';
 export { Icon } from './icon';
 export { IconButton } from './icon-button';
+export { Tab, TabGroup } from './tab';
 export { TextButton } from './text-button';
 export { IconToggleGroup, IconToggle } from './icon-toggle';
 export { TextToggleGroup, TextToggle } from './text-toggle';
 export { Stack } from './stack';
-export { Slider } from './slider';
+export { Slider } from './slider';
+export { Spinner } from './spinner';

package/es/components/spinner.js

@@ -0,0 +1,51 @@
+import "core-js/modules/es.array.slice.js";
+import "core-js/modules/es.object.freeze.js";
+import "core-js/modules/es.object.define-properties.js";
+import "core-js/modules/es.object.keys.js";
+import "core-js/modules/es.array.index-of.js";
+import "core-js/modules/es.symbol.js";
+var _excluded = ["size", "color"];
+
+var _templateObject, _templateObject2, _templateObject3;
+
+import "core-js/modules/es.object.assign.js";
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+import { getColor, getDimension } from '../utilities';
+import React from 'react';
+import styled from '@emotion/styled';
+import PropTypes from 'prop-types';
+import { css, keyframes } from '@emotion/react';
+import { types } from '../types';
+var spin = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  to {\n    transform: rotate(360deg);\n  }\n"])));
+var circleStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  content: '';\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n"])));
+var Wrapper = styled.span(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  --stroke: 2px;\n\n  height: ", ";\n  width: ", ";\n  display: block;\n  position: relative;\n\n  &:before {\n    ", ";\n    border: var(--stroke) solid ", ";\n    border-radius: 100%;\n    opacity: 0.2;\n  }\n\n  &:after {\n    ", ";\n    border: var(--stroke) solid transparent;\n    border-left-color: ", ";\n    border-radius: 100%;\n    animation: ", " 1s linear infinite;\n  }\n"])), function (props) {
+  return getDimension(props.size);
+}, function (props) {
+  return getDimension(props.size);
+}, circleStyles, function (props) {
+  return getColor(props.color);
+}, circleStyles, function (props) {
+  return getColor(props.color);
+}, spin);
+export var Spinner = function Spinner(_ref) {
+  var _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 3 : _ref$size,
+      _ref$color = _ref.color,
+      color = _ref$color === void 0 ? 'body' : _ref$color,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/React.createElement(Wrapper, Object.assign({
+    color: color,
+    size: size
+  }, props));
+};
+Spinner.propTypes = {
+  size: PropTypes.number,
+  color: types.color
+};

package/es/components/tab.js

@@ -0,0 +1,60 @@
+import "core-js/modules/es.array.slice.js";
+import "core-js/modules/es.object.freeze.js";
+import "core-js/modules/es.object.define-properties.js";
+import "core-js/modules/es.object.keys.js";
+import "core-js/modules/es.array.index-of.js";
+import "core-js/modules/es.symbol.js";
+var _excluded = ["children", "isActive", "onClick"],
+    _excluded2 = ["children", "height"];
+
+var _templateObject, _templateObject2;
+
+import "core-js/modules/es.object.assign.js";
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+import { getWeight, getTransition, getDimension } from '../utilities';
+import React from 'react';
+import styled from '@emotion/styled';
+import PropTypes from 'prop-types';
+import { types } from '../types';
+var Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  gap: var(--grn-space-l);\n  width: fit-content;\n  align-items: stretch;\n  height: ", ";\n"])), function (p) {
+  return getDimension(p.height);
+});
+var TabWrapper = styled.button(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  appearance: none;\n  border: none;\n  padding: 0;\n  font-family: inherit;\n  font-size: inherit;\n  font-weight: ", ";\n  cursor: pointer;\n  height: 100%;\n  background-color: transparent;\n  color: var(--grn-color-bodyDimmed);\n  border-radius: 0;\n  white-space: nowrap;\n  transition: color ", ", box-shadow ", ";\n\n  &:hover {\n    color: var(--grn-color-body);\n  }\n\n  ", ";\n"])), getWeight('medium'), getTransition('fast'), getTransition('xFast'), function (p) {
+  return p.isActive && "\n    box-shadow: inset 0 -2px 0 var(--grn-color-grey6);\n    color: var(--grn-color-body);\n  ";
+});
+export var Tab = function Tab(_ref) {
+  var children = _ref.children,
+      isActive = _ref.isActive,
+      onClick = _ref.onClick,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/React.createElement(TabWrapper, Object.assign({
+    isActive: isActive,
+    onClick: onClick
+  }, props), children);
+};
+export var TabGroup = function TabGroup(_ref2) {
+  var children = _ref2.children,
+      _ref2$height = _ref2.height,
+      height = _ref2$height === void 0 ? 6 : _ref2$height,
+      props = _objectWithoutProperties(_ref2, _excluded2);
+
+  return /*#__PURE__*/React.createElement(Wrapper, Object.assign({
+    height: height
+  }, props), children);
+};
+TabGroup.propTypes = {
+  children: PropTypes.node,
+  height: types.dimension
+};
+Tab.propTypes = {
+  children: PropTypes.node,
+  isActive: PropTypes.bool,
+  onClick: PropTypes.func
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flodesk/grain",
-  "version": "5.1.2",
+  "version": "5.3.1",
   "description": "Flodesk design system",
   "module": "es/index.js",
   "author": "Flodesk",