✨ Notification (#40)

* Notification * re-name utility to avoid rule of hooks * v0.3.0
Arize-ai · Jan 13, 2022 · d883620 · d883620
1 parent 798a17c
commit d883620
Show file tree

Hide file tree

Showing 21 changed files with 789 additions and 118 deletions.
diff --git a/package.json b/package.json
@@ -1,5 +1,5 @@
 {
-  "version": "0.2.26",
+  "version": "0.3.0",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

diff --git a/src/alert/Alert.tsx b/src/alert/Alert.tsx
@@ -1,20 +1,14 @@
 import React, { ReactNode, SyntheticEvent } from 'react';
 import { css } from '@emotion/core';
-import { transparentize } from 'polished';
 import theme from '../theme';
 import { classNames } from '../utils';
 import { Text } from '../content';
-import {
-  Icon,
-  InfoOutline,
-  AlertTriangleOutline,
-  AlertCircleOutline,
-  CheckmarkCircleOutline,
-  CloseOutline,
-} from '../icon';
-
+import { Icon, CloseOutline } from '../icon';
+import { useSeverityStyle } from './useSeverityStyle';
+import { getSeverityIcon } from './getSeverityIcon';
+import { SeverityLevel } from '../types';
 export interface AlertProps {
-  variant: 'warning' | 'info' | 'danger' | 'success';
+  variant: SeverityLevel;
   children?: ReactNode;
   /**
    * Title of the alert. Optional
@@ -49,30 +43,6 @@ export interface AlertProps {
   extra?: ReactNode;
 }
 
-const warningCSS = css`
-  border: 1px solid ${theme.colors.statusWarning};
-  background-color: ${transparentize(0.85, theme.colors.statusWarning)};
-  color: ${theme.colors.statusWarning};
-`;
-
-const infoCSS = css`
-  border: 1px solid ${theme.colors.statusInfo};
-  background-color: ${transparentize(0.85, theme.colors.statusInfo)};
-  color: ${theme.colors.statusInfo};
-`;
-
-const dangerCSS = css`
-  border: 1px solid ${theme.colors.statusDanger};
-  background-color: ${transparentize(0.85, theme.colors.statusDanger)};
-  color: ${theme.colors.statusDanger};
-`;
-
-const successCSS = css`
-  border: 1px solid ${theme.colors.statusSuccess};
-  background-color: ${transparentize(0.85, theme.colors.statusSuccess)};
-  color: ${theme.colors.statusSuccess};
-`;
-
 export const Alert = ({
   variant,
   title,
@@ -84,37 +54,10 @@ export const Alert = ({
   banner = false,
   extra,
 }: AlertProps) => {
-  let variantStyle;
-  switch (variant) {
-    case 'warning':
-      variantStyle = warningCSS;
-      break;
-    case 'info':
-      variantStyle = infoCSS;
-      break;
-    case 'danger':
-      variantStyle = dangerCSS;
-      break;
-    case 'success':
-      variantStyle = successCSS;
-      break;
-  }
+  let variantStyle = useSeverityStyle(variant);
 
   if (!icon && showIcon) {
-    switch (variant) {
-      case 'warning':
-        icon = <Icon svg={<AlertTriangleOutline />} />;
-        break;
-      case 'info':
-        icon = <Icon svg={<InfoOutline />} />;
-        break;
-      case 'danger':
-        icon = <Icon svg={<AlertCircleOutline />} />;
-        break;
-      case 'success':
-        icon = <Icon svg={<CheckmarkCircleOutline />} />;
-        break;
-    }
+    icon = getSeverityIcon(variant);
   }
   return (
     <div

diff --git a/src/alert/getSeverityIcon.tsx b/src/alert/getSeverityIcon.tsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import {
+  Icon,
+  InfoOutline,
+  InfoFilled,
+  AlertTriangleOutline,
+  AlertTriangleFilled,
+  AlertCircleOutline,
+  AlertCircleFilled,
+  CheckmarkCircleOutline,
+  CheckmarkCircleFilled,
+} from '../icon';
+import { SeverityLevel } from '../types';
+
+type IconOptions = {
+  /**
+   * Whether or not the icon should be filled-in or outlined
+   * @default true
+   */
+  filled?: boolean;
+};
+export function getSeverityIcon(
+  severity: SeverityLevel,
+  { filled }: IconOptions = { filled: true }
+) {
+  let svg;
+  switch (severity) {
+    case 'warning':
+      svg = filled ? <AlertTriangleFilled /> : <AlertTriangleOutline />;
+      break;
+    case 'info':
+      svg = filled ? <InfoFilled /> : <InfoOutline />;
+      break;
+    case 'danger':
+      svg = filled ? <AlertCircleFilled /> : <AlertCircleOutline />;
+      break;
+    case 'success':
+      svg = filled ? <CheckmarkCircleFilled /> : <CheckmarkCircleOutline />;
+      break;
+  }
+  return <Icon svg={svg} />;
+}
diff --git a/src/alert/styles.ts b/src/alert/styles.ts
@@ -0,0 +1,27 @@
+import { css } from '@emotion/core';
+import { transparentize } from 'polished';
+import theme from '../theme';
+
+export const warningCSS = css`
+  border: 1px solid ${theme.colors.statusWarning};
+  background-color: ${transparentize(0.85, theme.colors.statusWarning)};
+  color: ${theme.colors.statusWarning};
+`;
+
+export const infoCSS = css`
+  border: 1px solid ${theme.colors.statusInfo};
+  background-color: ${transparentize(0.85, theme.colors.statusInfo)};
+  color: ${theme.colors.statusInfo};
+`;
+
+export const dangerCSS = css`
+  border: 1px solid ${theme.colors.statusDanger};
+  background-color: ${transparentize(0.85, theme.colors.statusDanger)};
+  color: ${theme.colors.statusDanger};
+`;
+
+export const successCSS = css`
+  border: 1px solid ${theme.colors.statusSuccess};
+  background-color: ${transparentize(0.85, theme.colors.statusSuccess)};
+  color: ${theme.colors.statusSuccess};
+`;
diff --git a/src/alert/useSeverityStyle.ts b/src/alert/useSeverityStyle.ts
@@ -0,0 +1,21 @@
+import { SeverityLevel } from '../types';
+import { warningCSS, infoCSS, dangerCSS, successCSS } from './styles';
+
+export function useSeverityStyle(severity: SeverityLevel) {
+  let style;
+  switch (severity) {
+    case 'warning':
+      style = warningCSS;
+      break;
+    case 'info':
+      style = infoCSS;
+      break;
+    case 'danger':
+      style = dangerCSS;
+      break;
+    case 'success':
+      style = successCSS;
+      break;
+  }
+  return style;
+}
diff --git a/src/button/Button.tsx b/src/button/Button.tsx
@@ -1,6 +1,4 @@
 import React, { ReactNode, SyntheticEvent } from 'react';
-import { css } from '@emotion/core';
-import theme from '../theme';
 import Spinner from '../Spinner';
 import { Text } from '../content';
 import { FocusableRef } from '../types';
@@ -10,57 +8,7 @@ import { mergeProps } from '@react-aria/utils';
 import { useButton } from '@react-aria/button';
 import { useHover } from '@react-aria/interactions';
 import { BaseButtonProps } from './types';
-
-const buttonCSS = css`
-  border: 1px solid ${theme.colors.dark1};
-  font-size: ${theme.typography.sizes.medium};
-  font-weight: 600;
-
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  box-sizing: content-box;
-  border-radius: 4px;
-  &:not([disabled]) {
-    color: ${theme.textColors.white90};
-    transition: all 0.2s ease-in-out;
-    cursor: pointer;
-  }
-  &[disabled] {
-    color: ${theme.textColors.white70};
-    cursor: not-allowed;
-  }
-  &[data-size='normal'][data-childless='false'] {
-    padding: ${theme.spacing.padding8}px ${theme.spacing.padding16}px;
-  }
-  &[data-size='compact'][data-childless='false'] {
-    padding: ${theme.spacing.padding4}px ${theme.spacing.padding8}px;
-  }
-  &[data-size='normal'][data-childless='true'] {
-    padding: ${theme.spacing.padding8}px ${theme.spacing.padding8}px;
-  }
-  &[data-size='compact'][data-childless='true'] {
-    padding: ${theme.spacing.padding4}px ${theme.spacing.padding4}px;
-  }
-  &[data-variant='primary'] {
-    background-color: ${theme.colors.arizeBlue};
-    border-color: ${theme.components.button.primaryBorderColor};
-    &:hover:not([disabled]) {
-      background-color: ${theme.components.button.primaryHoverBackgroundColor};
-    }
-  }
-  &[data-variant='default'] {
-    background-color: ${theme.colors.gray500};
-    border-color: ${theme.components.button.defaultBorderColor};
-    &:hover:not([disabled]) {
-      background-color: ${theme.components.button.defaultHoverBackgroundColor};
-    }
-  }
-  &[data-childless='false'] > i,
-  & > .ac-spinner {
-    margin-right: ${theme.spacing.margin4}px;
-  }
-`;
+import { buttonCSS } from './styles';
 
 export interface ButtonProps extends BaseButtonProps {
   children?: ReactNode | string;

diff --git a/src/button/styles.ts b/src/button/styles.ts
@@ -0,0 +1,53 @@
+import { css } from '@emotion/core';
+import theme from '../theme';
+
+export const buttonCSS = css`
+  border: 1px solid ${theme.colors.dark1};
+  font-size: ${theme.typography.sizes.medium};
+  font-weight: 600;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  box-sizing: content-box;
+  border-radius: 4px;
+  color: ${theme.textColors.white90};
+  cursor: pointer;
+  &:not([disabled]) {
+    transition: all 0.2s ease-in-out;
+  }
+  &[disabled] {
+    color: ${theme.textColors.white70};
+    cursor: not-allowed;
+  }
+  &[data-size='normal'][data-childless='false'] {
+    padding: ${theme.spacing.padding8}px ${theme.spacing.padding16}px;
+  }
+  &[data-size='compact'][data-childless='false'] {
+    padding: ${theme.spacing.padding4}px ${theme.spacing.padding8}px;
+  }
+  &[data-size='normal'][data-childless='true'] {
+    padding: ${theme.spacing.padding8}px ${theme.spacing.padding8}px;
+  }
+  &[data-size='compact'][data-childless='true'] {
+    padding: ${theme.spacing.padding4}px ${theme.spacing.padding4}px;
+  }
+  &[data-variant='primary'] {
+    background-color: ${theme.colors.arizeBlue};
+    border-color: ${theme.components.button.primaryBorderColor};
+    &:hover:not([disabled]) {
+      background-color: ${theme.components.button.primaryHoverBackgroundColor};
+    }
+  }
+  &[data-variant='default'] {
+    background-color: ${theme.colors.gray500};
+    border-color: ${theme.components.button.defaultBorderColor};
+    &:hover:not([disabled]) {
+      background-color: ${theme.components.button.defaultHoverBackgroundColor};
+    }
+  }
+  &[data-childless='false'] > i,
+  & > .ac-spinner {
+    margin-right: ${theme.spacing.margin4}px;
+  }
+`;
diff --git a/src/content/Text.tsx b/src/content/Text.tsx
@@ -94,6 +94,7 @@ function Text(props: TextProps, ref: DOMRef<HTMLHeadingElement>) {
 
   return (
     <TextTag
+      className="ac-text"
       {...otherProps}
       css={css`
         ${textCSS(color)};