Skip to content

Commit

Permalink
fixup! Refactor(web): Update UNSTABLE_EmptyState according to design …
Browse files Browse the repository at this point in the history 
…#DS-1311
  • Loading branch information
@curdaj
curdaj committed Jun 14, 2024
1 parent 191d628 commit 5ff9981
Show file tree
Hide file tree
Showing 2 changed files with 38 additions and 47 deletions.
1 change: 0 additions & 1 deletion packages/web/src/scss/components/UNSTABLE_EmptyState/_theme.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@
$breakpoints: tokens.$breakpoints;
$root-padding-block: tokens.$space-800;
$root-padding-block-desktop: tokens.$space-900;
$heading-margin-bottom: tokens.$space-500;
$buttons-gap: tokens.$space-600;
$wrapper-gap: tokens.$space-700;
$content-gap: tokens.$space-500;
84 changes: 38 additions & 46 deletions packages/web/src/scss/components/UNSTABLE_EmptyState/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,82 +5,74 @@ <h2 class="docs-Heading">Default</h2>
<div class="docs-Stack docs-Stack--stretch">

<div class="UNSTABLE_EmptyState">
<div class="UNSTABLE_EmptyState__wrapper">
<div class="UNSTABLE_EmptyState__icon">
<div class="UNSTABLE_EmptyState__content">
<div style="border: 1px solid #E9E9E9; border-radius: 10px; padding: 12px ">
<svg width="24" height="24" fill="none" viewBox="0 0 24 24" aria-hidden="true"><use href="/assets/icons/svg/sprite.svg#search"></use></svg>
</div>
<div>
<h2 data-test-empty-tile="h2" class="typography-heading-xsmall-text">Empty State Title</h2>
<p class="typography-body-medium-text-regular">Look somewhere else</p>
</div>
<span data-test-empty-tile="span" class="typography-heading-xsmall-text">Headline</span>
<p class="typography-body-medium-text-regular">In publishing and graphic design, lorem ipsum is common placeholder text used to demonstrate the graphic elements</p>
</div>
<div class="UNSTABLE_EmptyState__content">Custom content</div>
<div style="display: flex; justify-content: center">I'm custom content</div>
</div>


<div class="UNSTABLE_EmptyState">
<div class="UNSTABLE_EmptyState__wrapper">
<div class="UNSTABLE_EmptyState__icon">
<svg width="24" height="24" fill="none" viewBox="0 0 24 24" aria-hidden="true"><use href="/assets/icons/svg/sprite.svg#search"></use></svg>
</div>
<div>
<h2 data-test-empty-tile="h2" class="typography-heading-xsmall-text">Empty State Title</h2>
<p class="typography-body-medium-text-regular">Look somewhere else</p>
</div>
<div style="display: flex; flex-direction: column; align-items: center">
<h2 class="typography-heading-xsmall-text">Custom content Headline</h2>
<p class="typography-body-medium-text-regular">Custom content description</p>
</div>
<div class="UNSTABLE_EmptyState__buttons">
<a class="Button Button--primary Button--medium" href="#">Action</a>
<a class="Button Button--secondary Button--medium" href="#">Action</a>
</div>
<a href="#" class="link-primary">Link to something</a>
</div>

<div class="UNSTABLE_EmptyState">
<div class="UNSTABLE_EmptyState__wrapper">
<div class="UNSTABLE_EmptyState__icon">
<div class="UNSTABLE_EmptyState__content">
<div style="border: 1px solid #E9E9E9; border-radius: 10px; padding: 12px ">
<svg width="24" height="24" fill="none" viewBox="0 0 24 24" aria-hidden="true"><use href="/assets/icons/svg/sprite.svg#search"></use></svg>
</div>
<div>
<h2 data-test-empty-tile="h2" class="typography-heading-xsmall-text">Empty State Title</h2>
<p class="typography-body-medium-text-regular">Look somewhere else</p>
</div>
<h2 data-test-empty-tile="h2" class="typography-heading-xsmall-text">Headline</h2>
<p class="typography-body-medium-text-regular">In publishing and graphic design, lorem ipsum is common placeholder text used to demonstrate the graphic elements</p>
</div>
<div class="UNSTABLE_EmptyState__content">
<a class="Button Button--primary Button--medium" href="#">Action</a>

<div class="UNSTABLE_EmptyState__wrapper">
<div class="UNSTABLE_EmptyState__buttons">
<a class="Button Button--primary Button--medium" href="#">Action</a>
<a class="Button Button--secondary Button--medium" href="#">Action</a>
</div>
<a href="#" class="link-primary">Link to something</a>
</div>
</div>

<div class="UNSTABLE_EmptyState">
<div class="UNSTABLE_EmptyState__wrapper">
<div class="UNSTABLE_EmptyState__icon">
<div class="UNSTABLE_EmptyState__content">
<div style="border: 1px solid #E9E9E9; border-radius: 10px; padding: 12px ">
<svg width="24" height="24" fill="none" viewBox="0 0 24 24" aria-hidden="true"><use href="/assets/icons/svg/sprite.svg#search"></use></svg>
</div>
<div>
<h2 data-test-empty-tile="h2" class="typography-heading-xsmall-text">Empty State Title</h2>
<p class="typography-body-medium-text-regular">Look somewhere else</p>
<h2 data-test-empty-tile="h2" class="typography-heading-xsmall-text">Headline</h2>
<p class="typography-body-medium-text-regular">In publishing and graphic design, lorem ipsum is common placeholder text used to demonstrate the graphic elements</p>
</div>

<div class="UNSTABLE_EmptyState__wrapper">
<div class="UNSTABLE_EmptyState__buttons">
<a class="Button Button--primary Button--medium" href="#">Action</a>
</div>
</div>
<a href="#" class="link-primary">Link to something</a>
</div>

<div class="UNSTABLE_EmptyState">
<div class="UNSTABLE_EmptyState__wrapper">
<div class="UNSTABLE_EmptyState__icon">
<div class="UNSTABLE_EmptyState__content">
<div style="border: 1px solid #E9E9E9; border-radius: 10px; padding: 12px ">
<svg width="24" height="24" fill="none" viewBox="0 0 24 24" aria-hidden="true"><use href="/assets/icons/svg/sprite.svg#search"></use></svg>
</div>
<div>
<h2 data-test-empty-tile="h2" class="typography-heading-xsmall-text">Empty State Title</h2>
<p class="typography-body-medium-text-regular">Look somewhere else</p>
</div>
<h2 data-test-empty-tile="h2" class="typography-heading-xsmall-text">Headline</h2>
<p class="typography-body-medium-text-regular">In publishing and graphic design, lorem ipsum is common placeholder text used to demonstrate the graphic elements</p>
</div>
<div class="UNSTABLE_EmptyState__wrapper">
<a href="#" class="link-primary">Link to something</a>
</div>
</div>

<div class="UNSTABLE_EmptyState">
<div class="UNSTABLE_EmptyState__wrapper">
<div>
<h2 data-test-empty-tile="h2" class="typography-heading-xsmall-text">Empty State Title</h2>
<p class="typography-body-medium-text-regular">Look somewhere else</p>
</div>
<div class="UNSTABLE_EmptyState__content">
<h2 data-test-empty-tile="h2" class="typography-heading-xsmall-text">Headline</h2>
<p class="typography-body-medium-text-regular">In publishing and graphic design, lorem ipsum is common placeholder text used to demonstrate the graphic elements</p>
</div>
</div>

Expand Down

0 comments on commit 5ff9981

Please sign in to comment.