Skip to content

Commit

Permalink
wip
Browse files Browse the repository at this point in the history
  • Loading branch information
AliKdhim87 committed Sep 2, 2024
1 parent 8431fb9 commit 872d072
Show file tree
Hide file tree
Showing 64 changed files with 1,516 additions and 369 deletions.
48 changes: 48 additions & 0 deletions components/combobox/src/_mixin.scss
Original file line number Diff line number Diff line change
Expand Up @@ -40,3 +40,51 @@
@mixin utrecht-combobox__popover--hidden {
display: none !important;
}

@mixin utrecht-combobox__textbox-container {
align-items: center;
box-sizing: border-box;
display: flex;
inline-size: var(--utrecht-listbox-inline-size);
max-inline-size: 100%;
position: relative;
}
@mixin utrecht-combobox__toggle-button {
--utrecht-button-subtle-background-color: var(--utrecht-combobox-toggle-button-background-color, transparent);
--utrecht-button-subtle-color: var(--utrecht-combobox-toggle-button-background-color, currentColor);
--utrecht-button-subtle-hover-background-color: var(
--utrecht-combobox-toggle-button-hover-background-color,
transparent
);
--utrecht-button-subtle-hover-border-color: transparent;
--utrecht-button-subtle-hover-color: var(--utrecht-combobox-toggle-button-hover-color, currentColor);
--utrecht-button-hover-scale: none;
--utrecht-button-subtle-active-border-color: transparent;
--utrecht-button-subtle-active-background-color: var(
--utrecht-combobox-toggle-button-active-background-color,
transparent
);
--utrecht-button-subtle-active-color: var(--utrecht-combobox-toggle-button-active-color, currentColor);
--utrecht-button-subtle-focus-border-color: transparent;
--utrecht-button-subtle-focus-background-color: var(
--utrecht-combobox-toggle-button-focus-background-color,
transparent
);
--utrecht-button-subtle-focus-color: var(--utrecht-combobox-toggle-button-focus-color, currentColor);
--utrecht-button-subtle-pressed-background-color: var(
--utrecht-combobox-toggle-button-pressed-background-color,
transparent
);
--utrecht-button-subtle-pressed-border-color: transparent;
--utrecht-button-subtle-pressed-color: var(--utrecht-combobox-toggle-button-pressed-color);

inset-block-start: 50%;
inset-inline-end: 0;
position: absolute;
transform: translateY(-50%);
}

@mixin utrecht-combobox__icon {
block-size: var(--utrecht-combobox-icon-size, 32px);
inline-size: var(--utrecht-combobox-icon-size, 32px);
}
12 changes: 12 additions & 0 deletions components/combobox/src/index.scss
Original file line number Diff line number Diff line change
Expand Up @@ -20,3 +20,15 @@
.utrecht-combobox__popover--hidden {
@include utrecht-combobox__popover--hidden;
}

.utrecht-combobox__textbox-container {
@include utrecht-combobox__textbox-container;
}

.utrecht-combobox__toggle-button {
@include utrecht-combobox__toggle-button;
}

.utrecht-combobox__icon {
@include utrecht-combobox__icon;
}
162 changes: 162 additions & 0 deletions components/combobox/src/tokens.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,162 @@
{
"utrecht": {
"combobox": {
"max-inline-size": {
"$extensions": {
"nl.nldesignsystem.css.property": {
"syntax": "<length>",
"inherits": true
},
"nl.nldesignsystem.figma.supports-token": true
},
"type": "spacing"
},
"border-color": {
"$extensions": {
"nl.nldesignsystem.css.property": {
"syntax": "<color>",
"inherits": true
},
"nl.nldesignsystem.figma.supports-token": true
},
"type": "color"
},
"input": {
"container": {
"inline-size": {
"$extensions": {
"nl.nldesignsystem.css.property": {
"syntax": "<length>",
"inherits": true
},
"nl.nldesignsystem.figma.supports-token": true
},
"type": "spacing"
}
}
},
"toggle-button": {
"background-color": {
"$extensions": {
"nl.nldesignsystem.css.property": {
"syntax": "<color>",
"inherits": true
},
"nl.nldesignsystem.figma.supports-token": true
},
"type": "color"
},
"color": {
"$extensions": {
"nl.nldesignsystem.css.property": {
"syntax": "<color>",
"inherits": true
},
"nl.nldesignsystem.figma.supports-token": true
},
"type": "color"
},
"hover": {
"background-color": {
"$extensions": {
"nl.nldesignsystem.css.property": {
"syntax": "<color>",
"inherits": true
},
"nl.nldesignsystem.figma.supports-token": true
},
"type": "color"
},
"color": {
"$extensions": {
"nl.nldesignsystem.css.property": {
"syntax": "<color>",
"inherits": true
},
"nl.nldesignsystem.figma.supports-token": true
},
"type": "color"
}
},
"active": {
"background-color": {
"$extensions": {
"nl.nldesignsystem.css.property": {
"syntax": "<color>",
"inherits": true
},
"nl.nldesignsystem.figma.supports-token": true
},
"type": "color"
},
"color": {
"$extensions": {
"nl.nldesignsystem.css.property": {
"syntax": "<color>",
"inherits": true
},
"nl.nldesignsystem.figma.supports-token": true
},
"type": "color"
}
},
"focus": {
"background-color": {
"$extensions": {
"nl.nldesignsystem.css.property": {
"syntax": "<color>",
"inherits": true
},
"nl.nldesignsystem.figma.supports-token": true
},
"type": "color"
},
"color": {
"$extensions": {
"nl.nldesignsystem.css.property": {
"syntax": "<color>",
"inherits": true
},
"nl.nldesignsystem.figma.supports-token": true
},
"type": "color"
}
},
"pressed": {
"background-color": {
"$extensions": {
"nl.nldesignsystem.css.property": {
"syntax": "<color>",
"inherits": true
},
"nl.nldesignsystem.figma.supports-token": true
},
"type": "color"
},
"color": {
"$extensions": {
"nl.nldesignsystem.css.property": {
"syntax": "<color>",
"inherits": true
},
"nl.nldesignsystem.figma.supports-token": true
},
"type": "color"
}
}
},
"icon": {
"size": {
"$extensions": {
"nl.nldesignsystem.css.property": {
"syntax": "<length>",
"inherits": true
},
"nl.nldesignsystem.figma.supports-token": true
},
"type": "spacing"
}
}
}
}
}
1 change: 1 addition & 0 deletions components/listbox/src/_mixin.scss
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@
flex-direction: column;
inline-size: var(--utrecht-listbox-inline-size, var(--utrecht-form-input-max-inline-size));
max-block-size: var(--utrecht-listbox-max-block-size);
max-inline-size: 100%;
min-block-size: 1em;
overflow-block: auto;
overflow-y: auto;
Expand Down
2 changes: 1 addition & 1 deletion packages/component-library-react/jest.config.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ const customJestConfig = {
testPathIgnorePatterns: ['/dist/'],
// transformIgnorePatterns: ['node_modules/(?!@utrecht/web-component-library-react)'],
moduleNameMapper: {
'^@utrecht/(.*)$': '<rootDir>/packages/$1/src/',
// '^@utrecht/(.*)$': '<rootDir>/packages/$1/src/',
},
};

Expand Down
11 changes: 6 additions & 5 deletions packages/component-library-react/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -69,16 +69,16 @@
"@utrecht/badge-status-css": "workspace:*",
"@utrecht/blockquote-css": "workspace:*",
"@utrecht/breadcrumb-nav-css": "workspace:*",
"@utrecht/button-react": "workspace:*",
"@utrecht/button-group-css": "workspace:*",
"@utrecht/button-link-css": "workspace:*",
"@utrecht/button-react": "workspace:*",
"@utrecht/calendar-react": "workspace:*",
"@utrecht/checkbox-css": "workspace:*",
"@utrecht/code-block-css": "workspace:*",
"@utrecht/code-css": "workspace:*",
"@utrecht/color-sample-css": "workspace:*",
"@utrecht/column-layout-css": "workspace:*",
"@utrecht/combobox-css": "workspace:*",
"@utrecht/combobox-react": "workspace:*",
"@utrecht/currency-data-css": "workspace:*",
"@utrecht/custom-checkbox-css": "workspace:*",
"@utrecht/data-list-css": "workspace:*",
Expand All @@ -89,11 +89,11 @@
"@utrecht/emphasis-css": "workspace:*",
"@utrecht/figure-css": "workspace:*",
"@utrecht/focus-ring-css": "workspace:*",
"@utrecht/form-field-css": "workspace:*",
"@utrecht/form-field-react": "workspace:*",
"@utrecht/form-field-description-css": "workspace:*",
"@utrecht/form-field-error-message-css": "workspace:*",
"@utrecht/form-fieldset-css": "workspace:*",
"@utrecht/form-label-css": "workspace:*",
"@utrecht/form-label-react": "workspace:*",
"@utrecht/form-toggle-css": "workspace:*",
"@utrecht/heading-1-css": "workspace:*",
"@utrecht/heading-2-css": "workspace:*",
Expand All @@ -113,6 +113,7 @@
"@utrecht/link-social-css": "workspace:*",
"@utrecht/list-social-css": "workspace:*",
"@utrecht/listbox-css": "workspace:*",
"@utrecht/listbox-react": "workspace:*",
"@utrecht/logo-button-css": "workspace:*",
"@utrecht/logo-css": "workspace:*",
"@utrecht/logo-image-css": "workspace:*",
Expand Down Expand Up @@ -142,7 +143,7 @@
"@utrecht/surface-css": "workspace:*",
"@utrecht/table-css": "workspace:*",
"@utrecht/textarea-css": "workspace:*",
"@utrecht/textbox-css": "workspace:*",
"@utrecht/textbox-react": "workspace:*",
"@utrecht/top-task-link-css": "workspace:*",
"@utrecht/top-task-nav-css": "workspace:*",
"@utrecht/unordered-list-css": "workspace:*",
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
import { createJestConfig } from '../../jest-component.config.mjs';

export default createJestConfig(import.meta.url);
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
{
"version": "1.0.0",
"author": "Community for NL Design System",
"description": "Button component for the Municipality of Utrecht based on the NL Design System architecture",
"license": "EUPL-1.2",
"name": "@utrecht/combobox-react",
"main": "./dist/index.cjs.js",
"module": "./dist/index.esm.js",
"types": "./dist/index.d.ts",
"files": [
"dist/",
"src/"
],
"sideEffects": false,
"scripts": {
"build": "rollup -c ./rollup.config.mjs",
"clean": "rimraf dist",
"test": "mkdir -p pages && NODE_OPTIONS=--experimental-vm-modules jest --coverage --verbose"
},
"devDependencies": {
"@utrecht/combobox-css": "workspace:*",
"@utrecht/textbox-react": "workspace:*",
"@utrecht/listbox-react": "workspace:*",
"@utrecht/form-label-react": "workspace:*",
"@utrecht/form-field-react": "workspace:*",
"@utrecht/button-react": "workspace:*",
"jest": "29.7.0",
"rollup": "4.18.0"
},
"keywords": [
"nl-design-system"
],
"publishConfig": {
"access": "public"
},
"repository": {
"type": "git+ssh",
"url": "[email protected]:nl-design-system/utrecht.git",
"directory": "packages/component-library-react/packages/combobox-react"
},
"peerDependencies": {
"@babel/runtime": "^7.23.6",
"react": "18",
"react-dom": "18"
},
"dependencies": {
"downshift": "9.0.8"
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
import { createComponentPackageConfig } from '../../rollup-component-package.mjs';

export default createComponentPackageConfig(import.meta.url);
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
/**
* @license EUPL-1.2
* Copyright (c) 2020-2025 Frameless B.V.
* Copyright (c) 2021-2025 Gemeente Utrecht
*/

import '@utrecht/combobox-css/src/index.scss';

export * from './index';
Loading

0 comments on commit 872d072

Please sign in to comment.