Komp-350-button (#629)

* Ny mal button

* Dokumentasjon

* Fjerner linje

* Legger til changeset

* Typo

.changeset/shaggy-penguins-punch.md

@@ -0,0 +1,5 @@
+---
+"@kvib/react": patch
+---
+
+Fikser bug hvor secondary Button endret størrelse på "focus".

apps/storybook/stories/components/button/Button.mdx

@@ -1,59 +1,126 @@
 import { Title, Canvas, Meta, Story, Controls } from "@storybook/blocks";
 import * as ButtonStories from "./Button.stories";
+import { DocsHeading, DocsAnatomy, DocsContainer, DocsStory, Feedback } from "../../templates";
+import { Text, Code, Box } from "@kvib/react/src/";
 
 <Meta of={ButtonStories} />
 
 # Button
 
-Her er en oversikt over utvalget av Knapper i KVIB. Disse er blant annet bygget opp ved bruk av desing tokens fra KVIB, eksempelvis farger og typografi. I dokumentasjonen følger beskrivelse av komponenten og bruksområde, sammen med kodeeksempler.
-
-I Kartverket har vi to sett med knappestiler.\
-Et nettsidesett og et forvaltningsett. For løsninger som skal gå inn under eller oppfattes som kartverket.no, skal man bruke det grønne nettsidesettet.\
-For karttjenester, forvaltningstjenester og lignende benytter vi oss av det blå settet. Dette er for å få en tydelig kontrast mot kartet.
-
-I tillegg til knappestiler har vi også knappetyper. Dette er for å få et tydelig knappehierarki som med visuelle grep illustrerer hva som er viktigst og hva knappen gjør.
-
-**Solid button (primary)** Brukes for den viktigste, ønsket eller avsluttende handling. Hovedregel er at det kun skal være en solid/primary Button per side. \
-**Outline button (secondary)** Viktig, men ikke viktigste eller fullført handling.\
-**Link button (tertiary)** Den mindre “viktige handlingen” Fin å bruke mot Primary for å illustrere tydelig handling.
-
-## Ta i bruk
+Button brukes til å utføre en handling. Det kan for eksempel være å sende inn et skjema, beregne resultater eller åpne en modal.
 
 ```jsx
 import { Button } from "@kvib/react";
 ```
 
-## Props
+<DocsContainer>
+
+**Egnet til:**
+
+- Innsending av skjema
+- Beregning av resultater
+- Trigger for åpning av modal
+
+**Uegnet til:**
+
+- Trigger for vis/skjul av innhold (bruk heller Accordion)
+- Navigasjon (bruk heller Link)
+- Knapp med kun ikon (bruk heller IconButton)
+
+<Feedback component="Button" />
+
+</DocsContainer>
+
+<DocsHeading>Alternativer</DocsHeading>
+<DocsContainer>
+
+<DocsStory
+  title="Fargevalg"
+  description={
+    <Text>
+      I Kartverket har vi to sett med knappestiler. Et nettsidesett og et forvaltningsett. For løsninger som skal gå inn
+      under eller oppfattes som kartverket.no, skal man bruke det grønne nettsidesettet. For karttjenester,
+      forvaltningstjenester og lignende benytter vi oss av det blå settet. Dette er for å få en tydelig kontrast mot
+      kartet.
+    </Text>
+  }
+  story={<Canvas of={ButtonStories.ButtonColors} />}
+/>
+
+<DocsStory
+  title="Varianter"
+  description={
+    <Box>
+      <Text as="b">Primary</Text>
+      <Text>
+        Denne varianten skal brukes der løsningen har en tydelig primærfunksjon. Det kan være "Lagre" eller "Send
+        søknad". Som en hovedregel burde det bare være én hovedknapp på hver side.
+      </Text>
+      <Text as="b">Secondary</Text>
+      <Text>
+        Secondary-varianten brukes som regel alle andre steder som ikke er primærfunksjon. Det betyr at de fleste
+        knappene i løsningene til Kartverket vil se slik ut.
+      </Text>
+      <Text as="b">Tertiary</Text>
+      <Text>Tertiary kan brukes som et ustylet alternativ for handlinger som ikke trenger like mye oppmerksomhet.</Text>
+      <Text as="b">Ghost</Text>
+      <Text>Ghost-varianten kan brukes som et alternativ til Secondary-varianten ved behov.</Text>
+    </Box>
+  }
+  story={<Canvas of={ButtonStories.ButtonVariants} />}
+/>
+
+<DocsStory
+  title="Ikoner"
+  description={
+    <Text>
+      Ikoner kan legges til ved bruk av <Code>leftIcon</Code> og <Code>rightIcon</Code>. Teksten burde likevel være
+      deskriptiv nok til at knappen gir mening uten ikon. Det vil si at ikonet i utgangspunktet er illustrativt
+      tilskudd, men det kan ofte understøtte handlingen til knappen. Dersom du trenger en knapp med kun ikon, kan du ta
+      en titt på <Code>IconButton</Code>.
+    </Text>
+  }
+  story={<Canvas of={ButtonStories.ButtonIcons} />}
+/>
+
+<DocsStory
+  title="Gruppering"
+  description={
+    <Text>
+      Dersom flere Button-komponenter skal stå samlet og grupperes, kan en bruke Stack eller ButtonGroup. Sistnevnte er
+      spesialisert for knapper og inneholder relevante props:
+      <Code>size</Code>,<Code>colorScheme</Code>,<Code>variant</Code>,<Code>isDisabled</Code>,<Code>isAttached</Code>,<Code>
+        orientation
+      </Code>,<Code>spacing</Code>.
+    </Text>
+  }
+  story={<Canvas of={ButtonStories.ButtonGroup} />}
+/>
+
+</DocsContainer>
+
+<DocsHeading>Retningslinjer</DocsHeading>
+
+<DocsContainer>
+
+### Tekst på Button
+
+Den gjeldene anbefalingen for å gjøre en knapp godt lesbar er å bruke stor forbokstav og små bokstaver på resten av ordene (sentence case).
+
+### Antall handlinger
+
+En knapp bør ha en tydelig handlingsbeskrivelse. Hvis en knapp inneholder flere handlinger eller en lang beskrivelse, er det best å oppdele dette i flere separate knapper for å skape klarhet og forbedre brukeropplevelsen.
+Det vil si at det bør være én handling per knapp og heller flere klikk for brukeren.
+
+### Varianter i gruppe
+
+Bruk samme farge på knappene i en gruppe. Det er også viktig å være konsekvent med bruk av ikoner i en gruppe. Det vil si at alle knappene i en gruppe bør ha ikon eller ingen av dem.
+
+Bruk forskjellige varianter på knappene dersom handlingene har motsatt hensikt. For eksempel kan "Lagre" være <Code>primary</Code>, mens "Slett" er <Code>secondary</Code>.
+
+</DocsContainer>
+
+<DocsHeading>Props</DocsHeading>
 
 <Canvas of={ButtonStories.Button} />
 <Controls of={ButtonStories.Button} />
-
-## Størrelser
-
-<Canvas of={ButtonStories.ButtonSizes} />
-
-## Varianter
-
-<Canvas of={ButtonStories.ButtonVariants} />
-
-## States
-
-<Canvas of={ButtonStories.ButtonStates} />
-
-## Button med tekst og ikon
-
-<Canvas of={ButtonStories.ButtonWithIcon} />
-
-## Gruppering av Buttons (ButtonGroup)
-
-Dersom flere Button-komponenter skal stå samlet og grupperes, kan en bruke _Stack_ eller _ButtonGroup_.
-ButtonGroup har noen flere props som er tilpasset til å gruppere Buttons fremfor hva Stack har.
-
-Følgende props er gjeldende for ButtonGroup:
-
-- **size**, **colorScheme**, **variant** og **isDisabled**: Samme description som for _Button_-props. Ved å sette disse vil de bli gjeldene for alle knappene som er inni.
-- **isAttached**. _Type: Boolean (default false)_: smelter knappene sammen ved at border-radius fjernes i mellom Buttons (se eksempelet).
-- **orientation** _Type: String [horizontal(default), vertical]_: velge hvilken retning knappene skal plasseres
-- **spacing** _Type: Number (default '0.5rem')_: legger til space mellom knappene.
-
-<Canvas of={ButtonStories.ButtonGroup} />

apps/storybook/stories/components/button/Button.stories.tsx

@@ -7,7 +7,7 @@ const meta: Meta<typeof KvibButton> = {
   parameters: {
     docs: {
       story: { inline: true },
-      canvas: { sourceState: "shown" },
+      canvas: { sourceState: "hidden" },
     },
   },
   argTypes: {
@@ -59,13 +59,37 @@ type Story = StoryObj<typeof KvibButton>;
 
 export const Button: Story = {
   args: { children: "Klikk her" },
+  parameters: {
+    docs: {
+      canvas: {
+        sourceState: "shown",
+      },
+    },
+  },
   render: (args) => <KvibButton {...args}>{args.children}</KvibButton>,
 };
 
+export const ButtonColors: Story = {
+  args: {},
+  render: (args) => (
+    <KvibButtonGroup orientation="vertical">
+      <KvibButton {...args}>Nettside</KvibButton>
+      <KvibButton colorScheme="blue" {...args}>
+        Forvaltning
+      </KvibButton>
+    </KvibButtonGroup>
+  ),
+};
+
 export const ButtonVariants: Story = {
   args: { children: "Klikk her" },
   render: (args) => (
-    <KvibButtonGroup>
+    <KvibButtonGroup
+      justifyContent="space-between"
+      height={["fit-content", "fit-content", "28rem"]}
+      orientation="vertical"
+      gap="1rem"
+    >
       <KvibButton {...args} variant="primary">
         {args.children}
       </KvibButton>
@@ -96,7 +120,7 @@ export const ButtonStates: Story = {
   ),
 };
 
-export const ButtonWithIcon: Story = {
+export const ButtonIcons: Story = {
   args: { children: "Klikk her" },
   render: (args) => (
     <KvibButtonGroup>

packages/react/src/theme/components/button.ts

@@ -95,7 +95,7 @@ const variantOutline = defineStyle((props) => {
     },
     _active: {
       bg: `${c}.600`,
-      border: "0px",
+      borderColor: `${c}.600`,
       color: colors.white,
       _disabled: {
         bg: colors.white,