Add Animate component

Author: olmoh

desktop/packages/mullvad-vpn/src/renderer/lib/components/animate/Animate.tsx

@@ -0,0 +1,14 @@
+import { AnimatePresentVertical, AnimatePresentVerticalProps } from './components';
+
+export type AnimateProps = {
+  type: 'present-vertical';
+} & AnimatePresentVerticalProps;
+
+export const Animate = ({ type, ...props }: AnimateProps) => {
+  switch (type) {
+    case 'present-vertical':
+      return <AnimatePresentVertical {...props} />;
+    default:
+      return null;
+  }
+};

desktop/packages/mullvad-vpn/src/renderer/lib/components/animate/components/AnimatePresentVertical.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import styled from 'styled-components';
+
+export interface AnimatePresentVerticalProps extends React.HTMLAttributes<HTMLDivElement> {
+  present?: boolean;
+  children?: React.ReactNode;
+}
+
+const StyledDiv = styled.div`
+  --display-start: none;
+  --height-start: 0;
+  --display-end: block;
+  --height-end: min-content;
+
+  overflow: clip;
+  transition-property: display, height;
+  transition-duration: 0.25s;
+  transition-timing-function: ease;
+  interpolate-size: allow-keywords;
+  transition-behavior: allow-discrete;
+  display: var(--display-start);
+  height: var(--height-start);
+  &&[data-present='true'] {
+    display: var(--display-end);
+    height: var(--height-end);
+    @starting-style {
+      height: var(--height-start);
+    }
+  }
+`;
+
+export const AnimatePresentVertical = ({ present, ...props }: AnimatePresentVerticalProps) => {
+  return <StyledDiv data-present={present} {...props} />;
+};

desktop/packages/mullvad-vpn/src/renderer/lib/components/animate/components/index.ts

@@ -0,0 +1 @@
+export * from './AnimatePresentVertical';

desktop/packages/mullvad-vpn/src/renderer/lib/components/animate/index.ts

@@ -0,0 +1 @@
+export * from './Animate';