@pluralsight/headless-styles - npm Package Compare versions

Comparing version 0.0.0-alpha-37b333 to 0.0.0-alpha-3b8d91

build/components/Button/buttonCSS.js

 import { getDefaultOptions } from './shared';
 import styles from './buttonCSS.module.css';
 export function getButtonProps(options) {
-    const { kind, size } = getDefaultOptions(options);
+    var _a;
+    const { kind, size, tech } = getDefaultOptions(options);
     const formattedSize = `size-${size}`;
+    const framework = (_a = styles[tech]) !== null && _a !== void 0 ? _a : '';
     return {
-        className: `ps-btn ${styles.base} ${styles[kind]} ${styles[formattedSize]}`,
+        className: `ps-btn ${styles.base} ${styles[kind]} ${styles[formattedSize]} ${framework}`,
         type: 'button',
     };
 }

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';
-const buttonStyles = {
-    appearance: 'none',
-    borderRadius: '6px',
-    backgroundColor: 'transparent',
-    border: 'none',
-    cursor: 'pointer',
-    fontSize: '16px',
-    padding: '10px 16px',
-    textAlign: 'center',
-    textDecoration: 'none',
-    transition: 'background-color 250ms ease-in-out, color 250ms ease-in-out',
-    active: {
-        outline: 'none',
-    },
-    focus: {
-        outline: `3px solid ${psBackgroundActive}`,
-    },
-    focusNotFocusVisible: {
-        boxShadow: 'none',
-        outline: 0,
-    },
+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 baseCSSProps = `
-  appearance: none;
-  background-color: transparent;
-  border: none;
-  border-radius: 6px;
-  cursor: pointer;
-  text-align: center;
-  text-decoration: none;
-  transition: background-color 250ms ease-in-out, color 250ms ease-in-out;
-
-  &:active {
-    outline: none;
-  }
-  &:focus {
-    outline: 3px solid ${psBackgroundActive};
-  }
-  &:focus:not(:focus-visible) {
-    box-shadow: none;
-    outline: 0;
-  }
-`;
 function getKindStyles(kind) {
@@ -51,7 +39,11 @@ switch (kind) {
                 css: `
+          background-color: transparent;
           color: ${psTextMedium};
         `,
-                js: {
-                    color: psTextMedium,
-                },
+                js: Object.assign(Object.assign({}, styles.text_weak), { color: psTextMedium, '&:active': {
+                        backgroundColor: psBackgroundActive,
+                    }, '&:hover': {
+                        backgroundColor: psBackgroundHover,
+                        color: '#fff',
+                    } }),
             };
@@ -64,6 +56,7 @@ case 'weak':
         `,
-                js: {
-                    backgroundColor: psNeutralBackground,
-                    color: psNeutralText,
-                },
+                js: Object.assign(Object.assign({}, styles.weak), { backgroundColor: psNeutralBackground, color: psNeutralText, '&:active': {
+                        backgroundColor: psNeutralBackgroundActive,
+                    }, '&:hover': {
+                        backgroundColor: psNeutralBackgroundHover,
+                    } }),
             };
@@ -76,6 +69,7 @@ case 'medium':
         `,
-                js: {
-                    backgroundColor: psBackground,
-                    color: '#fff',
-                },
+                js: Object.assign(Object.assign({}, styles.medium), { backgroundColor: psBackground, '&:active': {
+                        backgroundColor: psBackgroundActive,
+                    }, '&:hover': {
+                        backgroundColor: psBackgroundHover,
+                    } }),
             };
@@ -88,6 +82,7 @@ case 'strong':
         `,
-                js: {
-                    backgroundColor: psBackgroundWeak,
-                    color: psText,
-                },
+                js: Object.assign(Object.assign({}, styles.strong), { backgroundColor: psBackgroundWeak, color: psText, '&:active': {
+                        backgroundColor: psBackgroundActive,
+                    }, '&:hover': {
+                        backgroundColor: psBackgroundHover,
+                    } }),
             };
@@ -97,7 +92,10 @@ default:
                 css: `
+          background-color: transparent;
           color: ${psNeutralTextWeak};
         `,
-                js: {
-                    color: psNeutralTextWeak,
-                },
+                js: Object.assign(Object.assign({}, styles.text), { color: psNeutralTextWeak, '&:active': {
+                        backgroundColor: psBackgroundActive,
+                    }, '&:hover': {
+                        backgroundColor: psNeutralBackgroundHover,
+                    } }),
             };
@@ -109,45 +107,25 @@ }
         case 'xs':
-            return {
-                css: `
-          font-size: 12px;
-          padding: 4px 8px;
-        `,
-                js: {
-                    fontSize: '12px',
-                    padding: '4px 8px',
-                },
-            };
+            return `
+        font-size: 0.75rem;
+        height: 1.5rem;
+        padding-inline: 8px;
+      `;
         case 's':
-            return {
-                css: `
-          font-size: 14px;
-          padding: 6px 12px;
-        `,
-                js: {
-                    fontSize: '14px',
-                    padding: '6px 12px',
-                },
-            };
+            return `
+        font-size: 0.875rem;
+        height: 2rem;
+        padding-inline: 12px;
+      `;
         case 'l':
-            return {
-                css: `
-          font-size: 16px;
-          padding: 14.5px 24px;
-        `,
-                js: {
-                    fontSize: '16px',
-                    padding: '14.5px 24px',
-                },
-            };
+            return `
+        font-size: 1rem;
+        height: 3rem;
+        padding-inline: 24px;
+      `;
         default:
-            return {
-                css: `
-          font-size: 16px;
-          padding: 10px 16px;
-        `,
-                js: {
-                    fontSize: '16px',
-                    padding: '10px 16px',
-                },
-            };
+            return `
+        font-size: 1rem;
+        height: 2.5rem;
+        padding-inline: 16px;
+      `;
     }
@@ -160,64 +138,31 @@ }
         case 'strong':
-            return {
-                css: `
-          &:hover {
-            color: #fff;
-            background-color: ${psBackgroundHover};
-          }
-          &:active {
-            background-color: ${psBackgroundActive};
-          }
-        `,
-                js: {
-                    hover: {
-                        color: '#fff',
-                        backgroundColor: psBackgroundHover,
-                    },
-                    active: {
-                        backgroundColor: psBackgroundActive,
-                    },
-                },
-            };
+            return `
+        &:hover {
+          color: #fff;
+          background-color: ${psBackgroundHover};
+        }
+        &:active {
+          background-color: ${psBackgroundActive};
+        }
+      `;
         case 'weak':
-            return {
-                css: `
-          &:hover {
-            color: #fff;
-            background-color: ${psNeutralBackgroundHover};
-          }
-          &:active {
-            background-color: ${psNeutralBackgroundActive};
-          }
-        `,
-                js: {
-                    hover: {
-                        color: '#fff',
-                        backgroundColor: psNeutralBackgroundHover,
-                    },
-                    active: {
-                        backgroundColor: psNeutralBackgroundActive,
-                    },
-                },
-            };
+            return `
+        &:hover {
+          color: #fff;
+          background-color: ${psNeutralBackgroundHover};
+        }
+        &:active {
+          background-color: ${psNeutralBackgroundActive};
+        }
+      `;
         default:
-            return {
-                css: `
-          &:hover {
-            color: #fff;
-            background-color: ${psNeutralBackgroundHover};
-          }
-          &:active {
-            background-color: ${psBackgroundActive};
-          }
-        `,
-                js: {
-                    hover: {
-                        color: '#fff',
-                        backgroundColor: psNeutralBackgroundHover,
-                    },
-                    active: {
-                        backgroundColor: psBackgroundActive,
-                    },
-                },
-            };
+            return `
+        &:hover {
+          color: #fff;
+          background-color: ${psNeutralBackgroundHover};
+        }
+        &:active {
+          background-color: ${psBackgroundActive};
+        }
+      `;
     }
@@ -228,16 +173,15 @@ }
     const kindStyles = getKindStyles(kind);
-    const sizeStyles = getSizeStyles(size);
-    const psuedoStyles = getPsuedoStyles(kind);
+    const sizeKey = `size_${size}`;
     return {
         cssProps: `
-      ${baseCSSProps}
+      ${baseStyles.css.trim()}
       ${kindStyles.css.trim()}
-      ${sizeStyles.css.trim()}
-      ${psuedoStyles.css.trim()}
+      ${getSizeStyles(size).trim()}
+      ${getPsuedoStyles(kind).trim()}
     `
             .trim()
             .replace(/^ {2,12}/gm, ''),
-        styles: Object.assign(Object.assign(Object.assign(Object.assign({}, buttonStyles), kindStyles.js), sizeStyles.js), { hover: Object.assign({}, psuedoStyles.js.hover), active: Object.assign(Object.assign({}, buttonStyles.active), psuedoStyles.js.active), focus: Object.assign(Object.assign({}, buttonStyles.focus), buttonStyles.focusNotFocusVisible) }),
+        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']) }),
         type: 'button',
     };
 }

build/components/Button/shared.d.ts

@@ -1,5 +0,6 @@
-import type { ButtonOptions, Kind, Size } from './types';
+import type { ButtonOptions, Kind, Size, Tech } from './types';
 export declare const defaultButtonOptions: {
     kind: Kind;
     size: Size;
+    tech: Tech;
 };
@@ -9,2 +10,3 @@ export declare function getDefaultOptions(options?: ButtonOptions): {
     size: Size;
+    tech: Tech;
 };

build/components/Button/shared.js

 export const defaultButtonOptions = {
     kind: 'text',
     size: 'm',
+    tech: '',
 };
 export function getDefaultOptions(options) {
-    var _a, _b;
+    var _a, _b, _c;
     return {
         kind: (_a = options === null || options === void 0 ? void 0 : options.kind) !== null && _a !== void 0 ? _a : defaultButtonOptions.kind,
         size: (_b = options === null || options === void 0 ? void 0 : options.size) !== null && _b !== void 0 ? _b : defaultButtonOptions.size,
+        tech: (_c = options === null || options === void 0 ? void 0 : options.tech) !== null && _c !== void 0 ? _c : defaultButtonOptions.tech,
     };
 }

build/components/Button/types.d.ts

@@ -5,2 +5,3 @@ import { ButtonHTMLAttributes, DetailedHTMLProps } from 'react';
     size?: Size;
+    tech?: Tech;
 }
@@ -10,1 +11,2 @@ export declare type ButtonType = 'button' | 'submit' | 'reset' | undefined;
 export declare type Size = 'xs' | 's' | 'm' | 'l';
+export declare type Tech = 'chakra' | '';

package.json

 {
   "name": "@pluralsight/headless-styles",
-  "version": "0.0.0-alpha-37b333",
+  "version": "0.0.0-alpha-3b8d91",
   "description": "Headless styles for Pluralsight.",
-  "main": "./build/index.js",
+  "main": "build/common/index.js",
+  "module": "build/index.js",
+  "types": "build/index.d.ts",
   "files": [
@@ -13,4 +15,9 @@ "build/**/*"
   ],
+  "workspaces": [
+    "sandbox"
+  ],
   "scripts": {
-    "build": "yarn copy:css && tsc --project tsconfig.build.json",
+    "build": "yarn build:common && yarn build:es",
+    "build:common": "tsc --project tsconfig.cjs.json",
+    "build:es": "yarn copy:css && tsc --project tsconfig.build.json",
     "copy:css": "copyfiles --up 1 ./src/**/*.module.css build",
@@ -17,0 +24,0 @@ "test": "echo \"'yarn test' should be run from root directory.\" && exit 1"

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

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

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

Improved metrics

Total package byte prevSize

186504

increased by1246.11%

Number of package files

27

increased by107.69%

Lines of code

6806

increased by1508.98%

Worsened metrics

Number of downloads

117

decreased by-52.05%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes