Web: Components: refactoring stories, add public/images to components for storybook
This commit is contained in:
Artem Tarasov
parent
2ba54c3bdb
commit
c8d614a3ba
@ -2,7 +2,7 @@ module.exports = {
|
||||
stories: [
|
||||
"../backdrop/*.stories.@(js|jsx|ts|tsx)",
|
||||
"../button/*.stories.@(js|jsx|ts|tsx)",
|
||||
"../avatar/*.stories.@(js|jsx|ts|tsx)",
|
||||
"../avatar/*.stories.@(js)",
|
||||
"../badge/*.stories.@(js|jsx|ts|tsx)",
|
||||
"../box/*.stories.@(js|jsx|ts|tsx)",
|
||||
"../avatar-editor/*.stories.@(js|jsx|ts|tsx)",
|
||||
@ -15,11 +15,16 @@ module.exports = {
|
||||
"../drag-and-drop/*.stories.@(js|mdx)",
|
||||
"../drop-down/*.stories.@(js|mdx)",
|
||||
"../drop-down-item/*.stories.@(js|mdx)",
|
||||
"../email-input/*.stories.@(js|mdx)",
|
||||
"../email-input/*.stories.@(js)",
|
||||
"../email-input/*.stories.@(mdx)",
|
||||
"../empty-screen-container/*.stories.@(js|mdx)",
|
||||
"../field-container/*.stories.@(js|mdx)",
|
||||
"../file-input/*.stories.@(js|mdx)",
|
||||
"../grid/*.stories.@(js|mdx)",
|
||||
"../group-button/*.stories.@(js|mdx)",
|
||||
"../group-buttons-menu/*.stories.@(js|mdx)",
|
||||
"../heading/*.stories.@(js|mdx)",
|
||||
"../help-button/*.stories.@(js|mdx)",
|
||||
],
|
||||
addons: [
|
||||
"@storybook/addon-links",
|
||||
@ -27,5 +32,6 @@ module.exports = {
|
||||
"@storybook/addon-essentials",
|
||||
"@storybook/addon-actions",
|
||||
"@storybook/addon-controls",
|
||||
"@storybook/addon-viewport",
|
||||
],
|
||||
};
|
||||
|
||||
@ -1,6 +1,11 @@
|
||||
import { MINIMAL_VIEWPORTS } from "@storybook/addon-viewport";
|
||||
|
||||
export const parameters = {
|
||||
actions: { argTypesRegex: "^on[A-Z].*" },
|
||||
controls: { expanded: true },
|
||||
viewport: {
|
||||
viewports: MINIMAL_VIEWPORTS,
|
||||
},
|
||||
};
|
||||
|
||||
export const globalTypes = {
|
||||
|
||||
@ -1,48 +1,11 @@
|
||||
import React from "react";
|
||||
import AvatarEditor from "./";
|
||||
import AvatarEditorComponent from "./";
|
||||
import Avatar from "../avatar";
|
||||
|
||||
export default {
|
||||
title: "Components/AvatarEditor",
|
||||
component: AvatarEditor,
|
||||
component: AvatarEditorComponent,
|
||||
argTypes: {
|
||||
visible: { description: "Display avatar editor" },
|
||||
image: { description: "Display avatar editor" },
|
||||
accept: { description: "Accepted file types" },
|
||||
displayType: { description: "Display type" },
|
||||
useModalDialog: {
|
||||
description: "Use for the view of the modal dialog or not",
|
||||
},
|
||||
selectNewPhotoLabel: {
|
||||
description: "Translation string for file selection",
|
||||
},
|
||||
orDropFileHereLabel: {
|
||||
description:
|
||||
"Translation string for file dropping (concat with selectNewPhotoLabel prop)",
|
||||
},
|
||||
headerLabel: { description: "Translation string for title" },
|
||||
saveButtonLabel: { description: "Translation string for save button" },
|
||||
saveButtonLoading: {
|
||||
description: "Tells when the button should show loader icon",
|
||||
},
|
||||
cancelButtonLabel: { description: "Translation string for cancel button" },
|
||||
maxSizeFileError: { description: "Translation string for size warning" },
|
||||
unknownTypeError: {
|
||||
description: "Translation string for file type warning",
|
||||
},
|
||||
onLoadFileError: {
|
||||
description: "Translation string for load file warning",
|
||||
},
|
||||
unknownError: { description: "Translation string for warning" },
|
||||
maxSize: { description: "Max size of image" },
|
||||
onSave: { description: "Save event" },
|
||||
onClose: { description: "Closing event " },
|
||||
onDeleteImage: { description: "Image deletion event" },
|
||||
onLoadFile: { description: "Image upload event" },
|
||||
onImageChange: { description: "Image change event" },
|
||||
className: { description: "Accepts class" },
|
||||
id: { description: "Accepts id" },
|
||||
style: { description: "Accepts css style" },
|
||||
openEditor: { action: "onOpen", table: { disable: true } },
|
||||
closeEditor: { action: "onClose", table: { disable: true } },
|
||||
onSave: { action: "onSave", table: { disable: true } },
|
||||
@ -55,33 +18,11 @@ export default {
|
||||
description: {
|
||||
component: "Used to display user avatar editor on page.",
|
||||
},
|
||||
source: {
|
||||
code: `
|
||||
import AvatarEditor from "@appserver/components/avatar-editor";
|
||||
|
||||
<AvatarEditor
|
||||
visible={true}
|
||||
onClose={() => {}}
|
||||
onSave={() => {})}
|
||||
onDeleteImage={() => {})}
|
||||
onImageChange={() => {})}
|
||||
onLoadFile={() => {}}
|
||||
headerLabel="Edit Photo"
|
||||
selectNewPhotoLabel="Select new photo"
|
||||
orDropFileHereLabel="or drop file here"
|
||||
saveButtonLabel="Save"
|
||||
maxSizeFileError="Maximum file size exceeded"
|
||||
unknownTypeError="Unknown image file type"
|
||||
unknownError="Error"
|
||||
displayType="auto"
|
||||
/>
|
||||
`,
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
class Wrapper extends React.Component {
|
||||
class AvatarEditor extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
@ -145,7 +86,7 @@ class Wrapper extends React.Component {
|
||||
editAction={this.openEditor}
|
||||
/>
|
||||
{this.props.children}
|
||||
<AvatarEditor
|
||||
<AvatarEditorComponent
|
||||
{...this.props}
|
||||
visible={this.state.isOpen || this.props.visible}
|
||||
onClose={this.onClose}
|
||||
@ -165,6 +106,6 @@ class Wrapper extends React.Component {
|
||||
}
|
||||
}
|
||||
const Template = (args) => {
|
||||
return <Wrapper {...args} />;
|
||||
return <AvatarEditor {...args} />;
|
||||
};
|
||||
export const Default = Template.bind({});
|
||||
|
||||
@ -223,30 +223,53 @@ class AvatarEditor extends React.Component {
|
||||
}
|
||||
|
||||
AvatarEditor.propTypes = {
|
||||
/** Display avatar editor */
|
||||
visible: PropTypes.bool,
|
||||
/** Translation string for title */
|
||||
headerLabel: PropTypes.string,
|
||||
/** Translation string for file selection */
|
||||
selectNewPhotoLabel: PropTypes.string,
|
||||
/** Translation string for file dropping (concat with selectNewPhotoLabel prop) */
|
||||
orDropFileHereLabel: PropTypes.string,
|
||||
|
||||
/** Translation string for save button */
|
||||
saveButtonLabel: PropTypes.string,
|
||||
/** Translation string for cancel button */
|
||||
cancelButtonLabel: PropTypes.string,
|
||||
/** Tells when the button should show loader icon */
|
||||
saveButtonLoading: PropTypes.bool,
|
||||
/** Translation string for size warning */
|
||||
maxSizeFileError: PropTypes.string,
|
||||
/** Display avatar editor */
|
||||
image: PropTypes.string,
|
||||
/** Max size of image */
|
||||
maxSize: PropTypes.number,
|
||||
/** Accepted file types */
|
||||
accept: PropTypes.arrayOf(PropTypes.string),
|
||||
/** Save event */
|
||||
onSave: PropTypes.func,
|
||||
/** Closing event */
|
||||
onClose: PropTypes.func,
|
||||
/** Image deletion event */
|
||||
onDeleteImage: PropTypes.func,
|
||||
/** Image upload event */
|
||||
onLoadFile: PropTypes.func,
|
||||
/** Image change event */
|
||||
onImageChange: PropTypes.func,
|
||||
/** Translation string for load file warning */
|
||||
onLoadFileError: PropTypes.func,
|
||||
/** Translation string for file type warning */
|
||||
unknownTypeError: PropTypes.string,
|
||||
/** Translation string for warning */
|
||||
unknownError: PropTypes.string,
|
||||
/** Display type */
|
||||
displayType: PropTypes.oneOf(["auto", "modal", "aside"]),
|
||||
/** Accepts class" */
|
||||
className: PropTypes.string,
|
||||
/** Accepts id */
|
||||
id: PropTypes.string,
|
||||
/** Accepts css style */
|
||||
style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
|
||||
/** Use for the view of the modal dialog or not */
|
||||
useModalDialog: PropTypes.bool,
|
||||
};
|
||||
|
||||
|
||||
@ -6,21 +6,8 @@ import Button from "../button";
|
||||
export default {
|
||||
title: "Components/Backdrop",
|
||||
component: Backdrop,
|
||||
subcomponents: { Button },
|
||||
argTypes: {
|
||||
visible: {
|
||||
description: "Display or not",
|
||||
},
|
||||
zIndex: {
|
||||
description: "CSS z-index",
|
||||
},
|
||||
className: { description: "Accepts class" },
|
||||
id: { description: "Accepts id" },
|
||||
style: { description: "Accepts CSS style" },
|
||||
withBackground: {
|
||||
description:
|
||||
"The background is not displayed if the viewport width is less than 1024, set it to true for display",
|
||||
},
|
||||
isAside: { description: "Must be true if used with Aside component" },
|
||||
onClick: { action: "On Hide", table: { disable: true } },
|
||||
},
|
||||
parameters: {
|
||||
@ -28,12 +15,6 @@ export default {
|
||||
description: {
|
||||
component: "Backdrop for displaying modal dialogs or other components",
|
||||
},
|
||||
source: {
|
||||
code: `
|
||||
import Backdrop from "@appserver/components/backdrop";
|
||||
|
||||
<Backdrop visible={true} zIndex={200}/>`,
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
@ -99,12 +99,20 @@ class Backdrop extends React.Component {
|
||||
}
|
||||
|
||||
Backdrop.propTypes = {
|
||||
/** Display or not */
|
||||
visible: PropTypes.bool,
|
||||
/** CSS z-index */
|
||||
zIndex: PropTypes.number,
|
||||
/** Accepts class */
|
||||
className: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
|
||||
/** Accepts id */
|
||||
id: PropTypes.string,
|
||||
/** Accepts css style */
|
||||
style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
|
||||
/** The background is not displayed if the viewport width is less than 1024,
|
||||
* set it to true for display */
|
||||
withBackground: PropTypes.bool,
|
||||
/** Must be true if used with Aside component */
|
||||
isAside: PropTypes.bool,
|
||||
};
|
||||
|
||||
|
||||
@ -10,39 +10,8 @@ export default {
|
||||
description: {
|
||||
component: "Used for buttons, numbers or status markers next to icons.",
|
||||
},
|
||||
source: {
|
||||
code: `
|
||||
import Badge from "@appserver/components/badge";
|
||||
|
||||
<Badge
|
||||
label="10"
|
||||
backgroundColor="#ED7309"
|
||||
color="#FFFFFF"
|
||||
fontSize="11px"
|
||||
fontWeight={800}
|
||||
borderRadius="11px"
|
||||
padding="0 5px"
|
||||
maxWidth="50px"
|
||||
onClick={() => {}}
|
||||
/>
|
||||
`,
|
||||
},
|
||||
},
|
||||
},
|
||||
argTypes: {
|
||||
backgroundColor: { control: "color", description: "CSS background-color" },
|
||||
color: { control: "color", description: "CSS color" },
|
||||
label: { control: "text", description: "Value" },
|
||||
borderRadius: { description: "CSS border-radius" },
|
||||
className: { description: "Accepts class" },
|
||||
fontSize: { description: "CSS font-size" },
|
||||
fontWeight: { description: "CSS font-weight" },
|
||||
id: { description: "Accepts id" },
|
||||
maxWidth: { description: "CSS max-width" },
|
||||
onClick: { description: "onClick event" },
|
||||
padding: { description: "CSS padding" },
|
||||
style: { description: "Accepts css style" },
|
||||
},
|
||||
};
|
||||
|
||||
const Template = (args) => <Badge {...args} />;
|
||||
|
||||
@ -42,17 +42,29 @@ const Badge = (props) => {
|
||||
};
|
||||
|
||||
Badge.propTypes = {
|
||||
/** Value */
|
||||
label: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
||||
/** CSS background-color */
|
||||
backgroundColor: PropTypes.string,
|
||||
/** CSS color */
|
||||
color: PropTypes.string,
|
||||
/** CSS font-size */
|
||||
fontSize: PropTypes.string,
|
||||
/** CSS font-weight */
|
||||
fontWeight: PropTypes.number,
|
||||
/** CSS border-radius */
|
||||
borderRadius: PropTypes.string,
|
||||
/** CSS padding */
|
||||
padding: PropTypes.string,
|
||||
/** CSS max-width */
|
||||
maxWidth: PropTypes.string,
|
||||
/** onClick event */
|
||||
onClick: PropTypes.func,
|
||||
/** Accepts class */
|
||||
className: PropTypes.string,
|
||||
/** Accepts id */
|
||||
id: PropTypes.string,
|
||||
/** Accepts css style */
|
||||
style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
|
||||
};
|
||||
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
import React from "react";
|
||||
|
||||
//import { Box } from "./";
|
||||
import Box from "./";
|
||||
|
||||
const containerProps = {
|
||||
|
||||
@ -6,53 +6,13 @@ import Button from "./";
|
||||
export default {
|
||||
title: "Components/Button",
|
||||
component: Button,
|
||||
argTypes: {
|
||||
label: { description: "Button text" },
|
||||
size: { description: "Size of button" },
|
||||
primary: { description: "Tells when the button should be primary" },
|
||||
scale: { description: "Scale width of button to 100%" },
|
||||
isClicked: {
|
||||
description: "Tells when the button should present a clicked state",
|
||||
},
|
||||
isDisabled: {
|
||||
description: "Tells when the button should present a disabled state",
|
||||
},
|
||||
isHovered: {
|
||||
description: "Tells when the button should present a hovered state",
|
||||
},
|
||||
isLoading: { description: "Tells when the button should show loader icon" },
|
||||
disableHover: { description: "Disable hover effect" },
|
||||
icon: { description: "Icon node element" },
|
||||
onClick: { description: "What the button will trigger when clicked " },
|
||||
className: { description: "Accepts class" },
|
||||
id: { description: "Accepts id" },
|
||||
style: { description: "Accepts CSS style" },
|
||||
tabIndex: { description: "Button tab index" },
|
||||
minwidth: { description: "Sets the nim width of the button" },
|
||||
},
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
component: "Button is used for a action on a page.",
|
||||
},
|
||||
source: {
|
||||
code: `
|
||||
import Button from "@appserver/components/button";
|
||||
|
||||
<Button
|
||||
size="base"
|
||||
isDisabled={false}
|
||||
onClick={() => alert("Button clicked")}
|
||||
label="OK"
|
||||
/>
|
||||
`
|
||||
}
|
||||
},
|
||||
},
|
||||
args: {
|
||||
size: "base",
|
||||
label: "Base Button",
|
||||
},
|
||||
};
|
||||
|
||||
const sizes = ["base", "medium", "big", "large"];
|
||||
@ -263,6 +223,10 @@ const HoveredTemplate = (args) => {
|
||||
};
|
||||
|
||||
export const Default = Template.bind({});
|
||||
Default.args = {
|
||||
size: "base",
|
||||
label: "Base Button",
|
||||
};
|
||||
export const PrimaryButtons = PrimaryTemplate.bind({});
|
||||
export const SecondaryButtons = SecondaryTemplate.bind({});
|
||||
export const WithIconButtons = WithIconTemplate.bind({});
|
||||
|
||||
@ -59,25 +59,37 @@ const Button = React.forwardRef((props, ref) => {
|
||||
});
|
||||
|
||||
Button.propTypes = {
|
||||
/** Button text */
|
||||
label: PropTypes.string,
|
||||
/** Tells when the button should be primary */
|
||||
primary: PropTypes.bool,
|
||||
/** Size of button */
|
||||
size: PropTypes.oneOf(["base", "medium", "big", "large"]),
|
||||
/** Scale width of button to 100% */
|
||||
scale: PropTypes.bool,
|
||||
/** Icon node element */
|
||||
icon: PropTypes.node,
|
||||
|
||||
/** Button tab index */
|
||||
tabIndex: PropTypes.number,
|
||||
/** Accepts class */
|
||||
className: PropTypes.string,
|
||||
/** Accepts id */
|
||||
id: PropTypes.string,
|
||||
/** Accepts CSS style */
|
||||
style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
|
||||
|
||||
/** Tells when the button should present a hovered state */
|
||||
isHovered: PropTypes.bool,
|
||||
/** Disable hover effect */
|
||||
disableHover: PropTypes.bool,
|
||||
/** Tells when the button should present a clicked state */
|
||||
isClicked: PropTypes.bool,
|
||||
/** Tells when the button should present a disabled state */
|
||||
isDisabled: PropTypes.bool,
|
||||
/** Tells when the button should show loader icon */
|
||||
isLoading: PropTypes.bool,
|
||||
|
||||
/** Sets the nim width of the button */
|
||||
minwidth: PropTypes.string,
|
||||
|
||||
/** What the button will trigger when clicked */
|
||||
onClick: PropTypes.func,
|
||||
};
|
||||
|
||||
|
||||
@ -5,23 +5,12 @@ export default {
|
||||
title: "Components/Calendar",
|
||||
component: Calendar,
|
||||
argTypes: {
|
||||
themeColor: { control: "color", description: "Color of the selected day" },
|
||||
maxDate: {
|
||||
control: "date",
|
||||
description: "Maximum date that the user can select",
|
||||
},
|
||||
selectedDate: { control: "date", description: "Selected date value" },
|
||||
openToDate: {
|
||||
control: "date",
|
||||
description:
|
||||
"The beginning of a period that shall be displayed by default",
|
||||
},
|
||||
minDate: {
|
||||
control: "date",
|
||||
description: "Minimum date that the user can select.",
|
||||
},
|
||||
themeColor: { control: "color" },
|
||||
selectedDate: { control: "date" },
|
||||
openToDate: { control: "date" },
|
||||
maxDate: { control: "date" },
|
||||
minDate: { control: "date" },
|
||||
locale: {
|
||||
description: "Browser locale",
|
||||
control: {
|
||||
type: "select",
|
||||
options: [
|
||||
@ -53,38 +42,13 @@ export default {
|
||||
],
|
||||
},
|
||||
},
|
||||
onChange: {
|
||||
description: "Function called when the user select a day",
|
||||
action: "onChange",
|
||||
},
|
||||
size: { description: "Calendar size" },
|
||||
className: { description: "Accepts class" },
|
||||
id: { description: "Accepts id" },
|
||||
style: { description: "Accepts css style" },
|
||||
onChange: { action: "onChange" },
|
||||
},
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
component: "Used to display custom calendar",
|
||||
},
|
||||
source: {
|
||||
code: `
|
||||
import Calendar from "@appserver/components/calendar";
|
||||
|
||||
<Calendar
|
||||
onChange={(date) => {
|
||||
console.log("Selected date:", date);
|
||||
}}
|
||||
disabled={false}
|
||||
themeColor="#ED7309"
|
||||
selectedDate={new Date()}
|
||||
openToDate={new Date()}
|
||||
minDate={new Date("1970/01/01")}
|
||||
maxDate={new Date("3000/01/01")}
|
||||
locale="ru"
|
||||
/>
|
||||
`,
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
@ -530,17 +530,28 @@ class Calendar extends Component {
|
||||
}
|
||||
|
||||
Calendar.propTypes = {
|
||||
onChange: PropTypes.func,
|
||||
/** Color of the selected day */
|
||||
themeColor: PropTypes.string,
|
||||
/** Selected date value */
|
||||
selectedDate: PropTypes.instanceOf(Date),
|
||||
/** The beginning of a period that shall be displayed by default */
|
||||
openToDate: PropTypes.instanceOf(Date),
|
||||
/** Minimum date that the user can select. */
|
||||
minDate: PropTypes.instanceOf(Date),
|
||||
/** Maximum date that the user can select */
|
||||
maxDate: PropTypes.instanceOf(Date),
|
||||
/** Browser locale */
|
||||
locale: PropTypes.string,
|
||||
/** Calendar size */
|
||||
size: PropTypes.oneOf(["base", "big"]),
|
||||
/** Accepts class */
|
||||
className: PropTypes.string,
|
||||
/** Accepts id */
|
||||
id: PropTypes.string,
|
||||
/** Accepts css style */
|
||||
style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
|
||||
/** Function called when the user select a day */
|
||||
onChange: PropTypes.func,
|
||||
};
|
||||
|
||||
Calendar.defaultProps = {
|
||||
|
||||
@ -1,56 +1,23 @@
|
||||
import React from "react";
|
||||
|
||||
import Checkbox from "./";
|
||||
import CheckboxComponent from "./";
|
||||
|
||||
export default {
|
||||
title: "Components/Checkbox",
|
||||
component: Checkbox,
|
||||
component: CheckboxComponent,
|
||||
parameters: {
|
||||
docs: {
|
||||
description: { component: "Custom checkbox input" },
|
||||
source: {
|
||||
code: `
|
||||
import Checkbox from "@appserver/components/checkbox";
|
||||
|
||||
<Checkbox
|
||||
id="id"
|
||||
name="name"
|
||||
value="value"
|
||||
label="label"
|
||||
isChecked={false}
|
||||
isIndeterminate={false}
|
||||
isDisabled={false}
|
||||
onChange={() => {}}
|
||||
/>
|
||||
`,
|
||||
},
|
||||
},
|
||||
},
|
||||
argTypes: {
|
||||
className: { description: "Accepts class" },
|
||||
id: { description: "Used as HTML id property" },
|
||||
isChecked: {
|
||||
description: "The checked property sets the checked state of a checkbox",
|
||||
},
|
||||
isDisabled: { description: "Disables the Checkbox input " },
|
||||
isIndeterminate: {
|
||||
description:
|
||||
"If true, this state is shown as a rectangle in the checkbox",
|
||||
},
|
||||
label: { description: "Label of the input" },
|
||||
name: { description: "Used as HTML `name` property" },
|
||||
onChange: {
|
||||
description: "Will be triggered whenever an CheckboxInput is clicked ",
|
||||
action: "onChange",
|
||||
},
|
||||
style: { description: "Accepts css style " },
|
||||
value: { description: "Value of the input" },
|
||||
title: { description: "Title " },
|
||||
truncate: { description: "Disables word wrapping" },
|
||||
},
|
||||
};
|
||||
|
||||
class Wrapper extends React.Component {
|
||||
class Checkbox extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
@ -66,7 +33,7 @@ class Wrapper extends React.Component {
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Checkbox
|
||||
<CheckboxComponent
|
||||
{...this.props}
|
||||
isChecked={this.props.isChecked || this.state.isChecked}
|
||||
onChange={this.onChange}
|
||||
@ -75,7 +42,7 @@ class Wrapper extends React.Component {
|
||||
}
|
||||
}
|
||||
const Template = (args) => {
|
||||
return <Wrapper {...args} />;
|
||||
return <Checkbox {...args} />;
|
||||
};
|
||||
|
||||
const AllCheckboxesTemplate = (args) => {
|
||||
|
||||
@ -3,9 +3,9 @@ import PropTypes from "prop-types";
|
||||
|
||||
import Text from "../text";
|
||||
import { StyledLabel, HiddenInput } from "./styled-checkbox";
|
||||
import CheckboxIndeterminateIcon from "../../../public/images/checkbox.indeterminate.react.svg";
|
||||
import CheckboxCheckedIcon from "../../../public/images/checkbox.checked.react.svg";
|
||||
import CheckboxIcon from "../../../public/images/checkbox.react.svg";
|
||||
import CheckboxIndeterminateIcon from "./svg/checkbox.indeterminate.react.svg";
|
||||
import CheckboxCheckedIcon from "./svg/checkbox.checked.react.svg";
|
||||
import CheckboxIcon from "./svg/checkbox.react.svg";
|
||||
|
||||
// eslint-disable-next-line react/prop-types
|
||||
const RenderCheckboxIcon = ({ isChecked, isIndeterminate }) => {
|
||||
@ -108,19 +108,29 @@ class Checkbox extends React.Component {
|
||||
}
|
||||
|
||||
Checkbox.propTypes = {
|
||||
/** Used as HTML id property */
|
||||
id: PropTypes.string,
|
||||
/** Used as HTML `name` property */
|
||||
name: PropTypes.string,
|
||||
/** Value of the input */
|
||||
value: PropTypes.string,
|
||||
/** Label of the input */
|
||||
label: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
|
||||
|
||||
/** The checked property sets the checked state of a checkbox */
|
||||
isChecked: PropTypes.bool,
|
||||
/** If true, this state is shown as a rectangle in the checkbox */
|
||||
isIndeterminate: PropTypes.bool,
|
||||
/** Disables the Checkbox input */
|
||||
isDisabled: PropTypes.bool,
|
||||
|
||||
/** Will be triggered whenever an CheckboxInput is clicked */
|
||||
onChange: PropTypes.func,
|
||||
/** Accepts class */
|
||||
className: PropTypes.string,
|
||||
/** Accepts css style */
|
||||
style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
|
||||
/** Title */
|
||||
title: PropTypes.string,
|
||||
/** Disables word wrapping */
|
||||
truncate: PropTypes.bool,
|
||||
};
|
||||
|
||||
|
||||
@ -0,0 +1,5 @@
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="0.5" y="0.5" width="15" height="15" rx="2.5" fill="white" stroke="#D0D5DA" stroke-opacity="1"/>
|
||||
<rect x="0.5" y="0.5" width="15" height="15" rx="2.5" fill="white" stroke="#D0D5DA" stroke-opacity="1" stroke-width="8%" />
|
||||
<path d="M7.97926 11.6351C7.48054 12.1216 6.67132 12.1216 6.17284 11.6351L3.37404 8.90491C2.87532 8.41864 2.87532 7.62926 3.37404 7.14299C3.87252 6.65649 4.68174 6.65649 5.18046 7.14299L6.84799 8.76943C6.97387 8.89199 7.17822 8.89199 7.30435 8.76943L11.8195 4.36487C12.318 3.87838 13.1272 3.87838 13.626 4.36487C13.8655 4.5985 14 4.91547 14 5.24583C14 5.57619 13.8655 5.89317 13.626 6.12679L7.97926 11.6351Z" fill="#333333"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 758 B |
@ -0,0 +1,5 @@
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="0.5" y="0.5" width="15" height="15" rx="2.5" fill="white" stroke="#D0D5DA" stroke-opacity="1"/>
|
||||
<rect x="0.5" y="0.5" width="15" height="15" rx="2.5" fill="white" stroke="#D0D5DA" stroke-opacity="1" stroke-width="8%"/>
|
||||
<rect x="3" y="3" width="10" height="10" rx="2" fill="#333333"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 395 B |
@ -0,0 +1,4 @@
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="0.5" y="0.5" width="15" height="15" rx="2.5" fill="white" stroke="#D0D5DA" stroke-opacity="1" />
|
||||
<rect x="0.5" y="0.5" width="15" height="15" rx="2.5" fill="white" stroke="#D0D5DA" stroke-opacity="1" stroke-width="8%" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 334 B |
@ -5,148 +5,6 @@ import RadioButton from "../radio-button";
|
||||
import DropDownItem from "../drop-down-item";
|
||||
import NavLogoIcon from "../../../public/images/nav.logo.opened.react.svg";
|
||||
|
||||
export default {
|
||||
title: "Components/ComboBox",
|
||||
component: ComboBox,
|
||||
decorators: [
|
||||
(Story) => (
|
||||
<div style={{ height: "230px" }}>
|
||||
<Story />
|
||||
</div>
|
||||
),
|
||||
],
|
||||
|
||||
argTypes: {
|
||||
advancedOptions: {
|
||||
description: "If you need display options not basic options",
|
||||
},
|
||||
className: { description: "Accepts class" },
|
||||
displayType: { description: "Component Display Type" },
|
||||
dropDownMaxHeight: { description: "Height of Dropdown" },
|
||||
id: { description: "Accepts id" },
|
||||
isDisabled: { description: "Indicates that component is disabled" },
|
||||
noBorder: {
|
||||
description: "Indicates that component is displayed without borders",
|
||||
},
|
||||
onSelect: {
|
||||
description: "Will be triggered whenever an ComboBox is selected option",
|
||||
action: "onSelect",
|
||||
},
|
||||
options: { description: "Combo box options" },
|
||||
scaledOptions: {
|
||||
description:
|
||||
"Indicates that component`s options is scaled by ComboButton",
|
||||
},
|
||||
scaled: { description: "Indicates that component is scaled by parent" },
|
||||
selectedOption: { description: "Selected option" },
|
||||
size: { description: "Select component width, one of default" },
|
||||
style: { description: "Accepts css style" },
|
||||
toggleAction: {
|
||||
description:
|
||||
"The event will be raised when using `displayType: toggle` when clicking on a component",
|
||||
},
|
||||
showDisabledItems: {
|
||||
description: "Display disabled items or not when displayType !== toggle ",
|
||||
},
|
||||
children: { description: "Children element" },
|
||||
directionX: { description: "X direction selection" },
|
||||
directionY: { description: "Y direction selection" },
|
||||
opened: { description: "Tells when a component is open" },
|
||||
textOverflow: { description: "Accepts css text-overflow" },
|
||||
disableIconClick: { description: "Вisables clicking on the icon" },
|
||||
},
|
||||
parameters: {
|
||||
docs: {
|
||||
description: { component: "Custom combo box input" },
|
||||
source: {
|
||||
code: `
|
||||
### Usage
|
||||
|
||||
import ComboBox from "@appserver/components/combobox";
|
||||
import NavLogoIcon from "../../../../../public/images/nav.logo.react.svg";
|
||||
|
||||
const options = [
|
||||
{
|
||||
key: 1,
|
||||
icon: "static/images/catalog.employee.react.svg", // optional item
|
||||
label: "Option 1",
|
||||
disabled: false, // optional item
|
||||
onClick: clickFunction, // optional item
|
||||
},
|
||||
];
|
||||
|
||||
#### Options have options:
|
||||
|
||||
- key - Item key, may be a string or a number
|
||||
- label - Display text
|
||||
- icon - Optional name of icon that will be displayed before label
|
||||
- disabled - Make option disabled
|
||||
- onClick - On click function
|
||||
|
||||
ComboBox perceives all property's for positioning from DropDown!
|
||||
|
||||
If you need to display a custom list of options, you must use advancedOptions property. Like this:
|
||||
|
||||
const advancedOptions = (
|
||||
<Meta>
|
||||
<DropDownItem>
|
||||
<RadioButton value="asc" name="first" label="A-Z" isChecked={true} />
|
||||
</DropDownItem>
|
||||
<DropDownItem>
|
||||
<RadioButton value="desc" name="first" label="Z-A" />
|
||||
</DropDownItem>
|
||||
<DropDownItem isSeparator />
|
||||
<DropDownItem>
|
||||
<RadioButton value="first" name="second" label="First name" />
|
||||
</DropDownItem>
|
||||
<DropDownItem>
|
||||
<RadioButton
|
||||
value="last"
|
||||
name="second"
|
||||
label="Last name"
|
||||
isChecked={true}
|
||||
/>
|
||||
</DropDownItem>
|
||||
</Meta>
|
||||
);
|
||||
|
||||
<ComboBox
|
||||
options={[]} // An empty array will enable advancedOptions
|
||||
advancedOptions={advancedOptions}
|
||||
onSelect={(option) => console.log("Selected option", option)}
|
||||
selectedOption={{
|
||||
key: 0,
|
||||
label: "Select",
|
||||
}}
|
||||
isDisabled={false}
|
||||
scaled={false}
|
||||
size="content"
|
||||
directionX="right"
|
||||
>
|
||||
<NavLogoIcon size="medium" key="comboIcon" />
|
||||
</ComboBox>
|
||||
|
||||
To use Combobox as a toggle button, you must declare it according to the parameters:
|
||||
|
||||
<ComboBox
|
||||
options={[]} // Required to display correctly
|
||||
selectedOption={{
|
||||
key: 0,
|
||||
label: "Selected option",
|
||||
}}
|
||||
scaled={false}
|
||||
size="content"
|
||||
displayType="toggle"
|
||||
toggleAction={alert("action")}
|
||||
>
|
||||
<NavLogoIcon size="medium" key="comboIcon" />
|
||||
</ComboBox>
|
||||
`,
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const comboOptions = [
|
||||
{
|
||||
key: 1,
|
||||
@ -155,7 +13,7 @@ const comboOptions = [
|
||||
},
|
||||
{
|
||||
key: 2,
|
||||
icon: "CatalogGuestIcon",
|
||||
icon: "static/images/catalog.guest.react.svg",
|
||||
label: "Option 2",
|
||||
},
|
||||
{
|
||||
@ -207,68 +65,78 @@ const advancedOptions = (
|
||||
</>
|
||||
);
|
||||
|
||||
const Wrapper = (props) => (
|
||||
<div style={{ height: "220px" }}>{props.children}</div>
|
||||
);
|
||||
|
||||
const childrenItems = children.length > 0 ? children : null;
|
||||
|
||||
const Template = (args) => (
|
||||
<ComboBox
|
||||
{...args}
|
||||
options={[
|
||||
{ key: 1, label: "Option 1" },
|
||||
{ key: 2, label: "Option 2" },
|
||||
]}
|
||||
selectedOption={{
|
||||
key: 0,
|
||||
label: "Select",
|
||||
}}
|
||||
/>
|
||||
<Wrapper>
|
||||
<ComboBox
|
||||
{...args}
|
||||
options={[
|
||||
{ key: 1, label: "Option 1" },
|
||||
{ key: 2, label: "Option 2" },
|
||||
]}
|
||||
selectedOption={{
|
||||
key: 0,
|
||||
label: "Select",
|
||||
}}
|
||||
/>
|
||||
</Wrapper>
|
||||
);
|
||||
|
||||
const BaseOptionsTemplate = (args) => (
|
||||
<ComboBox
|
||||
{...args}
|
||||
options={comboOptions}
|
||||
onSelect={(option) => args.onSelect(option)}
|
||||
selectedOption={{
|
||||
key: 0,
|
||||
label: "Select",
|
||||
default: true,
|
||||
}}
|
||||
>
|
||||
{childrenItems}
|
||||
</ComboBox>
|
||||
<Wrapper>
|
||||
<ComboBox
|
||||
{...args}
|
||||
options={comboOptions}
|
||||
onSelect={(option) => args.onSelect(option)}
|
||||
selectedOption={{
|
||||
key: 0,
|
||||
label: "Select",
|
||||
default: true,
|
||||
}}
|
||||
>
|
||||
{childrenItems}
|
||||
</ComboBox>
|
||||
</Wrapper>
|
||||
);
|
||||
|
||||
const AdvancedOptionsTemplate = (args) => (
|
||||
<ComboBox
|
||||
{...args}
|
||||
options={[]}
|
||||
advancedOptions={advancedOptions}
|
||||
onSelect={(option) => args.onSelect(option)}
|
||||
selectedOption={{
|
||||
key: 0,
|
||||
label: "Select",
|
||||
default: true,
|
||||
}}
|
||||
>
|
||||
<NavLogoIcon size="medium" key="comboIcon" />
|
||||
</ComboBox>
|
||||
<Wrapper>
|
||||
<ComboBox
|
||||
{...args}
|
||||
options={[]}
|
||||
advancedOptions={advancedOptions}
|
||||
onSelect={(option) => args.onSelect(option)}
|
||||
selectedOption={{
|
||||
key: 0,
|
||||
label: "Select",
|
||||
default: true,
|
||||
}}
|
||||
>
|
||||
<NavLogoIcon size="medium" key="comboIcon" />
|
||||
</ComboBox>
|
||||
</Wrapper>
|
||||
);
|
||||
|
||||
export const Default = Template.bind({});
|
||||
Default.args = {
|
||||
export const basic = Template.bind({});
|
||||
basic.args = {
|
||||
opened: true,
|
||||
scaled: false
|
||||
scaled: false,
|
||||
};
|
||||
export const BaseOptions = BaseOptionsTemplate.bind({});
|
||||
BaseOptions.args = {
|
||||
export const baseOption = BaseOptionsTemplate.bind({});
|
||||
baseOption.args = {
|
||||
scaledOptions: false,
|
||||
scaled: false,
|
||||
noBorder: false,
|
||||
isDisabled: false,
|
||||
opened: true,
|
||||
};
|
||||
export const AdvancedOptions = AdvancedOptionsTemplate.bind({});
|
||||
AdvancedOptions.args = {
|
||||
export const advancedOption = AdvancedOptionsTemplate.bind({});
|
||||
advancedOption.args = {
|
||||
opened: true,
|
||||
isDisabled: false,
|
||||
scaled: false,
|
||||
|
||||
153
packages/asc-web-components/combobox/combobox.stories.mdx
Normal file
153
packages/asc-web-components/combobox/combobox.stories.mdx
Normal file
@ -0,0 +1,153 @@
|
||||
import { Meta, Story, ArgsTable, Canvas } from "@storybook/addon-docs/blocks";
|
||||
|
||||
import ComboBox from "./";
|
||||
import * as stories from "./combobox.stories.js";
|
||||
|
||||
<Meta
|
||||
title="Components/ComboBox"
|
||||
component={ComboBox}
|
||||
argTypes={{
|
||||
onSelect: {
|
||||
action: "onSelect",
|
||||
},
|
||||
selectedOption: { required: true },
|
||||
options: { required: true },
|
||||
}}
|
||||
/>
|
||||
|
||||
# ComboBox
|
||||
|
||||
Custom combo box input
|
||||
|
||||
<Canvas>
|
||||
<Story story={stories.basic} name="Default" />
|
||||
</Canvas>
|
||||
|
||||
### Properties
|
||||
|
||||
<ArgsTable story="Default" />
|
||||
|
||||
### Base options
|
||||
|
||||
<Canvas
|
||||
parameters={{
|
||||
source: {
|
||||
code: stories.baseOption,
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Story story={stories.baseOption} name="Base Option" />
|
||||
</Canvas>
|
||||
|
||||
### Advanced options
|
||||
|
||||
<Canvas>
|
||||
<Story story={stories.advancedOption} name="Advanced Options" />
|
||||
</Canvas>
|
||||
|
||||
```js
|
||||
import ComboBox from "@appserver/components/combobox";
|
||||
import NavLogoIcon from "../../../../../public/images/nav.logo.react.svg";
|
||||
```
|
||||
|
||||
```js
|
||||
const options = [
|
||||
{
|
||||
key: 1,
|
||||
icon: "static/images/catalog.employee.react.svg", // optional item
|
||||
label: "Option 1",
|
||||
disabled: false, // optional item
|
||||
onClick: clickFunction, // optional item
|
||||
},
|
||||
];
|
||||
```
|
||||
|
||||
```jsx
|
||||
<ComboBox
|
||||
options={options}
|
||||
isDisabled={false}
|
||||
selectedOption={{
|
||||
key: 0,
|
||||
label: "Select",
|
||||
}}
|
||||
dropDownMaxHeight={200}
|
||||
noBorder={false}
|
||||
scale={true}
|
||||
scaledOptions={true}
|
||||
size="content"
|
||||
onSelect={(option) => console.log("selected", option)}
|
||||
/>
|
||||
```
|
||||
|
||||
Options have options:
|
||||
|
||||
- key - Item key, may be a string or a number
|
||||
- label - Display text
|
||||
- icon - Optional name of icon that will be displayed before label
|
||||
- disabled - Make option disabled
|
||||
- onClick - On click function
|
||||
|
||||
ComboBox perceives all property`s for positioning from DropDown!
|
||||
|
||||
If you need to display a custom list of options, you must use advancedOptions property. Like this:
|
||||
|
||||
```js
|
||||
const advancedOptions = (
|
||||
<>
|
||||
<DropDownItem>
|
||||
<RadioButton value="asc" name="first" label="A-Z" isChecked={true} />
|
||||
</DropDownItem>
|
||||
<DropDownItem>
|
||||
<RadioButton value="desc" name="first" label="Z-A" />
|
||||
</DropDownItem>
|
||||
<DropDownItem isSeparator />
|
||||
<DropDownItem>
|
||||
<RadioButton value="first" name="second" label="First name" />
|
||||
</DropDownItem>
|
||||
<DropDownItem>
|
||||
<RadioButton
|
||||
value="last"
|
||||
name="second"
|
||||
label="Last name"
|
||||
isChecked={true}
|
||||
/>
|
||||
</DropDownItem>
|
||||
</>
|
||||
);
|
||||
```
|
||||
|
||||
```jsx
|
||||
<ComboBox
|
||||
options={[]} // An empty array will enable advancedOptions
|
||||
advancedOptions={advancedOptions}
|
||||
onSelect={(option) => console.log("Selected option", option)}
|
||||
selectedOption={{
|
||||
key: 0,
|
||||
label: "Select",
|
||||
}}
|
||||
isDisabled={false}
|
||||
scaled={false}
|
||||
size="content"
|
||||
directionX="right"
|
||||
>
|
||||
<NavLogoIcon size="medium" key="comboIcon" />
|
||||
</ComboBox>
|
||||
```
|
||||
|
||||
To use Combobox as a toggle button, you must declare it according to the parameters:
|
||||
|
||||
```jsx
|
||||
<ComboBox
|
||||
options={[]} // Required to display correctly
|
||||
selectedOption={{
|
||||
key: 0,
|
||||
label: "Selected option",
|
||||
}}
|
||||
scaled={false}
|
||||
size="content"
|
||||
displayType="toggle"
|
||||
toggleAction={alert("action")}
|
||||
>
|
||||
<NavLogoIcon size="medium" key="comboIcon" />
|
||||
</ComboBox>
|
||||
```
|
||||
@ -166,26 +166,49 @@ class ComboBox extends React.Component {
|
||||
}
|
||||
|
||||
ComboBox.propTypes = {
|
||||
/** If you need display options not basic options */
|
||||
advancedOptions: PropTypes.element,
|
||||
/** Children elements */
|
||||
children: PropTypes.any,
|
||||
/** Accepts class */
|
||||
className: PropTypes.string,
|
||||
/** X direction selection */
|
||||
directionX: PropTypes.oneOf(["left", "right"]),
|
||||
/** Y direction selection */
|
||||
directionY: PropTypes.oneOf(["bottom", "top"]),
|
||||
/** Component Display Type */
|
||||
displayType: PropTypes.oneOf(["default", "toggle"]),
|
||||
/** Height of Dropdown */
|
||||
dropDownMaxHeight: PropTypes.number,
|
||||
/** Display disabled items or not when displayType !== toggle */
|
||||
showDisabledItems: PropTypes.bool,
|
||||
/** Accepts id */
|
||||
id: PropTypes.string,
|
||||
/** Indicates that component is disabled */
|
||||
isDisabled: PropTypes.bool,
|
||||
/** Indicates that component is displayed without borders */
|
||||
noBorder: PropTypes.bool,
|
||||
/** Will be triggered whenever an ComboBox is selected option */
|
||||
onSelect: PropTypes.func,
|
||||
/** Tells when a component is open */
|
||||
opened: PropTypes.bool,
|
||||
/** Combo box options */
|
||||
options: PropTypes.array.isRequired,
|
||||
/** Indicates that component is scaled by parent */
|
||||
scaled: PropTypes.bool,
|
||||
/** Indicates that component`s options is scaled by ComboButton */
|
||||
scaledOptions: PropTypes.bool,
|
||||
/** Selected option */
|
||||
selectedOption: PropTypes.object.isRequired,
|
||||
/** Select component width, one of default */
|
||||
size: PropTypes.oneOf(["base", "middle", "big", "huge", "content"]),
|
||||
/** Accepts css style */
|
||||
style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
|
||||
/** The event will be raised when using `displayType: toggle` when clicking on a component */
|
||||
toggleAction: PropTypes.func,
|
||||
/** Accepts css text-overflow */
|
||||
textOverflow: PropTypes.bool,
|
||||
/** Disables clicking on the icon */
|
||||
disableIconClick: PropTypes.bool,
|
||||
};
|
||||
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import React from "react";
|
||||
import React, { useState } from "react";
|
||||
|
||||
import ContextMenuButton from "./";
|
||||
|
||||
@ -6,88 +6,28 @@ export default {
|
||||
title: "Components/ContextMenuButton",
|
||||
component: ContextMenuButton,
|
||||
argTypes: {
|
||||
className: { description: "Accepts class" },
|
||||
clickColor: {
|
||||
description: "Specifies the icon click color",
|
||||
control: "color",
|
||||
},
|
||||
color: { description: "Specifies the icon color", control: "color" },
|
||||
data: { description: "Array of options for display " },
|
||||
directionX: {
|
||||
description: "What the button will trigger when mouse out of button",
|
||||
},
|
||||
getData: { description: "Function for converting to inner data " },
|
||||
hoverColor: {
|
||||
description: "Specifies the icon hover color",
|
||||
control: "color",
|
||||
},
|
||||
iconClickName: { description: "Specifies the icon click name" },
|
||||
iconHoverName: { description: "Specifies the icon hover name" },
|
||||
iconName: { description: "Specifies the icon name" },
|
||||
id: { description: "Accepts id" },
|
||||
isDisabled: {
|
||||
description: "Tells when the button should present a disabled state",
|
||||
},
|
||||
onMouseEnter: {
|
||||
description: "What the button will trigger when mouse hovered",
|
||||
action: "onMouseEnter",
|
||||
},
|
||||
onMouseLeave: {
|
||||
description: "What the button will trigger when mouse leave",
|
||||
action: "onMouseLeave",
|
||||
},
|
||||
onMouseOut: {
|
||||
description: "What the button will trigger when mouse out of button",
|
||||
action: "onMouseOut",
|
||||
},
|
||||
onMouseOver: {
|
||||
description: "What the button will trigger when mouse over button",
|
||||
action: "onMouseOver",
|
||||
},
|
||||
opened: {
|
||||
description: "Tells when the button should present a opened state",
|
||||
},
|
||||
size: { description: "Specifies the icon size" },
|
||||
style: { description: "Accepts css style" },
|
||||
title: { description: "Specifies the icon title" },
|
||||
iconOpenName: { description: "Specifies the icon open name" },
|
||||
directionY: { description: "Direction Y" },
|
||||
columnCount: { description: "Set the number of columns" },
|
||||
displayType: { description: "Set the display type" },
|
||||
clickColor: { control: "color" },
|
||||
color: { control: "color" },
|
||||
getData: { required: true },
|
||||
hoverColor: { control: "color" },
|
||||
onClickLabel: { action: "onClickLabel", table: { disable: true } },
|
||||
onMouseLeave: { action: "onMouseLeave" },
|
||||
onMouseEnter: { action: "onMouseEnter" },
|
||||
onMouseOver: { action: "onMouseOver" },
|
||||
onMouseOut: { action: "onMouseOut" },
|
||||
},
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
component: `ContextMenuButton is used for displaying context menu actions on a list's item`,
|
||||
},
|
||||
source: {
|
||||
code: `
|
||||
import ContextMenuButton from "@appserver/components/context-menu-button";
|
||||
|
||||
<ContextMenuButton
|
||||
iconName="static/images/vertical-dots.react.svg"
|
||||
size={16}
|
||||
color="#A3A9AE"
|
||||
isDisabled={false}
|
||||
title="Actions"
|
||||
getData={() => [
|
||||
{
|
||||
key: "key",
|
||||
label: "label",
|
||||
onClick: () => alert("label"),
|
||||
},
|
||||
]}
|
||||
/>
|
||||
`,
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const Template = (args) => {
|
||||
function getData() {
|
||||
console.log("getData");
|
||||
const [isOpen, setIsOpen] = useState(args.opened);
|
||||
const getData = () => {
|
||||
return [
|
||||
{
|
||||
key: "key1",
|
||||
@ -100,18 +40,31 @@ const Template = (args) => {
|
||||
onClick: () => args.onClickLabel("label2"),
|
||||
},
|
||||
];
|
||||
}
|
||||
};
|
||||
|
||||
const onClickHandler = () => {
|
||||
setIsOpen(!isOpen);
|
||||
args.onClickLabel();
|
||||
};
|
||||
return (
|
||||
<ContextMenuButton
|
||||
{...args}
|
||||
title={"Actions"}
|
||||
iconName={"/static/images/vertical-dots.react.svg"}
|
||||
size={16}
|
||||
color={"#A3A9AE"}
|
||||
getData={getData}
|
||||
isDisabled={false}
|
||||
/>
|
||||
<div style={{ height: "100px" }}>
|
||||
<ContextMenuButton
|
||||
{...args}
|
||||
opened={isOpen}
|
||||
getData={getData}
|
||||
isDisabled={false}
|
||||
onClick={onClickHandler}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const Default = Template.bind({});
|
||||
export const Default = Template.bind({});
|
||||
Default.args = {
|
||||
title: "Actions",
|
||||
iconName: "/static/images/vertical-dots.react.svg",
|
||||
size: 16,
|
||||
color: "#A3A9AE",
|
||||
directionX: "right",
|
||||
isDisabled: false,
|
||||
};
|
||||
|
||||
@ -234,34 +234,53 @@ class ContextMenuButton extends React.Component {
|
||||
}
|
||||
|
||||
ContextMenuButton.propTypes = {
|
||||
/** Tells when the button should present a opened state */
|
||||
opened: PropTypes.bool,
|
||||
/** Array of options for display */
|
||||
data: PropTypes.array,
|
||||
/** Function for converting to inner data */
|
||||
getData: PropTypes.func.isRequired,
|
||||
/** Specifies the icon title */
|
||||
title: PropTypes.string,
|
||||
/** Specifies the icon name */
|
||||
iconName: PropTypes.string,
|
||||
/** Specifies the icon size */
|
||||
size: PropTypes.number,
|
||||
/** Specifies the icon color */
|
||||
color: PropTypes.string,
|
||||
/** Tells when the button should present a disabled state */
|
||||
isDisabled: PropTypes.bool,
|
||||
|
||||
/** Specifies the icon hover color */
|
||||
hoverColor: PropTypes.string,
|
||||
/** Specifies the icon click color */
|
||||
clickColor: PropTypes.string,
|
||||
|
||||
/** Specifies the icon hover name */
|
||||
iconHoverName: PropTypes.string,
|
||||
/** Specifies the icon click name */
|
||||
iconClickName: PropTypes.string,
|
||||
/** Specifies the icon open name */
|
||||
iconOpenName: PropTypes.string,
|
||||
|
||||
/** What the button will trigger when mouse hovered */
|
||||
onMouseEnter: PropTypes.func,
|
||||
/** What the button will trigger when mouse leave */
|
||||
onMouseLeave: PropTypes.func,
|
||||
/** What the button will trigger when mouse over button */
|
||||
onMouseOver: PropTypes.func,
|
||||
/** What the button will trigger when mouse out of button */
|
||||
onMouseOut: PropTypes.func,
|
||||
|
||||
/** Direction X */
|
||||
directionX: PropTypes.string,
|
||||
/** Direction Y */
|
||||
directionY: PropTypes.string,
|
||||
|
||||
/** Accepts class */
|
||||
className: PropTypes.string,
|
||||
/** Accepts id */
|
||||
id: PropTypes.string,
|
||||
/** Accepts css style */
|
||||
style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
|
||||
/** Set the number of columns */
|
||||
columnCount: PropTypes.number,
|
||||
/** Set the display type */
|
||||
displayType: PropTypes.string,
|
||||
};
|
||||
|
||||
|
||||
@ -8,14 +8,7 @@ import ContextMenu from "./index";
|
||||
export default {
|
||||
title: "Components/ContextMenu",
|
||||
component: ContextMenu,
|
||||
argTypes: {
|
||||
className: { description: "Accepts class" },
|
||||
id: { description: "Accepts id" },
|
||||
options: { description: "DropDownItems collection" },
|
||||
style: { description: "Accepts css style" },
|
||||
targetAreaId: { description: "Id of container apply to" },
|
||||
withBackdrop: { description: "Used to display backdrop" },
|
||||
},
|
||||
subcomponents: { RowContainer, Row, RowContent },
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
@ -27,13 +20,6 @@ For use within separate component it is necessary to determine active zone and e
|
||||
In particular case, state is created containing options for particular Row element and passed to component when called.
|
||||
`,
|
||||
},
|
||||
source: {
|
||||
code: `
|
||||
import ContextMenu from "@appserver/components/context-menu";
|
||||
|
||||
<ContextMenu targetAreaId="rowContainer" options={[]} />
|
||||
`,
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
@ -111,11 +111,17 @@ class ContextMenu extends React.PureComponent {
|
||||
}
|
||||
|
||||
ContextMenu.propTypes = {
|
||||
/** DropDownItems collection */
|
||||
options: PropTypes.array,
|
||||
/** Id of container apply to */
|
||||
targetAreaId: PropTypes.string,
|
||||
/** Accepts class */
|
||||
className: PropTypes.string,
|
||||
/** Accepts id */
|
||||
id: PropTypes.string,
|
||||
/** Accepts css style */
|
||||
style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
|
||||
/** Used to display backdrop */
|
||||
withBackdrop: PropTypes.bool,
|
||||
};
|
||||
|
||||
|
||||
@ -1,116 +1,71 @@
|
||||
import React from "react";
|
||||
import DatePicker from "./";
|
||||
|
||||
const locales = [
|
||||
"az",
|
||||
"zh-cn",
|
||||
"cs",
|
||||
"nl",
|
||||
"en-gb",
|
||||
"en",
|
||||
"fi",
|
||||
"fr",
|
||||
"de",
|
||||
"de-ch",
|
||||
"el",
|
||||
"it",
|
||||
"ja",
|
||||
"ko",
|
||||
"lv",
|
||||
"pl",
|
||||
"pt",
|
||||
"pt-br",
|
||||
"ru",
|
||||
"sk",
|
||||
"sl",
|
||||
"es",
|
||||
"tr",
|
||||
"uk",
|
||||
"vi",
|
||||
];
|
||||
|
||||
export default {
|
||||
title: "Components/DatePicker",
|
||||
component: DatePicker,
|
||||
decorators: [
|
||||
(Story) => (
|
||||
<div style={{ height: "380px" }}>
|
||||
<Story />
|
||||
</div>
|
||||
),
|
||||
],
|
||||
|
||||
argTypes: {
|
||||
themeColor: { description: "Color of the selected day", control: "color" },
|
||||
selectedDate: { description: "Selected date value", control: "date" },
|
||||
openToDate: { description: "Opened date value", control: "date" },
|
||||
minDate: {
|
||||
description: "Minimum date that the user can select.",
|
||||
control: "date",
|
||||
},
|
||||
maxDate: {
|
||||
description: "Maximum date that the user can select.",
|
||||
control: "date",
|
||||
},
|
||||
calendarHeaderContent: {
|
||||
description: "Calendar header content (calendar opened in aside)",
|
||||
},
|
||||
calendarSize: { description: "Calendar size" },
|
||||
className: { description: "Accepts class " },
|
||||
displayType: { description: "Calendar display type " },
|
||||
hasError: { description: "Set error date-input style" },
|
||||
id: { description: "Accepts id " },
|
||||
isDisabled: { description: "Disabled react-calendar" },
|
||||
isOpen: { description: "Opens calendar" },
|
||||
isReadOnly: { description: "Set input type is read only" },
|
||||
locale: { description: "Browser locale" },
|
||||
onChange: {
|
||||
description: "Function called when the user select a day ",
|
||||
action: "onChange",
|
||||
},
|
||||
scaled: { description: "Selected calendar size" },
|
||||
style: { description: "Accepts css style" },
|
||||
zIndex: { description: "Calendar css z-index" },
|
||||
themeColor: { control: "color" },
|
||||
selectedDate: { control: "date" },
|
||||
openToDate: { control: "date" },
|
||||
minDate: { control: "date" },
|
||||
maxDate: { control: "date" },
|
||||
onChange: { action: "onChange" },
|
||||
locale: { control: { type: "select", options: locales } },
|
||||
},
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
component: "Base DatePicker component",
|
||||
},
|
||||
source: {
|
||||
code: `
|
||||
import DatePicker from "@appserver/components/date-picker";
|
||||
|
||||
<DatePicker
|
||||
onChange={(date) => {
|
||||
console.log("Selected date", date);
|
||||
}}
|
||||
selectedDate={new Date()}
|
||||
minDate={new Date("1970/01/01")}
|
||||
maxDate={new Date(new Date().getFullYear() + 1 + "/01/01")}
|
||||
isDisabled={false}
|
||||
isReadOnly={false}
|
||||
hasError={false}
|
||||
isOpen={false}
|
||||
themeColor="#ED7309"
|
||||
locale="en"
|
||||
/>
|
||||
`,
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const Template = (args) => {
|
||||
const locales = [
|
||||
"az",
|
||||
"zh-cn",
|
||||
"cs",
|
||||
"nl",
|
||||
"en-gb",
|
||||
"en",
|
||||
"fi",
|
||||
"fr",
|
||||
"de",
|
||||
"de-ch",
|
||||
"el",
|
||||
"it",
|
||||
"ja",
|
||||
"ko",
|
||||
"lv",
|
||||
"pl",
|
||||
"pt",
|
||||
"pt-br",
|
||||
"ru",
|
||||
"sk",
|
||||
"sl",
|
||||
"es",
|
||||
"tr",
|
||||
"uk",
|
||||
"vi",
|
||||
];
|
||||
console.log(args.locale);
|
||||
return (
|
||||
<DatePicker
|
||||
{...args}
|
||||
onChange={(date) => {
|
||||
args.onChange(date);
|
||||
}}
|
||||
selectedDate={new Date(args.selectedDate)}
|
||||
minDate={new Date(args.minDate)}
|
||||
maxDate={new Date(args.maxDate)}
|
||||
openToDate={new Date(args.openToDate)}
|
||||
/>
|
||||
<div style={{ height: "380px" }}>
|
||||
<DatePicker
|
||||
{...args}
|
||||
onChange={(date) => {
|
||||
args.onChange(date);
|
||||
}}
|
||||
selectedDate={new Date(args.selectedDate)}
|
||||
minDate={new Date(args.minDate)}
|
||||
maxDate={new Date(args.maxDate)}
|
||||
openToDate={new Date(args.openToDate)}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@ -124,4 +79,5 @@ Default.args = {
|
||||
maxDate: new Date(new Date().getFullYear() + 1 + "/01/01"),
|
||||
openToDate: new Date(),
|
||||
calendarSize: "base",
|
||||
locale: "en",
|
||||
};
|
||||
|
||||
@ -379,24 +379,42 @@ class DatePicker extends Component {
|
||||
}
|
||||
|
||||
DatePicker.propTypes = {
|
||||
/** Function called when the user select a day */
|
||||
onChange: PropTypes.func,
|
||||
/** Color of the selected day */
|
||||
themeColor: PropTypes.string,
|
||||
/** Selected date value */
|
||||
selectedDate: PropTypes.instanceOf(Date),
|
||||
/** Opened date value */
|
||||
openToDate: PropTypes.instanceOf(Date),
|
||||
/** Minimum date that the user can select */
|
||||
minDate: PropTypes.instanceOf(Date),
|
||||
/** Maximum date that the user can select */
|
||||
maxDate: PropTypes.instanceOf(Date),
|
||||
/** Browser locale */
|
||||
locale: PropTypes.string,
|
||||
/** Disabled react-calendar */
|
||||
isDisabled: PropTypes.bool,
|
||||
/** Set input type is read only */
|
||||
isReadOnly: PropTypes.bool,
|
||||
/** Set error date-input style */
|
||||
hasError: PropTypes.bool,
|
||||
hasWarning: PropTypes.bool,
|
||||
//hasWarning: PropTypes.bool,
|
||||
/** Opens calendar */
|
||||
isOpen: PropTypes.bool,
|
||||
/** Calendar size */
|
||||
calendarSize: PropTypes.oneOf(["base", "big"]),
|
||||
/** Calendar display type */
|
||||
displayType: PropTypes.oneOf(["dropdown", "aside", "auto"]),
|
||||
/** Calendar css z-index */
|
||||
zIndex: PropTypes.number,
|
||||
/** Calendar header content (calendar opened in aside) */
|
||||
calendarHeaderContent: PropTypes.string,
|
||||
/** Accepts class */
|
||||
className: PropTypes.string,
|
||||
/** Accepts id */
|
||||
id: PropTypes.string,
|
||||
/** Accepts css style */
|
||||
style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
|
||||
};
|
||||
|
||||
|
||||
@ -6,37 +6,16 @@ export default {
|
||||
title: "Components/DragAndDrop",
|
||||
component: DragAndDrop,
|
||||
argTypes: {
|
||||
dragging: { description: "Show that the item is being dragged now." },
|
||||
isDropZone: { description: "Sets the component as a dropzone" },
|
||||
onDrop: {
|
||||
action: "onDrop",
|
||||
description:
|
||||
"Occurs when the dragged element is dropped on the drop target",
|
||||
},
|
||||
onDrop: { action: "onDrop" },
|
||||
targetFile: { action: "File: ", table: { disable: true } },
|
||||
className: { description: "Accepts class" },
|
||||
onMouseDown: {
|
||||
description: "Occurs when the mouse button is pressed",
|
||||
action: "onMouseDown",
|
||||
},
|
||||
children: { table: { disable: true } },
|
||||
onMouseDown: { action: "onMouseDown" },
|
||||
},
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
component: `Drag And Drop component can be used as Dropzone
|
||||
See documentation: https://github.com/react-dropzone/react-dropzone
|
||||
`,
|
||||
},
|
||||
source: {
|
||||
code: `
|
||||
import DragAndDrop from "@appserver/components/drag-and-drop";
|
||||
component: `Drag And Drop component can be used as Dropzone.
|
||||
|
||||
<DragAndDrop onDrop={onDrop} style={width: 200, height: 200, border: "5px solid #999"}>
|
||||
<Text style={textStyles} color="#999" fontSize="20px">
|
||||
Drop items here
|
||||
</Text>
|
||||
</DragAndDrop>
|
||||
See documentation: https://github.com/react-dropzone/react-dropzone
|
||||
`,
|
||||
},
|
||||
},
|
||||
@ -66,4 +45,3 @@ const Template = (args) => {
|
||||
};
|
||||
|
||||
export const Default = Template.bind({});
|
||||
|
||||
|
||||
@ -32,11 +32,17 @@ const DragAndDrop = (props) => {
|
||||
};
|
||||
|
||||
DragAndDrop.propTypes = {
|
||||
/** Children elements */
|
||||
children: PropTypes.any,
|
||||
/** Accepts class */
|
||||
className: PropTypes.string,
|
||||
/** Sets the component as a dropzone */
|
||||
isDropZone: PropTypes.bool,
|
||||
/** Show that the item is being dragged now. */
|
||||
dragging: PropTypes.bool,
|
||||
/** Occurs when the mouse button is pressed */
|
||||
onMouseDown: PropTypes.func,
|
||||
/** Occurs when the dragged element is dropped on the drop target */
|
||||
onDrop: PropTypes.func,
|
||||
};
|
||||
|
||||
|
||||
@ -5,36 +5,9 @@ import DropDownItem from ".";
|
||||
export default {
|
||||
title: "Components/DropDownItem",
|
||||
component: DropDownItem,
|
||||
decorators: [
|
||||
(Story) => (
|
||||
<div style={{ height: "200px", position: "relative" }}>
|
||||
<Story />
|
||||
</div>
|
||||
),
|
||||
],
|
||||
subcomponents: { DropDown },
|
||||
argTypes: {
|
||||
isHeader: {
|
||||
description: "Tells when the dropdown item should display like header",
|
||||
},
|
||||
isSeparator: {
|
||||
description: "Tells when the dropdown item should display like separator",
|
||||
},
|
||||
noHover: { description: "Disable default style hover effect" },
|
||||
className: { description: "Accepts class" },
|
||||
disabled: {
|
||||
description: "Tells when the dropdown item should display like disabled",
|
||||
},
|
||||
icon: { description: "Dropdown item icon" },
|
||||
id: { description: "Accepts id" },
|
||||
label: { description: "Dropdown item text" },
|
||||
onClick: {
|
||||
description: "What the dropdown item will trigger when clicked",
|
||||
action: "onClick",
|
||||
},
|
||||
style: { description: "Accepts css style" },
|
||||
tabIndex: { table: { disable: true } },
|
||||
children: { table: { disable: true } },
|
||||
textOverflow: { table: { disable: true } },
|
||||
onClick: { action: "onClick" },
|
||||
},
|
||||
parameters: {
|
||||
docs: {
|
||||
@ -45,17 +18,6 @@ An item can act as separator, header, or container.
|
||||
|
||||
When used as container, it will retain all styling features and positioning. To disable hover effects in container mode, you can use _noHover_ property.`,
|
||||
},
|
||||
source: {
|
||||
code: `import DropDownItem from "@appserver/components/drop-down-item";
|
||||
|
||||
<DropDownItem
|
||||
isSeparator={false}
|
||||
isHeader={false}
|
||||
label="Button 1"
|
||||
icon="static/images/nav.logo.react.svg"
|
||||
onClick={() => console.log("Button 1 clicked")}
|
||||
/>`,
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
@ -69,59 +31,61 @@ const Template = (args) => {
|
||||
const disabled = args.disabled;
|
||||
const { onClick } = args;
|
||||
return (
|
||||
<DropDown directionX={direction} manualY="1%" open={true}>
|
||||
<DropDownItem
|
||||
isHeader={isHeader}
|
||||
label={isHeader ? "Category" : ""}
|
||||
noHover={noHover}
|
||||
/>
|
||||
<DropDownItem
|
||||
icon={"WindowsMsnIcon"}
|
||||
label="Button 1"
|
||||
disabled={disabled}
|
||||
onClick={() => onClick("Button 1 clicked")}
|
||||
noHover={noHover}
|
||||
/>
|
||||
<DropDownItem
|
||||
icon={"PlaneIcon"}
|
||||
label="Button 2"
|
||||
onClick={() => onClick("Button 2 clicked")}
|
||||
noHover={noHover}
|
||||
/>
|
||||
<DropDownItem
|
||||
disabled
|
||||
icon={"static/images/copy.react.svg"}
|
||||
label={args.label || "Button 3"}
|
||||
disabled={disabled}
|
||||
onClick={() => onClick("Button 3 clicked")}
|
||||
noHover={noHover}
|
||||
/>
|
||||
<DropDownItem
|
||||
icon={"ActionsDocumentsIcon"}
|
||||
label="Button 4"
|
||||
onClick={() => onClick("Button 4 clicked")}
|
||||
noHover={noHover}
|
||||
/>
|
||||
<DropDownItem isSeparator={isSeparator} />
|
||||
<DropDownItem
|
||||
isHeader={isHeader}
|
||||
label={isHeader ? "Category" : ""}
|
||||
noHover={noHover}
|
||||
/>
|
||||
<DropDownItem
|
||||
icon={"static/images/nav.logo.react.svg"}
|
||||
label="Button 5"
|
||||
onClick={() => onClick("Button 5 clicked")}
|
||||
noHover={noHover}
|
||||
/>
|
||||
<DropDownItem
|
||||
disabled
|
||||
icon={"static/images/nav.logo.react.svg"}
|
||||
label="Button 6"
|
||||
onClick={() => console.log("Button 6 clicked")}
|
||||
noHover={noHover}
|
||||
/>
|
||||
</DropDown>
|
||||
<div style={{ height: "220px", position: "relative" }}>
|
||||
<DropDown directionX={direction} manualY="1%" open={true}>
|
||||
<DropDownItem
|
||||
isHeader={isHeader}
|
||||
label={isHeader ? "Category" : ""}
|
||||
noHover={noHover}
|
||||
/>
|
||||
<DropDownItem
|
||||
icon={"/static/images/question.react.svg"}
|
||||
label="Button 1"
|
||||
disabled={disabled}
|
||||
onClick={() => onClick("Button 1 clicked")}
|
||||
noHover={noHover}
|
||||
/>
|
||||
<DropDownItem
|
||||
icon={"/static/images/eye.react.svg"}
|
||||
label="Button 2"
|
||||
onClick={() => onClick("Button 2 clicked")}
|
||||
noHover={noHover}
|
||||
/>
|
||||
<DropDownItem
|
||||
disabled
|
||||
icon={"/static/images/copy.react.svg"}
|
||||
label={args.label || "Button 3"}
|
||||
disabled={disabled}
|
||||
onClick={() => onClick("Button 3 clicked")}
|
||||
noHover={noHover}
|
||||
/>
|
||||
<DropDownItem
|
||||
icon={"/static/images/chat.react.svg"}
|
||||
label="Button 4"
|
||||
onClick={() => onClick("Button 4 clicked")}
|
||||
noHover={noHover}
|
||||
/>
|
||||
<DropDownItem isSeparator={isSeparator} />
|
||||
<DropDownItem
|
||||
isHeader={isHeader}
|
||||
label={isHeader ? "Category" : ""}
|
||||
noHover={noHover}
|
||||
/>
|
||||
<DropDownItem
|
||||
icon={"/static/images/nav.logo.react.svg"}
|
||||
label="Button 5"
|
||||
onClick={() => onClick("Button 5 clicked")}
|
||||
noHover={noHover}
|
||||
/>
|
||||
<DropDownItem
|
||||
disabled
|
||||
icon={"static/images/nav.logo.react.svg"}
|
||||
label="Button 6"
|
||||
onClick={() => console.log("Button 6 clicked")}
|
||||
noHover={noHover}
|
||||
/>
|
||||
</DropDown>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
export const Default = Template.bind({});
|
||||
|
||||
@ -38,18 +38,31 @@ const DropDownItem = (props) => {
|
||||
};
|
||||
|
||||
DropDownItem.propTypes = {
|
||||
/** Tells when the dropdown item should display like separator */
|
||||
isSeparator: PropTypes.bool,
|
||||
/** Tells when the dropdown item should display like header */
|
||||
isHeader: PropTypes.bool,
|
||||
/** Accepts tab-index */
|
||||
tabIndex: PropTypes.number,
|
||||
/** Dropdown item text */
|
||||
label: PropTypes.string,
|
||||
/** Tells when the dropdown item should display like disabled */
|
||||
disabled: PropTypes.bool,
|
||||
/** Dropdown item icon */
|
||||
icon: PropTypes.string,
|
||||
/** Disable default style hover effect */
|
||||
noHover: PropTypes.bool,
|
||||
/** What the dropdown item will trigger when clicked */
|
||||
onClick: PropTypes.func,
|
||||
/** Children elements */
|
||||
children: PropTypes.any,
|
||||
/** Accepts class */
|
||||
className: PropTypes.string,
|
||||
/** Accepts id */
|
||||
id: PropTypes.string,
|
||||
/** Accepts css style */
|
||||
style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
|
||||
/** Accepts css text-overflow */
|
||||
textOverflow: PropTypes.bool,
|
||||
};
|
||||
|
||||
|
||||
@ -8,47 +8,7 @@ export default {
|
||||
title: "Components/DropDown",
|
||||
component: DropDown,
|
||||
subcomponents: { DropDownItem, GroupButton },
|
||||
decorators: [
|
||||
(Story) => (
|
||||
<div style={{ height: "200px", position: "relative" }}>
|
||||
<Story />
|
||||
</div>
|
||||
),
|
||||
],
|
||||
argTypes: {
|
||||
open: { description: "Tells when the dropdown should be opened" },
|
||||
className: { description: " Accepts class" },
|
||||
clickOutsideAction: {
|
||||
description:
|
||||
"Required for determining a click outside DropDown with the withBackdrop parameter",
|
||||
},
|
||||
directionX: {
|
||||
description: "Sets the opening direction relative to the parent",
|
||||
},
|
||||
directionY: {
|
||||
description: "Sets the opening direction relative to the parent",
|
||||
},
|
||||
id: { description: "Accepts id " },
|
||||
manualWidth: {
|
||||
description:
|
||||
"Required if you need to specify the exact width of the component, for example 100%",
|
||||
},
|
||||
manualX: {
|
||||
description:
|
||||
"Required if you need to specify the exact distance from the parent component",
|
||||
},
|
||||
manualY: {
|
||||
description:
|
||||
"Required if you need to specify the exact distance from the parent component",
|
||||
},
|
||||
maxHeight: { description: "Required if the scrollbar is displayed" },
|
||||
style: { description: "Accepts css style" },
|
||||
withBackdrop: { description: "Used to display backdrop" },
|
||||
showDisabledItems: { description: "Display disabled items or not" },
|
||||
children: { table: { disable: true } },
|
||||
columnCount: { table: { disable: true } },
|
||||
disableOnClickOutside: { table: { disable: true } },
|
||||
enableOnClickOutside: { table: { disable: true } },
|
||||
onClick: { action: "onClickItem", table: { disable: true } },
|
||||
},
|
||||
parameters: {
|
||||
@ -74,66 +34,70 @@ const Template = (args) => {
|
||||
};
|
||||
|
||||
return (
|
||||
<DropDown
|
||||
{...args}
|
||||
open={isOpen}
|
||||
clickOutsideAction={clickOutsideAction}
|
||||
style={{ top: 0, left: 0 }}
|
||||
onClick={() => {}}
|
||||
>
|
||||
<DropDownItem isHeader label="Category 1" />
|
||||
<div style={{ height: "200px", position: "relative" }}>
|
||||
<DropDown
|
||||
{...args}
|
||||
open={isOpen}
|
||||
clickOutsideAction={clickOutsideAction}
|
||||
style={{ top: 0, left: 0 }}
|
||||
onClick={() => {}}
|
||||
>
|
||||
<DropDownItem isHeader label="Category 1" />
|
||||
|
||||
<DropDownItem
|
||||
label="Button 1"
|
||||
onClick={() => args.onClick("Button 1 clicked")}
|
||||
/>
|
||||
<DropDownItem
|
||||
label="Button 2"
|
||||
onClick={() => args.onClick("Button 2 clicked")}
|
||||
/>
|
||||
<DropDownItem
|
||||
label="Button 3"
|
||||
onClick={() => args.onClick("Button 3 clicked")}
|
||||
/>
|
||||
<DropDownItem
|
||||
label="Button 4"
|
||||
onClick={() => args.onClick("Button 4 clicked")}
|
||||
disabled={true}
|
||||
/>
|
||||
<DropDownItem isSeparator />
|
||||
<DropDownItem
|
||||
label="Button 5"
|
||||
onClick={() => args.onClick("Button 5 clicked")}
|
||||
/>
|
||||
<DropDownItem
|
||||
label="Button 6"
|
||||
onClick={() => args.onClick("Button 6 clicked")}
|
||||
/>
|
||||
</DropDown>
|
||||
<DropDownItem
|
||||
label="Button 1"
|
||||
onClick={() => args.onClick("Button 1 clicked")}
|
||||
/>
|
||||
<DropDownItem
|
||||
label="Button 2"
|
||||
onClick={() => args.onClick("Button 2 clicked")}
|
||||
/>
|
||||
<DropDownItem
|
||||
label="Button 3"
|
||||
onClick={() => args.onClick("Button 3 clicked")}
|
||||
/>
|
||||
<DropDownItem
|
||||
label="Button 4"
|
||||
onClick={() => args.onClick("Button 4 clicked")}
|
||||
disabled={true}
|
||||
/>
|
||||
<DropDownItem isSeparator />
|
||||
<DropDownItem
|
||||
label="Button 5"
|
||||
onClick={() => args.onClick("Button 5 clicked")}
|
||||
/>
|
||||
<DropDownItem
|
||||
label="Button 6"
|
||||
onClick={() => args.onClick("Button 6 clicked")}
|
||||
/>
|
||||
</DropDown>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const WithButtonTemplate = (args) => {
|
||||
return (
|
||||
<GroupButton
|
||||
label="Dropdown demo"
|
||||
style={{ top: 0, left: 0 }}
|
||||
isDropdown={true}
|
||||
opened={args.open}
|
||||
>
|
||||
<DropDownItem
|
||||
label="Button 1"
|
||||
onClick={() => args.onClick("Button 2 clicked")}
|
||||
/>
|
||||
<DropDownItem
|
||||
label="Button 2"
|
||||
onClick={() => args.onClick("Button 2 clicked")}
|
||||
/>
|
||||
<DropDownItem
|
||||
label="Button 3"
|
||||
onClick={() => args.onClick("Button 3 clicked")}
|
||||
/>
|
||||
</GroupButton>
|
||||
<div style={{ height: "200px", position: "relative" }}>
|
||||
<GroupButton
|
||||
label="Dropdown demo"
|
||||
style={{ top: 0, left: 0 }}
|
||||
isDropdown={true}
|
||||
opened={args.open}
|
||||
>
|
||||
<DropDownItem
|
||||
label="Button 1"
|
||||
onClick={() => args.onClick("Button 2 clicked")}
|
||||
/>
|
||||
<DropDownItem
|
||||
label="Button 2"
|
||||
onClick={() => args.onClick("Button 2 clicked")}
|
||||
/>
|
||||
<DropDownItem
|
||||
label="Button 3"
|
||||
onClick={() => args.onClick("Button 3 clicked")}
|
||||
/>
|
||||
</GroupButton>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@ -142,68 +106,7 @@ export const Default = Template.bind({});
|
||||
export const WithButton = WithButtonTemplate.bind({});
|
||||
|
||||
Default.args = { open: true };
|
||||
Default.parameters = {
|
||||
docs: {
|
||||
source: {
|
||||
code: `import DropDown from "@appserver/components/drop-down";
|
||||
import DropDownItem from "@appserver/components/drop-down-item";
|
||||
|
||||
<DropDown {...props}>
|
||||
<DropDownItem isHeader label="Category 1" />
|
||||
<DropDownItem
|
||||
label="Button 1"
|
||||
onClick={() => action("Button 1 clicked")}
|
||||
/>
|
||||
<DropDownItem
|
||||
label="Button 2"
|
||||
onClick={() => action("Button 2 clicked")}
|
||||
/>
|
||||
<DropDownItem
|
||||
label="Button 3"
|
||||
onClick={() => action("Button 3 clicked")}
|
||||
/>
|
||||
<DropDownItem
|
||||
label="Button 4"
|
||||
onClick={() => action("Button 4 clicked")}
|
||||
disabled={true}
|
||||
/>
|
||||
<DropDownItem isSeparator />
|
||||
<DropDownItem
|
||||
label="Button 5"
|
||||
onClick={() => action("Button 5 clicked")}
|
||||
/>
|
||||
<DropDownItem
|
||||
label="Button 6"
|
||||
onClick={() => action("Button 6 clicked")}
|
||||
/>
|
||||
</DropDown>`,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
WithButton.args = {
|
||||
open: true,
|
||||
};
|
||||
WithButton.parameters = {
|
||||
docs: {
|
||||
source: {
|
||||
code: `import GroupButton from "@appserver/components/group-button";
|
||||
import DropDownItem from "@appserver/components/drop-down-item";
|
||||
|
||||
<GroupButton label="Dropdown demo" isDropdown={true}>
|
||||
<DropDownItem
|
||||
label="Button 1"
|
||||
onClick={() => console.log("Button 1 clicked")}
|
||||
/>
|
||||
<DropDownItem
|
||||
label="Button 2"
|
||||
onClick={() => console.log("Button 2 clicked")}
|
||||
/>
|
||||
<DropDownItem
|
||||
label="Button 3"
|
||||
onClick={() => console.log("Button 3 clicked")}
|
||||
/>
|
||||
</GroupButton>`,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
@ -198,24 +198,42 @@ class DropDownContainer extends React.Component {
|
||||
}
|
||||
}
|
||||
|
||||
DropDownContainer.propTypes = {
|
||||
children: PropTypes.any,
|
||||
className: PropTypes.string,
|
||||
clickOutsideAction: PropTypes.func,
|
||||
directionX: PropTypes.oneOf(["left", "right"]), //TODO: make more informative
|
||||
directionY: PropTypes.oneOf(["bottom", "top"]),
|
||||
DropDown.propTypes = {
|
||||
disableOnClickOutside: PropTypes.func,
|
||||
enableOnClickOutside: PropTypes.func,
|
||||
};
|
||||
|
||||
DropDownContainer.propTypes = {
|
||||
/** Children elements */
|
||||
children: PropTypes.any,
|
||||
/** Accepts class */
|
||||
className: PropTypes.string,
|
||||
/** Required for determining a click outside DropDown with the withBackdrop parameter */
|
||||
clickOutsideAction: PropTypes.func,
|
||||
/** Sets the opening direction relative to the parent */
|
||||
directionX: PropTypes.oneOf(["left", "right"]), //TODO: make more informative
|
||||
/** Sets the opening direction relative to the parent */
|
||||
directionY: PropTypes.oneOf(["bottom", "top"]),
|
||||
/** Accepts id */
|
||||
id: PropTypes.string,
|
||||
/** Required if you need to specify the exact width of the component, for example 100% */
|
||||
manualWidth: PropTypes.string,
|
||||
/** Required if you need to specify the exact distance from the parent component */
|
||||
manualX: PropTypes.string,
|
||||
/** Required if you need to specify the exact distance from the parent component */
|
||||
manualY: PropTypes.string,
|
||||
/** Required if the scrollbar is displayed */
|
||||
maxHeight: PropTypes.number,
|
||||
/** Tells when the dropdown should be opened */
|
||||
open: PropTypes.bool,
|
||||
/** Accepts css style */
|
||||
style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
|
||||
/** Used to display backdrop */
|
||||
withBackdrop: PropTypes.bool,
|
||||
/** Count of columns */
|
||||
columnCount: PropTypes.number,
|
||||
showDisabledItems: PropTypes.bool
|
||||
/** Display disabled items or not */
|
||||
showDisabledItems: PropTypes.bool,
|
||||
};
|
||||
|
||||
DropDownContainer.defaultProps = {
|
||||
|
||||
@ -6,39 +6,13 @@ import CrossIcon from "../../../public/images/cross.react.svg";
|
||||
export default {
|
||||
title: "Components/EmptyScreenContainer",
|
||||
component: EmptyScreenContainer,
|
||||
argTypes: { onClick: { action: "Reset filter clicked" } },
|
||||
argTypes: {
|
||||
onClick: { action: "Reset filter clicked", table: { disable: true } },
|
||||
},
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
component: `Used to display empty screen page
|
||||
|
||||
### Properties
|
||||
|
||||
| Props | Type | Required | Values | Default | Description |
|
||||
| ----------------- | :------------: | :------: | :----: | :-----: | --------------------------------------- |
|
||||
| buttons | element | - | - | - | Content of EmptyContentButtonsContainer |
|
||||
| className | string | - | - | - | Accepts class |
|
||||
| descriptionText | string | - | - | - | Description text |
|
||||
| headerText | string | - | - | - | Header text |
|
||||
| subheadingText | string | - | - | - | Subheading text |
|
||||
| id | string | - | - | - | Accepts id |
|
||||
| imageAlt | string | - | - | - | Alternative image text |
|
||||
| imageSrc | string | - | - | - | Image url source |
|
||||
| style | obj, array | - | - | - | Accepts css style |
|
||||
`,
|
||||
},
|
||||
source: {
|
||||
code: `
|
||||
import EmptyScreenContainer from "@appserver/components/empty-screen-container";
|
||||
|
||||
<EmptyScreenContainer
|
||||
imageSrc="empty_screen_filter.png"
|
||||
imageAlt="Empty Screen Filter image"
|
||||
headerText="No results matching your search could be found"
|
||||
subheading="No files to be displayed in this section"
|
||||
descriptionText="No results matching your search could be found"
|
||||
buttons={<a href="/">Go to home</a>}
|
||||
/>`,
|
||||
component: "Used to display empty screen page",
|
||||
},
|
||||
},
|
||||
},
|
||||
@ -63,7 +37,7 @@ const Template = (args) => {
|
||||
export const Default = Template.bind({});
|
||||
|
||||
Default.args = {
|
||||
imageSrc: "empty_screen_filter.png",
|
||||
imageSrc: "/static/images/empty_screen_filter.png",
|
||||
imageAlt: "Empty Screen Filter image",
|
||||
headerText: "No results matching your search could be found",
|
||||
subheadingText: "No files to be displayed in this section",
|
||||
|
||||
@ -48,14 +48,23 @@ const EmptyScreenContainer = (props) => {
|
||||
};
|
||||
|
||||
EmptyScreenContainer.propTypes = {
|
||||
/** Image url source */
|
||||
imageSrc: PropTypes.string,
|
||||
/** Alternative image text */
|
||||
imageAlt: PropTypes.string,
|
||||
/** Header text */
|
||||
headerText: PropTypes.string,
|
||||
/** Subheading text */
|
||||
subheadingText: PropTypes.string,
|
||||
/** Description text */
|
||||
descriptionText: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
|
||||
/** Content of EmptyContentButtonsContainer */
|
||||
buttons: PropTypes.any,
|
||||
/** Accepts class */
|
||||
className: PropTypes.string,
|
||||
/** Accepts id */
|
||||
id: PropTypes.string,
|
||||
/** Accepts css style */
|
||||
style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
|
||||
};
|
||||
|
||||
|
||||
@ -11,34 +11,7 @@ export default {
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
component: `Responsive form field container
|
||||
|
||||
### Properties
|
||||
|
||||
| Props | Type | Required | Values | Default | Description |
|
||||
| ------------------------- | :---------------: | :------: | :----: | :-------: | ------------------------------------------------ |
|
||||
| className | string | - | - | - | Accepts class |
|
||||
| errorColor | string | - | - |  #C96C27 | Error text color |
|
||||
| errorMessageWidth | string | - | - | 320px | Error text width |
|
||||
| errorMessage | string | - | - | - | Error message text |
|
||||
| hasError | bool | - | - | false | Indicates that the field is incorrect |
|
||||
| helpButtonHeaderContent | string | - | - | - | Tooltip header content (tooltip opened in aside) |
|
||||
| id | string | - | - | - | Accepts id |
|
||||
| isRequired | bool | - | - | false | Indicates that the field is required to fill |
|
||||
| isVertical | bool | - | - | false | Vertical or horizontal alignment |
|
||||
| labelText | string | - | - | - | Field label text |
|
||||
| labelVisible | bool | - | - | true | Sets visibility of field label section |
|
||||
| maxLabelWidth | string | - | - | 110px | Max label width in horizontal alignment |
|
||||
| style | obj, array | - | - | - | Accepts css style |
|
||||
| tooltipContent | object, string | - | - | - | Tooltip content |
|
||||
`,
|
||||
},
|
||||
source: {
|
||||
code: `import FieldContainer from "@appserver/components/field-container";
|
||||
|
||||
<FieldContainer labelText="Name:">
|
||||
<TextInput value="" onChange={(e) => console.log(e.target.value)} />
|
||||
</FieldContainer>`,
|
||||
component: "Responsive form field container",
|
||||
},
|
||||
},
|
||||
},
|
||||
@ -76,73 +49,3 @@ Default.args = {
|
||||
errorColor: "#C96C27",
|
||||
errorMessageWidth: "293px",
|
||||
};
|
||||
Default.parameters = {
|
||||
decorators: [
|
||||
(Story) => (
|
||||
<div style={{ marginTop: 100, marginLeft: 50 }}>
|
||||
<Story />
|
||||
</div>
|
||||
),
|
||||
],
|
||||
};
|
||||
/*
|
||||
import { storiesOf } from "@storybook/react";
|
||||
import { action } from "@storybook/addon-actions";
|
||||
import { StringValue } from "react-values";
|
||||
import { text, boolean, withKnobs, color } from "@storybook/addon-knobs/react";
|
||||
import FieldContainer from ".";
|
||||
import TextInput from "../text-input";
|
||||
import Section from "../../../.storybook/decorators/section";
|
||||
import withReadme from "storybook-readme/with-readme";
|
||||
import Readme from "./README.md";
|
||||
|
||||
storiesOf("Components|FieldContainer", module)
|
||||
.addDecorator(withKnobs)
|
||||
.addDecorator(withReadme(Readme))
|
||||
.add("base", () => (
|
||||
<StringValue
|
||||
onChange={(e) => {
|
||||
action("onChange")(e);
|
||||
}}
|
||||
>
|
||||
{({ value, set }) => (
|
||||
<Section>
|
||||
<div style={{ marginTop: 100, marginLeft: 50 }}>
|
||||
<FieldContainer
|
||||
isVertical={boolean("isVertical", false)}
|
||||
isRequired={boolean("isRequired", false)}
|
||||
hasError={boolean("hasError", false)}
|
||||
labelVisible={boolean("labelVisible", true)}
|
||||
labelText={text("labelText", "Name:")}
|
||||
maxLabelWidth={text("maxLabelWidth", "110px")}
|
||||
tooltipContent={text(
|
||||
"tooltipContent",
|
||||
"Paste you tooltip content here"
|
||||
)}
|
||||
helpButtonHeaderContent={text(
|
||||
"helpButtonHeaderContent",
|
||||
"Tooltip header"
|
||||
)}
|
||||
place="top"
|
||||
errorMessage={text(
|
||||
"errorMessage",
|
||||
"Error text. Lorem ipsum dolor sit amet, consectetuer adipiscing elit"
|
||||
)}
|
||||
errorColor={color("errorColor", "#C96C27")}
|
||||
errorMessageWidth={text("errorMessageWidth", "293px")}
|
||||
>
|
||||
<TextInput
|
||||
value={value}
|
||||
hasError={boolean("hasError", false)}
|
||||
className="field-input"
|
||||
onChange={(e) => {
|
||||
set(e.target.value);
|
||||
}}
|
||||
/>
|
||||
</FieldContainer>
|
||||
</div>
|
||||
</Section>
|
||||
)}
|
||||
</StringValue>
|
||||
));
|
||||
*/
|
||||
|
||||
@ -74,25 +74,40 @@ class FieldContainer extends React.Component {
|
||||
FieldContainer.displayName = "FieldContainer";
|
||||
|
||||
FieldContainer.propTypes = {
|
||||
/** Vertical or horizontal alignment */
|
||||
isVertical: PropTypes.bool,
|
||||
/** Accepts class */
|
||||
className: PropTypes.string,
|
||||
/** Indicates that the field is required to fill */
|
||||
isRequired: PropTypes.bool,
|
||||
/** Indicates that the field is incorrect */
|
||||
hasError: PropTypes.bool,
|
||||
/** Sets visibility of field label section */
|
||||
labelVisible: PropTypes.bool,
|
||||
/** Field label text */
|
||||
labelText: PropTypes.string,
|
||||
icon: PropTypes.string,
|
||||
/** Children elements */
|
||||
children: PropTypes.oneOfType([
|
||||
PropTypes.arrayOf(PropTypes.node),
|
||||
PropTypes.node,
|
||||
]),
|
||||
/** Tooltip content */
|
||||
tooltipContent: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
|
||||
place: PropTypes.string,
|
||||
/** Tooltip header content (tooltip opened in aside) */
|
||||
helpButtonHeaderContent: PropTypes.string,
|
||||
/** Max label width in horizontal alignment */
|
||||
maxLabelWidth: PropTypes.string,
|
||||
/** Error message text */
|
||||
errorMessage: PropTypes.string,
|
||||
/** Error text color */
|
||||
errorColor: PropTypes.string,
|
||||
/** Error text width */
|
||||
errorMessageWidth: PropTypes.string,
|
||||
/** Accepts id */
|
||||
id: PropTypes.string,
|
||||
/** Accepts css style */
|
||||
style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
|
||||
};
|
||||
|
||||
|
||||
@ -10,41 +10,7 @@ export default {
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
component: `File entry field
|
||||
|
||||
### Properties
|
||||
|
||||
| Props | Type | Required | Values | Default | Description |
|
||||
| ------------- | :------------: | :------: | :--------------------------------------: | :-----: | ---------------------------------------------------------------------------------- |
|
||||
| className | string | - | - | - | Accepts class |
|
||||
| hasError | bool | - | - | false | Indicates the input field has an error |
|
||||
| hasWarning | bool | - | - | false | Indicates the input field has a warning |
|
||||
| id | string | - | - | - | Used as HTML 'id' property |
|
||||
| isDisabled | bool | - | - | false | Indicates that the field cannot be used (e.g not authorised, or changes not saved) |
|
||||
| name | string | - | - | - | Used as HTML 'name' property |
|
||||
| onInput | func | - | - | - | Called when a file is selected |
|
||||
| placeholder | string | - | - | - | Placeholder text for the input |
|
||||
| scale | bool | - | - | false | Indicates the input field has scale |
|
||||
| size | string | - | base, middle, big, huge, large | base | Supported size of the input fields. |
|
||||
| style | obj, array | - | - | - | Accepts css style |
|
||||
| accept | string | - | - | - | Specifies files visible for upload |
|
||||
|
||||
`,
|
||||
},
|
||||
source: {
|
||||
code: `import FileInput from "@appserver/components/file-input";
|
||||
<FileInput
|
||||
placeholder="Input file"
|
||||
accept=".doc, .docx"
|
||||
onInput={(file) => {
|
||||
console.log(
|
||||
file,
|
||||
"name: ", file.name},
|
||||
"lastModified: ", file.lastModifiedDate},
|
||||
"size: ", file.size}
|
||||
);
|
||||
}}
|
||||
/>`,
|
||||
component: "File entry field",
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
@ -4,7 +4,7 @@ import equal from "fast-deep-equal/react";
|
||||
|
||||
import IconButton from "../icon-button";
|
||||
import TextInput from "../text-input";
|
||||
import StyledFileInput from "./styled-file-input"
|
||||
import StyledFileInput from "./styled-file-input";
|
||||
|
||||
class FileInput extends Component {
|
||||
constructor(props) {
|
||||
@ -125,7 +125,7 @@ class FileInput extends Component {
|
||||
<div className="icon" onClick={this.onIconFileClick}>
|
||||
<IconButton
|
||||
className="icon-button"
|
||||
iconName={"CatalogFolderIcon"}
|
||||
iconName={"/static/images/catalog.folder.react.svg"}
|
||||
color={"#A3A9AE"}
|
||||
size={iconSize}
|
||||
isDisabled={isDisabled}
|
||||
@ -137,17 +137,29 @@ class FileInput extends Component {
|
||||
}
|
||||
|
||||
FileInput.propTypes = {
|
||||
/** Accepts css style */
|
||||
style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
|
||||
/** Placeholder text for the input */
|
||||
placeholder: PropTypes.string,
|
||||
/** Supported size of the input fields */
|
||||
size: PropTypes.oneOf(["base", "middle", "big", "huge", "large"]),
|
||||
/** Indicates the input field has scale */
|
||||
scale: PropTypes.bool,
|
||||
/** Accepts class */
|
||||
className: PropTypes.string,
|
||||
/** Indicates the input field has an error */
|
||||
hasError: PropTypes.bool,
|
||||
/** Indicates the input field has a warning */
|
||||
hasWarning: PropTypes.bool,
|
||||
/** Used as HTML `id` property */
|
||||
id: PropTypes.string,
|
||||
/** Indicates that the field cannot be used (e.g not authorised, or changes not saved) */
|
||||
isDisabled: PropTypes.bool,
|
||||
/** Used as HTML `name` property */
|
||||
name: PropTypes.string,
|
||||
/** Called when a file is selected */
|
||||
onInput: PropTypes.func,
|
||||
/**Specifies files visible for upload */
|
||||
accept: PropTypes.string,
|
||||
};
|
||||
|
||||
|
||||
@ -9,27 +9,53 @@ const Grid = forwardRef(({ tag, as, ...rest }, ref) => {
|
||||
|
||||
Grid.propTypes = {
|
||||
as: PropTypes.string,
|
||||
/** sets the distribution of space between and around content items along a flexbox's cross-axis or a grid's block axis */
|
||||
alignContent: PropTypes.string,
|
||||
/** sets the align-self value on all direct children as a group. In Flexbox, it controls the alignment of items on the Cross Axis.
|
||||
* In Grid Layout, it controls the alignment of items on the Block Axis within their grid area. */
|
||||
alignItems: PropTypes.string,
|
||||
/** overrides a grid or flex item's align-items value. In Grid, it aligns the item inside the grid area.
|
||||
* In Flexbox, it aligns the item on the cross axis. */
|
||||
alignSelf: PropTypes.string,
|
||||
/** specifies named grid areas. Takes value as array of string arrays that specify named grid areas.
|
||||
* Or objects array, that contains names and coordinates of areas. */
|
||||
areasProp: PropTypes.array,
|
||||
/** defines the sizing of the grid columns. Specifying a single string will repeat several columns of this size.
|
||||
* Specifying an object allows you to specify the number of repetitions and the size of the column.
|
||||
* Or you can specify an array with column sizes. The column size can be specified as an array of minimum and maximum widths. */
|
||||
columnsProp: PropTypes.oneOfType([
|
||||
PropTypes.string,
|
||||
PropTypes.array,
|
||||
PropTypes.object,
|
||||
]),
|
||||
/** is a shorthand property for grid-row-start, grid-column-start, grid-row-end and grid-column-end, specifying a grid item’s size and
|
||||
* location within the grid by contributing a line, a span, or nothing (automatic) to its grid placement,
|
||||
* thereby specifying the edges of its grid area. */
|
||||
gridArea: PropTypes.string,
|
||||
/** sets the size of the gap (gutter) between an element's columns. */
|
||||
gridColumnGap: PropTypes.string,
|
||||
/** sets the gaps (gutters) between rows and columns. It is a shorthand for row-gap and column-gap. */
|
||||
gridGap: PropTypes.string,
|
||||
/** sets the size of the gap (gutter) between an element's grid rows. */
|
||||
gridRowGap: PropTypes.string,
|
||||
/** defines the height of the border of the element area. */
|
||||
heightProp: PropTypes.string,
|
||||
/** defines how the browser distributes space between and around content items along the main-axis of a flex container,
|
||||
* and the inline axis of a grid container. */
|
||||
justifyContent: PropTypes.string,
|
||||
/** defines the default justify-self for all items of the box, giving them all a default way of justifying each box along the appropriate axis. */
|
||||
justifyItems: PropTypes.string,
|
||||
/** sets the way a box is justified inside its alignment container along the appropriate axis. */
|
||||
justifySelf: PropTypes.string,
|
||||
/** sets the margin area on all four sides of an element. It is a shorthand for margin-top, margin-right, margin-bottom, and margin-left */
|
||||
marginProp: PropTypes.string,
|
||||
/** sets the padding area on all four sides of an element. It is a shorthand for padding-top, padding-right, padding-bottom, and padding-left */
|
||||
paddingProp: PropTypes.string,
|
||||
/** defines the sizing of the grid rows. Specifying a single string will repeat several rows of this size. Or you can specify an array with rows sizes.
|
||||
* The row size can be specified as an array of minimum and maximum heights. */
|
||||
rowsProp: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
|
||||
tag: PropTypes.string,
|
||||
/** defines the width of the border of the element area. */
|
||||
widthProp: PropTypes.string,
|
||||
};
|
||||
|
||||
|
||||
@ -12,46 +12,8 @@ export default {
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
component: `A container that lays out its contents in a 2-dimensional grid system. Use Box components to define rows and columns.
|
||||
|
||||
### Properties
|
||||
|
||||
| Props | Type | Required | Values | Default | Description |
|
||||
| :--------------: | :-----------------------: | :------: | :-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-----: | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| alignContent | string | - | - | - | sets the distribution of space between and around content items along a flexbox's cross-axis or a grid's block axis |
|
||||
| alignItems | string | - | - | - | sets the align-self value on all direct children as a group. In Flexbox, it controls the alignment of items on the Cross Axis. In Grid Layout, it controls the alignment of items on the Block Axis within their grid area. |
|
||||
| alignSelf | string | - | - | - | overrides a grid or flex item's align-items value. In Grid, it aligns the item inside the grid area. In Flexbox, it aligns the item on the cross axis. |
|
||||
| areasProp | array | - | [["header","header"],["navbar","main"]], [{ name: "header", start: [0, 0], end: [1, 0] }, { name: "navbar", start: [0, 1], end: [0, 1] }, { name: "main", start: [1, 1], end: [1, 1] }] | - | specifies named grid areas. Takes value as array of string arrays that specify named grid areas. Or objects array, that contains names and coordinates of areas. |
|
||||
| columnsProp | string,array,object | - | "25%", ["200px", ["100px","1fr"], "auto"], { count: 3, size: "100px" } | - | defines the sizing of the grid columns. Specifying a single string will repeat several columns of this size. Specifying an object allows you to specify the number of repetitions and the size of the column. Or you can specify an array with column sizes. The column size can be specified as an array of minimum and maximum widths. |
|
||||
| gridArea | string | - | - | - | is a shorthand property for grid-row-start, grid-column-start, grid-row-end and grid-column-end, specifying a grid item’s size and location within the grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area. |
|
||||
| gridColumnGap | string | - | - | - | sets the size of the gap (gutter) between an element's columns. |
|
||||
| gridGap | string | - | - | - | sets the gaps (gutters) between rows and columns. It is a shorthand for row-gap and column-gap. |
|
||||
| gridRowGap | string | - | - | - | sets the size of the gap (gutter) between an element's grid rows. |
|
||||
| heightProp | string | - | - | 100% | defines the height of the border of the element area. |
|
||||
| justifyContent | string | - | - | - | defines how the browser distributes space between and around content items along the main-axis of a flex container, and the inline axis of a grid container. |
|
||||
| justifyItems | string | - | - | - | defines the default justify-self for all items of the box, giving them all a default way of justifying each box along the appropriate axis. |
|
||||
| justifySelf | string | - | - | - | sets the way a box is justified inside its alignment container along the appropriate axis. |
|
||||
| marginProp | string | - | - | - | sets the margin area on all four sides of an element. It is a shorthand for margin-top, margin-right, margin-bottom, and margin-left. |
|
||||
| paddingProp | string | - | - | - | sets the padding area on all four sides of an element. It is a shorthand for padding-top, padding-right, padding-bottom, and padding-left |
|
||||
| rowsProp | string,array | - | "50px", ["100px", ["100px","1fr"], "auto"] | - | defines the sizing of the grid rows. Specifying a single string will repeat several rows of this size. Or you can specify an array with rows sizes. The row size can be specified as an array of minimum and maximum heights. |
|
||||
| widthProp | string | - | - | 100% | defines the width of the border of the element area. |
|
||||
|
||||
`,
|
||||
},
|
||||
source: {
|
||||
code: `import Grid from "@appserver/components/grid";
|
||||
|
||||
<Grid {...args} {...gridProps}>
|
||||
<Box {...boxProps} backgroundProp="#F4991A">
|
||||
<Text>200px</Text>
|
||||
</Box>
|
||||
<Box {...boxProps} backgroundProp="#F2EAD3">
|
||||
<Text>minmax(100px,1fr)</Text>
|
||||
</Box>
|
||||
<Box {...boxProps} backgroundProp="#F9F5F0">
|
||||
<Text>auto</Text>
|
||||
</Box>
|
||||
</Grid>`,
|
||||
component:
|
||||
"A container that lays out its contents in a 2-dimensional grid system. Use Box components to define rows and columns",
|
||||
},
|
||||
},
|
||||
},
|
||||
@ -223,135 +185,3 @@ Default.args = {
|
||||
export const Columns = TemplateColumns.bind({});
|
||||
export const Rows = TemplateRows.bind({});
|
||||
export const Layout = TemplateLayout.bind({});
|
||||
/*
|
||||
import { storiesOf } from "@storybook/react";
|
||||
import withReadme from "storybook-readme/with-readme";
|
||||
import Readme from "./README.md";
|
||||
import Grid from ".";
|
||||
import Box from "../box";
|
||||
import Text from "../text";
|
||||
|
||||
const gridProps = {
|
||||
marginProp: "0 0 20px 0",
|
||||
};
|
||||
|
||||
const boxProps = {
|
||||
paddingProp: "10px",
|
||||
displayProp: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
};
|
||||
|
||||
storiesOf("Components|Grid", module)
|
||||
.addDecorator(withReadme(Readme))
|
||||
.add("Columns", () => (
|
||||
<>
|
||||
<Grid {...gridProps} columnsProp={["200px", ["100px", "1fr"], "auto"]}>
|
||||
<Box {...boxProps} backgroundProp="#F4991A">
|
||||
<Text>200px</Text>
|
||||
</Box>
|
||||
<Box {...boxProps} backgroundProp="#F2EAD3">
|
||||
<Text>minmax(100px,1fr)</Text>
|
||||
</Box>
|
||||
<Box {...boxProps} backgroundProp="#F9F5F0">
|
||||
<Text>auto</Text>
|
||||
</Box>
|
||||
</Grid>
|
||||
|
||||
<Grid {...gridProps} columnsProp="25%">
|
||||
<Box {...boxProps} backgroundProp="#F4991A">
|
||||
<Text>25%</Text>
|
||||
</Box>
|
||||
<Box {...boxProps} backgroundProp="#F2EAD3">
|
||||
<Text>25%</Text>
|
||||
</Box>
|
||||
<Box {...boxProps} backgroundProp="#F9F5F0">
|
||||
<Text>25%</Text>
|
||||
</Box>
|
||||
</Grid>
|
||||
|
||||
<Grid {...gridProps} columnsProp={{ count: 3, size: "100px" }}>
|
||||
<Box {...boxProps} backgroundProp="#F4991A">
|
||||
<Text>100px</Text>
|
||||
</Box>
|
||||
<Box {...boxProps} backgroundProp="#F2EAD3">
|
||||
<Text>100px</Text>
|
||||
</Box>
|
||||
<Box {...boxProps} backgroundProp="#F9F5F0">
|
||||
<Text>100px</Text>
|
||||
</Box>
|
||||
</Grid>
|
||||
|
||||
<Grid {...gridProps} columnsProp={{ count: 3, size: ["100px", "1fr"] }}>
|
||||
<Box {...boxProps} backgroundProp="#F4991A">
|
||||
<Text>minmax(100px,1fr)</Text>
|
||||
</Box>
|
||||
<Box {...boxProps} backgroundProp="#F2EAD3">
|
||||
<Text>minmax(100px,1fr)</Text>
|
||||
</Box>
|
||||
<Box {...boxProps} backgroundProp="#F9F5F0">
|
||||
<Text>minmax(100px,1fr)</Text>
|
||||
</Box>
|
||||
</Grid>
|
||||
</>
|
||||
))
|
||||
.add("Rows", () => (
|
||||
<>
|
||||
<Grid {...gridProps} rowsProp={["100px", ["100px", "1fr"], "auto"]}>
|
||||
<Box {...boxProps} backgroundProp="#F4991A">
|
||||
<Text>100px</Text>
|
||||
</Box>
|
||||
<Box {...boxProps} backgroundProp="#F2EAD3">
|
||||
<Text>minmax(100px,1fr)</Text>
|
||||
</Box>
|
||||
<Box {...boxProps} backgroundProp="#F9F5F0">
|
||||
<Text>auto</Text>
|
||||
</Box>
|
||||
</Grid>
|
||||
|
||||
<Grid {...gridProps} rowsProp="50px">
|
||||
<Box {...boxProps} backgroundProp="#F4991A">
|
||||
<Text>50px</Text>
|
||||
</Box>
|
||||
<Box {...boxProps} backgroundProp="#F2EAD3">
|
||||
<Text>50px</Text>
|
||||
</Box>
|
||||
<Box {...boxProps} backgroundProp="#F9F5F0">
|
||||
<Text>50px</Text>
|
||||
</Box>
|
||||
</Grid>
|
||||
</>
|
||||
))
|
||||
.add("Layout", () => (
|
||||
<Grid
|
||||
widthProp="100vw"
|
||||
heightProp="100vh"
|
||||
gridGap="10px"
|
||||
rowsProp={["auto", "1fr", "auto"]}
|
||||
columnsProp={[["100px", "1fr"], "3fr", ["100px", "1fr"]]}
|
||||
areasProp={[
|
||||
{ name: "header", start: [0, 0], end: [2, 0] },
|
||||
{ name: "navbar", start: [0, 1], end: [0, 1] },
|
||||
{ name: "main", start: [1, 1], end: [1, 1] },
|
||||
{ name: "sidebar", start: [2, 1], end: [2, 1] },
|
||||
{ name: "footer", start: [0, 2], end: [2, 2] },
|
||||
]}
|
||||
>
|
||||
<Box {...boxProps} gridArea="header" backgroundProp="#F4991A">
|
||||
<Text>header</Text>
|
||||
</Box>
|
||||
<Box {...boxProps} gridArea="navbar" backgroundProp="#F2EAD3">
|
||||
<Text>navbar</Text>
|
||||
</Box>
|
||||
<Box {...boxProps} gridArea="main" backgroundProp="#F9F5F0">
|
||||
<Text>main</Text>
|
||||
</Box>
|
||||
<Box {...boxProps} gridArea="sidebar" backgroundProp="#F2EAD3">
|
||||
<Text>sidebar</Text>
|
||||
</Box>
|
||||
<Box {...boxProps} gridArea="footer" backgroundProp="#F4991A">
|
||||
<Text>footer</Text>
|
||||
</Box>
|
||||
</Grid>
|
||||
));
|
||||
*/
|
||||
|
||||
@ -1,69 +0,0 @@
|
||||
import React from "react";
|
||||
import { storiesOf } from "@storybook/react";
|
||||
import withReadme from "storybook-readme/with-readme";
|
||||
import Readme from "./README.md";
|
||||
import GroupButton from ".";
|
||||
import DropDownItem from "../drop-down-item";
|
||||
|
||||
const rowStyle = { marginTop: 8 };
|
||||
const headerStyle = { marginLeft: 16 };
|
||||
|
||||
storiesOf("Components|GroupButton", module)
|
||||
.addDecorator(withReadme(Readme))
|
||||
.addParameters({ options: { showAddonPanel: false } })
|
||||
.add("all", () => (
|
||||
<>
|
||||
<div
|
||||
style={{
|
||||
padding: "8px 0 0 40px",
|
||||
display: "grid",
|
||||
gridTemplateColumns: "1fr 1fr 1fr 1fr",
|
||||
}}
|
||||
>
|
||||
<div style={rowStyle}>
|
||||
<div style={headerStyle}>Active</div>
|
||||
<div>
|
||||
<GroupButton />
|
||||
</div>
|
||||
<div>
|
||||
<GroupButton isDropdown>
|
||||
<DropDownItem label="Action 1" />
|
||||
</GroupButton>
|
||||
</div>
|
||||
</div>
|
||||
<div style={rowStyle}>
|
||||
<div style={headerStyle}>Hover</div>
|
||||
<div>
|
||||
<GroupButton hovered />
|
||||
</div>
|
||||
<div>
|
||||
<GroupButton isDropdown hovered>
|
||||
<DropDownItem label="Action 2" />
|
||||
</GroupButton>
|
||||
</div>
|
||||
</div>
|
||||
<div style={rowStyle}>
|
||||
<div style={headerStyle}>Click*(Press)</div>
|
||||
<div>
|
||||
<GroupButton activated />
|
||||
</div>
|
||||
<div>
|
||||
<GroupButton isDropdown activated>
|
||||
<DropDownItem label="Action 3" />
|
||||
</GroupButton>
|
||||
</div>
|
||||
</div>
|
||||
<div style={rowStyle}>
|
||||
<div style={headerStyle}>Disable</div>
|
||||
<div>
|
||||
<GroupButton disabled />
|
||||
</div>
|
||||
<div>
|
||||
<GroupButton isDropdown disabled>
|
||||
<DropDownItem label="Action 4" />
|
||||
</GroupButton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
));
|
||||
@ -1,23 +1,107 @@
|
||||
import React from "react";
|
||||
import { storiesOf } from "@storybook/react";
|
||||
import { withKnobs, boolean, text } from "@storybook/addon-knobs/react";
|
||||
import withReadme from "storybook-readme/with-readme";
|
||||
import Readme from "./README.md";
|
||||
import GroupButton from ".";
|
||||
import GroupButton from "./";
|
||||
import DropDownItem from "../drop-down-item";
|
||||
|
||||
storiesOf("Components|GroupButton", module)
|
||||
.addDecorator(withKnobs)
|
||||
.addDecorator(withReadme(Readme))
|
||||
.add("base", () => (
|
||||
<GroupButton
|
||||
label={text("Label", "Base group button")}
|
||||
disabled={boolean("disabled", false)}
|
||||
isDropdown={boolean("isDropdown", false)}
|
||||
opened={boolean("opened", false)}
|
||||
export default {
|
||||
title: "Components/GroupButton",
|
||||
component: GroupButton,
|
||||
subcomponents: { DropDownItem },
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
component: `Base Button is used for a group action on a page
|
||||
|
||||
It can be used as selector with checkbox for this following properties are combined: _isDropdown_, _isSeparato
|
||||
_isSeparator_ will add vertical bar after button.
|
||||
|
||||
_isDropdown_ allows adding items to dropdown list in children.
|
||||
|
||||
For health of checkbox, button inherits part of properties of this component.
|
||||
`,
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const Template = (args) => {
|
||||
return (
|
||||
<div style={{ height: "200px", position: "relative" }}>
|
||||
<GroupButton {...args}>
|
||||
<DropDownItem label="Action 1" />
|
||||
<DropDownItem label="Action 2" />
|
||||
<DropDownItem label="Action 3" />
|
||||
</GroupButton>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const Default = Template.bind({});
|
||||
Default.args = {
|
||||
label: "Base group button",
|
||||
disabled: false,
|
||||
isDropdown: true,
|
||||
opened: true,
|
||||
};
|
||||
|
||||
const AllTemplate = (args) => {
|
||||
const rowStyle = { marginTop: 8 };
|
||||
const headerStyle = { marginLeft: 16 };
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
padding: "8px 0 0 40px",
|
||||
display: "grid",
|
||||
gridTemplateColumns: "1fr 1fr 1fr 1fr",
|
||||
height: "200px",
|
||||
position: "relative",
|
||||
}}
|
||||
>
|
||||
<DropDownItem label="Action 1" />
|
||||
<DropDownItem label="Action 2" />
|
||||
<DropDownItem label="Action 3" />
|
||||
</GroupButton>
|
||||
));
|
||||
<div style={rowStyle}>
|
||||
<div style={headerStyle}>Active</div>
|
||||
<div>
|
||||
<GroupButton />
|
||||
</div>
|
||||
<div>
|
||||
<GroupButton isDropdown>
|
||||
<DropDownItem label="Action 1" />
|
||||
</GroupButton>
|
||||
</div>
|
||||
</div>
|
||||
<div style={rowStyle}>
|
||||
<div style={headerStyle}>Hover</div>
|
||||
<div>
|
||||
<GroupButton hovered />
|
||||
</div>
|
||||
<div>
|
||||
<GroupButton isDropdown hovered>
|
||||
<DropDownItem label="Action 2" />
|
||||
</GroupButton>
|
||||
</div>
|
||||
</div>
|
||||
<div style={rowStyle}>
|
||||
<div style={headerStyle}>Click*(Press)</div>
|
||||
<div>
|
||||
<GroupButton activated />
|
||||
</div>
|
||||
<div>
|
||||
<GroupButton isDropdown activated>
|
||||
<DropDownItem label="Action 3" />
|
||||
</GroupButton>
|
||||
</div>
|
||||
</div>
|
||||
<div style={rowStyle}>
|
||||
<div style={headerStyle}>Disable</div>
|
||||
<div>
|
||||
<GroupButton disabled />
|
||||
</div>
|
||||
<div>
|
||||
<GroupButton isDropdown disabled>
|
||||
<DropDownItem label="Action 4" />
|
||||
</GroupButton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const All = AllTemplate.bind({});
|
||||
|
||||
@ -166,25 +166,43 @@ class GroupButton extends React.Component {
|
||||
|
||||
GroupButton.propTypes = {
|
||||
activated: PropTypes.bool,
|
||||
/** Initial value of checkbox */
|
||||
checked: PropTypes.bool,
|
||||
/** Children elements */
|
||||
children: PropTypes.any,
|
||||
/** Accepts class */
|
||||
className: PropTypes.string,
|
||||
/** Tells when the button should present a disabled state */
|
||||
disabled: PropTypes.bool,
|
||||
/** Selected height value of DropDown */
|
||||
dropDownMaxHeight: PropTypes.number,
|
||||
/** Value of font weight */
|
||||
fontWeight: PropTypes.string,
|
||||
hovered: PropTypes.bool,
|
||||
/** Accepts id */
|
||||
id: PropTypes.string,
|
||||
/** Tells when the button should present a dropdown state */
|
||||
isDropdown: PropTypes.bool,
|
||||
/** Initial value of Indeterminate checkbox */
|
||||
isIndeterminate: PropTypes.bool,
|
||||
isSelect: PropTypes.bool,
|
||||
/** Tells when the button should contain separator */
|
||||
isSeparator: PropTypes.bool,
|
||||
/** Value of the group button */
|
||||
label: PropTypes.string,
|
||||
/** Called when checkbox is checked */
|
||||
onChange: PropTypes.func,
|
||||
/** Property for onClick action */
|
||||
onClick: PropTypes.func,
|
||||
/** Called when value is selected in selector */
|
||||
onSelect: PropTypes.func,
|
||||
/** Tells when the button should be opened by default */
|
||||
opened: PropTypes.bool,
|
||||
/** Selected value label */
|
||||
selected: PropTypes.string,
|
||||
/** Accepts css style */
|
||||
style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
|
||||
/** Value of tab index */
|
||||
tabIndex: PropTypes.number,
|
||||
};
|
||||
|
||||
|
||||
@ -1,159 +1,189 @@
|
||||
import React from "react";
|
||||
import { storiesOf } from "@storybook/react";
|
||||
import { withKnobs, text, boolean } from "@storybook/addon-knobs/react";
|
||||
import { BooleanValue } from "react-values";
|
||||
import withReadme from "storybook-readme/with-readme";
|
||||
import styled from "@emotion/styled";
|
||||
import Readme from "./README.md";
|
||||
import React, { useState } from "react";
|
||||
import styled from "styled-components";
|
||||
|
||||
import GroupButtonsMenu from ".";
|
||||
import DropDownItem from "../drop-down-item";
|
||||
import Button from "../button";
|
||||
import DropDownItem from "../drop-down-item";
|
||||
|
||||
export default {
|
||||
title: "Components/GroupButtonsMenu",
|
||||
component: GroupButtonsMenu,
|
||||
argTypes: {
|
||||
disableOdd: { description: "Disable odd", control: "boolean" },
|
||||
disableEven: { description: "Disable even", control: "boolean" },
|
||||
onClose: { action: "onClose" },
|
||||
onChange: { action: "onChange" },
|
||||
onClick: { action: "onClick" },
|
||||
onSelectClick: { action: "onSelect", table: { disable: true } },
|
||||
onItemClick: { action: "onItemClick", table: { disable: true } },
|
||||
},
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
component: "Menu for group actions on a page",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const GroupButtonsMenuContainer = styled.div`
|
||||
height: 2000px;
|
||||
`;
|
||||
|
||||
storiesOf("Components|GroupButtonsMenu", module)
|
||||
.addDecorator(withReadme(Readme))
|
||||
.addDecorator(withKnobs)
|
||||
.add("base", () => {
|
||||
const disableEven = boolean("disable even", false);
|
||||
const disableOdd = boolean("disable odd", false);
|
||||
const Template = ({
|
||||
disableEven,
|
||||
disableOdd,
|
||||
onClose,
|
||||
onChange,
|
||||
onSelectClick,
|
||||
onItemClick,
|
||||
...rest
|
||||
}) => {
|
||||
const [isVisible, setIsVisible] = useState(rest.visible);
|
||||
const [checked, setChecked] = useState(rest.checked);
|
||||
const [groupItems, setGroupItem] = useState([
|
||||
{
|
||||
label: "Select",
|
||||
isDropdown: true,
|
||||
isSeparator: true,
|
||||
isSelect: true,
|
||||
fontWeight: "bold",
|
||||
children: [
|
||||
<DropDownItem key="aaa" label="aaa" />,
|
||||
<DropDownItem key="bbb" label="bbb" />,
|
||||
<DropDownItem key="ccc" label="ccc" />,
|
||||
],
|
||||
onSelect: (a) => onSelectClick(a),
|
||||
},
|
||||
{
|
||||
label: "Menu item",
|
||||
disabled: disableEven,
|
||||
onClick: () => onItemClick("Menu item action"),
|
||||
},
|
||||
{
|
||||
label: "Menu item",
|
||||
disabled: disableOdd,
|
||||
onClick: () => onItemClick("Menu item action"),
|
||||
},
|
||||
{
|
||||
label: "Menu item",
|
||||
disabled: disableEven,
|
||||
onClick: () => onItemClick("Menu item action"),
|
||||
},
|
||||
{
|
||||
label: "Menu item",
|
||||
disabled: disableOdd,
|
||||
onClick: () => onItemClick("Menu item action"),
|
||||
},
|
||||
{
|
||||
label: "Menu item",
|
||||
disabled: disableEven,
|
||||
onClick: () => onItemClick("Menu item action"),
|
||||
},
|
||||
{
|
||||
label: "Menu item",
|
||||
disabled: disableOdd,
|
||||
onClick: () => onItemClick("Menu item action"),
|
||||
},
|
||||
{
|
||||
label: "Menu item",
|
||||
disabled: disableEven,
|
||||
onClick: () => onItemClick("Menu item action"),
|
||||
},
|
||||
{
|
||||
label: "Menu item",
|
||||
disabled: disableOdd,
|
||||
onClick: () => onItemClick("Menu item action"),
|
||||
},
|
||||
{
|
||||
label: "Menu item",
|
||||
disabled: disableEven,
|
||||
onClick: () => onItemClick("Menu item action"),
|
||||
},
|
||||
{
|
||||
label: "Menu item",
|
||||
disabled: disableOdd,
|
||||
onClick: () => onItemClick("Menu item action"),
|
||||
},
|
||||
{
|
||||
label: "Menu item",
|
||||
disabled: disableEven,
|
||||
onClick: () => onItemClick("Menu item action"),
|
||||
},
|
||||
{
|
||||
label: "Menu item",
|
||||
disabled: disableOdd,
|
||||
onClick: () => onItemClick("Menu item action"),
|
||||
},
|
||||
{
|
||||
label: "Menu item",
|
||||
disabled: disableEven,
|
||||
onClick: () => onItemClick("Menu item action"),
|
||||
},
|
||||
{
|
||||
label: "Menu item",
|
||||
disabled: disableOdd,
|
||||
onClick: () => onItemClick("Menu item action"),
|
||||
},
|
||||
{
|
||||
label: "Menu item",
|
||||
disabled: disableEven,
|
||||
onClick: () => onItemClick("Menu item action"),
|
||||
},
|
||||
{
|
||||
label: "Menu item",
|
||||
disabled: disableOdd,
|
||||
onClick: () => onItemClick("Menu item action"),
|
||||
},
|
||||
{
|
||||
label: "Menu item",
|
||||
disabled: disableEven,
|
||||
onClick: () => onItemClick("Menu item action"),
|
||||
},
|
||||
{
|
||||
label: "Menu item",
|
||||
disabled: disableOdd,
|
||||
onClick: () => onItemClick("Menu item action"),
|
||||
},
|
||||
]);
|
||||
|
||||
const groupItems = [
|
||||
{
|
||||
label: "Select",
|
||||
isDropdown: true,
|
||||
isSeparator: true,
|
||||
isSelect: true,
|
||||
fontWeight: "bold",
|
||||
children: [
|
||||
<DropDownItem key="aaa" label="aaa" />,
|
||||
<DropDownItem key="bbb" label="bbb" />,
|
||||
<DropDownItem key="ccc" label="ccc" />,
|
||||
],
|
||||
onSelect: (a) => console.log(a),
|
||||
},
|
||||
{
|
||||
label: "Menu item",
|
||||
disabled: disableEven,
|
||||
onClick: () => console.log("Menu item action"),
|
||||
},
|
||||
{
|
||||
label: "Menu item",
|
||||
disabled: disableOdd,
|
||||
onClick: () => console.log("Menu item action"),
|
||||
},
|
||||
{
|
||||
label: "Menu item",
|
||||
disabled: disableEven,
|
||||
onClick: () => console.log("Menu item action"),
|
||||
},
|
||||
{
|
||||
label: "Menu item",
|
||||
disabled: disableOdd,
|
||||
onClick: () => console.log("Menu item action"),
|
||||
},
|
||||
{
|
||||
label: "Menu item",
|
||||
disabled: disableEven,
|
||||
onClick: () => console.log("Menu item action"),
|
||||
},
|
||||
{
|
||||
label: "Menu item",
|
||||
disabled: disableOdd,
|
||||
onClick: () => console.log("Menu item action"),
|
||||
},
|
||||
{
|
||||
label: "Menu item",
|
||||
disabled: disableEven,
|
||||
onClick: () => console.log("Menu item action"),
|
||||
},
|
||||
{
|
||||
label: "Menu item",
|
||||
disabled: disableOdd,
|
||||
onClick: () => console.log("Menu item action"),
|
||||
},
|
||||
{
|
||||
label: "Menu item",
|
||||
disabled: disableEven,
|
||||
onClick: () => console.log("Menu item action"),
|
||||
},
|
||||
{
|
||||
label: "Menu item",
|
||||
disabled: disableOdd,
|
||||
onClick: () => console.log("Menu item action"),
|
||||
},
|
||||
{
|
||||
label: "Menu item",
|
||||
disabled: disableEven,
|
||||
onClick: () => console.log("Menu item action"),
|
||||
},
|
||||
{
|
||||
label: "Menu item",
|
||||
disabled: disableOdd,
|
||||
onClick: () => console.log("Menu item action"),
|
||||
},
|
||||
{
|
||||
label: "Menu item",
|
||||
disabled: disableEven,
|
||||
onClick: () => console.log("Menu item action"),
|
||||
},
|
||||
{
|
||||
label: "Menu item",
|
||||
disabled: disableOdd,
|
||||
onClick: () => console.log("Menu item action"),
|
||||
},
|
||||
{
|
||||
label: "Menu item",
|
||||
disabled: disableEven,
|
||||
onClick: () => console.log("Menu item action"),
|
||||
},
|
||||
{
|
||||
label: "Menu item",
|
||||
disabled: disableOdd,
|
||||
onClick: () => console.log("Menu item action"),
|
||||
},
|
||||
{
|
||||
label: "Menu item",
|
||||
disabled: disableEven,
|
||||
onClick: () => console.log("Menu item action"),
|
||||
},
|
||||
{
|
||||
label: "Menu item",
|
||||
disabled: disableOdd,
|
||||
onClick: () => console.log("Menu item action"),
|
||||
},
|
||||
];
|
||||
const toggleVisible = () => setIsVisible(!isVisible);
|
||||
const toggleChecked = () => {
|
||||
onChange(!checked);
|
||||
setChecked(!checked);
|
||||
};
|
||||
|
||||
return (
|
||||
<BooleanValue>
|
||||
{({ value: visible, toggle }) => (
|
||||
<>
|
||||
<Button
|
||||
label="Show menu"
|
||||
onClick={() => {
|
||||
toggle(visible);
|
||||
}}
|
||||
/>
|
||||
<GroupButtonsMenuContainer>
|
||||
<BooleanValue>
|
||||
{({ value: checked, toggle }) => (
|
||||
<GroupButtonsMenu
|
||||
checked={checked}
|
||||
menuItems={groupItems}
|
||||
visible={visible}
|
||||
moreLabel={text("moreLabel", "More")}
|
||||
closeTitle={text("closeTitle", "Close")}
|
||||
onClose={() => console.log("Close action")}
|
||||
onChange={() => toggle(checked)}
|
||||
selected={groupItems[0].label}
|
||||
/>
|
||||
)}
|
||||
</BooleanValue>
|
||||
</GroupButtonsMenuContainer>
|
||||
</>
|
||||
)}
|
||||
</BooleanValue>
|
||||
);
|
||||
});
|
||||
return (
|
||||
<>
|
||||
<Button
|
||||
label={`${isVisible ? "Hide" : "Show"} menu`}
|
||||
primary
|
||||
size="medium"
|
||||
onClick={toggleVisible}
|
||||
/>
|
||||
|
||||
<GroupButtonsMenuContainer>
|
||||
<GroupButtonsMenu
|
||||
{...rest}
|
||||
checked={checked}
|
||||
menuItems={groupItems}
|
||||
visible={isVisible}
|
||||
onClose={() => {
|
||||
toggleVisible();
|
||||
onClose("Close action");
|
||||
}}
|
||||
onChange={toggleChecked}
|
||||
selected={groupItems[0].label}
|
||||
/>
|
||||
</GroupButtonsMenuContainer>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export const Default = Template.bind({});
|
||||
Default.args = {
|
||||
disableEven: false,
|
||||
disableOdd: false,
|
||||
moreLabel: "More",
|
||||
closeTitle: "Close",
|
||||
};
|
||||
|
||||
@ -197,16 +197,25 @@ class GroupButtonsMenu extends React.Component {
|
||||
}
|
||||
|
||||
GroupButtonsMenu.propTypes = {
|
||||
/** onClick action on GroupButton's */
|
||||
onClick: PropTypes.func,
|
||||
/** onClose action if menu closing */
|
||||
onClose: PropTypes.func,
|
||||
/** onChange action on use selecting */
|
||||
onChange: PropTypes.func,
|
||||
onSelect: PropTypes.func,
|
||||
/** Button collection */
|
||||
menuItems: PropTypes.array,
|
||||
/** Sets initial value of checkbox */
|
||||
checked: PropTypes.bool,
|
||||
isIndeterminate: PropTypes.bool,
|
||||
/** Selected header value */
|
||||
selected: PropTypes.string,
|
||||
/** Sets menu visibility */
|
||||
visible: PropTypes.bool,
|
||||
/** Label for more button */
|
||||
moreLabel: PropTypes.string,
|
||||
/** Title for close menu button */
|
||||
closeTitle: PropTypes.string,
|
||||
sectionWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
|
||||
};
|
||||
|
||||
@ -1,36 +1,33 @@
|
||||
import React from "react";
|
||||
import { storiesOf } from "@storybook/react";
|
||||
import {
|
||||
text,
|
||||
boolean,
|
||||
withKnobs,
|
||||
color,
|
||||
select,
|
||||
} from "@storybook/addon-knobs/react";
|
||||
import Heading from ".";
|
||||
import Section from "../../../.storybook/decorators/section";
|
||||
import withReadme from "storybook-readme/with-readme";
|
||||
import Readme from "./README.md";
|
||||
|
||||
const levels = [1, 2, 3, 4, 5, 6];
|
||||
const size = ["xsmall", "small", "medium", "large", "xlarge"];
|
||||
export default {
|
||||
title: "Components/Heading",
|
||||
component: Heading,
|
||||
argTypes: {
|
||||
color: { control: "color" },
|
||||
headerText: { control: "text", description: "Header text" },
|
||||
},
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
component: "Heading text structured in levels",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
storiesOf("Components|Heading", module)
|
||||
.addDecorator(withKnobs)
|
||||
.addDecorator(withReadme(Readme))
|
||||
.add("base", () => (
|
||||
<Section>
|
||||
<div style={{ width: "100%" }}>
|
||||
<Heading
|
||||
color={color("color", "#333333")}
|
||||
level={select("level", levels, 1)}
|
||||
title={text("title", "")}
|
||||
truncate={boolean("truncate", false)}
|
||||
isInline={boolean("isInline", false)}
|
||||
size={select("size", size, "large")}
|
||||
>
|
||||
{text("Text", "Sample text Heading")}
|
||||
</Heading>
|
||||
</div>
|
||||
</Section>
|
||||
));
|
||||
const Template = ({ headerText, ...args }) => {
|
||||
return <Heading {...args}>{headerText}</Heading>;
|
||||
};
|
||||
|
||||
export const Default = Template.bind({});
|
||||
Default.args = {
|
||||
color: "#333333",
|
||||
level: "1",
|
||||
title: "",
|
||||
truncate: false,
|
||||
isInline: false,
|
||||
size: "large",
|
||||
headerText: "Sample text Heading",
|
||||
};
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
import React from "react";
|
||||
import PropTypes from "prop-types";
|
||||
import StyledHeading from "./styled-heading"
|
||||
|
||||
import StyledHeading from "./styled-heading";
|
||||
|
||||
const Heading = ({ level, color, ...rest }) => {
|
||||
return (
|
||||
@ -10,12 +9,19 @@ const Heading = ({ level, color, ...rest }) => {
|
||||
};
|
||||
|
||||
Heading.propTypes = {
|
||||
/** The heading level. It corresponds to the number after the 'H' for the DOM tag. Set the level for semantic accuracy and accessibility. */
|
||||
level: PropTypes.oneOf([1, 2, 3, 4, 5, 6]),
|
||||
/** Specifies the headline color */
|
||||
color: PropTypes.string,
|
||||
/** Title */
|
||||
title: PropTypes.string,
|
||||
/** Disables word wrapping */
|
||||
truncate: PropTypes.bool,
|
||||
/** Sets the 'display: inline-block' property */
|
||||
isInline: PropTypes.bool,
|
||||
/** Sets the size of headline */
|
||||
size: PropTypes.oneOf(["xsmall", "small", "medium", "large", "xlarge"]),
|
||||
/** Accepts css class */
|
||||
className: PropTypes.string,
|
||||
};
|
||||
|
||||
|
||||
@ -1,71 +1,97 @@
|
||||
import React from "react";
|
||||
import { storiesOf } from "@storybook/react";
|
||||
import { withKnobs, number } from "@storybook/addon-knobs/react";
|
||||
import withReadme from "storybook-readme/with-readme";
|
||||
import Readme from "./README.md";
|
||||
import HelpButton from ".";
|
||||
import Section from "../../../.storybook/decorators/section";
|
||||
|
||||
import Text from "../text";
|
||||
import Link from "../link";
|
||||
import styled from "styled-components";
|
||||
import HelpButton from ".";
|
||||
|
||||
const IconButtons = styled.div`
|
||||
margin-top: 150px;
|
||||
margin-left: 70px;
|
||||
display: flex;
|
||||
export default {
|
||||
title: "Components/HelpButton",
|
||||
component: HelpButton,
|
||||
subcomponents: { Text, Link },
|
||||
argTypes: {},
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
component: "HelpButton is used for a action on a page",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
.icon-button {
|
||||
margin-left: 10px;
|
||||
}
|
||||
`;
|
||||
const Template = (args) => {
|
||||
return (
|
||||
<>
|
||||
<HelpButton {...args} />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
storiesOf("Components|Buttons", module)
|
||||
.addDecorator(withKnobs)
|
||||
.addDecorator(withReadme(Readme))
|
||||
.add("help button", () => {
|
||||
return (
|
||||
<Section>
|
||||
<IconButtons>
|
||||
<HelpButton
|
||||
displayType="dropdown"
|
||||
offsetTop={number("offsetTop", 0)}
|
||||
offsetRight={number("offsetRight", 0)}
|
||||
offsetBottom={number("offsetBottom", 0)}
|
||||
offsetLeft={number("offsetLeft", 0)}
|
||||
tooltipContent={
|
||||
<Text fontSize="13px">Paste you tooltip content here</Text>
|
||||
}
|
||||
/>
|
||||
<HelpButton
|
||||
displayType="aside"
|
||||
helpButtonHeaderContent="Aside position HelpButton"
|
||||
tooltipContent={
|
||||
<Text>
|
||||
You tooltip content with{" "}
|
||||
<Link
|
||||
isHovered={true}
|
||||
href="http://localhost:6006/?path=/story/components-buttons--help-button"
|
||||
>
|
||||
link
|
||||
</Link>
|
||||
</Text>
|
||||
}
|
||||
/>
|
||||
<HelpButton
|
||||
displayType="auto"
|
||||
helpButtonHeaderContent="Auto position HelpButton"
|
||||
tooltipContent={
|
||||
<>
|
||||
<p>You can put every thing here</p>
|
||||
<ul style={{ marginBottom: 0 }}>
|
||||
<li>Word</li>
|
||||
<li>Chart</li>
|
||||
<li>Else</li>
|
||||
</ul>
|
||||
</>
|
||||
}
|
||||
/>
|
||||
</IconButtons>
|
||||
</Section>
|
||||
);
|
||||
});
|
||||
export const Default = Template.bind({});
|
||||
Default.args = {
|
||||
displayType: "auto",
|
||||
offsetTop: 0,
|
||||
offsetRight: 0,
|
||||
offsetBottom: 0,
|
||||
offsetLeft: 0,
|
||||
tooltipContent: <Text fontSize="13px">Paste you tooltip content here</Text>,
|
||||
};
|
||||
|
||||
const DropDownTemplate = (args) => {
|
||||
return (
|
||||
<HelpButton
|
||||
displayType="dropdown"
|
||||
offsetTop={0}
|
||||
offsetRight={0}
|
||||
offsetBottom={0}
|
||||
offsetLeft={0}
|
||||
tooltipContent={
|
||||
<Text fontSize="13px">Paste you tooltip content here</Text>
|
||||
}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export const DropDownPosition = DropDownTemplate.bind({});
|
||||
|
||||
const AsideTemplate = (args) => {
|
||||
return (
|
||||
<HelpButton
|
||||
displayType="aside"
|
||||
helpButtonHeaderContent="Aside position HelpButton"
|
||||
tooltipContent={
|
||||
<Text>
|
||||
You tooltip content with{" "}
|
||||
<Link
|
||||
isHovered={true}
|
||||
href="http://localhost:6006/?path=/story/components-buttons--help-button"
|
||||
>
|
||||
link
|
||||
</Link>
|
||||
</Text>
|
||||
}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export const AsidePosition = AsideTemplate.bind({});
|
||||
|
||||
const AutoTemplate = (args) => {
|
||||
return (
|
||||
<HelpButton
|
||||
displayType="auto"
|
||||
helpButtonHeaderContent="Auto position HelpButton"
|
||||
tooltipContent={
|
||||
<>
|
||||
<p>You can put every thing here</p>
|
||||
<ul style={{ marginBottom: 0 }}>
|
||||
<li>Word</li>
|
||||
<li>Chart</li>
|
||||
<li>Else</li>
|
||||
</ul>
|
||||
</>
|
||||
}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export const AutoPosition = AutoTemplate.bind({});
|
||||
|
||||
@ -207,18 +207,23 @@ HelpButton.propTypes = {
|
||||
tooltipId: PropTypes.string,
|
||||
place: PropTypes.string,
|
||||
zIndex: PropTypes.number,
|
||||
/** Tooltip display type */
|
||||
displayType: PropTypes.oneOf(["dropdown", "aside", "auto"]),
|
||||
/** Tooltip header content (tooltip opened in aside) */
|
||||
helpButtonHeaderContent: PropTypes.string,
|
||||
iconName: PropTypes.string,
|
||||
color: PropTypes.string,
|
||||
dataTip: PropTypes.string,
|
||||
getContent: PropTypes.func,
|
||||
/** Accepts class */
|
||||
className: PropTypes.string,
|
||||
/** Accepts id */
|
||||
id: PropTypes.string,
|
||||
style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
|
||||
};
|
||||
|
||||
HelpButton.defaultProps = {
|
||||
iconName: "./static/images/question.react.svg",
|
||||
place: "top",
|
||||
offsetRight: 120,
|
||||
offsetLeft: 0,
|
||||
@ -227,7 +232,6 @@ HelpButton.defaultProps = {
|
||||
zIndex: 310,
|
||||
displayType: "auto",
|
||||
className: "icon-button",
|
||||
iconName: "/static/images/question.react.svg",
|
||||
color: "#A3A9AE",
|
||||
};
|
||||
|
||||
|
||||
@ -8,17 +8,10 @@
|
||||
"test": "jest",
|
||||
"test:watch": "jest --watch",
|
||||
"test:coverage": "jest --coverage",
|
||||
"storybook": "start-storybook -p 6006",
|
||||
"storybook": "start-storybook -p 6006 -s public",
|
||||
"build-storybook": "build-storybook"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@storybook/addon-actions": "^6.1.20",
|
||||
"@storybook/addon-controls": "^6.1.20",
|
||||
"@storybook/addon-docs": "^6.1.20",
|
||||
"@storybook/addon-essentials": "^6.1.20",
|
||||
"@storybook/addon-links": "^6.1.20",
|
||||
"@storybook/react": "^6.1.20",
|
||||
"react-values": "^0.3.3",
|
||||
"@babel/cli": "^7.12.10",
|
||||
"@babel/core": "^7.12.10",
|
||||
"@babel/plugin-proposal-class-properties": "^7.12.1",
|
||||
@ -29,6 +22,13 @@
|
||||
"@babel/preset-react": "^7.12.10",
|
||||
"@emotion/babel-preset-css-prop": "^10.2.1",
|
||||
"@emotion/styled": "^10.0.27",
|
||||
"@storybook/addon-actions": "^6.1.20",
|
||||
"@storybook/addon-controls": "^6.1.20",
|
||||
"@storybook/addon-docs": "^6.1.20",
|
||||
"@storybook/addon-essentials": "^6.1.20",
|
||||
"@storybook/addon-links": "^6.1.20",
|
||||
"@storybook/addon-viewport": "^6.1.21",
|
||||
"@storybook/react": "^6.1.20",
|
||||
"@svgr/rollup": "^5.5.0",
|
||||
"@svgr/webpack": "^5.5.0",
|
||||
"@testing-library/react": "^9.5.0",
|
||||
@ -55,6 +55,7 @@
|
||||
"prettier": "2.1.2",
|
||||
"react": "^16.14.0",
|
||||
"react-dom": "^16.14.0",
|
||||
"react-values": "^0.3.3",
|
||||
"rollup": "^1.32.1",
|
||||
"rollup-plugin-babel": "^4.4.0",
|
||||
"rollup-plugin-cleanup": "^3.2.1",
|
||||
|
||||
@ -0,0 +1,3 @@
|
||||
<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 9C0 9.55228 0.447715 10 1 10H5C5.55228 10 6 9.55228 6 9C6 8.44772 5.55228 8 5 8H1C0.447715 8 0 8.44772 0 9ZM0 5C0 5.55228 0.447715 6 1 6H7C7.55228 6 8 5.55228 8 5C8 4.44772 7.55228 4 7 4H1C0.447715 4 0 4.44772 0 5ZM1 2C0.447715 2 0 1.55229 0 1C0 0.447715 0.447715 0 1 0H9C9.55229 0 10 0.447715 10 1C10 1.55229 9.55228 2 9 2H1Z" fill="#A3A9AE"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 500 B |
@ -0,0 +1,3 @@
|
||||
<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.5 0C7.67157 0 7 0.671573 7 1.5V7H1.5C0.671573 7 0 7.67157 0 8.5C0 9.32843 0.671573 10 1.5 10H7V15.5C7 16.3284 7.67157 17 8.5 17C9.32843 17 10 16.3284 10 15.5V10H15.5C16.3284 10 17 9.32843 17 8.5C17 7.67157 16.3284 7 15.5 7H10V1.5C10 0.671573 9.32843 0 8.5 0Z" fill="#A3A9AE"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 432 B |
@ -0,0 +1,3 @@
|
||||
<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M15.9913 7.00235L5.7581 7.00934L9.90483 2.58703C10.1145 2.37637 10.2295 2.09099 10.2295 1.79147C10.2295 1.49195 10.1145 1.20857 9.90483 0.997406L9.2385 0.327144C9.02897 0.116481 8.74977 0 8.45202 0C8.15411 0 7.87474 0.115649 7.66521 0.326312L0.32456 7.70602C0.114203 7.91751 -0.000823092 8.19923 4.43411e-06 8.49892C-0.000823092 8.80027 0.114203 9.08215 0.32456 9.29332L7.66521 16.6737C7.87474 16.8842 8.15395 17 8.45202 17C8.74977 17 9.02897 16.884 9.2385 16.6737L9.90483 16.0034C10.1145 15.7931 10.2295 15.5122 10.2295 15.2127C10.2295 14.9133 10.1145 14.6473 9.90483 14.4368L5.7581 10.0027H16.0548C16.6683 10.0027 17 9.56605 17 8.94953V8.00155C17 7.38503 16.6048 7.00235 15.9913 7.00235Z" fill="#A3A9AE"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 860 B |
@ -0,0 +1,4 @@
|
||||
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="6" cy="6" r="6" fill="#F21C0E"/>
|
||||
<path d="M6 9.93747C5.48319 9.93747 5.0625 9.51678 5.0625 8.99997C5.0625 8.48316 5.48319 8.06247 6 8.06247C6.51681 8.06247 6.9375 8.48316 6.9375 8.99997C6.9375 9.51678 6.51681 9.93747 6 9.93747ZM6.9375 6.06253C6.9375 6.57934 6.51682 6.99999 6 6.99999C5.48319 6.99999 5.0625 6.57934 5.0625 6.06253L5.0625 3.00002C5.0625 2.48321 5.48319 2.0625 6 2.0625C6.51681 2.0625 6.9375 2.48321 6.9375 3.00002L6.9375 6.06253Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 576 B |
@ -0,0 +1,4 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M3.46129 22L14.5387 22C15.3445 22 16 21.3445 16 20.5388L16 16.9046L9.59254 16.9046C8.05121 16.9046 7.0996 15.8556 7.0996 14.3144L7.0996 8L3.46128 8C2.65553 8 1.99999 8.65549 1.99999 9.4612L1.99999 20.5388C2.00003 21.3445 2.65553 22 3.46129 22Z" fill="#A3A9AE"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.43787 16L20.5622 16C21.3549 16 22 15.3551 22 14.5623L22 3.43767C21.9999 2.64493 21.355 2 20.5621 2L9.43782 2C8.64499 2 7.99998 2.64493 7.99998 3.43762L7.99999 14.5623C7.99994 15.3551 8.64503 16 9.43787 16ZM15 13C14.4477 13 14 12.5523 14 12L14 10.5C14 10.2239 13.7761 10 13.5 10L12 10C11.4477 10 11 9.55229 11 9C11 8.44772 11.4477 8 12 8L13.5 8C13.7761 8 14 7.77614 14 7.5L14 6C14 5.44772 14.4477 5 15 5C15.5523 5 16 5.44772 16 6L16 7.5C16 7.77614 16.2238 8 16.5 8L18 8C18.5523 8 19 8.44772 19 9C19 9.55228 18.5523 10 18 10L16.5 10C16.2238 10 16 10.2239 16 10.5L16 12C16 12.5523 15.5523 13 15 13Z" fill="#A3A9AE"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.0 KiB |
@ -0,0 +1,3 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M5 2C4.44772 2 4 2.44772 4 3L4 21C4 21.5523 4.44772 22 5 22L19 22C19.5523 22 20 21.5523 20 21L20 7L15.1111 2H5ZM9 19C9.55228 19 10 18.5523 10 18C10 17.4477 9.55228 17 9 17C8.44771 17 8 17.4477 8 18C8 18.5523 8.44771 19 9 19ZM13 18C13 18.5523 12.5523 19 12 19C11.4477 19 11 18.5523 11 18C11 17.4477 11.4477 17 12 17C12.5523 17 13 17.4477 13 18ZM15 19C15.5523 19 16 18.5523 16 18C16 17.4477 15.5523 17 15 17C14.4477 17 14 17.4477 14 18C14 18.5523 14.4477 19 15 19Z" fill="#A3A9AE"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 633 B |
@ -0,0 +1,3 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M2.99854 2H8.99885L11.9999 4.99353H20.9966C21.5488 4.99353 21.9966 5.44125 21.9966 5.99353V20C21.9966 20.5523 21.5488 21 20.9966 21H3.05905C2.50815 21 2.06101 20.5545 2.05905 20.0036L1.99854 3.00356C1.99657 2.44989 2.44486 2 2.99854 2ZM11.0003 9.1743C11.0003 8.31994 12.0024 7.85903 12.6511 8.41504L17.1145 12.2408C17.5801 12.6399 17.5801 13.3602 17.1145 13.7593L12.6511 17.5851C12.0024 18.1411 11.0003 17.6802 11.0003 16.8259V16.0005C11.0003 15.4482 10.5526 15.0005 10.0003 15.0005H7.00031C6.44802 15.0005 6.00031 14.5528 6.00031 14.0005V12.0005C6.00031 11.4482 6.44802 11.0005 7.00031 11.0005H10.0003C10.5526 11.0005 11.0003 10.5528 11.0003 10.0005V9.1743Z" fill="#A3A9AE"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 829 B |
@ -0,0 +1,3 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M2.25 5C2.25 4.44772 2.69772 4 3.25 4H7L7.00959 1.99522C7.01222 1.44481 7.45916 1 8.00958 1H15C15.5523 1 16 1.44772 16 2V4H19.5C20.0523 4 20.5 4.44772 20.5 5V6C20.5 6.55228 20.0523 7 19.5 7H3.25C2.69772 7 2.25 6.55228 2.25 6V5ZM4 8H4.03965H18.9604C18.9802 8 19 20.843 19 20.843C19 21.4793 18.4648 22 17.8106 22H5.18944C4.53525 22 4 21.4793 4 20.843V8ZM6.5 10C6.22386 10 6 10.2239 6 10.5V19.5C6 19.7761 6.22386 20 6.5 20C6.77614 20 7 19.7761 7 19.5V10.5C7 10.2239 6.77614 10 6.5 10ZM11 10.5C11 10.2239 11.2239 10 11.5 10C11.7761 10 12 10.2239 12 10.5V19.5C12 19.7761 11.7761 20 11.5 20C11.2239 20 11 19.7761 11 19.5V10.5ZM16.5 10C16.2239 10 16 10.2239 16 10.5V19.5C16 19.7761 16.2239 20 16.5 20C16.7761 20 17 19.7761 17 19.5V10.5C17 10.2239 16.7761 10 16.5 10ZM14 3H9V4H14V3Z" fill="#A3A9AE"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 945 B |
@ -0,0 +1,3 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M4.19048 18.9959V19H19.0476V18.9965C21.7997 18.8953 24 16.6109 24 13.8077C24 10.9401 21.6975 8.61538 18.8571 8.61538H18.5923C17.7367 5.89494 16 3 11.619 3C7 3 4.77093 6.68754 4.5 10.1538H4.38095C1.96142 10.1538 0 12.1341 0 14.5769C0 16.9553 1.85931 18.8952 4.19048 18.9959ZM10.009 19L14.0092 19L14.0092 16.5C14.0092 16.2239 14.2331 16 14.5092 16H15.8258C16.6801 16 17.141 14.9979 16.585 14.3492L12.7593 9.8858C12.3602 9.42019 11.6398 9.42019 11.2407 9.8858L7.41496 14.3492C6.85896 14.9979 7.31987 16 8.17422 16H9.50902C9.78516 16 10.009 16.2239 10.009 16.5L10.009 19Z" fill="#A3A9AE"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 738 B |
@ -0,0 +1,3 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M20.8814 3H18.9943V1.02931C18.9943 0.460813 18.5335 0 17.9649 0H17.0301C16.4616 0 16.001 0.460813 16.001 1.02931V3H7.99588V1.02931C7.99588 0.460813 7.53507 0 6.96674 0H6.02914C5.46064 0 5 0.460813 5 1.02931V3H3.11844C1.95051 3 1 3.95017 1 5.11844V20.8965C1 22.0641 1.95051 23.0149 3.11844 23.0149H20.8816C22.0493 23.0149 23 22.0642 23 20.8965V5.11844C22.9998 3.95017 22.0491 3 20.8814 3ZM21 21.001H3.02614V8.00104H21V21.001ZM9.8844 17.6579C10.3376 18.114 11.0732 18.114 11.5266 17.6579L16.66 12.4939C16.8777 12.2748 17 11.9777 17 11.668C17 11.3583 16.8777 11.0611 16.66 10.8421C16.2066 10.386 15.4709 10.386 15.0178 10.8421L10.913 14.9713C10.7984 15.0862 10.6126 15.0862 10.4982 14.9713L8.98223 13.4466C8.52885 12.9905 7.7932 12.9905 7.34004 13.4466C6.88665 13.9024 6.88665 14.6425 7.34004 15.0984L9.8844 17.6579Z" fill="#7A95B0"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 983 B |
@ -0,0 +1,3 @@
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.4444 1H12.6667V0H11.1111V1H4.88889V0H3.33333V1H1.55556C0.696134 1 0.00780207 1.71599 0.00780207 2.60001L0 14.4C0 15.284 0.696097 16 1.55556 16H14.4444C15.3039 16 16 15.284 16 14.4V2.59997C16 1.71599 15.3039 1 14.4444 1ZM14 14H2V5H14V14ZM4 7H7V9H4V7ZM12 7H9V9H12V7ZM4 10H7V12H4V10ZM12 10H9V12H12V10Z" fill="#A3A9AE"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 473 B |
@ -0,0 +1,3 @@
|
||||
<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 2C0 0.895431 0.895431 0 2 0C3.10457 0 4 0.895431 4 2V18C4 19.1046 3.10457 20 2 20C0.895431 20 0 19.1046 0 18V2ZM14 5.41421C14 4.52331 15.0771 4.07714 15.7071 4.70711L20.2929 9.29289C20.6834 9.68342 20.6834 10.3166 20.2929 10.7071L15.7071 15.2929C15.0771 15.9229 14 15.4767 14 14.5858V12H8C7.44772 12 7 11.5523 7 11V9C7 8.44771 7.44772 8 8 8H14V5.41421Z" fill="#A3A9AE"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 525 B |
@ -0,0 +1,3 @@
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M15.8547 0.197892C15.6962 0.0659274 15.5086 0 15.292 0H9.5918L8.09197 1.5L6.5918 0H0.891957C0.675148 0 0.48763 0.0659274 0.32927 0.197892C0.170999 0.329783 0.0917969 0.486046 0.0917969 0.666607V8.66648C0.0917969 9.26377 0.231286 9.85573 0.510484 10.4426C0.789551 11.0294 1.13543 11.5503 1.54799 12.0051C1.96054 12.4601 2.45213 12.9028 3.02296 13.3334C3.59388 13.7641 4.12092 14.1214 4.60419 14.4063C5.08745 14.691 5.59165 14.9602 6.11664 15.2134C6.64163 15.4667 7.01465 15.6389 7.2354 15.7291C7.45619 15.8195 7.63329 15.8889 7.76656 15.9373C7.86665 15.979 7.97488 16 8.09169 16C8.20863 16 8.31673 15.979 8.4169 15.9373C8.55009 15.8889 8.72718 15.8195 8.94789 15.7291C9.16859 15.6389 9.54179 15.4667 10.0668 15.2134C10.5915 14.9602 11.0959 14.691 11.5791 14.4063C12.0625 14.1214 12.5895 13.7641 13.1605 13.3334C13.731 12.9028 14.2228 12.4601 14.6353 12.0051C15.0478 11.5503 15.3936 11.0294 15.6732 10.4426C15.9524 9.85573 16.0918 9.26377 16.0918 8.66648V0.666607C16.0918 0.485936 16.0126 0.329819 15.8547 0.197892ZM13.6918 8.66648C13.6918 9.88871 12.7125 11.1386 10.7542 12.4164C9.9709 12.9302 9.08335 13.406 8.09173 13.8435L8.0918 4L10.0918 1.99982H13.6918V8.66648Z" fill="#657077"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
@ -0,0 +1,3 @@
|
||||
<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.91 3.6923C11.91 1.65314 10.2005 0 8.0918 0C5.98311 0 4.27361 1.65314 4.27361 3.6923C4.27361 5.73147 5.98311 7.3846 8.0918 7.3846C10.2005 7.3846 11.91 5.73162 11.91 3.6923ZM2.8884 16H13.2951C14.2874 16 15.0918 15.2493 15.0918 14.3349C15.0918 10.3507 13.3358 8.67231 11.0833 8.5127L8.0918 13L5.12748 8.55352C3.0222 8.59701 1.0918 10.2599 1.0918 14.3349C1.0918 15.2493 1.89617 16 2.8884 16Z" fill="#333333"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 562 B |
@ -0,0 +1,3 @@
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.09362 1L1.09424 1C0.540702 1 0.0924722 1.44967 0.0942434 2.0032L0.13264 14.0032C0.134403 14.5542 0.581599 15 1.13263 15H15.0918C15.6441 15 16.0918 14.5523 16.0918 14V4.99571C16.0918 4.44342 15.6441 3.99571 15.0918 3.99571H9.0913L6.09362 1Z" fill="#657077"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 413 B |
@ -0,0 +1,3 @@
|
||||
<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.0918 0C10.2005 0 11.91 1.65314 11.91 3.6923C11.91 5.73162 10.2005 7.3846 8.0918 7.3846C5.98311 7.3846 4.27361 5.73147 4.27361 3.6923C4.27361 1.65314 5.98311 0 8.0918 0ZM13.2951 16H2.8884C1.89617 16 1.0918 15.2493 1.0918 14.3349C1.0918 10.1384 3.13902 8.5 5.31618 8.55393C6.07104 9.03774 6.9876 9.32204 7.97664 9.32204C9.00192 9.32204 9.94933 9.01658 10.7193 8.5C13.1437 8.5 15.0918 10.1384 15.0918 14.3349C15.0918 15.2493 14.2874 16 13.2951 16Z" fill="#333333"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 618 B |
@ -0,0 +1,3 @@
|
||||
<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M15.789 5.19933L10.7269 0.137193C10.5441 -0.0457312 10.2474 -0.0457312 10.0647 0.137193L10.0432 0.158642C9.73281 0.468949 9.56178 0.881724 9.56178 1.32063C9.56178 1.6034 9.63362 1.87474 9.76709 2.11536L4.47043 6.66113C4.06505 6.29884 3.54765 6.10055 2.99963 6.10055C2.40908 6.10055 1.85394 6.3305 1.43648 6.74805L1.40473 6.7798C1.22181 6.96263 1.22181 7.25917 1.40473 7.442L4.43736 10.4746L1.9521 12.9598C1.893 13.0206 1.43161 13.5246 0.512492 14.671C-0.362792 15.7625 0.400752 15.0258 0.39176 15.0361C0.229254 15.2212 0.238246 15.5003 0.412179 15.6751C0.503313 15.7666 0.623483 15.8129 0.744028 15.8129C0.853895 15.8129 0.964044 15.7745 1.05265 15.697C1.06042 15.6903 0.319171 16.4571 1.41775 15.5763C2.564 14.6572 3.068 14.1957 3.13348 14.1319L5.61396 11.6514L8.48418 14.5216C8.5756 14.6132 8.69549 14.6589 8.81528 14.6589C8.93508 14.6589 9.05506 14.6132 9.14638 14.5216L9.17814 14.4899C9.59569 14.0724 9.82563 13.5172 9.82563 12.9267C9.82563 12.3787 9.62725 11.8613 9.26506 11.4559L13.8108 6.15928C14.0514 6.29275 14.3228 6.36459 14.6056 6.36459C15.0446 6.36459 15.4572 6.19366 15.7675 5.88316L15.789 5.86171C15.9719 5.6787 15.9719 5.38216 15.789 5.19933Z" fill="#657077"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
@ -0,0 +1,3 @@
|
||||
<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M15.0918 8.5C15.0918 12.6421 11.7339 16 7.5918 16C3.44966 16 0.0917969 12.6421 0.0917969 8.5C0.0917969 4.35786 3.44966 1 7.5918 1C11.7339 1 15.0918 4.35786 15.0918 8.5ZM12.0918 7H3.0918V10H12.0918V7Z" fill="#657077"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 370 B |
@ -0,0 +1,3 @@
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M1 3C1 2.44772 1.44772 2 2 2H4.99615L5.00192 0.99426C5.00508 0.444224 5.45186 0 6.00191 0H8.99514C9.54743 0 9.99514 0.447715 9.99514 1V2H13C13.5523 2 14 2.44772 14 3C14 3.55228 13.5523 4 13 4H2C1.44772 4 1 3.55228 1 3ZM2 5H2.03355H12.9665C12.9832 5 13 15.0909 13 15.0909C13 15.5909 12.5471 16 11.9935 16H3.00645C2.4529 16 2 15.5909 2 15.0909V5ZM5 7H4V14H5V7ZM7 7H8V14H7V7ZM11 7H10V14H11V7ZM9 1H6V2H9V1Z" fill="#A3A9AE"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 572 B |
@ -0,0 +1,3 @@
|
||||
<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.6684 1.64743e-06L4.50945 2.17427e-06C4.25089 -0.000130251 4.04107 0.209686 4.0412 0.468248L4.0412 0.498582C4.04114 0.937488 4.21208 1.3503 4.52243 1.66065C4.72238 1.8606 4.96504 2.00167 5.22957 2.07744L4.6986 7.2758C4.15578 7.30627 3.64972 7.53191 3.2622 7.91942C2.84462 8.337 2.61467 8.89214 2.61474 9.48259L2.61474 9.52749C2.61467 9.78612 2.82436 9.9958 3.08299 9.99574L7.08946 9.99574L7.08939 13.5104C7.09058 13.5951 7.26025 15.0262 7.28146 15.2191C7.30267 15.412 7.45333 15.549 7.45425 15.5626C7.47021 15.8084 7.8453 15.9994 8.09187 16C8.22102 16.0003 8.50672 15.948 8.59196 15.8628C8.66965 15.7851 8.72038 15.68 8.72826 15.5626C8.72899 15.5524 8.88446 15.37 8.90106 15.2191C8.91766 15.0682 9.09173 13.5952 9.09293 13.5038V9.99587L13.095 9.99587C13.2243 9.99593 13.3414 9.94348 13.4261 9.85877C13.5108 9.77406 13.5634 9.6569 13.5632 9.52762V9.48272C13.5633 8.89228 13.3333 8.33707 12.9158 7.91956C12.5282 7.53205 12.0221 7.30647 11.4794 7.27593L10.9484 2.07757C11.2129 2.0018 11.4556 1.86073 11.6555 1.66079C11.966 1.35037 12.1369 0.937686 12.1368 0.498714L12.1368 0.468381C12.1367 0.20962 11.927 -6.44388e-05 11.6684 1.64743e-06Z" fill="#657077"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
@ -0,0 +1,3 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M6 3.3C6 2.58203 6.58203 2 7.3 2H21.7C22.418 2 23 2.58203 23 3.3V13.7C23 14.418 22.418 15 21.7 15H21V5.3C21 4.58203 20.418 4 19.7 4H6V3.3ZM17.7 6.0028C18.418 6.0028 19 6.58483 19 7.3028V18.7C19 19.418 18.418 20 17.7 20H5.67862C5.2802 20 4.90378 20.1827 4.65728 20.4957L3.32134 22.1922C2.55797 23.1616 1 22.6218 1 21.3879V7.3028C1 6.58483 1.58203 6.0028 2.3 6.0028H17.7Z" fill="#A3A9AE"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 540 B |
@ -0,0 +1,5 @@
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="0.5" y="0.5" width="15" height="15" rx="2.5" fill="white" stroke="#D0D5DA" stroke-opacity="1"/>
|
||||
<rect x="0.5" y="0.5" width="15" height="15" rx="2.5" fill="white" stroke="#D0D5DA" stroke-opacity="1" stroke-width="8%" />
|
||||
<path d="M7.97926 11.6351C7.48054 12.1216 6.67132 12.1216 6.17284 11.6351L3.37404 8.90491C2.87532 8.41864 2.87532 7.62926 3.37404 7.14299C3.87252 6.65649 4.68174 6.65649 5.18046 7.14299L6.84799 8.76943C6.97387 8.89199 7.17822 8.89199 7.30435 8.76943L11.8195 4.36487C12.318 3.87838 13.1272 3.87838 13.626 4.36487C13.8655 4.5985 14 4.91547 14 5.24583C14 5.57619 13.8655 5.89317 13.626 6.12679L7.97926 11.6351Z" fill="#333333"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 758 B |
@ -0,0 +1,5 @@
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="0.5" y="0.5" width="15" height="15" rx="2.5" fill="white" stroke="#D0D5DA" stroke-opacity="1"/>
|
||||
<rect x="0.5" y="0.5" width="15" height="15" rx="2.5" fill="white" stroke="#D0D5DA" stroke-opacity="1" stroke-width="8%"/>
|
||||
<rect x="3" y="3" width="10" height="10" rx="2" fill="#333333"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 395 B |
@ -0,0 +1,4 @@
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="0.5" y="0.5" width="15" height="15" rx="2.5" fill="white" stroke="#D0D5DA" stroke-opacity="1" />
|
||||
<rect x="0.5" y="0.5" width="15" height="15" rx="2.5" fill="white" stroke="#D0D5DA" stroke-opacity="1" stroke-width="8%" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 334 B |
@ -0,0 +1,3 @@
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.85498 16L1.15188 16C0.518827 16 0.00382324 15.485 0.00378789 14.8519L0.00378713 6.14776C0.00378708 5.51468 0.518826 4.99964 1.15187 4.99964L4.01036 4.99964L4.01036 9.96112C4.01036 11.1721 4.75801 11.9963 5.96898 11.9963L11.0031 11.9963L11.0031 14.8519C11.0031 15.485 10.4881 16 9.85498 16ZM14.8703 11.0013L6.12976 11.0013C5.50682 11.0013 4.99997 10.4945 5 9.87155L5 1.12969C5 0.506788 5.50679 9.17346e-07 6.12973 8.62887e-07L14.8703 9.87639e-08C15.4932 4.43048e-08 16 0.506787 16 1.12973L16 9.87155C16 10.4945 15.4932 11.0013 14.8703 11.0013Z" fill="#A3A9AE"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 716 B |
@ -0,0 +1,3 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M15.3719 3.25678C15.3719 5.05546 13.9289 6.51357 12.1488 6.51357C10.3687 6.51357 8.92562 5.05546 8.92562 3.25678C8.92562 1.45811 10.3687 0 12.1488 0C13.9289 0 15.3719 1.45811 15.3719 3.25678ZM6.07558 3.82952C6.18787 5.06074 6.65857 6.18705 7.38131 7.10098C5.83057 8.33665 4.77654 10.1805 4.57158 12.2764C4.1378 12.1775 3.6865 12.1253 3.22314 12.1253C2.49652 12.1253 1.79958 12.2537 1.15332 12.4892C1.32664 8.86139 3.24354 5.6958 6.07558 3.82952ZM19.4284 12.2764C19.2314 10.2617 18.2499 8.47996 16.7968 7.24738C17.5485 6.35435 18.0526 5.24194 18.2018 4.01852C20.8811 5.90525 22.6791 8.98112 22.8467 12.4892C22.2004 12.2537 21.5035 12.1253 20.7769 12.1253C20.3135 12.1253 19.8622 12.1775 19.4284 12.2764ZM7.26408 22.9043C8.69536 23.6063 10.3022 24 12 24C13.6978 24 15.3046 23.6063 16.7359 22.9043C15.8756 22.1348 15.2319 21.1235 14.9092 19.9757C14.0152 20.3584 13.032 20.57 12 20.57C10.968 20.57 9.98483 20.3584 9.0908 19.9757C8.76809 21.1235 8.12444 22.1348 7.26408 22.9043ZM6.44628 18.2881C6.44628 20.0868 5.00323 21.5449 3.22314 21.5449C1.44305 21.5449 0 20.0868 0 18.2881C0 16.4894 1.44305 15.0313 3.22314 15.0313C5.00323 15.0313 6.44628 16.4894 6.44628 18.2881ZM20.7769 21.5449C22.5569 21.5449 24 20.0868 24 18.2881C24 16.4894 22.5569 15.0313 20.7769 15.0313C18.9968 15.0313 17.5537 16.4894 17.5537 18.2881C17.5537 20.0868 18.9968 21.5449 20.7769 21.5449Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
@ -0,0 +1,3 @@
|
||||
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.76288 6.35869C7.56764 6.16343 7.56764 5.84687 7.76288 5.65161L10.9493 2.46498C11.1445 2.26973 11.1445 1.95316 10.9493 1.75791L10.2422 1.05077C10.0469 0.855489 9.73031 0.855489 9.53504 1.05077L6.34878 4.23729C6.15352 4.43257 5.83691 4.43257 5.64165 4.23729L2.46017 1.05556C2.26491 0.860275 1.9483 0.860275 1.75304 1.05556L1.04596 1.76269C0.850716 1.95795 0.850716 2.27451 1.04596 2.46977L4.22755 5.65161C4.42279 5.84687 4.42279 6.16343 4.22755 6.35869L1.0501 9.53639C0.854858 9.73165 0.854858 10.0482 1.0501 10.2435L1.75718 10.9506C1.95245 11.1459 2.26905 11.1459 2.46432 10.9506L5.64165 7.77302C5.83691 7.57774 6.15352 7.57774 6.34878 7.77302L9.5309 10.9554C9.72616 11.1507 10.0428 11.1507 10.238 10.9554L10.9451 10.2483C11.1404 10.053 11.1404 9.73644 10.9451 9.54118L7.76288 6.35869Z" fill="#657077"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 958 B |
@ -0,0 +1,3 @@
|
||||
<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M16.9862 0.721877L16.2791 0.0147705L8.50091 7.79295L0.722732 0.0147736L0.015625 0.72188L7.7938 8.50006L0.0156276 16.2782L0.722734 16.9853L8.50091 9.20716L16.2791 16.9853L16.9862 16.2782L9.20801 8.50005L16.9862 0.721877Z" fill="#D0D5DA"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 390 B |
Binary file not shown.
|
After Width: | Height: | Size: 7.4 KiB |
@ -0,0 +1,12 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<g stroke="none" stroke-width="1" fill-rule="evenodd">
|
||||
<g transform="translate(-168.000000, -936.000000)" fill="#000000">
|
||||
<g transform="translate(24.000000, 888.000000)">
|
||||
<g transform="translate(144.000000, 48.000000)">
|
||||
<path fill="#000000" stroke="#000000" stroke-width="0.1" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" d="m1.40265,7.01045c0,0 21.20239,0 21.20239,0c0,0 -10.56768,11.23794 -10.56768,11.23794c0,0 -10.63471,-11.23794 -10.63471,-11.23794z" id="svg_29"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 804 B |
@ -0,0 +1,10 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<g fill="#000000">
|
||||
<g>
|
||||
<g>
|
||||
<path stroke="#000000" id="svg_11" d="m6.87241,23.01348l-0.00187,-21.23169l11.2357,10.63287l-11.23383,10.59882z" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="0.1" fill="#000000"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 473 B |
@ -0,0 +1,3 @@
|
||||
<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M4.97925 0H1.50001C1.08685 0 0.733487 0.146708 0.44007 0.44007C0.146708 0.733487 0 1.08683 0 1.50001V8.50006C0 8.91321 0.146708 9.26659 0.44007 9.56C0.733487 9.85342 1.08685 10.0001 1.50001 10.0001H8.50006C8.91322 10.0001 9.26659 9.85342 9.55988 9.56C9.85329 9.26659 10 8.91322 10 8.50006V5.02092L9.99479 5.01571H9V7.87507C9 8.18495 8.88997 8.44997 8.66991 8.67003C8.44994 8.8901 8.18492 9.00013 7.87505 9.00013H2.12501C1.81514 9.00013 1.55012 8.8901 1.33005 8.67003C1.11003 8.44997 1 8.18493 1 7.87507V2.12501C1 1.81513 1.11003 1.55012 1.33005 1.33005C1.55012 1.11003 1.81514 1 2.12501 1H4.99579V0.0165411L4.97925 0ZM9.67929 3.04609C9.7193 3.04609 9.76121 3.03774 9.80457 3.02105C9.93476 2.96423 9.99998 2.86575 10 2.72547V0.320688C10 0.233844 9.96827 0.158668 9.90487 0.0952501C9.84131 0.0317617 9.76614 0 9.67931 0H7.2746C7.13432 0 7.03573 0.0651905 6.97898 0.195414C6.92223 0.33241 6.94559 0.449244 7.04916 0.546109L7.77061 1.26754L4.09521 4.94297C4.03174 5.00638 4 5.08158 4 5.16833C4 5.25513 4.03174 5.33042 4.09521 5.39377L4.60623 5.90487C4.66968 5.96829 4.74484 6.00007 4.83174 6.00007C4.9186 6.00007 4.99369 5.96829 5.05723 5.90487L8.73246 2.22948L9.45386 2.95091C9.51403 3.01431 9.5892 3.04609 9.67929 3.04609Z" fill="#333333"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
@ -0,0 +1,3 @@
|
||||
<svg width="16" height="6" viewBox="0 0 16 6" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M15.1508 1.0515L15.2658 0.969172C15.4895 0.801214 15.5421 0.469603 15.3872 0.228352C15.231 -0.0150493 14.9238 -0.0699825 14.7047 0.0956798C7.03837 5.91294 1.45783 0.381967 1.2234 0.144302C1.02556 -0.0566439 0.713815 -0.0464608 0.529595 0.166964C0.344449 0.381249 0.353435 0.716448 0.549285 0.918111C0.559858 0.929012 0.734431 1.10242 1.05305 1.35902L0.0710252 3.11676C-0.0690566 3.36747 0.00442013 3.69478 0.235555 3.84811C0.314582 3.89975 0.404314 3.92571 0.491138 3.92571C0.656197 3.92571 0.816894 3.83463 0.910326 3.67069L1.87055 1.95339C2.40894 2.3091 3.0993 2.69751 3.92182 3.02568L3.44858 4.74283C3.37021 5.02553 3.51677 5.32043 3.77566 5.40448L3.9168 5.42714C4.126 5.42714 4.32158 5.27797 4.38528 5.04719L4.85389 3.35356C5.61311 3.57889 6.46245 3.73107 7.37906 3.76722V5.46802C7.37906 5.76234 7.59804 6 7.86922 6C8.14013 6 8.35924 5.76234 8.35924 5.46802V3.75775C9.15903 3.71013 10.0067 3.56082 10.8917 3.28687L11.495 5.01348C11.5702 5.22619 11.7565 5.35643 11.9533 5.35643L12.1266 5.32286C12.3797 5.21845 12.508 4.91165 12.4118 4.63712L11.8244 2.95482C12.6303 2.62995 13.4632 2.20224 14.3236 1.63483L15.1177 2.78529C15.2144 2.92427 15.362 2.99886 15.5095 2.99886C15.6123 2.99886 15.715 2.96501 15.8031 2.892C16.0204 2.71558 16.0643 2.38211 15.9025 2.14731L15.1508 1.0515Z" fill="#A3A9AE"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
@ -0,0 +1,3 @@
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M8 3C4.94303 3 2.17081 4.7536 0.125192 7.60192C-0.0417306 7.83528 -0.0417306 8.16129 0.125192 8.39465C2.17081 11.2464 4.94303 13 8 13C11.057 13 13.8292 11.2464 15.8748 8.39808C16.0417 8.16472 16.0417 7.83871 15.8748 7.60535C13.8292 4.7536 11.057 3 8 3ZM8.21929 11.5209C6.19004 11.6548 4.51427 9.90117 4.64191 7.77008C4.74665 6.01304 6.10494 4.58888 7.78071 4.47907C9.80996 4.34523 11.4857 6.09883 11.3581 8.22992C11.2501 9.98353 9.89179 11.4077 8.21929 11.5209ZM8.11783 9.8943C7.02465 9.96637 6.1213 9.02265 6.19331 7.87646C6.24895 6.92931 6.9821 6.16404 7.88545 6.10226C8.97862 6.0302 9.88197 6.97392 9.80996 8.12011C9.75105 9.07069 9.0179 9.83596 8.11783 9.8943Z" fill="#A3A9AE"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 835 B |
@ -0,0 +1,3 @@
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 15C0 15.5523 0.447715 16 1 16H15C15.5523 16 16 15.5523 16 15C16 14.4477 15.5523 14 15 14H1C0.447715 14 0 14.4477 0 15ZM0 8C0 8.55228 0.447715 9 1 9H15C15.5523 9 16 8.55228 16 8C16 7.44771 15.5523 7 15 7H1C0.447715 7 0 7.44771 0 8ZM1 2C0.447715 2 0 1.55229 0 1C0 0.447715 0.447715 0 1 0H15C15.5523 0 16 0.447715 16 1C16 1.55229 15.5523 2 15 2H1Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 516 B |
@ -0,0 +1,3 @@
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M1 0C0.447715 0 0 0.447715 0 1V6C0 6.55228 0.447715 7 1 7H6C6.55228 7 7 6.55228 7 6V1C7 0.447715 6.55228 0 6 0H1ZM1 9C0.447715 9 0 9.44771 0 10V15C0 15.5523 0.447715 16 1 16H6C6.55228 16 7 15.5523 7 15V10C7 9.44772 6.55228 9 6 9H1ZM9 1C9 0.447715 9.44772 0 10 0H15C15.5523 0 16 0.447715 16 1V6C16 6.55228 15.5523 7 15 7H10C9.44771 7 9 6.55228 9 6V1ZM10 9C9.44772 9 9 9.44771 9 10V15C9 15.5523 9.44771 16 10 16H15C15.5523 16 16 15.5523 16 15V10C16 9.44772 15.5523 9 15 9H10Z" fill="#A3A9AE"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 644 B |
@ -0,0 +1,3 @@
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M8 15C11.866 15 15 11.866 15 8C15 4.13401 11.866 1 8 1C4.13401 1 1 4.13401 1 8C1 11.866 4.13401 15 8 15ZM7 6V4H9V6H7ZM7 12V7H9V12H7Z" fill="black"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 301 B |
@ -0,0 +1,3 @@
|
||||
<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M14.8483 7.24939L11.8447 10.252C10.187 11.9107 7.49775 11.9107 5.83975 10.252C5.57858 9.99154 5.37427 9.6981 5.19485 9.39549L6.59044 8.00001C6.65678 7.93311 6.7387 7.89477 6.81698 7.84961C6.91346 8.17925 7.08189 8.49132 7.34113 8.75059C8.16901 9.57914 9.51614 9.57799 10.3435 8.75059L13.3462 5.74808C14.1747 4.91963 14.1747 3.57282 13.3462 2.745C12.5187 1.91719 11.1719 1.91719 10.3435 2.745L9.27581 3.81388C8.40934 3.47651 7.47584 3.3858 6.56708 3.51897L8.84233 1.2438C10.501 -0.414599 13.1896 -0.414599 14.8483 1.2438C16.5062 2.90212 16.5062 5.5911 14.8483 7.24939ZM6.90821 12.1867L5.83971 13.2555C5.0119 14.0829 3.66469 14.0829 2.83674 13.2555C2.00885 12.427 2.00885 11.0802 2.83674 10.252L5.83971 7.24939C6.66819 6.42101 8.01448 6.42101 8.8423 7.24939C9.10094 7.5081 9.26954 7.8201 9.36694 8.14932C9.44567 8.10356 9.52658 8.06638 9.59288 7.99997L10.9884 6.60505C10.8101 6.30125 10.6047 6.00886 10.3435 5.74815C8.68588 4.08975 5.99637 4.08975 4.33798 5.74815L1.33546 8.75077C-0.322758 10.4097 -0.322758 13.0979 1.33546 14.7566C2.99386 16.4145 5.68273 16.4145 7.34109 14.7566L9.61693 12.4809C8.70769 12.6149 7.77394 12.5234 6.90821 12.1867Z" fill="#333333"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
@ -0,0 +1,3 @@
|
||||
<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M1.0918 2.70326C1.0918 1.53415 2.36996 0.814455 3.36961 1.42069L12.1026 6.71672C13.0637 7.29962 13.0659 8.69359 12.1065 9.27946L3.37358 14.6126C2.37404 15.223 1.0918 14.5036 1.0918 13.3324L1.0918 2.70326Z" fill="#A3A9AE"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 375 B |
@ -0,0 +1,3 @@
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.4 1H1.6C0.72 1 0 1.7427 0 2.65044V12.3496C0 13.2573 0.72 14 1.6 14H14.4C15.28 14 16 13.2573 16 12.3496V2.65044C16 1.7427 15.28 1 14.4 1ZM14.5455 4.15152L8 8.09091L1.45455 4.15152V2.57576L8 6.51515L14.5455 2.57576V4.15152Z" fill="#333333"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 396 B |
@ -0,0 +1,3 @@
|
||||
<svg width="18" height="20" viewBox="0 0 18 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M6 0H12V2H18V4H12H6H0V2H6V0ZM2 5H16V20H2V5Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 212 B |
@ -0,0 +1,3 @@
|
||||
<svg width="20" height="22" viewBox="0 0 20 22" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M14 0H6V10H1L10 19L19 10H14V0ZM20 22V20H0V22H20Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 217 B |
@ -0,0 +1,3 @@
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M11 0H18V7H16V3.41423L11.7071 7.70711L10.2929 6.29289L14.5858 2H11V0ZM7 16V18H0V11H2V14.5858L6.2929 10.2929L7.70712 11.7071L3.41423 16H7Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 306 B |
@ -0,0 +1,5 @@
|
||||
<svg width="27" height="22" viewBox="0 0 27 22" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M8 5L15 0V22L8 17H0V5H8ZM13 3.88638V18.1136L8.64093 15H2V7H8.64093L13 3.88638Z" fill="white"/>
|
||||
<path d="M19.5 11C19.5 9.23919 18.4887 7.71457 17.0152 6.97535L18.3288 4.84065C20.5152 6.02475 22 8.33898 22 11C22 13.6904 20.4822 16.0264 18.2561 17.1982L17.0143 15.0251C18.4883 14.286 19.5 12.7612 19.5 11Z" fill="white"/>
|
||||
<path d="M20.7381 21.5417L19.4973 19.3702C22.4756 17.7666 24.5 14.6197 24.5 11C24.5 7.43877 22.5405 4.33521 19.6408 2.70872L20.9521 0.577835C24.5653 2.64579 27 6.53857 27 11C27 15.549 24.4689 19.5067 20.7381 21.5417Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 704 B |
@ -0,0 +1,6 @@
|
||||
<svg width="27" height="25" viewBox="0 0 27 25" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M15 17.5L22 24.5L23.5303 22.9697L1.53033 0.969666L0 2.5L3.5 6H0V18H8L15 23V17.5ZM13 15.5L5.5 8H2V16H8.64093L13 19.1136V15.5Z" fill="white"/>
|
||||
<path d="M13 4.88638V10L15 12V1L8.58333 5.58334L10.017 7.01706L13 4.88638Z" fill="white"/>
|
||||
<path d="M18.182 15.182L19.9498 16.9498C21.2165 15.683 22 13.933 22 12C22 9.33898 20.5152 7.02475 18.3288 5.84065L17.0152 7.97535C18.4887 8.71457 19.5 10.2392 19.5 12C19.5 13.2427 18.9963 14.3677 18.182 15.182Z" fill="white"/>
|
||||
<path d="M21.7175 18.7175L23.4853 20.4853C25.6569 18.3137 27 15.3137 27 12C27 7.53857 24.5653 3.64579 20.9521 1.57784L19.6408 3.70872C22.5405 5.33521 24.5 8.43877 24.5 12C24.5 14.6234 23.4367 16.9984 21.7175 18.7175Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 844 B |
@ -0,0 +1,3 @@
|
||||
<svg width="15" height="18" viewBox="0 0 15 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M5 0H0V18H5V0ZM15 0H10V18H15V0Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 200 B |
@ -0,0 +1,3 @@
|
||||
<svg width="21" height="22" viewBox="0 0 21 22" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M1 20.3473V1.65269L18.8449 11L1 20.3473Z" stroke="white" stroke-width="2"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 188 B |
@ -0,0 +1,7 @@
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M0 5V0H5V2H2V5H0Z" fill="white"/>
|
||||
<path d="M18 0H13V2H16V5H18V0Z" fill="white"/>
|
||||
<path d="M16 13H18V18H13V16H16V13Z" fill="white"/>
|
||||
<path d="M0 13H2V16H5V18H0V13Z" fill="white"/>
|
||||
<path d="M14 4H4V14H14V4Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 333 B |
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user