@atom-learning/components 1.20.1 → 1.21.0

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.0](https://github.com/Atom-Learning/components/compare/v1.20.1...v1.21.0) (2022-07-19)
 
 
-### Bug Fixes
+### Features
 
-* documentation error ([1fdf7ff](https://github.com/Atom-Learning/components/commit/1fdf7ff7f41e4c9bc6b9bcd8fd9c398fbc2dc825))
+* add support for hiding step labels ([fa98736](https://github.com/Atom-Learning/components/commit/fa987366fdba545825623334a8eaec678b7b7876))
 
 # [1.4.0](https://github.com/Atom-Learning/components/compare/v1.3.0...v1.4.0) (2022-04-11)
 

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;