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

70 lines
1.5 KiB
JavaScript
Raw Normal View History

2017-02-27 17:41:08 +02:00
import { Subscriber } from 'react-broadcast';
import styled from 'styled-components';
import Baseline from '../baseline';
import typography from '../typography';
import remcalc from 'remcalc';
import is, { isNot } from 'styled-is';
import PropTypes from 'prop-types';
import Title from './title';
import React from 'react';
2017-01-09 14:13:12 +02:00
const Span = styled.span`
display: inline-block;
2017-01-09 14:13:12 +02:00
flex-direction: column;
${typography.fontFamily};
${typography.normal};
2017-01-09 14:13:12 +02:00
font-style: normal;
font-stretch: normal;
2017-01-12 21:04:52 +02:00
font-size: ${remcalc(14)};
2017-01-10 00:14:10 +02:00
justify-content: flex-end;
${is('collapsed')`
display: flex;
`};
2017-02-27 17:41:08 +02:00
${is('fromHeader')`
color: ${props => props.theme.white};
2017-02-27 17:41:08 +02:00
`};
2017-01-10 00:14:10 +02:00
`;
const StyledTitle = Title.extend`
display: inline-block;
padding: 0 ${remcalc(18)};
${typography.fontFamily};
${typography.normal};
2017-02-27 17:41:08 +02:00
${is('collapsed')`
display: flex;
padding: 0;
`};
2017-01-09 14:13:12 +02:00
`;
const Subtitle = ({ children, ...props }) => {
2017-08-28 22:21:08 +03:00
const render = ({ active = true, fromHeader = false, collapsed = false }) => (
2017-02-27 17:41:08 +02:00
<StyledTitle
name="card-subtitle"
2017-02-27 17:41:08 +02:00
fromHeader={fromHeader}
collapsed={collapsed}
active={active}
2017-02-27 17:41:08 +02:00
{...props}
>
<Span fromHeader={fromHeader} collapsed={collapsed}>
{children}
</Span>
2017-08-28 22:21:08 +03:00
</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
Subtitle.propTypes = {
children: PropTypes.node,
collapsed: PropTypes.bool,
fromHeader: PropTypes.bool
2017-01-09 14:13:12 +02:00
};
export default Baseline(Subtitle);