-
Notifications
You must be signed in to change notification settings - Fork 60
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* chore: extracted HTML from js files [ci visual] * chore: improved type safety in visual stories executor [ci visual] * chore: improved type safety in build theming preview executor [ci visual] * chore: replaced glob usages with fast-glob [ci visual] * chore: removed unused list-fn-icons script [ci visual] * chore: created executor for syncing the entry for the libraries [ci visual]
- Loading branch information
1 parent
697b53f
commit 9dc199e
Showing
93 changed files
with
1,942 additions
and
1,895 deletions.
There are no files selected for viewing
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
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
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
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 |
|---|---|---|
| @@ -1,17 +1,23 @@ | ||
| @import "./common-settings"; | ||
| @import "../../styles/src/layout-grid"; | ||
| @import "./sap-display.scss"; | ||
| @import "./sap-typography.scss"; | ||
| @import "./sap-content-paddings.scss"; | ||
| @import "./sap-shadow.scss"; | ||
| @import "./sap-margin.scss"; | ||
| @import "./sap-flex.scss"; | ||
| @import "./sap-padding.scss"; | ||
| @import "./sap-border-radius.scss"; | ||
| @import "./sap-elevation.scss"; | ||
| @import "./sap-overflow.scss"; | ||
| @import "./sap-colors.scss"; | ||
| @import "./sap-position.scss"; | ||
| @import "./sap-tool-layout.scss"; | ||
| @import "./sap-busy-indicator.scss"; | ||
| @import "./sap-text.scss"; | ||
| /* Do not modify manually, this file is being generated by workspace-plugins:sync-components executor */ | ||
| @import './../../styles/src/layout-grid'; | ||
| @import './common-settings'; | ||
| @import './sap-border-radius'; | ||
| @import './sap-busy-indicator'; | ||
| @import './sap-colors'; | ||
| @import './sap-container-type'; | ||
| @import './sap-content-paddings'; | ||
| @import './sap-display'; | ||
| @import './sap-elevation'; | ||
| @import './sap-flex'; | ||
| @import './sap-heading'; | ||
| @import './sap-label'; | ||
| @import './sap-margin'; | ||
| @import './sap-normalize'; | ||
| @import './sap-overflow'; | ||
| @import './sap-padding'; | ||
| @import './sap-position'; | ||
| @import './sap-shadow'; | ||
| @import './sap-sr-only'; | ||
| @import './sap-text'; | ||
| @import './sap-tool-layout'; | ||
| @import './sap-typography'; |
29 changes: 29 additions & 0 deletions
29
packages/common-css/stories/border-radius/border-radius.example.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,29 @@ | ||
| <style> | ||
| div.demo { | ||
| display: flex; | ||
| height: 4rem; | ||
| width: 8rem; | ||
| background: #69ADF8; | ||
| } | ||
| </style> | ||
|
|
||
| <h3>Element</h3> | ||
| <div class="demo sap-border-radius-element"></div> | ||
| <br> | ||
| <h3>Button</h3> | ||
| <div class="demo sap-border-radius-button"></div> | ||
| <br> | ||
| <h3>Field</h3> | ||
| <div class="demo sap-border-radius-field"></div> | ||
| <br> | ||
| <h3>Group</h3> | ||
| <div class="demo sap-border-radius-group"></div> | ||
| <br> | ||
| <h3>Popover</h3> | ||
| <div class="demo sap-border-radius-popover"></div> | ||
| <br> | ||
| <h3>Tile</h3> | ||
| <div class="demo sap-border-radius-tile"></div> | ||
| <br> | ||
| <h3>None</h3> | ||
| <div class="demo sap-border-radius-none"></div> |
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
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,31 @@ | ||
| <div> | ||
| 1. All | ||
|
|
||
| <pre>@include sap-border(0.125rem, solid, #000);</pre> | ||
| <br> | ||
|
|
||
| 2. Top Border | ||
| <pre>@include sap-border(0.125rem, solid, #000, top);</pre> | ||
| <br> | ||
|
|
||
| 3. Bottom Border | ||
| <pre>@include sap-border(0.125rem, solid, #000, bottom);</pre> | ||
| <br> | ||
|
|
||
| 4. Left Border | ||
| <pre>@include sap-border(0.125rem, solid, #000, left);</pre> | ||
| <br> | ||
|
|
||
| 6. Right Border | ||
| <pre>@include sap-border(0.125rem, solid, #000, right);</pre> | ||
| <br> | ||
|
|
||
| 7. Top and Bottom Border (y) | ||
| <pre>@include sap-border(0.125rem, solid, #000, y);</pre> | ||
| <br> | ||
|
|
||
| 8. Left and Right Border (x) | ||
| <pre>@include sap-border(0.125rem, solid, #000, x);</pre> | ||
| <br> | ||
|
|
||
| </div> |
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 |
|---|---|---|
| @@ -1,48 +1,17 @@ | ||
| import borderExampleHtml from "./border.example.html?raw"; | ||
| export default { | ||
| title: 'Border', | ||
| parameters: { | ||
| description: ` | ||
| `, | ||
| } | ||
| }; | ||
|
|
||
| export const Border = () => `<div> | ||
| 1. All | ||
| <pre>@include sap-border(0.125rem, solid, #000);</pre> | ||
| <br> | ||
| 2. Top Border | ||
| <pre>@include sap-border(0.125rem, solid, #000, top);</pre> | ||
| <br> | ||
| 3. Bottom Border | ||
| <pre>@include sap-border(0.125rem, solid, #000, bottom);</pre> | ||
| <br> | ||
| 4. Left Border | ||
| <pre>@include sap-border(0.125rem, solid, #000, left);</pre> | ||
| <br> | ||
| 6. Right Border | ||
| <pre>@include sap-border(0.125rem, solid, #000, right);</pre> | ||
| <br> | ||
| 7. Top and Bottom Border (y) | ||
| <pre>@include sap-border(0.125rem, solid, #000, y);</pre> | ||
| <br> | ||
| 8. Left and Right Border (x) | ||
| <pre>@include sap-border(0.125rem, solid, #000, x);</pre> | ||
| <br> | ||
| </div>`; | ||
| export const Border = () => borderExampleHtml; | ||
| Border.storyName = 'Mixin sap-border'; | ||
| Border.parameters = { | ||
| docs: { | ||
| description: { | ||
| story: 'The <code>sap-border</code> helper mixin allows you to specify the width, style, and color of an element\'s border. This is achieved by providing values to the <code>sap-border</code> parameters: <code>$width</code>, <code>$style</code>, <code>$color</code>, and <code>$pos</code>.<br><br> The <code>$pos</code> value can be one of the following: <code>all | top | bottom | left | right | x | y</code>. The default value is <code>all</code>, which will apply borders on all sides. <code>x</code> will set borders on left and right of the element, and <code>y</code> on top and bottom of the element.' | ||
| } | ||
| docs: { | ||
| description: { | ||
| story: 'The <code>sap-border</code> helper mixin allows you to specify the width, style, and color of an element\'s border. This is achieved by providing values to the <code>sap-border</code> parameters: <code>$width</code>, <code>$style</code>, <code>$color</code>, and <code>$pos</code>.<br><br> The <code>$pos</code> value can be one of the following: <code>all | top | bottom | left | right | x | y</code>. The default value is <code>all</code>, which will apply borders on all sides. <code>x</code> will set borders on left and right of the element, and <code>y</code> on top and bottom of the element.' | ||
| } | ||
| } | ||
| }; | ||
|
|
17 changes: 17 additions & 0 deletions
17
packages/common-css/stories/colors/background-color.example.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,17 @@ | ||
| <h3>brandColor (--sapBrandColor)</h3> | ||
| <div class="demo sap-bg-color-brandColor"></div> | ||
| <br> | ||
| <h3>errorBackground (--sapErrorBackground)</h3> | ||
| <div class="demo sap-bg-color-errorBackground"></div> | ||
| <br> | ||
| <h3>warningBackground (--sapWarningBackground)</h3> | ||
| <div class="demo sap-bg-color-warningBackground"></div> | ||
| <br> | ||
| <h3>successBackground (--sapSuccessBackground)</h3> | ||
| <div class="demo sap-bg-color-successBackground"></div> | ||
| <br> | ||
| <h3>informationBackground (--sapInformationBackground)</h3> | ||
| <div class="demo sap-bg-color-informationBackground"></div> | ||
| <br> | ||
| <h3>neutralBackground (--sapNeutralBackground)</h3> | ||
| <div class="demo sap-bg-color-neutralBackground"></div> |
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
Oops, something went wrong.