@diana-ui/typography - npm Package Compare versions

Comparing version 0.1.4 to 0.1.5

lib/index.d.ts

@@ -1,1 +0,1 @@
-export { H1, H2, H3, ButtonText, Text, TextHighlight, Description, DescriptionMedium, Label, LabelMedium, SectionTitle } from "./Typography";
+export * from "./Typography";

lib/index.js

@@ -1,1 +0,1 @@
-export { H1, H2, H3, ButtonText, Text, TextHighlight, Description, DescriptionMedium, Label, LabelMedium, SectionTitle } from "./Typography";
+export * from "./Typography";

lib/Typography.d.ts

@@ -7,12 +7,12 @@ import React from "react";
 }
-export declare const H1: React.FC<IPropsTitle>;
-export declare const H2: React.FC<IPropsTitle>;
-export declare const H3: React.FC<IPropsTitle>;
+export declare const PageTitle: React.FC<IPropsTitle>;
+export declare const Subtitle: React.FC<IPropsTitle>;
+export declare const SectionTitle: React.FC<IProps>;
 export declare const ButtonText: React.FC<IProps>;
-export declare const Text: React.FC<IProps>;
-export declare const TextHighlight: React.FC<IProps>;
+export declare const BodyHighlight: React.FC<IProps>;
+export declare const Body: React.FC<IProps>;
+export declare const DescriptionMedium: React.FC<IProps>;
 export declare const Description: React.FC<IProps>;
-export declare const DescriptionMedium: React.FC<IProps>;
+export declare const LabelMedium: React.FC<IProps>;
 export declare const Label: React.FC<IProps>;
-export declare const LabelMedium: React.FC<IProps>;
-export declare const SectionTitle: React.FC<IProps>;
+export declare const NotificationsNumbers: React.FC<IProps>;

lib/Typography.js

@@ -26,30 +26,28 @@ var __assign = (this && this.__assign) || function () {
 var styleSheet = function (theme) { return ({
-    h1: __assign({}, theme.typography.h1),
-    h2: __assign({}, theme.typography.h2),
-    h3: __assign({}, theme.typography.h3),
-    h4: __assign({}, theme.typography.h4),
-    h5: __assign({}, theme.typography.h5),
+    pageTitle: __assign({}, theme.typography.pageTitle),
+    subtitle: __assign({}, theme.typography.subtitle),
+    sectionTitle: __assign({}, theme.typography.sectionTitle),
     buttonText: __assign({}, theme.typography.buttonText),
+    bodyHighlight: __assign({}, theme.typography.bodyHighlight),
     body: __assign({}, theme.typography.body),
-    bodyHighlight: __assign({}, theme.typography.bodyHighlight),
+    descriptionMedium: __assign({}, theme.typography.descriptionMedium),
     description: __assign({}, theme.typography.description),
-    descriptionMedium: __assign({}, theme.typography.descriptionMedium),
+    labelMedium: __assign({}, theme.typography.labelMedium),
     label: __assign({}, theme.typography.label),
-    labelMedium: __assign({}, theme.typography.labelMedium),
-    sectionTitle: __assign({}, theme.typography.sectionTitle)
+    notificationsNumbers: __assign({}, theme.typography.notificationsNumbers)
 }); };
-export var H1 = function (_a) {
+export var PageTitle = function (_a) {
     var children = _a.children, className = _a.className, props = __rest(_a, ["children", "className"]);
     var _b = useStyles(styleSheet), styles = _b[0], cx = _b[1];
-    return (React.createElement("h1", __assign({ className: cx(styles.h1, className) }, props), children));
+    return (React.createElement("h1", __assign({ className: cx(styles.pageTitle, className) }, props), children));
 };
-export var H2 = function (_a) {
+export var Subtitle = function (_a) {
     var children = _a.children, className = _a.className, props = __rest(_a, ["children", "className"]);
     var _b = useStyles(styleSheet), styles = _b[0], cx = _b[1];
-    return (React.createElement("h2", __assign({ className: cx(styles.h2, className) }, props), children));
+    return (React.createElement("h2", __assign({ className: cx(styles.subtitle, className) }, props), children));
 };
-export var H3 = function (_a) {
+export var SectionTitle = function (_a) {
     var children = _a.children, className = _a.className, props = __rest(_a, ["children", "className"]);
     var _b = useStyles(styleSheet), styles = _b[0], cx = _b[1];
-    return (React.createElement("h3", __assign({ className: cx(styles.h3, className) }, props), children));
+    return (React.createElement("span", __assign({ className: cx(styles.sectionTitle, className) }, props), children));
 };
@@ -61,11 +59,16 @@ export var ButtonText = function (_a) {
 };
-export var Text = function (_a) {
+export var BodyHighlight = function (_a) {
     var children = _a.children, className = _a.className, props = __rest(_a, ["children", "className"]);
     var _b = useStyles(styleSheet), styles = _b[0], cx = _b[1];
+    return (React.createElement("span", __assign({ className: cx(styles.bodyHighlight, className) }, props), children));
+};
+export var Body = function (_a) {
+    var children = _a.children, className = _a.className, props = __rest(_a, ["children", "className"]);
+    var _b = useStyles(styleSheet), styles = _b[0], cx = _b[1];
     return (React.createElement("span", __assign({ className: cx(styles.body, className) }, props), children));
 };
-export var TextHighlight = function (_a) {
+export var DescriptionMedium = function (_a) {
     var children = _a.children, className = _a.className, props = __rest(_a, ["children", "className"]);
     var _b = useStyles(styleSheet), styles = _b[0], cx = _b[1];
-    return (React.createElement("span", __assign({ className: cx(styles.bodyHighlight, className) }, props), children));
+    return (React.createElement("span", __assign({ className: cx(styles.descriptionMedium, className) }, props), children));
 };
@@ -77,6 +80,6 @@ export var Description = function (_a) {
 };
-export var DescriptionMedium = function (_a) {
+export var LabelMedium = function (_a) {
     var children = _a.children, className = _a.className, props = __rest(_a, ["children", "className"]);
     var _b = useStyles(styleSheet), styles = _b[0], cx = _b[1];
-    return (React.createElement("span", __assign({ className: cx(styles.descriptionMedium, className) }, props), children));
+    return (React.createElement("span", __assign({ className: cx(styles.labelMedium, className) }, props), children));
 };
@@ -88,11 +91,6 @@ export var Label = function (_a) {
 };
-export var LabelMedium = function (_a) {
+export var NotificationsNumbers = function (_a) {
     var children = _a.children, className = _a.className, props = __rest(_a, ["children", "className"]);
     var _b = useStyles(styleSheet), styles = _b[0], cx = _b[1];
-    return (React.createElement("span", __assign({ className: cx(styles.labelMedium, className) }, props), children));
+    return (React.createElement("span", __assign({ className: cx(styles.notificationsNumbers, className) }, props), children));
 };
-export var SectionTitle = function (_a) {
-    var children = _a.children, className = _a.className, props = __rest(_a, ["children", "className"]);
-    var _b = useStyles(styleSheet), styles = _b[0], cx = _b[1];
-    return (React.createElement("span", __assign({ className: cx(styles.sectionTitle, className) }, props), children));
-};

module/index.d.ts

@@ -1,1 +0,1 @@
-export { H1, H2, H3, ButtonText, Text, TextHighlight, Description, DescriptionMedium, Label, LabelMedium, SectionTitle } from "./Typography";
+export * from "./Typography";

module/index.js

@@ -1,1 +0,1 @@
-export { H1, H2, H3, ButtonText, Text, TextHighlight, Description, DescriptionMedium, Label, LabelMedium, SectionTitle } from "./Typography";
+export * from "./Typography";

module/Typography.d.ts

@@ -7,12 +7,12 @@ import React from "react";
 }
-export declare const H1: React.FC<IPropsTitle>;
-export declare const H2: React.FC<IPropsTitle>;
-export declare const H3: React.FC<IPropsTitle>;
+export declare const PageTitle: React.FC<IPropsTitle>;
+export declare const Subtitle: React.FC<IPropsTitle>;
+export declare const SectionTitle: React.FC<IProps>;
 export declare const ButtonText: React.FC<IProps>;
-export declare const Text: React.FC<IProps>;
-export declare const TextHighlight: React.FC<IProps>;
+export declare const BodyHighlight: React.FC<IProps>;
+export declare const Body: React.FC<IProps>;
+export declare const DescriptionMedium: React.FC<IProps>;
 export declare const Description: React.FC<IProps>;
-export declare const DescriptionMedium: React.FC<IProps>;
+export declare const LabelMedium: React.FC<IProps>;
 export declare const Label: React.FC<IProps>;
-export declare const LabelMedium: React.FC<IProps>;
-export declare const SectionTitle: React.FC<IProps>;
+export declare const NotificationsNumbers: React.FC<IProps>;

module/Typography.js

@@ -15,30 +15,28 @@ var __rest = (this && this.__rest) || function (s, e) {
 const styleSheet = theme => ({
-    h1: Object.assign({}, theme.typography.h1),
-    h2: Object.assign({}, theme.typography.h2),
-    h3: Object.assign({}, theme.typography.h3),
-    h4: Object.assign({}, theme.typography.h4),
-    h5: Object.assign({}, theme.typography.h5),
+    pageTitle: Object.assign({}, theme.typography.pageTitle),
+    subtitle: Object.assign({}, theme.typography.subtitle),
+    sectionTitle: Object.assign({}, theme.typography.sectionTitle),
     buttonText: Object.assign({}, theme.typography.buttonText),
+    bodyHighlight: Object.assign({}, theme.typography.bodyHighlight),
     body: Object.assign({}, theme.typography.body),
-    bodyHighlight: Object.assign({}, theme.typography.bodyHighlight),
+    descriptionMedium: Object.assign({}, theme.typography.descriptionMedium),
     description: Object.assign({}, theme.typography.description),
-    descriptionMedium: Object.assign({}, theme.typography.descriptionMedium),
+    labelMedium: Object.assign({}, theme.typography.labelMedium),
     label: Object.assign({}, theme.typography.label),
-    labelMedium: Object.assign({}, theme.typography.labelMedium),
-    sectionTitle: Object.assign({}, theme.typography.sectionTitle)
+    notificationsNumbers: Object.assign({}, theme.typography.notificationsNumbers)
 });
-export const H1 = (_a) => {
+export const PageTitle = (_a) => {
     var { children, className } = _a, props = __rest(_a, ["children", "className"]);
     const [styles, cx] = useStyles(styleSheet);
-    return (React.createElement("h1", Object.assign({ className: cx(styles.h1, className) }, props), children));
+    return (React.createElement("h1", Object.assign({ className: cx(styles.pageTitle, className) }, props), children));
 };
-export const H2 = (_a) => {
+export const Subtitle = (_a) => {
     var { children, className } = _a, props = __rest(_a, ["children", "className"]);
     const [styles, cx] = useStyles(styleSheet);
-    return (React.createElement("h2", Object.assign({ className: cx(styles.h2, className) }, props), children));
+    return (React.createElement("h2", Object.assign({ className: cx(styles.subtitle, className) }, props), children));
 };
-export const H3 = (_a) => {
+export const SectionTitle = (_a) => {
     var { children, className } = _a, props = __rest(_a, ["children", "className"]);
     const [styles, cx] = useStyles(styleSheet);
-    return (React.createElement("h3", Object.assign({ className: cx(styles.h3, className) }, props), children));
+    return (React.createElement("span", Object.assign({ className: cx(styles.sectionTitle, className) }, props), children));
 };
@@ -50,11 +48,16 @@ export const ButtonText = (_a) => {
 };
-export const Text = (_a) => {
+export const BodyHighlight = (_a) => {
     var { children, className } = _a, props = __rest(_a, ["children", "className"]);
     const [styles, cx] = useStyles(styleSheet);
+    return (React.createElement("span", Object.assign({ className: cx(styles.bodyHighlight, className) }, props), children));
+};
+export const Body = (_a) => {
+    var { children, className } = _a, props = __rest(_a, ["children", "className"]);
+    const [styles, cx] = useStyles(styleSheet);
     return (React.createElement("span", Object.assign({ className: cx(styles.body, className) }, props), children));
 };
-export const TextHighlight = (_a) => {
+export const DescriptionMedium = (_a) => {
     var { children, className } = _a, props = __rest(_a, ["children", "className"]);
     const [styles, cx] = useStyles(styleSheet);
-    return (React.createElement("span", Object.assign({ className: cx(styles.bodyHighlight, className) }, props), children));
+    return (React.createElement("span", Object.assign({ className: cx(styles.descriptionMedium, className) }, props), children));
 };
@@ -66,6 +69,6 @@ export const Description = (_a) => {
 };
-export const DescriptionMedium = (_a) => {
+export const LabelMedium = (_a) => {
     var { children, className } = _a, props = __rest(_a, ["children", "className"]);
     const [styles, cx] = useStyles(styleSheet);
-    return (React.createElement("span", Object.assign({ className: cx(styles.descriptionMedium, className) }, props), children));
+    return (React.createElement("span", Object.assign({ className: cx(styles.labelMedium, className) }, props), children));
 };
@@ -77,11 +80,6 @@ export const Label = (_a) => {
 };
-export const LabelMedium = (_a) => {
+export const NotificationsNumbers = (_a) => {
     var { children, className } = _a, props = __rest(_a, ["children", "className"]);
     const [styles, cx] = useStyles(styleSheet);
-    return (React.createElement("span", Object.assign({ className: cx(styles.labelMedium, className) }, props), children));
+    return (React.createElement("span", Object.assign({ className: cx(styles.notificationsNumbers, className) }, props), children));
 };
-export const SectionTitle = (_a) => {
-    var { children, className } = _a, props = __rest(_a, ["children", "className"]);
-    const [styles, cx] = useStyles(styleSheet);
-    return (React.createElement("span", Object.assign({ className: cx(styles.sectionTitle, className) }, props), children));
-};

package.json

 {
   "name": "@diana-ui/typography",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "main": "lib/index.js",
@@ -15,4 +15,4 @@ "module": "module/index.js",
   "dependencies": {
-    "@diana-ui/base": "^0.1.4",
-    "@diana-ui/types": "^0.1.3"
+    "@diana-ui/base": "^0.1.5",
+    "@diana-ui/types": "^0.1.4"
   },
@@ -44,3 +44,3 @@ "scripts": {
   },
-  "gitHead": "3c9dab24f1e99b7fb8eabbb28b1314bb21612616"
+  "gitHead": "cfc3e13de277b94b9b7c4c9e275dbb79e2846cc1"
 }

No alert changes

Worsened metrics

Total package byte prevSize

12548

decreased by-2.53%

Lines of code

211

decreased by-1.86%

Dependency changes

• Updated@diana-ui/base@^0.1.5

• Updated@diana-ui/types@^0.1.4