+
+ 
+
+
+`;
+
+exports[`Storyshots Popover Title 1`] = `
+
+
+
+
+
+
+
+`;
+
+exports[`Storyshots Radio Group Default 1`] = `
+
+
+
+
+
+
+
+`;
+
+exports[`Storyshots Radio Group Partially Disabled 1`] = `
+
+
+
+
+
+`;
+
exports[`Storyshots Select Default 1`] = `
Lorem
@@ -696,10 +735,10 @@ exports[`Storyshots Select Full Width 1`] = `
exports[`Storyshots Select Icon 1`] = `
![aws.svg]()
@@ -892,7 +933,7 @@ exports[`Storyshots Select Search 1`] = `
exports[`Storyshots Skeleton Circle 1`] = `
@@ -901,27 +942,27 @@ exports[`Storyshots Skeleton Circle 1`] = `
exports[`Storyshots Skeleton Count 1`] = `
Array [
,
,
,
,
,
@@ -930,7 +971,7 @@ Array [
exports[`Storyshots Skeleton Default 1`] = `
@@ -1052,3 +1093,98 @@ exports[`Storyshots Toggle Small 1`] = `
/>
`;
+
+exports[`Storyshots Tooltip Default 1`] = `
+> = (args: FormProps) => (
)
diff --git a/src/components/Form/FormRadioGroup/FormRadioGroup.test.tsx b/src/components/Form/FormRadioGroup/FormRadioGroup.test.tsx
new file mode 100644
index 00000000..1fe181d0
--- /dev/null
+++ b/src/components/Form/FormRadioGroup/FormRadioGroup.test.tsx
@@ -0,0 +1,89 @@
+import { basicOptions } from '../../RadioGroup/fixtures/sample_options'
+import { Controller } from 'react-hook-form'
+import FieldContext from '../FieldContext'
+import FieldLabel from '../FieldLabel'
+import RadioGroup from '../../RadioGroup'
+import React from 'react'
+import FormRadioGroup, { FormRadioGroupProps } from './index'
+import { mount, ReactWrapper } from 'enzyme'
+
+jest.mock('react-hook-form', () => ({
+ ...jest.requireActual('react-hook-form'),
+ Controller: () => ,
+ useFormContext: () => ({
+ control: jest.fn(),
+ errors: () => ({})
+ })
+}))
+
+let wrapper: ReactWrapper
+
+const mockChangeEvent = {
+ onChange: jest.fn(),
+ value: 'abc'
+} as jest.Mocked
+const mockOnSubmit = jest.fn()
+
+const getRenderedCmp = (wrapper: ReactWrapper) =>
+ wrapper.find(Controller).invoke('render')!(mockChangeEvent)
+
+beforeEach(() => {
+ wrapper = mount(
+
+
+ )
+})
+
+afterEach(() => {
+ jest.resetAllMocks()
+})
+
+describe('FormRadioGroup', () => {
+ it('renders', () => {
+ expect(wrapper).toHaveLength(1)
+ })
+
+ it('correctly passes a default value from initial values if it exists', () => {
+ expect(wrapper.find(Controller).props().defaultValue).toEqual('bar')
+ })
+
+ it('should render a Radio Group component', () => {
+ const radioGroup = getRenderedCmp(wrapper)
+
+ expect(radioGroup.type).toBe(RadioGroup)
+ })
+
+ it('should call onChange with the target value extracted from the event', () => {
+ const radioGroup = getRenderedCmp(wrapper)
+
+ radioGroup.props.onChange({ target: { value: 'foo' } })
+
+ expect(mockChangeEvent.onChange).toHaveBeenCalledWith('foo')
+ })
+
+ it('renders a label if one is passed in', () => {
+ wrapper = mount(
+
+
+ )
+ expect(wrapper.find(FieldLabel)).toHaveLength(1)
+ })
+})
diff --git a/src/components/Form/FormRadioGroup/index.tsx b/src/components/Form/FormRadioGroup/index.tsx
new file mode 100644
index 00000000..26a991b7
--- /dev/null
+++ b/src/components/Form/FormRadioGroup/index.tsx
@@ -0,0 +1,63 @@
+import { BaseFieldProps } from '../types'
+import FieldLabel from '../FieldLabel'
+import { getFormFieldDataTag } from '../utils'
+import { Controller, useFormContext } from 'react-hook-form'
+import FieldContext, { FieldContextProps } from '../FieldContext'
+import RadioGroup, { RadioGroupProps } from '../../RadioGroup'
+import React, { FC, useContext } from 'react'
+
+export interface FormRadioGroupProps
+ extends BaseFieldProps,
+ Omit {}
+
+const FormRadioGroup: FC = ({
+ defaultValue,
+ label,
+ labelSkeletonWidth,
+ name,
+ required,
+ rules = {},
+ ...rest
+}: FormRadioGroupProps) => {
+ const { control } = useFormContext()
+ const { initialValues, loading } = useContext(
+ FieldContext
+ )
+
+ rules.required = true
+
+ const initialValue = (initialValues[name] as string) || defaultValue || ''
+
+ return (
+
+
+ )
+}
+/* --------------------------------------- */
+
+jest.mock('react-hook-form', () => ({
+ ...jest.requireActual('react-hook-form'),
+ Controller: () => ,
+ useFormContext: () => ({
+ control: jest.fn(),
+ errors: () => ({})
+ })
+}))
+
+let wrapper: ReactWrapper
+
+const mockOnSubmit = jest.fn()
+
+beforeEach(() => {
+ mountWrapper({ initialValues: { foo: [0] }, name: 'foo' })
+})
+
+afterEach(() => {
+ jest.resetAllMocks()
+})
+
+describe('FormTree', () => {
+ it('renders', () => {
+ expect(wrapper).toHaveLength(1)
+ })
+
+ it('correctly passes a default value from initial values if it exists', () => {
+ expect(wrapper.find(Controller).props().defaultValue).toMatchObject([0])
+ })
+
+ it('correctly passes default checked as default value if initial values do not exist', () => {
+ mountWrapper({ defaultChecked: [1], initialValues: {}, name: 'foo' })
+ expect(wrapper.find(Controller).props().defaultValue).toMatchObject([1])
+ })
+
+ it('correctly passes an empty array as default value if initial values and default checked do not exist', () => {
+ mountWrapper({ initialValues: {}, name: 'foo' })
+ expect(wrapper.find(Controller).props().defaultValue).toMatchObject([])
+ })
+
+ it('correctly passes default values if both default checked and initial values exist', () => {
+ mountWrapper({
+ defaultChecked: [1],
+ initialValues: { foo: [0] },
+ name: 'foo'
+ })
+ expect(wrapper.find(Controller).props().defaultValue).toMatchObject([0])
+ })
+
+ it('should render a Tree component', () => {
+ const test = {
+ onChange: jest.fn()
+ } as jest.Mocked
+
+ const tree = wrapper.find(Controller).invoke('render')!(test)
+
+ expect(tree.type).toBe(Tree)
+ })
+
+ it('renders a label if one is passed in', () => {
+ wrapper = mount(
+
+
+ )
+
+ expect(wrapper.find(FieldLabel)).toHaveLength(1)
+ })
+})
diff --git a/src/components/Form/FormTree/index.tsx b/src/components/Form/FormTree/index.tsx
new file mode 100644
index 00000000..19d55a4b
--- /dev/null
+++ b/src/components/Form/FormTree/index.tsx
@@ -0,0 +1,58 @@
+import { BaseFieldProps } from '../types'
+import FieldLabel from '../FieldLabel'
+import { getFormFieldDataTag } from '../utils'
+import { Controller, useFormContext } from 'react-hook-form'
+import FieldContext, { FieldContextProps } from '../FieldContext'
+import React, { FC, useContext } from 'react'
+import Tree, { TreeId, TreeProps } from '../../Tree'
+
+export interface FormTreeProps
+ extends BaseFieldProps,
+ Omit {}
+
+const FormTree: FC = ({
+ defaultChecked,
+ label,
+ labelSkeletonWidth,
+ name,
+ required,
+ rules = {},
+ ...rest
+}: FormTreeProps) => {
+ const { control } = useFormContext()
+ const { initialValues, loading } = useContext(
+ FieldContext
+ )
+ const defaultValue =
+ (initialValues[name] as TreeId[]) || defaultChecked || []
+
+ return (
+ ({
Form.SubmitButton = FormSubmitButton
Form.Input = FormInput
+Form.RadioGroup = FormRadioGroup
Form.Select = FormSelect
+Form.Tree = FormTree
export * from './types'
export default Form
diff --git a/src/components/Input/index.tsx b/src/components/Input/index.tsx
index 5cab0941..134e774b 100644
--- a/src/components/Input/index.tsx
+++ b/src/components/Input/index.tsx
@@ -5,7 +5,10 @@ import cn from 'classnames'
import { createUseStyles } from 'react-jss'
import { getDataTestAttributeProp } from '../utils'
import Skeleton from '../Skeleton'
-import { defaultFieldWidth, fieldErrorStyles } from '../assets/styleguide'
+import {
+ defaultFieldWidth,
+ fieldErrorStyles
+} from '../assets/styles/styleguide'
import React, { FC } from 'react'
const useStyles = createUseStyles({
diff --git a/src/components/Link/index.tsx b/src/components/Link/index.tsx
index c8febf14..ddd23933 100644
--- a/src/components/Link/index.tsx
+++ b/src/components/Link/index.tsx
@@ -2,7 +2,7 @@ import 'antd/lib/typography/style/index.css'
import { CommonComponentProps } from '../types'
import { createUseStyles } from 'react-jss'
import { getDataTestAttributeProp } from '../utils'
-import { linkColor } from '../assets/styleguide'
+import { linkColor } from '../assets/styles/styleguide'
import { Typography } from 'antd'
import React, { FC, ReactNode } from 'react'
diff --git a/src/components/Popover/Popover.stories.tsx b/src/components/Popover/Popover.stories.tsx
new file mode 100644
index 00000000..ed70ec23
--- /dev/null
+++ b/src/components/Popover/Popover.stories.tsx
@@ -0,0 +1,48 @@
+import { action } from '@storybook/addon-actions'
+import Button from '../Button'
+import Icon from '../Icon'
+import { placementOptions } from '../utils'
+import React from 'react'
+import { Meta, Story } from '@storybook/react/types-6-0'
+import Popover, { PopoverProps } from './index'
+
+export default {
+ argTypes: {
+ children: { control: { disable: true } },
+ content: {
+ control: { disable: true },
+ defaultValue: (
+
+ )
+ },
+ placement: {
+ control: {
+ options: placementOptions,
+ type: 'select'
+ }
+ },
+ title: { control: { type: 'text' } }
+ },
+ component: Popover,
+ decorators: [
+ (PopoverStory: Story) => (
+ = args => (
+
+
+)
+
+export const Default = Template.bind({})
+
+export const Title = Template.bind({})
+Title.args = {
+ title: 'Account Info'
+}
diff --git a/src/components/Popover/Popover.test.tsx b/src/components/Popover/Popover.test.tsx
new file mode 100644
index 00000000..caaa85b3
--- /dev/null
+++ b/src/components/Popover/Popover.test.tsx
@@ -0,0 +1,46 @@
+import { Popover as AntDPopover } from 'antd'
+import React from 'react'
+import Popover, { PopoverProps } from './index'
+import { shallow, ShallowWrapper } from 'enzyme'
+
+let wrapper: ShallowWrapper
+
+const mockContent =
+): ShallowWrapper =>
+ shallow(
+
+
+ )
+
+beforeEach(() => {
+ wrapper = getWrapper()
+})
+
+describe('Popover', () => {
+ it('renders', () => {
+ expect(wrapper).toHaveLength(1)
+ })
+
+ it('correctly passes the content prop', () => {
+ expect(wrapper.find(AntDPopover).props().content).toEqual(mockContent)
+ })
+
+ it('correctly passes the title prop if one is provided', () => {
+ wrapper = getWrapper({ title: mockTitle })
+ expect(wrapper.find(AntDPopover).props().title).toEqual(mockTitle)
+ })
+
+ it('correctly passes the placement prop if one is provided', () => {
+ wrapper = getWrapper({ placement: 'top' })
+ expect(wrapper.find(AntDPopover).props().placement).toEqual('top')
+ })
+
+ it('has a default placement of bottom', () => {
+ expect(wrapper.find(AntDPopover).props().placement).toBe('bottom')
+ })
+})
diff --git a/src/components/Popover/index.tsx b/src/components/Popover/index.tsx
new file mode 100644
index 00000000..f73cda68
--- /dev/null
+++ b/src/components/Popover/index.tsx
@@ -0,0 +1,56 @@
+import '../assets/styles/antdAnimations.css'
+import 'antd/lib/popover/style/index.css'
+import { Popover as AntDPopover } from 'antd'
+import cn from 'classnames'
+import { CommonComponentProps } from '../types'
+import { getDataTestAttributeProp } from '../utils'
+import { TooltipPlacement } from 'antd/es/tooltip'
+import React, { FC, ReactNode } from 'react'
+
+export type PopoverContent = string | ReactNode
+
+export interface PopoverProps extends CommonComponentProps {
+ /**
+ * Element popover should be anchored to
+ */
+ children: ReactNode
+ /**
+ * Array of classes to pass to element
+ * @default []
+ */
+ classes?: string[]
+ /**
+ * Content rendered inside of popover
+ */
+ content: PopoverContent
+ /**
+ * Position of popover relative to the target
+ */
+ placement?: TooltipPlacement
+ /**
+ * Title of popover
+ */
+ title?: PopoverContent
+}
+
+const Popover: FC = ({
+ children,
+ classes = [],
+ content,
+ dataTag,
+ placement = 'bottom',
+ title
+}: PopoverProps) => (
+
+
+ {children}
+
+
+)
+
+export default Popover
diff --git a/src/components/RadioGroup/RadioGroup.stories.tsx b/src/components/RadioGroup/RadioGroup.stories.tsx
new file mode 100644
index 00000000..ca675971
--- /dev/null
+++ b/src/components/RadioGroup/RadioGroup.stories.tsx
@@ -0,0 +1,30 @@
+import React from 'react'
+import { basicOptions, basicOptionsDisabled } from './fixtures/sample_options'
+import { Meta, Story } from '@storybook/react/types-6-0'
+import RadioGroup, { RadioGroupProps } from './index'
+
+export default {
+ argTypes: {
+ value: { control: { disable: true } }
+ },
+ component: RadioGroup,
+ title: 'Radio Group'
+} as Meta
+
+const commonStoryProps = {
+ /**
+ * Storybook automatically passes an onChange but not a value to RadioGroup, so the component won't work
+ * properly in the story. Passing undefined here ensures that RadioGroup is uncontrolled.
+ */
+ onChange: undefined
+}
+
+const Template: Story = args => (
+ = ({
+ options
+}: RadioGroupProps) => {
+ const classes = useStyles()
+
+ return (
+ = (props: RadioGroupProps) => {
+ const {
+ defaultValue,
+ dataTag,
+ disabled = false,
+ loading = false,
+ onChange,
+ options,
+ value
+ } = props
+
+ let controlledCmpProps = {}
+
+ if (onChange) {
+ controlledCmpProps = {
+ onChange,
+ value
+ }
+ }
+
+ return loading ? (
+ = args => (
+
+
+)
+
+export const Default = Template.bind({})
+Default.args = {
+ title: 'Dassana'
+}
diff --git a/src/components/Tooltip/Tooltip.test.tsx b/src/components/Tooltip/Tooltip.test.tsx
new file mode 100644
index 00000000..809a510a
--- /dev/null
+++ b/src/components/Tooltip/Tooltip.test.tsx
@@ -0,0 +1,40 @@
+import { Tooltip as AntDTooltip } from 'antd'
+import React from 'react'
+import { shallow, ShallowWrapper } from 'enzyme'
+import Tooltip, { TooltipProps } from './index'
+
+let wrapper: ShallowWrapper
+
+const mockTitle = 'foo'
+
+const getWrapper = (
+ additionalProps?: Omit
+): ShallowWrapper =>
+ shallow(
+
+
+ )
+
+beforeEach(() => {
+ wrapper = getWrapper()
+})
+
+describe('Tooltip', () => {
+ it('renders', () => {
+ expect(wrapper).toHaveLength(1)
+ })
+
+ it('correctly passes the title prop', () => {
+ expect(wrapper.find(AntDTooltip).props().title).toEqual(mockTitle)
+ })
+
+ it('correctly passes the placement prop if one is provided', () => {
+ wrapper = getWrapper({ placement: 'top' })
+ expect(wrapper.find(AntDTooltip).props().placement).toEqual('top')
+ })
+
+ it('has a default placement of right', () => {
+ expect(wrapper.find(AntDTooltip).props().placement).toBe('right')
+ })
+})
diff --git a/src/components/Tooltip/index.tsx b/src/components/Tooltip/index.tsx
new file mode 100644
index 00000000..372d0f4f
--- /dev/null
+++ b/src/components/Tooltip/index.tsx
@@ -0,0 +1,51 @@
+import '../assets/styles/antdAnimations.css'
+import 'antd/lib/tooltip/style/index.css'
+import { Tooltip as AntDTooltip } from 'antd'
+import cn from 'classnames'
+import { CommonComponentProps } from '../types'
+import { getDataTestAttributeProp } from '../utils'
+import { TooltipPlacement } from 'antd/es/tooltip'
+import React, { FC, ReactNode } from 'react'
+
+export type TooltipTitle = string | ReactNode
+
+export interface TooltipProps extends CommonComponentProps {
+ /**
+ * Element tooltip should be anchored to
+ */
+ children: ReactNode
+ /**
+ * Array of classes to pass to element
+ * @default []
+ */
+ classes?: string[]
+ /**
+ * Position of tooltip relative to the target
+ */
+ placement?: TooltipPlacement
+ /**
+ * Text shown in the tooltip
+ */
+ title: TooltipTitle
+}
+
+const Tooltip: FC = ({
+ children,
+ classes = [],
+ dataTag,
+ placement = 'right',
+ title
+}: TooltipProps) => (
+
+
+ {children}
+
+
+)
+
+export default Tooltip
diff --git a/src/components/Tree/Tree.stories.tsx b/src/components/Tree/Tree.stories.tsx
new file mode 100644
index 00000000..b431dd28
--- /dev/null
+++ b/src/components/Tree/Tree.stories.tsx
@@ -0,0 +1,36 @@
+import { action } from '@storybook/addon-actions'
+import React from 'react'
+import treeData0 from './fixtures/0_sample_data'
+import { Meta, Story } from '@storybook/react/types-6-0'
+import Tree, { TreeProps } from './index'
+
+export default {
+ argTypes: {
+ onChange: {
+ control: { disable: true },
+ defaultValue: action('onChange')
+ },
+ treeData: {
+ table: {
+ type: {
+ detail: `interface TreeNodeType {
+ id: string | number
+ name: string
+ children?: TreeNodeType[]
+}
+ `
+ }
+ }
+ }
+ },
+ component: Tree,
+ title: 'Tree'
+} as Meta
+
+const Template: Story = args => = (
+ props: TreeNodeSkeletonProps
+) => {
+ const classes = useStyles(props)
+
+ return (
+
+ {generateTreeNodeSkeletons(treeNodeCount - 1)}
+ {generateTreeNodeSkeletons(random(1, 3), treeNodeCount)}
+
+)
+
+interface TreeSkeletonProps {
+ blockCount: number
+ treeNodeCount: number
+}
+
+const TreeSkeleton: FC = ({
+ blockCount,
+ treeNodeCount
+}: TreeSkeletonProps) => (
+ {
+ toBeWithinRange(a: number, b: number): R
+ }
+ }
+}
+
+expect.extend({
+ toBeWithinRange(received, floor, ceiling) {
+ const pass = received >= floor && received <= ceiling
+ if (pass) {
+ return {
+ message: () =>
+ `expected ${received} not to be within range ${floor} - ${ceiling}`,
+ pass: true
+ }
+ } else {
+ return {
+ message: () =>
+ `expected ${received} to be within range ${floor} - ${ceiling}`,
+ pass: false
+ }
+ }
+ }
+})
+
+let wrapper: ReactWrapper
+
+beforeEach(() => {
+ wrapper = mount(
+
+const Tree: FC = ({
+ classes = [],
+ dataTag,
+ defaultChecked = [],
+ disabled = false,
+ loading = false,
+ onChange,
+ skeletonBlockCount = 3,
+ skeletonTreeNodeCount = 3,
+ treeData
+}: TreeProps) => {
+ const mappedTreeData = processTreeData(treeData)
+
+ let controlledCmpProps = {}
+
+ const treeClasses = cn(classes)
+
+ if (onChange) {
+ controlledCmpProps = {
+ onCheck: (_: TreeId[], info: Record) =>
+ getLeafNodeIds(info, onChange)
+ }
+ }
+
+ if (skeletonBlockCount < 1)
+ throw new Error('skeletonBlockCount must be a positive integer')
+
+ if (skeletonTreeNodeCount < 1)
+ throw new Error('skeletonTreeNodeCount must be a positive integer')
+
+ return loading ? (
+ ,
+ onChange: OnChangeHandler
+) =>
+ onChange(
+ info.checkedNodes.reduce((acc: TreeId[], cur: Record) => {
+ if (!cur.children) acc.push(cur.key)
+
+ return acc
+ }, [])
+ )
diff --git a/src/components/assets/antdAnimations.css b/src/components/assets/antdAnimations.css
deleted file mode 100644
index ce6aa886..00000000
--- a/src/components/assets/antdAnimations.css
+++ /dev/null
@@ -1,438 +0,0 @@
-[class^='ant-'],
-[class*='ant-'],
-[class^='ant-'] *,
-[class*='ant-'] *,
-[class^='ant-'] *::before,
-[class*='ant-'] *::before,
-[class^='ant-'] *::after,
-[class*='ant-'] *::after {
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
-}
-*,
-*::before,
-*::after {
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
-}
-
-.slide-up-enter,
-.slide-up-appear {
- -webkit-animation-duration: 0.2s;
- animation-duration: 0.2s;
- -webkit-animation-fill-mode: both;
- animation-fill-mode: both;
- -webkit-animation-play-state: paused;
- animation-play-state: paused;
-}
-.slide-up-leave {
- -webkit-animation-duration: 0.2s;
- animation-duration: 0.2s;
- -webkit-animation-fill-mode: both;
- animation-fill-mode: both;
- -webkit-animation-play-state: paused;
- animation-play-state: paused;
-}
-.slide-up-enter.slide-up-enter-active,
-.slide-up-appear.slide-up-appear-active {
- -webkit-animation-name: antSlideUpIn;
- animation-name: antSlideUpIn;
- -webkit-animation-play-state: running;
- animation-play-state: running;
-}
-.slide-up-leave.slide-up-leave-active {
- -webkit-animation-name: antSlideUpOut;
- animation-name: antSlideUpOut;
- -webkit-animation-play-state: running;
- animation-play-state: running;
- pointer-events: none;
-}
-.slide-up-enter,
-.slide-up-appear {
- opacity: 0;
- -webkit-animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
- animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
-}
-.slide-up-leave {
- -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
- animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-}
-.slide-down-enter,
-.slide-down-appear {
- -webkit-animation-duration: 0.2s;
- animation-duration: 0.2s;
- -webkit-animation-fill-mode: both;
- animation-fill-mode: both;
- -webkit-animation-play-state: paused;
- animation-play-state: paused;
-}
-.slide-down-leave {
- -webkit-animation-duration: 0.2s;
- animation-duration: 0.2s;
- -webkit-animation-fill-mode: both;
- animation-fill-mode: both;
- -webkit-animation-play-state: paused;
- animation-play-state: paused;
-}
-.slide-down-enter.slide-down-enter-active,
-.slide-down-appear.slide-down-appear-active {
- -webkit-animation-name: antSlideDownIn;
- animation-name: antSlideDownIn;
- -webkit-animation-play-state: running;
- animation-play-state: running;
-}
-.slide-down-leave.slide-down-leave-active {
- -webkit-animation-name: antSlideDownOut;
- animation-name: antSlideDownOut;
- -webkit-animation-play-state: running;
- animation-play-state: running;
- pointer-events: none;
-}
-.slide-down-enter,
-.slide-down-appear {
- opacity: 0;
- -webkit-animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
- animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
-}
-.slide-down-leave {
- -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
- animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-}
-.slide-left-enter,
-.slide-left-appear {
- -webkit-animation-duration: 0.2s;
- animation-duration: 0.2s;
- -webkit-animation-fill-mode: both;
- animation-fill-mode: both;
- -webkit-animation-play-state: paused;
- animation-play-state: paused;
-}
-.slide-left-leave {
- -webkit-animation-duration: 0.2s;
- animation-duration: 0.2s;
- -webkit-animation-fill-mode: both;
- animation-fill-mode: both;
- -webkit-animation-play-state: paused;
- animation-play-state: paused;
-}
-.slide-left-enter.slide-left-enter-active,
-.slide-left-appear.slide-left-appear-active {
- -webkit-animation-name: antSlideLeftIn;
- animation-name: antSlideLeftIn;
- -webkit-animation-play-state: running;
- animation-play-state: running;
-}
-.slide-left-leave.slide-left-leave-active {
- -webkit-animation-name: antSlideLeftOut;
- animation-name: antSlideLeftOut;
- -webkit-animation-play-state: running;
- animation-play-state: running;
- pointer-events: none;
-}
-.slide-left-enter,
-.slide-left-appear {
- opacity: 0;
- -webkit-animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
- animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
-}
-.slide-left-leave {
- -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
- animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-}
-.slide-right-enter,
-.slide-right-appear {
- -webkit-animation-duration: 0.2s;
- animation-duration: 0.2s;
- -webkit-animation-fill-mode: both;
- animation-fill-mode: both;
- -webkit-animation-play-state: paused;
- animation-play-state: paused;
-}
-.slide-right-leave {
- -webkit-animation-duration: 0.2s;
- animation-duration: 0.2s;
- -webkit-animation-fill-mode: both;
- animation-fill-mode: both;
- -webkit-animation-play-state: paused;
- animation-play-state: paused;
-}
-.slide-right-enter.slide-right-enter-active,
-.slide-right-appear.slide-right-appear-active {
- -webkit-animation-name: antSlideRightIn;
- animation-name: antSlideRightIn;
- -webkit-animation-play-state: running;
- animation-play-state: running;
-}
-.slide-right-leave.slide-right-leave-active {
- -webkit-animation-name: antSlideRightOut;
- animation-name: antSlideRightOut;
- -webkit-animation-play-state: running;
- animation-play-state: running;
- pointer-events: none;
-}
-.slide-right-enter,
-.slide-right-appear {
- opacity: 0;
- -webkit-animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
- animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
-}
-.slide-right-leave {
- -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
- animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-}
-@-webkit-keyframes antSlideUpIn {
- 0% {
- -webkit-transform: scaleY(0.8);
- transform: scaleY(0.8);
- -webkit-transform-origin: 0% 0%;
- transform-origin: 0% 0%;
- opacity: 0;
- }
- 100% {
- -webkit-transform: scaleY(1);
- transform: scaleY(1);
- -webkit-transform-origin: 0% 0%;
- transform-origin: 0% 0%;
- opacity: 1;
- }
-}
-@keyframes antSlideUpIn {
- 0% {
- -webkit-transform: scaleY(0.8);
- transform: scaleY(0.8);
- -webkit-transform-origin: 0% 0%;
- transform-origin: 0% 0%;
- opacity: 0;
- }
- 100% {
- -webkit-transform: scaleY(1);
- transform: scaleY(1);
- -webkit-transform-origin: 0% 0%;
- transform-origin: 0% 0%;
- opacity: 1;
- }
-}
-@-webkit-keyframes antSlideUpOut {
- 0% {
- -webkit-transform: scaleY(1);
- transform: scaleY(1);
- -webkit-transform-origin: 0% 0%;
- transform-origin: 0% 0%;
- opacity: 1;
- }
- 100% {
- -webkit-transform: scaleY(0.8);
- transform: scaleY(0.8);
- -webkit-transform-origin: 0% 0%;
- transform-origin: 0% 0%;
- opacity: 0;
- }
-}
-@keyframes antSlideUpOut {
- 0% {
- -webkit-transform: scaleY(1);
- transform: scaleY(1);
- -webkit-transform-origin: 0% 0%;
- transform-origin: 0% 0%;
- opacity: 1;
- }
- 100% {
- -webkit-transform: scaleY(0.8);
- transform: scaleY(0.8);
- -webkit-transform-origin: 0% 0%;
- transform-origin: 0% 0%;
- opacity: 0;
- }
-}
-@-webkit-keyframes antSlideDownIn {
- 0% {
- -webkit-transform: scaleY(0.8);
- transform: scaleY(0.8);
- -webkit-transform-origin: 100% 100%;
- transform-origin: 100% 100%;
- opacity: 0;
- }
- 100% {
- -webkit-transform: scaleY(1);
- transform: scaleY(1);
- -webkit-transform-origin: 100% 100%;
- transform-origin: 100% 100%;
- opacity: 1;
- }
-}
-@keyframes antSlideDownIn {
- 0% {
- -webkit-transform: scaleY(0.8);
- transform: scaleY(0.8);
- -webkit-transform-origin: 100% 100%;
- transform-origin: 100% 100%;
- opacity: 0;
- }
- 100% {
- -webkit-transform: scaleY(1);
- transform: scaleY(1);
- -webkit-transform-origin: 100% 100%;
- transform-origin: 100% 100%;
- opacity: 1;
- }
-}
-@-webkit-keyframes antSlideDownOut {
- 0% {
- -webkit-transform: scaleY(1);
- transform: scaleY(1);
- -webkit-transform-origin: 100% 100%;
- transform-origin: 100% 100%;
- opacity: 1;
- }
- 100% {
- -webkit-transform: scaleY(0.8);
- transform: scaleY(0.8);
- -webkit-transform-origin: 100% 100%;
- transform-origin: 100% 100%;
- opacity: 0;
- }
-}
-@keyframes antSlideDownOut {
- 0% {
- -webkit-transform: scaleY(1);
- transform: scaleY(1);
- -webkit-transform-origin: 100% 100%;
- transform-origin: 100% 100%;
- opacity: 1;
- }
- 100% {
- -webkit-transform: scaleY(0.8);
- transform: scaleY(0.8);
- -webkit-transform-origin: 100% 100%;
- transform-origin: 100% 100%;
- opacity: 0;
- }
-}
-@-webkit-keyframes antSlideLeftIn {
- 0% {
- -webkit-transform: scaleX(0.8);
- transform: scaleX(0.8);
- -webkit-transform-origin: 0% 0%;
- transform-origin: 0% 0%;
- opacity: 0;
- }
- 100% {
- -webkit-transform: scaleX(1);
- transform: scaleX(1);
- -webkit-transform-origin: 0% 0%;
- transform-origin: 0% 0%;
- opacity: 1;
- }
-}
-@keyframes antSlideLeftIn {
- 0% {
- -webkit-transform: scaleX(0.8);
- transform: scaleX(0.8);
- -webkit-transform-origin: 0% 0%;
- transform-origin: 0% 0%;
- opacity: 0;
- }
- 100% {
- -webkit-transform: scaleX(1);
- transform: scaleX(1);
- -webkit-transform-origin: 0% 0%;
- transform-origin: 0% 0%;
- opacity: 1;
- }
-}
-@-webkit-keyframes antSlideLeftOut {
- 0% {
- -webkit-transform: scaleX(1);
- transform: scaleX(1);
- -webkit-transform-origin: 0% 0%;
- transform-origin: 0% 0%;
- opacity: 1;
- }
- 100% {
- -webkit-transform: scaleX(0.8);
- transform: scaleX(0.8);
- -webkit-transform-origin: 0% 0%;
- transform-origin: 0% 0%;
- opacity: 0;
- }
-}
-@keyframes antSlideLeftOut {
- 0% {
- -webkit-transform: scaleX(1);
- transform: scaleX(1);
- -webkit-transform-origin: 0% 0%;
- transform-origin: 0% 0%;
- opacity: 1;
- }
- 100% {
- -webkit-transform: scaleX(0.8);
- transform: scaleX(0.8);
- -webkit-transform-origin: 0% 0%;
- transform-origin: 0% 0%;
- opacity: 0;
- }
-}
-@-webkit-keyframes antSlideRightIn {
- 0% {
- -webkit-transform: scaleX(0.8);
- transform: scaleX(0.8);
- -webkit-transform-origin: 100% 0%;
- transform-origin: 100% 0%;
- opacity: 0;
- }
- 100% {
- -webkit-transform: scaleX(1);
- transform: scaleX(1);
- -webkit-transform-origin: 100% 0%;
- transform-origin: 100% 0%;
- opacity: 1;
- }
-}
-@keyframes antSlideRightIn {
- 0% {
- -webkit-transform: scaleX(0.8);
- transform: scaleX(0.8);
- -webkit-transform-origin: 100% 0%;
- transform-origin: 100% 0%;
- opacity: 0;
- }
- 100% {
- -webkit-transform: scaleX(1);
- transform: scaleX(1);
- -webkit-transform-origin: 100% 0%;
- transform-origin: 100% 0%;
- opacity: 1;
- }
-}
-@-webkit-keyframes antSlideRightOut {
- 0% {
- -webkit-transform: scaleX(1);
- transform: scaleX(1);
- -webkit-transform-origin: 100% 0%;
- transform-origin: 100% 0%;
- opacity: 1;
- }
- 100% {
- -webkit-transform: scaleX(0.8);
- transform: scaleX(0.8);
- -webkit-transform-origin: 100% 0%;
- transform-origin: 100% 0%;
- opacity: 0;
- }
-}
-@keyframes antSlideRightOut {
- 0% {
- -webkit-transform: scaleX(1);
- transform: scaleX(1);
- -webkit-transform-origin: 100% 0%;
- transform-origin: 100% 0%;
- opacity: 1;
- }
- 100% {
- -webkit-transform: scaleX(0.8);
- transform: scaleX(0.8);
- -webkit-transform-origin: 100% 0%;
- transform-origin: 100% 0%;
- opacity: 0;
- }
-}
diff --git a/src/components/assets/styles/antdAnimations.css b/src/components/assets/styles/antdAnimations.css
new file mode 100644
index 00000000..61e55b15
--- /dev/null
+++ b/src/components/assets/styles/antdAnimations.css
@@ -0,0 +1,1636 @@
+@import './antdBaseStyles.css';
+
+.fade-enter,
+.fade-appear {
+ -webkit-animation-duration: 0.2s;
+ animation-duration: 0.2s;
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ -webkit-animation-play-state: paused;
+ animation-play-state: paused;
+}
+.fade-leave {
+ -webkit-animation-duration: 0.2s;
+ animation-duration: 0.2s;
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ -webkit-animation-play-state: paused;
+ animation-play-state: paused;
+}
+.fade-enter.fade-enter-active,
+.fade-appear.fade-appear-active {
+ -webkit-animation-name: antFadeIn;
+ animation-name: antFadeIn;
+ -webkit-animation-play-state: running;
+ animation-play-state: running;
+}
+.fade-leave.fade-leave-active {
+ -webkit-animation-name: antFadeOut;
+ animation-name: antFadeOut;
+ -webkit-animation-play-state: running;
+ animation-play-state: running;
+ pointer-events: none;
+}
+.fade-enter,
+.fade-appear {
+ opacity: 0;
+ -webkit-animation-timing-function: linear;
+ animation-timing-function: linear;
+}
+.fade-leave {
+ -webkit-animation-timing-function: linear;
+ animation-timing-function: linear;
+}
+@-webkit-keyframes antFadeIn {
+ 0% {
+ opacity: 0;
+ }
+ 100% {
+ opacity: 1;
+ }
+}
+@keyframes antFadeIn {
+ 0% {
+ opacity: 0;
+ }
+ 100% {
+ opacity: 1;
+ }
+}
+@-webkit-keyframes antFadeOut {
+ 0% {
+ opacity: 1;
+ }
+ 100% {
+ opacity: 0;
+ }
+}
+@keyframes antFadeOut {
+ 0% {
+ opacity: 1;
+ }
+ 100% {
+ opacity: 0;
+ }
+}
+.move-up-enter,
+.move-up-appear {
+ -webkit-animation-duration: 0.2s;
+ animation-duration: 0.2s;
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ -webkit-animation-play-state: paused;
+ animation-play-state: paused;
+}
+.move-up-leave {
+ -webkit-animation-duration: 0.2s;
+ animation-duration: 0.2s;
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ -webkit-animation-play-state: paused;
+ animation-play-state: paused;
+}
+.move-up-enter.move-up-enter-active,
+.move-up-appear.move-up-appear-active {
+ -webkit-animation-name: antMoveUpIn;
+ animation-name: antMoveUpIn;
+ -webkit-animation-play-state: running;
+ animation-play-state: running;
+}
+.move-up-leave.move-up-leave-active {
+ -webkit-animation-name: antMoveUpOut;
+ animation-name: antMoveUpOut;
+ -webkit-animation-play-state: running;
+ animation-play-state: running;
+ pointer-events: none;
+}
+.move-up-enter,
+.move-up-appear {
+ opacity: 0;
+ -webkit-animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
+ animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
+}
+.move-up-leave {
+ -webkit-animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34);
+ animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34);
+}
+.move-down-enter,
+.move-down-appear {
+ -webkit-animation-duration: 0.2s;
+ animation-duration: 0.2s;
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ -webkit-animation-play-state: paused;
+ animation-play-state: paused;
+}
+.move-down-leave {
+ -webkit-animation-duration: 0.2s;
+ animation-duration: 0.2s;
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ -webkit-animation-play-state: paused;
+ animation-play-state: paused;
+}
+.move-down-enter.move-down-enter-active,
+.move-down-appear.move-down-appear-active {
+ -webkit-animation-name: antMoveDownIn;
+ animation-name: antMoveDownIn;
+ -webkit-animation-play-state: running;
+ animation-play-state: running;
+}
+.move-down-leave.move-down-leave-active {
+ -webkit-animation-name: antMoveDownOut;
+ animation-name: antMoveDownOut;
+ -webkit-animation-play-state: running;
+ animation-play-state: running;
+ pointer-events: none;
+}
+.move-down-enter,
+.move-down-appear {
+ opacity: 0;
+ -webkit-animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
+ animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
+}
+.move-down-leave {
+ -webkit-animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34);
+ animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34);
+}
+.move-left-enter,
+.move-left-appear {
+ -webkit-animation-duration: 0.2s;
+ animation-duration: 0.2s;
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ -webkit-animation-play-state: paused;
+ animation-play-state: paused;
+}
+.move-left-leave {
+ -webkit-animation-duration: 0.2s;
+ animation-duration: 0.2s;
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ -webkit-animation-play-state: paused;
+ animation-play-state: paused;
+}
+.move-left-enter.move-left-enter-active,
+.move-left-appear.move-left-appear-active {
+ -webkit-animation-name: antMoveLeftIn;
+ animation-name: antMoveLeftIn;
+ -webkit-animation-play-state: running;
+ animation-play-state: running;
+}
+.move-left-leave.move-left-leave-active {
+ -webkit-animation-name: antMoveLeftOut;
+ animation-name: antMoveLeftOut;
+ -webkit-animation-play-state: running;
+ animation-play-state: running;
+ pointer-events: none;
+}
+.move-left-enter,
+.move-left-appear {
+ opacity: 0;
+ -webkit-animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
+ animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
+}
+.move-left-leave {
+ -webkit-animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34);
+ animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34);
+}
+.move-right-enter,
+.move-right-appear {
+ -webkit-animation-duration: 0.2s;
+ animation-duration: 0.2s;
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ -webkit-animation-play-state: paused;
+ animation-play-state: paused;
+}
+.move-right-leave {
+ -webkit-animation-duration: 0.2s;
+ animation-duration: 0.2s;
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ -webkit-animation-play-state: paused;
+ animation-play-state: paused;
+}
+.move-right-enter.move-right-enter-active,
+.move-right-appear.move-right-appear-active {
+ -webkit-animation-name: antMoveRightIn;
+ animation-name: antMoveRightIn;
+ -webkit-animation-play-state: running;
+ animation-play-state: running;
+}
+.move-right-leave.move-right-leave-active {
+ -webkit-animation-name: antMoveRightOut;
+ animation-name: antMoveRightOut;
+ -webkit-animation-play-state: running;
+ animation-play-state: running;
+ pointer-events: none;
+}
+.move-right-enter,
+.move-right-appear {
+ opacity: 0;
+ -webkit-animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
+ animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
+}
+.move-right-leave {
+ -webkit-animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34);
+ animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34);
+}
+@-webkit-keyframes antMoveDownIn {
+ 0% {
+ -webkit-transform: translateY(100%);
+ transform: translateY(100%);
+ -webkit-transform-origin: 0 0;
+ transform-origin: 0 0;
+ opacity: 0;
+ }
+ 100% {
+ -webkit-transform: translateY(0%);
+ transform: translateY(0%);
+ -webkit-transform-origin: 0 0;
+ transform-origin: 0 0;
+ opacity: 1;
+ }
+}
+@keyframes antMoveDownIn {
+ 0% {
+ -webkit-transform: translateY(100%);
+ transform: translateY(100%);
+ -webkit-transform-origin: 0 0;
+ transform-origin: 0 0;
+ opacity: 0;
+ }
+ 100% {
+ -webkit-transform: translateY(0%);
+ transform: translateY(0%);
+ -webkit-transform-origin: 0 0;
+ transform-origin: 0 0;
+ opacity: 1;
+ }
+}
+@-webkit-keyframes antMoveDownOut {
+ 0% {
+ -webkit-transform: translateY(0%);
+ transform: translateY(0%);
+ -webkit-transform-origin: 0 0;
+ transform-origin: 0 0;
+ opacity: 1;
+ }
+ 100% {
+ -webkit-transform: translateY(100%);
+ transform: translateY(100%);
+ -webkit-transform-origin: 0 0;
+ transform-origin: 0 0;
+ opacity: 0;
+ }
+}
+@keyframes antMoveDownOut {
+ 0% {
+ -webkit-transform: translateY(0%);
+ transform: translateY(0%);
+ -webkit-transform-origin: 0 0;
+ transform-origin: 0 0;
+ opacity: 1;
+ }
+ 100% {
+ -webkit-transform: translateY(100%);
+ transform: translateY(100%);
+ -webkit-transform-origin: 0 0;
+ transform-origin: 0 0;
+ opacity: 0;
+ }
+}
+@-webkit-keyframes antMoveLeftIn {
+ 0% {
+ -webkit-transform: translateX(-100%);
+ transform: translateX(-100%);
+ -webkit-transform-origin: 0 0;
+ transform-origin: 0 0;
+ opacity: 0;
+ }
+ 100% {
+ -webkit-transform: translateX(0%);
+ transform: translateX(0%);
+ -webkit-transform-origin: 0 0;
+ transform-origin: 0 0;
+ opacity: 1;
+ }
+}
+@keyframes antMoveLeftIn {
+ 0% {
+ -webkit-transform: translateX(-100%);
+ transform: translateX(-100%);
+ -webkit-transform-origin: 0 0;
+ transform-origin: 0 0;
+ opacity: 0;
+ }
+ 100% {
+ -webkit-transform: translateX(0%);
+ transform: translateX(0%);
+ -webkit-transform-origin: 0 0;
+ transform-origin: 0 0;
+ opacity: 1;
+ }
+}
+@-webkit-keyframes antMoveLeftOut {
+ 0% {
+ -webkit-transform: translateX(0%);
+ transform: translateX(0%);
+ -webkit-transform-origin: 0 0;
+ transform-origin: 0 0;
+ opacity: 1;
+ }
+ 100% {
+ -webkit-transform: translateX(-100%);
+ transform: translateX(-100%);
+ -webkit-transform-origin: 0 0;
+ transform-origin: 0 0;
+ opacity: 0;
+ }
+}
+@keyframes antMoveLeftOut {
+ 0% {
+ -webkit-transform: translateX(0%);
+ transform: translateX(0%);
+ -webkit-transform-origin: 0 0;
+ transform-origin: 0 0;
+ opacity: 1;
+ }
+ 100% {
+ -webkit-transform: translateX(-100%);
+ transform: translateX(-100%);
+ -webkit-transform-origin: 0 0;
+ transform-origin: 0 0;
+ opacity: 0;
+ }
+}
+@-webkit-keyframes antMoveRightIn {
+ 0% {
+ -webkit-transform: translateX(100%);
+ transform: translateX(100%);
+ -webkit-transform-origin: 0 0;
+ transform-origin: 0 0;
+ opacity: 0;
+ }
+ 100% {
+ -webkit-transform: translateX(0%);
+ transform: translateX(0%);
+ -webkit-transform-origin: 0 0;
+ transform-origin: 0 0;
+ opacity: 1;
+ }
+}
+@keyframes antMoveRightIn {
+ 0% {
+ -webkit-transform: translateX(100%);
+ transform: translateX(100%);
+ -webkit-transform-origin: 0 0;
+ transform-origin: 0 0;
+ opacity: 0;
+ }
+ 100% {
+ -webkit-transform: translateX(0%);
+ transform: translateX(0%);
+ -webkit-transform-origin: 0 0;
+ transform-origin: 0 0;
+ opacity: 1;
+ }
+}
+@-webkit-keyframes antMoveRightOut {
+ 0% {
+ -webkit-transform: translateX(0%);
+ transform: translateX(0%);
+ -webkit-transform-origin: 0 0;
+ transform-origin: 0 0;
+ opacity: 1;
+ }
+ 100% {
+ -webkit-transform: translateX(100%);
+ transform: translateX(100%);
+ -webkit-transform-origin: 0 0;
+ transform-origin: 0 0;
+ opacity: 0;
+ }
+}
+@keyframes antMoveRightOut {
+ 0% {
+ -webkit-transform: translateX(0%);
+ transform: translateX(0%);
+ -webkit-transform-origin: 0 0;
+ transform-origin: 0 0;
+ opacity: 1;
+ }
+ 100% {
+ -webkit-transform: translateX(100%);
+ transform: translateX(100%);
+ -webkit-transform-origin: 0 0;
+ transform-origin: 0 0;
+ opacity: 0;
+ }
+}
+@-webkit-keyframes antMoveUpIn {
+ 0% {
+ -webkit-transform: translateY(-100%);
+ transform: translateY(-100%);
+ -webkit-transform-origin: 0 0;
+ transform-origin: 0 0;
+ opacity: 0;
+ }
+ 100% {
+ -webkit-transform: translateY(0%);
+ transform: translateY(0%);
+ -webkit-transform-origin: 0 0;
+ transform-origin: 0 0;
+ opacity: 1;
+ }
+}
+@keyframes antMoveUpIn {
+ 0% {
+ -webkit-transform: translateY(-100%);
+ transform: translateY(-100%);
+ -webkit-transform-origin: 0 0;
+ transform-origin: 0 0;
+ opacity: 0;
+ }
+ 100% {
+ -webkit-transform: translateY(0%);
+ transform: translateY(0%);
+ -webkit-transform-origin: 0 0;
+ transform-origin: 0 0;
+ opacity: 1;
+ }
+}
+@-webkit-keyframes antMoveUpOut {
+ 0% {
+ -webkit-transform: translateY(0%);
+ transform: translateY(0%);
+ -webkit-transform-origin: 0 0;
+ transform-origin: 0 0;
+ opacity: 1;
+ }
+ 100% {
+ -webkit-transform: translateY(-100%);
+ transform: translateY(-100%);
+ -webkit-transform-origin: 0 0;
+ transform-origin: 0 0;
+ opacity: 0;
+ }
+}
+@keyframes antMoveUpOut {
+ 0% {
+ -webkit-transform: translateY(0%);
+ transform: translateY(0%);
+ -webkit-transform-origin: 0 0;
+ transform-origin: 0 0;
+ opacity: 1;
+ }
+ 100% {
+ -webkit-transform: translateY(-100%);
+ transform: translateY(-100%);
+ -webkit-transform-origin: 0 0;
+ transform-origin: 0 0;
+ opacity: 0;
+ }
+}
+html {
+ --antd-wave-shadow-color: #1890ff;
+ --scroll-bar: 0;
+}
+[ant-click-animating-without-extra-node='true']::after,
+.ant-click-animating-node {
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ display: block;
+ border-radius: inherit;
+ -webkit-box-shadow: 0 0 0 0 #1890ff;
+ box-shadow: 0 0 0 0 #1890ff;
+ -webkit-box-shadow: 0 0 0 0 var(--antd-wave-shadow-color);
+ box-shadow: 0 0 0 0 var(--antd-wave-shadow-color);
+ opacity: 0.2;
+ -webkit-animation: fadeEffect 2s cubic-bezier(0.08, 0.82, 0.17, 1),
+ waveEffect 0.4s cubic-bezier(0.08, 0.82, 0.17, 1);
+ animation: fadeEffect 2s cubic-bezier(0.08, 0.82, 0.17, 1),
+ waveEffect 0.4s cubic-bezier(0.08, 0.82, 0.17, 1);
+ -webkit-animation-fill-mode: forwards;
+ animation-fill-mode: forwards;
+ content: '';
+ pointer-events: none;
+}
+@-webkit-keyframes waveEffect {
+ 100% {
+ -webkit-box-shadow: 0 0 0 #1890ff;
+ box-shadow: 0 0 0 #1890ff;
+ -webkit-box-shadow: 0 0 0 6px var(--antd-wave-shadow-color);
+ box-shadow: 0 0 0 6px var(--antd-wave-shadow-color);
+ }
+}
+@keyframes waveEffect {
+ 100% {
+ -webkit-box-shadow: 0 0 0 #1890ff;
+ box-shadow: 0 0 0 #1890ff;
+ -webkit-box-shadow: 0 0 0 6px var(--antd-wave-shadow-color);
+ box-shadow: 0 0 0 6px var(--antd-wave-shadow-color);
+ }
+}
+@-webkit-keyframes fadeEffect {
+ 100% {
+ opacity: 0;
+ }
+}
+@keyframes fadeEffect {
+ 100% {
+ opacity: 0;
+ }
+}
+.slide-up-enter,
+.slide-up-appear {
+ -webkit-animation-duration: 0.2s;
+ animation-duration: 0.2s;
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ -webkit-animation-play-state: paused;
+ animation-play-state: paused;
+}
+.slide-up-leave {
+ -webkit-animation-duration: 0.2s;
+ animation-duration: 0.2s;
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ -webkit-animation-play-state: paused;
+ animation-play-state: paused;
+}
+.slide-up-enter.slide-up-enter-active,
+.slide-up-appear.slide-up-appear-active {
+ -webkit-animation-name: antSlideUpIn;
+ animation-name: antSlideUpIn;
+ -webkit-animation-play-state: running;
+ animation-play-state: running;
+}
+.slide-up-leave.slide-up-leave-active {
+ -webkit-animation-name: antSlideUpOut;
+ animation-name: antSlideUpOut;
+ -webkit-animation-play-state: running;
+ animation-play-state: running;
+ pointer-events: none;
+}
+.slide-up-enter,
+.slide-up-appear {
+ opacity: 0;
+ -webkit-animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
+ animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
+}
+.slide-up-leave {
+ -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+ animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+}
+.slide-down-enter,
+.slide-down-appear {
+ -webkit-animation-duration: 0.2s;
+ animation-duration: 0.2s;
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ -webkit-animation-play-state: paused;
+ animation-play-state: paused;
+}
+.slide-down-leave {
+ -webkit-animation-duration: 0.2s;
+ animation-duration: 0.2s;
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ -webkit-animation-play-state: paused;
+ animation-play-state: paused;
+}
+.slide-down-enter.slide-down-enter-active,
+.slide-down-appear.slide-down-appear-active {
+ -webkit-animation-name: antSlideDownIn;
+ animation-name: antSlideDownIn;
+ -webkit-animation-play-state: running;
+ animation-play-state: running;
+}
+.slide-down-leave.slide-down-leave-active {
+ -webkit-animation-name: antSlideDownOut;
+ animation-name: antSlideDownOut;
+ -webkit-animation-play-state: running;
+ animation-play-state: running;
+ pointer-events: none;
+}
+.slide-down-enter,
+.slide-down-appear {
+ opacity: 0;
+ -webkit-animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
+ animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
+}
+.slide-down-leave {
+ -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+ animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+}
+.slide-left-enter,
+.slide-left-appear {
+ -webkit-animation-duration: 0.2s;
+ animation-duration: 0.2s;
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ -webkit-animation-play-state: paused;
+ animation-play-state: paused;
+}
+.slide-left-leave {
+ -webkit-animation-duration: 0.2s;
+ animation-duration: 0.2s;
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ -webkit-animation-play-state: paused;
+ animation-play-state: paused;
+}
+.slide-left-enter.slide-left-enter-active,
+.slide-left-appear.slide-left-appear-active {
+ -webkit-animation-name: antSlideLeftIn;
+ animation-name: antSlideLeftIn;
+ -webkit-animation-play-state: running;
+ animation-play-state: running;
+}
+.slide-left-leave.slide-left-leave-active {
+ -webkit-animation-name: antSlideLeftOut;
+ animation-name: antSlideLeftOut;
+ -webkit-animation-play-state: running;
+ animation-play-state: running;
+ pointer-events: none;
+}
+.slide-left-enter,
+.slide-left-appear {
+ opacity: 0;
+ -webkit-animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
+ animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
+}
+.slide-left-leave {
+ -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+ animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+}
+.slide-right-enter,
+.slide-right-appear {
+ -webkit-animation-duration: 0.2s;
+ animation-duration: 0.2s;
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ -webkit-animation-play-state: paused;
+ animation-play-state: paused;
+}
+.slide-right-leave {
+ -webkit-animation-duration: 0.2s;
+ animation-duration: 0.2s;
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ -webkit-animation-play-state: paused;
+ animation-play-state: paused;
+}
+.slide-right-enter.slide-right-enter-active,
+.slide-right-appear.slide-right-appear-active {
+ -webkit-animation-name: antSlideRightIn;
+ animation-name: antSlideRightIn;
+ -webkit-animation-play-state: running;
+ animation-play-state: running;
+}
+.slide-right-leave.slide-right-leave-active {
+ -webkit-animation-name: antSlideRightOut;
+ animation-name: antSlideRightOut;
+ -webkit-animation-play-state: running;
+ animation-play-state: running;
+ pointer-events: none;
+}
+.slide-right-enter,
+.slide-right-appear {
+ opacity: 0;
+ -webkit-animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
+ animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
+}
+.slide-right-leave {
+ -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+ animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+}
+@-webkit-keyframes antSlideUpIn {
+ 0% {
+ -webkit-transform: scaleY(0.8);
+ transform: scaleY(0.8);
+ -webkit-transform-origin: 0% 0%;
+ transform-origin: 0% 0%;
+ opacity: 0;
+ }
+ 100% {
+ -webkit-transform: scaleY(1);
+ transform: scaleY(1);
+ -webkit-transform-origin: 0% 0%;
+ transform-origin: 0% 0%;
+ opacity: 1;
+ }
+}
+@keyframes antSlideUpIn {
+ 0% {
+ -webkit-transform: scaleY(0.8);
+ transform: scaleY(0.8);
+ -webkit-transform-origin: 0% 0%;
+ transform-origin: 0% 0%;
+ opacity: 0;
+ }
+ 100% {
+ -webkit-transform: scaleY(1);
+ transform: scaleY(1);
+ -webkit-transform-origin: 0% 0%;
+ transform-origin: 0% 0%;
+ opacity: 1;
+ }
+}
+@-webkit-keyframes antSlideUpOut {
+ 0% {
+ -webkit-transform: scaleY(1);
+ transform: scaleY(1);
+ -webkit-transform-origin: 0% 0%;
+ transform-origin: 0% 0%;
+ opacity: 1;
+ }
+ 100% {
+ -webkit-transform: scaleY(0.8);
+ transform: scaleY(0.8);
+ -webkit-transform-origin: 0% 0%;
+ transform-origin: 0% 0%;
+ opacity: 0;
+ }
+}
+@keyframes antSlideUpOut {
+ 0% {
+ -webkit-transform: scaleY(1);
+ transform: scaleY(1);
+ -webkit-transform-origin: 0% 0%;
+ transform-origin: 0% 0%;
+ opacity: 1;
+ }
+ 100% {
+ -webkit-transform: scaleY(0.8);
+ transform: scaleY(0.8);
+ -webkit-transform-origin: 0% 0%;
+ transform-origin: 0% 0%;
+ opacity: 0;
+ }
+}
+@-webkit-keyframes antSlideDownIn {
+ 0% {
+ -webkit-transform: scaleY(0.8);
+ transform: scaleY(0.8);
+ -webkit-transform-origin: 100% 100%;
+ transform-origin: 100% 100%;
+ opacity: 0;
+ }
+ 100% {
+ -webkit-transform: scaleY(1);
+ transform: scaleY(1);
+ -webkit-transform-origin: 100% 100%;
+ transform-origin: 100% 100%;
+ opacity: 1;
+ }
+}
+@keyframes antSlideDownIn {
+ 0% {
+ -webkit-transform: scaleY(0.8);
+ transform: scaleY(0.8);
+ -webkit-transform-origin: 100% 100%;
+ transform-origin: 100% 100%;
+ opacity: 0;
+ }
+ 100% {
+ -webkit-transform: scaleY(1);
+ transform: scaleY(1);
+ -webkit-transform-origin: 100% 100%;
+ transform-origin: 100% 100%;
+ opacity: 1;
+ }
+}
+@-webkit-keyframes antSlideDownOut {
+ 0% {
+ -webkit-transform: scaleY(1);
+ transform: scaleY(1);
+ -webkit-transform-origin: 100% 100%;
+ transform-origin: 100% 100%;
+ opacity: 1;
+ }
+ 100% {
+ -webkit-transform: scaleY(0.8);
+ transform: scaleY(0.8);
+ -webkit-transform-origin: 100% 100%;
+ transform-origin: 100% 100%;
+ opacity: 0;
+ }
+}
+@keyframes antSlideDownOut {
+ 0% {
+ -webkit-transform: scaleY(1);
+ transform: scaleY(1);
+ -webkit-transform-origin: 100% 100%;
+ transform-origin: 100% 100%;
+ opacity: 1;
+ }
+ 100% {
+ -webkit-transform: scaleY(0.8);
+ transform: scaleY(0.8);
+ -webkit-transform-origin: 100% 100%;
+ transform-origin: 100% 100%;
+ opacity: 0;
+ }
+}
+@-webkit-keyframes antSlideLeftIn {
+ 0% {
+ -webkit-transform: scaleX(0.8);
+ transform: scaleX(0.8);
+ -webkit-transform-origin: 0% 0%;
+ transform-origin: 0% 0%;
+ opacity: 0;
+ }
+ 100% {
+ -webkit-transform: scaleX(1);
+ transform: scaleX(1);
+ -webkit-transform-origin: 0% 0%;
+ transform-origin: 0% 0%;
+ opacity: 1;
+ }
+}
+@keyframes antSlideLeftIn {
+ 0% {
+ -webkit-transform: scaleX(0.8);
+ transform: scaleX(0.8);
+ -webkit-transform-origin: 0% 0%;
+ transform-origin: 0% 0%;
+ opacity: 0;
+ }
+ 100% {
+ -webkit-transform: scaleX(1);
+ transform: scaleX(1);
+ -webkit-transform-origin: 0% 0%;
+ transform-origin: 0% 0%;
+ opacity: 1;
+ }
+}
+@-webkit-keyframes antSlideLeftOut {
+ 0% {
+ -webkit-transform: scaleX(1);
+ transform: scaleX(1);
+ -webkit-transform-origin: 0% 0%;
+ transform-origin: 0% 0%;
+ opacity: 1;
+ }
+ 100% {
+ -webkit-transform: scaleX(0.8);
+ transform: scaleX(0.8);
+ -webkit-transform-origin: 0% 0%;
+ transform-origin: 0% 0%;
+ opacity: 0;
+ }
+}
+@keyframes antSlideLeftOut {
+ 0% {
+ -webkit-transform: scaleX(1);
+ transform: scaleX(1);
+ -webkit-transform-origin: 0% 0%;
+ transform-origin: 0% 0%;
+ opacity: 1;
+ }
+ 100% {
+ -webkit-transform: scaleX(0.8);
+ transform: scaleX(0.8);
+ -webkit-transform-origin: 0% 0%;
+ transform-origin: 0% 0%;
+ opacity: 0;
+ }
+}
+@-webkit-keyframes antSlideRightIn {
+ 0% {
+ -webkit-transform: scaleX(0.8);
+ transform: scaleX(0.8);
+ -webkit-transform-origin: 100% 0%;
+ transform-origin: 100% 0%;
+ opacity: 0;
+ }
+ 100% {
+ -webkit-transform: scaleX(1);
+ transform: scaleX(1);
+ -webkit-transform-origin: 100% 0%;
+ transform-origin: 100% 0%;
+ opacity: 1;
+ }
+}
+@keyframes antSlideRightIn {
+ 0% {
+ -webkit-transform: scaleX(0.8);
+ transform: scaleX(0.8);
+ -webkit-transform-origin: 100% 0%;
+ transform-origin: 100% 0%;
+ opacity: 0;
+ }
+ 100% {
+ -webkit-transform: scaleX(1);
+ transform: scaleX(1);
+ -webkit-transform-origin: 100% 0%;
+ transform-origin: 100% 0%;
+ opacity: 1;
+ }
+}
+@-webkit-keyframes antSlideRightOut {
+ 0% {
+ -webkit-transform: scaleX(1);
+ transform: scaleX(1);
+ -webkit-transform-origin: 100% 0%;
+ transform-origin: 100% 0%;
+ opacity: 1;
+ }
+ 100% {
+ -webkit-transform: scaleX(0.8);
+ transform: scaleX(0.8);
+ -webkit-transform-origin: 100% 0%;
+ transform-origin: 100% 0%;
+ opacity: 0;
+ }
+}
+@keyframes antSlideRightOut {
+ 0% {
+ -webkit-transform: scaleX(1);
+ transform: scaleX(1);
+ -webkit-transform-origin: 100% 0%;
+ transform-origin: 100% 0%;
+ opacity: 1;
+ }
+ 100% {
+ -webkit-transform: scaleX(0.8);
+ transform: scaleX(0.8);
+ -webkit-transform-origin: 100% 0%;
+ transform-origin: 100% 0%;
+ opacity: 0;
+ }
+}
+.zoom-enter,
+.zoom-appear {
+ -webkit-animation-duration: 0.2s;
+ animation-duration: 0.2s;
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ -webkit-animation-play-state: paused;
+ animation-play-state: paused;
+}
+.zoom-leave {
+ -webkit-animation-duration: 0.2s;
+ animation-duration: 0.2s;
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ -webkit-animation-play-state: paused;
+ animation-play-state: paused;
+}
+.zoom-enter.zoom-enter-active,
+.zoom-appear.zoom-appear-active {
+ -webkit-animation-name: antZoomIn;
+ animation-name: antZoomIn;
+ -webkit-animation-play-state: running;
+ animation-play-state: running;
+}
+.zoom-leave.zoom-leave-active {
+ -webkit-animation-name: antZoomOut;
+ animation-name: antZoomOut;
+ -webkit-animation-play-state: running;
+ animation-play-state: running;
+ pointer-events: none;
+}
+.zoom-enter,
+.zoom-appear {
+ -webkit-transform: scale(0);
+ transform: scale(0);
+ opacity: 0;
+ -webkit-animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
+ animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
+}
+.zoom-enter-prepare,
+.zoom-appear-prepare {
+ -webkit-transform: none;
+ transform: none;
+}
+.zoom-leave {
+ -webkit-animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86);
+ animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86);
+}
+.zoom-big-enter,
+.zoom-big-appear {
+ -webkit-animation-duration: 0.2s;
+ animation-duration: 0.2s;
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ -webkit-animation-play-state: paused;
+ animation-play-state: paused;
+}
+.zoom-big-leave {
+ -webkit-animation-duration: 0.2s;
+ animation-duration: 0.2s;
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ -webkit-animation-play-state: paused;
+ animation-play-state: paused;
+}
+.zoom-big-enter.zoom-big-enter-active,
+.zoom-big-appear.zoom-big-appear-active {
+ -webkit-animation-name: antZoomBigIn;
+ animation-name: antZoomBigIn;
+ -webkit-animation-play-state: running;
+ animation-play-state: running;
+}
+.zoom-big-leave.zoom-big-leave-active {
+ -webkit-animation-name: antZoomBigOut;
+ animation-name: antZoomBigOut;
+ -webkit-animation-play-state: running;
+ animation-play-state: running;
+ pointer-events: none;
+}
+.zoom-big-enter,
+.zoom-big-appear {
+ -webkit-transform: scale(0);
+ transform: scale(0);
+ opacity: 0;
+ -webkit-animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
+ animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
+}
+.zoom-big-enter-prepare,
+.zoom-big-appear-prepare {
+ -webkit-transform: none;
+ transform: none;
+}
+.zoom-big-leave {
+ -webkit-animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86);
+ animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86);
+}
+.zoom-big-fast-enter,
+.zoom-big-fast-appear {
+ -webkit-animation-duration: 0.1s;
+ animation-duration: 0.1s;
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ -webkit-animation-play-state: paused;
+ animation-play-state: paused;
+}
+.zoom-big-fast-leave {
+ -webkit-animation-duration: 0.1s;
+ animation-duration: 0.1s;
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ -webkit-animation-play-state: paused;
+ animation-play-state: paused;
+}
+.zoom-big-fast-enter.zoom-big-fast-enter-active,
+.zoom-big-fast-appear.zoom-big-fast-appear-active {
+ -webkit-animation-name: antZoomBigIn;
+ animation-name: antZoomBigIn;
+ -webkit-animation-play-state: running;
+ animation-play-state: running;
+}
+.zoom-big-fast-leave.zoom-big-fast-leave-active {
+ -webkit-animation-name: antZoomBigOut;
+ animation-name: antZoomBigOut;
+ -webkit-animation-play-state: running;
+ animation-play-state: running;
+ pointer-events: none;
+}
+.zoom-big-fast-enter,
+.zoom-big-fast-appear {
+ -webkit-transform: scale(0);
+ transform: scale(0);
+ opacity: 0;
+ -webkit-animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
+ animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
+}
+.zoom-big-fast-enter-prepare,
+.zoom-big-fast-appear-prepare {
+ -webkit-transform: none;
+ transform: none;
+}
+.zoom-big-fast-leave {
+ -webkit-animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86);
+ animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86);
+}
+.zoom-up-enter,
+.zoom-up-appear {
+ -webkit-animation-duration: 0.2s;
+ animation-duration: 0.2s;
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ -webkit-animation-play-state: paused;
+ animation-play-state: paused;
+}
+.zoom-up-leave {
+ -webkit-animation-duration: 0.2s;
+ animation-duration: 0.2s;
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ -webkit-animation-play-state: paused;
+ animation-play-state: paused;
+}
+.zoom-up-enter.zoom-up-enter-active,
+.zoom-up-appear.zoom-up-appear-active {
+ -webkit-animation-name: antZoomUpIn;
+ animation-name: antZoomUpIn;
+ -webkit-animation-play-state: running;
+ animation-play-state: running;
+}
+.zoom-up-leave.zoom-up-leave-active {
+ -webkit-animation-name: antZoomUpOut;
+ animation-name: antZoomUpOut;
+ -webkit-animation-play-state: running;
+ animation-play-state: running;
+ pointer-events: none;
+}
+.zoom-up-enter,
+.zoom-up-appear {
+ -webkit-transform: scale(0);
+ transform: scale(0);
+ opacity: 0;
+ -webkit-animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
+ animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
+}
+.zoom-up-enter-prepare,
+.zoom-up-appear-prepare {
+ -webkit-transform: none;
+ transform: none;
+}
+.zoom-up-leave {
+ -webkit-animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86);
+ animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86);
+}
+.zoom-down-enter,
+.zoom-down-appear {
+ -webkit-animation-duration: 0.2s;
+ animation-duration: 0.2s;
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ -webkit-animation-play-state: paused;
+ animation-play-state: paused;
+}
+.zoom-down-leave {
+ -webkit-animation-duration: 0.2s;
+ animation-duration: 0.2s;
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ -webkit-animation-play-state: paused;
+ animation-play-state: paused;
+}
+.zoom-down-enter.zoom-down-enter-active,
+.zoom-down-appear.zoom-down-appear-active {
+ -webkit-animation-name: antZoomDownIn;
+ animation-name: antZoomDownIn;
+ -webkit-animation-play-state: running;
+ animation-play-state: running;
+}
+.zoom-down-leave.zoom-down-leave-active {
+ -webkit-animation-name: antZoomDownOut;
+ animation-name: antZoomDownOut;
+ -webkit-animation-play-state: running;
+ animation-play-state: running;
+ pointer-events: none;
+}
+.zoom-down-enter,
+.zoom-down-appear {
+ -webkit-transform: scale(0);
+ transform: scale(0);
+ opacity: 0;
+ -webkit-animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
+ animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
+}
+.zoom-down-enter-prepare,
+.zoom-down-appear-prepare {
+ -webkit-transform: none;
+ transform: none;
+}
+.zoom-down-leave {
+ -webkit-animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86);
+ animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86);
+}
+.zoom-left-enter,
+.zoom-left-appear {
+ -webkit-animation-duration: 0.2s;
+ animation-duration: 0.2s;
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ -webkit-animation-play-state: paused;
+ animation-play-state: paused;
+}
+.zoom-left-leave {
+ -webkit-animation-duration: 0.2s;
+ animation-duration: 0.2s;
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ -webkit-animation-play-state: paused;
+ animation-play-state: paused;
+}
+.zoom-left-enter.zoom-left-enter-active,
+.zoom-left-appear.zoom-left-appear-active {
+ -webkit-animation-name: antZoomLeftIn;
+ animation-name: antZoomLeftIn;
+ -webkit-animation-play-state: running;
+ animation-play-state: running;
+}
+.zoom-left-leave.zoom-left-leave-active {
+ -webkit-animation-name: antZoomLeftOut;
+ animation-name: antZoomLeftOut;
+ -webkit-animation-play-state: running;
+ animation-play-state: running;
+ pointer-events: none;
+}
+.zoom-left-enter,
+.zoom-left-appear {
+ -webkit-transform: scale(0);
+ transform: scale(0);
+ opacity: 0;
+ -webkit-animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
+ animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
+}
+.zoom-left-enter-prepare,
+.zoom-left-appear-prepare {
+ -webkit-transform: none;
+ transform: none;
+}
+.zoom-left-leave {
+ -webkit-animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86);
+ animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86);
+}
+.zoom-right-enter,
+.zoom-right-appear {
+ -webkit-animation-duration: 0.2s;
+ animation-duration: 0.2s;
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ -webkit-animation-play-state: paused;
+ animation-play-state: paused;
+}
+.zoom-right-leave {
+ -webkit-animation-duration: 0.2s;
+ animation-duration: 0.2s;
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ -webkit-animation-play-state: paused;
+ animation-play-state: paused;
+}
+.zoom-right-enter.zoom-right-enter-active,
+.zoom-right-appear.zoom-right-appear-active {
+ -webkit-animation-name: antZoomRightIn;
+ animation-name: antZoomRightIn;
+ -webkit-animation-play-state: running;
+ animation-play-state: running;
+}
+.zoom-right-leave.zoom-right-leave-active {
+ -webkit-animation-name: antZoomRightOut;
+ animation-name: antZoomRightOut;
+ -webkit-animation-play-state: running;
+ animation-play-state: running;
+ pointer-events: none;
+}
+.zoom-right-enter,
+.zoom-right-appear {
+ -webkit-transform: scale(0);
+ transform: scale(0);
+ opacity: 0;
+ -webkit-animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
+ animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
+}
+.zoom-right-enter-prepare,
+.zoom-right-appear-prepare {
+ -webkit-transform: none;
+ transform: none;
+}
+.zoom-right-leave {
+ -webkit-animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86);
+ animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86);
+}
+@-webkit-keyframes antZoomIn {
+ 0% {
+ -webkit-transform: scale(0.2);
+ transform: scale(0.2);
+ opacity: 0;
+ }
+ 100% {
+ -webkit-transform: scale(1);
+ transform: scale(1);
+ opacity: 1;
+ }
+}
+@keyframes antZoomIn {
+ 0% {
+ -webkit-transform: scale(0.2);
+ transform: scale(0.2);
+ opacity: 0;
+ }
+ 100% {
+ -webkit-transform: scale(1);
+ transform: scale(1);
+ opacity: 1;
+ }
+}
+@-webkit-keyframes antZoomOut {
+ 0% {
+ -webkit-transform: scale(1);
+ transform: scale(1);
+ }
+ 100% {
+ -webkit-transform: scale(0.2);
+ transform: scale(0.2);
+ opacity: 0;
+ }
+}
+@keyframes antZoomOut {
+ 0% {
+ -webkit-transform: scale(1);
+ transform: scale(1);
+ }
+ 100% {
+ -webkit-transform: scale(0.2);
+ transform: scale(0.2);
+ opacity: 0;
+ }
+}
+@-webkit-keyframes antZoomBigIn {
+ 0% {
+ -webkit-transform: scale(0.8);
+ transform: scale(0.8);
+ opacity: 0;
+ }
+ 100% {
+ -webkit-transform: scale(1);
+ transform: scale(1);
+ opacity: 1;
+ }
+}
+@keyframes antZoomBigIn {
+ 0% {
+ -webkit-transform: scale(0.8);
+ transform: scale(0.8);
+ opacity: 0;
+ }
+ 100% {
+ -webkit-transform: scale(1);
+ transform: scale(1);
+ opacity: 1;
+ }
+}
+@-webkit-keyframes antZoomBigOut {
+ 0% {
+ -webkit-transform: scale(1);
+ transform: scale(1);
+ }
+ 100% {
+ -webkit-transform: scale(0.8);
+ transform: scale(0.8);
+ opacity: 0;
+ }
+}
+@keyframes antZoomBigOut {
+ 0% {
+ -webkit-transform: scale(1);
+ transform: scale(1);
+ }
+ 100% {
+ -webkit-transform: scale(0.8);
+ transform: scale(0.8);
+ opacity: 0;
+ }
+}
+@-webkit-keyframes antZoomUpIn {
+ 0% {
+ -webkit-transform: scale(0.8);
+ transform: scale(0.8);
+ -webkit-transform-origin: 50% 0%;
+ transform-origin: 50% 0%;
+ opacity: 0;
+ }
+ 100% {
+ -webkit-transform: scale(1);
+ transform: scale(1);
+ -webkit-transform-origin: 50% 0%;
+ transform-origin: 50% 0%;
+ }
+}
+@keyframes antZoomUpIn {
+ 0% {
+ -webkit-transform: scale(0.8);
+ transform: scale(0.8);
+ -webkit-transform-origin: 50% 0%;
+ transform-origin: 50% 0%;
+ opacity: 0;
+ }
+ 100% {
+ -webkit-transform: scale(1);
+ transform: scale(1);
+ -webkit-transform-origin: 50% 0%;
+ transform-origin: 50% 0%;
+ }
+}
+@-webkit-keyframes antZoomUpOut {
+ 0% {
+ -webkit-transform: scale(1);
+ transform: scale(1);
+ -webkit-transform-origin: 50% 0%;
+ transform-origin: 50% 0%;
+ }
+ 100% {
+ -webkit-transform: scale(0.8);
+ transform: scale(0.8);
+ -webkit-transform-origin: 50% 0%;
+ transform-origin: 50% 0%;
+ opacity: 0;
+ }
+}
+@keyframes antZoomUpOut {
+ 0% {
+ -webkit-transform: scale(1);
+ transform: scale(1);
+ -webkit-transform-origin: 50% 0%;
+ transform-origin: 50% 0%;
+ }
+ 100% {
+ -webkit-transform: scale(0.8);
+ transform: scale(0.8);
+ -webkit-transform-origin: 50% 0%;
+ transform-origin: 50% 0%;
+ opacity: 0;
+ }
+}
+@-webkit-keyframes antZoomLeftIn {
+ 0% {
+ -webkit-transform: scale(0.8);
+ transform: scale(0.8);
+ -webkit-transform-origin: 0% 50%;
+ transform-origin: 0% 50%;
+ opacity: 0;
+ }
+ 100% {
+ -webkit-transform: scale(1);
+ transform: scale(1);
+ -webkit-transform-origin: 0% 50%;
+ transform-origin: 0% 50%;
+ }
+}
+@keyframes antZoomLeftIn {
+ 0% {
+ -webkit-transform: scale(0.8);
+ transform: scale(0.8);
+ -webkit-transform-origin: 0% 50%;
+ transform-origin: 0% 50%;
+ opacity: 0;
+ }
+ 100% {
+ -webkit-transform: scale(1);
+ transform: scale(1);
+ -webkit-transform-origin: 0% 50%;
+ transform-origin: 0% 50%;
+ }
+}
+@-webkit-keyframes antZoomLeftOut {
+ 0% {
+ -webkit-transform: scale(1);
+ transform: scale(1);
+ -webkit-transform-origin: 0% 50%;
+ transform-origin: 0% 50%;
+ }
+ 100% {
+ -webkit-transform: scale(0.8);
+ transform: scale(0.8);
+ -webkit-transform-origin: 0% 50%;
+ transform-origin: 0% 50%;
+ opacity: 0;
+ }
+}
+@keyframes antZoomLeftOut {
+ 0% {
+ -webkit-transform: scale(1);
+ transform: scale(1);
+ -webkit-transform-origin: 0% 50%;
+ transform-origin: 0% 50%;
+ }
+ 100% {
+ -webkit-transform: scale(0.8);
+ transform: scale(0.8);
+ -webkit-transform-origin: 0% 50%;
+ transform-origin: 0% 50%;
+ opacity: 0;
+ }
+}
+@-webkit-keyframes antZoomRightIn {
+ 0% {
+ -webkit-transform: scale(0.8);
+ transform: scale(0.8);
+ -webkit-transform-origin: 100% 50%;
+ transform-origin: 100% 50%;
+ opacity: 0;
+ }
+ 100% {
+ -webkit-transform: scale(1);
+ transform: scale(1);
+ -webkit-transform-origin: 100% 50%;
+ transform-origin: 100% 50%;
+ }
+}
+@keyframes antZoomRightIn {
+ 0% {
+ -webkit-transform: scale(0.8);
+ transform: scale(0.8);
+ -webkit-transform-origin: 100% 50%;
+ transform-origin: 100% 50%;
+ opacity: 0;
+ }
+ 100% {
+ -webkit-transform: scale(1);
+ transform: scale(1);
+ -webkit-transform-origin: 100% 50%;
+ transform-origin: 100% 50%;
+ }
+}
+@-webkit-keyframes antZoomRightOut {
+ 0% {
+ -webkit-transform: scale(1);
+ transform: scale(1);
+ -webkit-transform-origin: 100% 50%;
+ transform-origin: 100% 50%;
+ }
+ 100% {
+ -webkit-transform: scale(0.8);
+ transform: scale(0.8);
+ -webkit-transform-origin: 100% 50%;
+ transform-origin: 100% 50%;
+ opacity: 0;
+ }
+}
+@keyframes antZoomRightOut {
+ 0% {
+ -webkit-transform: scale(1);
+ transform: scale(1);
+ -webkit-transform-origin: 100% 50%;
+ transform-origin: 100% 50%;
+ }
+ 100% {
+ -webkit-transform: scale(0.8);
+ transform: scale(0.8);
+ -webkit-transform-origin: 100% 50%;
+ transform-origin: 100% 50%;
+ opacity: 0;
+ }
+}
+@-webkit-keyframes antZoomDownIn {
+ 0% {
+ -webkit-transform: scale(0.8);
+ transform: scale(0.8);
+ -webkit-transform-origin: 50% 100%;
+ transform-origin: 50% 100%;
+ opacity: 0;
+ }
+ 100% {
+ -webkit-transform: scale(1);
+ transform: scale(1);
+ -webkit-transform-origin: 50% 100%;
+ transform-origin: 50% 100%;
+ }
+}
+@keyframes antZoomDownIn {
+ 0% {
+ -webkit-transform: scale(0.8);
+ transform: scale(0.8);
+ -webkit-transform-origin: 50% 100%;
+ transform-origin: 50% 100%;
+ opacity: 0;
+ }
+ 100% {
+ -webkit-transform: scale(1);
+ transform: scale(1);
+ -webkit-transform-origin: 50% 100%;
+ transform-origin: 50% 100%;
+ }
+}
+@-webkit-keyframes antZoomDownOut {
+ 0% {
+ -webkit-transform: scale(1);
+ transform: scale(1);
+ -webkit-transform-origin: 50% 100%;
+ transform-origin: 50% 100%;
+ }
+ 100% {
+ -webkit-transform: scale(0.8);
+ transform: scale(0.8);
+ -webkit-transform-origin: 50% 100%;
+ transform-origin: 50% 100%;
+ opacity: 0;
+ }
+}
+@keyframes antZoomDownOut {
+ 0% {
+ -webkit-transform: scale(1);
+ transform: scale(1);
+ -webkit-transform-origin: 50% 100%;
+ transform-origin: 50% 100%;
+ }
+ 100% {
+ -webkit-transform: scale(0.8);
+ transform: scale(0.8);
+ -webkit-transform-origin: 50% 100%;
+ transform-origin: 50% 100%;
+ opacity: 0;
+ }
+}
diff --git a/src/components/assets/styles/antdBaseStyles.css b/src/components/assets/styles/antdBaseStyles.css
new file mode 100644
index 00000000..90ba8e70
--- /dev/null
+++ b/src/components/assets/styles/antdBaseStyles.css
@@ -0,0 +1,22 @@
+[class^='ant-'],
+[class*='ant-'],
+[class^='ant-'] *,
+[class*='ant-'] *,
+[class^='ant-'] *::before,
+[class*='ant-'] *::before,
+[class^='ant-'] *::after,
+[class*='ant-'] *::after {
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+}
+*,
+*::before,
+*::after {
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+}
+
+img {
+ vertical-align: middle;
+ border-style: none;
+}
diff --git a/src/components/assets/styleguide.ts b/src/components/assets/styles/styleguide.ts
similarity index 88%
rename from src/components/assets/styleguide.ts
rename to src/components/assets/styles/styleguide.ts
index d4d555b3..12f44ef3 100644
--- a/src/components/assets/styleguide.ts
+++ b/src/components/assets/styles/styleguide.ts
@@ -14,3 +14,4 @@ export const fieldErrorStyles = {
}
export const fontSizeRegular = '14px'
export const linkColor = '#1EA7FD'
+export const skeletonButtonBorderColor = '#DFDFDF'
diff --git a/src/components/index.ts b/src/components/index.ts
index 5653d4e5..92ccd1e3 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -4,9 +4,13 @@ export { default as Input } from './Input'
export { default as Icon } from './Icon'
export { default as Link } from './Link'
export * from './Notification'
+export { default as Popover } from './Popover'
+export { default as RadioGroup } from './RadioGroup'
export { default as Select } from './Select'
export { default as Skeleton } from './Skeleton'
export { default as Table } from './Table'
export { default as Tag } from './Tag'
export { default as Toggle } from './Toggle'
+export { default as Tooltip } from './Tooltip'
+export { default as Tree } from './Tree'
export * from './types'
diff --git a/src/components/utils.ts b/src/components/utils.ts
index 10059e47..fb355f80 100644
--- a/src/components/utils.ts
+++ b/src/components/utils.ts
@@ -1,3 +1,5 @@
+import { TooltipPlacement } from 'antd/es/tooltip'
+
export const TAG = 'data-test'
export const getDataTestAttributeProp = (
@@ -6,3 +8,18 @@ export const getDataTestAttributeProp = (
): { [TAG]: string } => ({
[TAG]: dataTag ? `${cmpName}-${dataTag}` : cmpName
})
+
+export const placementOptions: TooltipPlacement[] = [
+ 'bottom',
+ 'bottomLeft',
+ 'bottomRight',
+ 'left',
+ 'leftBottom',
+ 'leftTop',
+ 'right',
+ 'rightBottom',
+ 'rightTop',
+ 'top',
+ 'topLeft',
+ 'topRight'
+]
diff --git a/src/storybook.test.ts b/src/storybook.test.ts
index 750317cf..792636d3 100644
--- a/src/storybook.test.ts
+++ b/src/storybook.test.ts
@@ -1,2 +1,13 @@
-import initStoryshots from '@storybook/addon-storyshots'
-initStoryshots()
+import initStoryshots, {
+ shallowSnapshot,
+ snapshot
+} from '@storybook/addon-storyshots'
+
+const componentsToShallowRender = ['Tree']
+
+initStoryshots({
+ test: data =>
+ componentsToShallowRender.includes(data.context.kind)
+ ? shallowSnapshot(data)
+ : snapshot(data)
+})
+
+
+
+
+`;
+
+exports[`Storyshots Tree Default 1`] = `
+
+
+
+ {label && (
+ (
+
+ ) => onChange(event.target.value)}
+ value={value}
+ {...rest}
+ />
+ )}
+ rules={rules}
+ />
+
+ )
+}
+
+export default FormRadioGroup
diff --git a/src/components/Form/FormTree/FormTree.test.tsx b/src/components/Form/FormTree/FormTree.test.tsx
new file mode 100644
index 00000000..de63021c
--- /dev/null
+++ b/src/components/Form/FormTree/FormTree.test.tsx
@@ -0,0 +1,117 @@
+import { Controller } from 'react-hook-form'
+import FieldLabel from '../FieldLabel'
+import { FieldValues } from 'react-hook-form/dist/types/form'
+import React from 'react'
+import treeData from '../../Tree/fixtures/0_sample_data'
+import FieldContext, { FieldContextProps } from '../FieldContext'
+import FormTree, { FormTreeProps } from '.'
+import { mount, ReactWrapper } from 'enzyme'
+import Tree, { TreeId } from '../../Tree'
+
+/* Helper functions */
+interface MountWrapperArgsType {
+ initialValues: FieldValues
+ name: string
+ defaultChecked?: TreeId[]
+}
+
+const mountWrapper = ({
+ initialValues,
+ name,
+ defaultChecked
+}: MountWrapperArgsType) => {
+ const defaultValue: FieldContextProps = {
+ initialValues,
+ loading: true,
+ onSubmit: mockOnSubmit
+ }
+ const formTreeProps: FormTreeProps = {
+ name,
+ treeData
+ }
+
+ if (defaultChecked) formTreeProps.defaultChecked = defaultChecked
+
+ wrapper = mount(
+
+ {label && (
+ (
+
+ )
+}
+
+export default FormTree
diff --git a/src/components/Form/index.tsx b/src/components/Form/index.tsx
index 753f62df..d13224f2 100644
--- a/src/components/Form/index.tsx
+++ b/src/components/Form/index.tsx
@@ -2,8 +2,10 @@ import { createUseStyles } from 'react-jss'
import FieldContext from './FieldContext'
import { FieldValues } from 'react-hook-form/dist/types/form'
import FormInput from './FormInput'
+import FormRadioGroup from './FormRadioGroup'
import FormSelect from './FormSelect'
import FormSubmitButton from './FormSubmitButton'
+import FormTree from './FormTree'
import { FormProvider, SubmitHandler, useForm } from 'react-hook-form'
import React, { ReactNode, useEffect } from 'react'
@@ -52,7 +54,9 @@ function Form
+
+ )
+ ],
+ title: 'Popover'
+} as Meta
+
+const Template: StoryDASSANA
+const mockTitle = 'foo'
+
+const getWrapper = (
+ additionalProps?: OmitHello World
+
+ {times(options.length, i => (
+
+ )
+}
+
+export interface RadioGroupOptions {
+ disabled?: boolean
+ label: string
+ value: string
+}
+
+export interface RadioGroupProps extends CommonComponentProps {
+ /**
+ * Default value for radio group. Without this, the first option will be defaulted
+ */
+ defaultValue?: string
+ /**
+ * Adds the disabled attribute and styles (opacity, gray scale filter, no pointer events)
+ * @default false
+ */
+ disabled?: boolean
+ /**
+ * Whether or not to show skeleton loader
+ * @default false
+ */
+ loading?: boolean
+ /**
+ * Callback that runs when element is updated
+ */
+ onChange?: ChangeEventHandler
+ /**
+ * Array of options to be rendered in the form of buttons
+ */
+ options: RadioGroupOptions[]
+ /**
+ * Element content value for controlled input elements. Requires an onChange to be passed
+ */
+ value?: string
+}
+
+const RadioGroup: FC
+
+ ))}
+
+
+ )
+ ],
+ title: 'Tooltip'
+} as Meta
+
+const Template: StoryHello World
+
+
+ )
+}
+
+const generateTreeNodeSkeletons = (count: number, treeNodeCount?: number) => (
+ <>
+ {times(count, (j: number) => {
+ return (
+ {times(blockCount, i => generateTreeBlock(i, treeNodeCount))}
+)
+
+export default TreeSkeleton
diff --git a/src/components/Tree/__tests__/Tree.test.tsx b/src/components/Tree/__tests__/Tree.test.tsx
new file mode 100644
index 00000000..d8e462af
--- /dev/null
+++ b/src/components/Tree/__tests__/Tree.test.tsx
@@ -0,0 +1,94 @@
+import { Tree as AntDTree } from 'antd'
+import React from 'react'
+import Tree from '../index'
+import treeData0 from '../fixtures/0_sample_data'
+import TreeSkeleton from '../TreeSkeleton'
+import { mount, ReactWrapper, shallow, ShallowWrapper } from 'enzyme'
+
+/* Helper functions */
+function getTreeNode(wrapper: ReactWrapper) {
+ return wrapper
+ .find('.ant-tree-treenode')
+ .find('.ant-tree-node-content-wrapper')
+ .at(0)
+}
+/* --------------------------------------- */
+
+const mockOnChange = jest.fn()
+
+let wrapper: ReactWrapper
+
+beforeEach(() => {
+ wrapper = mount(