- - - - + + + +
@@ -31,10 +31,24 @@ Use class `role-primary`: Use class `role-secondary`:
- - - - + + + + + +
+ + + +## Tertiary Button + +Use class `role-tertiary`: + +
+ + + +
diff --git a/stories/FormExample.stories.mdx b/stories/FormExample.stories.mdx new file mode 100644 index 0000000000..c8226bca31 --- /dev/null +++ b/stories/FormExample.stories.mdx @@ -0,0 +1,12 @@ +import { Meta, Canvas, Story } from '@storybook/addon-docs'; +import Banner from '../components/Banner.vue'; + + + + + +# Form Example + +TODO + + diff --git a/stories/Icons.stories.mdx b/stories/Icons.stories.mdx new file mode 100644 index 0000000000..7588df0cb7 --- /dev/null +++ b/stories/Icons.stories.mdx @@ -0,0 +1,48 @@ +import { Meta } from '@storybook/addon-docs'; +import icons from '~/assets/fonts/icons/selection.json'; + + + + + +# Icons + +Icons are created using the standard HTML <i> element with the class `icon` and the class name of the icon, as shown below. + +e.g. + +
<i class="icon icon-show" />+ +
+
+{icons.icons.map((icon, index) => (
+
\ No newline at end of file
diff --git a/stories/Introduction.stories.mdx b/stories/Introduction.stories.mdx
deleted file mode 100644
index 25d845643c..0000000000
--- a/stories/Introduction.stories.mdx
+++ /dev/null
@@ -1,110 +0,0 @@
-import { Meta } from '@storybook/addon-docs';
-
-
-
-
-
-# Welcome to the Rancher Dashboard Storybook
-
diff --git a/stories/ProviderImages.stories.mdx b/stories/ProviderImages.stories.mdx
new file mode 100644
index 0000000000..1100912b60
--- /dev/null
+++ b/stories/ProviderImages.stories.mdx
@@ -0,0 +1,79 @@
+
+import { Meta } from "@storybook/addon-docs";
+import icons from './provider-icons.json';
+
+
+
+
+
+# Provider Images
+
+Images for various providers are included in the `assets/images/providers` folder.
+
+
+
+))}
+{function(icon) { const name = icon.properties.name.split(','); return `icon-${name[0]}`}(icon)}
+
+ Full Color Logos
+ +
+{icons.map((icon, index) => (
+
+
+
+ )
+
+))}
+{icon}
+ Single Color Logos
+ +
+{icons.map((icon, index) => (
+
+
+
+
+
+))}
+{icon}
+ Inverted with CSS - Single Color Logos
+ + +
+{icons.map((icon, index) => (
+
diff --git a/stories/README.md b/stories/README.md
index efd5c81a9f..8c9cbdc582 100644
--- a/stories/README.md
+++ b/stories/README.md
@@ -1,6 +1,6 @@
# Storybook
-By default the Storybook dependencies are not included in the main package file.
+By default the Storybook dependencies are not included in the main package file (it adds a lot of weight to the install process).
If you run any of the targets:
@@ -19,16 +19,24 @@ You can remove the Storybook dependencies with:
- yarn remove-storybook
+# Running Storybook
+
+Just run the command:
+
+```
+yarn storybook
+```
+
+You can access Storybook at the URL: http://127.0.0.1:6006
+
## TODO
-- Make 'Introduction' the landing story
-- Add light/dark theme support with keyboard shortcut (Command-T) to toggle
-- Add Icons page (maybe generated from the info in assets/fonts/icons/variables.scss)
+- Port design-system pages to Storybook
- Add Typography page (for headers etc and padding and margin classes)
- Write short developer reference for how to document components and write stories
- Build out stories for components
- Auto-build via CI and publish to Github pages ?
-- Add some content to the Introduction page
+- Add some content to the Welcome page
- Get i18n working
- Get store working (where required by a component)
diff --git a/stories/Welcome.stories.mdx b/stories/Welcome.stories.mdx
new file mode 100644
index 0000000000..547b1d5e21
--- /dev/null
+++ b/stories/Welcome.stories.mdx
@@ -0,0 +1,12 @@
+
+import { Meta } from "@storybook/addon-docs";
+
+
+
+# Rancher Storybook
+
+Welcome to the Rancher Storybook.
+
+This Storybook documents the components and the design system that is used in the Rancher UIs.
+
+> Note that you can toggle between dark and light modes using the moon/sun icon the toolbar or with the keyboard shortcut CMD+T (Mac) or CTRL+T (Windows/Linux).
\ No newline at end of file
diff --git a/stories/components/ConsumptionGauge.stories.js b/stories/components/ConsumptionGauge.stories.js
new file mode 100644
index 0000000000..e6960513b7
--- /dev/null
+++ b/stories/components/ConsumptionGauge.stories.js
@@ -0,0 +1,33 @@
+import ConsumptionGauge from '@/components/ConsumptionGauge';
+
+export default {
+ title: 'Components/ConsumptionGauge',
+ component: ConsumptionGauge,
+
+};
+
+export const Story = (args, { argTypes}) => ({
+ components: { ConsumptionGauge },
+ props: Object.keys(argTypes),
+ methods: {
+ formatter(value) {
+ const valueAsArray = value.toString().split('');
+
+ valueAsArray.splice(1, 0, ',');
+
+ return valueAsArray.join('');
+ }
+ },
+ template: `
+
+
+
+))}
+{icon}
+
+
`,
+});
+
+Story.story = { name: 'ConsumptionGauge' };
+Story.args = {
+ used: 300,
+ capacity: 789,
+ units: 'GB',
+ resourceName: 'DISK'
+}
diff --git a/stories/components/IconIsDefault.stories.js b/stories/components/IconIsDefault.stories.js
new file mode 100644
index 0000000000..461598d46c
--- /dev/null
+++ b/stories/components/IconIsDefault.stories.js
@@ -0,0 +1,42 @@
+import IconIsDefault from '@/components/formatter/IconIsDefault';
+
+const DefaultColumnState = {
+ name: 'builtIn',
+ value: 'builtIn',
+ formatter: 'IconIsDefault'
+};
+
+const DefaultNotTrue = { builtIn: false };
+const DefaultIsTrue = { builtIn: true };
+
+export default {
+ title: 'Components/Formatters/IconIsDefault',
+ component: IconIsDefault,
+ decorators: [],
+};
+
+export const DefaultStory = () => ({
+ components: { IconIsDefault },
+ data() {
+ return {
+ row: DefaultNotTrue,
+ col: DefaultColumnState
+ };
+ },
+ template: `
+
`,
+});
+
+Story.story = { name: 'PercentageBar' };
+Story.args = {
+ value: 45,
+ showPercentage: true.valueOf,
+ preferredDirection: 'LESS'
+};
+
diff --git a/stories/global.scss b/stories/global.scss
index 3167bb8582..45c0c26708 100644
--- a/stories/global.scss
+++ b/stories/global.scss
@@ -9,4 +9,20 @@ button {
pre.sbdocs {
font-family: monospace;
font-size: 14px;
-}
\ No newline at end of file
+}
+
+BODY, .sbdocs-wrapper {
+ background: var(--body-bg) !important;
+ color: var(--body-text);
+}
+
+H1, H2, H3, H4, H5, H6, P {
+ color: var(--body-text) !important;
+}
+
+CODE:not(.language-jsx) {
+ background-color: var(--box-bg) !important;;
+ border: 1px solid var(--border) !important;;
+ border-radius: var(--border-radius) !important;;
+ color: var(--body-text) !important;
+}
diff --git a/stories/provider-icons.json b/stories/provider-icons.json
new file mode 100644
index 0000000000..7455a480e7
--- /dev/null
+++ b/stories/provider-icons.json
@@ -0,0 +1,18 @@
+[
+ "aliyunecs",
+ "amazonec2",
+ "amazoneks",
+ "azureaks",
+ "digitalocean",
+ "equinix",
+ "googlegke",
+ "k3s",
+ "kubernetes",
+ "linodelke",
+ "minikube",
+ "oci",
+ "openstack",
+ "otc",
+ "pinganyunecs",
+ "pnap"
+]