WEBDEV-9038: Migrate the topnav into elements

src/elements/ia-topnav/assets/img/icon-audio.ts

@@ -0,0 +1,28 @@
+import { html } from 'lit';
+
+export default html`
+  <svg
+    width="40px"
+    height="40px"
+    viewBox="0 0 40 40"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-labelledby="audioTitleID audioDescID"
+  >
+    <title id="audioTitleID">Audio icon</title>
+    <desc id="audioDescID">An illustration of an audio speaker.</desc>
+    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+      <g transform="translate(10, 8)" class="fill-color">
+        <path
+          d="M19.4264564,11.8585048 L19.4264564,20.7200433 C19.4264564,22.3657576 18.8838179,23.2519114 16.8489237,23.2519114 C12.2364969,23.125318 7.75972977,23.125318 3.14730298,23.2519114 C1.24806842,23.2519114 0.569770368,22.492351 0.569770368,20.7200433 L0.569770368,2.74377955 C0.569770368,1.09806526 1.11240881,0.211911416 3.14730298,0.211911416 C7.75972977,0.338504822 12.2364969,0.338504822 16.8489237,0.211911416 C18.7481583,0.211911416 19.4264564,0.971471855 19.4264564,2.74377955 C19.2907967,5.78202131 19.4264564,8.82026306 19.4264564,11.8585048 L19.4264564,11.8585048 Z M10.0659432,2.74377955 C8.16670861,2.74377955 6.67445288,4.13630702 6.67445288,5.90861471 C6.67445288,7.6809224 8.16670861,9.07344988 10.0659432,9.07344988 C11.9651777,9.07344988 13.4574335,7.6809224 13.4574335,5.90861471 C13.4574335,4.13630702 11.8295181,2.74377955 10.0659432,2.74377955 L10.0659432,2.74377955 Z M10.0659432,11.4787246 C7.21709133,11.4787246 5.04653754,13.6308125 5.04653754,16.1626806 C5.04653754,18.8211422 7.35275094,20.8466367 10.0659432,20.8466367 C12.914795,20.8466367 15.0853488,18.6945488 15.0853488,16.1626806 C15.0853488,13.6308125 12.7791354,11.4787246 10.0659432,11.4787246 L10.0659432,11.4787246 Z"
+        ></path>
+        <ellipse
+          cx="10.2016028"
+          cy="16.5690777"
+          rx="1.35659611"
+          ry="1.34075134"
+        ></ellipse>
+      </g>
+    </g>
+  </svg>
+`;

src/elements/ia-topnav/assets/img/icon-close.ts

@@ -0,0 +1,20 @@
+import { html } from 'lit';
+
+export default html`
+  <svg
+    width="40"
+    height="40"
+    viewBox="0 0 40 40"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-labelledby="closeTitleID closeDescID"
+  >
+    <title id="closeTitleID">Close icon</title>
+    <desc id="closeDescID">A line drawing of an X</desc>
+    <path
+      d="m29.1923882 10.8076118c.5857864.5857865.5857864 1.535534 0 2.1213204l-7.0711162 7.0703398 7.0711162 7.0717958c.5857864.5857864.5857864 1.5355339 0 2.1213204-.5857865.5857864-1.535534.5857864-2.1213204 0l-7.0717958-7.0711162-7.0703398 7.0711162c-.5857864.5857864-1.5355339.5857864-2.1213204 0-.5857864-.5857865-.5857864-1.535534 0-2.1213204l7.0706602-7.0717958-7.0706602-7.0703398c-.5857864-.5857864-.5857864-1.5355339 0-2.1213204.5857865-.5857864 1.535534-.5857864 2.1213204 0l7.0703398 7.0706602 7.0717958-7.0706602c.5857864-.5857864 1.5355339-.5857864 2.1213204 0z"
+      class="fill-color"
+      fill-rule="evenodd"
+    />
+  </svg>
+`;

src/elements/ia-topnav/assets/img/icon-donate-unpadded.ts

@@ -0,0 +1,19 @@
+import { html } from 'lit';
+
+export default html`
+  <svg
+    width="40"
+    height="40"
+    viewBox="0 0 40 40"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:svg="http://www.w3.org/2000/svg"
+    aria-labelledby="donateTitleID donateDescID"
+  >
+    <title id="donateTitleID">Donate icon</title>
+    <desc id="donateDescID">An illustration of a heart shape</desc>
+    <path
+      class="fill-color"
+      d="m32.6,8.12c-1.57,-1.51 -3.46,-2.21 -5.65,-2.11c-1,0.03 -2.14,0.51 -3.42,1.44c-1.28,0.92 -2.28,2.09 -3.03,3.51c-0.71,-1.41 -1.72,-2.59 -3,-3.51c-1.29,-0.93 -2.43,-1.41 -3.41,-1.44c-1.46,-0.07 -2.8,0.23 -4.02,0.88c-1.23,0.65 -2.21,1.6 -2.94,2.83c-0.74,1.24 -1.11,2.63 -1.12,4.17c-0.05,2.56 0.85,5.01 2.68,7.37c1.46,1.88 3.52,4.21 6.19,7.04c2.66,2.81 4.53,4.71 5.62,5.69c1,-0.88 2.85,-2.75 5.55,-5.6s4.81,-5.23 6.31,-7.13c1.81,-2.36 2.71,-4.81 2.66,-7.37c-0.04,-2.35 -0.83,-4.28 -2.4,-5.77z"
+    />
+  </svg>
+`;

src/elements/ia-topnav/assets/img/icon-donate.ts

@@ -0,0 +1,18 @@
+import { html } from 'lit';
+
+export default html`
+  <svg
+    width="40"
+    height="40"
+    viewBox="0 0 40 40"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-labelledby="donateTitleID donateDescID"
+  >
+    <title id="donateTitleID">Donate icon</title>
+    <desc id="donateDescID">An illustration of a heart shape</desc>
+    <path
+      class="fill-color"
+      d="m30.0120362 11.0857287c-1.2990268-1.12627221-2.8599641-1.65258786-4.682812-1.57894699-.8253588.02475323-1.7674318.3849128-2.8262192 1.08047869-1.0587873.6955659-1.89622 1.5724492-2.512298 2.63065-.591311-1.0588196-1.4194561-1.9357029-2.4844351-2.63065-1.0649791-.69494706-2.0039563-1.05510663-2.8169316-1.08047869-1.2067699-.04950647-2.318187.17203498-3.3342513.66462439-1.0160643.4925893-1.82594378 1.2002224-2.42963831 2.1228992-.60369453.9226769-.91173353 1.9629315-.92411701 3.1207641-.03715043 1.9202322.70183359 3.7665141 2.21695202 5.5388457 1.2067699 1.4035084 2.912594 3.1606786 5.1174721 5.2715107 2.2048782 2.1108321 3.7565279 3.5356901 4.6549492 4.2745742.8253588-.6646243 2.355647-2.0647292 4.5908647-4.2003145s3.9747867-3.9171994 5.218707-5.3448422c1.502735-1.7723316 2.2355273-3.6186135 2.1983769-5.5388457-.0256957-1.7608832-.6875926-3.2039968-1.9866194-4.3302689z"
+    />
+  </svg>
+`;

src/elements/ia-topnav/assets/img/icon-ellipses.ts

@@ -0,0 +1,19 @@
+import { html } from 'lit';
+
+export default html`
+  <svg
+    height="40"
+    viewBox="0 0 40 40"
+    width="40"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-labelledby="ellipsesTitleID ellipsesDescID"
+  >
+    <title id="ellipsesTitleID">Ellipses icon</title>
+    <desc id="ellipsesDescID">An illustration of text ellipses.</desc>
+    <path
+      class="fill-color"
+      d="m10.5 17.5c1.3807119 0 2.5 1.1192881 2.5 2.5s-1.1192881 2.5-2.5 2.5c-1.38071187 0-2.5-1.1192881-2.5-2.5s1.11928813-2.5 2.5-2.5zm9.5 0c1.3807119 0 2.5 1.1192881 2.5 2.5s-1.1192881 2.5-2.5 2.5-2.5-1.1192881-2.5-2.5 1.1192881-2.5 2.5-2.5zm9.5 0c1.3807119 0 2.5 1.1192881 2.5 2.5s-1.1192881 2.5-2.5 2.5-2.5-1.1192881-2.5-2.5 1.1192881-2.5 2.5-2.5z"
+      fill-rule="evenodd"
+    />
+  </svg>
+`;

src/elements/ia-topnav/assets/img/icon-ia-logo.ts

@@ -0,0 +1,30 @@
+import { html } from 'lit';
+
+export default html`
+  <svg
+    class="ia-logo"
+    viewBox="0 0 27 30"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-labelledby="logoTitleID logoDescID"
+  >
+    <title id="logoTitleID">Internet Archive logo</title>
+    <desc id="logoDescID">
+      A line drawing of the Internet Archive headquarters building façade.
+    </desc>
+    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+      <mask id="mask-2" fill="white">
+        <path
+          d="M26.6666667,28.6046512 L26.6666667,30 L0,30 L0.000283687943,28.6046512 L26.6666667,28.6046512 Z M25.6140351,26.5116279 L25.6140351,28.255814 L1.05263158,28.255814 L1.05263158,26.5116279 L25.6140351,26.5116279 Z M3.62469203,7.6744186 L3.91746909,7.82153285 L4.0639977,10.1739544 L4.21052632,13.9963932 L4.21052632,17.6725617 L4.0639977,22.255044 L4.03962296,25.3421929 L3.62469203,25.4651163 L2.16024641,25.4651163 L1.72094074,25.3421929 L1.55031755,22.255044 L1.40350877,17.6970339 L1.40350877,14.0211467 L1.55031755,10.1739544 L1.68423854,7.80887484 L1.98962322,7.6744186 L3.62469203,7.6744186 Z M24.6774869,7.6744186 L24.9706026,7.82153285 L25.1168803,10.1739544 L25.2631579,13.9963932 L25.2631579,17.6725617 L25.1168803,22.255044 L25.0927809,25.3421929 L24.6774869,25.4651163 L23.2130291,25.4651163 L22.7736357,25.3421929 L22.602418,22.255044 L22.4561404,17.6970339 L22.4561404,14.0211467 L22.602418,10.1739544 L22.7369262,7.80887484 L23.0420916,7.6744186 L24.6774869,7.6744186 Z M9.94042303,7.6744186 L10.2332293,7.82153285 L10.3797725,10.1739544 L10.5263158,13.9963932 L10.5263158,17.6725617 L10.3797725,22.255044 L10.3556756,25.3421929 L9.94042303,25.4651163 L8.47583122,25.4651163 L8.0362015,25.3421929 L7.86556129,22.255044 L7.71929825,17.6970339 L7.71929825,14.0211467 L7.86556129,10.1739544 L8.00005604,7.80887484 L8.30491081,7.6744186 L9.94042303,7.6744186 Z M18.0105985,7.6744186 L18.3034047,7.82153285 L18.449948,10.1739544 L18.5964912,13.9963932 L18.5964912,17.6725617 L18.449948,22.255044 L18.425851,25.3421929 L18.0105985,25.4651163 L16.5460067,25.4651163 L16.1066571,25.3421929 L15.9357367,22.255044 L15.7894737,17.6970339 L15.7894737,14.0211467 L15.9357367,10.1739544 L16.0702315,7.80887484 L16.3753664,7.6744186 L18.0105985,7.6744186 Z M25.6140351,4.53488372 L25.6140351,6.97674419 L1.05263158,6.97674419 L1.05263158,4.53488372 L25.6140351,4.53488372 Z M13.0806755,0 L25.9649123,2.93331338 L25.4484139,3.8372093 L0.771925248,3.8372093 L0,3.1041615 L13.0806755,0 Z"
+          id="path-1"
+        ></path>
+      </mask>
+      <use fill="#FFFFFF" xlink:href="#path-1"></use>
+      <g mask="url(#mask-2)" fill="#FFFFFF">
+        <path
+          d="M0,0 L26.6666667,0 L26.6666667,30 L0,30 L0,0 Z"
+          id="swatch"
+        ></path>
+      </g>
+    </g>
+  </svg>
+`;

src/elements/ia-topnav/assets/img/icon-images.ts

@@ -0,0 +1,19 @@
+import { html } from 'lit';
+
+export default html`
+  <svg
+    height="40"
+    viewBox="0 0 40 40"
+    width="40"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-labelledby="imagesTitleID imagesDescID"
+  >
+    <title id="imagesTitleID">Images icon</title>
+    <desc id="imagesDescID">An illustration of two photographs.</desc>
+    <path
+      class="fill-color"
+      d="m20.8219178 15.3769871c0 1.1136708-.8767123 1.8932404-1.8630137 1.8932404s-1.9726027-.8909367-1.9726027-1.8932404c0-1.0023038.8767123-1.8932404 1.9726027-1.8932404.9863014 0 1.8630137.8909366 1.8630137 1.8932404zm-5.9178082-3.7864808h15.4520548v6.0138225l-1.9726028-3.3410125-2.6301369 6.3479237-2.1917809-2.67281-6.1369863 5.1228859h-2.5205479zm-1.7534247-1.6705063v14.9231892h18.8493151v-14.9231892zm-2.9589041 7.2388604c.2191781 0 1.9726028-.3341012 1.9726028-.3341012v-2.0046075l-4.1643836.5568354c.43835616 4.7887846.87671233 9.9116704 1.31506849 14.700455 6.02739731-.5568354 13.26027401-1.5591391 19.39726031-2.1159746-.1095891-.5568354-.1095891-2.0046075-.2191781-2.67281-.4383562.1113671-1.4246575 0-1.8630137.1113671v.8909367c-5.1506849.4454683-10.3013699 1.1136708-15.4520548 1.6705062.109589-.111367-.5479452-7.0161262-.9863014-10.8026071z"
+      fill-rule="evenodd"
+    />
+  </svg>
+`;

src/elements/ia-topnav/assets/img/icon-search.ts

@@ -0,0 +1,19 @@
+import { html } from 'lit';
+
+export default html`
+  <svg
+    height="40"
+    viewBox="0 0 40 40"
+    width="40"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-labelledby="searchTitleID searchDescID"
+  >
+    <title id="searchTitleID">Search icon</title>
+    <desc id="searchDescID">An illustration of a magnifying glass.</desc>
+    <path
+      class="fill-color"
+      d="m32.4526364 29.8875889-8.1719472-7.9751279c1.1046135-1.4876138 1.7652549-3.3102407 1.7652549-5.2846451 0-.101185-.0142895-.1981539-.030573-.2944743.0166158-.0976175.0309053-.196208.0309053-.2990145 0-4.9814145-4.152935-9.0343271-9.2572866-9.0343271-.0907218 0-.1781206.01394537-.2655193.02594487-.0880633-.0119995-.1747974-.02594487-.2655193-.02594487-5.1046839 0-9.25761889 4.0529126-9.25761889 9.0343271 0 .1011849.01395722.1981539.03057294.2947985-.01694804.0976176-.03090525.1958838-.03090525.2986903 0 4.9814145 4.1526027 9.0346514 9.2572866 9.0346514.0907218 0 .1777882-.0139454.2658516-.0262692.0873987.0123238.1741328.0262692.265187.0262692 1.7306942 0 3.3467399-.4747911 4.7338208-1.2852439l8.2882574 8.0886366c.3652137.3564177.843082.53414 1.3212826.53414.4782007 0 .9567336-.1780467 1.3212827-.53414.7294304-.7118622.7294304-1.8660845-.0003323-2.5782711zm-15.9526364-7.8875889c-.0832667-.0118703-.1652765-.0253024-.2513711-.0253024-2.8781993 0-5.2197212-2.3278242-5.2197212-5.1891862 0-.0974612-.013197-.1908615-.0289077-.2836371.0160249-.0940251.0292219-.1889874.0292219-.2880105 0-2.861362 2.3418361-5.1891861 5.2200354-5.1891861.0854662 0 .1677902-.0131198.2510569-.0246777.0826383.0115579.1649623.0246777.2510569.0246777 2.8781993 0 5.2197212 2.3278241 5.2197212 5.1891861 0 .0974612.0135112.1908616.0289077.2839496-.0157107.0940251-.0295361.1886749-.0295361.287698 0 2.861362-2.3415219 5.1891862-5.2197212 5.1891862-.0860946 0-.1684187.0134321-.2507427.0253024z"
+      fill-rule="evenodd"
+    />
+  </svg>
+`;

src/elements/ia-topnav/assets/img/icon-software.ts

@@ -0,0 +1,18 @@
+import { html } from 'lit';
+
+export default html`
+  <svg
+    width="40"
+    height="40"
+    viewBox="0 0 40 40"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-labelledby="softwareTitleID softwareDescID"
+  >
+    <title id="softwareTitleID">Software icon</title>
+    <desc id="softwareDescID">An illustration of a 3.5" floppy disk.</desc>
+    <path
+      class="fill-color"
+      d="m32 30.6900373v-21.44521088c0-.82988428-.4156786-1.24482642-1.2470357-1.24482642h-21.50592858c-.83135715 0-1.24703572.4221795-1.24703572 1.26653851v21.44521089c0 .8588337.41567857 1.2882506 1.24703572 1.2882506h21.48327168c.8458575 0 1.2687863-.4366542 1.2687863-1.3099627zm-5.9950155-20.4410268v6.114667c0 .6694561-.3428744 1.0041841-1.0286232 1.0041841h-10.1294464c-.2622159 0-.4773054-.0802141-.6452685-.2406423s-.2519447-.3642806-.2519447-.6115572v-6.1363791l.0217506-.1311772h12.0326259zm-4.9437353.8295827v5.0010178h3.0405558v-5.0010178zm-9.7134658 18.8035735v-7.753025c0-.5241057.1604108-.9025595.4812325-1.1353613.1897138-.1453504.4011782-.2180256.6343932-.2180256h14.7451099c.3208217 0 .5905898.1091636.8093044.3274907s.3280719.5023936.3280719.8521995v7.8181612l-.0217506.1094652h-16.9772676z"
+    />
+  </svg>
+`;

src/elements/ia-topnav/assets/img/icon-texts.ts

@@ -0,0 +1,18 @@
+import { html } from 'lit';
+
+export default html`
+  <svg
+    height="40"
+    viewBox="0 0 40 40"
+    width="40"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-labelledby="textsTitleID textsDescID"
+  >
+    <title id="textsTitleID">Texts icon</title>
+    <desc id="textsDescID">An illustration of an open book.</desc>
+    <path
+      class="fill-color"
+      d="m10.3323235 11.0007023h6.9060825c.8851083 0 1.5847122.3064258 2.0988114.9192774v14.4324451h-.6460032c-.1435563-.120323-.3528315-.2434552-.6278257-.3693964-.2749942-.1259413-.5201585-.2191097-.7354929-.2795053l-.3048241-.1081503h-5.7042647c-.3108832 0-.5621067-.0601615-.7536705-.1804846-.0717781-.0599274-.1256117-.1439663-.1615008-.2521166-.0358891-.1081502-.0598928-.2043619-.0720112-.2886348v-13.8741368zm19.1752505 0v13.603761c-.0717781.3361555-.2211606.5943584-.4481473.7746089-.0717781.0599274-.1733862.1079162-.304824.1439663-.1314379.0360501-.2451643.0601615-.3411793.0723343h-5.5965975c-.9568865.2640552-1.5068748.5164059-1.649965.757052h-.6634817v-14.4324451c.5140992-.6128516 1.2076439-.9192774 2.0806339-.9192774h6.92426zm1.3814961.6489017-.1796783 15.2976474c-.0955489 0-1.0342578.0119386-2.8161268.035816-1.7818691.0238773-3.3006293.0898911-4.5562806.1980414-1.2556514.1081503-1.9613144.2884008-2.1169891.5407514-.0955488.1924233-.5439291.273419-1.345141.2429871-.8012118-.0304319-1.3155441-.1776755-1.5429969-.4417308-.334654-.3843783-3.4558378-.5765674-9.36355164-.5765674v-15.3875385l-.96830576.3960828v16.2702977c6.4096947-.2041278 9.7760429-.0840388 10.0990445.3602669.2391051.276228.9864833.414342 2.2421347.414342.1915638 0 .4187835-.0210682.6816593-.0632047s.4810068-.0870821.6543929-.1348367c.1733862-.0477547.2719646-.0838048.2957353-.1081503.0838965-.1563732.9599161-.2675666 2.6280587-.3335805 1.6681426-.0660138 3.3213703-.0931684 4.9596831-.0814638l2.4392915.0182591v-16.2344816z"
+    />
+  </svg>
+`;

src/elements/ia-topnav/assets/img/icon-upload-unpadded.ts

@@ -0,0 +1,18 @@
+import { html } from 'lit';
+
+export default html`
+  <svg
+    height="14"
+    width="14"
+    viewBox="8 8 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-labelledby="uploadTitleID uploadDescID"
+  >
+    <title id="uploadTitleID">Upload files</title>
+    <path
+      class="fill-color"
+      d="m20 12.8 8 10.4h-4.8v8.8h-6.4v-8.8h-4.8zm12-4.8v3.2h-24v-3.2z"
+      fill-rule="evenodd"
+    />
+  </svg>
+`;

src/elements/ia-topnav/assets/img/icon-upload.ts

@@ -0,0 +1,21 @@
+import { html } from 'lit';
+
+export default html`
+  <svg
+    width="40"
+    height="40"
+    viewBox="0 0 40 40"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-labelledby="uploadTitleID uploadDescID"
+  >
+    <title id="uploadTitleID">Upload icon</title>
+    <desc id="uploadDescID">
+      An illustration of a horizontal line over an up pointing arrow.
+    </desc>
+    <path
+      class="fill-color"
+      d="m20 12.8 8 10.4h-4.8v8.8h-6.4v-8.8h-4.8zm12-4.8v3.2h-24v-3.2z"
+      fill-rule="evenodd"
+    />
+  </svg>
+`;

src/elements/ia-topnav/assets/img/icon-user.ts

@@ -0,0 +1,19 @@
+import { html } from 'lit';
+
+export default html`
+  <svg
+    width="40"
+    height="40"
+    viewBox="0 0 40 40"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-labelledby="userTitleID userDescID"
+  >
+    <title id="userTitleID">User icon</title>
+    <desc id="userDescID">An illustration of a person's head and chest.</desc>
+    <path
+      class="fill-color"
+      d="m20.7130435 18.0434783c-3.5658385 0-6.4565218-2.9198821-6.4565218-6.5217392 0-3.60185703 2.8906833-6.5217391 6.4565218-6.5217391s6.4565217 2.91988207 6.4565217 6.5217391c0 3.6018571-2.8906832 6.5217392-6.4565217 6.5217392zm-12.9130435 16.9565217c0-7.9240855 5.7813665-14.3478261 12.9130435-14.3478261s12.9130435 6.4237406 12.9130435 14.3478261z"
+      fill-rule="evenodd"
+    />
+  </svg>
+`;