From 25d1fc6c75cb0688e03fd73c7444f39ceb2a49e1 Mon Sep 17 00:00:00 2001 From: hirsch Date: Tue, 28 Dec 2021 10:42:09 +0100 Subject: [PATCH] feat(css-helpers)!: improve color, border, radius, flexbox, visibility and showdow helpers --- .eslintignore | 1 + .../docs/bal-doc-color/bal-doc-color.tsx | 2 +- .../components/form/bal-checkbox/index.html | 4 +- .../stories/bal-checkbox.stories.ts | 4 +- .../src/components/form/bal-radio/index.html | 8 +- .../bal-radio/stories/bal-radio.stories.ts | 8 +- .../contributing/05-release.stories.mdx | 12 +- .../src/stories/design/01-colors.stories.mdx | 21 ++- .../src/stories/design/01-colors.templates.ts | 13 +- .../stories/design/09-css-helpers.stories.mdx | 156 ++++++++++++++++++ .../design/09-css-helpers.templates.ts | 69 ++++++++ ...es.ts => 99-00-templates-pages.stories.ts} | 0 ...s.ts => 99-01-templates-common.stories.ts} | 0 .../04-migration-from-5x-to-6x.stories.mdx | 22 +++ .../components/src/styles/helpers/_all.scss | 2 + .../src/styles/helpers/borders.scss | 77 +++++++++ .../src/styles/helpers/helpers.scss | 48 ------ .../components/src/styles/helpers/shadow.scss | 3 + .../styles/utilities/derived-variables.scss | 1 + 19 files changed, 382 insertions(+), 69 deletions(-) create mode 100644 packages/components/src/stories/design/09-css-helpers.stories.mdx create mode 100644 packages/components/src/stories/design/09-css-helpers.templates.ts rename packages/components/src/stories/design/{09-00-templates-pages.stories.ts => 99-00-templates-pages.stories.ts} (100%) rename packages/components/src/stories/design/{09-01-templates-common.stories.ts => 99-01-templates-common.stories.ts} (100%) create mode 100644 packages/components/src/stories/migration/04-migration-from-5x-to-6x.stories.mdx create mode 100644 packages/components/src/styles/helpers/borders.scss create mode 100644 packages/components/src/styles/helpers/shadow.scss diff --git a/.eslintignore b/.eslintignore index 1ce37b179a..ea0cd3d0bd 100644 --- a/.eslintignore +++ b/.eslintignore @@ -10,6 +10,7 @@ storybook-static/ rollup.config.js ngcc.config.js *.md +*.scss packages/components/src/stories/contributors.md packages/components/src/components.d.ts diff --git a/packages/components/src/components/docs/bal-doc-color/bal-doc-color.tsx b/packages/components/src/components/docs/bal-doc-color/bal-doc-color.tsx index dbebd0e9cd..6cbc468ab8 100644 --- a/packages/components/src/components/docs/bal-doc-color/bal-doc-color.tsx +++ b/packages/components/src/components/docs/bal-doc-color/bal-doc-color.tsx @@ -17,7 +17,7 @@ export class BalDocColor { render() { return ( -
+
{this.background ? 'A-a' : ''}
diff --git a/packages/components/src/components/form/bal-checkbox/index.html b/packages/components/src/components/form/bal-checkbox/index.html index e93fa671a0..eb334b7791 100644 --- a/packages/components/src/components/form/bal-checkbox/index.html +++ b/packages/components/src/components/form/bal-checkbox/index.html @@ -84,7 +84,7 @@

Checkbox Boxes

Title

@@ -95,7 +95,7 @@

Checkbox Boxes

Title

diff --git a/packages/components/src/components/form/bal-checkbox/stories/bal-checkbox.stories.ts b/packages/components/src/components/form/bal-checkbox/stories/bal-checkbox.stories.ts index 64834eb0f2..d79af8bc42 100644 --- a/packages/components/src/components/form/bal-checkbox/stories/bal-checkbox.stories.ts +++ b/packages/components/src/components/form/bal-checkbox/stories/bal-checkbox.stories.ts @@ -104,7 +104,7 @@ export const Box = args => ({ template: `
-
+

Title

Subtitle

@@ -113,7 +113,7 @@ export const Box = args => ({
-
+

Title

Subtitle

diff --git a/packages/components/src/components/form/bal-radio/index.html b/packages/components/src/components/form/bal-radio/index.html index 8345d3f059..f0e414d9a8 100644 --- a/packages/components/src/components/form/bal-radio/index.html +++ b/packages/components/src/components/form/bal-radio/index.html @@ -61,7 +61,7 @@

Radio Boxes

Selected Label

@@ -70,7 +70,7 @@

Radio Boxes

Other Label

@@ -85,7 +85,7 @@

Radio List

Year 1 (CHF 66.00) @@ -93,7 +93,7 @@

Radio List

Year 2 (CHF 86.00)
diff --git a/packages/components/src/components/form/bal-radio/stories/bal-radio.stories.ts b/packages/components/src/components/form/bal-radio/stories/bal-radio.stories.ts index 0f7080ab2e..01abf992d3 100644 --- a/packages/components/src/components/form/bal-radio/stories/bal-radio.stories.ts +++ b/packages/components/src/components/form/bal-radio/stories/bal-radio.stories.ts @@ -71,14 +71,14 @@ export const RadioBoxes = args => ({
-
+

Selected Label

-
+

Other Label

@@ -103,13 +103,13 @@ export const RadioList = args => ({ }, template: ` -
+
Year 1 (CHF 66.00)
-
+
Year 2 (CHF 86.00)
 diff --git a/packages/components/src/stories/contributing/05-release.stories.mdx b/packages/components/src/stories/contributing/05-release.stories.mdx index 10b5cd88e5..912aa05d6a 100644 --- a/packages/components/src/stories/contributing/05-release.stories.mdx +++ b/packages/components/src/stories/contributing/05-release.stories.mdx @@ -28,12 +28,12 @@ It is important to follow the [conventional commits](?path=/docs/contributing-re ## Conventional Commits -We are following the [Karam Git Message guideliness](http://karma-runner.github.io/5.2/dev/git-commit-msg.html). +We are following the [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/). Here are some examples of the release type that will be done based on a commit messages: -| Commit message | Release type | -| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------- | -| `fix(pencil): stop graphite breaking when too much pressure applied` | Patch Release | -| `feat(pencil): add 'graphiteWidth' option` | ~~Minor~~ Feature Release | -| `perf(pencil): remove graphiteWidth option BREAKING CHANGE: The graphiteWidth option has been removed. The default graphite width of 10mm is always used for performance reasons.` | ~~Major~~ Breaking Release | +| Commit message | Release type | +| -------------------------------------------------------------------- | -------------------------- | +| `fix(pencil): stop graphite breaking when too much pressure applied` | Patch Release | +| `feat(pencil): add 'graphiteWidth' option` | ~~Minor~~ Feature Release | +| `perf(pencil)!: remove graphiteWidth option` | ~~Major~~ Breaking Release | diff --git a/packages/components/src/stories/design/01-colors.stories.mdx b/packages/components/src/stories/design/01-colors.stories.mdx index 264dc56ee7..58e89db7f9 100644 --- a/packages/components/src/stories/design/01-colors.stories.mdx +++ b/packages/components/src/stories/design/01-colors.stories.mdx @@ -132,6 +132,10 @@ These colors/variables can be used within your style sheets, by import the `glob ```scss @import 'node_modules/@baloise/design-system-components/src/styles/global.utilities'; + +.my-element { + background: $blue; +} ``` ## CSS Helper Classes @@ -140,10 +144,12 @@ Out of the color tokens we create a collection of helper css classes. [Go to the Bulma documentation](https://bulma.io/documentation/modifiers/color-helpers/). -import { ColorHelpers } from './01-colors.templates.ts' +import { ColorHelpers } from './09-css-helpers.templates.ts' import { html } from '../utils' import dedent from 'ts-dedent' +### Colors + {html(ColorHelpers)} @@ -154,3 +160,16 @@ import dedent from 'ts-dedent' ${ColorHelpers} `} /> + +### Borders + + + {html(BorderHelpers)} + + + diff --git a/packages/components/src/stories/design/01-colors.templates.ts b/packages/components/src/stories/design/01-colors.templates.ts index fe95fe9ede..edecb831fe 100644 --- a/packages/components/src/stories/design/01-colors.templates.ts +++ b/packages/components/src/stories/design/01-colors.templates.ts @@ -1,4 +1,15 @@ export const ColorHelpers = ` -
+

Hello World!

` + +export const BorderHelpers = ` +
+

Border radius of 4px

+
+

Border radius of 4px

+
+

Rounded div

+
+
+
` diff --git a/packages/components/src/stories/design/09-css-helpers.stories.mdx b/packages/components/src/stories/design/09-css-helpers.stories.mdx new file mode 100644 index 0000000000..7984f262a0 --- /dev/null +++ b/packages/components/src/stories/design/09-css-helpers.stories.mdx @@ -0,0 +1,156 @@ +import { Meta, Canvas, Source } from '@storybook/addon-docs' + + + +# 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/) + + + {html(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/) + + + {html(VisabilityHelpers)} + + + + +## Flexbox + +Helpers for all Flexbox properties + +- [Bulma Documentation](https://bulma.io/documentation/helpers/flexbox-helpers/) + + + {html(FlexboxHelpers)} + + + + +## Border + +Change or add border styles to a element with the border helper css classes. + +`has-border-*` + +### Border Colors + + + {html(BorderColorsHelpers)} + + + + +### Border Styles + + + {html(BorderHelpers)} + + + + +## Radius + +Change the border radius of an element with the below css classes. + +`has-radius-*` + + + {html(RadiusHelpers)} + + + + +## Shodow + +Add a showdow effect to a element with the css class `has-shadow`. + + + {html(ShadowHelpers)} + + + diff --git a/packages/components/src/stories/design/09-css-helpers.templates.ts b/packages/components/src/stories/design/09-css-helpers.templates.ts new file mode 100644 index 0000000000..3a3c6d78d9 --- /dev/null +++ b/packages/components/src/stories/design/09-css-helpers.templates.ts @@ -0,0 +1,69 @@ +export const ColorHelpers = ` +
+

Hello World!

+
` + +export const FlexboxHelpers = ` +
+

is-flex is-justify-content-center is-align-items-center

+
` + +export const VisabilityHelpers = ` +
+

is-hidden-mobile

+

is-hidden-tablet

+

is-hidden-desktop

+
` + +export const BorderColorsHelpers = ` +
+

has-border-light

+
+

has-border-blue

+
+

has-border-dark

+
+

has-border-success

+
+

has-border-danger

+
+
+
+
+
+` + +export const BorderHelpers = ` +
+

has-border-light has-border-none

+
+

has-border-blue has-border-bold

+
+

has-border-top-danger has-border-left-success has-border-bottom-danger has-border-right-success

+
+
+
+` + +export const RadiusHelpers = ` +
+

has-radius-none

+
+

has-radius-small

+
+

has-radius-normal

+
+

has-radius-large

+
+

has-radius-rounded

+
+
+
+
+
+` + +export const ShadowHelpers = ` +
+

Has shadow

+
` diff --git a/packages/components/src/stories/design/09-00-templates-pages.stories.ts b/packages/components/src/stories/design/99-00-templates-pages.stories.ts similarity index 100% rename from packages/components/src/stories/design/09-00-templates-pages.stories.ts rename to packages/components/src/stories/design/99-00-templates-pages.stories.ts diff --git a/packages/components/src/stories/design/09-01-templates-common.stories.ts b/packages/components/src/stories/design/99-01-templates-common.stories.ts similarity index 100% rename from packages/components/src/stories/design/09-01-templates-common.stories.ts rename to packages/components/src/stories/design/99-01-templates-common.stories.ts diff --git a/packages/components/src/stories/migration/04-migration-from-5x-to-6x.stories.mdx b/packages/components/src/stories/migration/04-migration-from-5x-to-6x.stories.mdx new file mode 100644 index 0000000000..315b4863ae --- /dev/null +++ b/packages/components/src/stories/migration/04-migration-from-5x-to-6x.stories.mdx @@ -0,0 +1,22 @@ +import { Meta } from '@storybook/addon-docs' + + + +# Migration from 5.x to 6.x + +The following workflow walks through the steps of migrating from version 2.x to 3.x. +Note that the actual steps required for your project may vary, and these steps should be treated as general guidance rather than strict instructions. + +## CSS helper classes + +- `has-border-radius` use now `has-radius-normal` +- `has-border-blue-dark` use now `has-border-dark` +- `has-border-blue-light` use now `has-border-light` +- `has-no-border` use now `has-border-none` diff --git a/packages/components/src/styles/helpers/_all.scss b/packages/components/src/styles/helpers/_all.scss index 370f73dd7a..1b3b3516ea 100644 --- a/packages/components/src/styles/helpers/_all.scss +++ b/packages/components/src/styles/helpers/_all.scss @@ -9,4 +9,6 @@ @import 'node_modules/bulma/sass/helpers/visibility'; @import 'helpers'; +@import 'borders'; +@import 'shadow'; @import 'spacing'; diff --git a/packages/components/src/styles/helpers/borders.scss b/packages/components/src/styles/helpers/borders.scss new file mode 100644 index 0000000000..edd9fe8541 --- /dev/null +++ b/packages/components/src/styles/helpers/borders.scss @@ -0,0 +1,77 @@ +$custom-borders: null !default; + +$borders: mergeColorMaps( + ( + // @deprecated + 'blue-inverted': $blue-5, + 'grey': $grey, + 'blue': $border-focused, + 'focused': $border-focused, + 'light': $blue-2, + 'dark': $blue-8, + 'success': $success, + 'warning': $warning, + 'danger': $danger + ), + $custom-borders +) !default; + +@each $name, $shade in $borders { + .has-border-#{$name} { + border: 1px solid $shade !important; + } + .has-border-top-#{$name} { + border-top: 1px solid $shade !important; + } + .has-border-bottom-#{$name} { + border-bottom: 1px solid $shade !important; + } + .has-border-right-#{$name} { + border-right: 1px solid $shade !important; + } + .has-border-left-#{$name} { + border-left: 1px solid $shade !important; + } +} + +.has-border-none { + border: none !important; +} + +.has-border-bold { + border-width: 2px !important; +} + +$border-radius: ( + 'none': $radius-none, + 'small': $radius-small, + 'normal': $radius, + 'large': $radius-large, + 'rounded': $radius-rounded, +); + +@each $name, $value in $border-radius { + .has-radius-#{$name} { + border-radius: $value !important; + } + .has-radius-#{$name}-top { + border-top-left-radius: $value !important; + border-top-right-radius: $value !important; + } + .has-radius-#{$name}-bottom { + border-bottom-left-radius: $value !important; + border-bottom-right-radius: $value !important; + } + .has-radius-#{$name}-top-left { + border-top-left-radius: $value !important; + } + .has-radius-#{$name}-top-right { + border-top-right-radius: $value !important; + } + .has-radius-#{$name}-bottom-left { + border-bottom-left-radius: $value !important; + } + .has-radius-#{$name}-bottom-right { + border-bottom-right-radius: $value !important; + } +} diff --git a/packages/components/src/styles/helpers/helpers.scss b/packages/components/src/styles/helpers/helpers.scss index 0245133175..54ce0a2863 100644 --- a/packages/components/src/styles/helpers/helpers.scss +++ b/packages/components/src/styles/helpers/helpers.scss @@ -1,7 +1,3 @@ -.has-no-border { - border: none !important; -} - .is-full-width { width: 100% !important; } @@ -10,50 +6,6 @@ flex-direction: row-reverse !important; } -.has-background-light { - background: $white-bis; -} - -.has-border-blue { - border: 1px solid $blue-3; -} - -.has-border-blue-dark { - border: 1px solid $blue-8; -} - -.has-border-success { - border: 1px solid $success; -} - -.has-border-danger { - border: 1px solid $danger; -} - -.has-border-warning { - border: 1px solid $danger; -} - -.has-border-bold { - border-width: 2px; -} - -.has-border-blue-light { - border: 1px solid $blue-2; -} - -.has-border-blue-inverted { - border: 1px solid $blue-5; -} - -.has-border-grey { - border: 1px solid $grey; -} - -.has-border-radius { - border-radius: $radius; -} - .clickable { cursor: pointer !important; pointer-events: visible !important; diff --git a/packages/components/src/styles/helpers/shadow.scss b/packages/components/src/styles/helpers/shadow.scss new file mode 100644 index 0000000000..1c4cd43430 --- /dev/null +++ b/packages/components/src/styles/helpers/shadow.scss @@ -0,0 +1,3 @@ +.has-shadow { + box-shadow: $shadow; +} diff --git a/packages/components/src/styles/utilities/derived-variables.scss b/packages/components/src/styles/utilities/derived-variables.scss index 2bfac1f0e8..24f1b9aca2 100644 --- a/packages/components/src/styles/utilities/derived-variables.scss +++ b/packages/components/src/styles/utilities/derived-variables.scss @@ -55,6 +55,7 @@ $background: $white-ter !default; $border: $blue-2 !default; $border-hover: $blue-2 !default; +$border-focused: $blue !default; $border-light: $blue-2 !default; $border-light-hover: $blue-2 !default;