Merge pull request #267 from IFRCGo/feature/improve-dref-export

Improve dref application export

Author: samshara

src/components/Button/styles.module.css

@@ -140,6 +140,7 @@
     &.dropdown-item {
         display: flex;
         width: 100%;
+        text-align: left;
         --border-radius: unset;
         --padding: var(--go-ui-spacing-sm) var(--go-ui-spacing-lg);
 

src/components/domain/BlockTextOutput/index.tsx

@@ -0,0 +1,35 @@
+import { _cs } from '@togglecorp/fujs';
+
+import Heading, { type HeadingLevel } from '#components/printable/Heading';
+import styles from './styles.module.css';
+
+interface Props {
+    heading?: React.ReactNode;
+    headingLevel?: HeadingLevel;
+    children?: React.ReactNode;
+    childrenContainerClassName?: string;
+}
+
+function Container(props: Props) {
+    const {
+        heading,
+        headingLevel = 3,
+        children,
+        childrenContainerClassName,
+    } = props;
+
+    return (
+        <>
+            {heading && (
+                <Heading level={headingLevel}>
+                    {heading}
+                </Heading>
+            )}
+            <div className={_cs(styles.content, childrenContainerClassName)}>
+                {children}
+            </div>
+        </>
+    );
+}
+
+export default Container;

src/components/domain/BlockTextOutput/styles.module.css

@@ -0,0 +1,9 @@
+.content {
+    margin-bottom: var(--go-ui-spacing-lg);
+
+    .content {
+        &:last-child {
+            margin-bottom: unset;
+        }
+    }
+}

src/components/printable/Container/index.tsx

@@ -0,0 +1,38 @@
+import { _cs } from '@togglecorp/fujs';
+
+import styles from './styles.module.css';
+
+export type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
+
+const levelToClassName: Record<HeadingLevel, string> = {
+    1: styles.levelOne,
+    2: styles.levelTwo,
+    3: styles.levelThree,
+    4: styles.levelFour,
+    5: styles.levelFive,
+    6: styles.levelSix,
+};
+
+interface Props {
+    className?: string;
+    children?: React.ReactNode;
+    level?: HeadingLevel;
+}
+
+function Heading(props: Props) {
+    const {
+        className,
+        level = 3,
+        children,
+    } = props;
+
+    const HeadingEl = `h${level}` as React.ElementType;
+
+    return (
+        <HeadingEl className={_cs(styles.heading, levelToClassName[level], className)}>
+            {children}
+        </HeadingEl>
+    );
+}
+
+export default Heading;

src/components/printable/Container/styles.module.css

@@ -0,0 +1,37 @@
+.heading {
+    --font-size: var(--go-ui-font-size-xl);
+
+    margin: 0 0 var(--go-ui-spacing-sm) 0;
+    font-family: Montserrat, sans-serif;
+    font-size: var(--font-size);
+    font-weight: var(--go-ui-font-weight-bold);
+    page-break-after: avoid;
+
+    &.level-one {
+        --font-size: var(--go-ui-font-size-4xl);
+        color: var(--go-ui-color-primary-red);
+    }
+
+    &.level-two {
+        --font-size: var(--go-ui-font-size-3xl);
+        color: var(--go-ui-color-primary-blue);
+    }
+
+    &.level-three {
+        --font-size: var(--go-ui-font-size-xl);
+        color: var(--go-ui-color-primary-red);
+    }
+
+    &.level-four {
+        --font-size: var(--go-ui-font-size-lg);
+    }
+
+    &.level-five {
+        --font-size: var(--go-ui-font-size-md);
+    }
+
+    &.level-six {
+        --font-size: var(--go-ui-font-size-sm);
+    }
+}
+

src/components/domain/DescriptionText/index.tsx renamed to src/components/printable/DescriptionText/index.tsx

@@ -0,0 +1,71 @@
+import { useCallback, useState } from 'react';
+import {
+    _cs,
+    isDefined,
+    isFalsyString,
+    isTruthyString,
+} from '@togglecorp/fujs';
+
+import styles from './styles.module.css';
+
+interface Props {
+    src?: string;
+    alt?: string;
+    caption?: React.ReactNode;
+    imgElementClassName?: string;
+}
+
+function Image(props: Props) {
+    const {
+        src,
+        alt,
+        caption,
+        imgElementClassName,
+    } = props;
+
+    const [errored, setErrored] = useState(false);
+
+    const handleImageError = useCallback(
+        () => {
+            setErrored(true);
+        },
+        [],
+    );
+
+    const handleImageLoad = useCallback(
+        () => {
+            setErrored(false);
+        },
+        [],
+    );
+
+    if (isFalsyString(src)) {
+        return null;
+    }
+
+    const hasCaption = typeof caption === 'string' ? isTruthyString(caption) : isDefined(caption);
+
+    return (
+        <figure className={_cs(styles.image, errored && styles.errored)}>
+            {errored && (
+                <div className={_cs(styles.imgError, imgElementClassName)}>
+                    Image not available!
+                </div>
+            )}
+            <img
+                onError={handleImageError}
+                onLoad={handleImageLoad}
+                className={_cs(styles.imgElement, imgElementClassName)}
+                src={src}
+                alt={alt}
+            />
+            {hasCaption && (
+                <figcaption className={styles.caption}>
+                    {caption}
+                </figcaption>
+            )}
+        </figure>
+    );
+}
+
+export default Image;