newspack-components 2.2.0 → 2.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "newspack-components",
-	"version": "2.2.0",
+	"version": "2.2.1",
 	"description": "Newspack design system components",
 	"author": "Automattic",
 	"license": "GPL-2.0-or-later",

package/shared/js/button-props.js

@@ -1,7 +1,9 @@
 /**
  * Internal dependencies
  */
-import { isFunction, isString, isObject } from 'lodash';
+import isFunction from 'lodash/isFunction';
+import isObject from 'lodash/isObject';
+import isString from 'lodash/isString';
 
 /**
  * Creates button props based on an action

package/shared/scss/_colors.scss

@@ -1,3 +1,4 @@
+// HEX
 $primary-000: #f5fdff;
 $primary-050: #d6f6ff;
 $primary-100: #b4e4ff;
@@ -10,3 +11,17 @@ $primary-700: #1522af;
 $primary-800: #0b0b8d;
 $primary-900: #0d046e;
 $primary-950: #0e0052;
+
+// RGB
+$primary-000--rgb: 245, 253, 255;
+$primary-050--rgb: 214, 246, 255;
+$primary-100--rgb: 180, 228, 255;
+$primary-200--rgb: 147, 204, 253;
+$primary-300--rgb: 114, 175, 251;
+$primary-400--rgb: 82, 141, 252;
+$primary-500--rgb: 51, 102, 255;
+$primary-600--rgb: 34, 64, 213;
+$primary-700--rgb: 21, 34, 175;
+$primary-800--rgb: 11, 11, 141;
+$primary-900--rgb: 13, 4, 110;
+$primary-950--rgb: 14, 0, 82;

package/shared/scss/_mixins.scss

@@ -0,0 +1,12 @@
+@mixin visuallyHidden {
+	border: 0;
+	clip: rect( 1px, 1px, 1px, 1px );
+	clip-path: inset( 50% );
+	width: 1px;
+	height: 1px;
+	margin: -1px;
+	overflow: hidden;
+	padding: 0;
+	position: absolute !important;
+	word-wrap: normal !important; /* Many screen reader and browser combinations announce broken words as they would appear visually. */
+}

package/dist/cjs/button-group/index.js

@@ -1,57 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _element = require("@wordpress/element");
-
-var _components = require("@wordpress/components");
-
-require("./style.scss");
-
-var _classnames = _interopRequireDefault(require("classnames"));
-
-var _jsxRuntime = require("@emotion/react/jsx-runtime");
-
-/**
- * WordPress dependencies.
- */
-
-/**
- * Internal dependencies
- */
-
-/**
- * External dependencies
- */
-
-/**
- * Button Group.
- */
-class ButtonGroup extends _element.Component {
-  /**
-   * Render.
-   */
-  render() {
-    const {
-      className,
-      noMargin,
-      ...otherProps
-    } = this.props;
-    const classes = (0, _classnames.default)('newspack-button-group', {
-      'newspack-button-group--no-margin': noMargin
-    }, className);
-    return (0, _jsxRuntime.jsx)(_components.ButtonGroup, {
-      className: classes,
-      ...otherProps
-    });
-  }
-
-}
-
-var _default = ButtonGroup;
-exports.default = _default;

package/dist/cjs/button-group/style.scss

@@ -1,73 +0,0 @@
-/**
- * Button Group
- */
-
-@import '../../../shared/scss/colors';
-@import '~@wordpress/base-styles/colors';
-
-.newspack-button-group {
-	display: block;
-	&:not( .newspack-button-group--no-margin ) {
-		margin: 32px 0;
-	}
-
-	.newspack-button {
-		padding: 11px 17px !important;
-		&:active,
-		&:focus,
-		&:hover,
-		&.is-pressed {
-			position: relative;
-		}
-
-		&.is-pressed {
-			position: relative;
-			z-index: 2;
-			background-color: white !important;
-			color: $gray-900 !important;
-			border: none !important;
-			&:focus {
-				box-shadow: 0 0 0 1px white, 0 0 0 2px $primary-500 !important;
-			}
-			&:active,
-			&:hover {
-				background: $gray-100 !important;
-				color: $primary-500 !important;
-			}
-			&::after {
-				content: '';
-				position: absolute;
-				top: 0;
-				left: 0;
-				width: calc( 100% - 6px );
-				height: calc( 100% - 6px );
-				border: 3px solid $primary-500;
-			}
-		}
-	}
-}
-
-body[class*='admin-color-'] {
-	.newspack-button-group {
-		.newspack-button {
-			border-radius: 0;
-			box-shadow: none;
-
-			&:first-child {
-				&,
-				&::after {
-					border-bottom-left-radius: 3px;
-					border-top-left-radius: 3px;
-				}
-			}
-
-			&:last-child {
-				&,
-				&::after {
-					border-bottom-right-radius: 3px;
-					border-top-right-radius: 3px;
-				}
-			}
-		}
-	}
-}

package/dist/cjs/checkbox-control/index.js

@@ -1,63 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _element = require("@wordpress/element");
-
-var _components = require("@wordpress/components");
-
-var _ = require("../");
-
-require("./style.scss");
-
-var _classnames = _interopRequireDefault(require("classnames"));
-
-var _jsxRuntime = require("@emotion/react/jsx-runtime");
-
-/**
- * Checkbox Control
- */
-
-/**
- * WordPress dependencies
- */
-
-/**
- * Internal dependencies
- */
-
-/**
- * External dependencies
- */
-class CheckboxControl extends _element.Component {
-  /**
-   * Render.
-   */
-  render() {
-    const {
-      className,
-      checked,
-      tooltip,
-      ...otherProps
-    } = this.props;
-    const classes = (0, _classnames.default)('newspack-checkbox-control', className);
-    return (0, _jsxRuntime.jsxs)("div", {
-      className: classes,
-      children: [(0, _jsxRuntime.jsx)(_components.CheckboxControl, {
-        checked: Boolean(checked),
-        ...otherProps
-      }), tooltip && (0, _jsxRuntime.jsx)(_.InfoButton, {
-        text: tooltip
-      })]
-    });
-  }
-
-}
-
-var _default = CheckboxControl;
-exports.default = _default;

package/dist/cjs/checkbox-control/style.scss

@@ -1,78 +0,0 @@
-/**
- * Checkbox styles.
- */
-
-@import '../../../shared/scss/colors';
-@import '~@wordpress/base-styles/colors';
-
-.newspack-checkbox-control {
-	color: $gray-700;
-	display: flex;
-	font-size: 14px;
-	line-height: 24px;
-	margin: 32px 0;
-
-	label {
-		color: inherit;
-		font-size: inherit;
-		line-height: inherit;
-		margin: 0;
-	}
-
-	.components-checkbox-control__input-container {
-		display: block;
-		margin: 0;
-		margin-right: 8px;
-
-		@media screen and ( min-width: 600px ) {
-			margin-bottom: 2px;
-			margin-top: 2px;
-		}
-	}
-
-	.components-checkbox-control__input[type='checkbox'] {
-		margin: 0;
-
-		&:checked {
-			background-color: $primary-500;
-			border-color: $primary-500;
-		}
-
-		&:focus {
-			border-color: $primary-500;
-			box-shadow: 0 0 0 2px white, 0 0 0 3.5px $primary-500;
-		}
-	}
-
-	.components-base-control__help {
-		color: inherit;
-		font-size: inherit;
-		font-style: italic;
-		line-height: inherit;
-		margin: 0;
-		margin-left: 28px;
-	}
-
-	// Multiple Checkbox Controls
-
-	& + & {
-		margin-top: -16px;
-	}
-
-	// Reset
-
-	.components-base-control {
-		font-size: inherit;
-		line-height: inherit;
-	}
-
-	.components-base-control__field {
-		display: flex;
-		margin: 0;
-	}
-
-	.components-base-control__label {
-		display: block;
-		margin: 0;
-	}
-}

package/dist/cjs/preview-box/index.js

@@ -1,36 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _i18n = require("@wordpress/i18n");
-
-require("./style.scss");
-
-var _jsxRuntime = require("@emotion/react/jsx-runtime");
-
-/**
- * WordPress dependencies
- */
-const __ = _i18n.__;
-
-const PreviewBox = _ref => {
-  let {
-    children
-  } = _ref;
-  return (0, _jsxRuntime.jsxs)("div", {
-    className: "newspack-preview-box",
-    children: [(0, _jsxRuntime.jsx)("div", {
-      className: "newspack-preview-box__label",
-      children: __('Preview', 'newspack')
-    }), (0, _jsxRuntime.jsx)("div", {
-      className: "newspack-preview-box__content",
-      children: children
-    })]
-  });
-};
-
-var _default = PreviewBox;
-exports.default = _default;

package/dist/cjs/preview-box/style.scss

@@ -1,18 +0,0 @@
-@import '../../../shared/scss/colors';
-@import '~@wordpress/base-styles/colors';
-
-.newspack-preview-box {
-	margin: 32px 0;
-
-	&__label {
-		color: $gray-900;
-		font-weight: bold;
-	}
-
-	&__content {
-		background: $gray-100;
-		border: 1px solid $gray-300;
-		border-radius: 3px;
-		padding: 11px 8px;
-	}
-}

package/dist/cjs/textarea-control/index.js

@@ -1,54 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _components = require("@wordpress/components");
-
-var _element = require("@wordpress/element");
-
-require("./style.scss");
-
-var _classnames = _interopRequireDefault(require("classnames"));
-
-var _jsxRuntime = require("@emotion/react/jsx-runtime");
-
-/**
- * Textarea Control
- */
-
-/**
- * WordPress dependencies
- */
-
-/**
- * Internal dependencies
- */
-
-/**
- * External dependencies
- */
-class TextareaControl extends _element.Component {
-  /**
-   * Render.
-   */
-  render() {
-    const {
-      className,
-      ...otherProps
-    } = this.props;
-    const classes = (0, _classnames.default)('newspack-textarea-control', className);
-    return (0, _jsxRuntime.jsx)(_components.TextareaControl, {
-      className: classes,
-      ...otherProps
-    });
-  }
-
-}
-
-var _default = TextareaControl;
-exports.default = _default;

package/dist/cjs/textarea-control/style.scss

@@ -1,76 +0,0 @@
-/**
- * Textarea Control
- */
-
-@import '../../../shared/scss/colors';
-@import '~@wordpress/base-styles/colors';
-
-.newspack-textarea-control {
-	color: $gray-700;
-	font-size: 14px;
-	line-height: 24px;
-	margin: 32px 0;
-
-	label {
-		color: $gray-900;
-		font-size: 14px;
-		font-weight: bold;
-		line-height: 24px;
-		margin: 0;
-	}
-
-	textarea {
-		background: white;
-		border: 1px solid $gray-300;
-		border-radius: 3px;
-		box-shadow: none;
-		color: inherit;
-		display: block;
-		font-size: 16px;
-		line-height: inherit;
-		margin: 0;
-		min-height: 48px;
-		padding: 11px 8px;
-		transition: border-color 125ms ease-in-out, box-shadow 125ms ease-in-out;
-		width: 100%;
-
-		@media screen and ( min-width: 768px ) {
-			font-size: 14px;
-		}
-
-		&:focus {
-			border-color: $primary-500;
-			box-shadow: inset 0 0 0 2px $primary-500;
-		}
-
-		&:disabled,
-		&.disabled {
-			background: $gray-100;
-			color: $gray-600;
-			cursor: not-allowed;
-		}
-	}
-
-	// Multiple Textarea Controls
-
-	& + & {
-		margin-bottom: 32px;
-		margin-top: -24px;
-	}
-
-	// Multiple Controls
-
-	+ .newspack-select-control,
-	+ .newspack-text-control {
-		margin-bottom: 32px;
-		margin-top: -24px;
-	}
-
-	// Reset
-
-	.components-base-control__field,
-	.components-base-control__label {
-		display: block;
-		margin: 0;
-	}
-}

package/dist/cjs/toggle-control/index.js

@@ -1,58 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _components = require("@wordpress/components");
-
-var _element = require("@wordpress/element");
-
-require("./style.scss");
-
-var _classnames = _interopRequireDefault(require("classnames"));
-
-var _jsxRuntime = require("@emotion/react/jsx-runtime");
-
-/**
- * Toggle Control
- */
-
-/**
- * WordPress dependencies
- */
-
-/**
- * Internal dependencies
- */
-
-/**
- * External dependencies
- */
-class ToggleControl extends _element.Component {
-  /**
-   * Render.
-   */
-  render() {
-    const {
-      className,
-      isDark,
-      checked,
-      ...otherProps
-    } = this.props;
-    const classes = (0, _classnames.default)('newspack-toggle-control', isDark && 'newspack-toggle-control--is-dark', // NOTE: disabled prop is handled in more recent Gutenberg versions. This special handling can be removed once that's in Core.
-    otherProps.disabled && 'newspack-toggle-control--is-disabled', className);
-    return (0, _jsxRuntime.jsx)(_components.ToggleControl, {
-      className: classes,
-      checked: Boolean(checked),
-      ...otherProps
-    });
-  }
-
-}
-
-var _default = ToggleControl;
-exports.default = _default;

package/dist/cjs/toggle-control/style.scss

@@ -1,74 +0,0 @@
-/**
- * Toggle Control
- */
-
-@import '../../../shared/scss/colors';
-@import '~@wordpress/base-styles/colors';
-
-.newspack-toggle-control {
-	margin: 32px 0;
-
-	.components-base-control__field {
-		align-items: flex-start;
-		margin: 0;
-
-		.components-toggle-control__label {
-			color: $gray-700;
-			font-size: 14px;
-			line-height: 24px;
-			margin: 0;
-		}
-
-		.components-form-toggle {
-			margin: 3px 8px 3px 0;
-
-			&.is-checked {
-				.components-form-toggle__track {
-					background: $primary-500;
-					border-color: transparent;
-				}
-			}
-		}
-	}
-
-	// Is Dark
-
-	&.newspack-toggle-control--is-dark {
-		.components-base-control__field label {
-			color: $gray-900;
-			font-weight: bold;
-		}
-
-		.components-base-control__help {
-			font-style: normal;
-		}
-	}
-
-	// Is disabled
-
-	&.newspack-toggle-control--is-disabled {
-		opacity: 0.5;
-		pointer-events: none;
-	}
-
-	// Focus
-
-	.components-form-toggle__input:focus {
-		+ .components-form-toggle__track {
-			box-shadow: 0 0 0 2px white, 0 0 0 4px $primary-500;
-		}
-	}
-
-	// Multiple Toggle Controls
-
-	& + & {
-		margin-bottom: 32px;
-		margin-top: -24px;
-	}
-
-	// Reset
-
-	.components-base-control__help {
-		margin: 0 0 0 44px;
-	}
-}