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

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 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)
 
 

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/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.1",
+  "version": "8.21.0-rc.2",
   "main": "lib/index.js",
   "repository": "https://github.com/twreporter/twreporter-npm-packages.git",
   "author": "twreporter <developer@twreporter.org>",
@@ -44,5 +44,5 @@
     "babel-loader": "^8.2.4",
     "chromatic": "^6.5.4"
   },
-  "gitHead": "aa00452ea5c3557c71865aa121dfa630f84e6a04"
+  "gitHead": "c246d988fe96568fd2ebf5cb6f0806e0f4bf924e"
 }