diff --git a/src/__cosmos__/fixtures/Accordion.fixture.tsx b/src/__cosmos__/fixtures/Accordion.fixture.tsx
index ab8eac9..53fa008 100644
--- a/src/__cosmos__/fixtures/Accordion.fixture.tsx
+++ b/src/__cosmos__/fixtures/Accordion.fixture.tsx
@@ -8,14 +8,18 @@ import { CodeExample } from '../code-example';
export default function AccordionFixture() {
return (
-
-
Accordion Component
+
+
+ Accordion Component
+
-
-
Ethereum Basics
+
+
+ Ethereum Basics
+
+ code={`What is Ethereum?
@@ -46,7 +50,7 @@ export default function AccordionFixture() {
`}
>
-
+ What is Ethereum?
@@ -79,11 +83,13 @@ export default function AccordionFixture() {
-
-
Ethereum Technology
+
+
+ Ethereum Technology
+
+ code={`
What is the Ethereum Virtual Machine (EVM)?
@@ -117,7 +123,7 @@ export default function AccordionFixture() {
`}
>
-
+
What is the Ethereum Virtual Machine (EVM)?
@@ -153,11 +159,13 @@ export default function AccordionFixture() {
-
-
Ethereum Ecosystem
+
+
+ Ethereum Ecosystem
+
+ code={`What are dApps?
@@ -189,7 +197,7 @@ export default function AccordionFixture() {
`}
>
-
+ What are dApps?
diff --git a/src/__cosmos__/fixtures/AlertDialog.fixture.tsx b/src/__cosmos__/fixtures/AlertDialog.fixture.tsx
index 96a844d..d6f300f 100644
--- a/src/__cosmos__/fixtures/AlertDialog.fixture.tsx
+++ b/src/__cosmos__/fixtures/AlertDialog.fixture.tsx
@@ -21,22 +21,24 @@ export default function AlertDialogFixture() {
const [showConfirmDialog, setShowConfirmDialog] = useState(false);
return (
-
-
+
+
-
-
Alert Dialog Component
-
+
+
Alert Dialog Component
+
A modal dialog that interrupts the user with important content and
expects a response.
-
-
Using AlertDialogTrigger
+
+
+ Using AlertDialogTrigger
+
@@ -79,11 +81,13 @@ export default function AlertDialogFixture() {
Filled Small
@@ -94,18 +96,18 @@ export default function BadgeFixture() {
-
-
Long Text
+
+
Long Text
+ code={`
This is a badge with very long text that should truncate
This is a small badge with long text
`}
>
-
+
This is a badge with very long text that should truncate
diff --git a/src/__cosmos__/fixtures/Button.fixture.tsx b/src/__cosmos__/fixtures/Button.fixture.tsx
index 01236c0..ff41c7e 100644
--- a/src/__cosmos__/fixtures/Button.fixture.tsx
+++ b/src/__cosmos__/fixtures/Button.fixture.tsx
@@ -6,46 +6,46 @@ import { ThemeToggle } from '../theme-toggle';
export default function ButtonFixture() {
return (
-
-
+
+
-
-
Button Component
-
+
+
Button Component
+
A button component that allows users to perform actions.
-
-
Variants
+
+
Variants
+ code={`
`}
>
-
+
-
-
Sizes
+
+
Sizes
+ code={`
`}
>
-
+
@@ -53,27 +53,27 @@ export default function ButtonFixture() {
-
-
States
+
+
States
+ code={`
`}
>
-
+
-
-
All Combinations
+
+
All Combinations
+ code={`
`}
>
-
+
-
-
Icon Buttons
+
+
Icon Buttons
+ code={`
@@ -132,7 +132,7 @@ export default function ButtonFixture() {
`}
>
-
+
@@ -143,11 +143,11 @@ export default function ButtonFixture() {
-
-
Icon Button Sizes
+
+
Icon Button Sizes
+ code={`
@@ -162,7 +162,7 @@ export default function ButtonFixture() {
`}
>
-
+
diff --git a/src/__cosmos__/fixtures/ButtonGroup.fixture.tsx b/src/__cosmos__/fixtures/ButtonGroup.fixture.tsx
index 0eaeb03..980c00d 100644
--- a/src/__cosmos__/fixtures/ButtonGroup.fixture.tsx
+++ b/src/__cosmos__/fixtures/ButtonGroup.fixture.tsx
@@ -10,22 +10,22 @@ import { ThemeToggle } from '../theme-toggle';
export default function ButtonGroupFixture() {
return (
-
-
+
+
-
-
Button Group Component
-
+
+
Button Group Component
+
A button group component that groups related buttons together with
proper visual separation.
-
-
Primary Actions
+
+
Primary Actions
@@ -40,8 +40,8 @@ export default function ButtonGroupFixture() {
-
-
Secondary Actions
+
+
Secondary Actions
@@ -58,8 +58,8 @@ export default function ButtonGroupFixture() {
-
-
Navigation
+
+
Navigation
@@ -76,8 +76,8 @@ export default function ButtonGroupFixture() {
-
-
Vertical Menu
+
+
Vertical Menu
@@ -94,8 +94,8 @@ export default function ButtonGroupFixture() {
-
-
Export Options
+
+
Export Options
@@ -116,13 +116,13 @@ export default function ButtonGroupFixture() {
-
-
Button Sizes
+
+
Button Sizes
+ code={`
-
Small Buttons
+
Small Buttons
-
Default Buttons
+
Default Buttons
@@ -146,7 +146,7 @@ export default function ButtonGroupFixture() {
-
Large Buttons
+
Large Buttons
`}
>
-
+
-
Small Buttons
+
+ Small Buttons
+
-
Default Buttons
+
+ Default Buttons
+
@@ -184,7 +188,9 @@ export default function ButtonGroupFixture() {
-
Large Buttons
+
+ Large Buttons
+
-
-
With Disabled State
+
+
With Disabled State
@@ -218,8 +224,8 @@ export default function ButtonGroupFixture() {
-
-
Text Editor Actions
+
+
Text Editor Actions
diff --git a/src/__cosmos__/fixtures/Card.fixture.tsx b/src/__cosmos__/fixtures/Card.fixture.tsx
index 26803ba..9888e8d 100644
--- a/src/__cosmos__/fixtures/Card.fixture.tsx
+++ b/src/__cosmos__/fixtures/Card.fixture.tsx
@@ -14,40 +14,42 @@ import { ThemeToggle } from '../theme-toggle';
export default function CardFixture() {
return (
-
-
+
+
-
-
Card Component
-
+
+
Card Component
+
A card component that displays content in a contained box with
optional header, footer, and actions.
-
-
Basic Card
+
+
Basic Card
-
+
This is a basic card with only content.
`}
>
-
+
This is a basic card with only content.
-
-
Card with Header and Title
+
+
+ Card with Header and Title
+
@@ -72,8 +74,8 @@ export default function CardFixture() {
-
-
+
+
Card with Header, Content, and Footer
-
-
Card with Action
+
+
Card with Action
@@ -146,11 +148,11 @@ export default function CardFixture() {
-
-
Card Examples
+
+
Card Examples
+ code={`
User Profile
@@ -159,7 +161,7 @@ export default function CardFixture() {
-
+
Name: John Doe
@@ -187,7 +189,7 @@ export default function CardFixture() {
-
+
Progress: 75%
@@ -202,7 +204,7 @@ export default function CardFixture() {
`}
>
-
+
User Profile
@@ -211,7 +213,7 @@ export default function CardFixture() {
-
+
Name: John Doe
@@ -239,7 +241,7 @@ export default function CardFixture() {
-