@apolitical/component-library 1.1.4 → 1.2.0

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/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'),
 

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;