@apolitical/component-library 1.13.6 → 1.14.0

package/styles/base/_text.scss

@@ -7,6 +7,7 @@ $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;
 
 @layer base {
   p, li, small {
@@ -16,7 +17,7 @@ $sup: ('font-size': 10);
     .error &, &.error { color: map.get($theme, 'text_error'); }
   }
 
-  p, li, dt, dd {
+  #{$text-elements} {
     font-size: px-to-rem(map.get($default, 'font-size'));
     line-height: px-to-rem(map.get($default, 'line-height'));
 
@@ -30,20 +31,6 @@ $sup: ('font-size': 10);
         font-size: px-to-rem(map.get($medium, 'font-size'));
         line-height: px-to-rem(map.get($medium, 'line-height'));
       }
-
-      @include breakpoint('min-width', 'md') {
-        font-size: px-to-rem(map.get($default, 'font-size_md'));
-        line-height: px-to-rem(map.get($default, 'line-height_md'));
-
-          .text-small &, &.text-small {
-            font-size: px-to-rem(map.get($small, 'font-size_md'));
-          }
-
-          .text-medium &, &.text-medium {
-            font-size: px-to-rem(map.get($medium, 'font-size_md'));
-            line-height: px-to-rem(map.get($medium, 'line-height_md'));
-          }
-      }
   }
 
   p {
@@ -81,4 +68,43 @@ $sup: ('font-size': 10);
 
   address { font-style: normal; }
 
+  a {
+      &.text-small {
+        font-size: px-to-rem(map.get($small, 'font-size'));
+        line-height: px-to-rem(map.get($small, 'line-height'));
+      }
+
+      &.text-medium {
+        font-size: px-to-rem(map.get($medium, 'font-size'));
+        line-height: px-to-rem(map.get($medium, 'line-height'));
+      }
+  }
+
+  @include breakpoint('min-width', 'md') {
+    #{$text-elements} {
+      font-size: px-to-rem(map.get($default, 'font-size_md'));
+      line-height: px-to-rem(map.get($default, 'line-height_md'));
+
+        .text-small &, &.text-small {
+          font-size: px-to-rem(map.get($small, 'font-size_md'));
+        }
+
+        .text-medium &, &.text-medium {
+          font-size: px-to-rem(map.get($medium, 'font-size_md'));
+          line-height: px-to-rem(map.get($medium, 'line-height_md'));
+        }
+    }
+
+    a {
+        &.text-small {
+          font-size: px-to-rem(map.get($small, 'font-size_md'));
+        }
+
+        &.text-medium {
+          font-size: px-to-rem(map.get($medium, 'font-size_md'));
+          line-height: px-to-rem(map.get($medium, 'line-height_md'));
+        }
+    }
+  }
+
 }

package/styles/base/_titles.scss

@@ -3,6 +3,7 @@
         './../mixins',
         './../variables';
 
+$highlight: ('width': 64, 'height': 4, 'margin-top': 12, 'border-radius': 8);
 $pre-title: ('font-size': 14, 'font-size_md': 16, 'letter-spacing': 1.28, 'line-height': 16, 'line-height_md': 20, 'margin-bottom': 24);
 $title: ('font-size': 32, 'font-size_md': 52, 'letter-spacing': -0.16, 'line-height': 40, 'line-height_md': 64, 'margin-bottom': 16, 'margin-bottom_md': 32);
 $h1: ('font-size': 28, 'font-size_md': 40, 'line-height': 32, 'line-height_md': 48, 'letter-spacing': -0.16, 'margin-bottom': 16);
@@ -14,6 +15,23 @@ $h6: ('font-size': 12, 'font-size_md': 11, 'line-height': 16);
 $subtitle: ('font-size': 20, 'font-size_md': 24, 'line-height': 28, 'line-height_md': 32, 'margin-bottom': 20);
 $count-icon: ('width': 15, 'margin-horizontal': 8, 'offset': 1);
 
+@mixin highlight {
+  position: relative;
+  padding-bottom: px-to-rem(map.get($highlight, 'height') + map.get($highlight, 'margin-top'));
+
+    &::after {
+      content: '';
+      width: px-to-rem(map.get($highlight, 'width'));
+      height: px-to-rem(map.get($highlight, 'height'));
+      background: map.get($theme, 'highlight_bg');
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      border-radius: px-to-rem(map.get($highlight, 'border-radius'));
+      display: block;
+    }
+}
+
 @mixin pre-title {
   margin-bottom: px-to-rem(map.get($pre-title, 'margin-bottom'));
   font-size: px-to-rem(map.get($pre-title, 'font-size'));
@@ -139,6 +157,10 @@ $count-icon: ('width': 15, 'margin-horizontal': 8, 'offset': 1);
 }
 
 @layer base {
+  .highlighted-title {
+    @include highlight;
+  }
+
   .pre-title {
     @include pre-title;
   }

package/styles/mixins/_containers.scss

@@ -0,0 +1,18 @@
+@use 'sass:map';
+@import './breakpoints';
+
+// This mixin is very similar to the `breakpoint` mixin - and uses the same sizing map - but for container queries.
+// We should use container queries when the styling of a parent is more important than the styling of the page,
+// e.g. we use it on carousels to ensure we show different numbers of cards when the carousel is different sizes
+// Find out more: https://blog.logrocket.com/css-container-queries-guide/
+
+
+@mixin container-query($container, $type, $breakpoint) {
+  @if map-has-key($breakpoint-sizes, $breakpoint) {
+    $breakpoint: map.get($breakpoint-sizes, $breakpoint);
+  }
+
+  @container #{$container} (#{$type}: #{$breakpoint}px) {
+    @content;
+  }
+}

package/styles/mixins/_index.scss

@@ -2,6 +2,7 @@
         'backgrounds',
         'breakpoints',
         'browsers',
+        'containers',
         'selectors',
         'styles',
         'transitions';

package/styles/variables/colors/_theme.scss

@@ -6,6 +6,9 @@ $theme: (
   // Base styles
   default_focus: map.get($c, 'b100'),
   background: map.get($c, 'white'),
+
+  highlight_bg: map.get($c, 'g300'),
+
   title: map.get($c, 'n900'),
   subtitle: map.get($c, 'n800'),
   text: map.get($c, 'n900'),
@@ -91,6 +94,28 @@ $theme: (
   marketing-block_primary_bg_2: map.get($c, 'y300'),
   marketing-block_secondary_bg_2: map.get($c, 'g100'),
   marketing-block_tertiary_bg_2: map.get($c, 'p600'),
+
+  // Cards
+  card: map.get($c, 'n600'),
+  card_bg: map.get($c, 'sand'),
+  card_hover_bg: map.get($c, 'n50'),
+  card_label: map.get($c, 'n700'),
+  card_img_bg: map.get($c, 'b50'),
+
+  carousel_arrow: map.get($c, 'n600'),
+  carousel_arrow_disabled: map.get($c, 'n200'),
+  carousel_arrow_bg: map.get($c, 'white'),
+  carousel_arrow_hover_bg: map.get($c, 'b100'),
+  carousel_arrow_active_bg: map.get($c, 'b300'),
+  carousel_arrow_disabled_bg: map.get($c, 'n50'),
+  carousel_arrow_border: map.get($c, 'n100'),
+  carousel_arrow_hover_border: map.get($c, 'b300'),
+  carousel_arrow_active_border: map.get($c, 'b500'),
+  carousel_arrow_disabled_border: map.get($c, 'b100'),
+  carousel_pagination_bg: map.get($c, 'n100'),
+  carousel_pagination_hover_bg: map.get($c, 'b200'),
+  carousel_pagination_selected_bg: map.get($c, 'b500'),
+
   // Communities
   community-details_link_hover: map.get($c, 'b500'),
   // Discussion
@@ -230,8 +255,13 @@ $theme: (
   highlighted-text-box_subtle_border: map.get($c, 'n100'),
   pill: map.get($c, 'n900'),
   pill_highlighted: map.get($c, 'n700'),
+  pill_registered: map.get($c, 'g700'),
   pill_bg: map.get($c, 'n200'),
+  pill_subtle_bg: map.get($c, 'white'),
   pill_highlighted_bg: map.get($c, 'y300'),
+  pill_information_bg: map.get($c, 'g100'),
+  pill_registered_bg: map.get($c, 'g50'),
+  pill_subtle_border: map.get($c, 'n200'),
   status-banner_bg: map.get($c, 'y50'),
   status-banner_success_bg: map.get($c, 'success50'),
   status-banner_success_icon: map.get($c, 'success600'),
@@ -246,5 +276,7 @@ $theme: (
   contributor_label: map.get($c, 'n600'),
   member_highlighted_name: map.get($c, 'p500'),
   member_additional-content: map.get($c, 'n700'),
-  member_small: map.get($c, 'n700')
+  member_small: map.get($c, 'n700'),
+
+  profile-picture_img_bg: map.get($c, 'b50'),
 );

package/text/empty-state-box/empty-state-box.d.ts

@@ -17,5 +17,5 @@ interface Props {
     /** Additional classes */
     className?: string;
 }
-declare const EmptyStateBox: ({ variant, text, button, className }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const EmptyStateBox: ({ variant, text, button, className, }: Props) => import("react/jsx-runtime").JSX.Element;
 export default EmptyStateBox;

package/text/pill/pill.d.ts

@@ -1,13 +1,15 @@
 import React from 'react';
 interface Props {
     /** The size of the pill */
-    size?: 'medium' | 'large';
+    size?: 'small' | 'medium' | 'large';
     /** The style of the pill */
-    variant?: 'default' | 'highlighted';
+    variant?: 'default' | 'subtle' | 'highlighted' | 'information' | 'registered';
     /** Additional classes to add to the pill */
-    className?: 'margin-left' | 'margin-right' | '';
+    className?: string;
     /** The pill text */
     children: React.ReactNode;
+    /** Optional test ID */
+    'data-testid'?: string;
 }
-declare const Pill: ({ size, variant, className, children }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const Pill: ({ size, variant, className, children, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
 export default Pill;

package/user/contributors/contributors.d.ts

@@ -25,9 +25,15 @@ interface Props {
     className?: string;
     /** The language to use */
     locale?: string;
+    /** Optional test ID */
+    'data-testid'?: string;
 }
-declare const Contributors: ({ element, contributors: { total, data: contributors }, styling: { showText, size, showGap, showPlaceholders }, cutoff, className }: Props) => React.DetailedReactHTMLElement<{
+declare const Contributors: ({ element, contributors: { total, data: contributors }, styling: { showText, size, showGap, showPlaceholders }, cutoff, className, ...props }: Props) => React.DetailedReactHTMLElement<{
     className: string;
     children: import("react/jsx-runtime").JSX.Element;
+    /** The language to use */
+    locale?: string | undefined;
+    /** Optional test ID */
+    'data-testid'?: string | undefined;
 }, HTMLElement> | null;
 export default Contributors;

package/user/profile-picture/profile-picture.d.ts

@@ -11,6 +11,8 @@ interface Props {
     height?: number;
     /** Additional classes */
     className?: string;
+    /** Optional test ID */
+    'data-testid'?: string;
 }
 declare const ProfilePicture: ({ className, src, name, alt, width, height, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
 export default ProfilePicture;