@votercircle/clay-v2-typography 1.0.0

package/heading/heading.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+export declare type HeadingProps = {
+    className?: string;
+    variant?: 'h1' | 'h2' | 'h3' | 'h4';
+    bold?: boolean;
+    underline?: boolean;
+    color?: 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'grey' | 'black';
+    align?: 'center' | 'left' | 'right';
+    style?: React.CSSProperties;
+    children?: any;
+};
+export declare function Heading({ className, variant, bold, underline, color, align, children, ...rest }: HeadingProps): JSX.Element;

package/heading/heading.js

@@ -0,0 +1,50 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+var _a, _b, _c, _d, _e, _f, _g;
+exports.__esModule = true;
+exports.Heading = void 0;
+var react_1 = __importDefault(require("react"));
+var styled_components_1 = __importDefault(require("styled-components"));
+var cui_theme_provider_1 = require("@clay/cui.theme-provider");
+var HeadingWrapper = styled_components_1["default"].div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  font-family: arial;\n\n  &._bold {\n    font-weight: bold;\n  }\n\n  &._underline {\n    text-decoration: underline;\n  }\n\n  &._h4 {\n    font-size: 20px;\n    line-height: 2.1rem;\n  }\n  &._h3 {\n    font-size: 24px;\n    line-height: 2.25rem;\n  }\n  &._h2 {\n    font-size: 32px;\n    line-height: 3rem;\n  }\n  &._h1 {\n    font-size: 48px;\n    line-height: 4.5rem;\n  }\n\n  &._primary {\n    color: var(--pdi-clay-theme-primary-main, ", ");\n  }\n\n  &._secondary {\n    color: var(--pdi-clay-theme-secondary-main, ", ");\n  }\n\n  &._success {\n    color: var(--pdi-clay-theme-success-main, ", ");\n  }\n\n  &._danger {\n    color: var(--pdi-clay-theme-danger-main, ", ");\n  }\n\n  &._warning {\n    color: var(--pdi-clay-theme-warning-main, ", ");\n  }\n\n  &._grey {\n    color: var(--pdi-clay-theme-grey-main, ", ");\n  }\n\n  &._black {\n    color: var(--pdi-clay-theme-black-main, ", ");\n  }\n\n  &._align-left {\n    text-align: left;\n  }\n  &._align-right {\n    text-align: right;\n  }\n  &._align-center {\n    text-align: center;\n  }\n"], ["\n  font-family: arial;\n\n  &._bold {\n    font-weight: bold;\n  }\n\n  &._underline {\n    text-decoration: underline;\n  }\n\n  &._h4 {\n    font-size: 20px;\n    line-height: 2.1rem;\n  }\n  &._h3 {\n    font-size: 24px;\n    line-height: 2.25rem;\n  }\n  &._h2 {\n    font-size: 32px;\n    line-height: 3rem;\n  }\n  &._h1 {\n    font-size: 48px;\n    line-height: 4.5rem;\n  }\n\n  &._primary {\n    color: var(--pdi-clay-theme-primary-main, ", ");\n  }\n\n  &._secondary {\n    color: var(--pdi-clay-theme-secondary-main, ", ");\n  }\n\n  &._success {\n    color: var(--pdi-clay-theme-success-main, ", ");\n  }\n\n  &._danger {\n    color: var(--pdi-clay-theme-danger-main, ", ");\n  }\n\n  &._warning {\n    color: var(--pdi-clay-theme-warning-main, ", ");\n  }\n\n  &._grey {\n    color: var(--pdi-clay-theme-grey-main, ", ");\n  }\n\n  &._black {\n    color: var(--pdi-clay-theme-black-main, ", ");\n  }\n\n  &._align-left {\n    text-align: left;\n  }\n  &._align-right {\n    text-align: right;\n  }\n  &._align-center {\n    text-align: center;\n  }\n"])), (_a = cui_theme_provider_1.DefaultPalette === null || cui_theme_provider_1.DefaultPalette === void 0 ? void 0 : cui_theme_provider_1.DefaultPalette.primary) === null || _a === void 0 ? void 0 : _a.main, (_b = cui_theme_provider_1.DefaultPalette === null || cui_theme_provider_1.DefaultPalette === void 0 ? void 0 : cui_theme_provider_1.DefaultPalette.secondary) === null || _b === void 0 ? void 0 : _b.main, (_c = cui_theme_provider_1.DefaultPalette === null || cui_theme_provider_1.DefaultPalette === void 0 ? void 0 : cui_theme_provider_1.DefaultPalette.success) === null || _c === void 0 ? void 0 : _c.main, (_d = cui_theme_provider_1.DefaultPalette === null || cui_theme_provider_1.DefaultPalette === void 0 ? void 0 : cui_theme_provider_1.DefaultPalette.danger) === null || _d === void 0 ? void 0 : _d.main, (_e = cui_theme_provider_1.DefaultPalette === null || cui_theme_provider_1.DefaultPalette === void 0 ? void 0 : cui_theme_provider_1.DefaultPalette.warning) === null || _e === void 0 ? void 0 : _e.main, (_f = cui_theme_provider_1.DefaultPalette === null || cui_theme_provider_1.DefaultPalette === void 0 ? void 0 : cui_theme_provider_1.DefaultPalette.grey) === null || _f === void 0 ? void 0 : _f.main, (_g = cui_theme_provider_1.DefaultPalette === null || cui_theme_provider_1.DefaultPalette === void 0 ? void 0 : cui_theme_provider_1.DefaultPalette.black) === null || _g === void 0 ? void 0 : _g.main);
+function Heading(_a) {
+    var className = _a.className, _b = _a.variant, variant = _b === void 0 ? 'h3' : _b, bold = _a.bold, underline = _a.underline, color = _a.color, align = _a.align, children = _a.children, rest = __rest(_a, ["className", "variant", "bold", "underline", "color", "align", "children"]);
+    return (react_1["default"].createElement(HeadingWrapper, __assign({ className: [
+            className,
+            variant && '_' + variant,
+            bold && '_bold',
+            underline && '_underline',
+            color && '_' + color,
+            align && '_align-' + align,
+        ].join(' ') }, rest), children));
+}
+exports.Heading = Heading;
+var templateObject_1;

package/heading/index.d.ts

@@ -0,0 +1,2 @@
+export { Heading } from './heading';
+export { HeadingProps } from './heading';

package/heading/index.js

@@ -0,0 +1,16 @@
+"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];
+}));
+exports.__esModule = true;
+exports.Heading = void 0;
+var heading_1 = require("./heading");
+__createBinding(exports, heading_1, "Heading");

package/index.d.ts

@@ -0,0 +1,3 @@
+export * from './heading';
+export * from './text';
+export * from './paragraph';

package/index.js

@@ -0,0 +1,19 @@
+"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);
+};
+exports.__esModule = true;
+__exportStar(require("./heading"), exports);
+__exportStar(require("./text"), exports);
+__exportStar(require("./paragraph"), exports);

package/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "@votercircle/clay-v2-typography",
+  "version": "1.0.0",
+  "main": "index.js",
+  "types": "index.d.ts",
+  "peerDependencies": {
+    "react": ">=16",
+    "react-dom": ">=16",
+    "styled-components": ">=5"
+  }
+}

package/paragraph/index.d.ts

@@ -0,0 +1,2 @@
+export { Paragraph } from './paragraph';
+export { ParagraphProps } from './paragraph';

package/paragraph/index.js

@@ -0,0 +1,16 @@
+"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];
+}));
+exports.__esModule = true;
+exports.Paragraph = void 0;
+var paragraph_1 = require("./paragraph");
+__createBinding(exports, paragraph_1, "Paragraph");

package/paragraph/paragraph.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export interface ParagraphProps extends React.HTMLAttributes<HTMLParagraphElement> {
+    className?: string;
+    children: any;
+    style?: React.CSSProperties;
+}
+export declare function Paragraph({ children, ...rest }: ParagraphProps): JSX.Element;

package/paragraph/paragraph.js

@@ -0,0 +1,41 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+exports.Paragraph = void 0;
+var react_1 = __importDefault(require("react"));
+var styled_components_1 = __importDefault(require("styled-components"));
+var ParagraphStyled = styled_components_1["default"].p(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  font-size: 16px;\n  font-family: arial;\n  line-height: 1.5rem;\n"], ["\n  font-size: 16px;\n  font-family: arial;\n  line-height: 1.5rem;\n"])));
+function Paragraph(_a) {
+    var children = _a.children, rest = __rest(_a, ["children"]);
+    return react_1["default"].createElement(ParagraphStyled, __assign({}, rest), children);
+}
+exports.Paragraph = Paragraph;
+var templateObject_1;

package/text/index.d.ts

@@ -0,0 +1,2 @@
+export { Text, TextProps } from './text';
+export { TextVariantType } from './text.types';

package/text/index.js

@@ -0,0 +1,16 @@
+"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];
+}));
+exports.__esModule = true;
+exports.Text = void 0;
+var text_1 = require("./text");
+__createBinding(exports, text_1, "Text");

package/text/text.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { TextVariantType } from './text.types';
+export interface TextProps extends React.HTMLAttributes<HTMLSpanElement> {
+    variant?: TextVariantType;
+    bold?: boolean;
+    underline?: boolean;
+    className?: string;
+    color?: 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'grey' | 'black';
+    style?: React.CSSProperties;
+    children?: any;
+}
+export declare const Text: React.ForwardRefExoticComponent<TextProps & React.RefAttributes<HTMLSpanElement>>;

package/text/text.js

@@ -0,0 +1,51 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+var _a, _b, _c, _d, _e, _f, _g;
+exports.__esModule = true;
+exports.Text = void 0;
+var react_1 = __importDefault(require("react"));
+var styled_components_1 = __importDefault(require("styled-components"));
+var cui_theme_provider_1 = require("@clay/cui.theme-provider");
+var TextWrapper = styled_components_1["default"].span(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  font-family: arial;\n\n  &._bold {\n    font-weight: bold;\n  }\n\n  &._underline {\n    text-decoration: underline;\n  }\n\n  &._b4 {\n    font-size: 12px;\n    line-height: 1rem;\n  }\n  &._b3 {\n    font-size: 14px;\n    line-height: 1.25rem;\n  }\n  &._b2 {\n    font-size: 16px;\n    line-height: 1.5rem;\n  }\n  &._b1 {\n    font-size: 20px;\n    line-height: 2rem;\n  }\n\n  &._primary {\n    color: var(--pdi-clay-theme-primary-main, ", ");\n  }\n\n  &._secondary {\n    color: var(--pdi-clay-theme-secondary-main, ", ");\n  }\n\n  &._success {\n    color: var(--pdi-clay-theme-success-main, ", ");\n  }\n\n  &._danger {\n    color: var(--pdi-clay-theme-danger-main, ", ");\n  }\n\n  &._warning {\n    color: var(--pdi-clay-theme-warning-main, ", ");\n  }\n\n  &._grey {\n    color: var(--pdi-clay-theme-grey-main, ", ");\n  }\n\n  &._black {\n    color: var(--pdi-clay-theme-black-main, ", ");\n  }\n"], ["\n  font-family: arial;\n\n  &._bold {\n    font-weight: bold;\n  }\n\n  &._underline {\n    text-decoration: underline;\n  }\n\n  &._b4 {\n    font-size: 12px;\n    line-height: 1rem;\n  }\n  &._b3 {\n    font-size: 14px;\n    line-height: 1.25rem;\n  }\n  &._b2 {\n    font-size: 16px;\n    line-height: 1.5rem;\n  }\n  &._b1 {\n    font-size: 20px;\n    line-height: 2rem;\n  }\n\n  &._primary {\n    color: var(--pdi-clay-theme-primary-main, ", ");\n  }\n\n  &._secondary {\n    color: var(--pdi-clay-theme-secondary-main, ", ");\n  }\n\n  &._success {\n    color: var(--pdi-clay-theme-success-main, ", ");\n  }\n\n  &._danger {\n    color: var(--pdi-clay-theme-danger-main, ", ");\n  }\n\n  &._warning {\n    color: var(--pdi-clay-theme-warning-main, ", ");\n  }\n\n  &._grey {\n    color: var(--pdi-clay-theme-grey-main, ", ");\n  }\n\n  &._black {\n    color: var(--pdi-clay-theme-black-main, ", ");\n  }\n"])), (_a = cui_theme_provider_1.DefaultPalette === null || cui_theme_provider_1.DefaultPalette === void 0 ? void 0 : cui_theme_provider_1.DefaultPalette.primary) === null || _a === void 0 ? void 0 : _a.main, (_b = cui_theme_provider_1.DefaultPalette === null || cui_theme_provider_1.DefaultPalette === void 0 ? void 0 : cui_theme_provider_1.DefaultPalette.secondary) === null || _b === void 0 ? void 0 : _b.main, (_c = cui_theme_provider_1.DefaultPalette === null || cui_theme_provider_1.DefaultPalette === void 0 ? void 0 : cui_theme_provider_1.DefaultPalette.success) === null || _c === void 0 ? void 0 : _c.main, (_d = cui_theme_provider_1.DefaultPalette === null || cui_theme_provider_1.DefaultPalette === void 0 ? void 0 : cui_theme_provider_1.DefaultPalette.danger) === null || _d === void 0 ? void 0 : _d.main, (_e = cui_theme_provider_1.DefaultPalette === null || cui_theme_provider_1.DefaultPalette === void 0 ? void 0 : cui_theme_provider_1.DefaultPalette.warning) === null || _e === void 0 ? void 0 : _e.main, (_f = cui_theme_provider_1.DefaultPalette === null || cui_theme_provider_1.DefaultPalette === void 0 ? void 0 : cui_theme_provider_1.DefaultPalette.grey) === null || _f === void 0 ? void 0 : _f.main, (_g = cui_theme_provider_1.DefaultPalette === null || cui_theme_provider_1.DefaultPalette === void 0 ? void 0 : cui_theme_provider_1.DefaultPalette.black) === null || _g === void 0 ? void 0 : _g.main);
+exports.Text = react_1["default"].forwardRef(function (_a, ref) {
+    var className = _a.className, variant = _a.variant, bold = _a.bold, underline = _a.underline, color = _a.color, children = _a.children, rest = __rest(_a, ["className", "variant", "bold", "underline", "color", "children"]);
+    return (react_1["default"].createElement(TextWrapper, __assign({ className: [
+            className,
+            variant && '_' + variant,
+            bold && '_bold',
+            underline && '_underline',
+            color && '_' + color,
+        ].join(' ') }, rest, { ref: ref }), children));
+});
+exports.Text.defaultProps = {
+    variant: 'b4'
+};
+var templateObject_1;

package/text/text.types.d.ts

@@ -0,0 +1,3 @@
+declare const variantList: readonly ["b1", "b2", "b3", "b4"];
+export declare type TextVariantType = typeof variantList[number];
+export {};

package/text/text.types.js

@@ -0,0 +1,3 @@
+"use strict";
+exports.__esModule = true;
+var variantList = ['b1', 'b2', 'b3', 'b4'];