tg-core-components 6.1.9-intl-test.0 → 6.2.0-alpha.0

package/es/widgets/BonusOffers/List.js

@@ -0,0 +1,83 @@
+import React from 'react';
+import marked from 'marked';
+import getByPath from 'lodash/get';
+import { FormattedMessage } from 'react-intl';
+import AccordionWidget from '../AccordionWidget';
+import { getStatus } from '../../lib/utils/bonus';
+
+var Item = function Item(_ref) {
+  var bonus = _ref.bonus,
+      content = _ref.content,
+      status = _ref.status,
+      defaultImage = _ref.defaultImage;
+  return React.createElement(
+    'div',
+    { className: 'List__Item' },
+    React.createElement(
+      'div',
+      {
+        className: 'List__Item__image',
+        style: {
+          backgroundImage: 'url(' + getByPath(content, 'image.file.url', defaultImage) + ')'
+        } },
+      status === 'active' && React.createElement(
+        'span',
+        { className: 'List__Item__image__badge' },
+        React.createElement(FormattedMessage, { id: 'label.' + bonus.State.toLowerCase() })
+      )
+    ),
+    React.createElement(
+      'div',
+      { className: 'List__Item__content' },
+      React.createElement(
+        'div',
+        { className: 'List__Item__content__name' },
+        getByPath(content, 'name') || bonus.Name
+      ),
+      React.createElement(
+        'div',
+        { className: 'List__Item__content__summary' },
+        getByPath(content, 'summary') || bonus.Description
+      ),
+      React.createElement('div', {
+        className: 'List__Item__content__disclaimer',
+        dangerouslySetInnerHTML: {
+          __html: marked(getByPath(content, 'disclaimer') || '')
+        }
+      })
+    )
+  );
+};
+
+var List = function List(_ref2) {
+  var bonuses = _ref2.bonuses,
+      content = _ref2.content,
+      defaultImage = _ref2.defaultImage,
+      selectBonus = _ref2.selectBonus;
+
+  return React.createElement(
+    'div',
+    { className: 'List' },
+    React.createElement(AccordionWidget, {
+      onClickHeader: function onClickHeader(e, key, item) {
+        return selectBonus(item.item);
+      },
+      items: bonuses.map(function (b, i) {
+        return {
+          customClass: getStatus(b),
+          item: b,
+          header: React.createElement(Item, {
+            bonus: b,
+            status: getStatus(b),
+            content: content.find(function (c) {
+              return c.identifier === b.Identifier;
+            }),
+            defaultImage: defaultImage
+          })
+        };
+      })
+    })
+  );
+};
+
+export default List;

package/es/widgets/BonusOffers/Overview.js

@@ -0,0 +1,51 @@
+function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
+
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+import Icon from '../../components/Icon';
+import Notice from '../CashierAccordion/Payment/Notice';
+import List from './List.js';
+import BonusCode from './BonusCode.js';
+import Finished from './Finished';
+
+var Overview = function Overview(_ref) {
+  var bonuses = _ref.bonuses,
+      content = _ref.content,
+      defaultImage = _ref.defaultImage,
+      selectBonus = _ref.selectBonus,
+      onPreClaim = _ref.onPreClaim,
+      alert = _ref.alert;
+
+  var availableBonuses = [].concat(_toConsumableArray(bonuses.active), _toConsumableArray(bonuses.available));
+  var finishedBonuses = bonuses.finished;
+
+  return React.createElement(
+    'div',
+    { className: 'Overview' },
+    alert && React.createElement(Notice, {
+      level: alert.level,
+      icon: alert.level === 'success' ? React.createElement(Icon, { icon: 'check' }) : React.createElement(Icon, { icon: 'stop-circle' }),
+      header: React.createElement(FormattedMessage, { id: 'label.bonus-offers.' + alert.type })
+    }),
+    React.createElement(FormattedMessage, {
+      id: 'label.bonus-offers.overview-title',
+      defaultMessage: 'My Offers',
+      tagName: 'h3'
+    }),
+    availableBonuses.length === 0 && React.createElement(FormattedMessage, {
+      id: 'label.bonus-offers.overview-no-offers',
+      defaultMessage: 'No bonus offers available...',
+      tagName: 'p'
+    }),
+    availableBonuses.length > 0 && React.createElement(List, {
+      bonuses: availableBonuses,
+      content: content,
+      defaultImage: defaultImage,
+      selectBonus: selectBonus
+    }),
+    React.createElement(BonusCode, { onSubmit: onPreClaim }),
+    finishedBonuses.length > 0 && React.createElement(Finished, { bonuses: finishedBonuses })
+  );
+};
+
+export default Overview;

package/es/widgets/BonusOffers/index.js

@@ -0,0 +1,78 @@
+var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();
+
+import React, { useState, useEffect } from 'react';
+import Overview from './Overview';
+import Details from './Details';
+import { categorizeByState, getWageringProgress, getStatus } from '../../lib/utils/bonus';
+
+var BonusOffers = function BonusOffers(_ref) {
+  var bonuses = _ref.bonuses,
+      content = _ref.content,
+      defaultImage = _ref.defaultImage,
+      onClaim = _ref.onClaim,
+      onCancel = _ref.onCancel,
+      onReject = _ref.onReject,
+      onPreClaim = _ref.onPreClaim,
+      onTriggerByPromoCode = _ref.onTriggerByPromoCode,
+      onOther = _ref.onOther,
+      getBonus = _ref.getBonus,
+      alerts = _ref.alerts,
+      removeAlert = _ref.removeAlert,
+      scrollToTop = _ref.scrollToTop;
+
+  var _useState = useState(null),
+      _useState2 = _slicedToArray(_useState, 2),
+      selectedBonus = _useState2[0],
+      _selectBonus = _useState2[1];
+
+  var mappedBonuses = categorizeByState(bonuses);
+  var alert = alerts && alerts.length > 0 ? alerts[0] : null;
+
+  useEffect(function () {
+    scrollToTop();
+    alert && removeAlert(alert.type);
+  }, [selectedBonus]);
+
+  useEffect(function () {
+    alert && scrollToTop();
+  }, [alert]);
+
+  return React.createElement(
+    'div',
+    { className: 'BonusOffers' },
+    !selectedBonus && React.createElement(Overview, {
+      bonuses: mappedBonuses,
+      content: content,
+      defaultImage: defaultImage,
+      selectBonus: function selectBonus(bonus) {
+        return _selectBonus(bonus);
+      },
+      onPreClaim: onPreClaim,
+      alert: alert
+    }),
+    selectedBonus && React.createElement(Details, {
+      bonus: selectedBonus,
+      content: content.find(function (c) {
+        return c.identifier === selectedBonus.Identifier;
+      }) || {},
+      defaultImage: defaultImage,
+      wageringProgress: getWageringProgress(selectedBonus),
+      onBack: function onBack() {
+        return _selectBonus(null);
+      },
+      status: getStatus(selectedBonus),
+      onClaim: onClaim,
+      onReject: onReject,
+      onCancel: onCancel,
+      onTriggerByPromoCode: onTriggerByPromoCode,
+      onOther: onOther,
+      getBonus: getBonus,
+      selectBonus: function selectBonus(bonus) {
+        return _selectBonus(bonus);
+      },
+      alert: alert
+    })
+  );
+};
+
+export default BonusOffers;

package/es/widgets/BonusWidget/index.js

@@ -1,5 +1,7 @@
 var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();
 
+function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
+
 import React, { useState } from 'react';
 import { FormattedNumber, FormattedDate } from 'react-intl';
 import AccordionWidget from '../AccordionWidget';
@@ -127,7 +129,10 @@ var BonusWidget = function BonusWidget(_ref3) {
   var bonuses = _ref3.bonuses,
       handleBonusCodeSubmit = _ref3.handleBonusCodeSubmit,
       onClaimBonus = _ref3.onClaimBonus,
-      onRejectBonus = _ref3.onRejectBonus;
+      onRejectBonus = _ref3.onRejectBonus,
+      _ref3$exclude = _ref3.exclude,
+      exclude = _ref3$exclude === undefined ? [] : _ref3$exclude,
+      disableBonusCodeForm = _ref3.disableBonusCodeForm;
 
   var bonusList = { active: null, available: null, finished: null };
 
@@ -262,19 +267,25 @@ var BonusWidget = function BonusWidget(_ref3) {
 
   var menu = {
     identifier: 'account-history',
-    items: [{
+    items: [].concat(_toConsumableArray(!exclude.includes('active') ? [{
       name: React.createElement(Translate, { id: 'label.active', defaultMessage: 'Activate' }),
       content: React.createElement(List, { data: bonusList['active'], noData: 'list.no_data.active' })
-    }, {
+    }] : []), _toConsumableArray(!exclude.includes('available') ? [{
       name: React.createElement(Translate, { id: 'label.available', defaultMessage: 'Available' }),
-      content: React.createElement(List, { data: bonusList['available'], noData: 'list.no_data.available' })
-    }, {
+      content: React.createElement(List, {
+        data: bonusList['available'],
+        noData: 'list.no_data.available'
+      })
+    }] : []), _toConsumableArray(!exclude.includes('finished') ? [{
       name: React.createElement(Translate, { id: 'label.finished', defaultMessage: 'Finished' }),
-      content: React.createElement(List, { data: bonusList['finished'], noData: 'list.no_data.finished' })
-    }, {
+      content: React.createElement(List, {
+        data: bonusList['finished'],
+        noData: 'list.no_data.finished'
+      })
+    }] : []), _toConsumableArray(disableBonusCodeForm && {
       name: React.createElement(Translate, { id: 'label.bonus_code', defaultMessage: 'Bonus code' }),
       content: React.createElement(BonusCode, { handleSubmit: handleBonusCodeSubmit })
-    }]
+    }))
   };
 
   var items = menu.items.map(function (item, i) {

package/lib/components/Message/index.js

@@ -0,0 +1,57 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _Icon = require('../Icon');
+
+var _Icon2 = _interopRequireDefault(_Icon);
+
+var _classnames = require('classnames');
+
+var _classnames2 = _interopRequireDefault(_classnames);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var Message = function Message(_ref) {
+  var closeButton = _ref.closeButton,
+      count = _ref.count,
+      onClick = _ref.onClick,
+      onClose = _ref.onClose,
+      content = _ref.content,
+      className = _ref.className,
+      icon = _ref.icon;
+
+  return _react2.default.createElement(
+    'div',
+    { className: (0, _classnames2.default)('Message', className), onClick: onClick },
+    closeButton && _react2.default.createElement(
+      'span',
+      { className: 'close', onClick: onClose },
+      _react2.default.createElement(_Icon2.default, { icon: 'times' })
+    ),
+    icon && _react2.default.createElement(
+      'div',
+      { className: 'icon' },
+      _react2.default.createElement(_Icon2.default, { icon: '' + icon })
+    ),
+    _react2.default.createElement(
+      'div',
+      { className: 'content' },
+      content
+    ),
+    count && _react2.default.createElement(
+      'div',
+      { className: 'count' },
+      count
+    ),
+    _react2.default.createElement(_Icon2.default, { icon: 'chevron-right' })
+  );
+};
+
+exports.default = Message;

package/lib/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.AutocompleteInput = exports.Skeleton = exports.countryEmojiFlags = exports.Picture = exports.Translate = exports.VerifyAccordionWidget = exports.List = exports.ResponsibleGamingWidget = exports.ResponsibleGamingSingleSignUp = exports.ResponsibleGamingAccordionSignUp = exports.ResponsibleGamingAccordion = exports.WithdrawWidgetAccordion = exports.DepositWidgetAccordion = exports.SportsbookHistoryTable = exports.PaymentHistoryTable = exports.CasinoHistoryTable = exports.Subscriptions = exports.Verify = exports.TableWidget = exports.Settings = exports.Pagination = exports.SignIn = exports.RequestResetPassword = exports.ResetPassword = exports.ChangePassword = exports.ChangeUsername = exports.SignUp = exports.Withdraw = exports.Deposit = exports.Bonus = exports.Balance = exports.ActivateWidget = exports.AccountDetail = exports.AccordionWidget = exports.Uploader = exports.Textarea = exports.Single = exports.Select = exports.Radio = exports.Notification = exports.Money = exports.Loader = exports.InternalMessagesInbox = exports.Input = exports.Image = exports.Icon = exports.Checklist = exports.ButtonLoader = exports.Button = exports.Alert = exports.AcceptUpdatedTaC = undefined;
+exports.AutocompleteInput = exports.Skeleton = exports.countryEmojiFlags = exports.Picture = exports.Translate = exports.VerifyAccordionWidget = exports.List = exports.ResponsibleGamingWidget = exports.ResponsibleGamingSingleSignUp = exports.ResponsibleGamingAccordionSignUp = exports.ResponsibleGamingAccordion = exports.WithdrawWidgetAccordion = exports.DepositWidgetAccordion = exports.SportsbookHistoryTable = exports.PaymentHistoryTable = exports.CasinoHistoryTable = exports.Subscriptions = exports.Verify = exports.TableWidget = exports.Settings = exports.Pagination = exports.SignIn = exports.RequestResetPassword = exports.ResetPassword = exports.ChangePassword = exports.ChangeUsername = exports.SignUp = exports.Withdraw = exports.Deposit = exports.Bonus = exports.Balance = exports.ActivateWidget = exports.AccountDetail = exports.AccordionWidget = exports.Uploader = exports.Textarea = exports.Single = exports.Select = exports.Radio = exports.Notification = exports.Money = exports.Loader = exports.InternalMessagesInbox = exports.Input = exports.Image = exports.Icon = exports.Checklist = exports.ButtonLoader = exports.Button = exports.Alert = exports.AcceptUpdatedTaC = exports.BonusOffers = undefined;
 
 var _AcceptUpdatedTaC = require('./components/AcceptUpdatedTaC');
 
@@ -205,12 +205,19 @@ var _VerifyAccordionWidget = require('./widgets/VerifyAccordionWidget');
 
 var _VerifyAccordionWidget2 = _interopRequireDefault(_VerifyAccordionWidget);
 
+var _BonusOffers = require('./widgets/BonusOffers');
+
+var _BonusOffers2 = _interopRequireDefault(_BonusOffers);
+
 var _countryEmojiFlags = require('./misc/countryEmojiFlags');
 
 var _countryEmojiFlags2 = _interopRequireDefault(_countryEmojiFlags);
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+// widgets
+// components
+exports.BonusOffers = _BonusOffers2.default;
 exports.AcceptUpdatedTaC = _AcceptUpdatedTaC2.default;
 exports.Alert = _Alert2.default;
 exports.Button = _Button2.default;
@@ -263,8 +270,4 @@ exports.countryEmojiFlags = _countryEmojiFlags2.default;
 exports.Skeleton = _Skeleton2.default;
 exports.AutocompleteInput = _AutocompleteInput2.default;
 
-// misc
-
-
-// widgets
-// components
+// misc

package/lib/lib/utils/bonus.js

@@ -0,0 +1,52 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var bonusMapping = exports.bonusMapping = {
+  InPlay: 'active',
+  Active: 'active',
+  Initiated: 'available',
+  PreClaimed: 'available',
+  PreWager: 'available',
+  Expired: 'finished',
+  Rejected: 'finished',
+  Finished: 'finished',
+  Canceled: 'finished',
+  FinishedNoGains: 'finished',
+  AdminCanceled: 'finished'
+};
+
+var categorizeByState = exports.categorizeByState = function categorizeByState(bonuses) {
+  return {
+    available: bonuses.filter(function (b) {
+      return bonusMapping[b.State] === 'available';
+    }),
+    active: bonuses.filter(function (b) {
+      return bonusMapping[b.State] === 'active';
+    }),
+    finished: bonuses.filter(function (b) {
+      return bonusMapping[b.State] === 'finished';
+    })
+  };
+};
+
+var getStatus = exports.getStatus = function getStatus(bonus) {
+  return bonusMapping[bonus.State];
+};
+
+var getWageringProgress = exports.getWageringProgress = function getWageringProgress(bonus) {
+  var wageringRequirement = bonusMapping[bonus.State] === 'available' ? bonus.PreWageringRequirment : bonus.WageringRequirment;
+
+  var wageringRequirementRemaining = bonusMapping[bonus.State] === 'available' ? bonus.PreWageringRequirmentRemaining : bonus.WageringRequirmentRemaining;
+
+  return Boolean(wageringRequirement) ? (100 - wageringRequirementRemaining / wageringRequirement * 100).toFixed(2) : null;
+};
+
+var getNumberOfAvailableBonuses = exports.getNumberOfAvailableBonuses = function getNumberOfAvailableBonuses(bonuses) {
+  if (!Array.isArray(bonuses) || bonuses.length < 1) return 0;
+
+  return bonuses.filter(function (b) {
+    return bonusMapping[b.State] === 'available';
+  }).length;
+};

package/lib/lib/utils/selectUnit.js

@@ -13,51 +13,55 @@ var MILISECONDS = {
   IN_A_YEAR: 31536000000
 };
 
-var selectUnit = exports.selectUnit = function selectUnit(from) {
+var selectUnit = exports.selectUnit = function selectUnit(value) {
+  var isFuture = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+
   var now = Date.now();
-  var ms = now - from;
+  var ms = isFuture ? value - now : now - value;
+
+  var operatorCalc = isFuture ? 1 : -1;
 
   switch (true) {
     case MILISECONDS.IN_A_SECOND < ms && ms < MILISECONDS.IN_A_MINUTE:
       return {
-        value: -1 * Math.floor(ms / MILISECONDS.IN_A_SECOND),
+        value: operatorCalc * Math.floor(ms / MILISECONDS.IN_A_SECOND),
         unit: 'second',
         updateIntervalInSeconds: 1
       };
 
     case MILISECONDS.IN_A_MINUTE < ms && ms < MILISECONDS.IN_AN_HOUR:
       return {
-        value: -1 * Math.floor(ms / MILISECONDS.IN_A_MINUTE),
+        value: operatorCalc * Math.floor(ms / MILISECONDS.IN_A_MINUTE),
         unit: 'minute'
       };
 
     case MILISECONDS.IN_AN_HOUR < ms && ms < MILISECONDS.IN_A_DAY:
       return {
-        value: -1 * Math.floor(ms / MILISECONDS.IN_AN_HOUR),
+        value: operatorCalc * Math.floor(ms / MILISECONDS.IN_AN_HOUR),
         unit: 'hour'
       };
 
     case MILISECONDS.IN_A_DAY < ms && ms < MILISECONDS.IN_A_WEEK:
       return {
-        value: -1 * Math.floor(ms / MILISECONDS.IN_A_DAY),
+        value: operatorCalc * Math.floor(ms / MILISECONDS.IN_A_DAY),
         unit: 'day'
       };
 
     case MILISECONDS.IN_A_WEEK < ms && ms < MILISECONDS.IN_A_MONTH:
       return {
-        value: -1 * Math.floor(ms / MILISECONDS.IN_A_WEEK),
+        value: operatorCalc * Math.floor(ms / MILISECONDS.IN_A_WEEK),
         unit: 'week'
       };
 
     case MILISECONDS.IN_A_MONTH < ms && ms < MILISECONDS.IN_A_YEAR:
       return {
-        value: -1 * Math.floor(ms / MILISECONDS.IN_A_MONTH),
+        value: operatorCalc * Math.floor(ms / MILISECONDS.IN_A_MONTH),
         unit: 'month'
       };
 
     case MILISECONDS.IN_A_YEAR < ms:
       return {
-        value: -1 * Math.floor(ms / MILISECONDS.IN_A_YEAR),
+        value: operatorCalc * Math.floor(ms / MILISECONDS.IN_A_YEAR),
         unit: 'year'
       };
 

package/lib/lib/utils/translate.js

@@ -8,13 +8,15 @@ var _extends = Object.assign || function (target) { for (var i = 1; i < argument
 
 function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
 
+var cache = {};
+
 var translate = function translate(_ref, intl) {
   var id = _ref.id,
       values = _ref.values,
       rest = _objectWithoutProperties(_ref, ['id', 'values']);
 
   var cacheId = id + (JSON.stringify(values) || '');
-  if (cache[intl.locale][cacheId]) return cache[cacheId];
+  if (cache[cacheId]) return cache[cacheId];
 
   var g = typeof window !== 'undefined' && window || typeof global !== 'undefined' && global || {};
 
@@ -23,7 +25,7 @@ var translate = function translate(_ref, intl) {
   if (g.showTranslations || !intl || !intl.formatMessage) return id;
 
   var message = intl.formatMessage(_extends({ id: id }, rest), values);
-  cache[intl.locale][cacheId] = message;
+  cache[cacheId] = message;
   return message;
 };
 

package/lib/widgets/AccordionWidget/index.js

@@ -28,6 +28,10 @@ var _Icon = require('../../components/Icon');
 
 var _Icon2 = _interopRequireDefault(_Icon);
 
+var _classnames = require('classnames');
+
+var _classnames2 = _interopRequireDefault(_classnames);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -36,6 +40,8 @@ function _possibleConstructorReturn(self, call) { if (!self) { throw new Referen
 
 function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
 
+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 AccordionHeader = function AccordionHeader(_ref) {
   var expanded = _ref.expanded,
       header = _ref.header,
@@ -102,10 +108,14 @@ var AccordionContent = function AccordionContent(_ref2) {
 var AccordionItem = function AccordionItem(_ref3) {
   var header = _ref3.header,
       content = _ref3.content,
-      expanded = _ref3.expanded;
+      expanded = _ref3.expanded,
+      customClass = _ref3.customClass;
   return _react2.default.createElement(
     'div',
-    { className: 'AccordionItem' + (expanded ? ' AccordionItem--expanded' : '') },
+    {
+      className: (0, _classnames2.default)('AccordionItem', _defineProperty({
+        'AccordionItem--expanded': expanded
+      }, 'AccordionItem--' + customClass, customClass)) },
     header,
     content
   );
@@ -194,7 +204,8 @@ var Accordion = function (_Component) {
             animationDuration: animationDuration,
             contentCollapsedHeight: contentCollapsedHeight
           }),
-          key: index
+          key: index,
+          customClass: item.customClass
         };
       });