@logora/debate 0.1.0 → 0.2.0

package/.storybook/main.mjs

@@ -1,47 +0,0 @@
-import path from 'node:path';
-import { fileURLToPath } from 'node:url';
-
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
-
-export default {
-  stories: ['../src/components/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
-  addons: [
-    '@storybook/addon-a11y'
-  ],
-  framework: {
-    name: '@storybook/react-vite',
-    options: {}
-  },
-  async viteFinal(config) {
-    config.resolve = config.resolve || {};
-    const existingAlias = Array.isArray(config.resolve.alias)
-      ? config.resolve.alias
-      : config.resolve.alias
-        ? [config.resolve.alias]
-        : [];
-    config.resolve.alias = [
-      ...existingAlias,
-      {
-        find: /^@logora\/debate$/,
-        replacement: path.resolve(__dirname, '../src/index.js')
-      },
-      {
-        find: /^@logora\/debate\/(.+)$/,
-        replacement: path.resolve(__dirname, '../src/components/$1/index.js')
-      }
-    ];
-
-    config.css = config.css || {};
-    config.css.preprocessorOptions = config.css.preprocessorOptions || {};
-    const existingScss = config.css.preprocessorOptions.scss || {};
-    const loadPaths = Array.isArray(existingScss.loadPaths)
-      ? existingScss.loadPaths
-      : [];
-    config.css.preprocessorOptions.scss = {
-      ...existingScss,
-      loadPaths: [...loadPaths, path.resolve(__dirname, '../src/components')]
-    };
-    return config;
-  }
-};

package/.storybook/preview.js

@@ -1,11 +0,0 @@
-export default {
-  parameters: {
-    controls: {
-      matchers: {
-        color: /(background|color)$/i,
-        date: /Date$/i
-      }
-    },
-    layout: 'centered'
-  }
-};

package/src/components/action/back_link/BackLink.docs.mdx

@@ -1,25 +0,0 @@
----
-description: A back link component.
-labels: ['link', 'back-link', 'react-router']
----
-
-import { BackLink } from './BackLink';
-
-A button that opens a link with back arrow and text.
-Props can be passed to the underlying [Link](https://bit.cloud/logora/debate/action/link) component to have an external link or a link from react-router.
-
-It should be inside [IconProvider](https://bit.cloud/logora/debate/icons/icon_provider).
-
-
-### Component usage
-
-```js
-import { BackLink } from '@logora/debate.action.back_link';
-```
-
-```js
-<BackLink
-    to="https://example.com/source-link"
-    text="Back to article"
-/>
-```

package/src/components/action/back_link/BackLink.jsx

@@ -1,30 +0,0 @@
-import React from 'react';
-import { Link } from '@logora/debate/action/link';
-import { Icon } from "@logora/debate/icons/icon";
-import cx from 'classnames';
-import styles from './BackLink.module.scss';
-import PropTypes from "prop-types";
-
-export const BackLink = ({ to, text, external = true, className, ...rest }) => {
-    return (
-        <Link to={to} className={cx(className, styles.backLink)} external={external} {...rest}>
-            <Icon name="arrow" height={24} width={24} />
-            <span className={styles.arrowIcon}>
-                { text }
-            </span>
-        </Link>
-    );
-}
-
-BackLink.propTypes = {
-    /** href, or object passed to the link */
-    to: PropTypes.any.isRequired,
-    /** Link text */
-    text: PropTypes.string.isRequired,
-    /** If `true`, will render a plain anchor tag instead of react-router's Link */
-    external: PropTypes.bool,
-    /**  Class name to style the link */
-    className: PropTypes.string,
-    /** Extra props passed to the link */
-    rest: PropTypes.object
-};

package/src/components/action/back_link/BackLink.module.scss

@@ -1,34 +0,0 @@
-@use 'styles/theme' as theme;
-@use 'styles/spacing' as spacing;
-
-a.backLink {
-    display: flex !important;
-    align-items: center !important;
-    font-weight: theme.$font-weight-normal;
-    font-size: theme.$font-size-small;
-    color: theme.$text-secondary;
-    text-decoration: none !important;
-    svg {
-        fill: theme.$text-secondary;
-        fill-rule: evenodd;
-    }
-    &:hover {
-        color: theme.$text-primary;
-        text-decoration: none;
-    
-        svg {
-            fill: theme.$text-primary;
-            fill-rule: evenodd;
-        }
-    }
-    &:focus {
-        border: none;
-    }
-    &:active {
-        border: none;
-    }
-}
-
-.arrowIcon {
-    @include spacing.ml(2, xs);
-}

package/src/components/action/back_link/BackLink.stories.jsx

@@ -1,28 +0,0 @@
-import React from 'react';
-import { BackLink } from './BackLink';
-import { IconProvider } from '@logora/debate/icons/icon_provider';
-import * as regularIcons from '@logora/debate/icons/regular_icons';
-
-export default {
-    title: 'Action/Back Link',
-    component: BackLink,
-    args: {
-        to: '#',
-        text: 'Back to article'
-    },
-    argTypes: {
-        to: {
-            control: 'text'
-        },
-        text: {
-            control: 'text'
-        }
-    },
-    render: (args) => (
-        <IconProvider library={regularIcons}>
-            <BackLink {...args} />
-        </IconProvider>
-    )
-};
-
-export const DefaultBackLink = {};

package/src/components/action/back_link/BackLink.test.jsx

@@ -1,105 +0,0 @@
-import React from 'react';
-import { render, screen, fireEvent } from '@testing-library/react';
-import { BackLink } from './BackLink';
-import { IconProvider } from '@logora/debate/icons/icon_provider';
-import * as regularIcons from '@logora/debate/icons/regular_icons';
-
-describe('BackLink', () => {
-    it('should render with correct text', () => {
-        const container = render(
-            <IconProvider library={regularIcons}>
-                <BackLink text='Back to source' to='https://example.com/share-link' />
-            </IconProvider>
-        );
-        expect(screen.getByText('Back to source')).toBeTruthy();
-    });
-
-    it('should render with correct link', () => {
-        const container = render(
-            <IconProvider library={regularIcons}>
-                <BackLink text='Back to source' to='https://example.com/share-link' />
-            </IconProvider>
-        );
-        const link = screen.getByRole('link');
-        expect(link).toHaveAttribute('href', 'https://example.com/share-link');
-    });
-
-    it('should call onClick handler', () => {
-        const onClick = vi.fn();
-        render(
-            <IconProvider library={regularIcons}>
-                <BackLink
-                    text='Back to source'
-                    to='https://example.com/share-link'
-                    onClick={onClick}
-                />
-            </IconProvider>
-        );
-
-        const link = screen.getByRole('link');
-        fireEvent.click(link);
-        expect(onClick).toHaveBeenCalled();
-    });
-
-    it('should render with correct className', () => {
-        render(
-            <IconProvider library={regularIcons}>
-                <BackLink text='Back to source' to='https://example.com/share-link' className='foo' />
-            </IconProvider>
-        );
-        const link = screen.getByRole('link');
-        expect(link).toHaveClass('foo');
-    });
-
-    it('should render without duplicate className', () => {
-        render(
-            <IconProvider library={regularIcons}>
-                <BackLink
-                    text='Back to source'
-                    to='https://example.com/share-link'
-                    className='foo foo bar'
-                />
-            </IconProvider>
-        );
-        const link = screen.getByRole('link');
-        const classList = Array.from(link.classList);
-        const unique = classList.filter((v, i, a) => a.indexOf(v) === i);
-
-        expect(classList.length).toEqual(unique.length);
-    });
-
-    it('should render with additional props', () => {
-        render(
-            <IconProvider library={regularIcons}>
-                <BackLink
-                    text='Back to source'
-                    to='https://example.com/share-link'
-                    data-testid='back-link'
-                    aria-label='Go back to the source'
-                />
-            </IconProvider>
-        );
-
-        const link = screen.getByRole('link');
-        expect(link).toHaveAttribute('data-testid', 'back-link');
-        expect(link).toHaveAttribute('aria-label', 'Go back to the source');
-    });
-
-    it('should render with custom styles', () => {
-        render(
-            <IconProvider library={regularIcons}>
-                <BackLink
-                    text='Back to source'
-                    to='https://example.com/share-link'
-                    className='custom-link'
-                    style={{ color: 'red', fontWeight: 'bold' }}
-                />
-            </IconProvider>
-        );
-
-        const link = screen.getByRole('link');
-        expect(link).toHaveClass('custom-link');
-        expect(link.style.color).toBe('red');
-        expect(['bold', '700']).toContain(link.style.fontWeight);
-    });
-});

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

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

package/src/components/action/button/Button.docs.mdx

@@ -1,43 +0,0 @@
----
-description: A Button component.
-labels: ['button', 'link']
----
-
-import { Button } from './Button';
-
-A component that renders a clickable button. The button comes with different styles and the possibility to add icons.
-It can also become a link, with the *to* property.
-
-### Component usage
-
-To import the Button component:
-
-```js
-import { Button } from '@logora/debate.action.button';
-```
-
-To use the Button component:
-
-```js
-<Button 
-    active={true} 
-    leftIcon={<i>Left Icon</i>}
-    rightIcon={<i>Right Icon</i>}  
-    accent="success"
-    handleClick={clickCallbackFunction} 
-    className={classNameToPass}
->
-    Click !
-</Button>
-```
-
-To use the Button component as a link:
-
-```js
-<Button 
-    to={link}
-    external={false}
->
-    Click !
-</Button>
-```

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

@@ -1,60 +0,0 @@
-import React from 'react';
-import { IconProvider } from '@logora/debate/icons/icon_provider';
-import * as regularIcons from '@logora/debate/icons/regular_icons';
-import { Icon } from '@logora/debate/icons/icon';
-import { Button } from './Button';
-import { MemoryRouter } from "react-router-dom";
-
-export const ActiveButton = () => {
-    return <Button active handleClick={() => null}>Active</Button>;
-};
-
-export const InactiveButton = () => {
-    return <Button active={false} handleClick={null}>Inactive</Button>;
-};
-
-export const ButtonWithLeftIcon = () => {
-    return <IconProvider library={regularIcons}><Button leftIcon={<Icon name="home" />} handleClick={null}>Home</Button></IconProvider>;
-};
-
-export const ButtonWithRightIcon = () => {
-    return <IconProvider library={regularIcons}><Button rightIcon={<Icon name="send" />} handleClick={null}>Home</Button></IconProvider>;
-};
-
-export const ButtonWithIconOnly = () => {
-    return <IconProvider library={regularIcons}><Button leftIcon={<Icon name="home" />} handleClick={null} /></IconProvider>;
-};
-
-export const ButtonWithSuccessAccent = () => {
-    return <Button accent="success" handleClick={null}>Success</Button>;
-};
-
-export const ButtonWithDangerAccent = () => {
-    return <Button accent="danger" handleClick={null}>Danger</Button>;
-};
-
-export const ButtonDisabledWithoutBorder = () => {
-    return <Button border={false} disabled>Disabled</Button>;
-};
-
-export const ButtonWithoutBorder = () => {
-    return <Button border={false} handleClick={null} active>No border</Button>;
-};
-
-export const ButtonWithLink = () => {
-    return (
-        <MemoryRouter>
-            <Button to="/page">Link button</Button>
-        </MemoryRouter>
-    );
-};
-
-export const ButtonWithLinkAndIcon = () => {
-    return (
-        <IconProvider library={regularIcons}>
-            <MemoryRouter>
-                <Button rightIcon={<Icon name="send" />} to="/page">Link button</Button>
-            </MemoryRouter>
-        </IconProvider>
-    );
-};

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

@@ -1,88 +0,0 @@
-import React from 'react';
-import classnames from 'classnames';
-import styles from './Button.module.scss'
-import PropTypes from "prop-types";
-import { Link } from '@logora/debate/action/link';
-
-export const Button = ({ className, type = "button", active, leftIcon, rightIcon, accent, border = true, handleClick, to, external, children, ...rest }) => {
-  const onClick = (event) => {
-      handleClick && handleClick(event);
-  }
-
-  return (
-    <>
-      {to ?
-        <Link 
-          to={to} 
-          tabIndex={0}
-          className={classnames(
-            styles.primaryButton,
-            className, 
-            (leftIcon || rightIcon) && !children && styles.iconOnly,
-            (leftIcon || rightIcon) && styles.withIcon,
-            leftIcon && styles.withLeftIcon,
-            rightIcon && styles.withRightIcon,
-            active && styles.active,
-            !border && styles.withoutBorder,
-            styles[accent],
-          )}
-          external={external}
-          {...rest}
-        >
-          { leftIcon }
-          { children }
-          { rightIcon }
-        </Link>
-      :
-        <button 
-          type={type} 
-          tabIndex={0}
-          className={classnames(
-            styles.primaryButton,
-            className, 
-            (leftIcon || rightIcon) && !children && styles.iconOnly,
-            (leftIcon || rightIcon) && styles.withIcon,
-            leftIcon && styles.withLeftIcon,
-            rightIcon && styles.withRightIcon,
-            active && styles.active,
-            !border && styles.withoutBorder,
-            styles[accent],
-          )} 
-          onClick={onClick} 
-          {...rest}
-        >
-            { leftIcon }
-            { children }
-            { rightIcon }
-        </button>
-      }
-    </>
-  );
-}
-
-Button.propTypes = {
-  /** The type of the button (e.g. 'button', 'submit') */
-  type: PropTypes.string,
-  /** The active state of the button */
-  active: PropTypes.bool,
-  /** Left icon displayed inside the button  */
-  leftIcon: PropTypes.node,
-  /**  Right icon displayed inside the button */
-  rightIcon: PropTypes.node,
-  /**  Color accent of the button, can be `success` or `danger` */
-  accent: PropTypes.string,
-  /**  Whether to show the border */
-  border: PropTypes.bool,
-  /**  Callback function for the onClick event. */
-  handleClick: PropTypes.func,
-  /**  Class name to style the button */
-  className: PropTypes.string,
-  /** href, or object passed to react-router's Link */
-  to: PropTypes.any,
-  /** If `true`, will render a plain anchor tag instead of react-router's Link */
-  external: PropTypes.bool,
-  /**  Content of the button */
-  children: PropTypes.node,
-  /** Extra props passed to the button */
-  rest: PropTypes.object
-};

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

@@ -1,133 +0,0 @@
-@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

@@ -1,54 +0,0 @@
-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'
-  }
-};