newspack-components 3.0.0-alpha.1 → 3.0.0-alpha.2

package/dist/cjs/button/index.js

@@ -1,56 +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");
-var _router = _interopRequireDefault(require("../proxied-imports/router"));
-require("./style.scss");
-var _jsxRuntime = require("@emotion/react/jsx-runtime");
-/**
- * Button
- */
-
-/**
- * WordPress dependencies.
- */
-
-/**
- * Internal dependencies
- */
-
-const {
-  useHistory
-} = _router.default;
-const Button = ({
-  href,
-  onClick,
-  ...otherProps
-}) => {
-  const history = useHistory();
-  const [isAwaitingOnClick, setIsAwaitingOnClick] = (0, _element.useState)(false);
-
-  // If both onClick and href are present, await the onClick action an then redirect.
-  if (href && onClick) {
-    otherProps.onClick = async () => {
-      setIsAwaitingOnClick(true);
-      await onClick();
-      setIsAwaitingOnClick(false);
-      history.push((href || '').replace('#', ''));
-    };
-  } else {
-    otherProps.href = href;
-    otherProps.onClick = onClick;
-  }
-  if (isAwaitingOnClick) {
-    otherProps.disabled = true;
-  }
-  // @ts-ignore - @wordpress/components' Button can only have either href or onClick, not both.
-  return (0, _jsxRuntime.jsx)(_components.Button, {
-    ...otherProps
-  });
-};
-var _default = exports.default = Button;

package/dist/cjs/card/style.scss

@@ -1,168 +0,0 @@
-/**
- * Card
- */
-
-@use '~@wordpress/base-styles/colors' as wp-colors;
-
-.newspack-card {
-	border-radius: 2px;
-	border: 1px solid wp-colors.$gray-300;
-	color: wp-colors.$gray-900;
-	margin: 32px 0;
-	padding: 16px 48px;
-
-	@media screen and ( min-width: 744px ) {
-		padding: 32px 64px;
-	}
-
-	// Buttons Card
-
-	&__buttons-card {
-		display: flex;
-		flex-wrap: wrap;
-		gap: 16px;
-		margin: 32px 0;
-	}
-
-	// Header Actions Card
-
-	&__header-actions {
-		align-items: center;
-		display: flex;
-		flex-wrap: wrap;
-		gap: 8px;
-		justify-content: space-between;
-		margin-bottom: -16px;
-
-		> * {
-			margin-bottom: 0 !important;
-			margin-top: 0 !important;
-		}
-
-		.newspack-select-control {
-			.components-base-control__field {
-				margin-bottom: 0;
-			}
-		}
-	}
-
-	// Is Narrow
-
-	&__is-narrow {
-		margin-left: auto;
-		margin-right: auto;
-
-		@media screen and ( min-width: 608px ) {
-			max-width: 576px;
-		}
-	}
-
-	// Is Small
-
-	&__is-small {
-		padding: 16px;
-
-		> *:first-child {
-			margin-top: 0 !important;
-		}
-
-		> *:last-child {
-			margin-bottom: 0 !important;
-		}
-
-		> p {
-			margin: 16px 0 !important;
-		}
-
-		& + & {
-			margin-top: -16px;
-		}
-	}
-
-	// Is Medium
-
-	&__is-medium {
-		padding: 32px;
-
-		> *:first-child {
-			margin-top: 0 !important;
-		}
-
-		> *:last-child {
-			margin-bottom: 0 !important;
-		}
-	}
-
-	// Is White
-
-	&__is-white {
-		background: white;
-		border: 0;
-	}
-
-	// No Border
-
-	&__no-border {
-		border-radius: 0;
-		border: 0;
-		padding: 0;
-	}
-
-	// Margin
-
-	&.mt64 {
-		margin-top: 64px;
-	}
-
-	&.mt16 {
-		margin-top: 16px;
-	}
-
-	// Typography
-
-	small {
-		font-size: 12px;
-		line-height: 1.4;
-	}
-
-	code {
-		background: wp-colors.$gray-100;
-		color: wp-colors.$gray-900;
-		padding: 0 0.5em;
-	}
-
-	// Thematic Break
-
-	hr {
-		background: wp-colors.$gray-300;
-		border: 0;
-		height: 1px;
-		margin: 48px 0;
-
-		@media screen and ( min-width: 744px ) {
-			margin: 64px 0;
-		}
-	}
-
-	// Separator
-
-	.sep {
-		background: wp-colors.$gray-300;
-		height: 1px;
-		margin-left: 8px;
-		margin-right: 8px;
-		width: 12px;
-
-		&__inline {
-			display: inline-block;
-			line-height: 1.5;
-			vertical-align: middle;
-		}
-	}
-
-	// Error
-
-	.newspack-error {
-		color: wp-colors.$alert-red;
-	}
-}

package/dist/cjs/custom-select-control/style.scss

@@ -1,92 +0,0 @@
-/**
- * Custom Select Control
- */
-
-@use '~@wordpress/base-styles/colors' as wp-colors;
-
-.newspack-custom-select-control {
-	label {
-		display: block;
-		margin-bottom: 8px;
-	}
-
-	.components-custom-select-control__button {
-		border-color: wp-colors.$gray-700;
-		border-radius: 2px;
-		color: wp-colors.$gray-900;
-		font-size: inherit;
-		min-height: 30px;
-		min-width: 100%;
-		padding-right: 24px;
-
-		&:active,
-		&:focus,
-		&:hover,
-		&[aria-expanded='true'] {
-			color: wp-colors.$gray-900;
-		}
-
-		&:focus {
-			border-color: var( --wp-admin-theme-color );
-			box-shadow: inset 0 0 0 1px var( --wp-admin-theme-color );
-		}
-
-		&-icon {
-			right: 3px;
-			width: 18px;
-		}
-
-		&[aria-expanded='true'] svg {
-			transform: rotate( 180deg );
-		}
-	}
-
-	.components-custom-select-control__menu {
-		border-color: wp-colors.$gray-700;
-		border-radius: 2px;
-		box-shadow: 0 4px 8px rgba( black, 0.08 );
-		margin: 8px 0 0;
-		min-width: 222px;
-	}
-
-	.components-custom-select-control__item {
-		box-sizing: border-box;
-		cursor: pointer;
-		display: flex;
-		line-height: inherit;
-		margin: 0 0 0 28px;
-		padding: 6px 8px;
-		transition: color 125ms ease-in-out;
-
-		&:empty {
-			display: none;
-		}
-
-		&.is-header {
-			background: wp-colors.$gray-100;
-			cursor: default;
-			font-weight: bold;
-			margin-left: 0;
-			pointer-events: none;
-		}
-
-		&.is-highlighted {
-			background: white;
-			color: var( --wp-admin-theme-color );
-		}
-
-		&.is-selected {
-			margin-left: 0;
-
-			&::before {
-				background: url( 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0Ij48cGF0aCBkPSJNMTguMyA1LjZMOS45IDE2LjlsLTQuNi0zLjQtLjkgMS4yIDUuOCA0LjMgOS4zLTEyLjZ6IiBmaWxsPSIjMzM2NmZmIj48L3BhdGg+PC9zdmc+Cg==' )
-					0 0 no-repeat;
-				content: '';
-				display: block;
-				height: 24px;
-				margin: 0 4px 0 0;
-				width: 24px;
-			}
-		}
-	}
-}

package/dist/cjs/form-token-field/style.scss

@@ -1,37 +0,0 @@
-/**
- * Form Token Field
- */
-
-@use '~@wordpress/base-styles/colors' as wp-colors;
-
-.newspack-form-token-field {
-	width: 100%;
-
-	.components-form-token-field__input-container {
-		padding-bottom: 1px;
-		padding-top: 1px;
-	}
-
-	// Help
-
-	&__help {
-		color: wp-colors.$gray-700;
-		font-size: 12px;
-		margin: 8px 0 0 !important;
-	}
-
-	// Hidden Elements
-
-	&--label-hidden {
-		label {
-			display: none;
-		}
-	}
-
-	&--help-hidden {
-		.components-form-token-field__help,
-		div.i {
-			display: none;
-		}
-	}
-}

package/dist/cjs/grid/index.js

@@ -1,37 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-require("./style.scss");
-var _classnames = _interopRequireDefault(require("classnames"));
-var _jsxRuntime = require("@emotion/react/jsx-runtime");
-/**
- * Grid
- */
-
-/**
- * Internal dependencies
- */
-
-/**
- * External dependencies
- */
-
-const Grid = ({
-  className = '',
-  columns = 2,
-  gutter = 32,
-  noMargin = false,
-  rowGap = 0,
-  ...otherProps
-}) => {
-  const classes = (0, _classnames.default)('newspack-grid', noMargin && 'newspack-grid--no-margin', columns && 'newspack-grid__columns-' + columns, gutter && 'newspack-grid__gutter-' + gutter, rowGap && 'newspack-grid__row-gap-' + rowGap, className);
-  return (0, _jsxRuntime.jsx)("div", {
-    className: classes,
-    ...otherProps
-  });
-};
-var _default = exports.default = Grid;

package/dist/cjs/grid/style.scss

@@ -1,166 +0,0 @@
-/**
- * Grid
- */
-
-@use '~@wordpress/base-styles/colors' as wp-colors;
-
-.newspack-grid {
-	display: grid;
-	grid-gap: 32px;
-	grid-auto-rows: min-content;
-	grid-template-columns: 1fr;
-	margin: 32px 0;
-
-	// No Margin
-	&--no-margin {
-		margin: 0;
-	}
-
-	// Gutter 0
-	&__gutter-0 {
-		grid-gap: 0;
-	}
-
-	// Gutter 8
-	&__gutter-8 {
-		grid-gap: 8px;
-	}
-
-	// Gutter 16
-	&__gutter-16 {
-		grid-gap: 16px;
-	}
-
-	// Gutter 24
-	&__gutter-24 {
-		grid-gap: 24px;
-	}
-
-	// Gutter 32
-	&__gutter-32 {
-		grid-gap: 32px;
-	}
-
-	// Row Gap 0
-	&__row-gap-0 {
-		grid-row-gap: 0;
-	}
-
-	// Row Gap 8
-	&__row-gap-8 {
-		grid-row-gap: 8px;
-	}
-
-	// Row Gap 16
-	&__row-gap-16 {
-		grid-row-gap: 16px;
-	}
-
-	// Row Gap 32
-	&__row-gap-32 {
-		grid-row-gap: 32px;
-	}
-
-	// Gutter 64
-	&__gutter-64 {
-		grid-gap: 64px;
-	}
-
-	// Columns 6
-	&__columns-6 {
-		grid-template-columns: repeat( 2, 1fr );
-	}
-
-	// Media Queries - 744px
-	@media screen and ( min-width: 744px ) {
-		&__columns-2,
-		&__columns-3,
-		&__columns-4 {
-			grid-template-columns: repeat( 2, 1fr );
-		}
-
-		&__columns-6 {
-			grid-template-columns: repeat( 3, 1fr );
-		}
-	}
-
-	// Media Queries - 1128px
-	@media screen and ( min-width: 1128px ) {
-		// Columns 3
-		&__columns-3 {
-			grid-template-columns: repeat( 3, 1fr );
-		}
-
-		// Columns 4
-		&__columns-4 {
-			grid-template-columns: repeat( 4, 1fr );
-		}
-
-		// Columns 6
-		&__columns-6 {
-			grid-template-columns: repeat( 6, 1fr );
-		}
-
-		// Gutter 48
-		&__gutter-48 {
-			grid-gap: 48px;
-		}
-
-		// Gutter 64
-		&__gutter-64 {
-			grid-gap: 64px;
-		}
-	}
-
-	// Children
-	> * {
-		margin-bottom: 0 !important;
-		margin-top: 0 !important;
-	}
-
-	.components-base-control {
-		&__field,
-		&__help {
-			margin-bottom: 0;
-		}
-	}
-
-	.components-form-token-field {
-		&__input-container {
-			margin-bottom: 0;
-		}
-	}
-
-	// Cards
-	> .newspack-card {
-		> *:first-child {
-			margin-top: 0 !important;
-		}
-
-		> *:last-child {
-			margin-bottom: 0 !important;
-		}
-	}
-
-	// Table-like
-	&__thead {
-		background: rgba( black, 0.025 );
-		border-bottom: 1px solid wp-colors.$gray-300;
-		border-top: 1px solid wp-colors.$gray-300;
-		color: wp-colors.$gray-900;
-
-		> *:not( .screen-reader-text ) {
-			padding: 8px;
-		}
-	}
-
-	&__tbody {
-		border-bottom: 1px solid wp-colors.$gray-300;
-		padding: 8px 0;
-	}
-
-	&__thead + &__tbody,
-	&__tbody + &__tbody {
-		margin-top: -32px;
-	}
-}

package/dist/cjs/hooks/index.js

@@ -1,25 +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 _usePrompt = _interopRequireDefault(require("./usePrompt"));
-var _useObjectState = _interopRequireDefault(require("./useObjectState"));
-var _useOnClickOutside = _interopRequireDefault(require("./useOnClickOutside"));
-/**
- * WordPress dependencies
- */
-
-const useUniqueId = prefix => {
-  const id = (0, _element.useRef)(`${prefix}-${Math.round(Math.random() * 99999)}`);
-  return id.current;
-};
-var _default = exports.default = {
-  usePrompt: _usePrompt.default,
-  useObjectState: _useObjectState.default,
-  useOnClickOutside: _useOnClickOutside.default,
-  useUniqueId
-};

package/dist/cjs/hooks/usePrompt.js

@@ -1,49 +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 _router = _interopRequireDefault(require("../proxied-imports/router"));
-// https://gist.github.com/sibelius/60a4e11da1f826b8d60dc3975a1ac805
-
-/**
- * External dependencies.
- */
-
-/**
- * Internal dependencies.
- */
-
-const {
-  useHistory
-} = _router.default;
-var _default = (when, message) => {
-  const history = useHistory();
-  const self = (0, _element.useRef)(null);
-  const onWindowOrTabClose = event => {
-    if (!when) {
-      return;
-    }
-    if (typeof event === 'undefined') {
-      event = window.event;
-    }
-    return message;
-  };
-  (0, _element.useEffect)(() => {
-    if (when) {
-      self.current = history.block(message);
-      window.addEventListener('beforeunload', onWindowOrTabClose);
-    }
-    return () => {
-      if (self.current) {
-        self.current();
-      }
-      window.removeEventListener('beforeunload', onWindowOrTabClose);
-    };
-  }, [message, when]);
-  return self.current || (() => {});
-};
-exports.default = _default;