diff --git a/src/components/avatar/avatar.css b/src/components/avatar/avatar.css index bebbe15..f20f78a 100644 --- a/src/components/avatar/avatar.css +++ b/src/components/avatar/avatar.css @@ -1,15 +1,20 @@ -img{ +.avatar { width: 120px; height: 120px; - border-radius: 50%; - border: solid 3px white; - object-fit: cover; - + border-radius: 50%; + box-shadow: .3125rem .3125rem .9375rem 0rem rgba(0, 0, 0, 0.08); + object-fit: cover; } -.container{ - +.container { display: flex; justify-content: center; - align-items: center; -} \ No newline at end of file + align-content: center; +} + +.avatar-square { + border-radius: 5px; + width: 120px; + height: 120px; + object-fit: cover; + box-shadow: .3125rem .3125rem .9375rem 0rem rgba(0, 0, 0, 0.08); diff --git a/src/components/avatar/avatar.stories.ts b/src/components/avatar/avatar.stories.ts index 64e1d2b..fd8a69c 100644 --- a/src/components/avatar/avatar.stories.ts +++ b/src/components/avatar/avatar.stories.ts @@ -3,14 +3,17 @@ 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); }, argTypes: { - imgSrc: {description: 'endereço para a imgaem do logo'}, - descricao: {description: 'descrição da imagem do logo'} + + imgSrc: {description: 'URL da imagem do avatar'}, + descricao: {description: 'descrição da imagem do logo'}, + square: {description: 'Define as bordas como quadradas', defaultValue: {summary: "False"}} } } satisfies Meta; @@ -21,7 +24,16 @@ type Story = StoryObj; 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 ' + descricao: 'Octocat from Github ', + square: false, + } +}; + +export const Secondary: 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 ', + square: true, } }; diff --git a/src/components/avatar/index.js b/src/components/avatar/index.js index b702dcb..77079b5 100644 --- a/src/components/avatar/index.js +++ b/src/components/avatar/index.js @@ -4,12 +4,24 @@ import "./avatar.css"; * @typedef {Object} AvatarProps * @property {string} AvatarProps.imgSrc - some description here * @property {string} AvatarProps.descricao - some description here + + * @property {boolean} AvatarProps.square * @param {AvatarProps} props */ -export function avatar({ imgSrc, descricao }) { - return ` +export function avatar({ imgSrc, descricao, square }) { + if (square == true) { + return ` +
+ ${descricao} +
+ `; + } + else { + return `
${descricao}
`; -} \ No newline at end of file + } +} + diff --git a/src/components/cards/card.css b/src/components/cards/card.css index 9df3bdc..6b43573 100644 --- a/src/components/cards/card.css +++ b/src/components/cards/card.css @@ -1,72 +1,176 @@ +@import url(https://fonts.google.com/specimen/Poppins); + * { 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; - background: #82CFFA; + justify-content: center; + align-items: center; + border-radius: .625rem .625rem 0rem 0rem; + background-color: #82CFFA; } .card { - width: 262px; - height: 269.327px; - border-radius: 20px; - border-radius: 10px; - background: #ffffff; + width: 16.375rem; + height: 16.8329rem; + border-radius: .625rem; /* 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; + color: #6278F7; } .cargo { display: flex; justify-content: center; color: #212121; +} + +/* Expanded Card */ + +.expanded { + width: 90%; + 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: 50%; + width: 100%; + display: flex; + flex-direction: column; +} + +.header-expanded { + display: flex; + align-items: center; + padding: 15px; + border-radius: 15px 15px 0 0; + height: 100%; +} + +.header-expanded img { + height: 8rem; + position: relative; + top: 60px; +} + +.expanded-body { + width: 100%; + height: 100%; + 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: 1.5em; +} + +.cargo-expanded { + height: 100%; + font-size: 1.2em; +} + +/* 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; + } } \ No newline at end of file diff --git a/src/components/cards/card.stories.ts b/src/components/cards/card.stories.ts index bdb4032..227995a 100644 --- a/src/components/cards/card.stories.ts +++ b/src/components/cards/card.stories.ts @@ -3,14 +3,41 @@ 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', + + 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 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" } + }, + tec: { + description: 'Tecnologias mais usadas pela pessoa', + defaultValue: { summary: "TypeScript"} + }, + banner: { + description: "Banner de fundo do card", + defaultValue: { summary: "URL do banner"} + } } } satisfies Meta; @@ -19,13 +46,25 @@ 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, + 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" } }; - - +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, + SquareC: false, + 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" + } +}; diff --git a/src/components/cards/index.js b/src/components/cards/index.js index 68c2516..92aa23b 100644 --- a/src/components/cards/index.js +++ b/src/components/cards/index.js @@ -4,24 +4,50 @@ import "./card.css" * @typedef { Object } CardProps * @property { string } CardProps.nome * @property { string } CardProps.cargo - * @property { string } CardProps.img + * @property { string } CardProps.img + * @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 }) { - return ` -
-
-
- ${avatar({ imgSrc: img, descricao: "" })} +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}

+

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

+
+
+
- -
-

${nome}

-

${cargo}

- -
-
- `; + `; + } + else { + return ` +
+
+
+ ${avatar({ imgSrc: img, descricao: "Image of" + nome, square: SquareC })} +
+ +
+

${nome}

+

${cargo}

+
+ +
+
+ `; + } } \ No newline at end of file