loon-bulma-react 2025.0.34 → 2025.1.0

package/lib/components/Pagination/Pagination.tsx

@@ -0,0 +1,143 @@
+import { faBackwardFast, faBackwardStep, faForwardStep, faForwardFast } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { getSizeClass } from '@lib/internal_functions';
+import { SizeProp } from '@lib/types';
+
+type PaginationProps = {
+  /** current selected page number */ currentPage: number;
+  /** range to render bijvoorbeeld van de  `usePagination()`-hook. Bestaat uit numbers en `'dots'` op de plekken waar puntjes moeten komen
+   * @example const range = [1, 'dots', 6, 7, 8, 'dots', 100] */
+  range: Array<number | 'dots'>;
+  /** grootte van de pagination buttons (default = `s`) */
+  size?: SizeProp;
+  /** verberg de `vorige-pagina`-button (default = `false)` */
+  hidePrev?: boolean;
+  /** verberg de `volgende-pagina`-button (default = `false)` */
+  hideNext?: boolean;
+  /** verberg de `eerste pagina`-button (default = `false)` */
+  hideFirst?: boolean;
+  /** verberg de `laatste-pagina`-button (default = `false)` */
+  hideLast?: boolean;
+  /** verberg de `1, 2, 3,`-buttons (default = `false)` */
+  hideNumbers?: boolean;
+
+  /** function om de pagina te setten */
+  set?: (page: number) => void;
+  /** function om de currentPage op de eerste pagina te setten */
+  first?: () => void;
+  /** function om de currentPage op de laatste pagina te setten */
+  last?: () => void;
+  /** function om de currentPage op vorige pagina te setten */
+  prev?: () => void;
+  /** function om de currentPage op volgende pagina te setten */
+  next?: () => void;
+};
+
+/**
+ * Pagination component voor gebruik met de `usePagination()`-hook.
+ * @example
+ * const data: Data[] = createArrayWithRandomDataOfLength(1000);
+ * const maxRows = 20;
+ * const { range, active, next, prev, first, last, setPage } = usePagination({
+ *    total: Math.ceil(data.length / maxRows),
+ *  });
+ *
+ * return <Pagination range={range} currentPage={currentPage} next={next} prev={prev} first={first} last={last} set={set} />
+ * @param range - array met de pagina-nummers die getoond moeten worden OF `'dots'` waar de puntjes moeten komen
+ * @param currentPage - huidige pagina
+ * @param size - grootte van de pagination
+ * @param hidePrev - verberg de vorige-pagina knop
+ * @param hideNext - verberg de volgende-pagina knop
+ * @param hideFirst - verberg de eerste-pagina knop
+ * @param hideLast - verberg de laatste-pagina knop
+ * @param hideNumbers - verberg de pagina-nummers
+ * @param set - functie die wordt aangeroepen als er op een pagina-nummer wordt geklikt
+ * @param first - functie die wordt aangeroepen als er op de eerste-pagina knop wordt geklikt
+ * @param last - functie die wordt aangeroepen als er op de laatste-pagina knop wordt geklikt
+ * @param prev - functie die wordt aangeroepen als er op de vorige-pagina knop wordt geklikt
+ * @param next - functie die wordt aangeroepen als er op de volgende-pagina knop wordt geklikt
+ */
+function Pagination({
+  range,
+  currentPage,
+  size = 's',
+  hideFirst = false,
+  hideLast = false,
+  hidePrev = false,
+  hideNext = false,
+  hideNumbers = false,
+  set = (x: number) => {},
+  first = () => {},
+  last = () => {},
+  prev = () => {},
+  next = () => {},
+}: PaginationProps) {
+  let className = `pagination ${getSizeClass(size, true)}`;
+
+  return (
+    <div className={className}>
+      <ul className="pagination-list">
+        {!hideFirst && (
+          <li>
+            <button className="pagination-link" aria-label="eerste pagina" onClick={first} disabled={currentPage === range[0]}>
+              <FontAwesomeIcon icon={faBackwardFast} />
+            </button>
+          </li>
+        )}
+
+        {!hidePrev && (
+          <li>
+            <button className="pagination-link" aria-label="vorige pagina" onClick={prev} disabled={currentPage === range[0]}>
+              <FontAwesomeIcon icon={faBackwardStep} />
+            </button>
+          </li>
+        )}
+
+        {!hideNumbers &&
+          range.map((r: number | 'dots', i) => {
+            if (r === 'dots')
+              return (
+                <li key={r + i}>
+                  <span className="pagination-ellipsis">&hellip;</span>
+                </li>
+              );
+            else if (r !== currentPage)
+              return (
+                <li key={r}>
+                  <button className="pagination-link" aria-label={`Goto page ${r}`} onClick={() => set(r)}>
+                    {r}
+                  </button>
+                </li>
+              );
+            else
+              return (
+                <li key={r}>
+                  <button className="pagination-link is-current" aria-label={`Goto page ${r}`} onClick={() => set(r)}>
+                    {r}
+                  </button>
+                </li>
+              );
+          })}
+
+        {!hideNext && (
+          <li>
+            <button className="pagination-link" aria-label="volgende paginga" onClick={next} disabled={currentPage === range[range.length - 1]}>
+              <FontAwesomeIcon icon={faForwardStep} />
+            </button>
+          </li>
+        )}
+
+        {!hideLast && (
+          <li>
+            <button className="pagination-link" aria-label="laatste pagina" onClick={last} disabled={currentPage === range[range.length - 1]}>
+              <FontAwesomeIcon icon={faForwardFast} />
+            </button>
+          </li>
+        )}
+      </ul>
+    </div>
+  );
+}
+
+export { Pagination };
+export type { PaginationProps };

package/lib/components/Panel/Panel.tsx

@@ -0,0 +1,225 @@
+import { IconProp } from '@fortawesome/fontawesome-svg-core';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { InputValueType, InputPropsType, InputStylingPropsType, FOCUS_HELP_TIMEOUT_IN_MS, BaseInput } from '@lib/forms/Input';
+import { getColorClass, createIconsINTERNAL } from '@lib/internal_functions';
+import { ColorProp, PrettierType, StrictOmit } from '@lib/types';
+import { OR } from '@lib/utils/operators';
+import React from 'react';
+
+type PanelProps = {
+  /** de kleur van het Panel (default = `i`) */
+  color?: ColorProp | undefined;
+  /** panel-children */
+  children?: React.ReactNode | undefined;
+  className?: string | undefined;
+};
+
+type PanelItemProps = {
+  /** Is dit panel item active? */
+  active?: boolean;
+  /** Is dit panel item disabled? */
+  disabled?: boolean;
+  /** Icon van het panel item (optioneel) */
+  icon?: string | IconProp;
+  /** content van het panelitem */
+  children: React.ReactNode;
+  /** Functie die wordt aangeroepen als er op het panel item wordt geklikt */
+  onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
+};
+
+type PanelTabsProps = {
+  /** Tabs van het panel, voor als je niet de `tabs`-prop wilt gebruikten */
+  children?: React.ReactNode | undefined;
+  /** wat is de active tab? */
+  activeTab?: string | undefined;
+  /** Functie die wordt aangeroepen als er op een tab wordt geklikt */
+  onTabChange?: (tab: string) => void | undefined;
+  /** Array van tabs, voor als je geen children wilt gebruiken */
+  tabs?: string[] | Array<{ label: string; value: string; disabled?: boolean }> | undefined;
+};
+
+type PanelTabItemProps = {
+  /** is dit tab-item active? */
+  active?: boolean;
+  /** is dit tab-item disabled? */
+  disabled?: boolean;
+  /** Functie die wordt aangeroepen als er op het tab-item wordt geklikt */
+  onClick?: () => void;
+  /** content van het tab-item */
+  children: React.ReactNode;
+};
+
+type PanelInputProps<T extends InputValueType> = PrettierType<
+  StrictOmit<InputPropsType<T>, 'optionList' | 'name'> &
+    StrictOmit<InputStylingPropsType, 'labelHidden' | 'direction' | 'icon'> & {
+      icon?: string | IconProp | undefined;
+      infoData?: string | React.ReactNode | ((helptag?: string | undefined) => void) | undefined;
+      name?: string | undefined;
+    }
+>;
+
+/**
+ * Een panel is een soort menu
+ * @example
+ *  <Panel color={panelTab}>
+ *    <Panel.Header>Panel header</Panel.Header>
+ *    <Panel.Item>Hieronder staan tabs. Verander het kleurtje</Panel.Item>
+ *    <Panel.Tabs tabs={panelTabs} activeTab={panelTab} onTabChange={handleChangeActivePanelTab}>
+ *      <Panel.TabItem disabled onClick={() => console.log('Woohoo!')}>
+ *        WOOHOO
+ *      </Panel.TabItem>
+ *    </Panel.Tabs>
+ *    <Panel.Item>Dit is een Panel Item</Panel.Item>
+ *    <Panel.Item active>Dit is een active Panel Item</Panel.Item>
+ *    <Panel.Item disabled>Dit is een disabled Panel Item</Panel.Item>
+ *    <Panel.Item onClick={() => console.log('clickable panel item clicked')}>
+ *      Dit is een klikbaar Panel Item
+ *    </Panel.Item>
+ *
+ *    <Panel.Header>Panel header in het midden</Panel.Header>
+ *    <Panel.Item icon={faBomb}>Dit is ook een Panel Item, maar met icon</Panel.Item>
+ *    <Panel.Item icon={faBomb} active>
+ *      Dit is ook een active Panel Item
+ *    </Panel.Item>
+ *    <Panel.Item onClick={() => console.log('clickable panel item clicked')} icon={faFire}>
+ *      Dit is een klikbaar Panel Item
+ *    </Panel.Item>
+ *    <Panel.Item icon={faBomb} disabled>
+ *      Dit is een disabled item
+ *    </Panel.Item>
+ *    <Panel.Header>Panel header an het end</Panel.Header>
+ *  </Panel>
+ */
+const Panel = ({ color = 'i', className: cnProp = '', children }: PanelProps) => {
+  let className = 'panel';
+  className += getColorClass(color);
+  if (cnProp) className += ` ${cnProp}`;
+
+  return <div className={className}>{children}</div>;
+};
+
+/** weergeven van tabs op het panel */
+Panel.Tabs = ({ tabs, activeTab, onTabChange, children }: PanelTabsProps) => (
+  <div className="panel-tabs">
+    {/* Als we tabs hebben gedefinieerd, maekn we die aan  */}
+    {tabs?.map((tab) => {
+      let label = typeof tab === 'string' ? tab : tab.label;
+      let value = typeof tab === 'string' ? tab : tab.value;
+      let isDisabled = typeof tab === 'string' ? false : (tab.disabled ?? false);
+      let className = 'panel-tab-item';
+      if (activeTab === value) className += ' is-active';
+      if (isDisabled) className += ' is-disabled';
+      else className += ' is-clickable';
+
+      return (
+        <span key={value} className={className} onClick={() => onTabChange && !isDisabled && onTabChange(value)}>
+          {label}
+        </span>
+      );
+    })}
+    {/* Print de children, als die er zijn */}
+    {children}
+  </div>
+);
+
+/** weergeven van een tab-item */
+Panel.TabItem = ({ active = false, disabled = false, onClick, children }: PanelTabItemProps) => {
+  let className = 'panel-tab-item';
+  if (active) className += ' is-active';
+  if (disabled) className += ' is-disabled';
+  else if (onClick) className += ' is-clickable';
+
+  function handleClick() {
+    if (disabled) return;
+    onClick && onClick();
+  }
+
+  return (
+    <span className={className} onClick={handleClick}>
+      {children}
+    </span>
+  );
+};
+
+/** weergeven van een header van de tab. Kan ook middenin het panel gebruikt worden */
+Panel.Header = ({ children }: { children: React.ReactNode }) => <div className="panel-heading">{children}</div>;
+
+/** weergeven van een item in het panel */
+Panel.Item = ({ icon, active = false, disabled = false, children, onClick }: PanelItemProps) => {
+  let className = 'panel-block';
+  if (active) className += ' is-active';
+  if (disabled) className += ' is-disabled';
+  else if (onClick) className += ' is-clickable';
+
+  function handleClick(e: React.MouseEvent<HTMLDivElement>) {
+    if (disabled) return;
+    onClick && onClick(e);
+  }
+
+  return (
+    <div className={className} onClick={handleClick}>
+      {icon && <span className="panel-icon">{typeof icon === 'string' ? <i className={icon}></i> : <FontAwesomeIcon icon={icon} />}</span>}
+      {children}
+    </div>
+  );
+};
+
+/** Een input op het panel */
+Panel.Input = PanelInput;
+function PanelInput({ icon, id: idProp, infoData, helpTag, name, onBlur, onFocus, ...props }: PanelInputProps<string>) {
+  let [hasFocus, setHasFocus] = React.useState(false);
+  let [isHovered, setHovered] = React.useState(false);
+
+  // input heeft altijd een icon right
+  let controlClass = 'control has-icons-right';
+  if (icon) controlClass += ' has-icons-left';
+
+  let id = idProp ?? Math.random().toString(36).substring(2);
+
+  let [, iconLeftNode, iconRightNode] = createIconsINTERNAL({
+    icon,
+    error: '',
+    showInfo: OR(hasFocus, isHovered),
+    inputId: id ?? name,
+    infoData: undefined,
+    helpTag,
+    hideIconRight: true,
+  });
+
+  /** onBlur moet ook de isTouched afhandelen */
+  function handleOnBlur(e: React.FocusEvent<HTMLInputElement>) {
+    // als we de focus verliezen door de showInfo, moet de focus behouden blijven.
+    // Na de click op de showInfo, setten we de focus weer op het veld. Dus als na 100ms de focus
+    // nog steeds niet terug is, dan zetten we hasFocus echt op `false`
+    if (infoData)
+      setTimeout(() => {
+        const el = document.getElementById(id);
+        if (document.activeElement !== el) {
+          setHasFocus(false);
+          if (onBlur) onBlur(e);
+        }
+      }, FOCUS_HELP_TIMEOUT_IN_MS);
+    else {
+      if (onBlur) onBlur(e);
+      setHasFocus(false);
+    }
+  }
+
+  function handleFocusChange(e: React.FocusEvent<HTMLInputElement>) {
+    setHasFocus(true);
+    if (onFocus) onFocus(e);
+  }
+
+  return (
+    <div className="panel-block" onMouseEnter={() => setHovered(true)} onMouseLeave={() => setHovered(false)}>
+      <div className={controlClass}>
+        <BaseInput name={name ?? id} id={id} onBlur={handleOnBlur} onFocus={handleFocusChange} {...props} />
+        {iconLeftNode}
+        {iconRightNode}
+      </div>
+    </div>
+  );
+}
+
+export { Panel };
+export type { PanelProps };

package/lib/components/ProgressBar/ProgressBar.test.tsx

@@ -0,0 +1,92 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { ProgressBar } from './ProgressBar';
+import { ColorProp } from '../../loon-react-bulma-types';
+
+describe('Test <ProgressBar /> Component', () => {
+  test('Should be a function', () => expect(ProgressBar).toBeInstanceOf(Function));
+  test('Should render a normal-sized (default, niet opgegeven) info ProgressBar with value 50, default max 100', () => {
+    render(<ProgressBar value={50} suffix=" %" />);
+    const progress = screen.getByRole('progress');
+    expect(progress instanceof HTMLProgressElement).toBe(true);
+    expect(progress).toHaveClass('progress', 'is-info');
+    expect(progress).toHaveAttribute('value', '50');
+    expect(progress).toHaveAttribute('max', '100');
+  });
+
+  test('Should render a small success ProgressBar with value 25, tooltip with 25 euro, max 1000', () => {
+    render(<ProgressBar size="s" color="s" value={25} max={1000} prefix="$" suffix="euro" />);
+
+    const progress = screen.getByRole('progress');
+    expect(progress instanceof HTMLProgressElement).toBe(true);
+    expect(progress).toHaveClass('progress', 'is-small', 'is-success');
+    expect(progress).toHaveAttribute('value', '25');
+    expect(progress).toHaveAttribute('max', '1000');
+    expect(progress).toHaveAttribute('title', '$ 25 euro');
+  });
+
+  test('Should render a large danger ProgressBar with no value, no tooltip, max 100', () => {
+    render(<ProgressBar size="l" color="d" title={(v) => (typeof v === 'number' ? `${v} percent` : 'nothing')} />);
+    const progress = screen.getByRole('progress');
+    expect(progress instanceof HTMLProgressElement).toBe(true);
+    expect(progress).toHaveClass('progress', 'is-medium', 'is-danger');
+    expect(progress).not.toHaveAttribute('value');
+    expect(progress).toHaveAttribute('max', '100');
+  });
+
+  test("Should render a large danger ProgressBar with value 'indeterminate', no tooltip, max 100", () => {
+    render(<ProgressBar size="l" color="d" value="indeterminate" />);
+    const progress = screen.getByRole('progress');
+    expect(progress instanceof HTMLProgressElement).toBe(true);
+    expect(progress).toHaveClass('progress', 'is-medium', 'is-danger');
+    expect(progress).not.toHaveAttribute('value');
+    expect(progress).toHaveAttribute('max', '100');
+  });
+
+  test('Should render an xlarge link ProgressBar with value 75, max 100', () => {
+    render(<ProgressBar size="xl" color="l" value={75} title="bazinga" />);
+    const link = screen.getByRole('progress');
+    expect(link instanceof HTMLProgressElement).toBe(true);
+    expect(link).toHaveClass('progress', 'is-large', 'is-link');
+    expect(link).toHaveAttribute('value', '75');
+    expect(link).toHaveAttribute('max', '100');
+    expect(link).toHaveAttribute('title', 'bazinga');
+  });
+
+  test('Should render a medium-sized (default) warning ProgressBar with value 75, max 100', () => {
+    render(<ProgressBar color="w" size="m" value={75} />);
+    const link = screen.getByRole('progress');
+    expect(link instanceof HTMLProgressElement).toBe(true);
+    expect(link).toHaveClass('progress', 'is-warning', 'is-normal');
+    expect(link).toHaveAttribute('value', '75');
+    expect(link).toHaveAttribute('max', '100');
+    expect(link).toHaveAttribute('title', '75');
+  });
+
+  test('Should render a primary ProgressBar with value 75, max 100', () => {
+    render(<ProgressBar color="p" value={75} />);
+    const link = screen.getByRole('progress');
+    expect(link instanceof HTMLProgressElement).toBe(true);
+    expect(link).toHaveClass('progress', 'is-primary');
+    expect(link).toHaveAttribute('value', '75');
+    expect(link).toHaveAttribute('max', '100');
+    expect(link).toHaveAttribute('title', '75');
+  });
+
+  describe('Test colors', () => {
+    const colors: ColorProp[] = ['p', 'i', 'l', 'd', 's', 'w', 'light', 'dark', 'is-custom'];
+    const voluitColors = ['primary', 'info', 'link', 'danger', 'success', 'warning', 'light', 'dark', 'custom'];
+    colors.forEach((color, i) => {
+      test(`Should render a ${voluitColors[i]} ProgressBar with value 75, max 100`, () => {
+        render(<ProgressBar color={color} value={75} />);
+        const link = screen.getByRole('progress');
+        expect(link instanceof HTMLProgressElement).toBe(true);
+        expect(link).toHaveClass('progress', `is-${voluitColors[i]}`);
+        expect(link).toHaveAttribute('value', '75');
+        expect(link).toHaveAttribute('max', '100');
+        expect(link).toHaveAttribute('title', '75');
+      });
+    });
+  });
+});

package/lib/components/ProgressBar/ProgressBar.tsx

@@ -0,0 +1,42 @@
+import { getSizeClass, getColorClass } from '@lib/internal_functions';
+import { SizeProp, ColorProp } from '@lib/types';
+
+type ProgressBarProps = {
+  /** Grootte van de progressbar */
+  size?: SizeProp;
+  /** De maximale waarde, default = 100 */
+  max?: number;
+  /** De waarde waarop de progressbar staat. Vul `undefined` of `'indeterminate'` in voor een onbepaalde, loopende progressbar */
+  value?: number | 'indeterminate';
+  /** teken of symbool **voor** de waarde (bijvoorbeeld in de title) */ prefix?: '%' | '€' | 'º' | '$' | '£' | '¢' | '¥' | (string & {});
+  /** teken of symbool **achter** de waarde (bijvoorbeeld in de title) */ suffix?: '%' | '€' | 'º' | '$' | '£' | '¢' | '¥' | (string & {});
+  /** De kleur van de progressbar (default = 'i') */
+  color?: ColorProp;
+  /** (optionele) hover-title voor de progress-bar. Als er geen title is gebruikt, wordt de `value` weergegeven (met pre- en suffix) */
+  title?: string | ((v?: number | 'indeterminate') => string);
+};
+
+/**
+ * Maak een progress-bar met de <progress> tag.
+ * Door de attribute `value` de waarde `undefined` of `'indeterminate'` te geven, krijg je een loopende progress bar
+ * @param props
+ * @returns een progress bar
+ * @example
+ * <ProgressBar value={50} />
+ * <ProgressBar value={50} extension="%" />
+ * <ProgressBar size='xl' />
+ */
+function ProgressBar({ color = 'i', size = 'm', prefix = '', suffix = '', max = 100, value, title: titleProp }: ProgressBarProps) {
+  let className = `progress ${getSizeClass(size, true)} ${getColorClass(color, true)}`.trim();
+  let valueStr = value && value !== 'indeterminate' ? `${prefix} ${value} ${suffix}`.trim() : undefined;
+  let title = titleProp ? (typeof titleProp === 'function' ? titleProp(value) : titleProp) : valueStr;
+
+  return (
+    <progress className={className} value={value === 'indeterminate' ? undefined : value} max={max} title={title} role="progress">
+      {valueStr}
+    </progress>
+  );
+}
+
+export { ProgressBar };
+export type { ProgressBarProps };

package/lib/components/QuickView/QuickView.test.tsx

@@ -0,0 +1,81 @@
+/* eslint-disable testing-library/no-node-access */
+import { render, screen } from '@testing-library/react';
+import { QuickView } from './QuickView';
+import { ColorProp } from '../../loon-react-bulma-types';
+
+describe('Test <QuickView> Component', () => {
+  test('Should be a function', () => expect(QuickView).toBeInstanceOf(Function));
+
+  test('Should render a QuickView with a <QuickView.Header>, <QuickView.Body> and <QuickView.Footer>', () => {
+    const mockOpened = jest.fn();
+    const mockDismiss = jest.fn();
+    render(
+      <QuickView onOpened={mockOpened} onDismiss={mockDismiss}>
+        <QuickView.Header>Header</QuickView.Header>
+        <QuickView.Body>Body</QuickView.Body>
+        <QuickView.Footer>Footer</QuickView.Footer>
+      </QuickView>
+    );
+    const header = screen.getByText('Header').parentElement;
+    expect(header).toHaveClass('quickview-header');
+    expect(header).toHaveTextContent('Header');
+
+    const body = screen.getByText('Body');
+    expect(body).toHaveClass('quickview-body');
+    expect(body).toHaveTextContent('Body');
+
+    const footer = screen.getByText('Footer');
+    expect(footer).toHaveClass('quickview-footer');
+    expect(footer).toHaveTextContent('Footer');
+
+    expect(mockOpened).toHaveBeenCalledTimes(1);
+    expect(mockDismiss).toHaveBeenCalledTimes(0);
+
+    const dismissBttn = screen.getByTitle('close');
+    expect(dismissBttn).toBeInTheDocument();
+    dismissBttn.click();
+    expect(mockDismiss).toHaveBeenCalledTimes(1);
+  });
+
+  test('It should also just render a <Quickview.Body when not defined', () => {
+    render(
+      <QuickView>
+        <div>Body</div>
+      </QuickView>
+    );
+    const body = screen.getByText('Body').parentElement;
+    expect(body).toHaveClass('quickview-body');
+    expect(body).toHaveTextContent('Body');
+  });
+
+  describe('Test color-prop', () => {
+    const colors: ColorProp[] = ['p', 'i', 'l', 'd', 's', 'w', 'light', 'dark', 'is-custom'];
+    const voluitColors = ['primary', 'info', 'link', 'danger', 'success', 'warning', 'light', 'dark', 'custom'];
+    colors.forEach((color, i) => {
+      test('Should color the QuickView ' + voluitColors[i], () => {
+        render(
+          <QuickView color={color}>
+            <QuickView.Header>Header</QuickView.Header>
+            <QuickView.Body>Body</QuickView.Body>
+            <QuickView.Footer>Footer</QuickView.Footer>
+          </QuickView>
+        );
+      });
+    });
+  });
+
+  describe('Test alignment-prop', () => {
+    const alignments: Array<'l' | 'r'> = ['l', 'r'];
+    alignments.forEach((alignment) => {
+      test('Should align the QuickView to the ' + (alignment === 'r' ? 'right' : 'left'), () => {
+        render(
+          <QuickView alignment={alignment}>
+            <QuickView.Header>Header</QuickView.Header>
+            <QuickView.Body>Body</QuickView.Body>
+            <QuickView.Footer>Footer</QuickView.Footer>
+          </QuickView>
+        );
+      });
+    });
+  });
+});