@nuskin/marketing-components 1.23.1 → 1.24.0

package/dist/typography/Typography.d.ts

@@ -0,0 +1,18 @@
+import { TypographyProps } from './types';
+/**
+ * Centralized Typography Component
+ *
+ * Supports multiple variants with responsive font sizes for desktop and mobile/tablet.
+ * Includes ADA compliance features like semantic HTML and ARIA attributes.
+ *
+ * @param variant - Typography variant
+ * @param inputText - Text content to display
+ * @param color - Text color (hex code, default: #1D1D1B)
+ * @param className - Additional CSS class
+ * @param role - ARIA role for accessibility
+ * @param ariaLabel - ARIA label for screen readers
+ * @param ariaDescribedBy - ARIA described-by attribute
+ * @param dataTestId - Data attribute for testing
+ */
+export declare const Typography: ({ variant, inputText, color, className, dataTestId, ...props }: TypographyProps) => import("react/jsx-runtime").JSX.Element;
+export default Typography;

package/dist/typography/Typography.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import { Typography } from './Typography';
+declare const meta: Meta<typeof Typography>;
+export default meta;
+type Story = StoryObj<typeof Typography>;
+export declare const Default: Story;

package/dist/typography/Typography.styled.d.ts

@@ -0,0 +1,68 @@
+import { TypographyStyledProps } from './types';
+export declare const typographyVariants: {
+    h1: {
+        desktop: {
+            fontSize: string;
+            lineHeight: string;
+        };
+        mobile: {
+            fontSize: string;
+            lineHeight: string;
+        };
+        fontFamily: string;
+    };
+    h2: {
+        desktop: {
+            fontSize: string;
+            lineHeight: string;
+        };
+        mobile: {
+            fontSize: string;
+            lineHeight: string;
+        };
+        fontFamily: string;
+    };
+    h3: {
+        desktop: {
+            fontSize: string;
+            lineHeight: string;
+        };
+        mobile: {
+            fontSize: string;
+            lineHeight: string;
+        };
+        fontFamily: string;
+    };
+    body: {
+        desktop: {
+            fontSize: string;
+            lineHeight: string;
+        };
+        mobile: {
+            fontSize: string;
+            lineHeight: string;
+        };
+        fontFamily: string;
+    };
+    disclaimer: {
+        desktop: {
+            fontSize: string;
+            lineHeight: string;
+        };
+        mobile: {
+            fontSize: string;
+            lineHeight: string;
+        };
+        fontFamily: string;
+    };
+};
+/**
+ * Common text element styles for rich content
+ * Includes styling for paragraphs, links, lists, and text formatting
+ * Can be imported and used in other styled components
+ */
+export declare const commonTextStyles = "\n    p {\n        margin: 0;\n        padding: 0;\n        font-size: 16px;\n        line-height: 22px;\n        font-family: 'Inter', sans-serif;\n    }\n\n    @media (max-width: 768px) {\n        p {\n            font-size: 16px;\n            line-height: 22px;\n        }\n    }\n\n    strong, b {\n        font-weight: 600;\n    }\n\n    em, i {\n        font-style: italic;\n    }\n\n    a {\n        color: #008ab0;\n        text-decoration: underline;\n\n        &:hover {\n            opacity: 0.8;\n        }\n    }\n\n    ul, ol {\n        margin: 16px 0;\n        padding-left: 24px;\n    }\n\n    li {\n        margin: 8px 0;\n    }\n";
+export declare const TypographyStyled: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & TypographyStyledProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/typography/index.d.ts

@@ -0,0 +1,3 @@
+export { default as Typography } from './Typography';
+export { typographyVariants } from './Typography.styled';
+export * from './types';

package/dist/typography/specs/Typography.spec.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/typography/types.d.ts

@@ -0,0 +1,18 @@
+import { ReactNode, CSSProperties } from 'react';
+export type TypographyVariant = 'h1' | 'h2' | 'h3' | 'body' | 'disclaimer';
+export interface TypographyStyledProps {
+    variant?: TypographyVariant;
+    color?: string;
+}
+export interface TypographyProps {
+    variant?: TypographyVariant;
+    inputText?: ReactNode;
+    color?: string;
+    className?: string;
+    role?: string;
+    ariaLabel?: string;
+    ariaDescribedBy?: string;
+    dataTestId?: string;
+    style?: CSSProperties;
+    [key: string]: any;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@nuskin/marketing-components",
-    "version": "1.23.1",
+    "version": "1.24.0",
     "description": "A React based component library for marketing components to use with content stack pagebuilding",
     "types": "dist/index.d.ts",
     "main": "dist/index.js",