diff --git a/CHANGELOG.md b/CHANGELOG.md index 44cf7e37c2..4b63920d6e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,12 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +### [0.14.1](https://github.com/okta/odyssey/compare/v0.14.0...v0.14.1) (2022-06-21) + +### Features + +- **odyssey-react-mui:** add component themes, update palette + type ([c4fd294](https://github.com/okta/odyssey/commit/c4fd29488ba333236ce2ea478b2b407337ea08cc)) + ## [0.14.0](https://github.com/okta/odyssey/compare/v0.13.0...v0.14.0) (2022-05-26) ### ⚠ BREAKING CHANGES diff --git a/README.md b/README.md index 2221d9efd3..1adac3f12c 100644 --- a/README.md +++ b/README.md @@ -16,6 +16,7 @@ Build and design consistent, efficient, and accessible UIs for all Okta users. | [@okta/odyssey-babel-loader](https://github.com/okta/odyssey/blob/master/packages/odyssey-babel-loader/README.md) | Babel webpack loader | | [@okta/odyssey-react-theme](https://github.com/okta/odyssey/blob/master/packages/odyssey-react-theme/README.md) | React theme logic | | [@okta/odyssey-react](https://github.com/okta/odyssey/blob/master/packages/odyssey-react/README.md) | React components | +| [@okta/odyssey-react-mui](https://github.com/okta/odyssey/blob/master/packages/odyssey-react-mui/README.md) | React MUI components | ## Browser Support diff --git a/lerna.json b/lerna.json index 6ebc738857..6b7ea7ced9 100644 --- a/lerna.json +++ b/lerna.json @@ -1,5 +1,5 @@ { - "version": "0.14.0", + "version": "0.14.1", "npmClient": "yarn", "changelogPreset": "@okta/conventional-changelog-odyssey", "useWorkspaces": true, diff --git a/package.json b/package.json index 243afce49e..196f1ab12d 100644 --- a/package.json +++ b/package.json @@ -30,10 +30,10 @@ }, "devDependencies": { "@commitlint/cli": "^14.0.0", - "@okta/odyssey-commitlint": "^0.14.0", - "@okta/odyssey-eslint-config": "^0.14.0", - "@okta/odyssey-lint-staged": "^0.14.0", - "@okta/odyssey-stylelint": "^0.14.0", + "@okta/odyssey-commitlint": "^0.14.1", + "@okta/odyssey-eslint-config": "^0.14.1", + "@okta/odyssey-lint-staged": "^0.14.1", + "@okta/odyssey-stylelint": "^0.14.1", "eslint": "^7.27.0", "husky": "^7.0.2", "lerna": "4.0.0", diff --git a/packages/babel-plugin-fully-specified/CHANGELOG.md b/packages/babel-plugin-fully-specified/CHANGELOG.md index b225a65282..f977b1d80f 100644 --- a/packages/babel-plugin-fully-specified/CHANGELOG.md +++ b/packages/babel-plugin-fully-specified/CHANGELOG.md @@ -3,6 +3,10 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +### [0.14.1](https://github.com/okta/odyssey/compare/v0.14.0...v0.14.1) (2022-06-21) + +**Note:** Version bump only for package @okta/babel-plugin-fully-specified + ## [0.14.0](https://github.com/okta/odyssey/compare/v0.13.0...v0.14.0) (2022-05-26) **Note:** Version bump only for package @okta/babel-plugin-fully-specified diff --git a/packages/babel-plugin-fully-specified/package.json b/packages/babel-plugin-fully-specified/package.json index 423aafc764..e8a29a6297 100644 --- a/packages/babel-plugin-fully-specified/package.json +++ b/packages/babel-plugin-fully-specified/package.json @@ -1,6 +1,6 @@ { "name": "@okta/babel-plugin-fully-specified", - "version": "0.14.0", + "version": "0.14.1", "private": true, "description": "Babel plugin to generate fully specified ESM module syntax", "author": "Okta, Inc.", @@ -22,8 +22,8 @@ }, "devDependencies": { "@babel/core": "^7.15.0", - "@okta/odyssey-lifecycle": "^0.14.0", - "@okta/odyssey-typescript": "^0.14.0", + "@okta/odyssey-lifecycle": "^0.14.1", + "@okta/odyssey-typescript": "^0.14.1", "babel-jest": "^26.6.3", "jest": "^26.6.3", "typescript": "^4.4.4" diff --git a/packages/browserslist-config-odyssey/CHANGELOG.md b/packages/browserslist-config-odyssey/CHANGELOG.md index 39fa9a6ac8..c18d360c59 100644 --- a/packages/browserslist-config-odyssey/CHANGELOG.md +++ b/packages/browserslist-config-odyssey/CHANGELOG.md @@ -3,6 +3,10 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +### [0.14.1](https://github.com/okta/odyssey/compare/v0.14.0...v0.14.1) (2022-06-21) + +**Note:** Version bump only for package @okta/browserslist-config-odyssey + ## [0.14.0](https://github.com/okta/odyssey/compare/v0.13.0...v0.14.0) (2022-05-26) **Note:** Version bump only for package @okta/browserslist-config-odyssey diff --git a/packages/browserslist-config-odyssey/package.json b/packages/browserslist-config-odyssey/package.json index 08c8ba206c..c6b705140c 100644 --- a/packages/browserslist-config-odyssey/package.json +++ b/packages/browserslist-config-odyssey/package.json @@ -1,6 +1,6 @@ { "name": "@okta/browserslist-config-odyssey", - "version": "0.14.0", + "version": "0.14.1", "description": "Browserslist config for Odyssey, Okta's design system", "author": "Okta, Inc.", "license": "Apache-2.0", @@ -16,8 +16,8 @@ "prepack": "yarn exec prepack" }, "devDependencies": { - "@okta/odyssey-lifecycle": "^0.14.0", - "@okta/odyssey-typescript": "^0.14.0", + "@okta/odyssey-lifecycle": "^0.14.1", + "@okta/odyssey-typescript": "^0.14.1", "typescript": "^4.4.4" } } diff --git a/packages/conventional-changelog-odyssey/CHANGELOG.md b/packages/conventional-changelog-odyssey/CHANGELOG.md index f4df8ec483..f0a60c7e7c 100644 --- a/packages/conventional-changelog-odyssey/CHANGELOG.md +++ b/packages/conventional-changelog-odyssey/CHANGELOG.md @@ -3,6 +3,10 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +### [0.14.1](https://github.com/okta/odyssey/compare/v0.14.0...v0.14.1) (2022-06-21) + +**Note:** Version bump only for package @okta/conventional-changelog-odyssey + ## [0.14.0](https://github.com/okta/odyssey/compare/v0.13.0...v0.14.0) (2022-05-26) **Note:** Version bump only for package @okta/conventional-changelog-odyssey diff --git a/packages/conventional-changelog-odyssey/package.json b/packages/conventional-changelog-odyssey/package.json index ded18abb67..fa8e047cfb 100644 --- a/packages/conventional-changelog-odyssey/package.json +++ b/packages/conventional-changelog-odyssey/package.json @@ -1,6 +1,6 @@ { "name": "@okta/conventional-changelog-odyssey", - "version": "0.14.0", + "version": "0.14.1", "main": "index.js", "author": "Okta, Inc.", "license": "Apache-2.0", diff --git a/packages/eslint-plugin-odyssey/CHANGELOG.md b/packages/eslint-plugin-odyssey/CHANGELOG.md index 2d7b5215a2..a13ff373cf 100644 --- a/packages/eslint-plugin-odyssey/CHANGELOG.md +++ b/packages/eslint-plugin-odyssey/CHANGELOG.md @@ -3,6 +3,10 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +### [0.14.1](https://github.com/okta/odyssey/compare/v0.14.0...v0.14.1) (2022-06-21) + +**Note:** Version bump only for package @okta/eslint-plugin-odyssey + ## [0.14.0](https://github.com/okta/odyssey/compare/v0.13.0...v0.14.0) (2022-05-26) **Note:** Version bump only for package @okta/eslint-plugin-odyssey diff --git a/packages/eslint-plugin-odyssey/package.json b/packages/eslint-plugin-odyssey/package.json index e465fcadfd..aa7ea5d735 100644 --- a/packages/eslint-plugin-odyssey/package.json +++ b/packages/eslint-plugin-odyssey/package.json @@ -1,6 +1,6 @@ { "name": "@okta/eslint-plugin-odyssey", - "version": "0.14.0", + "version": "0.14.1", "main": "src/index.js", "author": "Okta, Inc.", "license": "Apache-2.0", diff --git a/packages/odyssey-babel-loader/CHANGELOG.md b/packages/odyssey-babel-loader/CHANGELOG.md index cb3f7ea7f7..ab0a604f81 100644 --- a/packages/odyssey-babel-loader/CHANGELOG.md +++ b/packages/odyssey-babel-loader/CHANGELOG.md @@ -3,6 +3,10 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +### [0.14.1](https://github.com/okta/odyssey/compare/v0.14.0...v0.14.1) (2022-06-21) + +**Note:** Version bump only for package @okta/odyssey-babel-loader + ## [0.14.0](https://github.com/okta/odyssey/compare/v0.13.0...v0.14.0) (2022-05-26) **Note:** Version bump only for package @okta/odyssey-babel-loader diff --git a/packages/odyssey-babel-loader/package.json b/packages/odyssey-babel-loader/package.json index 43a5e58e2e..a08cd0ba53 100644 --- a/packages/odyssey-babel-loader/package.json +++ b/packages/odyssey-babel-loader/package.json @@ -1,6 +1,6 @@ { "name": "@okta/odyssey-babel-loader", - "version": "0.14.0", + "version": "0.14.1", "description": "Babel webpack loader for Odyssey, Okta's design system", "author": "Okta, Inc.", "license": "Apache-2.0", @@ -19,7 +19,7 @@ }, "devDependencies": { "@babel/core": "^7.15.0", - "@okta/odyssey-lifecycle": "^0.14.0", + "@okta/odyssey-lifecycle": "^0.14.1", "webpack": "4.46.0" } } diff --git a/packages/odyssey-babel-plugin/CHANGELOG.md b/packages/odyssey-babel-plugin/CHANGELOG.md index 6d94fb406b..8722f7d336 100644 --- a/packages/odyssey-babel-plugin/CHANGELOG.md +++ b/packages/odyssey-babel-plugin/CHANGELOG.md @@ -3,6 +3,10 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +### [0.14.1](https://github.com/okta/odyssey/compare/v0.14.0...v0.14.1) (2022-06-21) + +**Note:** Version bump only for package @okta/odyssey-babel-plugin + ## [0.14.0](https://github.com/okta/odyssey/compare/v0.13.0...v0.14.0) (2022-05-26) **Note:** Version bump only for package @okta/odyssey-babel-plugin diff --git a/packages/odyssey-babel-plugin/package.json b/packages/odyssey-babel-plugin/package.json index e3f01d767c..1b029373eb 100644 --- a/packages/odyssey-babel-plugin/package.json +++ b/packages/odyssey-babel-plugin/package.json @@ -1,6 +1,6 @@ { "name": "@okta/odyssey-babel-plugin", - "version": "0.14.0", + "version": "0.14.1", "description": "Babel plugin for Odyssey, Okta's design system", "author": "Okta, Inc.", "license": "Apache-2.0", @@ -23,9 +23,9 @@ }, "devDependencies": { "@babel/core": "^7.15.0", - "@okta/odyssey-lifecycle": "^0.14.0", - "@okta/odyssey-postcss-preset": "^0.14.0", - "@okta/odyssey-typescript": "^0.14.0", + "@okta/odyssey-lifecycle": "^0.14.1", + "@okta/odyssey-postcss-preset": "^0.14.1", + "@okta/odyssey-typescript": "^0.14.1", "babel-jest": "^26.6.3", "jest": "^26.6.3", "postcss": "^8.3.6", diff --git a/packages/odyssey-babel-preset/CHANGELOG.md b/packages/odyssey-babel-preset/CHANGELOG.md index 05b7e7dad8..df2865b301 100644 --- a/packages/odyssey-babel-preset/CHANGELOG.md +++ b/packages/odyssey-babel-preset/CHANGELOG.md @@ -3,6 +3,10 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +### [0.14.1](https://github.com/okta/odyssey/compare/v0.14.0...v0.14.1) (2022-06-21) + +**Note:** Version bump only for package @okta/odyssey-babel-preset + ## [0.14.0](https://github.com/okta/odyssey/compare/v0.13.0...v0.14.0) (2022-05-26) **Note:** Version bump only for package @okta/odyssey-babel-preset diff --git a/packages/odyssey-babel-preset/package.json b/packages/odyssey-babel-preset/package.json index 71737bf460..0f7c98f015 100644 --- a/packages/odyssey-babel-preset/package.json +++ b/packages/odyssey-babel-preset/package.json @@ -1,6 +1,6 @@ { "name": "@okta/odyssey-babel-preset", - "version": "0.14.0", + "version": "0.14.1", "description": "Babel preset for Odyssey, Okta's design system", "author": "Okta, Inc.", "license": "Apache-2.0", @@ -20,11 +20,11 @@ "@babel/preset-env": "^7.15.0", "@babel/preset-react": "^7.14.5", "@babel/preset-typescript": "^7.15.0", - "@okta/odyssey-babel-plugin": "^0.14.0" + "@okta/odyssey-babel-plugin": "^0.14.1" }, "devDependencies": { - "@okta/odyssey-lifecycle": "^0.14.0", - "@okta/odyssey-typescript": "^0.14.0", + "@okta/odyssey-lifecycle": "^0.14.1", + "@okta/odyssey-typescript": "^0.14.1", "@types/babel__core": "^7.1.15", "typescript": "^4.4.4" } diff --git a/packages/odyssey-commitlint/CHANGELOG.md b/packages/odyssey-commitlint/CHANGELOG.md index df1656480f..b05d67aa0b 100644 --- a/packages/odyssey-commitlint/CHANGELOG.md +++ b/packages/odyssey-commitlint/CHANGELOG.md @@ -3,6 +3,10 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +### [0.14.1](https://github.com/okta/odyssey/compare/v0.14.0...v0.14.1) (2022-06-21) + +**Note:** Version bump only for package @okta/odyssey-commitlint + ## [0.14.0](https://github.com/okta/odyssey/compare/v0.13.0...v0.14.0) (2022-05-26) **Note:** Version bump only for package @okta/odyssey-commitlint diff --git a/packages/odyssey-commitlint/package.json b/packages/odyssey-commitlint/package.json index f6e11d5e30..b3ccf5f127 100644 --- a/packages/odyssey-commitlint/package.json +++ b/packages/odyssey-commitlint/package.json @@ -1,6 +1,6 @@ { "name": "@okta/odyssey-commitlint", - "version": "0.14.0", + "version": "0.14.1", "main": "src/index.js", "author": "Okta, Inc.", "license": "Apache-2.0", diff --git a/packages/odyssey-design-tokens/CHANGELOG.md b/packages/odyssey-design-tokens/CHANGELOG.md index 1837fd2309..dcaf445520 100644 --- a/packages/odyssey-design-tokens/CHANGELOG.md +++ b/packages/odyssey-design-tokens/CHANGELOG.md @@ -3,6 +3,10 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +### [0.14.1](https://github.com/okta/odyssey/compare/v0.14.0...v0.14.1) (2022-06-21) + +**Note:** Version bump only for package @okta/odyssey-design-tokens + ## [0.14.0](https://github.com/okta/odyssey/compare/v0.13.0...v0.14.0) (2022-05-26) **Note:** Version bump only for package @okta/odyssey-design-tokens diff --git a/packages/odyssey-design-tokens/package.json b/packages/odyssey-design-tokens/package.json index 4133062468..72807ac9bd 100644 --- a/packages/odyssey-design-tokens/package.json +++ b/packages/odyssey-design-tokens/package.json @@ -1,6 +1,6 @@ { "name": "@okta/odyssey-design-tokens", - "version": "0.14.0", + "version": "0.14.1", "description": "Design tokens for Odyssey, Okta's design system", "author": "Okta, Inc.", "license": "Apache-2.0", @@ -8,6 +8,7 @@ "module": "dist/index.js", "types": "dist/index.d.ts", "type": "module", + "sideEffects": false, "exports": { ".": { "default": "./dist/index.js" @@ -19,7 +20,7 @@ "directory": "packages/odyssey-design-tokens" }, "devDependencies": { - "@okta/odyssey-lifecycle": "^0.14.0", + "@okta/odyssey-lifecycle": "^0.14.1", "style-dictionary": "^3.0.1" }, "scripts": { diff --git a/packages/odyssey-eslint-config/CHANGELOG.md b/packages/odyssey-eslint-config/CHANGELOG.md index 55a7c24ba2..8680da70fc 100644 --- a/packages/odyssey-eslint-config/CHANGELOG.md +++ b/packages/odyssey-eslint-config/CHANGELOG.md @@ -3,6 +3,10 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +### [0.14.1](https://github.com/okta/odyssey/compare/v0.14.0...v0.14.1) (2022-06-21) + +**Note:** Version bump only for package @okta/odyssey-eslint-config + ## [0.14.0](https://github.com/okta/odyssey/compare/v0.13.0...v0.14.0) (2022-05-26) **Note:** Version bump only for package @okta/odyssey-eslint-config diff --git a/packages/odyssey-eslint-config/package.json b/packages/odyssey-eslint-config/package.json index 19e0a67cb5..5dbf4d3515 100644 --- a/packages/odyssey-eslint-config/package.json +++ b/packages/odyssey-eslint-config/package.json @@ -1,12 +1,12 @@ { "name": "@okta/odyssey-eslint-config", - "version": "0.14.0", + "version": "0.14.1", "main": "src/index.js", "author": "Okta, Inc.", "license": "Apache-2.0", "private": true, "dependencies": { - "@okta/eslint-plugin-odyssey": "^0.14.0", + "@okta/eslint-plugin-odyssey": "^0.14.1", "@typescript-eslint/eslint-plugin": "^4.31.1", "@typescript-eslint/parser": "^4.31.1", "eslint-config-prettier": "^8.3.0", diff --git a/packages/odyssey-icons/CHANGELOG.md b/packages/odyssey-icons/CHANGELOG.md index 91ebe27718..d837171a74 100644 --- a/packages/odyssey-icons/CHANGELOG.md +++ b/packages/odyssey-icons/CHANGELOG.md @@ -3,6 +3,10 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +### [0.14.1](https://github.com/okta/odyssey/compare/v0.14.0...v0.14.1) (2022-06-21) + +**Note:** Version bump only for package @okta/odyssey-icons + ## [0.14.0](https://github.com/okta/odyssey/compare/v0.13.0...v0.14.0) (2022-05-26) **Note:** Version bump only for package @okta/odyssey-icons diff --git a/packages/odyssey-icons/package.json b/packages/odyssey-icons/package.json index f2d1a5a8b7..0fe4c4dd3b 100644 --- a/packages/odyssey-icons/package.json +++ b/packages/odyssey-icons/package.json @@ -1,6 +1,6 @@ { "name": "@okta/odyssey-icons", - "version": "0.14.0", + "version": "0.14.1", "private": true, "description": "The home for Odyssey's supported icons.", "homepage": "https://github.com/okta/odyssey", diff --git a/packages/odyssey-ie-11-sandbox/CHANGELOG.md b/packages/odyssey-ie-11-sandbox/CHANGELOG.md index e929b7586e..a1066f5150 100644 --- a/packages/odyssey-ie-11-sandbox/CHANGELOG.md +++ b/packages/odyssey-ie-11-sandbox/CHANGELOG.md @@ -3,6 +3,10 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +### [0.14.1](https://github.com/okta/odyssey/compare/v0.14.0...v0.14.1) (2022-06-21) + +**Note:** Version bump only for package @okta/odyssey-ie-11-sandbox + ## [0.14.0](https://github.com/okta/odyssey/compare/v0.13.0...v0.14.0) (2022-05-26) **Note:** Version bump only for package @okta/odyssey-ie-11-sandbox diff --git a/packages/odyssey-ie-11-sandbox/package.json b/packages/odyssey-ie-11-sandbox/package.json index 7009d719f1..52cf816d2c 100644 --- a/packages/odyssey-ie-11-sandbox/package.json +++ b/packages/odyssey-ie-11-sandbox/package.json @@ -1,6 +1,6 @@ { "name": "@okta/odyssey-ie-11-sandbox", - "version": "0.14.0", + "version": "0.14.1", "private": true, "description": "Testing for IE11", "author": "Okta, Inc.", @@ -17,7 +17,7 @@ "build": "webpack --mode production" }, "dependencies": { - "@okta/odyssey-react": "^0.14.0", + "@okta/odyssey-react": "^0.14.1", "core-js": "^3.21.0", "proxy-polyfill": "^0.3.2", "react": "^17.0.2", @@ -28,8 +28,8 @@ "@babel/preset-env": "7.15.0", "@babel/preset-react": "7.14.5", "@babel/preset-typescript": "7.15.0", - "@okta/browserslist-config-odyssey": "^0.14.0", - "@okta/odyssey-babel-preset": "^0.14.0", + "@okta/browserslist-config-odyssey": "^0.14.1", + "@okta/odyssey-babel-preset": "^0.14.1", "babel-loader": "8.2.2", "css-loader": "3.6.0", "html-webpack-plugin": "4.5.2", diff --git a/packages/odyssey-lifecycle/CHANGELOG.md b/packages/odyssey-lifecycle/CHANGELOG.md index f669a200f7..2cc68fbb19 100644 --- a/packages/odyssey-lifecycle/CHANGELOG.md +++ b/packages/odyssey-lifecycle/CHANGELOG.md @@ -3,6 +3,10 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +### [0.14.1](https://github.com/okta/odyssey/compare/v0.14.0...v0.14.1) (2022-06-21) + +**Note:** Version bump only for package @okta/odyssey-lifecycle + ## [0.14.0](https://github.com/okta/odyssey/compare/v0.13.0...v0.14.0) (2022-05-26) **Note:** Version bump only for package @okta/odyssey-lifecycle diff --git a/packages/odyssey-lifecycle/package.json b/packages/odyssey-lifecycle/package.json index 9e4934ae22..9c66a64242 100644 --- a/packages/odyssey-lifecycle/package.json +++ b/packages/odyssey-lifecycle/package.json @@ -1,6 +1,6 @@ { "name": "@okta/odyssey-lifecycle", - "version": "0.14.0", + "version": "0.14.1", "description": "Lifecycle scripts for lerna and npm", "author": "Okta, Inc.", "license": "Apache-2.0", diff --git a/packages/odyssey-lint-staged/CHANGELOG.md b/packages/odyssey-lint-staged/CHANGELOG.md index 48e78554e5..642c928042 100644 --- a/packages/odyssey-lint-staged/CHANGELOG.md +++ b/packages/odyssey-lint-staged/CHANGELOG.md @@ -3,6 +3,10 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +### [0.14.1](https://github.com/okta/odyssey/compare/v0.14.0...v0.14.1) (2022-06-21) + +**Note:** Version bump only for package @okta/odyssey-lint-staged + ## [0.14.0](https://github.com/okta/odyssey/compare/v0.13.0...v0.14.0) (2022-05-26) **Note:** Version bump only for package @okta/odyssey-lint-staged diff --git a/packages/odyssey-lint-staged/package.json b/packages/odyssey-lint-staged/package.json index 9f0abee801..2fac6cca89 100644 --- a/packages/odyssey-lint-staged/package.json +++ b/packages/odyssey-lint-staged/package.json @@ -1,6 +1,6 @@ { "name": "@okta/odyssey-lint-staged", - "version": "0.14.0", + "version": "0.14.1", "main": "src/index.js", "author": "Okta, Inc.", "license": "Apache-2.0", diff --git a/packages/odyssey-postcss-preset/CHANGELOG.md b/packages/odyssey-postcss-preset/CHANGELOG.md index 4e84a6276a..6a187b8889 100644 --- a/packages/odyssey-postcss-preset/CHANGELOG.md +++ b/packages/odyssey-postcss-preset/CHANGELOG.md @@ -3,6 +3,10 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +### [0.14.1](https://github.com/okta/odyssey/compare/v0.14.0...v0.14.1) (2022-06-21) + +**Note:** Version bump only for package @okta/odyssey-postcss-preset + ## [0.14.0](https://github.com/okta/odyssey/compare/v0.13.0...v0.14.0) (2022-05-26) **Note:** Version bump only for package @okta/odyssey-postcss-preset diff --git a/packages/odyssey-postcss-preset/package.json b/packages/odyssey-postcss-preset/package.json index 3445854321..95e9a3d1e6 100644 --- a/packages/odyssey-postcss-preset/package.json +++ b/packages/odyssey-postcss-preset/package.json @@ -1,6 +1,6 @@ { "name": "@okta/odyssey-postcss-preset", - "version": "0.14.0", + "version": "0.14.1", "description": "Postcss preset for Odyssey, Okta's design system", "author": "Okta, Inc.", "license": "Apache-2.0", @@ -17,7 +17,7 @@ "prepack": "yarn exec prepack" }, "dependencies": { - "@okta/odyssey-postcss-theme": "^0.14.0", + "@okta/odyssey-postcss-theme": "^0.14.1", "autoprefixer": "^10.3.4", "cssnano": "^5.0.8", "loader-utils": "^1.4.0", @@ -25,8 +25,8 @@ "postcss-modules": "^4.2.2" }, "devDependencies": { - "@okta/odyssey-lifecycle": "^0.14.0", - "@okta/odyssey-typescript": "^0.14.0", + "@okta/odyssey-lifecycle": "^0.14.1", + "@okta/odyssey-typescript": "^0.14.1", "@types/cssnano": "^4.0.1", "jest": "^26.6.3", "typescript": "^4.4.4" diff --git a/packages/odyssey-postcss-scss/CHANGELOG.md b/packages/odyssey-postcss-scss/CHANGELOG.md index 4f1e8918ed..a9a92fda90 100644 --- a/packages/odyssey-postcss-scss/CHANGELOG.md +++ b/packages/odyssey-postcss-scss/CHANGELOG.md @@ -3,6 +3,10 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +### [0.14.1](https://github.com/okta/odyssey/compare/v0.14.0...v0.14.1) (2022-06-21) + +**Note:** Version bump only for package @okta/odyssey-postcss-scss + ## [0.14.0](https://github.com/okta/odyssey/compare/v0.13.0...v0.14.0) (2022-05-26) **Note:** Version bump only for package @okta/odyssey-postcss-scss diff --git a/packages/odyssey-postcss-scss/package.json b/packages/odyssey-postcss-scss/package.json index 3f0d5cf7ef..d828d934f7 100644 --- a/packages/odyssey-postcss-scss/package.json +++ b/packages/odyssey-postcss-scss/package.json @@ -1,6 +1,6 @@ { "name": "@okta/odyssey-postcss-scss", - "version": "0.14.0", + "version": "0.14.1", "description": "Postcss scss plugin for Odyssey, Okta's design system", "author": "Okta, Inc.", "license": "Apache-2.0", @@ -20,8 +20,8 @@ "sass": "^1.42.1" }, "devDependencies": { - "@okta/odyssey-lifecycle": "^0.14.0", - "@okta/odyssey-typescript": "^0.14.0", + "@okta/odyssey-lifecycle": "^0.14.1", + "@okta/odyssey-typescript": "^0.14.1", "@types/sass": "^1.16.1", "jest": "^26.6.3", "postcss": "^8.3.6", diff --git a/packages/odyssey-postcss-theme/CHANGELOG.md b/packages/odyssey-postcss-theme/CHANGELOG.md index a53510cb32..a927517e10 100644 --- a/packages/odyssey-postcss-theme/CHANGELOG.md +++ b/packages/odyssey-postcss-theme/CHANGELOG.md @@ -3,6 +3,10 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +### [0.14.1](https://github.com/okta/odyssey/compare/v0.14.0...v0.14.1) (2022-06-21) + +**Note:** Version bump only for package @okta/odyssey-postcss-theme + ## [0.14.0](https://github.com/okta/odyssey/compare/v0.13.0...v0.14.0) (2022-05-26) **Note:** Version bump only for package @okta/odyssey-postcss-theme diff --git a/packages/odyssey-postcss-theme/package.json b/packages/odyssey-postcss-theme/package.json index eb41a0ba8d..e4b497e049 100644 --- a/packages/odyssey-postcss-theme/package.json +++ b/packages/odyssey-postcss-theme/package.json @@ -1,6 +1,6 @@ { "name": "@okta/odyssey-postcss-theme", - "version": "0.14.0", + "version": "0.14.1", "description": "Postcss theme plugin for Odyssey, Okta's design system", "author": "Okta, Inc.", "license": "Apache-2.0", @@ -17,8 +17,8 @@ "prepack": "yarn exec prepack" }, "devDependencies": { - "@okta/odyssey-lifecycle": "^0.14.0", - "@okta/odyssey-typescript": "^0.14.0", + "@okta/odyssey-lifecycle": "^0.14.1", + "@okta/odyssey-typescript": "^0.14.1", "jest": "^26.6.3", "typescript": "^4.4.4" }, diff --git a/packages/odyssey-react-mui/.browserslistrc b/packages/odyssey-react-mui/.browserslistrc new file mode 100644 index 0000000000..b29522ce99 --- /dev/null +++ b/packages/odyssey-react-mui/.browserslistrc @@ -0,0 +1 @@ +extends @okta/browserslist-config-odyssey diff --git a/packages/odyssey-react-mui/.eslintrc.cjs b/packages/odyssey-react-mui/.eslintrc.cjs new file mode 100644 index 0000000000..eb2450c09d --- /dev/null +++ b/packages/odyssey-react-mui/.eslintrc.cjs @@ -0,0 +1,18 @@ +/*! + * Copyright (c) 2021-present, Okta, Inc. and/or its affiliates. All rights reserved. + * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.") + * + * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0. + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT + * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * + * See the License for the specific language governing permissions and limitations under the License. + */ + +module.exports = { + plugins: ["import"], + rules: { + "import/no-default-export": "error", + }, +}; diff --git a/packages/odyssey-react-mui/CHANGELOG.md b/packages/odyssey-react-mui/CHANGELOG.md new file mode 100644 index 0000000000..b5a0cd504a --- /dev/null +++ b/packages/odyssey-react-mui/CHANGELOG.md @@ -0,0 +1,10 @@ +# Change Log + +All notable changes to this project will be documented in this file. +See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. + +### [0.14.1](https://github.com/okta/odyssey/compare/v0.14.0...v0.14.1) (2022-06-21) + +### Features + +- **odyssey-react-mui:** add component themes, update palette + type ([c4fd294](https://github.com/okta/odyssey/commit/c4fd29488ba333236ce2ea478b2b407337ea08cc)) diff --git a/packages/odyssey-react-mui/README.md b/packages/odyssey-react-mui/README.md new file mode 100644 index 0000000000..cce46825f0 --- /dev/null +++ b/packages/odyssey-react-mui/README.md @@ -0,0 +1,64 @@ +# @okta/odyssey-react-mui + +## Production Readiness + +This project has not yet hit version 1.0.0 and is still in active development. + +That said, it is beyond the early alpha stage in some key areas. For some +early-adopters that means it is good enough to use for real things. Some +other people think this means it is not ready yet. + +Even though the project is in development, effort is still made to keep +the API stable. Patch versions are intended for backwards-compatible +changes and minor versions are intended for backwards-incompatible changes. + +If you plan to use this for something real, you should either pin the +exact version (maximum safety) or pin the major and minor versions +(only accept backwards-compatible upgrades). + +## Getting Started + +Install the package and peer dependencies: + +```sh +$ yarn add @okta/odyssey-react-mui @emotion/react @mui/material @mui/icons-material +``` + +Include fonts: + +```html + + + +``` + +Import named ESM exports: + +```js +import { PasswordInput } from "@okta/odyssey-react-mui"; +``` + +## Components + +Components are published in an ESM format transpiled for the modern browsers +within the [Okta supported browser list][1]. These modules can be served +directly to evergreen browsers for simple applications, or further transpiled, +bundled, and polyfilled for advanced use cases and browser support targets. + +[1]: https://help.okta.com/en/prod/Content/Topics/Miscellaneous/Platforms_Browser_OS_Support.htm + +## License + +[Apache Version 2.0](https://github.com/okta/odyssey/blob/master/LICENSE) + +## Support Disclaimer + +This library is community supported and is maintained by members of the Okta team for developers and IT professionals. +This library is not an official Okta product and does not qualify for any Okta support. Anyone who chooses to use this +library must ensure that their implementation meets any applicable legal obligations including any Okta terms and conditions. diff --git a/packages/odyssey-react-mui/babel.config.cjs b/packages/odyssey-react-mui/babel.config.cjs new file mode 100644 index 0000000000..e5c6ecc63b --- /dev/null +++ b/packages/odyssey-react-mui/babel.config.cjs @@ -0,0 +1,91 @@ +/*! + * Copyright (c) 2021-present, Okta, Inc. and/or its affiliates. All rights reserved. + * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.") + * + * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0. + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT + * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * + * See the License for the specific language governing permissions and limitations under the License. + */ + +module.exports = { + presets: [ + [ + "@okta/odyssey-babel-preset", + { + odyssey: false, + react: { + runtime: "classic", + }, + }, + ], + ], + + plugins: [ + [ + "babel-plugin-import", + { + libraryName: "@mui/material", + libraryDirectory: "", + camel2DashComponentName: false, + }, + "core", + ], + [ + "babel-plugin-import", + { + libraryName: "@mui/icons-material", + libraryDirectory: "", + camel2DashComponentName: false, + }, + "icons", + ], + ], + + env: { + production: { + plugins: [ + "@okta/fully-specified", + [ + "babel-plugin-import", + { + libraryName: "@mui/material", + libraryDirectory: "", + camel2DashComponentName: false, + }, + "core", + ], + [ + "babel-plugin-import", + { + libraryName: "@mui/icons-material", + libraryDirectory: "", + camel2DashComponentName: false, + }, + "icons", + ], + ], + presets: [ + [ + "@okta/odyssey-babel-preset", + { + odyssey: false, + env: { + modules: false, + }, + react: { + runtime: "classic", + }, + }, + ], + ], + comments: false, + shouldPrintComment: (val) => { + return /Okta, Inc\.|@license|@preserve/.test(val); + }, + ignore: [/\.test\.|\.stories\./i], + }, + }, +}; diff --git a/packages/odyssey-react-mui/jest.config.cjs b/packages/odyssey-react-mui/jest.config.cjs new file mode 100644 index 0000000000..d233a298a5 --- /dev/null +++ b/packages/odyssey-react-mui/jest.config.cjs @@ -0,0 +1,15 @@ +/*! + * Copyright (c) 2021-present, Okta, Inc. and/or its affiliates. All rights reserved. + * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.") + * + * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0. + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT + * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * + * See the License for the specific language governing permissions and limitations under the License. + */ + +module.exports = { + setupFilesAfterEnv: ["./jest.setup.js"], +}; diff --git a/packages/odyssey-react-mui/jest.setup.js b/packages/odyssey-react-mui/jest.setup.js new file mode 100644 index 0000000000..4232f21e21 --- /dev/null +++ b/packages/odyssey-react-mui/jest.setup.js @@ -0,0 +1,15 @@ +/*! + * Copyright (c) 2021-present, Okta, Inc. and/or its affiliates. All rights reserved. + * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.") + * + * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0. + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT + * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * + * See the License for the specific language governing permissions and limitations under the License. + */ + +import "regenerator-runtime/runtime"; +import "@testing-library/jest-dom"; +import "jest-axe/extend-expect"; diff --git a/packages/odyssey-react-mui/package.json b/packages/odyssey-react-mui/package.json new file mode 100644 index 0000000000..701064bfe9 --- /dev/null +++ b/packages/odyssey-react-mui/package.json @@ -0,0 +1,71 @@ +{ + "name": "@okta/odyssey-react-mui", + "version": "0.14.1", + "description": "React MUI components for Odyssey, Okta's design system", + "author": "Okta, Inc.", + "license": "Apache-2.0", + "main": "dist/index.js", + "module": "dist/index.js", + "types": "dist/index.d.ts", + "type": "module", + "exports": { + ".": { + "default": "./dist/index.js" + } + }, + "repository": { + "type": "git", + "url": "https://github.com/okta/odyssey", + "directory": "packages/odyssey-react-mui" + }, + "dependencies": { + "@okta/odyssey-design-tokens": "^0.14.1" + }, + "devDependencies": { + "@babel/cli": "^7.14.8", + "@babel/core": "^7.15.0", + "@emotion/react": "^11.9.0", + "@mui/icons-material": "^5.8.2", + "@mui/material": "^5.8.2", + "@okta/browserslist-config-odyssey": "^0.14.1", + "@okta/odyssey-babel-preset": "^0.14.1", + "@okta/odyssey-icons": "^0.14.1", + "@okta/odyssey-lifecycle": "^0.14.1", + "@okta/odyssey-typescript": "^0.14.1", + "@testing-library/dom": "^7.28.1", + "@testing-library/jest-dom": "^5.12.0", + "@testing-library/react": "^11.2.7", + "@testing-library/react-hooks": "^7.0.2", + "@testing-library/user-event": "^13.5.0", + "@types/jest-axe": "^3.5.1", + "@types/react": "^17.0.30", + "@types/react-dom": "^17.0.5", + "babel-jest": "^26.6.3", + "babel-plugin-import": "^1.13.5", + "eslint": "^7.27.0", + "jest": "^26.6.3", + "jest-axe": "^5.0.1", + "react": "^17.0.2", + "react-dom": "^17.0.2", + "regenerator-runtime": "^0.13.7", + "stylelint": "^13.13.1", + "typescript": "^4.4.4" + }, + "peerDependencies": { + "@emotion/react": "^11", + "@mui/icons-material": "^5", + "@mui/material": "^5", + "react": "^17", + "react-dom": "^17" + }, + "scripts": { + "lint": "eslint .", + "test": "jest", + "typecheck": "tsc", + "build": "yarn build:clean && yarn build:types && yarn build:source", + "build:clean": "rm -rf dist", + "build:types": "tsc --project tsconfig.production.json", + "build:source": "NODE_ENV=production BROWSERSLIST_ENV=modern babel src --out-dir dist --extensions .js,.jsx,.ts,.tsx --source-maps", + "prepack": "yarn exec prepack" + } +} diff --git a/packages/odyssey-react-mui/src/components/Link/Link.tsx b/packages/odyssey-react-mui/src/components/Link/Link.tsx new file mode 100644 index 0000000000..29ac1d6bd5 --- /dev/null +++ b/packages/odyssey-react-mui/src/components/Link/Link.tsx @@ -0,0 +1,44 @@ +/*! + * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved. + * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.") + * + * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0. + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT + * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * + * See the License for the specific language governing permissions and limitations under the License. + */ + +import React, { forwardRef, ReactElement } from "react"; + +import { Link as MuiLink, SvgIcon } from "@mui/material"; +import type { LinkProps as MuiLinkProps } from "@mui/material"; + +export interface LinkProps extends MuiLinkProps { + icon?: ReactElement; +} + +export const Link = forwardRef( + (props) => { + const { icon, children, target } = props; + return ( + + {icon} + {children} + {target === "_blank" && ( + + + + + + )} + + ); + } +); diff --git a/packages/odyssey-react-mui/src/components/Link/index.tsx b/packages/odyssey-react-mui/src/components/Link/index.tsx new file mode 100644 index 0000000000..36d338cf62 --- /dev/null +++ b/packages/odyssey-react-mui/src/components/Link/index.tsx @@ -0,0 +1,13 @@ +/*! + * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved. + * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.") + * + * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0. + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT + * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * + * See the License for the specific language governing permissions and limitations under the License. + */ + +export * from "./Link"; diff --git a/packages/odyssey-react-mui/src/components/PasswordInput/PasswordInput.test.tsx b/packages/odyssey-react-mui/src/components/PasswordInput/PasswordInput.test.tsx new file mode 100644 index 0000000000..334707f59c --- /dev/null +++ b/packages/odyssey-react-mui/src/components/PasswordInput/PasswordInput.test.tsx @@ -0,0 +1,51 @@ +/*! + * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved. + * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.") + * + * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0. + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT + * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * + * See the License for the specific language governing permissions and limitations under the License. + */ + +import React from "react"; +import { render, screen } from "@testing-library/react"; +import { a11yCheck } from "../../../test"; +import { PasswordInput } from "."; + +const label = "Password"; +const tooltipOnLabel = "Show password"; +const tooltipOffLabel = "Hide password"; + +describe("PasswordInput", () => { + it("renders into the document", () => { + render(); + expect(screen.getByLabelText(label)).toBeVisible(); + }); + + it("has a button that changes the type when clicked", () => { + const tooltipLabel = (isHidden: boolean) => { + return isHidden ? tooltipOnLabel : tooltipOffLabel; + }; + render( + + ); + const inputElement = screen.getByLabelText(label); + expect(inputElement).toHaveValue("Imma password"); + expect(inputElement).toHaveAttribute("type", "password"); + const eyeButton = screen.getByRole("button"); + expect(eyeButton).toBeInTheDocument(); + eyeButton.click(); + expect(inputElement).toHaveAttribute("type", "text"); + }); + + a11yCheck(() => + render() + ); +}); diff --git a/packages/odyssey-react-mui/src/components/PasswordInput/PasswordInput.tsx b/packages/odyssey-react-mui/src/components/PasswordInput/PasswordInput.tsx new file mode 100644 index 0000000000..07a01c54e2 --- /dev/null +++ b/packages/odyssey-react-mui/src/components/PasswordInput/PasswordInput.tsx @@ -0,0 +1,111 @@ +/*! + * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved. + * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.") + * + * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0. + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT + * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * + * See the License for the specific language governing permissions and limitations under the License. + */ + +import React, { forwardRef, useState, useMemo } from "react"; +import type { Ref, ChangeEvent, MouseEvent } from "react"; +import type { OutlinedInputProps, TooltipProps } from "@mui/material"; +import { + Tooltip, + IconButton, + Box, + InputLabel, + OutlinedInput, + InputAdornment, +} from "@mui/material"; +import { Visibility, VisibilityOff } from "@mui/icons-material"; +import { useOid } from "../../utils"; + +interface State { + password: string; + showPassword: boolean; +} + +export interface PasswordInputProps + extends Omit { + ref?: Ref; + defaultValue?: string; + label: string; + tooltipLabel?: + | TooltipProps["title"] + | ((isHidden: boolean) => TooltipProps["title"]); +} + +export const PasswordInput = forwardRef( + (props, ref) => { + const { + tooltipLabel, + id, + label, + defaultValue: password = "", + inputProps, + ...rest + } = props; + + const [values, setValues] = useState({ + password, + showPassword: false, + }); + + const handlePasswordChange = (event: ChangeEvent) => { + setValues({ ...values, password: event.target.value }); + props.onChange?.(event); + }; + + const handleClickShowPassword = () => { + setValues({ + ...values, + showPassword: !values.showPassword, + }); + }; + + const handleMouseDownPassword = (event: MouseEvent) => { + event.preventDefault(); + }; + + const tooltipTitle = useMemo(() => { + return typeof tooltipLabel === "function" + ? tooltipLabel(values.showPassword === false) + : tooltipLabel; + }, [values, tooltipLabel]); + + const oid = useOid(id); + + return ( + + {label} + + + + {values.showPassword ? : } + + + + } + /> + + ); + } +); diff --git a/packages/odyssey-react-mui/src/components/PasswordInput/index.ts b/packages/odyssey-react-mui/src/components/PasswordInput/index.ts new file mode 100644 index 0000000000..adf93d1109 --- /dev/null +++ b/packages/odyssey-react-mui/src/components/PasswordInput/index.ts @@ -0,0 +1,13 @@ +/*! + * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved. + * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.") + * + * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0. + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT + * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * + * See the License for the specific language governing permissions and limitations under the License. + */ + +export * from "./PasswordInput"; diff --git a/packages/odyssey-react-mui/src/components/index.ts b/packages/odyssey-react-mui/src/components/index.ts new file mode 100644 index 0000000000..20072a2e08 --- /dev/null +++ b/packages/odyssey-react-mui/src/components/index.ts @@ -0,0 +1,14 @@ +/*! + * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved. + * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.") + * + * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0. + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT + * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * + * See the License for the specific language governing permissions and limitations under the License. + */ + +export * from "./PasswordInput"; +export * from "./Link"; diff --git a/packages/odyssey-react-mui/src/index.ts b/packages/odyssey-react-mui/src/index.ts new file mode 100644 index 0000000000..2de8dac422 --- /dev/null +++ b/packages/odyssey-react-mui/src/index.ts @@ -0,0 +1,14 @@ +/*! + * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved. + * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.") + * + * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0. + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT + * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * + * See the License for the specific language governing permissions and limitations under the License. + */ + +export * from "./components"; +export * from "./themes"; diff --git a/packages/odyssey-react-mui/src/themes/index.ts b/packages/odyssey-react-mui/src/themes/index.ts new file mode 100644 index 0000000000..19999d380b --- /dev/null +++ b/packages/odyssey-react-mui/src/themes/index.ts @@ -0,0 +1,13 @@ +/*! + * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved. + * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.") + * + * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0. + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT + * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * + * See the License for the specific language governing permissions and limitations under the License. + */ + +export * from "./odyssey"; diff --git a/packages/odyssey-react-mui/src/themes/odyssey/components.ts b/packages/odyssey-react-mui/src/themes/odyssey/components.ts new file mode 100644 index 0000000000..1051cb8b2b --- /dev/null +++ b/packages/odyssey-react-mui/src/themes/odyssey/components.ts @@ -0,0 +1,321 @@ +/*! + * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved. + * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.") + * + * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0. + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT + * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * + * See the License for the specific language governing permissions and limitations under the License. + */ + +import type { ThemeOptions } from "@mui/material"; + +export const components: ThemeOptions["components"] = { + MuiCssBaseline: { + styleOverrides: { + boxSizing: "border-box", + }, + }, + MuiCircularProgress: { + defaultProps: { + size: "1.14285714rem", + thickness: 8, + color: "primary", + disableShrink: false, + variant: "indeterminate", + }, + styleOverrides: { + root: ({ ownerState }) => ({ + ...(ownerState.color !== "inherit" && { + color: "#00297a", + }), + }), + circle: ({ ownerState }) => ({ + ...(ownerState.variant === "indeterminate" && { + strokeDasharray: "160%, 360%", + }), + }), + }, + }, + MuiFormLabel: { + styleOverrides: { + root: { + color: "#1d1d21", + lineHeight: "1.42857143", + fontSize: "1rem", + fontWeight: 600, + }, + }, + }, + MuiInputBase: { + styleOverrides: { + root: { + lineHeight: "1.14285714", + }, + input: { + boxSizing: "border-box", + height: "auto", + }, + }, + }, + MuiTypography: { + defaultProps: { + fontFamily: + "'Public Sans', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Oxygen-Sans', 'Ubuntu', 'Cantarell', 'Helvetica Neue', 'Noto Sans Arabic', sans-serif", + }, + styleOverrides: { + paragraph: { + marginBottom: "1.14285714rem", + }, + }, + }, + MuiLink: { + styleOverrides: { + root: { + color: "#1662dd", + textDecoration: "none", + + "&:hover": { + color: "#1662dd", + textDecoration: "underline", + }, + + "&:focus-visible": { + outlineColor: "#1662dd", + outlineOffset: "2px", + outlineStyle: "solid", + outlineWidth: "1px", + }, + + "&:visited": { + color: "#1662dd", + }, + + ".Link-indicator, .Link-icon": { + display: "inline-block", + height: "1em", + lineHeight: 1, + }, + + ".Link-indicator": { + marginInlineStart: "0.57142857rem", + }, + + ".Link-icon": { + marginInlineEnd: "0.57142857rem", + }, + svg: { + fontSize: "1rem", + height: "1em", + position: "relative", + top: "-0.0625em", + verticalAlign: "middle", + width: "1em", + }, + }, + }, + variants: [ + { + props: { variant: "monochrome" }, + style: { + color: "#1d1d21", + textDecoration: "underline", + + "&:hover": { + color: "#6e6e78", + }, + + "&:focus-visible": { + outlineColor: "#1662dd", + outlineOffset: "2px", + outlineStyle: "solid", + outlineWidth: "1px", + }, + + "&:visited": { + color: "#1d1d21", + }, + }, + }, + ], + }, + MuiButtonBase: { + defaultProps: { + disableRipple: true, + }, + }, + MuiButton: { + defaultProps: { + disableElevation: true, + }, + variants: [ + { + props: { variant: "primary" }, + style: { + fontWeight: 600, + color: "#ffffff", + borderColor: "transparent", + backgroundColor: "#1662dd", + + "&:hover, &:focus-visible": { + backgroundColor: "#00297a", + }, + + "&:active": { + backgroundColor: "#1662dd", + }, + + "&:disabled": { + color: "#ffffff", + backgroundColor: "#a7b5ec", + }, + }, + }, + { + props: { variant: "secondary" }, + style: { + backgroundColor: "#f5f5f6", + borderColor: "#d7d7dc", + color: "#1d1d21", + "&:hover": { + background: "#f2f5ff", + borderColor: "#a7b5ec", + color: "#1662dd", + }, + + "&:focus-visible": { + backgroundColor: "#1662dd", + color: "#1662dd", + }, + + "&:active": { + borderColor: "#1662dd", + }, + + "&:disabled": { + borderColor: "#ebebed", + backgroundColor: "#ebebed", + color: "#8c8c96", + }, + }, + }, + { + props: { variant: "danger" }, + style: { + backgroundColor: "#da372c", + color: "#ffffff", + "&:hover": { + borderColor: "transparent", + backgroundColor: "#640019", + }, + + "&:focus-visible": { + outlineColor: "#f88c90", + backgroundColor: "#640019", + }, + + "&:active": { + borderColor: "transparent", + backgroundColor: "#da372c", + }, + + "&:disabled": { + color: "#ffffff", + borderColor: "#f88c90", + backgroundColor: "#f88c90", + }, + }, + }, + { + props: { variant: "floating" }, + style: { + backgroundColor: "#ffffff", + color: "#1d1d21", + borderColor: "transparent", + + "&:hover, &:focus-visible": { + backgroundColor: "rgba(29, 29, 33, 0.1)", + borderColor: "transparent", + }, + "&:active": { + backgroundColor: "rgba(29, 29, 33, 0.2)", + borderColor: "transparent", + }, + "&:disabled": { + backgroundColor: "rgba(235, 235, 237, 0.6)", + color: "#6e6e78", + borderColor: "transparent", + }, + }, + }, + { + props: { size: "s" }, + style: { + paddingBlock: "calc(0.57142857rem - 1px)", + paddingInline: "calc(0.85714286rem - - 1px)", + fontSize: "1rem", + }, + }, + { + props: { size: "l" }, + style: { + paddingBlock: "calc(1.14285714rem - 1px)", + paddingInline: "calc(1.14285714rem - 1px)", + }, + }, + { + props: { fullWidth: true }, + style: { + display: "block", + width: "100%", + marginBlock: "0", + marginInline: "0", + + "&:not(:last-child)": { + marginBlockEnd: "1.14285714rem", + }, + }, + }, + ], + styleOverrides: { + root: ({ ownerState }) => ({ + ...ownerState, + fontWeight: 600, + paddingBlock: "0.85714286rem", + paddingInline: "0.85714286rem", + display: "inline-block", + position: "relative", + marginBlock: "0", + marginInline: "0", + transitionProperty: + "color, background-color, border-color, outline-offset, outline-color", + transitionDuration: "100ms", + transitionTimingFunction: "linear", + borderWidth: "1px", + borderStyle: "solid", + outlineColor: "transparent", + outlineOffset: "0", + fontSize: "1rem", + lineHeight: "1.14285714", + whiteSpace: "nowrap", + + "& + &": { + marginInlineStart: "0.57142857rem", + }, + + "&:focus-visible": { + outlineOffset: "2px", + outlineStyle: "solid", + outlineWidth: "2px", + }, + + "&:disabled": { + cursor: "not-allowed", + pointerEvents: "inherit", // in order to have cursor: not-allowed, must change pointer-events from 'none' + }, + }), + }, + }, +}; diff --git a/packages/odyssey-react-mui/src/themes/odyssey/components.types.ts b/packages/odyssey-react-mui/src/themes/odyssey/components.types.ts new file mode 100644 index 0000000000..91d76ce48a --- /dev/null +++ b/packages/odyssey-react-mui/src/themes/odyssey/components.types.ts @@ -0,0 +1,78 @@ +/*! + * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved. + * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.") + * + * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0. + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT + * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * + * See the License for the specific language governing permissions and limitations under the License. + */ + +declare module "@mui/material/Link" { + interface LinkPropsVariantOverrides { + default: true; + monochrome: true; + body1: false; + body2: false; + button: false; + caption: false; + h1: false; + h2: false; + h3: false; + h4: false; + h5: false; + h6: false; + inherit: false; + overline: false; + subtitle1: false; + subtitle2: false; + } + + interface LinkPropsUnderlineOverrides { + none: false; + hover: false; + always: false; + } + + interface LinkPropsColorOverrides { + inherit: false; + primary: false; + secondary: false; + error: false; + info: false; + warning: false; + success: false; + } +} +declare module "@mui/material/Button" { + interface ButtonPropsVariantOverrides { + floating: true; + primary: true; + secondary: true; + danger: true; + text: false; + contained: false; + outlined: false; + } + interface ButtonPropsSizeOverrides { + s: true; + m: true; + l: true; + small: false; + medium: false; + large: false; + } + interface ButtonPropsColorOverrides { + inherit: false; + primary: false; + secondary: false; + error: false; + info: false; + warning: false; + success: false; + } +} + +export {}; diff --git a/packages/odyssey-react-mui/src/themes/odyssey/index.ts b/packages/odyssey-react-mui/src/themes/odyssey/index.ts new file mode 100644 index 0000000000..5113a12c01 --- /dev/null +++ b/packages/odyssey-react-mui/src/themes/odyssey/index.ts @@ -0,0 +1,13 @@ +/*! + * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved. + * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.") + * + * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0. + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT + * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * + * See the License for the specific language governing permissions and limitations under the License. + */ + +export { theme as odysseyTheme } from "./theme"; diff --git a/packages/odyssey-react-mui/src/themes/odyssey/palette.ts b/packages/odyssey-react-mui/src/themes/odyssey/palette.ts new file mode 100644 index 0000000000..adfcfb78c0 --- /dev/null +++ b/packages/odyssey-react-mui/src/themes/odyssey/palette.ts @@ -0,0 +1,100 @@ +/*! + * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved. + * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.") + * + * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0. + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT + * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * + * See the License for the specific language governing permissions and limitations under the License. + */ + +import type { ThemeOptions } from "@mui/material"; + +export const palette: ThemeOptions["palette"] = { + mode: "light", + common: { + black: "#1d1d21", + white: "#ffffff", + }, + primary: { + light: "#a7b5ec", + main: "#1662dd", + dark: "#00297a", + contrastText: "#ffffff", + }, + secondary: { + light: "#80C7CA", + main: "#2D8C9E", + dark: "#004650", + contrastText: "#ffffff", + }, + error: { + light: "#f88c90", + main: "#da372c", + dark: "#640019", + contrastText: "#ffffff", + }, + warning: { + light: "#f9dc77", + main: "#ffc61c", + dark: "#663800", + contrastText: "#1d1d21", + }, + info: { + light: "#a7b5ec", + main: "#1662dd", + dark: "#00297a", + contrastText: "#ffffff", + }, + success: { + light: "#84d2b1", + main: "#00b478", + dark: "#00503c", + contrastText: "#ffffff", + }, + grey: { + 50: "#f5f5f6", + 100: "#ebebed", + 200: "#d7d7dc", + 300: "#c1c1c8", + 400: "#aaaab4", + 500: "#8c8c96", + 600: "#6e6e78", + 700: "#585862", + 800: "#41414b", + 900: "#1d1d21", + // These are "Accent" colors. MUI's palette matches them to the standard greys. + A100: "#ebebed", + A200: "#d7d7dc", + A400: "#aaaab4", + A700: "#585862", + }, + text: { + primary: "#1d1d21", + secondary: "#6e6e78", + // We do not currently have a unique disabled color. + disabled: "#6e6e78", + }, + // Currently mapping this to ColorBorderDisplay. + divider: "#d7d7dc", + background: { + paper: "#ffffff", + default: "#ffffff", + }, + action: { + // We have no equivalents here. It's likely we will update these as their uses are discovered. + active: "rgba(0, 0, 0, 0.54)", + hover: "rgba(0, 0, 0, 0.04)", + hoverOpacity: 0.04, + selected: "rgba(0, 0, 0, 0.08)", + selectedOpacity: 0.08, + disabled: "rgba(0, 0, 0, 0.26)", + disabledBackground: "rgba(0, 0, 0, 0.12)", + disabledOpacity: 0.38, + focus: "rgba(0, 0, 0, 0.12)", + focusOpacity: 0.12, + activatedOpacity: 0.12, + }, +}; diff --git a/packages/odyssey-react-mui/src/themes/odyssey/shape.ts b/packages/odyssey-react-mui/src/themes/odyssey/shape.ts new file mode 100644 index 0000000000..cc2236f114 --- /dev/null +++ b/packages/odyssey-react-mui/src/themes/odyssey/shape.ts @@ -0,0 +1,18 @@ +/*! + * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved. + * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.") + * + * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0. + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT + * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * + * See the License for the specific language governing permissions and limitations under the License. + */ + +import type { ThemeOptions } from "@mui/material"; +import * as Tokens from "@okta/odyssey-design-tokens"; + +export const shape: ThemeOptions["shape"] = { + borderRadius: Tokens.BorderRadiusBase, +}; diff --git a/packages/odyssey-react-mui/src/themes/odyssey/spacing.ts b/packages/odyssey-react-mui/src/themes/odyssey/spacing.ts new file mode 100644 index 0000000000..4958557ba0 --- /dev/null +++ b/packages/odyssey-react-mui/src/themes/odyssey/spacing.ts @@ -0,0 +1,27 @@ +/*! + * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved. + * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.") + * + * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0. + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT + * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * + * See the License for the specific language governing permissions and limitations under the License. + */ + +import type { ThemeOptions } from "@mui/material"; +import * as Tokens from "@okta/odyssey-design-tokens"; + +export const spacing: ThemeOptions["spacing"] = [ + 0, + Tokens.SpaceScale0, + Tokens.SpaceScale1, + Tokens.SpaceScale2, + Tokens.SpaceScale3, + Tokens.SpaceScale4, + Tokens.SpaceScale5, + Tokens.SpaceScale6, + Tokens.SpaceScale7, + Tokens.SpaceScale8, +]; diff --git a/packages/odyssey-react-mui/src/themes/odyssey/theme.ts b/packages/odyssey-react-mui/src/themes/odyssey/theme.ts new file mode 100644 index 0000000000..96d12901a3 --- /dev/null +++ b/packages/odyssey-react-mui/src/themes/odyssey/theme.ts @@ -0,0 +1,29 @@ +/*! + * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved. + * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.") + * + * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0. + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT + * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * + * See the License for the specific language governing permissions and limitations under the License. + */ + +import { createTheme } from "@mui/material/styles"; + +import { palette } from "./palette"; +import { shape } from "./shape"; +import { spacing } from "./spacing"; +import { typography } from "./typography"; +import "./typography.types"; +import { components } from "./components"; +import "./components.types"; + +export const theme = createTheme({ + palette, + shape, + spacing, + typography, + components, +}); diff --git a/packages/odyssey-react-mui/src/themes/odyssey/typography.ts b/packages/odyssey-react-mui/src/themes/odyssey/typography.ts new file mode 100644 index 0000000000..624748b0d9 --- /dev/null +++ b/packages/odyssey-react-mui/src/themes/odyssey/typography.ts @@ -0,0 +1,92 @@ +/*! + * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved. + * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.") + * + * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0. + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT + * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * + * See the License for the specific language governing permissions and limitations under the License. + */ + +import type { ThemeOptions } from "@mui/material"; +import * as Tokens from "@okta/odyssey-design-tokens"; + +export const typography: ThemeOptions["typography"] = { + htmlFontSize: 16, + fontFamily: Tokens.FontFamilyBase, + fontSize: 14, + fontWeightLight: 300, + fontWeightRegular: Number(Tokens.FontWeightNormal), + fontWeightMedium: 500, + fontWeightBold: Number(Tokens.FontWeightBold), + h1: { + fontFamily: Tokens.FontFamilyBase, + fontWeight: Tokens.FontWeightBold, + fontSize: Tokens.FontSizeHeading1, + lineHeight: Tokens.FontLineHeightHeading1, + letterSpacing: "initial", + marginBottom: Tokens.SpaceScale1, + }, + h2: { + fontFamily: Tokens.FontFamilyBase, + fontWeight: Tokens.FontWeightBold, + fontSize: Tokens.FontSizeHeading2, + lineHeight: Tokens.FontLineHeightHeading2, + letterSpacing: "initial", + marginBottom: Tokens.SpaceScale1, + }, + h3: { + fontFamily: Tokens.FontFamilyBase, + fontWeight: Tokens.FontWeightBold, + fontSize: Tokens.FontSizeHeading3, + lineHeight: Tokens.FontLineHeightHeading3, + letterSpacing: "initial", + marginBottom: Tokens.SpaceScale1, + }, + h4: { + fontFamily: Tokens.FontFamilyBase, + fontWeight: Tokens.FontWeightBold, + fontSize: Tokens.FontSizeHeading4, + lineHeight: Tokens.FontLineHeightHeading4, + letterSpacing: "initial", + marginBottom: Tokens.SpaceScale1, + }, + h5: { + fontFamily: Tokens.FontFamilyBase, + fontWeight: Tokens.FontWeightBold, + fontSize: Tokens.FontSizeHeading5, + lineHeight: Tokens.FontLineHeightHeading5, + letterSpacing: "initial", + marginBottom: Tokens.SpaceScale1, + }, + h6: { + fontFamily: Tokens.FontFamilyBase, + fontWeight: Tokens.FontWeightBold, + fontSize: Tokens.FontScale2, + lineHeight: Tokens.FontLineHeightHeading6, + letterSpacing: "initial", + marginBottom: Tokens.SpaceScale1, + }, + subtitle1: undefined, + subtitle2: undefined, + body: { + fontFamily: Tokens.FontFamilyBase, + fontWeight: Number(Tokens.FontWeightNormal), + fontSize: Tokens.FontScale1, + lineHeight: Tokens.FontLineHeightBody, + letterSpacing: "initial", + }, + body1: undefined, + body2: undefined, + button: undefined, + caption: { + fontFamily: Tokens.FontFamilyBase, + fontWeight: Tokens.FontWeightNormal, + fontSize: Tokens.FontScale0, + lineHeight: Tokens.FontLineHeightBody, + letterSpacing: "initial", + }, + overline: undefined, +}; diff --git a/packages/odyssey-react-mui/src/themes/odyssey/typography.types.ts b/packages/odyssey-react-mui/src/themes/odyssey/typography.types.ts new file mode 100644 index 0000000000..58ced144bd --- /dev/null +++ b/packages/odyssey-react-mui/src/themes/odyssey/typography.types.ts @@ -0,0 +1,36 @@ +/*! + * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved. + * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.") + * + * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0. + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT + * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * + * See the License for the specific language governing permissions and limitations under the License. + */ + +import { CSSProperties } from "react"; + +declare module "@mui/material/styles" { + interface TypographyVariants { + body: CSSProperties; + } + interface TypographyVariantsOptions { + body?: CSSProperties; + } +} + +declare module "@mui/material/Typography" { + interface TypographyPropsVariantOverrides { + body1: false; + body2: false; + body: true; + button: false; + overline: false; + subtitle1: false; + subtitle2: false; + default: true; // used by Link + monochrome: true; // used by Link + } +} diff --git a/packages/odyssey-react-mui/src/utils/index.ts b/packages/odyssey-react-mui/src/utils/index.ts new file mode 100644 index 0000000000..75cb7c1093 --- /dev/null +++ b/packages/odyssey-react-mui/src/utils/index.ts @@ -0,0 +1,13 @@ +/*! + * Copyright (c) 2021-present, Okta, Inc. and/or its affiliates. All rights reserved. + * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.") + * + * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0. + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT + * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * + * See the License for the specific language governing permissions and limitations under the License. + */ + +export { oid, useOid } from "./oid"; diff --git a/packages/odyssey-react-mui/src/utils/oid.test.ts b/packages/odyssey-react-mui/src/utils/oid.test.ts new file mode 100644 index 0000000000..e66d8ab3cd --- /dev/null +++ b/packages/odyssey-react-mui/src/utils/oid.test.ts @@ -0,0 +1,21 @@ +/*! + * Copyright (c) 2021-present, Okta, Inc. and/or its affiliates. All rights reserved. + * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.") + * + * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0. + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT + * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * + * See the License for the specific language governing permissions and limitations under the License. + */ + +import { oid, length } from "./oid"; + +describe("oid", () => { + it("returns a nice id string", () => { + const result = oid(); + expect(typeof result).toBe("string"); + expect(result).toHaveLength(length); + }); +}); diff --git a/packages/odyssey-react-mui/src/utils/oid.ts b/packages/odyssey-react-mui/src/utils/oid.ts new file mode 100644 index 0000000000..85ed2eaf46 --- /dev/null +++ b/packages/odyssey-react-mui/src/utils/oid.ts @@ -0,0 +1,22 @@ +/*! + * Copyright (c) 2021-present, Okta, Inc. and/or its affiliates. All rights reserved. + * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.") + * + * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0. + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT + * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * + * See the License for the specific language governing permissions and limitations under the License. + */ + +import { useMemo } from "react"; + +export const length = 6; + +export const oid = (): string => Math.random().toString(36).slice(-length); + +export const useOid = (id?: string): string => { + const _oid = useMemo(oid, [oid]); + return id || _oid; +}; diff --git a/packages/odyssey-react-mui/test/a11yCheck.ts b/packages/odyssey-react-mui/test/a11yCheck.ts new file mode 100644 index 0000000000..b7fa6a7371 --- /dev/null +++ b/packages/odyssey-react-mui/test/a11yCheck.ts @@ -0,0 +1,28 @@ +/*! + * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved. + * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.") + * + * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0. + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT + * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * + * See the License for the specific language governing permissions and limitations under the License. + */ + +import type { RenderResult } from "@testing-library/react"; +// eslint-disable-next-line import/no-extraneous-dependencies +import { axe } from "jest-axe"; + +export const a11yCheck = (renderFn: () => RenderResult): void => { + describe("accessibility", () => { + it("meets WCAG 2.1 AA criteria", async () => { + const { container } = renderFn(); + const results = await axe(container, { + runOnly: ["section508", "wcag21a", "wcag21aa"], + }); + + expect(results).toHaveNoViolations(); + }); + }); +}; diff --git a/packages/odyssey-react-mui/test/index.ts b/packages/odyssey-react-mui/test/index.ts new file mode 100644 index 0000000000..fa93880981 --- /dev/null +++ b/packages/odyssey-react-mui/test/index.ts @@ -0,0 +1,13 @@ +/*! + * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved. + * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.") + * + * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0. + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT + * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * + * See the License for the specific language governing permissions and limitations under the License. + */ + +export * from "./a11yCheck"; diff --git a/packages/odyssey-react-mui/tsconfig.json b/packages/odyssey-react-mui/tsconfig.json new file mode 100644 index 0000000000..b03efe2688 --- /dev/null +++ b/packages/odyssey-react-mui/tsconfig.json @@ -0,0 +1,3 @@ +{ + "extends": "@okta/odyssey-typescript/tsconfig.react.json" +} diff --git a/packages/odyssey-react-mui/tsconfig.production.json b/packages/odyssey-react-mui/tsconfig.production.json new file mode 100644 index 0000000000..b8e153ab91 --- /dev/null +++ b/packages/odyssey-react-mui/tsconfig.production.json @@ -0,0 +1,7 @@ +{ + "extends": "@okta/odyssey-typescript/tsconfig.react.types.json", + "compilerOptions": { + "outDir": "dist" + }, + "exclude": ["./test", "**/*.test.**", "**/dist/**/*"] +} diff --git a/packages/odyssey-react-theme/CHANGELOG.md b/packages/odyssey-react-theme/CHANGELOG.md index c095dd6ad4..a53fedd4d4 100644 --- a/packages/odyssey-react-theme/CHANGELOG.md +++ b/packages/odyssey-react-theme/CHANGELOG.md @@ -3,6 +3,10 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +### [0.14.1](https://github.com/okta/odyssey/compare/v0.14.0...v0.14.1) (2022-06-21) + +**Note:** Version bump only for package @okta/odyssey-react-theme + ## [0.14.0](https://github.com/okta/odyssey/compare/v0.13.0...v0.14.0) (2022-05-26) **Note:** Version bump only for package @okta/odyssey-react-theme diff --git a/packages/odyssey-react-theme/package.json b/packages/odyssey-react-theme/package.json index d99f4a70ee..8ce7df4e69 100644 --- a/packages/odyssey-react-theme/package.json +++ b/packages/odyssey-react-theme/package.json @@ -1,6 +1,6 @@ { "name": "@okta/odyssey-react-theme", - "version": "0.14.0", + "version": "0.14.1", "description": "React theme logic for Odyssey, Okta's design system", "author": "Okta, Inc.", "license": "Apache-2.0", @@ -8,6 +8,7 @@ "module": "dist/index.js", "types": "dist/index.d.ts", "type": "module", + "sideEffects": false, "exports": { ".": { "default": "./dist/index.js" @@ -19,16 +20,16 @@ "directory": "packages/odyssey-react-theme" }, "dependencies": { - "@okta/odyssey-design-tokens": "^0.14.0", + "@okta/odyssey-design-tokens": "^0.14.1", "hoist-non-react-statics": "^3.3.2" }, "devDependencies": { "@babel/cli": "^7.14.8", "@babel/core": "^7.15.0", - "@okta/browserslist-config-odyssey": "^0.14.0", - "@okta/odyssey-babel-preset": "^0.14.0", - "@okta/odyssey-lifecycle": "^0.14.0", - "@okta/odyssey-typescript": "^0.14.0", + "@okta/browserslist-config-odyssey": "^0.14.1", + "@okta/odyssey-babel-preset": "^0.14.1", + "@okta/odyssey-lifecycle": "^0.14.1", + "@okta/odyssey-typescript": "^0.14.1", "@testing-library/jest-dom": "^5.12.0", "@testing-library/react": "^11.2.7", "@types/hoist-non-react-statics": "^3.3.1", diff --git a/packages/odyssey-react/CHANGELOG.md b/packages/odyssey-react/CHANGELOG.md index 344fd80e2b..d6f175989b 100644 --- a/packages/odyssey-react/CHANGELOG.md +++ b/packages/odyssey-react/CHANGELOG.md @@ -3,6 +3,10 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +### [0.14.1](https://github.com/okta/odyssey/compare/v0.14.0...v0.14.1) (2022-06-21) + +**Note:** Version bump only for package @okta/odyssey-react + ## [0.14.0](https://github.com/okta/odyssey/compare/v0.13.0...v0.14.0) (2022-05-26) ### ⚠ BREAKING CHANGES diff --git a/packages/odyssey-react/package.json b/packages/odyssey-react/package.json index 394784b18b..00e63fdb19 100644 --- a/packages/odyssey-react/package.json +++ b/packages/odyssey-react/package.json @@ -1,6 +1,6 @@ { "name": "@okta/odyssey-react", - "version": "0.14.0", + "version": "0.14.1", "description": "React components for Odyssey, Okta's design system", "author": "Okta, Inc.", "license": "Apache-2.0", @@ -8,6 +8,7 @@ "module": "dist/index.js", "types": "dist/index.d.ts", "type": "module", + "sideEffects": false, "exports": { ".": { "default": "./dist/index.js" @@ -19,22 +20,22 @@ "directory": "packages/odyssey-react" }, "dependencies": { - "@okta/odyssey-react-theme": "^0.14.0", + "@okta/odyssey-react-theme": "^0.14.1", "@react-aria/focus": "3.5.0", "choices.js": "^9.0.1" }, "devDependencies": { "@babel/cli": "^7.14.8", "@babel/core": "^7.15.0", - "@okta/browserslist-config-odyssey": "^0.14.0", - "@okta/odyssey-babel-preset": "^0.14.0", - "@okta/odyssey-icons": "^0.14.0", - "@okta/odyssey-lifecycle": "^0.14.0", - "@okta/odyssey-postcss-preset": "^0.14.0", - "@okta/odyssey-postcss-scss": "^0.14.0", - "@okta/odyssey-stylelint": "^0.14.0", - "@okta/odyssey-svgr": "^0.14.0", - "@okta/odyssey-typescript": "^0.14.0", + "@okta/browserslist-config-odyssey": "^0.14.1", + "@okta/odyssey-babel-preset": "^0.14.1", + "@okta/odyssey-icons": "^0.14.1", + "@okta/odyssey-lifecycle": "^0.14.1", + "@okta/odyssey-postcss-preset": "^0.14.1", + "@okta/odyssey-postcss-scss": "^0.14.1", + "@okta/odyssey-stylelint": "^0.14.1", + "@okta/odyssey-svgr": "^0.14.1", + "@okta/odyssey-typescript": "^0.14.1", "@svgr/cli": "^5.5.0", "@testing-library/dom": "^7.28.1", "@testing-library/jest-dom": "^5.12.0", diff --git a/packages/odyssey-storybook/.storybook/components/Markdown.js b/packages/odyssey-storybook/.storybook/components/Markdown.tsx similarity index 81% rename from packages/odyssey-storybook/.storybook/components/Markdown.js rename to packages/odyssey-storybook/.storybook/components/Markdown.tsx index 3bea723826..01cd1ac4c3 100644 --- a/packages/odyssey-storybook/.storybook/components/Markdown.js +++ b/packages/odyssey-storybook/.storybook/components/Markdown.tsx @@ -14,6 +14,8 @@ const overrides = Object.entries(components).reduce( Object.create(null) ); -export const Markdown = ({ content }) => ( - -); +export const Markdown = ({ + content, +}: { + content: string & React.ReactNode; +}) => ; diff --git a/packages/odyssey-storybook/.storybook/components/MuiThemeDecorator.tsx b/packages/odyssey-storybook/.storybook/components/MuiThemeDecorator.tsx new file mode 100644 index 0000000000..8f70baf0f4 --- /dev/null +++ b/packages/odyssey-storybook/.storybook/components/MuiThemeDecorator.tsx @@ -0,0 +1,15 @@ +import React from "react"; +import { ThemeProvider as MuiThemeProvider } from "@mui/material/styles"; +import { CssBaseline } from "@mui/material"; +import { ThemeProvider } from "@storybook/theming"; +import { odysseyTheme as theme } from "@okta/odyssey-react-mui"; +import type { DecoratorFn } from "@storybook/react"; + +export const MuiThemeDecorator: DecoratorFn = (Story) => ( + + + + + + +); diff --git a/packages/odyssey-storybook/.storybook/components/index.js b/packages/odyssey-storybook/.storybook/components/index.ts similarity index 69% rename from packages/odyssey-storybook/.storybook/components/index.js rename to packages/odyssey-storybook/.storybook/components/index.ts index 38e06652db..7107417972 100644 --- a/packages/odyssey-storybook/.storybook/components/index.js +++ b/packages/odyssey-storybook/.storybook/components/index.ts @@ -1,3 +1,4 @@ export { Markdown } from "./Markdown"; +export { MuiThemeDecorator } from "./MuiThemeDecorator"; export { ThemeTable } from "./ThemeTable"; export { TokenTables } from "./TokenTables"; diff --git a/packages/odyssey-storybook/CHANGELOG.md b/packages/odyssey-storybook/CHANGELOG.md index d56e8ef4c5..bb3546f6b2 100644 --- a/packages/odyssey-storybook/CHANGELOG.md +++ b/packages/odyssey-storybook/CHANGELOG.md @@ -3,6 +3,10 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +### [0.14.1](https://github.com/okta/odyssey/compare/v0.14.0...v0.14.1) (2022-06-21) + +**Note:** Version bump only for package @okta/odyssey-storybook + ## [0.14.0](https://github.com/okta/odyssey/compare/v0.13.0...v0.14.0) (2022-05-26) ### Bug Fixes diff --git a/packages/odyssey-storybook/package.json b/packages/odyssey-storybook/package.json index d13ccdb28a..f25b228dd6 100644 --- a/packages/odyssey-storybook/package.json +++ b/packages/odyssey-storybook/package.json @@ -1,6 +1,6 @@ { "name": "@okta/odyssey-storybook", - "version": "0.14.0", + "version": "0.14.1", "description": "Documentation for Odyssey, Okta's design system", "author": "Okta, Inc.", "license": "Apache-2.0", @@ -12,12 +12,14 @@ "devDependencies": { "@applitools/eyes-storybook": "^3.27.6", "@babel/core": "^7.15.0", - "@okta/odyssey-babel-loader": "^0.14.0", - "@okta/odyssey-design-tokens": "^0.14.0", - "@okta/odyssey-lifecycle": "^0.14.0", - "@okta/odyssey-react": "^0.14.0", - "@okta/odyssey-react-theme": "^0.14.0", - "@okta/odyssey-typescript": "^0.14.0", + "@mui/material": "^5.8.2", + "@okta/odyssey-babel-loader": "^0.14.1", + "@okta/odyssey-design-tokens": "^0.14.1", + "@okta/odyssey-lifecycle": "^0.14.1", + "@okta/odyssey-react": "^0.14.1", + "@okta/odyssey-react-mui": "^0.14.1", + "@okta/odyssey-react-theme": "^0.14.1", + "@okta/odyssey-typescript": "^0.14.1", "@pxblue/storybook-rtl-addon": "^1.0.1", "@storybook/addon-a11y": "^6.4.22", "@storybook/addon-actions": "^6.4.22", diff --git a/packages/odyssey-storybook/src/components/CircularProgress/CircularProgress.mdx b/packages/odyssey-storybook/src/components/CircularProgress/CircularProgress.mdx new file mode 100644 index 0000000000..1879424d78 --- /dev/null +++ b/packages/odyssey-storybook/src/components/CircularProgress/CircularProgress.mdx @@ -0,0 +1,17 @@ +import { ArgsTable, Canvas, Meta, Story } from "@storybook/addon-docs"; + + + +# CircularProgress + + + + + + + + + +## Props + + diff --git a/packages/odyssey-storybook/src/components/CircularProgress/CircularProgress.stories.tsx b/packages/odyssey-storybook/src/components/CircularProgress/CircularProgress.stories.tsx new file mode 100644 index 0000000000..8a2e69d8ae --- /dev/null +++ b/packages/odyssey-storybook/src/components/CircularProgress/CircularProgress.stories.tsx @@ -0,0 +1,51 @@ +/*! + * Copyright (c) 2021-present, Okta, Inc. and/or its affiliates. All rights reserved. + * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.") + * + * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0. + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT + * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * + * See the License for the specific language governing permissions and limitations under the License. + */ + +import React from "react"; +import { Story } from "@storybook/react"; +import { CircularProgress, CircularProgressProps } from "@mui/material"; +import { MuiThemeDecorator } from "../../../.storybook/components/MuiThemeDecorator"; + +import CircularProgressMdx from "./CircularProgress.mdx"; + +export default { + title: `MUI Components/Circular Progress`, + component: CircularProgress, + parameters: { + docs: { + page: CircularProgressMdx, + }, + }, + argTypes: { + variant: { + options: ["indeterminate", "determinate"], + control: { type: "radio" }, + }, + value: { + control: { type: "number" }, + }, + }, + decorators: [MuiThemeDecorator], +}; + +const Template: Story = (props) => ( + +); + +export const Indeterminate = Template.bind({}); +Indeterminate.args = {}; + +export const Determinate = Template.bind({}); +Determinate.args = { + variant: "determinate", + value: 70, +}; diff --git a/packages/odyssey-storybook/src/components/MuiButton/MuiButton.mdx b/packages/odyssey-storybook/src/components/MuiButton/MuiButton.mdx new file mode 100644 index 0000000000..ebfb917212 --- /dev/null +++ b/packages/odyssey-storybook/src/components/MuiButton/MuiButton.mdx @@ -0,0 +1,115 @@ +import { Canvas, Meta, Story } from "@storybook/addon-docs"; + + + +# Button + +A clickable button used for form submissions and most in-page interactions. + +## Behavior + +Visually, a Button is a rounded rectangle with a descriptive caption at its center. Users interact with Buttons via both pointer devices and keystrokes. + +## Variants + +In Odyssey there are five Button variants: Primary, Secondary, Danger, and Floating. + +### Primary + +Use our default Button for primary actions in a view. For example, “Save”. + +It's ideal to have one Primary Button per view. However, it's okay to have more than one Primary Button as long that they are equal in priority. + + + + + +### Secondary + +This is ideal for a secondary actions to compliment the Primary Button. Like the Primary Button, use this Button sparingly to provide focus to the user. + + + + + +### Danger + +Use Danger Buttons for scenarios where a user may be deleting information or making a decision that can not be reversed. + + + + + +### Floating + +Use Floating Buttons for interactions that change visible UI but don't submit data. For example, showing a password field or dismissing a modal. + +They pair well with Primary and Secondary Buttons. + + + + + +## Sizes + +We offer three sizes of Buttons for use: Small, Medium, and Large. Full-width buttons are also available. + +In order to provide a sufficient click area, all Button labels have a minimum width equal to twice the line-height. + +### Small + +Small Buttons are best used for actions within Table rows. Their font-size is descreased while keeping padding proportional to our medium size. + + + + + +### Medium + +Our default size, medium Buttons are built for use in most contexts. + + + + + +### Large + +Large Buttons incease their padding, but not their font size. They're intended for single-interaction UIs like logging in. + + + + + +### Full-width + +Full-width Buttons are intended for single-interaction UIs. These are often widgets like "Sign In" or "Sign Up". + +Use this variant when you desire the Button to be full-width regardless of screen size. + + + + + +## States + +Odyssey provides visual affordances these states: Enabled, Focus, Hover, and Disabled. + +### Disabled + +Disabled Buttons are unavailable for interaction and cannot be focused. They can be used when an action is unavailable, possibly due to incomplete information or access restrictions. + +You should pair Disabled Buttons with a Tooltip if the user would benefit from additional context. + + + + + +## References + +- Button API - Material UI +- + Button + - MDN +- + Accessibile Icon Buttons + - Sara Soueidan diff --git a/packages/odyssey-storybook/src/components/MuiButton/MuiButton.stories.tsx b/packages/odyssey-storybook/src/components/MuiButton/MuiButton.stories.tsx new file mode 100644 index 0000000000..a4a6ffd5d2 --- /dev/null +++ b/packages/odyssey-storybook/src/components/MuiButton/MuiButton.stories.tsx @@ -0,0 +1,119 @@ +/*! + * Copyright (c) 2021-present, Okta, Inc. and/or its affiliates. All rights reserved. + * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.") + * + * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0. + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT + * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * + * See the License for the specific language governing permissions and limitations under the License. + */ + +import React from "react"; +import type { Story } from "@storybook/react"; + +import { Button } from "@mui/material"; +import type { ButtonProps } from "@mui/material"; +import { MuiThemeDecorator } from "../../../.storybook/components/MuiThemeDecorator"; + +import ButtonMdx from "./MuiButton.mdx"; + +export default { + title: `MUI Components/Button`, + component: Button, + parameters: { + docs: { + page: ButtonMdx, + }, + }, + argTypes: { + children: { + control: "text", + defaultValue: "Button labels", + }, + size: { + options: ["s", "m", "l"], + control: { type: "radio" }, + }, + // if we choose to apply colors via "variants" then odyssey global theme will not apply + variant: { + options: ["primary", "secondary", "danger", "floating"], + control: { type: "radio" }, + defaultValue: "primary", + }, + disabled: { + control: "boolean", + }, + fullWidth: { + // called 'wide' in original ods button + control: "boolean", + }, + startIcon: { + // called 'icon' in original ods button + control: "object", + }, + }, + decorators: [MuiThemeDecorator], +}; + +const Template: Story = (props) =>