@player-ui/reference-assets-plugin 0.3.1-next.0 → 0.3.1

package/package.json

@@ -1,16 +1,16 @@
 {
   "name": "@player-ui/reference-assets-plugin",
-  "version": "0.3.1-next.0",
+  "version": "0.3.1",
   "private": false,
   "publishConfig": {
     "registry": "https://registry.npmjs.org"
   },
   "peerDependencies": {
-    "@player-ui/player": "0.3.1-next.0"
+    "@player-ui/player": "0.3.1"
   },
   "dependencies": {
-    "@player-ui/beacon-plugin": "0.3.1-next.0",
-    "@player-ui/asset-transform-plugin": "0.3.1-next.0",
+    "@player-ui/beacon-plugin": "0.3.1",
+    "@player-ui/asset-transform-plugin": "0.3.1",
     "@babel/runtime": "7.15.4"
   },
   "main": "dist/index.cjs.js",
@@ -54,6 +54,15 @@
     {
       "name": "Kelly Harrop",
       "url": "https://github.com/kharrop"
+    },
+    {
+      "name": "Alejandro Fimbres",
+      "url": "https://github.com/lexfm"
+    },
+    {
+      "name": "Rafael Campos",
+      "url": "https://github.com/rafbcampos"
     }
-  ]
+  ],
+  "bundle": "./dist/reference-assets-plugin.prod.js"
 }

package/src/assets/action/transform.ts

@@ -6,6 +6,9 @@ import type {
 import { compose, composeBefore } from '@player-ui/asset-transform-plugin';
 import type { ActionAsset, TransformedAction } from './types';
 
+/**
+ * Function to find prev button
+ */
 export function isBackAction(action: ActionAsset): boolean {
   return action.value === 'Prev';
 }
@@ -32,6 +35,28 @@ const transform: TransformFunction<ActionAsset, TransformedAction> = (
   };
 };
 
+/**
+ * De couples back button from the back icon
+ */
+const backIconTransform: TransformFunction<ActionAsset, ActionAsset> = (
+  action
+) => {
+  /** For previous versions of player, the back button would already have the back icon.
+   *  This ensures that the old functionality does not break and back button is still visible when they update the player.
+   */
+  if (isBackAction(action) && action?.metaData?.role === undefined) {
+    return {
+      ...action,
+      metaData: {
+        ...action?.metaData,
+        role: 'back',
+      },
+    };
+  }
+
+  return action;
+};
+
 /**
  * Appends `exp` to the plugins.stringResolver.propertiesToSkip array or creates it if it doesn't exist
  *
@@ -61,5 +86,6 @@ export const expPropTransform: BeforeTransformFunction<Asset> = (asset) => {
 
 export const actionTransform = compose(
   transform,
+  backIconTransform,
   composeBefore(expPropTransform)
 );

package/src/assets/action/types.ts

@@ -27,6 +27,9 @@ export interface ActionAsset<AnyTextAsset extends Asset = Asset>
 
     /** Force transition to the next view without checking for validation */
     skipValidation?: boolean;
+
+    /** string value to decide for the left anchor sign */
+    role?: string;
   };
 }
 

package/src/assets/image/index.ts

@@ -0,0 +1,2 @@
+export * from './transform';
+export * from './types';

package/src/assets/image/transform.ts

@@ -0,0 +1,32 @@
+import type { TransformFunction } from '@player-ui/player';
+import type { ImageAsset, TransformedImage } from './types';
+
+/**
+ * Function to retrieve the desired alt text based on passed in props.
+ * @param props Image props
+ * @returns The alt text for the image asset
+ */
+const getImageAlt = (props: ImageAsset): string => {
+  const { metaData, placeholder } = props;
+  if (metaData.accessibility) return metaData.accessibility;
+
+  if (placeholder) return placeholder;
+
+  return 'Image';
+};
+
+/**
+ * Sets the Image's placeholder and accessibilty
+ */
+export const imageTransform: TransformFunction<ImageAsset, TransformedImage> = (
+  props
+) => {
+  const altText = getImageAlt(props);
+
+  const newImage = {
+    ...props,
+    altText,
+  };
+
+  return newImage;
+};

package/src/assets/image/types.ts

@@ -0,0 +1,26 @@
+import type { Asset } from '@player-ui/player';
+
+export interface ImageAsset extends Asset<'image'> {
+  /** Reference to the image */
+  metaData: ImageMetaData;
+
+  /** Optional placeholder text */
+  placeholder?: string;
+
+  /** Optional caption */
+  caption?: Asset;
+}
+
+/** A modifier to turn the text into a link */
+export interface ImageMetaData {
+  /** The location of the image to load */
+  ref: string;
+
+  /** Used for accessibility support */
+  accessibility?: string;
+}
+
+export interface TransformedImage extends ImageAsset {
+  /** Alt text */
+  altText: string;
+}

package/src/assets/index.ts

@@ -3,3 +3,4 @@ export * from './action';
 export * from './collection';
 export * from './info';
 export * from './text';
+export * from './image';

package/src/assets/info/index.ts

@@ -1 +1,2 @@
+export * from './transform';
 export * from './types';

package/src/assets/info/transform.ts

@@ -0,0 +1,38 @@
+import type { TransformFunction } from '@player-ui/player';
+import type { AssetWrapper } from '@player-ui/player';
+import type { InfoAsset, InfoAssetTransform } from './types';
+import type { ActionAsset } from '../action/types';
+import { isBackAction } from '../action/transform';
+
+/**
+ * This transform should add segmentedActions to the info asset.
+ * Segmented actions display side by side in larger viewports. Segmented Actions is an object of next and prev actions
+ */
+export const infoTransform: TransformFunction<InfoAsset, InfoAssetTransform> = (
+  infoAsset
+) => {
+  const actions = infoAsset?.actions;
+  const segmentedActions = actions?.reduce(
+    (segmentedActionsArray, action) => {
+      segmentedActionsArray[
+        isBackAction(action.asset as ActionAsset) ? 'prev' : 'next'
+      ].push(action as AssetWrapper<ActionAsset>);
+      return segmentedActionsArray;
+    },
+    { next: [], prev: [] } as {
+      /**
+       * next is an array of next actions
+       */
+      next: Array<AssetWrapper<ActionAsset>>;
+      /**
+       * prev is an array of prev actions
+       */
+      prev: Array<AssetWrapper<ActionAsset>>;
+    }
+  );
+
+  return {
+    ...infoAsset,
+    segmentedActions,
+  };
+};

package/src/assets/info/types.ts

@@ -1,4 +1,5 @@
 import type { AssetWrapper, Asset } from '@player-ui/player';
+import type { ActionAsset } from '../action/types';
 
 export interface InfoAsset extends Asset<'info'> {
   /** The string value to show */
@@ -13,3 +14,19 @@ export interface InfoAsset extends Asset<'info'> {
   /** List of actions to show at the bottom of the page */
   actions?: Array<AssetWrapper>;
 }
+
+export interface InfoAssetTransform extends InfoAsset {
+  /**
+   * This is an array of next and prev actions
+   */
+  segmentedActions?: {
+    /**
+     * Array of next actions
+     */
+    next: Array<AssetWrapper<ActionAsset>>;
+    /**
+     * Array of prev actions
+     */
+    prev: Array<AssetWrapper<ActionAsset>>;
+  };
+}

package/src/plugin.ts

@@ -1,6 +1,11 @@
 import type { Player, PlayerPlugin } from '@player-ui/player';
 import { AssetTransformPlugin } from '@player-ui/asset-transform-plugin';
-import { inputTransform, actionTransform } from './assets';
+import {
+  inputTransform,
+  actionTransform,
+  imageTransform,
+  infoTransform,
+} from './assets';
 
 /**
  * A plugin to add transforms for the reference assets
@@ -13,6 +18,8 @@ export class ReferenceAssetsPlugin implements PlayerPlugin {
       new AssetTransformPlugin([
         [{ type: 'action' }, actionTransform],
         [{ type: 'input' }, inputTransform],
+        [{ type: 'image' }, imageTransform],
+        [{ type: 'info' }, infoTransform],
       ])
     );
   }