diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000000..b64458dbf1 Binary files /dev/null and b/.DS_Store differ diff --git a/.github/workflows/develop-release.yml b/.github/workflows/develop-release.yml new file mode 100644 index 0000000000..0c72846251 --- /dev/null +++ b/.github/workflows/develop-release.yml @@ -0,0 +1,22 @@ +# Trigger jenkins workflow to build webup on 172.16.2.103 using ketchup.zip from branch staging + +name: ketchup-outsourcing-release + +on: + push: + branches: + - staging + +jobs: + run-cicd: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v4 + + - name: Trigger jenkins workflow + uses: fjogeleit/http-request-action@v1 + with: + url: 'https://webuptest.smeup.com/jenkins/job/WebupKetchupOutsourcingPipeline/build?token=${{ secrets.JENKINS_WEBHOOK_TOKEN }}' + method: 'GET' + username: ${{ secrets.JENKINS_WEBHOOK_USERNAME }} + password: ${{ secrets.JENKINS_WEBHOOK_PASSWORD }} \ No newline at end of file diff --git a/.github/workflows/staging.yaml b/.github/workflows/staging.yaml index 565fd62f8f..43ec2477b3 100644 --- a/.github/workflows/staging.yaml +++ b/.github/workflows/staging.yaml @@ -6,6 +6,7 @@ on: - staging env: + VERSION: TEST-SNAPSHOT AWS_REGION: eu-south-1 jobs: @@ -28,6 +29,12 @@ jobs: - name: Run Ketchup Showcase build run: npm run ksc:build + + - name: Zip artifacts + run: | + cd packages/ketchup/dist + zip -qr /tmp/ketchup.zip * + zip -qr /tmp/ketchup-components.zip ketchup/* - name: Setup AWS uses: aws-actions/configure-aws-credentials@v4 @@ -37,4 +44,9 @@ jobs: aws-region: ${{ env.AWS_REGION }} - name: Upload artifacts to AWS S3 + run: | + aws s3 cp /tmp/ketchup.zip s3://smeup-ketchup/npm-pub/ketchup-stencil/${{ env.VERSION }}/zip/ketchup.zip + aws s3 cp /tmp/ketchup-components.zip s3://smeup-ketchup/npm-pub/ketchup-stencil/${{ env.VERSION }}/zip/ketchup-components.zip + + - name: Upload showcase to AWS S3 run: aws s3 sync packages/ketchup-showcase/dist/ s3://smeup-ketchup/staging/ --delete \ No newline at end of file diff --git a/.gitignore b/.gitignore index 6e32073ba6..4c3560aedd 100644 --- a/.gitignore +++ b/.gitignore @@ -5,3 +5,4 @@ packages/ketchup/src/assets/debug.js target/ .yarn/cache .yarn/install-state.gz +.package-lock.json diff --git a/.vscode/settings.json b/.vscode/settings.json index 0c4b71bfdd..5506159556 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,4 +1,5 @@ { + "editor.defaultFormatter": "esbenp.prettier-vscode", "editor.formatOnSave": true, "editor.codeActionsOnSave": { "source.fixAll.eslint": "explicit" @@ -25,5 +26,8 @@ }, "[jsonc]": { "editor.defaultFormatter": "esbenp.prettier-vscode" + }, + "[scss]": { + "editor.defaultFormatter": "esbenp.prettier-vscode" } } diff --git a/README.md b/README.md index 878252cf17..3941a5221d 100644 --- a/README.md +++ b/README.md @@ -54,7 +54,8 @@ Ketchup repository is a monorepo multi-package repository managed with [Lerna](h ## Showcase -Go to [Ketchup Showcase](http://ketchup.smeup.com) to see our components live.

(back to top)

+ +Go to [Ketchup Showcase](https://smeup.github.io/ketchup/) to see our components live.

(back to top)

## Getting started diff --git a/packages/.DS_Store b/packages/.DS_Store new file mode 100644 index 0000000000..353dd0c3ec Binary files /dev/null and b/packages/.DS_Store differ diff --git a/packages/ketchup-showcase/public/showcase.css b/packages/ketchup-showcase/public/showcase.css index 03b3b25ed1..1bcd9fbc31 100644 --- a/packages/ketchup-showcase/public/showcase.css +++ b/packages/ketchup-showcase/public/showcase.css @@ -38,26 +38,24 @@ } code.flat { - background: none; - border-radius: 0; - box-shadow: 0 0 2px 0px rgb(128, 128, 128); - color: var(--kup-primary-color); + background: var(--kup-layer-1); + border-radius: var(--kup-radius-00); + border: 1px solid var(--kup-border-subtle); + color: var(--kup-text-primary); display: flex; font-family: var(--kup-font-family-monospace); - font-size: 16px; + font-size: 14px; font-weight: 500; margin: auto; max-width: 100%; - padding: 20px 10px; + padding: var(--kup-space-04) var(--kup-space-03); width: max-content; } .code-word { - color: var(--kup-primary-color); - font-family: var(--kup-font-family-monospace); - font-size: 1.2em; + color: var(--kup-primary-color-60); + /* font-family: var(--kup-font-family-monospace); */ font-weight: 600; - word-break: break-word; } .sample-section .code-word { diff --git a/packages/ketchup-showcase/src/App.vue b/packages/ketchup-showcase/src/App.vue index c5eb23661a..fe5fa907c8 100644 --- a/packages/ketchup-showcase/src/App.vue +++ b/packages/ketchup-showcase/src/App.vue @@ -130,7 +130,7 @@ export default { ) { dom.ketchupInit = { ...dom.ketchupInit, - theme: { name: 'dark' }, + theme: { name: 'octane' }, }; } document.addEventListener('kup-theme-change', () => { @@ -161,9 +161,9 @@ export default { methods: { changeTheme(e: CustomEvent): void { if (e.detail.value === 'on') { - dom.ketchup.theme.set('dark'); + dom.ketchup.theme.set('darkOctaneGray'); } else { - dom.ketchup.theme.set('ketchup'); + dom.ketchup.theme.set('octane'); } }, drawerReady(): void { @@ -197,7 +197,7 @@ export default { }, removeSpinner(): void { setTimeout(() => { - if (dom.ketchup.theme.name === 'dark') { + if (dom.ketchup.theme.name === 'darkOctaneGray') { theme.checked = true; } spinnerLabel.innerHTML = 'Ready!'; @@ -897,6 +897,16 @@ export default { value: 'KupTheme', visible: true, }, + { + cells: { + ROUTE: { + value: 'kup-token', + }, + }, + icon: 'dns', + value: 'KupToken', + visible: true, + }, { cells: { ROUTE: { @@ -1105,7 +1115,7 @@ label { } .version { - border-top: 1px solid var(--kup-border-color); + border-top: 1px solid var(--kup-border-subtle); box-sizing: border-box; font-weight: 600; margin-top: auto; @@ -1205,7 +1215,7 @@ a.footer__icon--trailing { #rasterize-viewer { background: var(--kup-background-color); bottom: 0; - border: 1px solid var(--kup-border-color); + border: 1px solid var(--kup-border-subtle); height: 30vh; overflow: auto; position: fixed; diff --git a/packages/ketchup-showcase/src/plugins/router.ts b/packages/ketchup-showcase/src/plugins/router.ts index 520ef39ceb..a10610b508 100644 --- a/packages/ketchup-showcase/src/plugins/router.ts +++ b/packages/ketchup-showcase/src/plugins/router.ts @@ -347,6 +347,11 @@ const frameworkRoutes = [ name: 'kup-theme', component: () => import(`@/views/framework/kup-theme/KupTheme.vue`), }, + { + path: `/kup-token`, + name: 'kup-token', + component: () => import(`@/views/framework/kup-token/KupToken.vue`), + }, { path: `/kup-toolbar`, name: 'kup-toolbar', diff --git a/packages/ketchup-showcase/src/views/components/advanced/card/examples/CardCollapsible.vue b/packages/ketchup-showcase/src/views/components/advanced/card/examples/CardCollapsible.vue index 552818f473..37d2137c49 100644 --- a/packages/ketchup-showcase/src/views/components/advanced/card/examples/CardCollapsible.vue +++ b/packages/ketchup-showcase/src/views/components/advanced/card/examples/CardCollapsible.vue @@ -138,7 +138,7 @@ export default { ], }, ], - color: ['var(--kup-spinner-color)', 'var(--kup-border-color)'], + color: ['var(--kup-spinner-color)', 'var(--kup-border-subtle)'], image: [ { data: [ diff --git a/packages/ketchup-showcase/src/views/components/advanced/card/examples/CardDialog.vue b/packages/ketchup-showcase/src/views/components/advanced/card/examples/CardDialog.vue index be3ba3a7b6..ba71d185be 100644 --- a/packages/ketchup-showcase/src/views/components/advanced/card/examples/CardDialog.vue +++ b/packages/ketchup-showcase/src/views/components/advanced/card/examples/CardDialog.vue @@ -313,7 +313,7 @@ export default { ], }, ], - color: ['var(--kup-spinner-color)', 'var(--kup-border-color)'], + color: ['var(--kup-spinner-color)', 'var(--kup-border-subtle)'], combobox: [ { data: { diff --git a/packages/ketchup-showcase/src/views/components/advanced/card/examples/CardStandard.vue b/packages/ketchup-showcase/src/views/components/advanced/card/examples/CardStandard.vue index d1bfacc2f8..7b6542c6ea 100644 --- a/packages/ketchup-showcase/src/views/components/advanced/card/examples/CardStandard.vue +++ b/packages/ketchup-showcase/src/views/components/advanced/card/examples/CardStandard.vue @@ -1164,7 +1164,7 @@ export default { ], }, ], - color: ['var(--kup-spinner-color)', 'var(--kup-border-color)'], + color: ['var(--kup-spinner-color)', 'var(--kup-border-subtle)'], combobox: [ { data: { diff --git a/packages/ketchup-showcase/src/views/components/advanced/dashboard/examples/DashboardLogin.vue b/packages/ketchup-showcase/src/views/components/advanced/dashboard/examples/DashboardLogin.vue index 3eefd0028f..a28ad3cdd2 100644 --- a/packages/ketchup-showcase/src/views/components/advanced/dashboard/examples/DashboardLogin.vue +++ b/packages/ketchup-showcase/src/views/components/advanced/dashboard/examples/DashboardLogin.vue @@ -241,7 +241,7 @@ export default { } .login-box { - border: 1px solid var(--kup-border-color); + border: 1px solid var(--kup-border-subtle); box-shadow: var(--kup-box-shadow); margin: 4px; padding: 8px; diff --git a/packages/ketchup-showcase/src/views/components/basic/chip/Chip.vue b/packages/ketchup-showcase/src/views/components/basic/chip/Chip.vue index ac938755f5..496d5fc922 100644 --- a/packages/ketchup-showcase/src/views/components/basic/chip/Chip.vue +++ b/packages/ketchup-showcase/src/views/components/basic/chip/Chip.vue @@ -15,6 +15,21 @@ + + + + + @@ -24,6 +39,11 @@ import ChipBasic from '@/views/components/basic/chip/examples/ChipBasic'; import ChipChoice from '@/views/components/basic/chip/examples/ChipChoice'; import ChipFilter from '@/views/components/basic/chip/examples/ChipFilter'; import ChipInput from '@/views/components/basic/chip/examples/ChipInput'; +import ChipSize from '@/views/components/basic/chip/examples/ChipSize'; +import ChipVariant from '@/views/components/basic/chip/examples/ChipVariant'; +import ChipColor from '@/views/components/basic/chip/examples/ChipColor'; +import ChipStructure from '@/views/components/basic/chip/examples/ChipStructure'; +import ChipCombination from '@/views/components/basic/chip/examples/ChipCombination'; import Comp from '@/views/templates/Comp'; export default { components: { @@ -32,6 +52,11 @@ export default { ChipChoice, ChipFilter, ChipInput, + ChipSize, + ChipVariant, + ChipColor, + ChipStructure, + ChipCombination, Comp, }, data() { @@ -45,6 +70,11 @@ export default { 'Choice chips', 'Filter chips', 'Input chips', + 'Chip Size', + 'Chip Variant', + 'Chip Color', + 'Chip Structure', + 'Chip Combination', ], }; }, diff --git a/packages/ketchup-showcase/src/views/components/basic/chip/examples/ChipColor.vue b/packages/ketchup-showcase/src/views/components/basic/chip/examples/ChipColor.vue new file mode 100644 index 0000000000..3f62e202cd --- /dev/null +++ b/packages/ketchup-showcase/src/views/components/basic/chip/examples/ChipColor.vue @@ -0,0 +1,53 @@ + + + diff --git a/packages/ketchup-showcase/src/views/components/basic/chip/examples/ChipCombination.vue b/packages/ketchup-showcase/src/views/components/basic/chip/examples/ChipCombination.vue new file mode 100644 index 0000000000..352699d17b --- /dev/null +++ b/packages/ketchup-showcase/src/views/components/basic/chip/examples/ChipCombination.vue @@ -0,0 +1,65 @@ + + + diff --git a/packages/ketchup-showcase/src/views/components/basic/chip/examples/ChipSize.vue b/packages/ketchup-showcase/src/views/components/basic/chip/examples/ChipSize.vue new file mode 100644 index 0000000000..61f6471f13 --- /dev/null +++ b/packages/ketchup-showcase/src/views/components/basic/chip/examples/ChipSize.vue @@ -0,0 +1,53 @@ + + + diff --git a/packages/ketchup-showcase/src/views/components/basic/chip/examples/ChipStructure.vue b/packages/ketchup-showcase/src/views/components/basic/chip/examples/ChipStructure.vue new file mode 100644 index 0000000000..0f3f6d3c4c --- /dev/null +++ b/packages/ketchup-showcase/src/views/components/basic/chip/examples/ChipStructure.vue @@ -0,0 +1,54 @@ + + + diff --git a/packages/ketchup-showcase/src/views/components/basic/chip/examples/ChipVariant.vue b/packages/ketchup-showcase/src/views/components/basic/chip/examples/ChipVariant.vue new file mode 100644 index 0000000000..007850196d --- /dev/null +++ b/packages/ketchup-showcase/src/views/components/basic/chip/examples/ChipVariant.vue @@ -0,0 +1,53 @@ + + + diff --git a/packages/ketchup-showcase/src/views/components/basic/iframe/examples/IframeDemo.vue b/packages/ketchup-showcase/src/views/components/basic/iframe/examples/IframeDemo.vue index 42ea8f3a42..a28ac8c47f 100644 --- a/packages/ketchup-showcase/src/views/components/basic/iframe/examples/IframeDemo.vue +++ b/packages/ketchup-showcase/src/views/components/basic/iframe/examples/IframeDemo.vue @@ -80,7 +80,8 @@ function createComp() { flat: true, }; comp.id = 'demo-component'; - comp.src = 'https://ketchup.smeup.com'; + comp.src = 'https://smeup.github.io/ketchup/'; + return comp; } diff --git a/packages/ketchup-showcase/src/views/components/basic/image/examples/ImageCss.vue b/packages/ketchup-showcase/src/views/components/basic/image/examples/ImageCss.vue index 8143ebd436..8ecd858842 100644 --- a/packages/ketchup-showcase/src/views/components/basic/image/examples/ImageCss.vue +++ b/packages/ketchup-showcase/src/views/components/basic/image/examples/ImageCss.vue @@ -33,7 +33,7 @@
+

+ The switch component can be used in its smaller version using the + sizing parameter. + medium is the default. Passing + small you'll get the smaller version +

+
+
+ + +
+

Sizing small

+ {{ markupDisabled }} +
+
+ + + + + + diff --git a/packages/ketchup-showcase/src/views/components/basic/textfield/Textfield.vue b/packages/ketchup-showcase/src/views/components/basic/textfield/Textfield.vue index 5c8d3a515c..948263c9f4 100644 --- a/packages/ketchup-showcase/src/views/components/basic/textfield/Textfield.vue +++ b/packages/ketchup-showcase/src/views/components/basic/textfield/Textfield.vue @@ -21,6 +21,15 @@ + + + @@ -32,6 +41,9 @@ import TextfieldLabels from '@/views/components/basic/textfield/examples/Textfie import TextfieldDisabled from '@/views/components/basic/textfield/examples/TextfieldDisabled'; import TextfieldTextareaVariant from '@/views/components/basic/textfield/examples/TextfieldTextareaVariant'; import TextfieldNumber from '@/views/components/basic/textfield/examples/TextfieldNumber'; +import TextfieldSizing from '@/views/components/basic/textfield/examples/TextfieldSizing'; +import TextfieldHelper from '@/views/components/basic/textfield/examples/TextfieldHelper'; +import TextfieldReadonly from '@/views/components/basic/textfield/examples/TextfieldReadonly'; import Comp from '@/views/templates/Comp'; export default { components: { @@ -42,6 +54,9 @@ export default { TextfieldDisabled, TextfieldTextareaVariant, TextfieldNumber, + TextfieldSizing, + TextfieldHelper, + TextfieldReadonly, Comp, }, data() { @@ -57,6 +72,9 @@ export default { 'Text area variant', 'Disabled', 'Number', + 'Sizing', + 'Helper', + 'Readonly', ], }; }, diff --git a/packages/ketchup-showcase/src/views/components/basic/textfield/examples/TextfieldHelper.vue b/packages/ketchup-showcase/src/views/components/basic/textfield/examples/TextfieldHelper.vue new file mode 100644 index 0000000000..a0d991b4fd --- /dev/null +++ b/packages/ketchup-showcase/src/views/components/basic/textfield/examples/TextfieldHelper.vue @@ -0,0 +1,63 @@ + + + diff --git a/packages/ketchup-showcase/src/views/components/basic/textfield/examples/TextfieldNumber.vue b/packages/ketchup-showcase/src/views/components/basic/textfield/examples/TextfieldNumber.vue index 5581eba3f6..a6892e06ef 100644 --- a/packages/ketchup-showcase/src/views/components/basic/textfield/examples/TextfieldNumber.vue +++ b/packages/ketchup-showcase/src/views/components/basic/textfield/examples/TextfieldNumber.vue @@ -51,6 +51,22 @@ separator sample markup

{{ markupGroupNumber }} + +

You can also have the possibility to get the 'Plus' and 'Minus' + button at the end of input number field by specifing the + 'quantity-buttons'.

+
+ +
+

Input number with plus and minus button

+ {{ plusAndMinus }} @@ -67,6 +83,8 @@ export default { '', markupGroupNumber: '', + plusAndMinus: + '', }; }, }; diff --git a/packages/ketchup-showcase/src/views/components/basic/textfield/examples/TextfieldReadonly.vue b/packages/ketchup-showcase/src/views/components/basic/textfield/examples/TextfieldReadonly.vue new file mode 100644 index 0000000000..5189bd6486 --- /dev/null +++ b/packages/ketchup-showcase/src/views/components/basic/textfield/examples/TextfieldReadonly.vue @@ -0,0 +1,50 @@ + + + + + diff --git a/packages/ketchup-showcase/src/views/components/basic/textfield/examples/TextfieldSizing.vue b/packages/ketchup-showcase/src/views/components/basic/textfield/examples/TextfieldSizing.vue new file mode 100644 index 0000000000..d60fa29898 --- /dev/null +++ b/packages/ketchup-showcase/src/views/components/basic/textfield/examples/TextfieldSizing.vue @@ -0,0 +1,50 @@ + + + diff --git a/packages/ketchup-showcase/src/views/framework/kup-debug/examples/KupDebugTester.vue b/packages/ketchup-showcase/src/views/framework/kup-debug/examples/KupDebugTester.vue index 016159966a..23415062ae 100644 --- a/packages/ketchup-showcase/src/views/framework/kup-debug/examples/KupDebugTester.vue +++ b/packages/ketchup-showcase/src/views/framework/kup-debug/examples/KupDebugTester.vue @@ -37,12 +37,12 @@ } #debug-section { - border-bottom: 2px solid var(--kup-border-color); + border-bottom: 2px solid var(--kup-border-subtle); padding-bottom: 1em; } #debug-wrapper { - border: 1px solid var(--kup-border-color); + border: 1px solid var(--kup-border-subtle); padding: 0.5em; } diff --git a/packages/ketchup-showcase/src/views/framework/kup-dynamic-position/examples/KupDynamicPositionFeatures.vue b/packages/ketchup-showcase/src/views/framework/kup-dynamic-position/examples/KupDynamicPositionFeatures.vue index 1ec052a4b2..3413361326 100644 --- a/packages/ketchup-showcase/src/views/framework/kup-dynamic-position/examples/KupDynamicPositionFeatures.vue +++ b/packages/ketchup-showcase/src/views/framework/kup-dynamic-position/examples/KupDynamicPositionFeatures.vue @@ -252,7 +252,7 @@ export default { -

Material Buttons (widget)

+ +

Material Buttons (widget)

empty: icon: @@ -56,29 +61,125 @@

Material Buttons (widget)

icon+tooltip: +
+ + +
- +

Size:

+ + + + + +

Neutral:

+ + + + + + + + +

Danger:

+ + + + + + + + +

Styling:

+ + + + + + + +

All variants:

- - - - Material Buttons (widget) label="With tooltip" icon="favorite" > - - + + - + show-spinner="true" + > + - + disabled + > + - - + + - + show-spinner="true" + > + - + disabled + > + +
+ + diff --git a/packages/ketchup/src/calendar.html b/packages/ketchup/src/calendar.html index 2d55ad9ccf..a1520246f8 100644 --- a/packages/ketchup/src/calendar.html +++ b/packages/ketchup/src/calendar.html @@ -32,9 +32,9 @@ } h1 { - background-color: var(--kup-primary-color); + background-color: var(--kup-text-primary); border-radius: 4px; - color: var(--kup-text-on-primary-color); + color: var(--kup-layer-1); line-height: 2em; margin-top: 0; text-align: center; diff --git a/packages/ketchup/src/card-performance.html b/packages/ketchup/src/card-performance.html index b4b2497e51..944510bc26 100644 --- a/packages/ketchup/src/card-performance.html +++ b/packages/ketchup/src/card-performance.html @@ -49,7 +49,7 @@ } #card-wrapper { - border: 1px solid var(--kup-border-color, black); + border: 1px solid var(--kup-border-subtle, black); } diff --git a/packages/ketchup/src/card.html b/packages/ketchup/src/card.html index 88de3622de..9cc95a3bd4 100644 --- a/packages/ketchup/src/card.html +++ b/packages/ketchup/src/card.html @@ -294,6 +294,20 @@

Scalable layouts

size-x="300px" size-y="300px" > + +

Dialog layouts

+
@@ -104,13 +109,11 @@

Stacked series

Combo chart

- +

Timeline chart

- - diff --git a/packages/ketchup/src/checkbox.html b/packages/ketchup/src/checkbox.html index 482a0b0202..fa4d3e88e1 100644 --- a/packages/ketchup/src/checkbox.html +++ b/packages/ketchup/src/checkbox.html @@ -36,10 +36,24 @@ +

The Checkbox

- - - - + + + + + + + + diff --git a/packages/ketchup/src/chip.html b/packages/ketchup/src/chip.html index 84d949c4f6..377aff8e86 100644 --- a/packages/ketchup/src/chip.html +++ b/packages/ketchup/src/chip.html @@ -33,31 +33,95 @@ font-size: var(--kup-font-size); padding: 1rem; } + + body{ + display: grid; + } - + +

Chip

+ + + +

Sizing

+
Default ( Medium )
+ + + +
Small
+ + + + + +

Styling

+
Default ( Neutral )
+ + +
+ + + + + +

Construction

+
Singular
+
Set construction
+ +

Type

+
Default ( Raised )
+ + + + + + + + + + + diff --git a/packages/ketchup/src/color-picker.html b/packages/ketchup/src/color-picker.html index b79217c2c0..8d6cb79f3c 100644 --- a/packages/ketchup/src/color-picker.html +++ b/packages/ketchup/src/color-picker.html @@ -20,6 +20,7 @@ +

Material Combobox (widget)

- isSelect=true
- isSelect=false Promise; + /** + * Sets the type of the button + * @default KupComponentSizing.MEDIUM + */ + "sizing": KupComponentSizing; /** * This method activates or deactivates an item * @param itemName - Name of the item. @@ -155,6 +162,11 @@ export namespace Components { "toggleItem": (itemName: string) => Promise; } interface KupAutocomplete { + /** + * Set alert message + * @default ''' + */ + "alert": string; /** * When true, the autocomplete fires the change event even when the value typed isn't included in the autocomplete list. * @default false @@ -181,6 +193,11 @@ export namespace Components { * @default ItemsDisplayMode.DESCRIPTION */ "displayMode": ItemsDisplayMode; + /** + * Set error message + * @default ''' + */ + "error": string; /** * Used to retrieve component's props values. * @param descriptions - When provided and true, the result will be the list of props with their description. @@ -192,6 +209,11 @@ export namespace Components { * @returns Value of the component. */ "getValue": () => Promise; + /** + * When set, the text-field will show this icon. + * @default null + */ + "icon": string; /** * Sets the initial value of the component. * @default "" @@ -202,11 +224,31 @@ export namespace Components { * @default 300 */ "inputDelay": number; + /** + * Enables a clear trailing icon. + * @default false + */ + "isClearable": boolean; + /** + * When set, its content will be shown as a label. + * @default null + */ + "label": string; + /** + * When set to true, the label will be on the left of the component. + * @default false + */ + "leadingLabel": boolean; /** * The minimum number of chars to trigger the autocomplete * @default 1 */ "minimumChars": number; + /** + * Sets the component to read only state, making it not editable, but interactable. Used in combobox component when it behaves as a select. + * @default false + */ + "readOnly": boolean; /** * This method is used to trigger a new render of the component. */ @@ -240,6 +282,16 @@ export namespace Components { * @default true */ "showDropDownIcon": boolean; + /** + * Sets the type of the button + * @default KupComponentSizing.MEDIUM + */ + "sizing": KupComponentSizing; + /** + * When set, the icon will be shown after the text. + * @default false + */ + "trailingIcon": boolean; } interface KupBadge { /** @@ -506,6 +558,11 @@ export namespace Components { * @default false */ "showSpinner": boolean; + /** + * Sets the type of the button + * @default KupComponentSizing.MEDIUM + */ + "sizing": KupComponentSizing; /** * Defines the style of the button. Styles available: "flat", "outlined" and "raised" which is also the default. * @default FButtonStyling.RAISED @@ -565,8 +622,8 @@ export namespace Components { */ "showSelection": boolean; /** - * Defines the style of the buttons. Available styles are "flat", "outlined" and "raised" (which is the default). - * @default FButtonStyling.RAISED + * Defines the style of the buttons. Available styles are "outlined" of "flat" (which is the default). + * @default FButtonStyling.FLAT */ "styling": FButtonStyling; } @@ -953,6 +1010,11 @@ export namespace Components { "version": string; } interface KupCheckbox { + /** + * Set alert message + * @default ''' + */ + "alert": string; /** * Defaults at false. When set to true, the component will be set to 'checked'. * @default false @@ -969,6 +1031,11 @@ export namespace Components { * @default false */ "disabled": boolean; + /** + * Set error message + * @default ''' + */ + "error": string; /** * Used to retrieve component's props values. * @param descriptions - When provided and true, the result will be the list of props with their description. @@ -1037,6 +1104,16 @@ export namespace Components { * @param props - Object containing props that will be set to the component. */ "setProps": (props: GenericObject) => Promise; + /** + * Sets the size of the chip + * @default FChipSize.MEDIUM + */ + "sizing": FChipSize; + /** + * Sets the style of the chip + * @default FChipStyling.RAISED + */ + "styling": FChipStyling; /** * The type of chip. Available types: input, filter, choice or empty for default. * @default FChipType.STANDARD @@ -1076,6 +1153,11 @@ export namespace Components { * @default "" */ "initialValue": string; + /** + * Sets the component to read only state, making it not editable, but interactable. + * @default false + */ + "readOnly": boolean; /** * This method is used to trigger a new render of the component. */ @@ -1101,6 +1183,11 @@ export namespace Components { "swatchOnly": boolean; } interface KupCombobox { + /** + * Set alert message + * @default ''' + */ + "alert": string; /** * Custom style of the component. * @default "" @@ -1119,6 +1206,11 @@ export namespace Components { * Sets how to show the selected item value. Suported values: "code", "description", "both". */ "displayMode": ItemsDisplayMode; + /** + * Set error message + * @default ''' + */ + "error": string; /** * Used to retrieve component's props values. * @param descriptions - When provided and true, the result will be the list of props with their description. @@ -1130,14 +1222,39 @@ export namespace Components { * @returns Value of the component. */ "getValue": () => Promise; + /** + * When set, the text-field will show this icon. + * @default null + */ + "icon": string; /** * Sets the initial value of the component */ "initialValue": string; + /** + * Enables a clear trailing icon. + * @default false + */ + "isClearable": boolean; /** * Lets the combobox behave as a select element. */ "isSelect": boolean; + /** + * When set, its content will be shown as a label. + * @default null + */ + "label": string; + /** + * When set to true, the label will be on the left of the component. + * @default false + */ + "leadingLabel": boolean; + /** + * Sets the component to read only state, making it not editable, but interactable. Used in combobox component when it behaves as a select. + * @default false + */ + "readOnly": boolean; /** * This method is used to trigger a new render of the component. */ @@ -1164,6 +1281,16 @@ export namespace Components { * When true shows the drop-down icon, for open list. */ "showDropDownIcon": boolean; + /** + * Sets the type of the button + * @default KupComponentSizing.MEDIUM + */ + "sizing": KupComponentSizing; + /** + * When set, the icon will be shown after the text. + * @default false + */ + "trailingIcon": boolean; } interface KupCustomTaskListHeader { "doubleView"?: boolean; @@ -2055,7 +2182,7 @@ export namespace Components { "hiddenSubmitButton": boolean; /** * Sets the label placement for 'all' fields in form - * @default KupFormLabelPlacement.LEFT + * @default KupFormLabelPlacement.TOP */ "labelPlacement": KupFormLabelPlacement; /** @@ -3308,6 +3435,16 @@ export namespace Components { * @returns List of props as object, each key will be a prop. */ "getProps": (descriptions?: boolean) => Promise; + /** + * Defaults at false. When set to true, the component is horizontal. + * @default false + */ + "horizontal": boolean; + /** + * When set, its content will be shown as a label. + * @default null + */ + "label": string; /** * Defaults at false. When set to true, the label will be on the left of the component. * @default false @@ -3384,6 +3521,11 @@ export namespace Components { * @returns List of props as object, each key will be a prop. */ "getProps": (descriptions?: boolean) => Promise; + /** + * Sets the textual content of the snackbar. + * @default '' + */ + "header": string; /** * Hides the snackbar. */ @@ -3517,6 +3659,11 @@ export namespace Components { * @param props - Object containing props that will be set to the component. */ "setProps": (props: GenericObject) => Promise; + /** + * Sets the size of the switch + * @default FSwitchSizing.MEDIUM + */ + "sizing": FSwitchSizing; } interface KupSwitcher { "timeUnitChange": KupPlannerSwitcherProps['onTimeUnitChange']; @@ -3533,6 +3680,11 @@ export namespace Components { * @default null */ "data": KupTabBarNode[]; + /** + * Defaults at false. When set to true, the component is dense. + * @default false + */ + "dense": boolean; /** * Used to retrieve component's props values. * @param descriptions - When provided and true, the result will be the list of props with their description. @@ -3623,6 +3775,11 @@ export namespace Components { "tasks": KupPlannerTask[]; } interface KupTextField { + /** + * Set alert message + * @default ''' + */ + "alert": string; /** * When true, could be input negative numbers (should be used when inputType is number). * @default null @@ -3649,6 +3806,11 @@ export namespace Components { * @default true */ "emitSubmitEventOnEnter": boolean; + /** + * Set error message + * @default ''' + */ + "error": string; /** * When set to true, the component will be rendered at full width. * @default false @@ -3754,6 +3916,16 @@ export namespace Components { * @default false */ "outlined": boolean; + /** + * Set the placeholder value. It's an example, not a label. + * @default false + */ + "placeholder": string; + /** + * When set, appear 2 buttons to increment and decrement the value. + * @default false + */ + "quantityButtons": boolean; /** * Sets the component to read only state, making it not editable, but interactable. Used in combobox component when it behaves as a select. * @default false @@ -3781,6 +3953,11 @@ export namespace Components { * @default null */ "size": number; + /** + * Sets the type of the button + * @default KupComponentSizing.MEDIUM + */ + "sizing": KupComponentSizing; /** * The HTML step of the input element. It has effect only with number input type. * @default null @@ -5164,6 +5341,8 @@ declare global { "kup-textfield-iconclick": KupTextFieldEventPayload; "kup-textfield-cleariconclick": KupEventPayload; "kup-textfield-submit": KupTextFieldEventPayload; + "kup-textfield-minusclick": KupTextFieldEventPayload; + "kup-textfield-plusclick": KupTextFieldEventPayload; } interface HTMLKupTextFieldElement extends Components.KupTextField, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLKupTextFieldElement, ev: KupTextFieldCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; @@ -5334,8 +5513,18 @@ declare namespace LocalJSX { * @default true */ "ripple"?: boolean; + /** + * Sets the type of the button + * @default KupComponentSizing.MEDIUM + */ + "sizing"?: KupComponentSizing; } interface KupAutocomplete { + /** + * Set alert message + * @default ''' + */ + "alert"?: string; /** * When true, the autocomplete fires the change event even when the value typed isn't included in the autocomplete list. * @default false @@ -5362,6 +5551,16 @@ declare namespace LocalJSX { * @default ItemsDisplayMode.DESCRIPTION */ "displayMode"?: ItemsDisplayMode; + /** + * Set error message + * @default ''' + */ + "error"?: string; + /** + * When set, the text-field will show this icon. + * @default null + */ + "icon"?: string; /** * Sets the initial value of the component. * @default "" @@ -5372,6 +5571,21 @@ declare namespace LocalJSX { * @default 300 */ "inputDelay"?: number; + /** + * Enables a clear trailing icon. + * @default false + */ + "isClearable"?: boolean; + /** + * When set, its content will be shown as a label. + * @default null + */ + "label"?: string; + /** + * When set to true, the label will be on the left of the component. + * @default false + */ + "leadingLabel"?: boolean; /** * The minimum number of chars to trigger the autocomplete * @default 1 @@ -5384,6 +5598,11 @@ declare namespace LocalJSX { "onKup-autocomplete-iconclick"?: (event: KupAutocompleteCustomEvent) => void; "onKup-autocomplete-input"?: (event: KupAutocompleteCustomEvent) => void; "onKup-autocomplete-itemclick"?: (event: KupAutocompleteCustomEvent) => void; + /** + * Sets the component to read only state, making it not editable, but interactable. Used in combobox component when it behaves as a select. + * @default false + */ + "readOnly"?: boolean; /** * Sets how to return the selected item value. Suported values: "code", "description", "both". * @default ItemsDisplayMode.CODE @@ -5399,6 +5618,16 @@ declare namespace LocalJSX { * @default true */ "showDropDownIcon"?: boolean; + /** + * Sets the type of the button + * @default KupComponentSizing.MEDIUM + */ + "sizing"?: KupComponentSizing; + /** + * When set, the icon will be shown after the text. + * @default false + */ + "trailingIcon"?: boolean; } interface KupBadge { /** @@ -5662,6 +5891,11 @@ declare namespace LocalJSX { * @default false */ "showSpinner"?: boolean; + /** + * Sets the type of the button + * @default KupComponentSizing.MEDIUM + */ + "sizing"?: KupComponentSizing; /** * Defines the style of the button. Styles available: "flat", "outlined" and "raised" which is also the default. * @default FButtonStyling.RAISED @@ -5707,8 +5941,8 @@ declare namespace LocalJSX { */ "showSelection"?: boolean; /** - * Defines the style of the buttons. Available styles are "flat", "outlined" and "raised" (which is the default). - * @default FButtonStyling.RAISED + * Defines the style of the buttons. Available styles are "outlined" of "flat" (which is the default). + * @default FButtonStyling.FLAT */ "styling"?: FButtonStyling; } @@ -6035,6 +6269,11 @@ declare namespace LocalJSX { "version"?: string; } interface KupCheckbox { + /** + * Set alert message + * @default ''' + */ + "alert"?: string; /** * Defaults at false. When set to true, the component will be set to 'checked'. * @default false @@ -6051,6 +6290,11 @@ declare namespace LocalJSX { * @default false */ "disabled"?: boolean; + /** + * Set error message + * @default ''' + */ + "error"?: string; /** * When set to true, the component will be set to 'indeterminate'. * @default false @@ -6121,6 +6365,16 @@ declare namespace LocalJSX { * Triggered when the removal icon on input chips is clicked. */ "onKup-chip-iconclick"?: (event: KupChipCustomEvent) => void; + /** + * Sets the size of the chip + * @default FChipSize.MEDIUM + */ + "sizing"?: FChipSize; + /** + * Sets the style of the chip + * @default FChipStyling.RAISED + */ + "styling"?: FChipStyling; /** * The type of chip. Available types: input, filter, choice or empty for default. * @default FChipType.STANDARD @@ -6150,6 +6404,11 @@ declare namespace LocalJSX { */ "initialValue"?: string; "onKup-colorpicker-change"?: (event: KupColorPickerCustomEvent) => void; + /** + * Sets the component to read only state, making it not editable, but interactable. + * @default false + */ + "readOnly"?: boolean; /** * When true, the component's text field will be replaced by a swatch. * @default false @@ -6157,6 +6416,11 @@ declare namespace LocalJSX { "swatchOnly"?: boolean; } interface KupCombobox { + /** + * Set alert message + * @default ''' + */ + "alert"?: string; /** * Custom style of the component. * @default "" @@ -6175,14 +6439,39 @@ declare namespace LocalJSX { * Sets how to show the selected item value. Suported values: "code", "description", "both". */ "displayMode"?: ItemsDisplayMode; + /** + * Set error message + * @default ''' + */ + "error"?: string; + /** + * When set, the text-field will show this icon. + * @default null + */ + "icon"?: string; /** * Sets the initial value of the component */ "initialValue"?: string; + /** + * Enables a clear trailing icon. + * @default false + */ + "isClearable"?: boolean; /** * Lets the combobox behave as a select element. */ "isSelect"?: boolean; + /** + * When set, its content will be shown as a label. + * @default null + */ + "label"?: string; + /** + * When set to true, the label will be on the left of the component. + * @default false + */ + "leadingLabel"?: boolean; "onKup-combobox-blur"?: (event: KupComboboxCustomEvent) => void; "onKup-combobox-change"?: (event: KupComboboxCustomEvent) => void; "onKup-combobox-click"?: (event: KupComboboxCustomEvent) => void; @@ -6190,6 +6479,11 @@ declare namespace LocalJSX { "onKup-combobox-iconclick"?: (event: KupComboboxCustomEvent) => void; "onKup-combobox-input"?: (event: KupComboboxCustomEvent) => void; "onKup-combobox-itemclick"?: (event: KupComboboxCustomEvent) => void; + /** + * Sets the component to read only state, making it not editable, but interactable. Used in combobox component when it behaves as a select. + * @default false + */ + "readOnly"?: boolean; /** * Sets how to return the selected item value. Suported values: "code", "description", "both". */ @@ -6198,6 +6492,16 @@ declare namespace LocalJSX { * When true shows the drop-down icon, for open list. */ "showDropDownIcon"?: boolean; + /** + * Sets the type of the button + * @default KupComponentSizing.MEDIUM + */ + "sizing"?: KupComponentSizing; + /** + * When set, the icon will be shown after the text. + * @default false + */ + "trailingIcon"?: boolean; } interface KupCustomTaskListHeader { "doubleView"?: boolean; @@ -6922,7 +7226,7 @@ declare namespace LocalJSX { "hiddenSubmitButton"?: boolean; /** * Sets the label placement for 'all' fields in form - * @default KupFormLabelPlacement.LEFT + * @default KupFormLabelPlacement.TOP */ "labelPlacement"?: KupFormLabelPlacement; /** @@ -7935,6 +8239,16 @@ declare namespace LocalJSX { * @default false */ "disabled"?: boolean; + /** + * Defaults at false. When set to true, the component is horizontal. + * @default false + */ + "horizontal"?: boolean; + /** + * When set, its content will be shown as a label. + * @default null + */ + "label"?: string; /** * Defaults at false. When set to true, the label will be on the left of the component. * @default false @@ -7994,6 +8308,11 @@ declare namespace LocalJSX { * @see https://smeup.github.io/ketchup/#/customization */ "customStyle"?: string; + /** + * Sets the textual content of the snackbar. + * @default '' + */ + "header"?: string; /** * Triggered when action button is clicked. */ @@ -8104,6 +8423,11 @@ declare namespace LocalJSX { * Triggered when the input element gets focused. */ "onKup-switch-focus"?: (event: KupSwitchCustomEvent) => void; + /** + * Sets the size of the switch + * @default FSwitchSizing.MEDIUM + */ + "sizing"?: FSwitchSizing; } interface KupSwitcher { "timeUnitChange"?: KupPlannerSwitcherProps['onTimeUnitChange']; @@ -8120,6 +8444,11 @@ declare namespace LocalJSX { * @default null */ "data"?: KupTabBarNode[]; + /** + * Defaults at false. When set to true, the component is dense. + * @default false + */ + "dense"?: boolean; /** * Triggered when the tab loses focus. */ @@ -8202,6 +8531,11 @@ declare namespace LocalJSX { "tasks"?: KupPlannerTask[]; } interface KupTextField { + /** + * Set alert message + * @default ''' + */ + "alert"?: string; /** * When true, could be input negative numbers (should be used when inputType is number). * @default null @@ -8228,6 +8562,11 @@ declare namespace LocalJSX { * @default true */ "emitSubmitEventOnEnter"?: boolean; + /** + * Set error message + * @default ''' + */ + "error"?: string; /** * When set to true, the component will be rendered at full width. * @default false @@ -8346,6 +8685,14 @@ declare namespace LocalJSX { * Triggered when the input element receives an input. */ "onKup-textfield-input"?: (event: KupTextFieldCustomEvent) => void; + /** + * Triggered when the - button of the number type component is pressed. + */ + "onKup-textfield-minusclick"?: (event: KupTextFieldCustomEvent) => void; + /** + * Triggered when the + button of the number type component is pressed. + */ + "onKup-textfield-plusclick"?: (event: KupTextFieldCustomEvent) => void; /** * Triggered when the Enter key is pressed. */ @@ -8355,6 +8702,16 @@ declare namespace LocalJSX { * @default false */ "outlined"?: boolean; + /** + * Set the placeholder value. It's an example, not a label. + * @default false + */ + "placeholder"?: string; + /** + * When set, appear 2 buttons to increment and decrement the value. + * @default false + */ + "quantityButtons"?: boolean; /** * Sets the component to read only state, making it not editable, but interactable. Used in combobox component when it behaves as a select. * @default false @@ -8365,6 +8722,11 @@ declare namespace LocalJSX { * @default null */ "size"?: number; + /** + * Sets the type of the button + * @default KupComponentSizing.MEDIUM + */ + "sizing"?: KupComponentSizing; /** * The HTML step of the input element. It has effect only with number input type. * @default null diff --git a/packages/ketchup/src/components/kup-accordion/kup-accordion.tsx b/packages/ketchup/src/components/kup-accordion/kup-accordion.tsx index f1c6b92544..81bf5c575e 100644 --- a/packages/ketchup/src/components/kup-accordion/kup-accordion.tsx +++ b/packages/ketchup/src/components/kup-accordion/kup-accordion.tsx @@ -13,7 +13,11 @@ import { Watch, } from '@stencil/core'; import { MDCRipple } from '@material/ripple'; -import type { GenericObject, KupComponent } from '../../types/GenericTypes'; +import { + GenericObject, + KupComponent, + KupComponentSizing, +} from '../../types/GenericTypes'; import { KupManager, kupManagerInstance, @@ -72,7 +76,12 @@ export class KupAccordion { * When enabled displays Material's ripple effect on item headers. * @default true */ - @Prop() ripple: boolean = true; + @Prop() ripple: boolean = false; + /** + * Sets the type of the button + * @default KupComponentSizing.MEDIUM + */ + @Prop() sizing: KupComponentSizing = KupComponentSizing.MEDIUM; /*-------------------------------------------------*/ /* I n t e r n a l V a r i a b l e s */ @@ -248,6 +257,7 @@ export class KupAccordion { 'accordion-item__header--expanded': isItemExpandible && isItemSelected ? true : false, 'mdc-ripple-surface': this.ripple ? true : false, + [`accordion-item--${this.sizing}`]: this.sizing ? true : false, }; const itemContentClass: GenericObject = { @@ -260,6 +270,7 @@ export class KupAccordion { items.push(
this.toggleItem(itemName)} diff --git a/packages/ketchup/src/components/kup-accordion/readme.md b/packages/ketchup/src/components/kup-accordion/readme.md index f6cd1f2d26..22dbd03de0 100644 --- a/packages/ketchup/src/components/kup-accordion/readme.md +++ b/packages/ketchup/src/components/kup-accordion/readme.md @@ -5,11 +5,12 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| ------------- | -------------- | --------------------------------------------------------------- | ------------------ | ------- | -| `customStyle` | `custom-style` | Custom style of the component. | `string` | `''` | -| `data` | -- | Data of the accordion. | `KupAccordionData` | `null` | -| `ripple` | `ripple` | When enabled displays Material's ripple effect on item headers. | `boolean` | `true` | +| Property | Attribute | Description | Type | Default | +| ------------- | -------------- | --------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- | --------------------------- | +| `customStyle` | `custom-style` | Custom style of the component. | `string` | `''` | +| `data` | -- | Data of the accordion. | `KupAccordionData` | `null` | +| `ripple` | `ripple` | When enabled displays Material's ripple effect on item headers. | `boolean` | `false` | +| `sizing` | `sizing` | Sets the type of the button | `KupComponentSizing.LARGE \| KupComponentSizing.MAX \| KupComponentSizing.MEDIUM \| KupComponentSizing.SMALL` | `KupComponentSizing.MEDIUM` | ## Events @@ -162,6 +163,7 @@ graph TD; kup-autocomplete --> kup-list kup-autocomplete --> kup-card kup-autocomplete --> kup-dialog + kup-autocomplete --> kup-badge kup-list --> kup-list kup-list --> kup-radio kup-list --> kup-card @@ -180,18 +182,23 @@ graph TD; kup-chip --> kup-badge kup-text-field --> kup-card kup-text-field --> kup-dialog + kup-text-field --> kup-badge kup-color-picker --> kup-card kup-color-picker --> kup-dialog + kup-color-picker --> kup-badge kup-combobox --> kup-list kup-combobox --> kup-card kup-combobox --> kup-dialog + kup-combobox --> kup-badge kup-date-picker --> kup-card kup-date-picker --> kup-dialog + kup-date-picker --> kup-badge kup-rating --> kup-card kup-rating --> kup-dialog kup-time-picker --> kup-card kup-time-picker --> kup-list kup-time-picker --> kup-dialog + kup-time-picker --> kup-badge kup-image --> kup-card kup-image --> kup-image kup-image --> kup-dialog @@ -218,6 +225,7 @@ graph TD; kup-button --> kup-badge kup-checkbox --> kup-card kup-checkbox --> kup-dialog + kup-checkbox --> kup-badge kup-data-table --> kup-card kup-data-table --> kup-list kup-data-table --> kup-switch diff --git a/packages/ketchup/src/components/kup-accordion/styles/kup-accordion-classes.scss b/packages/ketchup/src/components/kup-accordion/styles/kup-accordion-classes.scss index 0d01d15c02..f44060a589 100644 --- a/packages/ketchup/src/components/kup-accordion/styles/kup-accordion-classes.scss +++ b/packages/ketchup/src/components/kup-accordion/styles/kup-accordion-classes.scss @@ -15,14 +15,14 @@ } :host(.#{$kup-class-danger}) { - --kup-accordion-primary-color: var(--kup-danger-color); - --kup-accordion-primary-color-rgb: var(--kup-danger-color-rgb); + --kup-accordion-primary-color: var(--kup-danger-color-60); + --kup-accordion-primary-color-rgb: var(--kup-danger-color-60-rgb); --kup-accordion-text-on-primary-color: white; } :host(.#{$kup-class-info}) { - --kup-accordion-primary-color: var(--kup-info-color); - --kup-accordion-primary-color-rgb: var(--kup-info-color-rgb); + --kup-accordion-primary-color: var(--kup-info-50-color); + --kup-accordion-primary-color-rgb: var(--kup-info-color-50-rgb); --kup-accordion-text-on-primary-color: white; } @@ -33,13 +33,13 @@ } :host(.#{$kup-class-success}) { - --kup-accordion-primary-color: var(--kup-success-color); - --kup-accordion-primary-color-rgb: var(--kup-success-color-rgb); + --kup-accordion-primary-color: var(--kup-success-color-40); + --kup-accordion-primary-color-rgb: var(--kup-success-color-40-rgb); --kup-accordion-text-on-primary-color: white; } :host(.#{$kup-class-warning}) { - --kup-accordion-primary-color: var(--kup-warning-color); - --kup-accordion-primary-color-rgb: var(--kup-warning-color-rgb); + --kup-accordion-primary-color: var(--kup-warning-40-color); + --kup-accordion-primary-color-rgb: var(--kup-warning-color-40-rgb); --kup-accordion-text-on-primary-color: white; } diff --git a/packages/ketchup/src/components/kup-accordion/styles/kup-accordion-main.scss b/packages/ketchup/src/components/kup-accordion/styles/kup-accordion-main.scss index daa50b7446..95578a3b93 100644 --- a/packages/ketchup/src/components/kup-accordion/styles/kup-accordion-main.scss +++ b/packages/ketchup/src/components/kup-accordion/styles/kup-accordion-main.scss @@ -16,51 +16,41 @@ */ :host { - --kup_accordion_background_color: var( - --kup-accordion-background-color, - var(--kup-background-color) + --kup_accordion_border_top_color: var( + --kup-accordion-border-top-color, + var(--kup-border-subtle) ); - --kup_accordion_border: var( - --kup-accordion-border, - 1px solid var(--kup-border-color) + --kup_accordion_item_small_height: var( + --kup-accordion-item-small-height, + 32px ); - --kup_accordion_border_radius: var(--kup-accordion-border-radius, 4px); - --kup-accordion_dropdown_icon_color: var( - --kup-accordion-dropdown-icon-color, - var(--kup-icon-color) + --kup_accordion_item_medium_height: var( + --kup-accordion-item-medium-height, + 40px ); - --kup_accordion_font_family: var( - --kup-accordion-font-family, - var(--kup-font-family) + --kup_accordion_item_outline_color_active: var( + --kup-accordion-item-outline-color-focus, + var(--kup-border-interactive) ); - --kup_accordion_font_size: var( - --kup-accordion-font-size, - var(--kup-font-size) + --kup_accordion_item_large_height: var( + --kup-accordion-item-medium-height, + 48px ); - --kup_accordion_hover_background_color: var( - --kup-accordion-hover-background-color, - var(--kup-hover-background-color) + --kup_accordion_header_background_color: var( + --kup-accordion-header-background-color, + var(--kup-layer-0) ); - --kup_accordion_hover_color: var( - --kup-accordion-hover-color, - var(--kup-hover-color) + --kup_accordion_header_background_color_hover: var( + --kup-accordion-header-background-color-hover, + var(--kup-layer-0-hover) ); - --kup_accordion_padding: var(--kup-accordion-padding, 1em 1.5em); - --kup_accordion_primary_color: var( - --kup-accordion-primary-color, - var(--kup-primary-color) + --kup_accordion_header_padding: var( + --kup-accordion-header-padding, + var(--kup-space-05) ); - --kup_accordion_primary_color_rgb: var( - --kup-accordion-primary-color-rgb, - var(--kup-primary-color-rgb) - ); - --kup_accordion_text_color: var( - --kup-accordion-text-color, - var(--kup-text-color) - ); - --kup_accordion_text_on_primary_color: var( - --kup-accordion-text-on-primary-color, - var(--kup-text-on-primary-color) + --kup_accordion_dropdown_icon_color: var( + --kup-accordio-dropdown-icon-color, + var(--kup-text-primary) ); --kup_accordion_transition: var(--kup-accordion-transition, 80ms); @@ -70,10 +60,7 @@ } .accordion { - background-color: var(--kup_accordion_background_color); - border-bottom: var(--kup_accordion_border); border-radius: var(--kup_accordion_border_radius); - border-top: var(--kup_accordion_border); display: flex; flex-wrap: wrap; flex-direction: column; @@ -81,8 +68,7 @@ } .accordion-item { - border-left: var(--kup_accordion_border); - border-right: var(--kup_accordion_border); + border-top: 1px solid var(--kup_accordion_border_top_color); box-sizing: border-box; width: 100%; @@ -90,11 +76,12 @@ display: block; } - &:not(:first-of-type) { - border-top: var(--kup_accordion_border); + &:is(:last-of-type) { + border-bottom: 1px solid var(--kup_accordion_border_top_color); } &__header { + height: var(--kup_accordion_item_medium_height); align-items: center; border: none; box-sizing: border-box; @@ -108,24 +95,36 @@ transition: background-color var(--kup_accordion_transition), color var(--kup_accordion_transition); width: 100%; + outline: 2px solid transparent; + outline-offset: -2px; + padding-left: 16px; + padding-right: 16px; + + &:focus { + outline: 2px solid var(--kup_accordion_item_outline_color_active); + } + + &.accordion-item--small { + height: var(--kup_accordion_item_small_height); + } + &.accordion-item--large { + height: var(--kup_accordion_item_large_height); + } &:hover:not(.accordion-item__header--selected) { - color: var(--kup_accordion_hover_color); - background-color: var(--kup_accordion_hover_background_color); + background-color: var(--kup_accordion_header_background_color_hover); + } + &:focus(.accordion-item__header--selected) { + outline: 2px solid var(--kup_accordion_item_outline_color_active); } &--expanded { - color: var(--kup_accordion_hover_color); - background-color: var(--kup_accordion_hover_background_color); + background-color: var(--kup_accordion_background_color); .accordion-item__dropdown { transform: rotate(-180deg); } } - - &--selected { - background-color: rgba(var(--kup_accordion_primary_color_rgb), 0.175); - } } &__text { @@ -146,7 +145,7 @@ } &__dropdown { - background-color: var(--kup-accordion_dropdown_icon_color); + background-color: var(--kup_accordion_dropdown_icon_color); height: 1.5em; margin-left: auto; margin-right: 0; @@ -156,8 +155,13 @@ } &__content { + padding-left: 16px; + padding-top: 8px; + padding-bottom: 24px; + padding-right: 80px; animation: fade-in 0.25s ease-out; display: none; + @include kup-body-compact-01; &--selected { display: block; diff --git a/packages/ketchup/src/components/kup-autocomplete/kup-autocomplete.tsx b/packages/ketchup/src/components/kup-autocomplete/kup-autocomplete.tsx index 69a9c72a38..121bc42886 100644 --- a/packages/ketchup/src/components/kup-autocomplete/kup-autocomplete.tsx +++ b/packages/ketchup/src/components/kup-autocomplete/kup-autocomplete.tsx @@ -17,7 +17,11 @@ import { } from '../../managers/kup-manager/kup-manager'; import { FTextField } from '../../f-components/f-text-field/f-text-field'; import { FTextFieldMDC } from '../../f-components/f-text-field/f-text-field-mdc'; -import { GenericObject, KupComponent } from '../../types/GenericTypes'; +import { + GenericObject, + KupComponent, + KupComponentSizing, +} from '../../types/GenericTypes'; import { KupAutocompleteEventPayload, KupAutocompleteIconClickEventPayload, @@ -34,6 +38,7 @@ import { getProps, setProps } from '../../utils/utils'; import { componentWrapperId } from '../../variables/GenericVariables'; import { KupManagerClickCb } from '../../managers/kup-manager/kup-manager-declarations'; import { KupDynamicPositionPlacement } from '../../managers/kup-dynamic-position/kup-dynamic-position-declarations'; +import { FTextFieldProps } from '../../f-components/f-text-field/f-text-field-declarations'; @Component({ tag: 'kup-autocomplete', @@ -57,6 +62,11 @@ export class KupAutocomplete { /* P r o p s */ /*-------------------------------------------------*/ + /** + * Set alert message + * @default ''' + */ + @Prop() alert: string = ''; /** * When true, the autocomplete fires the change event even when the value typed isn't included in the autocomplete list. * @default false @@ -83,21 +93,52 @@ export class KupAutocomplete { * @default ItemsDisplayMode.DESCRIPTION */ @Prop() displayMode: ItemsDisplayMode = ItemsDisplayMode.DESCRIPTION; + /** + * Set error message + * @default ''' + */ + @Prop() error: string = ''; + /** + * When set, the text-field will show this icon. + * @default null + */ + @Prop() icon: string = null; /** * Sets the initial value of the component. * @default "" */ @Prop() initialValue: string = ''; + /** + * Enables a clear trailing icon. + * @default false + */ + @Prop() isClearable: boolean = false; /** * Input event emission delay in milliseconds. * @default 300 */ @Prop() inputDelay: number = 300; + /** + * When set, its content will be shown as a label. + * @default null + */ + @Prop() label: string = null; + /** + * When set to true, the label will be on the left of the component. + * @default false + */ + @Prop() leadingLabel: boolean = false; + /** * The minimum number of chars to trigger the autocomplete * @default 1 */ @Prop() minimumChars: number = 1; + /** + * Sets the component to read only state, making it not editable, but interactable. Used in combobox component when it behaves as a select. + * @default false + */ + @Prop() readOnly: boolean = false; /** * Sets how to return the selected item value. Suported values: "code", "description", "both". * @default ItemsDisplayMode.CODE @@ -113,6 +154,16 @@ export class KupAutocomplete { * @default true */ @Prop() showDropDownIcon: boolean = true; + /** + * Sets the type of the button + * @default KupComponentSizing.MEDIUM + */ + @Prop() sizing: KupComponentSizing = KupComponentSizing.MEDIUM; + /** + * When set, the icon will be shown after the text. + * @default false + */ + @Prop() trailingIcon: boolean = false; /*-------------------------------------------------*/ /* I n t e r n a l V a r i a b l e s */ @@ -393,6 +444,9 @@ export class KupAutocomplete { this.#closeList(); return false; } + const hasError = this.error.trim().length > 0; + const hasAlert = this.alert.trim().length > 0; + const topOffset = hasError || hasAlert ? -20 : 0; this.#textfieldWrapper.classList.add('toggled'); this.#listEl.menuVisible = true; const elStyle = this.#listEl.style; @@ -407,7 +461,7 @@ export class KupAutocomplete { this.#kupManager.dynamicPosition.register( this.#listEl, this.#textfieldWrapper, - 0, + topOffset, KupDynamicPositionPlacement.AUTO, true ); @@ -520,6 +574,30 @@ export class KupAutocomplete { } render() { + const props: FTextFieldProps = { + alert: this.alert, + danger: this.rootElement.classList.contains('kup-danger') + ? true + : false, + disabled: this.disabled, + error: this.error, + icon: this.icon, + info: this.rootElement.classList.contains('kup-info') + ? true + : false, + isClearable: this.isClearable, + label: this.label, + leadingLabel: this.leadingLabel, + readOnly: this.readOnly, + sizing: this.sizing, + success: this.rootElement.classList.contains('kup-success') + ? true + : false, + value: this.value, + warning: this.rootElement.classList.contains('kup-warning') + ? true + : false, + }; const fullHeight = this.rootElement.classList.contains('kup-full-height'); const fullWidth = this.rootElement.classList.contains('kup-full-width'); @@ -538,6 +616,7 @@ export class KupAutocomplete {
` - [kup-list](../kup-list) - [kup-card](../kup-card) - [kup-dialog](../kup-dialog) +- [kup-badge](../kup-badge) ### Graph ```mermaid @@ -139,6 +149,7 @@ graph TD; kup-autocomplete --> kup-list kup-autocomplete --> kup-card kup-autocomplete --> kup-dialog + kup-autocomplete --> kup-badge kup-list --> kup-list kup-list --> kup-radio kup-list --> kup-card @@ -158,18 +169,23 @@ graph TD; kup-badge --> kup-dialog kup-text-field --> kup-card kup-text-field --> kup-dialog + kup-text-field --> kup-badge kup-color-picker --> kup-card kup-color-picker --> kup-dialog + kup-color-picker --> kup-badge kup-combobox --> kup-list kup-combobox --> kup-card kup-combobox --> kup-dialog + kup-combobox --> kup-badge kup-date-picker --> kup-card kup-date-picker --> kup-dialog + kup-date-picker --> kup-badge kup-rating --> kup-card kup-rating --> kup-dialog kup-time-picker --> kup-card kup-time-picker --> kup-list kup-time-picker --> kup-dialog + kup-time-picker --> kup-badge kup-image --> kup-card kup-image --> kup-image kup-image --> kup-dialog @@ -196,6 +212,7 @@ graph TD; kup-button --> kup-badge kup-checkbox --> kup-card kup-checkbox --> kup-dialog + kup-checkbox --> kup-badge kup-data-table --> kup-autocomplete kup-switch --> kup-card kup-switch --> kup-dialog diff --git a/packages/ketchup/src/components/kup-badge/readme.md b/packages/ketchup/src/components/kup-badge/readme.md index 03026c4805..5834f9b682 100644 --- a/packages/ketchup/src/components/kup-badge/readme.md +++ b/packages/ketchup/src/components/kup-badge/readme.md @@ -69,7 +69,10 @@ Type: `Promise` | Name | Description | | ----------------------------------- | ---------------------------------------- | +| `--kup-badge-border-color` | Sets border color of the badge. | | `--kup-badge-border-radius` | Sets border radius of the badge. | +| `--kup-badge-border-style` | Sets border style of the badge. | +| `--kup-badge-border-width` | Sets border width of the badge. | | `--kup-badge-font-family` | Sets font family of the badge. | | `--kup-badge-font-size` | Sets font size of the badge. | | `--kup-badge-min-size` | Sets minimum size of the badge. | @@ -83,6 +86,7 @@ Type: `Promise` ### Used by - [kup-accordion](../kup-accordion) + - [kup-autocomplete](../kup-autocomplete) - [kup-badge](.) - [kup-box](../kup-box) - [kup-button](../kup-button) @@ -90,9 +94,13 @@ Type: `Promise` - [kup-calendar](../kup-calendar) - [kup-card](../kup-card) - [kup-cell](../kup-cell) + - [kup-checkbox](../kup-checkbox) - [kup-chip](../kup-chip) + - [kup-color-picker](../kup-color-picker) + - [kup-combobox](../kup-combobox) - [kup-dashboard](../kup-dashboard) - [kup-data-table](../kup-data-table) + - [kup-date-picker](../kup-date-picker) - [kup-dialog](../kup-dialog) - [kup-dropdown-button](../kup-dropdown-button) - [kup-family-tree](../kup-family-tree) @@ -102,8 +110,12 @@ Type: `Promise` - [kup-input-panel](../kup-input-panel) - [kup-list](../kup-list) - [kup-magic-box](../kup-magic-box) + - [kup-numeric-picker](../kup-numeric-picker) + - [kup-planner](../kup-planner) - [kup-snackbar](../kup-snackbar) - [kup-tab-bar](../kup-tab-bar) + - [kup-text-field](../kup-text-field) + - [kup-time-picker](../kup-time-picker) - [kup-tree](../kup-tree) ### Depends on @@ -117,28 +129,19 @@ Type: `Promise` graph TD; kup-badge --> kup-badge kup-card --> kup-badge - kup-autocomplete --> kup-list - kup-autocomplete --> kup-card - kup-autocomplete --> kup-dialog + kup-autocomplete --> kup-badge kup-list --> kup-badge kup-radio --> kup-card kup-radio --> kup-dialog kup-dialog --> kup-badge kup-chip --> kup-badge - kup-text-field --> kup-card - kup-text-field --> kup-dialog - kup-color-picker --> kup-card - kup-color-picker --> kup-dialog - kup-combobox --> kup-list - kup-combobox --> kup-card - kup-combobox --> kup-dialog - kup-date-picker --> kup-card - kup-date-picker --> kup-dialog + kup-text-field --> kup-badge + kup-color-picker --> kup-badge + kup-combobox --> kup-badge + kup-date-picker --> kup-badge kup-rating --> kup-card kup-rating --> kup-dialog - kup-time-picker --> kup-card - kup-time-picker --> kup-list - kup-time-picker --> kup-dialog + kup-time-picker --> kup-badge kup-image --> kup-badge kup-spinner --> kup-card kup-spinner --> kup-dialog @@ -151,8 +154,7 @@ graph TD; kup-progress-bar --> kup-card kup-progress-bar --> kup-dialog kup-button --> kup-badge - kup-checkbox --> kup-card - kup-checkbox --> kup-dialog + kup-checkbox --> kup-badge kup-data-table --> kup-badge kup-switch --> kup-card kup-switch --> kup-dialog @@ -168,6 +170,8 @@ graph TD; kup-image-list --> kup-badge kup-input-panel --> kup-badge kup-magic-box --> kup-badge + kup-numeric-picker --> kup-badge + kup-planner --> kup-badge kup-snackbar --> kup-badge style kup-badge fill:#f9f,stroke:#333,stroke-width:4px ``` diff --git a/packages/ketchup/src/components/kup-badge/styles/kup-badge-main.scss b/packages/ketchup/src/components/kup-badge/styles/kup-badge-main.scss index aff7c60884..dbca363c80 100644 --- a/packages/ketchup/src/components/kup-badge/styles/kup-badge-main.scss +++ b/packages/ketchup/src/components/kup-badge/styles/kup-badge-main.scss @@ -1,4 +1,7 @@ /** +* @prop --kup-badge-border-width: Sets border width of the badge. +* @prop --kup-badge-border-style: Sets border style of the badge. +* @prop --kup-badge-border-color: Sets border color of the badge. * @prop --kup-badge-border-radius: Sets border radius of the badge. * @prop --kup-badge-font-family: Sets font family of the badge. * @prop --kup-badge-font-size: Sets font size of the badge. @@ -9,11 +12,14 @@ */ :host { + --kup_badge_border_width: var(--kup-badge-border-width, 1px); + --kup_badge_border_style: var(--kup-badge-border-style, solid); + --kup_badge_border_color: var(--kup-badge-border-color, transparent); --kup_badge_border_radius: var(--kup-badge-border-radius, 30px); --kup_badge_font_family: var(--kup-badge-font-family, var(--kup-font-family)); --kup_badge_font_size: var(--kup-badge-font-size, var(--kup-font-size)); --kup_badge_min_size: var(--kup-badge-min-size, 1.5em); - --kup_badge_padding: var(--kup-badge-padding, 0.25em); + --kup_badge_padding: var(--kup-badge-padding, 0.45em); --kup_badge_primary_color: var( --kup-badge-primary-color, var(--kup-primary-color) @@ -34,13 +40,19 @@ #kup-component { background-color: var(--kup_badge_primary_color); + border-width: var(--kup_badge_border_width); + border-style: var(--kup_badge_border_style); + border-color: var(--kup_badge_border_color); border-radius: var(--kup_badge_border_radius); color: var(--kup_badge_text_on_primary_color); - font-size: 0.875em; + font-size: 0.625em; min-height: var(--kup_badge_min_size); min-width: var(--kup_badge_min_size); - padding: var(--kup_badge_padding); + padding: var(--kup_badge_padding) calc(var(--kup_badge_padding)); text-align: center; + display: flex; + justify-content: center; + align-items: center; .f-image { display: block; diff --git a/packages/ketchup/src/components/kup-box/readme.md b/packages/ketchup/src/components/kup-box/readme.md index d8927bf82c..39c81bfb82 100644 --- a/packages/ketchup/src/components/kup-box/readme.md +++ b/packages/ketchup/src/components/kup-box/readme.md @@ -206,6 +206,7 @@ graph TD; kup-autocomplete --> kup-list kup-autocomplete --> kup-card kup-autocomplete --> kup-dialog + kup-autocomplete --> kup-badge kup-list --> kup-list kup-list --> kup-radio kup-list --> kup-card @@ -224,18 +225,23 @@ graph TD; kup-chip --> kup-badge kup-text-field --> kup-card kup-text-field --> kup-dialog + kup-text-field --> kup-badge kup-color-picker --> kup-card kup-color-picker --> kup-dialog + kup-color-picker --> kup-badge kup-combobox --> kup-list kup-combobox --> kup-card kup-combobox --> kup-dialog + kup-combobox --> kup-badge kup-date-picker --> kup-card kup-date-picker --> kup-dialog + kup-date-picker --> kup-badge kup-rating --> kup-card kup-rating --> kup-dialog kup-time-picker --> kup-card kup-time-picker --> kup-list kup-time-picker --> kup-dialog + kup-time-picker --> kup-badge kup-image --> kup-card kup-image --> kup-image kup-image --> kup-dialog @@ -262,6 +268,7 @@ graph TD; kup-button --> kup-badge kup-checkbox --> kup-card kup-checkbox --> kup-dialog + kup-checkbox --> kup-badge kup-data-table --> kup-card kup-data-table --> kup-list kup-data-table --> kup-switch diff --git a/packages/ketchup/src/components/kup-box/styles/kup-box-classes.scss b/packages/ketchup/src/components/kup-box/styles/kup-box-classes.scss index 1fdee3dd5a..c7097f057a 100644 --- a/packages/ketchup/src/components/kup-box/styles/kup-box-classes.scss +++ b/packages/ketchup/src/components/kup-box/styles/kup-box-classes.scss @@ -65,11 +65,11 @@ } } -:host(:not(.#{$kup-class-borderless})) { - .box { - border: 1px solid var(--kup-border-color); - } -} +// :host(:not(.#{$kup-class-borderless})) { +// .box { +// border: 1px solid var(--kup-border-subtle); +// } +// } :host(.#{$kup-class-flat-on-hover}) { #box-container .box-wrapper .box:hover { @@ -98,8 +98,6 @@ :host(:not(.#{$kup-class-paddingless})) { #box-container { .box { - padding: 3px; - .box-section { .box-object { padding: 1px 4px; diff --git a/packages/ketchup/src/components/kup-box/styles/kup-box-main.scss b/packages/ketchup/src/components/kup-box/styles/kup-box-main.scss index 70f6d8fc40..761ddc6b15 100644 --- a/packages/ketchup/src/components/kup-box/styles/kup-box-main.scss +++ b/packages/ketchup/src/components/kup-box/styles/kup-box-main.scss @@ -10,43 +10,37 @@ */ :host { - --kup_box_background_color: var( - --kup-box-background-color, - var(--kup-background-color) + --kup_box_background_color: var(--kup-box-background-color, var(--kup-layer-1)); + --kup_box_background_color_hover: var( + --kup-box-background-color-hover, + var(--kup-layer-1-hover) ); - --kup_box_color: var(--kup-box-color, var(--kup-text-color)); - --kup_box_font_family: var(--kup-box-font-family, var(--kup-font-family)); - --kup_box_font_size: var(--kup-box-font-size, var(--kup-font-size)); - --kup_box_grid_gap: var(--kup-box-grid-gap, 1em); - --kup_box_hover_box_shadow: var( - --kup-box-hover-box-shadow, - 0px 0px 7.5px 0px rgba(128, 128, 128, 0.5) - ); - --kup_box_primary_color_rgb: var( - --kup-box-primary-color-rgb, - var(--kup-primary-color-rgb) + --kup_box_background_color_selected: var( + --kup-box-background-color-selected, + var(--kup-layer-1-selected) ); + --kup_box_text_color: var(--kup-box-text-color, var(--kup-text-secondary)); + --kup_box_grid_gap: var(--kup-box-grid-gap, var(--kup-space-03)); --kup_box_transition: var(--kup-box-transition, 0.25s); - + --kup_box_border_color_drag:var(--kup-box-border-color-drag, var(--kup-border-interactive)) display: block; - font-family: var(--kup_box_font_family); - font-size: var(--kup_box_font_size); + + --kup_box_padding: var(--kup-box-padding, var(--kup-space-05)); } .box-component { - background: var(--kup_box_background_color); transition: border var(--kup_box_transition) ease; &[#{$kup-dd-drag-over}] { position: relative; - border: 3px dashed var(--kup-border-color); + border: 3px dashed var(--kup_box_border_color_drag); } } #box-container { display: grid; grid-gap: var(--kup_box_grid_gap); - color: var(--kup_box_color); + color: var(--kup_box_text_color); overflow: auto; &.is-kanban { @@ -70,10 +64,13 @@ align-items: center; .box { + background-color: var(--kup_box_background_color); + border-radius: var(--kup-radius-00); flex-grow: 1; cursor: pointer; position: relative; display: flex; + padding: var(--kup_box_padding); transition: background-color var(--kup_box_transition) ease, box-shadow var(--kup_box_transition) ease, border var(--kup_box_transition) ease; @@ -88,11 +85,11 @@ } &:hover { - box-shadow: var(--kup_box_hover_box_shadow); + background-color: var(--kup_box_background_color_hover); } &.selected { - background-color: rgba(var(--kup_box_primary_color_rgb), 0.175); + background-color: var(--kup_box_background_color_selected); & .box-section.titled > h3 { background-color: transparent; @@ -104,7 +101,7 @@ } &[#{$kup-dd-drag-over}] { - border: 3px dashed var(--kup-border-color); + border: 3px dashed var(--kup_box_border_color_drag); position: relative; z-index: 2; } @@ -140,8 +137,8 @@ // collapsible sections &.collapse-section { .header { - border-top: 1px solid var(--kup-border-color); - color: rgba(var(--kup-text-color-rgb), 0.75); + border-top: 1px solid var(--kup-border-subtle); + color: rgba(var(--kup-text-secondary-rgb), 0.75); display: flex; justify-content: space-around; width: 100%; @@ -180,7 +177,7 @@ } &.titled { - border: 1px solid var(--kup-border-color); + border: 1px solid var(--kup-border-subtle); padding-top: 5px; position: relative; margin: 10px; @@ -222,7 +219,7 @@ .row-action-menu { background: var(--kup-background-color); - border: 1px solid var(--kup-border-color); + border: 1px solid var(--kup-border-subtle); box-shadow: 0px 0px 7.5px 0px rgba(128, 128, 128, 0.5); position: absolute; top: 0; @@ -244,7 +241,7 @@ line-height: 30px; &:not(:last-child) { - border-bottom: 1px solid var(--kup-border-color); + border-bottom: 1px solid var(--kup-border-subtle); } } } diff --git a/packages/ketchup/src/components/kup-button-list/kup-button-list-declarations.ts b/packages/ketchup/src/components/kup-button-list/kup-button-list-declarations.ts index 73ab60a44e..bcdd465ce9 100644 --- a/packages/ketchup/src/components/kup-button-list/kup-button-list-declarations.ts +++ b/packages/ketchup/src/components/kup-button-list/kup-button-list-declarations.ts @@ -1,6 +1,10 @@ import { KupDataNode } from '../../managers/kup-data/kup-data-declarations'; import { KupObj } from '../../managers/kup-objects/kup-objects-declarations'; -import { GenericObject, KupEventPayload } from '../../types/GenericTypes'; +import { + GenericObject, + KupComponentSizing, + KupEventPayload, +} from '../../types/GenericTypes'; /** * Props of the kup-button-list component. diff --git a/packages/ketchup/src/components/kup-button-list/kup-button-list.tsx b/packages/ketchup/src/components/kup-button-list/kup-button-list.tsx index 54c213e00f..ea322adfc9 100644 --- a/packages/ketchup/src/components/kup-button-list/kup-button-list.tsx +++ b/packages/ketchup/src/components/kup-button-list/kup-button-list.tsx @@ -86,10 +86,10 @@ export class KupButtonList { */ @Prop() showSelection: boolean = true; /** - * Defines the style of the buttons. Available styles are "flat", "outlined" and "raised" (which is the default). - * @default FButtonStyling.RAISED + * Defines the style of the buttons. Available styles are "outlined" of "flat" (which is the default). + * @default FButtonStyling.FLAT */ - @Prop({ reflect: true }) styling: FButtonStyling = FButtonStyling.RAISED; + @Prop({ reflect: true }) styling: FButtonStyling = FButtonStyling.FLAT; /*-------------------------------------------------*/ /* I n t e r n a l V a r i a b l e s */ @@ -214,6 +214,7 @@ export class KupButtonList { ); return null; } + const props: FButtonProps = { checked: data.checked, disabled: data.disabled, @@ -225,14 +226,18 @@ export class KupButtonList { id: data.id, label: data.label, large: data.large, + neutral: this.rootElement.classList.contains('kup-neutral') + ? true + : false, shaped: data.shaped, - styling: data.styling, + styling: index === Number(this.selected) ? 'raised' : data.styling, toggable: data.toggable, trailingIcon: data.trailingIcon, title: data.title, wrapperClass: this.rootElement.className + ' ' + data.wrapperClass, onClick: () => this.onKupClick(data.id, '-1'), }; + return ; } @@ -263,6 +268,8 @@ export class KupButtonList { showIcons: true, }, }; + data.styling = + index === Number(this.selected) ? 'raised' : data.styling; return ( button.icon); + if (haveIcons) { + const allButtonsHaveIconsOrDropdown: boolean = this.data.every( + (button) => button.icon || button.data.dropdownOnly + ); + if (!allButtonsHaveIconsOrDropdown) { + this.kupManager.debug.logMessage( + this, + 'Not all buttons have icons, please add icons to all buttons or remove them from all buttons.', + KupDebugCategory.WARNING + ); + return null; + } + } + const columns: VNode[] = []; for (let i = 0; i < this.data.length; i++) { const node: KupButtonListNode = this.data[i]; diff --git a/packages/ketchup/src/components/kup-button-list/readme.md b/packages/ketchup/src/components/kup-button-list/readme.md index 8c0ce60ae7..f15838cf1c 100644 --- a/packages/ketchup/src/components/kup-button-list/readme.md +++ b/packages/ketchup/src/components/kup-button-list/readme.md @@ -1,22 +1,18 @@ - - # ketchup-btn - - ## Properties -| Property | Attribute | Description | Type | Default | -| --------------- | ---------------- | -------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------- | ----------------------- | -| `columns` | `columns` | Number of columns. | `number` | `0` | -| `customStyle` | `custom-style` | Custom style of the component. | `string` | `''` | -| `data` | -- | Props of the sub-components. | `KupButtonListNode[]` | `[]` | -| `disabled` | `disabled` | When set to true, the sub-components are disabled. | `boolean` | `false` | -| `showSelection` | `show-selection` | When set to true, highlights the selected button with the secondary color of KupTheme. | `boolean` | `true` | -| `styling` | `styling` | Defines the style of the buttons. Available styles are "flat", "outlined" and "raised" (which is the default). | `FButtonStyling.FLAT \| FButtonStyling.FLOATING \| FButtonStyling.ICON \| FButtonStyling.OUTLINED \| FButtonStyling.RAISED` | `FButtonStyling.RAISED` | +| Property | Attribute | Description | Type | Default | +| --------------- | ---------------- | --------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------- | --------------------- | +| `columns` | `columns` | Number of columns. | `number` | `0` | +| `customStyle` | `custom-style` | Custom style of the component. | `string` | `''` | +| `data` | -- | Props of the sub-components. | `KupButtonListNode[]` | `[]` | +| `disabled` | `disabled` | When set to true, the sub-components are disabled. | `boolean` | `false` | +| `showSelection` | `show-selection` | When set to true, highlights the selected button with the secondary color of KupTheme. | `boolean` | `true` | +| `styling` | `styling` | Defines the style of the buttons. Available styles are "outlined" of "flat" (which is the default). | `FButtonStyling.FLAT \| FButtonStyling.FLOATING \| FButtonStyling.ICON \| FButtonStyling.OUTLINED \| FButtonStyling.RAISED` | `FButtonStyling.FLAT` | ## Events @@ -127,6 +123,7 @@ graph TD; kup-autocomplete --> kup-list kup-autocomplete --> kup-card kup-autocomplete --> kup-dialog + kup-autocomplete --> kup-badge kup-dialog --> kup-badge kup-dialog --> kup-card kup-dialog --> kup-dialog @@ -138,18 +135,23 @@ graph TD; kup-chip --> kup-badge kup-text-field --> kup-card kup-text-field --> kup-dialog + kup-text-field --> kup-badge kup-color-picker --> kup-card kup-color-picker --> kup-dialog + kup-color-picker --> kup-badge kup-combobox --> kup-list kup-combobox --> kup-card kup-combobox --> kup-dialog + kup-combobox --> kup-badge kup-date-picker --> kup-card kup-date-picker --> kup-dialog + kup-date-picker --> kup-badge kup-rating --> kup-card kup-rating --> kup-dialog kup-time-picker --> kup-card kup-time-picker --> kup-list kup-time-picker --> kup-dialog + kup-time-picker --> kup-badge kup-image --> kup-card kup-image --> kup-image kup-image --> kup-dialog @@ -168,6 +170,7 @@ graph TD; kup-button --> kup-badge kup-checkbox --> kup-card kup-checkbox --> kup-dialog + kup-checkbox --> kup-badge kup-data-table --> kup-button-list kup-switch --> kup-card kup-switch --> kup-dialog diff --git a/packages/ketchup/src/components/kup-button-list/styles/kup-button-list-main.scss b/packages/ketchup/src/components/kup-button-list/styles/kup-button-list-main.scss index 82ed6f3fc9..9fc5f1a1dc 100644 --- a/packages/ketchup/src/components/kup-button-list/styles/kup-button-list-main.scss +++ b/packages/ketchup/src/components/kup-button-list/styles/kup-button-list-main.scss @@ -9,7 +9,7 @@ */ :host { - --kup_buttonlist_grid_gap: var(--kup-buttonlist-grid-gap, 1em); + --kup_buttonlist_grid_gap: var(--kup-buttonlist-grid-gap, 2px); --kup_buttonlist_selected_primary_color: var( --kup-buttonlist-selected-primary-color, var(--kup-secondary-color) @@ -43,25 +43,4 @@ grid-gap: var(--kup_buttonlist_grid_gap); grid-template-columns: var(--kup_buttonlist_grid_columns); width: max-content; - - &.show-selection { - .selected { - --kup-button-primary-color: var(--kup_buttonlist_selected_primary_color); - --kup-button-primary-color-rgb: var( - --kup_buttonlist_selected_primary_color_rgb - ); - --kup-button-primary-color-h: var( - --kup_buttonlist_selected_primary_color_h - ); - --kup-button-primary-color-s: var( - --kup_buttonlist_selected_primary_color_s - ); - --kup-button-primary-color-l: var( - --kup_buttonlist_selected_primary_color_l - ); - --kup-button-text-on-primary-color: var( - --kup_buttonlist_selected_text_on_primary_color - ); - } - } } diff --git a/packages/ketchup/src/components/kup-button/kup-button.tsx b/packages/ketchup/src/components/kup-button/kup-button.tsx index 8a2e9cd413..700c59efff 100644 --- a/packages/ketchup/src/components/kup-button/kup-button.tsx +++ b/packages/ketchup/src/components/kup-button/kup-button.tsx @@ -10,7 +10,11 @@ import { Prop, State, } from '@stencil/core'; -import type { GenericObject, KupComponent } from '../../types/GenericTypes'; +import { + KupComponentSizing, + type GenericObject, + type KupComponent, +} from '../../types/GenericTypes'; import { KupManager, kupManagerInstance, @@ -114,6 +118,11 @@ export class KupButton { * @default false */ @Prop() trailingIcon: boolean = false; + /** + * Sets the type of the button + * @default KupComponentSizing.MEDIUM + */ + @Prop() sizing: KupComponentSizing = KupComponentSizing.MEDIUM; /*-------------------------------------------------*/ /* I n t e r n a l V a r i a b l e s */ @@ -277,6 +286,9 @@ export class KupButton { large: this.rootElement.classList.contains('kup-large') ? true : false, + neutral: this.rootElement.classList.contains('kup-neutral') + ? true + : false, pulsating: this.rootElement.classList.contains('kup-pulsating') ? true : false, @@ -292,6 +304,7 @@ export class KupButton { success: this.rootElement.classList.contains('kup-success') ? true : false, + sizing: this.sizing, styling: this.styling, showSpinner: this.showSpinner, title: this.rootElement.title, diff --git a/packages/ketchup/src/components/kup-button/readme.md b/packages/ketchup/src/components/kup-button/readme.md index 2809b63dde..887d69b0a0 100644 --- a/packages/ketchup/src/components/kup-button/readme.md +++ b/packages/ketchup/src/components/kup-button/readme.md @@ -5,20 +5,21 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| ----------------- | ------------------ | --------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------- | ----------------------- | -| `buttonType` | `button-type` | Sets the type of the button. | `string` | `null` | -| `checked` | `checked` | When set to true, the icon button state will be on. | `boolean` | `false` | -| `customStyle` | `custom-style` | Custom style of the component. | `string` | `''` | -| `disabled` | `disabled` | Defaults at false. When set to true, the component is disabled. | `boolean` | `false` | -| `icon` | `icon` | When set, the button will show this icon. | `string` | `null` | -| `iconOff` | `icon-off` | When set, the icon button off state will show this icon. Otherwise, an outlined version of the icon prop will be displayed. | `string` | `null` | -| `label` | `label` | When set, the button will show this text. | `string` | `null` | -| `placeholderIcon` | `placeholder-icon` | When set, the button will show this icon, if icon/image not found. | `string` | `null` | -| `showSpinner` | `show-spinner` | When set to true, the button show a spinner received in slot. | `boolean` | `false` | -| `styling` | `styling` | Defines the style of the button. Styles available: "flat", "outlined" and "raised" which is also the default. | `FButtonStyling.FLAT \| FButtonStyling.FLOATING \| FButtonStyling.ICON \| FButtonStyling.OUTLINED \| FButtonStyling.RAISED` | `FButtonStyling.RAISED` | -| `toggable` | `toggable` | When set to true, the icon button will be toggable on/off. | `boolean` | `false` | -| `trailingIcon` | `trailing-icon` | When set, the icon will be shown after the text. | `boolean` | `false` | +| Property | Attribute | Description | Type | Default | +| ----------------- | ------------------ | --------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------- | --------------------------- | +| `buttonType` | `button-type` | Sets the type of the button. | `string` | `null` | +| `checked` | `checked` | When set to true, the icon button state will be on. | `boolean` | `false` | +| `customStyle` | `custom-style` | Custom style of the component. | `string` | `''` | +| `disabled` | `disabled` | Defaults at false. When set to true, the component is disabled. | `boolean` | `false` | +| `icon` | `icon` | When set, the button will show this icon. | `string` | `null` | +| `iconOff` | `icon-off` | When set, the icon button off state will show this icon. Otherwise, an outlined version of the icon prop will be displayed. | `string` | `null` | +| `label` | `label` | When set, the button will show this text. | `string` | `null` | +| `placeholderIcon` | `placeholder-icon` | When set, the button will show this icon, if icon/image not found. | `string` | `null` | +| `showSpinner` | `show-spinner` | When set to true, the button show a spinner received in slot. | `boolean` | `false` | +| `sizing` | `sizing` | Sets the type of the button | `KupComponentSizing.LARGE \| KupComponentSizing.MAX \| KupComponentSizing.MEDIUM \| KupComponentSizing.SMALL` | `KupComponentSizing.MEDIUM` | +| `styling` | `styling` | Defines the style of the button. Styles available: "flat", "outlined" and "raised" which is also the default. | `FButtonStyling.FLAT \| FButtonStyling.FLOATING \| FButtonStyling.ICON \| FButtonStyling.OUTLINED \| FButtonStyling.RAISED` | `FButtonStyling.RAISED` | +| `toggable` | `toggable` | When set to true, the icon button will be toggable on/off. | `boolean` | `false` | +| `trailingIcon` | `trailing-icon` | When set, the icon will be shown after the text. | `boolean` | `false` | ## Events @@ -120,6 +121,7 @@ graph TD; kup-autocomplete --> kup-list kup-autocomplete --> kup-card kup-autocomplete --> kup-dialog + kup-autocomplete --> kup-badge kup-list --> kup-list kup-list --> kup-radio kup-list --> kup-card @@ -138,18 +140,23 @@ graph TD; kup-chip --> kup-badge kup-text-field --> kup-card kup-text-field --> kup-dialog + kup-text-field --> kup-badge kup-color-picker --> kup-card kup-color-picker --> kup-dialog + kup-color-picker --> kup-badge kup-combobox --> kup-list kup-combobox --> kup-card kup-combobox --> kup-dialog + kup-combobox --> kup-badge kup-date-picker --> kup-card kup-date-picker --> kup-dialog + kup-date-picker --> kup-badge kup-rating --> kup-card kup-rating --> kup-dialog kup-time-picker --> kup-card kup-time-picker --> kup-list kup-time-picker --> kup-dialog + kup-time-picker --> kup-badge kup-image --> kup-card kup-image --> kup-image kup-image --> kup-dialog @@ -173,6 +180,7 @@ graph TD; kup-progress-bar --> kup-dialog kup-checkbox --> kup-card kup-checkbox --> kup-dialog + kup-checkbox --> kup-badge kup-data-table --> kup-button kup-switch --> kup-card kup-switch --> kup-dialog diff --git a/packages/ketchup/src/components/kup-calendar/kup-calendar.scss b/packages/ketchup/src/components/kup-calendar/kup-calendar.scss index ec01481e91..2ad90434e8 100644 --- a/packages/ketchup/src/components/kup-calendar/kup-calendar.scss +++ b/packages/ketchup/src/components/kup-calendar/kup-calendar.scss @@ -18,15 +18,15 @@ :host { --kup_calendar_background_color: var( --kup-calendar-background-color, - var(--kup-background-color) + var(--kup-layer-1) ); --kup_calendar_border_color: var( --kup-calendar-border-color, - var(--kup-border-color) + var(--kup-border-subtle) ); --kup_calendar_event_background_color: var( --kup-calendar-event-background-color, - var(--kup-primary-color) + var(--kup-gray-color-30) ); --kup_calendar_event_border_radius: var( --kup-calendar-event-border-radius, @@ -34,7 +34,7 @@ ); --kup_calendar_event_color: var( --kup-calendar-event-color, - var(--kup-text-on-primary-color) + var(--kup-text-secondary) ); --kup_calendar_font_family: var( --kup-calendar-font-family, @@ -43,27 +43,31 @@ --kup_calendar_font_size: var(--kup-calendar-font-size, var(--kup-font-size)); --kup_calendar_header_background_color: var( --kup-calendar-header-background-color, - var(--kup-title-background-color) + var(--kup-layer-2) ); --kup_calendar_header_color: var( --kup-calendar-header-color, - var(--kup-title-color) + var(--kup-text-secondary) ); --kup_calendar_navigator_border: var( --kup-calendar-navigator-border, - 2px solid var(--kup-border-color) + 1px solid var(--kup-border-subtle) ); --kup_calendar_no_work_day_background_color: var( --kup-calendar-no-work-day-background-color, - rgba(var(--kup-disabled-background-color-rgb), 0.5) + var(--kup-layer-0) ); --kup_calendar_no_work_day_color: var( --kup-calendar-no-work-day-color, - var(--kup-disabled-color) + var(--kup-text-secondary) ); --kup_calendar_today_background_color: var( --kup-calendar-today-background-color, - rgba(var(--kup-primary-color-rgb), 0.125) + var(--kup-layer-2) + ); + --kup_calendar_border_top_color: var( + --kup-calendar-border-top-color, + var(--kup-border-interactive) ); --fc-border-color: var(--kup_calendar_border_color); @@ -77,27 +81,23 @@ .navigation { align-items: center; - border-left: var(--kup_calendar_navigator_border); - border-right: var(--kup_calendar_navigator_border); - border-top: var(--kup_calendar_navigator_border); - border-top-left-radius: 8px; - border-top-right-radius: 8px; display: flex; justify-content: space-between; + background-color: var(--kup_calendar_background_color); &__left { --kup-font-size: 0.875em; display: flex; + margin-left: var(--kup-space-03); } &__right { display: flex; + margin-right: var(--kup-space-03); } &__title { - font-size: 1.25em; - font-weight: 400; - letter-spacing: 0.1892857em; + @include kup-heading-02; margin: 0px; padding: 0px 0.5em; @@ -167,6 +167,12 @@ border-color: var(--kup_calendar_border_color); } + // .fc-theme-standard td, + // .fc-theme-standard th, + // .fc-theme-standard .fc-list { + // border: 1px solid var(--kup_calendar_border_color); + // } + .fc-col-header-cell { background: var(--kup_calendar_header_background_color); color: var(--kup_calendar_header_color); @@ -184,6 +190,7 @@ .fc-list-day-cushion { background: var(--kup_calendar_header_background_color); color: var(--kup_calendar_header_color); + @include kup-heading-01; } .fc-list-event:hover td { @@ -194,7 +201,6 @@ .fc-daygrid-event, .fc-timegrid-event { background: var(--kup_calendar_event_background_color); - border-radius: var(--kup_calendar_event_border_radius); border: none; border-color: var(--kup_calendar_event_background_color); color: var(--kup_calendar_event_color); @@ -208,14 +214,20 @@ padding: 0.25em; } + .fc-event-time { + white-space: pre; + } + td.fc-day-today { background-color: var(--kup_calendar_today_background_color); + border-top: 2px solid var(--kup_calendar_border_top_color); } td.fc-day-sun, td.fc-day-sat { background-color: var(--kup_calendar_no_work_day_background_color); color: var(--kup_calendar_no_work_day_color); + opacity: 0.7; } } @@ -238,3 +250,12 @@ font-size: 16px; } } + +@media (min-width: 599px) { + #kup-component { + .fc-daygrid-event { + align-items: baseline; + white-space: pre-line; + } + } +} diff --git a/packages/ketchup/src/components/kup-calendar/readme.md b/packages/ketchup/src/components/kup-calendar/readme.md index 5cce392fc3..d440e58afd 100644 --- a/packages/ketchup/src/components/kup-calendar/readme.md +++ b/packages/ketchup/src/components/kup-calendar/readme.md @@ -1,7 +1,5 @@ # kup-calendar - - @@ -144,6 +142,7 @@ graph TD; kup-autocomplete --> kup-list kup-autocomplete --> kup-card kup-autocomplete --> kup-dialog + kup-autocomplete --> kup-badge kup-list --> kup-list kup-list --> kup-radio kup-list --> kup-card @@ -162,18 +161,23 @@ graph TD; kup-chip --> kup-badge kup-text-field --> kup-card kup-text-field --> kup-dialog + kup-text-field --> kup-badge kup-color-picker --> kup-card kup-color-picker --> kup-dialog + kup-color-picker --> kup-badge kup-combobox --> kup-list kup-combobox --> kup-card kup-combobox --> kup-dialog + kup-combobox --> kup-badge kup-date-picker --> kup-card kup-date-picker --> kup-dialog + kup-date-picker --> kup-badge kup-rating --> kup-card kup-rating --> kup-dialog kup-time-picker --> kup-card kup-time-picker --> kup-list kup-time-picker --> kup-dialog + kup-time-picker --> kup-badge kup-image --> kup-card kup-image --> kup-image kup-image --> kup-dialog @@ -200,6 +204,7 @@ graph TD; kup-button --> kup-badge kup-checkbox --> kup-card kup-checkbox --> kup-dialog + kup-checkbox --> kup-badge kup-data-table --> kup-card kup-data-table --> kup-list kup-data-table --> kup-switch diff --git a/packages/ketchup/src/components/kup-card-list/readme.md b/packages/ketchup/src/components/kup-card-list/readme.md index 4ea7f3de15..e9dca806d6 100644 --- a/packages/ketchup/src/components/kup-card-list/readme.md +++ b/packages/ketchup/src/components/kup-card-list/readme.md @@ -129,6 +129,7 @@ graph TD; kup-autocomplete --> kup-list kup-autocomplete --> kup-card kup-autocomplete --> kup-dialog + kup-autocomplete --> kup-badge kup-list --> kup-list kup-list --> kup-radio kup-list --> kup-card @@ -147,18 +148,23 @@ graph TD; kup-chip --> kup-badge kup-text-field --> kup-card kup-text-field --> kup-dialog + kup-text-field --> kup-badge kup-color-picker --> kup-card kup-color-picker --> kup-dialog + kup-color-picker --> kup-badge kup-combobox --> kup-list kup-combobox --> kup-card kup-combobox --> kup-dialog + kup-combobox --> kup-badge kup-date-picker --> kup-card kup-date-picker --> kup-dialog + kup-date-picker --> kup-badge kup-rating --> kup-card kup-rating --> kup-dialog kup-time-picker --> kup-card kup-time-picker --> kup-list kup-time-picker --> kup-dialog + kup-time-picker --> kup-badge kup-image --> kup-card kup-image --> kup-image kup-image --> kup-dialog @@ -185,6 +191,7 @@ graph TD; kup-button --> kup-badge kup-checkbox --> kup-card kup-checkbox --> kup-dialog + kup-checkbox --> kup-badge kup-data-table --> kup-card kup-data-table --> kup-list kup-data-table --> kup-switch diff --git a/packages/ketchup/src/components/kup-card/box/kup-card-box-1.scss b/packages/ketchup/src/components/kup-card/box/kup-card-box-1.scss index 746c7cf89d..2ba75222c9 100644 --- a/packages/ketchup/src/components/kup-card/box/kup-card-box-1.scss +++ b/packages/ketchup/src/components/kup-card/box/kup-card-box-1.scss @@ -1,8 +1,7 @@ .box-layout-1 { - background-color: var(--kup-background-color); - color: var(--kup-text-color); - font-size: var(--kup-font-size); - padding: 0.5em; + background-color: var(--kup-layer-1); + color: var(--kup-text-secondary); + @include kup-body-compact-01; table { width: 100%; @@ -18,5 +17,6 @@ .value { font-weight: bold; padding: 0.5em; + @include kup-heading-compact-01; } } diff --git a/packages/ketchup/src/components/kup-card/box/kup-card-box-2.scss b/packages/ketchup/src/components/kup-card/box/kup-card-box-2.scss index c2e5e5640b..26e70bc111 100644 --- a/packages/ketchup/src/components/kup-card/box/kup-card-box-2.scss +++ b/packages/ketchup/src/components/kup-card/box/kup-card-box-2.scss @@ -1,23 +1,24 @@ .box-layout-2 { - background-color: var(--kup-background-color); - color: var(--kup-text-color); - font-size: var(--kup-font-size); - padding: 0.5em; + background-color: var(--kup-layer-1); + color: var(--kup-text-secondary); + @include kup-body-compact-01; table { width: 100%; + display: grid; + gap: var(--kup-space-05); + tr { + display: flex; + justify-content: space-between; + } } .label { max-width: 50%; - overflow: hidden; - padding: 0.5em; - text-overflow: ellipsis; - white-space: nowrap; } .value { - padding: 0.5em; font-weight: bold; + @include kup-heading-compact-01; } } diff --git a/packages/ketchup/src/components/kup-card/box/kup-card-box-3.scss b/packages/ketchup/src/components/kup-card/box/kup-card-box-3.scss index 5d762d9548..28529dd245 100644 --- a/packages/ketchup/src/components/kup-card/box/kup-card-box-3.scss +++ b/packages/ketchup/src/components/kup-card/box/kup-card-box-3.scss @@ -1,8 +1,7 @@ .box-layout-3 { - background-color: var(--kup-background-color); - color: var(--kup-text-color); - font-size: var(--kup-font-size); - padding: 0.5em; + background-color: var(--kup-layer-1); + color: var(--kup-text-secondary); + @include kup-body-compact-01; .container { display: flex; @@ -35,7 +34,7 @@ .value { padding: 0.5em; - font-weight: bold; + @include kup-heading-compact-01; } .f-cell .f-cell__text { diff --git a/packages/ketchup/src/components/kup-card/box/kup-card-box-4.scss b/packages/ketchup/src/components/kup-card/box/kup-card-box-4.scss index 52dc86c8da..71558c6252 100644 --- a/packages/ketchup/src/components/kup-card/box/kup-card-box-4.scss +++ b/packages/ketchup/src/components/kup-card/box/kup-card-box-4.scss @@ -1,10 +1,9 @@ .box-layout-4 { - background-color: var(--kup-background-color); - color: var(--kup-text-color); display: flex; - font-size: var(--kup-font-size); height: 100%; - padding: 0.5em; + background-color: var(--kup-layer-1); + color: var(--kup-text-secondary); + @include kup-body-compact-01; .container { margin: auto; @@ -19,8 +18,8 @@ } .value { - font-weight: bold; padding-top: 0.5em; + @include kup-heading-compact-01; } .f-cell.c-centered .f-cell__content img, diff --git a/packages/ketchup/src/components/kup-card/box/kup-card-box-5.scss b/packages/ketchup/src/components/kup-card/box/kup-card-box-5.scss index b9730cedb8..c5e4784d8d 100644 --- a/packages/ketchup/src/components/kup-card/box/kup-card-box-5.scss +++ b/packages/ketchup/src/components/kup-card/box/kup-card-box-5.scss @@ -1,10 +1,9 @@ .box-layout-5 { - background-color: var(--kup-background-color); - color: var(--kup-text-color); display: flex; - font-size: var(--kup-font-size); height: 100%; - padding: 1em 0.5em; + background-color: var(--kup-layer-1); + color: var(--kup-text-secondary); + @include kup-body-compact-01; .container { display: flex; @@ -33,7 +32,7 @@ } .value { - font-weight: bold; + @include kup-heading-compact-01; } .table { diff --git a/packages/ketchup/src/components/kup-card/box/kup-card-box-6.scss b/packages/ketchup/src/components/kup-card/box/kup-card-box-6.scss index ec92f2a74a..dad6c66327 100644 --- a/packages/ketchup/src/components/kup-card/box/kup-card-box-6.scss +++ b/packages/ketchup/src/components/kup-card/box/kup-card-box-6.scss @@ -1,10 +1,9 @@ .box-layout-6 { - background-color: var(--kup-background-color); - color: var(--kup-text-color); display: flex; - font-size: var(--kup-font-size); height: 100%; - padding: 1em 0.5em; + background-color: var(--kup-layer-1); + color: var(--kup-text-secondary); + @include kup-body-compact-01; .container { display: flex; @@ -25,7 +24,7 @@ } .value { - font-weight: bold; + @include kup-heading-compact-01; padding-bottom: 1.25em; } diff --git a/packages/ketchup/src/components/kup-card/box/kup-card-box-7.scss b/packages/ketchup/src/components/kup-card/box/kup-card-box-7.scss index e3a82dbe37..214ef580ba 100644 --- a/packages/ketchup/src/components/kup-card/box/kup-card-box-7.scss +++ b/packages/ketchup/src/components/kup-card/box/kup-card-box-7.scss @@ -1,10 +1,9 @@ .box-layout-7 { - background-color: var(--kup-background-color); - color: var(--kup-text-color); display: flex; - font-size: var(--kup-font-size); height: 100%; - padding: 1em 0.5em; + background-color: var(--kup-layer-1); + color: var(--kup-text-secondary); + @include kup-body-compact-01; .container { height: 100%; @@ -28,7 +27,7 @@ } .value { - font-weight: bold; + @include kup-heading-compact-01; } .table { diff --git a/packages/ketchup/src/components/kup-card/box/kup-card-box-8.scss b/packages/ketchup/src/components/kup-card/box/kup-card-box-8.scss index 908983da4c..e694127fcc 100644 --- a/packages/ketchup/src/components/kup-card/box/kup-card-box-8.scss +++ b/packages/ketchup/src/components/kup-card/box/kup-card-box-8.scss @@ -1,10 +1,9 @@ .box-layout-8 { - background-color: var(--kup-background-color); - color: var(--kup-text-color); display: flex; - font-size: var(--kup-font-size); height: 100%; - padding: 1em 0.5em; + background-color: var(--kup-layer-1); + color: var(--kup-text-secondary); + @include kup-body-compact-01; .container { height: 100%; @@ -24,8 +23,7 @@ } .value { - font-weight: bold; - padding-bottom: 1.25em; + @include kup-heading-compact-01; } tr:last-child { @@ -36,7 +34,7 @@ .table { box-sizing: border-box; - padding: 1.25em; + padding-top: var(--kup-space-05); padding-bottom: 0; } diff --git a/packages/ketchup/src/components/kup-card/built-in/kup-card-built-in-1.scss b/packages/ketchup/src/components/kup-card/built-in/kup-card-built-in-1.scss index 9a5978720d..d59bac926a 100644 --- a/packages/ketchup/src/components/kup-card/built-in/kup-card-built-in-1.scss +++ b/packages/ketchup/src/components/kup-card/built-in/kup-card-built-in-1.scss @@ -1,6 +1,23 @@ .built-in-layout-1 { - background-color: var(--kup-background-color); - border-radius: 4px; + --kup_card_text_color: var(--kup-card-text-color, var(--kup-text-primary)); + --kup_card_background_color: var( + --kup-card-background-color, + var(--kup-layer-1) + ); + --kup_card_selected_color: var( + --kup-card-selected-color, + var(--kup-primary-color-60) + ); + --kup_card_selected_color_hover: var( + --kup-card-selected-color-hover, + var(--kup-layer-1-hover) + ); + --kup_card_box_shadow: var( + --kup-box-shadow, + 0px 3px 6px 0 rgba(0, 0, 0, 0.3) + ); + background-color: var(--kup_card_background_color); + border-radius: var(--kup-radius-00); box-sizing: border-box; box-shadow: 0 2px 1px -1px rgba(128, 128, 128, 0.1), 0 1px 1px 0 rgba(128, 128, 128, 0.1), 0 1px 3px 0 rgba(128, 128, 128, 0.6); @@ -32,22 +49,27 @@ width: 100%; } - .prev-page { - margin-left: auto; - } - .change-view-button { margin: auto; width: 12em; text-align: center; + button { + color: var(-kup_card_text_color); + + span { + @include kup-heading-compact-01; + color: var(-kup_card_text_color); + } + } } #change-view-button button { text-transform: capitalize; } - .next-page { - margin-right: auto; + .next-page .icon-button .f-image .f-image__icon, + .prev-page .icon-button .f-image .f-image__icon { + background-color: var(--kup_card_text_color) !important; } .calendar { @@ -55,35 +77,41 @@ width: 100%; } - thead { - border-bottom: 1px solid var(--kup-border-color); + tbody:before { + content: '@'; + display: block; + line-height: var(--kup-space-05); + text-indent: -99999px; } .item-text { - color: rgba(var(--kup-text-color-rgb), 0.5); + color: var(--kup_card_text_color); + @include kup-body-compact-01; } .item { text-align: center; &:not(.selected) .item-number:hover { - background-color: var(--kup-hover-background-color); + background-color: var(--kup_card_selected_color_hover); } &.selected .item-number, &.selected .item-number:hover { - background-color: rgba(var(--kup-primary-color-rgb), 0.175); + background-color: var(--kup_card_selected_color); + color: var(--kup-gray-color-0); } } .item-number { - border-radius: 50%; cursor: pointer; display: flex; justify-content: center; - line-height: 2.5em; margin: auto; width: 2.5em; transition: background-color 0.25s; text-transform: capitalize; + @include kup-body-compact-01; + line-height: 2.5em; + color: var(--kup_card_text_color); } } diff --git a/packages/ketchup/src/components/kup-card/built-in/kup-card-built-in-2.scss b/packages/ketchup/src/components/kup-card/built-in/kup-card-built-in-2.scss index a2a8291e77..91cb35ad8b 100644 --- a/packages/ketchup/src/components/kup-card/built-in/kup-card-built-in-2.scss +++ b/packages/ketchup/src/components/kup-card/built-in/kup-card-built-in-2.scss @@ -1,6 +1,5 @@ .built-in-layout-2 { background-color: var(--kup-background-color); - border-radius: 4px; box-sizing: border-box; box-shadow: 0 2px 1px -1px rgba(128, 128, 128, 0.1), 0 1px 1px 0 rgba(128, 128, 128, 0.1), 0 1px 3px 0 rgba(128, 128, 128, 0.6); diff --git a/packages/ketchup/src/components/kup-card/built-in/kup-card-built-in-3.scss b/packages/ketchup/src/components/kup-card/built-in/kup-card-built-in-3.scss index 04286a7711..dac1e5bfef 100644 --- a/packages/ketchup/src/components/kup-card/built-in/kup-card-built-in-3.scss +++ b/packages/ketchup/src/components/kup-card/built-in/kup-card-built-in-3.scss @@ -16,7 +16,7 @@ } .sub-chip { - border-top: 1px solid var(--kup-border-color); + border-top: 1px solid var(--kup-border-subtle); max-height: 33vh; overflow: auto; width: 100%; diff --git a/packages/ketchup/src/components/kup-card/built-in/kup-card-built-in-4.scss b/packages/ketchup/src/components/kup-card/built-in/kup-card-built-in-4.scss index 9d7688f329..579e7562b7 100644 --- a/packages/ketchup/src/components/kup-card/built-in/kup-card-built-in-4.scss +++ b/packages/ketchup/src/components/kup-card/built-in/kup-card-built-in-4.scss @@ -9,7 +9,7 @@ @mixin border-deco() { //Firefox bug: https://github.com/Sphinxxxx/vanilla-picker/issues/1 // outline: 1px solid silver; - box-shadow: 0 0 0 1px var(--kup-border-color); + box-shadow: 0 0 0 1px var(--kup-border-subtle); } //The arrow is only used in popup mode @@ -226,7 +226,7 @@ outline: none; &:focus, &:active { - box-shadow: 0 0 2px 1px var(--kup-border-color); + box-shadow: 0 0 2px 1px var(--kup-border-subtle); } } button { diff --git a/packages/ketchup/src/components/kup-card/built-in/kup-card-built-in-5.scss b/packages/ketchup/src/components/kup-card/built-in/kup-card-built-in-5.scss index 36a4da0aca..6cb312a105 100644 --- a/packages/ketchup/src/components/kup-card/built-in/kup-card-built-in-5.scss +++ b/packages/ketchup/src/components/kup-card/built-in/kup-card-built-in-5.scss @@ -1,41 +1,57 @@ .built-in-layout-5 { - background: var(--kup-background-color); - box-shadow: var(--kup-box-shadow); - box-sizing: border-box; - overflow: auto; - padding: 0.5em; - - > table { - width: 100%; - - > tr > td { - > div.value { - text-align: right; - color: var(--kup-primary-color); - border-bottom: 1px solid var(--kup-border-color); - min-height: 1.5em; - } - - > .f-button { - display: flex; - justify-content: center; - } - - > div.number { - border-radius: 50%; - cursor: pointer; - display: flex; - justify-content: center; - line-height: 2.5em; - margin: auto; - width: 2.5em; - transition: background-color 0.25s; - text-transform: capitalize; - - &:hover { - background-color: var(--kup-hover-background-color); - } - } + --kup_card_background_color: var( + --kup-card-background-color, + var(--kup-layer-1) + ); + --kup_card_background_color_hover: var( + --kup-card-background-color-hover, + var(--kup-layer-1-hover) + ); + --kup_card_box_shadow: var( + --kup-box-shadow, + 0px 3px 6px 0 rgba(0, 0, 0, 0.3) + ); + --kup_card_border_color: var( + --kup-card-border-color, + var(--kup-border-subtle) + ); + --kup_card_text_color: var(--kup-card-text-color, var(--kup-text-secondary)); + background: var(--kup_card_background_color); + box-shadow: var(--kup_card_box_shadow); + box-sizing: border-box; + overflow: auto; + padding: var(--kup-space-03); + + > table { + width: 100%; + + > tr > td { + > div.value { + text-align: right; + color: var(--kup_card_text_color); + border-bottom: 1px solid var(--kup_card_border_color); + min-height: 1.5em; + } + + > .f-button { + display: flex; + justify-content: center; + } + + > div.number { + cursor: pointer; + display: flex; + justify-content: center; + line-height: 2.5em; + margin: auto; + width: 2.5em; + transition: background-color 0.25s; + text-transform: capitalize; + + &:hover { + background-color: var(--kup_card_background_color_hover); } + } } - } \ No newline at end of file + } +} diff --git a/packages/ketchup/src/components/kup-card/built-in/kup-card-calendar.tsx b/packages/ketchup/src/components/kup-card/built-in/kup-card-calendar.tsx index 377cfbfca7..64e7bcf6c6 100644 --- a/packages/ketchup/src/components/kup-card/built-in/kup-card-calendar.tsx +++ b/packages/ketchup/src/components/kup-card/built-in/kup-card-calendar.tsx @@ -84,7 +84,7 @@ export function prepareCalendar(component: KupCard) { const nextButtonComp = ; const changeViewButtonProp: FButtonProps = { - wrapperClass: 'change-view-button', + wrapperClass: 'change-view-button kup-neutral', styling: FButtonStyling.FLAT, label: changeViewButtonLabel, onClick: () => changeView(component), diff --git a/packages/ketchup/src/components/kup-card/dialog/kup-card-dialog-2.scss b/packages/ketchup/src/components/kup-card/dialog/kup-card-dialog-2.scss index 0005f74b6e..0bb3c39792 100644 --- a/packages/ketchup/src/components/kup-card/dialog/kup-card-dialog-2.scss +++ b/packages/ketchup/src/components/kup-card/dialog/kup-card-dialog-2.scss @@ -22,7 +22,7 @@ } .section-2 { - border-top: 1px solid var(--kup-border-color); + border-top: 1px solid var(--kup-border-subtle); display: grid; grid-gap: 0.5em; grid-template-columns: repeat(2, auto); diff --git a/packages/ketchup/src/components/kup-card/dialog/kup-card-dialog-3.scss b/packages/ketchup/src/components/kup-card/dialog/kup-card-dialog-3.scss index 7317df54af..530b95f44b 100644 --- a/packages/ketchup/src/components/kup-card/dialog/kup-card-dialog-3.scss +++ b/packages/ketchup/src/components/kup-card/dialog/kup-card-dialog-3.scss @@ -43,7 +43,7 @@ color: var(--kup-text-color); font-family: var(--kup-font-family-monospace); white-space: nowrap; - border-bottom: 1px solid var(--kup-border-color); + border-bottom: 1px solid var(--kup-border-subtle); line-height: 1.75em; } } diff --git a/packages/ketchup/src/components/kup-card/scalable/kup-card-scalable-10.scss b/packages/ketchup/src/components/kup-card/scalable/kup-card-scalable-10.scss new file mode 100644 index 0000000000..1565e0c4c1 --- /dev/null +++ b/packages/ketchup/src/components/kup-card/scalable/kup-card-scalable-10.scss @@ -0,0 +1,39 @@ +.scalable-layout-10 { + --kup_card_text_color: var(--kup-card-text-color, var(--kup-text-secondary)); + --kup_card_background_color: var( + --kup-card-background-color, + var(--kup-layer-1) + ); + + background-color: var(--kup_card_background_color); + color: var(--kup_card_text_color); + height: 100%; + display: flex; + justify-content: unset; + overflow: auto; + width: 100%; + + .text { + display: flex; + justify-content: center; + flex-direction: column; + } + + .number { + display: flex; + justify-content: space-between; + } + + .title { + font-size: 120%; + } + + .buttons { + height: max-content; + margin-bottom: 2%; + } + + .f-button { + float: right; + } +} diff --git a/packages/ketchup/src/components/kup-card/scalable/kup-card-scalable.scss b/packages/ketchup/src/components/kup-card/scalable/kup-card-scalable.scss index 654c5b4db8..8c05cbf306 100644 --- a/packages/ketchup/src/components/kup-card/scalable/kup-card-scalable.scss +++ b/packages/ketchup/src/components/kup-card/scalable/kup-card-scalable.scss @@ -7,11 +7,20 @@ @import 'kup-card-scalable-7.scss'; @import 'kup-card-scalable-8.scss'; @import 'kup-card-scalable-9.scss'; +@import 'kup-card-scalable-10.scss'; .scalable-card { + --kup_card_text_color: var(--kup-card-text-color, var(--kup-text-secondary)); + --kup_card_background_color: var( + --kup-card-background-color, + var(--kup-layer-1) + ); + + background-color: var(--kup_card_background_color); + color: var(--kup_card_text_color); + align-items: center; - box-shadow: var(--kup_card_scalable_box_shadow); - border-radius: 4px; + border-radius: var(--kup-space-00); display: flex; font-size: var( --kup_card_scalable_static_font_size, @@ -26,4 +35,6 @@ text-align: center; word-break: normal; width: 100%; + box-sizing: border-box; + padding: var(--kup-space-03); } diff --git a/packages/ketchup/src/components/kup-card/scalable/kup-card-scalable.tsx b/packages/ketchup/src/components/kup-card/scalable/kup-card-scalable.tsx index be27f9e776..d715e12eb3 100644 --- a/packages/ketchup/src/components/kup-card/scalable/kup-card-scalable.tsx +++ b/packages/ketchup/src/components/kup-card/scalable/kup-card-scalable.tsx @@ -75,7 +75,7 @@ export function create2(component: KupCard): VNode { color={ colorArray[0] ? colorArray[0] - : `var(${KupThemeColorValues.PRIMARY})` + : `var(${KupThemeColorValues.ICON})` } id="image1" {...imageArray[0]} @@ -189,7 +189,7 @@ export function create4(component: KupCard): VNode { color={ colorArray[0] ? colorArray[0] - : `var(${KupThemeColorValues.PRIMARY})` + : `var(${KupThemeColorValues.ICON})` } id="image1" {...imageArray[0]} @@ -305,7 +305,7 @@ export function create5(component: KupCard): VNode { color={ colorArray[0] ? colorArray[0] - : `var(${KupThemeColorValues.PRIMARY})` + : `var(${KupThemeColorValues.ICON})` } id="image1" {...imageArray[0]} @@ -346,7 +346,7 @@ export function create6(component: KupCard): VNode { color={ colorArray[0] ? colorArray[0] - : `var(${KupThemeColorValues.PRIMARY})` + : `var(${KupThemeColorValues.ICON})` } id="image1" {...imageArray[0]} @@ -437,7 +437,7 @@ export function create7(component: KupCard): VNode { color={ colorArray[0] ? colorArray[0] - : `var(${KupThemeColorValues.PRIMARY})` + : `var(${KupThemeColorValues.ICON})` } id="image1" {...imageArray[0]} @@ -478,7 +478,7 @@ export function create8(component: KupCard): VNode { color={ colorArray[0] ? colorArray[0] - : `var(${KupThemeColorValues.PRIMARY})` + : `var(${KupThemeColorValues.ICON})` } id="image1" {...imageArray[0]} @@ -594,3 +594,155 @@ export function create9(component: KupCard): VNode {
); } + +/** + * 10th scalable card layout, tile view. + * @param {KupCard} component - Card component. + * @returns {VNode} 8th scalable layout virtual node. + */ +export function create10(component: KupCard): VNode { + // color line + const lineBg = + component.data.color && component.data.color.length > 0 + ? component.data.color[0] + : `var(${KupThemeColorValues.PRIMARY})`; + // color component + const componentBg = + component.data.color && component.data.color.length > 1 + ? component.data.color[1] + : `var(${KupThemeColorValues.BACKGROUND})`; + // color text + const textFg = + component.data.color && component.data.color.length > 2 + ? component.data.color[2] + : `var(${KupThemeColorValues.TEXT})`; + //Icon + const imageArray: GenericObject[] = component.data['image'] + ? component.data['image'] + : []; + //Image color + + const colorArray: string[] = component.data['color'] + ? component.data['color'] + : []; + // Main text + const mainText = + component.data.text && component.data.text.length > 0 + ? component.data.text[0] + : null; + + // Sub text + const subText = + component.data.text && component.data.text.length > 1 + ? component.data.text[1] + : null; + // Buttons area + const buttons = + component.data.button && component.data.button.length > 0 + ? (JSON.parse(JSON.stringify(component.data.button)) as []) + : []; + // Only 4 buttons supported + if (buttons.length > 4) { + buttons.splice(4, buttons.length - 4); + } + buttons.reverse(); + + //Dynamic CSS variables + const CSSVariables: GenericObject = { + ['--color-0']: lineBg, + ['--color-1']: componentBg, + ['--color-2']: textFg, + }; + return ( +
+
+
+
{mainText}
+
+
+
+ {imageArray[0] ? ( + + ) : null} +
+
+
{subText}
+
+
+
+
+ ); +} + +/** + * 11th scalable card layout, icon with title and subtitle. + * @param {KupCard} component - Card component. + * @returns {VNode} 8th scalable layout virtual node. + */ +export function create11(component: KupCard): VNode { + //Image color + const colorArray: string[] = component.data['color'] + ? component.data['color'] + : []; + //Icon + const imageArray: GenericObject[] = component.data['image'] + ? component.data['image'] + : []; + //Title, subtitle + let textIndex: number = 0; + const textArray: string[] = component.data['text'] + ? component.data['text'] + : []; + return ( +
+
+
+ {imageArray[0] ? ( + + ) : null} +
+
+
+ {textArray[textIndex] ? textArray[textIndex] : ''} +
+
+
+
+ {textArray[++textIndex] ? textArray[textIndex] : ''} +
+
+
+
+ ); +} diff --git a/packages/ketchup/src/components/kup-card/standard/kup-card-standard-12.scss b/packages/ketchup/src/components/kup-card/standard/kup-card-standard-12.scss index 555a06c3a6..6c3e0010ea 100644 --- a/packages/ketchup/src/components/kup-card/standard/kup-card-standard-12.scss +++ b/packages/ketchup/src/components/kup-card/standard/kup-card-standard-12.scss @@ -9,7 +9,7 @@ .section-1 { display: inline-flex; - border-bottom: 1px solid var(--kup-border-color); + border-bottom: 1px solid var(--kup-border-subtle); width: 100%; kup-button { margin: 0; @@ -20,8 +20,8 @@ display: flex; flex-direction: column; &.has-content { - border-bottom: 1px solid var(--kup-border-color); - padding: 0.5em 0.5em; + border-bottom: 1px solid var(--kup-border-subtle); + padding: var(--kup-space-05); } kup-date-picker:first-of-type, kup-time-picker:first-of-type { @@ -35,6 +35,7 @@ flex-direction: column; max-height: 20vh; overflow: auto; + padding: var(--kup-space-05); kup-checkbox { margin-left: 0; margin-right: auto; diff --git a/packages/ketchup/src/components/kup-card/standard/kup-card-standard-13.scss b/packages/ketchup/src/components/kup-card/standard/kup-card-standard-13.scss index 62c088f657..881833b503 100644 --- a/packages/ketchup/src/components/kup-card/standard/kup-card-standard-13.scss +++ b/packages/ketchup/src/components/kup-card/standard/kup-card-standard-13.scss @@ -40,7 +40,7 @@ color: var(--kup-text-color); font-family: var(--kup-font-family-monospace); white-space: nowrap; - border-bottom: 1px solid var(--kup-border-color); + border-bottom: 1px solid var(--kup-border-subtle); line-height: 1.75em; } } diff --git a/packages/ketchup/src/components/kup-card/standard/kup-card-standard-14.scss b/packages/ketchup/src/components/kup-card/standard/kup-card-standard-14.scss index 0995664640..701613de1d 100644 --- a/packages/ketchup/src/components/kup-card/standard/kup-card-standard-14.scss +++ b/packages/ketchup/src/components/kup-card/standard/kup-card-standard-14.scss @@ -53,6 +53,7 @@ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; + @include kup-heading-02; &:hover { text-decoration: underline; @@ -70,15 +71,22 @@ margin-right: 0.75em; min-width: max-content; width: auto; + @include kup-body-compact-01; } .value { font-weight: 600; width: 100%; + @include kup-heading-compact-01; } } } + .section-2, + .section-3 { + padding: 1em; + } + .sub-button { display: inline-flex; width: 100%; @@ -100,21 +108,22 @@ } .sub-formula { - padding: 0.5em; + padding: 0.5em 0; } .sub-chip { max-width: 25vw; overflow: auto; - box-shadow: 0 3px 2px -2px var(--kup-border-color); + box-shadow: 0 3px 2px -2px var(--kup-border-subtle); } .sub-field { display: flex; flex-direction: column; + gap: var(--kup-space-03); &.has-content { - border-bottom: 1px solid var(--kup-border-color); - padding: 0.5em 0.5em; + border-bottom: 1px solid var(--kup-border-subtle); + padding: 0.5em 0; } kup-date-picker:first-of-type, kup-time-picker:first-of-type { diff --git a/packages/ketchup/src/components/kup-card/standard/kup-card-standard-15.scss b/packages/ketchup/src/components/kup-card/standard/kup-card-standard-15.scss index 036dee1f1e..ade8cfff5e 100644 --- a/packages/ketchup/src/components/kup-card/standard/kup-card-standard-15.scss +++ b/packages/ketchup/src/components/kup-card/standard/kup-card-standard-15.scss @@ -54,6 +54,7 @@ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; + @include kup-heading-02; &:hover { text-decoration: underline; @@ -71,17 +72,19 @@ margin-right: 0.75em; min-width: max-content; width: auto; + @include kup-body-compact-01; } .value { font-weight: 600; width: 100%; + @include kup-heading-compact-01; } } } .section-2 { - border-top: 1px solid var(--kup-border-color); + border-top: 1px solid var(--kup-border-subtle); box-sizing: border-box; height: 180px; opacity: 1; @@ -112,6 +115,7 @@ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; + @include kup-body-compact-01; } &__value { @@ -122,6 +126,7 @@ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; + @include kup-heading-compact-01; } } @@ -131,7 +136,7 @@ } .section-3 { - border-top: 1px solid var(--kup-border-color); + border-top: 1px solid var(--kup-border-subtle); display: flex; justify-content: flex-end; padding: 6px { diff --git a/packages/ketchup/src/components/kup-cell/readme.md b/packages/ketchup/src/components/kup-cell/readme.md index 3ef63e5fdd..e69ba26719 100644 --- a/packages/ketchup/src/components/kup-cell/readme.md +++ b/packages/ketchup/src/components/kup-cell/readme.md @@ -1,7 +1,5 @@ # kup-cell - - @@ -171,6 +169,7 @@ graph TD; kup-autocomplete --> kup-list kup-autocomplete --> kup-card kup-autocomplete --> kup-dialog + kup-autocomplete --> kup-badge kup-list --> kup-list kup-list --> kup-radio kup-list --> kup-card @@ -189,18 +188,23 @@ graph TD; kup-chip --> kup-badge kup-text-field --> kup-card kup-text-field --> kup-dialog + kup-text-field --> kup-badge kup-color-picker --> kup-card kup-color-picker --> kup-dialog + kup-color-picker --> kup-badge kup-combobox --> kup-list kup-combobox --> kup-card kup-combobox --> kup-dialog + kup-combobox --> kup-badge kup-date-picker --> kup-card kup-date-picker --> kup-dialog + kup-date-picker --> kup-badge kup-rating --> kup-card kup-rating --> kup-dialog kup-time-picker --> kup-card kup-time-picker --> kup-list kup-time-picker --> kup-dialog + kup-time-picker --> kup-badge kup-image --> kup-card kup-image --> kup-image kup-image --> kup-dialog @@ -227,6 +231,7 @@ graph TD; kup-button --> kup-badge kup-checkbox --> kup-card kup-checkbox --> kup-dialog + kup-checkbox --> kup-badge kup-data-table --> kup-card kup-data-table --> kup-list kup-data-table --> kup-switch diff --git a/packages/ketchup/src/components/kup-chart/readme.md b/packages/ketchup/src/components/kup-chart/readme.md index 3187b0b0b8..3d3c60b5d9 100644 --- a/packages/ketchup/src/components/kup-chart/readme.md +++ b/packages/ketchup/src/components/kup-chart/readme.md @@ -120,6 +120,7 @@ graph TD; kup-autocomplete --> kup-list kup-autocomplete --> kup-card kup-autocomplete --> kup-dialog + kup-autocomplete --> kup-badge kup-list --> kup-list kup-list --> kup-radio kup-list --> kup-card @@ -138,18 +139,23 @@ graph TD; kup-chip --> kup-badge kup-text-field --> kup-card kup-text-field --> kup-dialog + kup-text-field --> kup-badge kup-color-picker --> kup-card kup-color-picker --> kup-dialog + kup-color-picker --> kup-badge kup-combobox --> kup-list kup-combobox --> kup-card kup-combobox --> kup-dialog + kup-combobox --> kup-badge kup-date-picker --> kup-card kup-date-picker --> kup-dialog + kup-date-picker --> kup-badge kup-rating --> kup-card kup-rating --> kup-dialog kup-time-picker --> kup-card kup-time-picker --> kup-list kup-time-picker --> kup-dialog + kup-time-picker --> kup-badge kup-image --> kup-card kup-image --> kup-image kup-image --> kup-dialog @@ -174,6 +180,7 @@ graph TD; kup-button --> kup-badge kup-checkbox --> kup-card kup-checkbox --> kup-dialog + kup-checkbox --> kup-badge kup-data-table --> kup-chart kup-switch --> kup-card kup-switch --> kup-dialog diff --git a/packages/ketchup/src/components/kup-checkbox/kup-checkbox.tsx b/packages/ketchup/src/components/kup-checkbox/kup-checkbox.tsx index 6739f97800..aa896d9eab 100644 --- a/packages/ketchup/src/components/kup-checkbox/kup-checkbox.tsx +++ b/packages/ketchup/src/components/kup-checkbox/kup-checkbox.tsx @@ -49,6 +49,11 @@ export class KupCheckbox { /* P r o p s */ /*-------------------------------------------------*/ + /** + * Set alert message + * @default ''' + */ + @Prop() alert: string = ''; /** * Defaults at false. When set to true, the component will be set to 'checked'. * @default false @@ -65,6 +70,11 @@ export class KupCheckbox { * @default false */ @Prop() disabled: boolean = false; + /** + * Set error message + * @default ''' + */ + @Prop() error: string = ''; /** * When set to true, the component will be set to 'indeterminate'. * @default false @@ -240,6 +250,8 @@ export class KupCheckbox { warning: this.rootElement.classList.contains('kup-warning') ? true : false, + alert: this.alert, + error: this.error, onBlur: () => this.onKupBlur(), onChange: () => this.onKupChange(), onFocus: () => this.onKupFocus(), diff --git a/packages/ketchup/src/components/kup-checkbox/readme.md b/packages/ketchup/src/components/kup-checkbox/readme.md index e660ed7a0e..61e396e1b4 100644 --- a/packages/ketchup/src/components/kup-checkbox/readme.md +++ b/packages/ketchup/src/components/kup-checkbox/readme.md @@ -12,9 +12,11 @@ | Property | Attribute | Description | Type | Default | | --------------- | --------------- | ---------------------------------------------------------------------------- | --------- | ------- | +| `alert` | `alert` | Set alert message | `string` | `''` | | `checked` | `checked` | Defaults at false. When set to true, the component will be set to 'checked'. | `boolean` | `false` | | `customStyle` | `custom-style` | Custom style of the component. | `string` | `''` | | `disabled` | `disabled` | When set to true, the component is disabled. | `boolean` | `false` | +| `error` | `error` | Set error message | `string` | `''` | | `indeterminate` | `indeterminate` | When set to true, the component will be set to 'indeterminate'. | `boolean` | `false` | | `label` | `label` | When specified, its content will be shown as a label. | `string` | `null` | | `leadingLabel` | `leading-label` | When set to true, the label will be on the left of the component. | `boolean` | `false` | @@ -103,16 +105,19 @@ Type: `Promise` - [kup-card](../kup-card) - [kup-dialog](../kup-dialog) +- [kup-badge](../kup-badge) ### Graph ```mermaid graph TD; kup-checkbox --> kup-card kup-checkbox --> kup-dialog + kup-checkbox --> kup-badge kup-card --> kup-checkbox kup-autocomplete --> kup-list kup-autocomplete --> kup-card kup-autocomplete --> kup-dialog + kup-autocomplete --> kup-badge kup-list --> kup-list kup-list --> kup-radio kup-list --> kup-card @@ -131,18 +136,23 @@ graph TD; kup-chip --> kup-badge kup-text-field --> kup-card kup-text-field --> kup-dialog + kup-text-field --> kup-badge kup-color-picker --> kup-card kup-color-picker --> kup-dialog + kup-color-picker --> kup-badge kup-combobox --> kup-list kup-combobox --> kup-card kup-combobox --> kup-dialog + kup-combobox --> kup-badge kup-date-picker --> kup-card kup-date-picker --> kup-dialog + kup-date-picker --> kup-badge kup-rating --> kup-card kup-rating --> kup-dialog kup-time-picker --> kup-card kup-time-picker --> kup-list kup-time-picker --> kup-dialog + kup-time-picker --> kup-badge kup-image --> kup-card kup-image --> kup-image kup-image --> kup-dialog diff --git a/packages/ketchup/src/components/kup-chip/kup-chip.tsx b/packages/ketchup/src/components/kup-chip/kup-chip.tsx index 4f3dd14cf1..022d015c0a 100644 --- a/packages/ketchup/src/components/kup-chip/kup-chip.tsx +++ b/packages/ketchup/src/components/kup-chip/kup-chip.tsx @@ -17,7 +17,9 @@ import { } from '../../managers/kup-manager/kup-manager'; import { FChip } from '../../f-components/f-chip/f-chip'; import { + FChipSize, FChipsProps, + FChipStyling, FChipType, } from '../../f-components/f-chip/f-chip-declarations'; import { @@ -80,6 +82,16 @@ export class KupChip { * @default FChipType.STANDARD */ @Prop() type: FChipType = FChipType.STANDARD; + /** + * Sets the size of the chip + * @default FChipSize.MEDIUM + */ + @Prop() sizing: FChipSize = FChipSize.MEDIUM; + /** + * Sets the style of the chip + * @default FChipStyling.RAISED + */ + @Prop() styling: FChipStyling = FChipStyling.RAISED; /*-------------------------------------------------*/ /* I n t e r n a l V a r i a b l e s */ @@ -356,9 +368,14 @@ export class KupChip { onExpansionClick: [], onFocus: [], onIconClick: [], + primary: this.rootElement.classList.contains('kup-primary') + ? true + : false, secondary: this.rootElement.classList.contains('kup-secondary') ? true : false, + sizing: this.sizing, + styling: this.styling, success: this.rootElement.classList.contains('kup-success') ? true : false, diff --git a/packages/ketchup/src/components/kup-chip/readme.md b/packages/ketchup/src/components/kup-chip/readme.md index 05de892ce3..2a48120cbc 100644 --- a/packages/ketchup/src/components/kup-chip/readme.md +++ b/packages/ketchup/src/components/kup-chip/readme.md @@ -5,13 +5,15 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| ------------- | -------------- | -------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------- | -------------------- | -| `customStyle` | `custom-style` | Custom style of the component. | `string` | `''` | -| `data` | -- | List of elements. | `KupChipNode[]` | `[]` | -| `displayId` | `display-id` | When enabled, the chip's text will display both the id and the value. | `boolean` | `false` | -| `enableInput` | `enable-input` | When enabled, it's possible to add items to the chip's dataset through an input slot (kup-autocomplete, kup-combobox, kup-text-field). | `boolean` | `false` | -| `type` | `type` | The type of chip. Available types: input, filter, choice or empty for default. | `FChipType.CHOICE \| FChipType.FILTER \| FChipType.INPUT \| FChipType.STANDARD` | `FChipType.STANDARD` | +| Property | Attribute | Description | Type | Default | +| ------------- | -------------- | -------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------- | --------------------- | +| `customStyle` | `custom-style` | Custom style of the component. | `string` | `''` | +| `data` | -- | List of elements. | `KupChipNode[]` | `[]` | +| `displayId` | `display-id` | When enabled, the chip's text will display both the id and the value. | `boolean` | `false` | +| `enableInput` | `enable-input` | When enabled, it's possible to add items to the chip's dataset through an input slot (kup-autocomplete, kup-combobox, kup-text-field). | `boolean` | `false` | +| `sizing` | `sizing` | Sets the size of the chip | `FChipSize.MEDIUM \| FChipSize.SMALL` | `FChipSize.MEDIUM` | +| `styling` | `styling` | Sets the style of the chip | `FChipStyling.OUTLINED \| FChipStyling.RAISED` | `FChipStyling.RAISED` | +| `type` | `type` | The type of chip. Available types: input, filter, choice or empty for default. | `FChipType.CHOICE \| FChipType.FILTER \| FChipType.INPUT \| FChipType.STANDARD` | `FChipType.STANDARD` | ## Events @@ -119,6 +121,7 @@ graph TD; kup-autocomplete --> kup-list kup-autocomplete --> kup-card kup-autocomplete --> kup-dialog + kup-autocomplete --> kup-badge kup-list --> kup-list kup-list --> kup-radio kup-list --> kup-card @@ -134,18 +137,23 @@ graph TD; kup-badge --> kup-dialog kup-text-field --> kup-card kup-text-field --> kup-dialog + kup-text-field --> kup-badge kup-color-picker --> kup-card kup-color-picker --> kup-dialog + kup-color-picker --> kup-badge kup-combobox --> kup-list kup-combobox --> kup-card kup-combobox --> kup-dialog + kup-combobox --> kup-badge kup-date-picker --> kup-card kup-date-picker --> kup-dialog + kup-date-picker --> kup-badge kup-rating --> kup-card kup-rating --> kup-dialog kup-time-picker --> kup-card kup-time-picker --> kup-list kup-time-picker --> kup-dialog + kup-time-picker --> kup-badge kup-image --> kup-card kup-image --> kup-image kup-image --> kup-dialog @@ -172,6 +180,7 @@ graph TD; kup-button --> kup-badge kup-checkbox --> kup-card kup-checkbox --> kup-dialog + kup-checkbox --> kup-badge kup-data-table --> kup-chip kup-switch --> kup-card kup-switch --> kup-dialog diff --git a/packages/ketchup/src/components/kup-color-picker/kup-color-picker.tsx b/packages/ketchup/src/components/kup-color-picker/kup-color-picker.tsx index bfaee2b429..e3f29a5d27 100644 --- a/packages/ketchup/src/components/kup-color-picker/kup-color-picker.tsx +++ b/packages/ketchup/src/components/kup-color-picker/kup-color-picker.tsx @@ -78,6 +78,11 @@ export class KupColorPicker { * @default "" */ @Prop() initialValue: string = ''; + /** + * Sets the component to read only state, making it not editable, but interactable. + * @default false + */ + @Prop() readOnly: boolean = false; /** * When true, the component's text field will be replaced by a swatch. * @default false @@ -257,6 +262,7 @@ export class KupColorPicker { private prepTextField(): VNode { let value: string = null; let textfieldProps: FTextFieldProps = { + readOnly: this.readOnly, ...this.data['kup-text-field'], }; if (!textfieldProps.icon) { @@ -297,7 +303,6 @@ export class KupColorPicker { ? true : false } - readOnly={true} value={value} wrapperClass={ textfieldProps.icon === 'brightness-1' ? 'thumb-icon' : '' diff --git a/packages/ketchup/src/components/kup-color-picker/readme.md b/packages/ketchup/src/components/kup-color-picker/readme.md index 2ee6d2ed8b..e975aa38b9 100644 --- a/packages/ketchup/src/components/kup-color-picker/readme.md +++ b/packages/ketchup/src/components/kup-color-picker/readme.md @@ -1,7 +1,5 @@ # kup-color-picker - - @@ -121,16 +119,19 @@ Type: `Promise` - [kup-card](../kup-card) - [kup-dialog](../kup-dialog) +- [kup-badge](../kup-badge) ### Graph ```mermaid graph TD; kup-color-picker --> kup-card kup-color-picker --> kup-dialog + kup-color-picker --> kup-badge kup-card --> kup-color-picker kup-autocomplete --> kup-list kup-autocomplete --> kup-card kup-autocomplete --> kup-dialog + kup-autocomplete --> kup-badge kup-list --> kup-list kup-list --> kup-radio kup-list --> kup-card @@ -149,16 +150,20 @@ graph TD; kup-chip --> kup-badge kup-text-field --> kup-card kup-text-field --> kup-dialog + kup-text-field --> kup-badge kup-combobox --> kup-list kup-combobox --> kup-card kup-combobox --> kup-dialog + kup-combobox --> kup-badge kup-date-picker --> kup-card kup-date-picker --> kup-dialog + kup-date-picker --> kup-badge kup-rating --> kup-card kup-rating --> kup-dialog kup-time-picker --> kup-card kup-time-picker --> kup-list kup-time-picker --> kup-dialog + kup-time-picker --> kup-badge kup-image --> kup-card kup-image --> kup-image kup-image --> kup-dialog @@ -185,6 +190,7 @@ graph TD; kup-button --> kup-badge kup-checkbox --> kup-card kup-checkbox --> kup-dialog + kup-checkbox --> kup-badge kup-data-table --> kup-color-picker kup-switch --> kup-card kup-switch --> kup-dialog diff --git a/packages/ketchup/src/components/kup-color-picker/styles/kup-color-picker-main.scss b/packages/ketchup/src/components/kup-color-picker/styles/kup-color-picker-main.scss index 9e3abe979b..b00eb90bea 100644 --- a/packages/ketchup/src/components/kup-color-picker/styles/kup-color-picker-main.scss +++ b/packages/ketchup/src/components/kup-color-picker/styles/kup-color-picker-main.scss @@ -7,10 +7,6 @@ transition: background-color 0.2s; width: max-content; - &:hover { - background-color: rgba(var(--kup-text-color-rgb), 0.1); - } - .mdc-text-field { &:not(.mdc-text-field--disabled) { cursor: pointer; @@ -43,7 +39,7 @@ width: 1.5em; margin: 0.25em; border-radius: 50%; - border: 0.1em solid var(--kup-border-color); + border: 0.1em solid var(--kup-border-subtle); background-color: transparent; cursor: pointer; diff --git a/packages/ketchup/src/components/kup-combobox/kup-combobox-declarations.ts b/packages/ketchup/src/components/kup-combobox/kup-combobox-declarations.ts index 419f139f1d..6bf0d58b6e 100644 --- a/packages/ketchup/src/components/kup-combobox/kup-combobox-declarations.ts +++ b/packages/ketchup/src/components/kup-combobox/kup-combobox-declarations.ts @@ -11,9 +11,12 @@ export enum KupComboboxProps { disabled = 'Defaults at false. When set to true, the component is disabled.', displayMode = 'Sets how to show the selected item value. Suported values: "code", "description", "both".', initialValue = 'Sets the initial value of the component', + isClearable = 'Enables a clear trailing icon.', isSelect = 'Lets the combobox behave as a select element.', selectMode = 'Sets how to return the selected item value. Suported values: "code", "description", "both".', showDropDownIcon = 'When true shows the drop-down icon, for open list.', + label = 'When set, its content will be shown as a label.', + leadingLabel = 'When set to true, the label will be on the left of the component.', } export interface KupComboboxEventPayload extends KupEventPayload { diff --git a/packages/ketchup/src/components/kup-combobox/kup-combobox.tsx b/packages/ketchup/src/components/kup-combobox/kup-combobox.tsx index 0899211341..332ec93e54 100644 --- a/packages/ketchup/src/components/kup-combobox/kup-combobox.tsx +++ b/packages/ketchup/src/components/kup-combobox/kup-combobox.tsx @@ -12,7 +12,11 @@ import { State, Watch, } from '@stencil/core'; -import type { GenericObject, KupComponent } from '../../types/GenericTypes'; +import { + GenericObject, + KupComponent, + KupComponentSizing, +} from '../../types/GenericTypes'; import { KupManager, kupManagerInstance, @@ -35,6 +39,7 @@ import { getProps, setProps } from '../../utils/utils'; import { componentWrapperId } from '../../variables/GenericVariables'; import { KupManagerClickCb } from '../../managers/kup-manager/kup-manager-declarations'; import { KupDynamicPositionPlacement } from '../../managers/kup-dynamic-position/kup-dynamic-position-declarations'; +import { FTextFieldProps } from '../../f-components/f-text-field/f-text-field-declarations'; @Component({ tag: 'kup-combobox', @@ -55,6 +60,11 @@ export class KupCombobox { /* P r o p s */ /*-------------------------------------------------*/ + /** + * Set alert message + * @default ''' + */ + @Prop() alert: string = ''; /** * Custom style of the component. * @default "" @@ -73,14 +83,44 @@ export class KupCombobox { * Sets how to show the selected item value. Suported values: "code", "description", "both". */ @Prop() displayMode: ItemsDisplayMode = ItemsDisplayMode.DESCRIPTION; + /** + * Set error message + * @default ''' + */ + @Prop() error: string = ''; + /** + * When set, the text-field will show this icon. + * @default null + */ + @Prop() icon: string = null; /** * Sets the initial value of the component */ @Prop() initialValue: string = ''; + /** + * Enables a clear trailing icon. + * @default false + */ + @Prop() isClearable: boolean = false; /** * Lets the combobox behave as a select element. */ @Prop({ reflect: true }) isSelect: boolean = false; + /** + * When set, its content will be shown as a label. + * @default null + */ + @Prop() label: string = null; + /** + * When set to true, the label will be on the left of the component. + * @default false + */ + @Prop() leadingLabel: boolean = false; + /** + * Sets the component to read only state, making it not editable, but interactable. Used in combobox component when it behaves as a select. + * @default false + */ + @Prop() readOnly: boolean = false; /** * Sets how to return the selected item value. Suported values: "code", "description", "both". */ @@ -89,6 +129,16 @@ export class KupCombobox { * When true shows the drop-down icon, for open list. */ @Prop() showDropDownIcon: boolean = true; + /** + * Sets the type of the button + * @default KupComponentSizing.MEDIUM + */ + @Prop() sizing: KupComponentSizing = KupComponentSizing.MEDIUM; + /** + * When set, the icon will be shown after the text. + * @default false + */ + @Prop() trailingIcon: boolean = false; /*-------------------------------------------------*/ /* I n t e r n a l V a r i a b l e s */ @@ -371,6 +421,10 @@ export class KupCombobox { if (this.#isListOpened()) { return; } + // Manage list open while helperline is displayed + const hasError = this.error.trim().length > 0; + const hasAlert = this.alert.trim().length > 0; + const topOffset = hasError || hasAlert ? -20 : 0; this.#textfieldWrapper.classList.add('toggled'); this.#listEl.menuVisible = true; this.#listEl.filter = ''; @@ -386,7 +440,7 @@ export class KupCombobox { this.#kupManager.dynamicPosition.register( this.#listEl, this.#textfieldWrapper, - 0, + topOffset, KupDynamicPositionPlacement.AUTO, true ); @@ -495,11 +549,34 @@ export class KupCombobox { } render() { + const props: FTextFieldProps = { + alert: this.alert, + danger: this.rootElement.classList.contains('kup-danger') + ? true + : false, + disabled: this.disabled, + error: this.error, + icon: this.icon, + info: this.rootElement.classList.contains('kup-info') + ? true + : false, + isClearable: this.isClearable, + label: this.label, + leadingLabel: this.leadingLabel, + readOnly: this.readOnly, + sizing: this.sizing, + success: this.rootElement.classList.contains('kup-success') + ? true + : false, + value: this.value, + warning: this.rootElement.classList.contains('kup-warning') + ? true + : false, + }; const fullHeight: boolean = this.rootElement.classList.contains('kup-full-height'); const fullWidth: boolean = this.rootElement.classList.contains('kup-full-width'); - return (
this.onKupBlur()} onClick={() => this.onKupClick()} diff --git a/packages/ketchup/src/components/kup-combobox/readme.md b/packages/ketchup/src/components/kup-combobox/readme.md index 8a631793aa..41623bf3ea 100644 --- a/packages/ketchup/src/components/kup-combobox/readme.md +++ b/packages/ketchup/src/components/kup-combobox/readme.md @@ -5,16 +5,25 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| ------------------ | --------------------- | ------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------ | ------------------------------ | -| `customStyle` | `custom-style` | Custom style of the component. | `string` | `''` | -| `data` | -- | Props of the sub-components (date input text field). | `Object` | `undefined` | -| `disabled` | `disabled` | Defaults at false. When set to true, the component is disabled. | `boolean` | `false` | -| `displayMode` | `display-mode` | Sets how to show the selected item value. Suported values: "code", "description", "both". | `ItemsDisplayMode.CODE \| ItemsDisplayMode.DESCRIPTION \| ItemsDisplayMode.DESCRIPTION_AND_CODE` | `ItemsDisplayMode.DESCRIPTION` | -| `initialValue` | `initial-value` | Sets the initial value of the component | `string` | `''` | -| `isSelect` | `is-select` | Lets the combobox behave as a select element. | `boolean` | `false` | -| `selectMode` | `select-mode` | Sets how to return the selected item value. Suported values: "code", "description", "both". | `ItemsDisplayMode.CODE \| ItemsDisplayMode.DESCRIPTION \| ItemsDisplayMode.DESCRIPTION_AND_CODE` | `ItemsDisplayMode.CODE` | -| `showDropDownIcon` | `show-drop-down-icon` | When true shows the drop-down icon, for open list. | `boolean` | `true` | +| Property | Attribute | Description | Type | Default | +| ------------------ | --------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- | ------------------------------ | +| `alert` | `alert` | Set alert message | `string` | `''` | +| `customStyle` | `custom-style` | Custom style of the component. | `string` | `''` | +| `data` | -- | Props of the sub-components (date input text field). | `Object` | `undefined` | +| `disabled` | `disabled` | Defaults at false. When set to true, the component is disabled. | `boolean` | `false` | +| `displayMode` | `display-mode` | Sets how to show the selected item value. Suported values: "code", "description", "both". | `ItemsDisplayMode.CODE \| ItemsDisplayMode.DESCRIPTION \| ItemsDisplayMode.DESCRIPTION_AND_CODE` | `ItemsDisplayMode.DESCRIPTION` | +| `error` | `error` | Set error message | `string` | `''` | +| `icon` | `icon` | When set, the text-field will show this icon. | `string` | `null` | +| `initialValue` | `initial-value` | Sets the initial value of the component | `string` | `''` | +| `isClearable` | `is-clearable` | Enables a clear trailing icon. | `boolean` | `false` | +| `isSelect` | `is-select` | Lets the combobox behave as a select element. | `boolean` | `false` | +| `label` | `label` | When set, its content will be shown as a label. | `string` | `null` | +| `leadingLabel` | `leading-label` | When set to true, the label will be on the left of the component. | `boolean` | `false` | +| `readOnly` | `read-only` | Sets the component to read only state, making it not editable, but interactable. Used in combobox component when it behaves as a select. | `boolean` | `false` | +| `selectMode` | `select-mode` | Sets how to return the selected item value. Suported values: "code", "description", "both". | `ItemsDisplayMode.CODE \| ItemsDisplayMode.DESCRIPTION \| ItemsDisplayMode.DESCRIPTION_AND_CODE` | `ItemsDisplayMode.CODE` | +| `showDropDownIcon` | `show-drop-down-icon` | When true shows the drop-down icon, for open list. | `boolean` | `true` | +| `sizing` | `sizing` | Sets the type of the button | `KupComponentSizing.LARGE \| KupComponentSizing.MAX \| KupComponentSizing.MEDIUM \| KupComponentSizing.SMALL` | `KupComponentSizing.MEDIUM` | +| `trailingIcon` | `trailing-icon` | When set, the icon will be shown after the text. | `boolean` | `false` | ## Events @@ -130,6 +139,7 @@ Type: `Promise` - [kup-list](../kup-list) - [kup-card](../kup-card) - [kup-dialog](../kup-dialog) +- [kup-badge](../kup-badge) ### Graph ```mermaid @@ -137,6 +147,7 @@ graph TD; kup-combobox --> kup-list kup-combobox --> kup-card kup-combobox --> kup-dialog + kup-combobox --> kup-badge kup-list --> kup-list kup-list --> kup-radio kup-list --> kup-card @@ -148,6 +159,7 @@ graph TD; kup-autocomplete --> kup-list kup-autocomplete --> kup-card kup-autocomplete --> kup-dialog + kup-autocomplete --> kup-badge kup-dialog --> kup-badge kup-dialog --> kup-card kup-dialog --> kup-dialog @@ -159,15 +171,19 @@ graph TD; kup-chip --> kup-badge kup-text-field --> kup-card kup-text-field --> kup-dialog + kup-text-field --> kup-badge kup-color-picker --> kup-card kup-color-picker --> kup-dialog + kup-color-picker --> kup-badge kup-date-picker --> kup-card kup-date-picker --> kup-dialog + kup-date-picker --> kup-badge kup-rating --> kup-card kup-rating --> kup-dialog kup-time-picker --> kup-card kup-time-picker --> kup-list kup-time-picker --> kup-dialog + kup-time-picker --> kup-badge kup-image --> kup-card kup-image --> kup-image kup-image --> kup-dialog @@ -194,6 +210,7 @@ graph TD; kup-button --> kup-badge kup-checkbox --> kup-card kup-checkbox --> kup-dialog + kup-checkbox --> kup-badge kup-data-table --> kup-combobox kup-switch --> kup-card kup-switch --> kup-dialog diff --git a/packages/ketchup/src/components/kup-combobox/styles/kup-combobox-classes.scss b/packages/ketchup/src/components/kup-combobox/styles/kup-combobox-classes.scss index 90bb0de1df..91481d5b0f 100644 --- a/packages/ketchup/src/components/kup-combobox/styles/kup-combobox-classes.scss +++ b/packages/ketchup/src/components/kup-combobox/styles/kup-combobox-classes.scss @@ -42,3 +42,23 @@ --kup-textfield-primary-color: var(--kup-warning-color); --kup-textfield-primary-color-rgb: var(--kup-warning-color-rgb); } + +:host(.page-selector), +:host(.rows-selector) { + .f-text-field { + .mdc-text-field { + border-bottom: none !important; + width: max-content !important; + } + .mdc-text-field-container { + flex-direction: row !important; + .mdc-text-field__label-container { + white-space: nowrap; + @include kup-body-compact-01; + } + } + .mdc-text-field-helper-line { + display: none; + } + } +} diff --git a/packages/ketchup/src/components/kup-combobox/styles/kup-combobox-main.scss b/packages/ketchup/src/components/kup-combobox/styles/kup-combobox-main.scss index 6d54d9098b..8cdb81f030 100644 --- a/packages/ketchup/src/components/kup-combobox/styles/kup-combobox-main.scss +++ b/packages/ketchup/src/components/kup-combobox/styles/kup-combobox-main.scss @@ -7,10 +7,6 @@ :host([is-select]) { #kup-component { transition: background-color 0.2s; - - &:hover { - background-color: rgba(var(--kup-text-color-rgb), 0.1); - } } .mdc-text-field:not(.mdc-text-field--disabled) input { @@ -29,6 +25,7 @@ .#{$kup-icon}.#{$kup-icon-dropdown} { -webkit-mask: var(--kup-dropdown-icon); mask: var(--kup-dropdown-icon); + order: 2; } .f-text-field { diff --git a/packages/ketchup/src/components/kup-dashboard/readme.md b/packages/ketchup/src/components/kup-dashboard/readme.md index 68ecf564c2..224f9d50fd 100644 --- a/packages/ketchup/src/components/kup-dashboard/readme.md +++ b/packages/ketchup/src/components/kup-dashboard/readme.md @@ -109,6 +109,7 @@ graph TD; kup-autocomplete --> kup-list kup-autocomplete --> kup-card kup-autocomplete --> kup-dialog + kup-autocomplete --> kup-badge kup-list --> kup-list kup-list --> kup-radio kup-list --> kup-card @@ -124,18 +125,23 @@ graph TD; kup-chip --> kup-badge kup-text-field --> kup-card kup-text-field --> kup-dialog + kup-text-field --> kup-badge kup-color-picker --> kup-card kup-color-picker --> kup-dialog + kup-color-picker --> kup-badge kup-combobox --> kup-list kup-combobox --> kup-card kup-combobox --> kup-dialog + kup-combobox --> kup-badge kup-date-picker --> kup-card kup-date-picker --> kup-dialog + kup-date-picker --> kup-badge kup-rating --> kup-card kup-rating --> kup-dialog kup-time-picker --> kup-card kup-time-picker --> kup-list kup-time-picker --> kup-dialog + kup-time-picker --> kup-badge kup-image --> kup-card kup-image --> kup-image kup-image --> kup-dialog @@ -162,6 +168,7 @@ graph TD; kup-button --> kup-badge kup-checkbox --> kup-card kup-checkbox --> kup-dialog + kup-checkbox --> kup-badge kup-data-table --> kup-card kup-data-table --> kup-list kup-data-table --> kup-switch diff --git a/packages/ketchup/src/components/kup-data-table/kup-data-table.tsx b/packages/ketchup/src/components/kup-data-table/kup-data-table.tsx index f966c80672..37fe59baae 100644 --- a/packages/ketchup/src/components/kup-data-table/kup-data-table.tsx +++ b/packages/ketchup/src/components/kup-data-table/kup-data-table.tsx @@ -66,6 +66,7 @@ import { import { GenericObject, KupComponent, + KupComponentSizing, KupEventPayload, } from '../../types/GenericTypes'; import { identify, getProps, setProps } from '../../utils/utils'; @@ -651,7 +652,7 @@ export class KupDataTable { /** * Sets the position of the paginator. Available positions: top, bottom or both. */ - @Prop() paginatorPos: PaginatorPos = PaginatorPos.TOP; + @Prop() paginatorPos: PaginatorPos = PaginatorPos.BOTTOM; /** * When enabled, the extra whitespaces will be displayed and the font will be set to monospace by default. */ @@ -5660,7 +5661,8 @@ export class KupDataTable { )}
-
+
{groupChips}
+
{this.globalFilter ? (
) : null} - {paginatorTop} -
-
{groupChips}
-
+
+ {paginatorTop} +
+ {this.insertMode !== '' && + this.selectedRows.length > 0 ? ( + { + this.kupSave.emit({ + comp: this, + id: this.rootElement.id, + selectedRows: this.selectedRows, + }); + }} + styling={FButtonStyling.FLAT} + sizing={KupComponentSizing.MEDIUM} + title="Save" + wrapperClass="save-button" + > + ) : null} + {this.showDeleteButton && + this.selectedRows.length > 0 ? ( + { + this.#rowsDelete(); + }} + styling={FButtonStyling.FLAT} + sizing={KupComponentSizing.MEDIUM} + title="Delete selected rows" + wrapperClass="delete-button" + > + ) : null} + {this.showHistoryButton ? ( + { + this.kupHistory.emit({ + comp: this, + id: this.rootElement.id, + selectedRows: this.selectedRows, + }); + }} + styling={FButtonStyling.FLAT} + sizing={KupComponentSizing.MEDIUM} + title="History" + wrapperClass="history-button" + > + ) : null} {this.insertMode !== '' ? ( { if (this.insertMode === 'form') { this.#rowInsertForm(); @@ -5741,54 +5789,12 @@ export class KupDataTable { await this.refresh(true); } }} - styling={FButtonStyling.OUTLINED} + sizing={KupComponentSizing.MEDIUM} + styling={FButtonStyling.RAISED} title="Insert row" wrapperClass="insert-button" > ) : null} - {this.insertMode !== '' && - this.selectedRows.length > 0 ? ( - { - this.kupSave.emit({ - comp: this, - id: this.rootElement.id, - selectedRows: this.selectedRows, - }); - }} - styling={FButtonStyling.OUTLINED} - title="Save" - wrapperClass="save-button" - > - ) : null} - {this.showDeleteButton && - this.selectedRows.length > 0 ? ( - { - this.#rowsDelete(); - }} - styling={FButtonStyling.OUTLINED} - title="Delete selected rows" - wrapperClass="delete-button" - > - ) : null} - {this.showHistoryButton ? ( - { - this.kupHistory.emit({ - comp: this, - id: this.rootElement.id, - selectedRows: this.selectedRows, - }); - }} - styling={FButtonStyling.OUTLINED} - title="History" - wrapperClass="history-button" - > - ) : null}