Refactored and renamed callout => notificatin

packages/website/md/new-docs/usage.mdx

@@ -79,11 +79,11 @@ istanbul report html
 open coverage/index.html
 ```
 
-### Callouts
+### Notifications
 
-<Callout text="This is' a pretty standard information callout" />
-<Callout text="This is an indication that something isn’t quite right" type="alert" />
-<Callout text="This is a success message" type="success" />
+<Notification text="This is' a pretty standard notification" />
+<Notification text="This is an indication that something isn’t quite right" type="alert" />
+<Notification text="This is a success message" type="success" />
 
 ### Lists
 

packages/website/ts/components/docs/notification.tsx

@@ -1,40 +1,30 @@
-import { Link } from '@0x/react-shared';
-import * as _ from 'lodash';
-import * as React from 'react';
-import styled, { withTheme } from 'styled-components';
+import React from 'react';
+import styled from 'styled-components';
 
-import { Button } from 'ts/components/button';
-import { SearchInput } from 'ts/components/docs/search_input';
-import { Icon } from 'ts/components/icon';
-import { Column, FlexWrap, WrapGrid } from 'ts/components/newLayout';
-import { ThemeValuesInterface } from 'ts/components/siteWrap';
-import { Heading, Paragraph } from 'ts/components/text';
 import { colors } from 'ts/style/colors';
-import { WebsitePaths } from 'ts/types';
-import { constants } from 'ts/utils/constants';
 
-interface WrapperProps {
+interface INotificationWrapperProps {
     type?: 'standard' | 'alert' | 'success';
 }
 
-export interface CalloutConfig extends WrapperProps {
+interface INotificationProps extends INotificationWrapperProps {
     text: string;
 }
 
-const ThemeSettings = {
+const themeSettings = {
     success: {
         bgColor: 'rgba(0, 174, 153, 0.1)',
         icon: (
             <svg width="28" height="28" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <path
                     d="M14 27c7.18 0 13-5.82 13-13S21.18 1 14 1 1 6.82 1 14s5.82 13 13 13z"
-                    stroke="#00AE99"
+                    stroke={colors.brandLight}
                     strokeWidth="1.054"
                     strokeMiterlimit="10"
                 />
                 <path
                     d="M14.002 26.977c7.167 0 12.977-5.81 12.977-12.976 0-7.166-5.81-12.976-12.976-12.976-7.167 0-12.977 5.81-12.977 12.976 0 7.167 5.81 12.976 12.976 12.976z"
-                    stroke="#003831"
+                    stroke={colors.brandDark}
                     strokeWidth="1.5"
                     strokeMiterlimit="10"
                 />
@@ -48,17 +38,20 @@ const ThemeSettings = {
             <svg width="28" height="28" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <path
                     d="M14 27c7.18 0 13-5.82 13-13S21.18 1 14 1 1 6.82 1 14s5.82 13 13 13z"
-                    stroke="#00AE99"
+                    stroke={colors.brandLight}
                     strokeWidth="1.054"
                     strokeMiterlimit="10"
                 />
                 <path
                     d="M14.002 26.977c7.167 0 12.977-5.81 12.977-12.976 0-7.166-5.81-12.976-12.976-12.976-7.167 0-12.977 5.81-12.977 12.976 0 7.167 5.81 12.976 12.976 12.976z"
-                    stroke="#003831"
+                    stroke={colors.brandDark}
                     strokeWidth="1.5"
                     strokeMiterlimit="10"
                 />
-                <path d="M15.298 9.494V7.641h-1.972v1.853h1.972zm-.034 1.853h-1.921V20h1.921v-8.653z" fill="#003831" />
+                <path
+                    d="M15.298 9.494V7.641h-1.972v1.853h1.972zm-.034 1.853h-1.921V20h1.921v-8.653z"
+                    fill={colors.brandDark}
+                />
             </svg>
         ),
     },
@@ -81,27 +74,23 @@ const ThemeSettings = {
     },
 };
 
-export const Callout: React.FunctionComponent<CalloutConfig> = ({ type, text }: CalloutConfig) => (
-    <Wrapper type={type}>
-        {ThemeSettings[type].icon}
-        <Text>{text}</Text>
-    </Wrapper>
+export const Notification: React.FC<INotificationProps> = ({ type = 'standard', text }) => (
+    <NotificationWrapper type={type}>
+        {themeSettings[type].icon}
+        <NotificationText>{text}</NotificationText>
+    </NotificationWrapper>
 );
 
-Callout.defaultProps = {
-    type: 'standard',
-};
-
-const Wrapper = styled.div<WrapperProps>`
-    background-color: ${props => ThemeSettings[props.type].bgColor};
-    color: ${colors.textDarkPrimary};
-    padding: 1rem 1rem 1rem 1rem;
+const NotificationWrapper = styled.div<INotificationWrapperProps>`
     display: flex;
     align-items: center;
+    padding: 1rem;
     margin-bottom: 1rem;
+    color: ${colors.textDarkPrimary};
+    background-color: ${({ type }) => themeSettings[type].bgColor};
 `;
 
-const Text = styled.span`
+const NotificationText = styled.span`
     font-size: 1rem;
     margin-left: 1rem;
 `;

packages/website/ts/pages/docs/guides.tsx

@@ -3,7 +3,7 @@ import * as React from 'react';
 import styled, { keyframes } from 'styled-components';
 
 // import { Tabs } from 'react-tabs';
-import { Callout } from 'ts/components/docs/callout';
+import { Notification } from 'ts/components/docs/notification';
 import { Code } from 'ts/components/docs/code';
 import { CommunityLink, CommunityLinkProps } from 'ts/components/docs/community_link';
 import { FeatureLink } from 'ts/components/docs/feature_link';

packages/website/ts/pages/docs/page_template.tsx

@@ -3,7 +3,7 @@ import * as React from 'react';
 import styled, { keyframes } from 'styled-components';
 
 // import { Tabs } from 'react-tabs';
-import { Callout } from 'ts/components/docs/callout';
+import { Notification } from 'ts/components/docs/notification';
 import { Code } from 'ts/components/docs/code';
 import { CommunityLink, CommunityLinkProps } from 'ts/components/docs/community_link';
 import { FeatureLink } from 'ts/components/docs/feature_link';
@@ -127,9 +127,9 @@ export class DocsPageTemplate extends React.Component<Props> {
                             <Heading asElement="h2" size="default">
                                 Notifications
                             </Heading>
-                            <Callout text="This is' a pretty standard information callout" />
-                            <Callout text="This is an indication that something isn’t quite right" type="alert" />
-                            <Callout text="This is a success message" type="success" />
+                            <Notification text="This is' a pretty standard information callout" />
+                            <Notification text="This is an indication that something isn’t quite right" type="alert" />
+                            <Notification text="This is a success message" type="success" />
                             <Heading asElement="h2" size="default">
                                 Tutorial Steps
                             </Heading>

packages/website/ts/pages/docs/tools.tsx

@@ -3,7 +3,7 @@ import * as React from 'react';
 import styled, { keyframes } from 'styled-components';
 
 // import { Tabs } from 'react-tabs';
-import { Callout } from 'ts/components/docs/callout';
+import { Notification } from 'ts/components/docs/notification';
 import { Code } from 'ts/components/docs/code';
 import { CommunityLink, CommunityLinkProps } from 'ts/components/docs/community_link';
 import { FeatureLink } from 'ts/components/docs/feature_link';

packages/website/ts/pages/docs/view.tsx

@@ -5,7 +5,7 @@ import styled, { keyframes } from 'styled-components';
 // import { Tabs } from 'react-tabs';
 import { MDXProvider } from '@mdx-js/react';
 import { match } from 'react-router-dom';
-import { Callout } from 'ts/components/docs/callout';
+import { Notification } from 'ts/components/docs/notification';
 import { Code } from 'ts/components/docs/code';
 import { CommunityLink, CommunityLinkProps } from 'ts/components/docs/community_link';
 import { FeatureLink } from 'ts/components/docs/feature_link';
@@ -62,7 +62,7 @@ export class DocsView extends React.Component<Props, State> {
             code: Code,
             table: Table,
             hr: Separator,
-            Callout,
+            Notification,
             Tabs,
             TabList,
             Tab,

packages/website/ts/style/colors.ts

@@ -30,3 +30,4 @@ export const colors = {
     ...sharedColors,
     ...appColors,
 };
+console.log('sharedColors', sharedColors);