Skip to content

Commit 7ee7781

Browse files
BarsnesBarsnes
authored
Merge branch 'next' into css/modal
2 parents b2867ad + a0b5be1 commit 7ee7781

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

41 files changed

+3754
-478
lines changed

‎.changeset/slimy-bees-arrive.md

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
'@digdir/designsystemet-react': patch
3+
'@digdir/designsystemet-css': patch
4+
---
5+
6+
Accordion: Now uses details and summary HTML elements

‎.github/workflows/preview-storefront.yml

+3-3
Original file line numberDiff line numberDiff line change
@@ -60,14 +60,14 @@ jobs:
6060
id: regex-storybook
6161
with:
6262
text: ${{ steps.fc.outputs.comment-body }}
63-
regex: '📖 \[Storybook\]\((https:\/\/[^)]+)\) `[^`]+`'
63+
regex: '\[Storybook\]\((https:\/\/[^)]+)\) `[^`]+`'
6464

6565
- name: Find Theme deployment
6666
uses: actions-ecosystem/action-regex-match@v2
6767
id: regex-theme
6868
with:
6969
text: ${{ steps.fc.outputs.comment-body }}
70-
regex: '\[Theme\]\((https:\/\/[^)]+)\) `[^`]+`'
70+
regex: '\[Theme\]\((https:\/\/[^)]+)\)'
7171

7272
- name: Get current time in CEST
7373
uses: josStorer/get-current-time@v2
@@ -88,6 +88,6 @@ jobs:
8888
8989
${{ steps.regex-storybook.outputs.match }}
9090
91-
🖥 [Storefront](https://storefront-pr-${{ env.PR_NUMBER }}.dev.designsystemet.no) `${{ steps.current-time.outputs.formattedTime }} (Norwegian time)`
91+
[Storefront](https://storefront-pr-${{ env.PR_NUMBER }}.dev.designsystemet.no) `${{ steps.current-time.outputs.formattedTime }} (Norwegian time)`
9292
9393
${{ steps.regex-theme.outputs.match }}

‎.github/workflows/preview-storybook.yml

+4-4
Original file line numberDiff line numberDiff line change
@@ -57,19 +57,19 @@ jobs:
5757
- run: echo ${{ steps.fc.outputs.comment-id }}
5858
if: success() && env.PR_NUMBER
5959

60-
- name: Find Storybook deployment
60+
- name: Find Storefront deployment
6161
uses: actions-ecosystem/action-regex-match@v2
6262
id: regex-storefront
6363
with:
6464
text: ${{ steps.fc.outputs.comment-body }}
65-
regex: '🖥 \[Storefront\]\((https:\/\/[^)]+)\) `[^`]+`'
65+
regex: '\[Storefront\]\((https:\/\/[^)]+)\) `[^`]+`'
6666

6767
- name: Find Theme deployment
6868
uses: actions-ecosystem/action-regex-match@v2
6969
id: regex-theme
7070
with:
7171
text: ${{ steps.fc.outputs.comment-body }}
72-
regex: '\[Theme\]\((https:\/\/[^)]+)\) `[^`]+`'
72+
regex: '\[Theme\]\((https:\/\/[^)]+)\)'
7373

7474
- name: Get current time in CEST
7575
uses: josStorer/get-current-time@v2
@@ -88,7 +88,7 @@ jobs:
8888
body: |
8989
**Preview deployments for this pull request:**
9090
91-
📖 [Storybook](https://storybook-pr-${{ env.PR_NUMBER }}.dev.designsystemet.no) `${{ steps.current-time.outputs.formattedTime }} (Norwegian time)`
91+
[Storybook](https://storybook-pr-${{ env.PR_NUMBER }}.dev.designsystemet.no) `${{ steps.current-time.outputs.formattedTime }} (Norwegian time)`
9292
9393
${{ steps.regex-storefront.outputs.match }}
9494

‎.github/workflows/preview-theme.yml

+3-10
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ jobs:
5050
with:
5151
issue-number: ${{ env.PR_NUMBER }}
5252
body-includes: |
53-
## Preview deployments
53+
**Preview deployments for this pull request:**
5454
5555
- run: echo ${{ steps.fc.outputs.comment-id }}
5656
if: success() && env.PR_NUMBER
@@ -60,21 +60,14 @@ jobs:
6060
id: regex-storybook
6161
with:
6262
text: ${{ steps.fc.outputs.comment-body }}
63-
regex: '📖 \[Storybook\]\((https:\/\/[^)]+)\) `[^`]+`'
63+
regex: '\[Storybook\]\((https:\/\/[^)]+)\) `[^`]+`'
6464

6565
- name: Find Storefront deployment
6666
uses: actions-ecosystem/action-regex-match@v2
6767
id: regex-storefront
6868
with:
6969
text: ${{ steps.fc.outputs.comment-body }}
70-
regex: '🖥 \[Storefront\]\((https:\/\/[^)]+)\) `[^`]+`'
71-
72-
- name: Find Theme deployment
73-
uses: actions-ecosystem/action-regex-match@v2
74-
id: regex-theme
75-
with:
76-
text: ${{ steps.fc.outputs.comment-body }}
77-
regex: '\[Theme\]\((https:\/\/[^)]+)\) `[^`]+`'
70+
regex: '\[Storefront\]\((https:\/\/[^)]+)\) `[^`]+`'
7871

7972
- name: Get current time in CEST
8073
uses: josStorer/get-current-time@v2

‎.github/workflows/test-reports.yml

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
name: Test reports
2+
on:
3+
workflow_dispatch:
4+
inputs:
5+
calling_workflow_id:
6+
required: true
7+
calling_workflow_run_id:
8+
required: true
9+
calling_workflow_head_sha:
10+
required: true
11+
12+
permissions:
13+
checks: write
14+
pull-requests: write
15+
16+
jobs:
17+
checks:
18+
runs-on: ubuntu-latest
19+
steps:
20+
# This is just a placeholder workflow, the actual contents of the workflow will be populated in
21+
# another pull request. But https://github.com/digdir/designsystemet/actions/workflows/test-reports.yml
22+
# only works if the workflow file is already present on the default branch
23+
- run: echo "Hello, dummy workflow"

‎apps/_components/src/CodeSnippet/CodeSnippet.tsx

+5-3
Original file line numberDiff line numberDiff line change
@@ -27,15 +27,17 @@ const plugins = [
2727
];
2828

2929
type CodeSnippetProps = {
30-
language?: 'css' | 'html' | 'ts' | 'markdown' | 'js' | 'json' | 'sh';
30+
language?: 'css' | 'html' | 'ts' | 'markdown' | 'json';
3131
children?: string;
3232
className?: string;
33+
syntax?: string;
3334
};
3435

3536
const CodeSnippet = ({
3637
language = 'markdown',
3738
children = '',
3839
className,
40+
syntax = 'js',
3941
}: CodeSnippetProps) => {
4042
const [toolTipText, setToolTipText] = useState('Kopier');
4143
const [snippet, setSnippet] = useState('');
@@ -47,7 +49,7 @@ const CodeSnippet = ({
4749
) {
4850
try {
4951
const formatted = await format(children, {
50-
parser: language === 'ts' ? 'typescript' : language,
52+
parser: language === 'ts' ? 'babel-ts' : language,
5153
plugins,
5254
});
5355
setSnippet(formatted);
@@ -92,7 +94,7 @@ const CodeSnippet = ({
9294
</Tooltip>
9395
<SyntaxHighlighter
9496
style={nightOwl}
95-
language={language}
97+
language={syntax}
9698
customStyle={{
9799
fontSize: '15px',
98100
margin: 0,

‎apps/storefront/app/monstre/feilmeldinger/page.mdx

+4-4
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import {
33
CardContent,
44
Heading,
55
Paragraph,
6-
AccordionRoot,
6+
Accordion,
77
AccordionItem,
88
AccordionContent,
99
AccordionHeading
@@ -183,11 +183,11 @@ Her må vi gjøre det så tydelig som mulig for brukeren at flere felt påvirker
183183

184184
I dette eksempelet har vi en gruppe med felt, der brukeren ikke nødvendigvis har alle opplysningene, men må fylle ut minst ett felt.
185185

186-
<AccordionRoot
186+
<Accordion
187187
color='neutral'
188188
>
189189
<AccordionItem>
190-
<AccordionHeading level={3}>Eksempel på feilmelding som gjelder flere felt</AccordionHeading>
190+
<AccordionHeading>Eksempel på feilmelding som gjelder flere felt</AccordionHeading>
191191
<AccordionContent
192192
style={{
193193
paddingTop: '0px',
@@ -216,7 +216,7 @@ I dette eksempelet har vi en gruppe med felt, der brukeren ikke nødvendigvis ha
216216
/>
217217
</AccordionContent>
218218
</AccordionItem>
219-
</AccordionRoot>
219+
</Accordion>
220220

221221
## Kode
222222

‎apps/storybook/.storybook/main.ts

+7-7
Original file line numberDiff line numberDiff line change
@@ -21,13 +21,13 @@ const config: StorybookConfig = {
2121
include: [resolve(__dirname, '../../../packages/react/**/**.tsx')], // <- This is the important line.
2222
shouldExtractLiteralValuesFromEnum: true,
2323
shouldRemoveUndefinedFromOptional: true,
24-
propFilter: ({ name, declarations = [] }: PropItem) => {
25-
/* Default from `react-docgen-typescript` we have to add back when using a custom prop filter */
26-
const hasDescription = declarations.some(
27-
({ fileName }) => !fileName.includes('node_modules'),
28-
);
29-
30-
return hasDescription && name !== 'popovertarget'; // Skip popovertarget @types/react-dom patch
24+
propFilter: (prop: PropItem) => {
25+
// Keep the default filter logic from storybook:
26+
// https://github.com/storybookjs/storybook/blob/40523765403480c4065373664553bb6cbdf9543d/code/core/src/core-server/presets/common-preset.ts#L169C5-L169C98
27+
const defaultLogicFromStorybook = prop.parent
28+
? !/node_modules/.test(prop.parent.fileName)
29+
: true;
30+
return defaultLogicFromStorybook && prop.name !== 'popovertarget'; // Skip popovertarget @types/react-dom patch}
3131
},
3232
},
3333
},

‎apps/theme/components/Previews/Components/Components.tsx

+5-5
Original file line numberDiff line numberDiff line change
@@ -339,9 +339,9 @@ export const Components = () => {
339339
<Heading size='xs' className={classes.cardTitle}>
340340
Ofte stillte spørsmål
341341
</Heading>
342-
<Accordion.Root color='brand3' border className={classes.accordion}>
342+
<Accordion color='brand3' border className={classes.accordion}>
343343
<Accordion.Item>
344-
<Accordion.Heading level={3}>
344+
<Accordion.Heading>
345345
Hvem kan registrere seg i Frivillighetsregisteret?
346346
</Accordion.Heading>
347347
<Accordion.Content>
@@ -353,7 +353,7 @@ export const Components = () => {
353353
</Accordion.Content>
354354
</Accordion.Item>
355355
<Accordion.Item>
356-
<Accordion.Heading level={3}>
356+
<Accordion.Heading>
357357
Hvordan går jeg fram for å registrere i Frivillighetsregisteret?
358358
</Accordion.Heading>
359359
<Accordion.Content>
@@ -363,7 +363,7 @@ export const Components = () => {
363363
</Accordion.Content>
364364
</Accordion.Item>
365365
<Accordion.Item>
366-
<Accordion.Heading level={3}>
366+
<Accordion.Heading>
367367
Hvordan går jeg fram for å registrere i Frivillighetsregisteret?
368368
</Accordion.Heading>
369369
<Accordion.Content>
@@ -372,7 +372,7 @@ export const Components = () => {
372372
registrene samtidig i Samordnet registermelding.
373373
</Accordion.Content>
374374
</Accordion.Item>
375-
</Accordion.Root>
375+
</Accordion>
376376
</div>
377377
<div className={cl(classes.card, classes.alert)}>
378378
<Alert color='info'>

‎apps/theme/components/TokenModal/TokenModal.module.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
}
1010

1111
.snippet {
12-
max-height: 350px;
12+
max-height: 250px;
1313
overflow: auto;
1414
}
1515

‎apps/theme/components/TokenModal/TokenModal.tsx

+21-3
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import {
77
Link,
88
Modal,
99
Paragraph,
10+
Textfield,
1011
} from '@digdir/designsystemet-react';
1112
import { createTokens } from '@digdir/designsystemet/tokens/create.js';
1213
import { CodeSnippet } from '@repo/components';
@@ -38,13 +39,15 @@ export const TokenModal = ({
3839

3940
const [lightThemeSnippet, setLightThemeSnippet] = useState('');
4041
const [darkThemeSnippet, setDarkThemeSnippet] = useState('');
42+
const [themeName, setThemeName] = useState('theme');
4143

4244
const cliSnippet = `npx @digdir/designsystemet tokens create \\
4345
--accent "${accentColor}" \\
4446
--neutral "${neutralColor}" \\
4547
--brand1 "${brand1Color}" \\
4648
--brand2 "${brand2Color}" \\
4749
--brand3 "${brand3Color}" \\
50+
--theme "${themeName}" \\
4851
--write
4952
`;
5053

@@ -58,6 +61,7 @@ export const TokenModal = ({
5861
brand3: brand3Color,
5962
},
6063
typography: { fontFamily: 'Inter' },
64+
themeName: 'theme',
6165
});
6266

6367
setLightThemeSnippet(toFigmaSnippet(tokens.colors.light.theme));
@@ -93,6 +97,20 @@ export const TokenModal = ({
9397
<Heading level={3} size='xs' spacing>
9498
Alt 1. Design tokens
9599
</Heading>
100+
<Textfield
101+
label='Navn på tema'
102+
description="Kun bokstaver, tall og bindestrek. Eks: 'mitt-tema'"
103+
value={themeName}
104+
onChange={(e) => {
105+
const value = e.currentTarget.value
106+
.replace(/\s+/g, '-')
107+
.replace(/[^A-Z0-9-]+/gi, '')
108+
.toLowerCase();
109+
110+
setThemeName(value);
111+
}}
112+
style={{ marginBlock: 'var(--ds-spacing-4)' }}
113+
></Textfield>
96114
<Paragraph spacing>
97115
Kopier kommandosnutten under og kjør på maskinen din for å generere
98116
alle design tokens (json-filer). Sørg for at du har{' '}
@@ -105,7 +123,7 @@ export const TokenModal = ({
105123
className={classes.snippet}
106124
style={{ marginBottom: 'var(--ds-spacing-8)' }}
107125
>
108-
<CodeSnippet language='js'>{cliSnippet}</CodeSnippet>
126+
<CodeSnippet syntax='shell'>{cliSnippet}</CodeSnippet>
109127
</div>
110128
<Heading level={3} size='xs' spacing>
111129
Alt 2. Figma plugin
@@ -138,15 +156,15 @@ export const TokenModal = ({
138156
Light Mode
139157
</Heading>
140158
<div className={classes.snippet}>
141-
<CodeSnippet language='js'>{lightThemeSnippet}</CodeSnippet>
159+
<CodeSnippet language='json'>{lightThemeSnippet}</CodeSnippet>
142160
</div>
143161
</div>
144162
<div className={classes.column}>
145163
<Heading level={4} size='2xs' spacing>
146164
Dark Mode
147165
</Heading>
148166
<div className={classes.snippet}>
149-
<CodeSnippet language='js'>{darkThemeSnippet}</CodeSnippet>
167+
<CodeSnippet language='json'>{darkThemeSnippet}</CodeSnippet>
150168
</div>
151169
</div>
152170
</div>

0 commit comments

Comments
 (0)