@apolitical/component-library 1.1.5 → 1.3.0-beta.1

package/styles/base/_index.scss

@@ -8,5 +8,6 @@
         'links',
         'lists',
         'overlays',
+        'table',
         'text',
         'titles';

package/styles/base/_table.scss

@@ -0,0 +1,71 @@
+@use 'sass:map';
+@import './../functions',
+        './../variables';
+
+$table: ('margin-top': 64, 'margin-bottom': 32, 'padding-vertical': 12, 'padding-horizontal': 20, 'border': 1, 'border-radius': 8);
+
+@layer base {
+  table {
+    width: 100%;
+    margin: px-to-rem(map.get($table, 'margin-top')) auto px-to-rem(map.get($table, 'margin-bottom')) auto;
+    border-collapse: separate;
+    border-spacing: 0;
+
+      &, p, li { text-align: left; }
+  }
+
+  th, td {
+    border: px-to-rem(map.get($table, 'border')) solid map.get($theme, 'table_border');
+    vertical-align: top;
+  }
+
+  th, tbody:first-child tr:first-child td {
+    background: map.get($theme, 'table_th_bg');
+    padding: px-to-rem(map.get($table, 'padding-horizontal'));
+    color: map.get($theme, 'table_th');
+    font-weight: 600;
+    border-right-width: 0;
+
+      /* Add border radius to the corners of the table, not each cell */
+      &:first-child {
+        border-top-left-radius: px-to-rem(map.get($table, 'border-radius'));
+      }
+
+      &:last-child {
+        border-top-right-radius: px-to-rem(map.get($table, 'border-radius'));
+        border-right-width: px-to-rem(map.get($table, 'border'));
+      }
+  }
+
+  td {
+    padding: px-to-rem(map.get($table, 'padding-vertical')) px-to-rem(map.get($table, 'padding-horizontal'));
+    border-top-width: 0;
+    border-right-width: 0;
+
+      /* Prevent borders with double width due to using border-collapse separate */
+      &:last-child {
+        border-right-width: px-to-rem(map.get($table, 'border'));
+      }
+  }
+
+  tr:last-child {
+    td {
+      &:first-child {
+        border-bottom-left-radius: px-to-rem(map.get($table, 'border-radius'));
+      }
+
+      &:last-child {
+        border-bottom-right-radius: px-to-rem(map.get($table, 'border-radius'));
+      }
+    }
+  }
+
+  // Remove the styling if there's only one row as some old articles use tables
+  // to display buttons inline
+  tr:first-child:last-child {
+    td {
+      background: none;
+      border: none;
+    }
+  }
+}

package/styles/base/buttons/_icons.scss

@@ -21,4 +21,4 @@ $icons: ('arrow_left', (d, d, 3, 8), (d, d, 3, 8), (d, d, 4, 7)),
         ('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), (12, 9, 7, 8), (9, 7, 6, 6));
+        ('tick', (14, 11, 8, 10), (14, 11, 5, 8), (9, 7, 6, 6));

package/styles/variables/colors/_theme.scss

@@ -71,6 +71,10 @@ $theme: (
   form_input_focus_box-shadow: map.get($c, 'b100'),
   form_search-button_bg: map.get($c, 'n900'),
 
+  table_border: map.get($c, 'n200'),
+  table_th: map.get($c, 'white'),
+  table_th_bg: map.get($c, 'n600'),
+
   overlay: rgb(21 25 33 / 25%),
 
   // Banners
@@ -104,6 +108,7 @@ $theme: (
   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'),
 
@@ -230,6 +235,12 @@ $theme: (
   pill_bg: map.get($c, 'y300'),
 
   // User
+  contributor: map.get($c, 'n700'),
+  contributor_bg: map.get($c, 'white'),
+  contributor_border: map.get($c, 'white'),
+  contributor_inner-border: map.get($c, 'n200'),
+  contributor_label: map.get($c, 'n600'),
+
   member_highlighted_name: map.get($c, 'p500'),
   member_additional-content: map.get($c, 'n700'),
   member_small: map.get($c, 'n700')

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

@@ -1,19 +1,17 @@
-import { ButtonVariantType } from '../../general';
+import { ButtonPropsType } from '../../general';
+interface ButtonType extends ButtonPropsType {
+    text: string;
+    breakpoints?: {
+        [key: string]: boolean;
+    };
+}
 interface Props {
     /** Box styling */
     variant?: 'empty' | 'error';
     /** Optional text */
     text?: false | string;
     /** Optional button. The button can also show depending on the viewport size */
-    button?: false | {
-        url: string;
-        text: string;
-        variant?: ButtonVariantType;
-        gtmContext: string;
-        breakpoints?: {
-            [key: string]: boolean;
-        };
-    };
+    button?: false | ButtonType;
     /** Additional classes */
     className?: string;
 }

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

@@ -5,7 +5,7 @@ interface Props {
     /** Additional classes to add to the box */
     className?: string;
     /** The content to display */
-    children: React.ReactNode;
+    children: React.ReactNode | JSX.Element;
     /** Additional props to pass to the box */
     style?: React.CSSProperties;
 }

package/text/index.d.ts

@@ -4,4 +4,5 @@ export * from './empty-state-box';
 export * from './helper-text-box';
 export * from './hide-show-text-box';
 export * from './highlighted-text-box';
+export * from './markdown-text';
 export * from './pill';

package/text/markdown-text/components/case-study/case-study.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+declare const _default: ({ children }: {
+    children?: React.ReactNode | string;
+}) => import("react/jsx-runtime").JSX.Element;
+export default _default;

package/text/markdown-text/components/case-study/index.d.ts

@@ -0,0 +1 @@
+export { default as CaseStudy } from './case-study';

package/text/markdown-text/components/details/details.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+interface Props {
+    /** The content to show */
+    children?: React.ReactNode;
+    /** The language to use for the text */
+    locale?: string;
+}
+declare const DetailsWrapper: ({ locale, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
+export default DetailsWrapper;

package/text/markdown-text/components/details/index.d.ts

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

package/text/markdown-text/components/div/div.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+declare const _default: ({ children, ...props }: {
+    children: React.ReactNode | string;
+    class?: string | undefined;
+}) => import("react/jsx-runtime").JSX.Element;
+export default _default;

package/text/markdown-text/components/div/index.d.ts

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

package/text/markdown-text/components/empty-component/empty-component.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+declare const _default: () => React.ExoticComponent<{
+    children?: React.ReactNode;
+}>;
+export default _default;

package/text/markdown-text/components/empty-component/index.d.ts

@@ -0,0 +1 @@
+export { default as EmptyComponent } from './empty-component';

package/text/markdown-text/components/iframe/iframe.d.ts

@@ -0,0 +1,8 @@
+interface Props {
+    /** The iframe `src` */
+    src: string;
+    /** The language to use for the text */
+    locale?: string;
+}
+declare const IFrameWrapper: ({ locale, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
+export default IFrameWrapper;

package/text/markdown-text/components/iframe/index.d.ts

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

package/text/markdown-text/components/index.d.ts

@@ -0,0 +1,6 @@
+export { EmptyComponent } from './empty-component';
+export { CaseStudy } from './case-study';
+export { Details } from './details';
+export { Div } from './div';
+export { IFrame } from './iframe';
+export { Link } from './link';

package/text/markdown-text/components/link/index.d.ts

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

package/text/markdown-text/components/link/link.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+declare const _default: ({ children, ...props }: {
+    children: React.ReactNode;
+    href?: string | undefined;
+    target?: "_blank" | "_self" | "_parent" | "_top" | undefined;
+    className?: string | undefined;
+}) => import("react/jsx-runtime").JSX.Element;
+export default _default;

package/text/markdown-text/index.d.ts

@@ -0,0 +1 @@
+export { default as MarkdownText } from './markdown-text';

package/text/markdown-text/markdown-text.d.ts

@@ -0,0 +1,10 @@
+interface Props {
+    /** Additional classes */
+    className?: string;
+    /** The options to pass to the markdown parser */
+    options?: any;
+    /** The content to be parsed */
+    children: string;
+}
+declare const MarkdownText: ({ className, options, children }: Props) => import("react/jsx-runtime").JSX.Element;
+export default MarkdownText;

package/user/contributors/contributors.d.ts

@@ -0,0 +1,26 @@
+import { MemberProps } from './../member';
+interface Props {
+    /** The element that will render around the content */
+    element?: 'div' | 'section' | 'aside' | 'li';
+    /** Information about the contributors */
+    contributors: Array<MemberProps>;
+    /** Information on the style of the component */
+    styling?: {
+        /** The size of the images */
+        size?: 'small' | 'medium';
+        /** Whether to show a gap between the images */
+        showGap?: boolean;
+        /** The text to show, defaulting to the contributor's name when there's only one */
+        showText?: boolean | string;
+        /** Whether to show placeholders */
+        showPlaceholders?: boolean;
+    };
+    /** The number of contributors to show before we switch to showing a number */
+    cutoff?: number;
+    /** Additional classes */
+    className?: string;
+    /** The language to use */
+    locale?: string;
+}
+declare const ContributorsWrapper: ({ locale, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
+export default ContributorsWrapper;

package/user/contributors/index.d.ts

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

package/user/index.d.ts

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

package/user/member/index.d.ts

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