feat(ui): poc

packages/ui/.npmrc

@@ -0,0 +1 @@
+package-lock=false

packages/ui/CHANGELOG.md

@@ -0,0 +1,35 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+# 0.2.0 (2020-10-15)
+
+
+### Features
+
+* **ui:** create ui library + add base components ([9ede4ea](https://github.com/elementor/elementor-editor-packages/commit/9ede4ea2610eb6bbac62713ef3a8271f2ebf3a08))
+
+
+
+
+
+## [0.1.3](https://github.com/elementor/elementor-editor-packages/compare/@elementor/ui@0.1.2...@elementor/ui@0.1.3) (2020-10-13)
+
+**Note:** Version bump only for package @elementor/ui
+
+
+
+
+
+## [0.1.2](https://github.com/elementor/elementor-editor-packages/compare/@elementor/ui@0.1.1...@elementor/ui@0.1.2) (2020-10-13)
+
+**Note:** Version bump only for package @elementor/ui
+
+
+
+
+
+## [0.1.1](https://github.com/elementor/elementor-editor-packages/compare/@elementor/ui@0.1.0...@elementor/ui@0.1.1) (2020-10-13)
+
+**Note:** Version bump only for package @elementor/ui

packages/ui/README.md

@@ -0,0 +1,3 @@
+# @elementor/ui
+
+### Do not use it!

packages/ui/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@elementor/ui",
+  "version": "0.2.0",
+  "description": "Elementor UI library",
+  "author": "Elementor Team",
+  "homepage": "https://github.com/elementor/elementor-editor-packages",
+  "license": "ISC",
+  "main": "build/index.js",
+  "module": "build/index.es.js",
+  "files": [
+    "build",
+    "src"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/elementor/elementor-editor-packages",
+    "directory": "packages/ui"
+  },
+  "publishConfig": {
+    "registry": "https://npm.pkg.github.com/"
+  },
+  "peerDependencies": {
+    "react": "^16.8.0",
+    "react-dom": "^16.8.0"
+  },
+  "dependencies": {
+    "@babel/runtime": "^7.11.2",
+    "prop-types": "^15.7.2"
+  }
+}

packages/ui/src/components/add-new-button/index.js

@@ -0,0 +1,27 @@
+import PropTypes from 'prop-types';
+
+import Button from '../button';
+
+export default class AddNewButton extends Button {
+	getClassName() {
+		let className = this.props.className;
+
+		if (this.props.size) {
+			className += ' eps-add-new-button--' + this.props.size;
+		}
+
+		return className;
+	}
+
+	static propTypes = {
+		...Button.propTypes,
+		text: PropTypes.string,
+		size: PropTypes.string,
+	};
+
+	static defaultProps = {
+		...Button.defaultProps,
+		className: 'eps-add-new-button',
+		icon: 'eicon-plus',
+	};
+}

packages/ui/src/components/add-new-button/style.scss

@@ -0,0 +1,33 @@
+$eps-add-new-button-background-color: theme-colors(info);
+$eps-add-new-button-icon-color: theme-colors(light);
+$eps-add-new-button-size: spacing(24);
+$eps-add-new-button-size-sm: spacing(16);
+$eps-add-new-button-icon-size-ratio: 0.75;
+$eps-add-new-button-font-weight: $eps-font-weight-medium;
+
+.#{$eps-prefix}add-new-button {
+	display: inline-flex;
+	--eps-add-new-button-size: #{$eps-add-new-button-size};
+	line-height: var(--eps-add-new-button-size);
+	cursor: pointer;
+
+	.eps-icon {
+		background-color: $eps-add-new-button-background-color;
+		color: $eps-add-new-button-icon-color;
+		width: var(--eps-add-new-button-size);
+		height: var(--eps-add-new-button-size);
+		border-radius: 100%;
+		font-size: calc(var(--eps-add-new-button-size) * #{$eps-add-new-button-icon-size-ratio});
+		text-align: center;
+		line-height: var(--eps-add-new-button-size);
+	}
+
+	span:not(.sr-only) {
+		margin-inline-start: spacing(10);
+		font-weight: $eps-add-new-button-font-weight;
+	}
+
+	&--sm {
+		--eps-add-new-button-size: #{$eps-add-new-button-size-sm};
+	}
+}

packages/ui/src/components/button/api.scss

@@ -0,0 +1,132 @@
+// BTN API
+$button-font-weight: $eps-font-weight-medium;
+$button-line-height: 16px;
+$button-padding-y: 0.5em;
+$button-padding-x: 1.5em;
+$button-border-radius: $eps-radius;
+$button-hover-constant: 5%;
+$button-active-constant: 3%;
+// sizing
+// -- sm
+$button-sm-font-size: type(text,xs);
+$button-sm-line-height: 14px;
+// --lg
+$button-lg-font-size: type(text,lg);
+$button-lg-line-height: 18px;
+//Semantic Colors
+$button-primary-background-color: theme-colors(success);
+$button-primary-hover-background-color: darken($button-primary-background-color, $button-hover-constant);
+$button-primary-active-background-color: darken($button-primary-background-color, $button-active-constant);
+$button-primary-color: theme-colors(light);
+$button-secondary-background-color: tints(400);
+$button-secondary-hover-background-color: darken($button-secondary-background-color, $button-hover-constant);
+$button-secondary-active-background-color: darken($button-secondary-background-color, $button-active-constant);
+$button-secondary-color: theme-colors(light);
+$button-danger-background-color: theme-colors(danger);
+$button-danger-hover-background-color: darken($button-danger-background-color, $button-hover-constant);
+$button-danger-active-background-color: darken($button-danger-background-color, $button-active-constant);
+$button-danger-color: theme-colors(light);
+$button-cta-background-color: theme-colors(cta);
+$button-cta-hover-background-color: darken($button-cta-background-color, $button-hover-constant);
+$button-cta-active-background-color: darken($button-cta-background-color, $button-active-constant);
+$button-cta-color: theme-colors(light);
+$button-link-background-color: theme-elements-colors(link-color);
+$button-link-hover-background-color: darken($button-link-background-color, $button-hover-constant);
+$button-link-active-background-color: darken($button-link-background-color, $button-active-constant);
+$button-link-color: theme-colors(light);
+$button-disabled-background-color: theme-colors(disabled);
+$button-disabled-hover-background-color: darken($button-disabled-background-color, $button-hover-constant);
+$button-disabled-active-background-color: darken($button-disabled-background-color, $button-active-constant);
+$button-disabled-color: theme-colors(light);
+// -- dark
+$button-dark-primary-background-color: dark-theme-colors(success);
+$button-dark-primary-color: dark-theme-colors(light);
+$button-dark-primary-hover-background-color: darken($button-dark-primary-background-color, $button-hover-constant);
+$button-dark-primary-active-background-color: darken($button-dark-primary-background-color, $button-active-constant);
+$button-dark-secondary-background-color: dark-tints(400);
+$button-dark-secondary-hover-background-color: darken($button-dark-secondary-background-color, $button-hover-constant);
+$button-dark-secondary-active-background-color: darken($button-dark-secondary-background-color, $button-active-constant);
+$button-dark-secondary-color: dark-theme-colors(light);
+$button-dark-danger-background-color: dark-theme-colors(danger);
+$button-dark-danger-hover-background-color: darken($button-dark-danger-background-color, $button-hover-constant);
+$button-dark-danger-active-background-color: darken($button-dark-danger-background-color, $button-active-constant);
+$button-dark-danger-color: dark-theme-colors(light);
+$button-dark-cta-background-color: dark-theme-colors(cta);
+$button-dark-cta-hover-background-color: darken($button-dark-cta-background-color, $button-hover-constant);
+$button-dark-cta-active-background-color: darken($button-dark-cta-background-color, $button-active-constant);
+$button-dark-cta-color: dark-theme-colors(light);
+$button-dark-link-background-color: theme-elements-colors(link-color);
+$button-dark-link-hover-background-color: darken($button-dark-link-background-color, $button-hover-constant);
+$button-dark-link-active-background-color: darken($button-dark-link-background-color, $button-active-constant);
+$button-dark-link-color: theme-colors(light);
+$button-dark-disabled-background-color: dark-theme-colors(disabled);
+$button-dark-disabled-hover-background-color: darken($button-dark-disabled-background-color, $button-hover-constant);
+$button-dark-disabled-active-background-color: darken($button-dark-disabled-background-color, $button-active-constant);
+$button-dark-disabled-color: dark-theme-colors(light);
+
+// using mixing to transfer custom properties
+@mixin button-custom-properties() {
+	--button-line-height: #{$button-line-height};
+	--button-padding-y: #{$button-padding-y};
+	--button-padding-x: #{$button-padding-x};
+	// primary
+	--button-primary-background-color: #{$button-primary-background-color};
+	--button-primary-hover-background-color: #{$button-primary-hover-background-color};
+	--button-primary-active-background-color: #{$button-primary-active-background-color};
+	--button-primary-color: #{$button-primary-color};
+	// secondary
+	--button-secondary-background-color: #{$button-secondary-background-color};
+	--button-secondary-hover-background-color: #{$button-secondary-hover-background-color};
+	--button-secondary-active-background-color: #{$button-secondary-active-background-color};
+	--button-secondary-color: #{$button-secondary-color};
+	// danger
+	--button-danger-background-color: #{$button-danger-background-color};
+	--button-danger-hover-background-color: #{$button-danger-hover-background-color};
+	--button-danger-active-background-color: #{$button-danger-active-background-color};
+	--button-danger-color: #{$button-danger-color};
+	// cta
+	--button-cta-background-color: #{$button-cta-background-color};
+	--button-cta-hover-background-color: #{$button-cta-hover-background-color};
+	--button-cta-active-background-color: #{$button-cta-active-background-color};
+	--button-cta-color: #{$button-cta-color};
+	// link
+	--button-link-background-color: #{$button-link-background-color};
+	--button-link-hover-background-color: #{$button-link-hover-background-color};
+	--button-link-active-background-color: #{$button-link-active-background-color};
+	--button-link-color: #{$button-link-color};
+	// disabled
+	--button-disabled-background-color: #{$button-disabled-background-color};
+	--button-disabled-hover-background-color: #{$button-disabled-hover-background-color};
+	--button-disabled-active-background-color: #{$button-disabled-active-background-color};
+	--button-disabled-color: #{$button-disabled-color};
+}
+
+@mixin button-dark-custom-properties() {
+	// primary
+	--button-primary-background-color: #{$button-dark-primary-background-color};
+	--button-primary-color: #{$button-dark-primary-color};
+	--button-primary-hover-background-color: #{$button-dark-primary-hover-background-color};
+	--button-primary-active-background-color: #{$button-dark-primary-active-background-color};
+	// secondary
+	--button-secondary-background-color: #{$button-dark-secondary-background-color};
+	--button-secondary-color: #{$button-dark-secondary-color};
+	--button-secondary-hover-background-color: #{$button-dark-secondary-hover-background-color};
+	--button-secondary-active-background-color: #{$button-dark-secondary-active-background-color};
+	// cta
+	--button-cta-background-color: #{$button-dark-cta-background-color};
+	--button-cta-hover-background-color: #{$button-dark-cta-hover-background-color};
+	--button-cta-active-background-color: #{$button-dark-cta-active-background-color};
+	--button-cta-color: #{$button-dark-cta-color};
+	// link
+	--button-link-background-color: #{$button-dark-link-background-color};
+	--button-link-hover-background-color: #{$button-dark-link-hover-background-color};
+	--button-link-active-background-color: #{$button-dark-link-active-background-color};
+	--button-link-color: #{$button-dark-link-color};
+	// disabled
+	--button-disabled-background-color: #{$button-dark-disabled-background-color};
+	--button-disabled-hover-background-color: #{$button-dark-disabled-hover-background-color};
+	--button-disabled-active-background-color: #{$button-dark-disabled-active-background-color};
+	--button-disabled-color: #{$button-dark-disabled-color};
+}
+
+

packages/ui/src/components/button/index.js

@@ -0,0 +1,127 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import Icon from '../icon';
+
+export default class Button extends React.Component {
+	static propTypes = {
+		text: PropTypes.string.isRequired,
+		hideText: PropTypes.bool,
+		icon: PropTypes.string,
+		tooltip: PropTypes.string,
+		id: PropTypes.string,
+		className: PropTypes.string,
+		url: PropTypes.string,
+		onClick: PropTypes.func,
+		variant: PropTypes.string,
+		color: PropTypes.string,
+		size: PropTypes.string,
+		target: PropTypes.string,
+	};
+
+	static defaultProps = {
+		id: '',
+		className: '',
+		variant: '',
+		target: '_parent',
+	};
+
+	getCssId() {
+		return this.props.id;
+	}
+
+	getClassName() {
+		const baseClassName = 'eps-button',
+			classes = [baseClassName, this.props.className];
+
+		return classes
+			.concat(this.getStylePropsClasses(baseClassName))
+			.filter((classItem) => '' !== classItem)
+			.join(' ');
+	}
+
+	getStylePropsClasses(baseClassName) {
+		const styleProps = ['color', 'size', 'variant'],
+			stylePropClasses = [];
+
+		styleProps.forEach((styleProp) => {
+			const stylePropValue = this.props[styleProp];
+
+			if (stylePropValue) {
+				stylePropClasses.push(baseClassName + '--' + stylePropValue);
+			}
+		});
+
+		return stylePropClasses;
+	}
+
+	getIcon() {
+		if (this.props.icon) {
+			const tooltip = this.props.tooltip || this.props.text;
+			const icon = (
+				<Icon
+					className={this.props.icon}
+					aria-hidden="true"
+					title={tooltip}
+				/>
+			);
+			let screenReaderText = '';
+
+			if (this.props.hideText) {
+				screenReaderText = <span className="sr-only">{tooltip}</span>;
+			}
+
+			return (
+				<>
+					{icon}
+					{screenReaderText}
+				</>
+			);
+		}
+		return '';
+	}
+
+	getText() {
+		return this.props.hideText ? '' : <span>{this.props.text}</span>;
+	}
+
+	render() {
+		const attributes = {},
+			id = this.getCssId(),
+			className = this.getClassName();
+
+		// Add attributes only if they are not empty.
+		if (id) {
+			attributes.id = id;
+		}
+
+		if (className) {
+			attributes.className = className;
+		}
+
+		if (this.props.onClick) {
+			attributes.onClick = this.props.onClick;
+		}
+
+		const buttonContent = (
+			<>
+				{this.getIcon()}
+				{this.getText()}
+			</>
+		);
+
+		if (this.props.url && 0 === this.props.url.indexOf('http')) {
+			return (
+				<a
+					href={this.props.url}
+					target={this.props.target}
+					{...attributes}
+				>
+					{buttonContent}
+				</a>
+			);
+		}
+
+		return <div {...attributes}>{buttonContent}</div>;
+	}
+}