From e8cd86f069315436db22abfc6ee6fe4185536c97 Mon Sep 17 00:00:00 2001 From: Benjamin Speare Date: Mon, 25 Mar 2024 11:42:23 -0500 Subject: [PATCH 01/12] Added container queries for left right cards. --- src/scss/components/card.scss | 27 +++++++++++++++++++++++++++ 1 file changed, 27 insertions(+) diff --git a/src/scss/components/card.scss b/src/scss/components/card.scss index baa99125b7..fdc97380bf 100755 --- a/src/scss/components/card.scss +++ b/src/scss/components/card.scss @@ -301,6 +301,16 @@ } } + @supports (contain: inline-size) { + @container column (max-width: #{$break-xxsm}) { + flex-direction: column; + display: block; + .media__inner { + margin: -2rem -2rem 2rem; + } + } + } + > * { flex-basis: 100%; } @@ -351,12 +361,21 @@ margin-right: 2rem; } } + @supports (contain: inline-size) { + @container column (max-width: #{$break-xxsm}) { + .media__inner, + .media--circle .media__inner { + margin-right: -2rem; + } + } + } } // === End: Layout left === // // === Layout right === // .card--layout-right { @include breakpoint(sm) { + flex-direction: row-reverse; .media__inner, @@ -365,6 +384,14 @@ margin-left: 2rem; } } + @supports (contain: inline-size) { + @container column (max-width: #{$break-xxsm}) { + .media__inner, + .media--circle .media__inner { + margin-left: -2rem; + } + } + } } // === End: Layout right === // From 8fc16f35fac5609a96de737da0311b3be8ed9eac Mon Sep 17 00:00:00 2001 From: Benjamin Speare Date: Tue, 26 Mar 2024 14:08:20 -0500 Subject: [PATCH 02/12] Fixed max-width for card images widescreen and square. --- src/scss/components/card.scss | 24 ++++++++++++++++++++---- 1 file changed, 20 insertions(+), 4 deletions(-) diff --git a/src/scss/components/card.scss b/src/scss/components/card.scss index fdc97380bf..1003cabfa8 100755 --- a/src/scss/components/card.scss +++ b/src/scss/components/card.scss @@ -323,12 +323,22 @@ @include breakpoint(sm) { max-width: 11.375rem; } + @supports (contain: inline-size) { + @container column (max-width: #{$break-xxsm}) { + max-width: 100%; + } + } } .media--small.media--widescreen { @include breakpoint(sm) { max-width: 15.625rem; } + @supports (contain: inline-size) { + @container column (max-width: #{$break-xxsm}) { + max-width: 100%; + } + } } .media--medium { @@ -363,10 +373,13 @@ } @supports (contain: inline-size) { @container column (max-width: #{$break-xxsm}) { - .media__inner, - .media--circle .media__inner { + .media__inner { margin-right: -2rem; } + .media--circle .media__inner { + margin-right: 2rem; + margin-left: 2rem; + } } } } @@ -386,10 +399,13 @@ } @supports (contain: inline-size) { @container column (max-width: #{$break-xxsm}) { - .media__inner, - .media--circle .media__inner { + .media__inner { margin-left: -2rem; } + .media--circle .media__inner { + margin-right: 2rem; + margin-left: 2rem; + } } } } From 8484cf04e5e9333e1c38a8cc0b205ac04c46804f Mon Sep 17 00:00:00 2001 From: Benjamin Speare Date: Tue, 26 Mar 2024 14:20:30 -0500 Subject: [PATCH 03/12] Remove margin if borderless. --- src/scss/components/card.scss | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/src/scss/components/card.scss b/src/scss/components/card.scss index 1003cabfa8..c83f8af26f 100755 --- a/src/scss/components/card.scss +++ b/src/scss/components/card.scss @@ -231,6 +231,11 @@ @include breakpoint(sm) { margin-right: 2rem; } + @supports (contain: inline-size) { + @container column (max-width: #{$break-xxsm}) { + margin-right: 0; + } + } } } @@ -239,6 +244,11 @@ @include breakpoint(sm) { margin-left: 2rem; } + @supports (contain: inline-size) { + @container column (max-width: #{$break-xxsm}) { + margin-left: 0; + } + } } } } From 7796ce4c1853549a09899a39c31866706ec4f3b0 Mon Sep 17 00:00:00 2001 From: Benjamin Speare Date: Wed, 27 Mar 2024 09:48:20 -0500 Subject: [PATCH 04/12] Added column container class. --- src/scss/layout/_grid.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/scss/layout/_grid.scss b/src/scss/layout/_grid.scss index 93ab839bb2..a83bef3b7e 100644 --- a/src/scss/layout/_grid.scss +++ b/src/scss/layout/_grid.scss @@ -59,7 +59,8 @@ // Declare which containers to query. @supports (contain: inline-size) { - .grid__column { + .grid__column, + .column-container { container-type: inline-size; container-name: column; } From 12872c67cc2fc4c8346f2e252cf5525f65706ea2 Mon Sep 17 00:00:00 2001 From: Benjamin Speare Date: Mon, 1 Apr 2024 10:54:52 -0500 Subject: [PATCH 05/12] Adjusted container queries to operate as replacement for media queries. --- src/scss/components/card.scss | 123 +++++++++++++++++++--------------- 1 file changed, 68 insertions(+), 55 deletions(-) diff --git a/src/scss/components/card.scss b/src/scss/components/card.scss index c83f8af26f..902e944ce8 100755 --- a/src/scss/components/card.scss +++ b/src/scss/components/card.scss @@ -228,11 +228,13 @@ &.card--layout-left { .media__inner { - @include breakpoint(sm) { - margin-right: 2rem; + @supports not (contain: inline-size) { + @include breakpoint(sm) { + margin-right: 2rem; + } } @supports (contain: inline-size) { - @container column (max-width: #{$break-xxsm}) { + @container column (min-width: #{$break-xxsm}) { margin-right: 0; } } @@ -241,11 +243,13 @@ &.card--layout-right { .media__inner { - @include breakpoint(sm) { - margin-left: 2rem; + @supports not (contain: inline-size) { + @include breakpoint(sm) { + margin-left: 2rem; + } } @supports (contain: inline-size) { - @container column (max-width: #{$break-xxsm}) { + @container column (min-width: #{$break-xxsm}) { margin-left: 0; } } @@ -295,31 +299,35 @@ // === Layout left and layout right shared === // .card--layout-left, .card--layout-right { - .media__inner { - } - @include breakpoint(sm) { - display: flex; - flex-direction: row; - width: 100%; + @supports not (contain: inline-size) { + @include breakpoint(sm) { + display: flex; + flex-direction: row; + width: 100%; - .media__inner { - margin-bottom: 0; - margin-left: 0; - margin-right: 0; - margin-top: 0; + .media__inner { + margin-bottom: 0; + margin-left: 0; + margin-right: 0; + margin-top: 0; + } } } @supports (contain: inline-size) { - @container column (max-width: #{$break-xxsm}) { - flex-direction: column; - display: block; - .media__inner { - margin: -2rem -2rem 2rem; - } + @container column (min-width: #{$break-xxsm}) { + flex-direction: row; + display: flex; + width: 100%; + .media__inner { + margin-bottom: 0; + margin-left: 0; + margin-right: 0; + margin-top: 0; } } + } > * { flex-basis: 100%; @@ -330,23 +338,27 @@ } .media--small.media--square { - @include breakpoint(sm) { - max-width: 11.375rem; + @supports not (contain: inline-size) { + @include breakpoint(sm) { + max-width: 11.375rem; + } } @supports (contain: inline-size) { - @container column (max-width: #{$break-xxsm}) { - max-width: 100%; + @container column (min-width: #{$break-xxsm}) { + max-width: 11.375rem; } } } .media--small.media--widescreen { - @include breakpoint(sm) { - max-width: 15.625rem; + @supports not (contain: inline-size) { + @include breakpoint(sm) { + max-width: 15.625rem; + } } @supports (contain: inline-size) { - @container column (max-width: #{$break-xxsm}) { - max-width: 100%; + @container column (min-width: #{$break-xxsm}) { + max-width: 15.625rem; } } } @@ -372,23 +384,25 @@ // === Layout left === // .card--layout-left { - @include breakpoint(sm) { - flex-direction: row; + @supports not (contain: inline-size) { + @include breakpoint(sm) { + flex-direction: row; - .media__inner, - // Add margin back in for media--circle since we removed it before. - .media--circle .media__inner { - margin-right: 2rem; + .media__inner, + // Add margin back in for media--circle since we removed it before. + .media--circle .media__inner { + margin-right: 2rem; + } } } @supports (contain: inline-size) { - @container column (max-width: #{$break-xxsm}) { - .media__inner { - margin-right: -2rem; - } + @container column (min-width: #{$break-xxsm}) { + flex-direction: row; + + .media__inner, + // Add margin back in for media--circle since we removed it before. .media--circle .media__inner { margin-right: 2rem; - margin-left: 2rem; } } } @@ -397,23 +411,22 @@ // === Layout right === // .card--layout-right { - @include breakpoint(sm) { - - flex-direction: row-reverse; - - .media__inner, - // Add margin back in for media--circle since we removed it before. - .media--circle .media__inner { - margin-left: 2rem; + @supports not (contain: inline-size) { + @include breakpoint(sm) { + flex-direction: row-reverse; + .media__inner, + // Add margin back in for media--circle since we removed it before. + .media--circle .media__inner { + margin-left: 2rem; + } } } @supports (contain: inline-size) { - @container column (max-width: #{$break-xxsm}) { - .media__inner { - margin-left: -2rem; - } + @container column (min-width: #{$break-xxsm}) { + flex-direction: row-reverse; + .media__inner, + // Add margin back in for media--circle since we removed it before. .media--circle .media__inner { - margin-right: 2rem; margin-left: 2rem; } } From 742d5a5a2a49a9fa50e5837d20e39e5fc1655eba Mon Sep 17 00:00:00 2001 From: Benjamin Speare Date: Mon, 1 Apr 2024 11:07:18 -0500 Subject: [PATCH 06/12] Missed these two. --- src/scss/components/card.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/scss/components/card.scss b/src/scss/components/card.scss index 902e944ce8..87b3db5c6c 100755 --- a/src/scss/components/card.scss +++ b/src/scss/components/card.scss @@ -235,7 +235,7 @@ } @supports (contain: inline-size) { @container column (min-width: #{$break-xxsm}) { - margin-right: 0; + margin-right: 2rem; } } } @@ -250,7 +250,7 @@ } @supports (contain: inline-size) { @container column (min-width: #{$break-xxsm}) { - margin-left: 0; + margin-left: 2rem; } } } From 257e3ff16390aaa8fbcc9794731878abeccff6ce Mon Sep 17 00:00:00 2001 From: Benjamin Speare Date: Mon, 1 Apr 2024 11:15:44 -0500 Subject: [PATCH 07/12] Adjusted max-width override for only browsers that don't support inline-size. --- src/scss/components/card.scss | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/scss/components/card.scss b/src/scss/components/card.scss index 87b3db5c6c..9791a36df4 100755 --- a/src/scss/components/card.scss +++ b/src/scss/components/card.scss @@ -365,8 +365,10 @@ .media--medium { &.media--circle { - @include breakpoint(sm) { - max-width: none; + @supports not (contain: inline-size) { + @include breakpoint(sm) { + max-width: none; + } } } @include breakpoint(sm) { From 0bbe90fe346fcad12b5d0555828a6091e7586ef3 Mon Sep 17 00:00:00 2001 From: Sean Adams-Hiett Date: Mon, 1 Apr 2024 15:20:57 -0500 Subject: [PATCH 08/12] Added 4-column class and re-organized grid style rules. --- src/scss/layout/_grid.scss | 38 ++++++++++++++++++++++++-------------- 1 file changed, 24 insertions(+), 14 deletions(-) diff --git a/src/scss/layout/_grid.scss b/src/scss/layout/_grid.scss index a83bef3b7e..ccf54d8632 100644 --- a/src/scss/layout/_grid.scss +++ b/src/scss/layout/_grid.scss @@ -1,22 +1,36 @@ @import '../abstracts/variables'; @import '../abstracts/utilities'; -.grid--threecol--33-34-33 { +.grid--onecol { + .list-container__inner { + max-width: 81.875em; + margin: 0 auto; + } +} + +.grid--onecol__narrow { + .list-container__inner { + max-width: 63.75em; + margin: 0 auto; + } +} + +.grid--twocol--50-50 { .list-container__inner { gap: $mobile-height-gutter; @include grid-base; @include breakpoint(sm) { - @include threecol-grid; + @include twocol-grid; } } } -.grid--twocol--50-50 { +.grid--threecol--33-34-33 { .list-container__inner { gap: $mobile-height-gutter; @include grid-base; @include breakpoint(sm) { - @include twocol-grid; + @include threecol-grid; } } } @@ -43,17 +57,13 @@ } } -.grid--onecol { - .list-container__inner { - max-width: 81.875em; - margin: 0 auto; - } -} - -.grid--onecol__narrow { +.grid--fourcol--25 { .list-container__inner { - max-width: 63.75em; - margin: 0 auto; + gap: $mobile-height-gutter; + @include grid-base; + @include breakpoint(sm) { + @include fourcol-grid; + } } } From 2e8e6e860a277a0e6e3c86baac3d97a99ffebe08 Mon Sep 17 00:00:00 2001 From: Benjamin Speare Date: Mon, 1 Apr 2024 15:46:31 -0500 Subject: [PATCH 09/12] Lowered min-width for media. --- src/scss/components/card.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/scss/components/card.scss b/src/scss/components/card.scss index 9791a36df4..bc14b6665c 100755 --- a/src/scss/components/card.scss +++ b/src/scss/components/card.scss @@ -96,7 +96,7 @@ > .media { margin-top: 0; text-align: center; - min-width: 9.375rem; + min-width: 7.7rem; img { width: 100%; From c496b8f03cecd4a7f28b9023ce375aa5851110d2 Mon Sep 17 00:00:00 2001 From: Sean Adams-Hiett Date: Mon, 1 Apr 2024 16:19:23 -0500 Subject: [PATCH 10/12] Made the grid option into a selectable widget. --- src/components/card/Card.stories.js | 37 +++++++++++++++++++++++++---- 1 file changed, 33 insertions(+), 4 deletions(-) diff --git a/src/components/card/Card.stories.js b/src/components/card/Card.stories.js index 9789ecacf8..39755b7071 100644 --- a/src/components/card/Card.stories.js +++ b/src/components/card/Card.stories.js @@ -176,6 +176,35 @@ export default { category: 'Container', }, }, + grid_type: { + name: 'Grid', + options: [ + 'onecol', + 'onecol__narrow', + 'twocol--50-50', + 'threecol--33-34-33', + 'fourcol--25', + ], + control: { + type: 'select', + labels: { + 'onecol': 'One column', + 'onecol__narrow': 'One column (narrow)', + 'twocol--50-50': 'Two columns', + 'threecol--33-34-33': 'Three columns', + 'fourcol--25': 'Four columns', + } + }, + table: { + category: 'Container', + }, + }, + record_count: { + name: '# of records', + table: { + category: 'Container', + }, + } }, }; @@ -346,8 +375,8 @@ const GridTemplate = (args) => ({ // And then the `args` are bound to your component with `v-bind="args"` template: `
- - + + ({ export const Grid3Columns = GridTemplate.bind({}) Grid3Columns.args = { ...Default.args, - type: 'threecol--33-34-33', - records: 3, + grid_type: 'threecol--33-34-33', + record_count: 3, } From d313db470c36cc2bcdd55f2e893c6d485d5a3829 Mon Sep 17 00:00:00 2001 From: Sean Adams-Hiett Date: Mon, 1 Apr 2024 16:21:29 -0500 Subject: [PATCH 11/12] Renamed grid story. --- src/components/card/Card.stories.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/card/Card.stories.js b/src/components/card/Card.stories.js index 39755b7071..ab003d308f 100644 --- a/src/components/card/Card.stories.js +++ b/src/components/card/Card.stories.js @@ -404,8 +404,8 @@ const GridTemplate = (args) => ({ `, }) -export const Grid3Columns = GridTemplate.bind({}) -Grid3Columns.args = { +export const Grid = GridTemplate.bind({}) +Grid.args = { ...Default.args, grid_type: 'threecol--33-34-33', record_count: 3, From e8c79c9d066a3ee1844c51ceab5b01ad5fddf0fb Mon Sep 17 00:00:00 2001 From: Sean Adams-Hiett Date: Tue, 2 Apr 2024 17:24:27 -0500 Subject: [PATCH 12/12] Added a mixin to reduce redundancy. --- src/scss/components/card.scss | 142 ++++++++++------------------------ 1 file changed, 43 insertions(+), 99 deletions(-) diff --git a/src/scss/components/card.scss b/src/scss/components/card.scss index bc14b6665c..d03f7438f8 100755 --- a/src/scss/components/card.scss +++ b/src/scss/components/card.scss @@ -2,6 +2,20 @@ @import '../abstracts/utilities'; @import 'border'; + +@mixin container-query() { + @supports (contain: inline-size) { + @container column (min-width: #{$break-xxsm}) { + @content + } + } + @supports not (contain: inline-size) { + @include breakpoint(sm) { + @content + } + } +} + // === Card === // .card { position: relative; @@ -228,30 +242,16 @@ &.card--layout-left { .media__inner { - @supports not (contain: inline-size) { - @include breakpoint(sm) { - margin-right: 2rem; - } - } - @supports (contain: inline-size) { - @container column (min-width: #{$break-xxsm}) { - margin-right: 2rem; - } + @include container-query() { + margin-right: 2rem; } } } &.card--layout-right { .media__inner { - @supports not (contain: inline-size) { - @include breakpoint(sm) { - margin-left: 2rem; - } - } - @supports (contain: inline-size) { - @container column (min-width: #{$break-xxsm}) { - margin-left: 2rem; - } + @include container-query() { + margin-left: 2rem; } } } @@ -299,33 +299,16 @@ // === Layout left and layout right shared === // .card--layout-left, .card--layout-right { + @include container-query() { + display: flex; + flex-direction: row; + width: 100%; - @supports not (contain: inline-size) { - @include breakpoint(sm) { - display: flex; - flex-direction: row; - width: 100%; - - .media__inner { - margin-bottom: 0; - margin-left: 0; - margin-right: 0; - margin-top: 0; - } - } - } - - @supports (contain: inline-size) { - @container column (min-width: #{$break-xxsm}) { - flex-direction: row; - display: flex; - width: 100%; - .media__inner { - margin-bottom: 0; - margin-left: 0; - margin-right: 0; - margin-top: 0; - } + .media__inner { + margin-bottom: 0; + margin-left: 0; + margin-right: 0; + margin-top: 0; } } @@ -338,28 +321,14 @@ } .media--small.media--square { - @supports not (contain: inline-size) { - @include breakpoint(sm) { - max-width: 11.375rem; - } - } - @supports (contain: inline-size) { - @container column (min-width: #{$break-xxsm}) { - max-width: 11.375rem; - } + @include container-query() { + max-width: 11.375rem; } } .media--small.media--widescreen { - @supports not (contain: inline-size) { - @include breakpoint(sm) { - max-width: 15.625rem; - } - } - @supports (contain: inline-size) { - @container column (min-width: #{$break-xxsm}) { - max-width: 15.625rem; - } + @include container-query() { + max-width: 15.625rem; } } @@ -386,26 +355,13 @@ // === Layout left === // .card--layout-left { - @supports not (contain: inline-size) { - @include breakpoint(sm) { - flex-direction: row; + @include container-query() { + flex-direction: row; - .media__inner, - // Add margin back in for media--circle since we removed it before. - .media--circle .media__inner { - margin-right: 2rem; - } - } - } - @supports (contain: inline-size) { - @container column (min-width: #{$break-xxsm}) { - flex-direction: row; - - .media__inner, - // Add margin back in for media--circle since we removed it before. - .media--circle .media__inner { - margin-right: 2rem; - } + .media__inner, + // Add margin back in for media--circle since we removed it before. + .media--circle .media__inner { + margin-right: 2rem; } } } @@ -413,24 +369,12 @@ // === Layout right === // .card--layout-right { - @supports not (contain: inline-size) { - @include breakpoint(sm) { - flex-direction: row-reverse; - .media__inner, - // Add margin back in for media--circle since we removed it before. - .media--circle .media__inner { - margin-left: 2rem; - } - } - } - @supports (contain: inline-size) { - @container column (min-width: #{$break-xxsm}) { - flex-direction: row-reverse; - .media__inner, - // Add margin back in for media--circle since we removed it before. - .media--circle .media__inner { - margin-left: 2rem; - } + @include container-query() { + flex-direction: row-reverse; + .media__inner, + // Add margin back in for media--circle since we removed it before. + .media--circle .media__inner { + margin-left: 2rem; } } }