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

package/lib/material-icon.js

@@ -17,11 +17,11 @@ var StyledSymbol = /*#__PURE__*/_styledComponents["default"].span.withConfig({
   displayName: "material-icon__StyledSymbol",
   componentId: "sc-1mjrid5-0"
 })(["font-variation-settings:", ";font-size:", "px;font-weight:", ";"], function (props) {
-  return "\n    'FILL': ".concat(props.fill, ",\n    'wght': ").concat(props.weight, ",\n    'GRAD': ").concat(props.grade, ",\n    'opsz': ").concat(props.size, "\n  ");
+  return "\n    'FILL': ".concat(props.$fill, ",\n    'wght': ").concat(props.$weight, ",\n    'GRAD': ").concat(props.$grade, ",\n    'opsz': ").concat(props.$size, "\n  ");
 }, function (props) {
-  return props.size;
+  return props.$size;
 }, function (props) {
-  return props.weight;
+  return props.$weight;
 });
 
 var MeterialSymbol = function MeterialSymbol(_ref) {
@@ -37,10 +37,10 @@ var MeterialSymbol = function MeterialSymbol(_ref) {
   var className = 'material-symbols-outlined';
   return /*#__PURE__*/_react["default"].createElement(StyledSymbol, {
     className: className,
-    fill: fill ? '0' : '1',
-    weight: weight,
-    grade: grade,
-    size: size
+    $fill: fill ? '0' : '1',
+    $weight: weight,
+    $grade: grade,
+    $size: size
   }, icon);
 };
 

package/lib/mobile-member-role-card/index.js

@@ -45,7 +45,7 @@ var CardContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "mobile-member-role-card__CardContainer",
   componentId: "sc-1n1fg2v-0"
 })(["width:100%;max-width:320px;min-width:296px;border-radius:16px;box-shadow:0px 4px 4px rgba(0,0,0,0.05),inset 2px 2px 4px rgba(255,255,255,0.5),inset -2px -2px 2px rgba(0,0,0,0.15);aspect-ratio:1/1.6;background-color:", ";padding:24px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;display:flex;flex-direction:row;position:relative;"], function (props) {
-  return props.bgColor;
+  return props.$bgColor;
 });
 
 var LeftColumn = /*#__PURE__*/_styledComponents["default"].div.withConfig({
@@ -77,9 +77,9 @@ var MarkImgs = /*#__PURE__*/_styledComponents["default"].img.withConfig({
   displayName: "mobile-member-role-card__MarkImgs",
   componentId: "sc-1n1fg2v-6"
 })(["width:", ";height:", ";"], function (props) {
-  return CardMarkStyle[props.role].width;
+  return CardMarkStyle[props.$role].width;
 }, function (props) {
-  return CardMarkStyle[props.role].height;
+  return CardMarkStyle[props.$role].height;
 });
 
 var InfoContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
@@ -116,16 +116,16 @@ var P2TextContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "mobile-member-role-card__P2TextContainer",
   componentId: "sc-1n1fg2v-13"
 })(["color:", ";overflow-wrap:anywhere;#user-email::after{content:'", "';}"], function (props) {
-  return props.color;
+  return props.$color;
 }, function (props) {
-  return props.email;
+  return props.$email;
 });
 
 var StyledP1 = /*#__PURE__*/(0, _styledComponents["default"])(_paragraph.P1).withConfig({
   displayName: "mobile-member-role-card__StyledP1",
   componentId: "sc-1n1fg2v-14"
 })(["color:", ";line-height:125%;letter-spacing:1.6px;"], function (props) {
-  return props.color;
+  return props.$color;
 });
 
 var MobileMemberRoleCard = function MobileMemberRoleCard(_ref) {
@@ -151,13 +151,13 @@ var MobileMemberRoleCard = function MobileMemberRoleCard(_ref) {
   var titleUrl = "https://www.twreporter.org/assets/user-role-card/".concat(releaseBranch, "/").concat(role, "_title.svg");
   var markUrl = "https://www.twreporter.org/assets/user-role-card/".concat(releaseBranch, "/").concat(role, "_mark.png");
   return /*#__PURE__*/_react["default"].createElement(CardContainer, {
-    bgColor: CardBgColor[role]
+    $bgColor: CardBgColor[role]
   }, /*#__PURE__*/_react["default"].createElement(MarkContainer, null, /*#__PURE__*/_react["default"].createElement(MarkImgs, {
-    role: role,
+    $role: role,
     src: markUrl
   })), /*#__PURE__*/_react["default"].createElement(LeftColumn, null, /*#__PURE__*/_react["default"].createElement(P2TextContainer, {
-    color: CardP2TextColor[role],
-    email: email
+    $color: CardP2TextColor[role],
+    $email: email
   }, role !== _memberRole.MEMBER_ROLE.explorer && /*#__PURE__*/_react["default"].createElement(_paragraph.P2, {
     text: name
   }), /*#__PURE__*/_react["default"].createElement(_paragraph.P2, {
@@ -165,19 +165,19 @@ var MobileMemberRoleCard = function MobileMemberRoleCard(_ref) {
   })), /*#__PURE__*/_react["default"].createElement(InfoContainer, null, !hideInfo && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(TextContainer, null, /*#__PURE__*/_react["default"].createElement(StyledP3, {
     text: '閱讀篇數'
   }), /*#__PURE__*/_react["default"].createElement(Gray500BottomLine, null), /*#__PURE__*/_react["default"].createElement(StyledP1, {
-    color: CardP1TextColor[role],
+    $color: CardP1TextColor[role],
     weight: _paragraph.P1.Weight.BOLD,
     text: articleReadCount.toLocaleString('en-US')
   })), /*#__PURE__*/_react["default"].createElement(TextContainer, null, /*#__PURE__*/_react["default"].createElement(StyledP3, {
     text: "\u95B1\u8B80".concat(_readingTimeUnit.READING_TIME_UNIT_CARD_TEXT[articleReadingTimeUnit])
   }), /*#__PURE__*/_react["default"].createElement(Gray500BottomLine, null), /*#__PURE__*/_react["default"].createElement(StyledP1, {
-    color: CardP1TextColor[role],
+    $color: CardP1TextColor[role],
     weight: _paragraph.P1.Weight.BOLD,
     text: articleReadingTime > 99999 ? '99,999+' : articleReadingTime.toLocaleString('en-US')
   }))), /*#__PURE__*/_react["default"].createElement(TextContainer, null, /*#__PURE__*/_react["default"].createElement(StyledP3, {
     text: '加入日期'
   }), /*#__PURE__*/_react["default"].createElement(Gray500BottomLine, null), /*#__PURE__*/_react["default"].createElement(StyledP1, {
-    color: CardP1TextColor[role],
+    $color: CardP1TextColor[role],
     weight: _paragraph.P1.Weight.BOLD,
     text: joinDate
   })))), /*#__PURE__*/_react["default"].createElement(RightColumn, null, /*#__PURE__*/_react["default"].createElement(TitleContainer, null, /*#__PURE__*/_react["default"].createElement(TitleImg, {

package/lib/mobile-pop-up-modal.js

@@ -51,9 +51,9 @@ var Modal = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "mobile-pop-up-modal__Modal",
   componentId: "sc-1m2meeu-0"
 })(["height:", ";width:", ";position:fixed;top:0;z-index:", ";overflow-y:scroll;"], function (props) {
-  return props.height;
+  return props.$height;
 }, function (props) {
-  return props.width;
+  return props.$width;
 }, _zIndex["default"].popup);
 
 var MobileModal = /*#__PURE__*/function (_React$PureComponent) {
@@ -145,8 +145,8 @@ var MobileModal = /*#__PURE__*/function (_React$PureComponent) {
 
       var modalHeight = this.state.modalHeight;
       return /*#__PURE__*/_react["default"].createElement(Modal, _extends({
-        height: modalHeight,
-        width: modalWidth,
+        $height: modalHeight,
+        $width: modalWidth,
         ref: this.panel
       }, rest));
     }

package/lib/pagination/index.js

@@ -124,9 +124,9 @@ var PageNumberBox = /*#__PURE__*/(0, _styledComponents["default"])(Box).withConf
   displayName: "pagination__PageNumberBox",
   componentId: "sc-17bqftr-3"
 })(["border:solid 1px ", ";border-radius:50%;line-height:", "px;background-color:", ";> span{color:", ";}"], _color.colorSupportive.heavy, styles.btnBoxSize.desktop, function (props) {
-  return props.isCurrent ? _color.colorSupportive.heavy : 'transparent';
+  return props.$isCurrent ? _color.colorSupportive.heavy : 'transparent';
 }, function (props) {
-  return props.isCurrent ? _color.colorGrayscale.white : _color.colorSupportive.heavy;
+  return props.$isCurrent ? _color.colorGrayscale.white : _color.colorSupportive.heavy;
 });
 var EllipsisBox = /*#__PURE__*/(0, _styledComponents["default"])(Box).withConfig({
   displayName: "pagination__EllipsisBox",
@@ -136,7 +136,7 @@ var PrevNextBtn = /*#__PURE__*/(0, _styledComponents["default"])(Box).withConfig
   displayName: "pagination__PrevNextBtn",
   componentId: "sc-17bqftr-5"
 })(["visibility:", ";padding:", ";cursor:pointer;path{stroke:", ";}"], function (props) {
-  return props.isHidden ? 'hidden' : 'visible';
+  return props.$isHidden ? 'hidden' : 'visible';
 }, (0, _css.arrayToCssShorthand)(styles.prevNextBtnPadding), _color.colorSupportive.heavy);
 /*
 Pages Array:
@@ -184,7 +184,7 @@ var Pagination = /*#__PURE__*/function (_React$PureComponent) {
     value: function _buildPageBox(index, currentPage) {
       return /*#__PURE__*/_react["default"].createElement(PageNumberBox, {
         key: "page-num-box-".concat(index),
-        isCurrent: index === currentPage,
+        $isCurrent: index === currentPage,
         onClick: this.props.handleClickPage
       }, /*#__PURE__*/_react["default"].createElement("span", null, index));
     }
@@ -319,11 +319,11 @@ var Pagination = /*#__PURE__*/function (_React$PureComponent) {
       }, /*#__PURE__*/_react["default"].createElement(Boxes, null, /*#__PURE__*/_react["default"].createElement(PrevNextBtn, {
         key: "prev-btn",
         onClick: handleClickPrev,
-        isHidden: belowFirstPage
+        $isHidden: belowFirstPage
       }, /*#__PURE__*/_react["default"].createElement(PageUpIcon, null)), /*#__PURE__*/_react["default"].createElement(_rwd.TabletAndAbove, null, pagesArrayJSX), /*#__PURE__*/_react["default"].createElement(_rwd.MobileOnly, null, mobilePagesArrayJSX), /*#__PURE__*/_react["default"].createElement(PrevNextBtn, {
         key: "next-btn",
         onClick: handleClickNext,
-        isHidden: aboveFinalPage
+        $isHidden: aboveFinalPage
       }, /*#__PURE__*/_react["default"].createElement(PageDownIcon, null))));
     }
   }]);

package/lib/snack-bar/components/snack-bar.js

@@ -28,9 +28,9 @@ var SnackBarContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig
   displayName: "snack-bar__SnackBarContainer",
   componentId: "roennm-0"
 })(["width:fit-content;padding:8px 16px;box-shadow:0px 0px 24px rgba(0,0,0,0.1);border-radius:4px;display:flex;align-items:center;color:", ";background-color:", ";"], function (props) {
-  return props.color;
+  return props.$color;
 }, function (props) {
-  return props.bgColor;
+  return props.$bgColor;
 });
 
 var SnackBar = function SnackBar(_ref) {
@@ -44,8 +44,8 @@ var SnackBar = function SnackBar(_ref) {
       bgColor = _getSnackBarTheme.bgColor;
 
   return /*#__PURE__*/_react["default"].createElement(SnackBarContainer, {
-    color: color,
-    bgColor: bgColor
+    $color: color,
+    $bgColor: bgColor
   }, /*#__PURE__*/_react["default"].createElement(_rwd.MobileOnly, null, /*#__PURE__*/_react["default"].createElement(_paragraph.P3, {
     text: text
   })), /*#__PURE__*/_react["default"].createElement(_rwd.TabletAndAbove, null, /*#__PURE__*/_react["default"].createElement(_paragraph.P2, {

package/lib/snack-bar/stories/snackBar.stories.js

@@ -56,7 +56,7 @@ var SnackBarContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig
   displayName: "snackBarstories__SnackBarContainer",
   componentId: "sc-1vgclkn-1"
 })(["margin-bottom:4px;transition:opacity 1s;opacity:", ";"], function (props) {
-  return props.showSnackBar ? 1 : 0;
+  return props.$showSnackBar ? 1 : 0;
 });
 
 var ClickToShowSnackBar = function ClickToShowSnackBar(_ref) {
@@ -79,7 +79,7 @@ var ClickToShowSnackBar = function ClickToShowSnackBar(_ref) {
   };
 
   return /*#__PURE__*/_react["default"].createElement(Container, null, /*#__PURE__*/_react["default"].createElement(SnackBarContainer, {
-    showSnackBar: showSnackBar
+    $showSnackBar: showSnackBar
   }, /*#__PURE__*/_react["default"].createElement(_snackBar["default"], {
     text: snackBarText
   })), /*#__PURE__*/_react["default"].createElement(_button.PillButton, {

package/lib/text/headline.js

@@ -42,37 +42,37 @@ var H1Container = /*#__PURE__*/(0, _styledComponents["default"])(DefaultContaine
   displayName: "headline__H1Container",
   componentId: "axdp97-1"
 })(["line-height:125%;font-size:36px;font-family:", ";", ""], function (props) {
-  return props.fontFamily;
+  return props.$fontFamily;
 }, _mediaQuery["default"].tabletAndBelow(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    font-size: 28px;\n  "]))));
 var H2Container = /*#__PURE__*/(0, _styledComponents["default"])(DefaultContainer).withConfig({
   displayName: "headline__H2Container",
   componentId: "axdp97-2"
 })(["line-height:125%;font-size:32px;font-family:", ";", ""], function (props) {
-  return props.fontFamily;
+  return props.$fontFamily;
 }, _mediaQuery["default"].tabletAndBelow(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    font-size: 24px;\n  "]))));
 var H3Container = /*#__PURE__*/(0, _styledComponents["default"])(DefaultContainer).withConfig({
   displayName: "headline__H3Container",
   componentId: "axdp97-3"
 })(["line-height:150%;font-size:28px;font-family:", ";", ""], function (props) {
-  return props.fontFamily;
+  return props.$fontFamily;
 }, _mediaQuery["default"].tabletAndBelow(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    font-size: 22px;\n  "]))));
 var H4Container = /*#__PURE__*/(0, _styledComponents["default"])(DefaultContainer).withConfig({
   displayName: "headline__H4Container",
   componentId: "axdp97-4"
 })(["line-height:150%;font-size:22px;font-family:", ";", ""], function (props) {
-  return props.fontFamily;
+  return props.$fontFamily;
 }, _mediaQuery["default"].tabletAndBelow(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    font-size: 18px;\n  "]))));
 var H5Container = /*#__PURE__*/(0, _styledComponents["default"])(DefaultContainer).withConfig({
   displayName: "headline__H5Container",
   componentId: "axdp97-5"
 })(["line-height:150%;font-size:18px;font-family:", ";", ""], function (props) {
-  return props.fontFamily;
+  return props.$fontFamily;
 }, _mediaQuery["default"].tabletAndBelow(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    font-size: 17px;\n  "]))));
 var H6Container = /*#__PURE__*/(0, _styledComponents["default"])(DefaultContainer).withConfig({
   displayName: "headline__H6Container",
   componentId: "axdp97-6"
 })(["line-height:150%;font-size:16px;font-family:", ";", ""], function (props) {
-  return props.fontFamily;
+  return props.$fontFamily;
 }, _mediaQuery["default"].tabletAndBelow(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    font-size: 16px;\n  "]))));
 
 var withContainer = function withContainer(HeadlineContainer) {
@@ -87,7 +87,7 @@ var withContainer = function withContainer(HeadlineContainer) {
 
     var fontFamily = _headlineType.TYPE_FONT_FAMILY[type];
     return /*#__PURE__*/_react["default"].createElement(HeadlineContainer, _extends({
-      fontFamily: fontFamily,
+      $fontFamily: fontFamily,
       className: className
     }, props), text);
   };

package/lib/text/paragraph.js

@@ -29,7 +29,7 @@ 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;margin-block-start:0px;margin-block-end:0px;"], function (props) {
-  return _font.fontWeight[props.weight];
+  return _font.fontWeight[props.$weight];
 }, _font.fontFamily["default"]);
 
 var P1Container = /*#__PURE__*/(0, _styledComponents["default"])(defaultContainer).withConfig({
@@ -61,7 +61,7 @@ var withContainer = function withContainer(ParagraphContainer) {
         props = _objectWithoutProperties(_ref, _excluded);
 
     return /*#__PURE__*/_react["default"].createElement(ParagraphContainer, _extends({
-      weight: weight,
+      $weight: weight,
       className: className
     }, props), text, children);
   };

package/lib/title-bar/components/tab.js

@@ -76,7 +76,7 @@ var MobileTabContainer = /*#__PURE__*/_styledComponents["default"].div.withConfi
   displayName: "tab__MobileTabContainer",
   componentId: "ywb8e-3"
 })(["display:flex;overflow:scroll;scrollbar-width:none;&::-webkit-scrollbar{display:none;}-webkit-mask-image:", ";"], function (props) {
-  return props.showGradientMask ? gradientMask : 'none';
+  return props.$showGradientMask ? gradientMask : 'none';
 });
 
 var TabItem = function TabItem(_ref) {
@@ -165,7 +165,7 @@ var MobileTab = function MobileTab(_ref2) {
   }, [activeTabIndex]);
   return /*#__PURE__*/_react["default"].createElement(MobileTabContainer, {
     ref: ref,
-    showGradientMask: showGradientMask
+    $showGradientMask: showGradientMask
   }, tabJSX);
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@twreporter/react-components",
-  "version": "9.0.0-rc.0",
+  "version": "9.0.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.21.0-rc.2",
-    "@twreporter/redux": "^8.0.0-rc.0",
+    "@twreporter/core": "^1.21.0-rc.3",
+    "@twreporter/redux": "^8.0.0-rc.1",
     "fontfaceobserver-es": "^3.3.3",
     "hoist-non-react-statics": "^2.3.1",
     "lodash": "^4.0.0",
@@ -27,7 +27,8 @@
     "react-router-dom": "^5.1.2",
     "react-transition-group": "^4.4.5",
     "react-waypoint": "^9.0.2",
-    "styled-components": "^4.0.0"
+    "styled-components": "^6.0.0",
+    "stylis": "^4.0.0"
   },
   "files": [
     "lib"
@@ -51,5 +52,5 @@
     "react-dom": "^18.2.0",
     "storybook": "^7.5.2"
   },
-  "gitHead": "b2608f57ee45ea3dd8d0e97329b8cd0cbb52c625"
+  "gitHead": "536cda99a9af7fe0d7404a8fcf8db55c762b8bb1"
 }