@atom-learning/components 1.20.1 → 1.21.2

package/CHANGELOG.md

@@ -1,9 +1,9 @@
-## [1.20.1](https://github.com/Atom-Learning/components/compare/v1.20.0...v1.20.1) (2022-07-18)
+## [1.21.2](https://github.com/Atom-Learning/components/compare/v1.21.1...v1.21.2) (2022-07-28)
 
 
 ### Bug Fixes
 
-* documentation error ([1fdf7ff](https://github.com/Atom-Learning/components/commit/1fdf7ff7f41e4c9bc6b9bcd8fd9c398fbc2dc825))
+* button fullWidth=false to give width:max-content ([fe742fd](https://github.com/Atom-Learning/components/commit/fe742fd3cf029733187651cd80bb791317f21832))
 
 # [1.4.0](https://github.com/Atom-Learning/components/compare/v1.3.0...v1.4.0) (2022-04-11)
 

package/dist/components/button/Button.js

@@ -1 +1 @@
-import{darken as n,opacify as s}from"color2k";import*as o from"react";import{Box as b}from"../box/Box.js";import{Icon as w}from"../icon/Icon.js";import{Loader as k}from"../loader/Loader.js";import{styled as v,theme as l}from"../../stitches.js";const d=(e,r,a)=>({border:"1px solid",borderColor:"currentColor",color:e,"&[disabled]":{borderColor:"$tonal400",color:"$tonal400",cursor:"not-allowed"},"&:not([disabled]):hover, &:not([disabled]):focus":{textDecoration:"none",color:r},"&:not([disabled]):active":{color:a}}),i=(e,r,a,t="white")=>({bg:e,color:t,"&[disabled]":{bg:"$tonal100",color:"$tonal400",cursor:"not-allowed"},"&:not([disabled]):hover, &:not([disabled]):focus":{bg:r,color:t},"&:not([disabled]):active":{bg:a}}),p=v("button",{alignItems:"center",bg:"unset",border:"unset",borderRadius:"$0",cursor:"pointer",display:"flex",fontFamily:"$body",fontWeight:600,justifyContent:"center",p:"unset",textDecoration:"none",transition:"all 100ms ease-out",whiteSpace:"nowrap",width:"max-content",variants:{theme:{primary:{},secondary:{},success:{},warning:{},danger:{},neutral:{}},appearance:{solid:{},outline:{}},size:{sm:{fontSize:"$sm",lineHeight:1.53,height:"$3",px:"$4"},md:{fontSize:"$md",lineHeight:1.5,height:"$4",px:"$5"},lg:{fontSize:"$lg",lineHeight:1.5,height:"$5",px:"$5"}},isLoading:{true:{cursor:"not-allowed",opacity:.6,pointerEvents:"none"}},fullWidth:{false:{width:"auto"},true:{width:"100%"}},isRounded:{true:{borderRadius:"$round"}}},compoundVariants:[{theme:"primary",appearance:"solid",css:i("$primary","$primaryMid","$primaryDark")},{theme:"secondary",appearance:"solid",css:i("$primaryDark",n(l.colors.primaryDark.value,.1),n(l.colors.primaryDark.value,.15))},{theme:"success",appearance:"solid",css:i("$success","$successMid","$successDark")},{theme:"warning",appearance:"solid",css:i("$warning","$warningMid","$warningDark","$tonal500")},{theme:"danger",appearance:"solid",css:i("$danger","$dangerMid","$dangerDark")},{theme:"neutral",appearance:"solid",css:i("white",s("white",-.1),s("white",-.25),"$primary")},{theme:"primary",appearance:"outline",css:d("$primary","$primaryMid","$primaryDark")},{theme:"neutral",appearance:"outline",css:d("white",s("white",-.2),s("white",-.35))},{theme:"secondary",appearance:"outline",css:d("$primaryDark",n(l.colors.primaryDark.value,.1),n(l.colors.primaryDark.value,.15))}]}),D=({isLoading:e,children:r})=>o.createElement(o.Fragment,null,o.createElement(k,{css:{opacity:e?1:0,position:"absolute",transition:"opacity 150ms"}}),o.createElement(b,{as:"span",css:e?{opacity:0,transition:"opacity 150ms"}:{}},r)),x=e=>{switch(e){case"lg":return 22;case"md":return 20;case"sm":default:return 16}},m=(e,r)=>o.Children.map(e,(a,t)=>(a==null?void 0:a.type)===w?o.cloneElement(a,{css:{[t===0?"mr":"ml"]:r==="sm"?"$2":"$3",size:x(r),...a.props.css?a.props.css:{}}}):a),u=o.forwardRef(({children:e,isLoading:r,onClick:a,href:t,appearance:h="solid",size:c="md",theme:y="primary",type:g="button",...$},f)=>o.createElement(p,{isLoading:r||!1,onClick:r?void 0:a,appearance:h,size:c,theme:y,...$,...t?{as:"a",href:t,onClick:void 0}:{},...t?{}:{type:g},ref:f},typeof r=="boolean"?o.createElement(D,{isLoading:r},m(e,c)):m(e,c)));u.displayName="Button";export{u as Button,p as StyledButton};
+import{darken as i,opacify as s}from"color2k";import*as o from"react";import{Box as b}from"../box/Box.js";import{Icon as w}from"../icon/Icon.js";import{Loader as k}from"../loader/Loader.js";import{styled as v,theme as l}from"../../stitches.js";const d=(e,r,a)=>({border:"1px solid",borderColor:"currentColor",color:e,"&[disabled]":{borderColor:"$tonal400",color:"$tonal400",cursor:"not-allowed"},"&:not([disabled]):hover, &:not([disabled]):focus":{textDecoration:"none",color:r},"&:not([disabled]):active":{color:a}}),n=(e,r,a,t="white")=>({bg:e,color:t,"&[disabled]":{bg:"$tonal100",color:"$tonal400",cursor:"not-allowed"},"&:not([disabled]):hover, &:not([disabled]):focus":{bg:r,color:t},"&:not([disabled]):active":{bg:a}}),p=v("button",{alignItems:"center",bg:"unset",border:"unset",borderRadius:"$0",cursor:"pointer",display:"flex",fontFamily:"$body",fontWeight:600,justifyContent:"center",p:"unset",textDecoration:"none",transition:"all 100ms ease-out",whiteSpace:"nowrap",width:"max-content",variants:{theme:{primary:{},secondary:{},success:{},warning:{},danger:{},neutral:{}},appearance:{solid:{},outline:{}},size:{sm:{fontSize:"$sm",lineHeight:1.53,height:"$3",px:"$4"},md:{fontSize:"$md",lineHeight:1.5,height:"$4",px:"$5"},lg:{fontSize:"$lg",lineHeight:1.5,height:"$5",px:"$5"}},isLoading:{true:{cursor:"not-allowed",opacity:.6,pointerEvents:"none"}},fullWidth:{false:{width:"max-content"},true:{width:"100%"}},isRounded:{true:{borderRadius:"$round"}}},compoundVariants:[{theme:"primary",appearance:"solid",css:n("$primary","$primaryMid","$primaryDark")},{theme:"secondary",appearance:"solid",css:n("$primaryDark",i(l.colors.primaryDark.value,.1),i(l.colors.primaryDark.value,.15))},{theme:"success",appearance:"solid",css:n("$success","$successMid","$successDark")},{theme:"warning",appearance:"solid",css:n("$warning","$warningMid","$warningDark","$tonal500")},{theme:"danger",appearance:"solid",css:n("$danger","$dangerMid","$dangerDark")},{theme:"neutral",appearance:"solid",css:n("white",s("white",-.1),s("white",-.25),"$primary")},{theme:"primary",appearance:"outline",css:d("$primary","$primaryMid","$primaryDark")},{theme:"neutral",appearance:"outline",css:d("white",s("white",-.2),s("white",-.35))},{theme:"secondary",appearance:"outline",css:d("$primaryDark",i(l.colors.primaryDark.value,.1),i(l.colors.primaryDark.value,.15))}]}),D=({isLoading:e,children:r})=>o.createElement(o.Fragment,null,o.createElement(k,{css:{opacity:e?1:0,position:"absolute",transition:"opacity 150ms"}}),o.createElement(b,{as:"span",css:e?{opacity:0,transition:"opacity 150ms"}:{}},r)),x=e=>{switch(e){case"lg":return 22;case"md":return 20;case"sm":default:return 16}},m=(e,r)=>o.Children.map(e,(a,t)=>(a==null?void 0:a.type)===w?o.cloneElement(a,{css:{[t===0?"mr":"ml"]:r==="sm"?"$2":"$3",size:x(r),...a.props.css?a.props.css:{}}}):a),u=o.forwardRef(({children:e,isLoading:r,onClick:a,href:t,appearance:h="solid",size:c="md",theme:y="primary",type:g="button",...$},f)=>o.createElement(p,{isLoading:r||!1,onClick:r?void 0:a,appearance:h,size:c,theme:y,...$,...t?{as:"a",href:t,onClick:void 0}:{},...t?{}:{type:g},ref:f},typeof r=="boolean"?o.createElement(D,{isLoading:r},m(e,c)):m(e,c)));u.displayName="Button";export{u as Button,p as StyledButton};

package/dist/components/stepper/Stepper.js

@@ -1 +1 @@
-import S from"invariant";import*as r from"react";import{Box as d}from"../box/Box.js";import{StepperProvider as c}from"./stepper-context/StepperContext.js";import{StepperStepBack as f}from"./StepperStepBack.js";import{StepperStepForward as h}from"./StepperStepForward.js";import{StepperSteps as u}from"./StepperSteps.js";const e=({children:i,stepCount:o,allowSkip:n,onComplete:s,onStepChange:l,direction:a="horizontal",steps:t,css:m})=>{S(!(o&&t),"`Stepper` should only be given one of `stepCount` or `steps`. When both are provided, `steps` will be used and `stepCount` will be ignored.");const p=(t==null?void 0:t.length)||o||0;return r.createElement(c,{stepCount:p,allowSkip:n,onComplete:s,onStepChange:o?l:void 0,direction:a,steps:t||Array(p).fill("")},r.createElement(d,{"aria-label":"progress",css:{width:"100%",...m}},i))};e.StepBack=f,e.StepForward=h,e.Steps=u,e.displayName="Stepper";export{e as Stepper};
+import S from"invariant";import*as r from"react";import{Box as c}from"../box/Box.js";import{StepperProvider as h}from"./stepper-context/StepperContext.js";import{StepperStepBack as f}from"./StepperStepBack.js";import{StepperStepForward as u}from"./StepperStepForward.js";import{StepperSteps as C}from"./StepperSteps.js";const e=({children:i,stepCount:o,allowSkip:s,onComplete:n,onStepChange:l,direction:a="horizontal",steps:t,hideLabels:m=!1,css:d})=>{S(!(o&&t),"`Stepper` should only be given one of `stepCount` or `steps`. When both are provided, `steps` will be used and `stepCount` will be ignored.");const p=(t==null?void 0:t.length)||o||0;return r.createElement(h,{stepCount:p,allowSkip:s,onComplete:n,onStepChange:o?l:void 0,direction:a,steps:t||Array(p).fill(""),hideLabels:m},r.createElement(c,{"aria-label":"progress",css:{width:"100%",...d}},i))};e.StepBack=f,e.StepForward=u,e.Steps=C,e.displayName="Stepper";export{e as Stepper};

package/dist/components/stepper/StepperSteps.js

@@ -1 +1 @@
-import{Ok as E}from"@atom-learning/icons";import*as i from"react";import{styled as f}from"../../stitches.js";import{Flex as v}from"../flex/Flex.js";import{Icon as b}from"../icon/Icon.js";import{StepperStepLabel as C}from"./StepperStepLabel.js";import{StepperStepContainer as h}from"./StepperStepContainer.js";import{StepperStepBullet as $}from"./StepperStepBullet.js";import{useStepper as D}from"./stepper-context/StepperContext.js";import{Status as r}from"./types.js";const I=f(v,{justifyContent:"space-between",variants:{direction:{vertical:{flexDirection:"column"},horizontal:{flexDirection:"row",alignItems:"center"}}}}),g=({css:m})=>{const{steps:o,goToStep:p,activeStep:c,viewedSteps:a,allowSkip:l,direction:n}=D(),u=e=>{const t=o[e];return t.status?t.status:c===e?r.ACTIVE:a.includes(e)?r.VIEWED:r.DEFAULT},S=e=>{var t;const s=(t=o[e])==null?void 0:t.status;return s===r.SUCCESS?r.SUCCESS:s===r.VIEWED||e<Math.max(...a)?r.ACTIVE:r.DEFAULT};return i.createElement(I,{css:m,direction:n},o.map((e,t)=>{const s=u(t),d=S(t);return i.createElement(h,{key:`step_${t}`,direction:n,separator:d,css:n==="horizontal"?{width:`calc(100% / ${o.length})`}:{height:`calc(100% / ${o.length})`}},i.createElement($,{as:l?"button":"div",onClick:()=>l&&a.includes(t)?p==null?void 0:p(t):void 0,status:s,"aria-current":t===c?"step":void 0,"aria-label":e.label?"":`step ${t+1}`,"aria-labelledby":e.label?`step-${t}`:void 0,css:{cursor:l&&a.includes(t)?"pointer":"auto"}},e.status==="success"?i.createElement(b,{is:E}):t+1),e.label&&i.createElement(C,{as:"span",id:`step-${t}`,direction:n,status:s},e.label))}))};export{g as StepperSteps};
+import{Ok as f}from"@atom-learning/icons";import*as i from"react";import{styled as b}from"../../stitches.js";import{Flex as v}from"../flex/Flex.js";import{Icon as h}from"../icon/Icon.js";import{StepperStepLabel as C}from"./StepperStepLabel.js";import{StepperStepContainer as g}from"./StepperStepContainer.js";import{StepperStepBullet as D}from"./StepperStepBullet.js";import{useStepper as I}from"./stepper-context/StepperContext.js";import{Status as r}from"./types.js";const $=b(v,{justifyContent:"space-between",variants:{direction:{vertical:{flexDirection:"column"},horizontal:{flexDirection:"row",alignItems:"center"}}}}),w=({css:m})=>{const{steps:o,goToStep:p,activeStep:c,viewedSteps:a,allowSkip:l,direction:n,hideLabels:u}=I(),d=t=>{const e=o[t];return e.status?e.status:c===t?r.ACTIVE:a.includes(t)?r.VIEWED:r.DEFAULT},S=t=>{var e;const s=(e=o[t])==null?void 0:e.status;return s===r.SUCCESS?r.SUCCESS:s===r.VIEWED||t<Math.max(...a)?r.ACTIVE:r.DEFAULT};return i.createElement($,{css:m,direction:n},o.map((t,e)=>{const s=d(e),E=S(e);return i.createElement(g,{key:`step_${e}`,direction:n,separator:E,css:n==="horizontal"?{width:`calc(100% / ${o.length})`}:{height:`calc(100% / ${o.length})`}},i.createElement(D,{as:l?"button":"div",onClick:()=>l&&a.includes(e)?p==null?void 0:p(e):void 0,status:s,"aria-current":e===c?"step":void 0,"aria-label":t.label?"":`step ${e+1}`,"aria-labelledby":t.label?`step-${e}`:void 0,css:{cursor:l&&a.includes(e)?"pointer":"auto"}},t.status==="success"?i.createElement(h,{is:f}):e+1),t.label&&!u&&i.createElement(C,{as:"span",id:`step-${e}`,direction:n,status:s},t.label))}))};export{w as StepperSteps};

package/dist/components/stepper/stepper-context/StepperContext.js

@@ -1 +1 @@
-import*as o from"react";const u=o.createContext({steps:[],goToPreviousStep:()=>null,goToNextStep:()=>null,goToStep:()=>null,activeStep:0,viewedSteps:[],allowSkip:!1,direction:"horizontal"}),h=({children:r,stepCount:n,allowSkip:S,onComplete:s,onStepChange:p,direction:a,steps:c})=>{const[t,i]=o.useState(0),[v,d]=o.useState([0]),l=!n;o.useEffect(()=>{d(e=>e.includes(t)?e:[...e,t]),p==null||p(t)},[t,p]);const w=()=>{if(s&&t===n-1)return s();if(t<n-1)return i(e=>e+1)},f=()=>{i(e=>e-1)},g=e=>{i(e)};return o.createElement(u.Provider,{value:{steps:c||Array(n).fill(""),goToPreviousStep:l?void 0:f,goToNextStep:l?void 0:w,goToStep:l?void 0:g,activeStep:t,viewedSteps:v,allowSkip:S,direction:a}},r)},m=()=>{const r=o.useContext(u);if(!r)throw new Error("Ensure that you wrap any components with the root component Stepper");return r};export{h as StepperProvider,m as useStepper};
+import*as o from"react";const a=o.createContext({steps:[],goToPreviousStep:()=>null,goToNextStep:()=>null,goToStep:()=>null,activeStep:0,viewedSteps:[],allowSkip:!1,direction:"horizontal",hideLabels:!1}),T=({children:r,stepCount:n,allowSkip:u,onComplete:s,onStepChange:p,direction:S,steps:c,hideLabels:d})=>{const[t,i]=o.useState(0),[v,h]=o.useState([0]),l=!n;o.useEffect(()=>{h(e=>e.includes(t)?e:[...e,t]),p==null||p(t)},[t,p]);const w=()=>{if(s&&t===n-1)return s();if(t<n-1)return i(e=>e+1)},f=()=>{i(e=>e-1)},g=e=>{i(e)};return o.createElement(a.Provider,{value:{steps:c||Array(n).fill(""),goToPreviousStep:l?void 0:f,goToNextStep:l?void 0:w,goToStep:l?void 0:g,activeStep:t,viewedSteps:v,allowSkip:u,direction:S,hideLabels:d}},r)},m=()=>{const r=o.useContext(a);if(!r)throw new Error("Ensure that you wrap any components with the root component Stepper");return r};export{T as StepperProvider,m as useStepper};

package/dist/components/stepper/types.d.ts

@@ -19,6 +19,7 @@ export declare type Context = {
     viewedSteps: number[];
     allowSkip?: boolean;
     direction?: Direction;
+    hideLabels: boolean;
 };
 export declare type StepperProviderProps = {
     stepCount: number;
@@ -27,6 +28,7 @@ export declare type StepperProviderProps = {
     onStepChange?: (activeStep: number) => void;
     direction?: Direction;
     steps: Step[];
+    hideLabels: boolean;
 };
 export interface IStepperProps {
     css?: CSS;
@@ -36,6 +38,7 @@ export interface IStepperProps {
     onStepChange?: (activeStep: number) => void;
     direction?: Direction;
     steps?: Step[];
+    hideLabels?: boolean;
 }
 export interface IStepperNavigateProps {
     label?: (currentStep?: number) => string;