@pega/dx-component-builder-sdk 0.1.0

package/src/tasks/create/templates/Constellation/Template/DETAILS-region/index.jsx.mustache

@@ -0,0 +1,88 @@
+import { Fragment } from 'react';
+import { Grid, Flex, FieldGroup } from '@pega/cosmos-react-core';
+import PropTypes from 'prop-types';
+
+import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
+
+// includes in bundle
+import { getAllFields } from './utils';
+
+// Duplicated runtime code from Constellation Design System Component
+
+// 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 {{COMPONENT_CLASS_NAME}}(props) {
+
+  const { getPConnect, children, label, showLabel, showHighlightedData  } = props;
+  const propsToUse = { label, showLabel, ...getPConnect().getInheritedProps() };
+
+  const numRegions = getAllFields(getPConnect)?.length;
+  const gridRepeat = 'repeat(' + numRegions + ', 1fr)';
+  let gridContainer = {};
+  gridContainer.cols = gridRepeat;
+  gridContainer.alignItems = 'start';
+  gridContainer.colGap = 1;
+
+  let gridHighlightContainer = {};
+  gridHighlightContainer.cols = gridRepeat;
+  gridHighlightContainer.alignItems = 'start';
+  gridHighlightContainer.gap = 2;
+  gridHighlightContainer.pad = [0, 0, 2, 0];
+
+  // Set up highlighted data to pass in return if is set to show, need raw metadata to pass to createComponent
+  let highlightedDataArr = [];
+  if (showHighlightedData) {
+    const { highlightedData = [] } = getPConnect().getRawMetadata().config;
+    highlightedDataArr = highlightedData.map((field) => {
+      field.config.displayMode = 'STACKED_LARGE_VAL';
+
+      // Mark as status display when using pyStatusWork
+      if (field.config.value === '@P .pyStatusWork') {
+        field.type = 'TextInput';
+        field.config.displayAsStatus = true;
+      }
+
+      return getPConnect().createComponent(field);
+    });
+  }
+
+  return (
+    <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
+    {{! pick new delimiteres for mustache }}
+    {{=<% %>=}}
+    <FieldGroup name={propsToUse.showLabel ? propsToUse.label : ''}>
+      {showHighlightedData && highlightedDataArr.length > 0 && (
+        <Grid container={gridHighlightContainer}
+          data-testid={`highlighted-column-count-${numRegions}`}>
+          {highlightedDataArr.map((child, i) => (
+            <Fragment key={`hf-${i + 1}`}>{child}</Fragment>
+          ))}
+        </Grid>
+      )}
+      <Grid container={gridContainer} data-testid={`column-count-${numRegions}`} >
+       {children.map((child, i) => (
+        <Flex container={{ direction: 'column'}} key={`r-${i + 1}`}>
+        {child}
+        </Flex>
+       ))}
+      </Grid>
+    </FieldGroup>
+    <%={{ }}=%>     {{! revert delimiteres for mustache }}
+    </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
+  );
+
+}
+
+{{COMPONENT_CLASS_NAME}}.defaultProps = {
+  label: undefined,
+  showLabel: true,
+  showHighlightedData: false
+};
+
+
+{{COMPONENT_CLASS_NAME}}.propTypes = {
+  showLabel: PropTypes.bool,
+  label: PropTypes.string,
+  getPConnect: PropTypes.func.isRequired,
+  showHighlightedData: PropTypes.bool
+};

package/src/tasks/create/templates/Constellation/Template/DETAILS-region/styles.js.mustache

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

package/src/tasks/create/templates/Constellation/Template/DETAILS-region/utils.js.mustache

@@ -0,0 +1,155 @@
+import { useContext, createContext } from 'react';
+import { connect, Provider, shallowEqual } from 'react-redux';
+import { createUID } from '@pega/cosmos-react-core';
+
+
+
+/**
+ * Given the PConnect object of a Template component, retrieve the children
+ * metadata of all regions.
+ * @param {Function} pConnect PConnect of a Template component.
+ */
+export function getAllFields(pConnect) {
+  const metadata = pConnect().getRawMetadata();
+  if (!metadata.children) {
+    return [];
+  }
+
+  let allFields = [];
+
+  const makeField = (f) => ({
+    ...pConnect().resolveConfigProps(f.config),
+    type: f.type
+  });
+
+  const hasRegions = !!metadata.children[0]?.children;
+  if (hasRegions) {
+    allFields = metadata.children.map((region) =>
+      region.children.map((field) => {
+        // Do not resolve the config props if is status work, instead create component here as status badge and mark as status display
+        if (field.config?.value === '@P .pyStatusWork') {
+          field.type = 'TextInput';
+          field.config.displayAsStatus = true;
+          return pConnect().createComponent(field);
+        }
+
+        return makeField(field);
+      })
+    );
+  } else {
+    allFields = metadata.children.map(makeField);
+  }
+
+  return allFields;
+}
+
+
+
+export function getFilteredFields(getPConnect) {
+  let primaryFieldsRaw;
+  let secondaryFieldsRaw;
+  const metadata = getPConnect().getRawMetadata();
+  const hasRegions = !!metadata.children[0]?.children;
+  if (hasRegions) {
+    primaryFieldsRaw = metadata.children[0].children;
+    secondaryFieldsRaw = metadata.children[1].children;
+  } else {
+    [primaryFieldsRaw, secondaryFieldsRaw] = metadata.children;
+  }
+
+  // Filter out fields that are not visible and unsupported types for primary fields (for CaseSummary)
+  primaryFieldsRaw = primaryFieldsRaw.filter((item) => {
+    const resolvedItem = getPConnect().resolveConfigProps(item.config);
+    return resolvedItem.visibility !== false && item.type !== 'TextContent';
+  });
+
+  secondaryFieldsRaw = secondaryFieldsRaw.filter((item) => {
+    const resolvedItem = getPConnect().resolveConfigProps(item.config);
+    return resolvedItem.visibility !== false && item.type !== 'TextContent';
+  });
+
+  return [primaryFieldsRaw, secondaryFieldsRaw];
+}
+
+/**
+ * Returns ConfigurableLayout mapped content. With pre-populated default layout configs.
+ * @param {object[]} regionData template children item.
+ * @returns {object[]} ConfigurableLayout content.
+ */
+export function getLayoutDataFromRegion(regionData) {
+  const defaultLayoutConfig = {
+    width: 'full',
+    fillAvailable: true,
+    minWidth: [300, 'px']
+  };
+
+  return regionData.props
+    ?.getPConnect()
+    ?.getChildren()
+    ?.map((item, index) => {
+      const itemPConnect = item?.getPConnect();
+
+      return {
+        id: itemPConnect?.getComponentName() ? `${itemPConnect.getComponentName()}--${index}` : `item--${index}`,
+        content: itemPConnect?.getComponent(),
+        layoutConfig: {
+          ...defaultLayoutConfig,
+          ...itemPConnect?.getConfigProps().layoutConfig
+        }
+      };
+    });
+}
+
+/**
+ * Determine if the current view is the view of the case step/assignment.
+ * @param {Function} pConnect PConnect object for the component
+ */
+export function getIsAssignmentView(pConnect) {
+  // Get caseInfo content from the store which contains the view info about the current assignment/step
+  // TODO To be replaced with pConnect.getCaseInfo().getCurrentAssignmentView when it's available
+  const assignmentViewClass = pConnect.getValue(PCore.getConstants().CASE_INFO.CASE_INFO_CLASSID);
+  const assignmentViewName = pConnect.getValue(PCore.getConstants().CASE_INFO.ASSIGNMENTACTION_ID);
+
+  const assignmentViewId = `${assignmentViewName}!${assignmentViewClass}`;
+
+  // Get the info about the current view from pConnect
+  const currentViewId = `${pConnect.getCurrentView()}!${pConnect.getCurrentClassID()}`;
+
+  return assignmentViewId === currentViewId;
+}
+
+/**
+ * A hook that gets the instructions content for a view.
+ * @param {Function} pConnect PConnect object for the component
+ * @param {string} [instructions="casestep"] 'casestep', 'none', or the html content of a Rule-UI-Paragraph rule (processed via core's paragraph annotation handler)
+ */
+export function getInstructions(pConnect, instructions = 'casestep') {
+  const caseStepInstructions = pConnect.getValue(PCore.getConstants().CASE_INFO.INSTRUCTIONS);
+
+  // Determine if this view is the current assignment/step view
+  const isCurrentAssignmentView = getIsAssignmentView(pConnect);
+
+  // Case step instructions
+  if (instructions === 'casestep' && isCurrentAssignmentView && caseStepInstructions?.length) {
+    return caseStepInstructions;
+  }
+
+  // No instructions
+  if (instructions === 'none') {
+    return undefined;
+  }
+
+  // If the annotation wasn't processed correctly, don't return any instruction text
+  if (instructions?.startsWith('@PARAGRAPH')) {
+    console.error('@PARAGRAPH annotation was not processed. Hiding custom instructions.');
+    return undefined;
+  }
+
+  // Custom instructions from the view
+  // The raw metadata for `instructions` will be something like '@PARAGRAPH .SomeParagraphRule' but
+  // it is evaluated by core logic to the content
+  if (instructions !== 'casestep' && instructions !== 'none') {
+    return instructions;
+  }
+  return undefined;
+}

package/src/tasks/create/templates/Constellation/Template/FORM/DefaultForm.svg

@@ -0,0 +1,29 @@
+<?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>2 col  copy</title>
+    <g id="Views" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Template-icons" transform="translate(-320.000000, -925.000000)">
+            <g id="2-col--copy" transform="translate(320.000000, 925.000000)">
+                <rect id="bg" stroke="#A5A8BC" stroke-width="0.5" fill="#E7E9EB" x="0.25" y="0.25" width="99.5" height="69.5"></rect>
+                <g id="white" transform="translate(3.000000, 3.000000)" fill="#FFFFFF">
+                    <rect id="Rectangle" x="0" y="0" width="94" height="66.5"></rect>
+                </g>
+                <g id="gray-copy-2" transform="translate(6.000000, 6.000000)" fill="#8084A7">
+                    <rect id="Rectangle" x="0" y="-2.84217094e-14" width="42" height="11.8"></rect>
+                    <rect id="Rectangle" x="46" y="-2.84217094e-14" width="42" height="11.8"></rect>
+                    <rect id="Rectangle-Copy-5" x="0" y="16" width="42" height="11.8"></rect>
+                    <rect id="Rectangle-Copy-3" x="46" y="16" width="42" height="11.8"></rect>
+                    <rect id="Rectangle-Copy-15" x="0" y="32" width="42" height="11.8"></rect>
+                    <rect id="Rectangle-Copy-14" x="46" y="32" width="42" height="11.8"></rect>
+                    <rect id="Rectangle-Copy-17" x="0" y="48" width="42" height="11.8"></rect>
+                    <rect id="Rectangle-Copy-16" x="46" y="48" width="42" height="11.8"></rect>
+                </g>
+                <g id="Group-7" transform="translate(28.000000, 11.000000)">
+                    <path id="Line-12-Copy" d="M35.1666667,42.75 L47.1666667,48.5 L35.1666667,54.25 L35.166,49.25 L-0.25,49.25 L-0.25,47.75 L35.166,47.75 L35.1666667,42.75 Z" fill="#1E1F27" fill-rule="nonzero"></path>
+                    <line x1="0.5" y1="48.5" x2="43.5" y2="32.5" id="Line" stroke="#1E1F27" stroke-width="1.5" stroke-linecap="square"></line>
+                    <line x1="43.5" y1="32.5" x2="1.5" y2="32.5" id="Line-2" stroke="#1E1F27" stroke-width="1.5" stroke-linecap="square"></line>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/tasks/create/templates/Constellation/Template/FORM/config.json.mustache

@@ -0,0 +1,45 @@
+{
+  "name": "{{COMPONENT_KEY}}",
+  "label": "{{COMPONENT_LABEL}}",
+  "description": "{{DESCRIPTION}}",
+  "organization": "{{ORGANIZATION}}",
+  "version": "{{VERSION}}",
+  "library": "{{LIBRARY}}",
+  "allowedApplications": {{{ALLOWEDAPPS}}},
+  "componentKey": "{{COMPONENT_KEY}}",
+  "type": "{{TYPE}}",
+  "subtype": {{{SUB_TYPE}}},
+  "icon": "DefaultForm.svg",
+    "properties": [
+    {
+      "format": "SELECT",
+      "name": "NumCols",
+      "label": "Number of columns",
+      "defaultValue": "1",
+      "source": [
+        { "key": "1", "value": "One" },
+        { "key": "2", "value": "Two" },
+        { "key": "3", "value": "Three" }
+      ]
+    },
+    {
+      "format": "SELECT",
+      "name": "templateOverrideMode",
+      "label": "Template for embedded views",
+      "defaultValue": "USE_TEMPLATE",
+      "source": [
+        { "key": "USE_TEMPLATE", "value": "Use template" },
+        { "key": "IGNORE_TEMPLATE", "value": "Ignore template" }
+      ]
+    },
+    {
+      "format": "INSTRUCTIONS"
+    },
+    {
+      "name": "Fields",
+      "label": "Fields",
+      "format": "CONTENTPICKER",
+      "allowCreatingGroup": true
+    }
+  ]
+}

package/src/tasks/create/templates/Constellation/Template/FORM/index.jsx.mustache

@@ -0,0 +1,49 @@
+import { useContext } from 'react';
+import { Grid , Flex } from '@pega/cosmos-react-core';
+import PropTypes from 'prop-types';
+
+import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
+
+
+// Duplicated runtime code from Constellation Design System Component
+
+// 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 {{COMPONENT_CLASS_NAME}}(props) {
+
+
+  const { getPConnect, children, template, label, NumCols } = props;
+
+  let nCols = parseInt(NumCols);
+
+  //console.log(`Rendering ${getPConnect()?.getComponentName()} with ${template} with ${children?.length} Region(s)`);
+
+  return (
+    <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
+    {{! pick new delimiteres for mustache }}
+    {{=<% %>=}}
+    <Grid container={{
+          cols: `repeat(${nCols}, minmax(0, 1fr))`,
+          gap: 2,
+          wrap: `wrap`
+        }}>
+          {children}
+    </Grid>
+    <%={{ }}=%>     {{! revert delimiteres for mustache }}
+    </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
+  );
+
+}
+
+{{COMPONENT_CLASS_NAME}}.defaultProps = {
+  NumCols: 1,
+  templateOverrideMode: 'USE_TEMPLATE',
+  children: []
+};
+
+{{COMPONENT_CLASS_NAME}}.propTypes = {
+  label: PropTypes.string,
+  getPConnect: PropTypes.func.isRequired,
+  children: PropTypes.arrayOf(PropTypes.node).isRequired,
+  template: PropTypes.string.isRequired
+};

package/src/tasks/create/templates/Constellation/Template/FORM/styles.js.mustache

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

package/src/tasks/create/templates/Constellation/Template/FORM-region/TwoColumn.svg

@@ -0,0 +1,38 @@
+<?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>2-col  icon</title>
+    <g id="Views" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-Copy-2" transform="translate(-198.000000, -207.000000)">
+            <g id="2-col--icon" transform="translate(198.000000, 207.000000)">
+                <rect id="bg" stroke="#A5A8BC" stroke-width="0.5" fill="#E7E9EB" x="0.25" y="0.25" width="99.5" height="69.5"></rect>
+                <g id="white" transform="translate(3.000000, 3.000000)" fill="#FFFFFF">
+                    <rect id="Rectangle" x="0" y="0" width="94" height="66.5"></rect>
+                </g>
+                <g id="gray" transform="translate(6.000000, 6.000000)" fill="#8084A7">
+                    <rect id="Rectangle" x="0" y="0" width="42" height="7.8"></rect>
+                    <rect id="Rectangle-Copy-18" x="0" y="11.7" width="42" height="7.8"></rect>
+                    <rect id="Rectangle-Copy-19" x="0" y="23.4" width="42" height="7.8"></rect>
+                    <rect id="Rectangle-Copy-20" x="0" y="35.1" width="42" height="7.8"></rect>
+                    <rect id="Rectangle-Copy-21" x="0" y="46.8" width="42" height="7.8"></rect>
+                    <rect id="Rectangle-Copy-22" x="0" y="58.5" width="42" height="5"></rect>
+                    <rect id="Rectangle-Copy" x="46" y="2.66453526e-15" width="42" height="7.8"></rect>
+                    <rect id="Rectangle-Copy-27" x="46" y="11.7" width="42" height="7.8"></rect>
+                    <rect id="Rectangle-Copy-26" x="46" y="23.4" width="42" height="7.8"></rect>
+                    <rect id="Rectangle-Copy-25" x="46" y="35.1" width="42" height="7.8"></rect>
+                    <rect id="Rectangle-Copy-24" x="46" y="46.8" width="42" height="7.8"></rect>
+                    <rect id="Rectangle-Copy-23" x="46" y="58.5" width="42" height="5"></rect>
+                </g>
+                <g id="labels" transform="translate(16.000000, 11.000000)">
+                    <circle id="Oval-Copy-3" fill="#FFFFFF" cx="10.5" cy="10.8076923" r="10.5"></circle>
+                    <text id="A" font-family="OpenSans-Semibold, Open Sans" font-size="11" font-weight="500" fill="#56566F">
+                        <tspan x="6.75" y="14">A</tspan>
+                    </text>
+                    <circle id="Oval-Copy-4" fill="#FFFFFF" cx="56.5" cy="10.8076923" r="10.5"></circle>
+                    <text id="B" font-family="OpenSans-Semibold, Open Sans" font-size="11" font-weight="500" fill="#56566F">
+                        <tspan x="52.75" y="14">B</tspan>
+                    </text>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/tasks/create/templates/Constellation/Template/FORM-region/config.json.mustache

@@ -0,0 +1,27 @@
+{
+  "name": "{{COMPONENT_KEY}}",
+  "label": "{{COMPONENT_LABEL}}",
+  "description": "{{DESCRIPTION}}",
+  "organization": "{{ORGANIZATION}}",
+  "version": "{{VERSION}}",
+  "library": "{{LIBRARY}}",
+  "allowedApplications": {{{ALLOWEDAPPS}}},
+  "componentKey": "{{COMPONENT_KEY}}",
+  "type": "{{TYPE}}",
+  "subtype": {{{SUB_TYPE}}},
+  "icon": "TwoColumn.svg",
+  "properties": [
+    {
+      "name": "A",
+      "label": "Region A",
+      "format": "CONTENTPICKER",
+      "allowCreatingGroup": true
+    },
+    {
+      "name": "B",
+      "label": "Region B",
+      "format": "CONTENTPICKER",
+      "allowCreatingGroup": true
+    }
+  ]
+}

package/src/tasks/create/templates/Constellation/Template/FORM-region/index.jsx.mustache

@@ -0,0 +1,51 @@
+import { useContext } from 'react';
+import { Grid , Flex } from '@pega/cosmos-react-core';
+import PropTypes from 'prop-types';
+
+import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
+
+
+// Duplicated runtime code from Constellation Design System Component
+
+// 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 {{COMPONENT_CLASS_NAME}}(props) {
+
+
+  const { getPConnect, children, template, label } = props;
+
+  const numRegions = children?.length;
+  const gridRepeat = 'repeat(' + numRegions + ', 1fr)';
+  let gridContainer = {};
+  gridContainer.cols = gridRepeat;
+  gridContainer.alignItems = 'start';
+  gridContainer.colGap = 1;
+
+
+  return (
+    <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
+    {{! pick new delimiteres for mustache }}
+    {{=<% %>=}}
+      <Grid container={gridContainer}>
+       {children.map((child, i) => (
+        <Flex container={{ direction: 'column'}} key={`r-${i + 1}`}>
+        {child}
+        </Flex>
+       ))}
+      </Grid>
+    <%={{ }}=%>     {{! revert delimiteres for mustache }}
+    </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
+  );
+
+}
+
+{{COMPONENT_CLASS_NAME}}.defaultProps = {
+  children: []
+};
+
+{{COMPONENT_CLASS_NAME}}.propTypes = {
+  label: PropTypes.string,
+  getPConnect: PropTypes.func.isRequired,
+  children: PropTypes.arrayOf(PropTypes.node).isRequired,
+  template: PropTypes.string.isRequired
+};

package/src/tasks/create/templates/Constellation/Template/FORM-region/styles.js.mustache

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

package/src/tasks/create/templates/Constellation/Template/PAGE/GetNextWork.js.mustache

@@ -0,0 +1,29 @@
+import { Button, useToaster } from '@pega/cosmos-react-core';
+
+export default function GetNextWork(props) {
+  const { getPConnect, variant } = props;
+
+  const toasterCtx = useToaster();
+
+  const localizedVal = PCore.getLocaleUtils().getLocaleValue;
+
+  const getNextWork = () => {
+    getPConnect()
+      .getActionsApi()
+      .getNextWork()
+      .catch((err) => {
+        console.log(err);
+        if (err[0].status === 404) {
+          toasterCtx.push({
+            content: localizedVal('No task currently available')
+          });
+        }
+      });
+  };
+
+  return (
+    <Button variant={variant} onClick={getNextWork}>
+      {getPConnect().getLocalizedValue('Get next work')}
+    </Button>
+  );
+}

package/src/tasks/create/templates/Constellation/Template/PAGE/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/src/tasks/create/templates/Constellation/Template/PAGE/config.json.mustache

@@ -0,0 +1,32 @@
+{
+  "name": "{{COMPONENT_KEY}}",
+  "label": "{{COMPONENT_LABEL}}",
+  "description": "{{DESCRIPTION}}",
+  "organization": "{{ORGANIZATION}}",
+  "version": "{{VERSION}}",
+  "library": "{{LIBRARY}}",
+  "allowedApplications": {{{ALLOWEDAPPS}}},
+  "componentKey": "{{COMPONENT_KEY}}",
+  "type": "{{TYPE}}",
+  "subtype": {{{SUB_TYPE}}},
+  "icon": "OneColumnPage.svg",
+  "properties": [
+    {
+      "name": "useConfigurableLayout",
+      "label": "Use inline layout for insights",
+      "format": "BOOLEAN"
+    },
+    {
+      "name": "enableGetNextWork",
+      "label": "Enable Get next work",
+      "format": "BOOLEAN"
+    },
+    {
+      "name": "A",
+      "label": "Region A",
+      "format": "CONTENTPICKER",
+      "addTypeList": ["Widgets", "Views", "Insights"]
+    }
+  ],
+  "defaultConfig": {}
+}