17 lines
5.6 KiB
JavaScript
17 lines
5.6 KiB
JavaScript
import{S as A,i as V,s as M,C,l as I,o as k,g as h,y as D,b as p,B,r as L,c as w,d as S,e as T,m as b,u as N,p as E,q as O,t as _,h as y,f as H,j as v}from"./index-43e9a565.js";import{g as P,a as z}from"./spread-8a54911c.js";import{p as F,M as J,T as K,S as Q}from"./collect-stories-23d08061.js";import{R as U}from"./ReutersGraphicsLogo-906979e7.js";import{w as W}from"./withParams-47e2ab71.js";const X=`A header for internal tooling sites.
|
|
|
|
> **Note:** Don't use this component for public pages.
|
|
|
|
\`\`\`svelte
|
|
<script>
|
|
import { ToolsHeader } from '@reuters-graphics/graphics-components';
|
|
<\/script>
|
|
|
|
<ToolsHeader>
|
|
<!-- Anything else goes right of the logo -->
|
|
</ToolsHeader>
|
|
\`\`\`
|
|
`;function Y(i){let e,a,l,d,c,o,u,r;const t=[{...i[5],width:"100%"}];let f={};for(let n=0;n<t.length;n+=1)f=C(f,t[n]);d=new U({props:f});const g=i[8].default,s=I(g,i,i[7],null);return{c(){e=k("header"),a=k("div"),l=k("a"),h(d.$$.fragment),c=D(),o=k("div"),s&&s.c(),p(l,"href",i[6]),p(a,"class","logo-container svelte-11n4jn3"),p(o,"class","menu-items-container svelte-11n4jn3"),p(e,"id",i[0]),p(e,"class",u=B(i[1])+" svelte-11n4jn3"),L(e,"sticky",i[2]),w(e,"background",i[3]),w(e,"border-bottom",i[4])},m(n,m){S(n,e,m),T(e,a),T(a,l),b(d,l,null),T(e,c),T(e,o),s&&s.m(o,null),r=!0},p(n,[m]){const G=m&32?P(t,[{...n[5],width:"100%"}]):{};d.$set(G),(!r||m&64)&&p(l,"href",n[6]),s&&s.p&&(!r||m&128)&&N(s,g,n,n[7],r?O(g,n[7],m,null):E(n[7]),null),(!r||m&1)&&p(e,"id",n[0]),(!r||m&2&&u!==(u=B(n[1])+" svelte-11n4jn3"))&&p(e,"class",u),(!r||m&6)&&L(e,"sticky",n[2]),m&8&&w(e,"background",n[3]),m&16&&w(e,"border-bottom",n[4])},i(n){r||(_(d.$$.fragment,n),_(s,n),r=!0)},o(n){y(d.$$.fragment,n),y(s,n),r=!1},d(n){n&&H(e),v(d),s&&s.d(n)}}}function Z(i,e,a){let{$$slots:l={},$$scope:d}=e,{id:c=""}=e,{class:o=""}=e,{sticky:u=!1}=e,{background:r="transparent"}=e,{borderBottom:t="1px solid #dedede"}=e,{logoProps:f={logoColour:"#404040"}}=e,{homeLink:g="/"}=e;return i.$$set=s=>{"id"in s&&a(0,c=s.id),"class"in s&&a(1,o=s.class),"sticky"in s&&a(2,u=s.sticky),"background"in s&&a(3,r=s.background),"borderBottom"in s&&a(4,t=s.borderBottom),"logoProps"in s&&a(5,f=s.logoProps),"homeLink"in s&&a(6,g=s.homeLink),"$$scope"in s&&a(7,d=s.$$scope)},[c,o,u,r,t,f,g,d,l]}class j extends A{constructor(e){super(),V(this,e,Z,Y,M,{id:0,class:1,sticky:2,background:3,borderBottom:4,logoProps:5,homeLink:6})}}j.__docgen={version:3,name:"ToolsHeader.svelte",data:[{keywords:[],visibility:"public",description:"Add an ID to target with SCSS.",name:"id",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"string",type:"string"},defaultValue:""},{visibility:"public",description:"Add a class to target with SCSS.",keywords:[],name:"class",kind:"const",static:!1,readonly:!0,type:{kind:"type",text:"string",type:"string"},localName:"cls",defaultValue:""},{keywords:[],visibility:"public",description:"Make the header stick when user scrolls.",name:"sticky",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"boolean",type:"boolean"},defaultValue:!1},{keywords:[],visibility:"public",description:"Background CSS",name:"background",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"string",type:"string"},defaultValue:"transparent"},{keywords:[],visibility:"public",description:"Border bottom CSS",name:"borderBottom",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"string",type:"string"},defaultValue:"1px solid #dedede"},{keywords:[],visibility:"public",description:"Colour props passed to `ReutersGraphicsLogo` component.",name:"logoProps",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"object",type:"object"}},{keywords:[],visibility:"public",description:"Link the logo points to.",name:"homeLink",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"string",type:"string"},defaultValue:"/"}],computed:[],methods:[],components:[],description:null,keywords:[],events:[],slots:[{keywords:[],visibility:"public",description:"Any additional content",name:"default"}],refs:[]};function x(i){let e,a,l;const d=[i[0]];let c={};for(let o=0;o<d.length;o+=1)c=C(c,d[o]);return a=new j({props:c}),{c(){e=k("div"),h(a.$$.fragment),p(e,"class","svelte-kaguqp")},m(o,u){S(o,e,u),b(a,e,null),l=!0},p(o,u){const r=u&1?P(d,[z(o[0])]):{};a.$set(r)},i(o){l||(_(a.$$.fragment,o),l=!0)},o(o){y(a.$$.fragment,o),l=!1},d(o){o&&H(e),v(a)}}}function $(i){let e,a,l,d,c,o;const u=[{title:"Components/ToolsHeader"},{component:j},W(X)];let r={};for(let t=0;t<u.length;t+=1)r=C(r,u[t]);return e=new J({props:r}),l=new K({props:{$$slots:{default:[x,({args:t})=>({0:t}),({args:t})=>t?1:0]},$$scope:{ctx:i}}}),c=new Q({props:{name:"Default",args:{}}}),{c(){h(e.$$.fragment),a=D(),h(l.$$.fragment),d=D(),h(c.$$.fragment)},m(t,f){b(e,t,f),S(t,a,f),b(l,t,f),S(t,d,f),b(c,t,f),o=!0},p(t,[f]){const g={};e.$set(g);const s={};f&3&&(s.$$scope={dirty:f,ctx:t}),l.$set(s)},i(t){o||(_(e.$$.fragment,t),_(l.$$.fragment,t),_(c.$$.fragment,t),o=!0)},o(t){y(e.$$.fragment,t),y(l.$$.fragment,t),y(c.$$.fragment,t),o=!1},d(t){t&&(H(a),H(d)),v(e,t),v(l,t),v(c,t)}}}class q extends A{constructor(e){super(),V(this,e,null,$,M,{})}}q.__docgen={version:3,name:"ToolsHeader.stories.svelte",data:[],computed:[],methods:[],components:[],description:null,keywords:[],events:[],slots:[],refs:[]};const R=F(q,{meta:{title:"Components/ToolsHeader"},stories:{"tpl:default":{name:"default",template:!0,source:`<div>
|
|
<ToolsHeader {...args} />
|
|
</div>`,hasArgs:!0},Default:{name:"Default",template:!1,source:"",hasArgs:!1}},allocatedIds:["default","Meta","Template","Story","componentDocs","ToolsHeader","withComponentDocs"]}),ae=R.meta,le=["Default"],re=R.stories.Default;export{re as Default,le as __namedExportsOrder,ae as default};
|
|
//# sourceMappingURL=ToolsHeader.stories-0234bafc.js.map
|