From 5484c7997a1a403c8f0e74493eb2bcc4f42af082 Mon Sep 17 00:00:00 2001
From: Sean McIntyre <seanmcintyre@gmail.com>
Date: Wed, 17 Nov 2021 13:48:48 -0500
Subject: [PATCH 1/2] typography: add Meta

---
 src/typography/Meta/Meta.story.tsx | 25 +++++++++++++++++++++++++
 src/typography/Meta/Meta.style.ts  | 15 +++++++++++++++
 src/typography/Meta/Meta.tsx       | 30 ++++++++++++++++++++++++++++++
 src/typography/Meta/Meta.types.ts  | 18 ++++++++++++++++++
 4 files changed, 88 insertions(+)
 create mode 100644 src/typography/Meta/Meta.story.tsx
 create mode 100644 src/typography/Meta/Meta.style.ts
 create mode 100644 src/typography/Meta/Meta.tsx
 create mode 100644 src/typography/Meta/Meta.types.ts

diff --git a/src/typography/Meta/Meta.story.tsx b/src/typography/Meta/Meta.story.tsx
new file mode 100644
index 000000000..31243407e
--- /dev/null
+++ b/src/typography/Meta/Meta.story.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import { Story } from '@storybook/react';
+
+import { Meta } from './Meta';
+// import { Props } from './Meta.types';
+
+type Props = any;
+
+export default {
+  title: 'typography/Meta',
+  component: Meta,
+  argTypes: {
+    contentEditable: { control: { disable: true } },
+  },
+};
+
+const Template: Story<Props> = (args) => {
+  return (
+    <>
+      <Meta {...args}>Meta</Meta>
+    </>
+  );
+};
+export const Controls = Template.bind({});
+Controls.storyName = 'Meta';
diff --git a/src/typography/Meta/Meta.style.ts b/src/typography/Meta/Meta.style.ts
new file mode 100644
index 000000000..0651db041
--- /dev/null
+++ b/src/typography/Meta/Meta.style.ts
@@ -0,0 +1,15 @@
+/* stylelint-disable */
+
+import styled from 'styled-components';
+
+import { Text } from '../Text/Text';
+
+export const Meta = styled(Text)`
+  line-height: 1.5;
+  font-weight: 400;
+  letter-spacing: 0.1px;
+  font-smoothing: antialiased;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizelegibility;
+`;
diff --git a/src/typography/Meta/Meta.tsx b/src/typography/Meta/Meta.tsx
new file mode 100644
index 000000000..b386935ba
--- /dev/null
+++ b/src/typography/Meta/Meta.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+
+// import { Props } from './Meta.types';
+import { Meta as Styled } from './Meta.style';
+
+import { withIris } from '../../utils';
+
+type Props = any;
+
+export const Meta = withIris<
+  HTMLParagraphElement | HTMLSpanElement | HTMLLabelElement,
+  Props
+>(MetaComponent);
+
+function MetaComponent({
+  element = 'span',
+  forwardRef,
+  format = 'basic',
+  ...props
+}: Props) {
+  return (
+    <Styled
+      element={element}
+      format={format}
+      ref={forwardRef}
+      size={100}
+      {...props}
+    />
+  );
+}
diff --git a/src/typography/Meta/Meta.types.ts b/src/typography/Meta/Meta.types.ts
new file mode 100644
index 000000000..e09a5a625
--- /dev/null
+++ b/src/typography/Meta/Meta.types.ts
@@ -0,0 +1,18 @@
+import { IrisProps } from '../../utils';
+import { Statuses } from '../../themes';
+
+export type Props = IrisProps<
+  {
+    contentEditable?: never;
+    /**
+     * [default = 'p']
+     */
+    element?: 'p' | 'span' | 'label';
+    /**
+     * [default = 'basic']
+     */
+    format?: 'basic' | 'soft' | 'alternative';
+    status?: Statuses;
+  },
+  HTMLParagraphElement
+>;

From 9b79a38030b8ed0a7f0e22dc1bdebe6cf9d552df Mon Sep 17 00:00:00 2001
From: Sean McIntyre <seanmcintyre@gmail.com>
Date: Wed, 17 Nov 2021 14:14:46 -0500
Subject: [PATCH 2/2] use Meta types

---
 src/typography/Meta/Meta.story.tsx | 4 +---
 src/typography/Meta/Meta.tsx       | 4 +---
 src/typography/Meta/Meta.types.ts  | 2 +-
 3 files changed, 3 insertions(+), 7 deletions(-)

diff --git a/src/typography/Meta/Meta.story.tsx b/src/typography/Meta/Meta.story.tsx
index 31243407e..912b92799 100644
--- a/src/typography/Meta/Meta.story.tsx
+++ b/src/typography/Meta/Meta.story.tsx
@@ -2,9 +2,7 @@ import React from 'react';
 import { Story } from '@storybook/react';
 
 import { Meta } from './Meta';
-// import { Props } from './Meta.types';
-
-type Props = any;
+import { Props } from './Meta.types';
 
 export default {
   title: 'typography/Meta',
diff --git a/src/typography/Meta/Meta.tsx b/src/typography/Meta/Meta.tsx
index b386935ba..5f936444b 100644
--- a/src/typography/Meta/Meta.tsx
+++ b/src/typography/Meta/Meta.tsx
@@ -1,12 +1,10 @@
 import React from 'react';
 
-// import { Props } from './Meta.types';
+import { Props } from './Meta.types';
 import { Meta as Styled } from './Meta.style';
 
 import { withIris } from '../../utils';
 
-type Props = any;
-
 export const Meta = withIris<
   HTMLParagraphElement | HTMLSpanElement | HTMLLabelElement,
   Props
diff --git a/src/typography/Meta/Meta.types.ts b/src/typography/Meta/Meta.types.ts
index e09a5a625..cac5d95db 100644
--- a/src/typography/Meta/Meta.types.ts
+++ b/src/typography/Meta/Meta.types.ts
@@ -5,7 +5,7 @@ export type Props = IrisProps<
   {
     contentEditable?: never;
     /**
-     * [default = 'p']
+     * [default = 'span']
      */
     element?: 'p' | 'span' | 'label';
     /**