@mysetup/typography 1.0.0

package/dist/Typography/Typography.d.ts

@@ -0,0 +1,38 @@
+import "../styles.css";
+import { type ReactNode, type ElementType, type HTMLAttributes } from "react";
+export declare const TypographyVariant: {
+    headline1: string;
+    headline2: string;
+    headline3: string;
+    headline4: string;
+    headline5: string;
+    headline6: string;
+    headline7: string;
+    paragraph: string;
+    "paragraph-small": string;
+    eyebrow: string;
+    disclaimer: string;
+    usecode: string;
+    quotes: string;
+};
+export type TypographyVariant = keyof typeof TypographyVariant;
+export type TypographyProps<T extends HTMLElement = any> = HTMLAttributes<T> & {
+    /**
+     * The html element or component to render
+     */
+    as?: ElementType<T>;
+    /**
+     * The text to render
+     */
+    children: ReactNode;
+    /**
+     * Use alternate display font
+     */
+    display?: boolean;
+    /**
+     * The visual variant to display
+     */
+    variant?: TypographyVariant;
+};
+export declare const Typography: ({ as, children, className, display, variant, ...props }: TypographyProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+//# sourceMappingURL=Typography.d.ts.map

package/dist/Typography/Typography.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Typography.d.ts","sourceRoot":"","sources":["../../Typography/Typography.tsx"],"names":[],"mappings":"AAAA,OAAO,eAAe,CAAC;AACvB,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,WAAW,EAAE,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AAI9E,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;CAc7B,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG,MAAM,OAAO,iBAAiB,CAAC;AAG/D,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,WAAW,GAAG,GAAG,IAAI,cAAc,CAAC,CAAC,CAAC,GAAG;IAC3E;;OAEG;IACH,EAAE,CAAC,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC;IACpB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,OAAO,CAAC,EAAE,iBAAiB,CAAC;CAC/B,CAAC;AAEF,eAAO,MAAM,UAAU,4DAOpB,eAAe,2FASjB,CAAC"}

package/dist/Typography/Typography.js

@@ -0,0 +1,48 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Typography = exports.TypographyVariant = void 0;
+require("../styles.css");
+var react_1 = require("react");
+var classnames_1 = require("@mysetup/classnames");
+exports.TypographyVariant = {
+    headline1: "headline1",
+    headline2: "headline2",
+    headline3: "headline3",
+    headline4: "headline4",
+    headline5: "headline5",
+    headline6: "headline6",
+    headline7: "headline7",
+    paragraph: "paragraph",
+    "paragraph-small": "paragraph-small",
+    eyebrow: "eyebrow",
+    disclaimer: "disclaimer",
+    usecode: "usecode",
+    quotes: "quotes",
+};
+var Typography = function (_a) {
+    var _b = _a.as, as = _b === void 0 ? "p" : _b, children = _a.children, className = _a.className, _c = _a.display, display = _c === void 0 ? false : _c, _d = _a.variant, variant = _d === void 0 ? "paragraph" : _d, props = __rest(_a, ["as", "children", "className", "display", "variant"]);
+    return (0, react_1.createElement)(as, __assign({ className: (0, classnames_1.classNames)(variant, display && "display", className) }, props), children);
+};
+exports.Typography = Typography;

package/dist/Typography/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./Typography";
+//# sourceMappingURL=index.d.ts.map

package/dist/Typography/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../Typography/index.tsx"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC"}

package/dist/Typography/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Typography"), exports);

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./Typography";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../index.tsx"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC"}

package/dist/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Typography"), exports);

package/dist/styles.css

@@ -0,0 +1,86 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+    :root {
+        --font-poppins: var(--next-font-poppins, "Poppins", sans-serif);
+
+        --font-sans: var(--font-poppins);
+    }
+
+    [data-brand="MYPROFILE"] {
+        --font-display: var(--font-poppins);
+    }
+
+    .headline1 {
+        @apply lg:text-[34px] lg:leading-[42px] text-[30px] leading-[36px];
+    }
+
+    .headline2 {
+        @apply lg:text-[28px] lg:leading-[36px] text-[22px] leading-[26px];
+    }
+
+    .headline3 {
+        @apply lg:text-[24px] lg:leading-[28px] text-[20px] leading-[25px];
+    }
+
+    .headline4 {
+        @apply lg:text-[17px] lg:leading-[23px] uppercase  text-[15px] leading-[22px];
+    }
+
+    .headline5 {
+        @apply lg:text-[17px] lg:leading-[25px] text-[15px] leading-[22px];
+    }
+
+    .headline6 {
+        @apply lg:text-[16px] lg:leading-[24px] text-[13px] leading-[20px];
+    }
+
+    .headline7 {
+        @apply lg:text-[12px] lg:leading-[18px] text-[11px] leading-[26px];
+    }
+
+    .paragraph {
+        @apply text-[14px] leading-[21px] tracking-[0.3px];
+    }
+
+    .paragraph-small {
+        @apply text-[12px] leading-[18px] tracking-[0.6px];
+    }
+
+    .eyebrow {
+        @apply text-[11px] leading-[21px] tracking-[1.09px];
+    }
+
+    .disclaimer {
+        @apply text-[12px] leading-[18px] tracking-[0.13px];
+    }
+
+    .disclaimer-small {
+        @apply text-[10px] leading-[18px] tracking-[0.11px];
+    }
+    .usecode {
+        @apply text-[14px] leading-[21px] tracking-[0.3px];
+    }
+    .quotes {
+        @apply text-[24px] leading-[21px] tracking-[0.3px] italic;
+    }
+
+    /*Update leading for headline display classes*/
+    [class*="headline"].display {
+        font-family: var(--font-display);
+        @apply leading-[44px];
+    }
+
+    /*TODO - TEMP Style - Remove once links SB component is created*/
+    .link {
+        @apply text-[14px] leading-[21px];
+    }
+    .link-small {
+        @apply !text-[10px] leading-[21px];
+    }
+    .text-default-color {
+        @apply text-[#3F51B5];
+    }
+}

package/package.json

@@ -0,0 +1,52 @@
+{
+    "name": "@mysetup/typography",
+    "version": "1.0.0",
+    "license": "MIT",
+    "main": "dist/index.js",
+    "files": [
+        "dist"
+    ],
+    "exports": {
+        ".": {
+            "types": "./dist/index.d.ts",
+            "import": "./dist/index.js",
+            "require": "./dist/index.js"
+        },
+        "./style.css": "./style.css",
+        "./package.json": "./package.json"
+    },
+    "scripts": {
+        "build": "rm -rf ./dist && tsc -p tsconfig.build.json && cp 'styles.css' 'dist/'",
+        "lint": "eslint .",
+        "typecheck": "tsc --noEmit",
+        "test": "jest",
+        "test:coverage": "jest --coverage",
+        "format": "prettier --write \"**/*.{ts,tsx,md,js,mjs,json}\"",
+        "checks": "pnpm typecheck && pnpm lint && pnpm test",
+        "clean": "rm -rf node_modules .swc dist pnpm-lock.yaml && echo \"✅  Successfully removed \""
+    },
+    "dependencies": {
+        "@mysetup/classnames": "latest",
+        "react": "^18.3.1"
+    },
+    "devDependencies": {
+        "@mysetup/eslint-config": "latest",
+        "@mysetup/jest-config": "latest",
+        "@mysetup/prettier-config": "latest",
+        "@mysetup/tsconfig": "latest",
+        "@testing-library/react": "^16.0.1",
+        "@types/jest": "^29.5.14",
+        "@types/jest-axe": "^3.5.9",
+        "@types/react": "^18.3.12",
+        "eslint": "8.57.0",
+        "jest": "^29.7.0",
+        "jest-axe": "^9.0.0",
+        "react-dom": "^18.3.1",
+        "typescript": "^5.6.3"
+    },
+    "prettier": "@mysetup/prettier-config",
+    "engines": {
+        "node": ">=18.0.0"
+    },
+    "packageManager": "pnpm@9.9.0"
+}