@pega/dx-component-builder-sdk 0.23.10 → 0.23.12

package/tests/assets/sdk-a/components/createAll/override-sdk/template/case-view/case-view.component.scss

@@ -1,5 +1,3 @@
-@import '@pega/angular-sdk-components/_shared/styles.scss';
-
 h1 {
   font-size: 1.1rem;
   line-height: 1.3rem;
@@ -29,14 +27,14 @@ h1 {
 }
 
 .psdk-case-icon-div {
-  background-color: $app-primary-dark-color;
+  background-color: var(--app-primary-dark-color);
   border-radius: 1rem;
   padding: 0.5rem 0.3rem 0.3rem 0.3rem;
 }
 .psdk-case-svg-icon {
   width: 2rem;
   padding: 0rem 0.3125rem;
-  filter: $app-white-color-filter;
+  filter: var(--app-white-color-filter);
 }
 
 .psdk-case-view-info-box {
@@ -51,7 +49,7 @@ h1 {
   float: left;
   padding: 0rem 0.3125rem 0rem 0rem;
   height: 100%; /* Should be removed. Only for demonstration */
-  background-color: $app-form-color;
+  background-color: var(--app-form-color);
 }
 
 .psdk-case-view-main {
@@ -91,13 +89,13 @@ h1 {
 }
 
 .psdk-case-view-divider {
-  border-bottom: 0.0625rem solid $app-neutral-light-color;
+  border-bottom: 0.0625rem solid var(--app-neutral-light-color);
 }
 
 .psdk-status {
   padding: 0.3125rem 0.3125rem;
-  background-color: $app-primary-color;
-  color: white;
+  background-color: var(--app-primary-color);
+  color: var(--app-form-color);
   width: fit-content;
   margin: 0.625rem;
 }

package/tests/assets/sdk-a/components/createAll/override-sdk/template/default-form/default-form.component.scss

@@ -1,5 +1,3 @@
-@import '@pega/angular-sdk-components/_shared/styles.scss';
-
 .psdk-default-form-one-column {
   display: grid;
   grid-template-columns: repeat(1, minmax(0, 1fr));

package/tests/assets/sdk-a/components/createAll/override-sdk/template/field-group-list/field-group-list.component.scss

@@ -1,5 +1,5 @@
 .psdk-details-fields-label {
-  color: rgba(0, 0, 0, 0.54);
+  color: var(--app-label-color);
   margin: 8px 0px;
 }
 

package/tests/assets/sdk-a/components/createAll/override-sdk/template/list-view/list-view.component.scss

@@ -1,7 +1,5 @@
-@import '@pega/angular-sdk-components/_shared/styles.scss';
-
 .psdk-list-header {
-  background-color: white;
+  background-color: var(--app-form-color);
   padding: 1rem;
   margin: 0.5rem;
   border-radius: 0.6125rem;
@@ -91,32 +89,32 @@ td.mat-mdc-footer-cell {
   width: 1.4rem;
   display: inline-block;
   vertical-align: middle;
-  filter: $app-primary-color-filter;
+  filter: var(--app-primary-color-filter);
 }
 
 .psdk-filter-svg-icon {
   width: 1rem;
   display: inline-block;
   vertical-align: middle;
-  filter: $app-neutral-color-filter;
+  filter: var(--app-neutral-color-filter);
 }
 
 .psdk-arrow-svg-icon {
   width: 1rem;
   display: inline-block;
   vertical-align: middle;
-  filter: $app-neutral-color-filter;
+  filter: var(--app-neutral-color-filter);
 }
 
 .psdk-filter-popover {
   display: table;
   margin: auto;
   min-width: 100px;
-  background-color: white;
-  border: 1px solid black;
+  background-color: var(--app-form-color);
+  border: 1px solid var(--app-inverse-form-color);
   border-radius: 10px;
   padding: 20px;
-  box-shadow: 0 0 10px 3px #777;
+  box-shadow: 0 0 10px 3px var(--app-box-shadow-color);
   position: absolute;
   z-index: 99;
 }
@@ -128,7 +126,7 @@ td.mat-mdc-footer-cell {
   align-items: center;
   height: 100%;
   width: 100%;
-  background-color: rgba(100, 100, 100, 0.4);
+  background-color: var(--app-dialog-background-color);
   position: fixed;
   z-index: 999;
   top: 0px;
@@ -139,11 +137,11 @@ td.mat-mdc-footer-cell {
   display: table;
   margin: auto;
   min-width: 150px;
-  background-color: white;
-  border: 1px solid black;
+  background-color: var(--app-form-color);
+  border: 1px solid var(--app-inverse-form-color);
   border-radius: 10px;
   padding: 20px;
-  box-shadow: 0 0 10px 3px #777;
+  box-shadow: 0 0 10px 3px var(--app-box-shadow-color);
 }
 
 tr.mat-mdc-row {
@@ -155,12 +153,12 @@ tr.mat-mdc-row {
   justify-content: center;
   display: flex;
   align-items: center;
-  border: 1px solid lightgray;
+  border: 1px solid var(--app-neutral-light-color);
   border-top: none;
 }
 
 .psdk-table-field-link {
-  color: $app-primary-color;
+  color: var(--app-primary-color);
   padding: 0;
   cursor: pointer;
   border: 0;

package/tests/assets/sdk-a/components/createAll/override-sdk/template/one-column-tab/one-column-tab.component.scss

@@ -1,7 +1,5 @@
-@import '@pega/angular-sdk-components/_shared/styles.scss';
-
 .psdk-one-column-tab {
-  background-color: $app-form-color;
+  background-color: var(--app-form-color);
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
   border-radius: 0.3125rem;

package/tests/assets/sdk-a/components/createAll/override-sdk/template/simple-table-manual/simple-table-manual.component.scss

@@ -1,5 +1,3 @@
-@import '@pega/angular-sdk-components/_shared/styles.scss';
-
 /* Adapted from list-view.component.scss */
 
 .simple-table-wrapper {
@@ -23,7 +21,7 @@ table {
 ::ng-deep th.mat-mdc-header-cell,
 td.mat-mdc-cell,
 td.mat-mdc-footer-cell {
-  border-right: 1px solid lightgray;
+  border-right: 1px solid var(--app-neutral-light-color);
   padding: 8px !important;
 }
 
@@ -91,32 +89,32 @@ td.mat-mdc-footer-cell {
   width: 1.4rem;
   display: inline-block;
   vertical-align: middle;
-  filter: $app-primary-color-filter;
+  filter: var(--app-primary-color-filter);
 }
 
 .psdk-filter-svg-icon {
   width: 1rem;
   display: inline-block;
   vertical-align: middle;
-  filter: $app-neutral-color-filter;
+  filter: var(--app-neutral-color-filter);
 }
 
 .psdk-arrow-svg-icon {
   width: 1rem;
   display: inline-block;
   vertical-align: middle;
-  filter: $app-neutral-color-filter;
+  filter: var(--app-neutral-color-filter);
 }
 
 .psdk-filter-popover {
   display: table;
   margin: auto;
   min-width: 100px;
-  background-color: white;
-  border: 1px solid black;
+  background-color: var(--app-form-color);
+  border: 1px solid var(--app-inverse-form-color);
   border-radius: 10px;
   padding: 20px;
-  box-shadow: 0 0 10px 3px #777;
+  box-shadow: 0 0 10px 3px var(--app-box-shadow-color);
   position: absolute;
   z-index: 99;
 }
@@ -128,7 +126,7 @@ td.mat-mdc-footer-cell {
   align-items: center;
   height: 100%;
   width: 100%;
-  background-color: rgba(100, 100, 100, 0.4);
+  background-color: var(--app-dialog-background-color);
   position: fixed;
   z-index: 999;
   top: 0px;
@@ -139,11 +137,11 @@ td.mat-mdc-footer-cell {
   display: table;
   margin: auto;
   min-width: 150px;
-  background-color: white;
-  border: 1px solid black;
+  background-color: var(--app-form-color);
+  border: 1px solid var(--app-inverse-form-color);
   border-radius: 10px;
   padding: 20px;
-  box-shadow: 0 0 10px 3px #777;
+  box-shadow: 0 0 10px 3px var(--app-box-shadow-color);
 }
 
 tr.mat-mdc-row {
@@ -151,7 +149,7 @@ tr.mat-mdc-row {
 }
 
 tr.mat-mdc-header-row {
-  background: #f5f5f5;
+  background: var(--app-table-header-background-color);
 }
 
 .psdk-data-readonly {
@@ -164,9 +162,9 @@ tr.mat-mdc-header-row {
   justify-content: center;
   display: flex;
   align-items: center;
-  border: 1px solid lightgray;
+  border: 1px solid var(--app-neutral-light-color);
   border-top: none;
-  background: white;
+  background: var(--app-form-color);
 }
 
 .psdk-utility-card-action-svg-icon {

package/tests/assets/sdk-a/components/createAll/override-sdk/widget/app-announcement/app-announcement.component.scss

@@ -1,5 +1,3 @@
-@import '@pega/angular-sdk-components/_shared/styles.scss';
-
 h2 {
   font-size: 1.2rem;
   margin-block-start: 0rem;
@@ -12,10 +10,10 @@ ul {
   padding-inline-start: 20px;
 }
 .psdk-announcement {
-  background-color: white;
+  background-color: var(--app-form-color);
   padding: 1rem;
   margin: 1rem 0;
   border-radius: 0.6125rem;
   border-left: 6px solid;
-  border-left-color: #7986cb;
+  border-left-color: var(--app-primary-color);
 }

package/tests/assets/sdk-a/components/createAll/override-sdk/widget/attachment/attachment.component.scss

@@ -1,5 +1,3 @@
-@import '@pega/angular-sdk-components/_shared/styles.scss';
-
 .progress-spinner {
   text-align: center;
   position: absolute;
@@ -7,7 +5,7 @@
 }
 
 .psdk-modal-file-selector {
-  border: 1px dashed $app-neutral-dark-color;
+  border: 1px dashed var(--app-neutral-dark-color);
   width: 100%;
   padding: 0.3rem;
   text-align: center;
@@ -18,15 +16,15 @@
   display: inline;
   content: ' *';
   vertical-align: top;
-  color: $app-neutral-dark-color;
+  color: var(--app-neutral-dark-color);
 }
 
 .file-error {
-  color: $app-error-light-color;
+  color: var(--app-error-light-color);
 }
 
 .psdk-modal-file-selector-error {
-  border: 1px dashed $app-error-light-color;
+  border: 1px dashed var(--app-error-light-color);
   width: 100%;
   padding: 0.3rem;
   text-align: center;
@@ -49,7 +47,7 @@
 }
 
 .psdk-attachment-list {
-  border: 1px solid $app-neutral-color;
+  border: 1px solid var(--app-neutral-color);
 }
 
 ::ng-deep .mat-mdc-form-field-infix {

package/tests/assets/sdk-a/components/createAll/override-sdk/widget/feed-container/feed-container.component.scss

@@ -1,7 +1,5 @@
-@import '@pega/angular-sdk-components/_shared/styles.scss';
-
 .psdk-pulse-divider {
-  border-bottom: 0.0625rem solid $app-neutral-light-color;
+  border-bottom: 0.0625rem solid var(--app-neutral-light-color);
 }
 
 .psdk-full-width {
@@ -19,7 +17,7 @@
   padding: 0rem 0.125rem;
   min-width: unset;
   display: inline-block;
-  color: $app-primary-color;
+  color: var(--app-primary-color);
 }
 
 .psdk-send-svg-icon {
@@ -39,7 +37,7 @@
 .psdk-liked-by-me-svg-icon {
   width: 1.4rem;
   padding: 0rem 0.3215rem;
-  filter: $app-primary-color-filter;
+  filter: var(--app-primary-color-filter);
 }
 
 .psdk-avatar {
@@ -54,8 +52,8 @@
   align-items: center;
   text-align: center;
   display: flex;
-  background: $app-primary-color;
-  color: white;
+  background: var(--app-primary-color);
+  color: var(--app-form-color);
   font-weight: bold;
   font-size: 1.25rem;
 }
@@ -72,8 +70,8 @@
   align-items: center;
   text-align: center;
   display: flex;
-  background: $app-primary-color;
-  color: white;
+  background: var(--app-primary-color);
+  color: var(--app-form-color);
   font-weight: bold;
   font-size: 1.5625rem;
 }
@@ -97,7 +95,7 @@
 }
 
 .psdk-pulse-message-time {
-  color: #aaaaaa;
+  color: var(--app-pulse-message-color);
 }
 
 .psdk-pulse-message-text {
@@ -143,7 +141,7 @@
 }
 
 .psdk-pulse-reply-message {
-  background-color: #dddddd;
+  background-color: var(--app-pulse-message-background-color);
   border-radius: 0.625rem;
   padding: 0rem 1.25rem;
   white-space: pre-line;
@@ -172,7 +170,7 @@
 }
 
 .psdk-pulse-reply-time {
-  color: #aaaaaa;
+  color: var(--app-pulse-message-color);
   padding-left: 0.625rem;
 }
 

package/tests/assets/sdk-a/components/createAll/override-sdk/widget/file-utility/file-utility.component.scss

@@ -1,5 +1,3 @@
-@import '@pega/angular-sdk-components/_shared/styles.scss';
-
 .psdk-dialog-background {
   display: flex;
   flex-direction: column;
@@ -7,7 +5,7 @@
   align-items: center;
   height: 100%;
   width: 100%;
-  background-color: rgba(100, 100, 100, 0.4);
+  background-color: var(--app-dialog-background-color);
   position: fixed;
   z-index: 999;
   top: 0px;
@@ -18,26 +16,26 @@
   display: table;
   margin: auto;
   min-width: 650px;
-  background-color: white;
-  border: 1px solid black;
+  background-color: var(--app-form-color);
+  border: 1px solid var(--app-inverse-form-color);
   border-radius: 10px;
   padding: 20px;
-  box-shadow: 0 0 10px 3px #777;
+  box-shadow: 0 0 10px 3px var(--app-box-shadow-color);
 }
 
 .psdk-modal-link-top {
   display: table;
   margin: auto;
   min-width: 650px;
-  background-color: white;
-  border: 1px solid black;
+  background-color: var(--app-form-color);
+  border: 1px solid var(--app-inverse-form-color);
   border-radius: 10px;
   padding: 20px;
-  box-shadow: 0 0 10px 3px #777;
+  box-shadow: 0 0 10px 3px var(--app-box-shadow-color);
 }
 
 .psdk-modal-file-selector {
-  border: 1px dashed $app-neutral-dark-color;
+  border: 1px dashed var(--app-neutral-dark-color);
   width: 100%;
   padding: 0.3rem;
   text-align: center;
@@ -87,7 +85,7 @@
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: calc(1rem);
-  width: 100%;
+  width: 85%;
 }
 
 .psdk-modal-links-row {

package/tests/assets/sdk-a/components/createAll/override-sdk/widget/list-utility/list-utility.component.scss

@@ -1,5 +1,3 @@
-@import '@pega/angular-sdk-components/_shared/styles.scss';
-
 .progress-spinner {
   text-align: center;
   position: absolute;
@@ -13,7 +11,7 @@
 }
 
 .psdk-utility-divider {
-  border-bottom: 0.0625rem solid $app-neutral-light-color;
+  border-bottom: 0.0625rem solid var(--app-neutral-light-color);
 }
 
 .psdk-utility-view-all {
@@ -23,9 +21,9 @@
 }
 
 .psdk-utility-count {
-  background: $app-primary-light-color;
+  background: var(--app-primary-light-color);
   border-radius: calc(1.125 * 0.5rem);
-  color: black;
+  color: var(--app-inverse-form-color);
   display: inline-block;
   font-size: 0.75rem;
   font-weight: bold;
@@ -52,7 +50,7 @@
   width: 100%;
   padding: 0.625rem 0rem;
   text-align: left;
-  background-color: $app-form-color;
+  background-color: var(--app-form-color);
   border-radius: 0.6125rem;
   margin: 0.3125rem 0rem;
   position: relative;
@@ -71,7 +69,7 @@
 .psdk-settings-svg-icon {
   width: 1.4rem;
   display: inline-block;
-  filter: $app-primary-color-filter;
+  filter: var(--app-primary-color-filter);
 }
 
 .psdk-utility .message {
@@ -100,7 +98,7 @@
 }
 
 .psdk-utility-card-main-primary-url {
-  color: $app-primary-color;
+  color: var(--app-primary-color);
 }
 
 .psdk-utility-card-main-primary-url .mat-mdc-button.mat-primary {
@@ -125,7 +123,7 @@
   width: 1.4rem;
   display: inline-block;
   vertical-align: middle;
-  filter: $app-primary-color-filter;
+  filter: var(--app-primary-color-filter);
 }
 
 .psdk-utility-card-action-actions-svg-icon {

package/tests/assets/sdk-a/components/createAll/override-sdk/widget/todo/todo.component.scss

@@ -1,15 +1,13 @@
-@import '@pega/angular-sdk-components/_shared/styles.scss';
-
 .psdk-display-divider {
-  border-bottom: 0.0625rem solid $app-neutral-light-color;
+  border-bottom: 0.0625rem solid var(--app-neutral-light-color);
 }
 
 .psdk-todo {
   padding: 1rem;
-  background-color: white;
+  background-color: var(--app-form-color);
   border-radius: 0.6125rem;
   border-left: 6px solid;
-  border-left-color: #7986cb;
+  border-left-color: var(--app-primary-color);
 }
 
 .psdk-todo-header {
@@ -23,14 +21,14 @@
 }
 
 .psdk-assignment-count {
-  background-color: $app-primary-light-color;
+  background-color: var(--app-primary-light-color);
   margin: 0.5rem;
   border-radius: 45%;
   padding: 0.15rem 0.4rem;
 }
 
 .psdk-todo-id {
-  color: $app-primary-color;
+  color: var(--app-primary-color);
   padding: 0;
   cursor: pointer;
   border: 0;
@@ -50,8 +48,8 @@
   align-items: center;
   text-align: center;
   display: flex;
-  background: $app-primary-color;
-  color: white;
+  background: var(--app-primary-color);
+  color: var(--app-form-color);
   font-weight: bold;
   font-size: 1.25rem;
 }
@@ -67,9 +65,9 @@
 }
 
 .psdk-todo-assignment-status {
-  background-color: $app-neutral-light-color;
+  background-color: var(--app-neutral-light-color);
   border-radius: 0.125rem;
-  color: darkslategray;
+  color: var(--app-assignment-status-color);
   font-size: 0.75rem;
   font-weight: bold;
   line-height: calc(0.5rem * 2.5);
@@ -79,7 +77,7 @@
 }
 
 .psdk-todo-assignment-task {
-  color: $app-neutral-color;
+  color: var(--app-neutral-color);
 }
 
 .psdk-todo-assignment-action {

package/tests/assets/sdk-r/components/create/custom-constellation/_custom-constellation.md

@@ -0,0 +1,5 @@
+# The **components/custom-constellation** directory
+
+The **src/components/custom-constellation** directory contains the code for Constellation-related _associated_ components of custom components that you create and use with the **React SDK**.
+These _associated_ components are used to show the preview of the custom component in App Studio when you are authoring your application and App Studio needs to use the Constellation
+design system version of your custom component.

package/tests/assets/sdk-r/components/create/custom-constellation/field/Pega_DXIL_MyTestText/PConnProps.d.ts

@@ -0,0 +1,46 @@
+import  {PConnect } from '@pega/pcore-pconnect-typedefs';
+
+// PConnProps.d.ts
+// This gives us a place to have each component (which is most DX Components) that is
+//  expected to have a getPConnect extend its props (from BaseProps)
+//  such that every component will be expected to have a getPConnect() function
+//  that returns a PConnect object. (new/better way of doing .propTypes).
+//  This PConnProps can be extended to include other props that we know are in every component
+export interface PConnProps {
+  // getPConnect should exist for every C11n component. (add @ts-ignore in special cases where it isn't)
+  getPConnect: () => typeof PConnect;
+
+  // Allow any/all other key/value pairs in the BaseProps for now
+  //  TODO: refine which other props are always expected for various component
+  //    types and consider further interface "subclassing". For example, we may
+  //    want to create a "BasePropsForm" that gives guidance on required, readonly, etc.
+  //    and any other props that every Form component expects.
+  //    For example, see the PConnFieldProps below.
+  // NOTE: if you uncomment the line below, the PConnProps type will allow
+  //  otherwise undefined types to appear. This can be helpful for debugging
+  //  or when adding new components whose types aren't yet known.
+  // [key: string]: any;
+}
+
+
+// PConnFieldProps extends PConnProps to bring in the common properties that are
+// associated with most field components (ex: Dropdown, TextInput, etc.) in the
+//  components/field directory
+export interface PConnFieldProps extends PConnProps {
+  label: string,
+  required: boolean,
+  disabled: boolean,
+  value: any,
+  validatemessage: string,
+  status?: string,
+  onChange?: any,
+  onBlur?: any,
+  readOnly: boolean,
+  testId: string,
+  helperText: string,
+  displayMode?: string,
+  hideLabel: boolean,
+  placeholder?: string,
+  fieldMetadata?: any,
+  additionalProps?: any
+}

package/tests/assets/sdk-r/components/create/custom-constellation/field/Pega_DXIL_MyTestText/demo.stories.tsx

@@ -0,0 +1,54 @@
+
+/* eslint-disable react/jsx-no-useless-fragment */
+// @ts-nocheck
+import { useState } from 'react';
+import { withKnobs } from '@storybook/addon-knobs';
+
+import { stateProps, configProps } from './mock';
+
+import PegaDxilMyTestText from './index';
+
+export default {
+  title: 'PegaDxilMyTestText',
+  decorators: [withKnobs],
+  component: PegaDxilMyTestText
+};
+
+export const BasePegaDxilMyTestText = () => {
+
+  const [value, setValue] = useState(configProps.value);
+
+  const props = {
+    value,
+    placeholder: configProps.placeholder,
+    label: configProps.label,
+    testId: configProps.testId,
+    hasSuggestions: configProps.hasSuggestions,
+
+    getPConnect: () => {
+      return {
+        getStateProps: () => {
+          return stateProps;
+        },
+        getActionsApi: () => {
+          return {
+            updateFieldValue: (propName, theValue) => {
+              setValue(theValue);
+            },
+            triggerFieldChange: () => {/* nothing */}
+          };
+        },
+        ignoreSuggestion: () => {/* nothing */},
+        acceptSuggestion: () => {/* nothing */},
+        setInheritedProps: () => {/* nothing */},
+        resolveConfigProps: () => {/* nothing */}
+      };
+    }
+  };
+
+  return (
+    <>
+      <PegaDxilMyTestText {...props} />
+    </>
+  );
+};