@unicity/design-system
Version:
A comprehensive React component library built on Material-UI with advanced theming capabilities including neumorphism design support
379 lines (378 loc) • 16.3 kB
JavaScript
var __defProp = Object.defineProperty;
var __name = (target, value) => __defProp(target, "name", { value, configurable: !0 });
import { useTheme, jsxs, jsx, Box, Typography, IconButton, Tooltip, Switch, Slider, Alert } from "./index-BnVXMrvt.js";
import { MenuBook, Info } from "@mui/icons-material";
import { useTranslation } from "react-i18next";
const ReadingComprehension = /* @__PURE__ */ __name(({
compact = !1,
onEvent
}) => {
const {
t
} = useTranslation(), {
settings,
updateSettings,
resolvedMode
} = useTheme(), accessibilityMode = settings.accessibilityMode, isDarkModeHighContrast = resolvedMode === "dark" && accessibilityMode === "high-contrast", reading = settings.reading, fontSize = settings.fontSize, onReadingChange = /* @__PURE__ */ __name((field, value) => {
updateSettings({
...settings,
reading: {
...reading,
[field]: value
}
});
}, "onReadingChange");
return /* @__PURE__ */ jsxs(Box, { children: [
/* @__PURE__ */ jsxs(Box, { sx: {
display: "flex",
alignItems: "center",
justifyContent: "space-between",
borderColor: "divider",
borderRadius: 1,
backgroundColor: "background.paper",
mb: 3,
gap: 1.5
}, children: [
/* @__PURE__ */ jsx(Box, { sx: /* @__PURE__ */ __name((theme) => ({
width: 32,
height: 32,
borderRadius: 1.5,
backgroundColor: "primary.main",
color: "primary.contrastText",
display: "flex",
alignItems: "center",
justifyContent: "center",
"& .MuiSvgIcon-root": {
fill: `${theme.palette.primary.contrastText} !important`,
color: `${theme.palette.primary.contrastText} !important`,
filter: isDarkModeHighContrast ? "brightness(0)" : resolvedMode === "dark" ? "brightness(0) invert(0)" : "brightness(0) invert(1)",
fontSize: "1rem"
}
}), "sx"), children: /* @__PURE__ */ jsx(MenuBook, { fontSize: "small" }) }),
/* @__PURE__ */ jsxs(Box, { sx: {
flex: 1
}, children: [
/* @__PURE__ */ jsx(Typography, { sx: {
fontSize: "calc(14px * var(--unicity-font-scale, 1))",
fontWeight: 600
}, children: t("reading_comprehension.title") }),
/* @__PURE__ */ jsx(Typography, { sx: {
fontSize: "calc(12px * var(--unicity-font-scale, 1))",
color: "text.secondary",
mt: 0.25
}, children: t("reading_comprehension.description") })
] }),
/* @__PURE__ */ jsx(Tooltip, { title: t("reading_comprehension.tooltip"), placement: "left", arrow: !0, children: /* @__PURE__ */ jsx(IconButton, { size: "small", sx: {
alignSelf: "flex-start"
}, children: /* @__PURE__ */ jsx(Info, { fontSize: "small" }) }) })
] }),
/* @__PURE__ */ jsx(Box, { sx: {
p: 3,
border: "1px solid",
borderColor: "divider",
borderRadius: 1,
backgroundColor: "background.paper",
boxShadow: "0 1px 3px rgba(0, 0, 0, 0.08)",
mb: 3
}, children: /* @__PURE__ */ jsxs(Box, { sx: {
display: "flex",
flexDirection: "column",
gap: 2.5
}, children: [
/* @__PURE__ */ jsxs(Box, { sx: {
m: 0,
width: "100%",
display: "flex",
justifyContent: "space-between",
alignItems: "center"
}, children: [
/* @__PURE__ */ jsxs(Box, { sx: {
flex: 1,
pr: 2
}, children: [
/* @__PURE__ */ jsx(Typography, { variant: "body2", fontWeight: 500, children: t("reading_comprehension.reading_mode") }),
/* @__PURE__ */ jsx(Typography, { variant: "caption", color: "textSecondary", children: t("reading_comprehension.reading_mode_description") })
] }),
/* @__PURE__ */ jsx(Switch, { checked: reading.readingMode, onChange: /* @__PURE__ */ __name((checked) => onReadingChange("readingMode", checked), "onChange") })
] }),
/* @__PURE__ */ jsxs(Box, { children: [
/* @__PURE__ */ jsxs(Typography, { variant: "body2", fontWeight: 500, mb: 1, children: [
t("reading_comprehension.line_height"),
": ",
reading.lineHeight
] }),
/* @__PURE__ */ jsx(Slider, { value: reading.lineHeight, onChange: /* @__PURE__ */ __name((value) => onReadingChange("lineHeight", value), "onChange"), min: 1, max: 3, step: 0.1, marks: [{
value: 1,
label: "1x"
}, {
value: 1.5,
label: "1.5x"
}, {
value: 2,
label: "2x"
}, {
value: 3,
label: "3x"
}], sx: {
"& .MuiSlider-markLabel": {
fontSize: "0.75rem",
'&[data-index="0"]': {
transform: "translateX(0%)",
textAlign: "left"
},
'&[data-index="3"]': {
transform: "translateX(-100%)",
textAlign: "right"
}
}
} })
] }),
/* @__PURE__ */ jsxs(Box, { children: [
/* @__PURE__ */ jsxs(Typography, { variant: "body2", fontWeight: 500, mb: 1, children: [
t("reading_comprehension.letter_spacing_label"),
": ",
reading.letterSpacing === 0 ? t("reading_comprehension.spacing_labels.normal") : reading.letterSpacing === 2.5 ? t("reading_comprehension.spacing_labels.wide") : reading.letterSpacing === 5 ? t("reading_comprehension.spacing_labels.extra_wide") : t("common.custom")
] }),
/* @__PURE__ */ jsx(Slider, { value: reading.letterSpacing, onChange: /* @__PURE__ */ __name((value) => onReadingChange("letterSpacing", value), "onChange"), min: 0, max: 5, step: 0.5, marks: [{
value: 0,
label: t("reading_comprehension.spacing_labels.normal")
}, {
value: 2.5,
label: t("reading_comprehension.spacing_labels.wide")
}, {
value: 5,
label: t("reading_comprehension.spacing_labels.extra_wide")
}], sx: {
"& .MuiSlider-markLabel": {
fontSize: "0.75rem",
'&[data-index="0"]': {
transform: "translateX(0%)",
textAlign: "left"
},
'&[data-index="2"]': {
transform: "translateX(-100%)",
textAlign: "right"
}
}
} })
] }),
/* @__PURE__ */ jsxs(Box, { children: [
/* @__PURE__ */ jsxs(Typography, { variant: "body2", fontWeight: 500, mb: 1, children: [
t("reading_comprehension.word_spacing_label"),
": ",
reading.wordSpacing === 0 ? t("reading_comprehension.spacing_labels.normal") : reading.wordSpacing === 5 ? t("reading_comprehension.spacing_labels.wide") : reading.wordSpacing === 10 ? t("reading_comprehension.spacing_labels.extra_wide") : t("common.custom")
] }),
/* @__PURE__ */ jsx(Slider, { value: reading.wordSpacing, onChange: /* @__PURE__ */ __name((value) => onReadingChange("wordSpacing", value), "onChange"), min: 0, max: 10, step: 1, marks: [{
value: 0,
label: t("reading_comprehension.spacing_labels.normal")
}, {
value: 5,
label: t("reading_comprehension.spacing_labels.wide")
}, {
value: 10,
label: t("reading_comprehension.spacing_labels.extra_wide")
}], sx: {
"& .MuiSlider-markLabel": {
fontSize: "0.75rem",
'&[data-index="0"]': {
transform: "translateX(0%)",
textAlign: "left"
},
'&[data-index="2"]': {
transform: "translateX(-100%)",
textAlign: "right"
}
}
} })
] }),
/* @__PURE__ */ jsxs(Box, { sx: {
m: 0,
width: "100%",
display: "flex",
justifyContent: "space-between",
alignItems: "center"
}, children: [
/* @__PURE__ */ jsxs(Box, { sx: {
flex: 1,
pr: 2
}, children: [
/* @__PURE__ */ jsx(Typography, { variant: "body2", fontWeight: 500, children: t("reading_comprehension.reading_guide") }),
/* @__PURE__ */ jsx(Typography, { variant: "caption", color: "textSecondary", children: t("reading_comprehension.reading_guide_description") })
] }),
/* @__PURE__ */ jsx(Switch, { checked: reading.readingGuide, onChange: /* @__PURE__ */ __name((checked) => onReadingChange("readingGuide", checked), "onChange") })
] })
] }) }),
!compact && /* @__PURE__ */ jsxs(Box, { mt: 2, p: 2, children: [
/* @__PURE__ */ jsxs(Typography, { variant: "caption", fontWeight: 500, mb: 1.5, color: "textSecondary", sx: {
fontSize: "0.75rem"
}, children: [
t("text_size.preview"),
" & ",
t("common.guidelines")
] }),
/* @__PURE__ */ jsxs(Box, { mb: 3, children: [
/* @__PURE__ */ jsx(Typography, { variant: "body2", fontWeight: 500, mb: 1.5, children: t("reading_comprehension.typography_spacing_demo") }),
/* @__PURE__ */ jsxs(Box, { sx: {
display: "grid",
gridTemplateColumns: {
xs: "1fr",
md: "1fr 1fr"
},
gap: 2
}, children: [
/* @__PURE__ */ jsxs(Box, { sx: {
p: 2,
border: "1px solid",
borderColor: "divider",
borderRadius: 1,
backgroundColor: "background.paper"
}, children: [
/* @__PURE__ */ jsx(Typography, { variant: "caption", color: "textSecondary", mb: 1, display: "block", children: t("reading_comprehension.standard_spacing") }),
/* @__PURE__ */ jsx(Typography, { variant: "body2", sx: {
lineHeight: 1.5,
letterSpacing: "0px",
wordSpacing: "0px",
fontSize: `${12 * fontSize.scale}px`
}, children: t("reading_comprehension.standard_spacing_description") })
] }),
/* @__PURE__ */ jsxs(Box, { sx: {
p: 2,
border: "2px solid",
borderColor: "primary.main",
borderRadius: 1,
backgroundColor: "background.paper"
}, children: [
/* @__PURE__ */ jsx(Typography, { variant: "caption", color: "textSecondary", mb: 1, display: "block", children: t("reading_comprehension.custom_spacing") }),
/* @__PURE__ */ jsx(Typography, { variant: "body2", sx: {
lineHeight: reading.lineHeight,
letterSpacing: `${reading.letterSpacing}px`,
wordSpacing: `${reading.wordSpacing}px`,
fontSize: `${12 * fontSize.scale}px`
}, children: t("reading_comprehension.custom_spacing_description") })
] })
] })
] }),
/* @__PURE__ */ jsxs(Box, { mb: 3, children: [
/* @__PURE__ */ jsx(Typography, { variant: "body2", fontWeight: 500, mb: 1.5, children: t("reading_comprehension.interactive_sample") }),
/* @__PURE__ */ jsxs(Box, { sx: {
p: 2,
backgroundColor: "background.paper",
border: "1px solid",
borderColor: "divider",
borderRadius: 1
}, children: [
/* @__PURE__ */ jsxs(Typography, { variant: "body1", sx: {
lineHeight: reading.lineHeight,
letterSpacing: `${reading.letterSpacing}px`,
wordSpacing: `${reading.wordSpacing}px`,
fontSize: `${14 * fontSize.scale}px`,
position: "relative",
mb: 2,
...reading.readingGuide && {
"&:hover": {
backgroundColor: "primary.light",
borderRadius: 1,
px: 1,
py: 0.5,
transition: "all 0.2s ease",
cursor: "crosshair"
}
}
}, children: [
/* @__PURE__ */ jsx("strong", { children: t("reading_comprehension.sample_article_title") }),
/* @__PURE__ */ jsx("br", {}),
/* @__PURE__ */ jsx("br", {}),
t("reading_comprehension.sample_paragraph")
] }),
reading.readingGuide && /* @__PURE__ */ jsx(Alert, { severity: "info", sx: {
mb: 2
}, children: /* @__PURE__ */ jsx(Typography, { variant: "body2", children: t("reading_comprehension.reading_guide_active") }) }),
reading.readingMode && /* @__PURE__ */ jsx(Alert, { severity: "success", sx: {
mb: 2
}, children: /* @__PURE__ */ jsx(Typography, { variant: "body2", children: t("reading_comprehension.reading_mode_active") }) })
] })
] }),
/* @__PURE__ */ jsxs(Box, { mb: 2, children: [
/* @__PURE__ */ jsx(Typography, { variant: "body2", fontWeight: 500, mb: 1.5, children: t("common.accessibility_guidelines") }),
/* @__PURE__ */ jsxs(Box, { sx: {
pl: 1
}, children: [
reading.lineHeight < 1.5 && /* @__PURE__ */ jsx(Alert, { severity: "warning", sx: {
mb: 1
}, children: /* @__PURE__ */ jsx(Typography, { variant: "body2", children: t("reading_comprehension.low_line_height") }) }),
reading.lineHeight >= 1.5 && /* @__PURE__ */ jsx(Alert, { severity: "success", sx: {
mb: 1
}, children: /* @__PURE__ */ jsx(Typography, { variant: "body2", children: t("reading_comprehension.good_line_height", {
height: reading.lineHeight
}) }) }),
(reading.letterSpacing > 0 || reading.wordSpacing > 0) && /* @__PURE__ */ jsx(Alert, { severity: "success", sx: {
mb: 1
}, children: /* @__PURE__ */ jsx(Typography, { variant: "body2", children: t("reading_comprehension.enhanced_spacing") }) }),
reading.readingMode && /* @__PURE__ */ jsx(Alert, { severity: "success", sx: {
mb: 1
}, children: /* @__PURE__ */ jsx(Typography, { variant: "body2", children: t("reading_comprehension.reading_mode_benefit") }) }),
/* @__PURE__ */ jsxs(Typography, { variant: "caption", color: "textSecondary", children: [
/* @__PURE__ */ jsxs("strong", { children: [
t("reading_comprehension.reading_guidelines"),
":"
] }),
/* @__PURE__ */ jsx("br", {}),
"• ",
t("reading_comprehension.line_height_guideline"),
/* @__PURE__ */ jsx("br", {}),
"• ",
t("reading_comprehension.letter_spacing_guideline"),
/* @__PURE__ */ jsx("br", {}),
"• ",
t("reading_comprehension.word_spacing_guideline"),
/* @__PURE__ */ jsx("br", {}),
"• ",
t("reading_comprehension.reading_mode_guideline"),
/* @__PURE__ */ jsx("br", {}),
"• ",
t("reading_comprehension.reading_guide_guideline")
] })
] })
] }),
/* @__PURE__ */ jsxs(Typography, { variant: "caption", color: "textSecondary", sx: {
display: "block"
}, children: [
/* @__PURE__ */ jsxs("strong", { children: [
t("common.current_settings"),
":"
] }),
" ",
t("reading_comprehension.line_height"),
": ",
reading.lineHeight,
" •",
t("reading_comprehension.letter_spacing"),
": ",
reading.letterSpacing,
"px •",
t("reading_comprehension.word_spacing"),
": ",
reading.wordSpacing,
"px •",
t("reading_comprehension.reading_mode"),
": ",
reading.readingMode ? t("common.on") : t("common.off"),
" •",
t("reading_comprehension.reading_guide"),
": ",
reading.readingGuide ? t("common.on") : t("common.off"),
" •",
/* @__PURE__ */ jsxs("strong", { children: [
t("common.accessibility"),
":"
] }),
" ",
reading.lineHeight >= 1.5 && (reading.letterSpacing > 0 || reading.wordSpacing > 0) ? t("common.excellent") : reading.lineHeight >= 1.5 ? t("common.good") : t("audio_alerts.needs_improvement")
] })
] })
] });
}, "ReadingComprehension");
export {
ReadingComprehension,
ReadingComprehension as default
};