@newtonschool/grauity 0.0.14 → 0.1.11

package/ui/elements/Table/types.ts

@@ -0,0 +1,270 @@
+import React, { ReactNode } from 'react';
+
+import { grauityIconName } from '../../core';
+
+export interface TableColumn {
+    /**
+     * Column key
+     * */
+    key: string;
+
+    /**
+     * Column display name
+     * */
+    display: string;
+
+    /**
+     * Column width
+     * */
+    width?: string;
+
+    /**
+     * Column alignment, default is center
+     * */
+    align?: 'left' | 'right' | 'center';
+
+    /**
+     * Row span, default is 1
+     * */
+    rowSpan?: number;
+
+    /**
+     * Col span, default is 1
+     * */
+    colSpan?: number;
+}
+
+export interface TableCellInterface {
+    /**
+     * Cell display, can be a string or a React element
+     * */
+    display?: ReactNode;
+
+    /**
+     * Custom cell render function. If provided, display will be ignored
+     * */
+    render?: (args: TableCellInterface) => ReactNode;
+
+    /**
+     * Row vertical alignment, default is top
+     * */
+    vAlign?: 'top' | 'bottom' | 'middle';
+
+    /**
+     * Row span, default is 1
+     * */
+    rowSpan?: number;
+
+    /**
+     * Col span, default is 1
+     * */
+    colSpan?: number;
+
+    /**
+     * Row actions (rendered as buttons by default)
+     * */
+    actions?: TableCellAction[];
+
+    /**
+     * Row alignment
+     * */
+    align?: 'left' | 'right' | 'center';
+}
+
+export interface TableCellAction {
+    /**
+     * Action key
+     * */
+    key: string;
+
+    /**
+     * Action display, can be a string or a React element
+     * */
+    display: any;
+
+    /**
+     * Action icon
+     * */
+    icon?: grauityIconName;
+
+    /**
+     * Action type, can be a button or a link, default is button
+     * */
+    as?: 'button' | 'link';
+
+    /**
+     * Action href, only used if the action type is link
+     * */
+    href?: string;
+
+    /**
+     * Action click handler
+     * */
+    handleClick?: (data: any) => void;
+}
+
+export interface TableRow {
+    /**
+     * Table data, in JS Object format, with table column keys as keys of object
+     */
+    [columnKey: string]: TableCellInterface;
+}
+
+export interface TableColumnRow {
+    /**
+     * Row key
+     * */
+    key: string;
+
+    /**
+     * Row cells
+     * */
+    cells: TableColumn[];
+}
+
+export interface TableProps {
+    /**
+     * Table columns, see type `TableColumn`
+     * */
+    columns?: TableColumn[];
+
+    /**
+     * Table rows, see type `TableRow`
+     * */
+    rows?: TableRow[];
+
+    /**
+     * Determines if the table is condensed (Reduced padding).
+     * Available choices: true, false
+     *
+     * Default: `true`
+     * */
+    condensed?: boolean;
+
+    /**
+     * Are alternate rows striped (shaded).
+     * Available choices: true, false
+     *
+     * Default: `false`
+     * */
+    striped?: boolean;
+
+    /**
+     * Determines if the table has a border around it.
+     * Available choices: true, false
+     *
+     * Default: `true`
+     * */
+    borderAround?: boolean;
+
+    /**
+     * Determines if the table has a border between rows.
+     * Available choices: true, false
+     *
+     * Has more precedence than `borderHorizontal` and `borderVertical`.
+     *
+     * Default: `true`
+     * */
+    borderWithin?: boolean;
+
+    /**
+     * Determines if the table has a border between columns.
+     *
+     * Default: `true`
+     * */
+    borderHorizontal?: boolean;
+
+    /**
+     * Determines if the table has a border between rows.
+     *
+     * Default: `true`
+     * */
+    borderVertical?: boolean;
+
+    /**
+     * Additional classes to be added to the component.
+     * */
+    className?: string;
+
+    /**
+     * Show that the table is loading
+     *
+     * Default: `false`
+     * */
+    loading?: boolean;
+
+    /**
+     * Additional styles to be used over the element
+     *
+     * Default: `{}`
+     * */
+    style?: React.CSSProperties;
+
+    /**
+     * Capitalize the header
+     *
+     * Default: `true`
+     * */
+    capitalizeHeaders?: boolean;
+
+    /**
+     * Determines if table headers should be highlighted
+     *
+     * Default: `true`
+     * */
+    highlightHeaders?: boolean;
+}
+
+// Interface for NSTableWrapper component props
+export interface TableComponentProps {
+    borderAround?: boolean;
+    borderWithin?: boolean;
+    borderHorizontal?: boolean;
+    borderVertical?: boolean;
+    striped?: boolean;
+    children: ReactNode;
+    role?: string;
+    className?: string;
+    style?: React.CSSProperties;
+}
+
+// Interface for NSTableHead component props
+export interface TableHeadComponentProps {
+    capitalizeHeaders?: boolean;
+    highlightHeaders?: boolean;
+    children: ReactNode;
+}
+
+// Interface for NSTableBody component props
+export interface TableBodyComponentProps {
+    children: ReactNode;
+}
+
+// Interface for NSTableRow component props
+export interface TableRowComponentProps {
+    key?: string;
+    condensed?: boolean;
+    children: ReactNode;
+}
+
+// Interface for NSTableDataCell component props
+export interface TableDataCellComponentProps {
+    key?: string;
+    align?: string;
+    vAlign?: string;
+    flexAlign?: string;
+    colSpan?: number;
+    rowSpan?: number;
+    children: ReactNode;
+}
+
+// Interface for NSTableHeadingCell component props
+export interface TableHeadingCellComponentProps {
+    key?: string;
+    align?: string;
+    width?: string;
+    flexAlign?: string;
+    colSpan?: number;
+    rowSpan?: number;
+    children: ReactNode;
+}

package/ui/elements/Typography/Typography.styles.ts

@@ -0,0 +1,29 @@
+import styled, { css } from 'styled-components';
+
+import { StyledTypographyInterface } from './types';
+import { getTypographyVariantStyles } from './utils';
+
+export const StyledTypography = styled.p.attrs(
+    (props: StyledTypographyInterface) => ({
+        as: props.as || 'p',
+    })
+)<StyledTypographyInterface>`
+    margin: 0;
+    padding: 0;
+
+    font-family: var(--font-family, 'Mona Sans');
+    color: var(--text-primary, #16191d);
+
+    ${({ variant }) =>
+        css`
+            ${getTypographyVariantStyles(variant)}
+        `};
+
+    ${({ textAlign }) => textAlign && `text-align: ${textAlign};`}
+    ${({ textTransform }) =>
+        textTransform && `text-transform: ${textTransform};`}
+    ${({ fontSize }) => fontSize && `font-size: ${fontSize};`}
+    ${({ color }) => color && `color: ${color};`};
+`;
+
+export default StyledTypography;

package/ui/elements/Typography/Typography.tsx

@@ -0,0 +1,70 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+
+import {
+    TYPOGRAPHY_AS_ENUM,
+    TYPOGRAPHY_VARIANT_AS_MAPPING,
+    TYPOGRAPHY_VARIANTS,
+} from './constants';
+import { TypographyProps } from './types';
+import { StyledTypography } from './Typography.styles';
+
+/**
+ * A typography component can be used to display text in different styles.
+ *
+ * Use the prop `variant` to select the style of the text.
+ *
+ * By default, prop `as` is set to `'auto'`, and the component will automatically
+ * select the HTML tag based on the prop `variant`.
+
+ * If you want the text to be rendered as a different HTML tag, provide your desired 
+ * value to prop `as`, such as `'h1'`, `'h2'`, `'p'`, etc.
+ */
+const Typography = ({
+    variant,
+    as,
+    color,
+    textAlign,
+    textTransform,
+    fontSize,
+    children = '',
+}: TypographyProps) => {
+    const asType =
+        as === TYPOGRAPHY_AS_ENUM.AUTO
+            ? TYPOGRAPHY_VARIANT_AS_MAPPING[variant]
+            : as;
+    return (
+        <StyledTypography
+            variant={variant}
+            as={asType}
+            color={color}
+            textAlign={textAlign}
+            textTransform={textTransform}
+            fontSize={fontSize}
+        >
+            {children}
+        </StyledTypography>
+    );
+};
+
+Typography.propTypes = {
+    variant: PropTypes.oneOf(TYPOGRAPHY_VARIANTS),
+    as: PropTypes.string,
+    color: PropTypes.string,
+    textAlign: PropTypes.string,
+    textTransform: PropTypes.string,
+    fontSize: PropTypes.string,
+    children: PropTypes.any,
+};
+
+Typography.defaultProps = {
+    variant: 'paragraph-medium-body1',
+    as: 'auto',
+    color: 'var(--text-primary, #16191d)',
+    textAlign: null,
+    textTransform: null,
+    fontSize: null,
+    children: 'Enter the text here',
+};
+
+export default Typography;

package/ui/elements/Typography/constants.ts

@@ -0,0 +1,292 @@
+import { TypographyAsType, TypographyVariantType } from './types';
+
+export const TYPOGRAPHY_VARIANTS_ENUM: { [x: string]: TypographyVariantType } =
+    {
+        HEADING_SEMIBOLD_H40: 'heading-semibold-h40',
+        HEADING_SEMIBOLD_H36: 'heading-semibold-h36',
+        HEADING_SEMIBOLD_H28: 'heading-semibold-h28',
+        HEADING_SEMIBOLD_H24: 'heading-semibold-h24',
+        HEADING_SEMIBOLD_H20: 'heading-semibold-h20',
+        HEADING_SEMIBOLD_H16: 'heading-semibold-h16',
+
+        PARAGRAPH_SEMIBOLD_BODY1: 'paragraph-semibold-body1',
+        PARAGRAPH_SEMIBOLD_BODY2: 'paragraph-semibold-body2',
+        PARAGRAPH_SEMIBOLD_BODY3: 'paragraph-semibold-body3',
+        PARAGRAPH_SEMIBOLD_BODY4: 'paragraph-semibold-body4',
+        PARAGRAPH_SEMIBOLD_LABEL: 'paragraph-semibold-label',
+        PARAGRAPH_SEMIBOLD_LABEL2: 'paragraph-semibold-label2',
+        PARAGRAPH_SEMIBOLD_CALLOUT: 'paragraph-semibold-callout',
+
+        PARAGRAPH_MEDIUM_BODY1: 'paragraph-medium-body1',
+        PARAGRAPH_MEDIUM_BODY2: 'paragraph-medium-body2',
+        PARAGRAPH_MEDIUM_BODY3: 'paragraph-medium-body3',
+        PARAGRAPH_MEDIUM_BODY4: 'paragraph-medium-body4',
+
+        PARAGRAPH_MEDIUM_LABEL: 'paragraph-medium-label',
+        PARAGRAPH_MEDIUM_LABEL2: 'paragraph-medium-label2',
+        PARAGRAPH_MEDIUM_CALLOUT: 'paragraph-medium-callout',
+
+        PARAGRAPH_MEDIUM_CODE: 'paragraph-medium-code',
+
+        HEADING_SEMIBOLD_OVERLINE1: 'heading-semibold-overline1',
+        HEADING_SEMIBOLD_OVERLINE2: 'heading-semibold-overline2',
+
+        ACTION_SEMIBOLD_PRIMARY: 'action-semibold-primary',
+        ACTION_SEMIBOLD_LINK: 'action-semibold-link',
+
+        BLOG_SEMIBOLD_TITLE: 'blog-semibold-title',
+        BLOG_MEDIUM_REGULAR: 'blog-medium-regular',
+        BLOG_MEDIUM_BOLD: 'blog-medium-bold',
+        BLOG_MEDIUM_ITALIC: 'blog-medium-italic',
+    };
+
+export const TYPOGRAPHY_VARIANTS = Object.freeze(
+    Object.values(TYPOGRAPHY_VARIANTS_ENUM)
+);
+
+export const TYPOGRAPHY_AS_ENUM: { [x: string]: TypographyAsType } = {
+    H1: 'h1',
+    H2: 'h2',
+    H3: 'h3',
+    H4: 'h4',
+    H5: 'h5',
+    H6: 'h6',
+    P: 'p',
+    SPAN: 'span',
+    DIV: 'div',
+    LABEL: 'label',
+    CAPTION: 'caption',
+    CODE: 'code',
+    AUTO: 'auto',
+};
+
+export const TYPOGRAPHY_AS_LIST = Object.freeze(
+    Object.values(TYPOGRAPHY_AS_ENUM)
+);
+
+/**
+ * Mapping of Typography `variant` to CSS styles.
+ */
+export const TYPOGRAPHY_VARIANT_STYLES_MAPPING = {
+    [TYPOGRAPHY_VARIANTS_ENUM.HEADING_SEMIBOLD_H40]: `
+        font-size: var(--font-size-40px, 40px);
+        font-weight: var(--font-weight-semibold, 600);
+        line-height: 120%;
+    `,
+    [TYPOGRAPHY_VARIANTS_ENUM.HEADING_SEMIBOLD_H36]: `
+        font-size: var(--font-size-36px, 36px);
+        font-weight: var(--font-weight-semibold, 600);
+        line-height: 120%;
+    `,
+    [TYPOGRAPHY_VARIANTS_ENUM.HEADING_SEMIBOLD_H28]: `
+        font-size: var(--font-size-28px, 28px);
+        font-weight: var(--font-weight-semibold, 600);
+        line-height: 120%;
+    `,
+    [TYPOGRAPHY_VARIANTS_ENUM.HEADING_SEMIBOLD_H24]: `
+        font-size: var(--font-size-24px, 24px);
+        font-weight: var(--font-weight-semibold, 600);
+        line-height: 120%;
+    `,
+    [TYPOGRAPHY_VARIANTS_ENUM.HEADING_SEMIBOLD_H20]: `
+        font-size: var(--font-size-20px, 20px);
+        font-weight: var(--font-weight-semibold, 600);
+        line-height: 120%;
+        letter-spacing: 0.25px;
+    `,
+    [TYPOGRAPHY_VARIANTS_ENUM.HEADING_SEMIBOLD_H16]: `
+        font-size: var(--font-size-16px, 16px);
+        font-weight: var(--font-weight-semibold, 600);
+        line-height: 120%;
+        letter-spacing: 0.25px;
+    `,
+    [TYPOGRAPHY_VARIANTS_ENUM.PARAGRAPH_SEMIBOLD_BODY1]: `
+        font-size: var(--font-size-18px, 18px);
+        font-weight: var(--font-weight-semibold, 600);
+        line-height: 160%;
+        letter-spacing: 0.1px;
+    `,
+    [TYPOGRAPHY_VARIANTS_ENUM.PARAGRAPH_SEMIBOLD_BODY2]: `
+        font-size: var(--font-size-16px, 16px);
+        font-weight: var(--font-weight-semibold, 600);
+        line-height: 160%;
+        letter-spacing: 0.1px;
+    `,
+    [TYPOGRAPHY_VARIANTS_ENUM.PARAGRAPH_SEMIBOLD_BODY3]: `
+        font-size: var(--font-size-14px, 14px);
+        font-weight: var(--font-weight-semibold, 600);
+        line-height: 160%;
+        letter-spacing: 0.1px;
+    `,
+    [TYPOGRAPHY_VARIANTS_ENUM.PARAGRAPH_SEMIBOLD_BODY4]: `
+        font-size: var(--font-size-12px, 12px);
+        font-weight: var(--font-weight-semibold, 600);
+        line-height: 160%;
+        letter-spacing: 0.1px;
+    `,
+    [TYPOGRAPHY_VARIANTS_ENUM.PARAGRAPH_SEMIBOLD_LABEL]: `
+        font-size: var(--font-size-14px, 14px);
+        font-weight: var(--font-weight-semibold, 600);
+        line-height: 120%;
+        letter-spacing: 0.5px;
+    `,
+    [TYPOGRAPHY_VARIANTS_ENUM.PARAGRAPH_SEMIBOLD_LABEL2]: `
+        font-size: var(--font-size-12px, 12px);
+        font-weight: var(--font-weight-semibold, 600);
+        line-height: 120%;
+        letter-spacing: 0.4px;
+    `,
+    [TYPOGRAPHY_VARIANTS_ENUM.PARAGRAPH_SEMIBOLD_CALLOUT]: `
+        font-size: var(--font-size-14px, 14px);
+        font-weight: var(--font-weight-semibold, 600);
+        line-height: 120%;
+        letter-spacing: 0.15px;
+    `,
+    [TYPOGRAPHY_VARIANTS_ENUM.PARAGRAPH_MEDIUM_BODY1]: `
+        font-size: var(--font-size-18px, 18px);
+        font-weight: var(--font-weight-medium, 500);
+        line-height: 160%;
+        letter-spacing: 0.1px;
+    `,
+    [TYPOGRAPHY_VARIANTS_ENUM.PARAGRAPH_MEDIUM_BODY2]: `
+        font-size: var(--font-size-16px, 16px);
+        font-weight: var(--font-weight-medium, 500);
+        line-height: 160%;
+        letter-spacing: 0.1px;
+    `,
+    [TYPOGRAPHY_VARIANTS_ENUM.PARAGRAPH_MEDIUM_BODY3]: `
+        font-size: var(--font-size-14px, 14px);
+        font-weight: var(--font-weight-medium, 500);
+        line-height: 160%;
+        letter-spacing: 0.1px;
+    `,
+    [TYPOGRAPHY_VARIANTS_ENUM.PARAGRAPH_MEDIUM_BODY4]: `
+        font-size: var(--font-size-12px, 12px);
+        font-weight: var(--font-weight-medium, 500);
+        line-height: 160%;
+        letter-spacing: 0.1px;
+    `,
+    [TYPOGRAPHY_VARIANTS_ENUM.PARAGRAPH_MEDIUM_LABEL]: `
+        font-size: var(--font-size-14px, 14px);
+        font-weight: var(--font-weight-medium, 500);
+        line-height: 120%;
+        letter-spacing: 0.5px;
+    `,
+    [TYPOGRAPHY_VARIANTS_ENUM.PARAGRAPH_MEDIUM_LABEL2]: `
+        font-size: var(--font-size-12px, 12px);
+        font-weight: var(--font-weight-medium, 500);
+        line-height: 120%;
+        letter-spacing: 0.4px;
+    `,
+    [TYPOGRAPHY_VARIANTS_ENUM.PARAGRAPH_MEDIUM_CALLOUT]: `
+        font-size: var(--font-size-14px, 14px);
+        font-weight: var(--font-weight-medium, 500);
+        line-height: 120%;
+        letter-spacing: 0.15px;
+    `,
+    [TYPOGRAPHY_VARIANTS_ENUM.PARAGRAPH_MEDIUM_CODE]: `
+        font-family: var(--font-family-code, 'Fira Code');
+        font-size: var(--font-size-14px, 14px);
+        font-weight: var(--font-weight-medium, 500);
+        line-height: 16px;
+    `,
+    [TYPOGRAPHY_VARIANTS_ENUM.HEADING_SEMIBOLD_OVERLINE1]: `
+        font-size: var(--font-size-14px, 14px);
+        font-weight: var(--font-weight-650, 650);
+        line-height: 120%;
+        letter-spacing: 1.6px;
+        text-transform: uppercase;
+    `,
+    [TYPOGRAPHY_VARIANTS_ENUM.HEADING_SEMIBOLD_OVERLINE2]: `
+        font-size: var(--font-size-11px, 11px);
+        font-weight: var(--font-weight-650, 650);
+        line-height: 120%;
+        letter-spacing: 2px;
+        text-transform: uppercase;
+    `,
+    [TYPOGRAPHY_VARIANTS_ENUM.ACTION_SEMIBOLD_PRIMARY]: `
+        font-size: var(--font-size-14px, 14px);
+        font-weight: var(--font-weight-semibold, 600);
+        line-height: 160%;
+        letter-spacing: 0.4px;
+    `,
+    [TYPOGRAPHY_VARIANTS_ENUM.ACTION_SEMIBOLD_LINK]: `
+        font-size: var(--font-size-14px, 14px);
+        font-weight: var(--font-weight-semibold, 600);
+        line-height: 120%;
+        letter-spacing: 2px;
+        text-decoration: underline;
+    `,
+    [TYPOGRAPHY_VARIANTS_ENUM.BLOG_SEMIBOLD_TITLE]: `
+        font-size: var(--font-size-48px, 48px);
+        font-weight: var(--font-weight-semibold, 600);
+        line-height: 120%;
+        letter-spacing: 0.4px;
+    `,
+    [TYPOGRAPHY_VARIANTS_ENUM.BLOG_MEDIUM_REGULAR]: `
+        font-size: var(--font-size-18px, 18px);
+        font-weight: var(--font-weight-medium, 500);
+        line-height: 32px;
+        letter-spacing: 0.2px;
+    `,
+    [TYPOGRAPHY_VARIANTS_ENUM.BLOG_MEDIUM_BOLD]: `
+        font-size: var(--font-size-18px, 18px);
+        font-weight: var(--font-weight-semibold, 600);
+        line-height: 32px;
+        letter-spacing: 0.2px;
+    `,
+    [TYPOGRAPHY_VARIANTS_ENUM.BLOG_MEDIUM_ITALIC]: `
+        font-size: var(--font-size-18px, 18px);
+        font-weight: var(--font-weight-medium, 500);
+        line-height: 32px;
+        letter-spacing: 0.2px;
+        font-style: italic;
+    `,
+};
+
+/**
+ * Mapping of typography `variant` to `as` type, will be useful when Typography `as` is set to `auto`.
+ */
+export const TYPOGRAPHY_VARIANT_AS_MAPPING = {
+    [TYPOGRAPHY_VARIANTS_ENUM.HEADING_SEMIBOLD_H40]: TYPOGRAPHY_AS_ENUM.H1,
+    [TYPOGRAPHY_VARIANTS_ENUM.HEADING_SEMIBOLD_H36]: TYPOGRAPHY_AS_ENUM.H2,
+    [TYPOGRAPHY_VARIANTS_ENUM.HEADING_SEMIBOLD_H28]: TYPOGRAPHY_AS_ENUM.H3,
+    [TYPOGRAPHY_VARIANTS_ENUM.HEADING_SEMIBOLD_H24]: TYPOGRAPHY_AS_ENUM.H4,
+    [TYPOGRAPHY_VARIANTS_ENUM.HEADING_SEMIBOLD_H20]: TYPOGRAPHY_AS_ENUM.H5,
+    [TYPOGRAPHY_VARIANTS_ENUM.HEADING_SEMIBOLD_H16]: TYPOGRAPHY_AS_ENUM.H6,
+
+    [TYPOGRAPHY_VARIANTS_ENUM.PARAGRAPH_SEMIBOLD_BODY1]: TYPOGRAPHY_AS_ENUM.P,
+    [TYPOGRAPHY_VARIANTS_ENUM.PARAGRAPH_SEMIBOLD_BODY2]: TYPOGRAPHY_AS_ENUM.P,
+    [TYPOGRAPHY_VARIANTS_ENUM.PARAGRAPH_SEMIBOLD_BODY3]: TYPOGRAPHY_AS_ENUM.P,
+    [TYPOGRAPHY_VARIANTS_ENUM.PARAGRAPH_SEMIBOLD_BODY4]: TYPOGRAPHY_AS_ENUM.P,
+    [TYPOGRAPHY_VARIANTS_ENUM.PARAGRAPH_SEMIBOLD_LABEL]:
+        TYPOGRAPHY_AS_ENUM.LABEL,
+    [TYPOGRAPHY_VARIANTS_ENUM.PARAGRAPH_SEMIBOLD_LABEL2]:
+        TYPOGRAPHY_AS_ENUM.LABEL,
+    [TYPOGRAPHY_VARIANTS_ENUM.PARAGRAPH_SEMIBOLD_CALLOUT]: TYPOGRAPHY_AS_ENUM.P,
+
+    [TYPOGRAPHY_VARIANTS_ENUM.PARAGRAPH_MEDIUM_BODY1]: TYPOGRAPHY_AS_ENUM.P,
+    [TYPOGRAPHY_VARIANTS_ENUM.PARAGRAPH_MEDIUM_BODY2]: TYPOGRAPHY_AS_ENUM.P,
+    [TYPOGRAPHY_VARIANTS_ENUM.PARAGRAPH_MEDIUM_BODY3]: TYPOGRAPHY_AS_ENUM.P,
+    [TYPOGRAPHY_VARIANTS_ENUM.PARAGRAPH_MEDIUM_BODY4]: TYPOGRAPHY_AS_ENUM.P,
+
+    [TYPOGRAPHY_VARIANTS_ENUM.PARAGRAPH_MEDIUM_LABEL]: TYPOGRAPHY_AS_ENUM.LABEL,
+    [TYPOGRAPHY_VARIANTS_ENUM.PARAGRAPH_MEDIUM_LABEL2]:
+        TYPOGRAPHY_AS_ENUM.LABEL,
+    [TYPOGRAPHY_VARIANTS_ENUM.PARAGRAPH_MEDIUM_CALLOUT]: TYPOGRAPHY_AS_ENUM.P,
+
+    [TYPOGRAPHY_VARIANTS_ENUM.PARAGRAPH_MEDIUM_CODE]: TYPOGRAPHY_AS_ENUM.CODE,
+
+    [TYPOGRAPHY_VARIANTS_ENUM.HEADING_SEMIBOLD_OVERLINE1]:
+        TYPOGRAPHY_AS_ENUM.H6,
+    [TYPOGRAPHY_VARIANTS_ENUM.HEADING_SEMIBOLD_OVERLINE2]:
+        TYPOGRAPHY_AS_ENUM.H6,
+
+    [TYPOGRAPHY_VARIANTS_ENUM.ACTION_SEMIBOLD_PRIMARY]: TYPOGRAPHY_AS_ENUM.SPAN,
+    [TYPOGRAPHY_VARIANTS_ENUM.ACTION_SEMIBOLD_LINK]: TYPOGRAPHY_AS_ENUM.SPAN,
+
+    [TYPOGRAPHY_VARIANTS_ENUM.BLOG_SEMIBOLD_TITLE]: TYPOGRAPHY_AS_ENUM.H1,
+    [TYPOGRAPHY_VARIANTS_ENUM.BLOG_MEDIUM_REGULAR]: TYPOGRAPHY_AS_ENUM.P,
+    [TYPOGRAPHY_VARIANTS_ENUM.BLOG_MEDIUM_BOLD]: TYPOGRAPHY_AS_ENUM.P,
+    [TYPOGRAPHY_VARIANTS_ENUM.BLOG_MEDIUM_ITALIC]: TYPOGRAPHY_AS_ENUM.P,
+};

package/ui/elements/Typography/index.ts

@@ -0,0 +1,9 @@
+export {
+    TYPOGRAPHY_AS_ENUM,
+    TYPOGRAPHY_AS_LIST,
+    TYPOGRAPHY_VARIANTS,
+    TYPOGRAPHY_VARIANTS_ENUM,
+} from './constants';
+export { TYPOGRAPHY_VARIANT_AS_MAPPING } from './constants';
+export type { TypographyProps } from './types';
+export { default } from './Typography';