Migrate remaining components to TypeScript (#2065)

* Migrate AspectRatio to TypeScript

* Migrate Calendar components to TypeScript

* Migrate Tabs to TypeScript

* Migrate Carousel to TypeScript

* Migrate Sidebar to TypeScript

* Remove shared prop types

* Add changesets

.changeset/perfect-beers-fold.md

@@ -0,0 +1,5 @@
+---
+'@sumup/circuit-ui': minor
+---
+
+Migrated the Tabs components to TypeScript.

.changeset/real-clouds-relate.md

@@ -0,0 +1,5 @@
+---
+'@sumup/circuit-ui': major
+---
+
+Removed the `sharedPropTypes` export. Type the props using TypeScript instead.

.changeset/sour-masks-attend.md

@@ -0,0 +1,5 @@
+---
+'@sumup/circuit-ui': major
+---
+
+Migrated the Carousel components to TypeScript. Added the required `playButtonLabel`, `pauseButtonLabel`, `prevButtonLabel`, and `nextButtonLabel` props.

.changeset/three-radios-confess.md

@@ -0,0 +1,5 @@
+---
+'@sumup/circuit-ui': minor
+---
+
+Migrated the Sidebar component to TypeScript.

.changeset/wise-zoos-do.md

@@ -0,0 +1,5 @@
+---
+'@sumup/circuit-ui': major
+---
+
+Migrated the Calendar components to TypeScript. Some props are now required. The CalendarTagTwoStep's `clearText` and `confirmText` props have been renamed to `clearButtonLabel` and `confirmButtonLabel` respectively.

packages/circuit-ui/components/AspectRatio/AspectRatio.spec.jsx → packages/circuit-ui/components/AspectRatio/AspectRatio.spec.tsx

@@ -17,7 +17,7 @@ import { describe, expect, it } from 'vitest';
 
 import { render } from '../../util/test-utils';
 
-import AspectRatio from './AspectRatio';
+import { AspectRatio } from './AspectRatio';
 
 describe('AspectRatio', () => {
   it('should render with default styles', () => {

packages/circuit-ui/components/AspectRatio/AspectRatio.stories.jsx → packages/circuit-ui/components/AspectRatio/AspectRatio.stories.tsx

@@ -15,7 +15,7 @@
 
 import styled from '@emotion/styled';
 
-import AspectRatio from './AspectRatio';
+import { AspectRatio, AspectRatioProps } from './AspectRatio';
 
 const Background = styled('div')`
   background: lightgrey;
@@ -26,7 +26,7 @@ export default {
   component: AspectRatio,
 };
 
-export const Base = (args) => (
+export const Base = (args: AspectRatioProps) => (
   <div style={{ width: '50vw' }}>
     <AspectRatio {...args}>
       <Background />

packages/circuit-ui/components/AspectRatio/AspectRatio.tsx

@@ -0,0 +1,77 @@
+/**
+ * Copyright 2019, SumUp Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Children, forwardRef, cloneElement, ReactElement } from 'react';
+import styled from '@emotion/styled';
+import { ClassNames, css, ClassNamesContent } from '@emotion/react';
+
+export interface AspectRatioProps {
+  children?: ReactElement;
+  aspectRatio?: number;
+}
+
+const wrapperStyles = ({ aspectRatio }: { aspectRatio: number }) => css`
+  display: block;
+  position: relative;
+  overflow: hidden;
+  height: 0;
+  width: 100%;
+  padding-top: ${Math.round((1 / aspectRatio) * 100)}%;
+`;
+
+const Wrapper = styled('div')(wrapperStyles);
+
+const childStyles = (context: ClassNamesContent) => context.css`
+  display: block;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  z-index: ${context.theme.zIndex.absolute};
+`;
+
+export const AspectRatio = forwardRef<HTMLDivElement, AspectRatioProps>(
+  ({ aspectRatio, children, ...props }, ref) => {
+    if (!children) {
+      return null;
+    }
+
+    const child = Children.only(children);
+
+    if (!aspectRatio) {
+      return (
+        <div ref={ref} {...props}>
+          {child}
+        </div>
+      );
+    }
+
+    return (
+      <Wrapper ref={ref} aspectRatio={aspectRatio} {...props}>
+        <ClassNames>
+          {(context) =>
+            cloneElement(child, { className: childStyles(context) })
+          }
+        </ClassNames>
+      </Wrapper>
+    );
+  },
+);
+
+AspectRatio.displayName = 'AspectRatio';