From abb46513d451d1e39668fc0afb0345e852871a19 Mon Sep 17 00:00:00 2001 From: Jonny Harris Date: Thu, 9 Jun 2022 11:50:53 +0100 Subject: [PATCH] Shopping: Improve product icon. (#11656) * Improve product icon. * Update packages/element-library/src/product/icon.js Co-authored-by: Pascal Birchler * Update packages/element-library/src/product/icon.js Co-authored-by: Pascal Birchler Co-authored-by: Pascal Birchler --- packages/design-system/src/icons/index.js | 1 + .../src}/icons/shopping.svg | 0 packages/element-library/src/gif/icon.js | 2 +- packages/element-library/src/image/icon.js | 2 +- packages/element-library/src/product/icon.js | 73 ++++--------------- .../src/{media => shared}/visibleImage.js | 0 packages/element-library/src/video/icon.js | 2 +- .../library/panes/shopping/shoppingIcon.js | 14 +--- 8 files changed, 19 insertions(+), 75 deletions(-) rename packages/{story-editor/src/components/library/panes/shopping => design-system/src}/icons/shopping.svg (100%) rename packages/element-library/src/{media => shared}/visibleImage.js (100%) diff --git a/packages/design-system/src/icons/index.js b/packages/design-system/src/icons/index.js index 1b408e0eee35..ce36aa8128b8 100644 --- a/packages/design-system/src/icons/index.js +++ b/packages/design-system/src/icons/index.js @@ -122,6 +122,7 @@ export { default as QuestionMarkOutline } from './question_mark_outline.svg'; export { default as Rotate } from './rotate.svg'; export { default as Scissors } from './scissors.svg'; export { default as Shapes } from './shapes.svg'; +export { default as Shopping } from './shopping.svg'; export { default as Sparkles } from './sparkles.svg'; export { default as StopFilled } from './stop_filled.svg'; export { default as StopOutline } from './stop_outline.svg'; diff --git a/packages/story-editor/src/components/library/panes/shopping/icons/shopping.svg b/packages/design-system/src/icons/shopping.svg similarity index 100% rename from packages/story-editor/src/components/library/panes/shopping/icons/shopping.svg rename to packages/design-system/src/icons/shopping.svg diff --git a/packages/element-library/src/gif/icon.js b/packages/element-library/src/gif/icon.js index 39f8149aa2ec..dc7c6e4bdcbd 100644 --- a/packages/element-library/src/gif/icon.js +++ b/packages/element-library/src/gif/icon.js @@ -21,7 +21,7 @@ import { StoryPropTypes } from '@googleforcreators/elements'; /** * Internal dependencies */ -import VisibleImage from '../media/visibleImage'; +import VisibleImage from '../shared/visibleImage'; function GifLayerIcon({ element: { diff --git a/packages/element-library/src/image/icon.js b/packages/element-library/src/image/icon.js index b7475c6e0fc4..202882bb4d31 100644 --- a/packages/element-library/src/image/icon.js +++ b/packages/element-library/src/image/icon.js @@ -24,7 +24,7 @@ import { StoryPropTypes } from '@googleforcreators/elements'; /** * Internal dependencies */ -import VisibleImage from '../media/visibleImage'; +import VisibleImage from '../shared/visibleImage'; function ImageLayerIcon({ element: { resource }, getProxiedUrl }) { const url = getSmallestUrlForWidth(0, resource); diff --git a/packages/element-library/src/product/icon.js b/packages/element-library/src/product/icon.js index 5c96bc03f098..3fa2c6c4f803 100644 --- a/packages/element-library/src/product/icon.js +++ b/packages/element-library/src/product/icon.js @@ -17,68 +17,21 @@ /** * External dependencies */ -import styled from 'styled-components'; -import { generatePatternStyles } from '@googleforcreators/patterns'; import { StoryPropTypes } from '@googleforcreators/elements'; -import { getMaskByType, MaskTypes } from '@googleforcreators/masks'; +import { Icons } from '@googleforcreators/design-system'; -const Container = styled.div` - display: flex; - flex-direction: row; - justify-content: center; - align-items: center; - height: 21px; - width: 21px; - padding: 1px; - border-radius: ${({ theme }) => theme.borders.radius.small}; - background-color: ${({ theme }) => theme.colors.opacity.black10}; -`; - -const ProductPreview = styled.div.attrs(({ backgroundColor }) => ({ - // Prevents `ProductPreview` class from being generated with each new layer. - // https://styled-components.com/docs/faqs#when-to-use-attrs - style: generatePatternStyles(backgroundColor), -}))` - width: 100%; - height: 100%; - margin: 1px; - clip-path: ${({ maskId }) => `url(#${maskId})`}; -`; - -/* -clip-path isn't stable in Safari yet, so these -Product Layer Icons are going to show up as various quadrilateral -until that stabilizes for inline SVGs as clip paths. -More info here: -https://stackoverflow.com/questions/41860477/why-doesnt-css-clip-path-with-svg-work-in-safari -https://caniuse.com/css-clip-path -*/ - -function ProductLayerIcon({ element: { id } }) { - const maskDef = getMaskByType(MaskTypes.CIRCLE); - - const maskId = `mask-${maskDef.type}-${id}-layer-preview`; - - return ( - - - - - 1 - // this is important for Firefox's interpretation of clip paths - transform="scale(1 0.9)" - clipPathUnits="objectBoundingBox" - > - - - - - - - ); +/** + * Internal dependencies + */ +import VisibleImage from '../shared/visibleImage'; + +function ProductLayerIcon({ element: { product } }) { + const productImage = product?.productImages?.[0] || {}; + const { url, alt } = productImage; + if (!url) { + return ; + } + return ; } ProductLayerIcon.propTypes = { diff --git a/packages/element-library/src/media/visibleImage.js b/packages/element-library/src/shared/visibleImage.js similarity index 100% rename from packages/element-library/src/media/visibleImage.js rename to packages/element-library/src/shared/visibleImage.js diff --git a/packages/element-library/src/video/icon.js b/packages/element-library/src/video/icon.js index c958c9f4de64..11586cce29e4 100644 --- a/packages/element-library/src/video/icon.js +++ b/packages/element-library/src/video/icon.js @@ -25,7 +25,7 @@ import { StoryPropTypes } from '@googleforcreators/elements'; * Internal dependencies */ import VideoImage from '../media/videoImage'; -import VisibleImage from '../media/visibleImage'; +import VisibleImage from '../shared/visibleImage'; function VideoLayerIcon({ element: { diff --git a/packages/story-editor/src/components/library/panes/shopping/shoppingIcon.js b/packages/story-editor/src/components/library/panes/shopping/shoppingIcon.js index 9f9b02eef92f..156aa5abffa6 100644 --- a/packages/story-editor/src/components/library/panes/shopping/shoppingIcon.js +++ b/packages/story-editor/src/components/library/panes/shopping/shoppingIcon.js @@ -18,20 +18,10 @@ * External dependencies */ import { __ } from '@googleforcreators/i18n'; -import styled from 'styled-components'; - -/** - * Internal dependencies - */ -import Icon from './icons/shopping.svg'; - -const StyledIcon = styled(Icon)` - width: 32px !important; - height: 32px !important; -`; +import { Icons } from '@googleforcreators/design-system'; function ShoppingIcon() { - return ; + return ; } export default ShoppingIcon;