Skip to content

Commit 3a62a9e

Browse files
rezrahrezrah
authored
Add table support to Prose (#1114)
* add basic examples * add visual snapshots and translations * update snapshots * add docs example * add changeset * qa feedback - copilot is the goat * add missing stats * update snapshot
1 parent 5ef7878 commit 3a62a9e

File tree

71 files changed

+1295
-26
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

71 files changed

+1295
-26
lines changed

‎.changeset/thirty-days-smoke.md

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
---
2+
'@primer/react-brand': patch
3+
---
4+
5+
Added support for `<table>` elements in the `Prose` component. Tables now render with improved visual appearance.
6+
7+
:link: [Refer to Prose documentation for usage examples](https://primer.style/brand/components/Prose/)

‎apps/next-docs/content/components/Prose/index.mdx

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,68 @@ The `Prose` component renders native HTML elements with Primer Brand styling. `P
6969
<p><code>for-each-ref</code> is extremely useful for listing references, finding which references point at a given object (with <code>--points-at</code>), which references have been merged into a given branch (with <code>--merged</code>), or which references contain a given commit (with <code>--contains</code>).</p>
7070
<h6>Heading level 6</h6>
7171
<p>Pellentesque non ornare ligula. Suspendisse nibh purus, pretium id tortor sit amet, tincidunt gravida augue.</p>
72+
<table>
73+
<caption>Developer growth by total developers in 2023, % increase from 2022.</caption>
74+
<thead>
75+
<tr>
76+
<th scope="col">Country</th>
77+
<th scope="col">Number of developers</th>
78+
<th scope="col">YoY growth</th>
79+
</tr>
80+
</thead>
81+
<tbody>
82+
<tr>
83+
<td>Singapore</td>
84+
<td>>1M developers</td>
85+
<td>39%</td>
86+
</tr>
87+
<tr>
88+
<td>India</td>
89+
<td>>13.2M developers</td>
90+
<td>36%</td>
91+
</tr>
92+
<tr>
93+
<td>Hong Kong SAR</td>
94+
<td>>1.6M developers</td>
95+
<td>35%</td>
96+
</tr>
97+
<tr>
98+
<td>Vietnam</td>
99+
<td>>1.5M developers</td>
100+
<td>34%</td>
101+
</tr>
102+
<tr>
103+
<td>Indonesia</td>
104+
<td>>2.9M developers</td>
105+
<td>31%</td>
106+
</tr>
107+
<tr>
108+
<td>Japan</td>
109+
<td>>2.8M developers</td>
110+
<td>31%</td>
111+
</tr>
112+
<tr>
113+
<td>Philippines</td>
114+
<td>>1.3M developers</td>
115+
<td>31%</td>
116+
</tr>
117+
<tr>
118+
<td>Thailand</td>
119+
<td>>857K developers</td>
120+
<td>25%</td>
121+
</tr>
122+
<tr>
123+
<td>South Korea</td>
124+
<td>>1.9M developers</td>
125+
<td>22%</td>
126+
</tr>
127+
<tr>
128+
<td>Australia</td>
129+
<td>>1.4M developers</td>
130+
<td>21%</td>
131+
</tr>
132+
</tbody>
133+
</table>
72134
<p>Nunc velit odio, posuere eu felis eget, consectetur fermentum nisi. Aenean tempor odio id ornare ultrices. Quisque blandit condimentum tellus, semper efficitur sapien dapibus nec. </p>
73135
`}
74136
/>

‎apps/storybook/static/locales/de/Prose.json

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
{
2+
"heading": "Überschrift",
3+
"heading_level_1": "Überschrift Ebene 1",
4+
"heading_level_2": "Überschrift Ebene 2",
5+
"heading_level_3": "Überschrift Ebene 3",
6+
"heading_level_4": "Überschrift Ebene 4",
7+
"heading_level_5": "Überschrift Ebene 5",
8+
"heading_level_6": "Überschrift Ebene 6",
9+
"learn_more_here": "Mehr erfahren hier",
10+
"developer_growth_caption": "Entwicklerwachstum nach Gesamtzahl der Entwickler in 2023, % Zunahme gegenüber 2022.",
11+
"vertically_stacked_layout": "Vertikal gestapeltes Layout auf schmalen Ansichtsfenstern",
12+
"vertically_stacked_description": "Dies ist ein optionales Layout, da es das Setzen von data-label-Attributen auf den einzelnen Datenzellen erfordert.",
13+
"vertically_stacked_note": "Beachten Sie, dass dieses Layout nicht für alle Anwendungsfälle geeignet ist.",
14+
"country": "Land",
15+
"number_of_developers": "# von Entwicklern",
16+
"yoy_growth": "Jahreswachstum",
17+
"singapore": "Singapur",
18+
"india": "Indien",
19+
"hong_kong_sar": "Hongkong (SVR)",
20+
"vietnam": "Vietnam",
21+
"indonesia": "Indonesien",
22+
"japan": "Japan",
23+
"philippines": "Philippinen",
24+
"thailand": "Thailand",
25+
"south_korea": "Südkorea",
26+
"australia": "Australien",
27+
"stress_test_intro": "Diese umfassende Analyse deckt Repository-Statistiken, Mitwirkende-Aktivität und Leistungsmetriken auf GitHubs Unternehmensplattform in 2024 ab.",
28+
"stress_test_caption": "Detaillierte Repository-Metriken für Unternehmensorganisationen, einschließlich Commit-Häufigkeit, Pull-Request-Geschwindigkeit und Code-Qualitätsindikatoren.",
29+
"organization": "Organisation",
30+
"key_metrics": "Schlüsselmetriken",
31+
"key_performance_indicators": "Leistungskennzahlen (KPI)",
32+
"quality_assessment": "Qualitätsbewertung",
33+
"acme_corp": "ACME Corp",
34+
"avocado_corp": "Avocado Corp",
35+
"octopotatoes_corp": "Octopotatoes Corp",
36+
"cyberdyne_systems": "Cyberdyne Systems",
37+
"repositories": "Repositories",
38+
"active_contributors": "aktive Mitwirkende",
39+
"monthly_commits": "monatliche Commits",
40+
"hour_avg_pr_review_time": "Std. durchschn. PR-Überprüfungszeit",
41+
"build_success_rate": "Build-Erfolgsrate",
42+
"deploy_frequency": "Bereitstellungsfrequenz",
43+
"mttr": "MTTR",
44+
"incident_response": "Vorfallreaktion",
45+
"avg": "Durchschn.",
46+
"code_coverage": "Code-Abdeckung",
47+
"security_alerts": "Sicherheitswarnungen",
48+
"critical": "kritisch",
49+
"high": "hoch",
50+
"technical_debt": "Technische Schulden",
51+
"bug_density": "Fehlerdichte",
52+
"minutes": "Minuten",
53+
"day": "Tag",
54+
"kloc": "KLOC",
55+
"developers": "Entwickler",
56+
"lisa_vanderschuit_attribution": "Lisa Vanderschuit, Engineering Program Manager, Shopify",
57+
"placeholder_alt_text": "Platzhalter, leere Fläche mit grauer Hintergrundfarbe",
58+
"secure_code_paragraph": "Sichern Sie Code beim Schreiben. Überprüfen Sie automatisch jede Änderung an Ihrer Codebasis und identifizieren Sie Schwachstellen, bevor sie die Produktion erreichen.",
59+
"for_each_ref_paragraph": "ist äußerst nützlich zum Auflisten von Referenzen, zum Finden, welche Referenzen auf ein bestimmtes Objekt zeigen (mit --points-at), welche Referenzen in einen bestimmten Branch zusammengeführt wurden (mit --merged) oder welche Referenzen einen bestimmten Commit enthalten (mit --contains)."
60+
}

‎apps/storybook/static/locales/en/Prose.json

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
{
2+
"heading": "Heading",
3+
"heading_level_1": "Heading level 1",
4+
"heading_level_2": "Heading level 2",
5+
"heading_level_3": "Heading level 3",
6+
"heading_level_4": "Heading level 4",
7+
"heading_level_5": "Heading level 5",
8+
"heading_level_6": "Heading level 6",
9+
"learn_more_here": "Learn more here",
10+
"developer_growth_caption": "Developer growth by total developers in 2023, % increase from 2022.",
11+
"vertically_stacked_layout": "Vertically stacked layout on narrow viewports",
12+
"vertically_stacked_description": "This is an opt-in layout, as it requires setting data-label attributes on the individual data cells.",
13+
"vertically_stacked_note": "Note that this layout is not suitable for all use-cases.",
14+
"country": "Country",
15+
"number_of_developers": "# of developers",
16+
"yoy_growth": "YoY growth",
17+
"singapore": "Singapore",
18+
"india": "India",
19+
"hong_kong_sar": "Hong Kong (SAR)",
20+
"vietnam": "Vietnam",
21+
"indonesia": "Indonesia",
22+
"japan": "Japan",
23+
"philippines": "The Philippines",
24+
"thailand": "Thailand",
25+
"south_korea": "South Korea",
26+
"australia": "Australia",
27+
"stress_test_intro": "This comprehensive analysis covers repository statistics, contributor activity, and performance metrics across GitHub's enterprise platform in 2024.",
28+
"stress_test_caption": "Detailed repository metrics for enterprise organizations, including commit frequency, pull request velocity, and code quality indicators.",
29+
"organization": "Organization",
30+
"key_metrics": "Key Metrics",
31+
"key_performance_indicators": "Key Performance Indicators (KPI)",
32+
"quality_assessment": "Quality Assessment",
33+
"acme_corp": "ACME Corp",
34+
"avocado_corp": "Avocado Corp",
35+
"octopotatoes_corp": "Octopotatoes Corp",
36+
"cyberdyne_systems": "Cyberdyne Systems",
37+
"repositories": "repositories",
38+
"active_contributors": "active contributors",
39+
"monthly_commits": "monthly commits",
40+
"hour_avg_pr_review_time": "hour avg PR review time",
41+
"build_success_rate": "Build success rate",
42+
"deploy_frequency": "Deploy frequency",
43+
"mttr": "MTTR",
44+
"incident_response": "Incident response",
45+
"avg": "avg",
46+
"code_coverage": "Code coverage",
47+
"security_alerts": "Security alerts",
48+
"critical": "critical",
49+
"high": "high",
50+
"technical_debt": "Technical debt",
51+
"bug_density": "Bug density",
52+
"minutes": "minutes",
53+
"day": "day",
54+
"kloc": "KLOC",
55+
"developers": "developers",
56+
"lisa_vanderschuit_attribution": "Lisa Vanderschuit, Engineering Program Manager, Shopify",
57+
"placeholder_alt_text": "placeholder, blank area with a gray background color",
58+
"secure_code_paragraph": "Secure code as you write it. Automatically review every change to your codebase and identify vulnerabilities before they reach production.",
59+
"for_each_ref_paragraph": "is extremely useful for listing references, finding which references point at a given object (with --points-at), which references have been merged into a given branch (with --merged), or which references contain a given commit (with --contains)."
60+
}

‎apps/storybook/static/locales/es/Prose.json

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
{
2+
"heading": "Encabezado",
3+
"heading_level_1": "Encabezado nivel 1",
4+
"heading_level_2": "Encabezado nivel 2",
5+
"heading_level_3": "Encabezado nivel 3",
6+
"heading_level_4": "Encabezado nivel 4",
7+
"heading_level_5": "Encabezado nivel 5",
8+
"heading_level_6": "Encabezado nivel 6",
9+
"learn_more_here": "Aprende más aquí",
10+
"developer_growth_caption": "Crecimiento de desarrolladores por total de desarrolladores en 2023, % de aumento desde 2022.",
11+
"vertically_stacked_layout": "Diseño apilado verticalmente en ventanas estrechas",
12+
"vertically_stacked_description": "Este es un diseño opcional, ya que requiere establecer atributos data-label en las celdas de datos individuales.",
13+
"vertically_stacked_note": "Tenga en cuenta que este diseño no es adecuado para todos los casos de uso.",
14+
"country": "País",
15+
"number_of_developers": "# de desarrolladores",
16+
"yoy_growth": "Crecimiento interanual",
17+
"singapore": "Singapur",
18+
"india": "India",
19+
"hong_kong_sar": "Hong Kong (RAE)",
20+
"vietnam": "Vietnam",
21+
"indonesia": "Indonesia",
22+
"japan": "Japón",
23+
"philippines": "Filipinas",
24+
"thailand": "Tailandia",
25+
"south_korea": "Corea del Sur",
26+
"australia": "Australia",
27+
"stress_test_intro": "Este análisis integral cubre estadísticas de repositorio, actividad de contribuidores y métricas de rendimiento en la plataforma empresarial de GitHub en 2024.",
28+
"stress_test_caption": "Métricas detalladas de repositorio para organizaciones empresariales, incluyendo frecuencia de commits, velocidad de pull requests e indicadores de calidad de código.",
29+
"organization": "Organización",
30+
"key_metrics": "Métricas clave",
31+
"key_performance_indicators": "Indicadores clave de rendimiento (KPI)",
32+
"quality_assessment": "Evaluación de calidad",
33+
"acme_corp": "ACME Corp",
34+
"avocado_corp": "Avocado Corp",
35+
"octopotatoes_corp": "Octopotatoes Corp",
36+
"cyberdyne_systems": "Cyberdyne Systems",
37+
"repositories": "repositorios",
38+
"active_contributors": "contribuidores activos",
39+
"monthly_commits": "commits mensuales",
40+
"hour_avg_pr_review_time": "tiempo promedio de revisión PR en horas",
41+
"build_success_rate": "Tasa de éxito de construcción",
42+
"deploy_frequency": "Frecuencia de despliegue",
43+
"mttr": "MTTR",
44+
"incident_response": "Respuesta a incidentes",
45+
"avg": "prom",
46+
"code_coverage": "Cobertura de código",
47+
"security_alerts": "Alertas de seguridad",
48+
"critical": "crítico",
49+
"high": "alto",
50+
"technical_debt": "Deuda técnica",
51+
"bug_density": "Densidad de errores",
52+
"minutes": "minutos",
53+
"day": "día",
54+
"kloc": "KLOC",
55+
"developers": "desarrolladores",
56+
"lisa_vanderschuit_attribution": "Lisa Vanderschuit, Gerente de Programa de Ingeniería, Shopify",
57+
"placeholder_alt_text": "marcador de posición, área en blanco con color de fondo gris",
58+
"secure_code_paragraph": "Asegure el código mientras lo escribe. Revise automáticamente cada cambio en su base de código e identifique vulnerabilidades antes de que lleguen a producción.",
59+
"for_each_ref_paragraph": "es extremadamente útil para listar referencias, encontrar qué referencias apuntan a un objeto dado (con --points-at), qué referencias se han fusionado en una rama dada (con --merged), o qué referencias contienen un commit dado (con --contains)."
60+
}

‎apps/storybook/static/locales/fr/Prose.json

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
{
2+
"heading": "Titre",
3+
"heading_level_1": "Titre niveau 1",
4+
"heading_level_2": "Titre niveau 2",
5+
"heading_level_3": "Titre niveau 3",
6+
"heading_level_4": "Titre niveau 4",
7+
"heading_level_5": "Titre niveau 5",
8+
"heading_level_6": "Titre niveau 6",
9+
"learn_more_here": "En savoir plus ici",
10+
"developer_growth_caption": "Croissance des développeurs par nombre total de développeurs en 2023, % d'augmentation par rapport à 2022.",
11+
"vertically_stacked_layout": "Disposition empilée verticalement sur les fenêtres étroites",
12+
"vertically_stacked_description": "Il s'agit d'une disposition optionnelle, car elle nécessite de définir des attributs data-label sur les cellules de données individuelles.",
13+
"vertically_stacked_note": "Notez que cette disposition n'est pas adaptée à tous les cas d'usage.",
14+
"country": "Pays",
15+
"number_of_developers": "# de développeurs",
16+
"yoy_growth": "Croissance d'une année sur l'autre",
17+
"singapore": "Singapour",
18+
"india": "Inde",
19+
"hong_kong_sar": "Hong Kong (RAS)",
20+
"vietnam": "Vietnam",
21+
"indonesia": "Indonésie",
22+
"japan": "Japon",
23+
"philippines": "Philippines",
24+
"thailand": "Thaïlande",
25+
"south_korea": "Corée du Sud",
26+
"australia": "Australie",
27+
"stress_test_intro": "Cette analyse complète couvre les statistiques de référentiel, l'activité des contributeurs et les métriques de performance sur la plateforme d'entreprise GitHub en 2024.",
28+
"stress_test_caption": "Métriques détaillées des référentiels pour les organisations d'entreprise, y compris la fréquence des commits, la vélocité des pull requests et les indicateurs de qualité du code.",
29+
"organization": "Organisation",
30+
"key_metrics": "Métriques clés",
31+
"key_performance_indicators": "Indicateurs de performance clés (KPI)",
32+
"quality_assessment": "Évaluation de la qualité",
33+
"acme_corp": "ACME Corp",
34+
"avocado_corp": "Avocado Corp",
35+
"octopotatoes_corp": "Octopotatoes Corp",
36+
"cyberdyne_systems": "Cyberdyne Systems",
37+
"repositories": "référentiels",
38+
"active_contributors": "contributeurs actifs",
39+
"monthly_commits": "commits mensuels",
40+
"hour_avg_pr_review_time": "temps moyen de révision PR en heures",
41+
"build_success_rate": "Taux de réussite de construction",
42+
"deploy_frequency": "Fréquence de déploiement",
43+
"mttr": "MTTR",
44+
"incident_response": "Réponse aux incidents",
45+
"avg": "moy",
46+
"code_coverage": "Couverture du code",
47+
"security_alerts": "Alertes de sécurité",
48+
"critical": "critique",
49+
"high": "élevé",
50+
"technical_debt": "Dette technique",
51+
"bug_density": "Densité des bogues",
52+
"minutes": "minutes",
53+
"day": "jour",
54+
"kloc": "KLOC",
55+
"developers": "développeurs",
56+
"lisa_vanderschuit_attribution": "Lisa Vanderschuit, Gestionnaire de programme d'ingénierie, Shopify",
57+
"placeholder_alt_text": "espace réservé, zone vide avec une couleur d'arrière-plan grise",
58+
"secure_code_paragraph": "Sécurisez le code au fur et à mesure que vous l'écrivez. Examinez automatiquement chaque modification apportée à votre base de code et identifiez les vulnérabilités avant qu'elles n'atteignent la production.",
59+
"for_each_ref_paragraph": "est extrêmement utile pour lister les références, trouver quelles références pointent vers un objet donné (avec --points-at), quelles références ont été fusionnées dans une branche donnée (avec --merged), ou quelles références contiennent un commit donné (avec --contains)."
60+
}

‎apps/storybook/static/locales/ja/Prose.json

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
{
2+
"heading": "見出し",
3+
"heading_level_1": "見出しレベル1",
4+
"heading_level_2": "見出しレベル2",
5+
"heading_level_3": "見出しレベル3",
6+
"heading_level_4": "見出しレベル4",
7+
"heading_level_5": "見出しレベル5",
8+
"heading_level_6": "見出しレベル6",
9+
"learn_more_here": "詳細はこちら",
10+
"developer_growth_caption": "2023年の開発者総数による開発者の成長、2022年からの増加率%。",
11+
"vertically_stacked_layout": "狭いビューポートでの垂直スタックレイアウト",
12+
"vertically_stacked_description": "これは、個々のデータセルにdata-label属性を設定する必要があるため、オプトインのレイアウトです。",
13+
"vertically_stacked_note": "このレイアウトは、すべてのユースケースに適していないことに注意してください。",
14+
"country": "国",
15+
"number_of_developers": "開発者数",
16+
"yoy_growth": "前年比成長率",
17+
"singapore": "シンガポール",
18+
"india": "インド",
19+
"hong_kong_sar": "香港（特別行政区）",
20+
"vietnam": "ベトナム",
21+
"indonesia": "インドネシア",
22+
"japan": "日本",
23+
"philippines": "フィリピン",
24+
"thailand": "タイ",
25+
"south_korea": "韓国",
26+
"australia": "オーストラリア",
27+
"stress_test_intro": "この包括的な分析は、2024年のGitHubエンタープライズプラットフォーム全体のリポジトリ統計、コントリビューターアクティビティ、パフォーマンスメトリクスをカバーしています。",
28+
"stress_test_caption": "コミット頻度、プルリクエストの速度、コード品質指標を含む、エンタープライズ組織の詳細なリポジトリメトリクス。",
29+
"organization": "組織",
30+
"key_metrics": "主要メトリクス",
31+
"key_performance_indicators": "主要業績評価指標（KPI）",
32+
"quality_assessment": "品質評価",
33+
"acme_corp": "ACME Corp",
34+
"avocado_corp": "Avocado Corp",
35+
"octopotatoes_corp": "Octopotatoes Corp",
36+
"cyberdyne_systems": "Cyberdyne Systems",
37+
"repositories": "リポジトリ",
38+
"active_contributors": "アクティブなコントリビューター",
39+
"monthly_commits": "月次コミット",
40+
"hour_avg_pr_review_time": "時間平均PRレビュー時間",
41+
"build_success_rate": "ビルド成功率",
42+
"deploy_frequency": "デプロイ頻度",
43+
"mttr": "MTTR",
44+
"incident_response": "インシデント対応",
45+
"avg": "平均",
46+
"code_coverage": "コードカバレッジ",
47+
"security_alerts": "セキュリティアラート",
48+
"critical": "重要",
49+
"high": "高",
50+
"technical_debt": "技術的負債",
51+
"bug_density": "バグ密度",
52+
"minutes": "分",
53+
"day": "日",
54+
"kloc": "KLOC",
55+
"developers": "開発者",
56+
"lisa_vanderschuit_attribution": "Lisa Vanderschuit、エンジニアリングプログラムマネージャー、Shopify",
57+
"placeholder_alt_text": "プレースホルダー、灰色の背景色を持つ空白領域",
58+
"secure_code_paragraph": "コードを書く際にセキュリティを確保してください。コードベースのすべての変更を自動的にレビューし、本番環境に到達する前に脆弱性を特定します。",
59+
"for_each_ref_paragraph": "は参照をリストアップし、どの参照が特定のオブジェクトを指しているか（--points-atで）、どの参照が特定のブランチにマージされているか（--mergedで）、またはどの参照が特定のコミットを含んでいるか（--containsで）を見つけるのに非常に便利です。"
60+
}

0 commit comments

Comments
 (0)