@atom-learning/components 3.3.0 → 3.3.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +3 -17
- package/dist/components/side-bar/SideBar.js +1 -1
- package/dist/components/side-bar/SideBar.js.map +1 -1
- package/dist/components/side-bar/SideBarComponents.js +1 -1
- package/dist/components/side-bar/SideBarComponents.js.map +1 -1
- package/dist/index.cjs.js +1 -1
- package/dist/index.cjs.js.map +1 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,24 +1,10 @@
|
|
|
1
|
-
|
|
1
|
+
## [3.3.1](https://github.com/Atom-Learning/components/compare/v3.3.0...v3.3.1) (2023-11-17)
|
|
2
2
|
|
|
3
3
|
|
|
4
4
|
### Bug Fixes
|
|
5
5
|
|
|
6
|
-
* add
|
|
7
|
-
*
|
|
8
|
-
* improve tests and context type ([fa17ff7](https://github.com/Atom-Learning/components/commit/fa17ff72e771f1d12e2cc4f2d6130298d02be831))
|
|
9
|
-
* linting autofix ([728f3bd](https://github.com/Atom-Learning/components/commit/728f3bd335af4681061feadfac95a588ec83bb9b))
|
|
10
|
-
* PR comments ([6735473](https://github.com/Atom-Learning/components/commit/6735473c657a9b8ef0851003e1824c8279785936))
|
|
11
|
-
* PR feedback ([71b7998](https://github.com/Atom-Learning/components/commit/71b799832b5d7214f124e96f2c4a333a7013d5bb))
|
|
12
|
-
* remove onPress usage and default to onTouchEnd, fix offset default ([d711e7d](https://github.com/Atom-Learning/components/commit/d711e7dd76c7e339d911e2c24eaf7ceb07542d21))
|
|
13
|
-
* rename Main to Body, update snapshots ([49e832e](https://github.com/Atom-Learning/components/commit/49e832e7f79d9842548bd2d638368d7c0815f7b0))
|
|
14
|
-
* revert sidebar state change ([584a311](https://github.com/Atom-Learning/components/commit/584a31105044b76bf2d25a972350b88aaba751c0))
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
### Features
|
|
18
|
-
|
|
19
|
-
* add animation for navigation text within sidebar, fix issue with wrapping text ([78881b5](https://github.com/Atom-Learning/components/commit/78881b5d5cdcd436e699af64e2df4dfcbf43e191))
|
|
20
|
-
* add side-bar components ([adaa719](https://github.com/Atom-Learning/components/commit/adaa719e77d2b7b2cc00b2761ceccb45dbc102a5))
|
|
21
|
-
* initial work on SideBar component ([ef498e3](https://github.com/Atom-Learning/components/commit/ef498e387c99950ac268e3886930505ac75124bd))
|
|
6
|
+
* add missing docs, fix documentation build, ensure brand components are usable ([ca20306](https://github.com/Atom-Learning/components/commit/ca20306b9d54a60f4c6b60dd123e1bbae2d21fca))
|
|
7
|
+
* snapshots ([1e15115](https://github.com/Atom-Learning/components/commit/1e1511577fe804010d4b9321642b0c053edcfc59))
|
|
22
8
|
|
|
23
9
|
# [1.4.0](https://github.com/Atom-Learning/components/compare/v1.3.0...v1.4.0) (2022-04-11)
|
|
24
10
|
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import t from"react";import{useInteractOutside as f,useFocusWithin as v,useHover as y}from"react-aria";import{createTheme as B,styled as r}from"../../stitches.js";import{SideBarBrand as g,SideBarBrandLogo as S,SideBarBrandName as w,SideBarHeader as E,SideBarBody as H,SideBarFooter as N}from"./SideBarComponents.js";import{SideBarContext as $}from"./SideBarContext.js";const n="5.5rem",D="16rem",F=B({colors:{background:"white",text:"$
|
|
1
|
+
import t from"react";import{useInteractOutside as f,useFocusWithin as v,useHover as y}from"react-aria";import{createTheme as B,styled as r}from"../../stitches.js";import{SideBarBrand as g,SideBarBrandLogo as S,SideBarBrandName as w,SideBarHeader as E,SideBarBody as H,SideBarFooter as N}from"./SideBarComponents.js";import{SideBarContext as $}from"./SideBarContext.js";const n="5.5rem",D="16rem",F=B({colors:{background:"white",text:"$grey800",border:"$grey200"}}),I=r("div",{position:"sticky",zIndex:1,variants:{type:{static:{},expandable:{width:n}}}}),W=r("div",{bg:"$background",borderRight:"1px solid $border",boxShadow:"4px 0 4px -2px rgba(31, 31, 31, 0)",display:"flex",flexDirection:"column",height:"100%",overflow:"hidden",willChange:"width","@allowMotion":{transition:"width 125ms ease-out, box-shadow 125ms ease-out"},variants:{type:{static:{},expandable:{}},isExpanded:{true:{width:D},false:{width:n}}},compoundVariants:[{isExpanded:!0,type:"expandable",css:{boxShadow:"4px 0 4px -2px rgba(31, 31, 31, 0.1)"}}]}),k=r("div",{bottom:0,left:0,position:"absolute",right:0,top:0,transition:"all",variants:{isVisible:{true:{visibility:"visible",transitionDelay:"0s"},false:{visibility:"hidden",transitionDelay:"50ms"}}}}),e=({className:l=F,children:p,type:a="expandable",offset:s="0px",css:c,...h})=>{const[o,i]=t.useState(a==="static"),d=t.useRef(null);f({ref:d,onInteractOutside:()=>i(!1)});const{focusWithinProps:m}=v({onFocusWithin:()=>i(!0),onBlurWithin:()=>i(!1)}),{hoverProps:x,isHovered:u}=y({onHoverStart:()=>i(!0),onHoverEnd:()=>i(!1)}),b=a==="expandable"?{...m,...x,onTouchEnd:()=>i(!0),ref:d}:{};return t.createElement($.Provider,{value:{isExpanded:o}},t.createElement(I,{...h,className:l,css:{height:`calc(100svh - ${s})`,top:s,...c},type:a},t.createElement(W,{...b,isExpanded:o,type:a},p,a==="expandable"&&t.createElement(k,{isVisible:!u&&!o}))))};e.Brand=g,e.BrandLogo=S,e.BrandName=w,e.Header=E,e.Body=H,e.Footer=N,e.displayName="SideBar";export{e as SideBar};
|
|
2
2
|
//# sourceMappingURL=SideBar.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SideBar.js","sources":["../../../src/components/side-bar/SideBar.tsx"],"sourcesContent":["import React from 'react'\nimport { useFocusWithin, useHover, useInteractOutside } from 'react-aria'\n\nimport { createTheme, styled } from '~/stitches'\n\nimport {\n SideBarBody,\n SideBarBrand,\n SideBarBrandLogo,\n SideBarBrandName,\n SideBarFooter,\n SideBarHeader\n} from './SideBarComponents'\nimport { SideBarContext } from './SideBarContext'\n\nconst SIZE_COLLAPSED = '5.5rem'\nconst SIZE_EXPANDED = '16rem'\n\nconst light = createTheme({\n colors: {\n background: 'white',\n text: '$
|
|
1
|
+
{"version":3,"file":"SideBar.js","sources":["../../../src/components/side-bar/SideBar.tsx"],"sourcesContent":["import React from 'react'\nimport { useFocusWithin, useHover, useInteractOutside } from 'react-aria'\n\nimport { createTheme, styled } from '~/stitches'\n\nimport {\n SideBarBody,\n SideBarBrand,\n SideBarBrandLogo,\n SideBarBrandName,\n SideBarFooter,\n SideBarHeader\n} from './SideBarComponents'\nimport { SideBarContext } from './SideBarContext'\n\nconst SIZE_COLLAPSED = '5.5rem'\nconst SIZE_EXPANDED = '16rem'\n\nconst light = createTheme({\n colors: {\n background: 'white',\n text: '$grey800',\n border: '$grey200'\n }\n})\n\nconst Root = styled('div', {\n position: 'sticky',\n zIndex: 1,\n variants: {\n type: {\n static: {},\n expandable: { width: SIZE_COLLAPSED }\n }\n }\n})\n\nconst Content = styled('div', {\n bg: '$background',\n borderRight: '1px solid $border',\n boxShadow: '4px 0 4px -2px rgba(31, 31, 31, 0)',\n display: 'flex',\n flexDirection: 'column',\n height: '100%',\n overflow: 'hidden',\n willChange: 'width',\n '@allowMotion': {\n transition: 'width 125ms ease-out, box-shadow 125ms ease-out'\n },\n variants: {\n type: {\n static: {},\n expandable: {}\n },\n isExpanded: {\n true: { width: SIZE_EXPANDED },\n false: { width: SIZE_COLLAPSED }\n }\n },\n compoundVariants: [\n {\n isExpanded: true,\n type: 'expandable',\n css: { boxShadow: '4px 0 4px -2px rgba(31, 31, 31, 0.1)' }\n }\n ]\n})\n\nconst PointerBlocker = styled('div', {\n bottom: 0,\n left: 0,\n position: 'absolute',\n right: 0,\n top: 0,\n transition: 'all',\n variants: {\n isVisible: {\n true: { visibility: 'visible', transitionDelay: '0s' },\n false: { visibility: 'hidden', transitionDelay: '50ms' }\n }\n }\n})\n\ntype SideBarProps = React.ComponentProps<typeof Root> & {\n offset?: number | string\n}\n\nexport const SideBar = ({\n className = light,\n children,\n type = 'expandable',\n offset = '0px',\n css,\n ...rest\n}: SideBarProps) => {\n const [isExpanded, setIsExpanded] = React.useState(type === 'static')\n const ref = React.useRef<HTMLDivElement>(null)\n\n useInteractOutside({\n ref,\n onInteractOutside: () => setIsExpanded(false)\n })\n const { focusWithinProps } = useFocusWithin({\n onFocusWithin: () => setIsExpanded(true),\n onBlurWithin: () => setIsExpanded(false)\n })\n const { hoverProps, isHovered } = useHover({\n onHoverStart: () => setIsExpanded(true),\n onHoverEnd: () => setIsExpanded(false)\n })\n const touchProps = {\n onTouchEnd: () => setIsExpanded(true)\n }\n\n const expandableProps =\n type === 'expandable'\n ? {\n ...focusWithinProps,\n ...hoverProps,\n ...touchProps,\n ref\n }\n : {}\n\n return (\n <SideBarContext.Provider value={{ isExpanded }}>\n <Root\n {...rest}\n className={className}\n css={{ height: `calc(100svh - ${offset})`, top: offset, ...css }}\n type={type}\n >\n <Content {...expandableProps} isExpanded={isExpanded} type={type}>\n {children}\n {/**\n * When the SideBar is collapsed, ensure that the initial tap event\n * is used to expand the nav first before making the items available\n */}\n {type === 'expandable' && (\n <PointerBlocker isVisible={!isHovered && !isExpanded} />\n )}\n </Content>\n </Root>\n </SideBarContext.Provider>\n )\n}\n\nSideBar.Brand = SideBarBrand\nSideBar.BrandLogo = SideBarBrandLogo\nSideBar.BrandName = SideBarBrandName\nSideBar.Header = SideBarHeader\nSideBar.Body = SideBarBody\nSideBar.Footer = SideBarFooter\n\nSideBar.displayName = 'SideBar'\n"],"names":["SIZE_COLLAPSED","SIZE_EXPANDED","light","createTheme","Root","styled","Content","PointerBlocker","SideBar","className","children","type","offset","css","rest","isExpanded","setIsExpanded","React","ref","useInteractOutside","focusWithinProps","useFocusWithin","hoverProps","isHovered","useHover","expandableProps","SideBarContext","SideBarBrand","SideBarBrandLogo","SideBarBrandName","SideBarHeader","SideBarBody","SideBarFooter"],"mappings":"iXAeA,MAAMA,EAAiB,SACjBC,EAAgB,QAEhBC,EAAQC,EAAY,CACxB,OAAQ,CACN,WAAY,QACZ,KAAM,WACN,OAAQ,UACV,CACF,CAAC,EAEKC,EAAOC,EAAO,MAAO,CACzB,SAAU,SACV,OAAQ,EACR,SAAU,CACR,KAAM,CACJ,OAAQ,CACR,EAAA,WAAY,CAAE,MAAOL,CAAe,CACtC,CACF,CACF,CAAC,EAEKM,EAAUD,EAAO,MAAO,CAC5B,GAAI,cACJ,YAAa,oBACb,UAAW,qCACX,QAAS,OACT,cAAe,SACf,OAAQ,OACR,SAAU,SACV,WAAY,QACZ,eAAgB,CACd,WAAY,iDACd,EACA,SAAU,CACR,KAAM,CACJ,OAAQ,CAAA,EACR,WAAY,CACd,CAAA,EACA,WAAY,CACV,KAAM,CAAE,MAAOJ,CAAc,EAC7B,MAAO,CAAE,MAAOD,CAAe,CACjC,CACF,EACA,iBAAkB,CAChB,CACE,WAAY,GACZ,KAAM,aACN,IAAK,CAAE,UAAW,sCAAuC,CAC3D,CACF,CACF,CAAC,EAEKO,EAAiBF,EAAO,MAAO,CACnC,OAAQ,EACR,KAAM,EACN,SAAU,WACV,MAAO,EACP,IAAK,EACL,WAAY,MACZ,SAAU,CACR,UAAW,CACT,KAAM,CAAE,WAAY,UAAW,gBAAiB,IAAK,EACrD,MAAO,CAAE,WAAY,SAAU,gBAAiB,MAAO,CACzD,CACF,CACF,CAAC,EAMYG,EAAU,CAAC,CACtB,UAAAC,EAAYP,EACZ,SAAAQ,EACA,KAAAC,EAAO,aACP,OAAAC,EAAS,MACT,IAAAC,KACGC,CACL,IAAoB,CAClB,KAAM,CAACC,EAAYC,CAAa,EAAIC,EAAM,SAASN,IAAS,QAAQ,EAC9DO,EAAMD,EAAM,OAAuB,IAAI,EAE7CE,EAAmB,CACjB,IAAAD,EACA,kBAAmB,IAAMF,EAAc,EAAK,CAC9C,CAAC,EACD,KAAM,CAAE,iBAAAI,CAAiB,EAAIC,EAAe,CAC1C,cAAe,IAAML,EAAc,EAAI,EACvC,aAAc,IAAMA,EAAc,EAAK,CACzC,CAAC,EACK,CAAE,WAAAM,EAAY,UAAAC,CAAU,EAAIC,EAAS,CACzC,aAAc,IAAMR,EAAc,EAAI,EACtC,WAAY,IAAMA,EAAc,EAAK,CACvC,CAAC,EAKKS,EACJd,IAAS,aACL,CACE,GAAGS,EACH,GAAGE,EAPT,WAAY,IAAMN,EAAc,EAAI,EAS9B,IAAAE,CACF,EACA,CAEN,EAAA,OACED,EAAA,cAACS,EAAe,SAAf,CAAwB,MAAO,CAAE,WAAAX,CAAW,CAC3CE,EAAAA,EAAA,cAACb,EAAA,CACE,GAAGU,EACJ,UAAWL,EACX,IAAK,CAAE,OAAQ,iBAAiBG,KAAW,IAAKA,EAAQ,GAAGC,CAAI,EAC/D,KAAMF,GAENM,EAAA,cAACX,EAAA,CAAS,GAAGmB,EAAiB,WAAYV,EAAY,KAAMJ,CAAAA,EACzDD,EAKAC,IAAS,cACRM,EAAA,cAACV,EAAA,CAAe,UAAW,CAACgB,GAAa,CAACR,CAAAA,CAAY,CAE1D,CACF,CACF,CAEJ,EAEAP,EAAQ,MAAQmB,EAChBnB,EAAQ,UAAYoB,EACpBpB,EAAQ,UAAYqB,EACpBrB,EAAQ,OAASsB,EACjBtB,EAAQ,KAAOuB,EACfvB,EAAQ,OAASwB,EAEjBxB,EAAQ,YAAc"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{styled as o}from"../../stitches.js";import{Image as e}from"../image/Image.js";import{Text as r}from"../text/Text.js";const d=o("div",{borderBottom:"1px solid $border",p:"$4",width:"100%"}),t=o("div",{flexGrow:1,overflowY:"auto",overflowX:"hidden",p:"$4",width:"100%"}),i=o("div",{borderTop:"1px solid $border",p:"$4",width:"100%"}),a=o("a",{alignItems:"
|
|
1
|
+
import{styled as o}from"../../stitches.js";import{Image as e}from"../image/Image.js";import{Text as r}from"../text/Text.js";const d=o("div",{borderBottom:"1px solid $border",p:"$4",width:"100%"}),t=o("div",{flexGrow:1,overflowY:"auto",overflowX:"hidden",p:"$4",width:"100%"}),i=o("div",{borderTop:"1px solid $border",p:"$4",width:"100%"}),a=o("a",{alignItems:"flex-end",color:"$text",display:"flex",gap:"$4",textDecoration:"none","&:hover, &:focus":{textDecoration:"none"}}),n=e,p=o(r,{color:"$text",whiteSpace:"nowrap"});export{t as SideBarBody,a as SideBarBrand,n as SideBarBrandLogo,p as SideBarBrandName,i as SideBarFooter,d as SideBarHeader};
|
|
2
2
|
//# sourceMappingURL=SideBarComponents.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SideBarComponents.js","sources":["../../../src/components/side-bar/SideBarComponents.tsx"],"sourcesContent":["import { styled } from '~/stitches'\n\nimport { Image } from '../image'\nimport { Text } from '../text'\n\nexport const SideBarHeader = styled('div', {\n borderBottom: '1px solid $border',\n p: '$4',\n width: '100%'\n})\n\nexport const SideBarBody = styled('div', {\n flexGrow: 1,\n overflowY: 'auto',\n overflowX: 'hidden',\n p: '$4',\n width: '100%'\n})\n\nexport const SideBarFooter = styled('div', {\n borderTop: '1px solid $border',\n p: '$4',\n width: '100%'\n})\n\nexport const SideBarBrand = styled('a', {\n alignItems: '
|
|
1
|
+
{"version":3,"file":"SideBarComponents.js","sources":["../../../src/components/side-bar/SideBarComponents.tsx"],"sourcesContent":["import { styled } from '~/stitches'\n\nimport { Image } from '../image'\nimport { Text } from '../text'\n\nexport const SideBarHeader = styled('div', {\n borderBottom: '1px solid $border',\n p: '$4',\n width: '100%'\n})\n\nexport const SideBarBody = styled('div', {\n flexGrow: 1,\n overflowY: 'auto',\n overflowX: 'hidden',\n p: '$4',\n width: '100%'\n})\n\nexport const SideBarFooter = styled('div', {\n borderTop: '1px solid $border',\n p: '$4',\n width: '100%'\n})\n\nexport const SideBarBrand = styled('a', {\n alignItems: 'flex-end',\n color: '$text',\n display: 'flex',\n gap: '$4',\n textDecoration: 'none',\n '&:hover, &:focus': {\n textDecoration: 'none'\n }\n})\n\nexport const SideBarBrandLogo = Image\n\nexport const SideBarBrandName = styled(Text, {\n color: '$text',\n whiteSpace: 'nowrap'\n})\n"],"names":["SideBarHeader","styled","SideBarBody","SideBarFooter","SideBarBrand","SideBarBrandLogo","Image","SideBarBrandName","Text"],"mappings":"4HAKa,MAAAA,EAAgBC,EAAO,MAAO,CACzC,aAAc,oBACd,EAAG,KACH,MAAO,MACT,CAAC,EAEYC,EAAcD,EAAO,MAAO,CACvC,SAAU,EACV,UAAW,OACX,UAAW,SACX,EAAG,KACH,MAAO,MACT,CAAC,EAEYE,EAAgBF,EAAO,MAAO,CACzC,UAAW,oBACX,EAAG,KACH,MAAO,MACT,CAAC,EAEYG,EAAeH,EAAO,IAAK,CACtC,WAAY,WACZ,MAAO,QACP,QAAS,OACT,IAAK,KACL,eAAgB,OAChB,mBAAoB,CAClB,eAAgB,MAClB,CACF,CAAC,EAEYI,EAAmBC,EAEnBC,EAAmBN,EAAOO,EAAM,CAC3C,MAAO,QACP,WAAY,QACd,CAAC"}
|