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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/lib/mobile-member-role-card/index.js +95 -57
  3. package/lib/mobile-member-role-card/stories/member-role-card.stories.js +9 -3
  4. package/package.json +4 -4
package/CHANGELOG.md CHANGED
@@ -3,6 +3,22 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ # [8.21.0-rc.3](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-components@8.21.0-rc.2...@twreporter/react-components@8.21.0-rc.3) (2023-11-13)
7
+
8
+
9
+ ### Bug Fixes
10
+
11
+ * use Object.freeze and use en-US ([e4ff2a0](https://github.com/twreporter/twreporter-npm-packages/commit/e4ff2a0dda08003eb762d3009b6670b6c84cbcf1))
12
+
13
+
14
+ ### Features
15
+
16
+ * new moblie member role card ([2e01669](https://github.com/twreporter/twreporter-npm-packages/commit/2e01669144c072d5bd89d88fe68b97d69e8b6e6f))
17
+
18
+
19
+
20
+
21
+
6
22
  # [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)
7
23
 
8
24
 
package/lib/mobile-member-role-card/index.js CHANGED
@@ -17,48 +17,51 @@ var _color = require("@twreporter/core/lib/constants/color");
17
17
 
18
18
  var _memberRole = require("@twreporter/core/lib/constants/member-role");
19
19
 
20
+ var _readingTimeUnit = require("@twreporter/core/lib/constants/reading-time-unit");
21
+
20
22
  var _paragraph = require("../text/paragraph");
21
23
 
22
- var _CardBgColor, _CardTextColor, _CardMarkStyle;
24
+ var _CardBgColor, _CardP2TextColor, _CardP1TextColor, _CardMarkStyle;
23
25
 
24
26
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
25
27
 
26
28
  function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
27
29
 
28
30
  var CardBgColor = (_CardBgColor = {}, _defineProperty(_CardBgColor, _memberRole.MEMBER_ROLE.explorer, _color.colorGrayscale.white), _defineProperty(_CardBgColor, _memberRole.MEMBER_ROLE.action_taker, _color.colorGrayscale.gray200), _defineProperty(_CardBgColor, _memberRole.MEMBER_ROLE.trailblazer, _color.colorGrayscale.gray900), _CardBgColor);
29
- var CardTextColor = (_CardTextColor = {}, _defineProperty(_CardTextColor, _memberRole.MEMBER_ROLE.explorer, _color.colorGrayscale.gray800), _defineProperty(_CardTextColor, _memberRole.MEMBER_ROLE.action_taker, _color.colorGrayscale.gray800), _defineProperty(_CardTextColor, _memberRole.MEMBER_ROLE.trailblazer, _color.colorGrayscale.white), _CardTextColor);
31
+ var CardP2TextColor = (_CardP2TextColor = {}, _defineProperty(_CardP2TextColor, _memberRole.MEMBER_ROLE.explorer, _color.colorGrayscale.gray700), _defineProperty(_CardP2TextColor, _memberRole.MEMBER_ROLE.action_taker, _color.colorGrayscale.gray700), _defineProperty(_CardP2TextColor, _memberRole.MEMBER_ROLE.trailblazer, _color.colorGrayscale.gray200), _CardP2TextColor);
32
+ var CardP1TextColor = (_CardP1TextColor = {}, _defineProperty(_CardP1TextColor, _memberRole.MEMBER_ROLE.explorer, _color.colorGrayscale.gray800), _defineProperty(_CardP1TextColor, _memberRole.MEMBER_ROLE.action_taker, _color.colorGrayscale.gray800), _defineProperty(_CardP1TextColor, _memberRole.MEMBER_ROLE.trailblazer, _color.colorGrayscale.white), _CardP1TextColor);
30
33
  var CardMarkStyle = (_CardMarkStyle = {}, _defineProperty(_CardMarkStyle, _memberRole.MEMBER_ROLE.explorer, {
31
- width: '193px',
32
- height: '120px'
34
+ width: '214px',
35
+ height: '343px'
33
36
  }), _defineProperty(_CardMarkStyle, _memberRole.MEMBER_ROLE.action_taker, {
34
- width: '193px',
35
- height: '157px'
37
+ width: '208px',
38
+ height: '307px'
36
39
  }), _defineProperty(_CardMarkStyle, _memberRole.MEMBER_ROLE.trailblazer, {
37
- width: '166px',
38
- height: '196px'
40
+ width: '219px',
41
+ height: '328px'
39
42
  }), _CardMarkStyle);
40
43
 
41
44
  var CardContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
42
45
  displayName: "mobile-member-role-card__CardContainer",
43
46
  componentId: "sc-1n1fg2v-0"
44
- })(["max-width:320px;width:100%;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;"], function (props) {
47
+ })(["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) {
45
48
  return props.bgColor;
46
49
  });
47
50
 
48
- var RelativeDiv = /*#__PURE__*/_styledComponents["default"].div.withConfig({
49
- displayName: "mobile-member-role-card__RelativeDiv",
51
+ var LeftColumn = /*#__PURE__*/_styledComponents["default"].div.withConfig({
52
+ displayName: "mobile-member-role-card__LeftColumn",
50
53
  componentId: "sc-1n1fg2v-1"
51
- })(["position:relative;width:100%;height:100%;display:flex;justify-content:space-between;"]);
54
+ })(["width:100%;height:100%;margin-right:16px;display:flex;flex-direction:column;justify-content:space-between;"]);
52
55
 
53
- var FlexContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
54
- displayName: "mobile-member-role-card__FlexContainer",
56
+ var RightColumn = /*#__PURE__*/_styledComponents["default"].div.withConfig({
57
+ displayName: "mobile-member-role-card__RightColumn",
55
58
  componentId: "sc-1n1fg2v-2"
56
- })(["display:flex;flex-direction:column;height:100%;"]);
59
+ })(["width:42px;"]);
57
60
 
58
61
  var LogoContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
59
62
  displayName: "mobile-member-role-card__LogoContainer",
60
63
  componentId: "sc-1n1fg2v-3"
61
- })([""]);
64
+ })(["width:100%;display:flex;justify-content:center;align-items:end;"]);
62
65
 
63
66
  var LogoImg = /*#__PURE__*/_styledComponents["default"].img.withConfig({
64
67
  displayName: "mobile-member-role-card__LogoImg",
@@ -68,7 +71,7 @@ var LogoImg = /*#__PURE__*/_styledComponents["default"].img.withConfig({
68
71
  var MarkContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
69
72
  displayName: "mobile-member-role-card__MarkContainer",
70
73
  componentId: "sc-1n1fg2v-5"
71
- })(["flex:1;display:flex;justify-content:start;align-items:center;"]);
74
+ })(["position:absolute;left:0;top:0;"]);
72
75
 
73
76
  var MarkImgs = /*#__PURE__*/_styledComponents["default"].img.withConfig({
74
77
  displayName: "mobile-member-role-card__MarkImgs",
@@ -79,24 +82,49 @@ var MarkImgs = /*#__PURE__*/_styledComponents["default"].img.withConfig({
79
82
  return CardMarkStyle[props.role].height;
80
83
  });
81
84
 
82
- var DataContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
83
- displayName: "mobile-member-role-card__DataContainer",
85
+ var InfoContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
86
+ displayName: "mobile-member-role-card__InfoContainer",
84
87
  componentId: "sc-1n1fg2v-7"
85
- })([""]);
88
+ })(["display:flex;flex-direction:column;gap:10px;"]);
86
89
 
87
90
  var TextContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
88
91
  displayName: "mobile-member-role-card__TextContainer",
89
92
  componentId: "sc-1n1fg2v-8"
90
- })(["color:", ";padding-bottom:", "px;overflow-wrap:anywhere;"], function (props) {
91
- return props.color;
92
- }, function (props) {
93
- return props.paddingBottom || 0;
94
- });
93
+ })(["display:flex;flex-direction:row;justify-content:space-between;"]);
94
+
95
+ var TitleContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
96
+ displayName: "mobile-member-role-card__TitleContainer",
97
+ componentId: "sc-1n1fg2v-9"
98
+ })(["height:100%;display:flex;flex-direction:column;justify-content:space-between;"]);
95
99
 
96
100
  var TitleImg = /*#__PURE__*/_styledComponents["default"].img.withConfig({
97
101
  displayName: "mobile-member-role-card__TitleImg",
98
- componentId: "sc-1n1fg2v-9"
99
- })(["position:relative;top:0;right:0;height:100%;"]);
102
+ componentId: "sc-1n1fg2v-10"
103
+ })(["width:100%;"]);
104
+
105
+ var P3Gray500 = /*#__PURE__*/(0, _styledComponents["default"])(_paragraph.P3).withConfig({
106
+ displayName: "mobile-member-role-card__P3Gray500",
107
+ componentId: "sc-1n1fg2v-11"
108
+ })(["color:", ";"], _color.colorGrayscale.gray500);
109
+
110
+ var Gray500BottomLine = /*#__PURE__*/_styledComponents["default"].div.withConfig({
111
+ displayName: "mobile-member-role-card__Gray500BottomLine",
112
+ componentId: "sc-1n1fg2v-12"
113
+ })(["border-bottom:0.5px solid;border-color:", ";flex:1;margin-left:8px;margin-right:8px;margin-bottom:4.5px;"], _color.colorGrayscale.gray500);
114
+
115
+ var P2TextContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
116
+ displayName: "mobile-member-role-card__P2TextContainer",
117
+ componentId: "sc-1n1fg2v-13"
118
+ })(["color:", ";overflow-wrap:anywhere;"], function (props) {
119
+ return props.color;
120
+ });
121
+
122
+ var StyledP1 = /*#__PURE__*/(0, _styledComponents["default"])(_paragraph.P1).withConfig({
123
+ displayName: "mobile-member-role-card__StyledP1",
124
+ componentId: "sc-1n1fg2v-14"
125
+ })(["color:", ";line-height:125%;letter-spacing:10%;"], function (props) {
126
+ return props.color;
127
+ });
100
128
 
101
129
  var MobileMemberRoleCard = function MobileMemberRoleCard(_ref) {
102
130
  var _ref$role = _ref.role,
@@ -108,46 +136,52 @@ var MobileMemberRoleCard = function MobileMemberRoleCard(_ref) {
108
136
  _ref$joinDate = _ref.joinDate,
109
137
  joinDate = _ref$joinDate === void 0 ? '' : _ref$joinDate,
110
138
  _ref$name = _ref.name,
111
- name = _ref$name === void 0 ? '' : _ref$name;
139
+ name = _ref$name === void 0 ? '' : _ref$name,
140
+ _ref$articleReadCount = _ref.articleReadCount,
141
+ articleReadCount = _ref$articleReadCount === void 0 ? 0 : _ref$articleReadCount,
142
+ _ref$articleReadingTi = _ref.articleReadingTimeUnit,
143
+ articleReadingTimeUnit = _ref$articleReadingTi === void 0 ? _readingTimeUnit.READING_TIME_UNIT.minute : _ref$articleReadingTi,
144
+ _ref$articleReadingTi2 = _ref.articleReadingTime,
145
+ articleReadingTime = _ref$articleReadingTi2 === void 0 ? 0 : _ref$articleReadingTi2,
146
+ _ref$hideInfo = _ref.hideInfo,
147
+ hideInfo = _ref$hideInfo === void 0 ? false : _ref$hideInfo;
112
148
  var logoUrl = "https://www.twreporter.org/assets/user-role-card/".concat(releaseBranch, "/").concat(role, "_logo.png");
113
- var titleUrl = "https://www.twreporter.org/assets/user-role-card/".concat(releaseBranch, "/").concat(role, "_title.png");
149
+ var titleUrl = "https://www.twreporter.org/assets/user-role-card/".concat(releaseBranch, "/").concat(role, "_title.svg");
114
150
  var markUrl = "https://www.twreporter.org/assets/user-role-card/".concat(releaseBranch, "/").concat(role, "_mark.png");
115
151
  return /*#__PURE__*/_react["default"].createElement(CardContainer, {
116
152
  bgColor: CardBgColor[role]
117
- }, /*#__PURE__*/_react["default"].createElement(RelativeDiv, null, /*#__PURE__*/_react["default"].createElement(FlexContainer, null, /*#__PURE__*/_react["default"].createElement(LogoContainer, null, /*#__PURE__*/_react["default"].createElement(LogoImg, {
118
- src: logoUrl
119
- })), /*#__PURE__*/_react["default"].createElement(MarkContainer, null, /*#__PURE__*/_react["default"].createElement(MarkImgs, {
153
+ }, /*#__PURE__*/_react["default"].createElement(MarkContainer, null, /*#__PURE__*/_react["default"].createElement(MarkImgs, {
120
154
  role: role,
121
155
  src: markUrl
122
- })), /*#__PURE__*/_react["default"].createElement(DataContainer, null, role !== _memberRole.MEMBER_ROLE.explorer && /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(TextContainer, {
123
- color: _color.colorGrayscale.gray500
124
- }, /*#__PURE__*/_react["default"].createElement(_paragraph.P3, {
125
- text: '姓名'
126
- })), /*#__PURE__*/_react["default"].createElement(TextContainer, {
127
- color: CardTextColor[role],
128
- paddingBottom: 8
129
- }, /*#__PURE__*/_react["default"].createElement(_paragraph.P1, {
156
+ })), /*#__PURE__*/_react["default"].createElement(LeftColumn, null, /*#__PURE__*/_react["default"].createElement(P2TextContainer, {
157
+ color: CardP2TextColor[role]
158
+ }, role !== _memberRole.MEMBER_ROLE.explorer && /*#__PURE__*/_react["default"].createElement(_paragraph.P2, {
130
159
  text: name
131
- }))), /*#__PURE__*/_react["default"].createElement(TextContainer, {
132
- color: _color.colorGrayscale.gray500
133
- }, /*#__PURE__*/_react["default"].createElement(_paragraph.P3, {
134
- text: '電子信箱'
135
- })), /*#__PURE__*/_react["default"].createElement(TextContainer, {
136
- color: CardTextColor[role],
137
- paddingBottom: 8
138
- }, /*#__PURE__*/_react["default"].createElement(_paragraph.P1, {
160
+ }), /*#__PURE__*/_react["default"].createElement(_paragraph.P2, {
139
161
  text: email
140
- })), /*#__PURE__*/_react["default"].createElement(TextContainer, {
141
- color: _color.colorGrayscale.gray500
142
- }, /*#__PURE__*/_react["default"].createElement(_paragraph.P3, {
162
+ })), /*#__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(P3Gray500, {
163
+ text: '閱讀篇數'
164
+ }), /*#__PURE__*/_react["default"].createElement(Gray500BottomLine, null), /*#__PURE__*/_react["default"].createElement(StyledP1, {
165
+ color: CardP1TextColor[role],
166
+ weight: _paragraph.P1.Weight.BOLD,
167
+ text: articleReadCount.toLocaleString('en-US')
168
+ })), /*#__PURE__*/_react["default"].createElement(TextContainer, null, /*#__PURE__*/_react["default"].createElement(P3Gray500, {
169
+ text: "\u95B1\u8B80".concat(_readingTimeUnit.READING_TIME_UNIT_TEXT[articleReadingTimeUnit])
170
+ }), /*#__PURE__*/_react["default"].createElement(Gray500BottomLine, null), /*#__PURE__*/_react["default"].createElement(StyledP1, {
171
+ color: CardP1TextColor[role],
172
+ weight: _paragraph.P1.Weight.BOLD,
173
+ text: articleReadingTime > 99999 ? '99,999+' : articleReadingTime.toLocaleString('en-US')
174
+ }))), /*#__PURE__*/_react["default"].createElement(TextContainer, null, /*#__PURE__*/_react["default"].createElement(P3Gray500, {
143
175
  text: '加入日期'
144
- })), /*#__PURE__*/_react["default"].createElement(TextContainer, {
145
- color: CardTextColor[role]
146
- }, /*#__PURE__*/_react["default"].createElement(_paragraph.P1, {
176
+ }), /*#__PURE__*/_react["default"].createElement(Gray500BottomLine, null), /*#__PURE__*/_react["default"].createElement(StyledP1, {
177
+ color: CardP1TextColor[role],
178
+ weight: _paragraph.P1.Weight.BOLD,
147
179
  text: joinDate
148
- })))), /*#__PURE__*/_react["default"].createElement(TitleImg, {
180
+ })))), /*#__PURE__*/_react["default"].createElement(RightColumn, null, /*#__PURE__*/_react["default"].createElement(TitleContainer, null, /*#__PURE__*/_react["default"].createElement(TitleImg, {
149
181
  src: titleUrl
150
- })));
182
+ }), /*#__PURE__*/_react["default"].createElement(LogoContainer, null, /*#__PURE__*/_react["default"].createElement(LogoImg, {
183
+ src: logoUrl
184
+ })))));
151
185
  };
152
186
 
153
187
  MobileMemberRoleCard.propTypes = {
@@ -155,7 +189,11 @@ MobileMemberRoleCard.propTypes = {
155
189
  releaseBranch: _releaseBranch.BRANCH_PROP_TYPES,
156
190
  email: _propTypes["default"].string,
157
191
  joinDate: _propTypes["default"].string,
158
- name: _propTypes["default"].string
192
+ name: _propTypes["default"].string,
193
+ articleReadCount: _propTypes["default"].number,
194
+ articleReadingTimeUnit: _propTypes["default"].oneOf(Object.values(_readingTimeUnit.READING_TIME_UNIT)),
195
+ articleReadingTime: _propTypes["default"].number,
196
+ hideInfo: _propTypes["default"].bool
159
197
  };
160
198
  var _default = MobileMemberRoleCard;
161
199
  exports["default"] = _default;
package/lib/mobile-member-role-card/stories/member-role-card.stories.js CHANGED
@@ -15,6 +15,8 @@ var _constants = require("../../storybook/constants");
15
15
 
16
16
  var _memberRole = require("@twreporter/core/lib/constants/member-role");
17
17
 
18
+ var _readingTimeUnit = require("@twreporter/core/src/constants/reading-time-unit");
19
+
18
20
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
19
21
 
20
22
  var _default = {
@@ -22,7 +24,8 @@ var _default = {
22
24
  component: _index["default"],
23
25
  argTypes: {
24
26
  releaseBranch: _constants.BRANCH_STORYBOOK_ARG_TYPE,
25
- role: (0, _getEnumArg.getRadioArg)(_memberRole.MEMBER_ROLE, _memberRole.MEMBER_ROLE.explorer)
27
+ role: (0, _getEnumArg.getRadioArg)(_memberRole.MEMBER_ROLE, _memberRole.MEMBER_ROLE.explorer),
28
+ articleReadingTimeUnit: (0, _getEnumArg.getRadioArg)(_readingTimeUnit.READING_TIME_UNIT, _readingTimeUnit.READING_TIME_UNIT.minute)
26
29
  }
27
30
  };
28
31
  exports["default"] = _default;
@@ -34,6 +37,9 @@ var moblieMemberRoleCard = function moblieMemberRoleCard(args) {
34
37
  exports.moblieMemberRoleCard = moblieMemberRoleCard;
35
38
  moblieMemberRoleCard.args = {
36
39
  email: 'abc@mail.com',
37
- joinDate: '2022/01/08',
38
- name: '報導者'
40
+ joinDate: '2022/1/8',
41
+ name: '報導者',
42
+ articleReadCount: 12,
43
+ articleReadingTime: 380,
44
+ hideInfo: false
39
45
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@twreporter/react-components",
3
- "version": "8.21.0-rc.2",
3
+ "version": "8.21.0-rc.3",
4
4
  "main": "lib/index.js",
5
5
  "repository": "https://github.com/twreporter/twreporter-npm-packages.git",
6
6
  "author": "twreporter <developer@twreporter.org>",
@@ -15,8 +15,8 @@
15
15
  "chromatic": "npx chromatic --exit-zero-on-changes"
16
16
  },
17
17
  "dependencies": {
18
- "@twreporter/core": "^1.13.1-rc.0",
19
- "@twreporter/redux": "^7.8.1-rc.0",
18
+ "@twreporter/core": "^1.14.0-rc.0",
19
+ "@twreporter/redux": "^7.8.1-rc.1",
20
20
  "fontfaceobserver-es": "^3.3.3",
21
21
  "hoist-non-react-statics": "^2.3.1",
22
22
  "lodash": "^4.0.0",
@@ -44,5 +44,5 @@
44
44
  "babel-loader": "^8.2.4",
45
45
  "chromatic": "^6.5.4"
46
46
  },
47
- "gitHead": "c246d988fe96568fd2ebf5cb6f0806e0f4bf924e"
47
+ "gitHead": "79564b04f0e64befed05a08b9f934d38f9b8b6bc"
48
48
  }