@logora/debate 0.1.0

package/src/components/input/text_input/TextInput.module.scss

@@ -0,0 +1,146 @@
+@use 'styles/theme' as theme;
+@use 'styles/spacing' as spacing;
+
+.container {
+  position: relative;
+
+  // by default, the label shows at the top left corner of the input
+  label {
+    color: theme.$text-primary;
+    pointer-events: none;
+    transition: left 300ms, top 300ms, font-size 300ms, padding-top 300ms, transform 300ms, color 300ms,
+      background-color 300ms ease-in-out;
+    font-size: 0.8rem;
+    position: absolute;
+    top: -0.6em;
+    left: spacing.$spacer-md;
+    z-index: 1;
+    background-color: theme.$background-color-primary;
+    transform: unset;
+    padding: 0 spacing.$spacer-xxs;
+  }
+}
+
+.textInput {
+  width: 100%;
+  box-sizing: border-box;
+  outline: 0;
+  @include spacing.px(3, xs);
+  @include spacing.py(2.5, xs);
+  font-size: inherit;
+  font-family: inherit;
+  border: theme.$button-border;
+  border-radius: theme.$button-border-radius;
+  background-color: theme.$background-color-primary;
+  color: theme.$text-primary;
+
+  // when no content in the input and not focused, display the label as the placeholder
+  &:placeholder-shown:not(:focus) {
+    &~label {
+      transition: top 300ms, font-size 300ms, padding-top 300ms, transform 300ms, color 300ms ease-in-out;
+      top: 50%;
+      transform: translateY(-50%);
+      font-size: 1em;
+      background-color: unset;
+    }
+  }
+
+  // keep precedence! filled < hover < success < error < disabled
+  &.filled {
+    background-color: theme.$background-color-secondary;
+  }
+
+  &::placeholder {
+    color: theme.$text-secondary;
+  }
+
+  &:hover {
+    border: 1px solid theme.$text-secondary;
+  }
+
+  &:focus {
+    border: 1px solid theme.$text-secondary !important;
+    background-color: theme.$background-color-primary;
+
+    &~label {
+      color: theme.$text-secondary !important;
+    }
+  }
+
+  &.success {
+    border: 1px solid theme.$success-primary !important;
+
+    &~label {
+      color: theme.$success-primary;
+    }
+  }
+
+  &.error {
+    border: 1px solid theme.$cancel-primary !important;
+
+    &~label {
+      color: theme.$cancel-primary;
+    }
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    background-color: theme.$text-tertiary;
+    border: 1px solid theme.$darken-text-tertiary;
+
+    &~label {
+      color: theme.$darkest-text-tertiary;
+    }
+  }
+}
+
+.textInputWithRightIcon {
+  position: relative;
+  font-size: inherit;
+
+  .textInput {
+    padding-right: 2em !important;
+  }
+
+  // right icon element
+  > :last-child {
+    font-size: inherit;
+    color: inherit;
+    position: absolute;
+    right: spacing.$spacer-md;
+    top: calc(50% - 0.6rem);
+    width: 16px;
+  }
+}
+
+.textInputWithLeftIcon {
+  position: relative;
+  font-size: inherit;
+
+  .textInput {
+    padding-left: 2em !important;
+
+    &:placeholder-shown:not(:focus) {
+      &~label {
+        left: var(--spacer-md, calc(var(--space-unit, 1em) * 2));
+      }
+    }
+  }
+
+  // left icon element
+  > :first-child {
+    font-size: inherit;
+    color: inherit;
+    position: absolute;
+    left: spacing.$spacer-md;
+    top: calc(50% - 0.6rem);
+    width: 16px;
+    height: 16px;
+  }
+}
+
+.errorMessage {
+  font-size: 0.8em;
+  padding-top: spacing.$spacer-md;
+  color: theme.$cancel-primary;
+}

package/src/components/input/text_input/TextInput.stories.jsx

@@ -0,0 +1,101 @@
+export default {
+  title: 'Input/Text Input',
+  component: TextInput,
+  args: {
+    placeholder: 'enter text...',
+    activeLabel: true,
+    value: undefined,
+    filled: false,
+    error: false,
+    success: false,
+    disabled: false,
+    message: undefined
+  },
+  argTypes: {
+    placeholder: { control: 'text' },
+    activeLabel: { control: 'boolean' },
+    value: { control: 'text' },
+    filled: { control: 'boolean' },
+    error: { control: 'boolean' },
+    success: { control: 'boolean' },
+    disabled: { control: 'boolean' },
+    message: { control: 'text' }
+  }
+};
+
+import React from 'react';
+import { Announcement } from '@logora/debate/icons/regular_icons';
+import { TextInput } from './TextInput';
+
+export const BasicTextInput = () => <TextInput placeholder="enter text..." data-testid="test-input" />;
+
+export const TextInputWithoutLabel = () => (
+  <TextInput placeholder="enter text..." activeLabel={false} data-testid="test-input" />
+);
+
+export const FilledTextInput = () => <TextInput value="some text" filled data-testid="test-input" />;
+
+export const ErrorTextInput = () => <TextInput placeholder="placeholder" error data-testid="test-input" />;
+
+export const ErrorTextInputWithMessage = () => (
+  <TextInput placeholder="placeholder" error data-testid="test-input" message="error to be displayed under the input" />
+);
+
+export const SuccessTextInput = () => <TextInput placeholder="placeholder" success data-testid="test-input" />;
+
+export const DisabledTextInput = () => {
+  return <TextInput placeholder="placeholder..." disabled data-testid="test-input" />;
+};
+
+export const SmallTextInput = () => (
+  <TextInput style={{ fontSize: 12 }} placeholder="enter text..." data-testid="test-input" />
+);
+
+export const BigTextInput = () => (
+  <TextInput style={{ fontSize: 24 }} placeholder="enter text..." data-testid="test-input" />
+);
+
+export const SmallTextInputWithRightIcon = () => (
+  <TextInput
+    style={{ fontSize: 12 }}
+    placeholder="enter text..."
+    data-testid="test-input"
+    iconRight={<Announcement style={{ cursor: 'pointer' }} onClick={() => alert('on icon click')} />}
+  />
+);
+
+export const BigTextInputWithRightIcon = () => (
+  <TextInput
+    style={{ fontSize: 24 }}
+    placeholder="enter text..."
+    data-testid="test-input"
+    iconRight={<Announcement style={{ cursor: 'pointer' }} onClick={() => alert('on icon click')} />}
+  />
+);
+
+export const TextInputWithRightIcon = () => (
+  <TextInput
+    placeholder="search..."
+    iconRight={<Announcement style={{ cursor: 'pointer' }} onClick={() => alert('on icon click')} />}
+  />
+);
+
+export const TextInputWithImage = () => (
+  <TextInput
+    placeholder="search..."
+    iconRight={
+      <img
+        src="https://static.bit.dev/bit-icons/filter.svg"
+        style={{ cursor: 'pointer' }}
+        onClick={() => alert('on icon click')}
+      />
+    }
+  />
+);
+
+export const TextInputWithLeftIcon = () => (
+  <TextInput
+    placeholder="search..."
+    iconLeft={<Announcement style={{ cursor: 'pointer' }} onClick={() => alert('on icon click')} />}
+  />
+);

package/src/components/input/text_input/TextInput.test.jsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import {
+  BasicTextInput,
+  ErrorTextInput,
+  ErrorTextInputWithMessage,
+  SuccessTextInput,
+  DisabledTextInput,
+  TextInputWithImage,
+} from './TextInput.stories';
+
+describe('TextInput component', () => {
+  it('should render input correctly', () => {
+    const { getByTestId } = render(<BasicTextInput />);
+    const rendered = getByTestId('test-input');
+
+    expect(rendered).toBeInTheDocument();
+    expect(rendered.tagName).toBe('INPUT');
+  });
+
+  it('should not have error or success styles', () => {
+    const { getByTestId } = render(<BasicTextInput />);
+    const rendered = getByTestId('test-input');
+
+    expect(rendered.classList.contains('success')).toBeFalsy();
+    expect(rendered.classList.contains('error')).toBeFalsy();
+  });
+
+  it('should have error class', () => {
+    const { getByTestId } = render(<ErrorTextInput />);
+    const rendered = getByTestId('test-input');
+
+    expect(rendered.classList.contains('error')).toBeTruthy();
+  });
+
+  it('should have success class', () => {
+    const { getByTestId } = render(<SuccessTextInput />);
+    const rendered = getByTestId('test-input');
+
+    expect(rendered.classList.contains('success')).toBeTruthy();
+  });
+
+  it('should have disabled attribute', () => {
+    const { getByTestId } = render(<DisabledTextInput />);
+    const rendered = getByTestId('test-input');
+
+    expect(rendered.getAttribute('disabled')).toBe('');
+  });
+
+  it('should display error message', () => {
+    const { container } = render(<ErrorTextInputWithMessage />);
+
+    const rendered = container.getElementsByTagName('div')[1];
+    expect(rendered.textContent?.includes('error to be displayed under the input'));
+  });
+});
+
+describe('TextInput component with icon', () => {
+  it('should have img tag', () => {
+    const { container } = render(<TextInputWithImage />);
+
+    expect(container.querySelector('img')).toBeInTheDocument();
+  });
+});

package/src/components/input/text_input/color-accent.js

@@ -0,0 +1,16 @@
+import classNames from 'classnames';
+import styles from './TextInput.module.scss';
+
+export const getAccent = ({ error, success }) => {
+  return (
+    (error && classNames(styles.error)) ||
+    (success && classNames(styles.success))
+  );
+};
+
+export const classes = {
+    container: styles.container,
+    textInput: styles.textInput,
+    textInputWithIcon: styles.textInputWithIcon,
+    filled: styles.filled,
+  };

package/src/components/input/text_input/index.js

@@ -0,0 +1,3 @@
+export { TextInput } from './TextInput';
+export { getAccent, classes } from './color-accent';
+export { Message } from './message';

package/src/components/input/text_input/message.jsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import classnames from 'classnames';
+import styles from './TextInput.module.scss';
+
+export function Message({ message, className, ...rest }) {
+  if (!message) return null;
+  return (
+    <div {...rest} className={classnames(styles.errorMessage, className)}>
+      {message}
+    </div>
+  );
+}

package/src/components/input/toggle/Toggle.docs.mdx

@@ -0,0 +1,23 @@
+---
+description: A switch toggle input.
+labels: ['react', 'input', 'switch', 'toggle']
+---
+
+import { Toggle } from './Toggle';
+
+A switch toggle component with all the native options, based on [checkbox from base-ui](https://bit.cloud/logora/debate/input/checkbox/label) scope.  
+The size is based on `em` so we can change the size by changing the font-size.  
+Basic example:
+
+```js
+import { Toggle } from "@logora/debate.input.toggle"
+```
+```js live
+<Toggle />
+```
+
+Different size example:
+
+```js live
+<Toggle style={{ fontSize: 32 }} />
+```

package/src/components/input/toggle/Toggle.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import classNames from 'classnames';
+import { CheckboxLabel, Input } from '@logora/debate/input/checkbox/label';
+import styles from './Toggle.module.scss';
+
+export { Input };
+
+export function Toggle({ className, message, ...rest }) {
+  const indicator = <span className={styles.slider}></span>;
+  return (
+    <>
+      <div className={styles.toggleContainer}>
+        <CheckboxLabel className={classNames(styles.toggle, className)} indicator={indicator} {...rest} />
+        { rest.label &&
+          <span className={styles.toggleLabel}>{ rest.label }</span>
+        }
+      </div>
+      { message && 
+        <div className={styles.errorMessage}>
+          {message}
+        </div>
+      }
+    </>
+  );
+}

package/src/components/input/toggle/Toggle.module.scss

@@ -0,0 +1,73 @@
+@use "styles/theme" as theme;
+@use "styles/spacing" as spacing;
+
+.toggle {
+  display: inline-block;
+  width: 2em;
+  min-width: 2em;
+  height: 1em;
+  font-size: theme.$font-size-normal;
+}
+
+.toggleContainer {
+  display: flex;
+  align-items: center;
+}
+
+.toggleLabel {
+  @include spacing.ml(2, xs);
+}
+
+.slider {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: inline-block;
+  cursor: pointer;
+  background-color: theme.$darkest-text-tertiary;
+  -webkit-transition: 0.4s;
+  transition: 0.4s;
+  border-radius: 1em;
+  &:hover {
+    background-color: theme.$text-secondary;
+  }
+}
+
+.slider:before {
+  position: absolute;
+  content: '';
+  height: 0.75em;
+  width: 0.75em;
+  left: 0.125em;
+  bottom: 0.125em;
+  background-color: theme.$text-light !important;
+  transition: 0.4s;
+  border-radius: 50%;
+}
+
+input:disabled + .slider {
+  background-color: theme.$background-color-secondary !important;
+  cursor: not-allowed;
+}
+
+input:checked + .slider {
+  background-color: theme.$call-primary !important;
+}
+
+input:checked:disabled + .slider {
+  background-color: theme.$darken-text-tertiary !important;
+}
+
+input:checked + .slider:before {
+  transform: translateX(1em);
+}
+
+input:focus + .slider {
+  box-shadow: 0 0 0 0.125em theme.$darken-text-tertiary;
+}
+
+.errorMessage {
+  font-size: 0.8em;
+  padding-top: spacing.$spacer-md;
+  color: theme.$cancel-primary;
+}

package/src/components/input/toggle/Toggle.stories.jsx

@@ -0,0 +1,42 @@
+export default {
+  title: 'Input/Toggle',
+  component: Toggle,
+  args: {
+    label: undefined,
+    message: undefined,
+    disabled: false,
+    checked: false
+  },
+  argTypes: {
+    label: { control: 'text' },
+    message: { control: 'text' },
+    disabled: { control: 'boolean' },
+    checked: { control: 'boolean' }
+  }
+};
+
+import React from 'react';
+import { Toggle } from './Toggle';
+
+export function BasicToggle() {
+  return <Toggle onInputChanged={(e) => console.log('e', e.target.checked)} />;
+}
+
+export function ToggleWithLabel() {
+  return (
+    <Toggle label={"Yes or no ?"} onInputChanged={(e) => console.log('e', e.target.checked)} />
+  );
+}
+
+export function DisabledToggle() {
+  return <Toggle disabled />;
+}
+
+export function DisabledAndCheckedToggle() {
+  return <Toggle disabled checked />;
+}
+
+export function ToggleWithErrorMessage() {
+  return <Toggle label={"Yes or no ?"} message={"Error !"} />;
+}
+

package/src/components/input/toggle/Toggle.test.jsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { DisabledToggle, DisabledAndCheckedToggle, ToggleWithLabel, ToggleWithErrorMessage } from './Toggle.stories';
+
+describe('Toggle', () => {
+  it('should render the toggle with disabled and unchecked options', () => {
+    const { container } = render(<DisabledToggle />);
+    const inputElement = container.querySelector('input');
+
+    expect(inputElement).not.toBeNull();
+    expect(inputElement?.disabled).toEqual(true);
+    expect(inputElement?.checked).toEqual(false);
+  });
+
+  it('should render the toggle with disabled and checked options', () => {
+    const { container } = render(<DisabledAndCheckedToggle />);
+    const inputElement = container.querySelector('input');
+
+    expect(inputElement).not.toBeNull();
+    expect(inputElement?.disabled).toEqual(true);
+    expect(inputElement?.checked).toEqual(true);
+  });
+
+  it('should render the toggle with text', () => {
+    const { container } = render(<ToggleWithLabel />);
+    const inputElement = container.querySelector('input');
+
+    expect(screen.getByText("Yes or no ?")).toBeTruthy();
+    expect(inputElement).not.toBeNull();
+  });
+
+  it('should render the toggle with a message', () => {
+    const { container } = render(<ToggleWithErrorMessage />);
+    const inputElement = container.querySelector('input');
+
+    expect(screen.getByText("Error !")).toBeTruthy();
+    expect(inputElement).not.toBeNull();
+  });
+});

package/src/components/input/toggle/index.js

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

package/src/components/input/toggle_position/TogglePosition.docs.mdx

@@ -0,0 +1,20 @@
+---
+description: A toggle with labels.
+---
+
+import { TogglePosition } from './TogglePosition';
+
+A toggle with two labels.
+
+### Component usage
+```js
+import { TogglePosition } from '@logora/debate.input.toggle_position';
+```
+```js
+    <TogglePosition 
+        activeLabel={0}
+        firstLabel={"Yes"}
+        secondLabel={"No"}
+        onChange={(label) => label}
+    />
+```

package/src/components/input/toggle_position/TogglePosition.jsx

@@ -0,0 +1,55 @@
+import React, { useState, useEffect } from 'react';
+import { TranslatedContent } from '@logora/debate/translation/translated_content';
+import PropTypes from "prop-types";
+import styles from './TogglePosition.module.scss';
+import cx from "classnames";
+
+export const TogglePosition = ({ activeLabel, firstLabel, firstLabelClassName = styles.firstLabelDefault, secondLabel, secondLabelClassName = styles.secondLabelDefault, onChange }) => {
+    const [activatedLabel, setActivatedLabel] = useState(activeLabel);
+
+    useEffect(() => {
+        setActivatedLabel(activeLabel)
+    }, [activeLabel])
+
+    const labelChoice = (labelIndex) => {
+        setActivatedLabel(labelIndex);
+        onChange(labelIndex);
+    }
+
+    return (
+        <div className={styles.container}>
+            <div data-testid={"firstLabel"} onClick={() => labelChoice(0)} className={cx(styles.label, { [styles.labelActive]: activatedLabel === 0, [firstLabelClassName]: activatedLabel === 0 })}>
+                <TranslatedContent
+                    originalContent={firstLabel.name}
+                    originalLanguage={firstLabel.language}
+                    targetField={"name"}
+                    translations={firstLabel.translation_entries}
+                />
+            </div>
+            <div data-testid={"secondLabel"} onClick={() => labelChoice(1)} className={cx(styles.label, { [styles.labelActive]: activatedLabel === 1, [secondLabelClassName]: activatedLabel === 1 })}>
+                <TranslatedContent
+                    originalContent={secondLabel.name}
+                    originalLanguage={secondLabel.language}
+                    targetField={"name"}
+                    translations={secondLabel.translation_entries}
+                />
+
+            </div>
+        </div>
+    )
+}
+
+TogglePosition.propTypes = {
+    /** Index of the active label, 0 (first label) or 1 (second label) */
+    activeLabel: PropTypes.number,
+    /** First label object */
+    firstLabel: PropTypes.object,
+    /** CSS class name of the first label */
+    firstLabelClassName: PropTypes.string,
+    /** Second label object */
+    secondLabel: PropTypes.object,
+    /** CSS class name of the second label */
+    secondLabelClassName: PropTypes.string,
+    /** Callback for active position */
+    onChange: PropTypes.func.isRequired,
+};

package/src/components/input/toggle_position/TogglePosition.module.scss

@@ -0,0 +1,46 @@
+@use 'styles/theme' as theme;
+@use 'styles/spacing' as spacing;
+
+.container {
+    display: flex;
+    flex-wrap: wrap;
+    @include spacing.p(1, xs);
+    width: fit-content;
+    gap: spacing.$spacer;
+}
+
+.label {
+    font-size: theme.$font-size-small;
+    color: theme.$text-primary;
+    cursor: pointer;
+    border-radius: theme.$box-border-radius;
+    font-weight: theme.$font-weight-bold;
+    transition: all .3s ease-in;
+    border: 1px solid theme.$darkest-text-tertiary;
+    @include spacing.py(1.5, xs);
+    @include spacing.px(2.5, xs);
+}
+
+.labelActive {
+    color: theme.$text-light;
+    opacity: 1;
+    cursor: default;
+}
+
+.labelDisabled {
+    display: none;
+}
+
+.firstLabelDefault {
+    background-color: theme.$for-primary;
+    &.labelActive {
+        border-color: theme.$for-primary;
+    }
+}
+
+.secondLabelDefault {
+    background-color: theme.$against-primary;
+    &.labelActive {
+        border-color: theme.$against-primary;
+    }
+}