feat(swatch, swatch-group): Add new components

packages/calcite-components/index.html

@@ -449,7 +449,12 @@ <h1 id="calcite-demo">Calcite demo</h1>
             </calcite-action>
           </a>
         </div>
-
+        <div>
+          <a href="/src/demos/swatch-group.html">
+            <calcite-action scale="s" text="Swatch Group / Swatch" alignment="start" text-enabled appearance="solid">
+            </calcite-action>
+          </a>
+        </div>
         <div>
           <a href="/src/demos/switch.html">
             <calcite-action scale="s" text="Switch" alignment="start" text-enabled appearance="solid"> </calcite-action>

packages/calcite-components/src/components/swatch-group/readme.md

@@ -0,0 +1,5 @@
+# calcite-swatch-group
+
+For comprehensive guidance on using and implementing `calcite-swatch-group`, refer to the [documentation page](https://developers.arcgis.com/calcite-design-system/components/swatch-group/).
+
+<!-- Auto Generated Below -->

packages/calcite-components/src/components/swatch-group/resources.ts

@@ -0,0 +1,3 @@
+export const CSS = {
+  container: "container",
+};

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

@@ -0,0 +1,23 @@
+/**
+ * CSS Custom Properties
+ *
+ * These properties can be overridden using the component's tag as selector.
+ *
+ * @prop --calcite-swatch-group-space: Specifies the space between slotted elements.
+ */
+
+:host {
+  @apply flex;
+}
+
+.container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--calcite-swatch-group-space, var(--calcite-spacing-sm));
+}
+
+:host([scale="s"]) .container {
+  gap: var(--calcite-swatch-group-space, var(--calcite-spacing-xs));
+}
+@include base-component();
+@include disabled();

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

@@ -0,0 +1,109 @@
+import { modesDarkDefault } from "../../../.storybook/utils";
+import { html } from "../../../support/formatting";
+import { ATTRIBUTES } from "../../../.storybook/resources";
+import { placeholderImage } from "../../../.storybook/placeholder-image";
+import { SwatchGroup } from "./swatch-group";
+
+const { selectionMode, scale } = ATTRIBUTES;
+
+type SwatchGroupStoryArgs = Pick<SwatchGroup, "selectionMode" | "scale">;
+
+export default {
+  title: "Components/Swatch Group",
+  args: { selectionMode: selectionMode.defaultValue, scale: scale.defaultValue },
+  argTypes: {
+    selectionMode: {
+      options: selectionMode.values.filter(
+        (option) => option !== "children" && option !== "multichildren" && option !== "ancestors",
+      ),
+      control: { type: "select" },
+    },
+    scale: { options: scale.values, control: { type: "select" } },
+  },
+};
+
+export const simple = (args: SwatchGroupStoryArgs): string => html`
+  <calcite-swatch-group selection-mode="${args.selectionMode}" scale="${args.scale}">
+    <calcite-swatch value="calcite swatch"></calcite-swatch>
+    <calcite-swatch color="#ff0000" value="calcite swatch"></calcite-swatch>
+    <calcite-swatch value="calcite swatch">
+      <img
+        src="${placeholderImage({
+          width: 24,
+          height: 24,
+        })}"
+        slot="image"
+      />
+    </calcite-swatch>
+    <calcite-swatch color="rgba(250,210,150,0.2)" value="calcite swatch"> </calcite-swatch>
+    <calcite-swatch value="calcite swatch">
+      <img
+        src="${placeholderImage({
+          width: 24,
+          height: 24,
+        })}"
+        slot="image"
+      />
+    </calcite-swatch>
+    <calcite-swatch selected color="rgba(25,25,25,0.1)" value="calcite swatch"></calcite-swatch>
+    <calcite-swatch disabled color="#ddd" value="calcite swatch">
+      <img
+        src="${placeholderImage({
+          width: 24,
+          height: 24,
+        })}"
+        slot="image"
+      />
+    </calcite-swatch>
+    <calcite-swatch disabled color="#ff00ee" value="calcite swatch"> </calcite-swatch>
+  </calcite-swatch-group>
+`;
+
+export const darkThemeRTL_TestOnly = (): string => html`
+  <div dir="rtl">
+    <calcite-swatch-group>
+      <calcite-swatch value="calcite swatch"></calcite-swatch>
+      <calcite-swatch color="#ff0000" value="calcite swatch"></calcite-swatch>
+      <calcite-swatch value="calcite swatch">
+        <img
+          src="${placeholderImage({
+            width: 24,
+            height: 24,
+          })}"
+          slot="image"
+        />
+      </calcite-swatch>
+      <calcite-swatch color="rgba(250,210,150,0.2)" value="calcite swatch">
+        <img
+          src="${placeholderImage({
+            width: 24,
+            height: 24,
+          })}"
+          slot="image"
+        />
+      </calcite-swatch>
+      <calcite-swatch value="calcite swatch">
+        <img
+          src="${placeholderImage({
+            width: 24,
+            height: 24,
+          })}"
+          slot="image"
+        />
+      </calcite-swatch>
+      <calcite-swatch selected color="rgba(25,25,25,0.1)" value="calcite swatch"></calcite-swatch>
+      <calcite-swatch disabled color="#ddd" value="calcite swatch">
+        <img
+          src="${placeholderImage({
+            width: 24,
+            height: 24,
+          })}"
+          slot="image"
+        />
+      </calcite-swatch>
+      <calcite-swatch disabled color="#ff00ee" value="calcite swatch"> </calcite-swatch>
+    </calcite-swatch-group>
+  </div>
+`;
+
+darkThemeRTL_TestOnly.parameters = { themes: modesDarkDefault };