@flodesk/grain 10.11.0 → 10.12.1

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/styles/utilities.js

@@ -96,11 +96,13 @@ var spaceProps = styleConfig.spaceProps,
     borderSideProps = styleConfig.borderSideProps,
     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]);
+    textDisplayProps = styleConfig.textDisplayProps,
+    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, textDisplayProps, 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/types.js

@@ -22,6 +22,9 @@ export var positions = ['static', 'relative', 'fixed', 'absolute', 'sticky'];
 export var cursors = ['default', 'pointer'];
 export var sides = ['all', 'left', 'right', 'top', 'bottom', 'x', 'y'];
 export var borderWidths = ['1px', '2px', '3px', '4px'];
+export var textTransforms = ['capitalize', 'uppercase', 'lowercase'];
+export var textDisplays = ['block', 'inline-block', 'inline'];
+export var textAlignments = ['left', 'center', 'right'];
 export var types = {
   color: PropTypes.oneOfType([PropTypes.oneOf(Object.keys(vars.colors)), PropTypes.string]),
   responsiveSpace: PropTypes.oneOfType([PropTypes.oneOf(Object.keys(vars.spaces)), PropTypes.number, PropTypes.string, PropTypes.object]),
@@ -32,12 +35,12 @@ export var types = {
   shadow: PropTypes.oneOfType([PropTypes.oneOf(Object.keys(vars.shadows)), PropTypes.string]),
   position: PropTypes.oneOf(positions),
   responsiveTextSize: PropTypes.oneOfType([PropTypes.oneOf(Object.keys(vars.texts)), PropTypes.string, PropTypes.object]),
-  responsiveTextAlign: PropTypes.oneOfType([PropTypes.oneOf(['left', 'center', 'right']), PropTypes.string, PropTypes.object]),
+  responsiveTextAlign: PropTypes.oneOfType([PropTypes.oneOf(textAlignments), PropTypes.string, PropTypes.object]),
   iconSize: PropTypes.oneOfType([PropTypes.oneOf(Object.keys(vars.icons)), PropTypes.number, PropTypes.string]),
   weight: PropTypes.oneOf(Object.keys(vars.weights)),
   overflow: PropTypes.oneOf(overflows),
   textTag: PropTypes.oneOf(['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'span', 'label']),
-  textDisplay: PropTypes.oneOf(['block', 'inline-block', 'inline']),
+  textDisplay: PropTypes.oneOf(textDisplays),
   responsiveColumns: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
   responsiveRows: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
   autoFlow: PropTypes.oneOfType([PropTypes.oneOf(autoFlows), PropTypes.string, PropTypes.object]),

package/es/utilities/style-config.js

@@ -28,7 +28,7 @@ function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToAr
 
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
 
-import { alignSelfs, borderWidths, cursors, overflows, positions, sides } from '../types';
+import { alignSelfs, borderWidths, cursors, overflows, positions, sides, textAlignments, textDisplays, textTransforms } from '../types';
 import { vars } from '../variables';
 import { getDimension, getSpace, getTextSize, isSpaceVar } from './responsive';
 import { getColor, getRadius, getShadow, getTransition, getWeight, isColorVar, isRadiusVar, isShadowVar, isTrasitionVar } from './styles';
@@ -38,6 +38,7 @@ var shadows = Object.keys(vars.shadows);
 var radii = Object.keys(vars.radii);
 var transitions = [].concat(_toConsumableArray(Object.keys(vars.transitions)), _toConsumableArray(Object.keys(vars.transitionUtils)));
 var sizes = Object.keys(vars.texts);
+var weights = Object.keys(vars.weights);
 
 var borderSideToStyle = function borderSideToStyle(side) {
   if (side === 'all') return 'solid';
@@ -375,10 +376,11 @@ export var styleConfig = {
       property: 'text-align',
       short: 'al'
     }],
-    variables: ['left', 'center', 'right'],
+    variables: textAlignments,
     variableChecker: function variableChecker(value) {
-      return ['left', 'center', 'right'].includes(value);
-    }
+      return textAlignments.includes(value);
+    },
+    isResponsive: true
   },
   weightProps: {
     props: [{
@@ -386,21 +388,39 @@ export var styleConfig = {
       property: 'font-weight',
       short: 'w'
     }],
-    variables: ['normal', 'medium'],
+    variables: weights,
     variableChecker: function variableChecker(value) {
-      return ['normal', 'medium'].includes(value);
+      return weights.includes(value);
     },
     valueTransformer: getWeight
   },
-  displayProps: {
+  textDisplayProps: {
     props: [{
       propName: 'display',
       property: 'display',
       short: 'd'
     }],
-    variables: ['block', 'inline', 'inline-block'],
+    variables: textDisplays,
+    variableChecker: function variableChecker(value) {
+      return textDisplays.includes(value);
+    }
+  },
+  letterSpacingProps: {
+    props: [{
+      propName: 'letterSpacing',
+      property: 'letter-spacing',
+      short: 'ls'
+    }]
+  },
+  textTransformProps: {
+    props: [{
+      propName: 'textTransform',
+      property: 'text-transform',
+      short: 'tt'
+    }],
+    variables: textTransforms,
     variableChecker: function variableChecker(value) {
-      return ['block', 'inline', 'inline-block'].includes(value);
+      return textTransforms.includes(value);
     }
   }
 };

package/package.json

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