@apolitical/component-library 3.5.13-ac.8 → 3.5.13-beta.1

package/styles/base/_titles.scss

@@ -26,6 +26,12 @@ $title: (
   'margin-bottom': 16,
   'margin-bottom_md': 32,
 );
+$title-new: (
+  'font-size': 38,
+  'font-size_md': 56,
+  'margin-bottom': 32,
+  'margin-bottom_md': 43,
+);
 $h1: (
   'font-size': 28,
   'font-size_md': 40,
@@ -136,7 +142,7 @@ $count-icon: (
   }
 }
 
-@mixin title {
+@mixin title($version: 'default') {
   margin-bottom: px-to-rem(get-map($title, 'margin-bottom'));
   font-size: px-to-rem(get-map($title, 'font-size'));
   color: get-map($theme, 'title');
@@ -148,6 +154,20 @@ $count-icon: (
     font-size: px-to-rem(get-map($title, 'font-size_md'));
     line-height: px-to-rem(get-map($title, 'line-height_md'));
   }
+
+  // TODO: remove the default/new divide when we move to new styling entirely
+  @if $version == 'new' {
+    margin-bottom: px-to-rem(get-map($title-new, 'margin-bottom'));
+    font-size: px-to-rem(get-map($title-new, 'font-size'));
+    font-weight: 700;
+    line-height: normal;
+    letter-spacing: unset;
+
+    @include breakpoint('min-width', 'md') {
+      font-size: px-to-rem(get-map($title-new, 'font-size_md'));
+      line-height: normal;
+    }
+  }
 }
 
 @mixin h1 {

package/styles/base/buttons/_buttons.scss

@@ -5,6 +5,8 @@
 @layer base {
   button,
   .button {
+    @include transition(background color border-color text-decoration-color);
+
     background: get-map($theme, 'button_primary_bg');
     padding: px-to-rem(get-map($medium, 'padding-top'))
       px-to-rem(get-map($medium, 'padding-horizontal'))
@@ -43,6 +45,23 @@
       background: get-map($theme, 'button_primary_bg_focus');
     }
 
+    // TODO: remove when we have new styling
+    &.new {
+      background: get-map($theme, 'button_new_primary_bg');
+      padding: px-to-rem(get-map($medium, 'padding-top_new'))
+        px-to-rem(get-map($medium, 'padding-horizontal_new'))
+        px-to-rem(get-map($medium, 'padding-bottom_new'))
+        px-to-rem(get-map($medium, 'padding-horizontal_new'));
+      color: get-map($theme, 'button_primary');
+
+      &:hover,
+      &:focus,
+      &:focus-visible,
+      &:active {
+        background: get-map($theme, 'button_new_primary_bg_hover');
+      }
+    }
+
     @each $size, $styles in $sizes {
       &.#{$size} {
         padding: px-to-rem(get-map($styles, 'padding-top'))
@@ -51,6 +70,14 @@
           px-to-rem(get-map($styles, 'padding-horizontal'));
         font-size: px-to-rem(get-map($styles, 'font-size'));
 
+        // TODO: remove `new` styling when we switch to new styling everywhere
+        &.new {
+          padding: px-to-rem(get-map($styles, 'padding-top_new'))
+            px-to-rem(get-map($styles, 'padding-horizontal_new'))
+            px-to-rem(get-map($styles, 'padding-bottom_new'))
+            px-to-rem(get-map($styles, 'padding-horizontal_new'));
+        }
+
         &.icon {
           margin-top: px-to-rem(get-map($styles, 'icon-offset'));
 
@@ -91,8 +118,6 @@
     }
 
     &.secondary {
-      @include transition(background color border-color);
-
       background: get-map($theme, 'button_secondary_bg');
       border: px-to-rem(get-map($secondary, 'border')) solid
         get-map($theme, 'button_secondary_border');
@@ -163,17 +188,38 @@
           border-color: get-map($theme, 'button_secondary_border_disabled');
         }
       }
+
+      // TODO: remove when we have new styling
+      &.new {
+        border: none;
+
+        &,
+        &:hover,
+        &:active,
+        &:focus,
+        &:focus-visible {
+          color: get-map($theme, 'button_new_secondary');
+        }
+
+        &:hover,
+        &:active,
+        &:focus,
+        &:focus-visible {
+          background: get-map($theme, 'button_new_secondary_bg_hover');
+        }
+      }
     }
 
     &.tertiary {
-      @include transition(color text-decoration-color);
-
-      padding: px-to-rem(get-map($tertiary, 'padding-top'))
-        px-to-rem(get-map($tertiary, 'padding-horizontal'))
-        px-to-rem(get-map($tertiary, 'padding-bottom'))
-        px-to-rem(get-map($tertiary, 'padding-horizontal'));
-      bottom: px-to-rem(get-map($tertiary, 'padding-top'));
-      right: px-to-rem(get-map($tertiary, 'padding-horizontal'));
+      &:not(.new) {
+        padding: px-to-rem(get-map($tertiary, 'padding-top'))
+          px-to-rem(get-map($tertiary, 'padding-horizontal'))
+          px-to-rem(get-map($tertiary, 'padding-bottom'))
+          px-to-rem(get-map($tertiary, 'padding-horizontal'));
+        bottom: px-to-rem(get-map($tertiary, 'padding-top'));
+        right: px-to-rem(get-map($tertiary, 'padding-horizontal'));
+      }
+
       text-decoration: underline;
       text-decoration-color: transparent;
 
@@ -226,6 +272,20 @@
       &.full-width {
         right: 0;
       }
+
+      // TODO: remove when we have new styling
+      &.new {
+        color: get-map($theme, 'button_new_tertiary');
+        text-decoration-color: currentcolor;
+
+        &:hover,
+        &:active,
+        &:focus,
+        &:focus-visible {
+          background: get-map($theme, 'button_new_secondary_bg_hover');
+          color: get-map($theme, 'button_new_secondary');
+        }
+      }
     }
 
     &.icon {

package/styles/base/buttons/_sizes.scss

@@ -2,8 +2,11 @@
 $large: (
   'font-size': 18,
   'padding-top': 14,
+  'padding-top_new': 20,
   'padding-horizontal': 24,
+  'padding-horizontal_new': 113,
   'padding-bottom': 16,
+  'padding-bottom_new': 24,
   'icon-width': 18,
   'icon-offset': 2,
   'icon-gutter': 12,
@@ -11,8 +14,11 @@ $large: (
 $medium: (
   'font-size': 16,
   'padding-top': 10,
+  'padding-top_new': 14,
   'padding-horizontal': 24,
+  'padding-horizontal_new': 65,
   'padding-bottom': 12,
+  'padding-bottom_new': 16,
   'icon-width': 16,
   'icon-offset': 2,
   'icon-gutter': 10,
@@ -20,8 +26,11 @@ $medium: (
 $small: (
   'font-size': 14,
   'padding-top': 8,
+  'padding-top_new': 10,
   'padding-horizontal': 16,
+  'padding-horizontal_new': 35,
   'padding-bottom': 10,
+  'padding-bottom_new': 12,
   'icon-width': 12,
   'icon-offset': 2,
   'icon-gutter': 8,

package/styles/mixins/_breakpoints.scss

@@ -1,3 +1,4 @@
+@use 'sass:list';
 @use 'sass:map';
 
 $breakpoint-sizes: (
@@ -10,12 +11,21 @@ $breakpoint-sizes: (
 // This mixin lets us use fast references for common breakpoints, using the map above,
 // and lets us reference custom breakpoints by passing in a number. It lets us code
 // breakpoints a bit faster by not having to type out the full media query each time.
-@mixin breakpoint($type, $breakpoint) {
-  @if map-has-key($breakpoint-sizes, $breakpoint) {
-    $breakpoint: map.get($breakpoint-sizes, $breakpoint);
+@mixin breakpoint($types, $breakpoints) {
+  $media: ('only screen');
+  @for $i from 1 through length($types) {
+    $type: list.nth($types, $i);
+    $breakpoint: list.nth($breakpoints, $i);
+
+    @if map-has-key($breakpoint-sizes, list.nth($breakpoints, $i)) {
+      $breakpoint: map.get($breakpoint-sizes, list.nth($breakpoints, $i));
+    }
+
+    $query: 'and (#{$type}: #{$breakpoint}px)';
+    $media: list.append($media, $query, $separator: space);
   }
 
-  @media only screen and (#{$type}: #{$breakpoint}px) {
+  @media #{$media} {
     @content;
   }
 }

package/styles/variables/colors/_colors.scss

@@ -11,6 +11,7 @@ $default-colors: (
   'b100': rgb(222 220 250 / 100%),
   'b200': rgb(197 194 245 / 100%),
   'b300': rgb(175 171 239 / 100%),
+  'b400': rgb(119 107 224 / 100%),
   'b500': rgb(124 114 225 / 100%),
   'b600': rgb(101 89 212 / 100%),
   'b700': rgb(79 67 186 / 100%),
@@ -33,6 +34,7 @@ $default-colors: (
   'n700': rgb(64 74 97 / 100%),
   'n800': rgb(42 49 65 / 100%),
   'n900': rgb(21 25 33 / 100%),
+  'n1000': rgb(23 23 23 / 100%),
   'p50': rgb(255 242 255 / 100%),
   'p100': rgb(238 200 237 / 100%),
   'p300': rgb(203 130 197 / 100%),

package/styles/variables/colors/theme/_banners.scss

@@ -6,13 +6,16 @@ $banners: (
   banner_bg: get-map($c, 'n100'),
   banner-section: get-map($c, 'white'),
   banner-section_light: get-map($c, 'n700'),
+  banner-section_subtle: get-map($c, 'black'),
   banner-section_bg: get-map($c, 'b700'),
   banner-section_light_bg: get-map($c, 'white'),
   banner-section_gradient_bg:
     linear-gradient(135deg, get-map($c, 'b700') 0%, get-map($c, 'g300') 100%),
+  banner-section_subtle_bg: get-map($c, 'white'),
   banner-section_overlay: get-map($c, 'n900'),
   banner-section_eyebrow: get-map($c, 'y300'),
   banner-section_light_eyebrow: get-map($c, 'b700'),
+  banner-section_subtle_eyebrow: get-map($c, 'n700'),
   banner-section_light_title: get-map($c, 'n900'),
   custom-content-banner: get-map($c, 'n900'),
   custom-content-banner_bg: get-map($c, 'n50'),

package/styles/variables/colors/theme/_base.scss

@@ -18,7 +18,9 @@ $base: (
   link_hover: get-map($c, 'b800'),
   button_primary: get-map($c, 'white'),
   button_primary_bg: get-map($c, 'b700'),
+  button_new_primary_bg: get-map($c, 'black'),
   button_primary_bg_hover: get-map($c, 'b500'),
+  button_new_primary_bg_hover: get-map($c, 'b400'),
   button_primary_bg_active: get-map($c, 'b800'),
   button_primary_bg_focus: get-map($c, 'b600'),
   button_primary_bg_disabled: get-map($c, 'b700'),
@@ -27,6 +29,7 @@ $base: (
   button_primary_destructive_bg_hover: get-map($c, 'error700'),
   button_primary_destructive_box-shadow: get-map($c, 'error50'),
   button_secondary: get-map($c, 'b700'),
+  button_new_secondary: get-map($c, 'black'),
   button_secondary_focus: get-map($c, 'white'),
   button_secondary_muted: get-map($c, 'n600'),
   button_secondary_muted_hover: get-map($c, 'n700'),
@@ -34,6 +37,7 @@ $base: (
   button_secondary_disabled: get-map($c, 'b700'),
   button_secondary_bg: get-map($c, 'white'),
   button_secondary_bg_hover: get-map($c, 'b200'),
+  button_new_secondary_bg_hover: get-map($c, 'b200'),
   button_secondary_bg_focus: get-map($c, 'b600'),
   button_secondary_bg_active: get-map($c, 'b800'),
   button_secondary_bg_muted: get-map($c, 'white'),
@@ -47,6 +51,7 @@ $base: (
   button_secondary_border_disabled: get-map($c, 'b700'),
   button_secondary_border_destructive: get-map($c, 'error600'),
   button_tertiary: get-map($c, 'b700'),
+  button_new_tertiary: get-map($c, 'white'),
   button_tertiary_hover: get-map($c, 'b500'),
   button_tertiary_active: get-map($c, 'b800'),
   button_tertiary_muted: get-map($c, 'n600'),

package/styles/variables/colors/theme/_discussion.scss

@@ -13,8 +13,6 @@ $discussion: (
   discussion-form_bg: get-map($c, 'b50'),
   discussion-form_placeholder: get-map($c, 'n500'),
   discussion-form_small: get-map($c, 'n700'),
-  discussion-post-border: get-map($c, 'n100'),
-  discussion-post-hover-shadow: rgb(0 0 0 / 5%),
   discussion-question_bg: get-map($c, 'sand'),
   discussion-responses-heading_p: get-map($c, 'n600'),
   discussion-responses-heading_icon: get-map($c, 'n700'),

package/styles/variables/colors/theme/_navigation.scss

@@ -18,6 +18,7 @@ $navigation: (
   language-switcher_a: get-map($c, 'n900'),
   language-switcher_a_selected: get-map($c, 'b700'),
   language-switcher_a_hover: get-map($c, 'b800'),
+  logo_monochrome_bg: get-map($c, 'n1000'),
   more-menu: get-map($c, 'n700'),
   more-menu_hover_button_bg: get-map($c, 'b100'),
   more-menu_menu_bg: get-map($c, 'white'),

package/styles/variables/colors/theme/_sections.scss

@@ -3,5 +3,7 @@
 
 $c: $default-colors;
 $sections: (
+  full-width-section_dark: get-map($c, 'white'),
   full-width-section_light_bg: get-map($c, 'n50'),
+  full-width-section_dark_bg: get-map($c, 'n1000'),
 );

package/styles/variables/colors/theme/_text.scss

@@ -3,6 +3,9 @@
 
 $c: $default-colors;
 $text: (
+  buckets_title: get-map($c, 'n1000'),
+  buckets_text: get-map($c, 'n600'),
+  buckets_hover_text: get-map($c, 'b500'),
   collapsible-section_bg: get-map($c, 'white'),
   collapsible-section_border: get-map($c, 'n500'),
   collapsible-section_icon: get-map($c, 'n900'),

package/text/buckets/buckets.d.ts

@@ -0,0 +1,21 @@
+interface Props {
+    /** The items to show for each bucket */
+    items: {
+        /** The title of the bucket */
+        title: string;
+        /** The text to display */
+        text: string;
+        /** The link to go to */
+        link: string;
+        /** Additional classes */
+        className?: string;
+        /** The type of event to send to GTM */
+        'data-gtm-event-context'?: string;
+        /** The type of event to send to GTM */
+        'data-gtm-event-type'?: string;
+    }[];
+    /** Additional classes */
+    className?: string;
+}
+declare const Buckets: ({ items, className, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
+export default Buckets;

package/text/buckets/index.d.ts

@@ -0,0 +1 @@
+export { default as Buckets } from './buckets';

package/text/hide-show-text-box/hide-show-text-box.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
-import { MarkdownToJSX } from 'markdown-to-jsx';
 interface Props {
     /** The language for the box text */
     locale?: string;
@@ -11,8 +10,7 @@ interface Props {
     hide?: string | false;
     /** The content to show when the section is expanded */
     text: string;
-    markdownOptions?: MarkdownToJSX.Options;
     children?: React.ReactNode;
 }
-declare const HideShowTextBox: ({ className, show, hide, text, markdownOptions, children, }: Props) => import("react/jsx-runtime").JSX.Element | null;
+declare const HideShowTextBox: ({ className, show, hide, text, children, }: Props) => import("react/jsx-runtime").JSX.Element | null;
 export default HideShowTextBox;

package/text/index.d.ts

@@ -1,3 +1,4 @@
+export * from './buckets';
 export * from './collapsible-section';
 export * from './content-type-label';
 export * from './empty-state-box';

package/text/testimonial-block/testimonial-block.d.ts

@@ -1,11 +1,16 @@
 /// <reference types="react" />
+import type { MemberDetailsProps } from '../../user';
 export type TestimonialBlockProps = {
     /** The name of the Testimonial's author */
     author?: string;
     /** The citation of the Testimonial's author */
     authorCite?: string;
+    /** The details of the member who gave the testimonial; this is rendered as a `Member` component instead of plain text */
+    member?: MemberDetailsProps;
     /** The content to display */
     content: string;
+    /** Additional classes */
+    className?: string;
 };
-declare const _default: import("react").MemoExoticComponent<({ author, authorCite, content }: TestimonialBlockProps) => import("react/jsx-runtime").JSX.Element>;
+declare const _default: import("react").MemoExoticComponent<({ author, authorCite, content, member, className, }: TestimonialBlockProps) => import("react/jsx-runtime").JSX.Element>;
 export default _default;

package/user/member/member.d.ts

@@ -4,6 +4,8 @@ export type MemberDetailsProps = {
     id?: string;
     /** The user's name */
     name?: string;
+    /** The user's profile URL; we usually get this from the ID, but we won't if `false` is passed in */
+    link?: false | string;
     /** The user's job title */
     jobTitle?: string;
     /** The organisation the user works for */
@@ -28,6 +30,11 @@ interface Props {
         createdAt?: Date | string;
         didEdit?: boolean;
     };
+    /**  Optional styling */
+    styling?: {
+        /** The size of the component */
+        size?: 'medium' | 'large';
+    };
     /** The GTM context to use */
     gtmContext?: string;
     /** The GTM event to use */
@@ -37,7 +44,7 @@ interface Props {
     /** The language to use for the text */
     locale?: string;
 }
-declare const Member: ({ element, member: memberDetails, additionalContent, gtmContext, gtmType, className, }: Props) => React.DetailedReactHTMLElement<{
+declare const Member: ({ element, member: memberDetails, additionalContent, styling, gtmContext, gtmType, className, }: Props) => React.DetailedReactHTMLElement<{
     className: string;
     children: import("react/jsx-runtime").JSX.Element;
 }, HTMLElement>;