@patreon/studio/module/components/ActionBar/index.jsx

Patreon Studio Design System

import React from 'react';
import styled from 'styled-components';
import { tokens } from '../../tokens';
import { mediaForBreakpoint } from '../../utilities/breakpoints';
import { BodyText } from '../BodyText';
import { Button } from '../Button';
import { IconInfo } from '../Icon';
export function ActionBar({ icon = IconInfo, action, secondaryAction, messageDisplay = 'default', children, 'data-tag': dataTag, id, }) {
    const Icon = icon;
    return (<LayoutContainer>
      <Container aria-live="polite" data-tag={dataTag} id={id} tabIndex={0}>
        <Wrapper>
          <ContentContainer messageDisplay={messageDisplay}>
            <Icon size="20px" color={tokens.global.content.regular.default}/>
            <BodyText size="lg">{children}</BodyText>
          </ContentContainer>

          <ActionContainer>
            {action && (<Button loggerId="slime" data-tag="action" variant="primary" {...action}>
                {action.label}
              </Button>)}

            {secondaryAction && (<Button loggerId="slime" data-tag="secondary-action" variant="tertiary" {...secondaryAction}>
                {secondaryAction.label}
              </Button>)}
          </ActionContainer>
        </Wrapper>
      </Container>
    </LayoutContainer>);
}
const LayoutContainer = styled.div `
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: ${tokens.global.layer.z20};
  isolation: isolate;
  width: 100%;
  overflow: inherit;

  @media ${mediaForBreakpoint('sm')} {
    position: sticky;
    top: 0;
    padding-left: 1px;
  }
`;
const Container = styled.div `
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  overflow: hidden;
  padding: ${tokens.global.space.x16};
  border-top: ${tokens.global.borderWidth.thin} solid ${tokens.global.border.muted.default};
  background-color: ${tokens.global.bg.base.default};

  @media ${mediaForBreakpoint('sm')} {
    border-top: none;
    border-bottom: ${tokens.global.borderWidth.thin} solid ${tokens.global.border.muted.default};
  }
`;
const Wrapper = styled.div `
  align-items: center;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  width: 100%;
  gap: ${tokens.global.space.x16};

  @media ${mediaForBreakpoint('sm')} {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
`;
const ContentContainer = styled.div `
  display: ${({ messageDisplay }) => (messageDisplay === 'hide-mobile' ? 'none' : 'flex')};
  justify-content: center;
  align-items: center;
  gap: ${tokens.global.space.x8};
  width: 100%;

  * > :first-child {
    display: none;
  }

  @media ${mediaForBreakpoint('sm')} {
    display: flex;
    width: auto;

    * > :first-child {
      display: block;
    }
  }
`;
const ActionContainer = styled.div `
  display: flex;
  flex-direction: row-reverse;
  justify-content: center;
  gap: ${tokens.global.space.x16};
  width: 100%;

  & > :last-child {
    flex-grow: 1;
  }

  @media ${mediaForBreakpoint('sm')} {
    width: auto;

    & > :last-child {
      flex-grow: initial;
    }
  }
`;
//# sourceMappingURL=index.jsx.map