@ssa-ui-kit/core 1.0.2 → 1.0.3

package/dist/types/emotion.d.ts

@@ -12,6 +12,7 @@ type Colors = MakeColors<[
     'white30',
     'dark',
     'greyLighter',
+    'greyLighter40',
     'greySelectedMenuItem',
     'greyFocused',
     'greyFocused40',
@@ -20,6 +21,7 @@ type Colors = MakeColors<[
     'grey40',
     'greyShadow24',
     'greyDarker',
+    'greyDarker40',
     'greyDarker60',
     'greyDarker80',
     'greyDarker14',
@@ -105,7 +107,8 @@ type Colors = MakeColors<[
     'blueButtonHoverGradientFrom',
     'blueButtonHoverGradientTo',
     'blueButtonActive',
-    'blueRoyal'
+    'blueRoyal',
+    'blueRoyal12'
 ]>;
 export type ColorsKeys = keyof Colors;
 type MediaQueryString = `@media${string}`;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ssa-ui-kit/core",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "private": false,
@@ -29,8 +29,8 @@
     "loose-envify": "^1.4.0",
     "scheduler": "^0.23.0",
     "uuid": "^9.0.0",
-    "@ssa-ui-kit/utils": "^1.0.0",
-    "@ssa-ui-kit/hooks": "^1.0.0"
+    "@ssa-ui-kit/hooks": "^1.0.0",
+    "@ssa-ui-kit/utils": "^1.0.0"
   },
   "devDependencies": {
     "@emotion/jest": "^11.11.0",

package/src/components/Button/Button.tsx

@@ -47,6 +47,8 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
       text,
       startIcon,
       endIcon,
+      startIconClassName,
+      endIconClassName,
       variant = 'primary',
       type = 'button',
       className,
@@ -89,7 +91,10 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
         onClick={onClick}
         {...ariaProps}>
         {startIcon ? (
-          <span style={noMargin} css={[iconWrapperRight]}>
+          <span
+            style={noMargin}
+            css={[iconWrapperRight]}
+            className={startIconClassName}>
             {startIcon}
           </span>
         ) : null}
@@ -107,7 +112,10 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
           )
         ) : null}
         {endIcon ? (
-          <span style={noMargin} css={iconWrapperLeft}>
+          <span
+            style={noMargin}
+            css={[iconWrapperLeft]}
+            className={endIconClassName}>
             {endIcon}
           </span>
         ) : null}

package/src/components/Button/types.ts

@@ -21,6 +21,8 @@ export interface ButtonProps extends ButtonAriaProps {
   text?: string;
   startIcon?: React.ReactNode;
   endIcon?: React.ReactNode;
+  startIconClassName?: string;
+  endIconClassName?: string;
   variant?: keyof ButtonVariants | 'custom';
   type?: 'button' | 'reset' | 'submit';
   isDisabled?: boolean;

package/src/components/FormHelperText/FormHelperText.tsx

@@ -6,10 +6,11 @@ const FormHelperText = ({
   status,
   disabled,
   children,
+  ...rest
 }: FormHelperTextProps) => {
   status = disabled ? 'basic' : status;
   return (
-    <FormHelperTextBase role={role} status={status}>
+    <FormHelperTextBase role={role} status={status} {...rest}>
       {children}
     </FormHelperTextBase>
   );

package/src/components/Input/Input.spec.tsx

@@ -15,14 +15,12 @@ describe('Inputs', () => {
     expect(input).toBeInTheDocument();
   });
 
-  it('Trow error when without register', () => {
-    jest.spyOn(console, 'error').mockImplementation();
-
-    expect(() =>
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
-      render(<Input placeholder="Field" name="field" disabled={true} />),
-    ).toThrow('Input component must be used within a Form component');
+  it('Throw warning when without register', () => {
+    const warnSpy = jest.spyOn(console, 'warn').mockImplementation();
+    render(<Input placeholder="Field" name="field" disabled={true} />);
+    expect(warnSpy).toBeCalledWith(
+      'Input component must be used within a Form component',
+    );
   });
 
   it('Render input disabled', () => {

package/src/components/Input/Input.tsx

@@ -1,4 +1,4 @@
-import { forwardRef } from 'react';
+import { forwardRef, useEffect } from 'react';
 import { useMergeRefs } from '@floating-ui/react';
 import { InputBase } from './InputBase';
 import { InputGroup } from './InputGroup';
@@ -25,21 +25,27 @@ const InputInner = (
     startElement,
     endElement,
     className,
+    wrapperClassName,
     inputProps = {},
     register,
     onKeyUp,
   }: InputProps,
   inputRef?: React.ForwardedRef<HTMLInputElement | null>,
 ) => {
-  if (!register) {
-    throw new Error('Input component must be used within a Form component');
-  }
+  useEffect(() => {
+    if (!register) {
+      console.warn('Input component must be used within a Form component');
+    }
+  }, []);
 
   const showStatusIcon = () => !disabled && !endElement;
 
-  const registerResult = register(name, validationSchema);
+  const registerResult = register?.(name, validationSchema);
   return (
-    <InputGroup css={[mapColors[status]]} disabled={disabled}>
+    <InputGroup
+      css={[mapColors[status]]}
+      className={wrapperClassName}
+      disabled={disabled}>
       {startElement ? <div css={S.startElement}>{startElement}</div> : null}
       <InputBase
         type={type}
@@ -53,8 +59,8 @@ const InputInner = (
         className={className}
         onKeyUp={onKeyUp}
         {...inputProps}
-        {...register(name, validationSchema)}
-        ref={useMergeRefs([registerResult.ref, inputRef])}
+        {...register?.(name, validationSchema)}
+        ref={useMergeRefs([registerResult?.ref, inputRef])}
       />
 
       {status === 'error' && showStatusIcon() ? <InputStatusError /> : null}

package/src/components/Input/types.ts

@@ -16,6 +16,7 @@ export interface InputProps
   validationSchema?: Record<string, unknown>;
   disabled?: boolean;
   className?: string;
+  wrapperClassName?: string;
   as?: React.ElementType;
   startElement?: React.ReactElement;
   endElement?: React.ReactElement;

package/src/components/Label/Label.tsx

@@ -5,11 +5,13 @@ const Label = ({
   children,
   htmlFor,
   className,
+  isDisabled,
   onMouseEnter,
   onMouseLeave,
 }: LabelProps) => (
   <LabelBase
     htmlFor={htmlFor}
+    isDisabled={isDisabled}
     className={className}
     onMouseEnter={onMouseEnter}
     onMouseLeave={onMouseLeave}>

package/src/components/Label/LabelBase.tsx

@@ -1,6 +1,6 @@
 import styled from '@emotion/styled';
 
-export const LabelBase = styled.label`
+export const LabelBase = styled.label<{ isDisabled?: boolean }>`
   display: inline-block;
 
   flex: 1;
@@ -8,7 +8,8 @@ export const LabelBase = styled.label`
   font-size: 1rem;
   line-height: 22px;
 
-  color: ${({ theme }) => theme.colors.greyDarker};
+  color: ${({ theme, isDisabled }) =>
+    isDisabled ? theme.colors.grey : theme.colors.greyDarker};
 
   margin: 0 0 6px 4px;
 `;

package/src/components/Label/types.ts

@@ -4,6 +4,7 @@ import { CommonProps } from '@global-types/emotion';
 export interface LabelProps extends CommonProps {
   htmlFor?: string;
   children: React.ReactNode;
+  isDisabled?: boolean;
   onMouseEnter?: MouseEventHandler<HTMLLabelElement>;
   onMouseLeave?: MouseEventHandler<HTMLLabelElement>;
 }

package/src/components/Typeahead/Typeahead.context.ts

@@ -0,0 +1,59 @@
+import * as React from 'react';
+import { UseTypeaheadResult } from './useTypeahead';
+
+export const TypeaheadContext = React.createContext<UseTypeaheadResult>({
+  optionsWithKey: {},
+  isMultiple: false,
+  selectedItems: [],
+  typeaheadId: '',
+  firstSuggestion: '',
+  inputRef: { current: null },
+  triggerRef: { current: null },
+  isOpen: false,
+  className: undefined,
+  startIcon: null,
+  endIcon: null,
+  startIconClassName: undefined,
+  endIconClassName: undefined,
+  name: '',
+  inputName: '',
+  inputValue: '',
+  validationSchema: {},
+  status: 'basic',
+  isDisabled: false,
+  options: [],
+  placeholder: '',
+  setValue: () => {
+    /* no-op */
+  },
+  register: () => {
+    return {} as any;
+  },
+  handleChange: () => {
+    /* no-op */
+  },
+  handleClearAll: () => {
+    /* no-op */
+  },
+  handleInputClick: () => {
+    /* no-op */
+  },
+  handleInputKeyDown: () => {
+    /* no-op */
+  },
+  handleInputChange: () => {
+    /* no-op */
+  },
+  handleOpenChange: () => {
+    /* no-op */
+  },
+  handleRemoveSelectedClick: () => () => {
+    /* no-op */
+  },
+  handleSelectedClick: () => {
+    /* no-op */
+  },
+});
+
+export const useTypeaheadContext = (): UseTypeaheadResult =>
+  React.useContext(TypeaheadContext);