docs(toggle-group): web-first (#4849)

Author: Thunear

apps/www/app/content/components/toggle-group/en/code.mdx

@@ -1,35 +1,7 @@
-<Story story="PreviewEn" />
-<ReactComponentDocs />
+<Story story="PreviewEn" defaultOpen />
 
 ## Usage
-
-```tsx
-import { ToggleGroup } from '@digdir/designsystemet-react';
-
-<ToggleGroup data-toggle-group='Options' defaultValue="option1">
-<ToggleGroup.Item value="option1">Option 1</ToggleGroup.Item>
-<ToggleGroup.Item value="option2">Option 2</ToggleGroup.Item>
-</ToggleGroup>
-
-```
-
-## Examples
-
-### Icons only
-Use [`Tooltip`](/en/components/docs/tooltip/code) to explain the actions when using only icons.
-
-<Story story="OnlyIconsEn" />
-
-### Controlled
-
-<Story story="ControlledEn" />
-
-### Secondary variant
-
-<Story story="SecondaryEn" />
-
-## HTML
-If you are using `@digdir/designsystemet-web`, you can implement `ToggleGroup` by using the `data-toggle-group` attribute.
+If you are using `@digdir/designsystemet-web`, you can implement toggle group by using the `data-toggle-group` attribute.
 
 ```html
 <fieldset class="ds-toggle-group" data-toggle-group="Text alignment" data-variant="secondary">
@@ -55,7 +27,7 @@ You can read about what you need to do to implement this in the [accessibility d
 The class name `ds-toggle-group` is placed on a `<div>` with `role="radiogroup"`.
 
 Each button in the group is a `<button>` with class name `ds-button` with `role="radio"` and `aria-checked` which indicates whether the button is selected or not.
-`data-variant` for selected buttons should match `data-variant` on `ToggleGroup`.
+`data-variant` for selected buttons should match `data-variant` on toggle group.
 The remaining buttons should have `data-variant="tertiary"`.
 
 ```html
@@ -86,6 +58,26 @@ The remaining buttons should have `data-variant="tertiary"`.
 ```
 
 ## CSS variables and data attributes
+Sizes are controlled with [data-size](/en/fundamentals/code/sizes) and colors with [data-color](/en/fundamentals/code/colors). 
+The component will inherit from the closest parent where these are set.
+
 <CssVariables />
 
 <CssAttributes />
+
+## React
+
+```tsx
+import { ToggleGroup } from '@digdir/designsystemet-react';
+
+<ToggleGroup data-toggle-group='Options' defaultValue="option1">
+  <ToggleGroup.Item value="option1">Option 1</ToggleGroup.Item>
+  <ToggleGroup.Item value="option2">Option 2</ToggleGroup.Item>
+</ToggleGroup>
+```
+
+### Controlled example
+
+<Story story="ControlledEn" language="react" />
+
+<ReactComponentDocs />

apps/www/app/content/components/toggle-group/en/overview.mdx

@@ -4,20 +4,20 @@ search_terms: switch, button
 
 <Story story="PreviewEn" />
 
-**Use `ToggleGroup` when**
+**Use toggle group when**
 - you need to switch between views, for example between a list and a graph  
 - content in a list or table needs to be filtered  
 
-**Avoid using `ToggleGroup` when**
+**Avoid using toggle group when**
 - there are so many options that they do not fit within the available width  
 - the options contain long text, making the group heavy and difficult to scan  
-- the options represent answers in a form - use [`Radio`](/en/components/docs/radio/overview) instead  
-- the choice is an on/off setting - use [`Switch`](/en/components/docs/switch/overview) instead  
+- the options represent answers in a form - use [radio](/en/components/docs/radio/overview) instead  
+- the choice is an on/off setting - use [switch](/en/components/docs/switch/overview) instead  
 
 ## Example
 
 ### Icons only
-A `ToggleGroup` without text should only be used when the icons are easy for users to understand. This may be suitable for expert users or internal services where the symbols are already familiar. Use [`Tooltip`](/en/components/docs/tooltip/overview) to clarify the actions when using icons alone.
+A toggle group without text should only be used when the icons are easy for users to understand. This may be suitable for expert users or internal services where the symbols are already familiar. Use [tooltip](/en/components/docs/tooltip/overview) to clarify the actions when using icons alone.
 
 <Story story="OnlyIconsEn" />
 
@@ -26,10 +26,10 @@ A `ToggleGroup` without text should only be used when the icons are easy for use
 <Story story="SecondaryEn" />
 
 ## Guidelines
-It is not always straightforward to decide when to use a `ToggleGroup` instead of components such as `Tabs` or `Radio`. The choice depends on the context and how the rest of the interface is structured.As a general rule, `ToggleGroup` should be used when the selection has a direct and visible effect in the interface — for example when the content on the page or a specific element is updated immediately based on the user’s choice.
+It is not always straightforward to decide when to use a toggle group instead of components such as tabs or radio. The choice depends on the context and how the rest of the interface is structured.As a general rule, toggle group should be used when the selection has a direct and visible effect in the interface — for example when the content on the page or a specific element is updated immediately based on the user’s choice.
 
-A `ToggleGroup` should have at least two options, but not so many that they no longer fit horizontally. Ensure there is enough space for both the content of each option and the number of options without causing line breaks. Make sure the entire component fits on screen, including on mobile, and that all options remain clearly visible to users.
+A toggle group should have at least two options, but not so many that they no longer fit horizontally. Ensure there is enough space for both the content of each option and the number of options without causing line breaks. Make sure the entire component fits on screen, including on mobile, and that all options remain clearly visible to users.
 
 ## Text
 Include a label for the group that explains what the options refer to.  
-Write clear, consistent labels for each option, ensuring they follow the same linguistic pattern. Use [`Tooltip`](/en/components/docs/tooltip/overview) to provide hints when needed, especially when using icons only.
+Write clear, consistent labels for each option, ensuring they follow the same linguistic pattern. Use [tooltip](/en/components/docs/tooltip/overview) to provide hints when needed, especially when using icons only.

apps/www/app/content/components/toggle-group/metadata.json

@@ -1,11 +1,11 @@
 {
   "no": {
-    "title": "ToggleGroup",
-    "subtitle": "`ToggleGroup` samler relaterte alternativ. Komponenten består av ei gruppe knappar som heng saman, der berre éin knapp er mogleg å velje om gongen."
+    "title": "Toggle group",
+    "subtitle": "Toggle group samler relaterte alternativ. Komponenten består av ei gruppe knappar som heng saman, der berre éin knapp er mogleg å velje om gongen."
   },
   "en": {
-    "title": "ToggleGroup",
-    "subtitle": "`ToggleGroup` groups related options. The component consists of a group of buttons that are connected, where only one button can be selected at a time."
+    "title": "Toggle group",
+    "subtitle": "Toggle group groups related options. The component consists of a group of buttons that are connected, where only one button can be selected at a time."
   },
   "image": "ToggleGroup.svg",
   "cssFile": "toggle-group.css"

apps/www/app/content/components/toggle-group/no/code.mdx

@@ -1,34 +1,7 @@
-<Story story="Preview" />
-<ReactComponentDocs />
+<Story story="Preview" defaultOpen />
 
 ## Bruk
-
-```tsx
-import { ToggleGroup } from '@digdir/designsystemet-react';
-
-<ToggleGroup data-toggle-group='Alternativer' defaultValue="option1">
-  <ToggleGroup.Item value="option1">Alternativ 1</ToggleGroup.Item>
-  <ToggleGroup.Item value="option2">Alternativ 2</ToggleGroup.Item>
-</ToggleGroup>
-```
-
-## Eksempel
-
-### Kun ikoner
-Bruk [`Tooltip`](/no/components/docs/tooltip/code) for å forklare handlingane når du brukar berre ikon.
-
-<Story story="OnlyIcons" />
-
-### Kontrollert
-
-<Story story="Controlled" />
-
-### Secondary variant
-
-<Story story="Secondary" />
-
-## HTML
-Bruker du `@digdir/designsystemet-web` kan du implementere `ToggleGroup` ved å bruke `data-toggle-group`-attributtet.
+Bruker du `@digdir/designsystemet-web` kan du implementere toggle group ved å bruke `data-toggle-group`-attributtet.
 
 ```html
 <fieldset class="ds-toggle-group" data-toggle-group="Tekstjustering" data-variant="secondary">
@@ -55,7 +28,7 @@ Du kan lese om kva du må gjere for å implementere dette i [tilgjengelighetsdok
 Klassenavnet `ds-toggle-group` blir lagt på ein `<div>` med `role="radiogroup"`.
 
 Kvar knapp i gruppa er ein `<button>` med klassenavn `ds-button` med `role="radio"` og `aria-checked` som indikerer om knappen er vald eller ikkje.
-`data-variant` for valde knappar skal stemme med `data-variant` på `ToggleGroup`.
+`data-variant` for valde knappar skal stemme med `data-variant` på toggle group.
 Resterande knappar skal ha `data-variant="tertiary"`.
 
 ```html
@@ -86,6 +59,26 @@ Resterande knappar skal ha `data-variant="tertiary"`.
 ```
 
 ## CSS variablar og data-attributter
+Størrelsar styrast med [data-size](/no/fundamentals/code/sizes) og fargar med [data-color](/no/fundamentals/code/colors). 
+Komponenten vil arve næraste forelder med desse satt.
+
 <CssVariables />
 
 <CssAttributes />
+
+## React
+
+```tsx
+import { ToggleGroup } from '@digdir/designsystemet-react';
+
+<ToggleGroup data-toggle-group='Alternativer' defaultValue="option1">
+  <ToggleGroup.Item value="option1">Alternativ 1</ToggleGroup.Item>
+  <ToggleGroup.Item value="option2">Alternativ 2</ToggleGroup.Item>
+</ToggleGroup>
+```
+
+### Eksempel på kontrollert
+
+<Story story="Controlled" language="react" />
+
+<ReactComponentDocs />

apps/www/app/content/components/toggle-group/no/overview.mdx

@@ -4,22 +4,22 @@ search_terms: valggruppe, enkeltvalg, switch
 
 <Story story="Preview" />
 
-**Bruk `ToggleGroup` når**
+**Bruk toggle group når**
 - du skal veksle mellom visningar, til dømes mellom liste og graf  
 - innhald i ei liste eller tabell skal filtrerast  
 
-**Unngå `ToggleGroup` når**
+**Unngå toggle group når**
 - du har så mange val at dei ikkje får plass i breidda  
 - vala inneheld lange tekstar som gjer at gruppa verkar tung og uoversiktleg
-- alternativa er svar i eit skjema - bruk heller [`Radio`](/no/components/docs/radio/overview)  
-- valet er ein av/på-innstilling - bruk heller [`Switch`](/no/components/docs/switch/overview)  
+- alternativa er svar i eit skjema - bruk heller [radio](/no/components/docs/radio/overview)  
+- valet er ein av/på-innstilling - bruk heller [switch](/no/components/docs/switch/overview)  
 
 ## Eksempel
 
 ### Kun ikoner
-`ToggleGroup` står utan tekst bør berre brukast når ikona er lett forståelege for brukarane.
-Det kan til dømes vere ekspertbrukarar eller brukarar av interne tenester som kjenner symbola i den aktuelle `ToggleGroup` godt.
-Forklar handlingane med [`Tooltip`](/no/components/docs/tooltip/overview) når du brukar berre ikon.
+Toggle group står utan tekst bør berre brukast når ikona er lett forståelege for brukarane.
+Det kan til dømes vere ekspertbrukarar eller brukarar av interne tenester som kjenner symbola i den aktuelle toggle group godt.
+Forklar handlingane med [tooltip](/no/components/docs/tooltip/overview) når du brukar berre ikon.
 
 <Story story="OnlyIcons" />
 
@@ -28,12 +28,12 @@ Forklar handlingane med [`Tooltip`](/no/components/docs/tooltip/overview) når d
 <Story story="Secondary" />
 
 ## Retningslinjer
-Det er ikkje alltid heilt rett fram å avgjere når du bør bruke ein `ToggleGroup` i staden for eksempelvis `Tabs` eller `Radio`.
+Det er ikkje alltid heilt rett fram å avgjere når du bør bruke ein toggle group i staden for eksempelvis tabs eller radio.
 Valet kjem ofte an på situasjonen og korleis grensesnittet elles er bygd opp. 
-Som ein tommelfingerregel bør `ToggleGroup` berre brukast når valet har ein direkte og synleg effekt i grensesnittet, til dømes at innhaldet på sida eller eit element vert oppdatert med ein gong basert på kva brukaren vel.
+Som ein tommelfingerregel bør toggle group berre brukast når valet har ein direkte og synleg effekt i grensesnittet, til dømes at innhaldet på sida eller eit element vert oppdatert med ein gong basert på kva brukaren vel.
 
-`ToggleGroup` bør ha minst to val, men ikkje fleire enn at alle vala får plass i breidda.
+Toggle group bør ha minst to val, men ikkje fleire enn at alle vala får plass i breidda.
 Du må sjølv passe på at det er nok plass til både innhaldet i vala og talet på val utan å bryte linja. Pass på at heile komponenten får plass på skjermen, også på mobil, og at alle vala er godt synlege for brukarane.
 
 ## Tekst
-Ha gjerne med ei ledetekst for gruppa som forklarer kva vala gjeld. Skriv tydelege tekstar for vala i komponenten, og pass på at dei har same språklege form. Bruk gjerne [`Tooltip`](/no/components/docs/tooltip/overview) til å gje hint, særleg dersom du berre viser ikon.
+Ha gjerne med ei ledetekst for gruppa som forklarer kva vala gjeld. Skriv tydelege tekstar for vala i komponenten, og pass på at dei har same språklege form. Bruk gjerne [tooltip](/no/components/docs/tooltip/overview) til å gje hint, særleg dersom du berre viser ikon.