[#2201] Toast Component added with locales

Gemfile.lock

@@ -241,7 +241,7 @@ GEM
  ruby2_keywords (~> 0.0.1)
  netrc (0.11.0)
  nio4r (2.5.8)
- nokogiri (1.13.9)
+ nokogiri (1.13.10)
  mini_portile2 (~> 2.8.0)
  racc (~> 1.4)
  oauth2 (1.4.9)

app/assets/stylesheets/core/alerts.scss

@@ -5,10 +5,6 @@
  text-align: center;
  border-radius: $size-4;
 
- &Dashboard {
- @include setMargin($size-0, $size-0, $size-26, $size-0);
- }
-
  &Text {
  color: $carmine;
  }

app/assets/stylesheets/core/notices.scss

@@ -4,8 +4,4 @@
  padding: $size-10;
  text-align: center;
  border-radius: $size-4;
-
- &Dashboard {
- @include setMargin($size-0, $size-0, $size-26, $size-0);
- }
 }

app/views/layouts/application.html.erb

@@ -52,7 +52,10 @@
  <%= react_component('SkipToContent', props: { id: 'mainContent' })%>
  <%= react_component('Header', props: header_props) %>
  <main>
- <%= render partial: 'shared/alerts' %>
+ <%= react_component('Toast', props: { 
+ notice: notice.present? ? notice : '', 
+ alert: alert.present? ? alert : '' ,
+ appendDashboardClass: (user_signed_in? && !static_page?) || secret_share_path? }) %>
  <% if user_signed_in? && !static_page? %>
  <div class="dashboardContent">
  <div class="dashboardNav" role="navigation" aria-label="<%= t('navigation.user_menu') %>">

client/app/components/Input/Input.scss

@@ -147,11 +147,13 @@
 
  &Label {
  @include setMargin($size-0, $size-0, $size-0, $size-8);
-
+ color: $white;
  text-transform: capitalize;
  }
 }
-
+.clr-white {
+ color: $white;
+}
 .default,
 .tagAutocomplete,
 .password,

client/app/components/Input/InputCheckbox.jsx

@@ -64,7 +64,7 @@ export const InputCheckbox = (props: Props): Node => {
  {typeof uncheckedValue !== 'undefined'
  && displayUnchecked(name, uncheckedValue)}
  {displayCheckbox(id, name, value, checked, onChange, label)}
- <div className={css.checkboxLabel}>{renderHTML(label)}</div>
+ <label className={`${css.checkboxLabel}`} htmlFor={id}>{renderHTML(label)}</label>
  </div>
  {displayInfo(info)}
  </div>

client/app/components/Toast/Toast.scss

@@ -0,0 +1,19 @@
+@import "~styles/_global.scss";
+
+.toast {
+ display: flex;
+ justify-content: space-between;
+ width: fit-content; 
+ margin: 0 auto;
+
+ button {
+ background: transparent;
+ color: $white;
+ opacity: 0.5;
+ border: 0;
+ &:hover {
+ border: 0;
+ opacity: 1;
+ }
+ }
+}

client/app/components/Toast/__tests__/Toast.spec.jsx

@@ -0,0 +1,29 @@
+// @flow
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { Toast } from 'components/Toast';
+
+describe('Toast', () => {
+ describe('Toast Type: Alert', () => {
+ it('renders correctly', () => {
+ render(
+ <Toast
+ alert="Invalid username or password."
+ appendDashboardClass="true"
+ />,
+ );
+ expect(screen).not.toBeNull();
+ });
+ });
+
+ describe('Toast Type: Notice', () => {
+ it('renders correctly', () => {
+ render(
+ <Toast
+ notice="Login successful."
+ />,
+ );
+ expect(screen).not.toBeNull();
+ });
+ });
+});

client/app/components/Toast/index.jsx

@@ -0,0 +1,73 @@
+// @flow
+import React, { useState } from 'react';
+import type { Node } from 'react';
+import { I18n } from 'libs/i18n';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faTimes } from '@fortawesome/free-solid-svg-icons';
+import css from './Toast.scss';
+
+type Props = {
+ alert?: string,
+ notice?: string,
+ appendDashboardClass?: boolean
+};
+export type State = {
+ showToast: boolean,
+};
+
+export const Toast = ({
+ alert, notice, appendDashboardClass,
+}: Props): Node => {
+ const [showAlert, setShowAlert] = useState<boolean>(alert !== null && alert !== '' && !document.documentElement?.hasAttribute('data-turbolinks-preview'));
+ const [showNotice, setShowNotice] = useState<boolean>(notice !== null && notice !== '' && !document.documentElement?.hasAttribute('data-turbolinks-preview'));
+ const hideNotice = () => {
+ setShowNotice(false);
+ };
+ const hideAlert = () => {
+ setShowAlert(false);
+ };
+ if (showAlert || showNotice) {
+ setTimeout(() => {
+ hideNotice();
+ hideAlert();
+ }, 7000);
+ }
+ return (
+ <div>
+ <div id="toast-notice" aria-label={showNotice ? I18n.t('alert_auto_hide') : ''} style={{ visibility: showNotice ? 'visible' : 'hidden' }} role="region" aria-live="polite" aria-atomic="true" className={`${showNotice ? 'notice' : ''} ${css.toast} ${showNotice && (showAlert || appendDashboardClass) ? 'smallMarginBottom' : ''}`}>
+ {showNotice && (
+ <>
+ <div>
+ {notice}
+ </div>
+ <button type="button" onClick={hideNotice} aria-label={I18n.t('close')}>
+ <span aria-hidden="true">
+ <FontAwesomeIcon icon={faTimes} />
+ </span>
+ </button>
+ </>
+ )}
+ </div>
+ <div id="toast-alert" aria-label={showAlert ? I18n.t('alert_auto_hide') : ''} style={{ visibility: showAlert ? 'visible' : 'hidden' }} role="alert" aria-live="assertive" aria-atomic="true" className={`${showAlert ? 'alert' : ''} ${css.toast} ${showAlert && appendDashboardClass ? 'smallMarginBottom' : ''}`}>
+ {showAlert && (
+ <>
+ <div>
+ {alert}
+ </div>
+ <button type="button" onClick={hideAlert} aria-label={I18n.t('close')}>
+ <span aria-hidden="true">
+ <FontAwesomeIcon icon={faTimes} />
+ </span>
+ </button>
+ </>
+ )}
+ </div>
+ </div>
+ );
+};
+
+export default ({
+ alert, notice, appendDashboardClass,
+}: Props): Node => (
+ <Toast alert={alert} notice={notice} appendDashboardClass={appendDashboardClass} />
+);

client/app/startup/registration.js

@@ -27,6 +27,7 @@ import { Tag } from 'components/Tag';
 import { Tooltip } from 'components/Tooltip';
 import Input from 'components/Input';
 import OAuthButton from 'components/OAuthButton';
+import Toast from 'components/Toast';
 import Comments from 'widgets/Comments';
 import { ToggleLocale } from 'widgets/ToggleLocale';
 import Resources from 'widgets/Resources';
@@ -65,6 +66,7 @@ ReactOnRails.register({
  Tag,
  ToggleLocale,
  Tooltip,
+ Toast,
  CrisisPrevention,
  CarePlanContacts,
  OAuthButton,

client/app/stories/Toast.stories.jsx

@@ -0,0 +1,25 @@
+/* eslint-disable react/jsx-props-no-spreading */
+import React from 'react';
+import { Toast } from 'components/Toast';
+
+export default {
+ title: 'Components/Toast',
+ component: Toast,
+};
+
+const Template = (args) => <Toast {...args} />;
+
+export const noticeToast = Template.bind({});
+
+noticeToast.args = {
+ notice: 'Login successful.',
+ appendDashboardClass: 'true',
+};
+noticeToast.storyName = 'Toast Type: Notice';
+
+export const alertToast = Template.bind({});
+
+alertToast.args = {
+ alert: 'Login failed.',
+};
+alertToast.storyName = 'Toast Type: Alert';

client/app/styles/_global.scss

@@ -19,5 +19,7 @@ a {
  opacity: 0.5;
  }
 }
-
+.clr-white {
+ color: white;
+}
 @include dashboardSectionStyles();

config/locales/de.yml

@@ -13,6 +13,7 @@ de:
  no_text: nein
  expand_menu: Menü aufklappen
  close: schließen
+ alert_auto_hide: Deze waarschuwing wordt automatisch verborgen
  load_more: Mehr laden
  of: von
  languages:

config/locales/en.yml

@@ -13,6 +13,7 @@ en:
  no_text: 'no'
  expand_menu: expand menu
  close: close
+ alert_auto_hide: This alert will be hidden automatically
  load_more: Load more
  of: of
  languages:

config/locales/es.yml

@@ -13,6 +13,7 @@ es:
  no_text: 'no'
  expand_menu: ampliar menú
  close: cerca
+ alert_auto_hide: Esta alerta se ocultará automáticamente
  load_more: Carga más
  of: de
  languages:

config/locales/fr.yml

@@ -13,6 +13,7 @@ fr:
  no_text: non
  expand_menu: dérouler le menu
  close: fermer
+ alert_auto_hide: Cette alerte sera masquée automatiquement
  load_more: Charger plus
  of: de
  languages:

config/locales/hi.yml

@@ -13,6 +13,7 @@ hi:
  no_text: नहीं
  expand_menu: मेनू का विस्तार करें
  close: बंद करे
+ alert_auto_hide: यह अलर्ट अपने आप छिप जाएगा
  load_more: और लोड करें
  of: का
  languages:

config/locales/id.yml

@@ -13,6 +13,7 @@ id:
  no_text: Tidak
  expand_menu: Perluas menu
  close: Tutup
+ alert_auto_hide: Lansiran ini akan disembunyikan secara otomatis
  load_more: Muat lebih banyak
  of: dari
  languages:

config/locales/it.yml

@@ -13,6 +13,7 @@ it:
  no_text: 'no'
  expand_menu: espandere il menu
  close: vicino
+ alert_auto_hide: Questo avviso verrà nascosto automaticamente
  load_more: Carica altro
  of: di
  languages:

config/locales/ko.yml

@@ -13,6 +13,7 @@ ko:
  no_text: 아니오
  expand_menu: 추가 메뉴
  close: 종료
+ alert_auto_hide: 이 알림은 자동으로 숨겨집니다.
  load_more: 더 보기
  of: of
  languages:

config/locales/nb.yml

@@ -13,6 +13,7 @@ nb:
  no_text: nei
  expand_menu: utvide menyen
  close: lukk
+ alert_auto_hide: Dette varselet vil bli skjult automatisk
  load_more: Last mer
  of: av
  languages:

config/locales/nl.yml

@@ -13,6 +13,7 @@ nl:
  no_text: nee
  expand_menu: vouw menu uit
  close: sluiten
+ alert_auto_hide: Deze waarschuwing wordt automatisch verborgen
  load_more: Meer laden
  of: van
  languages:

config/locales/pt-BR.yml

@@ -13,6 +13,7 @@ pt-BR:
  no_text: não
  expand_menu: expandir menu
  close: fechar
+ alert_auto_hide: Este alerta será ocultado automaticamente
  load_more: Carregue mais
  of: do
  languages:

config/locales/sv.yml

@@ -13,6 +13,7 @@ sv:
  no_text: nej
  expand_menu: expandera menyn
  close: stänga
+ alert_auto_hide: Denna varning kommer att döljas automatiskt
  load_more: Ladda mer
  of: av
  languages:

config/locales/vi.yml

@@ -13,6 +13,7 @@ vi:
  no_text: không
  expand_menu: mở rộng menu
  close: gần
+ alert_auto_hide: Cảnh báo này sẽ tự động bị ẩn
  load_more: Tải thêm
  of: của
  languages:

config/locales/zh-CN.yml

@@ -13,6 +13,7 @@ zh-CN:
  no_text: 没有
  expand_menu: 展开菜单
  close: 关闭
+ alert_auto_hide: 此警报将自动隐藏
  load_more: 更多
  of: 的
  languages: