@autobusal/routes-order 1.23.3 → 1.23.4

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## 1.23.4
+
+**The route code is a chip rather than a line of grey text.** Rounded, on the neutral background, bold and letter-spaced, with a route glyph (MdOutlineAltRoute) leading it and the word "Route" as its tooltip.
+
+A route symbol rather than a bus or a ticket: the code identifies which LINE this is - the same job a flight number does - and a bus icon would only repeat what the whole card already says. The glyph is a size larger than the text beside it, because at this scale the icon carries the meaning and the letters are just the value.
+
+Albanian `routes_order.step2.route.name` corrected from "Rruga" (a street) to "Linja" (a line). The key's only consumer is now this tooltip, so it was safe to fix.
+
 ## 1.23.3
 
 **The arrival heading was painting over the price.** Measured: the arrival cell is 165px wide and its content needed **215px**, so it ran 50px into the fare beside it.

package/Found/Route/Route.tsx

@@ -3,6 +3,7 @@ import { TFunction } from 'i18next';
 import { HiOutlineArrowNarrowRight, HiOutlineDocumentText, HiChevronDown, HiChevronUp } from 'react-icons/hi';
 import { BiHourglass } from 'react-icons/bi';
 import { RiBus2Line } from 'react-icons/ri';
+import { MdOutlineAltRoute } from 'react-icons/md';
 import { formatDuration, splitPrice } from '../refine';
 import { Button, RouteFeature, Information, Rating } from '@autobusal/common';
 import { Container, ButtonDetails, SpecialOffer, FavoriteStop, Trip, Company, Location, Stop, Iso, Time, Price, Amount, Decimals, Currency, PriceNotice, LinkCompany, CodeCompany, Details, Detail, ButtonPolicy, TitleDetail, FeaturesItems, Leaves } from './styles';
@@ -92,7 +93,10 @@ const Route = ({ data, type, passengers, t, onSave, children }: Props): JSX.Elem
                identifier of the same kind as the logo above it, and moving it
                here frees a slot in the details row for things that actually
                need explaining - customs on a cross-border run, for one. */ }
-          <CodeCompany to={ bookOnUrl ?? data.link } target="_blank" rel="noopener noreferrer">{ data.code }</CodeCompany>
+          <CodeCompany to={ bookOnUrl ?? data.link } target="_blank" rel="noopener noreferrer" title={ t('routes_order.step2.route.name') }>
+            <MdOutlineAltRoute />
+            { data.code }
+          </CodeCompany>
         </Company>
 
         <Location>

package/Found/Route/styles.ts

@@ -439,9 +439,41 @@ export const LinkCompany = styled(Link)`
  * frees a slot in the details row for things that genuinely need explaining.
  */
 export const CodeCompany = styled(Link)`
-  font-size: ${ props => props.theme.size.xxs };
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  max-width: 100%;
+  padding: 2px 8px;
+  border: 1px solid ${ props => props.theme.background.neutral };
+  border-radius: 100px;
+  background: ${ props => props.theme.background.neutral };
   color: ${ props => props.theme.font.faded };
-  line-height: 1.2;
+  font-size: ${ props => props.theme.size.xxs };
+  font-weight: 700;
+  line-height: 1.4;
+  letter-spacing: .3px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  transition: all .3s ease;
+
+  /*
+   * A route symbol rather than a bus or a ticket. The code identifies which
+   * LINE this is - the same job a flight number does - and a bus icon would
+   * say the thing the whole card already says. Slightly larger than the text
+   * beside it, because at this size the glyph is what carries the meaning
+   * and the letters are only the value.
+   */
+  & > svg {
+    flex-shrink: 0;
+    font-size: ${ props => props.theme.size.s };
+    opacity: .8;
+  }
+
+  &:hover {
+    border-color: ${ props => props.theme.primary.normal };
+    color: ${ props => props.theme.primary.normal };
+  }
 `;
 
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@autobusal/routes-order",
-  "version": "1.23.3",
+  "version": "1.23.4",
   "author": "Ferjolt Ozuni",
   "type": "module",
   "main": "index.ts"