diff --git a/packages/lib-components/src/components/actions/Dropdown/DropdownMenu.tsx b/packages/lib-components/src/components/actions/Dropdown/DropdownMenu.tsx index 514048d61d..81c9cad293 100644 --- a/packages/lib-components/src/components/actions/Dropdown/DropdownMenu.tsx +++ b/packages/lib-components/src/components/actions/Dropdown/DropdownMenu.tsx @@ -13,7 +13,7 @@ import { styled } from '../../../styled'; const Container = styled.div` background-color: ${({ theme }) => theme.colors.background}; - border: 0.1rem solid ${({ theme }) => theme.colors.secondary}; + border: 0.1rem solid ${({ theme }) => theme.colors.backgroundAccent}; border-radius: ${({ theme }) => theme.borderRadius.medium}; padding: ${({ theme }) => theme.spacing['0_5']}; `; diff --git a/packages/lib-components/src/components/actions/Dropdown/DropdownMenuGroup.tsx b/packages/lib-components/src/components/actions/Dropdown/DropdownMenuGroup.tsx index 5639e74b69..99aeb9cd69 100644 --- a/packages/lib-components/src/components/actions/Dropdown/DropdownMenuGroup.tsx +++ b/packages/lib-components/src/components/actions/Dropdown/DropdownMenuGroup.tsx @@ -4,7 +4,7 @@ import { styled } from '../../../styled'; const Container = styled.div<{ divider: boolean; hasChildren: boolean }>` padding-bottom: ${({ theme }) => theme.spacing['0_5']}; border-bottom: ${({ divider, theme, hasChildren }) => - divider && hasChildren && `2px solid ${theme.colors.secondary}`}; + divider && hasChildren && `2px solid ${theme.colors.backgroundAccent}`}; margin-bottom: ${({ divider, theme, hasChildren }) => divider && hasChildren && theme.spacing['0_5']}; padding-left: 0; diff --git a/packages/lib-components/src/components/data/Table/style.ts b/packages/lib-components/src/components/data/Table/style.ts index 8cf0a79e18..744f1c3418 100644 --- a/packages/lib-components/src/components/data/Table/style.ts +++ b/packages/lib-components/src/components/data/Table/style.ts @@ -50,7 +50,7 @@ export const StyledTable = styled.table<{ density: Density }>` } td { - border-bottom: 1px solid ${({ theme }) => theme.colors.secondary}; + border-bottom: 1px solid ${({ theme }) => theme.colors.backgroundAccent}; } th { diff --git a/packages/lib-components/src/components/feedback/Popover/Popover.stories.tsx b/packages/lib-components/src/components/feedback/Popover/Popover.stories.tsx index 7de8accb40..f4457220e1 100644 --- a/packages/lib-components/src/components/feedback/Popover/Popover.stories.tsx +++ b/packages/lib-components/src/components/feedback/Popover/Popover.stories.tsx @@ -1,6 +1,8 @@ import React from 'react'; import { Meta, StoryFn } from '@storybook/react'; import { Popover, PopoverProps } from '.'; +import { IconButton } from '../../actions'; +import { AiFillBug as BugIcon } from 'react-icons/ai'; export default { title: 'Feedback/Popover', @@ -12,7 +14,20 @@ export default { export const UnControlled: StoryFn = () => ( - hover this to open it the popover + Click this to open it in the popover this is the content of the popover ); + +export const CustomTrigger: StoryFn = () => ( + <> + By default trigger is rendered as a button, but you can pass any component as a trigger by setting the asChild prop + on the Popover.Trigger component. + + + } ariaLabel="click me" /> + + this is the content of the popover + + +); diff --git a/packages/lib-components/src/components/feedback/Popover/PopoverContent.tsx b/packages/lib-components/src/components/feedback/Popover/PopoverContent.tsx index 7bd59e8401..0fd91c2a9d 100644 --- a/packages/lib-components/src/components/feedback/Popover/PopoverContent.tsx +++ b/packages/lib-components/src/components/feedback/Popover/PopoverContent.tsx @@ -6,7 +6,7 @@ import { useTheme } from '../../../hooks'; const Container = styled.div` background-color: ${({ theme }) => theme.colors.background}; - border: 0.1rem solid ${({ theme }) => theme.colors.secondary}; + border: 0.1rem solid ${({ theme }) => theme.colors.backgroundAccent}; border-radius: ${({ theme }) => theme.borderRadius.medium}; `; @@ -32,7 +32,7 @@ export const PopoverContent = forwardRef diff --git a/packages/lib-components/src/components/feedback/Popover/usePopover.tsx b/packages/lib-components/src/components/feedback/Popover/usePopover.tsx index 0d88bb7ef6..e19e6d63c4 100644 --- a/packages/lib-components/src/components/feedback/Popover/usePopover.tsx +++ b/packages/lib-components/src/components/feedback/Popover/usePopover.tsx @@ -16,6 +16,8 @@ import { export interface PopoverOptions { initialOpen?: boolean; placement?: Placement; + /// If focus is modal, focus is trapped inside the floating element and outside content cannot be accessed. + /// When set, the floating element should have a dedicated close button. modal?: boolean; open?: boolean; onOpenChange?: (open: boolean) => void; diff --git a/packages/lib-components/src/components/inputs/Date/DatePicker/Controlled.tsx b/packages/lib-components/src/components/inputs/Date/DatePicker/Controlled.tsx new file mode 100644 index 0000000000..d1b9e6f82b --- /dev/null +++ b/packages/lib-components/src/components/inputs/Date/DatePicker/Controlled.tsx @@ -0,0 +1,95 @@ +import { FC, useState } from 'react'; +import { defaultInputProps, defaultInputPropsFactory, ControlledInputProps } from '../../InputProps'; +import { useController } from 'react-hook-form'; +import { GenericDatePicker, DatePickerProps } from './Generic'; +import { Label, ErrorMessage, Wrapper, Description } from '../../layout'; +import { Container } from './style'; +import { Skeleton } from '../../../../components'; + +export type ControlledDatePickerProps = ControlledInputProps & DatePickerProps; +const defaultsApplier = defaultInputPropsFactory(defaultInputProps); + +export const ControlledDatePicker: FC = (props) => { + const { + label, + name, + size, + hint, + control, + disabled, + readOnly, + required, + format, + mode, + relativePickerOptions, + timePickerOptions, + placeholder, + popOverPlacement, + loading, + description, + } = defaultsApplier(props); + + const [showError, setShowError] = useState(true); + + const { + field, + fieldState: { error }, + } = useController({ + name, + control, + }); + + const handleOnFocus = () => { + setShowError(false); + }; + + const handleOnBlur = () => { + field.onBlur(); + setShowError(true); + }; + + return ( + + + {label && ( + + {description && } + + ); +}; diff --git a/packages/lib-components/src/components/inputs/Date/DatePicker/DatePicker.stories.tsx b/packages/lib-components/src/components/inputs/Date/DatePicker/DatePicker.stories.tsx new file mode 100644 index 0000000000..ee5c1b11d1 --- /dev/null +++ b/packages/lib-components/src/components/inputs/Date/DatePicker/DatePicker.stories.tsx @@ -0,0 +1,188 @@ +import React from 'react'; +import { useState } from 'react'; +import { Meta, StoryFn } from '@storybook/react'; +import { styled } from '../../../../styled'; +import { Button, DatePicker, DatePickerProps } from '../../../../components'; +import { useForm, SubmitHandler } from 'react-hook-form'; +import { z } from 'zod'; +import { zodResolver } from '@hookform/resolvers/zod'; +import { DateTime } from 'luxon'; + +const Wrapper = styled.div` + display: flex; + height: 100vh; + width: 50%; + margin: 0 auto; + flex-direction: column; + align-items: center; + justify-content: center; +`; + +export default { + title: 'Inputs/DatePicker', + component: DatePicker, + args: { + label: 'date', + name: 'date', + required: false, + description: 'This is a description', + popOverPlacement: 'bottom', + readOnly: false, + loading: false, + timePickerOptions: { + interval: 30, + }, + relativePickerOptions: { + showFriendlyName: true, + timeDirection: 'future', + }, + }, +} as Meta; + +const validationSchema = z.object({ + date: z.string().datetime({ offset: true }), +}); +type FormFields = { date: string }; + +export const OnDateSubmit: StoryFn = (args) => { + const [result, setResult] = useState('none'); + + const { control, handleSubmit } = useForm({ + mode: 'onSubmit', + resolver: zodResolver(validationSchema), + }); + + const onSubmit: SubmitHandler = ({ date }) => { + setResult(date); + }; + + return ( + + Note: for zod to accept the date, an extra option is needed: {'{ offset: true }'} +
+ +