From 3b4489e3094ac82b412e49ca8b93d6c6eaebbe1a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jan=20Kry=C5=A1p=C3=ADn?= Date: Tue, 25 Jan 2022 13:25:31 +0100 Subject: [PATCH 1/2] DS-80 Feat: Implement Container component to spirit-web and showcase it in demo --- examples/web/index.html | 50 +++++++++---------- examples/web/jobs.html | 50 +++++++++---------- examples/web/src/jobs/@tokens.scss | 2 + examples/web/src/jobs/jobs.scss | 1 + packages/design-tokens/README.md | 3 ++ .../design-tokens/src/scss/_breakpoints.scss | 2 + packages/design-tokens/src/scss/_layout.scss | 13 +++++ packages/design-tokens/src/scss/index.scss | 1 + .../web/src/components/Container/README.md | 7 +++ .../src/components/Container/_Container.scss | 11 ++++ .../web/src/components/Container/_theme.scss | 5 ++ .../web/src/components/Container/_tools.scss | 11 ++++ .../web/src/components/Container/index.scss | 1 + packages/web/src/components/Tag/README.md | 20 ++++---- packages/web/src/components/index.scss | 1 + packages/web/src/tools/_breakpoint.scss | 9 ++++ 16 files changed, 125 insertions(+), 62 deletions(-) create mode 100644 packages/design-tokens/src/scss/_layout.scss create mode 100644 packages/web/src/components/Container/README.md create mode 100644 packages/web/src/components/Container/_Container.scss create mode 100644 packages/web/src/components/Container/_theme.scss create mode 100644 packages/web/src/components/Container/_tools.scss create mode 100644 packages/web/src/components/Container/index.scss create mode 100644 packages/web/src/tools/_breakpoint.scss diff --git a/examples/web/index.html b/examples/web/index.html index 56f790b56f..5f3e3b9c55 100644 --- a/examples/web/index.html +++ b/examples/web/index.html @@ -23,21 +23,13 @@ } h2 { - margin-top: 3rem; - margin-bottom: 1.5rem; + margin-block: 3rem 1.5rem; font-size: 2rem; } header, main { - padding: 1.5rem 8vw; - } - - @media (min-width: 960px) { - header, - main { - padding-inline: 16vw; - } + padding-block: 1.5rem; } header { @@ -47,29 +39,35 @@
-

Spirit Web Demo

+
+

Spirit Web Demo

+
-

Button

- - - +
+

Button

+ + + +
-

Tag

- I'm tag. I feel like filling marketing pages :-) - I'm tag. I feel like filling marketing pages :-) - I'm tag. I feel like filling marketing pages :-) - I'm tag. I feel like filling marketing pages :-) - I'm tag. I feel like filling marketing pages :-) - I'm tag. I feel like filling marketing pages :-) - I'm tag. I feel like filling marketing pages :-) - I'm tag. I feel like filling marketing pages :-) - I'm tag. I feel like filling marketing pages :-) - I'm tag. I feel like filling marketing pages :-) +
+

Tag

+ I'm tag. I feel like filling marketing pages :-) + I'm tag. I feel like filling marketing pages :-) + I'm tag. I feel like filling marketing pages :-) + I'm tag. I feel like filling marketing pages :-) + I'm tag. I feel like filling marketing pages :-) + I'm tag. I feel like filling marketing pages :-) + I'm tag. I feel like filling marketing pages :-) + I'm tag. I feel like filling marketing pages :-) + I'm tag. I feel like filling marketing pages :-) + I'm tag. I feel like filling marketing pages :-) +
diff --git a/examples/web/jobs.html b/examples/web/jobs.html index de668e7b1e..e5a6bd6858 100644 --- a/examples/web/jobs.html +++ b/examples/web/jobs.html @@ -34,22 +34,14 @@ } h2 { - margin-top: 3rem; - margin-bottom: 1.5rem; + margin-block: 3rem 1.5rem; font-weight: normal; font-size: 25px; } header, main { - padding: 1.5rem 8vw; - } - - @media (min-width: 960px) { - header, - main { - padding-inline: 16vw; - } + padding-block: 1.5rem; } header { @@ -60,29 +52,35 @@
-

Spirit Web Demo — Jobs

+
+

Spirit Web Demo — Jobs

+
-

Button

- - - +
+

Button

+ + + +
-

Tag

- I'm tag. I feel like filling marketing pages :-) - I'm tag. I feel like filling marketing pages :-) - I'm tag. I feel like filling marketing pages :-) - I'm tag. I feel like filling marketing pages :-) - I'm tag. I feel like filling marketing pages :-) - I'm tag. I feel like filling marketing pages :-) - I'm tag. I feel like filling marketing pages :-) - I'm tag. I feel like filling marketing pages :-) - I'm tag. I feel like filling marketing pages :-) - I'm tag. I feel like filling marketing pages :-) +
+

Tag

+ I'm tag. I feel like filling marketing pages :-) + I'm tag. I feel like filling marketing pages :-) + I'm tag. I feel like filling marketing pages :-) + I'm tag. I feel like filling marketing pages :-) + I'm tag. I feel like filling marketing pages :-) + I'm tag. I feel like filling marketing pages :-) + I'm tag. I feel like filling marketing pages :-) + I'm tag. I feel like filling marketing pages :-) + I'm tag. I feel like filling marketing pages :-) + I'm tag. I feel like filling marketing pages :-) +
diff --git a/examples/web/src/jobs/@tokens.scss b/examples/web/src/jobs/@tokens.scss index 9e73efade3..4d9801bf8e 100644 --- a/examples/web/src/jobs/@tokens.scss +++ b/examples/web/src/jobs/@tokens.scss @@ -2,6 +2,7 @@ $font-family: #{'Open Sans', helvetica, roboto, arial, sans-serif}; @forward '@lmc-eu/spirit-design-tokens/dist/scss/borders'; +@forward '@lmc-eu/spirit-design-tokens/dist/scss/breakpoints'; @forward '@lmc-eu/spirit-design-tokens/dist/scss/colors' with ( $brand-primary: #f90, $brand-secondary: #19325a, @@ -21,6 +22,7 @@ $font-family: #{'Open Sans', helvetica, roboto, arial, sans-serif}; $emotion-danger-default: #d40014, $emotion-danger-background: #fbe6e8 ); +@forward '@lmc-eu/spirit-design-tokens/dist/scss/layout'; @forward '@lmc-eu/spirit-design-tokens/dist/scss/radii' with ( $radius-1: 0, $radius-2: 0, diff --git a/examples/web/src/jobs/jobs.scss b/examples/web/src/jobs/jobs.scss index 29c75896d8..ccca3b31a4 100644 --- a/examples/web/src/jobs/jobs.scss +++ b/examples/web/src/jobs/jobs.scss @@ -1,3 +1,4 @@ // ⚠️ Remove the `dist/` part from paths below when copy-and-pasting the code to your project. @use '@lmc-eu/spirit-web/dist/scss/components/Button'; +@use '@lmc-eu/spirit-web/dist/scss/components/Container'; @use '@lmc-eu/spirit-web/dist/scss/components/Tag'; diff --git a/packages/design-tokens/README.md b/packages/design-tokens/README.md index 2c4a9bc1f9..76515f2605 100644 --- a/packages/design-tokens/README.md +++ b/packages/design-tokens/README.md @@ -17,6 +17,7 @@ | 🖼 Borders | ✅ | [`_borders.sass`] | | 🖥 Breakpoints | ✅ | [`_breakpoints.sass`] | | 🎨 Colors | ✅ | [`_colors.sass`] | +| 🧱 Layout | ✅ | [`_layout.sass`] | | 🎱 Radii | ✅ | [`_radii.sass`] | | ⛱ Shadows | ✅ | [`_shadows.sass`] | | 📏 Spacing | ✅ | [`_spacing.sass`] | @@ -162,6 +163,7 @@ your design tokens compatible with Spirit, just create a `@tokens.scss` file and @forward 'borders'; @forward 'breakpoints'; @forward 'colors'; +@forward 'layout'; @forward 'radii'; @forward 'shadows'; @forward 'spacing'; @@ -258,6 +260,7 @@ See the [LICENSE](LICENSE.md) file for information. [`_borders.sass`]: src/scss/_borders.scss [`_breakpoints.sass`]: src/scss/_breakpoints.scss [`_colors.sass`]: src/scss/_colors.scss +[`_layout.sass`]: src/scss/_layout.scss [`_radii.sass`]: src/scss/_radii.scss [`_shadows.sass`]: src/scss/_shadows.scss [`_spacing.sass`]: src/scss/_spacing.scss diff --git a/packages/design-tokens/src/scss/_breakpoints.scss b/packages/design-tokens/src/scss/_breakpoints.scss index 5f25b6bd4b..88f28c120e 100644 --- a/packages/design-tokens/src/scss/_breakpoints.scss +++ b/packages/design-tokens/src/scss/_breakpoints.scss @@ -1,7 +1,9 @@ +$breakpoint-mobile: 0; $breakpoint-tablet: 48em !default; // 768px $breakpoint-desktop: 80em !default; // 1280px $breakpoints: ( + mobile: $breakpoint-mobile, tablet: $breakpoint-tablet, desktop: $breakpoint-desktop, ) !default; diff --git a/packages/design-tokens/src/scss/_layout.scss b/packages/design-tokens/src/scss/_layout.scss new file mode 100644 index 0000000000..5eb80e7271 --- /dev/null +++ b/packages/design-tokens/src/scss/_layout.scss @@ -0,0 +1,13 @@ +@use 'spacing'; + +$container-padding-mobile: spacing.$space-6 !default; +$container-padding-tablet: spacing.$space-8 !default; +$container-padding-desktop: spacing.$space-8 !default; + +$container-paddings: ( + mobile: $container-padding-mobile, + tablet: $container-padding-tablet, + desktop: $container-padding-desktop, +) !default; + +$container-max-width: 80rem !default; diff --git a/packages/design-tokens/src/scss/index.scss b/packages/design-tokens/src/scss/index.scss index fcdf842bae..f0e50719ea 100644 --- a/packages/design-tokens/src/scss/index.scss +++ b/packages/design-tokens/src/scss/index.scss @@ -1,6 +1,7 @@ @forward 'borders'; @forward 'breakpoints'; @forward 'colors'; +@forward 'layout'; @forward 'radii'; @forward 'shadows'; @forward 'spacing'; diff --git a/packages/web/src/components/Container/README.md b/packages/web/src/components/Container/README.md new file mode 100644 index 0000000000..d9180165d9 --- /dev/null +++ b/packages/web/src/components/Container/README.md @@ -0,0 +1,7 @@ +# Container + +Container centers your content horizontally and sets its max-width with horizontal paddings. + +```html +
Content
+``` diff --git a/packages/web/src/components/Container/_Container.scss b/packages/web/src/components/Container/_Container.scss new file mode 100644 index 0000000000..1c50e9eec5 --- /dev/null +++ b/packages/web/src/components/Container/_Container.scss @@ -0,0 +1,11 @@ +@use 'theme'; +@use 'tools'; + +.Container { + width: 100%; + max-width: theme.$container-max-width; + margin-inline: auto; + box-sizing: border-box; + + @include tools.paddings(theme.$container-paddings, theme.$container-breakpoints); +} diff --git a/packages/web/src/components/Container/_theme.scss b/packages/web/src/components/Container/_theme.scss new file mode 100644 index 0000000000..acc7452ee3 --- /dev/null +++ b/packages/web/src/components/Container/_theme.scss @@ -0,0 +1,5 @@ +@use '@tokens' as tokens; + +$container-max-width: tokens.$container-max-width; +$container-paddings: tokens.$container-paddings; +$container-breakpoints: tokens.$breakpoints; diff --git a/packages/web/src/components/Container/_tools.scss b/packages/web/src/components/Container/_tools.scss new file mode 100644 index 0000000000..cc7a788c92 --- /dev/null +++ b/packages/web/src/components/Container/_tools.scss @@ -0,0 +1,11 @@ +@use 'sass:map'; +@use '@tokens' as tokens; +@use '../../tools/breakpoint'; + +@mixin paddings($paddings, $breakpoints) { + @each $name, $breakpoint in $breakpoints { + @include breakpoint.up($breakpoint) { + padding-inline: map.get($paddings, $name); + } + } +} diff --git a/packages/web/src/components/Container/index.scss b/packages/web/src/components/Container/index.scss new file mode 100644 index 0000000000..678f650fd3 --- /dev/null +++ b/packages/web/src/components/Container/index.scss @@ -0,0 +1 @@ +@forward 'Container'; diff --git a/packages/web/src/components/Tag/README.md b/packages/web/src/components/Tag/README.md index 2fddc917cd..040442374b 100644 --- a/packages/web/src/components/Tag/README.md +++ b/packages/web/src/components/Tag/README.md @@ -19,16 +19,16 @@ Available variants are: - danger-dark ```html -Discount -Discount -Discount -Discount -Discount -Discount -Discount -Discount -Discount -Discount +Discount +Discount +Discount +Discount +Discount +Discount +Discount +Discount +Discount +Discount ``` ## Theming diff --git a/packages/web/src/components/index.scss b/packages/web/src/components/index.scss index 308170a1e4..1aaf4bfb88 100644 --- a/packages/web/src/components/index.scss +++ b/packages/web/src/components/index.scss @@ -1,2 +1,3 @@ @forward 'Button'; +@forward 'Container'; @forward 'Tag'; diff --git a/packages/web/src/tools/_breakpoint.scss b/packages/web/src/tools/_breakpoint.scss new file mode 100644 index 0000000000..bf91067777 --- /dev/null +++ b/packages/web/src/tools/_breakpoint.scss @@ -0,0 +1,9 @@ +@mixin up($breakpointValue) { + @if $breakpointValue > 0 { + @media (min-width: $breakpointValue) { + @content; + } + } @else { + @content; + } +} From 6f635c387cd89fc4ec0743a04a185f891d69042c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jan=20Kry=C5=A1p=C3=ADn?= Date: Tue, 25 Jan 2022 22:12:49 +0100 Subject: [PATCH 2/2] Chore: Add missing Stylelint Prettier Config --- .stylelintrc | 2 +- packages/web/package.json | 1 + yarn.lock | 5 +++++ 3 files changed, 7 insertions(+), 1 deletion(-) diff --git a/.stylelintrc b/.stylelintrc index d977c2a66b..966811a0f6 100644 --- a/.stylelintrc +++ b/.stylelintrc @@ -1,3 +1,3 @@ { - "extends": ["@lmc-eu/stylelint-config", "@lmc-eu/stylelint-config/optional"] + "extends": ["@lmc-eu/stylelint-config", "@lmc-eu/stylelint-config/optional", "stylelint-config-prettier"] } diff --git a/packages/web/package.json b/packages/web/package.json index 704110f2c7..9c76ded087 100644 --- a/packages/web/package.json +++ b/packages/web/package.json @@ -35,6 +35,7 @@ "postcss-cli": "8.3.1", "sass": "1.49.0", "stylelint": "13.13.1", + "stylelint-config-prettier": "^9.0.3", "stylelint-order": "4.1.0" } } diff --git a/yarn.lock b/yarn.lock index 401f7371a5..116e9c9660 100644 --- a/yarn.lock +++ b/yarn.lock @@ -13625,6 +13625,11 @@ style-to-object@0.3.0, style-to-object@^0.3.0: dependencies: inline-style-parser "0.1.1" +stylelint-config-prettier@^9.0.3: + version "9.0.3" + resolved "https://registry.yarnpkg.com/stylelint-config-prettier/-/stylelint-config-prettier-9.0.3.tgz#0dccebeff359dcc393c9229184408b08964d561c" + integrity sha512-5n9gUDp/n5tTMCq1GLqSpA30w2sqWITSSEiAWQlpxkKGAUbjcemQ0nbkRvRUa0B1LgD3+hCvdL7B1eTxy1QHJg== + stylelint-config-recommended@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/stylelint-config-recommended/-/stylelint-config-recommended-3.0.0.tgz#e0e547434016c5539fe2650afd58049a2fd1d657"