-
Notifications
You must be signed in to change notification settings - Fork 53
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
8110a9a
commit 7a0b31f
Showing
8 changed files
with
502 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,168 @@ | ||
| # Persona | ||
|
|
||
| ```rust demo | ||
| view! { | ||
| <Persona | ||
| name="Thaw" | ||
| avatar_src="https://s3.bmp.ovh/imgs/2021/10/723d457d627fe706.jpg" | ||
| > | ||
| <PersonaSecondaryText slot> | ||
| "UI" | ||
| </PersonaSecondaryText> | ||
| </Persona> | ||
| } | ||
| ``` | ||
|
|
||
| ### Text Alignment | ||
|
|
||
| A Persona supports two text alignments, `start` being the default position. | ||
|
|
||
| ```rust demo | ||
| view! { | ||
| <Flex justify=FlexJustify::SpaceAround> | ||
| <Persona | ||
| name="Thaw UI" | ||
| text_alignment=PersonaTextAlignment::Start | ||
| > | ||
| <PersonaSecondaryText slot> | ||
| "UI" | ||
| </PersonaSecondaryText> | ||
| <PersonaTertiaryText slot> | ||
| "Card" | ||
| </PersonaTertiaryText> | ||
| <PersonaQuaternaryText slot> | ||
| "Header" | ||
| </PersonaQuaternaryText> | ||
| </Persona> | ||
| <Persona | ||
| name="Thaw UI" | ||
| text_alignment=PersonaTextAlignment::Center | ||
| > | ||
| <PersonaSecondaryText slot> | ||
| "UI" | ||
| </PersonaSecondaryText> | ||
| <PersonaTertiaryText slot> | ||
| "Card" | ||
| </PersonaTertiaryText> | ||
| <PersonaQuaternaryText slot> | ||
| "Header" | ||
| </PersonaQuaternaryText> | ||
| </Persona> | ||
| </Flex> | ||
| } | ||
| ``` | ||
|
|
||
| ### Text Position | ||
|
|
||
| A Persona supports three text positions, `after` being the default position. | ||
|
|
||
| ```rust demo | ||
| view! { | ||
| <Flex justify=FlexJustify::SpaceAround> | ||
| <Persona | ||
| name="Thaw" | ||
| text_position=PersonaTextPosition::After | ||
| > | ||
| <PersonaSecondaryText slot> | ||
| "UI" | ||
| </PersonaSecondaryText> | ||
| </Persona> | ||
| <Persona | ||
| name="Thaw" | ||
| text_position=PersonaTextPosition::Below | ||
| > | ||
| <PersonaSecondaryText slot> | ||
| "UI" | ||
| </PersonaSecondaryText> | ||
| </Persona> | ||
| <Persona | ||
| name="Thaw" | ||
| text_position=PersonaTextPosition::Before | ||
| > | ||
| <PersonaSecondaryText slot> | ||
| "UI" | ||
| </PersonaSecondaryText> | ||
| </Persona> | ||
| </Flex> | ||
| } | ||
| ``` | ||
|
|
||
| ### Avatar Size | ||
|
|
||
| A Persona supports different sizes, medium being the default. | ||
|
|
||
| ```rust demo | ||
| view! { | ||
| <Flex> | ||
| <Persona | ||
| name="Thaw" | ||
| size=PersonaSize::ExtraSmall | ||
| > | ||
| <PersonaSecondaryText slot> | ||
| "UI" | ||
| </PersonaSecondaryText> | ||
| </Persona> | ||
| <Persona | ||
| name="Thaw" | ||
| size=PersonaSize::Small | ||
| > | ||
| <PersonaSecondaryText slot> | ||
| "UI" | ||
| </PersonaSecondaryText> | ||
| </Persona> | ||
| <Persona | ||
| name="Thaw" | ||
| size=PersonaSize::Medium | ||
| > | ||
| <PersonaSecondaryText slot> | ||
| "UI" | ||
| </PersonaSecondaryText> | ||
| </Persona> | ||
| <Persona | ||
| name="Thaw" | ||
| size=PersonaSize::Large | ||
| > | ||
| <PersonaSecondaryText slot> | ||
| "UI" | ||
| </PersonaSecondaryText> | ||
| </Persona> | ||
| <Persona | ||
| name="Thaw" | ||
| size=PersonaSize::ExtraLarge | ||
| > | ||
| <PersonaSecondaryText slot> | ||
| "UI" | ||
| </PersonaSecondaryText> | ||
| </Persona> | ||
| <Persona | ||
| name="Thaw" | ||
| size=PersonaSize::Huge | ||
| > | ||
| <PersonaSecondaryText slot> | ||
| "UI" | ||
| </PersonaSecondaryText> | ||
| </Persona> | ||
| </Flex> | ||
| } | ||
| ``` | ||
|
|
||
| ### Persona Props | ||
|
|
||
| | Name | Type | Default | Description | | ||
| | --- | --- | --- | --- | | ||
| | class | `MaybeProp<String>` | `Default::default()` | | | ||
| | style | `MaybeProp<String>` | `Default::default()` | | | ||
| | name | `MaybeProp<String>` | `None` | The name of the person or entity represented by the Persona. | | ||
| | size | `Signal<PersonaSize>` | `PersonaSize::Medium` | The size of a Persona and its text. | | ||
| | text_alignment | `Signal<PersonaTextAlignment>` | `PersonaTextAlignment::Start` | The vertical alignment of the text relative to the avatar. | | ||
| | text_position | `Signal<PersonaTextPosition>` | `PersonaTextPosition::After` | The position of the text relative to the avatar. | | ||
| | persona_primary_text | slot `Option<PersonaPrimaryText>` | `None` | The first line of text in the Persona, larger than the rest of the lines. | | ||
| | persona_secondary_text | slot `Option<PersonaSecondaryText>` | `None` | The second line of text in the Persona. | | ||
| | persona_tertiary_text | slot `Option<PersonaTertiaryText>` | `None` | The third line of text in the Persona. | | ||
| | persona_quaternary_text | slot `Option<PersonaQuaternaryText>` | `None` | The fourth line of text in the Persona. | | ||
|
|
||
| ### PersonaPrimaryText & PersonaSecondaryText & PersonaTertiaryText & PersonaQuaternaryText Props | ||
|
|
||
| | Name | Type | Default | Description | | ||
| | -------- | ---------- | ------- | ----------- | | ||
| | children | `Children` | | | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,139 @@ | ||
| mod types; | ||
|
|
||
| pub use types::*; | ||
|
|
||
| use crate::Avatar; | ||
| use leptos::{either::Either, prelude::*}; | ||
| use thaw_components::{If, Then}; | ||
| use thaw_utils::{class_list, mount_style}; | ||
|
|
||
| #[component] | ||
| pub fn Persona( | ||
| #[prop(optional, into)] class: MaybeProp<String>, | ||
| #[prop(optional, into)] style: MaybeProp<String>, | ||
| /// The name of the person or entity represented by the Persona. | ||
| /// When primary_text is not provided, this will be used as the default value for primaryText. | ||
| #[prop(optional, into)] | ||
| name: MaybeProp<String>, | ||
| /// The size of a Persona and its text. | ||
| #[prop(optional, into)] | ||
| size: Signal<PersonaSize>, | ||
| /// The vertical alignment of the text relative to the avatar. | ||
| #[prop(optional, into)] | ||
| text_alignment: Signal<PersonaTextAlignment>, | ||
| /// The position of the text relative to the avatar. | ||
| #[prop(optional, into)] | ||
| text_position: Signal<PersonaTextPosition>, | ||
| #[prop(optional, into)] avatar_src: MaybeProp<String>, | ||
| /// The first line of text in the Persona, larger than the rest of the lines. | ||
| #[prop(optional)] | ||
| persona_primary_text: Option<PersonaPrimaryText>, | ||
| /// The second line of text in the Persona. | ||
| #[prop(optional)] | ||
| persona_secondary_text: Option<PersonaSecondaryText>, | ||
| /// The third line of text in the Persona. | ||
| #[prop(optional)] | ||
| persona_tertiary_text: Option<PersonaTertiaryText>, | ||
| /// The fourth line of text in the Persona. | ||
| #[prop(optional)] | ||
| persona_quaternary_text: Option<PersonaQuaternaryText>, | ||
| ) -> impl IntoView { | ||
| mount_style("persona", include_str!("./persona.css")); | ||
|
|
||
| let text_position_before = | ||
| Memo::new(move |_| text_position.get() == PersonaTextPosition::Before); | ||
|
|
||
| let style = move || { | ||
| let css_var = match size.get() { | ||
| PersonaSize::ExtraSmall => "spacingHorizontalSNudge", | ||
| PersonaSize::Small => "spacingHorizontalS", | ||
| PersonaSize::Medium => "spacingHorizontalS", | ||
| PersonaSize::Large => "spacingHorizontalMNudge", | ||
| PersonaSize::ExtraLarge => "spacingHorizontalMNudge", | ||
| PersonaSize::Huge => "spacingHorizontalM", | ||
| }; | ||
|
|
||
| let mut s = format!("--thaw-persona__avatar-spacing: var(--{css_var});"); | ||
|
|
||
| style.with(|style| { | ||
| if let Some(style) = style.as_ref() { | ||
| s.push_str(style); | ||
| } | ||
| }); | ||
|
|
||
| s | ||
| }; | ||
|
|
||
| let avatar_size = Memo::new(move |_| size.get().as_avatar_size()); | ||
|
|
||
| view! { | ||
| <div | ||
| class=class_list![ | ||
| "thaw-persona", | ||
| move || format!("thaw-persona--{}", text_alignment.get().as_str()), | ||
| move || format!("thaw-persona--{}", text_position.get().as_str()), | ||
| move || format!("thaw-persona--{}", size.get().as_str()), | ||
| class | ||
| ] | ||
| style=style | ||
| > | ||
| <If cond=Signal::derive(move || !text_position_before.get())> | ||
| <Then slot> | ||
| <Avatar | ||
| class="thaw-persona__avatar" | ||
| name=name | ||
| src=avatar_src | ||
| size=avatar_size | ||
| /> | ||
| </Then> | ||
| </If> | ||
| {if let Some(text) = persona_primary_text { | ||
| Either::Left( | ||
| view! { <span class="thaw-persona__primary-text">{(text.children)()}</span> }, | ||
| ) | ||
| } else { | ||
| Either::Right(move || { | ||
| if let Some(name) = name.get() { | ||
| Either::Left( | ||
| view! { <span class="thaw-persona__primary-text">{name}</span> }, | ||
| ) | ||
| } else { | ||
| Either::Right(()) | ||
| } | ||
| }) | ||
| }} | ||
| {if let Some(text) = persona_secondary_text { | ||
| Either::Left( | ||
| view! { <span class="thaw-persona__secondary-text">{(text.children)()}</span> }, | ||
| ) | ||
| } else { | ||
| Either::Right(()) | ||
| }} | ||
| {if let Some(text) = persona_tertiary_text { | ||
| Either::Left( | ||
| view! { <span class="thaw-persona__tertiary-text">{(text.children)()}</span> }, | ||
| ) | ||
| } else { | ||
| Either::Right(()) | ||
| }} | ||
| {if let Some(text) = persona_quaternary_text { | ||
| Either::Left( | ||
| view! { <span class="thaw-persona__quaternary-text">{(text.children)()}</span> }, | ||
| ) | ||
| } else { | ||
| Either::Right(()) | ||
| }} | ||
|
|
||
| <If cond=text_position_before> | ||
| <Then slot> | ||
| <Avatar | ||
| class="thaw-persona__avatar" | ||
| name=name | ||
| src=avatar_src | ||
| size=avatar_size | ||
| /> | ||
| </Then> | ||
| </If> | ||
| </div> | ||
| } | ||
| } |
Oops, something went wrong.