Use camelCase, change output

packages/element-library/src/audio-sticker/output.js → packages/element-library/src/audioSticker/output.js

@@ -13,9 +13,27 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-function AudioStickerOutput() {
-  // TODO (@AnuragVasanwala): Need to move this logic here from 'packages/output/src/page.js'.
-  return <div>{'AudioStickerOutput'}</div>;
+
+/**
+ * External dependencies
+ */
+import { StoryPropTypes } from '@googleforcreators/elements';
+
+function AudioStickerOutput({ element }) {
+  return (
+    <amp-story-audio-sticker
+      size={element.size}
+      sticker={element.sticker}
+      sticker-style={
+        element.style && element.style !== 'none' ? element.style : undefined
+      }
+      key={element.id}
+    />
+  );
 }
 
+AudioStickerOutput.propTypes = {
+  element: StoryPropTypes.elements.audioSticker.isRequired,
+};
+
 export default AudioStickerOutput;

packages/element-library/src/constants.ts

@@ -21,7 +21,7 @@ export {
   AUDIO_STICKER_ASPECT_RATIOS,
   AUDIO_STICKER_DEFAULT_PRESET,
   AUDIO_STICKER_STYLES,
-} from './audio-sticker/constants';
+} from './audioSticker/constants';
 
 export const DEFAULT_ATTRIBUTES_FOR_MEDIA = {
   scale: 100,

packages/element-library/src/elementTypes.js

@@ -29,7 +29,7 @@ import * as videoElement from './video';
 import * as gifElement from './gif';
 import * as stickerElement from './sticker';
 import * as productElement from './product';
-import * as audioStickerElement from './audio-sticker';
+import * as audioStickerElement from './audioSticker';
 
 const elementTypes = [
   { type: 'text', name: __('Text', 'web-stories'), ...textElement },

packages/element-library/src/product/output.js

@@ -36,7 +36,7 @@ function ProductOutput({ element }) {
 }
 
 ProductOutput.propTypes = {
-  element: StoryPropTypes.elements.shape.isRequired,
+  element: StoryPropTypes.elements.product.isRequired,
 };
 
 export default ProductOutput;

packages/elements/src/constants.ts

@@ -27,7 +27,7 @@ export const ELEMENT_TYPES = {
   GIF: 'gif',
   STICKER: 'sticker',
   PRODUCT: 'product',
-  AUDIO_STICKER: 'audio_sticker',
+  AUDIO_STICKER: 'audioSticker',
 } as const;
 
 export const MEDIA_ELEMENT_TYPES = [

packages/elements/src/types/elementType.ts

@@ -22,5 +22,5 @@ export enum ElementType {
   Sticker = 'sticker',
   Shape = 'shape',
   Product = 'product',
-  AudioSticker = 'audio_sticker',
+  AudioSticker = 'audioSticker',
 }

packages/elements/src/types/propTypes.ts

@@ -193,6 +193,14 @@ const background = PropTypes.shape({
   inner: element,
 });
 
+const product = PropTypes.shape({
+  ...StoryElementPropTypes,
+});
+
+const audioSticker = PropTypes.shape({
+  ...StoryElementPropTypes,
+});
+
 const StoryPropTypes = {
   mask,
   link,
@@ -202,7 +210,18 @@ const StoryPropTypes = {
   element,
   layer,
   textContent,
-  elements: { image, video, gif, media, text, shape, sticker, background },
+  elements: {
+    image,
+    video,
+    gif,
+    media,
+    text,
+    shape,
+    sticker,
+    background,
+    product,
+    audioSticker,
+  },
 };
 
 export { StoryPropTypes };

packages/output/src/page.js

@@ -110,7 +110,7 @@ function OutputPage({
     return newElement;
   });
 
-  const products = elements
+  const products = otherElements
     .filter(({ type, isHidden }) => type === ELEMENT_TYPES.PRODUCT && !isHidden)
     .map(({ product }) => product)
     .filter(Boolean);
@@ -135,12 +135,6 @@ function OutputPage({
     videoCaptions.push(`el-${id}-captions`);
   }
 
-  const audioStickers = elements.filter(
-    ({ type }) => type === ELEMENT_TYPES.AUDIO_STICKER
-  );
-
-  const hasAudioStickers = audioStickers.length > 0;
-
   return (
     <amp-story-page
       id={id}
@@ -215,27 +209,6 @@ function OutputPage({
           </div>
         </amp-story-grid-layer>
       )}
-
-      {
-        // TODO (@AnuragVasanwala): Need to move this logic to sticker's output.js.
-        hasAudioStickers && (
-          <amp-story-grid-layer
-            template="vertical"
-            aspect-ratio={ASPECT_RATIO}
-            class="grid-layer"
-          >
-            {audioStickers.map((element) => (
-              <amp-story-audio-sticker
-                size={element.size}
-                sticker={element.sticker}
-                sticker-style={element.style}
-                key={element.id}
-              />
-            ))}
-          </amp-story-grid-layer>
-        )
-      }
-
       {/* <amp-story-page-outlink> needs to be the last child element */}
       {hasPageAttachment && <Outlink {...pageAttachment} />}
       {hasProducts && (

packages/output/src/utils/getUsedAmpExtensions.js

@@ -79,7 +79,7 @@ const getUsedAmpExtensions = (pages) => {
         case 'product':
           extensions.push(ampStoryShopping);
           break;
-        case 'audio_sticker':
+        case 'audioSticker':
           extensions.push(ampStoryAudioSticker);
           break;
         default:

packages/story-editor/src/app/quickActions/useQuickActions.js

@@ -215,7 +215,7 @@ const useQuickActions = () => {
         Icon: AudioSticker,
         label: ACTIONS.INSERT_AUDIO_STICKER.text,
         onClick: () => {
-          insertElement('audio_sticker', AUDIO_STICKER_DEFAULT_PRESET);
+          insertElement('audioSticker', AUDIO_STICKER_DEFAULT_PRESET);
         },
         ...actionMenuProps,
       });

packages/story-editor/src/components/floatingMenu/menus/selector.js

@@ -31,7 +31,7 @@ import Sticker from './sticker';
 import Text from './text';
 import Video from './video';
 import Product from './product';
-import AudioSticker from './audio_sticker';
+import AudioSticker from './audioSticker';
 
 const FloatingMenuSelector = memo(function FloatingMenuSelector({
   selectedElementType,

packages/story-editor/src/components/panels/design/index.js

@@ -15,7 +15,7 @@
  */
 
 export { default as AnimationPanel } from './animation';
-export { default as AudioStickerPanel } from './audio-sticker';
+export { default as AudioStickerPanel } from './audioSticker';
 export { default as BorderStylePanel } from './border';
 export { default as CaptionsPanel } from './captions';
 export { default as ElementAlignmentPanel } from './alignment';

packages/story-editor/src/components/style/styleProvider.js

@@ -86,7 +86,7 @@ function StyleProvider({ children }) {
     if (icons[0] === 'product') {
       selectionIcon = ProductSelectionIcon;
     }
-    if (icons[0] === 'audio_sticker') {
+    if (icons[0] === 'audioSticker') {
       selectionIcon = AudioStickerSelectionIcon;
     }
   } else {