diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md index 8dab661faef..7dc0a42d58c 100644 --- a/.github/PULL_REQUEST_TEMPLATE.md +++ b/.github/PULL_REQUEST_TEMPLATE.md @@ -7,11 +7,11 @@ -- [ ] Bugfix (non-breaking change which fixes an issue) -- [ ] New feature (non-breaking change which adds functionality) -- [ ] Refactoring (fix on existing components or architectural decisions) -- [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected) -- [ ] Documentation Update (if none of the other choices apply) +- [ ] Bugfix (non-breaking change which fixes an issue) +- [ ] New feature (non-breaking change which adds functionality) +- [ ] Refactoring (fix on existing components or architectural decisions) +- [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected) +- [ ] Documentation Update (if none of the other choices apply) + + + + + Icon Overview + + + + + + + + +
+ ${ALL_ICONS.map( + (icon) => ` +
+${icon}${icon} +
` + ).join('\n')} +
+ +`; + writeFileSync('./src/icons.html', iconHtml); + } catch (error) { + console.error(error); + } +}; + +generateIconOverview(); diff --git a/packages/foundations/scripts/test/color-q32024/color-q32024.spec.ts b/packages/foundations/scripts/test/color-q32024/color-q32024.spec.ts deleted file mode 100644 index 15aff5e9ec8..00000000000 --- a/packages/foundations/scripts/test/color-q32024/color-q32024.spec.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { describe, expect, test } from 'vitest'; -import { migrate } from '../../migration'; -import { ReplaceResult } from 'replace-in-file'; - -describe('color-q32024', () => { - test('check if changes are detected', async () => { - const result = migrate({ - src: './scripts/test/color-q32024', - type: ['colorQ32024'], - dryRun: true - }); - - expect(result).not.undefined; - - expect( - (result as ReplaceResult[]).filter((res) => res.hasChanged) - ).toHaveLength(1); - }); -}); diff --git a/packages/foundations/scripts/test/icon-q32024/icon-q32024.spec.ts b/packages/foundations/scripts/test/icon-q32024/icon-q32024.spec.ts deleted file mode 100644 index 6f883bb43ae..00000000000 --- a/packages/foundations/scripts/test/icon-q32024/icon-q32024.spec.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { describe, expect, test } from 'vitest'; -import { migrate } from '../../migration'; -import { ReplaceResult } from 'replace-in-file'; - -describe('icon-q32024', () => { - test('check if changes are detected', async () => { - const result = migrate({ - src: './scripts/test/icon-q32024', - type: ['iconQ32024'], - dryRun: true - }); - - expect(result).not.undefined; - - expect( - (result as ReplaceResult[]).filter((res) => res.hasChanged) - ).toHaveLength(1); - }); -}); diff --git a/packages/foundations/scripts/tsconfig.json b/packages/foundations/scripts/tsconfig.json deleted file mode 100644 index 04688f1bd20..00000000000 --- a/packages/foundations/scripts/tsconfig.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "compilerOptions": { - "target": "es2021", - "module": "nodenext", - "strictNullChecks": true, - "lib": ["ESNext"] - } -} diff --git a/packages/foundations/scripts/types.ts b/packages/foundations/scripts/types.ts deleted file mode 100644 index 27b92c6e435..00000000000 --- a/packages/foundations/scripts/types.ts +++ /dev/null @@ -1,15 +0,0 @@ -export type ProgrammOptionsType = { - name: string; - short?: string; - long?: string; - array?: boolean; - required?: boolean; - description?: string; - defaultValue?: string | boolean | string[]; -}; - -export type OptionsType = { - src: string; - type: (string | 'colorQ32024' | 'iconQ32024')[]; - dryRun?: string | boolean; -}; diff --git a/packages/foundations/scripts/vitest.config.ts b/packages/foundations/scripts/vitest.config.ts deleted file mode 100644 index d3230064db1..00000000000 --- a/packages/foundations/scripts/vitest.config.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { defineConfig } from 'vitest/config'; - -export default defineConfig({ - test: { - include: ['scripts/**/*.{test,spec}.?(c|m)[jt]s?(x)'] - } -}); diff --git a/packages/foundations/scss/helpers/_focus.scss b/packages/foundations/scss/helpers/_focus.scss index 3b9e357247b..2fa9e74fd1e 100644 --- a/packages/foundations/scss/helpers/_focus.scss +++ b/packages/foundations/scss/helpers/_focus.scss @@ -2,9 +2,14 @@ @use "../colors"; %focus-placeholder { - outline: #{variables.$db-border-height-2xs} solid var(--db-focus-outline-color, #{colors.$db-informational-on-bg-basic-emphasis-80-default}); + outline: #{variables.$db-border-height-2xs} solid + var( + --db-focus-outline-color, + #{colors.$db-informational-on-bg-basic-emphasis-80-default} + ); outline-offset: variables.$db-border-height-xs; - box-shadow: 0 0 0 #{variables.$db-border-height-xs} var(--db-focus-box-shadow-bg-color, transparent); + box-shadow: 0 0 0 #{variables.$db-border-height-xs} + var(--db-focus-box-shadow-bg-color, transparent); &:not([type="radio"], [role="switch"]) { border-radius: variables.$db-border-radius-xs; diff --git a/packages/foundations/scss/icons/_icon-helpers.scss b/packages/foundations/scss/icons/_icon-helpers.scss index 0bf96168509..4ddd55bcb3b 100644 --- a/packages/foundations/scss/icons/_icon-helpers.scss +++ b/packages/foundations/scss/icons/_icon-helpers.scss @@ -60,22 +60,24 @@ $default-icon-font-size: var(--db-icon-font-size, #{$default-icon-size-rem}); // Icon SCSS mixin @mixin set-icon($icon: "", $position: "before") { - &::#{$position} { - @if $icon != "" { - @extend %icon; + &:not([data-hide-icon-#{$position}="true"]) { + &::#{$position} { + @if $icon != "" { + @extend %icon; - @if $position == "before" { - --db-icon: "#{$icon}"; + @if $position == "before" { + --db-icon: "#{$icon}"; - margin-inline-end: $default-icon-margin-end; - } + margin-inline-end: $default-icon-margin-end; + } - @if $position == "after" { - --db-icon-after: "#{$icon}"; + @if $position == "after" { + --db-icon-after: "#{$icon}"; - @include icon-content($default-icon-content-after); + @include icon-content($default-icon-content-after); - margin-inline-start: $default-icon-margin-start; + margin-inline-start: $default-icon-margin-start; + } } } } diff --git a/packages/foundations/scss/icons/include.scss b/packages/foundations/scss/icons/include.scss index ccd443f4b80..8053120accf 100644 --- a/packages/foundations/scss/icons/include.scss +++ b/packages/foundations/scss/icons/include.scss @@ -67,6 +67,8 @@ } } +[data-hide-icon="true"], +[data-hide-icon-before="true"], [data-icon="none"], [data-icon-before="none"] { &::before { @@ -86,6 +88,7 @@ } } +[data-hide-icon-after="true"], [data-icon-after="none"] { &::after { content: none; diff --git a/packages/foundations/scss/init/required.scss b/packages/foundations/scss/init/required.scss index a0829ba568c..c2db952dcd5 100644 --- a/packages/foundations/scss/init/required.scss +++ b/packages/foundations/scss/init/required.scss @@ -89,14 +89,14 @@ iframe { // Focus styles :is( - a, - button, - input, - textarea, - summary, - select, - [tabindex]:not([tabindex="-1"]) - ) { + a, + button, + input, + textarea, + summary, + select, + [tabindex]:not([tabindex="-1"]) +) { &:focus-visible { @extend %focus-placeholder; } diff --git a/packages/foundations/src/icons.html b/packages/foundations/src/icons.html index 3eb86ef0512..98514342013 100644 --- a/packages/foundations/src/icons.html +++ b/packages/foundations/src/icons.html @@ -1,3 +1,4 @@ + @@ -20,64 +21,41 @@
- ear -
-
- airplaneear_disabledairplane
+
- alarm_clockperson_with_blind_canealarm_clock
+
person_with_rollator -
-
- alarm_clock_plussupport_dogalarm_clock_plus
+
arrow_down
+
arrow_left
+
arrow_right
+
arrow_up
+
+
arrows_horizontalchevron_downarrows_horizontal
+
arrows_verticalchevron_leftarrows_vertical
+
artificial_intelligencechevron_rightartificial_intelligence
+
- augmented_realitychevron_upaugmented_reality
+
- bellarrows_horizontalbell
+
bell_disabledarrows_verticalbell_disabled
+
- beveragecircular_arrowsbeverage
+
- bikesort_downbike
+
- bike_trailersort_upbike_trailer
+
- binarrows_horizontalbin
+
- blockarrows_verticalblock
+
- boatundoboat
+
- breakfastfast_backward_10breakfast
+
- bugfast_backwardbug
+
- busfast_backward_30bus
+
- calendarfast_forward_10calendar
+
- camerafast_forwardcamera
+
- carfast_forward_30car
+
- cashmicrophonecash
+
- chatpausechat
+
- checkplaycheck
+
check_circleskip_backwardcheck_circle
+
chevron_downskip_forwardchevron_down
+
- chevron_leftstop -
-
- subtitleschevron_left
+
chevron_rightvolume_disabledchevron_right
+
- chevron_upvolume_downchevron_up
+
cigarette_disabledvolume_silentcigarette_disabled
+
- circular_arrowsvolume_upcircular_arrows
+
- clapperboardhouseclapperboard
+
- clockmarketclock
+
train_station -
-
- clothes_hangercashclothes_hanger
+
- cloudcredit_cardcloud
+
- cloud_downloaddiscountcloud_download
+
cloud_uploadgeneric_cardcloud_upload
+
- compassgiftcompass
+
- copyparagraph_markcopy
+
- credit_cardsepacredit_card
+
- crossshopping_bagcross
+
cross_circleshopping_basketcross_circle
+
- crownshopping_basket_disabledcrown
+
- cupshopping_cartcup
+
- databaseshopping_cart_disableddatabase
+
- dbticketsdb
+
- discountticketdiscount
+
- documentvoucherdocument
+
- document_checkchatdocument_check
+
- dots_drag_and_dropenvelopedots_drag_and_drop
+
- downloadpaper_planedownload
+
- earspeech_bubblesear
+
ear_disabledspeech_bubbleear_disabled
+
electric_carspeech_bubble_exclamation_markelectric_car
+
electric_scooterspeech_bubble_question_markelectric_scooter
+
- envelopealarm_clockenvelope
+
exclamation_mark_circlealarm_clock_plusexclamation_mark_circle
+
- exclamation_mark_trianglecalendarexclamation_mark_triangle
+
- eyeclockeye
+
- eye_disabledcameraeye_disabled
+
- face_delightedfax_machineface_delighted
+
face_disappointedmobile_phoneface_disappointed
+
face_neutralmobile_phone_disabledface_neutral
+
- face_sadprinterface_sad
+
- face_smilingtelephoneface_smiling
+
- fast_backwardbinfast_backward
+
- fast_backward_10blockfast_backward_10
+
- fast_backward_30checkfast_backward_30
+
- fast_backward_emptycopyfast_backward_empty
+
- fast_forwardcrossfast_forward
+
fast_forward_10dots_drag_and_dropfast_forward_10
+
- fast_forward_30minusfast_forward_30
+
- fast_forward_emptypenfast_forward_empty
+
- fax_machineplusfax_machine
+
- fingerprintsavefingerprint
+
- foldercloudfolder
+
- folder_openglobefolder_open
+
- fullscreenleaffullscreen
+
- fullscreen_exitmoonfullscreen_exit
+
- gear_wheelsnow_flakegear_wheel
+
- generic_cardsungeneric_card
+
- giftwater_dropgift
+
- globecloud_downloadglobe
+
- gridcloud_uploadgrid
+
- hand_washingdocumenthand_washing
+
- handcartdocument_checkhandcart
+
- heartdownloadheart
+
- housefolderhouse
+
- imagefolder_openimage
+
- information_circleimageinformation_circle
+
- keynotebookkey
+
- knife_and_forkpaper_clipknife_and_fork
+
- leafuploadleaf
+
- light_bulbbeveragelight_bulb
+
- link_chainbreakfastlink_chain
+
- listcuplist
+
location_arrowknife_and_forklocation_arrow
+
location_arrow_northcigarette_disabledlocation_arrow_north
+
location_crosshairsclothes_hangerlocation_crosshairs
+
location_pinhand_washinglocation_pin +
+ +
+ lock_closed +
+ +
+ lock_open
+ +
+ log_in +
+ +
+ log_out +
+
magnifying_glassrestricted_mobility_toiletmagnifying_glass
+
- mapshowermap
+
- map_pinshower_menmap_pin +
+ +
+ market +
+ +
+ mask
+
medical_crossshower_womenmedical_cross
+
- menustrollermenu
+
- microphonetoysmicrophone
+
- minusminus +
+ +
+ personsmobile_phone
+
- mobile_phone_disabledpersonmobile_phone_disabled
+
- moontoiletsmoon
+
- more_horizontaltoilet_menmore_horizontal
+
- more_verticalwc_signmore_vertical
+
navigation_straighttoilet_womennavigation_straight
+
navigation_to_leftsliders_horizontalnavigation_to_left
+
- navigation_to_rightfullscreennavigation_to_right
+
navigation_u_turnfullscreen_exitnavigation_u_turn
+
- notebookgridnotebook
+
- paper_cliplistpaper_clip
+
- paper_planeresizepaper_plane
+
paragraph_markresize_handle_cornerparagraph_mark
+
- parkingzoom_inparking
+
- pausezoom_outpause
+
- pedestriandbpedestrian
+
- pens_bahnpen
+
- personsubwayperson
+
- person_with_blind_canecompassperson_with_blind_cane
+
person_with_rollatorlocation_arrowperson_with_rollator
+
person_with_wheelchairlocation_arrow_northperson_with_wheelchair
+
- personslocation_crosshairspersons +
+ +
+ pin +
+ +
+ play +
+ +
+ plus
+
power_socketlocation_pinpower_socket
+
- printermapprinter
+
- qr_codemap_pinqr_code
+
qr_code_scannavigation_straightqr_code_scan
+
question_mark_circlenavigation_to_leftquestion_mark_circle +
+ +
+ resize
+
resize_handle_cornernavigation_to_rightresize_handle_corner
+
restricted_mobility_toiletnavigation_u_turnrestricted_mobility_toilet
+
- road_signparkingroad_sign
+
- s_bahnroad_signs_bahn
+
- savestationsave
+
- scootermaskscooter
+
- sepamedical_crosssepa
+
- sharegear_wheelshare
+
- shield_checklog_inshield_check
+
- shiplog_outship
+
shopping_bagmagnifying_glassshopping_bag
+
- shopping_basketmenushopping_basket
+
shopping_basket_disabledmore_horizontalshopping_basket_disabled
+
shopping_cartmore_verticalshopping_cart
+
- shopping_cart_disabledbellshopping_cart_disabled
+
- showerbell_disabledshower
+
- shower_mencheck_circleshower_men
+
shower_womencross_circleshower_women
+
skip_backwardexclamation_mark_circleskip_backward
+
skip_forwardinformation_circleskip_forward
+
sliders_horizontalquestion_mark_circlesliders_horizontal
+
- snow_flakeexclamation_mark_trianglesnow_flake
+
- sort_downfingerprintsort_down
+
- sort_upkeysort_up
+
- speech_bubblelock_closedspeech_bubble
+
- speech_bubble_exclamation_marklock_openspeech_bubble_exclamation_mark
+
speech_bubble_question_markshield_checkspeech_bubble_question_mark
+
speech_bubbleseye_disabledspeech_bubbles
+
- speedometereyespeedometer
+
- starcrownstar
+
- stationface_delightedstation
+
- stopface_disappointedstop +
+ +
+ stroller
+
- subtitlesface_neutralsubtitles
+
- subwayface_sadsubway
+
- sunface_smilingsun
+
- support_dogheartsupport_dog
+
- taxisharetaxi
+
- telephonestartelephone
+
thumbs_down
+
thumbs_up
+
- augmented_reality -
-
- ticketbugticket
+
- ticketsdatabasetickets
+
- toilet_menlight_bulbtoilet_men
+
toilet_womenpower_sockettoilet_women
+
- toiletsqr_codetoilets
+
- toysqr_code_scantoys
+
- trainspeedometertrain
+
- train_and_carwifitrain_and_car
+
train_stationwifi_disabledtrain_station
+
- translationwrenchtranslation
+
- undoairplaneundo
+
- uploadbikeupload
+
volume_disabledbike_trailervolume_disabled
+
- volume_downboatvolume_down
+
- volume_silentbusvolume_silent
+
- volume_upcarvolume_up
+
- voucherelectric_carvoucher
+
- water_dropelectric_scooterwater_drop
+
- wc_signhandcartwc_sign
+
- wifipedestrianwifi
+
- wifi_disabledscooterwifi_disabled
+
- wrenchshipwrench
+
- x_placeholdertaxix_placeholder
+
- zoom_intrainzoom_in
+
- zoom_outtrain_and_carzoom_out
diff --git a/packages/foundations/test/colors.spec.mjs b/packages/foundations/test/colors.spec.js similarity index 100% rename from packages/foundations/test/colors.spec.mjs rename to packages/foundations/test/colors.spec.js diff --git a/packages/foundations/test/fonts.spec.mjs b/packages/foundations/test/fonts.spec.js similarity index 100% rename from packages/foundations/test/fonts.spec.mjs rename to packages/foundations/test/fonts.spec.js diff --git a/packages/foundations/test/icons.spec.mjs b/packages/foundations/test/icons.spec.js similarity index 100% rename from packages/foundations/test/icons.spec.mjs rename to packages/foundations/test/icons.spec.js diff --git a/packages/foundations/test/playwright.config.mjs b/packages/foundations/test/playwright.config.js similarity index 100% rename from packages/foundations/test/playwright.config.mjs rename to packages/foundations/test/playwright.config.js diff --git a/packages/foundations/vite.config.js b/packages/foundations/vite.config.ts similarity index 100% rename from packages/foundations/vite.config.js rename to packages/foundations/vite.config.ts diff --git a/packages/migration/README.md b/packages/migration/README.md new file mode 100644 index 00000000000..1117b0d2b91 --- /dev/null +++ b/packages/migration/README.md @@ -0,0 +1,34 @@ +# @db-ui/migration + +![Apache 2.0 license badge](https://img.shields.io/badge/License-Apache_2.0-blue.svg) +[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier) +[![Conventional Commits](https://img.shields.io/badge/Conventional%20Commits-1.0.0-yellow.svg)](https://conventionalcommits.org) +[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](https://makeapullrequest.com) + +## Usage + +We provide a cli tool to auto migrate your source code. Use this command in your repository: + +```shell +npx @db-ui/migration --type=v005_v006 --src=./src +``` + +## Deutsche Bahn brand + +As we'd like to perfectly support our users and customers on their digital journey, the usage of Deutsche Bahn brand and trademarks are bound of clear guidelines and restrictions even when being used with the code that we're provide with this product; Deutsche Bahn fully reserves all rights regarding the Deutsche Bahn brand, even though that we're providing the code of DB UI products free to use and release it under the Apache 2.0 license. +Please have a look at our brand portal at for any further questions and whom to contact on any brand issues. + +You must remove or replace any Deutsche Bahn brand and design assets as well as protected characteristics and trademarks. We're even also planning to provide a neutral theme that would make it much easier for you to use our product without the trademarks by Deutsche Bahn. + +## Contributions + +Contributions are very welcome, please refer to the [contribution guide](https://github.com/db-ui/mono/blob/main/CONTRIBUTING.md). + +## Code of conduct + +We as members, contributors, and leaders pledge to make participation in our +community a harassment-free experience for everyone – have a look at our [Contributor Covenant Code of Conduct](https://github.com/db-ui/mono/blob/main/CODE-OF-CONDUCT.md). + +## License + +This project is licensed under [Apache-2.0](LICENSE). diff --git a/packages/migration/esbuild.js b/packages/migration/esbuild.js new file mode 100644 index 00000000000..9cb15585713 --- /dev/null +++ b/packages/migration/esbuild.js @@ -0,0 +1,10 @@ +import { build } from 'esbuild'; + +await build({ + entryPoints: ['./src/cli.ts'], + bundle: true, + outfile: './build/index.js', + platform: 'node', + format: 'esm', + packages: 'external' +}); diff --git a/packages/migration/package.json b/packages/migration/package.json new file mode 100644 index 00000000000..bdbac0fe7dd --- /dev/null +++ b/packages/migration/package.json @@ -0,0 +1,41 @@ +{ + "name": "@db-ui/migration", + "version": "0.0.0", + "type": "module", + "description": "Migration script for changing your code in between DB UX Design System v3 versions regarding BREAKING CHANGES.", + "repository": { + "type": "git", + "url": "https://github.com/db-ui/mono.git" + }, + "license": "Apache-2.0", + "bin": { + "@db-ui/migration": "build/index.js" + }, + "main": "build.js", + "files": [ + "build" + ], + "scripts": { + "build": "node esbuild.js", + "copy-build": "npm-run-all copy-build:*", + "copy-build:build": "cpr build ../../build-outputs/migration/build -o", + "copy-build:package.json": "cpr package.json ../../build-outputs/migration/package.json -o", + "copy-build:readme": "cpr README.md ../../build-outputs/migration/README.md -o", + "test": "vitest run --config vitest.config.ts", + "test:migration": "tsx src/cli.ts migration --type v005_v006 --src=./scss --dryRun=true" + }, + "dependencies": { + "commander": "^12.0.0", + "glob": "^11.0.0", + "replace-in-file": "^8.2.0" + }, + "devDependencies": { + "cpr": "3.0.1", + "tsx": "^4.19.2", + "vitest": "^2.1.8" + }, + "publishConfig": { + "registry": "https://registry.npmjs.org/", + "access": "public" + } +} diff --git a/packages/migration/src/cli.ts b/packages/migration/src/cli.ts new file mode 100644 index 00000000000..0edbe96c95b --- /dev/null +++ b/packages/migration/src/cli.ts @@ -0,0 +1,17 @@ +#!/usr/bin/env node + +import type { OptionsType } from './types'; +import startProgram from './program'; +import { options } from './data'; +import { migrate } from './migration'; + +const action = async (_: unknown, options: OptionsType) => { + migrate(options, true); +}; + +startProgram( + '@db-ui/foundations - migration', + 'CLI for DB UX Design System foundations', + options, + action +); diff --git a/packages/foundations/scripts/data.ts b/packages/migration/src/data.ts similarity index 89% rename from packages/foundations/scripts/data.ts rename to packages/migration/src/data.ts index ca9b512583b..7443cec93c2 100644 --- a/packages/foundations/scripts/data.ts +++ b/packages/migration/src/data.ts @@ -2,10 +2,12 @@ import type { ProgrammOptionsType } from './types'; import { colorQ32024 } from './migration/color-q32024'; import type { ReplaceInFileConfig } from 'replace-in-file'; import { iconQ32024 } from './migration/icon-q32024'; +import { v005_v006 } from './migration/v0.0.5-v0.0.6'; export const migrationTypes: Record = { colorQ32024, - iconQ32024 + iconQ32024, + v005_v006 }; export const options: ProgrammOptionsType[] = [ diff --git a/packages/foundations/scripts/migration/color-q32024.ts b/packages/migration/src/migration/color-q32024.ts similarity index 100% rename from packages/foundations/scripts/migration/color-q32024.ts rename to packages/migration/src/migration/color-q32024.ts diff --git a/packages/foundations/scripts/migration/icon-q32024.ts b/packages/migration/src/migration/icon-q32024.ts similarity index 100% rename from packages/foundations/scripts/migration/icon-q32024.ts rename to packages/migration/src/migration/icon-q32024.ts diff --git a/packages/foundations/scripts/migration/index.ts b/packages/migration/src/migration/index.ts similarity index 78% rename from packages/foundations/scripts/migration/index.ts rename to packages/migration/src/migration/index.ts index 12d69f354e5..48700783c02 100644 --- a/packages/foundations/scripts/migration/index.ts +++ b/packages/migration/src/migration/index.ts @@ -1,6 +1,6 @@ import { globSync } from 'glob'; -import { ReplaceInFileConfig, replaceInFileSync } from 'replace-in-file'; -import type { ReplaceResult } from 'replace-in-file'; +import type { ReplaceInFileConfig, ReplaceResult } from 'replace-in-file'; +import { replaceInFileSync } from 'replace-in-file'; import type { OptionsType } from '../types'; import { migrationTypes } from '../data'; @@ -14,13 +14,17 @@ export const migrate = ( const paths = `${src}/**`; const globPaths: string[] = globSync(paths, { - nodir: true + nodir: true, + ignore: ['node_modules'] }).map((path) => path.replaceAll('\\', '/')); const replacements: ReplaceInFileConfig[] = Object.entries( migrationTypes ).reduce( - (previousReplacements, [currentKey, currentReplacements]) => + ( + previousReplacements: ReplaceInFileConfig[], + [currentKey, currentReplacements] + ) => type.includes(currentKey) ? [...previousReplacements, ...currentReplacements] : previousReplacements, diff --git a/packages/migration/src/migration/v0.0.5-v0.0.6.ts b/packages/migration/src/migration/v0.0.5-v0.0.6.ts new file mode 100644 index 00000000000..65da2b461e4 --- /dev/null +++ b/packages/migration/src/migration/v0.0.5-v0.0.6.ts @@ -0,0 +1,25 @@ +import type { ReplaceInFileConfig } from 'replace-in-file'; + +export const v005_v006: ReplaceInFileConfig[] = [ + // Components + { + files: '', + from: /behaviour="closeable"/g, + to: 'closeable="true"' + }, + { + files: '', + from: /behaviour="permanent"/g, + to: 'closeable="false"' + }, + { + files: '', + from: /variant="hidden"/g, + to: 'showLabel="false"' + }, + { + files: '', + from: /customValidity/g, + to: 'validation' + } +]; diff --git a/packages/foundations/scripts/program.ts b/packages/migration/src/program.ts similarity index 100% rename from packages/foundations/scripts/program.ts rename to packages/migration/src/program.ts diff --git a/packages/migration/src/types.ts b/packages/migration/src/types.ts new file mode 100644 index 00000000000..cfd22dc126b --- /dev/null +++ b/packages/migration/src/types.ts @@ -0,0 +1,17 @@ +import { v005_v006 } from './migration/v0.0.5-v0.0.6'; + +export type ProgrammOptionsType = { + name: string; + short?: string; + long?: string; + array?: boolean; + required?: boolean; + description?: string; + defaultValue?: string | boolean | string[]; +}; + +export type OptionsType = { + src: string; + type: (string | 'colorQ32024' | 'iconQ32024' | 'v005_v006')[]; + dryRun?: string | boolean; +}; diff --git a/packages/migration/test/color-q32024/color-q32024.spec.ts b/packages/migration/test/color-q32024/color-q32024.spec.ts new file mode 100644 index 00000000000..1bbf59447ea --- /dev/null +++ b/packages/migration/test/color-q32024/color-q32024.spec.ts @@ -0,0 +1,19 @@ +import { describe, expect, test } from 'vitest'; +import { type ReplaceResult } from 'replace-in-file'; +import { migrate } from '../../src/migration'; + +describe('color-q32024', () => { + test('check if changes are detected', async () => { + const result = migrate({ + src: './test/color-q32024', + type: ['colorQ32024'], + dryRun: true + }); + + expect(result).not.undefined; + + expect( + (result as ReplaceResult[]).filter((res) => res.hasChanged) + ).toHaveLength(1); + }); +}); diff --git a/packages/foundations/scripts/test/color-q32024/has-changes.txt b/packages/migration/test/color-q32024/has-changes.txt similarity index 100% rename from packages/foundations/scripts/test/color-q32024/has-changes.txt rename to packages/migration/test/color-q32024/has-changes.txt diff --git a/packages/foundations/scripts/test/color-q32024/no-change.txt b/packages/migration/test/color-q32024/no-change.txt similarity index 100% rename from packages/foundations/scripts/test/color-q32024/no-change.txt rename to packages/migration/test/color-q32024/no-change.txt diff --git a/packages/foundations/scripts/test/icon-q32024/has-changes.txt b/packages/migration/test/icon-q32024/has-changes.txt similarity index 100% rename from packages/foundations/scripts/test/icon-q32024/has-changes.txt rename to packages/migration/test/icon-q32024/has-changes.txt diff --git a/packages/migration/test/icon-q32024/icon-q32024.spec.ts b/packages/migration/test/icon-q32024/icon-q32024.spec.ts new file mode 100644 index 00000000000..61e64a73701 --- /dev/null +++ b/packages/migration/test/icon-q32024/icon-q32024.spec.ts @@ -0,0 +1,19 @@ +import { describe, expect, test } from 'vitest'; +import { type ReplaceResult } from 'replace-in-file'; +import { migrate } from '../../src/migration'; + +describe('icon-q32024', () => { + test('check if changes are detected', async () => { + const result = migrate({ + src: './test/icon-q32024', + type: ['iconQ32024'], + dryRun: true + }); + + expect(result).not.undefined; + + expect( + (result as ReplaceResult[]).filter((res) => res.hasChanged) + ).toHaveLength(1); + }); +}); diff --git a/packages/foundations/scripts/test/icon-q32024/no-change.txt b/packages/migration/test/icon-q32024/no-change.txt similarity index 100% rename from packages/foundations/scripts/test/icon-q32024/no-change.txt rename to packages/migration/test/icon-q32024/no-change.txt diff --git a/packages/migration/test/v0.0.5-v0.0.6/has-changes.txt b/packages/migration/test/v0.0.5-v0.0.6/has-changes.txt new file mode 100644 index 00000000000..e625906bbf2 --- /dev/null +++ b/packages/migration/test/v0.0.5-v0.0.6/has-changes.txt @@ -0,0 +1,10 @@ + (close = 'test')} + behaviour="closeable"> + Test + + + + + + diff --git a/packages/migration/test/v0.0.5-v0.0.6/no-change.txt b/packages/migration/test/v0.0.5-v0.0.6/no-change.txt new file mode 100644 index 00000000000..cce284648b9 --- /dev/null +++ b/packages/migration/test/v0.0.5-v0.0.6/no-change.txt @@ -0,0 +1,11 @@ + (close = 'test')} + closeable> + Test + + + + + + + diff --git a/packages/migration/test/v0.0.5-v0.0.6/v005_v006.spec.ts b/packages/migration/test/v0.0.5-v0.0.6/v005_v006.spec.ts new file mode 100644 index 00000000000..d85768603cc --- /dev/null +++ b/packages/migration/test/v0.0.5-v0.0.6/v005_v006.spec.ts @@ -0,0 +1,19 @@ +import { describe, expect, test } from 'vitest'; +import { type ReplaceResult } from 'replace-in-file'; +import { migrate } from '../../src/migration'; + +describe('v005_v006', () => { + test('check if changes are detected', async () => { + const result = migrate({ + src: './test/v0.0.5-v0.0.6', + type: ['v005_v006'], + dryRun: true + }); + + expect(result).not.undefined; + + expect( + (result as ReplaceResult[]).filter((res) => res.hasChanged) + ).toHaveLength(1); + }); +}); diff --git a/packages/migration/tsconfig.json b/packages/migration/tsconfig.json new file mode 100644 index 00000000000..72afd062ae2 --- /dev/null +++ b/packages/migration/tsconfig.json @@ -0,0 +1,14 @@ +{ + "include": ["."], + "compilerOptions": { + "strict": true, + "allowSyntheticDefaultImports": true, + "composite": true, + "module": "ESNext", + "moduleResolution": "Node", + "resolveJsonModule": true, + "target": "ESNext", + "verbatimModuleSyntax": true, + "skipLibCheck": true + } +} diff --git a/packages/migration/vitest.config.ts b/packages/migration/vitest.config.ts new file mode 100644 index 00000000000..08aee380068 --- /dev/null +++ b/packages/migration/vitest.config.ts @@ -0,0 +1,7 @@ +import { defineConfig } from 'vitest/config'; + +export default defineConfig({ + test: { + include: ['test/**/*.{test,spec}.?(c|m)[jt]s?(x)'] + } +}); diff --git a/scripts/package.json b/scripts/package.json index 018ab8fedb5..93ab6deb5ae 100644 --- a/scripts/package.json +++ b/scripts/package.json @@ -4,10 +4,11 @@ "type": "module", "description": "contains scripts for monorepo", "scripts": { - "build": "npm-run-all build:foundations build:components", + "build": "npm-run-all build:foundations build:components build:migration", "build-outputs": "npm-run-all -p build-outputs:*", "build-outputs:components": "npm run copy-output --workspace=@db-ui/components", "build-outputs:foundations": "npm run copy-build --workspace=@db-ui/foundations", + "build-outputs:migration": "npm run copy-build --workspace=@db-ui/migration", "build-outputs:ngx-components": "npm run build --workspace=@db-ui/ngx-components", "build-outputs:react-components": "npm run build --workspace=@db-ui/react-components", "build-outputs:stencil-components": "npm run build --workspace=@db-ui/web-components", @@ -24,6 +25,7 @@ "build-showcases:vue": "npm run build --workspace=vue-showcase", "build:components": "npm run build --workspace=@db-ui/components", "build:foundations": "npm run build --workspace=@db-ui/foundations", + "build:migration": "npm run build --workspace=@db-ui/migration", "dev": "tsx dev.js", "dev:angular-components": "npm run dev:angular --workspace=@db-ui/components", "dev:plain-html-components": "npm run dev:html --workspace=@db-ui/components", @@ -31,8 +33,6 @@ "dev:sass": "npm run dev:scss --workspace=@db-ui/components", "dev:stencil-components": "npm run dev:stencil --workspace=@db-ui/components", "dev:vue-components": "npm run dev:vue --workspace=@db-ui/components", - "generate:icon-fonts": "npm run generate:icon-fonts --workspace=@db-ui/foundations", - "generate:icon-types": "npm run generate:icon-types --workspace=@db-ui/components", "rm-builds:components-build": "rimraf ../packages/components/build", "rm-builds:dist": "rimraf -g showcases/**/dist", "rm-builds:foundations-build": "rimraf ../packages/foundations/build", @@ -62,13 +62,13 @@ "start-showcase:vue": "npm run dev --workspace=vue-showcase", "start:foundations": "npm run start --workspace=@db-ui/foundations", "test": "npm-run-all -p test:*", - "test:foundations-migration": "npm run test --workspace=@db-ui/foundations", + "test:migration": "npm run test --workspace=@db-ui/migration", "update:icon-fonts": "npm-run-all generate:icon-fonts generate:icon-types" }, "devDependencies": { - "@inquirer/prompts": "7.1.0", + "@inquirer/prompts": "7.2.0", "glob": "^11.0.0", - "inquirer": "^12.1.0", + "inquirer": "^12.2.0", "replace-in-file": "^8.2.0" } } diff --git a/scripts/rebuild-e2e.js b/scripts/rebuild-e2e.js index 3093540d930..fa744f728f7 100644 --- a/scripts/rebuild-e2e.js +++ b/scripts/rebuild-e2e.js @@ -3,7 +3,7 @@ import { spawnSync } from 'node:child_process'; /** * Simple script to run docker-compose with the correct playwright version - * Need this script because npm under windows uses cmd which is unable to use variables in a cli like $version + * Need this script because npm under windows uses cmd which is unable to use variables in a CLI like $version */ const rebuildE2e = () => { diff --git a/showcases/angular-showcase/src/app/components/accordion/accordion.component.html b/showcases/angular-showcase/src/app/components/accordion/accordion.component.html index 5e35a5648f9..ea6a9ec518e 100644 --- a/showcases/angular-showcase/src/app/components/accordion/accordion.component.html +++ b/showcases/angular-showcase/src/app/components/accordion/accordion.component.html @@ -19,15 +19,15 @@ > diff --git a/showcases/angular-showcase/src/app/components/button/button.component.html b/showcases/angular-showcase/src/app/components/button/button.component.html index 9a5d3895d3e..c7a5c36ab1b 100644 --- a/showcases/angular-showcase/src/app/components/button/button.component.html +++ b/showcases/angular-showcase/src/app/components/button/button.component.html @@ -15,6 +15,7 @@ [size]="exampleProps?.size" [icon]="exampleProps?.icon" [noText]="exampleProps?.noText" + [showIcon]="exampleProps?.showIcon" [disabled]="exampleProps?.disabled" [width]="exampleProps?.width" (click)="showAlert(exampleName)" diff --git a/showcases/angular-showcase/src/app/components/checkbox/checkbox.component.html b/showcases/angular-showcase/src/app/components/checkbox/checkbox.component.html index a7f45f6f72a..c9b5b7658d0 100644 --- a/showcases/angular-showcase/src/app/components/checkbox/checkbox.component.html +++ b/showcases/angular-showcase/src/app/components/checkbox/checkbox.component.html @@ -17,9 +17,25 @@ [value]="exampleProps?.value" [required]="exampleProps?.required" [indeterminate]="exampleProps?.indeterminate" - [variant]="exampleProps?.variant" + [showLabel]="exampleProps?.showLabel" + [validation]="exampleProps?.validation" + [invalidMessage]="exampleProps?.invalidMessage" + [validMessage]="exampleProps?.validMessage" [size]="exampleProps?.size" >{{ exampleName }} + @if ( + exampleProps?.showLabel !== undefined && + exampleProps?.showLabel !== null && + !exampleProps?.showLabel + ) { + + {{ exampleName }} + + } diff --git a/showcases/angular-showcase/src/app/components/checkbox/checkbox.component.ts b/showcases/angular-showcase/src/app/components/checkbox/checkbox.component.ts index c896e2e63a0..6869387448e 100644 --- a/showcases/angular-showcase/src/app/components/checkbox/checkbox.component.ts +++ b/showcases/angular-showcase/src/app/components/checkbox/checkbox.component.ts @@ -1,5 +1,5 @@ import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; -import { DBCheckbox } from '../../../../../../output/angular/src'; +import { DBCheckbox, DBInfotext } from '../../../../../../output/angular/src'; import defaultComponentVariants from '../../../../../shared/checkbox.json'; import { DefaultComponent } from '../default.component'; import { environment } from '../../../environments/environment'; @@ -7,9 +7,11 @@ import { environment } from '../../../environments/environment'; @Component({ selector: 'app-checkbox', templateUrl: './checkbox.component.html', - imports: environment.webComponents - ? [DefaultComponent] - : [DefaultComponent, DBCheckbox], + imports: [ + environment.webComponents + ? [DefaultComponent] + : [DefaultComponent, DBCheckbox, DBInfotext] + ], standalone: true, schemas: [CUSTOM_ELEMENTS_SCHEMA] }) diff --git a/showcases/angular-showcase/src/app/components/default.component.ts b/showcases/angular-showcase/src/app/components/default.component.ts index a05417a3b8e..101d2b96997 100644 --- a/showcases/angular-showcase/src/app/components/default.component.ts +++ b/showcases/angular-showcase/src/app/components/default.component.ts @@ -72,7 +72,7 @@ export class DefaultComponent implements OnInit { } getLink = (variantName: string) => { - let currentUrl = window.location.href; + let currentUrl = globalThis.location.href; if (!currentUrl.includes('?')) { currentUrl += '?'; } diff --git a/showcases/angular-showcase/src/app/components/infotext/infotext.component.html b/showcases/angular-showcase/src/app/components/infotext/infotext.component.html index 87d9cca75b5..34d29ef0aad 100644 --- a/showcases/angular-showcase/src/app/components/infotext/infotext.component.html +++ b/showcases/angular-showcase/src/app/components/infotext/infotext.component.html @@ -14,6 +14,7 @@ [size]="exampleProps?.size" [semantic]="exampleProps?.semantic" [icon]="exampleProps?.icon" + [showIcon]="exampleProps?.showIcon" > {{ exampleName }} diff --git a/showcases/angular-showcase/src/app/components/input/input.component.html b/showcases/angular-showcase/src/app/components/input/input.component.html index 1545d0546f9..45186e747e2 100644 --- a/showcases/angular-showcase/src/app/components/input/input.component.html +++ b/showcases/angular-showcase/src/app/components/input/input.component.html @@ -23,6 +23,11 @@ [icon]="exampleProps?.icon" [iconAfter]="exampleProps?.iconAfter" [readOnly]="exampleProps?.readOnly" + [showLabel]="exampleProps?.showLabel" + [showMessage]="exampleProps?.showMessage" + [invalidMessage]="exampleProps?.invalidMessage" + [validMessage]="exampleProps?.validMessage" + [validation]="exampleProps?.validation" [dataList]=" exampleProps?.dataList ? getDataList(exampleProps?.variant) diff --git a/showcases/angular-showcase/src/app/components/input/input.component.ts b/showcases/angular-showcase/src/app/components/input/input.component.ts index f49630e934a..b6a8124c375 100644 --- a/showcases/angular-showcase/src/app/components/input/input.component.ts +++ b/showcases/angular-showcase/src/app/components/input/input.component.ts @@ -11,9 +11,11 @@ import { environment } from '../../../environments/environment'; @Component({ selector: 'app-input', templateUrl: './input.component.html', - imports: environment.webComponents - ? [DefaultComponent] - : [DefaultComponent, DBInput], + imports: [ + environment.webComponents + ? [DefaultComponent] + : [DefaultComponent, DBInput] + ], standalone: true, schemas: [CUSTOM_ELEMENTS_SCHEMA] }) diff --git a/showcases/angular-showcase/src/app/components/link/link.component.html b/showcases/angular-showcase/src/app/components/link/link.component.html index e2652fae756..35d43944f1e 100644 --- a/showcases/angular-showcase/src/app/components/link/link.component.html +++ b/showcases/angular-showcase/src/app/components/link/link.component.html @@ -16,6 +16,7 @@ [disabled]="exampleProps?.disabled" [size]="exampleProps?.size" [content]="exampleProps?.content" + [showIcon]="exampleProps?.showIcon" >{{ exampleName }} diff --git a/showcases/angular-showcase/src/app/components/notification/notification.component.html b/showcases/angular-showcase/src/app/components/notification/notification.component.html index 866f9110c59..23ecdd04db5 100644 --- a/showcases/angular-showcase/src/app/components/notification/notification.component.html +++ b/showcases/angular-showcase/src/app/components/notification/notification.component.html @@ -15,9 +15,12 @@ [headline]="exampleProps?.headline" [linkVariant]="exampleProps?.linkVariant" [icon]="exampleProps?.icon" - [behaviour]="exampleProps?.behaviour" + [closeable]="exampleProps?.closeable" [variant]="exampleProps?.variant" + [showIcon]="exampleProps?.showIcon" + [showHeadline]="exampleProps?.showHeadline" [timestamp]="exampleProps?.timestamp" + [showTimestamp]="exampleProps?.showTimestamp" (onClose)="showNotification(exampleName)" > @if (exampleProps?.link) { diff --git a/showcases/angular-showcase/src/app/components/radio/radio.component.html b/showcases/angular-showcase/src/app/components/radio/radio.component.html index c00bf1cda7d..276aa88bf15 100644 --- a/showcases/angular-showcase/src/app/components/radio/radio.component.html +++ b/showcases/angular-showcase/src/app/components/radio/radio.component.html @@ -18,9 +18,23 @@ [checked]="exampleProps?.checked" [required]="exampleProps?.required" [disabled]="exampleProps?.disabled" - [variant]="exampleProps?.variant" + [showLabel]="exampleProps?.showLabel" + [validation]="exampleProps?.validation" > {{ exampleName }} + @if ( + exampleProps?.showLabel !== undefined && + exampleProps?.showLabel !== null && + !exampleProps?.showLabel + ) { + + {{ exampleName }} + + } diff --git a/showcases/angular-showcase/src/app/components/radio/radio.component.ts b/showcases/angular-showcase/src/app/components/radio/radio.component.ts index 86bdf1666c6..1e029db0d6a 100644 --- a/showcases/angular-showcase/src/app/components/radio/radio.component.ts +++ b/showcases/angular-showcase/src/app/components/radio/radio.component.ts @@ -1,15 +1,21 @@ import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; import defaultComponentVariants from '../../../../../shared/radio.json'; import { DefaultComponent } from '../default.component'; -import { DBRadio } from '../../../../../../output/angular/src'; +import { + DBCheckbox, + DBInfotext, + DBRadio +} from '../../../../../../output/angular/src'; import { environment } from '../../../environments/environment'; @Component({ selector: 'app-radio', templateUrl: './radio.component.html', - imports: environment.webComponents - ? [DefaultComponent] - : [DefaultComponent, DBRadio], + imports: [ + environment.webComponents + ? [DefaultComponent] + : [DefaultComponent, DBRadio, DBInfotext] + ], schemas: [CUSTOM_ELEMENTS_SCHEMA], standalone: true }) diff --git a/showcases/angular-showcase/src/app/components/select/select.component.html b/showcases/angular-showcase/src/app/components/select/select.component.html index 3efbe31ad13..caf556e651e 100644 --- a/showcases/angular-showcase/src/app/components/select/select.component.html +++ b/showcases/angular-showcase/src/app/components/select/select.component.html @@ -14,12 +14,17 @@ [label]="exampleProps?.label" [placeholder]="exampleName" [variant]="exampleProps?.variant" + [showLabel]="exampleProps?.showLabel" [options]="exampleProps?.options" [disabled]="exampleProps?.disabled" [icon]="exampleProps?.icon" [required]="exampleProps?.required" [value]="exampleProps?.value" [message]="exampleProps?.message" + [showMessage]="exampleProps?.showMessage" + [invalidMessage]="exampleProps?.invalidMessage" + [validMessage]="exampleProps?.validMessage" + [validation]="exampleProps?.validation" >{{ exampleName }} diff --git a/showcases/angular-showcase/src/app/components/select/select.component.ts b/showcases/angular-showcase/src/app/components/select/select.component.ts index cd573a5aff5..8fe54418001 100644 --- a/showcases/angular-showcase/src/app/components/select/select.component.ts +++ b/showcases/angular-showcase/src/app/components/select/select.component.ts @@ -7,9 +7,11 @@ import { environment } from '../../../environments/environment'; @Component({ selector: 'app-select', templateUrl: './select.component.html', - imports: environment.webComponents - ? [DefaultComponent] - : [DefaultComponent, DBSelect], + imports: [ + environment.webComponents + ? [DefaultComponent] + : [DefaultComponent, DBSelect] + ], schemas: [CUSTOM_ELEMENTS_SCHEMA], standalone: true }) diff --git a/showcases/angular-showcase/src/app/components/switch/switch.component.html b/showcases/angular-showcase/src/app/components/switch/switch.component.html index 9bc96c3d043..b4bcec73a3e 100644 --- a/showcases/angular-showcase/src/app/components/switch/switch.component.html +++ b/showcases/angular-showcase/src/app/components/switch/switch.component.html @@ -14,15 +14,21 @@ [visualAid]="exampleProps?.visualAid" [checked]="exampleProps?.checked" [disabled]="exampleProps?.disabled" - [variant]="exampleProps?.variant" + [required]="exampleProps?.required" + [showLabel]="exampleProps?.showLabel" [size]="exampleProps?.size" [emphasis]="exampleProps?.emphasis" [icon]="exampleProps?.icon" [iconAfter]="exampleProps?.iconAfter" + [validation]="exampleProps?.validation" > {{ exampleName }} - @if (exampleProps?.variant === "hidden") { + @if ( + exampleProps?.showLabel !== undefined && + exampleProps?.showLabel !== null && + !exampleProps?.showLabel + ) { {{ exampleName }} diff --git a/showcases/angular-showcase/src/app/components/switch/switch.component.ts b/showcases/angular-showcase/src/app/components/switch/switch.component.ts index 39ad33e4b99..2d6c3f5a992 100644 --- a/showcases/angular-showcase/src/app/components/switch/switch.component.ts +++ b/showcases/angular-showcase/src/app/components/switch/switch.component.ts @@ -8,9 +8,11 @@ import { environment } from '../../../environments/environment'; @Component({ selector: 'app-switch', templateUrl: './switch.component.html', - imports: environment.webComponents - ? [DefaultComponent] - : [DefaultComponent, DBSwitch, DBInfotext], + imports: [ + environment.webComponents + ? [DefaultComponent] + : [DefaultComponent, DBSwitch, DBInfotext] + ], schemas: [CUSTOM_ELEMENTS_SCHEMA], standalone: true }) diff --git a/showcases/angular-showcase/src/app/components/textarea/textarea.component.html b/showcases/angular-showcase/src/app/components/textarea/textarea.component.html index 2a02a2e2501..bfb28a479de 100644 --- a/showcases/angular-showcase/src/app/components/textarea/textarea.component.html +++ b/showcases/angular-showcase/src/app/components/textarea/textarea.component.html @@ -19,8 +19,13 @@ [value]="exampleProps?.value" [cols]="exampleProps?.cols" [rows]="exampleProps?.rows" + [showLabel]="exampleProps?.showLabel" [placeholder]="exampleProps?.placeholder || exampleName" [message]="exampleProps?.message" + [showMessage]="exampleProps?.showMessage" + [invalidMessage]="exampleProps?.invalidMessage" + [validMessage]="exampleProps?.validMessage" + [validation]="exampleProps?.validation" > diff --git a/showcases/angular-showcase/src/app/components/textarea/textarea.component.ts b/showcases/angular-showcase/src/app/components/textarea/textarea.component.ts index 8934363ff84..dfb5c77ebe0 100644 --- a/showcases/angular-showcase/src/app/components/textarea/textarea.component.ts +++ b/showcases/angular-showcase/src/app/components/textarea/textarea.component.ts @@ -7,9 +7,11 @@ import { environment } from '../../../environments/environment'; @Component({ selector: 'app-textarea', templateUrl: './textarea.component.html', - imports: environment.webComponents - ? [DefaultComponent] - : [DefaultComponent, DBTextarea], + imports: [ + environment.webComponents + ? [DefaultComponent] + : [DefaultComponent, DBTextarea] + ], schemas: [CUSTOM_ELEMENTS_SCHEMA], standalone: true }) diff --git a/showcases/angular-ssr-showcase/package.json b/showcases/angular-ssr-showcase/package.json index 7c4c2c2829a..2f339ed71bb 100644 --- a/showcases/angular-ssr-showcase/package.json +++ b/showcases/angular-ssr-showcase/package.json @@ -22,7 +22,7 @@ "@angular/platform-server": "17.3.12", "@angular/router": "17.3.12", "@angular/ssr": "17.3.11", - "express": "^4.21.1", + "express": "^4.21.2", "rxjs": "~7.8.1", "tslib": "^2.8.1", "zone.js": "~0.14.10" @@ -32,7 +32,7 @@ "@angular/cli": "17.3.11", "@angular/compiler-cli": "17.3.12", "@types/express": "^5.0.0", - "@types/node": "^22.10.1", + "@types/node": "^22.10.2", "cpr": "3.0.1", "ng-packagr": "17.3.0", "typescript": "^5.4.5" diff --git a/showcases/e2e/tabs/tabs-snapshot.spec.ts b/showcases/e2e/tabs/tabs-snapshot.spec.ts index ffdf21c61c8..5f63c22728d 100644 --- a/showcases/e2e/tabs/tabs-snapshot.spec.ts +++ b/showcases/e2e/tabs/tabs-snapshot.spec.ts @@ -1,4 +1,4 @@ -import { test } from '@playwright/test'; +import { expect, test } from '@playwright/test'; // @ts-expect-error - required for playwright import { getDefaultScreenshotTest, runAriaSnapshotTest } from '../default.ts'; @@ -8,5 +8,11 @@ test.describe('DBTabs', () => { getDefaultScreenshotTest({ path }); - runAriaSnapshotTest({ path }); + runAriaSnapshotTest({ + path, + async preScreenShot(page) { + const scrollRight = page.locator('[data-icon=chevron_right]'); + await expect(scrollRight).toBeVisible(); + } + }); }); diff --git a/showcases/next-showcase/package.json b/showcases/next-showcase/package.json index a348c1ae68d..10bdcfc6c87 100644 --- a/showcases/next-showcase/package.json +++ b/showcases/next-showcase/package.json @@ -17,8 +17,8 @@ "react-dom": "18.3.1" }, "devDependencies": { - "@types/node": "^22.10.1", - "@types/react": "^18.3.12", + "@types/node": "^22.10.2", + "@types/react": "^18.3.13", "npm-run-all": "^4.1.5", "open-cli": "^8.0.0", "typescript": "^5.4.5" diff --git a/showcases/next-showcase/tsconfig.json b/showcases/next-showcase/tsconfig.json index 55a12c9efc0..2e8cd0fc7f5 100644 --- a/showcases/next-showcase/tsconfig.json +++ b/showcases/next-showcase/tsconfig.json @@ -13,7 +13,8 @@ "isolatedModules": true, "jsx": "preserve", "strictNullChecks": true, - "downlevelIteration": true + "downlevelIteration": true, + "target": "ES2017" }, "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"], "exclude": ["node_modules"] diff --git a/showcases/patternhub/components/validation-example/index.tsx b/showcases/patternhub/components/validation-example/index.tsx index 67308a52add..77a35bae7c4 100644 --- a/showcases/patternhub/components/validation-example/index.tsx +++ b/showcases/patternhub/components/validation-example/index.tsx @@ -12,7 +12,7 @@ const ValidationExample = () => {
-

No customValidity

+

No custom validation

default browser behaviour with auto changing colors @@ -31,11 +31,11 @@ const ValidationExample = () => { -

With customValidity (valid)

+

With custom validation (valid)

- fixed customValidity, no auto changing of colors and - bad UX + fixed validation, no auto changing of colors and bad + UX
@@ -45,7 +45,7 @@ const ValidationExample = () => { invalidMessage="This is required" validMessage="Success" required - customValidity="valid" + validation="valid" /> Send
diff --git a/showcases/patternhub/components/version-switcher/version-switcher.tsx b/showcases/patternhub/components/version-switcher/version-switcher.tsx index ed7a4489fe7..36776437fa4 100644 --- a/showcases/patternhub/components/version-switcher/version-switcher.tsx +++ b/showcases/patternhub/components/version-switcher/version-switcher.tsx @@ -107,7 +107,7 @@ const VersionSwitcher = () => { const isTag = (branch.split('.').length === 3 && branch.startsWith('v')) || branch === 'latest'; - window.location.replace( + globalThis.location.replace( DOMPurify.sanitize( `https://${owner}.github.io/${repo}${ isTag ? '/version' : '/review' diff --git a/showcases/patternhub/next.config.js b/showcases/patternhub/next.config.js index c998d258695..a06245485aa 100644 --- a/showcases/patternhub/next.config.js +++ b/showcases/patternhub/next.config.js @@ -17,7 +17,8 @@ const config = { transpilePackages: [ '../../output/react/src', '../react-showcase/', - '@db-ui' + '@db-ui', + '@db-ux' ], ...withMDX({ pageExtensions: ['ts', 'tsx', 'js', 'jsx', 'md', 'mdx'], diff --git a/showcases/patternhub/package.json b/showcases/patternhub/package.json index 063152b98e0..abedc340809 100644 --- a/showcases/patternhub/package.json +++ b/showcases/patternhub/package.json @@ -23,9 +23,10 @@ "test:e2e": "npx playwright test --config=../playwright.patternhub-config.ts" }, "dependencies": { - "dompurify": "3.2.1", - "highlight.js": "^11.10.0", - "next": "15.0.3", + "@db-ux/core-icons": "0.0.7", + "dompurify": "3.2.3", + "highlight.js": "^11.11.0", + "next": "15.1.1", "react": "18.3.1", "react-archer": "^4.4.0", "react-dom": "18.3.1", @@ -35,14 +36,14 @@ "devDependencies": { "@mdx-js/loader": "^3.1.0", "@mdx-js/react": "^3.1.0", - "@next/mdx": "^15.0.3", + "@next/mdx": "^15.1.1", "@types/dompurify": "3.2.0", - "@types/node": "22.10.1", - "@types/react": "18.3.12", + "@types/node": "22.10.2", + "@types/react": "18.3.13", "@types/react-dom": "18.3.1", "esbuild": "0.24.0", "eslint": "8.57.0", - "eslint-config-next": "15.0.3", + "eslint-config-next": "15.1.1", "iframe-resizer": "^5.3.2", "open-cli": "^8.0.0", "sass": "1.77.4", diff --git a/showcases/patternhub/pages/base64/index.tsx b/showcases/patternhub/pages/base64/index.tsx index c78b82b02de..77bc68af24e 100644 --- a/showcases/patternhub/pages/base64/index.tsx +++ b/showcases/patternhub/pages/base64/index.tsx @@ -20,7 +20,7 @@ const Base64 = () => { setUrl( new URL( `iframe?color=${color}&density=${density}&components=${base64}`, - window.location.href + globalThis.location?.href ).toString() ); }, [density, color, base64]); diff --git a/showcases/patternhub/pages/foundations/icons/overview.tsx b/showcases/patternhub/pages/foundations/icons/overview.tsx index 76c2babe25f..20557412ccb 100644 --- a/showcases/patternhub/pages/foundations/icons/overview.tsx +++ b/showcases/patternhub/pages/foundations/icons/overview.tsx @@ -1,4 +1,5 @@ import { useState } from 'react'; +import { ALL_ICONS } from '@db-ux/core-icons'; import DefaultPage from '../../../components/default-page'; import { DBCard, @@ -7,7 +8,6 @@ import { DBIcon, DBInfotext } from '../../../../../output/react/src'; -import { ALL_ICONS } from '../../../../../packages/components/src/shared/all-icons'; const IconOverview = () => { const [weight, setWeight] = useState('24'); diff --git a/showcases/patternhub/scripts/generate-example-jsx.js b/showcases/patternhub/scripts/generate-example-jsx.js index 2a8fe30e947..edad88aa0ae 100644 --- a/showcases/patternhub/scripts/generate-example-jsx.js +++ b/showcases/patternhub/scripts/generate-example-jsx.js @@ -38,6 +38,7 @@ const generateExampleJSX = () => { examples.push( `"${componentName}${variant.name}${ example.name + // eslint-disable-next-line unicorn/no-length-as-slice-end }":renderToString(${code.slice(0, code.length)})` ); } diff --git a/showcases/patternhub/styles/globals.scss b/showcases/patternhub/styles/globals.scss index 6b1e0498cb1..f6be6923ee6 100644 --- a/showcases/patternhub/styles/globals.scss +++ b/showcases/patternhub/styles/globals.scss @@ -423,7 +423,11 @@ h6 { .code-button { position: absolute; inset-block-end: calc( - -1 * (#{variables.$db-spacing-fixed-sm} + #{variables.$db-sizing-sm}) + -1 * + ( + #{variables.$db-spacing-fixed-sm} + + #{variables.$db-sizing-sm} + ) ); inset-inline-end: variables.$db-spacing-fixed-sm; z-index: 1; diff --git a/showcases/react-showcase/package.json b/showcases/react-showcase/package.json index bd1e957b0f7..cf358981832 100644 --- a/showcases/react-showcase/package.json +++ b/showcases/react-showcase/package.json @@ -18,15 +18,15 @@ "dependencies": { "react": "^18.3.1", "react-dom": "^18.3.1", - "react-router-dom": "7.0.1", + "react-router-dom": "7.0.2", "sa11y": "3.2.3" }, "devDependencies": { - "@types/react": "^18.3.12", + "@types/react": "^18.3.13", "@types/react-dom": "^18.3.1", "@vitejs/plugin-react": "^4.3.4", "cross-env": "^7.0.3", "typescript": "^5.4.5", - "vite": "^6.0.1" + "vite": "^6.0.3" } } diff --git a/showcases/react-showcase/src/components/accordion/index.tsx b/showcases/react-showcase/src/components/accordion/index.tsx index 83d28934b09..36102da7774 100644 --- a/showcases/react-showcase/src/components/accordion/index.tsx +++ b/showcases/react-showcase/src/components/accordion/index.tsx @@ -15,9 +15,9 @@ const getAccordion = ({ behaviour, children, variant }: DBAccordionProps) => ( {children} - - - + + + ); diff --git a/showcases/react-showcase/src/components/button/index.tsx b/showcases/react-showcase/src/components/button/index.tsx index c3c0f07feec..d658dfeabe0 100644 --- a/showcases/react-showcase/src/components/button/index.tsx +++ b/showcases/react-showcase/src/components/button/index.tsx @@ -14,7 +14,8 @@ const getButton = ({ width, disabled, children, - type + type, + showIcon }: DBButtonProps) => ( { // eslint-disable-next-line no-alert alert(children.toString()); diff --git a/showcases/react-showcase/src/components/checkbox/index.tsx b/showcases/react-showcase/src/components/checkbox/index.tsx index f0da63a3d53..9a47d13ffc9 100644 --- a/showcases/react-showcase/src/components/checkbox/index.tsx +++ b/showcases/react-showcase/src/components/checkbox/index.tsx @@ -1,4 +1,4 @@ -import { DBCheckbox } from '../../../../../output/react/src'; +import { DBCheckbox, DBInfotext } from '../../../../../output/react/src'; import DefaultComponent from '../default-component'; import { getVariants } from '../data'; import defaultComponentVariants from '../../../../shared/checkbox.json'; @@ -14,19 +14,34 @@ const getCheckbox = ({ children, disabled, indeterminate, - variant + variant, + showLabel, + validation, + invalidMessage, + validMessage }: DBCheckboxProps) => ( - - {children} - + <> + + {children} + + {showLabel !== undefined && !showLabel && ( + + {children} + + )} + ); const CheckboxComponent = (props: BaseComponentProps) => { diff --git a/showcases/react-showcase/src/components/default-component.tsx b/showcases/react-showcase/src/components/default-component.tsx index bc5d7ecf106..9d684fa9da4 100644 --- a/showcases/react-showcase/src/components/default-component.tsx +++ b/showcases/react-showcase/src/components/default-component.tsx @@ -6,6 +6,10 @@ import type { ReactDefaultComponentVariants } from '../../../shared/react-default-component-data'; +const redirectURLSearchParams = process?.env?.REDIRECT_URL_SEARCH_PARAMS + ? process.env.REDIRECT_URL_SEARCH_PARAMS === 'true' + : true; + const VariantList = ({ name, examples, @@ -20,6 +24,10 @@ const VariantList = ({ const [open, setOpen] = useState(); + const validExamples = examples.filter( + (example) => redirectURLSearchParams || !example.experimental + ); + return ( - {examples.map((example, exampleIndex) => ( + {validExamples.map((example, exampleIndex) => (
{ - const redirectURLSearchParams = process?.env?.REDIRECT_URL_SEARCH_PARAMS - ? process.env.REDIRECT_URL_SEARCH_PARAMS === 'true' - : true; const pageName = useQuery(redirectURLSearchParams)[4]; const color = useQuery(redirectURLSearchParams)[2]; const getHref = (variantName: string): string => { - if (typeof window !== 'undefined') { + if (typeof globalThis !== 'undefined') { const searchParams = new URLSearchParams( - window.location.href.split('?')[1] + globalThis?.location?.href.split('?')[1] ); searchParams.set('page', variantName.toLowerCase()); - return `${window.location.href.split('?')[0]}?${searchParams.toString()}`; + return `${globalThis?.location?.href.split('?')[0]}?${searchParams.toString()}`; } return ''; @@ -93,14 +98,14 @@ const DefaultComponent = ({ variantName: string ) => { if ( - typeof window === 'undefined' || - !window.location.origin || - !window.location.href + typeof globalThis === 'undefined' || + !globalThis.location.origin || + !globalThis.location.href ) { return; } - const currentUrl = window.location.href.split('?'); + const currentUrl = globalThis.location.href.split('?'); const rawComponentUrl = currentUrl[0]; const searchParams = new URLSearchParams(currentUrl[1] ?? ''); searchParams.set('page', variantName.toLowerCase()); @@ -129,22 +134,30 @@ const DefaultComponent = ({ <>
{title} - {variants?.map((variant, index) => ( -
- - { - openVariantInNewWindow(event, variant.name); - }} - href={getHref(variant.name)}> - {variant.name} - - -
- ))} + {variants + ?.filter( + (variant) => + redirectURLSearchParams || + variant.examples.find( + (example) => !example.experimental + ) + ) + .map((variant, index) => ( +
+ + { + openVariantInNewWindow(event, variant.name); + }} + href={getHref(variant.name)}> + {variant.name} + + +
+ ))}
{subComponent} diff --git a/showcases/react-showcase/src/components/form/index.tsx b/showcases/react-showcase/src/components/form/index.tsx index 7bc407f1470..e4fbb664ee7 100644 --- a/showcases/react-showcase/src/components/form/index.tsx +++ b/showcases/react-showcase/src/components/form/index.tsx @@ -277,7 +277,7 @@ const FormComponent = () => {

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor{' '} - + invidunt {' '} ut labore et dolore magna aliquyam erat, sed diam voluptua. @@ -285,7 +285,7 @@ const FormComponent = () => { Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor{' '} - + labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet @@ -447,6 +447,21 @@ const FormComponent = () => { Beschreibungstext + +

+ + Test + + + Test + + + Test + + + Test + +
); diff --git a/showcases/react-showcase/src/components/infotext/index.tsx b/showcases/react-showcase/src/components/infotext/index.tsx index 1132b1680b5..383cada8b4b 100644 --- a/showcases/react-showcase/src/components/infotext/index.tsx +++ b/showcases/react-showcase/src/components/infotext/index.tsx @@ -5,8 +5,14 @@ import { type DBInfotextProps } from '../../../../../output/react/src/components import { getVariants } from '../data'; import { type BaseComponentProps } from '../base-component-data'; -const getInfotext = ({ semantic, size, icon, children }: DBInfotextProps) => ( - +const getInfotext = ({ + semantic, + size, + icon, + children, + showIcon +}: DBInfotextProps) => ( + {children} ); diff --git a/showcases/react-showcase/src/components/input/index.tsx b/showcases/react-showcase/src/components/input/index.tsx index 4403af951a9..0c05f93d225 100644 --- a/showcases/react-showcase/src/components/input/index.tsx +++ b/showcases/react-showcase/src/components/input/index.tsx @@ -35,7 +35,12 @@ const getInput = ({ message, variant, readOnly, - dataList + dataList, + showLabel, + showMessage, + validMessage, + validation, + invalidMessage }: DBInputProps & { dataList: boolean }) => { return ( ); diff --git a/showcases/react-showcase/src/components/link/index.tsx b/showcases/react-showcase/src/components/link/index.tsx index 1026bb65200..fa9c12e7d90 100644 --- a/showcases/react-showcase/src/components/link/index.tsx +++ b/showcases/react-showcase/src/components/link/index.tsx @@ -11,14 +11,16 @@ const getLink = ({ disabled, size, content, - children + children, + showIcon }: DBLinkProps) => ( + content={content} + showIcon={showIcon}> {children} ); diff --git a/showcases/react-showcase/src/components/notification/index.tsx b/showcases/react-showcase/src/components/notification/index.tsx index 564de10d943..d937176422d 100644 --- a/showcases/react-showcase/src/components/notification/index.tsx +++ b/showcases/react-showcase/src/components/notification/index.tsx @@ -12,11 +12,14 @@ const getNotification = ({ headline, variant, children, - behaviour, + closeable, link, timestamp, linkVariant, - img + img, + showIcon, + showHeadline, + showTimestamp }: DBNotificationProps & { link: boolean; img: boolean }) => ( { // eslint-disable-next-line no-alert alert(children.toString()); - }}> + }} + showIcon={showIcon} + showHeadline={showHeadline}> {children} ); diff --git a/showcases/react-showcase/src/components/radio/index.tsx b/showcases/react-showcase/src/components/radio/index.tsx index 78e49340efd..f3d08696e85 100644 --- a/showcases/react-showcase/src/components/radio/index.tsx +++ b/showcases/react-showcase/src/components/radio/index.tsx @@ -1,4 +1,4 @@ -import { DBRadio } from '../../../../../output/react/src'; +import { DBInfotext, DBRadio } from '../../../../../output/react/src'; import DefaultComponent from '../default-component'; import { getVariants } from '../data'; import defaultComponentVariants from '../../../../shared/radio.json'; @@ -14,19 +14,28 @@ const getRadio = ({ children, disabled, value, - variant + showLabel, + validation }: DBRadioProps) => ( - - {children} - + <> + + {children} + + {showLabel !== undefined && !showLabel && ( + + {children} + + )} + ); const RadioComponent = (props: BaseComponentProps) => { diff --git a/showcases/react-showcase/src/components/select/index.tsx b/showcases/react-showcase/src/components/select/index.tsx index d8ffc1e01e7..4ad705f1216 100644 --- a/showcases/react-showcase/src/components/select/index.tsx +++ b/showcases/react-showcase/src/components/select/index.tsx @@ -15,7 +15,12 @@ const getSelect = ({ disabled, value, required, - variant + variant, + showLabel, + showMessage, + invalidMessage, + validMessage, + validation }: DBSelectProps) => { const [mValue, setValue] = useState(value); return ( @@ -25,13 +30,18 @@ const getSelect = ({ options={options} disabled={disabled} variant={variant} + showLabel={showLabel} icon={icon} value={mValue} onChange={(event) => { setValue(event.target.value); }} message={message} - required={required}> + required={required} + showMessage={showMessage} + invalidMessage={invalidMessage} + validMessage={validMessage} + validation={validation}> {children} ); diff --git a/showcases/react-showcase/src/components/switch/index.tsx b/showcases/react-showcase/src/components/switch/index.tsx index e510180820d..a0851386cba 100644 --- a/showcases/react-showcase/src/components/switch/index.tsx +++ b/showcases/react-showcase/src/components/switch/index.tsx @@ -10,25 +10,27 @@ const getSwitch = ({ checked, visualAid, disabled, - variant, + showLabel, emphasis, size, icon, - iconAfter + iconAfter, + required }: DBSwitchProps) => ( <> + iconAfter={iconAfter} + required={required}> {children} - {variant === 'hidden' && ( + {showLabel !== undefined && !showLabel && ( {children} diff --git a/showcases/react-showcase/src/components/textarea/index.tsx b/showcases/react-showcase/src/components/textarea/index.tsx index 1a1df9c940d..478adbbf020 100644 --- a/showcases/react-showcase/src/components/textarea/index.tsx +++ b/showcases/react-showcase/src/components/textarea/index.tsx @@ -17,13 +17,19 @@ const getTextarea = ({ readOnly, required, children, - variant + variant, + showLabel, + showMessage, + validMessage, + validation, + invalidMessage }: DBTextareaProps) => { const [dynamicValue, setDynamicValue] = useState(value); return ( ); }; diff --git a/showcases/react-showcase/src/hooks/use-universal-search-parameters.ts b/showcases/react-showcase/src/hooks/use-universal-search-parameters.ts index 1fb629e49c8..036f9d91218 100644 --- a/showcases/react-showcase/src/hooks/use-universal-search-parameters.ts +++ b/showcases/react-showcase/src/hooks/use-universal-search-parameters.ts @@ -24,9 +24,9 @@ const useUniversalSearchParameters = (): [ : useSearchParams(); const setSearchParameters = (params: Record) => { - if (typeof window !== 'undefined') { + if (typeof globalThis !== 'undefined') { const currentParams = new URLSearchParams( - window.location.href.split('?')[1] + globalThis.location.href.split('?')[1] ); currentParams.sort(); const newParams = new URLSearchParams(params); diff --git a/showcases/react-showcase/src/utils/base-path.ts b/showcases/react-showcase/src/utils/base-path.ts index 07870cb7627..4bf04467989 100644 --- a/showcases/react-showcase/src/utils/base-path.ts +++ b/showcases/react-showcase/src/utils/base-path.ts @@ -3,7 +3,7 @@ export const getBasePath = () => { return process.env.BASE_PATH; } - if (typeof window !== 'undefined') { + if (typeof globalThis !== 'undefined') { // eslint-disable-next-line @typescript-eslint/dot-notation return window['env']?.BASE_URL; } diff --git a/showcases/screen-reader/README.md b/showcases/screen-reader/README.md index 4d215d41a81..d71adbe170a 100644 --- a/showcases/screen-reader/README.md +++ b/showcases/screen-reader/README.md @@ -27,10 +27,10 @@ npm run test:screen-reader:windows --workspace=react-showcase -- --ui ## Gotchas -- Local: Don't switch in between your windows while testing, it will capture only your current screen -- We should avoid auto-generate tests, because they take a lot of time. -- NVDAs `next` command is equivalent of executing Down Arrow - Won't work with radio/select as you might expect -- One simple test takes about 1 minute in CI ⬅ so you should only provide test important things +- Local: Don't switch in between your windows while testing, it will capture only your current screen +- We should avoid auto-generate tests, because they take a lot of time. +- NVDAs `next` command is equivalent of executing Down Arrow - Won't work with radio/select as you might expect +- One simple test takes about 1 minute in CI ⬅ so you should only provide test important things ## More information diff --git a/showcases/screen-reader/__snapshots__/macos/webkit/DBButton-next-1.txt b/showcases/screen-reader/__snapshots__/macos/webkit/DBButton-next-1.txt index 2f9862eb9f6..572d984e9de 100644 --- a/showcases/screen-reader/__snapshots__/macos/webkit/DBButton-next-1.txt +++ b/showcases/screen-reader/__snapshots__/macos/webkit/DBButton-next-1.txt @@ -1 +1 @@ -["(Default) Text button","Icon & Text button","Icon button"] \ No newline at end of file +["(Default) False button","True button"] \ No newline at end of file diff --git a/showcases/screen-reader/__snapshots__/macos/webkit/DBCheckbox-default-1.txt b/showcases/screen-reader/__snapshots__/macos/webkit/DBCheckbox-default-1.txt index be24bbe63c9..0abcc62a147 100644 --- a/showcases/screen-reader/__snapshots__/macos/webkit/DBCheckbox-default-1.txt +++ b/showcases/screen-reader/__snapshots__/macos/webkit/DBCheckbox-default-1.txt @@ -1 +1 @@ -["Required required unchecked checkbox","Required","Required - Indeterminate required mixed checkbox","Required","Required required unchecked checkbox","TODO: Add a validMessage","Required","TODO: Add a validMessage","Required - Indeterminate required mixed checkbox","TODO: Add a validMessage","Required","Required TODO: Add a validMessage required checked checkbox","Select this checkbox","Required","Select this checkbox","Required - Indeterminate required mixed checkbox"] \ No newline at end of file +["True required unchecked checkbox","True","end of Required group","True","True required unchecked checkbox","required checked True TODO: Add a validMessage checkbox","True","TODO: Add a validMessage","end of Required group","TODO: Add a validMessage","True","True TODO: Add a validMessage required checked checkbox","required unchecked True Select this checkbox checkbox","True","Select this checkbox","end of Required group"] \ No newline at end of file diff --git a/showcases/screen-reader/__snapshots__/macos/webkit/DBInput-next-1.txt b/showcases/screen-reader/__snapshots__/macos/webkit/DBInput-next-1.txt index 2a265deac6b..710c361d50d 100644 --- a/showcases/screen-reader/__snapshots__/macos/webkit/DBInput-next-1.txt +++ b/showcases/screen-reader/__snapshots__/macos/webkit/DBInput-next-1.txt @@ -1 +1 @@ -["Label (Default) Basic edit text","Label","Label Helper Message edit text","Helper Message"] \ No newline at end of file +["Label (Default) False edit text","Label","Label True edit text","Message"] \ No newline at end of file diff --git a/showcases/screen-reader/__snapshots__/macos/webkit/DBInput-required-1.txt b/showcases/screen-reader/__snapshots__/macos/webkit/DBInput-required-1.txt index f8521dd5853..71bf3867876 100644 --- a/showcases/screen-reader/__snapshots__/macos/webkit/DBInput-required-1.txt +++ b/showcases/screen-reader/__snapshots__/macos/webkit/DBInput-required-1.txt @@ -1 +1 @@ -["Label Required required edit text","TODO: Add a validMessage. Test","Test selected","Fill out this field","TODO: Add a validMessage. Test"] \ No newline at end of file +["Label True required edit text","TODO: Add a validMessage. Test","Test selected","Fill out this field","TODO: Add a validMessage. Test"] \ No newline at end of file diff --git a/showcases/screen-reader/__snapshots__/macos/webkit/DBLink-default-1.txt b/showcases/screen-reader/__snapshots__/macos/webkit/DBLink-default-1.txt index d14a1b6c6e0..6c14d7dcea6 100644 --- a/showcases/screen-reader/__snapshots__/macos/webkit/DBLink-default-1.txt +++ b/showcases/screen-reader/__snapshots__/macos/webkit/DBLink-default-1.txt @@ -1 +1 @@ -["link Enabled (Default)/Hover/Pressed","dimmed link Disabled. This item is dimmed"] \ No newline at end of file +["link (Default) False","dimmed link True. This item is dimmed"] \ No newline at end of file diff --git a/showcases/screen-reader/__snapshots__/macos/webkit/DBSwitch-default-1.txt b/showcases/screen-reader/__snapshots__/macos/webkit/DBSwitch-default-1.txt index d8733408ea4..1ceaf61b247 100644 --- a/showcases/screen-reader/__snapshots__/macos/webkit/DBSwitch-default-1.txt +++ b/showcases/screen-reader/__snapshots__/macos/webkit/DBSwitch-default-1.txt @@ -1 +1 @@ -["(Def) Enabled off switch","on (Def) Enabled switch","(Def) Enabled","Checked on switch","off Checked switch","Checked","Disabled dimmed off switch. This item is dimmed","dimmed","Disabled"] \ No newline at end of file +["(Default) False off switch","on (Default) False switch","(Default) False","True on switch","off True switch","True","True","on True switch","True"] \ No newline at end of file diff --git a/showcases/screen-reader/__snapshots__/macos/webkit/DBSwitch-icon-1.txt b/showcases/screen-reader/__snapshots__/macos/webkit/DBSwitch-icon-1.txt index f91b17880c8..4397680d2fe 100644 --- a/showcases/screen-reader/__snapshots__/macos/webkit/DBSwitch-icon-1.txt +++ b/showcases/screen-reader/__snapshots__/macos/webkit/DBSwitch-icon-1.txt @@ -1 +1 @@ -["(Def) No Visual Aid + unchecked off switch","(Def) No Visual Aid + unchecked","Visual Aid + unchecked off switch","on Visual Aid + unchecked switch","Visual Aid + unchecked"] \ No newline at end of file +["(Default) False + Unchecked off switch","(Default) False + Unchecked","(Default) False + Checked on switch","off (Default) False + Checked switch","(Default) False + Checked"] \ No newline at end of file diff --git a/showcases/screen-reader/__snapshots__/macos/webkit/DBTextarea-next-1.txt b/showcases/screen-reader/__snapshots__/macos/webkit/DBTextarea-next-1.txt index 912da617d91..b389f068218 100644 --- a/showcases/screen-reader/__snapshots__/macos/webkit/DBTextarea-next-1.txt +++ b/showcases/screen-reader/__snapshots__/macos/webkit/DBTextarea-next-1.txt @@ -1 +1 @@ -["Label","Label (Default) Basic edit text","Label","Label Helper Message edit text","Helper Message"] \ No newline at end of file +["Label","Label (Default) False edit text","Label","Label true edit text","Message"] \ No newline at end of file diff --git a/showcases/screen-reader/__snapshots__/macos/webkit/DBTextarea-required-1.txt b/showcases/screen-reader/__snapshots__/macos/webkit/DBTextarea-required-1.txt index f8521dd5853..71bf3867876 100644 --- a/showcases/screen-reader/__snapshots__/macos/webkit/DBTextarea-required-1.txt +++ b/showcases/screen-reader/__snapshots__/macos/webkit/DBTextarea-required-1.txt @@ -1 +1 @@ -["Label Required required edit text","TODO: Add a validMessage. Test","Test selected","Fill out this field","TODO: Add a validMessage. Test"] \ No newline at end of file +["Label True required edit text","TODO: Add a validMessage. Test","Test selected","Fill out this field","TODO: Add a validMessage. Test"] \ No newline at end of file diff --git a/showcases/screen-reader/__snapshots__/windows/chromium/DBButton-next-1.txt b/showcases/screen-reader/__snapshots__/windows/chromium/DBButton-next-1.txt index 5966d60a9d2..f8dc0de433b 100644 --- a/showcases/screen-reader/__snapshots__/windows/chromium/DBButton-next-1.txt +++ b/showcases/screen-reader/__snapshots__/windows/chromium/DBButton-next-1.txt @@ -1 +1 @@ -["button, (Default) Text","button, Icon and Text","button, Icon"] \ No newline at end of file +["button, (Default) False","button, True"] \ No newline at end of file diff --git a/showcases/screen-reader/__snapshots__/windows/chromium/DBButton-tab-1.txt b/showcases/screen-reader/__snapshots__/windows/chromium/DBButton-tab-1.txt index f7e1b68df91..14ea6bc40ca 100644 --- a/showcases/screen-reader/__snapshots__/windows/chromium/DBButton-tab-1.txt +++ b/showcases/screen-reader/__snapshots__/windows/chromium/DBButton-tab-1.txt @@ -1 +1 @@ -["(Default) Text, button","Icon and Text, button","Icon, button"] \ No newline at end of file +["(Default) False, button","True, button"] \ No newline at end of file diff --git a/showcases/screen-reader/__snapshots__/windows/chromium/DBCheckbox-default-1.txt b/showcases/screen-reader/__snapshots__/windows/chromium/DBCheckbox-default-1.txt index 8c67ec6303d..f22859f463f 100644 --- a/showcases/screen-reader/__snapshots__/windows/chromium/DBCheckbox-default-1.txt +++ b/showcases/screen-reader/__snapshots__/windows/chromium/DBCheckbox-default-1.txt @@ -1 +1 @@ -["check box, not checked, required, Required","TODO: Add a valid Message. checked","Required","TODO: Add a valid Message","Required","check box, checked, required, Required","Please check this box if you want to proceed.. not checked","Required","Please check this box if you want to proceed.","check box, half checked, required, Required Indeterminate"] \ No newline at end of file +["check box, not checked, required, True","TODO: Add a valid Message. checked","True","TODO: Add a valid Message","True","check box, checked, required, True","Please check this box if you want to proceed.. not checked","True","Please check this box if you want to proceed.","Please check this box if you want to proceed."] \ No newline at end of file diff --git a/showcases/screen-reader/__snapshots__/windows/chromium/DBInput-required-1.txt b/showcases/screen-reader/__snapshots__/windows/chromium/DBInput-required-1.txt index cde79e5eb05..116822a36ab 100644 --- a/showcases/screen-reader/__snapshots__/windows/chromium/DBInput-required-1.txt +++ b/showcases/screen-reader/__snapshots__/windows/chromium/DBInput-required-1.txt @@ -1 +1 @@ -["Label, edit, required, Required, blank","T. e. s. t. TODO: Add a valid Message","Test selected","blank. Please fill out this field.. unselected","T. e. s. t. TODO: Add a valid Message"] \ No newline at end of file +["Label, edit, required, True, blank","T. e. s. t. TODO: Add a valid Message","Test selected","blank. Please fill out this field.. unselected","T. e. s. t. TODO: Add a valid Message"] \ No newline at end of file diff --git a/showcases/screen-reader/__snapshots__/windows/chromium/DBInput-tab-1.txt b/showcases/screen-reader/__snapshots__/windows/chromium/DBInput-tab-1.txt index 5a7d07d2153..bc03259ffe2 100644 --- a/showcases/screen-reader/__snapshots__/windows/chromium/DBInput-tab-1.txt +++ b/showcases/screen-reader/__snapshots__/windows/chromium/DBInput-tab-1.txt @@ -1 +1 @@ -["Label, edit, (Default) Basic, blank","Label, edit, Helper Message, Helper Message, blank"] \ No newline at end of file +["Label, edit, (Default) False, blank","Label, edit, Message, True, blank"] \ No newline at end of file diff --git a/showcases/screen-reader/__snapshots__/windows/chromium/DBLink-default-1.txt b/showcases/screen-reader/__snapshots__/windows/chromium/DBLink-default-1.txt index ef3d724fe95..29f9aeded8d 100644 --- a/showcases/screen-reader/__snapshots__/windows/chromium/DBLink-default-1.txt +++ b/showcases/screen-reader/__snapshots__/windows/chromium/DBLink-default-1.txt @@ -1 +1 @@ -["link, Enabled (Default) slash Hover slash Pressed","unavailable, link, Disabled"] \ No newline at end of file +["link, (Default) False","unavailable, link, True"] \ No newline at end of file diff --git a/showcases/screen-reader/__snapshots__/windows/chromium/DBSwitch-default-1.txt b/showcases/screen-reader/__snapshots__/windows/chromium/DBSwitch-default-1.txt index b82b5e0e4c0..cc5a15a8035 100644 --- a/showcases/screen-reader/__snapshots__/windows/chromium/DBSwitch-default-1.txt +++ b/showcases/screen-reader/__snapshots__/windows/chromium/DBSwitch-default-1.txt @@ -1 +1 @@ -["check box, not checked, (Def) Enabled","checked","check box, checked, Checked","not checked","check box, unavailable, not checked, Disabled"] \ No newline at end of file +["check box, not checked, (Default) False","checked","check box, checked, True","not checked","check box, not checked, True"] \ No newline at end of file diff --git a/showcases/screen-reader/__snapshots__/windows/chromium/DBSwitch-icon-1.txt b/showcases/screen-reader/__snapshots__/windows/chromium/DBSwitch-icon-1.txt index 31b3206dabd..ca6989b66b9 100644 --- a/showcases/screen-reader/__snapshots__/windows/chromium/DBSwitch-icon-1.txt +++ b/showcases/screen-reader/__snapshots__/windows/chromium/DBSwitch-icon-1.txt @@ -1 +1 @@ -["check box, not checked, (Def) No Visual Aid plus unchecked","check box, not checked, Visual Aid plus unchecked","checked"] \ No newline at end of file +["check box, not checked, (Default) False plus Unchecked","check box, checked, (Default) False plus Checked","not checked"] \ No newline at end of file diff --git a/showcases/screen-reader/__snapshots__/windows/chromium/DBTextarea-required-1.txt b/showcases/screen-reader/__snapshots__/windows/chromium/DBTextarea-required-1.txt index bbd72d3c97e..0dfb1786d96 100644 --- a/showcases/screen-reader/__snapshots__/windows/chromium/DBTextarea-required-1.txt +++ b/showcases/screen-reader/__snapshots__/windows/chromium/DBTextarea-required-1.txt @@ -1 +1 @@ -["Label, edit, required, multi line, Required, blank","T. e. s. t. TODO: Add a valid Message","Test selected","blank. Please fill out this field.. unselected","T. e. s. t. TODO: Add a valid Message"] \ No newline at end of file +["Label, edit, required, multi line, True, blank","T. e. s. t. TODO: Add a valid Message","Test selected","blank. Please fill out this field.. unselected","T. e. s. t. TODO: Add a valid Message"] \ No newline at end of file diff --git a/showcases/screen-reader/default.ts b/showcases/screen-reader/default.ts index 0db96f5e228..f9bfbadedaa 100644 --- a/showcases/screen-reader/default.ts +++ b/showcases/screen-reader/default.ts @@ -6,7 +6,7 @@ import { type VoiceOverPlaywright, voiceOverTest } from '@guidepup/playwright'; -import { macOSRecord, windowsRecord } from '@guidepup/guidepup'; +import { macOSRecord, windowsRecord } from '@guidepup/record'; import { expect } from '@playwright/test'; import { type DefaultTestType, diff --git a/showcases/screen-reader/tests/button.spec.ts b/showcases/screen-reader/tests/button.spec.ts index ca33ec727b1..4bb8dc10fbf 100644 --- a/showcases/screen-reader/tests/button.spec.ts +++ b/showcases/screen-reader/tests/button.spec.ts @@ -7,7 +7,7 @@ test.describe('DBButton', () => { test, title: 'next()', description: 'should not have icon in screen reader (next())', - url: './#/02/button?page=content', + url: './#/02/button?page=show+icon', async testFn(voiceOver, nvda) { if (nvda) { await nvda?.next(); @@ -17,14 +17,13 @@ test.describe('DBButton', () => { await screenReader?.clearSpokenPhraseLog(); await screenReader?.previous(); await screenReader?.next(); - await screenReader?.next(); } }); testDefault({ test, title: 'tab', description: 'should not have icon in screen reader (tab)', - url: './#/02/button?page=content', + url: './#/02/button?page=show+icon', async testFn(voiceOver, nvda) { if (voiceOver) { // Voiceover isn't working with tab in pipeline @@ -35,7 +34,6 @@ test.describe('DBButton', () => { await nvda?.clearSpokenPhraseLog(); await nvda?.press('Shift+Tab'); await nvda?.press('Tab'); - await nvda?.press('Tab'); } }); }); diff --git a/showcases/screen-reader/tests/checkbox.spec.ts b/showcases/screen-reader/tests/checkbox.spec.ts index 0b594ad5ae4..6542bfe06b1 100644 --- a/showcases/screen-reader/tests/checkbox.spec.ts +++ b/showcases/screen-reader/tests/checkbox.spec.ts @@ -8,7 +8,7 @@ test.describe('DBCheckbox', () => { title: 'default', description: 'should tick and untick checkbox, feedback messages must appear', - url: './#/03/checkbox?page=requirement', + url: './#/03/checkbox?page=required', async testFn(voiceOver, nvda) { if (nvda) { await nvda?.next(); // Focus checkbox 2 diff --git a/showcases/screen-reader/tests/input.spec.ts b/showcases/screen-reader/tests/input.spec.ts index 8f06ca6a40c..78f6462552c 100644 --- a/showcases/screen-reader/tests/input.spec.ts +++ b/showcases/screen-reader/tests/input.spec.ts @@ -7,7 +7,7 @@ test.describe('DBInput', () => { test, title: 'next()', description: 'should have message and label (next())', - url: './#/03/input?page=variant%20helper%20message', + url: './#/03/input?page=show+message', async testFn(voiceOver, nvda) { if (nvda) { // Nvda doesn't have a next if the element is an input @@ -26,7 +26,7 @@ test.describe('DBInput', () => { test, title: 'tab', description: 'should have message and label (tab)', - url: './#/03/input?page=variant%20helper%20message', + url: './#/03/input?page=show+message', async testFn(voiceOver, nvda) { if (voiceOver) { // Voiceover isn't working with tab in pipeline @@ -43,7 +43,7 @@ test.describe('DBInput', () => { test, title: 'required', description: 'should inform user for changes', - url: './#/03/input?page=requirement', + url: './#/03/input?page=required', async testFn(voiceOver, nvda) { if (voiceOver) { /* Goto desired input */ diff --git a/showcases/screen-reader/tests/link.spec.ts b/showcases/screen-reader/tests/link.spec.ts index cdaa4cf8857..9a21b2e7ea9 100644 --- a/showcases/screen-reader/tests/link.spec.ts +++ b/showcases/screen-reader/tests/link.spec.ts @@ -8,7 +8,7 @@ test.describe('DBLink', () => { title: 'default', description: 'should not mention icon, should have link and dimmed link (next())', - url: './#/02/link?page=interaction-states', + url: './#/02/link?page=disabled', async testFn(voiceOver, nvda) { const screenReader = voiceOver ?? nvda; await screenReader?.previous(); // Link "Enabled (Default)/Hover/Pressed" diff --git a/showcases/screen-reader/tests/switch.spec.ts b/showcases/screen-reader/tests/switch.spec.ts index e921e545077..061f9c5d776 100644 --- a/showcases/screen-reader/tests/switch.spec.ts +++ b/showcases/screen-reader/tests/switch.spec.ts @@ -8,7 +8,7 @@ test.describe('DBSwitch', () => { title: 'default', description: 'should toggle switches, should not toggle disabled switch', - url: './#/03/switch?page=states', + url: './#/03/switch?page=checked', async testFn(voiceOver, nvda) { if (nvda) { await nvda?.previous(); // Focus "switch 1" diff --git a/showcases/screen-reader/tests/textarea.spec.ts b/showcases/screen-reader/tests/textarea.spec.ts index 5ff45b6aedd..9738d8cc308 100644 --- a/showcases/screen-reader/tests/textarea.spec.ts +++ b/showcases/screen-reader/tests/textarea.spec.ts @@ -7,7 +7,7 @@ test.describe('DBTextarea', () => { test, title: 'next', description: 'should have message and label (next())', - url: './#/03/textarea?page=variant+helper+message', + url: './#/03/textarea?page=show+message', async testFn(voiceOver, nvda) { if (nvda) { // Nvda doesn't have a next if the element is an input @@ -26,7 +26,7 @@ test.describe('DBTextarea', () => { test, title: 'required', description: 'should inform user for changes', - url: './#/03/textarea?page=requirement', + url: './#/03/textarea?page=required', async testFn(voiceOver, nvda) { if (voiceOver) { /* Goto desired input */ diff --git a/showcases/shared/_accessibility-review.json b/showcases/shared/_accessibility-review.json index 999364cf99b..10f3d29ab4e 100644 --- a/showcases/shared/_accessibility-review.json +++ b/showcases/shared/_accessibility-review.json @@ -12,7 +12,7 @@ { "name": "link", "status": "DONE", - "date": "2023-11-23" + "date": "2024-12-12" }, { "name": "input", @@ -43,5 +43,20 @@ "name": "notification", "status": "DONE", "date": "2023-11-23" + }, + { + "name": "badge", + "status": "DONE", + "date": "2024-12-12" + }, + { + "name": "card", + "status": "DONE", + "date": "2024-12-12" + }, + { + "name": "textarea", + "status": "DONE", + "date": "2024-12-12" } ] diff --git a/showcases/shared/accordion.json b/showcases/shared/accordion.json index 97bd0caf57f..79da28bcecf 100644 --- a/showcases/shared/accordion.json +++ b/showcases/shared/accordion.json @@ -4,21 +4,21 @@ "children": [ { "name": "accordion-item", - "content": "Content 1", + "text": "Content 1", "props": { "headline": "Item 1" } }, { "name": "accordion-item", - "content": "Content 2", + "text": "Content 2", "props": { "headline": "Item 2" } }, { "name": "accordion-item", - "content": "Content 3", + "text": "Content 3", "props": { "headline": "Item 3" } @@ -48,21 +48,21 @@ "children": [ { "name": "accordion-item", - "content": "Content 1", + "text": "Content 1", "props": { "headline": "Item 1" } }, { "name": "accordion-item", - "content": "Content 2", + "text": "Content 2", "props": { "headline": "Item 2" } }, { "name": "accordion-item", - "content": "Content 3", + "text": "Content 3", "props": { "headline": "Item 3" } @@ -86,21 +86,21 @@ "children": [ { "name": "accordion-item", - "content": "Content 1", + "text": "Content 1", "props": { "headline": "Item 1" } }, { "name": "accordion-item", - "content": "Content 2", + "text": "Content 2", "props": { "headline": "Item 2" } }, { "name": "accordion-item", - "content": "Content 3", + "text": "Content 3", "props": { "headline": "Item 3" } diff --git a/showcases/shared/badge.json b/showcases/shared/badge.json index 6b72eca28a5..caf3b3c8eb3 100644 --- a/showcases/shared/badge.json +++ b/showcases/shared/badge.json @@ -132,12 +132,6 @@ { "name": "(Default) Text" }, - { - "name": "(Default) Text - Medium", - "props": { - "size": "medium" - } - }, { "name": "Dot - Small", "content": "", @@ -145,26 +139,11 @@ "noContent": true } }, - { - "name": "Dot - Medium", - "content": "", - "props": { - "noContent": true, - "size": "medium" - } - }, { "name": "Icon - Small", "props": { "example": "icon" } - }, - { - "name": "Icon - Medium", - "props": { - "example": "icon", - "size": "medium" - } } ] }, @@ -229,6 +208,27 @@ "props": { "example": "number" } + }, + { + "name": "(Default) Text - Medium", + "props": { + "size": "medium" + } + }, + { + "name": "Dot - Medium", + "content": "", + "props": { + "noContent": true, + "size": "medium" + } + }, + { + "name": "Icon - Medium", + "props": { + "example": "icon", + "size": "medium" + } } ] } diff --git a/showcases/shared/button.json b/showcases/shared/button.json index ce2a6aaab30..df71a2af66a 100644 --- a/showcases/shared/button.json +++ b/showcases/shared/button.json @@ -47,13 +47,16 @@ ] }, { - "name": "State", + "name": "Disabled", "examples": [ { - "name": "(Default) Enabled" + "name": "(Default) False", + "props": { + "disabled": false + } }, { - "name": "Disabled", + "name": "True", "props": { "disabled": true } @@ -75,19 +78,35 @@ ] }, { - "name": "Content", + "name": "Show Icon", "examples": [ { - "name": "(Default) Text" + "name": "(Default) False", + "props": { + "icon": "person", + "showIcon": false + } }, { - "name": "Icon & Text", + "name": "True", + "props": { + "icon": "person", + "showIcon": true + } + } + ] + }, + { + "name": "No Text", + "examples": [ + { + "name": "(Default) False", "props": { "icon": "person" } }, { - "name": "Icon", + "name": "True", "props": { "icon": "person", "noText": true @@ -96,13 +115,16 @@ ] }, { - "name": "Behaviour", + "name": "Width", "examples": [ { - "name": "(Default) Auto Width" + "name": "(Default) Auto", + "props": { + "width": "auto" + } }, { - "name": "Width full", + "name": "Width", "style": { "width": "500px" }, "props": { "width": "full" diff --git a/showcases/shared/checkbox.json b/showcases/shared/checkbox.json index dbfdce4fb66..c59424b5ebd 100644 --- a/showcases/shared/checkbox.json +++ b/showcases/shared/checkbox.json @@ -27,77 +27,90 @@ ] }, { - "name": "Interaction States", + "name": "Disabled", "role": "group", "examples": [ { - "name": "(Default) Enabled", + "name": "(Default) False", "props": { - "name": "Interaction States" + "name": "Disabled", + "disabled": false } }, { - "name": "Disabled", + "name": "True", "props": { - "name": "Interaction States", + "name": "Disabled", "disabled": true } } ] }, { - "name": "States", + "name": "Checked", "role": "group", "examples": [ { - "name": "(Default) Unchecked", + "name": "(Default) False", "props": { - "name": "States" + "name": "State", + "checked": false } }, { - "name": "Unchecked - Invalid", + "name": "True", "props": { - "name": "States", - "required": true + "name": "State", + "checked": true } - }, + } + ] + }, + { + "name": "Indeterminate", + "role": "group", + "examples": [ { - "name": "Checked", + "name": "(Default) False", "props": { - "name": "States", - "checked": true + "name": "Indeterminate", + "indeterminate": false } }, { - "name": "Checked - Valid", + "name": "True", "props": { - "name": "States", - "required": true, - "checked": true + "name": "Indeterminate", + "indeterminate": true } - }, + } + ] + }, + { + "name": "Validation", + "role": "group", + "examples": [ { - "name": "Indeterminate", + "name": "(Default) No validation", "props": { - "name": "States", - "indeterminate": true + "name": "Validation", + "validation": "no-validation" } }, { - "name": "Indeterminate - Invalid", + "name": "Invalid", "props": { - "name": "States", - "indeterminate": true, - "required": true + "name": "Validation", + "validation": "invalid", + "invalidMessage": "Invalid Message" } }, { - "name": "Indeterminate - Valid", + "name": "Valid", "props": { - "name": "States", - "indeterminate": true, - "required": true + "name": "Validation", + "validation": "valid", + "validMessage": "Valid message" } } ] @@ -122,42 +135,49 @@ ] }, { - "name": "Requirement", + "name": "Required", "role": "group", "examples": [ { - "name": "(Default) Optional", - "props": { - "name": "Requirement" - } - }, - { - "name": "Required", + "name": "(Default) False", "props": { "name": "Requirement", - "required": true + "required": false } }, { - "name": "Required - Indeterminate", + "name": "True", "props": { "name": "Requirement", - "indeterminate": true, "required": true } } ] }, { - "name": "Content", + "name": "Label", "role": "group", "examples": [ { - "name": "(Default) Label", + "name": "(Default) True", "props": { - "name": "Content" + "name": "Label", + "showLabel": true } }, + { + "name": "False", + "props": { + "name": "Label", + "showLabel": false + } + } + ] + }, + { + "name": "Example", + "role": "group", + "examples": [ { "name": "Long label", "style": { @@ -165,14 +185,7 @@ }, "props": { "checked": true, - "name": "Long label" - } - }, - { - "name": "No Label", - "props": { - "name": "Content", - "variant": "hidden" + "name": "Example" } } ] diff --git a/showcases/shared/default-component-data.ts b/showcases/shared/default-component-data.ts index f157d318f0a..791857481de 100644 --- a/showcases/shared/default-component-data.ts +++ b/showcases/shared/default-component-data.ts @@ -1,5 +1,6 @@ export type DefaultComponentExample = { name?: string; + experimental?: boolean; example?: any; style?: { display?: string; diff --git a/showcases/shared/drawer.json b/showcases/shared/drawer.json index 71c2a3d6184..9b23c780155 100644 --- a/showcases/shared/drawer.json +++ b/showcases/shared/drawer.json @@ -52,14 +52,15 @@ "name": "Rounded", "examples": [ { - "name": "(Default) No rounding", + "name": "(Default) False", "props": { + "rounded": false, "open": "open", "onClose": "toggleDrawer(false)" } }, { - "name": "Rounded", + "name": "True", "props": { "rounded": true, "open": "open", @@ -108,14 +109,15 @@ "name": "Backdrop", "examples": [ { - "name": "(Default) With Backdrop", + "name": "(Default) Strong", "props": { + "backdrop": "strong", "open": "open", "onClose": "toggleDrawer(false)" } }, { - "name": "Backdrop-weak", + "name": "Weak", "props": { "backdrop": "weak", "open": "open", @@ -141,7 +143,7 @@ ] }, { - "name": "Directions", + "name": "Direction", "examples": [ { "name": "(Default) Right", diff --git a/showcases/shared/infotext.json b/showcases/shared/infotext.json index b2e86318a5a..272239ea91d 100644 --- a/showcases/shared/infotext.json +++ b/showcases/shared/infotext.json @@ -70,5 +70,22 @@ } } ] + }, + { + "name": "Show Icon", + "examples": [ + { + "name": "(Default) True", + "props": { + "showIcon": true + } + }, + { + "name": "False", + "props": { + "showIcon": false + } + } + ] } ] diff --git a/showcases/shared/input.json b/showcases/shared/input.json index faef42f1620..425de2ecc0a 100644 --- a/showcases/shared/input.json +++ b/showcases/shared/input.json @@ -26,7 +26,7 @@ ] }, { - "name": "Variant Label", + "name": "Variant", "examples": [ { "name": "(Default) Label Above", @@ -41,36 +41,51 @@ "variant": "floating", "value": "Floating Label" } + } + ] + }, + { + "name": "Show Label", + "examples": [ + { + "name": "(Default) True", + "props": { + "label": "Label", + "showLabel": true + } }, { - "name": "Hidden Label", + "name": "False", "props": { "label": "Label", - "variant": "hidden" + "showLabel": false } } ] }, { - "name": "Variant Helper Message", + "name": "Show Message", "examples": [ { - "name": "(Default) Basic", + "name": "(Default) False", "props": { - "label": "Label" + "label": "Label", + "message": "Message", + "showMessage": false } }, { - "name": "Helper Message", + "name": "True", "props": { "label": "Label", - "message": "Helper Message" + "message": "Message", + "showMessage": true } } ] }, { - "name": "States Label Above", + "name": "State", "examples": [ { "name": "(Default) Empty", @@ -84,57 +99,92 @@ "label": "Label", "value": "Filled" } + } + ] + }, + { + "name": "Disabled", + "examples": [ + { + "name": "(Default) False", + "props": { + "label": "Label", + "disabled": false + } }, { - "name": "Disabled", + "name": "True", "props": { "label": "Label", "disabled": true } + } + ] + }, + { + "name": "Readonly", + "examples": [ + { + "name": "(Default) False", + "props": { + "label": "Label", + "value": "(Default) False", + "readOnly": false + } }, { - "name": "Readonly - Filled", + "name": "True", "props": { "label": "Label", - "value": "Readonly - Filled", + "value": "True", "readOnly": true } } ] }, { - "name": "States Floating Label", + "name": "Validation", "examples": [ { - "name": "(Default) Empty", + "name": "(Default) No validation", "props": { "label": "Label", - "variant": "floating" + "validation": "no-validation" } }, { - "name": "Filled", + "name": "Invalid", "props": { "label": "Label", - "value": "Filled", - "variant": "floating" + "validation": "invalid", + "invalidMessage": "Invalid Message" } }, { - "name": "Disabled", + "name": "Valid", "props": { "label": "Label", - "disabled": true, - "variant": "floating" + "validation": "valid", + "validMessage": "Valid message" + } + } + ] + }, + { + "name": "Required", + "examples": [ + { + "name": "(Default) False", + "props": { + "label": "Label", + "required": false } }, { - "name": "Readonly - Filled", + "name": "True", "props": { "label": "Label", - "value": "Readonly - Filled", - "readOnly": true, - "variant": "floating" + "required": true } } ] @@ -149,52 +199,26 @@ "value": "(Default) Text" } }, - { - "name": "Filled Number", - "props": { - "label": "Number", - "value": "123456", - "type": "number" - } - }, { "name": "Text - Leading Icon", "props": { "label": "Label", - "icon": "db" + "icon": "x_placeholder" } }, { "name": "Text - Leading Icon - Trailing Icon", "props": { "label": "Label", - "icon": "db", - "iconAfter": "db" + "icon": "x_placeholder", + "iconAfter": "x_placeholder" } }, { "name": "Text - Trailing Icon", "props": { "label": "Label", - "iconAfter": "db" - } - } - ] - }, - { - "name": "Requirement", - "examples": [ - { - "name": "(Default) Optional", - "props": { - "label": "Label" - } - }, - { - "name": "Required", - "props": { - "label": "Label", - "required": true + "iconAfter": "x_placeholder" } } ] @@ -230,13 +254,6 @@ "type": "email" } }, - { - "name": "Number", - "props": { - "label": "Label", - "type": "number" - } - }, { "name": "Tel", "props": { @@ -285,19 +302,42 @@ "label": "Label", "type": "week" } + } + ] + }, + { + "name": "Example Floating Label", + "examples": [ + { + "name": "(Default) Empty", + "props": { + "label": "Label", + "variant": "floating" + } }, { - "name": "Datalist", + "name": "Filled", "props": { "label": "Label", - "dataList": true + "value": "Filled", + "variant": "floating" } }, { - "name": "File", + "name": "Disabled", "props": { "label": "Label", - "type": "file" + "disabled": true, + "variant": "floating" + } + }, + { + "name": "Readonly - Filled", + "props": { + "label": "Label", + "value": "Readonly - Filled", + "readOnly": true, + "variant": "floating" } } ] @@ -403,6 +443,7 @@ }, { "name": "Datalist", + "experimental": true, "props": { "label": "Label", "variant": "floating", @@ -411,6 +452,7 @@ }, { "name": "File", + "experimental": true, "props": { "label": "Label", "type": "file", diff --git a/showcases/shared/link.json b/showcases/shared/link.json index 53c845c12a5..2468cfefa5c 100644 --- a/showcases/shared/link.json +++ b/showcases/shared/link.json @@ -26,7 +26,7 @@ ] }, { - "name": "Semantic", + "name": "Variant", "examples": [ { "name": "(Default) Adaptive", @@ -44,16 +44,17 @@ ] }, { - "name": "Interaction-States", + "name": "Disabled", "examples": [ { - "name": "Enabled (Default)/Hover/Pressed", + "name": "(Default) False", "props": { - "href": "#" + "href": "#", + "disabled": false } }, { - "name": "Disabled", + "name": "True", "props": { "href": "#", "disabled": true @@ -96,5 +97,24 @@ } } ] + }, + { + "name": "Show Icon", + "examples": [ + { + "name": "(Default) True", + "props": { + "href": "#", + "showIcon": true + } + }, + { + "name": "False", + "props": { + "href": "#", + "showIcon": false + } + } + ] } ] diff --git a/showcases/shared/notification.json b/showcases/shared/notification.json index 153f001bac2..89bcbe97c4b 100644 --- a/showcases/shared/notification.json +++ b/showcases/shared/notification.json @@ -9,7 +9,7 @@ "props": { "headline": "Headline", "icon": "information_circle", - "behaviour": "closable" + "closeable": true } }, { @@ -19,7 +19,7 @@ "props": { "headline": "Headline", "icon": "information_circle", - "behaviour": "closable" + "closeable": true } }, { @@ -29,7 +29,7 @@ "props": { "headline": "Headline", "icon": "information_circle", - "behaviour": "closable" + "closeable": true } } ] @@ -44,7 +44,7 @@ "variant": "docked", "headline": "Headline", "icon": "information_circle", - "behaviour": "closable" + "closeable": true } }, { @@ -54,7 +54,7 @@ "variant": "standalone", "headline": "Headline", "icon": "information_circle", - "behaviour": "closable" + "closeable": true } }, { @@ -64,7 +64,7 @@ "variant": "overlay", "headline": "Headline", "icon": "information_circle", - "behaviour": "closable", + "closeable": true, "timestamp": "10 min ago" } } @@ -79,7 +79,7 @@ "props": { "type": "alert", "headline": "Headline", - "behaviour": "closable" + "closeable": true } }, { @@ -89,7 +89,7 @@ "type": "alert", "semantic": "neutral", "headline": "Headline", - "behaviour": "closable" + "closeable": true } }, { @@ -99,7 +99,7 @@ "type": "alert", "semantic": "critical", "headline": "Headline", - "behaviour": "closable" + "closeable": true } }, { @@ -109,7 +109,7 @@ "type": "alert", "semantic": "informational", "headline": "Headline", - "behaviour": "closable" + "closeable": true } }, { @@ -119,7 +119,7 @@ "type": "alert", "semantic": "successful", "headline": "Headline", - "behaviour": "closable" + "closeable": true } }, { @@ -129,32 +129,137 @@ "type": "alert", "semantic": "warning", "headline": "Headline", - "behaviour": "closable" + "closeable": true } } ] }, { - "name": "Behaviour", + "name": "Closeable", "examples": [ { - "name": "(Default) Permanent", + "name": "(Default) False", "style": { "width": "300px" }, "props": { - "behaviour": "permanent" + "closeable": false + } + }, + { + "name": "True", + "style": { "width": "300px" }, + "props": { + "closeable": true + } + } + ] + }, + { + "name": "Visual", + "examples": [ + { + "name": "(Default) Icon", + "style": { "width": "300px" }, + "props": { + "icon": "information_circle" + } + }, + { + "name": "Image", + "style": { "width": "300px" }, + "props": { + "img": true + } + } + ] + }, + { + "name": "Show Icon", + "examples": [ + { + "name": "(Default) True", + "style": { "width": "300px" }, + "props": { + "icon": "information_circle", + "showIcon": true + } + }, + { + "name": "False", + "style": { "width": "300px" }, + "props": { + "icon": "information_circle", + "showIcon": false + } + } + ] + }, + { + "name": "Link Variant", + "examples": [ + { + "name": "(Default) Block", + "style": { "width": "300px" }, + "props": { + "link": true, + "linkVariant": "block" } }, { - "name": "Closeable", + "name": "Inline", "style": { "width": "300px" }, "props": { - "behaviour": "closable" + "link": true, + "linkVariant": "inline" + } + } + ] + }, + { + "name": "Show Headline", + "examples": [ + { + "name": "(Default) True", + "style": { "width": "300px" }, + "props": { + "headline": "Headline", + "showHeadline": true + } + }, + { + "name": "False", + "style": { "width": "300px" }, + "props": { + "headline": "Headline", + "showHeadline": false + } + } + ] + }, + { + "name": "Show Timestamp", + "examples": [ + { + "name": "(Default) False", + "style": { "width": "300px" }, + "props": { + "variant": "overlay", + "showTimestamp": false, + "timestamp": "10 min ago" + } + }, + { + "name": "True", + "style": { "width": "300px" }, + "props": { + "variant": "overlay", + "showTimestamp": true, + "timestamp": "10 min ago" } } ] }, { - "name": "Content - Variant:Docked", + "name": "Examples - Variant:Docked", "codeFileName": "ContentVariantDocked", "examples": [ { @@ -279,7 +384,7 @@ ] }, { - "name": "Content - Variant:Standalone", + "name": "Examples - Variant:Standalone", "codeFileName": "ContentVariantStandalone", "examples": [ { @@ -412,7 +517,7 @@ ] }, { - "name": "Content - Variant:Overlay", + "name": "Examples - Variant:Overlay", "codeFileName": "ContentVariantOverlay", "examples": [ { diff --git a/showcases/shared/radio.json b/showcases/shared/radio.json index bd7db436984..a84247200d7 100644 --- a/showcases/shared/radio.json +++ b/showcases/shared/radio.json @@ -30,53 +30,69 @@ ] }, { - "name": "Interaction States", + "name": "Disabled", "role": "radiogroup", "examples": [ { - "name": "(Default) Enabled", + "name": "(Default) False", "props": { - "name": "Interaction States" + "name": "Disabled", + "disabled": false } }, { - "name": "Disabled", + "name": "True", "props": { - "name": "Interaction States", + "name": "Disabled", "disabled": true } } ] }, { - "name": "States", + "name": "Checked", "role": "radiogroup", "examples": [ { - "name": "(Default) Unselected", + "name": "(Default) False", "props": { - "name": "States" + "name": "Checked" } }, { - "name": "Unselected - Invalid", + "name": "True", "props": { - "name": "States Required", - "required": true + "name": "Checked", + "checked": true + } + } + ] + }, + { + "name": "Validation", + "role": "radiogroup", + "examples": [ + { + "name": "(Default) No validation", + "props": { + "name": "No validation", + "validation": "no-validation" } }, { - "name": "Selected", + "name": "Invalid", "props": { - "name": "States", - "checked": true + "name": "invalid", + "validation": "invalid", + "invalidMessage": "Invalid Message" } }, { - "name": "Selected - Valid", + "name": "Valid", "props": { - "name": "States Required", - "required": true, + "name": "valid", + "validation": "valid", + "validMessage": "Valid message", "checked": true } } @@ -102,17 +118,18 @@ ] }, { - "name": "Requirement", + "name": "Required", "role": "radiogroup", "examples": [ { - "name": "(Default) Optional", + "name": "(Default) False", "props": { - "name": "Requirement" + "name": "Requirement", + "required": false } }, { - "name": "Required", + "name": "True", "props": { "name": "Requirement", "required": true @@ -121,20 +138,21 @@ ] }, { - "name": "Content", + "name": "Show Label", "role": "radiogroup", "examples": [ { - "name": "(Default) Label", + "name": "(Default) True", "props": { - "name": "Content" + "name": "Content", + "showLabel": true } }, { - "name": "Hidden Label", + "name": "False", "props": { "name": "Content", - "variant": "hidden" + "showLabel": false } } ] diff --git a/showcases/shared/select.json b/showcases/shared/select.json index 3bf104a7585..c6040021d6b 100644 --- a/showcases/shared/select.json +++ b/showcases/shared/select.json @@ -59,7 +59,7 @@ ] }, { - "name": "Variant Label", + "name": "Variant", "examples": [ { "name": "(Default) Label Above", @@ -97,9 +97,32 @@ "variant": "floating", "value": "Floating Label" } + } + ] + }, + { + "name": "Show Label", + "examples": [ + { + "name": "(Default) True", + "style": { + "width": "300px" + }, + "props": { + "options": [ + { + "value": "Option 1" + }, + { + "value": "Option 2" + } + ], + "label": "Label", + "showLabel": true + } }, { - "name": "Hidden Label", + "name": "False", "style": { "width": "300px" }, @@ -113,16 +136,16 @@ } ], "label": "Label", - "variant": "hidden" + "showLabel": false } } ] }, { - "name": "Variant Helper Message", + "name": "Show Message", "examples": [ { - "name": "(Default) Basic", + "name": "(Default) False", "style": { "width": "300px" }, @@ -135,11 +158,13 @@ "value": "Option 2" } ], - "label": "Label" + "label": "Label", + "message": "Message", + "showMessage": false } }, { - "name": "Helper Message", + "name": "True", "style": { "width": "300px" }, @@ -153,13 +178,14 @@ } ], "label": "Label", - "message": "Helper Message" + "message": "Message", + "showMessage": true } } ] }, { - "name": "States Label Above", + "name": "State", "examples": [ { "name": "(Default) Empty", @@ -196,9 +222,14 @@ "label": "Label", "value": "Filled" } - }, + } + ] + }, + { + "name": "Validation", + "examples": [ { - "name": "Disabled", + "name": "(Default) No validation", "style": { "width": "300px" }, @@ -212,16 +243,11 @@ } ], "label": "Label", - "disabled": true + "validation": "no-validation" } - } - ] - }, - { - "name": "States Floating Label", - "examples": [ + }, { - "name": "(Default) Empty", + "name": "Invalid", "style": { "width": "300px" }, @@ -235,18 +261,19 @@ } ], "label": "Label", - "variant": "floating" + "validation": "invalid", + "invalidMessage": "Invalid Message" } }, { - "name": "Filled", + "name": "Valid", "style": { "width": "300px" }, "props": { "options": [ { - "value": "Filled", + "value": "Valid", "selected": true }, { @@ -254,29 +281,50 @@ } ], "label": "Label", - "value": "Filled", - "variant": "floating" + "validation": "valid", + "validMessage": "Valid message", + "value": "Valid" + } + } + ] + }, + { + "name": "Disabled", + "examples": [ + { + "name": "(Default) False", + "style": { + "width": "300px" + }, + "props": { + "options": [ + { + "value": "Option 1" + }, + { + "value": "Option 2" + } + ], + "label": "Label", + "disabled": false } }, { - "name": "Disabled", + "name": "True", "style": { "width": "300px" }, "props": { "options": [ { - "value": "Disabled", - "selected": true + "value": "Option 1" }, { "value": "Option 2" } ], "label": "Label", - "disabled": true, - "variant": "floating", - "value": "Disabled" + "disabled": true } } ] @@ -316,16 +364,16 @@ } ], "label": "Label", - "icon": "db" + "icon": "x_placeholder" } } ] }, { - "name": "Requirement", + "name": "Required", "examples": [ { - "name": "(Default) Optional", + "name": "(Default) False", "style": { "width": "300px" }, @@ -338,11 +386,12 @@ "value": "Option 2" } ], - "label": "Label" + "label": "Label", + "required": false } }, { - "name": "Required", + "name": "True", "style": { "width": "300px" }, @@ -360,5 +409,69 @@ } } ] + }, + { + "name": "Examples Floating Label", + "examples": [ + { + "name": "(Default) Empty", + "style": { + "width": "300px" + }, + "props": { + "options": [ + { + "value": "Option 1" + }, + { + "value": "Option 2" + } + ], + "label": "Label", + "variant": "floating" + } + }, + { + "name": "Filled", + "style": { + "width": "300px" + }, + "props": { + "options": [ + { + "value": "Filled", + "selected": true + }, + { + "value": "Option 2" + } + ], + "label": "Label", + "value": "Filled", + "variant": "floating" + } + }, + { + "name": "Disabled", + "style": { + "width": "300px" + }, + "props": { + "options": [ + { + "value": "Disabled", + "selected": true + }, + { + "value": "Option 2" + } + ], + "label": "Label", + "disabled": true, + "variant": "floating", + "value": "Disabled" + } + } + ] } ] diff --git a/showcases/shared/stack.json b/showcases/shared/stack.json index 7670332792f..b40f62c7d76 100644 --- a/showcases/shared/stack.json +++ b/showcases/shared/stack.json @@ -49,7 +49,7 @@ "name": "Variant", "examples": [ { - "name": "(Def) Simple", + "name": "(Default) Simple", "props": {}, "style": { "width": "200px" @@ -165,7 +165,7 @@ } }, { - "name": "(Def) small", + "name": "(Default) small", "props": { "gap": "small" }, @@ -241,7 +241,7 @@ ], "examples": [ { - "name": "(Def) Column", + "name": "(Default) Column", "props": {}, "style": { "width": "200px" @@ -279,7 +279,7 @@ ], "examples": [ { - "name": "(Def) No Wrap: Column", + "name": "(Default) No Wrap: Column", "style": { "width": "160px", "height": "88px" @@ -340,7 +340,7 @@ ], "examples": [ { - "name": "(Def) Stretch", + "name": "(Default) Stretch", "style": { "width": "200px" }, @@ -398,7 +398,7 @@ ], "examples": [ { - "name": "(Def) Stretch", + "name": "(Default) Stretch", "style": { "height": "100px" }, @@ -460,7 +460,7 @@ ], "examples": [ { - "name": "(Def) Start", + "name": "(Default) Start", "style": { "width": "200px", "height": "200px" @@ -522,7 +522,7 @@ ], "examples": [ { - "name": "(Def) Start", + "name": "(Default) Start", "style": { "width": "300px" }, diff --git a/showcases/shared/switch.json b/showcases/shared/switch.json index d31a9ff33ce..cf38a386c9e 100644 --- a/showcases/shared/switch.json +++ b/showcases/shared/switch.json @@ -20,19 +20,33 @@ ] }, { - "name": "States", + "name": "Checked", "examples": [ { - "name": "(Def) Enabled" + "name": "(Default) False", + "props": { + "checked": false + } }, { - "name": "Checked", + "name": "True", "props": { "checked": true } + } + ] + }, + { + "name": "Disabled", + "examples": [ + { + "name": "(Default) False", + "props": { + "disabled": false + } }, { - "name": "Disabled", + "name": "True", "props": { "disabled": true } @@ -43,26 +57,26 @@ "name": "Emphasis", "examples": [ { - "name": "(Def) Weak + unchecked", + "name": "(Default) Weak + Unchecked", "props": { "emphasis": "weak" } }, { - "name": "Strong + unchecked", + "name": "(Default) Weak + Checked", "props": { - "emphasis": "strong" + "emphasis": "weak", + "checked": true } }, { - "name": "(Def) Weak + checked", + "name": "Strong + Unchecked", "props": { - "emphasis": "weak", - "checked": true + "emphasis": "strong" } }, { - "name": "Strong + checked", + "name": "Strong + Checked", "props": { "emphasis": "strong", "checked": true @@ -74,26 +88,26 @@ "name": "Visual Aid", "examples": [ { - "name": "(Def) No Visual Aid + unchecked", + "name": "(Default) False + Unchecked", "props": { "visualAid": false } }, { - "name": "Visual Aid + unchecked", + "name": "(Default) False + Checked", "props": { - "visualAid": true + "visualAid": false, + "checked": true } }, { - "name": "(Def) No Visual Aid + checked", + "name": "True + Unchecked", "props": { - "visualAid": false, - "checked": true + "visualAid": true } }, { - "name": "Visual Aid + checked", + "name": "True + Checked", "props": { "visualAid": true, "checked": true @@ -105,7 +119,7 @@ "name": "Size", "examples": [ { - "name": "(Def) Medium" + "name": "(Default) Medium" }, { "name": "Small", @@ -116,15 +130,35 @@ ] }, { - "name": "Content", + "name": "Show Label", + "examples": [ + { + "name": "(Default) True", + "props": { + "showLabel": true + } + }, + { + "name": "False", + "props": { + "showLabel": false + } + } + ] + }, + { + "name": "Required", "examples": [ { - "name": "(Def) Label" + "name": "(Default) False", + "props": { + "required": false + } }, { - "name": "No Label", + "name": "True", "props": { - "variant": "hidden" + "required": true } } ] diff --git a/showcases/shared/tab-item.json b/showcases/shared/tab-item.json index 835738010be..8385a2ce437 100644 --- a/showcases/shared/tab-item.json +++ b/showcases/shared/tab-item.json @@ -66,20 +66,20 @@ "name": "Text - Icon (Leading)", "props": { "label": "Text - Icon (Leading)", - "icon": "db" + "icon": "x_placeholder" } }, { "name": "Text - Icon (Trailing)", "props": { "label": "Text - Icon (Trailing)", - "iconAfter": "db" + "iconAfter": "x_placeholder" } }, { "name": "Icon", "props": { - "icon": "db", + "icon": "x_placeholder", "noText": true } } diff --git a/showcases/shared/textarea.json b/showcases/shared/textarea.json index 034a05f44c8..a1b24d4a6ea 100644 --- a/showcases/shared/textarea.json +++ b/showcases/shared/textarea.json @@ -26,7 +26,7 @@ ] }, { - "name": "Variant Label", + "name": "Variant", "examples": [ { "name": "(Default) Label Above", @@ -41,36 +41,50 @@ "variant": "floating", "value": "Floating Label" } + } + ] + }, + { + "name": "Show Label", + "examples": [ + { + "name": "(Default) True", + "props": { + "label": "Label", + "showLabel": true + } }, { - "name": "Hidden Label", + "name": "False", "props": { "label": "Label", - "variant": "hidden" + "showLabel": false } } ] }, { - "name": "Variant Helper Message", + "name": "Show Message", "examples": [ { - "name": "(Default) Basic", + "name": "(Default) False", "props": { - "label": "Label" + "label": "Label", + "showMessage": false } }, { - "name": "Helper Message", + "name": "true", "props": { "label": "Label", - "message": "Helper Message" + "message": "Message", + "showMessage": true } } ] }, { - "name": "States Label Above", + "name": "State", "examples": [ { "name": "(Default) Empty", @@ -84,72 +98,89 @@ "label": "Label", "value": "Filled" } - }, + } + ] + }, + { + "name": "Disabled", + "examples": [ { - "name": "Disabled", + "name": "(Default) False", "props": { "label": "Label", - "disabled": true + "disabled": false } }, { - "name": "Readonly - Filled", + "name": "True", "props": { "label": "Label", - "value": "Readonly - Filled", - "readOnly": true + "disabled": true } } ] }, { - "name": "States Floating Label", + "name": "Readonly", "examples": [ { - "name": "(Default) Empty", + "name": "(Default) False", "props": { "label": "Label", - "variant": "floating" + "value": "(Default) False", + "readOnly": false } }, { - "name": "Filled", + "name": "True", "props": { "label": "Label", - "value": "Filled", - "variant": "floating" + "value": "True", + "readOnly": true + } + } + ] + }, + { + "name": "Validation", + "examples": [ + { + "name": "(Default) No validation", + "props": { + "label": "Label", + "validation": "no-validation" } }, { - "name": "Disabled", + "name": "Invalid", "props": { "label": "Label", - "disabled": true, - "variant": "floating" + "validation": "invalid", + "invalidMessage": "Invalid Message" } }, { - "name": "Readonly - Filled", + "name": "Valid", "props": { "label": "Label", - "value": "Readonly - Filled", - "readOnly": true, - "variant": "floating" + "validation": "valid", + "validMessage": "Valid message" } } ] }, { - "name": "Requirement", + "name": "Required", "examples": [ { - "name": "(Default) Optional", + "name": "(Default) False", "props": { - "label": "Label" + "label": "Label", + "required": false } }, { - "name": "Required", + "name": "True", "props": { "label": "Label", "required": true @@ -178,5 +209,42 @@ } } ] + }, + { + "name": "Examples Floating Label", + "examples": [ + { + "name": "(Default) Empty", + "props": { + "label": "Label", + "variant": "floating" + } + }, + { + "name": "Filled", + "props": { + "label": "Label", + "value": "Filled", + "variant": "floating" + } + }, + { + "name": "Disabled", + "props": { + "label": "Label", + "disabled": true, + "variant": "floating" + } + }, + { + "name": "Readonly - Filled", + "props": { + "label": "Label", + "value": "Readonly - Filled", + "readOnly": true, + "variant": "floating" + } + } + ] } ] diff --git a/showcases/stencil-showcase/package.json b/showcases/stencil-showcase/package.json index 6ee48c7fcfb..2e3293714aa 100644 --- a/showcases/stencil-showcase/package.json +++ b/showcases/stencil-showcase/package.json @@ -23,7 +23,7 @@ "@angular/platform-browser": "17.3.12", "@angular/platform-browser-dynamic": "17.3.12", "@angular/router": "17.3.12", - "@stencil/core": "4.22.3", + "@stencil/core": "4.23.0", "rxjs": "~7.8.1", "tslib": "^2.8.1", "zone.js": "~0.14.10" diff --git a/showcases/vue-showcase/README.md b/showcases/vue-showcase/README.md index e2eb0170be9..302110cdc7d 100644 --- a/showcases/vue-showcase/README.md +++ b/showcases/vue-showcase/README.md @@ -4,7 +4,7 @@ This template should help get you started developing with Vue 3 and TypeScript i ## Recommended IDE Setup -- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin). +- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin). ## Type Support For `.vue` Imports in TS diff --git a/showcases/vue-showcase/package.json b/showcases/vue-showcase/package.json index bfae799366c..de9550b7c08 100644 --- a/showcases/vue-showcase/package.json +++ b/showcases/vue-showcase/package.json @@ -20,7 +20,7 @@ "@vitejs/plugin-vue": "^5.2.0", "cross-env": "^7.0.3", "typescript": "^5.4.5", - "vite": "^6.0.1", + "vite": "^6.0.3", "vue-tsc": "^2.1.10" } } diff --git a/showcases/vue-showcase/src/components/accordion/Accordion.vue b/showcases/vue-showcase/src/components/accordion/Accordion.vue index 58cea1e3543..0557d38f8fc 100644 --- a/showcases/vue-showcase/src/components/accordion/Accordion.vue +++ b/showcases/vue-showcase/src/components/accordion/Accordion.vue @@ -20,9 +20,9 @@ import { :behaviour="exampleProps?.behaviour" :variant="exampleProps?.variant" > - - - + + + diff --git a/showcases/vue-showcase/src/components/button/Button.vue b/showcases/vue-showcase/src/components/button/Button.vue index 744f9bd039a..a5c36073900 100644 --- a/showcases/vue-showcase/src/components/button/Button.vue +++ b/showcases/vue-showcase/src/components/button/Button.vue @@ -19,6 +19,7 @@ const log = (exampleName: string) => { :size="exampleProps?.size" :icon="exampleProps?.icon" :noText="exampleProps?.noText" + :showIcon="exampleProps?.showIcon" :disabled="exampleProps?.disabled" :width="exampleProps?.width" @click="log(exampleName)" diff --git a/showcases/vue-showcase/src/components/checkbox/Checkbox.vue b/showcases/vue-showcase/src/components/checkbox/Checkbox.vue index c347de506f2..440d53a4298 100644 --- a/showcases/vue-showcase/src/components/checkbox/Checkbox.vue +++ b/showcases/vue-showcase/src/components/checkbox/Checkbox.vue @@ -1,7 +1,7 @@ diff --git a/showcases/vue-showcase/src/components/infotext/Infotext.vue b/showcases/vue-showcase/src/components/infotext/Infotext.vue index 4ccca804f94..7bb00ccddeb 100644 --- a/showcases/vue-showcase/src/components/infotext/Infotext.vue +++ b/showcases/vue-showcase/src/components/infotext/Infotext.vue @@ -13,6 +13,7 @@ import { DBInfotext } from "../../../../../output/vue/src"; :size="exampleProps?.size" :semantic="exampleProps?.semantic" :icon="exampleProps?.icon" + :showIcon="exampleProps?.showIcon" > {{ exampleName }} diff --git a/showcases/vue-showcase/src/components/input/Input.vue b/showcases/vue-showcase/src/components/input/Input.vue index 6100e46955b..4c6f601e804 100644 --- a/showcases/vue-showcase/src/components/input/Input.vue +++ b/showcases/vue-showcase/src/components/input/Input.vue @@ -2,6 +2,7 @@ import DefaultComponent from "../DefaultComponent.vue"; import defaultComponentVariants from "../../../../shared/input.json"; import { + DBCheckbox, DBInput, LabelVariantType, ValueLabelType @@ -28,6 +29,7 @@ const getDataList = ( > {{ exampleName }} diff --git a/showcases/vue-showcase/src/components/notification/Notification.vue b/showcases/vue-showcase/src/components/notification/Notification.vue index 6c2399804c9..3d063fa0dad 100644 --- a/showcases/vue-showcase/src/components/notification/Notification.vue +++ b/showcases/vue-showcase/src/components/notification/Notification.vue @@ -24,7 +24,10 @@ const log = (exampleName: string) => { :link-variant="exampleProps?.linkVariant" :timestamp="exampleProps?.timestamp" :icon="exampleProps?.icon" - :behaviour="exampleProps?.behaviour" + :closeable="exampleProps?.closeable" + :showIcon="exampleProps?.showIcon" + :showHeadline="exampleProps?.showHeadline" + :showTimestamp="exampleProps?.showTimestamp" @onClose="log(exampleName)" > diff --git a/showcases/vue-showcase/src/components/select/Select.vue b/showcases/vue-showcase/src/components/select/Select.vue index ffdcd6a332b..97360f952bd 100644 --- a/showcases/vue-showcase/src/components/select/Select.vue +++ b/showcases/vue-showcase/src/components/select/Select.vue @@ -1,7 +1,7 @@