diff --git a/amundsen_application/static/js/components/common/Alert/alert.story.tsx b/amundsen_application/static/js/components/common/Alert/alert.story.tsx index 450017f3d..f47d64cb2 100644 --- a/amundsen_application/static/js/components/common/Alert/alert.story.tsx +++ b/amundsen_application/static/js/components/common/Alert/alert.story.tsx @@ -25,7 +25,7 @@ stories.add('Alert', () => ( } /> - + ( }} /> + + + + + + Custom Link + + } + /> + diff --git a/amundsen_application/static/js/components/common/Alert/index.spec.tsx b/amundsen_application/static/js/components/common/Alert/index.spec.tsx index 49db16160..1c3e84ed6 100644 --- a/amundsen_application/static/js/components/common/Alert/index.spec.tsx +++ b/amundsen_application/static/js/components/common/Alert/index.spec.tsx @@ -76,6 +76,22 @@ describe('Alert', () => { expect(actual).toEqual(expected); }); }); + + describe('when passing a custom action link', () => { + it('should render the custom action link', () => { + const { wrapper } = setup({ + actionLink: ( + + Custom Link + + ), + }); + const expected = 1; + const actual = wrapper.find('.test-action-link').length; + + expect(actual).toEqual(expected); + }); + }); }); describe('lifetime', () => { diff --git a/amundsen_application/static/js/components/common/Alert/index.tsx b/amundsen_application/static/js/components/common/Alert/index.tsx index 12a708cbf..a8b92e199 100644 --- a/amundsen_application/static/js/components/common/Alert/index.tsx +++ b/amundsen_application/static/js/components/common/Alert/index.tsx @@ -3,12 +3,15 @@ import * as React from 'react'; -import AlertIcon from './AlertIcon'; +import { AlertIcon, IconSizes } from '../SVGIcons'; import './styles.scss'; +const STROKE_COLOR = '#b8072c'; // $red70 + export interface AlertProps { message: string | React.ReactNode; + actionLink?: React.ReactNode; actionText?: string; actionHref?: string; onAction?: (event: React.MouseEvent) => void; @@ -19,21 +22,39 @@ const Alert: React.FC = ({ onAction, actionText, actionHref, + actionLink, }: AlertProps) => { - return ( -
- -

{message}

- {actionText && onAction && ( + let action = null; + + if (actionText && onAction) { + action = ( + - )} - {actionText && actionHref && ( + + ); + } + + if (actionText && actionHref) { + action = ( + {actionText} - )} + + ); + } + + if (actionLink) { + action = {actionLink}; + } + + return ( +
+ +

{message}

+ {action}
); }; diff --git a/amundsen_application/static/js/components/common/Alert/styles.scss b/amundsen_application/static/js/components/common/Alert/styles.scss index 9853c4cb5..9e9b4b739 100644 --- a/amundsen_application/static/js/components/common/Alert/styles.scss +++ b/amundsen_application/static/js/components/common/Alert/styles.scss @@ -18,7 +18,6 @@ $alert-message-line-height: 24px; .alert-message { @extend %text-body-w2; - // line-height: $alert-message-line-height; margin: 0; display: inline; } @@ -29,7 +28,7 @@ $alert-message-line-height: 24px; margin-right: $spacer-1; } - .btn-link { + .alert-action { margin: auto 0 auto auto; } } diff --git a/amundsen_application/static/js/components/common/Alert/AlertIcon.tsx b/amundsen_application/static/js/components/common/SVGIcons/AlertIcon.tsx similarity index 52% rename from amundsen_application/static/js/components/common/Alert/AlertIcon.tsx rename to amundsen_application/static/js/components/common/SVGIcons/AlertIcon.tsx index e30d07b90..e5253a5e8 100644 --- a/amundsen_application/static/js/components/common/Alert/AlertIcon.tsx +++ b/amundsen_application/static/js/components/common/SVGIcons/AlertIcon.tsx @@ -1,16 +1,25 @@ import * as React from 'react'; -const STROKE_COLOR = '#b8072c'; // $red70 -const SIZE = 16; +import { IconSizes } from '.'; -const AlertIcon: React.FC = () => { +const DEFAULT_STROKE_COLOR = 'currentColor'; + +export interface IconProps { + stroke?: string; + size?: number; +} + +export const AlertIcon: React.FC = ({ + stroke = DEFAULT_STROKE_COLOR, + size = IconSizes.REGULAR, +}: IconProps) => { return ( { ); }; - -export default AlertIcon; diff --git a/amundsen_application/static/js/components/common/SVGIcons/index.tsx b/amundsen_application/static/js/components/common/SVGIcons/index.tsx new file mode 100644 index 000000000..bdee99a12 --- /dev/null +++ b/amundsen_application/static/js/components/common/SVGIcons/index.tsx @@ -0,0 +1,6 @@ +export * from './AlertIcon'; + +export enum IconSizes { + REGULAR = 24, + SMALL = 16, +} diff --git a/amundsen_application/static/js/components/common/SVGIcons/svgIcons.story.tsx b/amundsen_application/static/js/components/common/SVGIcons/svgIcons.story.tsx new file mode 100644 index 000000000..091c62381 --- /dev/null +++ b/amundsen_application/static/js/components/common/SVGIcons/svgIcons.story.tsx @@ -0,0 +1,15 @@ +import React from 'react'; +import { storiesOf } from '@storybook/react'; + +import StorySection from '../StorySection'; +import { AlertIcon } from '.'; + +const stories = storiesOf('Attributes/Icons', module); + +stories.add('SVG Icons', () => ( + <> + + + + +));