@primer/components 0.0.0-2021103222654 → 0.0.0-2021103224924

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/CHANGELOG.md +2 -2
  2. package/dist/browser.esm.js +2 -2
  3. package/dist/browser.esm.js.map +1 -1
  4. package/dist/browser.umd.js +2 -2
  5. package/dist/browser.umd.js.map +1 -1
  6. package/lib/TabNav.d.ts +4 -3
  7. package/lib/TabNav.js +2 -2
  8. package/lib/UnderlineNav.d.ts +2 -3
  9. package/lib/UnderlineNav.js +2 -2
  10. package/lib-esm/TabNav.d.ts +4 -3
  11. package/lib-esm/TabNav.js +3 -3
  12. package/lib-esm/UnderlineNav.d.ts +2 -3
  13. package/lib-esm/UnderlineNav.js +3 -3
  14. package/package.json +1 -1
package/lib/TabNav.d.ts CHANGED
@@ -1,19 +1,20 @@
1
1
  /// <reference types="react" />
2
2
  import * as History from 'history';
3
+ import { SystemCommonProps, SystemTypographyProps } from './constants';
3
4
  import { SxProp } from './sx';
4
5
  import { ComponentProps } from './utils/types';
5
- declare const TabNavBase: import("styled-components").StyledComponent<"div", any, SxProp, never>;
6
+ declare const TabNavBase: import("styled-components").StyledComponent<"div", any, SystemCommonProps & SxProp, never>;
6
7
  export declare type TabNavProps = ComponentProps<typeof TabNavBase>;
7
8
  declare function TabNav({ children, 'aria-label': ariaLabel, ...rest }: TabNavProps): JSX.Element;
8
9
  declare const TabNavLink: import("styled-components").StyledComponent<"a", any, {
9
10
  to?: History.LocationDescriptor<unknown> | undefined;
10
11
  selected?: boolean | undefined;
11
- } & SxProp, never>;
12
+ } & SystemCommonProps & SxProp & SystemTypographyProps, never>;
12
13
  export declare type TabNavLinkProps = ComponentProps<typeof TabNavLink>;
13
14
  declare const _default: typeof TabNav & {
14
15
  Link: import("styled-components").StyledComponent<"a", any, {
15
16
  to?: History.LocationDescriptor<unknown> | undefined;
16
17
  selected?: boolean | undefined;
17
- } & SxProp, never>;
18
+ } & SystemCommonProps & SxProp & SystemTypographyProps, never>;
18
19
  };
19
20
  export default _default;
package/lib/TabNav.js CHANGED
@@ -23,7 +23,7 @@ const SELECTED_CLASS = 'selected';
23
23
  const TabNavBase = _styledComponents.default.div.withConfig({
24
24
  displayName: "TabNav__TabNavBase",
25
25
  componentId: "sc-1xod0ow-0"
26
- })(["margin-top:0;border-bottom:1px solid ", ";", ""], (0, _constants.get)('colors.border.default'), _sx.default);
26
+ })(["margin-top:0;border-bottom:1px solid ", ";", " ", ""], (0, _constants.get)('colors.border.default'), _constants.COMMON, _sx.default);
27
27
 
28
28
  const TabNavBody = _styledComponents.default.nav.withConfig({
29
29
  displayName: "TabNav__TabNavBody",
@@ -48,7 +48,7 @@ const TabNavLink = _styledComponents.default.a.attrs(props => ({
48
48
  })).withConfig({
49
49
  displayName: "TabNav__TabNavLink",
50
50
  componentId: "sc-1xod0ow-2"
51
- })(["padding:8px 12px;font-size:", ";line-height:20px;color:", ";text-decoration:none;background-color:transparent;border:1px solid transparent;border-bottom:0;&:hover,&:focus{color:", ";text-decoration:none;}&.selected{color:", ";border-color:", ";border-top-right-radius:", ";border-top-left-radius:", ";background-color:", ";}", ";"], (0, _constants.get)('fontSizes.1'), (0, _constants.get)('colors.fg.default'), (0, _constants.get)('colors.fg.default'), (0, _constants.get)('colors.fg.default'), (0, _constants.get)('colors.border.default'), (0, _constants.get)('radii.2'), (0, _constants.get)('radii.2'), (0, _constants.get)('colors.canvas.default'), _sx.default);
51
+ })(["padding:8px 12px;font-size:", ";line-height:20px;color:", ";text-decoration:none;background-color:transparent;border:1px solid transparent;border-bottom:0;&:hover,&:focus{color:", ";text-decoration:none;}&.selected{color:", ";border-color:", ";border-top-right-radius:", ";border-top-left-radius:", ";background-color:", ";}", ";", ";"], (0, _constants.get)('fontSizes.1'), (0, _constants.get)('colors.fg.default'), (0, _constants.get)('colors.fg.default'), (0, _constants.get)('colors.fg.default'), (0, _constants.get)('colors.border.default'), (0, _constants.get)('radii.2'), (0, _constants.get)('radii.2'), (0, _constants.get)('colors.canvas.default'), _constants.COMMON, _sx.default);
52
52
 
53
53
  TabNavLink.displayName = 'TabNav.Link';
54
54
 
package/lib/UnderlineNav.d.ts CHANGED
@@ -1,6 +1,5 @@
1
1
  import * as History from 'history';
2
2
  import React from 'react';
3
- import { SystemCommonProps } from './constants';
4
3
  import { SxProp } from './sx';
5
4
  import { ComponentProps } from './utils/types';
6
5
  declare const UnderlineNavBase: import("styled-components").StyledComponent<"nav", any, SxProp, never>;
@@ -14,12 +13,12 @@ declare function UnderlineNav({ actions, className, align, children, full, label
14
13
  declare const UnderlineNavLink: import("styled-components").StyledComponent<"a", any, {
15
14
  to?: History.LocationDescriptor<unknown> | undefined;
16
15
  selected?: boolean | undefined;
17
- } & SystemCommonProps & SxProp, never>;
16
+ } & SxProp, never>;
18
17
  export declare type UnderlineNavLinkProps = ComponentProps<typeof UnderlineNavLink>;
19
18
  declare const _default: typeof UnderlineNav & {
20
19
  Link: import("styled-components").StyledComponent<"a", any, {
21
20
  to?: History.LocationDescriptor<unknown> | undefined;
22
21
  selected?: boolean | undefined;
23
- } & SystemCommonProps & SxProp, never>;
22
+ } & SxProp, never>;
24
23
  };
25
24
  export default _default;
package/lib/UnderlineNav.js CHANGED
@@ -25,7 +25,7 @@ const SELECTED_CLASS = 'selected';
25
25
  const UnderlineNavBase = _styledComponents.default.nav.withConfig({
26
26
  displayName: "UnderlineNav__UnderlineNavBase",
27
27
  componentId: "zrnxqt-0"
28
- })(["display:flex;justify-content:space-between;border-bottom:1px solid ", ";&.UnderlineNav--right{justify-content:flex-end;.UnderlineNav-item{margin-right:0;margin-left:", ";}.UnderlineNav-actions{flex:1 1 auto;}}&.UnderlineNav--full{display:block;}.UnderlineNav-body{display:flex;margin-bottom:-1px;}.UnderlineNav-actions{align-self:center;}", ";", ";"], (0, _constants.get)('colors.border.muted'), (0, _constants.get)('space.3'), _constants.COMMON, _sx.default);
28
+ })(["display:flex;justify-content:space-between;border-bottom:1px solid ", ";&.UnderlineNav--right{justify-content:flex-end;.UnderlineNav-item{margin-right:0;margin-left:", ";}.UnderlineNav-actions{flex:1 1 auto;}}&.UnderlineNav--full{display:block;}.UnderlineNav-body{display:flex;margin-bottom:-1px;}.UnderlineNav-actions{align-self:center;}", ";"], (0, _constants.get)('colors.border.muted'), (0, _constants.get)('space.3'), _sx.default);
29
29
 
30
30
  function UnderlineNav({
31
31
  actions,
@@ -57,7 +57,7 @@ const UnderlineNavLink = _styledComponents.default.a.attrs(props => ({
57
57
  })).withConfig({
58
58
  displayName: "UnderlineNav__UnderlineNavLink",
59
59
  componentId: "zrnxqt-1"
60
- })(["padding:", " ", ";margin-right:", ";font-size:", ";line-height:", ";color:", ";text-align:center;border-bottom:2px solid transparent;text-decoration:none;&:hover,&:focus{color:", ";text-decoration:none;border-bottom-color:", ";transition:0.2s ease;.UnderlineNav-octicon{color:", ";}}&.selected{color:", ";border-bottom-color:", ";.UnderlineNav-octicon{color:", ";}}", ";", ";"], (0, _constants.get)('space.3'), (0, _constants.get)('space.2'), (0, _constants.get)('space.3'), (0, _constants.get)('fontSizes.1'), (0, _constants.get)('lineHeights.default'), (0, _constants.get)('colors.fg.default'), (0, _constants.get)('colors.fg.default'), (0, _constants.get)('colors.neutral.muted'), (0, _constants.get)('colors.fg.muted'), (0, _constants.get)('colors.fg.default'), (0, _constants.get)('colors.primer.border.active'), (0, _constants.get)('colors.fg.default'), _constants.COMMON, _sx.default);
60
+ })(["padding:", " ", ";margin-right:", ";font-size:", ";line-height:", ";color:", ";text-align:center;border-bottom:2px solid transparent;text-decoration:none;&:hover,&:focus{color:", ";text-decoration:none;border-bottom-color:", ";transition:0.2s ease;.UnderlineNav-octicon{color:", ";}}&.selected{color:", ";border-bottom-color:", ";.UnderlineNav-octicon{color:", ";}}", ";"], (0, _constants.get)('space.3'), (0, _constants.get)('space.2'), (0, _constants.get)('space.3'), (0, _constants.get)('fontSizes.1'), (0, _constants.get)('lineHeights.default'), (0, _constants.get)('colors.fg.default'), (0, _constants.get)('colors.fg.default'), (0, _constants.get)('colors.neutral.muted'), (0, _constants.get)('colors.fg.muted'), (0, _constants.get)('colors.fg.default'), (0, _constants.get)('colors.primer.border.active'), (0, _constants.get)('colors.fg.default'), _sx.default);
61
61
 
62
62
  UnderlineNavLink.displayName = 'UnderlineNav.Link';
63
63
 
package/lib-esm/TabNav.d.ts CHANGED
@@ -1,19 +1,20 @@
1
1
  /// <reference types="react" />
2
2
  import * as History from 'history';
3
+ import { SystemCommonProps, SystemTypographyProps } from './constants';
3
4
  import { SxProp } from './sx';
4
5
  import { ComponentProps } from './utils/types';
5
- declare const TabNavBase: import("styled-components").StyledComponent<"div", any, SxProp, never>;
6
+ declare const TabNavBase: import("styled-components").StyledComponent<"div", any, SystemCommonProps & SxProp, never>;
6
7
  export declare type TabNavProps = ComponentProps<typeof TabNavBase>;
7
8
  declare function TabNav({ children, 'aria-label': ariaLabel, ...rest }: TabNavProps): JSX.Element;
8
9
  declare const TabNavLink: import("styled-components").StyledComponent<"a", any, {
9
10
  to?: History.LocationDescriptor<unknown> | undefined;
10
11
  selected?: boolean | undefined;
11
- } & SxProp, never>;
12
+ } & SystemCommonProps & SxProp & SystemTypographyProps, never>;
12
13
  export declare type TabNavLinkProps = ComponentProps<typeof TabNavLink>;
13
14
  declare const _default: typeof TabNav & {
14
15
  Link: import("styled-components").StyledComponent<"a", any, {
15
16
  to?: History.LocationDescriptor<unknown> | undefined;
16
17
  selected?: boolean | undefined;
17
- } & SxProp, never>;
18
+ } & SystemCommonProps & SxProp & SystemTypographyProps, never>;
18
19
  };
19
20
  export default _default;
package/lib-esm/TabNav.js CHANGED
@@ -2,14 +2,14 @@ import classnames from 'classnames'; // eslint-disable-next-line import/no-names
2
2
 
3
3
  import React from 'react';
4
4
  import styled from 'styled-components';
5
- import { get } from './constants';
5
+ import { COMMON, get } from './constants';
6
6
  import sx from './sx';
7
7
  const ITEM_CLASS = 'TabNav-item';
8
8
  const SELECTED_CLASS = 'selected';
9
9
  const TabNavBase = styled.div.withConfig({
10
10
  displayName: "TabNav__TabNavBase",
11
11
  componentId: "sc-1xod0ow-0"
12
- })(["margin-top:0;border-bottom:1px solid ", ";", ""], get('colors.border.default'), sx);
12
+ })(["margin-top:0;border-bottom:1px solid ", ";", " ", ""], get('colors.border.default'), COMMON, sx);
13
13
  const TabNavBody = styled.nav.withConfig({
14
14
  displayName: "TabNav__TabNavBody",
15
15
  componentId: "sc-1xod0ow-1"
@@ -32,7 +32,7 @@ const TabNavLink = styled.a.attrs(props => ({
32
32
  })).withConfig({
33
33
  displayName: "TabNav__TabNavLink",
34
34
  componentId: "sc-1xod0ow-2"
35
- })(["padding:8px 12px;font-size:", ";line-height:20px;color:", ";text-decoration:none;background-color:transparent;border:1px solid transparent;border-bottom:0;&:hover,&:focus{color:", ";text-decoration:none;}&.selected{color:", ";border-color:", ";border-top-right-radius:", ";border-top-left-radius:", ";background-color:", ";}", ";"], get('fontSizes.1'), get('colors.fg.default'), get('colors.fg.default'), get('colors.fg.default'), get('colors.border.default'), get('radii.2'), get('radii.2'), get('colors.canvas.default'), sx);
35
+ })(["padding:8px 12px;font-size:", ";line-height:20px;color:", ";text-decoration:none;background-color:transparent;border:1px solid transparent;border-bottom:0;&:hover,&:focus{color:", ";text-decoration:none;}&.selected{color:", ";border-color:", ";border-top-right-radius:", ";border-top-left-radius:", ";background-color:", ";}", ";", ";"], get('fontSizes.1'), get('colors.fg.default'), get('colors.fg.default'), get('colors.fg.default'), get('colors.border.default'), get('radii.2'), get('radii.2'), get('colors.canvas.default'), COMMON, sx);
36
36
  TabNavLink.displayName = 'TabNav.Link';
37
37
  export default Object.assign(TabNav, {
38
38
  Link: TabNavLink
package/lib-esm/UnderlineNav.d.ts CHANGED
@@ -1,6 +1,5 @@
1
1
  import * as History from 'history';
2
2
  import React from 'react';
3
- import { SystemCommonProps } from './constants';
4
3
  import { SxProp } from './sx';
5
4
  import { ComponentProps } from './utils/types';
6
5
  declare const UnderlineNavBase: import("styled-components").StyledComponent<"nav", any, SxProp, never>;
@@ -14,12 +13,12 @@ declare function UnderlineNav({ actions, className, align, children, full, label
14
13
  declare const UnderlineNavLink: import("styled-components").StyledComponent<"a", any, {
15
14
  to?: History.LocationDescriptor<unknown> | undefined;
16
15
  selected?: boolean | undefined;
17
- } & SystemCommonProps & SxProp, never>;
16
+ } & SxProp, never>;
18
17
  export declare type UnderlineNavLinkProps = ComponentProps<typeof UnderlineNavLink>;
19
18
  declare const _default: typeof UnderlineNav & {
20
19
  Link: import("styled-components").StyledComponent<"a", any, {
21
20
  to?: History.LocationDescriptor<unknown> | undefined;
22
21
  selected?: boolean | undefined;
23
- } & SystemCommonProps & SxProp, never>;
22
+ } & SxProp, never>;
24
23
  };
25
24
  export default _default;
package/lib-esm/UnderlineNav.js CHANGED
@@ -4,14 +4,14 @@ import classnames from 'classnames'; // eslint-disable-next-line import/no-names
4
4
 
5
5
  import React from 'react';
6
6
  import styled from 'styled-components';
7
- import { COMMON, get } from './constants';
7
+ import { get } from './constants';
8
8
  import sx from './sx';
9
9
  const ITEM_CLASS = 'UnderlineNav-item';
10
10
  const SELECTED_CLASS = 'selected';
11
11
  const UnderlineNavBase = styled.nav.withConfig({
12
12
  displayName: "UnderlineNav__UnderlineNavBase",
13
13
  componentId: "zrnxqt-0"
14
- })(["display:flex;justify-content:space-between;border-bottom:1px solid ", ";&.UnderlineNav--right{justify-content:flex-end;.UnderlineNav-item{margin-right:0;margin-left:", ";}.UnderlineNav-actions{flex:1 1 auto;}}&.UnderlineNav--full{display:block;}.UnderlineNav-body{display:flex;margin-bottom:-1px;}.UnderlineNav-actions{align-self:center;}", ";", ";"], get('colors.border.muted'), get('space.3'), COMMON, sx);
14
+ })(["display:flex;justify-content:space-between;border-bottom:1px solid ", ";&.UnderlineNav--right{justify-content:flex-end;.UnderlineNav-item{margin-right:0;margin-left:", ";}.UnderlineNav-actions{flex:1 1 auto;}}&.UnderlineNav--full{display:block;}.UnderlineNav-body{display:flex;margin-bottom:-1px;}.UnderlineNav-actions{align-self:center;}", ";"], get('colors.border.muted'), get('space.3'), sx);
15
15
 
16
16
  function UnderlineNav({
17
17
  actions,
@@ -42,7 +42,7 @@ const UnderlineNavLink = styled.a.attrs(props => ({
42
42
  })).withConfig({
43
43
  displayName: "UnderlineNav__UnderlineNavLink",
44
44
  componentId: "zrnxqt-1"
45
- })(["padding:", " ", ";margin-right:", ";font-size:", ";line-height:", ";color:", ";text-align:center;border-bottom:2px solid transparent;text-decoration:none;&:hover,&:focus{color:", ";text-decoration:none;border-bottom-color:", ";transition:0.2s ease;.UnderlineNav-octicon{color:", ";}}&.selected{color:", ";border-bottom-color:", ";.UnderlineNav-octicon{color:", ";}}", ";", ";"], get('space.3'), get('space.2'), get('space.3'), get('fontSizes.1'), get('lineHeights.default'), get('colors.fg.default'), get('colors.fg.default'), get('colors.neutral.muted'), get('colors.fg.muted'), get('colors.fg.default'), get('colors.primer.border.active'), get('colors.fg.default'), COMMON, sx);
45
+ })(["padding:", " ", ";margin-right:", ";font-size:", ";line-height:", ";color:", ";text-align:center;border-bottom:2px solid transparent;text-decoration:none;&:hover,&:focus{color:", ";text-decoration:none;border-bottom-color:", ";transition:0.2s ease;.UnderlineNav-octicon{color:", ";}}&.selected{color:", ";border-bottom-color:", ";.UnderlineNav-octicon{color:", ";}}", ";"], get('space.3'), get('space.2'), get('space.3'), get('fontSizes.1'), get('lineHeights.default'), get('colors.fg.default'), get('colors.fg.default'), get('colors.neutral.muted'), get('colors.fg.muted'), get('colors.fg.default'), get('colors.primer.border.active'), get('colors.fg.default'), sx);
46
46
  UnderlineNavLink.displayName = 'UnderlineNav.Link';
47
47
  export default Object.assign(UnderlineNav, {
48
48
  Link: UnderlineNavLink
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@primer/components",
3
- "version": "0.0.0-2021103222654",
3
+ "version": "0.0.0-2021103224924",
4
4
  "description": "Primer react components",
5
5
  "main": "lib/index.js",
6
6
  "module": "lib-esm/index.js",