Merge pull request #411 from vrk-kpa/feature/textinput-improvements

[Feature] TextInput improvements

src/components/index.ts

@@ -7,7 +7,6 @@ export {
   DropdownItem,
   DropdownItemProps,
 } from './Dropdown/Dropdown';
-export { TextInput, TextInputProps } from './Form/TextInput';
 export { Checkbox, CheckboxProps } from './Form/Checkbox';
 export {
   Toggle,

src/core/Form/HintText/HintText.baseStyles.tsx

@@ -0,0 +1,14 @@
+import { css } from 'styled-components';
+import { withSuomifiTheme, TokensAndTheme } from '../../theme';
+import { font } from '../../theme/reset';
+
+export const baseStyles = withSuomifiTheme(
+  ({ theme }: TokensAndTheme) => css`
+    &.fi-hint-text {
+      display: block;
+      color: ${theme.colors.blackBase};
+      margin-bottom: ${theme.spacing.xs};
+      ${font({ theme })('bodyTextSmall')};
+    }
+  `,
+);

src/core/Form/HintText/HintText.test.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { axeTest } from '../../../utils/test/axe';
+
+import { HintText } from './HintText';
+
+describe('props', () => {
+  describe('children', () => {
+    it('shows the given text', () => {
+      const { container } = render(<HintText>Test text</HintText>);
+      expect(container.firstChild).toHaveTextContent('Test text');
+    });
+
+    it('is null when no children given', () => {
+      const { container } = render(<HintText />);
+      expect(container.firstChild).toEqual(null);
+    });
+  });
+
+  describe('id', () => {
+    it('has the given id', () => {
+      const { container } = render(<HintText id="test-id">Test text</HintText>);
+      expect(container.firstChild).toHaveAttribute('id', 'test-id');
+    });
+  });
+
+  describe('className', () => {
+    it('has the given custom classname', () => {
+      const { container } = render(
+        <HintText className="custom-style">Test text</HintText>,
+      );
+      expect(container.firstChild).toHaveClass('custom-style');
+    });
+  });
+});
+
+test(
+  'should not have basic accessibility issues',
+  axeTest(<HintText>Test text</HintText>),
+);

src/core/Form/HintText/HintText.tsx

@@ -0,0 +1,47 @@
+import React, { Component, ReactNode } from 'react';
+import classnames from 'classnames';
+import { default as styled } from 'styled-components';
+import { baseStyles } from './HintText.baseStyles';
+import { HtmlSpan, HtmlSpanProps } from '../../../reset';
+import { TokensProp, InternalTokensProp } from 'core/theme';
+import { withSuomifiDefaultProps } from '../../theme/utils';
+
+const baseClassName = 'fi-hint-text';
+
+interface InternalHintTextProps extends HtmlSpanProps {
+  /** id */
+  id?: string;
+  /** HintText element content */
+  children?: ReactNode;
+  /** Custom class name for styling and customizing  */
+  className?: string;
+}
+
+export interface HintTextProps extends InternalHintTextProps, TokensProp {}
+
+const StyledHintText = styled(
+  ({
+    className,
+    children,
+    tokens,
+    ...passProps
+  }: HintTextProps & InternalTokensProp) => (
+    <HtmlSpan
+      {...passProps}
+      className={classnames(className, baseClassName, {})}
+    >
+      {children}
+    </HtmlSpan>
+  ),
+)`
+  ${(tokens) => baseStyles(withSuomifiDefaultProps(tokens))}
+`;
+export class HintText extends Component<HintTextProps> {
+  render() {
+    const { children, ...passProps } = withSuomifiDefaultProps(this.props);
+    if (!children) {
+      return null;
+    }
+    return <StyledHintText {...passProps}>{children}</StyledHintText>;
+  }
+}

src/core/Form/LabelText/LabelText.baseStyles.tsx

@@ -10,6 +10,10 @@ export const baseStyles = withSuomifiTheme(
         display: block;
         margin-bottom: ${theme.spacing.xs};
         color: ${theme.colors.blackBase};
+
+        & .fi-label-text_optionalText {
+          ${theme.typography.bodyTextSmall};
+        }
       }
     }
   `,

src/core/Form/LabelText/LabelText.test.tsx

@@ -0,0 +1,87 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { axeTest } from '../../../utils/test/axe';
+
+import { LabelText } from './LabelText';
+
+describe('props', () => {
+  describe('children', () => {
+    it('shows the given text', () => {
+      const { container } = render(<LabelText>Test text</LabelText>);
+      expect(container.firstChild).toHaveTextContent('Test text');
+    });
+  });
+
+  describe('optionalText', () => {
+    it('has the optional text element', () => {
+      const { getByText } = render(
+        <LabelText optionalText="optional">Test text</LabelText>,
+      );
+      const optionalText = getByText('(optional)');
+      expect(optionalText).toHaveClass('fi-label-text_optionalText');
+    });
+  });
+
+  describe('id', () => {
+    it('has the given id', () => {
+      const { container } = render(
+        <LabelText id="test-id">Test text</LabelText>,
+      );
+      expect(container.firstChild).toHaveAttribute('id', 'test-id');
+    });
+  });
+
+  describe('className', () => {
+    it('has the given custom classname', () => {
+      const { container } = render(
+        <LabelText className="custom-style">Test text</LabelText>,
+      );
+      expect(container.firstChild).toHaveClass('custom-style');
+    });
+  });
+
+  describe('labelMode', () => {
+    it('should be visible by default', () => {
+      const { getByText } = render(<LabelText>Test text</LabelText>);
+      const label = getByText('Test text');
+      expect(label).toHaveClass('fi-label-text_label-span');
+    });
+
+    it('should be hidden', () => {
+      const { getByText } = render(
+        <LabelText labelMode="hidden">Test text</LabelText>,
+      );
+      const label = getByText('Test text');
+      expect(label).toHaveClass('fi-visually-hidden');
+    });
+  });
+
+  describe('asProp', () => {
+    it('has default of div as wrapping element', () => {
+      const { container } = render(<LabelText>Test text</LabelText>);
+      expect(container.firstChild).toBeInstanceOf(HTMLDivElement);
+    });
+
+    it('has the given wrapper element', () => {
+      const { container } = render(<LabelText as="label">Test text</LabelText>);
+      expect(container.firstChild).toBeInstanceOf(HTMLLabelElement);
+    });
+  });
+
+  describe('labelSpanProps', () => {
+    it('has the given props', () => {
+      const { getByText } = render(
+        <LabelText labelSpanProps={{ style: { fontSize: 12 } }}>
+          Test text
+        </LabelText>,
+      );
+      const textSpan = getByText('Test text');
+      expect(textSpan).toHaveAttribute('style', 'font-size: 12px;');
+    });
+  });
+});
+
+test(
+  'should not have basic accessibility issues',
+  axeTest(<LabelText>Test text</LabelText>),
+);