@apolitical/component-library 2.0.3-beta.1 → 2.0.4-4125.0

package/styles/base/_layout.scss

@@ -5,10 +5,6 @@
     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,8 +16,6 @@ $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, small;
+$special-text-elements: h1, h2, h3, h4, h5, h6, a;
 
 @layer base {
   p,

package/styles/base/_titles.scss

@@ -45,7 +45,6 @@ $h3: (
   'line-height': 28,
   'line-height_md': 32,
   'margin-top': 60,
-  'margin-top_sibling': 32,
   'margin-bottom': 20,
 );
 $h4: (
@@ -175,15 +174,6 @@ $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,26 +2,10 @@
 @use 'sass:map';
 @use 'sass:meta';
 
-@function get-map($map, $key, $children: ()) {
+@function get-map($map, $key) {
   @if meta.variable-exists('map') and meta.type-of($map) == map {
     @if map.has-key($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);
-      }
+      @return map.get($map, $key);
     } @else {
       @error "ERROR: the key `#{$key}` does not exist in map.";
     }

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

@@ -3,13 +3,10 @@
 
 $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,7 +22,4 @@ $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', 'sections', 'text', 'user';
+  'layout', 'loaders', 'modals', 'navigation', 'pages', 'text', 'user';
 
 $theme: merge-maps(
   $banners $base $cards $communities $discussion $form $general $layout $loaders $modals
-    $navigation $pages $sections $text $user
+    $navigation $pages $text $user
 );

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

@@ -39,6 +39,7 @@ $layout: (
   logos_title: get-map($c, 'n700'),
   logos_small: get-map($c, 'n600'),
   page-layout_gradient_bg_1: get-map($c, 'n50'),
+  page-layout_subtle_bg: rgb(43 137 117 / 10%),
   page-layout_gradient_bg_2: rgb(240 245 255 / 0%),
   page-layout_bold: get-map($c, 'white'),
   page-layout_bold_bg: get-map($c, 'b700'),

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

@@ -3,8 +3,6 @@
 
 $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/_text.scss

@@ -36,6 +36,7 @@ $text: (
   pill_bg: get-map($c, 'n200'),
   pill_subtle_bg: get-map($c, 'white'),
   pill_highlighted_bg: get-map($c, 'y300'),
+  pill_light_bg: get-map($c, 'info50'),
   pill_information_bg: get-map($c, 'g100'),
   pill_registered_bg: get-map($c, 'g50'),
   pill_subtle_border: get-map($c, 'n200'),

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

@@ -9,7 +9,6 @@ $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/text/pill/pill.d.ts

@@ -3,7 +3,7 @@ interface Props {
     /** The size of the pill */
     size?: 'small' | 'medium' | 'large';
     /** The style of the pill */
-    variant?: 'default' | 'subtle' | 'highlighted' | 'information' | 'registered';
+    variant?: 'default' | 'subtle' | 'highlighted' | 'information' | 'registered' | 'light';
     /** Additional classes to add to the pill */
     className?: string;
     /** The pill text */

package/user/index.d.ts

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

package/banners/banner/banner.d.ts

@@ -1,11 +0,0 @@
-import { ResponsiveImageType } from '../../general';
-export interface BannerSectionType {
-    /** Additional className */
-    className?: string;
-    /** The image to display */
-    image?: string | ResponsiveImageType;
-    /** Optional data test ID */
-    testId?: string;
-}
-declare const Banner: ({ className, image, ...props }: BannerSectionType) => import("react/jsx-runtime").JSX.Element | null;
-export default Banner;

package/banners/banner/index.d.ts

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

package/form/components/toggle/index.d.ts

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

package/form/components/toggle/toggle.d.ts

@@ -1,23 +0,0 @@
-interface Props {
-    /** The ID of the toggle */
-    id?: string;
-    /** The label to show next to the toggle */
-    label: string;
-    /** The options for the toggle */
-    options: {
-        /** The text for the option, used for screen readers */
-        label: string;
-        /** The value for the option */
-        value: boolean | string;
-    }[];
-    /** The initial value of the toggle */
-    initialValue?: boolean | string;
-    /** Callback function to run when the toggle is clicked */
-    onChange: (value: boolean | string) => void;
-    /** Whether the toggle is disabled */
-    isDisabled?: boolean;
-    /** Additional class names */
-    className?: string;
-}
-declare const Toggle: ({ id, label, options, initialValue, onChange, isDisabled, className, }: Props) => import("react/jsx-runtime").JSX.Element;
-export default Toggle;

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

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

package/testing/__mocks__/tabbable.d.ts

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

package/user/directory/directory.d.ts

@@ -1,18 +0,0 @@
-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

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