@flodesk/grain 2.5.1 → 2.7.1

package/es/components/text/index.js

@@ -1,9 +1,19 @@
 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 = ["children", "size", "weight", "color", "tag", "hasEllipsis", "ellipsisLines", "align"];
 
 var _templateObject;
 
+import "core-js/modules/es.object.assign.js";
+
+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, getTextSize, getWeight } from '../../utilities';
@@ -11,12 +21,20 @@ import { PropTypes } from 'prop-types';
 import React from "react";
 import styled from "@emotion/styled";
 import { types } from '../../types';
-var Wrapper = styled.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: block;\n  font-size: ", ";\n  font-weight: ", ";\n  color: ", ";\n"])), function (p) {
+var Wrapper = styled.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: block;\n  font-size: ", ";\n  font-weight: ", ";\n  color: ", ";\n  text-align: ", ";\n  \n  ", ";\n  ", ";\n  ", ";\n"])), function (p) {
   return getTextSize(p.size);
 }, function (p) {
   return getWeight(p.weight);
 }, function (p) {
   return getColor(p.color);
+}, function (p) {
+  return p.align;
+}, function (p) {
+  return p.hasEllipsis && "\n    overflow: hidden;\n    text-overflow: ellipsis;\n  ";
+}, function (p) {
+  return p.hasEllipsis && !p.ellipsisLines && "\n    white-space: nowrap;\n  ";
+}, function (p) {
+  return p.hasEllipsis && p.ellipsisLines && "\n    display: -webkit-box;\n    -webkit-line-clamp: ".concat(p.ellipsisLines, ";\n    -webkit-box-orient: vertical;\n  ");
 });
 export var Text = function Text(_ref) {
   var children = _ref.children,
@@ -25,17 +43,28 @@ export var Text = function Text(_ref) {
       _ref$weight = _ref.weight,
       weight = _ref$weight === void 0 ? 'normal' : _ref$weight,
       color = _ref.color,
-      tag = _ref.tag;
-  return /*#__PURE__*/React.createElement(Wrapper, {
+      tag = _ref.tag,
+      hasEllipsis = _ref.hasEllipsis,
+      ellipsisLines = _ref.ellipsisLines,
+      align = _ref.align,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/React.createElement(Wrapper, Object.assign({
     size: size,
     weight: weight,
     color: color,
-    as: tag
-  }, children);
+    as: tag,
+    hasEllipsis: hasEllipsis,
+    ellipsisLines: ellipsisLines,
+    align: align
+  }, props), children);
 };
 Text.propTypes = {
   size: types.textSize,
   weight: types.weight,
   color: types.color,
-  tag: PropTypes.string
+  align: types.textAlign,
+  tag: PropTypes.string,
+  hasEllipsis: PropTypes.bool,
+  ellipsisLines: PropTypes.number
 };

package/es/styles/base.css

@@ -26,11 +26,6 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
-.grn-context a {
-  color: inherit;
-  text-decoration: none;
-}
-
 *, *:before, *:after {
   box-sizing: border-box;
 } 

package/es/styles/variables.css

@@ -3,11 +3,15 @@
 }
 
 :root {
-  --grn-text-s: calc(var(--grn-unit) * 1.625);
-  --grn-text-m: calc(var(--grn-unit) * 1.875);
-  --grn-text-l: calc(var(--grn-unit) * 2.5);
-  --grn-text-xl: calc(var(--grn-unit) * 3.125);
-  --grn-text-xxl: calc(var(--grn-unit) * 3.75);
+  --grn-textDecreaseRatio: 1.146;
+  --grn-textIncreaseRatio: 1.207;
+  --grn-baseTextSize: calc(var(--grn-unit) * 1.875);
+  
+  --grn-text-s: calc(var(--grn-text-m) / var(--grn-textDecreaseRatio));
+  --grn-text-m: var(--grn-baseTextSize);
+  --grn-text-l: calc(var(--grn-text-m) * 1.335);
+  --grn-text-xl: calc(var(--grn-text-l) * 1.2);
+  --grn-text-xxl: calc(var(--grn-text-xl) * 1.25);
 }
 
 :root {

package/es/types/index.js

@@ -8,5 +8,6 @@ export var types = {
   radius: PropTypes.oneOf(["s", "m", "l"]),
   position: PropTypes.oneOf(["static", "relative", "fixed", "absolute", "sticky"]),
   textSize: PropTypes.oneOfType([PropTypes.oneOf(Object.keys(vars.textSizes)), PropTypes.number, PropTypes.string]),
-  weight: PropTypes.oneOf(Object.keys(vars.weights))
+  weight: PropTypes.oneOf(Object.keys(vars.weights)),
+  textAlign: PropTypes.oneOf(["left", "center", "right"])
 };

package/package.json

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