Skip to content

Commit 3b03489

Browse files
GomezIvannGomezIvann
committed
Text Input component & new component doc pages
1 parent 5263ae2 commit 3b03489

File tree

15 files changed

+561
-25
lines changed

15 files changed

+561
-25
lines changed

‎apps/web/app/components/application-layout/page.tsx‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import ApplicationLayoutPage from "@/screens/components/application-layout/application-layout";
2+
import { Metadata } from "next";
3+
4+
export const metadata: Metadata = {
5+
title: "Application layout - Mila components",
6+
description: "Application layout component of the Mila component library.",
7+
};
8+
9+
export default function Introduction() {
10+
return <ApplicationLayoutPage />;
11+
}

‎apps/web/app/components/badge/page.tsx‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import BadgePage from "@/screens/components/badge/badge";
2+
import { Metadata } from "next";
3+
4+
export const metadata: Metadata = {
5+
title: "Badge - Mila components",
6+
description: "Badge component of the Mila component library.",
7+
};
8+
9+
export default function Introduction() {
10+
return <BadgePage />;
11+
}

‎apps/web/app/components/layout.tsx‎

Lines changed: 0 additions & 5 deletions
This file was deleted.

‎apps/web/common/pages-list.ts‎

Lines changed: 13 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
21
type LinkDetails = {
32
label: string;
43
href: string;
@@ -26,19 +25,19 @@ const componentsLinks: LinkDetails[] = [
2625
{ label: "Action button", href: "/components/action-button" },
2726
{ label: "Application layout", href: "/components/application-layout" },
2827
{ label: "Badge", href: "/components/badge" },
29-
{ label: "Bulleted list", href: "/components/bulleted-list" },
30-
{ label: "Button", href: "/components/button" },
31-
{ label: "Divider", href: "/components/divider" },
32-
{ label: "Dropdown menu", href: "/components/dropdown-menu" },
33-
{ label: "Flex", href: "/components/flex" },
34-
{ label: "Footer", href: "/components/footer" },
35-
{ label: "Header", href: "/components/header" },
36-
{ label: "Heading", href: "/components/heading" },
37-
{ label: "Link", href: "/components/link" },
38-
{ label: "Paragraph", href: "/components/paragraph" },
39-
{ label: "Quick navigation", href: "/components/quick-navigation" },
40-
{ label: "Side navigation", href: "/components/side-navigation" },
41-
{ label: "Table", href: "/components/table" },
28+
// { label: "Bulleted list", href: "/components/bulleted-list" },
29+
// { label: "Button", href: "/components/button" },
30+
// { label: "Divider", href: "/components/divider" },
31+
// { label: "Dropdown menu", href: "/components/dropdown-menu" },
32+
// { label: "Flex", href: "/components/flex" },
33+
// { label: "Footer", href: "/components/footer" },
34+
// { label: "Header", href: "/components/header" },
35+
// { label: "Heading", href: "/components/heading" },
36+
// { label: "Link", href: "/components/link" },
37+
// { label: "Paragraph", href: "/components/paragraph" },
38+
// { label: "Quick navigation", href: "/components/quick-navigation" },
39+
// { label: "Side navigation", href: "/components/side-navigation" },
40+
// { label: "Table", href: "/components/table" },
4241
];
4342

4443
const mainBlocks: MainBlock[] = [

‎apps/web/screens/components/action-button/action-button.tsx‎

Lines changed: 22 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,10 @@ const sections = [
1212
content: (
1313
<BulletedList>
1414
<li>
15-
The action button component is accessible by default. It is important to provide a meaningful{" "}
16-
<Code>title</Code> prop to the action button to give value to both screen readers and search engines. The{" "}
17-
<Code>title</Code> prop is displayed as a tooltip when hovering over the action button.
15+
Use <Code>title</Code> prop when no text label is provided to provide an accessible text to the action button.
16+
It is important to provide a meaningful <Code>title</Code> prop to the action button to give value to both
17+
screen readers and search engines. The <Code>title</Code> prop is also displayed as a tooltip when hovering
18+
over the action button.
1819
</li>
1920
<li>
2021
Use the <Code>icon</Code> prop to display an icon next to the action button label. The <Code>icon</Code> prop
@@ -49,6 +50,7 @@ const sections = [
4950
<th>Prop name</th>
5051
<th>Type</th>
5152
<th>Description</th>
53+
<th>Default value</th>
5254
</tr>
5355
</thead>
5456
<tbody>
@@ -58,27 +60,35 @@ const sections = [
5860
<Code table>string</Code>
5961
</td>
6062
<td>Text to display as the label of the action button.</td>
63+
<td>-</td>
6164
</tr>
6265
<tr>
6366
<td>disabled</td>
6467
<td>
6568
<Code table>boolean</Code>
6669
</td>
6770
<td>Disables the action button.</td>
71+
<td>
72+
<Code table>false</Code>
73+
</td>
6874
</tr>
6975
<tr>
7076
<td>icon</td>
7177
<td>
7278
<Code table>{`string | (React.ReactNode & React.SVGProps<SVGSVGElement>)`}</Code>
7379
</td>
7480
<td>Icon to display next to the action button label.</td>
81+
<td>-</td>
7582
</tr>
7683
<tr>
7784
<td>iconPosition</td>
7885
<td>
7986
<Code table>"left" | "right"</Code>
8087
</td>
8188
<td>Position of the icon.</td>
89+
<td>
90+
<Code table>"left"</Code>
91+
</td>
8292
</tr>
8393
<tr>
8494
<td>
@@ -93,6 +103,7 @@ const sections = [
93103
<Code table>{`() => void`}</Code>
94104
</td>
95105
<td>Function to be invoked by clicking on the action button.</td>
106+
<td>-</td>
96107
</tr>
97108
<tr>
98109
<td>ref</td>
@@ -102,6 +113,7 @@ const sections = [
102113
<td>
103114
Reference to the internal <Code>button</Code> element.
104115
</td>
116+
<td>-</td>
105117
</tr>
106118
<tr>
107119
<td>title</td>
@@ -112,20 +124,27 @@ const sections = [
112124
Accessible text of the action button. It gives value to both screen readers and search engines. It is
113125
displayed as a tooltip when hovering over the action button.
114126
</td>
127+
<td>-</td>
115128
</tr>
116129
<tr>
117130
<td>type</td>
118131
<td>
119132
<Code table>"button" | "submit" | "reset"</Code>
120133
</td>
121134
<td>HTML button type.</td>
135+
<td>
136+
<Code table>"button"</Code>
137+
</td>
122138
</tr>
123139
<tr>
124140
<td>variant</td>
125141
<td>
126142
<Code table>"default" | "outlined"</Code>
127143
</td>
128144
<td>Action button variants.</td>
145+
<td>
146+
<Code table>"default"</Code>
147+
</td>
129148
</tr>
130149
</tbody>
131150
</Table>

‎apps/web/screens/components/application-layout/application-layout.tsx‎

Lines changed: 129 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,129 @@
1+
"use client";
2+
3+
import { Badge, BulletedList, Divider, Flex, Heading, Link, Paragraph, Table } from "mila-components";
4+
import NextLink from "next/link";
5+
import SiteQuickNavigation from "@/common/custom-components/quick-navigation/quick-navigation";
6+
import { Code } from "@/common/custom-components/code/code";
7+
8+
const sections = [
9+
{
10+
title: "Usage",
11+
content: (
12+
<BulletedList>
13+
<li>Use this component to create a consistent layout across your application.</li>
14+
<li>
15+
The application layout component is composed of a header, a side navigation, and a footer. You can customize
16+
each of these sections by passing the appropriate children.
17+
</li>
18+
<li>
19+
We encourage you to use this component in conjunction with the{" "}
20+
<NextLink href="/components/header" passHref legacyBehavior>
21+
<Link>header</Link>
22+
</NextLink>
23+
,{" "}
24+
<NextLink href="/components/side-navigation" passHref legacyBehavior>
25+
<Link>side navigation</Link>
26+
</NextLink>
27+
, and{" "}
28+
<NextLink href="/components/footer" passHref legacyBehavior>
29+
<Link>footer</Link>
30+
</NextLink>{" "}
31+
components.
32+
</li>
33+
</BulletedList>
34+
),
35+
},
36+
// {
37+
// title: "Example",
38+
// content: <LiveCodeBlock example={defaultExample} />,
39+
// },
40+
{
41+
title: "API",
42+
content: (
43+
<Table>
44+
<thead>
45+
<tr>
46+
<th>Prop name</th>
47+
<th>Type</th>
48+
<th>Description</th>
49+
<th>Default value</th>
50+
</tr>
51+
</thead>
52+
<tbody>
53+
<tr>
54+
<td>
55+
<Flex direction="column" gap={2}>
56+
<Badge color="yellow" title="This prop is mandatory.">
57+
Required
58+
</Badge>
59+
children
60+
</Flex>
61+
</td>
62+
<td>
63+
<Code table>React.ReactNode</Code>
64+
</td>
65+
<td>The content to be displayed in the main section of the application layout.</td>
66+
<td>-</td>
67+
</tr>
68+
<tr>
69+
<td>footer</td>
70+
<td>
71+
<Code table>React.ReactNode</Code>
72+
</td>
73+
<td>The content to be displayed in the footer section of the application layout.</td>
74+
<td>-</td>
75+
</tr>
76+
<tr>
77+
<td>header</td>
78+
<td>
79+
<Code table>React.ReactNode</Code>
80+
</td>
81+
<td>The content to be displayed in the header section of the application layout.</td>
82+
<td>-</td>
83+
</tr>
84+
<tr>
85+
<td>sideNavigation</td>
86+
<td>
87+
<Code table>React.ReactNode</Code>
88+
</td>
89+
<td>The content to be displayed in the side navigation menu of the application layout.</td>
90+
<td>-</td>
91+
</tr>
92+
</tbody>
93+
</Table>
94+
),
95+
},
96+
{
97+
title: "Accessibility",
98+
subSections: [
99+
{
100+
title: "ARIA Authoring Practices Guide (APG)",
101+
content: (
102+
<BulletedList>
103+
<li>
104+
<Link href="https://www.w3.org/WAI/ARIA/apg/patterns/landmarks/" newWindow>
105+
Landmarks pattern
106+
</Link>
107+
</li>
108+
</BulletedList>
109+
),
110+
},
111+
],
112+
},
113+
];
114+
115+
export default function ApplicationLayoutPage() {
116+
return (
117+
<Flex direction="column" gap={64}>
118+
<Flex direction="column" gap={40}>
119+
<Heading level={1}>Application layout</Heading>
120+
<Paragraph>
121+
The application layout component represents the layout structure of your UI. It is composed of a header, a
122+
side navigation menu, and a footer section.
123+
</Paragraph>
124+
<Divider />
125+
</Flex>
126+
<SiteQuickNavigation sections={sections} startHeadingLevel={2} />
127+
</Flex>
128+
);
129+
}

0 commit comments

Comments
 (0)