fix: fixed typography, display and links sections

openedx · Oct 27, 2024 · 62aa49d · 62aa49d
1 parent 70673e4
commit 62aa49d
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 8 deletions.
diff --git a/styles/css/core/variables.css b/styles/css/core/variables.css
@@ -143,8 +143,8 @@
   --pgn-typography-font-size-h1-mobile: 2.25rem; /* Mobile font size of heading level 1. */
   --pgn-typography-font-size-h1-base: 2.5rem; /* Base font size of heading level 1. */
   --pgn-typography-font-size-micro: 0.688rem; /* Micro utils text font size. */
-  --pgn-typography-font-size-xs: 0.75rem; /* X-small font size. */
-  --pgn-typography-font-size-sm: 0.875rem; /* Small font size. */
+  --pgn-typography-font-size-xs: 75%; /* X-small font size. */
+  --pgn-typography-font-size-sm: 87.5%; /* Small font size. */
   --pgn-typography-font-size-lg: calc(var(--pgn-typography-font-size-base) * 1.25); /* Lead text font size. */
   --pgn-typography-font-size-base: 1.125rem; /* Base font size. */
   --pgn-typography-font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; /* Monospace font family. */

diff --git a/www/src/components/_doc-elements.scss b/www/src/components/_doc-elements.scss
@@ -342,3 +342,14 @@
     grid-template-columns: repeat(4, 1fr); // 4 columns for large+ screens
   }
 }
+
+.pgn-doc__code-display-block {
+  .pgn__data-table-cell-wrap {
+    max-width: max-content;
+  }
+
+  @media (--pgn-size-breakpoint-max-width-md) {
+    overflow: hidden;
+    overflow-x: scroll;
+  }
+}
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/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}