v0.11.5 -> v0.11.6 (#395)

* enhancement #387 - [Table ] Link enhancements (#388) * feat #386 - Table updates for policy hub (#390) * feat #391 - Update MadeWithLove icons (#394) * fix #392 - Return array values properly for getJSONPathValue (#393)
dassana-io · Jul 19, 2021 · 3cbfff9 · 3cbfff9
1 parent 4cc7352
commit 3cbfff9
Show file tree

Hide file tree

Showing 22 changed files with 589 additions and 415 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@dassana-io/web-components",
-	"version": "0.11.15",
+	"version": "0.11.16",
 	"publishConfig": {
 		"registry": "https://npm.pkg.github.com/dassana-io"
 	},
@@ -11,7 +11,7 @@
 	},
 	"dependencies": {
 		"@ant-design/icons": "^4.6.2",
-		"@dassana-io/web-utils": "^0.8.5",
+		"@dassana-io/web-utils": "^0.8.6",
 		"@fortawesome/fontawesome-svg-core": "^1.2.32",
 		"@fortawesome/free-brands-svg-icons": "^5.15.3",
 		"@fortawesome/free-solid-svg-icons": "^5.15.1",

diff --git a/rollup.config.ts b/rollup.config.ts
@@ -55,6 +55,7 @@ export default {
 		'react-helmet',
 		'react-hook-form',
 		'react-jss',
+		'react-scroll',
 		'remark-gfm',
 		'react-markdown',
 		'typescript',

diff --git a/src/__snapshots__/storybook.test.ts.snap b/src/__snapshots__/storybook.test.ts.snap
@@ -3041,7 +3041,7 @@ exports[`Storyshots Made With Love With Love 1`] = `
               <img
                 alt=" momos"
                 className="loveIcon-0-2-227"
-                src="with_love_momos.svg"
+                src="momo.svg"
               />
               <div
                 className="loveIconTag-0-2-228"
@@ -3074,7 +3074,7 @@ exports[`Storyshots Made With Love With Love 1`] = `
               <img
                 alt="gourmet coffees"
                 className="loveIcon-0-2-227"
-                src="with_love_coffee.svg"
+                src="coffee.svg"
               />
               <div
                 className="loveIconTag-0-2-228"
@@ -3107,7 +3107,7 @@ exports[`Storyshots Made With Love With Love 1`] = `
               <img
                 alt="high chews"
                 className="loveIcon-0-2-227"
-                src="with_love_high_chews.svg"
+                src="candy.svg"
               />
               <div
                 className="loveIconTag-0-2-228"
@@ -6328,13 +6328,17 @@ exports[`Storyshots TableDrawer Simple Drawer 1`] = `
                             rowSpan={null}
                             style={Object {}}
                           >
-                            <svg
-                              className=""
-                              fill="#7E7F86"
-                              height={25}
+                            <div
+                              className="iconWrapper-0-2-308"
                             >
-                              aws.svg
-                            </svg>
+                              <svg
+                                className=""
+                                fill="#7E7F86"
+                                height={25}
+                              >
+                                aws.svg
+                              </svg>
+                            </div>
                           </td>
                           <td
                             className="ant-table-cell"
@@ -6400,13 +6404,17 @@ exports[`Storyshots TableDrawer Simple Drawer 1`] = `
                             rowSpan={null}
                             style={Object {}}
                           >
-                            <svg
-                              className=""
-                              fill="#7E7F86"
-                              height={25}
+                            <div
+                              className="iconWrapper-0-2-308"
                             >
-                              aws.svg
-                            </svg>
+                              <svg
+                                className=""
+                                fill="#7E7F86"
+                                height={25}
+                              >
+                                aws.svg
+                              </svg>
+                            </div>
                           </td>
                           <td
                             className="ant-table-cell"
@@ -6472,13 +6480,17 @@ exports[`Storyshots TableDrawer Simple Drawer 1`] = `
                             rowSpan={null}
                             style={Object {}}
                           >
-                            <svg
-                              className=""
-                              fill="#7E7F86"
-                              height={25}
+                            <div
+                              className="iconWrapper-0-2-308"
                             >
-                              aws.svg
-                            </svg>
+                              <svg
+                                className=""
+                                fill="#7E7F86"
+                                height={25}
+                              >
+                                aws.svg
+                              </svg>
+                            </div>
                           </td>
                           <td
                             className="ant-table-cell"
@@ -6544,13 +6556,17 @@ exports[`Storyshots TableDrawer Simple Drawer 1`] = `
                             rowSpan={null}
                             style={Object {}}
                           >
-                            <svg
-                              className=""
-                              fill="#7E7F86"
-                              height={25}
+                            <div
+                              className="iconWrapper-0-2-308"
                             >
-                              aws.svg
-                            </svg>
+                              <svg
+                                className=""
+                                fill="#7E7F86"
+                                height={25}
+                              >
+                                aws.svg
+                              </svg>
+                            </div>
                           </td>
                           <td
                             className="ant-table-cell"
@@ -6616,13 +6632,17 @@ exports[`Storyshots TableDrawer Simple Drawer 1`] = `
                             rowSpan={null}
                             style={Object {}}
                           >
-                            <svg
-                              className=""
-                              fill="#7E7F86"
-                              height={25}
+                            <div
+                              className="iconWrapper-0-2-308"
                             >
-                              aws.svg
-                            </svg>
+                              <svg
+                                className=""
+                                fill="#7E7F86"
+                                height={25}
+                              >
+                                aws.svg
+                              </svg>
+                            </div>
                           </td>
                           <td
                             className="ant-table-cell"
@@ -6914,7 +6934,7 @@ exports[`Storyshots TimeInput Error 1`] = `
   className="light storyWrapper-0-2-2"
 >
   <div
-    className="ant-picker error-0-2-309"
+    className="ant-picker error-0-2-312"
     onMouseUp={[Function]}
   >
     <div
@@ -7188,22 +7208,22 @@ exports[`Storyshots Wizard Default 1`] = `
   className="light storyWrapper-0-2-2"
 >
   <div
-    className="container-0-2-310"
+    className="container-0-2-313"
   >
     <div
-      className="header-0-2-311"
+      className="header-0-2-314"
     >
       <div
-        className="title-0-2-315"
+        className="title-0-2-318"
       >
         Foo
         <span
-          className="iconButton-0-2-19 iconArrow-0-2-312 iconLeftArrow-0-2-313"
+          className="iconButton-0-2-19 iconArrow-0-2-315 iconLeftArrow-0-2-316"
           onClick={[Function]}
         >
           <svg
             aria-hidden="true"
-            className="svg-inline--fa fa-arrow-right fa-w-14 icon-0-2-18 icon-d65-0-2-318"
+            className="svg-inline--fa fa-arrow-right fa-w-14 icon-0-2-18 icon-d65-0-2-321"
             data-icon="arrow-right"
             data-prefix="fas"
             focusable="false"

diff --git a/src/components/Link/index.tsx b/src/components/Link/index.tsx
@@ -23,7 +23,7 @@ const AntDLink = Typography.Link
 
 export type LinkTargetType = '_self' | '_blank'
 
-export interface SharedLinkProps extends CommonComponentProps {
+export interface LinkProps extends CommonComponentProps {
 	/**
 	 * Array of classes to pass to element
 	 */
@@ -40,26 +40,16 @@ export interface SharedLinkProps extends CommonComponentProps {
 	 * Whether or not the link is underlined.
 	 */
 	underline?: boolean
-}
-
-interface LinkHref extends SharedLinkProps {
 	/**
 	 * The URL the link goes to.
 	 */
-	href: string
+	href?: string
 	/**
 	 * Click handler. **Note**: Either an `onClick` or `href` is required.
 	 */
-	onClick?: never
+	onClick?: React.MouseEventHandler<HTMLAnchorElement>
 }
 
-interface LinkClick extends SharedLinkProps {
-	href?: never
-	onClick: () => void
-}
-
-export type LinkProps = LinkHref | LinkClick
-
 export const Link: FC<LinkProps> = ({
 	classes = [],
 	children,

diff --git a/src/components/Pages/MadeWithLove.tsx b/src/components/Pages/MadeWithLove.tsx
@@ -1,11 +1,11 @@
+import Candy from '../assets/images/candy.svg'
 import cn from 'classnames'
-import Coffee from '../assets/images/with_love_coffee.svg'
+import Coffee from '../assets/images/coffee.svg'
 import { createUseStyles } from 'react-jss'
 import { faHeart } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import HighChews from '../assets/images/with_love_high_chews.svg'
 import { Link } from 'components/Link'
-import Momos from '../assets/images/with_love_momos.svg'
+import Momos from '../assets/images/momo.svg'
 import { styleguide } from 'components/assets/styles'
 import { Breakpoints, ThemeType } from '@dassana-io/web-utils'
 import {
@@ -128,7 +128,7 @@ const loveIconsConfig = [
 		tag: 'gourmet coffees'
 	},
 	{
-		icon: HighChews,
+		icon: Candy,
 		tag: 'high chews'
 	}
 ]

diff --git a/src/components/Table/IconCell.tsx b/src/components/Table/IconCell.tsx
@@ -0,0 +1,58 @@
+import { createUseStyles } from 'react-jss'
+import { styleguide } from 'components/assets/styles'
+import { TableIconLabelType } from './types'
+import { Tooltip } from 'components/Tooltip'
+import { Icon, IconProps } from '../Icon'
+import React, { FC } from 'react'
+
+const { flexAlignCenter, spacing } = styleguide
+
+const useStyles = createUseStyles({
+	iconWrapper: flexAlignCenter,
+	label: { marginLeft: spacing.s },
+	tooltipTrigger: {
+		...flexAlignCenter,
+		width: 'max-content'
+	}
+})
+
+interface IconCellProps {
+	iconProps: IconProps
+	label?: string
+	labelType?: TableIconLabelType
+}
+export const IconCell: FC<IconCellProps> = ({
+	label,
+	labelType,
+	iconProps
+}: IconCellProps) => {
+	const classes = useStyles()
+
+	const { inline, tooltip } = TableIconLabelType
+
+	switch (labelType) {
+		case inline:
+			return (
+				<div className={classes.iconWrapper}>
+					<Icon {...iconProps} />
+					<span className={classes.label}>{label}</span>
+				</div>
+			)
+
+		case tooltip:
+			return (
+				<Tooltip
+					title={label}
+					tooltipTriggerClasses={[classes.tooltipTrigger]}
+				>
+					<Icon {...iconProps} />
+				</Tooltip>
+			)
+	}
+
+	return (
+		<div className={classes.iconWrapper}>
+			<Icon {...iconProps} />
+		</div>
+	)
+}
diff --git a/src/components/Table/__tests__/Table.test.tsx b/src/components/Table/__tests__/Table.test.tsx
@@ -129,7 +129,12 @@ describe('Table', () => {
 					unixTS: 1519782342212
 				})
 			],
+			buildHrefIconJSONPath: {
+				id: 'H',
+				label: 'H'
+			},
 			company: { id: 'c1', name: 'azure', value: 'azure' },
+			icon: 'A',
 			id: 0,
 			key: 0,
 			name: { id: 'n1', value: 'Lorem ipsum' },

diff --git a/src/components/Table/__tests__/utils.test.tsx b/src/components/Table/__tests__/utils.test.tsx
@@ -186,6 +186,7 @@ describe('mapFilterKeys', () => {
 			'start_date',
 			['role', 'name'],
 			'linked_in',
+			'company',
 			'company'
 		]