From a7ed02a79340c32920da92da4947a068ac44c2fd Mon Sep 17 00:00:00 2001 From: Edbury Enegren <36284167+edburyenegren-okta@users.noreply.github.com> Date: Fri, 24 Jun 2022 11:33:24 -0700 Subject: [PATCH 01/22] feat(odyssey-react-mui): add theme for Checkbox, Radio, Labels, Hints --- packages/odyssey-react-mui/package.json | 1 + .../src/themes/odyssey/components.ts | 391 ++++++++++++------ .../src/themes/odyssey/typography.ts | 22 +- 3 files changed, 267 insertions(+), 147 deletions(-) diff --git a/packages/odyssey-react-mui/package.json b/packages/odyssey-react-mui/package.json index 701064bfe9..0f888caa9a 100644 --- a/packages/odyssey-react-mui/package.json +++ b/packages/odyssey-react-mui/package.json @@ -55,6 +55,7 @@ "@emotion/react": "^11", "@mui/icons-material": "^5", "@mui/material": "^5", + "@mui/utils": "^5", "react": "^17", "react-dom": "^17" }, diff --git a/packages/odyssey-react-mui/src/themes/odyssey/components.ts b/packages/odyssey-react-mui/src/themes/odyssey/components.ts index 1051cb8b2b..aa6b0a2667 100644 --- a/packages/odyssey-react-mui/src/themes/odyssey/components.ts +++ b/packages/odyssey-react-mui/src/themes/odyssey/components.ts @@ -11,141 +11,9 @@ */ import type { ThemeOptions } from "@mui/material"; +//import radioClasses 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, @@ -318,4 +186,261 @@ export const components: ThemeOptions["components"] = { }), }, }, + MuiButtonBase: { + defaultProps: { + disableRipple: true, + }, + }, + MuiCssBaseline: { + styleOverrides: { + boxSizing: "border-box", + fontFeatureSettings: "'lnum','pnum'", + fontVariant: "normal", + }, + }, + MuiCheckbox: { + defaultProps: { + size: "small", + }, + styleOverrides: { + root: { + borderRadius: "4px", + "&:hover": { + backgroundColor: "transparent", + }, + padding: 0, + ".Mui-error > &": { + color: "#da372c", + "&:hover": { + color: "#640019", + }, + }, + ".Mui-error > &.Mui-checked": { + "&:hover": { + color: "#640019", + }, + }, + "&.Mui-focusVisible": { + outlineColor: "#1662dd", + outlineOffset: 0, + outlineStyle: "solid", + outlineWidth: "2px", + }, + }, + }, + }, + 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%", + }), + }), + }, + }, + MuiFormControlLabel: { + styleOverrides: { + root: ({ ownerState }) => ({ + gap: "0.57142857rem", + marginLeft: 0, + marginRight: 0, // used for row presentation of radio/checkbox + ...(ownerState.labelPlacement === "start" && { + marginLeft: 0, // used for row presentation of radio/checkbox + marginRight: 0, + }), + ...(ownerState.labelPlacement === "top" && { + marginLeft: 0, + }), + ...(ownerState.labelPlacement === "bottom" && { + marginLeft: 0, + }), + "&:not(:last-child)": { + marginBottom: "0.57142857rem", + }, + "&.Mui-disabled": { + pointerEvents: "none", + }, + //[`&:hover ${radioClasses.root}:not(${radioClasses.checked})`]: { + //color: "#1d1d21", + //}, + "&:hover .MuiRadio-root, &:hover .MuiCheckbox-root": { + color: "#1d1d21", + }, + "&:hover .MuiRadio-root.Mui-checked, &:hover .MuiCheckbox-root.Mui-checked": + { + color: "#00297a", + }, + "&.Mui-error:hover .MuiRadio-root, &.Mui-error:hover .MuiCheckbox-root": + { + color: "#640019", + }, + "&.Mui-error:hover .MuiRadio-root.Mui-checked, &.Mui-error:hover .MuiCheckbox-root.Mui-checked": + { + color: "#640019", + }, + }), + }, + }, + MuiFormHelperText: { + defaultProps: { + variant: "standard", + }, + styleOverrides: { + root: { + lineHeight: "1.33333333", + marginTop: "0.57142857rem", + ".MuiFormLabel-root + &": { + marginTop: "-0.28571429rem", + color: "#6e6e78", + }, + marginBottom: "0.57142857rem", + "&:last-child": { + marginBottom: 0, + }, + }, + }, + }, + MuiFormLabel: { + styleOverrides: { + root: { + color: "#1d1d21", + lineHeight: "1.14285714", + fontSize: "1rem", + fontWeight: 600, + marginBottom: "0.57142857rem", + "&.Mui-focused, &.Mui-error, &.Mui-disabled": { + color: "#1d1d21", + }, + }, + }, + }, + MuiInputBase: { + styleOverrides: { + root: { + lineHeight: "1.14285714", + }, + input: { + boxSizing: "border-box", + height: "auto", + }, + }, + }, + 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", + }, + }, + }, + ], + }, + MuiRadio: { + defaultProps: { + size: "small", + }, + styleOverrides: { + root: { + "&:hover": { + backgroundColor: "transparent", + }, + padding: 0, + ".Mui-error > &": { + color: "#da372c", + "&:hover": { + color: "#640019", + }, + }, + "&.Mui-focusVisible": { + outlineColor: "#1662dd", + outlineOffset: 0, + outlineStyle: "solid", + outlineWidth: "2px", + }, + }, + }, + }, + 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", + }, + }, + }, }; diff --git a/packages/odyssey-react-mui/src/themes/odyssey/typography.ts b/packages/odyssey-react-mui/src/themes/odyssey/typography.ts index 624748b0d9..95ee127710 100644 --- a/packages/odyssey-react-mui/src/themes/odyssey/typography.ts +++ b/packages/odyssey-react-mui/src/themes/odyssey/typography.ts @@ -21,52 +21,46 @@ export const typography: ThemeOptions["typography"] = { fontWeightRegular: Number(Tokens.FontWeightNormal), fontWeightMedium: 500, fontWeightBold: Number(Tokens.FontWeightBold), - h1: { + allVariants: { fontFamily: Tokens.FontFamilyBase, + fontFeatureSettings: "'lnum', 'pnum'", + fontVariant: "normal", + letterSpacing: 0, + }, + h1: { 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, @@ -75,6 +69,8 @@ export const typography: ThemeOptions["typography"] = { fontFamily: Tokens.FontFamilyBase, fontWeight: Number(Tokens.FontWeightNormal), fontSize: Tokens.FontScale1, + fontFeatureSettings: "'lnum', 'pnum'", + fontVariant: "normal", lineHeight: Tokens.FontLineHeightBody, letterSpacing: "initial", }, @@ -82,11 +78,9 @@ export const typography: ThemeOptions["typography"] = { body2: undefined, button: undefined, caption: { - fontFamily: Tokens.FontFamilyBase, fontWeight: Tokens.FontWeightNormal, fontSize: Tokens.FontScale0, lineHeight: Tokens.FontLineHeightBody, - letterSpacing: "initial", }, overline: undefined, }; From 04617ce06782f4a6fb0ae61ef15ffdca42a9d725 Mon Sep 17 00:00:00 2001 From: Edbury Enegren <36284167+edburyenegren-okta@users.noreply.github.com> Date: Fri, 24 Jun 2022 11:35:52 -0700 Subject: [PATCH 02/22] chore(odyssey-storybook): separate legacy and mui stories --- .../.storybook/manager-head.html | 10 +++- .../odyssey-storybook/.storybook/manager.js | 3 ++ .../odyssey-storybook/.storybook/preview.js | 3 +- .../CircularLoadIndicator.mdx | 17 ------- .../src/components/FieldGroup/FieldGroup.mdx | 17 ------- .../src/components/Form/Form.mdx | 17 ------- .../src/components/List/List.mdx | 37 -------------- .../src/components/TextArea/TextArea.mdx | 33 ------------ .../{ => odyssey-legacy}/Banner/Banner.mdx | 14 +++--- .../Banner/Banner.stories.tsx | 4 +- .../{ => odyssey-legacy}/Box/Box.docgen.tsx | 2 +- .../{ => odyssey-legacy}/Box/Box.mdx | 4 +- .../{ => odyssey-legacy}/Box/Box.stories.tsx | 4 +- .../{ => odyssey-legacy}/Box/box-stories.css | 0 .../{ => odyssey-legacy}/Button/Button.mdx | 24 ++++----- .../Button/Button.stories.tsx | 4 +- .../Checkbox/Checkbox.mdx | 14 +++--- .../Checkbox/Checkbox.stories.tsx | 4 +- .../CircularLoadIndicator.mdx | 17 +++++++ .../CircularLoadIndicator.stories.tsx | 4 +- .../Field/Field.docgen.tsx | 2 +- .../{ => odyssey-legacy}/Field/Field.mdx | 22 ++++---- .../Field/Field.stories.tsx | 4 +- .../odyssey-legacy/FieldGroup/FieldGroup.mdx | 17 +++++++ .../FieldGroup/FieldGroup.stories.tsx | 4 +- .../components/odyssey-legacy/Form/Form.mdx | 17 +++++++ .../Form/Form.stories.tsx | 4 +- .../{ => odyssey-legacy}/Heading/Heading.mdx | 6 +-- .../Heading/Heading.stories.tsx | 4 +- .../Icon/Icon.stories.tsx | 6 +-- .../{ => odyssey-legacy}/Infobox/Infobox.mdx | 22 ++++---- .../Infobox/Infobox.stories.tsx | 4 +- .../{ => odyssey-legacy}/Link/Link.mdx | 8 +-- .../Link/Link.stories.tsx | 4 +- .../components/odyssey-legacy/List/List.mdx | 37 ++++++++++++++ .../List/List.stories.tsx | 4 +- .../{ => odyssey-legacy}/Modal/Modal.mdx | 4 +- .../Modal/Modal.stories.tsx | 4 +- .../NativeSelect/NativeSelect.mdx | 8 +-- .../NativeSelect/NativeSelect.stories.tsx | 7 ++- .../{ => odyssey-legacy}/Radio/Radio.mdx | 12 ++--- .../Radio/Radio.stories.tsx | 4 +- .../ScreenReaderText.stories.tsx | 4 +- .../{ => odyssey-legacy}/Select/Select.mdx | 18 +++---- .../Select/Select.stories.tsx | 4 +- .../{ => odyssey-legacy}/Status/Status.mdx | 14 +++--- .../Status/Status.stories.tsx | 4 +- .../{ => odyssey-legacy}/Table/Table.mdx | 16 +++--- .../Table/Table.stories.tsx | 4 +- .../{ => odyssey-legacy}/Tabs/Tabs.mdx | 6 +-- .../Tabs/Tabs.stories.tsx | 4 +- .../{ => odyssey-legacy}/TagList/TagList.mdx | 6 +-- .../TagList/TagList.stories.tsx | 4 +- .../{ => odyssey-legacy}/Text/Text.mdx | 50 +++++++++---------- .../Text/TextElements.stories.tsx | 4 +- .../Text/TextStyles.stories.tsx | 4 +- .../odyssey-legacy/TextArea/TextArea.mdx | 33 ++++++++++++ .../TextArea/TextArea.stories.tsx | 4 +- .../TextInput/TextInput.mdx | 8 +-- .../TextInput/TextInput.stories.tsx | 4 +- .../{ => odyssey-legacy}/Toast/Toast.mdx | 4 +- .../Toast/Toast.stories.tsx | 4 +- .../{ => odyssey-legacy}/Tooltip/Tooltip.mdx | 6 +-- .../Tooltip/Tooltip.stories.tsx | 8 ++- .../CircularProgress/CircularProgress.mdx | 0 .../CircularProgress.stories.tsx | 2 +- .../PasswordInput/PasswordInput.mdx | 0 .../PasswordInput/PasswordInput.stories.tsx | 2 +- .../Typography/Typography.mdx | 0 .../Typography/Typography.stories.tsx | 2 +- 70 files changed, 336 insertions(+), 319 deletions(-) delete mode 100644 packages/odyssey-storybook/src/components/CircularLoadIndicator/CircularLoadIndicator.mdx delete mode 100644 packages/odyssey-storybook/src/components/FieldGroup/FieldGroup.mdx delete mode 100644 packages/odyssey-storybook/src/components/Form/Form.mdx delete mode 100644 packages/odyssey-storybook/src/components/List/List.mdx delete mode 100644 packages/odyssey-storybook/src/components/TextArea/TextArea.mdx rename packages/odyssey-storybook/src/components/{ => odyssey-legacy}/Banner/Banner.mdx (91%) rename packages/odyssey-storybook/src/components/{ => odyssey-legacy}/Banner/Banner.stories.tsx (95%) rename packages/odyssey-storybook/src/components/{ => odyssey-legacy}/Box/Box.docgen.tsx (91%) rename packages/odyssey-storybook/src/components/{ => odyssey-legacy}/Box/Box.mdx (94%) rename packages/odyssey-storybook/src/components/{ => odyssey-legacy}/Box/Box.stories.tsx (99%) rename packages/odyssey-storybook/src/components/{ => odyssey-legacy}/Box/box-stories.css (100%) rename packages/odyssey-storybook/src/components/{ => odyssey-legacy}/Button/Button.mdx (88%) rename packages/odyssey-storybook/src/components/{ => odyssey-legacy}/Button/Button.stories.tsx (97%) rename packages/odyssey-storybook/src/components/{ => odyssey-legacy}/Checkbox/Checkbox.mdx (84%) rename packages/odyssey-storybook/src/components/{ => odyssey-legacy}/Checkbox/Checkbox.stories.tsx (96%) create mode 100644 packages/odyssey-storybook/src/components/odyssey-legacy/CircularLoadIndicator/CircularLoadIndicator.mdx rename packages/odyssey-storybook/src/components/{ => odyssey-legacy}/CircularLoadIndicator/CircularLoadIndicator.stories.tsx (92%) rename packages/odyssey-storybook/src/components/{ => odyssey-legacy}/Field/Field.docgen.tsx (91%) rename packages/odyssey-storybook/src/components/{ => odyssey-legacy}/Field/Field.mdx (88%) rename packages/odyssey-storybook/src/components/{ => odyssey-legacy}/Field/Field.stories.tsx (96%) create mode 100644 packages/odyssey-storybook/src/components/odyssey-legacy/FieldGroup/FieldGroup.mdx rename packages/odyssey-storybook/src/components/{ => odyssey-legacy}/FieldGroup/FieldGroup.stories.tsx (95%) create mode 100644 packages/odyssey-storybook/src/components/odyssey-legacy/Form/Form.mdx rename packages/odyssey-storybook/src/components/{ => odyssey-legacy}/Form/Form.stories.tsx (95%) rename packages/odyssey-storybook/src/components/{ => odyssey-legacy}/Heading/Heading.mdx (63%) rename packages/odyssey-storybook/src/components/{ => odyssey-legacy}/Heading/Heading.stories.tsx (91%) rename packages/odyssey-storybook/src/components/{ => odyssey-legacy}/Icon/Icon.stories.tsx (96%) rename packages/odyssey-storybook/src/components/{ => odyssey-legacy}/Infobox/Infobox.mdx (90%) rename packages/odyssey-storybook/src/components/{ => odyssey-legacy}/Infobox/Infobox.stories.tsx (98%) rename packages/odyssey-storybook/src/components/{ => odyssey-legacy}/Link/Link.mdx (91%) rename packages/odyssey-storybook/src/components/{ => odyssey-legacy}/Link/Link.stories.tsx (95%) create mode 100644 packages/odyssey-storybook/src/components/odyssey-legacy/List/List.mdx rename packages/odyssey-storybook/src/components/{ => odyssey-legacy}/List/List.stories.tsx (97%) rename packages/odyssey-storybook/src/components/{ => odyssey-legacy}/Modal/Modal.mdx (96%) rename packages/odyssey-storybook/src/components/{ => odyssey-legacy}/Modal/Modal.stories.tsx (97%) rename packages/odyssey-storybook/src/components/{ => odyssey-legacy}/NativeSelect/NativeSelect.mdx (50%) rename packages/odyssey-storybook/src/components/{ => odyssey-legacy}/NativeSelect/NativeSelect.stories.tsx (94%) rename packages/odyssey-storybook/src/components/{ => odyssey-legacy}/Radio/Radio.mdx (83%) rename packages/odyssey-storybook/src/components/{ => odyssey-legacy}/Radio/Radio.stories.tsx (94%) rename packages/odyssey-storybook/src/components/{ => odyssey-legacy}/ScreenReaderText/ScreenReaderText.stories.tsx (92%) rename packages/odyssey-storybook/src/components/{ => odyssey-legacy}/Select/Select.mdx (85%) rename packages/odyssey-storybook/src/components/{ => odyssey-legacy}/Select/Select.stories.tsx (95%) rename packages/odyssey-storybook/src/components/{ => odyssey-legacy}/Status/Status.mdx (83%) rename packages/odyssey-storybook/src/components/{ => odyssey-legacy}/Status/Status.stories.tsx (94%) rename packages/odyssey-storybook/src/components/{ => odyssey-legacy}/Table/Table.mdx (90%) rename packages/odyssey-storybook/src/components/{ => odyssey-legacy}/Table/Table.stories.tsx (99%) rename packages/odyssey-storybook/src/components/{ => odyssey-legacy}/Tabs/Tabs.mdx (95%) rename packages/odyssey-storybook/src/components/{ => odyssey-legacy}/Tabs/Tabs.stories.tsx (94%) rename packages/odyssey-storybook/src/components/{ => odyssey-legacy}/TagList/TagList.mdx (85%) rename packages/odyssey-storybook/src/components/{ => odyssey-legacy}/TagList/TagList.stories.tsx (90%) rename packages/odyssey-storybook/src/components/{ => odyssey-legacy}/Text/Text.mdx (88%) rename packages/odyssey-storybook/src/components/{ => odyssey-legacy}/Text/TextElements.stories.tsx (98%) rename packages/odyssey-storybook/src/components/{ => odyssey-legacy}/Text/TextStyles.stories.tsx (97%) create mode 100644 packages/odyssey-storybook/src/components/odyssey-legacy/TextArea/TextArea.mdx rename packages/odyssey-storybook/src/components/{ => odyssey-legacy}/TextArea/TextArea.stories.tsx (94%) rename packages/odyssey-storybook/src/components/{ => odyssey-legacy}/TextInput/TextInput.mdx (94%) rename packages/odyssey-storybook/src/components/{ => odyssey-legacy}/TextInput/TextInput.stories.tsx (95%) rename packages/odyssey-storybook/src/components/{ => odyssey-legacy}/Toast/Toast.mdx (97%) rename packages/odyssey-storybook/src/components/{ => odyssey-legacy}/Toast/Toast.stories.tsx (97%) rename packages/odyssey-storybook/src/components/{ => odyssey-legacy}/Tooltip/Tooltip.mdx (94%) rename packages/odyssey-storybook/src/components/{ => odyssey-legacy}/Tooltip/Tooltip.stories.tsx (93%) rename packages/odyssey-storybook/src/components/{ => odyssey-mui}/CircularProgress/CircularProgress.mdx (100%) rename packages/odyssey-storybook/src/components/{ => odyssey-mui}/CircularProgress/CircularProgress.stories.tsx (94%) rename packages/odyssey-storybook/src/components/{ => odyssey-mui}/PasswordInput/PasswordInput.mdx (100%) rename packages/odyssey-storybook/src/components/{ => odyssey-mui}/PasswordInput/PasswordInput.stories.tsx (97%) rename packages/odyssey-storybook/src/components/{ => odyssey-mui}/Typography/Typography.mdx (100%) rename packages/odyssey-storybook/src/components/{ => odyssey-mui}/Typography/Typography.stories.tsx (96%) 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/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/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..827eff5067 100644 --- a/packages/odyssey-storybook/src/components/Banner/Banner.stories.tsx +++ b/packages/odyssey-storybook/src/components/odyssey-legacy/Banner/Banner.stories.tsx @@ -13,11 +13,11 @@ 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 91% 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..c9b335fef5 100644 --- a/packages/odyssey-storybook/src/components/Box/Box.docgen.tsx +++ b/packages/odyssey-storybook/src/components/odyssey-legacy/Box/Box.docgen.tsx @@ -11,6 +11,6 @@ */ import React, { forwardRef } from "react"; -import type { BoxProps } from "../../../../odyssey-react/src"; +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..a87f9d2d17 100644 --- a/packages/odyssey-storybook/src/components/Box/Box.stories.tsx +++ b/packages/odyssey-storybook/src/components/odyssey-legacy/Box/Box.stories.tsx @@ -13,14 +13,14 @@ import React, { 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 97% 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..af54f55f9b 100644 --- a/packages/odyssey-storybook/src/components/Button/Button.stories.tsx +++ b/packages/odyssey-storybook/src/components/odyssey-legacy/Button/Button.stories.tsx @@ -16,13 +16,13 @@ import { Button, ButtonProps, 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: { 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 96% 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..141d8d751f 100644 --- a/packages/odyssey-storybook/src/components/Checkbox/Checkbox.stories.tsx +++ b/packages/odyssey-storybook/src/components/odyssey-legacy/Checkbox/Checkbox.stories.tsx @@ -16,12 +16,12 @@ 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 92% 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..5bbf140620 100644 --- a/packages/odyssey-storybook/src/components/CircularLoadIndicator/CircularLoadIndicator.stories.tsx +++ b/packages/odyssey-storybook/src/components/odyssey-legacy/CircularLoadIndicator/CircularLoadIndicator.stories.tsx @@ -15,11 +15,11 @@ 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 `