@pluralsight/headless-styles - npm Package Compare versions

Comparing version 0.0.0-experimental-e826f4-20220404 to 0.0.0-experimental-e871b8-20220406

build/common/components/Button/buttonJS.js

@@ -7,162 +7,45 @@ "use strict";
 const shared_1 = require("./shared");
+const helpers_1 = require("../../utils/helpers");
 const buttonCSS_module_1 = (0, tslib_1.__importDefault)(require("./generated/buttonCSS.module"));
-// TODO:
-// 1. Figure out how to convert JSObject to style-string
-// 2. Figure out how to make :active more important than :hover in JS Object
-const baseStyles = {
-    js: Object.assign(Object.assign({}, buttonCSS_module_1.default.base), { '&:focus': {
-            outline: `3px solid ${design_tokens_1.psBackgroundActive}`,
-        } }),
-    css: `
-    align-items: center;
-    appearance: none;
-    border: none;
-    border-radius: 6px;
-    cursor: pointer;
-    display: inline-flex;
-    font-family: 'PS TT Commons Roman', 'Gotham SSm A', 'Gotham SSm B', Arial,
-      sans-serif;
-    font-variation-settings: 'wght' 600;
-    font-weight: 600;
-    justify-content: center;
-    outline: none;
-    position: relative;
-    text-align: center;
-    text-decoration: none;
-    text-transform: none;
-    transition: background-color 250ms ease-in-out, color 250ms ease-in-out;
-    user-select: none;
-    vertical-align: middle;
-    white-space: nowrap;
-`,
-};
+const baseStyles = Object.assign(Object.assign({}, buttonCSS_module_1.default.base), { '&:focus': {
+        outline: `3px solid ${design_tokens_1.psBackgroundActive}`,
+    } });
 function getKindStyles(kind) {
     switch (kind) {
         case 'text-weak':
-            return {
-                css: `
-          background-color: transparent;
-          color: ${design_tokens_1.psTextMedium};
-        `,
-                js: Object.assign(Object.assign({}, buttonCSS_module_1.default.text_weak), { color: design_tokens_1.psTextMedium, '&:active': {
-                        backgroundColor: design_tokens_1.psBackgroundActive,
-                    }, '&:hover': {
-                        backgroundColor: design_tokens_1.psBackgroundHover,
-                        color: '#fff',
-                    } }),
-            };
+            return Object.assign(Object.assign({}, buttonCSS_module_1.default.text_weak), { color: design_tokens_1.psTextMedium, '&:active': {
+                    backgroundColor: design_tokens_1.psBackgroundActive,
+                }, '&:hover': {
+                    backgroundColor: design_tokens_1.psBackgroundHover,
+                    color: '#fff',
+                } });
         case 'weak':
-            return {
-                css: `
-          background-color: ${design_tokens_1.psNeutralBackground};
-          color: ${design_tokens_1.psNeutralText};
-        `,
-                js: Object.assign(Object.assign({}, buttonCSS_module_1.default.weak), { backgroundColor: design_tokens_1.psNeutralBackground, color: design_tokens_1.psNeutralText, '&:active': {
-                        backgroundColor: design_tokens_1.psNeutralBackgroundActive,
-                    }, '&:hover': {
-                        backgroundColor: design_tokens_1.psNeutralBackgroundHover,
-                    } }),
-            };
+            return Object.assign(Object.assign({}, buttonCSS_module_1.default.weak), { backgroundColor: design_tokens_1.psNeutralBackground, color: design_tokens_1.psNeutralText, '&:active': {
+                    backgroundColor: design_tokens_1.psNeutralBackgroundActive,
+                }, '&:hover': {
+                    backgroundColor: design_tokens_1.psNeutralBackgroundHover,
+                } });
         case 'medium':
-            return {
-                css: `
-          background-color: ${design_tokens_1.psBackground};
-          color: #fff;
-        `,
-                js: Object.assign(Object.assign({}, buttonCSS_module_1.default.medium), { backgroundColor: design_tokens_1.psBackground, '&:active': {
-                        backgroundColor: design_tokens_1.psBackgroundActive,
-                    }, '&:hover': {
-                        backgroundColor: design_tokens_1.psBackgroundHover,
-                    } }),
-            };
+            return Object.assign(Object.assign({}, buttonCSS_module_1.default.medium), { backgroundColor: design_tokens_1.psBackground, '&:active': {
+                    backgroundColor: design_tokens_1.psBackgroundActive,
+                }, '&:hover': {
+                    backgroundColor: design_tokens_1.psBackgroundHover,
+                    color: '#fff',
+                } });
         case 'strong':
-            return {
-                css: `
-          background-color: ${design_tokens_1.psBackgroundWeak};
-          color: ${design_tokens_1.psText};
-        `,
-                js: Object.assign(Object.assign({}, buttonCSS_module_1.default.strong), { backgroundColor: design_tokens_1.psBackgroundWeak, color: design_tokens_1.psText, '&:active': {
-                        backgroundColor: design_tokens_1.psBackgroundActive,
-                    }, '&:hover': {
-                        backgroundColor: design_tokens_1.psBackgroundHover,
-                    } }),
-            };
+            return Object.assign(Object.assign({}, buttonCSS_module_1.default.strong), { backgroundColor: design_tokens_1.psBackgroundWeak, color: design_tokens_1.psText, '&:active': {
+                    backgroundColor: design_tokens_1.psBackgroundActive,
+                }, '&:hover': {
+                    backgroundColor: design_tokens_1.psBackgroundHover,
+                    color: '#fff',
+                } });
         default:
-            return {
-                css: `
-          background-color: transparent;
-          color: ${design_tokens_1.psNeutralTextWeak};
-        `,
-                js: Object.assign(Object.assign({}, buttonCSS_module_1.default.text), { color: design_tokens_1.psNeutralTextWeak, '&:active': {
-                        backgroundColor: design_tokens_1.psBackgroundActive,
-                    }, '&:hover': {
-                        backgroundColor: design_tokens_1.psNeutralBackgroundHover,
-                    } }),
-            };
+            return Object.assign(Object.assign({}, buttonCSS_module_1.default.text), { color: design_tokens_1.psNeutralTextWeak, '&:active': {
+                    backgroundColor: design_tokens_1.psBackgroundActive,
+                }, '&:hover': {
+                    backgroundColor: design_tokens_1.psNeutralBackgroundHover,
+                    color: '#fff',
+                } });
     }
 }
-function getSizeStyles(size) {
-    switch (size) {
-        case 'xs':
-            return `
-        font-size: 0.75rem;
-        height: 1.5rem;
-        padding-inline: 8px;
-      `;
-        case 's':
-            return `
-        font-size: 0.875rem;
-        height: 2rem;
-        padding-inline: 12px;
-      `;
-        case 'l':
-            return `
-        font-size: 1rem;
-        height: 3rem;
-        padding-inline: 24px;
-      `;
-        default:
-            return `
-        font-size: 1rem;
-        height: 2.5rem;
-        padding-inline: 16px;
-      `;
-    }
-}
-function getPsuedoStyles(kind) {
-    switch (kind) {
-        case 'text-weak':
-        case 'medium':
-        case 'strong':
-            return `
-        &:hover {
-          color: #fff;
-          background-color: ${design_tokens_1.psBackgroundHover};
-        }
-        &:active {
-          background-color: ${design_tokens_1.psBackgroundActive};
-        }
-      `;
-        case 'weak':
-            return `
-        &:hover {
-          color: #fff;
-          background-color: ${design_tokens_1.psNeutralBackgroundHover};
-        }
-        &:active {
-          background-color: ${design_tokens_1.psNeutralBackgroundActive};
-        }
-      `;
-        default:
-            return `
-        &:hover {
-          color: #fff;
-          background-color: ${design_tokens_1.psNeutralBackgroundHover};
-        }
-        &:active {
-          background-color: ${design_tokens_1.psBackgroundActive};
-        }
-      `;
-    }
-}
 function getJSButtonProps(options) {
@@ -172,12 +55,6 @@ const { kind, size } = (0, shared_1.getDefaultOptions)(options);
     const sizeKey = `size_${size}`;
+    const JsStyles = Object.assign(Object.assign(Object.assign(Object.assign({}, baseStyles), kindStyles), buttonCSS_module_1.default[sizeKey]), { '&:active': Object.assign(Object.assign({}, baseStyles['&:active']), kindStyles['&:active']) });
     return {
-        cssProps: `
-      ${baseStyles.css.trim()}
-      ${kindStyles.css.trim()}
-      ${getSizeStyles(size).trim()}
-      ${getPsuedoStyles(kind).trim()}
-    `
-            .trim()
-            .replace(/^ {2,12}/gm, ''),
-        styles: Object.assign(Object.assign(Object.assign(Object.assign({}, baseStyles.js), kindStyles.js), buttonCSS_module_1.default[sizeKey]), { '&:active': Object.assign(Object.assign({}, baseStyles.js['&:active']), kindStyles.js['&:active']) }),
+        cssProps: (0, helpers_1.transformStyles)(JsStyles),
+        styles: JsStyles,
         type: 'button',
@@ -184,0 +61,0 @@ };

build/common/components/Button/generated/buttonCSS.module.js

@@ -12,3 +12,3 @@ "use strict";
         display: 'inline-flex',
-        fontFamily: "'PS TT Commons Roman', 'Gotham SSm A', 'Gotham SSm B', Arial, sans-serif",
+        fontFamily: "'PS TT Commons Roman', 'Gotham SSm A', 'Gotham SSm B', Arial,\n    sans-serif",
         fontSize: '1rem',
@@ -15,0 +15,0 @@ fontVariationSettings: "'wght' 600",

build/components/Button/buttonJS.js

 import { psBackground, psBackgroundActive, psBackgroundHover, psBackgroundWeak, psNeutralBackground, psNeutralBackgroundActive, psNeutralBackgroundHover, psNeutralText, psNeutralTextWeak, psText, psTextMedium, } from '@pluralsight/design-tokens';
 import { getDefaultOptions } from './shared';
+import { transformStyles } from '../../utils/helpers';
 import styles from './generated/buttonCSS.module';
-// TODO:
-// 1. Figure out how to convert JSObject to style-string
-// 2. Figure out how to make :active more important than :hover in JS Object
-const baseStyles = {
-    js: Object.assign(Object.assign({}, styles.base), { '&:focus': {
-            outline: `3px solid ${psBackgroundActive}`,
-        } }),
-    css: `
-    align-items: center;
-    appearance: none;
-    border: none;
-    border-radius: 6px;
-    cursor: pointer;
-    display: inline-flex;
-    font-family: 'PS TT Commons Roman', 'Gotham SSm A', 'Gotham SSm B', Arial,
-      sans-serif;
-    font-variation-settings: 'wght' 600;
-    font-weight: 600;
-    justify-content: center;
-    outline: none;
-    position: relative;
-    text-align: center;
-    text-decoration: none;
-    text-transform: none;
-    transition: background-color 250ms ease-in-out, color 250ms ease-in-out;
-    user-select: none;
-    vertical-align: middle;
-    white-space: nowrap;
-`,
-};
+const baseStyles = Object.assign(Object.assign({}, styles.base), { '&:focus': {
+        outline: `3px solid ${psBackgroundActive}`,
+    } });
 function getKindStyles(kind) {
     switch (kind) {
         case 'text-weak':
-            return {
-                css: `
-          background-color: transparent;
-          color: ${psTextMedium};
-        `,
-                js: Object.assign(Object.assign({}, styles.text_weak), { color: psTextMedium, '&:active': {
-                        backgroundColor: psBackgroundActive,
-                    }, '&:hover': {
-                        backgroundColor: psBackgroundHover,
-                        color: '#fff',
-                    } }),
-            };
+            return Object.assign(Object.assign({}, styles.text_weak), { color: psTextMedium, '&:active': {
+                    backgroundColor: psBackgroundActive,
+                }, '&:hover': {
+                    backgroundColor: psBackgroundHover,
+                    color: '#fff',
+                } });
         case 'weak':
-            return {
-                css: `
-          background-color: ${psNeutralBackground};
-          color: ${psNeutralText};
-        `,
-                js: Object.assign(Object.assign({}, styles.weak), { backgroundColor: psNeutralBackground, color: psNeutralText, '&:active': {
-                        backgroundColor: psNeutralBackgroundActive,
-                    }, '&:hover': {
-                        backgroundColor: psNeutralBackgroundHover,
-                    } }),
-            };
+            return Object.assign(Object.assign({}, styles.weak), { backgroundColor: psNeutralBackground, color: psNeutralText, '&:active': {
+                    backgroundColor: psNeutralBackgroundActive,
+                }, '&:hover': {
+                    backgroundColor: psNeutralBackgroundHover,
+                } });
         case 'medium':
-            return {
-                css: `
-          background-color: ${psBackground};
-          color: #fff;
-        `,
-                js: Object.assign(Object.assign({}, styles.medium), { backgroundColor: psBackground, '&:active': {
-                        backgroundColor: psBackgroundActive,
-                    }, '&:hover': {
-                        backgroundColor: psBackgroundHover,
-                    } }),
-            };
+            return Object.assign(Object.assign({}, styles.medium), { backgroundColor: psBackground, '&:active': {
+                    backgroundColor: psBackgroundActive,
+                }, '&:hover': {
+                    backgroundColor: psBackgroundHover,
+                    color: '#fff',
+                } });
         case 'strong':
-            return {
-                css: `
-          background-color: ${psBackgroundWeak};
-          color: ${psText};
-        `,
-                js: Object.assign(Object.assign({}, styles.strong), { backgroundColor: psBackgroundWeak, color: psText, '&:active': {
-                        backgroundColor: psBackgroundActive,
-                    }, '&:hover': {
-                        backgroundColor: psBackgroundHover,
-                    } }),
-            };
+            return Object.assign(Object.assign({}, styles.strong), { backgroundColor: psBackgroundWeak, color: psText, '&:active': {
+                    backgroundColor: psBackgroundActive,
+                }, '&:hover': {
+                    backgroundColor: psBackgroundHover,
+                    color: '#fff',
+                } });
         default:
-            return {
-                css: `
-          background-color: transparent;
-          color: ${psNeutralTextWeak};
-        `,
-                js: Object.assign(Object.assign({}, styles.text), { color: psNeutralTextWeak, '&:active': {
-                        backgroundColor: psBackgroundActive,
-                    }, '&:hover': {
-                        backgroundColor: psNeutralBackgroundHover,
-                    } }),
-            };
+            return Object.assign(Object.assign({}, styles.text), { color: psNeutralTextWeak, '&:active': {
+                    backgroundColor: psBackgroundActive,
+                }, '&:hover': {
+                    backgroundColor: psNeutralBackgroundHover,
+                    color: '#fff',
+                } });
     }
 }
-function getSizeStyles(size) {
-    switch (size) {
-        case 'xs':
-            return `
-        font-size: 0.75rem;
-        height: 1.5rem;
-        padding-inline: 8px;
-      `;
-        case 's':
-            return `
-        font-size: 0.875rem;
-        height: 2rem;
-        padding-inline: 12px;
-      `;
-        case 'l':
-            return `
-        font-size: 1rem;
-        height: 3rem;
-        padding-inline: 24px;
-      `;
-        default:
-            return `
-        font-size: 1rem;
-        height: 2.5rem;
-        padding-inline: 16px;
-      `;
-    }
-}
-function getPsuedoStyles(kind) {
-    switch (kind) {
-        case 'text-weak':
-        case 'medium':
-        case 'strong':
-            return `
-        &:hover {
-          color: #fff;
-          background-color: ${psBackgroundHover};
-        }
-        &:active {
-          background-color: ${psBackgroundActive};
-        }
-      `;
-        case 'weak':
-            return `
-        &:hover {
-          color: #fff;
-          background-color: ${psNeutralBackgroundHover};
-        }
-        &:active {
-          background-color: ${psNeutralBackgroundActive};
-        }
-      `;
-        default:
-            return `
-        &:hover {
-          color: #fff;
-          background-color: ${psNeutralBackgroundHover};
-        }
-        &:active {
-          background-color: ${psBackgroundActive};
-        }
-      `;
-    }
-}
 export function getJSButtonProps(options) {
@@ -167,14 +50,8 @@ const { kind, size } = getDefaultOptions(options);
     const sizeKey = `size_${size}`;
+    const JsStyles = Object.assign(Object.assign(Object.assign(Object.assign({}, baseStyles), kindStyles), styles[sizeKey]), { '&:active': Object.assign(Object.assign({}, baseStyles['&:active']), kindStyles['&:active']) });
     return {
-        cssProps: `
-      ${baseStyles.css.trim()}
-      ${kindStyles.css.trim()}
-      ${getSizeStyles(size).trim()}
-      ${getPsuedoStyles(kind).trim()}
-    `
-            .trim()
-            .replace(/^ {2,12}/gm, ''),
-        styles: Object.assign(Object.assign(Object.assign(Object.assign({}, baseStyles.js), kindStyles.js), styles[sizeKey]), { '&:active': Object.assign(Object.assign({}, baseStyles.js['&:active']), kindStyles.js['&:active']) }),
+        cssProps: transformStyles(JsStyles),
+        styles: JsStyles,
         type: 'button',
     };
 }

build/components/Button/generated/buttonCSS.module.js

@@ -10,3 +10,3 @@ export default {
         display: 'inline-flex',
-        fontFamily: "'PS TT Commons Roman', 'Gotham SSm A', 'Gotham SSm B', Arial, sans-serif",
+        fontFamily: "'PS TT Commons Roman', 'Gotham SSm A', 'Gotham SSm B', Arial,\n    sans-serif",
         fontSize: '1rem',
@@ -13,0 +13,0 @@ fontVariationSettings: "'wght' 600",

package.json

 {
   "name": "@pluralsight/headless-styles",
-  "version": "0.0.0-experimental-e826f4-20220404",
+  "version": "0.0.0-experimental-e871b8-20220406",
   "description": "Headless styles for Pluralsight.",
@@ -26,3 +26,4 @@ "main": "build/common/index.js",
   "dependencies": {
-    "@pluralsight/design-tokens": "alpha"
+    "@pluralsight/design-tokens": "alpha",
+    "kebab-case": "^1.0.1"
   },
@@ -29,0 +30,0 @@ "devDependencies": {

Fixed alerts

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

Number of package files

31

increased by14.81%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

182521

decreased by-2.14%

Dependency count

2

increased by100%

Lines of code

6633

decreased by-2.54%

Dependency changes

• + Addedkebab-case@^1.0.1

• + Addedkebab-case@1.0.2(transitive)