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

**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-block`s 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`

---------

Co-authored-by: Kitty Hurley <[email protected]>

packages/calcite-components/src/components/block-group/block-group.scss

@@ -0,0 +1,15 @@
+:host {
+  @apply block;
+}
+
+.container {
+  position: relative;
+}
+
+.assistive-text {
+  @apply sr-only;
+}
+
+@include base-component();
+
+@include disabled();

packages/calcite-components/src/components/block-group/block-group.stories.ts

@@ -0,0 +1,80 @@
+import { boolean } from "../../../.storybook/utils";
+import { html } from "../../../support/formatting";
+import { BlockGroup } from "./block-group";
+
+type BlockGroupStoryArgs = Pick<BlockGroup, "disabled" | "group" | "dragEnabled" | "label" | "loading">;
+
+export default {
+  title: "Components/Block Group",
+  args: {
+    disabled: false,
+    dragEnabled: false,
+    group: "",
+    label: "My Group",
+    loading: false,
+  },
+  parameters: {
+    chromatic: {
+      delay: 500,
+    },
+  },
+};
+
+const blockHTML = html`<calcite-block
+    collapsible
+    heading="A rubber chicken"
+    description="Why did the chicken cross the road? To avoid being squeezed!"
+    >My block content!</calcite-block
+  >
+  <calcite-block collapsible heading="Invisible ink" description="You can't see me!">My block content!</calcite-block>
+  <calcite-block collapsible heading="Whoopee cushion" description="The sound of laughter!"
+    >My block content!</calcite-block
+  >
+  <calcite-block collapsible heading="Fake mustache" description="Incognito mode activated!"
+    >My block content!</calcite-block
+  >
+  <calcite-block collapsible heading="Giant foam finger" description="We're number one!"
+    >My block content!</calcite-block
+  >
+  <calcite-block drag-disabled collapsible heading="Clown nose" description="Honk if you love clowns!"
+    >My block content!</calcite-block
+  >
+  <calcite-block
+    collapsible
+    heading="Joke book"
+    description="Why don't scientists trust atoms? Because they make up everything!"
+    >My block content!</calcite-block
+  >`;
+
+export const simple = (args: BlockGroupStoryArgs): string => html`
+  <calcite-block-group
+    ${boolean("disabled", args.disabled)}
+    ${boolean("drag-enabled", args.dragEnabled)}
+    ${boolean("loading", args.loading)}
+    label="${args.label}"
+    group="${args.group}"
+  >
+    ${blockHTML}
+  </calcite-block-group>
+`;
+
+export const dragEnabled = (): string => html`
+  <calcite-block-group drag-enabled label="My Group"> ${blockHTML} </calcite-block-group>
+`;
+
+export const sortHandleOpen = (): string => html`
+  <calcite-block-group drag-enabled label="My Group">
+    <calcite-block sort-handle-open collapsible heading="Invisible ink" description="You can't see me!"
+      >My block content!</calcite-block
+    >
+    ${blockHTML}
+  </calcite-block-group>
+`;
+
+export const loading = (): string => html`
+  <calcite-block-group loading label="My Group"> ${blockHTML} </calcite-block-group>
+`;
+
+export const disabled = (): string => html`
+  <calcite-block-group disabled label="My Group"> ${blockHTML} </calcite-block-group>
+`;