Merge pull request #210 from iCHEF/release/3.0.0

Release 3.0.0

CHANGELOG.md

@@ -5,6 +5,25 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/)
 and this project adheres to [Semantic Versioning](http://semver.org/).
 
 ## [Unreleased]
+N/A
+
+## [3.0.0]
+### Breaking
+- [Core] Add `verticalOrder` prop to `<Text>` so you can swap the position of `basic` and `aside`. Also applied to `rowComp()` mixin.
+- [Core] Rewrite `<TextInput>` to match latest design, offering single-line `<input>`, multi-line `<textarea>` and supports custom rendering via render prop.
+- [Form] `<TextInputRow>` now renders the new `<TextInput>` and forwards almost every prop to it, **without** a ref to its inner input.
+- [Core] Add `<Avatar>` to display an image.
+
+### Changed
+- [ImageEditor] Add new instance method `getImageCanvas()` to get current image canvas element.
+- [ImageEditor] Add new props `scale` & `onScaleChange` to make scale value of editor can be controlled.
+- [Core] Refactored `closable()` mixin to detect inside/outside clicks via React SyntheticEvent mechanism instead of listening native events from DOM.
+- [Storybook] Fix mangled component name in storybook build. (#203)
+- [Storybook] Update examples for core `<TextInput>` and form `<TextInputRow>`. (#203)
+- [Core] Change `rowComp()` to allow the appearance of `<Avatar>` alongside the text. (#208)
+- [Core] Change `<Checkbox>` to display `<Avatar>`. (#208)
+- [Form] Change `<SelectRow>` and `<Checkbox>` to display `<Avatar>`. (#208)
+- [Storybook] Add examples for `<Avatar>` and the list components with `<Avatar>`s. (#208)
 
 ## [2.1.0]
 ### Changed

README.md

@@ -70,7 +70,7 @@ Gypcrete does not publish develop builds to the `dist` branch anymore. It now pu
 When releasing a new build for Gypcrete, follow the steps:
 
 1. Create a release branch `release/x.y.z`
-2. *(Optionally)* release beta builds with `yarn release:beta`.
+2. *(Optionally)* release beta builds with `yarn release:beta --cd-version=prepatch` (or preminor/premajor).
 3. Bump version for `package.json` and `CHANGELOG`.
 4. Bump children packages version with script:
    ```sh

lerna.json

@@ -3,7 +3,7 @@
   "packages": [
     "packages/*"
   ],
-  "version": "2.1.0",
+  "version": "3.0.0",
   "npmClient": "yarn",
   "useWorkspaces": true,
   "commands": {

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ichef/gypcrete",
-  "version": "2.1.0",
+  "version": "3.0.0",
   "description": "iCHEF web components library, built with React.",
   "homepage": "https://ichef.github.io/gypcrete",
   "repository": "https://github.com/iCHEF/gypcrete/tree/master/packages/core",
@@ -39,7 +39,8 @@
     "create-react-context": "^0.2.3",
     "document-offset": "^1.0.4",
     "keycode": "^2.1.9",
-    "memoize-one": "^4.0.3"
+    "memoize-one": "^4.0.3",
+    "react-textarea-autosize": "^7.1.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.1.0",

packages/core/src/Avatar.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+import './styles/Avatar.scss';
+
+import icBEM from './utils/icBEM';
+import prefixClass from './utils/prefixClass';
+
+const COMPONENT_NAME = prefixClass('avatar');
+const ROOT_BEM = icBEM(COMPONENT_NAME);
+
+const SQUARE = 'square';
+const ROUNDED = 'rounded';
+const CIRCLE = 'circle';
+export const AVATAR_TYPE = { SQUARE, ROUNDED, CIRCLE };
+
+function Avatar({
+    className,
+    src,
+    alt,
+    type,
+    ...otherProps
+}) {
+    const bemClass = ROOT_BEM.modifier(type);
+
+    const rootClassName = classNames(className, `${bemClass}`);
+
+    return (
+        <div className={rootClassName} {...otherProps}>
+            <img alt={alt} src={src} />
+        </div>
+    );
+}
+
+Avatar.propTypes = {
+    src: PropTypes.string.isRequired,
+    alt: PropTypes.string.isRequired,
+    type: PropTypes.oneOf(Object.values(AVATAR_TYPE)),
+};
+
+Avatar.defaultProps = {
+    type: SQUARE,
+};
+
+export default Avatar;

packages/core/src/Popover.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
 import ListSpacingContext from './contexts/listSpacing';
@@ -24,10 +25,13 @@ export const BEM = {
 };
 
 function Popover({
+    onClick,
     // from anchored()
     placement,
     arrowStyle,
     nodeRef,
+    // from closable()
+    onInsideClick,
     // React props
     className,
     children,
@@ -36,9 +40,19 @@ function Popover({
     const bemClass = BEM.root.modifier(placement);
     const rootClassName = classNames(bemClass.toString(), className);
 
+    const handleWrapperClick = (event) => {
+        onInsideClick(event);
+        onClick(event);
+    };
+
     return (
         <ListSpacingContext.Provider value={false}>
-            <div className={rootClassName} ref={nodeRef} {...otherProps}>
+            <div
+                role="presentation"
+                className={rootClassName}
+                ref={nodeRef}
+                onClick={handleWrapperClick}
+                {...otherProps}>
                 <span className={BEM.arrow} style={arrowStyle} />
                 <div className={BEM.container}>
                     {children}
@@ -49,12 +63,15 @@ function Popover({
 }
 
 Popover.propTypes = {
+    onClick: PropTypes.func,
     placement: anchoredPropTypes.placement,
     arrowStyle: anchoredPropTypes.arrowStyle,
     nodeRef: anchoredPropTypes.nodeRef,
+    onInsideClick: PropTypes.func.isRequired,
 };
 
 Popover.defaultProps = {
+    onClick: () => {},
     placement: ANCHORED_PLACEMENT.BOTTOM,
     arrowStyle: {},
     nodeRef: undefined,

packages/core/src/Text.js

@@ -41,9 +41,18 @@ const CENTER = 'center';
 const RIGHT = 'right';
 export const TEXT_ALIGN = { LEFT, CENTER, RIGHT };
 
+export const VERTICAL_ORDER = {
+    NORMAL: 'normal',
+    REVERSE: 'reverse',
+};
+
 class Text extends PureComponent {
     static propTypes = {
         align: PropTypes.oneOf(Object.values(TEXT_ALIGN)),
+        verticalOrder: PropTypes.oneOf([
+            VERTICAL_ORDER.NORMAL,
+            VERTICAL_ORDER.REVERSE,
+        ]),
         aside: PropTypes.node,
         basicRow: PropTypes.element,
         noGrow: PropTypes.bool,
@@ -61,6 +70,7 @@ class Text extends PureComponent {
 
     static defaultProps = {
         align: LEFT,
+        verticalOrder: VERTICAL_ORDER.NORMAL,
         aside: undefined,
         basicRow: <BasicRow />,
         noGrow: false,
@@ -109,10 +119,11 @@ class Text extends PureComponent {
     }
 
     render() {
-        const { align, noGrow, bold, className } = this.props;
+        const { align, verticalOrder, noGrow, bold, className } = this.props;
 
         const bemClass = BEM.root
             .modifier(align)
+            .modifier(`v-${verticalOrder}`)
             .modifier('no-grow', noGrow)
             .modifier('bold', bold);