feat #322 - Updates related to web-apps

src/components/Filters/styles.ts

@@ -21,8 +21,8 @@ const filterPalette = {
 	},
 	[light]: {
 		container: {
-			background: grays.base,
-			borderColor: grays.base
+			background: grays['lighten-40'],
+			borderColor: grays['lighten-40']
 		}
 	}
 }

src/components/Icon/IconsMap.ts

@@ -1,5 +1,5 @@
 import { ReactComponent as ALERT_MANAGER } from '../assets/icons/alert-manager.svg'
-import { ReactComponent as APP_STORE } from '../assets/icons/app-store.svg'
+import { ReactComponent as APPS } from '../assets/icons/apps.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'
@@ -17,7 +17,7 @@ TODO: Find a better rollup plugin that handles importing images as ReactComponen
 */
 const Icons = {
 	alertManager: ALERT_MANAGER,
-	appStore: APP_STORE,
+	apps: APPS,
 	aws: AWS,
 	azure: AZURE,
 	dassana: DASSANA,

src/components/Icon/index.tsx

@@ -1,4 +1,5 @@
 import cn from 'classnames'
+import isUndefined from 'lodash/isUndefined'
 import { styleguide } from 'components/assets/styles'
 import Icons, { IconName } from './IconsMap'
 import React, { FC } from 'react'
@@ -14,9 +15,13 @@ export interface SharedIconProps {
 	 */
 	classes?: string[]
 	/**
-	 * The height of the icon, in pixels. Width will be calculated by default.
+	 * The height of the icon, in pixels
 	 */
 	height?: number
+	/**
+	 * The width of the icon, in pixels
+	 */
+	width?: number
 }
 
 interface IconPath extends SharedIconProps {
@@ -39,31 +44,28 @@ interface IconKey extends SharedIconProps {
 
 export type IconProps = IconKey | IconPath
 
-export const Icon: FC<IconProps> = ({ height = 32, ...props }: IconProps) => {
+export const Icon: FC<IconProps> = ({ height, width, ...props }: IconProps) => {
 	const { classes = [] } = props
 
+	const commonProps = {
+		className: cn(classes),
+		height: isUndefined(height) && isUndefined(width) ? 32 : height,
+		width
+	}
+
 	if (props.iconKey) {
 		const { iconKey } = props
 
 		const Svg = Icons[iconKey] ? Icons[iconKey] : Icons.dassana
 
 		const { color = blacks['lighten-40'] } = props as IconKey
 
-		return (
-			<Svg
-				className={cn(classes)}
-				fill={color}
-				height={height}
-				width={height}
-			/>
-		)
+		return <Svg {...commonProps} fill={color} />
 	}
 
 	const { altText = '', icon } = props
 
-	return (
-		<img alt={altText} className={cn(classes)} height={height} src={icon} />
-	)
+	return <img {...commonProps} alt={altText} src={icon} />
 }
 
 export type { IconName }

src/components/Input/Input.stories.tsx

@@ -1,5 +1,8 @@
 import { action } from '@storybook/addon-actions'
+import { faCopy } from '@fortawesome/pro-regular-svg-icons'
+import { IconButton } from 'components/IconButton'
 import React from 'react'
+import { Tooltip } from 'components/Tooltip'
 import { Input, InputProps } from './index'
 import { Meta, Story } from '@storybook/react/types-6-0'
 
@@ -16,6 +19,9 @@ export default {
 const Template: Story<InputProps> = args => <Input {...args} />
 
 export const Default = Template.bind({})
+Default.args = {
+	value: 'test'
+}
 
 export const Placeholder = Template.bind({})
 Placeholder.args = { placeholder: 'Search...' }
@@ -38,3 +44,16 @@ Addons.args = {
 	addonBefore: '@',
 	placeholder: 'yourdomain'
 }
+
+export const Suffix = Template.bind({})
+Suffix.args = {
+	suffix: (
+		<Tooltip placement='bottom' title='Copy'>
+			<IconButton
+				icon={faCopy}
+				onClick={() => console.log('copied')}
+				size={14}
+			/>
+		</Tooltip>
+	)
+}

src/components/Input/index.tsx

@@ -12,7 +12,13 @@ import {
 	fieldErrorStyles
 } from '../assets/styles/styleguide'
 import { generateAddonStyles, generateInputStyles } from './utils'
-import React, { FC, FocusEvent, KeyboardEvent, RefObject } from 'react'
+import React, {
+	FC,
+	FocusEvent,
+	KeyboardEvent,
+	ReactNode,
+	RefObject
+} from 'react'
 
 const { dark, light } = ThemeType
 
@@ -41,6 +47,7 @@ export interface InputProps extends BaseFormElementProps<HTMLInputElement> {
 	focused?: boolean
 	onFocus?: (e: FocusEvent<HTMLInputElement>) => void
 	onKeyDown?: (e: KeyboardEvent) => void
+	suffix?: ReactNode
 	/**
 	 * Type of input (ex: text, password)
 	 * @default text
@@ -65,6 +72,7 @@ export const Input: FC<InputProps> = (props: InputProps) => {
 		error = false,
 		loading = false,
 		placeholder = '',
+		suffix,
 		type = 'text',
 		value
 	} = props
@@ -106,6 +114,7 @@ export const Input: FC<InputProps> = (props: InputProps) => {
 			onKeyDown={onKeyDown}
 			placeholder={placeholder}
 			ref={inputRef}
+			suffix={suffix}
 			type={type}
 			{...controlledCmpProps}
 			{...getDataTestAttributeProp('input', dataTag)}

src/components/Input/utils.ts

@@ -1,24 +1,101 @@
+import omit from 'lodash/omit'
 import {
 	fieldErrorStyles,
 	styleguide
 } from 'components/assets/styles/styleguide'
-import { themedStyles, ThemeType } from 'components/assets/styles/themes'
+import {
+	inputPalette,
+	themedStyles,
+	ThemeType
+} from 'components/assets/styles/themes'
 
 const { borderRadius, fontWeight } = styleguide
 
-export const generateAddonStyles = (themeType: ThemeType) => {
+const generateCommonBaseStyles = (themeType: ThemeType) => {
+	const {
+		base: { color }
+	} = themedStyles[themeType]
+
+	const {
+		base: { background, borderColor }
+	} = inputPalette[themeType]
+
+	return { background, borderColor, borderRadius, color }
+}
+
+const generateCommonDisabledStyles = (themeType: ThemeType) => {
+	const {
+		base: { borderColor },
+		disabled: { background, color }
+	} = inputPalette[themeType]
+
+	return {
+		'&:hover': {
+			borderColor
+		},
+		background,
+		color
+	}
+}
+
+const generateCommonFocusStyles = (themeType: ThemeType) => {
+	const {
+		focus: { borderColor }
+	} = themedStyles[themeType]
+
+	return {
+		borderColor,
+		boxShadow: 'none'
+	}
+}
+
+const generateCommonHoverStyles = (themeType: ThemeType) => {
 	const {
-		base: { backgroundColor, borderColor, color },
-		error
+		hover: { borderColor }
 	} = themedStyles[themeType]
 
 	return {
+		'&:hover': {
+			borderColor,
+			boxShadow: 'none'
+		}
+	}
+}
+
+const generateCommonErrorStyles = (themeType: ThemeType) => {
+	const {
+		error: { borderColor }
+	} = themedStyles[themeType]
+
+	return {
+		...fieldErrorStyles.error,
+		borderColor
+	}
+}
+export const generateAddonStyles = (themeType: ThemeType) => {
+	const { error } = themedStyles[themeType]
+
+	return {
+		'&.ant-input-affix-wrapper': {
+			'&$error': {
+				'&:hover': { borderColor: error.borderColor },
+				...generateCommonErrorStyles(themeType)
+			},
+			'&.ant-input-affix-wrapper-disabled': generateCommonDisabledStyles(
+				themeType
+			),
+			...generateCommonBaseStyles(themeType),
+			...generateCommonHoverStyles(themeType)
+		},
+		'&.ant-input-affix-wrapper-focused, &.ant-input-affix-wrapper:focus': generateCommonFocusStyles(
+			themeType
+		),
 		'&.ant-input-group-wrapper': {
 			'& .ant-input-wrapper': {
 				'& .ant-input-group-addon': {
-					backgroundColor,
-					borderColor,
-					color,
+					...omit(generateCommonBaseStyles(themeType), [
+						'borderRadius'
+					]),
 					fontWeight: fontWeight.light
 				},
 				'& .ant-input-group-addon:first-child': {
@@ -31,48 +108,33 @@ export const generateAddonStyles = (themeType: ThemeType) => {
 				}
 			},
 			'&$error': {
-				'& .ant-input-wrapper .ant-input': {
-					...fieldErrorStyles.error,
-					borderColor: error.borderColor
-				}
+				'& .ant-input-wrapper .ant-input': generateCommonErrorStyles(
+					themeType
+				)
 			}
 		}
 	}
 }
 
 export const generateInputStyles = (themeType: ThemeType) => {
-	const { base, disabled, error, focus, hover, placeholder } = themedStyles[
-		themeType
-	]
+	const { placeholder } = themedStyles[themeType]
 
 	return {
 		'&.ant-input': {
 			'&$error': {
-				'&$container': {
-					...fieldErrorStyles.error,
-					borderColor: error.borderColor
-				}
+				'&$container': generateCommonErrorStyles(themeType)
 			},
 			'&::placeholder': {
 				color: placeholder.color
 			},
-			'&:hover': {
-				borderColor: hover.borderColor
-			},
-			backgroundColor: base.backgroundColor,
-			borderColor: base.borderColor,
-			borderRadius,
-			color: base.color
+			...generateCommonBaseStyles(themeType),
+			...generateCommonHoverStyles(themeType)
 		},
-		'&.ant-input-disabled, &.ant-input[disabled]': {
-			'&:hover': {
-				borderColor: base.borderColor
-			},
-			backgroundColor: disabled.backgroundColor
-		},
-		'&.ant-input-focused, &.ant-input:focus': {
-			borderColor: focus.borderColor,
-			boxShadow: focus.boxShadow
-		}
+		'&.ant-input-disabled, &.ant-input[disabled]': generateCommonDisabledStyles(
+			themeType
+		),
+		'&.ant-input-focused, &.ant-input:focus': generateCommonFocusStyles(
+			themeType
+		)
 	}
 }

src/components/Link/utils.ts

@@ -9,8 +9,7 @@ export const generateLinkStyles = (themeType: ThemeType) => {
 	return {
 		'&.ant-typography': {
 			'&:hover, &:focus': {
-				color: hover.color,
-				fontWeight: fontWeight.regular
+				color: hover.color
 			},
 			color: base.color,
 			fontWeight: fontWeight.light,

src/components/Markdown/index.tsx

@@ -1,21 +1,29 @@
+import cn from 'classnames'
 import { createUseStyles } from 'react-jss'
+import { generateLinkStyles } from '../Link/utils'
 import gfm from 'remark-gfm'
 import ReactMarkdown from 'react-markdown'
 import React, { FC } from 'react'
-import { themes, ThemeType } from '../assets/styles'
+import { styleguide, themes, ThemeType } from '../assets/styles'
+
+const { font, fontWeight } = styleguide
 
 const { dark, light } = ThemeType
 
 const useStyles = createUseStyles({
 	'@global': {
 		'.markdown-body': {
+			'& a': generateLinkStyles(light)['&.ant-typography'],
 			'& code': {
 				backgroundColor: themes[light].state.disabled
 			},
-			color: themes[light].text.primary
+			...font.body,
+			color: themes[light].text.primary,
+			fontWeight: fontWeight.light
 		},
 		[`.${dark}`]: {
 			'& .markdown-body': {
+				'& a': generateLinkStyles(dark)['&.ant-typography'],
 				'& code': {
 					backgroundColor: themes[dark].state.disabled
 				},
@@ -27,13 +35,17 @@ const useStyles = createUseStyles({
 
 export interface MarkdownProps {
 	children: string
+	classes?: string[]
 }
 
-export const Markdown: FC<MarkdownProps> = ({ children }: MarkdownProps) => {
+export const Markdown: FC<MarkdownProps> = ({
+	children,
+	classes = []
+}: MarkdownProps) => {
 	useStyles()
 
 	return (
-		<ReactMarkdown className='markdown-body' plugins={[gfm]}>
+		<ReactMarkdown className={cn('markdown-body', classes)} plugins={[gfm]}>
 			{children}
 		</ReactMarkdown>
 	)