diff --git a/packages/element-library/src/product/output.tsx b/packages/element-library/src/product/output.tsx
index bdb1a93cb0d5..62015b7ace97 100644
--- a/packages/element-library/src/product/output.tsx
+++ b/packages/element-library/src/product/output.tsx
@@ -15,16 +15,15 @@
*/
/**
- * External dependencies
+ * Internal dependencies
*/
-import { StoryPropTypes } from '@googleforcreators/elements';
import type { ProductElement } from '../types';
/**
* Returns AMP HTML for saving into post content for displaying in the FE.
*
- * @param {Object<*>} props Props.
- * @return {*} Rendered component.
+ * @param props Props.
+ * @return Rendered component.
*/
function ProductOutput({ element }: { element: ProductElement }) {
const { product } = element;
@@ -36,8 +35,4 @@ function ProductOutput({ element }: { element: ProductElement }) {
return ;
}
-ProductOutput.propTypes = {
- element: StoryPropTypes.elements.shape.isRequired,
-};
-
export default ProductOutput;
diff --git a/packages/element-library/src/shared/shared.ts b/packages/element-library/src/shared/shared.ts
index 0d5b5feb5ee8..81215da5e553 100644
--- a/packages/element-library/src/shared/shared.ts
+++ b/packages/element-library/src/shared/shared.ts
@@ -18,7 +18,10 @@
* External dependencies
*/
import { css } from 'styled-components';
-import { generatePatternStyles, Pattern } from '@googleforcreators/patterns';
+import {
+ generatePatternStyles,
+ type Pattern,
+} from '@googleforcreators/patterns';
import { getBorderStyle, getBorderRadius } from '@googleforcreators/masks';
import type { BorderRadius, Element } from '@googleforcreators/elements';
@@ -44,12 +47,12 @@ export const elementWithPosition = css`
`;
// TODO: removed round/ceil, calculateFitTextFontSize needs to be improved?
-export const elementWithSize = css<{width: number; height: number}>`
+export const elementWithSize = css<{ width: number; height: number }>`
width: ${({ width }) => `${width}px`};
height: ${({ height }) => `${height}px`};
`;
-export const elementWithRotation = css<{rotationAngle: number}>`
+export const elementWithRotation = css<{ rotationAngle: number }>`
transform: ${({ rotationAngle }) => `rotate(${rotationAngle}deg)`};
`;
@@ -62,7 +65,10 @@ type DataToStyle = (prop: number) => string;
export const elementWithHighlightBorderRadius = ({
borderRadius,
dataToEditorY,
-}: { borderRadius: BorderRadius, dataToEditorY?: DataToStyle}) =>
+}: {
+ borderRadius: BorderRadius;
+ dataToEditorY?: DataToStyle;
+}) =>
dataToEditorY &&
css`
border-radius: ${dataToEditorY(borderRadius?.topLeft || 0)}px
@@ -107,7 +113,7 @@ export const elementWithTextParagraphStyle = css<{
margin: number;
padding?: number;
lineHeight: number;
- textAlign: 'left'|'right'|'center'|'justify'|'initial'|'inherit';
+ textAlign: 'left' | 'right' | 'center' | 'justify' | 'initial' | 'inherit';
}>`
margin: ${({ margin }) => margin};
padding: ${({ padding }) => padding || 0};
diff --git a/packages/element-library/src/shared/useColorTransformHandler.ts b/packages/element-library/src/shared/useColorTransformHandler.ts
index d2137a4de472..7773630aedd4 100644
--- a/packages/element-library/src/shared/useColorTransformHandler.ts
+++ b/packages/element-library/src/shared/useColorTransformHandler.ts
@@ -23,7 +23,7 @@ import {
} from '@googleforcreators/patterns';
import { useTransformHandler } from '@googleforcreators/transform';
import type { ElementId } from '@googleforcreators/elements';
-import type { RefObject } from "react";
+import type { RefObject } from 'react';
function useColorTransformHandler({
id,
diff --git a/packages/element-library/src/typings/global.d.ts b/packages/element-library/src/typings/global.d.ts
new file mode 100644
index 000000000000..95f6dc17b821
--- /dev/null
+++ b/packages/element-library/src/typings/global.d.ts
@@ -0,0 +1,29 @@
+/*
+ * Copyright 2024 Google LLC
+ *
+ * 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
+ *
+ * https://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.
+ */
+
+interface AmpStoryShoppingTag {
+ 'data-product-id'?: string | number;
+}
+
+declare global {
+ namespace JSX {
+ interface IntrinsicElements {
+ 'amp-story-shopping-tag': AmpStoryShoppingTag;
+ }
+ }
+}
+
+export {};
diff --git a/packages/element-library/src/typings/svg.d.ts b/packages/element-library/src/typings/svg.d.ts
new file mode 100644
index 000000000000..2b2af4b3434d
--- /dev/null
+++ b/packages/element-library/src/typings/svg.d.ts
@@ -0,0 +1,23 @@
+/*
+ * Copyright 2023 Google LLC
+ *
+ * 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
+ *
+ * https://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.
+ */
+
+declare module '*.svg' {
+ import type { FunctionComponent, SVGProps } from 'react';
+ const ReactComponent: FunctionComponent<
+ SVGProps & { title?: string }
+ >;
+ export default ReactComponent;
+}