Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
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;
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),
});
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,