feat: add blockquote component (#218)

apps/docs/content/3-components/2-library/20-blockquote.mdx

@@ -0,0 +1,25 @@
+---
+title: Blockquote
+description: Blockquote HTML Component
+draft: false
+status: alpha
+---
+
+# Blockquote
+
+<ComponentStatusBlock componentId="blockquote" />
+
+## When to use this component
+
+Use the inset text component to differentiate a block of text from the content that surrounds it, for example:
+
+- quotes
+- examples
+- additional information about the page
+
+## When not to use this component
+
+Some users do not notice inset text if it’s used on complex pages or near to other visually prominent elements.
+For this reason, avoid using inset text as a way of highlighting very important information that users need to see.
+
+If you need to draw attention to very important content, like legal information, use the warning text component instead.

apps/docs/dictionary.txt

@@ -65,4 +65,6 @@ centered
 data-testid
 flexbox-based
 checkboxes
-dropdown
+dropdown
+Blockquote
+blockquote

apps/docs/src/lib/components.ts

@@ -443,8 +443,8 @@ export function getComponents(): ComponentDetail[] {
       ],
     },
     {
-      id: 'inset-text',
-      name: 'Inset Text',
+      id: 'blockquote',
+      name: 'Blockquote',
       statuses: [
         {
           platform: {
@@ -456,14 +456,16 @@ export function getComponents(): ComponentDetail[] {
         {
           platform: {
             id: 'global',
+            href: '?path=/docs/typography-blockquote--docs',
           },
-          status: 'considering',
+          status: 'alpha',
         },
         {
           platform: {
             id: 'react',
+            href: '?path=/docs/typography-blockquote--docs',
           },
-          status: 'considering',
+          status: 'alpha',
         },
       ],
     },

packages/html/ds/src/blockquote/blockquote.html

@@ -0,0 +1,9 @@
+{% macro govieBlockquote(props) %}
+
+  <blockquote
+    class="gi-my-6 gi-p-4 gi-border-l-2xl gi-border-gray-400 gi-text-sm md:gi-text-md"
+  >
+    {{ props.content | safe | trim }}
+  </blockquote>
+
+{% endmacro %}

packages/html/ds/src/blockquote/blockquote.schema.ts

@@ -0,0 +1,10 @@
+import * as zod from 'zod';
+
+export const blockquoteSchema = zod.object({
+  content: zod.string({
+    description: 'Content for blockquote.',
+    required_error: 'Content is required',
+  }),
+});
+
+export type BlockquoteProps = zod.infer<typeof blockquoteSchema>;

packages/html/ds/src/blockquote/blockquote.stories.tsx

@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { renderComponent } from '../storybook/storybook';
+import html from './blockquote.html?raw';
+import { BlockquoteProps } from './blockquote.schema';
+
+const macro = { name: 'govieBlockquote', html };
+
+const Blockquote = renderComponent<BlockquoteProps>(macro);
+
+const meta = {
+  component: Blockquote,
+  title: 'Typography/Blockquote',
+  parameters: {
+    macro,
+  },
+} satisfies Meta<typeof Blockquote>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  argTypes: {
+    content: {
+      control: 'text',
+      type: { name: 'string', required: true },
+      description: 'The text content of the blockquote.',
+    },
+  },
+  args: {
+    content:
+      'It can take up to 8 weeks to register a lasting power of attorney if there are no mistakes in the application.',
+  },
+};

packages/html/ds/src/blockquote/blockquote.test.ts

@@ -0,0 +1,28 @@
+import { render } from '../common/render';
+import html from './blockquote.html?raw';
+import { BlockquoteProps } from './blockquote.schema';
+
+describe('govieBlockquote', () => {
+  const renderBlockquote = render<BlockquoteProps>({
+    componentName: 'blockquote',
+    macroName: 'govieBlockquote',
+    html,
+  });
+
+  it('should render a blockquote with the correct content', () => {
+    const screen = renderBlockquote({
+      content: 'This is a blockquote',
+    });
+    const pElement = screen.getByText('This is a blockquote');
+    expect(pElement).toBeTruthy();
+    expect(pElement.tagName.toLowerCase()).toBe('blockquote');
+  });
+
+  it('should pass axe accessibility tests', async () => {
+    const screen = renderBlockquote({
+      content: 'Accessible blockquote',
+    });
+
+    await screen.axe();
+  });
+});

packages/react/ds/src/blockquote/blockquote.stories.tsx

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Blockquote } from './blockquote.js';
+
+const meta = {
+  title: 'typography/Blockquote',
+  component: Blockquote,
+} satisfies Meta<typeof Blockquote>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    children:
+      'It can take up to 8 weeks to register a lasting power of attorney if there are no mistakes in the application.',
+  },
+};

packages/react/ds/src/blockquote/blockquote.tsx

@@ -0,0 +1,9 @@
+export function Blockquote({ children }: { children: React.ReactNode }) {
+  return (
+    <blockquote
+      className={`gi-my-6 gi-p-4 gi-border-l-2xl gi-border-gray-400 gi-text-sm md:gi-text-md`}
+    >
+      {children}
+    </blockquote>
+  );
+}

packages/react/ds/src/index.ts

@@ -13,3 +13,4 @@ export * from './label/label.js';
 export * from './hint-text/hint-text.js';
 export * from './form-group/form-group.js';
 export * from './error-text/error-text.js';
+export * from './blockquote/blockquote.js';

packages/react/ds/src/text/text.tsx

@@ -1,6 +1,15 @@
 import { cn } from '../cn.js';
 
-export type TextAs = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span';
+export type TextAs =
+  | 'h1'
+  | 'h2'
+  | 'h3'
+  | 'h4'
+  | 'h5'
+  | 'h6'
+  | 'p'
+  | 'span'
+  | 'blockquote';
 export type TextSize = 'xl' | 'lg' | 'md' | 'sm' | 'xs' | '2xs';
 
 function getTextClass({ as, size }: { as: TextAs; size?: TextSize }) {