diff --git a/components/language-chooser/react/language-chooser-react-mui/README.md b/components/language-chooser/react/language-chooser-react-mui/README.md index df4cd3e..c1d9e96 100644 --- a/components/language-chooser/react/language-chooser-react-mui/README.md +++ b/components/language-chooser/react/language-chooser-react-mui/README.md @@ -19,10 +19,12 @@ Install with npm: npm i @ethnolib/language-chooser-react-mui ``` -### Sizing +### Sizing and Colors The LanguageChooser will grow to fit the size of its parent. Height and width should be set on the parent. An explicit size should be set on its parent. Our recommended size is 1084x586 (to fit on a low-end notebook with windows task bar) but it will work in a variety of sizes. +The Language Chooser will adopt the primary color of the [MUI theme](https://mui.com/material-ui/customization/theming/) and by default derive the card colors from the primary color. This can be overriden with the `languageCardBackgroundColorOverride` and `scriptCardBackgroundColorOverride` props, or by `setting theme.palette.primary.lighter` (used for the language card color) and `theme.palette.primary.lightest` (used for the script card color) in your MUI theme. + ### Props - `searchResultModifier: ( @@ -42,6 +44,8 @@ The LanguageChooser will grow to fit the size of its parent. Height and width sh - `onSelectionChange?: (orthographyInfo: IOrthography | undefined, languageTag: string | undefined) => void` - Whenever the user makes or unselects a complete language selection, this function will be called with the selected language information or undefined, respectively. - `rightPanelComponent?: React.ReactNode` - A slot for a component to go in the space on the upper right side of the language chooser. See the Storybook Dialog Demo -> Additional Right Panel Component for an example. - `actionButtons?: React.ReactNode` - A slot for dialog action buttons, e.g. Ok and Cancel. See the [LanguageChooserDialog.tsx](./src/demos/LanguageChooserDialog.tsx) example. +- `languageCardBackgroundColorOverride?: string` - The language chooser will adopt the primary color of the MUI theme. By default, it will make the language card backgrounds be the primary color but 70% lighter (or use theme.palette.primary.lighter if it is set). If provided, this prop will override this background color behavior. See the Storybook Dialog Demo -> withCardBackgroundColorOverrides for an example. +- `scriptCardBackgroundColorOverride?: string` - The language chooser will adopt the primary color of the MUI theme. By default, it will make the script card backgrounds be the primary color but 88% lighter (or use theme.palette.primary.lightest if it is set). If provided, this prop will override this background color behavior. See the Storybook Dialog Demo -> withCardBackgroundColorOverrides for an example. ### Demos diff --git a/components/language-chooser/react/language-chooser-react-mui/src/CustomizeLanguageButton.tsx b/components/language-chooser/react/language-chooser-react-mui/src/CustomizeLanguageButton.tsx index 8cb11d2..d6dc273 100644 --- a/components/language-chooser/react/language-chooser-react-mui/src/CustomizeLanguageButton.tsx +++ b/components/language-chooser/react/language-chooser-react-mui/src/CustomizeLanguageButton.tsx @@ -1,9 +1,14 @@ /** @jsxImportSource @emotion/react */ import { css } from "@emotion/react"; -import { Button, ButtonProps, Tooltip, Typography } from "@mui/material"; +import { + Button, + ButtonProps, + Tooltip, + Typography, + useTheme, +} from "@mui/material"; import EditIcon from "@mui/icons-material/Edit"; import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined"; -import { COLORS } from "./colors"; export const CustomizeLanguageButton: React.FunctionComponent< { @@ -15,16 +20,17 @@ export const CustomizeLanguageButton: React.FunctionComponent< forUnlistedLanguage: showAsUnlistedLanguage, ...buttonProps }) => { + const theme = useTheme(); return ( - + + + Language Display Name:{" "} + {selectedValue?.customDetails?.displayName} +
+ Language Code: {selectedValue?.language?.languageSubtag} +
+ Script: {selectedValue?.script?.name} +
+ Region: {selectedValue?.customDetails?.region?.name} +
+ Dialect: {selectedValue?.customDetails?.dialect} +
+ Language tag: {languageTag} + + +
+ + - - ) : undefined - } - /> + : undefined + } + {...languageChooserDialogProps} + /> + - + ); }; diff --git a/components/language-chooser/react/language-chooser-react-mui/src/demos/DummyRightPanelComponent.tsx b/components/language-chooser/react/language-chooser-react-mui/src/demos/DummyRightPanelComponent.tsx index 75ef2e7..5dbbc16 100644 --- a/components/language-chooser/react/language-chooser-react-mui/src/demos/DummyRightPanelComponent.tsx +++ b/components/language-chooser/react/language-chooser-react-mui/src/demos/DummyRightPanelComponent.tsx @@ -19,7 +19,8 @@ export const DummyRightPanelComponent: React.FunctionComponent = () => { `} > - Space here to add another component. For example, a font picker. + This language chooser component allows you to add other components you + might need in this area. For example, a font picker. Font: - +
-
- - - - Choose Language - - - - -
-
- + Choose Language + + + + + + ); }; diff --git a/components/language-chooser/react/language-chooser-react-mui/src/demos/PageDemo.tsx b/components/language-chooser/react/language-chooser-react-mui/src/demos/PageDemo.tsx index 0f0bfdb..336a26d 100644 --- a/components/language-chooser/react/language-chooser-react-mui/src/demos/PageDemo.tsx +++ b/components/language-chooser/react/language-chooser-react-mui/src/demos/PageDemo.tsx @@ -1,181 +1,126 @@ /** @jsxImportSource @emotion/react */ import { css } from "@emotion/react"; import { defaultSearchResultModifier } from "@ethnolib/find-language"; -import { - AppBar, - Button, - FormControl, - FormControlLabel, - Radio, - RadioGroup, - Toolbar, - Typography, -} from "@mui/material"; +import { Slider, Typography } from "@mui/material"; import "../styles.css"; import { LanguageChooser } from "../LanguageChooser"; import React from "react"; -import { OptionCard } from "../OptionCard"; const darkColor = "#800303"; const mediumColor = "#bd746f"; const lightColor = "#e8caca"; - -const TOP_ROW_HEIGHT = "600px"; +const veryLightColor = "#f7ebeb"; export const PageDemo: React.FunctionComponent = () => { const [languageTag, setLanguageTag] = React.useState(""); + const [height, setHeight] = React.useState(500); + const [width, setWidth] = React.useState(900); + const mainSectionHeight = `${height}px`; + const languageChooserWidth = `${width}px`; return (
- - - + This demonstrates the Language Chooser in a non-dialog context. It + should be responsive to size changes. + +
+
- Settings - - - - + Adjust Height: + setHeight(value as number)} + /> +
+
+ Adjust Width: + setWidth(value as number)} + /> +
+
+
-
- Font: - -
- Roboto Mono -
- - -
- Serif -
- - -
- Sans-serif -
- -
-
+ >
- - Language: - { />
- Color: - - - - } - label="Red" - disabled={true} - /> - } - label="Blue" - disabled={true} - /> - } - label="Green" - disabled={true} - /> - - - - This is just a goofy page to demonstrate the language chooser in a - non-dialog context. - + {loremIpsum}
- Selected Font: Roboto Mono - Selected Language Tag: {languageTag}{" "} + Selected Language Tag: {languageTag} - Selected Color: red
); }; + +const loremIpsum = + "Lorem ipsum dolor sit amet, consectetur adipiscing elit. In et est sed magna venenatis ultrices consectetur faucibus risus. Nullam aliquet varius leo eget bibendum. Pellentesque vestibulum magna vitae commodo faucibus. Maecenas metus tortor, lobortis eget fringilla nec, ultricies in orci. Phasellus convallis iaculis turpis. Aliquam lobortis congue vehicula. Pellentesque molestie eleifend feugiat. Etiam lectus risus, suscipit non quam sit amet, condimentum convallis tortor. Suspendisse sodales auctor condimentum. Sed sed ullamcorper tortor, non placerat diam. Donec vitae orci ac odio ultricies rhoncus et et elit. Fusce semper dolor id lectus lobortis molestie. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus commodo enim in facilisis malesuada. Ut non euismod dui. Morbi sapien odio, sodales vitae auctor ac, lobortis ut felis. Nulla ornare diam id vestibulum tincidunt. Curabitur vel ex ipsum. Aenean vel porttitor metus. Praesent vehicula sit amet libero ut ultrices. Ut viverra eros id luctus viverra. Aliquam volutpat, dui in fermentum cursus, nisl lectus euismod justo, sed posuere ligula odio a purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget suscipit tortor. Suspendisse imperdiet dui nisi, eget cursus ipsum varius at. Mauris elit erat, sodales eu ligula quis, blandit tempus nulla. Aenean vestibulum congue pharetra. Sed risus tortor, blandit nec ultricies non, vestibulum quis tortor. Donec in gravida ante. Vivamus luctus velit non consequat sodales. Vestibulum eget nisi velit. Etiam venenatis scelerisque dolor non mattis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus quis interdum enim. Donec feugiat risus nec tempor iaculis. Morbi sollicitudin venenatis ullamcorper. Praesent massa arcu, venenatis ut tincidunt vel, feugiat eget augue. Nunc pellentesque justo dolor, ut hendrerit ipsum vulputate eu. Sed sed ipsum ut ligula maximus fermentum eget pretium leo. Aliquam feugiat ante eget lectus semper, in vulputate quam aliquet. Phasellus ac turpis sed ipsum gravida dapibus. Praesent vehicula magna lectus, vitae efficitur libero feugiat accumsan. Nunc bibendum, lacus quis mollis elementum, odio mi ultricies nisl, nec pretium nunc erat id mauris. Sed volutpat purus arcu, sed tincidunt quam interdum congue. Curabitur laoreet malesuada risus, at dictum justo aliquet sed. Etiam venenatis sem quis diam mollis rutrum. Mauris est ligula, dictum sed ultrices in, suscipit et nisl. Nunc massa est, consequat eu fringilla in, venenatis elementum libero. Proin maximus condimentum sodales. Integer tempus velit non arcu consequat, eget finibus lectus pellentesque. Donec tempus ornare elementum. Nullam eget diam vel eros tincidunt sodales vel non diam. Etiam leo felis, tincidunt in tincidunt "; diff --git a/components/language-chooser/react/language-chooser-react-mui/src/demos/ThemeDemo.stories.tsx b/components/language-chooser/react/language-chooser-react-mui/src/demos/ThemeDemo.stories.tsx new file mode 100644 index 0000000..bc8a856 --- /dev/null +++ b/components/language-chooser/react/language-chooser-react-mui/src/demos/ThemeDemo.stories.tsx @@ -0,0 +1,11 @@ +import type { Meta, StoryObj } from "@storybook/react"; +import { ThemeDemo } from "./ThemeDemo"; + +const meta: Meta = { + component: ThemeDemo, +}; + +export default meta; +type Story = StoryObj; + +export const Primary: Story = {}; diff --git a/components/language-chooser/react/language-chooser-react-mui/src/demos/ThemeDemo.tsx b/components/language-chooser/react/language-chooser-react-mui/src/demos/ThemeDemo.tsx new file mode 100644 index 0000000..9560170 --- /dev/null +++ b/components/language-chooser/react/language-chooser-react-mui/src/demos/ThemeDemo.tsx @@ -0,0 +1,166 @@ +/** @jsxImportSource @emotion/react */ +import { css } from "@emotion/react"; +import { LanguageChooser } from "../LanguageChooser"; +import React from "react"; +import { + Button, + createTheme, + FormControl, + FormControlLabel, + lighten, + darken, + Radio, + RadioGroup, + ThemeProvider, + Typography, + Checkbox, +} from "@mui/material"; +import { defaultSearchResultModifier } from "@ethnolib/find-language"; + +const PrimaryColorChoices = ["#1d94a4", "#512f6b", "#3b1e04", "#800303"]; + +export const ThemeDemo: React.FunctionComponent = () => { + const [primaryColor, setPrimaryColor] = React.useState( + PrimaryColorChoices[0] + ); + const [colorOverrides, setColorOverrides] = React.useState(false); + const theme = createTheme(); + if (primaryColor) { + theme.palette.primary.main = primaryColor; + theme.palette.primary.light = lighten(primaryColor, 0.2); + theme.palette.primary.dark = darken(primaryColor, 0.2); + } + const dialogActionButtons = ( +
+ + +
+ ); + + return ( + +
+ + This demonstrates the Language Chooser in different MUI theme + contexts. + +
+
+
+ + Change theme primary color: + + + setPrimaryColor(e.target.value)} + > + {PrimaryColorChoices.map((color) => ( + } + label={color} + key={color} + css={css` + color: ${color}; + font-weight: bold; + `} + /> + ))} + + + {/* Add a checkbox to override the colors */} + setColorOverrides(e.target.checked)} + color="primary" + /> + } + label="Override theme colors" + /> +
+
+ +
+
+ + ); +};