@qlean/york-web - npm Package Compare versions

Comparing version 2.3.5 to 3.0.0

lib/components/primitive/Text/index.js

@@ -6,3 +6,3 @@ "use strict";
 });
-exports["default"] = Text;
+exports["default"] = void 0;
 
@@ -15,4 +15,2 @@ var _react = _interopRequireDefault(require("react"));
 
-var R = _interopRequireWildcard(require("ramda"));
-
 var _yorkCore = require("@qlean/york-core");
@@ -22,4 +20,2 @@
 
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj["default"] = obj; return newObj; } }
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -35,6 +31,2 @@
 
-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 _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }
@@ -44,3 +36,2 @@
 
-var htmlTags = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'div', 'span', 'p'];
 var presets = {
@@ -111,8 +102,4 @@ header1: {
       lineHeight = _ref.lineHeight,
-      textAlign = _ref.textAlign,
-      fontStyle = _ref.fontStyle,
-      letterSpacing = _ref.letterSpacing,
-      textTransform = _ref.textTransform,
-      textDecoration = _ref.textDecoration;
-  return "\n  color: ".concat(color === 'inherit' ? 'inherit' : _yorkCore.colors[color], ";\n  font-weight: ").concat(fontWeight, ";\n  font-size: ").concat(fontSize, "px;\n  line-height: ").concat(lineHeight, "px;\n  ").concat(textAlign ? "text-align: ".concat(textAlign) : '', ";\n  ").concat(fontStyle ? "font-style: ".concat(fontStyle) : '', ";\n  ").concat(letterSpacing ? "letter-spacing: ".concat(letterSpacing, "px") : '', ";\n  ").concat(textTransform ? "text-transform: ".concat(textTransform) : '', ";\n  ").concat(textDecoration ? "text-decoration: ".concat(textDecoration) : '', ";\n");
+      letterSpacing = _ref.letterSpacing;
+  return "\n  font-size: ".concat(fontSize, "px;\n  color: ").concat(color === 'inherit' ? 'inherit' : _yorkCore.colors[color], ";\n  font-weight: ").concat(fontWeight, ";\n  line-height: ").concat(lineHeight, "px;\n  ").concat(letterSpacing ? "letter-spacing: ".concat(letterSpacing, "px") : '', ";\n");
 };
@@ -143,6 +130,2 @@
 })(["", ""], getCss);
-
-var components = R.pipe(R.map(function (tag) {
-  return [tag, StyledText.withComponent(tag)];
-}), R.fromPairs)(htmlTags);
 /**
@@ -152,9 +135,6 @@ * Компонент для оформления текста, использует шрифт Museo Sans.
 
-function Text(_ref3) {
-  var htmlTag = _ref3.htmlTag,
-      rest = _objectWithoutProperties(_ref3, ["htmlTag"]);
 
-  var StyledTextComponent = components[htmlTag];
-  return _react["default"].createElement(StyledTextComponent, rest);
-}
+var Text = function Text(props) {
+  return _react["default"].createElement(StyledText, props);
+};
 
@@ -168,8 +148,5 @@ var propTypes = {
 };
-Text.propTypes = _objectSpread({
-  /** HTML-тег, который будет использован как обёртка для текста */
-  htmlTag: _propTypes["default"].oneOf(htmlTags)
-}, propTypes, (0, _utils.getResponsivePropTypes)(propTypes));
-Text.defaultProps = _objectSpread({
-  htmlTag: 'span'
-}, defaultProps);
+Text.defaultProps = defaultProps;
+Text.propTypes = _objectSpread({}, propTypes, (0, _utils.getResponsivePropTypes)(propTypes));
+var _default = Text;
+exports["default"] = _default;

lib/components/simple/Button/index.js

@@ -178,7 +178,6 @@ "use strict";
       wideProps = _props$normalizedProp.wideProps,
-      shadow = props.shadow,
+      withShadow = props.withShadow,
       size = props.size,
-      borderRadius = props.borderRadius,
       isDisabled = props.isDisabled;
-  return "\n    appearance: none !important;\n    outline: none;\n    user-select: none;\n    box-sizing: border-box;\n    padding: 0 ".concat(_utils.sizes[3], "px;\n    transition: ").concat(_utils.transitions["short"], ";\n    height: ").concat(getHeight(size), ";\n    width: 100%;\n    cursor: ").concat(isDisabled ? 'default' : 'pointer', ";\n    border-radius: ").concat(_utils.borderRadiuses[borderRadius], ";\n    box-shadow: ").concat(_utils.shadows[shadow], ";\n    ").concat(_utils.media.mobile("\n      height: ".concat(getHeight('m'), ";\n      ").concat(getMediaCss(_objectSpread({}, props, mobileProps)), "\n    ")), "\n    ").concat(_utils.media.base(getMediaCss(_objectSpread({}, props, baseProps))), "\n    ").concat(_utils.media.wide(getMediaCss(_objectSpread({}, props, wideProps))), "\n  ");
+  return "\n    appearance: none !important;\n    outline: none;\n    user-select: none;\n    box-sizing: border-box;\n    padding: 0 ".concat(_utils.sizes[3], "px;\n    transition: ").concat(_utils.transitions["short"], ";\n    height: ").concat(getHeight(size), ";\n    width: 100%;\n    cursor: ").concat(isDisabled ? 'default' : 'pointer', ";\n    border-radius: ").concat(_utils.borderRadiuses.medium, ";\n    box-shadow: ").concat(withShadow ? _utils.shadows.strong : 'none', ";\n    ").concat(_utils.media.mobile("\n      height: ".concat(getHeight('m'), ";\n      ").concat(getMediaCss(_objectSpread({}, props, mobileProps)), "\n    ")), "\n    ").concat(_utils.media.base(getMediaCss(_objectSpread({}, props, baseProps))), "\n    ").concat(_utils.media.wide(getMediaCss(_objectSpread({}, props, wideProps))), "\n  ");
 };
@@ -231,4 +230,3 @@
   size: 'm',
-  borderRadius: 'medium',
-  shadow: 'none',
+  withShadow: false,
   isSubmitting: false
@@ -248,7 +246,4 @@ };
 
-  /** Радиус скругления */
-  borderRadius: _propTypes["default"].oneOf(Object.keys(_utils.borderRadiuses)),
-
   /** Тень */
-  shadow: _propTypes["default"].oneOf(Object.keys(_utils.shadows)),
+  withShadow: _propTypes["default"].bool,
 
@@ -255,0 +250,0 @@ /** Имя кнопки, используется в автотестах */

package.json

 {
   "name": "@qlean/york-web",
-  "version": "2.3.5",
+  "version": "3.0.0",
   "description": "",
@@ -25,3 +25,3 @@ "license": "MIT",
   },
-  "gitHead": "873ac4a8ff6930162aea0f0a1af8eeb253d71882"
+  "gitHead": "541ec614cc77533d142cb721ecf413a81ba1001c"
 }

README.md

@@ -38,1 +38,9 @@ Здесь лежат компоненты и утилиты, предназначенные для работы в веб-окружении.
 В некоторых случаях это неудобно. Например, мы хотим чтобы `<Text>` наследовал цвет родителя, тогда спасет `color="inherit"`. Другой кейс — нужно расширить `<Button/>`, но не хочется возиться с переписыванием всех стилей, которые генерируются по умолчанию. Для этого в компоненте предусмотрен `rank={0}` который сбрасывает стили, но не устанавливает свои.
+
+Если нужно переопределить стандартный html-тег компонента, то можно воспользоваться пропом `as`
+https://www.styled-components.com/docs/api#as-polymorphic-prop
+
+
+```js static
+<Text preset="header1" as="h1">Заголовок</Text>
+```

src/components/primitive/Text/index.js

 import React from 'react'
 import PropTypes from 'prop-types'
 import styled from 'styled-components'
-import * as R from 'ramda'
 import { colors } from '@qlean/york-core'
@@ -16,4 +15,2 @@
 
-const htmlTags = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'div', 'span', 'p']
-
 const presets = {
@@ -84,17 +81,9 @@ header1: {
   lineHeight,
-  textAlign,
-  fontStyle,
   letterSpacing,
-  textTransform,
-  textDecoration,
 }) => `
+  font-size: ${fontSize}px;
   color: ${color === 'inherit' ? 'inherit' : colors[color]};
   font-weight: ${fontWeight};
-  font-size: ${fontSize}px;
   line-height: ${lineHeight}px;
-  ${textAlign ? `text-align: ${textAlign}` : ''};
-  ${fontStyle ? `font-style: ${fontStyle}` : ''};
   ${letterSpacing ? `letter-spacing: ${letterSpacing}px` : ''};
-  ${textTransform ? `text-transform: ${textTransform}` : ''};
-  ${textDecoration ? `text-decoration: ${textDecoration}` : ''};
 `
@@ -126,13 +115,7 @@
 
-const components = R.pipe(
-  R.map(tag => [tag, StyledText.withComponent(tag)]),
-  R.fromPairs,
-)(htmlTags)
-
 /**
  * Компонент для оформления текста, использует шрифт Museo Sans.
  */
-export default function Text({ htmlTag, ...rest }) {
-  const StyledTextComponent = components[htmlTag]
-  return <StyledTextComponent {...rest} />
+const Text = props => {
+  return <StyledText {...props} />
 }
@@ -147,5 +130,5 @@
 
+Text.defaultProps = defaultProps
+
 Text.propTypes = {
-  /** HTML-тег, который будет использован как обёртка для текста */
-  htmlTag: PropTypes.oneOf(htmlTags),
   ...propTypes,
@@ -155,5 +138,2 @@ ...getResponsivePropTypes(propTypes),
 
-Text.defaultProps = {
-  htmlTag: 'span',
-  ...defaultProps,
-}
+export default Text

src/components/simple/Button/index.js

@@ -168,5 +168,4 @@ import React from 'react'
     normalizedProps: { mobileProps, baseProps, wideProps },
-    shadow,
+    withShadow,
     size,
-    borderRadius,
     isDisabled,
@@ -184,4 +183,4 @@ } = props
     cursor: ${isDisabled ? 'default' : 'pointer'};
-    border-radius: ${borderRadiuses[borderRadius]};
-    box-shadow: ${shadows[shadow]};
+    border-radius: ${borderRadiuses.medium};
+    box-shadow: ${withShadow ? shadows.strong : 'none'};
     ${media.mobile(`
@@ -247,4 +246,3 @@ height: ${getHeight('m')};
   size: 'm',
-  borderRadius: 'medium',
-  shadow: 'none',
+  withShadow: false,
   isSubmitting: false,
@@ -267,6 +265,4 @@ }
   size: PropTypes.oneOf(['s', 'm']),
-  /** Радиус скругления */
-  borderRadius: PropTypes.oneOf(Object.keys(borderRadiuses)),
   /** Тень */
-  shadow: PropTypes.oneOf(Object.keys(shadows)),
+  withShadow: PropTypes.bool,
   /** Имя кнопки, используется в автотестах */
@@ -273,0 +269,0 @@ name: PropTypes.string.isRequired,

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

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

Number of lines in readme file

46

increased by21.05%

Worsened metrics

Total package byte prevSize

113323

decreased by-2.61%

Lines of code

2035

decreased by-2.35%

No dependency changes