@codecavepro/brand 3.2.6 → 3.3.0

package/dist/src/common/ArticlePreview.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { formattedDate } from "../helpers/date-formatter.ts";
+import { formatMessage, useBrandMessages } from "../lib/i18n/messages.ts";
 
 /* The fields this component actually reads, instead of the generated Strapi
  * `Article`. TypeScript is structural, so a real Article still satisfies this
@@ -28,6 +29,7 @@ const props = defineProps<{
 }>()
 
 const imageUrl = (url: string) => props.resolveImage?.(url) ?? url
+const messages = useBrandMessages()
 </script>
 
 <template>
@@ -35,13 +37,11 @@ const imageUrl = (url: string) => props.resolveImage?.(url) ?? url
       rounded-[2.25rem] bg-surface-secondary hover:bg-surface-tertiary transition-colors cursor-pointer border-surface-tertiary border
       ${className ?? ''}`">
     <div class="flex flex-col sm:flex-row gap-5 sm:gap-8 h-fit">
-      <div class="w-full h-full p-1">
-         <img loading="lazy" class="sm:w-[132px] sm:h-[132px] rounded-xl object-cover" 
+      <img loading="lazy" class="sm:w-33 sm:h-33 rounded-xl object-cover" 
         :src="imageUrl(article.cover.url)" 
         :alt="article.title" 
         :width="100" 
         :height="100"/>
-      </div>
       <div class="space-y-2 sm:space-y-3">
         <time class="text-body-secondary text-xs sm:text-sm" :datetime="article.date?.toString()">
           {{ formattedDate(article.locale, article.date) }}
@@ -56,7 +56,7 @@ const imageUrl = (url: string) => props.resolveImage?.(url) ?? url
         {{ article.excerpt }}
       </p>
       <p class="text-xs sm:text-sm text-body-secondary mt-6 sm:mt-7">
-        Reading time: {{ article.readingtime }} m.
+        {{ formatMessage(messages.articlePreview.readingTime, { minutes: String(article.readingtime ?? '') }) }}
       </p>
     </div>
   </a>

package/dist/src/common/BrandNav.vue

@@ -32,6 +32,8 @@
  * the stylesheet. Standing on tokens instead means this bar renders the same in
  * both, and a consumer needs no global class layer to install it.
  */
+import { useBrandMessages } from '../lib/i18n/messages.ts';
+
 export interface NavItem {
   /** Link text, and the value `current` is matched against. */
   name: string;
@@ -71,10 +73,12 @@ withDefaults(defineProps<{
   logoHref: "/",
   logoAlt: "CODECAVE",
 });
+
+const messages = useBrandMessages();
 </script>
 
 <template>
-  <nav class="brand-nav" aria-label="Main">
+  <nav class="brand-nav" :aria-label="messages.brandNav.label">
     <div class="brand-nav-inner">
       <ul>
         <li v-for="item in left" :key="item.name" :class="{ dropdown: item.slot, badged: item.badge }">

package/dist/src/common/GlowButton.vue

@@ -99,9 +99,9 @@ onMounted(() => {
       @mousemove="handleMouseMove"
       @mouseenter="handleMouseEnter"
       @mouseleave="handleMouseLeave"
-      class="cursor-pointer flex items-center justify-center relative z-[1] overflow-hidden w-full h-12 px-6 py-1 rounded-full bg-glow-25"
+      class="cursor-pointer flex items-center justify-center relative z-[1] overflow-hidden w-full min-h-12 px-6 py-1 rounded-full bg-glow-25"
     >
-      <p class="relative z-[2] text-primary-800 font-bold select-none">
+      <p class="relative z-[2] text-center text-primary-800 font-bold select-none">
         {{ title }}
       </p>
 

package/dist/src/common/InputText.vue

@@ -18,27 +18,35 @@ defineEmits(['update:modelValue'])
 
 <template>
   <div class="w-full relative">
-    <label :for="id" class="absolute flex items-center gap-0.5 pl-3 pt-3 font-bold text-heading text-sm">
-      <span>{{ label }}</span>
-      <AsteriskIcon v-if="isRequired" />
-    </label>
+    <!-- The box is this wrapper rather than the input, and the label sits in
+         the flow above the input rather than floating over its top padding, as
+         TextField's does: a label that wraps, as a translated one in half a
+         form's width does, now pushes the input down instead of covering what
+         was typed. -mb-1 keeps a one-line field 66px high with its text where
+         it was. -->
+    <div :class="`input-box flex flex-col bg-surface-secondary rounded-lg border border-surface-tertiary
+      hover:bg-surface-tertiary transition-colors ${isError ? 'input-error' : ''}`">
+      <label :for="id" class="flex items-center gap-0.5 px-3 pt-3 -mb-1 font-bold text-heading text-sm">
+        <span>{{ label }}</span>
+        <AsteriskIcon v-if="isRequired" />
+      </label>
 
-    <input
-      :id="id"
-      :type="type"
-      :autocomplete="autocomplete"
-      :placeholder="placeholder"
-      :required="isRequired"
-      :value="modelValue"
-      :aria-invalid="isError ? 'true' : undefined"
-      :aria-describedby="isError ? `${id}-error` : undefined"
-      :class="`
-        w-full p-3 pt-7 bg-surface-secondary rounded-lg placeholder:text-xs placeholder:text-body-secondary
-        focus:outline-none transition-colors border border-surface-tertiary
-        hover:bg-surface-tertiary
-        ${isError ? 'text-error input-error focus:text-error' : 'text-hovered focus:text-hovered'}
-       `" />
-    <span v-if="isError" class="text-error text-xs">
+      <input
+        :id="id"
+        :type="type"
+        :autocomplete="autocomplete"
+        :placeholder="placeholder"
+        :required="isRequired"
+        :value="modelValue"
+        :aria-invalid="isError ? 'true' : undefined"
+        :aria-describedby="isError ? `${id}-error` : undefined"
+        :class="`
+          w-full px-3 pb-3 bg-transparent rounded-b-lg placeholder:text-xs placeholder:text-body-secondary
+          focus:outline-none
+          ${isError ? 'text-error focus:text-error' : 'text-hovered focus:text-hovered'}
+         `" />
+    </div>
+    <span v-if="isError" :id="`${id}-error`" class="text-error text-xs">
       {{ errorMessage }}
     </span>
   </div>
@@ -54,13 +62,19 @@ input:-webkit-autofill:active {
   -webkit-background-clip: text !important;
 }
 
-input:focus {
+/* The autofill colour above paints the input alone, so the label's strip of the
+ * box takes the same colour. */
+.input-box:has(input:-webkit-autofill) {
+  background-color: var(--color-surface-tertiary);
+}
+
+.input-box:focus-within {
   box-shadow: 0 0 16px 0 hsl(from var(--color-brand-500) h s l / 0.5),
     0 0 4px 0 hsl(from var(--color-brand-500) h s l / 0.6);
 }
 
-input.input-error:focus,
-.input-error {
+.input-error,
+.input-error:focus-within {
   box-shadow: 0 0 16px 0 hsl(from var(--color-error-200) h s l / 0.5),
     0 0 4px 0 hsl(from var(--color-error-100) h s l / 0.6);
 }

package/dist/src/common/Review.vue

@@ -3,6 +3,7 @@ import LinkedinIcon from "../assets/icons/linkedin-icon.vue";
 import VerifiedIcon from "../assets/icons/verified-icon.vue";
 import LazyImage from "./images/LazyImage.vue"
 import { isCorrectLinkedInFormat } from "../helpers/form-validator.ts";
+import { formatMessage, useBrandMessages } from "../lib/i18n/messages.ts";
 
 /* See ArticlePreview.vue: the fields read here, not the generated Strapi
  * `Testimonial`, which a caller may still pass unchanged. */
@@ -23,6 +24,7 @@ const props = defineProps<{
 }>()
 
 const imageUrl = (url: string) => props.resolveImage?.(url) ?? url
+const messages = useBrandMessages()
 </script>
 
 <template>
@@ -39,6 +41,7 @@ const imageUrl = (url: string) => props.resolveImage?.(url) ?? url
               target="_blank"
               rel='noopener noreferrer'
               class="text-default-transparent hover:text-action transition-colors"
+              :aria-label="formatMessage(messages.review.linkedin, { name: item.name })"
               :href="item.linkedinurl">
             <component
                 :is="LinkedinIcon"

package/dist/src/common/SubNavbar.vue

@@ -2,6 +2,7 @@
 import { computed, ref, onMounted, nextTick } from 'vue';
 import Shevron from '../assets/icons/shevron.vue';
 import { type MenuItem } from '../lib/menus/menuTypes.ts';
+import { useBrandMessages } from '../lib/i18n/messages.ts';
 
 interface Props {
   section?: string;
@@ -10,6 +11,7 @@ interface Props {
 }
 
 const props = defineProps<Props>();
+const messages = useBrandMessages();
 
 const openItem = ref<string | null>(null);
 
@@ -102,7 +104,7 @@ onMounted(async () => {
 </script>
 
 <template>
-  <nav v-if="items.length" class="ds-subnav" aria-label="Section">
+  <nav v-if="items.length" class="ds-subnav" :aria-label="messages.subNavbar.label">
     <div class="ds-subnav-inner" :class="{ 'is-submenu-open': openItem }">
       <ul>
         <li v-for="item in items" :key="item.name" :ref="el => setItemRef(item.name, el)">

package/dist/src/common/forms/ContactUsForm.vue

@@ -15,6 +15,7 @@ import type {
   ICrmFormClient,
 } from "../../lib/crm/types";
 import { isCorrectEmailFormat, isCorrectLinkedInFormat } from "../../helpers/form-validator.ts";
+import { formatMessage, useBrandMessages } from "../../lib/i18n/messages.ts";
 
 /* This component knows nothing about HubSpot, or about any other CRM. It is
  * handed the labels to render and something that can accept a submission; who
@@ -24,6 +25,8 @@ const props = defineProps<{
   client: ICrmFormClient
 }>()
 
+const messages = useBrandMessages()
+
 const emit = defineEmits<{
   (e: 'submit', values: ContactFormValues): void
   (e: 'submitted', result: CrmSubmitResult): void
@@ -86,15 +89,15 @@ const validateForm = () => {
   let linkedInPage = formData.value.linkedinCompanyPage;
 
   if (email.value !== '' && !isCorrectEmailFormat(email.value)) {
-    email.error = 'Please enter valid email'
+    email.error = messages.contactForm.invalidEmail
     isValid = false
   }
   if (linkedInPage.value !== '' && !isCorrectLinkedInFormat(linkedInPage.value)) {
-    linkedInPage.error = 'Please enter valid LinkedIn page link'
+    linkedInPage.error = messages.contactForm.invalidLinkedIn
     isValid = false
   }
   if (description.maxLength !== undefined && description.value.length > description.maxLength) {
-    description.error = `You faced characters limits. Max length is ${description.maxLength}`
+    description.error = formatMessage(messages.contactForm.tooLong, { max: description.maxLength })
     isValid = false
   }
 
@@ -110,7 +113,7 @@ const validateRequiredFields = () => {
     const isEmpty = field.value === '' || field.value === false
 
     if (field.required && isEmpty) {
-      field.error = 'This field is required'
+      field.error = messages.contactForm.required
       isValid = false
     } else {
       field.error = ''
@@ -177,8 +180,8 @@ const alertKind = ref<'success' | 'error' | null>(null)
 const isAlertVisible = computed(() => alertKind.value !== null)
 
 const ALERT_TEXT = {
-  success: 'Sent! We will contact you within next 1-3 business days.',
-  error: 'We could not send your request. Please try again, or email us at hello@codecave.pro.',
+  success: messages.contactForm.sent,
+  error: messages.contactForm.notSent,
 } as const
 
 const showAlert = (kind: 'success' | 'error') => {
@@ -205,7 +208,7 @@ const validateField = (field) => {
   }
 
   if (field.required && !field.value) {
-    field.error = 'This field is required'
+    field.error = messages.contactForm.required
     return
   }
 
@@ -233,8 +236,14 @@ fields.forEach((key) => {
   )
 })
 
-const companyNamePattern = /[^\p{L}\p{N} &]/u;
-const namePattern = /[^\p{L} ]/u;
+/* What each field refuses as it is typed. A letter includes its combining
+ * marks (\p{M}), and a name keeps its hyphen, apostrophe and period, so
+ * "Anne-Marie O'Neil Jr." survives. A company name also keeps the punctuation
+ * legal names are written with: the quotes of ООО «Ромашка», and commas,
+ * parentheses, slashes and plus signs. Both used to allow letters and spaces
+ * alone. */
+const companyNamePattern = /[^\p{L}\p{M}\p{N} &.,'’"«»„“”()+\/!-]/u;
+const namePattern = /[^\p{L}\p{M} .'’-]/u;
 
 const createSanitizer = (pattern) => {
   return (value) => value.replace(pattern, '');
@@ -279,7 +288,7 @@ const preventInvalidInput = (event, pattern) => {
         <Checkbox id="promotions" v-model="formData.communicationConsent.value" :label="formData.communicationConsent.label" :isRequired="formData.communicationConsent.required" :isError="!!formData.communicationConsent.error" />
       </div>
     </div>
-    <GlowButton @click="submitContactsForm" title="Leave consultation request" class="self-center lg:self-start" />
+    <GlowButton @click="submitContactsForm" :title="messages.contactForm.submit" class="self-center lg:self-start" />
   </form>
   <div v-show="isAlertVisible" class="border border-action group absolute bottom-19.25 md:fixed z-350 left-1/2 -translate-x-1/2 md:top-40 form-alert flex gap-2 md:gap-8 items-center justify-between w-full h-fit max-w-139 bg-surface-secondary p-4 md:px-6 md:py-2.5 rounded-3xl">
     <div v-if="alertKind === 'success'" class="w-8 h-8">
@@ -288,7 +297,7 @@ const preventInvalidInput = (event, pattern) => {
     <p class="text-sm md:text-lg font-bold text-heading md:max-w-sm ">
       {{ alertKind ? ALERT_TEXT[alertKind] : '' }}
     </p>
-    <button @click="alertKind = null" class="group-hover:text-action text-heading transition-colors cursor-pointer">
+    <button @click="alertKind = null" :aria-label="messages.contactForm.closeAlert" class="group-hover:text-action text-heading transition-colors cursor-pointer">
       <component :is="CloseIcon" />
     </button>
   </div>

package/dist/src/common/technology-card.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import Button from "./Button.vue";
 import { computed } from 'vue'
+import { useBrandMessages } from '../lib/i18n/messages.ts'
 
 const props = defineProps<{
   active: boolean
@@ -10,6 +11,8 @@ const props = defineProps<{
   index?: number
 }>()
 
+const messages = useBrandMessages()
+
 const rotate = [
   '-rotate-4 left-2 top-10',
   '-rotate-1 left-1/4 top-20',
@@ -46,10 +49,10 @@ const cardClass = computed(() => [
 <template>
   <div :class="cardClass">
     <div class="card flex flex-col items-center justify-around">
-      <h3 class="max-w-[8rem] text-center text-xl font-bold text-heading text-balance">
+      <h3 class="w-min min-w-[8rem] max-w-full text-center text-xl font-bold text-heading text-balance">
         {{ name }}
       </h3>
-      <Button as="link" :href="href ?? ''" title="Explore service" variant="tertiary" :class="`${active ? 'block' : 'hidden xl:block xl:opacity-0'}`" />
+      <Button as="link" :href="href ?? ''" :title="messages.technologyCard.explore" variant="tertiary" :class="`${active ? 'block' : 'hidden xl:block xl:opacity-0'}`" />
     </div>
   </div>
 </template>

package/dist/src/footer/link-group.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import Button from "../common/Button.vue";
+import { useId } from "vue";
 
 /* Declared here rather than imported from ./links.ts, which is this site's
  * footer content. TypeScript is structural, so every existing caller still
@@ -15,11 +16,17 @@ defineProps<{
   groupName: string
   items: LinkItem[]
 }>()
+
+/* The heading's id, generated rather than built from groupName: a group name
+ * is display text, and "Отзывы о нас" has spaces, which an id cannot hold, so
+ * aria-labelledby named nothing. Astro gives each rendered Vue app its own
+ * idPrefix, so two groups on one page never collide. */
+const labelId = useId()
 </script>
 
 <template>
-  <nav :aria-labelledby="`${groupName}-label`" class="space-y-4">
-    <p :id="`${groupName}-label`" class="text-body-secondary uppercase font-bold text-xs" >
+  <nav :aria-labelledby="labelId" class="space-y-4">
+    <p :id="labelId" class="text-body-secondary uppercase font-bold text-xs" >
       {{ groupName }}
     </p>
     <ul class="space-y-3 xl:space-y-2 text-sm">

package/dist/src/header/mobile-menu.vue

@@ -4,6 +4,7 @@ import Shevron from "../assets/icons/shevron.vue";
 import { computed, onUnmounted, ref, watch } from "vue";
 import BackIcon from "../assets/icons/back-icon.vue";
 import ServicesList from "./services-list.vue";
+import { useBrandMessages } from "../lib/i18n/messages.ts";
 
 /* Everything this drawer used to read out of menu.ts, paths.ts and the site's
  * logo asset now arrives as props, so it reaches no route table and no asset
@@ -26,6 +27,8 @@ const props = defineProps<{
   homeHref?: string
 }>()
 
+const messages = useBrandMessages()
+
 const servicesItem = computed(() => props.items.find((i) => i.submenu?.length))
 
 const isMenuOpen = ref(false)
@@ -81,7 +84,7 @@ const handleCloseMenu = () => {
           <a :href="homeHref" class="px-1.5 hover:opacity-80 transition-opacity">
             <img :src="logo" alt="CODECAVE" />
           </a>
-          <button @click="isMenuOpen = !isMenuOpen" :class="`burger-menu ${isMenuOpen ? 'text-action' : 'text-heading'} transition-colors`">
+          <button @click="isMenuOpen = !isMenuOpen" :aria-label="messages.mobileMenu.toggle" :aria-expanded="isMenuOpen" :class="`burger-menu ${isMenuOpen ? 'text-action' : 'text-heading'} transition-colors`">
             <span></span>
           </button>
         </div>
@@ -94,7 +97,7 @@ const handleCloseMenu = () => {
               <slot name="services" />
             </div>
 
-            <button class="pt-4 shrink-0" @click="isServicesOpen = false">
+            <button class="pt-4 shrink-0" :aria-label="messages.mobileMenu.back" @click="isServicesOpen = false">
               <component :is="BackIcon" class="w-11 h-11 text-action" />
             </button>
           </div>

package/dist/src/lib/i18n/messages.ts

@@ -0,0 +1,129 @@
+/* The text brand components render that no caller passes in: validation
+ * errors, button titles, landmark names and the names of icon-only controls.
+ *
+ * English is built in, so a consumer that provides nothing renders what these
+ * components always rendered. A site in another language hands its translation
+ * to provideBrandMessages() once, from its Vue app entrypoint, instead of
+ * threading one prop per string through every call site.
+ *
+ * WHY THE APP ENTRYPOINT AND NOT A PARENT COMPONENT. Astro renders every island,
+ * and every component it renders without a client directive, as a separate Vue
+ * app, so a provide() in one component reaches nothing in the next. The app
+ * entrypoint is the one place each of those apps passes through, on the server
+ * and in the browser alike:
+ *
+ *   // astro.config.mjs
+ *   vue({ appEntrypoint: '/src/pages/_app' })
+ *
+ *   // src/pages/_app.ts
+ *   export default (app: App) => provideBrandMessages(app, russian)
+ *
+ * A {name} in a string is filled by formatMessage(). A translation keeps every
+ * placeholder and puts it wherever its grammar needs. */
+import { inject, type App, type InjectionKey } from 'vue'
+
+export interface BrandMessages {
+  contactForm: {
+    /** A required field left empty. */
+    required: string
+    invalidEmail: string
+    invalidLinkedIn: string
+    /** {max}: the field's character limit. */
+    tooLong: string
+    /** The submit button. */
+    submit: string
+    /** The alert after a submission the CRM accepted. */
+    sent: string
+    /** The alert after a submission that failed. */
+    notSent: string
+    /** Accessible name of the button that dismisses either alert. */
+    closeAlert: string
+  }
+  articlePreview: {
+    /** {minutes}: the article's reading time. */
+    readingTime: string
+  }
+  technologyCard: {
+    /** The link to the service a card names. */
+    explore: string
+  }
+  brandNav: {
+    /** Accessible name of the top bar's navigation landmark. */
+    label: string
+  }
+  subNavbar: {
+    /** Accessible name of the section bar's navigation landmark. */
+    label: string
+  }
+  mobileMenu: {
+    /** Accessible name of the burger button that opens and closes the drawer. */
+    toggle: string
+    /** Accessible name of the button that leaves the services list. */
+    back: string
+  }
+  review: {
+    /** {name}: the reviewer. Accessible name of the link to their LinkedIn. */
+    linkedin: string
+  }
+}
+
+/** Any subset of the strings, by group. What is left out stays English. */
+export type BrandMessagesOverride = {
+  [Group in keyof BrandMessages]?: Partial<BrandMessages[Group]>
+}
+
+export const ENGLISH_BRAND_MESSAGES: BrandMessages = {
+  contactForm: {
+    required: 'This field is required',
+    invalidEmail: 'Please enter valid email',
+    invalidLinkedIn: 'Please enter valid LinkedIn page link',
+    tooLong: 'You faced characters limits. Max length is {max}',
+    submit: 'Leave consultation request',
+    sent: 'Sent! We will contact you within next 1-3 business days.',
+    notSent: 'We could not send your request. Please try again, or email us at hello@codecave.pro.',
+    closeAlert: 'Close',
+  },
+  articlePreview: {
+    readingTime: 'Reading time: {minutes} m.',
+  },
+  technologyCard: {
+    explore: 'Explore service',
+  },
+  brandNav: {
+    label: 'Main',
+  },
+  subNavbar: {
+    label: 'Section',
+  },
+  mobileMenu: {
+    toggle: 'Menu',
+    back: 'Back',
+  },
+  review: {
+    linkedin: '{name} on LinkedIn',
+  },
+}
+
+/* Symbol.for rather than Symbol(): the key has to be the same value in the
+ * module the site's entrypoint imports and the one each component imports, and
+ * a consumer that aliases this package at a local build can load it twice. */
+const KEY = Symbol.for('codecave.brand.messages') as InjectionKey<BrandMessages>
+
+/** Makes every brand component in `app` render `messages`, English where they leave a string out. */
+export const provideBrandMessages = (app: App, messages: BrandMessagesOverride): void => {
+  const merged = Object.fromEntries(
+    Object.entries(ENGLISH_BRAND_MESSAGES).map(([group, strings]) => [
+      group,
+      { ...strings, ...messages[group as keyof BrandMessages] },
+    ]),
+  ) as unknown as BrandMessages
+  app.provide(KEY, merged)
+}
+
+/** The strings a component renders. Call it in setup. */
+export const useBrandMessages = (): BrandMessages => inject(KEY, ENGLISH_BRAND_MESSAGES)
+
+/** Fills the {name} placeholders of a message. A placeholder with no value is left as written. */
+export const formatMessage = (template: string, values: Record<string, string | number>): string =>
+  template.replace(/\{(\w+)\}/g, (placeholder, name: string) =>
+    Object.hasOwn(values, name) ? String(values[name]) : placeholder)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codecavepro/brand",
-  "version": "3.2.6",
+  "version": "3.3.0",
   "description": "CODECAVE design system — colour, typography and layout tokens as CSS custom properties and as a typed module.",
   "license": "Unlicense",
   "type": "module",