From f1d70b8b11551f42324263086da565e19de97623 Mon Sep 17 00:00:00 2001 From: GUSTAVO DOS SANTOS NASCIMENTO Date: Fri, 3 Nov 2023 13:49:31 -0300 Subject: [PATCH 01/18] =?UTF-8?q?configurando=20storiebook=20e=20adicionan?= =?UTF-8?q?do=20o=20bot=C3=A3o?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/counter/counterFunction.js | 7 +++++ .../counter/counterFunction.stories.ts | 24 +++++++++++++++ src/components/logo/logo.js | 12 ++++++++ src/components/logo/logo.stories.ts | 30 +++++++++++++++++++ 4 files changed, 73 insertions(+) create mode 100644 src/components/counter/counterFunction.js create mode 100644 src/components/counter/counterFunction.stories.ts create mode 100644 src/components/logo/logo.js create mode 100644 src/components/logo/logo.stories.ts diff --git a/src/components/counter/counterFunction.js b/src/components/counter/counterFunction.js new file mode 100644 index 0000000..7282418 --- /dev/null +++ b/src/components/counter/counterFunction.js @@ -0,0 +1,7 @@ +import '../../style.css' + +export function counter() { + return `
+ +
`; +} diff --git a/src/components/counter/counterFunction.stories.ts b/src/components/counter/counterFunction.stories.ts new file mode 100644 index 0000000..9e4fde0 --- /dev/null +++ b/src/components/counter/counterFunction.stories.ts @@ -0,0 +1,24 @@ +import type { StoryObj, Meta } from '@storybook/html'; +import { counter } from './counterFunction.js'; + +// More on how to set up stories at: https://storybook.js.org/docs/html/writing-stories/introduction#default-export +const meta = { + title: 'App/Counter', + tags: ['autodocs'], + render: () => { + // You can either use a function to create DOM elements or use a plain html string! + // return `
${label}
`; + return counter(); + }, +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +// More on writing stories with args: https://storybook.js.org/docs/html/writing-stories/args +export const Primary: Story = { + args: { + primary: true, + label: 'Button', + }, +}; \ No newline at end of file diff --git a/src/components/logo/logo.js b/src/components/logo/logo.js new file mode 100644 index 0000000..8944a80 --- /dev/null +++ b/src/components/logo/logo.js @@ -0,0 +1,12 @@ +import '../../style.css' + +/** + * @param {string} link + * @param {string} img + * @param {string} descricao + */ +export function logo(link, img, descricao) { + return ` + +`; +} diff --git a/src/components/logo/logo.stories.ts b/src/components/logo/logo.stories.ts new file mode 100644 index 0000000..1ae53a5 --- /dev/null +++ b/src/components/logo/logo.stories.ts @@ -0,0 +1,30 @@ +import type { StoryObj, Meta } from '@storybook/html'; +import { logo } from './logo.js'; + +// More on how to set up stories at: https://storybook.js.org/docs/html/writing-stories/introduction#default-export +const meta = { + title: 'App/Logo', + tags: ['autodocs'], + render: () => { + // You can either use a function to create DOM elements or use a plain html string! + // return `
${label}
`; + return logo("google.com", "../../../public/vite.svg", "Vite"); + }, + + argTypes: { + Logo: { + control: { type: 'select' }, + options: ['Vite', 'JavaScript'], + }, + } +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +// More on writing stories with args: https://storybook.js.org/docs/html/writing-stories/args +export const Vite: Story = { + args: { + Logo: "Vite" + }, +}; \ No newline at end of file From 93dd99809749d06e272620da3b5cbe11c8ee4003 Mon Sep 17 00:00:00 2001 From: Rodrigo Neto Date: Fri, 10 Nov 2023 12:47:43 +0000 Subject: [PATCH 02/18] . --- src/counter.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/counter.js b/src/counter.js index 63bd9b8..45bab2a 100644 --- a/src/counter.js +++ b/src/counter.js @@ -15,3 +15,5 @@ export function setupCounter(element) { element.addEventListener("click", () => setCounter(counter + 1)); setCounter(0); } + + From c76018b2614344773cda4714d153d19ed21b8b17 Mon Sep 17 00:00:00 2001 From: Gustavo Nascimento Date: Fri, 10 Nov 2023 14:57:50 +0000 Subject: [PATCH 03/18] Card alias --- src/components/avatar/avatar.css | 6 +++++ src/components/avatar/avatar.stories.ts | 31 +++++++++++++++++++++++++ src/components/avatar/index.js | 18 ++++++++++++++ src/components/card/card.css | 0 src/components/card/card.stories.ts | 30 ++++++++++++++++++++++++ src/components/card/index.js | 26 +++++++++++++++++++++ 6 files changed, 111 insertions(+) create mode 100644 src/components/avatar/avatar.css create mode 100644 src/components/avatar/avatar.stories.ts create mode 100644 src/components/avatar/index.js create mode 100644 src/components/card/card.css create mode 100644 src/components/card/card.stories.ts create mode 100644 src/components/card/index.js diff --git a/src/components/avatar/avatar.css b/src/components/avatar/avatar.css new file mode 100644 index 0000000..e8f7daa --- /dev/null +++ b/src/components/avatar/avatar.css @@ -0,0 +1,6 @@ +.avatar-container img { + border: 3px solid red; + padding: 3px; + border-radius: 50%; + width: 250px; +} \ No newline at end of file diff --git a/src/components/avatar/avatar.stories.ts b/src/components/avatar/avatar.stories.ts new file mode 100644 index 0000000..0b2ac88 --- /dev/null +++ b/src/components/avatar/avatar.stories.ts @@ -0,0 +1,31 @@ +import type { StoryObj, Meta } from '@storybook/html'; + +import { avatar } from './index'; +import type {avatarProps} from './index'; + +// More on how to set up stories at: https://storybook.js.org/docs/html/writing-stories/introduction#default-export +const meta = { + title: 'App/Avatar', + tags: ['autodocs'], + render: (args) => { + return avatar(args); + }, + argTypes: { + link: {description: 'endereço para o link do Avatar'}, + imgSrc: {description: 'endereço para a imagem do Avatar'}, + descricao: {description: 'descrição da imagem do Avatar'} + } +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +// More on writing stories with args: https://storybook.js.org/docs/html/writing-stories/args +export const Primary: Story = { + args: { + link: 'https://github.com/Gustavo-S-Nascimento', + imgSrc: 'https://avatars.githubusercontent.com/u/74427958?v=4', + descricao: 'Avatar from github' + } +}; + diff --git a/src/components/avatar/index.js b/src/components/avatar/index.js new file mode 100644 index 0000000..04162a4 --- /dev/null +++ b/src/components/avatar/index.js @@ -0,0 +1,18 @@ +import './avatar.css' + + +/** + * @typedef {Object} avatarProps + * @property {string} avatarProps.link - some description here + * @property {string} avatarProps.imgSrc - some description here + * @property {string} avatarProps.descricao - some description here + * + * @param {avatarProps} props + */ +export function avatar({link, imgSrc, descricao}) { + return ` + + ${descricao} + + ` +} diff --git a/src/components/card/card.css b/src/components/card/card.css new file mode 100644 index 0000000..e69de29 diff --git a/src/components/card/card.stories.ts b/src/components/card/card.stories.ts new file mode 100644 index 0000000..6432b26 --- /dev/null +++ b/src/components/card/card.stories.ts @@ -0,0 +1,30 @@ +import type { StoryObj, Meta } from '@storybook/html'; + +import { CardProps, card } from './index'; + +// More on how to set up stories at: https://storybook.js.org/docs/html/writing-stories/introduction#default-export +const meta = { + title: 'App/card', + tags: ['autodocs'], + render: (args) => { + return card(args); + }, + argTypes: { + nome: {description: 'endereço para o nome do logo'}, + img: {description: 'endereço para a imgaem do logo'}, + cargo: {description: 'descrição da imagem do logo'} + } +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +// More on writing stories with args: https://storybook.js.org/docs/html/writing-stories/args +export const Primary: Story = { + args: { + nome: 'Polvo', + img: 'https://github.githubassets.com/assets/mona-loading-dark-7701a7b97370.gif', + cargo: 'Emoji Github' + } +}; + diff --git a/src/components/card/index.js b/src/components/card/index.js new file mode 100644 index 0000000..a7d4999 --- /dev/null +++ b/src/components/card/index.js @@ -0,0 +1,26 @@ +import { avatar } from "../avatar"; + +/** + * @typedef { Object } CardProps + * @property { string } CardProps.nome + * @property { string } CardProps.cargo + * @property { string } CardProps.img + * @param { CardProps } props + */ + +export function card({ nome, cargo, img }) { + return ` +
+
+ ${avatar({ link: "", imgSrc: img, descricao: "" })} +
+ +
+

Nome: ${nome}

+

Cargo: ${cargo}

+
+ + +
+ `; +} \ No newline at end of file From 70dcabee83f4e949eb85a4f353b831711ac090bf Mon Sep 17 00:00:00 2001 From: FRANCISCO RODRIGUES SOBRINHO NETO Date: Fri, 3 Nov 2023 13:47:06 -0600 Subject: [PATCH 04/18] =?UTF-8?q?come=C3=A7ando?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/avatar/avatar.css | 8 ++++++++ 1 file changed, 8 insertions(+) create mode 100644 src/components/avatar/avatar.css diff --git a/src/components/avatar/avatar.css b/src/components/avatar/avatar.css new file mode 100644 index 0000000..d6eab44 --- /dev/null +++ b/src/components/avatar/avatar.css @@ -0,0 +1,8 @@ +img{ + width: 3rem; + height: 3rem; + border-radius: 50%; + border: 3px solid blue; + object-fit: cover; + +} \ No newline at end of file From 8135971cf61b928dec18f07a4d35a0504a0ebfa0 Mon Sep 17 00:00:00 2001 From: Rodrigo Neto Date: Fri, 10 Nov 2023 15:08:08 +0000 Subject: [PATCH 05/18] feitos avatar e card --- .gitpod.yml | 11 ++++ src/components/avatar/avatar.stories.ts | 29 +++++++++ src/components/avatar/index.js | 13 ++++ src/components/cards/card.css | 5 ++ src/components/cards/card.stories.ts | 31 ++++++++++ src/components/cards/index.js | 26 ++++++++ src/components/counter/counter.css | 74 +++++++++++++++++++++++ src/components/counter/counter.stories.ts | 15 +++++ src/components/counter/index.js | 9 +++ src/components/logo/index.js | 10 +++ 10 files changed, 223 insertions(+) create mode 100644 .gitpod.yml create mode 100644 src/components/avatar/avatar.stories.ts create mode 100644 src/components/avatar/index.js create mode 100644 src/components/cards/card.css create mode 100644 src/components/cards/card.stories.ts create mode 100644 src/components/cards/index.js diff --git a/.gitpod.yml b/.gitpod.yml new file mode 100644 index 0000000..9e083d8 --- /dev/null +++ b/.gitpod.yml @@ -0,0 +1,11 @@ +# This configuration file was automatically generated by Gitpod. +# Please adjust to your needs (see https://www.gitpod.io/docs/introduction/learn-gitpod/gitpod-yaml) +# and commit this file to your remote git repository to share the goodness with others. + +# Learn more from ready-to-use templates: https://www.gitpod.io/docs/introduction/getting-started/quickstart + +tasks: + - init: npm install && npm run build + command: npm run dev + + diff --git a/src/components/avatar/avatar.stories.ts b/src/components/avatar/avatar.stories.ts new file mode 100644 index 0000000..64e1d2b --- /dev/null +++ b/src/components/avatar/avatar.stories.ts @@ -0,0 +1,29 @@ +import type { StoryObj, Meta } from '@storybook/html'; +import { AvatarProps, avatar } from './index'; + +// More on how to set up stories at: https://storybook.js.org/docs/html/writing-stories/introduction#default-export +const meta = { + title: 'App/avatar', + tags: ['autodocs'], + render: (args) => { + return avatar(args); + }, + argTypes: { + imgSrc: {description: 'endereço para a imgaem do logo'}, + descricao: {description: 'descrição da imagem do logo'} + } +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +// More on writing stories with args: https://storybook.js.org/docs/html/writing-stories/args +export const Primary: Story = { + args: { + imgSrc: 'https://s2-g1.glbimg.com/gZrnzQkY70EZ2ZP0zwB689bUAak=/0x0:5184x3456/1008x0/smart/filters:strip_icc()/i.s3.glbimg.com/v1/AUTH_59edd422c0c84a879bd37670ae4f538a/internal_photos/bs/2020/9/e/EYKMBXR72tNdkUAgmZzQ/azul-caneta.jpg', + descricao: 'Octocat from Github ' + } +}; + + + diff --git a/src/components/avatar/index.js b/src/components/avatar/index.js new file mode 100644 index 0000000..35e0208 --- /dev/null +++ b/src/components/avatar/index.js @@ -0,0 +1,13 @@ +import "./avatar.css"; + +/** + * @typedef {Object} AvatarProps + * @property {string} AvatarProps.imgSrc - some description here + * @property {string} AvatarProps.descricao - some description here + * @param {AvatarProps} props + */ +export function avatar({ imgSrc, descricao }) { + return ` + ${descricao} + `; +} \ No newline at end of file diff --git a/src/components/cards/card.css b/src/components/cards/card.css new file mode 100644 index 0000000..21fe5f2 --- /dev/null +++ b/src/components/cards/card.css @@ -0,0 +1,5 @@ +.container{ + display: flex; + justify-content: center; + +} \ No newline at end of file diff --git a/src/components/cards/card.stories.ts b/src/components/cards/card.stories.ts new file mode 100644 index 0000000..f352356 --- /dev/null +++ b/src/components/cards/card.stories.ts @@ -0,0 +1,31 @@ +import type { StoryObj, Meta } from '@storybook/html'; +import type { CardProps } from './index'; +import { card } from './index'; +// More on how to set up stories at: https://storybook.js.org/docs/html/writing-stories/introduction#default-export +const meta = { + title: 'App/card', + tags: ['autodocs'], + render: (args) => { + return card(args); + }, + argTypes: { + nome: {cargo: 'nome do profile'}, + cargo: {description: 'descrição da imagem do logo'},img: {description: 'descrição da imagem do logo'} + } +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +// More on writing stories with args: https://storybook.js.org/docs/html/writing-stories/args +export const Primary: Story = { + args: { + nome: ' Mr. Abraão Alves', + cargo: 'The King of Typescript', + img: 'https://avatars.githubusercontent.com/u/608731?v=4', + + } +}; + + + diff --git a/src/components/cards/index.js b/src/components/cards/index.js new file mode 100644 index 0000000..40a5dd0 --- /dev/null +++ b/src/components/cards/index.js @@ -0,0 +1,26 @@ +import { avatar } from "../avatar"; + +/** + * @typedef { Object } CardProps + * @property { string } CardProps.nome + * @property { string } CardProps.cargo + * @property { string } CardProps.img + * @param { CardProps } props + */ + +export function card({ nome, cargo, img }) { + return ` +
+
+ ${avatar({ imgSrc: img, descricao: "" })} +
+ +
+

Nome: ${nome}

+

Cargo: ${cargo}

+
+ + +
+ `; +} \ No newline at end of file diff --git a/src/components/counter/counter.css b/src/components/counter/counter.css index 14c8042..7d7e844 100644 --- a/src/components/counter/counter.css +++ b/src/components/counter/counter.css @@ -1,4 +1,78 @@ +<<<<<<< HEAD .card button { background-color: red; +======= +html, +body { + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + background: #000; +} + +.glow-on-hover { + width: 220px; + height: 50px; + border: none; + outline: none; + color: #fff; + background: #111; + cursor: pointer; + position: relative; + z-index: 0; + border-radius: 10px; +} + +.glow-on-hover:before { + content: ''; + background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000); + position: absolute; + top: -2px; + left:-2px; + background-size: 400%; + z-index: -1; + filter: blur(5px); + width: calc(100% + 4px); + height: calc(100% + 4px); + animation: glowing 20s linear infinite; + opacity: 0; + transition: opacity .3s ease-in-out; + border-radius: 10px; +} + +.glow-on-hover:active { + color: #000 +} + +.glow-on-hover:active:after { + background: transparent; +} + +.glow-on-hover:hover:before { + opacity: 1; +} + +.glow-on-hover:after { + z-index: -1; + content: ''; + position: absolute; + width: 100%; + height: 100%; + background: #111; + left: 0; + top: 0; + border-radius: 10px; +} + +@keyframes glowing { + 0% { background-position: 0 0; } + 50% { background-position: 400% 0; } + 100% { background-position: 0 0; } +>>>>>>> a1169f6 (botão feito) } \ No newline at end of file diff --git a/src/components/counter/counter.stories.ts b/src/components/counter/counter.stories.ts index 1050e9a..d52d226 100644 --- a/src/components/counter/counter.stories.ts +++ b/src/components/counter/counter.stories.ts @@ -6,14 +6,21 @@ import { counter } from './index'; const meta = { title: 'App/Counter', tags: ['autodocs'], +<<<<<<< HEAD parameters:{ layout: 'fullscreen' }, +======= +>>>>>>> a1169f6 (botão feito) render: () => { // You can either use a function to create DOM elements or use a plain html string! // return `
${label}
`; return counter(); }, +<<<<<<< HEAD +======= + +>>>>>>> a1169f6 (botão feito) } satisfies Meta; export default meta; @@ -21,6 +28,14 @@ type Story = StoryObj; // More on writing stories with args: https://storybook.js.org/docs/html/writing-stories/args export const Primary: Story = { +<<<<<<< HEAD args: {}, }; +======= + args: { + primary: true, + label: 'Button', + }, +}; +>>>>>>> a1169f6 (botão feito) diff --git a/src/components/counter/index.js b/src/components/counter/index.js index c66ff4c..fc9c8eb 100644 --- a/src/components/counter/index.js +++ b/src/components/counter/index.js @@ -1,3 +1,4 @@ +<<<<<<< HEAD import './counter.css'; export function counter() { @@ -8,4 +9,12 @@ export function counter() { `; +======= +import './counter.css' +export function counter() { + return ` +
+ +
` +>>>>>>> a1169f6 (botão feito) } \ No newline at end of file diff --git a/src/components/logo/index.js b/src/components/logo/index.js index 84b95d8..60c43db 100644 --- a/src/components/logo/index.js +++ b/src/components/logo/index.js @@ -1,3 +1,4 @@ +<<<<<<< HEAD import './logo.css' @@ -16,3 +17,12 @@ export function logo({link, imgSrc, descricao}) { ` } +======= +export function logo(link, img, descricao) { + return ` + + + + ` + } +>>>>>>> a1169f6 (botão feito) From 6531fcfd628b13be44412cd6813be56a255d25df Mon Sep 17 00:00:00 2001 From: Gustavo-S-Nascimento Date: Wed, 15 Nov 2023 00:38:32 -0300 Subject: [PATCH 06/18] Ideia de card --- src/components/avatar/avatar.css | 9 ++-- src/components/card/card.css | 70 +++++++++++++++++++++++++++++ src/components/card/card.stories.ts | 19 ++++++-- src/components/card/index.js | 28 ++++++------ 4 files changed, 104 insertions(+), 22 deletions(-) diff --git a/src/components/avatar/avatar.css b/src/components/avatar/avatar.css index e8f7daa..2ab080e 100644 --- a/src/components/avatar/avatar.css +++ b/src/components/avatar/avatar.css @@ -1,6 +1,5 @@ -.avatar-container img { - border: 3px solid red; - padding: 3px; - border-radius: 50%; - width: 250px; +.card-container img { + width: 11rem; + height: 17rem; + object-fit: cover; } \ No newline at end of file diff --git a/src/components/card/card.css b/src/components/card/card.css index e69de29..60db77a 100644 --- a/src/components/card/card.css +++ b/src/components/card/card.css @@ -0,0 +1,70 @@ +@import url(https://fonts.google.com/specimen/Poppins); + +* { + padding: 0; + margin: 0; + box-sizing: border-box; +} + + +.card { + width: 11.4375rem; + height: 17rem; + border-radius: 1.25rem; + border: 4px solid #5ee0f9; + overflow: hidden; + font-family: Poppins, Arial, Helvetica, sans-serif; + overflow: hidden; +} + +.card-container { + width: 100%; + height: 100%; +} + +.card-container img { + width: 11rem; + height: 17rem; + object-fit: cover; +} + +.card-container .footer { + position: relative; + width: 100%; + height: 45px; + bottom: 60px; + background: rgba(87, 87, 87, 0.70); + backdrop-filter: blur(27.5px); + display: inline-flex; + flex-wrap: wrap; + flex-direction: column; + justify-content: center; + align-items: center; + border-radius: 0 0 10px 10px; + padding: 5px; + color: #fff; +} + +.info { + display: flex; + flex-direction: column; + justify-content: center; + align-items: flex-start; +} + +.footer p { + font-size: .875em; + font-weight: 700; +} + +.footer span { + font-size: .6875rem; + font-weight: 400; +} + +.footer .button-white { + width: 1.875rem; + height: 1.8625rem; + background-color: #fff; + border-radius: 10px; +} \ No newline at end of file diff --git a/src/components/card/card.stories.ts b/src/components/card/card.stories.ts index 6432b26..21ced85 100644 --- a/src/components/card/card.stories.ts +++ b/src/components/card/card.stories.ts @@ -10,9 +10,10 @@ const meta = { return card(args); }, argTypes: { - nome: {description: 'endereço para o nome do logo'}, - img: {description: 'endereço para a imgaem do logo'}, - cargo: {description: 'descrição da imagem do logo'} + nome: {description: 'Nome do objeto de avatar'}, + img: {description: 'endereço para a imagem do avatar'}, + cargo: {description: 'cargo do objeto de avatar'}, + idade: {description: 'Idade do objeto de avatar'} } } satisfies Meta; @@ -24,7 +25,17 @@ export const Primary: Story = { args: { nome: 'Polvo', img: 'https://github.githubassets.com/assets/mona-loading-dark-7701a7b97370.gif', - cargo: 'Emoji Github' + cargo: 'Emoji Github', + idade: 20 } }; +export const Wikipedia: Story = { + args: { + nome: "João Vitor", + img: 'https://avatars.githubusercontent.com/u/84153149?v=4', + cargo: "Wikipedia", + idade: 20 + } +} + diff --git a/src/components/card/index.js b/src/components/card/index.js index a7d4999..98f1f0e 100644 --- a/src/components/card/index.js +++ b/src/components/card/index.js @@ -1,26 +1,28 @@ import { avatar } from "../avatar"; +import './card.css'; /** * @typedef { Object } CardProps * @property { string } CardProps.nome * @property { string } CardProps.cargo * @property { string } CardProps.img + * @property {string} CardProps.idade * @param { CardProps } props */ -export function card({ nome, cargo, img }) { - return ` -
-
- ${avatar({ link: "", imgSrc: img, descricao: "" })} -
- -
-

Nome: ${nome}

-

Cargo: ${cargo}

-
- - +export function card({ nome, cargo, img, idade }) { + return ` +
+
+ ${avatar({ imgSrc: img, descricao: "", link: "" })} +
+
+

${nome}

+ ${cargo}, ${idade}y
+
+
+
+
`; } \ No newline at end of file From cd8aa489999875650357f756133b0ebee9ecfacb Mon Sep 17 00:00:00 2001 From: Rodrigo Neto Date: Wed, 15 Nov 2023 15:50:57 +0000 Subject: [PATCH 07/18] commit init --- src/components/counter/index.js | 9 --------- src/components/logo/index.js | 10 ---------- 2 files changed, 19 deletions(-) diff --git a/src/components/counter/index.js b/src/components/counter/index.js index fc9c8eb..c66ff4c 100644 --- a/src/components/counter/index.js +++ b/src/components/counter/index.js @@ -1,4 +1,3 @@ -<<<<<<< HEAD import './counter.css'; export function counter() { @@ -9,12 +8,4 @@ export function counter() {
`; -======= -import './counter.css' -export function counter() { - return ` -
- -
` ->>>>>>> a1169f6 (botão feito) } \ No newline at end of file diff --git a/src/components/logo/index.js b/src/components/logo/index.js index 60c43db..84b95d8 100644 --- a/src/components/logo/index.js +++ b/src/components/logo/index.js @@ -1,4 +1,3 @@ -<<<<<<< HEAD import './logo.css' @@ -17,12 +16,3 @@ export function logo({link, imgSrc, descricao}) { ` } -======= -export function logo(link, img, descricao) { - return ` - - - - ` - } ->>>>>>> a1169f6 (botão feito) From e2bda4a0eb33eaee9b237d7f3b58dafb2a431f01 Mon Sep 17 00:00:00 2001 From: Gustavo-S-Nascimento Date: Wed, 15 Nov 2023 13:22:34 -0300 Subject: [PATCH 08/18] add color border and blur active --- src/components/card/card.css | 30 +++++++++++++++++++++++++---- src/components/card/card.stories.ts | 27 +++++++++++++++++++------- src/components/card/index.js | 8 +++++--- 3 files changed, 51 insertions(+), 14 deletions(-) diff --git a/src/components/card/card.css b/src/components/card/card.css index 60db77a..e6b61ee 100644 --- a/src/components/card/card.css +++ b/src/components/card/card.css @@ -11,8 +11,8 @@ width: 11.4375rem; height: 17rem; border-radius: 1.25rem; - border: 4px solid #5ee0f9; overflow: hidden; + border: 4px solid #444444; font-family: Poppins, Arial, Helvetica, sans-serif; overflow: hidden; } @@ -20,6 +20,7 @@ .card-container { width: 100%; height: 100%; + overflow: hidden; } .card-container img { @@ -32,9 +33,8 @@ position: relative; width: 100%; height: 45px; - bottom: 60px; + bottom: 55px; background: rgba(87, 87, 87, 0.70); - backdrop-filter: blur(27.5px); display: inline-flex; flex-wrap: wrap; flex-direction: column; @@ -67,4 +67,26 @@ height: 1.8625rem; background-color: #fff; border-radius: 10px; -} \ No newline at end of file + cursor: pointer; +} + +.azul { + border: 4px solid #5ee0f9; +} + +.verde { + border: 4px solid #5ef973; +} + +.vermelho { + border: 4px solid #fd3434; +} + + +.blur { + backdrop-filter: blur(27.5px); +} + +/* .default { + border: 4px solid #444444; +} */ \ No newline at end of file diff --git a/src/components/card/card.stories.ts b/src/components/card/card.stories.ts index 21ced85..8a784ef 100644 --- a/src/components/card/card.stories.ts +++ b/src/components/card/card.stories.ts @@ -10,10 +10,22 @@ const meta = { return card(args); }, argTypes: { - nome: {description: 'Nome do objeto de avatar'}, - img: {description: 'endereço para a imagem do avatar'}, - cargo: {description: 'cargo do objeto de avatar'}, - idade: {description: 'Idade do objeto de avatar'} + nome: { description: 'Nome do objeto de avatar' }, + img: { description: 'endereço para a imagem do avatar' }, + cargo: { description: 'cargo do objeto de avatar' }, + idade: { description: 'Idade do objeto de avatar' }, + cor: { + control: { type: 'select' }, + options: ['azul', 'verde', 'vermelho', 'default'], + default: "default", + description: "Cor da borda", + + }, + blur: { + control: {type: 'radio'}, + options: ['blur', "Sem Blur"], + description: "Ativação do blur nas informações do card" + } } } satisfies Meta; @@ -23,8 +35,8 @@ type Story = StoryObj; // More on writing stories with args: https://storybook.js.org/docs/html/writing-stories/args export const Primary: Story = { args: { - nome: 'Polvo', - img: 'https://github.githubassets.com/assets/mona-loading-dark-7701a7b97370.gif', + nome: 'Polvo', + img: 'https://github.githubassets.com/assets/mona-loading-dark-7701a7b97370.gif', cargo: 'Emoji Github', idade: 20 } @@ -35,7 +47,8 @@ export const Wikipedia: Story = { nome: "João Vitor", img: 'https://avatars.githubusercontent.com/u/84153149?v=4', cargo: "Wikipedia", - idade: 20 + idade: 20, + cor: 'azul' } } diff --git a/src/components/card/index.js b/src/components/card/index.js index 98f1f0e..c2434b6 100644 --- a/src/components/card/index.js +++ b/src/components/card/index.js @@ -7,15 +7,17 @@ import './card.css'; * @property { string } CardProps.cargo * @property { string } CardProps.img * @property {string} CardProps.idade + * @property {Selection} CardProps.cor + * @property {boolean} CardProps.blur * @param { CardProps } props */ -export function card({ nome, cargo, img, idade }) { +export function card({ nome, cargo, img, idade, cor, blur }) { return ` -
+
${avatar({ imgSrc: img, descricao: "", link: "" })} -
+

${nome}

${cargo}, ${idade}y From 719193f7a36b52828691adbb52b29b63dd0a41ec Mon Sep 17 00:00:00 2001 From: Rodrigo Neto Date: Thu, 16 Nov 2023 00:11:20 +0000 Subject: [PATCH 09/18] card feito --- src/components/avatar/avatar.css | 13 ++++- src/components/avatar/index.js | 2 + src/components/cards/card.css | 69 ++++++++++++++++++++++- src/components/cards/card.stories.ts | 2 +- src/components/cards/index.js | 9 +-- src/components/counter/counter.css | 6 -- src/components/counter/counter.stories.ts | 15 ----- 7 files changed, 86 insertions(+), 30 deletions(-) diff --git a/src/components/avatar/avatar.css b/src/components/avatar/avatar.css index d6eab44..bebbe15 100644 --- a/src/components/avatar/avatar.css +++ b/src/components/avatar/avatar.css @@ -1,8 +1,15 @@ img{ - width: 3rem; - height: 3rem; + width: 120px; + height: 120px; border-radius: 50%; - border: 3px solid blue; + border: solid 3px white; object-fit: cover; +} + +.container{ + + display: flex; + justify-content: center; + align-items: center; } \ No newline at end of file diff --git a/src/components/avatar/index.js b/src/components/avatar/index.js index 35e0208..b702dcb 100644 --- a/src/components/avatar/index.js +++ b/src/components/avatar/index.js @@ -8,6 +8,8 @@ import "./avatar.css"; */ export function avatar({ imgSrc, descricao }) { return ` +
${descricao} +
`; } \ No newline at end of file diff --git a/src/components/cards/card.css b/src/components/cards/card.css index 21fe5f2..9df3bdc 100644 --- a/src/components/cards/card.css +++ b/src/components/cards/card.css @@ -1,5 +1,72 @@ -.container{ +* { + margin: 0; + padding: 0; + box-sizing: border-box; + /*outline: 1px solid aqua; + outline-offset: -1px;*/ +} + +.container { + width: 262px; + height: 91px; + padding: 20px; + + flex-direction: column; + border-radius: 10px 10px 0px 0px; + background: #82CFFA; +} + +.card { + width: 262px; + height: 269.327px; + border-radius: 20px; + border-radius: 10px; + background: #ffffff; + /* Drop Cards */ + box-shadow: 5px 5px 15px 0px rgba(0, 0, 0, 0.08); + +} + +.body { + width: 100%; + height: 100%; + margin-top: 15px; +} + + + +.header { + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + width: 120px; + height: 120px; + margin-top: 8em; + flex-shrink: 0; + border-radius: 120px; + background: url(https://avatars.githubusercontent.com/u/608731?v=4), lightgray 50% / cover no-repeat; +} + +.nome { + padding: 30px; display: flex; + width: 237px; + height: 22px; + flex-direction: column; justify-content: center; + flex-shrink: 0; + color: #6278F7; + text-align: center; + font-family: Montserrat; + font-size: 18px; + font-style: normal; + font-weight: 600; + line-height: normal; +} +.cargo { + display: flex; + justify-content: center; + color: #212121; } \ No newline at end of file diff --git a/src/components/cards/card.stories.ts b/src/components/cards/card.stories.ts index f352356..bdb4032 100644 --- a/src/components/cards/card.stories.ts +++ b/src/components/cards/card.stories.ts @@ -21,7 +21,7 @@ type Story = StoryObj; export const Primary: Story = { args: { nome: ' Mr. Abraão Alves', - cargo: 'The King of Typescript', + cargo: 'The King of TypeScript', img: 'https://avatars.githubusercontent.com/u/608731?v=4', } diff --git a/src/components/cards/index.js b/src/components/cards/index.js index 40a5dd0..68c2516 100644 --- a/src/components/cards/index.js +++ b/src/components/cards/index.js @@ -1,5 +1,5 @@ import { avatar } from "../avatar"; - +import "./card.css" /** * @typedef { Object } CardProps * @property { string } CardProps.nome @@ -10,17 +10,18 @@ import { avatar } from "../avatar"; export function card({ nome, cargo, img }) { return ` +
${avatar({ imgSrc: img, descricao: "" })}
-

Nome: ${nome}

-

Cargo: ${cargo}

+

${nome}

+

${cargo}

- +
`; } \ No newline at end of file diff --git a/src/components/counter/counter.css b/src/components/counter/counter.css index 7d7e844..b06879e 100644 --- a/src/components/counter/counter.css +++ b/src/components/counter/counter.css @@ -1,8 +1,3 @@ -<<<<<<< HEAD - -.card button { - background-color: red; -======= html, body { margin: 0; @@ -74,5 +69,4 @@ body { 0% { background-position: 0 0; } 50% { background-position: 400% 0; } 100% { background-position: 0 0; } ->>>>>>> a1169f6 (botão feito) } \ No newline at end of file diff --git a/src/components/counter/counter.stories.ts b/src/components/counter/counter.stories.ts index d52d226..1050e9a 100644 --- a/src/components/counter/counter.stories.ts +++ b/src/components/counter/counter.stories.ts @@ -6,21 +6,14 @@ import { counter } from './index'; const meta = { title: 'App/Counter', tags: ['autodocs'], -<<<<<<< HEAD parameters:{ layout: 'fullscreen' }, -======= ->>>>>>> a1169f6 (botão feito) render: () => { // You can either use a function to create DOM elements or use a plain html string! // return `
${label}
`; return counter(); }, -<<<<<<< HEAD -======= - ->>>>>>> a1169f6 (botão feito) } satisfies Meta; export default meta; @@ -28,14 +21,6 @@ type Story = StoryObj; // More on writing stories with args: https://storybook.js.org/docs/html/writing-stories/args export const Primary: Story = { -<<<<<<< HEAD args: {}, }; -======= - args: { - primary: true, - label: 'Button', - }, -}; ->>>>>>> a1169f6 (botão feito) From 4f2bb03f24fddde89f2f77c3504ff2f2a64d599b Mon Sep 17 00:00:00 2001 From: Gustavo-S-Nascimento Date: Fri, 17 Nov 2023 18:18:00 -0300 Subject: [PATCH 10/18] Ajustes no meu repositorio --- src/components/avatar/avatar.css | 14 ++--- src/components/avatar/avatar.stories.ts | 2 +- src/components/cards/card.css | 54 ++++++++++--------- src/components/cards/card.stories.ts | 22 +++++--- src/components/cards/index.js | 17 +++--- src/components/counter/counter.css | 4 +- src/components/counter/counterFunction.js | 7 --- .../counter/counterFunction.stories.ts | 24 --------- src/components/logo/logo.js | 12 ----- 9 files changed, 64 insertions(+), 92 deletions(-) delete mode 100644 src/components/counter/counterFunction.js delete mode 100644 src/components/counter/counterFunction.stories.ts delete mode 100644 src/components/logo/logo.js diff --git a/src/components/avatar/avatar.css b/src/components/avatar/avatar.css index d4a4d1c..9f675c9 100644 --- a/src/components/avatar/avatar.css +++ b/src/components/avatar/avatar.css @@ -1,20 +1,20 @@ -.avatar{ +.avatar { width: 120px; height: 120px; - border-radius: 50%; - border: solid 3px white; - object-fit: cover; - + border-radius: 50%; + border: solid 3px #fff; + object-fit: cover; } -.container{ +.container { display: flex; justify-content: center; - align-items: center; + align-content: center; } .avatar-square { border-radius: 5px; width: 120px; height: 120px; + border: solid 3px #fff; } \ No newline at end of file diff --git a/src/components/avatar/avatar.stories.ts b/src/components/avatar/avatar.stories.ts index fc946d1..7c32c78 100644 --- a/src/components/avatar/avatar.stories.ts +++ b/src/components/avatar/avatar.stories.ts @@ -3,7 +3,7 @@ import { AvatarProps, avatar } from './index'; // More on how to set up stories at: https://storybook.js.org/docs/html/writing-stories/introduction#default-export const meta = { - title: 'App/avatar', + title: 'App/Avatar', tags: ['autodocs'], render: (args) => { return avatar(args); diff --git a/src/components/cards/card.css b/src/components/cards/card.css index 9df3bdc..1938a27 100644 --- a/src/components/cards/card.css +++ b/src/components/cards/card.css @@ -2,64 +2,63 @@ margin: 0; padding: 0; box-sizing: border-box; - /*outline: 1px solid aqua; - outline-offset: -1px;*/ + /*outline: .0625rem solid aqua; + outline-offset: -0.0625rem;*/ } -.container { - width: 262px; - height: 91px; - padding: 20px; - +.card-container { + width: 16.375rem; + height: 5.6875rem; + display: flex; flex-direction: column; - border-radius: 10px 10px 0px 0px; + justify-content: center; + align-items: center; + border-radius: .625rem .625rem 0rem 0rem; background: #82CFFA; } .card { - width: 262px; - height: 269.327px; - border-radius: 20px; - border-radius: 10px; - background: #ffffff; + width: 16.375rem; + height: 16.8329rem; + border-radius: 1.25rem; + border-radius: .625rem; + background: #fff; /* Drop Cards */ - box-shadow: 5px 5px 15px 0px rgba(0, 0, 0, 0.08); + box-shadow: .3125rem .3125rem .9375rem 0rem rgba(0, 0, 0, 0.08); } .body { width: 100%; height: 100%; - margin-top: 15px; + margin-top: .9375rem; } - - .header { display: flex; justify-content: center; align-items: center; flex-direction: column; - width: 120px; - height: 120px; - margin-top: 8em; + width: 7.5rem; + height: 7.5rem; + margin-top: 12rem; flex-shrink: 0; - border-radius: 120px; + border-radius: 7.5rem; background: url(https://avatars.githubusercontent.com/u/608731?v=4), lightgray 50% / cover no-repeat; } .nome { - padding: 30px; + padding: 1.875rem; display: flex; - width: 237px; - height: 22px; + width: 14.8125rem; + height: 1.375rem; flex-direction: column; justify-content: center; flex-shrink: 0; color: #6278F7; text-align: center; font-family: Montserrat; - font-size: 18px; + font-size: 1.125rem; font-style: normal; font-weight: 600; line-height: normal; @@ -69,4 +68,7 @@ display: flex; justify-content: center; color: #212121; -} \ No newline at end of file +} + +/* Expanded Card */ + diff --git a/src/components/cards/card.stories.ts b/src/components/cards/card.stories.ts index 5538259..925dd6c 100644 --- a/src/components/cards/card.stories.ts +++ b/src/components/cards/card.stories.ts @@ -3,14 +3,17 @@ import type { CardProps } from './index'; import { card } from './index'; // More on how to set up stories at: https://storybook.js.org/docs/html/writing-stories/introduction#default-export const meta = { - title: 'App/cards', + title: 'App/Card', tags: ['autodocs'], render: (args) => { return card(args); }, argTypes: { - nome: {cargo: 'nome do profile'}, - cargo: {description: 'descrição da imagem do logo'},img: {description: 'descrição da imagem do logo'} + nome: {description: 'nome do profile', defaultValue: {summary: "Profile Name"}, }, + cargo: {description: 'cargo do profile', defaultValue: {summary: "Profile Role"}}, + img: {description: 'URL da imagem do profile', defaultValue: {summary: "Profile image"}}, + expanded: {description: 'Card em modo expandido', defaultValue: {summary: "False"}} , + SquareC: {description: 'Imagem quadrada', defaultValue: {summary: "False"}} } } satisfies Meta; @@ -23,9 +26,16 @@ export const Primary: Story = { nome: ' Mr. Abraão Alves', cargo: 'The King of TypeScript', img: 'https://avatars.githubusercontent.com/u/608731?v=4', - + expanded: false, + SquareC: false } }; - - +export const Secondary: Story = { + args: { + nome: ' Mr. Abraão Alves', + cargo: 'The King of TypeScript', + img: 'https://avatars.githubusercontent.com/u/608731?v=4', + expanded: true, + } +}; \ No newline at end of file diff --git a/src/components/cards/index.js b/src/components/cards/index.js index 1f571b6..58be8c7 100644 --- a/src/components/cards/index.js +++ b/src/components/cards/index.js @@ -5,17 +5,18 @@ import "./card.css" * @property { string } CardProps.nome * @property { string } CardProps.cargo * @property { string } CardProps.img - * @property { boolean } CardProps.expanded + * @property { boolean } CardProps.expanded + * @property { boolean } CardProps.SquareC * @param { CardProps } props */ -export function card({ nome, cargo, img, expanded }) { - if(expanded) { +export function card({ nome, cargo, img, expanded, SquareC }) { + if (expanded == true) { return `
- ${avatar({ imgSrc: img, descricao: "", square: true})} + ${avatar({ imgSrc: img, descricao: "Image of" + nome, square: SquareC })}
@@ -30,9 +31,9 @@ export function card({ nome, cargo, img, expanded }) { else { return `
-
+
- ${avatar({ imgSrc: img, descricao: "", square: false })} + ${avatar({ imgSrc: img, descricao: "Image of" + nome, square: SquareC })}
@@ -45,6 +46,6 @@ export function card({ nome, cargo, img, expanded }) { `; } - - + + } \ No newline at end of file diff --git a/src/components/counter/counter.css b/src/components/counter/counter.css index 8b13789..28b2a47 100644 --- a/src/components/counter/counter.css +++ b/src/components/counter/counter.css @@ -1 +1,3 @@ - +.card button { + background-color: red; + } \ No newline at end of file diff --git a/src/components/counter/counterFunction.js b/src/components/counter/counterFunction.js deleted file mode 100644 index 3066e35..0000000 --- a/src/components/counter/counterFunction.js +++ /dev/null @@ -1,7 +0,0 @@ -import '../../style.css' - -export function counter() { - return `
- -
`; -} diff --git a/src/components/counter/counterFunction.stories.ts b/src/components/counter/counterFunction.stories.ts deleted file mode 100644 index 6360762..0000000 --- a/src/components/counter/counterFunction.stories.ts +++ /dev/null @@ -1,24 +0,0 @@ -import type { StoryObj, Meta } from '@storybook/html'; -import { counter } from './counterFunction.js'; - -// More on how to set up stories at: https://storybook.js.org/docs/html/writing-stories/introduction#default-export -const meta = { - title: 'App/CounterFunction', - tags: ['autodocs'], - render: () => { - // You can either use a function to create DOM elements or use a plain html string! - // return `
${label}
`; - return counter(); - }, -} satisfies Meta; - -export default meta; -type Story = StoryObj; - -// More on writing stories with args: https://storybook.js.org/docs/html/writing-stories/args -export const Primary: Story = { - args: { - primary: true, - label: 'Button', - }, -}; \ No newline at end of file diff --git a/src/components/logo/logo.js b/src/components/logo/logo.js deleted file mode 100644 index 8944a80..0000000 --- a/src/components/logo/logo.js +++ /dev/null @@ -1,12 +0,0 @@ -import '../../style.css' - -/** - * @param {string} link - * @param {string} img - * @param {string} descricao - */ -export function logo(link, img, descricao) { - return ` - -`; -} From 6aabcaad2834661820f41ad46f54cb4ec5e2add4 Mon Sep 17 00:00:00 2001 From: Gustavo-S-Nascimento Date: Fri, 17 Nov 2023 18:19:31 -0300 Subject: [PATCH 11/18] voltando counter.css ao original --- src/components/counter/counter.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/counter/counter.css b/src/components/counter/counter.css index 28b2a47..514fb4d 100644 --- a/src/components/counter/counter.css +++ b/src/components/counter/counter.css @@ -1,3 +1,3 @@ .card button { - background-color: red; - } \ No newline at end of file + background-color: red; +} \ No newline at end of file From 0a91249569a929eafa6ed0661699a1620d3d2639 Mon Sep 17 00:00:00 2001 From: Gustavo-S-Nascimento Date: Fri, 17 Nov 2023 18:20:05 -0300 Subject: [PATCH 12/18] voltando counter.css ao original V2.0 --- src/components/counter/counter.css | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/counter/counter.css b/src/components/counter/counter.css index 514fb4d..14c8042 100644 --- a/src/components/counter/counter.css +++ b/src/components/counter/counter.css @@ -1,3 +1,4 @@ + .card button { background-color: red; } \ No newline at end of file From b0027db684261a60841db8e0f0f9a615a23e2f32 Mon Sep 17 00:00:00 2001 From: Gustavo-S-Nascimento Date: Fri, 17 Nov 2023 22:19:31 -0300 Subject: [PATCH 13/18] ideia de card expandido --- src/components/avatar/avatar.css | 1 + src/components/avatar/avatar.stories.ts | 4 +- src/components/cards/card.css | 53 ++++++++++++++++++++++++- src/components/cards/card.stories.ts | 9 +++-- 4 files changed, 60 insertions(+), 7 deletions(-) diff --git a/src/components/avatar/avatar.css b/src/components/avatar/avatar.css index 9f675c9..25a0c4d 100644 --- a/src/components/avatar/avatar.css +++ b/src/components/avatar/avatar.css @@ -17,4 +17,5 @@ width: 120px; height: 120px; border: solid 3px #fff; + object-fit: cover; } \ No newline at end of file diff --git a/src/components/avatar/avatar.stories.ts b/src/components/avatar/avatar.stories.ts index 7c32c78..0ad56ef 100644 --- a/src/components/avatar/avatar.stories.ts +++ b/src/components/avatar/avatar.stories.ts @@ -9,9 +9,9 @@ const meta = { return avatar(args); }, argTypes: { - imgSrc: {description: 'endereço para a imgaem do logo'}, + imgSrc: {description: 'URL da imagem do avatar'}, descricao: {description: 'descrição da imagem do logo'}, - square: {description: 'quadrado ou não?'} + square: {description: 'Define as bordas como quadradas', defaultValue: {summary: "False"}} } } satisfies Meta; diff --git a/src/components/cards/card.css b/src/components/cards/card.css index 1938a27..fb2eda8 100644 --- a/src/components/cards/card.css +++ b/src/components/cards/card.css @@ -1,3 +1,5 @@ +@import url(https://fonts.google.com/specimen/Poppins); + * { margin: 0; padding: 0; @@ -20,7 +22,6 @@ .card { width: 16.375rem; height: 16.8329rem; - border-radius: 1.25rem; border-radius: .625rem; background: #fff; /* Drop Cards */ @@ -72,3 +73,53 @@ /* Expanded Card */ +.expanded { + background: #fff; + width: 90%; + height: 12rem; + border-radius: 10px; + box-shadow: .3125rem .3125rem .9375rem 0rem rgba(0, 0, 0, 0.08); + font-family: Poppins, Arial, Helvetica, sans-serif; +} + +.container-expanded { + height: 100%; + width: 100%; + display: inline-flex; + align-items: center; +} + +.header-expanded { + background-color: #82CFFA; + display: flex; + align-items: center; + padding: 15px; + border-radius: 5px 0 0 5px; + height: 100%; +} + +.header-expanded img { + height: 9rem; +} + +.expanded-body { + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + padding: 15px; +} + +.nome-expanded { + height: 30%; + font-weight: 700; + color: #6278F7; + font-size: 2em; + border-bottom: 1px solid #212121; +} + +.cargo-expanded { + height: 100%; + font-size: 1.3em; +} + diff --git a/src/components/cards/card.stories.ts b/src/components/cards/card.stories.ts index 925dd6c..cb2644d 100644 --- a/src/components/cards/card.stories.ts +++ b/src/components/cards/card.stories.ts @@ -9,11 +9,11 @@ const meta = { return card(args); }, argTypes: { - nome: {description: 'nome do profile', defaultValue: {summary: "Profile Name"}, }, - cargo: {description: 'cargo do profile', defaultValue: {summary: "Profile Role"}}, - img: {description: 'URL da imagem do profile', defaultValue: {summary: "Profile image"}}, + nome: {description: 'Nome que ira aparecer no card', defaultValue: {summary: "Profile Name"}, }, + cargo: {description: 'Cargo que ira aparecer no card', defaultValue: {summary: "Profile Role"}}, + img: {description: 'URL da imagem do avatar', defaultValue: {summary: "Profile image"}}, expanded: {description: 'Card em modo expandido', defaultValue: {summary: "False"}} , - SquareC: {description: 'Imagem quadrada', defaultValue: {summary: "False"}} + SquareC: {description: 'Avatar com as bordas quadradas', defaultValue: {summary: "False"}} } } satisfies Meta; @@ -37,5 +37,6 @@ export const Secondary: Story = { cargo: 'The King of TypeScript', img: 'https://avatars.githubusercontent.com/u/608731?v=4', expanded: true, + SquareC: true, } }; \ No newline at end of file From dafef9bcde6d739f4a684324bacc2cd784d51762 Mon Sep 17 00:00:00 2001 From: Gustavo-S-Nascimento Date: Wed, 22 Nov 2023 16:29:57 -0300 Subject: [PATCH 14/18] add lights modes --- src/components/cards/card.css | 93 +++++++++++++++++++++++++--- src/components/cards/card.stories.ts | 43 ++++++++++--- src/components/cards/index.js | 10 ++- 3 files changed, 122 insertions(+), 24 deletions(-) diff --git a/src/components/cards/card.css b/src/components/cards/card.css index fb2eda8..4c65e6f 100644 --- a/src/components/cards/card.css +++ b/src/components/cards/card.css @@ -16,19 +16,17 @@ justify-content: center; align-items: center; border-radius: .625rem .625rem 0rem 0rem; - background: #82CFFA; } .card { width: 16.375rem; height: 16.8329rem; border-radius: .625rem; - background: #fff; /* Drop Cards */ box-shadow: .3125rem .3125rem .9375rem 0rem rgba(0, 0, 0, 0.08); - } + .body { width: 100%; height: 100%; @@ -56,7 +54,6 @@ flex-direction: column; justify-content: center; flex-shrink: 0; - color: #6278F7; text-align: center; font-family: Montserrat; font-size: 1.125rem; @@ -74,7 +71,6 @@ /* Expanded Card */ .expanded { - background: #fff; width: 90%; height: 12rem; border-radius: 10px; @@ -90,7 +86,6 @@ } .header-expanded { - background-color: #82CFFA; display: flex; align-items: center; padding: 15px; @@ -113,9 +108,7 @@ .nome-expanded { height: 30%; font-weight: 700; - color: #6278F7; font-size: 2em; - border-bottom: 1px solid #212121; } .cargo-expanded { @@ -123,3 +116,87 @@ font-size: 1.3em; } +/* Modes */ + +/* NormalCard */ + +.light { + background: #fff; +} + +.light .card-container { + background-color: #82CFFA; +} + +.light .nome { + color: #6278F7; +} + +.light .cargo { + color: #212121; +} + +.dark { + background: #242424; +} + +.dark .card-container { + background-color: #FE810B; +} + +.dark .nome { + color: #FFA200; +} + +.dark .cargo { + color: #FFFFFF; +} + +.dark .header .avatar { + border: 3px solid #242424; +} + +/* ExpandedCard */ + + +.light { + background: #fff; +} + +.light .header-expanded { + background-color: #82CFFA; +} + +.light .nome-expanded { + color: #6278F7; + border-bottom: 1px solid #212121; +} + +.light .cargo-expanded { + color: #212121; +} + + +.dark { + background: #242424; +} + +.dark .header-expanded { + background-color: #FE810B; +} + +.dark .nome-expanded { + color: #FFA200; + border-bottom: 1px solid #FFFFFF; +} + +.dark .cargo-expanded { + color: #FFFFFF; +} + +.dark .avatar-square, .dark .avatar { + border: 3px solid #242424; +} + + + diff --git a/src/components/cards/card.stories.ts b/src/components/cards/card.stories.ts index cb2644d..4757c99 100644 --- a/src/components/cards/card.stories.ts +++ b/src/components/cards/card.stories.ts @@ -9,11 +9,32 @@ const meta = { return card(args); }, argTypes: { - nome: {description: 'Nome que ira aparecer no card', defaultValue: {summary: "Profile Name"}, }, - cargo: {description: 'Cargo que ira aparecer no card', defaultValue: {summary: "Profile Role"}}, - img: {description: 'URL da imagem do avatar', defaultValue: {summary: "Profile image"}}, - expanded: {description: 'Card em modo expandido', defaultValue: {summary: "False"}} , - SquareC: {description: 'Avatar com as bordas quadradas', defaultValue: {summary: "False"}} + nome: { + description: 'Nome que ira aparecer no card', + defaultValue: { summary: "Profile Name" }, + }, + cargo: { + description: 'Cargo que ira aparecer no card', + defaultValue: { summary: "Profile Role" } + }, + img: { + description: 'URL da imagem do avatar', + defaultValue: { summary: "Profile image" } + }, + expanded: { + description: 'Card em modo expandido', + defaultValue: { summary: "False" } + }, + SquareC: { + description: 'Avatar com as bordas quadradas', + defaultValue: { summary: "False" } + }, + Mode: { + description: "Modo de cores do card", + control: { type: 'radio' }, + options: ['light', 'dark'], + defaultValue: { summary: "Light" } + } } } satisfies Meta; @@ -22,21 +43,23 @@ type Story = StoryObj; // More on writing stories with args: https://storybook.js.org/docs/html/writing-stories/args export const Primary: Story = { - args: { + args: { nome: ' Mr. Abraão Alves', cargo: 'The King of TypeScript', - img: 'https://avatars.githubusercontent.com/u/608731?v=4', + img: 'https://avatars.githubusercontent.com/u/608731?v=4', expanded: false, - SquareC: false + SquareC: false, + Mode: 'light' } }; export const Secondary: Story = { - args: { + args: { nome: ' Mr. Abraão Alves', cargo: 'The King of TypeScript', - img: 'https://avatars.githubusercontent.com/u/608731?v=4', + img: 'https://avatars.githubusercontent.com/u/608731?v=4', expanded: true, SquareC: true, + Mode: 'light' } }; \ No newline at end of file diff --git a/src/components/cards/index.js b/src/components/cards/index.js index 58be8c7..1d30cc2 100644 --- a/src/components/cards/index.js +++ b/src/components/cards/index.js @@ -5,15 +5,16 @@ import "./card.css" * @property { string } CardProps.nome * @property { string } CardProps.cargo * @property { string } CardProps.img + * @property { string } CardProps.Mode * @property { boolean } CardProps.expanded * @property { boolean } CardProps.SquareC * @param { CardProps } props */ -export function card({ nome, cargo, img, expanded, SquareC }) { +export function card({ nome, cargo, img, expanded, SquareC, Mode }) { if (expanded == true) { return ` -
+
${avatar({ imgSrc: img, descricao: "Image of" + nome, square: SquareC })} @@ -30,7 +31,7 @@ export function card({ nome, cargo, img, expanded, SquareC }) { } else { return ` -
+
${avatar({ imgSrc: img, descricao: "Image of" + nome, square: SquareC })} @@ -44,8 +45,5 @@ export function card({ nome, cargo, img, expanded, SquareC }) {
`; - } - - } \ No newline at end of file From 764439b1830f9267a24a95e1f7d9df435246fd0a Mon Sep 17 00:00:00 2001 From: Gustavo-S-Nascimento Date: Thu, 23 Nov 2023 15:38:24 -0300 Subject: [PATCH 15/18] working on mobile --- src/components/cards/card.css | 38 +++++++++++++++++++++++++++++++++++ 1 file changed, 38 insertions(+) diff --git a/src/components/cards/card.css b/src/components/cards/card.css index 4c65e6f..5fa4679 100644 --- a/src/components/cards/card.css +++ b/src/components/cards/card.css @@ -199,4 +199,42 @@ } +@media (max-width:690px) { + .expanded { + height: 30rem; + } + + .container-expanded { + display: flex; + flex-direction: column; + } + + .header-expanded { + width: 100%; + display: flex; + justify-content: center; + } + + .header-expanded img { + width: 12rem; + height: 12rem; + } + + .expanded-body { + text-align: center; + } +} + +@media (max-width:405px) { + .nome-expanded { + font-size: 1.2em; + } + + .cargo-expanded { + padding-top: 10px; + font-size: 1.1em; + } +} + + From d0dc6dd924e6751d7d0cb164fe61c11ea450ffdf Mon Sep 17 00:00:00 2001 From: Gustavo-S-Nascimento Date: Thu, 23 Nov 2023 23:23:36 -0300 Subject: [PATCH 16/18] ideia de card do linked --- src/components/avatar/avatar.css | 4 +- src/components/cards/card.css | 158 +++++---------------------- src/components/cards/card.stories.ts | 19 ++-- src/components/cards/index.js | 16 ++- 4 files changed, 48 insertions(+), 149 deletions(-) diff --git a/src/components/avatar/avatar.css b/src/components/avatar/avatar.css index 25a0c4d..cfd3e0f 100644 --- a/src/components/avatar/avatar.css +++ b/src/components/avatar/avatar.css @@ -2,7 +2,7 @@ width: 120px; height: 120px; border-radius: 50%; - border: solid 3px #fff; + box-shadow: .3125rem .3125rem .9375rem 0rem rgba(0, 0, 0, 0.08); object-fit: cover; } @@ -16,6 +16,6 @@ border-radius: 5px; width: 120px; height: 120px; - border: solid 3px #fff; object-fit: cover; + box-shadow: .3125rem .3125rem .9375rem 0rem rgba(0, 0, 0, 0.08); } \ No newline at end of file diff --git a/src/components/cards/card.css b/src/components/cards/card.css index 5fa4679..819a3fe 100644 --- a/src/components/cards/card.css +++ b/src/components/cards/card.css @@ -16,6 +16,7 @@ justify-content: center; align-items: center; border-radius: .625rem .625rem 0rem 0rem; + background-color: #82CFFA; } .card { @@ -60,6 +61,7 @@ font-style: normal; font-weight: 600; line-height: normal; + color: #6278F7; } .cargo { @@ -72,29 +74,32 @@ .expanded { width: 90%; - height: 12rem; - border-radius: 10px; + height: 20rem; + border-radius: 15px; box-shadow: .3125rem .3125rem .9375rem 0rem rgba(0, 0, 0, 0.08); font-family: Poppins, Arial, Helvetica, sans-serif; + border: 1px solid #cacaca; } .container-expanded { - height: 100%; + height: 50%; width: 100%; - display: inline-flex; - align-items: center; + display: flex; + flex-direction: column; } .header-expanded { display: flex; align-items: center; padding: 15px; - border-radius: 5px 0 0 5px; + border-radius: 15px 15px 0 0; height: 100%; } .header-expanded img { - height: 9rem; + height: 8rem; + position: relative; + top: 60px; } .expanded-body { @@ -103,138 +108,25 @@ display: flex; flex-direction: column; padding: 15px; + justify-content: center; + position: relative; + top: 30px; + gap: 8px; +} + +.infos-expanded { + display: flex; + flex-direction: column; + color: #666666; } .nome-expanded { height: 30%; font-weight: 700; - font-size: 2em; + font-size: 1.5em; } .cargo-expanded { height: 100%; - font-size: 1.3em; -} - -/* Modes */ - -/* NormalCard */ - -.light { - background: #fff; -} - -.light .card-container { - background-color: #82CFFA; -} - -.light .nome { - color: #6278F7; -} - -.light .cargo { - color: #212121; -} - -.dark { - background: #242424; -} - -.dark .card-container { - background-color: #FE810B; -} - -.dark .nome { - color: #FFA200; -} - -.dark .cargo { - color: #FFFFFF; -} - -.dark .header .avatar { - border: 3px solid #242424; -} - -/* ExpandedCard */ - - -.light { - background: #fff; -} - -.light .header-expanded { - background-color: #82CFFA; -} - -.light .nome-expanded { - color: #6278F7; - border-bottom: 1px solid #212121; -} - -.light .cargo-expanded { - color: #212121; -} - - -.dark { - background: #242424; -} - -.dark .header-expanded { - background-color: #FE810B; -} - -.dark .nome-expanded { - color: #FFA200; - border-bottom: 1px solid #FFFFFF; -} - -.dark .cargo-expanded { - color: #FFFFFF; -} - -.dark .avatar-square, .dark .avatar { - border: 3px solid #242424; -} - - -@media (max-width:690px) { - .expanded { - height: 30rem; - } - - .container-expanded { - display: flex; - flex-direction: column; - } - - .header-expanded { - width: 100%; - display: flex; - justify-content: center; - } - - .header-expanded img { - width: 12rem; - height: 12rem; - } - - .expanded-body { - text-align: center; - } -} - -@media (max-width:405px) { - .nome-expanded { - font-size: 1.2em; - } - - .cargo-expanded { - padding-top: 10px; - font-size: 1.1em; - } -} - - - + font-size: 1.2em; +} \ No newline at end of file diff --git a/src/components/cards/card.stories.ts b/src/components/cards/card.stories.ts index 4757c99..5693446 100644 --- a/src/components/cards/card.stories.ts +++ b/src/components/cards/card.stories.ts @@ -29,11 +29,13 @@ const meta = { description: 'Avatar com as bordas quadradas', defaultValue: { summary: "False" } }, - Mode: { - description: "Modo de cores do card", - control: { type: 'radio' }, - options: ['light', 'dark'], - defaultValue: { summary: "Light" } + tec: { + description: 'Tecnologias mais usadas pela pessoa', + defaultValue: { summary: "TypeScript"} + }, + banner: { + description: "Banner de fundo do card", + defaultValue: { summary: "URL do banner"} } } } satisfies Meta; @@ -49,7 +51,8 @@ export const Primary: Story = { img: 'https://avatars.githubusercontent.com/u/608731?v=4', expanded: false, SquareC: false, - Mode: 'light' + tec: "TypeScript", + banner: "https://media.licdn.com/dms/image/C4D16AQHLnpXmkyphCw/profile-displaybackgroundimage-shrink_350_1400/0/1598925512221?e=1706140800&v=beta&t=5NzE-lUfNWTAFmxBSwpEFL1_xYLc0-hiYj2ygDh1dd4" } }; @@ -59,7 +62,7 @@ export const Secondary: Story = { cargo: 'The King of TypeScript', img: 'https://avatars.githubusercontent.com/u/608731?v=4', expanded: true, - SquareC: true, - Mode: 'light' + SquareC: false, + tec: "TypeScript" } }; \ No newline at end of file diff --git a/src/components/cards/index.js b/src/components/cards/index.js index 1d30cc2..92aa23b 100644 --- a/src/components/cards/index.js +++ b/src/components/cards/index.js @@ -5,24 +5,28 @@ import "./card.css" * @property { string } CardProps.nome * @property { string } CardProps.cargo * @property { string } CardProps.img - * @property { string } CardProps.Mode + * @property { string } CardProps.tec + * @property { string } CardProps.banner * @property { boolean } CardProps.expanded * @property { boolean } CardProps.SquareC * @param { CardProps } props */ -export function card({ nome, cargo, img, expanded, SquareC, Mode }) { +export function card({ nome, cargo, img, expanded, SquareC, tec, banner }) { if (expanded == true) { return ` -
+
-
+
${avatar({ imgSrc: img, descricao: "Image of" + nome, square: SquareC })}

${nome}

-

${cargo}

+
+

${cargo}

+

Publica sobre #${tec}, #${tec} e #${tec}

+
@@ -31,7 +35,7 @@ export function card({ nome, cargo, img, expanded, SquareC, Mode }) { } else { return ` -
+
${avatar({ imgSrc: img, descricao: "Image of" + nome, square: SquareC })} From 9c9c334d3224f2a4e2f177c0aac7a5cf4e3f4877 Mon Sep 17 00:00:00 2001 From: Gustavo-S-Nascimento Date: Thu, 23 Nov 2023 23:40:05 -0300 Subject: [PATCH 17/18] mobile fix --- src/components/cards/card.css | 48 +++++++++++++++++++++++++++- src/components/cards/card.stories.ts | 3 +- 2 files changed, 49 insertions(+), 2 deletions(-) diff --git a/src/components/cards/card.css b/src/components/cards/card.css index 819a3fe..eac6821 100644 --- a/src/components/cards/card.css +++ b/src/components/cards/card.css @@ -129,4 +129,50 @@ .cargo-expanded { height: 100%; font-size: 1.2em; -} \ No newline at end of file +} + +/* Breakpoint */ + +@media (max-width:690px) { + + .expanded { + height: 22rem; + } + + .header-expanded { + justify-content: center; + } + + .expanded-body { + align-items: center; + } + + .infos-expanded { + align-items: center; + text-align: center; + } +} + +@media (max-width:405px) { + + .nome-expanded { + font-size: 1.1em; + } + + .cargo-expanded { + font-size: .9em; + } + + .expanded { + height: 26rem; + } + + .expanded-body { + top: 40px; + } + + .infos-expanded { + gap: 10px; + } +} + diff --git a/src/components/cards/card.stories.ts b/src/components/cards/card.stories.ts index 5693446..369d714 100644 --- a/src/components/cards/card.stories.ts +++ b/src/components/cards/card.stories.ts @@ -63,6 +63,7 @@ export const Secondary: Story = { img: 'https://avatars.githubusercontent.com/u/608731?v=4', expanded: true, SquareC: false, - tec: "TypeScript" + tec: "TypeScript", + banner: "https://media.licdn.com/dms/image/C4D16AQHLnpXmkyphCw/profile-displaybackgroundimage-shrink_350_1400/0/1598925512221?e=1706140800&v=beta&t=5NzE-lUfNWTAFmxBSwpEFL1_xYLc0-hiYj2ygDh1dd4" } }; \ No newline at end of file From d331e07ac50f243ae96c903f74542244017bce59 Mon Sep 17 00:00:00 2001 From: AbraaoAlves Date: Fri, 17 Nov 2023 11:22:48 -0300 Subject: [PATCH 18/18] fix: undo unnecessary changes --- src/components/counter/counter.css | 72 +----------------------------- src/counter.js | 2 - 2 files changed, 2 insertions(+), 72 deletions(-) diff --git a/src/components/counter/counter.css b/src/components/counter/counter.css index b06879e..14c8042 100644 --- a/src/components/counter/counter.css +++ b/src/components/counter/counter.css @@ -1,72 +1,4 @@ -html, -body { - margin: 0; - padding: 0; - width: 100%; - height: 100vh; - display: flex; - flex-direction: row; - justify-content: center; - align-items: center; - background: #000; -} -.glow-on-hover { - width: 220px; - height: 50px; - border: none; - outline: none; - color: #fff; - background: #111; - cursor: pointer; - position: relative; - z-index: 0; - border-radius: 10px; -} - -.glow-on-hover:before { - content: ''; - background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000); - position: absolute; - top: -2px; - left:-2px; - background-size: 400%; - z-index: -1; - filter: blur(5px); - width: calc(100% + 4px); - height: calc(100% + 4px); - animation: glowing 20s linear infinite; - opacity: 0; - transition: opacity .3s ease-in-out; - border-radius: 10px; -} - -.glow-on-hover:active { - color: #000 -} - -.glow-on-hover:active:after { - background: transparent; -} - -.glow-on-hover:hover:before { - opacity: 1; -} - -.glow-on-hover:after { - z-index: -1; - content: ''; - position: absolute; - width: 100%; - height: 100%; - background: #111; - left: 0; - top: 0; - border-radius: 10px; -} - -@keyframes glowing { - 0% { background-position: 0 0; } - 50% { background-position: 400% 0; } - 100% { background-position: 0 0; } +.card button { + background-color: red; } \ No newline at end of file diff --git a/src/counter.js b/src/counter.js index 45bab2a..63bd9b8 100644 --- a/src/counter.js +++ b/src/counter.js @@ -15,5 +15,3 @@ export function setupCounter(element) { element.addEventListener("click", () => setCounter(counter + 1)); setCounter(0); } - -