@pega/dx-component-builder-sdk 8.23.16 → 8.23.18

package/tests/assets/components/SDK-React/createAll/custom-sdk/widget/Pega_DXIL_MyPageCaseWidget/demo.stories.jsx

@@ -0,0 +1,52 @@
+import { withKnobs } from '@storybook/addon-knobs';
+
+import { caseOpConfig, operatorDetails } from './mock.stories';
+
+import PegaDxilMyPageCaseWidget from './index.tsx';
+
+export default {
+  title: 'PegaDxilMyPageCaseWidget',
+  decorators: [withKnobs],
+  component: PegaDxilMyPageCaseWidget
+};
+
+if (!window.PCore) {
+  window.PCore = {};
+}
+
+window.PCore.getUserApi = () => {
+  return {
+    getOperatorDetails: () => {
+      return new Promise(resolve => {
+        resolve(operatorDetails);
+      });
+    }
+  };
+};
+
+export const BasePegaDxilMyPageCaseWidget = () => {
+
+  const props = {
+    ...caseOpConfig,
+    getPConnect: () => {
+      return {
+        getActionsApi: () => {
+          return {
+            updateFieldValue: () => {/* nothing */},
+            triggerFieldChange: () => {/* nothing */}
+          };
+        },
+        ignoreSuggestion: () => {/* nothing */},
+        acceptSuggestion: () => {/* nothing */},
+        setInheritedProps: () => {/* nothing */},
+        resolveConfigProps: () => {/* nothing */}
+      };
+    }
+  };
+
+  return (
+    <>
+      <PegaDxilMyPageCaseWidget {...props} />
+    </>
+  );
+};

package/tests/assets/components/SDK-React/createAll/custom-sdk/widget/Pega_DXIL_MyPageCaseWidget/index.tsx

@@ -0,0 +1,320 @@
+import React, {useState} from "react";
+import TextField from '@material-ui/core/TextField';
+import Popover from '@material-ui/core/Popover';
+import Grid from '@material-ui/core/Grid';
+import Typography from '@material-ui/core/Typography';
+
+import { makeStyles } from '@material-ui/core/styles';
+
+import Utils from '@pega/react-sdk-components/lib/components/helpers/utils';
+import StyledPegaDxilMyPageCaseWidgetWrapper from './styles';
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
+
+interface PegaDxilMyPageCaseWidgetProps extends PConnProps {
+  // If any, enter additional props that only exist on this componentName
+  // eslint-disable-next-line react/no-unused-prop-types
+  label: string,
+  createDateTime: string,
+  createLabel: string,
+  createOperator: { userName: string, userId: string },
+  updateDateTime: string,
+  updateLabel: string,
+  updateOperator: { userName: string, userId: string }
+}
+
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    padding: theme.spacing(1),
+    margin: theme.spacing(1),
+  },
+  popover: {
+    padding: theme.spacing(1),
+    margin: theme.spacing(1),
+  }
+}));
+
+// Duplicated runtime code from React SDK
+
+// Page Case Widget example
+
+// props passed in combination of props from property panel (config.json) and run time props from Constellation
+// any default values in config.pros should be set in defaultProps at bottom of this file
+export default function PegaDxilMyPageCaseWidget(props: PegaDxilMyPageCaseWidgetProps) {
+  // const componentName = "Operator";
+  const classes = useStyles();
+
+  // const versionAr = pCoreVersion.split(".");
+  // let fieldLabel;
+  let caseOpLabel = "---";
+  let caseOpName = "---";
+  let caseOpId = "";
+  let caseTime = "";
+
+  let updateOpLabel = "---";
+  let updateOpName = "---";
+  let updateOpId = "";
+  let updateTime = "";
+
+  // fieldLabel = props.fieldLabel;
+  caseOpLabel = props.createLabel;
+  caseOpName = props.createOperator.userName;
+  caseTime = props.createDateTime;
+  caseOpId = props.createOperator.userId;
+
+  updateOpLabel = props.updateLabel;
+  updateOpName = props.updateOperator.userName;
+  updateTime = props.updateDateTime;
+  updateOpId = props.updateOperator.userId;
+
+
+
+
+  // Popover-related
+  const [popoverAnchorEl, setPopoverAnchorEl] = useState(null);
+  const [popoverFields, setPopoverFields] = useState<Array<any>>([]);
+
+  const popoverOpen = Boolean(popoverAnchorEl);
+  const popoverId = popoverOpen ? 'operator-details-popover' : undefined;
+
+  const handlePopoverClose = (() => {
+    setPopoverAnchorEl(null);
+  })
+
+  function showOperatorDetails(event) {
+
+    const operatorPreviewPromise = PCore.getUserApi().getOperatorDetails(caseOpId);
+    const localizedVal = PCore.getLocaleUtils().getLocaleValue;
+    const localeCategory = 'Operator';
+
+    operatorPreviewPromise.then((res) => {
+      const fillerString = "---";
+      let fields: any = [];
+      if (
+        res.data &&
+        res.data.pyOperatorInfo &&
+        res.data.pyOperatorInfo.pyUserName
+      ) {
+        fields = [
+          {
+            id: "pyPosition",
+            name: localizedVal("Position", localeCategory),
+            value: res.data.pyOperatorInfo.pyPosition ? res.data.pyOperatorInfo.pyPosition : fillerString
+          },
+          {
+            id: "pyOrganization",
+            name: localizedVal("Organization", localeCategory),
+            value: res.data.pyOperatorInfo.pyOrganization ? res.data.pyOperatorInfo.pyOrganization : fillerString
+          },
+          {
+            id: "ReportToUserName",
+            name: localizedVal('Reports to', localeCategory),
+            value: res.data.pyOperatorInfo.pyReportToUserName ? res.data.pyOperatorInfo.pyReportToUserName : fillerString
+          },
+          {
+            id: "pyTelephone",
+            name: localizedVal('Telephone', localeCategory),
+            value: res.data.pyOperatorInfo.pyTelephone ? <a href={`tel:${res.data.pyOperatorInfo.pyTelephone}`}>{res.data.pyOperatorInfo.pyTelephone}</a> : fillerString
+          },
+          {
+            id: "pyEmailAddress",
+            name: localizedVal('Email address', localeCategory),
+            value: res.data.pyOperatorInfo.pyEmailAddress ? <a href={`mailto:${res.data.pyOperatorInfo.pyEmailAddress}`}>{res.data.pyOperatorInfo.pyEmailAddress}</a> : fillerString
+          }
+        ];
+      } else {
+        // eslint-disable-next-line no-console
+        console.log(`Operator: PCore.getUserApi().getOperatorDetails(${caseOpId}); returned empty res.data.pyOperatorInfo.pyUserName - adding default`);
+        fields = [
+          {
+            id: "pyPosition",
+            name: localizedVal("Position", localeCategory),
+            value: fillerString
+          },
+          {
+            id: "pyOrganization",
+            name: localizedVal("Organization", localeCategory),
+            value: fillerString
+          },
+          {
+            id: "ReportToUserName",
+            name: localizedVal('Reports to', localeCategory),
+            value: fillerString
+          },
+          {
+            id: "pyTelephone",
+            name: localizedVal('Telephone', localeCategory),
+            value: fillerString
+          },
+          {
+            id: "pyEmailAddress",
+            name: localizedVal('Email address', localeCategory),
+            value: fillerString
+          }
+        ];
+      }
+      // Whatever the fields are, update the component's popoverFields
+      setPopoverFields(fields);
+    });
+
+    setPopoverAnchorEl(event.currentTarget);
+  }
+
+  function showUpdateOperatorDetails(event) {
+
+    const operatorPreviewPromise = PCore.getUserApi().getOperatorDetails(updateOpId);
+    const localizedVal = PCore.getLocaleUtils().getLocaleValue;
+    const localeCategory = 'Operator';
+
+    operatorPreviewPromise.then((res) => {
+      const fillerString = "---";
+      let fields: any = [];
+      if (
+        res.data &&
+        res.data.pyOperatorInfo &&
+        res.data.pyOperatorInfo.pyUserName
+      ) {
+        fields = [
+          {
+            id: "pyPosition",
+            name: localizedVal("Position", localeCategory),
+            value: res.data.pyOperatorInfo.pyPosition ? res.data.pyOperatorInfo.pyPosition : fillerString
+          },
+          {
+            id: "pyOrganization",
+            name: localizedVal("Organization", localeCategory),
+            value: res.data.pyOperatorInfo.pyOrganization ? res.data.pyOperatorInfo.pyOrganization : fillerString
+          },
+          {
+            id: "ReportToUserName",
+            name: localizedVal('Reports to', localeCategory),
+            value: res.data.pyOperatorInfo.pyReportToUserName ? res.data.pyOperatorInfo.pyReportToUserName : fillerString
+          },
+          {
+            id: "pyTelephone",
+            name: localizedVal('Telephone', localeCategory),
+            value: res.data.pyOperatorInfo.pyTelephone ? <a href={`tel:${res.data.pyOperatorInfo.pyTelephone}`}>{res.data.pyOperatorInfo.pyTelephone}</a> : fillerString
+          },
+          {
+            id: "pyEmailAddress",
+            name: localizedVal('Email address', localeCategory),
+            value: res.data.pyOperatorInfo.pyEmailAddress ? <a href={`mailto:${res.data.pyOperatorInfo.pyEmailAddress}`}>{res.data.pyOperatorInfo.pyEmailAddress}</a> : fillerString
+          }
+        ];
+      } else {
+        // eslint-disable-next-line no-console
+        console.log(`Operator: PCore.getUserApi().getOperatorDetails(${caseOpId}); returned empty res.data.pyOperatorInfo.pyUserName - adding default`);
+        fields = [
+          {
+            id: "pyPosition",
+            name: localizedVal("Position", localeCategory),
+            value: fillerString
+          },
+          {
+            id: "pyOrganization",
+            name: localizedVal("Organization", localeCategory),
+            value: fillerString
+          },
+          {
+            id: "ReportToUserName",
+            name: localizedVal('Reports to', localeCategory),
+            value: fillerString
+          },
+          {
+            id: "pyTelephone",
+            name: localizedVal('Telephone', localeCategory),
+            value: fillerString
+          },
+          {
+            id: "pyEmailAddress",
+            name: localizedVal('Email address', localeCategory),
+            value: fillerString
+          }
+        ];
+      }
+      // Whatever the fields are, update the component's popoverFields
+      setPopoverFields(fields);
+    });
+
+    setPopoverAnchorEl(event.currentTarget);
+  }
+
+  function getPopoverGrid() {
+    // return popoverFields.map((field) => {
+    //   return <div className={classes.popover}>{field.name}: {field.value}</div>
+    // })
+
+    if (popoverFields.length === 0) {
+      return;
+    }
+
+    // There are fields, so build the grid.
+    return <Grid container className={classes.popover} spacing={1}>
+      <Grid item xs={12}><Typography variant="h6">{caseOpName}</Typography></Grid>
+      {popoverFields.map((field) => {
+        return <React.Fragment key={field.id}>
+          <Grid container item xs={12} spacing={1}>
+            <Grid item xs={6}><Typography variant="caption">{field.name}</Typography></Grid>
+            <Grid item xs={6}><Typography variant="subtitle2">{field.value}</Typography></Grid>
+          </Grid>
+        </React.Fragment>
+      })}
+    </Grid>
+
+  }
+
+  // End of popover-related
+
+
+  return <StyledPegaDxilMyPageCaseWidgetWrapper><React.Fragment>
+    <Grid container spacing={2}>
+      <Grid item>
+      <TextField
+        defaultValue={caseOpName}
+        label={caseOpLabel}
+        onClick={showOperatorDetails}
+
+        InputProps={{
+          readOnly: true,
+          disableUnderline: true,
+          inputProps: {style: {cursor: 'pointer'}}
+        }}
+
+      />
+      <br />
+      {Utils.generateDateTime(caseTime, "DateTime-Since")}
+     </Grid>
+     <Grid item>
+      <TextField
+        defaultValue={updateOpName}
+        label={updateOpLabel}
+        onClick={showUpdateOperatorDetails}
+
+        InputProps={{
+          readOnly: true,
+          disableUnderline: true,
+          inputProps: {style: {cursor: 'pointer'}}
+        }}
+
+      />
+      <br />
+      {Utils.generateDateTime(updateTime, "DateTime-Since")}
+     </Grid>
+    </Grid>
+
+      <Popover
+        id={popoverId}
+        open={popoverOpen}
+        anchorEl={popoverAnchorEl}
+        onClose={handlePopoverClose}
+        anchorOrigin={{ vertical: 'bottom', horizontal: 'center'}}
+        transformOrigin={{ vertical: 'top', horizontal: 'center'}}
+        PaperProps={{ style: {maxWidth: '45ch'}}}
+      >
+        {getPopoverGrid()}
+      </Popover>
+    </React.Fragment>
+	</StyledPegaDxilMyPageCaseWidgetWrapper>;
+
+}

package/tests/assets/components/SDK-React/createAll/custom-sdk/widget/Pega_DXIL_MyPageCaseWidget/mock.stories.js

@@ -0,0 +1,52 @@
+
+export const caseOpConfig = {
+  label: 'Create operator',
+  createLabel: 'Created',
+  updateLabel: 'Updated',
+  updateDateTime: '2023-01-16T14:53:33.280Z',
+  createDateTime: '2023-01-16T14:53:33.198Z',
+  updateOperator: {
+    userId: 'admin@mediaco',
+    userName: 'admin'
+  },
+  createOperator: {
+    userId: 'admin@mediaco',
+    userName: 'admin'
+  },
+  hideLabel: true,
+  key: '_532zx1dah',
+  displayMode: 'LABELS_LEFT'
+};
+
+export const operatorDetails = {
+  data: {
+    pzLoadTime: 'January 18, 2023 10:33:19 AM EST',
+    pzPageNameHash: '_pa1519192551088960pz',
+    pyOperatorInfo: {
+      pyUserName: 'french DigV2',
+      pyPosition: '',
+      pyImageInsKey: '',
+      pySkills: [
+        {
+          pySkillName: '',
+          pzIndexOwnerKey: 'DATA-ADMIN-OPERATOR-ID FRENCHTEST.DIGV2',
+          pySkillRating: 0
+        }
+      ],
+      pyReportToUserName: '',
+      pyReportTo: '',
+      pyOrganization: 'DXIL',
+      pyTitle: '',
+      pyLabel: 'frenchTest.DigV2',
+      pyEmailAddress: 'User@DigV2',
+      pyTelephone: ''
+    }
+  },
+  status: 200,
+  statusText: '',
+  headers: {
+    'content-length': '435',
+    'content-type': 'application/json;charset=UTF-8'
+  },
+  request: {}
+};

package/tests/assets/components/SDK-React/createAll/custom-sdk/widget/Pega_DXIL_MyPageCaseWidget/styles.js

@@ -0,0 +1,7 @@
+import styled, { css } from 'styled-components';
+
+export default styled.div(() => {
+  return css`
+    margin: 0px 0;
+  `;
+});

package/tests/assets/components/SDK-React/createAll/custom-sdk/widget/Pega_DXIL_MyPageWidget/OneColumnPage.svg

@@ -0,0 +1,36 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="100px" height="70px" viewBox="0 0 100 70" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>1 col </title>
+    <defs>
+        <rect id="path-1" x="0" y="0" width="100" height="70"></rect>
+    </defs>
+    <g id="Concepts" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Templates" transform="translate(-98.000000, -108.000000)">
+            <g id="Change-template" transform="translate(42.000000, 36.000000)">
+                <g id="1-col-" transform="translate(56.000000, 72.000000)">
+                    <mask id="mask-2" fill="white">
+                        <use xlink:href="#path-1"></use>
+                    </mask>
+                    <rect stroke="#A5A8BC" stroke-width="0.5" x="0.25" y="0.25" width="99.5" height="69.5"></rect>
+                    <g id="white" mask="url(#mask-2)" fill="#FFFFFF">
+                        <g transform="translate(3.000000, 3.000000)" id="Rectangle">
+                            <rect x="0" y="0" width="94" height="66.5"></rect>
+                        </g>
+                    </g>
+                    <g id="gray" mask="url(#mask-2)" fill="#8084A7">
+                        <g transform="translate(6.000000, 6.000000)" id="Rectangle">
+                            <rect x="0" y="-2.84217094e-14" width="88" height="77.8"></rect>
+                        </g>
+                    </g>
+                    <g id="labels" mask="url(#mask-2)" font-family="OpenSans-Semibold, Open Sans" font-size="11" font-weight="500">
+                        <g transform="translate(44.000000, 17.000000)" id="A">
+                            <text>
+                                <tspan x="0.75" y="12" fill="#FFFFFF">A</tspan>
+                            </text>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/tests/assets/components/SDK-React/createAll/custom-sdk/widget/Pega_DXIL_MyPageWidget/config.json

@@ -0,0 +1,59 @@
+{
+  "name": "Pega_DXIL_MyPageWidget",
+  "label": "My Page Widget",
+  "description": "My Page Widget",
+  "organization": "Pega",
+  "version": "0.0.1",
+  "library": "DXIL",
+  "allowedApplications": [],
+  "componentKey": "Pega_DXIL_MyPageWidget",
+  "type": "Widget",
+  "subtype": "PAGE",
+  "icon": "OneColumnPage.svg",
+  "properties": [
+      {
+        "name": "description",
+        "label": "Description",
+        "format": "TEXT",
+        "defaultValue": "We've launched a brand new experience to accelerate your workflow. Check out the guides to help you get the most of Cosmos."
+      },
+      {
+        "name": "whatsnewlink",
+        "label": "What's new link",
+        "format": "TEXT",
+        "defaultValue": "https://design.pega.com"
+      },
+      {
+        "name": "image",
+        "label": "Image link",
+        "format": "TEXT",
+        "defaultValue": "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzOSAxMSI+PHRpdGxlPlBlZ2EgdGV4dC1vbmx5IGxvZ288L3RpdGxlPjxwYXRoIHN0eWxlPSJmaWxsLW9wYWNpdHk6IC4yNTsiIGZpbGw9IiNmZmYiIGQ9Ik03LjcyIDMuODJjMCAyLjI1LTEuNzggMy40MS00IDMuNDFoLTEuNnYzSDBWLjQyaDMuOTRjMi4zNiAwIDMuNzggMS4zOSAzLjc4IDMuNHptLTQtMS40N2gtMS42djNoMS43QTEuNDcgMS40NyAwIDAgMCA1LjUgMy44MmMwLS45MS0uNjUtMS40Ny0xLjc1LTEuNDd6bTcuNjggNS45MWg1LjN2Mkg5LjI5Vi40Mmg3LjM4djEuOTNoLTUuMjR2Mmg0LjI0djEuOWgtNC4yNHpNMjMuMTggMGE1IDUgMCAwIDEgMy41NyAxLjI4TDI1LjYzIDIuOGEzLjc4IDMuNzggMCAwIDAtMS4wNS0uNjNBNC4zMiA0LjMyIDAgMCAwIDIzLjMxIDIgMy4xNyAzLjE3IDAgMCAwIDIwIDUuMjdhMy4xNiAzLjE2IDAgMCAwIDEgMi4zOSAzLjA3IDMuMDcgMCAwIDAgMi4xNy44NCA0LjYgNC42IDAgMCAwIDIuMDktLjVWNi4xOWgtMi4yVjQuMzhoNC4yNXY0LjU2YTUuNDEgNS40MSAwIDAgMS00LjA4IDEuNTdBNS4zNSA1LjM1IDAgMCAxIDE5LjQzIDlhNS4wNSA1LjA1IDAgMCAxLTEuNTYtMy43NCA1LjIxIDUuMjEgMCAwIDEgMS41Ni0zLjc2QTUuMzEgNS4zMSAwIDAgMSAyMy4xOCAwem0xMS4yOS40Mmw0LjEzIDkuNzloLTIuMjVMMzUuNDggOGgtNC4wNmwtLjkgMi4xOGgtMi4yTDMyLjUxLjQyem0uMjUgNS43MkwzMy40NCAzbC0xLjI5IDMuMTR6bTMtNWEuNzEuNzEgMCAwIDEtLjc0Ljc1LjcxLjcxIDAgMCAxLS43My0uNzUuNzMuNzMgMCAwIDEgLjc1LS43Mi43Mi43MiAwIDAgMSAuNzUuNzF6TTM3IC41M2EuNTkuNTkgMCAwIDAtLjYuNi42MS42MSAwIDEgMCAxLjIxIDAgLjYuNiAwIDAgMC0uNjEtLjZ6bS0uMjQgMVYuNzFIMzdjLjEyIDAgLjE4LjA2LjI1LjA2YS4yMS4yMSAwIDAgMSAuMDcuMTguMTkuMTkgMCAwIDEtLjA3LjE4cy0uMDcuMDgtLjEzLjA4bC4yNi4zNmgtLjJMMzcgMS4yOGgtLjF2LjI5em0uMTMtLjQ0aC4yM2EuMjYuMjYgMCAwIDAgLjA3LS4wOWgtLjA2Yy0uMDUtLjE3LS4wNS0uMTctLjEzLS4xN2gtLjF6Ii8+PC9zdmc+"
+      },
+      {
+        "name": "datasource",
+        "label": "Data source for details",
+        "defaultValue": "@DATASOURCE D_pyAnnouncements.pxResults",
+        "format": "DATASOURCE",
+        "required": true,
+        "properties": [
+          {
+            "name": "name",
+            "label": "Label",
+            "defaultValue": "@P .pyLabel"
+          }
+        ]
+      },
+      {
+        "label": "Conditions",
+        "format": "GROUP",
+        "properties": [
+          {
+            "name": "visibility",
+            "label": "Visibility",
+            "format": "VISIBILITY"
+          }
+        ]
+      }
+  ],
+  "defaultConfig": {}
+}

package/tests/assets/components/SDK-React/createAll/custom-sdk/widget/Pega_DXIL_MyPageWidget/demo.stories.jsx

@@ -0,0 +1,29 @@
+import { withKnobs } from '@storybook/addon-knobs';
+
+import PegaDxilMyPageWidget from './index.tsx';
+
+import { configProps } from './mock.stories';
+
+export default {
+  title: 'PegaDxilMyPageWidget',
+  decorators: [withKnobs],
+  component: PegaDxilMyPageWidget
+};
+
+export const BasePegaDxilMyPageWidget = () => {
+  
+  const props = {
+    label: configProps.label,
+    header: configProps.header,
+    description: configProps.description,
+    image: configProps.image,
+    datasource: configProps.datasource,
+    whatsnewlink: configProps.whatsnewlink
+  };
+
+  return (
+    <>
+      <PegaDxilMyPageWidget {...props} />
+    </>
+  );
+};

package/tests/assets/components/SDK-React/createAll/custom-sdk/widget/Pega_DXIL_MyPageWidget/index.tsx

@@ -0,0 +1,70 @@
+
+import React from "react";
+import { Card, CardContent, CardHeader, Typography, CardActions, Button } from "@material-ui/core";
+import { makeStyles } from '@material-ui/core/styles';
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
+import StyledPegaDxilMyPageWidgetWrapper from './styles';
+
+
+interface PegaDxilMyPageWidgetProps extends PConnProps {
+  // If any, enter additional props that only exist on this component 
+  header?: string,
+  description?: string,
+  datasource?: any,
+  whatsnewlink?: string 
+}
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    marginTop: theme.spacing(1),
+    marginBottom: theme.spacing(1),
+    borderLeft: "6px solid",
+    borderLeftColor: theme.palette.primary.light
+  },
+}));
+
+// Duplicated runtime code from React SDK
+
+// Page Widget example is the "App Announcment"
+
+// props passed in combination of props from property panel (config.json) and run time props from Constellation
+// any default values in config.pros should be set in defaultProps at bottom of this file
+export default function PegaDxilMyPageWidget(props: PegaDxilMyPageWidgetProps) {
+  const { header, description, datasource, whatsnewlink } = props;
+  let details = [];
+  if (datasource && datasource.source) {
+    details = datasource.source.map((item) => {
+      return item.name;
+    });
+  }
+
+  const classes = useStyles();
+
+  const handleClick = () => {
+    window.open(whatsnewlink);
+  }
+
+  return (
+    <StyledPegaDxilMyPageWidgetWrapper>
+    <Card title="AppAnnouncement" className={classes.root}>
+      <CardHeader title={<Typography variant="h6">{header}</Typography>} />
+      <CardContent>
+        <Typography variant="body1" gutterBottom>{description}</Typography>
+        {
+          details.map((itm, idx) => {
+            const theKey = `AppAnn-item-${idx}`;
+            return (
+              <Typography key={theKey} variant="body2">- {itm}</Typography>
+            )
+          })
+        }
+      </CardContent>
+      <CardActions>
+        <Button color="primary" onClick={handleClick} size="small">See what&apos;s new</Button>
+      </CardActions>
+    </Card>
+    </StyledPegaDxilMyPageWidgetWrapper>
+  );
+
+}

package/tests/assets/components/SDK-React/createAll/custom-sdk/widget/Pega_DXIL_MyPageWidget/mock.stories.js

@@ -0,0 +1,23 @@
+// eslint-disable-next-line import/prefer-default-export
+export const configProps = {
+  label: 'App announcement',
+  header: 'Announcements',
+  description: 'Welcome to MediaCo Application for testing SDK frameworks.',
+  whatsnewlink: 'https://design.pega.com',
+  image:
+    'data:image/svg xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzOSAxMSI PHRpdGxlPlBlZ2EgdGV4dC1vbmx5IGxvZ288L3RpdGxlPjxwYXRoIHN0eWxlPSJmaWxsLW9wYWNpdHk6IC4yNTsiIGZpbGw9IiNmZmYiIGQ9Ik03LjcyIDMuODJjMCAyLjI1LTEuNzggMy40MS00IDMuNDFoLTEuNnYzSDBWLjQyaDMuOTRjMi4zNiAwIDMuNzggMS4zOSAzLjc4IDMuNHptLTQtMS40N2gtMS42djNoMS43QTEuNDcgMS40NyAwIDAgMCA1LjUgMy44MmMwLS45MS0uNjUtMS40Ny0xLjc1LTEuNDd6bTcuNjggNS45MWg1LjN2Mkg5LjI5Vi40Mmg3LjM4djEuOTNoLTUuMjR2Mmg0LjI0djEuOWgtNC4yNHpNMjMuMTggMGE1IDUgMCAwIDEgMy41NyAxLjI4TDI1LjYzIDIuOGEzLjc4IDMuNzggMCAwIDAtMS4wNS0uNjNBNC4zMiA0LjMyIDAgMCAwIDIzLjMxIDIgMy4xNyAzLjE3IDAgMCAwIDIwIDUuMjdhMy4xNiAzLjE2IDAgMCAwIDEgMi4zOSAzLjA3IDMuMDcgMCAwIDAgMi4xNy44NCA0LjYgNC42IDAgMCAwIDIuMDktLjVWNi4xOWgtMi4yVjQuMzhoNC4yNXY0LjU2YTUuNDEgNS40MSAwIDAgMS00LjA4IDEuNTdBNS4zNSA1LjM1IDAgMCAxIDE5LjQzIDlhNS4wNSA1LjA1IDAgMCAxLTEuNTYtMy43NCA1LjIxIDUuMjEgMCAwIDEgMS41Ni0zLjc2QTUuMzEgNS4zMSAwIDAgMSAyMy4xOCAwem0xMS4yOS40Mmw0LjEzIDkuNzloLTIuMjVMMzUuNDggOGgtNC4wNmwtLjkgMi4xOGgtMi4yTDMyLjUxLjQyem0uMjUgNS43MkwzMy40NCAzbC0xLjI5IDMuMTR6bTMtNWEuNzEuNzEgMCAwIDEtLjc0Ljc1LjcxLjcxIDAgMCAxLS43My0uNzUuNzMuNzMgMCAwIDEgLjc1LS43Mi43Mi43MiAwIDAgMSAuNzUuNzF6TTM3IC41M2EuNTkuNTkgMCAwIDAtLjYuNi42MS42MSAwIDEgMCAxLjIxIDAgLjYuNiAwIDAgMC0uNjEtLjZ6bS0uMjQgMVYuNzFIMzdjLjEyIDAgLjE4LjA2LjI1LjA2YS4yMS4yMSAwIDAgMSAuMDcuMTguMTkuMTkgMCAwIDEtLjA3LjE4cy0uMDcuMDgtLjEzLjA4bC4yNi4zNmgtLjJMMzcgMS4yOGgtLjF2LjI5em0uMTMtLjQ0aC4yM2EuMjYuMjYgMCAwIDAgLjA3LS4wOWgtLjA2Yy0uMDUtLjE3LS4wNS0uMTctLjEzLS4xN2gtLjF6Ii8 PC9zdmc ',
+  datasource: {
+    source: [
+      {
+        name: 'New React based UI rendering'
+      },
+      {
+        name: 'Support for followers and recents'
+      },
+      {
+        name: 'New authoring experience'
+      }
+    ],
+    fields: {}
+  }
+};

package/tests/assets/components/SDK-React/createAll/custom-sdk/widget/Pega_DXIL_MyPageWidget/styles.js

@@ -0,0 +1,7 @@
+import styled, { css } from 'styled-components';
+
+export default styled.div(() => {
+  return css`
+    margin: 0px 0;
+  `;
+});

package/tests/assets/components/SDK-React/createAll/custom-sdk/widget/_widget.md

@@ -0,0 +1,6 @@
+# The **custom-sdk/widget** directory
+
+The **src/components/custom-sdk/widget** directory contains the code for the custom **widget** components you want to create and use with the **React SDK**.
+
+When you run the **npm run  create** command to create new _widget_ components, the generated code that you can use as a starting point for your component
+development will be placed in component-specific folders in **src/components/custom-sdk/widget**.

package/tests/assets/components/SDK-React/createAll/override-sdk/_override-sdk.md

@@ -0,0 +1,5 @@
+# The **components/override-sdk** directory
+
+The **src/components/override-sdk** directory contains the code for components for which you want to override the default implementation for use with the **React SDK**.
+
+When you run the **npm run  override** command to override the default implementation of a component, the generated code that you can use as a starting point for your component development will be placed in type-specific and component-specific folders in **src/components/override-sdk**.