@twreporter/react-components 8.27.1-rc.0 → 8.27.1-rc.1

package/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [8.27.1-rc.1](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-components@8.27.1-rc.0...@twreporter/react-components@8.27.1-rc.1) (2024-04-17)
+
+
+### Bug Fixes
+
+* add background color control ([dd103fc](https://github.com/twreporter/twreporter-npm-packages/commit/dd103fc332a5c877e0b078cb98682aefd68ad900))
+* update color in colorGrayscale & add color story ([f27d752](https://github.com/twreporter/twreporter-npm-packages/commit/f27d752ae97e15d64e59126dfed07f09471cff4a))
+
+
+
+
+
 ## [8.27.1-rc.0](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-components@8.27.0...@twreporter/react-components@8.27.1-rc.0) (2024-04-17)
 
 **Note:** Version bump only for package @twreporter/react-components

package/lib/color.stories.js

@@ -0,0 +1,160 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.colorSet = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _color = require("@twreporter/core/lib/constants/color");
+
+var _getEnumArg = require("./storybook/utils/get-enum-arg");
+
+var _paragraph = require("./text/paragraph");
+
+var _map = _interopRequireDefault(require("lodash/map"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+/* eslint react/display-name:0 */
+// lodash
+var _ = {
+  map: _map["default"]
+};
+
+var Container = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "colorstories__Container",
+  componentId: "sc-1icwolq-0"
+})(["display:flex;width:100vw;height:100vh;background-color:", ";"], function (props) {
+  return props.background;
+});
+
+var Box = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "colorstories__Box",
+  componentId: "sc-1icwolq-1"
+})(["display:flex;align-items:center;justify-content:center;flex-direction:column;"]);
+
+var Color = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "colorstories__Color",
+  componentId: "sc-1icwolq-2"
+})(["height:", ";width:", ";background-color:", ";"], function (props) {
+  return props.height;
+}, function (props) {
+  return props.width;
+}, function (props) {
+  return props.color;
+});
+
+var P2Gray600 = /*#__PURE__*/(0, _styledComponents["default"])(_paragraph.P2).withConfig({
+  displayName: "colorstories__P2Gray600",
+  componentId: "sc-1icwolq-3"
+})(["color:", ";"], _color.colorGrayscale.gray600);
+var ColorText = /*#__PURE__*/(0, _styledComponents["default"])(_paragraph.P2).withConfig({
+  displayName: "colorstories__ColorText",
+  componentId: "sc-1icwolq-4"
+})(["", " color:", ";"], function (props) {
+  return props.show ? '' : 'display: none;';
+}, _color.colorGrayscale.gray500);
+var ColorSetEnum = {
+  BRAND: 'brand',
+  GRAYSCALE: 'grayscale',
+  OPACITY: 'opacity',
+  PHOTO: 'photography',
+  PODCAST: 'podcast',
+  SUPPORTIVE: 'supportive',
+  SEMANTIC: 'semantic',
+  PINK_ARTICLE: 'pink_article'
+};
+
+var getColorSet = function getColorSet(type) {
+  switch (type) {
+    case ColorSetEnum.BRAND:
+      return _color.colorBrand;
+
+    case ColorSetEnum.GRAYSCALE:
+      return _color.colorGrayscale;
+
+    case ColorSetEnum.OPACITY:
+      return _color.colorOpacity;
+
+    case ColorSetEnum.PHOTO:
+      return _color.colorPhoto;
+
+    case ColorSetEnum.PODCAST:
+      return _color.colorPodcast;
+
+    case ColorSetEnum.SUPPORTIVE:
+      return _color.colorSupportive;
+
+    case ColorSetEnum.SEMANTIC:
+      return _color.COLOR_SEMANTIC;
+
+    case ColorSetEnum['PINK_ARTICLE']:
+      return _color.COLOR_PINK_ARTICLE;
+  }
+};
+
+var ColorSet = function ColorSet(_ref) {
+  var height = _ref.height,
+      width = _ref.width,
+      type = _ref.type,
+      showColorText = _ref.showColorText,
+      background = _ref.background;
+  var colorSet = getColorSet(type);
+
+  var colorBoxes = _.map(colorSet, function (color, key) {
+    return /*#__PURE__*/_react["default"].createElement(Box, {
+      key: "".concat(type, "-").concat(key)
+    }, /*#__PURE__*/_react["default"].createElement(P2Gray600, {
+      text: key
+    }), /*#__PURE__*/_react["default"].createElement(Color, {
+      height: height,
+      width: width,
+      color: color
+    }), /*#__PURE__*/_react["default"].createElement(ColorText, {
+      text: color,
+      show: showColorText
+    }));
+  });
+
+  return /*#__PURE__*/_react["default"].createElement(Container, {
+    background: background
+  }, colorBoxes);
+};
+
+ColorSet.propTypes = {
+  background: _propTypes["default"].string,
+  height: _propTypes["default"].string,
+  width: _propTypes["default"].string,
+  type: _propTypes["default"].oneOf(Object.values(ColorSetEnum)),
+  showColorText: _propTypes["default"].bool
+};
+var _default = {
+  title: 'Color',
+  component: ColorSet,
+  argTypes: {
+    type: (0, _getEnumArg.getRadioArg)(ColorSetEnum, ColorSetEnum.GRAYSCALE),
+    background: {
+      control: {
+        type: 'color',
+        presetColors: [_color.colorGrayscale.gray100, _color.colorPhoto.dark, _color.colorGrayscale.gray600]
+      }
+    }
+  }
+};
+exports["default"] = _default;
+var colorSet = {
+  args: {
+    height: '100px',
+    width: '100px',
+    type: ColorSetEnum.GRAYSCALE,
+    showColorText: false,
+    background: _color.colorGrayscale.gray100
+  }
+};
+exports.colorSet = colorSet;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@twreporter/react-components",
-  "version": "8.27.1-rc.0",
+  "version": "8.27.1-rc.1",
   "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.19.1-rc.0",
-    "@twreporter/redux": "^7.11.3-rc.0",
+    "@twreporter/core": "^1.19.1-rc.1",
+    "@twreporter/redux": "^7.11.3-rc.1",
     "fontfaceobserver-es": "^3.3.3",
     "hoist-non-react-statics": "^2.3.1",
     "lodash": "^4.0.0",
@@ -51,5 +51,5 @@
     "react-dom": "^16.0.0",
     "storybook": "^7.5.2"
   },
-  "gitHead": "2ccfeb87fefdcc4fc6c267c01987f41da353b65a"
+  "gitHead": "f0bdcc508dd75523ce1a33da622598462660299e"
 }