9313461413

Committed 31 May 2024 05:35AM UTC coverage: 96.679% (+0.07%) from 96.607%

Build # 9313461413

Build Type

Pull #474

github

Committed by

web-flow

Commit Message

Merge e397fb687 into 3b43c4e91

Pull Request Pull Request #474: Enums as components properties

Run Details

369 of 400 branches covered (92.25%)

Branch coverage included in aggregate %.

28 of 28 new or added lines in 12 files covered. (100.0%)

2 existing lines in 1 file now uncovered.

679 of 684 relevant lines covered (99.27%)

57.19 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

90.91

/src/components/Modal/Modal.mocks.tsx

/**
 * Copyright 2024 Mia srl
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 *
 * SPDX-License-Identifier: Apache-2.0
 */

import { ReactElement } from 'react'
import { action } from '@storybook/addon-actions'

import { Hierarchy, Type } from '../Button/Button.types'
import { columns, data, rowKey } from '../Table/Table.mocks'
import { Button } from '../Button'
import { Modal } from '.'
import { ModalProps } from './Modal.props'
import { Table } from '../Table'
import { useModal } from '../../hooks/useModal'

const { Neutral } = Hierarchy
const { Outlined } = Type

export const children = (
  <>
    {'Modal Content'}
    <Table
      columns={columns}
      data={data.slice(0, 2)}
      rowKey={rowKey}
    />
  </>
)

export const childrenFullWidth = (
  <div
    style={{
      backgroundColor: '#1e1e1e',
      color: '#ce9178',
      fontFamily: 'monospace',
      height: '100%',
      padding: 24,
    }}
  >
    Code Block
  </div>
)

export const childrenLong = (
  <>
    <Table
      columns={columns}
      data={data}
      rowKey={rowKey}
    />
    {`Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vel dolor ac sem congue ornare rhoncus quis tortor.
Vivamus hendrerit sed nisl eget gravida. Nunc dolor elit, condimentum non ante vitae, ullamcorper dignissim dolor.
Quisque ornare interdum massa blandit accumsan. Morbi viverra, urna ut consequat maximus, risus eros molestie augue, at posuere lacus nunc id ex.
Aenean et ante augue. Donec vitae pretium tellus, mattis placerat nisl. Phasellus dolor urna, porttitor a tempus at, scelerisque id nisi.
In ac libero quis neque tempor iaculis sit amet non sapien. Aenean quis neque varius, efficitur erat et, faucibus tortor.
Etiam at mi lacinia, gravida diam ac, sodales elit. Maecenas vitae rutrum nisl.
Nunc pellentesque, arcu vitae bibendum rutrum, mi sapien aliquam ipsum, sit amet mollis quam orci quis est.
Curabitur sagittis mauris volutpat lorem elementum, nec porttitor eros commodo. Suspendisse lorem orci, commodo mollis quam eget, facilisis tincidunt mauris.
Ut in feugiat nunc, in eleifend ex.`}
  </>
)

export const asideFixed = {
  children: <div>Modal Aside Content</div>,
  isFixed: true,
  title: 'Modal Aside Title',
}

export const asideOpenable = {
  children: <div>Modal Aside Content</div>,
  labelClose: 'Close',
  labelOpen: 'Open',
  title: 'Modal Aside Title',
}

export const footer = {
  buttons: [
    <Button key={'ok'} onClick={action('ok')}>{'OK'}</Button>,
    <Button
      hierarchy={Neutral}
      key={'cancel'}
      type={Outlined}
      onClick={action('cancel')}
    >
      {'Cancel'}
    </Button>,
  ],
}

export const footerCustom = {
  buttons: [
    <Button key={'1'} onClick={action('button 1')}>
      Button 1
    </Button>,
    <Button
      hierarchy={Neutral}
      key={'2'}
      type={Outlined}
      onClick={action('button 2')}
    >
      Button 2
    </Button>,
    <Button
      hierarchy={Neutral}
      key={'3'}
      type={Outlined}
      onClick={action('button 3')}
    >
      Button 3
    </Button>,
    <Button
      hierarchy={Neutral}
      key={'4'}
      type={Outlined}
      onClick={action('button 4')}
    >
      Button 4
    </Button>,
  ],
  extra: 'Footer Extra',
}

export const footerLoading = {
  buttons: [
    <Button isLoading key={'ok'}>{'OK'}</Button>,
    <Button
      hierarchy={Neutral}
      isDisabled
      key={'cancel'}
      type={Outlined}
    >
      {'Cancel'}
    </Button>,
  ],
}

export const docLink = 'https://mia-platform.eu'
export const title = 'Modal Title'

export const WithOpenButton = (props: ModalProps): ReactElement => {
  const { isModalVisible, openModal, closeModal } = useModal()
  return (
    <>
      <Button onClick={openModal}>Open Modal</Button>
      <Modal
        {...props}
        isVisible={isModalVisible}
        onCloseClick={closeModal}
      />
    </>
  )
}

1	/**
2	* Copyright 2024 Mia srl
3	*
4	* Licensed under the Apache License, Version 2.0 (the "License");
5	* you may not use this file except in compliance with the License.
6	* You may obtain a copy of the License at
7	*
8	* http://www.apache.org/licenses/LICENSE-2.0
9	*
10	* Unless required by applicable law or agreed to in writing, software
11	* distributed under the License is distributed on an "AS IS" BASIS,
12	* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13	* See the License for the specific language governing permissions and
14	* limitations under the License.
15	*
16	* SPDX-License-Identifier: Apache-2.0
17	*/
18
19	import { ReactElement } from 'react'
20	import { action } from '@storybook/addon-actions'	2✔
21
22	import { Hierarchy, Type } from '../Button/Button.types'	2✔
23	import { columns, data, rowKey } from '../Table/Table.mocks'	2✔
24	import { Button } from '../Button'	2✔
25	import { Modal } from '.'	2✔
26	import { ModalProps } from './Modal.props'
27	import { Table } from '../Table'	2✔
28	import { useModal } from '../../hooks/useModal'	2✔
29
30	const { Neutral } = Hierarchy	2✔
31	const { Outlined } = Type	2✔
32
33	export const children = (	2✔
34	<>
35	{'Modal Content'}
36	<Table
37	columns={columns}
38	data={data.slice(0, 2)}
39	rowKey={rowKey}
40	/>
41	</>
42	)
43
44	export const childrenFullWidth = (	2✔
45	<div
46	style={{
47	backgroundColor: '#1e1e1e',
48	color: '#ce9178',
49	fontFamily: 'monospace',
50	height: '100%',
51	padding: 24,
52	}}
53	>
54	Code Block
55	</div>
56	)
57
58	export const childrenLong = (	2✔
59	<>
60	<Table
61	columns={columns}
62	data={data}
63	rowKey={rowKey}
64	/>
65	{`Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vel dolor ac sem congue ornare rhoncus quis tortor.
66	Vivamus hendrerit sed nisl eget gravida. Nunc dolor elit, condimentum non ante vitae, ullamcorper dignissim dolor.
67	Quisque ornare interdum massa blandit accumsan. Morbi viverra, urna ut consequat maximus, risus eros molestie augue, at posuere lacus nunc id ex.
68	Aenean et ante augue. Donec vitae pretium tellus, mattis placerat nisl. Phasellus dolor urna, porttitor a tempus at, scelerisque id nisi.
69	In ac libero quis neque tempor iaculis sit amet non sapien. Aenean quis neque varius, efficitur erat et, faucibus tortor.
70	Etiam at mi lacinia, gravida diam ac, sodales elit. Maecenas vitae rutrum nisl.
71	Nunc pellentesque, arcu vitae bibendum rutrum, mi sapien aliquam ipsum, sit amet mollis quam orci quis est.
72	Curabitur sagittis mauris volutpat lorem elementum, nec porttitor eros commodo. Suspendisse lorem orci, commodo mollis quam eget, facilisis tincidunt mauris.
73	Ut in feugiat nunc, in eleifend ex.`}
74	</>
75	)
76
77	export const asideFixed = {	2✔
78	children: <div>Modal Aside Content</div>,
79	isFixed: true,
80	title: 'Modal Aside Title',
81	}
82
83	export const asideOpenable = {	2✔
84	children: <div>Modal Aside Content</div>,
85	labelClose: 'Close',
86	labelOpen: 'Open',
87	title: 'Modal Aside Title',
88	}
89
90	export const footer = {	2✔
91	buttons: [
92	<Button key={'ok'} onClick={action('ok')}>{'OK'}</Button>,
93	<Button
94	hierarchy={Neutral}
95	key={'cancel'}
96	type={Outlined}
97	onClick={action('cancel')}
98	>
99	{'Cancel'}
100	</Button>,
101	],
102	}
103
104	export const footerCustom = {	2✔
105	buttons: [
106	<Button key={'1'} onClick={action('button 1')}>
107	Button 1
108	</Button>,
109	<Button
110	hierarchy={Neutral}
111	key={'2'}
112	type={Outlined}
113	onClick={action('button 2')}
114	>
115	Button 2
116	</Button>,
117	<Button
118	hierarchy={Neutral}
119	key={'3'}
120	type={Outlined}
121	onClick={action('button 3')}
122	>
123	Button 3
124	</Button>,
125	<Button
126	hierarchy={Neutral}
127	key={'4'}
128	type={Outlined}
129	onClick={action('button 4')}
130	>
131	Button 4
132	</Button>,
133	],
134	extra: 'Footer Extra',
135	}
136
137	export const footerLoading = {	2✔
138	buttons: [
139	<Button isLoading key={'ok'}>{'OK'}</Button>,
140	<Button
141	hierarchy={Neutral}
142	isDisabled
143	key={'cancel'}
144	type={Outlined}
145	>
146	{'Cancel'}
147	</Button>,
148	],
149	}
150
151	export const docLink = 'https://mia-platform.eu'	2✔
152	export const title = 'Modal Title'	2✔
153
154	export const WithOpenButton = (props: ModalProps): ReactElement => {	2✔
UNCOV 155	const { isModalVisible, openModal, closeModal } = useModal()	×
UNCOV 156	return (	×
157	<>
158	<Button onClick={openModal}>Open Modal</Button>
159	<Modal
160	{...props}
161	isVisible={isModalVisible}
162	onCloseClick={closeModal}
163	/>
164	</>
165	)
166	}

mia-platform / design-system / 9313461413

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous