@flodesk/grain 10.11.0 → 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/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.11.0",
+  "version": "10.12.0",
   "description": "Flodesk design system",
   "module": "es/index.js",
   "author": "Flodesk",