@twreporter/react-components 8.17.0-rc.2 → 8.17.0-rc.4

package/CHANGELOG.md

@@ -3,6 +3,42 @@
 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.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)
+
+
+### Bug Fixes
+
+* add comments ([c5db49d](https://github.com/twreporter/twreporter-npm-packages/commit/c5db49dc1fae29527e7dec334bcadba18068aea4))
+* add icon toggle for TextButton story & refactor ([66b5c83](https://github.com/twreporter/twreporter-npm-packages/commit/66b5c834e6545ad1c278ac7934899ed845204c20))
+* add missing releaseBranch props to image-with-fallback component ([a98c612](https://github.com/twreporter/twreporter-npm-packages/commit/a98c61215314f98de86345a41b5870b31971db08))
+* address CardList defects ([5d183b0](https://github.com/twreporter/twreporter-npm-packages/commit/5d183b0f411540b66c07476b014be97703577284))
+* address review comments ([539cac0](https://github.com/twreporter/twreporter-npm-packages/commit/539cac05e06e33621a9fbc4b9971e040c4560bf8))
+* address review comments & fix typo ([20c1ebe](https://github.com/twreporter/twreporter-npm-packages/commit/20c1ebe273869a176bf2715bc2975fe5abcb50b6))
+* define interactive style in [@twreporter](https://github.com/twreporter) core package ([0acbe56](https://github.com/twreporter/twreporter-npm-packages/commit/0acbe564eecd201e5c8d11314b8f1598892859f1))
+* fix Link import path in CardList ([3667d82](https://github.com/twreporter/twreporter-npm-packages/commit/3667d82063b048f1e43e50dc8e73d19b9d08ce23))
+* move size constant to @twreporter/core package ([c0e4d29](https://github.com/twreporter/twreporter-npm-packages/commit/c0e4d295a1846c6a8828970cb651854619206c5f))
+* refactor ImagWithFallback into function component ([854edb7](https://github.com/twreporter/twreporter-npm-packages/commit/854edb7631b64087f7959105ca642fdb347a48fc))
+* use size constant for Dialog component ([e7c1831](https://github.com/twreporter/twreporter-npm-packages/commit/e7c1831d9df727c0bdf686a8748109cfa1b5f79a))
+* use size constant from core package ([be6aa4f](https://github.com/twreporter/twreporter-npm-packages/commit/be6aa4f806b95994c5acaa5d6cbe49fc2303c0c3))
+
+
+### Features
+
+* add CardList component ([f970192](https://github.com/twreporter/twreporter-npm-packages/commit/f97019239c19451d83c42034675021a09e0004de))
+* add design guideline components ([efe249d](https://github.com/twreporter/twreporter-npm-packages/commit/efe249d44f0d45f5c50ee6e69b0d7f1482270bbe))
+
+
+
+
+
 # [8.17.0-rc.2](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-components@8.17.0-rc.1...@twreporter/react-components@8.17.0-rc.2) (2023-04-12)
 
 **Note:** Version bump only for package @twreporter/react-components

package/lib/button/components/pillButton.js

@@ -17,12 +17,12 @@ var _theme = require("../utils/theme");
 
 var _size = require("../utils/size");
 
-var _size2 = require("../constants/size");
-
 var _type = require("../constants/type");
 
 var _theme2 = require("@twreporter/core/lib/constants/theme");
 
+var _size2 = require("@twreporter/core/lib/constants/size");
+
 var _excluded = ["text", "iconComponent", "size", "theme", "type", "disabled"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

package/lib/button/components/textButton.js

@@ -19,12 +19,14 @@ var _paragraph = require("../../text/paragraph");
 
 var _constants = require("../constants/");
 
-var _size2 = require("../constants/size");
-
 var _type = require("../constants/type");
 
 var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
 
+var _size2 = require("@twreporter/core/lib/constants/size");
+
+var _theme2 = require("@twreporter/core/lib/constants/theme");
+
 var _excluded = ["text", "leftIconComponent", "rightIconComponent", "size", "theme", "type", "active", "disabled"];
 
 var _templateObject;
@@ -73,7 +75,7 @@ var TextButton = function TextButton(_ref) {
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? _size2.SIZE.S : _ref$size,
       _ref$theme = _ref.theme,
-      theme = _ref$theme === void 0 ? _constants.TEXT_BUTTON_THEME.normal : _ref$theme,
+      theme = _ref$theme === void 0 ? _theme2.TEXT_BUTTON_THEME.normal : _ref$theme,
       _ref$type = _ref.type,
       type = _ref$type === void 0 ? _type.TYPE.primary : _ref$type,
       _ref$active = _ref.active,

package/lib/button/constants/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TEXT_BUTTON_THEME_PROP_TYPES = exports.TEXT_BUTTON_THEME = void 0;
+exports.TEXT_BUTTON_THEME_PROP_TYPES = void 0;
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -11,19 +11,6 @@ var _theme = require("@twreporter/core/lib/constants/theme");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
-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; }
-
-var TEXT_BUTTON_THEME = Object.freeze(_objectSpread(_objectSpread({}, _theme.THEME), {}, {
-  brand: 'brand',
-  dark: 'dark',
-  light: 'light'
-}));
-exports.TEXT_BUTTON_THEME = TEXT_BUTTON_THEME;
-
-var TEXT_BUTTON_THEME_PROP_TYPES = _propTypes["default"].oneOf(Object.values(TEXT_BUTTON_THEME));
+var TEXT_BUTTON_THEME_PROP_TYPES = _propTypes["default"].oneOf(Object.values(_theme.TEXT_BUTTON_THEME));
 
 exports.TEXT_BUTTON_THEME_PROP_TYPES = TEXT_BUTTON_THEME_PROP_TYPES;

package/lib/button/stories/pillButton.stories.js

@@ -11,10 +11,10 @@ var _pillButton = _interopRequireDefault(require("../components/pillButton"));
 
 var _icon = require("../../icon");
 
-var _size = require("../constants/size");
-
 var _type = require("../constants/type");
 
+var _size = require("@twreporter/core/lib/constants/size");
+
 var _theme = require("@twreporter/core/lib/constants/theme");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

package/lib/button/stories/textButton.stories.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.withArrowIcon = exports.textButton = exports["default"] = void 0;
+exports.toggleIconDisplay = exports.textButton = exports["default"] = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -11,11 +11,11 @@ var _textButton = _interopRequireDefault(require("../components/textButton"));
 
 var _icon = require("../../icon");
 
-var _size = require("../constants/size");
-
 var _type = require("../constants/type");
 
-var _constants = require("../constants");
+var _size = require("@twreporter/core/lib/constants/size");
+
+var _theme = require("@twreporter/core/lib/constants/theme");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -24,14 +24,27 @@ var _default = {
   component: _textButton["default"],
   argTypes: {
     theme: {
-      defaultValue: _constants.TEXT_BUTTON_THEME.normal,
-      options: Object.values(_constants.TEXT_BUTTON_THEME),
+      defaultValue: _theme.TEXT_BUTTON_THEME.normal,
+      options: Object.values(_theme.TEXT_BUTTON_THEME),
       control: {
         type: 'radio'
       }
     },
     type: _type.TYPE_STORYBOOK_ARG_TYPE,
-    size: _size.SIZE_STORYBOOK_ARG_TYPE
+    size: _size.SIZE_STORYBOOK_ARG_TYPE,
+    // showLeft & showRight args are only for storybook check
+    showLeft: {
+      defaultValue: true,
+      control: {
+        type: 'boolean'
+      }
+    },
+    showRight: {
+      defaultValue: true,
+      control: {
+        type: 'boolean'
+      }
+    }
   }
 };
 exports["default"] = _default;
@@ -45,24 +58,46 @@ exports.textButton = textButton;
 textButton.args = {
   text: '文字',
   size: _size.SIZE.S,
-  theme: _constants.TEXT_BUTTON_THEME.normal,
+  theme: _theme.TEXT_BUTTON_THEME.normal,
   type: _type.TYPE.primary,
   active: false,
-  disabled: false
-};
-var withArrowIcon = Template.bind({});
-exports.withArrowIcon = withArrowIcon;
-withArrowIcon.args = {
+  disabled: false,
   leftIconComponent: /*#__PURE__*/_react["default"].createElement(_icon.Arrow, {
     direction: "left"
   }),
   rightIconComponent: /*#__PURE__*/_react["default"].createElement(_icon.Arrow, {
     direction: "right"
-  }),
+  })
+};
+textButton.parameters = {
+  controls: {
+    exclude: ['showLeft', 'showRight']
+  }
+};
+
+var toggleIconDisplay = function toggleIconDisplay(args) {
+  args.leftIconComponent = args.showLeft ? /*#__PURE__*/_react["default"].createElement(_icon.Arrow, {
+    direction: "left"
+  }) : null;
+  args.rightIconComponent = args.showRight ? /*#__PURE__*/_react["default"].createElement(_icon.Arrow, {
+    direction: "right"
+  }) : null;
+  return /*#__PURE__*/_react["default"].createElement(_textButton["default"], args);
+};
+
+exports.toggleIconDisplay = toggleIconDisplay;
+toggleIconDisplay.args = {
+  showLeft: true,
+  showRight: true,
   text: '文字',
   size: _size.SIZE.S,
-  theme: _constants.TEXT_BUTTON_THEME.normal,
+  theme: _theme.TEXT_BUTTON_THEME.normal,
   type: _type.TYPE.primary,
   active: false,
   disabled: false
+};
+toggleIconDisplay.parameters = {
+  controls: {
+    exclude: ['leftIconComponent', 'rightIconComponent']
+  }
 };

package/lib/button/utils/theme.js

@@ -9,8 +9,6 @@ var _color = require("@twreporter/core/lib/constants/color");
 
 var _theme = require("@twreporter/core/lib/constants/theme");
 
-var _constants = require("../constants");
-
 // @twreporter
 var getFilledPillButtonTheme = function getFilledPillButtonTheme(theme, disabled) {
   if (disabled) {
@@ -282,37 +280,37 @@ exports.getIconWithTextButtonTheme = getIconWithTextButtonTheme;
 
 var getPrimaryTextButtonTheme = function getPrimaryTextButtonTheme(theme) {
   switch (theme) {
-    case _constants.TEXT_BUTTON_THEME.photography:
+    case _theme.TEXT_BUTTON_THEME.photography:
       return {
         color: _color.colorGrayscale.white,
         hoverColor: _color.colorSupportive.main
       };
 
-    case _constants.TEXT_BUTTON_THEME.transparent:
+    case _theme.TEXT_BUTTON_THEME.transparent:
       return {
         color: _color.colorGrayscale.white,
         hoverColor: _color.colorGrayscale.gray800
       };
 
-    case _constants.TEXT_BUTTON_THEME.brand:
+    case _theme.TEXT_BUTTON_THEME.brand:
       return {
         color: _color.colorBrand.heavy,
         hoverColor: _color.colorBrand.dark
       };
 
-    case _constants.TEXT_BUTTON_THEME.dark:
+    case _theme.TEXT_BUTTON_THEME.dark:
       return {
         color: _color.colorGrayscale.gray800,
         hoverColor: _color.colorBrand.heavy
       };
 
-    case _constants.TEXT_BUTTON_THEME.light:
+    case _theme.TEXT_BUTTON_THEME.light:
       return {
         color: _color.colorGrayscale.gray600,
         hoverColor: _color.colorGrayscale.gray800
       };
 
-    case _constants.TEXT_BUTTON_THEME.normal:
+    case _theme.TEXT_BUTTON_THEME.normal:
     default:
       return {
         color: _color.colorGrayscale.gray800,
@@ -325,37 +323,37 @@ exports.getPrimaryTextButtonTheme = getPrimaryTextButtonTheme;
 
 var getSecondaryTextButtonTheme = function getSecondaryTextButtonTheme(theme) {
   switch (theme) {
-    case _constants.TEXT_BUTTON_THEME.photography:
+    case _theme.TEXT_BUTTON_THEME.photography:
       return {
         color: _color.colorGrayscale.gray400,
         hoverColor: _color.colorSupportive.main
       };
 
-    case _constants.TEXT_BUTTON_THEME.transparent:
+    case _theme.TEXT_BUTTON_THEME.transparent:
       return {
         color: _color.colorGrayscale.gray600,
         hoverColor: _color.colorGrayscale.gray800
       };
 
-    case _constants.TEXT_BUTTON_THEME.brand:
+    case _theme.TEXT_BUTTON_THEME.brand:
       return {
         color: _color.colorBrand.heavy,
         hoverColor: _color.colorBrand.dark
       };
 
-    case _constants.TEXT_BUTTON_THEME.dark:
+    case _theme.TEXT_BUTTON_THEME.dark:
       return {
         color: _color.colorGrayscale.gray800,
         hoverColor: _color.colorBrand.heavy
       };
 
-    case _constants.TEXT_BUTTON_THEME.light:
+    case _theme.TEXT_BUTTON_THEME.light:
       return {
         color: _color.colorGrayscale.gray600,
         hoverColor: _color.colorGrayscale.gray800
       };
 
-    case _constants.TEXT_BUTTON_THEME.normal:
+    case _theme.TEXT_BUTTON_THEME.normal:
     default:
       return {
         color: _color.colorGrayscale.gray600,
@@ -368,22 +366,22 @@ exports.getSecondaryTextButtonTheme = getSecondaryTextButtonTheme;
 
 var getDisabledTextButtonTheme = function getDisabledTextButtonTheme(theme) {
   switch (theme) {
-    case _constants.TEXT_BUTTON_THEME.photography:
+    case _theme.TEXT_BUTTON_THEME.photography:
       return {
         color: _color.colorGrayscale.gray600,
         hoverColor: _color.colorGrayscale.gray600
       };
 
-    case _constants.TEXT_BUTTON_THEME.transparent:
+    case _theme.TEXT_BUTTON_THEME.transparent:
       return {
         color: _color.colorGrayscale.gray200,
         hoverColor: _color.colorGrayscale.gray200
       };
 
-    case _constants.TEXT_BUTTON_THEME.brand:
-    case _constants.TEXT_BUTTON_THEME.dark:
-    case _constants.TEXT_BUTTON_THEME.light:
-    case _constants.TEXT_BUTTON_THEME.normal:
+    case _theme.TEXT_BUTTON_THEME.brand:
+    case _theme.TEXT_BUTTON_THEME.dark:
+    case _theme.TEXT_BUTTON_THEME.light:
+    case _theme.TEXT_BUTTON_THEME.normal:
     default:
       return {
         color: _color.colorGrayscale.gray400,
@@ -396,37 +394,37 @@ exports.getDisabledTextButtonTheme = getDisabledTextButtonTheme;
 
 var getActiveTextButtonTheme = function getActiveTextButtonTheme(theme) {
   switch (theme) {
-    case _constants.TEXT_BUTTON_THEME.photography:
+    case _theme.TEXT_BUTTON_THEME.photography:
       return {
         color: _color.colorSupportive.main,
         hoverColor: _color.colorSupportive.main
       };
 
-    case _constants.TEXT_BUTTON_THEME.transparent:
+    case _theme.TEXT_BUTTON_THEME.transparent:
       return {
         color: _color.colorGrayscale.white,
         hoverColor: _color.colorGrayscale.white
       };
 
-    case _constants.TEXT_BUTTON_THEME.brand:
+    case _theme.TEXT_BUTTON_THEME.brand:
       return {
         color: _color.colorBrand.dark,
         hoverColor: _color.colorBrand.dark
       };
 
-    case _constants.TEXT_BUTTON_THEME.dark:
+    case _theme.TEXT_BUTTON_THEME.dark:
       return {
         color: _color.colorBrand.heavy,
         hoverColor: _color.colorBrand.heavy
       };
 
-    case _constants.TEXT_BUTTON_THEME.light:
+    case _theme.TEXT_BUTTON_THEME.light:
       return {
         color: _color.colorGrayscale.gray800,
         hoverColor: _color.colorGrayscale.gray800
       };
 
-    case _constants.TEXT_BUTTON_THEME.normal:
+    case _theme.TEXT_BUTTON_THEME.normal:
     default:
       return {
         color: _color.colorBrand.heavy,

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

@@ -0,0 +1,173 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _imageWithFallback = _interopRequireDefault(require("../../image-with-fallback"));
+
+var _paragraph = require("../../text/paragraph");
+
+var _headline = require("../../text/headline");
+
+var _icon = require("../../icon");
+
+var _button = require("../../button");
+
+var _color = require("@twreporter/core/lib/constants/color");
+
+var _theme = require("@twreporter/core/lib/constants/theme");
+
+var _size = require("@twreporter/core/lib/constants/size");
+
+var _releaseBranch = require("@twreporter/core/lib/constants/release-branch");
+
+var _width, _height, _marginLeft;
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+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; }
+
+var imageStyle = {
+  width: (_width = {}, _defineProperty(_width, _size.SIZE.S, '72px'), _defineProperty(_width, _size.SIZE.L, '216px'), _width),
+  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 FlexGroup = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "article-card__FlexGroup",
+  componentId: "sc-9196c7-0"
+})(["display:flex;"]);
+
+var FlexGroupColumn = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "article-card__FlexGroupColumn",
+  componentId: "sc-9196c7-1"
+})(["display:flex;flex-direction:column;"]);
+
+var FlexSpaceBetween = /*#__PURE__*/(0, _styledComponents["default"])(FlexGroup).withConfig({
+  displayName: "article-card__FlexSpaceBetween",
+  componentId: "sc-9196c7-2"
+})(["justify-content:space-between;"]);
+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) {
+  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;}"]);
+
+var BookmarkContainer = /*#__PURE__*/(0, _styledComponents["default"])(FlexGroup).withConfig({
+  displayName: "article-card__BookmarkContainer",
+  componentId: "sc-9196c7-5"
+})(["margin-top:8px;align-self:flex-end;"]);
+var ImageContainer = /*#__PURE__*/(0, _styledComponents["default"])(FlexGroup).withConfig({
+  displayName: "article-card__ImageContainer",
+  componentId: "sc-9196c7-6"
+})(["flex:0 0 auto;align-self:center;width:", ";height:", ";margin-left:", ";"], function (props) {
+  return imageStyle.width[props.size];
+}, function (props) {
+  return imageStyle.height[props.size];
+}, function (props) {
+  return imageStyle.marginLeft[props.size];
+});
+
+var ArticleCard = function ArticleCard(_ref) {
+  var _ref$title = _ref.title,
+      title = _ref$title === void 0 ? '' : _ref$title,
+      _ref$description = _ref.description,
+      description = _ref$description === void 0 ? '' : _ref$description,
+      _ref$date = _ref.date,
+      date = _ref$date === void 0 ? '' : _ref$date,
+      _ref$image = _ref.image,
+      image = _ref$image === void 0 ? {} : _ref$image,
+      _ref$category = _ref.category,
+      category = _ref$category === void 0 ? '' : _ref$category,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? _size.SIZE.S : _ref$size,
+      _ref$isBookmarked = _ref.isBookmarked,
+      isBookmarked = _ref$isBookmarked === void 0 ? false : _ref$isBookmarked,
+      toggleBookmark = _ref.toggleBookmark,
+      _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, {
+    text: title,
+    type: "article"
+  }) : null;
+  var dateJSX = date ? /*#__PURE__*/_react["default"].createElement(_paragraph.P3, {
+    text: date
+  }) : null;
+  var categoryJSX = category ? /*#__PURE__*/_react["default"].createElement(_paragraph.P3, {
+    text: category
+  }) : null;
+  var descriptionJSX = description ? size === _size.SIZE.S ? /*#__PURE__*/_react["default"].createElement(_paragraph.P2, {
+    text: description
+  }) : /*#__PURE__*/_react["default"].createElement(_paragraph.P1, {
+    text: description
+  }) : null;
+
+  var bookmarkIcon = /*#__PURE__*/_react["default"].createElement(_icon.Bookmark, {
+    type: "saved",
+    releaseBranch: releaseBranch
+  });
+
+  var bookmarkButton = size === _size.SIZE.S ? /*#__PURE__*/_react["default"].createElement(_button.TextButton, {
+    theme: _theme.TEXT_BUTTON_THEME.light,
+    leftIconComponent: bookmarkIcon,
+    text: "\u53D6\u6D88\u6536\u85CF"
+  }) : /*#__PURE__*/_react["default"].createElement(_button.IconButton, {
+    theme: _theme.THEME.normal,
+    iconComponent: bookmarkIcon
+  });
+  var bookmarkJSX = isBookmarked ? /*#__PURE__*/_react["default"].createElement(BookmarkContainer, {
+    onClick: toggleBookmark
+  }, bookmarkButton) : null;
+
+  var metaJSX = /*#__PURE__*/_react["default"].createElement(Meta, {
+    hide: hideMeta
+  }, categoryJSX, dateJSX);
+
+  var imageJSX = /*#__PURE__*/_react["default"].createElement(ImageContainer, {
+    size: size
+  }, /*#__PURE__*/_react["default"].createElement(_imageWithFallback["default"], {
+    src: image.src,
+    alt: image.alt,
+    releaseBranch: releaseBranch
+  }));
+
+  if (size === _size.SIZE.S) {
+    return /*#__PURE__*/_react["default"].createElement(FlexGroupColumn, null, /*#__PURE__*/_react["default"].createElement(FlexSpaceBetween, null, /*#__PURE__*/_react["default"].createElement(FlexGroupColumn, null, metaJSX, titleJSX), /*#__PURE__*/_react["default"].createElement(FlexGroup, null, imageJSX)), /*#__PURE__*/_react["default"].createElement(FlexGroupColumn, null, /*#__PURE__*/_react["default"].createElement(DescContainer, null, descriptionJSX), bookmarkJSX));
+  } // 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);
+};
+
+ArticleCard.propTypes = {
+  title: _propTypes["default"].string.isRequired,
+  description: _propTypes["default"].string.isRequired,
+  date: _propTypes["default"].string,
+  image: _propTypes["default"].shape({
+    alt: _propTypes["default"].string,
+    src: _propTypes["default"].string.isRequired,
+    srcSet: _propTypes["default"].string
+  }),
+  category: _propTypes["default"].string,
+  size: _size.SIZE_PROP_TYPES,
+  isBookmarked: _propTypes["default"].bool,
+  toggleBookmark: _propTypes["default"].func,
+  releaseBranch: _releaseBranch.BRANCH_PROP_TYPES
+};
+var _default = ArticleCard;
+exports["default"] = _default;

package/lib/card/components/dialog.js

@@ -13,6 +13,8 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _paragraph = require("../../text/paragraph");
 
+var _size = require("@twreporter/core/lib/constants/size");
+
 var _excluded = ["text", "size"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -40,10 +42,10 @@ var Dialog = function Dialog(_ref) {
   var _ref$text = _ref.text,
       text = _ref$text === void 0 ? '' : _ref$text,
       _ref$size = _ref.size,
-      size = _ref$size === void 0 ? 'S' : _ref$size,
+      size = _ref$size === void 0 ? _size.SIZE.S : _ref$size,
       props = _objectWithoutProperties(_ref, _excluded);
 
-  var textIcon = size === 'S' ? /*#__PURE__*/_react["default"].createElement(_paragraph.P2, {
+  var textIcon = size === _size.SIZE.S ? /*#__PURE__*/_react["default"].createElement(_paragraph.P2, {
     text: text,
     weight: "bold"
   }) : /*#__PURE__*/_react["default"].createElement(_paragraph.P1, {
@@ -55,7 +57,7 @@ var Dialog = function Dialog(_ref) {
 
 Dialog.propTypes = {
   text: _propTypes["default"].string,
-  size: _propTypes["default"].oneOf(['S', 'L'])
+  size: _size.SIZE_PROP_TYPES
 };
 var _default = Dialog;
 exports["default"] = _default;

package/lib/card/index.js

@@ -9,13 +9,22 @@ Object.defineProperty(exports, "Dialog", {
     return _dialog["default"];
   }
 });
+Object.defineProperty(exports, "ArticleCard", {
+  enumerable: true,
+  get: function get() {
+    return _articleCard["default"];
+  }
+});
 exports["default"] = void 0;
 
 var _dialog = _interopRequireDefault(require("./components/dialog"));
 
+var _articleCard = _interopRequireDefault(require("./components/article-card"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var _default = {
-  Dialog: _dialog["default"]
+  Dialog: _dialog["default"],
+  ArticleCard: _articleCard["default"]
 };
 exports["default"] = _default;