Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Feature/pxweb2 55 add variable box component (#138)
* Add generated files for the VariableBox component PXWEB2-55 Since we want all components to have the same basic starting point, we need to use the Nx generator for React components, to generate the files. No functionality added yet. * Add variablebox to main app * Feature/pxweb2 155 use common text styles for bodylong and link (#108) * PXWEB2-155 Moved text-styles to comm text-style file. Added property for classname * PXWEB2-155 Made separate classes for bold/regular. Easier to compare for designer. * PXWEB2-155 use common text-styles for link and use bodyshort as class in link as in Figma * PXWEB2-155 Removed commented out code * PXWEB2-155 Removed commented out text * PXWEB2-55 Add ability to pass styling into Heading Since we in the VariableBox component need to pass some styling into the Heading component, it needs to be able to add said styling to it's own. Without this it would just overwrite the styling of the Heading component. * PXWEB2-55 Add early VariableBox component Adds the files for the VariableBox component, adds the component to the examples app page. This is missing the entire Content part of the component, but the styling of the Header part is done, as a first version atleast. * Fix warnings in example app Since we don't want unnecessary warnings and such cluttering the dev experiance in the browser, we should do easy fixes for warnings. Even if the site in question is a temporary one. This fixes some warnings that were clutting the console and dev tools. PS: My first attempt at commiting a chunk of a file, instead of the whole file. Hopefully it works. * Fix CSS variables * PXWEB2-55 Update translation files Since we want the new components to use the translation files, so we don't have to add that later, we need to update the keys in said files. This also adds the translations needed for the VariableBox for en, no, sv and ar. Though the translations were gotten from google translate where I did not know the language. * Clean up CSS, still WIP * Add first logic for rendering checkboxes * Add number formatting to header values * Add hover css * Change when select all is shown * Add padding to show background in wrapper * Added initial docs * Added netlify badge in footer template * Create doc-site.yml Added a workflow to build and deploy the documentation to GitHub Pages * Removed netlify badge * Restored previouse change and removed netlify badge * Bump actions/setup-node from 3 to 4 (#114) Bumps [actions/setup-node](https://github.com/actions/setup-node) from 3 to 4. - [Release notes](https://github.com/actions/setup-node/releases) - [Commits](actions/setup-node@v3...v4) --- updated-dependencies: - dependency-name: actions/setup-node dependency-type: direct:production update-type: version-update:semver-major ... Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * Bump actions/checkout from 3 to 4 (#115) Bumps [actions/checkout](https://github.com/actions/checkout) from 3 to 4. - [Release notes](https://github.com/actions/checkout/releases) - [Changelog](https://github.com/actions/checkout/blob/main/CHANGELOG.md) - [Commits](actions/checkout@v3...v4) --- updated-dependencies: - dependency-name: actions/checkout dependency-type: direct:production update-type: version-update:semver-major ... Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * Update dependencies Since we want to keep the dependencies in the project up-to-date, we need to update the outdated ones. This updates them with the 'migrate latest' command from Nx, and then with the normal 'update --save' from NPM. Also add a blank space to a readme in the ui lib, to force chromatic to build, to check for regressions. * Added Select component * Possible to add css classes to Button component from the code using the component * Possible to add css classes to BodyShort component from the code using the component * Use common text styles * Replaced alerts with console.log to work also with Safari * Added onChange event and some minor CSS changes * Updated tests and stories with onChange event * Code refactoring and css changes * Use outline instead of border * Removed ariaLabelButton since Button is no longer used * Added tabindex and possibility to use keyboard * Moved divider border to a separate div * Separated own includes from external * WIP: Started working on select, need to update from main to continue * Pxweb2 100 config (#117) Added config that can be changed before and after build. Added config validation with JSON schema, validated on localhost with ajv (this supports validation for config changes after build as well) Added config types Used config in language config Made sure config is loaded before app Config is available anywhere in the app via getConfig() * Refactor Select into 2 sub-components (#119) To get rid of an extra div that the Select component returns, it has been refactored into being 2 sub components for the variants, instead of 2 functions. Nothing has been done to the logic outside of this. * Add mapping over codelists for select * Fix typo in setAllValuesSelected * PXWEB2-55 Improve select with translations Add translations to the label/title of the select component in the variablebox component. Also fix the styling of the select, it should now correctly take the entire width instead of only as much as is needed. Also formatted app.tsx. * Add generated files for the VariableBox component PXWEB2-55 Since we want all components to have the same basic starting point, we need to use the Nx generator for React components, to generate the files. No functionality added yet. * Add variablebox to main app * PXWEB2-55 Add ability to pass styling into Heading Since we in the VariableBox component need to pass some styling into the Heading component, it needs to be able to add said styling to it's own. Without this it would just overwrite the styling of the Heading component. * PXWEB2-55 Add early VariableBox component Adds the files for the VariableBox component, adds the component to the examples app page. This is missing the entire Content part of the component, but the styling of the Header part is done, as a first version atleast. * Fix warnings in example app Since we don't want unnecessary warnings and such cluttering the dev experiance in the browser, we should do easy fixes for warnings. Even if the site in question is a temporary one. This fixes some warnings that were clutting the console and dev tools. PS: My first attempt at commiting a chunk of a file, instead of the whole file. Hopefully it works. * Fix CSS variables * PXWEB2-55 Update translation files Since we want the new components to use the translation files, so we don't have to add that later, we need to update the keys in said files. This also adds the translations needed for the VariableBox for en, no, sv and ar. Though the translations were gotten from google translate where I did not know the language. * Clean up CSS, still WIP * Add first logic for rendering checkboxes * Add number formatting to header values * Add hover css * Change when select all is shown * Add padding to show background in wrapper * WIP: Started working on select, need to update from main to continue * Add mapping over codelists for select * Fix typo in setAllValuesSelected * PXWEB2-55 Improve select with translations Add translations to the label/title of the select component in the variablebox component. Also fix the styling of the select, it should now correctly take the entire width instead of only as much as is needed. Also formatted app.tsx. * Add Search component with some modifications * Fix Select background in variablebox * Fix checkboxes length * Fix for bottom of outline of Select disappearing * Fix hover and keyboard nav highlighting Since we want a good experience when using the entire site with a keyboard, we need to have good navigation and highlighting for this. This changes the VariableBox to not use the Button component, but instead uses the Icon component directly and styles it based on hover and focus etc. TabIndex was also added to enable keyboard navigation to the komponent Header, so one can activate it. It opens/closes when using the Enter and Space keys. The current state of showing that the focus is on the Header component might not be enough, so will bring this up with the designer. * Fix focus styling in VB: select+checkbox * Add generated files for the VariableBox component PXWEB2-55 Since we want all components to have the same basic starting point, we need to use the Nx generator for React components, to generate the files. No functionality added yet. * Add variablebox to main app * PXWEB2-55 Add ability to pass styling into Heading Since we in the VariableBox component need to pass some styling into the Heading component, it needs to be able to add said styling to it's own. Without this it would just overwrite the styling of the Heading component. * PXWEB2-55 Add early VariableBox component Adds the files for the VariableBox component, adds the component to the examples app page. This is missing the entire Content part of the component, but the styling of the Header part is done, as a first version atleast. * Fix CSS variables * PXWEB2-55 Update translation files Since we want the new components to use the translation files, so we don't have to add that later, we need to update the keys in said files. This also adds the translations needed for the VariableBox for en, no, sv and ar. Though the translations were gotten from google translate where I did not know the language. * Clean up CSS, still WIP * Add first logic for rendering checkboxes * Add number formatting to header values * Add hover css * Change when select all is shown * Add padding to show background in wrapper * Added Select component * Code refactoring and css changes * Moved divider border to a separate div * WIP: Started working on select, need to update from main to continue * Add mapping over codelists for select * Fix typo in setAllValuesSelected * PXWEB2-55 Improve select with translations Add translations to the label/title of the select component in the variablebox component. Also fix the styling of the select, it should now correctly take the entire width instead of only as much as is needed. Also formatted app.tsx. * PXWEB2-55 Add early VariableBox component Adds the files for the VariableBox component, adds the component to the examples app page. This is missing the entire Content part of the component, but the styling of the Header part is done, as a first version atleast. * Add hover css * WIP: Started working on select, need to update from main to continue * PXWEB2-55 Improve select with translations Add translations to the label/title of the select component in the variablebox component. Also fix the styling of the select, it should now correctly take the entire width instead of only as much as is needed. Also formatted app.tsx. * Add Search component with some modifications * Fix Select background in variablebox * Fix checkboxes length * Fix for bottom of outline of Select disappearing * Fix hover and keyboard nav highlighting Since we want a good experience when using the entire site with a keyboard, we need to have good navigation and highlighting for this. This changes the VariableBox to not use the Button component, but instead uses the Icon component directly and styles it based on hover and focus etc. TabIndex was also added to enable keyboard navigation to the komponent Header, so one can activate it. It opens/closes when using the Enter and Space keys. The current state of showing that the focus is on the Header component might not be enough, so will bring this up with the designer. * Fix focus styling in VB: select+checkbox * Fix color for checkbox focus after merge * Fix VB usage of Select after branch update * Add scroll logic to the variablebox's values list Since we want a show/hide logic when scrolling in the valueslists of a variablebox, we need to add the logic for this. Also had to expand on the MixedCheckbox to add a background when used in the variablebox. * Improve show/hide of search and selectall in VB * Fix show/hide in VB-values-list * Add TODO about simplifying the scrolling animations * Refactor VariableBox into sub components * Fix section comment in scss * Fix the current test for VariableBox * Format Variablebox test file * Fix typing of state for mixed checkbox text * Fix typo in variable name in story --------- Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: PerIngeVaaje <[email protected]> Co-authored-by: petroslikidis <[email protected]> Co-authored-by: likp <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: MikaelNordberg <[email protected]> Co-authored-by: Michael Pande <[email protected]>
- Loading branch information
7 people
authored
May 7, 2024
1 parent
f41e810
commit e006141