From b9796b3d777cea69f894b52473cfac13e8337ba7 Mon Sep 17 00:00:00 2001 From: Barsnes Date: Mon, 25 Nov 2024 12:43:28 +0100 Subject: [PATCH 01/12] docs: start article about `data-color` --- .../src/CodeSnippet/CodeSnippet.tsx | 2 +- apps/_components/src/Header/Header.tsx | 2 +- .../for-utviklere/farger/page.mdx | 90 +++++++++++++++++++ .../MdxContent/MdxContent.module.css | 1 + apps/storefront/siteConfig.tsx | 4 + 5 files changed, 97 insertions(+), 2 deletions(-) create mode 100644 apps/storefront/app/grunnleggende/for-utviklere/farger/page.mdx diff --git a/apps/_components/src/CodeSnippet/CodeSnippet.tsx b/apps/_components/src/CodeSnippet/CodeSnippet.tsx index c63de3aff0..6e36883595 100644 --- a/apps/_components/src/CodeSnippet/CodeSnippet.tsx +++ b/apps/_components/src/CodeSnippet/CodeSnippet.tsx @@ -87,7 +87,7 @@ const CodeSnippet = ({ className={classes.copyButton} aria-label='Kopier' icon - color='neutral' + data-color='neutral' data-size='sm' > diff --git a/apps/_components/src/Header/Header.tsx b/apps/_components/src/Header/Header.tsx index c3a1a07cd7..381be293b6 100644 --- a/apps/_components/src/Header/Header.tsx +++ b/apps/_components/src/Header/Header.tsx @@ -207,7 +207,7 @@ const Header = ({ aria-label={`Bytt til ${theme === 'light' ? 'mørk' : 'lys'} modus`} variant='tertiary' icon={true} - color='neutral' + data-color='neutral' onClick={() => { handleThemeChange(theme === 'light' ? 'dark' : 'light'); }} diff --git a/apps/storefront/app/grunnleggende/for-utviklere/farger/page.mdx b/apps/storefront/app/grunnleggende/for-utviklere/farger/page.mdx new file mode 100644 index 0000000000..133a7bf77c --- /dev/null +++ b/apps/storefront/app/grunnleggende/for-utviklere/farger/page.mdx @@ -0,0 +1,90 @@ +import { CodeIcon } from '@navikt/aksel-icons'; + +import { MenuPageLayout } from '@layouts'; +import { CodeSnippet } from '@repo/components'; + +export const metadata = { + title: 'Farger', + description: 'Informasjon om korleis du bruker farger på frontend.', +}; + +export default ({ children }) => ( + , + color: 'blue', + }} + /> +); + +Denne artikkelen tar forbehold om at du allerie har farger satt opp med [Temabyggeren](/grunnleggende/for-designere/eget-tema). + +Me brukar data attributt for å fargelegge komponentar. Alle komponentar kan ha alle fargar, men komponentar har forskjellige standardfargar. + +Når du skal sette farge er det to data attributt du kan bruke: +- `data-color` endrar farge +- `data-color-scheme` endar fargetema + +## `data-color-scheme` + +Dette attributtet brukast for å endre mellom lys, mørk, eller andre fargetema som du har satt opp. Du legger denne over +alt som skal ha spesifisert tema. Dersom du ikkje setter denne, vil sida di bruke lyst fargetema. + + +{` + +
+ +
+ +
+ +
+ +`} + + +## `data-color` + +Dette attributtet brukast for å endre farge på komponentar. Du kan bruke alle fargene som du har satt opp i temaet ditt. Standardverdi når denne ikkje er satt, +er din standardfarge. Brukar du tema frå `@digdir/designsystemet-theme`, vil dette være `accent`. + +**Når du sett `data-color-scheme` vil `data-color` bli satt tilbake til standardverdien.** + +Nokon komponentar kan arve farge frå nærmaste forelder med `data-color` satt. Dette betyr at du ikkje treng å bruke denne på alle komponentar, +dersom dei skal ha lik farge. + + +{` +
+ +
+`} + + +Det blir satt css variablar som begynnar med `--ds-color-*`, og ikkje `--ds-color-FARGE-*`. På denne måten kan me, og du, bygge komponentar som støttar alle fargar. + +Nokon komponentar, som `Button` har ikkje støtte for ekstern `data-color`, og her må du sette fargen direkte på komponenten. + + +{` +
+ + Dette er ein Chip med accent farge. + +
+ + + +
+ +
+`} + diff --git a/apps/storefront/components/MdxContent/MdxContent.module.css b/apps/storefront/components/MdxContent/MdxContent.module.css index 8a18e0c531..c174f832df 100644 --- a/apps/storefront/components/MdxContent/MdxContent.module.css +++ b/apps/storefront/components/MdxContent/MdxContent.module.css @@ -52,6 +52,7 @@ & svg { margin: 0; + fill: var(--ds-color-neutral-text-default); } } diff --git a/apps/storefront/siteConfig.tsx b/apps/storefront/siteConfig.tsx index 2df9d6e381..3f0fd30067 100644 --- a/apps/storefront/siteConfig.tsx +++ b/apps/storefront/siteConfig.tsx @@ -94,6 +94,10 @@ export const SiteConfig = { name: 'Kom i gang', url: 'grunnleggende/for-utviklere/kom-i-gang', }, + { + name: 'Farger', + url: 'grunnleggende/for-utviklere/farger', + }, { name: 'Komposisjon', url: 'grunnleggende/for-utviklere/komposisjon', From a4a71c84b0c506a5952ca6708f55a7d03705d4ef Mon Sep 17 00:00:00 2001 From: Barsnes Date: Mon, 25 Nov 2024 12:56:41 +0100 Subject: [PATCH 02/12] some last cleanup before leaving --- .../for-utviklere/farger/page.mdx | 26 +++++++++++++------ apps/storefront/tsconfig.json | 1 + 2 files changed, 19 insertions(+), 8 deletions(-) diff --git a/apps/storefront/app/grunnleggende/for-utviklere/farger/page.mdx b/apps/storefront/app/grunnleggende/for-utviklere/farger/page.mdx index 133a7bf77c..172ecce10a 100644 --- a/apps/storefront/app/grunnleggende/for-utviklere/farger/page.mdx +++ b/apps/storefront/app/grunnleggende/for-utviklere/farger/page.mdx @@ -25,8 +25,8 @@ Denne artikkelen tar forbehold om at du allerie har farger satt opp med [Temabyg Me brukar data attributt for å fargelegge komponentar. Alle komponentar kan ha alle fargar, men komponentar har forskjellige standardfargar. Når du skal sette farge er det to data attributt du kan bruke: -- `data-color` endrar farge -- `data-color-scheme` endar fargetema +- `data-color` som endrar farge +- `data-color-scheme` som endrar fargetema ## `data-color-scheme` @@ -47,12 +47,15 @@ alt som skal ha spesifisert tema. Dersom du ikkje setter denne, vil sida di bruk `} +Du kan endre denne på heile eller delar av sida, og bytte så mykje du vil mellom dei ulike fargetemaene. +For ekesmpel er sida di lys, men du har ein mørk footer. Da kan du sette `data-color-scheme="dark"` på footer. + ## `data-color` Dette attributtet brukast for å endre farge på komponentar. Du kan bruke alle fargene som du har satt opp i temaet ditt. Standardverdi når denne ikkje er satt, er din standardfarge. Brukar du tema frå `@digdir/designsystemet-theme`, vil dette være `accent`. -**Når du sett `data-color-scheme` vil `data-color` bli satt tilbake til standardverdien.** +**Når du sett `data-color-scheme` vil `data-color` bli satt tilbake til standardfargen.** Nokon komponentar kan arve farge frå nærmaste forelder med `data-color` satt. Dette betyr at du ikkje treng å bruke denne på alle komponentar, dersom dei skal ha lik farge. @@ -60,25 +63,25 @@ dersom dei skal ha lik farge. {`
- +
`} -Det blir satt css variablar som begynnar med `--ds-color-*`, og ikkje `--ds-color-FARGE-*`. På denne måten kan me, og du, bygge komponentar som støttar alle fargar. +Det blir satt css variablar som begynnar med `--ds-color-*`, og ikkje `--ds-color-FARGE-*`. På denne måten kan me, og du, byggje komponentar som støttar alle fargar. -Nokon komponentar, som `Button` har ikkje støtte for ekstern `data-color`, og her må du sette fargen direkte på komponenten. +Nokon komponentar, som `Button`, støttar ikkje ekstern `data-color`, og her må du sette fargen direkte på komponenten. {`
- Dette er ein Chip med accent farge. + Denne Chip'en har accent farge.
@@ -88,3 +91,10 @@ Nokon komponentar, som `Button` har ikkje støtte for ekstern `data-color`, og h
`} + +## Kort oppsummert + +Du endrar farge med `data-color`, men denne må bli satt på nytt dersom du endrar fargetema med `data-color-scheme`. Nokon komponentar arver farge frå nærmaste forelder med `data-color` satt. + + + diff --git a/apps/storefront/tsconfig.json b/apps/storefront/tsconfig.json index 1acbc9ece2..0e3ca35ddd 100644 --- a/apps/storefront/tsconfig.json +++ b/apps/storefront/tsconfig.json @@ -19,6 +19,7 @@ "jsx": "preserve", "incremental": true, "forceConsistentCasingInFileNames": true, + "types": ["@digdir/designsystemet-theme/colors.d.ts"], "plugins": [ { "name": "typescript-plugin-css-modules" From 525e9faecb07c426734dd2b85644927c54d45795 Mon Sep 17 00:00:00 2001 From: Barsnes Date: Tue, 26 Nov 2024 08:51:56 +0100 Subject: [PATCH 03/12] misc --- apps/_components/src/Footer/Footer.tsx | 9 ++++-- .../for-utviklere/farger/page.mdx | 29 +++++++++---------- 2 files changed, 20 insertions(+), 18 deletions(-) diff --git a/apps/_components/src/Footer/Footer.tsx b/apps/_components/src/Footer/Footer.tsx index 9939f8e78e..1d8f6ce1b4 100644 --- a/apps/_components/src/Footer/Footer.tsx +++ b/apps/_components/src/Footer/Footer.tsx @@ -26,7 +26,7 @@ const LinkList = (links: LinkListItemProps[]) => {
    {links.map((item, index) => (
  • - + {item.prefix} {item.text} @@ -64,7 +64,12 @@ export const Footer = forwardRef(function Footer( -
    @@ -94,7 +94,4 @@ Nokon komponentar, som `Button`, støttar ikkje ekstern `data-color`, og her må ## Kort oppsummert -Du endrar farge med `data-color`, men denne må bli satt på nytt dersom du endrar fargetema med `data-color-scheme`. Nokon komponentar arver farge frå nærmaste forelder med `data-color` satt. - - - +Du endrar farge med `data-color`, men denne må bli satt på nytt dersom du endrar fargetema med `data-color-scheme`. Nokre komponentar arvar farge frå næraste forelder med `data-color` satt. From 11c1b0a77aed284308506f0361f8cccac4332e17 Mon Sep 17 00:00:00 2001 From: Barsnes Date: Tue, 26 Nov 2024 12:15:09 +0100 Subject: [PATCH 04/12] text updates --- .../src/CodeSnippet/CodeSnippet.module.css | 8 ++ .../for-utviklere/fargar/page.mdx | 113 ++++++++++++++++++ .../for-utviklere/farger/page.mdx | 97 --------------- apps/storefront/siteConfig.tsx | 4 +- 4 files changed, 123 insertions(+), 99 deletions(-) create mode 100644 apps/storefront/app/grunnleggende/for-utviklere/fargar/page.mdx delete mode 100644 apps/storefront/app/grunnleggende/for-utviklere/farger/page.mdx diff --git a/apps/_components/src/CodeSnippet/CodeSnippet.module.css b/apps/_components/src/CodeSnippet/CodeSnippet.module.css index 40776471c0..e5065ad217 100644 --- a/apps/_components/src/CodeSnippet/CodeSnippet.module.css +++ b/apps/_components/src/CodeSnippet/CodeSnippet.module.css @@ -11,6 +11,14 @@ padding-right: var(--ds-spacing-11) !important; } +.codeSnippet > pre > code { + padding: 0; +} + +.codeSnippet > pre > code span:empty { + display: none; +} + .copyButton { position: absolute; top: var(--ds-spacing-2); diff --git a/apps/storefront/app/grunnleggende/for-utviklere/fargar/page.mdx b/apps/storefront/app/grunnleggende/for-utviklere/fargar/page.mdx new file mode 100644 index 0000000000..0009d64df4 --- /dev/null +++ b/apps/storefront/app/grunnleggende/for-utviklere/fargar/page.mdx @@ -0,0 +1,113 @@ +import { CodeIcon } from '@navikt/aksel-icons'; + +import { MenuPageLayout } from '@layouts'; +import { CodeSnippet } from '@repo/components'; + +export const metadata = { + title: 'Fargar', + description: 'Informasjon om korleis du bruker fargar på frontend.', +}; + +export default ({ children }) => ( + , + color: 'blue', + }} + /> +); + +Denne artikkelen føreset at du allereie har definert fargane du skal bruke ved hjelp av [Temabyggeren](/grunnleggende/for-designere/eget-tema). + +HTML data-attributt vert brukt for å definere farge på ein komponent. Komponentane kan nytte alle fargane i temaet. + +Når du skal setje farge på ein komponent, er det to data-attributt som kan nyttast: +- `data-color-scheme` som endrar fargemodus +- `data-color` som endrar farge + +## `data-color-scheme` + +Dette data-attributtet blir brukt for å veksle mellom lys, mørk eller andre fargemodusar. Innhald som er barn av dette data-attributtet +vil få modusen spesifisert av forelder. Som standard vil lys modus bli nytta. + + +{` + +
    + +
    + +
    + +
    + +`} +     + +Du kan endre `data-color-scheme` på heile eller delar av sida og byte mellom ulike fargemodus så ofte du vil. Til dømes kan hovudsida vere lys, +men med ei mørk botnlinje (footer). Du kan då setje `data-color-scheme="dark"` på botnlinja. + +## `data-color` + +Dette data-attributtet blir brukt for å endre fargen til ein komponent. Du kan bruke alle fargane som finst i temaet ditt. + + +{` +
    + +
    +`} +     + +Nokre komponentar kan arve farge frå næraste overordna element som har `data-color` definert. +Dette betyr at du ikkje treng å bruke `data-color` på alle komponentane i eit hierarki, dersom dei skal ha same farge. + + +{`
    + + Denne Chip'en har neutral farge. + +
    + + + +
    + +
    +`} +     + +## Bruk desse saman + +Du kan bruke `data-color-scheme` og `data-color` saman for å endre både fargemodus og farge på komponentar. + +`data-color` set variablar som blir resatt av `data-color-scheme`. Dersom du endrar fargemodus, må du setje `data-color` på nytt. + + +{` +
    + +
    + +
    + +
    + +
    +
    + +
    +
    +`} +     + +## Kort oppsummert + +Du endrar farge med `data-color`, men denne må bli satt på nytt dersom du endrar fargemodus med `data-color-scheme`. Nokre komponentar arvar farge frå næraste forelder med `data-color` satt. diff --git a/apps/storefront/app/grunnleggende/for-utviklere/farger/page.mdx b/apps/storefront/app/grunnleggende/for-utviklere/farger/page.mdx deleted file mode 100644 index e0df29b4b0..0000000000 --- a/apps/storefront/app/grunnleggende/for-utviklere/farger/page.mdx +++ /dev/null @@ -1,97 +0,0 @@ -import { CodeIcon } from '@navikt/aksel-icons'; - -import { MenuPageLayout } from '@layouts'; -import { CodeSnippet } from '@repo/components'; - -export const metadata = { - title: 'Farger', - description: 'Informasjon om korleis du bruker farger på frontend.', -}; - -export default ({ children }) => ( - , - color: 'blue', - }} - /> -); - -Denne artikkelen tar forbehold om at du allerie har fargar satt opp med [Temabyggeren](/grunnleggende/for-designere/eget-tema). - -Me brukar data attributt for å fargelegge komponentar. Alle komponentar kan ha alle fargar, men komponentar har forskjellige standardfargar. - -Når du skal sette farge er det to data attributt du kan bruke: -- `data-color-scheme` som endrar fargetema -- `data-color` som endrar farge - -## `data-color-scheme` - -Denne brukast for å endre mellom lys, mørk, eller andre fargemoduesar som du har satt opp. Du legger denne over -alt som skal ha modusen du spesifiserer. Dersom du ikkje setter denne, vil sida di bruke lys modus. - - -{` - -
    - -
    - -
    - -
    - -`} -     - -Du kan endre denne på heile eller delar av sida, og bytte så mykje du vil mellom dei ulike fargetemaene. -For eksmpel er sida di lys, men du har ein mørk footer. Då kan du sette `data-color-scheme="dark"` på footer. - -## `data-color` - -Denne brukast for å endre farge på komponentar. Du kan bruke alle fargene som du har satt opp i temaet ditt. Standardverdi når denne ikkje er satt, -er din standardfarge. Brukar du tema frå `@digdir/designsystemet-theme`, vil dette være `accent`. - -**Når du sett `data-color-scheme` vil `data-color` bli satt tilbake til standardfargen.** - -Nokon komponentar kan arve farge frå næraste forelder med `data-color` satt. Dette betyr at du ikkje treng å bruke denne på alle komponentar, -dersom dei skal ha lik farge. - - -{` -
    - -
    -`} -     - -Det blir satt css variablar som begynnar med `--ds-color-*`, og ikkje `--ds-color-FARGE-*`. På denne måten kan me, og du, byggje komponentar som støttar alle fargar. - -Nokon komponentar, som `Button`, støttar ikkje ekstern `data-color`, og her må du sette fargen direkte på komponenten. - - -{` -
    - - Denne Chip'en har neutral farge. - -
    - - - -
    - -
    -`} -     - -## Kort oppsummert - -Du endrar farge med `data-color`, men denne må bli satt på nytt dersom du endrar fargetema med `data-color-scheme`. Nokre komponentar arvar farge frå næraste forelder med `data-color` satt. diff --git a/apps/storefront/siteConfig.tsx b/apps/storefront/siteConfig.tsx index 3f0fd30067..3c818553a4 100644 --- a/apps/storefront/siteConfig.tsx +++ b/apps/storefront/siteConfig.tsx @@ -95,8 +95,8 @@ export const SiteConfig = { url: 'grunnleggende/for-utviklere/kom-i-gang', }, { - name: 'Farger', - url: 'grunnleggende/for-utviklere/farger', + name: 'Fargar', + url: 'grunnleggende/for-utviklere/fargar', }, { name: 'Komposisjon', From 6646fd79e601884a125c25f03d7b304ed9443d95 Mon Sep 17 00:00:00 2001 From: Barsnes Date: Tue, 26 Nov 2024 12:29:25 +0100 Subject: [PATCH 05/12] fix code snippets --- apps/_components/src/ClipboardButton/ClipboardButton.tsx | 2 +- apps/_components/src/CodeSnippet/CodeSnippet.tsx | 6 ++---- apps/_components/src/Header/Header.tsx | 2 +- .../app/grunnleggende/for-utviklere/fargar/page.mdx | 5 +++-- apps/storefront/components/SidebarMenu/SidebarMenu.tsx | 2 +- apps/theme/components/TokenModal/TokenModal.tsx | 2 +- 6 files changed, 9 insertions(+), 10 deletions(-) diff --git a/apps/_components/src/ClipboardButton/ClipboardButton.tsx b/apps/_components/src/ClipboardButton/ClipboardButton.tsx index d21df7faa1..0f7545317e 100644 --- a/apps/_components/src/ClipboardButton/ClipboardButton.tsx +++ b/apps/_components/src/ClipboardButton/ClipboardButton.tsx @@ -34,7 +34,7 @@ export const ClipboardButton = ({ title={title} icon={!text} variant='tertiary' - color='neutral' + data-color='neutral' data-size='sm' > diff --git a/apps/_components/src/CodeSnippet/CodeSnippet.tsx b/apps/_components/src/CodeSnippet/CodeSnippet.tsx index 6e36883595..0c94934b2e 100644 --- a/apps/_components/src/CodeSnippet/CodeSnippet.tsx +++ b/apps/_components/src/CodeSnippet/CodeSnippet.tsx @@ -27,15 +27,13 @@ const plugins = [ ]; type CodeSnippetProps = { - language?: 'css' | 'html' | 'ts' | 'markdown' | 'json'; - syntax?: string; + language?: 'css' | 'html' | 'ts' | 'markdown' | 'json' | 'shell'; children: string; } & React.HTMLAttributes; const CodeSnippet = ({ language = 'markdown', className, - syntax = 'js', children, ...rest }: CodeSnippetProps) => { @@ -95,7 +93,7 @@ const CodeSnippet = ({ -{`
    + +{` +
    Denne Chip'en har neutral farge. diff --git a/apps/storefront/components/SidebarMenu/SidebarMenu.tsx b/apps/storefront/components/SidebarMenu/SidebarMenu.tsx index 3b3293c0f9..85808e4eb4 100644 --- a/apps/storefront/components/SidebarMenu/SidebarMenu.tsx +++ b/apps/storefront/components/SidebarMenu/SidebarMenu.tsx @@ -41,7 +41,7 @@ const SidebarMenu = ({ routerPath }: SidebarMenuProps) => {
    - {cliSnippet} + {cliSnippet}
    From 0ca40c0b11e0e4a6313986fbcef63c5f55590678 Mon Sep 17 00:00:00 2001 From: Barsnes Date: Tue, 26 Nov 2024 13:05:00 +0100 Subject: [PATCH 06/12] last text --- .../app/grunnleggende/for-utviklere/fargar/page.mdx | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/apps/storefront/app/grunnleggende/for-utviklere/fargar/page.mdx b/apps/storefront/app/grunnleggende/for-utviklere/fargar/page.mdx index 34371df04c..b897b5d3c1 100644 --- a/apps/storefront/app/grunnleggende/for-utviklere/fargar/page.mdx +++ b/apps/storefront/app/grunnleggende/for-utviklere/fargar/page.mdx @@ -13,7 +13,7 @@ export default ({ children }) => ( content={children} data={{ title: 'Fargar', - date: '25. november 2024', + date: '26. november 2024', icon: , color: 'blue', }} @@ -65,9 +65,8 @@ Dette data-attributtet blir brukt for å endre fargen til ein komponent. Du kan Nokre komponentar kan arve farge frå næraste overordna element som har `data-color` definert. Dette betyr at du ikkje treng å bruke `data-color` på alle komponentane i eit hierarki, dersom dei skal ha same farge. - -{` -
    + +{`
    Denne Chip'en har neutral farge. @@ -85,7 +84,9 @@ Dette betyr at du ikkje treng å bruke `data-color` på alle komponentane i eit `} -## Bruk desse saman +`Button` er ein komponent som ikkje arvar farge. + +## Bruk `data-color-scheme` og `data-color` saman Du kan bruke `data-color-scheme` og `data-color` saman for å endre både fargemodus og farge på komponentar. From fd8d3d543bc0e502a659be6044a11567b9b32ea1 Mon Sep 17 00:00:00 2001 From: Barsnes Date: Tue, 26 Nov 2024 13:24:02 +0100 Subject: [PATCH 07/12] change snippet color --- apps/_components/src/CodeSnippet/CodeSnippet.module.css | 3 ++- apps/_components/src/CodeSnippet/CodeSnippet.tsx | 4 ++-- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/apps/_components/src/CodeSnippet/CodeSnippet.module.css b/apps/_components/src/CodeSnippet/CodeSnippet.module.css index e5065ad217..ddbcf60327 100644 --- a/apps/_components/src/CodeSnippet/CodeSnippet.module.css +++ b/apps/_components/src/CodeSnippet/CodeSnippet.module.css @@ -8,7 +8,8 @@ } .codeSnippet > pre { - padding-right: var(--ds-spacing-11) !important; + padding-right: var(--ds-spacing-18) !important; + background-color: var(--ds-color-neutral-background-subtle) !important; } .codeSnippet > pre > code { diff --git a/apps/_components/src/CodeSnippet/CodeSnippet.tsx b/apps/_components/src/CodeSnippet/CodeSnippet.tsx index 0c94934b2e..dd1708b154 100644 --- a/apps/_components/src/CodeSnippet/CodeSnippet.tsx +++ b/apps/_components/src/CodeSnippet/CodeSnippet.tsx @@ -10,8 +10,8 @@ import * as prettierCSS from 'prettier/plugins/postcss.js'; import * as prettierTypescript from 'prettier/plugins/typescript.js'; import { format } from 'prettier/standalone.js'; import { useEffect, useState } from 'react'; -import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'; -import { nightOwl } from 'react-syntax-highlighter/dist/esm/styles/prism'; +import SyntaxHighlighter from 'react-syntax-highlighter'; +import { stackoverflowDark as nightOwl } from 'react-syntax-highlighter/dist/esm/styles/hljs'; import classes from './CodeSnippet.module.css'; From ea406efc3072d03dd51d162b83ccff8e02416466 Mon Sep 17 00:00:00 2001 From: Barsnes Date: Wed, 27 Nov 2024 09:11:54 +0100 Subject: [PATCH 08/12] fix details on feilemeldinger --- .../app/monstre/feilmeldinger/page.mdx | 58 +++++++++---------- 1 file changed, 28 insertions(+), 30 deletions(-) diff --git a/apps/storefront/app/monstre/feilmeldinger/page.mdx b/apps/storefront/app/monstre/feilmeldinger/page.mdx index ac966b551d..a9dbe9b3d9 100644 --- a/apps/storefront/app/monstre/feilmeldinger/page.mdx +++ b/apps/storefront/app/monstre/feilmeldinger/page.mdx @@ -185,38 +185,36 @@ Her må vi gjøre det så tydelig som mulig for brukeren at flere felt påvirker I dette eksempelet har vi en gruppe med felt, der brukeren ikke nødvendigvis har alle opplysningene, men må fylle ut minst ett felt.
    - - Eksempel på feilmelding som gjelder flere felt - - Videoen under viser at brukeren forsøker å gå videre uten å ha fyllt ut minst ett felt, som er påkrevd. Alle feltene i gruppen blir da røde og en feilmelding vises i bunnen. - - - Hadde det vært bare en feil i gruppen, ville feilmeldingen vist på vanlig måte under kun et av feltene, uten at hele gruppen ble rød. - - Skjermbilde av skjema med en gruppe av felter. Brukeren har fylt ut minst ett felt, men har en feil i utfyllingen. Feilmeldingen vises da på vanlig måte under det aktuelle feltet. Eksempel på feilmelding som gjelder flere felt + + Videoen under viser at brukeren forsøker å gå videre uten å ha fyllt ut minst ett felt, som er påkrevd. Alle feltene i gruppen blir da røde og en feilmelding vises i bunnen. + - + + + Hadde det vært bare en feil i gruppen, ville feilmeldingen vist på vanlig måte under kun et av feltene, uten at hele gruppen ble rød. + + Skjermbilde av skjema med en gruppe av felter. Brukeren har fylt ut minst ett felt, men har en feil i utfyllingen. Feilmeldingen vises da på vanlig måte under det aktuelle feltet. +
    ## Kode From 8402a6ff80de3443f13c1c661eb46ef6802b613c Mon Sep 17 00:00:00 2001 From: Barsnes Date: Tue, 10 Dec 2024 08:15:55 +0100 Subject: [PATCH 09/12] update about groups --- .../for-utviklere/fargar/page.mdx | 21 +++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/apps/storefront/app/grunnleggende/for-utviklere/fargar/page.mdx b/apps/storefront/app/grunnleggende/for-utviklere/fargar/page.mdx index b897b5d3c1..f91c3dcf62 100644 --- a/apps/storefront/app/grunnleggende/for-utviklere/fargar/page.mdx +++ b/apps/storefront/app/grunnleggende/for-utviklere/fargar/page.mdx @@ -110,6 +110,27 @@ Du kan bruke `data-color-scheme` og `data-color` saman for å endre både fargem `} +## Korleis komponentar blir påverka + +Me delar komponentar inn i 3 grupper for farge: +- Eksplisitt +- Nøytral +- Cascading + +### Eksplisitt + +Er komponentar som gjer meir av fargen sin, og `data-color` må bli direkte satt. Dette er komponentar som `Alert` og `ErrorMessage`. +Å "gjere meir av fargen sin" betyr at det t.d. kan være ikon som blir satt basert på farge. + +### Nøytral + +Dette er komponentar som alltid skal være nøytrale, og blir verken påverka av arva farge eller direkte `data-color`. Dette er komponentar som `Modal` og `Tooltip`. +Desse brukar alltid `neutral` fargen. + +### Cascading + +Denne gruppa inneheld resten av komponentane, og vil arve farge frå næraste forelder med `data-color` satt. + ## Kort oppsummert Du endrar farge med `data-color`, men denne må bli satt på nytt dersom du endrar fargemodus med `data-color-scheme`. Nokre komponentar arvar farge frå næraste forelder med `data-color` satt. From d8dd448fb3362967380dfcbba02559a9452ec5ca Mon Sep 17 00:00:00 2001 From: Barsnes Date: Tue, 10 Dec 2024 08:18:19 +0100 Subject: [PATCH 10/12] update example --- .../app/grunnleggende/for-utviklere/fargar/page.mdx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/apps/storefront/app/grunnleggende/for-utviklere/fargar/page.mdx b/apps/storefront/app/grunnleggende/for-utviklere/fargar/page.mdx index f91c3dcf62..939d06b9cc 100644 --- a/apps/storefront/app/grunnleggende/for-utviklere/fargar/page.mdx +++ b/apps/storefront/app/grunnleggende/for-utviklere/fargar/page.mdx @@ -77,14 +77,14 @@ Dette betyr at du ikkje treng å bruke `data-color` på alle komponentane i eit
    - +
    `} -`Button` er ein komponent som ikkje arvar farge. +`Alert` er ein komponent som ikkje arvar farge. ## Bruk `data-color-scheme` og `data-color` saman From ed822f1ae79eb3310e4e6fc884ea85c967feeca2 Mon Sep 17 00:00:00 2001 From: Barsnes Date: Thu, 12 Dec 2024 10:43:47 +0100 Subject: [PATCH 11/12] changes from review --- .../for-utviklere/fargar/page.mdx | 50 ++++++++++--------- 1 file changed, 27 insertions(+), 23 deletions(-) diff --git a/apps/storefront/app/grunnleggende/for-utviklere/fargar/page.mdx b/apps/storefront/app/grunnleggende/for-utviklere/fargar/page.mdx index 939d06b9cc..baaf0ded98 100644 --- a/apps/storefront/app/grunnleggende/for-utviklere/fargar/page.mdx +++ b/apps/storefront/app/grunnleggende/for-utviklere/fargar/page.mdx @@ -49,6 +49,7 @@ vil få modusen spesifisert av forelder. Som standard vil lys modus bli nytta. Du kan endre `data-color-scheme` på heile eller delar av sida og byte mellom ulike fargemodus så ofte du vil. Til dømes kan hovudsida vere lys, men med ei mørk botnlinje (footer). Du kan då setje `data-color-scheme="dark"` på botnlinja. +`data-color-scheme` kan bli satt til `light`, `dark` eller `auto`. `auto` vil følgje systeminnstillingane til brukaren. ## `data-color` @@ -65,6 +66,32 @@ Dette data-attributtet blir brukt for å endre fargen til ein komponent. Du kan Nokre komponentar kan arve farge frå næraste overordna element som har `data-color` definert. Dette betyr at du ikkje treng å bruke `data-color` på alle komponentane i eit hierarki, dersom dei skal ha same farge. +## Korleis komponentar blir påverka + +Me delar komponentar inn i 3 grupper for farge: +- Eksplisitt +- Nøytral +- Cascading + +### Eksplisitt + +Komponentar brukt til validering eller systemvarslar følgjer eigne dedikerte systemfargar, og arvar ikkje farge frå næraste forelder med `data-color` satt. +Dei dedikerte systemfargane er `success`, `warning`, `fanger` og `info`. + +Dette er komponentar som +- `Alert` +- `ValidationMessage` +- `ErrorSummary` + +### Nøytral + +Dette er komponentar som alltid skal være nøytrale, og blir verken påverka av arva farge eller direkte `data-color`. Dette er komponentar som `Modal` og `Tooltip`. +Desse brukar alltid `neutral` fargen. + +### Cascading + +Denne gruppa inneheld resten av komponentane, og vil arve farge frå næraste forelder med `data-color` satt. + {`
    @@ -84,8 +111,6 @@ Dette betyr at du ikkje treng å bruke `data-color` på alle komponentane i eit `} -`Alert` er ein komponent som ikkje arvar farge. - ## Bruk `data-color-scheme` og `data-color` saman Du kan bruke `data-color-scheme` og `data-color` saman for å endre både fargemodus og farge på komponentar. @@ -110,27 +135,6 @@ Du kan bruke `data-color-scheme` og `data-color` saman for å endre både fargem `} -## Korleis komponentar blir påverka - -Me delar komponentar inn i 3 grupper for farge: -- Eksplisitt -- Nøytral -- Cascading - -### Eksplisitt - -Er komponentar som gjer meir av fargen sin, og `data-color` må bli direkte satt. Dette er komponentar som `Alert` og `ErrorMessage`. -Å "gjere meir av fargen sin" betyr at det t.d. kan være ikon som blir satt basert på farge. - -### Nøytral - -Dette er komponentar som alltid skal være nøytrale, og blir verken påverka av arva farge eller direkte `data-color`. Dette er komponentar som `Modal` og `Tooltip`. -Desse brukar alltid `neutral` fargen. - -### Cascading - -Denne gruppa inneheld resten av komponentane, og vil arve farge frå næraste forelder med `data-color` satt. - ## Kort oppsummert Du endrar farge med `data-color`, men denne må bli satt på nytt dersom du endrar fargemodus med `data-color-scheme`. Nokre komponentar arvar farge frå næraste forelder med `data-color` satt. From da69c84314589c9762ca65b406092862093055b3 Mon Sep 17 00:00:00 2001 From: Tobias Barsnes Date: Thu, 2 Jan 2025 10:16:47 +0100 Subject: [PATCH 12/12] Update apps/storefront/app/grunnleggende/for-utviklere/fargar/page.mdx Co-authored-by: Michael Marszalek --- apps/storefront/app/grunnleggende/for-utviklere/fargar/page.mdx | 1 + 1 file changed, 1 insertion(+) diff --git a/apps/storefront/app/grunnleggende/for-utviklere/fargar/page.mdx b/apps/storefront/app/grunnleggende/for-utviklere/fargar/page.mdx index baaf0ded98..59fdbd6ef1 100644 --- a/apps/storefront/app/grunnleggende/for-utviklere/fargar/page.mdx +++ b/apps/storefront/app/grunnleggende/for-utviklere/fargar/page.mdx @@ -49,6 +49,7 @@ vil få modusen spesifisert av forelder. Som standard vil lys modus bli nytta. Du kan endre `data-color-scheme` på heile eller delar av sida og byte mellom ulike fargemodus så ofte du vil. Til dømes kan hovudsida vere lys, men med ei mørk botnlinje (footer). Du kan då setje `data-color-scheme="dark"` på botnlinja. + `data-color-scheme` kan bli satt til `light`, `dark` eller `auto`. `auto` vil følgje systeminnstillingane til brukaren. ## `data-color`