add UI utils

src/client/UIKit/fonts.js

@@ -0,0 +1,148 @@
+import styled, { css } from 'styled-components';
+import mq from 'UIKit/mq';
+import { BOX_STYLED_SYSTEM, TEXT_STYLED_SYSTEM, Text } from './grid';
+import typographyStyle from './lib/typographyStyle';
+import colors from 'src/components/UIKit/colors';
+
+export const WITH_COUNTER = css`
+  content: attr(data-counter);
+  margin-left: 5px;
+  color: ${colors.gray['800']};
+  font-size: 12px;
+  vertical-align: top;
+`;
+
+export const TYPOGRAPHY_STYLES = {
+  h1: typographyStyle([40, 45, 66, 68, 70], 1.05),
+  h1by2: typographyStyle([25, 30, 46, 48, 50], 1.05),
+  h2: typographyStyle([23, 23, 32, 36, 38], 1.25),
+  h3: typographyStyle([19, 19, 20, 22, 24], 1.4),
+  h5: typographyStyle([21, 21, 28, 30, 32], 1.2),
+  text: typographyStyle([14, 14, 16], 1.55),
+};
+
+export const H1 = styled(Text)`
+  ${TYPOGRAPHY_STYLES.h1};
+`;
+H1.displayName = 'H1';
+H1.defaultProps = {
+  as: 'h1',
+  m: 0,
+  fontWeight: 700,
+};
+
+export const H1by2 = styled(Text)`
+  ${TYPOGRAPHY_STYLES.h1by2};
+`;
+H1by2.displayName = 'H1by2';
+H1by2.defaultProps = {
+  as: 'div',
+  fontWeight: 700,
+};
+
+export const H2 = styled(Text)`
+  ${TYPOGRAPHY_STYLES.h2};
+`;
+H2.displayName = 'H2';
+H2.defaultProps = {
+  as: 'h2',
+  m: 0,
+  fontWeight: 400,
+};
+
+export const H3 = styled(Text)`
+  ${TYPOGRAPHY_STYLES.h3};
+`;
+H3.displayName = 'H3';
+H3.defaultProps = {
+  as: 'h3',
+  m: 0,
+  fontWeight: 700,
+  textTransform: 'uppercase',
+};
+
+export const H4 = styled(Text)`
+  ${TYPOGRAPHY_STYLES.h2};
+`;
+H4.displayName = 'H4';
+H4.defaultProps = {
+  as: 'h4',
+  m: 0,
+  fontWeight: 700,
+};
+
+export const H5 = styled(Text)`
+  ${TYPOGRAPHY_STYLES.h5};
+`;
+H5.displayName = 'H5';
+H5.defaultProps = {
+  as: 'h5',
+  m: 0,
+  fontWeight: 700,
+};
+
+export const MiniHeader = styled(Text)`
+  font-size: 1rem;
+  text-transform: uppercase;
+
+  ${mq.tablet`font-size: 1.2rem`};
+`;
+
+MiniHeader.defaultProps = {
+  fontWeight: 400,
+};
+
+export const Subheader = styled(H3)``;
+Subheader.displayName = 'Subheader';
+Subheader.defaultProps = {
+  as: 'div',
+  fontWeight: 400,
+  textTransform: 'none',
+};
+
+export const Text25 = styled(Text)`
+  padding-top: ${props => (props.borderTop ? '10px' : '0')};
+  ${TYPOGRAPHY_STYLES.text};
+`;
+
+Text25.defaultProps = {
+  fontWeight: 400,
+};
+
+export const Text30 = styled(Text)`
+  ${TYPOGRAPHY_STYLES.text};
+  letter-spacing: 0.01em;
+`;
+
+Text30.defaultProps = {
+  fontWeight: 400,
+};
+
+export const Subtext = styled(Text)`
+  font-size: 1.2rem;
+  line-height: ${({ line }) => line || 1.8};
+
+  ${mq.desktop`font-size: 1.4rem`};
+`;
+
+Subtext.defaultProps = {
+  fontWeight: 400,
+};
+
+export const SmallText = styled(Text)`
+  font-size: 1.2rem;
+  line-height: 1.667;
+`;
+
+SmallText.defaultProps = {
+  fontWeight: 400,
+};
+
+export const List = styled.ul`
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+  width: ${props => (props.limitWidth ? '76%' : '100%')};
+  ${BOX_STYLED_SYSTEM};
+  ${TEXT_STYLED_SYSTEM};
+`;

src/client/UIKit/lib/typographyStyle.js

@@ -0,0 +1,39 @@
+import { css } from 'styled-components';
+import mq from 'src/components/UIKit/mq';
+
+const TYPOGRAPHY_BPS = [320, 'tablet', 'desktop1280', 'desktop1440', 'desktop1680'];
+const getTypographyStyle = fontSize => `font-size: ${fontSize}px;`;
+
+const typographyArray = arr =>
+  arr
+    .map((v, i) => {
+      return v === arr[i - 1] ? null : v;
+    })
+    .map(fSize => (fSize ? getTypographyStyle(fSize) : null));
+
+const typographyArrayToCSS = (arr, lh) =>
+  arr.reduce(
+    (acc, curr, i) => {
+      if (curr === null) {
+        return acc;
+      }
+
+      const addition =
+        i > 0
+          ? css`
+              ${mq[TYPOGRAPHY_BPS[i]]`${curr}`};
+            `
+          : curr;
+
+      return css`
+        ${acc} ${addition};
+      `;
+    },
+    css`
+      line-height: ${lh};
+    `
+  );
+const typographyStyle = (fontSizeArray, lineHeight) =>
+  typographyArrayToCSS(typographyArray(fontSizeArray), lineHeight);
+
+export default typographyStyle;