diff --git a/.config/.lintstagedrc-prettier.js b/.config/.lintstagedrc-prettier.js new file mode 100644 index 00000000000..655bfb57849 --- /dev/null +++ b/.config/.lintstagedrc-prettier.js @@ -0,0 +1,3 @@ +export default { + '**/*': 'prettier --write --ignore-unknown' +}; diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md index 8dab661faef..7dc0a42d58c 100644 --- a/.github/PULL_REQUEST_TEMPLATE.md +++ b/.github/PULL_REQUEST_TEMPLATE.md @@ -7,11 +7,11 @@ -- [ ] Bugfix (non-breaking change which fixes an issue) -- [ ] New feature (non-breaking change which adds functionality) -- [ ] Refactoring (fix on existing components or architectural decisions) -- [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected) -- [ ] Documentation Update (if none of the other choices apply) +- [ ] Bugfix (non-breaking change which fixes an issue) +- [ ] New feature (non-breaking change which adds functionality) +- [ ] Refactoring (fix on existing components or architectural decisions) +- [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected) +- [ ] Documentation Update (if none of the other choices apply) + + Test 1 + Test 2 + Test 3 + +``` diff --git a/packages/components/src/components/stack/docs/HTML.md b/packages/components/src/components/stack/docs/HTML.md new file mode 100644 index 00000000000..d9cbdbbfda4 --- /dev/null +++ b/packages/components/src/components/stack/docs/HTML.md @@ -0,0 +1,17 @@ +## HTML + +For general installation and configuration take a look at the [components](https://www.npmjs.com/package/@db-ui/components) package. + +### Use component + +```html index.html + +... + +
+ Test 1 + Test 2 + Test 3 +
+ +``` diff --git a/packages/components/src/components/stack/docs/Migration.md b/packages/components/src/components/stack/docs/Migration.md new file mode 100644 index 00000000000..5f5eb8a04d6 --- /dev/null +++ b/packages/components/src/components/stack/docs/Migration.md @@ -0,0 +1,8 @@ +## General + +> **Note** +> For a general installation or migration process check out this [documentation](https://www.npmjs.com/package/@db-ui/components). + +## DB UI Core ➡ DB UI Components + +New Component 🥳 diff --git a/packages/components/src/components/stack/docs/React.md b/packages/components/src/components/stack/docs/React.md new file mode 100644 index 00000000000..834b941e4cc --- /dev/null +++ b/packages/components/src/components/stack/docs/React.md @@ -0,0 +1,20 @@ +## React + +For general installation and configuration take a look at the [react-components](https://www.npmjs.com/package/@db-ui/react-components) package. + +### Use component + +```tsx App.tsx +// App.tsx +import { DBStack } from "@db-ui/react-components"; + +const App = () => ( + + Test 1 + Test 2 + Test 3 + +); + +export default App; +``` diff --git a/packages/components/src/components/stack/docs/Vue.md b/packages/components/src/components/stack/docs/Vue.md new file mode 100644 index 00000000000..8563d1ed045 --- /dev/null +++ b/packages/components/src/components/stack/docs/Vue.md @@ -0,0 +1,20 @@ +## Vue + +For general installation and configuration take a look at the [v-components](https://www.npmjs.com/package/@db-ui/v-components) package. + +### Use component + +```vue App.vue + + + + +``` diff --git a/packages/components/src/components/stack/index.html b/packages/components/src/components/stack/index.html new file mode 100644 index 00000000000..5bf014a5771 --- /dev/null +++ b/packages/components/src/components/stack/index.html @@ -0,0 +1,11 @@ + + + + + DBStack + + + +
Test
+ + diff --git a/packages/components/src/components/stack/index.ts b/packages/components/src/components/stack/index.ts new file mode 100644 index 00000000000..9ca9c1e96f9 --- /dev/null +++ b/packages/components/src/components/stack/index.ts @@ -0,0 +1 @@ +export { default as DBStack } from './stack'; diff --git a/packages/components/src/components/stack/model.ts b/packages/components/src/components/stack/model.ts new file mode 100644 index 00000000000..2095b819dd5 --- /dev/null +++ b/packages/components/src/components/stack/model.ts @@ -0,0 +1,52 @@ +import { GapSpacingProps, GlobalProps, GlobalState } from '../../shared/model'; + +export const StackVariantList = ['simple', 'divider'] as const; +export type StackVariantType = (typeof StackVariantList)[number]; + +export const StackDirectionList = ['row', 'column'] as const; +export type StackDirectionType = (typeof StackDirectionList)[number]; + +export const StackAlignmentList = [ + 'stretch', + 'start', + 'end', + 'center' +] as const; +export type StackAlignmentType = (typeof StackAlignmentList)[number]; + +export const StackJustifyContentList = [ + 'space-between', + 'start', + 'end', + 'center' +] as const; +export type StackJustifyContentType = (typeof StackJustifyContentList)[number]; + +export type DBStackDefaultProps = { + /** + * Change variant of stack. To use variant="divider" add a DBDivider after each element + */ + variant?: StackVariantType; + /** + * Set the direction of the stack. Defaults to "column" + */ + direction?: StackDirectionType; + /** + * If the stack should wrap if parent is too small otherwise you get an overflow + */ + wrap?: boolean; + /** + * Represents css align-items + */ + alignment?: StackAlignmentType; + /** + * Represents css justify-content + */ + justifyContent?: StackJustifyContentType; +}; + +export type DBStackProps = DBStackDefaultProps & GlobalProps & GapSpacingProps; + +export type DBStackDefaultState = {}; + +export type DBStackState = DBStackDefaultState & GlobalState; diff --git a/packages/components/src/components/stack/stack-web-component.scss b/packages/components/src/components/stack/stack-web-component.scss new file mode 100644 index 00000000000..ced715a12a4 --- /dev/null +++ b/packages/components/src/components/stack/stack-web-component.scss @@ -0,0 +1 @@ +@forward "stack"; diff --git a/packages/components/src/components/stack/stack.lite.tsx b/packages/components/src/components/stack/stack.lite.tsx new file mode 100644 index 00000000000..e447f026a58 --- /dev/null +++ b/packages/components/src/components/stack/stack.lite.tsx @@ -0,0 +1,28 @@ +import { Show, useMetadata, useRef, useStore } from '@builder.io/mitosis'; +import { DBStackState, DBStackProps } from './model'; +import { cls, getBooleanAsString } from '../../utils'; + +useMetadata({}); + +export default function DBStack(props: DBStackProps) { + // This is used as forwardRef + const ref = useRef(null); + // jscpd:ignore-start + const state = useStore({}); + // jscpd:ignore-end + + return ( +
+ {props.children} +
+ ); +} diff --git a/packages/components/src/components/stack/stack.scss b/packages/components/src/components/stack/stack.scss new file mode 100644 index 00000000000..5f005c6d26d --- /dev/null +++ b/packages/components/src/components/stack/stack.scss @@ -0,0 +1,5 @@ +@use "../../styles/stack-components"; + +.db-stack { + @extend %default-stack; +} diff --git a/packages/components/src/components/stack/stack.spec.tsx b/packages/components/src/components/stack/stack.spec.tsx new file mode 100644 index 00000000000..4b4102198e8 --- /dev/null +++ b/packages/components/src/components/stack/stack.spec.tsx @@ -0,0 +1,43 @@ +import { test, expect } from '@playwright/experimental-ct-react'; +import AxeBuilder from '@axe-core/playwright'; + +import { DBStack } from './index'; +// @ts-ignore - vue can only find it with .ts as file ending +import { DEFAULT_VIEWPORT } from '../../shared/constants.ts'; + +const comp: any = ( + + Test + Test 2 + Test 3 + +); + +const testComponent = () => { + test('should contain text', async ({ mount }) => { + const component = await mount(comp); + await expect(component).toContainText('Test'); + }); + + test('should match screenshot', async ({ mount }) => { + const component = await mount(comp); + await expect(component).toHaveScreenshot(); + }); +}; + +const testA11y = () => { + test('should not have any A11y issues', async ({ page, mount }) => { + await mount(comp); + const accessibilityScanResults = await new AxeBuilder({ page }) + .include('.db-stack') + .analyze(); + + expect(accessibilityScanResults.violations).toEqual([]); + }); +}; + +test.describe('DBStack', () => { + test.use({ viewport: DEFAULT_VIEWPORT }); + testComponent(); + testA11y(); +}); diff --git a/packages/components/src/components/switch/model.ts b/packages/components/src/components/switch/model.ts index c6ca39dbc98..5d5f9ccd9e0 100644 --- a/packages/components/src/components/switch/model.ts +++ b/packages/components/src/components/switch/model.ts @@ -16,6 +16,9 @@ import { } from '../../shared/model'; export type DBSwitchDefaultProps = { + /** + * Add additional icons to indicate active/inactive state. + */ visualAid?: boolean; }; diff --git a/packages/components/src/components/switch/switch.lite.tsx b/packages/components/src/components/switch/switch.lite.tsx index 2d5cc3e69c7..c0e0319eda8 100644 --- a/packages/components/src/components/switch/switch.lite.tsx +++ b/packages/components/src/components/switch/switch.lite.tsx @@ -1,16 +1,21 @@ import { onMount, + Show, useMetadata, useRef, useStore, useTarget } from '@builder.io/mitosis'; import { DBSwitchProps, DBSwitchState } from './model'; -import { cls, uuid } from '../../utils'; +import { cls, getBooleanAsString, getHideProp, uuid } from '../../utils'; import { ChangeEvent, InteractionEvent } from '../../shared/model'; import { handleFrameworkEvent } from '../../utils/form-components'; -useMetadata({}); +useMetadata({ + angular: { + nativeAttributes: ['disabled', 'required', 'checked', 'indeterminate'] + } +}); export default function DBSwitch(props: DBSwitchProps) { // This is used as forwardRef @@ -66,7 +71,7 @@ export default function DBSwitch(props: DBSwitchProps) { ); } diff --git a/packages/components/src/components/switch/switch.scss b/packages/components/src/components/switch/switch.scss index e1c01883fd3..78129ed7896 100644 --- a/packages/components/src/components/switch/switch.scss +++ b/packages/components/src/components/switch/switch.scss @@ -20,7 +20,8 @@ $checked-active-transition-size: calc( %active-transition { &::before { inline-size: calc( - #{$switch-active-thumb-size} - #{$switch-fixed-padding} * 2 + #{variables.$db-spacing-fixed-2xs} + #{$switch-active-thumb-size} - #{$switch-fixed-padding} * 2 + + #{variables.$db-spacing-fixed-2xs} ); margin: 0; } @@ -146,7 +147,7 @@ $checked-active-transition-size: calc( } } - &[data-variant="hidden"] { + &[data-hide-label="true"] { gap: 0; } diff --git a/packages/components/src/components/tab-item/index.html b/packages/components/src/components/tab-item/index.html index a44dcfc1dff..d17745fb883 100644 --- a/packages/components/src/components/tab-item/index.html +++ b/packages/components/src/components/tab-item/index.html @@ -16,7 +16,12 @@ active - - -