From a317c4ec01b60b5368212be2721724749c03d924 Mon Sep 17 00:00:00 2001 From: Gina A <70909035+gndz07@users.noreply.github.com> Date: Thu, 15 Jun 2023 16:32:05 +0200 Subject: [PATCH] feat: accessible icon --- .../AccessibleIcon/AccessibleIcon.stories.tsx | 26 +++ components/AccessibleIcon/AccessibleIcon.tsx | 3 + components/AccessibleIcon/index.tsx | 1 + index.ts | 1 + package-lock.json | 151 ++++++++++++++++++ package.json | 1 + 6 files changed, 183 insertions(+) create mode 100644 components/AccessibleIcon/AccessibleIcon.stories.tsx create mode 100644 components/AccessibleIcon/AccessibleIcon.tsx create mode 100644 components/AccessibleIcon/index.tsx diff --git a/components/AccessibleIcon/AccessibleIcon.stories.tsx b/components/AccessibleIcon/AccessibleIcon.stories.tsx new file mode 100644 index 00000000..6fb1fe01 --- /dev/null +++ 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; + +export const Basic: ComponentStory = (args) => ( + + + + + + + + + + + + + +); diff --git a/components/AccessibleIcon/AccessibleIcon.tsx b/components/AccessibleIcon/AccessibleIcon.tsx new file mode 100644 index 00000000..c05ef439 --- /dev/null +++ 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 new file mode 100644 index 00000000..43ff6082 --- /dev/null +++ b/components/AccessibleIcon/index.tsx @@ -0,0 +1 @@ +export * from './AccessibleIcon'; diff --git a/index.ts b/index.ts index 5760f7ac..47669292 100644 --- 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 index 0a2176d1..897ea39b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,6 +10,7 @@ "license": "Apache-2.0", "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", @@ -3789,6 +3790,110 @@ "@babel/runtime": "^7.13.10" } }, + "node_modules/@radix-ui/react-accessible-icon": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/@radix-ui/react-accessible-icon/-/react-accessible-icon-1.0.3.tgz", + "integrity": "sha512-duVGKeWPSUILr/MdlPxV+GeULTc2rS1aihGdQ3N2qCUPMgxYLxvAsHJM3mCVLF8d5eK+ympmB22mb1F3a5biNw==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/react-visually-hidden": "1.0.3" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0", + "react-dom": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-accessible-icon/node_modules/@radix-ui/react-compose-refs": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.1.tgz", + "integrity": "sha512-fDSBgd44FKHa1FRMU59qBMPFcl2PZE+2nmqunj+BWFyYYjnhIDWL2ItDs3rrbJDQOtzt5nIebLCQc4QRfz6LJw==", + "dependencies": { + "@babel/runtime": "^7.13.10" + }, + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-accessible-icon/node_modules/@radix-ui/react-primitive": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-1.0.3.tgz", + "integrity": "sha512-yi58uVyoAcK/Nq1inRY56ZSjKypBNKTa/1mcL8qdl6oJeEaDbOldlzrGn7P6Q3Id5d+SYNGc5AJgc4vGhjs5+g==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/react-slot": "1.0.2" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0", + "react-dom": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-accessible-icon/node_modules/@radix-ui/react-slot": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.0.2.tgz", + "integrity": "sha512-YeTpuq4deV+6DusvVUW4ivBgnkHwECUu0BiN43L5UCDFgdhsRUWAghhTF5MbvNTPzmiFOx90asDSUjWuCNapwg==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/react-compose-refs": "1.0.1" + }, + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-accessible-icon/node_modules/@radix-ui/react-visually-hidden": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/@radix-ui/react-visually-hidden/-/react-visually-hidden-1.0.3.tgz", + "integrity": "sha512-D4w41yN5YRKtu464TLnByKzMDG/JlMPHtfZgQAu9v6mNakUqGUI9vUrfQKz8NK41VMm/xbZbh76NUTVtIYqOMA==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/react-primitive": "1.0.3" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0", + "react-dom": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, "node_modules/@radix-ui/react-accordion": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/@radix-ui/react-accordion/-/react-accordion-1.0.1.tgz", @@ -38104,6 +38209,52 @@ "@babel/runtime": "^7.13.10" } }, + "@radix-ui/react-accessible-icon": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/@radix-ui/react-accessible-icon/-/react-accessible-icon-1.0.3.tgz", + "integrity": "sha512-duVGKeWPSUILr/MdlPxV+GeULTc2rS1aihGdQ3N2qCUPMgxYLxvAsHJM3mCVLF8d5eK+ympmB22mb1F3a5biNw==", + "requires": { + "@babel/runtime": "^7.13.10", + "@radix-ui/react-visually-hidden": "1.0.3" + }, + "dependencies": { + "@radix-ui/react-compose-refs": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.1.tgz", + "integrity": "sha512-fDSBgd44FKHa1FRMU59qBMPFcl2PZE+2nmqunj+BWFyYYjnhIDWL2ItDs3rrbJDQOtzt5nIebLCQc4QRfz6LJw==", + "requires": { + "@babel/runtime": "^7.13.10" + } + }, + "@radix-ui/react-primitive": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-1.0.3.tgz", + "integrity": "sha512-yi58uVyoAcK/Nq1inRY56ZSjKypBNKTa/1mcL8qdl6oJeEaDbOldlzrGn7P6Q3Id5d+SYNGc5AJgc4vGhjs5+g==", + "requires": { + "@babel/runtime": "^7.13.10", + "@radix-ui/react-slot": "1.0.2" + } + }, + "@radix-ui/react-slot": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.0.2.tgz", + "integrity": "sha512-YeTpuq4deV+6DusvVUW4ivBgnkHwECUu0BiN43L5UCDFgdhsRUWAghhTF5MbvNTPzmiFOx90asDSUjWuCNapwg==", + "requires": { + "@babel/runtime": "^7.13.10", + "@radix-ui/react-compose-refs": "1.0.1" + } + }, + "@radix-ui/react-visually-hidden": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/@radix-ui/react-visually-hidden/-/react-visually-hidden-1.0.3.tgz", + "integrity": "sha512-D4w41yN5YRKtu464TLnByKzMDG/JlMPHtfZgQAu9v6mNakUqGUI9vUrfQKz8NK41VMm/xbZbh76NUTVtIYqOMA==", + "requires": { + "@babel/runtime": "^7.13.10", + "@radix-ui/react-primitive": "1.0.3" + } + } + } + }, "@radix-ui/react-accordion": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/@radix-ui/react-accordion/-/react-accordion-1.0.1.tgz", diff --git a/package.json b/package.json index c2d0875b..b1e9527c 100644 --- 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",