@public-ui/sample-react 2.2.6 → 2.2.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@public-ui/sample-react",
-  "version": "2.2.6",
+  "version": "2.2.7",
   "description": "This app contains samples for the KoliBri/Public UI",
   "license": "EUPL-1.2",
   "repository": {
@@ -25,7 +25,7 @@
     "eslint-plugin-react": "7.37.4",
     "formik": "2.4.6",
     "nightwatch-axe-verbose": "2.3.1",
-    "npm-run-all": "4.1.5",
+    "npm-run-all2": "7.0.2",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-number-format": "5.4.3",
@@ -36,9 +36,9 @@
     "typescript": "5.7.3",
     "world_countries_lists": "2.9.0",
     "yup": "1.6.1",
-    "@public-ui/components": "2.2.6",
-    "@public-ui/react": "2.2.6",
-    "@public-ui/themes": "2.2.6"
+    "@public-ui/components": "2.2.7",
+    "@public-ui/react": "2.2.7",
+    "@public-ui/themes": "2.2.7"
   },
   "files": [
     ".eslintignore",

package/public/assets/material-icons/css/_mixins.scss

@@ -1,4 +1,4 @@
-@import '../iconfont/mixins';
+@use '../iconfont/mixins' as *;
 
 @function material-icons-content($codepoint) {
   @return unquote('"\\#{$codepoint}"');
@@ -10,4 +10,4 @@
   &::#{$pseudo} {
     content: material-icons-content($codepoint);
   }
-}
+}

package/public/assets/material-icons/css/_variables.scss

@@ -1,6 +1,6 @@
-@import '../iconfont/variables';
-@import 'codepoints';
+@use '../iconfont/variables' as *;
+@use 'codepoints' as *;
 
 $material-icons-css-prefix: 'mi' !default;
 $material-icons-css-search: '_' !default;
-$material-icons-css-replace: '-' !default;
+$material-icons-css-replace: '-' !default;

package/public/assets/material-icons/css/material-icons.scss

@@ -1,22 +1,18 @@
-@import 'variables';
-@import 'mixins';
+@use 'variables' as *;
+@use 'mixins' as *;
 
-@each $font-family
-  in (
-    'Material Icons',
-    'Material Icons Outlined',
-    'Material Icons Round',
-    'Material Icons Sharp',
-    'Material Icons Two Tone'
-  )
-{
+@each $font-family in ('Material Icons',
+  'Material Icons Outlined',
+  'Material Icons Round',
+  'Material Icons Sharp',
+  'Material Icons Two Tone'
+
+) {
   $full-class-name: to-lower-case($font-family);
   $full-class-name: material-icons-str-replace($full-class-name, ' ', '-');
-  $class-name: material-icons-str-replace(
-    $full-class-name,
-    'material-icons',
-    $material-icons-css-prefix
-  );
+  $class-name: material-icons-str-replace($full-class-name,
+      'material-icons',
+      $material-icons-css-prefix );
 
   /**
    * @deprecated As of 1.0, use .#{$full-class-name} instead of .#{$class-name}
@@ -27,13 +23,11 @@
 }
 
 @each $name, $codepoint in $material-icons-codepoints {
-  $class-name: material-icons-str-replace(
-    $name,
-    $material-icons-css-search,
-    $material-icons-css-replace
-  );
+  $class-name: material-icons-str-replace($name,
+      $material-icons-css-search,
+      $material-icons-css-replace );
 
   .#{$material-icons-css-prefix}-#{$class-name} {
     @include material-icon($name);
   }
-}
+}

package/public/assets/material-icons/iconfont/filled.scss

@@ -1,4 +1,4 @@
-@import 'variables';
-@import 'mixins';
+@use 'variables' as *;
+@use 'mixins' as *;
 
-@include material-icons-font('Material Icons');
+@include material-icons-font('Material Icons');

package/public/assets/material-icons/iconfont/material-icons.scss

@@ -1,5 +1,5 @@
-@import 'filled';
-@import 'outlined';
-@import 'round';
-@import 'sharp';
-@import 'two-tone';
+@use 'filled' as *;
+@use 'outlined' as *;
+@use 'round' as *;
+@use 'sharp' as *;
+@use 'two-tone' as *;

package/public/assets/material-icons/iconfont/outlined.scss

@@ -1,4 +1,4 @@
-@import 'variables';
-@import 'mixins';
+@use 'variables' as *;
+@use 'mixins' as *;
 
-@include material-icons-font('Material Icons Outlined');
+@include material-icons-font('Material Icons Outlined');

package/public/assets/material-icons/iconfont/round.scss

@@ -1,4 +1,4 @@
-@import 'variables';
-@import 'mixins';
+@use 'variables' as *;
+@use 'mixins' as *;
 
-@include material-icons-font('Material Icons Round');
+@include material-icons-font('Material Icons Round');

package/public/assets/material-icons/iconfont/sharp.scss

@@ -1,4 +1,4 @@
-@import 'variables';
-@import 'mixins';
+@use 'variables' as *;
+@use 'mixins' as *;
 
-@include material-icons-font('Material Icons Sharp');
+@include material-icons-font('Material Icons Sharp');

package/public/assets/material-icons/iconfont/two-tone.scss

@@ -1,4 +1,4 @@
-@import 'variables';
-@import 'mixins';
+@use 'variables' as *;
+@use 'mixins' as *;
 
-@include material-icons-font('Material Icons Two Tone');
+@include material-icons-font('Material Icons Two Tone');

package/public/assets/material-symbols/index.scss

@@ -1,3 +1,3 @@
-@import 'outlined';
-@import 'rounded';
-@import 'sharp';
+@use 'outlined' as *;
+@use 'rounded' as *;
+@use 'sharp' as *;

package/public/assets/material-symbols/outlined.scss

@@ -1,3 +1,3 @@
-@import 'core';
+@use 'core' as *;
 
-@include material-symbols-font('Material Symbols Outlined');
+@include material-symbols-font('Material Symbols Outlined');

package/public/assets/material-symbols/rounded.scss

@@ -1,3 +1,3 @@
-@import 'core';
+@use 'core' as *;
 
-@include material-symbols-font('Material Symbols Rounded');
+@include material-symbols-font('Material Symbols Rounded');

package/public/assets/material-symbols/sharp.scss

@@ -1,3 +1,3 @@
-@import 'core';
+@use 'core' as *;
 
-@include material-symbols-font('Material Symbols Sharp');
+@include material-symbols-font('Material Symbols Sharp');

package/src/components/input-radio/partials/variants.tsx

@@ -3,17 +3,19 @@ import React, { forwardRef } from 'react';
 import { InputRadioCases } from './cases';
 
 import type { Components } from '@public-ui/components';
+import { KolHeading } from '@public-ui/react';
+
 export const InputRadioVariants = forwardRef<HTMLKolInputRadioElement, Components.KolInputRadio>(function InputRadioVariant(props, ref) {
 	return (
 		<div className="grid md:grid-cols-2 gap-4">
-			<fieldset>
-				<legend>Radio</legend>
+			<div className="border border-solid border-dark-100 p-3">
+				<KolHeading _level={2} _label="Radio" className="block mb-2" />
 				<InputRadioCases {...props} />
-			</fieldset>
-			<fieldset>
-				<legend>Radio (hideLabel)</legend>
+			</div>
+			<div className="border border-solid border-dark-100 p-3">
+				<KolHeading _level={2} _label="Radio (hideLabel)" className="block mb-2" />
 				<InputRadioCases ref={ref} {...props} _hideLabel />
-			</fieldset>
+			</div>
 		</div>
 	);
 });

package/src/components/popover-button/basic.tsx

@@ -0,0 +1,55 @@
+import type { FC } from 'react';
+import { useContext } from 'react';
+import React from 'react';
+import { SampleDescription } from '../SampleDescription';
+import { KolButton, KolPopoverButton, KolBadge } from '@public-ui/react';
+import { useToasterService } from '../../hooks/useToasterService';
+import { HideMenusContext } from '../../shares/HideMenusContext';
+
+export const PopoverButtonBasic: FC = () => {
+	const hideMenus = useContext(HideMenusContext);
+	const { dummyClickEventHandler } = useToasterService();
+
+	const dummyEventHandler = {
+		onClick: dummyClickEventHandler,
+	};
+
+	return (
+		<>
+			<SampleDescription>
+				<p>
+					The PopoverButton component combines a button with a popover that appears when clicked. The popover can be positioned in different directions (top,
+					right, bottom, left) using the <code>_popoverAlign</code> prop.
+				</p>
+			</SampleDescription>
+			{!hideMenus && <KolBadge className="block mb-3" _label="Component is a DRAFT - Don't use in production yet." _color="#db5461" />}
+
+			<div className="flex flex-wrap gap-4">
+				<KolPopoverButton _label={'Open popover'} _variant="primary" _icons={{ right: 'codicon codicon-chevron-down' }}>
+					<KolButton _label="Button within popover" _variant="primary" _on={dummyEventHandler} />
+					<br />
+					<br />
+					<KolButton _label="Second Button within popover" _on={dummyEventHandler} />
+				</KolPopoverButton>
+
+				<KolPopoverButton _label="Open popover" _popoverAlign="right" _icons={{ right: 'codicon codicon-chevron-right' }}>
+					<p className="w-sm">
+						Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur aut dolore dolores itaque praesentium reprehenderit sed voluptatum!
+						Exercitationem ipsa magni maiores modi, placeat quas quos reprehenderit rerum sit veniam vitae.
+					</p>
+				</KolPopoverButton>
+
+				<KolPopoverButton _label="icon-only with tooltip" _icons="codicon codicon-info" _tooltipAlign="right" _hideLabel>
+					This is an explanation shown on click.
+				</KolPopoverButton>
+
+				<KolPopoverButton _label="">
+					<span slot="expert">
+						<u>Expert slot content</u>
+					</span>
+					This sample illustrates a button with expert slot.
+				</KolPopoverButton>
+			</div>
+		</>
+	);
+};

package/src/components/popover-button/routes.ts

@@ -0,0 +1,8 @@
+import { Routes } from '../../shares/types';
+import { PopoverButtonBasic } from './basic';
+
+export const POPOVER_BUTTON_ROUTES: Routes = {
+	'popover-button': {
+		basic: PopoverButtonBasic,
+	},
+};

package/src/components/progress/basic.tsx

@@ -11,11 +11,18 @@ export const ProgressBasic: FC = () => (
 			<p>KolProgress renders a progress indicator. The sample shows the variants &quot;bar&quot; and &quot;cycle&quot; with and without labels.</p>
 		</SampleDescription>
 
-		<div className="grid gap-4">
-			<KolProgress _variant="bar" _max={100} _value={0} _label="With label"></KolProgress>
-			<KolProgress _variant="bar" _max={100} _value={33}></KolProgress>
-			<KolProgress _variant="bar" _max={100} _value={100}></KolProgress>
-			<KolProgress _variant="cycle" _max={100} _value={33}></KolProgress>
+		<div className="grid gap-4 grid-cols-1 sm:grid-cols-2">
+			<fieldset title="Percentages" className="flex flex-col gap-4">
+				<KolProgress _variant="bar" _max={7} _value={0}></KolProgress>
+				<KolProgress _variant="bar" _max={7} _value={2}></KolProgress>
+				<KolProgress _variant="bar" _max={7} _value={7}></KolProgress>
+				<KolProgress _variant="cycle" _max={7} _value={6}></KolProgress>
+			</fieldset>
+			<fieldset title="Custom units" className="flex flex-col gap-4">
+				<KolProgress _label="Distance" _variant="bar" _max={65434} _value={7236} _unit="m"></KolProgress>
+				<KolProgress _label="12 Tasks to do" _variant="bar" _max={12} _value={5} _unit="tasks completed"></KolProgress>
+				<KolProgress _label="Max 150 kg" _variant="cycle" _max={150} _value={42} _unit="kg"></KolProgress>
+			</fieldset>
 		</div>
 	</>
 );

package/src/components/single-select/partials/cases.tsx

@@ -36,6 +36,7 @@ export const SingleSelectCases = forwardRef<HTMLKolSingleSelectElement, Componen
 			/>
 			<KolSingleSelect {...props} _label="With access key" _options={COUNTRY_OPTIONS as Option<StencilUnknown>[]} _value={'de'} _accessKey="c" />
 			<KolSingleSelect {...props} _label="With short key" _options={COUNTRY_OPTIONS as Option<StencilUnknown>[]} _value={'de'} _shortKey="s" />
+			<KolSingleSelect {...props} _label="With hidden clear button" _options={COUNTRY_OPTIONS as Option<StencilUnknown>[]} _value={'de'} _hideClearButton />
 		</div>
 	);
 });

package/src/scenarios/horizontal-scrollbar-advanced/layout.scss

@@ -1,4 +1,4 @@
-@import '../../@shared/mixins';
+@use '../../@shared/mixins' as *;
 
 .mainlayout {
 	min-height: calc(100vh - rem(32));
@@ -9,11 +9,11 @@
 	grid-template-rows: 1fr;
 	grid-template-areas: 'nav content';
 
-	& > .nav-area {
+	&>.nav-area {
 		grid-area: nav;
 	}
 
-	& > .content {
+	&>.content {
 		grid-area: content;
 	}
-}
+}

package/src/shares/routes.ts

@@ -1,3 +1,4 @@
+import { Routes } from './types';
 import { ABBR_ROUTES } from '../components/abbr/routes';
 import { ACCORDION_ROUTES } from '../components/accordion/routes';
 import { ALERT_ROUTES } from '../components/alert/routes';
@@ -8,6 +9,7 @@ import { BUTTON_GROUP_ROUTES } from '../components/button-group/routes';
 import { BUTTON_LINK_ROUTES } from '../components/button-link/routes';
 import { BUTTON_ROUTES } from '../components/button/routes';
 import { CARD_ROUTES } from '../components/card/routes';
+import { COMBOBOX_ROUTES } from '../components/combobox/routes';
 import { DETAILS_ROUTES } from '../components/details/routes';
 import { DRAWER_ROUTES } from '../components/drawer/routes';
 import { FORM_ROUTES } from '../components/form/routes';
@@ -33,9 +35,12 @@ import { LINK_ROUTES } from '../components/link/routes';
 import { MODAL_ROUTES } from '../components/modal/routes';
 import { NAV_ROUTES } from '../components/nav/routes';
 import { PAGINATION_ROUTES } from '../components/pagination/routes';
+import { POPOVER_BUTTON_ROUTES } from '../components/popover-button/routes';
 import { PROGRESS_ROUTES } from '../components/progress/routes';
 import { QUOTE_ROUTES } from '../components/quote/routes';
+import { SCENARIO_ROUTES } from '../scenarios/routes';
 import { SELECT_ROUTES } from '../components/select/routes';
+import { SINGLE_SELECT_ROUTES } from '../components/single-select/routes';
 import { SKIP_NAV_ROUTES } from '../components/skip-nav/routes';
 import { SPIN_ROUTES } from '../components/spin/routes';
 import { SPLIT_BUTTON_ROUTES } from '../components/split-button/routes';
@@ -44,15 +49,10 @@ import { TABS_ROUTES } from '../components/tabs/routes';
 import { TEXTAREA_ROUTES } from '../components/textarea/routes';
 import { TOAST_ROUTES } from '../components/toast/routes';
 import { TOOLBAR_ROUTES } from '../components/toolbar/routes';
-import { VERSION_ROUTES } from '../components/version/routes';
-import { SCENARIO_ROUTES } from '../scenarios/routes';
-import { Routes } from './types';
 import { TREE_ROUTES } from '../components/tree/routes';
-import { COMBOBOX_ROUTES } from '../components/combobox/routes';
-import { SINGLE_SELECT_ROUTES } from '../components/single-select/routes';
+import { VERSION_ROUTES } from '../components/version/routes';
 
 export const ROUTES: Routes = {
-	...HANDOUT_ROUTES,
 	...ABBR_ROUTES,
 	...ACCORDION_ROUTES,
 	...ALERT_ROUTES,
@@ -67,6 +67,7 @@ export const ROUTES: Routes = {
 	...DETAILS_ROUTES,
 	...DRAWER_ROUTES,
 	...FORM_ROUTES,
+	...HANDOUT_ROUTES,
 	...HEADING_ROUTES,
 	...ICON_ROUTES,
 	...IMAGE_ROUTES,
@@ -88,13 +89,15 @@ export const ROUTES: Routes = {
 	...MODAL_ROUTES,
 	...NAV_ROUTES,
 	...PAGINATION_ROUTES,
+	...POPOVER_BUTTON_ROUTES,
 	...PROGRESS_ROUTES,
 	...QUOTE_ROUTES,
+	...SCENARIO_ROUTES,
 	...SELECT_ROUTES,
 	...SELECT_ROUTES,
+	...SINGLE_SELECT_ROUTES,
 	...SKIP_NAV_ROUTES,
 	...SPIN_ROUTES,
-	...SINGLE_SELECT_ROUTES,
 	...SPLIT_BUTTON_ROUTES,
 	...TABLE_ROUTES,
 	...TABS_ROUTES,
@@ -103,5 +106,4 @@ export const ROUTES: Routes = {
 	...TOOLBAR_ROUTES,
 	...TREE_ROUTES,
 	...VERSION_ROUTES,
-	...SCENARIO_ROUTES,
 };

package/src/style.scss

@@ -1,4 +1,4 @@
-@import './@shared/mixins';
+@use './@shared/mixins' as *;
 
 :root {
 	--kolibri-root-font-size: 100;
@@ -50,7 +50,7 @@ hr {
 	}
 
 	.app-sidebar {
-		border-right: rem(1) solid gray;
+		border-right: 1px solid gray;
 		position: relative;
 
 		& .scrollable-container-wrapper {