@clubmed/trident-ui 1.0.0-alpha.18 → 1.0.0-alpha.19

package/lib/molecules/Tag.tsx

@@ -1,123 +0,0 @@
-import classNames from 'classnames';
-import type { FunctionComponent } from 'react';
-
-import { Icon, Iconics } from '../atoms/Icon';
-
-export interface TagProps {
-  /**
-   * Additional class names
-   */
-  className?: string;
-  /**
-   * Background color
-   */
-  backgroundColor?: string;
-  /**
-   * Text color
-   */
-  color?: string;
-  /**
-   * Border color
-   */
-  border?: string;
-  /**
-   * Should the background/border and main text color be switched?
-   * @default false
-   */
-  shouldInvertColors?: boolean;
-  /**
-   * Optional icon name
-   */
-  icon?: Iconics;
-  /**
-   * Tag label
-   */
-  label?: string;
-  /**
-   * Display mode
-   */
-  displayMode?: 'icon' | 'label' | 'both' | 'monogram' | 'none';
-  /**
-   * Icon class name
-   */
-  iconClassName?: string;
-  /**
-   * Label class name
-   */
-  labelClassName?: string;
-}
-
-// this for tailwind css purge
-const borderColorClassMapping: { [key: string]: string } = {
-  sienna: 'border-sienna',
-  ultramarine: 'border-ultramarine',
-  saffron: 'border-saffron',
-  darkGrey: 'border-darkGrey',
-  lightGrey: 'border-lightGrey',
-  white: 'border-white',
-  verdigris: 'border-verdigris',
-  wave: 'border-wave',
-};
-
-const bgColorClassMapping: { [key: string]: string } = {
-  sienna: 'bg-sienna',
-  ultramarine: 'bg-ultramarine',
-  saffron: 'bg-saffron',
-  darkGrey: 'bg-darkGrey',
-  lightGrey: 'bg-lightGrey',
-  white: 'bg-white',
-  verdigris: 'bg-verdigris',
-  wave: 'bg-wave',
-};
-
-export const Tag: FunctionComponent<TagProps> = ({
-  className,
-  backgroundColor = 'saffron',
-  color = 'black',
-  border,
-  shouldInvertColors = false,
-  icon,
-  label = '',
-  displayMode = 'both',
-  iconClassName,
-  labelClassName,
-}) => {
-  if (!label && !icon) {
-    return null;
-  }
-  const layout = displayMode === 'label' || displayMode === 'both' ? 'px-16 py-4' : 'p-4';
-  const borderColor = shouldInvertColors ? color : border || backgroundColor;
-  const bgColor = shouldInvertColors ? color : backgroundColor;
-  const textColor = shouldInvertColors ? backgroundColor : color;
-  const borderColorClass = borderColorClassMapping[borderColor] ?? `border-${borderColor}`;
-  const bgColorClass = bgColorClassMapping[bgColor] ?? `bg-${bgColor}`;
-  const appearance = `${bgColorClass} border ${borderColorClass} text-${textColor}`;
-
-  return (
-    <span
-      data-name="Tag"
-      className={classNames(
-        'text-b3 rounded-pill inline-block font-sans font-semibold',
-        layout,
-        appearance,
-        className,
-      )}
-      title={label}
-      role="note"
-    >
-      <span className="flex items-center justify-center gap-x-4">
-        {(displayMode === 'icon' || displayMode === 'both' || displayMode === 'none') && icon && (
-          <Icon width="24px" name={icon} className={iconClassName} />
-        )}
-        {(displayMode === 'label' || displayMode === 'both' || displayMode === 'none') && (
-          <span className={labelClassName}>{label}</span>
-        )}
-        {displayMode === 'monogram' && (
-          <span className="text-center" style={{ width: '24px', height: '24px' }}>
-            {label}
-          </span>
-        )}
-      </span>
-    </span>
-  );
-};

package/lib/molecules/Toast.spec.tsx

@@ -1,27 +0,0 @@
-import { render, screen } from '@testing-library/react';
-
-import { Toast } from './Toast';
-
-describe('<Toast />', () => {
-  const onClose = vi.fn();
-
-  it('renders a Toast', () => {
-    render(
-      <Toast
-        title="Get 10% off your first order"
-        subtitle="Sign up for our newsletter and get 10% off your first order"
-        href="#"
-        incentive="Click here"
-        icon="Trident"
-        theme="blue"
-        closeLabel="close"
-        isVisible
-        onClose={onClose}
-      />,
-    );
-    screen.getByTitle('close').click();
-
-    expect(onClose).toHaveBeenCalledTimes(1);
-    expect(screen.getByRole('note')).toMatchSnapshot('toast');
-  });
-});

package/lib/molecules/Toast.stories.tsx

@@ -1,56 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { Toaster, ToasterProps, toast } from 'react-hot-toast';
-
-import { Toast, ToasterConfig } from './Toast';
-
-export default {
-  title: 'Toast',
-  component: Toast,
-  parameters: { layout: 'centered' },
-  args: {
-    title: 'Get 10% off your first order',
-    subtitle: 'Sign up for our newsletter and get 10% off your first order',
-    href: '#',
-    incentive: 'Click here',
-    theme: 'blue',
-    closeLabel: 'Close',
-  },
-} satisfies Meta<typeof Toast>;
-
-type Story = StoryObj<typeof Toast>;
-
-export const Base: StoryObj<typeof Toast> = {
-  render: (args) => {
-    return (
-      <div>
-        <Toaster {...(ToasterConfig() as ToasterProps)} />
-        <button
-          onClick={() =>
-            toast.custom(
-              (t) => <Toast {...args} isVisible={t.visible} onClose={() => toast.dismiss(t.id)} />,
-              {
-                duration: 10000,
-              },
-            )
-          }
-        >
-          Notify
-        </button>
-      </div>
-    );
-  },
-};
-
-export const Yellow: Story = {
-  ...Base,
-  args: {
-    theme: 'yellow',
-  },
-};
-
-export const WithIcon: Story = {
-  ...Base,
-  args: {
-    icon: 'Trident',
-  },
-};

package/lib/molecules/Toast.themes.ts

@@ -1,4 +0,0 @@
-export const themes = {
-  yellow: { thBackground: 'bg-saffron', thText: 'text-black' },
-  blue: { thBackground: 'bg-ultramarine', thText: 'text-white' },
-};

package/lib/molecules/Toast.tsx

@@ -1,101 +0,0 @@
-import classnames from 'classnames';
-import { FunctionComponent } from 'react';
-
-import { Link } from './Link';
-import { themes } from './Toast.themes';
-
-import { Icon, Iconics } from '../atoms/Icon';
-
-export const ToasterConfig = (isDesktop = false) => ({
-  containerClassName: 'overflow-y-auto mb-20 md:mb-0 md:mt-80',
-  containerStyle: { inset: '0' },
-  position: isDesktop ? 'top-right' : 'bottom-center',
-});
-
-interface ToastProps {
-  /**
-   * Provided by react-hot-toast
-   * Don't mess with this
-   */
-  isVisible: boolean;
-
-  /**
-   * Title text
-   */
-  title: string;
-  /**
-   * Subtitle text
-   */
-  subtitle: string;
-  /**
-   * Theme
-   */
-  theme: 'blue' | 'yellow';
-  /**
-   * Link href
-   */
-  href: string;
-  /**
-   * Link label
-   */
-  incentive: string;
-  /**
-   * Icon name
-   */
-  icon: Iconics;
-  /**
-   * Close label
-   */
-  closeLabel: string;
-  /**
-   * On close callback
-   */
-  onClose?: () => void;
-}
-
-export const Toast: FunctionComponent<ToastProps> = ({
-  theme = 'blue',
-  title,
-  subtitle,
-  href,
-  incentive,
-  icon,
-  isVisible,
-  closeLabel,
-  onClose,
-}) => {
-  const { thBackground, thText } = themes[theme];
-  return (
-    <div
-      className={classnames(
-        'ease transition-opacity duration-300',
-        isVisible ? 'animate-toastEnter' : 'animate-toastExit opacity-0',
-        'md:me-120 mx-20',
-      )}
-      role="note"
-    >
-      <div
-        className={classnames(
-          'rounded-16 max-w-360 relative flex gap-x-20 p-20',
-          thBackground,
-          thText,
-        )}
-      >
-        {icon && <Icon name={icon} width="30px" />}
-        <a className="text-b4 pe-20" href={href}>
-          <p className="pb-4 font-bold">{title}</p>
-          <p className="pb-12">{subtitle}</p>
-          <Link className="font-bold" inert label={incentive} />
-        </a>
-        <button
-          className={classnames('absolute end-12 top-20', thText)}
-          onClick={onClose}
-          aria-label={closeLabel}
-          title={closeLabel}
-        >
-          <Icon name="CrossDefault" width="24px" />
-        </button>
-      </div>
-    </div>
-  );
-};

package/lib/molecules/__snapshots__/Backdrop.spec.tsx.snap

@@ -1,16 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`<Backdrop /> > renders a Backdrop component > backdrop 1`] = `
-<div
-  class="z-1 pointer-events-none fixed inset-0 flex items-center justify-center"
-  role="presentation"
->
-  <button
-    class="-z-1 absolute inset-0 bg-white pointer-events-auto"
-    style="--tw-bg-opacity: 0; transform: none;"
-  />
-  <div>
-    backdrop content
-  </div>
-</div>
-`;

package/lib/molecules/__snapshots__/Breadcrumb.spec.tsx.snap

@@ -1,135 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`<Breadcrumb /> > renders a Breadcrumb component > Breadcrumb 1`] = `
-<nav
-  aria-label="Breadcrumb"
-  data-name="Breadcrumb"
->
-  <ul
-    class="flex items-center"
-  >
-    <li
-      class="text-b4 flex items-center text-middleGrey"
-    >
-      <span>
-        <a
-          href="#"
-        >
-          Home
-        </a>
-      </span>
-      <span
-        class="inline-block shrink-0 align-middle text-inherit mx-4"
-        data-name="Icon"
-        data-testid="icon-Diamond"
-        style="width: 14px; rotate: 0deg; aspect-ratio: 1;"
-      />
-    </li>
-    <li
-      class="text-b4 flex items-center text-middleGrey"
-    >
-      <span>
-        <a
-          href="#"
-        >
-          Accommodations
-        </a>
-      </span>
-      <span
-        class="inline-block shrink-0 align-middle text-inherit mx-4"
-        data-name="Icon"
-        data-testid="icon-Diamond"
-        style="width: 14px; rotate: 0deg; aspect-ratio: 1;"
-      />
-    </li>
-    <li
-      class="text-b4 flex items-center text-middleGrey"
-    >
-      <span>
-        ...
-      </span>
-      <span
-        class="inline-block shrink-0 align-middle text-inherit mx-4"
-        data-name="Icon"
-        data-testid="icon-Diamond"
-        style="width: 14px; rotate: 0deg; aspect-ratio: 1;"
-      />
-    </li>
-    <li
-      aria-current="page"
-      class="text-b4 flex items-center text-black font-bold"
-    >
-      <span>
-        Bathroom
-      </span>
-    </li>
-  </ul>
-</nav>
-`;
-
-exports[`<Breadcrumb /> > renders a Breadcrumb component with dark theme > Breadcrumb dark 1`] = `
-<nav
-  aria-label="Breadcrumb"
-  data-name="Breadcrumb"
->
-  <ul
-    class="flex items-center"
-  >
-    <li
-      class="text-b4 flex items-center text-middleGrey"
-    >
-      <span>
-        <a
-          href="#"
-        >
-          Home
-        </a>
-      </span>
-      <span
-        class="inline-block shrink-0 align-middle text-inherit mx-4"
-        data-name="Icon"
-        data-testid="icon-Diamond"
-        style="width: 14px; rotate: 0deg; aspect-ratio: 1;"
-      />
-    </li>
-    <li
-      class="text-b4 flex items-center text-middleGrey"
-    >
-      <span>
-        <a
-          href="#"
-        >
-          Accommodations
-        </a>
-      </span>
-      <span
-        class="inline-block shrink-0 align-middle text-inherit mx-4"
-        data-name="Icon"
-        data-testid="icon-Diamond"
-        style="width: 14px; rotate: 0deg; aspect-ratio: 1;"
-      />
-    </li>
-    <li
-      class="text-b4 flex items-center text-middleGrey"
-    >
-      <span>
-        ...
-      </span>
-      <span
-        class="inline-block shrink-0 align-middle text-inherit mx-4"
-        data-name="Icon"
-        data-testid="icon-Diamond"
-        style="width: 14px; rotate: 0deg; aspect-ratio: 1;"
-      />
-    </li>
-    <li
-      aria-current="page"
-      class="text-b4 flex items-center text-black font-bold"
-    >
-      <span>
-        Bathroom
-      </span>
-    </li>
-  </ul>
-</nav>
-`;

package/lib/molecules/__snapshots__/Card.spec.tsx.snap

@@ -1,20 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`<ListCard /> > display the text > list 1`] = `
-<ul
-  class="list-disc ps-12"
->
-  <li>
-    This
-  </li>
-  <li>
-    is
-  </li>
-  <li>
-    a
-  </li>
-  <li>
-    list
-  </li>
-</ul>
-`;

package/lib/molecules/__snapshots__/ContentReview.spec.tsx.snap

@@ -1,54 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`<ContentReview /> > should renders a ContentReview without a label > ContentReview//No//Label 1`] = `
-<div>
-  <div
-    class="items-center   gap-x-8 flex"
-  >
-    <div
-      class="border-lightGrey flex h-32 w-32 shrink-0 items-center justify-center rounded-full border bg-white"
-    >
-      <span
-        class="inline-block shrink-0 align-middle text-inherit"
-        data-name="Icon"
-        data-testid="icon-GoogleMonogram"
-        style="width: 16px; rotate: 0deg; aspect-ratio: 1;"
-      />
-    </div>
-    <span
-      class="truncate"
-    >
-      3.5/5
-    </span>
-  </div>
-</div>
-`;
-
-exports[`<ContentReview /> > should renders a default ContentReview with a rating and a label > ContentReview default 1`] = `
-<div>
-  <div
-    class="items-center   gap-x-8 flex"
-  >
-    <div
-      class="border-lightGrey flex h-32 w-32 shrink-0 items-center justify-center rounded-full border bg-white"
-    >
-      <span
-        class="inline-block shrink-0 align-middle text-inherit"
-        data-name="Icon"
-        data-testid="icon-GoogleMonogram"
-        style="width: 16px; rotate: 0deg; aspect-ratio: 1;"
-      />
-    </div>
-    <span
-      class="truncate"
-    >
-      3.5/5
-      <span
-        class="hidden sm:inline"
-      >
-         • 1975 reviews
-      </span>
-    </span>
-  </div>
-</div>
-`;

package/lib/molecules/__snapshots__/ContentSlider.spec.tsx.snap

@@ -1,71 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`<ContentSlider /> > renders > default state 1`] = `
-<div>
-  <div
-    role="button"
-  />
-  <div>
-    <div>
-      <div
-        class="relative z-0 h-full overflow-hidden"
-      >
-        <div
-          class="children-no-shrink relative flex h-full"
-          style="--xPos: 0; --deltaX: 0px; --centerSpacing: 0px; will-change: transform; inset-inline-start: calc(-1 * var(--centerSpacing)); transform: translate3d(calc(var(--xPos) * (100% + 0px) + var(--deltaX)),0,0);"
-        >
-          <div
-            class="ContentSlider-item h-full select-none w-full"
-            style="--isCurrent: 1; --scale: 1; --opacity: 1; z-index: 3;"
-          >
-            <img
-              alt="Grand Massif Samoëns Morillon"
-              decoding="async"
-              draggable="false"
-              loading="lazy"
-              src="https://fakeimg.pl/1000x1000"
-            />
-          </div>
-          <div
-            class="ContentSlider-item h-full select-none w-full"
-            style="--isCurrent: 0; --scale: 1; --opacity: 1; z-index: 2;"
-          >
-            <img
-              alt="Grand Massif Samoëns Morillon"
-              decoding="async"
-              draggable="false"
-              loading="lazy"
-              src="https://fakeimg.pl/1000x1000"
-            />
-          </div>
-          <div
-            class="ContentSlider-item h-full select-none w-full"
-            style="--isCurrent: 0; --scale: 1; --opacity: 1; z-index: 1;"
-          >
-            <img
-              alt="Grand Massif Samoëns Morillon"
-              decoding="async"
-              draggable="false"
-              loading="lazy"
-              src="https://fakeimg.pl/1000x1000"
-            />
-          </div>
-        </div>
-      </div>
-    </div>
-    <button
-      disabled=""
-    >
-      prev
-    </button>
-    <button>
-      next
-    </button>
-    <div
-      data-testid="indexindicator"
-    >
-      0
-    </div>
-  </div>
-</div>
-`;

package/lib/molecules/__snapshots__/Day.spec.tsx.snap

@@ -1,21 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`<Day /> > renders > Day with status green & not disabled 1`] = `
-<div>
-  <span
-    class="block text-center"
-  >
-    <span
-      class="text-b3 mx-auto block w-24 px-1 font-semibold bg-green rounded-pill text-white"
-    >
-      28
-    </span>
-    <span
-      class="text-b5 flex h-[24px] items-center justify-center font-semibold"
-      style="scale: calc(42 / max(45, 42));"
-    >
-      10000€
-    </span>
-  </span>
-</div>
-`;

package/lib/molecules/__snapshots__/ElasticHeight.spec.tsx.snap

@@ -1,23 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`<ElasticHeight /> > shows the content when open > open elasticheight 1`] = `
-<div
-  role="presentation"
->
-  <div
-    class="overflow-hidden"
-    style="height: 0px;"
-  >
-    <div
-      class=""
-    >
-      <p>
-        Awesome content
-      </p>
-    </div>
-  </div>
-  <button>
-    open
-  </button>
-</div>
-`;