halstack-react/apps/website/screens/components/application-layout/code/ApplicationLayoutCodePage.tsx at 436a0dc3a6b742298c38b930e7459dcc04a92607 · dxc-technology/halstack-react · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
import { DxcParagraph, DxcFlex, DxcTable, DxcLink } from "@dxc-technology/halstack-react";
import DocFooter from "@/common/DocFooter";
import QuickNavContainer from "@/common/QuickNavContainer";
import Link from "next/link";
import Code, { ExtendedTableCode, TableCode } from "@/common/Code";
import StatusBadge from "@/common/StatusBadge";

const logoTypeString = `{
  src: string | SVG;
  alt: string;
  href?: string;
  onClick?: () => void;
}`;

const ApplicationLayoutPropsTable = () => (
  <DxcTable>
    <thead>
      <tr>
        <th>Name</th>
        <th>Type</th>
        <th>Description</th>
        <th>Default</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <DxcFlex direction="column" gap="var(--spacing-gap-xs)" alignItems="baseline">
            <StatusBadge status="required" />
            children
          </DxcFlex>
        </td>
        <td>
          <TableCode>React.ReactNode</TableCode>
        </td>
        <td>
          Use the <Code>DxcApplicationLayout.Main</Code> provided to render main content.
        </td>
        <td>-</td>
      </tr>
      <tr>
        <td>footer</td>
        <td>
          <TableCode>React.ReactNode</TableCode>
        </td>
        <td>
          Footer of the application layout shown at the bottom of the screen. It is optional and if it is not specified,
          the default header will be shown. Please check the Footer documentation{" "}
          <Link href="/components/footer" passHref legacyBehavior>
            <DxcLink>here</DxcLink>
          </Link>
          .
        </td>
        <td>-</td>
      </tr>
      <tr>
        <td>header</td>
        <td>
          <TableCode>React.ReactNode</TableCode>
        </td>
        <td>
          Header of the application layout shown at the top of the screen. It is optional and if it is not specified,
          the default header will be shown. Please check the Header documentation{" "}
          <Link href="/components/header" passHref legacyBehavior>
            <DxcLink>here</DxcLink>
          </Link>
          .
        </td>
        <td>-</td>
      </tr>
      <tr>
        <td>
          <DxcFlex direction="column" gap="var(--spacing-gap-xs)" alignItems="baseline">
            <StatusBadge status="new" />
            logo
          </DxcFlex>
        </td>
        <td>
          <ExtendedTableCode>{logoTypeString}</ExtendedTableCode>
        </td>
        <td>
          Object used to configure the header logo. The logo will be placed in the header, but if no global app header
          exists, it will be shown in the sidenav instead.
        </td>
        <td>-</td>
      </tr>
      <tr>
        <td>sidenav</td>
        <td>
          <TableCode>React.ReactNode</TableCode>
        </td>
        <td>
          Sidenav of the application layout shown at the left side of the screen. Please check the Sidenav documentation{" "}
          <Link href="/components/sidenav" passHref legacyBehavior>
            <DxcLink>here</DxcLink>
          </Link>
          .
        </td>
        <td>-</td>
      </tr>
    </tbody>
  </DxcTable>
);

const sections = [
  {
    title: "Props",
    content: <ApplicationLayoutPropsTable />,
  },
  {
    title: "DxcApplicationLayout.Main",
    content: (
      <DxcParagraph>
        Everything between the tags will be displayed as the main content of the application layout.
      </DxcParagraph>
    ),
  },
  {
    title: "Examples",
    subSections: [
      {
        title: "Application layout with components",
        content: (
          <iframe
            src="https://codesandbox.io/embed/p4xxm3?view=editor+%2B+preview&module=%2Fsrc%2FApp.js"
            style={{
              width: "100%",
              minHeight: "500px",
              border: "0",
              borderRadius: "4px",
              overflow: "hidden",
            }}
            title="Application layout with components"
            sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
          />
        ),
      },
    ],
  },
];

const ApplicationLayoutCodePage = () => (
  <DxcFlex direction="column" gap="4rem">
    <QuickNavContainer sections={sections} startHeadingLevel={2} />
    <DocFooter githubLink="https://github.com/dxc-technology/halstack-react/blob/master/apps/website/screens/components/application-layout/code/ApplicationLayoutCodePage.tsx" />
  </DxcFlex>
);

export default ApplicationLayoutCodePage;