@apolitical/component-library 8.3.26 → 8.3.28-ST.0

package/navigation/language-switcher/language-switcher.d.ts

@@ -1,23 +1,23 @@
-import { LanguageType } from '../../context';
+import { TLocale } from '@apolitical/contracts';
 export type UrlPartsType = {
     url: string;
     position: 'before-lang' | 'after-lang';
 }[];
 interface Props {
     /** The language the content is in */
-    currentLanguage: LanguageType;
+    currentLanguage: TLocale;
     /** Whether article is the original language or not */
     isOriginalLanguage?: boolean;
     /** Whether article has been translated by a real person or not */
     isHumanTranslation?: boolean;
     /** Which translations are available */
     translations: {
-        [key in LanguageType]?: null | {
+        [key in TLocale]?: null | {
             post_name?: string;
         };
     };
     /** The function to call when the language is changed */
-    onChange?: (language?: LanguageType, url?: string) => void;
+    onChange?: (language?: TLocale, url?: string) => void;
     /** Additional parts of the URL */
     urlParts?: UrlPartsType;
     /** The version of the language switcher to use */

package/navigation/language-switcher/language-switcher.helpers.d.ts

@@ -1,6 +1,6 @@
-import { LanguageType } from '../../context';
+import { TLocale } from '@apolitical/contracts';
 import { UrlPartsType } from './language-switcher';
-export declare const getUrl: (lang: LanguageType, slug?: string, urlParts?: UrlPartsType) => string | {
+export declare const getUrl: (lang: TLocale, slug?: string, urlParts?: UrlPartsType) => string | {
     url: string;
     urlForRouter: string;
 };

package/navigation/language-switcher/language-switcher.mock.d.ts

@@ -1,33 +1,14 @@
 declare namespace _default {
-    let currentLanguage: string;
-    let isOriginalLanguage: boolean;
-    let isHumanTranslation: boolean;
-    let urlParts: {
+    export { DEFAULT_LOCALE as currentLanguage };
+    export let isOriginalLanguage: boolean;
+    export let isHumanTranslation: boolean;
+    export let urlParts: {
         url: string;
         position: string;
     }[];
-    let translations: {
-        en: null;
-        es: {
-            canonical_url: string;
-            post_name: string;
-        };
-        fr: {
-            canonical_url: string;
-            post_name: string;
-        };
-        pt: {
-            canonical_url: string;
-            post_name: string;
-        };
-        id: {
-            canonical_url: string;
-            post_name: string;
-        };
-        'pt-BR': {
-            canonical_url: string;
-            post_name: string;
-        };
-    };
+    export namespace translations {
+        let en: null;
+    }
 }
 export default _default;
+import { DEFAULT_LOCALE } from '@apolitical/contracts';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apolitical/component-library",
-  "version": "8.3.26",
+  "version": "8.3.28-ST.0",
   "main": "./index.js",
   "types": "./index.d.ts",
   "exports": {
@@ -14,6 +14,7 @@
     "getstream": "8.4.1"
   },
   "dependencies": {
+    "@apolitical/contracts": "3.8.0-ST.0",
     "@suprsend/react-inbox": "3.6.1",
     "@tanstack/query-core": "5.8.3",
     "@tanstack/react-query": "5.8.3",

package/styles/uclasses/uclasses.scss

@@ -239,6 +239,34 @@ $font-size-md: 1rem;
   margin-top: 0;
 }
 
+.u-mt-1 {
+  margin-top: 0.25rem; /* 4px */
+}
+
+.u-mt-2 {
+  margin-top: 0.5rem; /* 8px */
+}
+
+.u-mt-3 {
+  margin-top: 0.75rem; /* 12px */
+}
+
+.u-mt-4 {
+  margin-top: 1rem; /* 16px */
+}
+
+.u-mt-5 {
+  margin-top: 1.25rem; /* 20px */
+}
+
+.u-mt-6 {
+  margin-top: 1.5rem; /* 24px */
+}
+
+.u-mt-8 {
+  margin-top: 2rem; /* 32px */
+}
+
 .u-mt-10 {
   margin-top: 2.5rem; /* 40px */
 }
@@ -251,6 +279,38 @@ $font-size-md: 1rem;
   margin-right: 0;
 }
 
+.u-mr-1 {
+  margin-right: 0.25rem; /* 4px */
+}
+
+.u-mr-2 {
+  margin-right: 0.5rem; /* 8px */
+}
+
+.u-mr-3 {
+  margin-right: 0.75rem; /* 12px */
+}
+
+.u-mr-4 {
+  margin-right: 1rem; /* 16px */
+}
+
+.u-mr-5 {
+  margin-right: 1.25rem; /* 20px */
+}
+
+.u-mr-6 {
+  margin-right: 1.5rem; /* 24px */
+}
+
+.u-mr-8 {
+  margin-right: 2rem; /* 32px */
+}
+
+.u-mr-10 {
+  margin-right: 2.5rem; /* 40px */
+}
+
 .u-mb-auto {
   margin-bottom: auto;
 }
@@ -259,6 +319,38 @@ $font-size-md: 1rem;
   margin-bottom: 0;
 }
 
+.u-mb-1 {
+  margin-bottom: 0.25rem; /* 4px */
+}
+
+.u-mb-2 {
+  margin-bottom: 0.5rem; /* 8px */
+}
+
+.u-mb-3 {
+  margin-bottom: 0.75rem; /* 12px */
+}
+
+.u-mb-4 {
+  margin-bottom: 1rem; /* 16px */
+}
+
+.u-mb-5 {
+  margin-bottom: 1.25rem; /* 20px */
+}
+
+.u-mb-6 {
+  margin-bottom: 1.5rem; /* 24px */
+}
+
+.u-mb-8 {
+  margin-bottom: 2rem; /* 32px */
+}
+
+.u-mb-10 {
+  margin-bottom: 2.5rem; /* 40px */
+}
+
 .u-ml-auto {
   margin-left: auto;
 }
@@ -267,6 +359,38 @@ $font-size-md: 1rem;
   margin-left: 0;
 }
 
+.u-ml-1 {
+  margin-left: 0.25rem; /* 4px */
+}
+
+.u-ml-2 {
+  margin-left: 0.5rem; /* 8px */
+}
+
+.u-ml-3 {
+  margin-left: 0.75rem; /* 12px */
+}
+
+.u-ml-4 {
+  margin-left: 1rem; /* 16px */
+}
+
+.u-ml-5 {
+  margin-left: 1.25rem; /* 20px */
+}
+
+.u-ml-6 {
+  margin-left: 1.5rem; /* 24px */
+}
+
+.u-ml-8 {
+  margin-left: 2rem; /* 32px */
+}
+
+.u-ml-10 {
+  margin-left: 2.5rem; /* 40px */
+}
+
 // padding
 .u-py-0 {
   padding-top: 0;
@@ -618,10 +742,159 @@ $font-size-md: 1rem;
 }
 
 // width
+.u-w-0 {
+  width: 0;
+}
+
+.u-w-px {
+  width: 1px;
+}
+
+.u-w-1 {
+  width: 0.25rem; /* 4px */
+}
+
+.u-w-2 {
+  width: 0.5rem; /* 8px */
+}
+
+.u-w-3 {
+  width: 0.75rem; /* 12px */
+}
+
+.u-w-4 {
+  width: 1rem; /* 16px */
+}
+
+.u-w-5 {
+  width: 1.25rem; /* 20px */
+}
+
+.u-w-6 {
+  width: 1.5rem; /* 24px */
+}
+
+.u-w-8 {
+  width: 2rem; /* 32px */
+}
+
+.u-w-10 {
+  width: 2.5rem; /* 40px */
+}
+
+.u-w-12 {
+  width: 3rem; /* 48px */
+}
+
+.u-w-16 {
+  width: 4rem; /* 64px */
+}
+
+.u-w-20 {
+  width: 5rem; /* 80px */
+}
+
+.u-w-24 {
+  width: 6rem; /* 96px */
+}
+
+.u-w-32 {
+  width: 8rem; /* 128px */
+}
+
+.u-w-40 {
+  width: 10rem; /* 160px */
+}
+
+.u-w-48 {
+  width: 12rem; /* 192px */
+}
+
+.u-w-auto {
+  width: auto;
+}
+
 .u-w-full {
   width: 100%;
 }
 
+// height
+.u-h-0 {
+  height: 0;
+}
+
+.u-h-px {
+  height: 1px;
+}
+
+.u-h-1 {
+  height: 0.25rem; /* 4px */
+}
+
+.u-h-2 {
+  height: 0.5rem; /* 8px */
+}
+
+.u-h-3 {
+  height: 0.75rem; /* 12px */
+}
+
+.u-h-4 {
+  height: 1rem; /* 16px */
+}
+
+.u-h-5 {
+  height: 1.25rem; /* 20px */
+}
+
+.u-h-6 {
+  height: 1.5rem; /* 24px */
+}
+
+.u-h-8 {
+  height: 2rem; /* 32px */
+}
+
+.u-h-10 {
+  height: 2.5rem; /* 40px */
+}
+
+.u-h-12 {
+  height: 3rem; /* 48px */
+}
+
+.u-h-16 {
+  height: 4rem; /* 64px */
+}
+
+.u-h-20 {
+  height: 5rem; /* 80px */
+}
+
+.u-h-24 {
+  height: 6rem; /* 96px */
+}
+
+.u-h-32 {
+  height: 8rem; /* 128px */
+}
+
+.u-h-40 {
+  height: 10rem; /* 160px */
+}
+
+.u-h-48 {
+  height: 12rem; /* 192px */
+}
+
+.u-h-auto {
+  height: auto;
+}
+
+.u-h-full {
+  height: 100%;
+}
+
 // max-width
 .u-max-w-0 {
   max-width: 0;
@@ -1250,3 +1523,113 @@ $font-size-md: 1rem;
 .u-gap-y-72 {
   row-gap: 18rem; /* 288px */
 }
+
+// font-weight
+.u-font-medium {
+  font-weight: 500;
+}
+
+.u-font-semibold {
+  font-weight: 600;
+}
+
+.u-font-bold {
+  font-weight: 700;
+}
+
+// border-radius
+.u-rounded-none {
+  border-radius: 0;
+}
+
+.u-rounded {
+  border-radius: 0.25rem; /* 4px */
+}
+
+.u-rounded-md {
+  border-radius: 0.375rem; /* 6px */
+}
+
+.u-rounded-lg {
+  border-radius: 0.5rem; /* 8px */
+}
+
+.u-rounded-xl {
+  border-radius: 0.75rem; /* 12px */
+}
+
+.u-rounded-2xl {
+  border-radius: 1rem; /* 16px */
+}
+
+.u-rounded-3xl {
+  border-radius: 1.5rem; /* 24px */
+}
+
+.u-rounded-full {
+  border-radius: 9999px; /* 50% */
+}
+
+// flex-basis
+.u-basis-0 {
+  flex-basis: 0;
+}
+
+.u-basis-1 {
+  flex-basis: 0.25rem; /* 4px */
+}
+
+.u-basis-2 {
+  flex-basis: 0.5rem; /* 8px */
+}
+
+.u-basis-3 {
+  flex-basis: 0.75rem; /* 12px */
+}
+
+.u-basis-4 {
+  flex-basis: 1rem; /* 16px */
+}
+
+.u-basis-5 {
+  flex-basis: 1.25rem; /* 20px */
+}
+
+.u-basis-6 {
+  flex-basis: 1.5rem; /* 24px */
+}
+
+.u-basis-auto {
+  flex-basis: auto;
+}
+
+.u-basis-full {
+  flex-basis: 100%;
+}
+
+.u-line-clamp-2 {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.u-line-clamp-3 {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+  line-clamp: 3;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.u-line-clamp-4 {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 4;
+  line-clamp: 4;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}