From 8db410a2b938e3240f09b71e34a524fbb4ebe459 Mon Sep 17 00:00:00 2001
From: Barsnes <tobias.barsnes@digdir.no>
Date: Wed, 5 Jun 2024 13:44:25 +0200
Subject: [PATCH] update showcase in SB

---
 apps/storybook/preview.tsx                  |   3 +
 packages/css/card.css                       |   3 +
 packages/react/stories/showcase.module.css  | 120 ++++-------
 packages/react/stories/showcase.stories.tsx | 219 +++++++++++++++-----
 packages/react/stories/testing.stories.tsx  |  13 ++
 5 files changed, 219 insertions(+), 139 deletions(-)

diff --git a/apps/storybook/preview.tsx b/apps/storybook/preview.tsx
index 98e5449e9a..e3e6024b43 100644
--- a/apps/storybook/preview.tsx
+++ b/apps/storybook/preview.tsx
@@ -162,6 +162,9 @@ const preview: Preview = {
     viewport: {
       viewports,
     },
+    backgrounds: {
+      disable: true,
+    },
   },
 };
 
diff --git a/packages/css/card.css b/packages/css/card.css
index e6299942c1..e5cbc4e741 100644
--- a/packages/css/card.css
+++ b/packages/css/card.css
@@ -74,6 +74,7 @@
     font: var(--ds-typography-paragraph-md);
     font-family: inherit;
     padding: var(--ds-spacing-2) 0;
+    color: inherit;
   }
 
   .fds-card__content {
@@ -88,6 +89,7 @@
     font: var(--ds-typography-heading-md);
     font-family: inherit;
     padding: var(--ds-spacing-2) 0;
+    color: inherit;
   }
 
   .fds-card--link h1,
@@ -99,6 +101,7 @@
     text-decoration: underline;
     text-decoration-thickness: max(1px, 0.0625rem, 0.1025em);
     text-underline-offset: max(6px, 0.25rem, 0.22em);
+    color: inherit;
   }
 
   .fds-card--neutral {
diff --git a/packages/react/stories/showcase.module.css b/packages/react/stories/showcase.module.css
index a3f8e83f1d..0d665444ad 100644
--- a/packages/react/stories/showcase.module.css
+++ b/packages/react/stories/showcase.module.css
@@ -1,16 +1,19 @@
 .components {
   width: 100%;
   display: grid;
-  grid-template-columns: repeat(5, 1fr);
+  grid-template-columns: repeat(4, 1fr);
   gap: var(--ds-spacing-8);
   max-width: 1440px;
   margin: 0 auto;
+  background-color: var(--ds-color-neutral-background-default);
+  border-radius: var(--ds-border-radius-md);
+  padding: 1rem;
 }
 
-.components > * {
-  border: 1px solid var(--ds-color-accent-base-default);
+.card {
+  background-color: var(--ds-color-neutral-background-subtle);
   border-radius: var(--ds-border-radius-md);
-  padding: 16px;
+  padding: 24px;
 }
 
 .cardTitle {
@@ -18,49 +21,53 @@
 }
 
 .checkbox {
+  grid-column: span 2;
   padding-bottom: 16px;
-  grid-column: 1;
 }
 
-.login {
-  grid-column: 2;
+.user {
+  grid-column: span 2;
 }
 
 .tableContainer {
-  grid-column: 3 / 6;
+  grid-column: span 4;
 }
 
 .help {
-  grid-column: 1 / 3;
+  grid-column: span 4;
 }
 
-.tags {
-  grid-column: 3;
+.radio {
+  grid-column: span 2;
 }
 
-.radios {
-  grid-column: 5;
+.tag {
+  grid-column: span 2;
 }
 
 .switches {
-  grid-column: 4;
+  grid-column: span 2;
+}
+
+.combobox {
+  grid-column: span 2;
 }
 
 .tabs {
+  grid-column: span 4;
   display: flex;
   gap: 16px;
   flex-direction: column;
-  grid-column: 1 / 3;
 }
 
 .faq {
-  grid-column: 4 / 6;
+  grid-column: span 4;
 }
 
 .userLink {
-  text-align: right;
-  margin-top: var(--ds-spacing-5);
+  margin-top: 20px;
   margin-left: auto;
+  font-size: 16px;
 }
 
 .userTitle {
@@ -80,6 +87,10 @@
   margin-top: -7px;
 }
 
+.tabs button {
+  min-height: 40px;
+}
+
 .table {
   width: 100%;
   margin-bottom: 24px;
@@ -102,6 +113,7 @@
   height: 36px;
   width: 36px;
   border-radius: 50%;
+  box-shadow: 0 0 4px #353535;
 }
 
 .tableAction {
@@ -129,6 +141,7 @@
 }
 
 .helpCards {
+  grid-column: 1 / 6;
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 20px;
@@ -160,77 +173,14 @@
   margin-top: 16px;
 }
 
-.accordion > div button {
-  border-top: 1px solid var(--brandThree6);
-  border-radius: 0;
-}
-
-.accordion > div:first-child button {
-  border: none;
-  border-radius: 4px 4px 0 0;
-}
-
-.footerOne {
-  background-color: var(--brandOne9);
-  background-color: white;
-}
-
-.footerOne h1 {
-  color: var(--brandOne14);
-}
-
-.footerOne a {
-  color: var(--brandOne15);
-}
-
-.footerTwo {
-  background-color: var(--brandTwo9);
-}
-
-.footerTwo h1 {
-  color: var(--brandTwo14);
-}
-
-.footerTwo a {
-  color: var(--brandTwo15);
-}
-
-.footerThree {
-  background-color: var(--brandThree9);
-}
-
-.footerThree h1 {
-  color: var(--brandThree14);
-}
-
-.footerThree a {
-  color: var(--brandThree15);
-}
-
-.footerHeading {
-  margin-bottom: 14px;
-}
-
-.footerList {
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-}
-
 .switchGroup {
   display: flex;
   gap: 26px;
   flex-direction: column;
 }
 
-.switchHeading {
-  margin-bottom: 12px;
-}
-
-.switchParagraph {
-  margin-bottom: 20px;
-}
-
-.panel {
-  background-color: white;
+.toggleCombo {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ds-spacing-2);
 }
diff --git a/packages/react/stories/showcase.stories.tsx b/packages/react/stories/showcase.stories.tsx
index f20007d95a..f65a06f75f 100644
--- a/packages/react/stories/showcase.stories.tsx
+++ b/packages/react/stories/showcase.stories.tsx
@@ -20,6 +20,9 @@ import {
   Paragraph,
   Accordion,
   Switch,
+  Combobox,
+  ToggleGroup,
+  Tooltip,
 } from '../src';
 
 import classes from './showcase.module.css';
@@ -32,7 +35,7 @@ export const Showcase: StoryFn = () => {
   const [radioValue, setRadioValue] = useState('vanilje');
   return (
     <div className={classes.components}>
-      <div className={cl(classes.checkbox)}>
+      <div className={cl(classes.card, classes.checkbox)}>
         <Checkbox.Group
           error=''
           legend='Handleliste'
@@ -42,16 +45,28 @@ export const Showcase: StoryFn = () => {
           <Checkbox value='telefon'>To liter Farris</Checkbox>
           <Checkbox
             value='sms'
-            checked
+            defaultChecked
           >
             Blomkål
           </Checkbox>
+          <Checkbox
+            value='sms'
+            defaultChecked
+          >
+            Pizza
+          </Checkbox>
+          <Checkbox
+            value='sms'
+            defaultChecked
+          >
+            Tre liter lettmelk
+          </Checkbox>
           <Divider />
           <Checkbox value='sms'>2kg smågodt</Checkbox>
           <Checkbox value='sms'>10 poser med Smash</Checkbox>
         </Checkbox.Group>
       </div>
-      <div className={classes.login}>
+      <div className={cl(classes.card, classes.user)}>
         <Heading
           className={cl(classes.cardTitle, classes.userTitle)}
           size='xs'
@@ -65,12 +80,24 @@ export const Showcase: StoryFn = () => {
           placeholder='Ola Normann'
           className={classes.userField}
         />
-        <Link
-          href='#'
-          className={classes.userLink}
+        <Textfield
+          type='email'
+          label='E-post'
+          size='sm'
+          placeholder='ola@norge.no'
+          className={classes.userField}
+        />
+        <Tooltip
+          content='Trykk for å få hjelp'
+          portal={false}
         >
-          Glemt passord?
-        </Link>
+          <Link
+            href='#'
+            className={classes.userLink}
+          >
+            Glemt passord?
+          </Link>
+        </Tooltip>
         <Button
           fullWidth
           size='sm'
@@ -79,7 +106,7 @@ export const Showcase: StoryFn = () => {
           Opprett ny bruker
         </Button>
       </div>
-      <div className={cl(classes.tableContainer)}>
+      <div className={cl(classes.card, classes.tableContainer)}>
         <Heading
           className={classes.cardTitle}
           size='2xs'
@@ -91,7 +118,6 @@ export const Showcase: StoryFn = () => {
             <NativeSelect
               label=''
               size='sm'
-              className={classes.tableSelect}
             >
               <option value='blank'>Velg handling</option>
               <option value='everest'>Dupliser</option>
@@ -116,6 +142,7 @@ export const Showcase: StoryFn = () => {
         </div>
         <Table
           size='sm'
+          border
           className={classes.table}
         >
           <Table.Head>
@@ -140,8 +167,8 @@ export const Showcase: StoryFn = () => {
               <Table.Cell className={classes.tableCell}>
                 <img
                   className={classes.tableImg}
-                  src='/img/avatars/female1.png'
-                  alt='Bilde av dame'
+                  src='img/avatars/female1.png'
+                  alt=''
                 />
                 Lise Nordmann
               </Table.Cell>
@@ -152,8 +179,8 @@ export const Showcase: StoryFn = () => {
               <Table.Cell className={classes.tableCell}>
                 <img
                   className={classes.tableImg}
-                  src='/img/avatars/male2.png'
-                  alt='Bilde av mann'
+                  src='img/avatars/male2.png'
+                  alt=''
                 />
                 Ola Nordmann
               </Table.Cell>
@@ -171,7 +198,7 @@ export const Showcase: StoryFn = () => {
           totalPages={6}
         />
       </div>
-      <div className={cl(classes.help)}>
+      <div className={cl(classes.card, classes.help)}>
         <Heading
           size='xs'
           className={classes.helpHeading}
@@ -195,17 +222,37 @@ export const Showcase: StoryFn = () => {
               Most provide as with carried business are much better more the.
             </Card.Content>
           </Card>
-          <Card color='brand3'>
-            <Card.Header className={classes.helpHeader}>
-              <Heading size='2xs'>Mat og helse</Heading>
-            </Card.Header>
-            <Card.Content className={cl(classes.helpContent)}>
-              Most provide as with carried business are much better more the.
-            </Card.Content>
+          <Card
+            color='brand3'
+            isLink
+            asChild
+          >
+            <a href='#preview'>
+              <Card.Header className={classes.helpHeader}>
+                <Heading size='2xs'>Mat og helse</Heading>
+              </Card.Header>
+              <Card.Content className={cl(classes.helpContent)}>
+                Lenke til artikkel om mat og helse, der du kan lese mer om alt.
+              </Card.Content>
+            </a>
           </Card>
         </div>
       </div>
-      <div className={classes.tags}>
+      <div className={cl(classes.card, classes.radio)}>
+        <Radio.Group
+          error=''
+          legend='Hvilken iskremsmak er best?'
+          size='sm'
+          value={radioValue}
+          onChange={(e: string) => setRadioValue(e)}
+        >
+          <Radio value='vanilje'>Vanilje</Radio>
+          <Radio value='jordbær'>Jordbær</Radio>
+          <Radio value='sjokolade'>Sjokolade</Radio>
+          <Radio value='spiser-ikke-is'>Jeg spiser ikke iskrem</Radio>
+        </Radio.Group>
+      </div>
+      <div className={cl(classes.card, classes.tag)}>
         <Heading size='xs'>Emner</Heading>
         <div className={classes.tagList}>
           <Tag
@@ -238,56 +285,104 @@ export const Showcase: StoryFn = () => {
           >
             Utenriks
           </Tag>
-          {/* <Tag color="info" size="small">
+          <Tag
+            color='info'
+            size='sm'
+          >
             Helse og velvære
           </Tag>
-          <Tag color="danger" size="small">
+          <Tag
+            color='danger'
+            size='sm'
+          >
             PC Gaming
           </Tag>
-          <Tag color="warning" size="small">
+          <Tag
+            color='warning'
+            size='sm'
+          >
             Trening og livsstil
-          </Tag> */}
+          </Tag>
         </div>
       </div>
-      <div className={classes.switches}>
+      <div className={cl(classes.card, classes.switches)}>
         <Heading
           size='xs'
-          className={cl(classes.footerHeading, classes.switchHeading)}
+          spacing
         >
           Innstillinger
         </Heading>
         <Paragraph
           size='sm'
-          className={classes.switchParagraph}
+          spacing
         >
           Her kan du justere på innstillingene dine
         </Paragraph>
         <div className={classes.switchGroup}>
+          <Switch
+            size='sm'
+            defaultChecked
+          >
+            TV-visning
+          </Switch>
           <Switch size='sm'>Desktopvisning</Switch>
           <Switch
             size='sm'
-            checked
+            defaultChecked
+            readOnly
           >
             Tabletvisning
           </Switch>
-          <Switch size='sm'>Mobilvisning</Switch>
+          <Switch
+            size='sm'
+            disabled
+          >
+            Mobilvisning
+          </Switch>
         </div>
       </div>
-      <div className={classes.radios}>
-        <Radio.Group
-          error=''
-          legend='Hvilken iskremsmak er best?'
+      <div className={cl(classes.card, classes.combobox)}>
+        <Heading
+          size='xs'
+          spacing
+        >
+          Hvor er du fra?
+        </Heading>
+        <Paragraph
           size='sm'
-          value={radioValue}
-          onChange={(e) => setRadioValue(e)}
+          spacing
         >
-          <Radio value='vanilje'>Vanilje</Radio>
-          <Radio value='jordbær'>Jordbær</Radio>
-          <Radio value='sjokolade'>Sjokolade</Radio>
-          <Radio value='spiser-ikke-is'>Jeg spiser ikke iskrem</Radio>
-        </Radio.Group>
+          Svar under så finner vi flyreise
+        </Paragraph>
+        <div className={classes.toggleCombo}>
+          <ToggleGroup
+            defaultValue='norway'
+            size='sm'
+          >
+            <ToggleGroup.Item value='norway'>Norge</ToggleGroup.Item>
+            <ToggleGroup.Item value='sweden'>Sverige</ToggleGroup.Item>
+            <ToggleGroup.Item value='utlandet'>Utlandet</ToggleGroup.Item>
+          </ToggleGroup>
+          <Combobox
+            description='Velg et sted'
+            label='Hvor går reisen?'
+            size='sm'
+            portal={false}
+            multiple
+          >
+            <Combobox.Empty>Fant ingen treff</Combobox.Empty>
+            <Combobox.Option value='leikanger'>Leikanger</Combobox.Option>
+            <Combobox.Option value='oslo'>Oslo</Combobox.Option>
+            <Combobox.Option value='bronnoysund'>Brønnøysund</Combobox.Option>
+            <Combobox.Option value='stavanger'>Stavanger</Combobox.Option>
+            <Combobox.Option value='trondheim'>Trondheim</Combobox.Option>
+            <Combobox.Option value='tromso'>Tromsø</Combobox.Option>
+            <Combobox.Option value='bergen'>Bergen</Combobox.Option>
+            <Combobox.Option value='moirana'>Mo i Rana</Combobox.Option>
+          </Combobox>
+        </div>
       </div>
-      <div className={cl(classes.tabs)}>
+      <div className={cl(classes.card, classes.tabs)}>
         <Tabs
           defaultValue='value1'
           size='sm'
@@ -300,26 +395,42 @@ export const Showcase: StoryFn = () => {
         </Tabs>
         <Paragraph size='sm'>
           For å kunne bli registrert i{' '}
-          <Link href='#'>Frivillighetsregisteret</Link>, må organisasjonen drive
-          frivillig virksomhet. Det er bare foreninger,{' '}
-          <Link href='#'>stiftelser</Link> og som kan registreres. Virksomheten
-          kan ikke dele ut midler til fysiske personer. Virksomheten må ha et
-          styre. Virksomheten må være registrert i{' '}
-          <Link href='#'>Enhetsregisteret</Link> før den kan bli registrert.
+          <Link
+            href='#'
+            color='neutral'
+          >
+            Frivillighetsregisteret
+          </Link>
+          , må organisasjonen drive frivillig virksomhet. Det er bare
+          foreninger,{' '}
+          <Link
+            href='#'
+            color='neutral'
+          >
+            stiftelser
+          </Link>{' '}
+          og som kan registreres. Virksomheten kan ikke dele ut midler til
+          fysiske personer. Virksomheten må ha et styre. Virksomheten må være
+          registrert i{' '}
+          <Link
+            href='#'
+            color='neutral'
+          >
+            Enhetsregisteret
+          </Link>{' '}
+          før den kan bli registrert.
         </Paragraph>
       </div>
-
-      <div className={cl(classes.faq)}>
+      <div className={cl(classes.card, classes.faq)}>
         <Heading
           size='xs'
           className={classes.cardTitle}
         >
-          Ofte stillte spørmsål
+          Ofte stillte spørsmål
         </Heading>
         <Accordion
           color='brand3'
           border
-          className={classes.accordion}
         >
           <Accordion.Item>
             <Accordion.Header level={3}>
diff --git a/packages/react/stories/testing.stories.tsx b/packages/react/stories/testing.stories.tsx
index 6c2e4859ba..b161ecfd68 100644
--- a/packages/react/stories/testing.stories.tsx
+++ b/packages/react/stories/testing.stories.tsx
@@ -14,6 +14,19 @@ import {
 
 export default {
   title: 'Testing',
+  decorators: [
+    (Story) => (
+      <div
+        style={{
+          padding: 'var(--ds-spacing-4)',
+          background: 'var(--ds-color-neutral-background-default)',
+          borderRadius: 'var(--ds-border-radius-md)',
+        }}
+      >
+        <Story />
+      </div>
+    ),
+  ],
 } as Meta;
 
 export const MediumRow: StoryFn<{