feat(divider): add new border style dashed

baloise · Oct 16, 2024 · 0d6e28a · 0d6e28a
1 parent 6e312cb
commit 0d6e28a
Show file tree

Hide file tree

Showing 7 changed files with 61 additions and 0 deletions.
diff --git a/.changeset/cool-socks-fold.md 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
@@ -26,6 +26,12 @@ Change the layout of the divider to vertical to use them in a horizontal stack c
 
 <Canvas of={DividerStories.LayoutVertical} />
 
+<StoryHeading of={DividerStories.Dashed}></StoryHeading>
+
+To divide inner section the dashed version can be used.
+
+<Canvas of={DividerStories.Dashed} />
+
 {/* ------------------------------------------------------ */}
 
 ## Component API

diff --git 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<Args>(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
@@ -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
@@ -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
@@ -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
@@ -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 (
       <Host
@@ -54,6 +60,7 @@ export class Divider implements ComponentInterface, Loggable {
           ...block.modifier(`layout-${this.layout}`).class(layout),
           ...block.modifier(`space-${this.space}`).class(space),
           ...block.modifier(`color-${this.color}`).class(color),
+          ...block.modifier(`border-style-${this.borderStyle}`).class(borderStyle),
         }}
       >
         <slot></slot>