Merge branch 'master' into james/Checkbox-js-tsx

CHANGELOG.md

@@ -3,6 +3,38 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.13.4](https://github.com/wework/ray/compare/v1.13.3...v1.13.4) (2019-10-15)
+
+**Note:** Version bump only for package root
+
+
+
+
+
+## [1.13.3](https://github.com/wework/ray/compare/v1.13.2...v1.13.3) (2019-10-14)
+
+**Note:** Version bump only for package root
+
+
+
+
+
+## [1.13.2](https://github.com/wework/ray/compare/v1.13.1...v1.13.2) (2019-10-10)
+
+**Note:** Version bump only for package root
+
+
+
+
+
+## [1.13.1](https://github.com/wework/ray/compare/v1.13.0...v1.13.1) (2019-10-08)
+
+**Note:** Version bump only for package root
+
+
+
+
+
 # [1.13.0](https://github.com/wework/ray/compare/v1.12.4...v1.13.0) (2019-10-01)
 
 

lerna.json

@@ -13,7 +13,7 @@
   "packages": [
     "packages/*"
   ],
-  "version": "1.13.0",
+  "version": "1.13.4",
   "npmClient": "yarn",
   "useWorkspaces": true
 }

packages/product-react/CHANGELOG.md

@@ -3,6 +3,38 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.13.4](https://github.com/wework/ray/compare/v1.13.3...v1.13.4) (2019-10-15)
+
+**Note:** Version bump only for package @wework/ray-product-react
+
+
+
+
+
+## [1.13.3](https://github.com/wework/ray/compare/v1.13.2...v1.13.3) (2019-10-14)
+
+**Note:** Version bump only for package @wework/ray-product-react
+
+
+
+
+
+## [1.13.2](https://github.com/wework/ray/compare/v1.13.1...v1.13.2) (2019-10-10)
+
+**Note:** Version bump only for package @wework/ray-product-react
+
+
+
+
+
+## [1.13.1](https://github.com/wework/ray/compare/v1.13.0...v1.13.1) (2019-10-08)
+
+**Note:** Version bump only for package @wework/ray-product-react
+
+
+
+
+
 # [1.13.0](https://github.com/wework/ray/compare/v1.12.4...v1.13.0) (2019-10-01)
 
 

packages/product-react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wework/ray-product-react",
-  "version": "1.13.0",
+  "version": "1.13.4",
   "description": "",
   "main": "dist/umd/index.js",
   "module": "dist/es/index.js",
@@ -36,6 +36,8 @@
     "@storybook/addon-links": "^5.1.9",
     "@storybook/addons": "^5.1.9",
     "@storybook/react": "^5.1.9",
+    "@types/enzyme": "^3.10.3",
+    "@types/enzyme-adapter-react-16": "^1.0.5",
     "awesome-typescript-loader": "^5.2.1",
     "babel-loader": "^8.0.6",
     "enzyme": "^3.10.0",
@@ -46,6 +48,7 @@
     "gulp-rename": "^1.4.0",
     "gulp-sourcemaps": "^2.6.5",
     "gulp-uglify": "^3.0.2",
+    "husky": "^3.0.8",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^24.8.0",
     "prop-types": "^15.7.2",

packages/product-react/src/components/Common/FieldWrapper.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+
+const FieldWrapper: React.FC<{
+  renderWrapper?: boolean;
+  fieldClass?: string;
+}> = ({ children, renderWrapper, fieldClass }) =>
+  renderWrapper ? (
+    <div className={fieldClass}>{children}</div>
+  ) : (
+    <>{children}</>
+  );
+
+export default FieldWrapper;

packages/product-react/src/components/Common/FormItemWrapper.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+
+const FormItemWrapper: React.FC<{ renderWrapper?: boolean }> = ({
+  children,
+  renderWrapper
+}) =>
+  renderWrapper ? (
+    <div className="ray-form-item">{children}</div>
+  ) : (
+    <>{children}</>
+  );
+
+export default FormItemWrapper;

packages/product-react/src/components/Common/IconWrapper.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+
+const IconWrapper: React.FC<{
+  renderWrapper?: boolean;
+  iconClass?: string;
+}> = ({ children, renderWrapper, iconClass }) =>
+  renderWrapper && children ? (
+    <div className={iconClass}>{children}</div>
+  ) : (
+    <>{children}</>
+  );
+
+export default IconWrapper;

packages/product-react/src/components/Common/RTLWrapper.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+
+const RTLWrapper: React.FC<{ renderWrapper?: boolean }> = ({
+  children,
+  renderWrapper
+}) => (renderWrapper ? <div dir="rtl">{children}</div> : <>{children}</>);
+
+export default RTLWrapper;

packages/product-react/src/components/Select/Select.scss

@@ -0,0 +1,4 @@
+//overwriting ray componentdefault style -webkit-appearance: true
+.ray-select__input {
+  -webkit-appearance: none;
+}

packages/product-react/src/components/Select/Select.test.tsx

@@ -0,0 +1,134 @@
+import React from 'react';
+import Enzyme from 'enzyme';
+import { IconPosition, Select } from './Select';
+
+describe('Select', () => {
+  const fauxCallback = jest.fn();
+  let component: Enzyme.ReactWrapper<any>;
+
+  beforeEach(() => {
+    component = Enzyme.mount(
+      <Select
+        options={[
+          { value: 1, label: 'Wework ' },
+          { value: 2, label: 'WeLive ' },
+          { value: 3, label: 'WeGrow ' },
+          { value: 4, label: 'WeTech ' }
+        ]}
+      />
+    );
+  });
+
+  test('it renders a select', () => {
+    const wrapper = component;
+    expect(wrapper.find('.ray-select').length).toBe(1);
+  });
+
+  test('it supports a custom class', () => {
+    component.setProps({
+      active: true,
+      className: 'some-custom-class',
+      id: 'selecttest',
+      label: 'henlo'
+    });
+
+    expect(component.find('.ray-select.some-custom-class').length).toBe(1);
+  });
+
+  describe('Default Properties', () => {
+    it('has default "ACTIVE" property that can be set (:boolean)', () => {
+      component.setProps({ active: true });
+      expect(component.props().active).toEqual(true);
+    });
+
+    it('has default "COMPACT" property that can be set (:boolean)', () => {
+      component.setProps({ compact: true });
+      expect(component.props().compact).toEqual(true);
+    });
+
+    it('has default "ERROR" property that can be set (:boolean)', () => {
+      component.setProps({ error: true });
+      expect(component.props().error).toEqual(true);
+    });
+
+    it('has default "ICONSTART" property that can be set (:string)', () => {
+      component.setProps({
+        iconPosition: IconPosition.Start,
+        icon: (
+          <svg className="ray-select__icon--start" viewBox="0 0 25 25">
+            <g id="budicon-profile-picture">
+              <path d="M12.5,4A4.5,4.5,0,1,0,17,8.5,4.5,4.5,0,0,0,12.5,4Zm0,8A3.5,3.5,0,1,1,16,8.5,3.504,3.504,0,0,1,12.5,12Zm0-12A12.4886,12.4886,0,0,0,5.0007,22.4834v0a12.4325,12.4325,0,0,0,14.9983,0v0q.5-.3761.9593-.7988l0,0A12.4869,12.4869,0,0,0,12.5,0Zm0,24a11.4432,11.4432,0,0,1-7.3931-2.7041,7.4887,7.4887,0,0,1,14.7863,0A11.4432,11.4432,0,0,1,12.5,24Zm8.25-3.5061a8.4871,8.4871,0,0,0-16.5,0,11.5,11.5,0,1,1,16.5,0Z" />
+            </g>
+          </svg>
+        )
+      });
+      expect(component.find('.ray-select--with-icon-start')).toHaveLength(1);
+    });
+
+    it('has default "ICONEND" property that can be set (:string)', () => {
+      component.setProps({
+        iconPosition: IconPosition.End,
+        rtl: true,
+        icon: (
+          <svg className="ray-select__icon--start" viewBox="0 0 25 25">
+            <g id="budicon-profile-picture">
+              <path d="M12.5,4A4.5,4.5,0,1,0,17,8.5,4.5,4.5,0,0,0,12.5,4Zm0,8A3.5,3.5,0,1,1,16,8.5,3.504,3.504,0,0,1,12.5,12Zm0-12A12.4886,12.4886,0,0,0,5.0007,22.4834v0a12.4325,12.4325,0,0,0,14.9983,0v0q.5-.3761.9593-.7988l0,0A12.4869,12.4869,0,0,0,12.5,0Zm0,24a11.4432,11.4432,0,0,1-7.3931-2.7041,7.4887,7.4887,0,0,1,14.7863,0A11.4432,11.4432,0,0,1,12.5,24Zm8.25-3.5061a8.4871,8.4871,0,0,0-16.5,0,11.5,11.5,0,1,1,16.5,0Z" />
+            </g>
+          </svg>
+        )
+      });
+      expect(component.find('.ray-select--with-icon-start')).toHaveLength(1);
+    });
+
+    it('has value property that can be set (:number || string)', () => {
+      const component = Enzyme.mount(
+        <Select
+          value={4}
+          options={[
+            { value: 1, label: 'Wework ' },
+            { value: 2, label: 'WeLive ' },
+            { value: 3, label: 'WeGrow ' },
+            { value: 4, label: 'WeTech ' }
+          ]}
+        />
+      );
+      expect(component.props().value).toEqual(4);
+    });
+  });
+
+  describe('Classes & Composed Classes', () => {
+    it('contains DEFAULT', () => {
+      expect(component.find('.ray-select')).toHaveLength(1);
+      expect(component.find('select').hasClass('ray-select__input')).toEqual(
+        true
+      );
+      expect(component.find('label').hasClass('ray-select__label')).toEqual(
+        true
+      );
+    });
+
+    it('contains specific class if select is in focus/blur (aka "active"/"inactive")', () => {
+      component.setProps({ active: true });
+      expect(component.find('.ray-select--active')).toHaveLength(0);
+      component.find('select').simulate('focus');
+      expect(component.find('.ray-select--active')).toHaveLength(1);
+    });
+  });
+
+  describe('Functions events', () => {
+    it('onFocus', () => {
+      component.setProps({ onFocus: fauxCallback });
+      component.find('select').simulate('focus');
+    });
+
+    it('onBlur', () => {
+      component.setProps({ onBlur: fauxCallback });
+      component.find('select').simulate('blur');
+    });
+
+    it('onChange', () => {
+      component.setProps({ onChange: fauxCallback });
+      component.find('select').simulate('change');
+    });
+  });
+});