@mrshmllw/smores-react 6.0.0 → 6.0.2

package/dist/RadioGroup/RadioGroup.d.ts

@@ -1,37 +0,0 @@
-import React, { FocusEvent, ReactElement } from 'react';
-import { Icons } from 'Icon/iconsList';
-import { CommonFieldProps } from '../fields/commonFieldTypes';
-import { BaseValueType, DisplayType, IconPosition } from './types';
-export type RadioGroupProps<Value extends BaseValueType = BaseValueType> = {
-    options: Array<{
-        visual?: string;
-        icon?: Icons;
-        iconPosition?: IconPosition;
-        label: string;
-        value: Value;
-        bodyCopy?: string;
-    }>;
-    onChange: (value: Value) => void;
-    onBlur?: (e: FocusEvent<HTMLInputElement>) => void;
-    value: Value;
-    displayType?: DisplayType;
-    fallbackStyle?: boolean;
-} & CommonFieldProps;
-export type RadioGroupElement = {
-    focus: VoidFunction;
-};
-export declare const RadioGroup: <Value extends BaseValueType = BaseValueType>(p: {
-    options: {
-        visual?: string | undefined;
-        icon?: "link" | "filter" | "key" | "id" | "property" | "security" | "aa-inverted" | "accidental-damage" | "account-breakdown" | "account-mlp" | "activity-clipboard" | "add-ons" | "address-mta" | "album-audio" | "alert-engine" | "apple-pay" | "approved-file" | "breakdown-alt" | "cancel-bw" | "car-mta" | "car-repairs" | "car-replacement" | "car-usage" | "chat-bubble" | "checkout-with-text" | "circle-tick" | "claim-line" | "clipboard-check" | "close-panel" | "confused-blue" | "contact-email" | "dashboard-high" | "direct-debit" | "doc-download" | "doc-upload" | "edit-contact" | "edit-outline" | "email-filled" | "falling-items" | "file-badge-2" | "file-cabinet" | "fraud-alert" | "freezer-food" | "google-play-badge" | "help-aboutus" | "help-buypolicy" | "help-center" | "help-idcheck" | "help-manage-policy" | "help-ncd" | "help-verification" | "home-excluded" | "house-tree" | "ios-store-badge" | "live-chat" | "live-chat2" | "log-out" | "manage-drivers" | "manage-policy" | "maximise-window" | "minus-circle" | "money-bag" | "money-heart" | "more-dots" | "new-window" | "no-excess" | "open-panel" | "out-of-home" | "padlock-outline" | "phone-filled" | "phone-outline" | "pin-code" | "plus-circle" | "policy-details" | "policy-doc" | "policy-docs" | "pound-bold" | "pound-filled-circle" | "pound-medium" | "pound-outline" | "pound-regular" | "question-help" | "refer-a-friend" | "reg-plate" | "renewal-line" | "repeat-charge" | "schedule-quote" | "send-message" | "shield-check" | "thumbs-up" | "tow-truck" | "trace-and-access" | "up-down" | "upload-documents" | "upload-email" | "wheel-flat" | "windscreen-repair" | "windscreen-replacement" | "aa" | "addons" | "alert" | "amex" | "arrow" | "at" | "axa" | "bank" | "basket" | "bicycle" | "boost" | "breakdown" | "briefcase" | "burger" | "calendar" | "camera" | "cancel" | "car" | "card" | "caret" | "charge" | "chat" | "checkout" | "city" | "claim" | "clipboard" | "clock" | "collpase" | "confused" | "copy" | "crop" | "cross" | "download" | "earth" | "edit" | "engine" | "europe" | "excluded" | "expand" | "facebook" | "fence" | "file" | "fire" | "flag" | "folder" | "fuel" | "globe" | "gpay" | "house" | "inbox" | "included" | "info" | "injury" | "instagram" | "intercom" | "intercom2" | "iphone" | "jewellery" | "laptop" | "leaks" | "lightbulb" | "linkedin" | "location" | "marshmallow" | "mastercard" | "maximise" | "medical" | "minimise" | "minus" | "mulsanne" | "notes" | "notification" | "onfido" | "other" | "padlock" | "people" | "person" | "photo" | "plus" | "policy" | "premfina" | "profile" | "prohibited" | "rac" | "ravelin" | "refund" | "renewal" | "return" | "search" | "settings" | "shield" | "shopping" | "sofa" | "stack" | "storm" | "stripe" | "subsidence" | "theft" | "tick" | "training" | "trash" | "twitter" | "upload" | "vandalism" | "village" | "visa" | "warning" | "watch" | "wave" | "wellbeing" | "windscreen" | undefined;
-        iconPosition?: IconPosition | undefined;
-        label: string;
-        value: Value;
-        bodyCopy?: string | undefined;
-    }[];
-    onChange: (value: Value) => void;
-    onBlur?: ((e: FocusEvent<HTMLInputElement>) => void) | undefined;
-    value: Value;
-    displayType?: DisplayType | undefined;
-    fallbackStyle?: boolean | undefined;
-} & CommonFieldProps & React.RefAttributes<HTMLInputElement>) => ReactElement | null;

package/dist/RadioGroup/RadioGroup.js

@@ -1,75 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import { forwardRef, useRef, useImperativeHandle } from 'react';
-import styled from 'styled-components';
-import { useUniqueId } from '../utils/id.js';
-import { Fieldset } from '../fields/Fieldset/Fieldset.js';
-import { ITEM_GAP } from './constants.js';
-import { RadioItem } from './RadioItem.js';
-
-const RadioGroupComponent = ({
-  options,
-  onChange,
-  onBlur,
-  value,
-  displayType = "normal",
-  renderAsTitle = false,
-  error = false,
-  fallbackStyle = false,
-  ...fieldProps
-}, ref) => {
-  const name = useUniqueId();
-  const optionRefs = useRef([]);
-  useImperativeHandle(ref, () => {
-    return {
-      focus: () => {
-        const selectedIndex = options.findIndex((item) => item.value === value);
-        const elementToFocus = selectedIndex === -1 ? 0 : selectedIndex;
-        optionRefs.current[elementToFocus].current?.focus();
-      }
-    };
-  });
-  return /* @__PURE__ */ jsx(Fieldset, { renderAsTitle, error, ...fieldProps, children: /* @__PURE__ */ jsx(RadioItemList, { displayType, children: options.map((option, index) => {
-    const isSelected = option.value === value;
-    return /* @__PURE__ */ jsx(
-      RadioItem,
-      {
-        ref: (radioOptionRef) => {
-          optionRefs.current[index] = {
-            current: radioOptionRef
-          };
-        },
-        name,
-        visual: option.visual,
-        icon: option.icon,
-        iconPosition: option.iconPosition,
-        label: option.label,
-        value: option.value,
-        checked: isSelected,
-        onChange,
-        onBlur,
-        displayType,
-        isError: error,
-        fallbackStyle,
-        bodyCopy: option.bodyCopy
-      },
-      `${option.value}`
-    );
-  }) }) });
-};
-const RadioGroup = forwardRef(RadioGroupComponent);
-const RadioItemList = styled.div`
-  display: flex;
-  gap: ${ITEM_GAP}px;
-
-  ${({ displayType }) => {
-  if (displayType === "horizontal-card") {
-    return `
-        flex-direction: row;
-        flex-wrap: wrap;
-      `;
-  }
-  return `flex-direction: column;`;
-}}
-`;
-
-export { RadioGroup };

package/dist/RadioGroup/RadioItem.js

@@ -1,129 +0,0 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
-import styled, { css } from 'styled-components';
-import { theme } from '../theme.js';
-import { useUniqueId } from '../utils/id.js';
-import { Box } from '../Box/Box.js';
-import { Icon } from '../Icon/Icon.js';
-import { Text } from '../Text/Text.js';
-import { RadioElement } from './RadioElement.js';
-import { ITEM_GAP } from './constants.js';
-
-const RadioItem = forwardRef(
-  function RadioItem2({
-    name,
-    visual,
-    icon,
-    iconPosition = "center",
-    label,
-    value,
-    checked,
-    onChange,
-    onBlur,
-    displayType,
-    isError,
-    fallbackStyle,
-    bodyCopy
-  }, ref) {
-    const id = useUniqueId();
-    return /* @__PURE__ */ jsxs(
-      Wrapper,
-      {
-        htmlFor: id,
-        checked,
-        displayType,
-        "data-testid": value,
-        isError,
-        fallbackStyle,
-        children: [
-          visual && !icon && /* @__PURE__ */ jsx(VisualWrapper, { children: /* @__PURE__ */ jsx(Visual, { visualUrl: visual }) }),
-          !visual && icon && /* @__PURE__ */ jsx(IconWrapper, { iconPosition, children: /* @__PURE__ */ jsx(Icon, { render: icon, size: 24 }) }),
-          /* @__PURE__ */ jsxs(Box, { flex: true, alignItems: "center", children: [
-            /* @__PURE__ */ jsx(
-              RadioElement,
-              {
-                ref,
-                name,
-                id,
-                value,
-                checked,
-                onChange,
-                onBlur,
-                isError,
-                mr: "8px"
-              }
-            ),
-            /* @__PURE__ */ jsxs(Box, { children: [
-              /* @__PURE__ */ jsx(RadioText, { isError, children: label }),
-              bodyCopy && /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Text, { typo: "caption", children: bodyCopy }) })
-            ] })
-          ] })
-        ]
-      }
-    );
-  }
-);
-const VisualWrapper = styled.div`
-  width: 100%;
-  max-width: 120px;
-  margin: 0 auto 8px;
-`;
-const IconWrapper = styled.div`
-  display: flex;
-  padding-bottom: 12px;
-
-  ${({ iconPosition }) => iconPosition === "center" && css`
-      justify-content: center;
-    `}
-
-  ${({ iconPosition }) => iconPosition === "start" && css`
-      justify-content: flex-start;
-    `}
-`;
-const Visual = styled.div`
-  width: 100%;
-  padding-top: 100%;
-  background-image: url('${(p) => p.visualUrl}');
-  background-size: contain;
-  background-repeat: no-repeat;
-  background-position: center;
-`;
-const Wrapper = styled.label`
-  display: flex;
-  flex-direction: column;
-  cursor: pointer;
-
-  ${({ displayType, checked, isError, fallbackStyle }) => css`
-    ${(displayType === "horizontal-card" || displayType === "vertical-card") && css`
-      border-radius: 12px;
-      background-color: ${fallbackStyle ? theme.colors.cream : theme.colors.custard};
-      padding: ${checked ? "10px" : "12px"};
-      border: ${checked && (isError ? `2px solid ${theme.colors.strawberry}` : `2px solid ${theme.colors.liquorice}`)};
-
-      &:hover {
-        background-color: ${fallbackStyle ? theme.colors.coconut : theme.colors.oatmeal};
-      }
-    `}
-    ${displayType === "horizontal-card" && css`
-      width: 100%;
-      justify-content: center;
-
-      @media (min-width: 420px) {
-        width: calc(50% - ${ITEM_GAP / 2}px);
-      }
-
-      @media (min-width: 768px) {
-        width: 201px;
-      }
-    `}
-  `}
-`;
-const RadioText = styled.span`
-  line-height: 16px;
-  font-size: 16px;
-  font-weight: ${theme.font.weight.medium};
-  color: ${({ isError }) => isError ? theme.colors.strawberry : theme.colors.liquorice};
-  margin-top: 4px;
-`;
-
-export { RadioItem };

package/dist/RadioGroup/constants.js

@@ -1,3 +0,0 @@
-const ITEM_GAP = 12;
-
-export { ITEM_GAP };

package/dist/Row/Row.js

@@ -1,91 +0,0 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import styled, { css } from 'styled-components';
-import { Box } from '../Box/Box.js';
-import { Icon } from '../Icon/Icon.js';
-import { Text } from '../Text/Text.js';
-import { theme } from '../theme.js';
-
-const Row = ({
-  iconLeft,
-  iconLeftColor = "liquorice",
-  iconRight,
-  iconRightColor = "marzipan",
-  handleClick,
-  heading,
-  subHeading,
-  type,
-  borderTop = true,
-  borderBottom = true,
-  boldHeading,
-  ...marginProps
-}) => {
-  const windowWidth = screen.width;
-  return /* @__PURE__ */ jsxs(
-    Container,
-    {
-      type,
-      iconLeft,
-      borderTop,
-      borderBottom,
-      iconRight,
-      onClick: handleClick,
-      boldHeading,
-      ...marginProps,
-      children: [
-        iconLeft && /* @__PURE__ */ jsx(
-          Icon,
-          {
-            render: iconLeft,
-            size: windowWidth > 768 ? 24 : 18,
-            color: iconLeftColor
-          }
-        ),
-        /* @__PURE__ */ jsxs(Box, { children: [
-          /* @__PURE__ */ jsx(Text, { tag: "h1", typo: "base", children: heading }),
-          /* @__PURE__ */ jsx(Text, { tag: "p", typo: "desc-small", color: "sesame", children: subHeading })
-        ] }),
-        iconRight && /* @__PURE__ */ jsx(
-          Icon,
-          {
-            className: "iconRight",
-            render: iconRight,
-            size: 24,
-            rotate: iconRight === "caret" ? -90 : 0,
-            color: iconRightColor
-          }
-        )
-      ]
-    }
-  );
-};
-const Container = styled(Box)(
-  ({ type, iconLeft, borderTop, borderBottom, boldHeading }) => css`
-    border-radius: ${type === "first" && `16px 16px 0 0` || type === "curved" && `16px` || type === "last" && `0 0 16px 16px` || 0};
-
-    border-top: ${borderTop && type !== "curved" && type !== "first" ? `1px solid ${theme.colors.oatmeal}` : "none"};
-    border-bottom: ${borderBottom && type !== "curved" && type !== "last" ? `1px solid ${theme.colors.oatmeal}` : "none"};
-
-    background-color: ${theme.colors.custard};
-    display: grid;
-    grid-template-columns: ${iconLeft ? `24px auto 24px` : `auto 24px`};
-    padding: 16px;
-    grid-gap: 16px;
-    align-items: center;
-
-    cursor: pointer;
-
-    h1 {
-      font-weight: ${boldHeading && 500};
-    }
-
-    .iconRight {
-      justify-self: end;
-    }
-
-    @media (min-width: 768px) {
-      grid-gap: 24px;
-    }
-  `
-);
-
-export { Row };

package/dist/SearchInput/SearchInput.js

@@ -1,119 +0,0 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { forwardRef, useState, useMemo } from 'react';
-import { Box } from '../Box/Box.js';
-import { Field } from '../fields/Field/Field.js';
-import { StyledFrontIcon, Input } from '../fields/components/CommonInput.js';
-import { useUniqueId } from '../utils/id.js';
-import { useControllableState } from '../utils/useControlledState.js';
-import { SearchOptions } from './SearchOptions.js';
-
-const SearchInput = forwardRef(
-  function SearchInput2({
-    id: idProp,
-    name = "search_input",
-    className = "",
-    placeholder,
-    searchList,
-    showIcon = false,
-    renderAsTitle = false,
-    value,
-    onBlur,
-    onFound,
-    fallbackStyle,
-    resultsRelativePosition = false,
-    resultsBorder = true,
-    ...otherProps
-  }, ref) {
-    const id = useUniqueId(idProp);
-    const [showOptions, setShowOptions] = useState(false);
-    const [selectedValue, setSelectedValue] = useControllableState({
-      initialState: null,
-      stateProp: value
-    });
-    const [searchQuery, setSearchQuery] = useState(null);
-    const filteredList = useMemo(() => {
-      if (searchQuery === null || searchQuery === "") {
-        return searchList;
-      }
-      return searchList.filter(
-        ({ label }) => label.toLowerCase().includes(searchQuery.toLocaleLowerCase())
-      );
-    }, [searchQuery]);
-    const getDisplayedInputText = () => {
-      if (searchQuery !== null) {
-        return searchQuery;
-      }
-      if (selectedValue !== null) {
-        return searchList.find(
-          (option) => option.label === selectedValue || option.value === selectedValue
-        )?.label || "";
-      }
-      return "";
-    };
-    const isSelected = selectedValue !== null;
-    const displayedInputText = getDisplayedInputText();
-    const updateSearchQuery = (query) => {
-      setSearchQuery(query);
-      if (query === null) {
-        setShowOptions(false);
-      } else {
-        setShowOptions(2 <= query.length);
-      }
-    };
-    const handleInputChange = (event) => {
-      const nextValue = event.currentTarget.value;
-      updateSearchQuery(nextValue);
-    };
-    const handleSelect = (nextValue) => {
-      updateSearchQuery(null);
-      setSelectedValue(nextValue.label);
-      onFound(nextValue.value);
-    };
-    return /* @__PURE__ */ jsxs(
-      Field,
-      {
-        className,
-        renderAsTitle,
-        htmlFor: id,
-        ...otherProps,
-        children: [
-          /* @__PURE__ */ jsxs(Box, { flex: true, alignItems: "center", justifyContent: "flex-start", children: [
-            showIcon && /* @__PURE__ */ jsx(StyledFrontIcon, { render: "search", color: "sesame" }),
-            /* @__PURE__ */ jsx(
-              Input,
-              {
-                id,
-                name,
-                ref,
-                placeholder,
-                frontIcon: showIcon ? "search" : void 0,
-                fallbackStyle,
-                autoComplete: "off",
-                value: displayedInputText,
-                onChange: handleInputChange,
-                selected: isSelected,
-                onBlur: (e) => {
-                  if (displayedInputText === "") {
-                    setSearchQuery(null);
-                  }
-                  onBlur?.(e);
-                }
-              }
-            )
-          ] }),
-          showOptions && /* @__PURE__ */ jsx(
-            SearchOptions,
-            {
-              displayedList: filteredList,
-              onSelect: handleSelect,
-              positionRelative: resultsRelativePosition,
-              resultsBorder
-            }
-          )
-        ]
-      }
-    );
-  }
-);
-
-export { SearchInput };

package/dist/SearchInput/SearchOptions.js

@@ -1,63 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import { darken } from 'polished';
-import styled, { css } from 'styled-components';
-import { Box } from '../Box/Box.js';
-import { theme } from '../theme.js';
-
-const SearchOptions = ({
-  displayedList,
-  onSelect,
-  positionRelative,
-  resultsBorder
-}) => {
-  return /* @__PURE__ */ jsx(BoxWithPositionRelative, { children: /* @__PURE__ */ jsx(StyledResultsContainer, { positionRelative, children: /* @__PURE__ */ jsx(ResultsList, { resultsBorder, children: displayedList.length ? displayedList.map((el, i) => /* @__PURE__ */ jsx("li", { onClick: () => onSelect(el), children: el.label }, i)) : /* @__PURE__ */ jsx("li", { children: "No results" }) }) }) });
-};
-const StyledResultsContainer = styled.div`
-  box-sizing: border-box;
-  overflow-y: hidden;
-  ${({ positionRelative }) => !positionRelative && "position: absolute;"}
-  width: 100%;
-  left: 0px;
-  top: -8px;
-
-  ul {
-    max-height: 192px;
-  }
-`;
-const ResultsList = styled.ul`
-  position: relative;
-  list-style: none;
-  overflow-y: auto;
-  padding: 0;
-  margin: 0;
-  background-color: ${theme.colors.custard};
-  border-radius: 12px;
-  margin-top: 14px;
-  z-index: 1000;
-  ${({ resultsBorder }) => resultsBorder && css`
-      border: 2px solid ${theme.colors.oatmeal};
-    `}
-
-  li {
-    padding: 16px 14px;
-    box-sizing: border-box;
-    font-size: 16px;
-    color: ${theme.colors.liquorice};
-    cursor: pointer;
-
-    ${({ resultsBorder }) => resultsBorder && `border-bottom: 2px solid ${theme.colors.oatmeal};`}
-
-    &:last-child {
-      ${({ resultsBorder }) => resultsBorder && `border-bottom:none`}
-    }
-
-    &:hover {
-      background-color: ${darken(0.1, theme.colors.custard)};
-    }
-  }
-`;
-const BoxWithPositionRelative = styled(Box)`
-  position: relative;
-`;
-
-export { SearchOptions };

package/dist/Snackbar/SnackbarContainer.js

@@ -1,63 +0,0 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { createContext, useContext, useState, useCallback } from 'react';
-import styled from 'styled-components';
-import { SnackbarItem } from './SnackbarItem.js';
-
-const SnackbarContext = createContext({
-  addSnackbar: () => {
-    throw new Error("Please add the SnackbarContainer to your application");
-  }
-});
-const useSnackbarContext = () => useContext(SnackbarContext);
-const SnackbarContainer = ({
-  children
-}) => {
-  let snackbarId = 0;
-  const [snackbars, setSnackbars] = useState([]);
-  const newSnackId = useCallback(() => {
-    const newId = `MM_SNACKBAR_${snackbarId}`;
-    snackbarId++;
-    return newId;
-  }, [snackbarId]);
-  const addSnackbar = (snackbar) => {
-    const newSnack = {
-      ...snackbar,
-      id: newSnackId()
-    };
-    setSnackbars([...snackbars, newSnack]);
-  };
-  const deleteSnackbar = (id) => {
-    setSnackbars(snackbars.filter((snackbar) => snackbar.id !== id));
-  };
-  return /* @__PURE__ */ jsxs(
-    SnackbarContext.Provider,
-    {
-      value: {
-        addSnackbar
-      },
-      children: [
-        children,
-        /* @__PURE__ */ jsx(SnackbarWrapper, { children: snackbars.map((snackbar) => /* @__PURE__ */ jsx(
-          SnackbarItem,
-          {
-            ...snackbar,
-            deleteSnack: deleteSnackbar
-          },
-          snackbar.id
-        )) })
-      ]
-    }
-  );
-};
-const SnackbarWrapper = styled.div`
-  position: fixed;
-  bottom: 35px;
-  left: 0;
-  right: 0;
-  margin: 0 auto;
-  width: 90%;
-  max-width: 875px;
-  z-index: 1000;
-`;
-
-export { SnackbarContainer, SnackbarContext, useSnackbarContext };

package/dist/Snackbar/SnackbarItem.js

@@ -1,46 +0,0 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { Box } from '../Box/Box.js';
-import styled from 'styled-components';
-import { Icon } from '../Icon/Icon.js';
-import { theme } from '../theme.js';
-import { Text } from '../Text/Text.js';
-import 'react';
-import { useTimeout } from '../hooks/useTimeout/index.js';
-
-const SnackbarItem = ({
-  autoCloseTime = 4,
-  id,
-  message,
-  leadingIcon,
-  canManuallyClose,
-  showCloseIcon,
-  deleteSnack
-}) => {
-  useTimeout(() => deleteSnack(id), autoCloseTime * 1e3);
-  return /* @__PURE__ */ jsxs(SnackItem, { p: "16px", mt: "16px", flex: true, justifyContent: "space-between", children: [
-    /* @__PURE__ */ jsxs(Box, { flex: true, alignItems: "center", children: [
-      leadingIcon && /* @__PURE__ */ jsx(Icon, { mr: "12px", render: leadingIcon, size: 24, color: "mascarpone" }),
-      /* @__PURE__ */ jsx(Text, { typo: "desc-small", color: "mascarpone", children: message })
-    ] }),
-    canManuallyClose && /* @__PURE__ */ jsx(
-      CloseButton,
-      {
-        onClick: () => deleteSnack(id),
-        "aria-label": `close snackbar ${message}`,
-        children: showCloseIcon ? /* @__PURE__ */ jsx(Icon, { render: "cross", size: 16, color: "mascarpone" }) : /* @__PURE__ */ jsx(UnderlinedText, { tag: "span", typo: "desc-medium", color: "mascarpone", children: "Dismiss" })
-      }
-    )
-  ] }, id);
-};
-const SnackItem = styled(Box)`
-  border-radius: 16px;
-  background-color: ${theme.colors.liquorice};
-`;
-const CloseButton = styled.button`
-  cursor: pointer;
-`;
-const UnderlinedText = styled(Text)`
-  text-decoration: underline;
-`;
-
-export { SnackbarItem };

package/dist/Snackbar/hooks.js

@@ -1,8 +0,0 @@
-import { useSnackbarContext } from './SnackbarContainer.js';
-
-const useSnackbar = () => {
-  const { addSnackbar } = useSnackbarContext();
-  return { addSnackbar };
-};
-
-export { useSnackbar };