From 0d6e28aa7ff725fd576e6ac943b2e23c43018956 Mon Sep 17 00:00:00 2001 From: Gery Hirschfeld Date: Wed, 16 Oct 2024 10:26:47 +0200 Subject: [PATCH 1/2] feat(divider): add new border style dashed --- .changeset/cool-socks-fold.md | 5 ++++ .../components/bal-divider/bal-divider.mdx | 6 ++++ .../bal-divider/bal-divider.stories.ts | 6 ++++ packages/core/src/components.d.ts | 8 ++++++ .../bal-divider/bal-divider.interfaces.ts | 1 + .../components/bal-divider/bal-divider.sass | 28 +++++++++++++++++++ .../components/bal-divider/bal-divider.tsx | 7 +++++ 7 files changed, 61 insertions(+) create mode 100644 .changeset/cool-socks-fold.md diff --git a/.changeset/cool-socks-fold.md b/.changeset/cool-socks-fold.md new file mode 100644 index 0000000000..c5cc0fda8b --- /dev/null +++ b/.changeset/cool-socks-fold.md @@ -0,0 +1,5 @@ +--- +'@baloise/ds-core': minor +--- + +**divider**: add new border style dashed diff --git a/docs/stories/components/bal-divider/bal-divider.mdx b/docs/stories/components/bal-divider/bal-divider.mdx index 42841d9741..4662fa03ef 100644 --- a/docs/stories/components/bal-divider/bal-divider.mdx +++ b/docs/stories/components/bal-divider/bal-divider.mdx @@ -26,6 +26,12 @@ Change the layout of the divider to vertical to use them in a horizontal stack c + + +To divide inner section the dashed version can be used. + + + {/* ------------------------------------------------------ */} ## Component API diff --git a/docs/stories/components/bal-divider/bal-divider.stories.ts b/docs/stories/components/bal-divider/bal-divider.stories.ts index 5a688d8c5b..4cac8918f8 100644 --- a/docs/stories/components/bal-divider/bal-divider.stories.ts +++ b/docs/stories/components/bal-divider/bal-divider.stories.ts @@ -23,6 +23,12 @@ const Story = StoryFactory(meta) export const Basic = Story() +export const Dashed = Story({ + args: { + borderStyle: 'dashed' + } +}) + export const LayoutVertical = Story({ args: { layout: 'vertical', diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts index 11ab6a1c51..cf5e6f3ab5 100644 --- a/packages/core/src/components.d.ts +++ b/packages/core/src/components.d.ts @@ -955,6 +955,10 @@ export namespace Components { "value"?: string; } interface BalDivider { + /** + * Defines the color of the separator line. + */ + "borderStyle": BalProps.BalDividerBorderStyle; /** * Defines the color of the separator line. */ @@ -6133,6 +6137,10 @@ declare namespace LocalJSX { "value"?: string; } interface BalDivider { + /** + * Defines the color of the separator line. + */ + "borderStyle"?: BalProps.BalDividerBorderStyle; /** * Defines the color of the separator line. */ diff --git a/packages/core/src/components/bal-divider/bal-divider.interfaces.ts b/packages/core/src/components/bal-divider/bal-divider.interfaces.ts index 5e4e80f308..8f1991bb75 100644 --- a/packages/core/src/components/bal-divider/bal-divider.interfaces.ts +++ b/packages/core/src/components/bal-divider/bal-divider.interfaces.ts @@ -5,6 +5,7 @@ namespace BalProps { export type BalDividerLayout = 'horizontal' | 'vertical' | '' + export type BalDividerBorderStyle = 'solid' | 'dashed' | '' export type BalDividerColor = | 'primary' | 'primary-light' diff --git a/packages/core/src/components/bal-divider/bal-divider.sass b/packages/core/src/components/bal-divider/bal-divider.sass index 813260d9d9..35c1001427 100644 --- a/packages/core/src/components/bal-divider/bal-divider.sass +++ b/packages/core/src/components/bal-divider/bal-divider.sass @@ -46,6 +46,34 @@ align-self: stretch width: var(--bal-divider-border-width) // + // border styles + &--border-style-dashed#{&}--color-primary + background: repeating-linear-gradient( 90deg, var(--bal-divider-background-primary) 0px, var(--bal-divider-background-grey) 8px, transparent 8px, transparent 16px ) + &--border-style-dashed#{&}--color-primary-light + background: repeating-linear-gradient( 90deg, var(--bal-divider-background-primary-light) 0px, var(--bal-divider-background-grey) 8px, transparent 8px, transparent 16px ) + &--border-style-dashed#{&}--color-primary-dark + background: repeating-linear-gradient( 90deg, var(--bal-divider-background-primary-dark) 0px, var(--bal-divider-background-grey) 8px, transparent 8px, transparent 16px ) + &--border-style-dashed#{&}--color-grey-light + background: repeating-linear-gradient( 90deg, var(--bal-divider-background-grey-light) 0px, var(--bal-divider-background-grey) 8px, transparent 8px, transparent 16px ) + &--border-style-dashed#{&}--color-grey + background: repeating-linear-gradient( 90deg, var(--bal-divider-background-grey) 0px, var(--bal-divider-background-grey) 8px, transparent 8px, transparent 16px ) + &--border-style-dashed#{&}--color-grey-dark + background: repeating-linear-gradient( 90deg, var(--bal-divider-background-grey-dark) 0px, var (--bal-divider-background-grey) 8px, transparent 8px, transparent 16px ) + &--border-style-dashed#{&}--color-warning + background: repeating-linear-gradient( 90deg, var(--bal-divider-background-warning) 0px, var(--bal-divider-background-grey) 8px, transparent 8px, transparent 16px ) + &--border-style-dashed#{&}--color-success + background: repeating-linear-gradient( 90deg, var(--bal-divider-background-success) 0px, var(--bal-divider-background-grey) 8px, transparent 8px, transparent 16px ) + &--border-style-dashed#{&}--color-danger + background: repeating-linear-gradient( 90deg, var(--bal-divider-background-danger) 0px, var(--bal-divider-background-grey) 8px, transparent 8px, transparent 16px ) + &--border-style-dashed#{&}--color-danger-dark + background: repeating-linear-gradient( 90deg, var(--bal-divider-background-danger-dark) 0px, var(--bal-divider-background-grey) 8px, transparent 8px, transparent 16px ) + &--border-style-dashed#{&}--color-danger-darker + background: repeating-linear-gradient( 90deg, var(--bal-divider-background-danger-darker) 0px, var(--bal-divider-background-grey) 8px, transparent 8px, transparent 16px ) + &--border-style-dashed#{&}--color-white + background: repeating-linear-gradient( 90deg, var(--bal-divider-background-white) 0px, var(--bal-divider-background-grey) 8px, transparent 8px, transparent 16px ) + &--border-style-dashed#{&}--color-light-blue + background: repeating-linear-gradient( 90deg, var(--bal-divider-background-light-blue) 0px, var(--bal-divider-background-grey) 8px, transparent 8px, transparent 16px ) + // // horizontal spaces &--space-none margin: 0 diff --git a/packages/core/src/components/bal-divider/bal-divider.tsx b/packages/core/src/components/bal-divider/bal-divider.tsx index 20aab12a3f..aecf133efc 100644 --- a/packages/core/src/components/bal-divider/bal-divider.tsx +++ b/packages/core/src/components/bal-divider/bal-divider.tsx @@ -35,6 +35,11 @@ export class Divider implements ComponentInterface, Loggable { */ @Prop() color: BalProps.BalDividerColor = 'grey' + /** + * Defines the color of the separator line. + */ + @Prop() borderStyle: BalProps.BalDividerBorderStyle = 'solid' + /** * RENDER * ------------------------------------------------------ @@ -45,6 +50,7 @@ export class Divider implements ComponentInterface, Loggable { const layout = !!this.layout const space = !!this.space const color = !!this.color + const borderStyle = !!this.borderStyle return ( From 2e39eecaf4d2b04524bef0df6ef2926a35f8fe11 Mon Sep 17 00:00:00 2001 From: Gery Hirschfeld Date: Wed, 16 Oct 2024 10:35:57 +0200 Subject: [PATCH 2/2] chore: format files --- docs/stories/components/bal-divider/bal-divider.stories.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/stories/components/bal-divider/bal-divider.stories.ts b/docs/stories/components/bal-divider/bal-divider.stories.ts index 4cac8918f8..f541a91059 100644 --- a/docs/stories/components/bal-divider/bal-divider.stories.ts +++ b/docs/stories/components/bal-divider/bal-divider.stories.ts @@ -25,8 +25,8 @@ export const Basic = Story() export const Dashed = Story({ args: { - borderStyle: 'dashed' - } + borderStyle: 'dashed', + }, }) export const LayoutVertical = Story({