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

package/babel.config.cjs.js

@@ -0,0 +1,26 @@
+module.exports = api => {
+	api.cache( true );
+	return {
+		extends: 'newspack-scripts/config/babel.config.js',
+		presets: [
+			[
+				'@babel/preset-env',
+				{
+					corejs: 3.6,
+					useBuiltIns: 'entry',
+					// Exclude transforms that make all code slower, see https://github.com/facebook/create-react-app/pull/5278
+					exclude: [ 'transform-typeof-symbol' ],
+					modules: 'commonjs',
+				},
+			],
+			[
+				'@babel/preset-react',
+				{
+					runtime: 'automatic',
+					importSource: process.env.IMPORT_SOURCE,
+				},
+			],
+			[ '@babel/preset-typescript', { allowDeclareFields: true } ],
+		],
+	};
+};

package/babel.config.js

@@ -10,6 +10,7 @@ module.exports = api => {
 					useBuiltIns: 'entry',
 					// Exclude transforms that make all code slower, see https://github.com/facebook/create-react-app/pull/5278
 					exclude: [ 'transform-typeof-symbol' ],
+					modules: false,
 				},
 			],
 			[

package/copy-styles.js

@@ -9,7 +9,8 @@ const rcopy = require( 'recursive-copy' );
 const dir = process.cwd();
 
 const inputDir = path.join( dir, 'src' );
-const outputDir = path.join( dir, 'dist' );
+const outputDirEsm = path.join( dir, 'dist', 'esm' );
+const outputDirCommon = path.join( dir, 'dist', 'cjs' );
 
 console.log( 'Copying styles %s', dir );
 
@@ -20,7 +21,14 @@ const copyOptions = {
 	debug: true,
 };
 
-rcopy( inputDir, outputDir, copyOptions )
+rcopy( inputDir, outputDirEsm, copyOptions )
+	.then( results => {
+		console.log( 'copied %d files', results.length );
+	} )
+	.catch( err => {
+		console.error( err );
+	} );
+rcopy( inputDir, outputDirCommon, copyOptions )
 	.then( results => {
 		console.log( 'copied %d files', results.length );
 	} )

package/dist/esm/accordion/index.js

@@ -0,0 +1,42 @@
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+
+/**
+ * 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, jsxs as _jsxs } from "react/jsx-runtime";
+const Accordion = ({
+  children,
+  title
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  return /*#__PURE__*/_jsxs("details", {
+    className: classNames('newspack-accordion', {
+      'newspack-accordion--is-open': isOpen
+    }),
+    children: [/*#__PURE__*/_jsxs("summary", {
+      onClick: () => setIsOpen(!isOpen),
+      children: [title, /*#__PURE__*/_jsx(Icon, {
+        className: "newspack-accordion__icon",
+        icon: chevronRight,
+        size: 24
+      })]
+    }), /*#__PURE__*/_jsx("div", {
+      className: "newspack-accordion__content",
+      children: children
+    })]
+  });
+};
+export default Accordion;

package/dist/esm/accordion/style.scss

@@ -0,0 +1,31 @@
+@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;
+	}
+
+	&__content {
+		padding: 16px 32px;
+	}
+}

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

@@ -0,0 +1,218 @@
+/**
+ * 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, jsxs as _jsxs } from "react/jsx-runtime";
+class ActionCard extends Component {
+  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 /*#__PURE__*/_jsxs(Card, {
+      className: classes,
+      onClick: simple && onClick,
+      children: [/*#__PURE__*/_jsxs("div", {
+        className: "newspack-action-card__region newspack-action-card__region-top",
+        children: [toggleOnChange && /*#__PURE__*/_jsx(ToggleControl, {
+          checked: toggleChecked,
+          onChange: toggleOnChange,
+          disabled: disabled
+        }), image && !toggleOnChange && /*#__PURE__*/_jsx("div", {
+          className: "newspack-action-card__region newspack-action-card__region-left",
+          children: /*#__PURE__*/_jsx("a", {
+            href: imageLink,
+            children: /*#__PURE__*/_jsx("div", {
+              className: "newspack-action-card__image",
+              style: backgroundImageStyles(image)
+            })
+          })
+        }), checkbox && !toggleOnChange && /*#__PURE__*/_jsx("div", {
+          className: "newspack-action-card__region newspack-action-card__region-left",
+          children: /*#__PURE__*/_jsx("span", {
+            className: classnames('newspack-checkbox-icon', 'is-primary', 'checked' === checkbox && 'newspack-checkbox-icon--checked', isPending && 'newspack-checkbox-icon--pending'),
+            children: 'checked' === checkbox && /*#__PURE__*/_jsx(Icon, {
+              icon: check
+            })
+          })
+        }), /*#__PURE__*/_jsx("div", {
+          className: "newspack-action-card__region newspack-action-card__region-center",
+          children: /*#__PURE__*/_jsxs(Grid, {
+            columns: 1,
+            gutter: 8,
+            noMargin: true,
+            children: [/*#__PURE__*/_jsxs("h2", {
+              children: [/*#__PURE__*/_jsxs("span", {
+                className: "newspack-action-card__title",
+                ...titleProps,
+                children: [titleLink && /*#__PURE__*/_jsx("a", {
+                  href: titleLink,
+                  children: title
+                }), !titleLink && expandable && /*#__PURE__*/_jsx(Button, {
+                  isLink: true,
+                  onClick: () => this.setState({
+                    expanded: !expanded
+                  }),
+                  children: title
+                }), !titleLink && !expandable && title]
+              }), badges?.length && badges.map((badgeText, i) => /*#__PURE__*/_jsx("span", {
+                className: "newspack-action-card__badge",
+                children: badgeText
+              }, `badge-${i}`))]
+            }), description && /*#__PURE__*/_jsxs("p", {
+              children: [typeof description === 'string' && description, typeof description === 'function' && description()]
+            })]
+          })
+        }), !expandable && (actionText || isDisplayingSecondaryAction || actionContent) && /*#__PURE__*/_jsxs("div", {
+          className: "newspack-action-card__region newspack-action-card__region-right",
+          children: [actionContent && actionContent, actionText && (handoff ? /*#__PURE__*/_jsx(Handoff, {
+            plugin: handoff,
+            editLink: editLink,
+            compact: true,
+            isLink: true,
+            children: actionText
+          }) : onClick || hasInternalLink ? /*#__PURE__*/_jsx(Button, {
+            disabled: disabled,
+            isLink: true,
+            href: href,
+            onClick: onClick,
+            className: "newspack-action-card__primary_button",
+            children: actionText
+          }) : href ? /*#__PURE__*/_jsx(ExternalLink, {
+            href: href,
+            className: "newspack-action-card__primary_button",
+            children: actionText
+          }) : /*#__PURE__*/_jsxs("div", {
+            className: "newspack-action-card__container",
+            children: [actionText, isWaiting && /*#__PURE__*/_jsx(Waiting, {
+              isRight: true
+            })]
+          })), isDisplayingSecondaryAction && /*#__PURE__*/_jsx(Button, {
+            isLink: true,
+            onClick: onSecondaryActionClick,
+            className: "newspack-action-card__secondary_button",
+            isDestructive: secondaryDestructive,
+            children: secondaryActionText
+          })]
+        }), expandable && /*#__PURE__*/_jsx(Button, {
+          onClick: () => this.setState({
+            expanded: !expanded
+          }),
+          children: /*#__PURE__*/_jsx(Icon, {
+            icon: expanded ? chevronUp : chevronDown,
+            height: 24,
+            width: 24
+          })
+        })]
+      }), notification && /*#__PURE__*/_jsxs("div", {
+        className: "newspack-action-card__notification newspack-action-card__region-children",
+        children: ['error' === notificationLevel && /*#__PURE__*/_jsx(Notice, {
+          noticeText: notification,
+          isError: true,
+          rawHTML: notificationHTML
+        }), 'info' === notificationLevel && /*#__PURE__*/_jsx(Notice, {
+          noticeText: notification,
+          rawHTML: notificationHTML
+        }), 'success' === notificationLevel && /*#__PURE__*/_jsx(Notice, {
+          noticeText: notification,
+          isSuccess: true,
+          rawHTML: notificationHTML
+        }), 'warning' === notificationLevel && /*#__PURE__*/_jsx(Notice, {
+          noticeText: notification,
+          isWarning: true,
+          rawHTML: notificationHTML
+        })]
+      }), children && (expandable && expanded || !expandable) && /*#__PURE__*/_jsx("div", {
+        className: "newspack-action-card__region-children",
+        children: children
+      })]
+    });
+  }
+}
+ActionCard.defaultProps = {
+  toggleChecked: false
+};
+export default ActionCard;