@primer/react-brand 0.0.4-rc.bd3f6de → 0.1.0-rc.ae0dfda
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.
- package/CHANGELOG.md +5 -1
- package/lib/Hero/Hero.d.ts +2 -1
- package/lib/css/main.css +23 -4
- package/lib/index.js +1 -1
- package/package.json +2 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,6 +1,10 @@
|
|
|
1
1
|
# @primer/react-brand
|
|
2
2
|
|
|
3
|
-
## 0.0
|
|
3
|
+
## 0.1.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [#19](https://github.com/primer/react-brand/pull/19) [`3b22e9e`](https://github.com/primer/react-brand/commit/3b22e9e0823401104d6e33b3c4f8664b755ea6ba) Thanks [@colebemis](https://github.com/colebemis)! - Add `size` prop to `Hero` component
|
|
4
8
|
|
|
5
9
|
### Patch Changes
|
|
6
10
|
|
package/lib/Hero/Hero.d.ts
CHANGED
|
@@ -9,6 +9,7 @@ export declare type HeroProps = {
|
|
|
9
9
|
primaryAction: Action;
|
|
10
10
|
secondaryAction?: Action;
|
|
11
11
|
align?: 'start' | 'center';
|
|
12
|
+
size?: 'small' | 'large';
|
|
12
13
|
};
|
|
13
|
-
export declare function Hero({ heading, description, primaryAction, secondaryAction, align }: HeroProps): JSX.Element;
|
|
14
|
+
export declare function Hero({ heading, description, primaryAction, secondaryAction, align, size }: HeroProps): JSX.Element;
|
|
14
15
|
export {};
|
package/lib/css/main.css
CHANGED
|
@@ -24,13 +24,20 @@ body {
|
|
|
24
24
|
|
|
25
25
|
.Hero-module__Hero-heading___Ns\+oe {
|
|
26
26
|
margin: 0;
|
|
27
|
-
font-size: 2.5rem;
|
|
28
27
|
font-weight: 700;
|
|
29
28
|
line-height: 1.1;
|
|
30
|
-
max-width:
|
|
29
|
+
max-width: 18ch;
|
|
31
30
|
color: var(--gh-color-fg-default);
|
|
32
31
|
}
|
|
33
32
|
|
|
33
|
+
.Hero-module__Hero--size-small___lTdu6 .Hero-module__Hero-heading___Ns\+oe {
|
|
34
|
+
font-size: 2.5rem;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.Hero-module__Hero--size-large___LjSYu .Hero-module__Hero-heading___Ns\+oe {
|
|
38
|
+
font-size: 3rem;
|
|
39
|
+
}
|
|
40
|
+
|
|
34
41
|
.Hero-module__Hero-description___5DYuI {
|
|
35
42
|
margin: 1.5rem 0 0;
|
|
36
43
|
font-size: 1rem;
|
|
@@ -56,10 +63,14 @@ body {
|
|
|
56
63
|
padding: 10.75rem 0;
|
|
57
64
|
}
|
|
58
65
|
|
|
59
|
-
.Hero-module__Hero-heading___Ns\+oe {
|
|
66
|
+
.Hero-module__Hero--size-small___lTdu6 .Hero-module__Hero-heading___Ns\+oe {
|
|
60
67
|
font-size: 3.5rem;
|
|
61
68
|
}
|
|
62
69
|
|
|
70
|
+
.Hero-module__Hero--size-large___LjSYu .Hero-module__Hero-heading___Ns\+oe {
|
|
71
|
+
font-size: 4.5rem;
|
|
72
|
+
}
|
|
73
|
+
|
|
63
74
|
.Hero-module__Hero-description___5DYuI {
|
|
64
75
|
font-size: 1.25rem;
|
|
65
76
|
}
|
|
@@ -76,9 +87,17 @@ body {
|
|
|
76
87
|
|
|
77
88
|
/* Medium breakpoint and up */
|
|
78
89
|
@media screen and (min-width: 768px) {
|
|
79
|
-
.Hero-module__Hero-heading___Ns\+oe {
|
|
90
|
+
.Hero-module__Hero--size-small___lTdu6 .Hero-module__Hero-heading___Ns\+oe {
|
|
80
91
|
font-size: 4.5rem;
|
|
81
92
|
}
|
|
93
|
+
|
|
94
|
+
.Hero-module__Hero--size-large___LjSYu .Hero-module__Hero-heading___Ns\+oe {
|
|
95
|
+
font-size: 6rem;
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
.Hero-module__Hero--size-large___LjSYu .Hero-module__Hero-description___5DYuI {
|
|
99
|
+
font-size: 1.5rem;
|
|
100
|
+
}
|
|
82
101
|
}
|
|
83
102
|
|
|
84
103
|
.ExpandableArrow-module__ExpandableArrow___Zzb6R {
|
package/lib/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
/*! For license information please see index.js.LICENSE.txt */
|
|
2
|
-
!function(e,r){"object"==typeof exports&&"object"==typeof module?module.exports=r(require("react")):"function"==typeof define&&define.amd?define("@primer/react-brand",[],r):"object"==typeof exports?exports["@primer/react-brand"]=r(require("react")):e["@primer/react-brand"]=r(e.React)}(this,(function(e){return(()=>{"use strict";var r={418:e=>{var r=Object.getOwnPropertySymbols,o=Object.prototype.hasOwnProperty,t=Object.prototype.propertyIsEnumerable;function n(e){if(null==e)throw new TypeError("Object.assign cannot be called with null or undefined");return Object(e)}e.exports=function(){try{if(!Object.assign)return!1;var e=new String("abc");if(e[5]="de","5"===Object.getOwnPropertyNames(e)[0])return!1;for(var r={},o=0;o<10;o++)r["_"+String.fromCharCode(o)]=o;if("0123456789"!==Object.getOwnPropertyNames(r).map((function(e){return r[e]})).join(""))return!1;var t={};return"abcdefghijklmnopqrst".split("").forEach((function(e){t[e]=e})),"abcdefghijklmnopqrst"===Object.keys(Object.assign({},t)).join("")}catch(e){return!1}}()?Object.assign:function(e,a){for(var i,s,
|
|
2
|
+
!function(e,r){"object"==typeof exports&&"object"==typeof module?module.exports=r(require("react")):"function"==typeof define&&define.amd?define("@primer/react-brand",[],r):"object"==typeof exports?exports["@primer/react-brand"]=r(require("react")):e["@primer/react-brand"]=r(e.React)}(this,(function(e){return(()=>{"use strict";var r={418:e=>{var r=Object.getOwnPropertySymbols,o=Object.prototype.hasOwnProperty,t=Object.prototype.propertyIsEnumerable;function n(e){if(null==e)throw new TypeError("Object.assign cannot be called with null or undefined");return Object(e)}e.exports=function(){try{if(!Object.assign)return!1;var e=new String("abc");if(e[5]="de","5"===Object.getOwnPropertyNames(e)[0])return!1;for(var r={},o=0;o<10;o++)r["_"+String.fromCharCode(o)]=o;if("0123456789"!==Object.getOwnPropertyNames(r).map((function(e){return r[e]})).join(""))return!1;var t={};return"abcdefghijklmnopqrst".split("").forEach((function(e){t[e]=e})),"abcdefghijklmnopqrst"===Object.keys(Object.assign({},t)).join("")}catch(e){return!1}}()?Object.assign:function(e,a){for(var i,s,l=n(e),c=1;c<arguments.length;c++){for(var u in i=Object(arguments[c]))o.call(i,u)&&(l[u]=i[u]);if(r){s=r(i);for(var d=0;d<s.length;d++)t.call(i,s[d])&&(l[s[d]]=i[s[d]])}}return l}},251:(e,r,o)=>{o(418);var t=o(697),n=60103;if("function"==typeof Symbol&&Symbol.for){var a=Symbol.for;n=a("react.element"),a("react.fragment")}var i=t.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,s=Object.prototype.hasOwnProperty,l={key:!0,ref:!0,__self:!0,__source:!0};function c(e,r,o){var t,a={},c=null,u=null;for(t in void 0!==o&&(c=""+o),void 0!==r.key&&(c=""+r.key),void 0!==r.ref&&(u=r.ref),r)s.call(r,t)&&!l.hasOwnProperty(t)&&(a[t]=r[t]);if(e&&e.defaultProps)for(t in r=e.defaultProps)void 0===a[t]&&(a[t]=r[t]);return{$$typeof:n,type:e,key:c,ref:u,props:a,_owner:i.current}}r.jsx=c,r.jsxs=c},893:(e,r,o)=>{e.exports=o(251)},697:r=>{r.exports=e}},o={};function t(e){var n=o[e];if(void 0!==n)return n.exports;var a=o[e]={exports:{}};return r[e](a,a.exports,t),a.exports}t.n=e=>{var r=e&&e.__esModule?()=>e.default:()=>e;return t.d(r,{a:r}),r},t.d=(e,r)=>{for(var o in r)t.o(r,o)&&!t.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:r[o]})},t.o=(e,r)=>Object.prototype.hasOwnProperty.call(e,r),t.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var n={};return(()=>{t.r(n),t.d(n,{ColorModesEnum:()=>_,Hero:()=>d,ThemeContext:()=>p,ThemeProvider:()=>m,useTheme:()=>v});var e=t(893);function r(e){var o,t,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e))for(o=0;o<e.length;o++)e[o]&&(t=r(e[o]))&&(n&&(n+=" "),n+=t);else for(o in e)e[o]&&(n&&(n+=" "),n+=o);return n}function o(){for(var e,o,t=0,n="";t<arguments.length;)(e=arguments[t++])&&(o=r(e))&&(n&&(n+=" "),n+=o);return n}const a={Hero:"Hero-module__Hero___-LIGB","Hero--align-start":"Hero-module__Hero--align-start___+ux3o","Hero--align-center":"Hero-module__Hero--align-center___L5ing","Hero-heading":"Hero-module__Hero-heading___Ns+oe","Hero--size-small":"Hero-module__Hero--size-small___lTdu6","Hero--size-large":"Hero-module__Hero--size-large___LjSYu","Hero-description":"Hero-module__Hero-description___5DYuI","Hero-actions":"Hero-module__Hero-actions___TSUhJ"};var i=t(697),s=t.n(i);function l({className:r,expanded:t=!1}){return(0,e.jsxs)("svg",{className:o("ExpandableArrow-module__ExpandableArrow___Zzb6R",t&&"ExpandableArrow-module__ExpandableArrow--expanded___02I33",r),width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",children:[(0,e.jsx)("path",{fill:"currentColor",d:"M7.28033 3.21967C6.98744 2.92678 6.51256 2.92678 6.21967 3.21967C5.92678 3.51256 5.92678 3.98744 6.21967 4.28033L7.28033 3.21967ZM11 8L11.5303 8.53033C11.8232 8.23744 11.8232 7.76256 11.5303 7.46967L11 8ZM6.21967 11.7197C5.92678 12.0126 5.92678 12.4874 6.21967 12.7803C6.51256 13.0732 6.98744 13.0732 7.28033 12.7803L6.21967 11.7197ZM6.21967 4.28033L10.4697 8.53033L11.5303 7.46967L7.28033 3.21967L6.21967 4.28033ZM10.4697 7.46967L6.21967 11.7197L7.28033 12.7803L11.5303 8.53033L10.4697 7.46967Z"}),(0,e.jsx)("path",{className:o("ExpandableArrow-module__ExpandableArrow-stem___o-Z1H",t&&"ExpandableArrow-module__ExpandableArrow-stem--expanded___omLNO"),stroke:"currentColor",d:"M1.75 8H11",strokeWidth:"1.5",strokeLinecap:"round"})]})}const c={LinkButton:"LinkButton-module__LinkButton___73d6V","LinkButton-arrow":"LinkButton-module__LinkButton-arrow___bd7ZC","LinkButton--primary":"LinkButton-module__LinkButton--primary___5T51r","LinkButton--secondary":"LinkButton-module__LinkButton--secondary___Oc3L1"};function u({variant:r="secondary",className:t,children:n,onMouseEnter:a,onMouseLeave:i,onFocus:u,onBlur:d,..._}){const[f,p]=s().useState(!1),[m,h]=s().useState(!1);return(0,e.jsxs)("a",{className:o(c.LinkButton,c[`LinkButton--${r}`],t),onMouseEnter:e=>{p(!0),a?.(e)},onMouseLeave:e=>{p(!1),i?.(e)},onFocus:e=>{h(!0),u?.(e)},onBlur:e=>{h(!1),d?.(e)},..._,children:[n,(0,e.jsx)(l,{className:c["LinkButton-arrow"],expanded:f||m})]})}function d({heading:r,description:t,primaryAction:n,secondaryAction:i,align:s="start",size:l="large"}){return(0,e.jsxs)("div",{className:o(a.Hero,a[`Hero--align-${s}`],a[`Hero--size-${l}`]),children:[(0,e.jsx)("h1",{className:a["Hero-heading"],children:r}),t?(0,e.jsx)("p",{className:a["Hero-description"],children:t}):null,(0,e.jsxs)("div",{className:a["Hero-actions"],children:[(0,e.jsx)(u,{variant:"primary",href:n.href,children:n.text}),i?(0,e.jsx)(u,{variant:"secondary",href:i.href,children:i.text}):null]})]})}var _;!function(e){e.LIGHT="light",e.DARK="dark",e.AUTO="auto"}(_||(_={}));const f=_.LIGHT,p=(0,i.createContext)({colorMode:f,availableColorModes:Object.values(_)});function m({colorMode:r=f,children:o,...t}){const[n,a]=(0,i.useState)(r),s=(0,i.useMemo)((()=>Object.values(_)),[]);return(0,i.useEffect)((()=>(r===_.AUTO?a(b()):n!==r&&a(r),y(a))),[r,n,a]),(0,e.jsx)(p.Provider,{value:{colorMode:n,availableColorModes:s},children:(0,e.jsx)("div",{"data-color-mode":n,...t,children:o})})}const h=()=>window.matchMedia(`(prefers-color-scheme: ${_.DARK})`),b=()=>h().matches?_.DARK:_.LIGHT,y=e=>{const r=h(),o=r=>e(r.matches?_.DARK:_.LIGHT);return r.addEventListener("change",o),()=>r.removeEventListener("change",o)},v=()=>(0,i.useContext)(p)})(),n})()}));
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@primer/react-brand",
|
|
3
|
-
"version": "0.0
|
|
3
|
+
"version": "0.1.0-rc.ae0dfda",
|
|
4
4
|
"author": "GitHub, Inc.",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"bugs": {
|
|
@@ -26,6 +26,7 @@
|
|
|
26
26
|
"build:types": "tsc --project tsconfig.build.json",
|
|
27
27
|
"build:storybook": "scripts/build-storybook",
|
|
28
28
|
"build:docs": "scripts/build-docs",
|
|
29
|
+
"build:docs:preview": "scripts/build-docs preview",
|
|
29
30
|
"build:css-types": "tcm -p 'src/**/*.css' .",
|
|
30
31
|
"check": "tsc --noEmit",
|
|
31
32
|
"clean": "rm -rf lib",
|