@spaced-out/ui-design-system 0.1.32 → 0.1.34

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

@@ -124,17 +124,6 @@ Object.keys(_CircularLoader).forEach(function (key) {
     }
   });
 });
-var _CodeBlock = require("./CodeBlock");
-Object.keys(_CodeBlock).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _CodeBlock[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _CodeBlock[key];
-    }
-  });
-});
 var _CollapsibleCard = require("./CollapsibleCard");
 Object.keys(_CollapsibleCard).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -421,6 +410,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

@@ -11,7 +11,6 @@ export * from './Card';
 export * from './Checkbox';
 export * from './Chip';
 export * from './CircularLoader';
-export * from './CodeBlock';
 export * from './CollapsibleCard';
 export * from './ConditionalWrapper';
 export * from './Dialog';
@@ -38,6 +37,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.32",
+  "version": "0.1.34",
   "main": "index.js",
   "description": "Sense UI components library",
   "author": {
@@ -101,7 +101,6 @@
     "paths.macro": "^3.0.1",
     "prettier": "^2.5.1",
     "react": "^16.14.0",
-    "react-code-blocks": "^0.0.9-0",
     "react-dom": "^16.14.0",
     "rimraf": "^3.0.2",
     "simple-git": "^3.12.0",

package/lib/components/CodeBlock/CodeBlock.js.flow

@@ -1,20 +0,0 @@
-// @flow strict
-
-import * as React from 'react';
-// $FlowFixMe[untyped-import]
-import {CodeBlock as ReactCodeBlock, dracula} from 'react-code-blocks';
-
-
-type CodeBlockProps = {
-  children?: React.Node,
-  language?: string,
-};
-
-export const CodeBlock = ({children, ...props}: CodeBlockProps): React.Node => (
-  <ReactCodeBlock
-    text={children}
-    showLineNumbers={false}
-    theme={dracula}
-    {...props}
-  ></ReactCodeBlock>
-);

package/lib/components/CodeBlock/index.js

@@ -1,12 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "CodeBlock", {
-  enumerable: true,
-  get: function () {
-    return _CodeBlock.CodeBlock;
-  }
-});
-var _CodeBlock = require("./CodeBlock");

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

@@ -1,3 +0,0 @@
-// @flow strict
-
-export {CodeBlock} from './CodeBlock';