@twreporter/react-components 8.17.0-rc.3 → 8.17.0-rc.5

package/CHANGELOG.md

@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [8.17.0-rc.5](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-components@8.17.0-rc.4...@twreporter/react-components@8.17.0-rc.5) (2023-04-17)
+
+
+### Bug Fixes
+
+* article card list style ([d4806cd](https://github.com/twreporter/twreporter-npm-packages/commit/d4806cdded043777ba184f02810e02a0d4ef2809))
+
+
+
+
+
+# [8.17.0-rc.4](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-components@8.17.0-rc.3...@twreporter/react-components@8.17.0-rc.4) (2023-04-14)
+
+**Note:** Version bump only for package @twreporter/react-components
+
+
+
+
+
 # [8.17.0-rc.3](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-components@8.17.0-rc.2...@twreporter/react-components@8.17.0-rc.3) (2023-04-13)
 
 

package/lib/card/components/article-card.js

@@ -29,7 +29,7 @@ var _size = require("@twreporter/core/lib/constants/size");
 
 var _releaseBranch = require("@twreporter/core/lib/constants/release-branch");
 
-var _width, _height, _marginLeft;
+var _width, _height, _marginLeft, _marginTop, _marginBottom;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -40,6 +40,12 @@ var imageStyle = {
   height: (_height = {}, _defineProperty(_height, _size.SIZE.S, '72px'), _defineProperty(_height, _size.SIZE.L, '144px'), _height),
   marginLeft: (_marginLeft = {}, _defineProperty(_marginLeft, _size.SIZE.S, '8px'), _defineProperty(_marginLeft, _size.SIZE.L, '32px'), _marginLeft)
 };
+var bookmarkStyle = {
+  marginTop: (_marginTop = {}, _defineProperty(_marginTop, _size.SIZE.S, '16px'), _defineProperty(_marginTop, _size.SIZE.L, '8px'), _marginTop)
+};
+var metaStyle = {
+  marginBottom: (_marginBottom = {}, _defineProperty(_marginBottom, _size.SIZE.S, '4px'), _defineProperty(_marginBottom, _size.SIZE.L, '8px'), _marginBottom)
+};
 
 var FlexGroup = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "article-card__FlexGroup",
@@ -58,19 +64,23 @@ var FlexSpaceBetween = /*#__PURE__*/(0, _styledComponents["default"])(FlexGroup)
 var Meta = /*#__PURE__*/(0, _styledComponents["default"])(FlexGroup).withConfig({
   displayName: "article-card__Meta",
   componentId: "sc-9196c7-3"
-})(["color:", ";flex-direction:row;align-items:center;margin-bottom:8px;& > div{margin-right:8px;}&:last-child{margin-right:0;}", ""], _color.colorGrayscale.gray600, function (props) {
+})(["color:", ";flex-direction:row;align-items:center;margin-bottom:", ";& > div{margin-right:8px;}&:last-child{margin-right:0;}", ""], _color.colorGrayscale.gray600, function (props) {
+  return metaStyle.marginBottom[props.size];
+}, function (props) {
   return props.hide ? "display: none;" : '';
 });
 
 var DescContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "article-card__DescContainer",
   componentId: "sc-9196c7-4"
-})(["margin-top:8px;div{display:-webkit-box;text-overflow:ellipsis;overflow:hidden;line-clamp:3;-webkit-line-clamp:3;-webkit-box-orient:vertical;}"]);
+})(["color:", ";margin-top:8px;div{display:-webkit-box;text-overflow:ellipsis;overflow:hidden;line-clamp:3;-webkit-line-clamp:3;-webkit-box-orient:vertical;}"], _color.colorGrayscale.gray800);
 
 var BookmarkContainer = /*#__PURE__*/(0, _styledComponents["default"])(FlexGroup).withConfig({
   displayName: "article-card__BookmarkContainer",
   componentId: "sc-9196c7-5"
-})(["margin-top:8px;align-self:flex-end;"]);
+})(["align-self:flex-end;margin-top:", ";"], function (props) {
+  return bookmarkStyle.marginTop[props.size];
+});
 var ImageContainer = /*#__PURE__*/(0, _styledComponents["default"])(FlexGroup).withConfig({
   displayName: "article-card__ImageContainer",
   componentId: "sc-9196c7-6"
@@ -81,6 +91,14 @@ var ImageContainer = /*#__PURE__*/(0, _styledComponents["default"])(FlexGroup).w
 }, function (props) {
   return imageStyle.marginLeft[props.size];
 });
+var LeftColumn = /*#__PURE__*/(0, _styledComponents["default"])(FlexGroupColumn).withConfig({
+  displayName: "article-card__LeftColumn",
+  componentId: "sc-9196c7-7"
+})(["flex:1;"]);
+var TitleText = /*#__PURE__*/(0, _styledComponents["default"])(_headline.H4).withConfig({
+  displayName: "article-card__TitleText",
+  componentId: "sc-9196c7-8"
+})(["color:", ";"], _color.colorGrayscale.gray800);
 
 var ArticleCard = function ArticleCard(_ref) {
   var _ref$title = _ref.title,
@@ -101,7 +119,7 @@ var ArticleCard = function ArticleCard(_ref) {
       _ref$releaseBranch = _ref.releaseBranch,
       releaseBranch = _ref$releaseBranch === void 0 ? _releaseBranch.BRANCH.master : _ref$releaseBranch;
   var hideMeta = !category && !date;
-  var titleJSX = title ? /*#__PURE__*/_react["default"].createElement(_headline.H4, {
+  var titleJSX = title ? /*#__PURE__*/_react["default"].createElement(TitleText, {
     text: title,
     type: "article"
   }) : null;
@@ -131,11 +149,13 @@ var ArticleCard = function ArticleCard(_ref) {
     iconComponent: bookmarkIcon
   });
   var bookmarkJSX = isBookmarked ? /*#__PURE__*/_react["default"].createElement(BookmarkContainer, {
-    onClick: toggleBookmark
+    onClick: toggleBookmark,
+    size: size
   }, bookmarkButton) : null;
 
   var metaJSX = /*#__PURE__*/_react["default"].createElement(Meta, {
-    hide: hideMeta
+    hide: hideMeta,
+    size: size
   }, categoryJSX, dateJSX);
 
   var imageJSX = /*#__PURE__*/_react["default"].createElement(ImageContainer, {
@@ -151,7 +171,7 @@ var ArticleCard = function ArticleCard(_ref) {
   } // L size
 
 
-  return /*#__PURE__*/_react["default"].createElement(FlexSpaceBetween, null, /*#__PURE__*/_react["default"].createElement(FlexGroupColumn, null, metaJSX, /*#__PURE__*/_react["default"].createElement(FlexGroupColumn, null, titleJSX, /*#__PURE__*/_react["default"].createElement(DescContainer, null, descriptionJSX), bookmarkJSX)), imageJSX);
+  return /*#__PURE__*/_react["default"].createElement(FlexSpaceBetween, null, /*#__PURE__*/_react["default"].createElement(LeftColumn, null, metaJSX, /*#__PURE__*/_react["default"].createElement(FlexGroupColumn, null, titleJSX, /*#__PURE__*/_react["default"].createElement(DescContainer, null, descriptionJSX), bookmarkJSX)), imageJSX);
 };
 
 ArticleCard.propTypes = {

package/lib/checkbox/index.js

@@ -23,6 +23,9 @@ 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 disableColor = _color.colorGrayscale.gray400;
+var activeColor = _color.colorGrayscale.gray800;
+
 var Container = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "checkbox__Container",
   componentId: "vzoxib-0"
@@ -31,13 +34,29 @@ var Container = /*#__PURE__*/_styledComponents["default"].div.withConfig({
 var Input = /*#__PURE__*/_styledComponents["default"].input.withConfig({
   displayName: "checkbox__Input",
   componentId: "vzoxib-1"
-})(["width:16px;height:16px;border:solid 1px;border-radius:2px;accent-color:", ";margin-left:0px;margin-right:8px;&:enabled:not(:checked){border-color:", ";background:rgba(0,0,0,0);-webkit-appearance:none;-moz-appearance:none;appearance:none;}"], _color.colorGrayscale.gray800, _color.colorGrayscale.gray800);
+})(["width:0;height:0;opacity:0;z-index:-1;"]);
+
+var Label = /*#__PURE__*/_styledComponents["default"].label.withConfig({
+  displayName: "checkbox__Label",
+  componentId: "vzoxib-2"
+})(["display:block;position:relative;padding-left:25px;"]);
+
+var Indicator = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "checkbox__Indicator",
+  componentId: "vzoxib-3"
+})(["width:16px;height:16px;background:", ";position:absolute;top:0px;left:0px;border-color:", ";border-radius:2px;box-shadow:0 0 0 1px ", ";margin:3px 8px 0px 0px;&::after{content:'';position:absolute;display:none;}", ":checked + &::after{display:block;left:5px;top:0px;width:4px;height:10px;border:solid white;border-width:0 2px 2px 0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);}"], function (props) {
+  return props.value ? props.disabled ? disableColor : activeColor : 'rgba(0, 0, 0, 0)';
+}, function (props) {
+  return props.disabled ? disableColor : activeColor;
+}, function (props) {
+  return props.disabled ? disableColor : activeColor;
+}, Input);
 
 var ColorP1 = /*#__PURE__*/(0, _styledComponents["default"])(_paragraph.P1).withConfig({
   displayName: "checkbox__ColorP1",
-  componentId: "vzoxib-2"
+  componentId: "vzoxib-4"
 })(["color:", ";"], function (props) {
-  return props.disabled ? _color.colorGrayscale.gray400 : _color.colorGrayscale.gray800;
+  return props.disabled ? disableColor : activeColor;
 });
 
 var Checkbox = function Checkbox(_ref) {
@@ -55,15 +74,18 @@ var Checkbox = function Checkbox(_ref) {
     onChange && onChange(e);
   };
 
-  return /*#__PURE__*/_react["default"].createElement(Container, props, /*#__PURE__*/_react["default"].createElement(Input, {
+  return /*#__PURE__*/_react["default"].createElement(Container, props, /*#__PURE__*/_react["default"].createElement(Label, null, label && /*#__PURE__*/_react["default"].createElement(ColorP1, {
+    text: label,
+    disabled: disabled
+  }), /*#__PURE__*/_react["default"].createElement(Input, {
     type: "checkbox",
     checked: value,
     disabled: disabled,
     onChange: handleChange
-  }), label && /*#__PURE__*/_react["default"].createElement(ColorP1, {
-    text: label,
+  }), /*#__PURE__*/_react["default"].createElement(Indicator, {
+    value: value,
     disabled: disabled
-  }));
+  })));
 };
 
 exports.Checkbox = Checkbox;

package/lib/listing-page/components/card-list.js

@@ -19,6 +19,8 @@ var _divider = _interopRequireDefault(require("../../divider"));
 
 var _customizedLink = _interopRequireDefault(require("../../customized-link"));
 
+var _rwd = require("../../rwd");
+
 var _mockupSpec = _interopRequireDefault(require("../constants/mockup-spec"));
 
 var _entityPath = _interopRequireDefault(require("@twreporter/core/lib/constants/entity-path"));
@@ -39,7 +41,7 @@ var _get = _interopRequireDefault(require("lodash/get"));
 
 var _map = _interopRequireDefault(require("lodash/map"));
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -52,36 +54,30 @@ var _ = {
   get: _get["default"],
   map: _map["default"]
 };
-
-var DesktopOnly = /*#__PURE__*/_styledComponents["default"].div.withConfig({
-  displayName: "card-list__DesktopOnly",
+var Card = /*#__PURE__*/(0, _styledComponents["default"])(_card.ArticleCard).withConfig({
+  displayName: "card-list__Card",
   componentId: "yvf001-0"
-})(["display:none;", ""], _mediaQuery["default"].desktopAndAbove(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    display: flex;\n  "]))));
-
-var MobileOnly = /*#__PURE__*/_styledComponents["default"].div.withConfig({
-  displayName: "card-list__MobileOnly",
-  componentId: "yvf001-1"
-})(["display:none;", ""], _mediaQuery["default"].tabletAndBelow(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    display: flex;\n  "]))));
+})(["width:100%;"]);
 
 var Container = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "card-list__Container",
-  componentId: "yvf001-2"
+  componentId: "yvf001-1"
 })(["display:flex;flex-direction:column;a{color:inherit;text-decoration:none;}"]);
 
 var Item = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "card-list__Item",
-  componentId: "yvf001-3"
-})(["margin-bottom:24px;&:hover{opacity:0.7;}&:last-child{margin-bottom:0;}width:100%;", ""], _mediaQuery["default"].mobileOnly(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    width: ", "%;\n  "])), _mockupSpec["default"].mobile.cardWidth / _mockupSpec["default"].mobile.maxWidth * 100));
+  componentId: "yvf001-2"
+})(["margin-bottom:24px;&:hover{opacity:0.7;}&:last-child{margin-bottom:0;}width:100%;", ""], _mediaQuery["default"].mobileOnly(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    width: ", "%;\n  "])), _mockupSpec["default"].mobile.cardWidth / _mockupSpec["default"].mobile.maxWidth * 100));
 
 var StyledDivider = /*#__PURE__*/(0, _styledComponents["default"])(_divider["default"]).withConfig({
   displayName: "card-list__StyledDivider",
-  componentId: "yvf001-4"
+  componentId: "yvf001-3"
 })(["margin-top:24px;"]);
 
 var FlexItem = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "card-list__FlexItem",
-  componentId: "yvf001-5"
-})(["width:", "px;margin:0 auto;display:flex;justify-content:flex-start;align-items:flex-start;flex-wrap:wrap;", " ", " ", ""], _mockupSpec["default"].hd.maxWidth, _mediaQuery["default"].desktopOnly(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    width: ", "px;\n  "])), _mockupSpec["default"].desktop.maxWidth), _mediaQuery["default"].tabletOnly(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    width: ", "px;\n  "])), _mockupSpec["default"].tablet.maxWidth), _mediaQuery["default"].mobileOnly(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    width: 100%;\n    justify-content: center;\n  "]))));
+  componentId: "yvf001-4"
+})(["width:", "px;margin:0 auto;display:flex;justify-content:flex-start;align-items:flex-start;flex-wrap:wrap;", " ", " ", ""], _mockupSpec["default"].hd.maxWidth, _mediaQuery["default"].desktopOnly(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    width: ", "px;\n  "])), _mockupSpec["default"].desktop.maxWidth), _mediaQuery["default"].tabletOnly(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    width: ", "px;\n  "])), _mockupSpec["default"].tablet.maxWidth), _mediaQuery["default"].mobileOnly(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    width: 100%;\n    justify-content: center;\n  "]))));
 
 var Content = (0, _isFetchingWrapper["default"])(FlexItem);
 
@@ -138,9 +134,9 @@ var CardList = function CardList(_ref) {
     };
     return /*#__PURE__*/_react["default"].createElement(Item, {
       key: id
-    }, /*#__PURE__*/_react["default"].createElement(_customizedLink["default"], link, /*#__PURE__*/_react["default"].createElement(DesktopOnly, null, /*#__PURE__*/_react["default"].createElement(_card.ArticleCard, _extends({}, articleCardProps, {
+    }, /*#__PURE__*/_react["default"].createElement(_customizedLink["default"], link, /*#__PURE__*/_react["default"].createElement(_rwd.DesktopOnly, null, /*#__PURE__*/_react["default"].createElement(Card, _extends({}, articleCardProps, {
       size: _size.SIZE.L
-    }))), /*#__PURE__*/_react["default"].createElement(MobileOnly, null, /*#__PURE__*/_react["default"].createElement(_card.ArticleCard, _extends({}, articleCardProps, {
+    }))), /*#__PURE__*/_react["default"].createElement(_rwd.MobileOnly, null, /*#__PURE__*/_react["default"].createElement(Card, _extends({}, articleCardProps, {
       size: _size.SIZE.S
     }))), /*#__PURE__*/_react["default"].createElement(StyledDivider, null)));
   });

package/lib/listing-page/stories/cardList.stories.js

@@ -45,6 +45,15 @@ card.args = {
       description: 'test'
     },
     slug: 'this-is-a-test-article'
+  }, {
+    id: '12347',
+    title: '文章標題',
+    og_description: '文章描述',
+    published_date: '2023-02-12T16:00:00Z',
+    hero_image: {
+      description: 'test'
+    },
+    slug: 'this-is-a-test-article-3'
   }, {
     id: '12346',
     title: '文章標題文章標題文章標題文章標題文章標題文章標題文章標題文章標題',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@twreporter/react-components",
-  "version": "8.17.0-rc.3",
+  "version": "8.17.0-rc.5",
   "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": "278cbf7be48ece22befc99d4900a835f9f13c911"
+  "gitHead": "87ae1a12723603046ee8c9f85d02ef9b97d4627a"
 }