feat: accessible icon

traefik · Jun 15, 2023 · a317c4e · a317c4e
1 parent 163dfdb
commit a317c4e
Show file tree

Hide file tree

Showing 6 changed files with 183 additions and 0 deletions.
diff --git a/components/AccessibleIcon/AccessibleIcon.stories.tsx b/components/AccessibleIcon/AccessibleIcon.stories.tsx
@@ -0,0 +1,26 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { AccessibleIcon } from './AccessibleIcon';
+import * as Icons from '@radix-ui/react-icons';
+import { Flex } from '../Flex';
+import { IconButton } from '../IconButton';
+
+export default {
+  title: 'Components/AccessibleIcon',
+  component: AccessibleIcon,
+} as ComponentMeta<any>;
+
+export const Basic: ComponentStory<any> = (args) => (
+  <Flex gap={3} align="center">
+    <IconButton>
+      <AccessibleIcon label="notification" {...args} size="1">
+        <Icons.BellIcon />
+      </AccessibleIcon>
+    </IconButton>
+
+    <IconButton>
+      <AccessibleIcon label="user settings" {...args} size="2">
+        <Icons.AvatarIcon />
+      </AccessibleIcon>
+    </IconButton>
+  </Flex>
+);
diff --git a/components/AccessibleIcon/AccessibleIcon.tsx b/components/AccessibleIcon/AccessibleIcon.tsx
@@ -0,0 +1,3 @@
+import * as AccessibleIconPrimitive from '@radix-ui/react-accessible-icon';
+
+export const AccessibleIcon = AccessibleIconPrimitive.Root;
diff --git a/components/AccessibleIcon/index.tsx b/components/AccessibleIcon/index.tsx
@@ -0,0 +1 @@
+export * from './AccessibleIcon';
diff --git a/index.ts b/index.ts
@@ -91,6 +91,7 @@ export { VisuallyHidden } from './components/VisuallyHidden';
 export { Avatar } from './components/Avatar';
 export { ButtonSwitchContainer, ButtonSwitchItem } from './components/ButtonSwitch';
 export { TabsContainer, TabsList, TabsTrigger, TabsContent } from './components/Tabs';
+export { AccessibleIcon } from './components/AccessibleIcon';
 
 // Stitches
 export {

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -49,6 +49,7 @@
   },
   "dependencies": {
     "@radix-ui/colors": "^0.1.8",
+    "@radix-ui/react-accessible-icon": "^1.0.3",
     "@radix-ui/react-accordion": "^1.0.1",
     "@radix-ui/react-alert-dialog": "^1.0.2",
     "@radix-ui/react-aspect-ratio": "^1.0.1",
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import * as AccessibleIconPrimitive from '@radix-ui/react-accessible-icon';

		export const AccessibleIcon = AccessibleIconPrimitive.Root;