@apolitical/component-library 2.2.3 → 2.3.0-beta.1

package/styles/base/_layout.scss

@@ -7,6 +7,8 @@
 
   .center {
     text-align: center;
+    margin-right: auto;
+    margin-left: auto;
   }
 
   .content-slim {

package/styles/base/_lists.scss

@@ -1,9 +1,14 @@
-@import './../functions';
+@import './../mixins', './../functions', './../variables';
 
 $ul: (
   'margin-bottom': 16,
   'padding-left': 40,
 );
+$checkmarks: (
+  'width': 16,
+  'top': 7,
+  'margin-right': 12,
+);
 $li: (
   'margin-bottom': 18,
   'margin-bottom_sm': 12,
@@ -18,6 +23,29 @@ $li: (
     display: block;
   }
 
+  ul.checkmarks {
+    list-style: none;
+
+    li {
+      position: relative;
+      padding-left: px-to-rem(
+        get-map($checkmarks, 'width') + get-map($checkmarks, 'margin-right')
+      );
+
+      &::before {
+        @include image('icons/check-inside-circle.svg', true);
+
+        content: '';
+        width: px-to-rem(get-map($checkmarks, 'width'));
+        height: px-to-rem(get-map($checkmarks, 'width'));
+        background: get-map($theme, 'list_checkmarks_bg');
+        position: absolute;
+        top: px-to-rem(get-map($checkmarks, 'top'));
+        left: 0;
+      }
+    }
+  }
+
   li {
     margin-bottom: px-to-rem(get-map($li, 'margin-bottom'));
 

package/styles/base/_titles.scss

@@ -5,6 +5,9 @@ $highlight: (
   'height': 4,
   'margin-top': 12,
   'border-radius': 8,
+  'width_vertical': 4,
+  'height_vertical': 24,
+  'bottom_vertical': 26,
 );
 $pre-title: (
   'font-size': 14,
@@ -104,6 +107,17 @@ $count-icon: (
       left: 50%;
       transform: translateX(-50%);
     }
+  } @else if $align == 'vertical' {
+    padding-left: px-to-rem(
+      get-map($highlight, 'height') + get-map($highlight, 'margin-top')
+    );
+
+    &::after {
+      width: px-to-rem(get-map($highlight, 'width_vertical'));
+      height: px-to-rem(get-map($highlight, 'height_vertical'));
+      bottom: px-to-rem(get-map($highlight, 'bottom_vertical'));
+      max-height: 100%;
+    }
   }
 }
 

package/styles/base/buttons/_button-wrapper.scss

@@ -22,6 +22,7 @@ $button-wrapper-button: (
     }
 
     li {
+      line-height: normal;
       display: flex;
       align-content: center;
 

package/styles/base/buttons/_icons.scss

@@ -9,9 +9,18 @@
 
 $icons: ('arrow_left', (d, d, 3, 8), (d, d, 3, 8), (d, d, 4, 7)),
   ('arrow_right', (d, d, 3, 8), (d, d, 3, 8), (d, d, 4, 7)),
+  ('arrow_rotating', (20, 20, 2, d), (d, d, 2, d), (15, 15, d, d)),
   ('arrow_corner-down_right', (12, 12, 6, 8), (12, 12, 4, 12), (d, d, d, d)),
   ('arrow_corner-down_left', (12, 12, 6, 8), (12, 12, 4, 12), (d, d, d, d)),
   ('arrow-down', (d, d, 4, 10), (d, d, 3, 8), (d, d, 4, d)),
+  ('check-inside-circle', (28, 28, -2, d), (d, d, 3, d), (d, d, d, d)),
+  ('check-inside-circle_no-overlap', (28, 28, -2, d), (24, 24, -2, d), (d, d, 2, d)),
+  (
+    'check-inside-circle_no-overlap_inverted',
+    (28, 28, -2, d),
+    (24, 24, -2, d),
+    (d, d, 2, d)
+  ),
   ('chevron_left', (16, 16, 4, 8), (14, 14, 3, 8), (14, 14, d, d)),
   ('chevron_right', (16, 16, 4, 8), (14, 14, 3, 8), (14, 14, d, d)),
   ('close', (48, 48, 0, 0), (32, 32, 0, 0), (24, 24, 0, 0)),

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

@@ -14,6 +14,14 @@ $banners: (
   banner-section_eyebrow: get-map($c, 'y300'),
   banner-section_light_eyebrow: get-map($c, 'b700'),
   banner-section_light_title: get-map($c, 'n900'),
+  custom-content-banner: get-map($c, 'n900'),
+  custom-content-banner_bg: get-map($c, 'n50'),
+  custom-content-banner_overlay:
+    linear-gradient(90deg, #{get-map($c, 'n50')} 50%, rgb(240 245 255 / 0%) 100%),
+  custom-content-banner_dark: get-map($c, 'white'),
+  custom-content-banner_dark_bg: get-map($c, 'b900'),
+  custom-content-banner_dark_overlay:
+    linear-gradient(273deg, rgb(126 115 182 / 0%) 5.36%, #{get-map($c, 'b900')} 47.32%),
   marketing-block_title: get-map($c, 'n900'),
   marketing-block_tertiary_title: get-map($c, 'white'),
   marketing-block_text: get-map($c, 'n700'),

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

@@ -85,4 +85,6 @@ $base: (
   table_th: get-map($c, 'white'),
   table_th_bg: get-map($c, 'n600'),
   overlay: rgb(21 25 33 / 25%),
+  list_checkmarks_bg:
+    linear-gradient(140deg, rgba(107 62 205 / 100%), rgba(0 179 191 / 100%)),
 );

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

@@ -0,0 +1,22 @@
+@import './../colors';
+@import './../../../functions';
+
+$c: $default-colors;
+$courses: (
+  course-structure_border: get-map($c, 'n100'),
+  course-structure_summary_small: get-map($c, 'b700'),
+  course-structure_link_bg: get-map($c, 'white'),
+  course-structure_link_hover_bg: get-map($c, 'b100'),
+  course-structure_icon: get-map($c, 'n700'),
+  course-structure_icon_bg: get-map($c, 'white'),
+  course-structure_overlay_icon: get-map($c, 'white'),
+  course-structure_locked_icon_bg: get-map($c, 'p500'),
+  course-structure_completed_icon_bg: get-map($c, 'g600'),
+  course-structure_content-type: get-map($c, 'n700'),
+  course-progressions: get-map($c, 'n600'),
+  course-progressions_percentage: get-map($c, 'b700'),
+  course-progressions_progress-bar: get-map($c, 'n100'),
+  course-progressions_progress-bar_bg: get-map($c, 'g300'),
+  lesson-type_large_time: get-map($c, 'n700'),
+  mark-complete-button_completed: get-map($c, 'g600'),
+);

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

@@ -9,6 +9,8 @@ $general: (
   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'),
+  table-of-contents_border: get-map($c, 'b200'),
+  time-to-complete: get-map($c, 'p500'),
   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,9 @@
 @import './../../../functions';
-@import 'banners', 'base', 'cards', 'communities', 'discussion', 'form', 'general',
-  'layout', 'loaders', 'modals', 'navigation', 'pages', 'sections', 'text', 'user';
+@import 'banners', 'base', 'cards', 'communities', 'courses', 'discussion', 'form',
+  'general', 'layout', 'loaders', 'modals', 'navigation', 'pages', 'sections', 'text',
+  'user';
 
 $theme: merge-maps(
-  $banners $base $cards $communities $discussion $form $general $layout $loaders $modals
-    $navigation $pages $sections $text $user
+  $banners $base $cards $communities $courses $discussion $form $general $layout $loaders
+    $modals $navigation $pages $sections $text $user
 );

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

@@ -38,6 +38,7 @@ $layout: (
   header_border: get-map($c, 'n100'),
   logos_title: get-map($c, 'n700'),
   logos_small: get-map($c, 'n600'),
+  logos_wrapped-logo_bg: get-map($c, 'white'),
   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%),

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

@@ -17,4 +17,8 @@ $loaders: (
   progress-bar_75_bg_2: get-map($c, 'b200'),
   progress-bar_100_bg_1: get-map($c, 'b200'),
   progress-bar_100_bg_2: get-map($c, 'g100'),
+  progress-bar_circle_inner: get-map($c, 'white'),
+  progress-bar_circle_bg: get-map($c, 'n100'),
+  progress-bar_circle_progress: get-map($c, 'g300'),
+  progress-bar_circle_dark_progress: get-map($c, 'b700'),
 );

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

@@ -18,25 +18,37 @@ $text: (
   highlighted-text-box_bg: get-map($c, 'n50'),
   highlighted-text-box_secondary_bg: get-map($c, 'y50'),
   highlighted-text-box_tertiary_bg: get-map($c, 'error50'),
+  highlighted-text-box_quaternary_bg: get-map($c, 'g50'),
   highlighted-text-box_subtle_bg: get-map($c, 'white'),
+  highlighted-text-box_subtle-alt_dark_bg: get-map($c, 'n50'),
   highlighted-text-box_bold_bg:
     linear-gradient(135deg, get-map($c, 'b100'), get-map($c, 'g50')),
   highlighted-text-box_subtle_gradient:
     linear-gradient(rgba(255 255 255 / 0%), rgba(255 255 255 / 100%)),
   highlighted-text-box_bold_icon: get-map($c, 'b500'),
   highlighted-text-box_subtle_border: get-map($c, 'n100'),
+  highlighted-text-box_subtle-alt_border: get-map($c, 'n200'),
   highlighted-text-box_muted_bg: get-map($c, 'n40'),
   highlighted-text-box_muted_icon: get-map($c, 'n600'),
+  highlighted-text-box_quaternary_highlight: get-map($c, 'g300'),
+  highlighted-text-box_subtle-alt_highlight: get-map($c, 'g300'),
+  icon-bulleted-list: get-map($c, 'b700'),
+  icon-bulleted-list_light: get-map($c, 'y300'),
+  icon-bulleted-list_muted: get-map($c, 'n700'),
+  icon-bulleted-list_border: get-map($c, 'n200'),
+  icon-bulleted-list_zebra_bg: get-map($c, 'n50'),
   page-heading_bg:
     linear-gradient(180deg, get-map($c, 'n50') 0%, rgb(240 245 255 / 0%) 100%),
   page-heading_subtitle: get-map($c, 'n700'),
   page-user_location_text: get-map($c, 'p500'),
   pill: get-map($c, 'n900'),
   pill_highlighted: get-map($c, 'n700'),
+  pill_highlighted-light: get-map($c, 'n900'),
   pill_registered: get-map($c, 'g700'),
   pill_bg: get-map($c, 'n200'),
   pill_subtle_bg: get-map($c, 'white'),
   pill_highlighted_bg: get-map($c, 'y300'),
+  pill_highlighted-light_bg: get-map($c, 'y100'),
   pill_light_bg: get-map($c, 'info50'),
   pill_information_bg: get-map($c, 'g100'),
   pill_registered_bg: get-map($c, 'g50'),

package/text/collapsible-section/accordian.d.ts

@@ -0,0 +1,15 @@
+export default Accordion;
+declare class Accordion {
+    constructor(el: any);
+    el: any;
+    summary: any;
+    content: any;
+    animation: any;
+    isClosing: boolean;
+    isExpanding: boolean;
+    onClick(e: any): void;
+    shrink(): void;
+    open(): void;
+    expand(): void;
+    onAnimationFinish(open: any): void;
+}

package/text/collapsible-section/collapsible-section.d.ts

@@ -1,13 +1,13 @@
 import React from 'react';
 interface Props {
     /** The text to show when the section is collapsed */
-    label?: string | false;
+    label?: string | React.ReactNode | false;
     /** Additional classes to add to the `details` */
     className?: string;
     /** The content to show when the section is expanded */
     children?: React.ReactNode;
-    /** The language to use for the text */
-    locale?: string;
+    /** Whether the section should animate when opening/closing */
+    shouldAnimate?: boolean;
 }
-declare const CollapsibleSection: ({ label, className, children }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const CollapsibleSection: ({ label, className, children, shouldAnimate, }: Props) => import("react/jsx-runtime").JSX.Element;
 export default CollapsibleSection;

package/text/content-type-label/content-type-label.d.ts

@@ -0,0 +1,14 @@
+import { CardContentType } from '../../cards';
+import { CustomIconType } from './content-type-label.types';
+interface Props {
+    /** The Contentful content model type */
+    contentType: CardContentType;
+    /** The icon to use */
+    customIcon?: CustomIconType;
+    /** The label to use */
+    customLabel?: string;
+    /** Additional classes */
+    className?: string;
+}
+declare const ContentTypeLabel: ({ contentType, customIcon, customLabel, className, }: Props) => import("react/jsx-runtime").JSX.Element | null;
+export default ContentTypeLabel;

package/{cards/card/card.helpers.d.ts → text/content-type-label/content-type-label.helpers.d.ts}

@@ -1,4 +1,4 @@
-import { CustomIconType } from '../../cards/cards.types';
+import { CustomIconType } from './content-type-label.types';
 export declare const fileNames: {
     [key in CustomIconType]?: string;
 };

package/text/content-type-label/content-type-label.types.d.ts

@@ -0,0 +1 @@
+export type CustomIconType = 'calendar' | 'cube' | 'document' | 'download' | 'globe' | 'graduationCap' | 'link' | 'person' | 'star' | 'speech';

package/text/content-type-label/index.d.ts

@@ -0,0 +1,2 @@
+export type { CustomIconType } from './content-type-label.types';
+export { default as ContentTypeLabel } from './content-type-label';

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

@@ -1,9 +1,16 @@
 import React from 'react';
 interface Props {
     /** The style of box being rendered */
-    variant?: 'primary' | 'secondary' | 'tertiary' | 'subtle' | 'bold' | 'muted';
+    variant?: 'primary' | 'secondary' | 'tertiary' | 'quaternary' | 'subtle' | 'subtle-alt' | 'bold' | 'muted';
     /** The name of an icon file to display at the top */
     icon?: string;
+    /** Optional styling for the box */
+    styling?: {
+        /** Whether to show a highlight at the bottom of the box, for `subtle-alt` */
+        showHighlight?: boolean;
+        /** The background of the box, for `subtle-alt`. Defaults to `default` */
+        background?: 'default' | 'dark';
+    };
     /** Additional classes to add to the box */
     className?: string;
     /** The content to display */
@@ -11,5 +18,5 @@ interface Props {
     /** Additional props to pass to the box */
     style?: React.CSSProperties;
 }
-declare const HighlightedTextBoxWrapper: ({ variant, icon, className, children, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const HighlightedTextBoxWrapper: ({ variant, icon, styling, className, children, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
 export default HighlightedTextBoxWrapper;

package/text/icon-bulleted-list/icon-bulleted-list.d.ts

@@ -0,0 +1,31 @@
+import React from 'react';
+interface Props {
+    element?: 'ul' | 'ol' | 'dl';
+    /** The layout of the list; `dls` cannot have a horizontal layout */
+    layout?: 'vertical' | 'horizontal';
+    /** The color variant of the list */
+    variant?: 'default' | 'light' | 'muted';
+    /** Text for list */
+    items: {
+        /** The file name of the icon */
+        icon: string;
+        /** The text to display in the `dt` (only used when the element is `dl`) */
+        dt?: string;
+        /** The text to display */
+        text: string;
+    }[];
+    /** Additional styling */
+    styling?: {
+        /** If the list should have a border */
+        hasBorder?: boolean;
+        /** If the list should have alternating colours (zebra stripes) */
+        zebraStriping?: boolean;
+    };
+    /** Additional classes */
+    className?: string;
+}
+declare const IconBulletedList: ({ element, layout, variant, items, styling, className, }: Props) => React.DetailedReactHTMLElement<{
+    className: string;
+    children: import("react/jsx-runtime").JSX.Element[];
+}, HTMLElement>;
+export default IconBulletedList;

package/text/icon-bulleted-list/index.d.ts

@@ -0,0 +1 @@
+export { default as IconBulletedList } from './icon-bulleted-list';

package/text/index.d.ts

@@ -1,8 +1,10 @@
 export * from './collapsible-section';
+export * from './content-type-label';
 export * from './empty-state-box';
 export * from './helper-text-box';
 export * from './hide-show-text-box';
 export * from './highlighted-text-box';
+export * from './icon-bulleted-list';
 export * from './markdown-text';
 export * from './page-heading';
 export * from './pill';

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

@@ -7,6 +7,10 @@ interface Props {
     children: string;
     /** What is being changed or removed in the final mark-up. `default` handles large blocks of HTML for courses. `text-only` only expects text and will remove `iframe`s. */
     overrideType?: 'default' | 'text-only';
+    styling?: {
+        /** Whether to highlight the titles */
+        highlightTitles?: boolean;
+    };
 }
-declare const MarkdownText: ({ className, options, children, overrideType, }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const MarkdownText: ({ className, options, children, overrideType, styling, }: Props) => import("react/jsx-runtime").JSX.Element;
 export default MarkdownText;

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' | 'light';
+    variant?: 'default' | 'subtle' | 'highlighted' | 'highlighted-light' | 'information' | 'registered' | 'light';
     /** Additional classes to add to the pill */
     className?: string;
     /** The pill text */