@atom-learning/components 2.32.2 → 2.33.0

package/CHANGELOG.md

@@ -1,9 +1,62 @@
-## [2.32.2](https://github.com/Atom-Learning/components/compare/v2.32.1...v2.32.2) (2023-02-16)
+# [2.33.0](https://github.com/Atom-Learning/components/compare/v2.32.2...v2.33.0) (2023-02-17)
 
 
 ### Bug Fixes
 
-* allow non-native fields used in react-hook-form to be controlled externally via props ([c940bcb](https://github.com/Atom-Learning/components/commit/c940bcbbbb0e9a9573943129ae25dc84786f0486))
+* add build:color-scheme script ([4dda294](https://github.com/Atom-Learning/components/commit/4dda2940772cde65cc73890fdf2d63debf8df9d3))
+* another pass over the documentation to fix bugs which weren't flagging in build ([b6089a1](https://github.com/Atom-Learning/components/commit/b6089a1d82391304065ee0015f66a482d9ef78b2))
+* build local deps before test ([4820a9a](https://github.com/Atom-Learning/components/commit/4820a9a4140e693dacfe9aea44aad8096c11e9b4))
+* change hasAlpha to use hasOwnProperty instead and keep typescript happy ([3c4a504](https://github.com/Atom-Learning/components/commit/3c4a504e0097791518c2fabe11b0214e9a901d67))
+* Chip ci validate ([bc135f8](https://github.com/Atom-Learning/components/commit/bc135f86a2457966ec83031d3991ddacdfeaa1fa))
+* ComponentProps keep changes to component from origin/main ([6fba7b6](https://github.com/Atom-Learning/components/commit/6fba7b67bff8acf49566ef19a97ce18cbe2d40ef))
+* config tweaks to get images to work and fix to required external radio ([323f645](https://github.com/Atom-Learning/components/commit/323f645edb1e7e8cca28ad2bb874e28e3de0d1f0))
+* docs Navigation arrow to take no space ([f3543d9](https://github.com/Atom-Learning/components/commit/f3543d98c3a37aca941a568b53d61285587a1e73))
+* documentation path in config ([5d44f7f](https://github.com/Atom-Learning/components/commit/5d44f7f32257fd9f68a2aa99222c95239656088c))
+* formatting changes for netlify to pick up blocks and borked datatable example ([8c5d993](https://github.com/Atom-Learning/components/commit/8c5d993c7c1f01c5bbd1b9ba50c692a1488778eb))
+* get documentation building ([324d715](https://github.com/Atom-Learning/components/commit/324d7159aac33a25c3e68c4719297caa774b95bb))
+* Header trigger color ([8257872](https://github.com/Atom-Learning/components/commit/8257872f6de93521f05c15367d0a7412eb5771c2))
+* IconTokenItem proptype ([ef780f3](https://github.com/Atom-Learning/components/commit/ef780f35115b2f5264053024c1da0ef8ec9e6940))
+* lib not to explode when higher react 18 or over (lib dependencies do not support 18: useForm) ([25ba883](https://github.com/Atom-Learning/components/commit/25ba883660380604511e6e43df5c76b7ec91599b))
+* lib to add local-deps build before dev or build runs ([069febd](https://github.com/Atom-Learning/components/commit/069febd5c093cdc2819697068e9ff43f48463691))
+* make Pagination generation more robust ([873ac19](https://github.com/Atom-Learning/components/commit/873ac19ada603f2b38716cebd82dc38042bad452))
+* minimum required content added ([587c315](https://github.com/Atom-Learning/components/commit/587c31585642de7a3bf0dbdb09433b6bc561c7d6))
+* navigation not working even though url is changing ([dfd99b9](https://github.com/Atom-Learning/components/commit/dfd99b91453f218fed5a8374ebca5848c532c29c))
+* nothing to lint in documentation ([56e33f9](https://github.com/Atom-Learning/components/commit/56e33f9def13053954f38e7049f6fc2827c97328))
+* overwriting boolean value bug in CodeBlock ([3839688](https://github.com/Atom-Learning/components/commit/3839688cd1daf0063b02098861479cd8d8479f17))
+* padding override TokenListRoot ul Stack ([5efb66b](https://github.com/Atom-Learning/components/commit/5efb66b9bade60d445e653a4dfa0a5fb333cf003))
+* pre markdown setup ([7b97fdc](https://github.com/Atom-Learning/components/commit/7b97fdcc5ec3f498ae540c6f1520cf9b38dfd5ce))
+* remove .env from git ([4497617](https://github.com/Atom-Learning/components/commit/44976171b490de6db2806e7ea202a1441592150b))
+* roll node-fetch back to 2 to avoid weird netlify-cms error ([352d242](https://github.com/Atom-Learning/components/commit/352d242b05881e1ff2b71aff67aa08e417c654cc))
+* run server npm command from root when `local_backend` ([429687d](https://github.com/Atom-Learning/components/commit/429687d506805eca15b88684379140296fdd4202))
+* spacing in content ([19b3c49](https://github.com/Atom-Learning/components/commit/19b3c49f4be62cfb835c6731f2a0c806df21d0de))
+* stop generate-component-props from breaking if dist folder was completely deleted ([be0d24e](https://github.com/Atom-Learning/components/commit/be0d24ed7a250b16fea57be312e9db4d675685a6))
+* suspect snapshot updates ([f11a807](https://github.com/Atom-Learning/components/commit/f11a8076143a69af915226f81bab6af2177bfc63))
+* TokenListRoot readd ItemComponent typing ([5a0941b](https://github.com/Atom-Learning/components/commit/5a0941b0aac94ec5e289835743b25231883e8f1d))
+* typescript errors ([19fd30d](https://github.com/Atom-Learning/components/commit/19fd30ded8273c99d0f0f94c4f660138e42c2137))
+* update README ([5b8fe99](https://github.com/Atom-Learning/components/commit/5b8fe99843d90bfb4ecb71347f2786d4bf627034))
+
+
+### Features
+
+* /documentation ([0fa3b25](https://github.com/Atom-Learning/components/commit/0fa3b2588cd783a2d734c23c709eb3ed28e9e872))
+* add experimental flag to ColorScheme component ([8305d7d](https://github.com/Atom-Learning/components/commit/8305d7d471a307cc7c87df5eb8085708307ee9d7))
+* add some additional tidbits into the README.md ([8b051a7](https://github.com/Atom-Learning/components/commit/8b051a70d70a226692d22492773c70c324b93d7f))
+* bye documentation related lib stuff ([bfd30c2](https://github.com/Atom-Learning/components/commit/bfd30c28ba2f4274f39851b7849221132b3d6a76))
+* ColorScheme alpha version ([23ef23d](https://github.com/Atom-Learning/components/commit/23ef23d701adca5dd9ed1c722931969b424167da))
+* delete documentation in lib ([7cfbe2d](https://github.com/Atom-Learning/components/commit/7cfbe2df50a96c13f58a67c6c6e20359be0212ab))
+* deps and package.json tweaks ([0110d13](https://github.com/Atom-Learning/components/commit/0110d139fa5f266f3b543eaa77649d364c2ee693))
+* documentation ([ff654e0](https://github.com/Atom-Learning/components/commit/ff654e07f41adb82793295aea95c96581e58e65f))
+* expand ComponentProps ([2268116](https://github.com/Atom-Learning/components/commit/22681165f22aa4fb143e2f511ad07b1abfcc05aa))
+* meta and favicon ([686ec5d](https://github.com/Atom-Learning/components/commit/686ec5db8f453d9a744b79c2c963fca2ebd3c4d9))
+* more ColorScheme tweak ([88849ed](https://github.com/Atom-Learning/components/commit/88849edd4e0dee74c1d41f2a44f5f4e47e79c4f9))
+* more correct config.yml ([653f333](https://github.com/Atom-Learning/components/commit/653f333b3e20193c30bf0349daa33ab0b6a17e00))
+* nest StackContent in Layout TabsContent ([02c0a0d](https://github.com/Atom-Learning/components/commit/02c0a0d70162bdd8c354788db29ddab58897f958))
+* partial OAuth setup ([d02a25c](https://github.com/Atom-Learning/components/commit/d02a25cf9fc206b9c340ec7ae5734e3fff9226cf))
+* README ([1e810e2](https://github.com/Atom-Learning/components/commit/1e810e249026428d461a30dc15bfeaa5fa6b33e8))
+* rename tonal vars to base to match property of ColorScheme component ([47c9c7a](https://github.com/Atom-Learning/components/commit/47c9c7a5d86a8c258842fcb602e3a2218f54776b))
+* replace custom id function with @lukeed/uuid ([383ee4c](https://github.com/Atom-Learning/components/commit/383ee4c09661b81968f9f662adc6e8f63951255e))
+* replace tonal to base from ColorScheme ([e8d553e](https://github.com/Atom-Learning/components/commit/e8d553e02b3849857fa63004a2c57be307427965))
+* update config with current design system site url and branch ([9688113](https://github.com/Atom-Learning/components/commit/968811362dd5caeab38d7cdb33817b4e1d6a42b8))
 
 # [1.4.0](https://github.com/Atom-Learning/components/compare/v1.3.0...v1.4.0) (2022-04-11)
 

package/README.md

@@ -1,15 +1,23 @@
-# Atom Learning Components
+# Component Library
 
 ![badge](https://img.shields.io/npm/v/@atom-learning/components)
 ![badge](https://img.shields.io/github/workflow/status/Atom-Learning/components/Test%20&%20validate)
 ![badge](https://img.shields.io/bundlephobia/minzip/@atom-learning/components)
 
-`@atom-learning/components` is a collection of generic React components built using [stitches](https://stitches.dev), it includes components that cover layout, content, data collection, media and a host of other UI concerns. It uses `@atom-learning/theme` to provide the design tokens for color, typography, spacing and layout.
+`lib/`, released as `@atom-learning/components`, is a collection of generic React components built using [stitches](https://stitches.dev) and [radix](https://www.radix-ui.com/), it includes components that cover layout, content, data collection, media and a host of other UI concerns. It uses `@atom-learning/theme` to provide the design tokens for color, typography, spacing and layout.
+
+You can read about the components included in `@atom-learning/components` at [https://design.atomlearning.technology](https://design.atomlearning.technology)
+
+## Getting started
+
+Install the publicly available `@atom-learning/components `npm package:
 
 ```
-yarn add @atom-learning/components @atom-learning/theme
+yarn add @atom-learning/components
 ```
 
+Import and use in your project:
+
 ```jsx
 import { Box, Heading, Text } from '@atom-learning/components'
 
@@ -22,5 +30,3 @@ const Component = () => {
   )
 }
 ```
-
-You can read more about the components included in `@atom-learning/components` at [https://design.atomlearning.technology](https://design.atomlearning.technology)

package/dist/components/accordion/AccordionTrigger.js

@@ -1 +1 @@
-import{ChevronDown as i}from"@atom-learning/icons";import{Trigger as s}from"@radix-ui/react-accordion";import e from"react";import{styled as t}from"../../stitches.js";import{Icon as n}from"../icon/Icon.js";import{focusVisibleStyleBlock as c}from"../../utilities/style/focus-visible-style-block.js";import{ColorScheme as d}from"../../experiments/color-scheme/ColorScheme.js";const l=t(n,{transition:"transform 300ms",'[data-state="open"] > &':{transform:"rotate(180deg)"},'[data-state="closed"] > &':{transform:"rotate(0deg)"}}),m=t(s,{border:0,py:"$3",px:"$4",width:"100%",display:"flex",justifyContent:"space-between",alignItems:"center",cursor:"pointer",bg:"$interactive2",color:"$interactiveForeground","&[data-disabled]":{opacity:.3,cursor:"not-allowed"},"&:not([data-disabled])":{"&:active, &:hover, &:focus-visible":{bg:"$interactive3"},"&:focus-visible":{...c()}},'&[data-state="open"]':{borderRadius:"$0 $0 0 0"},'&[data-state="closed"]':{borderRadius:"$0"}}),f=({children:o,colorScheme:r={},...a})=>e.createElement(d,{asChild:!0,accent:"slate",interactive:"loContrast1",...r},e.createElement(m,{...a},o,e.createElement(l,{is:i})));export{f as AccordionTrigger};
+import{ChevronDown as i}from"@atom-learning/icons";import{Trigger as s}from"@radix-ui/react-accordion";import e from"react";import{styled as t}from"../../stitches.js";import{Icon as n}from"../icon/Icon.js";import{ColorScheme as c}from"../../experiments/color-scheme/ColorScheme.js";import{focusVisibleStyleBlock as d}from"../../utilities/style/focus-visible-style-block.js";const l=t(n,{transition:"transform 300ms",'[data-state="open"] > &':{transform:"rotate(180deg)"},'[data-state="closed"] > &':{transform:"rotate(0deg)"}}),m=t(s,{border:0,py:"$3",px:"$4",width:"100%",display:"flex",justifyContent:"space-between",alignItems:"center",cursor:"pointer",bg:"$interactive2",color:"$interactiveForeground","&[data-disabled]":{opacity:.3,cursor:"not-allowed"},"&:not([data-disabled])":{"&:active, &:hover, &:focus-visible":{bg:"$interactive3"},"&:focus-visible":{...d()}},'&[data-state="open"]':{borderRadius:"$0 $0 0 0"},'&[data-state="closed"]':{borderRadius:"$0"}}),f=({children:o,colorScheme:r={},...a})=>e.createElement(c,{asChild:!0,accent:"slate",interactive:"loContrast1",...r},e.createElement(m,{...a},o,e.createElement(l,{is:i})));export{f as AccordionTrigger};

package/dist/components/chip/Chip.js

@@ -1 +1 @@
-import*as e from"react";import{Box as C}from"../box/Box.js";import{Flex as $}from"../flex/Flex.js";import{Icon as c}from"../icon/Icon.js";import{getTextVariant as a}from"../text/Text.js";import{styled as m}from"../../stitches.js";import{overrideStitchesVariantValue as g}from"../../utilities/override-stitches-variant-value/overrideStitchesVariantValue.js";const d={overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},h=m("span",{display:"inline-flex",alignItems:"center",px:"$1",flexGrow:1,...d,"& > *:not(:last-child)":{mr:"$1"}}),z={sm:"sm",md:"sm",lg:"md"},f=m(c,{flexShrink:0}),l=({...r})=>{const i=e.useContext(p),{size:t}=i,n=e.useMemo(()=>g(t,o=>z[o]),[t]);return e.createElement(f,{...r,size:n})},u=({children:r,...i})=>{const t=e.Children.toArray(r),n=t.length<=1;return e.createElement(h,{...i},t.map(o=>!n&&typeof o=="string"?e.createElement(C,{as:"span",css:d,key:o},o):e.isValidElement(o)&&o.type===c?e.createElement(l,{...o.props}):o))},x=m($,{px:"$2",border:"1px solid",borderRadius:"$0",alignItems:"center",fontFamily:"$body",maxWidth:"100%",borderColor:"$primary",color:"$primaryMid",bg:"$primaryLight","&[data-disabled]":{opacity:"0.3",pointerEvents:"none"},variants:{size:{sm:{height:"$2",...a({size:"sm"})},md:{height:"$3",...a({size:"sm"})},lg:{height:"$4",...a({size:"md"})}}}}),p=e.createContext({}),y=({size:r,children:i})=>{const t=e.useMemo(()=>({size:r}),[r]);return e.createElement(p.Provider,{value:t},i)},E=e.forwardRef(({asWorkaround:r,size:i="md",...t},n)=>e.createElement(y,{size:i},e.createElement(x,{ref:n,as:r,size:i,...t}))),s=E;s.Content=u,s.Icon=l,s.displayName="Chip";export{s as Chip,l as ChipIcon,p as ChipRootContext,y as ChipRootProvider,h as StyledChipContent,f as StyledChipIcon,x as StyledRoot};
+import*as e from"react";import{Box as C}from"../box/Box.js";import{Flex as g}from"../flex/Flex.js";import{Icon as p}from"../icon/Icon.js";import{getTextVariant as a}from"../text/Text.js";import{styled as m}from"../../stitches.js";import{overrideStitchesVariantValue as z}from"../../utilities/override-stitches-variant-value/overrideStitchesVariantValue.js";const d={overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},h=m("span",{display:"inline-flex",alignItems:"center",px:"$1",flexGrow:1,...d,"& > *:not(:last-child)":{mr:"$1"}}),u={sm:"sm",md:"sm",lg:"md"},y=m(p,{flexShrink:0}),l=({...r})=>{const i=e.useContext(c),{size:t}=i,n=e.useMemo(()=>z(t,o=>u[o]),[t]);return e.createElement(y,{...r,size:n})},E=({children:r,...i})=>{const t=e.Children.toArray(r),n=t.length<=1;return e.createElement(h,{...i},t.map((o,$)=>!n&&typeof o=="string"?e.createElement(C,{as:"span",css:d,key:o},o):e.isValidElement(o)&&o.type===p?e.createElement(l,{key:`icon-${$}`,...o.props}):o))},f=m(g,{px:"$2",border:"1px solid",borderRadius:"$0",alignItems:"center",fontFamily:"$body",maxWidth:"100%",borderColor:"$primary",color:"$primaryMid",bg:"$primaryLight","&[data-disabled]":{opacity:"0.3",pointerEvents:"none"},variants:{size:{sm:{height:"$2",...a({size:"sm"})},md:{height:"$3",...a({size:"sm"})},lg:{height:"$4",...a({size:"md"})}}}}),c=e.createContext({}),x=({size:r,children:i})=>{const t=e.useMemo(()=>({size:r}),[r]);return e.createElement(c.Provider,{value:t},i)},v=e.forwardRef(({asWorkaround:r,size:i="md",...t},n)=>e.createElement(x,{size:i},e.createElement(f,{ref:n,as:r,size:i,...t}))),s=v;s.Content=E,s.Icon=l,s.displayName="Chip";export{s as Chip,l as ChipIcon,c as ChipRootContext,x as ChipRootProvider,h as StyledChipContent,y as StyledChipIcon,f as StyledRoot};

package/dist/components/tabs/TabsTriggerList.js

@@ -1 +1 @@
-import{List as y}from"@radix-ui/react-tabs";import e from"react";import{styled as m}from"../../stitches.js";import{useWindowSize as T}from"../../utilities/hooks/useWindowSize.js";import{useCallbackRefState as x}from"../../utilities/hooks/useCallbackRef.js";import{ActionIcon as z}from"../action-icon/ActionIcon.js";import{Icon as p}from"../icon/Icon.js";import{ChevronLeft as $,ChevronRight as R}from"@atom-learning/icons";import{ColorScheme as I}from"../../experiments/color-scheme/ColorScheme.js";const N=m(I,{position:"relative",borderBottom:"1px solid $base3",width:"100%"}),_=m(y,{flexShrink:0,display:"flex",width:"100%",overflowX:"auto","&::-webkit-scrollbar":{display:"none"},scrollbarWidth:"none"}),u=m(z,{height:"100% !important",position:"absolute",top:"50%",transform:"translateY(-50%)",cursor:"pointer",background:"$background !important",color:"$interactive1 !important",borderRadius:0,opacity:.9}),A=10,b=({children:g,colorScheme:v={},...C})=>{const[t,k]=x(),{width:W}=T(),[w,i]=e.useState(!1),[E,s]=e.useState(!1),f=e.useCallback(c=>{if(!t)return;const{scrollWidth:r,scrollLeft:l,offsetWidth:a}=t,h=Math.round(r*(A/100));let n=l;if(c==="right"){const o=l+h;n=o+a<=r?o:r-a}else{const o=l-h;n=o>0?o:0}t.scroll({left:n,behavior:"smooth"}),setTimeout(()=>{const{scrollWidth:o,scrollLeft:d,offsetWidth:L}=t,S=o-(d+L);d===0?(i(!1),s(!0)):S<5?(s(!1),i(!0)):(i(!0),s(!0))},500)},[t]);return e.useEffect(()=>{var c;if(!t)return;const{offsetWidth:r,scrollWidth:l}=t,a=l>r;(c=t.scroll)==null||c.call(t,{left:0}),i(!1),s(a)},[t,W]),e.createElement(N,{base:"slate",accent:"blue",interactive:"hiContrast1",...v,...C},w&&e.createElement(u,{label:"scroll left",size:"md",css:{left:0},onClick:()=>f("left")},e.createElement(p,{is:$})),e.createElement(_,{ref:k},g),E&&e.createElement(u,{label:"scroll right",size:"md",css:{right:0},onClick:()=>f("right")},e.createElement(p,{is:R})))};b.displayName="TabsTriggerList";export{b as TabsTriggerList};
+import{List as y}from"@radix-ui/react-tabs";import e from"react";import{styled as m}from"../../stitches.js";import{ColorScheme as T}from"../../experiments/color-scheme/ColorScheme.js";import{useWindowSize as x}from"../../utilities/hooks/useWindowSize.js";import{useCallbackRefState as z}from"../../utilities/hooks/useCallbackRef.js";import{ActionIcon as $}from"../action-icon/ActionIcon.js";import{Icon as p}from"../icon/Icon.js";import{ChevronLeft as R,ChevronRight as I}from"@atom-learning/icons";const N=m(T,{position:"relative",borderBottom:"1px solid $base3",width:"100%"}),_=m(y,{flexShrink:0,display:"flex",width:"100%",overflowX:"auto","&::-webkit-scrollbar":{display:"none"},scrollbarWidth:"none"}),u=m($,{height:"100% !important",position:"absolute",top:"50%",transform:"translateY(-50%)",cursor:"pointer",background:"$background !important",color:"$interactive1 !important",borderRadius:0,opacity:.9}),A=10,b=({children:g,colorScheme:v={},...C})=>{const[t,k]=z(),{width:W}=x(),[w,i]=e.useState(!1),[E,s]=e.useState(!1),f=e.useCallback(c=>{if(!t)return;const{scrollWidth:r,scrollLeft:l,offsetWidth:a}=t,h=Math.round(r*(A/100));let n=l;if(c==="right"){const o=l+h;n=o+a<=r?o:r-a}else{const o=l-h;n=o>0?o:0}t.scroll({left:n,behavior:"smooth"}),setTimeout(()=>{const{scrollWidth:o,scrollLeft:d,offsetWidth:L}=t,S=o-(d+L);d===0?(i(!1),s(!0)):S<5?(s(!1),i(!0)):(i(!0),s(!0))},500)},[t]);return e.useEffect(()=>{var c;if(!t)return;const{offsetWidth:r,scrollWidth:l}=t,a=l>r;(c=t.scroll)==null||c.call(t,{left:0}),i(!1),s(a)},[t,W]),e.createElement(N,{base:"slate",accent:"blue",interactive:"hiContrast1",...v,...C},w&&e.createElement(u,{label:"scroll left",size:"md",css:{left:0},onClick:()=>f("left")},e.createElement(p,{is:R})),e.createElement(_,{ref:k},g),E&&e.createElement(u,{label:"scroll right",size:"md",css:{right:0},onClick:()=>f("right")},e.createElement(p,{is:I})))};b.displayName="TabsTriggerList";export{b as TabsTriggerList};