diff --git a/app/assets/javascripts/assets.js.erb b/app/assets/javascripts/assets.js.erb index 04092747016..b4caff43d59 100644 --- a/app/assets/javascripts/assets.js.erb +++ b/app/assets/javascripts/assets.js.erb @@ -3,9 +3,6 @@ window.LoginGov.assets = {}; <% keys = [ 'clock.svg', - 'plus.svg', - 'minus.svg', - 'up-carat-thin.svg', 'close-white-alt.svg' ] %> diff --git a/app/assets/javascripts/i18n-strings.js.erb b/app/assets/javascripts/i18n-strings.js.erb index 06a73619184..8edcb8d550a 100644 --- a/app/assets/javascripts/i18n-strings.js.erb +++ b/app/assets/javascripts/i18n-strings.js.erb @@ -54,19 +54,7 @@ window.LoginGov = window.LoginGov || {}; 'doc_auth.forms.choose_file', 'doc_auth.headings.upload_front', 'doc_auth.headings.upload_back', - 'image_description.accordian_plus_buttom', - 'image_description.accordian_minus_buttom', - 'users.personal_key.close', - 'doc_auth.tips.title', - 'doc_auth.tips.title_more', - 'doc_auth.tips.header_text', - 'doc_auth.tips.text1', - 'doc_auth.tips.text2', - 'doc_auth.tips.text3', - 'doc_auth.tips.text4', - 'doc_auth.tips.text5', - 'doc_auth.tips.text6', - 'doc_auth.tips.text7' + 'users.personal_key.close' ] %> window.LoginGov.I18n = { diff --git a/app/assets/stylesheets/components/_accordion.scss b/app/assets/stylesheets/components/_accordion.scss deleted file mode 100644 index 3a59a7e044c..00000000000 --- a/app/assets/stylesheets/components/_accordion.scss +++ /dev/null @@ -1,87 +0,0 @@ -.no-js { - .accordion { - .accordion-header { - cursor: initial; - } - - .accordion-footer { - display: none; - } - - .accordion-content { - display: block; - } - - [class*="btn-"] { - display: none; - } - } -} - -.accordion { - border: $border-width solid $border-color; - border-radius: $border-radius-md; - - .accordion-header { - color: $blue; - cursor: pointer; - position: relative; - - img { - position: absolute; - right: 1rem; - top: .8rem; - } - } - - .accordion-content { - border-top: $border-width solid $border-color; - display: none; - opacity: 1; - - &.shown { - display: block; - } - } - - .accordion-footer { - background-color: $blue-lightest; - border-top: $border-width solid $border-color; - color: $blue; - cursor: pointer; - text-align: center; - - img { - margin-top: -2px; - vertical-align: middle; - } - } -} - -.animate-in { - animation: accordionIn .2s normal ease-in both 1; -} - -.animate-out { - animation: accordionOut .15s normal ease-out both 1; -} - -@keyframes accordionIn { - 0% { - opacity: 0; - } - - 100% { - opacity: 1; - } -} - -@keyframes accordionOut { - 0% { - opacity: 1; - } - - 100% { - opacity: 0; - } -} diff --git a/app/assets/stylesheets/components/all.scss b/app/assets/stylesheets/components/all.scss index 53ca150d641..b7c60ad8f45 100644 --- a/app/assets/stylesheets/components/all.scss +++ b/app/assets/stylesheets/components/all.scss @@ -21,7 +21,6 @@ @import 'personal-key'; @import 'position'; @import 'tooltip'; -@import 'accordion'; @import 'util'; @import 'verification-badge'; @import 'spinner'; diff --git a/app/assets/stylesheets/print.scss b/app/assets/stylesheets/print.scss index e00e7e995e3..d6f4032bbe1 100644 --- a/app/assets/stylesheets/print.scss +++ b/app/assets/stylesheets/print.scss @@ -3,8 +3,7 @@ footer, .btn, .btn-border, - .ico, - .accordion { + .ico { display: none; } } diff --git a/app/helpers/accordion_helper.rb b/app/helpers/accordion_helper.rb index 99520f6dc2d..d744472420f 100644 --- a/app/helpers/accordion_helper.rb +++ b/app/helpers/accordion_helper.rb @@ -1,5 +1,5 @@ module AccordionHelper - # Options hash values: wrapper_css, hide_header, hide_close_link + # Options hash values: heading_level, hide_close_link def accordion(target_id, header_text, options = {}, &block) locals = { target_id: target_id, diff --git a/app/javascript/app/components/accordion.js b/app/javascript/app/components/accordion.js deleted file mode 100644 index 186ddd19985..00000000000 --- a/app/javascript/app/components/accordion.js +++ /dev/null @@ -1,98 +0,0 @@ -import 'classlist.js'; -import Events from '../utils/events'; - -class Accordion extends Events { - constructor(el) { - super(); - - this.el = el; - this.controls = [].slice.call(el.querySelectorAll('[aria-controls]')); - this.content = el.querySelector('.accordion-content'); - this.header = el.querySelector('.accordion-header-controls'); - this.collapsedIcon = el.querySelector('.plus-icon'); - this.shownIcon = el.querySelector('.minus-icon'); - - this.handleClick = this.handleClick.bind(this); - this.handleKeyUp = this.handleKeyUp.bind(this); - } - - setup() { - if (!this.isInitialized()) { - this.bindEvents(); - this.onInitialize(); - } - } - - bindEvents() { - this.controls.forEach((control) => { - control.addEventListener('click', this.handleClick); - control.addEventListener('keyup', this.handleKeyUp); - }); - - if (!('animation' in this.content.style)) return; - - this.content.addEventListener('animationend', (event) => { - const { animationName } = event; - - if (animationName === 'accordionOut') { - this.content.classList.remove('shown'); - } - }); - } - - onInitialize() { - this.setExpanded(false); - this.collapsedIcon.classList.remove('display-none'); - this.el.setAttribute('data-initialized', ''); - } - - isInitialized() { - return this.el.hasAttribute('data-initialized'); - } - - handleClick() { - const expandedState = this.header.getAttribute('aria-expanded'); - - if (expandedState === 'false') { - this.open(); - } else if (expandedState === 'true') { - this.close(); - } - } - - handleKeyUp(event) { - const keyCode = event.keyCode || event.which; - - if (keyCode === 13 || keyCode === 32) { - this.handleClick(); - } - } - - setExpanded(bool) { - this.header.setAttribute('aria-expanded', bool); - } - - open() { - this.setExpanded(true); - this.collapsedIcon.classList.add('display-none'); - this.shownIcon.classList.remove('display-none'); - this.content.classList.add('shown'); - this.content.classList.remove('animate-out'); - this.content.classList.add('animate-in'); - this.content.setAttribute('aria-hidden', 'false'); - this.emit('accordion.show'); - } - - close() { - this.setExpanded(false); - this.collapsedIcon.classList.remove('display-none'); - this.shownIcon.classList.add('display-none'); - this.content.classList.remove('animate-in'); - this.content.classList.add('animate-out'); - this.content.setAttribute('aria-hidden', 'true'); - this.emit('accordion.hide'); - this.header.focus(); - } -} - -export default Accordion; diff --git a/app/javascript/app/components/index.js b/app/javascript/app/components/index.js index 20a2b357f31..69c77cfcefb 100644 --- a/app/javascript/app/components/index.js +++ b/app/javascript/app/components/index.js @@ -1,6 +1,5 @@ import focusTrapProxy from './focus-trap-proxy'; import modal from './modal'; -import Accordion from './accordion'; window.LoginGov = window.LoginGov || {}; const { LoginGov } = window; @@ -8,15 +7,4 @@ const trapModal = modal(focusTrapProxy); LoginGov.Modal = trapModal; -document.addEventListener('DOMContentLoaded', () => { - const elements = document.querySelectorAll('.accordion'); - - LoginGov.accordions = [].slice.call(elements).map((element) => { - const accordion = new Accordion(element); - accordion.setup(); - - return accordion; - }); -}); - export { trapModal as Modal }; diff --git a/app/javascript/app/document-capture/components/accordion.jsx b/app/javascript/app/document-capture/components/accordion.jsx deleted file mode 100644 index daa852459b3..00000000000 --- a/app/javascript/app/document-capture/components/accordion.jsx +++ /dev/null @@ -1,70 +0,0 @@ -import React, { useEffect, useRef, useMemo } from 'react'; -import PropTypes from 'prop-types'; -import BaseAccordion from '../../components/accordion'; -import useI18n from '../hooks/use-i18n'; -import Image from './image'; - -function Accordion({ title, children }) { - const elementRef = useRef(null); - const instanceId = useMemo(() => { - Accordion.instances += 1; - return Accordion.instances; - }, []); - const t = useI18n(); - useEffect(() => { - new BaseAccordion(elementRef.current).setup(); - }, []); - - const contentId = `accordion-content-${instanceId}`; - - return ( -
-
- -
- -
- ); -} - -Accordion.instances = 0; - -Accordion.propTypes = { - title: PropTypes.node.isRequired, - children: PropTypes.node.isRequired, -}; - -export default Accordion; diff --git a/app/javascript/app/document-capture/components/document-tips.jsx b/app/javascript/app/document-capture/components/document-tips.jsx deleted file mode 100644 index 07f0fe5c684..00000000000 --- a/app/javascript/app/document-capture/components/document-tips.jsx +++ /dev/null @@ -1,41 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import Accordion from './accordion'; -import useI18n from '../hooks/use-i18n'; - -function DocumentTips({ sample }) { - const t = useI18n(); - - const title = ( - <> - {t('doc_auth.tips.title')} - {` ${t('doc_auth.tips.title_more')}`} - - ); - - return ( - - {t('doc_auth.tips.header_text')} - - {!!sample &&
{sample}
} - - ); -} - -DocumentTips.propTypes = { - sample: PropTypes.node, -}; - -DocumentTips.defaultProps = { - sample: null, -}; - -export default DocumentTips; diff --git a/app/views/idv/doc_auth/back_image.html.erb b/app/views/idv/doc_auth/back_image.html.erb index 6d8a0291be9..b6d602c432d 100644 --- a/app/views/idv/doc_auth/back_image.html.erb +++ b/app/views/idv/doc_auth/back_image.html.erb @@ -8,8 +8,7 @@ <%= t('doc_auth.headings.upload_back') %> -<%= accordion('totp-info', t('doc_auth.tips.title_html'), - wrapper_css: 'my2 col-12 fs-16p') do %> +<%= accordion('totp-info', t('doc_auth.tips.title_html')) do %> <%= render 'idv/doc_auth/tips_and_sample' %>
<%= image_tag(asset_url('state-id-sample-back.jpg'), height: 338, width: 450) %> diff --git a/app/views/idv/doc_auth/document_capture.html.erb b/app/views/idv/doc_auth/document_capture.html.erb index 3ac15d63669..ed2420fcd2d 100644 --- a/app/views/idv/doc_auth/document_capture.html.erb +++ b/app/views/idv/doc_auth/document_capture.html.erb @@ -37,8 +37,7 @@ <%= t('doc_auth.headings.upload_front_html') %> - <%= accordion('totp-info', t('doc_auth.tips.title_html'), - wrapper_css: 'my2 col-12 fs-16p') do %> + <%= accordion('totp-info-front', t('doc_auth.tips.title_html')) do %> <%= render 'idv/doc_auth/tips_and_sample' %>
<%= image_tag(asset_url('state-id-sample-front.jpg'), height: 338, width: 450) %> @@ -58,8 +57,7 @@ <%= t('doc_auth.headings.upload_back_html') %> - <%= accordion('totp-info', t('doc_auth.tips.title_html'), - wrapper_css: 'my2 col-12 fs-16p') do %> + <%= accordion('totp-info-back', t('doc_auth.tips.title_html')) do %> <%= render 'idv/doc_auth/tips_and_sample' %>
<%= image_tag(asset_url('state-id-sample-back.jpg'), height: 338, width: 450) %> diff --git a/app/views/idv/doc_auth/front_image.html.erb b/app/views/idv/doc_auth/front_image.html.erb index 1aed7846afe..45aa3006ee6 100644 --- a/app/views/idv/doc_auth/front_image.html.erb +++ b/app/views/idv/doc_auth/front_image.html.erb @@ -8,8 +8,7 @@ <%= t('doc_auth.headings.upload_front') %> -<%= accordion('totp-info', t('doc_auth.tips.title_html'), - wrapper_css: 'my2 col-12 fs-16p') do %> +<%= accordion('totp-info', t('doc_auth.tips.title_html')) do %> <%= render 'idv/doc_auth/tips_and_sample' %>
<%= image_tag(asset_url('state-id-sample-front.jpg'), height: 338, width: 450) %> diff --git a/app/views/shared/_accordion.html.erb b/app/views/shared/_accordion.html.erb new file mode 100644 index 00000000000..d1f1e5bacdf --- /dev/null +++ b/app/views/shared/_accordion.html.erb @@ -0,0 +1,15 @@ +
+ <<%= options.fetch(:heading_level, 'div')%> class="usa-accordion__heading"> + + > +
+
+ <%= yield %> +
+ <% unless options[:hide_close_link] %> + + <% end %> +
+
diff --git a/app/views/shared/_accordion.html.slim b/app/views/shared/_accordion.html.slim deleted file mode 100644 index e0f8f4685be..00000000000 --- a/app/views/shared/_accordion.html.slim +++ /dev/null @@ -1,35 +0,0 @@ -.accordion( - class=(options[:wrapper_css] || 'mb4 col-12 fs-16p') -) - .accordion-header( - class=('display-none' if options[:hide_header]) - role="button" - aria-labelledby=target_id - ) - .accordion-header-controls.py1.px2.mt-tiny.mb-tiny( - aria-controls="#{target_id}" - aria-expanded="true" - role="button" - tabindex="0" - ) - span.mb0.mr2 - = header_text - = image_tag asset_url('plus.svg'), alt: t('image_description.accordian_plus_buttom'), - width: 16, class: 'plus-icon display-none' - = image_tag asset_url('minus.svg'), alt: t('image_description.accordian_minus_buttom'), - width: 16, class: 'minus-icon display-none' - .accordion-content.clearfix.pt1( - id="#{target_id}" - role="region" - aria-hidden="true" - ) - .px2 - = yield - - unless options[:hide_close_link] - .py1.accordion-footer( - aria-controls="#{target_id}" - tabindex="0" - ) - .pb-tiny.pt-tiny - = image_tag(asset_url('up-carat-thin.svg'), width: 14, class: 'mr1') - = t('users.personal_key.close') diff --git a/config/locales/doc_auth/en.yml b/config/locales/doc_auth/en.yml index 092e6f48a1e..60b869ea8a5 100644 --- a/config/locales/doc_auth/en.yml +++ b/config/locales/doc_auth/en.yml @@ -100,9 +100,7 @@ en: information. text7: Use a high-resolution camera. A good mobile phone or tablet camera will work. - title: Don't take the photo on a white surface! title_html: "Don't take the photo on a white surface!    See more tips..." - title_more: See more tips… titles: doc_auth: Document Authentication diff --git a/config/locales/doc_auth/es.yml b/config/locales/doc_auth/es.yml index 53afdd42885..97c9056e06c 100644 --- a/config/locales/doc_auth/es.yml +++ b/config/locales/doc_auth/es.yml @@ -109,8 +109,6 @@ es: la información. text7: Utilice una cámara de alta resolución. La cámara de un buen teléfono móvil o tableta funcionará. - title: "¡No tome la foto en una superficie blanca!" title_html: "¡No tome la foto en una superficie blanca! Ver más..." - title_more: Ver más… titles: doc_auth: Autenticación de documentos diff --git a/config/locales/doc_auth/fr.yml b/config/locales/doc_auth/fr.yml index 72d4c2a1c02..d822b134ef5 100644 --- a/config/locales/doc_auth/fr.yml +++ b/config/locales/doc_auth/fr.yml @@ -117,8 +117,6 @@ fr: de lire toutes les informations. text7: Utilisez une caméra haute résolution. La caméra d'un bon téléphone mobile ou d'une tablette fonctionnera. - title: Ne prenez pas la photo sur une surface blanche! title_html: "Ne prenez pas la photo sur une surface blanche! Voir plus..." - title_more: Voir plus… titles: doc_auth: Authentification de document diff --git a/config/locales/image_description/en.yml b/config/locales/image_description/en.yml index d3356067d0e..d2769473198 100644 --- a/config/locales/image_description/en.yml +++ b/config/locales/image_description/en.yml @@ -1,8 +1,6 @@ --- en: image_description: - accordian_minus_buttom: Minus button - accordian_plus_buttom: Plus button camera_mobile_phone: Camera flashing on a mobile phone close: Close button spinner: Loading spinner diff --git a/config/locales/image_description/es.yml b/config/locales/image_description/es.yml index 82b94c798ef..584f2930615 100644 --- a/config/locales/image_description/es.yml +++ b/config/locales/image_description/es.yml @@ -1,8 +1,6 @@ --- es: image_description: - accordian_minus_buttom: Botón menos - accordian_plus_buttom: Botón más camera_mobile_phone: Cámara parpadeando en un teléfono móvil close: Botón de cierre spinner: Indicador de carga diff --git a/config/locales/image_description/fr.yml b/config/locales/image_description/fr.yml index ec598581fc8..ed6875d62f3 100644 --- a/config/locales/image_description/fr.yml +++ b/config/locales/image_description/fr.yml @@ -1,8 +1,6 @@ --- fr: image_description: - accordian_minus_buttom: Bouton moins - accordian_plus_buttom: Bouton Plus camera_mobile_phone: Appareil photo clignotant sur un téléphone mobile close: Bouton de fermeture spinner: Indicateur de chargement diff --git a/spec/features/saml/ial1_sso_spec.rb b/spec/features/saml/ial1_sso_spec.rb index 55d4dac2a16..0b5d6ead4f4 100644 --- a/spec/features/saml/ial1_sso_spec.rb +++ b/spec/features/saml/ial1_sso_spec.rb @@ -64,7 +64,7 @@ expect(current_url).to match new_user_session_path expect(page).to have_content(sp_content) - expect(page).to_not have_css('.accordion-header') + expect(page).to_not have_css('.usa-accordion__heading') end it 'shows user the start page with a link back to the SP' do diff --git a/spec/javascripts/app/document-capture/components/accordion-spec.jsx b/spec/javascripts/app/document-capture/components/accordion-spec.jsx deleted file mode 100644 index 04d1a361076..00000000000 --- a/spec/javascripts/app/document-capture/components/accordion-spec.jsx +++ /dev/null @@ -1,21 +0,0 @@ -import React from 'react'; -import render from '../../../support/render'; -import Accordion from '../../../../../app/javascript/app/document-capture/components/accordion'; - -describe('document-capture/components/accordion', () => { - it('renders with a unique ID', () => { - const { container } = render( - <> - Content - Content - , - ); - - const contents = container.querySelectorAll('[id^="accordion-content-"]'); - - expect(contents).to.have.lengthOf(2); - expect(contents[0].id).to.be.ok(); - expect(contents[1].id).to.be.ok(); - expect(contents[0].id).not.to.equal(contents[1].id); - }); -}); diff --git a/spec/views/idv/review/new.html.slim_spec.rb b/spec/views/idv/review/new.html.slim_spec.rb index 25b84e5b230..4a5c79bcb3d 100644 --- a/spec/views/idv/review/new.html.slim_spec.rb +++ b/spec/views/idv/review/new.html.slim_spec.rb @@ -38,7 +38,7 @@ end it 'contains an accordion with verified user information' do - accordion_selector = generate_class_selector('accordion') + accordion_selector = generate_class_selector('usa-accordion') expect(rendered).to have_xpath("//#{accordion_selector}") end