);
diff --git a/packages/odyssey-react/src/components/index.ts b/packages/odyssey-react/src/components/index.ts
index bf524aa75a..b27a237c10 100644
--- a/packages/odyssey-react/src/components/index.ts
+++ b/packages/odyssey-react/src/components/index.ts
@@ -26,7 +26,9 @@ export * from "./Link";
export * from "./List";
export * from "./Modal";
export * from "./NativeSelect";
+export * from "./PasswordInput";
export * from "./Radio";
+export * from "./SearchInput";
export * from "./ScreenReaderText";
export * from "./Select";
export * from "./Status";
diff --git a/packages/odyssey-react/tsconfig.composite.json b/packages/odyssey-react/tsconfig.composite.json
new file mode 100644
index 0000000000..ae9a0e8b28
--- /dev/null
+++ b/packages/odyssey-react/tsconfig.composite.json
@@ -0,0 +1,8 @@
+{
+ "extends": "@okta/odyssey-typescript/tsconfig.react.types.json",
+ "compilerOptions": {
+ "outDir": "dist-composite",
+ "composite": true
+ },
+ "exclude": ["**/*.test.**", "**/dist/**/*", "**/dist-composite/**/*"]
+}
diff --git a/packages/odyssey-react/tsconfig.production.json b/packages/odyssey-react/tsconfig.production.json
index aa23b1c239..eeffa169a8 100644
--- a/packages/odyssey-react/tsconfig.production.json
+++ b/packages/odyssey-react/tsconfig.production.json
@@ -3,5 +3,5 @@
"compilerOptions": {
"outDir": "dist"
},
- "exclude": ["**/*.test.**", "**/dist/**/*"]
+ "exclude": ["**/*.test.**", "**/dist/**/*", "**/dist-composite-/**/*"]
}
diff --git a/packages/odyssey-storybook/.storybook/components/Markdown.tsx b/packages/odyssey-storybook/.storybook/components/Markdown.tsx
index 01cd1ac4c3..9e5c1f2ab3 100644
--- a/packages/odyssey-storybook/.storybook/components/Markdown.tsx
+++ b/packages/odyssey-storybook/.storybook/components/Markdown.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import type { ReactNode } from "react";
import { default as MarkdownToJSX } from "markdown-to-jsx";
import { components } from "@storybook/components";
@@ -14,8 +14,6 @@ const overrides = Object.entries(components).reduce(
Object.create(null)
);
-export const Markdown = ({
- content,
-}: {
- content: string & React.ReactNode;
-}) => ;
+export const Markdown = ({ content }: { content: string & ReactNode }) => (
+
+);
diff --git a/packages/odyssey-storybook/.storybook/components/MuiThemeDecorator.tsx b/packages/odyssey-storybook/.storybook/components/MuiThemeDecorator.tsx
index 8f70baf0f4..af54ca36ec 100644
--- a/packages/odyssey-storybook/.storybook/components/MuiThemeDecorator.tsx
+++ b/packages/odyssey-storybook/.storybook/components/MuiThemeDecorator.tsx
@@ -1,4 +1,3 @@
-import React from "react";
import { ThemeProvider as MuiThemeProvider } from "@mui/material/styles";
import { CssBaseline } from "@mui/material";
import { ThemeProvider } from "@storybook/theming";
@@ -9,7 +8,14 @@ export const MuiThemeDecorator: DecoratorFn = (Story) => (
-
+
+
+
);
diff --git a/packages/odyssey-storybook/.storybook/components/ThemeTable.tsx b/packages/odyssey-storybook/.storybook/components/ThemeTable.tsx
index 8613b37cc9..192afdec42 100644
--- a/packages/odyssey-storybook/.storybook/components/ThemeTable.tsx
+++ b/packages/odyssey-storybook/.storybook/components/ThemeTable.tsx
@@ -10,7 +10,6 @@
* See the License for the specific language governing permissions and limitations under the License.
*/
-import React from "react";
import type { ReactNode } from "react";
import type { Theme, ThemeReducer } from "@okta/odyssey-react-theme";
import { tokens } from "@okta/odyssey-react-theme/dist/ThemeProvider/context";
diff --git a/packages/odyssey-storybook/.storybook/components/TokenTables.tsx b/packages/odyssey-storybook/.storybook/components/TokenTables.tsx
index 234fb2e41f..aec7e54532 100644
--- a/packages/odyssey-storybook/.storybook/components/TokenTables.tsx
+++ b/packages/odyssey-storybook/.storybook/components/TokenTables.tsx
@@ -10,7 +10,7 @@
* See the License for the specific language governing permissions and limitations under the License.
*/
-import React, { useState, useEffect } from "react";
+import { useState, useEffect } from "react";
import type { ReactNode } from "react";
import * as Tokens from "@okta/odyssey-design-tokens";
import { Table, Text } from "@okta/odyssey-react";
diff --git a/packages/odyssey-storybook/.storybook/main.js b/packages/odyssey-storybook/.storybook/main.js
index 408cc52484..2593dee55f 100644
--- a/packages/odyssey-storybook/.storybook/main.js
+++ b/packages/odyssey-storybook/.storybook/main.js
@@ -67,7 +67,16 @@ function buildRules(rules) {
loader: "@okta/odyssey-babel-loader",
options: {
cacheDirectory: false,
- presets: ["@okta/odyssey-babel-preset"],
+ presets: [
+ [
+ "@okta/odyssey-babel-preset",
+ {
+ react: {
+ runtime: "classic",
+ },
+ },
+ ],
+ ],
},
});
}
diff --git a/packages/odyssey-storybook/.storybook/manager-head.html b/packages/odyssey-storybook/.storybook/manager-head.html
index 8f023324f2..869626ef17 100644
--- a/packages/odyssey-storybook/.storybook/manager-head.html
+++ b/packages/odyssey-storybook/.storybook/manager-head.html
@@ -1,6 +1,12 @@
diff --git a/packages/odyssey-storybook/.storybook/manager.js b/packages/odyssey-storybook/.storybook/manager.js
index aaba38a658..d3d9abad25 100644
--- a/packages/odyssey-storybook/.storybook/manager.js
+++ b/packages/odyssey-storybook/.storybook/manager.js
@@ -3,4 +3,7 @@ import theme from "./OdysseyTheme";
addons.setConfig({
theme,
+ sidebar: {
+ collapsedRoots: ["legacy-components"],
+ },
});
diff --git a/packages/odyssey-storybook/.storybook/preview.js b/packages/odyssey-storybook/.storybook/preview.js
index 6e8ef0d888..daea26a0f3 100644
--- a/packages/odyssey-storybook/.storybook/preview.js
+++ b/packages/odyssey-storybook/.storybook/preview.js
@@ -15,7 +15,8 @@ export const parameters = {
["Introduction (README)", "Docs Status"],
"Contributing",
"Guidelines",
- "Components",
+ "MUI Components",
+ "Legacy Components",
],
locales: "",
},
diff --git a/packages/odyssey-storybook/CHANGELOG.md b/packages/odyssey-storybook/CHANGELOG.md
index bb3546f6b2..9e025c0894 100644
--- a/packages/odyssey-storybook/CHANGELOG.md
+++ b/packages/odyssey-storybook/CHANGELOG.md
@@ -3,6 +3,16 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+### [0.14.2](https://github.com/okta/odyssey/compare/v0.14.1...v0.14.2) (2022-06-30)
+
+### Features
+
+- **odyssey-icons:** add eye and eye off icons ([d44a241](https://github.com/okta/odyssey/commit/d44a241537fa84fcf7679b7e96e52655d83d846f))
+
+### Bug Fixes
+
+- **odyssey-storybook:** fix font-family display in MUI components ([91a80c1](https://github.com/okta/odyssey/commit/91a80c1fbc1c94875bf83fde33296f22a81dedf1))
+
### [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
diff --git a/packages/odyssey-storybook/package.json b/packages/odyssey-storybook/package.json
index f25b228dd6..a2af86484d 100644
--- a/packages/odyssey-storybook/package.json
+++ b/packages/odyssey-storybook/package.json
@@ -1,6 +1,6 @@
{
"name": "@okta/odyssey-storybook",
- "version": "0.14.1",
+ "version": "0.14.2",
"description": "Documentation for Odyssey, Okta's design system",
"author": "Okta, Inc.",
"license": "Apache-2.0",
@@ -13,13 +13,14 @@
"@applitools/eyes-storybook": "^3.27.6",
"@babel/core": "^7.15.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",
+ "@mui/utils": "^5.8.2",
+ "@okta/odyssey-babel-loader": "^0.14.2",
+ "@okta/odyssey-design-tokens": "^0.14.2",
+ "@okta/odyssey-lifecycle": "^0.14.2",
+ "@okta/odyssey-react": "^0.14.2",
+ "@okta/odyssey-react-mui": "^0.14.2",
+ "@okta/odyssey-react-theme": "^0.14.2",
+ "@okta/odyssey-typescript": "^0.14.2",
"@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/CircularLoadIndicator/CircularLoadIndicator.mdx b/packages/odyssey-storybook/src/components/CircularLoadIndicator/CircularLoadIndicator.mdx
deleted file mode 100644
index 56318f612c..0000000000
--- a/packages/odyssey-storybook/src/components/CircularLoadIndicator/CircularLoadIndicator.mdx
+++ /dev/null
@@ -1,17 +0,0 @@
-import { ArgsTable, Canvas, Meta, Story } from "@storybook/addon-docs";
-import { theme } from "../../../../odyssey-react/src/components/CircularLoadIndicator/CircularLoadIndicator.theme";
-import { ThemeTable } from "../../../.storybook/components";
-
-
-
-# CircularLoadIndicator
-
-
-
-## Props
-
-
-
-
diff --git a/packages/odyssey-storybook/src/components/FieldGroup/FieldGroup.mdx b/packages/odyssey-storybook/src/components/FieldGroup/FieldGroup.mdx
deleted file mode 100644
index 0473d0954e..0000000000
--- a/packages/odyssey-storybook/src/components/FieldGroup/FieldGroup.mdx
+++ /dev/null
@@ -1,17 +0,0 @@
-import { ArgsTable, Canvas, Meta, Story } from "@storybook/addon-docs";
-import { theme } from "../../../../odyssey-react/src/components/FieldGroup/FieldGroup.theme";
-import { ThemeTable } from "../../../.storybook/components";
-
-
-
-# FieldGroup
-
-
-
-## Props
-
-
-
-
diff --git a/packages/odyssey-storybook/src/components/Form/Form.mdx b/packages/odyssey-storybook/src/components/Form/Form.mdx
deleted file mode 100644
index 866de7c9d9..0000000000
--- a/packages/odyssey-storybook/src/components/Form/Form.mdx
+++ /dev/null
@@ -1,17 +0,0 @@
-import { ArgsTable, Canvas, Meta, Story } from "@storybook/addon-docs";
-import { theme } from "../../../../odyssey-react/src/components/Form/Form.theme";
-import { ThemeTable } from "../../../.storybook/components";
-
-
-
-# Form
-
-
-
-## Props
-
-
-
-
diff --git a/packages/odyssey-storybook/src/components/List/List.mdx b/packages/odyssey-storybook/src/components/List/List.mdx
deleted file mode 100644
index 59b95a7072..0000000000
--- a/packages/odyssey-storybook/src/components/List/List.mdx
+++ /dev/null
@@ -1,37 +0,0 @@
-import { ArgsTable, Canvas, Meta, Story } from "@storybook/addon-docs";
-import { theme } from "../../../../odyssey-react/src/components/List/List.theme";
-import { ThemeTable } from "../../../.storybook/components";
-
-
-
-# List
-
-List provides ordered, unordered, description, and unstyled list UI.
-
-
-
-## Props
-
-
-
-
-
-## Stories
-
-
-
-
-
-
-
-
diff --git a/packages/odyssey-storybook/src/components/MuiButton/MuiButton.mdx b/packages/odyssey-storybook/src/components/MuiButton/MuiButton.mdx
index ebfb917212..c4fc66db38 100644
--- a/packages/odyssey-storybook/src/components/MuiButton/MuiButton.mdx
+++ b/packages/odyssey-storybook/src/components/MuiButton/MuiButton.mdx
@@ -104,6 +104,15 @@ You should pair Disabled Buttons with a Tooltip if the user would benefit from a
+## Icons
+
+
+
+
## References
- Button API - Material UI
diff --git a/packages/odyssey-storybook/src/components/MuiButton/MuiButton.stories.tsx b/packages/odyssey-storybook/src/components/MuiButton/MuiButton.stories.tsx
index a4a6ffd5d2..425aed81c5 100644
--- a/packages/odyssey-storybook/src/components/MuiButton/MuiButton.stories.tsx
+++ b/packages/odyssey-storybook/src/components/MuiButton/MuiButton.stories.tsx
@@ -10,12 +10,12 @@
* 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 { SettingsIcon } from "../../../../odyssey-react/src";
import ButtonMdx from "./MuiButton.mdx";
@@ -117,3 +117,15 @@ ButtonPrimaryDisabled.args = {
variant: "primary",
disabled: true,
};
+
+export const ButtonWithIcon = Template.bind({});
+ButtonWithIcon.args = {
+ children: "Button label",
+ startIcon: ,
+};
+
+export const IconOnly = Template.bind({});
+IconOnly.args = {
+ children: "",
+ startIcon: ,
+};
diff --git a/packages/odyssey-storybook/src/components/MuiLink/MuiLink.stories.tsx b/packages/odyssey-storybook/src/components/MuiLink/MuiLink.stories.tsx
index f2544bf7f8..33f6c38a06 100644
--- a/packages/odyssey-storybook/src/components/MuiLink/MuiLink.stories.tsx
+++ b/packages/odyssey-storybook/src/components/MuiLink/MuiLink.stories.tsx
@@ -10,7 +10,6 @@
* 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 { MuiThemeDecorator } from "../../../.storybook/components/MuiThemeDecorator";
diff --git a/packages/odyssey-storybook/src/components/TextArea/TextArea.mdx b/packages/odyssey-storybook/src/components/TextArea/TextArea.mdx
deleted file mode 100644
index 5251565a61..0000000000
--- a/packages/odyssey-storybook/src/components/TextArea/TextArea.mdx
+++ /dev/null
@@ -1,33 +0,0 @@
-import { ArgsTable, Canvas, Meta, Story } from "@storybook/addon-docs";
-import { theme } from "../../../../odyssey-react/src/components/TextArea/TextArea.theme";
-import { ThemeTable } from "../../../.storybook/components";
-
-
-
-# TextArea
-
-TextArea allows users to edit and input data.
-
-
-
-## Props
-
-
-
-
-
-## Stories
-
-
-
-
-
-
diff --git a/packages/odyssey-storybook/src/components/Banner/Banner.mdx b/packages/odyssey-storybook/src/components/odyssey-legacy/Banner/Banner.mdx
similarity index 91%
rename from packages/odyssey-storybook/src/components/Banner/Banner.mdx
rename to packages/odyssey-storybook/src/components/odyssey-legacy/Banner/Banner.mdx
index 065785d8ca..8cb2c2c854 100644
--- a/packages/odyssey-storybook/src/components/Banner/Banner.mdx
+++ b/packages/odyssey-storybook/src/components/odyssey-legacy/Banner/Banner.mdx
@@ -1,6 +1,6 @@
import { ArgsTable, Canvas, Meta, Story } from "@storybook/addon-docs";
-import { theme } from "../../../../odyssey-react/src/components/Banner/Banner.theme";
-import { ThemeTable } from "../../../.storybook/components";
+import { theme } from "../../../../../odyssey-react/src/components/Banner/Banner.theme";
+import { ThemeTable } from "../../../../.storybook/components";
@@ -21,7 +21,7 @@ They are best used to indicate global states or errors that effect an entire pro
Use Info Banners to surface neutral information or broad announcements to users.
### Danger
@@ -31,7 +31,7 @@ Use Danger Banners to inform users that a system-wide error has occurred. You ma
Include guidance to make sure users know what steps to take to address the error or avoid the threat.
### Caution
@@ -41,7 +41,7 @@ Use Caution Banners to inform users of tasks or processes that may need their at
When using the Caution variant, ensure the user does not need more context than you can give in the space available.
## Usage
@@ -53,7 +53,7 @@ In addition to the required content and placement, Banners have two optional fea
It's often useful to direct users toward an appropriate action, especially for fixing errors. Please utilize Link for these actions. If it's necessary to provide the user with an action, please direct them to the appropriate flow instead of beginning a new process inline.
### Dismissal
@@ -61,7 +61,7 @@ It's often useful to direct users toward an appropriate action, especially for f
Banners support dismissal for messages that do not persist or only require a one-time acknowledgement.
## Content Guidelines
diff --git a/packages/odyssey-storybook/src/components/Banner/Banner.stories.tsx b/packages/odyssey-storybook/src/components/odyssey-legacy/Banner/Banner.stories.tsx
similarity index 95%
rename from packages/odyssey-storybook/src/components/Banner/Banner.stories.tsx
rename to packages/odyssey-storybook/src/components/odyssey-legacy/Banner/Banner.stories.tsx
index d2127cd980..3d9954a9fd 100644
--- a/packages/odyssey-storybook/src/components/Banner/Banner.stories.tsx
+++ b/packages/odyssey-storybook/src/components/odyssey-legacy/Banner/Banner.stories.tsx
@@ -10,14 +10,13 @@
* See the License for the specific language governing permissions and limitations under the License.
*/
-import React from "react";
import { Story } from "@storybook/react";
import { useArgs } from "@storybook/client-api";
-import { Banner, BannerProps, Link } from "../../../../odyssey-react/src";
+import { Banner, BannerProps, Link } from "../../../../../odyssey-react/src";
import BannerMdx from "./Banner.mdx";
export default {
- title: `Components/Alerts/Banner`,
+ title: `Legacy Components/Alerts/Banner`,
component: Banner,
parameters: {
layout: "fullscreen",
diff --git a/packages/odyssey-storybook/src/components/Box/Box.docgen.tsx b/packages/odyssey-storybook/src/components/odyssey-legacy/Box/Box.docgen.tsx
similarity index 86%
rename from packages/odyssey-storybook/src/components/Box/Box.docgen.tsx
rename to packages/odyssey-storybook/src/components/odyssey-legacy/Box/Box.docgen.tsx
index 7cae375c2b..dfb9a42ec4 100644
--- a/packages/odyssey-storybook/src/components/Box/Box.docgen.tsx
+++ b/packages/odyssey-storybook/src/components/odyssey-legacy/Box/Box.docgen.tsx
@@ -10,7 +10,7 @@
* See the License for the specific language governing permissions and limitations under the License.
*/
-import React, { forwardRef } from "react";
-import type { BoxProps } from "../../../../odyssey-react/src";
+import { forwardRef } from "react";
+import type { BoxProps } from "../../../../../odyssey-react/src";
export const BoxDocGen = forwardRef(() => <>);
diff --git a/packages/odyssey-storybook/src/components/Box/Box.mdx b/packages/odyssey-storybook/src/components/odyssey-legacy/Box/Box.mdx
similarity index 94%
rename from packages/odyssey-storybook/src/components/Box/Box.mdx
rename to packages/odyssey-storybook/src/components/odyssey-legacy/Box/Box.mdx
index 171a30cdc0..b5680fa876 100644
--- a/packages/odyssey-storybook/src/components/Box/Box.mdx
+++ b/packages/odyssey-storybook/src/components/odyssey-legacy/Box/Box.mdx
@@ -1,6 +1,6 @@
import { Canvas, Meta, Story, ArgsTable } from "@storybook/addon-docs";
-import { theme } from "../../../../odyssey-react/src/components/Box/Box.theme";
-import { ThemeTable } from "../../../.storybook/components";
+import { theme } from "../../../../../odyssey-react/src/components/Box/Box.theme";
+import { ThemeTable } from "../../../../.storybook/components";
diff --git a/packages/odyssey-storybook/src/components/Box/Box.stories.tsx b/packages/odyssey-storybook/src/components/odyssey-legacy/Box/Box.stories.tsx
similarity index 99%
rename from packages/odyssey-storybook/src/components/Box/Box.stories.tsx
rename to packages/odyssey-storybook/src/components/odyssey-legacy/Box/Box.stories.tsx
index c2bfda56c2..ae2ca883bd 100644
--- a/packages/odyssey-storybook/src/components/Box/Box.stories.tsx
+++ b/packages/odyssey-storybook/src/components/odyssey-legacy/Box/Box.stories.tsx
@@ -10,17 +10,17 @@
* See the License for the specific language governing permissions and limitations under the License.
*/
-import React, { ReactElement } from "react";
+import { ReactElement } from "react";
import { Story } from "@storybook/react";
import { BoxDocGen } from "./Box.docgen";
-import { Box, BoxProps, Heading, Text } from "../../../../odyssey-react/src";
+import { Box, BoxProps, Heading, Text } from "../../../../../odyssey-react/src";
import BoxMdx from "./Box.mdx";
import "!style-loader!css-loader!./box-stories.css";
export default {
- title: `Components/Box`,
+ title: `Legacy Components/Box`,
component: BoxDocGen,
parameters: {
docs: {
diff --git a/packages/odyssey-storybook/src/components/Box/box-stories.css b/packages/odyssey-storybook/src/components/odyssey-legacy/Box/box-stories.css
similarity index 100%
rename from packages/odyssey-storybook/src/components/Box/box-stories.css
rename to packages/odyssey-storybook/src/components/odyssey-legacy/Box/box-stories.css
diff --git a/packages/odyssey-storybook/src/components/Button/Button.mdx b/packages/odyssey-storybook/src/components/odyssey-legacy/Button/Button.mdx
similarity index 88%
rename from packages/odyssey-storybook/src/components/Button/Button.mdx
rename to packages/odyssey-storybook/src/components/odyssey-legacy/Button/Button.mdx
index bca2e04cd2..6616be8ed8 100644
--- a/packages/odyssey-storybook/src/components/Button/Button.mdx
+++ b/packages/odyssey-storybook/src/components/odyssey-legacy/Button/Button.mdx
@@ -1,6 +1,6 @@
import { ArgsTable, Canvas, Meta, Story } from "@storybook/addon-docs";
-import { theme } from "../../../../odyssey-react/src/components/Button/Button.theme";
-import { ThemeTable } from "../../../.storybook/components";
+import { theme } from "../../../../../odyssey-react/src/components/Button/Button.theme";
+import { ThemeTable } from "../../../../.storybook/components";
@@ -23,7 +23,7 @@ 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
@@ -31,7 +31,7 @@ It's ideal to have one Primary Button per view. However, it's okay to have more
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
@@ -39,7 +39,7 @@ This is ideal for a secondary actions to compliment the Primary Button. Like the
Use Danger Buttons for scenarios where a user may be deleting information or making a decision that can not be reversed.
### Floating
@@ -49,7 +49,7 @@ Use Floating Buttons for interactions that change visible UI but don't submit da
They pair well with Primary and Secondary Buttons.
## Sizes
@@ -63,7 +63,7 @@ In order to provide a sufficient click area, all Button labels have a minimum wi
Small Buttons are best used for actions within Table rows. Their font-size is descreased while keeping padding proportional to our medium size.
### Medium
@@ -71,7 +71,7 @@ Small Buttons are best used for actions within Table rows. Their font-size is de
Our default size, medium Buttons are built for use in most contexts.
### Large
@@ -79,7 +79,7 @@ Our default size, medium Buttons are built for use in most contexts.
Large Buttons incease their padding, but not their font size. They're intended for single-interaction UIs like logging in.
### Full-width
@@ -89,7 +89,7 @@ Full-width Buttons are intended for single-interaction UIs. These are often widg
Use this variant when you desire the Button to be full-width regardless of screen size.
## States
@@ -167,7 +167,7 @@ When using multiple words, use sentence case. Capitalize only the first letter a
Icons can be added to any of our Button variants to increase clarity or add flair. Icons will be laid out automatically based on language direction.
#### Icon-only usability
@@ -175,7 +175,7 @@ Icons can be added to any of our Button variants to increase clarity or add flai
We recommend pairing icon-only Buttons with our Tooltip. While this is not required, it will increase clarity for sighted users.
## Accessibility
diff --git a/packages/odyssey-storybook/src/components/Button/Button.stories.tsx b/packages/odyssey-storybook/src/components/odyssey-legacy/Button/Button.stories.tsx
similarity index 91%
rename from packages/odyssey-storybook/src/components/Button/Button.stories.tsx
rename to packages/odyssey-storybook/src/components/odyssey-legacy/Button/Button.stories.tsx
index a15c385f56..b690996795 100644
--- a/packages/odyssey-storybook/src/components/Button/Button.stories.tsx
+++ b/packages/odyssey-storybook/src/components/odyssey-legacy/Button/Button.stories.tsx
@@ -10,19 +10,19 @@
* See the License for the specific language governing permissions and limitations under the License.
*/
-import React from "react";
import { Story } from "@storybook/react";
import {
Button,
ButtonProps,
+ CloseCircleFilledIcon,
SettingsIcon,
-} from "../../../../odyssey-react/src";
+} from "../../../../../odyssey-react/src";
import { ThemeProvider } from "@okta/odyssey-react-theme";
import ButtonMdx from "./Button.mdx";
export default {
- title: `Components/Button`,
+ title: `Legacy Components/Button`,
component: Button,
parameters: {
docs: {
@@ -96,6 +96,13 @@ IconOnly.args = {
children: undefined,
};
+export const Affix = Template.bind({});
+Affix.args = {
+ variant: "affix",
+ icon: ,
+ children: undefined,
+};
+
export const Theme: Story<
ButtonProps & {
PrimaryBackgroundColor: string;
diff --git a/packages/odyssey-storybook/src/components/Checkbox/Checkbox.mdx b/packages/odyssey-storybook/src/components/odyssey-legacy/Checkbox/Checkbox.mdx
similarity index 84%
rename from packages/odyssey-storybook/src/components/Checkbox/Checkbox.mdx
rename to packages/odyssey-storybook/src/components/odyssey-legacy/Checkbox/Checkbox.mdx
index c0b293fb75..af0a82e90f 100644
--- a/packages/odyssey-storybook/src/components/Checkbox/Checkbox.mdx
+++ b/packages/odyssey-storybook/src/components/odyssey-legacy/Checkbox/Checkbox.mdx
@@ -1,6 +1,6 @@
import { ArgsTable, Canvas, Meta, Story } from "@storybook/addon-docs";
-import { theme } from "../../../../odyssey-react/src/components/Checkbox/Checkbox.theme";
-import { ThemeTable } from "../../../.storybook/components";
+import { theme } from "../../../../../odyssey-react/src/components/Checkbox/Checkbox.theme";
+import { ThemeTable } from "../../../../.storybook/components";
@@ -13,7 +13,7 @@ Checkboxes appear as a square shaped UI accompanied by a caption. Checkboxes can
Users can click a Checkbox to make a choice and click it again to deselect an option. They allow users to select one or more options of something.
## States
@@ -25,7 +25,7 @@ Checkboxes support several states: enabled, hover, focus, disabled, invalid, req
Checkboxes in their "unchecked" state are considered enabled. They are ready for user interaction.
### Hover
@@ -53,7 +53,7 @@ Disabled inputs are unavailable for interaction and cannot be focused. They can
Checkboxes are disabled individually. The values of disabled inputs will not be submitted.
### Invalid
@@ -65,7 +65,7 @@ When indicating a validation error, please use a Field Error label to indicate t
Unlike Radio Buttons, Checkboxes validate individually, not as a group.
### Required
@@ -83,7 +83,7 @@ In the case of nested checkboxes, an indeterminate state may be required.
Note that this state is visual-only and will be submitted as either "checked" or "unchecked" depending on the design of your UI.
## Props
diff --git a/packages/odyssey-storybook/src/components/Checkbox/Checkbox.stories.tsx b/packages/odyssey-storybook/src/components/odyssey-legacy/Checkbox/Checkbox.stories.tsx
similarity index 94%
rename from packages/odyssey-storybook/src/components/Checkbox/Checkbox.stories.tsx
rename to packages/odyssey-storybook/src/components/odyssey-legacy/Checkbox/Checkbox.stories.tsx
index f5bf70f37e..ee19e55622 100644
--- a/packages/odyssey-storybook/src/components/Checkbox/Checkbox.stories.tsx
+++ b/packages/odyssey-storybook/src/components/odyssey-legacy/Checkbox/Checkbox.stories.tsx
@@ -10,18 +10,18 @@
* See the License for the specific language governing permissions and limitations under the License.
*/
-import React, { useEffect } from "react";
+import { useEffect } from "react";
import type { Story } from "@storybook/react";
import {
Checkbox,
CheckboxProps,
ScreenReaderText,
-} from "../../../../odyssey-react/src";
+} from "../../../../../odyssey-react/src";
import CheckboxMdx from "./Checkbox.mdx";
export default {
- title: `Components/Checkbox`,
+ title: `Legacy Components/Checkbox`,
component: Checkbox,
parameters: {
docs: {
diff --git a/packages/odyssey-storybook/src/components/odyssey-legacy/CircularLoadIndicator/CircularLoadIndicator.mdx b/packages/odyssey-storybook/src/components/odyssey-legacy/CircularLoadIndicator/CircularLoadIndicator.mdx
new file mode 100644
index 0000000000..f5bfcf57e3
--- /dev/null
+++ b/packages/odyssey-storybook/src/components/odyssey-legacy/CircularLoadIndicator/CircularLoadIndicator.mdx
@@ -0,0 +1,17 @@
+import { ArgsTable, Canvas, Meta, Story } from "@storybook/addon-docs";
+import { theme } from "../../../../../odyssey-react/src/components/CircularLoadIndicator/CircularLoadIndicator.theme";
+import { ThemeTable } from "../../../../.storybook/components";
+
+
+
+# CircularLoadIndicator
+
+
+
+## Props
+
+
+
+
diff --git a/packages/odyssey-storybook/src/components/CircularLoadIndicator/CircularLoadIndicator.stories.tsx b/packages/odyssey-storybook/src/components/odyssey-legacy/CircularLoadIndicator/CircularLoadIndicator.stories.tsx
similarity index 91%
rename from packages/odyssey-storybook/src/components/CircularLoadIndicator/CircularLoadIndicator.stories.tsx
rename to packages/odyssey-storybook/src/components/odyssey-legacy/CircularLoadIndicator/CircularLoadIndicator.stories.tsx
index 1e96cbab85..8a2ef0296d 100644
--- a/packages/odyssey-storybook/src/components/CircularLoadIndicator/CircularLoadIndicator.stories.tsx
+++ b/packages/odyssey-storybook/src/components/odyssey-legacy/CircularLoadIndicator/CircularLoadIndicator.stories.tsx
@@ -10,16 +10,15 @@
* 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 {
CircularLoadIndicator,
CircularLoadIndicatorProps,
-} from "../../../../odyssey-react/src";
+} from "../../../../../odyssey-react/src";
import CircularLoadIndicatorMdx from "./CircularLoadIndicator.mdx";
export default {
- title: `Components/CircularLoadIndicator`,
+ title: `Legacy Components/CircularLoadIndicator`,
component: CircularLoadIndicator,
parameters: {
docs: {
diff --git a/packages/odyssey-storybook/src/components/Field/Field.docgen.tsx b/packages/odyssey-storybook/src/components/odyssey-legacy/Field/Field.docgen.tsx
similarity index 91%
rename from packages/odyssey-storybook/src/components/Field/Field.docgen.tsx
rename to packages/odyssey-storybook/src/components/odyssey-legacy/Field/Field.docgen.tsx
index ba04522d45..c26c376adb 100644
--- a/packages/odyssey-storybook/src/components/Field/Field.docgen.tsx
+++ b/packages/odyssey-storybook/src/components/odyssey-legacy/Field/Field.docgen.tsx
@@ -11,7 +11,7 @@
*/
import type { FunctionComponent } from "react";
-import type { FieldProps } from "../../../../odyssey-react/src";
+import type { FieldProps } from "../../../../../odyssey-react/src";
export const FieldDocGen: FunctionComponent = () => {
return null;
diff --git a/packages/odyssey-storybook/src/components/Field/Field.mdx b/packages/odyssey-storybook/src/components/odyssey-legacy/Field/Field.mdx
similarity index 88%
rename from packages/odyssey-storybook/src/components/Field/Field.mdx
rename to packages/odyssey-storybook/src/components/odyssey-legacy/Field/Field.mdx
index 29b3da8ef6..10fde5b2fb 100644
--- a/packages/odyssey-storybook/src/components/Field/Field.mdx
+++ b/packages/odyssey-storybook/src/components/odyssey-legacy/Field/Field.mdx
@@ -1,6 +1,6 @@
import { ArgsTable, Canvas, Meta, Story } from "@storybook/addon-docs";
-import { theme } from "../../../../odyssey-react/src/components/Field/Field.theme";
-import { ThemeTable } from "../../../.storybook/components";
+import { theme } from "../../../../../odyssey-react/src/components/Field/Field.theme";
+import { ThemeTable } from "../../../../.storybook/components";
@@ -15,7 +15,7 @@ This component also helps ensure proper accessibility by managing `aria-` attrib
## Anatomy
### Label
@@ -23,13 +23,13 @@ This component also helps ensure proper accessibility by managing `aria-` attrib
A text label for the Field. The associated element may be `