@twreporter/react-components 8.20.1 → 8.21.0-rc.1

package/CHANGELOG.md

@@ -3,6 +3,28 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [8.21.0-rc.1](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-components@8.21.0-rc.0...@twreporter/react-components@8.21.0-rc.1) (2023-11-13)
+
+
+### Bug Fixes
+
+* use design guideline color in article page ([5d38172](https://github.com/twreporter/twreporter-npm-packages/commit/5d381721915792919d827d5b3a39785aac3b70bf))
+
+
+
+
+
+# [8.21.0-rc.0](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-components@8.20.1...@twreporter/react-components@8.21.0-rc.0) (2023-11-13)
+
+
+### Features
+
+* cursor default while disabled ([301b3a5](https://github.com/twreporter/twreporter-npm-packages/commit/301b3a577e15a4be479686e8db35239d2fa55490))
+
+
+
+
+
 ## [8.20.1](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-components@8.20.1-rc.0...@twreporter/react-components@8.20.1) (2023-10-30)
 
 **Note:** Version bump only for package @twreporter/react-components

package/lib/button/components/iconButton.js

@@ -36,7 +36,9 @@ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(
 var ButtonContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "iconButton__ButtonContainer",
   componentId: "sc-1v7s35n-0"
-})(["cursor:pointer;display:flex;svg{width:24px;height:24px;background-color:", ";}", ""], function (props) {
+})(["cursor:", ";display:flex;svg{width:24px;height:24px;background-color:", ";}", ""], function (props) {
+  return props.disabled ? 'default' : 'pointer';
+}, function (props) {
   return props.color;
 }, _mediaQuery["default"].desktopAndAbove(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    &:hover svg {\n      background-color: ", ";\n    }\n  "])), function (props) {
   return props.hoverColor;
@@ -62,7 +64,8 @@ var IconButton = function IconButton(_ref) {
 
   return /*#__PURE__*/_react["default"].createElement(ButtonContainer, _extends({
     color: color,
-    hoverColor: hoverColor
+    hoverColor: hoverColor,
+    disabled: disabled
   }, props), iconComponent);
 };
 

package/lib/button/components/iconWithTextButton.js

@@ -28,7 +28,9 @@ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(
 var ButtonContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "iconWithTextButton__ButtonContainer",
   componentId: "sc-1f9d1q4-0"
-})(["cursor:pointer;display:flex;flex-direction:column;align-items:center;color:", ";svg{width:24px;height:24px;background-color:", ";}", ""], function (props) {
+})(["cursor:", ";display:flex;flex-direction:column;align-items:center;color:", ";svg{width:24px;height:24px;background-color:", ";}", ""], function (props) {
+  return props.disabled ? 'default' : 'pointer';
+}, function (props) {
   return props.color;
 }, function (props) {
   return props.color;
@@ -66,7 +68,8 @@ var IconWithTextButton = function IconWithTextButton(_ref) {
 
   return /*#__PURE__*/_react["default"].createElement(ButtonContainer, {
     color: color,
-    hoverColor: hoverColor
+    hoverColor: hoverColor,
+    disabled: disabled
   }, iconComponent, /*#__PURE__*/_react["default"].createElement(StyledP3, {
     text: text,
     weight: _paragraph.P3.Weight.NORMAL,

package/lib/button/components/pillButton.js

@@ -44,7 +44,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 var ButtonContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "pillButton__ButtonContainer",
   componentId: "xa7tsy-0"
-})(["width:fit-content;display:flex;align-items:center;border-radius:40px;background-color:", ";border-color:", ";border-style:solid;border-width:1.5px;color:", ";padding:", ";cursor:pointer;svg{height:", ";width:", ";background-color:", ";}&:hover{color:", ";background-color:", ";border-color:", ";svg{background-color:", ";}}"], function (props) {
+})(["width:fit-content;display:flex;align-items:center;border-radius:40px;background-color:", ";border-color:", ";border-style:solid;border-width:1.5px;color:", ";padding:", ";cursor:", ";svg{height:", ";width:", ";background-color:", ";}&:hover{color:", ";background-color:", ";border-color:", ";svg{background-color:", ";}}"], function (props) {
   return props.type === _enums.Type.PRIMARY ? props.bgColor : 'transparent';
 }, function (props) {
   return props.bgColor;
@@ -52,6 +52,8 @@ var ButtonContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   return props.color;
 }, function (props) {
   return props.padding;
+}, function (props) {
+  return props.disabled ? 'default' : 'pointer';
 }, function (props) {
   return props.iconSize;
 }, function (props) {
@@ -147,7 +149,8 @@ var PillButton = function PillButton(_ref) {
     bgColor: bgColor,
     iconSize: iconSize,
     hoverColor: hoverColor,
-    hoverBgColor: hoverBgColor
+    hoverBgColor: hoverBgColor,
+    disabled: disabled
   }, props), /*#__PURE__*/_react["default"].createElement(RelativeParent, null, /*#__PURE__*/_react["default"].createElement(HideOnLoading, {
     show: !loading
   }, leftIconJSX, textJSX, rightIconJSX), /*#__PURE__*/_react["default"].createElement(Loader, {

package/lib/button/components/textButton.js

@@ -42,7 +42,9 @@ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(
 var ButtonContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "textButton__ButtonContainer",
   componentId: "sc-1lwyrq5-0"
-})(["cursor:pointer;display:flex;align-items:center;color:", ";svg{height:", ";width:", ";background-color:", ";}", ""], function (props) {
+})(["cursor:", ";display:flex;align-items:center;color:", ";svg{height:", ";width:", ";background-color:", ";}", ""], function (props) {
+  return props.disabled ? 'default' : 'pointer';
+}, function (props) {
   return props.color;
 }, function (props) {
   return props.iconSize;
@@ -111,7 +113,8 @@ var TextButton = function TextButton(_ref) {
   return /*#__PURE__*/_react["default"].createElement(ButtonContainer, _extends({
     color: color,
     hoverColor: hoverColor,
-    iconSize: iconSize
+    iconSize: iconSize,
+    disabled: disabled
   }, props), size === _sharedEnum.Size.L ? /*#__PURE__*/_react["default"].createElement(IconContainer, {
     isLeft: true
   }, leftIconComponent) : leftIconComponent, textJSX, size === _sharedEnum.Size.L ? /*#__PURE__*/_react["default"].createElement(IconContainer, null, rightIconComponent) : rightIconComponent);

package/lib/button/components/toggleButton.js

@@ -19,6 +19,8 @@ var _excluded = ["value", "labelOn", "labelOff", "disabled", "onChange"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+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); }
+
 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; }
@@ -36,7 +38,9 @@ var Container = /*#__PURE__*/_styledComponents["default"].div.withConfig({
 var Label = /*#__PURE__*/_styledComponents["default"].label.withConfig({
   displayName: "toggleButton__Label",
   componentId: "sc-183g3tk-2"
-})(["display:flex;align-items:center;gap:10px;cursor:pointer;"]);
+})(["display:flex;align-items:center;gap:10px;cursor:", ";"], function (props) {
+  return props.disabled ? 'default' : 'pointer';
+});
 
 var Switch = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "toggleButton__Switch",
@@ -71,7 +75,9 @@ var ToggleButton = function ToggleButton(_ref) {
 
   return /*#__PURE__*/_react["default"].createElement(Container, null, /*#__PURE__*/_react["default"].createElement(ColorP2, {
     text: value ? labelOn : labelOff
-  }), /*#__PURE__*/_react["default"].createElement(Label, props, /*#__PURE__*/_react["default"].createElement(Input, {
+  }), /*#__PURE__*/_react["default"].createElement(Label, _extends({
+    disabled: disabled
+  }, props), /*#__PURE__*/_react["default"].createElement(Input, {
     type: "checkbox",
     disabled: disabled,
     checked: value,

package/lib/button/utils/theme.js

@@ -37,7 +37,7 @@ var getFilledPillButtonTheme = function getFilledPillButtonTheme(theme, disabled
     case _theme.THEME.photography:
       return {
         color: _color.colorPhoto.dark,
-        bgColor: _color.colorSupportive.main,
+        bgColor: _color.colorSupportive.pastel,
         hoverColor: _color.colorGrayscale.white,
         hoverBgColor: _color.colorSupportive.heavy
       };
@@ -117,8 +117,8 @@ var getOutlinePillButtonTheme = function getOutlinePillButtonTheme(theme, disabl
   switch (theme) {
     case _theme.THEME.photography:
       return {
-        color: _color.colorSupportive.main,
-        bgColor: _color.colorSupportive.main,
+        color: _color.colorSupportive.pastel,
+        bgColor: _color.colorSupportive.pastel,
         hoverColor: _color.colorSupportive.heavy,
         hoverBgColor: _color.colorSupportive.heavy
       };
@@ -180,13 +180,13 @@ var getPrimaryIconButtonTheme = function getPrimaryIconButtonTheme(theme, isActi
     case _theme.THEME.photography:
       return {
         color: _color.colorGrayscale.white,
-        hoverColor: _color.colorSupportive.main
+        hoverColor: _color.colorSupportive.pastel
       };
 
     case "".concat(_theme.THEME.photography, "-active"):
       return {
-        color: _color.colorSupportive.main,
-        hoverColor: _color.colorSupportive.main
+        color: _color.colorSupportive.pastel,
+        hoverColor: _color.colorSupportive.pastel
       };
 
     case _theme.THEME.transparent:
@@ -232,13 +232,13 @@ var getSecondaryIconButtonTheme = function getSecondaryIconButtonTheme(theme, is
     case _theme.THEME.photography:
       return {
         color: _color.colorGrayscale.gray400,
-        hoverColor: _color.colorSupportive.main
+        hoverColor: _color.colorSupportive.pastel
       };
 
     case "".concat(_theme.THEME.photography, "-active"):
       return {
-        color: _color.colorSupportive.main,
-        hoverColor: _color.colorSupportive.main
+        color: _color.colorSupportive.pastel,
+        hoverColor: _color.colorSupportive.pastel
       };
 
     case _theme.THEME.transparent:
@@ -284,13 +284,13 @@ var getIconWithTextButtonTheme = function getIconWithTextButtonTheme(theme, isAc
     case _theme.THEME.photography:
       return {
         color: _color.colorGrayscale.gray200,
-        hoverColor: _color.colorSupportive.main
+        hoverColor: _color.colorSupportive.pastel
       };
 
     case "".concat(_theme.THEME.photography, "-active"):
       return {
-        color: _color.colorSupportive.main,
-        hoverColor: _color.colorSupportive.main
+        color: _color.colorSupportive.pastel,
+        hoverColor: _color.colorSupportive.pastel
       };
 
     case _theme.THEME.transparent:
@@ -327,7 +327,7 @@ var getPrimaryTextButtonTheme = function getPrimaryTextButtonTheme(theme, style)
     case _theme.THEME.photography:
       return {
         color: _color.colorGrayscale.white,
-        hoverColor: _color.colorSupportive.main
+        hoverColor: _color.colorSupportive.pastel
       };
 
     case _theme.THEME.transparent:
@@ -369,7 +369,7 @@ var getSecondaryTextButtonTheme = function getSecondaryTextButtonTheme(theme, st
     case _theme.THEME.photography:
       return {
         color: _color.colorGrayscale.gray400,
-        hoverColor: _color.colorSupportive.main
+        hoverColor: _color.colorSupportive.pastel
       };
 
     case _theme.THEME.transparent:
@@ -435,8 +435,8 @@ var getActiveTextButtonTheme = function getActiveTextButtonTheme(theme, style) {
   switch (theme) {
     case _theme.THEME.photography:
       return {
-        color: _color.colorSupportive.main,
-        hoverColor: _color.colorSupportive.main
+        color: _color.colorSupportive.pastel,
+        hoverColor: _color.colorSupportive.pastel
       };
 
     case _theme.THEME.transparent:

package/lib/input/utils/theme.js

@@ -16,7 +16,7 @@ var selectThemeStyle = function selectThemeStyle(theme) {
         bgColor: _color.colorOpacity['white_0.8'],
         focusBgColor: _color.colorGrayscale.gray100,
         desktopBgColor: _color.colorGrayscale.gray100,
-        borderColor: _color.colorSupportive.main,
+        borderColor: _color.colorSupportive.pastel,
         color: _color.colorGrayscale.gray800,
         focusColor: _color.colorGrayscale.gray500,
         placeholderColor: _color.colorGrayscale.gray800

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@twreporter/react-components",
-  "version": "8.20.1",
+  "version": "8.21.0-rc.1",
   "main": "lib/index.js",
   "repository": "https://github.com/twreporter/twreporter-npm-packages.git",
   "author": "twreporter <developer@twreporter.org>",
@@ -15,8 +15,8 @@
     "chromatic": "npx chromatic --exit-zero-on-changes"
   },
   "dependencies": {
-    "@twreporter/core": "^1.13.0",
-    "@twreporter/redux": "^7.8.0",
+    "@twreporter/core": "^1.13.1-rc.0",
+    "@twreporter/redux": "^7.8.1-rc.0",
     "fontfaceobserver-es": "^3.3.3",
     "hoist-non-react-statics": "^2.3.1",
     "lodash": "^4.0.0",
@@ -44,5 +44,5 @@
     "babel-loader": "^8.2.4",
     "chromatic": "^6.5.4"
   },
-  "gitHead": "8a64673c5043887c270b1f56efb71a4c3ca41cdd"
+  "gitHead": "aa00452ea5c3557c71865aa121dfa630f84e6a04"
 }