@apolitical/component-library 1.4.1-beta.1 → 1.6.0

package/styles/base/_links.scss

@@ -1,8 +1,11 @@
 @use 'sass:map';
-@import './../variables';
+@import './../mixins',
+        './../variables';
 
 @layer base {
   a {
+      @include transition(color);
+
       color: map.get($theme, 'link');
       text-decoration: underline;
       font-weight: 900;

package/styles/base/_overlays.scss

@@ -1,8 +1,13 @@
 @use 'sass:map';
-@import './../mixins',
+@import './../functions',
+        './../mixins',
         './../variables';
 
+$overlay: ('padding': 48);
+
 @layer base {
+  body.has-overlay { overflow: hidden; }
+
   .overlay {
     @include transition(opacity, 0.1s, ease);
 
@@ -14,13 +19,42 @@
     left: 0;
     opacity: 0;
     z-index: -1;
+    box-sizing: border-box;
+    display: flex;
+    flex-flow: column;
+    align-items: center;
+    overflow: hidden;
 
-    &.open {
-      width: 100vw;
-      height: 100vh;
-      opacity: 1;
-      z-index: 998;
-    }
+      &.open {
+        width: 100vw;
+        height: 100vh;
+        opacity: 1;
+        z-index: 998;
+      }
+
+      > div, > section {
+        width: 100vw;
+        height: 100vh;
+        margin-top: auto;
+        margin-bottom: auto;
+        overflow-x: hidden;
+        overflow-y: auto;
+      }
 
   }
+
+  @include breakpoint('min-width', 'sm') {
+    .overlay {
+        &.open {
+          padding: px-to-rem(map.get($overlay, 'padding'));
+          overflow-y: auto;
+        }
+
+        > div, > section {
+          width: auto;
+          height: auto;
+          overflow: unset;
+        }
+    }
+  }
 }

package/styles/base/_titles.scss

@@ -12,6 +12,7 @@ $h4: ('font-size': 18, 'font-size_md': 20, 'line-height': 24, 'line-height_md':
 $h5: ('font-size': 12, 'font-size_md': 14, 'line-height': 16, 'margin-top': 16, 'margin-bottom': 16);
 $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 pre-title {
   margin-bottom: px-to-rem(map.get($pre-title, 'margin-bottom'));
@@ -173,4 +174,19 @@ $subtitle: ('font-size': 20, 'font-size_md': 24, 'line-height': 28, 'line-height
   .subtitle {
     @include subtitle;
   }
+
+  .count {
+      &::before {
+        @include image('icons/middot.svg', true);
+
+        content: '';
+        width: px-to-rem(map.get($count-icon, 'width'));
+        height: px-to-rem(map.get($count-icon, 'width'));
+        background: currentcolor;
+        position: relative;
+        top: px-to-rem(map.get($count-icon, 'offset'));
+        margin: 0 px-to-rem(map.get($count-icon, 'margin-horizontal'));
+        display: inline-block;
+      }
+  }
 }

package/styles/base/buttons/_buttons.scss

@@ -27,7 +27,7 @@
       background: map.get($theme, 'button_primary_bg_hover');
     }
 
-    &:active {
+    &:active, &.active {
       background: map.get($theme, 'button_primary_bg_active');
     }
 
@@ -71,6 +71,8 @@
     }
 
     &.secondary {
+      @include transition(background color border-color);
+
       background: map.get($theme, 'button_secondary_bg');
       border: px-to-rem(map.get($secondary, 'border')) solid map.get($theme, 'button_secondary_border');
 
@@ -96,14 +98,24 @@
         &.muted {
           border-color: map.get($theme, 'button_secondary_border_muted');
 
-            &, &:hover, &:active, &:focus, &:focus-visible {
+            &, &:active {
               background: map.get($theme, 'button_secondary_bg_muted');
               color: map.get($theme, 'button_secondary_muted');
             }
 
-          &:hover, &:focus, &:focus-visible {
-            color: map.get($theme, 'button_secondary_muted_hover');
-          }
+            &:hover, &:focus, &:focus-visible {
+              background: map.get($theme, 'button_secondary_bg_muted_hover');
+              color: map.get($theme, 'button_secondary_muted_hover');
+              border-color: map.get($theme, 'button_secondary_border_muted_hover');
+            }
+        }
+
+        &.destructive {
+            &, &:hover, &:active, &:focus, &:focus-visible {
+              background: map.get($theme, 'button_secondary_bg_destructive');
+              color: map.get($theme, 'button_secondary_destructive');
+              border-color: map.get($theme, 'button_secondary_border_destructive');
+            }
         }
 
         &.disabled {
@@ -245,6 +257,47 @@
       opacity: 0.3;
     }
 
+    &[data-hover-text] {
+      position: relative;
+
+        &::before, .text {
+          @include transition(opacity);
+
+          opacity: 1;
+        }
+
+        &::after {
+          @include transition(width height opacity right, 0s 0s 0.2s 0.2s, ease-in-out, 0s 0s 0.1s 0.1s);
+
+          content: '';
+          width: 0;
+          height: 0;
+          position: absolute;
+          top: px-to-rem(map.get($secondary-destruction, 'offset'));
+          right: map.get($secondary-destruction, 'right');
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          opacity: 0;
+        }
+
+        &:hover, &:focus {
+          &::before, .text {
+            opacity: 0;
+          }
+
+          &::after {
+            content: attr(data-hover-text);
+            width: 100%;
+            height: 100%;
+            right: 0;
+            opacity: 1;
+          }
+
+        }
+
+    }
+
   }
 }
     

package/styles/base/buttons/_icons.scss

@@ -14,11 +14,18 @@ $icons: ('arrow_left', (d, d, 3, 8), (d, d, 3, 8), (d, d, 4, 7)),
         ('arrow-down', (d, d, 4, 10), (d, d, 3, 8), (d, d, 4, d)),
         ('chevron_left', (16, 16, 4, 8), (14, 14, 3, 8), (14, 14, d, d)),
         ('chevron_right', (16, 16, 4, 8), (14, 14, 3, 8), (14, 14, d, d)),
+        ('close', (48, 48, 0, 0), (32, 32, 0, 0), (24, 24, 0, 0)),
+        ('ellipsis', (48, 48, 0, 0), (32, 32, 0, 0), (16, 16, 0, 0)),
+        ('flag', (22, 22, 0, 10), (18, 18, 1, d), (d, d, 3, 10)),
         ('heart', (22, 22, 0, 10), (18, 18, 1, d), (d, d, 3, 10)),
         ('heart_empty', (22, 22, 0, 10), (18, 18, 1, d), (d, d, 3, 10)),
         ('navigation_arrow', (d, d, 4, 10), (d, d, d, d), (14, 14, d, 10)),
         ('pencil', (d, d, d, d), (d, d, d, 11), (d, d, 3, 9)),
+        ('pencil-paper', (22, 22, 0, 10), (18, 18, 1, d), (d, d, 3, 10)),
+        ('plus', (d, d, 4, d), (d, d, 2, d), (11, 11, 3, d)),
+        ('share', (22, 22, 0, 10), (18, 18, 1, d), (d, d, 3, 10)),
         ('speech-bubble_square_thick', (22, 22, 0, 10), (18, 18, 1, d), (d, d, 3, 10)),
         ('star', (16, 16, 0, 0), (d, d, 0, 0), (16, 16, 0, 0)),
         ('star_empty', (16, 16, 0, 0), (d, d, 0, 0), (16, 16, 0, 0)),
-        ('tick', (14, 11, 8, 10), (14, 11, 5, 8), (9, 7, 6, 6));
+        ('tick', (14, 11, 8, 10), (14, 11, 5, 8), (9, 7, 6, 6)),
+        ('trash', (22, 22, 0, 10), (18, 18, 1, d), (d, d, 3, 10));

package/styles/base/buttons/_sizes.scss

@@ -4,6 +4,7 @@ $medium: ('font-size': 16, 'padding-top': 10, 'padding-horizontal': 24, 'padding
 $small: ('font-size': 14, 'padding-top': 8, 'padding-horizontal': 16, 'padding-bottom': 10, 'icon-width': 12, 'icon-offset': 2, 'icon-gutter': 8);
 $sizes: ('large', $large), ('small', $small);
 $secondary: ('border': 1);
+$secondary-destruction: ('right': -5%, 'offset': -1);
 
 // The tertiary styling has its own padding; regardless of size, we add a tiny amount of padding to accommodate
 // the focus outline and to ensure any icons are centered

package/styles/variables/colors/_theme.scss

@@ -33,18 +33,23 @@ $theme: (
   button_secondary: map.get($c, 'b700'),
   button_secondary_focus: map.get($c, 'white'),
   button_secondary_muted: map.get($c, 'n600'),
-  button_secondary_muted_hover: map.get($c, 'b700'),
+  button_secondary_muted_hover: map.get($c, 'n700'),
+  button_secondary_destructive: map.get($c, 'error600'),
   button_secondary_disabled: map.get($c, 'b700'),
   button_secondary_bg: map.get($c, 'white'),
   button_secondary_bg_hover: map.get($c, 'b200'),
   button_secondary_bg_focus: map.get($c, 'b600'),
   button_secondary_bg_active: map.get($c, 'b800'),
   button_secondary_bg_muted: map.get($c, 'white'),
+  button_secondary_bg_muted_hover: map.get($c, 'n200'),
   button_secondary_bg_disabled: map.get($c, 'white'),
+  button_secondary_bg_destructive: map.get($c, 'error50'),
   button_secondary_border: map.get($c, 'b700'),
   button_secondary_border_focus: transparent,
   button_secondary_border_muted: map.get($c, 'n200'),
+  button_secondary_border_muted_hover: map.get($c, 'n500'),
   button_secondary_border_disabled: map.get($c, 'b700'),
+  button_secondary_border_destructive: map.get($c, 'error600'),
 
   button_tertiary: map.get($c, 'b700'),
   button_tertiary_hover: map.get($c, 'b500'),
@@ -102,15 +107,25 @@ $theme: (
   marketing-block_secondary_bg_2: map.get($c, 'g100'),
   marketing-block_tertiary_bg_2: map.get($c, 'p600'),
 
+  // Communities
+  community-details_link_hover: map.get($c, 'b500'),
+
   // Discussion
+  discussion-actions: map.get($c, 'n600'),
+  discussion-actions_hover_bg: map.get($c, 'b100'),
+  discussion-actions_likes_liked: map.get($c, 'p500'),
+  discussion-actions_likes_liked_bg: map.get($c, 'p500'),
+
   discussion-form_bg: map.get($c, 'b50'),
   discussion-form_placeholder: map.get($c, 'n500'),
   discussion-form_small: map.get($c, 'n700'),
 
-  discussion-likes: map.get($c, 'n600'),
-  discussion-likes_hover_bg: map.get($c, 'b100'),
-  discussion-likes_liked: map.get($c, 'p500'),
-  discussion-likes_liked_bg: map.get($c, 'p500'),
+  discussion-question_bg: map.get($c, 'sand'),
+
+  discussion-responses-heading_p: map.get($c, 'n600'),
+  discussion-responses-heading_icon: map.get($c, 'n700'),
+
+  discussion-thread_border: map.get($c, 'n200'),
 
   // Form
   password-rules: map.get($c, 'error600'),
@@ -127,6 +142,10 @@ $theme: (
   search_search-button_bg: map.get($c, 'n600'),
   search_search-button_active_bg: map.get($c, 'white'),
 
+  // General
+  tooltip: map.get($c, 'white'),
+  tooltip_bg: rgb(21 25 33 / 90%),
+
   // Layout
   cookie-banner_bg: map.get($c, 'n50'),
   cookie-banner_shadow: rgb(107 91 82 / 40%),
@@ -186,8 +205,13 @@ $theme: (
   // Modals
   modal_bg: map.get($c, 'white'),
   modal_shadow: rgba(42 49 65 / 30%),
+  modal_close: map.get($c, 'n700'),
+  modal_close_hover_bg: map.get($c, 'b100'),
 
   // Navigation
+  breadcrumbs: map.get($c, 'n600'),
+  breadcrumbs_hover: map.get($c, 'b500'),
+
   filters: map.get($c, 'n700'),
   filters_selected: map.get($c, 'g700'),
   filters_active: map.get($c, 'n700'),
@@ -198,14 +222,16 @@ $theme: (
   filters_outline: map.get($c, 'n200'),
   filters_selected_outline: map.get($c, 'g200'),
 
+  more-menu: map.get($c, 'n700'),
+  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%),
+
   tags: map.get($c, 'b700'),
   tags_light: map.get($c, 'p500'),
 
 
   // Text
-  alert_success: map.get($c, 'success600'),
-  alert_error: map.get($c, 'error600'),
-
   collapsible-section_bg: map.get($c, 'white'),
   collapsible-section_border: map.get($c, 'n500'),
   collapsible-section_icon: map.get($c, 'n900'),
@@ -231,12 +257,21 @@ $theme: (
 
   highlighted-text-box_subtle_border: map.get($c, 'n100'),
 
-  pill: map.get($c, 'n700'),
-  pill_bg: map.get($c, 'y300'),
+  pill: map.get($c, 'n900'),
+  pill_highlighted: map.get($c, 'n700'),
+  pill_bg: map.get($c, 'n200'),
+  pill_highlighted_bg: map.get($c, 'y300'),
+
+  status-banner_bg: map.get($c, 'y50'),
+  status-banner_success_bg: map.get($c, 'success50'),
+  status-banner_success_icon: map.get($c, 'success600'),
+  status-banner_error_bg: map.get($c, 'error50'),
+  status-banner_error_icon: map.get($c, 'error600'),
 
   // User
   contributor: map.get($c, 'n700'),
   contributor_bg: map.get($c, 'white'),
+  contributor_medium_bg: map.get($c, 'n200'),
   contributor_border: map.get($c, 'white'),
   contributor_inner-border: map.get($c, 'n200'),
   contributor_label: map.get($c, 'n600'),

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

@@ -1,9 +1,11 @@
+import React from 'react';
 import { ButtonPropsType } from '../../general';
 interface ButtonType extends ButtonPropsType {
-    text: string;
+    text?: string;
     breakpoints?: {
         [key: string]: boolean;
     };
+    component?: React.ReactNode;
 }
 interface Props {
     /** Box styling */

package/text/helper-text-box/helper-text-box.d.ts

@@ -8,7 +8,7 @@ interface Props {
     /** The heading to display at the top of the box */
     heading?: string | false;
     /** The content to display in the box */
-    children: React.ReactNode;
+    children: React.ReactNode | JSX.Element | string;
 }
 declare const HelperTextBox: ({ type, className, heading, children }: Props) => import("react/jsx-runtime").JSX.Element;
 export default HelperTextBox;

package/text/index.d.ts

@@ -1,4 +1,3 @@
-export * from './alert';
 export * from './collapsible-section';
 export * from './empty-state-box';
 export * from './helper-text-box';
@@ -6,3 +5,4 @@ export * from './hide-show-text-box';
 export * from './highlighted-text-box';
 export * from './markdown-text';
 export * from './pill';
+export * from './status-banner';

package/text/pill/pill.d.ts

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

package/text/status-banner/index.d.ts

@@ -0,0 +1 @@
+export { default as StatusBanner } from './status-banner';

package/text/{alert/alert.d.ts → status-banner/status-banner.d.ts}

@@ -11,7 +11,7 @@ interface Props {
     /** Test ID for Jest tests */
     'data-testid'?: string;
 }
-declare const Alert: ({ element, children, className, ...props }: Props) => React.DetailedReactHTMLElement<{
+declare const StatusBanner: ({ element, children, className, ...props }: Props) => React.DetailedReactHTMLElement<{
     className: string;
     'aria-live': "assertive";
     /** Optional ID, for errors */
@@ -19,4 +19,4 @@ declare const Alert: ({ element, children, className, ...props }: Props) => Reac
     /** Test ID for Jest tests */
     'data-testid'?: string | undefined;
 }, HTMLElement>;
-export default Alert;
+export default StatusBanner;

package/user/contributors/contributors.d.ts

@@ -4,7 +4,10 @@ interface Props {
     /** The element that will render around the content */
     element?: 'div' | 'section' | 'aside' | 'li';
     /** Information about the contributors */
-    contributors: Array<MemberProps>;
+    contributors: {
+        total?: number;
+        data: Array<MemberProps>;
+    };
     /** Information on the style of the component */
     styling?: {
         /** The size of the images */
@@ -23,7 +26,7 @@ interface Props {
     /** The language to use */
     locale?: string;
 }
-declare const Contributors: ({ element, 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) => React.DetailedReactHTMLElement<{
     className: string;
     children: import("react/jsx-runtime").JSX.Element;
 }, HTMLElement> | null;

package/user/contributors/contributors.mock.d.ts

@@ -1,11 +1,14 @@
 declare const _default: {
     element: string;
     contributors: {
-        name: string;
-        image: {
-            thumbnail: string;
-        };
-    }[];
+        total: number;
+        data: {
+            name: string;
+            image: {
+                thumbnail: string;
+            };
+        }[];
+    };
     styling: {
         showText: string;
     };

package/user/member/index.d.ts

@@ -1,3 +1,3 @@
-export type { MemberProps } from './member';
+export type { MemberProps, MemberDetailsProps } from './member';
 export { default as Member } from './member';
 export { getMember } from './member.helpers';

package/user/member/member.d.ts

@@ -1,17 +1,26 @@
-export type MemberProps = 'apolitical' | 'community' | {
+import React from 'react';
+export type MemberDetailsProps = {
+    /** The user's unique ID */
     id?: string;
-    slug?: string;
+    /** The user's name */
     name?: string;
+    /** The user's job title */
     jobTitle?: string;
+    /** The organisation the user works for */
     organization?: string;
+    /** The user's location */
     location?: {
         country?: string;
     };
+    /** The user's profile picture */
     image?: {
         thumbnail?: string;
     };
 };
+export type MemberProps = 'apolitical' | 'community' | MemberDetailsProps;
 interface Props {
+    /** The element to render around the content */
+    element?: 'li' | 'div';
     /** Details about the Apolitical member */
     member?: MemberProps;
     /** Additional content to show with the member details */
@@ -28,5 +37,8 @@ interface Props {
     /** The language to use for the text */
     locale?: string;
 }
-declare const Member: ({ member: memberDetails, additionalContent, gtmContext, gtmType, className, }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const Member: ({ element, member: memberDetails, additionalContent, gtmContext, gtmType, className, }: Props) => React.DetailedReactHTMLElement<{
+    className: string;
+    children: import("react/jsx-runtime").JSX.Element;
+}, HTMLElement>;
 export default Member;

package/text/alert/index.d.ts

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