Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(divider): add new border style dashed #1484

Merged
merged 2 commits into from
Oct 16, 2024
Merged

feat(divider): add new border style dashed #1484

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0d6e28a
feat(divider): add new border style dashed
hirsch88 Oct 16, 2024
2e39eec
chore: format files
hirsch88 Oct 16, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/cool-socks-fold.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@baloise/ds-core': minor
---

**divider**: add new border style dashed
6 changes: 6 additions & 0 deletions docs/stories/components/bal-divider/bal-divider.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
6 changes: 6 additions & 0 deletions docs/stories/components/bal-divider/bal-divider.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
8 changes: 8 additions & 0 deletions packages/core/src/components.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
*/
Expand Down Expand Up @@ -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.
*/
Expand Down
1 change: 1 addition & 0 deletions packages/core/src/components/bal-divider/bal-divider.interfaces.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@

namespace BalProps {
export type BalDividerLayout = 'horizontal' | 'vertical' | ''
export type BalDividerBorderStyle = 'solid' | 'dashed' | ''
export type BalDividerColor =
| 'primary'
| 'primary-light'
Expand Down
28 changes: 28 additions & 0 deletions packages/core/src/components/bal-divider/bal-divider.sass
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
7 changes: 7 additions & 0 deletions packages/core/src/components/bal-divider/bal-divider.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
* ------------------------------------------------------
Expand All @@ -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
Expand All @@ -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>
Expand Down