feat(block-group, block): add block-group component

[driskull]

Related Issue: #10382

Summary

• add new component calcite-block-group
  • allows dragging/sorting calcite-block elements
  • add tests
  • add story
  • add demo html
• calcite-block
  • uses calcite-sort-handle instead of calcite-handle
  • new property dragDisabled
  • new property sortHandleOpen
  • new events for calcite-sort-handle opening/closing
    • calciteBlockSortHandleBeforeClose
    • calciteBlockSortHandleBeforeOpen
    • calciteBlockSortHandleClose
    • calciteBlockSortHandleOpen
  • adds tests
• calcite-sort-handle to work without a setSize and setPosition for use with calcite-sortable-list.
• remove unnecessary imports in css files (these are already apart of includes)

Notes:

• Using calcite-sortable-list with calcite-block will no longer just work. A user would need to set the calcite-sortable-list's handleSelector property to be calcite-sort-handle instead of calcite-handle.
• When we drag over a list-item, it will open. However, i'm not sure if we want to do that for block. Do we expect nested blocks? Would it be weird to open a collapsed block when dragging another block over it?

BlockGroup API Documentation

Properties

canPull

• Type: (detail: BlockDragDetail) => boolean
• Description: When provided, the method will be called to determine whether the element can move from the component.

canPut

• Type: (detail: BlockDragDetail) => boolean
• Description: When provided, the method will be called to determine whether the element can be added from another component.

disabled

• Type: boolean
• Default: false
• Reflect: true
• Description: When true, interaction is prevented and the component is displayed with lower opacity.

dragEnabled

• Type: boolean
• Default: false
• Reflect: true
• Description: When true, calcite-blocks are sortable via a draggable button.

group

• Type: string
• Description: The group identifier for the block group.

label

• Type: string
• Description: Specifies an accessible name for the component. When dragEnabled is true and multiple block-group sorting is enabled with group, specifies the component's name for dragging between block-groups.
• Required: true

loading

• Type: boolean
• Default: false
• Reflect: true
• Description: When true, a busy indicator is displayed.

Methods

setFocus

• Description: Sets focus on the component.
• Returns: void

[macandcheese]

When we drag over a list-item, it will open. However, i'm not sure if we want to do that for block. Do we expect nested blocks? Would it be weird to open a collapsed block when dragging another block over it?

I could see the waters muddying between the components if we allowed that.. Not to say it won't be requested in the future - but I don't know if this first version needs to support nesting like that - just parent level Block adjustment.