@flodesk/grain 5.5.3 → 5.7.1

package/es/components/button.js

@@ -4,7 +4,7 @@ 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", "variant", "isDisabled", "icon", "hasFullWidth", "hasSpinner"];
+var _excluded = ["children", "variant", "isDisabled", "icon", "iconPosition", "hasFullWidth", "hasSpinner"];
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
@@ -31,11 +31,13 @@ var variants = {
   primary: accentCss,
   accent: accentCss
 };
-var Wrapper = styled.button(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  ", ";\n  ", ";\n  appearance: none;\n  border: none;\n  font-family: inherit;\n  font-size: inherit;\n  cursor: pointer;\n  border-width: 1px;\n  border-style: solid;\n  font-weight: ", ";\n  border-radius: ", ";\n  height: var(--grn-textBoxHeight-m);\n  padding: 0 var(--grn-paddingX-m);\n  background-color: transparent;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 12px;\n\n  ", ";\n  ", ";\n\n  &:disabled {\n    color: ", ";\n    background-color: ", ";\n    border-color: transparent;\n    cursor: default;\n  }\n"])), variables, transitions, getWeight('medium'), getRadius('s'), function (p) {
+var Wrapper = styled.button(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  ", ";\n  ", ";\n  appearance: none;\n  border: none;\n  font-family: inherit;\n  font-size: inherit;\n  cursor: pointer;\n  border-width: 1px;\n  border-style: solid;\n  font-weight: ", ";\n  border-radius: ", ";\n  height: var(--grn-textBoxHeight-m);\n  padding: 0 var(--grn-paddingX-m);\n  background-color: transparent;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 12px;\n\n  ", ";\n  ", ";\n\n  &:disabled {\n    color: ", ";\n    background-color: ", ";\n    border-color: transparent;\n    cursor: default;\n  }\n\n  .buttonIcon {\n    ", ";\n  }\n"])), variables, transitions, getWeight('medium'), getRadius('s'), function (p) {
   return !p.isDisabled && variants[p.variant];
 }, function (p) {
   return p.hasFullWidth && "width: 100%";
-}, getColor('contentDisabled'), getColor('backgroundDisabled'));
+}, getColor('contentDisabled'), getColor('backgroundDisabled'), function (p) {
+  return p.iconPosition === 'right' && "order: 1";
+});
 
 var checkDeprecatedVariant = function checkDeprecatedVariant(variant) {
   if (variant === 'primary') {
@@ -49,6 +51,8 @@ export var Button = function Button(_ref) {
       variant = _ref$variant === void 0 ? 'neutral' : _ref$variant,
       isDisabled = _ref.isDisabled,
       icon = _ref.icon,
+      _ref$iconPosition = _ref.iconPosition,
+      iconPosition = _ref$iconPosition === void 0 ? 'left' : _ref$iconPosition,
       hasFullWidth = _ref.hasFullWidth,
       hasSpinner = _ref.hasSpinner,
       props = _objectWithoutProperties(_ref, _excluded);
@@ -58,18 +62,21 @@ export var Button = function Button(_ref) {
     variant: variant,
     disabled: isDisabled,
     icon: icon,
+    iconPosition: iconPosition,
     hasFullWidth: hasFullWidth,
     hasSpinner: hasSpinner
   }, props), hasSpinner && /*#__PURE__*/React.createElement(Spinner, {
     color: "currentColor"
   }), icon && /*#__PURE__*/React.createElement(Icon, {
     icon: icon,
-    color: "currentColor"
+    color: "currentColor",
+    className: "buttonIcon"
   }), children);
 };
 Button.propTypes = {
   children: PropTypes.node,
   icon: PropTypes.node,
+  iconPosition: PropTypes.oneOf(['left', 'right']),
   variant: PropTypes.oneOf(['neutral', 'accent']),
   onClick: PropTypes.func,
   isDisabled: PropTypes.bool,

package/es/components/index.js

@@ -11,4 +11,5 @@ export { IconToggleGroup, IconToggle } from './icon-toggle';
 export { TextToggleGroup, TextToggle } from './text-toggle';
 export { Stack } from './stack';
 export { Slider } from './slider';
-export { Spinner } from './spinner';
+export { Spinner } from './spinner';
+export { Switch } from './switch';

package/es/components/switch.js

@@ -0,0 +1,63 @@
+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 = ["isDisabled", "isActive", "label", "id", "onChange"];
+
+var _templateObject, _templateObject2, _templateObject3;
+
+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, getTransition } from '../utilities';
+import React from 'react';
+import styled from '@emotion/styled';
+import PropTypes from 'prop-types';
+var knobSizePx = 16;
+var trackOffset = 2;
+var trackWidth = 40;
+var trackHeight = knobSizePx + trackOffset * 2;
+var trackInactiveColor = getColor('grey3');
+var trackActiveColor = getColor('content');
+var Input = styled.input(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  appearance: none;\n  height: ", "px;\n  width: ", "px;\n  background-color: ", ";\n  display: block;\n  border-radius: 1000px;\n  transition: ", ";\n  cursor: pointer;\n  margin: 0;\n\n  &:checked {\n    background-color: ", ";\n\n    & ~ .Knob {\n      transform: translateX(", "px);\n    }\n  }\n"])), trackHeight, trackWidth, function (p) {
+  return p.isDisabled ? getColor('backgroundDisabled') : trackInactiveColor;
+}, getTransition('xFast'), function (p) {
+  return p.disabled ? getColor('backgroundDisabled') : trackActiveColor;
+}, trackWidth - knobSizePx - trackOffset * 2);
+var Knob = styled.span(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: absolute;\n  left: ", "px;\n  top: ", "px;\n  height: ", "px;\n  width: ", "px;\n  border-radius: 100%;\n  background-color: ", ";\n  display: block;\n  transition: ", ";\n  pointer-events: none;\n"])), trackOffset, trackOffset, knobSizePx, knobSizePx, function (p) {
+  return p.isDisabled ? getColor('contentDisabled') : 'white';
+}, getTransition('xFast'));
+var Wrapper = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: grid;\n  grid-auto-flow: column;\n  align-items: center;\n  width: fit-content;\n  gap: 8px;\n  position: relative;\n"])));
+export var Switch = function Switch(_ref) {
+  var isDisabled = _ref.isDisabled,
+      isActive = _ref.isActive,
+      label = _ref.label,
+      id = _ref.id,
+      onChange = _ref.onChange,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/React.createElement(Wrapper, props, /*#__PURE__*/React.createElement(Input, {
+    type: "checkbox",
+    disabled: isDisabled,
+    id: id,
+    checked: isActive,
+    onChange: onChange
+  }), /*#__PURE__*/React.createElement(Knob, {
+    className: "Knob",
+    isDisabled: isDisabled
+  }), label && /*#__PURE__*/React.createElement("label", {
+    htmlFor: id
+  }, label));
+};
+Switch.propTypes = {
+  id: PropTypes.string.isRequired,
+  onChange: PropTypes.func,
+  isDisabled: PropTypes.bool,
+  isActive: PropTypes.bool,
+  label: PropTypes.string
+};

package/es/types.js

@@ -19,7 +19,7 @@ export var types = {
   textAlign: PropTypes.oneOf(['left', 'center', 'right']),
   overflow: PropTypes.oneOf(['visible', 'hidden', 'scroll', 'auto']),
   fieldSize: PropTypes.oneOf(['s', 'm']),
-  textTag: PropTypes.oneOf(['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'span']),
+  textTag: PropTypes.oneOf(['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'span', 'label']),
   responsiveColumns: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
   autoFlow: PropTypes.oneOf(autoFlows),
   gridItemsAlignment: PropTypes.oneOf(gridItemsAlignments),

package/package.json

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