Dataviews: Improve story (WordPress#59773)

Co-authored-by: ntsekouras <ntsekouras@outlook.com>
carstingaxion · Mar 27, 2024 · 35d12b1 · 35d12b1
1 parent fbf101a
commit 35d12b1
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 4 deletions.
diff --git a/packages/dataviews/src/stories/fixtures.js b/packages/dataviews/src/stories/fixtures.js
@@ -20,66 +20,77 @@ export const data = [
 		title: 'Apollo',
 		description: 'Apollo description',
 		image: 'https://live.staticflickr.com/5725/21726228300_51333bd62c_b.jpg',
+		type: 'Not a planet',
 	},
 	{
 		id: 2,
 		title: 'Space',
 		description: 'Space description',
 		image: 'https://live.staticflickr.com/5678/21911065441_92e2d44708_b.jpg',
+		type: 'Not a planet',
 	},
 	{
 		id: 3,
 		title: 'NASA',
 		description: 'NASA photo',
 		image: 'https://live.staticflickr.com/742/21712365770_8f70a2c91e_b.jpg',
+		type: 'Not a planet',
 	},
 	{
 		id: 4,
 		title: 'Neptune',
 		description: 'Neptune description',
 		image: 'https://live.staticflickr.com/5725/21726228300_51333bd62c_b.jpg',
+		type: 'Ice giant',
 	},
 	{
 		id: 5,
 		title: 'Mercury',
 		description: 'Mercury description',
 		image: 'https://live.staticflickr.com/5725/21726228300_51333bd62c_b.jpg',
+		type: 'Terrestrial',
 	},
 	{
 		id: 6,
 		title: 'Venus',
 		description: 'Venus description',
 		image: 'https://live.staticflickr.com/5725/21726228300_51333bd62c_b.jpg',
+		type: 'Terrestrial',
 	},
 	{
 		id: 7,
 		title: 'Earth',
 		description: 'Earth description',
 		image: 'https://live.staticflickr.com/5725/21726228300_51333bd62c_b.jpg',
+		type: 'Terrestrial',
 	},
 	{
 		id: 8,
 		title: 'Mars',
 		description: 'Mars description',
 		image: 'https://live.staticflickr.com/5725/21726228300_51333bd62c_b.jpg',
+		type: 'Terrestrial',
 	},
 	{
 		id: 9,
 		title: 'Jupiter',
 		description: 'Jupiter description',
 		image: 'https://live.staticflickr.com/5725/21726228300_51333bd62c_b.jpg',
+		type: 'Gas giant',
 	},
 	{
 		id: 10,
 		title: 'Saturn',
 		description: 'Saturn description',
 		image: 'https://live.staticflickr.com/5725/21726228300_51333bd62c_b.jpg',
+		type: 'Gas giant',
 	},
 	{
 		id: 11,
 		title: 'Uranus',
 		description: 'Uranus description',
 		image: 'https://live.staticflickr.com/5725/21726228300_51333bd62c_b.jpg',
+		type: 'Ice giant',
 	},
 ];
 
@@ -88,7 +99,7 @@ export const DEFAULT_VIEW = {
 	search: '',
 	page: 1,
 	perPage: 10,
-	hiddenFields: [ 'image' ],
+	hiddenFields: [ 'image', 'type' ],
 	layout: {},
 	filters: [],
 };

diff --git a/packages/dataviews/src/stories/index.story.js b/packages/dataviews/src/stories/index.story.js
@@ -8,10 +8,15 @@ import { useState, useMemo, useCallback } from '@wordpress/element';
  */
 import { DataViews } from '../index';
 import { DEFAULT_VIEW, actions, data } from './fixtures';
-import { LAYOUT_GRID, LAYOUT_TABLE } from '../constants';
+import {
+	LAYOUT_GRID,
+	LAYOUT_TABLE,
+	OPERATOR_IS_NONE,
+	OPERATOR_IS_ANY,
+} from '../constants';
 
 const meta = {
-	title: 'DataViews (Experimental)/DataViews',
+	title: 'DataViews/DataViews',
 	component: DataViews,
 };
 export default meta;
@@ -49,6 +54,20 @@ const fields = [
 		maxWidth: 400,
 		enableHiding: false,
 	},
+	{
+		header: 'Type',
+		id: 'type',
+		getValue: ( { item } ) => item.type,
+		maxWidth: 400,
+		enableHiding: false,
+		type: 'enumeration',
+		elements: [
+			{ value: 'Not a planet', label: 'Not a planet' },
+			{ value: 'Ice giant', label: 'Ice giant' },
+			{ value: 'Terrestrial', label: 'Terrestrial' },
+			{ value: 'Gas giant', label: 'Gas giant' },
+		],
+	},
 	{
 		header: 'Description',
 		id: 'description',
@@ -72,6 +91,29 @@ export const Default = ( props ) => {
 				].some( ( field ) => field.includes( normalizedSearch ) );
 			} );
 		}
+
+		if ( view.filters.length > 0 ) {
+			view.filters.forEach( ( filter ) => {
+				if (
+					filter.field === 'type' &&
+					filter.operator === OPERATOR_IS_ANY &&
+					filter?.value?.length > 0
+				) {
+					filteredData = filteredData.filter( ( item ) => {
+						return filter.value.includes( item.type );
+					} );
+				} else if (
+					filter.field === 'type' &&
+					filter.operator === OPERATOR_IS_NONE &&
+					filter?.value?.length > 0
+				) {
+					filteredData = filteredData.filter( ( item ) => {
+						return ! filter.value.includes( item.type );
+					} );
+				}
+			} );
+		}
+
 		// Handle sorting.
 		if ( view.sort ) {
 			const stringSortingFields = [ 'title' ];

diff --git a/packages/dataviews/src/style.scss b/packages/dataviews/src/style.scss
@@ -1,12 +1,12 @@
 .dataviews-wrapper {
-	width: 100%;
 	height: 100%;
 	overflow: auto;
 	box-sizing: border-box;
 	scroll-padding-bottom: $grid-unit-80;
 }
 
 .dataviews-filters__view-actions {
+	box-sizing: border-box;
 	padding: $grid-unit-15 $grid-unit-40 0;
 	margin-bottom: $grid-unit-15;
 	flex-shrink: 0;