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

package/src/nothing-submitted-icon.jsx

@@ -1,136 +0,0 @@
-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

@@ -1,56 +0,0 @@
-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

@@ -1,145 +0,0 @@
-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

@@ -1,25 +0,0 @@
-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;