@fibery/ui-kit 1.27.1 → 1.28.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fibery/ui-kit",
-  "version": "1.27.1",
+  "version": "1.28.0",
   "private": false,
   "files": [
     "src/antd/styles.ts",
@@ -32,7 +32,8 @@
     "src/dropdown-menu",
     "src/shortcut-badge",
     "src/tsfixme",
-    "src/togle.tsx"
+    "src/toggle.tsx",
+    "src/toggle-on-off.tsx"
   ],
   "license": "UNLICENSED",
   "dependencies": {

package/src/toggle-on-off.tsx

@@ -0,0 +1,36 @@
+import chroma from "chroma-js";
+import {FC, ComponentProps, useMemo} from "react";
+import {opacity, ThemeColors} from "./design-system";
+import {useTheme} from "./theme-provider";
+import {Toggle} from "./toggle";
+
+const getBackgroundColors = (accentColor: string | undefined, theme: ThemeColors) => {
+  return accentColor && chroma.valid(accentColor)
+    ? {
+        enabledColor: accentColor,
+        disabledColor: chroma(accentColor).alpha(opacity.opacity35).css(),
+      }
+    : {
+        enabledColor: theme.primaryBlue,
+        disabledColor: theme.disabledTextColor,
+      };
+};
+
+interface ToggleOnOffProps extends Omit<ComponentProps<typeof Toggle>, "backgroundColor"> {
+  color?: string;
+}
+
+export const ToggleOnOff: FC<ToggleOnOffProps> = ({value, color, ...rest}) => {
+  const theme = useTheme();
+  const {enabledColor, disabledColor} = useMemo(() => getBackgroundColors(color, theme), [color, theme]);
+  return <Toggle value={Boolean(value)} backgroundColor={value ? enabledColor : disabledColor} {...rest} />;
+};
+
+interface ReduxFormToggleOnOffProps extends ToggleOnOffProps {
+  input?: ToggleOnOffProps;
+}
+
+export const ReduxFormToggleOnOff: FC<ReduxFormToggleOnOffProps> = ({input, ...rest}) => {
+  const theme = useTheme();
+  return <ToggleOnOff color={theme.primaryBlue} {...input} {...rest} />;
+};

package/src/toggle.tsx

@@ -0,0 +1,158 @@
+import {css, cx} from "@linaria/core";
+import {styled} from "@linaria/react";
+import chroma from "chroma-js";
+import {ComponentProps, FC, ReactNode} from "react";
+import {layout, space, textStyles, transition} from "./design-system";
+import _ from "lodash";
+
+const Input = styled.input<{containerSize: number; containerWidth: number; outlineColor: string}>`
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  appearance: none;
+  margin-right: 0;
+  background-color: transparent;
+  height: ${({containerSize}) => containerSize}px;
+  width: ${({containerWidth}) => containerWidth}px;
+  border-radius: ${({containerSize}) => containerSize / 2}px;
+
+  &:focus {
+    outline: none;
+  }
+
+  &:focus-visible {
+    box-shadow: ${({outlineColor}) => `inset 0 0 0 1px ${outlineColor}`};
+  }
+`;
+
+const Label = styled.div<{labelPosition: "last" | "first"; disabled?: boolean}>`
+  ${textStyles.regular}
+  margin-left: ${({labelPosition}) => (labelPosition === "last" ? `${space.s8}px` : 0)};
+  margin-right: ${({labelPosition}) => (labelPosition === "first" ? `${space.s8}px` : 0)};
+  opacity: ${({disabled}) => (disabled ? 0.5 : 1)};
+  line-height: ${layout.checkboxSize}px;
+  width: 100%;
+`;
+
+const labelWrapperStyle = css`
+  display: flex;
+  position: relative;
+  align-items: center;
+`;
+
+const getOutlineColor = _.memoize((color: string) => {
+  const alpha = chroma(color).alpha();
+  if (alpha < 1) {
+    return chroma(color)
+      .alpha(alpha + 0.3)
+      .css();
+  } else {
+    return chroma(color).darken(1).css();
+  }
+});
+
+const CircleContainer = styled.div<{
+  containerSize: number;
+  containerWidth: number;
+  backgroundColor: string;
+  disabled?: boolean;
+}>`
+  position: relative;
+  height: ${({containerSize}) => containerSize}px;
+  width: ${({containerWidth}) => containerWidth}px;
+  flex-shrink: 0;
+  border-radius: ${({containerSize}) => containerSize / 2}px;
+  background-color: ${({backgroundColor}) => backgroundColor};
+  padding: ${space.s2}px;
+  transition: background-color ${transition};
+  opacity: ${({disabled}) => (disabled ? 0.5 : 1)};
+`;
+
+const Circle = styled.div<{containerSize: number}>`
+  height: ${({containerSize}) => containerSize - space.s2 * 2}px;
+  width: ${({containerSize}) => containerSize - space.s2 * 2}px;
+  border-radius: ${({containerSize}) => containerSize / 2 - space.s2}px;
+  background-color: white;
+  transition: transform ${transition};
+`;
+
+interface ToggleProps extends Omit<ComponentProps<"input">, "value"> {
+  value?: boolean;
+  label?: ReactNode;
+  labelTitle?: string;
+  backgroundColor: string;
+  labelPosition?: "first" | "last";
+  wrapperClassName?: string;
+}
+
+export const Toggle: FC<ToggleProps> = ({
+  value,
+  label,
+  labelTitle,
+  disabled = false,
+  backgroundColor,
+  size = 16,
+  onChange,
+  labelPosition = "last",
+  className,
+  wrapperClassName,
+  ...rest
+}) => {
+  const width = size * 1.75;
+  const outlineColor = getOutlineColor(backgroundColor);
+
+  const circleTransformStyle = {
+    transform: `translateX(${value ? width - size : 0}px)`,
+  };
+
+  return (
+    <label
+      className={cx(
+        wrapperClassName,
+        labelWrapperStyle,
+        disabled
+          ? css`
+              cursor: default;
+            `
+          : css`
+              cursor: pointer;
+            `,
+        labelPosition === "first"
+          ? css`
+              flex-direction: row-reverse;
+            `
+          : css`
+              flex-direction: row;
+            `
+      )}
+      title={labelTitle}
+    >
+      <CircleContainer
+        containerSize={size}
+        containerWidth={width}
+        backgroundColor={backgroundColor}
+        disabled={disabled}
+      >
+        <Circle containerSize={size} style={circleTransformStyle} />
+        <Input
+          containerSize={size}
+          containerWidth={width}
+          outlineColor={outlineColor}
+          onChange={onChange}
+          className={className}
+          type="checkbox"
+          disabled={disabled}
+          checked={value}
+          {...rest}
+        />
+      </CircleContainer>
+
+      {label && (
+        <Label disabled={disabled} labelPosition={labelPosition}>
+          {label}
+        </Label>
+      )}
+    </label>
+  );
+};