newspack-components 4.10.0 → 4.11.0

package/dist/cjs/reorder-modal/style.scss

@@ -0,0 +1,114 @@
+@use "~@wordpress/base-styles/colors" as wp-colors;
+@use "~@wordpress/base-styles/mixins" as wp-mixins;
+@use "~@wordpress/base-styles/variables" as wp-vars;
+
+.newspack-reorder-modal {
+	&__body {
+		display: flex;
+		flex-direction: column;
+		min-height: calc(#{wp-vars.$grid-unit} * 23);
+	}
+
+	&__loading {
+		align-items: center;
+		display: flex;
+		flex: 1;
+		justify-content: center;
+	}
+
+	&__notice {
+		margin: 0 0 wp-vars.$grid-unit-10;
+	}
+
+	&__list {
+		display: flex;
+		flex-direction: column;
+		gap: wp-vars.$grid-unit-10;
+		list-style: none;
+		margin: 0;
+		padding: 0;
+	}
+
+	&__item {
+		--newspack-reorder-modal-divider: #{wp-colors.$gray-100};
+		--wp-ui-card-padding: #{wp-vars.$grid-unit-15};
+
+		align-items: stretch;
+		cursor: grab;
+		flex-direction: row;
+		margin: 0;
+
+		&:focus-within,
+		&:hover {
+			--newspack-reorder-modal-divider: #{wp-colors.$gray-300};
+
+			border-color: wp-colors.$gray-300;
+		}
+
+		&.is-dragging {
+			cursor: grabbing;
+			opacity: 0.5;
+		}
+	}
+
+	&__grip {
+		align-items: center;
+		color: wp-colors.$gray-700;
+		display: flex;
+		padding-left: wp-vars.$grid-unit-05;
+	}
+
+	&__move {
+		align-items: center;
+		border-right: 1px solid var(--newspack-reorder-modal-divider);
+		display: flex;
+		flex-direction: column;
+		padding: wp-vars.$grid-unit-05;
+	}
+
+	&__content {
+		align-items: center;
+		align-self: center;
+		display: flex;
+		flex: 1;
+		gap: wp-vars.$grid-unit-10;
+		min-width: 0;
+		padding-block-end: var(--wp-ui-card-padding);
+	}
+
+	&__title {
+		@include wp-mixins.heading-large();
+
+		min-width: 0;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	&__badge {
+		display: flex;
+		flex-shrink: 0;
+	}
+
+	&__toggle {
+		align-items: center;
+		display: flex;
+		padding-inline-end: wp-vars.$grid-unit-15;
+	}
+
+	&__description {
+		margin: 0 0 wp-vars.$grid-unit-20;
+	}
+
+	&__item.is-off &__title {
+		color: wp-colors.$gray-700;
+	}
+
+	&__footer {
+		display: flex;
+		gap: wp-vars.$grid-unit-10;
+		justify-content: flex-end;
+		margin-top: auto;
+		padding-top: wp-vars.$grid-unit-30;
+	}
+}

package/dist/esm/card-sortable-list/index.js

@@ -17,7 +17,7 @@ import { Badge } from '@wordpress/ui';
 /**
  * Internal dependencies
  */
-import { Card } from '../';
+import Card from '../card';
 import './style.scss';
 
 /**
@@ -412,7 +412,10 @@ var CardSortableList = function CardSortableList(_ref) {
                 }, item.onToggleChange !== undefined && {
                   actionType: 'toggle',
                   isActive: item.toggleChecked,
-                  onToggle: item.onToggleChange
+                  onToggle: item.onToggleChange,
+                  // Names the toggle for assistive tech. The card hides this
+                  // label, since the header already shows the title.
+                  title: item.title
                 }), item.actions !== undefined && {
                   actions: item.actions
                 })

package/dist/esm/card-sortable-list/index.test.js

@@ -43,4 +43,25 @@ describe('CardSortableList', function () {
     // An unguarded Badge would still emit an empty span, so assert on element children.
     expect(container.querySelector('h3').children).toHaveLength(0);
   });
+  it('names each toggle after its item', function () {
+    render(/*#__PURE__*/_jsx(CardSortableList, {
+      items: [{
+        id: 1,
+        title: 'Homepage',
+        toggleChecked: true,
+        onToggleChange: function onToggleChange() {}
+      }, {
+        id: 2,
+        title: 'About',
+        toggleChecked: false,
+        onToggleChange: function onToggleChange() {}
+      }]
+    }));
+    expect(screen.getByRole('checkbox', {
+      name: 'Homepage'
+    })).toBeChecked();
+    expect(screen.getByRole('checkbox', {
+      name: 'About'
+    })).not.toBeChecked();
+  });
 });

package/dist/esm/card-sortable-list/style.scss

@@ -6,6 +6,14 @@ $drop-duration: 400ms; /* must match DROP_ANIMATION_DURATION in index.tsx */
 	&__item {
 		cursor: grab;
 
+		/*
+		 * Keep a card's title in the case it was written in. The block editor
+		 * sidebar uppercases every h3 (`.interface-complementary-area h3`).
+		 */
+		.newspack-card--core__header-content h3 {
+			text-transform: none;
+		}
+
 		/*
 		 * Animate items sliding to fill/make space around the dragged item.
 		 */

package/dist/esm/index.js

@@ -39,6 +39,7 @@ export { default as PluginToggle } from './plugin-toggle';
 export { default as Popover } from './popover';
 export { default as ProgressBar } from './progress-bar';
 export { default as RadioControl } from './radio-control';
+export { default as ReorderModal } from './reorder-modal';
 export { default as SectionHeader } from './section-header';
 export { default as SelectControl } from './select-control';
 export { default as Settings } from './settings';