@spaced-out/ui-design-system 0.3.19 → 0.3.21

package/.github/workflows/pages.yml

@@ -32,8 +32,8 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
+        uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
         with:
           node-version: '18.20.5'
       - name: Install and Build 🔧
@@ -47,12 +47,12 @@ jobs:
           ls ${{ github.workspace }}
           echo "🍏 This job's status is ${{ job.status }}."
       - name: Setup Pages
-        uses: actions/configure-pages@v2
+        uses: actions/configure-pages@v5
       - name: Upload artifact
-        uses: actions/upload-pages-artifact@v1
+        uses: actions/upload-pages-artifact@v3
         with:
           # Upload storybook-static folder's content
           path: './storybook-static/'
       - name: Deploy to GitHub Pages
         id: deployment
-        uses: actions/deploy-pages@v1
+        uses: actions/deploy-pages@v4

package/.github/workflows/publish_to_npm.yml

@@ -32,14 +32,14 @@ jobs:
       # Added fetch-depth to fetch complete history of repo. TODO(Nishant): Customize?
       # TODO(Nishant): update with a org bot token instead of personal token
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
         with:
           token: ${{ secrets.NPM_PUBLISH_USER_ACCESS_TOKEN }}
           fetch-depth: '0'
 
       # Setup Node.js environment
       - name: Setup Node.js
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v4
         with:
           registry-url: https://registry.npmjs.org/
           node-version: '18.20.5'

package/.storybook/manager-head.html

@@ -58,10 +58,6 @@
     color: #efebfa !important;
   }
 
-  .sidebar-item[data-selected='true'] {
-    background: #5c34cd !important;
-  }
-
   .search-field input {
     border-color: #efebfa !important;
   }
@@ -103,4 +99,28 @@
     /* add story ui button immediately following the search bar */
     display: none;
   }
+
+  .sidebar-item:hover,
+  .sidebar-item:focus {
+    background: #1f1f36 !important;
+  }
+
+  .sidebar-item > a,
+  .sidebar-item > button {
+    color: #d3d2e0 !important;
+  }
+
+  .sidebar-item:hover > a,
+  .sidebar-item:hover > button {
+    color: #fff !important;
+  }
+
+  .sidebar-item[data-selected='true'] {
+    background: #5c34cd !important;
+  }
+
+  .sidebar-item[data-selected='true'] > a,
+  .sidebar-item[data-selected='true'] > button {
+    color: #fff !important;
+  }
 </style>

package/CHANGELOG.md

@@ -2,6 +2,26 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.3.21](https://github.com/spaced-out/ui-design-system/compare/v0.3.20...v0.3.21) (2025-02-05)
+
+
+### Bug Fixes
+
+* add class name for radio in radio button ([#319](https://github.com/spaced-out/ui-design-system/issues/319)) ([971a645](https://github.com/spaced-out/ui-design-system/commit/971a645761da0620d643c99d25f941b91b5aab66))
+
+### [0.3.20](https://github.com/spaced-out/ui-design-system/compare/v0.3.19...v0.3.20) (2025-02-03)
+
+
+### Features
+
+* storybook 8.5 upgrade and related changes ([ff1245c](https://github.com/spaced-out/ui-design-system/commit/ff1245cf0e0fe3599fcd92c9078f08238bab80c3))
+
+
+### Bug Fixes
+
+* password toggle icon fix to disallow accessing password ([#318](https://github.com/spaced-out/ui-design-system/issues/318)) ([5ff9b38](https://github.com/spaced-out/ui-design-system/commit/5ff9b3808cd62fd98f655b08b2898f07ec9b5003))
+* upgraded several publish packages ([863857a](https://github.com/spaced-out/ui-design-system/commit/863857a8fb69d1eabf9a2ec70498965834861bf5))
+
 ### [0.3.19](https://github.com/spaced-out/ui-design-system/compare/v0.3.18...v0.3.19) (2025-01-27)
 
 

package/lib/components/Input/Input.js

@@ -60,6 +60,7 @@ const Input_ = (props, ref) => {
     onKeyDown,
     disallowExponents,
     hideNumberSpinner,
+    hidePasswordToggleIcon,
     ...inputProps
   } = props;
   const [showPassword, setShowPassword] = React.useState(false);
@@ -131,6 +132,7 @@ const Input_ = (props, ref) => {
     isEmail: type === 'email',
     isPassword: type === 'password',
     showPassword: showPassword,
+    showPasswordToggleIcon: !hidePasswordToggleIcon,
     isLocked: locked,
     isDisabled: disabled,
     onClick: handleRightIconClick,
@@ -150,6 +152,7 @@ const RightInputIcon = _ref => {
     isEmail,
     isPassword,
     showPassword,
+    showPasswordToggleIcon,
     isLocked,
     isDisabled,
     iconRightName,
@@ -171,7 +174,7 @@ const RightInputIcon = _ref => {
       type: iconRightType
     }, rightIconProps));
   }
-  if (isPassword) {
+  if (isPassword && showPasswordToggleIcon) {
     return /*#__PURE__*/React.createElement(_Icon.Icon, _extends({
       name: showPassword ? 'eye-slash' : 'eye',
       color: isDisabled ? 'disabled' : 'secondary',

package/lib/components/Input/Input.js.flow

@@ -82,6 +82,7 @@ export type InputProps = {
    * appropriate default value if neither of those is provided) are valid. */
   step?: string,
   hideNumberSpinner?: boolean,
+  hidePasswordToggleIcon?: boolean,
   ...
 };
 
@@ -114,6 +115,7 @@ const Input_ = (props: InputProps, ref): React.Node => {
     onKeyDown,
     disallowExponents,
     hideNumberSpinner,
+    hidePasswordToggleIcon,
     ...inputProps
   } = props;
 
@@ -215,6 +217,7 @@ const Input_ = (props: InputProps, ref): React.Node => {
           isEmail={type === 'email'}
           isPassword={type === 'password'}
           showPassword={showPassword}
+          showPasswordToggleIcon={!hidePasswordToggleIcon}
           isLocked={locked}
           isDisabled={disabled}
           onClick={handleRightIconClick}
@@ -244,6 +247,7 @@ const RightInputIcon = ({
   isEmail,
   isPassword,
   showPassword,
+  showPasswordToggleIcon,
   isLocked,
   isDisabled,
   iconRightName,
@@ -253,6 +257,7 @@ const RightInputIcon = ({
   isEmail?: boolean,
   isPassword?: boolean,
   showPassword?: boolean,
+  showPasswordToggleIcon?: boolean,
   isLocked?: boolean,
   isDisabled?: boolean,
   onClick?: ?(SyntheticEvent<HTMLElement>) => mixed,
@@ -281,7 +286,7 @@ const RightInputIcon = ({
       />
     );
   }
-  if (isPassword) {
+  if (isPassword && showPasswordToggleIcon) {
     return (
       <Icon
         name={showPassword ? 'eye-slash' : 'eye'}

package/lib/components/RadioButton/RadioButton.js

@@ -64,7 +64,7 @@ const RadioButton = /*#__PURE__*/React.forwardRef((_ref, forwardRef) => {
       [_RadioButtonModule.default.selected]: checked && !disabled && !error,
       [_RadioButtonModule.default.disabled]: disabled,
       [_RadioButtonModule.default.error]: error && !disabled
-    }),
+    }, classNames?.radio),
     ref: radioInput,
     onChange: onChangeHandler,
     onKeyDown: onKeyDownHandler,

package/lib/components/RadioButton/RadioButton.js.flow

@@ -14,7 +14,7 @@ import css from './RadioButton.module.css';
  * nesting labels is a bad idea.
  */
 
-type ClassNames = $ReadOnly<{wrapper?: string, label?: string}>;
+type ClassNames = $ReadOnly<{wrapper?: string, label?: string, radio?: string}>;
 
 export type RadioButtonProps = {
   children?: React.Node,
@@ -97,12 +97,16 @@ export const RadioButton: React$AbstractComponent<
           type="radio"
           checked={checked}
           disabled={disabled}
-          className={classify(css.radio, {
-            [css.unselected]: !checked && !disabled && !error,
-            [css.selected]: checked && !disabled && !error,
-            [css.disabled]: disabled,
-            [css.error]: error && !disabled,
-          })}
+          className={classify(
+            css.radio,
+            {
+              [css.unselected]: !checked && !disabled && !error,
+              [css.selected]: checked && !disabled && !error,
+              [css.disabled]: disabled,
+              [css.error]: error && !disabled,
+            },
+            classNames?.radio,
+          )}
           ref={radioInput}
           onChange={onChangeHandler}
           onKeyDown={onKeyDownHandler}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spaced-out/ui-design-system",
-  "version": "0.3.19",
+  "version": "0.3.21",
   "main": "index.js",
   "description": "Sense UI components library",
   "author": {
@@ -64,18 +64,18 @@
     "@babel/preset-react": "^7.18.6",
     "@commitlint/cli": "^17.1.2",
     "@commitlint/config-conventional": "^17.1.0",
-    "@storybook/addon-a11y": "^8.4.2",
-    "@storybook/addon-essentials": "^8.4.2",
-    "@storybook/addon-mdx-gfm": "^8.4.2",
-    "@storybook/addon-storysource": "^8.4.2",
-    "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
+    "@storybook/addon-a11y": "^8.5.2",
+    "@storybook/addon-essentials": "^8.5.2",
+    "@storybook/addon-mdx-gfm": "^8.5.2",
+    "@storybook/addon-storysource": "^8.5.2",
+    "@storybook/addon-webpack5-compiler-babel": "^3.0.5",
     "@storybook/addons": "^7.6.17",
-    "@storybook/blocks": "^8.4.2",
-    "@storybook/react": "^8.4.2",
-    "@storybook/react-webpack5": "^8.4.2",
-    "@storybook/test-runner": "^0.19.1",
+    "@storybook/blocks": "^8.5.2",
+    "@storybook/react": "^8.5.2",
+    "@storybook/react-webpack5": "^8.5.2",
+    "@storybook/test-runner": "^0.21.0",
     "@storybook/testing-react": "^2.0.1",
-    "@storybook/theming": "^8.4.2",
+    "@storybook/theming": "^8.5.2",
     "@testing-library/react": "^11.2.7",
     "all-contributors-cli": "^6.20.0",
     "babel-eslint": "^10.1.0",
@@ -93,7 +93,7 @@
     "eslint-plugin-react": "^7.30.1",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-simple-import-sort": "^8.0.0",
-    "eslint-plugin-storybook": "^0.11.0",
+    "eslint-plugin-storybook": "^0.11.2",
     "eslint-plugin-unused-imports": "^2.0.0",
     "flow-bin": "^0.184.0",
     "gulp": "^4.0.2",
@@ -111,7 +111,7 @@
     "rimraf": "^3.0.2",
     "simple-git": "^3.12.0",
     "standard-version": "^9.5.0",
-    "storybook": "^8.4.2",
+    "storybook": "^8.5.2",
     "storybook-css-modules": "^1.0.8",
     "storybook-vscode-component": "^1.0.9",
     "style-dictionary": "^3.7.1"