newspack-components 2.2.0 → 2.2.1

package/dist/esm/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;
-	}
-}

package/dist/esm/toggle-group/index.js

@@ -1,58 +0,0 @@
-/**
- * Toggle Group
- */
-
-/**
- * WordPress dependencies.
- */
-import { Component } from '@wordpress/element';
-/**
- * Internal dependencies.
- */
-
-import { ToggleControl } 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 ToggleGroup extends Component {
-  /**
-   * Render.
-   */
-  render() {
-    const {
-      checked,
-      children,
-      description,
-      onChange,
-      title,
-      className
-    } = this.props;
-    const classes = classnames('newspack-toggle-group', className);
-    return _jsxs("div", {
-      className: classes,
-      children: [_jsx(ToggleControl, {
-        checked: checked || false,
-        onChange: onChange
-      }), _jsxs("div", {
-        className: "newspack-toggle-group__description",
-        children: [_jsx("p", {
-          className: "is-dark",
-          children: _jsx("strong", {
-            children: title
-          })
-        }), _jsx("p", {
-          children: description
-        }), checked && children]
-      })]
-    });
-  }
-
-}
-
-export default ToggleGroup;

package/dist/esm/toggle-group/style.scss

@@ -1,28 +0,0 @@
-/**
- * Toggle Group
- */
-
-.newspack-toggle-group {
-	display: flex;
-	margin: 32px 0;
-
-	& &__description p {
-		margin-bottom: 0;
-		margin-top: 0;
-	}
-
-	.newspack-toggle-control {
-		margin: 0;
-	}
-
-	&__description {
-		flex: 1;
-	}
-
-	// Multiple Toogle Groups
-
-	& + & {
-		margin-bottom: 32px;
-		margin-top: -16px;
-	}
-}

package/dist/esm/wizard/style.scss

@@ -1,148 +0,0 @@
-@import '~@wordpress/base-styles/colors';
-@import '../../../shared/scss/colors';
-
-.newspack-wizard {
-	&__title {
-		align-items: center;
-		border-bottom: 1px solid $gray-300;
-		display: flex;
-
-		h1 {
-			color: $gray-900;
-			font-size: 21px;
-			line-height: 30px;
-			margin: 0;
-			padding: 0 24px;
-		}
-
-		svg {
-			fill: white;
-			margin: 0 !important;
-
-			&.newspack-icon {
-				flex: 0 0 36px;
-				margin-bottom: -1px !important;
-			}
-
-			&:not( .newspack-icon ) {
-				background: $primary-500;
-				left: 50%;
-				margin: -18px 0 0 -18px !important;
-				opacity: 0;
-				position: absolute;
-				top: 50%;
-				transition: opacity 125ms ease-in-out;
-			}
-		}
-
-		a {
-			position: relative;
-
-			&:hover {
-				svg {
-					opacity: 1;
-				}
-			}
-		}
-
-		a:focus-visible {
-			outline: none !important;
-
-			&::before {
-				border: 2px solid white;
-				border-radius: 3px;
-				bottom: 5px;
-				content: '';
-				display: block;
-				left: 6px;
-				position: absolute;
-				right: 6px;
-				top: 6px;
-			}
-		}
-	}
-
-	&__content {
-		color: $gray-700;
-		font-size: 14px;
-		line-height: 24px;
-		margin: 0 auto;
-		max-width: 1208px;
-		padding: 0 16px;
-
-		@media screen and ( min-width: 744px ) {
-			padding: 32px 84px;
-		}
-
-		// Typography
-
-		h1,
-		h2,
-		h3,
-		p {
-			line-height: 24px;
-			margin: 32px 0;
-			padding: 0;
-		}
-
-		h1 {
-			color: $gray-900;
-			font-size: 21px;
-			font-weight: bold;
-			line-height: 32px;
-		}
-
-		h2 {
-			color: $gray-900;
-			font-size: 17px;
-			font-weight: bold;
-		}
-
-		h3 {
-			color: $gray-900;
-			font-size: 14px;
-			font-weight: bold;
-		}
-
-		p {
-			font-size: 14px;
-
-			&.is-dark {
-				color: $gray-900;
-			}
-		}
-
-		strong {
-			font-weight: bold;
-		}
-
-		small {
-			font-size: 12px;
-			line-height: 16px;
-		}
-
-		// Links
-
-		a {
-			color: $primary-500;
-
-			&:active,
-			&:focus,
-			&:hover {
-				color: $primary-600;
-				text-decoration: none;
-			}
-
-			&:focus {
-				box-shadow: none;
-				outline: 2px solid $primary-500;
-				outline-offset: 2px;
-			}
-		}
-	}
-
-	&__above-header {
-		border-radius: 0;
-		margin: 0;
-	}
-}