@cambly/syntax-core 10.26.0 → 10.27.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Modal/Modal.cjs +2 -2
- package/dist/Modal/Modal.js +1 -1
- package/dist/RichSelect/RichSelectList.cjs +3 -3
- package/dist/RichSelect/RichSelectList.js +2 -2
- package/dist/SelectList/SelectList.cjs +3 -3
- package/dist/SelectList/SelectList.js +2 -2
- package/dist/__chunks/{XISRQSXZ.js → 2SY2EUOV.js} +2 -2
- package/dist/__chunks/{2JHU2ASK.cjs → GNCKDVHZ.cjs} +3 -3
- package/dist/__chunks/{PLUOUSZL.js → GYTKGRJO.js} +1 -1
- package/dist/__chunks/{PLUOUSZL.js.map → GYTKGRJO.js.map} +1 -1
- package/dist/__chunks/{CX2IJ7UB.js → HBIV5AXS.js} +2 -1
- package/dist/__chunks/{CX2IJ7UB.js.map → HBIV5AXS.js.map} +1 -1
- package/dist/__chunks/{HNR3FTMR.cjs → LVKL6CTB.cjs} +2 -1
- package/dist/__chunks/LVKL6CTB.cjs.map +1 -0
- package/dist/__chunks/{CCDZUAUU.cjs → Q6UPTVXE.cjs} +1 -1
- package/dist/__chunks/{CCDZUAUU.cjs.map → Q6UPTVXE.cjs.map} +1 -1
- package/dist/__chunks/{Z6B4SAEZ.cjs → TCUQXSJO.cjs} +3 -3
- package/dist/__chunks/{FJ7CVAIA.js → UFFYM533.js} +2 -2
- package/dist/index.cjs +5 -5
- package/dist/index.js +4 -4
- package/package.json +3 -3
- package/dist/__chunks/HNR3FTMR.cjs.map +0 -1
- /package/dist/__chunks/{XISRQSXZ.js.map → 2SY2EUOV.js.map} +0 -0
- /package/dist/__chunks/{2JHU2ASK.cjs.map → GNCKDVHZ.cjs.map} +0 -0
- /package/dist/__chunks/{Z6B4SAEZ.cjs.map → TCUQXSJO.cjs.map} +0 -0
- /package/dist/__chunks/{FJ7CVAIA.js.map → UFFYM533.js.map} +0 -0
package/dist/Modal/Modal.cjs
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client"
|
|
2
2
|
|
|
3
3
|
|
|
4
|
-
var
|
|
4
|
+
var _LVKL6CTBcjs = require('../__chunks/LVKL6CTB.cjs');
|
|
5
5
|
require('../__chunks/6XZHBBJP.cjs');
|
|
6
6
|
require('../__chunks/HUIHS6RN.cjs');
|
|
7
7
|
require('../__chunks/4TY5KFRY.cjs');
|
|
@@ -25,5 +25,5 @@ require('../__chunks/K4AUV2VK.cjs');
|
|
|
25
25
|
require('../__chunks/X2SDR4SD.cjs');
|
|
26
26
|
|
|
27
27
|
|
|
28
|
-
exports.default =
|
|
28
|
+
exports.default = _LVKL6CTBcjs.Modal;
|
|
29
29
|
//# sourceMappingURL=Modal.cjs.map
|
package/dist/Modal/Modal.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client"
|
|
2
2
|
|
|
3
3
|
|
|
4
|
-
var
|
|
4
|
+
var _TCUQXSJOcjs = require('../__chunks/TCUQXSJO.cjs');
|
|
5
5
|
require('../__chunks/WZZQUJZF.cjs');
|
|
6
6
|
require('../__chunks/VBQTLO2P.cjs');
|
|
7
7
|
require('../__chunks/IXDYGNLN.cjs');
|
|
@@ -19,7 +19,7 @@ require('../__chunks/W2JRKN5E.cjs');
|
|
|
19
19
|
require('../__chunks/WFVGNGEP.cjs');
|
|
20
20
|
require('../__chunks/HWQUS53M.cjs');
|
|
21
21
|
require('../__chunks/UKLQ64N7.cjs');
|
|
22
|
-
require('../__chunks/
|
|
22
|
+
require('../__chunks/Q6UPTVXE.cjs');
|
|
23
23
|
require('../__chunks/J3ES6ZT6.cjs');
|
|
24
24
|
require('../__chunks/MF7LLV7V.cjs');
|
|
25
25
|
require('../__chunks/OVXHL32N.cjs');
|
|
@@ -48,5 +48,5 @@ require('../__chunks/E5P6WRJD.cjs');
|
|
|
48
48
|
require('../__chunks/X2SDR4SD.cjs');
|
|
49
49
|
|
|
50
50
|
|
|
51
|
-
exports.default =
|
|
51
|
+
exports.default = _TCUQXSJOcjs.RichSelectList_default;
|
|
52
52
|
//# sourceMappingURL=RichSelectList.cjs.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use client"
|
|
2
2
|
import {
|
|
3
3
|
RichSelectList_default
|
|
4
|
-
} from "../__chunks/
|
|
4
|
+
} from "../__chunks/UFFYM533.js";
|
|
5
5
|
import "../__chunks/6EKM3QTW.js";
|
|
6
6
|
import "../__chunks/COW4SDSF.js";
|
|
7
7
|
import "../__chunks/KITXUOU4.js";
|
|
@@ -19,7 +19,7 @@ import "../__chunks/OMFFRI3K.js";
|
|
|
19
19
|
import "../__chunks/4U4UW4AK.js";
|
|
20
20
|
import "../__chunks/GFKDPMFK.js";
|
|
21
21
|
import "../__chunks/5MJ6NOUC.js";
|
|
22
|
-
import "../__chunks/
|
|
22
|
+
import "../__chunks/GYTKGRJO.js";
|
|
23
23
|
import "../__chunks/4NSYLHIG.js";
|
|
24
24
|
import "../__chunks/DDUJFFG7.js";
|
|
25
25
|
import "../__chunks/KWRU2RKT.js";
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client"
|
|
2
2
|
|
|
3
3
|
|
|
4
|
-
var
|
|
4
|
+
var _GNCKDVHZcjs = require('../__chunks/GNCKDVHZ.cjs');
|
|
5
5
|
require('../__chunks/4UJE5GMH.cjs');
|
|
6
|
-
require('../__chunks/
|
|
6
|
+
require('../__chunks/Q6UPTVXE.cjs');
|
|
7
7
|
require('../__chunks/XLUVINJW.cjs');
|
|
8
8
|
require('../__chunks/E4LISCR7.cjs');
|
|
9
9
|
require('../__chunks/WFVGNGEP.cjs');
|
|
@@ -18,5 +18,5 @@ require('../__chunks/NOELZTQX.cjs');
|
|
|
18
18
|
require('../__chunks/X2SDR4SD.cjs');
|
|
19
19
|
|
|
20
20
|
|
|
21
|
-
exports.default =
|
|
21
|
+
exports.default = _GNCKDVHZcjs.SelectList;
|
|
22
22
|
//# sourceMappingURL=SelectList.cjs.map
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
"use client"
|
|
2
2
|
import {
|
|
3
3
|
SelectList
|
|
4
|
-
} from "../__chunks/
|
|
4
|
+
} from "../__chunks/2SY2EUOV.js";
|
|
5
5
|
import "../__chunks/Y47XTR6M.js";
|
|
6
|
-
import "../__chunks/
|
|
6
|
+
import "../__chunks/GYTKGRJO.js";
|
|
7
7
|
import "../__chunks/KKADUD65.js";
|
|
8
8
|
import "../__chunks/XQM7YZ26.js";
|
|
9
9
|
import "../__chunks/4U4UW4AK.js";
|
|
@@ -5,7 +5,7 @@ import {
|
|
|
5
5
|
import {
|
|
6
6
|
ColorBaseDestructive700,
|
|
7
7
|
ColorBaseGray800
|
|
8
|
-
} from "./
|
|
8
|
+
} from "./GYTKGRJO.js";
|
|
9
9
|
import {
|
|
10
10
|
Focus_module_default
|
|
11
11
|
} from "./KKADUD65.js";
|
|
@@ -137,4 +137,4 @@ SelectList.Option = SelectOption_default;
|
|
|
137
137
|
export {
|
|
138
138
|
SelectList
|
|
139
139
|
};
|
|
140
|
-
//# sourceMappingURL=
|
|
140
|
+
//# sourceMappingURL=2SY2EUOV.js.map
|
|
@@ -5,7 +5,7 @@ var _4UJE5GMHcjs = require('./4UJE5GMH.cjs');
|
|
|
5
5
|
|
|
6
6
|
|
|
7
7
|
|
|
8
|
-
var
|
|
8
|
+
var _Q6UPTVXEcjs = require('./Q6UPTVXE.cjs');
|
|
9
9
|
|
|
10
10
|
|
|
11
11
|
var _XLUVINJWcjs = require('./XLUVINJW.cjs');
|
|
@@ -113,7 +113,7 @@ function SelectList({
|
|
|
113
113
|
children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
114
114
|
"path",
|
|
115
115
|
{
|
|
116
|
-
fill: errorText ?
|
|
116
|
+
fill: errorText ? _Q6UPTVXEcjs.ColorBaseDestructive700 : _Q6UPTVXEcjs.ColorBaseGray800,
|
|
117
117
|
d: "M15.88 9.29 12 13.17 8.12 9.29a.9959.9959 0 0 0-1.41 0c-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41-.39-.38-1.03-.39-1.42 0z"
|
|
118
118
|
}
|
|
119
119
|
)
|
|
@@ -137,4 +137,4 @@ SelectList.Option = _4UJE5GMHcjs.SelectOption_default;
|
|
|
137
137
|
|
|
138
138
|
|
|
139
139
|
exports.SelectList = SelectList;
|
|
140
|
-
//# sourceMappingURL=
|
|
140
|
+
//# sourceMappingURL=GNCKDVHZ.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../syntax-design-tokens/dist/js/index.js"],"sourcesContent":["/**\n * Do not edit directly\n * Generated on
|
|
1
|
+
{"version":3,"sources":["../../../syntax-design-tokens/dist/js/index.js"],"sourcesContent":["/**\n * Do not edit directly\n * Generated on Tue, 26 Mar 2024 21:52:42 GMT\n */\n\nexport const ColorBaseBlack = \"#000000\";\nexport const ColorBaseDestructive100 = \"#fef3f5\";\nexport const ColorBaseDestructive200 = \"#fad6de\";\nexport const ColorBaseDestructive300 = \"#f2a2b2\";\nexport const ColorBaseDestructive700 = \"#d32a4b\";\nexport const ColorBaseDestructive800 = \"#81162c\";\nexport const ColorBaseDestructive900 = \"#55101d\";\nexport const ColorBaseGray10 = \"#cbcbcb\"; // Used as the default color for dividers and inner strokes\nexport const ColorBaseGray30 = \"#000000\"; // For IconButton background when on top of an image\nexport const ColorBaseGray60 = \"#000000\"; // Used for icon background in classroom video grid\nexport const ColorBaseGray80 = \"#000000\"; // Used as the background for modals\nexport const ColorBaseGray100 = \"#f7f7f7\";\nexport const ColorBaseGray200 = \"#f0f0f0\"; // Used for light mode backgrounds when showing card content on top\nexport const ColorBaseGray300 = \"#d0d0d0\"; // Used for component outlines, eg: select and textfield\nexport const ColorBaseGray700 = \"#767676\"; // For secondary text in light mode\nexport const ColorBaseGray800 = \"#353535\";\nexport const ColorBaseGray900 = \"#191919\"; // Default text color, Classroom background\nexport const ColorBaseOrange100 = \"#fdf2f0\";\nexport const ColorBaseOrange200 = \"#f6cdc4\";\nexport const ColorBaseOrange300 = \"#ec9987\";\nexport const ColorBaseOrange700 = \"#c34124\";\nexport const ColorBaseOrange800 = \"#732818\";\nexport const ColorBaseOrange900 = \"#4d1a10\";\nexport const ColorBasePrimary100 = \"#eff6fa\";\nexport const ColorBasePrimary200 = \"#c1dbe7\";\nexport const ColorBasePrimary300 = \"#84b7d0\";\nexport const ColorBasePrimary700 = \"#236482\";\nexport const ColorBasePrimary800 = \"#274858\";\nexport const ColorBasePrimary900 = \"#1b303b\";\nexport const ColorBaseSuccess100 = \"#eff7f1\";\nexport const ColorBaseSuccess200 = \"#bddcc6\";\nexport const ColorBaseSuccess300 = \"#81ba92\";\nexport const ColorBaseSuccess700 = \"#397b4d\";\nexport const ColorBaseSuccess800 = \"#2d4936\";\nexport const ColorBaseSuccess900 = \"#1e3124\";\nexport const ColorBasePurple100 = \"#f9f5fa\";\nexport const ColorBasePurple200 = \"#e8dceb\";\nexport const ColorBasePurple300 = \"#cdb4d3\";\nexport const ColorBasePurple700 = \"#8b5f95\";\nexport const ColorBasePurple800 = \"#523b58\";\nexport const ColorBasePurple900 = \"#37273b\";\nexport const ColorBaseYellow100 = \"#fdf5d9\";\nexport const ColorBaseYellow200 = \"#fbe8a3\";\nexport const ColorBaseYellow300 = \"#f8d663\";\nexport const ColorBaseYellow700 = \"#ffc929\";\nexport const ColorBaseYellow800 = \"#765f1c\";\nexport const ColorBaseYellow900 = \"#3b3009\";\nexport const ColorBaseWhite = \"#ffffff\";\nexport const ColorCambioBlack = \"#050500\";\nexport const ColorCambioWhite = \"#ffffff\";\nexport const ColorCambioGray100 = \"#faf4eb\";\nexport const ColorCambioGray200 = \"#e4dbd3\";\nexport const ColorCambioGray300 = \"#beb4ab\";\nexport const ColorCambioGray370 = \"#beb4ab\";\nexport const ColorCambioGray700 = \"#888077\";\nexport const ColorCambioGray800 = \"#5c554d\";\nexport const ColorCambioGray870 = \"#5c554d\";\nexport const ColorCambioGray900 = \"#312b23\";\nexport const ColorCambioDestructive100 = \"#ffdeda\";\nexport const ColorCambioDestructive300 = \"#ff8071\";\nexport const ColorCambioDestructive370 = \"#ff8071\";\nexport const ColorCambioDestructive700 = \"#c93f32\";\nexport const ColorCambioDestructive770 = \"#c93f32\";\nexport const ColorCambioDestructive900 = \"#6d0002\";\nexport const ColorCambioSuccess100 = \"#daf2c8\";\nexport const ColorCambioSuccess300 = \"#84ce64\";\nexport const ColorCambioSuccess370 = \"#84ce64\";\nexport const ColorCambioSuccess700 = \"#3c7f20\";\nexport const ColorCambioSuccess770 = \"#3c7f20\";\nexport const ColorCambioSuccess900 = \"#103e00\";\nexport const ColorCambioRed = \"#f56e56\";\nexport const ColorCambioOrange = \"#ff8f57\";\nexport const ColorCambioTan = \"#ffb47d\";\nexport const ColorCambioCream = \"#fffad1\";\nexport const ColorCambioPurple = \"#6840a8\";\nexport const ColorCambioLilac = \"#b59ef0\";\nexport const ColorCambioThistle = \"#d69ca4\";\nexport const ColorCambioPink = \"#ffccea\";\nexport const ColorCambioNavy = \"#191142\";\nexport const ColorCambioTeal = \"#44a6cf\";\nexport const ColorCambioSlate = \"#7c9fc6\";\nexport const ColorCambioSky = \"#b1e8fc\";\nexport const ColorCambioYellow700 = \"#ffe733\";\nexport const ColorCambioTransparentFull = \"#000000\";\nexport const Elevation400 = \"0px 16px 32px 0px #00000040\";\n"],"mappings":";;;AASO,IAAM,0BAA0B;AAWhC,IAAM,mBAAmB;","names":[]}
|
|
@@ -120,6 +120,7 @@ function Modal({
|
|
|
120
120
|
accessibilityLabel: accessibilityCloseLabel,
|
|
121
121
|
color: image ? "primary" : "tertiary",
|
|
122
122
|
on: image ? "darkBackground" : "lightBackground",
|
|
123
|
+
onClick: onDismiss,
|
|
123
124
|
size: "sm",
|
|
124
125
|
icon: XIconCambio
|
|
125
126
|
}
|
|
@@ -173,4 +174,4 @@ Modal.displayName = "Modal";
|
|
|
173
174
|
export {
|
|
174
175
|
Modal
|
|
175
176
|
};
|
|
176
|
-
//# sourceMappingURL=
|
|
177
|
+
//# sourceMappingURL=HBIV5AXS.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Modal/Modal.tsx","css-module:./Modal.module.css#css-module"],"sourcesContent":["import { type ReactElement } from \"react\";\nimport classnames from \"classnames\";\n\nimport Heading from \"../Heading/Heading\";\nimport Box from \"../Box/Box\";\n\nimport FocusTrap from \"./FocusTrap\";\nimport StopScroll from \"./StopScroll\";\nimport Layer from \"./Layer\";\nimport styles from \"./Modal.module.css\";\nimport { useTheme } from \"../ThemeProvider/ThemeProvider\";\nimport IconButton from \"../IconButton/IconButton\";\n\nfunction XIcon({ color = \"#000\" }: { color?: string }) {\n return (\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" fill={color}>\n <path\n fill=\"inherit\"\n d=\"M11.25.758a.83.83 0 0 0-1.175 0L6 4.825 1.925.75A.83.83 0 1 0 .75 1.925L4.825 6 .75 10.075a.83.83 0 1 0 1.175 1.175L6 7.175l4.075 4.075a.83.83 0 1 0 1.175-1.175L7.175 6l4.075-4.075a.835.835 0 0 0 0-1.167Z\"\n />\n </svg>\n );\n}\n\nfunction XIconCambio({ className }: { className?: string }) {\n return (\n <svg\n className={className}\n fill=\"currentColor\"\n focusable=\"false\"\n aria-hidden=\"true\"\n viewBox=\"0 0 24 24\"\n >\n <path d=\"M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\"></path>\n </svg>\n );\n}\n\n// Note: Only sm + lg size currently. design thinks there should only be two sizes.\n// If there IS a md size at some point, we should use the \"size\" const.\nconst sizeWidth = {\n sm: 400,\n lg: 600,\n} as const;\n\n/**\n * [Modal](https://cambly-syntax.vercel.app/?path=/docs/components-modal--docs) is a dialog that appears on top of the main content and locks user interaction within the modal.\n *\n ```\n const [showModal, setShowModal] = useState(false)\n\n return (\n <>\n {showModal && <Modal\n header=\"header text\"\n onDismiss={() => setShowModal(false)}\n footer={\n <>\n <Button\n text=\"Cancel\"\n color=\"secondary\"\n onClick={() => {}}\n />\n <Button\n text=\"Confirm\"\n onClick={() => {}}\n />\n </>\n }\n >\n <Typography>\n Body text goes here!\n </Typography>\n </Modal> }\n </>\n )\n ```\n */\nexport default function Modal({\n header,\n children,\n image,\n onDismiss,\n footer,\n accessibilityCloseLabel = \"close modal\",\n size = \"sm\",\n zIndex = 1,\n \"data-testid\": dataTestId,\n}: {\n /**\n * The modal's main content. Should typically take in `Typography`'d text.\n */\n children: JSX.Element;\n /**\n * The header inside a modal as a string.\n */\n header: string;\n /**\n * What the X button (or clicking out of the modal area) does.\n * Typically used for closing the Modal\n */\n onDismiss: () => void;\n /**\n * The optional image rendered above the Modal.\n * Image size should be 400w x 200h.\n * If images aren't that sized, should ask design to give another image.\n */\n image?: JSX.Element;\n /**\n * The footer for the bottom area of the Modal. Typically used for rendering buttons.\n * * Use Syntax `Button` and pass it into footer.\n * * If one button, just pass it in. If two, wrap in a React fragment (`<> </>`)\n * * If two(2) buttons, put primary button _second_.\n *\n <>\n <Button\n text=\"Cancel\"\n color=\"secondary\"\n onClick={() => {}}\n />\n <Button\n text=\"Confirm\"\n onClick={() => {}}\n />\n </>\n */\n footer?: JSX.Element;\n /**\n * The accessibilty text on the close button.\n * (Sets the aria-label of the button)\n *\n *\n * @defaultValue close modal\n */\n accessibilityCloseLabel?: string;\n /**\n * The size of the card\n *\n * Classic:\n * * `sm`: 400px (Classic only)\n * * `lg`: 600px\n *\n * Cambio:\n * * `lg`: 600px\n *\n *\n * @defaultValue sm\n */\n size?: keyof typeof sizeWidth;\n /**\n * The z-index for the modal.\n * Typically used if there are other things on the page with higher z-index and you need this overlayed on top.\n *\n * @defaultValue 0\n */\n zIndex?: number;\n /**\n * Test id for the modal\n */\n \"data-testid\"?: string;\n}): ReactElement {\n const { themeName } = useTheme();\n return (\n <Layer zIndex={zIndex}>\n <StopScroll>\n <FocusTrap>\n <div\n className={classnames(\n styles.backdrop,\n themeName === \"classic\"\n ? styles.backdropClassic\n : styles.backdropCambio,\n )}\n role=\"presentation\"\n onClick={(e) => e.target === e.currentTarget && onDismiss()}\n onKeyDown={(e) => e.key === \"Escape\" && onDismiss()}\n >\n <Box\n data-testid={dataTestId}\n backgroundColor=\"white\"\n rounding={themeName === \"classic\" ? \"xl\" : \"md\"}\n display=\"flex\"\n direction=\"column\"\n marginStart={4}\n marginEnd={4}\n minWidth={240}\n maxWidth={sizeWidth[themeName === \"classic\" ? size : \"lg\"]}\n width=\"100%\"\n dangerouslySetInlineStyle={{ __style: { overflow: \"hidden\" } }}\n >\n <Box position=\"relative\">\n {themeName === \"classic\" ? (\n <button\n aria-label={accessibilityCloseLabel}\n type=\"button\"\n className={classnames(\n styles.closeButton,\n styles.closeButtonClassic,\n {\n [styles.closeButtonWithImage]: !!image,\n },\n )}\n onClick={onDismiss}\n >\n <XIcon color={image ? \"#fff\" : \"#000\"} />\n </button>\n ) : (\n <Box\n position=\"absolute\"\n dangerouslySetInlineStyle={{\n __style: { top: 4, right: 4 },\n }}\n >\n <IconButton\n accessibilityLabel={accessibilityCloseLabel}\n color={image ? \"primary\" : \"tertiary\"}\n on={image ? \"darkBackground\" : \"lightBackground\"}\n size=\"sm\"\n icon={XIconCambio}\n />\n </Box>\n )}\n </Box>\n {image && <Box maxHeight={200}>{image}</Box>}\n <Box\n display=\"flex\"\n gap={themeName === \"classic\" ? 3 : 4}\n direction=\"column\"\n padding={themeName === \"classic\" ? 9 : 6}\n >\n <Heading\n as=\"h1\"\n size={themeName === \"classic\" ? 500 : 600}\n fontStyle={themeName === \"classic\" ? \"sans-serif\" : \"serif\"}\n >\n {header}\n </Heading>\n <Box marginBottom={themeName === \"classic\" ? 4 : 0}>\n {children}\n </Box>\n {footer && (\n <Box\n display=\"flex\"\n direction=\"column\"\n gap={3}\n marginTop={themeName === \"classic\" ? 0 : 2}\n smDirection=\"row\"\n smJustifyContent=\"end\"\n lgDirection=\"row\"\n lgJustifyContent=\"end\"\n >\n {footer}\n </Box>\n )}\n </Box>\n </Box>\n </div>\n </FocusTrap>\n </StopScroll>\n </Layer>\n );\n}\n\nModal.displayName = \"Modal\";\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Modal/Modal.module.css\"; export default {\"backdrop\":\"_backdrop_1w5vm_1\",\"backdropClassic\":\"_backdropClassic_1w5vm_11\",\"backdropCambio\":\"_backdropCambio_1w5vm_15\",\"closeButton\":\"_closeButton_1w5vm_19\",\"closeButtonClassic\":\"_closeButtonClassic_1w5vm_34\",\"closeButtonWithImage\":\"_closeButtonWithImage_1w5vm_46\",\"closeButtonWithImageCambio\":\"_closeButtonWithImageCambio_1w5vm_50\"}"],"mappings":"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","names":[]}
|
|
1
|
+
{"version":3,"sources":["../../src/Modal/Modal.tsx","css-module:./Modal.module.css#css-module"],"sourcesContent":["import { type ReactElement } from \"react\";\nimport classnames from \"classnames\";\n\nimport Heading from \"../Heading/Heading\";\nimport Box from \"../Box/Box\";\n\nimport FocusTrap from \"./FocusTrap\";\nimport StopScroll from \"./StopScroll\";\nimport Layer from \"./Layer\";\nimport styles from \"./Modal.module.css\";\nimport { useTheme } from \"../ThemeProvider/ThemeProvider\";\nimport IconButton from \"../IconButton/IconButton\";\n\nfunction XIcon({ color = \"#000\" }: { color?: string }) {\n return (\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" fill={color}>\n <path\n fill=\"inherit\"\n d=\"M11.25.758a.83.83 0 0 0-1.175 0L6 4.825 1.925.75A.83.83 0 1 0 .75 1.925L4.825 6 .75 10.075a.83.83 0 1 0 1.175 1.175L6 7.175l4.075 4.075a.83.83 0 1 0 1.175-1.175L7.175 6l4.075-4.075a.835.835 0 0 0 0-1.167Z\"\n />\n </svg>\n );\n}\n\nfunction XIconCambio({ className }: { className?: string }) {\n return (\n <svg\n className={className}\n fill=\"currentColor\"\n focusable=\"false\"\n aria-hidden=\"true\"\n viewBox=\"0 0 24 24\"\n >\n <path d=\"M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\"></path>\n </svg>\n );\n}\n\n// Note: Only sm + lg size currently. design thinks there should only be two sizes.\n// If there IS a md size at some point, we should use the \"size\" const.\nconst sizeWidth = {\n sm: 400,\n lg: 600,\n} as const;\n\n/**\n * [Modal](https://cambly-syntax.vercel.app/?path=/docs/components-modal--docs) is a dialog that appears on top of the main content and locks user interaction within the modal.\n *\n ```\n const [showModal, setShowModal] = useState(false)\n\n return (\n <>\n {showModal && <Modal\n header=\"header text\"\n onDismiss={() => setShowModal(false)}\n footer={\n <>\n <Button\n text=\"Cancel\"\n color=\"secondary\"\n onClick={() => {}}\n />\n <Button\n text=\"Confirm\"\n onClick={() => {}}\n />\n </>\n }\n >\n <Typography>\n Body text goes here!\n </Typography>\n </Modal> }\n </>\n )\n ```\n */\nexport default function Modal({\n header,\n children,\n image,\n onDismiss,\n footer,\n accessibilityCloseLabel = \"close modal\",\n size = \"sm\",\n zIndex = 1,\n \"data-testid\": dataTestId,\n}: {\n /**\n * The modal's main content. Should typically take in `Typography`'d text.\n */\n children: JSX.Element;\n /**\n * The header inside a modal as a string.\n */\n header: string;\n /**\n * What the X button (or clicking out of the modal area) does.\n * Typically used for closing the Modal\n */\n onDismiss: () => void;\n /**\n * The optional image rendered above the Modal.\n * Image size should be 400w x 200h.\n * If images aren't that sized, should ask design to give another image.\n */\n image?: JSX.Element;\n /**\n * The footer for the bottom area of the Modal. Typically used for rendering buttons.\n * * Use Syntax `Button` and pass it into footer.\n * * If one button, just pass it in. If two, wrap in a React fragment (`<> </>`)\n * * If two(2) buttons, put primary button _second_.\n *\n <>\n <Button\n text=\"Cancel\"\n color=\"secondary\"\n onClick={() => {}}\n />\n <Button\n text=\"Confirm\"\n onClick={() => {}}\n />\n </>\n */\n footer?: JSX.Element;\n /**\n * The accessibilty text on the close button.\n * (Sets the aria-label of the button)\n *\n *\n * @defaultValue close modal\n */\n accessibilityCloseLabel?: string;\n /**\n * The size of the card\n *\n * Classic:\n * * `sm`: 400px (Classic only)\n * * `lg`: 600px\n *\n * Cambio:\n * * `lg`: 600px\n *\n *\n * @defaultValue sm\n */\n size?: keyof typeof sizeWidth;\n /**\n * The z-index for the modal.\n * Typically used if there are other things on the page with higher z-index and you need this overlayed on top.\n *\n * @defaultValue 0\n */\n zIndex?: number;\n /**\n * Test id for the modal\n */\n \"data-testid\"?: string;\n}): ReactElement {\n const { themeName } = useTheme();\n return (\n <Layer zIndex={zIndex}>\n <StopScroll>\n <FocusTrap>\n <div\n className={classnames(\n styles.backdrop,\n themeName === \"classic\"\n ? styles.backdropClassic\n : styles.backdropCambio,\n )}\n role=\"presentation\"\n onClick={(e) => e.target === e.currentTarget && onDismiss()}\n onKeyDown={(e) => e.key === \"Escape\" && onDismiss()}\n >\n <Box\n data-testid={dataTestId}\n backgroundColor=\"white\"\n rounding={themeName === \"classic\" ? \"xl\" : \"md\"}\n display=\"flex\"\n direction=\"column\"\n marginStart={4}\n marginEnd={4}\n minWidth={240}\n maxWidth={sizeWidth[themeName === \"classic\" ? size : \"lg\"]}\n width=\"100%\"\n dangerouslySetInlineStyle={{ __style: { overflow: \"hidden\" } }}\n >\n <Box position=\"relative\">\n {themeName === \"classic\" ? (\n <button\n aria-label={accessibilityCloseLabel}\n type=\"button\"\n className={classnames(\n styles.closeButton,\n styles.closeButtonClassic,\n {\n [styles.closeButtonWithImage]: !!image,\n },\n )}\n onClick={onDismiss}\n >\n <XIcon color={image ? \"#fff\" : \"#000\"} />\n </button>\n ) : (\n <Box\n position=\"absolute\"\n dangerouslySetInlineStyle={{\n __style: { top: 4, right: 4 },\n }}\n >\n <IconButton\n accessibilityLabel={accessibilityCloseLabel}\n color={image ? \"primary\" : \"tertiary\"}\n on={image ? \"darkBackground\" : \"lightBackground\"}\n onClick={onDismiss}\n size=\"sm\"\n icon={XIconCambio}\n />\n </Box>\n )}\n </Box>\n {image && <Box maxHeight={200}>{image}</Box>}\n <Box\n display=\"flex\"\n gap={themeName === \"classic\" ? 3 : 4}\n direction=\"column\"\n padding={themeName === \"classic\" ? 9 : 6}\n >\n <Heading\n as=\"h1\"\n size={themeName === \"classic\" ? 500 : 600}\n fontStyle={themeName === \"classic\" ? \"sans-serif\" : \"serif\"}\n >\n {header}\n </Heading>\n <Box marginBottom={themeName === \"classic\" ? 4 : 0}>\n {children}\n </Box>\n {footer && (\n <Box\n display=\"flex\"\n direction=\"column\"\n gap={3}\n marginTop={themeName === \"classic\" ? 0 : 2}\n smDirection=\"row\"\n smJustifyContent=\"end\"\n lgDirection=\"row\"\n lgJustifyContent=\"end\"\n >\n {footer}\n </Box>\n )}\n </Box>\n </Box>\n </div>\n </FocusTrap>\n </StopScroll>\n </Layer>\n );\n}\n\nModal.displayName = \"Modal\";\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Modal/Modal.module.css\"; export default {\"backdrop\":\"_backdrop_1w5vm_1\",\"backdropClassic\":\"_backdropClassic_1w5vm_11\",\"backdropCambio\":\"_backdropCambio_1w5vm_15\",\"closeButton\":\"_closeButton_1w5vm_19\",\"closeButtonClassic\":\"_closeButtonClassic_1w5vm_34\",\"closeButtonWithImage\":\"_closeButtonWithImage_1w5vm_46\",\"closeButtonWithImageCambio\":\"_closeButtonWithImageCambio_1w5vm_50\"}"],"mappings":"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","names":[]}
|
|
@@ -120,6 +120,7 @@ function Modal({
|
|
|
120
120
|
accessibilityLabel: accessibilityCloseLabel,
|
|
121
121
|
color: image ? "primary" : "tertiary",
|
|
122
122
|
on: image ? "darkBackground" : "lightBackground",
|
|
123
|
+
onClick: onDismiss,
|
|
123
124
|
size: "sm",
|
|
124
125
|
icon: XIconCambio
|
|
125
126
|
}
|
|
@@ -173,4 +174,4 @@ Modal.displayName = "Modal";
|
|
|
173
174
|
|
|
174
175
|
|
|
175
176
|
exports.Modal = Modal;
|
|
176
|
-
//# sourceMappingURL=
|
|
177
|
+
//# sourceMappingURL=LVKL6CTB.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/Modal/Modal.tsx","css-module:./Modal.module.css#css-module"],"names":[],"mappings":"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","sourcesContent":["import { type ReactElement } from \"react\";\nimport classnames from \"classnames\";\n\nimport Heading from \"../Heading/Heading\";\nimport Box from \"../Box/Box\";\n\nimport FocusTrap from \"./FocusTrap\";\nimport StopScroll from \"./StopScroll\";\nimport Layer from \"./Layer\";\nimport styles from \"./Modal.module.css\";\nimport { useTheme } from \"../ThemeProvider/ThemeProvider\";\nimport IconButton from \"../IconButton/IconButton\";\n\nfunction XIcon({ color = \"#000\" }: { color?: string }) {\n return (\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" fill={color}>\n <path\n fill=\"inherit\"\n d=\"M11.25.758a.83.83 0 0 0-1.175 0L6 4.825 1.925.75A.83.83 0 1 0 .75 1.925L4.825 6 .75 10.075a.83.83 0 1 0 1.175 1.175L6 7.175l4.075 4.075a.83.83 0 1 0 1.175-1.175L7.175 6l4.075-4.075a.835.835 0 0 0 0-1.167Z\"\n />\n </svg>\n );\n}\n\nfunction XIconCambio({ className }: { className?: string }) {\n return (\n <svg\n className={className}\n fill=\"currentColor\"\n focusable=\"false\"\n aria-hidden=\"true\"\n viewBox=\"0 0 24 24\"\n >\n <path d=\"M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\"></path>\n </svg>\n );\n}\n\n// Note: Only sm + lg size currently. design thinks there should only be two sizes.\n// If there IS a md size at some point, we should use the \"size\" const.\nconst sizeWidth = {\n sm: 400,\n lg: 600,\n} as const;\n\n/**\n * [Modal](https://cambly-syntax.vercel.app/?path=/docs/components-modal--docs) is a dialog that appears on top of the main content and locks user interaction within the modal.\n *\n ```\n const [showModal, setShowModal] = useState(false)\n\n return (\n <>\n {showModal && <Modal\n header=\"header text\"\n onDismiss={() => setShowModal(false)}\n footer={\n <>\n <Button\n text=\"Cancel\"\n color=\"secondary\"\n onClick={() => {}}\n />\n <Button\n text=\"Confirm\"\n onClick={() => {}}\n />\n </>\n }\n >\n <Typography>\n Body text goes here!\n </Typography>\n </Modal> }\n </>\n )\n ```\n */\nexport default function Modal({\n header,\n children,\n image,\n onDismiss,\n footer,\n accessibilityCloseLabel = \"close modal\",\n size = \"sm\",\n zIndex = 1,\n \"data-testid\": dataTestId,\n}: {\n /**\n * The modal's main content. Should typically take in `Typography`'d text.\n */\n children: JSX.Element;\n /**\n * The header inside a modal as a string.\n */\n header: string;\n /**\n * What the X button (or clicking out of the modal area) does.\n * Typically used for closing the Modal\n */\n onDismiss: () => void;\n /**\n * The optional image rendered above the Modal.\n * Image size should be 400w x 200h.\n * If images aren't that sized, should ask design to give another image.\n */\n image?: JSX.Element;\n /**\n * The footer for the bottom area of the Modal. Typically used for rendering buttons.\n * * Use Syntax `Button` and pass it into footer.\n * * If one button, just pass it in. If two, wrap in a React fragment (`<> </>`)\n * * If two(2) buttons, put primary button _second_.\n *\n <>\n <Button\n text=\"Cancel\"\n color=\"secondary\"\n onClick={() => {}}\n />\n <Button\n text=\"Confirm\"\n onClick={() => {}}\n />\n </>\n */\n footer?: JSX.Element;\n /**\n * The accessibilty text on the close button.\n * (Sets the aria-label of the button)\n *\n *\n * @defaultValue close modal\n */\n accessibilityCloseLabel?: string;\n /**\n * The size of the card\n *\n * Classic:\n * * `sm`: 400px (Classic only)\n * * `lg`: 600px\n *\n * Cambio:\n * * `lg`: 600px\n *\n *\n * @defaultValue sm\n */\n size?: keyof typeof sizeWidth;\n /**\n * The z-index for the modal.\n * Typically used if there are other things on the page with higher z-index and you need this overlayed on top.\n *\n * @defaultValue 0\n */\n zIndex?: number;\n /**\n * Test id for the modal\n */\n \"data-testid\"?: string;\n}): ReactElement {\n const { themeName } = useTheme();\n return (\n <Layer zIndex={zIndex}>\n <StopScroll>\n <FocusTrap>\n <div\n className={classnames(\n styles.backdrop,\n themeName === \"classic\"\n ? styles.backdropClassic\n : styles.backdropCambio,\n )}\n role=\"presentation\"\n onClick={(e) => e.target === e.currentTarget && onDismiss()}\n onKeyDown={(e) => e.key === \"Escape\" && onDismiss()}\n >\n <Box\n data-testid={dataTestId}\n backgroundColor=\"white\"\n rounding={themeName === \"classic\" ? \"xl\" : \"md\"}\n display=\"flex\"\n direction=\"column\"\n marginStart={4}\n marginEnd={4}\n minWidth={240}\n maxWidth={sizeWidth[themeName === \"classic\" ? size : \"lg\"]}\n width=\"100%\"\n dangerouslySetInlineStyle={{ __style: { overflow: \"hidden\" } }}\n >\n <Box position=\"relative\">\n {themeName === \"classic\" ? (\n <button\n aria-label={accessibilityCloseLabel}\n type=\"button\"\n className={classnames(\n styles.closeButton,\n styles.closeButtonClassic,\n {\n [styles.closeButtonWithImage]: !!image,\n },\n )}\n onClick={onDismiss}\n >\n <XIcon color={image ? \"#fff\" : \"#000\"} />\n </button>\n ) : (\n <Box\n position=\"absolute\"\n dangerouslySetInlineStyle={{\n __style: { top: 4, right: 4 },\n }}\n >\n <IconButton\n accessibilityLabel={accessibilityCloseLabel}\n color={image ? \"primary\" : \"tertiary\"}\n on={image ? \"darkBackground\" : \"lightBackground\"}\n onClick={onDismiss}\n size=\"sm\"\n icon={XIconCambio}\n />\n </Box>\n )}\n </Box>\n {image && <Box maxHeight={200}>{image}</Box>}\n <Box\n display=\"flex\"\n gap={themeName === \"classic\" ? 3 : 4}\n direction=\"column\"\n padding={themeName === \"classic\" ? 9 : 6}\n >\n <Heading\n as=\"h1\"\n size={themeName === \"classic\" ? 500 : 600}\n fontStyle={themeName === \"classic\" ? \"sans-serif\" : \"serif\"}\n >\n {header}\n </Heading>\n <Box marginBottom={themeName === \"classic\" ? 4 : 0}>\n {children}\n </Box>\n {footer && (\n <Box\n display=\"flex\"\n direction=\"column\"\n gap={3}\n marginTop={themeName === \"classic\" ? 0 : 2}\n smDirection=\"row\"\n smJustifyContent=\"end\"\n lgDirection=\"row\"\n lgJustifyContent=\"end\"\n >\n {footer}\n </Box>\n )}\n </Box>\n </Box>\n </div>\n </FocusTrap>\n </StopScroll>\n </Layer>\n );\n}\n\nModal.displayName = \"Modal\";\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Modal/Modal.module.css\"; export default {\"backdrop\":\"_backdrop_1w5vm_1\",\"backdropClassic\":\"_backdropClassic_1w5vm_11\",\"backdropCambio\":\"_backdropCambio_1w5vm_15\",\"closeButton\":\"_closeButton_1w5vm_19\",\"closeButtonClassic\":\"_closeButtonClassic_1w5vm_34\",\"closeButtonWithImage\":\"_closeButtonWithImage_1w5vm_46\",\"closeButtonWithImageCambio\":\"_closeButtonWithImageCambio_1w5vm_50\"}"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../syntax-design-tokens/dist/js/index.js"],"names":[],"mappings":";;;AASO,IAAM,0BAA0B;AAWhC,IAAM,mBAAmB","sourcesContent":["/**\n * Do not edit directly\n * Generated on
|
|
1
|
+
{"version":3,"sources":["../../../syntax-design-tokens/dist/js/index.js"],"names":[],"mappings":";;;AASO,IAAM,0BAA0B;AAWhC,IAAM,mBAAmB","sourcesContent":["/**\n * Do not edit directly\n * Generated on Tue, 26 Mar 2024 21:52:42 GMT\n */\n\nexport const ColorBaseBlack = \"#000000\";\nexport const ColorBaseDestructive100 = \"#fef3f5\";\nexport const ColorBaseDestructive200 = \"#fad6de\";\nexport const ColorBaseDestructive300 = \"#f2a2b2\";\nexport const ColorBaseDestructive700 = \"#d32a4b\";\nexport const ColorBaseDestructive800 = \"#81162c\";\nexport const ColorBaseDestructive900 = \"#55101d\";\nexport const ColorBaseGray10 = \"#cbcbcb\"; // Used as the default color for dividers and inner strokes\nexport const ColorBaseGray30 = \"#000000\"; // For IconButton background when on top of an image\nexport const ColorBaseGray60 = \"#000000\"; // Used for icon background in classroom video grid\nexport const ColorBaseGray80 = \"#000000\"; // Used as the background for modals\nexport const ColorBaseGray100 = \"#f7f7f7\";\nexport const ColorBaseGray200 = \"#f0f0f0\"; // Used for light mode backgrounds when showing card content on top\nexport const ColorBaseGray300 = \"#d0d0d0\"; // Used for component outlines, eg: select and textfield\nexport const ColorBaseGray700 = \"#767676\"; // For secondary text in light mode\nexport const ColorBaseGray800 = \"#353535\";\nexport const ColorBaseGray900 = \"#191919\"; // Default text color, Classroom background\nexport const ColorBaseOrange100 = \"#fdf2f0\";\nexport const ColorBaseOrange200 = \"#f6cdc4\";\nexport const ColorBaseOrange300 = \"#ec9987\";\nexport const ColorBaseOrange700 = \"#c34124\";\nexport const ColorBaseOrange800 = \"#732818\";\nexport const ColorBaseOrange900 = \"#4d1a10\";\nexport const ColorBasePrimary100 = \"#eff6fa\";\nexport const ColorBasePrimary200 = \"#c1dbe7\";\nexport const ColorBasePrimary300 = \"#84b7d0\";\nexport const ColorBasePrimary700 = \"#236482\";\nexport const ColorBasePrimary800 = \"#274858\";\nexport const ColorBasePrimary900 = \"#1b303b\";\nexport const ColorBaseSuccess100 = \"#eff7f1\";\nexport const ColorBaseSuccess200 = \"#bddcc6\";\nexport const ColorBaseSuccess300 = \"#81ba92\";\nexport const ColorBaseSuccess700 = \"#397b4d\";\nexport const ColorBaseSuccess800 = \"#2d4936\";\nexport const ColorBaseSuccess900 = \"#1e3124\";\nexport const ColorBasePurple100 = \"#f9f5fa\";\nexport const ColorBasePurple200 = \"#e8dceb\";\nexport const ColorBasePurple300 = \"#cdb4d3\";\nexport const ColorBasePurple700 = \"#8b5f95\";\nexport const ColorBasePurple800 = \"#523b58\";\nexport const ColorBasePurple900 = \"#37273b\";\nexport const ColorBaseYellow100 = \"#fdf5d9\";\nexport const ColorBaseYellow200 = \"#fbe8a3\";\nexport const ColorBaseYellow300 = \"#f8d663\";\nexport const ColorBaseYellow700 = \"#ffc929\";\nexport const ColorBaseYellow800 = \"#765f1c\";\nexport const ColorBaseYellow900 = \"#3b3009\";\nexport const ColorBaseWhite = \"#ffffff\";\nexport const ColorCambioBlack = \"#050500\";\nexport const ColorCambioWhite = \"#ffffff\";\nexport const ColorCambioGray100 = \"#faf4eb\";\nexport const ColorCambioGray200 = \"#e4dbd3\";\nexport const ColorCambioGray300 = \"#beb4ab\";\nexport const ColorCambioGray370 = \"#beb4ab\";\nexport const ColorCambioGray700 = \"#888077\";\nexport const ColorCambioGray800 = \"#5c554d\";\nexport const ColorCambioGray870 = \"#5c554d\";\nexport const ColorCambioGray900 = \"#312b23\";\nexport const ColorCambioDestructive100 = \"#ffdeda\";\nexport const ColorCambioDestructive300 = \"#ff8071\";\nexport const ColorCambioDestructive370 = \"#ff8071\";\nexport const ColorCambioDestructive700 = \"#c93f32\";\nexport const ColorCambioDestructive770 = \"#c93f32\";\nexport const ColorCambioDestructive900 = \"#6d0002\";\nexport const ColorCambioSuccess100 = \"#daf2c8\";\nexport const ColorCambioSuccess300 = \"#84ce64\";\nexport const ColorCambioSuccess370 = \"#84ce64\";\nexport const ColorCambioSuccess700 = \"#3c7f20\";\nexport const ColorCambioSuccess770 = \"#3c7f20\";\nexport const ColorCambioSuccess900 = \"#103e00\";\nexport const ColorCambioRed = \"#f56e56\";\nexport const ColorCambioOrange = \"#ff8f57\";\nexport const ColorCambioTan = \"#ffb47d\";\nexport const ColorCambioCream = \"#fffad1\";\nexport const ColorCambioPurple = \"#6840a8\";\nexport const ColorCambioLilac = \"#b59ef0\";\nexport const ColorCambioThistle = \"#d69ca4\";\nexport const ColorCambioPink = \"#ffccea\";\nexport const ColorCambioNavy = \"#191142\";\nexport const ColorCambioTeal = \"#44a6cf\";\nexport const ColorCambioSlate = \"#7c9fc6\";\nexport const ColorCambioSky = \"#b1e8fc\";\nexport const ColorCambioYellow700 = \"#ffe733\";\nexport const ColorCambioTransparentFull = \"#000000\";\nexport const Elevation400 = \"0px 16px 32px 0px #00000040\";\n"]}
|
|
@@ -19,7 +19,7 @@ var _UKLQ64N7cjs = require('./UKLQ64N7.cjs');
|
|
|
19
19
|
|
|
20
20
|
|
|
21
21
|
|
|
22
|
-
var
|
|
22
|
+
var _Q6UPTVXEcjs = require('./Q6UPTVXE.cjs');
|
|
23
23
|
|
|
24
24
|
|
|
25
25
|
var _J3ES6ZT6cjs = require('./J3ES6ZT6.cjs');
|
|
@@ -243,7 +243,7 @@ function RichSelectList(props) {
|
|
|
243
243
|
children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
244
244
|
"path",
|
|
245
245
|
{
|
|
246
|
-
fill: errorText ?
|
|
246
|
+
fill: errorText ? _Q6UPTVXEcjs.ColorBaseDestructive700 : _Q6UPTVXEcjs.ColorBaseGray800,
|
|
247
247
|
d: "M15.88 9.29 12 13.17 8.12 9.29a.9959.9959 0 0 0-1.41 0c-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41-.39-.38-1.03-.39-1.42 0z"
|
|
248
248
|
}
|
|
249
249
|
)
|
|
@@ -278,4 +278,4 @@ var RichSelectList_default = Object.assign(RichSelectList, {
|
|
|
278
278
|
|
|
279
279
|
|
|
280
280
|
exports.RichSelectList_default = RichSelectList_default;
|
|
281
|
-
//# sourceMappingURL=
|
|
281
|
+
//# sourceMappingURL=TCUQXSJO.cjs.map
|
|
@@ -19,7 +19,7 @@ import {
|
|
|
19
19
|
import {
|
|
20
20
|
ColorBaseDestructive700,
|
|
21
21
|
ColorBaseGray800
|
|
22
|
-
} from "./
|
|
22
|
+
} from "./GYTKGRJO.js";
|
|
23
23
|
import {
|
|
24
24
|
RichSelectSection_default
|
|
25
25
|
} from "./4NSYLHIG.js";
|
|
@@ -278,4 +278,4 @@ var RichSelectList_default = Object.assign(RichSelectList, {
|
|
|
278
278
|
export {
|
|
279
279
|
RichSelectList_default
|
|
280
280
|
};
|
|
281
|
-
//# sourceMappingURL=
|
|
281
|
+
//# sourceMappingURL=UFFYM533.js.map
|
package/dist/index.cjs
CHANGED
|
@@ -19,7 +19,7 @@ var _TCZBK2P5cjs = require('./__chunks/TCZBK2P5.cjs');
|
|
|
19
19
|
var _UAN64LE7cjs = require('./__chunks/UAN64LE7.cjs');
|
|
20
20
|
|
|
21
21
|
|
|
22
|
-
var
|
|
22
|
+
var _LVKL6CTBcjs = require('./__chunks/LVKL6CTB.cjs');
|
|
23
23
|
|
|
24
24
|
|
|
25
25
|
var _6XZHBBJPcjs = require('./__chunks/6XZHBBJP.cjs');
|
|
@@ -31,11 +31,11 @@ require('./__chunks/ZDQ6WQM3.cjs');
|
|
|
31
31
|
var _W35D2UICcjs = require('./__chunks/W35D2UIC.cjs');
|
|
32
32
|
|
|
33
33
|
|
|
34
|
-
var
|
|
34
|
+
var _GNCKDVHZcjs = require('./__chunks/GNCKDVHZ.cjs');
|
|
35
35
|
require('./__chunks/4UJE5GMH.cjs');
|
|
36
36
|
|
|
37
37
|
|
|
38
|
-
var
|
|
38
|
+
var _TCUQXSJOcjs = require('./__chunks/TCUQXSJO.cjs');
|
|
39
39
|
require('./__chunks/WZZQUJZF.cjs');
|
|
40
40
|
|
|
41
41
|
|
|
@@ -67,7 +67,7 @@ require('./__chunks/HWQUS53M.cjs');
|
|
|
67
67
|
|
|
68
68
|
|
|
69
69
|
var _UKLQ64N7cjs = require('./__chunks/UKLQ64N7.cjs');
|
|
70
|
-
require('./__chunks/
|
|
70
|
+
require('./__chunks/Q6UPTVXE.cjs');
|
|
71
71
|
require('./__chunks/J3ES6ZT6.cjs');
|
|
72
72
|
require('./__chunks/MF7LLV7V.cjs');
|
|
73
73
|
require('./__chunks/OVXHL32N.cjs');
|
|
@@ -136,5 +136,5 @@ require('./__chunks/X2SDR4SD.cjs');
|
|
|
136
136
|
|
|
137
137
|
|
|
138
138
|
|
|
139
|
-
exports.Avatar = _VRVOFKLIcjs.Avatar_default; exports.AvatarGroup = _4MLT3AHKcjs.AvatarGroup; exports.Badge = _MKGPWRABcjs.Badge_default; exports.Box = _E4LISCR7cjs.Box_default; exports.Button = _IXDYGNLNcjs.Button_default; exports.ButtonGroup = _VBQTLO2Pcjs.ButtonGroup_default; exports.Card = _OV5U4YJNcjs.Card; exports.Checkbox = _UAN64LE7cjs.Checkbox_default; exports.Chip = _I75WZ7AVcjs.Chip_default; exports.Divider = _MG2NM3WUcjs.Divider; exports.Heading = _6XZHBBJPcjs.Heading_default; exports.IconButton = _KWT6ABYPcjs.IconButton_default; exports.LinkButton = _TCZBK2P5cjs.LinkButton_default; exports.Modal =
|
|
139
|
+
exports.Avatar = _VRVOFKLIcjs.Avatar_default; exports.AvatarGroup = _4MLT3AHKcjs.AvatarGroup; exports.Badge = _MKGPWRABcjs.Badge_default; exports.Box = _E4LISCR7cjs.Box_default; exports.Button = _IXDYGNLNcjs.Button_default; exports.ButtonGroup = _VBQTLO2Pcjs.ButtonGroup_default; exports.Card = _OV5U4YJNcjs.Card; exports.Checkbox = _UAN64LE7cjs.Checkbox_default; exports.Chip = _I75WZ7AVcjs.Chip_default; exports.Divider = _MG2NM3WUcjs.Divider; exports.Heading = _6XZHBBJPcjs.Heading_default; exports.IconButton = _KWT6ABYPcjs.IconButton_default; exports.LinkButton = _TCZBK2P5cjs.LinkButton_default; exports.Modal = _LVKL6CTBcjs.Modal; exports.Popover = _L5FISA2Ucjs.Popover_default; exports.RadioButton = _ZYCAP5AYcjs.RadioButton_default; exports.RichSelectList = _TCUQXSJOcjs.RichSelectList_default; exports.SelectList = _GNCKDVHZcjs.SelectList; exports.TapArea = _UKLQ64N7cjs.TapArea_default; exports.TextArea = _W35D2UICcjs.TextArea_default; exports.TextField = _MQ7FU53Wcjs.TextField; exports.ThemeProvider = _TBQR2FPScjs.ThemeProvider; exports.Tooltip = _XJL3R42Dcjs.Tooltip_default; exports.Typography = _TJN7NBWUcjs.Typography_default; exports.useTheme = _TBQR2FPScjs.useTheme;
|
|
140
140
|
//# sourceMappingURL=index.cjs.map
|
package/dist/index.js
CHANGED
|
@@ -19,7 +19,7 @@ import {
|
|
|
19
19
|
} from "./__chunks/P2BCEYCC.js";
|
|
20
20
|
import {
|
|
21
21
|
Modal
|
|
22
|
-
} from "./__chunks/
|
|
22
|
+
} from "./__chunks/HBIV5AXS.js";
|
|
23
23
|
import {
|
|
24
24
|
Heading_default
|
|
25
25
|
} from "./__chunks/KZD6BFDA.js";
|
|
@@ -31,11 +31,11 @@ import {
|
|
|
31
31
|
} from "./__chunks/3LO2QLOH.js";
|
|
32
32
|
import {
|
|
33
33
|
SelectList
|
|
34
|
-
} from "./__chunks/
|
|
34
|
+
} from "./__chunks/2SY2EUOV.js";
|
|
35
35
|
import "./__chunks/Y47XTR6M.js";
|
|
36
36
|
import {
|
|
37
37
|
RichSelectList_default
|
|
38
|
-
} from "./__chunks/
|
|
38
|
+
} from "./__chunks/UFFYM533.js";
|
|
39
39
|
import "./__chunks/6EKM3QTW.js";
|
|
40
40
|
import {
|
|
41
41
|
ButtonGroup_default
|
|
@@ -67,7 +67,7 @@ import "./__chunks/GFKDPMFK.js";
|
|
|
67
67
|
import {
|
|
68
68
|
TapArea_default
|
|
69
69
|
} from "./__chunks/5MJ6NOUC.js";
|
|
70
|
-
import "./__chunks/
|
|
70
|
+
import "./__chunks/GYTKGRJO.js";
|
|
71
71
|
import "./__chunks/4NSYLHIG.js";
|
|
72
72
|
import "./__chunks/DDUJFFG7.js";
|
|
73
73
|
import "./__chunks/KWRU2RKT.js";
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@cambly/syntax-core",
|
|
3
3
|
"description": "Cambly design system core components",
|
|
4
|
-
"version": "10.
|
|
4
|
+
"version": "10.27.0",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.cjs",
|
|
7
7
|
"module": "./dist/index.js",
|
|
@@ -28,8 +28,8 @@
|
|
|
28
28
|
"react": "18.2.0",
|
|
29
29
|
"tsup": "6.7.0",
|
|
30
30
|
"typescript": "5.0.4",
|
|
31
|
-
"@cambly/
|
|
32
|
-
"@cambly/syntax
|
|
31
|
+
"@cambly/syntax-tsconfig": "1.4.1",
|
|
32
|
+
"@cambly/eslint-config-syntax": "1.4.0"
|
|
33
33
|
},
|
|
34
34
|
"publishConfig": {
|
|
35
35
|
"access": "public"
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Modal/Modal.tsx","css-module:./Modal.module.css#css-module"],"names":[],"mappings":"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","sourcesContent":["import { type ReactElement } from \"react\";\nimport classnames from \"classnames\";\n\nimport Heading from \"../Heading/Heading\";\nimport Box from \"../Box/Box\";\n\nimport FocusTrap from \"./FocusTrap\";\nimport StopScroll from \"./StopScroll\";\nimport Layer from \"./Layer\";\nimport styles from \"./Modal.module.css\";\nimport { useTheme } from \"../ThemeProvider/ThemeProvider\";\nimport IconButton from \"../IconButton/IconButton\";\n\nfunction XIcon({ color = \"#000\" }: { color?: string }) {\n return (\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" fill={color}>\n <path\n fill=\"inherit\"\n d=\"M11.25.758a.83.83 0 0 0-1.175 0L6 4.825 1.925.75A.83.83 0 1 0 .75 1.925L4.825 6 .75 10.075a.83.83 0 1 0 1.175 1.175L6 7.175l4.075 4.075a.83.83 0 1 0 1.175-1.175L7.175 6l4.075-4.075a.835.835 0 0 0 0-1.167Z\"\n />\n </svg>\n );\n}\n\nfunction XIconCambio({ className }: { className?: string }) {\n return (\n <svg\n className={className}\n fill=\"currentColor\"\n focusable=\"false\"\n aria-hidden=\"true\"\n viewBox=\"0 0 24 24\"\n >\n <path d=\"M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\"></path>\n </svg>\n );\n}\n\n// Note: Only sm + lg size currently. design thinks there should only be two sizes.\n// If there IS a md size at some point, we should use the \"size\" const.\nconst sizeWidth = {\n sm: 400,\n lg: 600,\n} as const;\n\n/**\n * [Modal](https://cambly-syntax.vercel.app/?path=/docs/components-modal--docs) is a dialog that appears on top of the main content and locks user interaction within the modal.\n *\n ```\n const [showModal, setShowModal] = useState(false)\n\n return (\n <>\n {showModal && <Modal\n header=\"header text\"\n onDismiss={() => setShowModal(false)}\n footer={\n <>\n <Button\n text=\"Cancel\"\n color=\"secondary\"\n onClick={() => {}}\n />\n <Button\n text=\"Confirm\"\n onClick={() => {}}\n />\n </>\n }\n >\n <Typography>\n Body text goes here!\n </Typography>\n </Modal> }\n </>\n )\n ```\n */\nexport default function Modal({\n header,\n children,\n image,\n onDismiss,\n footer,\n accessibilityCloseLabel = \"close modal\",\n size = \"sm\",\n zIndex = 1,\n \"data-testid\": dataTestId,\n}: {\n /**\n * The modal's main content. Should typically take in `Typography`'d text.\n */\n children: JSX.Element;\n /**\n * The header inside a modal as a string.\n */\n header: string;\n /**\n * What the X button (or clicking out of the modal area) does.\n * Typically used for closing the Modal\n */\n onDismiss: () => void;\n /**\n * The optional image rendered above the Modal.\n * Image size should be 400w x 200h.\n * If images aren't that sized, should ask design to give another image.\n */\n image?: JSX.Element;\n /**\n * The footer for the bottom area of the Modal. Typically used for rendering buttons.\n * * Use Syntax `Button` and pass it into footer.\n * * If one button, just pass it in. If two, wrap in a React fragment (`<> </>`)\n * * If two(2) buttons, put primary button _second_.\n *\n <>\n <Button\n text=\"Cancel\"\n color=\"secondary\"\n onClick={() => {}}\n />\n <Button\n text=\"Confirm\"\n onClick={() => {}}\n />\n </>\n */\n footer?: JSX.Element;\n /**\n * The accessibilty text on the close button.\n * (Sets the aria-label of the button)\n *\n *\n * @defaultValue close modal\n */\n accessibilityCloseLabel?: string;\n /**\n * The size of the card\n *\n * Classic:\n * * `sm`: 400px (Classic only)\n * * `lg`: 600px\n *\n * Cambio:\n * * `lg`: 600px\n *\n *\n * @defaultValue sm\n */\n size?: keyof typeof sizeWidth;\n /**\n * The z-index for the modal.\n * Typically used if there are other things on the page with higher z-index and you need this overlayed on top.\n *\n * @defaultValue 0\n */\n zIndex?: number;\n /**\n * Test id for the modal\n */\n \"data-testid\"?: string;\n}): ReactElement {\n const { themeName } = useTheme();\n return (\n <Layer zIndex={zIndex}>\n <StopScroll>\n <FocusTrap>\n <div\n className={classnames(\n styles.backdrop,\n themeName === \"classic\"\n ? styles.backdropClassic\n : styles.backdropCambio,\n )}\n role=\"presentation\"\n onClick={(e) => e.target === e.currentTarget && onDismiss()}\n onKeyDown={(e) => e.key === \"Escape\" && onDismiss()}\n >\n <Box\n data-testid={dataTestId}\n backgroundColor=\"white\"\n rounding={themeName === \"classic\" ? \"xl\" : \"md\"}\n display=\"flex\"\n direction=\"column\"\n marginStart={4}\n marginEnd={4}\n minWidth={240}\n maxWidth={sizeWidth[themeName === \"classic\" ? size : \"lg\"]}\n width=\"100%\"\n dangerouslySetInlineStyle={{ __style: { overflow: \"hidden\" } }}\n >\n <Box position=\"relative\">\n {themeName === \"classic\" ? (\n <button\n aria-label={accessibilityCloseLabel}\n type=\"button\"\n className={classnames(\n styles.closeButton,\n styles.closeButtonClassic,\n {\n [styles.closeButtonWithImage]: !!image,\n },\n )}\n onClick={onDismiss}\n >\n <XIcon color={image ? \"#fff\" : \"#000\"} />\n </button>\n ) : (\n <Box\n position=\"absolute\"\n dangerouslySetInlineStyle={{\n __style: { top: 4, right: 4 },\n }}\n >\n <IconButton\n accessibilityLabel={accessibilityCloseLabel}\n color={image ? \"primary\" : \"tertiary\"}\n on={image ? \"darkBackground\" : \"lightBackground\"}\n size=\"sm\"\n icon={XIconCambio}\n />\n </Box>\n )}\n </Box>\n {image && <Box maxHeight={200}>{image}</Box>}\n <Box\n display=\"flex\"\n gap={themeName === \"classic\" ? 3 : 4}\n direction=\"column\"\n padding={themeName === \"classic\" ? 9 : 6}\n >\n <Heading\n as=\"h1\"\n size={themeName === \"classic\" ? 500 : 600}\n fontStyle={themeName === \"classic\" ? \"sans-serif\" : \"serif\"}\n >\n {header}\n </Heading>\n <Box marginBottom={themeName === \"classic\" ? 4 : 0}>\n {children}\n </Box>\n {footer && (\n <Box\n display=\"flex\"\n direction=\"column\"\n gap={3}\n marginTop={themeName === \"classic\" ? 0 : 2}\n smDirection=\"row\"\n smJustifyContent=\"end\"\n lgDirection=\"row\"\n lgJustifyContent=\"end\"\n >\n {footer}\n </Box>\n )}\n </Box>\n </Box>\n </div>\n </FocusTrap>\n </StopScroll>\n </Layer>\n );\n}\n\nModal.displayName = \"Modal\";\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Modal/Modal.module.css\"; export default {\"backdrop\":\"_backdrop_1w5vm_1\",\"backdropClassic\":\"_backdropClassic_1w5vm_11\",\"backdropCambio\":\"_backdropCambio_1w5vm_15\",\"closeButton\":\"_closeButton_1w5vm_19\",\"closeButtonClassic\":\"_closeButtonClassic_1w5vm_34\",\"closeButtonWithImage\":\"_closeButtonWithImage_1w5vm_46\",\"closeButtonWithImageCambio\":\"_closeButtonWithImageCambio_1w5vm_50\"}"]}
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|