@reykjavik/hanna-react 0.10.56 → 0.10.59

package/esm/WizardLayout.jsx

@@ -1,39 +0,0 @@
-import React from 'react';
-import { useIsBrowserSide } from '@hugsmidjan/react/hooks';
-import { getAssetUrl } from '@reykjavik/hanna-utils/assets';
-import Image from './_abstract/Image';
-import { Link } from './_abstract/Link';
-import { useScrollbarWidthCSSVar } from './utils/useScrollbarWidthCSSVar';
-const WizardLayout = (props) => {
-    useScrollbarWidthCSSVar();
-    const { 
-    // ssr,
-    wizardStepper, wizardFooter, children, colorTheme, logoLink = '/', siteName = 'Reykjavík', globalAlerts, } = props;
-    const isBrowser = useIsBrowserSide( /* ssr */);
-    return (<div className="WizardLayout" data-sprinkled={isBrowser} data-color-theme={colorTheme}>
-      {globalAlerts && (<div className="WizardLayout__alerts" role="alert">
-          {globalAlerts}
-        </div>)}
-      <div className="WizardLayout__content">
-        <div className="WizardLayout__header" role="banner">
-          <Link className="WizardLayout__header__logo" href={logoLink}>
-            {' '}
-            <Image inline={true} src={getAssetUrl('reykjavik-logo.svg')}/> {siteName}{' '}
-          </Link>{' '}
-        </div>
-        <div className="WizardLayout__wrap">
-          {wizardStepper && (<div className="WizardLayout__stepper" role="navigation">
-              {wizardStepper}
-            </div>)}
-          <div className="WizardLayout__main" role="main">
-            {children}
-          </div>
-          <div className="WizardLayout__deco WizardLayout__deco--geometry"/>
-        </div>
-        <div className="WizardLayout__footer" role="complementary">
-          {wizardFooter}
-        </div>
-      </div>
-    </div>);
-};
-export default WizardLayout;

package/esm/WizardLayoutClose.jsx

@@ -1,4 +0,0 @@
-import React from 'react';
-import Button from './_abstract/Button';
-const WizardLayoutClose = (props) => (<Button bem="WizardLayoutClose" {...props}/>);
-export default WizardLayoutClose;

package/esm/WizardStepper.jsx

@@ -1,29 +0,0 @@
-import React from 'react';
-import getBemClass from '@hugsmidjan/react/utils/getBemClass';
-const WizardStepper = (props) => {
-    const { steps, activeStep = -1, allowForwardSkip, disableBacktrack, onClick } = props;
-    return (<div className={getBemClass('WizardStepper', activeStep === -1 && 'preview')}>
-      {steps.map((step, i) => {
-            const { label, clickable, done, neutral } = step;
-            const stepClass = getBemClass('WizardStepper__step', [
-                (done || (done == null && i < activeStep)) && 'done',
-                neutral && 'neutral',
-            ]);
-            const isClickable = clickable === 'always' ||
-                (clickable &&
-                    (activeStep === i ||
-                        (i > activeStep && allowForwardSkip) ||
-                        (i < activeStep && !disableBacktrack)));
-            const ariaCurrent = activeStep === i ? 'step' : undefined;
-            return (<React.Fragment key={i}>
-            {isClickable ? (<button type="button" className={stepClass} onClick={() => onClick(i)} aria-current={ariaCurrent}>
-                {label}
-              </button>) : (<span className={stepClass} aria-current={ariaCurrent}>
-                {' '}
-                {label}{' '}
-              </span>)}{' '}
-          </React.Fragment>);
-        })}
-    </div>);
-};
-export default WizardStepper;

package/esm/_abstract/CardList.jsx

@@ -1,39 +0,0 @@
-import React from 'react';
-import Button from './Button';
-import Image from './Image';
-const Card = (props) => {
-    const { bem, href, title, imgPlaceholder } = props;
-    const cardClass = `${bem}__card`;
-    const image = 'image' in props && props.image;
-    const meta = 'meta' in props && props.meta;
-    const summary = 'summary' in props && props.summary;
-    return (<>
-      <Button bem={cardClass} href={href}>
-        {' '}
-        <Image className={`${bem}__image`} {...image} placeholder={imgPlaceholder}/>
-        <span className={`${cardClass}__title`}>{title}</span>{' '}
-        {meta && <span className={`${cardClass}__meta`}>{meta}</span>}{' '}
-        {summary && <span className={`${cardClass}__summary`}>{summary}</span>}{' '}
-      </Button>{' '}
-    </>);
-};
-export const CardList = (props) => {
-    const { bemPrefix, title, summaryElement, cards, titleTag = 'h2', children, imgPlaceholder, } = props;
-    const TitleTag = titleTag;
-    const fallbackImage = (imgPlaceholder !== true && imgPlaceholder) || undefined;
-    const fallbackImageStyle = fallbackImage
-        ? { '--ImageCards--fallback': `url("${fallbackImage}")` }
-        : undefined;
-    return (<>
-      {summaryElement ? (<div className={bemPrefix + '__summary'}>
-          {title && <TitleTag className={bemPrefix + '__title'}>{title}</TitleTag>}
-          {summaryElement}
-        </div>) : (title && <TitleTag className={bemPrefix + '__title'}>{title}</TitleTag>)}
-      <ul className={bemPrefix + '__list'} style={fallbackImageStyle}>
-        {cards.map((card, i) => (<li key={i} className={bemPrefix + '__item'}>
-            <Card {...card} bem={bemPrefix} imgPlaceholder={!!imgPlaceholder}/>
-          </li>))}
-      </ul>
-      {children}
-    </>);
-};

package/esm/_abstract/Image.jsx

@@ -1,29 +0,0 @@
-import React from 'react';
-import getBemClass from '@hugsmidjan/react/utils/getBemClass';
-import { useGetSVGtext } from '../utils/useGetSVGtext';
-// eslint-disable-next-line complexity
-const Image = (props) => {
-    const { src, altText = '', sources = [], preloadSrc, className, inline, placeholder, } = props;
-    const _src = (sources.length && preloadSrc) || src;
-    const imageSrc = _src || (sources[0] != null ? sources[0].srcset.split(' ')[0] : undefined);
-    const imgLoading = preloadSrc ? 'eager' : 'lazy';
-    const inlineSvg = useGetSVGtext(inline ? imageSrc : undefined);
-    if (!imageSrc) {
-        return placeholder ? (<span className={className && getBemClass(className, 'missing')}>
-        {placeholder !== true && placeholder()}
-      </span>) : null;
-    }
-    if (inline && inlineSvg) {
-        const __html = inlineSvg.imageSrc === imageSrc ? inlineSvg.code : '';
-        return <span className={className} dangerouslySetInnerHTML={{ __html }}/>;
-    }
-    return (<picture className={className}>
-      {' '}
-      {sources.map((source, i) => (<>
-          <source key={i} srcSet={source.srcset} media={source.media}/>{' '}
-        </>))}{' '}
-      <img src={imageSrc} alt={altText} loading={imgLoading}/>
-      {'  '}
-    </picture>);
-};
-export default Image;

package/esm/_abstract/TogglerGroup.jsx

@@ -1,31 +0,0 @@
-import React from 'react';
-import getBemClass from '@hugsmidjan/react/utils/getBemClass';
-const TogglerGroup = (props) => {
-    const { 
-    // id,
-    className, bem, name, disabled, Toggler, onSelected, options, inputProps = {}, } = props;
-    const values = props.value || [];
-    return (<ul className={getBemClass(bem, null, className)} role="group" aria-labelledby={props['aria-labelledby']} aria-describedby={props['aria-describedby']} aria-required={props.required}>
-      {options.map((option, i) => {
-            const isDisabled = option.disabled != null
-                ? option.disabled
-                : disabled && typeof disabled !== 'boolean'
-                    ? disabled.includes(i)
-                    : disabled;
-            const isChecked = values.includes(option.value);
-            return (<Toggler key={i} {...inputProps} className={bem + '__item'} name={name} Wrapper="li" {...option} label={option.label || option.value} onChange={onSelected
-                    ? (e) => {
-                        const { value } = option;
-                        const checked = e.currentTarget.checked;
-                        inputProps.onChange && inputProps.onChange(e);
-                        const selectedValues = values.filter((val) => val !== value);
-                        if (checked) {
-                            selectedValues.push(value);
-                        }
-                        onSelected({ value, checked, option, selectedValues });
-                    }
-                    : inputProps.onChange} disabled={isDisabled} aria-invalid={props['aria-invalid']} checked={isChecked}/>);
-        })}
-    </ul>);
-};
-export default TogglerGroup;

package/esm/_abstract/_Blings.jsx

@@ -1,14 +0,0 @@
-import React from 'react';
-import Bling from '../Bling';
-const inverseAlignments = {
-    left: 'right',
-    'left-ish': 'right-ish',
-    'left-center': 'right-center',
-    'right-center': 'left-center',
-    'right-ish': 'left-ish',
-    right: 'left',
-};
-const Blings = (props) => (<>
-    {props.blings.map(({ type, align, vertical, color, overlay, parent }, i) => (<Bling key={type + '-' + i} type={type} align={props.mirror ? inverseAlignments[align || 'left'] : align} vertical={vertical} color={color} overlay={overlay} parent={parent}/>))}
-  </>);
-export default Blings;

package/esm/_abstract/_Block.jsx

@@ -1,27 +0,0 @@
-import React from 'react';
-import getBemClass from '@hugsmidjan/react/utils/getBemClass';
-import { useSeenEffect } from '../utils/seenEffect';
-import Button from './Button';
-import Image from './Image';
-const Block = (props) => {
-    const { image, modifier, bem, content, startSeen } = props;
-    const [ref] = useSeenEffect(startSeen);
-    const contentItems = Array.isArray(content) ? content : [content];
-    return (<div className={getBemClass(bem, modifier)} ref={ref}>
-      {contentItems.map(({ title, summary, buttons = [] }, i) => {
-            const hasSummary = summary && (typeof summary !== 'string' || !!summary.trim());
-            return (<div key={i} className={`${bem}__content`}>
-            <h2 className={`${bem}__title`}>{title}</h2>
-            {hasSummary && <div className={`${bem}__summary`}>{summary}</div>}
-            {buttons.length > 0 && (<div className={`${bem}__buttons`}>
-                {' '}
-                {buttons.map((buttonProps, i) => (<>
-                    <Button bem={`${bem}__button`} key={i} {...buttonProps}/>{' '}
-                  </>))}
-              </div>)}
-          </div>);
-        })}
-      {image && <Image className={`${bem}__image`} {...image}/>}
-    </div>);
-};
-export default Block;

package/esm/_abstract/_Quote.jsx

@@ -1,11 +0,0 @@
-import React from 'react';
-import { Link } from './Link';
-export const _Quote = (props) => {
-    const { bem, children, by, byHref } = props;
-    return (<figure className={bem}>
-      <blockquote className={bem + '__quote'}>{children}</blockquote>
-      {by && (<figcaption className={bem + '__by'}>
-          {byHref ? (<Link href={byHref}>{by}</Link>) : typeof by === 'string' ? (<span>{by}</span>) : (by)}
-        </figcaption>)}
-    </figure>);
-};