Add PillButton to stems

packages/stems/src/components/PillButton/PillButton.module.css

@@ -0,0 +1,42 @@
+.button {
+  height: unset !important;
+  padding: 10px 0;
+  border-radius: 100px;
+  border: 1px solid var(--neutral-light-4);
+  background: var(--white);
+}
+.buttonText {
+  display: flex;
+  align-items: center;
+  text-transform: uppercase;
+  font-size: var(--font-xs) !important;
+  color: var(--neutral) !important;
+  letter-spacing: unset !important;
+}
+.button:hover {
+  transform: scale3d(1.01, 1.01, 1.01) !important;
+  border: unset !important;
+}
+.button:active {
+  transform: scale3d(0.99, 0.99, 0.99) !important;
+}
+.button:hover .buttonText,
+.button:active .buttonText {
+  color: var(--white) !important;
+}
+.button.primary:hover,
+.button.primary:hover .buttonText {
+  background: var(--primary) !important;
+}
+.button.primary:active,
+.button.primary:active .buttonText {
+  background: var(--primary-dark-2) !important;
+}
+.button.secondary:hover,
+.button.secondary:hover .buttonText {
+  background: var(--secondary-light-2) !important;
+}
+.button.secondary:active,
+.button.secondary:active .buttonText {
+  background: var(--secondary) !important;
+}

packages/stems/src/components/PillButton/PillButton.stories.tsx

@@ -0,0 +1,23 @@
+import { Story } from '@storybook/react'
+
+import { PillButton, PillButtonProps } from './'
+
+export default {
+  component: PillButton,
+  title: 'Components/PillButton'
+}
+
+const defaultProps: PillButtonProps = {
+  text: 'Pill Button'
+}
+
+const Template: Story<PillButtonProps> = (args) => {
+  return <PillButton {...defaultProps} {...args} />
+}
+
+// Default
+export const Default = Template.bind({})
+
+// Disabled
+export const Disabled = Template.bind({})
+Disabled.args = { disabled: true }

packages/stems/src/components/PillButton/PillButton.tsx

@@ -0,0 +1,29 @@
+import cn from 'classnames'
+
+import { Button, Type as ButtonType } from 'components/Button'
+
+import styles from './PillButton.module.css'
+import { PillButtonProps, Type as PillButtonType } from './types'
+
+const TYPE_STYLE_MAP = {
+  [PillButtonType.PRIMARY]: styles.primary,
+  [PillButtonType.SECONDARY]: styles.secondary
+}
+export const PillButton = (props: PillButtonProps) => {
+  const {
+    text,
+    onClick,
+    type = PillButtonType.PRIMARY,
+    className,
+    textClassName
+  } = props
+  return (
+    <Button
+      className={cn(styles.button, TYPE_STYLE_MAP[type], className)}
+      textClassName={cn(styles.buttonText, textClassName)}
+      type={ButtonType.COMMON}
+      text={text}
+      onClick={onClick}
+    />
+  )
+}

packages/stems/src/components/PillButton/index.ts

@@ -0,0 +1,2 @@
+export { PillButton } from './PillButton'
+export { PillButtonProps, Type } from './types'

packages/stems/src/components/PillButton/types.ts

@@ -0,0 +1,18 @@
+import { HTMLAttributes } from 'react'
+// import { HTMLAttributes, ReactNode } from 'react'
+import * as React from 'react'
+
+export enum Type {
+  PRIMARY = 'primary',
+  SECONDARY = 'secondary'
+}
+
+export type PillButtonProps = HTMLAttributes<HTMLButtonElement> & {
+  text: any
+  // text: ReactNode
+  onClick?: (event: React.MouseEvent) => void
+  disabled?: boolean
+  type?: Type
+  className?: string
+  textClassName?: string
+}

packages/stems/src/index.tsx

@@ -13,6 +13,11 @@ export {
   Size as ButtonSize
 } from './components/Button'
 export { IconButton, IconButtonProps } from './components/IconButton'
+export {
+  PillButton,
+  PillButtonProps,
+  Type as PillButtonType
+} from './components/PillButton'
 export { Scrollbar, ScrollbarProps } from './components/Scrollbar'
 export {
   Modal,

packages/web/src/components/tipping/feed-tip-tile/FeedTipTile.module.css

@@ -109,35 +109,13 @@
 }
 
 .sendTipButton {
-  height: unset !important;
   margin-left: 8px;
-  padding: 10px 0;
-  border-radius: 100px;
-  border: 1px solid var(--neutral-light-4);
-  background: var(--white);
 }
-.sendTipButtonText {
+.sendTipButtonTextContainer {
   display: flex;
-  align-items: center;
-  font-weight: var(--font-bold);
-  font-size: var(--font-xs);
-  color: var(--neutral-light-4);
-  text-transform: uppercase;
 }
-.sendTipButton:hover {
-  transform: scale3d(1.01, 1.01, 1.01) !important;
-  border: unset;
-}
-.sendTipButton:active {
-  transform: scale3d(0.99, 0.99, 0.99) !important;
-}
-.sendTipButton:hover .sendTipButtonText,
-.sendTipButton:active .sendTipButtonText {
-  color: var(--white);
-}
-.sendTipButton:active,
-.sendTipButton:active .sendTipButtonText {
-  background: var(--primary-dark-2) !important;
+.sendTipButtonText {
+  color: var(--neutral-light-4) !important;
 }
 .sendTipName {
   margin-left: 2.5px;

packages/web/src/components/tipping/feed-tip-tile/FeedTipTile.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useEffect } from 'react'
 
-import { Button, IconButton, useMediaQueryListener } from '@audius/stems'
+import { IconButton, PillButton, useMediaQueryListener } from '@audius/stems'
 import { push as pushRoute } from 'connected-react-router'
 import { useDispatch, useSelector } from 'react-redux'
 
@@ -115,38 +115,36 @@ type SendTipToButtonProps = {
   hideName?: boolean
 }
 
-const SendTipToButton = ({ user, hideName = false }: SendTipToButtonProps) => {
+const SendTipButton = ({ user, hideName = false }: SendTipToButtonProps) => {
   const dispatch = useDispatch()
 
   const handleClick = useCallback(() => {
     dispatch(beginTip({ user, source: 'feed' }))
   }, [dispatch, user])
 
+  const renderSendTipButtonTitle = () =>
+    hideName ? (
+      messages.sendTip
+    ) : (
+      <div className={styles.sendTipButtonTextContainer}>
+        {messages.sendTipToPrefix}
+        <span className={styles.sendTipName}>{user.name}</span>
+        <UserBadges
+          userId={user.user_id}
+          className={styles.badge}
+          badgeSize={12}
+          inline
+        />
+      </div>
+    )
+
   return (
-    <div>
-      <Button
-        className={styles.sendTipButton}
-        // todo: move to stems or see if button design
-        // already exists elsewhere
-        text={
-          hideName ? (
-            <div className={styles.sendTipButtonText}>{messages.sendTip}</div>
-          ) : (
-            <div className={styles.sendTipButtonText}>
-              {messages.sendTipToPrefix}
-              <span className={styles.sendTipName}>{user.name}</span>
-              <UserBadges
-                userId={user.user_id}
-                className={styles.badge}
-                badgeSize={12}
-                inline
-              />
-            </div>
-          )
-        }
-        onClick={handleClick}
-      />
-    </div>
+    <PillButton
+      className={styles.sendTipButton}
+      textClassName={styles.sendTipButtonText}
+      text={renderSendTipButtonTitle()}
+      onClick={handleClick}
+    />
   )
 }
 
@@ -257,7 +255,7 @@ export const FeedTipTile = () => {
         />
       </div>
       <div className={styles.buttons}>
-        <SendTipToButton
+        <SendTipButton
           user={usersMap[tipToDisplay.receiver_id]}
           hideName={useShortButtonFormat}
         />