@titelmedia/bricks-headline - npm Package Compare versions

Comparing version 0.0.12 to 0.1.0

lib/index.js

		import React from 'react';
		import { StyledHeadline } from './styles';
		import GlobalFonts from '@titelmedia/bricks-theme/lib/fonts/index.js';
		import { Container, PinnedImageContent, StyledText } from './styles';

		const Headline = ({ bold, children }) => {
		return (
		<React.Fragment>
		<GlobalFonts />
		<StyledHeadline bold={bold}> i'm a headline{children}</StyledHeadline>
		</React.Fragment>
		);
		const Headline = ({ text, style, parentLayout }) => {
		const textSizes =
		style === 'bold'
		? { mobile: 'xs', tablet_vertical: 'md', desktop: 'lg' }
		: { mobile: 'xs', tablet_vertical: 'sm', desktop: 'md' };
		const textProps =
		style === 'bold' ? { bold: true, headline: true } : { headline: true };

		const content = () => {
		return (
		<StyledText
		parentLayout={parentLayout}
		fontWeight={style}
		dangerouslySetInnerHTML={{ __html: text }}
		sizes={textSizes}
		{...textProps}
		/>
		);
		};

		const renderComponent = () => {
		if (parentLayout === 'pinnedImage' && style !== 'bold') {
		return <PinnedImageContent>{content()}</PinnedImageContent>;
		} else {
		return (
		<Container>
		<h2>i am a headline</h2>
		<div>{content()}</div>
		</Container>
		);
		}
		};

		return renderComponent();
		};

		export { Headline };

lib/styles.js

		import styled from 'styled-components';
		import {
		setFontSizes,
		setFont,
		} from '@titelmedia/bricks-theme/lib/utilities/typography';
		import { setContainer } from '@titelmedia/bricks-theme/lib/utilities/layout';
		const PINNED_IMAGE = 'pinnedImage';

		export const StyledHeadline = styled.h4`
		line-height: 1.4em;
		${props => setFont({ bold: props.bold })}
		${setContainer({ size: 'sm' })}
		export const Container = styled.div`
		// Every value is +16 because of the padding
		@media (min-width: 768px) {
		max-width: ${524 + 16}px;
		}

		@media (min-width: 1024px) {
		max-width: ${690 + 16}px;
		}

		@media (min-width: 1440px) {
		max-width: ${664 + 16}px;
		}

		@media (min-width: 1600px) {
		max-width: ${792 + 16}px;
		}
		`;

		export const PinnedImageContent = styled.div`
		align-self: center;
		justify-self: center;

		width: 92%;

		@media (min-width: 992px) {
		width: 75%;
		}

		@media (min-width: 1600px) {
		width: 50%;
		}
		`;

		export const StyledText = styled.p`
		${props =>
		setFontSizes({
		mobile: props.bold ? '20px' : '16px',
		tablet_vertical: props.bold ? '30px' : '16px',
		})}
		props.parentLayout !== PINNED_IMAGE &&
		`
		margin-left: auto;
		margin-right: auto;

		@media (min-width: 992px) {
		max-width: 720px;
		}

		@media (min-width: 1200px) {
		max-width: 840px;
		}
		`}
		font-weight: 900;
		line-height: 22px;
		@media (min-width: 768px) {
		line-height: ${({ bold }) => (bold ? '35px' : '26px')};
		}

		@media (min-width: 1200px) {
		line-height: ${({ bold }) => (bold ? '53px' : '35px')};
		}
		`;

package.json

		{
		"name": "@titelmedia/bricks-headline",
		"version": "0.0.12",
		"version": "0.1.0",
		"description": "> TODO: description",
		@@ -30,5 +30,5 @@ "author": "Katerina Vaseva <katerina.vsv@gmail.com>",
		"dependencies": {
		"@titelmedia/bricks-theme": "^0.0.12"
		"@titelmedia/bricks-theme": "^0.1.0"
		},
		"gitHead": "f4561b8906936d0c7d28f8a39f1f567575190dde"
		"gitHead": "df5d90a720550192dd9b307362ea8d7fe9996b30"
		}

New alerts