diff --git a/package.json b/package.json index 2c8a4c4..d0cd35c 100644 --- a/package.json +++ b/package.json @@ -50,6 +50,7 @@ "@changesets/changelog-github": "0.5.0", "@changesets/cli": "2.27.1", "@evilmartians/harmony": "1.2.0", + "@heroicons/react": "2.0.18", "@rollup/plugin-babel": "6.0.4", "@rollup/plugin-typescript": "11.1.5", "@storybook/addon-a11y": "7.6.4", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index fed0888..6e0e97a 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -37,6 +37,9 @@ devDependencies: '@evilmartians/harmony': specifier: 1.2.0 version: 1.2.0 + '@heroicons/react': + specifier: 2.0.18 + version: 2.0.18(react@18.2.0) '@rollup/plugin-babel': specifier: 6.0.4 version: 6.0.4(@babel/core@7.23.5)(@types/babel__core@7.20.5)(rollup@4.7.0) @@ -2428,6 +2431,14 @@ packages: resolution: {integrity: sha512-OfX7E2oUDYxtBvsuS4e/jSn4Q9Qb6DzgeYtsAdkPZ47znpoNsMgZw0+tVijiv3uGNR6dgNlty6r9rzIzHjtd/A==} dev: true + /@heroicons/react@2.0.18(react@18.2.0): + resolution: {integrity: sha512-7TyMjRrZZMBPa+/5Y8lN0iyvUU/01PeMGX2+RE7cQWpEUIcb4QotzUObFkJDejj/HUH4qjP/eQ0gzzKs2f+6Yw==} + peerDependencies: + react: '>= 16' + dependencies: + react: 18.2.0 + dev: true + /@humanwhocodes/config-array@0.11.13: resolution: {integrity: sha512-JSBDMiDKSzQVngfRjOdFXgFfklaXI4K9nLF49Auh21lmBWRLIK3+xTErTWD4KU54pb6coM6ESE7Awz/FNU3zgQ==} engines: {node: '>=10.10.0'} diff --git a/src/components/Alert.stories.tsx b/src/components/Alert.stories.tsx new file mode 100644 index 0000000..225bce0 --- /dev/null +++ b/src/components/Alert.stories.tsx @@ -0,0 +1,18 @@ +import type { Meta, StoryObj } from "@storybook/react"; + +import { Alert } from "./Alert"; + +const meta = { + component: Alert, + tags: ["autodocs"], +} satisfies Meta<typeof Alert>; +export default meta; + +type Story = StoryObj<typeof meta>; + +export const Basic = { + args: { + children: + "An alert displays a brief, important message, usually at the top of a page. Only text content updates are conveyed to screen readers, preserving focus.", + }, +} satisfies Story; diff --git a/src/components/Alert.tsx b/src/components/Alert.tsx new file mode 100644 index 0000000..68e235a --- /dev/null +++ b/src/components/Alert.tsx @@ -0,0 +1,17 @@ +import { InformationCircleIcon } from "@heroicons/react/24/solid"; + +export interface AlertProps { + children?: React.ReactNode; +} + +export function Alert({ children }: AlertProps) { + return ( + <div + role="alert" + className="grid grid-cols-[auto_1fr] gap-x-2 rounded-2xl bg-ui-neutral-1 p-4 text-base text-ui-neutral-5" + > + <InformationCircleIcon className="h-6 w-6" /> + {children} + </div> + ); +}