docs: v5 examples

contentful · Jan 11, 2024 · 4cf7dc4 · 4cf7dc4
1 parent cc98332
commit 4cf7dc4
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 66 deletions.
diff --git a/packages/components/icon/examples/IconColorsExample.tsx b/packages/components/icon/examples/IconColorsExample.tsx
@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { CalendarBlankIcon } from '@contentful/f36-icons';
+import { Flex } from '@contentful/f36-components';
+import tokens from '@contentful/f36-tokens';
+
+export default function IconColorsExample() {
+  return (
+    <Flex flexDirection="column">
+      <CalendarBlankIcon variant={tokens.gray900} />
+
+      <CalendarBlankIcon color={tokens.blue500} />
+
+      <div style={{ backgroundColor: '#8091a5' }}>
+        <CalendarBlankIcon color={tokens.colorWhite} />
+      </div>
+    </Flex>
+  );
+}
diff --git a/packages/components/icon/examples/IconSizesExample.tsx b/packages/components/icon/examples/IconSizesExample.tsx
@@ -1,24 +1,18 @@
 import * as React from 'react';
-import { CalendarIcon } from '@contentful/f36-icons';
+import { CalendarBlankIcon } from '@contentful/f36-icons';
 import { Stack, Flex, Text } from '@contentful/f36-components';
 
 export default function IconSizesExample() {
   return (
     <Stack>
       <Flex alignItems="center">
-        <CalendarIcon size="tiny" /> <Text>Tiny</Text>
+        <CalendarBlankIcon size="tiny" /> <Text>Tiny</Text>
       </Flex>
       <Flex alignItems="center">
-        <CalendarIcon size="small" /> <Text>Small</Text>
+        <CalendarBlankIcon size="small" /> <Text>Small</Text>
       </Flex>
       <Flex alignItems="center">
-        <CalendarIcon size="medium" /> <Text>Medium</Text>
-      </Flex>
-      <Flex alignItems="center">
-        <CalendarIcon size="large" /> <Text>Large</Text>
-      </Flex>
-      <Flex alignItems="center">
-        <CalendarIcon size="xlarge" /> <Text>Extra large</Text>
+        <CalendarBlankIcon size="medium" /> <Text>Medium</Text>
       </Flex>
     </Stack>
   );

diff --git a/packages/components/icon/examples/IconVariantsExample.tsx b/packages/components/icon/examples/IconVariantsExample.tsx