diff --git a/src/typography/Meta/Meta.story.tsx b/src/typography/Meta/Meta.story.tsx new file mode 100644 index 000000000..912b92799 --- /dev/null +++ b/src/typography/Meta/Meta.story.tsx @@ -0,0 +1,23 @@ +import React from 'react'; +import { Story } from '@storybook/react'; + +import { Meta } from './Meta'; +import { Props } from './Meta.types'; + +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..5f936444b --- /dev/null +++ b/src/typography/Meta/Meta.tsx @@ -0,0 +1,28 @@ +import React from 'react'; + +import { Props } from './Meta.types'; +import { Meta as Styled } from './Meta.style'; + +import { withIris } from '../../utils'; + +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..cac5d95db --- /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 = 'span'] + */ + element?: 'p' | 'span' | 'label'; + /** + * [default = 'basic'] + */ + format?: 'basic' | 'soft' | 'alternative'; + status?: Statuses; + }, + HTMLParagraphElement +>;