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 ready!

Name	Link
🔨 Latest commit	`c7d0856`
🔍 Latest deploy log	https://app.netlify.com/sites/marvelous-moxie-a6e2fe/deploys/674857ea7534180008bc46ab
😎 Deploy Preview	https://deploy-preview-2370--marvelous-moxie-a6e2fe.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

…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

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

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

Are you sure you want to change the base?

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 ready!

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