@logora/debate 0.1.0

package/src/components/action/button/Button.module.scss

@@ -0,0 +1,133 @@
+@use 'styles/theme' as theme;
+@use 'styles/spacing' as spacing;
+
+button.primaryButton, a.primaryButton {
+  @include spacing.px(3, xs);
+	@include spacing.py(2.5, xs);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: theme.$button-border-radius !important;
+  transition: background-color 300ms ease-in-out;
+  background-color: theme.$call-primary !important;
+  border: 1px solid;
+  border-color: theme.$call-primary !important;
+  color: theme.$text-light !important;
+  font-size: theme.$font-size-normal;
+  font-weight: theme.$font-weight-bold;
+  cursor: pointer;
+  -webkit-appearance: initial !important;
+  text-decoration: none !important;
+  gap: spacing.$spacer-sm;
+  touch-action: manipulation;
+  -webkit-tap-highlight-color: transparent;
+  user-select: none;
+  -webkit-user-select: none;
+  
+  &.iconOnly {
+    padding: 0.6em 0.8em;
+    > svg {
+      margin: 0 !important;
+    }
+  }
+
+  & > svg {
+    fill: theme.$text-light;
+    fill-rule: evenodd;
+    color: inherit;
+  }
+
+  &.danger {
+    background-color: theme.$cancel-primary !important;
+    border-color: theme.$cancel-primary !important;
+  }
+
+  &.success {
+    background-color: theme.$success-primary !important;
+    border-color: theme.$success-primary !important;
+  }
+
+  &.active {
+    background-color: theme.$background-color-primary !important;
+    color: theme.$call-primary !important;
+
+    &.active > svg {
+      fill: theme.$call-primary;
+      fill-rule: evenodd;
+    }
+
+    &.danger {
+      color: theme.$cancel-primary !important;
+      border-color: theme.$cancel-primary !important;
+    }
+  
+    &.success {
+      color: theme.$success-primary !important;
+      border-color: theme.$success-primary !important;
+    }
+  }
+
+  &:hover:not(:disabled) {
+    cursor: pointer;
+    opacity: 0.9;
+    color: theme.$text-light !important;
+    background-color: theme.$call-primary !important;
+    text-decoration: none !important;
+
+    &.danger {
+      background-color: theme.$cancel-primary !important;
+    }
+
+    &.success {
+      background-color: theme.$success-primary !important;
+    }
+
+    &.active {
+      background-color: theme.$background-color-primary !important;
+      color: theme.$call-primary !important;
+      
+      &.danger {
+        color: theme.$cancel-primary !important;
+      }
+  
+      &.success {
+        color: theme.$success-primary !important;
+      }
+    }
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    background-color: theme.$background-color-secondary;
+    color: theme.$text-secondary;
+    cursor: not-allowed;
+  }
+
+  &:focus {
+    box-shadow: none;
+  }
+  
+  &:focus-visible {
+    outline: revert;
+  }
+
+  &.withoutBorder {
+    border: 1px solid transparent !important;
+    box-shadow: none !important;
+  }
+
+  &::-moz-focus-inner {
+    border: 0;
+  }
+}
+
+// .withLeftIcon {
+//   > svg {
+//     margin-right: 10px;
+//   }
+// }
+// .withRightIcon {
+//   > svg {
+//     margin-left: 10px;
+//   }
+// }

package/src/components/action/button/Button.stories.jsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import { MemoryRouter } from 'react-router-dom';
+import { Button } from './Button';
+
+const meta = {
+  title: 'Action/Button',
+  component: Button,
+  args: {
+    children: 'Button',
+    type: 'button',
+    active: false,
+    border: true,
+    accent: undefined,
+    external: false
+  },
+  argTypes: {
+    children: { control: 'text' },
+    type: {
+      control: 'select',
+      options: ['button', 'submit', 'reset']
+    },
+    active: { control: 'boolean' },
+    border: { control: 'boolean' },
+    accent: {
+      control: 'select',
+      options: [undefined, 'success', 'danger']
+    },
+    to: { control: 'text' },
+    external: { control: 'boolean' },
+    leftIcon: { control: false },
+    rightIcon: { control: false },
+    handleClick: { action: 'clicked' }
+  },
+  decorators: [
+    (Story) => (
+      <MemoryRouter>
+        <Story />
+      </MemoryRouter>
+    )
+  ]
+};
+
+export default meta;
+
+export const Primary = {
+  args: {}
+};
+
+export const AsLink = {
+  args: {
+    children: 'Link button',
+    to: '/example-link'
+  }
+};

package/src/components/action/button/Button.test.jsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import { Button } from './Button';
+import { MemoryRouter } from 'react-router-dom';
+
+describe('Button', () => {
+  it('renders the component', () => {
+    const { getByText } = render(<Button>Hello</Button>);
+    expect(getByText('Hello')).toBeInTheDocument();
+  });
+
+  it('calls onClick handler', () => {
+    const handleClick = vi.fn();
+    const { getByText } = render(<Button onClick={handleClick}>Hello</Button>);
+    fireEvent.click(getByText('Hello'));
+    expect(handleClick).toHaveBeenCalled();
+  });
+
+  it('has left icon', () => {
+    const leftIcon = <i>Left Icon</i>;
+    const { getByText } = render(<Button leftIcon={leftIcon}>Hello</Button>);
+    expect(getByText('Left Icon')).toBeInTheDocument();
+  });
+
+  it('has right icon', () => {
+    const rightIcon = <i>Right Icon</i>;
+    const { getByText } = render(<Button rightIcon={rightIcon}>Hello</Button>);
+    expect(getByText('Right Icon')).toBeInTheDocument();
+  });
+
+  it('renders with external link', () => {
+    const linkButton = render(
+        <MemoryRouter>
+            <Button to='https://example.com' external>
+                External Link
+            </Button>
+        </MemoryRouter>
+    );
+    const renderedButton = linkButton.getByText('External Link');
+    expect(renderedButton).toBeInTheDocument();
+    expect(renderedButton).toHaveAttribute('href', 'https://example.com');
+  });
+
+  it('renders without external link', () => {
+    const linkButton = render(
+        <MemoryRouter>
+            <Button to='/page'>Internal Link</Button>
+        </MemoryRouter>
+    );
+    const renderedButton = linkButton.getByText('Internal Link');
+    expect(renderedButton).toBeInTheDocument();
+    expect(renderedButton).toHaveAttribute('href', '/page');
+  });
+});

package/src/components/action/button/index.js

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

package/src/components/action/icon_text_link/HomeIcon.dev.jsx

@@ -0,0 +1,9 @@
+import React from "react";
+
+const HomeIcon = (props) => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
+    <path d="m23.121 9.069-7.585-7.586a5.008 5.008 0 0 0-7.072 0L.879 9.069A2.978 2.978 0 0 0 0 11.19v9.817a3 3 0 0 0 3 3h18a3 3 0 0 0 3-3V11.19a2.978 2.978 0 0 0-.879-2.121ZM15 22.007H9v-3.934a3 3 0 0 1 6 0Zm7-1a1 1 0 0 1-1 1h-4v-3.934a5 5 0 0 0-10 0v3.934H3a1 1 0 0 1-1-1V11.19a1.008 1.008 0 0 1 .293-.707L9.878 2.9a3.008 3.008 0 0 1 4.244 0l7.585 7.586a1.008 1.008 0 0 1 .293.704Z" />
+  </svg>
+)
+
+export default HomeIcon;

package/src/components/action/icon_text_link/IconTextLink.docs.mdx

@@ -0,0 +1,37 @@
+---
+description: A link component with an icon and text.
+---
+
+import { IconTextLink } from './IconTextLink';
+import { MemoryRouter } from "react-router-dom";
+import HomeIcon from './HomeIcon.dev'
+
+A component that renders a link styled with an icon and text underneath.
+
+IconTextLink is using the Link component from react-router when _to_ is passed, and it should be inside a router in this case.
+
+_icon_ prop should be a component.
+
+_to_ prop can be a string, an object or a function, as per react-router documentation : https://v5.reactrouter.com/web/api/Link
+
+If _children_ are passed, it will replace the icon.
+
+Other props will be passed to the link or to the main container.
+
+### Component usage
+
+```js
+import { IconTextLink } from '@logora/debate.action.icon_text_link';
+```
+
+```js
+<MemoryRouter>
+    <IconTextLink 
+        to={link}
+        icon={HomeIcon}
+        text="My link!"
+        className={classNameToPass}
+        custom-attribute={"my-value"}
+    />
+</MemoryRouter>
+```

package/src/components/action/icon_text_link/IconTextLink.jsx

@@ -0,0 +1,57 @@
+import React from "react";
+import styles from "./IconTextLink.module.scss";
+import { Link } from "@logora/debate/action/link";
+import cx from "classnames";
+import PropTypes from "prop-types";
+
+export const IconTextLink = ({ className, textClassName,  to, icon: Icon, text, active = false, children, pin = false, pinText, ...rest }) =>  {
+	const displayIconText = () => {
+		return (
+			<div data-testid={"iconTextContainer"} className={cx(styles.iconTextContainer, {[styles.active]: active})} {...(to ? {} : {...rest})}>
+				<div className={styles.iconPinContainer}>
+					{ pin &&
+						<span
+							className={cx(styles.pinWithText, { [styles.pin]: !pinText })}
+							data-notification-count={pinText}
+						>
+							{pinText || ""}
+						</span>
+					}
+					{ Icon ? <Icon height={24} width={24} /> : children }
+				</div>
+				<div className={cx(styles.iconText, textClassName)}>{ text }</div>
+			</div>
+		);
+	};
+
+	return to ? (
+		<Link data-testid={"iconTextLink"} to={to} className={cx(styles.iconTextLink, className)} {...rest}>
+			{ displayIconText() }
+		</Link>
+	) : (
+		displayIconText()
+	);
+}
+
+IconTextLink.propTypes = {
+    /** href, or object passed to the link */
+    to: PropTypes.any,
+    /** Icon to be displayed */
+    icon: PropTypes.any,
+    /** Text displayed under the icon */
+    text: PropTypes.string,
+    /** If `true`, link is displayed as active */
+    active: PropTypes.bool,
+    /**  Class name to style the link */
+    className: PropTypes.string,
+	/**  Class name to style the text */
+    textClassName: PropTypes.string,
+    /** If `true`, will display a red pin on the icon */
+    pin: PropTypes.bool,
+    /** Text displayed under the icon */
+    pinText: PropTypes.string,
+	/**  Content of the link if icon is empty*/
+	children: PropTypes.node,
+    /** Extra props passed to the link */
+    rest: PropTypes.object
+};

package/src/components/action/icon_text_link/IconTextLink.module.scss

@@ -0,0 +1,67 @@
+@use 'styles/theme' as theme;
+@use 'styles/spacing' as spacing;
+
+.iconTextContainer {
+	display: flex !important;
+	flex-direction: column !important;
+	align-items: center !important;
+	justify-content: center !important;
+	cursor: pointer;
+	position: relative;
+}
+
+.iconTextContainer.active::after {
+	content: "";
+	width: 100%;
+	height: 2px;
+	position: absolute;
+	left: 0;
+	bottom: -4px;
+	z-index: 2;
+	background-color: theme.$text-primary !important;
+}
+
+a.iconTextLink {
+	text-decoration: none;
+	color: inherit;
+}
+
+.iconText {
+	font-size: theme.$font-size-small;
+	@include spacing.mt(1, xs);
+}
+
+.iconPinContainer {
+	position: relative;
+}
+
+.pinWithText {
+	display : flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+	justify-content: center;
+	align-items: center;
+	position: absolute;
+	min-width: 20px;
+	height: 20px;
+	box-sizing: border-box;
+	border-radius: 10px;
+	transform: scale(1) translate(50%, -50%);
+	z-index: 2;
+	font-size: theme.$font-size-extra-small;
+	font-weight: theme.$font-weight-bold;
+	color: theme.$text-light;
+	background-color: theme.$cancel-primary;
+	padding: 0 6px;
+	top: 0;
+	right: 0;
+}
+
+.pin {
+	@extend .pinWithText;
+	min-width: 8px;
+	height: 8px;
+	right: 0;
+	top: 0;
+	padding: 0;
+}

package/src/components/action/icon_text_link/IconTextLink.stories.jsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { MemoryRouter } from "react-router-dom";
+import { IconTextLink } from './IconTextLink';
+import HomeIcon from './HomeIcon.dev'
+
+export default {
+    title: 'Action/Icon Text Link',
+    component: IconTextLink,
+    args: {
+        to: '/page',
+        icon: HomeIcon,
+        text: 'Home',
+        active: false,
+        pin: false,
+        pinText: '23'
+    },
+    argTypes: {
+        to: {
+            control: 'text'
+        },
+        text: {
+            control: 'text'
+        },
+        active: {
+            control: 'boolean'
+        },
+        pin: {
+            control: 'boolean'
+        },
+        pinText: {
+            control: 'text'
+        },
+        icon: {
+            control: false
+        }
+    },
+    render: (args) => (
+        <MemoryRouter>
+            <IconTextLink {...args} />
+        </MemoryRouter>
+    )
+};
+
+export const DefaultIconTextLink = {};

package/src/components/action/icon_text_link/IconTextLink.test.jsx

@@ -0,0 +1,134 @@
+import React from 'react';
+import { MemoryRouter } from 'react-router-dom';
+import { render, screen } from '@testing-library/react';
+import { IconTextLink } from './IconTextLink';
+
+describe('IconTextLink', () => {
+    it('renders IconTextLink with icon and text', () => {
+        const icon = () => <svg>SVG</svg>;
+        const text = 'Text';
+        const { getByText, getByTestId } = render(<IconTextLink icon={icon} text={text} />);
+        const iconTextContainer = getByTestId('iconTextContainer');
+        expect(iconTextContainer).toBeInTheDocument();
+        expect(getByText(text)).toBeInTheDocument();
+        expect(iconTextContainer).toContainElement(getByText(text));
+    });
+
+    it('renders IconTextLink with children', () => {
+        const children = <div data-testid='children'>Children</div>;
+        const text = 'Text';
+        const { getByTestId, getByText } = render(
+            <IconTextLink text={text}>{children}</IconTextLink>
+        );
+        const iconTextContainer = getByTestId('iconTextContainer');
+        expect(iconTextContainer).toBeInTheDocument();
+        expect(iconTextContainer).toContainElement(getByTestId('children'));
+        expect(getByText(text)).toBeInTheDocument();
+    });
+
+    it('renders Link with to prop and text', () => {
+        const to = '/home';
+        const text = 'Text';
+        const { getByText, getByTestId } = render(
+            <MemoryRouter>
+                <IconTextLink to={to} text={text} />
+            </MemoryRouter>
+        );
+        const iconTextContainer = getByTestId('iconTextLink');
+        expect(iconTextContainer).toBeInTheDocument();
+        expect(iconTextContainer).toHaveAttribute('href', '/home');
+        expect(getByText(text)).toBeInTheDocument();
+    });
+
+    it('renders IconTextLink with icon and pin', () => {
+        const icon = () => <svg>SVG</svg>;
+        const text = 'Text';
+        const { getByText, getByTestId } = render(
+            <IconTextLink icon={icon} text={text} pin={true} pinText={"I'm a pin"} />
+        );
+        const iconTextContainer = getByTestId('iconTextContainer');
+        expect(iconTextContainer).toBeInTheDocument();
+        expect(getByText(text)).toBeInTheDocument();
+        expect(iconTextContainer).toContainElement(getByText(text));
+        expect(screen.getByText("I'm a pin")).toBeTruthy();
+    });
+
+    it('renders IconTextLink with active state', () => {
+        const icon = () => <svg>SVG</svg>;
+        const text = 'Text';
+        const { getByTestId } = render(<IconTextLink icon={icon} text={text} active={true} />);
+        const iconTextContainer = getByTestId('iconTextContainer');
+        expect(iconTextContainer).toBeInTheDocument();
+        expect(iconTextContainer).toHaveClass('active');
+    });
+
+    it('renders Link with additional props', () => {
+        const to = '/home';
+        const text = 'Text';
+        const { getByText, getByTestId } = render(
+            <MemoryRouter>
+                <IconTextLink
+                    to={to}
+                    text={text}
+                    data-testid='iconTextLink'
+                    aria-label='Icon text link'
+                    className='foo'
+                />
+            </MemoryRouter>
+        );
+        const iconTextContainer = getByTestId('iconTextLink');
+        expect(iconTextContainer).toBeInTheDocument();
+        expect(iconTextContainer).toHaveAttribute('href', '/home');
+        expect(iconTextContainer).toHaveAttribute('data-testid', 'iconTextLink');
+        expect(iconTextContainer).toHaveAttribute('aria-label', 'Icon text link');
+        expect(iconTextContainer).toHaveClass('foo');
+        expect(getByText(text)).toBeInTheDocument();
+    });
+
+    it('renders IconTextLink', () => {
+        const icon = () => <svg>SVG</svg>;
+        const text = 'Text';
+        const { getByTestId } = render(<IconTextLink icon={icon} text={text} className='foo' />);
+        const iconTextContainer = getByTestId('iconTextContainer');
+        expect(iconTextContainer).toBeInTheDocument();
+    });
+
+    it('renders IconTextLink with custom styles', () => {
+        const icon = () => <svg>SVG</svg>;
+        const text = 'Text';
+        const { getByTestId } = render(
+            <IconTextLink icon={icon} text={text} style={{ color: 'red', fontWeight: 'bold' }} />
+        );
+        const iconTextContainer = getByTestId('iconTextContainer');
+        expect(iconTextContainer).toBeInTheDocument();
+        expect(iconTextContainer.style.color).toBe('red');
+        expect(['bold', '700']).toContain(iconTextContainer.style.fontWeight);
+    });
+
+    it('renders IconTextLink with pin and pin text', () => {
+        const icon = () => <svg>SVG</svg>;
+        const text = 'Text';
+        const pinText = "I'm a pin";
+        const { getByText, getByTestId } = render(
+            <IconTextLink icon={icon} text={text} pin={true} pinText={pinText} />
+        );
+        const iconTextContainer = getByTestId('iconTextContainer');
+        expect(iconTextContainer).toBeInTheDocument();
+        expect(getByText(text)).toBeInTheDocument();
+        expect(iconTextContainer).toContainElement(getByText(text));
+        expect(screen.getByText(pinText)).toBeTruthy();
+    });
+
+    it('renders IconTextLink without pin when pin prop is false', () => {
+        const icon = () => <svg>SVG</svg>;
+        const text = 'Text';
+        const { getByText, getByTestId, queryByText } = render(
+            <IconTextLink icon={icon} text={text} pin={false} pinText="I'm a pin" />
+        );
+        const iconTextContainer = getByTestId('iconTextContainer');
+        expect(iconTextContainer).toBeInTheDocument();
+        expect(getByText(text)).toBeInTheDocument();
+        expect(iconTextContainer).toContainElement(getByText(text));
+        expect(queryByText("I'm a pin")).toBeNull();
+    });
+});

package/src/components/action/icon_text_link/index.js

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

package/src/components/action/link/Link.docs.mdx

@@ -0,0 +1,23 @@
+---
+description: A link component without style.
+labels: ['link', 'router']
+---
+
+import { Link } from './Link';
+import { MemoryRouter } from "react-router-dom";
+
+A component that renders a link. Link uses react-router's Link component by default. If the _external_ prop is set to _true_, a simple anchor will be used, without the router.
+
+_to_ prop can be a string, an object or a function, as per react-router documentation : https://v5.reactrouter.com/web/api/Link
+
+### Component usage
+```js
+<MemoryRouter>
+    <Link 
+        to={link}
+        className={classNameToPass}
+    >
+        Link !
+    </Link>
+</MemoryRouter>
+```

package/src/components/action/link/Link.jsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { Link as RouterLink } from 'react-router-dom';
+import PropTypes from "prop-types";
+
+export const Link = ({ className, to, external, rel = "nofollow", target = "_self", children, ...rest }) => {
+    if(external) {
+        return (
+            <a 
+                href={to} 
+                className={className} 
+                role="link"
+                target={target} 
+                rel={rel} 
+                {...rest}
+            >
+                { children }
+            </a>
+        );
+    } else {
+        return (
+            <RouterLink 
+                to={to} 
+                role="link"
+                className={className} 
+                target={target} 
+                rel={rel} 
+                {...rest}
+            >
+                { children }
+            </RouterLink>
+        );
+    }
+}
+
+Link.propTypes = {
+    /** href, or object passed to react-router */
+    to: PropTypes.any,
+    /** Class name to style the link */
+    className: PropTypes.string,
+    /** If `true`, will render a plain anchor tag instead of react-router's Link */
+    external: PropTypes.bool,
+    /** rel HTML attribute  */
+    rel: PropTypes.string,
+    /**  target HTML attribute */
+    target: PropTypes.string,
+    /**  Content of the link */
+    children: PropTypes.node,
+    /** Extra props passed to the component */
+    rest: PropTypes.object
+};