tg-core-components 5.2.1-history-time-label.0 → 5.3.0-master.1

package/lib/widgets/SportsbookSettings/index.js

@@ -35,31 +35,17 @@ var SportsbookSettings = function SportsbookSettings(_ref) {
 
   return _react2.default.createElement(
     'form',
-    {
-      onSubmit: onSubmit,
-      className: (0, _classnames2.default)('SportsbookSettings', 'form', className) },
+    { onSubmit: onSubmit, className: (0, _classnames2.default)('SportsbookSettings', className) },
     Array.isArray(selects) && selects.map(function (s, i) {
-      return _react2.default.createElement(
-        _Select2.default,
-        {
-          key: i,
-          name: s.name,
-          label: s.title,
-          value: s.value,
-          onChange: s.onChange || onChange },
-        s.placeholder && _react2.default.createElement(
-          _Select2.default.Option,
-          { value: '', selected: true },
-          s.placeholder
-        ),
-        s.options.map(function (o) {
-          return _react2.default.createElement(
-            _Select2.default.Option,
-            { value: o.value },
-            o.label
-          );
-        })
-      );
+      return _react2.default.createElement(_Select2.default, {
+        key: i,
+        name: s.name,
+        title: s.title,
+        options: s.options,
+        value: s.value,
+        placeholder: s.placeholder,
+        onChange: s.onChange || onChange
+      });
     }),
     _react2.default.createElement(
       _Button2.default,

package/lib/widgets/Subscriptions/index.js

@@ -22,14 +22,6 @@ var _translate = require('../../lib/utils/translate');
 
 var _translate2 = _interopRequireDefault(_translate);
 
-var _Button = require('../../components/Button');
-
-var _Button2 = _interopRequireDefault(_Button);
-
-var _Input = require('../../components/Input');
-
-var _Input2 = _interopRequireDefault(_Input);
-
 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"); } }
@@ -167,10 +159,10 @@ var Subscriptions = function (_React$Component) {
           return _react2.default.createElement(
             'div',
             { key: index, className: 'subscribe-item' },
-            _react2.default.createElement(_Input2.default, {
+            _react2.default.createElement('input', {
               id: 'newsletter-checkbox-' + index,
               type: 'checkbox',
-              value: option.OptIn,
+              checked: option.OptIn,
               onChange: function onChange(e) {
                 return _this3.onClickCheckbox({ e: e, option: option });
               }
@@ -185,7 +177,7 @@ var Subscriptions = function (_React$Component) {
           );
         }),
         _react2.default.createElement(
-          _Button2.default,
+          'button',
           {
             className: 'button primary',
             disabled: isLoading,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tg-core-components",
-  "version": "5.2.1-history-time-label.0",
+  "version": "5.3.0-master.1",
   "description": "tg-core-components",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -16,6 +16,8 @@
     "build:clean": "rm -rf ./es && rm -rf ./lib",
     "prepublish": "npm run build",
     "lint": "eslint src",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook",
     "guide": "yarn styleguidist server",
     "guide:build": "yarn styleguidist build"
   },
@@ -38,7 +40,7 @@
   "peerDependencies": {
     "classnames": "^2.2.6",
     "final-form": "^4.20.1",
-    "marked": "^2.0.0",
+    "marked": "^1.1.1",
     "prop-types": "^15.7.2",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
@@ -48,6 +50,7 @@
     "react-transition-group": "^4.4.1"
   },
   "devDependencies": {
+    "@storybook/react": "^3.2.17",
     "babel-cli": "^6.26.0",
     "babel-core": "^6.26.3",
     "babel-plugin-react-intl": "^2.3.1",
@@ -67,14 +70,16 @@
     "ejs": "^2.5.1",
     "enzyme": "^3.2.0",
     "eslint": "^4.11.0",
+    "react-addons-test-utils": "^15.6.2",
     "react-helmet": "^5.2.0",
     "react-prism": "^4.3.1",
     "react-scripts": "^1.0.17",
     "react-styleguidist": "^6.2.6",
     "react-test-renderer": "^16.2.0",
     "react-transition-group": "^2.2.1",
+    "storybook-addon-intl": "^2.2.0",
     "webpack": "^3.0.0",
     "webpack-blocks": "^1.0.0"
   },
-  "gitHead": "bd811331d5d817c3afd8be1b870b49da852f264f"
+  "gitHead": "e51624c16e8d2d380987c4606d11b6c81e6cff4d"
 }

package/es/components/Input/BirthdateInput.js

@@ -1,171 +0,0 @@
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = 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; }
-
-import React from 'react';
-import { Select, Input, useId, useValue, useFocus, createClassName, flatObj } from '../common';
-import Translate from '../Translate';
-import translate from '../../lib/utils/translate';
-import cn from 'classnames';
-import { useIntl } from 'react-intl';
-
-var pad = function pad(num) {
-  return ('' + num).length === 1 ? '0' + num : num;
-};
-var yearRange = new Array(100).fill(null, 0, 100).map(function (y, i) {
-  return new Date().getFullYear() - 18 - i;
-});
-var monthRange = new Array(12).fill(null, 0, 12).map(function (m, i) {
-  return i + 1;
-});
-var dayRange = new Array(31).fill(null, 0, 31).map(function (d, i) {
-  return i + 1;
-});
-
-var BirthdateInput = function BirthdateInput(props) {
-  var intl = useIntl();
-
-  var yearInput = {
-    id: useId(),
-    value: useValue(props.value.split('/')[0]),
-    focus: useFocus()
-  };
-
-  var monthInput = {
-    id: useId(),
-    value: useValue(props.value.split('/')[1]),
-    focus: useFocus()
-  };
-
-  var dayInput = {
-    id: useId(),
-    value: useValue(props.value.split('/')[2]),
-    focus: useFocus()
-  };
-
-  var createValue = function createValue() {
-    var _Object$values;
-
-    var id = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
-    var value = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
-    return Object.values((_Object$values = {}, _defineProperty(_Object$values, yearInput.id, yearInput.value.value), _defineProperty(_Object$values, monthInput.id, monthInput.value.value), _defineProperty(_Object$values, dayInput.id, dayInput.value.value), _defineProperty(_Object$values, id, value), _Object$values)).join('/');
-  };
-
-  var _onChange = function _onChange(e) {
-    return props.onChange && props.onChange(e, createValue(e.target.id, e.target.value));
-  };
-
-  var _onBlur = function _onBlur(e) {
-    return props.onBlur && props.onBlur(e, createValue(e.target.id, e.target.value));
-  };
-
-  var inputs = [yearInput, monthInput, dayInput];
-  var className = createClassName('tg-birthdate-input', {
-    hasValue: inputs.some(function (i) {
-      return i.value.hasValue;
-    }),
-    hasFocus: inputs.some(function (i) {
-      return i.focus.hasFocus;
-    }),
-    status: props.status
-  });
-
-  return React.createElement(
-    'div',
-    { className: cn(props.className, className) },
-    React.createElement(
-      'label',
-      { className: 'tg-birthdate-input__label' },
-      props.label
-    ),
-    React.createElement(
-      Select,
-      _extends({}, flatObj(yearInput), {
-        name: props.name + '_year',
-        label: React.createElement(Translate, { id: 'label.year-of-birth', defaultMessage: 'Year' }),
-        status: props.status,
-        onChange: function onChange(e) {
-          yearInput.value.onChange(e.target.value);
-          _onChange(e);
-        },
-        onBlur: function onBlur(e) {
-          yearInput.focus.onBlur();
-          _onBlur(e);
-        } }),
-      !yearInput.value.hasValue && React.createElement(
-        Select.Option,
-        { value: '', selected: true, disabled: true },
-        translate({ id: 'label.year-of-birth', defaultMessage: 'Year' }, intl)
-      ),
-      yearRange.map(function (y) {
-        return React.createElement(
-          Select.Option,
-          { key: y, value: y },
-          y
-        );
-      })
-    ),
-    React.createElement(
-      Select,
-      _extends({}, flatObj(monthInput), {
-        name: props.name + '_month',
-        label: React.createElement(Translate, { id: 'label.month-of-birth', defaultMessage: 'Month' }),
-        status: props.status,
-        onChange: function onChange(e) {
-          monthInput.value.onChange(e.target.value);
-          _onChange(e);
-        },
-        onBlur: function onBlur(e) {
-          monthInput.focus.onBlur();
-          _onBlur(e);
-        } }),
-      !monthInput.value.hasValue && React.createElement(
-        Select.Option,
-        { value: '', selected: true, disabled: true },
-        translate({ id: 'label.month-of-birth', defaultMessage: 'Month' }, intl)
-      ),
-      monthRange.map(function (m) {
-        return React.createElement(
-          Select.Option,
-          { key: m, value: pad(m) },
-          m
-        );
-      })
-    ),
-    React.createElement(
-      Select,
-      _extends({}, flatObj(dayInput), {
-        name: props.name + '_day',
-        label: React.createElement(Translate, { id: 'label.day-of-birth', defaultMessage: 'Day' }),
-        status: props.status,
-        onChange: function onChange(e) {
-          dayInput.value.onChange(e.target.value);
-          _onChange(e);
-        },
-        onBlur: function onBlur(e) {
-          dayInput.focus.onBlur();
-          _onBlur(e);
-        } }),
-      !dayInput.value.hasValue && React.createElement(
-        Select.Option,
-        { value: '', selected: true, disabled: true },
-        translate({ id: 'label.day-of-birth', defaultMessage: 'Day' }, intl)
-      ),
-      dayRange.map(function (d) {
-        return React.createElement(
-          Select.Option,
-          { key: d, value: pad(d) },
-          d
-        );
-      })
-    ),
-    React.createElement(Input, { type: 'hidden', name: props.name, value: createValue() }),
-    React.createElement(
-      'div',
-      { className: 'tg-birthdate-input__status-text' },
-      props.statusText
-    )
-  );
-};
-
-export default BirthdateInput;

package/es/components/Input/Checkbox.js

@@ -1,51 +0,0 @@
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
-import React from 'react';
-import { Checkbox, useId, useValue, useFocus, useTouched, useAutofill, createClassName, flatObj } from '../common';
-import cn from 'classnames';
-
-var TGCheckbox = function TGCheckbox(props) {
-  var checkbox = {
-    id: useId(),
-    value: useValue(props.value),
-    focus: useFocus(),
-    touched: useTouched(),
-    autofill: useAutofill()
-  };
-
-  var _onChange = function _onChange(e) {
-    return props.onChange && props.onChange(e, e.target.checked ? 'true' : '');
-  };
-
-  var className = createClassName('tg-checkbox', {
-    hasValue: checkbox.value.hasValue,
-    hasLabel: Boolean(props.label),
-    hasFocus: checkbox.focus.hasFocus,
-    hasTouched: checkbox.touched.hasTouched,
-    hasAutofill: checkbox.autofill.hasAutofill,
-    disabled: props.disabled,
-    status: props.status
-  });
-
-  return React.createElement(
-    'div',
-    { className: cn(props.className, className) },
-    React.createElement(Checkbox, _extends({}, props, flatObj(checkbox), {
-      onChange: function onChange(e) {
-        checkbox.value.onChange(e.target.checked ? 'true' : '');
-        _onChange(e);
-      },
-      onFocus: function onFocus() {
-        checkbox.focus.onFocus();
-        checkbox.touched.onFocus();
-      }
-    })),
-    React.createElement(
-      'div',
-      { className: 'tg-checkbox__status-text' },
-      props.statusText
-    )
-  );
-};
-
-export default TGCheckbox;

package/es/components/Input/Input.js

@@ -1,73 +0,0 @@
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
-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; }
-
-import React from 'react';
-import { Input, useId, useValue, useFocus, useTouched, useAutofill, createClassName, statusIcons, flatObj } from '../common';
-import cn from 'classnames';
-
-var TGInput = function TGInput(_ref) {
-  var icon = _ref.icon,
-      props = _objectWithoutProperties(_ref, ['icon']);
-
-  var input = {
-    id: useId(),
-    value: useValue(props.value),
-    focus: useFocus(),
-    touched: useTouched(),
-    autofill: useAutofill()
-  };
-
-  var _onChange = function _onChange(e) {
-    return props.onChange && props.onChange(e, e.target.value);
-  };
-
-  var _onBlur = function _onBlur(e) {
-    return props.onBlur && props.onBlur(e, e.target.value);
-  };
-
-  var className = createClassName('tg-input', {
-    hasValue: input.value.hasValue,
-    hasLabel: Boolean(props.label),
-    hasFocus: input.focus.hasFocus,
-    hasTouched: input.touched.hasTouched,
-    hasAutofill: input.autofill.hasAutofill,
-    disabled: props.disabled,
-    status: props.status
-  });
-
-  return React.createElement(
-    'div',
-    { className: cn(props.className, className) },
-    React.createElement(Input, _extends({}, props, flatObj(input), {
-      onChange: function onChange(e) {
-        if (typeof props.transform === 'function') {
-          e.target.value = props.transform(e.target.value);
-        }
-        input.value.onChange(e.target.value);
-        _onChange(e);
-      },
-      onFocus: function onFocus() {
-        input.focus.onFocus();
-        input.touched.onFocus();
-      },
-      onBlur: function onBlur(e) {
-        input.focus.onBlur();
-        _onBlur(e);
-      },
-      leadingLane: [icon].filter(function (i) {
-        return i;
-      }),
-      trailingLane: [statusIcons[props.status]].filter(function (i) {
-        return i;
-      })
-    })),
-    React.createElement(
-      'div',
-      { className: 'tg-input__status-text' },
-      props.statusText
-    )
-  );
-};
-
-export default TGInput;

package/es/components/Input/PasswordInput.js

@@ -1,84 +0,0 @@
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
-import React from 'react';
-import Icon from '../Icon';
-import { Input, useId, useValue, useFocus, useTouched, useType, createClassName, statusIcons, useAutofill, flatObj } from '../common';
-import cn from 'classnames';
-
-var PasswordInput = function PasswordInput(props) {
-  var input = {
-    id: useId(),
-    value: useValue(props.value),
-    focus: useFocus(),
-    touched: useTouched(),
-    type: useType(props.type),
-    autofill: useAutofill()
-  };
-
-  var _onChange = function _onChange(e) {
-    return props.onChange && props.onChange(e, e.target.value);
-  };
-
-  var _onBlur = function _onBlur(e) {
-    return props.onBlur && props.onBlur(e, e.target.value);
-  };
-
-  var togglePasswordVisibility = function togglePasswordVisibility() {
-    return input.type.setType(input.type.type === 'password' ? 'text' : 'password');
-  };
-
-  var icons = {
-    password: React.createElement(Icon, {
-      icon: 'eye-slash',
-      className: 'tg-password-input__toggle',
-      onClick: togglePasswordVisibility
-    }),
-    text: React.createElement(Icon, {
-      icon: 'eye',
-      className: 'tg-password-input__toggle',
-      onClick: togglePasswordVisibility
-    })
-  };
-
-  var className = createClassName('tg-password-input', {
-    hasValue: input.value.hasValue,
-    hasLabel: Boolean(props.label),
-    hasFocus: input.focus.hasFocus,
-    hasTouched: input.touched.hasTouched,
-    hasAutofill: input.autofill.hasAutofill,
-    disabled: props.disabled,
-    status: props.status
-  });
-
-  return React.createElement(
-    'div',
-    { className: cn(props.className, className) },
-    React.createElement(Input, _extends({}, props, flatObj(input), {
-      onChange: function onChange(e) {
-        input.value.onChange(e.target.value);
-        _onChange(e);
-      },
-      onFocus: function onFocus() {
-        input.focus.onFocus();
-        input.touched.onFocus();
-      },
-      onBlur: function onBlur(e) {
-        input.focus.onBlur();
-        _onBlur(e);
-      },
-      leadingLane: [props.icon].filter(function (i) {
-        return i;
-      }),
-      trailingLane: [icons[input.type.type], statusIcons[props.status]].filter(function (i) {
-        return i;
-      })
-    })),
-    React.createElement(
-      'div',
-      { className: 'tg-password-input__status-text' },
-      props.statusText
-    )
-  );
-};
-
-export default PasswordInput;