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; +}