From f10796e2eb0f77ca4a069da1690d8dc1dc6b56a5 Mon Sep 17 00:00:00 2001 From: Tyler Sticka Date: Fri, 13 Aug 2021 09:41:27 -0700 Subject: [PATCH] Add responsive variations of spacing utilities --- .changeset/curly-masks-sing.md | 5 + .../team/example/team-article-page2.scss | 26 ----- .../team/example/team-articles-page2.twig | 105 +++++++++--------- src/prototypes/team/team.stories.js | 1 - src/utilities/spacing/demo/responsive.twig | 5 + src/utilities/spacing/spacing.scss | 74 +++++++----- src/utilities/spacing/spacing.stories.mdx | 9 ++ 7 files changed, 121 insertions(+), 104 deletions(-) create mode 100644 .changeset/curly-masks-sing.md delete mode 100644 src/prototypes/team/example/team-article-page2.scss create mode 100644 src/utilities/spacing/demo/responsive.twig diff --git a/.changeset/curly-masks-sing.md b/.changeset/curly-masks-sing.md new file mode 100644 index 000000000..65899efd3 --- /dev/null +++ b/.changeset/curly-masks-sing.md @@ -0,0 +1,5 @@ +--- +'@cloudfour/patterns': minor +--- + +Add responsive variations of spacing utility classes diff --git a/src/prototypes/team/example/team-article-page2.scss b/src/prototypes/team/example/team-article-page2.scss deleted file mode 100644 index 34e8a2bd5..000000000 --- a/src/prototypes/team/example/team-article-page2.scss +++ /dev/null @@ -1,26 +0,0 @@ -@use "../../../mixins/ms"; -@use "../../../compiled/tokens/scss/breakpoint"; - -#team-article-page2 { - - .article-container { - padding-top: ms.step(5); - padding-bottom: ms.step(6); - .article-heading { - padding-bottom: ms.step(1); - } - } - - .main-container { - padding-top: ms.step(5); - padding-bottom: ms.step(6); - - @media (min-width: breakpoint.$l) { - padding-top: ms.step(3); - } - } - - .c-pagination { - padding-top: ms.step(6); - } -} diff --git a/src/prototypes/team/example/team-articles-page2.twig b/src/prototypes/team/example/team-articles-page2.twig index d6a7c4de2..14fb90b7d 100644 --- a/src/prototypes/team/example/team-articles-page2.twig +++ b/src/prototypes/team/example/team-articles-page2.twig @@ -37,15 +37,18 @@ } } only %} - {% embed '@cloudfour/objects/container/container.twig' with { label: avatar.name, class: 'o-container--pad heading-container'} %} + {% embed '@cloudfour/objects/container/container.twig' with { + label: avatar.name, + class: 'o-container--pad' + } %} {% block content %} -
+
{% include '@cloudfour/components/heading/heading.twig' with { level: 0, content: 'Articles by Jason, Page 2', - class: 'c-heading--light article-heading' + class: 'c-heading--light' } only %} -
+
{% include '@cloudfour/objects/deck/demo/articles.twig' with { "items": [ { @@ -127,64 +130,66 @@ "horizontalBreakpoint": "none" } only %}
- {% include '@cloudfour/components/pagination/pagination.twig' with { - "pagination": { - "mid_size": 2, - "current": 2, - "total": 36, - "prev": { - "title": 1, - "text": 1, - "name": 1, - "current": false, - "link": "#page-1" - }, - "next": { - "title": 3, - "text": 3, - "name": 3, - "current": false, - "link": "#page-3" - }, - "pages": [ - { +
+ {% include '@cloudfour/components/pagination/pagination.twig' with { + "pagination": { + "mid_size": 2, + "current": 2, + "total": 36, + "prev": { "title": 1, "text": 1, "name": 1, "current": false, "link": "#page-1" }, - { - "title": 2, - "text": 2, - "name": 2, - "current": true, - "link": false - }, - { + "next": { "title": 3, "text": 3, "name": 3, "current": false, "link": "#page-3" }, - { - "title": 4, - "text": 4, - "name": 4, - "current": false, - "link": "#page-4" - }, - { - "title": 5, - "text": 5, - "name": 5, - "current": false, - "link": "#page-5" - } - ] - } - } only %} + "pages": [ + { + "title": 1, + "text": 1, + "name": 1, + "current": false, + "link": "#page-1" + }, + { + "title": 2, + "text": 2, + "name": 2, + "current": true, + "link": false + }, + { + "title": 3, + "text": 3, + "name": 3, + "current": false, + "link": "#page-3" + }, + { + "title": 4, + "text": 4, + "name": 4, + "current": false, + "link": "#page-4" + }, + { + "title": 5, + "text": 5, + "name": 5, + "current": false, + "link": "#page-5" + } + ] + } + } only %} +
{% endblock %} {% endembed %} diff --git a/src/prototypes/team/team.stories.js b/src/prototypes/team/team.stories.js index 57801cc9c..6bb989fd5 100644 --- a/src/prototypes/team/team.stories.js +++ b/src/prototypes/team/team.stories.js @@ -4,7 +4,6 @@ import teamArticlePage2 from './example/team-articles-page2.twig'; import avatars from './data/avatars.json'; import './example/team-list.scss'; import './example/team-individual.scss'; -import './example/team-article-page2.scss'; export default { title: 'Prototypes/Team Page', diff --git a/src/utilities/spacing/demo/responsive.twig b/src/utilities/spacing/demo/responsive.twig new file mode 100644 index 000000000..ddd53b566 --- /dev/null +++ b/src/utilities/spacing/demo/responsive.twig @@ -0,0 +1,5 @@ +
+
+
u-space-n3 u-space-1@s u-space-3@m u-space-6@l
+
+
diff --git a/src/utilities/spacing/spacing.scss b/src/utilities/spacing/spacing.scss index 45830cfa5..0055c6a3e 100644 --- a/src/utilities/spacing/spacing.scss +++ b/src/utilities/spacing/spacing.scss @@ -1,15 +1,15 @@ -@use 'sass:math'; @use "../../compiled/tokens/scss/scale"; +@use '../../mixins/media-query'; @use '../../mixins/ms'; -@mixin direction-utilities($property, $name, $value) { +@mixin _direction-utilities($property, $name, $value, $suffix: '') { $value: $value !important; @if $property != margin and $property != padding { @error 'Unknown direction utility property #{$property}.'; } - &-#{$name} { + &-#{$name}#{$suffix} { @if $property == margin { margin: $value; } @else { @@ -17,11 +17,9 @@ } } - /** - * Ideally we could use the *-block shorthand, but it is not as well - * supported in browsers. - */ - &-block-#{$name} { + // Ideally we could use the *-block shorthand, but it is not as well supported + // in browsers. + &-block-#{$name}#{$suffix} { @if $property == margin { margin-block-end: $value; margin-block-start: $value; @@ -31,7 +29,7 @@ } } - &-block-start-#{$name} { + &-block-start-#{$name}#{$suffix} { @if $property == margin { margin-block-start: $value; } @else { @@ -39,7 +37,7 @@ } } - &-block-end-#{$name} { + &-block-end-#{$name}#{$suffix} { @if $property == margin { margin-block-end: $value; } @else { @@ -47,11 +45,9 @@ } } - /** - * Ideally we could use the *-inline shorthand, but it is not as well - * supported in browsers. - */ - &-inline-#{$name} { + // Ideally we could use the *-inline shorthand, but it is not as well + // supported in browsers. + &-inline-#{$name}#{$suffix} { @if $property == margin { margin-inline-end: $value; margin-inline-start: $value; @@ -61,7 +57,7 @@ } } - &-inline-start-#{$name} { + &-inline-start-#{$name}#{$suffix} { @if $property == margin { margin-inline-start: $value; } @else { @@ -69,7 +65,7 @@ } } - &-inline-end-#{$name} { + &-inline-end-#{$name}#{$suffix} { @if $property == margin { margin-inline-end: $value; } @else { @@ -78,17 +74,19 @@ } } -@mixin scale-utilities( +@mixin _scale-utilities( $property, $minimum-step: scale.$modular-minimum-step, $maximum-step: scale.$modular-maximum-step, - $base: 1em + $base: 1em, + $suffix: '' ) { @if $property == margin { - @include direction-utilities( + @include _direction-utilities( $property: $property, $name: auto, - $value: auto + $value: auto, + $suffix: $suffix ); } @@ -98,24 +96,46 @@ { $name: ms.step-class-segment($step); - @include direction-utilities( + @include _direction-utilities( $property: $property, $name: $name, - $value: ms.step($step, $base) + $value: ms.step($step, $base), + $suffix: $suffix ); } - @include direction-utilities($property: $property, $name: none, $value: 0); + @include _direction-utilities( + $property: $property, + $name: none, + $value: 0, + $suffix: $suffix + ); } .u-pad { - @include scale-utilities($property: padding); + @include _scale-utilities($property: padding); } .u-space { - @include scale-utilities($property: margin); + @include _scale-utilities($property: margin); } .u-pull { - @include scale-utilities($property: margin, $base: -1em); + @include _scale-utilities($property: margin, $base: -1em); +} + +@include media-query.breakpoint-loop() using ($key) { + $suffix: '\\@#{$key}'; + + .u-pad { + @include _scale-utilities($property: padding, $suffix: $suffix); + } + + .u-space { + @include _scale-utilities($property: margin, $suffix: $suffix); + } + + .u-pull { + @include _scale-utilities($property: margin, $base: -1em, $suffix: $suffix); + } } diff --git a/src/utilities/spacing/spacing.stories.mdx b/src/utilities/spacing/spacing.stories.mdx index 3512b5a38..402f45dd5 100644 --- a/src/utilities/spacing/spacing.stories.mdx +++ b/src/utilities/spacing/spacing.stories.mdx @@ -1,6 +1,7 @@ import { Story, Canvas, Meta } from '@storybook/addon-docs/blocks'; import logicalPropertiesDemo from './demo/logical-properties.twig'; import directionsDemo from './demo/directions.twig'; +import responsiveDemo from './demo/responsive.twig'; import './demo/styles.scss'; import tokens from '../../compiled/tokens/js/tokens'; const minimumStep = tokens.number.scale.modular.minimum_step.value; @@ -118,3 +119,11 @@ The following utilities _pull_ an element one direction or another by applying a })} + +## Responsive spacing + +All of these utilities include responsive variations. Appending `@{breakpoint}` to the end of the class name will cause the utility to change for the given breakpoint. + + + {responsiveDemo()} +