docs: fix figma kit pages

chakra-ui · May 10, 2024 · e8659d9 · e8659d9
1 parent 12e0025
commit e8659d9
Show file tree

Hide file tree

Showing 7 changed files with 30 additions and 29 deletions.
diff --git a/packages/react/__stories__/card.stories.tsx b/packages/react/__stories__/card.stories.tsx
@@ -49,7 +49,7 @@ export const Variants = () => {
                   </Text>
                 </Card.Body>
                 <Card.Footer>
-                  <Button variant="solid" colorScheme="blue">
+                  <Button variant="solid" colorPalette="blue">
                     Button
                   </Button>
                 </Card.Footer>
@@ -97,7 +97,7 @@ export const Sizes = () => {
                         </Text>
                       </Card.Body>
                       <Card.Footer>
-                        <Button variant="solid" colorScheme="blue">
+                        <Button variant="solid" colorPalette="blue">
                           Button
                         </Button>
                       </Card.Footer>
@@ -137,10 +137,10 @@ export const WithImage = () => (
     </Card.Body>
     <Card.Footer>
       <HStack gap="2">
-        <Button variant="solid" colorScheme="blue">
+        <Button variant="solid" colorPalette="blue">
           Buy now
         </Button>
-        <Button variant="ghost" colorScheme="blue">
+        <Button variant="ghost" colorPalette="blue">
           Add to cart
         </Button>
       </HStack>
@@ -165,7 +165,7 @@ export const Horizontal = () => (
         </Text>
       </Card.Body>
       <Card.Footer>
-        <Button variant="solid" colorScheme="blue">
+        <Button variant="solid" colorPalette="blue">
           Buy Latte
         </Button>
       </Card.Footer>

diff --git a/packages/react/__stories__/slider.stories.tsx b/packages/react/__stories__/slider.stories.tsx
@@ -131,5 +131,5 @@ export const WithSteps = () => {
 }
 
 export const VerticalSlider = () => {
-  return <DemoSlider colorScheme="red" orientation="vertical" />
+  return <DemoSlider colorPalette="red" orientation="vertical" />
 }
diff --git a/packages/react/__stories__/tag.stories.tsx b/packages/react/__stories__/tag.stories.tsx
@@ -118,40 +118,40 @@ export const Sizes = () => {
 }
 
 // export const WithStartIcon = () => (
-//   <Tag.Root colorScheme="cyan">
+//   <Tag.Root colorPalette="cyan">
 //     <Icon as={HiPlus} w="12px" h="12px" />
 //     <Tag.Label>Green</Tag.Label>
 //   </Tag.Root>
 // )
 
 // export const WithEndIcon = () => (
-//   <Tag.Root colorScheme="cyan">
+//   <Tag.Root colorPalette="cyan">
 //     <Tag.Label>Green</Tag.Label>
 //     <Icon as={HiPlus} w="12px" h="12px" />
 //   </Tag.Root>
 // )
 
 // export const WithCloseTrigger = () => (
 //   <>
-//     <Tag.Root variant="solid" size="sm" colorScheme="cyan">
+//     <Tag.Root variant="solid" size="sm" colorPalette="cyan">
 //       <Tag.Label>Tab Label</Tag.Label>
 //       <Tag.CloseTrigger />
 //     </Tag.Root>
 
-//     <Tag.Root variant="solid" size="md" colorScheme="cyan">
+//     <Tag.Root variant="solid" size="md" colorPalette="cyan">
 //       <Tag.Label>Tab Label</Tag.Label>
 //       <Tag.CloseTrigger />
 //     </Tag.Root>
 
-//     <Tag.Root variant="solid" size="lg" colorScheme="cyan">
+//     <Tag.Root variant="solid" size="lg" colorPalette="cyan">
 //       <Tag.Label>Tab Label</Tag.Label>
 //       <Tag.CloseTrigger />
 //     </Tag.Root>
 //   </>
 // )
 
 // export const WithCustomElement = () => (
-//   <Tag.Root size="lg" colorScheme="red" borderRadius="full">
+//   <Tag.Root size="lg" colorPalette="red" borderRadius="full">
 //     <Avatar.Root
 //       src="https://bit.ly/sage-adebayo"
 //       size="xs"

diff --git a/website/content/figma/ui-kit.mdx b/website/content/figma/ui-kit.mdx
@@ -18,14 +18,4 @@ interfaces faster.
 - **🎛 Component properties match Chakra UI**
 - **✨ Improved layer structure and naming**
 
-<Box my='8'>
-  <Button
-    leftIcon={<FiFigma />}
-    as='a'
-    colorScheme='teal'
-    href='https://www.figma.com/community/file/971408767069651759'
-    target='_blank'
-    size='lg'
-    children='Get Figma UI Kit'
-  />
-</Box>
+  <FigmaKitButton />
diff --git a/website/src/components/chakra-pro/docs-page-ad.tsx b/website/src/components/chakra-pro/docs-page-ad.tsx
@@ -1,5 +1,5 @@
 import { Box, Flex } from '@chakra-ui/react'
-import NextImage from 'next/image'
+import Image from 'next/image'
 import { getUrl } from './get-url'
 
 const DocsPageChakraProAd = () => (
@@ -13,10 +13,9 @@ const DocsPageChakraProAd = () => (
   >
     <a href={getUrl('docs-ad')} target='_blank' rel='noopener sponsored'>
       <Box w='xs' h='100px' bg='gray.300' mr='4'>
-        <NextImage
+        <Image
           alt='chakra ui pro'
           src='/chakra-pro-ad.png'
-          layout='fixed'
           width='150'
           height='100'
         />

diff --git a/website/src/components/mdx-components/carbon-ad.tsx b/website/src/components/mdx-components/carbon-ad.tsx
@@ -1,5 +1,5 @@
 import { Box, Flex, SystemStyleObject, chakra } from '@chakra-ui/react'
-import NextImage from 'next/image'
+import Image from 'next/image'
 import * as React from 'react'
 import loadScript from 'utils/load-script'
 
@@ -86,10 +86,9 @@ const DocsPageChakraProAd = () => (
       target='_blank'
     >
       <Box w='xs' h='100px' bg='gray.300' mr='4'>
-        <NextImage
+        <Image
           alt='chakra ui pro'
           src='/chakra-pro-ad.png'
-          layout='fixed'
           width='150'
           height='100'
         />

diff --git a/website/src/components/mdx-components/mdx-components.tsx b/website/src/components/mdx-components/mdx-components.tsx
@@ -16,6 +16,7 @@ import SandpackEmbed from 'components/sandpack-embed'
 import { TutorialCodeBlock } from 'components/tutorial/tutorial-code-block'
 import { TutorialFileAction } from 'components/tutorial/tutorial-file-action'
 import Image from 'next/image'
+import { FiFigma } from 'react-icons/fi'
 import CarbonAd from './carbon-ad'
 import CodeBlock from './codeblock/codeblock'
 import ComponentLinks from './component-links'
@@ -37,6 +38,7 @@ const MdxList = chakra('ul', {
 
 export const MDXComponents = {
   ...Chakra,
+  FiFigma: FiFigma,
   Image: ({ ratio, border, src, height, ...props }: any) => (
     <AspectRatio
       my='5'
@@ -145,4 +147,15 @@ export const MDXComponents = {
   FeaturesOverview,
   TutorialFileAction,
   PackageManagers,
+  FigmaKitButton: () => (
+    <Chakra.Button asChild colorPalette='teal' size='lg' my='8'>
+      <a
+        href='https://www.figma.com/community/file/971408767069651759'
+        target='_blank'
+      >
+        <FiFigma />
+        Get Figma UI Kit
+      </a>
+    </Chakra.Button>
+  ),
 }