Skip to content

Instantly share code, notes, and snippets.

@EdwardIrby EdwardIrby/Textblock.css
Last active Mar 6, 2019

Embed
What would you like to do?
Textblock Component Example
/**
* @module @moovelna/junction-utils~classNames
*/
/**
* @description A module that takes n string arguments that contain class names for a node and then concatenates them.
* @param {...string} classes
* @return a single string connected with a space
* @example Simple
* <div className={
* classNames(
* className, // pass through className prop
* iconStyles.MyClass,
* ) }
* />
* @example Conditional
* <div className={
* classNames(
* className, // pass through className prop
* styles.MyClass,
* condition && styles.ConditionalClass
* ) }
* />
*/
export const classNames = (...classes) => classes.filter(Boolean).join(' ');
/**
* @module @moovelna/junction-utils
*/
/**
* @description converts a pixel value into a rem value
* @param {number} value
* @returns {string}
* ---
* @example
* rem(2) = '0.125rem'
*/
export const rem = value => `${value / 16}rem`;
.Textblock {
display: var(--display);
}
import PropTypes from 'prop-types';
import { createElement as h } from 'react';
import { classNames, tokens } from '@moovelna/junction-utils';
import { typography } from '../foundation/foundation.js';
import foundationStyles from '../foundation/foundation.css';
import textblockStyles from './Textblock.css';
export const Textblock = ({
children,
inline,
forwardRef,
htmlTag,
className,
style,
alignSelf,
justifySelf,
order,
flex,
gridArea,
padding,
kind,
...rest
}) => {
const tag = (kind === 'h1')
? 'h1'
: (kind === 'h2')
? 'h2'
: (kind === 'h3')
? 'h3'
: (kind === 'h4')
? 'h4'
: htmlTag
/* eslint-disable no-unneeded-ternary */
? htmlTag
/* eslint-enable */
: inline
? 'span'
: 'p';
return h(
tag,
{
className: classNames(
className,
foundationStyles.Typography,
textblockStyles.Textblock,
),
style: {
...tokens(
inline ? { display: 'inline' } : { display: 'block' },
typography[kind],
),
alignSelf,
justifySelf,
order,
flex,
gridArea,
padding,
...style,
},
ref: forwardRef,
...rest,
},
children,
);
};
Textblock.defaultProps = {
kind: 'body',
};
Textblock.displayName = 'Primitive(Textblock)';
Textblock.propTypes = {
alignSelf: PropTypes.string,
justifySelf: PropTypes.string,
order: PropTypes.string,
flex: PropTypes.string,
gridArea: PropTypes.string,
padding: PropTypes.string,
htmlTag: PropTypes.string,
inline: PropTypes.bool,
className: PropTypes.string,
style: PropTypes.object,
kind: PropTypes.string,
children: PropTypes.oneOfType([
PropTypes.node,
PropTypes.arrayOf(PropTypes.node),
]),
};
/**
* @module @moovelna/junction-utils~tokens
*/
/**
* @param {...{}} objs - object containing camelCased style properties or css custom properties
* @returns {<{'--prop': 'value'}>} containing prefixed css custom properties to be inlined.
* @example Simple
* <Textblock style={tokens({
* lineHeight: 1.2,
* fontSize: rem(47.78),
* })} />
* @example Conditional Example
* <Textblock style={tokens(
* inline ? { display: 'inline' } : { display: 'block' },
* {
* lineHeight: 1.2,
* fontSize: rem(47.78),
* },
* )} />
*/
export const tokens = (...objs) => objs
.filter(Boolean)
.map(obj => Object.entries(obj))
.reduce((acc, cur) => acc.concat(cur), [])
.reduce((acc, [key, value]) => ({ ...acc, [`--${key}`]: value }), {});
/**
* @module @moovelna/junction
*/
import { rem } from '@moovelna/junction-utils';
export const d1 = {
lineHeight: 1.2,
fontSize: rem(47.78),
};
export const d2 = {
lineHeight: 1.2,
fontSize: rem(39.81),
};
export const h1 = {
lineHeight: 1.2,
fontSize: rem(33.18),
};
export const h2 = {
lineHeight: 1.2,
fontSize: rem(27.65),
};
export const h3 = {
lineHeight: 1.2,
fontSize: rem(23.04),
};
export const h4 = {
lineHeight: 1.2,
fontSize: rem(19.20),
};
export const body = {
lineHeight: 1.2,
fontSize: rem(16),
};
export const label = {
lineHeight: 1.2,
fontSize: rem(13.33),
};
export const sub1 = {
lineHeight: 1.2,
fontSize: rem(11.11),
};
export const sub2 = {
lineHeight: 1.2,
fontSize: rem(9.26),
};
export const sub3 = {
lineHeight: 1.2,
fontSize: rem(7.72),
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.