@gitlab/ui 121.0.1 → 122.0.0

package/src/components/dashboards/dashboard_layout/dashboard_layout.md

@@ -1,145 +0,0 @@
-## Dashboard layout
-
-The `GlDashboardLayout` component provides an easy way to render grid-based dashboards
-using a configuration as outlined by our [Pajamas guidelines](#pajamas-guidelines).
-For more in-depth details on the dashboard layout framework, see the
-[architecture design document](https://handbook.gitlab.com/handbook/engineering/architecture/design-documents/dashboard_layout_framework/).
-
-### When to use
-
-This component should be used when:
-
-- You want an easy way to create a dashboard interface.
-- You want your dashboard to align with our [Pajamas guidelines](#pajamas-guidelines).
-- You want to benefit from features such as customizable layouts with resizable, draggable elements.
-
-### Current limitations
-
-The `GlDashboardLayout` component is limited to rendering dashboards. As defined
-in our architecture design document it does not provide:
-
-- Data exploration outside defined panel visualizations.
-- User-driven customization outside of editing panel position and size.
-- Navigation placement for dashboards.
-
-## The component
-
-The component expects a dashboard configuration object as input and renders a dashboard
-layout with title, description, actions, and panels.
-
-### Grid layout
-
-Panels within the dashboard layout are rendered in a cross-browser 12-column grid
-system with an unlimited number of rows. The grid is responsive and collapses down to a
-single column at the [medium breakpoint](https://design.gitlab.com/product-foundations/layout/#breakpoints).
-
-### Dashboard panels
-
-The dashboard layout is not opinionated about the panel component used. You are free to choose
-whichever panel component best suits your needs. However, to ensure consistency with
-our design patterns, it's strongly recommended that you use `GlDashboardPanel`.
-
-### Filters
-
-The component provides a `#filters` slot to render your filters in the dashboard layout.
-The component does not manage or sync filters and leaves it up to the consumer to manage this state.
-
-We expect dashboards using the framework to implement two types of filters:
-
-- Dashboard filters: Applied to every panel and visualization in the dashboard.
-- Panel filters: Applied per panel to refine results available within the dashboard context.
-
-### Basic implementation
-
-A basic implementation of a static dashboard using the `#panel` slot to render existing
-visualizations wrapped in `GlDashboardPanel`.
-
-```html
-<script>
-import { GlDashboardLayout, GlDashboardPanel } from '@gitlab/ui';
-
-// Your i18n library
-import { __ } from '~/locale';
-
-// Your visualizations
-import UsersVisualization from './my_users_visualization.vue';
-import EventsVisualization from './my_events_visualization.vue';
-
-export default {
-  components: {
-    GlDashboardLayout,
-    GlDashboardPanel,
-    UsersVisualization,
-    EventsVisualization,
-  },
-  data() {
-    return {
-      dashboard: {
-        title: __('My dashboard title'),
-        description: __('The dashboard description to render'),
-        panels: [
-          {
-            // Each panel ID must be unique within the context of this dashboard obj
-            id: 'active-users-panel',
-            dashboardPanelProps: {
-              title: __('Active users over time'),
-              // Any additional GlDashboardPanel props go here
-            },
-            component: UsersVisualization,
-            componentProps: {
-              apiPath: '/example-users-api',
-              // Any props you want to pass to your component
-            },
-            gridAttributes: {
-              width: 6,
-              height: 4,
-              yPos: 0,
-              xPos: 0,
-            },
-          },
-          {
-            // Each panel ID must be unique within the context of this dashboard obj
-            id: 'events-over-time-panel',
-            dashboardPanelProps: {
-              title: __('Events over time'),
-              // Any additional GlDashboardPanel props go here
-            },
-            component: EventsVisualization,
-            componentProps: {
-              apiPath: '/example-events-api',
-              // Any props you want to pass to your component
-            },
-            gridAttributes: {
-              width: 6,
-              height: 4,
-              yPos: 0,
-              xPos: 6,
-            },
-          },
-        ],
-      },
-    }
-  },
-}
-</script>
-
-<template>
-  <gl-dashboard-layout :config="dashboard">
-    <template #panel="{ panel }">
-      <gl-dashboard-panel v-bind="panel.dashboardPanelProps">
-        <template #body>
-          <component
-            :is="panel.component"
-            class="gl-h-full gl-overflow-hidden"
-            v-bind="panel.componentProps"
-          />
-        </template>
-      </gl-dashboard-panel>
-    </template>
-  </gl-dashboard-layout>
-</template>
-```
-
-## Pajamas guidelines
-
-- [Pajamas dashboards pattern](https://design.gitlab.com/patterns/dashboards)

package/src/components/dashboards/dashboard_panel/dashboard_panel.md

@@ -1,66 +0,0 @@
-## Dashboard panel
-
-The `GlDashboardPanel` component is a foundational building block for dashboards but it can also be
-used in other analytics interfaces. It is desinged to wrap a query result visualization with standardized
-styling, loading states, actions, and metadata as outlined by our [Pajamas guidelines](https://design.gitlab.com/patterns/dashboards).
-It does not manage data states and fetching, or handle filter state managment.
-
-### When to use
-
-This component should be used when:
-
-- You need a standardized container for individual results in dashboards, reports,
-or other analytics-focused interfaces.
-- You want to wrap a single visualization of query results, such as charts,d markdown,
-single stats, or tables.
-- You want to benefit from easy integration with the dashboard layout component.
-
-## The component
-
-The component is designed to wrap a single data visualization, but it's not opinionated about its content
-and can be used for example to wrap other content types such as rendered markdown.
-
-### Loading states
-
-Panels provide built-in loading state management. When content is loading:
-
-- Set the `loading` prop to `true` to show a loading spinner.
-- Use `loadingDelayed` and `loadingDelayedText` for long-running operations.
-- The panel handles the visual loading state while you handle the actual data loading.
-
-### Filters
-
-The component provides a `#filters` slot for you to render your filters within the panel
-layout. It's up to the consumer to manage the state of filters.
-
-### Basic implementation
-
-```html
-<script>
-import { GlDashboardPanel } from '@gitlab/ui';
-import MyVisualization from './my_visualization.vue';
-
-export default {
-  components: {
-    GlDashboardPanel,
-    MyVisualization,
-  },
-  data() {
-    return {
-      isLoading: false,
-    };
-  },
-};
-</script>
-
-<template>
-  <gl-dashboard-panel
-    title="My Content Title"
-    :loading="isLoading"
-  >
-    <template #body>
-      <my-visualization />
-    </template>
-  </gl-dashboard-panel>
-</template>
-```

package/src/vendor/bootstrap/scss/_jumbotron.scss

@@ -1,17 +0,0 @@
-.jumbotron {
-  padding: $jumbotron-padding ($jumbotron-padding * .5);
-  margin-bottom: $jumbotron-padding;
-  color: $jumbotron-color;
-  background-color: $jumbotron-bg;
-  @include border-radius($border-radius-lg);
-
-  @include media-breakpoint-up(sm) {
-    padding: ($jumbotron-padding * 2) $jumbotron-padding;
-  }
-}
-
-.jumbotron-fluid {
-  padding-right: 0;
-  padding-left: 0;
-  @include border-radius(0);
-}

package/src/vendor/bootstrap-vue/src/components/nav/index.js

@@ -1,4 +0,0 @@
-import { BNav } from './nav'
-import { BNavItem } from './nav-item'
-
-export { BNav, BNavItem }

package/src/vendor/bootstrap-vue/src/components/nav/nav-item.js

@@ -1,49 +0,0 @@
-import { extend, mergeData } from '../../vue'
-import { NAME_NAV_ITEM } from '../../constants/components'
-import { PROP_TYPE_ARRAY_OBJECT_STRING, PROP_TYPE_OBJECT } from '../../constants/props'
-import { omit, sortKeys } from '../../utils/object'
-import { makeProp, makePropsConfigurable, pluckProps } from '../../utils/props'
-import { BLink, props as BLinkProps } from '../link/link'
-
-// --- Props ---
-
-const linkProps = omit(BLinkProps, ['event', 'routerTag'])
-
-export const props = makePropsConfigurable(
-  sortKeys({
-    ...linkProps,
-    linkAttrs: makeProp(PROP_TYPE_OBJECT, {}),
-    linkClasses: makeProp(PROP_TYPE_ARRAY_OBJECT_STRING)
-  }),
-  NAME_NAV_ITEM
-)
-
-// --- Main component ---
-
-// @vue/component
-export const BNavItem = /*#__PURE__*/ extend({
-  name: NAME_NAV_ITEM,
-  functional: true,
-  props,
-  render(h, { props, data, listeners, children }) {
-    return h(
-      'li',
-      mergeData(omit(data, ['on']), {
-        staticClass: 'nav-item'
-      }),
-      [
-        h(
-          BLink,
-          {
-            staticClass: 'nav-link',
-            class: props.linkClasses,
-            attrs: props.linkAttrs,
-            props: pluckProps(linkProps, props),
-            on: listeners
-          },
-          children
-        )
-      ]
-    )
-  }
-})

package/src/vendor/bootstrap-vue/src/components/nav/nav.js

@@ -1,58 +0,0 @@
-import { extend, mergeData } from '../../vue'
-import { NAME_NAV } from '../../constants/components'
-import { PROP_TYPE_BOOLEAN, PROP_TYPE_STRING } from '../../constants/props'
-import { makeProp, makePropsConfigurable } from '../../utils/props'
-
-// --- Helper methods ---
-
-const computeJustifyContent = value => {
-  value = value === 'left' ? 'start' : value === 'right' ? 'end' : value
-  return `justify-content-${value}`
-}
-
-// --- Props ---
-
-export const props = makePropsConfigurable(
-  {
-    align: makeProp(PROP_TYPE_STRING),
-    // Set to `true` if placing in a card header
-    cardHeader: makeProp(PROP_TYPE_BOOLEAN, false),
-    fill: makeProp(PROP_TYPE_BOOLEAN, false),
-    justified: makeProp(PROP_TYPE_BOOLEAN, false),
-    pills: makeProp(PROP_TYPE_BOOLEAN, false),
-    small: makeProp(PROP_TYPE_BOOLEAN, false),
-    tabs: makeProp(PROP_TYPE_BOOLEAN, false),
-    tag: makeProp(PROP_TYPE_STRING, 'ul')
-  },
-  NAME_NAV
-)
-
-// --- Main component ---
-
-// @vue/component
-export const BNav = /*#__PURE__*/ extend({
-  name: NAME_NAV,
-  functional: true,
-  props,
-  render(h, { props, data, children }) {
-    const { tabs, pills, align, cardHeader } = props
-
-    return h(
-      props.tag,
-      mergeData(data, {
-        staticClass: 'nav',
-        class: {
-          'nav-tabs': tabs,
-          'nav-pills': pills && !tabs,
-          'card-header-tabs': cardHeader && tabs,
-          'card-header-pills': cardHeader && pills && !tabs,
-          'nav-fill': props.fill,
-          'nav-justified': props.justified,
-          [computeJustifyContent(align)]: align,
-          small: props.small
-        }
-      }),
-      children
-    )
-  }
-})