-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Feat(web): Introduce ActionGroup component #DS-1607
- Loading branch information
1 parent
b53a603
commit dac9b57
Showing
6 changed files
with
263 additions
and
0 deletions.
There are no files selected for viewing
57 changes: 57 additions & 0 deletions
57
packages/web/src/scss/components/ActionGroup/ActionGroup.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 | ||
| ); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| # ActionGroup |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; |
197 changes: 197 additions & 0 deletions
197
packages/web/src/scss/components/ActionGroup/index.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,197 @@ | ||
| {{#> web/layout/default title="Action Group" parentPageName="Components" }} | ||
|
|
||
| <section class="UNSTABLE_Section"> | ||
| <div class="Container"> | ||
| <h2 class="docs-Heading">Row Layout</h2> | ||
| <div class="docs-Stack docs-Stack--stretch"> | ||
|
|
||
| <div class="ActionGroup ActionGroup--row"> | ||
| <a href="#" role="button" class="Button Button--primary Button--medium">Primary Action</a> | ||
| <a href="#" role="button" class="Button Button--secondary Button--medium">Secondary Action</a> | ||
| <a href="#" role="button" class="Button Button--tertiary Button--medium">Tertiary Action</a> | ||
| </div> | ||
|
|
||
| </div> | ||
| </div> | ||
| </section> | ||
|
|
||
| <section class="UNSTABLE_Section"> | ||
| <div class="Container"> | ||
| <h2 class="docs-Heading">Row Reverse Layout</h2> | ||
| <div class="docs-Stack docs-Stack--stretch"> | ||
|
|
||
| <div class="ActionGroup ActionGroup--rowReverse"> | ||
| <a href="#" role="button" class="Button Button--primary Button--medium">Primary Action</a> | ||
| <a href="#" role="button" class="Button Button--secondary Button--medium">Secondary Action</a> | ||
| <a href="#" role="button" class="Button Button--tertiary Button--medium">Tertiary Action</a> | ||
| </div> | ||
|
|
||
| </div> | ||
| </div> | ||
| </section> | ||
|
|
||
| <section class="UNSTABLE_Section"> | ||
| <div class="Container"> | ||
| <h2 class="docs-Heading">Column Layout</h2> | ||
| <div class="docs-Stack docs-Stack--stretch"> | ||
|
|
||
| <div class="ActionGroup ActionGroup--column"> | ||
| <a href="#" role="button" class="Button Button--primary Button--medium">Primary Action</a> | ||
| <a href="#" role="button" class="Button Button--secondary Button--medium">Secondary Action</a> | ||
| <a href="#" role="button" class="Button Button--tertiary Button--medium">Tertiary Action</a> | ||
| </div> | ||
|
|
||
| </div> | ||
| </div> | ||
| </section> | ||
|
|
||
| <section class="UNSTABLE_Section"> | ||
| <div class="Container"> | ||
| <h2 class="docs-Heading">Column Reverse Layout</h2> | ||
| <div class="docs-Stack docs-Stack--stretch"> | ||
|
|
||
| <div class="ActionGroup ActionGroup--columnReverse"> | ||
| <a href="#" role="button" class="Button Button--primary Button--medium">Primary Action</a> | ||
| <a href="#" role="button" class="Button Button--secondary Button--medium">Secondary Action</a> | ||
| <a href="#" role="button" class="Button Button--tertiary Button--medium">Tertiary Action</a> | ||
| </div> | ||
|
|
||
| </div> | ||
| </div> | ||
| </section> | ||
|
|
||
| <section class="UNSTABLE_Section"> | ||
| <div class="Container"> | ||
| <h2 class="docs-Heading">Responsive Row Reverse Layout</h2> | ||
| <div class="docs-Stack docs-Stack--stretch"> | ||
|
|
||
| <div class="ActionGroup ActionGroup--rowReverse ActionGroup--tablet--row"> | ||
| <a href="#" role="button" class="Button Button--primary Button--medium">Primary Action</a> | ||
| <a href="#" role="button" class="Button Button--secondary Button--medium">Secondary Action</a> | ||
| <a href="#" role="button" class="Button Button--tertiary Button--medium">Tertiary Action</a> | ||
| </div> | ||
|
|
||
| </div> | ||
| </div> | ||
| </section> | ||
|
|
||
| <section class="UNSTABLE_Section"> | ||
| <div class="Container"> | ||
| <h2 class="docs-Heading">Responsive Row → Column Layout</h2> | ||
| <div class="docs-Stack docs-Stack--stretch"> | ||
|
|
||
| <div class="ActionGroup ActionGroup--column ActionGroup--tablet--row"> | ||
| <a href="#" role="button" class="Button Button--primary Button--medium">Primary Action</a> | ||
| <a href="#" role="button" class="Button Button--secondary Button--medium">Secondary Action</a> | ||
| <a href="#" role="button" class="Button Button--tertiary Button--medium">Tertiary Action</a> | ||
| </div> | ||
|
|
||
| </div> | ||
| </div> | ||
| </section> | ||
|
|
||
| <section class="UNSTABLE_Section"> | ||
| <div class="Container"> | ||
| <h2 class="docs-Heading">Horizontal Alignment</h2> | ||
| <div class="docs-Stack docs-Stack--stretch"> | ||
|
|
||
| <div class="ActionGroup ActionGroup--row ActionGroup--alignmentXLeft"> | ||
| <a href="#" role="button" class="Button Button--primary Button--medium">Primary Action</a> | ||
| <a href="#" role="button" class="Button Button--secondary Button--medium">Secondary Action</a> | ||
| <a href="#" role="button" class="Button Button--tertiary Button--medium">Tertiary Action</a> | ||
| </div> | ||
|
|
||
| <div class="ActionGroup ActionGroup--row ActionGroup--alignmentXCenter"> | ||
| <a href="#" role="button" class="Button Button--primary Button--medium">Primary Action</a> | ||
| <a href="#" role="button" class="Button Button--secondary Button--medium">Secondary Action</a> | ||
| <a href="#" role="button" class="Button Button--tertiary Button--medium">Tertiary Action</a> | ||
| </div> | ||
|
|
||
| <div class="ActionGroup ActionGroup--row ActionGroup--alignmentXRight"> | ||
| <a href="#" role="button" class="Button Button--primary Button--medium">Primary Action</a> | ||
| <a href="#" role="button" class="Button Button--secondary Button--medium">Secondary Action</a> | ||
| <a href="#" role="button" class="Button Button--tertiary Button--medium">Tertiary Action</a> | ||
| </div> | ||
|
|
||
| </div> | ||
| </div> | ||
| </section> | ||
|
|
||
| <section class="UNSTABLE_Section"> | ||
| <div class="Container"> | ||
| <h2 class="docs-Heading">Responsive Horizontal Alignment</h2> | ||
| <div class="docs-Stack docs-Stack--stretch"> | ||
|
|
||
| <div class="ActionGroup ActionGroup--row ActionGroup--alignmentXLeft | ||
| ActionGroup--alignmentXRight | ||
| ActionGroup--tablet--alignmentXCenter ActionGroup--desktop--alignmentXLeft"> | ||
| <a href="#" role="button" class="Button Button--primary Button--medium">Primary Action</a> | ||
| <a href="#" role="button" class="Button Button--secondary Button--medium">Secondary Action</a> | ||
| <a href="#" role="button" class="Button Button--tertiary Button--medium">Tertiary Action</a> | ||
| </div> | ||
|
|
||
| </div> | ||
| </div> | ||
| </section> | ||
|
|
||
| <section class="UNSTABLE_Section"> | ||
| <div class="Container"> | ||
| <h2 class="docs-Heading">Custom Horizontal Spacing</h2> | ||
| <div class="docs-Stack docs-Stack--stretch"> | ||
|
|
||
| <div class="ActionGroup ActionGroup--row" style="--flex-spacing-x: var(--spirit-space-1200)"> | ||
| <a href="#" role="button" class="Button Button--primary Button--medium">Primary Action</a> | ||
| <a href="#" role="button" class="Button Button--secondary Button--medium">Secondary Action</a> | ||
| <a href="#" role="button" class="Button Button--tertiary Button--medium">Tertiary Action</a> | ||
| </div> | ||
|
|
||
| </div> | ||
| </div> | ||
| </section> | ||
|
|
||
| <section class="UNSTABLE_Section"> | ||
| <div class="Container"> | ||
| <h2 class="docs-Heading">Custom Vertical Spacing</h2> | ||
| <div class="docs-Stack docs-Stack--stretch"> | ||
|
|
||
| <div class="ActionGroup ActionGroup--column" style="--flex-spacing-y: var(--spirit-space-1200)"> | ||
| <a href="#" role="button" class="Button Button--primary Button--medium">Primary Action</a> | ||
| <a href="#" role="button" class="Button Button--secondary Button--medium">Secondary Action</a> | ||
| <a href="#" role="button" class="Button Button--tertiary Button--medium">Tertiary Action</a> | ||
| </div> | ||
|
|
||
| </div> | ||
| </div> | ||
| </section> | ||
|
|
||
| <section class="UNSTABLE_Section"> | ||
| <div class="Container"> | ||
| <h2 class="docs-Heading">Responsive Custom Horizontal Spacing</h2> | ||
| <div class="docs-Stack docs-Stack--stretch"> | ||
|
|
||
| <div class="ActionGroup ActionGroup--row" style="--flex-spacing-x: var(--spirit-space-700); --flex-spacing-x-tablet: var(--spirit-space-1200)"> | ||
| <a href="#" role="button" class="Button Button--primary Button--medium">Primary Action</a> | ||
| <a href="#" role="button" class="Button Button--secondary Button--medium">Secondary Action</a> | ||
| <a href="#" role="button" class="Button Button--tertiary Button--medium">Tertiary Action</a> | ||
| </div> | ||
|
|
||
| </div> | ||
| </div> | ||
| </section> | ||
|
|
||
| <section class="UNSTABLE_Section"> | ||
| <div class="Container"> | ||
| <h2 class="docs-Heading">Responsive Custom Vertical Spacing</h2> | ||
| <div class="docs-Stack docs-Stack--stretch"> | ||
|
|
||
| <div class="ActionGroup ActionGroup--column" style="--flex-spacing-y: var(--spirit-space-700); --flex-spacing-y-tablet: var(--spirit-space-1200);"> | ||
| <a href="#" role="button" class="Button Button--primary Button--medium">Primary Action</a> | ||
| <a href="#" role="button" class="Button Button--secondary Button--medium">Secondary Action</a> | ||
| <a href="#" role="button" class="Button Button--tertiary Button--medium">Tertiary Action</a> | ||
| </div> | ||
|
|
||
| </div> | ||
| </div> | ||
| </section> | ||
|
|
||
| {{/web/layout/default }} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| @forward 'ActionGroup'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters