fix(dashboardeditor): proptype warnings in stories

carbon-design-system · Oct 16, 2020 · d4ff65f · d4ff65f
1 parent 9f32503
commit d4ff65f
Show file tree

Hide file tree

Showing 13 changed files with 185 additions and 1,830 deletions.
diff --git a/src/components/DashboardEditor/DashboardEditor.story.jsx b/src/components/DashboardEditor/DashboardEditor.story.jsx
@@ -2,99 +2,12 @@ import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 import { withKnobs, text, object, array } from '@storybook/addon-knobs';
-import { Switcher24 } from '@carbon/icons-react';
-import Chip from '@carbon/icons-react/lib/chip/24';
-import Dashboard from '@carbon/icons-react/lib/dashboard/24';
-import Group from '@carbon/icons-react/lib/group/24';
 
-import { SuiteHeader, Card, Link, InlineNotification } from '../../index';
+import { Card, Link, InlineNotification } from '../../index';
 import { CARD_ACTIONS } from '../../constants/LayoutConstants';
 
 import DashboardEditor from './DashboardEditor';
 
-const sideNavLinks = [
-  {
-    icon: Switcher24,
-    isEnabled: true,
-    metaData: {
-      tabIndex: 0,
-      label: 'Boards',
-      element: ({ children, ...rest }) => <div {...rest}>{children}</div>,
-      // isActive: true,
-    },
-    linkContent: 'Boards',
-    childContent: [
-      {
-        metaData: {
-          label: 'Yet another link',
-          title: 'Yet another link',
-          element: 'button',
-        },
-        content: 'Yet another link',
-      },
-    ],
-  },
-  {
-    isEnabled: true,
-    icon: Chip,
-    metaData: {
-      label: 'Devices',
-      href: 'https://google.com',
-      element: 'a',
-      target: '_blank',
-    },
-    linkContent: 'Devices',
-  },
-  {
-    isEnabled: true,
-    icon: Dashboard,
-    metaData: {
-      label: 'Dashboards',
-      href: 'https://google.com',
-      element: 'a',
-      target: '_blank',
-    },
-    linkContent: 'Dashboards',
-    childContent: [
-      {
-        metaData: {
-          label: 'Link 1',
-          title: 'Link 1',
-          element: 'button',
-        },
-        content: 'Link 1',
-      },
-      {
-        metaData: {
-          label: 'Link 2',
-          title: 'Link 2',
-        },
-        content: 'Link 2',
-      },
-    ],
-  },
-  {
-    isEnabled: true,
-    icon: Group,
-    metaData: {
-      label: 'Members',
-      element: 'button',
-    },
-    linkContent: 'Members',
-    childContent: [
-      {
-        metaData: {
-          label: 'Yet another link',
-          title: 'Yet another link',
-          element: 'button',
-        },
-        content: 'Link 3',
-        isActive: true,
-      },
-    ],
-  },
-];
-
 storiesOf('Watson IoT Experimental/DashboardEditor', module)
   .addDecorator(withKnobs)
   .add('default', () => (
@@ -262,50 +175,10 @@ storiesOf('Watson IoT Experimental/DashboardEditor', module)
       />
     </div>
   ))
-  .add('wrapped in SuiteHeader', () => (
+  .add('custom header renderer', () => (
     <div style={{ height: 'calc(100vh - 3rem)', marginRight: '-3rem' }}>
-      <SuiteHeader
-        suiteName="Application Suite"
-        appName="Application Name"
-        userDisplayName="Admin User"
-        username="adminuser"
-        routes={{
-          profile: 'https://www.ibm.com',
-          navigator: 'https://www.ibm.com',
-          admin: 'https://www.ibm.com',
-          logout: 'https://www.ibm.com',
-          whatsNew: 'https://www.ibm.com',
-          gettingStarted: 'https://www.ibm.com',
-          documentation: 'https://www.ibm.com',
-          requestEnhancement: 'https://www.ibm.com',
-          support: 'https://www.ibm.com',
-          about: 'https://www.ibm.com',
-        }}
-        applications={[
-          {
-            id: 'monitor',
-            name: 'Monitor',
-            href: 'https://www.ibm.com',
-          },
-          {
-            id: 'health',
-            name: 'Health',
-            href: 'https://www.ibm.com',
-            isExternal: true,
-          },
-        ]}
-        sideNavProps={{
-          links: sideNavLinks,
-        }}
-      />
       <DashboardEditor
-        title={text('title', 'My dashboard')}
-        onEditTitle={action('onEditTitle')}
-        onImport={action('onImport')}
-        onExport={action('onExport')}
-        onDelete={action('onDelete')}
-        onCancel={action('onCancel')}
-        onSubmit={action('onSubmit')}
+        renderHeader={() => <h1>Custom Header</h1>}
         supportedCardTypes={array('supportedCardTypes', [
           'TIMESERIES',
           'SIMPLE_BAR',
@@ -315,18 +188,9 @@ storiesOf('Watson IoT Experimental/DashboardEditor', module)
           'IMAGE',
           'TABLE',
         ])}
-        headerBreadcrumbs={[
-          <Link href="www.ibm.com">Dashboard library</Link>,
-          <Link href="www.ibm.com">Favorites</Link>,
-        ]}
       />
     </div>
   ))
-  .add('custom header renderer', () => (
-    <div style={{ height: 'calc(100vh - 3rem)', marginRight: '-3rem' }}>
-      <DashboardEditor renderHeader={() => <h1>Custom Header</h1>} />
-    </div>
-  ))
   .add('custom card preview renderer', () => (
     <div style={{ height: 'calc(100vh - 6rem)' }}>
       <DashboardEditor
@@ -378,9 +242,6 @@ storiesOf('Watson IoT Experimental/DashboardEditor', module)
           'IMAGE',
           'TABLE',
         ])}
-        i18n={{
-          cardType_CUSTOM: 'Custom',
-        }}
         headerBreadcrumbs={[
           <Link href="www.ibm.com">Dashboard library</Link>,
           <Link href="www.ibm.com">Favorites</Link>,

diff --git a/src/components/DashboardEditor/DashboardEditorHeader/DashboardEditorHeader.jsx b/src/components/DashboardEditor/DashboardEditorHeader/DashboardEditorHeader.jsx
@@ -119,17 +119,25 @@ const DashboardEditorHeader = ({
               name="fit-to-screen"
               text="Fit to screen"
               renderIcon={Maximize16}
+              index={0}
             />
             <IconSwitch
               name="xlarge"
               text="X-large View"
               renderIcon={Screen16}
+              index={1}
+            />
+            <IconSwitch
+              name="large"
+              text="Large View"
+              renderIcon={Laptop16}
+              index={2}
             />
-            <IconSwitch name="large" text="Large View" renderIcon={Laptop16} />
             <IconSwitch
               name="medium"
               text="Medium view"
               renderIcon={Tablet16}
+              index={3}
             />
           </ContentSwitcher>
         )}

diff --git a/...DashboardEditor/DashboardEditorHeader/__snapshots__/DashboardEditorHeader.story.storyshot b/...DashboardEditor/DashboardEditorHeader/__snapshots__/DashboardEditorHeader.story.storyshot
@@ -85,22 +85,22 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT Exper
                 className="iot--dashboard-editor-header--bottom"
               >
                 <button
-                  aria-describedby="icon-tooltip-7"
+                  aria-describedby="icon-tooltip-6"
                   className="bx--tooltip__trigger bx--tooltip--a11y iot--dashboard-editor-header--bottom__import bx--tooltip--bottom bx--tooltip--align-center"
                   onFocus={[Function]}
                   onMouseEnter={[Function]}
                   type="button"
                 >
                   <span
                     className="bx--assistive-text"
-                    id="icon-tooltip-7"
+                    id="icon-tooltip-6"
                   >
                     Import
                   </span>
                   <label
                     aria-disabled={false}
                     className="bx--btn bx--btn--ghost bx--btn--field"
-                    htmlFor="id7"
+                    htmlFor="id6"
                     onKeyDown={[Function]}
                     tabIndex={0}
                   >
@@ -129,7 +129,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT Exper
                   <input
                     className="bx--visually-hidden"
                     disabled={false}
-                    id="id7"
+                    id="id6"
                     multiple={false}
                     onChange={[Function]}
                     onClick={[Function]}