@fellesdatakatalog/ui 1.0.15 → 1.0.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fellesdatakatalog/ui",
-  "version": "1.0.15",
+  "version": "1.0.16",
   "description": "React UI components for Felles Datakatalog",
   "main": "dist/shared-ui.cjs",
   "module": "dist/shared-ui.es.js",
@@ -15,10 +15,19 @@
       "import": "./dist/shared-ui.es.js",
       "require": "./dist/shared-ui.cjs"
     },
-    "./dist/styles.css": "./dist/styles.css"
+    "./dist/styles.css": "./dist/styles.css",
+    "./src/components/core/tokens.scss": "./src/components/core/tokens.scss",
+    "./src/components/core/tokens": "./src/components/core/tokens.scss",
+    "./src/components/core/mixins.scss": "./src/components/core/mixins.scss",
+    "./src/components/core/mixins": "./src/components/core/mixins.scss",
+    "./src/components/core/ds-overrides.scss": "./src/components/core/ds-overrides.scss",
+    "./src/components/core/ds-overrides": "./src/components/core/ds-overrides.scss",
+    "./src/components/core/reset.css": "./src/components/core/reset.css",
+    "./src/components/core/reset": "./src/components/core/reset.css"
   },
   "files": [
     "dist",
+    "src",
     "README.md"
   ],
   "scripts": {

package/src/components/app-bar/app-bar.stories.tsx

@@ -0,0 +1,22 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { AppBar } from '.';
+
+const meta: Meta<typeof AppBar> = {
+    component: AppBar,
+    title: 'AppBar',
+    parameters: {
+        layout: 'centered',
+    },
+};
+
+export default meta;
+type Story = StoryObj<typeof AppBar>;
+
+export const Default: Story = {
+    render: () => (
+        <div style={{ padding: '1rem' }}>
+            <AppBar />
+        </div>
+    ),
+};

package/src/components/app-bar/index.tsx

@@ -0,0 +1,12 @@
+import { OrgLogo } from '../org-logo';
+import styles from './styles.module.scss';
+
+const AppBar = () => {
+    return (
+        <div className={styles.appBar}>
+            <OrgLogo />
+        </div>
+    );
+};
+
+export { AppBar };

package/src/components/app-bar/styles.module.scss

@@ -0,0 +1,7 @@
+.appBar {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    padding: 1rem;
+}

package/src/components/checkbox-group/checkbox-group.stories.tsx

@@ -0,0 +1,143 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { useState } from 'react';
+import CheckboxGroup from '.';
+
+const meta: Meta<typeof CheckboxGroup> = {
+  component: CheckboxGroup,
+  title: 'CheckboxGroup',
+  argTypes: {
+    legend: {
+      control: 'text',
+      description: 'The legend text for the fieldset',
+    },
+    description: {
+      control: 'text',
+      description: 'Optional description text',
+    },
+    error: {
+      control: 'text',
+      description: 'Error message to display',
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Disable all checkboxes',
+    },
+    readOnly: {
+      control: 'boolean',
+      description: 'Make all checkboxes read-only',
+    },
+    required: {
+      control: 'boolean',
+      description: 'Make all checkboxes required',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof CheckboxGroup>;
+
+const defaultOptions = [
+  { value: 'epost', label: 'E-post' },
+  { value: 'telefon', label: 'Telefon' },
+  { value: 'sms', label: 'SMS' },
+];
+
+export const Primary: Story = {
+  render: () => {
+    const [value, setValue] = useState<string[]>(['epost']);
+    return (
+      <CheckboxGroup
+        legend="Hvordan vil du helst at vi skal kontakte deg?"
+        description="Velg alle alternativene som er relevante for deg."
+        options={defaultOptions}
+        value={value}
+        onChange={setValue}
+      />
+    );
+  },
+};
+
+export const Uncontrolled: Story = {
+  render: () => (
+    <CheckboxGroup
+      legend="Hvordan vil du helst at vi skal kontakte deg?"
+      description="Velg alle alternativene som er relevante for deg."
+      options={defaultOptions}
+    />
+  ),
+};
+
+export const WithError: Story = {
+  render: () => (
+    <CheckboxGroup
+      legend="Hvordan vil du helst at vi skal kontakte deg?"
+      options={defaultOptions}
+      error="Du må velge minst ett alternativ."
+      required
+    />
+  ),
+};
+
+export const Disabled: Story = {
+  render: () => (
+    <CheckboxGroup
+      legend="Hvordan vil du helst at vi skal kontakte deg?"
+      options={defaultOptions}
+      disabled
+    />
+  ),
+};
+
+export const ReadOnly: Story = {
+  render: () => (
+    <CheckboxGroup
+      legend="Hvordan vil du helst at vi skal kontakte deg?"
+      options={defaultOptions}
+      value={['epost', 'telefon']}
+      readOnly
+    />
+  ),
+};
+
+export const WithIndeterminate: Story = {
+  render: () => {
+    const [value, setValue] = useState<string[]>([]);
+    return (
+      <CheckboxGroup
+        legend="Velg kommunikasjonskanaler"
+        options={[
+          {
+            value: 'all',
+            label: 'Velg alle',
+            allowIndeterminate: true,
+          },
+          { value: 'epost', label: 'E-post' },
+          { value: 'telefon', label: 'Telefon' },
+          { value: 'sms', label: 'SMS' },
+        ]}
+        value={value}
+        onChange={setValue}
+      />
+    );
+  },
+};
+
+export const WithDescriptions: Story = {
+  render: () => {
+    const [value, setValue] = useState<string[]>([]);
+    return (
+      <CheckboxGroup
+        legend="Velg dine interesser"
+        description="Du kan velge flere alternativer"
+        options={[
+          { value: 'sport', label: 'Sport', description: 'Fotball, håndball, og mer' },
+          { value: 'musikk', label: 'Musikk', description: 'Konserter og festivaler' },
+          { value: 'mat', label: 'Mat og drikke', description: 'Restauranter og oppskrifter' },
+        ]}
+        value={value}
+        onChange={setValue}
+      />
+    );
+  },
+};
+

package/src/components/checkbox-group/index.tsx

@@ -0,0 +1,105 @@
+import React, { type ReactNode } from 'react';
+import {
+  Fieldset,
+  Checkbox,
+  ValidationMessage,
+  type UseCheckboxGroupProps,
+  useCheckboxGroup,
+} from '@digdir/designsystemet-react';
+
+export interface CheckboxGroupProps extends Omit<UseCheckboxGroupProps, 'value' | 'onChange'> {
+  /**
+   * The legend text for the fieldset
+   */
+  legend?: ReactNode;
+  /**
+   * Optional description text for the fieldset
+   */
+  description?: ReactNode;
+  /**
+   * Array of checkbox options
+   */
+  options: Array<{
+    value: string;
+    label: string;
+    description?: string;
+    disabled?: boolean;
+    allowIndeterminate?: boolean;
+  }>;
+  /**
+   * Controlled value - array of selected checkbox values
+   */
+  value?: string[];
+  /**
+   * Callback when the selected values change
+   */
+  onChange?: (value: string[]) => void;
+  /**
+   * Optional className for the fieldset
+   */
+  className?: string;
+}
+
+/**
+ * CheckboxGroup component that wraps multiple Checkbox components in a Fieldset.
+ * Handles state management, onChange, and value automatically.
+ *
+ * @example
+ * <CheckboxGroup
+ *   legend="Hvordan vil du kontaktes?"
+ *   description="Velg alle relevante alternativer"
+ *   options={[
+ *     { value: 'epost', label: 'E-post' },
+ *     { value: 'telefon', label: 'Telefon' },
+ *     { value: 'sms', label: 'SMS' },
+ *   ]}
+ *   value={selectedValues}
+ *   onChange={(values) => setSelectedValues(values)}
+ * />
+ */
+export const CheckboxGroup = ({
+  legend,
+  description,
+  options,
+  value,
+  onChange,
+  error,
+  disabled,
+  readOnly,
+  required,
+  name,
+  className,
+}: CheckboxGroupProps) => {
+  const { getCheckboxProps, validationMessageProps } = useCheckboxGroup({
+    value,
+    onChange: onChange ? (nextValue) => onChange(nextValue) : undefined,
+    error,
+    disabled,
+    readOnly,
+    required,
+    name,
+  });
+
+  return (
+    <Fieldset className={className}>
+      {legend && <Fieldset.Legend>{legend}</Fieldset.Legend>}
+      {description && <Fieldset.Description>{description}</Fieldset.Description>}
+      {options.map((option) => (
+        <Checkbox
+          key={option.value}
+          label={option.label}
+          description={option.description}
+          disabled={option.disabled}
+          {...getCheckboxProps({
+            value: option.value,
+            allowIndeterminate: option.allowIndeterminate,
+          })}
+        />
+      ))}
+      {error && <ValidationMessage {...validationMessageProps} />}
+    </Fieldset>
+  );
+};
+
+export default CheckboxGroup;
+

package/src/components/copy-button/copy-button.stories.tsx

@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import CopyButton from '.';
+
+const meta: Meta<typeof CopyButton> = {
+    component: CopyButton,
+    title: 'CopyButton',
+};
+
+export default meta;
+type Story = StoryObj<typeof CopyButton>;
+
+export const Primary: Story = {
+    parameters: {
+        nextjs: {
+            appDirectory: true,
+        },
+    },
+    render: () => (
+        <div style={{ padding: '1rem' }}>
+            <CopyButton
+                copyLabel={'Kopier'}
+                copiedLabel={'Kopiert!'}
+                copyOnClick={'Tekst å kopiere'}
+            />
+        </div>
+    ),
+};

package/src/components/copy-button/index.tsx

@@ -0,0 +1,54 @@
+'use client';
+
+import { useState } from 'react';
+import { Button, type ButtonProps, Tooltip } from '@digdir/designsystemet-react';
+import { FilesIcon, CheckmarkCircleFillIcon } from '@navikt/aksel-icons';
+import HStack from '../hstack';
+
+type CopyButtonProps = {
+    copyLabel: string;
+    copiedLabel: string;
+    copyOnClick: string;
+} & ButtonProps & React.HTMLAttributes<HTMLButtonElement>;
+
+const CopyButton = ({ copyLabel, copiedLabel, copyOnClick, ...props }: CopyButtonProps) => {
+    const [clicked, setClicked] = useState(false);
+
+    const copyToClipboard = (text: string) => {
+        setClicked(true);
+        navigator.clipboard.writeText(text);
+    };
+
+    return (
+        <Tooltip
+            // @ts-expect-error: ignore complaint that Element cannot be set as content
+            content={
+                clicked ? (
+                    <HStack>
+                        <CheckmarkCircleFillIcon
+                            color='#D1F4E1'
+                            fontSize='1.2em'
+                        />
+                        {copiedLabel}
+                    </HStack>
+                ) : (
+                    copyLabel
+                )
+            }
+            placement='top'
+        >
+            <Button
+                data-size='sm'
+                variant='secondary'
+                onClick={() => copyToClipboard(copyOnClick)}
+                onMouseOver={() => setClicked(false)}
+                {...props}
+            >
+                <FilesIcon aria-hidden />
+                <span className={'sr-only'}>{copyLabel}</span>
+            </Button>
+        </Tooltip>
+    );
+};
+
+export default CopyButton;

package/src/components/core/ds-overrides.scss

@@ -0,0 +1,105 @@
+@use './mixins' as core-mixins;
+
+/*
+    Remove borders when table only has one row and data-border is false or missing
+*/
+.ds-table {
+    &:not([data-border='true']) {
+        tr:only-child {
+            td {
+                border: 0;
+            }
+        }
+    }
+}
+
+/*
+    Give Alerts proper content spacing
+*/
+.ds-alert {
+    @include core-mixins.article();
+}
+
+/*
+    Alert disables icon when first-child is heading, this fix also removes
+    left extra left padding when icon is disabled/hidden
+*/
+.ds-alert {
+    &:has(> :is(h1, h2, h3, h4, h5, h6):first-child) {
+        padding-inline-start: var(--ds-size-6);
+    }
+}
+
+/*
+    Remove dark link focus style on link button focus
+*/
+.ds-link {
+    &.ds-button {
+        &:focus-visible {
+            // Set appropriate background on various buttons
+            &[data-variant='primary'] {
+                background: var(--ds-color-accent-base-default);
+            }
+            &[data-variant='secondary'],
+            &[data-variant='tertiary'] {
+                background: transparent;
+                color: var(--ds-color-accent-text-subtle);
+            }
+        }
+    }
+}
+
+/*
+    Remove link styling for links missing href attribute
+*/
+.ds-link {
+    &:not([href]) {
+        color: var(--fdk-color-text);
+        text-decoration: none;
+    }
+}
+
+/*
+    DS override: Disable :visited link styling for links and link buttons
+*/
+.ds-link {
+    &:not(.ds-button) {
+        // Target only passive state
+        &:visited:not(:hover):not(:focus):not(:focus-visible):not(:active) {
+            color: var(--ds-color-text-subtle);
+        }
+    }
+    &.ds-button {
+        // Target only passive state
+        &:visited:not(:hover):not(:focus):not(:focus-visible):not(:active) {
+            color: var(--dsc-button-color);
+        }
+    }
+}
+
+/*
+    Make icons in links have same color as text
+*/
+.ds-link {
+    svg {
+        fill: currentColor;
+    }
+}
+
+/*
+    Disable pointer events on SVG icons inside buttons to prevent click interference
+*/
+.ds-button {
+    svg {
+        pointer-events: none;
+    }
+}
+
+/*
+    Hack to prevent underline on links inside tags
+*/
+.ds-tag {
+    a:not(:hover) {
+        text-decoration: none;
+    }
+}

package/src/components/core/mixins.scss

@@ -0,0 +1,143 @@
+@mixin sr-only {
+    border: 0;
+    clip: rect(0 0 0 0);
+    height: 1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    white-space: nowrap;
+    width: 1px;
+}
+
+@mixin focus-inline {
+    background: var(--ds-color-focus-outer);
+    color: var(--ds-color-focus-inner);
+    outline: 2px solid transparent;
+}
+
+@mixin focus-block {
+    box-shadow: var(--_ds--focus, var(--dsc-focus-boxShadow));
+    outline: var(--_ds--focus, var(--dsc-focus-outline));
+    outline-offset: var(--_ds--focus, var(--ds-border-width-focus));
+}
+
+/*
+    Remember to set data-color-scheme='dark' on element or container 
+    so that focus-block color tokens are correct.
+*/
+@mixin focus-block-dark {
+    @include focus-block();
+    background: transparent;
+    color: var(--fdk-color-link-negative);
+}
+
+@mixin article {
+    line-height: 1.5em;
+
+    > * + * {
+        margin-top: 1rem;
+    }
+
+    > * + div {
+        margin: 2rem 0;
+
+        &:last-child {
+            margin-bottom: 0;
+        }
+    }
+
+    > h1,
+    > h2,
+    > h3,
+    > h4,
+    > h5,
+    > h6 {
+        font-weight: 500;
+        margin-bottom: 1em;
+        line-height: 1.25em;
+    }
+
+    > h1 {
+        font-size: 2rem;
+    }
+
+    > h2 {
+        font-size: 1.5rem;
+    }
+
+    > h3 {
+        font-size: 1.25rem;
+    }
+
+    > h4 {
+        font-size: 1.125rem;
+    }
+
+    > h1,
+    > h2,
+    > h3,
+    > h4,
+    > h5 {
+        &:not(:first-child) {
+            margin-top: 1.5em;
+        }
+    }
+
+    ul,
+    ol {
+        &:not([class]) {
+            list-style: none;
+            padding: 0 0 0 1.25rem;
+        }
+    }
+
+    ul,
+    ol {
+        &:not([class]) {
+            li {
+                margin-bottom: 0.5rem;
+            }
+        }
+    }
+
+    ul {
+        &:not([class]) {
+            list-style: disc;
+        }
+    }
+
+    ol {
+        &:not([class]) {
+            list-style: decimal;
+        }
+    }
+
+    hr {
+        height: 1px;
+        border: 0;
+        background: var(--fds-semantic-border-neutral-subtle);
+    }
+
+    img {
+        max-width: 100%;
+        padding: 0.5rem;
+        border: 1px solid #eee;
+    }
+
+    code {
+        &:not([class]) {
+            background: rgba(0, 0, 0, 0.05);
+            font-size: 0.85em;
+            padding: 0.2em 0.4em;
+            white-space: break-spaces;
+            border-radius: 6px;
+            color: #444;
+        }
+    }
+
+    pre {
+        > div:focus-visible {
+            @include focus-block();
+        }
+    }
+}