Paiva/card

package.json

@@ -11,17 +11,17 @@
     "build-storybook": "storybook build"
   },
   "devDependencies": {
-    "@storybook/addon-essentials": "^7.5.1",
-    "@storybook/addon-interactions": "^7.5.1",
-    "@storybook/addon-links": "^7.5.1",
-    "@storybook/blocks": "^7.5.1",
-    "@storybook/html": "^7.5.1",
-    "@storybook/html-vite": "^7.5.1",
+    "@storybook/addon-essentials": "^7.5.3",
+    "@storybook/addon-interactions": "^7.5.3",
+    "@storybook/addon-links": "^7.5.3",
+    "@storybook/blocks": "^7.5.3",
+    "@storybook/html": "^7.5.3",
+    "@storybook/html-vite": "^7.5.3",
     "@storybook/testing-library": "^0.2.2",
     "chromatic": "^9.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "storybook": "^7.5.1",
+    "storybook": "^7.5.3",
     "typescript": "^5.0.2",
     "vite": "^4.4.5"
   }

src/components/avatar/avatar.css

@@ -1,15 +1,5 @@
-img{
-    width: 120px;
-    height: 120px;
-        border-radius: 50%;
-       border: solid 3px white;
-        object-fit: cover;
-
-}
 
-.container{
-
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
+   img.avatar {
+    border-radius: 50px;
+    width: 50px;
+  }

src/components/avatar/avatar.stories.ts

@@ -1,9 +1,11 @@
 import type { StoryObj, Meta } from '@storybook/html';
-import { AvatarProps, avatar } from './index';
+
+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',
+  title: 'App/Avatar',
   tags: ['autodocs'],
   render: (args) => {
     return avatar(args);
@@ -18,12 +20,10 @@ 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 '
+export const meuperfil: Story = {
+  args: {
+    imgSrc: 'https://avatars.githubusercontent.com/u/133207241?v=4', 
+    descricao: 'Picture Profile '
   }
 };
 
-
-

src/components/avatar/index.js

@@ -1,15 +1,15 @@
-import "./avatar.css";
+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 }) {
+export function avatar({imgSrc, descricao}) {
   return `
-  <div class="container">
       <img src="${imgSrc}" class="avatar" alt="${descricao}" />
-      </div>
-  `;
-}
+  `
+}
+

src/components/card/card.css

@@ -0,0 +1,11 @@
+.card {
+
+}
+
+.card img {
+
+}
+
+.card body {
+
+}

src/components/card/card.stories.ts

@@ -0,0 +1,31 @@
+import type { StoryObj, Meta } from '@storybook/html';
+
+import { card } from './index';
+import type {CardProps} 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: {desciption: 'nome do profile'},
+    cargo: {desciption: 'cargo do profile'},
+    img: {desciption: 'endereço para a imagem do logo'}
+  }
+} satisfies Meta<CardProps>;
+
+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: 'Mansueto',
+    cargo: 'Back-end',
+    img: 'https://avatars.githubusercontent.com/u/133207241?v=4'
+  }
+};
+

src/components/card/index.js

@@ -0,0 +1,33 @@
+import { avatar } from '../avatar';
+import './card.css'
+
+
+/**
+ * @typedef {Object} CardProps
+ * @property {string} CardProps.nome - some description here
+ * @property {string} CardProps.cargo - some description here
+ * @property {string} CardProps.img - some description here
+ * 
+ * @param {CardProps} props
+ */
+
+/**
+ * 
+ * @param {*} param0 
+ * @returns 
+ */
+export function card({nome, cargo, img}) {
+    return `
+        <div class="card">
+            <div class="header">
+               ${avatar({imgSrc: img, descricao: 'profile picture from' + nome})}
+
+            </div>
+           <div class="body">
+              <p>Nome: ${nome}</p>
+              <p>Cargo: ${cargo}</p>
+            </div>
+
+        </div> `;
+  }
+

src/components/logo/logo.css

@@ -1,4 +1,4 @@
 
 a.logo > img {
   width: 50px;
-}
+}