orcs-design-system
Version:
TeamForm's Design System, aka: ORCS
545 lines • 17.3 kB
JavaScript
import React from "react";
import Badge from "../Badge";
import Flex from "../Flex";
import Box from "../Box";
import Spacer from "../Spacer";
import StyledLink from "../StyledLink";
import Header from "../Typography";
import Avatar from ".";
import { action } from "@storybook/addon-actions";
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
export default {
title: "Components/Avatar",
component: Avatar
};
export const defaultAvatar = () => /*#__PURE__*/_jsx(Avatar, {
title: "Ayden Lundgre",
initials: "AL",
subtitle: "Senior Business Analyst",
image: "https://api.dicebear.com/7.x/personas/svg?seed=aydos"
});
defaultAvatar.storyName = "Default";
export const noImage = () => /*#__PURE__*/_jsxs(Spacer, {
my: "r",
children: [/*#__PURE__*/_jsx(Avatar, {
title: "Ayden Lundgre",
subtitle: "Senior Business Analyst",
initials: "AL"
}), /*#__PURE__*/_jsx(Avatar, {
title: "Ayden Lundgre",
subtitle: "Senior Business Analyst",
initials: "AL",
whiteInitials: true
})]
});
noImage.storyName = "No image";
export const imageOnly = () => /*#__PURE__*/_jsx(Spacer, {
my: 4,
children: /*#__PURE__*/_jsx(Avatar, {
image: "https://api.dicebear.com/7.x/personas/svg?seed=aydos"
})
});
imageOnly.storyName = "Image only";
export const iconOnly = () => /*#__PURE__*/_jsx(Spacer, {
my: 4,
children: /*#__PURE__*/_jsx(Avatar, {
title: "Ayden Lundgre",
subtitle: "Senior Business Analyst"
})
});
iconOnly.storyName = "Icon only";
export const nameLink = () => /*#__PURE__*/_jsx(Avatar, {
title: /*#__PURE__*/_jsx(StyledLink, {
href: "#",
children: "Ayden Lundgre"
}),
subtitle: "Senior Business Analyst",
initials: "AL",
image: "https://api.dicebear.com/7.x/personas/svg?seed=aydos",
imageAlt: "Avatar for Ayden Lundgre"
});
nameLink.storyName = "Name as link";
export const small = () => /*#__PURE__*/_jsxs(Spacer, {
my: 4,
children: [/*#__PURE__*/_jsx(Avatar, {
sizing: "small",
title: "Ayden Lundgre",
subtitle: "Senior Business Analyst",
initials: "AL"
}), /*#__PURE__*/_jsx(Avatar, {
sizing: "small",
title: "Ayden Lundgre",
subtitle: "Senior Business Analyst",
initials: "AL",
image: "https://api.dicebear.com/7.x/personas/svg?seed=aydos"
}), /*#__PURE__*/_jsx(Avatar, {
sizing: "small",
title: /*#__PURE__*/_jsx(StyledLink, {
href: "#",
children: "Ayden Lundgre"
}),
subtitle: "Senior Business Analyst",
imageAlt: "Avatar for Ayden Lundgre",
initials: "AL",
image: "https://api.dicebear.com/7.x/personas/svg?seed=aydos"
})]
});
small.storyName = "Small";
export const large = () => /*#__PURE__*/_jsxs(Spacer, {
my: 4,
children: [/*#__PURE__*/_jsx(Avatar, {
sizing: "large",
title: "Ayden Lundgre",
titleLevel: "H1",
subtitle: "Senior Business Analyst",
initials: "AL"
}), /*#__PURE__*/_jsx(Avatar, {
sizing: "large",
title: "Ayden Lundgre",
subtitle: "Senior Business Analyst",
initials: "AL",
image: "https://api.dicebear.com/7.x/personas/svg?seed=aydos"
}), /*#__PURE__*/_jsx(Avatar, {
sizing: "large",
title: /*#__PURE__*/_jsx(StyledLink, {
href: "#",
children: "Ayden Lundgre"
}),
subtitle: "Senior Business Analyst",
imageAlt: "Avatar for Ayden Lundgre",
initials: "AL",
image: "https://api.dicebear.com/7.x/personas/svg?seed=aydos"
})]
});
large.storyName = "Large";
export const customSize = () => /*#__PURE__*/_jsxs(Flex, {
gap: "r",
children: [/*#__PURE__*/_jsx(Avatar, {
image: "https://api.dicebear.com/7.x/personas/svg?seed=aydos",
imageAlt: "Avatar for Ayden Lundgre",
customSize: "28px"
}), /*#__PURE__*/_jsx(Avatar, {
image: "https://images.unsplash.com/photo-1582213782179-e0d53f98f2ca?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2370&q=80",
imageAlt: "Avatar for Innovation Lab",
customSize: "28px",
shape: "square"
}), /*#__PURE__*/_jsx(Avatar, {
image: "https://images.unsplash.com/photo-1582213782179-e0d53f98f2ca?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2370&q=80",
imageAlt: "Avatar for Innovation Lab",
customSize: "28px",
shape: "hexagon"
}), /*#__PURE__*/_jsx(Avatar, {
image: "https://images.unsplash.com/photo-1627398242454-45a1465c2479?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2148&q=80",
imageAlt: "Avatar for Tag",
customSize: "28px",
shape: "tag"
})]
});
large.storyName = "customSize";
export const titleLevel = () => /*#__PURE__*/_jsx(Spacer, {
my: 4,
children: /*#__PURE__*/_jsx(Avatar, {
sizing: "large",
title: "Ayden Lundgre",
titleLevel: "H1",
subtitle: "Senior Business Analyst",
initials: "AL"
})
});
titleLevel.storyName = "Title Level";
export const subtitleContent = () => /*#__PURE__*/_jsxs(Spacer, {
my: 4,
children: [/*#__PURE__*/_jsx(Avatar, {
sizing: "large",
title: /*#__PURE__*/_jsx(StyledLink, {
href: "#",
children: "Ayden Lundgre"
}),
imageAlt: "Avatar for Ayden Lundgre",
initials: "AL",
image: "https://api.dicebear.com/7.x/personas/svg?seed=aydos",
subtitleContent: /*#__PURE__*/_jsx(Badge, {
mt: "xs",
children: "Senior Business Analyst"
})
}), /*#__PURE__*/_jsx(Avatar, {
sizing: "large",
title: /*#__PURE__*/_jsx(StyledLink, {
href: "#",
children: "Ayden Lundgre"
}),
initials: "AL",
image: "https://api.dicebear.com/7.x/personas/svg?seed=aydos",
imageAlt: "Avatar for Ayden Lundgre",
subtitleContent: /*#__PURE__*/_jsx(Flex, {
flexWrap: "wrap",
children: /*#__PURE__*/_jsxs(Spacer, {
mr: "xs",
mt: "xs",
children: [/*#__PURE__*/_jsx(Badge, {
children: "Senior Business Analyst"
}), /*#__PURE__*/_jsx(Badge, {
variant: "warning",
children: "Scrum Master"
})]
})
})
})]
});
subtitleContent.storyName = "Custom subtitle content";
export const localTime = () => /*#__PURE__*/_jsx(Spacer, {
my: 4,
children: /*#__PURE__*/_jsx(Avatar, {
sizing: "large",
title: /*#__PURE__*/_jsx(StyledLink, {
href: "#",
children: "Ayden Lundgre"
}),
initials: "AL",
image: "https://api.dicebear.com/7.x/personas/svg?seed=aydos",
imageAlt: "Avatar for Ayden Lundgre",
subtitleContent: /*#__PURE__*/_jsx(Badge, {
mt: "xs",
children: "Senior Business Analyst"
}),
localTime: "12:03pm local time"
})
});
localTime.storyName = "With local time";
export const inverted = () => /*#__PURE__*/_jsx(Box, {
bg: "greyDarkest",
p: "r",
children: /*#__PURE__*/_jsxs(Spacer, {
my: 4,
children: [/*#__PURE__*/_jsx(Avatar, {
type: "inverted",
title: "Ayden Lundgre",
subtitle: "Senior Business Analyst",
initials: "AL",
image: "https://api.dicebear.com/7.x/personas/svg?seed=aydos"
}), /*#__PURE__*/_jsx(Avatar, {
type: "inverted",
title: /*#__PURE__*/_jsx(StyledLink, {
href: "#",
children: "Ayden Lundgre"
}),
subtitle: "Senior Business Analyst",
initials: "AL",
image: "https://api.dicebear.com/7.x/personas/svg?seed=aydos",
imageAlt: "Avatar for Ayden Lundgre"
}), /*#__PURE__*/_jsx(Avatar, {
type: "inverted",
sizing: "small",
title: "Ayden Lundgre",
subtitle: "Senior Business Analyst",
initials: /*#__PURE__*/_jsx(StyledLink, {
href: "#",
children: "AL"
})
}), /*#__PURE__*/_jsx(Avatar, {
type: "inverted",
sizing: "small",
title: /*#__PURE__*/_jsx(StyledLink, {
href: "#",
children: "Ayden Lundgre"
}),
subtitle: "Senior Business Analyst",
initials: "AL",
image: "https://api.dicebear.com/7.x/personas/svg?seed=aydos",
imageAlt: "Avatar for Ayden Lundgre"
})]
})
});
inverted.storyName = "Inverted";
export const alternateShapes = () => /*#__PURE__*/_jsxs(Spacer, {
my: 4,
children: [/*#__PURE__*/_jsx(Avatar, {
shape: "square",
title: /*#__PURE__*/_jsx(StyledLink, {
href: "#",
children: "Innovation Lab"
}),
subtitle: "15 team members",
image: "https://images.unsplash.com/photo-1582213782179-e0d53f98f2ca?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2370&q=80",
imageAlt: "Avatar for Innovation Lab",
sizing: "large"
}), /*#__PURE__*/_jsx(Avatar, {
shape: "square",
title: /*#__PURE__*/_jsx(StyledLink, {
href: "#",
children: "Innovation Lab"
}),
subtitle: "15 team members",
image: "https://images.unsplash.com/photo-1582213782179-e0d53f98f2ca?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2370&q=80",
imageAlt: "Avatar for Innovation Lab"
}), /*#__PURE__*/_jsx(Avatar, {
shape: "square",
sizing: "small",
title: /*#__PURE__*/_jsx(StyledLink, {
href: "#",
children: "Innovation Lab"
}),
subtitle: "15 team members",
initials: "IL",
imageAlt: "Avatar for Innovation Lab"
}), /*#__PURE__*/_jsx(Avatar, {
shape: "square",
sizing: "small",
title: /*#__PURE__*/_jsx(StyledLink, {
href: "#",
children: "Innovation Lab"
}),
subtitle: "15 team members",
imageAlt: "Avatar for Innovation Lab"
}), /*#__PURE__*/_jsx(Avatar, {
shape: "hexagon",
title: /*#__PURE__*/_jsx(StyledLink, {
href: "#",
children: "Innovation Lab"
}),
subtitle: "15 team members",
image: "https://images.unsplash.com/photo-1582213782179-e0d53f98f2ca?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2370&q=80",
imageAlt: "Avatar for Innovation Lab",
sizing: "large"
}), /*#__PURE__*/_jsx(Avatar, {
shape: "hexagon",
title: /*#__PURE__*/_jsx(StyledLink, {
href: "#",
children: "Innovation Lab"
}),
subtitle: "15 team members",
image: "https://images.unsplash.com/photo-1582213782179-e0d53f98f2ca?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2370&q=80",
imageAlt: "Avatar for Innovation Lab"
}), /*#__PURE__*/_jsx(Avatar, {
shape: "hexagon",
sizing: "small",
title: /*#__PURE__*/_jsx(StyledLink, {
href: "#",
children: "Innovation Lab"
}),
subtitle: "15 team members",
initials: "IL",
imageAlt: "Avatar for Innovation Lab"
}), /*#__PURE__*/_jsx(Avatar, {
shape: "hexagon",
sizing: "small",
title: /*#__PURE__*/_jsx(StyledLink, {
href: "#",
children: "Innovation Lab"
}),
subtitle: "15 team members",
imageAlt: "Avatar for Innovation Lab"
}), /*#__PURE__*/_jsx(Avatar, {
shape: "tag",
title: /*#__PURE__*/_jsx(StyledLink, {
href: "#",
children: "Javascript"
}),
subtitle: "Tagged 123 times",
image: "https://images.unsplash.com/photo-1627398242454-45a1465c2479?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2148&q=80",
imageAlt: "Avatar for Javascript",
sizing: "large"
}), /*#__PURE__*/_jsx(Avatar, {
shape: "tag",
title: /*#__PURE__*/_jsx(StyledLink, {
href: "#",
children: "Javascript"
}),
subtitle: "Tagged 123 times",
image: "https://images.unsplash.com/photo-1627398242454-45a1465c2479?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2148&q=80",
imageAlt: "Avatar for Javascript"
}), /*#__PURE__*/_jsx(Avatar, {
shape: "tag",
sizing: "small",
title: /*#__PURE__*/_jsx(StyledLink, {
href: "#",
children: "Javascript"
}),
subtitle: "Tagged 123 times",
initials: "JS",
imageAlt: "Avatar for Javascript"
}), /*#__PURE__*/_jsx(Avatar, {
shape: "tag",
sizing: "small",
title: /*#__PURE__*/_jsx(StyledLink, {
href: "#",
children: "Javascript"
}),
subtitle: "Tagged 123 times",
imageAlt: "Avatar for Javascript"
})]
});
alternateShapes.storyName = "Alternate Shapes";
export const headerAvatarVariants = () => {
const handleClick = action("Button action triggered");
return /*#__PURE__*/_jsxs(_Fragment, {
children: [/*#__PURE__*/_jsxs(Flex, {
gap: "xxl",
alignItems: "center",
p: "xxl",
bg: "white",
children: [/*#__PURE__*/_jsx(Avatar, {
headerAvatar: true,
sizing: "large",
image: "https://randomuser.me/api/portraits/men/32.jpg",
imageAlt: "Avatar for John Doe",
onClick: handleClick
}), /*#__PURE__*/_jsx(Avatar, {
headerAvatar: true,
sizing: "small",
image: "https://randomuser.me/api/portraits/men/32.jpg",
imageAlt: "Avatar for John Doe",
onClick: handleClick
}), /*#__PURE__*/_jsx(Avatar, {
headerAvatar: true,
sizing: "large",
shape: "square",
image: "https://images.unsplash.com/photo-1464802686167-b939a6910659?q=80&w=3500&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
imageAlt: "Avatar for Nebula UI",
onClick: handleClick
}), /*#__PURE__*/_jsx(Avatar, {
headerAvatar: true,
sizing: "small",
shape: "square",
image: "https://images.unsplash.com/photo-1464802686167-b939a6910659?q=80&w=3500&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
imageAlt: "Avatar for Nebula UI",
onClick: handleClick
})]
}), /*#__PURE__*/_jsxs(Flex, {
gap: "xxl",
alignItems: "center",
p: "xxl",
bg: "white",
children: [/*#__PURE__*/_jsx(Avatar, {
headerAvatar: true,
sizing: "large",
imageAlt: "Avatar for John Doe",
onClick: handleClick
}), /*#__PURE__*/_jsx(Avatar, {
headerAvatar: true,
sizing: "small",
imageAlt: "Avatar for John Doe",
onClick: handleClick
}), /*#__PURE__*/_jsx(Avatar, {
headerAvatar: true,
sizing: "large",
shape: "square",
imageAlt: "Avatar for Nebula UI",
onClick: handleClick
}), /*#__PURE__*/_jsx(Avatar, {
headerAvatar: true,
sizing: "small",
shape: "square",
imageAlt: "Avatar for Nebula UI",
onClick: handleClick
})]
})]
});
};
headerAvatarVariants.storyName = "Header Avatar Variants";
export const withCropData = () => /*#__PURE__*/_jsxs(Flex, {
gap: "xxl",
p: "r",
flexWrap: "wrap",
children: [/*#__PURE__*/_jsxs(Box, {
children: [/*#__PURE__*/_jsx(Header.H4, {
children: "Without Crop Data"
}), /*#__PURE__*/_jsx(Avatar, {
sizing: "large",
shape: "square",
image: "https://images.unsplash.com/photo-1533473359331-0135ef1b58bf?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wxNjAxODB8MHwxfHNlYXJjaHwzfHxjYXJ8ZW58MHwwfHx8MTc2MDMwNzg1MHww&ixlib=rb-4.1.0&q=80&w=1440&h=1440",
imageAlt: "Avatar without crop"
})]
}), /*#__PURE__*/_jsxs(Box, {
children: [/*#__PURE__*/_jsx(Header.H4, {
children: "With Crop Data"
}), /*#__PURE__*/_jsx(Avatar, {
sizing: "large",
shape: "square",
image: "https://images.unsplash.com/photo-1533473359331-0135ef1b58bf?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wxNjAxODB8MHwxfHNlYXJjaHwzfHxjYXJ8ZW58MHwwfHx8MTc2MDMwNzg1MHww&ixlib=rb-4.1.0&q=80&w=1440&h=1440",
imageAlt: "Avatar with crop",
croppedAreaPercent: {
x: 49,
y: 39,
width: 33,
height: 50
}
})]
})]
});
withCropData.storyName = "With Crop Data";
defaultAvatar.__docgenInfo = {
"description": "",
"methods": [],
"displayName": "defaultAvatar"
};
noImage.__docgenInfo = {
"description": "",
"methods": [],
"displayName": "noImage"
};
imageOnly.__docgenInfo = {
"description": "",
"methods": [],
"displayName": "imageOnly"
};
iconOnly.__docgenInfo = {
"description": "",
"methods": [],
"displayName": "iconOnly"
};
nameLink.__docgenInfo = {
"description": "",
"methods": [],
"displayName": "nameLink"
};
small.__docgenInfo = {
"description": "",
"methods": [],
"displayName": "small"
};
large.__docgenInfo = {
"description": "",
"methods": [],
"displayName": "large"
};
customSize.__docgenInfo = {
"description": "",
"methods": [],
"displayName": "customSize"
};
titleLevel.__docgenInfo = {
"description": "",
"methods": [],
"displayName": "titleLevel"
};
subtitleContent.__docgenInfo = {
"description": "",
"methods": [],
"displayName": "subtitleContent"
};
localTime.__docgenInfo = {
"description": "",
"methods": [],
"displayName": "localTime"
};
inverted.__docgenInfo = {
"description": "",
"methods": [],
"displayName": "inverted"
};
alternateShapes.__docgenInfo = {
"description": "",
"methods": [],
"displayName": "alternateShapes"
};
headerAvatarVariants.__docgenInfo = {
"description": "",
"methods": [],
"displayName": "headerAvatarVariants"
};
withCropData.__docgenInfo = {
"description": "",
"methods": [],
"displayName": "withCropData"
};