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

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

@@ -11,6 +11,27 @@ interface INotificationProps extends INotificationWrapperProps {
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 = {
success: {
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;
`;