Add tertiary button to action bar

WRadoslaw · Oct 20, 2023 · 9c97f62 · 9c97f62
1 parent affa064
commit 9c97f62
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 8 deletions.
diff --git a/packages/atlas/src/components/ActionBar/ActionBar.styles.ts b/packages/atlas/src/components/ActionBar/ActionBar.styles.ts
@@ -27,10 +27,11 @@ export const ActionBarContainer = styled.div<ActionBarContainerProps>`
 
   grid-template:
     'primary-text badge' auto
-    'secondary-button primary-button' auto / auto 1fr;
+    'secondary-button primary-button' auto
+    'teriary-button teriary-button' auto / auto 1fr;
 
   ${media.sm} {
-    grid-template: 'primary-text badge secondary-button primary-button' auto / 1fr max-content max-content max-content;
+    grid-template: 'primary-text badge teriary-button secondary-button primary-button' auto / 1fr max-content max-content max-content max-content;
   }
 
   ${media.md} {
@@ -47,6 +48,10 @@ export const StyledInformation = styled(Information)`
   margin-left: ${sizes(1)};
 `
 
+export const TertiaryButton = styled(Button)`
+  grid-area: teriary-button;
+`
+
 export const SecondaryButton = styled(Button)`
   grid-area: secondary-button;
 `

diff --git a/packages/atlas/src/components/ActionBar/ActionBar.tsx b/packages/atlas/src/components/ActionBar/ActionBar.tsx
@@ -17,6 +17,7 @@ import {
   PrimaryButtonContainer,
   SecondaryButton,
   StyledInformation,
+  TertiaryButton,
 } from './ActionBar.styles'
 
 export type ActionDialogButtonProps = {
@@ -36,6 +37,7 @@ export type ActionBarProps = {
   primaryButton: ActionDialogButtonProps
   primaryButtonTooltip?: Omit<TooltipProps, 'reference'>
   secondaryButton?: ActionDialogButtonProps
+  tertiaryButton?: ActionDialogButtonProps
   isActive?: boolean
   skipFeeCheck?: boolean
   className?: string
@@ -52,6 +54,7 @@ export const ActionBar = forwardRef<HTMLDivElement, ActionBarProps>(
       primaryButton,
       primaryButtonTooltip,
       secondaryButton,
+      tertiaryButton,
       infoBadge,
       skipFeeCheck,
       isNoneCrypto,
@@ -82,6 +85,17 @@ export const ActionBar = forwardRef<HTMLDivElement, ActionBarProps>(
             <StyledInformation multiline placement="top-end" {...infoBadge.tooltip} />
           </DraftsBadgeContainer>
         ) : null}
+        <CSSTransition
+          in={!!tertiaryButton}
+          timeout={parseInt(transitions.timings.sharp)}
+          classNames={transitions.names.fade}
+          mountOnEnter
+          unmountOnExit
+        >
+          <TertiaryButton {...tertiaryButton} variant="tertiary" size={smMatch ? 'large' : 'medium'}>
+            {tertiaryButton?.text}
+          </TertiaryButton>
+        </CSSTransition>
         <CSSTransition
           in={!!secondaryButton}
           timeout={parseInt(transitions.timings.sharp)}

diff --git a/packages/atlas/src/views/studio/CrtTokenEditView/CrtTokenEditView.tsx b/packages/atlas/src/views/studio/CrtTokenEditView/CrtTokenEditView.tsx
@@ -38,7 +38,7 @@ export const CrtTokenEditView = () => {
       id: activeChannel?.creatorToken?.token.id ?? '',
     },
   })
-  console.log(data)
+
   const [mode, setMode] = useState<'edit' | 'preview'>('edit')
   const form = useForm<CrtPageForm>({
     defaultValues: {
@@ -129,12 +129,31 @@ export const CrtTokenEditView = () => {
         }
       />
       <StyledActionBar
-        secondaryButton={{
-          text: mode === 'edit' ? 'Preview' : 'Edit',
-          onClick: () => setMode((prev) => (prev === 'edit' ? 'preview' : 'edit')),
-        }}
-        primaryButton={{ text: 'Publish', onClick: handleSubmit }}
+        tertiaryButton={
+          mode === 'edit'
+            ? {
+                text: 'Preview',
+                onClick: () => setMode('preview'),
+              }
+            : undefined
+        }
+        secondaryButton={
+          mode === 'edit'
+            ? {
+                text: 'Cancel',
+                onClick: () => form.reset(),
+              }
+            : undefined
+        }
         isNoneCrypto
+        primaryButton={
+          mode === 'edit'
+            ? { text: 'Publish', onClick: handleSubmit }
+            : {
+                text: 'Edit',
+                onClick: () => setMode('edit'),
+              }
+        }
       />
     </Wrapper>
   )