@moises.ai/design-system 3.10.18 → 3.11.0

package/src/components/TrackHeader/TrackHeader.module.css

@@ -3,13 +3,9 @@
   display: flex;
   justify-content: space-between;
   box-sizing: border-box;
-  box-shadow: 0 1px 0 0 var(--neutral-alpha-3);
+  box-shadow: 0 1px 0 0 var(--neutral-3);
+
 
-  &:hover {
-    .leftIcon {
-      color: var(--neutral-12);
-    }
-  }
 }
 
 .name {
@@ -17,7 +13,7 @@
   min-width: 0;
   white-space: nowrap;
   overflow: hidden;
-  background: linear-gradient(90deg, #fff 81%, #1d1d1d 100%);
+  background: linear-gradient(90deg, #fff 95%, #1d1d1d 100%);
   background-clip: text;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
@@ -31,16 +27,49 @@
   min-width: 0;
 }
 
-.left {
+/* .left {
   flex: 1;
   display: flex;
   align-items: center;
   min-width: 0;
+} */
+
+.instrumentIconButton {
+  margin-right: 4px !important;
+  border-radius: 4px;
 }
 
-.leftIcon {
-  width: 24px;
-  color: var(--neutral-8);
+.headerActions {
+  min-width: 0;
+  width: 100%;
+}
+
+.trackContent{
+/* background-color: ; */
+flex: 1;
+min-width: 0;
+/* border: 1px solid var(--neutral-3); */
+background-color: rgba(17, 17, 19);
+
+  &:hover {
+    .menuOptionsTrigger svg {
+      opacity: 1;
+      color: var(--neutral-11);
+    }
+
+    .instrumentIcon {
+      opacity: 1;
+      color: var(--neutral-alpha-11);
+    }
+  }
+}
+
+.trackContent.isActive {
+  background-color: var(--neutral-2);
+}
+
+.instrumentIcon {
+  color: var(--neutral-alpha-8);
 }
 
 .right {
@@ -82,26 +111,33 @@
   justify-content: center;
 }
 
-.menuOptionsTrigger:hover {
-  color: var(--accent-a12) !important;
-  background-color: transparent !important;
+
+
+.menuOptionsTrigger {
+
+  svg {
+    opacity: 0.5;
+  }
+
+  &:hover {
+    svg {
+      opacity: 1;
+    }
+  }
+
+  &[data-state='open'],
+  &[data-highlighted] {
+    svg {
+      opacity: 1;
+      color: var(--neutral-11);
+    }
+  }
 }
 
-.menuOptionsTrigger[data-state=open] {
+/* .menuOptionsTrigger[data-state=open] {
   color: var(--accent-a10) !important;
-}
+} */
 
-.trackContent {
-  flex: 1;
-  min-width: 0;
-  display: flex;
-  padding-left: var(--space-1);
-  padding-right: var(--space-3);
-  padding-top: var(--space-3);
-  padding-bottom: var(--space-3);
-  flex-direction: column;
-  justify-content: space-between;
-}
 
 /* Open */
 
@@ -118,26 +154,27 @@
 /* Not parent track (either grouped or not) */
 
 .track:not(.isParentTrack) {
-  .leftIcon {
+  .toggleOpenButton {
     visibility: hidden;
     pointer-events: none;
   }
 }
 
 /* Child track */
-
+.group {
+  background-color: rgba(17, 17, 19);
+}
 .group > * {
   .track {
     margin-left: 28px;
     background-color: var(--neutral-alpha-2);
-    border-left-style: solid;
-    border-left-color: var(--neutral-alpha-3);
-    border-left-width: 1px;
+    border-radius: none;
+    box-shadow: 0 1px 0 0 var(--neutral-alpha-4);
 
     .trackContent {
       padding-left: 0;
-    
-      .leftIcon {
+    background-color: var(--neutral-alpha-2);
+      .toggleOpenButton {
         display: none;
       }
     
@@ -145,7 +182,7 @@
         padding-left: var(--space-4);
         background: linear-gradient(
           90deg,
-          var(--neutral-alpha-11) 81%,
+          var(--neutral-alpha-11) 95%,
           #1d1d1d 100%
         );
         background-clip: text;
@@ -161,7 +198,6 @@
   &:first-child .track {
     border-top-style: solid;
     border-top-color: var(--neutral-alpha-3);
-    border-top-left-radius: 4px;
     border-top-width: 1px;
   }
   
@@ -192,3 +228,14 @@
     }
   }
 }
+
+
+.toggleOpenButton {
+  background: transparent;
+  width: 20px;
+  height: 20px;
+  opacity: 0.5;
+  &:hover {
+    opacity: 1;
+  }
+}

package/src/components/TrackHeader/TrackHeader.stories.jsx

@@ -1,6 +1,6 @@
 import { TrackHeader } from './TrackHeader'
 import { useState } from 'react'
-
+import { BassIcon, ElectricGuitarIcon, KeysIcon, DrumsIcon } from '../../icons'
 export default {
   title: 'Components/TrackHeader',
   component: TrackHeader,
@@ -92,6 +92,13 @@ const menuOptions = [
   { type: 'item', key: 'delete', label: 'Delete', onClick: () => console.log('Delete clicked') },
 ]
 
+const instrumentOptions = [
+  { type: 'item', key: 'bass', label: 'Bass', icon: <BassIcon /> },
+  { type: 'item', key: 'guitar', label: 'Guitar', icon: <ElectricGuitarIcon /> },
+  { type: 'item', key: 'piano', label: 'Piano', icon: <KeysIcon /> },
+  { type: 'item', key: 'drums', label: 'Drums', icon: <DrumsIcon /> },
+
+]
 export const Default = {
   args: {
     title: 'Common Track',
@@ -109,13 +116,15 @@ export const Default = {
     onPanChange: () => { },
     onMutedChange: () => { },
     onSoloChange: () => { },
+    onInstrumentChange: () => { },
+    instrumentOptions,
+    instrumentSelected: instrumentOptions[0],
   },
   render: (args) => <TrackHeader {...args} />,
 }
 
 export const Group = {
   args: {
-    isOpen: true,
     title: 'Group Track',
     showPan: false,
     showVolumeControls: true,
@@ -130,13 +139,13 @@ export const Group = {
     onPanChange: () => { },
     onMutedChange: () => { },
     onSoloChange: () => { },
-    onOpenChange: () => { },
   },
   render: (args) => {
+    const [isOpen, setIsOpen] = useState(true)
     const [pan, setPan] = useState(-0.3)
     const [pan2, setPan2] = useState(-0.3)
     return (
-      <TrackHeader {...args}>
+      <TrackHeader {...args} isOpen={isOpen} onOpenChange={setIsOpen}>
         <TrackHeader
           title="Grouped Track"
           isGrouped

package/src/icons/ChevronDownFilledIcon.jsx

@@ -0,0 +1,17 @@
+export const ChevronDownFilledIcon = ({ width = 9, height = 5, className, ...props }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={width}
+    height={height}
+    viewBox="0 0 9 5"
+    fill="none"
+    className={className}
+    {...props}
+  >
+    <path
+      d="M3.58684 4.29289L0.147499 0.853553C-0.167484 0.538571 0.0555997 0 0.501052 0L8.08684 0C8.53229 0 8.75537 0.53857 8.44039 0.853553L5.00105 4.29289C4.61053 4.68342 3.97736 4.68342 3.58684 4.29289Z"
+      fill="currentColor" />
+  </svg>
+)
+
+ChevronDownFilledIcon.displayName = 'ChevronDownFilledIcon'

package/src/icons/ChevronRightFilledIcon.jsx

@@ -0,0 +1,17 @@
+export const ChevronRightFilledIcon = ({ width = 5, height = 9, className, ...props }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={width}
+    height={height}
+    viewBox="0 0 5 9"
+    fill="none"
+    className={className}
+    {...props}
+  >
+    <path
+      d="M4.29289 5.001L0.853553 8.44034C0.538571 8.75532 -3.3293e-08 8.53224 -5.27643e-08 8.08679L-3.8435e-07 0.501002C-4.03821e-07 0.0555496 0.53857 -0.167534 0.853552 0.147449L4.29289 3.58679C4.68342 3.97731 4.68342 4.61048 4.29289 5.001Z"
+      fill="currentColor" />
+  </svg>
+)
+
+ChevronRightFilledIcon.displayName = 'ChevronRightFilledIcon'

package/src/icons.jsx

@@ -347,3 +347,5 @@ export { EmailIcon } from './icons/EmailIcon'
 export { EyeIcon } from './icons/EyeIcon'
 export { EyeOffIcon } from './icons/EyeOffIcon'
 export { Play1Icon } from './icons/Play1Icon'
+export { ChevronRightFilledIcon } from './icons/ChevronRightFilledIcon'
+export { ChevronDownFilledIcon } from './icons/ChevronDownFilledIcon'

package/src/index.jsx

@@ -142,4 +142,5 @@ export { useForm } from './components/useForm/useForm'
 export { VoiceConversionForm } from './components/VoiceConversionForm/VoiceConversionForm'
 export { Waveform } from './components/VoiceConversionForm/Waveform/Waveform'
 
-export { EmptyState } from './components/EmptyState/EmptyState'
+export { EmptyState } from './components/EmptyState/EmptyState'
+export { TrackControlsToggle } from './components/TrackControlsToggle/TrackControlsToggle'

package/src/lib/menu/Menu.module.css

@@ -286,6 +286,11 @@
   background-color: transparent;
 }
 
+.menuTrigger[data-state='open'].showActiveTrigger,
+.menuTrigger[data-highlighted].showActiveTrigger {
+  background-color: var(--neutral-alpha-3);
+}
+
 .menuSubTrigger[data-highlighted],
 .menuItem[data-highlighted],
 .menuSubTrigger[data-state='open'] {