Merge pull request #862 from vrk-kpa/feature/file-input

[Feature] FileInput

.styleguidist/spacingprovider.md

@@ -8,10 +8,7 @@ The margin values can be given using the desired spacing token.
 import {
   SpacingProvider,
   TextInput,
-  Button,
-  WizardNavigation,
-  WizardNavigationItem,
-  RouterLink
+  Button
 } from 'suomifi-ui-components';
 
 const Comp = (props) => {
@@ -45,12 +42,7 @@ The global margins given via the provider are set as low specificity css styles,
 In the example below all the buttons are inside a spacing provider with margins rules for buttons, but some of them have their styles overridden using the above methods.
 
 ```js
-import {
-  SpacingProvider,
-  TextInput,
-  Button,
-  Paragraph
-} from 'suomifi-ui-components';
+import { SpacingProvider, Button } from 'suomifi-ui-components';
 import { default as styled } from 'styled-components';
 
 const StyledButton = styled(Button)`
@@ -94,7 +86,6 @@ import {
   Button,
   TextInput,
   Textarea,
-  Checkbox,
   Paragraph,
   Heading,
   SpacingProvider

.styleguidist/styleguidist.sections.js

@@ -27,6 +27,7 @@ const singularComponents = [
   ['Form/Select/MultiSelect/', 'MultiSelect'],
   ['Form/Select', 'SingleSelect'],
   ['Form', 'ErrorSummary'],
+  ['Form', 'FileInput'],
 ];
 
 const getComponent = ({ name, underName }) =>

package.json

@@ -80,6 +80,7 @@
     "@rollup/plugin-node-resolve": "13.3.0",
     "@testing-library/jest-dom": "5.17.0",
     "@testing-library/react": "12.1.5",
+    "@testing-library/user-event": "14.5.2",
     "@types/classnames": "2.3.1",
     "@types/jest": "29.5.3",
     "@types/jest-axe": "3.5.5",

src/core/Form/Checkbox/Checkbox.tsx

@@ -40,7 +40,10 @@ const checkboxClassNames = {
 
 type CheckboxStatus = Exclude<InputStatus, 'success'>;
 
-interface InternalCheckboxProps extends StatusTextCommonProps {
+export interface CheckboxProps
+  extends StatusTextCommonProps,
+    MarginProps,
+    Omit<HtmlInputProps, 'onClick' | 'value'> {
   /** Controlled checked state  */
   checked?: boolean;
   /** Default status of Checkbox when not using controlled `checked` state
@@ -99,15 +102,6 @@ interface InternalCheckboxProps extends StatusTextCommonProps {
   value?: string;
   /** Ref is passed to the underlying input element. Alternative to React `ref` attribute. */
   forwardedRef?: React.RefObject<HTMLInputElement>;
-  /** Properties for the wrapping div element */
-}
-
-export interface CheckboxProps
-  extends InternalCheckboxProps,
-    MarginProps,
-    Omit<HtmlInputProps, 'onClick' | 'value'> {
-  /** Ref object to be passed to the input element */
-  ref?: React.RefObject<HTMLInputElement>;
 }
 
 class BaseCheckbox extends Component<CheckboxProps> {
@@ -244,10 +238,9 @@ const StyledCheckbox = styled(
     theme,
     globalMargins,
     ...passProps
-  }: InternalCheckboxProps &
-    SuomifiThemeProp &
-    GlobalMarginProps &
-    MarginProps) => <BaseCheckbox {...passProps} />,
+  }: CheckboxProps & SuomifiThemeProp & GlobalMarginProps & MarginProps) => (
+    <BaseCheckbox {...passProps} />
+  ),
 )`
   ${({ theme, globalMargins, ...rest }) => {
     const [marginProps, _passProps] = separateMarginProps(rest);

src/core/Form/DateInput/DatePicker/DateSelectors/DateSelectors.tsx

@@ -4,7 +4,7 @@ import classnames from 'classnames';
 import { IconChevronLeft, IconChevronRight } from 'suomifi-icons';
 import { SuomifiThemeProp, SuomifiThemeConsumer } from '../../../../theme';
 import { HtmlDiv } from '../../../../../reset';
-import { Dropdown, DropdownItem } from '../../../../Dropdown';
+import { Dropdown, DropdownItem } from '../../../Dropdown';
 import { InternalDatePickerTextProps } from '../../datePickerTexts';
 import { baseStyles } from './DateSelectors.baseStyles';
 import { Button } from '../../../../Button/Button';

src/core/Dropdown/Dropdown/Dropdown.baseStyles.tsx → src/core/Form/Dropdown/Dropdown/Dropdown.baseStyles.tsx

@@ -1,7 +1,7 @@
 import { css } from 'styled-components';
-import { SuomifiTheme } from '../../theme';
-import { element, fixInternalMargins, input } from '../../theme/reset';
-import { MarginProps, buildSpacingCSS } from '../../theme/utils/spacing';
+import { SuomifiTheme } from '../../../theme';
+import { element, fixInternalMargins, input } from '../../../theme/reset';
+import { MarginProps, buildSpacingCSS } from '../../../theme/utils/spacing';
 
 export const baseStyles = (
   theme: SuomifiTheme,

src/core/Dropdown/Dropdown/Dropdown.test.tsx → src/core/Form/Dropdown/Dropdown/Dropdown.test.tsx

@@ -3,7 +3,7 @@ import { render, act, fireEvent } from '@testing-library/react';
 
 import { Dropdown, DropdownProps } from './Dropdown';
 import { DropdownItem } from '../DropdownItem/DropdownItem';
-import { axeTest } from '../../../utils/test';
+import { axeTest } from '../../../../utils/test';
 
 const dropdownProps = {
   labelText: 'Dropdown test',

src/core/Dropdown/Dropdown/Dropdown.tsx → src/core/Form/Dropdown/Dropdown/Dropdown.tsx

@@ -1,39 +1,39 @@
 import React, { Component, ReactNode, ReactElement } from 'react';
 import { default as styled } from 'styled-components';
 import classnames from 'classnames';
-import { getConditionalAriaProp } from '../../../utils/aria';
-import { getLogger } from '../../../utils/log';
-import { AutoId } from '../../utils/AutoId/AutoId';
+import { getConditionalAriaProp } from '../../../../utils/aria';
+import { getLogger } from '../../../../utils/log';
+import { AutoId } from '../../../utils/AutoId/AutoId';
 import {
   HtmlSpan,
   HtmlDiv,
   HtmlInput,
   HtmlButton,
   HtmlButtonProps,
-} from '../../../reset';
-import { Label, LabelMode } from '../../Form/Label/Label';
+} from '../../../../reset';
+import { Label, LabelMode } from '../../Label/Label';
 import { DropdownItemProps } from '../DropdownItem/DropdownItem';
 import { baseStyles } from './Dropdown.baseStyles';
 import {
   SuomifiThemeProp,
   SuomifiThemeConsumer,
   SpacingConsumer,
-} from '../../theme';
+} from '../../../theme';
 import {
   separateMarginProps,
   MarginProps,
   GlobalMarginProps,
-} from '../../theme/utils/spacing';
+} from '../../../theme/utils/spacing';
 import {
   filterDuplicateKeys,
   forkRefs,
   getOwnerDocument,
-} from '../../../utils/common/common';
-import { Popover } from '../../../core/Popover/Popover';
-import { SelectItemList } from '../../Form/Select/BaseSelect/SelectItemList/SelectItemList';
-import { HintText } from '../../Form/HintText/HintText';
-import { StatusText } from '../../Form/StatusText/StatusText';
-import { StatusTextCommonProps } from '../../Form/types';
+} from '../../../../utils/common/common';
+import { Popover } from '../../../../core/Popover/Popover';
+import { SelectItemList } from '../../../Form/Select/BaseSelect/SelectItemList/SelectItemList';
+import { HintText } from '../../../Form/HintText/HintText';
+import { StatusText } from '../../../Form/StatusText/StatusText';
+import { StatusTextCommonProps } from '../../../Form/types';
 
 const baseClassName = 'fi-dropdown';
 

src/core/Dropdown/DropdownItem/DropdownItem.basestyles.tsx → src/core/Form/Dropdown/DropdownItem/DropdownItem.basestyles.tsx

@@ -1,6 +1,6 @@
 import { css } from 'styled-components';
-import { SuomifiTheme } from '../../theme';
-import { element } from '../../theme/reset';
+import { SuomifiTheme } from '../../../theme';
+import { element } from '../../../theme/reset';
 
 export const baseStyles = (theme: SuomifiTheme) => css`
   &.fi-dropdown_item {

src/core/Dropdown/DropdownItem/DropdownItem.tsx → src/core/Form/Dropdown/DropdownItem/DropdownItem.tsx

@@ -8,9 +8,9 @@ import {
   DropdownProviderState,
 } from '../Dropdown/Dropdown';
 import classnames from 'classnames';
-import { SuomifiThemeProp, SuomifiThemeConsumer } from '../../theme';
-import { HtmlLi, HtmlLiProps } from '../../../reset';
-import { getOwnerDocument } from '../../../utils/common';
+import { SuomifiThemeProp, SuomifiThemeConsumer } from '../../../theme';
+import { HtmlLi, HtmlLiProps } from '../../../../reset';
+import { getOwnerDocument } from '../../../../utils/common';
 
 export interface DropdownItemProps<T extends string = string>
   extends HtmlLiProps {