@atom-learning/components 2.17.0 → 2.19.0

package/CHANGELOG.md

@@ -1,14 +1,36 @@
-# [2.17.0](https://github.com/Atom-Learning/components/compare/v2.16.0...v2.17.0) (2022-11-18)
+# [2.19.0](https://github.com/Atom-Learning/components/compare/v2.18.0...v2.19.0) (2022-12-01)
 
 
 ### Bug Fixes
 
-* workaround to only render first page of rows ([559b469](https://github.com/Atom-Learning/components/commit/559b469fb986fcdc3f50567e182253a15731ecbf))
+* sidedrawer - content/footer position ([60e5a01](https://github.com/Atom-Learning/components/commit/60e5a019e201b1b49120f150faee24ad8cb7c67b))
+* sidedrawer - ts validation fix. types fix + aria-label ([88130a4](https://github.com/Atom-Learning/components/commit/88130a4de9df779e03d793ce1dcb53c1f1ceabc3))
 
 
 ### Features
 
-* accept initialState for DataTable ([f230794](https://github.com/Atom-Learning/components/commit/f230794aaf57174145efd2609bdb6f0a6dcdecf0))
+* sidedrawer - accordion item simplified ([219c2a8](https://github.com/Atom-Learning/components/commit/219c2a8452e60458b5db5cf994b1436fa87942e3))
+* sidedrawer - accordion removed from item. overlay and footer improvements ([33e4278](https://github.com/Atom-Learning/components/commit/33e42782d524eaa96663e8e3d5835825918b449b))
+* sidedrawer - accordion root simplified, open/close changes ([3158955](https://github.com/Atom-Learning/components/commit/315895506f21af0f0eaa84184483608a90cd52c9))
+* sidedrawer - accordion usage simplified, accordion.item error handling, styles cleanup ([0de86a8](https://github.com/Atom-Learning/components/commit/0de86a84d4e1a92f9c09745365472ea4d5cc9927))
+* sidedrawer - accordtion item animation ([c6fa5bd](https://github.com/Atom-Learning/components/commit/c6fa5bd227bbf748149f1cad2d4c1dc4d1ff0dee))
+* sidedrawer - accordtion root renders automatically. mdx docs added ([1b97feb](https://github.com/Atom-Learning/components/commit/1b97feb4e09893f7fdcd68d8ec5ad711ee06732b))
+* sidedrawer - active item styles improvements. trigger children improvements ([d26fd08](https://github.com/Atom-Learning/components/commit/d26fd0849306cabf1b9d8133843d51b11045bcd7))
+* sidedrawer - api update to support sidedrawer.trigger ([65f3b08](https://github.com/Atom-Learning/components/commit/65f3b085000c268484ec98d3b27f5f2bd6dc5352))
+* sidedrawer - cleanup accordion item render ([a989ba2](https://github.com/Atom-Learning/components/commit/a989ba267f2a280d50262626189ae6b79836c4f0))
+* sidedrawer - close added, header and footer css improvements ([b92c64b](https://github.com/Atom-Learning/components/commit/b92c64b2f1d1ec0cba0fcccac7040169e5aa9bbd))
+* sidedrawer - close on escape key, onClose passed to overlay. docs update ([fa670d5](https://github.com/Atom-Learning/components/commit/fa670d577a5e2e18275a3d18618ecde759c3a98b))
+* sidedrawer - core components foundations ([3c95835](https://github.com/Atom-Learning/components/commit/3c958357fda36aaad68963ad39c43af1a2510a8a))
+* sidedrawer - css and props improvements, animations moved to shared ([97680c5](https://github.com/Atom-Learning/components/commit/97680c51efc93f4800013e297e6a5d748c7db25b))
+* sidedrawer - disabled state + accordion item props improvement ([8f70379](https://github.com/Atom-Learning/components/commit/8f70379e3b44707191a4c157321926f4d908fe2b))
+* sidedrawer - item and accordion ([80abac3](https://github.com/Atom-Learning/components/commit/80abac3bb0355728c7e4967e72e46dcd04f4a39e))
+* sidedrawer - overlay animation fix ([ee8bed2](https://github.com/Atom-Learning/components/commit/ee8bed26fb9fd11a5b24c902cfeb25e2f4635a4c))
+* sidedrawer - render overlay always ([4b629b5](https://github.com/Atom-Learning/components/commit/4b629b526848e7d7e3a19c4af26e0d421e623e7b))
+* sidedrawer docs preview ([5a4e895](https://github.com/Atom-Learning/components/commit/5a4e8957d2df6fa2e3ac21ef38931f6af2c3902a))
+* sidedrawer docs update ([a3dc286](https://github.com/Atom-Learning/components/commit/a3dc2866cd961f990a0cf8ce42fd8d5936cdbf48))
+* sidedrawer foundations change - use dialog ([3927ff5](https://github.com/Atom-Learning/components/commit/3927ff5ea8a16a77706a4f2cccce3f753cea39d9))
+* sidedrawer props simplified ([6871e6b](https://github.com/Atom-Learning/components/commit/6871e6b1b26a7d63e67ff9013f82356b3c6092cd))
+* sidedrawer unit tests ([b7530b3](https://github.com/Atom-Learning/components/commit/b7530b31f45f67df79a340190b78cd21b028a993))
 
 # [1.4.0](https://github.com/Atom-Learning/components/compare/v1.3.0...v1.4.0) (2022-04-11)
 

package/dist/components/badge/Badge.js

@@ -1 +1 @@
-import*as e from"react";import{styled as n}from"../../stitches.js";import{Box as a}from"../box/Box.js";import{Flex as m}from"../flex/Flex.js";const l=n(m,{justifyContent:"center",alignItems:"center",borderRadius:"$0",border:"1px solid #FFFFFF",fontFamily:"$body",variants:{theme:{success:{bg:"$successLight",color:"$successDark"},warning:{bg:"$warningLight",color:"$tonal600"},danger:{bg:"$dangerLight",color:"$dangerDark"},neutral:{bg:"$tonal50",color:"$tonal400"},info:{bg:"$primaryLight",color:"$primaryMid"}},size:{xs:{fontSize:"$sm",px:"$3",height:"$2"},sm:{fontSize:"$md",px:"$4",height:"$3"},md:{fontSize:"$md",px:"$4",height:"$4"}}}}),o=({theme:t="info",size:r="sm",children:i,...s})=>e.createElement(l,{role:"status",theme:t,size:r,...s},e.createElement(a,{as:"div",css:{whiteSpace:"nowrap",overflowX:"hidden",textOverflow:"ellipsis",py:"$0"}},i));o.displayName="Badge";export{o as Badge};
+import*as t from"react";import{styled as m}from"../../stitches.js";import{Box as l}from"../box/Box.js";import{Flex as a}from"../flex/Flex.js";import{Icon as d}from"../icon/Icon.js";const c=m(a,{justifyContent:"center",alignItems:"center",borderRadius:"$0",minWidth:0,border:"1px solid #FFFFFF",fontFamily:"$body","& > *:not(:last-child)":{mr:"$1"},variants:{theme:{success:{bg:"$successLight",color:"$successMid"},warning:{bg:"$warningLight",color:"$warningText"},danger:{bg:"$dangerLight",color:"$dangerMid"},neutral:{bg:"$tonal50",color:"$tonal400"},info:{bg:"$primaryLight",color:"$primaryMid"}},size:{xs:{fontSize:"$sm",px:"$1",height:"$2"},sm:{fontSize:"$md",px:"$1",height:"$3"},md:{fontSize:"$md",px:"$2",height:"$4"}}}}),i=({theme:r="info",size:o="sm",children:n,...s})=>t.createElement(c,{role:"status",theme:r,size:o,...s},t.Children.map(n,e=>{if(typeof e=="string")return t.createElement(l,{css:{whiteSpace:"nowrap",overflowX:"hidden",textOverflow:"ellipsis",py:"$0"}},e);if(t.isValidElement(e)&&e.type===d)return t.cloneElement(e,{size:"sm",css:{...e.props.css,flexShrink:0}})}));i.displayName="Badge";export{i as Badge};

package/dist/components/divider/Divider.js

@@ -1 +1 @@
-import t from"react";import{styled as n}from"../../stitches.js";const i=n("hr",{border:0,bg:"$tonal200",variants:{orientation:{horizontal:{height:1,width:"100%"},vertical:{height:"100%",width:1,minHeight:"$3"}}}}),a=t.forwardRef(({orientation:r="horizontal",...e},o)=>t.createElement(i,{ref:o,orientation:r,...e}));export{a as Divider,i as StyledDivider};
+import t from"react";import{styled as n}from"../../stitches.js";const i=n("hr",{border:0,bg:"$tonal100",variants:{orientation:{horizontal:{height:1,width:"100%"},vertical:{height:"100%",width:1,minHeight:"$3"}}}}),a=t.forwardRef(({orientation:r="horizontal",...e},o)=>t.createElement(i,{ref:o,orientation:r,...e}));export{a as Divider,i as StyledDivider};

package/dist/components/index.d.ts

@@ -44,6 +44,7 @@ export { PasswordField } from './password-field';
 export { PasswordInput } from './password-input';
 export { Popover } from './popover';
 export { ProgressBar } from './progress-bar';
+export { Sidedrawer } from './sidedrawer';
 export { Stepper } from './stepper';
 export { RadioButton, RadioButtonGroup } from './radio-button';
 export { RadioButtonField } from './radio-button-field';

package/dist/components/sidedrawer/Sidedrawer.d.ts

@@ -0,0 +1,24 @@
+import * as Dialog from '@radix-ui/react-dialog';
+import React from 'react';
+import { SidedrawerAccordionContent, SidedrawerAccordionItem, SidedrawerAccordionTrigger } from './SidedrawerAccordion';
+import { SidedrawerBody } from './SidedrawerBody';
+import { SidedrawerClose } from './SidedrawerClose';
+import { SidedrawerContent } from './SidedrawerContent';
+import { SidedrawerFooter } from './SidedrawerFooter';
+import { SidedrawerHeader } from './SidedrawerHeader';
+import { SidedrawerItem } from './SidedrawerItem';
+import { SidedrawerTrigger } from './SidedrawerTrigger';
+declare type SidedrawerSubComponents = {
+    Accordion: typeof SidedrawerAccordionItem;
+    AccordionContent: typeof SidedrawerAccordionContent;
+    AccordionTrigger: typeof SidedrawerAccordionTrigger;
+    Body: typeof SidedrawerBody;
+    Close: typeof SidedrawerClose;
+    Content: typeof SidedrawerContent;
+    Footer: typeof SidedrawerFooter;
+    Header: typeof SidedrawerHeader;
+    Item: typeof SidedrawerItem;
+    Trigger: typeof SidedrawerTrigger;
+};
+export declare const Sidedrawer: React.FC<React.ComponentProps<typeof Dialog.Root>> & SidedrawerSubComponents;
+export {};

package/dist/components/sidedrawer/Sidedrawer.js

@@ -0,0 +1 @@
+import*as i from"@radix-ui/react-dialog";import d from"react";import"./SidedrawerAccordion/SidedrawerAccordionRoot.js";import{SidedrawerAccordionContent as t}from"./SidedrawerAccordion/SidedrawerAccordionContent.js";import{SidedrawerAccordionItem as m}from"./SidedrawerAccordion/SidedrawerAccordionItem.js";import{SidedrawerAccordionTrigger as n}from"./SidedrawerAccordion/SidedrawerAccordionTrigger.js";import{SidedrawerBody as a}from"./SidedrawerBody.js";import{SidedrawerClose as c}from"./SidedrawerClose.js";import{SidedrawerContent as p}from"./SidedrawerContent.js";import{SidedrawerFooter as f}from"./SidedrawerFooter.js";import{SidedrawerHeader as w}from"./SidedrawerHeader.js";import{SidedrawerItem as S}from"./SidedrawerItem.js";import{SidedrawerTrigger as g}from"./SidedrawerTrigger.js";const r=({children:o,...e})=>d.createElement(i.Root,{...e},o);r.Accordion=m,r.AccordionContent=t,r.AccordionTrigger=n,r.Body=a,r.Close=c,r.Content=p,r.Footer=f,r.Header=w,r.Item=S,r.Trigger=g;export{r as Sidedrawer};

package/dist/components/sidedrawer/Sidedrawer.styles.d.ts

@@ -0,0 +1,44 @@
+export declare const sidedrawerItemStyles: {
+    alignItems: string;
+    bg: string;
+    border: string;
+    borderLeft: string;
+    color: string;
+    cursor: string;
+    display: string;
+    fontFamily: string;
+    fontWeight: string;
+    fontSize: string;
+    margin: number;
+    minHeight: string;
+    outline: string;
+    outlineOffset: string;
+    py: string;
+    px: string;
+    width: string;
+    textDecoration: string;
+    '&:hover': {
+        bg: string;
+    };
+    '&:active': {
+        bg: string;
+    };
+    '&:focus-visible': {
+        boxShadow: string;
+    };
+    '&[disabled]': {
+        opacity: string;
+        pointerEvents: string;
+        cursor: string;
+    };
+    variants: {
+        active: {
+            true: {
+                bg: string;
+                borderLeft: string;
+                color: string;
+                fontWeight: string;
+            };
+        };
+    };
+};

package/dist/components/sidedrawer/Sidedrawer.styles.js

@@ -0,0 +1 @@
+const t={alignItems:"center",bg:"white",border:"unset",borderLeft:"4px solid transparent",color:"$tonal600",cursor:"pointer",display:"flex",fontFamily:"$body",fontWeight:"400",fontSize:"$md",margin:0,minHeight:"48px",outline:"unset",outlineOffset:"unset",py:"$3",px:"$4",width:"100%",textDecoration:"none","&:hover":{bg:"$tonal50"},"&:active":{bg:"$tonal100"},"&:focus-visible":{boxShadow:"inset 0 0 0 2px $colors$primary"},"&[disabled]":{opacity:"0.3",pointerEvents:"none",cursor:"default"},variants:{active:{true:{bg:"$primaryLight",borderLeft:"4px solid $primary",color:"$primary",fontWeight:"600"}}}};export{t as sidedrawerItemStyles};

package/dist/components/sidedrawer/SidedrawerAccordion/SidedrawerAccordionContent.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const SidedrawerAccordionContent: React.FC;

package/dist/components/sidedrawer/SidedrawerAccordion/SidedrawerAccordionContent.js

@@ -0,0 +1 @@
+import t from"react";import{Content as n}from"@radix-ui/react-accordion";import{Box as r}from"../../box/Box.js";import{keyframes as o,styled as i}from"../../../stitches.js";const m=o({from:{height:0},to:{height:"var(--radix-accordion-content-height)"}}),d=o({from:{height:"var(--radix-accordion-content-height)"},to:{height:0}}),h=i(n,{bg:"white",overflow:"hidden","@allowMotion":{'&[data-state="open"]':{animation:`${m} 300ms ease-out`},'&[data-state="closed"]':{animation:`${d} 300ms ease-out`}}}),c=({children:e})=>t.createElement(h,null,t.Children.map(e,a=>t.createElement(r,{css:{"> a":{px:"$6"},"> button":{px:"$6"}}},a)));export{c as SidedrawerAccordionContent};

package/dist/components/sidedrawer/SidedrawerAccordion/SidedrawerAccordionItem.d.ts

@@ -0,0 +1,267 @@
+/// <reference types="react" />
+export declare const SidedrawerAccordionItem: import("@stitches/react/types/styled-component").StyledComponent<import("react").ForwardRefExoticComponent<import("@radix-ui/react-accordion").AccordionItemProps & import("react").RefAttributes<HTMLDivElement>>, {}, {
+    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";
+        };
+    };
+}>>;

package/dist/components/sidedrawer/SidedrawerAccordion/SidedrawerAccordionItem.js

@@ -0,0 +1 @@
+import{Item as o}from"@radix-ui/react-accordion";import{styled as r}from"../../../stitches.js";const t=r(o,{});export{t as SidedrawerAccordionItem};