@gpichot/spectacle-deck 1.1.6 → 1.1.7
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/index.cjs +9 -3
- package/index.mjs +9 -3
- package/layouts/SideImageLayout.d.ts +2 -1
- package/layouts/index.d.ts +2 -1
- package/package.json +1 -1
package/index.cjs
CHANGED
|
@@ -672,14 +672,20 @@ var DivWithHeading2 = import_styled_components8.default.div`
|
|
|
672
672
|
font-weight: 400;
|
|
673
673
|
}
|
|
674
674
|
`;
|
|
675
|
+
function parseRatio(ratio) {
|
|
676
|
+
const [a, b] = ratio.split("/");
|
|
677
|
+
return { left: parseInt(a), right: parseInt(b) };
|
|
678
|
+
}
|
|
675
679
|
var SidedImageLayout = ({
|
|
676
680
|
children,
|
|
677
681
|
image,
|
|
678
682
|
position,
|
|
679
|
-
height
|
|
683
|
+
height,
|
|
684
|
+
ratio: ratioProp
|
|
680
685
|
}) => {
|
|
681
686
|
const isReversed = position === "left";
|
|
682
687
|
const [component, rest] = getMatchingMdxType(children, "Image") || image;
|
|
688
|
+
const ratio = parseRatio(ratioProp || "6/4");
|
|
683
689
|
if (!image && !component.length) {
|
|
684
690
|
console.error("No image provided for SidedImageLayout");
|
|
685
691
|
return null;
|
|
@@ -701,7 +707,7 @@ var SidedImageLayout = ({
|
|
|
701
707
|
"div",
|
|
702
708
|
{
|
|
703
709
|
style: {
|
|
704
|
-
flex:
|
|
710
|
+
flex: `${ratio.left || 6} 0`,
|
|
705
711
|
display: "flex",
|
|
706
712
|
flexDirection: "column",
|
|
707
713
|
justifyContent: "center",
|
|
@@ -714,7 +720,7 @@ var SidedImageLayout = ({
|
|
|
714
720
|
"div",
|
|
715
721
|
{
|
|
716
722
|
style: {
|
|
717
|
-
flex:
|
|
723
|
+
flex: `${ratio.right || 4} 0`,
|
|
718
724
|
display: "flex",
|
|
719
725
|
flexDirection: "column",
|
|
720
726
|
justifyContent: "center",
|
package/index.mjs
CHANGED
|
@@ -621,14 +621,20 @@ var DivWithHeading2 = styled8.div`
|
|
|
621
621
|
font-weight: 400;
|
|
622
622
|
}
|
|
623
623
|
`;
|
|
624
|
+
function parseRatio(ratio) {
|
|
625
|
+
const [a, b] = ratio.split("/");
|
|
626
|
+
return { left: parseInt(a), right: parseInt(b) };
|
|
627
|
+
}
|
|
624
628
|
var SidedImageLayout = ({
|
|
625
629
|
children,
|
|
626
630
|
image,
|
|
627
631
|
position,
|
|
628
|
-
height
|
|
632
|
+
height,
|
|
633
|
+
ratio: ratioProp
|
|
629
634
|
}) => {
|
|
630
635
|
const isReversed = position === "left";
|
|
631
636
|
const [component, rest] = getMatchingMdxType(children, "Image") || image;
|
|
637
|
+
const ratio = parseRatio(ratioProp || "6/4");
|
|
632
638
|
if (!image && !component.length) {
|
|
633
639
|
console.error("No image provided for SidedImageLayout");
|
|
634
640
|
return null;
|
|
@@ -650,7 +656,7 @@ var SidedImageLayout = ({
|
|
|
650
656
|
"div",
|
|
651
657
|
{
|
|
652
658
|
style: {
|
|
653
|
-
flex:
|
|
659
|
+
flex: `${ratio.left || 6} 0`,
|
|
654
660
|
display: "flex",
|
|
655
661
|
flexDirection: "column",
|
|
656
662
|
justifyContent: "center",
|
|
@@ -663,7 +669,7 @@ var SidedImageLayout = ({
|
|
|
663
669
|
"div",
|
|
664
670
|
{
|
|
665
671
|
style: {
|
|
666
|
-
flex:
|
|
672
|
+
flex: `${ratio.right || 4} 0`,
|
|
667
673
|
display: "flex",
|
|
668
674
|
flexDirection: "column",
|
|
669
675
|
justifyContent: "center",
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
export declare const SidedImageLayout: ({ children, image, position, height, }: {
|
|
2
|
+
export declare const SidedImageLayout: ({ children, image, position, height, ratio: ratioProp, }: {
|
|
3
3
|
children: React.ReactNode;
|
|
4
4
|
image?: string;
|
|
5
5
|
position?: "left" | "right";
|
|
6
|
+
ratio?: string;
|
|
6
7
|
height?: number;
|
|
7
8
|
}) => React.JSX.Element;
|
package/layouts/index.d.ts
CHANGED
|
@@ -13,10 +13,11 @@ declare const _default: {
|
|
|
13
13
|
}) => import("react").JSX.Element;
|
|
14
14
|
quote: typeof QuoteLayout;
|
|
15
15
|
sidedCode: typeof SidedCodeLayout;
|
|
16
|
-
sidedImage: ({ children, image, position, height, }: {
|
|
16
|
+
sidedImage: ({ children, image, position, height, ratio: ratioProp, }: {
|
|
17
17
|
children: import("react").ReactNode;
|
|
18
18
|
image?: string;
|
|
19
19
|
position?: "left" | "right";
|
|
20
|
+
ratio?: string;
|
|
20
21
|
height?: number;
|
|
21
22
|
}) => import("react").JSX.Element;
|
|
22
23
|
side: typeof SideLayout;
|