Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: Tabs are now non-js compliant #506

Merged
merged 2 commits into from
Jul 14, 2023
Merged

feat: Tabs are now non-js compliant #506

merged 2 commits into from
Jul 14, 2023

Conversation

sri-viswanathan
Copy link
Collaborator

@sri-viswanathan sri-viswanathan commented May 30, 2023 •
edited
Loading

  • Add a specific class to tab panels when JS is disabled and use the :target CSS pseudoclass to show and hide content
  • In Tab.tsx, replace id with data-tab-id as this was creating duplicate IDs on the page, i.e., both the tab and the tabpanel had the same value for the id attribute
  • Update the example project to use React 18's ReactDOM.createRoot instead of ReactDOM.render

@sri-viswanathan sri-viswanathan added the enhancement New feature or request label May 30, 2023
@sri-viswanathan sri-viswanathan added this to the 0.8 milestone May 30, 2023
@sri-viswanathan sri-viswanathan self-assigned this May 30, 2023
@codecov-commenter
Copy link

codecov-commenter commented May 30, 2023 •
edited
Loading

Codecov Report

Patch coverage: 100.00% and no project coverage change.

Comparison is base (5200564) 100.00% compared to head (b4b0989) 100.00%.

❗ Your organization is not using the GitHub App Integration. As a result you may experience degraded service beginning May 15th. Please install the Github App Integration for your organization. Read more.

Additional details and impacted files 
@@              Coverage Diff              @@
##           release/0.8      #506   +/-   ##
=============================================
  Coverage       100.00%   100.00%           
=============================================
  Files               67        67           
  Lines             1239      1240    +1     
  Branches           460       458    -2     
=============================================
+ Hits              1239      1240    +1
Impacted Files Coverage Δ
src/tabGroup/TabGroup.tsx 100.00% <100.00%> (ø)
src/tabGroup/components/Tab.tsx 100.00% <100.00%> (ø)

☔ View full report in Codecov by Sentry.
📢 Do you have feedback about the report comment? Let us know in this issue.

@daniele-zurico daniele-zurico removed this from the 0.8 milestone Jun 20, 2023
@Ibabalola
Copy link
Contributor

Hi, The Tab Component from dcx-library is not working in non-JS mode. In non-JS it is only showing the first tab content whereas we need all the content from all the tabs.

Ibabalola
Ibabalola requested changes Jun 27, 2023
View reviewed changes
Copy link
Contributor

@Ibabalola Ibabalola left a comment •
edited by daniele-zurico
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi @sri-viswanathan, The Tab Component from dcx-library is not working in non-JS mode. In non-JS it is only showing the first tab content whereas we need all the content from all the tabs.
https://design-system.service.gov.uk/components/tabs/default/index.html (disable js in the browser)

@sri-viswanathan
Copy link
Collaborator Author

Hi @Ibabalola , ah, I see. I deliberately did it that way (i.e. displaying only the content for the active tab) but am happy to make the change to display the content for all tabs when JS is disabled. Apart from that, can you please confirm that the right content displays when you click on different tabs with JS disabled or are you seeing only the first tab's content regardless of which tab you click?

@sri-viswanathan
Copy link
Collaborator Author

Also @daniele-zurico , please can you confirm that release 0.8.0-rc1 contains the code from this PR? The anchor tags for the tabs should have a new attribute called data-tab-id but I don't see that attribute when I use 0.8.0-rc1.

@daniele-zurico daniele-zurico merged commit e864db9 into release/0.8 Jul 14, 2023
daniele-zurico added a commit that referenced this pull request Sep 15, 2023
@daniele-zurico @peter-uzor-capgem
@aismaelcap @Ibabalola @JadhavJeet @byohannes @KavithaKurella @kavithakurella-dev @Ahmet-K @yunusfirat @nikkialgar @cg-mmirca @sri-viswanathan @jgonza16 @SOUNDAR-A
Release/0.8 (#528)
bbb7778 
* [Design-System-FormSelect] Build the design system for the FormSelect component (#421)

* feat: add design system

* feat: fix conflicts

* feat: final push

* feat: final push

* feat: revert some bad merge

* feat: revert some bad merge

* feat: add chromatic build

* Feature/sb 0.7 (#474)

* feat: migrating sb to 7

* feat: add the Button stories

* feat: add charactercount to v7

* feat: add checkboxgroup to v7

* feat: add radiogroup to v7

* feat: add radiogroup to v7

* feat: add toggle to v7

* feat: add tooltip to v7

* feat: add range to v7

* feat: add multiUpload to v7

* feat: add select to v7

* feat: add multiselect to v7

* feat: add input to v7

* feat: add inputMask to v7

* feat: autocomplete to v7

* feat: autocomplete to v7

* feat: tabs to v7

* feat: details to v7

* feat: table to v7

* feat: fix live edit version (#476)

* feat: cleanup example deps (#478)

* Bug/autocomplete keydown scroll (#472)

* BugFix: Autocomplete doesn't auto scroll for filtered list on keydown

* Fixed Linting and test issues

* Added Test and Refactered

* feat: fix the documentation

* feat: fix the documentation

---------

Co-authored-by: Zurico.Daniele_DEFRA <daniele.zurico@gmail.com>

* feat: remove controls (#481)

* Feature/heading (#482)

* Implement <Heading> component

* lint fixes

* give better description to what Header component does in docs

* refactor Heading Component to make less verbose

* refactor ClassBased and create Headings for all levels

* add specific testing

* lint fix

* make className and id optional

* Update src/heading/Heading.tsx

Co-authored-by: Isaac Babalola <Ibabalola@users.noreply.github.com>

* Update src/heading/__test__/Heading.test.tsx

* Update src/heading/__test__/Heading.test.tsx

* fix: resolving heading issues

* fix: resolving heading issues

* update docs

---------

Co-authored-by: aismaelcap <aismael@aismaels-MacBook-Pro.local>
Co-authored-by: Daniele Zurico <daniele.zurico@gmail.com>
Co-authored-by: Isaac Babalola <Ibabalola@users.noreply.github.com>
Co-authored-by: Isaac Babalola <info@isaacbabalola.co.uk>

* fix: heading component (#489)

* Feature/label (#483)

* Button demo test

* Created Label component

* added return statement

* dcx-label embeded class updated

* removed return statement

* resolved all issues and added classbased stories

* dcx-label, value mandatory field, govuk-label

* added Typography for stories

* Add new properties to the button component developer specified class name and a variant (#490)

* Add new properties to the button component developer specified class name and a variant

* resolve PR comment to cover developer specifiedclass name

* Update src/button/Button.tsx

Co-authored-by: Isaac Babalola <Ibabalola@users.noreply.github.com>

* feat: make the code more dynamic

* feat: add in the doc

* feat: add in the doc

* feat: add in the doc

* resolve PR comment to simplify code and get it more readable

---------

Co-authored-by: Berhane Yohannes <berhane.yohannes@capgemini.com>
Co-authored-by: Daniele Zurico <daniele.zurico@gmail.com>
Co-authored-by: Isaac Babalola <Ibabalola@users.noreply.github.com>

* feat: remove duplicated story (#493)

* Feature/link (#494)

* created link component

* Link component demo and stories

* added new test case, added govuk-link css

* added styles for link component

* InsertTextComponent (#491)

* InsertTextComponent

* resolved pr comments

* InsertTextComponent

* resolved pr comments

* resolved changes

* feat: improve documentation

* feat: improve documentation

---------

Co-authored-by: kavithakurella-dev <132873865+kavithakurella-dev@users.noreply.github.com>
Co-authored-by: Zurico.Daniele_DEFRA <daniele.zurico@gmail.com>

* Feature/autocomplete update value (#496)

* fix: {{ Autocomplete component - changing defaultValue prop has no affect }}

* test: {{When defaultValue prop is changed, Autocomplete component updates. }}

* test: {{Test updated with dom manipulation rather than re-rendering and fix has been commented out to intentionally see test failing}}

* test: {{Now, uncommented the fix and verify that the test passes as intended}}

* Feature/paragraph (#479)

* feature/paragraph

* paragraph doc and test

* Update src/paragraph/Paragraph.tsx

Co-authored-by: Daniele Zurico <daniele.zurico@gmail.com>

* adressing pr comments.

* update stories.

* added more attribute.

* new comments has been resolved.

* paragraph live has been also updated.

* files has been updated.

* feat: update test for Heading

* feat: update story

---------

Co-authored-by: Daniele Zurico <daniele.zurico@gmail.com>

* KeyboardInput Component (#504)

* KeyboardInput Component

* KeyboardInput

* KeyboardInput

* Commponent

* KeyboardInput

* feat: minor fix

---------

Co-authored-by: kavithakurella-dev <132873865+kavithakurella-dev@users.noreply.github.com>
Co-authored-by: Zurico.Daniele_DEFRA <daniele.zurico@gmail.com>

* feature/blockquote (#505)

* feature/blockquote

* some more changes.

* block quote component update.

* update previewjs

* intendation.

* test file name test

* test file

* tsx

* blockquote file

* delete quote file

* blockquote file.

* delete blockquotelive

* blockquoutelive

* some comments has been fixed.

* footer type has been made optional.

* props type has been changed.

* test has been updated.

* documentation fix and styled class based component

* deleted unstyled class based story.

* styled with classname

* feat: upgrade storybook and minor refactor

---------

Co-authored-by: Zurico.Daniele_DEFRA <daniele.zurico@gmail.com>

* create a list component (#495)

* folder structure and test case scenarios added

* files named changed from listitem to list

* Added required test cases

* added comments and updated code

* code improvements

* List compo mandatory for ListItem compo

* code modifications

* code improvements

* feat: add value

* feat: add value

* feat: refactor list

* feat: refactor list

* added 3 new props

* feat: fix props

* feat: fix props

* new test cases and stories added

* added styling

* code improvements

* MarkerTypes seperated

* added new style file for classbased.stories

---------

Co-authored-by: Zurico.Daniele_DEFRA <daniele.zurico@gmail.com>

* expose and document the hook useHydrated  (#510)

* expose the function clientOnly for client side rendering

* document the function clientOnly for client side rendering

* document useHydrated and create its own unit test file

---------

Co-authored-by: Berhane Yohannes <berhane.yohannes@capgemini.com>

* Highlight Component (#509)

* feat: {{ Highlight component }}

* test: {{ Adding unit tests for Highlight component }}

* feat: {{ Tweaking Highlight component and test }}

* feat: {{ Fixing storybook preview }}

* feat: {{ Adding Demo, Storybook docs and live demo for Highlight Component }}

* feat: {{ Tweaking  Demo, Storybook docs and live demo }}

* feat: {{ Tidy up }}

* feat: {{ Modify to allow <Highlight>highlighted text </Highlight> usage without text prop }}

* feat: {{ Removing commented out }}

* feat: {{ Replacing HTMLQuoteElement with HTMLElement }}

* feat: {{ Simplfying rendered function in class based stories and adding custom styling }}

* feature/abbreviate (#512)

* PreformattedText component (#511)

* PreformattedText component

* PreformattedText

* PreformattedText comments

* Resolved

* setting.json resolved

---------

Co-authored-by: kavithakurella-dev <132873865+kavithakurella-dev@users.noreply.github.com>

* Breadcrumbs components (#508)

* Breadcrumbs components

* Added stories

* Added official govuk style file

* selected item

* added separator functionality

* improved separator

* final

* storybook order

* feature/code (#507)

* feature/code

* text replaced with value.

* code componets has been resolved as suggested.

* Fix: CharacterCount component not resetting red error text after valid input (#471)

* fix: charactercount component not resetting red error text after valid input

* fix: the character count component error message returns to default after the text area is cleared

---------

Co-authored-by: Nikki Algar <nikki.algar@digital.homeoffice.gov.uk>
Co-authored-by: Berhane Yohannes <berhane.yohannes@capgemini.com>

* Label Design System (#515)

* Label Design System

* Playground

* comments resolved and added accessible page

* Proper css for Label added and Dark theme added

* feat: improve label color contrast on accesible and dark theme

---------

Co-authored-by: mmirca <marius.mirca@capgemini.com>

* Feature/ds-paragraph (#514)

* feature/ds-paragraph

---------

Co-authored-by: mmirca <marius.mirca@capgemini.com>

* feat: Tabs are now non-js compliant (#506)

* feat: Tabs are now non-js compliant
---------

Co-authored-by: Zurico.Daniele_DEFRA <daniele.zurico@gmail.com>

* Insert designing (#516)

* Design InsertText
---------

Co-authored-by: kavithakurella-dev <132873865+kavithakurella-dev@users.noreply.github.com>
Co-authored-by: mmirca <marius.mirca@capgemini.com>

* feat: add button tokens (#520)

* feat: add list item design system styles (#519)

* feat: add heading design system styles (#521)

* Feature/bot upgrade libs (#525)

* feat: upgrade libraries

* Feature/release notes (#527)

* feat: update release notes

* feat: update release notes

* feat: upgrade to 0.8.0

---------

Co-authored-by: peter-uzor-capgem <120393762+peter-uzor-capgem@users.noreply.github.com>
Co-authored-by: aismaelcap <121889403+aismaelcap@users.noreply.github.com>
Co-authored-by: aismaelcap <aismael@aismaels-MacBook-Pro.local>
Co-authored-by: Isaac Babalola <Ibabalola@users.noreply.github.com>
Co-authored-by: Isaac Babalola <info@isaacbabalola.co.uk>
Co-authored-by: JadhavJeet <100856152+JadhavJeet@users.noreply.github.com>
Co-authored-by: Berhane Yohannes <42332389+byohannes@users.noreply.github.com>
Co-authored-by: Berhane Yohannes <berhane.yohannes@capgemini.com>
Co-authored-by: KavithaKurella <122851121+KavithaKurella@users.noreply.github.com>
Co-authored-by: kavithakurella-dev <132873865+kavithakurella-dev@users.noreply.github.com>
Co-authored-by: Ahmet <45479018+Ahmet-K@users.noreply.github.com>
Co-authored-by: Yunus FIRAT <yunusfirat44@gmail.com>
Co-authored-by: Nikki Algar <nikki.algar@capgemini.com>
Co-authored-by: Nikki Algar <nikki.algar@digital.homeoffice.gov.uk>
Co-authored-by: mmirca <marius.mirca@capgemini.com>
Co-authored-by: Sri Viswanathan <sri@protodiv.com>
Co-authored-by: jgonza16 <93665374+jgonza16@users.noreply.github.com>
Co-authored-by: SOUNDAR-A <138137507+SOUNDAR-A@users.noreply.github.com>
@daniele-zurico daniele-zurico deleted the feature/tabs-non-js branch March 14, 2024 11:52
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@daniele-zurico daniele-zurico daniele-zurico approved these changes

@Ibabalola Ibabalola Ibabalola approved these changes

Assignees

@sri-viswanathan sri-viswanathan

Labels
enhancement New feature or request ready to merge
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

None yet
4 participants
@sri-viswanathan @codecov-commenter @Ibabalola @daniele-zurico