@pie-lib/render-ui 4.15.10-next.1 → 4.16.1-beta.0

package/CHANGELOG.md

@@ -3,18 +3,15 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [4.15.9](https://github.com/pie-framework/pie-lib/compare/@pie-lib/render-ui@4.15.8...@pie-lib/render-ui@4.15.9) (2023-10-03)
-
-
-### Bug Fixes
+## [4.16.1-beta.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/render-ui@4.15.9...@pie-lib/render-ui@4.16.1-beta.0) (2025-07-20)
 
-* revert to pie-lib/math-rendering that what working ([25660ea](https://github.com/pie-framework/pie-lib/commit/25660ea6595e800a71c5494bd3bb9eecd3609a5a))
+**Note:** Version bump only for package @pie-lib/render-ui
 
 
 
 
 
-## [4.15.8](https://github.com/pie-framework/pie-lib/compare/@pie-lib/render-ui@4.15.7...@pie-lib/render-ui@4.15.8) (2023-10-01)
+# [4.16.0-beta.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/render-ui@4.15.9...@pie-lib/render-ui@4.16.0-beta.0) (2025-07-20)
 
 **Note:** Version bump only for package @pie-lib/render-ui
 
@@ -22,105 +19,76 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 
 
-## [4.15.7](https://github.com/pie-framework/pie-lib/compare/@pie-lib/render-ui@4.15.6...@pie-lib/render-ui@4.15.7) (2023-09-27)
+# [4.17.0-beta.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/render-ui@4.15.9...@pie-lib/render-ui@4.17.0-beta.0) (2025-07-15)
 
 **Note:** Version bump only for package @pie-lib/render-ui
 
+# [4.16.0-beta.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/render-ui@4.15.9...@pie-lib/render-ui@4.16.0-beta.0) (2025-07-15)
 
+**Note:** Version bump only for package @pie-lib/render-ui
 
+## [4.15.9](https://github.com/pie-framework/pie-lib/compare/@pie-lib/render-ui@4.15.8...@pie-lib/render-ui@4.15.9) (2023-10-03)
 
+### Bug Fixes
 
-## [4.15.6](https://github.com/pie-framework/pie-lib/compare/@pie-lib/render-ui@4.15.5...@pie-lib/render-ui@4.15.6) (2023-09-27)
+- revert to pie-lib/math-rendering that what working ([25660ea](https://github.com/pie-framework/pie-lib/commit/25660ea6595e800a71c5494bd3bb9eecd3609a5a))
+
+## [4.15.8](https://github.com/pie-framework/pie-lib/compare/@pie-lib/render-ui@4.15.7...@pie-lib/render-ui@4.15.8) (2023-10-01)
 
 **Note:** Version bump only for package @pie-lib/render-ui
 
+## [4.15.7](https://github.com/pie-framework/pie-lib/compare/@pie-lib/render-ui@4.15.6...@pie-lib/render-ui@4.15.7) (2023-09-27)
 
+**Note:** Version bump only for package @pie-lib/render-ui
 
+## [4.15.6](https://github.com/pie-framework/pie-lib/compare/@pie-lib/render-ui@4.15.5...@pie-lib/render-ui@4.15.6) (2023-09-27)
 
+**Note:** Version bump only for package @pie-lib/render-ui
 
 ## [4.15.5](https://github.com/pie-framework/pie-lib/compare/@pie-lib/render-ui@4.15.4...@pie-lib/render-ui@4.15.5) (2023-09-25)
 
 **Note:** Version bump only for package @pie-lib/render-ui
 
-
-
-
-
 ## [4.15.4](https://github.com/pie-framework/pie-lib/compare/@pie-lib/render-ui@4.15.3...@pie-lib/render-ui@4.15.4) (2023-09-20)
 
 **Note:** Version bump only for package @pie-lib/render-ui
 
-
-
-
-
 ## [4.15.3](https://github.com/pie-framework/pie-lib/compare/@pie-lib/render-ui@4.15.2...@pie-lib/render-ui@4.15.3) (2023-09-20)
 
 **Note:** Version bump only for package @pie-lib/render-ui
 
-
-
-
-
 ## [4.15.2](https://github.com/pie-framework/pie-lib/compare/@pie-lib/render-ui@4.15.1...@pie-lib/render-ui@4.15.2) (2023-09-14)
 
 **Note:** Version bump only for package @pie-lib/render-ui
 
-
-
-
-
 ## [4.15.1](https://github.com/pie-framework/pie-lib/compare/@pie-lib/render-ui@4.15.0...@pie-lib/render-ui@4.15.1) (2023-08-21)
 
-
 ### Bug Fixes
 
-* **render-ui:** DNA-17953 - avoid fontSize to fave initial value, avoid margins fot p elements ([3bdf0cf](https://github.com/pie-framework/pie-lib/commit/3bdf0cfa0ff343444b387b4840e904d76b27b41a))
-
-
-
-
+- **render-ui:** DNA-17953 - avoid fontSize to fave initial value, avoid margins fot p elements ([3bdf0cf](https://github.com/pie-framework/pie-lib/commit/3bdf0cfa0ff343444b387b4840e904d76b27b41a))
 
 # [4.15.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/render-ui@4.14.29...@pie-lib/render-ui@4.15.0) (2023-08-15)
 
-
 ### Features
 
-* **text-select:** adjust colors and alignment of the color ([a51ba55](https://github.com/pie-framework/pie-lib/commit/a51ba5547f6e1559915d6ea967d406923831b561))
-* **text-select:** PD-1163 create wrapper component ([b41db39](https://github.com/pie-framework/pie-lib/commit/b41db39ade332d19dca70a06d54acf51b5888c69))
-* **text-select:** PD-1163 updates to tokens in text select ([2535c91](https://github.com/pie-framework/pie-lib/commit/2535c911f378f4cf41c8471bfa1898b996ffacee))
-
-
-
-
+- **text-select:** adjust colors and alignment of the color ([a51ba55](https://github.com/pie-framework/pie-lib/commit/a51ba5547f6e1559915d6ea967d406923831b561))
+- **text-select:** PD-1163 create wrapper component ([b41db39](https://github.com/pie-framework/pie-lib/commit/b41db39ade332d19dca70a06d54acf51b5888c69))
+- **text-select:** PD-1163 updates to tokens in text select ([2535c91](https://github.com/pie-framework/pie-lib/commit/2535c911f378f4cf41c8471bfa1898b996ffacee))
 
 ## [4.14.29](https://github.com/pie-framework/pie-lib/compare/@pie-lib/render-ui@4.14.28...@pie-lib/render-ui@4.14.29) (2023-07-24)
 
-
 ### Bug Fixes
 
-* **render-ui:** answer choices answered rendered in a smaller font-size ([e7503e0](https://github.com/pie-framework/pie-lib/commit/e7503e029ed6872098646e8787e124f2d6a8a018))
-
-
-
-
+- **render-ui:** answer choices answered rendered in a smaller font-size ([e7503e0](https://github.com/pie-framework/pie-lib/commit/e7503e029ed6872098646e8787e124f2d6a8a018))
 
 ## [4.14.28](https://github.com/pie-framework/pie-lib/compare/@pie-lib/render-ui@4.14.27...@pie-lib/render-ui@4.14.28) (2023-06-24)
 
 **Note:** Version bump only for package @pie-lib/render-ui
 
-
-
-
-
 ## [4.14.27](https://github.com/pie-framework/pie-lib/compare/@pie-lib/render-ui@4.14.26...@pie-lib/render-ui@4.14.27) (2023-06-13)
 
 **Note:** Version bump only for package @pie-lib/render-ui
 
-
-
-
-
 ## [4.14.26](https://github.com/pie-framework/pie-lib/compare/@pie-lib/render-ui@4.14.25...@pie-lib/render-ui@4.14.26) (2023-06-12)
 
 **Note:** Version bump only for package @pie-lib/render-ui

package/NEXT.CHANGELOG.json

@@ -0,0 +1 @@
+[]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pie-lib/render-ui",
-  "version": "4.15.10-next.1+23991a09",
+  "version": "4.16.1-beta.0",
   "description": "Some shared ui elements when rendering - but not worthy of their own package yet.",
   "module": "src/index.js",
   "main": "lib/index.js",
@@ -11,10 +11,12 @@
   "dependencies": {
     "@material-ui/core": "^3.8.3",
     "@material-ui/icons": "^3.0.2",
-    "@pie-lib/icons": "^2.4.43",
-    "@pie-lib/math-rendering": "2.5.18",
+    "@pie-lib/icons": "^2.5.1-beta.0",
+    "@pie-lib/math-rendering": "^3.3.1-beta.0",
+    "@pie-lib/test-utils": "beta",
     "classnames": "^2.2.6",
     "debug": "^4.1.1",
+    "lodash": "^4.17.11",
     "prop-types": "^15.7.2",
     "react-transition-group": "^2.5.2"
   },
@@ -26,5 +28,5 @@
     "react": "^16.8.1",
     "react-dom": "^16.8.1"
   },
-  "gitHead": "23991a09b77492c24dcb5235049667cdcc211d80"
+  "gitHead": "e2aa3ddac60f49bcb8c2562370f496323642f453"
 }

package/src/__tests__/__snapshots__/html-and-math.test.js.snap

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`html-and-math render renders 1`] = `
+<div
+  dangerouslySetInnerHTML={
+    Object {
+      "__html": "<p>hi</p>",
+    }
+  }
+/>
+`;

package/src/__tests__/__snapshots__/preview-prompt.test.jsx.snap

@@ -0,0 +1,37 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Prompt with Custom tag  renders with custom tag "span" correctly renders 1`] = `
+<PreviewPrompt
+  className="prompt"
+  classes={
+    Object {
+      "label": "PreviewPrompt-label-4",
+      "legend": "PreviewPrompt-legend-2",
+      "prompt": "PreviewPrompt-prompt-1",
+      "promptTable": "PreviewPrompt-promptTable-5",
+      "rationale": "PreviewPrompt-rationale-3",
+    }
+  }
+  onClick={[Function]}
+  prompt="Which of these northern European countries are EU members? <math><mstack><msrow><mn>111</mn></msrow><msline/></mstack></math>"
+  tagName="span"
+/>
+`;
+
+exports[`Prompt without Custom tag  default class with markup renders 1`] = `
+<PreviewPrompt
+  className=""
+  classes={
+    Object {
+      "label": "PreviewPrompt-label-4",
+      "legend": "PreviewPrompt-legend-2",
+      "prompt": "PreviewPrompt-prompt-1",
+      "promptTable": "PreviewPrompt-promptTable-5",
+      "rationale": "PreviewPrompt-rationale-3",
+    }
+  }
+  onClick={[Function]}
+  prompt="Which of these northern European countries are EU members? <math><mstack><msrow><mn>111</mn></msrow><msline/></mstack></math>"
+  tagName=""
+/>
+`;

package/src/__tests__/__snapshots__/purpose.test.jsx.snap

@@ -0,0 +1,42 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Purpose renders fine renders child unaltered 1`] = `
+<Purpose
+  purpose="passage"
+>
+  <div
+    data-pie-purpose="passage"
+    key=".0"
+  >
+    text
+  </div>
+</Purpose>
+`;
+
+exports[`Purpose renders fine renders child unaltered without purpose prop 1`] = `
+<Purpose>
+  <div
+    key=".0"
+  >
+    text
+  </div>
+</Purpose>
+`;
+
+exports[`Purpose renders fine renders children unaltered 1`] = `
+<Purpose
+  purpose="something"
+>
+  <div
+    data-pie-purpose="something"
+    key=".0"
+  >
+    <div>
+      text1
+    </div>
+    <div>
+      text2
+    </div>
+  </div>
+</Purpose>
+`;

package/src/__tests__/__snapshots__/readable.test.jsx.snap

@@ -0,0 +1,64 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Readable renders fine renders child unaltered 1`] = `
+<Readable>
+  <div
+    data-pie-readable={true}
+    key=".0"
+  >
+    text
+  </div>
+</Readable>
+`;
+
+exports[`Readable renders fine renders children unaltered 1`] = `
+<Readable>
+  <div
+    data-pie-readable={true}
+    key=".0"
+  >
+    <div>
+      text1
+    </div>
+    <div>
+      text2
+    </div>
+  </div>
+</Readable>
+`;
+
+exports[`Readable renders fine renders even with specific true tag 1`] = `
+<Readable
+  false={true}
+>
+  <div
+    data-pie-readable={false}
+    key=".0"
+  >
+    <div>
+      text1
+    </div>
+    <div>
+      text2
+    </div>
+  </div>
+</Readable>
+`;
+
+exports[`Readable renders fine renders with false tag 1`] = `
+<Readable
+  false={true}
+>
+  <div
+    data-pie-readable={false}
+    key=".0"
+  >
+    <div>
+      text1
+    </div>
+    <div>
+      text2
+    </div>
+  </div>
+</Readable>
+`;

package/src/__tests__/__snapshots__/response-indicators.test.jsx.snap

@@ -0,0 +1,95 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`response-indicators snapshot  - no feedback  1`] = `
+<div>
+  <span
+    onClick={[Function]}
+  >
+    <div
+      style={
+        Object {
+          "display": "inline-block",
+          "height": "30px",
+          "position": "relative",
+          "width": "30px",
+        }
+      }
+    >
+      <svg
+        preserveAspectRatio="xMinYMin meet"
+        style={
+          Object {
+            "enableBackground": "new 0 0 44 40",
+          }
+        }
+        version="1.1"
+        viewBox="0 0 44 40"
+        x="0px"
+        y="0px"
+      >
+         
+        <circle
+          className="IconBase-bg-5"
+          cx="23"
+          cy="20.4"
+          r="16"
+          transform="translate(-3, 0)"
+        />
+        <polygon
+          className="IconBase-fg-6"
+          points="19.1,28.6 11.8,22.3 14.4,19.2 17.9,22.1 23.9,11.4 27.5,13.4"
+          transform="translate(0, 0)"
+        />
+      </svg>
+    </div>
+  </span>
+</div>
+`;
+
+exports[`response-indicators snapshot  - with feedback  1`] = `
+<div
+  className="RawIndicator-responseIndicator-1"
+>
+  <span
+    onClick={[Function]}
+  >
+    <div
+      style={
+        Object {
+          "display": "inline-block",
+          "height": "30px",
+          "position": "relative",
+          "width": "30px",
+        }
+      }
+    >
+      <svg
+        preserveAspectRatio="xMinYMin meet"
+        style={
+          Object {
+            "enableBackground": "new 0 0 44 40",
+          }
+        }
+        version="1.1"
+        viewBox="0 0 44 40"
+        x="0px"
+        y="0px"
+      >
+         
+        <circle
+          className="IconBase-bg-5"
+          cx="23"
+          cy="20.4"
+          r="16"
+          transform="translate(-3, 0)"
+        />
+        <polygon
+          className="IconBase-fg-6"
+          points="19.1,28.6 11.8,22.3 14.4,19.2 17.9,22.1 23.9,11.4 27.5,13.4"
+          transform="translate(0, 0)"
+        />
+      </svg>
+    </div>
+  </span>
+</div>
+`;

package/src/__tests__/color.test.js

@@ -0,0 +1,12 @@
+import { v } from '../color';
+describe('v', () => {
+  it.each`
+    args                                 | expected
+    ${['text', 'black']}                 | ${'var(--pie-text, black)'}
+    ${['primary-text', 'text', 'black']} | ${'var(--pie-primary-text, var(--pie-text, black))'}
+    ${['black']}                         | ${'black'}
+    ${['#00ff00']}                       | ${'#00ff00'}
+  `('$args => $expected', ({ args, expected }) => {
+    expect(v('pie')(...args)).toEqual(expected);
+  });
+});

package/src/__tests__/has-media.test.js

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { hasMedia } from '../has-media'; // Assuming you have a hasMedia function
+
+describe('hasMedia', () => {
+  it.each`
+    input                                     | expected
+    ${'<img src="image.jpg" />'}              | ${true}
+    ${'<audio src="audio.mp3" />'}            | ${true}
+    ${'<div><img src="image.jpg" /></div>'}   | ${true}
+    ${'<div><audio src="audio.mp3" /></div>'} | ${true}
+    ${'<div>No media here</div>'}             | ${false}
+    ${'<div></div>'}                          | ${false}
+    ${' '}                                    | ${false}
+    ${null}                                   | ${false}
+  `('$input -> $expected', ({ input, expected }) => {
+    const output = hasMedia(input);
+
+    expect(output).toEqual(expected);
+  });
+});

package/src/__tests__/has-text.test.js

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { hasText } from '../has-text';
+
+describe('has-text', () => {
+  it.each`
+    input                     | expected
+    ${'<div>Rationale</div>'} | ${true}
+    ${'Rationale'}            | ${true}
+    ${'<div>hi</div>'}        | ${true}
+    ${'<div>hi'}              | ${true}
+    ${'<div></div>'}          | ${false}
+    ${'<div>  </div>'}        | ${false}
+    ${'<div><br />   </div>'} | ${false}
+    ${' '}                    | ${false}
+    ${null}                   | ${false}
+  `('$input -> $expected', ({ input, expected }) => {
+    const output = hasText(input);
+
+    expect(output).toEqual(expected);
+  });
+});

package/src/__tests__/html-and-math.test.js

@@ -0,0 +1,46 @@
+import HtmlAndMath from '../html-and-math';
+import { shallow } from 'enzyme';
+import React from 'react';
+import { renderMath } from '@pie-lib/math-rendering';
+
+jest.mock('@pie-lib/math-rendering', () => ({ renderMath: jest.fn() }));
+
+describe('html-and-math', () => {
+  const mkWrapper = (extras) => {
+    const props = {
+      html: '<p>hi</p>',
+      ...extras,
+    };
+
+    return shallow(<HtmlAndMath {...props} />, {
+      disableLifecycleMethods: true,
+    });
+  };
+
+  describe('render', () => {
+    it('renders', () => {
+      const w = mkWrapper();
+
+      expect(w).toMatchSnapshot();
+    });
+  });
+
+  describe('componentDidMount', () => {
+    it('calls renderMath', () => {
+      const w = mkWrapper();
+      //mock the ref
+      w.instance().node = { node: true };
+      w.instance().componentDidMount();
+      expect(renderMath).toHaveBeenCalled();
+    });
+  });
+  describe('componentDidUpdate', () => {
+    it('calls renderMath', () => {
+      const w = mkWrapper();
+      //mock the ref
+      w.instance().node = { node: true };
+      w.instance().componentDidUpdate();
+      expect(renderMath).toHaveBeenCalled();
+    });
+  });
+});

package/src/__tests__/preview-prompt.test.jsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import PreviewPrompt from '../preview-prompt';
+
+describe('Prompt without Custom tag ', () => {
+  let wrapper;
+  let mkWrapper = (opts) => {
+    opts = {
+      classes: {},
+      prompt:
+        'Which of these northern European countries are EU members? <math><mstack><msrow><mn>111</mn></msrow><msline/></mstack></math>',
+      tagName: '',
+      className: '',
+      ...opts,
+    };
+
+    return shallow(<PreviewPrompt {...opts} />);
+  };
+
+  beforeEach(() => {
+    wrapper = mkWrapper();
+  });
+
+  describe('default class with markup', () => {
+    it('renders', () => {
+      expect(wrapper.hasClass('prompt')).toEqual(false);
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
+});
+
+describe('Prompt with Custom tag ', () => {
+  let wrapper;
+  let mkWrapper = (opts) => {
+    opts = {
+      classes: {},
+      prompt:
+        'Which of these northern European countries are EU members? <math><mstack><msrow><mn>111</mn></msrow><msline/></mstack></math>',
+      tagName: '',
+      className: '',
+      ...opts,
+    };
+    return shallow(<PreviewPrompt {...opts} />);
+  };
+
+  beforeEach(() => {
+    wrapper = mkWrapper({ tagName: 'span', className: 'prompt' });
+  });
+
+  describe('renders with custom tag "span" correctly', () => {
+    it('renders', () => {
+      expect(wrapper.hasClass('prompt')).toEqual(true);
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
+});

package/src/__tests__/purpose.test.jsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import Purpose from '../purpose';
+
+describe('Purpose', () => {
+  let wrapper;
+
+  describe('renders fine', () => {
+    it('renders child unaltered without purpose prop', () => {
+      wrapper = mount(
+        <Purpose>
+          <div>text</div>
+        </Purpose>,
+      );
+      expect(wrapper.find('div')).toHaveLength(1);
+      expect(wrapper.html().includes('data-pie-purpose=""')).toEqual(false);
+      expect(wrapper.html().includes('text')).toEqual(true);
+      expect(wrapper).toMatchSnapshot();
+    });
+    it('renders child unaltered', () => {
+      wrapper = mount(
+        <Purpose purpose="passage">
+          <div>text</div>
+        </Purpose>,
+      );
+      expect(wrapper.find('div')).toHaveLength(1);
+      expect(wrapper.html().includes('data-pie-purpose="passage"')).toEqual(true);
+      expect(wrapper.html().includes('text')).toEqual(true);
+      expect(wrapper).toMatchSnapshot();
+    });
+    it('renders children unaltered', () => {
+      wrapper = mount(
+        <Purpose purpose="something">
+          <div>
+            <div>text1</div>
+            <div>text2</div>
+          </div>
+        </Purpose>,
+      );
+      expect(wrapper.find('div')).toHaveLength(3);
+      expect(wrapper.html().includes('data-pie-purpose="something"')).toEqual(true);
+      expect(wrapper.html().includes('text1')).toEqual(true);
+      expect(wrapper.html().includes('text3')).toEqual(false);
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
+});