@primer/react-brand 0.1.0 → 0.2.0-rc.dd0371a

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 (86) hide show
  1. package/CHANGELOG.md +142 -0
  2. package/fonts/alliance-1.woff2 +0 -0
  3. package/fonts/alliance-2.woff2 +0 -0
  4. package/lib/Button/Button.d.ts +7 -0
  5. package/lib/Button/index.d.ts +1 -0
  6. package/lib/Heading/Heading.d.ts +1 -1
  7. package/lib/Link/Link.d.ts +9 -0
  8. package/lib/Link/index.d.ts +1 -0
  9. package/lib/River/River.d.ts +69 -0
  10. package/lib/River/index.d.ts +1 -0
  11. package/lib/Text/Text.d.ts +1 -1
  12. package/lib/component-helpers.d.ts +7 -0
  13. package/lib/css/main.css +202 -16
  14. package/lib/design-tokens/css/tokens/base/colors/color-scales-with-modes.css +1 -1
  15. package/lib/design-tokens/css/tokens/base/colors/color-scales.css +1 -1
  16. package/lib/design-tokens/css/tokens/base/size/size.css +1 -1
  17. package/lib/design-tokens/css/tokens/base/typography/typography.css +1 -1
  18. package/lib/design-tokens/css/tokens/functional/colors/global-with-modes.css +1 -1
  19. package/lib/design-tokens/css/tokens/functional/colors/global.css +1 -1
  20. package/lib/design-tokens/css/tokens/functional/components/button/colors-with-modes.css +1 -1
  21. package/lib/design-tokens/css/tokens/functional/components/hero/base.css +1 -1
  22. package/lib/design-tokens/css/tokens/functional/components/river/base.css +12 -0
  23. package/lib/design-tokens/css/tokens/functional/size/border.css +1 -1
  24. package/lib/design-tokens/css/tokens/functional/size/breakpoints.css +1 -1
  25. package/lib/design-tokens/css/tokens/functional/size/size-coarse.css +1 -1
  26. package/lib/design-tokens/css/tokens/functional/size/size-fine.css +1 -1
  27. package/lib/design-tokens/css/tokens/functional/size/size.css +1 -1
  28. package/lib/design-tokens/css/tokens/functional/typography/typography-responsive.css +1 -1
  29. package/lib/design-tokens/css/tokens/functional/typography/typography.css +1 -1
  30. package/lib/design-tokens/js/module/tokens/base/colors/color-scales.js +1 -1
  31. package/lib/design-tokens/js/module/tokens/base/size/size.js +1 -1
  32. package/lib/design-tokens/js/module/tokens/base/typography/typography.js +1 -1
  33. package/lib/design-tokens/js/module/tokens/functional/colors/global.js +1 -1
  34. package/lib/design-tokens/js/module/tokens/functional/components/hero/base.js +1 -1
  35. package/lib/design-tokens/js/module/tokens/functional/components/river/base.js +107 -0
  36. package/lib/design-tokens/js/module/tokens/functional/size/border.js +1 -1
  37. package/lib/design-tokens/js/module/tokens/functional/size/breakpoints.js +1 -1
  38. package/lib/design-tokens/js/module/tokens/functional/size/size-coarse.js +1 -1
  39. package/lib/design-tokens/js/module/tokens/functional/size/size-fine.js +1 -1
  40. package/lib/design-tokens/js/module/tokens/functional/size/size.js +1 -1
  41. package/lib/design-tokens/js/module/tokens/functional/size/viewport.js +1 -1
  42. package/lib/design-tokens/js/module/tokens/functional/typography/typography.js +1 -1
  43. package/lib/design-tokens/js/tokens/base/colors/color-scales.js +1 -1
  44. package/lib/design-tokens/js/tokens/base/size/size.js +1 -1
  45. package/lib/design-tokens/js/tokens/base/typography/typography.js +1 -1
  46. package/lib/design-tokens/js/tokens/functional/colors/global.js +1 -1
  47. package/lib/design-tokens/js/tokens/functional/components/hero/base.js +1 -1
  48. package/lib/design-tokens/js/tokens/functional/components/river/base.js +10 -0
  49. package/lib/design-tokens/js/tokens/functional/size/border.js +1 -1
  50. package/lib/design-tokens/js/tokens/functional/size/breakpoints.js +1 -1
  51. package/lib/design-tokens/js/tokens/functional/size/size-coarse.js +1 -1
  52. package/lib/design-tokens/js/tokens/functional/size/size-fine.js +1 -1
  53. package/lib/design-tokens/js/tokens/functional/size/size.js +1 -1
  54. package/lib/design-tokens/js/tokens/functional/size/viewport.js +1 -1
  55. package/lib/design-tokens/js/tokens/functional/typography/typography.js +1 -1
  56. package/lib/design-tokens/ts/tokens/base/colors/color-scales.d.ts +1 -1
  57. package/lib/design-tokens/ts/tokens/base/colors/color-scales.js +1 -1
  58. package/lib/design-tokens/ts/tokens/base/size/size.d.ts +1 -1
  59. package/lib/design-tokens/ts/tokens/base/size/size.js +1 -1
  60. package/lib/design-tokens/ts/tokens/base/typography/typography.d.ts +1 -1
  61. package/lib/design-tokens/ts/tokens/base/typography/typography.js +1 -1
  62. package/lib/design-tokens/ts/tokens/functional/colors/global.d.ts +1 -1
  63. package/lib/design-tokens/ts/tokens/functional/colors/global.js +1 -1
  64. package/lib/design-tokens/ts/tokens/functional/components/hero/base.d.ts +1 -1
  65. package/lib/design-tokens/ts/tokens/functional/components/hero/base.js +1 -1
  66. package/lib/design-tokens/ts/tokens/functional/components/river/base.d.ts +29 -0
  67. package/lib/design-tokens/ts/tokens/functional/components/river/base.js +28 -0
  68. package/lib/design-tokens/ts/tokens/functional/size/border.d.ts +1 -1
  69. package/lib/design-tokens/ts/tokens/functional/size/border.js +1 -1
  70. package/lib/design-tokens/ts/tokens/functional/size/breakpoints.d.ts +1 -1
  71. package/lib/design-tokens/ts/tokens/functional/size/breakpoints.js +1 -1
  72. package/lib/design-tokens/ts/tokens/functional/size/size-coarse.d.ts +1 -1
  73. package/lib/design-tokens/ts/tokens/functional/size/size-coarse.js +1 -1
  74. package/lib/design-tokens/ts/tokens/functional/size/size-fine.d.ts +1 -1
  75. package/lib/design-tokens/ts/tokens/functional/size/size-fine.js +1 -1
  76. package/lib/design-tokens/ts/tokens/functional/size/size.d.ts +1 -1
  77. package/lib/design-tokens/ts/tokens/functional/size/size.js +1 -1
  78. package/lib/design-tokens/ts/tokens/functional/size/viewport.d.ts +1 -1
  79. package/lib/design-tokens/ts/tokens/functional/size/viewport.js +1 -1
  80. package/lib/design-tokens/ts/tokens/functional/typography/typography.d.ts +1 -1
  81. package/lib/design-tokens/ts/tokens/functional/typography/typography.js +1 -1
  82. package/lib/index.d.ts +3 -0
  83. package/lib/index.js +1 -1
  84. package/package.json +11 -9
  85. package/lib/LinkButton/LinkButton.d.ts +0 -7
  86. package/lib/LinkButton/index.d.ts +0 -1
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Mon, 23 May 2022 16:03:48 GMT
3
+ * Generated on Fri, 10 Jun 2022 15:45:38 GMT
4
4
  */
5
5
 
6
6
  declare const tokens: {
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Mon, 23 May 2022 16:03:48 GMT
3
+ * Generated on Fri, 10 Jun 2022 15:45:38 GMT
4
4
  */
5
5
 
6
6
  module.exports = {
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Mon, 23 May 2022 16:03:48 GMT
3
+ * Generated on Fri, 10 Jun 2022 15:45:38 GMT
4
4
  */
5
5
 
6
6
  declare const tokens: {
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Mon, 23 May 2022 16:03:48 GMT
3
+ * Generated on Fri, 10 Jun 2022 15:45:38 GMT
4
4
  */
5
5
 
6
6
  module.exports = {
package/lib/index.d.ts CHANGED
@@ -3,3 +3,6 @@ export * from './Hero';
3
3
  export * from './Text';
4
4
  export * from './Heading';
5
5
  export * from './ThemeProvider';
6
+ export * from './Button';
7
+ export * from './River';
8
+ export * from './Link';
package/lib/index.js CHANGED
@@ -1,2 +1,2 @@
1
1
  /*! For license information please see index.js.LICENSE.txt */
2
- !function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define("@primer/react-brand",[],t):"object"==typeof exports?exports["@primer/react-brand"]=t(require("react")):e["@primer/react-brand"]=t(e.React)}(this,(function(e){return(()=>{"use strict";var t={418:e=>{var t=Object.getOwnPropertySymbols,r=Object.prototype.hasOwnProperty,n=Object.prototype.propertyIsEnumerable;function o(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 t={},r=0;r<10;r++)t["_"+String.fromCharCode(r)]=r;if("0123456789"!==Object.getOwnPropertyNames(t).map((function(e){return t[e]})).join(""))return!1;var n={};return"abcdefghijklmnopqrst".split("").forEach((function(e){n[e]=e})),"abcdefghijklmnopqrst"===Object.keys(Object.assign({},n)).join("")}catch(e){return!1}}()?Object.assign:function(e,a){for(var i,l,s=o(e),_=1;_<arguments.length;_++){for(var d in i=Object(arguments[_]))r.call(i,d)&&(s[d]=i[d]);if(t){l=t(i);for(var u=0;u<l.length;u++)n.call(i,l[u])&&(s[l[u]]=i[l[u]])}}return s}},251:(e,t,r)=>{r(418);var n=r(697),o=60103;if("function"==typeof Symbol&&Symbol.for){var a=Symbol.for;o=a("react.element"),a("react.fragment")}var i=n.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,l=Object.prototype.hasOwnProperty,s={key:!0,ref:!0,__self:!0,__source:!0};function _(e,t,r){var n,a={},_=null,d=null;for(n in void 0!==r&&(_=""+r),void 0!==t.key&&(_=""+t.key),void 0!==t.ref&&(d=t.ref),t)l.call(t,n)&&!s.hasOwnProperty(n)&&(a[n]=t[n]);if(e&&e.defaultProps)for(n in t=e.defaultProps)void 0===a[n]&&(a[n]=t[n]);return{$$typeof:o,type:e,key:_,ref:d,props:a,_owner:i.current}}t.jsx=_,t.jsxs=_},893:(e,t,r)=>{e.exports=r(251)},697:t=>{t.exports=e}},r={};function n(e){var o=r[e];if(void 0!==o)return o.exports;var a=r[e]={exports:{}};return t[e](a,a.exports,n),a.exports}n.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return n.d(t,{a:t}),t},n.d=(e,t)=>{for(var r in t)n.o(t,r)&&!n.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},n.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),n.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var o={};return(()=>{n.r(o),n.d(o,{ColorModesEnum:()=>O,Heading:()=>L,HeadingSizes:()=>b,HeadingTags:()=>H,Hero:()=>j,Text:()=>x,TextSizes:()=>d,TextTags:()=>u,TextVariants:()=>c,ThemeContext:()=>w,ThemeProvider:()=>B,classMap:()=>v,defaultHeadingTag:()=>y,defaultTextSize:()=>p,defaultTextTag:()=>m,defaultTextVariant:()=>f,useTheme:()=>S});var e=n(893);function t(e){var r,n,o="";if("string"==typeof e||"number"==typeof e)o+=e;else if("object"==typeof e)if(Array.isArray(e))for(r=0;r<e.length;r++)e[r]&&(n=t(e[r]))&&(o&&(o+=" "),o+=n);else for(r in e)e[r]&&(o&&(o+=" "),o+=r);return o}function r(){for(var e,r,n=0,o="";n<arguments.length;)(e=arguments[n++])&&(r=t(e))&&(o&&(o+=" "),o+=r);return o}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-description":"Hero-module__Hero-description___5DYuI","Hero-actions":"Hero-module__Hero-actions___TSUhJ"};var i=n(697),l=n.n(i);function s({className:t,expanded:n=!1}){return(0,e.jsxs)("svg",{className:r("ExpandableArrow-module__ExpandableArrow___Zzb6R",n&&"ExpandableArrow-module__ExpandableArrow--expanded___02I33",t),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:r("ExpandableArrow-module__ExpandableArrow-stem___o-Z1H",n&&"ExpandableArrow-module__ExpandableArrow-stem--expanded___omLNO"),stroke:"currentColor",d:"M1.75 8H11",strokeWidth:"1.5",strokeLinecap:"round"})]})}const _={Text:"Text-module__Text___TZM3g","Text--default":"Text-module__Text--default___cDtXM","Text--muted":"Text-module__Text--muted___+aYSJ","Text--700":"Text-module__Text--700___K4B6u","Text--600":"Text-module__Text--600___GROsL","Text--500":"Text-module__Text--500___ljKQp","Text--400":"Text-module__Text--400___jiw28","Text--300":"Text-module__Text--300___iZZEy","Text--200":"Text-module__Text--200___EUSWb","Text--100":"Text-module__Text--100___kOhhP"},d=["700","600","500","400","300","200","100"],u=["p","span","div"],c=["default","muted"],m=u[1],p=d[3],f=c[0];function x({as:t=m,className:n,children:o,size:a=p,variant:i=f,...l}){const s=r(_.Text,_[`Text--${i}`],_[`Text--${a}`],n);return"p"===t?(0,e.jsx)("p",{className:s,...l,children:o}):"div"===t?(0,e.jsx)("div",{className:s,...l,children:o}):(0,e.jsx)("span",{className:s,...l,children:o})}const h={LinkButton:"LinkButton-module__LinkButton___73d6V","LinkButton--label":"LinkButton-module__LinkButton--label___-NRnw","LinkButton-arrow":"LinkButton-module__LinkButton-arrow___bd7ZC","LinkButton--primary":"LinkButton-module__LinkButton--primary___5T51r","LinkButton--label-primary":"LinkButton-module__LinkButton--label-primary___TSZx+","LinkButton--secondary":"LinkButton-module__LinkButton--secondary___Oc3L1"};function g({variant:t="secondary",className:n,children:o,onMouseEnter:a,onMouseLeave:i,onFocus:_,onBlur:d,...u}){const[c,m]=l().useState(!1),[p,f]=l().useState(!1);return(0,e.jsxs)("a",{className:r(h.LinkButton,h[`LinkButton--${t}`],n),onMouseEnter:e=>{m(!0),a?.(e)},onMouseLeave:e=>{m(!1),i?.(e)},onFocus:e=>{f(!0),_?.(e)},onBlur:e=>{f(!1),d?.(e)},...u,children:[(0,e.jsx)(x,{as:"span",size:"400",className:r(h["LinkButton--label"],"primary"===t&&h["LinkButton--label-primary"]),children:o}),(0,e.jsx)(s,{className:h["LinkButton-arrow"],expanded:c||p})]})}const T={Heading:"Heading-module__Heading___D-P9Z","Heading--1":"Heading-module__Heading--1___2biru","Heading--2":"Heading-module__Heading--2___7UT78","Heading--3":"Heading-module__Heading--3___zFRZy","Heading--4":"Heading-module__Heading--4___6NI2U","Heading--5":"Heading-module__Heading--5___Wb4zR","Heading--6":"Heading-module__Heading--6___6GNA5"},b=["1","2","3","4","5","6"],H=["h1","h2","h3","h4","h5","h6"],y=H[1],v={h1:b[0],h2:b[1],h3:b[2],h4:b[3],h5:b[4],h6:b[5]};function L({className:t,children:n,as:o=y,...a}){const i=r(t,T.Heading,T[`Heading--${v[o]}`]),s=l().useCallback((({...e})=>H.includes(o)?l().createElement(o,e,n):(console.error(`Heading: 'as' prop must be one of ${H.join(", ")}`),null)),[o,n]);return(0,e.jsx)(s,{className:i,...a,children:n})}function j({className:t,heading:n,description:o,primaryAction:i,secondaryAction:l,align:s="start"}){return(0,e.jsxs)("div",{className:r(a.Hero,a[`Hero--align-${s}`],t),children:[(0,e.jsx)(L,{className:a["Hero-heading"],as:"h1",children:n}),o?(0,e.jsx)(x,{className:a["Hero-description"],as:"p",size:"400",variant:"muted",children:o}):null,(0,e.jsxs)("div",{className:a["Hero-actions"],children:[(0,e.jsx)(g,{variant:"primary",href:i.href,children:i.text}),l?(0,e.jsx)(g,{variant:"secondary",href:l.href,children:l.text}):null]})]})}var O;!function(e){e.LIGHT="light",e.DARK="dark",e.AUTO="auto"}(O||(O={}));const k=O.LIGHT,w=(0,i.createContext)({colorMode:k,availableColorModes:Object.values(O)});function B({colorMode:t=k,children:r,...n}){const[o,a]=(0,i.useState)(t),l=(0,i.useMemo)((()=>Object.values(O)),[]);return(0,i.useEffect)((()=>(t===O.AUTO?a(E()):o!==t&&a(t),M(a))),[t,o,a]),(0,e.jsx)(w.Provider,{value:{colorMode:o,availableColorModes:l},children:(0,e.jsx)("div",{"data-color-mode":o,...n,children:r})})}const N=()=>window.matchMedia(`(prefers-color-scheme: ${O.DARK})`),E=()=>N().matches?O.DARK:O.LIGHT,M=e=>{const t=N(),r=t=>e(t.matches?O.DARK:O.LIGHT);return t.addEventListener("change",r),()=>t.removeEventListener("change",r)},S=()=>(0,i.useContext)(w)})(),o})()}));
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,(e=>(()=>{"use strict";var r={418:e=>{var r=Object.getOwnPropertySymbols,t=Object.prototype.hasOwnProperty,n=Object.prototype.propertyIsEnumerable;function a(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={},t=0;t<10;t++)r["_"+String.fromCharCode(t)]=t;if("0123456789"!==Object.getOwnPropertyNames(r).map((function(e){return r[e]})).join(""))return!1;var n={};return"abcdefghijklmnopqrst".split("").forEach((function(e){n[e]=e})),"abcdefghijklmnopqrst"===Object.keys(Object.assign({},n)).join("")}catch(e){return!1}}()?Object.assign:function(e,o){for(var i,l,_=a(e),s=1;s<arguments.length;s++){for(var d in i=Object(arguments[s]))t.call(i,d)&&(_[d]=i[d]);if(r){l=r(i);for(var u=0;u<l.length;u++)n.call(i,l[u])&&(_[l[u]]=i[l[u]])}}return _}},251:(e,r,t)=>{t(418);var n=t(697),a=60103;if("function"==typeof Symbol&&Symbol.for){var o=Symbol.for;a=o("react.element"),o("react.fragment")}var i=n.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,l=Object.prototype.hasOwnProperty,_={key:!0,ref:!0,__self:!0,__source:!0};function s(e,r,t){var n,o={},s=null,d=null;for(n in void 0!==t&&(s=""+t),void 0!==r.key&&(s=""+r.key),void 0!==r.ref&&(d=r.ref),r)l.call(r,n)&&!_.hasOwnProperty(n)&&(o[n]=r[n]);if(e&&e.defaultProps)for(n in r=e.defaultProps)void 0===o[n]&&(o[n]=r[n]);return{$$typeof:a,type:e,key:s,ref:d,props:o,_owner:i.current}}r.jsx=s,r.jsxs=s},893:(e,r,t)=>{e.exports=t(251)},697:r=>{r.exports=e}},t={};function n(e){var a=t[e];if(void 0!==a)return a.exports;var o=t[e]={exports:{}};return r[e](o,o.exports,n),o.exports}n.n=e=>{var r=e&&e.__esModule?()=>e.default:()=>e;return n.d(r,{a:r}),r},n.d=(e,r)=>{for(var t in r)n.o(r,t)&&!n.o(e,t)&&Object.defineProperty(e,t,{enumerable:!0,get:r[t]})},n.o=(e,r)=>Object.prototype.hasOwnProperty.call(e,r),n.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var a={};return(()=>{n.r(a),n.d(a,{Button:()=>f,ColorModesEnum:()=>L,Heading:()=>T,HeadingSizes:()=>b,HeadingTags:()=>R,Hero:()=>H,Link:()=>z,River:()=>P,Text:()=>x,TextSizes:()=>d,TextTags:()=>u,TextVariants:()=>c,ThemeContext:()=>w,ThemeProvider:()=>E,classMap:()=>j,defaultHeadingTag:()=>y,defaultRiverAlign:()=>A,defaultRiverImageTextRatio:()=>S,defaultTextSize:()=>v,defaultTextTag:()=>m,defaultTextVariant:()=>p,getHeadingWarning:()=>I,useTheme:()=>B});var e=n(893);function r(e){var t,n,a="";if("string"==typeof e||"number"==typeof e)a+=e;else if("object"==typeof e)if(Array.isArray(e))for(t=0;t<e.length;t++)e[t]&&(n=r(e[t]))&&(a&&(a+=" "),a+=n);else for(t in e)e[t]&&(a&&(a+=" "),a+=t);return a}function t(){for(var e,t,n=0,a="";n<arguments.length;)(e=arguments[n++])&&(t=r(e))&&(a&&(a+=" "),a+=t);return a}const o={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-description":"Hero-module__Hero-description___5DYuI","Hero-actions":"Hero-module__Hero-actions___TSUhJ"};var i=n(697),l=n.n(i);function _({className:r,expanded:n=!1}){return(0,e.jsxs)("svg",{className:t("ExpandableArrow-module__ExpandableArrow___Zzb6R",n&&"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:t("ExpandableArrow-module__ExpandableArrow-stem___o-Z1H",n&&"ExpandableArrow-module__ExpandableArrow-stem--expanded___omLNO"),stroke:"currentColor",d:"M1.75 8H11",strokeWidth:"1.5",strokeLinecap:"round"})]})}const s={Text:"Text-module__Text___TZM3g","Text--default":"Text-module__Text--default___cDtXM","Text--muted":"Text-module__Text--muted___+aYSJ","Text--700":"Text-module__Text--700___K4B6u","Text--600":"Text-module__Text--600___GROsL","Text--500":"Text-module__Text--500___ljKQp","Text--400":"Text-module__Text--400___jiw28","Text--300":"Text-module__Text--300___iZZEy","Text--200":"Text-module__Text--200___EUSWb","Text--100":"Text-module__Text--100___kOhhP"},d=["700","600","500","400","300","200","100"],u=["p","span","div"],c=["default","muted"],m=u[1],v=d[3],p=c[0];function x({as:r=m,className:n,children:a,size:o=v,variant:i=p,...l}){const _=t(s.Text,s[`Text--${i}`],s[`Text--${o}`],n);return"p"===r?(0,e.jsx)("p",{className:_,...l,children:a}):"div"===r?(0,e.jsx)("div",{className:_,...l,children:a}):(0,e.jsx)("span",{className:_,...l,children:a})}const h={Button:"Button-module__Button___Ky+-Z","Button--label":"Button-module__Button--label___YPITC","Button-arrow":"Button-module__Button-arrow___8MSd+","Button--primary":"Button-module__Button--primary___bMjrR","Button--label-primary":"Button-module__Button--label-primary___1iRqu","Button--secondary":"Button-module__Button--secondary___gq64j"};function f({as:r,variant:n="secondary",className:a,children:o,onMouseEnter:i,onMouseLeave:s,onFocus:d,onBlur:u,...c}){const[m,v]=l().useState(!1),[p,f]=l().useState(!1),g=r||"button";return(0,e.jsxs)(g,{className:t(h.Button,h[`Button--${n}`],a),onMouseEnter:e=>{v(!0),i?.(e)},onMouseLeave:e=>{v(!1),s?.(e)},onFocus:e=>{f(!0),d?.(e)},onBlur:e=>{f(!1),u?.(e)},...c,children:[(0,e.jsx)(x,{as:"span",size:"400",className:t(h["Button--label"],"primary"===n&&h["Button--label-primary"]),children:o}),(0,e.jsx)(_,{className:h["Button-arrow"],expanded:m||p})]})}const g={Heading:"Heading-module__Heading___D-P9Z","Heading--1":"Heading-module__Heading--1___2biru","Heading--2":"Heading-module__Heading--2___7UT78","Heading--3":"Heading-module__Heading--3___zFRZy","Heading--4":"Heading-module__Heading--4___6NI2U","Heading--5":"Heading-module__Heading--5___Wb4zR","Heading--6":"Heading-module__Heading--6___6GNA5"},b=["1","2","3","4","5","6"],R=["h1","h2","h3","h4","h5","h6"],y=R[1],j={h1:b[0],h2:b[1],h3:b[2],h4:b[3],h5:b[4],h6:b[5]};function T({className:r,children:n,as:a=y,...o}){const i=t(r,g.Heading,g[`Heading--${j[a]}`]),_=l().useCallback((({...e})=>R.includes(a)?l().createElement(a,e,n):(console.error(`Heading: 'as' prop must be one of ${R.join(", ")}`),null)),[a,n]);return(0,e.jsx)(_,{className:i,...o,children:n})}function H({className:r,heading:n,description:a,primaryAction:i,secondaryAction:l,align:_="start"}){return(0,e.jsxs)("div",{className:t(o.Hero,o[`Hero--align-${_}`],r),children:[(0,e.jsx)(T,{className:o["Hero-heading"],as:"h1",children:n}),a?(0,e.jsx)(x,{className:o["Hero-description"],as:"p",size:"400",variant:"muted",children:a}):null,(0,e.jsxs)("div",{className:o["Hero-actions"],children:[(0,e.jsx)(f,{as:"a",variant:"primary",href:i.href,children:i.text}),l?(0,e.jsx)(f,{as:"a",variant:"secondary",href:l.href,children:l.text}):null]})]})}var L;!function(e){e.LIGHT="light",e.DARK="dark",e.AUTO="auto"}(L||(L={}));const N=L.LIGHT,w=(0,i.createContext)({colorMode:N,availableColorModes:Object.values(L)});function E({colorMode:r=N,children:t,...n}){const[a,o]=(0,i.useState)(r),l=(0,i.useMemo)((()=>Object.values(L)),[]);return(0,i.useEffect)((()=>(r===L.AUTO?o(C()):a!==r&&o(r),k(o))),[r,a,o]),(0,e.jsx)(w.Provider,{value:{colorMode:a,availableColorModes:l},children:(0,e.jsx)("div",{"data-color-mode":a,...n,children:t})})}const O=()=>window.matchMedia(`(prefers-color-scheme: ${L.DARK})`),C=()=>O().matches?L.DARK:L.LIGHT,k=e=>{const r=O(),t=r=>e(r.matches?L.DARK:L.LIGHT);return r.addEventListener("change",t),()=>r.removeEventListener("change",t)},B=()=>(0,i.useContext)(w),M={River:"River-module__River___JrRJn",River__visual:"River-module__River__visual___FPRmp","River--align-center":"River-module__River--align-center___v9wmC","River__visual--has-shadow":"River-module__River__visual--has-shadow___VCNVf",River__heading:"River-module__River__heading___1vglW","River__call-to-action":"River-module__River__call-to-action___pr7tp",River__text:"River-module__River__text___jFOLz","River--50-50":"River-module__River--50-50___ShFNW","River--60-40":"River-module__River--60-40___9LI6h","River--align-left":"River-module__River--align-left___x8Qd1","River--align-right":"River-module__River--align-right___Mx1m-",River__content:"River-module__River__content___hRRqX","River__body-text":"River-module__River__body-text___0BbuA"},S="50:50",A="left",I=e=>`River.Content does not accept a Heading with as="${e}". River automatically applies as="h3" by default.`,P=Object.assign((function({imageTextRatio:r=S,align:n=A,className:a,children:o,...i}){const{Visual:_,Content:s}=l().Children.toArray(o).reduce(((e,r)=>(!l().isValidElement(r)||"string"==typeof r.type||"Visual"!==r.type.name&&"Content"!==r.type.name||(e[r.type.name]=r),e)),{Visual:null,Content:null}),d="left"===n||"center"===n?[s,_]:[_,s];return(0,e.jsx)("section",{className:t(M.River,M[`River--${r.replace(":","-")}`],M[`River--align-${n}`],a),...i,children:d})}),{Visual:function({children:r,className:n,hasShadow:a=!0}){return(0,e.jsx)("div",{className:t(M.River__visual,a&&M["River__visual--has-shadow"],n),children:r})},Content:function({children:r,leadingComponent:n,trailingComponent:a}){const o=l().Children.toArray(r).find((e=>l().isValidElement(e)&&e.type===T)),i=l().Children.toArray(r).find((e=>l().isValidElement(e)&&e.type===x)),_=l().Children.toArray(r).find((e=>l().isValidElement(e)&&e.type===z));return(0,e.jsxs)("div",{className:M.River__content,children:[n&&(0,e.jsx)("div",{children:(0,e.jsx)(n,{})}),l().isValidElement(o)&&(0,e.jsx)("div",{className:M.River__heading,children:l().cloneElement(o,{as:(e=>{const{as:r}=e.props;return r&&R.includes(r)&&"h3"!==r&&console.warn(I(r)),"h3"})(o)})}),l().isValidElement(i)&&(0,e.jsx)("div",{className:M["River__body-text"],children:l().cloneElement(i,{variant:"muted",as:"p",className:t(M.River__text,i.props.className)})}),l().isValidElement(_)&&(0,e.jsx)("div",{className:M["River__call-to-action"],children:l().cloneElement(_,{size:"large"})}),a&&(0,e.jsx)("div",{children:(0,e.jsx)(a,{})})]})}}),V={Link:"Link-module__Link___I46Yd","Link--label":"Link-module__Link--label___N2WtW","Link-arrow":"Link-module__Link-arrow___Y1IN9","Link--large":"Link-module__Link--large___CIEbO"};function z({size:r="medium",className:n,children:a,onMouseEnter:o,onMouseLeave:s,onFocus:d,onBlur:u,...c}){const[m,v]=l().useState(!1),[p,h]=l().useState(!1),f=(0,i.useCallback)((e=>{v(!m),o?.(e)}),[o,m]),g=(0,i.useCallback)((e=>{v(!m),s?.(e)}),[s,m]),b=(0,i.useCallback)((e=>{h(!p),d?.(e)}),[d,p]),R=(0,i.useCallback)((e=>{h(!p),u?.(e)}),[u,p]);return(0,e.jsxs)("a",{className:t(V.Link,V[`Link--${r}`],n),onMouseEnter:f,onMouseLeave:g,onFocus:b,onBlur:R,...c,children:[(0,e.jsx)(x,{as:"span",size:{medium:"300",large:"400"}[r],className:t(V["Link--label"]),children:a}),(0,e.jsx)(_,{className:V["Link-arrow"],expanded:m||p})]})}})(),a})()));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@primer/react-brand",
3
- "version": "0.1.0",
3
+ "version": "0.2.0-rc.dd0371a",
4
4
  "author": "GitHub, Inc.",
5
5
  "license": "MIT",
6
6
  "bugs": {
@@ -26,6 +26,7 @@
26
26
  "build:css-types": "tcm -p 'src/**/*.module.css' .",
27
27
  "build:types": "tsc --project tsconfig.build.json",
28
28
  "build:storybook": "scripts/build-storybook",
29
+ "build:storybook:preview": "scripts/build-storybook preview",
29
30
  "build:docs": "scripts/build-docs",
30
31
  "build:docs:preview": "scripts/build-docs preview",
31
32
  "build:tokens": "node scripts/build-tokens.js",
@@ -52,14 +53,14 @@
52
53
  "@github/prettier-config": "^0.0.4",
53
54
  "@primer/octicons-react": "^17.0.0",
54
55
  "@primer/primitives": "^7.8.3",
55
- "@storybook/addon-actions": "^6.5.3",
56
- "@storybook/addon-essentials": "^6.5.3",
57
- "@storybook/addon-interactions": "^6.5.3",
58
- "@storybook/addon-links": "^6.5.3",
59
- "@storybook/builder-webpack5": "^6.5.3",
60
- "@storybook/manager-webpack5": "^6.5.3",
61
- "@storybook/react": "^6.5.3",
62
- "@storybook/testing-library": "^0.0.9",
56
+ "@storybook/addon-actions": "^6.5.6",
57
+ "@storybook/addon-essentials": "^6.5.6",
58
+ "@storybook/addon-interactions": "^6.5.6",
59
+ "@storybook/addon-links": "^6.5.6",
60
+ "@storybook/builder-webpack5": "^6.5.6",
61
+ "@storybook/manager-webpack5": "^6.5.6",
62
+ "@storybook/react": "^6.5.6",
63
+ "@storybook/testing-library": "^0.0.11",
63
64
  "@testing-library/dom": "^8.11.3",
64
65
  "@testing-library/jest-dom": "^5.16.2",
65
66
  "@testing-library/react": "^12.1.4",
@@ -83,6 +84,7 @@
83
84
  "eslint-plugin-primer-react": "^0.7.4",
84
85
  "eslint-plugin-react": "^7.29.4",
85
86
  "eslint-plugin-react-hooks": "^4.4.0",
87
+ "eslint-plugin-storybook": "^0.5.12",
86
88
  "fast-glob": "^3.2.11",
87
89
  "identity-obj-proxy": "^3.0.0",
88
90
  "jest": "^27.5.1",
@@ -1,7 +0,0 @@
1
- import React from 'react';
2
- import '../../lib/design-tokens/css/tokens/functional/components/button/colors-with-modes.css';
3
- export declare type LinkButtonProps = {
4
- href: string;
5
- variant?: 'primary' | 'secondary';
6
- } & React.ComponentPropsWithoutRef<'a'>;
7
- export declare function LinkButton({ variant, className, children, onMouseEnter, onMouseLeave, onFocus, onBlur, ...props }: LinkButtonProps): JSX.Element;
@@ -1 +0,0 @@
1
- export * from './LinkButton';