@apolitical/component-library 1.1.1 → 1.1.4

package/styles/base/_text.scss

@@ -20,13 +20,13 @@ $sup: ('font-size': 10);
     font-size: px-to-rem(map.get($default, 'font-size'));
     line-height: px-to-rem(map.get($default, 'line-height'));
 
-      .text-small & {
+      .text-small &, &.text-small {
         font-size: px-to-rem(map.get($small, 'font-size'));
         line-height: px-to-rem(map.get($small, 'line-height'));
         letter-spacing: px-to-rem(map.get($small, 'letter-spacing'));
       }
 
-      .text-medium & {
+      .text-medium &, &.text-medium {
         font-size: px-to-rem(map.get($medium, 'font-size'));
         line-height: px-to-rem(map.get($medium, 'line-height'));
       }
@@ -35,11 +35,11 @@ $sup: ('font-size': 10);
         font-size: px-to-rem(map.get($default, 'font-size_md'));
         line-height: px-to-rem(map.get($default, 'line-height_md'));
 
-          .text-small & {
+          .text-small &, &.text-small {
             font-size: px-to-rem(map.get($small, 'font-size_md'));
           }
 
-          .text-medium & {
+          .text-medium &, &.text-medium {
             font-size: px-to-rem(map.get($medium, 'font-size_md'));
             line-height: px-to-rem(map.get($medium, 'line-height_md'));
           }
@@ -49,9 +49,9 @@ $sup: ('font-size': 10);
   p {
     margin-bottom: px-to-rem(map.get($default, 'margin-bottom'));
 
-      .text-small & { margin-bottom: px-to-rem(map.get($small, 'margin-bottom')); }
+      .text-small &, &.text-small { margin-bottom: px-to-rem(map.get($small, 'margin-bottom')); }
 
-      .text-medium & { margin-bottom: px-to-rem(map.get($medium, 'margin-bottom')); }
+      .text-medium &, &.text-medium { margin-bottom: px-to-rem(map.get($medium, 'margin-bottom')); }
   }
 
   small {

package/styles/base/buttons/_button-wrapper.scss

@@ -0,0 +1,35 @@
+@use 'sass:map';
+@import './../../functions',
+        './../../mixins',
+        './../../variables';
+
+$button-wrapper-button: ('margin': 12);
+
+@layer base {
+  .button-wrapper {
+    list-style: none;
+    margin: 0 auto;
+    padding: 0;
+    display: flex;
+    flex-flow: row wrap;
+    justify-content: center;
+    align-content: center;
+
+      li, > button, > .button {
+        margin: 0 px-to-rem(map.get($button-wrapper-button, 'margin')) px-to-rem(map.get($button-wrapper-button, 'margin')) px-to-rem(map.get($button-wrapper-button, 'margin'));
+      }
+
+      li {
+        display: flex;
+        align-content: center;
+
+          &:last-child { margin-bottom: px-to-rem(map.get($button-wrapper-button, 'margin')); }
+      }
+
+      button, .button {
+        margin-top: auto;
+        margin-bottom: auto;
+      }
+  }
+
+}

package/styles/base/buttons/_index.scss

@@ -1 +1,2 @@
-@import 'buttons';
+@import 'buttons',
+        'button-wrapper';

package/styles/base/form/_fields.scss

@@ -57,4 +57,8 @@ $field: ('padding-vertical': 8, 'padding-horizontal': 16, 'font-size': 16, 'line
         }
       }
   }
+
+  textarea {
+    resize: none;
+  }
 }

package/styles/variables/colors/_theme.scss

@@ -98,6 +98,15 @@ $theme: (
   marketing-block_secondary_bg_2: map.get($c, 'g100'),
   marketing-block_tertiary_bg_2: map.get($c, 'p600'),
 
+  // Discussion
+  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_liked: map.get($c, 'p500'),
+  discussion-likes_liked_bg: map.get($c, 'p500'),
+
   // Form
   password-rules: map.get($c, 'error600'),
   password-rules_matches: map.get($c, 'success500'),
@@ -189,6 +198,9 @@ $theme: (
 
 
   // 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'),
@@ -216,5 +228,10 @@ $theme: (
 
   pill: map.get($c, 'n700'),
   pill_bg: map.get($c, 'y300'),
+
+  // User
+  member_highlighted_name: map.get($c, 'p500'),
+  member_additional-content: map.get($c, 'n700'),
+  member_small: map.get($c, 'n700')
 );
 

package/text/alert/alert.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+interface Props {
+    /** The element that will render around the content */
+    element?: 'span' | 'small' | 'strong' | 'em' | 'p' | 'li';
+    /** The content to be hidden from screen readers */
+    children?: React.ReactNode;
+    /** Optional ID, for errors */
+    id?: string;
+    /** Additional classes */
+    className?: string;
+    /** Test ID for Jest tests */
+    'data-testid'?: string;
+}
+declare const Alert: ({ element, children, className, ...props }: Props) => React.DetailedReactHTMLElement<{
+    className: string;
+    'aria-live': "assertive";
+    /** Optional ID, for errors */
+    id?: string | undefined;
+    /** Test ID for Jest tests */
+    'data-testid'?: string | undefined;
+}, HTMLElement>;
+export default Alert;

package/text/alert/index.d.ts

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

package/text/index.d.ts

@@ -1,3 +1,4 @@
+export * from './alert';
 export * from './collapsible-section';
 export * from './empty-state-box';
 export * from './helper-text-box';

package/user/index.d.ts

@@ -1 +1,2 @@
+export * from './member';
 export * from './profile-picture';

package/user/member/index.d.ts

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

package/user/member/member.d.ts

@@ -0,0 +1,32 @@
+export type MemberProps = 'apolitical' | 'community' | {
+    id?: string;
+    slug?: string;
+    name?: string;
+    jobTitle?: string;
+    organization?: string;
+    location?: {
+        country?: string;
+    };
+    image?: {
+        thumbnail?: string;
+    };
+};
+interface Props {
+    /** Details about the Apolitical member */
+    member?: MemberProps;
+    /** Additional content to show with the member details */
+    additionalContent?: false | {
+        createdAt?: Date | string;
+        didEdit?: boolean;
+    };
+    /** The GTM context to use */
+    gtmContext?: string;
+    /** The GTM event to use */
+    gtmType?: string;
+    /** Additional classes */
+    className?: string;
+    /** The language to use for the text */
+    locale?: string;
+}
+declare const MemberWrapper: ({ locale, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
+export default MemberWrapper;

package/user/member/member.helpers.d.ts

@@ -0,0 +1,22 @@
+import { MemberProps } from './member';
+export declare const getMember: (member: MemberProps) => {
+    image: string;
+    name?: undefined;
+    role?: undefined;
+    organisation?: undefined;
+    country?: undefined;
+    url?: undefined;
+} | {
+    name: string | undefined;
+    role: string;
+    organisation: string;
+    country: string;
+    url: string;
+    image: string | undefined;
+};
+export declare const getJob: ({ role, organisation, country, maximumCharacters, }: {
+    role?: string | undefined;
+    organisation?: string | undefined;
+    country?: string | undefined;
+    maximumCharacters?: number | undefined;
+}) => string;

package/user/profile-picture/profile-picture.d.ts

@@ -5,8 +5,12 @@ interface Props {
     src?: string;
     /** Alternative text for the image */
     alt?: string | undefined;
+    /** Width of the image */
+    width?: number;
+    /** Height of the image */
+    height?: number;
     /** Additional classes */
     className?: string;
 }
-declare const ProfilePicture: ({ className, src, name, alt, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const ProfilePicture: ({ className, src, name, alt, width, height, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
 export default ProfilePicture;