Merge branch 'create-animateheight-component-des-1897'

4 files changed, 50 insertions, 0 deletions

diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/animate/Animate.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/animate/Animate.tsx
new file mode 100644
index 0000000000..d0edee746e
--- /dev/null
+++ b/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 function Animate({ type, ...props }: AnimateProps) {
+  switch (type) {
+    case 'present-vertical':
+      return <AnimatePresentVertical {...props} />;
+    default:
+      return type satisfies never;
+  }
+}
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/animate/components/AnimatePresentVertical.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/animate/components/AnimatePresentVertical.tsx
new file mode 100644
index 0000000000..31536c93f9
--- /dev/null
+++ b/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 function AnimatePresentVertical({ present, ...props }: AnimatePresentVerticalProps) {
+  return <StyledDiv data-present={present} {...props} />;
+}
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/animate/components/index.ts b/desktop/packages/mullvad-vpn/src/renderer/lib/components/animate/components/index.ts
new file mode 100644
index 0000000000..6bea1c015a
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/animate/components/index.ts
@@ -0,0 +1 @@
+export * from './AnimatePresentVertical';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/animate/index.ts b/desktop/packages/mullvad-vpn/src/renderer/lib/components/animate/index.ts
new file mode 100644
index 0000000000..c84772d940
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/animate/index.ts
@@ -0,0 +1 @@
+export * from './Animate';