Skip to content

[mercury] add widget classes #347

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Oct 1, 2024
Merged

[mercury] add widget classes #347

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
28e61a8
include widget component classes and bundle
bsastregx Oct 1, 2024
70b9c24
update showcase files
bsastregx Oct 1, 2024
5865c8a
upadate widget showcase
bsastregx Oct 1, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/mercury/showcase/all.css
View file
Open in desktop

Large diffs are not rendered by default.

5 changes: 5 additions & 0 deletions packages/mercury/showcase/assets/json/navbar-items.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,6 +96,11 @@
"caption": "typography",
"url": "typography.html",
"chameleonUrl": null
},
{
"caption": "widget",
"url": "widget.html",
"chameleonUrl": null
}
]
},
Expand Down
1 change: 1 addition & 0 deletions packages/mercury/showcase/assets/scripts/bundles.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,7 @@ export const getThemeBundles = (basePath) => [
getThemeModelItem(basePath, "components/ticket-list"),
getThemeModelItem(basePath, "components/tooltip"),
getThemeModelItem(basePath, "components/tree-view"),
getThemeModelItem(basePath, "components/widget"),
// Resets
getThemeModelItem(basePath, "resets/box-sizing"),
// Utils
Expand Down
5 changes: 5 additions & 0 deletions packages/mercury/showcase/assets/styles/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -264,6 +264,11 @@ body.all-hidden .section__header {
background-color: var(--sc-base__border-color);
}

.padding-bg-color {
--green-for-padding: var(--mer-color__tinted-green--60);
background-color: var(--green-for-padding) !important;
}

/*====================
Top Bar
====================*/
Expand Down
39 changes: 26 additions & 13 deletions packages/mercury/showcase/doc-spacing.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,15 +6,9 @@
<title>Spacing</title>
<style>
/* Avoid FOUC (Flash Of Unstyled Content) */
:root {
--green-for-padding: var(--mer-color__tinted-green--60);
}
html:not(.hydrated) {
visibility: hidden;
}
.layout {
background-color: var(--green-for-padding) !important;
}
.layout__panel {
border-radius: 0 !important;
}
Expand Down Expand Up @@ -71,7 +65,9 @@ <h1 class="section__title">body spacing</h1>
Provides padding all around the box.
</p>
<div class="article__content">
<div class="layout layout--cols-1 spacing-body">
<div
class="layout layout--cols-1 spacing-body padding-bg-color"
>
<div class="layout__panel">Your content</div>
</div>
</div>
Expand Down Expand Up @@ -102,7 +98,9 @@ <h1 class="section__title">body spacing</h1>
(usually above and below the box).
</p>
<div class="article__content">
<div class="layout layout--cols-1 spacing-body-block">
<div
class="layout layout--cols-1 spacing-body-block padding-bg-color"
>
<div class="layout__panel">Your content</div>
</div>
</div>
Expand Down Expand Up @@ -138,7 +136,9 @@ <h1 class="section__title">body spacing</h1>
box).
</p>
<div class="article__content">
<div class="layout layout--cols-1 spacing-body-block-start">
<div
class="layout layout--cols-1 spacing-body-block-start padding-bg-color"
>
<div class="layout__panel">Your content</div>
</div>
</div>
Expand Down Expand Up @@ -174,7 +174,9 @@ <h1 class="section__title">body spacing</h1>
box).
</p>
<div class="article__content">
<div class="layout layout--cols-1 spacing-body-block-end">
<div
class="layout layout--cols-1 spacing-body-block-end padding-bg-color"
>
<div class="layout__panel">Your content</div>
</div>
</div>
Expand Down Expand Up @@ -205,7 +207,9 @@ <h1 class="section__title">body spacing</h1>
(usually the left and right sides of the box).
</p>
<div class="article__content">
<div class="layout layout--cols-1 spacing-body-inline">
<div
class="layout layout--cols-1 spacing-body-inline padding-bg-color"
>
<div class="layout__panel">Your content</div>
</div>
</div>
Expand Down Expand Up @@ -241,7 +245,9 @@ <h1 class="section__title">body spacing</h1>
side of the box).
</p>
<div class="article__content">
<div class="layout layout--cols-1 spacing-body-inline-start">
<div
class="layout layout--cols-1 spacing-body-inline-start padding-bg-color"
>
<div class="layout__panel">Your content</div>
</div>
</div>
Expand Down Expand Up @@ -277,7 +283,9 @@ <h1 class="section__title">body spacing</h1>
side of the box).
</p>
<div class="article__content">
<div class="layout layout--cols-1 spacing-body-inline-end">
<div
class="layout layout--cols-1 spacing-body-inline-end padding-bg-color"
>
<div class="layout__panel">Your content</div>
</div>
</div>
Expand Down Expand Up @@ -339,6 +347,11 @@ <h1 class="section__title">body spacing</h1>
>tab</a
>
</li>
<li>
<a href="./widget.html" class="dummy-grid-container__item"
>widget</a
>
</li>
</ul>
</div>
<!-- /.article__main -->
Expand Down
28 changes: 25 additions & 3 deletions packages/mercury/showcase/scss/mercury.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8613,6 +8613,21 @@
);
}

%widget {
--spacing-body-block-start: var(--mer-spacing--md);
--spacing-body-block-end: var(--mer-spacing--md);
--spacing-body-inline-start: var(--mer-spacing--md);
--spacing-body-inline-end: var(--mer-spacing--md);
}

/// @group Widget
/// @param {String} $selector [".widget"] -
@mixin widget($selector: ".widget") {
#{$selector} {
@extend %widget;
}
}


@mixin mercury(
// Resets
Expand Down Expand Up @@ -8681,7 +8696,8 @@
$tabular-grid: true,
$ticket-list: true,
$tooltip: true,
$tree-view: true
$tree-view: true,
$widget: true
) {
// - - - - - - - - - - - - - - - - - - - -
// Icons
Expand Down Expand Up @@ -16991,6 +17007,10 @@
@if $tree-view {
@include tree-view();
}

@if $widget {
@include widget();
}
}

@mixin mercury-only(
Expand Down Expand Up @@ -17060,7 +17080,8 @@
$tabular-grid: false,
$ticket-list: false,
$tooltip: false,
$tree-view: false
$tree-view: false,
$widget: false
) {
@include mercury(
// Resets
Expand Down Expand Up @@ -17129,6 +17150,7 @@
$tabular-grid: $tabular-grid,
$ticket-list: $ticket-list,
$tooltip: $tooltip,
$tree-view: $tree-view
$tree-view: $tree-view,
$widget: $widget
);
}
99 changes: 99 additions & 0 deletions packages/mercury/showcase/widget.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,99 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Widget</title>
<style>
/* Avoid FOUC (Flash Of Unstyled Content) */
html:not(.hydrated) {
visibility: hidden;
}
</style>
<script type="module" src="./assets/scripts/scripts-header.js"></script>

<link rel="stylesheet" href="./all.css" />
<link rel="stylesheet" href="./assets/styles/top-bar.css" />
<link rel="stylesheet" href="./assets/styles/sidebar.css" />
<link rel="stylesheet" href="./assets/styles/main.css" />
<link rel="stylesheet" href="./assets/styles/reset.css" />
<style>
.widget__content {
background-color: var(--mer-surface__elevation--02);
padding: var(--mer-spacing--lg);
text-align: center;
font-size: var(--mer-font__size--xs);
}
</style>
</head>
<body class="showcase" data-sidebar>
<script src="./assets/scripts/scripts.js"></script>
<main class="main">
<div class="container">
<!-- control section -->
<section class="section" data-nav>
<!-- header -->
<header class="section__header">
<h1 class="section__title">widget</h1>
<p class="section__description">
A widget component is a versatile interface element used to
display dynamic content or provide interactive functionality
within a defined space. It can present anything from media, forms,
or data to tools, allowing users to engage with the content
directly without navigating away from the main context.
</p>
<p class="section__description section__description--note">
At the time of writing (October 2024) the widget only purpose is
to provide the spacing classes.
</p>
</header>
<div class="section__articles-container">
<!-- ==========================
spacing classes
=========================== -->
<article class="article" data-nav data-title="spacing classes">
<header class="article__header"></header>

<!-- main -->
<div class="article__main">
<p class="article__description">
By default the widget does not provide any padding. To apply
padding you have to include
<a href="./doc-spacing.html"
>any of the global body padding classes</a
>.
</p>
<div class="article__content">
<div class="widget spacing-body padding-bg-color">
<div class="widget__content">Your widget content</div>
</div>
</div>
<div class="article__content">
<div class="dummy-grid-container">
<a
href="./doc-spacing.html"
class="dummy-grid-container__item"
>this component adheres to the spacing body classes</a
>
</div>
</div>
<div class="article__code">
<ch-code id="ch-code-2" language="tsx" class="code">
</ch-code>
<script>
const markup2 = `<div class="widget spacing-body">
<!-- Your widget content here -->
</div>`;
document.getElementById("ch-code-2").value = markup2;
</script>
</div>
<!-- /.article__content -->
</div>
<!-- /.article__main -->
</article>
</div>
</section>
</div>
</main>
</body>
</html>
4 changes: 3 additions & 1 deletion packages/mercury/src/bundles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,8 +31,9 @@ export type MercuryBundleComponent =
| "components/tab"
| "components/tabular-grid"
| "components/ticket-list"
| "components/tooltip"
| "components/tree-view"
| "components/tooltip";
| "components/widget";

export type MercuryBundleComponentForm =
| "components/button"
Expand Down Expand Up @@ -118,6 +119,7 @@ export const getThemeBundles = (basePath: string) =>
getThemeModelItem(basePath, "components/ticket-list"),
getThemeModelItem(basePath, "components/tooltip"),
getThemeModelItem(basePath, "components/tree-view"),
getThemeModelItem(basePath, "components/widget"),

// Resets
getThemeModelItem(basePath, "resets/box-sizing"),
Expand Down
3 changes: 3 additions & 0 deletions packages/mercury/src/bundles/scss/components/widget.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
@import "../../../mercury.scss";

@include mercury-only($components: true, $widget: true);
14 changes: 14 additions & 0 deletions packages/mercury/src/components/widget/_widget-styles.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
%widget {
--spacing-body-block-start: var(--mer-spacing--md);
--spacing-body-block-end: var(--mer-spacing--md);
--spacing-body-inline-start: var(--mer-spacing--md);
--spacing-body-inline-end: var(--mer-spacing--md);
}

/// @group Widget
/// @param {String} $selector [".widget"] -
@mixin widget($selector: ".widget") {
#{$selector} {
@extend %widget;
}
}
14 changes: 11 additions & 3 deletions packages/mercury/src/mercury.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,7 @@
@import "./components/ticket-list/ticket-list-styles";
@import "./components/tooltip/tooltip-styles";
@import "./components/tree-view/tree-view-styles";
@import "./components/widget/widget-styles";

@mixin mercury(
// Resets
Expand Down Expand Up @@ -132,7 +133,8 @@
$tabular-grid: true,
$ticket-list: true,
$tooltip: true,
$tree-view: true
$tree-view: true,
$widget: true
) {
// - - - - - - - - - - - - - - - - - - - -
// Icons
Expand Down Expand Up @@ -554,6 +556,10 @@
@if $tree-view {
@include tree-view();
}

@if $widget {
@include widget();
}
}

@mixin mercury-only(
Expand Down Expand Up @@ -623,7 +629,8 @@
$tabular-grid: false,
$ticket-list: false,
$tooltip: false,
$tree-view: false
$tree-view: false,
$widget: false
) {
@include mercury(
// Resets
Expand Down Expand Up @@ -692,6 +699,7 @@
$tabular-grid: $tabular-grid,
$ticket-list: $ticket-list,
$tooltip: $tooltip,
$tree-view: $tree-view
$tree-view: $tree-view,
$widget: $widget
);
}
Loading