{socials.map((socialIconProps, index) => (
diff --git a/lib/components/Span.tsx b/lib/components/Span.tsx
index c879a05b..e69de29b 100644
--- a/lib/components/Span.tsx
+++ b/lib/components/Span.tsx
@@ -1,45 +0,0 @@
-import { tx } from '../twind'
-import type { NativeProps } from '../util/types'
-
-export type LabelType = 'labelSmall' | 'labelMedium' | 'labelBig'
-
-export type SpanType = LabelType | 'normal' | 'heading' | 'title' | 'subsectionTitle' | 'subsubsectionTitle' | 'accent'
- | 'description' | 'tableName' | 'navigationItem' | 'tableHeader' | 'formError'
- | 'formDescription' | 'modalTitle' | 'block'
-
-export type SpanProps = NativeProps<'span'> & {
- type?: SpanType,
-}
-
-/**
- * A component for displaying text and making it easy to change the style
- *
- * The type of text is defined by the type attribute
- */
-export const Span = ({ children, type = 'normal', className, ...restProps }: SpanProps) => {
- return (
-
- {children}
-
- )
-}
diff --git a/lib/components/TextImage.tsx b/lib/components/TextImage.tsx
index 47807a98..caeb1b2e 100644
--- a/lib/components/TextImage.tsx
+++ b/lib/components/TextImage.tsx
@@ -4,7 +4,6 @@ import type { Languages } from '../hooks/useLanguage'
import type { PropsForTranslation } from '../hooks/useTranslation'
import { useTranslation } from '../hooks/useTranslation'
import { Chip } from './ChipList'
-import { Span } from './Span'
type TextImageColor = 'primary'| 'secondary'| 'secondaryDark'| 'red'
@@ -74,12 +73,12 @@ export const TextImage = ({
>
{badge && (
- {badge}
+ {badge}
)}
- {title}
- {description}
+ {title}
+ {description}
{onShowMoreClicked && (
diff --git a/lib/components/date/YearMonthPicker.tsx b/lib/components/date/YearMonthPicker.tsx
index 60775b2b..a6c8b2a6 100644
--- a/lib/components/date/YearMonthPicker.tsx
+++ b/lib/components/date/YearMonthPicker.tsx
@@ -4,7 +4,6 @@ import { noop } from '../../util/noop'
import { equalSizeGroups, range } from '../../util/array'
import { tw, tx } from '../../twind'
import { Expandable } from '../Expandable'
-import { Span } from '../Span'
import { addDuration, monthsList, subtractDuration } from '../../util/date'
import { useLocale } from '../../hooks/useLanguage'
@@ -59,7 +58,7 @@ export const YearMonthPicker = ({
{year}}
+ label={{year}}
className={tw('gap-y-2 rounded-lg bg-gray-100 hover:bg-gray-200 shadow-sm')}
headerClassName={tw('px-2 py-1 rounded-lg bg-gray-100 hover:bg-hw-primary-200')}
initialExpansion={showValueOpen && selectedYear}
diff --git a/lib/components/examples/MultiSelectExample.tsx b/lib/components/examples/MultiSelectExample.tsx
index 4d0936e6..296ef56d 100644
--- a/lib/components/examples/MultiSelectExample.tsx
+++ b/lib/components/examples/MultiSelectExample.tsx
@@ -2,7 +2,6 @@ import { useEffect, useState } from 'react'
import type { MultiSelectProps } from '../user-input/MultiSelect'
import { MultiSelect } from '../user-input/MultiSelect'
import { ChipList } from '../ChipList'
-import { Span } from '../Span'
type MultiSelectExampleProps = Omit, 'search' | 'selectedDisplay'> & {
enableSearch: boolean,
@@ -44,7 +43,7 @@ export const MultiSelectExample = ({
({ items }) => {
const selected = items.filter(value => value.selected)
if (selected.length === 0) {
- return Select
+ return (Select)
}
return (
, 'data'>)
data={data}
identifierMapping={idMapping}
rowMappingToCells={dataObject => [
- {dataObject.id},
+ {dataObject.id},
{
setData(data.map(value => value.id === dataObject.id ? { ...dataObject, name: text } : value))
setSorting(undefined)
@@ -101,7 +100,7 @@ const TableExample = ({ data: initialData }: Pick, 'data'>)
setData(data.sort(sortingFunctions.id[newTableSorting]))
}}
>
- Id
+ Id
,
, 'data'>)
setData(data.sort(sortingFunctions.name[newTableSorting]))
}}
>
- Name
+ Name
,
, 'data'>)
setData(data.sort(sortingFunctions.age[newTableSorting]))
}}
>
- age
+ age
,
<>
]}
diff --git a/lib/components/examples/Title.tsx b/lib/components/examples/Title.tsx
index 8179c35e..e69de29b 100644
--- a/lib/components/examples/Title.tsx
+++ b/lib/components/examples/Title.tsx
@@ -1,44 +0,0 @@
-import { tw } from '../../twind'
-import { useTranslation } from '../../hooks/useTranslation'
-import type { PropsForTranslation } from '../../hooks/useTranslation'
-import type { Languages } from '../../hooks/useLanguage'
-
-type TitleTranslation = {
- welcome: string,
- goodToSeeYou: string,
- page: (page: number) => string,
-}
-
-const defaultTitleTranslations: Record = {
- en: {
- welcome: 'Welcome',
- goodToSeeYou: 'Good to see you',
- page: (page) => `Page ${page}`
- },
- de: {
- welcome: 'Willkommen',
- goodToSeeYou: 'Schön dich zu sehen',
- page: (page) => `Seite ${page}`
- }
-}
-
-type TitleProps = {
- name: string,
-}
-
-/**
- * Simple Title component to demonstrate some translations
- */
-const Title = ({ overwriteTranslation, name }:PropsForTranslation) => {
- const translation = useTranslation(defaultTitleTranslations, overwriteTranslation)
- return (
-
- {translation.welcome}{'! '}
- {translation.goodToSeeYou}{', '}
- {name}{'. '}
- {translation.page(123)}
-
- )
-}
-
-export default Title
diff --git a/lib/components/layout/FAQSection.tsx b/lib/components/layout/FAQSection.tsx
index f963c583..2fa0f61b 100644
--- a/lib/components/layout/FAQSection.tsx
+++ b/lib/components/layout/FAQSection.tsx
@@ -4,7 +4,6 @@ import { ChevronDown, ChevronUp } from 'lucide-react'
import type { ExpandableProps } from '../Expandable'
import { Expandable } from '../Expandable'
import { MarkdownInterpreter } from '../MarkdownInterpreter'
-import { Span } from '../Span'
type ContentType = {
type: 'markdown',
@@ -39,7 +38,7 @@ export const FAQSection = ({
{title})}
+ label={({title}
)}
clickOnlyOnHeader={false}
icon={(expanded) => expanded ?
() :
diff --git a/lib/components/layout/Tile.tsx b/lib/components/layout/Tile.tsx
index feb83b19..245646fa 100644
--- a/lib/components/layout/Tile.tsx
+++ b/lib/components/layout/Tile.tsx
@@ -1,12 +1,10 @@
import type { ReactNode } from 'react'
import Image from 'next/image'
import { tw, tx } from '../../twind'
-import type { SpanType } from '../Span'
-import { Span } from '../Span'
export type TileProps = {
- title: { value: string, className?: string, type?: SpanType },
- description?: { value: string, className?: string, type?: SpanType },
+ title: { value: string, className?: string },
+ description?: { value: string, className?: string},
prefix?: ReactNode,
suffix?: ReactNode,
className?: string,
@@ -26,9 +24,9 @@ export const Tile = ({
{prefix}
- {title.value}
+ {title.value}
{!!description &&
- {description.value}}
+ {description.value}}
{suffix}
{title ?? (
-
{titleText}
-
+
)}
{!!onCloseClick && (
@@ -64,7 +63,7 @@ export const ModalHeader = ({
)}
- {description ?? (
{descriptionText})}
+ {description ?? (
{descriptionText})}
)
}
diff --git a/lib/components/properties/CheckboxProperty.tsx b/lib/components/properties/CheckboxProperty.tsx
index e168ccf9..b22ff20d 100644
--- a/lib/components/properties/CheckboxProperty.tsx
+++ b/lib/components/properties/CheckboxProperty.tsx
@@ -5,7 +5,6 @@ import { Checkbox } from '../user-input/Checkbox'
import type { Languages } from '../../hooks/useLanguage'
import type { PropsForTranslation } from '../../hooks/useTranslation'
import { useTranslation } from '../../hooks/useTranslation'
-import { Span } from '../Span'
import type { PropertyBaseProps } from './PropertyBase'
import { PropertyBase } from './PropertyBase'
@@ -58,7 +57,9 @@ export const CheckboxProperty = ({
disabled={readOnly}
onChange={onChange}
/>
- onChange(!value)}>{`${translation.yes}/${translation.no}`}
+ onChange(!value)}>
+ {`${translation.yes}/${translation.no}`}
+
)}
/>
diff --git a/lib/components/properties/MultiSelectProperty.tsx b/lib/components/properties/MultiSelectProperty.tsx
index cbc7174d..ccb02062 100644
--- a/lib/components/properties/MultiSelectProperty.tsx
+++ b/lib/components/properties/MultiSelectProperty.tsx
@@ -5,7 +5,6 @@ import type { PropsForTranslation } from '../../hooks/useTranslation'
import { useTranslation } from '../../hooks/useTranslation'
import type { MultiSelectProps } from '../user-input/MultiSelect'
import { MultiSelect } from '../user-input/MultiSelect'
-import { Span } from '../Span'
import { ChipList } from '../ChipList'
import type { PropertyBaseProps } from './PropertyBase'
import { PropertyBase } from './PropertyBase'
@@ -64,7 +63,7 @@ export const MultiSelectProperty =
({
selectedDisplay={({ items }) => {
const selected = items.filter(value => value.selected)
if (selected.length === 0) {
- return Select
+ return (Select)
}
return (
- {suffix && {suffix}}
+ {suffix && {suffix}}