diff --git a/packages/core/src/stories/utility/utility-classes/align.stories.mdx b/packages/core/src/stories/utility/utility-classes/align.stories.mdx deleted file mode 100644 index eb74c96e0..000000000 --- a/packages/core/src/stories/utility/utility-classes/align.stories.mdx +++ /dev/null @@ -1,15 +0,0 @@ - - -```css -.tds-u-align-start { - align-items: start !important; -} - -.tds-u-align-center { - align-items: center !important; -} - -.tds-u-align-end { - align-items: end !important; -} -``` diff --git a/packages/core/src/stories/utility/utility-classes/align.stories.ts b/packages/core/src/stories/utility/utility-classes/align.stories.ts new file mode 100644 index 000000000..3dac0e415 --- /dev/null +++ b/packages/core/src/stories/utility/utility-classes/align.stories.ts @@ -0,0 +1,37 @@ +import type { Meta } from '@storybook/html'; +import hljs from 'highlight.js'; +import 'highlight.js/styles/default.css'; + +const meta: Meta = { + title: 'Utilities/Utility Classes/Align', + parameters: { + layout: 'fullscreen', + options: { + showPanel: false, + showToolbar: true, + }, + }, +}; + +export default meta; +export const Align = { + render: () => { + const code = ` + .tds-u-align-start { + align-items: start !important; + } + + .tds-u-align-center { + align-items: center !important; + } + + .tds-u-align-end { + align-items: end !important; + } + `; + + const highlightedCode = hljs.highlight(code, { language: 'css' }).value; + + return `
${highlightedCode}
`;
+ },
+};
diff --git a/packages/core/src/stories/utility/utility-classes/display.stories.mdx b/packages/core/src/stories/utility/utility-classes/display.stories.mdx
deleted file mode 100644
index b647455e7..000000000
--- a/packages/core/src/stories/utility/utility-classes/display.stories.mdx
+++ /dev/null
@@ -1,27 +0,0 @@
-
-
-```css
-.tds-u-flex {
- display: flex !important;
-}
-
-.tds-u-inline-flex {
- display: inline-flex;
-}
-
-.tds-u-block {
- display: block !important;
-}
-
-.tds-u-inline-block {
- display: inline-block !important;
-}
-
-.tds-u-grid {
- display: grid !important;
-}
-
-.tds-u-display-none {
- display: none !important;
-}
-```
diff --git a/packages/core/src/stories/utility/utility-classes/display.stories.ts b/packages/core/src/stories/utility/utility-classes/display.stories.ts
new file mode 100644
index 000000000..afc110e6c
--- /dev/null
+++ b/packages/core/src/stories/utility/utility-classes/display.stories.ts
@@ -0,0 +1,49 @@
+import type { Meta } from '@storybook/html';
+import hljs from 'highlight.js';
+import 'highlight.js/styles/default.css';
+
+const meta: Meta = {
+ title: 'Utilities/Utility Classes/Display',
+ parameters: {
+ layout: 'fullscreen',
+ options: {
+ showPanel: false,
+ showToolbar: true,
+ },
+ },
+};
+
+export default meta;
+export const Display = {
+ render: () => {
+ const code = `
+ .tds-u-flex {
+ display: flex !important;
+ }
+
+ .tds-u-inline-flex {
+ display: inline-flex;
+ }
+
+ .tds-u-block {
+ display: block !important;
+ }
+
+ .tds-u-inline-block {
+ display: inline-block !important;
+ }
+
+ .tds-u-grid {
+ display: grid !important;
+ }
+
+ .tds-u-display-none {
+ display: none !important;
+ }
+ `;
+
+ const highlightedCode = hljs.highlight(code, { language: 'css' }).value;
+
+ return `${highlightedCode}
`;
+ },
+};
diff --git a/packages/core/src/stories/utility/utility-classes/flex.stories.mdx b/packages/core/src/stories/utility/utility-classes/flex.stories.mdx
deleted file mode 100644
index a02ab53d9..000000000
--- a/packages/core/src/stories/utility/utility-classes/flex.stories.mdx
+++ /dev/null
@@ -1,27 +0,0 @@
-
-
-```css
-.tds-u-flex-start {
- display: flex !important;
- justify-content: flex-start !important;
-}
-
-.tds-u-flex-end {
- display: flex !important;
- justify-content: flex-end !important;
-}
-
-.tds-u-flex-center {
- display: flex !important;
- justify-content: center !important;
- align-items: center !important;
-}
-
-.tds-u-flex-dir-col {
- flex-direction: column !important;
-}
-
-.tds-u-flex-wrap {
- flex-wrap: wrap !important;
-}
-```
diff --git a/packages/core/src/stories/utility/utility-classes/flex.stories.ts b/packages/core/src/stories/utility/utility-classes/flex.stories.ts
new file mode 100644
index 000000000..cdb75d673
--- /dev/null
+++ b/packages/core/src/stories/utility/utility-classes/flex.stories.ts
@@ -0,0 +1,49 @@
+import type { Meta } from '@storybook/html';
+import hljs from 'highlight.js';
+import 'highlight.js/styles/default.css';
+
+const meta: Meta = {
+ title: 'Utilities/Utility Classes/Flex',
+ parameters: {
+ layout: 'fullscreen',
+ options: {
+ showPanel: false,
+ showToolbar: true,
+ },
+ },
+};
+
+export default meta;
+export const Flex = {
+ render: () => {
+ const code = `
+ .tds-u-flex-start {
+ display: flex !important;
+ justify-content: flex-start !important;
+ }
+
+ .tds-u-flex-end {
+ display: flex !important;
+ justify-content: flex-end !important;
+ }
+
+ .tds-u-flex-center {
+ display: flex !important;
+ justify-content: center !important;
+ align-items: center !important;
+ }
+
+ .tds-u-flex-dir-col {
+ flex-direction: column !important;
+ }
+
+ .tds-u-flex-wrap {
+ flex-wrap: wrap !important;
+ }
+ `;
+
+ const highlightedCode = hljs.highlight(code, { language: 'css' }).value;
+
+ return `${highlightedCode}
`;
+ },
+};
diff --git a/packages/core/src/stories/utility/utility-classes/float.stories.mdx b/packages/core/src/stories/utility/utility-classes/float.stories.mdx
deleted file mode 100644
index b8dca898d..000000000
--- a/packages/core/src/stories/utility/utility-classes/float.stories.mdx
+++ /dev/null
@@ -1,15 +0,0 @@
-
-
-```css
-.tds-u-float-right {
- float: right !important;
-}
-
-.tds-u-float-left {
- float: left !important;
-}
-
-.tds-u-float-none {
- float: none !important;
-}
-```
diff --git a/packages/core/src/stories/utility/utility-classes/float.stories.ts b/packages/core/src/stories/utility/utility-classes/float.stories.ts
new file mode 100644
index 000000000..adc024bb8
--- /dev/null
+++ b/packages/core/src/stories/utility/utility-classes/float.stories.ts
@@ -0,0 +1,37 @@
+import type { Meta } from '@storybook/html';
+import hljs from 'highlight.js';
+import 'highlight.js/styles/default.css';
+
+const meta: Meta = {
+ title: 'Utilities/Utility Classes/Float',
+ parameters: {
+ layout: 'fullscreen',
+ options: {
+ showPanel: false,
+ showToolbar: true,
+ },
+ },
+};
+
+export default meta;
+export const Float = {
+ render: () => {
+ const code = `
+ .tds-u-float-right {
+ float: right !important;
+ }
+
+ .tds-u-float-left {
+ float: left !important;
+ }
+
+ .tds-u-float-none {
+ float: none !important;
+ }
+ `;
+
+ const highlightedCode = hljs.highlight(code, { language: 'css' }).value;
+
+ return `${highlightedCode}
`;
+ },
+};
diff --git a/packages/core/src/stories/utility/utility-classes/gap.stories.mdx b/packages/core/src/stories/utility/utility-classes/gap.stories.mdx
deleted file mode 100644
index 092c62a39..000000000
--- a/packages/core/src/stories/utility/utility-classes/gap.stories.mdx
+++ /dev/null
@@ -1,19 +0,0 @@
-
-
-```css
-.tds-u-gap1 {
- gap: 8px !important;
-}
-
-.tds-u-gap2 {
- gap: 16px !important;
-}
-
-.tds-u-gap3 {
- gap: 24px !important;
-}
-
-.tds-u-gap4 {
- gap: 32px !important;
-}
-```
diff --git a/packages/core/src/stories/utility/utility-classes/gap.stories.ts b/packages/core/src/stories/utility/utility-classes/gap.stories.ts
new file mode 100644
index 000000000..9b82c30e6
--- /dev/null
+++ b/packages/core/src/stories/utility/utility-classes/gap.stories.ts
@@ -0,0 +1,41 @@
+import type { Meta } from '@storybook/html';
+import hljs from 'highlight.js';
+import 'highlight.js/styles/default.css';
+
+const meta: Meta = {
+ title: 'Utilities/Utility Classes/Gap',
+ parameters: {
+ layout: 'fullscreen',
+ options: {
+ showPanel: false,
+ showToolbar: true,
+ },
+ },
+};
+
+export default meta;
+export const Gap = {
+ render: () => {
+ const code = `
+ .tds-u-gap1 {
+ gap: 8px !important;
+ }
+
+ .tds-u-gap2 {
+ gap: 16px !important;
+ }
+
+ .tds-u-gap3 {
+ gap: 24px !important;
+ }
+
+ .tds-u-gap4 {
+ gap: 32px !important;
+ }
+ `;
+
+ const highlightedCode = hljs.highlight(code, { language: 'css' }).value;
+
+ return `${highlightedCode}
`;
+ },
+};
diff --git a/packages/core/src/stories/utility/utility-classes/height.stories.mdx b/packages/core/src/stories/utility/utility-classes/height.stories.mdx
deleted file mode 100644
index 76c514462..000000000
--- a/packages/core/src/stories/utility/utility-classes/height.stories.mdx
+++ /dev/null
@@ -1,23 +0,0 @@
-
-
-```css
-.tds-u-h-auto {
- height: auto !important;
-}
-
-.tds-u-h-100 {
- height: 100% !important;
-}
-
-.tds-u-h-75 {
- height: 75% !important;
-}
-
-.tds-u-h-50 {
- height: 50% !important;
-}
-
-.tds-u-h-25 {
- height: 25% !important;
-}
-```
diff --git a/packages/core/src/stories/utility/utility-classes/height.stories.ts b/packages/core/src/stories/utility/utility-classes/height.stories.ts
new file mode 100644
index 000000000..8e310e3af
--- /dev/null
+++ b/packages/core/src/stories/utility/utility-classes/height.stories.ts
@@ -0,0 +1,45 @@
+import type { Meta } from '@storybook/html';
+import hljs from 'highlight.js';
+import 'highlight.js/styles/default.css';
+
+const meta: Meta = {
+ title: 'Utilities/Utility Classes/Height',
+ parameters: {
+ layout: 'fullscreen',
+ options: {
+ showPanel: false,
+ showToolbar: true,
+ },
+ },
+};
+
+export default meta;
+export const Height = {
+ render: () => {
+ const code = `
+ .tds-u-h-auto {
+ height: auto !important;
+ }
+
+ .tds-u-h-100 {
+ height: 100% !important;
+ }
+
+ .tds-u-h-75 {
+ height: 75% !important;
+ }
+
+ .tds-u-h-50 {
+ height: 50% !important;
+ }
+
+ .tds-u-h-25 {
+ height: 25% !important;
+ }
+ `;
+
+ const highlightedCode = hljs.highlight(code, { language: 'css' }).value;
+
+ return `${highlightedCode}
`;
+ },
+};
diff --git a/packages/core/src/stories/utility/utility-classes/justify.stories.mdx b/packages/core/src/stories/utility/utility-classes/justify.stories.mdx
deleted file mode 100644
index dff767e53..000000000
--- a/packages/core/src/stories/utility/utility-classes/justify.stories.mdx
+++ /dev/null
@@ -1,15 +0,0 @@
-
-
-```css
-.tds-u-justify-between {
- justify-content: space-between !important;
-}
-
-.tds-u-justify-around {
- justify-content: space-around !important;
-}
-
-.tds-u-justify-center {
- justify-content: center !important;
-}
-```
diff --git a/packages/core/src/stories/utility/utility-classes/justify.stories.ts b/packages/core/src/stories/utility/utility-classes/justify.stories.ts
new file mode 100644
index 000000000..484bce1d6
--- /dev/null
+++ b/packages/core/src/stories/utility/utility-classes/justify.stories.ts
@@ -0,0 +1,37 @@
+import type { Meta } from '@storybook/html';
+import hljs from 'highlight.js';
+import 'highlight.js/styles/default.css';
+
+const meta: Meta = {
+ title: 'Utilities/Utility Classes/Justify',
+ parameters: {
+ layout: 'fullscreen',
+ options: {
+ showPanel: false,
+ showToolbar: true,
+ },
+ },
+};
+
+export default meta;
+export const Justify = {
+ render: () => {
+ const code = `
+ .tds-u-justify-between {
+ justify-content: space-between !important;
+ }
+
+ .tds-u-justify-around {
+ justify-content: space-around !important;
+ }
+
+ .tds-u-justify-center {
+ justify-content: center !important;
+ }
+ `;
+
+ const highlightedCode = hljs.highlight(code, { language: 'css' }).value;
+
+ return `${highlightedCode}
`;
+ },
+};
diff --git a/packages/core/src/stories/utility/utility-classes/margin.stories.mdx b/packages/core/src/stories/utility/utility-classes/margin.stories.mdx
deleted file mode 100644
index 6a0fabb9d..000000000
--- a/packages/core/src/stories/utility/utility-classes/margin.stories.mdx
+++ /dev/null
@@ -1,103 +0,0 @@
-
-
-```css
-.tds-u-m0 {
- margin: 0 !important;
-}
-
-.tds-u-mt0 {
- margin-top: 0 !important;
-}
-
-.tds-u-mr0 {
- margin-right: 0 !important;
-}
-
-.tds-u-mb0 {
- margin-bottom: 0 !important;
-}
-
-.tds-u-ml0 {
- margin-left: 0 !important;
-}
-
-.tds-u-m1 {
- margin: 8px !important;
-}
-
-.tds-u-mt1 {
- margin-top: 8px !important;
-}
-
-.tds-u-mr1 {
- margin-right: 8px !important;
-}
-
-.tds-u-mb1 {
- margin-bottom: 8px !important;
-}
-
-.tds-u-ml1 {
- margin-left: 8px !important;
-}
-
-.tds-u-m2 {
- margin: 16px !important;
-}
-
-.tds-u-mt2 {
- margin-top: 16px !important;
-}
-
-.tds-u-mr2 {
- margin-right: 16px !important;
-}
-
-.tds-u-mb2 {
- margin-bottom: 16px !important;
-}
-
-.tds-u-ml2 {
- margin-left: 16px !important;
-}
-
-.tds-u-m3 {
- margin: 24px !important;
-}
-
-.tds-u-mt3 {
- margin-top: 24px !important;
-}
-
-.tds-u-mr3 {
- margin-right: 24px !important;
-}
-
-.tds-u-mb3 {
- margin-bottom: 24px !important;
-}
-
-.tds-u-ml3 {
- margin-left: 24px !important;
-}
-
-.tds-u-m-auto {
- margin: auto !important;
-}
-
-.tds-u-mt-auto {
- margin-top: auto !important;
-}
-
-.tds-u-mr-auto {
- margin-right: auto !important;
-}
-
-.tds-u-ml-auto {
- margin-left: auto !important;
-}
-
-.tds-u-mb-auto {
- margin-bottom: auto !important;
-}
-```
diff --git a/packages/core/src/stories/utility/utility-classes/margin.stories.ts b/packages/core/src/stories/utility/utility-classes/margin.stories.ts
new file mode 100644
index 000000000..3f0b9efab
--- /dev/null
+++ b/packages/core/src/stories/utility/utility-classes/margin.stories.ts
@@ -0,0 +1,125 @@
+import type { Meta } from '@storybook/html';
+import hljs from 'highlight.js';
+import 'highlight.js/styles/default.css';
+
+const meta: Meta = {
+ title: 'Utilities/Utility Classes/Margin',
+ parameters: {
+ layout: 'fullscreen',
+ options: {
+ showPanel: false,
+ showToolbar: true,
+ },
+ },
+};
+
+export default meta;
+export const Margin = {
+ render: () => {
+ const code = `
+ .tds-u-m0 {
+ margin: 0 !important;
+ }
+
+ .tds-u-mt0 {
+ margin-top: 0 !important;
+ }
+
+ .tds-u-mr0 {
+ margin-right: 0 !important;
+ }
+
+ .tds-u-mb0 {
+ margin-bottom: 0 !important;
+ }
+
+ .tds-u-ml0 {
+ margin-left: 0 !important;
+ }
+
+ .tds-u-m1 {
+ margin: 8px !important;
+ }
+
+ .tds-u-mt1 {
+ margin-top: 8px !important;
+ }
+
+ .tds-u-mr1 {
+ margin-right: 8px !important;
+ }
+
+ .tds-u-mb1 {
+ margin-bottom: 8px !important;
+ }
+
+ .tds-u-ml1 {
+ margin-left: 8px !important;
+ }
+
+ .tds-u-m2 {
+ margin: 16px !important;
+ }
+
+ .tds-u-mt2 {
+ margin-top: 16px !important;
+ }
+
+ .tds-u-mr2 {
+ margin-right: 16px !important;
+ }
+
+ .tds-u-mb2 {
+ margin-bottom: 16px !important;
+ }
+
+ .tds-u-ml2 {
+ margin-left: 16px !important;
+ }
+
+ .tds-u-m3 {
+ margin: 24px !important;
+ }
+
+ .tds-u-mt3 {
+ margin-top: 24px !important;
+ }
+
+ .tds-u-mr3 {
+ margin-right: 24px !important;
+ }
+
+ .tds-u-mb3 {
+ margin-bottom: 24px !important;
+ }
+
+ .tds-u-ml3 {
+ margin-left: 24px !important;
+ }
+
+ .tds-u-m-auto {
+ margin: auto !important;
+ }
+
+ .tds-u-mt-auto {
+ margin-top: auto !important;
+ }
+
+ .tds-u-mr-auto {
+ margin-right: auto !important;
+ }
+
+ .tds-u-ml-auto {
+ margin-left: auto !important;
+ }
+
+ .tds-u-mb-auto {
+ margin-bottom: auto !important;
+ }
+ `;
+
+ const highlightedCode = hljs.highlight(code, { language: 'css' }).value;
+
+ return `${highlightedCode}
`;
+ },
+};
diff --git a/packages/core/src/stories/utility/utility-classes/opacity.stories.mdx b/packages/core/src/stories/utility/utility-classes/opacity.stories.mdx
deleted file mode 100644
index 61b673635..000000000
--- a/packages/core/src/stories/utility/utility-classes/opacity.stories.mdx
+++ /dev/null
@@ -1,19 +0,0 @@
-
-
-```css
-.tds-u-opacity-100 {
- opacity: 1 !important;
-}
-
-.tds-u-opacity-75 {
- opacity: 0.75 !important;
-}
-
-.tds-u-opacity-50 {
- opacity: 0.5 !important;
-}
-
-.tds-u-opacity-25 {
- opacity: 0.25 !important;
-}
-```
diff --git a/packages/core/src/stories/utility/utility-classes/opacity.stories.ts b/packages/core/src/stories/utility/utility-classes/opacity.stories.ts
new file mode 100644
index 000000000..989710a73
--- /dev/null
+++ b/packages/core/src/stories/utility/utility-classes/opacity.stories.ts
@@ -0,0 +1,41 @@
+import type { Meta } from '@storybook/html';
+import hljs from 'highlight.js';
+import 'highlight.js/styles/default.css';
+
+const meta: Meta = {
+ title: 'Utilities/Utility Classes/Opacity',
+ parameters: {
+ layout: 'fullscreen',
+ options: {
+ showPanel: false,
+ showToolbar: true,
+ },
+ },
+};
+
+export default meta;
+export const Opacity = {
+ render: () => {
+ const code = `
+ .tds-u-opacity-100 {
+ opacity: 1 !important;
+ }
+
+ .tds-u-opacity-75 {
+ opacity: 0.75 !important;
+ }
+
+ .tds-u-opacity-50 {
+ opacity: 0.5 !important;
+ }
+
+ .tds-u-opacity-25 {
+ opacity: 0.25 !important;
+ }
+ `;
+
+ const highlightedCode = hljs.highlight(code, { language: 'css' }).value;
+
+ return `${highlightedCode}
`;
+ },
+};
diff --git a/packages/core/src/stories/utility/utility-classes/overflow.stories.mdx b/packages/core/src/stories/utility/utility-classes/overflow.stories.mdx
deleted file mode 100644
index 55cb3b6b6..000000000
--- a/packages/core/src/stories/utility/utility-classes/overflow.stories.mdx
+++ /dev/null
@@ -1,19 +0,0 @@
-
-
-```css
-.tds-u-overflow-auto {
- overflow: auto !important;
-}
-
-.tds-u-overflow-scroll {
- overflow: scroll !important;
-}
-
-.tds-u-overflow-hidden {
- overflow: hidden !important;
-}
-
-.tds-u-overflow-visible {
- overflow: visible !important;
-}
-```
diff --git a/packages/core/src/stories/utility/utility-classes/overflow.stories.ts b/packages/core/src/stories/utility/utility-classes/overflow.stories.ts
new file mode 100644
index 000000000..95df68432
--- /dev/null
+++ b/packages/core/src/stories/utility/utility-classes/overflow.stories.ts
@@ -0,0 +1,41 @@
+import type { Meta } from '@storybook/html';
+import hljs from 'highlight.js';
+import 'highlight.js/styles/default.css';
+
+const meta: Meta = {
+ title: 'Utilities/Utility Classes/Overflow',
+ parameters: {
+ layout: 'fullscreen',
+ options: {
+ showPanel: false,
+ showToolbar: true,
+ },
+ },
+};
+
+export default meta;
+export const Overflow = {
+ render: () => {
+ const code = `
+ .tds-u-overflow-auto {
+ overflow: auto !important;
+ }
+
+ .tds-u-overflow-scroll {
+ overflow: scroll !important;
+ }
+
+ .tds-u-overflow-hidden {
+ overflow: hidden !important;
+ }
+
+ .tds-u-overflow-visible {
+ overflow: visible !important;
+ }
+ `;
+
+ const highlightedCode = hljs.highlight(code, { language: 'css' }).value;
+
+ return `${highlightedCode}
`;
+ },
+};
diff --git a/packages/core/src/stories/utility/utility-classes/padding.stories.mdx b/packages/core/src/stories/utility/utility-classes/padding.stories.mdx
deleted file mode 100644
index bc9acf466..000000000
--- a/packages/core/src/stories/utility/utility-classes/padding.stories.mdx
+++ /dev/null
@@ -1,83 +0,0 @@
-
-
-```css
-.tds-u-p0 {
- padding: 0 !important;
-}
-
-.tds-u-pt0 {
- padding-top: 0 !important;
-}
-
-.tds-u-pr0 {
- padding-right: 0 !important;
-}
-
-.tds-u-pb0 {
- padding-bottom: 0 !important;
-}
-
-.tds-u-pl0 {
- padding-left: 0 !important;
-}
-
-.tds-u-p1 {
- padding: 8px !important;
-}
-
-.tds-u-pt1 {
- padding-top: 8px !important;
-}
-
-.tds-u-pr1 {
- padding-right: 8px !important;
-}
-
-.tds-u-pb1 {
- padding-bottom: 8px !important;
-}
-
-.tds-u-pl1 {
- padding-left: 8px !important;
-}
-
-.tds-u-p2 {
- padding: 16px !important;
-}
-
-.tds-u-pt2 {
- padding-top: 16px !important;
-}
-
-.tds-u-pr2 {
- padding-right: 16px !important;
-}
-
-.tds-u-pb2 {
- padding-bottom: 16px !important;
-}
-
-.tds-u-pl2 {
- padding-left: 16px !important;
-}
-
-.tds-u-p3 {
- padding: 24px !important;
-}
-
-.tds-u-pt3 {
- padding-top: 24px !important;
-}
-
-.tds-u-pr3 {
- padding-right: 24px !important;
-}
-
-.tds-u-pb3 {
- padding-bottom: 24px !important;
-}
-
-.tds-u-pl3 {
- padding-left: 24px !important;
-}
-```
diff --git a/packages/core/src/stories/utility/utility-classes/padding.stories.ts b/packages/core/src/stories/utility/utility-classes/padding.stories.ts
new file mode 100644
index 000000000..d7b6eff85
--- /dev/null
+++ b/packages/core/src/stories/utility/utility-classes/padding.stories.ts
@@ -0,0 +1,105 @@
+import type { Meta } from '@storybook/html';
+import hljs from 'highlight.js';
+import 'highlight.js/styles/default.css';
+
+const meta: Meta = {
+ title: 'Utilities/Utility Classes/Padding',
+ parameters: {
+ layout: 'fullscreen',
+ options: {
+ showPanel: false,
+ showToolbar: true,
+ },
+ },
+};
+
+export default meta;
+export const Padding = {
+ render: () => {
+ const code = `
+ .tds-u-p0 {
+ padding: 0 !important;
+ }
+
+ .tds-u-pt0 {
+ padding-top: 0 !important;
+ }
+
+ .tds-u-pr0 {
+ padding-right: 0 !important;
+ }
+
+ .tds-u-pb0 {
+ padding-bottom: 0 !important;
+ }
+
+ .tds-u-pl0 {
+ padding-left: 0 !important;
+ }
+
+ .tds-u-p1 {
+ padding: 8px !important;
+ }
+
+ .tds-u-pt1 {
+ padding-top: 8px !important;
+ }
+
+ .tds-u-pr1 {
+ padding-right: 8px !important;
+ }
+
+ .tds-u-pb1 {
+ padding-bottom: 8px !important;
+ }
+
+ .tds-u-pl1 {
+ padding-left: 8px !important;
+ }
+
+ .tds-u-p2 {
+ padding: 16px !important;
+ }
+
+ .tds-u-pt2 {
+ padding-top: 16px !important;
+ }
+
+ .tds-u-pr2 {
+ padding-right: 16px !important;
+ }
+
+ .tds-u-pb2 {
+ padding-bottom: 16px !important;
+ }
+
+ .tds-u-pl2 {
+ padding-left: 16px !important;
+ }
+
+ .tds-u-p3 {
+ padding: 24px !important;
+ }
+
+ .tds-u-pt3 {
+ padding-top: 24px !important;
+ }
+
+ .tds-u-pr3 {
+ padding-right: 24px !important;
+ }
+
+ .tds-u-pb3 {
+ padding-bottom: 24px !important;
+ }
+
+ .tds-u-pl3 {
+ padding-left: 24px !important;
+ }
+ `;
+
+ const highlightedCode = hljs.highlight(code, { language: 'css' }).value;
+
+ return `${highlightedCode}
`;
+ },
+};
diff --git a/packages/core/src/stories/utility/utility-classes/placement.stories.mdx b/packages/core/src/stories/utility/utility-classes/placement.stories.mdx
deleted file mode 100644
index 5ba9a3ebd..000000000
--- a/packages/core/src/stories/utility/utility-classes/placement.stories.mdx
+++ /dev/null
@@ -1,19 +0,0 @@
-
-
-```css
-.tds-u-top0 {
- top: 0 !important;
-}
-
-.tds-u-right0 {
- right: 0 !important;
-}
-
-.tds-u-bottom0 {
- bottom: 0 !important;
-}
-
-.tds-u-left0 {
- left: 0 !important;
-}
-```
diff --git a/packages/core/src/stories/utility/utility-classes/placement.stories.ts b/packages/core/src/stories/utility/utility-classes/placement.stories.ts
new file mode 100644
index 000000000..7a4125d5f
--- /dev/null
+++ b/packages/core/src/stories/utility/utility-classes/placement.stories.ts
@@ -0,0 +1,41 @@
+import type { Meta } from '@storybook/html';
+import hljs from 'highlight.js';
+import 'highlight.js/styles/default.css';
+
+const meta: Meta = {
+ title: 'Utilities/Utility Classes/Placement',
+ parameters: {
+ layout: 'fullscreen',
+ options: {
+ showPanel: false,
+ showToolbar: true,
+ },
+ },
+};
+
+export default meta;
+export const Placement = {
+ render: () => {
+ const code = `
+ .tds-u-top0 {
+ top: 0 !important;
+ }
+
+ .tds-u-right0 {
+ right: 0 !important;
+ }
+
+ .tds-u-bottom0 {
+ bottom: 0 !important;
+ }
+
+ .tds-u-left0 {
+ left: 0 !important;
+ }
+ `;
+
+ const highlightedCode = hljs.highlight(code, { language: 'css' }).value;
+
+ return `${highlightedCode}
`;
+ },
+};
diff --git a/packages/core/src/stories/utility/utility-classes/position.stories.mdx b/packages/core/src/stories/utility/utility-classes/position.stories.mdx
deleted file mode 100644
index 057592f38..000000000
--- a/packages/core/src/stories/utility/utility-classes/position.stories.mdx
+++ /dev/null
@@ -1,23 +0,0 @@
-
-
-```css
-.tds-u-sticky {
- position: sticky !important;
-}
-
-.tds-u-static {
- position: static !important;
-}
-
-.tds-u-relative {
- position: relative !important;
-}
-
-.tds-u-absolute {
- position: absolute !important;
-}
-
-.tds-u-fixed {
- position: fixed !important;
-}
-```
diff --git a/packages/core/src/stories/utility/utility-classes/position.stories.ts b/packages/core/src/stories/utility/utility-classes/position.stories.ts
new file mode 100644
index 000000000..60f78b479
--- /dev/null
+++ b/packages/core/src/stories/utility/utility-classes/position.stories.ts
@@ -0,0 +1,45 @@
+import type { Meta } from '@storybook/html';
+import hljs from 'highlight.js';
+import 'highlight.js/styles/default.css';
+
+const meta: Meta = {
+ title: 'Utilities/Utility Classes/Position',
+ parameters: {
+ layout: 'fullscreen',
+ options: {
+ showPanel: false,
+ showToolbar: true,
+ },
+ },
+};
+
+export default meta;
+export const Position = {
+ render: () => {
+ const code = `
+ .tds-u-sticky {
+ position: sticky !important;
+ }
+
+ .tds-u-static {
+ position: static !important;
+ }
+
+ .tds-u-relative {
+ position: relative !important;
+ }
+
+ .tds-u-absolute {
+ position: absolute !important;
+ }
+
+ .tds-u-fixed {
+ position: fixed !important;
+ }
+ `;
+
+ const highlightedCode = hljs.highlight(code, { language: 'css' }).value;
+
+ return `${highlightedCode}
`;
+ },
+};
diff --git a/packages/core/src/stories/utility/utility-classes/text-alignment.stories.mdx b/packages/core/src/stories/utility/utility-classes/text-alignment.stories.mdx
deleted file mode 100644
index 31c054ca5..000000000
--- a/packages/core/src/stories/utility/utility-classes/text-alignment.stories.mdx
+++ /dev/null
@@ -1,15 +0,0 @@
-
-
-```css
-.tds-u-textalign-start {
- text-align: start !important;
-}
-
-.tds-u-textalign-center {
- text-align: center !important;
-}
-
-.tds-u-textalign-end {
- text-align: end !important;
-}
-```
diff --git a/packages/core/src/stories/utility/utility-classes/text-alignment.stories.ts b/packages/core/src/stories/utility/utility-classes/text-alignment.stories.ts
new file mode 100644
index 000000000..ca268d7b9
--- /dev/null
+++ b/packages/core/src/stories/utility/utility-classes/text-alignment.stories.ts
@@ -0,0 +1,37 @@
+import type { Meta } from '@storybook/html';
+import hljs from 'highlight.js';
+import 'highlight.js/styles/default.css';
+
+const meta: Meta = {
+ title: 'Utilities/Utility Classes/Text Alignment',
+ parameters: {
+ layout: 'fullscreen',
+ options: {
+ showPanel: false,
+ showToolbar: true,
+ },
+ },
+};
+
+export default meta;
+export const TextAlignment = {
+ render: () => {
+ const code = `
+ .tds-u-textalign-start {
+ text-align: start !important;
+ }
+
+ .tds-u-textalign-center {
+ text-align: center !important;
+ }
+
+ .tds-u-textalign-end {
+ text-align: end !important;
+ }
+ `;
+
+ const highlightedCode = hljs.highlight(code, { language: 'css' }).value;
+
+ return `${highlightedCode}
`;
+ },
+};
diff --git a/packages/core/src/stories/utility/utility-classes/visibility.stories.mdx b/packages/core/src/stories/utility/utility-classes/visibility.stories.mdx
deleted file mode 100644
index 9bbecfa74..000000000
--- a/packages/core/src/stories/utility/utility-classes/visibility.stories.mdx
+++ /dev/null
@@ -1,11 +0,0 @@
-
-
-```css
-.tds-u-visibility-hidden {
- visibility: hidden !important;
-}
-
-.tds-u-visibility-visible {
- visibility: visible !important;
-}
-```
diff --git a/packages/core/src/stories/utility/utility-classes/visibility.stories.ts b/packages/core/src/stories/utility/utility-classes/visibility.stories.ts
new file mode 100644
index 000000000..8e917b6a1
--- /dev/null
+++ b/packages/core/src/stories/utility/utility-classes/visibility.stories.ts
@@ -0,0 +1,33 @@
+import type { Meta } from '@storybook/html';
+import hljs from 'highlight.js';
+import 'highlight.js/styles/default.css';
+
+const meta: Meta = {
+ title: 'Utilities/Utility Classes/Visibility',
+ parameters: {
+ layout: 'fullscreen',
+ options: {
+ showPanel: false,
+ showToolbar: true,
+ },
+ },
+};
+
+export default meta;
+export const Visibility = {
+ render: () => {
+ const code = `
+ .tds-u-visibility-hidden {
+ visibility: hidden !important;
+ }
+
+ .tds-u-visibility-visible {
+ visibility: visible !important;
+ }
+ `;
+
+ const highlightedCode = hljs.highlight(code, { language: 'css' }).value;
+
+ return `${highlightedCode}
`;
+ },
+};
diff --git a/packages/core/src/stories/utility/utility-classes/width.stories.mdx b/packages/core/src/stories/utility/utility-classes/width.stories.mdx
deleted file mode 100644
index 07883ea81..000000000
--- a/packages/core/src/stories/utility/utility-classes/width.stories.mdx
+++ /dev/null
@@ -1,23 +0,0 @@
-
-
-```css
-.tds-u-w-auto {
- width: auto !important;
-}
-
-.tds-u-w-100 {
- width: 100% !important;
-}
-
-.tds-u-w-75 {
- width: 75% !important;
-}
-
-.tds-u-w-50 {
- width: 50% !important;
-}
-
-.tds-u-w-25 {
- width: 25% !important;
-}
-```
diff --git a/packages/core/src/stories/utility/utility-classes/width.stories.ts b/packages/core/src/stories/utility/utility-classes/width.stories.ts
new file mode 100644
index 000000000..2edb52336
--- /dev/null
+++ b/packages/core/src/stories/utility/utility-classes/width.stories.ts
@@ -0,0 +1,45 @@
+import type { Meta } from '@storybook/html';
+import hljs from 'highlight.js';
+import 'highlight.js/styles/default.css';
+
+const meta: Meta = {
+ title: 'Utilities/Utility Classes/Width',
+ parameters: {
+ layout: 'fullscreen',
+ options: {
+ showPanel: false,
+ showToolbar: true,
+ },
+ },
+};
+
+export default meta;
+export const Width = {
+ render: () => {
+ const code = `
+ .tds-u-w-auto {
+ width: auto !important;
+ }
+
+ .tds-u-w-100 {
+ width: 100% !important;
+ }
+
+ .tds-u-w-75 {
+ width: 75% !important;
+ }
+
+ .tds-u-w-50 {
+ width: 50% !important;
+ }
+
+ .tds-u-w-25 {
+ width: 25% !important;
+ }
+ `;
+
+ const highlightedCode = hljs.highlight(code, { language: 'css' }).value;
+
+ return `${highlightedCode}
`;
+ },
+};
diff --git a/packages/core/src/stories/utility/utility-classes/z-index.stories.mdx b/packages/core/src/stories/utility/utility-classes/z-index.stories.mdx
deleted file mode 100644
index 20873e3df..000000000
--- a/packages/core/src/stories/utility/utility-classes/z-index.stories.mdx
+++ /dev/null
@@ -1,19 +0,0 @@
-
-
-```css
-.tds-u-z10 {
- z-index: 10 !important;
-}
-
-.tds-u-z100 {
- z-index: 100 !important;
-}
-
-.tds-u-z500 {
- z-index: 500 !important;
-}
-
-.tds-u-z1000 {
- z-index: 1000 !important;
-}
-```
diff --git a/packages/core/src/stories/utility/utility-classes/z-index.stories.ts b/packages/core/src/stories/utility/utility-classes/z-index.stories.ts
new file mode 100644
index 000000000..5cfc99e54
--- /dev/null
+++ b/packages/core/src/stories/utility/utility-classes/z-index.stories.ts
@@ -0,0 +1,41 @@
+import type { Meta } from '@storybook/html';
+import hljs from 'highlight.js';
+import 'highlight.js/styles/default.css';
+
+const meta: Meta = {
+ title: 'Utilities/Utility Classes/Z Index',
+ parameters: {
+ layout: 'fullscreen',
+ options: {
+ showPanel: false,
+ showToolbar: true,
+ },
+ },
+};
+
+export default meta;
+export const ZIndex = {
+ render: () => {
+ const code = `
+ .tds-u-z10 {
+ z-index: 10 !important;
+ }
+
+ .tds-u-z100 {
+ z-index: 100 !important;
+ }
+
+ .tds-u-z500 {
+ z-index: 500 !important;
+ }
+
+ .tds-u-z1000 {
+ z-index: 1000 !important;
+ }
+ `;
+
+ const highlightedCode = hljs.highlight(code, { language: 'css' }).value;
+
+ return `${highlightedCode}
`;
+ },
+};