@pie-lib/icons 4.0.3-next.0 → 4.0.3-next.57

package/src/nothing-submitted-icon.jsx

@@ -0,0 +1,136 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { IconRoot } from './icon-root';
+
+// Exclamation mark
+const Exclamation = ({ fill }) => (
+  <g>
+    <rect x="19.3" y="10.3" width="4.5" height="12.7" fill={fill} />
+    <rect x="19.3" y="26.2" width="4.5" height="4.5" fill={fill} />
+  </g>
+);
+
+Exclamation.propTypes = { fill: PropTypes.string.isRequired };
+
+// Octagon background
+const Octagon = ({ fill }) => (
+  <polygon points="14.8,4.5 5.6,13.8 5.6,27 14.8,36.5 28.1,36.5 37.6,27 37.6,13.8 28.1,4.5" fill={fill} />
+);
+
+Octagon.propTypes = { fill: PropTypes.string.isRequired };
+
+// Emoji variant
+const Emoji = ({ fill }) => (
+  <g>
+    <rect x="23.8" y="15" width="3.5" height="4.4" fill={fill} />
+    <rect x="16" y="15" width="3.5" height="4.4" fill={fill} />
+    <path
+      d="M24.2,27.1h-5.1c-0.8,0-1.5-0.7-1.5-1.5v0c0-0.8,0.7-1.5,1.5-1.5h5.1c0.8,0,1.5,0.7,1.5,1.5v0
+         C25.7,26.4,25,27.1,24.2,27.1z"
+      fill={fill}
+    />
+  </g>
+);
+
+Emoji.propTypes = { fill: PropTypes.string.isRequired };
+
+// Exported NothingSubmitted icon
+export class NothingSubmitted extends React.Component {
+  constructor(props) {
+    super(props);
+    const { fg = '#464146', bg = 'white' } = this.props;
+
+    this.icons = {
+      check: (
+        <IconRoot>
+          <Octagon fill={bg} />
+          <Exclamation fill={fg} />
+        </IconRoot>
+      ),
+      emoji: (
+        <IconRoot>
+          <Octagon fill={bg} />
+          <Emoji fill={fg} />
+        </IconRoot>
+      ),
+      feedback: {
+        check: (
+          <IconRoot>
+            <Octagon fill={bg} />
+            <Emoji fill={fg} />
+          </IconRoot>
+        ),
+        emoji: (
+          <IconRoot>
+            <Octagon fill={bg} />
+            <Emoji fill={fg} />
+          </IconRoot>
+        ),
+        square: {
+          check: (
+            <IconRoot>
+              <Octagon fill={bg} />
+              <Exclamation fill={fg} />
+            </IconRoot>
+          ),
+          emoji: (
+            <IconRoot>
+              <Octagon fill={bg} />
+              <Emoji fill={fg} />
+            </IconRoot>
+          ),
+          open: {
+            check: (
+              <IconRoot>
+                <Exclamation fill={bg} />
+              </IconRoot>
+            ),
+            emoji: (
+              <IconRoot>
+                <Emoji fill={bg} />
+              </IconRoot>
+            ),
+          },
+        },
+      },
+    };
+  }
+
+  render() {
+    const { iconSet, category, shape, open } = this.props;
+
+    if (category === undefined) {
+      return this.icons[iconSet];
+    } else {
+      if (shape === undefined) {
+        return this.icons.feedback[iconSet];
+      } else {
+        if (open === true) {
+          return this.icons.feedback.square.open[iconSet];
+        } else {
+          return this.icons.feedback.square[iconSet];
+        }
+      }
+    }
+  }
+}
+
+NothingSubmitted.propTypes = {
+  iconSet: PropTypes.oneOf(['emoji', 'check', undefined]),
+  shape: PropTypes.oneOf(['square', undefined]),
+  category: PropTypes.oneOf(['feedback', undefined]),
+  open: PropTypes.bool,
+  fg: PropTypes.string,
+  bg: PropTypes.string,
+};
+
+NothingSubmitted.defaultProps = {
+  iconSet: 'check',
+  shape: undefined,
+  category: undefined,
+  open: false,
+  fg: '#464146', // foreground color
+  bg: 'white', // background color
+};
+
+export default NothingSubmitted;

package/src/partially-correct-icon.jsx

@@ -0,0 +1,56 @@
+import IconBase from './icon-base';
+import PropTypes from 'prop-types';
+import React from 'react';
+
+// Check mark SVG
+const Check = ({ fill }) => (
+  <g transform="translate(0, 0)">
+    <polygon points="27.5,13.4 23.9,11.4 15.9,25.8 19.1,28.6" fill={fill} />
+    <polygon points="16.2,20.6 14.4,19.2 11.8,22.3 14.1,24.3" fill={fill} />
+  </g>
+);
+
+Check.propTypes = { fill: PropTypes.string.isRequired };
+
+// Emoji variant
+const Emoji = ({ fill }) => (
+  <g transform="translate(2, 0)">
+    <rect x="20.6" y="11.8" width="4" height="5" fill={fill} />
+    <rect x="11.5" y="11.8" width="4" height="5" fill={fill} />
+    <rect
+      x="10.9"
+      y="22.9"
+      transform="matrix(0.9794 -0.2019 0.2019 0.9794 -4.6237 4.1559)"
+      width="14.3"
+      height="3.7"
+      fill={fill}
+    />
+  </g>
+);
+
+Emoji.propTypes = { fill: PropTypes.string.isRequired };
+
+// Exported PartiallyCorrect icon
+export const PartiallyCorrect = IconBase(Check, Emoji);
+
+PartiallyCorrect.propTypes = {
+  iconSet: PropTypes.oneOf(['emoji', 'check']),
+  shape: PropTypes.oneOf(['round', 'square']),
+  category: PropTypes.oneOf(['feedback', undefined]),
+  open: PropTypes.bool,
+  fg: PropTypes.string,
+  bg: PropTypes.string,
+  size: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+};
+
+PartiallyCorrect.defaultProps = {
+  iconSet: 'check',
+  shape: 'round',
+  category: undefined,
+  open: false,
+  fg: '#4aaf46', // foreground color
+  bg: '#c1e1ac', // background color
+  size: 30,
+};
+
+export default PartiallyCorrect;

package/src/show-rationale-icon.jsx

@@ -0,0 +1,145 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { normalizeSize } from './sized';
+
+// Info icon
+const Info = ({ fill }) => (
+  <g>
+    <rect x="-115" y="136.7" width="3" height="3" fill={fill} />
+    <polygon
+      points="-112,147.7 -112,141.7 -115.8,141.7 -115.8,143.7 -114,143.7 -114,147.7 -116.2,147.7 -116.2,149.7 -109.8,149.7 -109.8,147.7"
+      fill={fill}
+    />
+  </g>
+);
+
+Info.propTypes = { fill: PropTypes.string.isRequired };
+
+// Border path
+const Border = ({ fill }) => (
+  <path
+    d="M-113,158.5c-8,0-14.5-6.5-14.5-14.5s6.5-14.5,14.5-14.5s14.5,6.5,14.5,14.5S-105,158.5-113,158.5z
+       M-113,130.5c-7.4,0-13.5,6.1-13.5,13.5s6.1,13.5,13.5,13.5s13.5-6.1,13.5-13.5S-105.6,130.5-113,130.5z"
+    fill={fill}
+  />
+);
+
+Border.propTypes = { fill: PropTypes.string.isRequired };
+
+// Circle background
+const Circle = ({ fill = '#FFFFFF' }) => (
+  <g>
+    <path
+      style={{
+        fill: '#D0CAC5',
+        stroke: '#E6E3E0',
+        strokeWidth: 0.75,
+        strokeMiterlimit: 10,
+      }}
+      d="M-111.7,160.9c-8.5,0-15.5-6.9-15.5-15.5c0-8.5,6.9-15.5,15.5-15.5s15.5,6.9,15.5,15.5C-96.2,154-103.1,160.9-111.7,160.9z"
+    />
+    <path
+      style={{
+        fill: '#B3ABA4',
+        stroke: '#CDC7C2',
+        strokeWidth: 0.5,
+        strokeMiterlimit: 10,
+      }}
+      d="M-112,159.5c-8,0-14.5-6.5-14.5-14.5s6.5-14.5,14.5-14.5s14.5,6.5,14.5,14.5S-104,159.5-112,159.5z"
+    />
+    <circle cx="-113" cy="144" r="14" fill={fill} />
+  </g>
+);
+
+Circle.propTypes = { fill: PropTypes.string };
+
+// Root wrapper for sizing
+const Root = ({ children, size }) => {
+  const normalizedSize = normalizeSize(size);
+  const style = {
+    height: normalizedSize,
+    width: normalizedSize,
+    display: 'inline-block',
+    position: 'relative',
+  };
+  return (
+    <div style={style}>
+      <svg preserveAspectRatio="xMinYMin meet" viewBox="-129 128 34 34">
+        {children}
+      </svg>
+    </div>
+  );
+};
+
+Root.propTypes = {
+  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
+  size: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+};
+
+// Main ShowRationale component
+export class ShowRationale extends React.Component {
+  render() {
+    const { iconSet, open, fg = '#1a9cff', bg = '#bce2ff', border = '#bbe3fd' } = this.props;
+
+    const info = <Info fill={fg} />;
+
+    const icons = {
+      check: (
+        <Root size={this.props.size}>
+          <Circle />
+          {info}
+          <Border fill={border} />
+        </Root>
+      ),
+      emoji: (
+        <Root size={this.props.size}>
+          <Circle />
+          {info}
+          <Border fill={border} />
+        </Root>
+      ),
+      open: {
+        check: (
+          <Root size={this.props.size}>
+            <circle cx="-113" cy="144" r="14" fill="#FFFFFF" />
+            <Info fill={bg} />
+            <Border fill="#FFFFFF" />
+          </Root>
+        ),
+        emoji: (
+          <Root size={this.props.size}>
+            <circle cx="-113" cy="144" r="14" fill="#FFFFFF" />
+            <Info fill={bg} />
+            <Border fill={border} />
+          </Root>
+        ),
+      },
+    };
+
+    if (open === true) {
+      return icons.open[iconSet];
+    } else {
+      return icons[iconSet];
+    }
+  }
+}
+
+ShowRationale.propTypes = {
+  iconSet: PropTypes.oneOf(['emoji', 'check']),
+  open: PropTypes.bool,
+  fg: PropTypes.string,
+  bg: PropTypes.string,
+  border: PropTypes.string,
+  size: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+};
+
+ShowRationale.defaultProps = {
+  iconSet: 'check',
+  open: false,
+  fg: '#1a9cff',
+  bg: '#bce2ff',
+  border: '#bbe3fd',
+  size: 30,
+};
+
+export default ShowRationale;

package/src/sized.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export const normalizeSize = (size) => {
+  return typeof size === 'string' ? size : typeof size === 'number' ? `${size}px` : '30px';
+};
+
+const Sized = ({ size, children }) => {
+  size = normalizeSize(size);
+
+  const style = {
+    height: size,
+    width: size,
+    display: 'inline-block',
+    position: 'relative',
+  };
+
+  return <div style={style}>{children}</div>;
+};
+
+Sized.propTypes = {
+  size: PropTypes.number,
+  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
+};
+export default Sized;

package/dist/correct-icon.d.ts

@@ -1,78 +0,0 @@
-/**
- * @synced-from pie-lib/packages/icons/src/correct-icon.jsx
- * @auto-generated
- *
- * This file is automatically synced from pie-elements and converted to TypeScript.
- * Manual edits will be overwritten on next sync.
- * To make changes, edit the upstream JavaScript file and run sync again.
- */
-import PropTypes from 'prop-types';
-import React from 'react';
-export declare const Correct: {
-    new (props: {}): {
-        render(): React.JSX.Element;
-        context: unknown;
-        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<{}>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
-        forceUpdate(callback?: (() => void) | undefined): void;
-        readonly props: Readonly<{}>;
-        state: Readonly<{}>;
-        refs: {
-            [key: string]: React.ReactInstance;
-        };
-        componentDidMount?(): void;
-        shouldComponentUpdate?(nextProps: Readonly<{}>, nextState: Readonly<{}>, nextContext: any): boolean;
-        componentWillUnmount?(): void;
-        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
-        getSnapshotBeforeUpdate?(prevProps: Readonly<{}>, prevState: Readonly<{}>): any;
-        componentDidUpdate?(prevProps: Readonly<{}>, prevState: Readonly<{}>, snapshot?: any): void;
-        componentWillMount?(): void;
-        UNSAFE_componentWillMount?(): void;
-        componentWillReceiveProps?(nextProps: Readonly<{}>, nextContext: any): void;
-        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<{}>, nextContext: any): void;
-        componentWillUpdate?(nextProps: Readonly<{}>, nextState: Readonly<{}>, nextContext: any): void;
-        UNSAFE_componentWillUpdate?(nextProps: Readonly<{}>, nextState: Readonly<{}>, nextContext: any): void;
-    };
-    new (props: {}, context: any): {
-        render(): React.JSX.Element;
-        context: unknown;
-        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<{}>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
-        forceUpdate(callback?: (() => void) | undefined): void;
-        readonly props: Readonly<{}>;
-        state: Readonly<{}>;
-        refs: {
-            [key: string]: React.ReactInstance;
-        };
-        componentDidMount?(): void;
-        shouldComponentUpdate?(nextProps: Readonly<{}>, nextState: Readonly<{}>, nextContext: any): boolean;
-        componentWillUnmount?(): void;
-        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
-        getSnapshotBeforeUpdate?(prevProps: Readonly<{}>, prevState: Readonly<{}>): any;
-        componentDidUpdate?(prevProps: Readonly<{}>, prevState: Readonly<{}>, snapshot?: any): void;
-        componentWillMount?(): void;
-        UNSAFE_componentWillMount?(): void;
-        componentWillReceiveProps?(nextProps: Readonly<{}>, nextContext: any): void;
-        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<{}>, nextContext: any): void;
-        componentWillUpdate?(nextProps: Readonly<{}>, nextState: Readonly<{}>, nextContext: any): void;
-        UNSAFE_componentWillUpdate?(nextProps: Readonly<{}>, nextState: Readonly<{}>, nextContext: any): void;
-    };
-    propTypes: {
-        iconSet: PropTypes.Requireable<string>;
-        shape: PropTypes.Requireable<string>;
-        category: PropTypes.Requireable<string | undefined>;
-        open: PropTypes.Requireable<boolean>;
-        size: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
-        fg: PropTypes.Requireable<string>;
-        bg: PropTypes.Requireable<string>;
-    };
-    defaultProps: {
-        iconSet: string;
-        shape: string;
-        category: undefined;
-        open: boolean;
-        size: number;
-        fg: string;
-        bg: string;
-    };
-    contextType?: React.Context<any> | undefined;
-};
-export default Correct;

package/dist/correct-icon.js

@@ -1,59 +0,0 @@
-import e from "./icon-base.js";
-import "react";
-import t from "prop-types";
-import { jsx as n, jsxs as r } from "react/jsx-runtime";
-//#region src/correct-icon.tsx
-var i = ({ fill: e }) => /* @__PURE__ */ r("g", {
-	transform: "translate(1, 0)",
-	children: [
-		/* @__PURE__ */ n("path", {
-			d: "M24.7,22.1c-1.5,1.7-3.6,2.7-5.8,2.7s-4.5-1.1-5.8-2.7l-2.8,1.6c2,2.7,5.2,4.2,8.7,4.2\n         c3.4,0,6.6-1.6,8.7-4.2L24.7,22.1z",
-			fill: e
-		}),
-		/* @__PURE__ */ n("rect", {
-			x: "21.1",
-			y: "13.1",
-			width: "3.7",
-			height: "4.7",
-			fill: e
-		}),
-		/* @__PURE__ */ n("rect", {
-			x: "12.7",
-			y: "13.1",
-			width: "3.7",
-			height: "4.7",
-			fill: e
-		})
-	]
-});
-i.propTypes = { fill: t.string.isRequired };
-var a = ({ fill: e, x: t = 0, y: r = 0 }) => /* @__PURE__ */ n("polygon", {
-	transform: `translate(${t}, ${r})`,
-	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",
-	fill: e
-});
-a.propTypes = {
-	fill: t.string.isRequired,
-	x: t.number,
-	y: t.number
-};
-var o = e(a, i);
-o.propTypes = {
-	iconSet: t.oneOf(["emoji", "check"]),
-	shape: t.oneOf(["round", "square"]),
-	category: t.oneOf(["feedback", void 0]),
-	open: t.bool,
-	fg: t.string,
-	bg: t.string,
-	size: t.oneOfType([t.string, t.number])
-}, o.defaultProps = {
-	iconSet: "check",
-	shape: "round",
-	category: void 0,
-	open: !1,
-	fg: "#4aaf46",
-	bg: "#f8ffe2",
-	size: 30
-};
-//#endregion
-export { o as default };

package/dist/correct-response-icon.d.ts

@@ -1,24 +0,0 @@
-/**
- * @synced-from pie-lib/packages/icons/src/correct-response-icon.jsx
- * @auto-generated
- *
- * This file is automatically synced from pie-elements and converted to TypeScript.
- * Manual edits will be overwritten on next sync.
- * To make changes, edit the upstream JavaScript file and run sync again.
- */
-import PropTypes from 'prop-types';
-import React from 'react';
-declare const CorrectResponse: {
-    ({ open, size }: {
-        open: any;
-        size: any;
-    }): React.JSX.Element;
-    propTypes: {
-        open: PropTypes.Requireable<boolean>;
-        size: PropTypes.Requireable<string>;
-    };
-    defaultProps: {
-        open: boolean;
-    };
-};
-export default CorrectResponse;

package/dist/correct-response-icon.js

@@ -1,96 +0,0 @@
-import "react";
-import e from "prop-types";
-import { jsx as t, jsxs as n } from "react/jsx-runtime";
-import { styled as r } from "@mui/material/styles";
-//#region src/correct-response-icon.tsx
-var i = ({ bgFill: e, fgFill: r }) => /* @__PURE__ */ n("svg", {
-	preserveAspectRatio: "xMinYMin meet",
-	version: "1.1",
-	viewBox: "-283 359 34 35",
-	style: { enableBackground: "new -283 359 34 35" },
-	children: [
-		/* @__PURE__ */ t("circle", {
-			cx: "-266",
-			cy: "375.9",
-			r: "14",
-			fill: e
-		}),
-		/* @__PURE__ */ t("path", {
-			d: "M-280.5,375.9c0-8,6.5-14.5,14.5-14.5s14.5,6.5,14.5,14.5s-6.5,14.5-14.5,14.5S-280.5,383.9-280.5,375.9z\n         M-279.5,375.9c0,7.4,6.1,13.5,13.5,13.5c7.4,0,13.5-6.1,13.5-13.5s-6.1-13.5-13.5-13.5C-273.4,362.4-279.5,368.5-279.5,375.9z",
-			fill: e
-		}),
-		/* @__PURE__ */ t("polygon", {
-			points: "-265.4,383.1 -258.6,377.2 -261.2,374.2 -264.3,376.9 -268.9,368.7 -272.4,370.6",
-			fill: r
-		})
-	]
-});
-i.propTypes = {
-	bgFill: e.string.isRequired,
-	fgFill: e.string.isRequired
-};
-var a = ({ bgFill: e, fgFill: r, borderFill: i }) => /* @__PURE__ */ n("svg", {
-	preserveAspectRatio: "xMinYMin meet",
-	version: "1.1",
-	viewBox: "-129.5 127 34 35",
-	style: { enableBackground: "new -129.5 127 34 35" },
-	children: [
-		/* @__PURE__ */ t("path", {
-			style: {
-				fill: "#D0CAC5",
-				stroke: "#E6E3E0",
-				strokeWidth: .75,
-				strokeMiterlimit: 10
-			},
-			d: "M-112.9,160.4c-8.5,0-15.5-6.9-15.5-15.5c0-8.5,6.9-15.5,15.5-15.5s15.5,6.9,15.5,15.5\n         C-97.4,153.5-104.3,160.4-112.9,160.4z"
-		}),
-		/* @__PURE__ */ t("path", {
-			style: {
-				fill: "#B3ABA4",
-				stroke: "#CDC7C2",
-				strokeWidth: .5,
-				strokeMiterlimit: 10
-			},
-			d: "M-113.2,159c-8,0-14.5-6.5-14.5-14.5s6.5-14.5,14.5-14.5s14.5,6.5,14.5,14.5S-105.2,159-113.2,159z"
-		}),
-		/* @__PURE__ */ t("circle", {
-			cx: "-114.2",
-			cy: "143.5",
-			r: "14",
-			fill: e
-		}),
-		/* @__PURE__ */ t("path", {
-			d: "M-114.2,158c-8,0-14.5-6.5-14.5-14.5s6.5-14.5,14.5-14.5s14.5,6.5,14.5,14.5S-106.2,158-114.2,158z\n         M-114.2,130c-7.4,0-13.5,6.1-13.5,13.5s6.1,13.5,13.5,13.5s13.5-6.1,13.5-13.5S-106.8,130-114.2,130z",
-			fill: i
-		}),
-		/* @__PURE__ */ t("polygon", {
-			points: "-114.8,150.7 -121.6,144.8 -119,141.8 -115.9,144.5 -111.3,136.3 -107.8,138.2",
-			fill: r
-		})
-	]
-});
-a.propTypes = {
-	bgFill: e.string.isRequired,
-	fgFill: e.string.isRequired,
-	borderFill: e.string.isRequired
-};
-var o = r("div")(({ size: e }) => ({
-	width: e || "25px",
-	height: e || "25px"
-})), s = ({ open: e, size: n }) => /* @__PURE__ */ t(o, {
-	size: n,
-	children: e ? /* @__PURE__ */ t(i, {
-		bgFill: "#bce2ff",
-		fgFill: "#1a9cff"
-	}) : /* @__PURE__ */ t(a, {
-		bgFill: "white",
-		fgFill: "#1a9cff",
-		borderFill: "#bce2ff"
-	})
-});
-s.propTypes = {
-	open: e.bool,
-	size: e.string
-}, s.defaultProps = { open: !1 };
-//#endregion
-export { s as default };