Some content
Some content2
diff --git a/src/dataDisplay/Dot/dot.stories.tsx b/src/dataDisplay/Dot/dot.stories.tsx
new file mode 100644
index 00000000..637dadd9
--- /dev/null
+++ b/src/dataDisplay/Dot/dot.stories.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+
+import { Dot, Text, Icon } from '../../index';
+
+export default {
+ title: 'Data Display/Dot',
+ component: Dot,
+ parameters: {
+ componentSubtitle: 'Generic Dot container for text or icons.',
+ },
+};
+
+export const DotWithText = (): React.ReactElement => (
+
+
+ 1
+
+
+);
+
+export const DotWithIcon = (): React.ReactElement => (
+
+
+
+);
diff --git a/src/dataDisplay/Dot/index.tsx b/src/dataDisplay/Dot/index.tsx
new file mode 100644
index 00000000..637beb26
--- /dev/null
+++ b/src/dataDisplay/Dot/index.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import styled from 'styled-components';
+import { ThemeColors } from '../../theme';
+
+type Props = {
+ className?: string;
+ color: ThemeColors;
+};
+
+const StyledDot = styled.div
`
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border-radius: 50%;
+ height: 36px;
+ width: 36px;
+ background-color: ${({ theme, color }) => theme.colors[color]};
+`;
+
+const Dot: React.FC = ({ children, ...rest }): React.ReactElement => (
+ {children}
+);
+
+export default Dot;
diff --git a/src/dataDisplay/FixedDialog/index.tsx b/src/dataDisplay/FixedDialog/index.tsx
index 37be1fd7..e341b8f6 100644
--- a/src/dataDisplay/FixedDialog/index.tsx
+++ b/src/dataDisplay/FixedDialog/index.tsx
@@ -1,6 +1,6 @@
import React from 'react';
import styled from 'styled-components';
-import { rgba } from 'polished';
+import { fade } from '@material-ui/core/styles/colorManipulator';
import { Title, ModalFooterConfirmation } from '../../index';
@@ -9,7 +9,7 @@ const Container = styled.div`
display: flex;
align-items: center;
justify-content: center;
- background-color: ${({ theme }) => rgba(theme.colors.overlay.color, 0.8)};
+ background-color: ${({ theme }) => fade(theme.colors.overlay.color, 0.8)};
`;
const Wrapper = styled.div`
diff --git a/src/dataDisplay/FixedIcon/fixedIcon.stories.tsx b/src/dataDisplay/FixedIcon/fixedIcon.stories.tsx
index 58d1a489..f67b6e8c 100644
--- a/src/dataDisplay/FixedIcon/fixedIcon.stories.tsx
+++ b/src/dataDisplay/FixedIcon/fixedIcon.stories.tsx
@@ -50,6 +50,7 @@ export const Icons = (): React.ReactElement => {
'creatingInProgress',
'notOwner',
'notConnected',
+ 'networkError',
];
return (
diff --git a/src/dataDisplay/FixedIcon/images/networkError.tsx b/src/dataDisplay/FixedIcon/images/networkError.tsx
new file mode 100644
index 00000000..a0be7611
--- /dev/null
+++ b/src/dataDisplay/FixedIcon/images/networkError.tsx
@@ -0,0 +1,34 @@
+import React from 'react';
+
+const icon = (
+
+);
+
+export default icon;
diff --git a/src/dataDisplay/FixedIcon/index.tsx b/src/dataDisplay/FixedIcon/index.tsx
index ac3248d8..0430bdc2 100644
--- a/src/dataDisplay/FixedIcon/index.tsx
+++ b/src/dataDisplay/FixedIcon/index.tsx
@@ -20,6 +20,7 @@ import settingsChange from './images/settingsChange';
import creatingInProgress from './images/creatingInProgress';
import notOwner from './images/notOwner';
import notConnected from './images/notConnected';
+import networkError from './images/networkError';
const icons = {
arrowSort,
@@ -42,6 +43,7 @@ const icons = {
creatingInProgress,
notOwner,
notConnected,
+ networkError,
};
export type IconType = typeof icons;
diff --git a/src/dataDisplay/Icon/icon.stories.tsx b/src/dataDisplay/Icon/icon.stories.tsx
index 4a66c7aa..4955b360 100644
--- a/src/dataDisplay/Icon/icon.stories.tsx
+++ b/src/dataDisplay/Icon/icon.stories.tsx
@@ -28,7 +28,7 @@ export const Icons = (): React.ReactElement => {
width: 140px;
height: 140px;
border: 1px solid ${({ theme }) => theme.colors.background};
- font-family: 'Averta', sans-serif;
+ font-family: ${({ theme }) => theme.fonts.fontFamily};
font-size: 14px;
`;
@@ -88,6 +88,7 @@ export const Icons = (): React.ReactElement => {
'resync',
'rocket',
'scan',
+ 'safe',
'search',
'sendAgain',
'sent',
diff --git a/src/dataDisplay/Icon/images/safe.tsx b/src/dataDisplay/Icon/images/safe.tsx
new file mode 100644
index 00000000..c4bea6eb
--- /dev/null
+++ b/src/dataDisplay/Icon/images/safe.tsx
@@ -0,0 +1,47 @@
+import React from 'react';
+
+export default {
+ sm: (
+
+ ),
+ md: (
+
+ ),
+};
diff --git a/src/dataDisplay/Icon/index.tsx b/src/dataDisplay/Icon/index.tsx
index 923eebbf..5a98b7f9 100644
--- a/src/dataDisplay/Icon/index.tsx
+++ b/src/dataDisplay/Icon/index.tsx
@@ -1,7 +1,7 @@
import React from 'react';
import styled from 'styled-components';
-import Tooltip from '@material-ui/core/Tooltip';
-import { withStyles } from '@material-ui/core/styles';
+
+import { Tooltip } from '../..';
import add from './images/add';
import addressBook from './images/addressBook';
@@ -57,6 +57,7 @@ import requiredConfirmations from './images/requiredConfirmations';
import restricted from './images/restricted';
import resync from './images/resync';
import rocket from './images/rocket';
+import safe from './images/safe';
import scan from './images/scan';
import search from './images/search';
import sendAgain from './images/sendAgain';
@@ -71,9 +72,8 @@ import transactionsInactive from './images/transactionsInactive';
import unlocked from './images/unlocked';
import userEdit from './images/userEdit';
import wallet from './images/wallet';
-import { rgba } from 'polished';
-import theme, { ThemeColors, ThemeIconSize } from '../../theme';
+import { ThemeColors, ThemeIconSize } from '../../theme';
const StyledIcon = styled.span<{ color?: ThemeColors }>`
display: inline-flex;
@@ -84,18 +84,6 @@ const StyledIcon = styled.span<{ color?: ThemeColors }>`
}
`;
-const StyledTooltip = withStyles(() => ({
- popper: {
- zIndex: 2001,
- },
- tooltip: {
- backgroundColor: theme.colors.overlay.color,
- border: `1px solid ${theme.colors.icon}`,
- boxShadow: `1px 2px 4px ${rgba(theme.colors.shadow.color, 0.08)}`,
- color: theme.colors.text,
- },
-}))(Tooltip);
-
const icons = {
add,
addressBook,
@@ -151,6 +139,7 @@ const icons = {
restricted,
resync,
rocket,
+ safe,
scan,
search,
sendAgain,
@@ -170,7 +159,7 @@ const icons = {
export type IconType = typeof icons;
export type IconTypes = keyof IconType;
-type Props = {
+export type Props = {
type: IconTypes;
size: ThemeIconSize;
color?: ThemeColors;
@@ -197,8 +186,8 @@ export const Icon = ({
return tooltip === undefined ? (
IconElement
) : (
-
+
{IconElement}
-
+
);
};
diff --git a/src/dataDisplay/Text/index.tsx b/src/dataDisplay/Text/index.tsx
index 2c170977..bc83efcd 100644
--- a/src/dataDisplay/Text/index.tsx
+++ b/src/dataDisplay/Text/index.tsx
@@ -2,7 +2,7 @@ import React from 'react';
import styled from 'styled-components';
import Tooltip from '@material-ui/core/Tooltip';
import { withStyles } from '@material-ui/core/styles';
-import { rgba } from 'polished';
+import { fade } from '@material-ui/core/styles/colorManipulator';
import theme, { ThemeTextSize, ThemeColors } from '../../theme';
@@ -32,11 +32,11 @@ const StyledTooltip = withStyles(() => ({
tooltip: {
backgroundColor: theme.colors.white,
color: theme.colors.text,
- boxShadow: `0px 0px 10px ${rgba(theme.colors.shadow.color, 0.2)}`,
+ boxShadow: `0px 0px 10px ${fade(theme.colors.shadow.color, 0.2)}`,
},
arrow: {
color: theme.colors.white,
- boxShadow: `0px 0px 10px ${rgba(theme.colors.shadow.color, 0.2)}`,
+ boxShadow: 'transparent',
},
}))(Tooltip);
diff --git a/src/dataDisplay/Title/index.tsx b/src/dataDisplay/Title/index.tsx
index bffd8d4a..ba899bed 100644
--- a/src/dataDisplay/Title/index.tsx
+++ b/src/dataDisplay/Title/index.tsx
@@ -7,89 +7,65 @@ type Props = {
children: string | React.ReactNode;
size: ThemeTitleSize;
withoutMargin?: boolean;
+ strong?: boolean;
};
-const StyledH1 = styled.h1<{ withoutMargin?: boolean }>`
- font-family: 'Averta';
+const StyledH1 = styled.h1<{ withoutMargin?: boolean; strong?: boolean }>`
+ font-family: ${({ theme }) => theme.fonts.fontFamily};
font-size: ${({ theme }) => theme.title.size.xl.fontSize};
line-height: ${({ theme }) => theme.title.size.xl.lineHeight};
- font-weight: normal;
+ font-weight: ${({ strong }) => (strong ? 'bold' : 'normal')};
margin: ${({ withoutMargin }) => (withoutMargin ? 0 : '30px')} 0;
`;
-const StyledH2 = styled.h2<{ withoutMargin?: boolean }>`
- font-family: 'Averta';
+const StyledH2 = styled.h2<{ withoutMargin?: boolean; strong?: boolean }>`
+ font-family: ${({ theme }) => theme.fonts.fontFamily};
font-size: ${({ theme }) => theme.title.size.lg.fontSize};
line-height: ${({ theme }) => theme.title.size.lg.lineHeight};
- font-weight: normal;
+ font-weight: ${({ strong }) => (strong ? 'bold' : 'normal')};
margin: ${({ withoutMargin }) => (withoutMargin ? 0 : '28px')} 0;
`;
-const StyledH3 = styled.h3<{ withoutMargin?: boolean }>`
- font-family: 'Averta';
+const StyledH3 = styled.h3<{ withoutMargin?: boolean; strong?: boolean }>`
+ font-family: ${({ theme }) => theme.fonts.fontFamily};
font-size: ${({ theme }) => theme.title.size.md.fontSize};
line-height: ${({ theme }) => theme.title.size.md.lineHeight};
- font-weight: normal;
+ font-weight: ${({ strong }) => (strong ? 'bold' : 'normal')};
margin: ${({ withoutMargin }) => (withoutMargin ? 0 : '26px')} 0;
`;
-const StyledH4 = styled.h4<{ withoutMargin?: boolean }>`
- font-family: 'Averta';
+const StyledH4 = styled.h4<{ withoutMargin?: boolean; strong?: boolean }>`
+ font-family: ${({ theme }) => theme.fonts.fontFamily};
font-size: ${({ theme }) => theme.title.size.sm.fontSize};
line-height: ${({ theme }) => theme.title.size.sm.lineHeight};
- font-weight: normal;
+ font-weight: ${({ strong }) => (strong ? 'bold' : 'normal')};
margin: ${({ withoutMargin }) => (withoutMargin ? 0 : '22px')} 0;
`;
-const StyledH5 = styled.h5<{ withoutMargin?: boolean }>`
- font-family: 'Averta';
+const StyledH5 = styled.h5<{ withoutMargin?: boolean; strong?: boolean }>`
+ font-family: ${({ theme }) => theme.fonts.fontFamily};
font-size: ${({ theme }) => theme.title.size.xs.fontSize};
line-height: ${({ theme }) => theme.title.size.xs.lineHeight};
- font-weight: normal;
+ font-weight: ${({ strong }) => (strong ? 'bold' : 'normal')};
margin: ${({ withoutMargin }) => (withoutMargin ? 0 : '18px')} 0;
`;
-const Title = ({
- children,
- size,
- withoutMargin,
- ...rest
-}: Props): React.ReactElement => {
+const Title = ({ children, size, ...rest }: Props): React.ReactElement => {
switch (size) {
case 'xl': {
- return (
-
- {children}
-
- );
+ return {children};
}
case 'lg': {
- return (
-
- {children}
-
- );
+ return {children};
}
case 'md': {
- return (
-
- {children}
-
- );
+ return {children};
}
case 'sm': {
- return (
-
- {children}
-
- );
+ return {children};
}
case 'xs': {
- return (
-
- {children}
-
- );
+ return {children};
}
}
};
diff --git a/src/dataDisplay/Title/title.stories.tsx b/src/dataDisplay/Title/title.stories.tsx
index aabd4b3e..d8460d30 100644
--- a/src/dataDisplay/Title/title.stories.tsx
+++ b/src/dataDisplay/Title/title.stories.tsx
@@ -25,3 +25,14 @@ export const WithSizes = (): React.ReactElement => {
);
};
+
+export const Bold = (): React.ReactElement => (
+ <>
+
+ Title LG
+
+
+ Title MD
+
+
+);
diff --git a/src/dataDisplay/Tooltip/index.stories.tsx b/src/dataDisplay/Tooltip/index.stories.tsx
new file mode 100644
index 00000000..42ee4920
--- /dev/null
+++ b/src/dataDisplay/Tooltip/index.stories.tsx
@@ -0,0 +1,43 @@
+import React from 'react';
+
+import { Tooltip } from './index';
+
+export default {
+ title: 'Data Display/Tooltip',
+ component: Tooltip,
+ parameters: {
+ componentSubtitle: 'Add a tooltip to any ReactElement passed as a child.',
+ },
+};
+
+export const Basic = (): React.ReactElement => {
+ return (
+
+ hover me
+
+ );
+};
+
+export const CustomColor = (): React.ReactElement => {
+ return (
+
+ hover me
+
+ );
+};
+
+export const CustomColorAndArrow = (): React.ReactElement => {
+ return (
+
+ hover me
+
+ );
+};
+
+export const CustomSize = (): React.ReactElement => {
+ return (
+
+ hover me
+
+ );
+};
diff --git a/src/dataDisplay/Tooltip/index.tsx b/src/dataDisplay/Tooltip/index.tsx
new file mode 100644
index 00000000..cf623ad0
--- /dev/null
+++ b/src/dataDisplay/Tooltip/index.tsx
@@ -0,0 +1,110 @@
+import React, { ReactElement } from 'react';
+import MUITooltip, {
+ TooltipProps as TooltipPropsMui,
+} from '@material-ui/core/Tooltip';
+import { withStyles } from '@material-ui/core/styles';
+import { fade } from '@material-ui/core/styles/colorManipulator';
+
+import theme, { ThemeColors, ThemeTooltipSize } from '../../theme';
+
+type TooltipProps = {
+ size?: ThemeTooltipSize;
+ backgroundColor?: ThemeColors;
+ textColor?: ThemeColors;
+ padding?: string;
+ border?: string;
+};
+
+const getPaddingBySize = (size: ThemeTooltipSize): string => {
+ switch (size) {
+ case 'lg':
+ return '8px 16px';
+ default:
+ return '4px 8px';
+ }
+};
+
+const getBorderBySize = (size: ThemeTooltipSize): string => {
+ switch (size) {
+ case 'lg':
+ return 'none';
+ default:
+ return `1px solid ${theme.colors.separator}`;
+ }
+};
+
+const getFontInfoBySize = (
+ size: ThemeTooltipSize
+): {
+ fontSize: string;
+ lineHeight: string;
+} => {
+ switch (size) {
+ case 'lg':
+ return theme.text.size.lg;
+ default:
+ return theme.text.size.md;
+ }
+};
+
+const customTooltip = ({
+ backgroundColor,
+ textColor,
+ size = 'md',
+}: TooltipProps) =>
+ withStyles(() => ({
+ popper: {
+ zIndex: 2001,
+ },
+ tooltip: {
+ backgroundColor: backgroundColor
+ ? (theme.colors[backgroundColor] as string)
+ : theme.colors.overlay.color,
+ boxShadow: `1px 2px 10px ${fade(theme.colors.shadow.color, 0.18)}`,
+ border: getBorderBySize(size),
+ color: textColor
+ ? (theme.colors[textColor] as string)
+ : theme.colors.text,
+ borderRadius: '4px',
+ fontFamily: theme.fonts.fontFamily,
+ padding: getPaddingBySize(size),
+ fontSize: getFontInfoBySize(size).fontSize,
+ lineHeight: getFontInfoBySize(size).lineHeight,
+ },
+ arrow: {
+ color: backgroundColor
+ ? (theme.colors[backgroundColor] as string)
+ : theme.colors.overlay.color,
+ border: 'none',
+
+ '&::before': {
+ boxShadow: `1px 2px 10px ${fade(theme.colors.shadow.color, 0.18)}`,
+ },
+ },
+ }))(MUITooltip);
+
+type Props = {
+ title: string;
+ children: ReactElement;
+} & TooltipProps;
+
+export const Tooltip = ({
+ title,
+ backgroundColor,
+ textColor,
+ children,
+ size,
+ ...rest
+}: Props & TooltipPropsMui): ReactElement => {
+ const StyledTooltip = customTooltip({
+ backgroundColor,
+ textColor,
+ size,
+ });
+
+ return (
+
+ {children}
+
+ );
+};
diff --git a/src/dataDisplay/index.ts b/src/dataDisplay/index.ts
index d5c82a96..c97ae5c9 100644
--- a/src/dataDisplay/index.ts
+++ b/src/dataDisplay/index.ts
@@ -1,11 +1,14 @@
export { default as Card } from './Card';
+export * from './Accordion';
export { default as Divider } from './Divider';
+export { default as Dot } from './Dot';
export { default as FixedIcon } from './FixedIcon';
export { default as FixedDialog } from './FixedDialog';
export * from './Icon';
export { default as IconText } from './IconText';
export { default as Layout } from './Layout';
export * from './Table';
+export * from './Tooltip';
export { default as Text } from './Text';
export { default as Title } from './Title';
export { default as Section } from './Section';
diff --git a/src/inputs/Button/button.stories.tsx b/src/inputs/Button/button.stories.tsx
index 1a157c83..84120048 100644
--- a/src/inputs/Button/button.stories.tsx
+++ b/src/inputs/Button/button.stories.tsx
@@ -1,6 +1,7 @@
import React from 'react';
+import styled from 'styled-components';
-import Button from './index';
+import { Button } from './index';
export default {
title: 'Inputs/Button',
@@ -10,62 +11,170 @@ export default {
},
};
+const Wrapper = styled.div`
+ > * {
+ margin-right: 5px;
+ }
+`;
+
export const SimpleButton = (): React.ReactElement => (
<>
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
);
-export const Sizes = (): React.ReactElement => (
+export const DisabledButton = (): React.ReactElement => (
<>
-