Admin Page: Remove dops-components as dependency (#8208)

* Remove dops-components js from webpack.config.js

* Add plan constants from dops-components

* Remove dops-components from package.json

* Copy lib/analytics from dops-components

* Copy lib/accessible-focus from dops-components

* Copy textarea from dops-components

* Copy card from dops-components

* Copy mixins/url-search from dops-components

* Copy text-input from dops-components

* Copy spinner from dops-components

* Copy select-dropdown from dops-components

* Copy section-header from dops-components

* Copy search from dops-components

* Copy notice from dops-components

* Copy modal from dops-components

* Copy info-popover from dops-components

* Copy gridicon from dops-components

* Copy global-notices from dops-components

* Copy form from dops-components

* Copy banner from dops-components

* copy button from dops-components

* Copy button-group from dops-components

* Copy chart from dops-components

* Copy clipboard-button-input from dops-components

* Copy count from dops-components

* Copy external-link from dops-components

* Copy tooltip from dops-components

* Copy section-nav from dops-components

* Copy popover from dops-components

* Copy plans from dops-components

* Copy form-input-validation from dops-components

* Add clipboard as dependency

* copy scss/calypso-colors from dops-components

* copy scss/layout from dops-components

* Copy scss/mixin_long-content-fade from dops-components

* Copy scss/rem from dops-components

* Copy scss/z-index from dops-components

* Copy scss/color-functions from dops-components

* Copy scss/calypso-mixing from dops-components

* Copy scss/mixin_breakpoint from dops-components

* Copy scss/mixin_clear-fix from dops-components

* Copy scss/mixin_icons from dops-components

* Copy scss/typography from dops-components

* Add bounding-client-rect as dependency

* Add click-outside as dependency

* add component-uid as dependency

* Copy root-child from dops-components

* Add focus-trap as dependency

* Copy foldable-card from dops components

Also, rename current _inc/client/components/foldable-card/style.scss to
style2.css as we’re overriding some styles. Hope it works

* Copy lib/touch-detect from dops-components

* Copy lib/viewport from dops-components

* Add react-pure-render as dependency

* Add page.js as dependency

* Copy notices from dops-components

* Copy mixins/emitter from dops-components

* Lint: Remove unnecessary test for count component

* lint: Remove unused variable from CompactFormToggle tests

* Lint: use id in FormCheck example for compliance with jsx-a11y/label-has-for

* Lint: use id in InfoPopover example for compliance with jsx-a11y/label-has-for

* Lint: Disable jsx-a11y/no-onchange rule for example in InfoPopover docs

* Lint: remove unused variable from count test

* Lint: Remove console statment from sectio-nav docs example

* Remove console statements from select-dropdown docs example

* Lint: Disable jsx-a11y/no-onchange rule for example in Popover docs

* Disable jsx-a11y/click-events-have-key-events for popover docs example

* Disable jsx-a11y/onclick-has-role for popover docs example

* Disable jsx-a11y/onclick-has-role and jsx-a11y/click-events-have-key-events for select-dropdown docs example

* Disable jsx-a11y/onclick-has-role and jsx-a11y/click-events-have-key-events for button-group docs example

* Disable jsx-a11y/onclick-has-role and jsx-a11y/click-events-have-key-events for chart legend

* Use onFocus in popover menu item

_inc/client/components/banner/README.md

@@ -0,0 +1,53 @@
+# Banner
+
+This component renders a customizable banner.
+
+## Props:
+
+- *callToAction* - shows a CTA text.
+- *className* - any additional CSS classes.
+- *description* - the banner description.
+- *dismissPreferenceName*: the user preference name that we store a boolean against, prefixed with 'dismissible-card-' to avoid namespace collisions.
+- *dismissTemporary*: when true, clicking on the cross will dismiss the card for the current page load.
+- *event* - event to distinguish the nudge in tracks. Used as `cta_name` event property.
+- *feature* - slug of the feature to highlight in the plans compare card.
+- *href* - the component target URL.
+- *icon* - the component icon.
+- *list* - a list of the upgrade features.
+- *onClick* - a function associated to the click on the whole banner or just the CTA or dismiss button.
+- *plan* - PlanSlug of the plan that upgrade leads to.
+- *price* - one or two (original/discounted) upgrade prices.
+- *title* - (required) the banner title.
+
+If `href` is not provided, `feature` can auto-generate it.
+
+If `callToAction` is provided, `href` and `onClick` are not applied to the whole banner, but to the `callToAction` button only.
+
+If `dismissPreferenceName` is provided, `href` is only applied if `callToAction` is provided.
+
+## Usage:
+
+```js
+import { PLAN_BUSINESS, FEATURE_ADVANCED_SEO } from 'lib/plans/constants';
+import Banner from 'components/banner';
+
+render() {
+	return (
+		<Banner
+			callToAction="Upgrade now!"
+			description="Obtain more features."
+			dismissPreferenceName="example-banner"
+			dismissTemporary={ true }
+			event="track_event"
+			feature={ FEATURE_ADVANCED_SEO }
+			href="https://wordpress.com/"
+			icon="star"
+			list={ [ 'A feature', 'Another feature' ] }
+			onClick={ someFunction }
+			plan={ PLAN_BUSINESS }
+			prices={ [ 10.99, 9.99 ] }
+			title="Upgrade to a better plan!"
+		/>
+	);
+}
+```

_inc/client/components/banner/index.jsx

@@ -0,0 +1,171 @@
+/**
+ * External dependencies
+ */
+import React, { Component, PropTypes } from 'react';
+import { connect } from 'react-redux';
+import classNames from 'classnames';
+import noop from 'lodash/noop';
+import size from 'lodash/size';
+
+/**
+ * Internal dependencies
+ */
+import { getPlanClass } from 'lib/plans/constants';
+import Button from 'components/button';
+import Card from 'components/card';
+import Gridicon from 'components/gridicon';
+import PlanIcon from 'components/plans/plan-icon';
+
+require( './style.scss' );
+
+class Banner extends Component {
+
+	static propTypes = {
+		callToAction: PropTypes.string,
+		className: PropTypes.string,
+		description: PropTypes.string,
+		event: PropTypes.string,
+		feature: PropTypes.string, // PropTypes.oneOf( getValidFeatureKeys() ),
+		href: PropTypes.string,
+		icon: PropTypes.string,
+		list: PropTypes.arrayOf( PropTypes.string ),
+		onClick: PropTypes.func,
+		plan: PropTypes.string,
+		siteSlug: PropTypes.string,
+		title: PropTypes.string.isRequired
+	};
+
+	static defaultProps = {
+		onClick: noop
+	};
+
+	getHref() {
+		const {
+			href,
+			feature,
+			siteSlug,
+		} = this.props;
+
+		if ( ! href && siteSlug ) {
+			if ( feature ) {
+				return `/plans/${ siteSlug }?feature=${ feature }`;
+			}
+			return `/plans/${ siteSlug }`;
+		}
+		return href;
+	}
+
+	handleClick = () => {
+		this.props.onClick();
+	};
+
+	getIcon() {
+		const {
+			icon,
+			plan,
+		} = this.props;
+
+		if ( plan && ! icon ) {
+			return (
+				<div className="dops-banner__icon-plan">
+					<PlanIcon plan={ plan } />
+				</div>
+			);
+		}
+
+		return (
+			<div className="dops-banner__icons">
+				<div className="dops-banner__icon">
+					<Gridicon icon={ icon || 'info-outline' } size={ 18 } />
+				</div>
+				<div className="dops-banner__icon-circle">
+					<Gridicon icon={ icon || 'info-outline' } size={ 18 } />
+				</div>
+			</div>
+		);
+	}
+
+	getContent() {
+		const {
+			callToAction,
+			description,
+			list,
+			title,
+		} = this.props;
+
+		return (
+			<div className="dops-banner__content">
+				<div className="dops-banner__info">
+					<div className="dops-banner__title">
+						{ title }
+					</div>
+					{ description &&
+						<div className="dops-banner__description">
+							{ description }
+						</div>
+					}
+					{ size( list ) > 0 &&
+						<ul className="dops-banner__list">
+							{ list.map( ( item, key ) =>
+								<li key={ key }>
+									<Gridicon icon="checkmark" size={ 18 } />
+									{ item }
+								</li>
+							) }
+						</ul>
+					}
+				</div>
+				{ callToAction &&
+					<div className="dops-banner__action">
+						{ callToAction &&
+							<Button
+								compact
+								href={ this.getHref() }
+								onClick={ this.handleClick }
+								primary
+							>
+								{ callToAction }
+							</Button>
+						}
+					</div>
+				}
+			</div>
+		);
+	}
+
+	render() {
+		const {
+			callToAction,
+			className,
+			plan,
+		} = this.props;
+		const planClass = getPlanClass( plan );
+
+		const classes = classNames(
+			'dops-banner',
+			className,
+			{ 'has-call-to-action': callToAction },
+			{ 'is-upgrade-personal': 'is-personal-plan' === planClass },
+			{ 'is-upgrade-premium': 'is-premium-plan' === planClass },
+			{ 'is-upgrade-business': 'is-business-plan' === planClass }
+		);
+
+		return (
+			<Card
+				className={ classes }
+				href={ callToAction ? null : this.getHref() }
+				onClick={ callToAction ? noop : this.handleClick }
+			>
+				{ this.getIcon() }
+				{ this.getContent() }
+			</Card>
+		);
+	}
+
+}
+
+const mapStateToProps = () => ( {} );
+
+export default connect(
+	mapStateToProps
+)( Banner );