@apolitical/component-library 4.7.15 → 4.7.16-beta.0

package/styles/base/_index.scss

@@ -1,2 +1,2 @@
 @import 'fonts', 'accessibility', 'blockquotes', 'buttons', 'form', 'hr', 'layout',
-  'links', 'lists', 'overlays', 'table', 'text', 'titles';
+  'links', 'lists', 'mentions', 'overlays', 'table', 'text', 'titles';

package/styles/base/_mentions.scss

@@ -0,0 +1,21 @@
+@import './../mixins', './../variables';
+
+$deleted-user: (
+  'padding-vertical': 4,
+  'padding-horizontal': 8,
+  'border-radius': 3,
+);
+
+@layer base {
+  .mention {
+    &.deleted-user {
+      background: get-map($theme, 'mention_deleted-user_bg');
+      padding: px-to-rem(get-map($deleted-user, 'padding-vertical'))
+        px-to-rem(get-map($deleted-user, 'padding-horizontal'));
+      color: get-map($theme, 'mention_deleted-user');
+      font-weight: 500;
+      font-style: italic;
+      border-radius: px-to-rem(get-map($deleted-user, 'border-radius'));
+    }
+  }
+}

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

@@ -95,4 +95,6 @@ $base: (
   overlay: rgb(21 25 33 / 25%),
   list_checkmarks_bg:
     linear-gradient(140deg, rgba(107 62 205 / 100%), rgba(0 179 191 / 100%)),
+  mention_deleted-user: get-map($c, 'n600'),
+  mention_deleted-user_bg: get-map($c, 'n50'),
 );

package/user/member/member.d.ts

@@ -20,8 +20,10 @@ export type MemberDetailsProps = {
     image?: {
         thumbnail?: string;
     };
+    /** An error, shown if the user doesn't exist */
+    error?: string;
 };
-export type MemberProps = 'apolitical' | 'community' | MemberDetailsProps;
+export type MemberProps = 'apolitical' | 'community' | 'deleted' | MemberDetailsProps;
 interface Props {
     /** The element to render around the content */
     element?: 'li' | 'div';