Lil site rebuild

src/public/objects/typography/heading/index.tsx

@@ -0,0 +1,125 @@
+// Copyright (c) 2019 Dominic Masters
+//
+// MIT License
+//
+// Permission is hereby granted, free of charge, to any person obtaining
+// a copy of this software and associated documentation files (the
+// "Software"), to deal in the Software without restriction, including
+// without limitation the rights to use, copy, modify, merge, publish,
+// distribute, sublicense, and/or sell copies of the Software, and to
+// permit persons to whom the Software is furnished to do so, subject to
+// the following conditions:
+//
+// The above copyright notice and this permission notice shall be
+// included in all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+// EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+// NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+// LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+// OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+// WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+import * as React from 'react';
+import './styles.scss';
+
+export enum Type {
+  H1='h1', H2='h2', H3='h3', H4='h4', H5='h5', H6='h6',
+  SPAN='span'
+}
+
+export enum Size {
+  TITLE='is-title',
+  TITLE_LARGE='is-title-large',
+  SUBTTITLE='is-subtitle',
+  S1='is-size-1',
+  S2='is-size-2',
+  S3='is-size-3',
+  S4='is-size-4',
+  S5='is-size-5',
+  S6='is-size-6'
+}
+
+export interface HeadingProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement> {
+  type?:Type,
+  size?:Size
+}
+
+export const Heading = (props:HeadingProps) => {
+  let { size, type, className } = props;
+
+  let np = {...props};
+  ['size','type','large'].forEach(e => delete np[e]);
+
+  size = size || Size.S1;
+
+  let clazz = `o-heading ${size}`;
+
+  if(!type) {
+    switch(size) {
+      case Size.TITLE:
+        type = Type.H1; break;
+      case Size.TITLE_LARGE:
+        type = Type.H1; break;
+      case Size.S1:
+        type = Type.H1; break;
+      case Size.S2:
+        type = Type.H2; break;
+      case Size.S3:
+        type = Type.H3; break;
+      case Size.S4:
+        type = Type.H4; break;
+      case Size.S5:
+        type = Type.H5; break;
+      case Size.S6:
+        type = Type.H6; break;
+      default:
+        type = Type.SPAN; break;
+    }
+  }
+
+  if(size == Size.TITLE) clazz = 'o-title';
+  if(size == Size.TITLE_LARGE) clazz = 'o-title is-large';
+  if(size == Size.SUBTTITLE) clazz = 'o-subtitle';
+  if(className) clazz += ` ${className}`;
+
+  let ElementType = type;
+  return <ElementType {...np} className={clazz} />;
+};
+
+//Types
+export const Title = (props:(
+  HeadingProps & { large?:boolean }
+)) => (
+  <Heading {...props} size={props.size||(
+    props.large ? Size.TITLE_LARGE : Size.TITLE
+  )} type={props.type||Type.H1} />
+);
+
+export const Subtitle = (props:HeadingProps) => (
+  <Heading {...props} size={props.size||Size.SUBTTITLE} type={props.type||Type.H2} />
+);
+
+
+export const Heading1 = Heading;
+
+export const Heading2 = (props:HeadingProps) => (
+  <Heading {...props} type={props.type||Type.H2} size={props.size||Size.S2} />
+);
+
+export const Heading3 = (props:HeadingProps) => (
+  <Heading {...props} type={props.type||Type.H3} size={props.size||Size.S3} />
+);
+
+export const Heading4 = (props:HeadingProps) => (
+  <Heading {...props} type={props.type||Type.H4} size={props.size||Size.S4} />
+);
+
+export const Heading5 = (props:HeadingProps) => (
+  <Heading {...props} type={props.type||Type.H5} size={props.size||Size.S5} />
+);
+
+export const Heading6 = (props:HeadingProps) => (
+  <Heading {...props} type={props.type||Type.H6} size={props.size||Size.S6} />
+);