@fellesdatakatalog/ui 1.0.14 → 1.0.16

package/src/components/tag-list/index.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import cn from 'classnames';
+import { Tag } from '@digdir/designsystemet-react';
+import styles from './styles.module.scss';
+
+export type TagListProps = {
+    maxTags?: number;
+    'data-size'?: string;
+};
+
+const TagList = ({ children, className, maxTags, 'data-size': dataSize, ...props }: TagListProps & React.HTMLAttributes<HTMLUListElement>) => {
+    const childArray = React.Children.toArray(children);
+    if (!childArray.length) return null;
+    return (
+        <ul
+            className={cn(styles.tagList, className)}
+            {...props}
+        >
+            {childArray
+                .filter((child) => Boolean(child))
+                .slice(0, maxTags ?? childArray.length)
+                .map((child, i) => {
+                    const key = React.isValidElement(child) && child.key != null 
+                        ? child.key 
+                        : i;
+                    return <li key={key}>{child}</li>;
+                })}
+            {maxTags && maxTags < childArray.length && (
+                <li>
+                    <Tag data-size={dataSize || 'sm'}>
+                        <span>+{childArray.length - maxTags}</span>
+                    </Tag>
+                </li>
+            )}
+        </ul>
+    );
+};
+
+export default TagList;

package/src/components/tag-list/styles.module.scss

@@ -0,0 +1,8 @@
+.tagList {
+    display: flex;
+    gap: 0.5rem;
+    font-weight: normal;
+    font-size: 0.8em;
+    align-items: center;
+    flex-wrap: wrap;
+}

package/src/components/tag-list/tag-list.stories.tsx

@@ -0,0 +1,107 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Tag } from '@digdir/designsystemet-react';
+import TagList from '.';
+
+const meta: Meta<typeof TagList> = {
+    component: TagList,
+    title: 'TagList',
+};
+
+export default meta;
+type Story = StoryObj<typeof TagList>;
+
+export const Primary: Story = {
+    parameters: {
+        nextjs: {
+            appDirectory: true,
+        },
+    },
+    render: () => (
+        <>
+            <div style={{ padding: '1rem' }}>
+                <TagList>
+                    <Tag data-size='sm'>My tag</Tag>
+                    <Tag
+                        data-size='sm'
+                        color='success'
+                    >
+                        My tag
+                    </Tag>
+                    <Tag
+                        data-size='sm'
+                        color='neutral'
+                    >
+                        My tag
+                    </Tag>
+                    <Tag
+                        data-size='sm'
+                        color='warning'
+                    >
+                        My tag
+                    </Tag>
+                    <Tag
+                        data-size='sm'
+                        color='danger'
+                    >
+                        My tag
+                    </Tag>
+                </TagList>
+            </div>
+        </>
+    ),
+};
+
+export const WithMaxTags: Story = {
+    parameters: {
+        nextjs: {
+            appDirectory: true,
+        },
+    },
+    render: () => (
+        <>
+            <div style={{ padding: '1rem' }}>
+                <TagList maxTags={3}>
+                    <Tag data-size='sm'>Tag 1</Tag>
+                    <Tag
+                        data-size='sm'
+                        color='success'
+                    >
+                        Tag 2
+                    </Tag>
+                    <Tag
+                        data-size='sm'
+                        color='neutral'
+                    >
+                        Tag 3
+                    </Tag>
+                    <Tag
+                        data-size='sm'
+                        color='warning'
+                    >
+                        Tag 4
+                    </Tag>
+                    <Tag
+                        data-size='sm'
+                        color='danger'
+                    >
+                        Tag 5
+                    </Tag>
+                    <Tag data-size='sm'>Tag 6</Tag>
+                    <Tag
+                        data-size='sm'
+                        color='success'
+                    >
+                        Tag 7
+                    </Tag>
+                    <Tag
+                        data-size='sm'
+                        color='neutral'
+                    >
+                        Tag 8
+                    </Tag>
+                </TagList>
+            </div>
+        </>
+    ),
+};

package/src/components/vstack/index.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+import styles from './vstack.module.scss';
+
+const VStack = ({ children, ...props }: React.HTMLAttributes<HTMLDivElement>) => {
+    return (
+        <div
+            className={styles.wrapper}
+            {...props}
+        >
+            {children}
+        </div>
+    );
+};
+
+export default VStack;

package/src/components/vstack/vstack.module.scss

@@ -0,0 +1,5 @@
+.wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}

package/src/components/vstack/vstack.stories.tsx

@@ -0,0 +1,37 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import VStack from '.';
+
+const meta: Meta<typeof VStack> = {
+    component: VStack,
+    title: 'VStack',
+};
+
+export default meta;
+type Story = StoryObj<typeof VStack>;
+
+const Item = ({ children }: { children: React.ReactNode }) => (
+    <div
+        style={{
+            padding: '0.25rem 0.5rem',
+            background: '#EEF0F2',
+            borderRadius: 4,
+        }}
+    >
+        {children}
+    </div>
+);
+
+export const Primary: Story = {
+    render: () => (
+        <div style={{ padding: '1rem' }}>
+            <VStack>
+                <Item>Row 1</Item>
+                <Item>Row 2</Item>
+                <Item>Row 3</Item>
+            </VStack>
+        </div>
+    ),
+};
+
+

package/src/index.ts

@@ -0,0 +1,11 @@
+export * from './components/app-bar';
+export * from './components/org-logo';
+export { default as CopyButton } from './components/copy-button';
+export { default as HStack } from './components/hstack';
+export { default as VStack } from './components/vstack';
+export { HelpText } from './components/helptext';
+export { default as TagList } from './components/tag-list';
+export { default as RadioGroup } from './components/radio-group';
+export { default as CheckboxGroup } from './components/checkbox-group';
+export type { RadioGroupProps } from './components/radio-group';
+export type { CheckboxGroupProps } from './components/checkbox-group';

package/src/styles/storybook.scss

@@ -0,0 +1,34 @@
+@layer reset, fds;
+@import '../components/core/reset.css';
+@import '@digdir/designsystemet-theme';
+@import '@digdir/designsystemet-css';
+
+html { font-size: 16px; }
+body { font-size: 1rem; }
+
+html, body, #storybook-root {
+  height: 100%;
+}
+
+/* Place for additional global styles */
+body {
+    font-family:
+        system-ui,
+        -apple-system,
+        BlinkMacSystemFont,
+        'Segoe UI',
+        Roboto,
+        'Helvetica Neue',
+        Arial,
+        sans-serif;
+    background: var(--color-fdk-navy-dark);
+    color: var(--color-text);
+
+    main {
+        background: white;
+    }
+}
+
+* {
+    font-family: inherit;
+}

package/src/types/scss.d.ts

@@ -0,0 +1,9 @@
+declare module '*.scss' {
+  const content: { [className: string]: string };
+  export default content;
+}
+
+declare module '*.css' {
+  const content: { [className: string]: string };
+  export default content;
+}