orcs-design-system
Version:
TeamForm's Design System, aka: ORCS
187 lines • 5.17 kB
JavaScript
import React, { useState } from "react";
import Box from "../Box";
import Button from "../Button";
import Popover from "../Popover";
import Icon from "../Icon";
import Flex from "../Flex";
import ColorPicker from "./index";
import { jsx as _jsx } from "react/jsx-runtime";
export default {
title: "Components/ColorPicker",
component: ColorPicker,
parameters: {
docs: {
description: {
component: "A reusable color picker component that can be triggered by any element passed as children."
}
}
}
};
const initialColor = "linear-gradient(90deg,rgb(56, 136, 255) 0%,rgb(148, 81, 255) 100%)";
export const Default = () => {
const [color, setColor] = useState(initialColor);
return /*#__PURE__*/_jsx(Box, {
p: "l",
position: "relative",
children: /*#__PURE__*/_jsx(Flex, {
width: "100%",
height: "150px",
justifyContent: "flex-end",
alignItems: "flex-start",
background: color,
borderRadius: "2",
p: "r",
children: /*#__PURE__*/_jsx(ColorPicker, {
value: color,
onChange: setColor,
position: "bottom-start",
children: _ref => {
let {
toggleColorPicker
} = _ref;
return /*#__PURE__*/_jsx(Popover, {
direction: "left",
height: "35px",
width: "fit-content",
text: "Change background colour",
ml: "auto",
children: /*#__PURE__*/_jsx(Button, {
height: "35px",
width: "35px",
borderRadius: "35px",
borderColor: "white30",
bg: "white30",
ariaLabel: "Change background colour",
onClick: toggleColorPicker,
children: /*#__PURE__*/_jsx(Icon, {
icon: ["fas", "palette"],
color: "white"
})
})
});
}
})
})
});
};
export const Controlled = () => {
const [color, setColor] = useState(initialColor);
const onSave = color => {
setColor(color);
};
const onClose = () => {
setColor(initialColor);
};
const onReset = () => {
setColor(initialColor);
return initialColor;
};
return /*#__PURE__*/_jsx(Box, {
p: "l",
position: "relative",
children: /*#__PURE__*/_jsx(Flex, {
width: "100%",
height: "150px",
justifyContent: "flex-end",
alignItems: "flex-start",
background: color,
borderRadius: "2",
p: "r",
children: /*#__PURE__*/_jsx(ColorPicker, {
value: color,
onChange: setColor,
position: "bottom-start",
onSave: onSave,
onReset: onReset,
onClose: onClose,
children: _ref2 => {
let {
toggleColorPicker
} = _ref2;
return /*#__PURE__*/_jsx(Popover, {
direction: "left",
height: "35px",
width: "fit-content",
text: "Change background colour",
ml: "auto",
children: /*#__PURE__*/_jsx(Button, {
height: "35px",
width: "35px",
borderRadius: "35px",
borderColor: "white30",
bg: "white30",
ariaLabel: "Change background colour",
onClick: toggleColorPicker,
children: /*#__PURE__*/_jsx(Icon, {
icon: ["fas", "palette"],
color: "white"
})
})
});
}
})
})
});
};
export const DefaultOpen = () => {
const [color, setColor] = useState(initialColor);
return /*#__PURE__*/_jsx(Box, {
p: "l",
position: "relative",
children: /*#__PURE__*/_jsx(Flex, {
width: "100%",
height: "150px",
justifyContent: "flex-end",
alignItems: "flex-start",
background: color,
borderRadius: "2",
p: "r",
children: /*#__PURE__*/_jsx(ColorPicker, {
value: color,
onChange: setColor,
position: "bottom-start",
defaultOpen: true,
children: _ref3 => {
let {
toggleColorPicker
} = _ref3;
return /*#__PURE__*/_jsx(Popover, {
direction: "left",
height: "35px",
width: "fit-content",
text: "Picker locked open",
ml: "auto",
children: /*#__PURE__*/_jsx(Button, {
onClick: toggleColorPicker,
height: "35px",
width: "35px",
borderRadius: "35px",
borderColor: "white30",
bg: "white30",
ariaLabel: "Colour picker always open",
children: /*#__PURE__*/_jsx(Icon, {
icon: ["fas", "palette"],
color: "white"
})
})
});
}
})
})
});
};
Default.__docgenInfo = {
"description": "",
"methods": [],
"displayName": "Default"
};
Controlled.__docgenInfo = {
"description": "",
"methods": [],
"displayName": "Controlled"
};
DefaultOpen.__docgenInfo = {
"description": "",
"methods": [],
"displayName": "DefaultOpen"
};