react-jupiter 5.12.0 → 6.0.0-beta.2

package/dist/components/numeric-summery-report/index.test.js

@@ -0,0 +1,22 @@
+"use strict";var _react = _interopRequireDefault(require("react"));
+var _enzyme = require("enzyme");
+var _test = _interopRequireDefault(require("../utils/test"));
+var _index = _interopRequireDefault(require("./index"));function _interopRequireDefault(e) {return e && e.__esModule ? e : { default: e };}function _extends() {return _extends = Object.assign ? Object.assign.bind() : function (n) {for (var e = 1; e < arguments.length; e++) {var t = arguments[e];for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);}return n;}, _extends.apply(null, arguments);}
+
+const setupShallow = function () {let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};return (
+    (0, _enzyme.shallow)(/*#__PURE__*/_react.default.createElement(_index.default, _extends({ data: props.data }, props))));};
+
+
+describe('Numeric Summery Report', () => {
+  it('should render correctly', () => {
+    const component = setupShallow({
+      data: [
+      { id: 1, title: 'برگزار شده', count: 12 },
+      { id: 2, title: 'فعال', count: 2 },
+      { id: 3, title: 'دنبال کننده‌ها', count: 346 }]
+
+    });
+    const NumericSummeryReport = (0, _test.default)(component, 'numeric-summery-report');
+    expect(NumericSummeryReport.length).toBe(1);
+  });
+});

package/dist/components/product-menu/index.js

@@ -0,0 +1,10 @@
+"use strict";Object.defineProperty(exports, "__esModule", { value: true });Object.defineProperty(exports, "Menu", { enumerable: true, get: function () {return _menu.default;} });Object.defineProperty(exports, "MenuItem", { enumerable: true, get: function () {return _menuItem.default;} });exports.default = void 0;var _menu = _interopRequireDefault(require("./menu"));
+var _menuItem = _interopRequireDefault(require("./menu-item"));function _interopRequireDefault(e) {return e && e.__esModule ? e : { default: e };}var _default = exports.default =
+
+
+
+
+{
+  Menu: _menu.default,
+  MenuItem: _menuItem.default
+};

package/dist/components/product-menu/index.stories.js

@@ -0,0 +1,33 @@
+"use strict";Object.defineProperty(exports, "__esModule", { value: true });exports.default = exports.WithCustomColorItem = exports.Default = void 0;var _react = _interopRequireDefault(require("react"));
+var _addonActions = require("@storybook/addon-actions");
+var _menu = _interopRequireDefault(require("./menu"));
+var _menuItem = _interopRequireDefault(require("./menu-item"));function _interopRequireDefault(e) {return e && e.__esModule ? e : { default: e };}var _default = exports.default =
+
+{
+  title: 'Components/ProductMenu',
+  component: _menu.default,
+  argTypes: {
+  }
+};
+
+const Template = (args) => /*#__PURE__*/
+_react.default.createElement(_menu.default, args, /*#__PURE__*/
+_react.default.createElement(_menuItem.default, { label: "Dashboard", handleClick: (0, _addonActions.action)('dashboard-clicked') }), /*#__PURE__*/
+_react.default.createElement(_menuItem.default, { label: "Profile", handleClick: (0, _addonActions.action)('profile-clicked') }), /*#__PURE__*/
+_react.default.createElement(_menuItem.default, { label: "Settings", handleClick: (0, _addonActions.action)('settings-clicked') })
+);
+
+
+const Default = exports.Default = Template.bind({});
+Default.args = {
+};
+
+const WithCustomColorItem = (args) => /*#__PURE__*/
+_react.default.createElement(_menu.default, args, /*#__PURE__*/
+_react.default.createElement(_menuItem.default, { label: "Dashboard", handleClick: (0, _addonActions.action)('dashboard-clicked'), color: "blue" }), /*#__PURE__*/
+_react.default.createElement(_menuItem.default, { label: "Profile", handleClick: (0, _addonActions.action)('profile-clicked') }), /*#__PURE__*/
+_react.default.createElement(_menuItem.default, { label: "Settings", handleClick: (0, _addonActions.action)('settings-clicked') })
+);exports.WithCustomColorItem = WithCustomColorItem;
+
+WithCustomColorItem.args = {
+};

package/dist/components/product-menu/index.style.js

@@ -0,0 +1,38 @@
+"use strict";Object.defineProperty(exports, "__esModule", { value: true });exports.Nav = exports.MenuWrapper = exports.MenuListItem = exports.ExtraMenuWrapper = void 0;var _styledComponents = _interopRequireDefault(require("styled-components"));function _interopRequireDefault(e) {return e && e.__esModule ? e : { default: e };}
+
+const MenuWrapper = exports.MenuWrapper = _styledComponents.default.ol`
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  justify-content: ${(_ref) => {let { justifyContent } = _ref;return justifyContent ? justifyContent : 'space-between';}};
+
+  li {
+    cursor: pointer;
+  }
+`;
+
+const MenuListItem = exports.MenuListItem = _styledComponents.default.li`
+  flex-shrink: 1;
+  min-width: ${(_ref2) => {let { theme } = _ref2;return theme.itemMinWidth;}};
+  box-sizing: border-box;
+  ${(_ref3) => {let { isShowMoreItem } = _ref3;return isShowMoreItem ? 'position: relative;' : '';}}
+`;
+
+
+const ExtraMenuWrapper = exports.ExtraMenuWrapper = _styledComponents.default.ol`
+  opacity: ${(_ref4) => {let { showMore } = _ref4;return showMore ? '1' : '0';}};
+  transition: opacity ${(_ref5) => {let { theme } = _ref5;return `${theme.animation.time}s ${theme.animation.method}`;}};
+  position: absolute;
+  background: ${(_ref6) => {let { theme } = _ref6;return theme.bgColor;}};
+  box-shadow:
+    ${(_ref7) => {let { theme } = _ref7;return `0 0 ${theme.shadow.blur}px ${theme.shadow.spread}px rgba(0, 0, 0, ${theme.shadow.opacity});`;}}
+
+  li {
+    border-bottom: 1px solid ${(_ref8) => {let { theme } = _ref8;return theme.borderColor;}};
+    min-width: ${(_ref9) => {let { theme } = _ref9;return theme.itemMinWidth;}};
+  }
+`;
+
+const Nav = exports.Nav = _styledComponents.default.nav`
+  border-bottom: 1px solid ${(_ref0) => {let { theme } = _ref0;return theme.borderColor;}};
+`;

package/dist/components/product-menu/index.test.js

@@ -0,0 +1,27 @@
+"use strict";var _react = _interopRequireDefault(require("react"));
+var _enzyme = require("enzyme");
+var _test = _interopRequireDefault(require("../utils/test"));
+var _menu = _interopRequireDefault(require("./menu"));
+var _menuItem = _interopRequireDefault(require("./menu-item"));function _interopRequireDefault(e) {return e && e.__esModule ? e : { default: e };}
+
+describe('ProductMenu', () => {
+  it('render nav Menu', () => {
+    const component = (0, _enzyme.shallow)(/*#__PURE__*/_react.default.createElement(_menu.default, null));
+    const wrapper = (0, _test.default)(component, 'product-menu');
+    expect(wrapper.length).toBe(1);
+  });
+  it('render ol', () => {
+    const component = (0, _enzyme.shallow)(/*#__PURE__*/_react.default.createElement(_menu.default, null));
+    const wrapper = (0, _test.default)(component, 'product-menu').find('ol');
+    expect(wrapper.length).toBe(1);
+  });
+  it('render menu Item', () => {
+    const component = (0, _enzyme.shallow)(/*#__PURE__*/
+      _react.default.createElement(_menu.default, null, /*#__PURE__*/
+      _react.default.createElement(_menuItem.default, { label: "hi" })
+      )
+    );
+    const wrapper = (0, _test.default)(component, 'product-menu-item');
+    expect(wrapper.length).toBe(1);
+  });
+});

package/dist/components/product-menu/menu-item.js

@@ -0,0 +1,23 @@
+"use strict";Object.defineProperty(exports, "__esModule", { value: true });exports.default = void 0;var _react = _interopRequireDefault(require("react"));
+var _typography = require("../typography");function _interopRequireDefault(e) {return e && e.__esModule ? e : { default: e };}
+
+
+
+
+
+
+function MenuItem(_ref) {let { label, handleClick = () => {}, color = 'default' } = _ref;
+  return (/*#__PURE__*/
+    _react.default.createElement(_typography.Text, {
+      size: 14,
+      bold: true,
+      onClick: handleClick,
+      "data-test": "product-menu-item",
+      color: color },
+
+    label
+    ));
+
+}var _default = exports.default =
+
+MenuItem;

package/dist/components/product-menu/menu.js

@@ -0,0 +1,88 @@
+"use strict";Object.defineProperty(exports, "__esModule", { value: true });exports.default = void 0;var _react = _interopRequireDefault(require("react"));
+var _styledComponents = require("styled-components");
+var _typography = require("../typography");
+var _spacing = require("../spacing");
+var _index = require("./index.style");
+
+
+
+
+
+var _theme = _interopRequireDefault(require("./theme"));function _interopRequireDefault(e) {return e && e.__esModule ? e : { default: e };}
+
+
+
+
+
+
+
+function Menu(props) {
+  const {
+    showMore, windowWith, handleToggleShowMore, children
+  } = props;
+  const menuItems = _react.default.Children.toArray(children);
+
+  function renderMenu() {
+    if (menuItems.length > 5 && windowWith > _theme.default.breakpoints.sm) {
+      return (/*#__PURE__*/
+        _react.default.createElement(_react.default.Fragment, null,
+
+        menuItems.filter((item, index) => index < 4).map(
+          (menuItem) => /*#__PURE__*/
+          _react.default.createElement(_index.MenuListItem, { key: menuItem.key }, /*#__PURE__*/
+          _react.default.createElement(_spacing.Padding, { left: 2, right: 2 },
+          _react.default.cloneElement(menuItem)
+          )
+          )
+
+        ), /*#__PURE__*/
+
+        _react.default.createElement(_index.MenuListItem, { isShowMoreItem: true }, /*#__PURE__*/
+        _react.default.createElement(_typography.Text, { size: 16, bold: true, onClick: handleToggleShowMore }, "\u0628\u06CC\u0634\u062A\u0631"
+
+        ), /*#__PURE__*/
+        _react.default.createElement(_index.ExtraMenuWrapper, { showMore: showMore },
+
+        menuItems.filter((item, index) => index >= 4).map(
+          (menuItem) => /*#__PURE__*/
+          _react.default.createElement("li", { key: menuItem.key }, /*#__PURE__*/
+          _react.default.createElement(_spacing.Padding, { top: 4, bottom: 4, left: 3, right: 3 },
+          _react.default.cloneElement(menuItem)
+          )
+          )
+
+        )
+
+        )
+        )
+        ));
+
+    }
+    return (/*#__PURE__*/
+      _react.default.createElement(_react.default.Fragment, null,
+
+      menuItems.map(
+        (menuItem) => /*#__PURE__*/
+        _react.default.createElement(_index.MenuListItem, { key: menuItem.key },
+        _react.default.cloneElement(menuItem)
+        )
+
+      )
+
+      ));
+
+  }
+
+  return (/*#__PURE__*/
+    _react.default.createElement(_styledComponents.ThemeProvider, { theme: _theme.default }, /*#__PURE__*/
+    _react.default.createElement(_index.Nav, { "data-test": "product-menu" }, /*#__PURE__*/
+    _react.default.createElement(_spacing.Padding, { top: 5, bottom: 5 }, /*#__PURE__*/
+    _react.default.createElement(_index.MenuWrapper, props,
+    renderMenu()
+    )
+    )
+    )
+    ));
+
+}var _default = exports.default =
+Menu;

package/dist/components/product-menu/theme.js

@@ -0,0 +1,16 @@
+"use strict";Object.defineProperty(exports, "__esModule", { value: true });exports.default = void 0;var _themes = _interopRequireDefault(require("../themes"));function _interopRequireDefault(e) {return e && e.__esModule ? e : { default: e };}
+
+const theme = {
+  borderColor: _themes.default.colors.gray600,
+  bgColor: _themes.default.colors.white,
+  itemMinWidth: '120px',
+  animation: _themes.default.animation,
+  shadow: _themes.default.shadows[1],
+  breakpoints: _themes.default.breakpoints,
+  text: {
+    color: '#333',
+    fontWeight: 'normal'
+  }
+};var _default = exports.default =
+
+theme;

package/dist/components/product-owner/index.js

@@ -0,0 +1,85 @@
+"use strict";Object.defineProperty(exports, "__esModule", { value: true });exports.default = void 0;var _react = _interopRequireDefault(require("react"));
+var _titledAvatar = _interopRequireDefault(require("../titled-avatar"));
+var _index = require("./index.style");
+var _responsive = _interopRequireDefault(require("../responsive"));
+var _themes = _interopRequireDefault(require("../themes"));function _interopRequireDefault(e) {return e && e.__esModule ? e : { default: e };}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+const ProductOwner = (_ref) => {let {
+    name,
+    avatar,
+    isLoading,
+    isFollowed = false,
+    renderTitledAvatarLink = null,
+    renderDescriptionLink = null,
+    onClickFollowMe = () => false,
+    onClickConnectUs = () => {}
+  } = _ref;return (/*#__PURE__*/
+    _react.default.createElement("div", { "data-test": "product-owner" }, /*#__PURE__*/
+    _react.default.createElement(_responsive.default, { option: { lessThan: _themes.default.breakpoints.sm } }, /*#__PURE__*/
+    _react.default.createElement(_titledAvatar.default, {
+      title: name,
+      avatar: avatar,
+      avatarSize: _themes.default.sizes.small,
+      titleSize: 10,
+      renderAvatarLink: renderTitledAvatarLink }
+    )
+    ), /*#__PURE__*/
+    _react.default.createElement(_responsive.default, { option: { greaterThan: _themes.default.breakpoints.sm } }, /*#__PURE__*/
+    _react.default.createElement(_titledAvatar.default, {
+      title: name,
+      avatar: avatar,
+      avatarSize: _themes.default.sizes.small,
+      titleSize: 12,
+      renderAvatarLink: renderTitledAvatarLink }
+    )
+    ), /*#__PURE__*/
+    _react.default.createElement(_responsive.default, { option: { greaterThan: _themes.default.breakpoints.md } }, /*#__PURE__*/
+    _react.default.createElement(_index.ButtonContainer, null, /*#__PURE__*/
+    _react.default.createElement(_index.StyledButton, {
+      className: "follow-button",
+      styleType: isFollowed ? 'secondary' : 'primary',
+      htmlType: "button",
+      mainColor: "blue",
+      size: _themes.default.sizes.small,
+      isLoading: isLoading,
+      onClick: onClickFollowMe },
+
+    isFollowed ? 'دنبال میکنید' : 'دنبال کنید'
+    ), /*#__PURE__*/
+    _react.default.createElement(_index.StyledButton, {
+      styleType: "secondary",
+      htmlType: "button",
+      mainColor: "blue",
+      size: "sm",
+      onClick: onClickConnectUs },
+    "\u062A\u0645\u0627\u0633"
+
+    ), /*#__PURE__*/
+    _react.default.createElement(_index.StyledButton, {
+      styleType: "tertiary",
+      htmlType: "button",
+      size: "sm",
+      renderLink: renderDescriptionLink },
+    "\u062A\u0648\u0636\u06CC\u062D\u0627\u062A"
+
+    )
+    )
+    )
+    ));};var _default = exports.default =
+
+
+ProductOwner;

package/dist/components/product-owner/index.style.js

@@ -0,0 +1,16 @@
+"use strict";Object.defineProperty(exports, "__esModule", { value: true });exports.StyledButton = exports.ButtonContainer = void 0;var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _button = _interopRequireDefault(require("../button"));function _interopRequireDefault(e) {return e && e.__esModule ? e : { default: e };}
+
+const ButtonContainer = exports.ButtonContainer = _styledComponents.default.div`
+  margin-top: 12px;
+  display: flex;
+  flex-wrap: wrap;
+`;
+
+const StyledButton = exports.StyledButton = (0, _styledComponents.default)(_button.default)`
+  margin-left: 8px;
+
+  &.follow-button {
+    min-width: 88px;
+  }
+`;

package/dist/components/product-owner/index.test.js

@@ -0,0 +1,75 @@
+"use strict";var _react = _interopRequireDefault(require("react"));
+var _enzyme = require("enzyme");
+var _test = _interopRequireDefault(require("../utils/test"));
+var _index = _interopRequireDefault(require("./index"));
+var _index2 = require("./index.style");function _interopRequireDefault(e) {return e && e.__esModule ? e : { default: e };}
+
+describe('ProductOwner Tests', () => {
+  it('render ProductOwner', () => {
+    const component = (0, _enzyme.shallow)(/*#__PURE__*/_react.default.createElement(_index.default, null));
+    const productOwner = (0, _test.default)(component, 'product-owner');
+
+    expect(productOwner.length).toBe(1);
+  });
+
+  it('check connectUs button order and its functionality', () => {
+    let isConnectUsFunctionCalled = false;
+    function connectUsFunc() {isConnectUsFunctionCalled = !isConnectUsFunctionCalled;}
+
+    const component = (0, _enzyme.shallow)(/*#__PURE__*/
+      _react.default.createElement(_index.default, {
+        name: "\u0627\u0646\u062C\u0645\u0646 \u0639\u0644\u0645\u06CC \u06A9\u0627\u0645\u067E\u06CC\u0648\u062A\u0631 \u062F\u0627\u0646\u0634\u06AF\u0627\u0647 \u0635\u0646\u0639\u062A\u06CC \u062E\u0648\u0627\u062C\u0647 \u0646\u0635\u06CC\u0631\u0627\u0644\u062F\u06CC\u0646 \u0637\u0648\u0633\u06CC \u0627\u0646\u062C\u0645\u0646 \u0639\u0644\u0645\u06CC \u06A9\u0627\u0645\u067E\u06CC\u0648\u062A\u0631 \u062F\u0627\u0646\u0634\u06AF\u0627\u0647 \u0635\u0646\u0639\u062A\u06CC \u062E\u0648\u0627\u062C\u0647 \u0646\u0635\u06CC\u0631\u0627\u0644\u062F\u06CC\u0646 \u0637\u0648\u0633\u06CC",
+
+        onClickConnectUs: connectUsFunc }
+      )
+    );
+    const productOwner = (0, _test.default)(component, 'product-owner');
+    const followmeButton = productOwner.find(_index2.StyledButton).at(0);
+    const connectUsButton = productOwner.find(_index2.StyledButton).at(1);
+    const descriptionButton = productOwner.find(_index2.StyledButton).at(2);
+
+    expect(followmeButton.text()).toContain('دنبال');
+    expect(connectUsButton.text()).toContain('تماس');
+    expect(descriptionButton.text()).toContain('توضیحات');
+    expect(isConnectUsFunctionCalled).toBe(false);
+
+    expect(isConnectUsFunctionCalled).toBe(false);
+
+    connectUsButton.simulate('click');
+
+    expect(isConnectUsFunctionCalled).toBe(true);
+  });
+
+  it('check follow button place and its functionality', () => {
+    let isFollowMeFunctionCalled = false;
+    function followMeFunc() {
+      isFollowMeFunctionCalled = !isFollowMeFunctionCalled;
+      return isFollowMeFunctionCalled;
+    }
+
+    const component = (0, _enzyme.mount)(/*#__PURE__*/
+      _react.default.createElement(_index.default, {
+        name: "\u0627\u0646\u062C\u0645\u0646 \u0639\u0644\u0645\u06CC \u06A9\u0627\u0645\u067E\u06CC\u0648\u062A\u0631 \u062F\u0627\u0646\u0634\u06AF\u0627\u0647 \u0635\u0646\u0639\u062A\u06CC \u062E\u0648\u0627\u062C\u0647 \u0646\u0635\u06CC\u0631\u0627\u0644\u062F\u06CC\u0646 \u0637\u0648\u0633\u06CC \u0627\u0646\u062C\u0645\u0646 \u0639\u0644\u0645\u06CC \u06A9\u0627\u0645\u067E\u06CC\u0648\u062A\u0631 \u062F\u0627\u0646\u0634\u06AF\u0627\u0647 \u0635\u0646\u0639\u062A\u06CC \u062E\u0648\u0627\u062C\u0647 \u0646\u0635\u06CC\u0631\u0627\u0644\u062F\u06CC\u0646 \u0637\u0648\u0633\u06CC",
+
+        onClickFollowMe: followMeFunc }
+      )
+    );
+    const productOwner = (0, _test.default)(component, 'product-owner');
+    const followmeButton = productOwner.find(_index2.StyledButton).at(0);
+
+    expect(followmeButton.text()).toContain('دنبال');
+    expect(isFollowMeFunctionCalled).toBe(false);
+    expect(followmeButton.props().styleType).toBe('primary');
+
+    followmeButton.simulate('click');
+
+    expect(isFollowMeFunctionCalled).toBe(true);
+
+    // TODO: try to solve the problem of use '.state()' on hooks
+    // I cant use just 'followmeButton.props().styleType' az expect
+    // argument because the followmeButton's props doesnt update after click
+    // plus I cant check component.state() with enzyme because
+    // it doesnt support hooks('.state()' only work with class)
+    // expect(component.find(StyledButton).at(0).props().styleType).toBe('secondary');
+  });
+});

package/dist/components/product-properties/index.js

@@ -0,0 +1,65 @@
+"use strict";Object.defineProperty(exports, "__esModule", { value: true });exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+var _styledComponents = require("styled-components");
+var _globalStyle = _interopRequireDefault(require("../globalStyle"));
+var _index = require("./index.style");
+var _productProperty = _interopRequireDefault(require("./product-property"));
+var _themes = _interopRequireDefault(require("../themes"));function _interopRequireDefault(e) {return e && e.__esModule ? e : { default: e };}function _extends() {return _extends = Object.assign ? Object.assign.bind() : function (n) {for (var e = 1; e < arguments.length; e++) {var t = arguments[e];for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);}return n;}, _extends.apply(null, arguments);}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+const ProductProperties = (props) => {
+  const {
+    list,
+    isHorizontal = false,
+    color = 'black',
+    iconColor = 'gray',
+    link,
+    ...rest
+  } = props;
+  const propsLength = list.length > 1 && isHorizontal ? list.length : 1;
+
+  if (list.length === 1) {
+    return (/*#__PURE__*/
+      _react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/
+      _react.default.createElement(_globalStyle.default, null), /*#__PURE__*/
+      _react.default.createElement(_productProperty.default, _extends({ iconName: list[0].iconName, text: list[0].text }, rest))
+      ));
+
+  }
+
+  return (/*#__PURE__*/
+    _react.default.createElement(_styledComponents.ThemeProvider, { theme: _themes.default }, /*#__PURE__*/
+    _react.default.createElement(_globalStyle.default, null), /*#__PURE__*/
+    _react.default.createElement(_index.ListContainer, _extends({ isHorizontal: isHorizontal }, rest),
+    list.map((_ref, index) => {let { iconName, text, link } = _ref;return (/*#__PURE__*/
+        _react.default.createElement(_index.ListItem, { key: `${iconName}-${index.toString()}`, isHorizontal: isHorizontal, propsLength: propsLength }, /*#__PURE__*/
+        _react.default.createElement(_productProperty.default, {
+          iconName: iconName,
+          text: text,
+          color: color,
+          iconColor: iconColor,
+          link: link }
+        )
+        ));}
+    )
+    )
+    ));
+
+};var _default = exports.default =
+
+ProductProperties;

package/dist/components/product-properties/index.stories.js

@@ -0,0 +1,52 @@
+"use strict";Object.defineProperty(exports, "__esModule", { value: true });exports.default = exports.Horizontal = exports.Default = exports.CustomColors = void 0;var _react = _interopRequireDefault(require("react"));
+var _index = _interopRequireDefault(require("./index"));function _interopRequireDefault(e) {return e && e.__esModule ? e : { default: e };}var _default = exports.default =
+
+{
+  title: 'Components/ProductProperties',
+  component: _index.default,
+  argTypes: {
+    list: {
+      control: 'object',
+      description: 'Array of property items ({ iconName, text, link })'
+    },
+    isHorizontal: {
+      control: 'boolean',
+      description: 'Display properties horizontally'
+    },
+    color: {
+      control: 'select',
+      options: ['gray', 'darkBlue', 'black', 'default'],
+      description: 'Text color'
+    },
+    iconColor: {
+      control: 'select',
+      options: ['gray', 'darkBlue', 'black', 'default'],
+      description: 'Icon color'
+    }
+  }
+};
+
+const Template = (args) => /*#__PURE__*/_react.default.createElement(_index.default, args);
+
+const Default = exports.Default = Template.bind({});
+Default.args = {
+  list: [
+  { iconName: 'category', text: 'Electronics', link: undefined },
+  { iconName: 'brand', text: 'Apple', link: undefined },
+  { iconName: 'model', text: 'iPhone 13', link: undefined }],
+
+  isHorizontal: false
+};
+
+const Horizontal = exports.Horizontal = Template.bind({});
+Horizontal.args = {
+  ...Default.args,
+  isHorizontal: true
+};
+
+const CustomColors = exports.CustomColors = Template.bind({});
+CustomColors.args = {
+  ...Default.args,
+  color: 'blue', // Example custom color
+  iconColor: 'red' // Example custom icon color
+};

package/dist/components/product-properties/index.style.js

@@ -0,0 +1,14 @@
+"use strict";Object.defineProperty(exports, "__esModule", { value: true });exports.ListItem = exports.ListContainer = void 0;var _styledComponents = _interopRequireDefault(require("styled-components"));function _interopRequireDefault(e) {return e && e.__esModule ? e : { default: e };}
+
+const ListContainer = exports.ListContainer = _styledComponents.default.ul`
+  display: flex;
+  flex-direction: ${(_ref) => {let { isHorizontal } = _ref;return isHorizontal ? 'row' : 'column';}};
+  flex-wrap: wrap;
+`;
+
+const ListItem = exports.ListItem = _styledComponents.default.li`
+    margin: 2px 0;
+    min-width: calc(100% / ${(_ref2) => {let { propsLength } = _ref2;return propsLength;}});
+    &:first-child { margin-top: 0; }
+    &:last-child { margin-bottom: 0; }
+`;

package/dist/components/product-properties/index.test.js

@@ -0,0 +1,31 @@
+"use strict";var _react = _interopRequireDefault(require("react"));
+var _enzyme = require("enzyme");
+var _index = _interopRequireDefault(require("./index"));
+var _icon = _interopRequireDefault(require("../icon"));
+var _typography = require("../typography");function _interopRequireDefault(e) {return e && e.__esModule ? e : { default: e };}
+
+describe('ProductProperties Tests', () => {
+  it('should render icon and text with special property', () => {
+    const list = [{ iconName: 'watch-later', text: 'watch text' }];
+    const component = (0, _enzyme.mount)(/*#__PURE__*/_react.default.createElement(_index.default, { list: list }));
+    const IconComponent = component.find(_icon.default);
+    const TextComponent = component.find(_typography.Text);
+
+    expect(IconComponent.length).toBe(1);
+    expect(TextComponent.length).toBe(1);
+  });
+
+  it('should render multiple ProductProperty', () => {
+    const list = [
+    { iconName: 'watch-later', text: 'watch text' },
+    { iconName: 'alarm-off', text: 'another text' },
+    { iconName: 'aspect-ratio', text: 'and another text' }];
+
+    const component = (0, _enzyme.mount)(/*#__PURE__*/_react.default.createElement(_index.default, { list: list }));
+    const IconComponent = component.find(_icon.default);
+    const TextComponent = component.find(_typography.Text);
+
+    expect(IconComponent.length).toBe(3);
+    expect(TextComponent.length).toBe(3);
+  });
+});

package/dist/components/product-properties/product-property/index.js

@@ -0,0 +1,49 @@
+"use strict";Object.defineProperty(exports, "__esModule", { value: true });exports.default = void 0;var _react = _interopRequireDefault(require("react"));
+var _icon = _interopRequireDefault(require("../../icon"));
+var _typography = require("../../typography");
+var _index = _interopRequireDefault(require("./index.style"));function _interopRequireDefault(e) {return e && e.__esModule ? e : { default: e };}
+
+
+
+
+
+
+
+
+
+const ProductProperty = (props) => {
+  const {
+    iconName,
+    text,
+    color,
+    iconColor,
+    link,
+    ...rest
+  } = props;
+
+  const renderWithLink = () => /*#__PURE__*/
+  _react.default.createElement("a", { href: link }, /*#__PURE__*/
+  _react.default.createElement(_icon.default, { name: iconName, size: "sm", color: iconColor, stickyRight: true }), /*#__PURE__*/
+  _react.default.createElement(_typography.Text, { color: color, size: "12" },
+  text
+  )
+  );
+
+
+  const renderWithoutLink = () => /*#__PURE__*/
+  _react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/
+  _react.default.createElement(_icon.default, { name: iconName, size: "sm", color: iconColor, stickyRight: true }), /*#__PURE__*/
+  _react.default.createElement(_typography.Text, { color: color, size: "12" },
+  text
+  )
+  );
+
+
+  return (/*#__PURE__*/
+    _react.default.createElement(_index.default, rest,
+    link ? renderWithLink() : renderWithoutLink()
+    ));
+
+};var _default = exports.default =
+
+ProductProperty;