[Feature] TimeInput

.github/CODEOWNERS

@@ -1 +1 @@
-*       @LJKaski @riitasointi @Riippi @jenkrisu
+*       @LJKaski @riitasointi

.styleguidist/spacingprops.md

@@ -77,6 +77,7 @@ The following components support margin props
 - Text
 - Textarea
 - TextInput
+- TimeInput
 - Toast
 - ToggleButton
 - ToggleInput

.styleguidist/styleguidist.sections.js

@@ -16,6 +16,7 @@ const singularComponents = [
   'Notification',
   'Toast',
   ['Form', 'TextInput'],
+  ['Form', 'TimeInput'],
   ['Form', 'SearchInput'],
   ['Form', 'Textarea'],
   ['Form', 'DateInput'],

src/core/Form/DateInput/DateInput.test.tsx

@@ -191,6 +191,22 @@ describe('callbacks', () => {
       expect(mockOnBlur).toBeCalledTimes(1);
     });
   });
+
+  describe('onDatePickerButtonBlur', () => {
+    it('calls onBlur when date picker button is blurred', () => {
+      const mockOnBlur = jest.fn();
+      const { getByRole } = render(
+        <DateInput
+          labelText="Date"
+          datePickerEnabled
+          onDatePickerButtonBlur={mockOnBlur}
+        />,
+      );
+      fireEvent.focus(getByRole('button'));
+      fireEvent.blur(getByRole('button'));
+      expect(mockOnBlur).toBeCalledTimes(1);
+    });
+  });
 });
 
 describe('props', () => {

src/core/Form/DateInput/DateInput.tsx

@@ -152,6 +152,10 @@ export interface DatePickerProps {
    * </pre>
    */
   dateAdapter?: DateAdapter;
+  /** Callback fired on datepicker button blur
+   * @param {FocusEvent<HTMLButtonElement>} event FocusEvent
+   */
+  onDatePickerButtonBlur?: (event: FocusEvent<HTMLButtonElement>) => void;
 }
 export interface DateInputProps
   extends DatePickerProps,
@@ -212,6 +216,7 @@ const BaseDateInput = (props: DateInputProps) => {
     labelText,
     labelMode,
     onChange: propOnChange,
+    onDatePickerButtonBlur,
     wrapperProps,
     optionalText,
     status,
@@ -413,6 +418,11 @@ const BaseDateInput = (props: DateInputProps) => {
                 })}
                 onClick={() => toggleCalendar(!calendarVisible)}
                 disabled={passProps.disabled}
+                onBlur={(event) => {
+                  if (!!onDatePickerButtonBlur) {
+                    onDatePickerButtonBlur(event);
+                  }
+                }}
               >
                 <VisuallyHidden>
                   {buttonDateLabel || texts.openButtonLabel}

src/core/Form/TextInput/TextInput.tsx

@@ -99,12 +99,12 @@ interface BaseTextInputProps
   labelMode?: LabelMode;
   /** Placeholder text for the input. Use only as visual aid, not for instructions. */
   visualPlaceholder?: string;
-  /** Hint text to be shown below the component */
+  /** Hint text to be shown below the component's label */
   hintText?: string;
   /**
    * `'default'` | `'error'`
    *
-   * Status of the component. Error state creates a red border around the Checkbox.
+   * Status of the component. Error state creates a red border around the input.
    * Always use a descriptive `statusText` with an error status.
    * @default default
    */

src/core/Form/TimeInput/TimeInput.baseStyles.tsx

@@ -0,0 +1,140 @@
+import { css } from 'styled-components';
+import { SuomifiTheme } from '../../theme';
+import { element, containerIEFocus, font } from '../../theme/reset';
+import { math } from 'polished';
+
+export const baseStyles = (theme: SuomifiTheme) => css`
+  ${font(theme)('bodyText')}
+  width: 290px;
+
+  & .fi-time-input_character-counter {
+    ${font(theme)('bodyTextSmall')};
+    color: ${theme.colors.blackBase};
+    font-size: 14px;
+    line-height: 20px;
+    flex: none;
+    margin-top: 4px;
+
+    &.fi-time-input_character-counter--error {
+      color: ${theme.colors.alertBase};
+      ${font(theme)('bodySemiBoldSmall')};
+      font-size: 14px;
+      line-height: 20px;
+    }
+  }
+
+  & .fi-time-input_bottom-wrapper {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  & .fi-time-input_wrapper {
+    width: 100%;
+    display: inline-block;
+
+    & .fi-time-input_label--visible {
+      margin-bottom: ${theme.spacing.xs};
+    }
+
+    & .fi-hint-text {
+      margin-bottom: ${theme.spacing.xs};
+    }
+
+    & .fi-time-input_statusText--has-content {
+      margin-top: ${theme.spacing.xxs};
+    }
+  }
+
+  & .fi-time-input_input-element-container {
+    width: 60px;
+    ${containerIEFocus(theme)}
+
+    &:focus-within {
+      position: relative;
+      ${theme.focuses.highContrastFocus}
+
+      &::after {
+        ${theme.focuses.absoluteFocus}
+      }
+    }
+  }
+
+  &.fi-time-input--full-width {
+    width: 100%;
+  }
+
+  & .fi-time-input_input {
+    ${element(theme)}
+    ${font(theme)('actionElementInnerText')}
+    width: 100%;
+    border: 1px solid ${theme.colors.depthLight1};
+    border-radius: ${theme.radiuses.basic};
+    line-height: 1;
+    background-color: ${theme.colors.whiteBase};
+    height: 40px;
+    padding: ${theme.spacing.insetL};
+    border-color: ${theme.colors.depthDark3};
+
+    &::placeholder {
+      color: ${theme.colors.depthDark2};
+      opacity: 1;
+      text-align: center;
+    }
+    &::-ms-clear {
+      display: none;
+      width: 0;
+      height: 0;
+    }
+    &::-ms-reveal {
+      display: none;
+      width: 0;
+      height: 0;
+    }
+  }
+
+  &.fi-time-input_with-icon {
+    & .fi-time-input_input-element-container {
+      position: relative;
+    }
+
+    & .fi-time-input_input {
+      padding-right: ${math(
+        `${theme.spacing.insetXl} * 2 + ${theme.spacing.insetM}`,
+      )};
+    }
+
+    & .fi-icon {
+      position: absolute;
+      width: 18px;
+      height: 18px;
+      top: ${theme.spacing.insetL};
+      right: ${theme.spacing.insetL};
+    }
+  }
+
+  &.fi-time-input--error {
+    & .fi-time-input_input {
+      border: 2px solid ${theme.colors.alertBase};
+      padding-left: 9px;
+      padding-top: 7px;
+      padding-bottom: 7px;
+    }
+  }
+  &.fi-time-input--success {
+    & .fi-time-input_input {
+      border: 2px solid ${theme.colors.successBase};
+      padding-left: 9px;
+      padding-top: 7px;
+      padding-bottom: 7px;
+    }
+  }
+  &.fi-time-input--disabled {
+    & .fi-time-input_input {
+      color: ${theme.colors.depthBase};
+      background-color: ${theme.colors.depthLight3};
+    }
+    & .fi-icon-base-fill {
+      fill: ${theme.colors.depthBase};
+    }
+  }
+`;