+
+
);
diff --git a/src/library/CaniuseLink/CaniuseLink.stories.tsx b/src/library/CaniuseLink/CaniuseLink.stories.tsx
new file mode 100644
index 0000000..498f141
--- /dev/null
+++ b/src/library/CaniuseLink/CaniuseLink.stories.tsx
@@ -0,0 +1,42 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { CaniuseLink } from "./CaniuseLink";
+import {
+ GithubPermalinkProvider,
+} from "../config/GithubPermalinkContext";
+import "../GithubPermalink/github-permalink.css";
+
+const meta: Meta = {
+ component: CaniuseLink,
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+export const BlockSuccess: Story = {
+ render: () => (
+
+
+ ),
+};
+
+export const InlineSuccess: Story = {
+ render: () => (
+
+
+ ),
+};
+
+export const BlockError: Story = {
+ render: () => (
+
+
+ ),
+};
\ No newline at end of file
diff --git a/src/library/CaniuseLink/CaniuseLink.test.ts b/src/library/CaniuseLink/CaniuseLink.test.ts
new file mode 100644
index 0000000..a7d6058
--- /dev/null
+++ b/src/library/CaniuseLink/CaniuseLink.test.ts
@@ -0,0 +1,71 @@
+import { expect, test, describe, vi } from 'vitest'
+import { defaultGetCaniuseFn } from '../config/defaultFunctions'
+
+// Mock fetch for testing
+global.fetch = vi.fn()
+
+describe('defaultGetCaniuseFn', () => {
+ test('should handle successful response', async () => {
+ const mockResponse = {
+ title: 'CSS Flexible Box Layout Module',
+ description: 'Method of positioning elements in horizontal or vertical stacks.',
+ stats: {
+ chrome: {
+ '89': 'y',
+ '90': 'y'
+ },
+ firefox: {
+ '84': 'y',
+ '85': 'y'
+ }
+ }
+ }
+
+ vi.mocked(fetch).mockResolvedValueOnce({
+ ok: true,
+ json: async () => mockResponse,
+ } as Response)
+
+ const result = await defaultGetCaniuseFn('flexbox')
+
+ expect(result).toEqual({
+ title: 'CSS Flexible Box Layout Module',
+ description: 'Method of positioning elements in horizontal or vertical stacks.',
+ stats: {
+ chrome: {
+ '89': 'y',
+ '90': 'y'
+ },
+ firefox: {
+ '84': 'y',
+ '85': 'y'
+ }
+ },
+ status: 'ok'
+ })
+ })
+
+ test('should handle 404 response', async () => {
+ vi.mocked(fetch).mockResolvedValueOnce({
+ ok: false,
+ status: 404,
+ headers: new Headers(),
+ } as Response)
+
+ const result = await defaultGetCaniuseFn('non-existent-feature')
+
+ expect(result).toEqual({
+ status: '404'
+ })
+ })
+
+ test('should handle network error', async () => {
+ vi.mocked(fetch).mockRejectedValueOnce(new Error('Network error'))
+
+ const result = await defaultGetCaniuseFn('flexbox')
+
+ expect(result).toEqual({
+ status: 'other-error'
+ })
+ })
+})
\ No newline at end of file
diff --git a/src/library/CaniuseLink/CaniuseLink.tsx b/src/library/CaniuseLink/CaniuseLink.tsx
new file mode 100644
index 0000000..027e9cf
--- /dev/null
+++ b/src/library/CaniuseLink/CaniuseLink.tsx
@@ -0,0 +1,30 @@
+"use client"
+
+import { useContext, useEffect, useState } from "react";
+import { GithubPermalinkContext, CaniuseLinkDataResponse } from "../config/GithubPermalinkContext";
+import { CaniuseLinkBase, CaniuseLinkBaseProps } from "./CaniuseLinkBase";
+
+type CaniuseLinkProps = Omit;
+
+export function CaniuseLink(props: CaniuseLinkProps) {
+ const { feature } = props;
+ const [data, setData] = useState(null as null | CaniuseLinkDataResponse);
+ const { getCaniuseFn, githubToken, onError } = useContext(GithubPermalinkContext);
+ const [isLoading, setIsLoading] = useState(true);
+
+ useEffect(() => {
+ getCaniuseFn(feature, githubToken, onError).then((v) => {
+ setIsLoading(false);
+ setData(v);
+ });
+ }, [getCaniuseFn, githubToken, feature, onError]);
+
+ if (isLoading) {
+ return null;
+ }
+ if (!data) {
+ throw new Error("Loading is complete, but no data was returned.");
+ }
+
+ return = {
+ component: CaniuseLinkBase,
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+const mockFlexboxData = {
+ title: "CSS Flexible Box Layout Module",
+ description: "Method of positioning elements in horizontal or vertical stacks. Support includes all properties prefixed with `flex`, as well as `display: flex`, `display: inline-flex`, `align-content`, `align-items`, `align-self`, `justify-content` and `order`.",
+ stats: {
+ chrome: {
+ "89": "y",
+ "90": "y",
+ "91": "y",
+ "92": "y",
+ "93": "y"
+ },
+ firefox: {
+ "84": "y",
+ "85": "y",
+ "86": "y",
+ "87": "y",
+ "88": "y"
+ },
+ safari: {
+ "14.0": "y",
+ "14.1": "y",
+ "15.0": "y",
+ "15.1": "y",
+ "15.2": "y"
+ },
+ edge: {
+ "89": "y",
+ "90": "y",
+ "91": "y",
+ "92": "y",
+ "93": "y"
+ },
+ ie: {
+ "8": "n",
+ "9": "n",
+ "10": "a x",
+ "11": "a"
+ }
+ },
+ status: "ok" as const
+};
+
+export const BlockSuccess: Story = {
+ render: () => (
+
+
+ }>
+ React Github Permalink
- - - See the Storybook +See the Storybook
+ +CaniuseLink Demo
+
+
+
+ Live API Example
+
+
+
+ Mock Data Example
+
+
+ Inline Usage
+
+ This layout uses
+ This example uses{" "}
+
+ This example uses {" "}
+
+ This example uses {" "}
+
+
+ {data.description && (
+ {data.title}
+ + View on caniuse.com + +{data.description}
+ )} +
+
+
+ );
+ }
+
+ return (
+
+ {Object.entries(data.stats).map(([browser, versions]) => (
+
+
+
+ ))}
+
+ {getBrowserName(browser)}
+
+
+ {Object.entries(versions).slice(-5).map(([version, support]) => (
+
+
+ {version}
+
+ ))}
+
+
+ );
+}
+
+function getBrowserName(browser: string): string {
+ const browserNames: Record
+ {props.header ?? {feature}}
+
+ {props.children}
+