+
`;
diff --git a/src/components/Tooltip/tooltip.css b/src/components/Tooltip/tooltip.css
index 76d80ad3..f4e5dc7b 100644
--- a/src/components/Tooltip/tooltip.css
+++ b/src/components/Tooltip/tooltip.css
@@ -1,3 +1,9 @@
+:host {
+ display: contents;
+}
+.tooltip-placeholder{
+ display: inline-block;
+}
.tooltip {
word-wrap: break-word;
display: block;
diff --git a/stories/templates/Icon/additional.mdx b/stories/templates/Icon/additional.mdx
new file mode 100644
index 00000000..b89fee34
--- /dev/null
+++ b/stories/templates/Icon/additional.mdx
@@ -0,0 +1,15 @@
+## Sizes
+
+SgdsIcons offer a variety of sizes : `sm` , `md` , `lg` , `xl` , `2-xl` , `3-xl`. By default, the icon size is `lg`
+
+
+
+## Color
+
+The color of the icons is inherited from its parent container
+
+
diff --git a/stories/templates/Icon/additional.stories.js b/stories/templates/Icon/additional.stories.js
new file mode 100644
index 00000000..ab9c7e9e
--- /dev/null
+++ b/stories/templates/Icon/additional.stories.js
@@ -0,0 +1,35 @@
+import { html } from "lit-html";
+
+const SizeTemplate = args => {
+ const sizes = ["sm", "md", "lg", "xl", "2-xl", "3-xl"];
+ return html`${sizes.map(s => html`
`)} `;
+};
+
+const ColorTemplate = args => {
+ const colors = ["red", "blue", "green", "purple", "pink"];
+ return html`
+ ${colors.map(
+ c => html`
+
+
+
+ `
+ )}
+ `;
+};
+
+export const Size = {
+ render: SizeTemplate.bind({}),
+ name: "Size",
+ args: {},
+ parameters: {},
+ tags: ["!dev"]
+};
+
+export const Color = {
+ render: ColorTemplate.bind({}),
+ name: "Color",
+ args: {},
+ parameters: {},
+ tags: ["!dev"]
+};
diff --git a/stories/templates/Icon/basic.js b/stories/templates/Icon/basic.js
index cb0b598e..6e8de81e 100644
--- a/stories/templates/Icon/basic.js
+++ b/stories/templates/Icon/basic.js
@@ -1,7 +1,306 @@
import { html } from "lit-html";
+import * as icons from "../../../src/components/Icon/icon-registry";
+import { pascalToKebab } from "../../../scripts/shared.mjs";
-export const Template = args => html`
`;
+export const Template = args => {
+ const iconNames = Object.keys(icons).map(i => pascalToKebab(i));
+ return html`
+ ${iconNames.map(
+ i => html`
+
+
+
+ `
+ )}
+
`;
+};
export const args = {};
-export const parameters = {};
+export const parameters = {
+ docs: {
+ source: {
+ code: `
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ `
+ }
+ }
+};
diff --git a/test/icon-button.test.ts b/test/icon-button.test.ts
index a2bbe51f..88bfc2c5 100644
--- a/test/icon-button.test.ts
+++ b/test/icon-button.test.ts
@@ -12,6 +12,7 @@ describe("
", () => {
);
const el = await fixture(html``);
+ await el.updateComplete;
assert.shadowDom.equal(
el,
`
@@ -20,7 +21,7 @@ describe("", () => {
class="btn btn-icon btn-primary btn-md"
tabindex="0"
type="button">
-
+
`
);
diff --git a/test/icon-list.test.ts b/test/icon-list.test.ts
index 94888e52..9e68a048 100644
--- a/test/icon-list.test.ts
+++ b/test/icon-list.test.ts
@@ -12,7 +12,6 @@ describe("", () => {
diff --git a/test/overflow-menu.test.ts b/test/overflow-menu.test.ts
index dd63c58b..53286f37 100644
--- a/test/overflow-menu.test.ts
+++ b/test/overflow-menu.test.ts
@@ -10,7 +10,7 @@ describe("", () => {
`