[react] feat: Added docs for components/Role

sites/dev/docs/reference/packages/react/components/profile/readme.mdx

@@ -13,7 +13,7 @@ import { AvatarExample, OwnProfileExample, UserProfileExample } from './_example
 
 ## Components
 
-The **Json** component family provides the following components:
+The **Profile** component family provides the following components:
 
 - [Avatar](#avatar)
 - [OwnProfile](#ownprofile)

sites/dev/docs/reference/packages/react/components/role/_examples.js

@@ -0,0 +1,15 @@
+import React from 'react'
+import { RoleBlock, UserVisitorContent } from '@freesewing/react/components/Role'
+
+export const RoleBlockExample = () => (
+  <RoleBlock role="admin">
+    <p>Wow, you are an admin! This content is admin-only.</p>
+  </RoleBlock>
+)
+
+export const UserVisitorContentExample = () => (
+  <UserVisitorContent
+    userContent={<p>You are a user. This content is only for users.</p>}
+    visitorContent={<p>You are a visitor. This content is only for visitors.</p>}
+  />
+)

sites/dev/docs/reference/packages/react/components/role/readme.mdx

@@ -2,6 +2,28 @@
 title: Role
 ---
 
-:::note
-This page is yet to be created
-:::
+import { DocusaurusDoc } from '@freesewing/react/components/Docusaurus'
+import { ComponentDocs } from '@site/src/components/component-docs.js'
+import * as jsdoc from '@site/prebuild/jsdoc/components.role.mjs'
+import { RoleBlockExample, UserVisitorContentExample } from './_examples.js'
+
+<DocusaurusDoc>
+
+- [Components](#components)
+
+## Components
+
+The **Role** component family provides the following components:
+
+- [RoleBlock](#roleblock)
+- [UserVisitorContent](#uservisitorcontent)
+
+### RoleBlock
+
+<ComponentDocs docs={jsdoc.jsdocRoleBlock} example={RoleBlockExample} />
+
+### UserVisitorContent
+
+<ComponentDocs docs={jsdoc.jsdocUserVisitorContent} example={UserVisitorContentExample} />
+
+</DocusaurusDoc>