scrabble-solver 2.13.12 → 2.14.0

package/packages/scrabble-solver/src/components/Dictionary/Dictionary.tsx

@@ -25,49 +25,51 @@ const Dictionary: FunctionComponent<Props> = ({ className }) => {
         [styles.isNotAllowed]: isLastAllowed === false,
       })}
     >
-      {typeof error !== 'undefined' && !isLoading && <EmptyState variant="error">{error.message}</EmptyState>}
+      <div className={styles.content}>
+        {typeof error !== 'undefined' && !isLoading && <EmptyState variant="error">{error.message}</EmptyState>}
 
-      {typeof error === 'undefined' && !isLoading && results.length === 0 && (
-        <EmptyState variant="info">{translate('dictionary.empty-state.uninitialized')}</EmptyState>
-      )}
+        {typeof error === 'undefined' && !isLoading && results.length === 0 && (
+          <EmptyState variant="info">{translate('dictionary.empty-state.uninitialized')}</EmptyState>
+        )}
 
-      {results.map(({ definitions, exists, isAllowed, word }) => (
-        <div
-          className={classNames(styles.result, {
-            [styles.isAllowed]: isAllowed === true,
-            [styles.isNotAllowed]: isAllowed === false,
-          })}
-          key={word}
-        >
-          <div className={styles.content}>
-            {word && <h2 className={styles.word}>{word}</h2>}
+        {results.map(({ definitions, exists, isAllowed, word }) => (
+          <div
+            className={classNames(styles.result, {
+              [styles.isAllowed]: isAllowed === true,
+              [styles.isNotAllowed]: isAllowed === false,
+            })}
+            key={word}
+          >
+            <div className={styles.resultContent}>
+              {word && <h2 className={styles.word}>{word}</h2>}
 
-            {isAllowed === false && <div>{translate('dictionary.empty-state.not-allowed')}</div>}
+              {isAllowed === false && <div>{translate('dictionary.empty-state.not-allowed')}</div>}
 
-            {isAllowed === true && definitions.length === 0 && (
-              <>
-                <div>
-                  {exists
-                    ? translate('dictionary.empty-state.no-definitions')
-                    : translate('dictionary.empty-state.no-results')}
-                </div>
-              </>
-            )}
+              {isAllowed === true && definitions.length === 0 && (
+                <>
+                  <div>
+                    {exists
+                      ? translate('dictionary.empty-state.no-definitions')
+                      : translate('dictionary.empty-state.no-results')}
+                  </div>
+                </>
+              )}
 
-            {isAllowed === true && definitions.length > 0 && (
-              <ul className={styles.definitions}>
-                {definitions.map((result, index) => (
-                  <li key={index} className={styles.definition}>
-                    {result}
-                  </li>
-                ))}
-              </ul>
-            )}
+              {isAllowed === true && definitions.length > 0 && (
+                <ul className={styles.definitions}>
+                  {definitions.map((result, index) => (
+                    <li key={index} className={styles.definition}>
+                      {result}
+                    </li>
+                  ))}
+                </ul>
+              )}
 
-            {!isLoading && isAllowed === null && <div>{translate('dictionary.empty-state.no-results')}</div>}
+              {!isLoading && isAllowed === null && <div>{translate('dictionary.empty-state.no-results')}</div>}
+            </div>
           </div>
-        </div>
-      ))}
+        ))}
+      </div>
 
       {isLoading && <Loading />}
     </div>

package/packages/scrabble-solver/src/components/IconButton/IconButton.tsx

@@ -19,7 +19,7 @@ const IconButton: FunctionComponent<Props> = ({ className, Icon, tooltip, ...pro
     <Tooltip tooltip={tooltip}>
       <button className={classNames(styles.iconButton, className)} type="button" {...props}>
         <span className={styles.content}>
-          <Icon className={styles.icon} />
+          <Icon aria-hidden="true" className={styles.icon} role="img" />
         </span>
       </button>
     </Tooltip>

package/packages/scrabble-solver/src/components/IconButton/Link.tsx

@@ -18,7 +18,7 @@ const Link: FunctionComponent<Props> = ({ className, Icon, tooltip, ...props })
     <Tooltip tooltip={tooltip}>
       <a className={classNames(styles.iconButton, className)} {...props}>
         <span className={styles.content}>
-          <Icon className={styles.icon} />
+          <Icon aria-hidden="true" className={styles.icon} role="img" />
         </span>
       </a>
     </Tooltip>

package/packages/scrabble-solver/src/components/Keys/Arrows/Arrows.tsx

@@ -14,16 +14,16 @@ interface Props {
 const Arrows: FunctionComponent<Props> = ({ className }) => (
   <div className={classNames(styles.arrows, className)}>
     <Key className={classNames(styles.arrow, styles.left)}>
-      <ArrowLeft />
+      <ArrowLeft aria-hidden="true" role="img" />
     </Key>
     <Key className={classNames(styles.arrow, styles.up)}>
-      <ArrowUp />
+      <ArrowUp aria-hidden="true" role="img" />
     </Key>
     <Key className={classNames(styles.arrow, styles.right)}>
-      <ArrowRight />
+      <ArrowRight aria-hidden="true" role="img" />
     </Key>
     <Key className={classNames(styles.arrow, styles.down)}>
-      <ArrowDown />
+      <ArrowDown aria-hidden="true" role="img" />
     </Key>
   </div>
 );

package/packages/scrabble-solver/src/components/Loading/Loading.module.scss

@@ -2,6 +2,7 @@
 .dim {
   position: absolute;
   inset: 0;
+  border-radius: inherit;
 }
 
 .loading {

package/packages/scrabble-solver/src/components/Loading/Loading.tsx

@@ -29,7 +29,7 @@ const Loading: FunctionComponent<Props> = ({ className, wave = true }) => {
   const content = useMemo(() => prepareContent(message), [message]);
 
   return (
-    <div aria-label={translation} className={classNames(styles.loading, className)} role="status">
+    <div aria-label={translation} className={classNames(styles.loading, className)} data-testid="loading" role="status">
       <div className={styles.dim} />
       <div className={styles.text}>
         <PlainTiles className={classNames(styles.tiles)} content={content} dropShadow wave={wave} />

package/packages/scrabble-solver/src/components/Modal/components/Section/Section.tsx

@@ -6,11 +6,12 @@ import styles from './Section.module.scss';
 interface Props {
   children: ReactNode;
   className?: string;
+  label: string;
   title: ReactNode;
 }
 
-const Section: FunctionComponent<Props> = ({ children, className, title }) => (
-  <section className={classNames(styles.section, className)}>
+const Section: FunctionComponent<Props> = ({ children, className, label, title }) => (
+  <section aria-label={label} className={classNames(styles.section, className)}>
     <h2 className={styles.heading}>{title}</h2>
     <div>{children}</div>
   </section>

package/packages/scrabble-solver/src/components/NavButtons/NavButtons.tsx

@@ -125,6 +125,7 @@ const NavButtons: FunctionComponent<Props> = ({
 
         <IconButton
           aria-label={translate('settings')}
+          data-testid="settings-button"
           className={styles.button}
           Icon={Cog}
           tooltip={translate('settings')}

package/packages/scrabble-solver/src/components/NotFound/NotFound.tsx

@@ -11,7 +11,7 @@ const CONTENT = [['HTTP', '404']];
 const NotFound: FunctionComponent = () => (
   <div className={styles.notFound}>
     <a className={styles.link} href="/">
-      <DashCircleFill className={styles.icon} />
+      <DashCircleFill aria-hidden="true" className={styles.icon} role="img" />
       <PlainTiles className={styles.tiles} content={CONTENT} />
     </a>
   </div>

package/packages/scrabble-solver/src/components/Rack/Rack.tsx

@@ -168,6 +168,7 @@ const Rack: FunctionComponent<Props> = ({ className, tileSize }) => {
         className={classNames(styles.rack, className, {
           [styles.hidden]: showInputPrompt,
         })}
+        data-testid="rack"
         ref={ref}
         style={{ fontSize: tileFontSize }}
         onPaste={handlePaste}

package/packages/scrabble-solver/src/components/Radio/Radio.tsx

@@ -30,7 +30,7 @@ const Radio: FunctionComponent<Props> = ({ checked, children, className, disable
       onChange={onChange}
     />
 
-    <div className={styles.icon} />
+    <div aria-hidden="true" className={styles.icon} role="img" />
 
     <div className={styles.content}>{children}</div>
   </label>

package/packages/scrabble-solver/src/components/Results/Cell.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import { FunctionComponent, ReactNode } from 'react';
+import { CSSProperties, FunctionComponent, ReactNode } from 'react';
 
 import { selectLocale, useTranslate, useTypedSelector } from 'state';
 import { TranslationKey } from 'types';
@@ -11,19 +11,23 @@ import styles from './Results.module.scss';
 interface Props {
   children?: ReactNode;
   className?: string;
+  dataTestId?: string;
+  style?: CSSProperties;
   translationKey: TranslationKey;
   tooltip?: string | number;
   value: string | number;
 }
 
-const Cell: FunctionComponent<Props> = ({ children, className, translationKey, tooltip, value }) => {
+const Cell: FunctionComponent<Props> = ({ children, className, dataTestId, style, translationKey, tooltip, value }) => {
   const translate = useTranslate();
   const locale = useTypedSelector(selectLocale);
   const formattedValue = value.toLocaleString(locale);
 
   return (
     <Tooltip tooltip={`${translate(translationKey)}: ${tooltip || formattedValue}`}>
-      <div className={classNames(styles.cell, className)}>{children || formattedValue}</div>
+      <div className={classNames(styles.cell, className)} data-testid={dataTestId} style={style}>
+        {children || formattedValue}
+      </div>
     </Tooltip>
   );
 };

package/packages/scrabble-solver/src/components/Results/Header.tsx

@@ -0,0 +1,99 @@
+import { FunctionComponent } from 'react';
+
+import { useAppLayout, useColumns } from 'hooks';
+import { GeoAlt, OneTwoThree, Square, SquareA, SquareB, Squares, Words } from 'icons';
+import { RESULTS_COLUMN_WIDTH } from 'parameters';
+import { ResultColumnId } from 'types';
+
+import HeaderButton from './HeaderButton';
+import styles from './Results.module.scss';
+
+const Results: FunctionComponent = () => {
+  const { resultWordWidth } = useAppLayout();
+  const columns = useColumns();
+
+  return (
+    <div className={styles.header}>
+      {columns[ResultColumnId.Coordinates] && (
+        <HeaderButton
+          className={styles.coordinates}
+          Icon={GeoAlt}
+          id={ResultColumnId.Coordinates}
+          style={{ flexBasis: RESULTS_COLUMN_WIDTH[ResultColumnId.Coordinates] }}
+          translationKey="settings.showCoordinates"
+        />
+      )}
+
+      {columns[ResultColumnId.Word] && (
+        <HeaderButton
+          className={styles.word}
+          id={ResultColumnId.Word}
+          style={{ flexBasis: resultWordWidth }}
+          translationKey="common.word"
+        />
+      )}
+
+      {columns[ResultColumnId.TilesCount] && (
+        <HeaderButton
+          className={styles.stat}
+          Icon={Squares}
+          id={ResultColumnId.TilesCount}
+          style={{ flexBasis: RESULTS_COLUMN_WIDTH[ResultColumnId.TilesCount] }}
+          translationKey="common.tiles"
+        />
+      )}
+
+      {columns[ResultColumnId.VowelsCount] && (
+        <HeaderButton
+          className={styles.stat}
+          Icon={SquareA}
+          id={ResultColumnId.VowelsCount}
+          style={{ flexBasis: RESULTS_COLUMN_WIDTH[ResultColumnId.VowelsCount] }}
+          translationKey="common.vowels"
+        />
+      )}
+
+      {columns[ResultColumnId.ConsonantsCount] && (
+        <HeaderButton
+          className={styles.stat}
+          Icon={SquareB}
+          id={ResultColumnId.ConsonantsCount}
+          style={{ flexBasis: RESULTS_COLUMN_WIDTH[ResultColumnId.ConsonantsCount] }}
+          translationKey="common.consonants"
+        />
+      )}
+
+      {columns[ResultColumnId.BlanksCount] && (
+        <HeaderButton
+          className={styles.stat}
+          Icon={Square}
+          id={ResultColumnId.BlanksCount}
+          style={{ flexBasis: RESULTS_COLUMN_WIDTH[ResultColumnId.BlanksCount] }}
+          translationKey="common.blanks"
+        />
+      )}
+
+      {columns[ResultColumnId.WordsCount] && (
+        <HeaderButton
+          className={styles.stat}
+          Icon={Words}
+          id={ResultColumnId.WordsCount}
+          style={{ flexBasis: RESULTS_COLUMN_WIDTH[ResultColumnId.WordsCount] }}
+          translationKey="common.words"
+        />
+      )}
+
+      {columns[ResultColumnId.Points] && (
+        <HeaderButton
+          className={styles.points}
+          Icon={OneTwoThree}
+          id={ResultColumnId.Points}
+          style={{ flexBasis: RESULTS_COLUMN_WIDTH[ResultColumnId.Points] }}
+          translationKey="common.points"
+        />
+      )}
+    </div>
+  );
+};
+
+export default Results;

package/packages/scrabble-solver/src/components/Results/HeaderButton.tsx

@@ -1,42 +1,47 @@
 import classNames from 'classnames';
-import { ReactElement, useCallback } from 'react';
+import { CSSProperties, FunctionComponent, ReactElement, SVGAttributes, useCallback } from 'react';
 import { useDispatch } from 'react-redux';
 
 import { SortDown, SortUp } from 'icons';
 import { resultsSlice, selectResultsSort, useTranslate, useTypedSelector } from 'state';
-import { SortDirection } from 'types';
+import { ResultColumnId, SortDirection, TranslationKey } from 'types';
 
 import { Tooltip } from '../Tooltip';
 
 import styles from './Results.module.scss';
-import { Column } from './types';
 
 interface Props {
-  column: Column;
+  className: string;
+  Icon?: FunctionComponent<SVGAttributes<SVGElement>>;
+  id: ResultColumnId;
+  translationKey: TranslationKey;
+  style?: CSSProperties;
 }
 
-const HeaderButton = ({ column }: Props): ReactElement => {
+const HeaderButton = ({ className, Icon, id, translationKey, style }: Props): ReactElement => {
   const dispatch = useDispatch();
   const translate = useTranslate();
   const sort = useTypedSelector(selectResultsSort);
 
   const handleClick = useCallback(() => {
-    dispatch(resultsSlice.actions.sort(column.id));
-  }, [column.id, dispatch]);
+    dispatch(resultsSlice.actions.sort(id));
+  }, [dispatch, id]);
 
   return (
-    <Tooltip tooltip={translate(column.translationKey)}>
+    <Tooltip tooltip={translate(translationKey)}>
       <button
-        aria-label={translate(column.translationKey)}
-        className={classNames(styles.headerButton, column.className)}
-        key={column.id}
+        aria-label={translate(translationKey)}
+        className={classNames(styles.headerButton, className)}
+        style={style}
         type="button"
         onClick={handleClick}
       >
         <span className={styles.cell}>
-          <span className={styles.headerButtonLabel}>{translate(column.translationKey)}</span>
+          {Icon && <Icon aria-hidden="true" className={styles.headerButtonIcon} role="img" />}
 
-          {sort.column === column.id && (
+          {!Icon && <span className={styles.headerButtonLabel}>{translate(translationKey)}</span>}
+
+          {sort.column === id && (
             <>
               {sort.direction === SortDirection.Ascending && <SortUp className={styles.sortIcon} />}
               {sort.direction === SortDirection.Descending && <SortDown className={styles.sortIcon} />}

package/packages/scrabble-solver/src/components/Results/Result.tsx

@@ -2,6 +2,7 @@ import classNames from 'classnames';
 import { CSSProperties, FocusEventHandler, MouseEventHandler, ReactElement, useMemo, useRef } from 'react';
 import Highlighter from 'react-highlight-words';
 
+import { useAppLayout, useColumns } from 'hooks';
 import { LOCALE_FEATURES } from 'i18n';
 import { getCoordinates, noop } from 'lib';
 import {
@@ -11,12 +12,11 @@ import {
   selectShowCoordinates,
   useTypedSelector,
 } from 'state';
-import { ResultColumn } from 'types';
+import { ResultColumnId } from 'types';
 
 import Cell from './Cell';
 import styles from './Results.module.scss';
 import { ResultData } from './types';
-import useColumns from './useColumns';
 
 interface Props {
   data: ResultData;
@@ -34,16 +34,16 @@ const Result = ({ data, index, style }: Props): ReactElement => {
     onMouseEnter = noop,
     onMouseLeave = noop,
   } = data;
+  const { resultWordWidth } = useAppLayout();
   const ref = useRef<HTMLButtonElement>(null);
   const columns = useColumns();
   const locale = useTypedSelector(selectLocale);
   const showCoordinates = useTypedSelector(selectShowCoordinates);
   const query = useTypedSelector(selectResultsQuery);
-  const { consonants, direction, separator, vowels } = LOCALE_FEATURES[locale];
+  const { direction, separator } = LOCALE_FEATURES[locale];
   const result = results[index];
   const isMatching = useTypedSelector((state) => selectIsResultMatching(state, index));
   const words = direction === 'rtl' ? [...result.words].reverse() : result.words;
-  const enabledColumns = Object.fromEntries(columns.map((column) => [column.id, true]));
   const coordinates = useMemo(() => getCoordinates(result, showCoordinates), [result, showCoordinates]);
 
   const handleClick: MouseEventHandler = (event) => onClick(result, event);
@@ -54,11 +54,13 @@ const Result = ({ data, index, style }: Props): ReactElement => {
 
   return (
     <button
+      aria-hidden={isMatching ? undefined : 'true'}
       aria-label={result.word}
       className={classNames(styles.result, {
         [styles.highlighted]: index === highlightedIndex,
         [styles.notMatching]: !isMatching,
       })}
+      data-testid="result"
       ref={ref}
       style={style}
       type="button"
@@ -69,33 +71,38 @@ const Result = ({ data, index, style }: Props): ReactElement => {
       onMouseLeave={handleMouseLeave}
     >
       <span className={styles.resultContent}>
-        {enabledColumns[ResultColumn.Coordinates] && (
+        {columns[ResultColumnId.Coordinates] && (
           <Cell className={styles.coordinates} translationKey="settings.showCoordinates" value={coordinates} />
         )}
 
-        {enabledColumns[ResultColumn.Word] && (
-          <Cell className={styles.word} translationKey="common.word" value={result.word}>
+        {columns[ResultColumnId.Word] && (
+          <Cell
+            className={styles.word}
+            style={{ flexBasis: resultWordWidth }}
+            translationKey="common.word"
+            value={result.word}
+          >
             <Highlighter highlightClassName={styles.highlight} searchWords={[query]} textToHighlight={result.word} />
           </Cell>
         )}
 
-        {enabledColumns[ResultColumn.TilesCount] && (
+        {columns[ResultColumnId.TilesCount] && (
           <Cell className={styles.stat} translationKey="common.tiles" value={result.tilesCount} />
         )}
 
-        {enabledColumns[ResultColumn.ConsonantsCount] && consonants && (
-          <Cell className={styles.stat} translationKey="common.consonants" value={result.consonantsCount} />
+        {columns[ResultColumnId.VowelsCount] && (
+          <Cell className={styles.stat} translationKey="common.vowels" value={result.vowelsCount} />
         )}
 
-        {enabledColumns[ResultColumn.VowelsCount] && vowels && (
-          <Cell className={styles.stat} translationKey="common.vowels" value={result.vowelsCount} />
+        {columns[ResultColumnId.ConsonantsCount] && (
+          <Cell className={styles.stat} translationKey="common.consonants" value={result.consonantsCount} />
         )}
 
-        {enabledColumns[ResultColumn.BlanksCount] && (
+        {columns[ResultColumnId.BlanksCount] && (
           <Cell className={styles.stat} translationKey="common.blanks" value={result.blanksCount} />
         )}
 
-        {enabledColumns[ResultColumn.WordsCount] && (
+        {columns[ResultColumnId.WordsCount] && (
           <Cell
             className={styles.stat}
             translationKey="common.words"
@@ -104,8 +111,8 @@ const Result = ({ data, index, style }: Props): ReactElement => {
           />
         )}
 
-        {enabledColumns[ResultColumn.Points] && (
-          <Cell className={styles.points} translationKey="common.points" value={result.points} />
+        {columns[ResultColumnId.Points] && (
+          <Cell className={styles.points} dataTestId="points" translationKey="common.points" value={result.points} />
         )}
       </span>
     </button>

package/packages/scrabble-solver/src/components/Results/Results.module.scss

@@ -44,7 +44,6 @@ $row-padding-horizontal: calc(var(--spacing--m) + var(--spacing--s));
   display: flex;
   align-items: center;
   justify-content: space-between;
-  font-weight: 700;
   border-bottom: var(--border);
   border-top-left-radius: inherit;
   border-top-right-radius: inherit;
@@ -53,11 +52,15 @@ $row-padding-horizontal: calc(var(--spacing--m) + var(--spacing--s));
 .headerButton {
   @include button-reset;
   @include focus-effect;
+
   cursor: pointer;
 
   text-transform: uppercase;
-  transition: var(--transition);
+  transition:
+    background-color var(--transition--duration) var(--transition--easing),
+    color var(--transition--duration) var(--transition--easing);
   background-color: var(--color--background);
+  height: 100%;
 
   &:first-child {
     border-start-start-radius: inherit;
@@ -72,6 +75,17 @@ $row-padding-horizontal: calc(var(--spacing--m) + var(--spacing--s));
     background-color: var(--color--primary);
     color: var(--color--primary--opposite);
   }
+
+  &.points {
+    @include scrollbars;
+
+    overflow-y: scroll;
+
+    &,
+    &:hover {
+      scrollbar-color: transparent transparent;
+    }
+  }
 }
 
 .headerButtonLabel {
@@ -81,6 +95,12 @@ $row-padding-horizontal: calc(var(--spacing--m) + var(--spacing--s));
   text-align: start;
 }
 
+.headerButtonIcon {
+  flex: 0 0 auto;
+  width: var(--results--icon--size);
+  height: var(--results--icon--size);
+}
+
 .result {
   @include button-reset;
 
@@ -98,7 +118,7 @@ $row-padding-horizontal: calc(var(--spacing--m) + var(--spacing--s));
     }
   }
 
-  &.notMatching {
+  &[aria-hidden='true'] {
     color: var(--color--inactive);
 
     &:focus,
@@ -120,6 +140,7 @@ $row-padding-horizontal: calc(var(--spacing--m) + var(--spacing--s));
 
   .word {
     @include ellipsis;
+
     display: flex;
   }
 }
@@ -129,33 +150,22 @@ $row-padding-horizontal: calc(var(--spacing--m) + var(--spacing--s));
   align-items: center;
   justify-content: center;
   height: 100%;
-  padding: 0 var(--spacing--s);
   gap: var(--spacing--s);
   line-height: var(--results--item--height);
 
-  &.word,
+  .result &.word,
   .headerButton.word & {
     justify-content: flex-start;
-  }
-
-  .result &:first-child,
-  .headerButton:first-child & {
-    text-align: start;
     padding-inline-start: $row-padding-horizontal;
   }
 
-  .result &:last-child,
-  .headerButton:last-child & {
-    padding-inline-end: $row-padding-horizontal;
-  }
-
   &:last-child {
     flex: 1;
   }
 }
 
 .word {
-  flex: 1 0;
+  flex: 0 0;
   text-transform: uppercase;
 }
 
@@ -171,12 +181,11 @@ $row-padding-horizontal: calc(var(--spacing--m) + var(--spacing--s));
   $width: 80px;
 
   flex: 1 0 $width;
-  max-width: $width;
   font-weight: bold;
 }
 
 .coordinates {
-  $width: 50px;
+  $width: 55px;
 
   flex: 0 0 $width;
   max-width: $width;