@apolitical/component-library 1.14.1 → 1.14.5-beta.0

package/styles/base/_text.scss

@@ -7,7 +7,8 @@ $default: ('font-size': 16, 'font-size_md': 18, 'line-height': 24, 'line-height_
 $small: ('font-size': 12, 'font-size_md': 14, 'letter-spacing': 0.16, 'line-height': 16, 'margin-bottom': 16);
 $medium: ('font-size': 14, 'font-size_md': 16, 'line-height': 16, 'line-height_md': 20, 'margin-bottom': 18);
 $sup: ('font-size': 10);
-$text-elements: p, li, dt, dd;
+$standard-text-elements: p, li, dt, dd;
+$special-text-elements: h1, h2, h3, h4, h5, h6, a;
 
 @layer base {
   p, li, small {
@@ -17,7 +18,7 @@ $text-elements: p, li, dt, dd;
     .error &, &.error { color: map.get($theme, 'text_error'); }
   }
 
-  #{$text-elements} {
+  #{$standard-text-elements} {
     font-size: px-to-rem(map.get($default, 'font-size'));
     line-height: px-to-rem(map.get($default, 'line-height'));
 
@@ -68,7 +69,7 @@ $text-elements: p, li, dt, dd;
 
   address { font-style: normal; }
 
-  a {
+  #{$special-text-elements} {
       &.text-small {
         font-size: px-to-rem(map.get($small, 'font-size'));
         line-height: px-to-rem(map.get($small, 'line-height'));
@@ -81,7 +82,7 @@ $text-elements: p, li, dt, dd;
   }
 
   @include breakpoint('min-width', 'md') {
-    #{$text-elements} {
+    #{$standard-text-elements} {
       font-size: px-to-rem(map.get($default, 'font-size_md'));
       line-height: px-to-rem(map.get($default, 'line-height_md'));
 
@@ -95,7 +96,7 @@ $text-elements: p, li, dt, dd;
         }
     }
 
-    a {
+    #{$special-text-elements} {
         &.text-small {
           font-size: px-to-rem(map.get($small, 'font-size_md'));
         }

package/styles/variables/colors/_theme.scss

@@ -184,6 +184,13 @@ $theme: (
   logos_small: map.get($c, 'n600'),
   page-layout_gradient_bg_1: map.get($c, 'n50'),
   page-layout_gradient_bg_2: rgb(240 245 255 / 0%),
+  page-layout_bold: map.get($c, 'white'),
+  page-layout_bold_bg: map.get($c, 'b700'),
+  page-layout_inverted_bg: map.get($c, 'g300'),
+  page-layout_bold_circle: map.get($c, 'g300'),
+  page-layout_inverted_circle: map.get($c, 'b700'),
+  page-layout_alt-1_circle: map.get($c, 'y300'),
+  page-layout_alt-2_circle: map.get($c, 'p300'),
   // Loaders
   loading-block_icon_bg: map.get($c, 'n600'),
   loading-placeholder_bg: map.get($c, 'n10'),
@@ -207,7 +214,6 @@ $theme: (
   modal_success_title: map.get($c, 'success600'),
   modal_success_title_background: map.get($c, 'g100'),
   modal_success_icon_background: map.get($c, 'success600'),
-  // Invite Modal
   // Navigation
   breadcrumbs: map.get($c, 'n600'),
   breadcrumbs_hover: map.get($c, 'b500'),
@@ -228,6 +234,13 @@ $theme: (
   more-menu_hover_button_bg: map.get($c, 'b100'),
   more-menu_menu_bg: map.get($c, 'white'),
   more-menu_menu_shadow: rgba(0 0 0 / 10%),
+  navigation-menu: map.get($c, 'n700'),
+  navigation-menu_active: map.get($c, 'b700'),
+  navigation-menu_bg: map.get($c, 'white'),
+  navigation-menu_link_bg: map.get($c, 'white'),
+  navigation-menu_link_hover_bg: map.get($c, 'n50'),
+  navigation-menu_link_active_bg: map.get($c, 'b100'),
+  navigation-menu_profile-picture_border: map.get($c, 'n700'),
   tags: map.get($c, 'b700'),
   tags_light: map.get($c, 'p500'),
   // Text
@@ -253,6 +266,8 @@ $theme: (
     linear-gradient(rgba(255 255 255 / 0%), rgba(255 255 255 / 100%)),
   highlighted-text-box_bold_icon: map.get($c, 'b500'),
   highlighted-text-box_subtle_border: map.get($c, 'n100'),
+  page-heading_bg: linear-gradient(180deg, map.get($c, 'n50') 0%, rgb(240 245 255 / 0%) 100%),
+  page-heading_subtitle: map.get($c, 'n700'),
   pill: map.get($c, 'n900'),
   pill_highlighted: map.get($c, 'n700'),
   pill_registered: map.get($c, 'g700'),

package/testing/helpers.d.ts

@@ -0,0 +1,2 @@
+export declare const defineViewportWidth: (width: number) => void;
+export declare const setWindowLocation: (path: string) => void;

package/testing/index.d.ts

@@ -1 +1,2 @@
+export * from './helpers';
 export * from './wrapper';

package/text/index.d.ts

@@ -4,5 +4,6 @@ export * from './helper-text-box';
 export * from './hide-show-text-box';
 export * from './highlighted-text-box';
 export * from './markdown-text';
+export * from './page-heading';
 export * from './pill';
 export * from './status-banner';

package/text/page-heading/index.d.ts

@@ -0,0 +1,2 @@
+export type { PageHeadingProps } from './page-heading';
+export { default as PageHeading } from './page-heading';

package/text/page-heading/page-heading.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+interface PageHeadingTitleProps {
+    /** Text to be rendered in the title */
+    text: string;
+    /** HTML element to be used for the title */
+    element?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+}
+export interface PageHeadingProps {
+    /** An optional number to restrict the width of the titles to */
+    maxWidth?: number | false;
+    /** Details of the title to be rendered */
+    title?: PageHeadingTitleProps;
+    /** Details of the subtitle to be rendered */
+    subtitle?: PageHeadingTitleProps;
+    /** Optional children */
+    children?: React.ReactNode;
+    /** Additional classes */
+    className?: string;
+}
+declare const PageHeading: ({ maxWidth, title, subtitle, children, className, }: PageHeadingProps) => import("react/jsx-runtime").JSX.Element;
+export default PageHeading;