@atom-learning/components 1.23.0 → 1.24.0

package/CHANGELOG.md

@@ -1,14 +1,15 @@
-# [1.23.0](https://github.com/Atom-Learning/components/compare/v1.22.2...v1.23.0) (2022-08-12)
+# [1.24.0](https://github.com/Atom-Learning/components/compare/v1.23.0...v1.24.0) (2022-08-17)
 
 
 ### Bug Fixes
 
-* replacing disabled buttons with divs ([df506f8](https://github.com/Atom-Learning/components/commit/df506f8f7a5816bdce6e633f8a20efd6525da37a))
+* add optional chaining ([0c48984](https://github.com/Atom-Learning/components/commit/0c48984efb4a59857113ad3264eab23b111cd058))
+* updated with required styles ([a3d5ccc](https://github.com/Atom-Learning/components/commit/a3d5cccc47a7f96a2367fa53b57c667e419b0aea))
 
 
 ### Features
 
-* calendar year picker ([d4dfc32](https://github.com/Atom-Learning/components/commit/d4dfc3282dc4cd584b69013a9c9c64615d33ab2a))
+* update bullet and label states ([a2c9275](https://github.com/Atom-Learning/components/commit/a2c9275725f37c7e24ce932ef461712c00e91bee))
 
 # [1.4.0](https://github.com/Atom-Learning/components/compare/v1.3.0...v1.4.0) (2022-04-11)
 

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

@@ -263,7 +263,7 @@ export declare const StepperStepBullet: import("@stitches/react/types/styled-com
         };
     };
 }>>, {
-    status?: "success" | "default" | "active" | "viewed" | undefined;
+    status?: "success" | "default" | "active" | "viewed" | "completed" | "reviewed" | undefined;
 }, {
     sm: string;
     md: string;

package/dist/components/stepper/StepperStepBullet.js

@@ -1 +1 @@
-import{styled as e}from"../../stitches.js";import{Flex as o}from"../flex/Flex.js";const r=e(o,{position:"relative",p:"$2",justifyContent:"center",alignItems:"center",size:"$3",borderRadius:"50%",border:"none",bg:"$tonal50",zIndex:1,flex:"none",variants:{status:{default:{bg:"$tonal50",color:"$tonal400"},active:{bg:"white",color:"$primaryMid",border:"2px solid",borderColor:"currentColor"},viewed:{bg:"$primary",color:"white"},success:{bg:"$success",color:"white"}}}});export{r as StepperStepBullet};
+import{styled as e}from"../../stitches.js";import{Flex as o}from"../flex/Flex.js";const r=e(o,{position:"relative",p:"$2",justifyContent:"center",alignItems:"center",size:"$3",borderRadius:"50%",border:"none",bg:"$tonal50",zIndex:1,flex:"none",variants:{status:{default:{bg:"$tonal50",color:"$tonal300"},active:{bg:"white",color:"$primaryMid",border:"2px solid",borderColor:"currentColor"},viewed:{bg:"white",border:"2px solid $tonal200",color:"$tonal600"},completed:{bg:"$primary",color:"white"},reviewed:{bg:"$primaryMid",color:"white"},success:{bg:"$success",color:"white"}}}});export{r as StepperStepBullet};

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

@@ -265,6 +265,7 @@ export declare const StepperStepContainer: import("@stitches/react/types/styled-
 }>>, {
     direction?: "horizontal" | "vertical" | undefined;
     separator?: "success" | "default" | "active" | undefined;
+    status?: "success" | "default" | "active" | "viewed" | "completed" | "reviewed" | undefined;
 }, {
     sm: string;
     md: string;

package/dist/components/stepper/StepperStepContainer.js

@@ -1 +1 @@
-import{styled as t}from"../../stitches.js";import{Flex as e}from"../flex/Flex.js";const o=t(e,{position:"relative",fontFamily:"$body",fontWeight:600,fontSize:"$md",alignItems:"center","&:not(:last-child)::after":{content:"",position:"absolute"},variants:{direction:{vertical:{py:"$3",flexDirection:"row","&:not(:last-child)::after":{height:"100%",width:"4px",left:"14px",top:"50%"}},horizontal:{px:"$2",flexDirection:"column","&:not(:last-child)::after":{width:"100%",height:"4px",left:"50%",top:"14px"}}},separator:{default:{"&:not(:last-child)::after":{bg:"$tonal50"}},active:{"&:not(:last-child)::after":{bg:"$primary"}},success:{"&:not(:last-child)::after":{bg:"$success"}}}}});export{o as StepperStepContainer};
+import{styled as t}from"../../stitches.js";import{Flex as i}from"../flex/Flex.js";const o=t(i,{position:"relative",fontFamily:"$body",fontWeight:600,fontSize:"$md",alignItems:"center","&:not(:last-child)::after":{content:"",position:"absolute"},"&:focus-visible":{outline:"none"},variants:{direction:{vertical:{py:"$3",flexDirection:"row","&:not(:last-child)::after":{height:"100%",width:"4px",left:"14px",top:"50%"}},horizontal:{px:"$2",flexDirection:"column","&:not(:last-child)::after":{width:"100%",height:"4px",left:"50%",top:"14px"}}},separator:{default:{"&:not(:last-child)::after":{bg:"$tonal50"}},active:{"&:not(:last-child)::after":{bg:"$primary"}},success:{"&:not(:last-child)::after":{bg:"$success"}}},status:{completed:{"&:hover":{"& :first-child":{bg:"$primaryMid",color:"white !important"},"& :last-child":{color:"$primaryMid"}},"&:focus-visible":{"& :first-child":{outline:"2px solid $primary",outlineOffset:"2px"}}},active:{"&:hover":{"& :first-child":{borderColor:"$tonal400",color:"$tonal600"},"& :last-child":{color:"$tonal600"}},"&:focus-visible":{"& :first-child":{outline:"2px solid $primary",outlineOffset:"2px"}}},default:{},viewed:{"&:focus-visible":{"& :first-child":{outline:"2px solid $primary !important",outlineOffset:"2px !important"}}},success:{},reviewed:{"&:focus-visible":{"& :first-child":{outline:"2px solid $primary !important",outlineOffset:"2px !important"}}}}}});export{o as StepperStepContainer};

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

@@ -273,7 +273,7 @@ export declare const StepperStepLabel: import("@stitches/react/types/styled-comp
     as?: import("react").ElementType<any> | import("react").ComponentType<{}> | undefined;
 }>, {
     direction?: "horizontal" | "vertical" | undefined;
-    status?: "success" | "default" | "active" | "viewed" | undefined;
+    status?: "success" | "default" | "active" | "viewed" | "completed" | "reviewed" | undefined;
 }, {
     sm: string;
     md: string;

package/dist/components/stepper/StepperStepLabel.js

@@ -1 +1 @@
-import{styled as t}from"../../stitches.js";import{Text as e}from"../text/Text.js";const o=t(e,{fontWeight:600,variants:{direction:{vertical:{ml:"$3",textAlign:"left"},horizontal:{mt:"$3",textAlign:"center"}},status:{default:{color:"$tonal400",fontWeight:400},active:{color:"$primaryMid"},viewed:{color:"$primary"},success:{color:"$success"}}}});export{o as StepperStepLabel};
+import{styled as t}from"../../stitches.js";import{Text as e}from"../text/Text.js";const o=t(e,{fontWeight:600,variants:{direction:{vertical:{ml:"$3",textAlign:"left"},horizontal:{mt:"$3",textAlign:"center"}},status:{default:{color:"$tonal300",fontWeight:400},active:{color:"$primaryMid"},viewed:{color:"$tonal600"},completed:{color:"$primary"},success:{color:"$success"},reviewed:{}}}});export{o as StepperStepLabel};

package/dist/components/stepper/StepperSteps.js

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

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

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

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

@@ -3,7 +3,9 @@ export declare enum Status {
     ACTIVE = "active",
     VIEWED = "viewed",
     SUCCESS = "success",
-    DEFAULT = "default"
+    DEFAULT = "default",
+    COMPLETED = "completed",
+    REVIEWED = "reviewed"
 }
 export interface Step {
     label?: string;
@@ -17,6 +19,7 @@ export declare type Context = {
     goToStep?: (index: number) => void;
     activeStep: number;
     viewedSteps: number[];
+    completedSteps: number[];
     allowSkip?: boolean;
     direction?: Direction;
     hideLabels: boolean;

package/dist/components/stepper/types.js

@@ -1 +1 @@
-var E=(t=>(t.ACTIVE="active",t.VIEWED="viewed",t.SUCCESS="success",t.DEFAULT="default",t))(E||{});export{E as Status};
+var t=(E=>(E.ACTIVE="active",E.VIEWED="viewed",E.SUCCESS="success",E.DEFAULT="default",E.COMPLETED="completed",E.REVIEWED="reviewed",E))(t||{});export{t as Status};