@yogiswara/honcho-editor-ui 1.0.3 → 1.0.5

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.
Files changed (4) hide show
  1. package/dist/components/editor/HAccordionPreset.js +2 -2
  2. package/dist/components/editor/HAlertBox.d.ts +1 -0
  3. package/dist/components/editor/HAlertBox.js +13 -4
  4. package/package.json +1 -1
package/dist/components/editor/HAccordionPreset.js CHANGED
@@ -26,7 +26,7 @@ export default function HAccordionPreset(props) {
26
26
  }
27
27
  };
28
28
  const isPanelExpanded = (panelName) => props.expandedPanels.includes(panelName);
29
- return (_jsx(_Fragment, { children: _jsxs(Box, { children: [_jsxs(Accordion, { sx: accordionStyle, expanded: isPanelExpanded('preset'), onChange: props.onChange('preset'), disableGutters: true, children: [_jsx(AccordionSummary, { children: _jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { width: '100%' }, children: [_jsx(Typography, { sx: { ...typography.titleMedium, color: colors.surface }, children: "Preset" }), _jsx(CardMedia, { component: "img", image: isPanelExpanded('preset') ? "/v1/svg/expanded-editor.svg" : "/v1/svg/expand-editor.svg", sx: { width: "11.67px", height: "5.83px" } })] }) }), _jsx(AccordionDetails, { sx: { pr: '10px' }, children: _jsxs(Stack, { direction: "column", gap: "8px", sx: { pt: '0px', pb: '0px', mx: '0px', width: '100%' }, children: [props.presets.map((preset) => (_jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { width: '100%' }, children: [props.selectedPreset != preset.id && (_jsx(Button, { sx: {
29
+ return (_jsx(_Fragment, { children: _jsxs(Box, { children: [_jsxs(Accordion, { sx: accordionStyle, expanded: isPanelExpanded('preset'), onChange: props.onChange('preset'), disableGutters: true, children: [_jsx(AccordionSummary, { sx: { pr: 0 }, children: _jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { width: '100%' }, children: [_jsx(Typography, { sx: { ...typography.titleMedium, color: colors.surface }, children: "Preset" }), _jsx(CardMedia, { component: "img", image: isPanelExpanded('preset') ? "/v1/svg/expanded-editor.svg" : "/v1/svg/expand-editor.svg", sx: { width: "11.67px", height: "5.83px" } })] }) }), _jsx(AccordionDetails, { sx: { pr: "4px" }, children: _jsxs(Stack, { direction: "column", gap: "8px", sx: { pt: '0px', pb: '0px', mx: '0px', width: '100%' }, children: [props.presets.map((preset) => (_jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { width: '100%' }, children: [props.selectedPreset != preset.id && (_jsx(Button, { sx: {
30
30
  width: '100px',
31
31
  textWrap: 'nowrap',
32
32
  overflow: 'hidden',
@@ -55,5 +55,5 @@ export default function HAccordionPreset(props) {
55
55
  borderColor: colors.surface,
56
56
  borderRadius: "40px",
57
57
  textTransform: 'none',
58
- }, onClick: props.onOpenPresetModal, children: "Create Preset" })] }) })] }), _jsxs(Accordion, { sx: accordionStyle, expanded: isPanelExpanded('watermark'), onChange: props.onChange('watermark'), disableGutters: true, children: [_jsx(AccordionSummary, { children: _jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { width: '100%' }, children: [_jsx(Typography, { sx: { ...typography.titleMedium, color: colors.surface }, children: "Watermark" }), _jsx(CardMedia, { component: "img", image: isPanelExpanded('watermark') ? "/v1/svg/expanded-editor.svg" : "/v1/svg/expand-editor.svg", sx: { width: "11.67px", height: "5.83px" } })] }) }), _jsx(AccordionDetails, { children: _jsxs(Stack, { direction: "column", children: [_jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { width: '100%' }, children: [_jsx(Typography, { color: "initial", children: "Jonathan" }), _jsx(IconButton, { "aria-label": "options", children: _jsx(CardMedia, { component: "img", image: "/v1/svg/dots-editor.svg", alt: "Options" }) })] }), _jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { width: '100%' }, children: [_jsx(Typography, { color: "initial", children: "Jonathan" }), _jsx(IconButton, { "aria-label": "options", children: _jsx(CardMedia, { component: "img", image: "/v1/svg/dots-editor.svg", alt: "Options" }) })] }), _jsx(Button, { variant: "text", sx: { color: colors.surface, border: "1px solid", borderColor: colors.surface, borderRadius: "40px", textTransform: 'none', }, onClick: props.onOpenWatermarkView, children: "Create Watermark" })] }) })] })] }) }));
58
+ }, onClick: props.onOpenPresetModal, children: "Create Preset" })] }) })] }), _jsxs(Accordion, { sx: accordionStyle, expanded: isPanelExpanded('watermark'), onChange: props.onChange('watermark'), disableGutters: true, children: [_jsx(AccordionSummary, { sx: { pr: 0 }, children: _jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { width: '100%' }, children: [_jsx(Typography, { sx: { ...typography.titleMedium, color: colors.surface }, children: "Watermark" }), _jsx(CardMedia, { component: "img", image: isPanelExpanded('watermark') ? "/v1/svg/expanded-editor.svg" : "/v1/svg/expand-editor.svg", sx: { width: "11.67px", height: "5.83px" } })] }) }), _jsx(AccordionDetails, { children: _jsxs(Stack, { direction: "column", children: [_jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { width: '100%' }, children: [_jsx(Typography, { color: "initial", children: "Jonathan" }), _jsx(IconButton, { "aria-label": "options", children: _jsx(CardMedia, { component: "img", image: "/v1/svg/dots-editor.svg", alt: "Options" }) })] }), _jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { width: '100%' }, children: [_jsx(Typography, { color: "initial", children: "Jonathan" }), _jsx(IconButton, { "aria-label": "options", children: _jsx(CardMedia, { component: "img", image: "/v1/svg/dots-editor.svg", alt: "Options" }) })] }), _jsx(Button, { variant: "text", sx: { color: colors.surface, border: "1px solid", borderColor: colors.surface, borderRadius: "40px", textTransform: 'none', }, onClick: props.onOpenWatermarkView, children: "Create Watermark" })] }) })] })] }) }));
59
59
  }
package/dist/components/editor/HAlertBox.d.ts CHANGED
@@ -4,4 +4,5 @@ interface InternetConProps {
4
4
  onClose: () => void;
5
5
  }
6
6
  export declare function HAlertInternetConnectionBox(props: InternetConProps): import("react/jsx-runtime").JSX.Element;
7
+ export declare function HAlertPresetSave(): import("react/jsx-runtime").JSX.Element;
7
8
  export {};
package/dist/components/editor/HAlertBox.js CHANGED
@@ -9,7 +9,6 @@ export function HAlertInternetBox() {
9
9
  left: '50%',
10
10
  transform: 'translate(-50%, -50%)',
11
11
  width: { xs: '90%', sm: 'auto' },
12
- minWidth: '270px',
13
12
  zIndex: 1300,
14
13
  backgroundColor: colors.onBackground,
15
14
  color: colors.surface
@@ -22,7 +21,6 @@ export function HAlertCopyBox() {
22
21
  left: '50%',
23
22
  transform: 'translate(-50%, -50%)',
24
23
  width: { xs: '90%', sm: 'auto' },
25
- minWidth: '270px',
26
24
  zIndex: 1300,
27
25
  backgroundColor: colors.onBackground,
28
26
  color: colors.surface
@@ -36,11 +34,22 @@ export function HAlertInternetConnectionBox(props) {
36
34
  left: '50%',
37
35
  transform: 'translate(-50%, -50%)',
38
36
  width: { xs: '90%', sm: 'auto' },
39
- minWidth: '270px',
40
37
  zIndex: 1300,
41
38
  backgroundColor: colors.onBackground,
42
39
  color: colors.surface
43
40
  },
44
41
  // Use the 'action' prop for the close button
45
- action: _jsx(IconButton, { "aria-label": "close", color: "inherit", size: "small", onClick: props.onClose, children: _jsx(CloseIcon, { fontSize: "inherit" }) }), children: "No Internet Connection" }));
42
+ action: _jsx(IconButton, { "aria-label": "close", color: "inherit", size: "small", onClick: props.onClose, children: _jsx(CloseIcon, { fontSize: "inherit" }) }), children: "Connection Problem" }));
43
+ }
44
+ export function HAlertPresetSave() {
45
+ const colors = useColors();
46
+ return (_jsx(Alert, { icon: _jsx("img", { src: "v1/svg/check-ratio-editor.svg" }), sx: { position: 'absolute',
47
+ top: '10%',
48
+ left: '50%',
49
+ transform: 'translate(-50%, -50%)',
50
+ width: { xs: '90%', sm: 'auto' },
51
+ zIndex: 1300,
52
+ backgroundColor: colors.onBackground,
53
+ color: colors.surface
54
+ }, children: "Saved" }));
46
55
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@yogiswara/honcho-editor-ui",
3
- "version": "1.0.3",
3
+ "version": "1.0.5",
4
4
  "description": "A complete UI component library for the Honcho photo editor.",
5
5
  "main": "./dist/index.js",
6
6
  "module": "./dist/index.mjs",