diff --git a/package-lock.json b/package-lock.json
index ee3405e5..c4948253 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
{
"name": "@dassana-io/web-components",
- "version": "0.3.2",
+ "version": "0.5.0",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
@@ -5256,6 +5256,184 @@
"svgo": "^1.2.2"
}
},
+ "@svgr/rollup": {
+ "version": "5.4.0",
+ "resolved": "https://registry.npmjs.org/@svgr/rollup/-/rollup-5.4.0.tgz",
+ "integrity": "sha512-hwYjrTddW6mFU9vwqRr1TULNvxiIxGdIbqrD5J7vtoATSfWazq/2JSnT4BmiH+/4kFXLEtjKuSKoDUotkOIAkg==",
+ "dev": true,
+ "requires": {
+ "@babel/core": "^7.7.5",
+ "@babel/plugin-transform-react-constant-elements": "^7.7.4",
+ "@babel/preset-env": "^7.9.5",
+ "@babel/preset-react": "^7.9.4",
+ "@svgr/core": "^5.4.0",
+ "@svgr/plugin-jsx": "^5.4.0",
+ "@svgr/plugin-svgo": "^5.4.0",
+ "rollup-pluginutils": "^2.8.2"
+ },
+ "dependencies": {
+ "@svgr/babel-plugin-add-jsx-attribute": {
+ "version": "5.4.0",
+ "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-5.4.0.tgz",
+ "integrity": "sha512-ZFf2gs/8/6B8PnSofI0inYXr2SDNTDScPXhN7k5EqD4aZ3gi6u+rbmZHVB8IM3wDyx8ntKACZbtXSm7oZGRqVg==",
+ "dev": true
+ },
+ "@svgr/babel-plugin-remove-jsx-attribute": {
+ "version": "5.4.0",
+ "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-remove-jsx-attribute/-/babel-plugin-remove-jsx-attribute-5.4.0.tgz",
+ "integrity": "sha512-yaS4o2PgUtwLFGTKbsiAy6D0o3ugcUhWK0Z45umJ66EPWunAz9fuFw2gJuje6wqQvQWOTJvIahUwndOXb7QCPg==",
+ "dev": true
+ },
+ "@svgr/babel-plugin-remove-jsx-empty-expression": {
+ "version": "5.0.1",
+ "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-remove-jsx-empty-expression/-/babel-plugin-remove-jsx-empty-expression-5.0.1.tgz",
+ "integrity": "sha512-LA72+88A11ND/yFIMzyuLRSMJ+tRKeYKeQ+mR3DcAZ5I4h5CPWN9AHyUzJbWSYp/u2u0xhmgOe0+E41+GjEueA==",
+ "dev": true
+ },
+ "@svgr/babel-plugin-replace-jsx-attribute-value": {
+ "version": "5.0.1",
+ "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-replace-jsx-attribute-value/-/babel-plugin-replace-jsx-attribute-value-5.0.1.tgz",
+ "integrity": "sha512-PoiE6ZD2Eiy5mK+fjHqwGOS+IXX0wq/YDtNyIgOrc6ejFnxN4b13pRpiIPbtPwHEc+NT2KCjteAcq33/F1Y9KQ==",
+ "dev": true
+ },
+ "@svgr/babel-plugin-svg-dynamic-title": {
+ "version": "5.4.0",
+ "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-svg-dynamic-title/-/babel-plugin-svg-dynamic-title-5.4.0.tgz",
+ "integrity": "sha512-zSOZH8PdZOpuG1ZVx/cLVePB2ibo3WPpqo7gFIjLV9a0QsuQAzJiwwqmuEdTaW2pegyBE17Uu15mOgOcgabQZg==",
+ "dev": true
+ },
+ "@svgr/babel-plugin-svg-em-dimensions": {
+ "version": "5.4.0",
+ "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-svg-em-dimensions/-/babel-plugin-svg-em-dimensions-5.4.0.tgz",
+ "integrity": "sha512-cPzDbDA5oT/sPXDCUYoVXEmm3VIoAWAPT6mSPTJNbQaBNUuEKVKyGH93oDY4e42PYHRW67N5alJx/eEol20abw==",
+ "dev": true
+ },
+ "@svgr/babel-plugin-transform-react-native-svg": {
+ "version": "5.4.0",
+ "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-transform-react-native-svg/-/babel-plugin-transform-react-native-svg-5.4.0.tgz",
+ "integrity": "sha512-3eYP/SaopZ41GHwXma7Rmxcv9uRslRDTY1estspeB1w1ueZWd/tPlMfEOoccYpEMZU3jD4OU7YitnXcF5hLW2Q==",
+ "dev": true
+ },
+ "@svgr/babel-plugin-transform-svg-component": {
+ "version": "5.4.0",
+ "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-transform-svg-component/-/babel-plugin-transform-svg-component-5.4.0.tgz",
+ "integrity": "sha512-zLl4Fl3NvKxxjWNkqEcpdSOpQ3LGVH2BNFQ6vjaK6sFo2IrSznrhURIPI0HAphKiiIwNYjAfE0TNoQDSZv0U9A==",
+ "dev": true
+ },
+ "@svgr/babel-preset": {
+ "version": "5.4.0",
+ "resolved": "https://registry.npmjs.org/@svgr/babel-preset/-/babel-preset-5.4.0.tgz",
+ "integrity": "sha512-Gyx7cCxua04DBtyILTYdQxeO/pwfTBev6+eXTbVbxe4HTGhOUW6yo7PSbG2p6eJMl44j6XSequ0ZDP7bl0nu9A==",
+ "dev": true,
+ "requires": {
+ "@svgr/babel-plugin-add-jsx-attribute": "^5.4.0",
+ "@svgr/babel-plugin-remove-jsx-attribute": "^5.4.0",
+ "@svgr/babel-plugin-remove-jsx-empty-expression": "^5.0.1",
+ "@svgr/babel-plugin-replace-jsx-attribute-value": "^5.0.1",
+ "@svgr/babel-plugin-svg-dynamic-title": "^5.4.0",
+ "@svgr/babel-plugin-svg-em-dimensions": "^5.4.0",
+ "@svgr/babel-plugin-transform-react-native-svg": "^5.4.0",
+ "@svgr/babel-plugin-transform-svg-component": "^5.4.0"
+ }
+ },
+ "@svgr/core": {
+ "version": "5.4.0",
+ "resolved": "https://registry.npmjs.org/@svgr/core/-/core-5.4.0.tgz",
+ "integrity": "sha512-hWGm1DCCvd4IEn7VgDUHYiC597lUYhFau2lwJBYpQWDirYLkX4OsXu9IslPgJ9UpP7wsw3n2Ffv9sW7SXJVfqQ==",
+ "dev": true,
+ "requires": {
+ "@svgr/plugin-jsx": "^5.4.0",
+ "camelcase": "^6.0.0",
+ "cosmiconfig": "^6.0.0"
+ }
+ },
+ "@svgr/hast-util-to-babel-ast": {
+ "version": "5.4.0",
+ "resolved": "https://registry.npmjs.org/@svgr/hast-util-to-babel-ast/-/hast-util-to-babel-ast-5.4.0.tgz",
+ "integrity": "sha512-+U0TZZpPsP2V1WvVhqAOSTk+N+CjYHdZx+x9UBa1eeeZDXwH8pt0CrQf2+SvRl/h2CAPRFkm+Ey96+jKP8Bsgg==",
+ "dev": true,
+ "requires": {
+ "@babel/types": "^7.9.5"
+ }
+ },
+ "@svgr/plugin-jsx": {
+ "version": "5.4.0",
+ "resolved": "https://registry.npmjs.org/@svgr/plugin-jsx/-/plugin-jsx-5.4.0.tgz",
+ "integrity": "sha512-SGzO4JZQ2HvGRKDzRga9YFSqOqaNrgLlQVaGvpZ2Iht2gwRp/tq+18Pvv9kS9ZqOMYgyix2LLxZMY1LOe9NPqw==",
+ "dev": true,
+ "requires": {
+ "@babel/core": "^7.7.5",
+ "@svgr/babel-preset": "^5.4.0",
+ "@svgr/hast-util-to-babel-ast": "^5.4.0",
+ "svg-parser": "^2.0.2"
+ }
+ },
+ "@svgr/plugin-svgo": {
+ "version": "5.4.0",
+ "resolved": "https://registry.npmjs.org/@svgr/plugin-svgo/-/plugin-svgo-5.4.0.tgz",
+ "integrity": "sha512-3Cgv3aYi1l6SHyzArV9C36yo4kgwVdF3zPQUC6/aCDUeXAofDYwE5kk3e3oT5ZO2a0N3lB+lLGvipBG6lnG8EA==",
+ "dev": true,
+ "requires": {
+ "cosmiconfig": "^6.0.0",
+ "merge-deep": "^3.0.2",
+ "svgo": "^1.2.2"
+ }
+ },
+ "camelcase": {
+ "version": "6.0.0",
+ "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-6.0.0.tgz",
+ "integrity": "sha512-8KMDF1Vz2gzOq54ONPJS65IvTUaB1cHJ2DMM7MbPmLZljDH1qpzzLsWdiN9pHh6qvkRVDTi/07+eNGch/oLU4w==",
+ "dev": true
+ },
+ "cosmiconfig": {
+ "version": "6.0.0",
+ "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-6.0.0.tgz",
+ "integrity": "sha512-xb3ZL6+L8b9JLLCx3ZdoZy4+2ECphCMo2PwqgP1tlfVq6M6YReyzBJtvWWtbDSpNr9hn96pkCiZqUcFEc+54Qg==",
+ "dev": true,
+ "requires": {
+ "@types/parse-json": "^4.0.0",
+ "import-fresh": "^3.1.0",
+ "parse-json": "^5.0.0",
+ "path-type": "^4.0.0",
+ "yaml": "^1.7.2"
+ }
+ },
+ "import-fresh": {
+ "version": "3.2.1",
+ "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.2.1.tgz",
+ "integrity": "sha512-6e1q1cnWP2RXD9/keSkxHScg508CdXqXWgWBaETNhyuBFz+kUZlKboh+ISK+bU++DmbHimVBrOz/zzPe0sZ3sQ==",
+ "dev": true,
+ "requires": {
+ "parent-module": "^1.0.0",
+ "resolve-from": "^4.0.0"
+ }
+ },
+ "parse-json": {
+ "version": "5.1.0",
+ "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.1.0.tgz",
+ "integrity": "sha512-+mi/lmVVNKFNVyLXV31ERiy2CY5E1/F6QtJFEzoChPRwwngMNXRDQ9GJ5WdE2Z2P4AujsOi0/+2qHID68KwfIQ==",
+ "dev": true,
+ "requires": {
+ "@babel/code-frame": "^7.0.0",
+ "error-ex": "^1.3.1",
+ "json-parse-even-better-errors": "^2.3.0",
+ "lines-and-columns": "^1.1.6"
+ }
+ },
+ "path-type": {
+ "version": "4.0.0",
+ "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
+ "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
+ "dev": true
+ },
+ "resolve-from": {
+ "version": "4.0.0",
+ "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
+ "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
+ "dev": true
+ }
+ }
+ },
"@svgr/webpack": {
"version": "4.3.3",
"resolved": "https://registry.npmjs.org/@svgr/webpack/-/webpack-4.3.3.tgz",
@@ -17813,9 +17991,9 @@
"dev": true
},
"node-forge": {
- "version": "0.9.0",
- "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.9.0.tgz",
- "integrity": "sha512-7ASaDa3pD+lJ3WvXFsxekJQelBKRpne+GOVbLbtHYdd7pFspyeuJHnWfLplGf3SwKGbfs/aYl5V/JCIaHVUKKQ=="
+ "version": "0.10.0",
+ "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.10.0.tgz",
+ "integrity": "sha512-PPmu8eEeG9saEUvI97fm4OYxXVB6bFvyNTyiUOBichBpFG8A1Ljw3bY62+5oOjDEMHRnd0Y7HQ+x7uzxOzC6JA=="
},
"node-int64": {
"version": "0.4.0",
@@ -22128,6 +22306,23 @@
}
}
},
+ "rollup-pluginutils": {
+ "version": "2.8.2",
+ "resolved": "https://registry.npmjs.org/rollup-pluginutils/-/rollup-pluginutils-2.8.2.tgz",
+ "integrity": "sha512-EEp9NhnUkwY8aif6bxgovPHMoMoNr2FulJziTndpt5H9RdwC47GSGuII9XxpSdzVGM0GWrNPHV6ie1LTNJPaLQ==",
+ "dev": true,
+ "requires": {
+ "estree-walker": "^0.6.1"
+ },
+ "dependencies": {
+ "estree-walker": {
+ "version": "0.6.1",
+ "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-0.6.1.tgz",
+ "integrity": "sha512-SqmZANLWS0mnatqbSfRP5g8OXZC12Fgg1IwNtLsyHDzJizORW4khDfjPqJZsemPWBB2uqykUah5YpQ6epsqC/w==",
+ "dev": true
+ }
+ }
+ },
"rst-selector-parser": {
"version": "2.2.3",
"resolved": "https://registry.npmjs.org/rst-selector-parser/-/rst-selector-parser-2.2.3.tgz",
@@ -22293,11 +22488,11 @@
"integrity": "sha1-Yl2GWPhlr0Psliv8N2o3NZpJlMo="
},
"selfsigned": {
- "version": "1.10.7",
- "resolved": "https://registry.npmjs.org/selfsigned/-/selfsigned-1.10.7.tgz",
- "integrity": "sha512-8M3wBCzeWIJnQfl43IKwOmC4H/RAp50S8DF60znzjW5GVqTcSe2vWclt7hmYVPkKPlHWOu5EaWOMZ2Y6W8ZXTA==",
+ "version": "1.10.8",
+ "resolved": "https://registry.npmjs.org/selfsigned/-/selfsigned-1.10.8.tgz",
+ "integrity": "sha512-2P4PtieJeEwVgTU9QEcwIRDQ/mXJLX8/+I3ur+Pg16nS8oNbrGxEso9NyYWy8NAmXiNl4dlAp5MwoNeCWzON4w==",
"requires": {
- "node-forge": "0.9.0"
+ "node-forge": "^0.10.0"
}
},
"semver": {
diff --git a/package.json b/package.json
index bd25ea88..79d1345b 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "@dassana-io/web-components",
- "version": "0.4.0",
+ "version": "0.5.0",
"publishConfig": {
"registry": "https://npm.pkg.github.com/dassana-io"
},
@@ -78,6 +78,7 @@
"@storybook/addons": "^6.0.21",
"@storybook/preset-create-react-app": "^3.1.4",
"@storybook/react": "^6.0.21",
+ "@svgr/rollup": "^5.4.0",
"@types/bytes": "^3.1.0",
"@types/classnames": "^2.2.10",
"@types/enzyme": "^3.10.5",
diff --git a/rollup.config.ts b/rollup.config.ts
index 86328345..b56085cb 100644
--- a/rollup.config.ts
+++ b/rollup.config.ts
@@ -2,6 +2,7 @@ import commonjs from '@rollup/plugin-commonjs'
import image from '@rollup/plugin-image'
import resolve from '@rollup/plugin-node-resolve'
import styles from 'rollup-plugin-styles'
+import svgr from '@svgr/rollup'
import typescript from 'rollup-plugin-typescript2'
import pkg from './package.json'
@@ -26,6 +27,7 @@ export default {
resolve(),
commonjs(),
styles(),
+ svgr(),
image(),
typescript({
tsconfig: 'tsconfig.rollup.json',
diff --git a/src/__snapshots__/storybook.test.ts.snap b/src/__snapshots__/storybook.test.ts.snap
index 0760c9b0..75de3a7a 100644
--- a/src/__snapshots__/storybook.test.ts.snap
+++ b/src/__snapshots__/storybook.test.ts.snap
@@ -1,5 +1,38 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
+exports[`Storyshots Avatar Default 1`] = `
+
+
+ D
+
+
+`;
+
+exports[`Storyshots Avatar Icon 1`] = `
+
+
+
+`;
+
exports[`Storyshots Button Default 1`] = `
+ width={64}
+>
+ dassana.svg
+
`;
exports[`Storyshots Input Default 1`] = `
@@ -343,11 +378,13 @@ exports[`Storyshots Popover Default 1`] = `
onMouseEnter={[Function]}
onMouseLeave={[Function]}
>
- 
+ width={32}
+ >
+ dassana.svg
+
`;
@@ -365,11 +402,13 @@ exports[`Storyshots Popover Title 1`] = `
onMouseEnter={[Function]}
onMouseLeave={[Function]}
>
-
+ width={32}
+ >
+ dassana.svg
+
`;
@@ -790,11 +829,13 @@ exports[`Storyshots Select Icon 1`] = `
- 
+ width={15}
+ >
+ aws.svg
+
AWS
@@ -1107,11 +1148,13 @@ exports[`Storyshots Tooltip Default 1`] = `
onMouseEnter={[Function]}
onMouseLeave={[Function]}
>
-
+ width={32}
+ >
+ dassana.svg
+
`;
diff --git a/src/components/Avatar/Avatar.stories.tsx b/src/components/Avatar/Avatar.stories.tsx
new file mode 100644
index 00000000..75017bc9
--- /dev/null
+++ b/src/components/Avatar/Avatar.stories.tsx
@@ -0,0 +1,39 @@
+import DassanaIcon from '../Icon'
+import React from 'react'
+import Avatar, { AvatarProps } from './index'
+import { Meta, Story } from '@storybook/react/types-6-0'
+
+const sizeOptions: Omit[] = [
+ 'default',
+ 'large',
+ 'small'
+]
+
+export default {
+ argTypes: {
+ children: { control: 'text' },
+ icon: { control: { disable: true } },
+ size: {
+ control: {
+ options: sizeOptions,
+ type: 'select'
+ },
+ defaultValue: 'default'
+ }
+ },
+ component: Avatar,
+ title: 'Avatar'
+} as Meta
+
+const Template: Story = args =>
+
+export const Default = Template.bind({})
+Default.args = { children: 'D' }
+
+export const Icon = Template.bind({})
+Icon.argTypes = {
+ children: { control: { disable: true } }
+}
+Icon.args = {
+ icon:
+}
diff --git a/src/components/Avatar/Avatar.test.tsx b/src/components/Avatar/Avatar.test.tsx
new file mode 100644
index 00000000..1431f2f2
--- /dev/null
+++ b/src/components/Avatar/Avatar.test.tsx
@@ -0,0 +1,13 @@
+import React from 'react'
+import Avatar, { AvatarProps } from '.'
+import { shallow, ShallowWrapper } from 'enzyme'
+
+let wrapper: ShallowWrapper
+
+describe('Avatar', () => {
+ it('renders', () => {
+ wrapper = shallow(A)
+
+ expect(wrapper).toHaveLength(1)
+ })
+})
diff --git a/src/components/Avatar/index.tsx b/src/components/Avatar/index.tsx
new file mode 100644
index 00000000..638c9de7
--- /dev/null
+++ b/src/components/Avatar/index.tsx
@@ -0,0 +1,46 @@
+import 'antd/lib/avatar/style/index.css'
+import { Avatar as AntDAvatar } from 'antd'
+import { AvatarProps as AntDAvatarProps } from 'antd/lib/avatar'
+import React, { FC, ReactNode } from 'react'
+
+interface SharedAvatarProps {
+ /**
+ * Letter type unit distance between left and right sides.
+ */
+ gap?: number
+ /**
+ * Avatar size. Can be a number (pixels) or predefined sizes of small, large, and default.
+ */
+ size?: AntDAvatarProps['size']
+}
+
+interface AvatarIcon extends SharedAvatarProps {
+ /**
+ * Icon to render as the avatar.
+ */
+ icon: ReactNode
+ children?: never
+}
+
+interface GeneralAvatar extends SharedAvatarProps {
+ icon?: never
+ /**
+ * Avatar children to render. **Note**: Either `children` or `icon` is required.
+ */
+ children: ReactNode
+}
+
+export type AvatarProps = GeneralAvatar | AvatarIcon
+
+const Avatar: FC = ({
+ children,
+ gap,
+ icon,
+ size
+}: AvatarProps) => (
+
+ {children}
+
+)
+
+export default Avatar
diff --git a/src/components/Icon/Icon.stories.tsx b/src/components/Icon/Icon.stories.tsx
index 0493fe3b..02e9b1ed 100644
--- a/src/components/Icon/Icon.stories.tsx
+++ b/src/components/Icon/Icon.stories.tsx
@@ -14,6 +14,7 @@ const Template: Story = args =>
export const Predefined = Template.bind({})
Predefined.argTypes = {
+ color: { control: { type: 'color' } },
icon: {
control: { disable: true }
}
diff --git a/src/components/Icon/Icon.test.tsx b/src/components/Icon/Icon.test.tsx
index d81d664b..2552d8d2 100644
--- a/src/components/Icon/Icon.test.tsx
+++ b/src/components/Icon/Icon.test.tsx
@@ -18,14 +18,6 @@ describe('Predefined Icon', () => {
expect(wrapper).toHaveLength(1)
})
- it('renders with correct src url', () => {
- expect(wrapper.getDOMNode().getAttribute('src')).toContain('dassana')
- })
-
- it('has the correct alt attribute', () => {
- expect(wrapper.getDOMNode().getAttribute('alt')).toBe('dassana')
- })
-
it('has the correct height', () => {
expect(wrapper.getDOMNode().getAttribute('height')).toBe('64')
})
@@ -35,6 +27,13 @@ describe('Predefined Icon', () => {
expect(wrapper.getDOMNode().getAttribute('height')).toBe('32')
})
+
+ it('correctly applies the color prop if one is provided', () => {
+ const mockColor = 'blue'
+ wrapper = mount()
+
+ expect(wrapper.getDOMNode().getAttribute('fill')).toBe(mockColor)
+ })
})
describe('Custom Icon', () => {
diff --git a/src/components/Icon/IconsMap.ts b/src/components/Icon/IconsMap.ts
index d6e30856..7691ff70 100644
--- a/src/components/Icon/IconsMap.ts
+++ b/src/components/Icon/IconsMap.ts
@@ -1,13 +1,17 @@
-import AWS from '../assets/icons/aws.svg'
-import AZURE from '../assets/icons/azure.svg'
-import DASSANA_BLUE from '../assets/icons/dassana-blue.png'
-import GOOGLE_CLOUD from '../assets/icons/google-cloud.svg'
+import { ReactComponent as APP_STORE } from '../assets/icons/app-store.svg'
+import { ReactComponent as AWS } from '../assets/icons/aws.svg'
+import { ReactComponent as AZURE } from '../assets/icons/azure.svg'
+import { ReactComponent as DASSANA } from '../assets/icons/dassana.svg'
+import { ReactComponent as GOOGLE_CLOUD } from '../assets/icons/google-cloud.svg'
+import { ReactComponent as QUERY_SERVICE } from '../assets/icons/query-service.svg'
const Icons = {
+ appStore: APP_STORE,
aws: AWS,
azure: AZURE,
- dassana: DASSANA_BLUE,
- 'google-cloud': GOOGLE_CLOUD
+ dassana: DASSANA,
+ 'google-cloud': GOOGLE_CLOUD,
+ queryService: QUERY_SERVICE
}
export type IconName = keyof typeof Icons
diff --git a/src/components/Icon/index.tsx b/src/components/Icon/index.tsx
index 020c0406..2eec1582 100644
--- a/src/components/Icon/index.tsx
+++ b/src/components/Icon/index.tsx
@@ -22,6 +22,7 @@ interface IconPath extends SharedIconProps {
}
interface IconKey extends SharedIconProps {
+ color?: string
iconKey: IconName
icon?: never
}
@@ -32,10 +33,15 @@ const Icon: FC = ({ height = 32, ...props }: IconProps) => {
const { icon } = props as IconPath
const { iconKey } = props as IconKey
- const imgSrc = iconKey ? Icons[iconKey] : icon
- const imgAlt = iconKey ? iconKey : icon
+ if (iconKey) {
+ const Svg = Icons[iconKey]
- return 
+ const { color = '#7E8083' } = props as IconKey
+
+ return
+ }
+
+ return 
}
export default Icon
diff --git a/src/components/Notification/Notification.test.ts b/src/components/Notification/Notification.test.ts
index 43684b40..e3f9b261 100644
--- a/src/components/Notification/Notification.test.ts
+++ b/src/components/Notification/Notification.test.ts
@@ -17,8 +17,10 @@ describe('Notification', () => {
const mockErrorNotification = 'Fake Error Notification'
generateNotification('error', mockErrorNotification)
- expect(notification.error).toHaveBeenCalledWith({
- message: mockErrorNotification
- })
+ expect(notification.error).toHaveBeenCalledWith(
+ expect.objectContaining({
+ message: mockErrorNotification
+ })
+ )
})
})
diff --git a/src/components/Notification/index.ts b/src/components/Notification/index.ts
index b179e9c2..fef719c1 100644
--- a/src/components/Notification/index.ts
+++ b/src/components/Notification/index.ts
@@ -1,8 +1,13 @@
import 'antd/lib/notification/style/index.css'
-import { IconType } from 'antd/lib/notification'
import { notification } from 'antd'
+import { ConfigProps, IconType } from 'antd/lib/notification'
-export const generateNotification = (type: IconType, message: string): void =>
+export const generateNotification = (
+ type: IconType,
+ message: string,
+ config?: ConfigProps
+): void =>
notification[type]({
- message
+ message,
+ ...config
})
diff --git a/src/components/Select/Select.stories.tsx b/src/components/Select/Select.stories.tsx
index ef94616e..dca980a2 100644
--- a/src/components/Select/Select.stories.tsx
+++ b/src/components/Select/Select.stories.tsx
@@ -1,5 +1,3 @@
-import 'antd/lib/select/style/index.css'
-import IconsMap from '../Icon/IconsMap'
import React from 'react'
import { basicOptions, iconOptions } from './fixtures/sample_options'
import { Meta, Story } from '@storybook/react/types-6-0'
@@ -24,7 +22,6 @@ export const Icon = Template.bind({})
Icon.args = {
defaultValue: 'aws',
options: iconOptions,
- optionsConfig: { iconMap: IconsMap },
placeholder: 'Choose a Cloud Provider'
}
diff --git a/src/components/assets/icons/app-store.svg b/src/components/assets/icons/app-store.svg
new file mode 100644
index 00000000..9d3303fe
--- /dev/null
+++ b/src/components/assets/icons/app-store.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/components/assets/icons/aws.svg b/src/components/assets/icons/aws.svg
index df5331c9..2185baa1 100644
--- a/src/components/assets/icons/aws.svg
+++ b/src/components/assets/icons/aws.svg
@@ -11,10 +11,10 @@
xml:space="preserve"
>
diff --git a/src/components/assets/icons/azure.svg b/src/components/assets/icons/azure.svg
index c09e9ba5..4f575648 100644
--- a/src/components/assets/icons/azure.svg
+++ b/src/components/assets/icons/azure.svg
@@ -11,12 +11,12 @@
xml:space="preserve"
>
diff --git a/src/components/assets/icons/dassana-blue.png b/src/components/assets/icons/dassana-blue.png
deleted file mode 100644
index fe5b0b1c..00000000
Binary files a/src/components/assets/icons/dassana-blue.png and /dev/null differ
diff --git a/src/components/assets/icons/dassana-orange.png b/src/components/assets/icons/dassana-orange.png
deleted file mode 100644
index 4c268b12..00000000
Binary files a/src/components/assets/icons/dassana-orange.png and /dev/null differ
diff --git a/src/components/assets/icons/dassana.svg b/src/components/assets/icons/dassana.svg
new file mode 100644
index 00000000..72a494cd
--- /dev/null
+++ b/src/components/assets/icons/dassana.svg
@@ -0,0 +1,6 @@
+
diff --git a/src/components/assets/icons/google-cloud.svg b/src/components/assets/icons/google-cloud.svg
index ef10de85..3ab8f22b 100644
--- a/src/components/assets/icons/google-cloud.svg
+++ b/src/components/assets/icons/google-cloud.svg
@@ -3,19 +3,19 @@
diff --git a/src/components/assets/icons/query-service.svg b/src/components/assets/icons/query-service.svg
new file mode 100644
index 00000000..d87d03dd
--- /dev/null
+++ b/src/components/assets/icons/query-service.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/components/index.ts b/src/components/index.ts
index 92ccd1e3..25b9c141 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -1,3 +1,4 @@
+export { default as Avatar } from './Avatar'
export { default as Button } from './Button'
export { default as Form } from './Form'
export { default as Input } from './Input'
diff --git a/src/custom.d.ts b/src/custom.d.ts
index ca410672..c661e49f 100644
--- a/src/custom.d.ts
+++ b/src/custom.d.ts
@@ -1,6 +1,3 @@
declare module '*.jpg'
declare module '*.png'
-declare module '*.svg' {
- const content: any
- export default content
-}
+declare module '*.svg'