fix(DataTable): update gap space between content and indicator (#2065)

* update gap space between content and indicator

* updated snapshots

* update after review

* update snapshot

* delete irelevante snapshot

Author: laraharrow

packages/components/snapshots/DataTable/Indicator-snap.png

@@ -113,15 +113,15 @@ const DataTableCellLayout = forwardRef(
 
       if (indicator) {
         content = (
-          <Space gap="xsmall">
+          <Space gap="medium">
             {indicator}
             {content}
           </Space>
         )
       }
     } else if (indicator) {
       content = (
-        <Space gap="xsmall">
+        <Space gap="medium">
           {indicator}
           <span>{content}</span>
         </Space>

packages/components/src/DataTable/Column/DataTableCell.tsx

@@ -28,6 +28,7 @@ export default {
   title: 'DataTable',
 }
 
+export * from './Indicator'
 export * from './Interaction'
 export * from './Percentage'
 export * from './Responsive'

packages/components/src/DataTable/stories/DataTable.story.tsx

@@ -0,0 +1,81 @@
+/*
+
+ MIT License
+
+ Copyright (c) 2021 Looker Data Sciences, Inc.
+
+ Permission is hereby granted, free of charge, to any person obtaining a copy
+ of this software and associated documentation files (the "Software"), to deal
+ in the Software without restriction, including without limitation the rights
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ copies of the Software, and to permit persons to whom the Software is
+ furnished to do so, subject to the following conditions:
+
+ The above copyright notice and this permission notice shall be included in all
+ copies or substantial portions of the Software.
+
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ SOFTWARE.
+
+ */
+
+import { Story } from '@storybook/react/types-6-0'
+import React from 'react'
+import { AvatarIcon } from '../../Avatar'
+import { DataTable, DataTableProps, DataTableCell, DataTableItem } from '..'
+
+const data = [
+  {
+    description: 'User',
+    id: '1',
+    indicator: <AvatarIcon color="key" icon="User" />,
+    name: 'Gorgonzola',
+  },
+  {
+    description: 'User',
+    id: '2',
+    indicator: <AvatarIcon color="key" icon="User" />,
+    name: 'Cheddar',
+  },
+  {
+    description: 'User',
+    id: '3',
+    indicator: <AvatarIcon color="key" icon="User" />,
+    name: `Blue`,
+  },
+]
+
+const columns = [
+  {
+    id: 'id',
+    title: 'ID',
+  },
+  {
+    id: 'name',
+    title: 'Name',
+  },
+]
+
+const items = data.map(({ description, id, indicator, name }) => (
+  <DataTableItem key={id} id={id}>
+    <DataTableCell>{id}</DataTableCell>
+    <DataTableCell indicator={indicator} description={description}>
+      {name}
+    </DataTableCell>
+  </DataTableItem>
+))
+
+const Template: Story<DataTableProps> = ({ ...args }) => {
+  return <DataTable {...args} />
+}
+
+export const Indicator = Template.bind({})
+Indicator.args = {
+  children: items,
+  columns: columns,
+}