@atom-learning/components 2.4.1 → 2.5.0

package/CHANGELOG.md

@@ -1,9 +1,17 @@
-## [2.4.1](https://github.com/Atom-Learning/components/compare/v2.4.0...v2.4.1) (2022-09-21)
+# [2.5.0](https://github.com/Atom-Learning/components/compare/v2.4.1...v2.5.0) (2022-09-29)
 
 
 ### Bug Fixes
 
-* empty state image size ([08517df](https://github.com/Atom-Learning/components/commit/08517df0c233aedf89c169afbb5f5d39cbe33238))
+* **TopBar:** add size variant ([b591220](https://github.com/Atom-Learning/components/commit/b591220ab07f8c87403207cbaad066eef9b0e983))
+* **TopBar:** update snapshots ([13ef6db](https://github.com/Atom-Learning/components/commit/13ef6dbef2ab79ec12258a3b8ce4ad4fc507ba6b))
+* **TopBar:** update tests and TopBar components ([15cc7b1](https://github.com/Atom-Learning/components/commit/15cc7b148dab0444fc30ae71644ebc97f84e9677))
+* **TopBar:** update TopBar tests ([7f10d49](https://github.com/Atom-Learning/components/commit/7f10d495d4e62466b6528b0cf27e87179072c716))
+
+
+### Features
+
+* **TopBar:** update TopBar Docs ([7037d69](https://github.com/Atom-Learning/components/commit/7037d69ba147ebc1bdfc6e47c1ffe748b7714033))
 
 # [1.4.0](https://github.com/Atom-Learning/components/compare/v1.3.0...v1.4.0) (2022-04-11)
 

package/dist/components/top-bar/TopBar.d.ts

@@ -10,7 +10,277 @@ interface TopBarSubComponents {
     Divider: typeof TopBarDivider;
 }
 declare const TopBarDivider: () => JSX.Element;
-interface TopBarProps {
+declare const StyledRoot: import("@stitches/react/types/styled-component").StyledComponent<"div", {
+    hasScrolled?: boolean | "true" | undefined;
+    size?: "md" | "lg" | undefined;
+}, {
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    reducedMotion: string;
+    allowMotion: string;
+    hover: string;
+}, import("@stitches/react/types/css-util").CSS<{
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    reducedMotion: string;
+    allowMotion: string;
+    hover: string;
+}, {
+    colors: {
+        textForeground: any;
+        textSubtle: any;
+        textPlaceholder: any;
+        background: any;
+        backgroundAccent: any;
+        tonal50: any;
+        tonal100: any;
+        tonal200: any;
+        tonal300: any;
+        tonal400: any;
+        tonal500: any;
+        tonal600: any;
+        alpha100: any;
+        alpha150: any;
+        alpha200: any;
+        alpha250: any;
+        alpha600: any;
+        primaryLight: any;
+        primary: any;
+        primaryMid: any;
+        primaryDark: any;
+        secondary: any;
+        brandRed: any;
+        brandRedAccent: any;
+        brandGreen: any;
+        brandGreenAccent: any;
+        brandPurple: any;
+        brandPurpleAccent: any;
+        brandYellow: any;
+        brandYellowAccent: any;
+        successLight: any;
+        success: any;
+        successMid: any;
+        successDark: any;
+        dangerLight: any;
+        danger: any;
+        dangerMid: any;
+        dangerDark: any;
+        warningLight: any;
+        warning: any;
+        warningMid: any;
+        warningDark: any;
+        warningText: any;
+        subjectEnglish: any;
+        subjectMaths: any;
+        subjectScience: any;
+        subjectVerbalReasoning: any;
+        subjectNonVerbalReasoning: any;
+        subjectCreativeWriting: any;
+        subjectExamSkills: any;
+    };
+    space: {
+        "0": any;
+        "1": any;
+        "2": any;
+        "3": any;
+        "4": any;
+        "5": any;
+        "6": any;
+        "7": any;
+        "8": any;
+        "9": any;
+    };
+    fontSizes: {
+        xs: any;
+        sm: any;
+        md: any;
+        lg: any;
+        xl: any;
+        "2xl": any;
+        "3xl": any;
+        "4xl": any;
+    };
+    fonts: {
+        sans: any;
+        mono: any;
+        display: any;
+        body: any;
+    };
+    sizes: {
+        "0": any;
+        "1": any;
+        "2": any;
+        "3": any;
+        "4": any;
+        "5": any;
+        "6": any;
+        "7": any;
+        "8": any;
+    };
+    radii: {
+        "0": any;
+        "1": any;
+        "2": any;
+        "3": any;
+        round: any;
+    };
+    shadows: {
+        "0": any;
+        "1": any;
+        "2": any;
+        "3": any;
+    };
+}, import("@stitches/react/types/config").DefaultThemeMap, {
+    bg: (value: {
+        readonly [$$PropertyValue]: "background";
+    }) => {
+        background: {
+            readonly [$$PropertyValue]: "background";
+        };
+    };
+    inset: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        top: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        right: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        bottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        left: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    size: (value: string | number | {
+        readonly [$$ScaleValue]: "size";
+    }) => {
+        height: string | number | {
+            readonly [$$ScaleValue]: "size";
+        };
+        width: string | number | {
+            readonly [$$ScaleValue]: "size";
+        };
+    };
+    p: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        padding: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    pt: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingTop: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    pr: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingRight: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    pb: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingBottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    pl: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingLeft: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    px: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingLeft: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        paddingRight: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    py: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingTop: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        paddingBottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    m: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        margin: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    mt: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginTop: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    mr: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginRight: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    mb: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginBottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    ml: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginLeft: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    mx: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginLeft: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        marginRight: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    my: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginTop: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        marginBottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+}>>;
+declare type StyledRootProps = React.ComponentProps<typeof StyledRoot>;
+interface TopBarProps extends StyledRootProps {
     css?: CSS;
 }
 export declare const TopBar: React.FC<TopBarProps> & TopBarSubComponents;

package/dist/components/top-bar/TopBar.js

@@ -1 +1 @@
-import t from"react";import{styled as r}from"../../stitches.js";import{useScrollPosition as i}from"../../utilities/hooks/useScrollPosition.js";import{Divider as n}from"../divider/Divider.js";import{Flex as m}from"../flex/Flex.js";import{TopBarActionIcon as d}from"./TopBarActionIcon.js";import{TopBarBrand as p,TopBarBrandLogo as l,TopBarBrandName as s}from"./TopBarBrand.js";const c=()=>t.createElement(n,{orientation:"vertical",css:{minHeight:28,bg:"$tonal100"}}),x=r("div",{bg:"white",position:"sticky",display:"flex",alignItems:"center",width:"100vw",top:"0",height:"$6",zIndex:1,borderBottom:"1px solid $tonal100",transition:"box-shadow .2s ease-out",variants:{hasScrolled:{true:{boxShadow:"0px 4px 4px -2px rgba(31, 31, 31, 0.1);"}}}}),B=r(m,{alignItems:"center",height:"$4",mx:"$4",width:"100%","@md":{mx:"$5"}}),o=e=>{const{y:a}=i();return t.createElement(x,{hasScrolled:!!a},t.createElement(B,{...e}))};o.Brand=p,o.BrandLogo=l,o.BrandName=s,o.ActionIcon=d,o.Divider=c,o.displayName="TopBar";export{o as TopBar};
+import t from"react";import{styled as r}from"../../stitches.js";import{useScrollPosition as s}from"../../utilities/hooks/useScrollPosition.js";import{Divider as m}from"../divider/Divider.js";import{Flex as d}from"../flex/Flex.js";import{TopBarActionIcon as l}from"./TopBarActionIcon.js";import{TopBarBrandLogo as e,TopBarBrand as p,TopBarBrandName as h}from"./TopBarBrand.js";const c=()=>t.createElement(m,{orientation:"vertical",css:{height:"$2",bg:"$tonal100"}}),g=r("div",{bg:"white",position:"sticky",display:"flex",alignItems:"center",width:"100vw",top:"0",zIndex:1,borderBottom:"1px solid $tonal100",transition:"box-shadow .2s ease-out",variants:{hasScrolled:{true:{boxShadow:"0px 4px 4px -2px rgba(31, 31, 31, 0.1);"}},size:{md:{height:"$6",[`& ${e}`]:{'&[src$=".svg"]':{height:24,width:"auto"}}},lg:{height:"$7",[`& ${e}`]:{'&[src$=".svg"]':{height:32,width:"auto"}}}}}}),x=r(d,{alignItems:"center",height:"$4",mx:"$4",width:"100%","@md":{mx:"$5"}}),o=({size:i="md",...a})=>{const{y:n}=s();return t.createElement(g,{hasScrolled:!!n,size:i},t.createElement(x,{...a}))};o.Brand=p,o.BrandLogo=e,o.BrandName=h,o.ActionIcon=l,o.Divider=c,o.displayName="TopBar";export{o as TopBar};

package/dist/components/top-bar/TopBarBrand.d.ts

@@ -5,7 +5,10 @@ declare type TopBarBrandLogoProps = {
     alt?: string;
     css?: CSS;
 };
-export declare const TopBarBrandLogo: ({ src, alt, css }: TopBarBrandLogoProps) => JSX.Element;
+export declare const TopBarBrandLogo: {
+    ({ src, alt, css }: TopBarBrandLogoProps): JSX.Element;
+    toString(): string;
+};
 export declare const TopBarBrandName: import("@stitches/react/types/styled-component").StyledComponent<React.ForwardRefExoticComponent<Omit<Omit<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "key" | keyof React.HTMLAttributes<HTMLParagraphElement>> & {
     ref?: ((instance: HTMLParagraphElement | null) => void) | React.RefObject<HTMLParagraphElement> | null | undefined;
 }, "size" | "css"> & import("@stitches/react/types/styled-component").TransformProps<{

package/dist/components/top-bar/TopBarBrand.js

@@ -1 +1 @@
-import a from"react";import{styled as o}from"../../stitches.js";import{Image as n}from"../image/Image.js";import{Text as m}from"../text/Text.js";const c=({src:r,alt:t="Atom Learning logo",css:e})=>a.createElement(n,{src:r,alt:t,css:{mr:"$3",mb:"5px",'&[src$=".svg"]':{height:24,width:"auto"},...e}}),l=o(m,{color:"$tonal400"}),s=o("a",{display:"flex",alignItems:"center",textDecoration:"none",color:"$tonal400","&:hover, &:focus":{textDecoration:"none"}});export{s as TopBarBrand,c as TopBarBrandLogo,l as TopBarBrandName};
+import n from"react";import{styled as o}from"../../stitches.js";import{Image as l}from"../image/Image.js";import{Text as m}from"../text/Text.js";const r=({src:t,alt:a="Atom Learning logo",css:e})=>n.createElement(l,{className:"topbar-brand-logo",src:t,alt:a,css:{mr:"$3",mb:"5px",...e}});r.toString=()=>".topbar-brand-logo";const c=o(m,{color:"$tonal400"}),s=o("a",{display:"flex",alignItems:"center",textDecoration:"none",color:"$tonal400","&:hover, &:focus":{textDecoration:"none"}});export{s as TopBarBrand,r as TopBarBrandLogo,c as TopBarBrandName};