Commit 3d59c4b6 authored by Tim Zallmann's avatar Tim Zallmann 💬 Committed by Phil Hughes
Browse files

feat: Add Popover as Component

parent 3a90b2c8

.storybook/config.js

+1 −0
Original line number Diff line number Diff line
@@ -9,6 +9,7 @@ function loadStories() { 
  require('../stories/base/progress_bar');

  require('../stories/base/modal');

  require('../stories/base/loading_icon');

  require('../stories/base/popover');

  require('../stories/base/skeleton_loading');

  require('../stories/base/tooltip');

  require('../stories/base/link');

components/base/popover/examples/index.js

0 → 100644
+41 −0
Original line number Diff line number Diff line 
import PopoverBasicExample from './popover.basic.example.vue';

import PopoverNoTitleExample from './popover.notitle.example.vue';

import PopoverLoadingExample from './popover.loading.example.vue';

import PopoverContentExample from './popover.content.example.vue';



export default [

  {

    name: 'Basic',

    items: [

      {

        id: 'popover-basic',

        name: 'Basic',

        description: 'Basic Popover',

        component: PopoverBasicExample,

      },

      {

        id: 'popover-notitle',

        name: 'No Title',

        description: 'Basic Popover without a title',

        component: PopoverNoTitleExample,

      },

    ],

  },

  {

    name: 'With other components',

    items: [

      {

        id: 'popover-content',

        name: 'Slot Content',

        description: 'Popover with HTML and Vue component inside the slot',

        component: PopoverContentExample,

      },

      {

        id: 'popover-loading',

        name: 'Loading',

        description: 'Popover with Skeleton Loading',

        component: PopoverLoadingExample,

      },

    ],

  },

];

components/base/popover/examples/popover.basic.example.vue

0 → 100644
+12 −0
Original line number Diff line number Diff line 
<template>

  <div>

    <gl-button id="pop-basic">Popover Button</gl-button>

    <gl-popover 

      target="pop-basic"

      placement="top"

      title="This is a Popover!"

      triggers="hover focus"

      content="With a placement of top"

    />

  </div>

</template>

components/base/popover/examples/popover.content.example.vue

0 → 100644
+16 −0
Original line number Diff line number Diff line 
<template>

  <div>

    <gl-button id="pop-basic">Popover Button</gl-button>

    <gl-popover 

      target="pop-basic"

      placement="top"

      title="User information"

      triggers="hover focus"

      show

    >

      <p><strong>This is fully formatted</strong> content, including components</p>

      <gl-progress-bar :value="75" />

      <p>The popover is automatically shown for visual regression testing</p>

    </gl-popover>

  </div>

</template>

components/base/popover/examples/popover.loading.example.vue

0 → 100644
+14 −0
Original line number Diff line number Diff line 
<template>

  <div>

    <gl-button id="pop-basic">Popover Button</gl-button>

    <gl-popover 

      target="pop-basic"

      placement="top"

      title="My popover"

      triggers="hover focus"

      show

    >

      <gl-skeleton-loading />

    </gl-popover>

  </div>

</template>