initial commit

src/app/atoms/text/Text.jsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import './Text.scss';
+
+function Text({
+  id, className, variant, children,
+}) {
+  const cName = className !== '' ? `${className} ` : '';
+  if (variant === 'h1') return <h1 id={id === '' ? undefined : id} className={`${cName}text text-h1`}>{ children }</h1>;
+  if (variant === 'h2') return <h2 id={id === '' ? undefined : id} className={`${cName}text text-h2`}>{ children }</h2>;
+  if (variant === 's1') return <h4 id={id === '' ? undefined : id} className={`${cName}text text-s1`}>{ children }</h4>;
+  return <p id={id === '' ? undefined : id} className={`${cName}text text-${variant}`}>{ children }</p>;
+}
+
+Text.defaultProps = {
+  id: '',
+  className: '',
+  variant: 'b1',
+};
+
+Text.propTypes = {
+  id: PropTypes.string,
+  className: PropTypes.string,
+  variant: PropTypes.oneOf(['h1', 'h2', 's1', 'b1', 'b2', 'b3']),
+  children: PropTypes.node.isRequired,
+};
+
+export default Text;

src/app/atoms/text/Text.scss

@@ -0,0 +1,41 @@
+@mixin font($type, $weight) {
+  
+  font-size: var(--fs-#{$type});
+  font-weight: $weight;
+  letter-spacing: var(--ls-#{$type});
+  line-height: var(--lh-#{$type});
+}
+
+%text {
+  margin: 0;
+  padding: 0;
+  color: var(--tc-surface-high);
+}
+
+.text-h1 {
+  @extend %text;
+  @include font(h1, 500);
+}
+.text-h2 {
+  @extend %text;
+  @include font(h2, 500);
+}
+.text-s1 {
+  @extend %text;
+  @include font(s1, 400);
+}
+.text-b1 {
+  @extend %text;
+  @include font(b1, 400);
+  color: var(--tc-surface-normal);
+}
+.text-b2 {
+  @extend %text;
+  @include font(b2, 400);
+  color: var(--tc-surface-normal);
+}
+.text-b3 {
+  @extend %text;
+  @include font(b3, 400);
+  color: var(--tc-surface-low);
+}