doc: refactors props for multiple component documentation in storybook #2370

MaxGammel · 2024-11-21T12:17:42Z

…in storybook

netlify · 2024-11-21T12:18:01Z

❌ Deploy Preview for marvelous-moxie-a6e2fe failed.

Name	Link
🔨 Latest commit	`45a925a`
🔍 Latest deploy log	https://app.netlify.com/sites/marvelous-moxie-a6e2fe/deploys/67935555e9de9800085d49a9

…om brand header component

amir-ba · 2024-11-21T14:01:50Z

packages/storybook-vue/stories/components/dropdown-select/ScaleDropdownSelect.vue

+    readOnly: { type: Boolean }, 
+    transparent: { type: Boolean }, 
+    ariaLabelSelected: { type: String },
+    hcmLabelDisabled: { type: String },


we can also add the description for these attributes here :
e.g. for hcmLabelDisabled
https://github.com/telekom/scale/blob/main/packages/components/src/components/dropdown-select/readme.md?plain=1#L17

amir-ba · 2024-11-21T14:12:31Z

packages/storybook-vue/stories/components/notification-badge/NotificationBadge.stories.mdx

my suggestion is to move the userNavigation and iconNavigation that get added here outside the prop table and add them as extra text under the table.

amir-ba · 2024-11-21T14:20:11Z

packages/storybook-vue/stories/components/segmented-button/ScaleSegmentedButton.vue

@@ -26,6 +29,9 @@ export default {
    helperText: { type: String },
    fullWidth: { type: Boolean, default: false },
    styles: { type: String },
+    selectedIndex: { type: Number },
+    ariaLabelTranslation: { type: `segment button with $slottedSegments` },


also here the prop description could help

scale/packages/components/src/components/segmented-button/readme.md

Line 12 in 8a04a5e

| `ariaLabelTranslation` | `aria-label-translation` | (optional) aria-label attribute needed for icon-only buttons | `string` | ``segment button with $slottedSegments`` |

amir-ba · 2024-11-21T14:22:24Z

packages/storybook-vue/stories/components/sidebar-navigation/SidebarNav.vue

@@ -2,11 +2,12 @@
 export default {
  name: 'scale-sidebar-nav',
  props: {
-    ariaLabel: { type: String },
+    ariaLabelSiderbarNav: { type: String },


prop description need to be added for all of these props:

scale/packages/components/src/components/sidebar-nav/readme.md

Line 12 in 8a04a5e

| `ariaLabelSidebarNav` | `aria-label-sidebar-nav` | From mdn: A brief description of the purpose of the navigation, omitting the term "navigation", as the screen reader will read both the role and the contents of the label. | `string` | `undefined` |

amir-ba · 2024-11-21T14:24:27Z

packages/storybook-vue/stories/components/slider/Slider.stories.mdx

Please update the descriptions to include the prop description from readme

scale/packages/components/src/components/slider/readme.md

Line 12 in 8a04a5e

| `customColor` | `custom-color` | <span style="color:red">**[DEPRECATED]**</span> (optional) slider custom color<br/><br/> | `string` | `undefined` |

amir-ba · 2024-11-21T14:31:51Z

packages/storybook-vue/stories/components/icon/ScaleIcon.vue

@@ -39,7 +39,6 @@
      :focusable="focusable"
      :decorative="decorative"
      :accessibility-title="accessibilityTitle"
-      :styles="styles"


add the style back here to make the storybook work

amir-ba · 2024-11-21T14:31:54Z

packages/storybook-vue/stories/components/icon/ScaleIcon.vue

@@ -55,7 +54,6 @@ export default {
    focusable: { type: Boolean, default: false },
    decorative: { type: Boolean, default: false },
    accessibilityTitle: { type: String },
-    styles: { type: String }


add the style back here to make the storybook work

amir-ba · 2024-11-21T14:33:50Z

packages/storybook-vue/stories/components/sidebar-navigation/SidebarNav.stories.mdx

@@ -32,11 +32,12 @@ export const Template = (args, { argTypes }) => ({
  template: `
    <div :style="wrapperStyles">
      <scale-sidebar-nav
-        :arial-label="ariaLabel"
+        :arial-label-sidebar-nav="ariaLabelSiderbarNav"


please add the readme description to the props , as they exist

amir-ba · 2024-11-21T14:36:44Z

packages/storybook-vue/stories/components/tab-navigation/TabNav.stories.mdx

-    preselected: {
-      table: {
-        disable: true,
-      },
-      description: '',
-      control: { type: null },
-    },


add this again, as it helps render the component

amir-ba · 2024-11-21T14:38:24Z

packages/storybook-vue/stories/components/tab-navigation/TabNav.stories.mdx

@@ -12,7 +12,7 @@ import TabPanel from './TabPanel.vue';
 <Meta
  title="Components/Tab Navigation"
  component={ScaleTabNav}
-  subcomponents={{ 'Scale Tab Header': TabHeader, 'Scale Tab Panel': TabPanel }}


why did you remove the tabHeader section here?

…tion in storybook

amir-ba · 2024-12-02T13:25:42Z

packages/storybook-vue/stories/setup_and_info/ScaleAndVue_de.md

@@ -117,7 +117,7 @@ Du kannst ganz einfach die gleichen Ergebnisse erzielen:
 ```html
 <scale-text-field
  :value="example"
-  @scale-change="example = $event.target.value"


Make the event be kebab case again , as that is the correct way to call the events

amir-ba · 2024-12-04T17:20:29Z

packages/storybook-vue/stories/components/tab-navigation/ScaleTabNav.vue

-    disabled: { type: Boolean, default: false },
-    preselected: { type: Boolean, default: false },
-    withIcon: { type: Boolean, default: true },
-    size: { type: String, default: 'small' },
-    small: { type: Boolean, default: false },
+    small: { type: Boolean, default: false},
+    size: { type: 'small' | 'large' , default: 'small' },


Revert this to

disabled: { type: Boolean, default: false }, preselected: { type: Boolean, default: false }, withIcon: { type: Boolean, default: true }, size: { type: 'small' | 'large' , default: 'small' }, small: { type: Boolean, default: false },

amir-ba · 2024-12-04T17:23:02Z

packages/storybook-vue/stories/components/tab-navigation/TabNav.stories.mdx

-  }}
-/>
-
-export const Template = (args, { argTypes }) => ({
-  components: { ScaleTabNav },


Revert this. Since it is breaking the tests

amir-ba · 2024-12-04T17:23:21Z

packages/storybook-vue/stories/components/tab-navigation/TabNav.stories.mdx

-      table: {
-        type: { summary: 'string' },
-      },
-      description: `(optional) size`,


revert this as well

amir-ba · 2024-12-04T17:26:14Z

packages/storybook-vue/stories/components/telekom-brand-header-navigation/TelekomHeader.vue

@@ -10,6 +10,7 @@
    :meta-nav-external-aria-label="metaNavExternalAriaLabel"
    :lang-switcher-aria-label="langSwitcherAriaLabel"
    :main-nav-aria-label="mainNavAriaLabel"      
+    :type="type"


remove this line from here to fix the story

amir-ba · 2024-12-04T17:26:18Z

packages/storybook-vue/stories/components/telekom-brand-header-navigation/TelekomHeader.vue

@@ -32,7 +33,8 @@ export default {
    metaNavAriaLabel: String,
    metaNavExternalAriaLabel: String,
    langSwitcherAriaLabel: String,
-    mainNavAriaLabel: String,    
+    mainNavAriaLabel: String,   
+    type: String, 


remove this line from here to fix the story

amir-ba · 2024-12-05T08:25:58Z

...rybook-vue/stories/components/telekom-brand-header-navigation/TelekomBrandHeader.stories.mdx

@@ -432,7 +434,8 @@ Set the profile menu's `logged-in` property to `true` or `false` to switch betwe
      accessibilityLabel: "open user menu: Alexander",
      closeMenuAccessibilityLabel: "close menu",
      loginSettingsLabel: "Login Settings",
-      logoutLabel: "Log out",
+      logoutLabel: "Log out",   
+      type: "standard",


Remove this since the 'standard' is not a type. it fixes the build if you remove this

amir-ba · 2024-12-05T08:26:00Z

...rybook-vue/stories/components/telekom-brand-header-navigation/TelekomBrandHeader.stories.mdx

@@ -339,6 +340,7 @@ Set the profile menu's `logged-in` property to `true` or `false` to switch betwe
      loginHelpLabel: "Help logging in",
      registerHeadline: "Need an account?",
      registerLabel: "Register now",
+      type: "standard",


Remove this since the 'standard' is not a type. it fixes the build if you remove this

amir-ba · 2024-12-05T08:26:04Z

...rybook-vue/stories/components/telekom-brand-header-navigation/TelekomBrandHeader.stories.mdx

@@ -108,6 +108,7 @@ export const TemplateProfileMenu = (args, { argTypes }) => ({
              :login-settings-url="loginSettingsUrl"
              :hide-login-settings="hideLoginSettings"
              :logout-url="logoutUrl"
+              :type="type"


Remove this since the 'standard' is not a type. it fixes the build if you remove this

…ation in storybook

feat(storybook-vue): added multiple props to component documentation …

6e198ee

…in storybook

MaxGammel requested review from maomaoZH and amir-ba as code owners November 21, 2024 12:17

feat(storybook-vue): added types to logged out and logged in in telek…

519e7e1

…om brand header component

amir-ba reviewed Nov 21, 2024

View reviewed changes

amir-ba changed the title ~~feat(storybook-vue): added multiple props to component documentation …~~ doc: refactors props for multiple component documentation in storybook Nov 21, 2024

docs(storybook-vue): refactors props for multiple component documenta…

c7d0856

…tion in storybook

amir-ba reviewed Dec 5, 2024

View reviewed changes

"docs(storybook-vue): refactors props for multiple component document…

45a925a

…ation in storybook

MaxGammel closed this Jan 24, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

doc: refactors props for multiple component documentation in storybook #2370

doc: refactors props for multiple component documentation in storybook #2370

MaxGammel commented Nov 21, 2024

netlify bot commented Nov 21, 2024 •

edited

Loading

amir-ba Nov 21, 2024

amir-ba Nov 21, 2024

amir-ba Nov 21, 2024

amir-ba Nov 21, 2024

amir-ba Nov 21, 2024

amir-ba Nov 21, 2024

amir-ba Nov 21, 2024

amir-ba Nov 21, 2024

amir-ba Nov 21, 2024

amir-ba Nov 21, 2024

amir-ba Dec 2, 2024

amir-ba Dec 4, 2024

amir-ba Dec 4, 2024

amir-ba Dec 4, 2024

amir-ba Dec 4, 2024

amir-ba Dec 4, 2024

amir-ba Dec 5, 2024

amir-ba Dec 5, 2024

amir-ba Dec 5, 2024

doc: refactors props for multiple component documentation in storybook #2370

doc: refactors props for multiple component documentation in storybook #2370

Conversation

MaxGammel commented Nov 21, 2024

netlify bot commented Nov 21, 2024 • edited Loading

❌ Deploy Preview for marvelous-moxie-a6e2fe failed.

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

netlify bot commented Nov 21, 2024 •

edited

Loading