diff --git a/packages/web/src/scss/components/ActionGroup/ActionGroup.scss b/packages/web/src/scss/components/ActionGroup/ActionGroup.scss new file mode 100644 index 0000000000..f2dccf9448 --- /dev/null +++ b/packages/web/src/scss/components/ActionGroup/ActionGroup.scss @@ -0,0 +1,57 @@ +@use 'sass:map'; +@use 'theme' as theme; +@use '../../tools/breakpoint'; +@use '../../tools/dictionaries'; +@use '../../tools/responsive-properties'; + +.ActionGroup { + display: flex; + justify-content: left; + + @include responsive-properties.create-cascade( + $property: 'column-gap', + $input-custom-property-base-name: 'flex-spacing-x', + $breakpoints: theme.$breakpoints, + $fallback-value: theme.$default-gap + ); + @include responsive-properties.create-cascade( + $property: 'row-gap', + $input-custom-property-base-name: 'flex-spacing-y', + $breakpoints: theme.$breakpoints, + $fallback-value: theme.$default-gap + ); +} + +@each $breakpoint-name, $breakpoint-value in theme.$breakpoints { + $infix: breakpoint.get-modifier('infix', $breakpoint-name, $breakpoint-value); + + @include breakpoint.up($breakpoint-value) { + .ActionGroup--#{$infix}row { + flex-direction: row; + } + + .ActionGroup--#{$infix}rowReverse { + flex-direction: row-reverse; + } + + .ActionGroup--#{$infix}column { + flex-direction: column; + } + + .ActionGroup--#{$infix}columnReverse { + flex-direction: column-reverse; + } + + .ActionGroup--#{$infix}column, + .ActionGroup--#{$infix}columnReverse { + width: 100%; + } + + @include dictionaries.generate-alignments( + $class-name: 'ActionGroup', + $dictionary-values: theme.$alignment-x-dictionary, + $axis: 'x', + $infix: $infix + ); + } +} diff --git a/packages/web/src/scss/components/ActionGroup/README.md b/packages/web/src/scss/components/ActionGroup/README.md new file mode 100644 index 0000000000..e7a7d420f5 --- /dev/null +++ b/packages/web/src/scss/components/ActionGroup/README.md @@ -0,0 +1 @@ +# ActionGroup \ No newline at end of file diff --git a/packages/web/src/scss/components/ActionGroup/_theme.scss b/packages/web/src/scss/components/ActionGroup/_theme.scss new file mode 100644 index 0000000000..af8df307ac --- /dev/null +++ b/packages/web/src/scss/components/ActionGroup/_theme.scss @@ -0,0 +1,6 @@ +@use '@tokens' as tokens; +@use '../../settings/dictionaries'; + +$alignment-x-dictionary: dictionaries.$alignments-x; +$breakpoints: tokens.$breakpoints; +$default-gap: tokens.$space-700; diff --git a/packages/web/src/scss/components/ActionGroup/index.html b/packages/web/src/scss/components/ActionGroup/index.html new file mode 100644 index 0000000000..5affa6fd58 --- /dev/null +++ b/packages/web/src/scss/components/ActionGroup/index.html @@ -0,0 +1,197 @@ +{{#> web/layout/default title="Action Group" parentPageName="Components" }} + +
+
+

Row Layout

+
+ +
+ Primary Action + Secondary Action + Tertiary Action +
+ +
+
+
+ +
+
+

Row Reverse Layout

+
+ +
+ Primary Action + Secondary Action + Tertiary Action +
+ +
+
+
+ +
+
+

Column Layout

+
+ +
+ Primary Action + Secondary Action + Tertiary Action +
+ +
+
+
+ +
+
+

Column Reverse Layout

+
+ +
+ Primary Action + Secondary Action + Tertiary Action +
+ +
+
+
+ +
+
+

Responsive Row Reverse Layout

+
+ +
+ Primary Action + Secondary Action + Tertiary Action +
+ +
+
+
+ +
+
+

Responsive Row → Column Layout

+
+ +
+ Primary Action + Secondary Action + Tertiary Action +
+ +
+
+
+ +
+
+

Horizontal Alignment

+
+ +
+ Primary Action + Secondary Action + Tertiary Action +
+ +
+ Primary Action + Secondary Action + Tertiary Action +
+ +
+ Primary Action + Secondary Action + Tertiary Action +
+ +
+
+
+ +
+
+

Responsive Horizontal Alignment

+
+ +
+ Primary Action + Secondary Action + Tertiary Action +
+ +
+
+
+ +
+
+

Custom Horizontal Spacing

+
+ +
+ Primary Action + Secondary Action + Tertiary Action +
+ +
+
+
+ +
+
+

Custom Vertical Spacing

+
+ +
+ Primary Action + Secondary Action + Tertiary Action +
+ +
+
+
+ +
+
+

Responsive Custom Horizontal Spacing

+
+ +
+ Primary Action + Secondary Action + Tertiary Action +
+ +
+
+
+ +
+
+

Responsive Custom Vertical Spacing

+
+ +
+ Primary Action + Secondary Action + Tertiary Action +
+ +
+
+
+ +{{/web/layout/default }} diff --git a/packages/web/src/scss/components/ActionGroup/index.scss b/packages/web/src/scss/components/ActionGroup/index.scss new file mode 100644 index 0000000000..1e8b3ad8d6 --- /dev/null +++ b/packages/web/src/scss/components/ActionGroup/index.scss @@ -0,0 +1 @@ +@forward 'ActionGroup'; diff --git a/packages/web/src/scss/components/index.scss b/packages/web/src/scss/components/index.scss index 13a2888365..8cd8ac62b0 100644 --- a/packages/web/src/scss/components/index.scss +++ b/packages/web/src/scss/components/index.scss @@ -1,5 +1,6 @@ // This code is commented out until we switch it to the new token system @forward 'Accordion'; +@forward 'ActionGroup'; @forward 'Alert'; @forward 'Breadcrumbs'; @forward 'Button';