Skip to content

feat(sample): presentation views #8960

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
laske185 wants to merge 2 commits into
base: develop
Choose a base branch
from
Draft

feat(sample): presentation views #8960

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f1c32e6
feat: presentation views (draft)
laske185 Dec 2, 2025
decc414
Update all snapshots
deleonio Dec 19, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/samples/react/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -121,7 +121,7 @@ export const App: FC = () => {

return (
<HideMenusContext.Provider value={hideMenus}>
<div className={!hideMenus ? 'app-container' : ''} data-theme={theme}>
<div className={`${!hideMenus ? 'app-container' : ''} px-4`} data-theme={theme}>
{!hideMenus && (
<Sidebar
version={PackageJson.version}
Expand Down
32 changes: 17 additions & 15 deletions packages/samples/react/src/components/SampleDescription.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,23 +29,25 @@ export const SampleDescription: FC<PropsWithChildren> = (props) => {
<>
<h1 className="visually-hidden">{location.pathname.replace(/\//g, ' ')}</h1>
{hideMenus ? null : (
<div className="grid sm:flex gap-4 justify-between pb-sm border-b-1 border-b-solid border-gray mb-2">
<div className="indented-text">{props.children}</div>
<ul className="flex flex-wrap gap-2 list-none m-0 p-0">
{codeLink && (
<li>
<KolLink _href={codeLink} _label="Code" _target="_blank" />
</li>
)}
{docLink && (
<div className="flex flex-col gap-4">
<div className="grid sm:flex gap-4 justify-between pb-sm border-b-1 border-b-solid border-gray mb-2">
<ul className="flex flex-wrap gap-2 list-none m-0 p-0">
{codeLink && (
<li>
<KolLink _href={codeLink} _label="Code" _target="_blank" />
</li>
)}
{docLink && (
<li>
<KolLink _href={docLink} _label="Documentation" _target="_blank" />
</li>
)}
<li>
<KolLink _href={docLink} _label="Documentation" _target="_blank" />
<KolLink _href={`#${location.pathname}?hideMenus`} _label="Standalone example" _target="_blank" />
</li>
)}
<li>
<KolLink _href={`#${location.pathname}?hideMenus`} _label="Standalone example" _target="_blank" />
</li>
</ul>
</ul>
</div>
<div className="indented-text">{props.children}</div>
</div>
)}
</>
Expand Down
86 changes: 78 additions & 8 deletions packages/samples/react/src/components/accordion/basic.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,26 +1,96 @@
import React from 'react';

import { KolAccordion } from '@public-ui/react-v19';
import { KolAccordion, KolHeading } from '@public-ui/react-v19';
import { SampleDescription } from '../SampleDescription';

import type { FC } from 'react';

export const AccordionBasic: FC = () => (
<>
<SampleDescription>
<KolHeading _level={1} _label="Accordion" />
<p>
KolAccordion hides its content until opened. The open state can be toggled by clicking the headline or by setting the <code>_open</code>-prop
programmatically. Additionally, the sample shows the disabled state for a closed and an open accordion.
</p>
</SampleDescription>

<div className="grid gap-4">
<KolAccordion _label="Heading Accordion Tab 1">Contents Accordion Tab 1</KolAccordion>
<KolAccordion _label="Heading Accordion Tab 2">Contents Accordion Tab 2</KolAccordion>
<KolAccordion _label="Heading Accordion Tab 2 (deactivated)" _disabled></KolAccordion>
<KolAccordion _label="Heading Accordion Tab 2 (disabled and open)" _disabled _open>
Contents Accordion Tab 2
</KolAccordion>
<div className="flex flex-col gap-12 py-8">
<div className="flex flex-col gap-3">
<KolHeading _level={2} _label="Default" />
<div className="border p-6 border-solid rounded-md">
<KolAccordion _label="Spring">
Spring is the season when nature slowly wakes up after the cold winter months. Trees grow new leaves, flowers begin to bloom, and animals become
more active again. The weather usually gets warmer, and people enjoy spending more time outside. Many consider spring a fresh start because
everything feels new and full of energy.
</KolAccordion>
<KolAccordion _open _label="Summer">
Summer is the warmest season of the year, often filled with long sunny days and pleasant evenings. People like to go swimming, travel, or enjoy
outdoor activities such as hiking and barbecues. School holidays often take place during this time, giving families more time together. The bright,
hot weather makes summer feel lively and full of adventure.
</KolAccordion>
<KolAccordion _label="Autumn (Fall)">
Autumn is the season when the temperature slowly drops, and nature changes its appearance. Leaves turn red, yellow, and brown before falling from
the trees, creating colorful landscapes. Farmers harvest their crops, and many animals prepare for winter. The chilly air and shorter days make
autumn a calm, reflective season with a cozy atmosphere.
</KolAccordion>
<KolAccordion _label="Winter">
Winter is the coldest season, often bringing snow, frost, and dark evenings. Many people stay indoors to keep warm, while others enjoy winter sports
like skiing or ice skating. Animals adapt by growing thicker fur or finding shelter. Despite the harsh weather, winter can feel peaceful, especially
when snow covers the landscape in a quiet, white layer.
</KolAccordion>
</div>
</div>
<div className="flex flex-col gap-3">
<KolHeading _level={2} _label="With headings (level 3)" />
<div className="border p-6 border-solid rounded-md">
<KolAccordion _label="Spring" _level={3}>
Spring is the season when nature slowly wakes up after the cold winter months. Trees grow new leaves, flowers begin to bloom, and animals become
more active again. The weather usually gets warmer, and people enjoy spending more time outside. Many consider spring a fresh start because
everything feels new and full of energy.
</KolAccordion>
<KolAccordion _open _label="Summer" _level={3}>
Summer is the warmest season of the year, often filled with long sunny days and pleasant evenings. People like to go swimming, travel, or enjoy
outdoor activities such as hiking and barbecues. School holidays often take place during this time, giving families more time together. The bright,
hot weather makes summer feel lively and full of adventure.
</KolAccordion>
<KolAccordion _label="Autumn (Fall)" _level={3}>
Autumn is the season when the temperature slowly drops, and nature changes its appearance. Leaves turn red, yellow, and brown before falling from
the trees, creating colorful landscapes. Farmers harvest their crops, and many animals prepare for winter. The chilly air and shorter days make
autumn a calm, reflective season with a cozy atmosphere.
</KolAccordion>
<KolAccordion _label="Winter" _level={3}>
Winter is the coldest season, often bringing snow, frost, and dark evenings. Many people stay indoors to keep warm, while others enjoy winter sports
like skiing or ice skating. Animals adapt by growing thicker fur or finding shelter. Despite the harsh weather, winter can feel peaceful, especially
when snow covers the landscape in a quiet, white layer.
</KolAccordion>
</div>
</div>
<div className="flex flex-col gap-3">
<KolHeading _level={2} _label="Disabled" />
<div className="border p-6 border-solid rounded-md">
<KolAccordion _label="Spring">
Spring is the season when nature slowly wakes up after the cold winter months. Trees grow new leaves, flowers begin to bloom, and animals become
more active again. The weather usually gets warmer, and people enjoy spending more time outside. Many consider spring a fresh start because
everything feels new and full of energy.
</KolAccordion>
<KolAccordion _open _label="Summer">
Summer is the warmest season of the year, often filled with long sunny days and pleasant evenings. People like to go swimming, travel, or enjoy
outdoor activities such as hiking and barbecues. School holidays often take place during this time, giving families more time together. The bright,
hot weather makes summer feel lively and full of adventure.
</KolAccordion>
<KolAccordion _label="Autumn (Fall)" _disabled>
Autumn is the season when the temperature slowly drops, and nature changes its appearance. Leaves turn red, yellow, and brown before falling from
the trees, creating colorful landscapes. Farmers harvest their crops, and many animals prepare for winter. The chilly air and shorter days make
autumn a calm, reflective season with a cozy atmosphere.
</KolAccordion>
<KolAccordion _label="Winter">
Winter is the coldest season, often bringing snow, frost, and dark evenings. Many people stay indoors to keep warm, while others enjoy winter sports
like skiing or ice skating. Animals adapt by growing thicker fur or finding shelter. Despite the harsh weather, winter can feel peaceful, especially
when snow covers the landscape in a quiet, white layer.
</KolAccordion>
</div>
</div>
</div>
</>
);
26 changes: 26 additions & 0 deletions packages/samples/react/src/components/accordion/disabled.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
import React from 'react';

import { KolAccordion } from '@public-ui/react-v19';
import { SampleDescription } from '../SampleDescription';

import type { FC } from 'react';

export const AccordionBasic: FC = () => (
<>
<SampleDescription>
<p>
KolAccordion hides its content until opened. The open state can be toggled by clicking the headline or by setting the <code>_open</code>-prop
programmatically. Additionally, the sample shows the disabled state for a closed and an open accordion.
</p>
</SampleDescription>

<div className="grid gap-4">
<KolAccordion _label="Heading Accordion Tab 1">Contents Accordion Tab 1</KolAccordion>
<KolAccordion _label="Heading Accordion Tab 2">Contents Accordion Tab 2</KolAccordion>
<KolAccordion _label="Heading Accordion Tab 2 (deactivated)" _disabled></KolAccordion>
<KolAccordion _label="Heading Accordion Tab 2 (disabled and open)" _disabled _open>
Contents Accordion Tab 2
</KolAccordion>
</div>
</>
);
72 changes: 48 additions & 24 deletions packages/samples/react/src/components/input-text/basic.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,37 +1,61 @@
import { KolInputText } from '@public-ui/react-v19';
import { KolHeading, KolInputText } from '@public-ui/react-v19';
import type { FC } from 'react';
import React from 'react';
import { SampleDescription } from '../SampleDescription';

export const InputTextBasic: FC = () => (
<>
<SampleDescription>
<KolHeading _level={1} _label="Input Text" />
<p>This story showcases basic KolInputText usage: simple text input, with error message, and disabled state.</p>
</SampleDescription>

<div className="grid gap-4">
<KolInputText _label="First name" _value="John Doe" />
<KolInputText
_label="Email"
_value="john@example.com"
_msg={{ _type: 'error', _description: 'Unknown email address' }}
_touched
_hint="Enter the email address you provided during registration."
/>
<KolInputText _label="Address" _value="123 Main Street" _disabled />
<KolInputText
_label="Username with icons"
_placeholder="Please enter your username"
_icons={{
left: {
icon: 'codicon codicon-squirrel',
},
right: {
icon: 'codicon codicon-home',
},
}}
_hint="The icons can only be on the left or right as well."
/>
<div className="flex flex-col gap-12 py-8">
<div className="flex flex-col gap-3">
<KolHeading _level={2} _label="Default" />
<div className="border p-6 border-solid rounded-md">
<KolInputText className="max-w-[400px]" _label="Name" _value="Anderson-Clark" />
</div>
</div>
<div className="flex flex-col gap-3">
<KolHeading _level={2} _label="With error message" />
<div className="border p-6 border-solid rounded-md">
<KolInputText className="max-w-[400px]" _label="Name" _required _msg={{ _type: 'error', _description: 'Please enter your name' }} _touched />
</div>
</div>
<div className="flex flex-col gap-3">
<KolHeading _level={2} _label="With hint" />
<div className="border p-6 border-solid rounded-md">
<KolInputText className="max-w-[400px]" _label="Name" _required _hint="Enter your surname" />
</div>
</div>
<div className="flex flex-col gap-3">
<KolHeading _level={2} _label="Disabled" />
<div className="border p-6 border-solid rounded-md">
<KolInputText className="max-w-[400px]" _label="Name" _value="Anderson-Clark" _disabled />
</div>
</div>
<div className="flex flex-col gap-3">
<KolHeading _level={2} _label="Readonly" />
<div className="border p-6 border-solid rounded-md">
<KolInputText className="max-w-[400px]" _label="Name" _readOnly _value="Anderson-Clark" />
</div>
</div>
<div className="flex flex-col gap-3">
<KolHeading _level={2} _label="With icon" />
<div className="border p-6 border-solid rounded-md">
<KolInputText
className="max-w-[400px]"
_label="Name"
_icons={{
right: {
icon: 'codicon codicon-account',
},
}}
_value="Anderson-Clark"
/>
</div>
</div>
</div>
</>
);
Loading
Loading