diff --git a/client/src/components/organisms/LabelForm/LabelForm.stories.tsx b/client/src/components/organisms/LabelForm/LabelForm.stories.tsx new file mode 100644 index 0000000..5b0c445 --- /dev/null +++ b/client/src/components/organisms/LabelForm/LabelForm.stories.tsx @@ -0,0 +1,36 @@ +import React, { useState } from 'react'; +import { text, color } from '@storybook/addon-knobs'; +import LabelForm from './LabelForm'; + +export default { + component: LabelForm, + title: 'Organisms/LabelForm', +}; +export const Default = () => { + const title = text('title', 'Bug'); + const bgColor = color('background color', 'rgba(163,10,10,100)'); + const hexColor = `#${bgColor + .slice(5, -1) + .split(',') + .map((v) => Number(v).toString(16).padStart(2, '0')) + .join('') + .slice(0, 6)}`; + const [btnColor, setColor] = useState(hexColor); + const onClick = () => { + const letters = '0123456789ABCDEF'; + let randomColor = '#'; + for (let i = 0; i < 6; i += 1) { + randomColor += letters[Math.floor(Math.random() * 16)]; + } + setColor(randomColor); + }; + const description = text('description', 'api develop'); + return ( + + ); +}; diff --git a/client/src/components/organisms/LabelForm/LabelForm.tsx b/client/src/components/organisms/LabelForm/LabelForm.tsx new file mode 100644 index 0000000..5035716 --- /dev/null +++ b/client/src/components/organisms/LabelForm/LabelForm.tsx @@ -0,0 +1,96 @@ +import React, { FunctionComponent } from 'react'; +import styled from '@themes/styled'; +import Input from '@components/atoms/Input'; +import InputLabel from '@components/atoms/InputLabel'; +import Button from '@components/atoms/Button'; +import BoldText from '@/components/atoms/BoldText'; +import TextWithIcon from '@/components/molecules/TextWithIcon'; +import { Change } from '@components/atoms/icons'; +import getTextColorByBGColor from '@lib/getTextColorByBGColor'; + +interface StyledProps { + bgColor: string; +} + +const StyledLabelForm = styled.form` + display: flex; + align-items: center; + & > * { + flex: 1; + padding-right: 16px; + } + + & button { + margin-right: 16px; + } + + & > .color { + & > div { + display: flex; + } + & button { + display: flex; + align-items: center; + padding: 5px; + background-color: ${({ bgColor }) => bgColor}; + } + & button svg { + fill: ${({ bgColor }) => getTextColorByBGColor(bgColor)}; + } + } + + & > .btn { + text-align: right; + } +`; + +interface Props { + title: string; + description?: string; + bgColor: string; + onClick: () => void; +} + +const LabelForm: FunctionComponent = ({ + title, + description = '', + bgColor, + onClick, +}) => { + return ( + +
+ + +
+
+ + +
+
+ +
+ + +
+
+ +
+ + +
+
+ ); +}; + +export default LabelForm; diff --git a/client/src/components/organisms/LabelForm/index.ts b/client/src/components/organisms/LabelForm/index.ts new file mode 100644 index 0000000..017eb84 --- /dev/null +++ b/client/src/components/organisms/LabelForm/index.ts @@ -0,0 +1 @@ +export { default } from './LabelForm';