Add story for Message component

[ninetteadhikari]

Is your feature request related to a problem? Please describe. https://element.eleme.io/#/en-US/component/message

Use the Element UI component. We don't need to create a separate H component for this. Only the custom styling will be added to it

[amosnjoroge]

@andrewtpham Element UI defines a global method $message which is called to display the message component; see In our case since there is no actual <el-message> component to reuse it becomes difficult to define one on hakawati.

for example if we were to show how we would display the messages using a story, triggered by clicking a button, we would do something like below; remember since we have already defined message styling on the global style sheet it picks the css as expected.

export default { title: 'Message' }

export const hMessage = () => ({
  template: `
      <div>
        <el-button :plain="true" @click="open1">success message</el-button>
        <el-button :plain="true" @click="open2">error message</el-button>
      </div>
    `,
  methods: {
    open1 () {
      this.$message({
        showClose: true,
        message: 'This is a error message.',
        type: 'success'
      })
    },

    open2 () {
      this.$message({
        showClose: true,
        message: 'This is a success message.',
        type: 'error'
      })
    }
  }
})

cc @ninetteadhikari @Kimaiyo077

[andrewtpham]

Hey @amosnjoroge I made a PR to show the el-message on storybook. In order to get the story to display in Storybook, I needed to create a component for Message called HMessage. This is just a clone of the example from Element's message. Then I added a Message.stories.js file to show how it can be used. Here's the component in the latest preview: https://vue-ui-components-git-message-component-hikaya.vercel.app/?path=/story/message--h-message

I'm still having issues with getting the styling to take effect, see PR description to see if you can have a try.

[amosnjoroge]

@andrewtpham the component HMessage defines the display of a Notification component. The respective story import the component HMessage but it is not used in the display of the message component; the story uses the global method $message to display the message. As I had indicated before this is the same situation I was facing because we don't have a actual el-message component to extend in hakawati.

[andrewtpham]

@michaelbukachi Could you chime in on this discussion? Do you know how we could approach creating a story for the Element message in hakawati and add our own flavor of styling? There is an open PR on this here if you think you could take a look and see what needs to be fixed to let the styling that effect: https://github.com/hikaya-io/hakawati/pull/267

[michaelbukachi]

Hey @andrewtpham, I think you'll have to use Message.success(options) instead of this.$message. If you are using a custom component it will be HMessage.success(...). To use this.$message() we will have to override the directive provided by Element UI.