Merge branch 'dashboard-editor' of https://github.com/IBM/carbon-addo…

…ns-iot-react into dashboard-editor

src/components/CardEditor/CardEditForm/_card-edit-form.scss

@@ -28,7 +28,6 @@
   }
   &--content {
     flex: 1;
-    overflow-y: auto;
     margin: -$spacing-05;
     height: 100%;
     padding-top: $spacing-05;

src/components/CardEditor/CardEditor.jsx

@@ -39,7 +39,7 @@ const defaultProps = {
     closeGalleryButton: 'Back',
     openJSONButton: 'Open JSON editor',
   },
-  supportedTypes: [],
+  supportedTypes: ['BAR', 'TIMESERIES', 'VALUE', 'IMAGE', 'TABLE'],
 };
 
 const CardEditor = ({

src/components/CardEditor/CardGalleryList/CardGalleryList.jsx

@@ -1,31 +1,39 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import {
-  Add16,
-  ChartColumn16,
-  ChartLine16,
-  Table16,
-  SummaryKpi16,
-  Image16,
-} from '@carbon/icons-react';
 
-import { List, Button } from '../../../index';
+import { SimpleList } from '../../../index';
+
+import timeSeriesImg from './line-graph.svg';
+import simpleBarImg from './simple-bar-graph.svg';
+import valueImg from './value-kpi.svg';
+import imageImg from './image.svg';
+import tableImg from './data-table.svg';
 
 const propTypes = {
   supportedTypes: PropTypes.arrayOf(PropTypes.string),
   onAddCard: PropTypes.func.isRequired,
   i18n: PropTypes.shape({
     galleryHeader: PropTypes.string,
+    searchPlaceHolderText: PropTypes.string,
+    pageOfPagesText: PropTypes.func,
+    cardType_TIMESERIES: PropTypes.string,
+    cardType_BAR: PropTypes.string,
+    cardType_VALUE: PropTypes.string,
+    cardType_IMAGE: PropTypes.string,
+    cardType_TABLE: PropTypes.string,
+    cardType_OTHER: PropTypes.string,
   }),
 };
 
 const defaultProps = {
   supportedTypes: ['BAR', 'TIMESERIES', 'VALUE', 'IMAGE', 'TABLE'],
   i18n: {
     galleryHeader: 'Gallery',
+    searchPlaceHolderText: 'Enter a search',
+    pageOfPagesText: page => `Page ${page}`,
     cardType_TIMESERIES: 'Time series line',
     cardType_BAR: 'Simple bar',
-    cardType_VALUE: 'Value/KPI',
+    cardType_VALUE: 'Value / KPI',
     cardType_IMAGE: 'Image',
     cardType_TABLE: 'Data table',
     cardType_OTHER: 'Other',
@@ -34,39 +42,37 @@ const defaultProps = {
 };
 
 const iconTypeMap = {
-  TIMESERIES: <ChartLine16 />,
-  BAR: <ChartColumn16 />,
-  VALUE: <SummaryKpi16 />,
-  IMAGE: <Image16 />,
-  TABLE: <Table16 />,
+  TIMESERIES: <img src={timeSeriesImg} alt="Time series" />,
+  BAR: <img src={simpleBarImg} alt="Simple bar" />,
+  VALUE: <img src={valueImg} alt="Value / KPI" />,
+  // eslint-disable-next-line jsx-a11y/img-redundant-alt
+  IMAGE: <img src={imageImg} alt="Image card" />,
+  TABLE: <img src={tableImg} alt="Table" />,
 };
 
 const CardGalleryList = ({ supportedTypes, onAddCard, i18n }) => {
-  const mergedI18N = { ...i18n, ...defaultProps.i18n };
+  const mergedI18n = { ...i18n, ...defaultProps.i18n };
   return (
-    <List
-      title={mergedI18N.galleryHeader}
+    <SimpleList
+      title={mergedI18n.galleryHeader}
       isFullHeight
-      items={supportedTypes.map(i => ({
-        id: i,
-        isCategory: true,
+      hasSearch
+      showPagination={false}
+      items={supportedTypes.map(cardType => ({
+        id: cardType,
         content: {
-          value: mergedI18N[`cardType_${i}`] || i,
-          icon: iconTypeMap[i],
-          rowActions: [
-            <Button
-              key={`add-${i}`}
-              data-testid={`card-gallery-list-${i}-add`}
-              kind="ghost"
-              size="small"
-              iconDescription="Add"
-              hasIconOnly
-              renderIcon={Add16}
-              onClick={() => onAddCard(i)}
-            />,
-          ],
+          value: mergedI18n[`cardType_${cardType}`] || cardType,
+          icon: iconTypeMap[cardType],
         },
+        isSelectable: true,
       }))}
+      onSelect={cardType => {
+        onAddCard(cardType);
+      }}
+      i18n={{
+        searchPlaceHolderText: i18n.searchPlaceHolderText,
+        pageOfPagesText: i18n.pageOfPagesText,
+      }}
     />
   );
 };