Skip to content

Commit

Permalink
feat(BTS-167): implements Grid to align the component
Browse files Browse the repository at this point in the history
  • Loading branch information
rapahaeru committed Mar 27, 2019
1 parent 1a26919 commit f04f6c7
Showing 1 changed file with 22 additions and 10 deletions.
32 changes: 22 additions & 10 deletions components/SnackBar/SnackBar.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,19 +3,17 @@ import styled from 'styled-components';
import PropTypes from 'prop-types';
import Colors from '../Colors';
import Button from '../Button';
import { Row, Col } from '../Grid';

const SnackBarDialog = styled.div`
align-items: center;
background-color: ${Colors.COBALT['500']};
border-radius: 4px;
bottom: 30px;
color: ${Colors.WHITE};
display: flex;
justify-content: space-between;
left: calc(50% / 2);
min-height: 48px;
padding: 13px 16px;
position: fixed;
`;

const TextContainer = styled.strong`
Expand Down Expand Up @@ -50,19 +48,33 @@ const ActionLink = styled.a`
}
`;

const ActionsSection = styled.div`
display: flex;
align-items: center;
`;

class SnackBar extends React.Component {
componentDidMount() {}

render() {
const { text, onClose, closeButtonAriaLabel, ...rest } = this.props;
return (
<SnackBarDialog {...rest} role="dialog">
<TextContainer>{text}</TextContainer>
<ActionLink href="/">action</ActionLink>
{onClose && (
<CloseIcon onClick={onClose} aria-label={closeButtonAriaLabel} />
)}
</SnackBarDialog>
<Row>
<Col xsmall-offset={1} xsmall={10}>
<SnackBarDialog {...rest} role="dialog">
<TextContainer>{text}</TextContainer>
<ActionsSection>
<ActionLink href="/">action</ActionLink>
{onClose && (
<CloseIcon
onClick={onClose}
aria-label={closeButtonAriaLabel}
/>
)}
</ActionsSection>
</SnackBarDialog>
</Col>
</Row>
);
}
}
Expand Down

0 comments on commit f04f6c7

Please sign in to comment.