Skip to content

Commit 043c366

Browse files
francisco-guilhermefrancisco-guilherme
authored
docs: add component ds alignment badge (#4703)
* docs: add component ds alignment badge * chore: docs examples layout improvements * chore: docs files reorganisation * chore: docs misc fixes
1 parent c3333de commit 043c366

13 files changed

+125
-19
lines changed

‎apps/docs/src/components/Examples.tsx

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -76,13 +76,13 @@ export const Examples = () => {
7676
];
7777

7878
return (
79-
<div className="max-w-6xl mx-auto px-md py-xl">
79+
<div className="max-w-6xl mx-auto px-sm md:px-md py-lg md:py-xl">
8080
{/* Page Header */}
81-
<div className="mb-lg md:text-center px-sm">
81+
<div className="mb-lg md:mb-xl md:text-center">
8282
<HvTypography
8383
className={clsx(
84-
"text-2.3em leading-1.3em mb-md",
85-
"max-sm:text-1.5rem max-sm:leading-2.2rem max-sm:mb-sm",
84+
"text-[2.3em] leading-[1.3em] mb-md",
85+
"max-sm:text-[1.5rem] max-sm:leading-[2.2rem] max-sm:mb-sm",
8686
)}
8787
>
8888
Building blocks to streamline <br />
@@ -100,12 +100,11 @@ export const Examples = () => {
100100
>
101101
StackBlitz collection
102102
</HvTypography>
103-
.
104103
</HvTypography>
105104
</div>
106105

107106
{/* Section Grid */}
108-
<div className="grid grid-cols-1 sm:grid-cols-3 md:grid-cols-3 gap-lg">
107+
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-lg">
109108
{sections.map((section) => (
110109
<Link
111110
key={section.title}

‎apps/docs/src/components/docs/ColorPalette.tsx renamed to ‎apps/docs/src/components/color/ColorPalette.tsx

File renamed without changes.

‎apps/docs/src/components/docs/ColorTokens.tsx renamed to ‎apps/docs/src/components/color/ColorTokens.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { HvTypography, useTheme } from "@hitachivantara/uikit-react-core";
22

3-
import { descriptions } from "./descriptions/colorDescriptions";
4-
import { colorTokensSpec, groupColorTokensByCategory } from "./utils/color";
3+
import { descriptions } from "./descriptions";
4+
import { colorTokensSpec, groupColorTokensByCategory } from "./utils";
55

66
export const ColorTokens = () => {
77
const { selectedMode, activeTheme } = useTheme();

‎apps/docs/src/components/docs/descriptions/colorDescriptions.ts renamed to ‎apps/docs/src/components/color/descriptions.ts

File renamed without changes.

‎apps/docs/src/components/docs/utils/color.ts renamed to ‎apps/docs/src/components/color/utils.ts

File renamed without changes.

‎apps/docs/src/components/usage/AlignmentBadge.tsx

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import { Info } from "@phosphor-icons/react";
2+
import { HvIconButton, HvTypography } from "@hitachivantara/uikit-react-core";
3+
4+
import { alignmentData } from "./alignmentData";
5+
6+
type AlignmentBadgeProps = {
7+
component: string;
8+
};
9+
10+
export const AlignmentBadge = ({ component }: AlignmentBadgeProps) => {
11+
const entry = Object.entries(alignmentData).find(
12+
([key]) => key.replace(/ /g, "").toLowerCase() === component.toLowerCase(),
13+
);
14+
15+
if (!entry) return null;
16+
17+
const [, values] = entry;
18+
19+
const items = [
20+
["Pentaho+", values.pentahoPlus || "—"],
21+
["DS 5", values.ds5 || "—"],
22+
["DS 3", values.ds3 || "—"],
23+
];
24+
25+
return (
26+
<HvIconButton
27+
color="primary"
28+
title={
29+
<div className="flex flex-col gap-xs w-[100px]">
30+
<HvTypography variant="label">DS Alignment</HvTypography>
31+
<div className="border-b-3px border-atmo2 m-xs -mx-sm" />
32+
{items.map(([name, value]) => (
33+
<div key={name} className="flex justify-between gap-xs">
34+
<HvTypography>{name}</HvTypography>
35+
<HvTypography>{value}</HvTypography>
36+
</div>
37+
))}
38+
</div>
39+
}
40+
>
41+
<Info size={18} />
42+
</HvIconButton>
43+
);
44+
};

‎apps/docs/src/components/usage/Description.tsx

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
import ReactMarkdown from "react-markdown";
2-
import { ArrowUpRight } from "@phosphor-icons/react/ArrowUpRight";
2+
import { ArrowUpRight } from "@phosphor-icons/react";
33
import { useData } from "nextra/hooks";
44
import { HvTypography } from "@hitachivantara/uikit-react-core";
55

66
import { GitHubLogo } from "../logo/gh";
77
import { NpmLogo } from "../logo/npm";
8+
import { AlignmentBadge } from "./AlignmentBadge";
89

910
/**
1011
* The `Description` component displays metadata information
@@ -16,7 +17,10 @@ export const Description = () => {
1617

1718
return (
1819
<>
19-
<HvTypography variant="title1">{meta.component}</HvTypography>
20+
<div className="flex flex-row gap-xs items-center">
21+
<HvTypography variant="title1">{meta.component}</HvTypography>
22+
<AlignmentBadge component={meta.component} />
23+
</div>
2024
<ReactMarkdown className="markdown">
2125
{meta.docgen?.description}
2226
</ReactMarkdown>
@@ -40,6 +44,7 @@ export const Description = () => {
4044
</HvTypography>
4145
<ArrowUpRight />
4246
</div>
47+
<div className="flex flex-row gap-xs items-center"></div>
4348
</div>
4449
</>
4550
);

‎apps/docs/src/components/usage/alignmentData.ts

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
export const alignmentData = {
2+
Accordion: { ds3: "3.6.0", ds5: "5.9.5", pentahoPlus: "0.4.0" },
3+
"Action Bar": { ds3: "3.6.0", ds5: "5.9.5", pentahoPlus: "0.4.0" },
4+
"App Switcher": { ds3: "3.6.0", ds5: "5.9.5", pentahoPlus: "0.4.0" },
5+
Avatar: { ds3: "3.6.0", ds5: "5.9.5", pentahoPlus: "0.4.0" },
6+
"Avatar Group": { ds3: "3.6.0", ds5: "5.9.5", pentahoPlus: "0.4.0" },
7+
Badge: { ds3: "3.6.0", ds5: "5.9.5", pentahoPlus: "0.4.0" },
8+
Banner: { ds3: "3.6.0", ds5: "5.9.3", pentahoPlus: "0.4.0" },
9+
Breadcrumb: { ds3: "3.6.0", ds5: "5.9.5", pentahoPlus: "0.4.0" },
10+
"Bulk Actions": { ds3: "3.6.0", ds5: "5.9.0", pentahoPlus: "0.4.0" },
11+
Button: { ds3: "3.6.0", ds5: "5.9.3", pentahoPlus: "0.4.0" },
12+
Card: { ds3: "3.6.0", ds5: "5.9.5", pentahoPlus: "0.4.0" },
13+
Carousel: { ds3: "3.6.0", ds5: "5.9.5", pentahoPlus: "0.4.0" },
14+
Checkbox: { ds3: "3.6.0", ds5: "5.9.5", pentahoPlus: "0.4.0" },
15+
"Checkbox Group": { ds3: "3.6.0", ds5: "5.9.5", pentahoPlus: "0.4.0" },
16+
"Code Editor": { ds3: "3.6.0", ds5: "5.9.5", pentahoPlus: "0.4.0" },
17+
"Color Picker": { ds3: "3.6.0", ds5: "5.9.3", pentahoPlus: "0.4.0" },
18+
Container: { ds3: "3.6.0", ds5: "5.9.5", pentahoPlus: "0.4.0" },
19+
"Date Picker": { ds3: "3.6.0", ds5: "5.9.3", pentahoPlus: "0.4.0" },
20+
Dialog: { ds3: "3.6.0", ds5: "5.9.5", pentahoPlus: "0.4.0" },
21+
"Dot Pagination": { ds3: "3.6.0", ds5: "5.9.5", pentahoPlus: "0.4.0" },
22+
Drawer: { ds3: "3.6.0", ds5: "5.9.5", pentahoPlus: "0.4.0" },
23+
Dropdown: { ds3: "3.6.0", ds5: "5.9.3", pentahoPlus: "0.4.0" },
24+
"Dropdown Menu": { ds3: "3.6.0", ds5: "5.9.3", pentahoPlus: "0.4.0" },
25+
"Empty State": { ds3: "3.6.0", ds5: "5.9.5", pentahoPlus: "0.4.0" },
26+
"File Uploader": { ds3: "3.6.0", ds5: "5.9.5", pentahoPlus: "0.4.0" },
27+
"Filter Group": { ds3: "3.6.0", ds5: "5.9.3", pentahoPlus: "0.4.0" },
28+
Footer: { ds3: "3.6.0", ds5: "5.9.5", pentahoPlus: "0.4.0" },
29+
"Global Actions": { ds3: "3.6.0", ds5: "5.9.5", pentahoPlus: "0.4.0" },
30+
Header: { ds3: "3.6.0", ds5: "5.9.5", pentahoPlus: "0.4.0" },
31+
Input: { ds3: "3.6.0", ds5: "5.9.3", pentahoPlus: "0.4.0" },
32+
Loading: { ds3: "3.6.0", ds5: "5.9.3", pentahoPlus: "0.4.0" },
33+
"Multi Button": { ds3: "3.6.0", ds5: "5.9.3", pentahoPlus: "0.4.0" },
34+
"Number Input": { ds3: "3.6.0", ds5: "5.9.3", pentahoPlus: "0.4.0" },
35+
Pagination: { ds3: "3.6.0", ds5: "5.9.3", pentahoPlus: "0.4.0" },
36+
Radio: { ds3: "3.6.0", ds5: "5.9.5", pentahoPlus: "0.4.0" },
37+
"Radio Group": { ds3: "3.6.0", ds5: "5.9.5", pentahoPlus: "0.4.0" },
38+
"ScrollTo Horizontal": { ds3: "3.6.0", ds5: "5.9.5", pentahoPlus: "0.4.0" },
39+
"ScrollTo Vertical": { ds3: "3.6.0", ds5: "5.9.5", pentahoPlus: "0.4.0" },
40+
"Search Input": { ds3: "3.6.0", ds5: "5.9.3", pentahoPlus: "0.4.0" },
41+
Section: { ds3: "3.6.0", ds5: "5.9.5", pentahoPlus: "0.4.0" },
42+
Select: { ds3: "3.6.0", ds5: "5.9.3", pentahoPlus: "0.4.0" },
43+
Skeleton: { ds3: "3.6.0", ds5: "5.9.5", pentahoPlus: "0.4.0" },
44+
Slider: { ds3: "3.6.0", ds5: "5.9.3", pentahoPlus: "0.4.0" },
45+
Snackbar: { ds3: "3.6.0", ds5: "5.9.3", pentahoPlus: "0.4.0" },
46+
Switch: { ds3: "3.6.0", ds5: "5.9.5", pentahoPlus: "0.4.0" },
47+
// Table: { ds3: "3.6.0", ds5: "5.9.5", pentahoPlus: "0.4.0" },
48+
Tabs: { ds3: "3.6.0", ds5: "5.9.5", pentahoPlus: "0.4.0" },
49+
Tag: { ds3: "3.6.0", ds5: "5.9.3", pentahoPlus: "0.4.0" },
50+
"Tags Input": { ds3: "3.6.0", ds5: "5.9.3", pentahoPlus: "0.4.0" },
51+
Textarea: { ds3: "3.6.0", ds5: "5.9.3", pentahoPlus: "0.4.0" },
52+
"Time Picker": { ds3: "3.6.0", ds5: "5.9.3", pentahoPlus: "0.4.0" },
53+
"Toggle Button": { ds3: "3.6.0", ds5: "5.9.5", pentahoPlus: "0.4.0" },
54+
Tooltip: { ds3: "3.6.0", ds5: "5.9.5", pentahoPlus: "0.4.0" },
55+
Typography: { ds3: "3.6.0", ds5: "5.9.5", pentahoPlus: "0.4.0" },
56+
"Vertical Navigation": { ds3: "3.6.0", ds5: "5.9.3", pentahoPlus: "0.4.0" },
57+
};

‎apps/docs/src/pages/docs/_meta.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ export default {
1717
type: "separator",
1818
title: "Foundation",
1919
},
20+
theming: "Theming",
2021
"color-tokens": {
2122
title: "Color Tokens",
2223
theme: {

‎apps/docs/src/pages/docs/color-palette.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { Callout } from "nextra/components";
22

3-
import { ColorPalette } from "../../components/docs/ColorPalette";
3+
import { ColorPalette } from "../../components/color/ColorPalette";
44

55
# Color Palette
66

‎apps/docs/src/pages/docs/color-tokens.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { Callout } from "nextra/components";
22

3-
import { ColorTokens } from "../../components/docs/ColorTokens";
3+
import { ColorTokens } from "../../components/color/ColorTokens";
44

55
# Color Tokens
66

‎apps/docs/src/pages/docs/theming.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ Use the `HvProvider` to configure the active theme and color mode:
2323
</HvProvider>
2424
```
2525

26-
- If `themes` is not provided, the default is DS5.
26+
- If `themes` is not provided, the default is Pentaho+.
2727
- If only one theme is provided, `theme` can be omitted.
2828
- If `colorMode` is omitted, `dawn` is used by default.
2929

‎apps/docs/src/pages/globals.css

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -15,22 +15,22 @@ pre {
1515
@apply mt-4 mb-4;
1616
}
1717

18-
article {
18+
.nextra-content main {
1919
font-size: 1rem;
2020
}
2121

22-
article > main h2 {
22+
.nextra-content main h2 {
2323
font-size: 1.7rem !important;
2424
@apply !border-none;
2525
}
2626

27-
article > main h2 + p,
28-
article > main h3 + p {
27+
.nextra-content main h2 + p,
28+
.nextra-content main h3 + p {
2929
@apply !mt-2;
3030
}
3131

32-
article > main ul,
33-
article > main ol {
32+
.nextra-content main ul,
33+
.nextra-content main ol {
3434
@apply !my-4;
3535
}
3636

0 commit comments

Comments
 (0)