newspack-components 2.2.1 → 3.0.0-alpha.2

package/dist/cjs/with-wizard/style.scss

@@ -1,260 +0,0 @@
-/**
- * With Wizard
- */
-
-@use '~@wordpress/base-styles/colors' as wp-colors;
-@use '../../../shared/scss/colors';
-
-// Reset Padding of the Admin Page
-
-.toplevel_page_newspack:not( .menu-top ),
-body[class*='newspack_page_newspack-'],
-body[class*='admin_page_newspack-'] {
-	background: white;
-
-	#wpcontent {
-		padding-left: 0;
-	}
-
-	#wpbody-content {
-		padding-bottom: 220px;
-		min-height: 100vh;
-
-		@media screen and ( min-width: 783px ) {
-			padding-bottom: 202px;
-		}
-
-		@media screen and ( min-width: 1128px ) {
-			padding-bottom: 168px;
-		}
-	}
-}
-
-svg {
-	&.newspack--error {
-		fill: wp-colors.$alert-red;
-		transform: rotate( 180deg );
-	}
-	&.newspack--success {
-		fill: wp-colors.$alert-green;
-	}
-}
-
-// Blue Screen
-
-.newspack-wizard__blue {
-	#wpwrap {
-		background: colors.$primary-500;
-	}
-
-	.newspack-footer {
-		background: colors.$primary-500;
-		border-color: colors.$primary-500;
-		justify-content: center;
-
-		&__logo {
-			background: inherit;
-		}
-	}
-
-	#wpfooter {
-		color: white;
-
-		a {
-			color: inherit;
-
-			&:active,
-			&:focus,
-			&:hover {
-				opacity: 0.75;
-			}
-		}
-	}
-}
-
-// Loading
-
-.newspack-wizard__is-loading {
-	background: white;
-	cursor: wait;
-	inset: 0;
-	position: absolute;
-
-	> * {
-		display: none !important;
-	}
-
-	&::before,
-	&::after {
-		animation: loading 2s ease-in-out infinite;
-		content: '';
-		display: block;
-	}
-
-	&::before {
-		background: colors.$primary-500;
-		box-shadow: 24px 0 0 white, 69px 0 0 -15px wp-colors.$gray-900,
-			99px 0 0 -15px wp-colors.$gray-900, 129px 0 0 -15px wp-colors.$gray-900,
-			159px 0 0 -15px wp-colors.$gray-900, 189px 0 0 -15px wp-colors.$gray-900;
-		height: 60px;
-		width: 60px;
-	}
-
-	&::after {
-		background: wp-colors.$gray-900;
-		box-shadow: inset -40vw 0 0 0 white, 0 64px 0 0 wp-colors.$gray-700, 40vw 96px 0 0 white,
-			0 96px 0 0 wp-colors.$gray-700;
-		height: 24px;
-		margin: 68px auto 0;
-		max-width: 1040px;
-		width: calc( 100% - ( 32px * 2 ) );
-
-		@media screen and ( min-width: 744px ) {
-			box-shadow: inset -400px 0 0 0 white, 0 64px 0 0 wp-colors.$gray-700, 200px 96px 0 0 white,
-				0 96px 0 0 wp-colors.$gray-700;
-			width: calc( 100% - ( 64px * 2 ) );
-		}
-
-		@media screen and ( min-width: 1224px ) {
-			box-shadow: inset -600px 0 0 0 white, 0 64px 0 0 wp-colors.$gray-700, 512px 96px 0 0 white,
-				0 96px 0 0 wp-colors.$gray-700;
-			width: calc( 100% - ( 64px * 2 ) );
-		}
-	}
-
-	// Blue Screen
-	.newspack-wizard__blue & {
-		background: colors.$primary-500;
-
-		&::before {
-			animation: loading-quiet 1.25s ease-in-out infinite;
-			background: white;
-			border-radius: 0;
-			box-shadow: 0;
-			height: 8px;
-			left: 0;
-			margin: 0;
-			position: absolute;
-			right: 100%;
-			top: 0;
-			width: auto;
-		}
-
-		&::after {
-			display: none;
-		}
-	}
-
-	// Quiet
-	&-quiet {
-		position: relative;
-
-		&::before,
-		&::after {
-			content: '';
-			cursor: wait;
-			display: block;
-			left: 0;
-			position: fixed;
-			top: 46px;
-
-			@media screen and ( min-width: 783px ) {
-				top: 32px;
-				margin-left: 160px;
-
-				body.auto-fold & {
-					margin-left: 36px;
-				}
-			}
-
-			@media screen and ( min-width: 961px ) {
-				body.auto-fold & {
-					margin-left: 160px;
-				}
-
-				body.folded & {
-					margin-left: 36px;
-				}
-			}
-		}
-
-		&::before {
-			animation: loading-quiet 1.25s ease-in-out infinite;
-			background: colors.$primary-500;
-			height: 8px;
-			right: 100%;
-			z-index: 9999;
-		}
-
-		&::after {
-			background: rgba( white, 0.7 );
-			bottom: 0;
-			right: 0;
-			z-index: 9998;
-		}
-	}
-}
-
-.newspack-wizard-section__is-loading {
-	background: white;
-	cursor: wait;
-	min-height: 150px;
-
-	> * {
-		display: none !important;
-	}
-
-	&::after {
-		animation: loading 2s ease-in-out infinite;
-		content: '';
-		display: block;
-		background: wp-colors.$gray-900;
-		box-shadow: inset -40vw 0 0 0 white, 0 64px 0 0 wp-colors.$gray-700, 40vw 96px 0 0 white,
-			0 96px 0 0 wp-colors.$gray-700;
-		height: 24px;
-		margin: 0 auto;
-		max-width: 1040px;
-		width: 100%;
-
-		@media screen and ( min-width: 744px ) {
-			box-shadow: inset -400px 0 0 0 white, 0 64px 0 0 wp-colors.$gray-700, 200px 96px 0 0 white,
-				0 96px 0 0 wp-colors.$gray-700;
-		}
-
-		@media screen and ( min-width: 1224px ) {
-			box-shadow: inset -600px 0 0 0 white, 0 64px 0 0 wp-colors.$gray-700, 520px 96px 0 0 white,
-				0 96px 0 0 wp-colors.$gray-700;
-		}
-	}
-}
-
-@keyframes loading {
-	0% {
-		opacity: 1;
-	}
-
-	50% {
-		opacity: 0.1;
-	}
-
-	100% {
-		opacity: 1;
-	}
-}
-
-@keyframes loading-quiet {
-	0% {
-		left: 0;
-		right: 100%;
-	}
-
-	50% {
-		left: 0;
-		right: 0;
-	}
-
-	100% {
-		left: 100%;
-		right: 0;
-	}
-}

package/dist/cjs/with-wizard-screen/style.scss

@@ -1,160 +0,0 @@
-/**
- * With Wizard Screen
- */
-
-@use '~@wordpress/base-styles/colors' as wp-colors;
-@use '../../../shared/scss/colors';
-
-.newspack-wizard {
-	// Color
-	--wp-admin-theme-color: #{colors.$primary-500};
-	--wp-admin-theme-color--rgb: #{colors.$primary-500--rgb};
-	--wp-admin-theme-color-darker-10: #{colors.$primary-600};
-	--wp-admin-theme-color-darker-10--rgb: #{colors.$primary-600--rgb};
-	--wp-admin-theme-color-darker-20: #{colors.$primary-700};
-	--wp-admin-theme-color-darker-20--rgb: #{colors.$primary-700--rgb};
-
-	color: wp-colors.$gray-900;
-
-	// Headings
-	h1,
-	h2,
-	h3 {
-		color: inherit;
-	}
-
-	h1 {
-		line-height: 1.4;
-	}
-
-	// Links
-	a {
-		color: var( --wp-admin-theme-color );
-
-		&:active,
-		&:focus,
-		&:hover {
-			color: var( --wp-admin-theme-color-darker-10 );
-		}
-
-		&:focus {
-			box-shadow: 0 0 0 var( --wp-admin-border-width-focus ) var( --wp-admin-theme-color );
-			outline: 3px solid transparent;
-		}
-	}
-
-	&__header {
-		background: white;
-	}
-
-	&__title {
-		align-items: center;
-		border-bottom: 1px solid wp-colors.$gray-300;
-		display: flex;
-
-		h2 {
-			margin: 0;
-			padding: 0;
-		}
-
-		> div {
-			align-items: baseline;
-			display: flex;
-			padding: 0 24px;
-
-			span {
-				color: wp-colors.$gray-700;
-				display: none;
-				margin-left: 8px;
-
-				@media screen and ( min-width: 744px ) {
-					display: block;
-				}
-			}
-		}
-
-		svg {
-			fill: white;
-			margin: 0 !important;
-
-			&.newspack-icon {
-				flex: 0 0 36px;
-				margin-bottom: -1px !important;
-			}
-
-			&:not( .newspack-icon ) {
-				background: colors.$primary-500;
-				left: 50%;
-				margin: -28px 0 0 -28px !important;
-				opacity: 0;
-				padding: 10px;
-				position: absolute;
-				top: 50%;
-				transition: opacity 125ms ease-in-out;
-			}
-		}
-
-		.components-button.has-icon {
-			padding: 0;
-			position: relative;
-
-			&:hover {
-				svg {
-					opacity: 1;
-				}
-			}
-
-			&:focus-visible {
-				outline: none !important;
-
-				&::before {
-					border: 2px solid white;
-					border-radius: 2px;
-					content: '';
-					display: block;
-					inset: 6px 6px 5px;
-					position: absolute;
-				}
-			}
-		}
-	}
-
-	&__content {
-		margin: 0 auto;
-		max-width: 1208px;
-		padding: 0 16px;
-
-		@media screen and ( min-width: 744px ) {
-			padding: 32px 84px;
-		}
-
-		// Typography
-
-		strong {
-			font-weight: bold;
-		}
-
-		small {
-			font-size: 12px;
-			line-height: 1.4;
-		}
-
-		// Thematic Break
-
-		hr {
-			background: wp-colors.$gray-300;
-			border: 0;
-			height: 1px;
-			margin: 48px 0;
-
-			@media screen and ( min-width: 744px ) {
-				margin: 64px 0;
-			}
-		}
-	}
-
-	&__above-header {
-		border-radius: 0;
-		margin: 0;
-	}
-}

package/dist/esm/accordion/index.js

@@ -1,38 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useState } from '@wordpress/element';
-import { Icon, chevronRight } from '@wordpress/icons';
-
-/**
- * External dependencies
- */
-import classNames from 'classnames';
-
-/**
- * Internal dependencies
- */
-import './style.scss';
-import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-import { jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-const Accordion = _ref => {
-  let {
-    children,
-    title
-  } = _ref;
-  const [isOpen, setIsOpen] = useState(false);
-  return _jsxs("details", {
-    className: classNames('newspack-accordion', {
-      'newspack-accordion--is-open': isOpen
-    }),
-    children: [_jsxs("summary", {
-      onClick: () => setIsOpen(!isOpen),
-      children: [title, _jsx(Icon, {
-        className: "newspack-accordion__icon",
-        icon: chevronRight,
-        size: 24
-      })]
-    }), children]
-  });
-};
-export default Accordion;

package/dist/esm/accordion/style.scss

@@ -1,27 +0,0 @@
-@use '~@wordpress/base-styles/colors' as wp-colors;
-
-.newspack-accordion {
-	border: 1px solid wp-colors.$gray-300;
-
-	&__icon {
-		transition: transform 200ms ease-out;
-		transform: rotate( 90deg );
-	}
-
-	&--is-open {
-		.newspack-accordion {
-			&__icon {
-				transform: rotate( -90deg );
-			}
-		}
-	}
-	summary {
-		padding: 16px 32px;
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		cursor: pointer;
-		font-size: 14px;
-		font-weight: bold;
-	}
-}

package/dist/esm/action-card/index.js

@@ -1,222 +0,0 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-/**
- * Action Card
- */
-
-/**
- * WordPress dependencies
- */
-import { Component } from '@wordpress/element';
-import { ExternalLink, ToggleControl } from '@wordpress/components';
-import { Icon, check, chevronDown, chevronUp } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
-import { Button, Card, Grid, Handoff, Notice, Waiting } from '../';
-import './style.scss';
-
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-import { jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-class ActionCard extends Component {
-  constructor() {
-    super(...arguments);
-    _defineProperty(this, "state", {
-      expanded: false
-    });
-  }
-  /**
-   * When the collapse prop is updated to true, collapse the card if already expanded.
-   */
-  componentDidUpdate(prevProps) {
-    if (!prevProps.collapse && this.props.collapse && this.state.expanded) {
-      this.setState({
-        expanded: false
-      });
-    }
-  }
-
-  /**
-   * Render.
-   */
-  render() {
-    const {
-      badge,
-      className,
-      checkbox,
-      children,
-      disabled,
-      title,
-      description,
-      handoff,
-      editLink,
-      href,
-      notification,
-      notificationLevel,
-      notificationHTML,
-      actionContent,
-      actionText,
-      secondaryActionText,
-      secondaryDestructive,
-      image,
-      imageLink,
-      indent,
-      isSmall,
-      isMedium,
-      simple,
-      onClick,
-      onSecondaryActionClick,
-      isWaiting,
-      titleLink,
-      toggleChecked,
-      toggleOnChange,
-      hasGreyHeader,
-      hasWhiteHeader,
-      isPending,
-      expandable = false
-    } = this.props;
-    const {
-      expanded
-    } = this.state;
-    const hasChildren = notification || children;
-    const classes = classnames('newspack-action-card', simple && 'newspack-card--is-clickable', hasGreyHeader && 'newspack-card--has-grey-header', hasWhiteHeader && 'newspack-card--has-white-header', hasChildren && 'newspack-card--has-children', indent && 'newspack-card--indent', isSmall && 'is-small', isMedium && 'is-medium', checkbox && 'has-checkbox', expandable && 'is-expandable', actionContent && 'has-action-content', className);
-    const backgroundImageStyles = url => {
-      return url ? {
-        backgroundImage: `url(${url})`
-      } : {};
-    };
-    const titleProps = toggleOnChange && !titleLink && !disabled ? {
-      onClick: () => toggleOnChange(!toggleChecked),
-      tabIndex: '0'
-    } : {};
-    const hasInternalLink = href && href.indexOf('http') !== 0;
-    const isDisplayingSecondaryAction = secondaryActionText && onSecondaryActionClick;
-    const badges = !Array.isArray(badge) && badge ? [badge] : badge;
-    return _jsxs(Card, {
-      className: classes,
-      onClick: simple && onClick,
-      children: [_jsxs("div", {
-        className: "newspack-action-card__region newspack-action-card__region-top",
-        children: [toggleOnChange && _jsx(ToggleControl, {
-          checked: toggleChecked,
-          onChange: toggleOnChange,
-          disabled: disabled
-        }), image && !toggleOnChange && _jsx("div", {
-          className: "newspack-action-card__region newspack-action-card__region-left",
-          children: _jsx("a", {
-            href: imageLink,
-            children: _jsx("div", {
-              className: "newspack-action-card__image",
-              style: backgroundImageStyles(image)
-            })
-          })
-        }), checkbox && !toggleOnChange && _jsx("div", {
-          className: "newspack-action-card__region newspack-action-card__region-left",
-          children: _jsx("span", {
-            className: classnames('newspack-checkbox-icon', 'is-primary', 'checked' === checkbox && 'newspack-checkbox-icon--checked', isPending && 'newspack-checkbox-icon--pending'),
-            children: 'checked' === checkbox && _jsx(Icon, {
-              icon: check
-            })
-          })
-        }), _jsx("div", {
-          className: "newspack-action-card__region newspack-action-card__region-center",
-          children: _jsxs(Grid, {
-            columns: 1,
-            gutter: 8,
-            noMargin: true,
-            children: [_jsxs("h2", {
-              children: [_jsxs("span", {
-                className: "newspack-action-card__title",
-                ...titleProps,
-                children: [titleLink && _jsx("a", {
-                  href: titleLink,
-                  children: title
-                }), !titleLink && expandable && _jsx(Button, {
-                  isLink: true,
-                  onClick: () => this.setState({
-                    expanded: !expanded
-                  }),
-                  children: title
-                }), !titleLink && !expandable && title]
-              }), badges?.length && badges.map((badgeText, i) => _jsx("span", {
-                className: "newspack-action-card__badge",
-                children: badgeText
-              }, `badge-${i}`))]
-            }), description && _jsxs("p", {
-              children: [typeof description === 'string' && description, typeof description === 'function' && description()]
-            })]
-          })
-        }), !expandable && (actionText || isDisplayingSecondaryAction || actionContent) && _jsxs("div", {
-          className: "newspack-action-card__region newspack-action-card__region-right",
-          children: [actionContent && actionContent, actionText && (handoff ? _jsx(Handoff, {
-            plugin: handoff,
-            editLink: editLink,
-            compact: true,
-            isLink: true,
-            children: actionText
-          }) : onClick || hasInternalLink ? _jsx(Button, {
-            disabled: disabled,
-            isLink: true,
-            href: href,
-            onClick: onClick,
-            className: "newspack-action-card__primary_button",
-            children: actionText
-          }) : href ? _jsx(ExternalLink, {
-            href: href,
-            className: "newspack-action-card__primary_button",
-            children: actionText
-          }) : _jsxs("div", {
-            className: "newspack-action-card__container",
-            children: [actionText, isWaiting && _jsx(Waiting, {
-              isRight: true
-            })]
-          })), isDisplayingSecondaryAction && _jsx(Button, {
-            isLink: true,
-            onClick: onSecondaryActionClick,
-            className: "newspack-action-card__secondary_button",
-            isDestructive: secondaryDestructive,
-            children: secondaryActionText
-          })]
-        }), expandable && _jsx(Button, {
-          onClick: () => this.setState({
-            expanded: !expanded
-          }),
-          children: _jsx(Icon, {
-            icon: expanded ? chevronUp : chevronDown,
-            height: 24,
-            width: 24
-          })
-        })]
-      }), notification && _jsxs("div", {
-        className: "newspack-action-card__notification newspack-action-card__region-children",
-        children: ['error' === notificationLevel && _jsx(Notice, {
-          noticeText: notification,
-          isError: true,
-          rawHTML: notificationHTML
-        }), 'info' === notificationLevel && _jsx(Notice, {
-          noticeText: notification,
-          rawHTML: notificationHTML
-        }), 'success' === notificationLevel && _jsx(Notice, {
-          noticeText: notification,
-          isSuccess: true,
-          rawHTML: notificationHTML
-        }), 'warning' === notificationLevel && _jsx(Notice, {
-          noticeText: notification,
-          isWarning: true,
-          rawHTML: notificationHTML
-        })]
-      }), children && (expandable && expanded || !expandable) && _jsx("div", {
-        className: "newspack-action-card__region-children",
-        children: children
-      })]
-    });
-  }
-}
-ActionCard.defaultProps = {
-  toggleChecked: false
-};
-export default ActionCard;