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

package/src/correct-response-icon.jsx

@@ -1,106 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import { styled } from '@mui/material/styles';
-
-// Open Icon
-const OpenIcon = ({ bgFill, fgFill }) => (
-  <svg
-    preserveAspectRatio="xMinYMin meet"
-    version="1.1"
-    viewBox="-283 359 34 35"
-    style={{ enableBackground: 'new -283 359 34 35' }}
-  >
-    <circle cx="-266" cy="375.9" r="14" fill={bgFill} />
-    <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
-         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={bgFill}
-    />
-    <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={fgFill} />
-  </svg>
-);
-
-OpenIcon.propTypes = {
-  bgFill: PropTypes.string.isRequired,
-  fgFill: PropTypes.string.isRequired,
-};
-
-// Close Icon
-const CloseIcon = ({ bgFill, fgFill, borderFill }) => (
-  <svg
-    preserveAspectRatio="xMinYMin meet"
-    version="1.1"
-    viewBox="-129.5 127 34 35"
-    style={{ enableBackground: 'new -129.5 127 34 35' }}
-  >
-    <path
-      style={{
-        fill: '#D0CAC5',
-        stroke: '#E6E3E0',
-        strokeWidth: 0.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
-         C-97.4,153.5-104.3,160.4-112.9,160.4z"
-    />
-    <path
-      style={{
-        fill: '#B3ABA4',
-        stroke: '#CDC7C2',
-        strokeWidth: 0.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"
-    />
-    <circle cx="-114.2" cy="143.5" r="14" fill={bgFill} />
-    <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
-         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={borderFill}
-    />
-    <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={fgFill} />
-  </svg>
-);
-
-CloseIcon.propTypes = {
-  bgFill: PropTypes.string.isRequired,
-  fgFill: PropTypes.string.isRequired,
-  borderFill: PropTypes.string.isRequired,
-};
-
-// Container for icon sizing
-const CorrectResponseContainer = styled('div')(({ size }) => ({
-  width: size || '25px',
-  height: size || '25px',
-}));
-
-// Main component
-const CorrectResponse = ({ open, size }) => {
-  // Colors can be customized or pulled from theme
-  const openBg = '#bce2ff';
-  const openFg = '#1a9cff';
-  const closeBg = 'white';
-  const closeFg = '#1a9cff';
-  const closeBorder = '#bce2ff';
-
-  return (
-    <CorrectResponseContainer size={size}>
-      {open ? (
-        <OpenIcon bgFill={openBg} fgFill={openFg} />
-      ) : (
-        <CloseIcon bgFill={closeBg} fgFill={closeFg} borderFill={closeBorder} />
-      )}
-    </CorrectResponseContainer>
-  );
-};
-
-CorrectResponse.propTypes = {
-  open: PropTypes.bool,
-  size: PropTypes.string,
-};
-
-CorrectResponse.defaultProps = {
-  open: false,
-};
-
-export default CorrectResponse;

package/src/icon-base.jsx

@@ -1,55 +0,0 @@
-import { Circle, IconRoot, RoundFeedbackBox, Square, SquareFeedbackBox } from './icon-root';
-import PropTypes from 'prop-types';
-import React from 'react';
-
-export default (Action, Emoji) => {
-  class IconBase extends React.Component {
-    static propTypes = {
-      iconSet: PropTypes.oneOf(['emoji', 'check']),
-      shape: PropTypes.oneOf(['round', 'square']),
-      category: PropTypes.oneOf(['feedback', undefined]),
-      open: PropTypes.bool,
-      size: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-      fg: PropTypes.string,
-      bg: PropTypes.string,
-    };
-
-    static defaultProps = {
-      iconSet: 'check',
-      shape: 'round',
-      category: undefined,
-      open: false,
-      size: 30,
-      fg: '#4aaf46',
-      bg: '#f8ffe2',
-    };
-
-    render() {
-      const { iconSet, shape, category, open, size, fg, bg } = this.props;
-
-      const Foreground = iconSet === 'check' ? <Action fill={fg} /> : <Emoji fill={fg} />;
-      const Background = iconSet === 'check' ? <Action fill={bg} /> : <Emoji fill={bg} />;
-
-      const getBox = () => {
-        if (category === 'feedback') {
-          return shape === 'round' ? <RoundFeedbackBox fill={bg} /> : <SquareFeedbackBox fill={bg} />;
-        } else {
-          return shape === 'round' ? <Circle fill={bg} /> : <Square fill={bg} />;
-        }
-      };
-
-      if (open) {
-        return <IconRoot size={size}>{Background}</IconRoot>;
-      }
-
-      return (
-        <IconRoot size={size}>
-          {getBox()}
-          {Foreground}
-        </IconRoot>
-      );
-    }
-  }
-
-  return IconBase;
-};

package/src/icon-root.jsx

@@ -1,53 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import Sized from './sized';
-
-export const normalizeSize = (size) => {
-  return typeof size === 'string' ? size : typeof size === 'number' ? `${size}px` : '30px';
-};
-
-export const IconRoot = ({ size, children, sx }) => (
-  <Sized size={size}>
-    <svg preserveAspectRatio="xMinYMin meet" viewBox="0 0 44 40" style={{ enableBackground: 'new 0 0 44 40', ...sx }}>
-      {children}
-    </svg>
-  </Sized>
-);
-
-IconRoot.propTypes = {
-  size: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
-  sx: PropTypes.object,
-};
-
-// Feedback / shapes
-export const Tick = ({ fill }) => (
-  <polygon points="17.4,26.9 10.1,20.6 12.8,17.5 16.3,20.5 22.3,9.7 25.9,11.7" fill={fill} />
-);
-
-Tick.propTypes = { fill: PropTypes.string.isRequired };
-
-export const SquareFeedbackBox = ({ fill }) => (
-  <polygon transform="translate(2, 0)" points="34.1,28.6 34.1,2.2 2,2.2 2,34.3 40.1,34.3" fill={fill} />
-);
-SquareFeedbackBox.propTypes = { fill: PropTypes.string.isRequired };
-
-export const RoundFeedbackBox = ({ fill }) => (
-  <path
-    transform="translate(1, 0)"
-    d="M31.2,29.1v-0.3c2.2-2.8,3.6-6.3,3.6-10.1c0-8.9-7.2-16.1-16.1-16.1c-8.8,0.1-16,7.3-16,16.2 s7.2,16.1,16.1,16.1h18.5L31.2,29.1z"
-    fill={fill}
-  />
-);
-RoundFeedbackBox.propTypes = { fill: PropTypes.string.isRequired };
-
-export const Circle = ({ fill }) => <circle transform="translate(-3,0)" cx="23" cy="20.4" r="16" fill={fill} />;
-Circle.propTypes = { fill: PropTypes.string.isRequired };
-
-export const Square = ({ fill }) => <rect x="3.6" y="4.1" width="32" height="32" fill={fill} />;
-Square.propTypes = { fill: PropTypes.string.isRequired };
-
-export const getStyles = (name, fg, bg) => ({
-  bg: { fill: bg },
-  fg: { fill: fg },
-});

package/src/incorrect-icon.jsx

@@ -1,67 +0,0 @@
-import IconBase from './icon-base';
-import PropTypes from 'prop-types';
-import React from 'react';
-
-// X mark for incorrect
-const Ex = ({ fill }) => (
-  <g transform="translate(0.5, 0.5)">
-    <rect
-      x="11"
-      y="17.3"
-      transform="matrix(0.7071 -0.7071 0.7071 0.7071 -7.852 19.2507)"
-      width="16.6"
-      height="3.7"
-      fill={fill}
-    />
-    <rect
-      x="17.4"
-      y="10.7"
-      transform="matrix(0.7071 -0.7071 0.7071 0.7071 -7.8175 19.209)"
-      width="3.7"
-      height="16.6"
-      fill={fill}
-    />
-  </g>
-);
-
-Ex.propTypes = {
-  fill: PropTypes.string.isRequired,
-};
-
-// Emoji version
-const Emoji = ({ fill }) => (
-  <g transform="translate(1,0)">
-    <rect x="21" y="12.9" width="3.7" height="4.7" fill={fill} />
-    <rect x="12.7" y="12.9" width="3.7" height="4.7" fill={fill} />
-    <rect x="12.2" y="22.5" width="13" height="3.3" fill={fill} />
-  </g>
-);
-
-Emoji.propTypes = {
-  fill: PropTypes.string.isRequired,
-};
-
-// Exported Incorrect icon
-export const Incorrect = IconBase(Ex, Emoji);
-
-Incorrect.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]),
-};
-
-Incorrect.defaultProps = {
-  iconSet: 'check',
-  shape: 'round',
-  category: undefined,
-  open: false,
-  fg: '#fcb733', // foreground color
-  bg: '#fbf2e3', // background color
-  size: 30,
-};
-
-export default Incorrect;

package/src/index.js

@@ -1,19 +0,0 @@
-import Correct from './correct-icon';
-import CorrectResponse from './correct-response-icon';
-import Incorrect from './incorrect-icon';
-import Instructions from './instructions-icon';
-import LearnMore from './learn-more-icon';
-import NothingSubmitted from './nothing-submitted-icon';
-import PartiallyCorrect from './partially-correct-icon';
-import ShowRationale from './show-rationale-icon';
-
-export {
-  Correct,
-  CorrectResponse,
-  Incorrect,
-  Instructions,
-  LearnMore,
-  NothingSubmitted,
-  PartiallyCorrect,
-  ShowRationale,
-};

package/src/instructions-icon.jsx

@@ -1,189 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import Sized from './sized';
-const Lines = () => {
-  const style = {
-    fill: 'none',
-    stroke: '#BCE2FF',
-    strokeWidth: 2,
-    strokeMiterlimit: 10,
-  };
-
-  return (
-    <g>
-      <line style={style} x1="-98" y1="142" x2="-114.6" y2="142" />
-      <line style={style} x1="-98" y1="146.3" x2="-114.6" y2="146.3" />
-      <line style={style} x1="-104" y1="150.7" x2="-114.6" y2="150.7" />
-    </g>
-  );
-};
-
-const Root = ({ children, size }) => (
-  <Sized size={size}>
-    <svg version="1.1" viewBox="-128 129 31 31" style={{ enableBackground: 'new -128 129 31 31' }}>
-      {children}
-    </svg>
-  </Sized>
-);
-
-Root.propTypes = {
-  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
-  size: PropTypes.number,
-};
-
-const GreyInfo = () => {
-  return (
-    <g>
-      <rect
-        x="-123.9"
-        y="135.3"
-        style={{
-          fill: '#D0CAC5',
-          stroke: '#E6E3E0',
-          strokeWidth: 0.75,
-          strokeLinejoin: 'round',
-          strokeMiterlimit: 10,
-        }}
-        width="4.1"
-        height="4.1"
-      />
-      <polygon
-        style={{
-          fill: '#D0CAC5',
-          stroke: '#E6E3E0',
-          strokeWidth: 0.75,
-          strokeLinejoin: 'round',
-          strokeMiterlimit: 10,
-        }}
-        points="-119.8,150.4 -119.8,142.2 -125,142.2 -125,144.9 -122.6,144.9 -122.6,150.4 -125.6,150.4 
-                  -125.6,153.2 -116.8,153.2 -116.8,150.4        "
-      />
-      <rect
-        x="-124.7"
-        y="134.7"
-        style={{
-          fill: '#B3ABA4',
-          stroke: '#CDC7C2',
-          strokeWidth: 0.5,
-          strokeLinecap: 'round',
-          strokeLinejoin: 'round',
-          strokeMiterlimit: 10,
-        }}
-        width="4.1"
-        height="4.1"
-      />
-
-      <polygon
-        style={{
-          fill: '#B3ABA4',
-          stroke: '#CDC7C2',
-          strokeWidth: 0.5,
-          strokeLinecap: 'round',
-          strokeLinejoin: 'round',
-          strokeMiterlimit: 10,
-        }}
-        points="-120.6,149.8 -120.6,141.5 -125.8,141.5 -125.8,144.3 -123.3,144.3 -123.3,149.8 -126.4,149.8 
-                  -126.4,152.5 -117.6,152.5 -117.6,149.8        "
-      />
-      <rect x="-125.5" y="134" style={{ fill: '#7FABC6' }} width="4.1" height="4.1" />
-      <polygon
-        style={{ fill: '#7FABC6' }}
-        points="-121.4,149.1 -121.4,140.9 -126.5,140.9 -126.5,143.6 -124.1,143.6 -124.1,149.1 -127.1,149.1 
-                  -127.1,151.9 -118.4,151.9 -118.4,149.1        "
-      />
-    </g>
-  );
-};
-
-const BlueInfo = () => (
-  <g>
-    <rect
-      x="-123.9"
-      y="135.3"
-      style={{
-        fill: '#D0CAC5',
-        stroke: '#E6E3E0',
-        strokeWidth: 0.75,
-        strokeLinejoin: 'round',
-        strokeMiterlimit: 10,
-      }}
-      width="4.1"
-      height="4.1"
-    />
-    <polygon
-      style={{
-        fill: '#D0CAC5',
-        stroke: '#E6E3E0',
-        strokeWidth: 0.75,
-        strokeLinejoin: 'round',
-        strokeMiterlimit: 10,
-      }}
-      points="-119.8,150.4 -119.8,142.2 -125,142.2 -125,144.9 -122.6,144.9 -122.6,150.4 -125.6,150.4 
-                  -125.6,153.2 -116.8,153.2 -116.8,150.4        "
-    />
-    <rect
-      x="-124.7"
-      y="134.7"
-      style={{
-        fill: '#B3ABA4',
-        stroke: '#CDC7C2',
-        strokeWidth: 0.5,
-        strokeLinecap: 'round',
-        strokeLinejoin: 'round',
-        strokeMiterlimit: 10,
-      }}
-      width="4.1"
-      height="4.1"
-    />
-    <polygon
-      style={{
-        fill: '#B3ABA4',
-        stroke: '#CDC7C2',
-        strokeWidth: 0.5,
-        strokeLinecap: 'round',
-        strokeLinejoin: 'round',
-        strokeMiterlimit: 10,
-      }}
-      points="-120.6,149.8 -120.6,141.5 -125.8,141.5 -125.8,144.3 -123.3,144.3 -123.3,149.8 -126.4,149.8 
-                  -126.4,152.5 -117.6,152.5 -117.6,149.8        "
-    />
-    <rect x="-125.5" y="134" style={{ fill: '#1A9CFF' }} width="4.1" height="4.1" />
-    <polygon
-      style={{ fill: '#1A9CFF' }}
-      points="-121.4,149.1 -121.4,140.9 -126.5,140.9 -126.5,143.6 -124.1,143.6 -124.1,149.1 -127.1,149.1 
-                  -127.1,151.9 -118.4,151.9 -118.4,149.1        "
-    />
-  </g>
-);
-
-export default class Instructions extends React.Component {
-  constructor(props) {
-    super(props);
-  }
-
-  render() {
-    if (this.props.open === true) {
-      return (
-        <Root>
-          <GreyInfo />
-          <Lines />
-        </Root>
-      );
-    } else {
-      return (
-        <Root>
-          <BlueInfo />
-          <Lines />
-        </Root>
-      );
-    }
-  }
-}
-
-Instructions.propTypes = {
-  open: PropTypes.bool,
-};
-
-Instructions.defaultProps = {
-  open: false,
-};

package/src/learn-more-icon.jsx

@@ -1,94 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import Sized from './sized';
-
-const Glint = ({ fill }) => (
-  <path
-    fill={fill}
-    d="M-130.4,142.1c0-2.1,1.7-3.9,3.9-3.9c0.3,0,0.5,0,0.8,0.1c-0.6-0.8-1.5-1.3-2.6-1.3c-1.8,0-3.3,1.5-3.3,3.3c0,1.1,0.5,2,1.3,2.6C-130.4,142.6-130.4,142.4-130.4,142.1z"
-  />
-);
-
-Glint.propTypes = {
-  fill: PropTypes.string,
-};
-
-export class LearnMore extends React.Component {
-  static propTypes = {
-    classes: PropTypes.object.isRequired,
-    size: PropTypes.number,
-  };
-
-  render() {
-    const { size } = this.props;
-
-    if (this.props.open === true) {
-      return (
-        <Sized size={size}>
-          <svg preserveAspectRatio="xMinYMin meet" viewBox="-135 129 16 32">
-            <path
-              fill="#BCE2FF"
-              d="M-122,141.1c0-3.7-3.3-6.6-7.1-5.8c-2.4,0.5-4.3,2.4-4.7,4.8c-0.4,2.3,0.6,4.4,2.2,5.7c0.4,0.3,0.6,0.8,0.6,1.3v1.9h6.1v-1.9c0-0.5,0.2-1,0.6-1.3C-122.8,144.7-122,143-122,141.1z"
-            />
-            <path
-              fill="#BCE2FF"
-              d="M-125.7,153h-4.5c-0.4,0-0.8-0.4-0.8-0.8v-1.6h6.1v1.6C-124.9,152.7-125.2,153-125.7,153z"
-            />
-            <Glint fill={'#1A9CFF'} />
-          </svg>
-        </Sized>
-      );
-    } else {
-      return (
-        <Sized size={size}>
-          <svg preserveAspectRatio="xMinYMin meet" viewBox="-135 129 16 31">
-            <path
-              fill="#D0CAC5"
-              stroke="#E6E3E0"
-              className="st0"
-              d="M-120.7,142.4c0-3.7-3.3-6.6-7.1-5.8c-2.4,0.5-4.3,2.4-4.7,4.8c-0.4,2.3,0.6,4.4,2.2,5.7c0.4,0.3,0.6,0.8,0.6,1.3v1.9h6.1v-1.9c0-0.5,0.2-1,0.6-1.3C-121.6,146-120.7,144.3-120.7,142.4z"
-            />
-            <path
-              fill="#D0CAC5"
-              stroke="#E6E3E0"
-              className="st0"
-              d="M-124.4,154.3h-4.5c-0.4,0-0.8-0.4-0.8-0.8v-1.6h6.1v1.6C-123.6,153.9-123.9,154.3-124.4,154.3z"
-            />
-            <path
-              fill="#B3ABA4"
-              stroke="#CDC7C2"
-              className="st1"
-              d="M-121.3,141.8c0-3.7-3.3-6.6-7.1-5.8c-2.4,0.5-4.3,2.4-4.7,4.8c-0.4,2.3,0.6,4.4,2.2,5.7c0.4,0.3,0.6,0.8,0.6,1.3v1.9h6.1v-1.9c0-0.5,0.2-1,0.6-1.3C-122.2,145.3-121.3,143.7-121.3,141.8z"
-            />
-            ,
-            <path
-              fill="#B3ABA4"
-              stroke="#CDC7C2"
-              className="st1"
-              d="M-125,153.7h-4.5c-0.4,0-0.8-0.4-0.8-0.8v-1.6h6.1v1.6C-124.2,153.3-124.6,153.7-125,153.7z"
-            />
-            <path
-              fill="#1A9CFF"
-              d="M-122,141.1c0-3.7-3.3-6.6-7.1-5.8c-2.4,0.5-4.3,2.4-4.7,4.8c-0.4,2.3,0.6,4.4,2.2,5.7c0.4,0.3,0.6,0.8,0.6,1.3v1.9h6.1v-1.9c0-0.5,0.2-1,0.6-1.3C-122.8,144.7-122,143-122,141.1z"
-            />
-            <path
-              fill="#1A9CFF"
-              d="M-125.7,153h-4.5c-0.4,0-0.8-0.4-0.8-0.8v-1.6h6.1v1.6C-124.9,152.7-125.2,153-125.7,153z"
-            />
-            <Glint fill={'1A9CFF'} />
-          </svg>
-        </Sized>
-      );
-    }
-  }
-}
-
-LearnMore.propTypes = {
-  open: PropTypes.bool,
-};
-
-LearnMore.defaultProps = {
-  open: false,
-};
-
-export default LearnMore;