Merge branch 'develop' into feature/icon-picker-typescript-conversion

components/color-settings/index.tsx

@@ -0,0 +1,99 @@
+/**
+ * WordPress dependencies
+ */
+import { BaseControl } from '@wordpress/components';
+import { ColorPalette } from '@wordpress/block-editor';
+import { useInstanceId } from '@wordpress/compose';
+
+interface ColorSettingProps {
+	/**
+	 * If this property is added, a label will be generated using label property as the content.
+	 */
+	label?: string,
+
+	/**
+	 * If true, the label will only be visible to screen readers.
+	 */
+	hideLabelFromVision?: boolean,
+
+	/**
+	 * If this property is added, a help text will be generated using help property as the content.
+	 */
+	help?: string,
+
+	/**
+	 * If no className is passed only components-base-control is used.
+	 */
+	className?: string,
+
+	/**
+	 * Whether to allow custom color or not.
+	 */
+	disableCustomColors?: boolean,
+
+	/**
+	 * currently active value.
+	 */
+	value?: string,
+
+	/**
+	 * Whether the palette should have a clearing button or not.
+	 */
+	clearable?: boolean,
+
+	/**
+	 * Array with the colors to be shown.
+	 */
+	colors: Array<Color>,
+
+	/**
+	 * Callback called when a color is selected.
+	 */
+	onChange: Function,
+}
+
+interface Color {
+	/**
+	 * Color name.
+	 */
+	name: string,
+
+	/**
+	 * Color hex code.
+	 */
+	color: string,
+}
+
+// eslint-disable-next-line import/prefer-default-export
+export const ColorSetting: React.FC<ColorSettingProps> = ({
+	label= '',
+	help = '',
+	className = '',
+	hideLabelFromVision = false,
+	colors,
+	value = '',
+	onChange,
+	disableCustomColors = false,
+	clearable = true,
+}) => {
+	const instanceId = useInstanceId(ColorSetting);
+	const id = `color-settings-${instanceId}`;
+
+	return (
+		<BaseControl
+			id={id}
+			label={label}
+			help={help}
+			className={className}
+			hideLabelFromVision={hideLabelFromVision}
+		>
+			<ColorPalette
+				colors={colors}
+				value={value}
+				onChange={onChange}
+				disableCustomColors={disableCustomColors}
+				clearable={clearable}
+			/>
+		</BaseControl>
+	);
+};

components/counter/index.js → components/counter/index.tsx

@@ -1,8 +1,8 @@
 import { forwardRef } from '@wordpress/element';
-import PropTypes from 'prop-types';
 import cx from 'classnames';
 import styled from '@emotion/styled';
 import { StyledComponentContext } from '../styled-components-context';
+import { ForwardRefExoticComponent, PropsWithoutRef, RefAttributes, FC } from 'react';
 
 const StyledSvg = styled('svg')`
 	transform: rotate(-90deg);
@@ -56,8 +56,16 @@ const StyledCounter = styled('div')`
 	font-variant-numeric: tabular-nums;
 `;
 
-const CircularProgressBar = (props) => {
-	const { percentage } = props;
+interface CircularProgressBarProps {
+	/**
+	 * Percentage elapsed.
+	 */
+	percentage: number;
+}
+
+const CircularProgressBar: FC<CircularProgressBarProps> = ({
+	percentage
+}) => {
 	const radius = 90;
 	const circumference = 2 * Math.PI * radius;
 
@@ -139,38 +147,49 @@ const CircularProgressBar = (props) => {
 	);
 };
 
-/**
- * Counter
- *
- * @description display character count and limit.
- *
- * @returns <Counter />
- */
-const Counter = forwardRef((props, ref) => {
-	const { count, limit } = props;
-	const percentage = (count / limit) * 100;
-	return (
-		<StyledComponentContext cacheKey="tenup-component-counter">
-			<StyledCounter
-				className={cx('tenup--block-components__character-count', {
-					'is-over-limit': count > limit,
-				})}
-				{...props}
-				ref={ref}
-			>
-				<div className="tenup--block-components__character-count__label">
-					<span className="tenup--block-components__character-count__count">{count}</span>{' '}
-					/{' '}
-					<span className="tenup--block-components__character-count__limit">{limit}</span>
-				</div>
-				<CircularProgressBar percentage={percentage} />
-			</StyledCounter>
-		</StyledComponentContext>
-	);
-});
-
-CircularProgressBar.propTypes = {
-	percentage: PropTypes.number.isRequired,
-};
+interface CounterProps {
+	/**
+	 * Current count.
+	 */
+	count: number;
+
+	/**
+	 * Max limit.
+	 */
+	limit: number;
+
+	/**
+	 * Rest of the props.
+	 */
+	[key: string]: unknown;
+}
+
+const Counter: ForwardRefExoticComponent<PropsWithoutRef<CounterProps> & RefAttributes<HTMLDivElement>> = forwardRef<HTMLDivElement, CounterProps>(
+	({
+		count,
+		limit,
+		...rest
+	}, ref ) => {
+		const percentage = (count / limit) * 100;
+		return (
+			<StyledComponentContext cacheKey="tenup-component-counter">
+				<StyledCounter
+					className={cx('tenup--block-components__character-count', {
+						'is-over-limit': count > limit,
+					})}
+					ref={ref}
+					{...rest}
+				>
+					<div className="tenup--block-components__character-count__label">
+						<span className="tenup--block-components__character-count__count">{count}</span>{' '}
+						/{' '}
+						<span className="tenup--block-components__character-count__limit">{limit}</span>
+					</div>
+					<CircularProgressBar percentage={percentage} />
+				</StyledCounter>
+			</StyledComponentContext>
+		);
+	}
+);
 
 export { CircularProgressBar, Counter };

components/counter/readme.md

@@ -0,0 +1,42 @@
+# Counter
+
+The `Counter` component let's you use circular progress bar with two props - `count` and `limit`.
+
+This also exposes another component named `CircularProgressBar`, which can be used when we don't want the text annotation and just the SVG illustration.
+
+## Usage
+
+```js
+import { Counter, CircularProgressBar } from '@10up/block-components';
+
+function MyComponent( props ) {
+
+    return (
+		<>
+			<Counter
+				count={text.length}
+				limit={20}
+			/>
+
+			<CircularProgressBar
+				percentage={(text.length / 20) * 100}
+			/>
+		</>
+    );
+}
+```
+
+## Props
+
+#### Counter
+
+| Name             | Type       | Default   | isRequired     | Description                                                            |
+| ---------------- | ---------- | ---------- | --------------------- | ---------------------------------------------------------------------- |
+| `count`   | `number` | -            | `Yes` |  Current count of the counter. |
+| `limit`          | `number`   | -                   | `Yes` | Max limit of the counter.                           |
+
+#### CircularProgressBar
+
+| Name             | Type       | Default   | isRequired     | Description                                                            |
+| ---------------- | ---------- | ---------- | --------------------- | ---------------------------------------------------------------------- |
+| `percentage`   | `number` | -            | `Yes` |  Elapsed percentage of the timer. |

components/styled-components-context/index.js → components/styled-components-context/index.tsx

@@ -2,11 +2,24 @@ import { CacheProvider } from '@emotion/react';
 import createCache from '@emotion/cache';
 import { useRefEffect, useInstanceId } from '@wordpress/compose';
 import { useState } from '@wordpress/element';
-import propTypes from 'prop-types';
 
-export const StyledComponentContext = (props) => {
-	const { children, cacheKey } = props;
-	const fallbackKey = useInstanceId(StyledComponentContext);
+interface StyledComponentContextProps {
+	/**
+	 * Children.
+	 */
+	children: React.ReactNode;
+
+	/**
+	 * Cache key.
+	 */
+	cacheKey: string;
+}
+
+export const StyledComponentContext: React.FC<StyledComponentContextProps> = ({
+	children,
+	cacheKey,
+}) => {
+	const fallbackKey = `${useInstanceId(StyledComponentContext)}`;
 
 	const defaultCache = createCache({
 		key: cacheKey || fallbackKey,
@@ -37,8 +50,3 @@ export const StyledComponentContext = (props) => {
 		</>
 	);
 };
-
-StyledComponentContext.propTypes = {
-	children: propTypes.node.isRequired,
-	cacheKey: propTypes.string.isRequired,
-};