From ff1f41b2a7254418686ff839c991238f2bf8699d Mon Sep 17 00:00:00 2001 From: Sean Erik Scully Date: Tue, 7 Jan 2025 11:15:24 +0100 Subject: [PATCH] fix: move remove and save button to items for bookmark + add as property for more flexibility of ListItemHeader --- .../Bookmarks/BookmarksListItem.stories.tsx | 3 +- .../Bookmarks/BookmarksListItem.tsx | 4 + .../Bookmarks/BookmarksSection.stories.tsx | 74 +++++++++++++++++-- lib/components/Bookmarks/BookmarksSection.tsx | 8 +- lib/components/List/ListItemBase.tsx | 9 ++- package.json | 10 +-- 6 files changed, 82 insertions(+), 26 deletions(-) diff --git a/lib/components/Bookmarks/BookmarksListItem.stories.tsx b/lib/components/Bookmarks/BookmarksListItem.stories.tsx index 5797929a..0004adce 100644 --- a/lib/components/Bookmarks/BookmarksListItem.stories.tsx +++ b/lib/components/Bookmarks/BookmarksListItem.stories.tsx @@ -4,7 +4,7 @@ import { BookmarksListItem } from './BookmarksListItem'; const meta = { title: 'Bookmarks/BookmarksListItem', component: BookmarksListItem, - tags: ['autodocs', 'outdated'], + tags: ['autodocs'], parameters: {}, args: { id: 'id', @@ -18,7 +18,6 @@ const meta = { label: 'Skatteetaten', }, ], - href: '#', }, } satisfies Meta; diff --git a/lib/components/Bookmarks/BookmarksListItem.tsx b/lib/components/Bookmarks/BookmarksListItem.tsx index d36f1d50..5ef664bf 100644 --- a/lib/components/Bookmarks/BookmarksListItem.tsx +++ b/lib/components/Bookmarks/BookmarksListItem.tsx @@ -33,6 +33,8 @@ export interface BookmarksListItemProps extends ListItemInputProps { saveButton?: ButtonProps; /** Delete button */ removeButton?: ButtonProps; + /** Render as **/ + as?: React.ElementType; } interface FormData { @@ -52,6 +54,7 @@ export const BookmarksListItem = ({ onToggle, saveButton, removeButton, + as, ...rest }: BookmarksListItemProps) => { const [formData, setFormData] = useState({ title, params }); @@ -95,6 +98,7 @@ export const BookmarksListItem = ({ return ( { + alert('Slett bokmerket 1'); + }, + }, params: [ { type: 'search', label: 'Skatt' }, { type: 'filter', label: 'Under arbeid' }, @@ -37,6 +40,15 @@ const meta = { { type: 'search', label: 'Skatt' }, { type: 'filter', label: 'Under arbeid' }, ], + saveButton: { + label: 'Lagre søk', + }, + removeButton: { + label: 'Slett', + onClick: () => { + alert('Slett bokmerket 2'); + }, + }, }, { id: 'bookmark-3', @@ -44,6 +56,12 @@ const meta = { { type: 'filter', label: 'Brønnøysundregistrene' }, { type: 'filter', label: 'Krever handling' }, ], + saveButton: { + label: 'Lagre søk', + }, + removeButton: { + label: 'Slett', + }, }, ], }, @@ -94,3 +112,47 @@ export const EmptyState: Story = { items: [], }, }; + +export const AsLink: Story = { + args: { + title: '2 lagrede søk', + untitled: 'Uten tittel', + titleField: { + label: 'Tittel', + placeholder: 'Uten tittel', + helperText: 'Gi bokmerket et navn.', + }, + description: 'Sist oppdatert 3 minutter siden', + items: [ + { + id: 'bookmark-1', + title: 'Mitt eget søk', + saveButton: { + label: 'Lagre søk', + }, + removeButton: { + label: 'Slett', + }, + as: (props) => , + params: [ + { type: 'search', label: 'Skatt' }, + { type: 'filter', label: 'Under arbeid' }, + ], + }, + { + id: 'bookmark-2', + as: (props) => , + params: [ + { type: 'search', label: 'Skatt' }, + { type: 'filter', label: 'Under arbeid' }, + ], + saveButton: { + label: 'Lagre søk', + }, + removeButton: { + label: 'Slett', + }, + }, + ], + }, +}; diff --git a/lib/components/Bookmarks/BookmarksSection.tsx b/lib/components/Bookmarks/BookmarksSection.tsx index 17ba472d..24a9c63b 100644 --- a/lib/components/Bookmarks/BookmarksSection.tsx +++ b/lib/components/Bookmarks/BookmarksSection.tsx @@ -1,5 +1,5 @@ import { BookmarksListItem, Heading, ListBase, Section, Typography } from '../'; -import type { BookmarksListItemProps, ButtonProps, TextFieldProps } from '../'; +import type { BookmarksListItemProps, TextFieldProps } from '../'; export interface BookmarksSectionProps { title?: string; @@ -7,8 +7,6 @@ export interface BookmarksSectionProps { items: BookmarksListItemProps[]; untitled?: string; titleField?: TextFieldProps; - saveButton?: ButtonProps; - removeButton?: ButtonProps; expandedId?: string; onToggle?: (id: string) => void; loading?: boolean; @@ -21,8 +19,6 @@ export const BookmarksSection = ({ items, untitled = 'Untitled bookmark', titleField, - saveButton, - removeButton, expandedId, onToggle, }: BookmarksSectionProps) => { @@ -40,8 +36,6 @@ export const BookmarksSection = ({ expanded={expandedId === item.id} untitled={untitled} titleField={titleField} - saveButton={saveButton} - removeButton={removeButton} /> ))} diff --git a/lib/components/List/ListItemBase.tsx b/lib/components/List/ListItemBase.tsx index 68df3a61..4783ca4d 100644 --- a/lib/components/List/ListItemBase.tsx +++ b/lib/components/List/ListItemBase.tsx @@ -1,4 +1,4 @@ -import type { ReactNode } from 'react'; +import type { ElementType, ReactNode } from 'react'; import styles from './listItemBase.module.css'; export type ListItemSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'; @@ -19,6 +19,7 @@ export interface ListItemBaseProps { selected?: boolean; expanded?: boolean; children?: ReactNode; + as?: ElementType; } export const ListItemBase = ({ @@ -33,9 +34,11 @@ export const ListItemBase = ({ selected, expanded, children, + as, }: ListItemBaseProps) => { + const Component = as || 'article'; return ( -
{children} -
+ ); }; diff --git a/package.json b/package.json index 38591175..3edca111 100644 --- a/package.json +++ b/package.json @@ -2,17 +2,11 @@ "name": "@altinn/altinn-components", "version": "0.11.0", "main": "dist/index.js", - "files": [ - "dist/", - "!dist/stories/", - "!dist/components/*/*.stories.js" - ], + "files": ["dist/", "!dist/stories/", "!dist/components/*/*.stories.js"], "types": "dist/types/lib/index.d.ts", "type": "module", "description": "Reusable react components", - "sideEffects": [ - "*.css" - ], + "sideEffects": ["*.css"], "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "storybook": "storybook dev -p 6006",