Skip to content

Commit

Permalink
Extracts SVGIcons, adds story, adds link and custom action element to…
Browse files Browse the repository at this point in the history
… Alert

Signed-off-by: Marcos Iglesias <miglesiasvalle@lyft.com>
  • Loading branch information
Golodhros committed Aug 28, 2020
1 parent 65744b8 commit 98cc40e
Show file tree
Hide file tree
Showing 7 changed files with 101 additions and 20 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ stories.add('Alert', () => (
}
/>
</StorySection>
<StorySection title="Alert with Action">
<StorySection title="Alert with Action as button">
<Alert
message="Alert text that can be short"
actionText="Action Text"
Expand All @@ -34,6 +34,23 @@ stories.add('Alert', () => (
}}
/>
</StorySection>
<StorySection title="Alert with Action as link">
<Alert
message="Alert text that can be short"
actionText="Action Text"
actionHref="http://www.lyft.com"
/>
</StorySection>
<StorySection title="Alert with Action as custom link">
<Alert
message="Alert text that can be short"
actionLink={
<a className="test-action-link" href="http://testSite.com">
Custom Link
</a>
}
/>
</StorySection>
<StorySection title="Alert with long text">
<Alert message="Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam perspiciatis non ipsa officia expedita magnam mollitia, excepturi iste eveniet qui nisi eum illum, quas voluptas, reprehenderit quam molestias cum quisquam!" />
</StorySection>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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: (
<a className="test-action-link" href="http://testSite.com">
Custom Link
</a>
),
});
const expected = 1;
const actual = wrapper.find('.test-action-link').length;

expect(actual).toEqual(expected);
});
});
});

describe('lifetime', () => {
Expand Down
39 changes: 30 additions & 9 deletions amundsen_application/static/js/components/common/Alert/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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<HTMLButtonElement>) => void;
Expand All @@ -19,21 +22,39 @@ const Alert: React.FC<AlertProps> = ({
onAction,
actionText,
actionHref,
actionLink,
}: AlertProps) => {
return (
<div className="alert">
<AlertIcon />
<p className="alert-message">{message}</p>
{actionText && onAction && (
let action = null;

if (actionText && onAction) {
action = (
<span className="alert-action">
<button type="button" className="btn btn-link" onClick={onAction}>
{actionText}
</button>
)}
{actionText && actionHref && (
</span>
);
}

if (actionText && actionHref) {
action = (
<span className="alert-action">
<a className="action-link" href={actionHref}>
{actionText}
</a>
)}
</span>
);
}

if (actionLink) {
action = <span className="alert-action">{actionLink}</span>;
}

return (
<div className="alert">
<AlertIcon stroke={STROKE_COLOR} size={IconSizes.SMALL} />
<p className="alert-message">{message}</p>
{action}
</div>
);
};
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand All @@ -29,7 +28,7 @@ $alert-message-line-height: 24px;
margin-right: $spacer-1;
}

.btn-link {
.alert-action {
margin: auto 0 auto auto;
}
}
Original file line number Diff line number Diff line change
@@ -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<IconProps> = ({
stroke = DEFAULT_STROKE_COLOR,
size = IconSizes.REGULAR,
}: IconProps) => {
return (
<svg
width={SIZE}
height={SIZE}
width={size}
height={size}
viewBox="0 0 24 24"
fill="none"
stroke={STROKE_COLOR}
stroke={stroke}
strokeWidth={2}
strokeLinecap="round"
strokeLinejoin="round"
Expand All @@ -20,5 +29,3 @@ const AlertIcon: React.FC = () => {
</svg>
);
};

export default AlertIcon;
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
export * from './AlertIcon';

export enum IconSizes {
REGULAR = 24,
SMALL = 16,
}
Original file line number Diff line number Diff line change
@@ -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', () => (
<>
<StorySection title="Alert">
<AlertIcon />
</StorySection>
</>
));

0 comments on commit 98cc40e

Please sign in to comment.