How to use the @paprika/helpers/lib/customPropTypes.ShirtSizes.LIMITED function in @paprika/helpers

To help you get started, we’ve selected a few @paprika/helpers examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github acl-services / paprika / packages / Counter / src / Counter.js View on Github external
import PropTypes from "prop-types";
import { ShirtSizes } from "@paprika/helpers/lib/customPropTypes";
import counterStyles from "./Counter.styles";

const propTypes = {
  /** Background color of the counter. */
  color: PropTypes.oneOf(["grey", "blue", "red"]),

  /** If the counter should display a red dot on the top right corner. Normally used to indicate when there are new items. */
  hasIndicator: PropTypes.bool,

  /** The number displayed inside the counter. */
  quantity: PropTypes.number.isRequired,

  /** Size of counter. It can be small or medium. Default is medium. */
  size: PropTypes.oneOf(ShirtSizes.LIMITED),

  /** When quantity exceeds threshold, it will display "(Threshold)+" inside the counter. Default is 99. */
  threshold: PropTypes.number,
};

const defaultProps = {
  color: "grey",
  hasIndicator: false,
  size: "medium",
  threshold: 99,
};

function Counter(props) {
  const { color, hasIndicator, quantity, size, threshold } = props;
  const exceedsThreshold = quantity > threshold;
github acl-services / paprika / packages / Counter / stories / examples / Showcase.js View on Github external
const counterKnobs = () => ({
  color: select("color", ["grey", "blue", "red"], "grey"),
  hasIndicator: boolean("hasIndicator", false),
  quantity: number("quantity", 32),
  size: select("size", ShirtSizes.LIMITED, "medium"),
  threshold: number("threshold", 99),
});
github acl-services / paprika / packages / Pill / src / Pill.js View on Github external
import React from "react";
import PropTypes from "prop-types";
import RawButton from "@paprika/raw-button";
import { ShirtSizes } from "@paprika/helpers/lib/customPropTypes";
import pillStyles, { pillTextStyles } from "./Pill.styles";

export const pillColors = ["black", "blue", "green", "grey", "orange"];
export const severityPillColors = ["noRisk", "lowRisk", "mediumRisk", "highRisk"];

const propTypes = {
  a11yText: PropTypes.string,
  children: PropTypes.node.isRequired,
  isDisabled: PropTypes.bool,
  onClick: PropTypes.func,
  pillColor: PropTypes.oneOf([...pillColors, ...severityPillColors]),
  size: PropTypes.oneOf(ShirtSizes.LIMITED),
};

const defaultProps = {
  a11yText: null,
  isDisabled: false,
  onClick: null,
  pillColor: "grey",
  size: "medium",
};

function Pill(props) {
  const { a11yText, pillColor, isDisabled, size, onClick, ...moreProps } = props;

  const styleProps = {
    pillColor,
    size,