-
Notifications
You must be signed in to change notification settings - Fork 27
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(css-helpers)!: improve color, border, radius, flexbox, visibilit…
…y and showdow helpers
- Loading branch information
Showing
19 changed files
with
382 additions
and
69 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
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
13 changes: 12 additions & 1 deletion
13
packages/components/src/stories/design/01-colors.templates.ts
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,4 +1,15 @@ | ||
| export const ColorHelpers = ` | ||
| <div class="has-background-info p-4"> | ||
| <div class="has-background-blue p-4"> | ||
| <p class="has-text-white">Hello World!</p> | ||
| </div>` | ||
|
|
||
| export const BorderHelpers = ` | ||
| <div class="has-radius-normal has-border-blue p-2 has-shadow"> | ||
| <p>Border radius of 4px</p> | ||
| <div class="has-radius-large has-border-danger p-2 m-4"> | ||
| <p>Border radius of 4px</p> | ||
| <div class="has-radius-rounded has-border-light p-3 m-4"> | ||
| <p class="has-text-danger">Rounded div</p> | ||
| </div> | ||
| </div> | ||
| </div>` |
156 changes: 156 additions & 0 deletions
156
packages/components/src/stories/design/09-css-helpers.stories.mdx
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,156 @@ | ||
| import { Meta, Canvas, Source } from '@storybook/addon-docs' | ||
|
|
||
| <Meta | ||
| title="Design/CSS Helpers" | ||
| parameters={{ | ||
| previewTabs: { | ||
| canvas: { hidden: true }, | ||
| }, | ||
| }} | ||
| /> | ||
|
|
||
| # CSS Helpers | ||
|
|
||
| Apply helper classes to almost any element, in order to alter their style. | ||
|
|
||
| import { | ||
| ColorHelpers, | ||
| BorderHelpers, | ||
| BorderColorsHelpers, | ||
| RadiusHelpers, | ||
| ShadowHelpers, | ||
| FlexboxHelpers, | ||
| VisabilityHelpers, | ||
| } from './09-css-helpers.templates.ts' | ||
| import { html } from '../utils' | ||
| import dedent from 'ts-dedent' | ||
|
|
||
| ## Colors | ||
|
|
||
| Change the color of the text and/or background | ||
|
|
||
| - [Colors](http://localhost:6006/?path=/story/design-colors--page) | ||
| - [Typography](http://localhost:6006/?path=/story/design-typography--page) | ||
| - [Bulma Documentation](https://bulma.io/documentation/helpers/color-helpers/) | ||
|
|
||
| <Canvas withSource="none"> | ||
| <bal-doc-app>{html(ColorHelpers)}</bal-doc-app> | ||
| </Canvas> | ||
|
|
||
| <Source | ||
| language="html" | ||
| code={dedent` | ||
| ${ColorHelpers} | ||
| `} | ||
| /> | ||
|
|
||
| ### Text Colors | ||
|
|
||
| For each [color](http://localhost:6006/?path=/story/design-colors--page) there is a helper css class for text colors. | ||
|
|
||
| `has-text-*` | ||
|
|
||
| ### Background Colors | ||
|
|
||
| For each [color](http://localhost:6006/?path=/story/design-colors--page) there is a helper css class for background colors. | ||
|
|
||
| `has-background-*` | ||
|
|
||
| ## Visability | ||
|
|
||
| Show/hide content depending on the width of the viewport. | ||
|
|
||
| - [Breakpoints](http://localhost:6006/?path=/docs/design-breakpoints--viewports) | ||
| - [Bulma Documentation](https://bulma.io/documentation/helpers/visibility-helpers/) | ||
|
|
||
| <Canvas withSource="none"> | ||
| <bal-doc-app>{html(VisabilityHelpers)}</bal-doc-app> | ||
| </Canvas> | ||
|
|
||
| <Source | ||
| language="html" | ||
| code={dedent` | ||
| ${VisabilityHelpers} | ||
| `} | ||
| /> | ||
|
|
||
| ## Flexbox | ||
|
|
||
| Helpers for all Flexbox properties | ||
|
|
||
| - [Bulma Documentation](https://bulma.io/documentation/helpers/flexbox-helpers/) | ||
|
|
||
| <Canvas withSource="none"> | ||
| <bal-doc-app>{html(FlexboxHelpers)}</bal-doc-app> | ||
| </Canvas> | ||
|
|
||
| <Source | ||
| language="html" | ||
| code={dedent` | ||
| ${FlexboxHelpers} | ||
| `} | ||
| /> | ||
|
|
||
| ## Border | ||
|
|
||
| Change or add border styles to a element with the border helper css classes. | ||
|
|
||
| `has-border-*` | ||
|
|
||
| ### Border Colors | ||
|
|
||
| <Canvas withSource="none"> | ||
| <bal-doc-app>{html(BorderColorsHelpers)}</bal-doc-app> | ||
| </Canvas> | ||
|
|
||
| <Source | ||
| language="html" | ||
| code={dedent` | ||
| ${BorderColorsHelpers} | ||
| `} | ||
| /> | ||
|
|
||
| ### Border Styles | ||
|
|
||
| <Canvas withSource="none"> | ||
| <bal-doc-app>{html(BorderHelpers)}</bal-doc-app> | ||
| </Canvas> | ||
|
|
||
| <Source | ||
| language="html" | ||
| code={dedent` | ||
| ${BorderHelpers} | ||
| `} | ||
| /> | ||
|
|
||
| ## Radius | ||
|
|
||
| Change the border radius of an element with the below css classes. | ||
|
|
||
| `has-radius-*` | ||
|
|
||
| <Canvas withSource="none"> | ||
| <bal-doc-app>{html(RadiusHelpers)}</bal-doc-app> | ||
| </Canvas> | ||
|
|
||
| <Source | ||
| language="html" | ||
| code={dedent` | ||
| ${RadiusHelpers} | ||
| `} | ||
| /> | ||
|
|
||
| ## Shodow | ||
|
|
||
| Add a showdow effect to a element with the css class `has-shadow`. | ||
|
|
||
| <Canvas withSource="none"> | ||
| <bal-doc-app>{html(ShadowHelpers)}</bal-doc-app> | ||
| </Canvas> | ||
|
|
||
| <Source | ||
| language="html" | ||
| code={dedent` | ||
| ${ShadowHelpers} | ||
| `} | ||
| /> |
Oops, something went wrong.