@dev-crew-berlin/enter-js-utils 0.41.1 → 0.41.3

package/dist/ui/form-elements/segmented-control.d.ts

@@ -2,6 +2,7 @@ import { ReactElement } from 'react';
 declare type Props<Segment extends string> = {
     segments: Segment[];
     activeSegment?: Segment;
+    colors?: string[];
     onChange: (segment: Segment) => void;
     onFocus?: () => void;
 };

package/dist/ui/form-elements/segmented-control.js

@@ -5,7 +5,7 @@ export const SegmentedControl = props => {
   const name = props.segments.join('');
   return /*#__PURE__*/React.createElement("div", {
     className: _JSXStyle.dynamic([["235524868", [theme.fonts.secondary, theme.colors.enterLightGrey, theme.colors.enterMediumGrey, theme.colors.enterDarkGrey]]]) + " " + 'segmented-controll'
-  }, props.segments.map(segment => /*#__PURE__*/React.createElement("div", {
+  }, props.segments.map((segment, index) => /*#__PURE__*/React.createElement("div", {
     key: segment,
     className: _JSXStyle.dynamic([["235524868", [theme.fonts.secondary, theme.colors.enterLightGrey, theme.colors.enterMediumGrey, theme.colors.enterDarkGrey]]]) + " " + 'segment'
   }, /*#__PURE__*/React.createElement("input", {
@@ -18,6 +18,9 @@ export const SegmentedControl = props => {
     className: _JSXStyle.dynamic([["235524868", [theme.fonts.secondary, theme.colors.enterLightGrey, theme.colors.enterMediumGrey, theme.colors.enterDarkGrey]]])
   }), /*#__PURE__*/React.createElement("label", {
     htmlFor: segment,
+    style: props.colors && {
+      backgroundColor: props.colors[index] && segment === props.activeSegment ? props.colors[index] : undefined
+    },
     className: _JSXStyle.dynamic([["235524868", [theme.fonts.secondary, theme.colors.enterLightGrey, theme.colors.enterMediumGrey, theme.colors.enterDarkGrey]]])
   }, segment))), /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "235524868",

package/dist/ui/form-elements/segmented-control.stories.d.ts

@@ -3,6 +3,7 @@ import { ComponentStory, ComponentMeta } from '@storybook/react';
 declare const _default: ComponentMeta<(<Segment extends string>(props: {
     segments: Segment[];
     activeSegment?: Segment | undefined;
+    colors?: string[] | undefined;
     onChange: (segment: Segment) => void;
     onFocus?: (() => void) | undefined;
 }) => React.ReactElement<any, string | React.JSXElementConstructor<any>>)>;
@@ -10,6 +11,7 @@ export default _default;
 export declare const Basic: ComponentStory<(<Segment extends string>(props: {
     segments: Segment[];
     activeSegment?: Segment | undefined;
+    colors?: string[] | undefined;
     onChange: (segment: Segment) => void;
     onFocus?: (() => void) | undefined;
 }) => React.ReactElement<any, string | React.JSXElementConstructor<any>>)>;

package/dist/ui/icons/caret-icon.js

@@ -9,12 +9,14 @@ export const CaretIcon = ({
     width: "100%",
     height: "100%",
     viewBox: "0 0 16 16",
-    transform: `rotate(${rotateDeg})`,
     fill: color
+  }, /*#__PURE__*/React.createElement("g", {
+    transform: `rotate(${rotateDeg})`,
+    "transform-origin": "center"
   }, /*#__PURE__*/React.createElement("path", {
     color: color,
     fillRule: "evenodd",
     transform: "translate(0,0)",
     d: "M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"
-  }));
+  })));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dev-crew-berlin/enter-js-utils",
-  "version": "0.41.1",
+  "version": "0.41.3",
   "description": "utils such as vaildation and other helpers to work with data from the enter app",
   "files": [
     "dist",