Expansed/roro

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;
-}
+    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);

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<AvatarProps>;
 
@@ -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,
   }
 };
 

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 `
+  <div class="container">
+      <img src="${imgSrc}" class="avatar-square" alt="${descricao}" />
+      </div>
+  `;
+  }
+  else {
+    return `
   <div class="container">
       <img src="${imgSrc}" class="avatar" alt="${descricao}" />
       </div>
   `;
-}
+  }
+}
+

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;
+    }
 }

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<CardProps>;
 
@@ -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"
+  }
+};