Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[DO NOT MERGE] chore: merge alpha into master #3165

Closed
wants to merge 179 commits into from
Closed
Changes from 1 commit
Commits
Show all changes
179 commits
Select commit Hold shift + click to select a range
8a46929
feat: alpha release of design tokens (#1770)
viktorrusakov Nov 18, 2022
0e477dc
build: add alpha/beta to release CI workflow
adamstankiewicz Nov 18, 2022
827347b
feat: design tokens with style-dictionary
adamstankiewicz Nov 18, 2022
1b5122a
feat: resolve bootstrap conflicts with design tokens (#1800)
viktorrusakov Nov 28, 2022
542ae3c
feat: add ability to generate CSS utility classes through design tokens
viktorrusakov Dec 1, 2022
9efab48
docs: added background-color for color HEX values on CSS utility clas…
PKulkoRaccoonGang Dec 5, 2022
ba97b35
fix: add missed border utilities
viktorrusakov Dec 5, 2022
93b1f2f
docs: add ability to view CSS variables on CSS Utility Classes page
viktorrusakov Dec 5, 2022
c440274
chore: remove unused import
viktorrusakov Dec 7, 2022
bfc89cf
feat: remove deprecated components
viktorrusakov Dec 7, 2022
02a629b
chore: update tokens for Modal components
viktorrusakov Dec 8, 2022
3f18670
docs: display computed CSS variables on components' pages
viktorrusakov Dec 8, 2022
56cb378
refactor: update design tokens structure
PKulkoRaccoonGang Dec 15, 2022
0daff9a
feat: add CLI interface for design tokens (#1846)
viktorrusakov Dec 15, 2022
28dfc90
fix: install dependencies in tokens module after installing Paragon
viktorrusakov Dec 19, 2022
18ceb6f
fix: remove package.json files from tokens module
viktorrusakov Dec 20, 2022
a3f78ba
refactor: update design tokens structure
PKulkoRaccoonGang Dec 20, 2022
7a4733c
refactor: replace old tables with `DataTable` on documentation site (…
PKulkoRaccoonGang Jan 6, 2023
45348ff
refactor: improve design tokens architecture (#1874)
PKulkoRaccoonGang Jan 6, 2023
f0ee5c9
build: add workflow_dispatch to alpha branch to trigger release
adamstankiewicz Jan 7, 2023
fcf84d0
fix: trigger release
adamstankiewicz Jan 7, 2023
63d06b6
fix: added custom title for CSS output files (#1985)
PKulkoRaccoonGang Feb 1, 2023
3794ee7
feat: deleted value in reference design tokens (#1989)
PKulkoRaccoonGang Feb 8, 2023
c384a36
fix: ensure design tokens have a valid type attribute (#1992)
PKulkoRaccoonGang Feb 15, 2023
fccdd11
fix: add missing tokens for Button component (#1924)
PKulkoRaccoonGang Feb 15, 2023
944b29a
feat: add new tokens and cleanup after rebase
viktorrusakov Feb 16, 2023
f420173
fix: trigger alpha release
adamstankiewicz Feb 21, 2023
19a015a
Merge pull request #2072 from openedx/master
adamstankiewicz Feb 22, 2023
a58d699
Merge pull request #2079 from openedx/master
edx-requirements-bot Feb 22, 2023
e72b74f
Merge pull request #2081 from openedx/master
edx-requirements-bot Feb 23, 2023
5fbefab
Merge pull request #2083 from openedx/master
edx-requirements-bot Feb 23, 2023
8375af9
Merge pull request #2087 from openedx/master
edx-requirements-bot Feb 24, 2023
4f0318a
docs: add pseudo-docs for intended usage, and details on working with…
adamstankiewicz Feb 24, 2023
0194699
feat: added CSS custom media query transformer (#2068)
PKulkoRaccoonGang Feb 24, 2023
df41e33
Merge pull request #2093 from openedx/master
edx-requirements-bot Feb 24, 2023
3512b13
feat: refactoring design tokens folders structure (#2069)
PKulkoRaccoonGang Feb 24, 2023
6d3df3e
Merge pull request #2095 from openedx/master
edx-requirements-bot Feb 25, 2023
ea0937d
Merge pull request #2097 from openedx/master
edx-requirements-bot Feb 26, 2023
2e17024
fix: use min-width in custom-media breakpoint definitions (#2098)
adamstankiewicz Feb 26, 2023
ac01c9f
Merge pull request #2101 from openedx/master
edx-requirements-bot Feb 27, 2023
2a9e087
Merge pull request #2104 from openedx/master
edx-requirements-bot Feb 28, 2023
6f219f9
Merge pull request #2106 from openedx/master
edx-requirements-bot Mar 1, 2023
0bee98f
Merge pull request #2109 from openedx/master
edx-requirements-bot Mar 2, 2023
0e5da2e
Merge pull request #2114 from openedx/master
edx-requirements-bot Mar 3, 2023
8c1679a
Merge pull request #2116 from openedx/master
edx-requirements-bot Mar 4, 2023
8b27b32
Merge pull request #2118 from openedx/master
edx-requirements-bot Mar 5, 2023
5baae06
Merge pull request #2120 from openedx/master
edx-requirements-bot Mar 6, 2023
3417ced
Merge pull request #2122 from openedx/master
edx-requirements-bot Mar 7, 2023
9c39c66
Merge pull request #2124 from openedx/master
edx-requirements-bot Mar 9, 2023
054bce2
Merge pull request #2126 from openedx/master
edx-requirements-bot Mar 10, 2023
0f84733
Merge pull request #2129 from openedx/master
edx-requirements-bot Mar 11, 2023
dde3f7c
Merge pull request #2131 from openedx/master
edx-requirements-bot Mar 12, 2023
4b76ca0
Merge pull request #2133 from openedx/master
edx-requirements-bot Mar 13, 2023
6441024
Merge pull request #2135 from openedx/master
edx-requirements-bot Mar 14, 2023
b72f144
Merge pull request #2153 from openedx/master
edx-requirements-bot Mar 22, 2023
09b76fa
Merge pull request #2155 from openedx/master
edx-requirements-bot Mar 22, 2023
ac304c5
Merge pull request #2157 from openedx/master
edx-requirements-bot Mar 23, 2023
99c27f1
Merge pull request #2158 from openedx/master
edx-requirements-bot Mar 24, 2023
67ec22f
chore: update @edx/frontend-build to latest in Paragon example app (#…
PKulkoRaccoonGang Mar 24, 2023
c6befc6
fix: add description for tokens (#2112)
monteri Mar 24, 2023
8886575
Merge pull request #2161 from openedx/master
edx-requirements-bot Mar 24, 2023
023aafa
feat: theme CSS is built and published (#2102)
PKulkoRaccoonGang Apr 7, 2023
40660f6
Merge branch 'master' into alpha
viktorrusakov Apr 27, 2023
956fbc8
feat: add new css variable to `DataTable`
viktorrusakov Apr 27, 2023
3ad570c
chore: master to alpha
viktorrusakov Apr 27, 2023
84262a5
feat: remove SCSS variable usages in components (#2137)
PKulkoRaccoonGang May 5, 2023
3cf4356
Merge branch 'master' into alpha
viktorrusakov May 12, 2023
693cd04
feat: add tokens for `SelectMenu` component and cleanup after sync wi…
viktorrusakov May 12, 2023
56db967
Merge pull request #2293 from openedx/vrusakov/merge-master-into-alpha
viktorrusakov May 15, 2023
82e26e1
Merge pull request #2210 from openedx/master
edx-requirements-bot May 15, 2023
909a5b3
Merge pull request #2301 from openedx/master
edx-requirements-bot May 15, 2023
f5b9800
Merge pull request #2303 from openedx/master
edx-requirements-bot May 15, 2023
05b04aa
Merge pull request #2305 from openedx/master
edx-requirements-bot May 16, 2023
1bf1749
Merge pull request #2306 from openedx/master
edx-requirements-bot May 16, 2023
55da1a9
Merge pull request #2308 from openedx/master
edx-requirements-bot May 16, 2023
d68897a
Merge pull request #2312 from openedx/master
edx-requirements-bot May 17, 2023
95879bb
feat: completely deprecate FontAwesome (#2327)
PKulkoRaccoonGang May 26, 2023
f99178a
feat: generate paragon-theme.json during npm run build with themeUrls…
adamstankiewicz May 29, 2023
6c37cc1
fix: updates the paragon-theme.json output (#2334)
adamstankiewicz May 29, 2023
d1f4a34
Merge branch 'master' into vrusakov/sync-alpha
viktorrusakov Jun 1, 2023
aab431b
feat: add tokens for `Tab` and `Nav` components
viktorrusakov Jun 1, 2023
999a2eb
feat: make color-yiq function a11y-friendly
viktorrusakov Jun 1, 2023
a8cd687
Merge pull request #2337 from openedx/vrusakov/sync-alpha
viktorrusakov Jun 2, 2023
75d9e0b
Merge pull request #2339 from openedx/master
edx-requirements-bot Jun 2, 2023
345217f
fix: avoid infinite while loop with `colorYiq` (#2349)
adamstankiewicz Jun 3, 2023
dc947b6
fix: remove unnecessary parentheses from coloryiq warning (#2350)
adamstankiewicz Jun 3, 2023
080e19c
feat: update `build-tokens.js` to include `--source-tokens-only` arg …
adamstankiewicz Jun 4, 2023
1fca4ac
fix: ensure sourceMappingUrl is correct (#2352)
adamstankiewicz Jun 4, 2023
4c273d7
fix: add missing css util classes for border-radius (#2355)
adamstankiewicz Jun 5, 2023
e0aa92e
feat: create themes flag to build tokens (#2357)
dcoa Jun 7, 2023
342fd73
feat: added rounded pill token (#2361)
PKulkoRaccoonGang Jun 8, 2023
53ab850
fix: added missing SCSS variables in design tokens (#2364)
PKulkoRaccoonGang Jun 16, 2023
3816316
docs: fixed Input is not defined in TransitionReplace component (#2393)
PKulkoRaccoonGang Jun 23, 2023
75364f4
feat: add defaults to theme-urls.json output on build (#2468)
adamstankiewicz Jul 23, 2023
de07eca
fix: renamed custom media query (#2495)
PKulkoRaccoonGang Aug 3, 2023
4a03ae8
Merge branch 'master' into zadorozhnii/sync-alpha-v3
Aug 22, 2023
092d3e4
refactor: refactorng after rebase
PKulkoRaccoonGang Aug 25, 2023
23003c4
refactor: added new tokens
PKulkoRaccoonGang Aug 28, 2023
2d32c02
fix: skeleton.css fix
Aug 31, 2023
10fca8b
chore: sync alpha (#2568)
monteri Sep 1, 2023
dff67da
Revert "chore: sync alpha (#2568)" (#2586)
adamstankiewicz Sep 1, 2023
5d0b3a5
Merge pull request #2587 from openedx/ags/sync-alpha-fix
adamstankiewicz Sep 1, 2023
e1b8c0c
fix: remove undefined variables from utility classes (#2615)
PKulkoRaccoonGang Sep 13, 2023
292818b
docs: replaced SCSS variables with CSS variables on the Colors page (…
PKulkoRaccoonGang Sep 15, 2023
ac1829a
fix: remove `$enable-shadows` SCSS flag (#2423)
PKulkoRaccoonGang Sep 15, 2023
3124c83
docs: fix theme switcher on the Colors page (#2628)
PKulkoRaccoonGang Sep 15, 2023
128b562
fix: add source for grid gutter width token (#2636)
khudym Sep 20, 2023
dafca4b
fix: correctly resolve file pathing when replacing SCSS variables usa…
viktorrusakov Sep 20, 2023
9b1ec67
Merge remote-tracking branch 'origin/master' into HEAD
PKulkoRaccoonGang Oct 6, 2023
89500d1
refactor: some refactoring
PKulkoRaccoonGang Oct 6, 2023
3ec0c07
chore: sync alpha (#2731)
viktorrusakov Oct 27, 2023
23a9519
feat: move design tokens CLI commands to paragon CLI (#2609)
monteri Oct 30, 2023
a1d0c05
fix: fixed design token for icon btn active state (#2765)
PKulkoRaccoonGang Oct 30, 2023
4326d2c
feat: added Segment track for CLI scripts (#2617)
PKulkoRaccoonGang Nov 9, 2023
e033f8e
Merge remote-tracking branch 'origin/master' into HEAD
PKulkoRaccoonGang Nov 23, 2023
d466bb6
refactor: refactoring after merge
PKulkoRaccoonGang Nov 23, 2023
5054af4
chore: sync alpha (#2847)
viktorrusakov Nov 24, 2023
45e1a5a
Merge pull request #2854 from openedx/master
edx-requirements-bot Nov 24, 2023
ff94296
Merge pull request #2857 from openedx/master
edx-requirements-bot Nov 25, 2023
dd73762
Merge pull request #2857 from openedx/master
edx-requirements-bot Nov 25, 2023
7768eb2
Merge pull request #2860 from openedx/master
edx-requirements-bot Nov 26, 2023
4c1e25d
docs: add loading state to CSS variables table (#2858)
viktorrusakov Nov 27, 2023
cf10119
Merge remote-tracking branch 'origin/master' into HEAD
PKulkoRaccoonGang Dec 15, 2023
d64365d
Merge remote-tracking branch 'origin/master' into Peter_Kulko/merge-m…
PKulkoRaccoonGang Dec 19, 2023
53c8e90
chore: sync alpha (#2932)
viktorrusakov Dec 21, 2023
0f24c00
feat: move utils away from root directory (#3028)
srwang Apr 3, 2024
96101cc
Merge remote-tracking branch 'origin/master' into Peter_Kulko/alpha-b…
PKulkoRaccoonGang May 7, 2024
94c6b6b
feat: created new design tokens for Chip component
PKulkoRaccoonGang May 7, 2024
6a950c6
feat: created new design tokens for ChipCarousel and Pagination compo…
PKulkoRaccoonGang May 9, 2024
108f9f4
refactor: corrected tokens value and removed deprecated Tabs example
PKulkoRaccoonGang May 9, 2024
2a0b3c8
Merge pull request #3044 from raccoongang/Peter_Kulko/alpha-branch-up…
brian-smith-tcril May 14, 2024
4ae3a09
Merge pull request #2981 from openedx/master
edx-requirements-bot May 14, 2024
9d6a3bf
refactor: revision of core design tokens (#3048)
PKulkoRaccoonGang May 14, 2024
1e436cd
refactor: revision of ChipCarousel-Pagination design tokens (#3052)
PKulkoRaccoonGang May 15, 2024
34e2bb0
docs: [BD-46] updated README file (#3078)
PKulkoRaccoonGang May 21, 2024
157e3e4
docs: updated Design tokens and Style dictionary documentation (#3075)
PKulkoRaccoonGang May 21, 2024
40bd50f
refactor: revision of ActionRow-Chip design tokens (#3051)
PKulkoRaccoonGang May 21, 2024
da484ba
refactor: revision of Pagination-TransitionReplace design tokens (#3056)
PKulkoRaccoonGang May 21, 2024
8cc5ced
refactor: [BD-46] Component generator refactoring (#3076)
PKulkoRaccoonGang May 22, 2024
b583695
feat: Add support for tokens in toml files (#3047)
xitij2000 Jun 17, 2024
aaed46f
feat: Add TypeScript types for <Hyperlink> (#3077)
bradenmacdonald May 22, 2024
aecc3cd
fix: remove header border radius on `FullscreenModal` (#3041)
brian-smith-tcril May 22, 2024
3aafe06
refactor: some refactoring
PKulkoRaccoonGang Aug 4, 2024
1fb7cd3
feat: add typings for <Button> (#3080)
bradenmacdonald May 31, 2024
109d65c
chore(deps): bump braces from 3.0.2 to 3.0.3
dependabot[bot] Jun 11, 2024
3bb9439
chore: fix schedule formatting in analyze-dependents.yml (#3049)
brian-smith-tcril Jun 12, 2024
e835beb
chore: checkout repos from `openedx` insted of `edx` in analyze depen…
brian-smith-tcril Jun 12, 2024
ba99405
chore: update browserslist DB (#3046)
edx-requirements-bot Jun 13, 2024
365bf6c
docs: update dependent-usage.json (#3014)
github-actions[bot] Jun 13, 2024
e3d8541
docs: update dependent-usage.json (#3095)
github-actions[bot] Jun 14, 2024
187f2c1
docs: update dependent-usage.json (#3096)
github-actions[bot] Jun 15, 2024
8846cbb
docs: update dependent-usage.json (#3097)
github-actions[bot] Jun 16, 2024
9333c77
docs: update dependent-usage.json (#3099)
github-actions[bot] Jun 17, 2024
df303a0
docs: update dependent-usage.json (#3102)
github-actions[bot] Jun 18, 2024
49c0ed8
docs: update dependent-usage.json (#3103)
github-actions[bot] Jun 19, 2024
7ecebbf
docs: update dependent-usage.json (#3104)
github-actions[bot] Jun 20, 2024
f867231
fix: ignore `touchstart` events for closing modal popups (#3087)
brian-smith-tcril Jun 20, 2024
4b477f3
chore(deps-dev): bump ws from 7.5.9 to 7.5.10 (#3101)
dependabot[bot] Jun 20, 2024
59ae1a9
docs: update dependent-usage.json (#3105)
github-actions[bot] Jun 21, 2024
b8956ab
docs: update dependent-usage.json (#3106)
github-actions[bot] Jun 22, 2024
8bc84b2
docs: update dependent-usage.json (#3107)
github-actions[bot] Jun 23, 2024
5645fd1
docs: update dependent-usage.json (#3108)
github-actions[bot] Jun 24, 2024
2a60a2b
docs: update dependent-usage.json (#3109)
github-actions[bot] Jun 25, 2024
89f8b65
docs: update dependent-usage.json (#3110)
github-actions[bot] Jun 26, 2024
780c4c8
docs: update dependent-usage.json (#3111)
github-actions[bot] Jun 27, 2024
d506725
docs: update dependent-usage.json (#3112)
github-actions[bot] Jun 28, 2024
1761788
docs: update dependent-usage.json (#3113)
github-actions[bot] Jun 29, 2024
86c7568
docs: update dependent-usage.json (#3114)
github-actions[bot] Jun 30, 2024
87c7e3a
docs: update dependent-usage.json (#3115)
github-actions[bot] Jul 1, 2024
548455d
docs: update dependent-usage.json (#3117)
github-actions[bot] Jul 2, 2024
9bc8392
docs: update dependent-usage.json (#3118)
github-actions[bot] Jul 3, 2024
5c22894
docs: update dependent-usage.json (#3119)
github-actions[bot] Jul 4, 2024
f824fee
docs: update dependent-usage.json (#3121)
github-actions[bot] Jul 5, 2024
59a6f2a
docs: update dependent-usage.json (#3121)
github-actions[bot] Jul 5, 2024
3c7c76d
docs: update dependent-usage.json (#3121)
github-actions[bot] Jul 5, 2024
9c8fb9c
docs: update dependent-usage.json (#3122)
github-actions[bot] Jul 6, 2024
a5678b6
feat: Add TypeScript types for <Overlay>, <OverlayTrigger>, <Tooltip>…
bradenmacdonald Jul 7, 2024
af5a2bd
fix: changed --pgn-typography-font-weight-table-th
PKulkoRaccoonGang Jul 31, 2024
10060be
refactor: updated es5 icons
PKulkoRaccoonGang Aug 5, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
refactor: replace old tables with DataTable on documentation site (#…
PKulkoRaccoonGang committed Aug 4, 2024
commit 7a4733cf80842d85054a52a1691a13723c9adf98
76 changes: 76 additions & 0 deletions www/src/components/TableCells.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,76 @@
import React from 'react';
import MeasuredItem from './MeasuredItem';
import measuredTypeProps from './typography-page/measuredTypeProps';

export type CodeCellType = {
value: string | number | undefined,
};

export type DataTableRowType = {
row: {
original: {
name?: string,
size?: string,
className?: string,
text?: string,
}
},
};

export function ClassNameCell({ value }: CodeCellType) {
if (!value) {
return null;
}

return (
<code className="fs-16">
.{value}
</code>
);
}

export function TextCell({ value }: CodeCellType) {
return (
<p className="m-0 fs-16">
{value}
</p>
);
}

export function CodeCell({ value }: CodeCellType) {
return (
<code className="fs-16">
{value}
</code>
);
}

export function DesktopMeasuredCell({ row } : DataTableRowType) {
return (
<MeasuredItem {...measuredTypeProps}>
<p className={`m-0 ${row.original.className}`}>
{row.original.text}
</p>
</MeasuredItem>
);
}

export function MobileMeasuredCell({ row } : DataTableRowType) {
return (
<div className="mobile-type">
<MeasuredItem {...measuredTypeProps}>
<p className={`m-0 ${row.original.className}`}>
{row.original.text}
</p>
</MeasuredItem>
</div>
);
}

export function StyleCell({ row } : DataTableRowType) {
return (
<p className={`fs-16 ${row.original.className}`}>
{row.original.text}
</p>
);
}
51 changes: 51 additions & 0 deletions www/src/components/typography-page/Alignment.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
import React from 'react';
// @ts-ignore
import { DataTable } from '~paragon-react';
import { ClassNameCell, StyleCell } from '../TableCells';

const alignmentClassesAndDescriptions = [
{ className: 'text-left', text: 'left text.' },
{ className: 'text-right', text: 'right text.' },
{ className: 'text-center', text: 'center text.' },
{
className: 'text-justify',
text: 'The text-justify class specifies the justification method of text. '
+ 'This text-justify class spreads the words into the complete line with equal spaces.',
},
{
className: 'text-wrap',
text: 'Use text-wrap to cause text to wrap normally within an element. Newlines and spaces will be collapsed.',
},
{
className: 'text-nowrap',
text: 'Use text-nowrap to prevent text from wrapping within an element. Newlines and spaces will be collapsed. '
+ 'You can prevent line breaks and text wrapping for specific elements',
},
];

export default function Alignment() {
return (
<>
<h2 className="mb-4">Alignment</h2>
<div className="mb-4">
<DataTable
itemCount={6}
data={alignmentClassesAndDescriptions}
columns={[
{
Header: 'Style',
Cell: StyleCell,
},
{
Header: 'CSS Class',
accessor: 'className',
Cell: ClassNameCell,
},
]}
>
<DataTable.Table />
</DataTable>
</div>
</>
);
}
42 changes: 42 additions & 0 deletions www/src/components/typography-page/Body.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
import React from 'react';
import MeasuredItem from '../MeasuredItem';
import measuredTypeProps from './measuredTypeProps';
// @ts-ignore
import { DataTable } from '~paragon-react';

import { DesktopMeasuredCell, ClassNameCell } from '../TableCells';

const bodyClassesAndDescriptions = [
{ className: 'lead', text: 'Large Body' },
{ className: '', text: 'Body' },
{ className: 'small', text: 'Small Body' },
{ className: 'x-small', text: 'Extra Small Body' },
{ className: 'micro', text: 'Micro Body' },
];

export default function Body() {
return (
<>
<h2 className="mb-2">Body</h2>
<div className="mb-4">
<DataTable
itemCount={5}
data={bodyClassesAndDescriptions}
columns={[
{
Header: 'Desktop & Mobile',
Cell: DesktopMeasuredCell,
},
{
Header: 'CSS Class',
accessor: 'className',
Cell: ClassNameCell,
},
]}
>
<DataTable.Table />
</DataTable>
</div>
</>
);
}
41 changes: 41 additions & 0 deletions www/src/components/typography-page/DecorationAndEmphasis.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
import React from 'react';
// @ts-ignore
import { DataTable } from '~paragon-react';
import { ClassNameCell, StyleCell } from '../TableCells';

const decorationAndEmphasisClassesAndDescriptions = [
{ className: 'text-lowercase', text: 'Lowercase text.' },
{ className: 'text-uppercase', text: 'uppercase text.' },
{ className: 'text-capitalize', text: 'capitalize text.' },
{ className: 'text-decoration-none', text: 'No decorations.' },
{ className: 'font-italic', text: 'Italic text.' },
{ className: 'font-weight-bold', text: 'Bold text.' },
{ className: 'font-weight-normal', text: 'Regular text.' },
];

export default function DecorationAndEmphasis() {
return (
<>
<h2 className="mb-2">Decoration and Emphasis</h2>
<div className="mb-4">
<DataTable
itemCount={7}
data={decorationAndEmphasisClassesAndDescriptions}
columns={[
{
Header: 'Style',
Cell: StyleCell,
},
{
Header: 'CSS Class',
accessor: 'className',
Cell: ClassNameCell,
},
]}
>
<DataTable.Table />
</DataTable>
</div>
</>
);
}
39 changes: 39 additions & 0 deletions www/src/components/typography-page/Display.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
import React from 'react';
// @ts-ignore
import { DataTable } from '~paragon-react';

import { ClassNameCell, DesktopMeasuredCell, MobileMeasuredCell } from '../TableCells';

const displaySizes = [1, 2, 3, 4];

export default function Display() {
return (
<>
<h2 className="mb-2">Display</h2>
<div className="mb-4">
<DataTable
itemCount={4}
data={displaySizes.map((size) => ({ text: `Display ${size}`, className: `display-${size}` }))}
columns={[
{
Header: 'Desktop',
Cell: DesktopMeasuredCell,
},
{
Header: 'Mobile',
Cell: MobileMeasuredCell,
},
{
id: 'css-class',
Header: 'CSS Class',
accessor: 'className',
Cell: ClassNameCell,
},
]}
>
<DataTable.Table />
</DataTable>
</div>
</>
);
}
38 changes: 38 additions & 0 deletions www/src/components/typography-page/Headings.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
import React from 'react';
// @ts-ignore
import { DataTable } from '~paragon-react';

import { MobileMeasuredCell, ClassNameCell, DesktopMeasuredCell } from '../TableCells';

const headingSizes = [1, 2, 3, 4, 5, 6];

export default function Headings() {
return (
<>
<h2 className="mb-2">Headings</h2>
<div className="mb-4">
<DataTable
itemCount={6}
data={headingSizes.map((size) => ({ text: `Heading ${size}`, className: `h${size}` }))}
columns={[
{
Header: 'Desktop',
Cell: DesktopMeasuredCell,
},
{
Header: 'Mobile',
Cell: MobileMeasuredCell,
},
{
Header: 'CSS Class',
accessor: 'className',
Cell: ClassNameCell,
},
]}
>
<DataTable.Table />
</DataTable>
</div>
</>
);
}
51 changes: 51 additions & 0 deletions www/src/components/typography-page/Links.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
import React from 'react';
// @ts-ignore
import { DataTable } from '~paragon-react';
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>,
},
{
example: <a className="muted-link" href="/#">Muted, Standalone Link</a>,
description: <span><code>.muted-link</code> not in a <code>p</code> tag.</span>,
},
{
example: (
<span>
An <a className="muted-link inline-link" href="/foundations/typography/">muted, inline link</a> in a sentence.
</span>
),
description: (
<span>
For <code>.muted-link</code> links inside a <code>p</code> or with the <code>.inline-link</code> class name.
</span>
),
},
];

export default function Links() {
return (
<>
<h2 className="mb-2">Links</h2>
<div className="mb-4">
<DataTable
itemCount={4}
data={linksClassesAndDescriptions}
columns={[
{ Header: 'Example', accessor: 'example', Cell: TextCell },
{ Header: 'Description', accessor: 'description', Cell: TextCell },
]}
>
<DataTable.Table />
</DataTable>
</div>
</>
);
}
6 changes: 6 additions & 0 deletions www/src/components/typography-page/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
export { default as AlignmentTable } from './Alignment';
export { default as BodyTable } from './Body';
export { default as DecorationAndEmphasisTable } from './DecorationAndEmphasis';
export { default as DisplayTable } from './Display';
export { default as HeadingsTable } from './Headings';
export { default as LinksTable } from './Links';
35 changes: 35 additions & 0 deletions www/src/components/typography-page/measuredTypeProps.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
import React from 'react';

const weightLabels: Record<string, string> = {
200: 'Light',
300: 'Light',
400: 'Regular',
500: 'Medium',
600: 'Medium',
700: 'Bold',
800: 'Black',
};

const measuredTypeProps = {
properties: ['font-size', 'line-height', 'font-family', 'font-weight'],
renderAfter: (measurements: { [x: string]: string; }) => {
const fontFamily = measurements['font-family']
? measurements['font-family'].split(',')[0]
: null;
const weight = weightLabels[measurements['font-weight']];
// only one significant digit if needed
const fontSize = Math.round(Number.parseFloat(measurements['font-size']) * 10) / 10;
const lineHeight = Math.round(Number.parseFloat(measurements['line-height']) * 10) / 10;

return (
<p className="m-0 text-muted">
<span className="mr-2">
{fontFamily} {weight}
</span>
{fontSize}px / {lineHeight}px
</p>
);
},
};

export default measuredTypeProps;
Loading