@apolitical/component-library 2.1.1-beta.0 → 2.1.1

package/styles/base/_accessibility.scss

@@ -28,9 +28,6 @@
   }
 
   .hidden {
-    width: 0;
-    height: 0;
-    display: block;
-    overflow: hidden;
+    @include hidden-element;
   }
 }

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/base/form/_checkbox.scss

@@ -0,0 +1,53 @@
+@import '@/styles/functions', '@/styles/mixins', '@/styles/variables';
+
+$pretty-checkbox: (
+  'width': 24,
+  'border': 1,
+  'border-radius': 4,
+  'tick-width': 11,
+  'tick-height': 8,
+  'top': 4,
+  'margin-top': -4,
+  'margin-left': -5.5,
+);
+
+@layer components {
+  .pretty-checkbox {
+    width: px-to-rem(get-map($pretty-checkbox, 'width'));
+    height: px-to-rem(get-map($pretty-checkbox, 'width'));
+    position: absolute;
+    top: px-to-rem(get-map($pretty-checkbox, 'top'));
+    left: 0;
+    border: px-to-rem(get-map($pretty-checkbox, 'border')) solid
+      get-map($theme, 'form_field_border');
+    border-radius: px-to-rem(get-map($pretty-checkbox, 'border-radius'));
+    box-sizing: border-box;
+    outline: none;
+    z-index: 10;
+
+    input:focus + &,
+    button:focus & {
+      box-shadow: $outline get-map($theme, 'default_focus');
+    }
+
+    input:checked + &,
+    .selected & {
+      background: get-map($theme, 'form_checkbox_bg');
+      border-color: get-map($theme, 'form_checkbox_border');
+
+      &::before {
+        @include image('icons/tick.svg', true);
+
+        content: '';
+        width: px-to-rem(get-map($pretty-checkbox, 'tick-width'));
+        height: px-to-rem(get-map($pretty-checkbox, 'tick-height'));
+        background: get-map($theme, 'form_checkbox_icon');
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        margin-top: px-to-rem(get-map($pretty-checkbox, 'margin-top'));
+        margin-left: px-to-rem(get-map($pretty-checkbox, 'margin-left'));
+      }
+    }
+  }
+}

package/styles/base/form/_index.scss

@@ -1 +1 @@
-@import 'fields', 'form', 'labels', 'search-button';
+@import 'checkbox', 'fields', 'form', 'labels', 'search-button';

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/mixins/_accessibility.scss

@@ -0,0 +1,6 @@
+@mixin hidden-element() {
+  width: 0;
+  height: 0;
+  display: block;
+  overflow: hidden;
+}

package/styles/mixins/_index.scss

@@ -1,2 +1,2 @@
-@import 'animations', 'backgrounds', 'breakpoints', 'browsers', 'containers', 'queries',
-  'selectors', 'styles', 'transitions';
+@import 'accessibility', 'animations', 'backgrounds', 'breakpoints', 'browsers',
+  'containers', 'queries', 'selectors', 'styles', 'transitions';

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

@@ -3,6 +3,11 @@
 
 $c: $default-colors;
 $form: (
+  dropdown_menu_border_top: get-map($c, 'n500'),
+  dropdown_action_bar_color: get-map($c, 'n600'),
+  dropdown_action_bar_button_color: get-map($c, 'n700'),
+  dropdown_action_bar_button_color_active_focus_hover: get-map($c, 'b700'),
+  dropdown_action_bar_button_color_active_focus_hover_override: get-map($c, 'white'),
   invite_form_border_focus: get-map($c, 'b500'),
   invite_form_shadow: get-map($c, 'b100'),
   invite_form_remove_email_button: get-map($c, 'n700'),
@@ -22,7 +27,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/_general.scss

@@ -4,6 +4,11 @@
 
 $c: $default-colors;
 $general: (
+  image_container_bg: get-map($c, 'n50'),
+  image_container_bg_empty: get-map($c, 'white'),
+  return_to_nav_box_shadow: get-map($c, 'black'),
+  return_to_nav_bg_focus_active: get-map($c, 'white'),
+  return_to_nav_bg_before_after: get-map($c, 'b700'),
   tooltip: get-map($c, 'white'),
   tooltip_bg: color.adjust(get-map($c, 'n900'), $alpha: -0.1),
 );

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/_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/_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/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,26 +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;
-    /** Functions to call when something changes */
-    functions: {
-        /** 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, functions: { 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';