newspack-components 4.3.0 → 4.4.0-alpha.1

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

@@ -1,72 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _element = require("@wordpress/element");
-var _icons = require("@wordpress/icons");
-var _ = require("../");
-require("./style.scss");
-var _classnames = _interopRequireDefault(require("classnames"));
-var _jsxRuntime = require("react/jsx-runtime");
-/**
- * Button Card
- */
-
-/**
- * WordPress dependencies
- */
-
-/**
- * Internal dependencies
- */
-
-/**
- * External dependencies
- */
-
-class ButtonCard extends _element.Component {
-  /**
-   * Render
-   */
-  render() {
-    const {
-      chevron,
-      className,
-      desc,
-      grouped,
-      icon,
-      isDestructive,
-      isPressed,
-      isSmall,
-      title,
-      ...otherProps
-    } = this.props;
-    const classes = (0, _classnames.default)('newspack-button-card', className, chevron && 'has-chevron', grouped && 'grouped', icon && 'has-icon', isDestructive && 'is-destructive', isPressed && 'is-pressed', isSmall && 'is-small');
-    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("a", {
-      className: classes,
-      ...otherProps,
-      children: [icon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.Icon, {
-        icon: icon,
-        height: 48,
-        width: 48
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_.Grid, {
-        noMargin: true,
-        columns: 1,
-        gutter: 8,
-        children: [title && /*#__PURE__*/(0, _jsxRuntime.jsx)("h3", {
-          children: title
-        }), desc && /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
-          children: desc
-        })]
-      }), chevron && /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.Icon, {
-        icon: _icons.chevronRight,
-        height: 24,
-        width: 24
-      })]
-    });
-  }
-}
-var _default = exports.default = ButtonCard;

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

@@ -1,180 +0,0 @@
-/**
- * Button Card
- */
-
-@use "~@wordpress/base-styles/colors" as wp-colors;
-
-.newspack-button-card {
-	background: white;
-	border-radius: 2px;
-	border: 1px solid wp-colors.$gray-300;
-	box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) transparent;
-	cursor: pointer;
-	display: block;
-	margin: 32px 0;
-	padding: 32px;
-	position: relative;
-	text-decoration: none;
-	transition:
-		background-color 125ms ease-in-out,
-		border-color 125ms ease-in-out,
-		box-shadow 125ms ease-in-out;
-
-	&:focus,
-	&.is-pressed {
-		background: white;
-		border-color: var(--wp-admin-theme-color);
-		box-shadow: inset 0 0 0 1px var(--wp-admin-theme-color) !important;
-		outline: none !important;
-		z-index: 1;
-	}
-
-	&.is-pressed:focus-visible {
-		box-shadow:
-			inset 0 0 0 1px var(--wp-admin-theme-color),
-			0 0 0 1px white,
-			0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color) !important;
-	}
-
-	&:active,
-	&:hover {
-		border-color: var(--wp-admin-theme-color);
-		color: var(--wp-admin-theme-color);
-		text-decoration: none;
-		z-index: 1;
-
-		.newspack-grid h3,
-		p {
-			color: inherit;
-		}
-	}
-
-	.newspack-grid h3,
-	p {
-		transition: color 125ms ease-in-out;
-	}
-
-	.newspack-grid h3 {
-		color: wp-colors.$gray-900;
-	}
-
-	p {
-		color: wp-colors.$gray-700;
-	}
-
-	// Grouped
-
-	&.grouped {
-		border-radius: 0;
-
-		& + &:not(.br--top) {
-			margin-top: -33px;
-		}
-
-		&.br--bottom {
-			border-bottom-left-radius: 2px;
-			border-bottom-right-radius: 2px;
-		}
-
-		&.br--top {
-			border-top-left-radius: 2px;
-			border-top-right-radius: 2px;
-		}
-	}
-
-	// Chevron & Icon
-
-	&.has-chevron,
-	&.has-icon {
-		align-items: center;
-		display: grid;
-		grid-gap: 16px;
-		grid-template-columns: auto 24px;
-
-		&:active,
-		&:hover {
-			svg {
-				fill: currentcolor;
-			}
-		}
-
-		svg {
-			fill: var(--wp-admin-theme-color);
-			transition: fill 125ms ease-in-out;
-		}
-	}
-
-	&.has-icon {
-		grid-template-columns: 48px auto;
-
-		&.has-chevron {
-			grid-template-columns: 48px auto 24px;
-		}
-	}
-
-	// Is Small
-
-	&.is-small {
-		padding: 16px;
-
-		&.has-chevron,
-		&.has-icon {
-			svg {
-				height: 24px;
-				width: 24px;
-			}
-		}
-
-		&.has-icon {
-			grid-template-columns: 24px auto;
-
-			&.has-chevron {
-				grid-template-columns: 24px auto 24px;
-			}
-		}
-
-		h3 {
-			font-size: 1em;
-			line-height: 1.5;
-		}
-
-		p {
-			font-size: 12px;
-			line-height: 1.4;
-		}
-	}
-
-	// Is Destructive
-
-	&.is-destructive {
-		.title {
-			color: wp-colors.$alert-red;
-		}
-
-		&.has-chevron,
-		&.has-icon {
-			svg {
-				fill: wp-colors.$alert-red;
-			}
-		}
-
-		&:focus,
-		&.is-pressed {
-			border-color: wp-colors.$alert-red;
-			box-shadow: inset 0 0 0 1px wp-colors.$alert-red !important;
-		}
-
-		&.is-pressed:focus-visible {
-			box-shadow:
-				inset 0 0 0 1px wp-colors.$alert-red,
-				0 0 0 1px white,
-				0 0 0 var(--wp-admin-border-width-focus) wp-colors.$alert-red !important;
-		}
-
-		&:active,
-		&:hover {
-			background-color: wp-colors.$gray-100;
-			border-color: wp-colors.$alert-red;
-		}
-	}
-}

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

@@ -1,64 +0,0 @@
-/**
- * Button Card
- */
-
-/**
- * WordPress dependencies
- */
-import { Component } from '@wordpress/element';
-import { Icon, chevronRight } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
-import { Grid } from '../';
-import './style.scss';
-
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-class ButtonCard extends Component {
-  /**
-   * Render
-   */
-  render() {
-    const {
-      chevron,
-      className,
-      desc,
-      grouped,
-      icon,
-      isDestructive,
-      isPressed,
-      isSmall,
-      title,
-      ...otherProps
-    } = this.props;
-    const classes = classnames('newspack-button-card', className, chevron && 'has-chevron', grouped && 'grouped', icon && 'has-icon', isDestructive && 'is-destructive', isPressed && 'is-pressed', isSmall && 'is-small');
-    return /*#__PURE__*/_jsxs("a", {
-      className: classes,
-      ...otherProps,
-      children: [icon && /*#__PURE__*/_jsx(Icon, {
-        icon: icon,
-        height: 48,
-        width: 48
-      }), /*#__PURE__*/_jsxs(Grid, {
-        noMargin: true,
-        columns: 1,
-        gutter: 8,
-        children: [title && /*#__PURE__*/_jsx("h3", {
-          children: title
-        }), desc && /*#__PURE__*/_jsx("p", {
-          children: desc
-        })]
-      }), chevron && /*#__PURE__*/_jsx(Icon, {
-        icon: chevronRight,
-        height: 24,
-        width: 24
-      })]
-    });
-  }
-}
-export default ButtonCard;

package/dist/esm/button-card/style.scss

@@ -1,180 +0,0 @@
-/**
- * Button Card
- */
-
-@use "~@wordpress/base-styles/colors" as wp-colors;
-
-.newspack-button-card {
-	background: white;
-	border-radius: 2px;
-	border: 1px solid wp-colors.$gray-300;
-	box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) transparent;
-	cursor: pointer;
-	display: block;
-	margin: 32px 0;
-	padding: 32px;
-	position: relative;
-	text-decoration: none;
-	transition:
-		background-color 125ms ease-in-out,
-		border-color 125ms ease-in-out,
-		box-shadow 125ms ease-in-out;
-
-	&:focus,
-	&.is-pressed {
-		background: white;
-		border-color: var(--wp-admin-theme-color);
-		box-shadow: inset 0 0 0 1px var(--wp-admin-theme-color) !important;
-		outline: none !important;
-		z-index: 1;
-	}
-
-	&.is-pressed:focus-visible {
-		box-shadow:
-			inset 0 0 0 1px var(--wp-admin-theme-color),
-			0 0 0 1px white,
-			0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color) !important;
-	}
-
-	&:active,
-	&:hover {
-		border-color: var(--wp-admin-theme-color);
-		color: var(--wp-admin-theme-color);
-		text-decoration: none;
-		z-index: 1;
-
-		.newspack-grid h3,
-		p {
-			color: inherit;
-		}
-	}
-
-	.newspack-grid h3,
-	p {
-		transition: color 125ms ease-in-out;
-	}
-
-	.newspack-grid h3 {
-		color: wp-colors.$gray-900;
-	}
-
-	p {
-		color: wp-colors.$gray-700;
-	}
-
-	// Grouped
-
-	&.grouped {
-		border-radius: 0;
-
-		& + &:not(.br--top) {
-			margin-top: -33px;
-		}
-
-		&.br--bottom {
-			border-bottom-left-radius: 2px;
-			border-bottom-right-radius: 2px;
-		}
-
-		&.br--top {
-			border-top-left-radius: 2px;
-			border-top-right-radius: 2px;
-		}
-	}
-
-	// Chevron & Icon
-
-	&.has-chevron,
-	&.has-icon {
-		align-items: center;
-		display: grid;
-		grid-gap: 16px;
-		grid-template-columns: auto 24px;
-
-		&:active,
-		&:hover {
-			svg {
-				fill: currentcolor;
-			}
-		}
-
-		svg {
-			fill: var(--wp-admin-theme-color);
-			transition: fill 125ms ease-in-out;
-		}
-	}
-
-	&.has-icon {
-		grid-template-columns: 48px auto;
-
-		&.has-chevron {
-			grid-template-columns: 48px auto 24px;
-		}
-	}
-
-	// Is Small
-
-	&.is-small {
-		padding: 16px;
-
-		&.has-chevron,
-		&.has-icon {
-			svg {
-				height: 24px;
-				width: 24px;
-			}
-		}
-
-		&.has-icon {
-			grid-template-columns: 24px auto;
-
-			&.has-chevron {
-				grid-template-columns: 24px auto 24px;
-			}
-		}
-
-		h3 {
-			font-size: 1em;
-			line-height: 1.5;
-		}
-
-		p {
-			font-size: 12px;
-			line-height: 1.4;
-		}
-	}
-
-	// Is Destructive
-
-	&.is-destructive {
-		.title {
-			color: wp-colors.$alert-red;
-		}
-
-		&.has-chevron,
-		&.has-icon {
-			svg {
-				fill: wp-colors.$alert-red;
-			}
-		}
-
-		&:focus,
-		&.is-pressed {
-			border-color: wp-colors.$alert-red;
-			box-shadow: inset 0 0 0 1px wp-colors.$alert-red !important;
-		}
-
-		&.is-pressed:focus-visible {
-			box-shadow:
-				inset 0 0 0 1px wp-colors.$alert-red,
-				0 0 0 1px white,
-				0 0 0 var(--wp-admin-border-width-focus) wp-colors.$alert-red !important;
-		}
-
-		&:active,
-		&:hover {
-			background-color: wp-colors.$gray-100;
-			border-color: wp-colors.$alert-red;
-		}
-	}
-}

package/src/button-card/index.js

@@ -1,52 +0,0 @@
-/**
- * Button Card
- */
-
-/**
- * WordPress dependencies
- */
-import { Component } from '@wordpress/element';
-import { Icon, chevronRight } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
-import { Grid } from '../';
-import './style.scss';
-
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
-class ButtonCard extends Component {
-	/**
-	 * Render
-	 */
-	render() {
-		const { chevron, className, desc, grouped, icon, isDestructive, isPressed, isSmall, title, ...otherProps } = this.props;
-		const classes = classnames(
-			'newspack-button-card',
-			className,
-			chevron && 'has-chevron',
-			grouped && 'grouped',
-			icon && 'has-icon',
-			isDestructive && 'is-destructive',
-			isPressed && 'is-pressed',
-			isSmall && 'is-small'
-		);
-
-		return (
-			<a className={ classes } { ...otherProps }>
-				{ icon && <Icon icon={ icon } height={ 48 } width={ 48 } /> }
-				<Grid noMargin columns={ 1 } gutter={ 8 }>
-					{ title && <h3>{ title }</h3> }
-					{ desc && <p>{ desc }</p> }
-				</Grid>
-				{ chevron && <Icon icon={ chevronRight } height={ 24 } width={ 24 } /> }
-			</a>
-		);
-	}
-}
-
-export default ButtonCard;

package/src/button-card/style.scss

@@ -1,180 +0,0 @@
-/**
- * Button Card
- */
-
-@use "~@wordpress/base-styles/colors" as wp-colors;
-
-.newspack-button-card {
-	background: white;
-	border-radius: 2px;
-	border: 1px solid wp-colors.$gray-300;
-	box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) transparent;
-	cursor: pointer;
-	display: block;
-	margin: 32px 0;
-	padding: 32px;
-	position: relative;
-	text-decoration: none;
-	transition:
-		background-color 125ms ease-in-out,
-		border-color 125ms ease-in-out,
-		box-shadow 125ms ease-in-out;
-
-	&:focus,
-	&.is-pressed {
-		background: white;
-		border-color: var(--wp-admin-theme-color);
-		box-shadow: inset 0 0 0 1px var(--wp-admin-theme-color) !important;
-		outline: none !important;
-		z-index: 1;
-	}
-
-	&.is-pressed:focus-visible {
-		box-shadow:
-			inset 0 0 0 1px var(--wp-admin-theme-color),
-			0 0 0 1px white,
-			0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color) !important;
-	}
-
-	&:active,
-	&:hover {
-		border-color: var(--wp-admin-theme-color);
-		color: var(--wp-admin-theme-color);
-		text-decoration: none;
-		z-index: 1;
-
-		.newspack-grid h3,
-		p {
-			color: inherit;
-		}
-	}
-
-	.newspack-grid h3,
-	p {
-		transition: color 125ms ease-in-out;
-	}
-
-	.newspack-grid h3 {
-		color: wp-colors.$gray-900;
-	}
-
-	p {
-		color: wp-colors.$gray-700;
-	}
-
-	// Grouped
-
-	&.grouped {
-		border-radius: 0;
-
-		& + &:not(.br--top) {
-			margin-top: -33px;
-		}
-
-		&.br--bottom {
-			border-bottom-left-radius: 2px;
-			border-bottom-right-radius: 2px;
-		}
-
-		&.br--top {
-			border-top-left-radius: 2px;
-			border-top-right-radius: 2px;
-		}
-	}
-
-	// Chevron & Icon
-
-	&.has-chevron,
-	&.has-icon {
-		align-items: center;
-		display: grid;
-		grid-gap: 16px;
-		grid-template-columns: auto 24px;
-
-		&:active,
-		&:hover {
-			svg {
-				fill: currentcolor;
-			}
-		}
-
-		svg {
-			fill: var(--wp-admin-theme-color);
-			transition: fill 125ms ease-in-out;
-		}
-	}
-
-	&.has-icon {
-		grid-template-columns: 48px auto;
-
-		&.has-chevron {
-			grid-template-columns: 48px auto 24px;
-		}
-	}
-
-	// Is Small
-
-	&.is-small {
-		padding: 16px;
-
-		&.has-chevron,
-		&.has-icon {
-			svg {
-				height: 24px;
-				width: 24px;
-			}
-		}
-
-		&.has-icon {
-			grid-template-columns: 24px auto;
-
-			&.has-chevron {
-				grid-template-columns: 24px auto 24px;
-			}
-		}
-
-		h3 {
-			font-size: 1em;
-			line-height: 1.5;
-		}
-
-		p {
-			font-size: 12px;
-			line-height: 1.4;
-		}
-	}
-
-	// Is Destructive
-
-	&.is-destructive {
-		.title {
-			color: wp-colors.$alert-red;
-		}
-
-		&.has-chevron,
-		&.has-icon {
-			svg {
-				fill: wp-colors.$alert-red;
-			}
-		}
-
-		&:focus,
-		&.is-pressed {
-			border-color: wp-colors.$alert-red;
-			box-shadow: inset 0 0 0 1px wp-colors.$alert-red !important;
-		}
-
-		&.is-pressed:focus-visible {
-			box-shadow:
-				inset 0 0 0 1px wp-colors.$alert-red,
-				0 0 0 1px white,
-				0 0 0 var(--wp-admin-border-width-focus) wp-colors.$alert-red !important;
-		}
-
-		&:active,
-		&:hover {
-			background-color: wp-colors.$gray-100;
-			border-color: wp-colors.$alert-red;
-		}
-	}
-}