Add some animations

wojtekolek · Oct 17, 2022 · bd101e4 · bd101e4 · vercel · Oct 18, 2022
1 parent a1f88e3
commit bd101e4
Show file tree

Hide file tree

Showing 6 changed files with 32 additions and 17 deletions.
diff --git a/.changeset/bright-eyes-play.md b/.changeset/bright-eyes-play.md
@@ -0,0 +1,5 @@
+---
+'commandmenu': patch
+---
+
+Rename props
diff --git a/apps/example/components/Layout/Layout.tsx b/apps/example/components/Layout/Layout.tsx
@@ -1,11 +1,12 @@
 import type { FunctionComponent, ReactNode } from 'react'
 
-import styled, { ThemeProvider, createGlobalStyle } from 'styled-components'
+import styled, { createGlobalStyle, ThemeProvider } from 'styled-components'
 
 import { Footer } from 'components/Footer'
+import { TopMenu } from 'components/TopMenu'
 import { Normalize } from 'utils/styles/Normalize'
+import { from } from 'utils/styles/responsiveness'
 import { theme } from 'utils/styles/theme'
-import { TopMenu } from 'components/TopMenu'
 
 const GlobalStyle = createGlobalStyle`
   html {
@@ -26,7 +27,11 @@ const GlobalStyle = createGlobalStyle`
 `
 
 const LayoutMain = styled.main`
-  margin: ${({ theme }) => `${theme.spacing.ss0} ${theme.spacing.ss10} ${theme.spacing.ss5}`};
+  margin: ${({ theme }) => `${theme.spacing.ss0} ${theme.spacing.ss8} ${theme.spacing.ss3}`};
+
+  ${from('desktop')} {
+    margin: ${({ theme }) => `${theme.spacing.ss0} ${theme.spacing.ss10} ${theme.spacing.ss5}`};
+  }
 `
 
 type LayoutProps = {

diff --git a/apps/example/components/TopMenu/TopMenu.tsx b/apps/example/components/TopMenu/TopMenu.tsx
@@ -7,13 +7,18 @@ import { Image } from 'components/Image'
 import { ExternalLink } from 'components/Link'
 import { Badges } from 'components/Primitives/Badges'
 import Logo from 'public/logo.svg'
+import { from } from 'utils/styles/responsiveness'
 
 const TopMenuWrapper = styled.nav`
   display: flex;
   justify-content: space-between;
   align-items: center;
   height: 120px;
-  margin: ${({ theme }) => `${theme.spacing.ss0} ${theme.spacing.ss10}`};
+  margin: ${({ theme }) => `${theme.spacing.ss0} ${theme.spacing.ss8}`};
+
+  ${from('desktop')} {
+    margin: ${({ theme }) => `${theme.spacing.ss0} ${theme.spacing.ss10}`};
+  }
 `
 
 const TopMenuTitle = styled.div`

diff --git a/apps/example/modules/Home/components/Demo/Demo.tsx b/apps/example/modules/Home/components/Demo/Demo.tsx
@@ -155,18 +155,16 @@ const CommandMenuListItem: FunctionComponent<CommandMenuListItemProps> = ({
 }
 
 export const Demo: FunctionComponent = () => {
-  const { selectedItem, selectedItemRef, wrapperProps, searchProps, preparedList } = useCommandMenu(
-    {
-      config
-    }
-  )
+  const { selectedItem, selectedItemRef, menuProps, searchProps, list } = useCommandMenu({
+    config
+  })
 
   return (
     <CommandMenuWrapper>
-      <CommandMenu {...wrapperProps}>
+      <CommandMenu {...menuProps}>
         <SearchInput {...searchProps} type="text" />
         <CommandMenuList>
-          {preparedList.map(({ isGroup, ...groupItemProps }) => {
+          {list.map(({ isGroup, ...groupItemProps }) => {
             if (isGroup && groupItemProps.groupItems) {
               return (
                 <CommandMenuListGroupItem key={groupItemProps.id} id="group">

diff --git a/apps/example/modules/HowToUse/HowToUse.tsx b/apps/example/modules/HowToUse/HowToUse.tsx
@@ -61,7 +61,7 @@ export const HowToUse: FunctionComponent = () => {
       <SectionTitleWrapper>
         <SectionTitle style={{ y }}>How to use it?</SectionTitle>
       </SectionTitleWrapper>
-      <HowToUseWrapper id="howToUse">
+      <HowToUseWrapper id="howToUseBasic">
         <HowToUseContent>
           {HOW_TO_USE_DATA.map(({ message, codeMarkdown }, index) => (
             <HowToUseItem

diff --git a/apps/example/modules/HowToUse/constants.ts b/apps/example/modules/HowToUse/constants.ts
@@ -6,7 +6,7 @@ type HowToUseData = {
 const BASIC: HowToUseData = {
   message:
     'Curabitur pellentesque nibh nibh, at maximus ante fermentum sit amet. Pellentesque commodo lacus at sodales sodales. Quisque sagittis orci ut diam condimentum, vel euismod erat placerat. In iaculis arcu eros, eget tempus orci facilisis id.',
-  codeMarkdown: `const { selectedItem, selectedItemRef, wrapperProps, searchProps, preparedList } = useCommandMenu({ config })`
+  codeMarkdown: `const { selectedItem, selectedItemRef, menuProps, searchProps, list } = useCommandMenu({ config })`
 }
 
 const CONFIG: HowToUseData = {
@@ -41,21 +41,23 @@ const USAGE: HowToUseData = {
   message:
     'Curabitur pellentesque nibh nibh, at maximus ante fermentum sit amet. Pellentesque commodo lacus at sodales sodales. Quisque sagittis orci ut diam condimentum, vel euismod erat placerat. In iaculis arcu eros, eget tempus orci facilisis id.',
   codeMarkdown: `return (
-  <CommandMenu {...wrapperProps}>
+  <CommandMenu {...menuProps}>
     <SearchInput {...searchProps} type="text" />
     <CommandMenuList>
-      {preparedList.map(({ id, label, icon, description }) => {
+      {list.map(({ id, label, icon, description }) => {
         const isSelected = id === selectedItem
         return (
           <CommandMenuListItemWrapper
             key={id}
             ref={isSelected ? selectedItemRef : null}
             isSelected={isSelected}
           >
-            {icon && <CommandMenuListItemIcon name={icon as any} />}
+            {icon && <CommandMenuListItemIcon name={icon} />}
             <CommandMenuListItemLabel>{label}</CommandMenuListItemLabel>
             {description && (
-              <CommandMenuListItemDescription>{description}</CommandMenuListItemDescription>
+              <CommandMenuListItemDescription>
+                {description}
+              </CommandMenuListItemDescription>
             )}
           </CommandMenuListItemWrapper>
         )