@twreporter/react-components 8.21.0-rc.0 → 8.21.0-rc.2

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.2](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-components@8.21.0-rc.1...@twreporter/react-components@8.21.0-rc.2) (2023-11-13)
+
+
+### Features
+
+* add `InheritLinkButton` component & story ([81788c5](https://github.com/twreporter/twreporter-npm-packages/commit/81788c5cbe4ac208656a83ae9dd565f1e06bb587))
+
+
+
+
+
+# [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)
 
 

package/lib/button/components/link.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports["default"] = exports.InheritLinkButton = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -19,7 +19,8 @@ var _enums = require("../enums");
 
 var _color2 = require("@twreporter/core/lib/constants/color");
 
-var _excluded = ["type", "link", "text", "weight", "TextComponent", "disabled"];
+var _excluded = ["type", "link", "text", "weight", "TextComponent", "disabled"],
+    _excluded2 = ["type", "link", "text"];
 
 var _decoration, _color;
 
@@ -37,16 +38,24 @@ var style = {
   decoration: (_decoration = {}, _defineProperty(_decoration, _enums.LinkType.DEFAULT, 'none'), _defineProperty(_decoration, _enums.LinkType.UNDERLINE, 'underline'), _decoration),
   color: (_color = {}, _defineProperty(_color, _enums.LinkType.DEFAULT, _color2.COLOR_SEMANTIC.info), _defineProperty(_color, _enums.LinkType.UNDERLINE, _color2.colorGrayscale.gray600), _color)
 };
-var LinkContainer = /*#__PURE__*/(0, _styledComponents["default"])(_customizedLink["default"]).withConfig({
-  displayName: "link__LinkContainer",
+var BaseContainer = /*#__PURE__*/(0, _styledComponents["default"])(_customizedLink["default"]).withConfig({
+  displayName: "link__BaseContainer",
   componentId: "g5z7t5-0"
-})(["display:flex;align-items:center;text-underline-offset:4px;text-decoration-line:", ";color:", ";", ""], function (props) {
+})(["text-underline-offset:4px;text-decoration-line:", ";color:", ";&:hover{text-decoration-line:underline;}"], function (props) {
   return style.decoration[props.type];
 }, function (props) {
   return style.color[props.type];
-}, function (props) {
-  return props.disabled ? "\n    opacity: 0.5;\n    cursor: auto;\n    -webkit-tap-highlight-color: transparent;\n  " : "\n    &:hover {\n      text-decoration-line: underline;\n    }\n  ";
 });
+var LinkContainer = /*#__PURE__*/(0, _styledComponents["default"])(BaseContainer).withConfig({
+  displayName: "link__LinkContainer",
+  componentId: "g5z7t5-1"
+})(["display:flex;align-items:center;", ""], function (props) {
+  return props.disabled ? "\n    opacity: 0.5;\n    cursor: auto;\n    -webkit-tap-highlight-color: transparent;\n  " : "\n  ";
+});
+var InheritLinkContainer = /*#__PURE__*/(0, _styledComponents["default"])(BaseContainer).withConfig({
+  displayName: "link__InheritLinkContainer",
+  componentId: "g5z7t5-2"
+})([""]);
 
 var LinkButton = function LinkButton(_ref) {
   var _ref$type = _ref.type,
@@ -86,5 +95,27 @@ LinkButton.propTypes = {
 };
 LinkButton.Type = _enums.LinkType;
 LinkButton.Weight = _paragraph.P1.Weight;
+
+var InheritLinkButton = function InheritLinkButton(_ref2) {
+  var _ref2$type = _ref2.type,
+      type = _ref2$type === void 0 ? _enums.LinkType.DEFAULT : _ref2$type,
+      _ref2$link = _ref2.link,
+      link = _ref2$link === void 0 ? {} : _ref2$link,
+      _ref2$text = _ref2.text,
+      text = _ref2$text === void 0 ? '' : _ref2$text,
+      props = _objectWithoutProperties(_ref2, _excluded2);
+
+  return /*#__PURE__*/_react["default"].createElement(InheritLinkContainer, _extends({
+    type: type
+  }, props), text);
+};
+
+exports.InheritLinkButton = InheritLinkButton;
+InheritLinkButton.propTypes = {
+  type: _propTypes["default"].oneOf(Object.values(_enums.LinkType)),
+  link: _propTypes["default"].object,
+  text: _propTypes["default"].string.isRequired
+};
+InheritLinkButton.Type = _enums.LinkType;
 var _default = LinkButton;
 exports["default"] = _default;

package/lib/button/index.js

@@ -1,5 +1,7 @@
 "use strict";
 
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -15,6 +17,12 @@ Object.defineProperty(exports, "IconWithTextButton", {
     return _iconWithTextButton["default"];
   }
 });
+Object.defineProperty(exports, "InheritLinkButton", {
+  enumerable: true,
+  get: function get() {
+    return _link.InheritLinkButton;
+  }
+});
 Object.defineProperty(exports, "LinkButton", {
   enumerable: true,
   get: function get() {
@@ -57,10 +65,14 @@ var _textButton = _interopRequireDefault(require("./components/textButton"));
 
 var _toggleButton = _interopRequireDefault(require("./components/toggleButton"));
 
-var _link = _interopRequireDefault(require("./components/link"));
+var _link = _interopRequireWildcard(require("./components/link"));
 
 var _menuButton = _interopRequireDefault(require("./components/menuButton"));
 
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var _default = {
@@ -70,6 +82,7 @@ var _default = {
   TextButton: _textButton["default"],
   ToggleButton: _toggleButton["default"],
   LinkButton: _link["default"],
+  InheritLinkButton: _link.InheritLinkButton,
   MenuButton: _menuButton["default"]
 };
 exports["default"] = _default;

package/lib/button/stories/link.stories.js

@@ -1,20 +1,28 @@
 "use strict";
 
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.link = exports.disabledLink = exports["default"] = exports.changeTextComponent = void 0;
+exports.linkInParagraph = exports.link = exports.disabledLink = exports["default"] = exports.changeTextComponent = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
 var _getEnumArg = require("../../storybook/utils/get-enum-arg");
 
-var _link = _interopRequireDefault(require("../components/link"));
+var _link = _interopRequireWildcard(require("../components/link"));
 
 var _paragraph = require("../../text/paragraph");
 
 var _headline = require("../../text/headline");
 
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var _default = {
@@ -22,6 +30,7 @@ var _default = {
   component: _link["default"],
   argTypes: {
     type: (0, _getEnumArg.getRadioArg)(_link["default"].Type, _link["default"].Type.DEFAULT),
+    weight: (0, _getEnumArg.getRadioArg)(_link["default"].Weight, _link["default"].Weight.NORMAL),
     // textComponent is only for storybook showcase, not real props
     textComponent: {
       defaultValue: 'P2',
@@ -29,6 +38,19 @@ var _default = {
       control: {
         type: 'radio'
       }
+    },
+    // leftWord & rightWord is only for storybook showcase, not real props
+    leftWord: {
+      defaultValue: '連結左邊的文字',
+      control: {
+        type: 'text'
+      }
+    },
+    rightWord: {
+      defaultValue: '連結左邊的文字',
+      control: {
+        type: 'text'
+      }
     }
   }
 };
@@ -49,7 +71,7 @@ link.args = {
 };
 link.parameters = {
   controls: {
-    exclude: ['textComponent']
+    exclude: ['textComponent', 'leftWord', 'rightWord']
   }
 };
 
@@ -76,7 +98,7 @@ changeTextComponent.args = {
 };
 changeTextComponent.parameters = {
   controls: {
-    exclude: ['TextComponent']
+    exclude: ['TextComponent', 'leftWord', 'rightWord']
   }
 };
 var disabledLink = Template.bind({});
@@ -91,6 +113,28 @@ disabledLink.args = {
 };
 disabledLink.parameters = {
   controls: {
-    exclude: ['textComponent', 'disabled']
+    exclude: ['textComponent', 'disabled', 'leftWord', 'rightWord']
+  }
+};
+var StyledP1 = /*#__PURE__*/(0, _styledComponents["default"])(_paragraph.P1).withConfig({
+  displayName: "linkstories__StyledP1",
+  componentId: "sc-1i9kyc3-0"
+})(["display:unset;"]);
+
+var linkInParagraph = function linkInParagraph(args) {
+  return /*#__PURE__*/_react["default"].createElement(StyledP1, null, args.leftWord, /*#__PURE__*/_react["default"].createElement(_link.InheritLinkButton, args), args.rightWord);
+};
+
+exports.linkInParagraph = linkInParagraph;
+linkInParagraph.args = {
+  text: '文字',
+  type: _link["default"].Type.DEFAULT,
+  link: {
+    to: 'https://www.twreporter.org'
+  }
+};
+linkInParagraph.parameters = {
+  controls: {
+    exclude: ['textComponent', 'disabled', 'weight', 'TextComponent']
   }
 };

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/lib/text/paragraph.js

@@ -25,7 +25,7 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 
 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; }
 
-var defaultContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+var defaultContainer = /*#__PURE__*/_styledComponents["default"].p.withConfig({
   displayName: "paragraph__defaultContainer",
   componentId: "sc-1aejhao-0"
 })(["font-weight:", ";font-family:", ";line-height:150%;display:flex;align-items:center;"], function (props) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@twreporter/react-components",
-  "version": "8.21.0-rc.0",
+  "version": "8.21.0-rc.2",
   "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": "a7d72ecffd859bfa778c70cb8b5b4b3419838fd4"
+  "gitHead": "c246d988fe96568fd2ebf5cb6f0806e0f4bf924e"
 }