@justfixnyc/component-library 0.25.13 → 0.26.0

package/README.md

@@ -2,6 +2,34 @@
 
 Component library for JustFix's design system.
 
-Just testing things out right now...
-
 Based this repo on this [course](https://www.newline.co/courses/newline-guide-to-building-a-company-component-library) ([local copy of course mateirals in our drive](https://drive.google.com/file/d/1Q1aYhktm0aacn-GIlC7fxOCrzoIoSZos/view?usp=share_link))
+
+## Local development setup
+
+1. install npm locally if it doesn't already exist `brew install npm`
+2. `npx sb init`
+
+- builder error: select Webpack 5
+- dependency resolution errors: `npm install --legacy-peer-deps`
+
+3. `npm run storybook`
+4. if there are [OSSL issues](https://stackoverflow.com/questions/75167770/error-error0308010cdigital-envelope-routinesunsupported-node-js-v19-4-0), run `export NODE_OPTIONS=--openssl-legacy-provider`
+
+## Publishing the package
+
+This package is live on both GitHub Package Registry (GPR) and NPM registry
+
+GitHub Actions triggers a publish to GPR from any branch that runs the version bump. Should probably change to allow this version bump to only happen on `main` before we fully integrate this library
+
+``` shell
+npm version [major]|[minor]|[patch]
+git push --follow-tags
+```
+
+Publishing to NPM registry is more manual because of permission issues that couldn't be resolved in Github Actions. You will need to authenticate your account (w/ permissions to the JustFix organization) via the terminal. 
+
+```shell
+npm run build
+npm publish --access public --@justfixnyc:registry=<https://registry.npmjs.org/>
+
+```

package/dist/src/index.d.ts

@@ -221,12 +221,12 @@ var variantStyles = function variantStyles(p) {
   if (p.loading) {
     return css(["", "}", " border-width:1px;border-style:solid;border-radius:100px;", ";"], p.variant === 'primary' ? "color: ".concat(JF_COLOR.OFF_WHITE, ";\n          background-color: ").concat(JF_COLOR.GREY_600, ";\n          border-color: ").concat(JF_COLOR.OFF_WHITE, ";") : "color: ".concat(JF_COLOR.OFF_BLACK, "; \n          background-color:  ").concat(JF_COLOR.OFF_WHITE, ";\n          border-color: ").concat(JF_COLOR.OFF_BLACK, ";"), p.size === 'small' ? "padding: 12px 32px;" : "padding: 22px 32px;", EYEBROW_MOBILE);
   }
-  return css(["", "}", " border-width:1px;border-style:solid;border-radius:100px;box-shadow:4px 4px 0px ", ";", " transition:all 0.1s linear;transform:translateX(0rem);&:hover{box-shadow:0px 4px 0px ", ";}&.active,&:active{box-shadow:0px -4px 0px 0px ", ";}&:disabled{cursor:inherit;box-shadow:none;", "}&:focus{box-shadow:none;border:1px solid ", ";}"], p.variant === 'primary' ? "color: ".concat(JF_COLOR.OFF_WHITE, ";\n        background-color: ").concat(JF_COLOR.OFF_BLACK, ";\n        border-color: ").concat(JF_COLOR.OFF_WHITE, ";") : "color: ".concat(JF_COLOR.OFF_BLACK, "; \n        background-color:  ").concat(JF_COLOR.OFF_WHITE, ";\n        border-color: ").concat(JF_COLOR.OFF_BLACK, ";"), p.size === 'small' ? "padding: 12px 32px;" : "padding: 22px 32px;", JF_COLOR.GREY_SHADOW, EYEBROW_MOBILE, JF_COLOR.GREY_SHADOW, JF_COLOR.GREY_SHADOW, p.variant === 'primary' ? "background-color: ".concat(JF_COLOR.GREY_400, ";\n          color: ").concat(JF_COLOR.OFF_BLACK, ";") : "background-color: ".concat(JF_COLOR.GREY_50), JF_COLOR.GREY_BORDER);
+  return css(["", "}", " border-width:1px;border-style:solid;border-radius:100px;box-shadow:4px 4px 0px ", ";@media (max-width:599px){width:inherit;}", " transition:all 0.1s linear;transform:translateX(0rem);&:hover{box-shadow:0px 4px 0px ", ";}&.active,&:active{box-shadow:0px -4px 0px 0px ", ";}&:disabled{cursor:inherit;box-shadow:none;", "}&:focus{box-shadow:none;border:1px solid ", ";}"], p.variant === 'primary' ? "color: ".concat(JF_COLOR.OFF_WHITE, ";\n        background-color: ").concat(JF_COLOR.OFF_BLACK, ";\n        border-color: ").concat(JF_COLOR.OFF_WHITE, ";") : "color: ".concat(JF_COLOR.OFF_BLACK, "; \n        background-color:  ").concat(JF_COLOR.OFF_WHITE, ";\n        border-color: ").concat(JF_COLOR.OFF_BLACK, ";"), p.size === 'small' ? "padding: 12px 32px;" : "padding: 22px 32px;", JF_COLOR.GREY_SHADOW, EYEBROW_MOBILE, JF_COLOR.GREY_SHADOW, JF_COLOR.GREY_SHADOW, p.variant === 'primary' ? "background-color: ".concat(JF_COLOR.GREY_400, ";\n          color: ").concat(JF_COLOR.OFF_BLACK, ";") : "background-color: ".concat(JF_COLOR.GREY_50), JF_COLOR.GREY_BORDER);
 };
 var StyledButton = styled.button.withConfig({
   displayName: "styles__StyledButton",
   componentId: "sc-17d8tll-2"
-})(["cursor:pointer;user-select:none;height:fit-content;display:flex;align-items:center;justify-content:center;flex:none;white-space:normal;word-wrap:break-word;vertical-align:middle;@media only (min-width:599px){width:fit-content;}", ""], variantStyles);
+})(["cursor:pointer;user-select:none;height:fit-content;display:flex;align-items:center;justify-content:center;flex:none;white-space:normal;word-wrap:break-word;vertical-align:middle;width:fit-content;", ""], variantStyles);
 
 var _excluded = ["children", "variant", "size", "loading", "hasIcon"];
 /**

package/dist/src/index.js

@@ -233,12 +233,12 @@ var variantStyles = function variantStyles(p) {
   if (p.loading) {
     return styled.css(["", "}", " border-width:1px;border-style:solid;border-radius:100px;", ";"], p.variant === 'primary' ? "color: ".concat(JF_COLOR.OFF_WHITE, ";\n          background-color: ").concat(JF_COLOR.GREY_600, ";\n          border-color: ").concat(JF_COLOR.OFF_WHITE, ";") : "color: ".concat(JF_COLOR.OFF_BLACK, "; \n          background-color:  ").concat(JF_COLOR.OFF_WHITE, ";\n          border-color: ").concat(JF_COLOR.OFF_BLACK, ";"), p.size === 'small' ? "padding: 12px 32px;" : "padding: 22px 32px;", EYEBROW_MOBILE);
   }
-  return styled.css(["", "}", " border-width:1px;border-style:solid;border-radius:100px;box-shadow:4px 4px 0px ", ";", " transition:all 0.1s linear;transform:translateX(0rem);&:hover{box-shadow:0px 4px 0px ", ";}&.active,&:active{box-shadow:0px -4px 0px 0px ", ";}&:disabled{cursor:inherit;box-shadow:none;", "}&:focus{box-shadow:none;border:1px solid ", ";}"], p.variant === 'primary' ? "color: ".concat(JF_COLOR.OFF_WHITE, ";\n        background-color: ").concat(JF_COLOR.OFF_BLACK, ";\n        border-color: ").concat(JF_COLOR.OFF_WHITE, ";") : "color: ".concat(JF_COLOR.OFF_BLACK, "; \n        background-color:  ").concat(JF_COLOR.OFF_WHITE, ";\n        border-color: ").concat(JF_COLOR.OFF_BLACK, ";"), p.size === 'small' ? "padding: 12px 32px;" : "padding: 22px 32px;", JF_COLOR.GREY_SHADOW, EYEBROW_MOBILE, JF_COLOR.GREY_SHADOW, JF_COLOR.GREY_SHADOW, p.variant === 'primary' ? "background-color: ".concat(JF_COLOR.GREY_400, ";\n          color: ").concat(JF_COLOR.OFF_BLACK, ";") : "background-color: ".concat(JF_COLOR.GREY_50), JF_COLOR.GREY_BORDER);
+  return styled.css(["", "}", " border-width:1px;border-style:solid;border-radius:100px;box-shadow:4px 4px 0px ", ";@media (max-width:599px){width:inherit;}", " transition:all 0.1s linear;transform:translateX(0rem);&:hover{box-shadow:0px 4px 0px ", ";}&.active,&:active{box-shadow:0px -4px 0px 0px ", ";}&:disabled{cursor:inherit;box-shadow:none;", "}&:focus{box-shadow:none;border:1px solid ", ";}"], p.variant === 'primary' ? "color: ".concat(JF_COLOR.OFF_WHITE, ";\n        background-color: ").concat(JF_COLOR.OFF_BLACK, ";\n        border-color: ").concat(JF_COLOR.OFF_WHITE, ";") : "color: ".concat(JF_COLOR.OFF_BLACK, "; \n        background-color:  ").concat(JF_COLOR.OFF_WHITE, ";\n        border-color: ").concat(JF_COLOR.OFF_BLACK, ";"), p.size === 'small' ? "padding: 12px 32px;" : "padding: 22px 32px;", JF_COLOR.GREY_SHADOW, EYEBROW_MOBILE, JF_COLOR.GREY_SHADOW, JF_COLOR.GREY_SHADOW, p.variant === 'primary' ? "background-color: ".concat(JF_COLOR.GREY_400, ";\n          color: ").concat(JF_COLOR.OFF_BLACK, ";") : "background-color: ".concat(JF_COLOR.GREY_50), JF_COLOR.GREY_BORDER);
 };
 var StyledButton = styled__default["default"].button.withConfig({
   displayName: "styles__StyledButton",
   componentId: "sc-17d8tll-2"
-})(["cursor:pointer;user-select:none;height:fit-content;display:flex;align-items:center;justify-content:center;flex:none;white-space:normal;word-wrap:break-word;vertical-align:middle;@media only (min-width:599px){width:fit-content;}", ""], variantStyles);
+})(["cursor:pointer;user-select:none;height:fit-content;display:flex;align-items:center;justify-content:center;flex:none;white-space:normal;word-wrap:break-word;vertical-align:middle;width:fit-content;", ""], variantStyles);
 
 var _excluded = ["children", "variant", "size", "loading", "hasIcon"];
 /**

package/package.json

@@ -2,7 +2,7 @@
   "name": "@justfixnyc/component-library",
   "description": "JustFix Component Library",
   "license": "MIT",
-  "version": "0.25.13",
+  "version": "0.26.0",
   "main": "dist/src/index.js",
   "module": "dist/src/index.d.ts",
   "files": [