@apolitical/component-library 2.0.2 → 2.0.3-beta.1

package/styles/base/_layout.scss

@@ -5,6 +5,10 @@
     display: none;
   }
 
+  .center {
+    text-align: center;
+  }
+
   .content-slim {
     max-width: px-to-rem($content-slim-width);
     margin-left: auto;

package/styles/base/_table.scss

@@ -16,6 +16,8 @@ $table: (
       px-to-rem(get-map($table, 'margin-bottom')) auto;
     border-collapse: separate;
     border-spacing: 0;
+    display: table;
+    overflow-x: auto;
 
     &,
     p,

package/styles/base/_text.scss

@@ -25,7 +25,7 @@ $sup: (
   'font-size': 10,
 );
 $standard-text-elements: p, li, dt, dd;
-$special-text-elements: h1, h2, h3, h4, h5, h6, a;
+$special-text-elements: h1, h2, h3, h4, h5, h6, a, small;
 
 @layer base {
   p,

package/styles/base/_titles.scss

@@ -45,6 +45,7 @@ $h3: (
   'line-height': 28,
   'line-height_md': 32,
   'margin-top': 60,
+  'margin-top_sibling': 32,
   'margin-bottom': 20,
 );
 $h4: (
@@ -174,6 +175,15 @@ $count-icon: (
   font-weight: 900;
   line-height: px-to-rem(get-map($h3, 'line-height'));
 
+  h1 + &,
+  h2 + &,
+  h3 + &,
+  h4 + &,
+  h5 + &,
+  h6 + & {
+    margin-top: px-to-rem(get-map($h3, 'margin-top_sibling'));
+  }
+
   @include breakpoint('min-width', 'md') {
     font-size: px-to-rem(get-map($h3, 'font-size_md'));
     line-height: px-to-rem(get-map($h3, 'line-height_md'));

package/styles/functions/_maps.scss

@@ -2,10 +2,26 @@
 @use 'sass:map';
 @use 'sass:meta';
 
-@function get-map($map, $key) {
+@function get-map($map, $key, $children: ()) {
   @if meta.variable-exists('map') and meta.type-of($map) == map {
     @if map.has-key($map, $key) {
-      @return map.get($map, $key);
+      @if length($children) > 0 {
+        $map: map.get($map, $key);
+
+        @if length($children) == 1 {
+          @return map.get($map, $children);
+        } @else {
+          $new-list: ();
+          @for $i from 1 through length($children) {
+            @if $i != 1 {
+              $new-list: list.append($new-list, list.nth($children, $i), 'space');
+            }
+          }
+          @return get-map($map, list.nth($children, 1), $new-list);
+        }
+      } @else {
+        @return map.get($map, $key);
+      }
     } @else {
       @error "ERROR: the key `#{$key}` does not exist in map.";
     }

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

@@ -3,10 +3,13 @@
 
 $c: $default-colors;
 $banners: (
+  banner_bg: get-map($c, 'n100'),
   banner-section: get-map($c, 'white'),
   banner-section_light: get-map($c, 'n700'),
   banner-section_bg: get-map($c, 'b700'),
   banner-section_light_bg: get-map($c, 'white'),
+  banner-section_gradient_bg:
+    linear-gradient(135deg, get-map($c, 'b700') 0%, get-map($c, 'g300') 100%),
   banner-section_overlay: get-map($c, 'n900'),
   banner-section_eyebrow: get-map($c, 'y300'),
   banner-section_light_eyebrow: get-map($c, 'b700'),

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

@@ -22,4 +22,7 @@ $form: (
   search_search-button_active_bg: get-map($c, 'white'),
   show_password: get-map($c, 'n600'),
   signup_form_error: get-map($c, 'error600'),
+  toggle_bg: get-map($c, 'n100'),
+  toggle_on_bg: get-map($c, 'b700'),
+  toggle_switch_bg: get-map($c, 'white'),
 );

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

@@ -1,8 +1,8 @@
 @import './../../../functions';
 @import 'banners', 'base', 'cards', 'communities', 'discussion', 'form', 'general',
-  'layout', 'loaders', 'modals', 'navigation', 'pages', 'text', 'user';
+  'layout', 'loaders', 'modals', 'navigation', 'pages', 'sections', 'text', 'user';
 
 $theme: merge-maps(
   $banners $base $cards $communities $discussion $form $general $layout $loaders $modals
-    $navigation $pages $text $user
+    $navigation $pages $sections $text $user
 );

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

@@ -3,6 +3,8 @@
 
 $c: $default-colors;
 $pages: (
+  general-website-pages_subtitle: get-map($c, 'n700'),
+  general-website-pages_subtitle_link: get-map($c, 'n600'),
   not-found_title: get-map($c, 'y300'),
   not-found_subtitle: get-map($c, 'white'),
   not-found_appended_bg: get-map($c, 'white'),

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

@@ -0,0 +1,7 @@
+@import './../colors';
+@import './../../../functions';
+
+$c: $default-colors;
+$sections: (
+  full-width-section_light_bg: get-map($c, 'n50'),
+);

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

@@ -9,6 +9,7 @@ $user: (
   contributor_border: get-map($c, 'white'),
   contributor_inner-border: get-map($c, 'n200'),
   contributor_label: get-map($c, 'n600'),
+  directory_hover_image: rgb(57 45 135 / 40%),
   member_highlighted_name: get-map($c, 'p500'),
   member_additional-content: get-map($c, 'n700'),
   member_small: get-map($c, 'n700'),

package/testing/__mocks__/tabbable.d.ts

@@ -0,0 +1,2 @@
+export = tabbable;
+declare const tabbable: any;

package/user/directory/directory.d.ts

@@ -0,0 +1,18 @@
+interface IDirectoryMember {
+    /** The member's name */
+    fullName: string;
+    /** The member's job title */
+    jobTitle: string;
+    /** The organisation the member works for */
+    organisation?: string;
+    /** The member's profile picture */
+    photo?: string;
+    /** The member's profile text */
+    text: string;
+}
+interface Props {
+    /** The members to show */
+    members: IDirectoryMember[];
+}
+declare const Directory: ({ members }: Props) => import("react/jsx-runtime").JSX.Element;
+export default Directory;

package/user/directory/index.d.ts

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

package/user/index.d.ts

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