Use <p> elements in examples

Stop using <div> elements as workarounds because of margins; now that spacing patterns are updated, it should be fine to use the appropriate semantic element.
hypothesis · Oct 4, 2021 · d029df7 · d029df7
1 parent 05e1f7a
commit d029df7
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 16 deletions.
diff --git a/src/pattern-library/components/patterns/ContainerPatterns.js b/src/pattern-library/components/patterns/ContainerPatterns.js
@@ -17,9 +17,7 @@ export default function ContainerPatterns() {
           </p>
           <Library.Demo withSource>
             <div className="hyp-frame">
-              <div>
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-              </div>
+              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
               <div>
                 Sed do eiusmod tempor incididunt ut labore et dolore magna
                 aliqua.
@@ -55,14 +53,14 @@ export default function ContainerPatterns() {
           </p>
           <Library.Demo withSource>
             <div className="hyp-card">
-              <div>
+              <p>
                 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
                 eiusmod tempor incididunt ut labore et dolore magna aliqua.
-              </div>
-              <div>
+              </p>
+              <p>
                 Ut enim ad minim veniam, quis nostrud exercitation ullamco
                 laboris nisi ut aliquip ex ea commodo consequat.
-              </div>
+              </p>
             </div>
           </Library.Demo>
         </Library.Example>
@@ -71,8 +69,10 @@ export default function ContainerPatterns() {
           <p>A card&apos;s hover can be disabled by using a modifying class.</p>
           <Library.Demo withSource>
             <div className="hyp-card--no-hover">
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-              eiusmod tempor incididunt ut labore et dolore magna aliqua.
+              <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+                eiusmod tempor incididunt ut labore et dolore magna aliqua.
+              </p>
             </div>
           </Library.Demo>
         </Library.Example>
@@ -81,9 +81,7 @@ export default function ContainerPatterns() {
           <p>This example shows a card with some available actions.</p>
           <Library.Demo withSource>
             <div className="hyp-card">
-              <div>
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-              </div>
+              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
               <div className="hyp-actions">
                 <IconButton title="User" icon="profile" />
                 <IconButton title="Edit" icon="edit" />

diff --git a/src/pattern-library/components/patterns/PanelComponents.js b/src/pattern-library/components/patterns/PanelComponents.js
@@ -8,7 +8,9 @@ export default function PanelComponents() {
         <Library.Example title="Basic usage">
           <Library.Demo withSource>
             <Panel title="Basic panel">
-              Here is a panel with no close button and very simple content.
+              <p>
+                Here is a panel with no close button and very simple content.
+              </p>
             </Panel>
           </Library.Demo>
         </Library.Example>
@@ -18,9 +20,11 @@ export default function PanelComponents() {
               title="Basic panel with close button"
               onClose={() => alert('close clicked')}
             >
-              Here is a panel with very basic content and a close button.
-              Providing an <code>onClose</code> function will cause a close
-              button to render.
+              <p>Here is a panel with very basic content and a close button.</p>
+              <p>
+                Providing an <code>onClose</code> function will cause a close
+                button to render.
+              </p>
             </Panel>
           </Library.Demo>
         </Library.Example>