Skip to content

Commit 22726d1

Browse files
balzssbalzss
committed
wip commit 1
1 parent 142c508 commit 22726d1

File tree

263 files changed

+31056
-133
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

263 files changed

+31056
-133
lines changed

‎packages/__docs__/src/ColorBand/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ import { Component } from 'react'
2828
import { Flex } from '@instructure/ui-flex'
2929
import { View } from '@instructure/ui-view'
3030

31-
import { withStyle, jsx } from '@instructure/emotion'
31+
import { withStyle } from '@instructure/emotion'
3232
import generateStyle from './styles'
3333
import generateComponentTheme from './theme'
3434
import { propTypes, allowedProps } from './props'

‎packages/__docs__/src/ColorBand/index.tsx-E‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
/*
2+
* The MIT License (MIT)
3+
*
4+
* Copyright (c) 2015 - present Instructure, Inc.
5+
*
6+
* Permission is hereby granted, free of charge, to any person obtaining a copy
7+
* of this software and associated documentation files (the "Software"), to deal
8+
* in the Software without restriction, including without limitation the rights
9+
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
10+
* copies of the Software, and to permit persons to whom the Software is
11+
* furnished to do so, subject to the following conditions:
12+
*
13+
* The above copyright notice and this permission notice shall be included in all
14+
* copies or substantial portions of the Software.
15+
*
16+
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
17+
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
18+
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
19+
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
20+
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
21+
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
22+
* SOFTWARE.
23+
*/
24+
25+
/** @jsx jsx */
26+
import { Component } from 'react'
27+
28+
import { Flex } from '@instructure/ui-flex'
29+
import { View } from '@instructure/ui-view'
30+
31+
import { withStyle, jsx } from '@instructure/emotion'
32+
import generateStyle from './styles'
33+
import generateComponentTheme from './theme'
34+
import { propTypes, allowedProps } from './props'
35+
import type { ColorBandProps } from './props'
36+
37+
@withStyle(generateStyle, generateComponentTheme)
38+
class ColorBand extends Component<ColorBandProps> {
39+
static propTypes = propTypes
40+
static allowedProps = allowedProps
41+
componentDidMount() {
42+
this.props.makeStyles?.()
43+
}
44+
45+
componentDidUpdate() {
46+
this.props.makeStyles?.()
47+
}
48+
49+
static defaultProps = {
50+
height: '1.25rem'
51+
}
52+
53+
render() {
54+
return (
55+
<View
56+
display="block"
57+
background="brand"
58+
aria-hidden="true"
59+
height={this.props.height}
60+
>
61+
<Flex height="100%" alignItems="stretch" justifyItems="end">
62+
<Flex.Item size="7%">
63+
<span css={this.props.styles?.band1} />
64+
</Flex.Item>
65+
<Flex.Item size="10%">
66+
<span css={this.props.styles?.band2} />
67+
</Flex.Item>
68+
<Flex.Item size="15%">
69+
<span css={this.props.styles?.band3} />
70+
</Flex.Item>
71+
</Flex>
72+
</View>
73+
)
74+
}
75+
}
76+
77+
export default ColorBand
78+
export { ColorBand }

‎packages/__docs__/src/ColorSwatch/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@
2626
import { Component } from 'react'
2727

2828
import { isValid } from '@instructure/ui-color-utils'
29-
import { withStyle, jsx } from '@instructure/emotion'
29+
import { withStyle } from '@instructure/emotion'
3030

3131
import generateStyle from './styles'
3232
import generateComponentTheme from './theme'

‎packages/__docs__/src/ColorSwatch/index.tsx-E‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
/*
2+
* The MIT License (MIT)
3+
*
4+
* Copyright (c) 2015 - present Instructure, Inc.
5+
*
6+
* Permission is hereby granted, free of charge, to any person obtaining a copy
7+
* of this software and associated documentation files (the "Software"), to deal
8+
* in the Software without restriction, including without limitation the rights
9+
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
10+
* copies of the Software, and to permit persons to whom the Software is
11+
* furnished to do so, subject to the following conditions:
12+
*
13+
* The above copyright notice and this permission notice shall be included in all
14+
* copies or substantial portions of the Software.
15+
*
16+
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
17+
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
18+
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
19+
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
20+
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
21+
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
22+
* SOFTWARE.
23+
*/
24+
25+
/** @jsx jsx */
26+
import { Component } from 'react'
27+
28+
import { isValid } from '@instructure/ui-color-utils'
29+
import { withStyle, jsx } from '@instructure/emotion'
30+
31+
import generateStyle from './styles'
32+
import generateComponentTheme from './theme'
33+
import { propTypes, allowedProps } from './props'
34+
import type { ColorSwatchProps } from './props'
35+
36+
@withStyle(generateStyle, generateComponentTheme)
37+
class ColorSwatch extends Component<ColorSwatchProps> {
38+
static propTypes = propTypes
39+
static allowedProps = allowedProps
40+
componentDidMount() {
41+
this.props.makeStyles?.()
42+
}
43+
44+
componentDidUpdate() {
45+
this.props.makeStyles?.()
46+
}
47+
48+
render() {
49+
const { color } = this.props
50+
if (typeof color == 'string')
51+
return isValid(color) ? (
52+
<div
53+
css={this.props.styles?.colorSwatch}
54+
style={{ background: color }}
55+
/>
56+
) : null
57+
return null
58+
}
59+
}
60+
61+
export default ColorSwatch
62+
export { ColorSwatch }

‎packages/__docs__/src/ComponentTheme/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@
2525
/** @jsx jsx */
2626
import { Component } from 'react'
2727

28-
import { withStyle, jsx } from '@instructure/emotion'
28+
import { withStyle } from '@instructure/emotion'
2929
import { Table } from '@instructure/ui-table'
3030
import { View } from '@instructure/ui-view'
3131

‎packages/__docs__/src/ComponentTheme/index.tsx-E‎

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
/*
2+
* The MIT License (MIT)
3+
*
4+
* Copyright (c) 2015 - present Instructure, Inc.
5+
*
6+
* Permission is hereby granted, free of charge, to any person obtaining a copy
7+
* of this software and associated documentation files (the "Software"), to deal
8+
* in the Software without restriction, including without limitation the rights
9+
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
10+
* copies of the Software, and to permit persons to whom the Software is
11+
* furnished to do so, subject to the following conditions:
12+
*
13+
* The above copyright notice and this permission notice shall be included in all
14+
* copies or substantial portions of the Software.
15+
*
16+
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
17+
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
18+
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
19+
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
20+
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
21+
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
22+
* SOFTWARE.
23+
*/
24+
25+
/** @jsx jsx */
26+
import { Component } from 'react'
27+
28+
import { withStyle, jsx } from '@instructure/emotion'
29+
import { Table } from '@instructure/ui-table'
30+
import { View } from '@instructure/ui-view'
31+
32+
import { ColorSwatch } from '../ColorSwatch'
33+
34+
import generateStyle from './styles'
35+
import { propTypes, allowedProps } from './props'
36+
import type { ComponentThemeProps } from './props'
37+
38+
@withStyle(generateStyle, null)
39+
class ComponentTheme extends Component<ComponentThemeProps> {
40+
static propTypes = propTypes
41+
static allowedProps = allowedProps
42+
43+
renderValueCell(
44+
value: undefined | string | object | number,
45+
colorPrimitives: object
46+
) {
47+
if (!value) {
48+
return <code>$aposundefined$apos</code>
49+
}
50+
if (typeof value === 'object') {
51+
return <code>{JSON.stringify(value)}</code>
52+
}
53+
if (typeof value === 'object') {
54+
return <code>{JSON.stringify(value)}</code>
55+
}
56+
if (
57+
value.toString().charAt(0) === '#' ||
58+
value.toString().substring(0, 3) === 'rgb'
59+
) {
60+
// find color primitive name from hex value
61+
const color = Object.entries(colorPrimitives).find(([, v]) => v === value)
62+
return (
63+
<span>
64+
<View margin="0 xx-small 0 0">
65+
<ColorSwatch color={value} />
66+
</View>
67+
<code>{color?.[0] ?? value}</code>
68+
</span>
69+
)
70+
}
71+
return <code>{value}</code>
72+
}
73+
74+
renderRows() {
75+
const { componentTheme, themeVariables } = this.props
76+
const colorPrimitives = themeVariables.colors.primitives
77+
78+
return Object.keys(componentTheme).map((name) => {
79+
return (
80+
<Table.Row key={name}>
81+
<Table.Cell>
82+
<code>{name}</code>
83+
</Table.Cell>
84+
<Table.Cell>
85+
{this.renderValueCell(componentTheme[name], colorPrimitives)}
86+
</Table.Cell>
87+
</Table.Row>
88+
)
89+
})
90+
}
91+
92+
render() {
93+
const { componentTheme, styles } = this.props
94+
95+
return componentTheme && Object.keys(componentTheme).length > 0 ? (
96+
<div css={styles?.componentTheme}>
97+
<Table caption="Component theme">
98+
<Table.Head>
99+
<Table.Row>
100+
<Table.ColHeader id="name">Name</Table.ColHeader>
101+
<Table.ColHeader id="value">Value</Table.ColHeader>
102+
</Table.Row>
103+
</Table.Head>
104+
<Table.Body>{this.renderRows()}</Table.Body>
105+
</Table>
106+
</div>
107+
) : null
108+
}
109+
}
110+
111+
export default ComponentTheme
112+
export { ComponentTheme }

‎packages/__docs__/src/Document/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ import { View } from '@instructure/ui-view'
3030
import { Tabs } from '@instructure/ui-tabs'
3131
import type { TabsProps } from '@instructure/ui-tabs'
3232
import { SourceCodeEditor } from '@instructure/ui-source-code-editor'
33-
import { withStyle, jsx } from '@instructure/emotion'
33+
import { withStyle } from '@instructure/emotion'
3434

3535
import generateStyle from './styles'
3636

0 commit comments

Comments
 (0)