Skip to content

Commit 1aae65b

Browse files
jaketrentjaketrent
committed
cp ds packages
1 parent 6bf77d3 commit 1aae65b

Some content is hidden

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

76 files changed

+2676
-0
lines changed

‎src/badge/css/index.ts

+114
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
import {
2+
colorsBackgroundDark,
3+
colorsBackgroundUtility,
4+
colorsTextIcon,
5+
layout,
6+
type,
7+
colorsGreen,
8+
colorsYellow,
9+
colorsBlue,
10+
colorsRed,
11+
colorsWhite
12+
} from '@pluralsight/ps-design-system-core'
13+
import { names as themeNames } from '@pluralsight/ps-design-system-theme'
14+
15+
import { appearances, colors } from '../vars'
16+
import { select } from '../js'
17+
18+
export default {
19+
'.psds-badge': {
20+
borderRadius: '2px',
21+
display: 'inline-block',
22+
fontSize: type.fontSize100,
23+
letterSpacing: type.letterSpacingAllCaps,
24+
fontWeight: type.fontWeightStrong,
25+
lineHeight: type.lineHeightStandard,
26+
padding: `0 ${layout.spacingXSmall}`,
27+
textTransform: 'uppercase'
28+
},
29+
30+
[select(themeNames.dark, appearances.default, colors.neutral)]: {
31+
color: colorsTextIcon.highOnLight,
32+
backgroundColor: colorsWhite
33+
},
34+
[select(themeNames.dark, appearances.default, colors.green)]: {
35+
color: colorsTextIcon.highOnDark,
36+
backgroundColor: colorsGreen[8]
37+
},
38+
[select(themeNames.dark, appearances.default, colors.yellow)]: {
39+
color: colorsTextIcon.highOnLight,
40+
backgroundColor: colorsYellow[6]
41+
},
42+
[select(themeNames.dark, appearances.default, colors.red)]: {
43+
color: colorsTextIcon.highOnDark,
44+
backgroundColor: colorsRed[7]
45+
},
46+
[select(themeNames.dark, appearances.default, colors.blue)]: {
47+
color: colorsTextIcon.highOnDark,
48+
backgroundColor: colorsBlue[7]
49+
},
50+
51+
[select(themeNames.light, appearances.default, colors.neutral)]: {
52+
color: colorsTextIcon.highOnDark,
53+
backgroundColor: colorsBackgroundDark[3]
54+
},
55+
[select(themeNames.light, appearances.default, colors.green)]: {
56+
color: colorsTextIcon.highOnDark,
57+
backgroundColor: colorsGreen[8]
58+
},
59+
[select(themeNames.light, appearances.default, colors.yellow)]: {
60+
color: colorsTextIcon.highOnLight,
61+
backgroundColor: colorsYellow[6]
62+
},
63+
[select(themeNames.light, appearances.default, colors.red)]: {
64+
color: colorsTextIcon.highOnDark,
65+
backgroundColor: colorsRed[7]
66+
},
67+
[select(themeNames.light, appearances.default, colors.blue)]: {
68+
color: colorsTextIcon.highOnDark,
69+
backgroundColor: colorsBlue[7]
70+
},
71+
72+
[select(themeNames.dark, appearances.subtle, colors.neutral)]: {
73+
color: colorsTextIcon.lowOnDark,
74+
backgroundColor: colorsBackgroundUtility[40]
75+
},
76+
[select(themeNames.dark, appearances.subtle, colors.green)]: {
77+
color: colorsGreen[1],
78+
backgroundColor: 'rgba(0,143,70,0.5)'
79+
},
80+
[select(themeNames.dark, appearances.subtle, colors.yellow)]: {
81+
color: colorsYellow[1],
82+
backgroundColor: 'rgba(226,181,0,0.5)'
83+
},
84+
[select(themeNames.dark, appearances.subtle, colors.red)]: {
85+
color: colorsRed[1],
86+
backgroundColor: 'rgba(192,15,0,0.5)'
87+
},
88+
89+
[select(themeNames.dark, appearances.subtle, colors.blue)]: {
90+
color: colorsBlue[1],
91+
backgroundColor: 'rgba(0,116,171,0.5)'
92+
},
93+
94+
[select(themeNames.light, appearances.subtle, colors.neutral)]: {
95+
color: colorsTextIcon.lowOnLight,
96+
backgroundColor: colorsBackgroundUtility[20]
97+
},
98+
[select(themeNames.light, appearances.subtle, colors.green)]: {
99+
color: colorsGreen[10],
100+
backgroundColor: colorsGreen[1]
101+
},
102+
[select(themeNames.light, appearances.subtle, colors.yellow)]: {
103+
color: colorsYellow[10],
104+
backgroundColor: colorsYellow[1]
105+
},
106+
[select(themeNames.light, appearances.subtle, colors.red)]: {
107+
color: colorsRed[10],
108+
backgroundColor: colorsRed[1]
109+
},
110+
[select(themeNames.light, appearances.subtle, colors.blue)]: {
111+
color: colorsBlue[10],
112+
backgroundColor: colorsBlue[1]
113+
}
114+
}

‎src/badge/index.ts

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
export { default } from './react'
2+
export * from './vars'
3+
export * from './js'
4+
export { default as css } from './css'

‎src/badge/js/index.ts

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import Theme from '@pluralsight/ps-design-system-theme'
2+
import { ValueOf } from '@pluralsight/ps-design-system-util'
3+
4+
import * as vars from '../vars'
5+
6+
export function select(
7+
themeName: ValueOf<typeof Theme.names>,
8+
appearance: ValueOf<typeof vars.appearances>,
9+
color: ValueOf<typeof vars.colors>
10+
) {
11+
return (
12+
'.psds-badge--apearance-' +
13+
appearance +
14+
'.psds-badge--color-' +
15+
color +
16+
'.psds-theme--' +
17+
themeName
18+
)
19+
}

‎src/badge/react/__specs__/__snapshots__/storyshots.spec.ts.snap

+115
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`Storyshots appearance default 1`] = `
4+
<div
5+
style={
6+
Object {
7+
"display": "grid",
8+
"gridGap": 10,
9+
}
10+
}
11+
>
12+
<div>
13+
<div
14+
data-css-akmt2m=""
15+
>
16+
default
17+
18+
neutral
19+
</div>
20+
</div>
21+
<div>
22+
<div
23+
data-css-6qp7yi=""
24+
>
25+
default
26+
27+
green
28+
</div>
29+
</div>
30+
<div>
31+
<div
32+
data-css-1370srq=""
33+
>
34+
default
35+
36+
yellow
37+
</div>
38+
</div>
39+
<div>
40+
<div
41+
data-css-dbjxnr=""
42+
>
43+
default
44+
45+
red
46+
</div>
47+
</div>
48+
<div>
49+
<div
50+
data-css-i7yiwd=""
51+
>
52+
default
53+
54+
blue
55+
</div>
56+
</div>
57+
</div>
58+
`;
59+
60+
exports[`Storyshots appearance subtle 1`] = `
61+
<div
62+
style={
63+
Object {
64+
"display": "grid",
65+
"gridGap": 10,
66+
}
67+
}
68+
>
69+
<div>
70+
<div
71+
data-css-1imiq63=""
72+
>
73+
subtle
74+
75+
neutral
76+
</div>
77+
</div>
78+
<div>
79+
<div
80+
data-css-akls3u=""
81+
>
82+
subtle
83+
84+
green
85+
</div>
86+
</div>
87+
<div>
88+
<div
89+
data-css-1739nde=""
90+
>
91+
subtle
92+
93+
yellow
94+
</div>
95+
</div>
96+
<div>
97+
<div
98+
data-css-1svdoaq=""
99+
>
100+
subtle
101+
102+
red
103+
</div>
104+
</div>
105+
<div>
106+
<div
107+
data-css-rl0hco=""
108+
>
109+
subtle
110+
111+
blue
112+
</div>
113+
</div>
114+
</div>
115+
`;

‎src/badge/react/__specs__/storyshots.spec.ts

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import path from 'path'
2+
import initStoryshots, {
3+
snapshotWithOptions
4+
} from '@storybook/addon-storyshots'
5+
6+
const createNodeMock = () => document.createElement('div')
7+
8+
initStoryshots({
9+
configPath: path.resolve(__dirname, '../../../.storybook'),
10+
framework: 'react',
11+
test: snapshotWithOptions({ createNodeMock })
12+
})

‎src/badge/react/__stories__/index.story.tsx

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import { ValueOf } from '@pluralsight/ps-design-system-util'
2+
import { storiesOf } from '@storybook/react'
3+
4+
import React from 'react'
5+
6+
import Badge from '..'
7+
import * as vars from '../../vars'
8+
9+
const BadgeStory = ({
10+
appearance
11+
}: {
12+
appearance: ValueOf<typeof vars.appearances>
13+
}) => (
14+
<div style={{ display: 'grid', gridGap: 10 }}>
15+
{Object.values(Badge.colors).map((color, i) => (
16+
<div key={i}>
17+
<Badge appearance={appearance} color={color}>
18+
{appearance} {color}
19+
</Badge>
20+
</div>
21+
))}
22+
</div>
23+
)
24+
25+
const appearanceStory = storiesOf('appearance', module)
26+
Object.values(Badge.appearances).forEach(appearance =>
27+
appearanceStory.add(appearance, () => <BadgeStory appearance={appearance} />)
28+
)

‎src/badge/react/index.tsx

+75
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
import Theme, { useTheme } from '@pluralsight/ps-design-system-theme'
2+
import {
3+
HTMLPropsFor,
4+
RefForwardingComponent,
5+
ValueOf
6+
} from '@pluralsight/ps-design-system-util'
7+
import { css, StyleAttribute } from 'glamor'
8+
import React from 'react'
9+
10+
import stylesheet from '../css'
11+
import { select } from '../js'
12+
import * as vars from '../vars'
13+
14+
type StyleFn = (
15+
props: InternalBadgeProps,
16+
themeName: ValueOf<typeof Theme.names>
17+
) => StyleAttribute
18+
19+
const styles: { [key: string]: StyleFn } = {
20+
badge: (props, themeName) =>
21+
css(
22+
stylesheet['.psds-badge'],
23+
stylesheet[select(themeName, props.appearance, props.color)]
24+
)
25+
}
26+
27+
interface InternalBadgeProps {
28+
appearance: ValueOf<typeof vars.appearances>
29+
color: ValueOf<typeof vars.colors>
30+
}
31+
32+
type BadgeProps = HTMLPropsFor<'div'> & Partial<InternalBadgeProps>
33+
34+
interface BadgeStatics {
35+
appearances: typeof vars.appearances
36+
colors: typeof vars.colors
37+
}
38+
39+
interface BadgeComponent
40+
extends RefForwardingComponent<BadgeProps, HTMLDivElement, BadgeStatics> {}
41+
42+
const Badge = React.forwardRef<HTMLDivElement, BadgeProps>(
43+
(
44+
{
45+
appearance = vars.appearances.default,
46+
color = vars.colors.neutral,
47+
...rest
48+
},
49+
forwardedRef
50+
) => {
51+
const ref = React.useRef<HTMLDivElement>(null)
52+
// TODO: consider replacing with useCombinedRefs
53+
React.useImperativeHandle(
54+
forwardedRef,
55+
() => (ref.current as unknown) as HTMLDivElement
56+
)
57+
const themeName = useTheme()
58+
59+
return (
60+
<div
61+
{...styles.badge({ appearance, color }, themeName)}
62+
ref={ref}
63+
{...rest}
64+
/>
65+
)
66+
}
67+
) as BadgeComponent
68+
69+
Badge.appearances = vars.appearances
70+
Badge.colors = vars.colors
71+
72+
export const appearances = vars.appearances
73+
export const colors = vars.colors
74+
75+
export default Badge

‎src/badge/vars/index.ts

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import { keyMirror } from '@pluralsight/ps-design-system-util'
2+
3+
export const appearances = keyMirror('default', 'subtle')
4+
5+
export const colors = keyMirror('neutral', 'green', 'yellow', 'red', 'blue')

‎src/core/css/accessibility.module.css

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
.screenreader-only {
2+
position: absolute;
3+
width: 1px;
4+
height: 1px;
5+
padding: 0;
6+
margin: -1px;
7+
overflow: hidden;
8+
border: 0;
9+
}

‎src/core/css/breakpoints.module.css

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
:root {
2+
/* breakpoints */
3+
--psBreakpointsXSmall: 640px;
4+
--psBreakpointsSmall: 768px;
5+
--psBreakpointsMedium: 1024px;
6+
--psBreakpointsLarge: 1280px;
7+
--psBreakpointsXLarge: 1600px;
8+
}

0 commit comments

Comments
 (0)