Commit aa3a160a authored by Paul Gascou-Vaillancourt's avatar Paul Gascou-Vaillancourt Committed by Natalia Tepluhina

Improve ConfigurationPageLayout UX

parent 7425693f
......@@ -72,7 +72,7 @@ export default {
</script>
<template>
<configuration-page-layout v-if="hasData">
<configuration-page-layout v-if="hasData" no-border>
<template #heading>
{{ $options.i18n.title }}
</template>
......
<script>
export default {
props: {
noBorder: {
type: Boolean,
required: false,
default: false,
},
},
};
</script>
<template>
<article>
<slot name="alert"></slot>
<header
class="gl-my-5 gl-border-b-1 gl-border-b-gray-100 gl-border-b-solid gl-display-flex gl-justify-content-space-between"
class="gl-mt-5 gl-display-flex gl-justify-content-space-between"
:class="{
['gl-mb-5 gl-border-b-1 gl-border-b-gray-100 gl-border-b-solid']: !noBorder,
}"
>
<div>
<h4 class="gl-mt-0">
<slot name="heading"></slot>
</h4>
<p>
<slot name="description"></slot>
</p>
</div>
<div>
<slot name="actions"></slot>
<div
class="gl-display-flex gl-flex-direction-column gl-w-full gl-justify-content-space-between gl-md-flex-direction-row"
>
<div>
<h4 class="gl-mt-0">
<slot name="heading"></slot>
</h4>
<p>
<slot name="description"></slot>
</p>
</div>
<div class="">
<slot name="actions"></slot>
</div>
</div>
</header>
<slot></slot>
......
......@@ -4,22 +4,26 @@ exports[`Security Configuration Page Layout component matches the snapshot 1`] =
<article>
Page alert
<header
class="gl-my-5 gl-border-b-1 gl-border-b-gray-100 gl-border-b-solid gl-display-flex gl-justify-content-space-between"
class="gl-mt-5 gl-display-flex gl-justify-content-space-between gl-mb-5 gl-border-b-1 gl-border-b-gray-100 gl-border-b-solid"
>
<div>
<h4
class="gl-mt-0"
>
Page title
</h4>
<div
class="gl-display-flex gl-flex-direction-column gl-w-full gl-justify-content-space-between gl-md-flex-direction-row"
>
<div>
<h4
class="gl-mt-0"
>
Page title
</h4>
<p>
Scanner description
</p>
</div>
<p>
Scanner description
</p>
</div>
<div>
Action
<div>
Action
</div>
</div>
</header>
......
import { within } from '@testing-library/dom';
import ConfigurationPageLayout from 'ee/security_configuration/components/configuration_page_layout.vue';
import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
describe('Security Configuration Page Layout component', () => {
let wrapper;
const withinComponent = () => within(wrapper.element);
const findHeader = () => withinComponent().getByRole('banner');
const createComponent = (options = {}) => {
wrapper = shallowMountExtended(ConfigurationPageLayout, {
slots: {
......@@ -25,4 +29,24 @@ describe('Security Configuration Page Layout component', () => {
createComponent();
expect(wrapper.element).toMatchSnapshot();
});
describe('border', () => {
const borderClasses = 'gl-mb-5 gl-border-b-1 gl-border-b-gray-100 gl-border-b-solid';
it('adds border classes by default', () => {
createComponent();
expect(findHeader().className).toContain(borderClasses);
});
it('does not add border classes if no-border is true', () => {
createComponent({
propsData: {
noBorder: true,
},
});
expect(findHeader().className).not.toContain(borderClasses);
});
});
});
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment