Persona component

.changeset/cold-radios-heal.md

@@ -0,0 +1,5 @@
+---
+'@microsoft/atlas-css': minor
+---
+
+Adding persona component.

.changeset/eleven-seals-nail.md

@@ -0,0 +1,5 @@
+---
+'@microsoft/atlas-site': minor
+---
+
+Adding documentation page for persona component.

css/src/components/index.scss

@@ -14,6 +14,7 @@
 @import './notification.scss';
 @import './icon.scss';
 @import './image.scss';
+@import './persona.scss';
 @import './popover.scss';
 @import './pagination.scss';
 @import './table.scss';

css/src/components/persona.scss

@@ -0,0 +1,66 @@
+$persona-font-size-sm: $font-size-9 !default;
+$persona-font-size-md: $font-size-8 !default;
+$persona-font-size-lg: $font-size-7 !default;
+
+$persona-avatar-background-color: $alternate-background-medium !default;
+$persona-avatar-font-color: $text-invert !default;
+$persona-avatar-border-radius: $border-radius-rounded;
+
+$persona-details-font-color: $text-subtle !default;
+$persona-name-font-size: $font-size-7 !default;
+$persona-name-font-color: $text !default;
+
+$persona-gap-size: $layout-1 !default;
+
+.persona {
+	display: flex;
+	position: relative;
+	gap: $persona-gap-size;
+	font-size: $persona-font-size-md;
+
+	.persona-avatar {
+		display: flex;
+		flex-shrink: 0;
+		align-items: center;
+		justify-content: center;
+		width: 2.7em;
+		height: 2.7em;
+		border-radius: $persona-avatar-border-radius;
+		background-color: $persona-avatar-background-color;
+		color: $persona-avatar-font-color;
+		line-height: 1;
+		text-transform: uppercase;
+
+		img,
+		svg {
+			display: block;
+			width: 100%;
+			height: auto;
+			max-height: 100%;
+			border-radius: $persona-avatar-border-radius;
+		}
+	}
+
+	.persona-details {
+		align-self: center;
+		color: $persona-details-font-color;
+
+		.persona-name {
+			font-size: 1.35em;
+
+			&:not(a) {
+				color: $persona-name-font-color;
+			}
+		}
+	}
+
+	// Sizes
+
+	&.persona-sm {
+		font-size: $persona-font-size-sm;
+	}
+
+	&.persona-lg {
+		font-size: $persona-font-size-lg;
+	}
+}

site/src/components/persona.md

@@ -0,0 +1,100 @@
+---
+title: Persona
+description: Persona component in the Atlas Design System
+template: standard
+figmaEmbed: https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FuVA2amRR71yJZ0GS6RI6zL%2F%25F0%259F%258C%259E-Atlas-Design-Library%3Ftype%3Ddesign%26node-id%3D1284%253A2163%26mode%3Ddesign%26t%3DklysUJ7ALWgcF1SQ-1 allowfullscreen
+classType: Component
+classPrefixes:
+  - persona
+---
+
+# Persona
+
+We use the persona to represent users. It consists of two parts - user's avatar and details. Both subcomponents can be used independent of one another. Details has their name and optional metadata.
+
+| Class pattern             | Sizes      |
+| ------------------------- | ---------- |
+| `.persona.persona-<size>` | `sm`, `lg` |
+
+## Usage
+
+Below is an example of the most common persona component use-case.
+
+```html
+<div class="persona">
+	<figure class="persona-avatar">
+		<img src="~/src/scaffold/media/avatar.png" alt="Avatar for Jane Doe" />
+	</figure>
+	<div class="persona-details">
+		<p class="persona-name">Jane Doe</p>
+		<p>Software Engineer</p>
+	</div>
+</div>
+```
+
+Persona's details may contain a link to user's profile, and with help of the [`.stretched-link` component](../components/stretched-link.md) the whole area persona takes becomes clickable:
+
+```html
+<div class="persona position-relative">
+	<figure class="persona-avatar">
+		<img src="~/src/scaffold/media/avatar.png" alt="Avatar for Jane Doe" />
+	</figure>
+	<div class="persona-details">
+		<a class="persona-name justify-self-stretch stretched-link" href="#">Jane Doe</a>
+		<p>Software Engineer</p>
+	</div>
+</div>
+```
+
+Persona might have both avatar and details parts presented at the same time or just one of them.
+
+```html
+<div class="persona">
+	<figure class="persona-avatar">
+		<img src="~/src/scaffold/media/avatar.png" alt="Avatar for Jane Doe" />
+	</figure>
+</div>
+
+<div class="persona margin-top-md">
+	<div class="persona-details">
+		<p class="persona-name">John Doe</p>
+		<p>Software Engineer</p>
+	</div>
+</div>
+```
+
+### Sizes
+
+The following classes are available for resizing: `persona-sm`, `persona-lg`.
+
+```html
+<div class="display-flex flex-direction-column gap-sm">
+	<div class="persona persona-sm">
+		<figure class="persona-avatar">
+			<img src="~/src/scaffold/media/avatar.png" alt="Avatar for Jane Doe" />
+		</figure>
+		<div class="persona-details">
+			<p class="persona-name">Jane Doe</p>
+			<p>Software Engineer</p>
+		</div>
+	</div>
+	<div class="persona">
+		<figure class="persona-avatar">
+			<img src="~/src/scaffold/media/avatar.png" alt="Avatar for Jane Doe" />
+		</figure>
+		<div class="persona-details">
+			<p class="persona-name">Jane Doe</p>
+			<p>Software Engineer</p>
+		</div>
+	</div>
+	<div class="persona persona-lg">
+		<figure class="persona-avatar">
+			<img src="~/src/scaffold/media/avatar.png" alt="Avatar for Jane Doe" />
+		</figure>
+		<div class="persona-details">
+			<p class="persona-name">Jane Doe</p>
+			<p>Software Engineer</p>
+		</div>
+	</div>
+</div>
+```