[LENS-854, LENS-858] FieldDate & FieldDateRange Components (#928)

Author: dbchristopher

packages/components/src/Calendar/Calendar.tsx

@@ -29,6 +29,7 @@ import 'react-day-picker/lib/style.css'
 import styled from 'styled-components'
 import has from 'lodash/has'
 import { mix } from 'polished'
+import noop from 'lodash/noop'
 import { reset } from '@looker/design-tokens'
 import { LocaleCodes } from '../utils/i18n'
 import { inputTextFocus } from '../Form/Inputs/InputText'
@@ -49,6 +50,7 @@ interface CalendarProps {
   onPrevClick?: (date: Date) => void
   onMonthChange?: (month: Date) => void
   viewMonth?: Date
+  disabled?: boolean
 }
 
 const NoopComponent: FC = () => null
@@ -66,18 +68,24 @@ const InternalCalendar: FC<CalendarProps> = ({
   onPrevClick,
   viewMonth,
   selectedDates,
+  disabled,
 }) => {
   const renderDateRange = selectedDates && has(selectedDates, 'from')
   const modifiers = renderDateRange ? selectedDates : {}
 
+  const disableCallback = (cb: any) => {
+    // allows provided callback to be circumvented by disabled prop
+    return (...args: any[]) => (disabled ? noop() : cb(...args)) // eslint-disable-line standard/no-callback-literal
+  }
+
   return (
     <CalendarContext.Provider
       value={{
-        onNextClick,
-        onNowClick,
-        onPrevClick,
-        showNextButton,
-        showPreviousButton,
+        onNextClick: disableCallback(onNextClick),
+        onNowClick: disableCallback(onNowClick),
+        onPrevClick: disableCallback(onPrevClick),
+        showNextButton: !disabled && showNextButton,
+        showPreviousButton: !disabled && showPreviousButton,
         size,
       }}
     >
@@ -87,7 +95,7 @@ const InternalCalendar: FC<CalendarProps> = ({
         locale={locale}
         month={viewMonth}
         showOutsideDays={true}
-        onDayClick={onDayClick}
+        onDayClick={disableCallback(onDayClick)}
         navbarElement={CalendarNav}
         captionElement={NoopComponent}
         modifiers={modifiers}
@@ -107,7 +115,7 @@ export const Calendar = styled<FC<CalendarProps>>(InternalCalendar)`
     border: 1px solid transparent;
     &:focus {
       outline: none;
-      ${inputTextFocus}
+      ${({ disabled }) => !disabled && inputTextFocus}
     }
   }
   .DayPicker-Month {
@@ -132,25 +140,35 @@ export const Calendar = styled<FC<CalendarProps>>(InternalCalendar)`
     justify-items: center;
     border: 1px solid transparent;
     transition: background-color 110ms linear;
-    color: ${({ theme }) => theme.colors.palette.charcoal700};
+    color: ${({ theme, disabled }) =>
+      disabled
+        ? theme.colors.palette.charcoal500
+        : theme.colors.palette.charcoal700};
+    cursor: ${({ disabled }) => (disabled ? 'default' : 'pointer')};
     &.DayPicker-Day--outside {
       color: ${({ theme }) => theme.colors.palette.charcoal300};
     }
     &--today {
-      color: ${({ theme }) => theme.colors.semanticColors.primary.main};
+      color: ${({ theme, disabled }) =>
+        !disabled && theme.colors.semanticColors.primary.main};
     }
     &--selected:not(.DayPicker-Day--disabled):not(.DayPicker-Day--outside) {
       position: static;
-      background-color: ${({ theme }) =>
-        theme.colors.semanticColors.primary.main};
+      background-color: ${({ theme, disabled }) =>
+        disabled
+          ? theme.colors.palette.charcoal500
+          : theme.colors.semanticColors.primary.main};
       &:hover {
-        background-color: ${({ theme }) =>
-          theme.colors.semanticColors.primary.dark};
+        background-color: ${({ theme, disabled }) =>
+          disabled
+            ? theme.colors.palette.charcoal500
+            : theme.colors.semanticColors.primary.dark};
       }
     }
     &:focus {
       border-width: 2px;
-      border-color: ${(props) => props.theme.colors.palette.purple300};
+      border-color: ${({ theme: { colors }, disabled }) =>
+        disabled ? colors.palette.charcoal200 : colors.palette.purple300};
       outline: none;
     }
   }
@@ -162,8 +180,10 @@ export const Calendar = styled<FC<CalendarProps>>(InternalCalendar)`
     .DayPicker-Day--selected {
       &.DayPicker-Day--outside,
       &:not(.DayPicker-Day--to):not(.DayPicker-Day--from) {
-        background-color: ${({ theme }) =>
-          theme.colors.semanticColors.primary.light};
+        background-color: ${({ theme, disabled }) =>
+          disabled
+            ? theme.colors.palette.charcoal200
+            : theme.colors.semanticColors.primary.light};
         color: ${({ theme }) =>
           mix(
             0.65,
@@ -207,9 +227,10 @@ export const Calendar = styled<FC<CalendarProps>>(InternalCalendar)`
   &:not(.DayPicker--interactionDisabled) {
     .DayPicker-Day:not(.DayPicker-Day--disabled):not(.DayPicker-Day--selected):not(.DayPicker-Day--outside):hover {
       &:hover {
-        background-color: ${({ theme }) =>
-          theme.colors.semanticColors.primary.light};
-        color: ${({ theme }) => theme.colors.semanticColors.primary.main};
+        background-color: ${({ theme, disabled }) =>
+          disabled ? 'transparent' : theme.colors.semanticColors.primary.light};
+        color: ${({ theme, disabled }) =>
+          !disabled && theme.colors.semanticColors.primary.main};
       }
     }
   }

packages/components/src/Form/Fields/FieldDate/FieldDate.test.tsx

@@ -0,0 +1,112 @@
+/*
+
+ MIT License
+
+ Copyright (c) 2020 Looker Data Sciences, Inc.
+
+ Permission is hereby granted, free of charge, to any person obtaining a copy
+ of this software and associated documentation files (the "Software"), to deal
+ in the Software without restriction, including without limitation the rights
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ copies of the Software, and to permit persons to whom the Software is
+ furnished to do so, subject to the following conditions:
+
+ The above copyright notice and this permission notice shall be included in all
+ copies or substantial portions of the Software.
+
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ SOFTWARE.
+
+ */
+
+import 'jest-styled-components'
+import React from 'react'
+import { mountWithTheme, renderWithTheme } from '@looker/components-test-utils'
+import { FieldDate } from './FieldDate'
+
+const realDateNow = Date.now.bind(global.Date)
+
+beforeEach(() => {
+  /* eslint-disable-next-line @typescript-eslint/unbound-method */
+  global.Date.now = jest.fn(() => 1580517818172)
+})
+
+afterEach(() => {
+  /* eslint-disable-next-line @typescript-eslint/unbound-method */
+  global.Date.now = realDateNow
+  jest.clearAllMocks()
+})
+
+test('FieldDate renders and displays label', () => {
+  const wrapper = mountWithTheme(
+    <FieldDate
+      defaultValue={new Date(Date.now())}
+      id="FieldDateID"
+      label="Test Label"
+    />
+  )
+
+  expect(wrapper.text()).toMatch(`Test Label`)
+})
+
+test('FieldDate should accept detail and description attributes', () => {
+  const { getByLabelText } = renderWithTheme(
+    <FieldDate
+      defaultValue={new Date(Date.now())}
+      description="this is the description"
+      detail="5/50"
+      id="FieldDateID"
+      label="Label"
+    />
+  )
+
+  const input = getByLabelText('Label')
+  expect(input.getAttribute('detail')).toBeDefined()
+  expect(input.getAttribute('description')).toBeDefined()
+})
+
+test('FieldDate should accept a disabled prop', () => {
+  const { getByLabelText } = renderWithTheme(
+    <FieldDate
+      defaultValue={new Date(Date.now())}
+      disabled
+      id="FieldDateID"
+      label="Disabled Label"
+    />
+  )
+
+  const input = getByLabelText('Disabled Label')
+  expect(input.getAttribute('disabled')).toBeDefined()
+})
+
+test('FieldDate should accept required attributes', () => {
+  const { getByText } = renderWithTheme(
+    <FieldDate
+      defaultValue={new Date(Date.now())}
+      id="FieldDateID"
+      label="Required Label"
+      required
+    />
+  )
+  expect(getByText('required')).toBeVisible()
+})
+
+test('FieldDate should display error message', () => {
+  const errorMessage = 'This is an error'
+
+  const { getByText } = renderWithTheme(
+    <FieldDate
+      defaultValue={new Date(Date.now())}
+      id="FieldDateID"
+      label="Validation Label"
+      validationMessage={{ message: errorMessage, type: 'error' }}
+    />
+  )
+
+  expect(getByText('This is an error')).toBeVisible()
+})

packages/components/src/Form/Fields/FieldDate/FieldDate.tsx

@@ -0,0 +1,60 @@
+/*
+
+ MIT License
+
+ Copyright (c) 2020 Looker Data Sciences, Inc.
+
+ Permission is hereby granted, free of charge, to any person obtaining a copy
+ of this software and associated documentation files (the "Software"), to deal
+ in the Software without restriction, including without limitation the rights
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ copies of the Software, and to permit persons to whom the Software is
+ furnished to do so, subject to the following conditions:
+
+ The above copyright notice and this permission notice shall be included in all
+ copies or substantial portions of the Software.
+
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ SOFTWARE.
+
+ */
+
+import React, { forwardRef, Ref } from 'react'
+import styled from 'styled-components'
+import { useID } from '../../../utils'
+import { useFormContext } from '../..'
+import { InputDate, InputDateProps } from '../../Inputs/InputDate'
+import { Field, FieldProps, omitFieldProps, pickFieldProps } from '../Field'
+
+export interface FieldInputDateProps extends FieldProps, InputDateProps {}
+
+const FieldDateComponent = forwardRef(
+  (props: FieldInputDateProps, ref: Ref<HTMLInputElement>) => {
+    const validationMessage = useFormContext(props)
+    const id = useID(props.id)
+    return (
+      <Field
+        {...pickFieldProps(props)}
+        id={id}
+        validationMessage={validationMessage}
+      >
+        <InputDate
+          {...omitFieldProps(props)}
+          aria-describedby={`${id}-describedby`}
+          id={id}
+          validationType={validationMessage && validationMessage.type}
+          ref={ref}
+        />
+      </Field>
+    )
+  }
+)
+
+FieldDateComponent.displayName = 'FieldDateComponent'
+
+export const FieldDate = styled(FieldDateComponent)``

packages/components/src/Form/Fields/FieldDate/index.ts

@@ -0,0 +1,27 @@
+/*
+
+ MIT License
+
+ Copyright (c) 2020 Looker Data Sciences, Inc.
+
+ Permission is hereby granted, free of charge, to any person obtaining a copy
+ of this software and associated documentation files (the "Software"), to deal
+ in the Software without restriction, including without limitation the rights
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ copies of the Software, and to permit persons to whom the Software is
+ furnished to do so, subject to the following conditions:
+
+ The above copyright notice and this permission notice shall be included in all
+ copies or substantial portions of the Software.
+
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ SOFTWARE.
+
+ */
+
+export * from './FieldDate'