joyent-portal/packages/ui-toolkit/src/card/description.js

53 lines
1.1 KiB
JavaScript
Raw Normal View History

2017-02-27 17:41:08 +02:00
import { Subscriber } from 'react-broadcast';
import Baseline from '../baseline';
import typography from '../typography';
import is, { isNot } from 'styled-is';
import remcalc from 'remcalc';
import styled from 'styled-components';
import PropTypes from 'prop-types';
import Title from './title';
import React from 'react';
const StyledTitle = Title.extend`
${typography.fontFamily};
${typography.normal};
flex-grow: 1;
flex-basis: ${remcalc(90)};
2017-02-27 17:41:08 +02:00
${isNot('collapsed')`
padding-bottom: ${remcalc(12)};
`};
2017-01-09 14:13:12 +02:00
`;
const InnerDescription = styled.div`
justify-content: flex-start;
height: 100%;
position: relative;
2017-01-09 14:13:12 +02:00
`;
const Description = ({ children, ...rest }) => {
2017-08-28 22:21:08 +03:00
const render = ({ collapsed = false }) => (
2017-02-27 17:41:08 +02:00
<StyledTitle
collapsed={collapsed}
name="card-description"
2017-02-27 17:41:08 +02:00
xs={collapsed ? 6 : 12}
{...rest}
2017-02-27 17:41:08 +02:00
>
2017-08-28 22:21:08 +03:00
<InnerDescription collapsed={collapsed}>{children}</InnerDescription>
</StyledTitle>
2017-02-27 17:41:08 +02:00
);
2017-08-28 22:21:08 +03:00
return <Subscriber channel="card">{render}</Subscriber>;
2017-02-27 17:41:08 +02:00
};
2017-01-09 14:13:12 +02:00
Description.propTypes = {
children: PropTypes.node,
/**
* @ignore
*/
collapsed: PropTypes.bool
2017-01-09 14:13:12 +02:00
};
export default Baseline(Description);