Skip to content

Commit

Permalink
Merge pull request #65 from sebgroup/develop
Browse files Browse the repository at this point in the history 
Bug fixes to button and loader components
  • Loading branch information
@yousifalraheem
yousifalraheem authored Oct 11, 2019
2 parents da136dc + f88702c commit b2585c7
Show file tree
Hide file tree
Showing 52 changed files with 440 additions and 607 deletions.
258 changes: 81 additions & 177 deletions develop/components/pages/ButtonPage.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,50 @@
import * as React from "react";
import { Button } from "../../../src/Button/Button";
import { Button, ButtonTheme, ButtonIconPosition, ButtonSizes } from "../../../src/Button/Button";
import { Loader } from "../../../src/Loader/Loader";
import { RadioGroup, RadioListModel } from "../../../src/RadioGroup/RadioGroup";
import { CheckBox } from "../../../src/CheckBox/CheckBox";
const Highlight = (require("react-highlight")).default;
const docMD: string = require("../../../src/Button/readme.md");

const mysvg: JSX.Element = <svg id="PIKTO_REGULAR" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 170 170"><title>regular_black</title><path d="M149.1,165h-6V132.3c0-18.8-14.2-34.8-32.5-36.8l-24,15.9a3,3,0,0,1-3.3,0L59.2,95.5C41,97.7,26.9,113.6,26.9,132.3V165h-6V132.3c0-22.5,16.7-40.9,38.8-42.9a3,3,0,0,1,1.9.5L85,105.3l23.2-15.4a3,3,0,0,1,1.9-.5c21.9,1.8,39,20.7,39,42.9Z" /><path d="M85,86.4A31.7,31.7,0,0,1,53.4,54.8V36.6a31.6,31.6,0,1,1,63.3,0V54.8A31.7,31.7,0,0,1,85,86.4Zm0-75.5A25.7,25.7,0,0,0,59.4,36.6V54.8a25.6,25.6,0,0,0,51.3,0V36.6A25.7,25.7,0,0,0,85,10.9Z" /></svg>;
const mysvg: JSX.Element = <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M12.8 371.2L.2 485.3c-1.7 15.3 11.2 28.2 26.5 26.5l114.2-12.7 352.4-352.4c25-25 25-65.5 0-90.5l-37.5-37.5c-25-25-65.5-25-90.5 0L12.8 371.2zm113.3 97.4L33 478.9l10.3-93.1 271.9-271.9 82.7 82.7-271.8 272zm344.5-344.5L420.7 174 338 91.3l49.9-49.9c12.5-12.5 32.7-12.5 45.3 0l37.5 37.5c12.4 12.4 12.4 32.7-.1 45.2z" /></svg>;

const ButtonPage: React.FunctionComponent = () => {
const themeList: Array<RadioListModel<ButtonTheme>> = [
{ group: "theme", label: "Primary", value: "primary" },
{ group: "theme", label: "Secondary", value: "secondary" },
{ group: "theme", label: "Alternative", value: "alternative" },
{ group: "theme", label: "Danger", value: "danger" },
{ group: "theme", label: "Ghost-dark", value: "ghost-dark" },
{ group: "theme", label: "Ghost-light", value: "ghost-light" },
{ group: "theme", label: "Anchor", value: "anchor" },
];
const iconPositionList: Array<RadioListModel<ButtonIconPosition>> = [
{ group: "icon-position", label: "Right", value: "right" },
{ group: "icon-position", label: "Left", value: "left" },
];
const sizeList: Array<RadioListModel<ButtonSizes>> = [
{ group: "size", label: "Small", value: "sm" },
{ group: "size", label: "Medium", value: "md" },
{ group: "size", label: "Large", value: "lg" },
];
const [theme, setTheme] = React.useState<ButtonTheme>("primary");
const [iconPosition, setIconPosition] = React.useState<ButtonIconPosition>("right");
const [disabled, setDisabled] = React.useState<boolean>(false);
const [hasLoader, setHasLoader] = React.useState<boolean>(false);
const [hasIcon, setHasIcon] = React.useState<boolean>(false);
const [hasSize, setHasSize] = React.useState<boolean>(false);
const [size, setSize] = React.useState<ButtonSizes>("md");

function iconCheckboxChanged(e: React.ChangeEvent<HTMLInputElement>) {
setHasIcon(e.target.checked);
!e.target.checked && setIconPosition("right"); // Clear icon position
}

function sizeCheckboxChanged(e: React.ChangeEvent<HTMLInputElement>) {
setHasSize(e.target.checked);
!e.target.checked && setSize("md"); // Reset size
}

return (
<div className="route-template container">
<div className="info-holder">
Expand All @@ -19,190 +57,56 @@ const ButtonPage: React.FunctionComponent = () => {

<div className="info">
<h2>Output</h2>
<p>Here are sample outputs</p>

<p>Theme: Primary</p>
<div className="result wide">
<Button
title="Click me"
label="Primary"
onClick={null}
theme="primary"
className="mr-1"
/>
<Button
title="Click me"
label="Primary disabled"
onClick={null}
theme="primary"
disabled={true}
/>
</div>

<p>Theme: Secondary</p>
<div className="result wide">
<Button
title="Click me"
label="Secondary"
onClick={null}
theme="secondary"
className="mr-1"
/>
<Button
title="Click me"
label="Secondary disabled"
onClick={null}
theme="secondary"
disabled={true}
/>
</div>

<p>Theme: Alternative</p>
<div className="result wide">
<Button
title="Click me"
label="Alternative"
onClick={null}
theme="alternative"
className="mr-1"
/>
<Button
title="Click me"
label="Alternative disabled"
onClick={null}
theme="alternative"
disabled={true}
/>
</div>

<p>Theme: Delete</p>
<div className="result wide">
<Button
title="Click me"
label="Delete"
onClick={null}
theme="danger"
className="mr-1"
/>
<Button
title="Click me"
label="Delete disabled"
onClick={null}
theme="danger"
disabled={true}
/>
</div>

<p>Theme: Ghost light</p>
<div className="result wide p-3 bg-dark">
<Button
title="Click me"
label="Ghost light"
onClick={null}
theme="ghost-light"
className="mr-1"
/>
<Button
title="Click me"
label="Ghost light disabled"
onClick={null}
theme="ghost-light"
disabled={true}
/>
</div>

<p>Theme: Ghost dark</p>
<div className="result wide p-3 bg-warning">
<Button
title="Click me"
label="Ghost dark"
onClick={null}
theme="ghost-dark"
className="mr-1"
/>
<div className={"result p-3" + (theme === "ghost-light" ? " bg-dark" : "") + (theme === "ghost-dark" ? " bg-warning" : "")}>
<Button
title="Click me"
label="Ghost dark disabled"
onClick={null}
theme="ghost-dark"
disabled={true}
/>
</div>

<p>Theme: Anchor</p>
<div className="result wide">
<Button
label="Test Label"
theme="anchor"
onClick={null}
className="mr-1"
/>
<Button
label="Test Label"
theme="anchor"
onClick={null}
disabled={true}
/>
</div>

<p>Button with icon</p>
<div className="result wide">
<Button
label="Test Label"
iconPosition="left"
icon={mysvg}
onClick={null}
className="mr-1"
/>
<Button
label="Test Label"
iconPosition="right"
icon={mysvg}
onClick={null}
/>
</div>

<p>Pass the loader component instead of the icon and it will just work</p>
<div className="result wide">
<Button
label="Test Label"
onClick={null}
className="mr-1"
>
<Loader toggle={true} />
</Button>
<Button
label="Test Label"
iconPosition="right"
label={theme}
theme={theme}
onClick={null}
disabled={true}
disabled={disabled}
iconPosition={hasIcon ? iconPosition : null}
icon={hasIcon && iconPosition ? mysvg : null}
size={size}
>
<Loader toggle={true} />
{hasLoader && <Loader toggle={true} />}
</Button>
</div>

<p>It also comes in different sizes</p>
<div className="result wide">
<Button
label="Large"
onClick={null}
size="lg"
className="mr-1"
/>
<Button
label="Medium"
onClick={null}
className="mr-1"
/>
<Button
label="Small"
onClick={null}
size="sm"
className="mr-1"
/>
<p>Options</p>
<div className="row">
<div className="col">
<p>Themes</p>
<RadioGroup list={themeList} value={theme} onChange={(e) => setTheme(e.currentTarget.value as ButtonTheme)} condensed />
</div>
<div className="col">
<p>Options</p>
<CheckBox label="Disabled" name="disabled" checked={disabled} onChange={(e) => setDisabled(e.target.checked)} condensed />
<CheckBox label="Loader" name="loader" checked={hasLoader} onChange={(e) => setHasLoader(e.target.checked)} condensed />
<CheckBox label="Icon" name="icon" checked={hasIcon} onChange={iconCheckboxChanged} condensed />
{hasIcon &&
<RadioGroup
className="pl-4"
list={iconPositionList}
value={iconPosition}
condensed
name="icon"
onChange={(e) => setIconPosition(e.target.value as ButtonIconPosition)}
/>
}
<CheckBox label="Size" name="size" checked={hasSize} onChange={sizeCheckboxChanged} condensed />
{hasSize &&
<RadioGroup
className="pl-4"
list={sizeList}
value={size}
condensed
name="size"
onChange={(e) => setSize(e.target.value as ButtonSizes)}
/>
}
</div>
</div>
</div>

</div>
</div>
);
Expand Down
43 changes: 30 additions & 13 deletions develop/components/pages/LoaderPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,18 +21,25 @@ const LoaderPage: React.FunctionComponent = () => {

<div className="info">
<h2>Output</h2>

<p>Here is a sample tiny example</p>
<div className="result">
<SampleContainer height={100} text="Small" />
<Loader toggle={true} size="sm" />
</div>

<p>Here is a sample default example</p>
<div className="result">
<SampleContainer height={150} text="Medium" />
<Loader toggle={true} />
</div>

<p>Here is a sample large example</p>
<div className="result">
<SampleContainer height={200} text="Large" />
<Loader toggle={true} size="lg" />
</div>

<p>Here is a sample in primary button</p>
<div className="result">
<Button
Expand All @@ -44,8 +51,9 @@ const LoaderPage: React.FunctionComponent = () => {
<Loader toggle={true} />
</Button>
</div>

<p>Here is a sample in primary button with icon left</p>
<div className="result wide">
<div className="result">
<Button
label="Test Label"
iconPosition="left"
Expand All @@ -55,19 +63,9 @@ const LoaderPage: React.FunctionComponent = () => {
<Loader toggle={true} />
</Button>
</div>
<p>Here is a sample in primary button with icon right</p>
<div className="result wide">
<Button
label="Test Label"
iconPosition="right"
icon={mysvg}
onClick={() => null}
>
<Loader toggle={true} />
</Button>
</div>

<p>Here is a sample in secondary with icon right</p>
<div className="result wide">
<div className="result">
<Button
label="Test Label"
iconPosition="right"
Expand Down Expand Up @@ -97,4 +95,23 @@ const LoaderPage: React.FunctionComponent = () => {
);
};

type SampleContainerProps = {
height: number | string;
width?: number | string;
text: string;
};

const SampleContainer: React.FC<SampleContainerProps> = (props: SampleContainerProps) =>
<svg
className="bd-placeholder-img img-thumbnail"
width={props.width || "100%"}
height={props.height}
xmlns="http://www.w3.org/2000/svg"
preserveAspectRatio="xMidYMid slice"
role="img"
>
<rect width="100%" height="100%" fill="#868e96" />
<text x="50%" y="50%" fill="#dee2e6" textAnchor="middle">{props.text}</text>
</svg>;

export default LoaderPage;
1 change: 1 addition & 0 deletions develop/styles/shared/route-template.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -89,6 +89,7 @@
}
}
>.result {
position: relative;
max-width: 300px;
code,
p {
Expand Down
6 changes: 3 additions & 3 deletions docs/app.js
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion docs/js/0.bundle.js
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion docs/js/1.bundle.js
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion docs/js/10.bundle.js
View file

Large diffs are not rendered by default.

Loading

0 comments on commit b2585c7

Please sign in to comment.