@cloudflare/component-text - npm Package Compare versions

Comparing version 1.0.13 to 2.0.0

CHANGELOG.md

@@ -6,3 +6,19 @@ # Change Log
 
-      <a name="1.0.13"></a>
+  <a name="2.0.0"></a>
+# [2.0.0](http://stash.cfops.it:7999/fe/stratus/compare/@cloudflare/component-text@1.0.13...@cloudflare/component-text@2.0.0) (2018-06-21)
+
+
+### Features
+
+* **component-text:** UI-634: apply design system to component-text ([8d549df](http://stash.cfops.it:7999/fe/stratus/commits/8d549df))
+
+
+### BREAKING CHANGES
+
+* **component-text:** removed TextTheme and TextUnstyled
+
+
+
+
+  <a name="1.0.13"></a>
 ## [1.0.13](http://stash.cfops.it:7999/fe/stratus/compare/@cloudflare/component-text@1.0.11...@cloudflare/component-text@1.0.13) (2018-06-14)
@@ -15,3 +31,3 @@
 
-      <a name="1.0.12"></a>
+<a name="1.0.12"></a>
 ## [1.0.12](http://stash.cfops.it:7999/fe/stratus/compare/@cloudflare/component-text@1.0.11...@cloudflare/component-text@1.0.12) (2018-06-08)
@@ -18,0 +34,0 @@

es/index.js

@@ -1,8 +0,3 @@
-import TextUnstyled from './Text';
-import TextTheme from './TextTheme';
+import Text from './Text';
 
-import { applyTheme } from '@cloudflare/style-container';
-
-var Text = applyTheme(TextUnstyled, TextTheme);
-
-export { Text, TextUnstyled, TextTheme };
+export { Text };

es/Text.js

@@ -11,14 +11,36 @@ var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
 import PropTypes from 'prop-types';
-import { createComponent } from '@cloudflare/style-container';
-import capitalizeWord from 'capitalize';
+import { createStyledComponent } from '@cloudflare/style-container';
 
-var capitalize = function capitalize(str) {
-  return str.split('-').map(function (w) {
-    return capitalizeWord(w);
-  }).join('');
+var fontSizes = {
+  normal: 3,
+  small: 2
 };
 
+var lineHeights = {
+  small: 1.25
+};
+
+var colors = {
+  info: 'blue.4',
+  success: 'green.5',
+  warning: 'orange.6',
+  error: 'red.3',
+  muted: 'gray.4'
+};
+
+var fontWeights = {
+  normal: 400,
+  bold: 700,
+  'semi-bold': 600
+};
+
+var textAlign = {
+  start: 'left',
+  center: 'center',
+  justify: 'justify',
+  end: 'right'
+};
+
 var styles = function styles(_ref) {
-  var theme = _ref.theme,
-      size = _ref.size,
+  var size = _ref.size,
       weight = _ref.weight,
@@ -29,10 +51,10 @@ align = _ref.align,
   return {
-    color: type && theme['color' + capitalize(type)],
-    lineHeight: size && theme['lineHeight' + capitalize(size)],
-    fontSize: size && theme['fontSize' + capitalize(size)],
-    fontWeight: weight && theme['fontWeight' + capitalize(weight)],
-    textAlign: align && theme['textAlign' + capitalize(align)],
-    textTransform: textCase && theme['textTransform' + capitalize(textCase)],
+    color: type && colors[type],
+    lineHeight: size && lineHeights[size],
+    fontSize: size && fontSizes[size],
+    fontWeight: weight && fontWeights[weight],
+    textAlign: align && textAlign[align],
+    textTransform: textCase,
     '&:first-letter': {
-      textTransform: textCase && theme['textTransform' + capitalize(textCase) + ':first-letter']
+      textTransform: textCase && textCase === 'titlecase' && 'capitalize'
     }
@@ -84,2 +106,2 @@ };
 
-export default createComponent(styles, Text);
+export default createStyledComponent(styles, Text);

lib/index.js

@@ -6,3 +6,3 @@ 'use strict';
 });
-exports.TextTheme = exports.TextUnstyled = exports.Text = undefined;
+exports.Text = undefined;
 
@@ -13,14 +13,4 @@ var _Text = require('./Text');
 
-var _TextTheme = require('./TextTheme');
-
-var _TextTheme2 = _interopRequireDefault(_TextTheme);
-
-var _styleContainer = require('@cloudflare/style-container');
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const Text = (0, _styleContainer.applyTheme)(_Text2.default, _TextTheme2.default);
-
-exports.Text = Text;
-exports.TextUnstyled = _Text2.default;
-exports.TextTheme = _TextTheme2.default;
+exports.Text = _Text2.default;

lib/Text.js

@@ -17,19 +17,43 @@ 'use strict';
 
-var _capitalize = require('capitalize');
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var _capitalize2 = _interopRequireDefault(_capitalize);
+const fontSizes = {
+  normal: 3,
+  small: 2
+};
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const lineHeights = {
+  small: 1.25
+};
 
-const capitalize = str => str.split('-').map(w => (0, _capitalize2.default)(w)).join('');
+const colors = {
+  info: 'blue.4',
+  success: 'green.5',
+  warning: 'orange.6',
+  error: 'red.3',
+  muted: 'gray.4'
+};
 
-const styles = ({ theme, size, weight, align, type, case: textCase }) => ({
-  color: type && theme[`color${capitalize(type)}`],
-  lineHeight: size && theme[`lineHeight${capitalize(size)}`],
-  fontSize: size && theme[`fontSize${capitalize(size)}`],
-  fontWeight: weight && theme[`fontWeight${capitalize(weight)}`],
-  textAlign: align && theme[`textAlign${capitalize(align)}`],
-  textTransform: textCase && theme[`textTransform${capitalize(textCase)}`],
+const fontWeights = {
+  normal: 400,
+  bold: 700,
+  'semi-bold': 600
+};
+
+const textAlign = {
+  start: 'left',
+  center: 'center',
+  justify: 'justify',
+  end: 'right'
+};
+
+const styles = ({ size, weight, align, type, case: textCase }) => ({
+  color: type && colors[type],
+  lineHeight: size && lineHeights[size],
+  fontSize: size && fontSizes[size],
+  fontWeight: weight && fontWeights[weight],
+  textAlign: align && textAlign[align],
+  textTransform: textCase,
   '&:first-letter': {
-    textTransform: textCase && theme[`textTransform${capitalize(textCase)}:first-letter`]
+    textTransform: textCase && textCase === 'titlecase' && 'capitalize'
   }
@@ -64,2 +88,2 @@ });
 
-exports.default = (0, _styleContainer.createComponent)(styles, Text);
+exports.default = (0, _styleContainer.createStyledComponent)(styles, Text);

package.json

 {
   "name": "@cloudflare/component-text",
   "description": "Cloudflare Text Component",
-  "version": "1.0.13",
+  "version": "2.0.0",
   "main": "lib/index.js",
@@ -15,4 +15,3 @@ "module": "es/index.js",
   "dependencies": {
-    "@cloudflare/style-container": "^1.1.1",
-    "capitalize": "^1.0.0",
+    "@cloudflare/style-container": "^2.0.0",
     "prop-types": "^15.6.0"
@@ -19,0 +18,0 @@ },

src/index.js

@@ -1,8 +0,3 @@
-import TextUnstyled from './Text';
-import TextTheme from './TextTheme';
+import Text from './Text';
 
-import { applyTheme } from '@cloudflare/style-container';
-
-const Text = applyTheme(TextUnstyled, TextTheme);
-
-export { Text, TextUnstyled, TextTheme };
+export { Text };

src/Text.js

 import React from 'react';
 import PropTypes from 'prop-types';
-import { createComponent } from '@cloudflare/style-container';
-import capitalizeWord from 'capitalize';
+import { createStyledComponent } from '@cloudflare/style-container';
 
-const capitalize = str =>
-  str
-    .split('-')
-    .map(w => capitalizeWord(w))
-    .join('');
+const fontSizes = {
+  normal: 3,
+  small: 2
+};
 
-const styles = ({ theme, size, weight, align, type, case: textCase }) => ({
-  color: type && theme[`color${capitalize(type)}`],
-  lineHeight: size && theme[`lineHeight${capitalize(size)}`],
-  fontSize: size && theme[`fontSize${capitalize(size)}`],
-  fontWeight: weight && theme[`fontWeight${capitalize(weight)}`],
-  textAlign: align && theme[`textAlign${capitalize(align)}`],
-  textTransform: textCase && theme[`textTransform${capitalize(textCase)}`],
+const lineHeights = {
+  small: 1.25
+};
+
+const colors = {
+  info: 'blue.4',
+  success: 'green.5',
+  warning: 'orange.6',
+  error: 'red.3',
+  muted: 'gray.4'
+};
+
+const fontWeights = {
+  normal: 400,
+  bold: 700,
+  'semi-bold': 600
+};
+
+const textAlign = {
+  start: 'left',
+  center: 'center',
+  justify: 'justify',
+  end: 'right'
+};
+
+const styles = ({ size, weight, align, type, case: textCase }) => ({
+  color: type && colors[type],
+  lineHeight: size && lineHeights[size],
+  fontSize: size && fontSizes[size],
+  fontWeight: weight && fontWeights[weight],
+  textAlign: align && textAlign[align],
+  textTransform: textCase,
   '&:first-letter': {
-    textTransform:
-      textCase && theme[`textTransform${capitalize(textCase)}:first-letter`]
+    textTransform: textCase && textCase === 'titlecase' && 'capitalize'
   }
@@ -47,2 +69,2 @@ });
 
-export default createComponent(styles, Text);
+export default createStyledComponent(styles, Text);

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Dependency count

3

decreased by-25%

Worsened metrics

Total package byte prevSize

19749

decreased by-10.98%

Number of package files

9

decreased by-25%

Lines of code

225

decreased by-8.54%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Added@cloudflare/style-container@2.0.3(transitive)

• - Removedcapitalize@^1.0.0

• - Removed@cloudflare/style-container@1.1.1(transitive)

• - Removedcapitalize@1.0.0(transitive)

• Updated@cloudflare/style-container@^2.0.0