[Harmony] Add SelectablePill to Harmony PAY-1654 (#3803)

Co-authored-by: Nikki Kang <[email protected]>

Author: nicoback2

apps/audius-client/packages/stems/src/components/HarmonyButton/types.ts

@@ -1,7 +1,8 @@
-import { ComponentPropsWithoutRef, ReactNode } from 'react'
+import { ReactNode } from 'react'
 
 import { IconComponent } from 'components/Icons/types'
 import { ColorValue } from 'styles/colors'
+import { BaseButtonProps } from 'utils/types'
 
 export enum HarmonyButtonType {
   PRIMARY = 'primary',
@@ -17,8 +18,6 @@ export enum HarmonyButtonSize {
   LARGE = 'large'
 }
 
-type BaseButtonProps = Omit<ComponentPropsWithoutRef<'button'>, 'children'>
-
 export type HarmonyButtonProps = {
   /**
    * Override the color of the button, only valid for the `PRIMARY` variant

apps/audius-client/packages/stems/src/components/SelectablePill/HarmonySelectablePill.module.css

@@ -0,0 +1,63 @@
+.pill {
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--text-subdued);
+  user-select: none;
+  height: var(--unit-6);
+  padding-left: var(--unit-3);
+  padding-right: var(--unit-3);
+  gap: var(--unit-1);
+
+  border-radius: 100px;
+  border: 1px solid var(--border-strong);
+  background-color: var(--white);
+  font-size: var(--font-m);
+  font-weight: var(--font-medium);
+  line-height: 125%;
+  transition: all 0.12s ease-out;
+}
+
+.large {
+  height: var(--unit-8);
+  box-shadow: var(--shadow-near);
+  color: var(--text-default);
+  padding-left: var(--unit-4);
+  padding-right: var(--unit-4);
+  gap: var(--unit-2);
+}
+
+.selected,
+.pill:active {
+  background-color: var(--secondary-dark-1);
+  border: 1px solid var(--secondary-dark-1);
+  color: var(--static-white);
+}
+
+.pill:hover {
+  border: 1px solid var(--secondary);
+  background-color: var(--secondary-light-1);
+  color: var(--static-white);
+}
+
+.large:hover {
+  border: 1px solid var(--secondary-light-1);
+  background-color: var(--secondary-light-2);
+  box-shadow: none;
+}
+
+.large:active,
+.large.selected {
+  box-shadow: none;
+}
+
+.icon path {
+  fill: currentColor;
+}
+
+.icon {
+  margin-right: var(--unit-1);
+  width: var(--unit-4);
+  height: var(--unit-4);
+}

apps/audius-client/packages/stems/src/components/SelectablePill/HarmonySelectablePill.stories.tsx

@@ -0,0 +1,45 @@
+import { useState } from 'react'
+
+import { Story } from '@storybook/react'
+
+import { IconHeart } from 'components/Icons'
+
+import { HarmonySelectablePill } from './HarmonySelectablePill'
+import { HarmonySelectablePillProps } from './types'
+
+export default {
+  component: HarmonySelectablePill,
+  title: 'Components/HarmonySelectablePill'
+}
+
+const Template: Story<HarmonySelectablePillProps> = ({ ...args }) => {
+  const [isSelected, setIsSelected] = useState(false)
+  return (
+    <HarmonySelectablePill
+      onClick={() => setIsSelected(!isSelected)}
+      {...args}
+      isSelected={args.isSelected === undefined ? isSelected : args.isSelected}
+    />
+  )
+}
+
+const baseProps: Partial<HarmonySelectablePillProps> = {
+  size: 'default',
+  label: 'Label'
+}
+
+// Default
+export const Primary = Template.bind({})
+Primary.args = { ...baseProps }
+
+// Large
+export const Large = Template.bind({})
+Large.args = { size: 'large', ...baseProps }
+
+// Icon
+export const WithIcon = Template.bind({})
+WithIcon.args = { ...baseProps, icon: IconHeart }
+
+// Icon - large
+export const LargeWithIcon = Template.bind({})
+LargeWithIcon.args = { ...baseProps, size: 'large', icon: IconHeart }

apps/audius-client/packages/stems/src/components/SelectablePill/HarmonySelectablePill.tsx

@@ -0,0 +1,37 @@
+import { forwardRef } from 'react'
+
+import cn from 'classnames'
+
+import styles from './HarmonySelectablePill.module.css'
+import { HarmonySelectablePillProps } from './types'
+
+export const HarmonySelectablePill = forwardRef<
+  HTMLButtonElement,
+  HarmonySelectablePillProps
+>((props, ref) => {
+  const {
+    size,
+    isSelected,
+    label,
+    icon: IconComponent,
+    className,
+    ...restProps
+  } = props
+  return (
+    <button
+      className={cn(
+        styles.pill,
+        {
+          [styles.large]: size === 'large',
+          [styles.selected]: isSelected
+        },
+        className
+      )}
+      ref={ref}
+      {...restProps}
+    >
+      {IconComponent ? <IconComponent className={styles.icon} /> : null}
+      <span>{label}</span>
+    </button>
+  )
+})

apps/audius-client/packages/stems/src/components/SelectablePill/index.ts

@@ -0,0 +1,2 @@
+export { HarmonySelectablePill } from './HarmonySelectablePill'
+export { HarmonySelectablePillProps } from './types'

apps/audius-client/packages/stems/src/components/SelectablePill/types.ts

@@ -0,0 +1,10 @@
+import { IconComponent } from 'components/Icons/types'
+import { BaseButtonProps } from 'utils/types'
+
+export type HarmonySelectablePillProps = {
+  size?: 'default' | 'large'
+  isSelected: boolean
+  label: string
+  icon?: IconComponent
+  onClick?: () => void
+} & BaseButtonProps

apps/audius-client/packages/stems/src/index.tsx

@@ -103,3 +103,7 @@ export {
   MarkdownViewer,
   MarkdownViewerProps
 } from './components/MarkdownViewer'
+export {
+  HarmonySelectablePill,
+  HarmonySelectablePillProps
+} from './components/SelectablePill'

apps/audius-client/packages/stems/src/utils/types.ts

@@ -0,0 +1,6 @@
+import { ComponentPropsWithoutRef } from 'react'
+
+export type BaseButtonProps = Omit<
+  ComponentPropsWithoutRef<'button'>,
+  'children'
+>