Merge pull request #111 from pegasystems/feature/rangeslider

Feature/rangeslider

.storybook/main.ts

@@ -12,7 +12,7 @@ const config: StorybookConfig = {
     autodocs: true
   },
   typescript: {
-    check: true
+    check: false
   }
 };
 

.stylelintrc.json

@@ -6,5 +6,11 @@
     "selector-max-combinators": null,
     "selector-max-compound-selectors": null
   },
-  "ignoreFiles": ["node_modules/**", "lib/**", "!.storybook", ".storybook/public"]
+  "ignoreFiles": [
+    "node_modules/**",
+    "lib/**",
+    "!.storybook",
+    ".storybook/public",
+    "storybook-static/**"
+  ]
 }

src/components/Pega_Extensions_FieldGroupAsRow/styles.ts

@@ -3,33 +3,29 @@ import styled, { css } from 'styled-components';
 
 export default styled.div(({ theme }: { theme: typeof themeDefinition }) => {
   return css`
-    & > div > div {
-      max-width: unset;
-    }
-
-    & fieldset > div > div > div > div > div > div > div:last-child > div {
+    & > div > div > div > div:last-child > div {
       display: flex;
       flex-flow: row wrap;
     }
 
-    & fieldset > div h1 {
+    & h1 {
       display: none;
     }
 
-    & fieldset {
-      min-width: 40ch;
+    & > div > div > div > div:last-child > div > div {
+      min-width: 38ch;
       flex: 1;
       border-right: 0.0625rem solid ${theme.base.palette['border-line']};
-      margin-right: 1rem;
-      padding-right: 1rem;
+      margin-right: 0.5rem;
+      padding-right: 0.5rem;
     }
 
-    & fieldset dd {
-      text-align: right;
+    & div > div:last-child {
+      padding-inline-start: 0;
     }
 
-    & fieldset > legend > div {
-      flex-direction: column;
+    & div > div:last-child::before {
+      content: none;
     }
 
     & img {

src/components/Pega_Extensions_ImageCarousel/styles.ts

@@ -51,7 +51,7 @@ export const ButtonNext = styled.button`
 export const DotsContainer = styled.div`
   display: flex;
   justify-content: center;
-  z-index: 9999;
+  z-index: 2;
   position: relative;
   top: -1.5rem;
 `;

src/components/Pega_Extensions_RangeSlider/Docs.mdx

@@ -0,0 +1,32 @@
+import { Meta, Primary, Controls, Story } from '@storybook/blocks';
+import * as DemoStories from './demo.stories';
+
+<Meta of={DemoStories} />
+
+# Overview
+
+The Range slider allows to filter a set of objects by a range value - the fields could be integer, decimal or currencies. If the value is a currency, set the currencyCode value.
+
+<Primary />
+
+## Props
+
+<Controls />
+
+## Configuration
+
+Here is an example of filtering in the end user portal to select a case reference.
+
+![Configuration](RangeSlider_Configuration_1.png)
+
+The new template is used to configure 2 currency types fields for start and end values. The view to refresh is passed to the region of the template.
+
+![Configuration](RangeSlider_Configuration_2.png)
+
+The case reference data page is a parametrized data page that uses the min and max values to filter the list
+
+![Configuration](RangeSlider_Configuration_3.png)
+
+# Contributors
+
+This component was suggested by Sowjanya Thutupalli working with [Areteans | areteanstech.com/](https://areteanstech.com/). See the [Component proposal](https://github.com/pegasystems/constellation-ui-gallery/issues/90).

src/components/Pega_Extensions_RangeSlider/config.json

@@ -0,0 +1,57 @@
+{
+  "name": "Pega_Extensions_RangeSlider",
+  "label": "Range Slider",
+  "description": "Range Slider",
+  "organization": "Pega",
+  "version": "1.0.0",
+  "library": "Extensions",
+  "allowedApplications": [],
+  "componentKey": "Pega_Extensions_RangeSlider",
+  "type": "Template",
+  "subtype": "DETAILS",
+  "properties": [
+    {
+      "key": "minValueProperty",
+      "format": "PROPERTY",
+      "name": "minValueProperty",
+      "required": true,
+      "label": "Minimum Value Property"
+    },
+    {
+      "key": "maxValueProperty",
+      "format": "PROPERTY",
+      "name": "maxValueProperty",
+      "required": true,
+      "label": "Maximum Value Property"
+    },
+    {
+      "name": "min",
+      "label": "Min Value",
+      "format": "NUMBER",
+      "required": true
+    },
+    {
+      "name": "max",
+      "label": "Max Value",
+      "format": "NUMBER",
+      "required": true
+    },
+    {
+      "name": "step",
+      "label": "Increment",
+      "format": "NUMBER",
+      "required": true
+    },
+    {
+      "name": "currencyCode",
+      "label": "CurrencyCode. Set to empty string for no currency",
+      "format": "TEXT"
+    },
+    {
+      "name": "A",
+      "label": "Region A",
+      "format": "CONTENTPICKER",
+      "addTypeList": ["Views"]
+    }
+  ]
+}

src/components/Pega_Extensions_RangeSlider/demo.stories.tsx

@@ -0,0 +1,107 @@
+import type { StoryObj } from '@storybook/react';
+import { PegaExtensionsRangeSlider } from './index';
+
+export default {
+  title: 'Templates/Range Slider',
+  argTypes: {
+    getPConnect: {
+      table: {
+        disable: true
+      }
+    },
+    children: {
+      table: {
+        disable: true
+      }
+    }
+  },
+  component: PegaExtensionsRangeSlider
+};
+
+const mainResponse = {
+  name: 'pyReview',
+  type: 'View',
+  config: {
+    template: 'Details',
+    ruleClass: 'Work-MyComponents',
+    showLabel: true,
+    label: '@L Details',
+    localeReference: '@LR Details',
+    inheritedProps: []
+  },
+  children: [
+    {
+      name: 'A',
+      type: 'Region',
+      getPConnect: () => {
+        return {
+          getRawMetadata: () => {
+            return mainResponse.children[0];
+          }
+        };
+      },
+      children: []
+    }
+  ],
+  classID: 'Work-MyComponents'
+};
+
+type Story = StoryObj<typeof PegaExtensionsRangeSlider>;
+export const Default: Story = {
+  render: args => {
+    const props = {
+      ...args,
+      getPConnect: () => {
+        return {
+          getActionsApi: () => {
+            return {
+              updateFieldValue: () => {},
+              refreshCaseView: () => {
+                // console.log('updating views');
+              }
+            };
+          },
+          getCaseInfo: () => {
+            return {
+              getCurrentAssignmentViewName: () => '',
+              getKey: () => {
+                return 'WORK-123';
+              }
+            };
+          },
+          getChildren: () => {
+            return mainResponse.children;
+          },
+          getRawMetadata: () => {
+            return mainResponse;
+          },
+          getInheritedProps: () => {
+            return mainResponse.config.inheritedProps;
+          },
+          createComponent: (config: any) => {},
+          setInheritedProp: () => {
+            /* nothing */
+          },
+          resolveConfigProps: () => {
+            /* nothing */
+          }
+        };
+      }
+    };
+    const regionAChildren = mainResponse.children[0].children.map((child: any) => {
+      return props.getPConnect().createComponent(child);
+    });
+
+    return <PegaExtensionsRangeSlider {...props}>{regionAChildren}</PegaExtensionsRangeSlider>;
+  },
+  args: {
+    label: 'Range Slider',
+    showLabel: true,
+    maxValueProperty: 240,
+    minValueProperty: 120,
+    min: 0,
+    max: 500,
+    step: 1,
+    currencyCode: 'USD'
+  }
+};

src/components/Pega_Extensions_RangeSlider/demo.test.tsx

@@ -0,0 +1,10 @@
+import { render, screen } from '@testing-library/react';
+import { composeStories } from '@storybook/react';
+import * as DemoStories from './demo.stories';
+
+const { Default } = composeStories(DemoStories);
+
+test('renders FieldGroupAsRow component with default args', async () => {
+  render(<Default />);
+  expect(await screen.findByText('Range Slider')).toBeVisible();
+});