@logora/debate 0.1.0

package/src/components/share/share_box/ShareBox.test.jsx

@@ -0,0 +1,142 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { ShareBox } from './ShareBox';
+import { IntlProvider } from 'react-intl';
+import { IconProvider } from '@logora/debate/icons/icon_provider';
+import * as regularIcons from '@logora/debate/icons/regular_icons';
+
+describe('ShareBox', () => {
+    it('should render box with share option', () => {
+        const { queryAllByRole } = render(
+            <IntlProvider locale="en">
+                <IconProvider library={regularIcons}>
+                    <ShareBox 
+                        shareUrl="https://example.com/share-link"
+                        shareTitle="Here is an interesting link"
+                        shareText="Hello, I stumbled upon this interesting article about asteroids. You should check it out !"
+                    />
+                </IconProvider>
+            </IntlProvider>
+        );
+        expect(queryAllByRole("button")).toHaveLength(4)
+    });
+
+    it('should copy to clipboard when sharing link', async () => {
+        const user = userEvent.setup();
+        const shareUrl = "https://example.com/share-link";
+
+        Object.defineProperty(window.navigator, 'clipboard', {
+            configurable: true,
+            value: {
+                writeText: vi.fn(),
+            },
+        });
+
+        const { queryAllByRole, getByText } = render(
+            <IntlProvider locale="en">
+                <IconProvider library={regularIcons}>
+                    <ShareBox 
+                        shareUrl={shareUrl}
+                        shareTitle="Here is an interesting link"
+                        shareText="Hello, I stumbled upon this interesting article about asteroids. You should check it out !"
+                    />
+                </IconProvider>
+            </IntlProvider>
+        );
+        const icons = (queryAllByRole("button"));
+        const linkIcon = icons[0];
+
+        await user.hover(linkIcon);
+        expect(getByText(/Copy to clipboard/i)).toBeTruthy();
+
+        await user.click(linkIcon);
+        // TODO : add copy to clipboard test
+    });
+
+    it('should open Facebook share link on click', async () => {
+        const user = userEvent.setup();
+        const { queryAllByRole, getByText} = render(
+            <IntlProvider locale="en">
+                <IconProvider library={regularIcons}>
+                    <ShareBox 
+                        shareUrl="https://example.com/share-link"
+                        shareTitle="Here is an interesting link"
+                        shareText="Hello, I stumbled upon this interesting article about asteroids. You should check it out !"
+                    />
+                </IconProvider>
+            </IntlProvider>
+        );
+        const icons = (queryAllByRole("button"));
+        const facebookIcon = icons[1];
+
+        await user.hover(facebookIcon);
+        expect(getByText(/Share on Facebook/i)).toBeTruthy();
+    });
+
+    it('should open twitter share link on click', async () => {
+        const user = userEvent.setup();
+        const { queryAllByRole, getByText} = render(
+            <IntlProvider locale="en">
+                <IconProvider library={regularIcons}>
+                    <ShareBox 
+                        shareUrl="https://example.com/share-link"
+                        shareTitle="Here is an interesting link"
+                        shareText="Hello, I stumbled upon this interesting article about asteroids. You should check it out !"
+                    />
+                </IconProvider>
+            </IntlProvider>
+        );
+        const icons = (queryAllByRole("button"));
+        const twitterIcon = icons[2];
+
+        await user.hover(twitterIcon);
+        expect(getByText(/Share on Twitter/i)).toBeTruthy();
+    });
+
+    it('should open email share on click', async () => {
+        const user = userEvent.setup();
+        const { queryAllByRole, getByText} = render(
+            <IntlProvider locale="en">
+                <IconProvider library={regularIcons}>
+                    <ShareBox 
+                        shareUrl="https://example.com/share-link"
+                        shareTitle="Here is an interesting link"
+                        shareText="Hello, I stumbled upon this interesting article about asteroids. You should check it out !"
+                    />
+                </IconProvider>
+            </IntlProvider>
+        );
+        const icons = (queryAllByRole("button"));
+        const mailIcon = icons[3];
+
+        await user.hover(mailIcon);
+        expect(getByText(/Share by email/i)).toBeTruthy();
+    });
+
+    it('should render box with code share option and copy to clipboard on click', async () => {
+        const user = userEvent.setup();
+        const { queryAllByRole, getByText } = render(
+            <IntlProvider locale="en">
+                <IconProvider library={regularIcons}>
+                    <ShareBox 
+                        shareUrl="https://example.com/share-link"
+                        shareTitle="Here is an interesting link"
+                        shareText="Hello, I stumbled upon this interesting article about asteroids. You should check it out !"
+                        showShareCode
+                    />
+                </IconProvider>
+            </IntlProvider>
+        );
+        expect(queryAllByRole("button")).toHaveLength(5);
+
+        const icons = (queryAllByRole("button"));
+        const codeIcon = icons[4];
+
+        await user.hover(codeIcon);
+        expect(getByText(/Copy embed code/i)).toBeTruthy();
+
+        await user.click(codeIcon);
+        // TODO : add copy to clipboard test
+    });
+});

package/src/components/share/share_box/index.js

@@ -0,0 +1 @@
+export { ShareBox } from './ShareBox';

package/src/components/share/share_button/ShareButton.docs.mdx

@@ -0,0 +1,26 @@
+---
+description: A share button component.
+---
+
+import { ShareButton } from './ShareButton';
+import { IntlProvider } from 'react-intl';
+
+A button that opens ShareBox on click on desktop, and the navigator's native share dialog on mobile.
+
+Share URL and text will be passed to the different share options.
+
+It must be wrapped around [react-intl](https://formatjs.io/docs/getting-started/installation/)'s IntlProvider.
+
+It must be inside [IconProvider](https://bit.cloud/logora/debate/icons/icon_provider).
+
+### Component usage
+```js
+<IntlProvider locale="fr">
+    <ShareButton
+        showText 
+        shareUrl="https://example.com/share-link"
+        shareTitle="Here is an interesting link"
+        shareText="Hello, I stumbled upon this interesting article about asteroids. You should check it out !"
+    />
+</IntlProvider>
+```

package/src/components/share/share_button/ShareButton.jsx

@@ -0,0 +1,102 @@
+import React, { useState, useRef } from "react";
+import { Icon } from "@logora/debate/icons/icon";
+import { ShareBox } from "@logora/debate/share/share_box";
+import { useIntl } from "react-intl";
+import useOnClickOutside from 'use-onclickoutside';
+import styles from "./ShareButton.module.scss";
+import cx from "classnames";
+import PropTypes from "prop-types";
+
+export const ShareButton = ({ showText, shareUrl, shareTitle, shareText = false, shareCode, showShareCode = false, iconSize = 22, className, tooltipPosition = 'bottom' }) => {
+	const popoverContentRef = useRef();
+	const intl = useIntl();
+	const [popoverActive, setPopoverActive] = useState(false);
+
+	const buildShareLink = () => {
+		let shareUrlBuild = shareUrl;
+		if (typeof window !== 'undefined') {
+			shareUrlBuild += "?redirect_url=" + window.location.protocol + "//" + window.location.hostname;
+		}
+		return shareUrlBuild;
+	}
+
+	const shareUrlBuild = buildShareLink();
+
+	const handleClickOutsidePopover = (event) => {
+		if (popoverContentRef && !popoverContentRef.current.contains(event.target)) {
+			setPopoverActive(false);
+		}
+	};
+
+	const handleShare = () => {
+		if (typeof window !== 'undefined') {
+			let mql = window.matchMedia("(max-width: 600px)");
+			if ((typeof window !== 'undefined') && window.navigator.share && window.navigator.maxTouchPoints && window.navigator?.maxTouchPoints > 0 && mql.matches) {
+				handleMobileShare();
+			} else {
+				setPopoverActive(true);
+			}
+		}
+	};
+
+	const handleMobileShare = () => {
+		if (typeof window !== 'undefined') {
+			window.navigator.share({
+				text: shareText,
+				title: shareTitle,
+				url: shareUrlBuild
+			}).catch(error => {
+				// DO NOTHING
+			});
+		}
+	}
+
+	useOnClickOutside(popoverContentRef, handleClickOutsidePopover);
+
+	return (
+		<div
+			tabIndex='0'
+			onKeyDown={(e) => {
+				if (e.key === "Enter" || e.key === " ") {
+				  e.preventDefault();
+				  handleShare();
+				}
+			  }}
+			title={intl.formatMessage({ id: "share.share_button.text", defaultMessage: "Share" })}
+			className={cx(styles.shareButtonContainer, className)}
+			onClick={handleShare}
+			data-tid="action_share_button"
+		>
+			<div
+				className={cx(styles.popoverWrapper, { [styles.popoverActive]: popoverActive })}
+			>
+				<Icon name="share" height={iconSize} width={iconSize} />
+				{showText && <div className={styles.shareButtonText}>{intl.formatMessage({ id: "share.share_button.text", defaultMessage: "Share" })}</div>}
+				<div ref={popoverContentRef} className={cx(styles.popoverContent, { [styles.popoverContentWithCode]: showShareCode })}>
+					{popoverActive && <ShareBox shareUrl={shareUrlBuild} shareTitle={shareTitle} shareText={shareText} showShareCode={showShareCode} shareCode={shareCode} tooltipPosition={tooltipPosition} />}
+				</div>
+			</div>
+		</div>
+	);
+}
+
+ShareButton.propTypes = {
+	/** If `true`, show "Share" text next to icon */
+	showText: PropTypes.bool,
+	/** Url to share */
+	shareUrl: PropTypes.string.isRequired,
+	/** Title of the content that will be shared */
+	shareTitle: PropTypes.string.isRequired,
+	/** Description of the shared content */
+	shareText: PropTypes.string,
+	/** Code to share */
+	shareCode: PropTypes.string,
+	/** If `true`, show copy code icon */
+	showShareCode: PropTypes.bool,
+	/** Size of icons */
+	iconSize: PropTypes.number,
+	/** Style to pass */
+	className: PropTypes.string,
+	/** Position of the tooltip */
+	tooltipPosition: PropTypes.string,
+};

package/src/components/share/share_button/ShareButton.module.scss

@@ -0,0 +1,68 @@
+@use 'styles/theme' as theme;
+@use 'styles/spacing' as spacing;
+
+.shareButtonContainer {
+  display: flex !important;
+  align-content: center !important;
+  justify-content: center !important;
+  padding: 0 !important;
+  cursor: pointer;
+}
+
+.popoverWrapper {
+  position: relative;
+  display: flex !important;
+  align-items: center !important;
+  color: theme.$text-primary;
+}
+
+.popoverWrapper.popoverActive .popoverContent {
+  z-index: 2;
+  opacity: 1;
+  visibility: visible;
+  transform: translate(-50%, 0%);
+}
+
+.popoverContent {
+  opacity: 0;
+  visibility: hidden;
+  position: absolute;
+  left: 25%;
+  top: 35px;
+  padding: spacing.$spacer;
+  border: 1px solid theme.$text-secondary;
+  border-radius: theme.$box-border-radius;
+  box-shadow: theme.$box-shadow;
+  background: theme.$background-color-primary;
+  color: theme.$text-primary;
+  line-height: spacing.$spacer-lg;
+  width: auto;
+  &:before {
+    position: absolute;
+    z-index: -1;
+    content: "";
+    right: calc(50% - 10px);
+    top: -10px;
+    border-style: solid;
+    border-width: 0 10px 10px 10px;
+    border-color: transparent transparent theme.$text-secondary transparent;
+    transition-duration: 0.3s;
+    transition-property: transform;
+  }
+  &:after {
+    position: absolute;
+    z-index: -1;
+    content: "";
+    right: calc(50% - 10px);
+    top: -9px;
+    border-style: solid;
+    border-width: 0 10px 10px 10px;
+    border-color: transparent transparent theme.$background-color-primary transparent;
+    transition-duration: 0.3s;
+    transition-property: transform;
+  }
+}
+
+.shareButtonText {
+  @include spacing.pl(1, xs);
+}

package/src/components/share/share_button/ShareButton.stories.jsx

@@ -0,0 +1,51 @@
+export default {
+    title: 'Share/Share Button',
+    component: ShareButton,
+    args: {
+        shareUrl: 'https://example.fr/test/',
+        shareTitle: 'Share this !',
+        shareText: 'You should check this interesting link',
+        showText: false
+    },
+    argTypes: {
+        shareUrl: { control: 'text' },
+        shareTitle: { control: 'text' },
+        shareText: { control: 'text' },
+        showText: { control: 'boolean' }
+    }
+};
+
+import React from 'react';
+import { ShareButton } from './ShareButton';
+import { IntlProvider } from 'react-intl';
+import { ConfigProvider } from '@logora/debate/data/config_provider';
+import { IconProvider } from '@logora/debate/icons/icon_provider';
+import * as regularIcons from '@logora/debate/icons/regular_icons';
+
+export const DefaultShareButton = () => {
+    return (
+        <div style={{width: "200px"}}>
+            <IntlProvider locale="en">
+                <ConfigProvider config={{theme:{}}}>
+                    <IconProvider library={regularIcons}>
+                        <ShareButton shareUrl={"https://example.fr/test/"} shareTitle="Share this !" shareText={"You should check this interesting link"} />
+                    </IconProvider>
+                </ConfigProvider>
+            </IntlProvider>
+        </div>
+    );
+};
+
+export const ShareButtonWithText = () => {
+    return (
+        <div style={{width: "200px"}}>
+            <IntlProvider locale="en">
+                <ConfigProvider config={{theme:{}}}>
+                    <IconProvider library={regularIcons}>
+                        <ShareButton showText shareUrl={"https://example.fr/test/"} shareTitle="Share this !" shareText={"You should check this interesting link"} />
+                    </IconProvider>
+                </ConfigProvider>
+            </IntlProvider>
+        </div>
+    );
+};

package/src/components/share/share_button/ShareButton.test.jsx

@@ -0,0 +1,117 @@
+import React from 'react';
+import { render, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { ShareButton } from './ShareButton';
+import { IntlProvider } from 'react-intl';
+import { ConfigProvider } from '@logora/debate/data/config_provider';
+import { IconProvider } from '@logora/debate/icons/icon_provider';
+import * as regularIcons from '@logora/debate/icons/regular_icons';
+
+describe('ShareButton', () => {
+    beforeAll(() => {
+        Object.defineProperty(window, 'matchMedia', {
+            writable: true,
+            value: vi.fn().mockImplementation((query) => ({
+                matches: false,
+                media: query,
+                onchange: null,
+                addListener: vi.fn(),
+                removeListener: vi.fn(),
+                addEventListener: vi.fn(),
+                removeEventListener: vi.fn(),
+                dispatchEvent: vi.fn(),
+            })),
+        });
+    });
+    
+    it('should render button with share text', () => {
+        const { getByText, queryAllByRole } = render(
+            <IntlProvider locale="en">
+                <ConfigProvider config={{theme:{}}}>
+                    <IconProvider library={regularIcons}>
+                        <ShareButton 
+                            showText
+                            shareUrl="https://example.com/share-link"
+                            shareTitle="Here is an interesting link"
+                            shareText="Hello, I stumbled upon this interesting article about asteroids. You should check it out !"
+                        />
+                    </IconProvider>
+                </ConfigProvider>
+            </IntlProvider>
+        );
+        expect(getByText("Share")).toBeTruthy();
+        expect(queryAllByRole("button")).toHaveLength(0);
+    });
+
+    it('should not show text if props false', () => {
+        const { queryByText, queryAllByRole } = render(
+            <IntlProvider locale="en">
+                <ConfigProvider config={{theme:{}}}>
+                    <IconProvider library={regularIcons}>
+                        <ShareButton 
+                            shareUrl="https://example.com/share-link"
+                            shareTitle="Here is an interesting link"
+                            shareText="Hello, I stumbled upon this interesting article about asteroids. You should check it out !"
+                        />
+                    </IconProvider>
+                </ConfigProvider>
+            </IntlProvider>
+        );
+        expect(queryByText("Share")).toBeNull();
+        expect(queryAllByRole("button")).toHaveLength(0);
+    });
+
+    it('should show share box when clicking on button', async () => {
+        const { getByText, queryAllByRole } = render(
+            <IntlProvider locale="en">
+                <ConfigProvider config={{theme:{}}}>
+                    <IconProvider library={regularIcons}>
+                        <ShareButton 
+                            showText
+                            shareUrl="https://example.com/share-link"
+                            shareTitle="Here is an interesting link"
+                            shareText="Hello, I stumbled upon this interesting article about asteroids. You should check it out !"
+                        />
+                    </IconProvider>
+                </ConfigProvider>
+            </IntlProvider>
+        );
+        expect(getByText("Share")).toBeTruthy();
+
+        userEvent.click(getByText("Share"));
+
+        await waitFor(() => {
+            expect(queryAllByRole("button")).toHaveLength(4);
+        });
+    });
+
+    it('should close box when click outside', async () => {
+        const { getByText, queryAllByRole } = render(
+            <IntlProvider locale="en">
+                <ConfigProvider config={{theme:{}}}>
+                    <IconProvider library={regularIcons}>
+                        <ShareButton 
+                            showText
+                            shareUrl="https://example.com/share-link"
+                            shareTitle="Here is an interesting link"
+                            shareText="Hello, I stumbled upon this interesting article about asteroids. You should check it out !"
+                        />
+                    </IconProvider>
+                </ConfigProvider>
+            </IntlProvider>
+        );
+        expect(getByText("Share")).toBeTruthy();
+
+        userEvent.click(getByText("Share"));
+
+        await waitFor(() => {
+            expect(queryAllByRole("button")).toHaveLength(4);
+        });
+
+        userEvent.click(document.body);
+
+        await waitFor(() => {
+            expect(queryAllByRole("button")).toHaveLength(0);
+        });
+    });
+});

package/src/components/share/share_button/index.js

@@ -0,0 +1 @@
+export { ShareButton } from './ShareButton';

package/src/components/share/share_modal/ShareModal.docs.mdx

@@ -0,0 +1,29 @@
+---
+description: A modal to display ShareBox component.
+labels: ['modal']
+---
+
+A modal component that displays the ShareBox component.
+
+It must be inside [IconProvider](https://bit.cloud/logora/debate/icons/icon_provider).
+
+### Component usage
+
+```js
+    import { ShareModal } from "@logora/debate.share.share_modal";
+```
+
+```js
+    <IntlProvider locale="en">
+        <ModalProvider>
+            <ShareModal 
+                shareUrl="https://app.logora.fr/share/p/48656"
+                shareText="Text"
+                shareTitle="Title"
+                title="Modal Title"
+                shareCode='<iframe src="https://api.logora.fr/embed.html?shortname="[...]'
+                showShareCode={true}
+            />
+        </ModalProvider>
+    </IntlProvider>
+```

package/src/components/share/share_modal/ShareModal.jsx

@@ -0,0 +1,49 @@
+import React from "react";
+import { Modal } from '@logora/debate/dialog/modal';
+import { ShareBox } from "@logora/debate/share/share_box";
+import styles from "./ShareModal.module.scss";
+import PropTypes from "prop-types";
+
+export const ShareModal = ({ shareUrl, title, shareTitle, shareText, showShareCode = false, shareCode }) => {
+    const buildShareLink = () => {
+        let shareUrlBuild = shareUrl;
+        if(typeof window !== 'undefined') {
+            shareUrl += "?redirect_url=" + window.location.protocol + "//" + window.location.hostname;
+        }
+        return shareUrlBuild;
+    }
+
+    const shareUrlBuild = buildShareLink();
+
+    return (
+        <div>
+            <Modal title={title}>
+                <div className={styles.modalContainer}>
+                    <ShareBox 
+                        shareUrl={shareUrlBuild} 
+                        shareTitle={shareTitle} 
+                        shareText={shareText} 
+                        tooltipPosition={"top"} 
+                        showShareCode={showShareCode}
+                        shareCode={shareCode}
+                    />
+                </div>
+            </Modal>
+        </div>
+    )
+}
+
+ShareModal.propTypes = {
+	/** Url to share */
+	shareUrl: PropTypes.string.isRequired,
+	/** Description of the shared content */
+	shareText: PropTypes.string,
+	/** Title of the content that will be shared */
+	shareTitle: PropTypes.string.isRequired,
+	/** Title passed to the modal */
+	title: PropTypes.string.isRequired,
+	/** Code to share */
+	shareCode: PropTypes.string,
+	/** If `true`, show copy code icon */
+	showShareCode: PropTypes.bool,
+};

package/src/components/share/share_modal/ShareModal.module.scss

@@ -0,0 +1,21 @@
+@use 'styles/theme' as theme;
+@use 'styles/spacing' as spacing;
+@use 'styles/display' as display;
+
+.modalContainer {
+    display: flex;
+    justify-content: center;
+    border-radius: theme.$box-border-radius;
+    box-shadow: theme.$box-shadow;
+    border: theme.$box-border;
+    @include spacing.py(3, xs);
+    @include display.media-breakpoint-down(xs) {
+        @include spacing.mb(3, xs);
+        @include spacing.mt(1, xs);
+    }
+    svg {
+        cursor: pointer;
+        width: 25px;
+        height: 25px;
+    }
+}

package/src/components/share/share_modal/ShareModal.stories.jsx

@@ -0,0 +1,48 @@
+export default {
+    title: 'Share/Share Modal',
+    component: ShareModal,
+    args: {
+        title: 'Modal title',
+        shareUrl: 'https://app.logora.fr/share/p/48656',
+        shareText: 'Text',
+        shareTitle: 'Title',
+        shareCode: '<iframe src="https://api.logora.fr/embed.html?shortname="[...]',
+        showShareCode: true
+    },
+    argTypes: {
+        title: { control: 'text' },
+        shareUrl: { control: 'text' },
+        shareText: { control: 'text' },
+        shareTitle: { control: 'text' },
+        shareCode: { control: 'text' },
+        showShareCode: { control: 'boolean' }
+    }
+};
+
+import React from 'react';
+import { ShareModal } from './ShareModal';
+import { ModalProvider } from '@logora/debate/dialog/modal';
+import { IntlProvider } from 'react-intl';
+import { IconProvider } from '@logora/debate/icons/icon_provider';
+import * as regularIcons from '@logora/debate/icons/regular_icons';
+
+export const DefaultShareModal = () => {
+    return (
+        <div style={{width:"300px", height: "300px"}}>
+            <IntlProvider locale="en">
+                <IconProvider library={regularIcons}>
+                    <ModalProvider>
+                        <ShareModal
+                            title="Modal title"
+                            shareUrl="https://app.logora.fr/share/p/48656"
+                            shareText="Text"
+                            shareTitle="Title"
+                            shareCode='<iframe src="https://api.logora.fr/embed.html?shortname="[...]'
+                            showShareCode={true}
+                        />
+                    </ModalProvider>
+                </IconProvider>
+            </IntlProvider>
+        </div>
+    );
+};