@spaced-out/ui-design-system 0.1.31 → 0.1.33

package/lib/components/Stepper/Stepper.module.css

@@ -0,0 +1,110 @@
+@value (
+  colorFillPrimary,
+  colorSuccessDark,
+  colorBackgroundTertiary,
+  colorFillDisabled,
+  colorTextSecondary,
+  colorTextPrimary,
+  colorTextDisabled,
+  colorTextInversePrimary,
+  colorBorderSecondary
+) from '../../styles/variables/_color.css';
+@value (
+  size24,
+  sizeFluid
+) from '../../styles/variables/_size.css';
+@value (
+  spaceMedium,
+  spaceSmall,
+  spaceXXSmall
+) from '../../styles/variables/_space.css';
+@value (
+  borderWidthPrimary,
+  borderRadiusCircle
+) from '../../styles/variables/_border.css';
+
+.stepperWrapper {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  gap: spaceXXSmall;
+}
+
+.stepperWrapper.vertical {
+  flex-direction: column;
+  gap: spaceMedium;
+  justify-content: initial;
+}
+
+.stepWrapper {
+  position: relative;
+  display: flex;
+  gap: spaceSmall;
+  width: sizeFluid;
+}
+
+.stepWrapperCounter {
+  display: flex;
+  composes: motionEaseInEaseOut from '../../styles/animation.module.css';
+  composes: subTitleExtraSmall from '../../styles/typography.module.css';
+  height: size24;
+  width: size24;
+  min-height: size24;
+  min-width: size24;
+  justify-content: center;
+  align-items: center;
+  border-radius: borderRadiusCircle;
+  background-color: transparent;
+  border: borderWidthPrimary solid colorBorderSecondary;
+  color: colorTextSecondary;
+}
+
+.stepWrapperCounter.selected {
+  background-color: colorFillPrimary;
+  border: borderWidthPrimary solid transparent;
+  color: colorTextInversePrimary;
+}
+
+.stepWrapperCounter.completed {
+  background-color: colorSuccessDark;
+  border: borderWidthPrimary solid transparent;
+  color: colorTextInversePrimary;
+}
+
+.stepWrapperCounter.disabled {
+  background-color: colorFillDisabled;
+  border: borderWidthPrimary solid transparent;
+  color: colorTextDisabled;
+}
+
+.stepContent {
+  display: flex;
+  flex-flow: column;
+  gap: spaceXXSmall;
+}
+
+.stepLabelWrapper {
+  composes: subTitleSmall from '../../styles/typography.module.css';
+  color: colorTextSecondary;
+}
+
+.stepLabelWrapper.active {
+  color: colorTextPrimary;
+}
+
+.stepLabelWrapper.disabled {
+  color: colorTextDisabled;
+}
+
+.stepContentWrapper {
+  composes: bodySmall from '../../styles/typography.module.css';
+  color: colorTextSecondary;
+}
+
+.stepContentWrapper.disabled {
+  color: colorTextDisabled;
+}
+
+.clickable {
+  cursor: pointer;
+}

package/lib/components/Stepper/index.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _Step = require("./Step");
+Object.keys(_Step).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Step[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Step[key];
+    }
+  });
+});
+var _Stepper = require("./Stepper");
+Object.keys(_Stepper).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Stepper[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Stepper[key];
+    }
+  });
+});

package/lib/components/Stepper/index.js.flow

@@ -0,0 +1,4 @@
+// @flow strict
+
+export * from './Step';
+export * from './Stepper';

package/lib/components/index.js

@@ -421,6 +421,17 @@ Object.keys(_StatusIndicator).forEach(function (key) {
     }
   });
 });
+var _Stepper = require("./Stepper");
+Object.keys(_Stepper).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Stepper[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Stepper[key];
+    }
+  });
+});
 var _SubMenu = require("./SubMenu");
 Object.keys(_SubMenu).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/lib/components/index.js.flow

@@ -38,6 +38,7 @@ export * from './RadioButton';
 export * from './SearchInput';
 export * from './SideMenuLink';
 export * from './StatusIndicator';
+export * from './Stepper';
 export * from './SubMenu';
 export * from './Table';
 export * from './Tabs';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spaced-out/ui-design-system",
-  "version": "0.1.31",
+  "version": "0.1.33",
   "main": "index.js",
   "description": "Sense UI components library",
   "author": {