@sebgroup/green-react 3.28.4 → 3.29.1-rc.20250730100346308

package/src/lib/icons/bankId.tsx

@@ -0,0 +1,87 @@
+import { randomId } from '@sebgroup/extract'
+import { IconProps } from '../../types/props'
+
+/**
+ * @deprecated
+ * This component is deprecated. Use the `gds-icon-bankid` component instead from `@sebgroup/green-react`.
+ */
+export const BankId = ({ fill, focusable, title, ...props }: IconProps) => {
+  let id
+  if (title) id = randomId()
+  return (
+    <svg
+      width="24"
+      height="24"
+      version="1.1"
+      xmlns="http://www.w3.org/2000/svg"
+      x="0px"
+      y="0px"
+      viewBox="140 265 321 304"
+      enable-background="new 140 265 321 304"
+      aria-hidden={props['aria-hidden']}
+      focusable={focusable}
+      aria-labelledby={id}
+    >
+      {title && <title id={id}>{title}</title>}
+      <g>
+        <path
+          fill={fill ? fill : '#479CBE'}
+          d="M241.9,423.6l13.2-83.2c-5.2,0-14.1,0-14.1,0c-6.6,0-15.1-3.7-17.6-10.5c-0.8-2.3-2.7-10.2,8.2-17.9
+		c3.9-2.7,6.4-5.7,6.9-8c0.5-2.4-0.1-4.5-1.8-6.1c-2.4-2.3-7.1-3.6-13.1-3.6c-10.1,0-17.2,5.8-17.9,10c-0.5,3.1,1.9,5.6,4,7.2
+		c6.3,4.7,7.8,11.5,3.9,17.9c-4,6.6-12.7,10.9-22,11c0,0-9.2,0-14.4,0c-1.2,8.1-20.8,132.3-22.3,142.1h78.1
+		c0.7-4.4,4.3-27.9,9.2-58.9H241.9z"
+        />
+        <path
+          fill={fill ? fill : '#00A5C3'}
+          d="M346.5,267.6H267l-10.6,67.3l13.5,0c7.4,0,14.4-3.4,17.4-8.3c1-1.6,1.4-3,1.4-4.3c0-2.8-1.9-4.9-3.8-6.3
+		c-5.2-3.9-6.3-8-6.3-10.9c0-0.6,0-1.1,0.1-1.6c1.1-7.1,10.7-14.8,23.4-14.8c7.6,0,13.4,1.8,16.9,5.1c3.1,2.9,4.3,7,3.4,11.3
+		c-1.1,5.1-6.2,9.3-9.1,11.4c-7.7,5.4-6.7,10.1-6.2,11.5c1.6,4.2,7.7,6.9,12.4,6.9H340c0,0,0,0,0,0.1c28,0.2,43,13.1,38.3,43.1
+		c-4.4,27.9-25.8,39.9-51.3,40.1l-10.1,64.4h14.9c62.9,0,114.3-40.4,124.4-104.2C468.7,299.2,418.5,267.6,346.5,267.6z"
+        />
+        <path
+          fill={fill ? fill : '#235971'}
+          d="M346.5,267.6H267l-10.6,67.3l13.5,0c7.4,0,14.4-3.4,17.4-8.3c1-1.6,1.4-3,1.4-4.3c0-2.8-1.9-4.9-3.8-6.3
+		c-5.2-3.9-6.3-8-6.3-10.9c0-0.6,0-1.1,0.1-1.6c1.1-7.1,10.7-14.8,23.4-14.8c7.6,0,13.4,1.8,16.9,5.1c3.1,2.9,4.3,7,3.4,11.3
+		c-1.1,5.1-6.2,9.3-9.1,11.4c-7.7,5.4-6.7,10.1-6.2,11.5c1.6,4.2,7.7,6.9,12.4,6.9H340c0,0,0,0,0,0.1c28,0.2,43,13.1,38.3,43.1
+		c-4.4,27.9-25.8,39.9-51.3,40.1l-10.1,64.4h14.9c62.9,0,114.3-40.4,124.4-104.2C468.7,299.2,418.5,267.6,346.5,267.6z"
+        />
+        <g>
+          <path
+            fill={fill ? fill : '#235971'}
+            d="M150.7,511.2h31.9c13.6,0,16.9,6.9,15.9,13.2c-0.8,5.1-4.3,8.9-10.3,11.4c7.6,2.9,10.6,7.4,9.5,14.5
+			c-1.4,8.9-9.1,15.5-19.2,15.5h-36.3L150.7,511.2z M171.8,533.8c6.2,0,9.1-3.3,9.7-7.2c0.6-4.2-1.3-7.1-7.5-7.1h-5.5l-2.2,14.3
+			H171.8z M168.4,557.4c6.4,0,10.1-2.6,11-7.9c0.7-4.6-1.9-7.3-8.1-7.3H165l-2.4,15.3H168.4z"
+          />
+          <path
+            fill={fill ? fill : '#235971'}
+            d="M242.4,566.2c-8.3,0.6-12.3-0.3-14.3-3.9c-4.4,2.7-9.3,4.1-14.5,4.1c-9.4,0-12.7-4.9-11.8-10.3
+			c0.4-2.6,1.9-5.1,4.3-7.2c5.2-4.5,18-5.1,23-8.5c0.4-3.8-1.1-5.2-5.8-5.2c-5.5,0-10.1,1.8-18,7.2l1.9-12.4
+			c6.8-4.9,13.4-7.2,21-7.2c9.7,0,18.3,4,16.7,14.6l-1.9,12c-0.7,4.2-0.5,5.5,4.2,5.6L242.4,566.2z M228,547.4
+			c-4.4,2.8-12.6,2.3-13.5,8.1c-0.4,2.7,1.3,4.7,4,4.7c2.6,0,5.8-1.1,8.4-2.9c-0.2-1-0.1-2,0.2-3.9L228,547.4z"
+          />
+          <path
+            fill={fill ? fill : '#235971'}
+            d="M257.9,523.5h16.6l-0.9,5.5c5.3-4.5,9.3-6.2,14.5-6.2c9.3,0,13.6,5.7,12.1,15l-4.3,27.9h-16.6l3.6-23.1
+			c0.7-4.2-0.6-6.2-3.8-6.2c-2.6,0-5,1.4-7.3,4.5l-3.8,24.7h-16.6L257.9,523.5z"
+          />
+          <path
+            fill={fill ? fill : '#235971'}
+            d="M313.1,511.2h16.6l-4.2,26.8l15.9-14.5h20.5l-20.4,18l16.4,24.2h-20.9l-12.6-19.5h-0.2l-3,19.5h-16.6
+			L313.1,511.2z"
+          />
+        </g>
+        <g>
+          <path
+            fill={fill ? fill : '#479CBE'}
+            d="M371.9,511.2H391l-8.4,54.5h-19.1L371.9,511.2z"
+          />
+          <path
+            fill={fill ? fill : '#479CBE'}
+            d="M400.3,511.2h27.3c21.1,0,27.2,15.3,25.2,28c-1.9,12.4-11.7,26.5-30.2,26.5h-30.8L400.3,511.2z M418,552.7
+			c9.3,0,14.4-4.6,15.9-14.3c1.1-7.2-1.1-14.3-11.4-14.3h-5.1l-4.4,28.6H418z"
+          />
+        </g>
+      </g>
+    </svg>
+  )
+}

package/src/lib/icons/check.tsx

@@ -0,0 +1,30 @@
+import React from 'react'
+
+import { randomId } from '@sebgroup/extract'
+import { IconProps } from '../../types/props'
+
+/**
+ *
+ * @deprecated
+ * This component is deprecated. Use `Check` instead from `@sebgroup/green-react`.
+ */
+export const Check = ({ focusable = false, title }: IconProps) => {
+  let id
+  if (title) id = randomId()
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+      focusable={focusable}
+      aria-labelledby={id}
+    >
+      {title && <title id={id}>{title}</title>}
+      <path
+        d="M17.6203 6.60836L9.40014 14.8285L6.37976 11.8081C6.23332 11.6617 5.99588 11.6617 5.84942 11.8081L4.96554 12.692C4.8191 12.8384 4.8191 13.0759 4.96554 13.2223L9.13495 17.3917C9.28138 17.5382 9.51882 17.5382 9.66529 17.3917L19.0344 8.02258C19.1809 7.87614 19.1809 7.63871 19.0344 7.49224L18.1506 6.60836C18.0041 6.46193 17.7667 6.46193 17.6203 6.60836Z"
+        fill="white"
+      />
+    </svg>
+  )
+}

package/src/lib/icons/chevronDown.tsx

@@ -0,0 +1,27 @@
+import React from 'react'
+
+import { randomId } from '@sebgroup/extract'
+import { IconProps } from '../../types/props'
+
+/**
+ * @deprecated
+ * This component is deprecated. Use `ChevronDown` instead from `@sebgroup/green-react`.
+ *
+ * */
+export const ChevronDown = ({ focusable = false, title }: IconProps) => {
+  let id
+  if (title) id = randomId()
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 448 512"
+      focusable={focusable}
+      aria-labelledby={id}
+    >
+      {title && <title id={id}>{title}</title>}
+      <path d="M441.9 167.3l-19.8-19.8c-4.7-4.7-12.3-4.7-17 0L224 328.2 42.9 147.5c-4.7-4.7-12.3-4.7-17 0L6.1 167.3c-4.7 4.7-4.7 12.3 0 17l209.4 209.4c4.7 4.7 12.3 4.7 17 0l209.4-209.4c4.7-4.7 4.7-12.3 0-17z" />
+    </svg>
+  )
+}

package/src/lib/icons/edit.tsx

@@ -0,0 +1,37 @@
+import React from 'react'
+
+import { randomId } from '@sebgroup/extract'
+import { IconProps } from '../../types/props'
+
+/**
+ * @deprecated
+ * This component is deprecated. Use `Edit` instead from `@sebgroup/green-react`.
+ */
+export const Edit = ({
+  focusable = false,
+  title,
+  fill = 'white',
+  width = 24,
+  height = 24,
+  ...props
+}: IconProps) => {
+  let id
+  if (title) id = randomId()
+  return (
+    <svg
+      width={width}
+      height={height}
+      viewBox="0 0 576 512"
+      xmlns="http://www.w3.org/2000/svg"
+      focusable={focusable}
+      aria-labelledby={id}
+      aria-hidden={props['aria-hidden']}
+    >
+      {title && <title id={id}>{title}</title>}
+      <path
+        fill={fill}
+        d="M402.3 344.9l32-32c5-5 13.7-1.5 13.7 5.7V464c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h273.5c7.1 0 10.7 8.6 5.7 13.7l-32 32c-1.5 1.5-3.5 2.3-5.7 2.3H48v352h352V350.5c0-2.1.8-4.1 2.3-5.6zm156.6-201.8L296.3 405.7l-90.4 10c-26.2 2.9-48.5-19.2-45.6-45.6l10-90.4L432.9 17.1c22.9-22.9 59.9-22.9 82.7 0l43.2 43.2c22.9 22.9 22.9 60 .1 82.8zM460.1 174L402 115.9 216.2 301.8l-7.3 65.3 65.3-7.3L460.1 174zm64.8-79.7l-43.2-43.2c-4.1-4.1-10.8-4.1-14.8 0L436 82l58.1 58.1 30.9-30.9c4-4.2 4-10.8-.1-14.9z"
+      />
+    </svg>
+  )
+}

package/src/lib/icons/index.ts

@@ -0,0 +1,8 @@
+export * from './bankId'
+export * from './check'
+export * from './chevronDown'
+export * from './square-exclamation'
+export * from './square-info'
+export * from './times'
+export * from './infoCircle'
+export * from './edit'

package/src/lib/icons/infoCircle.tsx

@@ -0,0 +1,29 @@
+import React from 'react'
+
+import { randomId } from '@sebgroup/extract'
+import { IconProps } from '../../types/props'
+
+/**
+ * @deprecated
+ * This component is deprecated. Use `InfoCircle` instead from `@sebgroup/green-react`.
+ */
+export const InfoCircle = ({
+  focusable = false,
+  title,
+  ...props
+}: IconProps) => {
+  let id
+  if (title) id = randomId()
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 512 512"
+      aria-labelledby={id}
+      aria-hidden={props['aria-hidden']}
+      focusable={focusable}
+    >
+      {title && <title id={id}>{title}</title>}
+      <path d="M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 448c-110.532 0-200-89.431-200-200 0-110.495 89.472-200 200-200 110.491 0 200 89.471 200 200 0 110.53-89.431 200-200 200zm0-338c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z" />
+    </svg>
+  )
+}

package/src/lib/icons/square-exclamation.tsx

@@ -0,0 +1,35 @@
+import React from 'react'
+
+import { randomId } from '@sebgroup/extract'
+import { IconProps } from '../../types/props'
+
+/**
+ * @deprecated
+ * This component is deprecated. Use `SquareExclamation` instead from `@sebgroup/green-react`.
+ */
+export const SquareExclamation = ({
+  focusable = false,
+  title,
+  ...props
+}: IconProps) => {
+  let id
+  if (title) id = randomId()
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden={props['aria-hidden']}
+      focusable={focusable}
+      aria-labelledby={id}
+    >
+      {title && <title id={id}>{title}</title>}
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M18.2857 4H5.71429C4.7675 4 4 4.7675 4 5.71429V18.2857C4 19.2325 4.7675 20 5.71429 20H18.2857C19.2325 20 20 19.2325 20 18.2857V5.71429C20 4.7675 19.2325 4 18.2857 4ZM10.8682 7.42857H13.1318C13.3777 7.42857 13.5731 7.635 13.5597 7.8805L13.2948 12.7376C13.2824 12.9649 13.0945 13.1429 12.8669 13.1429H11.1331C10.9055 13.1429 10.7176 12.9649 10.7052 12.7376L10.4402 7.8805C10.4269 7.635 10.6223 7.42857 10.8682 7.42857ZM12 17.0714C11.0927 17.0714 10.3571 16.3359 10.3571 15.4286C10.3571 14.5213 11.0927 13.7857 12 13.7857C12.9073 13.7857 13.6429 14.5213 13.6429 15.4286C13.6429 16.3359 12.9073 17.0714 12 17.0714Z"
+        fill="#333333"
+      />
+    </svg>
+  )
+}

package/src/lib/icons/square-info.tsx

@@ -0,0 +1,30 @@
+import { randomId } from '@sebgroup/extract'
+import { IconProps } from '../../types/props'
+
+/**
+ * @deprecated
+ * This component is deprecated. Use `SquareInfo` instead from `@sebgroup/green-react`.
+ */
+export const SquareInfo = ({
+  focusable = false,
+  title,
+  ...props
+}: IconProps) => {
+  let id
+  if (title) id = randomId()
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-labelledby={id}
+      aria-hidden={props['aria-hidden']}
+      focusable={focusable}
+    >
+      <path
+        d="M18.2857 4H5.71429C4.7675 4 4 4.7675 4 5.71429V18.2857C4 19.2325 4.7675 20 5.71429 20H18.2857C19.2325 20 20 19.2325 20 18.2857V5.71429C20 4.7675 19.2325 4 18.2857 4ZM12 7.07143C12.8284 7.07143 13.5 7.743 13.5 8.57143C13.5 9.39986 12.8284 10.0714 12 10.0714C11.1716 10.0714 10.5 9.39986 10.5 8.57143C10.5 7.743 11.1716 7.07143 12 7.07143ZM14 16.1429C14 16.3795 13.8081 16.5714 13.5714 16.5714H10.4286C10.1919 16.5714 10 16.3795 10 16.1429V15.2857C10 15.049 10.1919 14.8571 10.4286 14.8571H10.8571V12.5714H10.4286C10.1919 12.5714 10 12.3795 10 12.1429V11.2857C10 11.049 10.1919 10.8571 10.4286 10.8571H12.7143C12.951 10.8571 13.1429 11.049 13.1429 11.2857V14.8571H13.5714C13.8081 14.8571 14 15.049 14 15.2857V16.1429Z"
+        fill="#333333"
+      />
+    </svg>
+  )
+}

package/src/lib/icons/times.tsx

@@ -0,0 +1,18 @@
+import { randomId } from '@sebgroup/extract'
+import { IconProps } from '../../types/props'
+
+export const Times = ({ focusable = false, title }: IconProps) => {
+  let id
+  if (title) id = randomId()
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 320 512"
+      focusable={focusable}
+      aria-labelledby={id}
+    >
+      {title && <title id={id}>{title}</title>}
+      <path d="M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z" />
+    </svg>
+  )
+}

package/src/lib/in-page-wizard/inPageWizardStepCard.mdx

@@ -0,0 +1,51 @@
+import { Controls, Meta, Story, Canvas } from '@storybook/blocks'
+import { InPageWizardStepCard } from './inPageWizardStepCard'
+import { GroupedList, ListItem } from '../grouped-list'
+import { TextInput } from '../form/input/input.tsx'
+import { TextArea } from '../form'
+import { Check } from '../icons'
+import * as InPageWizardStepCardStories from './inPageWizardStepCard.stories';
+
+export const Template = ({ children, ...props }) => (
+  <InPageWizardStepCard {...props}>{children}</InPageWizardStepCard>
+)
+
+<Meta of={InPageWizardStepCardStories} />
+
+# InPageWizardStepCard
+
+With InPageWizardStepCard it is possible for a user to quickly create wizard steps. Status for each step has to be provided so that it has the correct styles and renders correct.
+
+## Default
+
+<Canvas of={InPageWizardStepCardStories.Default} />
+
+## Next button text
+
+<Canvas of={InPageWizardStepCardStories.NextButtonText} />
+
+## Next button icon
+
+<Canvas of={InPageWizardStepCardStories.NextButtonIcon} />
+
+<Canvas of={InPageWizardStepCardStories.NextButtonIconAlt} />
+
+## Hidden footer
+
+<Canvas of={InPageWizardStepCardStories.HiddenFooter} />
+
+## Edit button text
+
+<Canvas of={InPageWizardStepCardStories.EditText} />
+
+## Status
+
+<Canvas of={InPageWizardStepCardStories.Status} />
+
+## Example
+
+<Canvas of={InPageWizardStepCardStories.Example} />
+
+## Properties
+
+<Controls />

package/src/lib/in-page-wizard/inPageWizardStepCard.stories.tsx

@@ -0,0 +1,201 @@
+import React from 'react'
+
+import { TextInput } from '../form/input/input'
+import { TextArea } from '../form/textarea/textarea'
+import { GroupedList, ListItem } from '../grouped-list'
+import { IconArrowDown } from '../icon/icons/IconArrowDown'
+import { IconCheckmark } from '../icon/icons/IconCheckmark'
+import {
+  InPageWizardStepCard,
+  InPageWizardStepCardProps,
+} from './inPageWizardStepCard'
+
+const Template = ({ children, ...props }: InPageWizardStepCardProps) => (
+  <InPageWizardStepCard {...props}>{children}</InPageWizardStepCard>
+)
+
+export default {
+  title: 'Components/InPageWizardStepCard',
+  component: InPageWizardStepCard,
+}
+
+export const Default = {
+  render: Template.bind({}),
+  name: 'InPageWizardStepCard',
+
+  args: {
+    children: 'Active step default content.',
+    nextBtnText: 'Next',
+    stepStatus: 'IsActive',
+    stepText: 'Active step default text',
+    title: 'Active step default title',
+  },
+}
+
+export const NextButtonText = Template.bind({})
+NextButtonText.args = {
+  children: 'Active step textcontent.',
+  nextBtnText: 'My next button text',
+  stepStatus: 'IsActive',
+  stepText: 'Active step text text',
+  title: 'Active step text title',
+}
+
+export const NextButtonIcon = Template.bind({})
+NextButtonIcon.args = {
+  children: 'Active step icon content.',
+  nextBtnText: 'Next',
+  nextBtnIcon: <IconCheckmark />,
+  stepStatus: 'IsActive',
+  stepText: 'Active step icon text',
+  title: 'Active step icon title',
+}
+
+export const NextButtonIconAlt = Template.bind({})
+NextButtonIconAlt.args = {
+  children: 'Active step alt icon content.',
+  nextBtnText: 'Next',
+  nextBtnIcon: <IconArrowDown />,
+  stepStatus: 'IsActive',
+  stepText: 'Active step alt icon text',
+  title: 'Active step alt icon title',
+}
+
+
+export const HiddenFooter = Template.bind({})
+HiddenFooter.args = {
+  children: 'Active step hidden footer content.',
+  nextBtnText: 'Next',
+  nextBtnIcon: <IconCheckmark />,
+  stepStatus: 'IsActive',
+  stepText: 'Active step hidden footer text',
+  title: 'Active step hidden footer title',
+  hideFooter: true,
+}
+
+export const EditText = Template.bind({})
+EditText.args = {
+  children: 'Completed step edit button content.',
+  nextBtnText: 'Next',
+  editBtnText: 'Redigera',
+  stepStatus: 'IsComplete',
+  stepText: 'Completed step edit button text',
+  title: 'Completed step edit button title',
+}
+
+export const Status = ({ children, ...props }) => (
+  <div>
+    <InPageWizardStepCard
+      editBtnText="Edit"
+      nextBtnText="Nästa"
+      stepStatus="IsComplete"
+      stepText="Step 1 of 3"
+      title="Completed step"
+    >
+      Content of Step 1
+    </InPageWizardStepCard>
+
+    <InPageWizardStepCard
+      editBtnText="Edit"
+      nextBtnText="Next"
+      stepStatus="IsActive"
+      stepText="Step 2 of 3"
+      title="Active step"
+    >
+      Content of Step 2
+    </InPageWizardStepCard>
+
+    <InPageWizardStepCard
+      editBtnText="Edit"
+      nextBtnText="Nästa"
+      stepStatus="NotStarted"
+      stepText="Step 3 of 3"
+      title="Not started step"
+    >
+      Content of Step 3
+    </InPageWizardStepCard>
+  </div>
+)
+
+export const Example = ({ children, ...props }) => (
+  <div>
+    <InPageWizardStepCard
+      editBtnText="Edit"
+      nextBtnText="Nästa"
+      stepStatus="IsComplete"
+      stepText="Step 1 of 3"
+      title="Completed step"
+    >
+      <GroupedList>
+        <ListItem
+          style={{
+            display: 'flex',
+            flexDirection: 'column',
+            border: 'none',
+            padding: '.5rem 1rem',
+          }}
+        >
+          <div>
+            <b style={{ fontWeight: '500' }}>Summary key</b>
+          </div>
+
+          <div>Summary value</div>
+        </ListItem>
+
+        <ListItem
+          style={{
+            display: 'flex',
+            flexDirection: 'column',
+            border: 'none',
+            padding: '.5rem 1rem',
+          }}
+        >
+          <div>
+            <b style={{ fontWeight: '500' }}>Summary key</b>
+          </div>
+
+          <div>Summary value</div>
+        </ListItem>
+
+        <ListItem
+          style={{
+            display: 'flex',
+            flexDirection: 'column',
+            border: 'none',
+            padding: '.5rem 1rem',
+          }}
+        >
+          <div>
+            <b style={{ fontWeight: '500' }}>Summary key</b>
+          </div>
+
+          <div>Summary value</div>
+        </ListItem>
+      </GroupedList>
+    </InPageWizardStepCard>
+
+    <InPageWizardStepCard
+      editBtnText="Edit"
+      nextBtnText="Next"
+      stepStatus="IsActive"
+      stepText="Step 2 of 3"
+      title="Active step"
+    >
+      <TextInput label="Input 1" />
+
+      <TextInput label="Input 2" />
+
+      <TextArea label="Text area" />
+    </InPageWizardStepCard>
+
+    <InPageWizardStepCard
+      editBtnText="Edit"
+      nextBtnText="Nästa"
+      stepStatus="NotStarted"
+      stepText="Step 3 of 3"
+      title="Not started step"
+    >
+      Content of Step 3
+    </InPageWizardStepCard>
+  </div>
+)

package/src/lib/in-page-wizard/inPageWizardStepCard.tsx

@@ -0,0 +1,93 @@
+import { PropsWithChildren, ReactNode } from 'react'
+import classNames from 'classnames'
+
+import { Check, Edit } from '../icons'
+
+export interface InPageWizardStepCardProps extends PropsWithChildren {
+  /** Sub title for the title indicating 'Step X of Y'. */
+  stepText: string
+  /** Title of the step. */
+  title: string
+  /** Text on edit button. */
+  editBtnText?: string
+  /** Text on next button. */
+  nextBtnText?: string
+  /** Icon for next button. */
+  nextBtnIcon?: ReactNode
+  /** Status for the step.*/
+  stepStatus: 'NotStarted' | 'IsActive' | 'IsComplete'
+  /** Force hiding of footer, regardless of state. */
+  hideFooter?: boolean
+  /** Event for click on next button. */
+  onNextClick?: () => void
+  /** Event for click on edit button. */
+  onEditClick?: () => void
+  /** Testid for testing. */
+  dataTestid?: string
+}
+
+export const InPageWizardStepCard = ({
+  editBtnText = 'Edit',
+  onNextClick,
+  stepStatus,
+  stepText,
+  title,
+  children,
+  dataTestid,
+  hideFooter = false,
+  nextBtnIcon,
+  nextBtnText = 'Next',
+  onEditClick,
+}: InPageWizardStepCardProps) => {
+  const sectionClassName = classNames('gds-in-page-wizard-step-card', 'card', {
+    active: stepStatus === 'IsActive',
+    completed: stepStatus === 'IsComplete',
+  })
+
+  return (
+    <section className={sectionClassName} data-testid={dataTestid}>
+      <header className="gds-in-page-wizard-step-card__header">
+        <div className="gds-in-page-wizard-step-card__header__icon">
+          <Check />
+        </div>
+        <div className="gds-in-page-wizard-step-card__header__progress">
+          {stepText}
+        </div>
+        <div className="gds-in-page-wizard-step-card__header__title">
+          <h2>{title}</h2>
+        </div>
+
+        {stepStatus === 'IsComplete' && (
+          <div className="gds-in-page-wizard-step-card__header__edit">
+            <button className="secondary small" onClick={onEditClick}>
+              <Edit fill={'var(--color)'} height={16} width={16} />
+              {editBtnText}
+            </button>
+          </div>
+        )}
+      </header>
+
+      {(stepStatus === 'IsActive' || stepStatus === 'IsComplete') && (
+        <div className="gds-in-page-wizard-step-card__content">{children}</div>
+      )}
+
+      {stepStatus === 'IsActive' && !hideFooter && (
+        <footer className="gds-in-page-wizard-step-card__footer">
+          <button className="primary" onClick={onNextClick}>
+            {nextBtnText}
+            {nextBtnIcon}
+          </button>
+        </footer>
+      )}
+
+      {stepStatus === 'IsComplete' && !hideFooter && (
+        <footer className="gds-in-page-wizard-step-card__footer gds-in-page-wizard-step-card__footer--edit">
+          <button className="secondary" onClick={onEditClick}>
+            <Edit fill={'var(--color)'} height={16} width={16} />
+            {editBtnText}
+          </button>
+        </footer>
+      )}
+    </section>
+  )
+}

package/src/lib/in-page-wizard/index.ts

@@ -0,0 +1 @@
+export * from './inPageWizardStepCard'