@flodesk/grain 10.10.11 → 10.12.0

package/es/components/index.js

@@ -1,5 +1,6 @@
 export * from './provider';
 export { Text } from './text';
+export { Text2 } from './text2';
 export { Box } from './box';
 export { Box2 } from './box2';
 export { Button } from './button';

package/es/components/text2/index.js

@@ -0,0 +1,100 @@
+import "core-js/modules/es.object.keys.js";
+import "core-js/modules/es.array.index-of.js";
+import "core-js/modules/es.symbol.js";
+import "core-js/modules/es.object.define-property.js";
+import "core-js/modules/es.array.filter.js";
+import "core-js/modules/es.object.to-string.js";
+import "core-js/modules/es.object.get-own-property-descriptor.js";
+import "core-js/modules/web.dom-collections.for-each.js";
+import "core-js/modules/es.object.get-own-property-descriptors.js";
+import "core-js/modules/es.object.define-properties.js";
+import "core-js/modules/es.object.assign.js";
+var _excluded = ["children", "size", "weight", "color", "tag", "display", "hasEllipsis", "ellipsisLines", "align", "letterSpacing", "textTransform", "variant", "trimTop", "className"];
+
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import "core-js/modules/es.string.trim.js";
+import "core-js/modules/es.regexp.exec.js";
+import "core-js/modules/es.string.replace.js";
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+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; }
+
+import { generateStyleAttributes, generateClassNameAttributes } from '../../utilities';
+import PropTypes from 'prop-types';
+import React, { forwardRef } from 'react';
+import { types } from '../../types';
+import styles from './styles.module.css';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export var Text2 = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 'm' : _ref$size,
+      weight = _ref.weight,
+      color = _ref.color,
+      _ref$tag = _ref.tag,
+      tag = _ref$tag === void 0 ? 'span' : _ref$tag,
+      _ref$display = _ref.display,
+      display = _ref$display === void 0 ? 'block' : _ref$display,
+      hasEllipsis = _ref.hasEllipsis,
+      ellipsisLines = _ref.ellipsisLines,
+      align = _ref.align,
+      letterSpacing = _ref.letterSpacing,
+      textTransform = _ref.textTransform,
+      variant = _ref.variant,
+      trimTop = _ref.trimTop,
+      className = _ref.className,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var Tag = tag;
+
+  if (variant === 'caps') {
+    size = 's';
+    weight = 'medium';
+    textTransform = 'uppercase';
+    letterSpacing = '0.05em';
+  }
+
+  var genStyles = _objectSpread(_objectSpread({}, generateStyleAttributes({
+    size: size,
+    align: align,
+    color: color,
+    letterSpacing: letterSpacing
+  })), ellipsisLines && _defineProperty({}, '--el', ellipsisLines));
+
+  var propClassName = className ? className : '';
+  var classNames = [generateClassNameAttributes({
+    size: size,
+    align: align,
+    color: color,
+    weight: weight,
+    display: !ellipsisLines ? display : undefined,
+    textTransform: textTransform
+  }), propClassName, trimTop && styles.trimTop, hasEllipsis && !ellipsisLines ? styles.ellipsis : undefined, hasEllipsis && ellipsisLines ? styles.ellipsisMulti : undefined].join(' ').replace(/\s+/g, ' ').trim();
+  return ___EmotionJSX(Tag, _extends({
+    ref: ref,
+    className: classNames,
+    style: genStyles
+  }, props), children);
+});
+Text2.propTypes = {
+  size: types.responsiveTextSize,
+  weight: types.weight,
+  color: types.color,
+  align: types.responsiveTextAlign,
+  tag: types.textTag,
+  hasEllipsis: PropTypes.bool,
+  ellipsisLines: PropTypes.number,
+  letterSpacing: PropTypes.string,
+  textTransform: PropTypes.oneOf(['capitalize', 'uppercase', 'lowercase']),
+  variant: PropTypes.oneOf(['caps']),
+  trimTop: PropTypes.bool,
+  display: types.textDisplay
+};

package/es/components/text2/styles.module.css

@@ -0,0 +1,22 @@
+.trimTop:before {
+  --capHeight: 0.74em;
+  --lineHeightAndCapHeightOffset: calc((var(--grn-lineHeight-global) - var(--capHeight)) / 2);
+
+  content: '';
+  margin-top: calc(-1 * var(--lineHeightAndCapHeightOffset));
+  display: block;
+}
+
+.ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ellipsisMulti {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: var(--el);
+  -webkit-box-orient: vertical;
+}

package/es/icons/icon-bold.js

@@ -0,0 +1,28 @@
+import "core-js/modules/es.object.assign.js";
+
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import * as React from 'react';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+
+var IconBold = function IconBold(props) {
+  return ___EmotionJSX("svg", _extends({
+    viewBox: "0 0 18 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), ___EmotionJSX("g", {
+    clipPath: "url(#prefix__clip0_1288_666)"
+  }, ___EmotionJSX("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M0 24V0h6.978c1.834 0 3.81.32 5.357 1.31C13.951 2.34 15 4.037 15 6.5s-1.049 4.16-2.665 5.19a6.77 6.77 0 01-.087.056c.38.157.744.344 1.088.563C14.95 13.341 16 15.04 16 17.5c0 2.462-1.049 4.16-2.665 5.19-1.548.99-3.523 1.31-5.357 1.31H0zm2-2h5.978c1.655 0 3.19-.299 4.281-.995C13.282 20.352 14 19.299 14 17.5c0-1.8-.718-2.852-1.74-3.505C11.167 13.299 9.632 13 7.977 13H2v9zm9.26-19.005C12.281 3.648 13 4.7 13 6.5c0 1.8-.718 2.852-1.74 3.505-1.092.696-2.627.995-4.282.995H2V2h4.978c1.655 0 3.19.299 4.281.995z",
+    fill: "currentColor"
+  })), ___EmotionJSX("defs", null, ___EmotionJSX("clipPath", {
+    id: "prefix__clip0_1288_666"
+  }, ___EmotionJSX("path", {
+    fill: "#fff",
+    d: "M0 0h16v24H0z"
+  }))));
+};
+
+export default IconBold;

package/es/icons/icon-bullet-list.js

@@ -0,0 +1,21 @@
+import "core-js/modules/es.object.assign.js";
+
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import * as React from 'react';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+
+var IconBulletList = function IconBulletList(props) {
+  return ___EmotionJSX("svg", _extends({
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), ___EmotionJSX("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M2 7a2 2 0 100-4 2 2 0 000 4zm22-3H6v2h18V4zm0 7H6v2h18v-2zM6 18h18v2H6v-2zm-2 1a2 2 0 11-4 0 2 2 0 014 0zm-2-5a2 2 0 100-4 2 2 0 000 4z",
+    fill: "currentColor"
+  }));
+};
+
+export default IconBulletList;

package/es/icons/icon-italic.js

@@ -0,0 +1,28 @@
+import "core-js/modules/es.object.assign.js";
+
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import * as React from 'react';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+
+var IconItalic = function IconItalic(props) {
+  return ___EmotionJSX("svg", _extends({
+    viewBox: "0 0 18 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), ___EmotionJSX("g", {
+    clipPath: "url(#prefix__clip0_1288_675)"
+  }, ___EmotionJSX("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M6 0h12v2h-5.236L7.309 22H12v2H0v-2h5.236l5.455-20H6V0z",
+    fill: "currentColor"
+  })), ___EmotionJSX("defs", null, ___EmotionJSX("clipPath", {
+    id: "prefix__clip0_1288_675"
+  }, ___EmotionJSX("path", {
+    fill: "#fff",
+    d: "M0 0h18v24H0z"
+  }))));
+};
+
+export default IconItalic;

package/es/icons/icon-number-list.js

@@ -0,0 +1,21 @@
+import "core-js/modules/es.object.assign.js";
+
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import * as React from 'react';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+
+var IconNumberList = function IconNumberList(props) {
+  return ___EmotionJSX("svg", _extends({
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), ___EmotionJSX("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M2 3.5H1v-1h1.5A.5.5 0 013 3v3.5h2v1H0v-1h2v-3zM7 4h17v2H7V4zm0 7h17v2H7v-2zm17 7H7v2h17v-2zM1 10.5v-1h3.5a.5.5 0 01.5.5v1.6a.5.5 0 01-.402.49L1 12.81v.69h4v1H.5A.5.5 0 010 14v-1.6a.5.5 0 01.402-.49L4 11.19v-.69H1zm-1 6v1h4v1H2v1h2v1H0v1h4.5A.5.5 0 005 21v-4a.5.5 0 00-.5-.5H0z",
+    fill: "currentColor"
+  }));
+};
+
+export default IconNumberList;

package/es/icons/icon-strike.js

@@ -0,0 +1,28 @@
+import "core-js/modules/es.object.assign.js";
+
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import * as React from 'react';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+
+var IconStrike = function IconStrike(props) {
+  return ___EmotionJSX("svg", _extends({
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), ___EmotionJSX("g", {
+    clipPath: "url(#prefix__clip0_1288_730)"
+  }, ___EmotionJSX("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M11.727.004c5.499-.149 7.8 3.742 8.25 5.804l-1.954.426c-.304-1.394-1.956-4.347-6.241-4.23C9.86 2.056 7.978 2.52 6.759 4c-.474.577-.772 1.446-.766 2.352.005.9.308 1.73.895 2.295.753.724 1.979 1.77 5.2 2.352H24v2H0v-2h6.583a9.682 9.682 0 01-1.081-.91c-1.056-1.017-1.5-2.407-1.51-3.724-.008-1.31.412-2.65 1.223-3.636C6.985.58 9.597.062 11.727.004zm.538 23.992c-5.498.15-7.8-3.742-8.25-5.803l1.955-.427c.304 1.394 1.956 4.347 6.241 4.23 1.921-.051 3.804-.516 5.022-1.997.475-.576.773-1.446.767-2.352-.006-.9-.308-1.73-.896-2.295A9.348 9.348 0 0016.72 15h2.61c.46.82.664 1.744.67 2.634.008 1.31-.412 2.651-1.223 3.636-1.77 2.15-4.382 2.668-6.512 2.726z",
+    fill: "currentColor"
+  })), ___EmotionJSX("defs", null, ___EmotionJSX("clipPath", {
+    id: "prefix__clip0_1288_730"
+  }, ___EmotionJSX("path", {
+    fill: "#fff",
+    d: "M0 0h24v24H0z"
+  }))));
+};
+
+export default IconStrike;

package/es/icons/icon-underline.js

@@ -0,0 +1,28 @@
+import "core-js/modules/es.object.assign.js";
+
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import * as React from 'react';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+
+var IconUnderline = function IconUnderline(props) {
+  return ___EmotionJSX("svg", _extends({
+    viewBox: "0 0 20 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), ___EmotionJSX("g", {
+    clipPath: "url(#prefix__clip0_1288_698)"
+  }, ___EmotionJSX("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M16 8.066V0h2v8.066c0 2.31-.405 4.764-1.623 6.671-1.262 1.976-3.334 3.266-6.377 3.266-3.043 0-5.115-1.29-6.377-3.266C2.405 12.83 2 10.376 2 8.066V0h2v8.066c0 2.13.383 4.145 1.31 5.595.882 1.383 2.31 2.342 4.69 2.342 2.38 0 3.808-.959 4.69-2.342.927-1.45 1.31-3.465 1.31-5.595zM20 22v2H0v-2h20z",
+    fill: "currentColor"
+  })), ___EmotionJSX("defs", null, ___EmotionJSX("clipPath", {
+    id: "prefix__clip0_1288_698"
+  }, ___EmotionJSX("path", {
+    fill: "#fff",
+    d: "M0 0h20v24H0z"
+  }))));
+};
+
+export default IconUnderline;

package/es/icons/index.js

@@ -66,4 +66,10 @@ export { default as ColumnAndRows } from './icon-column-and-rows';
 export { default as Columns } from './icon-columns';
 export { default as Rows } from './icon-rows';
 export { default as RowAndColumns } from './icon-row-and-columns';
-export { default as RowsAndColumn } from './icon-rows-and-column';
+export { default as RowsAndColumn } from './icon-rows-and-column';
+export { default as IconItalic } from './icon-italic';
+export { default as IconStrike } from './icon-strike';
+export { default as IconBold } from './icon-bold';
+export { default as IconUnderline } from './icon-underline';
+export { default as IconBulletList } from './icon-bullet-list';
+export { default as IconNumberList } from './icon-number-list';

package/es/styles/utilities.js

@@ -97,10 +97,12 @@ var spaceProps = styleConfig.spaceProps,
     alignProps = styleConfig.alignProps,
     weightProps = styleConfig.weightProps,
     displayProps = styleConfig.displayProps,
-    zIndexProps = styleConfig.zIndexProps;
-var classAndStyleDeclarationProps = [spaceProps, colorProps, shadowProps, radiusProps, transitionProps, sizeProps, borderColorProps];
-var classDeclarationProps = [].concat(classAndStyleDeclarationProps, [positionProps, overflowProps, cursorProps, sizeProps, alignSelfProps, borderWidthProps, alignProps, weightProps, displayProps, borderSideProps]);
-var styleDeclarationProps = [].concat(classAndStyleDeclarationProps, [dimensionProps, aspectRatioProps, orderProps, flexProps, opacityProps, zIndexProps]);
+    zIndexProps = styleConfig.zIndexProps,
+    letterSpacingProps = styleConfig.letterSpacingProps,
+    textTransformProps = styleConfig.textTransformProps;
+var classAndStyleDeclarationProps = [spaceProps, colorProps, shadowProps, radiusProps, transitionProps, sizeProps, borderColorProps, alignProps];
+var classDeclarationProps = [].concat(classAndStyleDeclarationProps, [positionProps, overflowProps, cursorProps, sizeProps, alignSelfProps, borderWidthProps, weightProps, displayProps, borderSideProps, textTransformProps]);
+var styleDeclarationProps = [].concat(classAndStyleDeclarationProps, [dimensionProps, aspectRatioProps, orderProps, flexProps, opacityProps, zIndexProps, letterSpacingProps]);
 var defaultBorder = "\n  [class*=\"bd\"] {\n    border-color: var(--grn-color-border);\n    border-width: 1px;\n  }\n";
 var utilities = "\n  ".concat(defaultBorder, "\n  ").concat(generateUtilityClassDeclarations(classDeclarationProps), ";\n  ").concat(generateStyleClassDeclarations(styleDeclarationProps), ";\n");
 export default utilities;

package/es/utilities/style-config.js

@@ -378,7 +378,8 @@ export var styleConfig = {
     variables: ['left', 'center', 'right'],
     variableChecker: function variableChecker(value) {
       return ['left', 'center', 'right'].includes(value);
-    }
+    },
+    isResponsive: true
   },
   weightProps: {
     props: [{
@@ -402,6 +403,24 @@ export var styleConfig = {
     variableChecker: function variableChecker(value) {
       return ['block', 'inline', 'inline-block'].includes(value);
     }
+  },
+  letterSpacingProps: {
+    props: [{
+      propName: 'letterSpacing',
+      property: 'letter-spacing',
+      short: 'ls'
+    }]
+  },
+  textTransformProps: {
+    props: [{
+      propName: 'textTransform',
+      property: 'text-transform',
+      short: 'tt'
+    }],
+    variables: ['capitalize', 'uppercase', 'lowercase'],
+    variableChecker: function variableChecker(value) {
+      return ['capitalize', 'uppercase', 'lowercase'].includes(value);
+    }
   }
 };
 export var propNameToShort = function propNameToShort(propName) {

package/package.json

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