fix: fixed typography, display and links sections

openedx · Oct 28, 2024 · 1be86b9 · 1be86b9
1 parent 70673e4
commit 1be86b9
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 7 deletions.
diff --git a/www/src/components/_doc-elements.scss b/www/src/components/_doc-elements.scss
@@ -342,3 +342,19 @@
     grid-template-columns: repeat(4, 1fr); // 4 columns for large+ screens
   }
 }
+
+.pgn-doc__code-display-block,
+.pgn-doc__code-headings-block {
+  .pgn__data-table-cell-wrap {
+    max-width: max-content;
+  }
+
+  @media (--pgn-size-breakpoint-max-width-md) {
+    overflow: hidden;
+    overflow-x: scroll;
+
+    .pgn__data-table-layout-wrapper {
+      overflow-x: initial;
+    }
+  }
+}
diff --git a/www/src/components/typography-page/Display.tsx b/www/src/components/typography-page/Display.tsx
@@ -10,7 +10,7 @@ export default function Display() {
   return (
     <>
       <h2 className="mb-2">Display</h2>
-      <div className="mb-4">
+      <div className="mb-4 pgn-doc__code-display-block">
         <DataTable
           itemCount={displaySizes.length}
           data={displaySizes.map((size) => ({ text: `Display ${size}`, className: `display-${size}` }))}

diff --git a/www/src/components/typography-page/Headings.tsx b/www/src/components/typography-page/Headings.tsx
@@ -18,7 +18,7 @@ export default function Headings() {
   return (
     <>
       <h2 className="mb-2">Headings</h2>
-      <div className="mb-4">
+      <div className="mb-4 pgn-doc__code-headings-block">
         <DataTable
           itemCount={tableData.length}
           data={tableData}

diff --git a/www/src/components/typography-page/Links.tsx b/www/src/components/typography-page/Links.tsx
@@ -1,13 +1,10 @@
 import React from 'react';
 // @ts-ignore
-import { DataTable } from '~paragon-react';
+import { DataTable, Alert } from '~paragon-react';
+import { Info } from '~paragon-icons';
 import { TextCell } from '../TableCells';
 
 const linksClassesAndDescriptions = [
-  {
-    example: <a href="/#">Standalone Link</a>,
-    description: <span>The default style for <code>a</code> tags that don`t appear in a <code>p</code> tag.</span>,
-  },
   {
     example: <span>An <a className="inline-link" href="/foundations/typography/">inline link</a> in a sentence.</span>,
     description: <span>For links inside a <code>p</code> or with the <code>.inline-link</code> class name.</span>,
@@ -34,6 +31,9 @@ export default function Links() {
   return (
     <>
       <h2 className="mb-2">Links</h2>
+      <Alert variant="info" icon={Info}>
+        <a href="/#">Standalone Link</a> - the default style for <code>a</code> tag that appear outside of <code>p</code> tag.
+      </Alert>
       <div className="mb-4">
         <DataTable
           itemCount={4}