Typescript Story: Avatar (#742)

* 🚚 Renamed to tsx

* ✨ Declared image type

Needed for catImg in Avatar story

* 🚚 Renamed Props to AvatarProps

..

* 📝 Added AvatarProps to story

* 🚚 Had to move image declarations inside a custom_typings folder

Was not picked up by TS before

* ♻️ Arrow function to named function

* 🎨 Arrow to named

* 🎨 JPG as type string

* 🔥 Removed knobs

Not needed when we have controlled props

* 🎨 Self closing tags

* 🚚 Moved custom_typings folder (for jpg module) into stories folder

Needed for the module to be used in Avatar.stories

* 🚚 custom_typings moved to core-react/src because of jsconfig is there

* 🚧 Still working on image module

* 🚧 Still not able to export the jpg module

TS reaches module only if custom.d.ts is opened

* 🎨 Removed useless img module and replaced local src with url

Quick fix instead of img module to fix ts error on img import

apps/storybook-react/stories/Avatar.stories.tsx

@@ -0,0 +1,41 @@
+import React from 'react'
+import styled from 'styled-components'
+import { Story, Meta } from '@storybook/react'
+import { Avatar, AvatarProps, Typography } from '@equinor/eds-core-react'
+
+const Container = styled.div`
+  margin: 32px;
+  display: grid;
+  grid-gap: 16px;
+`
+const Wrapper = styled.div`
+  display: grid;
+  grid-gap: 32px;
+  grid-template-columns: repeat(5, fit-content(100%));
+`
+
+export default {
+  title: 'Components/Avatar',
+  component: Avatar,
+} as Meta
+
+export const Default: Story<AvatarProps> = (args) => (
+  <Avatar src={'https://i.imgur.com/UM3mrju.jpg'} {...args} />
+)
+
+export const Examples: Story<AvatarProps> = () => (
+  <Container>
+    <Typography variant="h2">Sizes</Typography>
+    <Wrapper>
+      <Avatar src={'https://i.imgur.com/UM3mrju.jpg'} size={16} alt="avatar" />
+      <Avatar src={'https://i.imgur.com/UM3mrju.jpg'} size={24} alt="avatar" />
+      <Avatar src={'https://i.imgur.com/UM3mrju.jpg'} size={32} alt="avatar" />
+      <Avatar src={'https://i.imgur.com/UM3mrju.jpg'} size={40} alt="avatar" />
+      <Avatar src={'https://i.imgur.com/UM3mrju.jpg'} size={48} alt="avatar" />
+    </Wrapper>
+    <Typography variant="h2">Disabled</Typography>
+    <Wrapper>
+      <Avatar src={'https://i.imgur.com/UM3mrju.jpg'} disabled alt="avatar" />
+    </Wrapper>
+  </Container>
+)

libraries/core-react/src/Avatar/Avatar.tsx

@@ -45,7 +45,7 @@ const StyledImage = styled.img<StyledImageProps>`
     `};
 `
 
-type Props = {
+export type AvatarProps = {
   alt: string
   /** Image source
    @default null */
@@ -57,9 +57,10 @@ type Props = {
   disabled?: boolean
 }
 
-export const Avatar = forwardRef<HTMLHRElement, Props>((props, ref) => {
-  const { src = null, alt, size = 24, disabled = false, ...rest } = props
-
+export const Avatar = forwardRef<HTMLHRElement, AvatarProps>(function Avatar(
+  { src = null, alt, size = 24, disabled = false, ...rest },
+  ref,
+) {
   return (
     <StyledAvatar size={size} disabled={disabled} ref={ref} {...rest}>
       <StyledImage src={src} alt={alt} disabled={disabled} />

libraries/core-react/src/Avatar/index.ts

@@ -1 +1 @@
-export { Avatar } from './Avatar'
+export * from './Avatar'

libraries/core-react/src/index.ts

@@ -15,7 +15,7 @@ export { Scrim } from './Scrim'
 export { TableOfContents } from './TableOfContents'
 export { SideSheet } from './SideSheet'
 export { Chip } from './Chip'
-export { Avatar } from './Avatar'
+export * from './Avatar'
 export { Search } from './Search'
 export { Slider } from './Slider'
 export { Tooltip } from './Tooltip'