@apolitical/component-library 1.5.0 → 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/_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');
 
@@ -108,6 +110,14 @@
             }
         }
 
+        &.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 {
           &, &:hover, &:active, &:focus, &:focus-visible {
             background: map.get($theme, 'button_secondary_bg_disabled');
@@ -247,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

@@ -22,6 +22,7 @@ $icons: ('arrow_left', (d, d, 3, 8), (d, d, 3, 8), (d, d, 4, 7)),
         ('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)),

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

@@ -34,6 +34,7 @@ $theme: (
   button_secondary_focus: map.get($c, 'white'),
   button_secondary_muted: map.get($c, 'n600'),
   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'),
@@ -42,11 +43,13 @@ $theme: (
   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'),
@@ -104,6 +107,9 @@ $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'),
@@ -136,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%),
@@ -199,6 +209,9 @@ $theme: (
   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'),
@@ -244,8 +257,10 @@ $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'),
@@ -256,6 +271,7 @@ $theme: (
   // 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/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/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;