@apolitical/component-library 0.0.5 → 1.1.0-beta.1

package/styles/variables/colors/_theme.scss

@@ -4,6 +4,7 @@
 
 $c: $default-colors;
 $theme: (
+  // Base styles
   default_focus: map.get($c, 'b100'),
 
   background: map.get($c, 'white'),
@@ -11,6 +12,9 @@ $theme: (
   title: map.get($c, 'n900'),
   subtitle: map.get($c, 'n800'),
   text: map.get($c, 'n900'),
+  text_error: map.get($c, 'error600'),
+  text_line: map.get($c, 'g50'),
+  text_line_dark: map.get($c, 'b700'),
 
   link: map.get($c, 'b700'),
   link_hover: map.get($c, 'b800'),
@@ -53,10 +57,164 @@ $theme: (
   button_tertiary_text-decoration: transparent,
   button_tertiary_disabled_text-decoration: transparent,
 
-
   blockquote: map.get($c, 'n900'),
   'blockquote_border': map.get($c, 'g300'),
 
   divider: map.get($c, 'n100'),
+
+  form_input: map.get($c, 'n900'),
+  form_input_placeholder: map.get($c, 'n600'),
+  form_input_bg: map.get($c, 'white'),
+  form_input_border: map.get($c, 'n200'),
+  form_input_focus_border: map.get($c, 'b500'),
+  form_input_error_border: map.get($c, 'error600'),
+  form_input_focus_box-shadow: map.get($c, 'b100'),
+  form_search-button_bg: map.get($c, 'n900'),
+
+  overlay: rgb(21 25 33 / 25%),
+
+  // Banners
+  banner-section: map.get($c, 'white'),
+  banner-section_light: map.get($c, 'n700'),
+  banner-section_bg: map.get($c, 'b700'),
+  banner-section_light_bg: map.get($c, 'white'),
+  banner-section_overlay: map.get($c, 'n900'),
+  banner-section_eyebrow: map.get($c, 'y300'),
+  banner-section_light_eyebrow: map.get($c, 'b700'),
+  banner-section_light_title: map.get($c, 'n900'),
+
+  marketing-block_title: map.get($c, 'n900'),
+  marketing-block_tertiary_title: map.get($c, 'white'),
+  marketing-block_text: map.get($c, 'n700'),
+  marketing-block_tertiary_text: map.get($c, 'b100'),
+  marketing-block_circle: map.get($c, 'b700'),
+  marketing-block_tertiary_circle: map.get($c, 'g300'),
+
+  marketing-block_primary_bg_1: map.get($c, 'g100'),
+  marketing-block_secondary_bg_1: map.get($c, 'p100'),
+  marketing-block_tertiary_bg_1: map.get($c, 'b700'),
+
+  marketing-block_primary_bg_2: map.get($c, 'y300'),
+  marketing-block_secondary_bg_2: map.get($c, 'g100'),
+  marketing-block_tertiary_bg_2: map.get($c, 'p600'),
+
+  // Form
+  password-rules: map.get($c, 'error600'),
+  password-rules_matches: map.get($c, 'success500'),
+  password-rules_small: map.get($c, 'n600'),
+
+  rating: map.get($c, 'n600'),
+  rating_hover_button: map.get($c, 'n500'),
+  rating_selected_button: map.get($c, 'b700'),
+  rating_shadow: map.get($c, 'b500'),
+
+  search_button_hover_bg: map.get($c, 'b700'),
+  search_clear-button_bg: map.get($c, 'n500'),
+  search_search-button_bg: map.get($c, 'n600'),
+  search_search-button_active_bg: map.get($c, 'white'),
+
+  // Layout
+  cookie-banner_bg: map.get($c, 'n50'),
+  cookie-banner_shadow: rgb(107 91 82 / 40%),
+  cookie-banner_title_border: map.get($c, 'n100'),
+
+  download-section_bg: map.get($c, 'g300'),
+
+  footer: map.get($c, 'g300'),
+  footer_bg: map.get($c, 'b800'),
+  footer_before_bg: linear-gradient(90deg, map.get($c, 'b700') 0%, map.get($c, 'g300') 100%),
+  footer_title: map.get($c, 'y300'),
+  footer_link: map.get($c, 'g300'),
+  footer_dt: map.get($c, 'white'),
+  footer_dd: map.get($c, 'g300'),
+  footer_hr: map.get($c, 'y300'),
+  footer_small: map.get($c, 'b200'),
+
+  header: map.get($c, 'n900'),
+  header_bg: map.get($c, 'white'),
+  header_link: map.get($c, 'n900'),
+  header_link_hover: map.get($c, 'b500'),
+  header_link_active: map.get($c, 'b700'),
+  header_button_hover_bg: map.get($c, 'b700'),
+  header_account-button_bg: map.get($c, 'n700'),
+  header_account-button_border: map.get($c, 'n700'),
+  header_menu-button_bg: map.get($c, 'n900'),
+
+  header_parent_hover: map.get($c, 'b700'),
+  header_child: map.get($c, 'n700'),
+  header_child_divider: map.get($c, 'n100'),
+  header_border: map.get($c, 'n100'),
+
+
+  logos_title: map.get($c, 'n700'),
+  logos_small: map.get($c, 'n600'),
+
+  page-layout_gradient_bg_1: map.get($c, 'n50'),
+  page-layout_gradient_bg_2: rgb(240 245 255 / 0%),
+
+  // Loaders
+  loading-block_icon_bg: map.get($c, 'n600'),
+
+  loading-placeholder_bg: map.get($c, 'n10'),
+  loading-placeholder_after_bg: linear-gradient(90deg, transparent, rgba(255 255 255 / 20%), transparent),
+
+  progress-bar_bg: map.get($c, 'n50'),
+  progress-bar_before_bg: map.get($c, 'n200'),
+  progress-bar_25_bg_1: map.get($c, 'p100'),
+  progress-bar_25_bg_2: map.get($c, 'g100'),
+  progress-bar_50_bg_1: map.get($c, 'g100'),
+  progress-bar_50_bg_2: map.get($c, 'y300'),
+  progress-bar_75_bg_1: map.get($c, 'y300'),
+  progress-bar_75_bg_2: map.get($c, 'b200'),
+  progress-bar_100_bg_1: map.get($c, 'b200'),
+  progress-bar_100_bg_2: map.get($c, 'g100'),
+
+  // Modals
+  modal_bg: map.get($c, 'white'),
+  modal_shadow: rgba(42 49 65 / 30%),
+
+  // Navigation
+  filters: map.get($c, 'n700'),
+  filters_selected: map.get($c, 'g700'),
+  filters_active: map.get($c, 'n700'),
+  filters_bg: map.get($c, 'n50'),
+  filters_selected_bg: map.get($c, 'g100'),
+  filters_hover_bg: map.get($c, 'n100'),
+  filters_active_bg: map.get($c, 'g300'),
+  filters_outline: map.get($c, 'n200'),
+  filters_selected_outline: map.get($c, 'g200'),
+
+  tags: map.get($c, 'b700'),
+  tags_light: map.get($c, 'p500'),
+
+
+  // Text
+  collapsible-section_bg: map.get($c, 'white'),
+  collapsible-section_border: map.get($c, 'n500'),
+  collapsible-section_icon: map.get($c, 'n900'),
+  collapsible-section_icon_hover: map.get($c, 'b100'),
+  collapsible-section_discrete-links_link_hover: map.get($c, 'b700'),
+
+  empty-state-box: map.get($c, 'n700'),
+  empty-state-box_error_border: map.get($c, 'error600'),
+
+  helper-text-box: map.get($c, 'n700'),
+  helper-text-box_bg: map.get($c, 'info50'),
+  helper-text-box_warning_bg: map.get($c, 'warning50'),
+  helper-text-box_error_bg: map.get($c, 'error50'),
+  helper-text-box_success_bg: map.get($c, 'success50'),
+
+  highlighted-text-box_bg: map.get($c, 'n50'),
+  highlighted-text-box_secondary_bg: map.get($c, 'y50'),
+  highlighted-text-box_tertiary_bg: map.get($c, 'error50'),
+  highlighted-text-box_subtle_bg: map.get($c, 'white'),
+  highlighted-text-box_bold_bg: linear-gradient(135deg, map.get($c, 'b100'), map.get($c, 'g50')),
+  highlighted-text-box_subtle_gradient: linear-gradient(rgba(255 255 255 / 0%), rgba(255 255 255 / 100%)),
+  highlighted-text-box_bold_icon: map.get($c, 'b500'),
+
+  highlighted-text-box_subtle_border: map.get($c, 'n100'),
+
+  pill: map.get($c, 'n700'),
+  pill_bg: map.get($c, 'y300'),
 );
 

package/styles/variables/sizes/_common.scss

@@ -1,3 +1,4 @@
 @import './../../functions';
 
-$outline: 0 0 0 px-to-rem(4);
+$outline-width: px-to-rem(4);
+$outline: 0 0 0 $outline-width;

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

@@ -0,0 +1,13 @@
+import React from 'react';
+interface Props {
+    /** The text to show when the section is collapsed */
+    label?: string | 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;
+}
+declare const CollapsibleSectionWrapper: ({ locale, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
+export default CollapsibleSectionWrapper;

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

@@ -0,0 +1 @@
+export { default as CollapsibleSection } from './collapsible-section';

package/text/empty-state-box/empty-state-box.d.ts

@@ -0,0 +1,21 @@
+import { ButtonVariantType } from '../../general';
+interface Props {
+    /** Box styling */
+    variant?: 'empty' | 'error';
+    /** Optional text */
+    text?: false | string;
+    /** Optional button. The button can also show depending on the viewport size */
+    button?: false | {
+        url: string;
+        text: string;
+        variant?: ButtonVariantType;
+        gtmContext: string;
+        breakpoints?: {
+            [key: string]: boolean;
+        };
+    };
+    /** Additional classes */
+    className?: string;
+}
+declare const EmptyStateBox: ({ variant, text, button, className }: Props) => import("react/jsx-runtime").JSX.Element;
+export default EmptyStateBox;

package/text/empty-state-box/index.d.ts

@@ -0,0 +1 @@
+export { default as EmptyStateBox } from './empty-state-box';

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

@@ -0,0 +1,14 @@
+import React from 'react';
+export type HelperTextBoxTypes = 'default' | 'warning' | 'error' | 'success';
+interface Props {
+    /** The style of box being rendered */
+    type?: HelperTextBoxTypes;
+    /** Additional classes to add to the box */
+    className?: string;
+    /** The heading to display at the top of the box */
+    heading?: string | false;
+    /** The content to display in the box */
+    children: React.ReactNode;
+}
+declare const HelperTextBox: ({ type, className, heading, children }: Props) => import("react/jsx-runtime").JSX.Element;
+export default HelperTextBox;

package/text/helper-text-box/index.d.ts

@@ -0,0 +1 @@
+export { default as HelperTextBox } from './helper-text-box';

package/text/hide-show-text-box/hide-show-text-box.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+interface Props {
+    /** The language for the box text */
+    locale?: string;
+    /** Additional classes to add to the box */
+    className?: string;
+    /** The text to show when the section is collapsed */
+    show?: string | false;
+    /** The text to show when the section is expanded */
+    hide?: string | false;
+    /** The content to show when the section is expanded */
+    text: string;
+    children?: React.ReactNode;
+}
+declare const HideShowTextBoxWrapper: ({ locale, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
+export default HideShowTextBoxWrapper;

package/text/hide-show-text-box/hide-show-text-box.mock.d.ts

@@ -0,0 +1,4 @@
+export default data;
+declare namespace data {
+    let children: import("react/jsx-runtime").JSX.Element;
+}

package/text/hide-show-text-box/index.d.ts

@@ -0,0 +1 @@
+export { default as HideShowTextBox } from './hide-show-text-box';

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

@@ -0,0 +1,13 @@
+import React from 'react';
+interface Props {
+    /** The style of box being rendered */
+    variant?: 'primary' | 'secondary' | 'tertiary' | 'subtle' | 'bold';
+    /** Additional classes to add to the box */
+    className?: string;
+    /** The content to display */
+    children: React.ReactNode;
+    /** Additional props to pass to the box */
+    style?: React.CSSProperties;
+}
+declare const HighlightedTextBoxWrapper: ({ variant, className, children, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
+export default HighlightedTextBoxWrapper;

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

@@ -0,0 +1 @@
+export { default as HighlightedTextBox } from './highlighted-text-box';

package/text/index.d.ts

@@ -0,0 +1,6 @@
+export * from './collapsible-section';
+export * from './empty-state-box';
+export * from './helper-text-box';
+export * from './hide-show-text-box';
+export * from './highlighted-text-box';
+export * from './pill';

package/text/pill/index.d.ts

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

package/text/pill/pill.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+interface Props {
+    /** Additional classes to add to the pill */
+    className?: 'margin-left' | 'margin-right' | '';
+    /** The pill text */
+    children: React.ReactNode;
+}
+declare const Pill: ({ className, children }: Props) => import("react/jsx-runtime").JSX.Element;
+export default Pill;

package/user/index.d.ts

@@ -0,0 +1 @@
+export * from './profile-picture';

package/user/profile-picture/index.d.ts

@@ -0,0 +1 @@
+export { default as ProfilePicture } from './profile-picture';

package/user/profile-picture/profile-picture.d.ts

@@ -0,0 +1,12 @@
+interface Props {
+    /** The user's name, to create initials */
+    name: string;
+    /** The user's image */
+    src?: string;
+    /** Alternative text for the image */
+    alt?: string | undefined;
+    /** Additional classes */
+    className?: string;
+}
+declare const ProfilePicture: ({ className, src, name, alt, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
+export default ProfilePicture;

package/user/profile-picture/profile-picture.helpers.d.ts

@@ -0,0 +1,3 @@
+export declare const getInitials: (name: string) => string;
+export declare const colors: string[];
+export declare const getBackground: (name: string) => string | undefined;

package/demo/demo.d.ts

@@ -1,4 +0,0 @@
-export interface ComponentLibraryProps {
-}
-export declare function Demo(props: ComponentLibraryProps): import("react/jsx-runtime").JSX.Element;
-export default Demo;

package/demo/index.d.ts

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

package/layout/layout.d.ts

@@ -1,6 +0,0 @@
-/// <reference types="react" />
-interface Props {
-    children: React.ReactNode;
-}
-export declare function Layout({ children }: Props): import("react/jsx-runtime").JSX.Element;
-export default Layout;