scb-wc 0.1.8 → 0.1.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/bin/scb-wc.mjs +159 -0
- package/package.json +2 -2
- package/starters/blazor/Components/App.razor +34 -0
- package/starters/blazor/Components/Layout/MainLayout.razor +39 -0
- package/starters/blazor/Components/Pages/Home.razor +80 -0
- package/starters/blazor/Components/Routes.razor +14 -0
- package/starters/blazor/Components/_Imports.razor +11 -0
- package/starters/blazor/Program.cs +23 -0
- package/starters/blazor/README.md +28 -0
- package/starters/blazor/ScbStarterApp.csproj +8 -0
- package/starters/blazor/dot-gitignore +3 -0
- package/starters/blazor/package.json +14 -0
- package/starters/blazor/wwwroot/app.css +54 -0
- package/starters/html/README.md +23 -0
- package/starters/html/dot-gitignore +2 -0
- package/starters/html/index.html +12 -0
- package/starters/html/main.js +135 -0
- package/starters/html/package.json +16 -0
- package/starters/react/README.md +24 -0
- package/starters/react/dot-gitignore +2 -0
- package/starters/react/index.html +12 -0
- package/starters/react/package.json +19 -0
- package/starters/react/src/App.jsx +118 -0
- package/starters/react/src/main.jsx +29 -0
- package/starters/react/vite.config.js +6 -0
package/bin/scb-wc.mjs
ADDED
|
@@ -0,0 +1,159 @@
|
|
|
1
|
+
#!/usr/bin/env node
|
|
2
|
+
|
|
3
|
+
import fs from 'fs';
|
|
4
|
+
import path from 'path';
|
|
5
|
+
import { fileURLToPath } from 'url';
|
|
6
|
+
|
|
7
|
+
const __filename = fileURLToPath(import.meta.url);
|
|
8
|
+
const __dirname = path.dirname(__filename);
|
|
9
|
+
const packageRoot = path.resolve(__dirname, '..');
|
|
10
|
+
const packageJson = JSON.parse(
|
|
11
|
+
fs.readFileSync(path.join(packageRoot, 'package.json'), 'utf8'),
|
|
12
|
+
);
|
|
13
|
+
const startersRoot = path.join(packageRoot, 'starters');
|
|
14
|
+
|
|
15
|
+
const usage = `
|
|
16
|
+
SCB Web Components
|
|
17
|
+
|
|
18
|
+
Användning:
|
|
19
|
+
npx scb-wc init <html|react|blazor> [mapp]
|
|
20
|
+
|
|
21
|
+
Exempel:
|
|
22
|
+
npx scb-wc init html my-app
|
|
23
|
+
npx scb-wc init react my-react-app
|
|
24
|
+
npx scb-wc init blazor my-blazor-app
|
|
25
|
+
`.trim();
|
|
26
|
+
|
|
27
|
+
const textExtensions = new Set([
|
|
28
|
+
'.css',
|
|
29
|
+
'.cs',
|
|
30
|
+
'.csproj',
|
|
31
|
+
'.html',
|
|
32
|
+
'.js',
|
|
33
|
+
'.json',
|
|
34
|
+
'.jsx',
|
|
35
|
+
'.md',
|
|
36
|
+
'.razor',
|
|
37
|
+
'.txt',
|
|
38
|
+
]);
|
|
39
|
+
|
|
40
|
+
function fail(message) {
|
|
41
|
+
console.error(`\n${message}\n`);
|
|
42
|
+
process.exit(1);
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
function renameTemplateEntry(name) {
|
|
46
|
+
return name.startsWith('dot-') ? `.${name.slice(4)}` : name;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
function toPascalCaseSegment(segment) {
|
|
50
|
+
if (!segment) return '';
|
|
51
|
+
return segment.charAt(0).toUpperCase() + segment.slice(1).toLowerCase();
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
function sanitizeStarterNamespace(name) {
|
|
55
|
+
const pascalCaseName = name
|
|
56
|
+
.split(/[^A-Za-z0-9]+/)
|
|
57
|
+
.filter(Boolean)
|
|
58
|
+
.map(toPascalCaseSegment)
|
|
59
|
+
.join('');
|
|
60
|
+
|
|
61
|
+
if (!pascalCaseName) return 'ScbStarterApp';
|
|
62
|
+
if (/^[0-9]/.test(pascalCaseName)) return `_${pascalCaseName}`;
|
|
63
|
+
return pascalCaseName;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
function ensureTargetIsCreatable(targetDir) {
|
|
67
|
+
if (!fs.existsSync(targetDir)) return;
|
|
68
|
+
const entries = fs.readdirSync(targetDir);
|
|
69
|
+
if (entries.length > 0) {
|
|
70
|
+
fail(`Mappen ${targetDir} finns redan och är inte tom.`);
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
function copyTemplateDir(sourceDir, targetDir) {
|
|
75
|
+
fs.mkdirSync(targetDir, { recursive: true });
|
|
76
|
+
|
|
77
|
+
for (const entry of fs.readdirSync(sourceDir, { withFileTypes: true })) {
|
|
78
|
+
const from = path.join(sourceDir, entry.name);
|
|
79
|
+
const to = path.join(targetDir, renameTemplateEntry(entry.name));
|
|
80
|
+
|
|
81
|
+
if (entry.isDirectory()) {
|
|
82
|
+
copyTemplateDir(from, to);
|
|
83
|
+
continue;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
fs.mkdirSync(path.dirname(to), { recursive: true });
|
|
87
|
+
fs.copyFileSync(from, to);
|
|
88
|
+
}
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
function replacePlaceholders(rootDir, replacements) {
|
|
92
|
+
const walk = (currentDir) => {
|
|
93
|
+
for (const entry of fs.readdirSync(currentDir, { withFileTypes: true })) {
|
|
94
|
+
const fullPath = path.join(currentDir, entry.name);
|
|
95
|
+
|
|
96
|
+
if (entry.isDirectory()) {
|
|
97
|
+
walk(fullPath);
|
|
98
|
+
continue;
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
const ext = path.extname(entry.name);
|
|
102
|
+
if (!textExtensions.has(ext)) continue;
|
|
103
|
+
|
|
104
|
+
let contents = fs.readFileSync(fullPath, 'utf8');
|
|
105
|
+
for (const [placeholder, value] of Object.entries(replacements)) {
|
|
106
|
+
contents = contents.replaceAll(placeholder, value);
|
|
107
|
+
}
|
|
108
|
+
fs.writeFileSync(fullPath, contents, 'utf8');
|
|
109
|
+
}
|
|
110
|
+
};
|
|
111
|
+
|
|
112
|
+
walk(rootDir);
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
const [, , command, template, maybeTargetDir] = process.argv;
|
|
116
|
+
|
|
117
|
+
if (!command || command === '--help' || command === '-h') {
|
|
118
|
+
console.log(usage);
|
|
119
|
+
process.exit(0);
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
if (command !== 'init') {
|
|
123
|
+
fail(`Okänt kommando: ${command}\n\n${usage}`);
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
if (!template || !['html', 'react', 'blazor'].includes(template)) {
|
|
127
|
+
fail(`Välj en starter: html, react eller blazor.\n\n${usage}`);
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
const targetDir = path.resolve(process.cwd(), maybeTargetDir || `${template}-starter`);
|
|
131
|
+
const sourceDir = path.join(startersRoot, template);
|
|
132
|
+
|
|
133
|
+
if (!fs.existsSync(sourceDir)) {
|
|
134
|
+
fail(`Hittar inte startermallen för ${template}.`);
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
ensureTargetIsCreatable(targetDir);
|
|
138
|
+
copyTemplateDir(sourceDir, targetDir);
|
|
139
|
+
replacePlaceholders(targetDir, {
|
|
140
|
+
'__SCB_WC_PACKAGE_NAME__': packageJson.name,
|
|
141
|
+
'__SCB_WC_VERSION__': packageJson.version,
|
|
142
|
+
'__STARTER_NAME__': path.basename(targetDir),
|
|
143
|
+
'__STARTER_NAMESPACE__': sanitizeStarterNamespace(path.basename(targetDir)),
|
|
144
|
+
});
|
|
145
|
+
|
|
146
|
+
console.log(`\nSkapade ${template}-starter i ${targetDir}\n`);
|
|
147
|
+
|
|
148
|
+
if (template === 'blazor') {
|
|
149
|
+
console.log('Nästa steg:');
|
|
150
|
+
console.log(` 1. cd ${targetDir}`);
|
|
151
|
+
console.log(' 2. npm install');
|
|
152
|
+
console.log(' 3. npm run ui:setup');
|
|
153
|
+
console.log(' 4. dotnet run');
|
|
154
|
+
} else {
|
|
155
|
+
console.log('Nästa steg:');
|
|
156
|
+
console.log(` 1. cd ${targetDir}`);
|
|
157
|
+
console.log(' 2. npm install');
|
|
158
|
+
console.log(' 3. npm run dev');
|
|
159
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "scb-wc",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.10",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"module": "index.js",
|
|
@@ -422,5 +422,5 @@
|
|
|
422
422
|
},
|
|
423
423
|
"./mvc/*": "./mvc/*"
|
|
424
424
|
},
|
|
425
|
-
"buildHash": "
|
|
425
|
+
"buildHash": "5CFBC69AE3811CCA97321188740C215913D6850FA07F4413B78F2A8A41D5AC18"
|
|
426
426
|
}
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
@using Microsoft.AspNetCore.Components.Web
|
|
2
|
+
|
|
3
|
+
<!DOCTYPE html>
|
|
4
|
+
<html lang="sv">
|
|
5
|
+
<head>
|
|
6
|
+
<meta charset="utf-8" />
|
|
7
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
8
|
+
<base href="/" />
|
|
9
|
+
|
|
10
|
+
<link rel="stylesheet" href="ui/scb-wc.css" />
|
|
11
|
+
<link rel="stylesheet" href="ui/scb-typography.css" />
|
|
12
|
+
|
|
13
|
+
<HeadOutlet />
|
|
14
|
+
</head>
|
|
15
|
+
|
|
16
|
+
<body>
|
|
17
|
+
<Routes @rendermode="InteractiveServer" />
|
|
18
|
+
|
|
19
|
+
<script type="module" src="ui/components/scb-header/scb-header.js"></script>
|
|
20
|
+
<script type="module" src="ui/components/scb-header/scb-header-tab.js"></script>
|
|
21
|
+
<script type="module" src="ui/components/scb-header/scb-header-utility.js"></script>
|
|
22
|
+
<script type="module" src="ui/components/scb-footer/scb-footer.js"></script>
|
|
23
|
+
<script type="module" src="ui/components/scb-footer/scb-footer-section.js"></script>
|
|
24
|
+
<script type="module" src="ui/components/scb-link/scb-link.js"></script>
|
|
25
|
+
<script type="module" src="ui/components/scb-grid/scb-grid.js"></script>
|
|
26
|
+
<script type="module" src="ui/components/scb-grid/scb-grid-item.js"></script>
|
|
27
|
+
<script type="module" src="ui/components/scb-button/scb-button.js"></script>
|
|
28
|
+
<script type="module" src="ui/components/scb-card/scb-card.js"></script>
|
|
29
|
+
<script type="module" src="ui/components/scb-accordion/scb-accordion.js"></script>
|
|
30
|
+
<script type="module" src="ui/components/scb-accordion/scb-accordion-item.js"></script>
|
|
31
|
+
<script type="module" src="ui/scb-blazor-bridge.js"></script>
|
|
32
|
+
<script src="_framework/blazor.web.js"></script>
|
|
33
|
+
</body>
|
|
34
|
+
</html>
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
@* BASIC_TEMPLATE_BLAZOR_LAYOUT_START *@
|
|
2
|
+
@inherits LayoutComponentBase
|
|
3
|
+
|
|
4
|
+
<scb-grid padding-inline="6" padding-block="2" row-gap="4">
|
|
5
|
+
<scb-grid-item col-span-compact="4" col-span-medium="8" col-span-expanded="12">
|
|
6
|
+
<scb-header
|
|
7
|
+
logo-href="/"
|
|
8
|
+
show-drawer="true"
|
|
9
|
+
show-search="true"
|
|
10
|
+
include-utility-in-menu="true"
|
|
11
|
+
search-placeholder="Sök"
|
|
12
|
+
menu-label="Meny"
|
|
13
|
+
menu-section-label="Navigering"
|
|
14
|
+
>
|
|
15
|
+
<scb-header-tab label="Produkter" href="#"></scb-header-tab>
|
|
16
|
+
<scb-header-tab label="Statistik" href="#" selected></scb-header-tab>
|
|
17
|
+
<scb-header-tab label="Dokumentation" href="#"></scb-header-tab>
|
|
18
|
+
<scb-header-utility label="Kontakt" href="#"></scb-header-utility>
|
|
19
|
+
</scb-header>
|
|
20
|
+
</scb-grid-item>
|
|
21
|
+
|
|
22
|
+
<scb-grid-item col-span-compact="4" col-span-medium="8" col-span-expanded="12">
|
|
23
|
+
<main>
|
|
24
|
+
@Body
|
|
25
|
+
</main>
|
|
26
|
+
</scb-grid-item>
|
|
27
|
+
</scb-grid>
|
|
28
|
+
|
|
29
|
+
<scb-footer description="Statistikmyndigheten SCB förser samhället med statistik för beslutsfattande, debatt och forskning.">
|
|
30
|
+
<scb-footer-section title="Hitta snabbt">
|
|
31
|
+
<scb-link href="#">Kom igång</scb-link>
|
|
32
|
+
<scb-link href="#">Dokumentation</scb-link>
|
|
33
|
+
</scb-footer-section>
|
|
34
|
+
<scb-footer-section title="Kontakt">
|
|
35
|
+
<scb-link href="#">Kontakta oss</scb-link>
|
|
36
|
+
<scb-link href="#">Support</scb-link>
|
|
37
|
+
</scb-footer-section>
|
|
38
|
+
</scb-footer>
|
|
39
|
+
@* BASIC_TEMPLATE_BLAZOR_LAYOUT_END *@
|
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
@page "/"
|
|
2
|
+
|
|
3
|
+
@* BASIC_TEMPLATE_BLAZOR_HOME_START *@
|
|
4
|
+
<scb-grid row-gap="8" column-gap="7" align-items="start">
|
|
5
|
+
<scb-grid-item col-span-compact="4" col-span-medium="8" col-span-expanded="8">
|
|
6
|
+
<section>
|
|
7
|
+
<h1>Grundmall för Blazor</h1>
|
|
8
|
+
<p>För appar i Blazor där du vill bygga i Razor och använda samma komponentbibliotek.</p>
|
|
9
|
+
<p>Öppna Code-panelen nedanför storyn för att se koden.</p>
|
|
10
|
+
|
|
11
|
+
<scb-grid row-gap="10" cols-compact="1" cols-medium="1" cols-expanded="1">
|
|
12
|
+
<scb-grid-item col-span-compact="1" col-span-medium="1" col-span-expanded="1">
|
|
13
|
+
<ScbTextfield
|
|
14
|
+
Label="Sökord"
|
|
15
|
+
SupportingText="Skriv något enkelt för att komma igång."
|
|
16
|
+
/>
|
|
17
|
+
</scb-grid-item>
|
|
18
|
+
|
|
19
|
+
<scb-grid-item col-span-compact="1" col-span-medium="1" col-span-expanded="1">
|
|
20
|
+
<ScbSelect
|
|
21
|
+
label="Typ av innehåll"
|
|
22
|
+
supporting-text="Välj det som passar sidan."
|
|
23
|
+
placeholder="Välj ett alternativ"
|
|
24
|
+
>
|
|
25
|
+
<scb-select-option value="nyhet" label="Nyhet"></scb-select-option>
|
|
26
|
+
<scb-select-option value="rapport" label="Rapport"></scb-select-option>
|
|
27
|
+
<scb-select-option value="tabell" label="Tabell"></scb-select-option>
|
|
28
|
+
</ScbSelect>
|
|
29
|
+
</scb-grid-item>
|
|
30
|
+
|
|
31
|
+
<scb-grid-item col-span-compact="1" col-span-medium="1" col-span-expanded="1">
|
|
32
|
+
<ScbCheckbox
|
|
33
|
+
Label="Visa endast publicerat innehåll"
|
|
34
|
+
Checked="true"
|
|
35
|
+
/>
|
|
36
|
+
</scb-grid-item>
|
|
37
|
+
|
|
38
|
+
<scb-grid-item col-span-compact="1" col-span-medium="1" col-span-expanded="1">
|
|
39
|
+
<scb-button label="Primär handling"></scb-button>
|
|
40
|
+
<scb-button variant="outlined" label="Sekundär handling" spacing-left="2"></scb-button>
|
|
41
|
+
</scb-grid-item>
|
|
42
|
+
|
|
43
|
+
<scb-grid-item col-span-compact="1" col-span-medium="1" col-span-expanded="1">
|
|
44
|
+
<ScbAccordion>
|
|
45
|
+
<scb-accordion-item
|
|
46
|
+
title="Exempelavsnitt"
|
|
47
|
+
supporting-text="Visa eller dölj mer information."
|
|
48
|
+
open
|
|
49
|
+
>
|
|
50
|
+
Här kan du lägga sådant som inte behöver synas direkt från start.
|
|
51
|
+
</scb-accordion-item>
|
|
52
|
+
</ScbAccordion>
|
|
53
|
+
</scb-grid-item>
|
|
54
|
+
</scb-grid>
|
|
55
|
+
</section>
|
|
56
|
+
</scb-grid-item>
|
|
57
|
+
|
|
58
|
+
<scb-grid-item col-span-compact="4" col-span-medium="8" col-span-expanded="4">
|
|
59
|
+
<scb-card type="list" variant="filled" card-title="Kom igång">
|
|
60
|
+
<ScbList NoDivider="true" density="-4">
|
|
61
|
+
<scb-list-item
|
|
62
|
+
type="text"
|
|
63
|
+
label="Skapa mallen"
|
|
64
|
+
supporting-text="npx scb-wc init blazor my-blazor-app"
|
|
65
|
+
></scb-list-item>
|
|
66
|
+
<scb-list-item
|
|
67
|
+
type="text"
|
|
68
|
+
label="När den passar"
|
|
69
|
+
supporting-text="För appar i Blazor där du vill bygga i Razor och använda samma komponentbibliotek."
|
|
70
|
+
></scb-list-item>
|
|
71
|
+
<scb-list-item
|
|
72
|
+
type="text"
|
|
73
|
+
label="Nästa steg"
|
|
74
|
+
supporting-text="Byt först ut text, länkar och innehåll. Lägg sedan till fler komponenter när du behöver dem."
|
|
75
|
+
></scb-list-item>
|
|
76
|
+
</ScbList>
|
|
77
|
+
</scb-card>
|
|
78
|
+
</scb-grid-item>
|
|
79
|
+
</scb-grid>
|
|
80
|
+
@* BASIC_TEMPLATE_BLAZOR_HOME_END *@
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
@using Microsoft.AspNetCore.Components.Routing
|
|
2
|
+
@using __STARTER_NAMESPACE__.Components.Layout
|
|
3
|
+
|
|
4
|
+
<Router AppAssembly="@typeof(Program).Assembly">
|
|
5
|
+
<Found Context="routeData">
|
|
6
|
+
<RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
|
|
7
|
+
<FocusOnNavigate RouteData="@routeData" Selector="h1" />
|
|
8
|
+
</Found>
|
|
9
|
+
<NotFound>
|
|
10
|
+
<LayoutView Layout="@typeof(MainLayout)">
|
|
11
|
+
<p role="alert">Sidan finns inte.</p>
|
|
12
|
+
</LayoutView>
|
|
13
|
+
</NotFound>
|
|
14
|
+
</Router>
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
@using Microsoft.AspNetCore.Components.Forms
|
|
2
|
+
@using Microsoft.AspNetCore.Components.Routing
|
|
3
|
+
@using Microsoft.AspNetCore.Components.Web
|
|
4
|
+
@using static Microsoft.AspNetCore.Components.Web.RenderMode
|
|
5
|
+
@using Microsoft.JSInterop
|
|
6
|
+
@using __STARTER_NAMESPACE__
|
|
7
|
+
@using __STARTER_NAMESPACE__.Components
|
|
8
|
+
@using __STARTER_NAMESPACE__.Components.Layout
|
|
9
|
+
@using __STARTER_NAMESPACE__.Components.Pages
|
|
10
|
+
@using __STARTER_NAMESPACE__.Components.Wrappers
|
|
11
|
+
@using ScbBlazor
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
using __STARTER_NAMESPACE__.Components;
|
|
2
|
+
|
|
3
|
+
var builder = WebApplication.CreateBuilder(args);
|
|
4
|
+
|
|
5
|
+
builder.Services.AddRazorComponents()
|
|
6
|
+
.AddInteractiveServerComponents();
|
|
7
|
+
|
|
8
|
+
builder.Services.AddAntiforgery();
|
|
9
|
+
|
|
10
|
+
var app = builder.Build();
|
|
11
|
+
|
|
12
|
+
if (!app.Environment.IsDevelopment())
|
|
13
|
+
{
|
|
14
|
+
app.UseExceptionHandler("/Error", createScopeForErrors: true);
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
app.UseStaticFiles();
|
|
18
|
+
app.UseAntiforgery();
|
|
19
|
+
|
|
20
|
+
app.MapRazorComponents<App>()
|
|
21
|
+
.AddInteractiveServerRenderMode();
|
|
22
|
+
|
|
23
|
+
app.Run();
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
# __STARTER_NAME__
|
|
2
|
+
|
|
3
|
+
Startapp för Blazor med SCB Web Components.
|
|
4
|
+
|
|
5
|
+
## Kom igång
|
|
6
|
+
|
|
7
|
+
```sh
|
|
8
|
+
npm install
|
|
9
|
+
npm run ui:setup
|
|
10
|
+
dotnet run
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
## Det här ingår
|
|
14
|
+
|
|
15
|
+
- `scb-header`
|
|
16
|
+
- `scb-footer`
|
|
17
|
+
- `scb-grid`
|
|
18
|
+
- `scb-button`
|
|
19
|
+
- `ScbAccordion` som wrapper-exempel
|
|
20
|
+
|
|
21
|
+
## Var ändrar jag?
|
|
22
|
+
|
|
23
|
+
- `Components/Layout/MainLayout.razor`: appens grundlayout
|
|
24
|
+
- `Components/Pages/Home.razor`: startsidan
|
|
25
|
+
|
|
26
|
+
## Grundregel
|
|
27
|
+
|
|
28
|
+
Använd wrapper först när den finns. Använd web component-taggen direkt när det inte finns en wrapper eller när du bara behöver enkel layout.
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "__STARTER_NAME__",
|
|
3
|
+
"private": true,
|
|
4
|
+
"type": "module",
|
|
5
|
+
"scripts": {
|
|
6
|
+
"ui:install": "node -e \"const fs=require('fs'),p=require('path');const src=p.resolve('node_modules/__SCB_WC_PACKAGE_NAME__/mvc');if(!fs.existsSync(src)){console.error('Hittar inte '+src+'. Har du kört npm install?');process.exit(1);}const dst=p.resolve('wwwroot/ui');fs.rmSync(dst,{recursive:true,force:true});fs.mkdirSync('wwwroot',{recursive:true});fs.cpSync(src,dst,{recursive:true});console.log('Kopierade '+src+' → '+dst);\"",
|
|
7
|
+
"ui:blazor:interop": "node -e \"const fs=require('fs'),p=require('path');const src=p.resolve('node_modules/__SCB_WC_PACKAGE_NAME__/blazor');if(!fs.existsSync(src)){console.error('Hittar inte '+src+'. Har du kört npm install?');process.exit(1);}const csDst=p.resolve('ScbBlazor');const uiDst=p.resolve('wwwroot/ui');fs.mkdirSync(csDst,{recursive:true});fs.mkdirSync(uiDst,{recursive:true});fs.copyFileSync(p.join(src,'ScbBlazorInteropBase.cs'),p.join(csDst,'ScbBlazorInteropBase.cs'));fs.copyFileSync(p.join(src,'CustomEvents.cs'),p.join(csDst,'CustomEvents.cs'));fs.copyFileSync(p.join(src,'scb-blazor-bridge.js'),p.join(uiDst,'scb-blazor-bridge.js'));console.log('Kopierade Blazor-filer.');\"",
|
|
8
|
+
"ui:blazor:wrappers": "node -e \"const fs=require('fs'),p=require('path');const src=p.resolve('node_modules/__SCB_WC_PACKAGE_NAME__/blazor/wrappers');if(!fs.existsSync(src)){console.error('Hittar inte '+src+'. Har du kört npm install?');process.exit(1);}const dst=p.resolve('Components/Wrappers');fs.rmSync(dst,{recursive:true,force:true});fs.mkdirSync(p.dirname(dst),{recursive:true});fs.cpSync(src,dst,{recursive:true});console.log('Kopierade '+src+' → '+dst);\"",
|
|
9
|
+
"ui:setup": "npm run ui:install && npm run ui:blazor:interop && npm run ui:blazor:wrappers"
|
|
10
|
+
},
|
|
11
|
+
"dependencies": {
|
|
12
|
+
"__SCB_WC_PACKAGE_NAME__": "^__SCB_WC_VERSION__"
|
|
13
|
+
}
|
|
14
|
+
}
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
:root {
|
|
2
|
+
background: var(--md-sys-color-background);
|
|
3
|
+
color: var(--md-sys-color-on-background);
|
|
4
|
+
}
|
|
5
|
+
|
|
6
|
+
html,
|
|
7
|
+
body {
|
|
8
|
+
margin: 0;
|
|
9
|
+
font-family: var(--brand-font, Inter, sans-serif);
|
|
10
|
+
background: var(--md-sys-color-background);
|
|
11
|
+
color: var(--md-sys-color-on-background);
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
.starter-shell {
|
|
15
|
+
min-height: 100vh;
|
|
16
|
+
display: grid;
|
|
17
|
+
grid-template-rows: auto 1fr auto;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
.starter-main {
|
|
21
|
+
width: min(1200px, calc(100% - 32px));
|
|
22
|
+
margin: 0 auto;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
.hero,
|
|
26
|
+
.panel {
|
|
27
|
+
display: grid;
|
|
28
|
+
gap: var(--spacing-5);
|
|
29
|
+
padding: var(--spacing-8);
|
|
30
|
+
border-radius: 24px;
|
|
31
|
+
background: var(--md-sys-color-surface-container-low);
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
.eyebrow {
|
|
35
|
+
margin: 0;
|
|
36
|
+
font-size: 14px;
|
|
37
|
+
font-weight: 600;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.hero h1,
|
|
41
|
+
.panel h2 {
|
|
42
|
+
margin: 0;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.lead {
|
|
46
|
+
margin: 0;
|
|
47
|
+
max-width: 65ch;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.actions {
|
|
51
|
+
display: flex;
|
|
52
|
+
gap: var(--spacing-4);
|
|
53
|
+
flex-wrap: wrap;
|
|
54
|
+
}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
# __STARTER_NAME__
|
|
2
|
+
|
|
3
|
+
Startapp för vanlig HTML, CSS och JavaScript med SCB Web Components.
|
|
4
|
+
|
|
5
|
+
## Kom igång
|
|
6
|
+
|
|
7
|
+
```sh
|
|
8
|
+
npm install
|
|
9
|
+
npm run dev
|
|
10
|
+
```
|
|
11
|
+
|
|
12
|
+
## Det här ingår
|
|
13
|
+
|
|
14
|
+
- `scb-header`
|
|
15
|
+
- `scb-footer`
|
|
16
|
+
- `scb-grid`
|
|
17
|
+
- `scb-button`
|
|
18
|
+
- `scb-accordion`
|
|
19
|
+
|
|
20
|
+
## Var ändrar jag?
|
|
21
|
+
|
|
22
|
+
- `index.html`: dokumentets skal
|
|
23
|
+
- `main.js`: komponentimports och sidans markup
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="sv">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8" />
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
6
|
+
<title>SCB Starter HTML</title>
|
|
7
|
+
<script type="module" src="/main.js"></script>
|
|
8
|
+
</head>
|
|
9
|
+
<body>
|
|
10
|
+
<div id="app"></div>
|
|
11
|
+
</body>
|
|
12
|
+
</html>
|
|
@@ -0,0 +1,135 @@
|
|
|
1
|
+
import '__SCB_WC_PACKAGE_NAME__/scb-wc.css';
|
|
2
|
+
import '__SCB_WC_PACKAGE_NAME__/scb-typography.css';
|
|
3
|
+
import '__SCB_WC_PACKAGE_NAME__/scb-header';
|
|
4
|
+
import '__SCB_WC_PACKAGE_NAME__/scb-header/scb-header-tab';
|
|
5
|
+
import '__SCB_WC_PACKAGE_NAME__/scb-header/scb-header-utility';
|
|
6
|
+
import '__SCB_WC_PACKAGE_NAME__/scb-footer';
|
|
7
|
+
import '__SCB_WC_PACKAGE_NAME__/scb-footer/scb-footer-section';
|
|
8
|
+
import '__SCB_WC_PACKAGE_NAME__/scb-link';
|
|
9
|
+
import '__SCB_WC_PACKAGE_NAME__/scb-grid';
|
|
10
|
+
import '__SCB_WC_PACKAGE_NAME__/scb-grid/scb-grid-item';
|
|
11
|
+
import '__SCB_WC_PACKAGE_NAME__/scb-button';
|
|
12
|
+
import '__SCB_WC_PACKAGE_NAME__/scb-card';
|
|
13
|
+
import '__SCB_WC_PACKAGE_NAME__/scb-list';
|
|
14
|
+
import '__SCB_WC_PACKAGE_NAME__/scb-list/scb-list-item';
|
|
15
|
+
import '__SCB_WC_PACKAGE_NAME__/scb-checkbox';
|
|
16
|
+
import '__SCB_WC_PACKAGE_NAME__/scb-select';
|
|
17
|
+
import '__SCB_WC_PACKAGE_NAME__/scb-select/scb-select-option';
|
|
18
|
+
import '__SCB_WC_PACKAGE_NAME__/scb-textfield';
|
|
19
|
+
import '__SCB_WC_PACKAGE_NAME__/scb-accordion';
|
|
20
|
+
import '__SCB_WC_PACKAGE_NAME__/scb-accordion/scb-accordion-item';
|
|
21
|
+
|
|
22
|
+
document.querySelector('#app').innerHTML = `
|
|
23
|
+
<!-- BASIC_TEMPLATE_HTML_START -->
|
|
24
|
+
<scb-grid padding-inline="6" padding-block="2" row-gap="4">
|
|
25
|
+
<scb-grid-item col-span-compact="4" col-span-medium="8" col-span-expanded="12">
|
|
26
|
+
<scb-header
|
|
27
|
+
logo-href="/"
|
|
28
|
+
show-drawer="true"
|
|
29
|
+
show-search="true"
|
|
30
|
+
include-utility-in-menu="true"
|
|
31
|
+
search-placeholder="Sök"
|
|
32
|
+
menu-label="Meny"
|
|
33
|
+
menu-section-label="Navigering"
|
|
34
|
+
>
|
|
35
|
+
<scb-header-tab label="Produkter" href="#"></scb-header-tab>
|
|
36
|
+
<scb-header-tab label="Statistik" href="#" selected></scb-header-tab>
|
|
37
|
+
<scb-header-tab label="Dokumentation" href="#"></scb-header-tab>
|
|
38
|
+
<scb-header-utility label="Kontakt" href="#"></scb-header-utility>
|
|
39
|
+
</scb-header>
|
|
40
|
+
</scb-grid-item>
|
|
41
|
+
|
|
42
|
+
<scb-grid-item col-span-compact="4" col-span-medium="8" col-span-expanded="12">
|
|
43
|
+
<main>
|
|
44
|
+
<scb-grid row-gap="8" column-gap="7" align-items="start">
|
|
45
|
+
<scb-grid-item col-span-compact="4" col-span-medium="8" col-span-expanded="8">
|
|
46
|
+
<section>
|
|
47
|
+
<h1>Grundmall för HTML, CSS och JS</h1>
|
|
48
|
+
<p>För vanliga webbplatser och enklare lösningar utan ramverk.</p>
|
|
49
|
+
<p>Öppna Code-panelen nedanför storyn för att se koden.</p>
|
|
50
|
+
|
|
51
|
+
<scb-grid row-gap="10" cols-compact="1" cols-medium="1" cols-expanded="1">
|
|
52
|
+
<scb-grid-item col-span-compact="1" col-span-medium="1" col-span-expanded="1">
|
|
53
|
+
<scb-textfield
|
|
54
|
+
label="Sökord"
|
|
55
|
+
supporting-text="Skriv något enkelt för att komma igång."
|
|
56
|
+
></scb-textfield>
|
|
57
|
+
</scb-grid-item>
|
|
58
|
+
|
|
59
|
+
<scb-grid-item col-span-compact="1" col-span-medium="1" col-span-expanded="1">
|
|
60
|
+
<scb-select
|
|
61
|
+
label="Typ av innehåll"
|
|
62
|
+
supporting-text="Välj det som passar sidan."
|
|
63
|
+
placeholder="Välj ett alternativ"
|
|
64
|
+
>
|
|
65
|
+
<scb-select-option value="nyhet" label="Nyhet"></scb-select-option>
|
|
66
|
+
<scb-select-option value="rapport" label="Rapport"></scb-select-option>
|
|
67
|
+
<scb-select-option value="tabell" label="Tabell"></scb-select-option>
|
|
68
|
+
</scb-select>
|
|
69
|
+
</scb-grid-item>
|
|
70
|
+
|
|
71
|
+
<scb-grid-item col-span-compact="1" col-span-medium="1" col-span-expanded="1">
|
|
72
|
+
<scb-checkbox
|
|
73
|
+
label="Visa endast publicerat innehåll"
|
|
74
|
+
checked
|
|
75
|
+
></scb-checkbox>
|
|
76
|
+
</scb-grid-item>
|
|
77
|
+
|
|
78
|
+
<scb-grid-item col-span-compact="1" col-span-medium="1" col-span-expanded="1">
|
|
79
|
+
<scb-button label="Primär handling"></scb-button>
|
|
80
|
+
<scb-button variant="outlined" label="Sekundär handling" spacing-left="2"></scb-button>
|
|
81
|
+
</scb-grid-item>
|
|
82
|
+
|
|
83
|
+
<scb-grid-item col-span-compact="1" col-span-medium="1" col-span-expanded="1">
|
|
84
|
+
<scb-accordion>
|
|
85
|
+
<scb-accordion-item
|
|
86
|
+
title="Exempelavsnitt"
|
|
87
|
+
supporting-text="Visa eller dölj mer information."
|
|
88
|
+
open
|
|
89
|
+
>
|
|
90
|
+
Här kan du lägga sådant som inte behöver synas direkt från start.
|
|
91
|
+
</scb-accordion-item>
|
|
92
|
+
</scb-accordion>
|
|
93
|
+
</scb-grid-item>
|
|
94
|
+
</scb-grid>
|
|
95
|
+
</section>
|
|
96
|
+
</scb-grid-item>
|
|
97
|
+
|
|
98
|
+
<scb-grid-item col-span-compact="4" col-span-medium="8" col-span-expanded="4">
|
|
99
|
+
<scb-card type="list" variant="filled" card-title="Kom igång">
|
|
100
|
+
<scb-list no-divider density="-4">
|
|
101
|
+
<scb-list-item
|
|
102
|
+
type="text"
|
|
103
|
+
label="Skapa mallen"
|
|
104
|
+
supporting-text="npx scb-wc init html my-app"
|
|
105
|
+
></scb-list-item>
|
|
106
|
+
<scb-list-item
|
|
107
|
+
type="text"
|
|
108
|
+
label="När den passar"
|
|
109
|
+
supporting-text="För vanliga webbplatser och enklare lösningar utan ramverk."
|
|
110
|
+
></scb-list-item>
|
|
111
|
+
<scb-list-item
|
|
112
|
+
type="text"
|
|
113
|
+
label="Nästa steg"
|
|
114
|
+
supporting-text="Byt först ut text, länkar och innehåll. Lägg sedan till fler komponenter när du behöver dem."
|
|
115
|
+
></scb-list-item>
|
|
116
|
+
</scb-list>
|
|
117
|
+
</scb-card>
|
|
118
|
+
</scb-grid-item>
|
|
119
|
+
</scb-grid>
|
|
120
|
+
</main>
|
|
121
|
+
</scb-grid-item>
|
|
122
|
+
</scb-grid>
|
|
123
|
+
|
|
124
|
+
<scb-footer description="Statistikmyndigheten SCB förser samhället med statistik för beslutsfattande, debatt och forskning.">
|
|
125
|
+
<scb-footer-section title="Hitta snabbt">
|
|
126
|
+
<scb-link href="#">Kom igång</scb-link>
|
|
127
|
+
<scb-link href="#">Dokumentation</scb-link>
|
|
128
|
+
</scb-footer-section>
|
|
129
|
+
<scb-footer-section title="Kontakt">
|
|
130
|
+
<scb-link href="#">Kontakta oss</scb-link>
|
|
131
|
+
<scb-link href="#">Support</scb-link>
|
|
132
|
+
</scb-footer-section>
|
|
133
|
+
</scb-footer>
|
|
134
|
+
<!-- BASIC_TEMPLATE_HTML_END -->
|
|
135
|
+
`;
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "__STARTER_NAME__",
|
|
3
|
+
"private": true,
|
|
4
|
+
"type": "module",
|
|
5
|
+
"scripts": {
|
|
6
|
+
"dev": "vite",
|
|
7
|
+
"build": "vite build",
|
|
8
|
+
"preview": "vite preview"
|
|
9
|
+
},
|
|
10
|
+
"dependencies": {
|
|
11
|
+
"__SCB_WC_PACKAGE_NAME__": "^__SCB_WC_VERSION__"
|
|
12
|
+
},
|
|
13
|
+
"devDependencies": {
|
|
14
|
+
"vite": "^8.0.9"
|
|
15
|
+
}
|
|
16
|
+
}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
# __STARTER_NAME__
|
|
2
|
+
|
|
3
|
+
Startapp för React med SCB Web Components.
|
|
4
|
+
|
|
5
|
+
## Kom igång
|
|
6
|
+
|
|
7
|
+
```sh
|
|
8
|
+
npm install
|
|
9
|
+
npm run dev
|
|
10
|
+
```
|
|
11
|
+
|
|
12
|
+
## Det här ingår
|
|
13
|
+
|
|
14
|
+
- `scb-header`
|
|
15
|
+
- `scb-footer`
|
|
16
|
+
- `scb-grid`
|
|
17
|
+
- `scb-button`
|
|
18
|
+
- `scb-accordion`
|
|
19
|
+
|
|
20
|
+
## Var ändrar jag?
|
|
21
|
+
|
|
22
|
+
- `src/App.jsx`: sidans struktur och komponenter
|
|
23
|
+
- `src/main.jsx`: imports och bootstrap
|
|
24
|
+
- `src/app.css`: sidans egna stilar
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="sv">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8" />
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
6
|
+
<title>SCB Starter React</title>
|
|
7
|
+
</head>
|
|
8
|
+
<body>
|
|
9
|
+
<div id="root"></div>
|
|
10
|
+
<script type="module" src="/src/main.jsx"></script>
|
|
11
|
+
</body>
|
|
12
|
+
</html>
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "__STARTER_NAME__",
|
|
3
|
+
"private": true,
|
|
4
|
+
"type": "module",
|
|
5
|
+
"scripts": {
|
|
6
|
+
"dev": "vite",
|
|
7
|
+
"build": "vite build",
|
|
8
|
+
"preview": "vite preview"
|
|
9
|
+
},
|
|
10
|
+
"dependencies": {
|
|
11
|
+
"__SCB_WC_PACKAGE_NAME__": "^__SCB_WC_VERSION__",
|
|
12
|
+
"react": "^18.3.1",
|
|
13
|
+
"react-dom": "^18.3.1"
|
|
14
|
+
},
|
|
15
|
+
"devDependencies": {
|
|
16
|
+
"@vitejs/plugin-react": "^5.0.4",
|
|
17
|
+
"vite": "^8.0.9"
|
|
18
|
+
}
|
|
19
|
+
}
|
|
@@ -0,0 +1,118 @@
|
|
|
1
|
+
export default function App() {
|
|
2
|
+
return (
|
|
3
|
+
<>
|
|
4
|
+
{/* BASIC_TEMPLATE_REACT_START */}
|
|
5
|
+
<scb-grid padding-inline="6" padding-block="2" row-gap="4">
|
|
6
|
+
<scb-grid-item col-span-compact="4" col-span-medium="8" col-span-expanded="12">
|
|
7
|
+
<scb-header
|
|
8
|
+
logo-href="/"
|
|
9
|
+
show-drawer="true"
|
|
10
|
+
show-search="true"
|
|
11
|
+
include-utility-in-menu="true"
|
|
12
|
+
search-placeholder="Sök"
|
|
13
|
+
menu-label="Meny"
|
|
14
|
+
menu-section-label="Navigering"
|
|
15
|
+
>
|
|
16
|
+
<scb-header-tab label="Produkter" href="#"></scb-header-tab>
|
|
17
|
+
<scb-header-tab label="Statistik" href="#" selected></scb-header-tab>
|
|
18
|
+
<scb-header-tab label="Dokumentation" href="#"></scb-header-tab>
|
|
19
|
+
<scb-header-utility label="Kontakt" href="#"></scb-header-utility>
|
|
20
|
+
</scb-header>
|
|
21
|
+
</scb-grid-item>
|
|
22
|
+
|
|
23
|
+
<scb-grid-item col-span-compact="4" col-span-medium="8" col-span-expanded="12">
|
|
24
|
+
<main>
|
|
25
|
+
<scb-grid row-gap="8" column-gap="7" align-items="start">
|
|
26
|
+
<scb-grid-item col-span-compact="4" col-span-medium="8" col-span-expanded="8">
|
|
27
|
+
<section>
|
|
28
|
+
<h1>Grundmall för React</h1>
|
|
29
|
+
<p>För appar i React där du vill använda samma komponentbibliotek.</p>
|
|
30
|
+
<p>Öppna Code-panelen nedanför storyn för att se koden.</p>
|
|
31
|
+
|
|
32
|
+
<scb-grid row-gap="10" cols-compact="1" cols-medium="1" cols-expanded="1">
|
|
33
|
+
<scb-grid-item col-span-compact="1" col-span-medium="1" col-span-expanded="1">
|
|
34
|
+
<scb-textfield
|
|
35
|
+
label="Sökord"
|
|
36
|
+
supporting-text="Skriv något enkelt för att komma igång."
|
|
37
|
+
></scb-textfield>
|
|
38
|
+
</scb-grid-item>
|
|
39
|
+
|
|
40
|
+
<scb-grid-item col-span-compact="1" col-span-medium="1" col-span-expanded="1">
|
|
41
|
+
<scb-select
|
|
42
|
+
label="Typ av innehåll"
|
|
43
|
+
supporting-text="Välj det som passar sidan."
|
|
44
|
+
placeholder="Välj ett alternativ"
|
|
45
|
+
>
|
|
46
|
+
<scb-select-option value="nyhet" label="Nyhet"></scb-select-option>
|
|
47
|
+
<scb-select-option value="rapport" label="Rapport"></scb-select-option>
|
|
48
|
+
<scb-select-option value="tabell" label="Tabell"></scb-select-option>
|
|
49
|
+
</scb-select>
|
|
50
|
+
</scb-grid-item>
|
|
51
|
+
|
|
52
|
+
<scb-grid-item col-span-compact="1" col-span-medium="1" col-span-expanded="1">
|
|
53
|
+
<scb-checkbox
|
|
54
|
+
label="Visa endast publicerat innehåll"
|
|
55
|
+
checked
|
|
56
|
+
></scb-checkbox>
|
|
57
|
+
</scb-grid-item>
|
|
58
|
+
|
|
59
|
+
<scb-grid-item col-span-compact="1" col-span-medium="1" col-span-expanded="1">
|
|
60
|
+
<scb-button label="Primär handling"></scb-button>
|
|
61
|
+
<scb-button variant="outlined" label="Sekundär handling" spacing-left="2"></scb-button>
|
|
62
|
+
</scb-grid-item>
|
|
63
|
+
|
|
64
|
+
<scb-grid-item col-span-compact="1" col-span-medium="1" col-span-expanded="1">
|
|
65
|
+
<scb-accordion>
|
|
66
|
+
<scb-accordion-item
|
|
67
|
+
title="Exempelavsnitt"
|
|
68
|
+
supporting-text="Visa eller dölj mer information."
|
|
69
|
+
open
|
|
70
|
+
>
|
|
71
|
+
Här kan du lägga sådant som inte behöver synas direkt från start.
|
|
72
|
+
</scb-accordion-item>
|
|
73
|
+
</scb-accordion>
|
|
74
|
+
</scb-grid-item>
|
|
75
|
+
</scb-grid>
|
|
76
|
+
</section>
|
|
77
|
+
</scb-grid-item>
|
|
78
|
+
|
|
79
|
+
<scb-grid-item col-span-compact="4" col-span-medium="8" col-span-expanded="4">
|
|
80
|
+
<scb-card type="list" variant="filled" card-title="Kom igång">
|
|
81
|
+
<scb-list no-divider density="-4">
|
|
82
|
+
<scb-list-item
|
|
83
|
+
type="text"
|
|
84
|
+
label="Skapa mallen"
|
|
85
|
+
supporting-text="npx scb-wc init react my-react-app"
|
|
86
|
+
></scb-list-item>
|
|
87
|
+
<scb-list-item
|
|
88
|
+
type="text"
|
|
89
|
+
label="När den passar"
|
|
90
|
+
supporting-text="För appar i React där du vill använda samma komponentbibliotek."
|
|
91
|
+
></scb-list-item>
|
|
92
|
+
<scb-list-item
|
|
93
|
+
type="text"
|
|
94
|
+
label="Nästa steg"
|
|
95
|
+
supporting-text="Byt först ut text, länkar och innehåll. Lägg sedan till fler komponenter när du behöver dem."
|
|
96
|
+
></scb-list-item>
|
|
97
|
+
</scb-list>
|
|
98
|
+
</scb-card>
|
|
99
|
+
</scb-grid-item>
|
|
100
|
+
</scb-grid>
|
|
101
|
+
</main>
|
|
102
|
+
</scb-grid-item>
|
|
103
|
+
</scb-grid>
|
|
104
|
+
|
|
105
|
+
<scb-footer description="Statistikmyndigheten SCB förser samhället med statistik för beslutsfattande, debatt och forskning.">
|
|
106
|
+
<scb-footer-section title="Hitta snabbt">
|
|
107
|
+
<scb-link href="#">Kom igång</scb-link>
|
|
108
|
+
<scb-link href="#">Dokumentation</scb-link>
|
|
109
|
+
</scb-footer-section>
|
|
110
|
+
<scb-footer-section title="Kontakt">
|
|
111
|
+
<scb-link href="#">Kontakta oss</scb-link>
|
|
112
|
+
<scb-link href="#">Support</scb-link>
|
|
113
|
+
</scb-footer-section>
|
|
114
|
+
</scb-footer>
|
|
115
|
+
{/* BASIC_TEMPLATE_REACT_END */}
|
|
116
|
+
</>
|
|
117
|
+
);
|
|
118
|
+
}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import ReactDOM from 'react-dom/client';
|
|
3
|
+
import '__SCB_WC_PACKAGE_NAME__/scb-wc.css';
|
|
4
|
+
import '__SCB_WC_PACKAGE_NAME__/scb-typography.css';
|
|
5
|
+
import '__SCB_WC_PACKAGE_NAME__/scb-header';
|
|
6
|
+
import '__SCB_WC_PACKAGE_NAME__/scb-header/scb-header-tab';
|
|
7
|
+
import '__SCB_WC_PACKAGE_NAME__/scb-header/scb-header-utility';
|
|
8
|
+
import '__SCB_WC_PACKAGE_NAME__/scb-footer';
|
|
9
|
+
import '__SCB_WC_PACKAGE_NAME__/scb-footer/scb-footer-section';
|
|
10
|
+
import '__SCB_WC_PACKAGE_NAME__/scb-link';
|
|
11
|
+
import '__SCB_WC_PACKAGE_NAME__/scb-grid';
|
|
12
|
+
import '__SCB_WC_PACKAGE_NAME__/scb-grid/scb-grid-item';
|
|
13
|
+
import '__SCB_WC_PACKAGE_NAME__/scb-button';
|
|
14
|
+
import '__SCB_WC_PACKAGE_NAME__/scb-card';
|
|
15
|
+
import '__SCB_WC_PACKAGE_NAME__/scb-list';
|
|
16
|
+
import '__SCB_WC_PACKAGE_NAME__/scb-list/scb-list-item';
|
|
17
|
+
import '__SCB_WC_PACKAGE_NAME__/scb-checkbox';
|
|
18
|
+
import '__SCB_WC_PACKAGE_NAME__/scb-select';
|
|
19
|
+
import '__SCB_WC_PACKAGE_NAME__/scb-select/scb-select-option';
|
|
20
|
+
import '__SCB_WC_PACKAGE_NAME__/scb-textfield';
|
|
21
|
+
import '__SCB_WC_PACKAGE_NAME__/scb-accordion';
|
|
22
|
+
import '__SCB_WC_PACKAGE_NAME__/scb-accordion/scb-accordion-item';
|
|
23
|
+
import App from './App.jsx';
|
|
24
|
+
|
|
25
|
+
ReactDOM.createRoot(document.getElementById('root')).render(
|
|
26
|
+
<React.StrictMode>
|
|
27
|
+
<App />
|
|
28
|
+
</React.StrictMode>,
|
|
29
|
+
);
|