Scipaper/front-end
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request 'feature/checkbox' (#44) from feature/checkbox into develop

Browse Source 
Reviewed-on: http://85.143.176.51:3000/free-land/front-end/pulls/44
This commit is contained in:
Denis Gorbunov 2022-08-10 05:47:57 +00:00
commit ac29f0c0f2
5 changed files with 102 additions and 109 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/App.tsx
View File

@ -10,9 +10,7 @@ import React from "react";
* @return {JSX.Element} * @return {JSX.Element}
*/ */
function App() { function App() {
return ( return <div>Hello world!</div>;
<div>Hello world!</div>
);
} }
export default App; export default App;

67
src/components/Checkbox.stories.tsx
View File

@ -1,58 +1,43 @@
import React from 'react'; import React, { useState } from "react";
import { Meta, Story, ComponentStory, ComponentMeta } from "@storybook/react";
import { ComponentMeta, ComponentStory } from '@storybook/react'; import Checkbox from "./Checkbox";
import Checkbox from './Checkbox';
export default { export default {
// Title inside navigation bar title: "Checkbox",
title: 'Checkbox',
// Component to test
component: Checkbox, component: Checkbox,
// Clarifying the way how to process specific // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
// properties of your component and which values
// it can accept.
argTypes: { argTypes: {
checked: { isChecked: {
options: [true, false], type: "boolean",
control: { type: 'radio' }, },
children: {
type: "string",
defaultValue: "Use light theme",
},
disabled: {
type: "boolean",
defaultValue: "false",
}, },
}, },
} as ComponentMeta<typeof Checkbox>; } as ComponentMeta<typeof Checkbox>;
/**
* This is a way to define a tempalte for your component.
*
* This template should cover all the states.
*
* In most cases you should just distruct args attribute
* on a returning component.
*/
const Template: ComponentStory<typeof Checkbox> = (args) => ( const Template: ComponentStory<typeof Checkbox> = (args) => (
<Checkbox {...args} /> <Checkbox {...args} />
); );
/* -------------------------------------------------------------------------- */ export const Checked = Template.bind({});
/* States of your component */ Checked.args = {
/* -------------------------------------------------------------------------- */ isChecked: true,
children: "This is custom checkbox",
};
export const Unchecked = Template.bind({}); export const Unchecked = Template.bind({});
Unchecked.args = { Unchecked.args = {
label: "On/off lights", isChecked: false,
checked: false, };
children: undefined,
}
export const Checked = Template.bind({});
Checked.args = {
children: "On/off lights",
checked: true,
label: undefined,
}
export const EitherLabelChildren = Template.bind({}); export const Disabled = Template.bind({});
EitherLabelChildren.args = { Disabled.args = {
children: "On/off lights", disabled: true,
checked: true, };
label: "Label!",
}
// GO Further

61
src/components/Checkbox.tsx
View File

@ -1,38 +1,47 @@
import classNames from "classnames";
import React from "react"; import React from "react";
import classNames from "classnames";
import { ReactComponent as Checkmark } from "assets/svg/check.svg";
type Props = { export type Props = {
/** /**
* The way to provide `children` inside a component * Control the state of checkbox
* via attribute instead of enclosed tag
*/ */
label?: React.ReactNode; isChecked: boolean;
/** /**
* When you will have both `children` and `label` * An Element next to the checkbox
* defined on a component it will choose `children`
* to display
*/ */
children?: React.ReactNode; children?: React.ReactNode;
} & Omit<React.ComponentPropsWithoutRef<"input">, "type">; } & Omit<React.HTMLProps<HTMLInputElement>, "type">;
/**
* Customized `input[type="checkbox"]` component with label
*
* All common input properties are inherited.
*
* To define a label content either provide `label` attribute
* or use common `children` property
*/
const Checkbox = ({label, children, className, ...props}: Props) => {
if(label && !children) {
children = label;
}
const Checkbox = ({ children, className, isChecked, ...props }: Props) => {
return ( return (
<label className={classNames(className, "flex items-center")}> <label
<input type="checkbox" {...props} /> className={classNames(
{children !== undefined && <span>{children}</span>} "flex gap-x-4 flex-nowrap text-base text-black select-none",
className
)}
htmlFor={props.id}
>
<div className="w-6 h-6 relative">
<input
className="peer appearance-none transition-colors bg-transparent border-2 border-gray-300 w-6 h-6
rounded checked:bg-blue-500 checked:border-blue-500
nextOnChecked:opacity-100 hover:border-blue-500
focus:outline focus:outline-4 focus:outline-blue-300/40 focus:outline-offset-1
disabled:bg-gray-75 disabled:border-gray-300 "
type="checkbox"
checked={isChecked}
{...props}
/>
<div //
className=" w-4 h-3 leading-[0] absolute top-1.5 left-1 opacity-0
pointer-events-none focus:pointer-events-auto flex items-center justify-center
fill-white peer-disabled:fill-gray-500 "
>
<Checkmark className="fill-inherit" />
</div>
</div>
{children}
</label> </label>
); );
}; };

66
src/components/icons.tsx
View File

@ -1,33 +1,33 @@
export {ReactComponent as SVGArrowBigRight} from "@assets/svg/arrow-big-right.svg"; export { ReactComponent as SVGArrowBigRight } from "@assets/svg/arrow-big-right.svg";
export {ReactComponent as SVGArrowDown} from "@assets/svg/arrow-down.svg"; export { ReactComponent as SVGArrowDown } from "@assets/svg/arrow-down.svg";
export {ReactComponent as SVGArrowLeft} from "@assets/svg/arrow-left.svg"; export { ReactComponent as SVGArrowLeft } from "@assets/svg/arrow-left.svg";
export {ReactComponent as SVGArrowRight} from "@assets/svg/arrow-right.svg"; export { ReactComponent as SVGArrowRight } from "@assets/svg/arrow-right.svg";
export {ReactComponent as SVGBookmark} from "@assets/svg/bookmark.svg"; export { ReactComponent as SVGBookmark } from "@assets/svg/bookmark.svg";
export {ReactComponent as SVGCaretDown} from "@assets/svg/caret-down.svg" export { ReactComponent as SVGCaretDown } from "@assets/svg/caret-down.svg";
export {ReactComponent as SVGCaretLeft} from "@assets/svg/caret-left.svg" export { ReactComponent as SVGCaretLeft } from "@assets/svg/caret-left.svg";
export {ReactComponent as SVGCaretRight} from "@assets/svg/caret-right.svg" export { ReactComponent as SVGCaretRight } from "@assets/svg/caret-right.svg";
export {ReactComponent as SVGCaretUp} from "@assets/svg/caret-up.svg"; export { ReactComponent as SVGCaretUp } from "@assets/svg/caret-up.svg";
export {ReactComponent as SVGChevronesLeft} from "@assets/svg/chevrones-left.svg"; export { ReactComponent as SVGChevronesLeft } from "@assets/svg/chevrones-left.svg";
export {ReactComponent as SVGChevronesRight} from "@assets/svg/chevrones-right.svg"; export { ReactComponent as SVGChevronesRight } from "@assets/svg/chevrones-right.svg";
export {ReactComponent as SVGCite} from "@assets/svg/cite.svg"; export { ReactComponent as SVGCite } from "@assets/svg/cite.svg";
export {ReactComponent as SVGCopy} from "@assets/svg/copy.svg"; export { ReactComponent as SVGCopy } from "@assets/svg/copy.svg";
export {ReactComponent as SVGDelete} from "@assets/svg/delete.svg"; export { ReactComponent as SVGDelete } from "@assets/svg/delete.svg";
export {ReactComponent as SVGDownload} from "@assets/svg/download.svg"; export { ReactComponent as SVGDownload } from "@assets/svg/download.svg";
export {ReactComponent as SVGEdit1} from "@assets/svg/edit1.svg"; export { ReactComponent as SVGEdit1 } from "@assets/svg/edit1.svg";
export {ReactComponent as SVGEdit2} from "@assets/svg/edit2.svg"; export { ReactComponent as SVGEdit2 } from "@assets/svg/edit2.svg";
export {ReactComponent as SVGError} from "@assets/svg/error.svg"; export { ReactComponent as SVGError } from "@assets/svg/error.svg";
export {ReactComponent as SVGEye} from "@assets/svg/eye.svg"; export { ReactComponent as SVGEye } from "@assets/svg/eye.svg";
export {ReactComponent as SVGFavorite} from "@assets/svg/favorite.svg"; export { ReactComponent as SVGFavorite } from "@assets/svg/favorite.svg";
export {ReactComponent as SVGFiletext} from "@assets/svg/filetext.svg"; export { ReactComponent as SVGFiletext } from "@assets/svg/filetext.svg";
export {ReactComponent as SVGFolder} from "@assets/svg/folder.svg"; export { ReactComponent as SVGFolder } from "@assets/svg/folder.svg";
export {ReactComponent as SVGKey} from "@assets/svg/key.svg"; export { ReactComponent as SVGKey } from "@assets/svg/key.svg";
export {ReactComponent as SVGList} from "@assets/svg/list.svg"; export { ReactComponent as SVGList } from "@assets/svg/list.svg";
export {ReactComponent as SVGMinus} from "@assets/svg/minus.svg"; export { ReactComponent as SVGMinus } from "@assets/svg/minus.svg";
export {ReactComponent as SVGMore} from "@assets/svg/more.svg"; export { ReactComponent as SVGMore } from "@assets/svg/more.svg";
export {ReactComponent as SVGPlus} from "@assets/svg/plus.svg"; export { ReactComponent as SVGPlus } from "@assets/svg/plus.svg";
export {ReactComponent as SVGPrinter} from "@assets/svg/printer.svg"; export { ReactComponent as SVGPrinter } from "@assets/svg/printer.svg";
export {ReactComponent as SVGSearch} from "@assets/svg/search.svg"; export { ReactComponent as SVGSearch } from "@assets/svg/search.svg";
export {ReactComponent as SVGShare} from "@assets/svg/share.svg"; export { ReactComponent as SVGShare } from "@assets/svg/share.svg";
export {ReactComponent as SVGUser} from "@assets/svg/user.svg"; export { ReactComponent as SVGUser } from "@assets/svg/user.svg";
export {ReactComponent as SVGXMark} from "@assets/svg/xmark.svg"; export { ReactComponent as SVGXMark } from "@assets/svg/xmark.svg";
export { ReactComponent as SVGCheckmark } from "@assets/svg/checkmark.svg";

11
src/index.css
View File

@ -17,7 +17,8 @@
@font-face { @font-face {
font-family: "Poppins"; font-family: "Poppins";
src: url("assets/fonts/Poppins-Medium.eot"); src: url("assets/fonts/Poppins-Medium.eot");
src: url("assets/fonts/Poppins-Medium.eot?#iefix") format("embedded-opentype"), src: url("assets/fonts/Poppins-Medium.eot?#iefix")
format("embedded-opentype"),
url("assets/fonts/Poppins-Medium.woff2") format("woff2"), url("assets/fonts/Poppins-Medium.woff2") format("woff2"),
url("assets/fonts/Poppins-Medium.ttf") format("truetype"); url("assets/fonts/Poppins-Medium.ttf") format("truetype");
font-weight: 500; font-weight: 500;
@ -28,7 +29,8 @@
@font-face { @font-face {
font-family: "Poppins"; font-family: "Poppins";
src: url("assets/fonts/Poppins-Regular.eot"); src: url("assets/fonts/Poppins-Regular.eot");
src: url("assets/fonts/Poppins-Regular.eot?#iefix") format("embedded-opentype"), src: url("assets/fonts/Poppins-Regular.eot?#iefix")
format("embedded-opentype"),
url("assets/fonts/Poppins-Regular.woff2") format("woff2"), url("assets/fonts/Poppins-Regular.woff2") format("woff2"),
url("assets/fonts/Poppins-Regular.ttf") format("truetype"); url("assets/fonts/Poppins-Regular.ttf") format("truetype");
font-weight: normal; font-weight: normal;
@ -90,7 +92,6 @@
--color-gray-50: 250 250 250; --color-gray-50: 250 250 250;
--color-gray-75: 240 240 240; --color-gray-75: 240 240 240;
--color-gray-100: 235 235 235; --color-gray-100: 235 235 235;
;
--color-gray-200: 214 214 214; --color-gray-200: 214 214 214;
--color-gray-300: 191 191 191; --color-gray-300: 191 191 191;
--color-gray-400: 166 166 166; --color-gray-400: 166 166 166;
@ -120,7 +121,7 @@
.separate::after, .separate::after,
.separate::before { .separate::before {
content: ''; content: "";
@apply border-b border-gray-300 flex-1; @apply border-b border-gray-300 flex-1;
} }
@ -131,4 +132,4 @@
.separate:not(:empty)::before { .separate:not(:empty)::before {
@apply mr-2; @apply mr-2;
} }
} }