ui: CSS modules for Badge component

pkg/ui/.storybook/decorators/index.ts

@@ -9,3 +9,4 @@
 // licenses/APL.txt.
 
 export * from "./withRouterProvider";
+export * from "./withBackground";

pkg/ui/.storybook/decorators/withBackground.tsx

@@ -0,0 +1,18 @@
+// Copyright 2020 The Cockroach Authors.
+//
+// Use of this software is governed by the Business Source License
+// included in the file licenses/BSL.txt.
+//
+// As of the Change Date specified in that file, in accordance with
+// the Business Source License, use of this software will be governed
+// by the Apache License, Version 2.0, included in the file
+// licenses/APL.txt.
+
+import React from "react";
+import {RenderFunction} from "storybook__react";
+
+export const withBackgroundFactory = (backgroundColor = "#F5F7FA") => (storyFn: RenderFunction) => (
+  <div style={{backgroundColor}}>
+    {storyFn()}
+  </div>
+);

pkg/ui/src/components/anchor/anchor.tsx

@@ -9,18 +9,23 @@
 // licenses/APL.txt.
 
 import React from "react";
-import "./anchor.styl";
+import classnames from "classnames/bind";
+import styles from "./anchor.module.styl";
 
 interface AnchorProps {
   onClick?: () => void;
   href?: string;
   target?: "_blank" | "_parent" | "_self";
+  className?: string;
 }
+
+const cx = classnames.bind(styles);
+
 export function Anchor(props: React.PropsWithChildren<AnchorProps>) {
-  const { href, target, children, onClick } = props;
+  const { href, target, children, onClick, className } = props;
   return (
     <a
-      className="crl-anchor"
+      className={cx("crl-anchor", className)}
       href={href}
       target={target}
       onClick={onClick}
@@ -32,4 +37,5 @@ export function Anchor(props: React.PropsWithChildren<AnchorProps>) {
 
 Anchor.defaultProps = {
   target: "_blank",
+  className: "",
 };

pkg/ui/src/components/badge/badge.tsx

@@ -9,35 +9,37 @@
 // licenses/APL.txt.
 
 import * as React from "react";
-import cn from "classnames";
+import classNames from "classnames/bind";
 
-import "./badge.styl";
+import styles from "./badge.module.styl";
 
 export type BadgeStatus = "success" | "danger" | "default" | "info" | "warning";
 
 export interface BadgeProps {
   text: React.ReactNode;
   size?: "small" | "medium" | "large";
   status?: BadgeStatus;
-  tag?: boolean; // TODO (koorosh): Tag behavior isn't implemented yet.
   icon?: React.ReactNode;
   iconPosition?: "left" | "right";
 }
 
 Badge.defaultProps = {
   size: "medium",
   status: "default",
-  tag: false,
 };
 
+const cx = classNames.bind(styles);
+
 export function Badge(props: BadgeProps) {
   const { size, status, icon, iconPosition, text } = props;
-  const classes = cn("badge", `badge--size-${size}`, `badge--status-${status}`);
-  const iconClasses = cn("badge__icon", `badge__icon--position-${iconPosition || "left"}`);
+  const classes = cx("badge", `badge--size-${size}`, `badge--status-${status}`);
+  const iconClasses = cx("badge__icon", `badge__icon--position-${iconPosition || "left"}`);
   return (
     <div className={classes}>
       { icon && <div className={iconClasses}>{icon}</div> }
-      <div className="badge__text badge__text--no-wrap">
+      <div
+        className={cx("badge__text", "badge__text--no-wrap")}
+      >
         { text }
       </div>
     </div>

pkg/ui/src/components/button/button.styl → pkg/ui/src/components/button/button.module.styl

@@ -35,6 +35,18 @@
     pointer-events none
     cursor default
 
+.crl-button--type-unstyled-link
+  @extends .crl-button--type-flat
+  margin-bottom 17px
+  .crl-button__content
+    font-family $font-family--base
+    font-size $font-size--medium
+    line-height 22px
+    letter-spacing 0.1px
+    color $colors--neutral-7
+    &:hover
+      text-decoration underline
+
 .crl-button--type-primary
   background-color $colors--primary-green-3
   color $colors--white
@@ -102,20 +114,3 @@
 
 .crl-button__icon--push-right
   order 1
-
-.crl-button--link-to
-  margin-bottom 17px
-  .crl-button__content
-    font-family $font-family--base
-    font-size $font-size--medium
-    line-height 22px
-    letter-spacing 0.1px
-    color $colors--neutral-7
-    &:hover
-      text-decoration underline
-  img
-    width 10px
-    height 10px
-    margin-right 10px
-  &:focus
-    border none

pkg/ui/src/components/button/button.tsx

@@ -9,13 +9,11 @@
 // licenses/APL.txt.
 
 import React from "react";
-import cn from "classnames";
-import Back from "assets/back-arrow.svg";
-
-import "./button.styl";
+import classNames from "classnames/bind";
+import styles from "./button.module.styl";
 
 export interface ButtonProps {
-  type?: "primary" | "secondary" | "flat";
+  type?: "primary" | "secondary" | "flat" | "unstyled-link";
   disabled?: boolean;
   size?: "default" | "small";
   children?: React.ReactNode;
@@ -25,10 +23,12 @@ export interface ButtonProps {
   className?: string;
 }
 
+const cx = classNames.bind(styles);
+
 export function Button(props: ButtonProps) {
   const { children, type, disabled, size, icon, iconPosition, onClick, className } = props;
 
-  const rootStyles = cn(
+  const rootStyles = cx(
     "crl-button",
     `crl-button--type-${type}`,
     `crl-button--size-${size}`,
@@ -43,7 +43,7 @@ export function Button(props: ButtonProps) {
       return null;
     }
     return (
-      <div className={`crl-button__icon--push-${iconPosition}`}>
+      <div className={cx(`crl-button__icon--push-${iconPosition}`)}>
         { icon() }
       </div>
     );
@@ -55,9 +55,9 @@ export function Button(props: ButtonProps) {
       className={rootStyles}
       disabled={disabled}
     >
-      <div className="crl-button__container">
+      <div className={cx("crl-button__container")}>
         { iconPosition === "left" && renderIcon() }
-        <div className="crl-button__content">
+        <div className={cx("crl-button__content")}>
           {children}
         </div>
         { iconPosition === "right" && renderIcon() }
@@ -74,6 +74,3 @@ Button.defaultProps = {
   className: "",
   iconPosition: "left",
 };
-
-// tslint:disable-next-line: variable-name
-export const BackIcon = () => <img src={Back} alt="back" />;

pkg/ui/src/components/empty/empty.styl → pkg/ui/src/components/empty/empty.module.styl

@@ -10,12 +10,6 @@
 
 @require '~src/components/core/index.styl'
 
-.summary--card.summary--card__empty-state
-  padding 0
-  .cl-empty-view
-    &__content
-      max-width 650px
-
 .cl-empty-view
   display flex
   flex-direction column
@@ -42,11 +36,11 @@
     max-width 600px
 
   &__main
-    .text
+    &--text
       color $colors--neutral-6
       font-size $font-size--medium
       line-height $line-height--medium-small
-    .crl-anchor
+    &--anchor
       margin-left 6px
 
   &__actions-column

pkg/ui/src/components/empty/empty.tsx

@@ -10,8 +10,11 @@
 
 import heroBannerLp from "assets/heroBannerLp.png";
 import React from "react";
+import classnames from "classnames/bind";
 import { Anchor, Button, Text, TextTypes } from "src/components";
-import "./empty.styl";
+import styles from "./empty.module.styl";
+
+const cx = classnames.bind(styles);
 
 export interface IEmptyProps {
   title?: string;
@@ -33,23 +36,36 @@ export const Empty = ({
   link,
   backgroundImage,
 }: IEmptyProps) => (
-  <div className="cl-empty-view" style={{ backgroundImage: `url(${backgroundImage})` }}>
+  <div
+    className={cx("cl-empty-view")}
+    style={{ backgroundImage: `url(${backgroundImage})` }}
+  >
     <Text
-      className="cl-empty-view__title"
+      className={cx("cl-empty-view__title")}
       textType={TextTypes.Heading3}
     >
       {title}
     </Text>
-    <div className="cl-empty-view__content">
-      <main className="cl-empty-view__main">
+    <div
+      className={cx("cl-empty-view__content")}
+    >
+      <main className={cx("cl-empty-view__main")}>
         <Text
+          className={cx("cl-empty-view__main--text")}
           textType={TextTypes.Body}
         >
           {description}
-          {link && <Anchor href={link}>{anchor}</Anchor>}
+          {link && (
+            <Anchor
+              href={link}
+              className={cx("cl-empty-view__main--anchor")}
+            >
+              {anchor}
+            </Anchor>
+          )}
         </Text>
       </main>
-      <footer className="cl-empty-view__footer">
+      <footer className={cx("cl-empty-view__footer")}>
         <Button
           type="primary"
           onClick={onClick}

pkg/ui/src/components/icon/backIcon.module.styl

@@ -0,0 +1,16 @@
+// Copyright 2020 The Cockroach Authors.
+//
+// Use of this software is governed by the Business Source License
+// included in the file licenses/BSL.txt.
+//
+// As of the Change Date specified in that file, in accordance with
+// the Business Source License, use of this software will be governed
+// by the Apache License, Version 2.0, included in the file
+// licenses/APL.txt.
+
+.root
+  width 10px
+  height 10px
+  margin-right 10px
+  &:focus
+    border none

pkg/ui/src/components/icon/backIcon.tsx

@@ -0,0 +1,25 @@
+// Copyright 2020 The Cockroach Authors.
+//
+// Use of this software is governed by the Business Source License
+// included in the file licenses/BSL.txt.
+//
+// As of the Change Date specified in that file, in accordance with
+// the Business Source License, use of this software will be governed
+// by the Apache License, Version 2.0, included in the file
+// licenses/APL.txt.
+
+import React from "react";
+import classNames from "classnames/bind";
+import Back from "assets/back-arrow.svg";
+import styles from "./backIcon.module.styl";
+
+const cx = classNames.bind(styles);
+
+// tslint:disable-next-line: variable-name
+export const BackIcon = () => (
+  <img
+    src={Back}
+    alt="back"
+    className={cx("root")}
+  />
+);

pkg/ui/src/components/icon/index.ts

@@ -9,3 +9,4 @@
 // licenses/APL.txt.
 
 export * from "./cockroachLabsLockupIcon";
+export * from "./backIcon";

pkg/ui/src/views/app/components/Search/index.tsx

@@ -13,7 +13,8 @@ import { InputProps } from "antd/lib/input";
 import CancelIcon from "assets/cancel.svg";
 import SearchIcon from "assets/search.svg";
 import React from "react";
-import "./search.styl";
+import classNames from "classnames/bind";
+import styles from "./search.module.styl";
 
 interface ISearchProps {
   onSubmit: (value: string) => void;
@@ -29,6 +30,8 @@ interface ISearchState {
 
 type TSearchProps = ISearchProps & InputProps;
 
+const cx = classNames.bind(styles);
+
 export class Search extends React.Component<TSearchProps, ISearchState> {
   state = {
     value: this.props.defaultValue || "",
@@ -62,16 +65,24 @@ export class Search extends React.Component<TSearchProps, ISearchState> {
     const { value, submitted } = this.state;
     if (value.length > 0) {
       if (submitted) {
-        return <Button onClick={this.onClear} type="default" className="_clear-search"><img className="_suffix-icon" src={CancelIcon} /></Button>;
+        return (
+          <Button
+            onClick={this.onClear}
+            type="default"
+            className={cx("_clear-search")}
+          >
+            <img className={cx("_suffix-icon")} src={CancelIcon} />
+          </Button>
+        );
       }
-      return <Button type="default" htmlType="submit" className="_submit-search">Enter</Button>;
+      return <Button type="default" htmlType="submit" className={cx("_submit-search")}>Enter</Button>;
     }
     return null;
   }
 
   render() {
     const { value, submitted } = this.state;
-    const className = submitted ? "_submitted" : "";
+    const className = submitted ? cx("_submitted") : "";
 
     /*
       current antdesign (3.25.3) has Input.d.ts incompatible with latest @types/react
@@ -82,13 +93,13 @@ export class Search extends React.Component<TSearchProps, ISearchState> {
     const MyInput = Input as any;
 
     return (
-      <Form onSubmit={this.onSubmit} className="_search-form">
+      <Form onSubmit={this.onSubmit} className={cx("_search-form")}>
         <Form.Item>
           <MyInput
             className={className}
             placeholder="Search Statement"
             onChange={this.onChange}
-            prefix={<img className="_prefix-icon" src={SearchIcon} />}
+            prefix={<img className={cx("_prefix-icon")} src={SearchIcon} />}
             suffix={this.renderSuffix()}
             value={value}
             {...this.props}