@kanda-libs/ks-component-ts 0.2.255 → 0.2.256-qa

package/app/.yalc/@kanda-libs/ks-design-library/src/components/PopoverMenu/PopoverMenuItem/constants.ts

@@ -0,0 +1,71 @@
+export const CLASS_NAMES = {
+  container: {
+    base: 'flex flex-row flex-1 items-center py-2.5 px-3 rounded-lg transition-all duration-300 ease-in-out',
+    '@selectedColor': {
+      default: 'hover:bg-neutral-100',
+      green: 'hover:bg-green-100',
+    },
+    '@selected': {
+      default: 'bg-neutral-100',
+      green: 'bg-green-100',
+    },
+  },
+  name: {
+    base: 'flex flex-1',
+    '@size': {
+      xs: 'text-style-h ml-2.5',
+      small: 'text-style-g ml-3',
+      medium: 'text-red-600 text-style-g ml-3 min-w-30',
+      big: 'text-style-f ml-4',
+    },
+    '@selectedColor': {
+      default: 'text-neutral-600',
+      green: 'text-green-600',
+    },
+  },
+  icon: {
+    base: 'neutral-500',
+    '@selectedColor': {
+      green: 'green-600',
+    },
+  },
+};
+
+export const VARIANTS = {
+  xs: {
+    iconProps: {
+      size: 16,
+    },
+    arrowIconProps: {
+      icon: 'chevron-right',
+      size: 16,
+    },
+  },
+  small: {
+    iconProps: {
+      size: 20,
+    },
+    arrowIconProps: {
+      icon: 'chevron-right',
+      size: 16,
+    },
+  },
+  medium: {
+    iconProps: {
+      size: 20,
+    },
+    arrowIconProps: {
+      icon: 'chevron-right',
+      size: 16,
+    },
+  },
+  big: {
+    iconProps: {
+      size: 24,
+    },
+    arrowIconProps: {
+      icon: 'chevron-right',
+      size: 20,
+    },
+  },
+};

package/app/.yalc/@kanda-libs/ks-design-library/src/components/PopoverMenu/PopoverMenuItem/index.tsx

@@ -0,0 +1,59 @@
+import React, { FunctionComponent, HTMLAttributes } from 'react';
+import clsx from 'clsx';
+import Icon from '~/components/Icon';
+import usePopoverMenuItem from './usePopoverMenuItem';
+import type { PopoverMenuItemSize } from '~/components/PopoverMenu/types';
+import { useButtonTracking } from '~/hooks';
+import type { PopoverMenuItemSelectedColorVariant } from './types';
+
+export interface PopoverMenuItemProps
+  extends HTMLAttributes<HTMLButtonElement | HTMLDivElement> {
+  name: string;
+  icon: string;
+  size?: PopoverMenuItemSize;
+  arrow?: boolean;
+  selected?: boolean;
+  seperator?: boolean;
+  selectedColorVariant?: PopoverMenuItemSelectedColorVariant;
+}
+
+const PopoverMenuItem: FunctionComponent<PopoverMenuItemProps> = function ({
+  name,
+  icon,
+  size = 'small',
+  arrow = false,
+  selected = false,
+  onClick: inputOnClick,
+  className,
+  selectedColorVariant = 'default',
+  ...restProps
+}) {
+  const { classNames, iconProps, arrowIconProps } = usePopoverMenuItem(
+    size,
+    selected,
+    selectedColorVariant,
+  );
+
+  const id = `popover-menu-item-${name.toLowerCase().replace(/ /g, '-')}`;
+
+  const { onClick } = useButtonTracking(id, inputOnClick);
+
+  return (
+    <button
+      id={id}
+      className={clsx(classNames.container, className)}
+      onClick={onClick}
+      {...restProps}
+    >
+      <Icon
+        icon={icon}
+        {...iconProps}
+        stroke={iconProps.stroke || classNames.icon}
+      />
+      <div className={classNames.name}>{name}</div>
+      {arrow && <Icon {...arrowIconProps} />}
+    </button>
+  );
+};
+
+export default PopoverMenuItem;

package/app/.yalc/@kanda-libs/ks-design-library/src/components/PopoverMenu/PopoverMenuItem/types.d.ts

@@ -0,0 +1 @@
+export type PopoverMenuItemSelectedColorVariant = 'default' | 'green';

package/app/.yalc/@kanda-libs/ks-design-library/src/components/PopoverMenu/PopoverMenuItem/usePopoverMenuItem.ts

@@ -0,0 +1,35 @@
+import { CLASS_NAMES, VARIANTS } from './constants';
+import { useClasses } from '~/hooks';
+import type { StringIndexedObject } from '~/types';
+import type { PopoverMenuItemSize } from '~/components/PopoverMenu/types';
+import type { IconProps } from '~/components/Icon/types';
+import type { PopoverMenuItemSelectedColorVariant } from './types';
+
+export interface PopoverMenuHook {
+  classNames: StringIndexedObject<string>;
+  iconProps: IconProps;
+  arrowIconProps: IconProps;
+  seperator?: boolean;
+}
+
+export default function usePopoverMenu(
+  size: PopoverMenuItemSize,
+  selected: boolean,
+  selectedColor: PopoverMenuItemSelectedColorVariant,
+): PopoverMenuHook {
+  const classNames = useClasses(CLASS_NAMES, {
+    variants: {
+      size,
+      selected: selected ? selectedColor : '',
+      selectedColor: selected ? selectedColor : 'default',
+    },
+  });
+
+  const { iconProps, arrowIconProps } = VARIANTS[size];
+
+  return {
+    classNames,
+    iconProps,
+    arrowIconProps,
+  };
+}

package/app/.yalc/@kanda-libs/ks-design-library/src/components/PopoverMenu/constants.ts

@@ -0,0 +1,8 @@
+export const CLASS_NAMES = {
+  baseContainer: 'flex flex-col flex-1 relative',
+  paddingContainer: 'flex flex-col flex-1 p-2',
+  content: 'flex flex-col flex-1',
+  link: 'flex flex-1 flex-row',
+  seperatorWrapper: 'flex flex-1 flex-row -mx-2 my-1',
+  seperator: 'bg-neutral-100 w-full h-px',
+};

package/app/.yalc/@kanda-libs/ks-design-library/src/components/PopoverMenu/index.tsx

@@ -0,0 +1,86 @@
+import React, { FunctionComponent } from 'react';
+import type { PopoverMenuProps } from './types';
+import usePopoverMenu from './usePopoverMenu';
+import PopoverMenuItem, { type PopoverMenuItemProps } from './PopoverMenuItem';
+import type { NavigationLinkProps } from '~/components/NavigationLink';
+import type { StringIndexedObject } from '~/types';
+
+const PopoverMenu: FunctionComponent<PopoverMenuProps> = function ({
+  items,
+  className = '',
+  onClose,
+  size,
+  header,
+  content,
+  selectedColorVariant = 'default',
+  notice: Notice,
+}) {
+  const { linkComponent: LinkComponent, classNames } =
+    usePopoverMenu(className);
+
+  const LinkComponentTag =
+    LinkComponent as FunctionComponent<NavigationLinkProps>;
+
+  return (
+    <div className={classNames.container}>
+      {Notice && <Notice />}
+      <div className={classNames.paddingContainer}>
+        {header && (
+          <>
+            {header}
+            <div className={classNames.seperatorWrapper}>
+              <div className={classNames.seperator} />
+            </div>
+          </>
+        )}
+        <div onClick={onClose} className={classNames.content}>
+          {content ||
+            items.map(
+              ({ icon, name, arrow, selected, seperator, ...linkProps }) => {
+                const popoverMenuItemProps: PopoverMenuItemProps = {
+                  icon,
+                  name,
+                  size,
+                  arrow,
+                  selected,
+                  selectedColorVariant,
+                };
+
+                return (
+                  <React.Fragment key={name}>
+                    {seperator ? (
+                      <div className={classNames.seperatorWrapper}>
+                        <div className={classNames.seperator} />
+                      </div>
+                    ) : (
+                      <>
+                        {linkProps.onClick ? (
+                          <div
+                            key={name}
+                            {...linkProps}
+                            className={classNames.link}
+                          >
+                            <PopoverMenuItem {...popoverMenuItemProps} />
+                          </div>
+                        ) : (
+                          <LinkComponentTag
+                            key={name}
+                            {...(linkProps as StringIndexedObject<string>)}
+                            className={classNames.link}
+                          >
+                            <PopoverMenuItem {...popoverMenuItemProps} />
+                          </LinkComponentTag>
+                        )}
+                      </>
+                    )}
+                  </React.Fragment>
+                );
+              },
+            )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default PopoverMenu;

package/app/.yalc/@kanda-libs/ks-design-library/src/components/PopoverMenu/types.d.ts

@@ -0,0 +1,22 @@
+import { PopoverMenuItemProps } from '~/components/PopoverMenu/PopoverMenuItem';
+import type { FunctionComponent } from 'react';
+import type { PopoverMenuItemSelectedColorVariant } from './PopoverMenuItem/types';
+
+export type PopoverMenuItemSize = 'xs' | 'small' | 'medium' | 'big';
+
+export interface PopoverMenuProps {
+  className?: string;
+  /**
+   * On close function
+   */
+  onClose?: () => void;
+  items: PopoverMenuItemProps[];
+  size?: PopoverMenuItemSize;
+  header?: JSX.Element | JSX.Element[] | null;
+  content?: JSX.Element | JSX.Element[] | null;
+  /**
+   * Notice banner to show
+   */
+  notice?: FunctionComponent;
+  selectedColorVariant?: PopoverMenuItemSelectedColorVariant;
+}

package/app/.yalc/@kanda-libs/ks-design-library/src/components/PopoverMenu/usePopoverMenu.ts

@@ -0,0 +1,24 @@
+import { useContext } from 'react';
+import { useClasses } from '~/hooks';
+import { ConfigWrapperContext } from '~/components/ConfigWrapper';
+import { CLASS_NAMES } from './constants';
+import type { StringIndexedObject } from '~/types';
+import type { NavigationLinkProps } from '~/components/NavigationLink';
+
+export interface PopoverMenuHook {
+  linkComponent: string | React.FunctionComponent<NavigationLinkProps>;
+  classNames: StringIndexedObject<string>;
+}
+
+export default function usePopoverMenu(className: string): PopoverMenuHook {
+  const { linkComponent } = useContext(ConfigWrapperContext);
+
+  const classNames = useClasses(CLASS_NAMES, {
+    container: ['.baseContainer', className],
+  });
+
+  return {
+    linkComponent: linkComponent as string,
+    classNames,
+  };
+}

package/app/.yalc/@kanda-libs/ks-design-library/src/components/Price/constants.ts

@@ -0,0 +1,45 @@
+export const CLASS_NAMES = {
+  baseWrapper: 'flex items-center',
+  baseContainer: 'flex flex-row items-start',
+  container: 'flex flex-col w-full',
+  wrapper: 'flex flex-col',
+  headingMobile: 'block md:hidden',
+  headingDesktop: 'hidden md:block',
+  grid: 'grid grid-cols-2',
+  cardContainer: 'flex flex-col',
+  title: 'text-neutral-500 mb-1',
+  pounds: 'text-green-500',
+  cents: 'text-green-400 text-12-18-em md:pt-px',
+  priceWrapper: 'md:min-h-6',
+  text: 'text-green-500 md:flex-row',
+};
+
+export const SKELETONS = {
+  pounds: {
+    width: 40,
+  },
+  cents: {
+    width: 16,
+  },
+};
+
+export const VARIANTS = {
+  default: {
+    wrapper: 'border border-neutral-300 p-4 md:p-8 rounded-lg',
+    headingMobile: 'text-12-18-em text-neutral-700 mb-2',
+    headingDesktop: 'text-16-20-em text-neutral-700 mb-6',
+    grid: 'gap-3 md:gap-6',
+    title: 'text-10-17-em-up md:text-12-18-em-up ',
+    pounds: 'text-18-22-em md:text-24-28-em',
+    text: 'text-18-22-em md:text-24-28-em ',
+  },
+  noBox: {
+    wrapper: 'mt-3',
+    headingMobile: 'text-14-22-em text-neutral-700 mb-2',
+    headingDesktop: 'text-16-20-em text-neutral-700 mb-6',
+    grid: 'gap-5 md:gap-6',
+    title: 'text-12-18-em-up',
+    pounds: 'text-24-28-em',
+    text: 'text-24-28-em ',
+  },
+};

package/app/.yalc/@kanda-libs/ks-design-library/src/components/Price/index.tsx

@@ -0,0 +1,74 @@
+import React, { FunctionComponent } from 'react';
+import NumberFormat, { NumberFormatProps } from 'react-number-format';
+import usePriceProps from '~/components/Price/usePriceProps';
+import SkeletonLoader from '~/components/SkeletonLoader';
+import { SKELETONS } from './constants';
+
+export interface PriceProps {
+  className?: string;
+  /**
+   * Price color
+   */
+  color?: string;
+  wrapperClassName?: string;
+  poundsClassName?: string;
+  centsClassName?: string;
+  /**
+   * Price amount in cents
+   */
+  amount?: number;
+  isLoading?: boolean;
+}
+
+const Price: FunctionComponent<PriceProps> = function ({
+  color = 'turquoise-300',
+  amount = 0,
+  wrapperClassName = 'h-full', // line height of text-style-b
+  poundsClassName = 'text-style-d',
+  centsClassName = 'text-style-h-em',
+  className = '',
+  isLoading = false,
+}) {
+  const { classNames, pounds, suffix, centsLabel } = usePriceProps(
+    color,
+    amount,
+    className,
+    wrapperClassName,
+  );
+
+  const NumberFormatTag =
+    NumberFormat as unknown as FunctionComponent<NumberFormatProps>;
+
+  return (
+    <div className={classNames.wrapper}>
+      <div className={classNames.container}>
+        <div className={poundsClassName}>
+          <SkeletonLoader
+            isLoading={isLoading}
+            {...SKELETONS.pounds}
+            afterLoading={
+              <NumberFormatTag
+                displayType="text"
+                value={pounds}
+                thousandSeparator
+                prefix="£"
+                suffix={suffix}
+              />
+            }
+          />
+        </div>
+        {!suffix && (
+          <div className={centsClassName}>
+            <SkeletonLoader
+              isLoading={isLoading}
+              {...SKELETONS.cents}
+              afterLoading={centsLabel}
+            />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default Price;

package/app/.yalc/@kanda-libs/ks-design-library/src/components/Price/usePriceProps.ts

@@ -0,0 +1,40 @@
+import { CLASS_NAMES } from './constants';
+import clsx from 'clsx';
+import { abbreviateNumber } from '~/helpers/number';
+
+export interface PricePropsHook {
+  classNames: {
+    wrapper: string;
+    container: string;
+  };
+  pounds: number;
+  suffix: string;
+  centsLabel: string;
+}
+
+export default function usePriceProps(
+  colour: string,
+  amount: number,
+  initialClassName: string,
+  initialWrapperClassName: string,
+): PricePropsHook {
+  const { baseContainer, baseWrapper } = CLASS_NAMES;
+
+  const container = clsx(baseContainer, `text-${colour}`, initialClassName);
+  const wrapper = clsx(baseWrapper, initialWrapperClassName);
+
+  const [pounds, suffix] = abbreviateNumber(Math.floor(amount / 100));
+  const cents = `${Math.round(amount % 100)}`.padStart(2, '0');
+
+  const centsLabel = `.${cents}`;
+
+  return {
+    classNames: {
+      wrapper,
+      container,
+    },
+    pounds: pounds as number,
+    suffix: suffix as string,
+    centsLabel,
+  };
+}

package/app/.yalc/@kanda-libs/ks-design-library/src/components/Recaptcha/constants.ts

@@ -0,0 +1,2 @@
+export const SCRIPT_BUNDLE =
+  'https://www.google.com/recaptcha/enterprise.js?render=$RECAPTCHA_SITE_KEY';

package/app/.yalc/@kanda-libs/ks-design-library/src/components/Recaptcha/index.tsx

@@ -0,0 +1,19 @@
+import { FunctionComponent, useEffect, useRef } from 'react';
+
+import { SCRIPT_BUNDLE } from './constants';
+import { RECAPTCHA_SITE_KEY } from '~/config';
+
+const Recaptcha: FunctionComponent = function () {
+  const recaptchaRef = useRef<boolean>(false);
+  useEffect(() => {
+    if (recaptchaRef.current) return;
+    const s1 = document.createElement('script');
+    s1.type = 'text/javascript';
+    s1.src = SCRIPT_BUNDLE.replace('$RECAPTCHA_SITE_KEY', RECAPTCHA_SITE_KEY);
+    document.head.appendChild(s1);
+  }, []);
+
+  return null;
+};
+
+export default Recaptcha;

package/app/.yalc/@kanda-libs/ks-design-library/src/components/ScrollTopButton/constants.ts

@@ -0,0 +1,20 @@
+import type {
+  ButtonIconSize,
+  ButtonIconVariant,
+} from '~/components/Button/ButtonIcon/types';
+
+export const CLASSNAMES = {
+  base: 'fixed right-4 bottom-4',
+  show: 'block',
+  hide: 'hidden',
+};
+
+export const BUTTON_PROPS = {
+  variant: 'solid-grey' as ButtonIconVariant,
+  size: '40-20' as ButtonIconSize,
+  icon: 'arrow-up',
+};
+
+export const MIN_SCROLL_HEIGHT = 120;
+
+export const TIMEOUT = 100;

package/app/.yalc/@kanda-libs/ks-design-library/src/components/ScrollTopButton/helpers.ts

@@ -0,0 +1,19 @@
+import { MIN_SCROLL_HEIGHT } from './constants';
+
+/**
+ * Function to scroll to top of body
+ */
+export const determineScrollHeight = (): boolean => {
+  const element =
+    document.documentElement || document.body.parentNode || document.body;
+
+  // If ref doesn't exist, return
+  if (!element) return false;
+  // Extract scrollTop
+  const { scrollTop } = element;
+
+  // If scrollTop is less than 120px, return false
+  if (scrollTop < MIN_SCROLL_HEIGHT) return false;
+  // Else retur true
+  return true;
+};

package/app/.yalc/@kanda-libs/ks-design-library/src/components/ScrollTopButton/index.tsx

@@ -0,0 +1,27 @@
+import React, { FunctionComponent, MutableRefObject } from 'react';
+import useScrollTopButton from './useScrollTopButton';
+import { Icon as IconButton } from '~/components/Button';
+import { BUTTON_PROPS } from './constants';
+
+export interface ScrollTopButtonProps {
+  containerRef?: MutableRefObject<HTMLElement>;
+}
+
+const ScrollTopButton: FunctionComponent<ScrollTopButtonProps> = function ({
+  containerRef,
+}) {
+  const { className, scrollTop } = useScrollTopButton(containerRef);
+
+  return (
+    <IconButton
+      id="scroll-top"
+      onClick={() => {
+        scrollTop();
+      }}
+      {...BUTTON_PROPS}
+      className={className}
+    />
+  );
+};
+
+export default ScrollTopButton;

package/app/.yalc/@kanda-libs/ks-design-library/src/components/ScrollTopButton/useScrollTopButton.ts

@@ -0,0 +1,66 @@
+import { useState, useEffect, useRef, MutableRefObject } from 'react';
+import clsx from 'clsx';
+import { CLASSNAMES, TIMEOUT } from './constants';
+import { determineScrollHeight } from './helpers';
+
+export interface ScrollTopButtonHook {
+  className: string;
+  scrollTop: () => void;
+}
+
+/**
+ * Hook used for firing off a scroll to top method when clicking the scroll to
+ * top button
+ */
+export default function useScrollTopButton(
+  containerRef: MutableRefObject<HTMLElement> | undefined,
+): ScrollTopButtonHook {
+  // Anonymous state to construct button className
+  const [showButton, setShowButton] = useState(determineScrollHeight());
+
+  /**
+   * Function to scroll to top of element
+   */
+  const scrollTop = () => {
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+  };
+
+  // Classname for button - extended with button show state
+  const className = clsx(
+    CLASSNAMES.base,
+    showButton ? CLASSNAMES.show : CLASSNAMES.hide,
+  );
+
+  // Reference used for debouncing
+  const checkScroll = useRef(true);
+  // Effect attaches event listener to element
+  useEffect(() => {
+    // Scroll listener function to check scroll position
+    const scrollListener = () => {
+      // If checker reference is false, return
+      if (!checkScroll.current) return;
+      // Set checker reference to false
+      checkScroll.current = false;
+      // Set the show button state
+      setShowButton(determineScrollHeight());
+      // Use timeout to debounce, runs ever 100 milliseconds
+      setTimeout(() => {
+        // Allow scroll checking again
+        checkScroll.current = true;
+        // Set show button state
+        setShowButton(determineScrollHeight());
+      }, TIMEOUT);
+    };
+    // Add the event listener to the element
+    window.addEventListener('scroll', scrollListener);
+    return () => {
+      // Remove the event listener
+      window.removeEventListener('scroll', scrollListener);
+    };
+  }, [containerRef]);
+
+  return {
+    className,
+    scrollTop,
+  };
+}

package/app/.yalc/@kanda-libs/ks-design-library/src/components/Separator/constants.ts

@@ -0,0 +1 @@
+export const CLASSNAME = 'mb-6 border-neutral-200';

package/app/.yalc/@kanda-libs/ks-design-library/src/components/Separator/index.tsx

@@ -0,0 +1,10 @@
+import React, { type FunctionComponent } from 'react';
+import { CLASSNAME } from './constants';
+
+export interface SeparatorProps {}
+
+const Separator: FunctionComponent<SeparatorProps> = function () {
+  return <hr className={CLASSNAME} />;
+};
+
+export default Separator;

package/app/.yalc/@kanda-libs/ks-design-library/src/components/SkeletonLoader/constants.tsx

@@ -0,0 +1 @@
+export const DEFAULT_WRAPPER_CLASS_NAME = '';