@flodesk/grain 5.5.2 → 5.7.0

package/README.md

@@ -44,6 +44,6 @@ import { Text, Button, Input } from '@flodesk/grain';
 .dashboard-header {
   font-size: var(--grn-text-xl);
   margin-bottom: var(--grn-space-l);
-  color: var(--grn-color-contentDimmed);
+  color: var(--grn-color-content2);
 }
 ```

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/icon-toggle.js

@@ -26,7 +26,7 @@ import { css } from '@emotion/react';
 import { types } from '../types';
 var variables = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  --grn-borderColor-hover: var(--grn-color-fade4);\n  --grn-borderColor-active: var(--grn-color-grey8);\n  --grn-width: calc(var(--grn-textBoxHeight-m) + 2px);\n"])));
 var Wrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  border: 1px solid var(--grn-color-border);\n  border-radius: var(--grn-radius-s);\n  width: fit-content;\n"])));
-var ItemWrapper = styled.button(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  ", ";\n  appearance: none;\n  border: none;\n  border-left: 1px solid transparent;\n  padding: 0;\n  font-family: inherit;\n  font-size: inherit;\n  font-weight: ", ";\n  cursor: pointer;\n  min-width: var(--grn-width);\n  height: calc(var(--grn-textBoxHeight-m) - 2px);\n  background-color: transparent;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  color: var(--grn-color-contentDimmed);\n  transition: color ", ";\n\n  ", ";\n\n  & + .IconToggle {\n    border-color: var(--grn-color-border);\n  }\n\n  &:after {\n    content: '';\n    pointer-events: none;\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    transition: ", ";\n    ", ";\n  }\n\n  &:first-of-type {\n    min-width: calc(var(--grn-width) - 1px);\n  }\n\n  &:first-of-type:after {\n    width: calc(100% + 1px);\n    left: -1px;\n    border-radius: var(--grn-radius-s) 0 0 var(--grn-radius-s);\n  }\n\n  &:last-child:after {\n    border-radius: 0 var(--grn-radius-s) var(--grn-radius-s) 0;\n  }\n\n  &:hover {\n    color: var(--grn-color-content);\n  }\n"])), variables, getWeight('medium'), getTransition('fast'), function (p) {
+var ItemWrapper = styled.button(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  ", ";\n  appearance: none;\n  border: none;\n  border-left: 1px solid transparent;\n  padding: 0;\n  font-family: inherit;\n  font-size: inherit;\n  font-weight: ", ";\n  cursor: pointer;\n  min-width: var(--grn-width);\n  height: calc(var(--grn-textBoxHeight-m) - 2px);\n  background-color: transparent;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  color: var(--grn-color-content2);\n  transition: color ", ";\n\n  ", ";\n\n  & + .IconToggle {\n    border-color: var(--grn-color-border);\n  }\n\n  &:after {\n    content: '';\n    pointer-events: none;\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    transition: ", ";\n    ", ";\n  }\n\n  &:first-of-type {\n    min-width: calc(var(--grn-width) - 1px);\n  }\n\n  &:first-of-type:after {\n    width: calc(100% + 1px);\n    left: -1px;\n    border-radius: var(--grn-radius-s) 0 0 var(--grn-radius-s);\n  }\n\n  &:last-child:after {\n    border-radius: 0 var(--grn-radius-s) var(--grn-radius-s) 0;\n  }\n\n  &:hover {\n    color: var(--grn-color-content);\n  }\n"])), variables, getWeight('medium'), getTransition('fast'), function (p) {
   return p.isActive && "\n    color: var(--grn-color-content);\n  ";
 }, getTransition('xFast'), function (p) {
   return p.isActive && "box-shadow: 0 0 0 1px var(--grn-color-grey6)";

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,68 @@
+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, _templateObject4;
+
+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  position: absolute;\n  opacity: 0;\n\n  &:checked ~ .Track {\n    background-color: ", ";\n\n    .Knob {\n      transform: translateX(", "px);\n    }\n  }\n"])), function (p) {
+  return p.disabled ? getColor('backgroundDisabled') : trackActiveColor;
+}, trackWidth - knobSizePx - trackOffset * 2);
+var Track = styled.label(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  height: ", "px;\n  width: ", "px;\n  display: block;\n  position: relative;\n  border-radius: 1000px;\n  transition: ", ";\n  cursor: pointer;\n  background-color: ", ";\n"])), trackHeight, trackWidth, getTransition('xFast'), function (p) {
+  return p.isDisabled ? getColor('backgroundDisabled') : trackInactiveColor;
+});
+var Knob = styled.span(_templateObject3 || (_templateObject3 = _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"])), trackOffset, trackOffset, knobSizePx, knobSizePx, function (p) {
+  return p.isDisabled ? getColor('contentDisabled') : 'white';
+}, getTransition('xFast'));
+var Wrapper = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: grid;\n  grid-auto-flow: column;\n  align-items: center;\n  width: fit-content;\n  gap: 8px;\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(Track, {
+    htmlFor: id,
+    className: "Track",
+    isDisabled: isDisabled
+  }, /*#__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/components/tab.js

@@ -25,7 +25,7 @@ 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-contentDimmed);\n  border-radius: 0;\n  white-space: nowrap;\n  transition: color ", ", box-shadow ", ";\n\n  &:hover {\n    color: var(--grn-color-content);\n  }\n\n  ", ";\n"])), getWeight('medium'), getTransition('fast'), getTransition('xFast'), function (p) {
+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-content2);\n  border-radius: 0;\n  white-space: nowrap;\n  transition: color ", ", box-shadow ", ";\n\n  &:hover {\n    color: var(--grn-color-content);\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-content);\n  ";
 });
 export var Tab = function Tab(_ref) {

package/es/components/text-toggle.js

@@ -22,7 +22,7 @@ import React from 'react';
 import styled from '@emotion/styled';
 import PropTypes from 'prop-types';
 var Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  border: 1px solid var(--grn-color-border);\n  border-radius: 1000px;\n  width: fit-content;\n"])));
-var ItemWrapper = styled.button(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  appearance: none;\n  border: none;\n  padding: 0 16px;\n  font-family: inherit;\n  font-size: inherit;\n  font-weight: ", ";\n  cursor: pointer;\n  height: calc(var(--grn-textBoxHeight-m) - 2px);\n  background-color: transparent;\n  position: relative;\n  color: var(--grn-color-contentDimmed);\n  border-radius: 1000px;\n  white-space: nowrap;\n  transition: color ", ", box-shadow ", ";\n\n  &:hover {\n    color: var(--grn-color-content);\n  }\n\n  ", ";\n"])), getWeight('medium'), getTransition('fast'), getTransition('xFast'), function (p) {
+var ItemWrapper = styled.button(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  appearance: none;\n  border: none;\n  padding: 0 16px;\n  font-family: inherit;\n  font-size: inherit;\n  font-weight: ", ";\n  cursor: pointer;\n  height: calc(var(--grn-textBoxHeight-m) - 2px);\n  background-color: transparent;\n  position: relative;\n  color: var(--grn-color-content2);\n  border-radius: 1000px;\n  white-space: nowrap;\n  transition: color ", ", box-shadow ", ";\n\n  &:hover {\n    color: var(--grn-color-content);\n  }\n\n  ", ";\n"])), getWeight('medium'), getTransition('fast'), getTransition('xFast'), function (p) {
   return p.isActive && "\n    box-shadow: 0 0 0 1px var(--grn-color-grey6);\n    color: var(--grn-color-content);\n  ";
 });
 export var TextToggle = function TextToggle(_ref) {

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.2",
+  "version": "5.7.0",
   "description": "Flodesk design system",
   "module": "es/index.js",
   "author": "Flodesk",