Skip to content

Commit d883620

Browse files
mikeldkingmikeldking
authored
✨ Notification (#40)
* Notification * re-name utility to avoid rule of hooks * v0.3.0
1 parent 798a17c commit d883620

21 files changed

+789
-118
lines changed

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"version": "0.2.26",
2+
"version": "0.3.0",
33
"license": "MIT",
44
"main": "dist/index.js",
55
"typings": "dist/index.d.ts",

‎src/alert/Alert.tsx‎

Lines changed: 7 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,14 @@
11
import React, { ReactNode, SyntheticEvent } from 'react';
22
import { css } from '@emotion/core';
3-
import { transparentize } from 'polished';
43
import theme from '../theme';
54
import { classNames } from '../utils';
65
import { Text } from '../content';
7-
import {
8-
Icon,
9-
InfoOutline,
10-
AlertTriangleOutline,
11-
AlertCircleOutline,
12-
CheckmarkCircleOutline,
13-
CloseOutline,
14-
} from '../icon';
15-
6+
import { Icon, CloseOutline } from '../icon';
7+
import { useSeverityStyle } from './useSeverityStyle';
8+
import { getSeverityIcon } from './getSeverityIcon';
9+
import { SeverityLevel } from '../types';
1610
export interface AlertProps {
17-
variant: 'warning' | 'info' | 'danger' | 'success';
11+
variant: SeverityLevel;
1812
children?: ReactNode;
1913
/**
2014
* Title of the alert. Optional
@@ -49,30 +43,6 @@ export interface AlertProps {
4943
extra?: ReactNode;
5044
}
5145

52-
const warningCSS = css`
53-
border: 1px solid ${theme.colors.statusWarning};
54-
background-color: ${transparentize(0.85, theme.colors.statusWarning)};
55-
color: ${theme.colors.statusWarning};
56-
`;
57-
58-
const infoCSS = css`
59-
border: 1px solid ${theme.colors.statusInfo};
60-
background-color: ${transparentize(0.85, theme.colors.statusInfo)};
61-
color: ${theme.colors.statusInfo};
62-
`;
63-
64-
const dangerCSS = css`
65-
border: 1px solid ${theme.colors.statusDanger};
66-
background-color: ${transparentize(0.85, theme.colors.statusDanger)};
67-
color: ${theme.colors.statusDanger};
68-
`;
69-
70-
const successCSS = css`
71-
border: 1px solid ${theme.colors.statusSuccess};
72-
background-color: ${transparentize(0.85, theme.colors.statusSuccess)};
73-
color: ${theme.colors.statusSuccess};
74-
`;
75-
7646
export const Alert = ({
7747
variant,
7848
title,
@@ -84,37 +54,10 @@ export const Alert = ({
8454
banner = false,
8555
extra,
8656
}: AlertProps) => {
87-
let variantStyle;
88-
switch (variant) {
89-
case 'warning':
90-
variantStyle = warningCSS;
91-
break;
92-
case 'info':
93-
variantStyle = infoCSS;
94-
break;
95-
case 'danger':
96-
variantStyle = dangerCSS;
97-
break;
98-
case 'success':
99-
variantStyle = successCSS;
100-
break;
101-
}
57+
let variantStyle = useSeverityStyle(variant);
10258

10359
if (!icon && showIcon) {
104-
switch (variant) {
105-
case 'warning':
106-
icon = <Icon svg={<AlertTriangleOutline />} />;
107-
break;
108-
case 'info':
109-
icon = <Icon svg={<InfoOutline />} />;
110-
break;
111-
case 'danger':
112-
icon = <Icon svg={<AlertCircleOutline />} />;
113-
break;
114-
case 'success':
115-
icon = <Icon svg={<CheckmarkCircleOutline />} />;
116-
break;
117-
}
60+
icon = getSeverityIcon(variant);
11861
}
11962
return (
12063
<div

‎src/alert/getSeverityIcon.tsx‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import React from 'react';
2+
import {
3+
Icon,
4+
InfoOutline,
5+
InfoFilled,
6+
AlertTriangleOutline,
7+
AlertTriangleFilled,
8+
AlertCircleOutline,
9+
AlertCircleFilled,
10+
CheckmarkCircleOutline,
11+
CheckmarkCircleFilled,
12+
} from '../icon';
13+
import { SeverityLevel } from '../types';
14+
15+
type IconOptions = {
16+
/**
17+
* Whether or not the icon should be filled-in or outlined
18+
* @default true
19+
*/
20+
filled?: boolean;
21+
};
22+
export function getSeverityIcon(
23+
severity: SeverityLevel,
24+
{ filled }: IconOptions = { filled: true }
25+
) {
26+
let svg;
27+
switch (severity) {
28+
case 'warning':
29+
svg = filled ? <AlertTriangleFilled /> : <AlertTriangleOutline />;
30+
break;
31+
case 'info':
32+
svg = filled ? <InfoFilled /> : <InfoOutline />;
33+
break;
34+
case 'danger':
35+
svg = filled ? <AlertCircleFilled /> : <AlertCircleOutline />;
36+
break;
37+
case 'success':
38+
svg = filled ? <CheckmarkCircleFilled /> : <CheckmarkCircleOutline />;
39+
break;
40+
}
41+
return <Icon svg={svg} />;
42+
}

‎src/alert/styles.ts‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import { css } from '@emotion/core';
2+
import { transparentize } from 'polished';
3+
import theme from '../theme';
4+
5+
export const warningCSS = css`
6+
border: 1px solid ${theme.colors.statusWarning};
7+
background-color: ${transparentize(0.85, theme.colors.statusWarning)};
8+
color: ${theme.colors.statusWarning};
9+
`;
10+
11+
export const infoCSS = css`
12+
border: 1px solid ${theme.colors.statusInfo};
13+
background-color: ${transparentize(0.85, theme.colors.statusInfo)};
14+
color: ${theme.colors.statusInfo};
15+
`;
16+
17+
export const dangerCSS = css`
18+
border: 1px solid ${theme.colors.statusDanger};
19+
background-color: ${transparentize(0.85, theme.colors.statusDanger)};
20+
color: ${theme.colors.statusDanger};
21+
`;
22+
23+
export const successCSS = css`
24+
border: 1px solid ${theme.colors.statusSuccess};
25+
background-color: ${transparentize(0.85, theme.colors.statusSuccess)};
26+
color: ${theme.colors.statusSuccess};
27+
`;

‎src/alert/useSeverityStyle.ts‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import { SeverityLevel } from '../types';
2+
import { warningCSS, infoCSS, dangerCSS, successCSS } from './styles';
3+
4+
export function useSeverityStyle(severity: SeverityLevel) {
5+
let style;
6+
switch (severity) {
7+
case 'warning':
8+
style = warningCSS;
9+
break;
10+
case 'info':
11+
style = infoCSS;
12+
break;
13+
case 'danger':
14+
style = dangerCSS;
15+
break;
16+
case 'success':
17+
style = successCSS;
18+
break;
19+
}
20+
return style;
21+
}

‎src/button/Button.tsx‎

Lines changed: 1 addition & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,4 @@
11
import React, { ReactNode, SyntheticEvent } from 'react';
2-
import { css } from '@emotion/core';
3-
import theme from '../theme';
42
import Spinner from '../Spinner';
53
import { Text } from '../content';
64
import { FocusableRef } from '../types';
@@ -10,57 +8,7 @@ import { mergeProps } from '@react-aria/utils';
108
import { useButton } from '@react-aria/button';
119
import { useHover } from '@react-aria/interactions';
1210
import { BaseButtonProps } from './types';
13-
14-
const buttonCSS = css`
15-
border: 1px solid ${theme.colors.dark1};
16-
font-size: ${theme.typography.sizes.medium};
17-
font-weight: 600;
18-
19-
display: flex;
20-
justify-content: center;
21-
align-items: center;
22-
box-sizing: content-box;
23-
border-radius: 4px;
24-
&:not([disabled]) {
25-
color: ${theme.textColors.white90};
26-
transition: all 0.2s ease-in-out;
27-
cursor: pointer;
28-
}
29-
&[disabled] {
30-
color: ${theme.textColors.white70};
31-
cursor: not-allowed;
32-
}
33-
&[data-size='normal'][data-childless='false'] {
34-
padding: ${theme.spacing.padding8}px ${theme.spacing.padding16}px;
35-
}
36-
&[data-size='compact'][data-childless='false'] {
37-
padding: ${theme.spacing.padding4}px ${theme.spacing.padding8}px;
38-
}
39-
&[data-size='normal'][data-childless='true'] {
40-
padding: ${theme.spacing.padding8}px ${theme.spacing.padding8}px;
41-
}
42-
&[data-size='compact'][data-childless='true'] {
43-
padding: ${theme.spacing.padding4}px ${theme.spacing.padding4}px;
44-
}
45-
&[data-variant='primary'] {
46-
background-color: ${theme.colors.arizeBlue};
47-
border-color: ${theme.components.button.primaryBorderColor};
48-
&:hover:not([disabled]) {
49-
background-color: ${theme.components.button.primaryHoverBackgroundColor};
50-
}
51-
}
52-
&[data-variant='default'] {
53-
background-color: ${theme.colors.gray500};
54-
border-color: ${theme.components.button.defaultBorderColor};
55-
&:hover:not([disabled]) {
56-
background-color: ${theme.components.button.defaultHoverBackgroundColor};
57-
}
58-
}
59-
&[data-childless='false'] > i,
60-
& > .ac-spinner {
61-
margin-right: ${theme.spacing.margin4}px;
62-
}
63-
`;
11+
import { buttonCSS } from './styles';
6412

6513
export interface ButtonProps extends BaseButtonProps {
6614
children?: ReactNode | string;

‎src/button/styles.ts‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import { css } from '@emotion/core';
2+
import theme from '../theme';
3+
4+
export const buttonCSS = css`
5+
border: 1px solid ${theme.colors.dark1};
6+
font-size: ${theme.typography.sizes.medium};
7+
font-weight: 600;
8+
9+
display: flex;
10+
justify-content: center;
11+
align-items: center;
12+
box-sizing: content-box;
13+
border-radius: 4px;
14+
color: ${theme.textColors.white90};
15+
cursor: pointer;
16+
&:not([disabled]) {
17+
transition: all 0.2s ease-in-out;
18+
}
19+
&[disabled] {
20+
color: ${theme.textColors.white70};
21+
cursor: not-allowed;
22+
}
23+
&[data-size='normal'][data-childless='false'] {
24+
padding: ${theme.spacing.padding8}px ${theme.spacing.padding16}px;
25+
}
26+
&[data-size='compact'][data-childless='false'] {
27+
padding: ${theme.spacing.padding4}px ${theme.spacing.padding8}px;
28+
}
29+
&[data-size='normal'][data-childless='true'] {
30+
padding: ${theme.spacing.padding8}px ${theme.spacing.padding8}px;
31+
}
32+
&[data-size='compact'][data-childless='true'] {
33+
padding: ${theme.spacing.padding4}px ${theme.spacing.padding4}px;
34+
}
35+
&[data-variant='primary'] {
36+
background-color: ${theme.colors.arizeBlue};
37+
border-color: ${theme.components.button.primaryBorderColor};
38+
&:hover:not([disabled]) {
39+
background-color: ${theme.components.button.primaryHoverBackgroundColor};
40+
}
41+
}
42+
&[data-variant='default'] {
43+
background-color: ${theme.colors.gray500};
44+
border-color: ${theme.components.button.defaultBorderColor};
45+
&:hover:not([disabled]) {
46+
background-color: ${theme.components.button.defaultHoverBackgroundColor};
47+
}
48+
}
49+
&[data-childless='false'] > i,
50+
& > .ac-spinner {
51+
margin-right: ${theme.spacing.margin4}px;
52+
}
53+
`;

‎src/content/Text.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -94,6 +94,7 @@ function Text(props: TextProps, ref: DOMRef<HTMLHeadingElement>) {
9494

9595
return (
9696
<TextTag
97+
className="ac-text"
9798
{...otherProps}
9899
css={css`
99100
${textCSS(color)};

0 commit comments

Comments
 (0)