@elvia/elvis-typography - npm Package Compare versions

Comparing version 2.2.0 to 2.3.1

CHANGELOG.md

 # Elvia Typography Changelog
 
+## 2.3.1 (29.08.22)
+
+### Patch
+
+- Now generating up a Typescript union type for all the typography names.
+
+## 2.3.0 (18.08.22)
+
+### New feature
+
+- All our typographies are now available through not only sm, md, lg etc. abbreviations, but also through the
+  full size name; small, medium, large etc.
+
 ## 2.2.0 (23.05.22)
@@ -4,0 +17,0 @@

dist/elviaTypography.d.ts

@@ -6,3 +6,3 @@ // THIS FILE IS AUTOMATICALLY GENERATED AND WILL BE OVERWRITTEN.
  * elvis-typography package containing typographies to use in Elvia's design profile.
- * Typographies are provided as objects containing css properties.
+ * Typographies are provided as objects containing CSS properties.
  *
@@ -14,19 +14,62 @@ * @version 1.2.1
    * Get a typography style from elvis-typography.
-   * @param {string} typographyName Name of requested typography.
-   * @returns {{[key: string]: string}} Object containing css properties of typography.
+   * @param typographyName Name of requested typography.
+   * @returns Object containing CSS properties of typography.
    *
    */
-  export const getTypography: (typographyName: string) => { [property: string]: string };
+  export const getTypography: (typographyName: TypographyName) => { [property: string]: string };
 
   /**
-   * @param {string} typographyName Name of requested typography.
+   * @param typographyName Name of requested typography.
    * @returns CSS-formated string with all the properties of the typography, including a media query for mobile font properties.
    */
-  export const getTypographyCss: (typographyName: string) => string;
+  export const getTypographyCss: (typographyName: TypographyName) => string;
 
+  export type TypographyName =
+    | 'title-lg'
+	| 'title-large'
+	| 'title-md'
+	| 'title-medium'
+	| 'title-sm'
+	| 'title-small'
+	| 'title-xs'
+	| 'title-xsmall'
+	| 'title-caps'
+	| 'text-caps'
+	| 'text-lead'
+	| 'text-lg'
+	| 'text-large'
+	| 'text-body'
+	| 'text-lg-strong'
+	| 'text-large-strong'
+	| 'text-lg-light'
+	| 'text-large-light'
+	| 'text-md'
+	| 'text-medium'
+	| 'text-description'
+	| 'text-md-strong'
+	| 'text-medium-strong'
+	| 'text-md-light'
+	| 'text-medium-light'
+	| 'text-sm'
+	| 'text-small'
+	| 'text-info'
+	| 'text-sm-strong'
+	| 'text-small-strong'
+	| 'text-sm-light'
+	| 'text-small-light'
+	| 'text-micro'
+	| 'text-micro-strong'
+	| 'text-micro-light'
+	| 'text-quote'
+	| 'text-img'
+	| 'text-label'
+	| 'text-option'
+    // eslint-disable-next-line @typescript-eslint/ban-types
+    | (string & {});
+
   /**
    * Object containing all Elvia typographies.
    */
-  const ElviaTypography: { [typography: string]: { [property: string]: string } };
+  const ElviaTypography: { [typography: TypographyName]: { [property: string]: string } };
   export default ElviaTypography;
 }

dist/elviaTypography.js

@@ -6,2 +6,3 @@ // THIS FILE IS AUTOMATICALLY GENERATED AND WILL BE OVERWRITTEN.
   'title-lg': {
+    altLabels: ['title-large'],
     fontFamily: '"Red Hat Display", Verdana, sans-serif',
@@ -20,2 +21,3 @@ fontSize: '44px',
   'title-md': {
+    altLabels: ['title-medium'],
     fontFamily: '"Red Hat Display", Verdana, sans-serif',
@@ -34,2 +36,3 @@ fontSize: '30px',
   'title-sm': {
+    altLabels: ['title-small'],
     fontFamily: '"Red Hat Display", Verdana, sans-serif',
@@ -48,2 +51,3 @@ fontSize: '24px',
   'title-xs': {
+    altLabels: ['title-xsmall'],
     fontFamily: '"Red Hat Display", Verdana, sans-serif',
@@ -86,3 +90,3 @@ fontSize: '18px',
   'text-lg': {
-    altLabels: ['text-body'],
+    altLabels: ['text-large', 'text-body'],
     fontFamily: '"Red Hat Text", Verdana, sans-serif',
@@ -101,2 +105,3 @@ fontSize: '20px',
   'text-lg-strong': {
+    altLabels: ['text-large-strong'],
     fontFamily: '"Red Hat Text", Verdana, sans-serif',
@@ -115,2 +120,3 @@ fontSize: '20px',
   'text-lg-light': {
+    altLabels: ['text-large-light'],
     fontFamily: '"Red Hat Text", Verdana, sans-serif',
@@ -129,3 +135,3 @@ fontSize: '20px',
   'text-md': {
-    altLabels: ['text-description'],
+    altLabels: ['text-medium', 'text-description'],
     fontFamily: '"Red Hat Text", Verdana, sans-serif',
@@ -141,2 +147,3 @@ fontSize: '16px',
   'text-md-strong': {
+    altLabels: ['text-medium-strong'],
     fontFamily: '"Red Hat Text", Verdana, sans-serif',
@@ -152,2 +159,3 @@ fontSize: '16px',
   'text-md-light': {
+    altLabels: ['text-medium-light'],
     fontFamily: '"Red Hat Text", Verdana, sans-serif',
@@ -164,3 +172,3 @@ fontSize: '16px',
   'text-sm': {
-    altLabels: ['text-info'],
+    altLabels: ['text-small', 'text-info'],
     fontFamily: '"Red Hat Text", Verdana, sans-serif',
@@ -176,2 +184,3 @@ fontSize: '14px',
   'text-sm-strong': {
+    altLabels: ['text-small-strong'],
     fontFamily: '"Red Hat Text", Verdana, sans-serif',
@@ -187,2 +196,3 @@ fontSize: '14px',
   'text-sm-light': {
+    altLabels: ['text-small-light'],
     fontFamily: '"Red Hat Text", Verdana, sans-serif',
@@ -189,0 +199,0 @@ fontSize: '14px',

dist/elviaTypography.json

 {
   "title-lg": {
+    "altLabels": ["title-large"],
     "fontFamily": "\"Red Hat Display\", Verdana, sans-serif",
@@ -15,2 +16,3 @@ "fontSize": "44px",
   "title-md": {
+    "altLabels": ["title-medium"],
     "fontFamily": "\"Red Hat Display\", Verdana, sans-serif",
@@ -28,2 +30,3 @@ "fontSize": "30px",
   "title-sm": {
+    "altLabels": ["title-small"],
     "fontFamily": "\"Red Hat Display\", Verdana, sans-serif",
@@ -41,2 +44,3 @@ "fontSize": "24px",
   "title-xs": {
+    "altLabels": ["title-xsmall"],
     "fontFamily": "\"Red Hat Display\", Verdana, sans-serif",
@@ -76,3 +80,3 @@ "fontSize": "18px",
   "text-lg": {
-    "altLabels": ["text-body"],
+    "altLabels": ["text-large", "text-body"],
     "fontFamily": "\"Red Hat Text\", Verdana, sans-serif",
@@ -90,2 +94,3 @@ "fontSize": "20px",
   "text-lg-strong": {
+    "altLabels": ["text-large-strong"],
     "fontFamily": "\"Red Hat Text\", Verdana, sans-serif",
@@ -103,2 +108,3 @@ "fontSize": "20px",
   "text-lg-light": {
+    "altLabels": ["text-large-light"],
     "fontFamily": "\"Red Hat Text\", Verdana, sans-serif",
@@ -116,3 +122,3 @@ "fontSize": "20px",
   "text-md": {
-    "altLabels": ["text-description"],
+    "altLabels": ["text-medium", "text-description"],
     "fontFamily": "\"Red Hat Text\", Verdana, sans-serif",
@@ -128,2 +134,3 @@ "fontSize": "16px",
   "text-md-strong": {
+    "altLabels": ["text-medium-strong"],
     "fontFamily": "\"Red Hat Text\", Verdana, sans-serif",
@@ -139,2 +146,3 @@ "fontSize": "16px",
   "text-md-light": {
+    "altLabels": ["text-medium-light"],
     "fontFamily": "\"Red Hat Text\", Verdana, sans-serif",
@@ -150,3 +158,3 @@ "fontSize": "16px",
   "text-sm": {
-    "altLabels": ["text-info"],
+    "altLabels": ["text-small", "text-info"],
     "fontFamily": "\"Red Hat Text\", Verdana, sans-serif",
@@ -162,2 +170,3 @@ "fontSize": "14px",
   "text-sm-strong": {
+    "altLabels": ["text-small-strong"],
     "fontFamily": "\"Red Hat Text\", Verdana, sans-serif",
@@ -173,2 +182,3 @@ "fontSize": "14px",
   "text-sm-light": {
+    "altLabels": ["text-small-light"],
     "fontFamily": "\"Red Hat Text\", Verdana, sans-serif",
@@ -175,0 +185,0 @@ "fontSize": "14px",

gulpfile.js

@@ -7,2 +7,3 @@ 'use strict';
 const header = require('gulp-header');
+const tap = require('gulp-tap');
 const del = require('del');
@@ -114,5 +115,26 @@ const typographies = require('./src/elviaTypography')['default'];
 const copyElviaTypographyJs = async () => {
+  return gulp.src(['./src/elviaTypography.js']).pipe(header(WARNING)).pipe(gulp.dest('./dist/'));
+};
+const copyElviaTypographyDTs = async () => {
+  const typographyNamesAndAltLabels = [];
+  Object.keys(typographies).forEach((typography) => {
+    typographyNamesAndAltLabels.push(typography);
+    if (typographies[typography]['altLabels']) {
+      typographies[typography]['altLabels'].forEach((altLabel) => {
+        typographyNamesAndAltLabels.push(altLabel);
+      });
+    }
+  });
+  const typographyNameTypeString = typographyNamesAndAltLabels.map((name) => `'${name}'`).join('\n\t| ');
+
   return gulp
-    .src(['./src/elviaTypography.js', './src/elviaTypography.d.ts'])
+    .src(['./src/elviaTypography.d.ts'])
     .pipe(header(WARNING))
+    .pipe(
+      tap((file) => {
+        file.contents = Buffer.from(
+          String(file.contents).replace(/'{{INSERT_TYPOGRAPHY_NAMES}}'/, typographyNameTypeString),
+        );
+      }),
+    )
     .pipe(gulp.dest('./dist/'));
@@ -146,2 +168,3 @@ };
     copyElviaTypographyJs,
+    copyElviaTypographyDTs,
     formatPrettier,
@@ -148,0 +171,0 @@ function (done) {

package.json

 {
   "name": "@elvia/elvis-typography",
-  "version": "2.2.0",
+  "version": "2.3.1",
   "description": "Elvia typography",
@@ -17,4 +17,5 @@ "license": "MIT",
     "gulp-header": "^2.0.9",
-    "gulp-prettier": "^4.0.0"
+    "gulp-prettier": "^4.0.0",
+    "gulp-tap": "^2.0.0"
   }
-}
+}

src/elviaTypography.d.ts

 /**
  * elvis-typography package containing typographies to use in Elvia's design profile.
- * Typographies are provided as objects containing css properties.
+ * Typographies are provided as objects containing CSS properties.
  *
@@ -10,19 +10,24 @@ * @version 1.2.1
    * Get a typography style from elvis-typography.
-   * @param {string} typographyName Name of requested typography.
-   * @returns {{[key: string]: string}} Object containing css properties of typography.
+   * @param typographyName Name of requested typography.
+   * @returns Object containing CSS properties of typography.
    *
    */
-  export const getTypography: (typographyName: string) => { [property: string]: string };
+  export const getTypography: (typographyName: TypographyName) => { [property: string]: string };
 
   /**
-   * @param {string} typographyName Name of requested typography.
+   * @param typographyName Name of requested typography.
    * @returns CSS-formated string with all the properties of the typography, including a media query for mobile font properties.
    */
-  export const getTypographyCss: (typographyName: string) => string;
+  export const getTypographyCss: (typographyName: TypographyName) => string;
 
+  export type TypographyName =
+    | '{{INSERT_TYPOGRAPHY_NAMES}}'
+    // eslint-disable-next-line @typescript-eslint/ban-types
+    | (string & {});
+
   /**
    * Object containing all Elvia typographies.
    */
-  const ElviaTypography: { [typography: string]: { [property: string]: string } };
+  const ElviaTypography: { [typography: TypographyName]: { [property: string]: string } };
   export default ElviaTypography;
 }

src/elviaTypography.js

 const ElviaTypography = {
   'title-lg': {
+    altLabels: ['title-large'],
     fontFamily: '"Red Hat Display", Verdana, sans-serif',
@@ -16,2 +17,3 @@ fontSize: '44px',
   'title-md': {
+    altLabels: ['title-medium'],
     fontFamily: '"Red Hat Display", Verdana, sans-serif',
@@ -30,2 +32,3 @@ fontSize: '30px',
   'title-sm': {
+    altLabels: ['title-small'],
     fontFamily: '"Red Hat Display", Verdana, sans-serif',
@@ -44,2 +47,3 @@ fontSize: '24px',
   'title-xs': {
+    altLabels: ['title-xsmall'],
     fontFamily: '"Red Hat Display", Verdana, sans-serif',
@@ -82,3 +86,3 @@ fontSize: '18px',
   'text-lg': {
-    altLabels: ['text-body'],
+    altLabels: ['text-large', 'text-body'],
     fontFamily: '"Red Hat Text", Verdana, sans-serif',
@@ -97,2 +101,3 @@ fontSize: '20px',
   'text-lg-strong': {
+    altLabels: ['text-large-strong'],
     fontFamily: '"Red Hat Text", Verdana, sans-serif',
@@ -111,2 +116,3 @@ fontSize: '20px',
   'text-lg-light': {
+    altLabels: ['text-large-light'],
     fontFamily: '"Red Hat Text", Verdana, sans-serif',
@@ -125,3 +131,3 @@ fontSize: '20px',
   'text-md': {
-    altLabels: ['text-description'],
+    altLabels: ['text-medium', 'text-description'],
     fontFamily: '"Red Hat Text", Verdana, sans-serif',
@@ -137,2 +143,3 @@ fontSize: '16px',
   'text-md-strong': {
+    altLabels: ['text-medium-strong'],
     fontFamily: '"Red Hat Text", Verdana, sans-serif',
@@ -148,2 +155,3 @@ fontSize: '16px',
   'text-md-light': {
+    altLabels: ['text-medium-light'],
     fontFamily: '"Red Hat Text", Verdana, sans-serif',
@@ -160,3 +168,3 @@ fontSize: '16px',
   'text-sm': {
-    altLabels: ['text-info'],
+    altLabels: ['text-small', 'text-info'],
     fontFamily: '"Red Hat Text", Verdana, sans-serif',
@@ -172,2 +180,3 @@ fontSize: '14px',
   'text-sm-strong': {
+    altLabels: ['text-small-strong'],
     fontFamily: '"Red Hat Text", Verdana, sans-serif',
@@ -183,2 +192,3 @@ fontSize: '14px',
   'text-sm-light': {
+    altLabels: ['text-small-light'],
     fontFamily: '"Red Hat Text", Verdana, sans-serif',
@@ -185,0 +195,0 @@ fontSize: '14px',

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

52423

increased by14.99%

Lines of code

1107

increased by9.71%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Dev dependency count

5

increased by25%

No dependency changes