button component reworked; added example story with documentation + i…

…mage
Infineon · Jun 23, 2023 · 712ca3d · 712ca3d
1 parent 8979738
commit 712ca3d
Show file tree

Hide file tree

Showing 13 changed files with 243 additions and 169 deletions.
diff --git a/packages/components-react/lib/components/stencil-generated/index.ts b/packages/components-react/lib/components/stencil-generated/index.ts
@@ -26,6 +26,7 @@ export const IfxDropdown = /*@__PURE__*/createReactComponent<JSX.IfxDropdown, HT
 export const IfxDropdownDivider = /*@__PURE__*/createReactComponent<JSX.IfxDropdownDivider, HTMLIfxDropdownDividerElement>('ifx-dropdown-divider');
 export const IfxDropdownItem = /*@__PURE__*/createReactComponent<JSX.IfxDropdownItem, HTMLIfxDropdownItemElement>('ifx-dropdown-item');
 export const IfxDropdownMenu = /*@__PURE__*/createReactComponent<JSX.IfxDropdownMenu, HTMLIfxDropdownMenuElement>('ifx-dropdown-menu');
+export const IfxExample = /*@__PURE__*/createReactComponent<JSX.IfxExample, HTMLIfxExampleElement>('ifx-example');
 export const IfxFilterInput = /*@__PURE__*/createReactComponent<JSX.IfxFilterInput, HTMLIfxFilterInputElement>('ifx-filter-input');
 export const IfxFooter = /*@__PURE__*/createReactComponent<JSX.IfxFooter, HTMLIfxFooterElement>('ifx-footer');
 export const IfxFooterColumn = /*@__PURE__*/createReactComponent<JSX.IfxFooterColumn, HTMLIfxFooterColumnElement>('ifx-footer-column');

diff --git a/packages/components-vue/lib/components.ts b/packages/components-vue/lib/components.ts
@@ -132,6 +132,19 @@ export const IfxDropdownMenu = /*@__PURE__*/ defineContainer<JSX.IfxDropdownMenu
 ]);
 
 
+export const IfxExample = /*@__PURE__*/ defineContainer<JSX.IfxExample>('ifx-example', undefined, [
+  'variant',
+  'color',
+  'size',
+  'disabled',
+  'icon',
+  'position',
+  'href',
+  'target',
+  'type'
+]);
+
+
 export const IfxFilterInput = /*@__PURE__*/ defineContainer<JSX.IfxFilterInput>('ifx-filter-input', undefined, [
   'label',
   'size',

diff --git a/packages/components/public-storybook/coffee_unsplash.jpg b/packages/components/public-storybook/coffee_unsplash.jpg
diff --git a/packages/components/src/components/button/button.stories.ts b/packages/components/src/components/button/button.stories.ts
@@ -1,15 +1,7 @@
 
-import ButtonDocumentation from './button_docs.mdx';
-
 export default {
   title: "Components/Button",
 
-  parameters: {
-    docs: {
-      page: ButtonDocumentation,
-      canvas: { sourceState: 'shown' },
-    },
-  },
   args: {
     label: "Button",
     variant: "solid",

diff --git a/packages/components/src/components/button/button_docs.mdx b/packages/components/src/components/button/button_docs.mdx
diff --git a/packages/components/src/components/icon/readme.md b/packages/components/src/components/icon/readme.md
@@ -24,6 +24,7 @@
  - [ifx-checkbox](../checkbox)
  - [ifx-chip](../chips)
  - [ifx-dropdown-item](../dropdown-item)
+ - [ifx-example](../template-story-with-markdown)
  - [ifx-icon-button](../icon-button)
  - [ifx-icons-preview](../icons-preview)
  - [ifx-modal](../modal)
@@ -47,6 +48,7 @@ graph TD;
   ifx-checkbox --> ifx-icon
   ifx-chip --> ifx-icon
   ifx-dropdown-item --> ifx-icon
+  ifx-example --> ifx-icon
   ifx-icon-button --> ifx-icon
   ifx-icons-preview --> ifx-icon
   ifx-modal --> ifx-icon

diff --git a/...onents/src/components/template-story-with-markdown/Custom-MDX-Documentation.mdx b/...onents/src/components/template-story-with-markdown/Custom-MDX-Documentation.mdx
diff --git a/packages/components/src/components/template-story-with-markdown/button.tsx b/packages/components/src/components/template-story-with-markdown/button.tsx
diff --git a/...template-story-with-markdown/_button.scss → ...template-story-with-markdown/example.scss b/...template-story-with-markdown/_button.scss → ...template-story-with-markdown/example.scss
diff --git a/packages/components/src/components/template-story-with-markdown/example.stories.ts b/packages/components/src/components/template-story-with-markdown/example.stories.ts
@@ -0,0 +1,71 @@
+
+import ExampleDocumentation from './example_docs.mdx';
+
+export default {
+  title: "Components/DocumentedExample",
+
+  parameters: {
+    docs: {
+      page: ExampleDocumentation,
+      canvas: { sourceState: 'shown' },
+    },
+  },
+  args: {
+    label: "Button",
+    variant: "solid",
+    color: "primary",
+    type: "button",
+    size: "m",
+    disabled: false,
+    icon: "",
+    position: 'left',
+    href: "",
+    target: '_blank'
+  },
+
+  argTypes: {
+    variant: {
+      options: ['solid', 'outline', 'outline-text'],
+      control: { type: 'radio' },
+    },
+    color: {
+      options: ['primary', 'secondary', 'success', 'danger', 'warning'],
+      control: { type: 'radio' },
+    },
+    type: {
+      options: ['submit', 'button', 'reset'],
+      control: { type: 'radio' },
+    },
+    size: {
+      options: ['s', 'm'],
+      control: { type: 'radio' },
+    },
+    position: {
+      options: ['left', 'right'],
+      control: { type: 'radio' }
+    },
+    target: {
+      options: ['_blank', '_self', '_parent'],
+      control: { type: 'radio' }
+    }
+
+  },
+
+};
+
+
+const DefaultTemplate = (args) =>
+  `<ifx-example type="${args.type}" variant="${args.variant}" icon="${args.icon}" position="${args.position}" href="${args.href}" target="${args.target}" color="${args.color}" size="${args.size}" disabled="${args.disabled}">
+  ${args.label}
+  </ifx-example>`;
+
+
+export const Primary = DefaultTemplate.bind({});
+
+export const Secondary = DefaultTemplate.bind({});
+Secondary.args = {
+  color: 'secondary'
+};
+
+
+