Ws 2145 create navigation component

scripts/bundleSize/bundleSizeConfig.js

@@ -9,5 +9,5 @@
 
 export const VARIANCE = 5;
 
-export const MIN_SIZE = 913;
-export const MAX_SIZE = 1282;
+export const MIN_SIZE = 938;
+export const MAX_SIZE = 1305;

src/app/components/Header/brand-svgs/ArabicBrandSVG.jsx

@@ -0,0 +1,44 @@
+const ArabicBrandSVG = props => (
+  <svg
+    width="704"
+    height="123"
+    viewBox="0 0 704 123"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <g clipPath="url(#clip0_3578_25388)">
+      <path
+        d="M69.2815 108.598C61.5506 96.2101 53.7196 83.7963 45.7918 71.3566C37.8613 58.9196 30.0325 46.8519 22.3021 35.1562V108.598H0.298828V2.30035H23.4912C31.5195 14.2934 39.4219 26.3103 47.2042 38.3525C54.9833 50.3943 62.7397 62.6107 70.4706 74.999V2.30035H92.4739V108.598L69.2815 108.598ZM113.54 2.30034H186.686V21.3295H136.435V44.3737H181.036V63.4028H136.435V89.5687H189.511V108.598H113.54L113.54 2.30034ZM291.455 108.598C288.084 96.6075 284.788 84.6139 281.568 72.6203C278.346 60.6294 275.199 48.6358 272.127 36.6427C269.154 48.6358 266.081 60.6294 262.91 72.6203C259.737 84.6139 256.466 96.6075 253.098 108.598H228.865C223.81 91.2553 218.953 73.7121 214.295 55.9698C209.636 38.2293 205.227 20.34 201.064 2.30034H226.04C228.517 16.0773 231.144 29.8548 233.92 43.6302C236.693 57.4077 239.618 70.9364 242.691 84.2165C249.33 58.3486 255.626 32.5309 261.572 6.76035H283.872C286.846 19.4483 289.893 32.1081 293.016 44.7452C296.138 57.3817 299.334 69.9956 302.605 82.5813C305.578 69.4986 308.452 56.218 311.228 42.7379C314.001 29.2605 316.579 15.7804 318.958 2.30034H343.489C339.326 20.34 334.915 38.2293 330.257 55.9698C325.597 73.7121 320.743 91.2553 315.688 108.598H291.455ZM386.825 110.828C380.976 110.828 375.203 110.183 369.505 108.896C363.804 107.609 358.329 105.576 353.077 102.8V82.2839C363.681 88.7279 374.931 91.9474 386.825 91.9474C393.564 91.9474 398.693 90.8092 402.212 88.5283C405.729 86.2491 407.49 83.0782 407.49 79.0135C407.49 75.9426 406.621 73.5379 404.888 71.8027C403.153 70.0702 400.848 68.681 397.975 67.6401C395.099 66.5997 391.88 65.6329 388.312 64.7412C382.463 63.3542 377.31 61.7676 372.85 59.9837C368.39 58.1998 364.622 56.0953 361.551 53.6652C358.478 51.2378 356.148 48.313 354.564 44.8939C352.977 41.4742 352.185 37.3862 352.185 32.6288C352.185 25.8896 353.895 20.0918 357.314 15.2343C360.733 10.3795 365.565 6.63707 371.809 4.00961C378.053 1.38486 385.487 0.0703125 394.11 0.0703125C399.759 0.0703125 405.309 0.715954 410.761 2.00291C416.21 3.29203 421.116 5.02728 425.479 7.20646V27.4253C421.116 24.7491 416.187 22.6678 410.686 21.1813C405.186 19.6943 399.659 18.9508 394.11 18.9508C388.063 18.9508 383.38 19.9917 380.061 22.073C376.739 24.1543 375.08 27.1279 375.08 30.9931C375.08 33.7692 375.872 35.9738 377.459 37.609C379.043 39.2442 381.298 40.5825 384.223 41.6229C387.145 42.6638 390.59 43.681 394.556 44.6705C399.611 45.9602 404.317 47.3726 408.679 48.9078C413.039 50.4456 416.879 52.4015 420.201 54.7802C423.52 57.1589 426.096 60.1833 427.932 63.849C429.765 67.5168 430.682 72.026 430.682 77.3777C430.682 84.4165 428.947 90.4377 425.479 95.4411C422.008 100.447 417.004 104.264 410.463 106.889C403.922 109.514 396.042 110.828 386.825 110.828Z"
+        fill="white"
+      />
+      <path
+        d="M536.562 113.724L536.811 114.036L536.552 114.34C535.115 116.029 533.662 117.566 532.234 118.911C530.806 120.254 529.464 121.513 528.205 122.689L527.885 122.988L527.555 122.7C526.205 121.517 524.82 120.218 523.44 118.838C522.05 117.448 520.622 115.892 519.196 114.214L518.93 113.901L519.196 113.588C520.61 111.921 521.975 110.429 523.252 109.152C524.527 107.876 525.979 106.553 527.562 105.221L527.874 104.959L528.185 105.221C529.781 106.564 531.254 107.908 532.56 109.215C533.869 110.523 535.215 112.041 536.562 113.724Z"
+        fill="white"
+      />
+      <path
+        d="M517.426 113.724L517.675 114.036L517.416 114.34C515.98 116.029 514.526 117.567 513.1 118.911C511.67 120.254 510.328 121.513 509.068 122.689L508.749 122.988L508.419 122.7C507.069 121.517 505.685 120.218 504.305 118.838C502.915 117.449 501.487 115.893 500.061 114.214L499.794 113.901L500.061 113.588C501.476 111.92 502.84 110.428 504.115 109.152C505.389 107.878 506.84 106.556 508.427 105.221L508.738 104.959L509.05 105.221C510.646 106.565 512.118 107.909 513.424 109.215C514.734 110.525 516.08 112.042 517.426 113.724Z"
+        fill="white"
+      />
+      <path
+        d="M579.867 87.2869L580.116 87.599L579.857 87.9033C578.423 89.5889 576.971 91.1268 575.541 92.474C574.111 93.8162 572.77 95.0757 571.51 96.2523L571.19 96.5513L570.86 96.2628C569.511 95.0804 568.126 93.7811 566.746 92.4011C565.358 91.0142 563.931 89.4584 562.502 87.7771L562.235 87.4636L562.502 87.15C563.92 85.48 565.284 83.9878 566.557 82.7148C567.83 81.4414 569.281 80.1188 570.868 78.7838L571.18 78.5215L571.492 78.784C573.089 80.1292 574.561 81.473 575.865 82.7778C577.174 84.0858 578.52 85.6028 579.867 87.2869Z"
+        fill="white"
+      />
+      <path
+        d="M586.578 29.3593C587.374 35.0657 587.778 40.7217 587.778 46.1705C587.778 50.7477 587.13 54.602 585.852 57.6266C584.563 60.6785 582.641 63.0999 580.141 64.8236C577.664 66.5327 574.64 67.7653 571.152 68.487C567.732 69.1965 563.803 69.5572 559.477 69.5646L559.471 69.5673H559.223L559.22 69.5662C558.045 69.5647 556.983 69.545 555.992 69.5039C555.146 69.4705 554.286 69.4235 553.414 69.3621C553.663 70.5779 553.789 71.7096 553.789 72.734C553.789 76.0701 552.965 79.3024 551.34 82.3413C549.719 85.368 547.301 88.0904 544.152 90.4331C541.015 92.7636 537.152 94.6312 532.672 95.9842C528.193 97.3347 523.021 98.0195 517.299 98.0195C509.458 98.0195 503.012 96.817 498.141 94.4453C493.242 92.0603 489.59 88.6222 487.285 84.2264C484.993 79.8525 483.831 74.6728 483.831 68.8312C483.831 66.2153 484.088 63.4546 484.594 60.6258C485.1 57.8021 485.782 55.0078 486.622 52.3205C487.463 49.6283 488.359 47.1969 489.285 45.094L489.449 44.7221L496.993 46.5726L496.869 47.0476C496.286 49.2958 495.759 51.6159 495.303 53.9434C494.844 56.2739 494.508 58.5451 494.302 60.6942C494.095 62.8441 493.989 64.7771 493.989 66.4396C493.989 72.8018 495.919 77.5666 499.725 80.6016C503.562 83.6643 509.941 85.2171 518.684 85.2171C524.064 85.2171 528.783 84.6307 532.711 83.4741C536.613 82.3223 539.643 80.8104 541.717 78.9804C543.738 77.1967 544.764 75.307 544.764 73.3634C544.764 71.818 544.077 70.4761 542.666 69.2612C541.221 68.0178 538.662 66.93 535.059 66.028L529.014 64.5169L532.72 53.2621L533.164 53.3831C537.734 54.6297 542.242 55.5145 546.562 56.0128C550.888 56.5119 555.189 56.765 559.347 56.765C563.24 56.765 566.513 56.5137 569.073 56.0184C571.614 55.5265 573.642 54.8664 575.099 54.0564C576.021 53.5188 576.687 52.9376 577.064 52.3339C577.433 51.7438 577.62 50.6865 577.62 49.192C577.62 47.8057 577.451 45.8795 577.12 43.4669C576.787 41.0602 576.323 38.3373 575.74 35.3744C575.162 32.4431 574.506 29.3987 573.793 26.326C573.082 23.2784 572.344 20.4276 571.596 17.8533L571.477 17.4403L583.08 12.5254L583.229 13.0562C584.652 18.1674 585.779 23.6526 586.578 29.3593Z"
+        fill="white"
+      />
+      <path
+        d="M703.779 45.9891L702.818 58.3498L702.529 58.4581C698.492 59.9718 694.011 61.4163 689.207 62.7515C684.395 64.0911 679.277 65.2801 673.998 66.2855C668.706 67.2937 663.378 68.1003 658.162 68.6832C652.975 69.2648 647.897 69.5604 643.066 69.5655L643.062 69.5675H642.814L642.806 69.5629C640.214 69.5506 637.691 69.1884 635.31 68.4769C633.18 67.843 631.268 66.8841 629.614 65.6216C629.052 71.1553 627.73 76.0105 625.684 80.0652C623.522 84.3426 620.686 87.9527 617.25 90.7952C613.821 93.6312 609.896 95.8406 605.584 97.3622C601.288 98.8784 596.719 99.9034 592.004 100.409L591.61 100.451L587.917 88.8233L588.488 88.7465C595.28 87.8337 601.133 86.0727 605.886 83.5125C610.609 80.9646 614.274 77.5716 616.779 73.428C619.265 69.3109 620.533 64.2878 620.549 58.4958C619.05 55.4805 617.617 51.8931 616.293 47.8316C614.941 43.6959 613.585 39.3718 612.261 34.9799L612.146 34.6006L621.713 29.4707L621.877 30.05C623.458 35.6315 624.977 40.2535 626.393 43.7876C627.795 47.2959 629.274 50.0286 630.79 51.91C632.277 53.7615 634.005 55.044 635.925 55.7225C637.875 56.4144 640.235 56.7651 642.938 56.7651C645.378 56.7651 648.121 56.6806 651.094 56.5139C653.81 56.3638 656.757 56.1084 659.868 55.7537C657.814 53.691 656.084 51.2647 654.717 48.5273C653.179 45.4522 652.399 42.1602 652.399 38.743C652.399 35.3433 652.981 32.067 654.129 29.0051C655.278 25.9406 656.94 23.1785 659.068 20.7955C661.199 18.4085 663.772 16.5054 666.717 15.1392C669.666 13.7728 673.018 13.0801 676.677 13.0801C683.818 13.0801 690.282 15.6639 695.887 20.7597L696.11 20.9629L693.598 29.6159L693.078 29.3563C689.775 27.7062 686.685 26.6198 683.894 26.127C681.083 25.6307 678.485 25.379 676.174 25.379C673.568 25.379 671.134 25.8532 668.935 26.7882C666.756 27.7172 665 29.0425 663.717 30.7272C662.446 32.395 661.802 34.4563 661.802 36.8543C661.802 38.6157 662.27 40.4039 663.194 42.1693C664.125 43.9533 665.421 45.5562 667.045 46.9343C668.671 48.3187 670.635 49.4554 672.884 50.3135C675.125 51.1695 677.629 51.6035 680.328 51.6035C681.407 51.6035 682.496 51.5616 683.563 51.479C684.616 51.3993 685.924 51.1705 687.452 50.7988C689.013 50.4193 691.06 49.8702 693.541 49.1668C696.012 48.468 699.225 47.4744 703.091 46.2138L703.779 45.9891Z"
+        fill="white"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_3578_25388">
+        <rect width="704" height="123" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+);
+
+export default ArabicBrandSVG;

src/app/components/Navigation/config.ts

@@ -0,0 +1,5 @@
+import { Services } from '#app/models/types/global';
+
+const SERVICES_WITH_NEW_NAV: Services[] = ['arabic', 'tamil'] as const;
+
+export default SERVICES_WITH_NEW_NAV;

src/app/components/Navigation/index.amp.test.tsx

@@ -0,0 +1,5 @@
+describe('Navigation - AMP', () => {
+  it('should render', () => {
+    expect(true).toBeTruthy();
+  });
+});

src/app/components/Navigation/index.amp.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import Navigation from '#psammead/psammead-navigation/src';
+import { ScrollableNavigation } from '#psammead/psammead-navigation/src/ScrollableNavigation';
+import {
+  AmpDropdown,
+  AmpMenuButton,
+} from '#psammead/psammead-navigation/src/DropdownNavigation';
+import { GEL_GROUP_2_SCREEN_WIDTH_MAX } from '#psammead/gel-foundations/src/breakpoints';
+import styled from '@emotion/styled';
+
+import type { AmpNavigationContainerProps } from './types';
+
+const DROPDOWN_ID = 'si-nav-dropdown-menu';
+const NAVIGATION_ID = 'si-nav';
+const SCROLLABLE_ID = 'si-nav-scrollable';
+const HIDDEN_CLASS_NAME = 'si-nav-scrollable-hidden';
+const OPEN_CLASS_NAME = 'si-nav-open';
+
+const StyledAmpScrollableNavigation = styled(ScrollableNavigation)`
+  &.${HIDDEN_CLASS_NAME} {
+    @media (max-width: ${GEL_GROUP_2_SCREEN_WIDTH_MAX}) {
+      display: none;
+      visibility: hidden;
+    }
+  }
+`;
+
+const AmpNavigationContainer: React.FC<AmpNavigationContainerProps> = ({
+  dir,
+  menuAnnouncedText,
+  bottomScrollableListItems,
+  dropdownListItems,
+}) => (
+  <Navigation
+    dir={dir}
+    id={NAVIGATION_ID}
+    ampOpenClass={OPEN_CLASS_NAME as any}
+  >
+    <AmpMenuButton
+      announcedText={menuAnnouncedText}
+      onToggle={`
+        ${DROPDOWN_ID}.toggleVisibility,
+        ${SCROLLABLE_ID}.toggleClass(class=${HIDDEN_CLASS_NAME}),
+        ${NAVIGATION_ID}.toggleClass(class=${OPEN_CLASS_NAME})
+      `}
+      dir={dir}
+    />
+    {/* Hidden attribute allows us to toggle visibility on the dropdown
+        using AMP actions. */}
+    <AmpDropdown id={DROPDOWN_ID} data-e2e="dropdown-nav" hidden>
+      {dropdownListItems}
+    </AmpDropdown>
+    {/* TODO: Implement the new navigation in AMP */}
+    <StyledAmpScrollableNavigation
+      dir={dir}
+      id={SCROLLABLE_ID}
+      navPosition={null}
+    >
+      {bottomScrollableListItems}
+    </StyledAmpScrollableNavigation>
+  </Navigation>
+);
+
+export default AmpNavigationContainer;

src/app/components/Navigation/index.canonical.test.tsx

@@ -0,0 +1,5 @@
+describe('Navigation - Canonical', () => {
+  it('should render', () => {
+    expect(true).toBeTruthy();
+  });
+});

src/app/components/Navigation/index.canonical.tsx

@@ -0,0 +1,93 @@
+import React, { useState, use } from 'react';
+import Navigation from '#psammead/psammead-navigation/src';
+import { ScrollableNavigation } from '#psammead/psammead-navigation/src/ScrollableNavigation';
+import {
+  CanonicalDropdown,
+  CanonicalMenuButton,
+} from '#psammead/psammead-navigation/src/DropdownNavigation';
+import { GROUP_2_MAX_WIDTH_BP } from '#app/components/ThemeProvider/mediaQueries';
+import useMediaQuery from '#hooks/useMediaQuery';
+import { RequestContext } from '#app/contexts/RequestContext';
+import TopBarOJs from '#app/components/TopBarOJs';
+import useToggle from '#app/hooks/useToggle';
+import { TopStoryItem } from '#app/pages/ArticlePage/PagePromoSections/TopStoriesSection/types';
+import { Direction } from '#app/models/types/global';
+import styles from './index.styles';
+
+interface CanonicalNavigationContainerProps {
+  dir: Direction;
+  menuAnnouncedText: string;
+  topScrollableListItems?: React.ReactNode;
+  topDivider?: React.ReactNode;
+  bottomScrollableListItems: React.ReactNode;
+  dropdownListItems: React.ReactNode;
+  menuButton?: React.ReactNode;
+  isOpen?: boolean;
+  setIsOpen?: (open: boolean) => void;
+  blocks?: TopStoryItem[];
+}
+
+const CanonicalNavigationContainer: React.FC<
+  CanonicalNavigationContainerProps
+> = ({
+  dir,
+  menuAnnouncedText,
+  topScrollableListItems,
+  bottomScrollableListItems,
+  dropdownListItems,
+  blocks,
+}) => {
+  const { isLite } = use(RequestContext);
+  const { enabled } = useToggle('topBarOJs');
+  const [isOpen, setIsOpen] = useState(false);
+
+  useMediaQuery(`(max-width: ${GROUP_2_MAX_WIDTH_BP}rem)`, event => {
+    if (!event.matches) {
+      setIsOpen(false);
+    }
+  });
+
+  return (
+    <Navigation dir={dir} isOpen={isOpen}>
+      <div css={styles.navStack}>
+        <div style={{ position: 'relative', width: '100%' }}>
+          <div css={styles.topRow}>
+            <ScrollableNavigation
+              dir={dir}
+              css={styles.topRowItems}
+              navPosition="primary"
+            >
+              {topScrollableListItems}
+            </ScrollableNavigation>
+            {!isLite && (
+              <CanonicalMenuButton
+                css={styles.menuButton}
+                announcedText={menuAnnouncedText}
+                isOpen={isOpen}
+                onClick={() => setIsOpen(!isOpen)}
+                dir={dir}
+              />
+            )}
+          </div>
+          <CanonicalDropdown isOpen={isOpen} css={styles.dropdown}>
+            {dropdownListItems}
+          </CanonicalDropdown>
+        </div>
+
+        <div css={styles.lowerNavWrapper}>
+          <ScrollableNavigation
+            dir={dir}
+            css={styles.bottomRowItems}
+            navPosition="secondary"
+          >
+            {bottomScrollableListItems}
+          </ScrollableNavigation>
+        </div>
+      </div>
+      <div css={styles.bottomDivider} />
+      {enabled && <TopBarOJs blocks={blocks ?? []} />}
+    </Navigation>
+  );
+};
+
+export default CanonicalNavigationContainer;

src/app/components/Navigation/index.stories.tsx

@@ -0,0 +1,8 @@
+const Component = () => <div>Navigation</div>;
+
+export default {
+  title: 'Components/NewNavigation',
+  Component,
+};
+
+export const Example = Component;