crowetic/protocol
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactored Note / Notification components

Browse Source
This commit is contained in:
Piotr Janosz
2019-07-05 19:54:56 +02:00
committed by fabioberger
parent 4ccb735282
commit 74f6fb7408
2 changed files with 30 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
packages/website/ts/components/docs/note.tsx
View File

@@ -1,29 +1,22 @@
import * as _ from 'lodash'; import React from 'react';
import * as React from 'react';
import styled from 'styled-components'; import styled from 'styled-components';
import { Heading, Paragraph } from 'ts/components/text'; import { Heading, Paragraph } from 'ts/components/text';
import { colors } from 'ts/style/colors'; import { colors } from 'ts/style/colors';
export interface NoteProps { export interface INoteProps {
heading: string; heading: string;
description?: string; description?: string;
} }
interface WrapperProps {} export const Note: React.FunctionComponent<INoteProps> = props => (
<NoteWrapper>
export const Note: React.FunctionComponent<NoteProps> = (props: NoteProps) => ( <NoteHeading marginBottom="6px">{props.heading}</NoteHeading>
<> <NoteDescription>{props.description}</NoteDescription>
<Wrapper> </NoteWrapper>
<Content>
<NoteHeading marginBottom="6px">{props.heading}</NoteHeading>
<Description>{props.description}</Description>
</Content>
</Wrapper>
</>
); );
const Wrapper = styled.div` const NoteWrapper = styled.div`
background-color: ${colors.backgroundLight}; background-color: ${colors.backgroundLight};
border: 1px solid #dbdfdd; border: 1px solid #dbdfdd;
padding: 20px 14px; padding: 20px 14px;
@@ -35,14 +28,12 @@ const Wrapper = styled.div`
margin-bottom: 30px; margin-bottom: 30px;
`; `;
const Content = styled.div``;
const NoteHeading = styled(Heading).attrs({ color: colors.brandDark, asElement: 'h4' })` const NoteHeading = styled(Heading).attrs({ color: colors.brandDark, asElement: 'h4' })`
font-size: 0.944444444rem !important; font-size: 0.944444444rem !important;
margin-bottom: 6px; margin-bottom: 6px;
`; `;
const Description = styled(Paragraph)` const NoteDescription = styled(Paragraph)`
font-size: 0.888888889rem; font-size: 0.888888889rem;
margin-bottom: 0; margin-bottom: 0;
line-height: 1.25; line-height: 1.25;

42
packages/website/ts/components/docs/notification.tsx
View File

@@ -11,6 +11,27 @@ interface INotificationProps extends INotificationWrapperProps {
text: string; text: string;
} }
export const Notification: React.FC<INotificationProps> = ({ type = 'standard', text }) => (
<NotificationWrapper type={type}>
{themeSettings[type].icon}
<NotificationText>{text}</NotificationText>
</NotificationWrapper>
);
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 NotificationText = styled.span`
font-size: 1rem;
margin-left: 1rem;
`;
const themeSettings = { const themeSettings = {
success: { success: {
bgColor: 'rgba(0, 174, 153, 0.1)', bgColor: 'rgba(0, 174, 153, 0.1)',
@@ -73,24 +94,3 @@ const themeSettings = {
), ),
}, },
}; };
export const Notification: React.FC<INotificationProps> = ({ type = 'standard', text }) => (
<NotificationWrapper type={type}>
{themeSettings[type].icon}
<NotificationText>{text}</NotificationText>
</NotificationWrapper>
);
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 NotificationText = styled.span`
font-size: 1rem;
margin-left: 1rem;
`;