website: update blockquote documentation & demo (#1260)

Co-authored-by: Greta <[email protected]>

apps/website/src/examples/Blockquote.footer.tsx

@@ -0,0 +1,25 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import * as React from 'react';
+import { Blockquote } from '@itwin/itwinui-react';
+
+export default () => {
+  return (
+    <Blockquote
+      cite={'https://www.bentley.com/en'}
+      footer={
+        <>
+          — Greg Bentley, <cite>NasdaqListed</cite>
+        </>
+      }
+    >
+      <p>
+        For 36 years we have served engineers with our software, passionately 35 believing that
+        better performing and more resilient infrastructure is 36 essential to improve the quality
+        of life for people everywhere, sustain 37 our environment, and grow our economies.
+      </p>
+    </Blockquote>
+  );
+};

apps/website/src/examples/Blockquote.main.tsx

@@ -6,20 +6,5 @@ import * as React from 'react';
 import { Blockquote } from '@itwin/itwinui-react';
 
 export default () => {
-  return (
-    <Blockquote
-      cite={'https://www.bentley.com/en'}
-      footer={
-        <>
-          — Greg Bentley, <cite>NasdaqListed</cite>
-        </>
-      }
-    >
-      <p>
-        For 36 years we have served engineers with our software, passionately 35 believing that
-        better performing and more resilient infrastructure is 36 essential to improve the quality
-        of life for people everywhere, sustain 37 our environment, and grow our economies.
-      </p>
-    </Blockquote>
-  );
+  return <Blockquote>This is a quote</Blockquote>;
 };

apps/website/src/examples/index.tsx

@@ -29,6 +29,7 @@ export { default as BadgeMainExample } from './Badge.main';
 export { default as BadgeSoftExample } from './Badge.soft';
 export { default as BadgeStatusesExample } from './Badge.statuses';
 
+export { default as BlockquoteFooterExample } from './Blockquote.footer';
 export { default as BlockquoteMainExample } from './Blockquote.main';
 
 export { default as BreadcrumbsButtonExample } from './Breadcrumbs.button';

apps/website/src/pages/docs/blockquote.mdx

@@ -9,19 +9,25 @@ group: typography
 
 import PropsTable from '~/components/PropsTable.astro';
 import LiveExample from '~/components/LiveExample.astro';
-import Placeholder from '~/components/Placeholder.astro';
 import * as AllExamples from '~/examples';
 
 <p>{frontmatter.description}</p>
 
-<Placeholder componentPageName='typography-blockquote' />
-
 <LiveExample src='Blockquote.main.tsx'>
   <AllExamples.BlockquoteMainExample client:load />
 </LiveExample>
 
 Blockquotes are used to isolate and highlight a large quotation made by a source that is external from the content it is quoted in. Sourcing its provenance and original author is strongly suggested. The source is displayed in the bottom right of the blockquote.
 
+## Usage
+
+<LiveExample src='Blockquote.footer.tsx'>
+  <AllExamples.BlockquoteFooterExample client:load />
+</LiveExample>
+
+If the citation was pulled from a website, you can provide the URL using the 'cite' tag for best practice purposes, but the blockquote does not provide a hyperlink to that location.
+
+
 ## Props
 
 <PropsTable path={frontmatter.propsPath} />