Skip to content

Commit 0dc2c7c

Browse files
author
Alice Koreman
committed
wrap text on pages in Box components
1 parent 4fc29e2 commit 0dc2c7c

File tree

2 files changed

+19
-19
lines changed

2 files changed

+19
-19
lines changed

pages/code-view/with-line-wrapping.page.tsx

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
22
// SPDX-License-Identifier: Apache-2.0
33

4-
import { SpaceBetween } from "@cloudscape-design/components";
4+
import { Box, SpaceBetween } from "@cloudscape-design/components";
55

66
import { CodeView } from "../../lib/components";
77
import cppHighlight from "../../lib/components/code-view/highlight/cpp";
@@ -12,27 +12,27 @@ export default function CodeViewPage() {
1212
<ScreenshotArea>
1313
<h1>Code View</h1>
1414
<SpaceBetween direction="vertical" size="l">
15-
No wrapping, no line numbers
15+
<Box>No wrapping, no line numbers</Box>
1616
<CodeView
1717
content={`Hello this is a short line.\nHello this is a long line. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.\nHello this is another short line.`}
1818
/>
19-
No wrapping, line numbers
19+
<Box>No wrapping, line numbers</Box>
2020
<CodeView
2121
lineNumbers={true}
2222
content={`Hello this is a short line.\nHello this is a long line. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.\nHello this is another short line.`}
2323
/>
24-
Wrapping, no line numbers
24+
<Box>Wrapping, no line numbers</Box>
2525
<CodeView
2626
lineWrapping={true}
2727
content={`Hello this is a short line.\nHello this is a long line. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.\nHello this is another short line.`}
2828
/>
29-
Wrapping, line numbers
29+
<Box>Wrapping, line numbers</Box>
3030
<CodeView
3131
lineWrapping={true}
3232
lineNumbers={true}
3333
content={`Hello this is a short line.\nHello this is a long line. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.\nHello this is another short line.`}
3434
/>
35-
Full example with indentation and code highlighting
35+
<Box>Full example with indentation and code highlighting</Box>
3636
<CodeView
3737
lineWrapping={true}
3838
lineNumbers={true}

pages/code-view/with-syntax-highlighting.page.tsx

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
22
// SPDX-License-Identifier: Apache-2.0
33

4-
import { SpaceBetween } from "@cloudscape-design/components";
4+
import { Box, SpaceBetween } from "@cloudscape-design/components";
55

66
import { CodeView } from "../../lib/components";
77
import htmlHighlight from "../../lib/components/code-view/highlight/html";
@@ -23,32 +23,32 @@ export default function CodeViewPage() {
2323
<ScreenshotArea>
2424
<h1>Code View</h1>
2525
<SpaceBetween direction="vertical" size="l">
26-
JavaScript
26+
<Box>JavaScript</Box>
2727
<CodeView content={`const hello = "world";\nconsole.log(hello);`} highlight={javascriptHighlight} />
28-
TypeScript
28+
<Box>TypeScript</Box>
2929
<CodeView content={`let hello: string = "world";\nconsole.log(hello);`} highlight={typescriptHighlight} />
30-
XML
30+
<Box>XML</Box>
3131
<CodeView content={`<greeting>Hello, world!</greeting>`} highlight={xmlHighlight} />
32-
Markdown (MDX)
32+
<Box>Markdown (MDX)</Box>
3333
<CodeView content={`# Hello World\n\nThis is a markdown example.`} highlight={markdownHighlight} />
34-
Bash (Shell Script)
34+
<Box>Bash (Shell Script)</Box>
3535
<CodeView content={`echo "Hello, world!"`} highlight={shHighlight} />
36-
CSS
36+
<Box>CSS</Box>
3737
<CodeView content={`body { background-color: lightblue; }`} highlight={cssHighlight} />
38-
HTML
38+
<Box>HTML</Box>
3939
<CodeView content={`<h1>Hello, World!</h1>`} highlight={htmlHighlight} />
40-
Java
40+
<Box>Java</Box>
4141
<CodeView
4242
content={`public class HelloWorld {\n public static void main(String[] args) {\n System.out.println("Hello, World!");\n }\n}`}
4343
highlight={javaHighlight}
4444
/>
45-
JSON
45+
<Box>JSON</Box>
4646
<CodeView content={`{"greeting": "Hello, world!"}`} highlight={jsonHighlight} />
47-
PHP
47+
<Box>PHP</Box>
4848
<CodeView content={`<?php\necho 'Hello, world!';\n?>`} highlight={phpHighlight} />
49-
Python
49+
<Box>Python</Box>
5050
<CodeView content={`print("Hello, World!")`} highlight={pythonHighlight} />
51-
YAML
51+
<Box>YAML</Box>
5252
<CodeView content={`greeting: Hello, world!`} highlight={yamlHighlight} />
5353
</SpaceBetween>
5454
</ScreenshotArea>

0 commit comments

Comments
 (0)