github.com/cockroachdb/cockroach@v20.2.0-alpha.1+incompatible/pkg/ui/src/components/badge/badge.tsx (about)

     1  // Copyright 2019 The Cockroach Authors.
     2  //
     3  // Use of this software is governed by the Business Source License
     4  // included in the file licenses/BSL.txt.
     5  //
     6  // As of the Change Date specified in that file, in accordance with
     7  // the Business Source License, use of this software will be governed
     8  // by the Apache License, Version 2.0, included in the file
     9  // licenses/APL.txt.
    10  
    11  import * as React from "react";
    12  import cn from "classnames";
    13  
    14  import "./badge.styl";
    15  
    16  export type BadgeStatus = "success" | "danger" | "default" | "info" | "warning";
    17  
    18  export interface BadgeProps {
    19    text: React.ReactNode;
    20    size?: "small" | "medium" | "large";
    21    status?: BadgeStatus;
    22    tag?: boolean; // TODO (koorosh): Tag behavior isn't implemented yet.
    23    icon?: React.ReactNode;
    24    iconPosition?: "left" | "right";
    25  }
    26  
    27  Badge.defaultProps = {
    28    size: "medium",
    29    status: "default",
    30    tag: false,
    31  };
    32  
    33  export function Badge(props: BadgeProps) {
    34    const { size, status, icon, iconPosition, text } = props;
    35    const classes = cn("badge", `badge--size-${size}`, `badge--status-${status}`);
    36    const iconClasses = cn("badge__icon", `badge__icon--position-${iconPosition || "left"}`);
    37    return (
    38      <div className={classes}>
    39        { icon && <div className={iconClasses}>{icon}</div> }
    40        <div className="badge__text badge__text--no-wrap">
    41          { text }
    42        </div>
    43      </div>
    44    );
    45  }