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

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/buttons/_buttons.scss

@@ -96,14 +96,16 @@
         &.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');
+            }
         }
 
         &.disabled {

package/styles/base/buttons/_icons.scss

@@ -14,11 +14,17 @@ $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)),
+        ('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/variables/colors/_theme.scss

@@ -33,17 +33,19 @@ $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_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_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_tertiary: map.get($c, 'b700'),
@@ -103,14 +105,21 @@ $theme: (
   marketing-block_tertiary_bg_2: map.get($c, 'p600'),
 
   // 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'),
@@ -186,6 +195,8 @@ $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
   filters: map.get($c, 'n700'),
@@ -198,14 +209,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'),
@@ -234,6 +247,12 @@ $theme: (
   pill: map.get($c, 'n700'),
   pill_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'),

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/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/text/alert/index.d.ts

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