Skip to content

Commit

Permalink
added avatar test
Browse files Browse the repository at this point in the history
  • Loading branch information
@WillianLomeu
WillianLomeu committed Nov 11, 2022
1 parent 5634f0d commit 62013aa
Show file tree
Hide file tree
Showing 8 changed files with 211 additions and 51 deletions.
21 changes: 15 additions & 6 deletions src/components/avatar/avatar.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,11 @@
import React from "react";
import { Link } from "react-router-dom";
import ClickEvent from "./event/bdsClickAvatar";
import ClickGroupEvent from "./event/bdsClickAvatarGroup";
import AvatarDefault from "./structures/avatarDefault";
import AvatarGroup from "./structures/avatarGroup";
import AvatarSize from "./structures/avatarSize";
import AvatarUpload from "./structures/avatarUpload";

export default function Avatar() {
return (
Expand All @@ -13,32 +19,35 @@ export default function Avatar() {

<bds-typo variant="fs-32" italic bold="extra-bold" margin="false">
{/* Component name */}
Avatar
</bds-typo>
<bds-grid>
<bds-grid padding="l-2">
<bds-typo variant="fs-14">Status:</bds-typo>
</bds-grid>
<bds-chip-tag color="success">Funcionando</bds-chip-tag>
<bds-chip-tag color="danger">Error</bds-chip-tag>
</bds-grid>
</bds-grid>

<bds-tabs align="left">
<bds-tab group="tab1" label="Structures"></bds-tab>
<bds-tab group="tab2" label="Method"></bds-tab>
<bds-tab group="tab3" label="Event"></bds-tab>
<bds-tab group="tab2" label="Event"></bds-tab>
</bds-tabs>
<bds-grid xxs="11" margin="auto">
<hr />
</bds-grid>

<bds-tab-panel group="tab1">
{/* Import here the structures component */}
<AvatarDefault />
<AvatarGroup />
<AvatarSize />
<AvatarUpload />
</bds-tab-panel>
<bds-tab-panel group="tab2">
{/* Import here the Method component */}
</bds-tab-panel>
<bds-tab-panel group="tab3">
{/* Import here the Event component */}
<ClickEvent />
<ClickGroupEvent />
</bds-tab-panel>

</bds-grid>
Expand Down
65 changes: 31 additions & 34 deletions src/components/avatar/event/bdsClickAvatar.js
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,17 @@
import React, { useEffect, useState } from "react";
import {motion} from 'framer-motion';

export default function NameEvent() {
import { motion } from "framer-motion";

export default function ClickEvent() {
// Put here the event function

const [result, setResult] = useState(false);

useEffect(() => {
const element = document.getElementById('banner');
element.addEventListener('bdsBannerClose', () => {
const element = document.getElementById("clickAvatar");
element.addEventListener("bdsClickAvatar", () => {
setResult(true);
}, [])
})
})
});

return (
<bds-grid
Expand All @@ -26,14 +25,12 @@ export default function NameEvent() {
<bds-grid xxs="12" direction="column">
<bds-typo class="title-2" variant="fs-24" bold="bold">
{/* Put here the event name */}
bdsComponentEvent
bdsClickAvatar
</bds-typo>
<hr />
<bds-banner context="inside" variant="error">The event does nothing, will be fixed.</bds-banner>
</bds-grid>
<bds-grid
xxs="12"
justify-content="center"
>
<bds-grid xxs="12" justify-content="center">
<bds-grid
xxs="12"
direction="column"
Expand All @@ -42,24 +39,27 @@ export default function NameEvent() {
margin="t-3"
>
<bds-grid direction="column" gap="1">
<bds-typo bold="bold">
The component using the event
</bds-typo>
<bds-typo bold="bold">The component using the event</bds-typo>
<bds-grid padding="x-3">
<bds-banner id="banner" variant="system" button-close="true">
Instabilidade na plataforma? Não se preocupe, já estamos resolvendo!
</bds-banner>
<bds-avatar name="Michael Scott" size="standard" upload="true" id="clickAvatar">
</bds-avatar>
{result ? (
<motion.div
animate={{ x: 100 }}
transition={{ ease: "easeOut", duration: 2 }}>
animate={{ x: 100 }}
transition={{ ease: "easeOut", duration: 2 }}
>
<bds-paper>
<bds-grid padding="2" justify-content="center">
<bds-typo>This text appeared as a result of the bdsComponentEvent event</bds-typo>
</bds-grid>
</bds-paper>
<bds-grid padding="2" justify-content="center">
<bds-typo>
This text appeared as a result of the
bdsComponentEvent event
</bds-typo>
</bds-grid>
</bds-paper>
</motion.div>
) : ''}
) : (
""
)}
</bds-grid>
</bds-grid>

Expand All @@ -71,11 +71,8 @@ export default function NameEvent() {
<bds-grid padding="x-3">
<bds-typo variant="fs-14" bold="regular">
<code>
<pre>
{
`<bds-component id="component"></bds-banner>`
}
</pre>
<pre>{`<bds-avatar name="Michael Scott" size="standard" upload="true" id="clickAvatar">
</bds-avatar>`}</pre>
</code>
</bds-typo>
</bds-grid>
Expand All @@ -92,11 +89,11 @@ export default function NameEvent() {
{` const [result, setResult] = useState(false);
useEffect(() => {
const element = document.getElementById('component');
element.addEventListener('bdsComponentEvent', () => {
const element = document.getElementById("clickAvatar");
element.addEventListener("bdsClickAvatar", () => {
setResult(true);
}, [])
})`}
})
});`}
</pre>
</code>
</bds-typo>
Expand Down
117 changes: 117 additions & 0 deletions src/components/avatar/event/bdsClickAvatarGroup.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,117 @@
import React, { useEffect, useState } from "react";
import { motion } from "framer-motion";

export default function ClickGroupEvent() {
// Put here the event function

const users = [
{"id": "1", "name": "Michael Scott"},
{"id": "2", "name": "Dwight Schrute"},
{"id": "3", "name": "Jim Halpert"},
{"id": "4", "name": "Pam Beesly"},
{"id": "5", "name": "Ryan Howard"},
{"id": "6", "name": "Andy Bernard"}
]

const [result, setResult] = useState(false);

useEffect(() => {
const element = document.getElementById("clickAvatar");
element.addEventListener("bdsClickAvatar", () => {
setResult(true);
})
});

return (
<bds-grid
xxs="12"
direction="column"
gap="4"
margin="y-8"
align-items="center"
>
<bds-grid direction="column" xxs="12" align-items="center">
<bds-grid xxs="12" direction="column">
<bds-typo class="title-2" variant="fs-24" bold="bold">
{/* Put here the event name */}
bdsClickAvatarGroup
</bds-typo>
<hr />
<bds-banner context="inside" variant="error">The event does nothing, will be fixed.</bds-banner>
</bds-grid>
<bds-grid xxs="12" justify-content="center">
<bds-grid
xxs="12"
direction="column"
gap="4"
justify-content="space-around"
margin="t-3"
>
<bds-grid direction="column" gap="1">
<bds-typo bold="bold">The component using the event</bds-typo>
<bds-grid padding="x-3">
<bds-avatar-group users={JSON.stringify(users)} size="standard" can-click="true" id="clickAvatar">
</bds-avatar-group>
{result ? (
<motion.div
animate={{ x: 100 }}
transition={{ ease: "easeOut", duration: 2 }}
>
<bds-paper>
<bds-grid padding="2" justify-content="center">
<bds-typo>
This text appeared as a result of the
bdsComponentEvent event
</bds-typo>
</bds-grid>
</bds-paper>
</motion.div>
) : (
""
)}
</bds-grid>
</bds-grid>

<bds-grid direction="column" gap="1">
<bds-typo bold="bold">
The component code using the event
</bds-typo>
<bds-paper>
<bds-grid padding="x-3">
<bds-typo variant="fs-14" bold="regular">
<code>
<pre>{`<bds-avatar-group users={JSON.stringify(users)} can-click="true" size="standard" id="clickAvatar">
</bds-avatar-group>`}</pre>
</code>
</bds-typo>
</bds-grid>
</bds-paper>
</bds-grid>

<bds-grid direction="column" gap="1">
<bds-typo bold="bold">The function</bds-typo>
<bds-paper>
<bds-grid padding="x-3">
<bds-typo variant="fs-14" bold="regular">
<code>
<pre>
{` const [result, setResult] = useState(false);
useEffect(() => {
const element = document.getElementById("clickAvatar");
element.addEventListener("bdsClickAvatar", () => {
setResult(true);
})
});`}
</pre>
</code>
</bds-typo>
</bds-grid>
</bds-paper>
</bds-grid>
</bds-grid>
</bds-grid>
</bds-grid>
</bds-grid>
);
}
9 changes: 7 additions & 2 deletions src/components/avatar/structures/avatarDefault.js
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,12 @@
import React from "react";

export default function AccordionDefault() {
export default function AvatarDefault() {
return (
<bds-grid direction="column" xxs="12" gap="4" margin="y-8">
<bds-grid xxs="12" direction="column">
<bds-typo class="title-2" variant="fs-24" bold="bold">
{/* Put here the component name */}
Avatar Default
</bds-typo>
<hr />
</bds-grid>
Expand All @@ -22,7 +23,8 @@ export default function AccordionDefault() {
<bds-typo variant="fs-14" bold="regular">
<code>
<pre>
{`<bds-component></bds-component>`}
{`<bds-avatar name="Michael Scott" size="standard" upload="false">
</bds-avatar>`}
</pre>
</code>
</bds-typo>
Expand All @@ -34,6 +36,9 @@ export default function AccordionDefault() {
<bds-typo bold="bold">The component</bds-typo>
<bds-paper>
{/* Put here the component example */}
<bds-grid padding="2">
<bds-avatar name="Michael Scott" size="standard" upload="false"></bds-avatar>
</bds-grid>
</bds-paper>
</bds-grid>

Expand Down
20 changes: 18 additions & 2 deletions src/components/avatar/structures/avatarGroup.js
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,21 @@
import React from "react";

export default function AccordionDefault() {
export default function AvatarGroup() {
const users = [
{"id": "1", "name": "Michael Scott"},
{"id": "2", "name": "Dwight Schrute"},
{"id": "3", "name": "Jim Halpert"},
{"id": "4", "name": "Pam Beesly"},
{"id": "5", "name": "Ryan Howard"},
{"id": "6", "name": "Andy Bernard"}
]

return (
<bds-grid direction="column" xxs="12" gap="4" margin="y-8">
<bds-grid xxs="12" direction="column">
<bds-typo class="title-2" variant="fs-24" bold="bold">
{/* Put here the component name */}
Avatar Group
</bds-typo>
<hr />
</bds-grid>
Expand All @@ -22,7 +32,8 @@ export default function AccordionDefault() {
<bds-typo variant="fs-14" bold="regular">
<code>
<pre>
{`<bds-component></bds-component>`}
{`<bds-avatar-group size="standard" users={JSON.stringify(arrayUsers)}>
</bds-avatar-group>`}
</pre>
</code>
</bds-typo>
Expand All @@ -34,6 +45,11 @@ export default function AccordionDefault() {
<bds-typo bold="bold">The component</bds-typo>
<bds-paper>
{/* Put here the component example */}
<bds-grid padding="2">
<bds-avatar-group size="standard" users={JSON.stringify(users)}>
</bds-avatar-group>
</bds-grid>

</bds-paper>
</bds-grid>

Expand Down
Loading

0 comments on commit 62013aa

Please sign in to comment.