Skip to content

Commit

Permalink
feat: add disabled to accordion, details and links too
Browse files Browse the repository at this point in the history
  • Loading branch information
deleonio committed Feb 6, 2024
1 parent c832f83 commit d2dd448
Show file tree
Hide file tree
Showing 63 changed files with 1,087 additions and 2,125 deletions.
16 changes: 16 additions & 0 deletions packages/components/.knip.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
{
"entry": ["src/index.ts"],
"ignore": ["src/assets/**", "src/dev/**", "src/global/**"],
"ignoreBinaries": [],
"ignoreDependencies": [
"@stencil/angular-output-target",
"@stencil/react-output-target",
"@stencil/solid-output-target",
"@stencil/vue-output-target",
"eslint-plugin-html",
"eslint-plugin-jsdoc",
"eslint-plugin-json",
"eslint-plugin-react"
],
"project": ["src/**/*.ts"]
}
21 changes: 7 additions & 14 deletions packages/components/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -52,19 +52,19 @@
],
"scripts": {
"build": "npm run build:light",
"build:deps": "pnpm --filter @public-ui/components^... build",
"build:light": "npm run clear && mkdir doc && cross-env NODE_ENV=production stencil build --docs --prod && node scripts/hashing.js && node scripts/autogen.doc.js && node scripts/vaadin.js && npm run format -- -w",
"clear": "rimraf dist doc loader www ../adapters/angular/v11/src ../adapters/angular/v12/src ../adapters/angular/v13/src ../adapters/angular/v14/src ../adapters/angular/v15/src ../adapters/angular/v16/src ../adapters/angular/v17/src ../adapters/hydrate/dist ../adapters/react/src ../adapters/solid/src ../adapters/vaadin/*.java ../adapters/vue/src",
"depcheck": "depcheck --ignore-bin-package --skip-missing --ignores=@types/*,@public-ui/*,@stencil/*,eslint-*,postcss-windicss,tslib,workbox-build",
"format": "prettier --check src",
"lighthouse": "lighthouse --chrome-flags=\"--headless\" --output-path lighthouse.report.html --preset=desktop --quiet",
"lint": "eslint src && tsc --noemit",
"unused": "ts-prune src -e",
"lint": "tsc --noemit && eslint src",
"start": "cross-env NODE_ENV=development stencil build --dev --serve --watch --no-open",
"dev": "cross-env NODE_ENV=development stencil build --prod --watch",
"test": "cross-env NODE_ENV=test stencil test --spec --json --outputFile dist/jest-test-results.json",
"test:watch": "cross-env NODE_ENV=test stencil test --spec --watchAll",
"postpack": "mv package.bak.json package.json",
"prepack": "npm run build && cp package.json package.bak.json && rimraf dist/collection dist/kolibri/assets/@leanup dist/types/assets/@leanup && node scripts/anonymous.js && node scripts/minify.js"
"prepack": "npm run build && cp package.json package.bak.json && rimraf dist/collection dist/kolibri/assets/@leanup dist/types/assets/@leanup && node scripts/anonymous.js && node scripts/minify.js",
"xunused": "knip"
},
"dependencies": {
"@floating-ui/dom": "1.5.4",
Expand All @@ -76,35 +76,31 @@
"devDependencies": {
"@stencil/angular-output-target": "0.8.3",
"@stencil/core": "4.11.0",
"@stencil/postcss": "2.1.0",
"@stencil/react-output-target": "0.5.3",
"@stencil/solid-output-target": "file:node_martin/stencil-solid-output-target-0.0.1.tgz",
"@stencil/vue-output-target": "0.8.7",
"@types/color-convert": "2.0.3",
"@types/jest": "26.0.24",
"@types/markdown-it": "13.0.7",
"@types/mustache": "4.2.5",
"@types/node": "ts5.3",
"@types/pug": "2.0.10",
"@types/twig": "1.12.16",
"@types/wcag-contrast": "3.0.3",
"@typescript-eslint/eslint-plugin": "6.19.1",
"@typescript-eslint/parser": "6.19.1",
"autoprefixer": "10.4.17",
"clean-css": "5.3.3",
"color-rgba": "2.4.0",
"cross-env": "7.0.3",
"clsx": "2.1.0",
"cssnano": "6.0.3",
"eslint": "8.56.0",
"eslint-config-prettier": "9.1.0",
"eslint-plugin-html": "7.1.0",
"eslint-plugin-jsdoc": "48.0.3",
"eslint-plugin-json": "3.1.0",
"eslint-plugin-jsx-a11y": "6.8.0",
"eslint-plugin-no-loops": "0.3.0",
"eslint-plugin-react": "7.33.2",
"jest": "26.6.3",
"jest-cli": "26.6.3",
"knip": "4.2.3",
"lighthouse": "11.5.0",
"mustache": "4.2.0",
"postcss": "8.4.33",
Expand All @@ -116,10 +112,7 @@
"terser": "5.27.0",
"tslib": "2.6.2",
"twig": "1.17.1",
"typescript": "5.3.3",
"wcag-contrast": "3.0.0",
"webpack": "5.90.0",
"workbox-build": "7.0.0"
"typescript": "5.3.3"
},
"files": [
"assets",
Expand Down
40 changes: 40 additions & 0 deletions packages/components/src/components.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,10 @@ export namespace Components {
"_tooltipAlign"?: TooltipAlignPropType;
}
interface KolAccordion {
/**
* Makes the element not focusable and ignore all events.
*/
"_disabled"?: boolean;
/**
* Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).
*/
Expand Down Expand Up @@ -407,6 +411,10 @@ export namespace Components {
"_on"?: KoliBriCardEventCallbacks;
}
interface KolDetails {
/**
* Makes the element not focusable and ignore all events.
*/
"_disabled"?: boolean;
/**
* Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).
*/
Expand Down Expand Up @@ -1643,6 +1651,10 @@ export namespace Components {
* Defines the value for the aria-current attribute.
*/
"_ariaCurrentValue"?: AriaCurrentValuePropType;
/**
* Makes the element not focusable and ignore all events.
*/
"_disabled"?: boolean;
/**
* Tells the browser that the link contains a file. Optionally sets the filename.
*/
Expand Down Expand Up @@ -1698,6 +1710,10 @@ export namespace Components {
* Defines the custom class attribute if _variant="custom" is set.
*/
"_customClass"?: CustomClassPropType;
/**
* Makes the element not focusable and ignore all events.
*/
"_disabled"?: boolean;
/**
* Tells the browser that the link contains a file. Optionally sets the filename.
*/
Expand Down Expand Up @@ -1771,6 +1787,10 @@ export namespace Components {
* Defines the value for the aria-current attribute.
*/
"_ariaCurrentValue"?: AriaCurrentValuePropType;
/**
* Makes the element not focusable and ignore all events.
*/
"_disabled"?: boolean;
/**
* Tells the browser that the link contains a file. Optionally sets the filename.
*/
Expand Down Expand Up @@ -2810,6 +2830,10 @@ declare namespace LocalJSX {
"_tooltipAlign"?: TooltipAlignPropType;
}
interface KolAccordion {
/**
* Makes the element not focusable and ignore all events.
*/
"_disabled"?: boolean;
/**
* Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).
*/
Expand Down Expand Up @@ -3194,6 +3218,10 @@ declare namespace LocalJSX {
"_on"?: KoliBriCardEventCallbacks;
}
interface KolDetails {
/**
* Makes the element not focusable and ignore all events.
*/
"_disabled"?: boolean;
/**
* Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).
*/
Expand Down Expand Up @@ -4420,6 +4448,10 @@ declare namespace LocalJSX {
* Defines the value for the aria-current attribute.
*/
"_ariaCurrentValue"?: AriaCurrentValuePropType;
/**
* Makes the element not focusable and ignore all events.
*/
"_disabled"?: boolean;
/**
* Tells the browser that the link contains a file. Optionally sets the filename.
*/
Expand Down Expand Up @@ -4475,6 +4507,10 @@ declare namespace LocalJSX {
* Defines the custom class attribute if _variant="custom" is set.
*/
"_customClass"?: CustomClassPropType;
/**
* Makes the element not focusable and ignore all events.
*/
"_disabled"?: boolean;
/**
* Tells the browser that the link contains a file. Optionally sets the filename.
*/
Expand Down Expand Up @@ -4548,6 +4584,10 @@ declare namespace LocalJSX {
* Defines the value for the aria-current attribute.
*/
"_ariaCurrentValue"?: AriaCurrentValuePropType;
/**
* Makes the element not focusable and ignore all events.
*/
"_disabled"?: boolean;
/**
* Tells the browser that the link contains a file. Optionally sets the filename.
*/
Expand Down
19 changes: 16 additions & 3 deletions packages/components/src/components/accordion/component.tsx
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
// https://codepen.io/mbxtr/pen/OJPOYg?html-preprocessor=haml

import { featureHint, propagateFocus, setState, validateDisabled, validateLabel, validateOpen } from '@public-ui/schema';
import type { JSX } from '@stencil/core';
import { featureHint, propagateFocus, setState, validateLabel, validateOpen } from '@public-ui/schema';
import { Component, Element, h, Host, Prop, State, Watch } from '@stencil/core';
import { Component, Element, Host, Prop, State, Watch, h } from '@stencil/core';

import { nonce } from '../../utils/dev.utils';
import { watchHeadingLevel } from '../heading/validation';

import type { AccordionAPI, AccordionStates, HeadingLevel, KoliBriAccordionCallbacks, LabelPropType, OpenPropType } from '@public-ui/schema';
import type { AccordionAPI, AccordionStates, DisabledPropType, HeadingLevel, KoliBriAccordionCallbacks, LabelPropType, OpenPropType } from '@public-ui/schema';
featureHint(`[KolAccordion] Anfrage nach einer KolAccordionGroup bei dem immer nur ein Accordion geöffnet ist.
- onClick auf der KolAccordion anwenden
Expand Down Expand Up @@ -40,6 +40,7 @@ export class KolAccordion implements AccordionAPI {
<div
class={{
accordion: true,
disabled: this.state._disabled === true,
open: this.state._open === true,
}}
>
Expand All @@ -50,6 +51,7 @@ export class KolAccordion implements AccordionAPI {
slot="expert"
_ariaControls={this.nonce}
_ariaExpanded={this.state._open}
_disabled={this.state._disabled}
_icons={this.state._open ? 'codicon codicon-remove' : 'codicon codicon-add'}
_label={this.state._label}
_on={{ onClick: this.onClick }}
Expand All @@ -67,6 +69,11 @@ export class KolAccordion implements AccordionAPI {
);
}

/**
* Makes the element not focusable and ignore all events.
*/
@Prop() public _disabled?: boolean = false;

/**
* Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).
*/
Expand All @@ -93,6 +100,11 @@ export class KolAccordion implements AccordionAPI {
_level: 1,
};

@Watch('_disabled')
public validateDisabled(value?: DisabledPropType): void {
validateDisabled(this, value);
}

@Watch('_label')
public validateLabel(value?: LabelPropType): void {
validateLabel(this, value, {
Expand All @@ -118,6 +130,7 @@ export class KolAccordion implements AccordionAPI {
}

public componentWillLoad(): void {
this.validateDisabled(this._disabled);
this.validateLabel(this._label);
this.validateLevel(this._level);
this.validateOn(this._on);
Expand Down
13 changes: 7 additions & 6 deletions packages/components/src/components/accordion/readme.md
Original file line number Diff line number Diff line change
Expand Up @@ -109,12 +109,13 @@ Standardansicht gelegt.

## Properties

| Property | Attribute | Description | Type | Default |
| --------------------- | --------- | ------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------ | ----------- |
| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string` | `undefined` |
| `_level` | `_level` | Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text. | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| undefined` | `1` |
| `_on` | -- | Gibt die EventCallback-Funktionen an. | `undefined \| { onClick?: EventValueOrEventCallback<Event, boolean> \| undefined; }` | `undefined` |
| `_open` | `_open` | If set (to true) opens/expands the element, closes if not set (or set to false). | `boolean \| undefined` | `false` |
| Property | Attribute | Description | Type | Default |
| --------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------ | ----------- |
| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \| undefined` | `false` |
| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string` | `undefined` |
| `_level` | `_level` | Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text. | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| undefined` | `1` |
| `_on` | -- | Gibt die EventCallback-Funktionen an. | `undefined \| { onClick?: EventValueOrEventCallback<Event, boolean> \| undefined; }` | `undefined` |
| `_open` | `_open` | If set (to true) opens/expands the element, closes if not set (or set to false). | `boolean \| undefined` | `false` |

## Slots

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ export const getAccordionHtml = (
);
return `<kol-accordion${props._open ? ' _open' : ''}>
<mock:shadow-root>
<div class="accordion ${props._open ? 'open' : ''}">
<div class="accordion${props._disabled ? ' disabled' : ''}${props._open ? ' open' : ''}">
${getHeadingWcHtml(
{
_label: '',
Expand All @@ -32,7 +32,8 @@ export const getAccordionHtml = (
{
_ariaControls: 'nonce',
_ariaExpanded: props._open === true,
_icons: `codicon codicon-${props._open ? 'chrome-minimize' : 'add'}`,
_disabled: props._disabled,
_icons: `codicon codicon-${props._open ? 'remove' : 'add'}`,
_label: props._label,
},
undefined,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -19,9 +19,10 @@ executeTests<AccordionProps>(
return page;
},
{
_disabled: [true, false],
_label: ['Überschrift'],
// _level: [1, 2, 3, 4, 5, 6],
// _open: [true, false],
_level: [1, 2, 3, 4, 5, 6],
_open: [true, false],
},
getAccordionHtml,
{
Expand Down
4 changes: 0 additions & 4 deletions packages/components/src/components/button.css
Original file line number Diff line number Diff line change
Expand Up @@ -19,8 +19,4 @@
margin: auto;
width: 100%;
}
:is(button):disabled {
cursor: not-allowed;
opacity: 0.5;
}
}
8 changes: 2 additions & 6 deletions packages/components/src/components/button/component.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,6 @@ import type {
TooltipAlignPropType,
} from '@public-ui/schema';
import {
a11yHintDisabled,
mapBoolean2String,
mapStringOrBoolean2String,
propagateFocus,
Expand All @@ -40,7 +39,7 @@ import {
validateTooltipAlign,
watchString,
} from '@public-ui/schema';
import { Component, Element, h, Host, Prop, State, Watch } from '@stencil/core';
import { Component, Element, Host, Prop, State, Watch, h } from '@stencil/core';

import { stopPropagation, tryToDispatchKoliBriEvent } from '../../utils/events';
import { propagateResetEventToForm, propagateSubmitEventToForm } from '../form/controller';
Expand Down Expand Up @@ -103,10 +102,10 @@ export class KolButtonWc implements ButtonAPI {
aria-selected={mapStringOrBoolean2String(this.state._ariaSelected)}
class={{
button: true,
disabled: this.state._disabled === true,
[this.state._variant as string]: this.state._variant !== 'custom',
[this.state._customClass as string]:
this.state._variant === 'custom' && typeof this.state._customClass === 'string' && this.state._customClass.length > 0,
'icon-only': this.state._hideLabel === true,
'hide-label': this.state._hideLabel === true,
}}
disabled={this.state._disabled}
Expand Down Expand Up @@ -283,9 +282,6 @@ export class KolButtonWc implements ButtonAPI {
@Watch('_disabled')
public validateDisabled(value?: DisabledPropType): void {
validateDisabled(this, value);
if (value === true) {
a11yHintDisabled();
}
}

@Watch('_hideLabel')
Expand Down
Loading

0 comments on commit d2dd448

Please sign in to comment.