diff --git a/CHANGELOG.md b/CHANGELOG.md
index f79e6b4ea8eccdb4c5182735b7da0f3acaef2291..8a7fdb34961dce333fe063228dcd66fa6ba2aaf0 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -16,6 +16,12 @@ Types of changes:
## [Unreleased]
+### Removed
+
+- [Atoms]: remove Bubble, Bubblet
+- [Molecules]: remove Accordion, Header/markplatz, TriPin / TriShape
+- [Organisms]: remove TranslationBubble, AddressBubble, Menu, ProfileBubble, SubHeaderHor
+
## [2.0.0-alpha.2 - 2020-07-25]
### Added
diff --git a/src/exports/index.mjs b/src/exports/index.mjs
index 7151d9d887fbd2d236eede7dbfed82b7cad1f52e..993062ffc8d799d098dbfb87d93eab12c57aab9c 100644
--- a/src/exports/index.mjs
+++ b/src/exports/index.mjs
@@ -7,8 +7,6 @@ export * from './organisms.mjs'
/* Layout */
export { default as Center } from '../lib/containers/Layout/Center'
-export { default as Bubble } from '../lib/containers/Layout/Bubble'
-export { default as Bubblet } from '../lib/containers/Layout/Bubblet'
/* uncategorized */
export { default as ErrorBoundary } from '../lib/components/ErrorBoundary'
diff --git a/src/exports/molecules.mjs b/src/exports/molecules.mjs
index c3d33a862ba058f99e1f74f123427604786c38d6..3c9052683af4ed9bc3d2309f51ba1bbfcdc07bae 100644
--- a/src/exports/molecules.mjs
+++ b/src/exports/molecules.mjs
@@ -1,4 +1,2 @@
-export { default as Accordion } from '../lib/components/molecules/Accordion'
-export { default as TriShape } from '../lib/components/molecules/TriShape'
export { default as Spinner } from '../lib/components/molecules/Spinner'
export { default as FiveStarRating } from '../lib/components/molecules/FiveStarRating'
diff --git a/src/exports/organisms.mjs b/src/exports/organisms.mjs
index 86e8d624261e389b4f7f4a9c8055240216f698f8..2e6a63d436e235fc3beef5a65c5d5f5e66362ddb 100644
--- a/src/exports/organisms.mjs
+++ b/src/exports/organisms.mjs
@@ -1,6 +1 @@
-export { default as Menu } from '../lib/components/organisms/Menu'
-export { default as SubHeaderHor } from '../lib/components/organisms/SubHeaderHor'
-export { default as AddressBubble } from '../lib/components/organisms/AddressBubble'
-export { default as ProfileBubble } from '../lib/components/organisms/ProfileBubble'
export { default as FilterBar } from '../lib/components/organisms/FilterBar'
-export { default as TranslationBubble } from '../lib/components/organisms/TranslationBubble'
diff --git a/src/lib/components/molecules/Accordion.js b/src/lib/components/molecules/Accordion.js
deleted file mode 100644
index b8f77a57c30f28d0d1317bfc7ce919dfaaf5381e..0000000000000000000000000000000000000000
--- a/src/lib/components/molecules/Accordion.js
+++ /dev/null
@@ -1,67 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import styled from 'styled-components'
-import { themeGet } from '@styled-system/theme-get'
-
-const StyledContainer = styled.div`
- width: 100%;
-`
-
-const StyledDetails = styled.details`
- width: 100%;
-`
-
-const StyledSummary = styled.summary`
- color: transparent;
- width: 100%;
- cursor: pointer;
-`
-
-const StyledHeaderContainer = styled.div`
- color: ${themeGet('colors.primary')};
- width: 100%;
- margin-top: -1em;
- :hover {
- color: ${themeGet('colors.secondary')};
- }
-`
-
-const Header = props => {
- if (props.header instanceof Function) {
- return props.header()
- } else if (props.header) {
- return <p>{props.header}</p>
- }
- return <p>Missing or Invalid Header</p>
-}
-
-const Body = props => {
- if (props.body instanceof Function) {
- return props.body()
- } else if (props.body) {
- return <p>{props.body}</p>
- }
- return <p>Missing or Invalid Body</p>
-}
-
-const Accordion = props => (
- <>
- <StyledContainer>
- <StyledDetails>
- <StyledSummary>
- <StyledHeaderContainer>
- <Header {...props} />
- </StyledHeaderContainer>
- </StyledSummary>
- <Body {...props} />
- </StyledDetails>
- </StyledContainer>
- </>
-)
-
-Accordion.propTypes = {
- header: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).isRequired,
- body: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).isRequired,
-}
-
-export default Accordion
diff --git a/src/lib/components/molecules/TriShape.js b/src/lib/components/molecules/TriShape.js
deleted file mode 100644
index 3c4f43fd859450eaa1101e47a75d617c1b91bfa2..0000000000000000000000000000000000000000
--- a/src/lib/components/molecules/TriShape.js
+++ /dev/null
@@ -1,47 +0,0 @@
-import React from 'react'
-import styled from 'styled-components'
-
-const Wrapper = styled.div`
- position: relative;
- top: ${({ size }) => `${size / 12}em`};
-`
-
-const TriContainer = styled.div`
- overflow: hidden;
- width: ${({ size }) => `${size}em`};
- height: ${({ size }) => `${size}em`};
- display: flex;
- justify-content: center;
- align-items: center;
-`
-
-const ShiftUp = styled.div`
- margin-top: 0;
- margin-bottom: ${({ size }) => `${size}em`};
- margin-left: ${({ size }) => `${(size / 3) * -1.9}em`};
- margin-right: ${({ size }) => `${(size / 3) * -1.9}em`};
-`
-
-const TriShape = ({ Component, left, middle, right, initSize = 6 }) => {
- const size = initSize / 2
- const angle = 45
- return (
- <Wrapper size={initSize}>
- <TriContainer size={initSize}>
- <Component rotation={-angle} size={size}>
- {left}
- </Component>
- <ShiftUp size={size}>
- <Component rotation={0} size={size}>
- {middle}
- </Component>
- </ShiftUp>
- <Component rotation={angle} size={size}>
- {right}
- </Component>
- </TriContainer>
- </Wrapper>
- )
-}
-
-export default TriShape
diff --git a/src/lib/components/organisms/AddressBubble.js b/src/lib/components/organisms/AddressBubble.js
deleted file mode 100644
index ec2eea5d764ccd8079ab3ec0a93b197ee06ded1c..0000000000000000000000000000000000000000
--- a/src/lib/components/organisms/AddressBubble.js
+++ /dev/null
@@ -1,163 +0,0 @@
-import React from 'react'
-import styled from 'styled-components'
-import themeGet from '@styled-system/theme-get'
-import PropTypes from 'prop-types'
-
-import Bubble from '../../containers/Layout/Bubble.js'
-import Bubblet from '../../containers/Layout/Bubblet.js'
-import FiveStarRating from '../molecules/FiveStarRating.js'
-import Phone from '../atoms/Icons/Phone.js'
-import Email from '../atoms/Icons/Email.js'
-import Worldwideweb from '../atoms/Icons/Worldwideweb.js'
-import Facebook from '../atoms/Icons/Facebook.js'
-import Instagram from '../atoms/Icons/Instagram.js'
-import Twitter from '../atoms/Icons/Twitter.js'
-import Icon from '../atoms/Icon.js'
-import PinShape from '../atoms/Shape/PinShape.js'
-import Text from '../atoms/Text.js'
-
-const FlexDown = styled.div`
- display: flex;
- align-items: flex-end;
- justify-content: flex-start;
- margin: ${themeGet('spacing.medium')};
- margin-bottom: ${themeGet('spacing.small')};
- color: ${themeGet('colors.idle')};
-`
-
-const GreenIcon = styled.div`
- color: ${themeGet('colors.primary')};
- display: flex;
- flex-direction: row;
- justify-content: flex-start;
- align-content: space-around;
-`
-
-const Section = styled.div`
- display: flex;
- font-weight: light;
- text-transform: lowercase;
- font-size: ${themeGet('fontSizes.p')};
- justify-content: flex-start;
- align-items: center;
- flex-direction: row;
- margin: 0;
- font-family: ${themeGet('fonts.title')};
- color: ${themeGet('fonts.primaryColor')};
-`
-
-const Item = styled.div`
- width: ${themeGet('spacing.large')};
- justify-content: center;
- padding-top: ${themeGet('spacing.small')};
-`
-const Item2 = styled.div`
- padding-left: ${themeGet('spacing.small')};
-`
-
-const AddressBubble = ({
- rating = 0,
- opinions = '0',
- address = 'n/a',
- telephone = 'n/a',
- email = 'n/a',
- website = 'n/a',
-}) => (
- <Bubble shadow={'low'} column stretch>
- <FlexDown>
- <FiveStarRating rating={rating} size={2} />
- <Text style={{ margin: '0' }}>basierend auf {opinions} bewertungen</Text>
- </FlexDown>
-
- <Bubblet>
- <Section>
- <Item>
- <PinShape
- size={1.8}
- full
- shapeColor={'white'}
- style={{
- paddingBottom: '0.8rem',
- }}
- />
- </Item>
- <Item2>
- <Text
- style={{
- margin: '0',
- }}
- >
- {address}
- </Text>
- </Item2>
- </Section>
- </Bubblet>
-
- <Bubblet>
- <Section>
- <Item>
- <Icon icon={Phone} alt={telephone} size={1.3} />
- </Item>
- <Item2>
- <Text
- style={{
- margin: '0',
- }}
- >
- {telephone}
- </Text>
- </Item2>
- </Section>
- </Bubblet>
-
- <Bubblet>
- <Section>
- <Item>
- <Icon icon={Email} alt={email} size={1} />
- </Item>
- <Item2>
- <Text>{email}</Text>
- </Item2>
- </Section>
- </Bubblet>
-
- <Bubblet>
- <Section>
- <Item>
- <Icon icon={Worldwideweb} alt={website} size={1.4} />
- </Item>
- <Item2>
- <Text
- style={{
- margin: '0',
- }}
- >
- {website}
- </Text>
- </Item2>
- </Section>
- </Bubblet>
- <Section>
- <GreenIcon>
- <Item2>
- <Icon icon={Facebook} alt="Facebook" size={3} />
- </Item2>
- <Item2>
- <Icon icon={Instagram} alt="Instagram" size={3} />
- </Item2>
- <Item2>
- <Icon icon={Twitter} alt="Twitter" size={3} />
- </Item2>
- <Item2>
- <Icon icon={Twitter} alt="LinkedIn" size={3} />
- </Item2>
- </GreenIcon>
- </Section>
- </Bubble>
-)
-
-AddressBubble.propTypes = {
- profile: PropTypes.object,
-}
-
-export default AddressBubble
diff --git a/src/lib/components/organisms/FilterBar.js b/src/lib/components/organisms/FilterBar.js
index 633bb432a6632d14b45771aab4aad7f6cf8ed62e..c8649d15a8e91857cc026a05d1a1f9ac94fe8cdd 100644
--- a/src/lib/components/organisms/FilterBar.js
+++ b/src/lib/components/organisms/FilterBar.js
@@ -21,9 +21,10 @@ const FilterWrapper = styled.div`
const FilterBar = ({ searchFilters }) => {
return (
<Container>
- {searchFilters.map((c, key) => (
- <FilterWrapper key={key}>{c}</FilterWrapper>
- ))}
+ {searchFilters &&
+ searchFilters.map((c, key) => (
+ <FilterWrapper key={key}>{c}</FilterWrapper>
+ ))}
</Container>
)
}
diff --git a/src/lib/components/organisms/Menu.js b/src/lib/components/organisms/Menu.js
deleted file mode 100644
index f876b2d2bfa3e58321c3a79e24c23749f6e32e9b..0000000000000000000000000000000000000000
--- a/src/lib/components/organisms/Menu.js
+++ /dev/null
@@ -1,112 +0,0 @@
-import React from 'react'
-import styled from 'styled-components'
-import PropTypes from 'prop-types'
-import themeGet from '@styled-system/theme-get'
-
-const headingHeight = '33px'
-const shadowWidth = '7px'
-
-const MenuWrapper = styled.div`
- display: block;
- position: relative;
- text-transform: lowercase;
- font-family: ${themeGet('fonts.title')};
-`
-
-const Wrapper = styled.div`
- float: left;
-`
-
-const HeadingWrapper = styled(Wrapper)`
- display: flex;
- position: absolute;
- flex-direction: row-reverse;
- flex-wrap: no-wrap;
- align-items: start;
- transform-origin: top left;
- transform: rotate(-90deg) translate(50px);
- bottom: 0;
- left: 0;
- height: ${headingHeight};
-`
-
-const HeadingBackground = styled.h3`
- position: relative;
- height: 100%;
- background-color: white;
- border-top-right-radius: 50px;
- border-top-left-radius: 50px;
- margin: 0;
- padding: 0 ${themeGet('spacing.medium')};
- box-shadow: ${themeGet('shadows.button')};
-
- :before {
- content: '';
- position: absolute;
- background-color: white;
- width: calc(100% + ${shadowWidth} + ${shadowWidth});
- height: ${shadowWidth};
- bottom: -${shadowWidth};
- left: -${shadowWidth};
- }
-`
-
-const Item = styled.div`
- color: ${({ selected }) =>
- themeGet(selected ? 'colors.secondary' : 'colors.primary')};
-`
-
-const Heading = styled(Item)`
- padding: ${themeGet('spacing.small')};
- margin: 0;
- font-weight: normal;
- ${({ selected }) => !selected && 'opacity: 0.4;'}
-`
-
-const EntryWrapper = styled(Wrapper)`
- background-color: white;
- border-radius: 100px;
- padding: ${themeGet('spacing.medium')};
- margin-left: ${headingHeight};
- box-shadow: ${themeGet('shadows.button')};
- ${({ minHeight }) => minHeight && `min-height: ${minHeight};`}
-`
-
-const Entry = styled(Item)`
- margin: ${themeGet('spacing.large')} 0;
-`
-
-// tagged template literal
-
-const Menu = ({ headings, entries, minHeight }) => (
- <MenuWrapper>
- <HeadingWrapper>
- {headings.map((heading, index) =>
- heading.selected ? (
- <HeadingBackground key={index}>
- <Heading selected={heading.selected}>{heading.item}</Heading>
- </HeadingBackground>
- ) : (
- <Heading key={index} selected={heading.selected}>
- {heading.item}
- </Heading>
- )
- )}
- </HeadingWrapper>
- <EntryWrapper minHeight={minHeight}>
- {entries.map((entry, index) => (
- <Entry key={index} selected={entry.selected}>
- {entry.item}
- </Entry>
- ))}
- </EntryWrapper>
- </MenuWrapper>
-)
-
-Menu.propTypes = {
- headings: PropTypes.array,
- entries: PropTypes.array,
- minHeight: PropTypes.string,
-}
-
-export default Menu
diff --git a/src/lib/components/organisms/ProfileBubble.js b/src/lib/components/organisms/ProfileBubble.js
deleted file mode 100644
index 6bae887e87c56ed0d5227c538c87c72379b34759..0000000000000000000000000000000000000000
--- a/src/lib/components/organisms/ProfileBubble.js
+++ /dev/null
@@ -1,136 +0,0 @@
-import React from 'react'
-import styled from 'styled-components'
-import themeGet from '@styled-system/theme-get'
-import PropTypes from 'prop-types'
-
-import Bubble from '../../containers/Layout/Bubble.js'
-import FiveStarRating from '../molecules/FiveStarRating.js'
-import Heart from '../atoms/Icons/Heart.js'
-import Icon from '../atoms/Icon.js'
-import Lens from '../atoms/Shape/Lens.js'
-import PinShape from '../atoms/Shape/PinShape.js'
-import Request from '../atoms/Icons/Request.js'
-import Text from '../atoms/Text.js'
-
-const LensShadow = styled.div`
- & svg {
- filter: drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.2))
- drop-shadow(0px 1px 10px rgba(0, 0, 0, 0.12))
- drop-shadow(0px 4px 5px rgba(0, 0, 0, 0.14));
- }
-`
-
-const BubblePart = styled.div`
- display: flex;
- flex-direction: column;
- align-items: start;
-`
-
-const Left = styled(BubblePart)`
- justify-self: start;
-`
-
-const Middle = styled(BubblePart)`
- margin: 0 ${themeGet('spacing.medium')};
- justify-content: center;
- justify-self: center;
-`
-
-const Right = styled(BubblePart)`
- justify-self: end;
-`
-
-const Section = styled.h2`
- font-weight: normal;
- text-transform: lowercase;
- font-size: ${themeGet('fontSizes.h2')};
- margin: 0;
- font-family: ${themeGet('fonts.title')};
- color: ${themeGet('colors.primary')};
-`
-
-const Flex = styled.div`
- display: flex;
- flex-flow: row wrap;
- align-items: center;
-`
-
-const SpacerSpan = styled.span`
- margin: 0 ${themeGet('spacing.small')};
-`
-
-const ProfilePicture = styled.img`
- border-radius: 2000rem;
- max-width: 100%;
-`
-
-const Spacer = () => <SpacerSpan>|</SpacerSpan>
-
-const ProfileBubble = ({
- name = 'Linguala',
- languageCount = 5,
- rating = 5,
- servicesIDs = ['translation', 'interpreting', 'lessons'],
- pictureURL,
- location: { name: locationName, latlng } = {
- name: 'Basel, CH',
- latlng: [47.53667, 7.60854],
- },
- contact = 'Kontaktaufnahme',
- favorite = 'Zu Favoriten hinzufügen',
-}) => (
- <Bubble
- shadow={'low'}
- row
- stretch
- style={{
- margin: `${themeGet('spacing.medium')} ${themeGet('spacing.large')}`,
- }}
- >
- <Left>
- <LensShadow>
- <Lens size={7} style={{ marginBottom: '-1em' }}>
- <ProfilePicture src={pictureURL} alt={'Profile picture'} />
- </Lens>
- </LensShadow>
- <PinShape size={7} rotation={180} style={{ marginTop: '-1em' }}>
- <Text>{'Map'}</Text>
- </PinShape>
- </Left>
- <Middle>
- <Section>{name}</Section>
- <Flex>
- <Text>{locationName}</Text>
- <Spacer />
- <Text primary>{languageCount} Sprachen</Text>
- <Spacer />
- <FiveStarRating rating={rating} />
- </Flex>
- <Flex>
- {servicesIDs &&
- servicesIDs.map((serviceId, index) => (
- <React.Fragment key={index}>
- <Text>{serviceId}</Text>
- {index < servicesIDs.length - 1 && <Spacer />}
- </React.Fragment>
- ))}
- </Flex>
- </Middle>
- <Right>
- <PinShape size={6} rotation={90} style={{ marginBottom: '-1em' }}>
- <Icon icon={Request} alt={contact} />
- </PinShape>
- <Text size={4}>{contact}</Text>
- <PinShape size={6} rotation={90} style={{ marginBottom: '-1em' }}>
- <Icon icon={Heart} alt={favorite} />
- </PinShape>
- <Text size={4}>{favorite}</Text>
- </Right>
- </Bubble>
-)
-
-ProfileBubble.propTypes = {
- profile: PropTypes.object,
-}
-
-export default ProfileBubble
diff --git a/src/lib/components/organisms/SubHeaderHor.js b/src/lib/components/organisms/SubHeaderHor.js
deleted file mode 100644
index db8a63a372699115c5b6016ceb2e1ab7fdadf672..0000000000000000000000000000000000000000
--- a/src/lib/components/organisms/SubHeaderHor.js
+++ /dev/null
@@ -1,65 +0,0 @@
-import React from 'react'
-import styled from 'styled-components'
-import PropTypes from 'prop-types'
-import themeGet from '@styled-system/theme-get'
-
-const MenuWrapper = styled.div`
- display: inline-block;
- position: relative;
- text-transform: lowercase;
- font-family: ${themeGet('fonts.title')};
-`
-
-const Wrapper = styled.div`
- justify-content: space-between;
-`
-
-const Item = styled.div`
- color: ${({ selected }) =>
- themeGet(selected ? 'colors.secondary' : 'colors.primary')};
-`
-
-const EntryWrapper = styled(Wrapper)`
- background-color: white;
- border-radius: ${themeGet('border.radius')};
- padding: ${themeGet('spacing.medium')};
- box-shadow: ${({ shadow }) => themeGet(`shadows.${shadow || 'low'}`)};
-`
-
-const Heading = styled(Item)`
- display: inline-block;
- margin: ${themeGet('spacing.small')};
- padding: ${themeGet('spacing.small')};
- font-size: ${themeGet('fontSizes.h3')};
-`
-
-const Entry = styled(Item)`
- display: inline-block;
- margin: ${themeGet('spacing.small')};
- padding: ${themeGet('spacing.small')};
- font-size: ${themeGet('fontSizes.p')};
-`
-
-const SubHeaderHor = ({ headings, entries }) => (
- <MenuWrapper>
- <EntryWrapper>
- {headings.map((heading, index) => (
- <Heading key={index} selected={heading.selected}>
- {heading.item}
- </Heading>
- ))}
- {entries.map((entry, index) => (
- <Entry key={index} selected={entry.selected}>
- {entry.item}
- </Entry>
- ))}
- </EntryWrapper>
- </MenuWrapper>
-)
-
-SubHeaderHor.propTypes = {
- headings: PropTypes.array,
- entries: PropTypes.array,
-}
-
-export default SubHeaderHor
diff --git a/src/lib/components/organisms/TranslationBubble.js b/src/lib/components/organisms/TranslationBubble.js
deleted file mode 100644
index 0a8ebceefce9aeba4b5913aea73d682b0b5b8e0a..0000000000000000000000000000000000000000
--- a/src/lib/components/organisms/TranslationBubble.js
+++ /dev/null
@@ -1,93 +0,0 @@
-import React from 'react'
-import styled from 'styled-components'
-import themeGet from '@styled-system/theme-get'
-import PropTypes from 'prop-types'
-
-import Bubble from '../../containers/Layout/Bubble.js'
-import Bubblet from '../../containers/Layout/Bubblet.js'
-import Icon from '../atoms/Icon.js'
-import PinShape from '../atoms/Shape/PinShape.js'
-import logo from '../atoms/Icons/LingualaLogo.js'
-import Add from '../atoms/Icons/Add'
-
-const GridItem = styled.div`
- margin: 0 auto;
-`
-const GridContainer = styled.div`
- display: grid;
- grid-template-columns: repeat(4, auto);
- grid-gap: ${themeGet('spacing.small')};
-`
-const FlexDown = styled.div`
- width: 80%;
- display: flex;
- justify-content: space-between;
- margin: ${themeGet('spacing.medium')};
- margin-bottom: ${themeGet('spacing.small')};
-
- * > {
- flex: 1;
- }
-`
-const Title = styled.h1`
- font-size: ${themeGet('fontSizes.h1')};
- font-family: ${themeGet('fonts.title')};
- font-weight: lighter;
- color: ${themeGet('colors.primary')};
-`
-
-const TranslationBubble = ({
- title = 'n/a',
- intro = 'n/a',
- favourites = [{ favourite: 'n/a', icon: Add, alt: 'n/a' }],
- languages = [{ from: 'n/a', to: 'n/a' }],
-}) => (
- <Bubble shadow={'low'} column stretch>
- <Title style={{ fontSize: '2rem', textAlign: 'center' }}>{title}</Title>
- <p style={{ fontSize: '0.8rem', textJustify: 'justify', maxWidth: 550 }}>
- {intro}
- </p>
- <GridContainer>
- {favourites.map((favourite, index) => {
- return (
- <GridItem key={index}>
- <PinShape size={4} rotation={360} style={{ marginBottom: '1em' }}>
- <Icon icon={favourite.icon} alt={favourite.alt} size={1} />
- </PinShape>
- <p
- style={{
- fontSize: '0.8rem',
- marginTop: '-1em',
- textAlign: 'center',
- }}
- >
- {favourite.favourite}
- </p>
- </GridItem>
- )
- })}
- </GridContainer>
-
- {languages.map((language, index) => {
- return (
- <Bubblet key={index} style={{ alignItems: 'center' }}>
- <FlexDown>
- <p style={{ margin: '0', color: 'white', fontSize: '1.5rem' }}>
- {language.from}
- </p>
- <Icon icon={logo} alt="Logo" size={4} />
- <p style={{ margin: '0', color: 'white', fontSize: '1.5rem' }}>
- {language.to}
- </p>
- </FlexDown>
- </Bubblet>
- )
- })}
- </Bubble>
-)
-
-TranslationBubble.propTypes = {
- profile: PropTypes.object,
-}
-
-export default TranslationBubble
diff --git a/src/lib/containers/Layout/Bubble.js b/src/lib/containers/Layout/Bubble.js
deleted file mode 100644
index e3869082546ce0ee3c2a10d4db033001d1e47cd8..0000000000000000000000000000000000000000
--- a/src/lib/containers/Layout/Bubble.js
+++ /dev/null
@@ -1,30 +0,0 @@
-import styled from 'styled-components'
-import PropTypes from 'prop-types'
-import themeGet from '@styled-system/theme-get'
-
-const Bubble = styled.div`
- background-color: white;
- padding: ${themeGet('spacing.medium')};
- ${({ doublebottom }) => doublebottom && 'padding-bottom: 3em;'}
- display: flex;
- align-items: ${({ stretch }) => (stretch ? 'stretch' : 'center')};
- align-content: stretch;
- justify-content: space-between;
- flex-direction: ${({ row }) => (row ? 'row' : 'column')};
- border-radius: ${themeGet('border.radius')};
- border-width: 0;
- border-style: solid;
- box-shadow: ${({ shadow }) => themeGet(`shadows.${shadow || 'medium'}`)};
- > * {
- flex: 1 auto;
- }
-`
-
-Bubble.propTypes = {
- doublebottom: PropTypes.bool,
- row: PropTypes.bool,
- shadow: PropTypes.string,
- stretch: PropTypes.bool,
-}
-
-export default Bubble
diff --git a/src/lib/containers/Layout/Bubblet.js b/src/lib/containers/Layout/Bubblet.js
deleted file mode 100644
index 96cede6f9a77e8a64491a711a3c94e3d00044f27..0000000000000000000000000000000000000000
--- a/src/lib/containers/Layout/Bubblet.js
+++ /dev/null
@@ -1,32 +0,0 @@
-import styled from 'styled-components'
-import PropTypes from 'prop-types'
-import themeGet from '@styled-system/theme-get'
-
-const Bubblet = styled.div`
- background: ${themeGet('colors.primary')};
- padding-left: ${themeGet('spacing.small')};
- padding-bottom: 0;
- ${({ doublebottom }) => doublebottom && 'padding-bottom: 3em;'}
- display: flex;
- align-content: stretch;
- justify-content: space-between;
- flex-direction: ${({ row }) => (row ? 'row' : 'column')};
- border-radius: ${themeGet('border.radius')};
- border-width: 0;
- border-style: solid;
- box-shadow: ${({ shadow }) => themeGet(`shadows.${shadow || 'medium'}`)};
- > * {
- flex: 1 auto;
- }
- margin: 0 ${themeGet('spacing.small')} ${themeGet('spacing.small')}
- ${themeGet('spacing.small')};
-`
-
-Bubblet.propTypes = {
- doublebottom: PropTypes.bool,
- row: PropTypes.bool,
- shadow: PropTypes.string,
- stretch: PropTypes.bool,
-}
-
-export default Bubblet
diff --git a/src/stories/a-documentation-meta/overview-components.stories.mdx b/src/stories/a-documentation-meta/overview-components.stories.mdx
index e250f1d1da085e8c1295b0d5504bc0add1717b6c..e4405227b04c2a1b1e2b0a471ebb2625bc33a0e6 100644
--- a/src/stories/a-documentation-meta/overview-components.stories.mdx
+++ b/src/stories/a-documentation-meta/overview-components.stories.mdx
@@ -13,7 +13,7 @@ import {
StatelessToggle,
Toggle,
FormWrapper,
- ProfileBubble,
+ FilterBar,
PinShape,
} from '../../exports/index.mjs'
import { notcentered } from '../helpers/params.js'
@@ -135,12 +135,12 @@ always based upon other Molecules (& Atoms)
Example import:
```js
-import { ProfileBubble } from '@linguala/ui-components'
+import { FilterBar } from '@linguala/ui-components'
```
<Preview>
- <Story name="organisms/profilebubble" parameters={notcentered}>
- <ProfileBubble />
+ <Story name="organisms/filterbar" parameters={notcentered}>
+ <FilterBar />
</Story>
</Preview>
@@ -155,7 +155,6 @@ which do not fit into Atomic Design or are Components
that just have not been decided which category they fall in
- Layout
- - Bubble 🤷
- Center
- Styles
- colors: `import { colors } from '@linguala/ui-components'`
diff --git a/src/stories/atoms/layout/bubble.stories.js b/src/stories/atoms/layout/bubble.stories.js
deleted file mode 100644
index 596d3af265e45ddc11ba47a954f8f5ffb947c834..0000000000000000000000000000000000000000
--- a/src/stories/atoms/layout/bubble.stories.js
+++ /dev/null
@@ -1,94 +0,0 @@
-import React from 'react'
-import { withA11y } from '@storybook/addon-a11y'
-import styled from 'styled-components'
-
-import { Bubble, Bubblet, Button, colors } from '../../../exports/index.mjs'
-
-const { green, blue, red } = colors
-
-export default {
- title: 'Atoms/Layout',
- decorators: [withA11y],
-}
-
-export const _Bubble = () => (
- <Bubble doublebottom style={{ backgroundColor: 'seashell' }}>
- Ciao
- <Bubble>
- Hola
- <Bubble>
- ?Como està s?
- <Bubble>
- Mi amor
- <Bubble doublebottom>
- Bueno
- <Bubble
- style={{
- backgroundColor: 'lightgreen',
- color: 'white',
- }}
- >
- What?
- <Bubble row>
- <div>
- <Bubble style={{ backgroundColor: green }}>
- Sorry, but I don't really speak spanish.
- </Bubble>
- <Bubble style={{ backgroundColor: blue }}>
- Please help me and translate with
- </Bubble>
- </div>
- <a href="https://linguala.com">
- <Button
- size={5}
- style={{
- color: 'yellow',
- height: 'calc(100% - 2em)',
- }}
- >
- <Bubble
- style={{
- backgroundColor: red,
- }}
- >
- Linguala
- </Bubble>
- </Button>
- </a>
- </Bubble>
- </Bubble>
- </Bubble>
- </Bubble>
- </Bubble>
- </Bubble>
- </Bubble>
-)
-
-Bubble.storyName = 'Layout/Bubble'
-
-const P = styled.p`
- text-align: center;
-`
-
-export const _Bubblet = () => (
- <div>
- <Bubblet
- row={false}
- doublebottom
- stretch
- shadow="medium"
- style={{ backgroundColor: green, color: 'white', textAligne: 'center' }}
- >
- <P>This</P>
- <P>is</P>
- <P>a</P>
- <P>column bubblet</P>
- <P>with double bottom and shadow</P>
- </Bubblet>
- <Bubblet style={{ backgroundColor: blue, color: 'white' }}>
- simple Bubblet
- </Bubblet>
- </div>
-)
-
-Bubblet.storyName = 'Layout/Bubblet'
diff --git a/src/stories/atoms/shapes/lens.stories.js b/src/stories/atoms/shapes/lens.stories.js
index c3422268086fec5150df8c211418c337fb8befbd..40081c4529b00721f4cba5223c99bb6237c0dff9 100644
--- a/src/stories/atoms/shapes/lens.stories.js
+++ b/src/stories/atoms/shapes/lens.stories.js
@@ -5,7 +5,7 @@ import { withA11y } from '@storybook/addon-a11y'
import { Lens } from '../../../exports/index.mjs'
export default {
- title: 'Atoms/Shape',
+ title: 'Atoms/Lens',
decorators: [withKnobs, withA11y],
}
diff --git a/src/stories/atoms/shapes/pin.stories.js b/src/stories/atoms/shapes/pin.stories.js
index 29da3c727948b90d910ce431aa88cfb4fb2da68f..9af01b390cbb2449896511d736d2c167004e92a3 100644
--- a/src/stories/atoms/shapes/pin.stories.js
+++ b/src/stories/atoms/shapes/pin.stories.js
@@ -7,7 +7,7 @@ import { PinShape } from '../../../exports/index.mjs'
import Container from '../../helpers/Container.js'
export default {
- title: 'Atoms/Shape',
+ title: 'Atoms/Pin',
decorators: [withKnobs, withA11y],
}
diff --git a/src/stories/atoms/spin.stories.js b/src/stories/atoms/spin.stories.js
index 5034343510c0bb7f5a6630403750b3c94cc61a5e..b7620254aedd1fa25bdf6de31f2022c21a24544a 100644
--- a/src/stories/atoms/spin.stories.js
+++ b/src/stories/atoms/spin.stories.js
@@ -4,7 +4,6 @@ import { withA11y } from '@storybook/addon-a11y'
import { withKnobs } from '@storybook/addon-knobs'
import {
- Bubble,
Button,
Icon,
PinShape,
@@ -24,24 +23,6 @@ export const ButtonLinear = () => (
</Spin>
)
-ButtonLinear.storyName = 'Button/linear'
-
-export const BubbleLinear = () => (
- <Spin>
- <Bubble>loading...</Bubble>
- </Spin>
-)
-
-BubbleLinear.storyName = 'Bubble/linear'
-
-export const BubbleWobbly = () => (
- <Spin wobbly>
- <Bubble>loading...</Bubble>
- </Spin>
-)
-
-BubbleWobbly.storyName = 'Bubble/wobbly'
-
export const PinShapeReverse = () => (
<Spin reverse>
<PinShape rotation={-170}>
diff --git a/src/stories/atoms/text.stories.js b/src/stories/atoms/text.stories.js
index 80cab6e09b5aa835817ce00bbc931e6008e9128f..0e4d6d2a23c874cfc2cdf6e1e67a37e2d107b4bc 100644
--- a/src/stories/atoms/text.stories.js
+++ b/src/stories/atoms/text.stories.js
@@ -3,7 +3,7 @@ import React from 'react'
import { boolean, number, text, withKnobs } from '@storybook/addon-knobs'
import { withA11y } from '@storybook/addon-a11y'
-import { Bubble, Link, Subtitle, Text, Title } from '../../exports/index.mjs'
+import { Link, Subtitle, Text, Title } from '../../exports/index.mjs'
export default {
title: 'Atoms/Text',
@@ -36,21 +36,17 @@ export const _Text = () => (
)
export const TextSize = () => (
- <Bubble style={{ height: '85%' }}>
- <Text size={number('size', 2)} centered={boolean('centered', true)}>
- <p>
- Dank <Link href="//linguala.com">Linguala</Link> werden Sprachbarrieren
- überwunden. Ob Einzelpersonen, Organisationen oder Unternehmen - Sie
- profitieren von Linguala. Kreiren Sie ein Profil um Favoriten zu
- speichern und browsen Sie den Linguala
- <Link href="//linguala.lng.li/marketplace">Marktplatz</Link> um Anbieter
- von Sprachservices zu finden.
- </p>
- <p>
- Dieser Text benötigt einen flex-basierten Container zur Zentrierung.
- </p>
- </Text>
- </Bubble>
+ <Text size={number('size', 2)} centered={boolean('centered', true)}>
+ <p>
+ Dank <Link href="//linguala.com">Linguala</Link> werden Sprachbarrieren
+ überwunden. Ob Einzelpersonen, Organisationen oder Unternehmen - Sie
+ profitieren von Linguala. Kreiren Sie ein Profil um Favoriten zu speichern
+ und browsen Sie den Linguala
+ <Link href="//linguala.lng.li/marketplace">Marktplatz</Link> um Anbieter
+ von Sprachservices zu finden.
+ </p>
+ <p>Dieser Text benötigt einen flex-basierten Container zur Zentrierung.</p>
+ </Text>
)
TextSize.storyName = 'Text/size'
diff --git a/src/stories/molecules/accordion.stories.js b/src/stories/molecules/accordion.stories.js
deleted file mode 100644
index 28c58e170e504546e470bdad46f402e8c1abceb0..0000000000000000000000000000000000000000
--- a/src/stories/molecules/accordion.stories.js
+++ /dev/null
@@ -1,30 +0,0 @@
-import React from 'react'
-import { withA11y } from '@storybook/addon-a11y'
-
-import { Accordion, Button, Title } from '../../exports/index.mjs'
-
-export default {
- title: 'Molecules/Accordion',
- decorators: [withA11y],
-}
-
-export const _Accordion = () => <Accordion header={AccHeader} body={AccBody} />
-
-const AccHeader = () => <Title>This is an accordion title</Title>
-
-const AccBody = () => (
- <>
- <p>
- Away ipsum dolor sit for sure, consectetuer adipiscing my shizz. Nullam
- crazy velit, aliquet volutpat, suscipizzle the bizzle, gravida vizzle,
- arcu. Pellentesque eget tortizzle. Sizzle eros. Fusce at shut the shizzle
- up dapibizzle turpis pot funky fresh. Maurizzle pellentesque nibh et
- turpizzle. Brizzle izzle tortizzle. Pellentesque dope rhoncizzle gangster.
- In hac habitasse platea dictumst. Funky fresh dapibizzle. Pizzle tellizzle
- shizznit, pretizzle eu, mattizzle shut the shizzle up, cool vitae, nunc.
- Check out this suscipizzle. Shizznit semper velizzle sed i saw beyonces
- tizzles and my pizzle went crizzle.
- </p>
- <Button>Was this helpful?</Button>
- </>
-)
diff --git a/src/stories/molecules/header.stories.js b/src/stories/molecules/header.stories.js
deleted file mode 100644
index d96fe0f223e498d7312db31c9a86ae5bc7d47ce5..0000000000000000000000000000000000000000
--- a/src/stories/molecules/header.stories.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import React from 'react'
-
-import { Logo, Title } from '../../exports/atoms.mjs'
-
-export default {
- title: 'Molecules/Header',
-}
-
-export const Marktplatz = () => (
- <div>
- <Logo />
- <Title>marktplatz für sprachservices</Title>
- </div>
-)
diff --git a/src/stories/molecules/tripin.stories.js b/src/stories/molecules/tripin.stories.js
deleted file mode 100644
index 14888a4a79cf56a3f0f25fc3ed2b89e197ebcd3d..0000000000000000000000000000000000000000
--- a/src/stories/molecules/tripin.stories.js
+++ /dev/null
@@ -1,48 +0,0 @@
-import React from 'react'
-import styled from 'styled-components'
-
-import { PinShape as Pin } from '../../exports/atoms.mjs'
-import { TriShape } from '../../exports/molecules.mjs'
-import { ContentBox } from '../utils'
-
-const CenteredText = styled.div`
- display: flex;
- justify-content: center;
- align-items: center;
- margin: auto;
- height: 100%;
- width: 100%;
-`
-
-const T = CenteredText
-
-export default {
- title: 'Molecules/TriShape',
-}
-
-export const TriShapePinDefault = () => (
- <ContentBox>
- <TriShape
- Component={Pin}
- left={<T>L</T>}
- middle={<T>M</T>}
- right={<T>R</T>}
- />
- </ContentBox>
-)
-
-TriShapePinDefault.storyName = 'TriShape Pin (default)'
-
-export const TriShapePinSizeable = () => (
- <ContentBox>
- <TriShape
- initSize={24}
- Component={Pin}
- left={<T>left</T>}
- middle={<T>middle</T>}
- right={<T>right</T>}
- />
- </ContentBox>
-)
-
-TriShapePinSizeable.storyName = 'TriShape Pin (sizeable)'
diff --git a/src/stories/organisms/TranslationBubble.stories.js b/src/stories/organisms/TranslationBubble.stories.js
deleted file mode 100644
index 25e7b1580026f132cd1a9b20dc61dbbbff6c7c39..0000000000000000000000000000000000000000
--- a/src/stories/organisms/TranslationBubble.stories.js
+++ /dev/null
@@ -1,43 +0,0 @@
-import React from 'react'
-
-import Expertise from '../../lib/components/atoms/Icons/Expertise.js'
-import AdditionalServices from '../../lib/components/atoms/Icons/AdditionalServices.js'
-import Eye from '../../lib/components/atoms/Icons/Eye.js'
-import Software from '../../lib/components/atoms/Icons/Software.js'
-import Membership from '../../lib/components/atoms/Icons/Membership.js'
-import Agb from '../../lib/components/atoms/Icons/Agb.js'
-import { TranslationBubble } from '../../exports/organisms.mjs'
-
-export default {
- title: 'Organisms/TranslationBubble',
-}
-
-export const TranslationBubbleDefault = () => <TranslationBubble />
-
-TranslationBubbleDefault.storyName = 'TranslationBubble/default'
-
-export const TranslationBubbleExample = () => (
- <TranslationBubble
- title={'übersetzung I dolmetschen'}
- intro={`Global Voices ist specialisiert in Marketing und Technologie da dies vor allem beim Live Dolmetschen unsere Hauptkunden sind. Aber naturlich konnen wir auch in weiteren Bereichen ubersetzen , Sprache ist Sprache und wir sind fur Sie da bla bla bla `}
- favourites={[
- { favourite: 'fachgebiete', icon: Expertise, alt: 'Expertise' },
- {
- favourite: 'zusatzleistung',
- icon: AdditionalServices,
- alt: 'Services',
- },
- { favourite: 'augen prinzip', icon: Eye, alt: '???' },
- { favourite: 'software', icon: Software, alt: 'Software' },
- { favourite: 'mitgliedschaft', icon: Membership, alt: 'Membership' },
- { favourite: 'linguala agb', icon: Agb, alt: 'Terms and conditions' },
- ]}
- languages={[
- { from: 'vietnamesisch', to: 'englisch' },
- { from: 'italienisch', to: 'englisch' },
- { from: 'italienisch', to: 'deutsch' },
- ]}
- />
-)
-
-TranslationBubbleExample.storyName = 'TranslationBubble/example'
diff --git a/src/stories/organisms/addressbubble.stories.js b/src/stories/organisms/addressbubble.stories.js
deleted file mode 100644
index 841fabe97bb1dde7a6bcaadf0deaa42436cb7994..0000000000000000000000000000000000000000
--- a/src/stories/organisms/addressbubble.stories.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import React from 'react'
-
-import { AddressBubble } from '../../exports/organisms.mjs'
-
-export default {
- title: 'Organisms/AddressBubble',
-}
-
-export const AddressBubbleDefault = () => <AddressBubble />
-
-AddressBubbleDefault.storyName = 'AddressBubble/default'
-
-export const AddressBubbleLuigi = () => (
- <AddressBubble
- rating={4}
- opinions={'30'}
- address={'se4 157 London, United Kingdom'}
- telephone={'+44 176 234 567'}
- email={'translate@globalvoices.co.uk'}
- website={'www.globalvoices.co.uk'}
- />
-)
-
-AddressBubbleLuigi.storyName = 'AddressBubble/example'
diff --git a/src/stories/organisms/menu.stories.js b/src/stories/organisms/menu.stories.js
deleted file mode 100644
index 3f8406c721e8a925db3301394a0456a838df38c2..0000000000000000000000000000000000000000
--- a/src/stories/organisms/menu.stories.js
+++ /dev/null
@@ -1,30 +0,0 @@
-import React from 'react'
-
-import { Menu } from '../../exports/organisms.mjs'
-
-const data = {
- headings: [
- { item: 'Branche' },
- { item: 'Profil', selected: true },
- // { item: 'third' },
- ],
- entries: [
- { item: 'Porträt' },
- { item: 'Banner', selected: true },
- { item: 'Bezahlung' },
- { item: 'Kontakt' },
- { item: 'Blog' },
- // { item: 'Very long text' },
- // {
- // item: 'This text is an extremely long text that makes the menu very wide',
- // },
- ],
-}
-
-export default {
- title: 'Organisms/Menu',
-}
-
-export const _Menu = () => (
- <Menu headings={data.headings} entries={data.entries} />
-)
diff --git a/src/stories/organisms/profilebubble.stories.js b/src/stories/organisms/profilebubble.stories.js
deleted file mode 100644
index 571b0dee3bdd09fa0e8313c2e85ff364af304758..0000000000000000000000000000000000000000
--- a/src/stories/organisms/profilebubble.stories.js
+++ /dev/null
@@ -1,34 +0,0 @@
-import React from 'react'
-
-import { ProfileBubble } from '../../exports/organisms.mjs'
-
-export default {
- title: 'Organisms/ProfileBubble',
-}
-
-export const ProfileBubbleDefault = () => (
- <ProfileBubble
- pictureURL={
- 'http://www.papersurfer.com/wp-content/uploads/2007/09/babelfish.jpg'
- }
- />
-)
-
-ProfileBubbleDefault.storyName = 'ProfileBubble/default'
-
-export const ProfileBubbleLuigi = () => (
- <ProfileBubble
- name={'Luigi'}
- languageCount={3}
- rating={1.5}
- servicesIDs={['karting', 'mushrooms', 'mario']}
- pictureURL={
- 'https://yt3.ggpht.com/-kqCAcE59qSo/AAAAAAAAAAI/AAAAAAAAAAA/zy4skyAcVCo/s900-c-k-no-mo-rj-c0xffffff/photo.jpg'
- }
- location={{ name: 'Japan', latlng: [11, 12] }}
- contact={'マリオ'}
- favorite={'ã‚ノコ'}
- />
-)
-
-ProfileBubbleLuigi.storyName = 'ProfileBubble/Luigi'
diff --git a/src/stories/organisms/subheaderhor.stories.js b/src/stories/organisms/subheaderhor.stories.js
deleted file mode 100644
index 11430ab33d6a14c9d11b6e0e43977cb38b01d320..0000000000000000000000000000000000000000
--- a/src/stories/organisms/subheaderhor.stories.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import React from 'react'
-
-import { SubHeaderHor } from '../../exports/organisms.mjs'
-
-const data = {
- headings: [{ item: 'Profil', selected: true }],
- entries: [
- { item: 'Porträt' },
- { item: 'Banner' },
- { item: 'Bezahlung', selected: true },
- { item: 'Kontakt' },
- { item: 'Blog' },
- ],
-}
-
-export default {
- title: 'Organisms/SubHeaderHor',
-}
-
-export const _SubHeaderHor = () => (
- <SubHeaderHor headings={data.headings} entries={data.entries} />
-)
diff --git a/tests/__snapshots__/storyshots.test.js.snap b/tests/__snapshots__/storyshots.test.js.snap
index 2038627bf47547a1663afb5046be7f971c019e79..479a0af916c91b34c473349ebea2cb12afe32d6a 100644
--- a/tests/__snapshots__/storyshots.test.js.snap
+++ b/tests/__snapshots__/storyshots.test.js.snap
@@ -9386,153 +9386,19 @@ exports[`Storyshots Atoms/Layout AlternateBackground 1`] = `
</div>
`;
-exports[`Storyshots Atoms/Layout Bubble 1`] = `
-.c3 {
- color: white;
- background-color: #1CB569;
- -webkit-transition: background-color 0.1s linear;
- transition: background-color 0.1s linear;
- font-size: 1rem;
- padding: 0.5rem;
- margin: 0.5rem;
- line-height: 1.5em;
- box-shadow: none;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- cursor: unset;
- -webkit-transition: -webkit-transform 0.2s cubic-bezier(0.4,0,0.2,1);
- -webkit-transition: transform 0.2s cubic-bezier(0.4,0,0.2,1);
- transition: transform 0.2s cubic-bezier(0.4,0,0.2,1);
- text-transform: lowercase;
- border-style: unset;
- border-radius: 3rem;
- min-width: 240px;
- min-height: auto;
- padding: 0.5rem;
- min-height: 2.5em;
-}
-
-.c3:active,
-.c3:hover {
- background-color: #4A90E2;
-}
-
-.c3::-moz-focus-inner {
- border: 0;
-}
-
-.c3:active {
- -webkit-transform: scale(1.05);
- -ms-transform: scale(1.05);
- transform: scale(1.05);
-}
-
-.c3:focus,
-.c3:active {
- box-shadow: 0 1px 5px 0 rgba(0,0,0,0.2),0 3px 4px 0 rgba(0,0,0,0.12),0 2px 4px 0 rgba(0,0,0,0.14);
- outline: none;
-}
-
-.c0 {
- background-color: white;
- padding: 1rem;
- padding-bottom: 3em;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-align-content: stretch;
- -ms-flex-line-pack: stretch;
- align-content: stretch;
- -webkit-box-pack: justify;
- -webkit-justify-content: space-between;
- -ms-flex-pack: justify;
- justify-content: space-between;
- -webkit-flex-direction: column;
- -ms-flex-direction: column;
- flex-direction: column;
- border-radius: 3rem;
- border-width: 0;
- border-style: solid;
- box-shadow: 0px 4px 5px 0 rgba(0,0,0,0.2),0 3px 14px 3px rgba(0,0,0,0.12),0 8px 10px 1px rgba(0,0,0,0.14);
-}
-
-.c0 > * {
- -webkit-flex: 1 auto;
- -ms-flex: 1 auto;
- flex: 1 auto;
-}
-
+exports[`Storyshots Atoms/Lens Lens Border 1`] = `
.c1 {
- background-color: white;
- padding: 1rem;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-align-content: stretch;
- -ms-flex-line-pack: stretch;
- align-content: stretch;
- -webkit-box-pack: justify;
- -webkit-justify-content: space-between;
- -ms-flex-pack: justify;
- justify-content: space-between;
- -webkit-flex-direction: column;
- -ms-flex-direction: column;
- flex-direction: column;
- border-radius: 3rem;
- border-width: 0;
- border-style: solid;
- box-shadow: 0px 4px 5px 0 rgba(0,0,0,0.2),0 3px 14px 3px rgba(0,0,0,0.12),0 8px 10px 1px rgba(0,0,0,0.14);
-}
-
-.c1 > * {
- -webkit-flex: 1 auto;
- -ms-flex: 1 auto;
- flex: 1 auto;
-}
-
-.c2 {
- background-color: white;
- padding: 1rem;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-align-content: stretch;
- -ms-flex-line-pack: stretch;
- align-content: stretch;
- -webkit-box-pack: justify;
- -webkit-justify-content: space-between;
- -ms-flex-pack: justify;
- justify-content: space-between;
- -webkit-flex-direction: row;
- -ms-flex-direction: row;
- flex-direction: row;
- border-radius: 3rem;
- border-width: 0;
- border-style: solid;
- box-shadow: 0px 4px 5px 0 rgba(0,0,0,0.2),0 3px 14px 3px rgba(0,0,0,0.12),0 8px 10px 1px rgba(0,0,0,0.14);
+ -webkit-transform: rotate(0deg);
+ -ms-transform: rotate(0deg);
+ transform: rotate(0deg);
}
-.c2 > * {
- -webkit-flex: 1 auto;
- -ms-flex: 1 auto;
- flex: 1 auto;
+.c0 {
+ position: relative;
}
<div
@@ -9559,167 +9425,98 @@ exports[`Storyshots Atoms/Layout Bubble 1`] = `
>
<div
className="c0"
- style={
- Object {
- "backgroundColor": "seashell",
- }
- }
>
- Ciao
<div
className="c1"
>
- Hola
- <div
- className="c1"
+ <svg
+ height="200px"
+ version="1.1"
+ viewBox="0 0 1000 1000"
+ width="200px"
+ xmlns="http://www.w3.org/2000/svg"
>
- ?Como està s?
- <div
- className="c1"
+ <title>
+ Atoms/Icon/Pin
+ </title>
+ <defs>
+ <filter
+ filterUnits="objectBoundingBox"
+ height="106.9%"
+ id="filter-1"
+ width="108.5%"
+ x="-4.2%"
+ y="-2.5%"
+ >
+ <feMerge>
+ <feMergeNode
+ in="SourceGraphic"
+ />
+ </feMerge>
+ </filter>
+ </defs>
+ <g
+ fill="none"
+ fillRule="evenodd"
+ id="Symbols"
+ stroke="none"
+ strokeWidth="1"
>
- Mi amor
- <div
- className="c0"
+ <g
+ id="Atoms/Icon/Pin"
>
- Bueno
- <div
- className="c1"
- style={
- Object {
- "backgroundColor": "lightgreen",
- "color": "white",
- }
- }
+ <g
+ id="Group"
+ transform="translate(1.000000, 0.000000)"
>
- What?
- <div
- className="c2"
+ <g
+ fill="#1CB569"
+ fillRule="nonzero"
+ filter="url(#filter-1)"
+ id="Atom-Pin"
+ transform="translate(210.000000, 219.000000)"
>
- <div>
- <div
- className="c1"
- style={
- Object {
- "backgroundColor": "#1CB569",
- }
- }
- >
- Sorry, but I don't really speak spanish.
- </div>
- <div
- className="c1"
- style={
- Object {
- "backgroundColor": "#4A90E2",
- }
- }
- >
- Please help me and translate with
- </div>
- </div>
- <a
- href="https://linguala.com"
- >
- <button
- className="c3"
- size={5}
- style={
- Object {
- "color": "yellow",
- "height": "calc(100% - 2em)",
- }
- }
- width="240px"
- >
- <div
- className="c1"
- style={
- Object {
- "backgroundColor": "#BB2D00",
- }
- }
- >
- Linguala
- </div>
- </button>
- </a>
- </div>
- </div>
- </div>
- </div>
- </div>
+ <path
+ d="M577.143802,255.995818 C556.506373,107.376739 437.401481,0 289.22782,0 C141.05416,0 23.9375802,107.286714 3.17831886,255.995818 C-35.3577758,532.049383 289.257577,697.727596 289.257577,699.979533 C289.257577,702.23147 613.586498,518.435484 577.143802,255.995818 Z M40,290 C40,152.5 152.5,40 290,40 C427.5,40 540,152.5 540,290 C540,427.5 428.75,540 290,540 C152.5,540 40,427.5 40,290 Z"
+ id="Pin-Main-Shape"
+ />
+ </g>
+ </g>
+ </g>
+ </g>
+ </svg>
</div>
</div>
</div>
</div>
`;
-exports[`Storyshots Atoms/Layout Bubblet 1`] = `
-.c0 {
- background: #1CB569;
- padding-left: 0.5rem;
- padding-bottom: 0;
- padding-bottom: 3em;
+exports[`Storyshots Atoms/Pin Pin/full+border 1`] = `
+.c2 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
- -webkit-align-content: stretch;
- -ms-flex-line-pack: stretch;
- align-content: stretch;
- -webkit-box-pack: justify;
- -webkit-justify-content: space-between;
- -ms-flex-pack: justify;
- justify-content: space-between;
- -webkit-flex-direction: column;
- -ms-flex-direction: column;
- flex-direction: column;
- border-radius: 3rem;
- border-width: 0;
- border-style: solid;
- box-shadow: 0px 4px 5px 0 rgba(0,0,0,0.2),0 3px 14px 3px rgba(0,0,0,0.12),0 8px 10px 1px rgba(0,0,0,0.14);
- margin: 0 0.5rem 0.5rem 0.5rem;
+ -webkit-transform: rotate(0deg);
+ -ms-transform: rotate(0deg);
+ transform: rotate(0deg);
}
-.c0 > * {
- -webkit-flex: 1 auto;
- -ms-flex: 1 auto;
- flex: 1 auto;
+.c1 {
+ position: relative;
}
-.c2 {
- background: #1CB569;
- padding-left: 0.5rem;
- padding-bottom: 0;
+.c0 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
- -webkit-align-content: stretch;
- -ms-flex-line-pack: stretch;
- align-content: stretch;
- -webkit-box-pack: justify;
- -webkit-justify-content: space-between;
- -ms-flex-pack: justify;
- justify-content: space-between;
- -webkit-flex-direction: column;
- -ms-flex-direction: column;
- flex-direction: column;
- border-radius: 3rem;
- border-width: 0;
- border-style: solid;
- box-shadow: 0px 4px 5px 0 rgba(0,0,0,0.2),0 3px 14px 3px rgba(0,0,0,0.12),0 8px 10px 1px rgba(0,0,0,0.14);
- margin: 0 0.5rem 0.5rem 0.5rem;
-}
-
-.c2 > * {
- -webkit-flex: 1 auto;
- -ms-flex: 1 auto;
- flex: 1 auto;
-}
-
-.c1 {
- text-align: center;
+ -webkit-box-pack: space-evenly;
+ -webkit-justify-content: space-evenly;
+ -ms-flex-pack: space-evenly;
+ justify-content: space-evenly;
+ min-width: 300px;
+ width: 90vw;
}
<div
@@ -9747,69 +9544,141 @@ exports[`Storyshots Atoms/Layout Bubblet 1`] = `
<div>
<div
className="c0"
- style={
- Object {
- "backgroundColor": "#1CB569",
- "color": "white",
- "textAligne": "center",
- }
- }
>
- <p
- className="c1"
- >
- This
- </p>
- <p
- className="c1"
- >
- is
- </p>
- <p
- className="c1"
- >
- a
- </p>
- <p
+ <div
className="c1"
>
- column bubblet
- </p>
- <p
+ <div
+ className="c2"
+ >
+ <svg
+ height="100px"
+ version="1.1"
+ viewBox="0 0 1000 1000"
+ width="100px"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path
+ d="M787.143802,465.995818 C766.506373,317.376739 647.401481,210 499.22782,210 C351.05416,210 233.93758,317.286714 213.178319,465.995818 C174.642224,742.049383 499.257577,907.727596 499.257577,909.979533 C499.257577,912.23147 823.586498,728.435484 787.143802,465.995818 Z"
+ fill="#1CB569"
+ />
+ </svg>
+ </div>
+ </div>
+ <div
className="c1"
>
- with double bottom and shadow
- </p>
+ <div
+ className="c2"
+ >
+ <svg
+ height="100px"
+ version="1.1"
+ viewBox="0 0 1000 1000"
+ width="100px"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path
+ d="M502.56508,868.364664 C511.93155,862.588075 523.095822,855.151458 535.04456,846.573064 C568.356448,822.657358 601.727957,794.366431 631.986836,762.739204 C670.449872,722.536816 701.168462,679.73622 721.677407,634.99991 C745.587052,582.845627 754.91721,529.57787 747.526139,475.323915 C729.599303,343.732453 626.596403,250 499.286261,250 C372.372238,250 270.864911,343.231572 252.772718,475.337398 C244.509241,535.675767 254.910456,593.178228 281.38033,648.043223 C303.726517,694.360915 336.875734,737.501264 378.116754,777.203565C406.461936,804.491177 436.782663,828.440662 467.722026,849.417211 C478.177327,856.505791 487.661494,862.556978 497.309147,868.437102C497.961101,868.834461 498.885903,869.394858 499.886582,870 C500.740299,869.484354 501.635452,868.937995 502.56508,868.364664 Z M787.143802,465.995818 C823.586498,728.435484 499.257577,912.23147 499.257577,909.979533 C499.257577,907.727596 174.642224,742.049383 213.178319,465.995818C233.93758,317.286714 351.05416,210 499.22782,210 C647.401481,210 766.506373,317.376739 787.143802,465.995818 Z"
+ fill="#1CB569"
+ />
+ </svg>
+ </div>
+ </div>
</div>
<div
- className="c2"
+ className="c0"
style={
Object {
- "backgroundColor": "#4A90E2",
- "color": "white",
+ "paddingTop": [Function],
}
}
>
- simple Bubblet
+ <span>
+ full
+ </span>
+ <span>
+ border
+ </span>
</div>
</div>
</div>
</div>
`;
-exports[`Storyshots Atoms/Shape Lens Border 1`] = `
+exports[`Storyshots Atoms/Spin Button Linear 1`] = `
.c1 {
+ color: white;
+ background-color: #9B9B9B;
+ -webkit-transition: background-color 0.1s linear;
+ transition: background-color 0.1s linear;
+ font-size: 1rem;
+ padding: 0.5rem;
+ margin: 0.5rem;
+ line-height: 1.5em;
+ box-shadow: none;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ cursor: unset;
+ -webkit-transition: -webkit-transform 0.2s cubic-bezier(0.4,0,0.2,1);
+ -webkit-transition: transform 0.2s cubic-bezier(0.4,0,0.2,1);
+ transition: transform 0.2s cubic-bezier(0.4,0,0.2,1);
+ text-transform: lowercase;
+ border-style: unset;
+ border-radius: 3rem;
+ min-width: 240px;
+ min-height: auto;
+ padding: 0.5rem;
+ min-height: 2.5em;
+}
+
+.c1:active,
+.c1:hover {
+ background-color: #9B9B9B;
+}
+
+.c1::-moz-focus-inner {
+ border: 0;
+}
+
+.c1:focus,
+.c1:active {
+ box-shadow: true;
+ outline: none;
+}
+
+.c0 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
- -webkit-transform: rotate(0deg);
- -ms-transform: rotate(0deg);
- transform: rotate(0deg);
-}
-
-.c0 {
- position: relative;
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ -webkit-flex-direction: column;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ word-wrap: anywhere;
+ height: 100%;
+ width: 100%;
+ margin-left: auto;
+ margin-right: auto;
+ vertical-align: middle;
+ -webkit-animation: iVXCSc;
+ animation: iVXCSc;
+ -webkit-animation-duration: 2s;
+ animation-duration: 2s;
+ -webkit-animation-timing-function: linear;
+ animation-timing-function: linear;
+ -webkit-animation-iteration-count: infinite;
+ animation-iteration-count: infinite;
}
<div
@@ -9837,80 +9706,42 @@ exports[`Storyshots Atoms/Shape Lens Border 1`] = `
<div
className="c0"
>
- <div
+ <button
className="c1"
+ disabled={true}
+ size={12}
+ value="loading..."
+ width="240px"
>
- <svg
- height="200px"
- version="1.1"
- viewBox="0 0 1000 1000"
- width="200px"
- xmlns="http://www.w3.org/2000/svg"
- >
- <title>
- Atoms/Icon/Pin
- </title>
- <defs>
- <filter
- filterUnits="objectBoundingBox"
- height="106.9%"
- id="filter-1"
- width="108.5%"
- x="-4.2%"
- y="-2.5%"
- >
- <feMerge>
- <feMergeNode
- in="SourceGraphic"
- />
- </feMerge>
- </filter>
- </defs>
- <g
- fill="none"
- fillRule="evenodd"
- id="Symbols"
- stroke="none"
- strokeWidth="1"
- >
- <g
- id="Atoms/Icon/Pin"
- >
- <g
- id="Group"
- transform="translate(1.000000, 0.000000)"
- >
- <g
- fill="#1CB569"
- fillRule="nonzero"
- filter="url(#filter-1)"
- id="Atom-Pin"
- transform="translate(210.000000, 219.000000)"
- >
- <path
- d="M577.143802,255.995818 C556.506373,107.376739 437.401481,0 289.22782,0 C141.05416,0 23.9375802,107.286714 3.17831886,255.995818 C-35.3577758,532.049383 289.257577,697.727596 289.257577,699.979533 C289.257577,702.23147 613.586498,518.435484 577.143802,255.995818 Z M40,290 C40,152.5 152.5,40 290,40 C427.5,40 540,152.5 540,290 C540,427.5 428.75,540 290,540 C152.5,540 40,427.5 40,290 Z"
- id="Pin-Main-Shape"
- />
- </g>
- </g>
- </g>
- </g>
- </svg>
- </div>
+ loading...
+ </button>
</div>
</div>
</div>
`;
-exports[`Storyshots Atoms/Shape Pin/full+border 1`] = `
+exports[`Storyshots Atoms/Spin PinShape/reverse 1`] = `
.c2 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
- -webkit-transform: rotate(0deg);
- -ms-transform: rotate(0deg);
- transform: rotate(0deg);
+ -webkit-transform: rotate(-170deg);
+ -ms-transform: rotate(-170deg);
+ transform: rotate(-170deg);
+}
+
+.c3 {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ position: absolute;
+ top: 30.76923076923077%;
+ left: 30.76923076923077%;
+ width: 38.46153846153846px;
+ height: 38.46153846153846px;
+ font-size: 0;
}
.c1 {
@@ -9922,12 +9753,31 @@ exports[`Storyshots Atoms/Shape Pin/full+border 1`] = `
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
- -webkit-box-pack: space-evenly;
- -webkit-justify-content: space-evenly;
- -ms-flex-pack: space-evenly;
- justify-content: space-evenly;
- min-width: 300px;
- width: 90vw;
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ -webkit-flex-direction: column;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ word-wrap: anywhere;
+ height: 100%;
+ width: 100%;
+ margin-left: auto;
+ margin-right: auto;
+ vertical-align: middle;
+ -webkit-animation: fTgkMB;
+ animation: fTgkMB;
+ -webkit-animation-duration: 2s;
+ animation-duration: 2s;
+ -webkit-animation-timing-function: linear;
+ animation-timing-function: linear;
+ -webkit-animation-iteration-count: infinite;
+ animation-iteration-count: infinite;
}
<div
@@ -9952,72 +9802,100 @@ exports[`Storyshots Atoms/Shape Pin/full+border 1`] = `
}
}
>
- <div>
+ <div
+ className="c0"
+ >
<div
- className="c0"
+ className="c1"
>
<div
- className="c1"
+ className="c2"
>
- <div
- className="c2"
+ <svg
+ height="100px"
+ version="1.1"
+ viewBox="0 0 1000 1000"
+ width="100px"
+ xmlns="http://www.w3.org/2000/svg"
>
- <svg
- height="100px"
- version="1.1"
- viewBox="0 0 1000 1000"
- width="100px"
- xmlns="http://www.w3.org/2000/svg"
- >
- <path
- d="M787.143802,465.995818 C766.506373,317.376739 647.401481,210 499.22782,210 C351.05416,210 233.93758,317.286714 213.178319,465.995818 C174.642224,742.049383 499.257577,907.727596 499.257577,909.979533 C499.257577,912.23147 823.586498,728.435484 787.143802,465.995818 Z"
- fill="#1CB569"
- />
- </svg>
- </div>
+ <path
+ d="M502.56508,868.364664 C511.93155,862.588075 523.095822,855.151458 535.04456,846.573064 C568.356448,822.657358 601.727957,794.366431 631.986836,762.739204 C670.449872,722.536816 701.168462,679.73622 721.677407,634.99991 C745.587052,582.845627 754.91721,529.57787 747.526139,475.323915 C729.599303,343.732453 626.596403,250 499.286261,250 C372.372238,250 270.864911,343.231572 252.772718,475.337398 C244.509241,535.675767 254.910456,593.178228 281.38033,648.043223 C303.726517,694.360915 336.875734,737.501264 378.116754,777.203565C406.461936,804.491177 436.782663,828.440662 467.722026,849.417211 C478.177327,856.505791 487.661494,862.556978 497.309147,868.437102C497.961101,868.834461 498.885903,869.394858 499.886582,870 C500.740299,869.484354 501.635452,868.937995 502.56508,868.364664 Z M787.143802,465.995818 C823.586498,728.435484 499.257577,912.23147 499.257577,909.979533 C499.257577,907.727596 174.642224,742.049383 213.178319,465.995818C233.93758,317.286714 351.05416,210 499.22782,210 C647.401481,210 766.506373,317.376739 787.143802,465.995818 Z"
+ fill="#1CB569"
+ />
+ </svg>
</div>
<div
- className="c1"
+ className="c3"
+ size={5}
>
- <div
- className="c2"
+ <svg
+ alt="Time Icon for loading indication"
+ aria-label="Time Icon for loading indication"
+ role="img"
+ style={
+ Object {
+ "width": "38.46153846153846px",
+ }
+ }
+ viewBox="0 0 90 90"
>
- <svg
- height="100px"
- version="1.1"
- viewBox="0 0 1000 1000"
- width="100px"
- xmlns="http://www.w3.org/2000/svg"
- >
+ <defs>
<path
- d="M502.56508,868.364664 C511.93155,862.588075 523.095822,855.151458 535.04456,846.573064 C568.356448,822.657358 601.727957,794.366431 631.986836,762.739204 C670.449872,722.536816 701.168462,679.73622 721.677407,634.99991 C745.587052,582.845627 754.91721,529.57787 747.526139,475.323915 C729.599303,343.732453 626.596403,250 499.286261,250 C372.372238,250 270.864911,343.231572 252.772718,475.337398 C244.509241,535.675767 254.910456,593.178228 281.38033,648.043223 C303.726517,694.360915 336.875734,737.501264 378.116754,777.203565C406.461936,804.491177 436.782663,828.440662 467.722026,849.417211 C478.177327,856.505791 487.661494,862.556978 497.309147,868.437102C497.961101,868.834461 498.885903,869.394858 499.886582,870 C500.740299,869.484354 501.635452,868.937995 502.56508,868.364664 Z M787.143802,465.995818 C823.586498,728.435484 499.257577,912.23147 499.257577,909.979533 C499.257577,907.727596 174.642224,742.049383 213.178319,465.995818C233.93758,317.286714 351.05416,210 499.22782,210 C647.401481,210 766.506373,317.376739 787.143802,465.995818 Z"
+ d="M0 0h90v90H0z"
+ id="Time_svg__a"
+ />
+ </defs>
+ <g
+ fill="none"
+ fillRule="evenodd"
+ >
+ <mask
+ fill="#fff"
+ id="Time_svg__b"
+ >
+ <use
+ xlinkHref="#Time_svg__a"
+ />
+ </mask>
+ <path
+ d="M45 88.2C21.141 88.2 1.8 68.859 1.8 45S21.141 1.8 45 1.8 88.2 21.141 88.2 45 68.859 88.2 45 88.2z"
fill="#1CB569"
+ fillRule="nonzero"
+ mask="url(#Time_svg__b)"
/>
- </svg>
- </div>
+ <g
+ fill="#FFF"
+ fillRule="nonzero"
+ stroke="#FFF"
+ >
+ <path
+ d="M70.813 21.375h6.124a1.313 1.313 0 0 0 0-2.625h-8.75c-.724 0-1.312.588-1.312 1.313v8.75a1.313 1.313 0 0 0 2.625 0v-4.98A32.043 32.043 0 0 1 77.375 45c0 17.88-14.495 32.375-32.375 32.375-17.88 0-32.375-14.495-32.375-32.375 0-17.88 14.495-32.375 32.375-32.375A1.313 1.313 0 0 0 45 10c-19.33 0-35 15.67-35 35s15.67 35 35 35 35-15.67 35-35a34.641 34.641 0 0 0-9.188-23.625z"
+ />
+ <path
+ d="M21.375 45.438c0 13.289 10.773 24.062 24.063 24.062C58.727 69.5 69.5 58.727 69.5 45.437c0-13.289-10.773-24.062-24.063-24.062-13.283.014-24.048 10.78-24.062 24.063zm45.5 0c0 11.84-9.598 21.437-21.438 21.437C33.597 66.875 24 57.277 24 45.437 24 33.597 33.598 24 45.438 24c11.833.014 21.423 9.604 21.437 21.438z"
+ />
+ <path
+ d="M45 34.563v14.874c0 .531.3 1.01.76 1.212.46.203.988.09 1.34-.284L57.762 38.99a1.376 1.376 0 0 0-.03-1.823 1.176 1.176 0 0 0-1.709-.032l-8.562 9.135V34.562c0-.724-.551-1.312-1.23-1.312-.68 0-1.23.588-1.23 1.312z"
+ />
+ </g>
+ </g>
+ </svg>
</div>
</div>
- <div
- className="c0"
- style={
- Object {
- "paddingTop": [Function],
- }
- }
- >
- <span>
- full
- </span>
- <span>
- border
- </span>
- </div>
</div>
</div>
</div>
`;
-exports[`Storyshots Atoms/Spin Bubble/linear 1`] = `
+exports[`Storyshots Atoms/Spin nested Text/wobbly+reverse+fast 1`] = `
+.c2 {
+ font-size: 0.6499999999999999rem;
+ margin: 0.5rem auto;
+ text-align: left;
+ max-width: 240px;
+ line-height: 1.55em;
+}
+
.c0 {
display: -webkit-box;
display: -webkit-flex;
@@ -10040,10 +9918,10 @@ exports[`Storyshots Atoms/Spin Bubble/linear 1`] = `
margin-left: auto;
margin-right: auto;
vertical-align: middle;
- -webkit-animation: iVXCSc;
- animation: iVXCSc;
- -webkit-animation-duration: 2s;
- animation-duration: 2s;
+ -webkit-animation: fTgkMB;
+ animation: fTgkMB;
+ -webkit-animation-duration: 0.8s;
+ animation-duration: 0.8s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
@@ -10051,8 +9929,6 @@ exports[`Storyshots Atoms/Spin Bubble/linear 1`] = `
}
.c1 {
- background-color: white;
- padding: 1rem;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
@@ -10061,26 +9937,27 @@ exports[`Storyshots Atoms/Spin Bubble/linear 1`] = `
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
- -webkit-align-content: stretch;
- -ms-flex-line-pack: stretch;
- align-content: stretch;
- -webkit-box-pack: justify;
- -webkit-justify-content: space-between;
- -ms-flex-pack: justify;
- justify-content: space-between;
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ -ms-flex-pack: center;
+ justify-content: center;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
- border-radius: 3rem;
- border-width: 0;
- border-style: solid;
- box-shadow: 0px 4px 5px 0 rgba(0,0,0,0.2),0 3px 14px 3px rgba(0,0,0,0.12),0 8px 10px 1px rgba(0,0,0,0.14);
-}
-
-.c1 > * {
- -webkit-flex: 1 auto;
- -ms-flex: 1 auto;
- flex: 1 auto;
+ word-wrap: anywhere;
+ height: 100%;
+ width: 100%;
+ margin-left: auto;
+ margin-right: auto;
+ vertical-align: middle;
+ -webkit-animation: iVXCSc;
+ animation: iVXCSc;
+ -webkit-animation-duration: 0.8s;
+ animation-duration: 0.8s;
+ -webkit-animation-timing-function: cubic-bezier(0.68,-0.55,0.27,1.55);
+ animation-timing-function: cubic-bezier(0.68,-0.55,0.27,1.55);
+ -webkit-animation-iteration-count: infinite;
+ animation-iteration-count: infinite;
}
<div
@@ -10107,81 +9984,44 @@ exports[`Storyshots Atoms/Spin Bubble/linear 1`] = `
>
<div
className="c0"
+ style={
+ Object {
+ "backgroundColor": "white",
+ "border": "1px solid gray",
+ "borderRadius": "50%",
+ "height": "2rem",
+ "width": "2rem",
+ }
+ }
>
<div
className="c1"
>
- loading...
+ <p
+ className="c2"
+ size={3}
+ >
+ <span
+ aria-label="loading"
+ role="img"
+ >
+ 🔧
+ </span>
+ </p>
</div>
</div>
</div>
</div>
`;
-exports[`Storyshots Atoms/Spin Bubble/wobbly 1`] = `
+exports[`Storyshots Atoms/Text Link 1`] = `
.c0 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-box-pack: center;
- -webkit-justify-content: center;
- -ms-flex-pack: center;
- justify-content: center;
- -webkit-flex-direction: column;
- -ms-flex-direction: column;
- flex-direction: column;
- word-wrap: anywhere;
- height: 100%;
- width: 100%;
- margin-left: auto;
- margin-right: auto;
- vertical-align: middle;
- -webkit-animation: iVXCSc;
- animation: iVXCSc;
- -webkit-animation-duration: 2s;
- animation-duration: 2s;
- -webkit-animation-timing-function: cubic-bezier(0.68,-0.55,0.27,1.55);
- animation-timing-function: cubic-bezier(0.68,-0.55,0.27,1.55);
- -webkit-animation-iteration-count: infinite;
- animation-iteration-count: infinite;
-}
-
-.c1 {
- background-color: white;
- padding: 1rem;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-align-content: stretch;
- -ms-flex-line-pack: stretch;
- align-content: stretch;
- -webkit-box-pack: justify;
- -webkit-justify-content: space-between;
- -ms-flex-pack: justify;
- justify-content: space-between;
- -webkit-flex-direction: column;
- -ms-flex-direction: column;
- flex-direction: column;
- border-radius: 3rem;
- border-width: 0;
- border-style: solid;
- box-shadow: 0px 4px 5px 0 rgba(0,0,0,0.2),0 3px 14px 3px rgba(0,0,0,0.12),0 8px 10px 1px rgba(0,0,0,0.14);
+ -webkit-text-decoration: none;
+ text-decoration: none;
}
-.c1 > * {
- -webkit-flex: 1 auto;
- -ms-flex: 1 auto;
- flex: 1 auto;
+color:#1CB569 .c0:hover {
+ color: #4A90E2;
}
<div
@@ -10206,92 +10046,20 @@ exports[`Storyshots Atoms/Spin Bubble/wobbly 1`] = `
}
}
>
- <div
+ <a
className="c0"
+ href="//linguala.com"
>
- <div
- className="c1"
- >
- loading...
- </div>
- </div>
+ willkommen bei linguala
+ </a>
</div>
</div>
`;
-exports[`Storyshots Atoms/Spin Button/linear 1`] = `
-.c1 {
- color: white;
- background-color: #9B9B9B;
- -webkit-transition: background-color 0.1s linear;
- transition: background-color 0.1s linear;
- font-size: 1rem;
- padding: 0.5rem;
- margin: 0.5rem;
- line-height: 1.5em;
- box-shadow: none;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- cursor: unset;
- -webkit-transition: -webkit-transform 0.2s cubic-bezier(0.4,0,0.2,1);
- -webkit-transition: transform 0.2s cubic-bezier(0.4,0,0.2,1);
- transition: transform 0.2s cubic-bezier(0.4,0,0.2,1);
- text-transform: lowercase;
- border-style: unset;
- border-radius: 3rem;
- min-width: 240px;
- min-height: auto;
- padding: 0.5rem;
- min-height: 2.5em;
-}
-
-.c1:active,
-.c1:hover {
- background-color: #9B9B9B;
-}
-
-.c1::-moz-focus-inner {
- border: 0;
-}
-
-.c1:focus,
-.c1:active {
- box-shadow: true;
- outline: none;
-}
-
+exports[`Storyshots Atoms/Text Subtitle 1`] = `
.c0 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-box-pack: center;
- -webkit-justify-content: center;
- -ms-flex-pack: center;
- justify-content: center;
- -webkit-flex-direction: column;
- -ms-flex-direction: column;
- flex-direction: column;
- word-wrap: anywhere;
- height: 100%;
- width: 100%;
- margin-left: auto;
- margin-right: auto;
- vertical-align: middle;
- -webkit-animation: iVXCSc;
- animation: iVXCSc;
- -webkit-animation-duration: 2s;
- animation-duration: 2s;
- -webkit-animation-timing-function: linear;
- animation-timing-function: linear;
- -webkit-animation-iteration-count: infinite;
- animation-iteration-count: infinite;
+ font-family: Libre Baskerville,Helvetica,Arial,serif;
+ font-weight: lighter;
}
<div
@@ -10316,81 +10084,22 @@ exports[`Storyshots Atoms/Spin Button/linear 1`] = `
}
}
>
- <div
+ <p
className="c0"
>
- <button
- className="c1"
- disabled={true}
- size={12}
- value="loading..."
- width="240px"
- >
- loading...
- </button>
- </div>
+ der neutraler marktplatz für sprachservices - was möchten sie als nächstes machen?
+ </p>
</div>
</div>
`;
-exports[`Storyshots Atoms/Spin PinShape/reverse 1`] = `
-.c2 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-transform: rotate(-170deg);
- -ms-transform: rotate(-170deg);
- transform: rotate(-170deg);
-}
-
-.c3 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- position: absolute;
- top: 30.76923076923077%;
- left: 30.76923076923077%;
- width: 38.46153846153846px;
- height: 38.46153846153846px;
- font-size: 0;
-}
-
-.c1 {
- position: relative;
-}
-
+exports[`Storyshots Atoms/Text Text 1`] = `
.c0 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-box-pack: center;
- -webkit-justify-content: center;
- -ms-flex-pack: center;
- justify-content: center;
- -webkit-flex-direction: column;
- -ms-flex-direction: column;
- flex-direction: column;
- word-wrap: anywhere;
- height: 100%;
- width: 100%;
- margin-left: auto;
- margin-right: auto;
- vertical-align: middle;
- -webkit-animation: fTgkMB;
- animation: fTgkMB;
- -webkit-animation-duration: 2s;
- animation-duration: 2s;
- -webkit-animation-timing-function: linear;
- animation-timing-function: linear;
- -webkit-animation-iteration-count: infinite;
- animation-iteration-count: infinite;
+ font-size: 1rem;
+ margin: 0.5rem auto;
+ text-align: left;
+ max-width: 20em;
+ line-height: 1.55em;
}
<div
@@ -10415,133 +10124,28 @@ exports[`Storyshots Atoms/Spin PinShape/reverse 1`] = `
}
}
>
- <div
+ <p
className="c0"
>
- <div
- className="c1"
- >
- <div
- className="c2"
- >
- <svg
- height="100px"
- version="1.1"
- viewBox="0 0 1000 1000"
- width="100px"
- xmlns="http://www.w3.org/2000/svg"
- >
- <path
- d="M502.56508,868.364664 C511.93155,862.588075 523.095822,855.151458 535.04456,846.573064 C568.356448,822.657358 601.727957,794.366431 631.986836,762.739204 C670.449872,722.536816 701.168462,679.73622 721.677407,634.99991 C745.587052,582.845627 754.91721,529.57787 747.526139,475.323915 C729.599303,343.732453 626.596403,250 499.286261,250 C372.372238,250 270.864911,343.231572 252.772718,475.337398 C244.509241,535.675767 254.910456,593.178228 281.38033,648.043223 C303.726517,694.360915 336.875734,737.501264 378.116754,777.203565C406.461936,804.491177 436.782663,828.440662 467.722026,849.417211 C478.177327,856.505791 487.661494,862.556978 497.309147,868.437102C497.961101,868.834461 498.885903,869.394858 499.886582,870 C500.740299,869.484354 501.635452,868.937995 502.56508,868.364664 Z M787.143802,465.995818 C823.586498,728.435484 499.257577,912.23147 499.257577,909.979533 C499.257577,907.727596 174.642224,742.049383 213.178319,465.995818C233.93758,317.286714 351.05416,210 499.22782,210 C647.401481,210 766.506373,317.376739 787.143802,465.995818 Z"
- fill="#1CB569"
- />
- </svg>
- </div>
- <div
- className="c3"
- size={5}
- >
- <svg
- alt="Time Icon for loading indication"
- aria-label="Time Icon for loading indication"
- role="img"
- style={
- Object {
- "width": "38.46153846153846px",
- }
- }
- viewBox="0 0 90 90"
- >
- <defs>
- <path
- d="M0 0h90v90H0z"
- id="Time_svg__a"
- />
- </defs>
- <g
- fill="none"
- fillRule="evenodd"
- >
- <mask
- fill="#fff"
- id="Time_svg__b"
- >
- <use
- xlinkHref="#Time_svg__a"
- />
- </mask>
- <path
- d="M45 88.2C21.141 88.2 1.8 68.859 1.8 45S21.141 1.8 45 1.8 88.2 21.141 88.2 45 68.859 88.2 45 88.2z"
- fill="#1CB569"
- fillRule="nonzero"
- mask="url(#Time_svg__b)"
- />
- <g
- fill="#FFF"
- fillRule="nonzero"
- stroke="#FFF"
- >
- <path
- d="M70.813 21.375h6.124a1.313 1.313 0 0 0 0-2.625h-8.75c-.724 0-1.312.588-1.312 1.313v8.75a1.313 1.313 0 0 0 2.625 0v-4.98A32.043 32.043 0 0 1 77.375 45c0 17.88-14.495 32.375-32.375 32.375-17.88 0-32.375-14.495-32.375-32.375 0-17.88 14.495-32.375 32.375-32.375A1.313 1.313 0 0 0 45 10c-19.33 0-35 15.67-35 35s15.67 35 35 35 35-15.67 35-35a34.641 34.641 0 0 0-9.188-23.625z"
- />
- <path
- d="M21.375 45.438c0 13.289 10.773 24.062 24.063 24.062C58.727 69.5 69.5 58.727 69.5 45.437c0-13.289-10.773-24.062-24.063-24.062-13.283.014-24.048 10.78-24.062 24.063zm45.5 0c0 11.84-9.598 21.437-21.438 21.437C33.597 66.875 24 57.277 24 45.437 24 33.597 33.598 24 45.438 24c11.833.014 21.423 9.604 21.437 21.438z"
- />
- <path
- d="M45 34.563v14.874c0 .531.3 1.01.76 1.212.46.203.988.09 1.34-.284L57.762 38.99a1.376 1.376 0 0 0-.03-1.823 1.176 1.176 0 0 0-1.709-.032l-8.562 9.135V34.562c0-.724-.551-1.312-1.23-1.312-.68 0-1.23.588-1.23 1.312z"
- />
- </g>
- </g>
- </svg>
- </div>
- </div>
- </div>
+ Dank Linguala werden Sprachbarrieren überwunden. Ob Einzelpersonen, Organisationen oder Unternehmen - Sie profitieren von Linguala. Kreiren Sie ein Profil um Favoriten zu speichern und browsen Sie den Linguala Marktplatz um Anbieter von Sprachservices zu finden.
+ </p>
</div>
</div>
`;
-exports[`Storyshots Atoms/Spin nested Text/wobbly+reverse+fast 1`] = `
-.c2 {
- font-size: 0.6499999999999999rem;
- margin: 0.5rem auto;
- text-align: left;
- max-width: 240px;
- line-height: 1.55em;
+exports[`Storyshots Atoms/Text Text/size 1`] = `
+.c1 {
+ -webkit-text-decoration: none;
+ text-decoration: none;
}
-.c0 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-box-pack: center;
- -webkit-justify-content: center;
- -ms-flex-pack: center;
- justify-content: center;
- -webkit-flex-direction: column;
- -ms-flex-direction: column;
- flex-direction: column;
- word-wrap: anywhere;
- height: 100%;
- width: 100%;
- margin-left: auto;
- margin-right: auto;
- vertical-align: middle;
- -webkit-animation: fTgkMB;
- animation: fTgkMB;
- -webkit-animation-duration: 0.8s;
- animation-duration: 0.8s;
- -webkit-animation-timing-function: linear;
- animation-timing-function: linear;
- -webkit-animation-iteration-count: infinite;
- animation-iteration-count: infinite;
+color:#1CB569 .c1:hover {
+ color: #4A90E2;
}
-.c1 {
+.c0 {
+ font-size: 0.44999999999999996rem;
+ margin: 0.5rem auto;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
@@ -10558,19 +10162,9 @@ exports[`Storyshots Atoms/Spin nested Text/wobbly+reverse+fast 1`] = `
-ms-flex-direction: column;
flex-direction: column;
word-wrap: anywhere;
- height: 100%;
- width: 100%;
- margin-left: auto;
- margin-right: auto;
- vertical-align: middle;
- -webkit-animation: iVXCSc;
- animation: iVXCSc;
- -webkit-animation-duration: 0.8s;
- animation-duration: 0.8s;
- -webkit-animation-timing-function: cubic-bezier(0.68,-0.55,0.27,1.55);
- animation-timing-function: cubic-bezier(0.68,-0.55,0.27,1.55);
- -webkit-animation-iteration-count: infinite;
- animation-iteration-count: infinite;
+ text-align: left;
+ max-width: 240px;
+ line-height: 1.55em;
}
<div
@@ -10595,46 +10189,40 @@ exports[`Storyshots Atoms/Spin nested Text/wobbly+reverse+fast 1`] = `
}
}
>
- <div
+ <p
className="c0"
- style={
- Object {
- "backgroundColor": "white",
- "border": "1px solid gray",
- "borderRadius": "50%",
- "height": "2rem",
- "width": "2rem",
- }
- }
+ size={2}
>
- <div
- className="c1"
- >
- <p
- className="c2"
- size={3}
+ <p>
+ Dank
+ <a
+ className="c1"
+ href="//linguala.com"
>
- <span
- aria-label="loading"
- role="img"
- >
- 🔧
- </span>
- </p>
- </div>
- </div>
+ Linguala
+ </a>
+ werden Sprachbarrieren überwunden. Ob Einzelpersonen, Organisationen oder Unternehmen - Sie profitieren von Linguala. Kreiren Sie ein Profil um Favoriten zu speichern und browsen Sie den Linguala
+ <a
+ className="c1"
+ href="//linguala.lng.li/marketplace"
+ >
+ Marktplatz
+ </a>
+ um Anbieter von Sprachservices zu finden.
+ </p>
+ <p>
+ Dieser Text benötigt einen flex-basierten Container zur Zentrierung.
+ </p>
+ </p>
</div>
</div>
`;
-exports[`Storyshots Atoms/Text Link 1`] = `
+exports[`Storyshots Atoms/Text Title 1`] = `
.c0 {
- -webkit-text-decoration: none;
- text-decoration: none;
-}
-
-color:#1CB569 .c0:hover {
- color: #4A90E2;
+ font-size: 3rem;
+ font-family: Libre Baskerville,Helvetica,Arial,serif;
+ font-weight: lighter;
}
<div
@@ -10659,60 +10247,41 @@ color:#1CB569 .c0:hover {
}
}
>
- <a
+ <h1
className="c0"
- href="//linguala.com"
>
willkommen bei linguala
- </a>
+ </h1>
</div>
</div>
`;
-exports[`Storyshots Atoms/Text Subtitle 1`] = `
-.c0 {
- font-family: Libre Baskerville,Helvetica,Arial,serif;
- font-weight: lighter;
+exports[`Storyshots Molecules/Lens Icon + Lens Composition 1`] = `
+.c1 {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-transform: rotate(0deg);
+ -ms-transform: rotate(0deg);
+ transform: rotate(0deg);
}
-<div
- style={
- Object {
- "alignItems": "center",
- "bottom": "0",
- "display": "flex",
- "left": "0",
- "overflow": "auto",
- "position": "fixed",
- "right": "0",
- "top": "0",
- }
- }
->
- <div
- style={
- Object {
- "margin": "auto",
- "maxHeight": "100%",
- }
- }
- >
- <p
- className="c0"
- >
- der neutraler marktplatz für sprachservices - was möchten sie als nächstes machen?
- </p>
- </div>
-</div>
-`;
+.c2 {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ position: absolute;
+ top: 30.76923076923077%;
+ left: 30.76923076923077%;
+ width: 15.384615384615383px;
+ height: 15.384615384615383px;
+ font-size: 0;
+}
-exports[`Storyshots Atoms/Text Text 1`] = `
.c0 {
- font-size: 1rem;
- margin: 0.5rem auto;
- text-align: left;
- max-width: 20em;
- line-height: 1.55em;
+ position: relative;
}
<div
@@ -10737,80 +10306,124 @@ exports[`Storyshots Atoms/Text Text 1`] = `
}
}
>
- <p
+ <div
className="c0"
>
- Dank Linguala werden Sprachbarrieren überwunden. Ob Einzelpersonen, Organisationen oder Unternehmen - Sie profitieren von Linguala. Kreiren Sie ein Profil um Favoriten zu speichern und browsen Sie den Linguala Marktplatz um Anbieter von Sprachservices zu finden.
- </p>
+ <div
+ className="c1"
+ >
+ <svg
+ height="40px"
+ version="1.1"
+ viewBox="0 0 1000 1000"
+ width="40px"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <title>
+ Atoms/Icon/Pin
+ </title>
+ <defs>
+ <filter
+ filterUnits="objectBoundingBox"
+ height="106.9%"
+ id="filter-1"
+ width="108.5%"
+ x="-4.2%"
+ y="-2.5%"
+ >
+ <feMerge>
+ <feMergeNode
+ in="SourceGraphic"
+ />
+ </feMerge>
+ </filter>
+ </defs>
+ <g
+ fill="none"
+ fillRule="evenodd"
+ id="Symbols"
+ stroke="none"
+ strokeWidth="1"
+ >
+ <g
+ id="Atoms/Icon/Pin"
+ >
+ <g
+ id="Group"
+ transform="translate(1.000000, 0.000000)"
+ >
+ <g
+ fill="#1CB569"
+ fillRule="nonzero"
+ filter="url(#filter-1)"
+ id="Atom-Pin"
+ transform="translate(210.000000, 219.000000)"
+ >
+ <path
+ d="M577.143802,255.995818 C556.506373,107.376739 437.401481,0 289.22782,0 C141.05416,0 23.9375802,107.286714 3.17831886,255.995818 C-35.3577758,532.049383 289.257577,697.727596 289.257577,699.979533 C289.257577,702.23147 613.586498,518.435484 577.143802,255.995818 Z M40,290 C40,152.5 152.5,40 290,40 C427.5,40 540,152.5 540,290 C540,427.5 428.75,540 290,540 C152.5,540 40,427.5 40,290 Z"
+ id="Pin-Main-Shape"
+ />
+ </g>
+ </g>
+ </g>
+ </g>
+ </svg>
+ </div>
+ <div
+ className="c2"
+ size={2}
+ >
+ <svg
+ alt="Money"
+ aria-label="Money"
+ fill="none"
+ role="img"
+ style={
+ Object {
+ "width": "15.384615384615383px",
+ }
+ }
+ viewBox="0 0 100 100"
+ >
+ <path
+ clipRule="evenodd"
+ d="M100 50c0 27.614-22.386 50-50 50S0 77.614 0 50 22.386 0 50 0s50 22.386 50 50zM76.86 35.346c4.239 1.062 6.359 2.455 6.462 4.237h.011v7.288c-.005 1.961-2.51 3.5-6.25 4.65v6.808c0 .324-.072.637-.203.938 2.15.89 3.239 1.956 3.312 3.233h.016v7.287c-.009 3.466-7.809 5.618-16.477 6.622l-.064.016a.46.46 0 0 1-.125.023c-.01 0-.02-.003-.029-.005-.009-.003-.018-.005-.028-.005-1.67.19-3.368.335-5.048.44a.24.24 0 0 0-.047.01c-.018.006-.037.011-.057.011a.096.096 0 0 1-.028-.006c-.008-.002-.017-.005-.026-.005-2.133.13-4.232.195-6.196.195-1.963 0-4.062-.065-6.195-.195-.01.001-.017.004-.026.006a.092.092 0 0 1-.029.006c-.02 0-.04-.005-.059-.01a.282.282 0 0 0-.044-.01c-1.68-.106-3.378-.253-5.049-.441a.082.082 0 0 0-.013.002l-.014.003c-.01.003-.019.006-.029.006a.46.46 0 0 1-.125-.023.803.803 0 0 0-.065-.016c-8.667-1.004-16.468-3.155-16.477-6.62v-7.29h.016c.014-.22.061-.436.139-.648-2.034-.974-3.276-2.143-3.28-3.52v-7.291h.01c.102-1.754 2.147-3.126 6.24-4.18v-7.279h.016c.01-.179.042-.355.094-.528-3.8-1.153-6.355-2.702-6.36-4.681v-7.29h.018c.373-6.072 25.25-6.25 28.107-6.25 2.858 0 27.735.178 28.108 6.25h.017v7.287a2.348 2.348 0 0 1-.224.975zm-2.328 23.633l.356-.311a.663.663 0 0 0 .112-.34v-4.311c-.832.524-1.886 1.002-3.125 1.433v4.967c1.199-.47 2.11-.956 2.657-1.438zm-23.249 4.536l-.152.003c-.309.006-.624.008-.939.01l-.191.002v-5.203c.287-.003.573-.007.86-.012l.165-.003c1.049-.02 2.098-.053 3.142-.1v5.2a91.817 91.817 0 0 1-2.885.102zm-5.666-.026c.472.014.947.026 1.424.034.059 0 .117.002.176.004l.095.002c.12.002.242.003.362.003l.243.002v-5.206a117.19 117.19 0 0 1-.86-.012l-.164-.004a108.52 108.52 0 0 1-3.142-.1v5.2c.56.028 1.123.052 1.69.07l.176.007zm-17.391-2.341a3.728 3.728 0 0 0-.101-.03v-5.032c.973.263 2.019.503 3.125.72v5.085a48.118 48.118 0 0 1-2.642-.636l-.17-.047-.212-.06zm22.816 8.639a123.134 123.134 0 0 1-1.025-.015 108.867 108.867 0 0 1-3.142-.1v5.2c1.337.067 2.727.108 4.167.122v-5.207zm3.108-.016a116.17 116.17 0 0 0 3.142-.1v5.2c-1.338.067-2.727.108-4.167.122v-5.208a117.27 117.27 0 0 0 1.025-.014zm8.35 4.702V69.3a100.47 100.47 0 0 1-3.125.252v5.195a90.865 90.865 0 0 0 3.125-.274zm2.083-5.398a76.806 76.806 0 0 0 3.125-.44v5.115a72.57 72.57 0 0 1-3.125.477v-5.152zm8.334-1.531a46.58 46.58 0 0 1-3.125.72v5.084a45.35 45.35 0 0 0 3.125-.772v-5.032zm-38.542.72v5.084a45.322 45.322 0 0 1-3.125-.772v-5.032c.973.262 2.019.503 3.125.72zm5.208.812a76.858 76.858 0 0 1-3.125-.44v5.115c.982.173 2.024.332 3.125.477v-5.152zm2.084.224c1.025.099 2.068.183 3.125.253v5.195a90.621 90.621 0 0 1-3.125-.274V69.3zm-2.901-6.261l.316.032c.845.082 1.71.153 2.585.215v-5.19c-1.057-.07-2.1-.154-3.125-.253v5.172l.224.023zm-2.308-5.422v5.152a72.466 72.466 0 0 1-3.125-.477v-5.115c1.009.164 2.051.312 3.125.44zM56.25 63.29a122.973 122.973 0 0 0 1.147-.089 85.074 85.074 0 0 0 1.978-.186v-5.173c-1.025.1-2.069.183-3.125.253v5.195zm5.208-.521v-5.152a76.982 76.982 0 0 0 3.125-.44v5.115c-.98.173-2.024.333-3.125.477zm8.334-6.684a46.58 46.58 0 0 1-3.125.72v5.085a45.409 45.409 0 0 0 3.125-.772v-5.033zm-17.37-4.038c-.783-.02-1.55-.05-2.301-.087l-.067-.003-.054-.002v-5.2c1.044.048 2.093.08 3.142.1l.164.002c.287.005.573.01.86.013v5.2l-.38-.003a78.873 78.873 0 0 1-1.134-.015l-.23-.005zM28.125 32.128v5.032a42.262 42.262 0 0 0 2.74.691l.244.052.141.03v-5.085a46.552 46.552 0 0 1-3.125-.72zm18.932 2.23c.287.005.573.009.86.012v5.2c-1.402-.013-2.796-.05-4.167-.118v-5.197c1.044.05 2.093.081 3.142.1l.165.002zm7.11-.104c-1.044.048-2.093.08-3.142.1l-.166.003c-.286.005-.573.01-.859.013v5.203l.377-.004h.004c.25-.002.5-.004.745-.009l.338-.007c.721-.017 1.434-.04 2.133-.07l.045-.003.264-.014.26-.015v-5.197zm20.594.623l-.029-.006-.379.295c-.55.428-1.395.861-2.478 1.28V31.49c1.239-.432 2.293-.91 3.125-1.434v4.31c0 .159-.083.33-.239.51zm-13.303-1.219v5.146a70 70 0 0 0 3.125-.479v-5.106c-1.008.163-2.05.31-3.125.44zm5.209 4.266v-5.076a46.58 46.58 0 0 0 3.125-.72v5.021c-.934.272-1.985.531-3.125.775zm-7.292 1.126v-5.167a103.61 103.61 0 0 1-3.125.253v5.19a92.876 92.876 0 0 0 3.125-.276zm-20.833.002v-5.169c1.025.1 2.068.184 3.125.253v5.186a94.563 94.563 0 0 1-3.125-.27zm-2.084-.247v-5.147a76.885 76.885 0 0 1-3.125-.438v5.114l.15.027.191.034c.577.097 1.166.19 1.768.276l.391.057c.112.015.227.029.342.042l.283.035zm11.2 13.007l-.422-.032a90.786 90.786 0 0 1-1.953-.173l-.408-.041-.029-.004-.054-.006v-5.173c1.025.1 2.068.184 3.125.253v5.192l-.259-.017zm-8.075-.984l.28.05a52.908 52.908 0 0 0 2.845.434v-5.153a77.032 77.032 0 0 1-3.125-.44v5.11zM37.5 45.347v5.076a43.788 43.788 0 0 1-3.125-.782v-5.014c.973.263 2.019.503 3.125.72zm-5.208 3.593v-4.95c-1.239-.43-2.293-.909-3.125-1.433v4.314c0 .023.006.046.011.07l.006.029.07.117c.344.574 1.4 1.22 3.038 1.853zm24.983-2.086c1.049-.02 2.098-.052 3.142-.1v5.196c-1.37.068-2.76.105-4.167.12v-5.2c.286-.003.573-.008.86-.013l.165-.003zm12.069 4.226c.474-.072.935-.15 1.393-.229l.082-.015.015-.003V45.72a76.68 76.68 0 0 1-3.125.44v5.146l.247-.03a72.8 72.8 0 0 0 1.388-.194zm-5.66.66c-.239.02-.481.036-.724.051l-.46.03v-5.184c1.056-.07 2.1-.154 3.125-.254v5.168l-.015.002c-.6.063-1.2.126-1.816.177l-.11.01zm10.275-1.54c.56-.132 1.11-.268 1.629-.413l.455-.127v-5.032c-.973.263-2.019.502-3.125.72v5.082l.118-.024h.001a49.627 49.627 0 0 0 .922-.206zm7.28-10.549c-.096.707-1.7 1.648-4.56 2.532-3.686 1.139-9.453 2.182-16.761 2.505h-.014c-.37.015-.738.03-1.114.043-.312.01-.624.02-.942.028-.863.02-1.738.033-2.64.033-.902 0-1.777-.014-2.64-.034-.316-.007-.628-.017-.94-.028-.323-.01-.64-.023-.953-.036l-.176-.008c-7.308-.322-13.076-1.365-16.76-2.504-2.839-.877-4.439-1.81-4.558-2.514l.004-.017c.003-.014.005-.027.014-.045.036.01.075.018.113.026l.109.024c.407.097.825.19 1.25.28 2.07.446 4.363.812 6.807 1.091a.05.05 0 0 1 .012.002l.01.002h.005c1.665.189 3.392.338 5.165.443.007 0 .013.002.02.004a.069.069 0 0 0 .018.003.031.031 0 0 0 .01-.002.03.03 0 0 1 .01-.002 106.604 106.604 0 0 0 6.23.19c.547 0 1.108-.007 1.673-.017 7.569-.117 14.584-1.017 19.465-2.411.225-.064.445-.13.661-.195l.152-.046.244-.075a25.9 25.9 0 0 0 1.088-.374l.178-.069c.294-.111.578-.227.849-.345l.096-.041.138-.06c.289-.13.568-.264.826-.403.076-.04.146-.081.216-.122l.111-.065c.125-.072.25-.145.366-.219.03-.019.062-.038.095-.056.038-.022.077-.044.111-.067 4.664 1.012 5.893 2.118 6.011 2.549zm-6.255-12.478c-.162-1.552-8.85-4.256-26.026-4.256-17.176 0-25.863 2.704-26.026 4.256.126.704 1.724 1.634 4.556 2.51 3.685 1.138 9.453 2.18 16.761 2.504l.175.007c.315.013.63.026.953.036.313.01.625.021.942.028.862.02 1.737.034 2.64.034a114.42 114.42 0 0 0 3.58-.062c.377-.012.746-.027 1.115-.043h.014c7.308-.323 13.075-1.366 16.76-2.505 2.831-.875 4.43-1.805 4.556-2.51zM22.917 34.37v-4.314c.832.524 1.886 1.002 3.125 1.434v4.987c-2.026-.76-3.123-1.52-3.125-2.107zm5.073 14.44c-.01-.008-.02-.016-.027-.025-3.866.948-4.92 1.929-5.035 2.32.093.707 1.696 1.65 4.56 2.535 3.685 1.138 9.453 2.18 16.761 2.504l.176.007h.001c.314.014.63.027.951.036a114.428 114.428 0 0 0 3.581.062c.677 0 1.337-.01 1.992-.02l.253-.005.521-.01.47-.015.233-.007c7.897-.255 14.11-1.35 18.001-2.551 1.29-.4 2.325-.809 3.081-1.205-3.492.756-7.623 1.28-12.025 1.54l-.007.001-.006.002a.042.042 0 0 1-.013.002l-.009-.002h-.005a107.53 107.53 0 0 1-6.236.187c-.627 0-1.268-.009-1.92-.022a104.834 104.834 0 0 1-4.328-.164h-.01c-4.39-.258-8.42-.778-11.797-1.497a51.428 51.428 0 0 1-.82-.177l-.26-.058c-3.676-.844-6.63-1.975-8.055-3.415a.244.244 0 0 0-.028-.024zm-5.073 9.518v-4.313c.832.524 1.886 1.002 3.125 1.433v4.968l-.595-.232-.013.013c-1.635-.678-2.515-1.344-2.517-1.869zm3.125 7.145v4.313c.002.587 1.099 1.348 3.125 2.108v-4.988c-1.239-.431-2.293-.91-3.125-1.433zM75 71.894v-4.986c1.239-.43 2.293-.909 3.125-1.433v4.31c-.001.587-1.099 1.35-3.125 2.11zM73.553 65.1c2.845-.88 4.445-1.815 4.559-2.52-.068-.261-.635-.917-2.691-1.65-.056.039-.12.077-.184.116a8.842 8.842 0 0 0-.123.076c-.108.07-.218.14-.334.21l-.063.036c-.074.043-.148.087-.225.129-1.827 1.013-4.49 1.831-7.566 2.462l-.219.045a75.521 75.521 0 0 1-6.225.972c-.01.001-.02.004-.03.007a.118.118 0 0 1-.034.007c-.007 0-.012-.003-.018-.003-1.661.19-3.39.343-5.177.45l-.007.002-.007.002-.004-.001-.004-.001c-1.467.087-2.967.143-4.486.168-.595.01-1.183.018-1.757.018-.432 0-.873-.004-1.316-.013-1.667-.02-3.32-.078-4.934-.173l-.005-.001c-5.228-.31-10.07-.998-13.865-1.97l-.127-.033a30.439 30.439 0 0 1-1.582-.442 30.491 30.491 0 0 1-1.063-.347c.2.698 1.792 1.602 4.547 2.453 3.686 1.138 9.453 2.181 16.761 2.504h.014c.371.016.742.032 1.121.044a114.675 114.675 0 0 0 3.574.061c.902 0 1.777-.013 2.64-.032.318-.008.63-.018.942-.028.376-.012.745-.028 1.114-.043h.014c7.308-.324 13.075-1.367 16.76-2.505zm4.572-16.122v-4.986c1.239-.432 2.293-.91 3.125-1.434v4.31c-.001.587-1.099 1.35-3.125 2.11z"
+ fill="currentcolor"
+ fillRule="evenodd"
+ />
+ </svg>
+ </div>
+ </div>
</div>
</div>
`;
-exports[`Storyshots Atoms/Text Text/size 1`] = `
-.c2 {
- -webkit-text-decoration: none;
- text-decoration: none;
-}
-
-color:#1CB569 .c2:hover {
- color: #4A90E2;
-}
-
+exports[`Storyshots Molecules/Lens Logo + Lens Composition 1`] = `
.c1 {
- font-size: 0.44999999999999996rem;
- margin: 0.5rem auto;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-box-pack: center;
- -webkit-justify-content: center;
- -ms-flex-pack: center;
- justify-content: center;
- -webkit-flex-direction: column;
- -ms-flex-direction: column;
- flex-direction: column;
- word-wrap: anywhere;
- text-align: left;
- max-width: 240px;
- line-height: 1.55em;
+ -webkit-transform: rotate(0deg);
+ -ms-transform: rotate(0deg);
+ transform: rotate(0deg);
}
-.c0 {
- background-color: white;
- padding: 1rem;
+.c2 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-align-content: stretch;
- -ms-flex-line-pack: stretch;
- align-content: stretch;
- -webkit-box-pack: justify;
- -webkit-justify-content: space-between;
- -ms-flex-pack: justify;
- justify-content: space-between;
- -webkit-flex-direction: column;
- -ms-flex-direction: column;
- flex-direction: column;
- border-radius: 3rem;
- border-width: 0;
- border-style: solid;
- box-shadow: 0px 4px 5px 0 rgba(0,0,0,0.2),0 3px 14px 3px rgba(0,0,0,0.12),0 8px 10px 1px rgba(0,0,0,0.14);
+ position: absolute;
+ top: 30.76923076923077%;
+ left: 30.76923076923077%;
+ width: 76.92307692307692px;
+ height: 76.92307692307692px;
+ font-size: 0;
}
-.c0 > * {
- -webkit-flex: 1 auto;
- -ms-flex: 1 auto;
- flex: 1 auto;
+.c0 {
+ position: relative;
}
<div
@@ -10837,157 +10450,152 @@ color:#1CB569 .c2:hover {
>
<div
className="c0"
- style={
- Object {
- "height": "85%",
- }
- }
>
- <p
+ <div
className="c1"
- size={2}
>
- <p>
- Dank
- <a
- className="c2"
- href="//linguala.com"
- >
- Linguala
- </a>
- werden Sprachbarrieren überwunden. Ob Einzelpersonen, Organisationen oder Unternehmen - Sie profitieren von Linguala. Kreiren Sie ein Profil um Favoriten zu speichern und browsen Sie den Linguala
- <a
- className="c2"
- href="//linguala.lng.li/marketplace"
+ <svg
+ height="200px"
+ version="1.1"
+ viewBox="0 0 1000 1000"
+ width="200px"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <title>
+ Atoms/Icon/Pin
+ </title>
+ <defs>
+ <filter
+ filterUnits="objectBoundingBox"
+ height="106.9%"
+ id="filter-1"
+ width="108.5%"
+ x="-4.2%"
+ y="-2.5%"
+ >
+ <feMerge>
+ <feMergeNode
+ in="SourceGraphic"
+ />
+ </feMerge>
+ </filter>
+ </defs>
+ <g
+ fill="none"
+ fillRule="evenodd"
+ id="Symbols"
+ stroke="none"
+ strokeWidth="1"
>
- Marktplatz
- </a>
- um Anbieter von Sprachservices zu finden.
- </p>
- <p>
- Dieser Text benötigt einen flex-basierten Container zur Zentrierung.
- </p>
- </p>
+ <g
+ id="Atoms/Icon/Pin"
+ >
+ <g
+ id="Group"
+ transform="translate(1.000000, 0.000000)"
+ >
+ <g
+ fill="#1CB569"
+ fillRule="nonzero"
+ filter="url(#filter-1)"
+ id="Atom-Pin"
+ transform="translate(210.000000, 219.000000)"
+ >
+ <path
+ d="M577.143802,255.995818 C556.506373,107.376739 437.401481,0 289.22782,0 C141.05416,0 23.9375802,107.286714 3.17831886,255.995818 C-35.3577758,532.049383 289.257577,697.727596 289.257577,699.979533 C289.257577,702.23147 613.586498,518.435484 577.143802,255.995818 Z M40,290 C40,152.5 152.5,40 290,40 C427.5,40 540,152.5 540,290 C540,427.5 428.75,540 290,540 C152.5,540 40,427.5 40,290 Z"
+ id="Pin-Main-Shape"
+ />
+ </g>
+ </g>
+ </g>
+ </g>
+ </svg>
+ </div>
+ <div
+ className="c2"
+ size={10}
+ >
+ <svg
+ centered={true}
+ size={3.846153846153846}
+ viewBox="0 0 400 200"
+ >
+ <defs>
+ <path
+ d="M0 0h400v200H0z"
+ id="LingualaLogo_svg__a"
+ />
+ </defs>
+ <g
+ fill="none"
+ fillRule="nonzero"
+ >
+ <path
+ d="M196.667 151.912c-9.553-9.799-18.017-20.255-25.33-30.717a223.362 223.362 0 0 1-6.73-10.18 117.96 117.96 0 0 1-2.462-4.12l-3.342-5.956 3.144-6.062c.142-.273.38-.719.713-1.326.527-.96 1.148-2.057 1.862-3.278a208.376 208.376 0 0 1 7.093-11.252c7.758-11.51 16.85-22.833 27.257-33.195 30.496-30.36 66.022-46.606 105.843-41.06 49.93 6.953 85.748 46.605 85.748 95.928 0 49.412-35.942 89.573-85.757 96.473-39.817 5.515-76.134-12.532-108.039-45.255zm-8.658-51.424a209.053 209.053 0 0 0 4.178 6.203c6.57 9.398 14.183 18.803 22.703 27.541 26.825 27.514 56.01 42.018 86.32 37.82 37.379-5.179 63.834-34.739 63.834-71.358 0-36.482-26.29-65.586-63.844-70.815-30.753-4.283-58.996 8.632-84.371 33.895-9.147 9.107-17.227 19.169-24.12 29.395a191.043 191.043 0 0 0-4.7 7.319z"
+ fill="#4A90E2"
+ />
+ <path
+ d="M95.758 2.983c39.816-5.515 76.133 12.532 108.038 45.255 9.553 9.799 18.017 20.255 25.33 30.717a223.362 223.362 0 0 1 6.73 10.18c1.178 1.9 2.002 3.3 2.462 4.12l3.342 5.956-3.144 6.062c-.141.273-.38.719-.713 1.326a142.25 142.25 0 0 1-1.861 3.278 208.376 208.376 0 0 1-7.094 11.252c-7.758 11.51-16.85 22.833-27.257 33.195-30.495 30.36-66.022 46.606-105.842 41.06C45.817 188.431 10 148.78 10 99.456 10 50.044 45.942 9.883 95.758 2.983zm112.519 90.476c-6.57-9.398-14.183-18.803-22.703-27.541-26.826-27.514-56.01-42.018-86.32-37.82-37.38 5.179-63.835 34.739-63.835 71.358 0 36.482 26.29 65.586 63.844 70.815 30.754 4.283 58.996-8.633 84.372-33.895 9.147-9.107 17.226-19.169 24.118-29.395a190.58 190.58 0 0 0 4.702-7.319 209.05 209.05 0 0 0-4.178-6.203z"
+ fill="#1CB569"
+ />
+ </g>
+ </svg>
+ </div>
</div>
</div>
</div>
`;
-exports[`Storyshots Atoms/Text Title 1`] = `
-.c0 {
- font-size: 3rem;
- font-family: Libre Baskerville,Helvetica,Arial,serif;
- font-weight: lighter;
-}
-
-<div
- style={
- Object {
- "alignItems": "center",
- "bottom": "0",
- "display": "flex",
- "left": "0",
- "overflow": "auto",
- "position": "fixed",
- "right": "0",
- "top": "0",
- }
- }
->
- <div
- style={
- Object {
- "margin": "auto",
- "maxHeight": "100%",
- }
- }
- >
- <h1
- className="c0"
- >
- willkommen bei linguala
- </h1>
- </div>
-</div>
-`;
-
-exports[`Storyshots Molecules/Accordion Accordion 1`] = `
-.c4 {
- font-size: 3rem;
- font-family: Libre Baskerville,Helvetica,Arial,serif;
- font-weight: lighter;
-}
-
-.c5 {
- color: white;
- background-color: #1CB569;
- -webkit-transition: background-color 0.1s linear;
- transition: background-color 0.1s linear;
- font-size: 1rem;
- padding: 0.5rem;
- margin: 0.5rem;
- line-height: 1.5em;
- box-shadow: none;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- cursor: unset;
- -webkit-transition: -webkit-transform 0.2s cubic-bezier(0.4,0,0.2,1);
- -webkit-transition: transform 0.2s cubic-bezier(0.4,0,0.2,1);
- transition: transform 0.2s cubic-bezier(0.4,0,0.2,1);
- text-transform: lowercase;
- border-style: unset;
- border-radius: 3rem;
- min-width: 240px;
- min-height: auto;
- padding: 0.5rem;
- min-height: 2.5em;
-}
-
-.c5:active,
-.c5:hover {
- background-color: #4A90E2;
-}
-
-.c5::-moz-focus-inner {
- border: 0;
-}
-
-.c5:active {
- -webkit-transform: scale(1.05);
- -ms-transform: scale(1.05);
- transform: scale(1.05);
-}
-
-.c5:focus,
-.c5:active {
- box-shadow: 0 1px 5px 0 rgba(0,0,0,0.2),0 3px 4px 0 rgba(0,0,0,0.12),0 2px 4px 0 rgba(0,0,0,0.14);
- outline: none;
-}
-
-.c0 {
- width: 100%;
+exports[`Storyshots Molecules/Lens Text + Lens Composition 1`] = `
+.c3 {
+ font-size: 0.20384615384615384rem;
+ margin: 0.5rem auto;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ -webkit-flex-direction: column;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ word-wrap: anywhere;
+ text-align: left;
+ max-width: 240px;
+ line-height: 1.55em;
}
.c1 {
- width: 100%;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-transform: rotate(0deg);
+ -ms-transform: rotate(0deg);
+ transform: rotate(0deg);
}
.c2 {
- color: transparent;
- width: 100%;
- cursor: pointer;
-}
-
-.c3 {
- color: #1CB569;
- width: 100%;
- margin-top: -1em;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ position: absolute;
+ top: 30.76923076923077%;
+ left: 30.76923076923077%;
+ width: 15.384615384615383px;
+ height: 15.384615384615383px;
+ font-size: 0;
}
-.c3:hover {
- color: #4A90E2;
+.c0 {
+ position: relative;
}
<div
@@ -11015,102 +10623,83 @@ exports[`Storyshots Molecules/Accordion Accordion 1`] = `
<div
className="c0"
>
- <details
+ <div
className="c1"
>
- <summary
- className="c2"
+ <svg
+ height="40px"
+ version="1.1"
+ viewBox="0 0 1000 1000"
+ width="40px"
+ xmlns="http://www.w3.org/2000/svg"
>
- <div
- className="c3"
+ <title>
+ Atoms/Icon/Pin
+ </title>
+ <defs>
+ <filter
+ filterUnits="objectBoundingBox"
+ height="106.9%"
+ id="filter-1"
+ width="108.5%"
+ x="-4.2%"
+ y="-2.5%"
+ >
+ <feMerge>
+ <feMergeNode
+ in="SourceGraphic"
+ />
+ </feMerge>
+ </filter>
+ </defs>
+ <g
+ fill="none"
+ fillRule="evenodd"
+ id="Symbols"
+ stroke="none"
+ strokeWidth="1"
>
- <h1
- className="c4"
+ <g
+ id="Atoms/Icon/Pin"
>
- This is an accordion title
- </h1>
- </div>
- </summary>
- <p>
- Away ipsum dolor sit for sure, consectetuer adipiscing my shizz. Nullam crazy velit, aliquet volutpat, suscipizzle the bizzle, gravida vizzle, arcu. Pellentesque eget tortizzle. Sizzle eros. Fusce at shut the shizzle up dapibizzle turpis pot funky fresh. Maurizzle pellentesque nibh et turpizzle. Brizzle izzle tortizzle. Pellentesque dope rhoncizzle gangster. In hac habitasse platea dictumst. Funky fresh dapibizzle. Pizzle tellizzle shizznit, pretizzle eu, mattizzle shut the shizzle up, cool vitae, nunc. Check out this suscipizzle. Shizznit semper velizzle sed i saw beyonces tizzles and my pizzle went crizzle.
- </p>
- <button
- className="c5"
- size={2}
- width="240px"
- >
- Was this helpful?
- </button>
- </details>
- </div>
- </div>
-</div>
-`;
-
-exports[`Storyshots Molecules/Header Marktplatz 1`] = `
-.c0 {
- font-size: 3rem;
- font-family: Libre Baskerville,Helvetica,Arial,serif;
- font-weight: lighter;
-}
-
-<div
- style={
- Object {
- "alignItems": "center",
- "bottom": "0",
- "display": "flex",
- "left": "0",
- "overflow": "auto",
- "position": "fixed",
- "right": "0",
- "top": "0",
- }
- }
->
- <div
- style={
- Object {
- "margin": "auto",
- "maxHeight": "100%",
- }
- }
- >
- <div>
- <svg
- viewBox="0 0 400 200"
+ <g
+ id="Group"
+ transform="translate(1.000000, 0.000000)"
+ >
+ <g
+ fill="#1CB569"
+ fillRule="nonzero"
+ filter="url(#filter-1)"
+ id="Atom-Pin"
+ transform="translate(210.000000, 219.000000)"
+ >
+ <path
+ d="M577.143802,255.995818 C556.506373,107.376739 437.401481,0 289.22782,0 C141.05416,0 23.9375802,107.286714 3.17831886,255.995818 C-35.3577758,532.049383 289.257577,697.727596 289.257577,699.979533 C289.257577,702.23147 613.586498,518.435484 577.143802,255.995818 Z M40,290 C40,152.5 152.5,40 290,40 C427.5,40 540,152.5 540,290 C540,427.5 428.75,540 290,540 C152.5,540 40,427.5 40,290 Z"
+ id="Pin-Main-Shape"
+ />
+ </g>
+ </g>
+ </g>
+ </g>
+ </svg>
+ </div>
+ <div
+ className="c2"
+ size={2}
>
- <defs>
- <path
- d="M0 0h400v200H0z"
- id="LingualaLogo_svg__a"
- />
- </defs>
- <g
- fill="none"
- fillRule="nonzero"
+ <p
+ className="c3"
+ size={0.7692307692307692}
>
- <path
- d="M196.667 151.912c-9.553-9.799-18.017-20.255-25.33-30.717a223.362 223.362 0 0 1-6.73-10.18 117.96 117.96 0 0 1-2.462-4.12l-3.342-5.956 3.144-6.062c.142-.273.38-.719.713-1.326.527-.96 1.148-2.057 1.862-3.278a208.376 208.376 0 0 1 7.093-11.252c7.758-11.51 16.85-22.833 27.257-33.195 30.496-30.36 66.022-46.606 105.843-41.06 49.93 6.953 85.748 46.605 85.748 95.928 0 49.412-35.942 89.573-85.757 96.473-39.817 5.515-76.134-12.532-108.039-45.255zm-8.658-51.424a209.053 209.053 0 0 0 4.178 6.203c6.57 9.398 14.183 18.803 22.703 27.541 26.825 27.514 56.01 42.018 86.32 37.82 37.379-5.179 63.834-34.739 63.834-71.358 0-36.482-26.29-65.586-63.844-70.815-30.753-4.283-58.996 8.632-84.371 33.895-9.147 9.107-17.227 19.169-24.12 29.395a191.043 191.043 0 0 0-4.7 7.319z"
- fill="#4A90E2"
- />
- <path
- d="M95.758 2.983c39.816-5.515 76.133 12.532 108.038 45.255 9.553 9.799 18.017 20.255 25.33 30.717a223.362 223.362 0 0 1 6.73 10.18c1.178 1.9 2.002 3.3 2.462 4.12l3.342 5.956-3.144 6.062c-.141.273-.38.719-.713 1.326a142.25 142.25 0 0 1-1.861 3.278 208.376 208.376 0 0 1-7.094 11.252c-7.758 11.51-16.85 22.833-27.257 33.195-30.495 30.36-66.022 46.606-105.842 41.06C45.817 188.431 10 148.78 10 99.456 10 50.044 45.942 9.883 95.758 2.983zm112.519 90.476c-6.57-9.398-14.183-18.803-22.703-27.541-26.826-27.514-56.01-42.018-86.32-37.82-37.38 5.179-63.835 34.739-63.835 71.358 0 36.482 26.29 65.586 63.844 70.815 30.754 4.283 58.996-8.633 84.372-33.895 9.147-9.107 17.226-19.169 24.118-29.395a190.58 190.58 0 0 0 4.702-7.319 209.05 209.05 0 0 0-4.178-6.203z"
- fill="#1CB569"
- />
- </g>
- </svg>
- <h1
- className="c0"
- >
- marktplatz für sprachservices
- </h1>
+ Linguala
+ </p>
+ </div>
</div>
</div>
</div>
`;
-exports[`Storyshots Molecules/Lens Icon + Lens Composition 1`] = `
+exports[`Storyshots Molecules/Pin Icon + Pin Composition 1`] = `
.c1 {
display: -webkit-box;
display: -webkit-flex;
@@ -11173,54 +10762,10 @@ exports[`Storyshots Molecules/Lens Icon + Lens Composition 1`] = `
width="40px"
xmlns="http://www.w3.org/2000/svg"
>
- <title>
- Atoms/Icon/Pin
- </title>
- <defs>
- <filter
- filterUnits="objectBoundingBox"
- height="106.9%"
- id="filter-1"
- width="108.5%"
- x="-4.2%"
- y="-2.5%"
- >
- <feMerge>
- <feMergeNode
- in="SourceGraphic"
- />
- </feMerge>
- </filter>
- </defs>
- <g
- fill="none"
- fillRule="evenodd"
- id="Symbols"
- stroke="none"
- strokeWidth="1"
- >
- <g
- id="Atoms/Icon/Pin"
- >
- <g
- id="Group"
- transform="translate(1.000000, 0.000000)"
- >
- <g
- fill="#1CB569"
- fillRule="nonzero"
- filter="url(#filter-1)"
- id="Atom-Pin"
- transform="translate(210.000000, 219.000000)"
- >
- <path
- d="M577.143802,255.995818 C556.506373,107.376739 437.401481,0 289.22782,0 C141.05416,0 23.9375802,107.286714 3.17831886,255.995818 C-35.3577758,532.049383 289.257577,697.727596 289.257577,699.979533 C289.257577,702.23147 613.586498,518.435484 577.143802,255.995818 Z M40,290 C40,152.5 152.5,40 290,40 C427.5,40 540,152.5 540,290 C540,427.5 428.75,540 290,540 C152.5,540 40,427.5 40,290 Z"
- id="Pin-Main-Shape"
- />
- </g>
- </g>
- </g>
- </g>
+ <path
+ d="M502.56508,868.364664 C511.93155,862.588075 523.095822,855.151458 535.04456,846.573064 C568.356448,822.657358 601.727957,794.366431 631.986836,762.739204 C670.449872,722.536816 701.168462,679.73622 721.677407,634.99991 C745.587052,582.845627 754.91721,529.57787 747.526139,475.323915 C729.599303,343.732453 626.596403,250 499.286261,250 C372.372238,250 270.864911,343.231572 252.772718,475.337398 C244.509241,535.675767 254.910456,593.178228 281.38033,648.043223 C303.726517,694.360915 336.875734,737.501264 378.116754,777.203565C406.461936,804.491177 436.782663,828.440662 467.722026,849.417211 C478.177327,856.505791 487.661494,862.556978 497.309147,868.437102C497.961101,868.834461 498.885903,869.394858 499.886582,870 C500.740299,869.484354 501.635452,868.937995 502.56508,868.364664 Z M787.143802,465.995818 C823.586498,728.435484 499.257577,912.23147 499.257577,909.979533 C499.257577,907.727596 174.642224,742.049383 213.178319,465.995818C233.93758,317.286714 351.05416,210 499.22782,210 C647.401481,210 766.506373,317.376739 787.143802,465.995818 Z"
+ fill="#1CB569"
+ />
</svg>
</div>
<div
@@ -11252,7 +10797,7 @@ exports[`Storyshots Molecules/Lens Icon + Lens Composition 1`] = `
</div>
`;
-exports[`Storyshots Molecules/Lens Logo + Lens Composition 1`] = `
+exports[`Storyshots Molecules/Pin Logo + Pin Composition 1`] = `
.c1 {
display: -webkit-box;
display: -webkit-flex;
@@ -11271,8 +10816,8 @@ exports[`Storyshots Molecules/Lens Logo + Lens Composition 1`] = `
position: absolute;
top: 30.76923076923077%;
left: 30.76923076923077%;
- width: 76.92307692307692px;
- height: 76.92307692307692px;
+ width: 15.384615384615383px;
+ height: 15.384615384615383px;
font-size: 0;
}
@@ -11309,69 +10854,24 @@ exports[`Storyshots Molecules/Lens Logo + Lens Composition 1`] = `
className="c1"
>
<svg
- height="200px"
+ height="40px"
version="1.1"
viewBox="0 0 1000 1000"
- width="200px"
+ width="40px"
xmlns="http://www.w3.org/2000/svg"
>
- <title>
- Atoms/Icon/Pin
- </title>
- <defs>
- <filter
- filterUnits="objectBoundingBox"
- height="106.9%"
- id="filter-1"
- width="108.5%"
- x="-4.2%"
- y="-2.5%"
- >
- <feMerge>
- <feMergeNode
- in="SourceGraphic"
- />
- </feMerge>
- </filter>
- </defs>
- <g
- fill="none"
- fillRule="evenodd"
- id="Symbols"
- stroke="none"
- strokeWidth="1"
- >
- <g
- id="Atoms/Icon/Pin"
- >
- <g
- id="Group"
- transform="translate(1.000000, 0.000000)"
- >
- <g
- fill="#1CB569"
- fillRule="nonzero"
- filter="url(#filter-1)"
- id="Atom-Pin"
- transform="translate(210.000000, 219.000000)"
- >
- <path
- d="M577.143802,255.995818 C556.506373,107.376739 437.401481,0 289.22782,0 C141.05416,0 23.9375802,107.286714 3.17831886,255.995818 C-35.3577758,532.049383 289.257577,697.727596 289.257577,699.979533 C289.257577,702.23147 613.586498,518.435484 577.143802,255.995818 Z M40,290 C40,152.5 152.5,40 290,40 C427.5,40 540,152.5 540,290 C540,427.5 428.75,540 290,540 C152.5,540 40,427.5 40,290 Z"
- id="Pin-Main-Shape"
- />
- </g>
- </g>
- </g>
- </g>
+ <path
+ d="M502.56508,868.364664 C511.93155,862.588075 523.095822,855.151458 535.04456,846.573064 C568.356448,822.657358 601.727957,794.366431 631.986836,762.739204 C670.449872,722.536816 701.168462,679.73622 721.677407,634.99991 C745.587052,582.845627 754.91721,529.57787 747.526139,475.323915 C729.599303,343.732453 626.596403,250 499.286261,250 C372.372238,250 270.864911,343.231572 252.772718,475.337398 C244.509241,535.675767 254.910456,593.178228 281.38033,648.043223 C303.726517,694.360915 336.875734,737.501264 378.116754,777.203565C406.461936,804.491177 436.782663,828.440662 467.722026,849.417211 C478.177327,856.505791 487.661494,862.556978 497.309147,868.437102C497.961101,868.834461 498.885903,869.394858 499.886582,870 C500.740299,869.484354 501.635452,868.937995 502.56508,868.364664 Z M787.143802,465.995818 C823.586498,728.435484 499.257577,912.23147 499.257577,909.979533 C499.257577,907.727596 174.642224,742.049383 213.178319,465.995818C233.93758,317.286714 351.05416,210 499.22782,210 C647.401481,210 766.506373,317.376739 787.143802,465.995818 Z"
+ fill="#1CB569"
+ />
</svg>
</div>
<div
className="c2"
- size={10}
+ size={2}
>
<svg
- centered={true}
- size={3.846153846153846}
+ size={0.7692307692307692}
viewBox="0 0 400 200"
>
<defs>
@@ -11400,26 +10900,10 @@ exports[`Storyshots Molecules/Lens Logo + Lens Composition 1`] = `
</div>
`;
-exports[`Storyshots Molecules/Lens Text + Lens Composition 1`] = `
+exports[`Storyshots Molecules/Pin Text + Pin Composition 1`] = `
.c3 {
font-size: 0.20384615384615384rem;
margin: 0.5rem auto;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-box-pack: center;
- -webkit-justify-content: center;
- -ms-flex-pack: center;
- justify-content: center;
- -webkit-flex-direction: column;
- -ms-flex-direction: column;
- flex-direction: column;
- word-wrap: anywhere;
text-align: left;
max-width: 240px;
line-height: 1.55em;
@@ -11487,56 +10971,12 @@ exports[`Storyshots Molecules/Lens Text + Lens Composition 1`] = `
width="40px"
xmlns="http://www.w3.org/2000/svg"
>
- <title>
- Atoms/Icon/Pin
- </title>
- <defs>
- <filter
- filterUnits="objectBoundingBox"
- height="106.9%"
- id="filter-1"
- width="108.5%"
- x="-4.2%"
- y="-2.5%"
- >
- <feMerge>
- <feMergeNode
- in="SourceGraphic"
- />
- </feMerge>
- </filter>
- </defs>
- <g
- fill="none"
- fillRule="evenodd"
- id="Symbols"
- stroke="none"
- strokeWidth="1"
- >
- <g
- id="Atoms/Icon/Pin"
- >
- <g
- id="Group"
- transform="translate(1.000000, 0.000000)"
- >
- <g
- fill="#1CB569"
- fillRule="nonzero"
- filter="url(#filter-1)"
- id="Atom-Pin"
- transform="translate(210.000000, 219.000000)"
- >
- <path
- d="M577.143802,255.995818 C556.506373,107.376739 437.401481,0 289.22782,0 C141.05416,0 23.9375802,107.286714 3.17831886,255.995818 C-35.3577758,532.049383 289.257577,697.727596 289.257577,699.979533 C289.257577,702.23147 613.586498,518.435484 577.143802,255.995818 Z M40,290 C40,152.5 152.5,40 290,40 C427.5,40 540,152.5 540,290 C540,427.5 428.75,540 290,540 C152.5,540 40,427.5 40,290 Z"
- id="Pin-Main-Shape"
- />
- </g>
- </g>
- </g>
- </g>
- </svg>
- </div>
+ <path
+ d="M502.56508,868.364664 C511.93155,862.588075 523.095822,855.151458 535.04456,846.573064 C568.356448,822.657358 601.727957,794.366431 631.986836,762.739204 C670.449872,722.536816 701.168462,679.73622 721.677407,634.99991 C745.587052,582.845627 754.91721,529.57787 747.526139,475.323915 C729.599303,343.732453 626.596403,250 499.286261,250 C372.372238,250 270.864911,343.231572 252.772718,475.337398 C244.509241,535.675767 254.910456,593.178228 281.38033,648.043223 C303.726517,694.360915 336.875734,737.501264 378.116754,777.203565C406.461936,804.491177 436.782663,828.440662 467.722026,849.417211 C478.177327,856.505791 487.661494,862.556978 497.309147,868.437102C497.961101,868.834461 498.885903,869.394858 499.886582,870 C500.740299,869.484354 501.635452,868.937995 502.56508,868.364664 Z M787.143802,465.995818 C823.586498,728.435484 499.257577,912.23147 499.257577,909.979533 C499.257577,907.727596 174.642224,742.049383 213.178319,465.995818C233.93758,317.286714 351.05416,210 499.22782,210 C647.401481,210 766.506373,317.376739 787.143802,465.995818 Z"
+ fill="#1CB569"
+ />
+ </svg>
+ </div>
<div
className="c2"
size={2}
@@ -11553,34 +10993,7 @@ exports[`Storyshots Molecules/Lens Text + Lens Composition 1`] = `
</div>
`;
-exports[`Storyshots Molecules/Pin Icon + Pin Composition 1`] = `
-.c1 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-transform: rotate(0deg);
- -ms-transform: rotate(0deg);
- transform: rotate(0deg);
-}
-
-.c2 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- position: absolute;
- top: 30.76923076923077%;
- left: 30.76923076923077%;
- width: 15.384615384615383px;
- height: 15.384615384615383px;
- font-size: 0;
-}
-
-.c0 {
- position: relative;
-}
-
+exports[`Storyshots Molecules/Rating FiveStarRating 1`] = `
<div
style={
Object {
@@ -11603,80 +11016,137 @@ exports[`Storyshots Molecules/Pin Icon + Pin Composition 1`] = `
}
}
>
- <div
- className="c0"
+ <svg
+ alt="1"
+ aria-label="1"
+ fill="none"
+ role="img"
+ style={
+ Object {
+ "width": "20px",
+ }
+ }
+ viewBox="0 0 106 100"
>
- <div
- className="c1"
- >
- <svg
- height="40px"
- version="1.1"
- viewBox="0 0 1000 1000"
- width="40px"
- xmlns="http://www.w3.org/2000/svg"
- >
- <path
- d="M502.56508,868.364664 C511.93155,862.588075 523.095822,855.151458 535.04456,846.573064 C568.356448,822.657358 601.727957,794.366431 631.986836,762.739204 C670.449872,722.536816 701.168462,679.73622 721.677407,634.99991 C745.587052,582.845627 754.91721,529.57787 747.526139,475.323915 C729.599303,343.732453 626.596403,250 499.286261,250 C372.372238,250 270.864911,343.231572 252.772718,475.337398 C244.509241,535.675767 254.910456,593.178228 281.38033,648.043223 C303.726517,694.360915 336.875734,737.501264 378.116754,777.203565C406.461936,804.491177 436.782663,828.440662 467.722026,849.417211 C478.177327,856.505791 487.661494,862.556978 497.309147,868.437102C497.961101,868.834461 498.885903,869.394858 499.886582,870 C500.740299,869.484354 501.635452,868.937995 502.56508,868.364664 Z M787.143802,465.995818 C823.586498,728.435484 499.257577,912.23147 499.257577,909.979533 C499.257577,907.727596 174.642224,742.049383 213.178319,465.995818C233.93758,317.286714 351.05416,210 499.22782,210 C647.401481,210 766.506373,317.376739 787.143802,465.995818 Z"
- fill="#1CB569"
- />
- </svg>
- </div>
- <div
- className="c2"
- size={2}
- >
- <svg
- alt="Money"
- aria-label="Money"
- fill="none"
- role="img"
- style={
- Object {
- "width": "15.384615384615383px",
- }
- }
- viewBox="0 0 100 100"
- >
- <path
- clipRule="evenodd"
- d="M100 50c0 27.614-22.386 50-50 50S0 77.614 0 50 22.386 0 50 0s50 22.386 50 50zM76.86 35.346c4.239 1.062 6.359 2.455 6.462 4.237h.011v7.288c-.005 1.961-2.51 3.5-6.25 4.65v6.808c0 .324-.072.637-.203.938 2.15.89 3.239 1.956 3.312 3.233h.016v7.287c-.009 3.466-7.809 5.618-16.477 6.622l-.064.016a.46.46 0 0 1-.125.023c-.01 0-.02-.003-.029-.005-.009-.003-.018-.005-.028-.005-1.67.19-3.368.335-5.048.44a.24.24 0 0 0-.047.01c-.018.006-.037.011-.057.011a.096.096 0 0 1-.028-.006c-.008-.002-.017-.005-.026-.005-2.133.13-4.232.195-6.196.195-1.963 0-4.062-.065-6.195-.195-.01.001-.017.004-.026.006a.092.092 0 0 1-.029.006c-.02 0-.04-.005-.059-.01a.282.282 0 0 0-.044-.01c-1.68-.106-3.378-.253-5.049-.441a.082.082 0 0 0-.013.002l-.014.003c-.01.003-.019.006-.029.006a.46.46 0 0 1-.125-.023.803.803 0 0 0-.065-.016c-8.667-1.004-16.468-3.155-16.477-6.62v-7.29h.016c.014-.22.061-.436.139-.648-2.034-.974-3.276-2.143-3.28-3.52v-7.291h.01c.102-1.754 2.147-3.126 6.24-4.18v-7.279h.016c.01-.179.042-.355.094-.528-3.8-1.153-6.355-2.702-6.36-4.681v-7.29h.018c.373-6.072 25.25-6.25 28.107-6.25 2.858 0 27.735.178 28.108 6.25h.017v7.287a2.348 2.348 0 0 1-.224.975zm-2.328 23.633l.356-.311a.663.663 0 0 0 .112-.34v-4.311c-.832.524-1.886 1.002-3.125 1.433v4.967c1.199-.47 2.11-.956 2.657-1.438zm-23.249 4.536l-.152.003c-.309.006-.624.008-.939.01l-.191.002v-5.203c.287-.003.573-.007.86-.012l.165-.003c1.049-.02 2.098-.053 3.142-.1v5.2a91.817 91.817 0 0 1-2.885.102zm-5.666-.026c.472.014.947.026 1.424.034.059 0 .117.002.176.004l.095.002c.12.002.242.003.362.003l.243.002v-5.206a117.19 117.19 0 0 1-.86-.012l-.164-.004a108.52 108.52 0 0 1-3.142-.1v5.2c.56.028 1.123.052 1.69.07l.176.007zm-17.391-2.341a3.728 3.728 0 0 0-.101-.03v-5.032c.973.263 2.019.503 3.125.72v5.085a48.118 48.118 0 0 1-2.642-.636l-.17-.047-.212-.06zm22.816 8.639a123.134 123.134 0 0 1-1.025-.015 108.867 108.867 0 0 1-3.142-.1v5.2c1.337.067 2.727.108 4.167.122v-5.207zm3.108-.016a116.17 116.17 0 0 0 3.142-.1v5.2c-1.338.067-2.727.108-4.167.122v-5.208a117.27 117.27 0 0 0 1.025-.014zm8.35 4.702V69.3a100.47 100.47 0 0 1-3.125.252v5.195a90.865 90.865 0 0 0 3.125-.274zm2.083-5.398a76.806 76.806 0 0 0 3.125-.44v5.115a72.57 72.57 0 0 1-3.125.477v-5.152zm8.334-1.531a46.58 46.58 0 0 1-3.125.72v5.084a45.35 45.35 0 0 0 3.125-.772v-5.032zm-38.542.72v5.084a45.322 45.322 0 0 1-3.125-.772v-5.032c.973.262 2.019.503 3.125.72zm5.208.812a76.858 76.858 0 0 1-3.125-.44v5.115c.982.173 2.024.332 3.125.477v-5.152zm2.084.224c1.025.099 2.068.183 3.125.253v5.195a90.621 90.621 0 0 1-3.125-.274V69.3zm-2.901-6.261l.316.032c.845.082 1.71.153 2.585.215v-5.19c-1.057-.07-2.1-.154-3.125-.253v5.172l.224.023zm-2.308-5.422v5.152a72.466 72.466 0 0 1-3.125-.477v-5.115c1.009.164 2.051.312 3.125.44zM56.25 63.29a122.973 122.973 0 0 0 1.147-.089 85.074 85.074 0 0 0 1.978-.186v-5.173c-1.025.1-2.069.183-3.125.253v5.195zm5.208-.521v-5.152a76.982 76.982 0 0 0 3.125-.44v5.115c-.98.173-2.024.333-3.125.477zm8.334-6.684a46.58 46.58 0 0 1-3.125.72v5.085a45.409 45.409 0 0 0 3.125-.772v-5.033zm-17.37-4.038c-.783-.02-1.55-.05-2.301-.087l-.067-.003-.054-.002v-5.2c1.044.048 2.093.08 3.142.1l.164.002c.287.005.573.01.86.013v5.2l-.38-.003a78.873 78.873 0 0 1-1.134-.015l-.23-.005zM28.125 32.128v5.032a42.262 42.262 0 0 0 2.74.691l.244.052.141.03v-5.085a46.552 46.552 0 0 1-3.125-.72zm18.932 2.23c.287.005.573.009.86.012v5.2c-1.402-.013-2.796-.05-4.167-.118v-5.197c1.044.05 2.093.081 3.142.1l.165.002zm7.11-.104c-1.044.048-2.093.08-3.142.1l-.166.003c-.286.005-.573.01-.859.013v5.203l.377-.004h.004c.25-.002.5-.004.745-.009l.338-.007c.721-.017 1.434-.04 2.133-.07l.045-.003.264-.014.26-.015v-5.197zm20.594.623l-.029-.006-.379.295c-.55.428-1.395.861-2.478 1.28V31.49c1.239-.432 2.293-.91 3.125-1.434v4.31c0 .159-.083.33-.239.51zm-13.303-1.219v5.146a70 70 0 0 0 3.125-.479v-5.106c-1.008.163-2.05.31-3.125.44zm5.209 4.266v-5.076a46.58 46.58 0 0 0 3.125-.72v5.021c-.934.272-1.985.531-3.125.775zm-7.292 1.126v-5.167a103.61 103.61 0 0 1-3.125.253v5.19a92.876 92.876 0 0 0 3.125-.276zm-20.833.002v-5.169c1.025.1 2.068.184 3.125.253v5.186a94.563 94.563 0 0 1-3.125-.27zm-2.084-.247v-5.147a76.885 76.885 0 0 1-3.125-.438v5.114l.15.027.191.034c.577.097 1.166.19 1.768.276l.391.057c.112.015.227.029.342.042l.283.035zm11.2 13.007l-.422-.032a90.786 90.786 0 0 1-1.953-.173l-.408-.041-.029-.004-.054-.006v-5.173c1.025.1 2.068.184 3.125.253v5.192l-.259-.017zm-8.075-.984l.28.05a52.908 52.908 0 0 0 2.845.434v-5.153a77.032 77.032 0 0 1-3.125-.44v5.11zM37.5 45.347v5.076a43.788 43.788 0 0 1-3.125-.782v-5.014c.973.263 2.019.503 3.125.72zm-5.208 3.593v-4.95c-1.239-.43-2.293-.909-3.125-1.433v4.314c0 .023.006.046.011.07l.006.029.07.117c.344.574 1.4 1.22 3.038 1.853zm24.983-2.086c1.049-.02 2.098-.052 3.142-.1v5.196c-1.37.068-2.76.105-4.167.12v-5.2c.286-.003.573-.008.86-.013l.165-.003zm12.069 4.226c.474-.072.935-.15 1.393-.229l.082-.015.015-.003V45.72a76.68 76.68 0 0 1-3.125.44v5.146l.247-.03a72.8 72.8 0 0 0 1.388-.194zm-5.66.66c-.239.02-.481.036-.724.051l-.46.03v-5.184c1.056-.07 2.1-.154 3.125-.254v5.168l-.015.002c-.6.063-1.2.126-1.816.177l-.11.01zm10.275-1.54c.56-.132 1.11-.268 1.629-.413l.455-.127v-5.032c-.973.263-2.019.502-3.125.72v5.082l.118-.024h.001a49.627 49.627 0 0 0 .922-.206zm7.28-10.549c-.096.707-1.7 1.648-4.56 2.532-3.686 1.139-9.453 2.182-16.761 2.505h-.014c-.37.015-.738.03-1.114.043-.312.01-.624.02-.942.028-.863.02-1.738.033-2.64.033-.902 0-1.777-.014-2.64-.034-.316-.007-.628-.017-.94-.028-.323-.01-.64-.023-.953-.036l-.176-.008c-7.308-.322-13.076-1.365-16.76-2.504-2.839-.877-4.439-1.81-4.558-2.514l.004-.017c.003-.014.005-.027.014-.045.036.01.075.018.113.026l.109.024c.407.097.825.19 1.25.28 2.07.446 4.363.812 6.807 1.091a.05.05 0 0 1 .012.002l.01.002h.005c1.665.189 3.392.338 5.165.443.007 0 .013.002.02.004a.069.069 0 0 0 .018.003.031.031 0 0 0 .01-.002.03.03 0 0 1 .01-.002 106.604 106.604 0 0 0 6.23.19c.547 0 1.108-.007 1.673-.017 7.569-.117 14.584-1.017 19.465-2.411.225-.064.445-.13.661-.195l.152-.046.244-.075a25.9 25.9 0 0 0 1.088-.374l.178-.069c.294-.111.578-.227.849-.345l.096-.041.138-.06c.289-.13.568-.264.826-.403.076-.04.146-.081.216-.122l.111-.065c.125-.072.25-.145.366-.219.03-.019.062-.038.095-.056.038-.022.077-.044.111-.067 4.664 1.012 5.893 2.118 6.011 2.549zm-6.255-12.478c-.162-1.552-8.85-4.256-26.026-4.256-17.176 0-25.863 2.704-26.026 4.256.126.704 1.724 1.634 4.556 2.51 3.685 1.138 9.453 2.18 16.761 2.504l.175.007c.315.013.63.026.953.036.313.01.625.021.942.028.862.02 1.737.034 2.64.034a114.42 114.42 0 0 0 3.58-.062c.377-.012.746-.027 1.115-.043h.014c7.308-.323 13.075-1.366 16.76-2.505 2.831-.875 4.43-1.805 4.556-2.51zM22.917 34.37v-4.314c.832.524 1.886 1.002 3.125 1.434v4.987c-2.026-.76-3.123-1.52-3.125-2.107zm5.073 14.44c-.01-.008-.02-.016-.027-.025-3.866.948-4.92 1.929-5.035 2.32.093.707 1.696 1.65 4.56 2.535 3.685 1.138 9.453 2.18 16.761 2.504l.176.007h.001c.314.014.63.027.951.036a114.428 114.428 0 0 0 3.581.062c.677 0 1.337-.01 1.992-.02l.253-.005.521-.01.47-.015.233-.007c7.897-.255 14.11-1.35 18.001-2.551 1.29-.4 2.325-.809 3.081-1.205-3.492.756-7.623 1.28-12.025 1.54l-.007.001-.006.002a.042.042 0 0 1-.013.002l-.009-.002h-.005a107.53 107.53 0 0 1-6.236.187c-.627 0-1.268-.009-1.92-.022a104.834 104.834 0 0 1-4.328-.164h-.01c-4.39-.258-8.42-.778-11.797-1.497a51.428 51.428 0 0 1-.82-.177l-.26-.058c-3.676-.844-6.63-1.975-8.055-3.415a.244.244 0 0 0-.028-.024zm-5.073 9.518v-4.313c.832.524 1.886 1.002 3.125 1.433v4.968l-.595-.232-.013.013c-1.635-.678-2.515-1.344-2.517-1.869zm3.125 7.145v4.313c.002.587 1.099 1.348 3.125 2.108v-4.988c-1.239-.431-2.293-.91-3.125-1.433zM75 71.894v-4.986c1.239-.43 2.293-.909 3.125-1.433v4.31c-.001.587-1.099 1.35-3.125 2.11zM73.553 65.1c2.845-.88 4.445-1.815 4.559-2.52-.068-.261-.635-.917-2.691-1.65-.056.039-.12.077-.184.116a8.842 8.842 0 0 0-.123.076c-.108.07-.218.14-.334.21l-.063.036c-.074.043-.148.087-.225.129-1.827 1.013-4.49 1.831-7.566 2.462l-.219.045a75.521 75.521 0 0 1-6.225.972c-.01.001-.02.004-.03.007a.118.118 0 0 1-.034.007c-.007 0-.012-.003-.018-.003-1.661.19-3.39.343-5.177.45l-.007.002-.007.002-.004-.001-.004-.001c-1.467.087-2.967.143-4.486.168-.595.01-1.183.018-1.757.018-.432 0-.873-.004-1.316-.013-1.667-.02-3.32-.078-4.934-.173l-.005-.001c-5.228-.31-10.07-.998-13.865-1.97l-.127-.033a30.439 30.439 0 0 1-1.582-.442 30.491 30.491 0 0 1-1.063-.347c.2.698 1.792 1.602 4.547 2.453 3.686 1.138 9.453 2.181 16.761 2.504h.014c.371.016.742.032 1.121.044a114.675 114.675 0 0 0 3.574.061c.902 0 1.777-.013 2.64-.032.318-.008.63-.018.942-.028.376-.012.745-.028 1.114-.043h.014c7.308-.324 13.075-1.367 16.76-2.505zm4.572-16.122v-4.986c1.239-.432 2.293-.91 3.125-1.434v4.31c-.001.587-1.099 1.35-3.125 2.11z"
- fill="currentcolor"
- fillRule="evenodd"
- />
- </svg>
- </div>
- </div>
+ <path
+ d="M52.632 80.368L85.158 100l-8.632-37 28.737-24.895-37.842-3.21L52.631 0 37.843 34.895 0 38.105 28.737 63l-8.632 37 32.527-19.632z"
+ fill="currentcolor"
+ />
+ </svg>
+ <svg
+ alt="2"
+ aria-label="2"
+ fill="none"
+ role="img"
+ style={
+ Object {
+ "width": "20px",
+ }
+ }
+ viewBox="0 0 106 100"
+ >
+ <path
+ d="M52.632 80.368L85.158 100l-8.632-37 28.737-24.895-37.842-3.21L52.631 0 37.843 34.895 0 38.105 28.737 63l-8.632 37 32.527-19.632z"
+ fill="currentcolor"
+ />
+ </svg>
+ <svg
+ alt="3"
+ aria-label="3"
+ fill="none"
+ role="img"
+ style={
+ Object {
+ "width": "20px",
+ }
+ }
+ viewBox="0 0 106 100"
+ >
+ <path
+ clipRule="evenodd"
+ d="M67.421 34.842l37.842 3.263L76.579 63l8.579 37-32.526-19.632L20.105 100l8.632-37L0 38.105l37.842-3.21L52.632 0l14.79 34.842zm-34.58 47.632l19.79-11.948 19.842 12L67.21 60l17.474-15.158-23.053-2-9-21.263-8.947 21.21-23.053 2 17.474 15.158-5.263 22.527z"
+ fill="currentcolor"
+ fillRule="evenodd"
+ />
+ </svg>
+ <svg
+ alt="4"
+ aria-label="4"
+ fill="none"
+ role="img"
+ style={
+ Object {
+ "width": "20px",
+ }
+ }
+ viewBox="0 0 106 100"
+ >
+ <path
+ clipRule="evenodd"
+ d="M67.421 34.842l37.842 3.263L76.579 63l8.579 37-32.526-19.632L20.105 100l8.632-37L0 38.105l37.842-3.21L52.632 0l14.79 34.842zm-34.58 47.632l19.79-11.948 19.842 12L67.21 60l17.474-15.158-23.053-2-9-21.263-8.947 21.21-23.053 2 17.474 15.158-5.263 22.527z"
+ fill="currentcolor"
+ fillRule="evenodd"
+ />
+ </svg>
+ <svg
+ alt="5"
+ aria-label="5"
+ fill="none"
+ role="img"
+ style={
+ Object {
+ "width": "20px",
+ }
+ }
+ viewBox="0 0 106 100"
+ >
+ <path
+ clipRule="evenodd"
+ d="M67.421 34.842l37.842 3.263L76.579 63l8.579 37-32.526-19.632L20.105 100l8.632-37L0 38.105l37.842-3.21L52.632 0l14.79 34.842zm-34.58 47.632l19.79-11.948 19.842 12L67.21 60l17.474-15.158-23.053-2-9-21.263-8.947 21.21-23.053 2 17.474 15.158-5.263 22.527z"
+ fill="currentcolor"
+ fillRule="evenodd"
+ />
+ </svg>
</div>
</div>
`;
-exports[`Storyshots Molecules/Pin Logo + Pin Composition 1`] = `
-.c1 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-transform: rotate(0deg);
- -ms-transform: rotate(0deg);
- transform: rotate(0deg);
-}
-
-.c2 {
+exports[`Storyshots Molecules/Spinner Spinner 1`] = `
+.c0 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
- position: absolute;
- top: 30.76923076923077%;
- left: 30.76923076923077%;
- width: 15.384615384615383px;
- height: 15.384615384615383px;
- font-size: 0;
-}
-
-.c0 {
- position: relative;
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ -webkit-flex-direction: column;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ word-wrap: anywhere;
+ height: 100%;
+ width: 100%;
+ margin-left: auto;
+ margin-right: auto;
+ vertical-align: middle;
+ -webkit-animation: fTgkMB;
+ animation: fTgkMB;
+ -webkit-animation-duration: 2s;
+ animation-duration: 2s;
+ -webkit-animation-timing-function: linear;
+ animation-timing-function: linear;
+ -webkit-animation-iteration-count: infinite;
+ animation-iteration-count: infinite;
+ background: white;
+ border: 1px solid #1CB569;
+ border-radius: 50%;
+ height: 80px;
+ width: 80px;
}
<div
@@ -11704,90 +11174,215 @@ exports[`Storyshots Molecules/Pin Logo + Pin Composition 1`] = `
<div
className="c0"
>
- <div
- className="c1"
+ <svg
+ alt="Time Icon for loading indication"
+ aria-label="Time Icon for loading indication"
+ role="img"
+ style={
+ Object {
+ "width": "80px",
+ }
+ }
+ viewBox="0 0 90 90"
>
- <svg
- height="40px"
- version="1.1"
- viewBox="0 0 1000 1000"
- width="40px"
- xmlns="http://www.w3.org/2000/svg"
- >
+ <defs>
<path
- d="M502.56508,868.364664 C511.93155,862.588075 523.095822,855.151458 535.04456,846.573064 C568.356448,822.657358 601.727957,794.366431 631.986836,762.739204 C670.449872,722.536816 701.168462,679.73622 721.677407,634.99991 C745.587052,582.845627 754.91721,529.57787 747.526139,475.323915 C729.599303,343.732453 626.596403,250 499.286261,250 C372.372238,250 270.864911,343.231572 252.772718,475.337398 C244.509241,535.675767 254.910456,593.178228 281.38033,648.043223 C303.726517,694.360915 336.875734,737.501264 378.116754,777.203565C406.461936,804.491177 436.782663,828.440662 467.722026,849.417211 C478.177327,856.505791 487.661494,862.556978 497.309147,868.437102C497.961101,868.834461 498.885903,869.394858 499.886582,870 C500.740299,869.484354 501.635452,868.937995 502.56508,868.364664 Z M787.143802,465.995818 C823.586498,728.435484 499.257577,912.23147 499.257577,909.979533 C499.257577,907.727596 174.642224,742.049383 213.178319,465.995818C233.93758,317.286714 351.05416,210 499.22782,210 C647.401481,210 766.506373,317.376739 787.143802,465.995818 Z"
- fill="#1CB569"
+ d="M0 0h90v90H0z"
+ id="Time_svg__a"
/>
- </svg>
- </div>
- <div
- className="c2"
- size={2}
- >
- <svg
- size={0.7692307692307692}
- viewBox="0 0 400 200"
- >
- <defs>
- <path
- d="M0 0h400v200H0z"
- id="LingualaLogo_svg__a"
+ </defs>
+ <g
+ fill="none"
+ fillRule="evenodd"
+ >
+ <mask
+ fill="#fff"
+ id="Time_svg__b"
+ >
+ <use
+ xlinkHref="#Time_svg__a"
/>
- </defs>
+ </mask>
+ <path
+ d="M45 88.2C21.141 88.2 1.8 68.859 1.8 45S21.141 1.8 45 1.8 88.2 21.141 88.2 45 68.859 88.2 45 88.2z"
+ fill="#1CB569"
+ fillRule="nonzero"
+ mask="url(#Time_svg__b)"
+ />
<g
- fill="none"
+ fill="#FFF"
fillRule="nonzero"
+ stroke="#FFF"
>
<path
- d="M196.667 151.912c-9.553-9.799-18.017-20.255-25.33-30.717a223.362 223.362 0 0 1-6.73-10.18 117.96 117.96 0 0 1-2.462-4.12l-3.342-5.956 3.144-6.062c.142-.273.38-.719.713-1.326.527-.96 1.148-2.057 1.862-3.278a208.376 208.376 0 0 1 7.093-11.252c7.758-11.51 16.85-22.833 27.257-33.195 30.496-30.36 66.022-46.606 105.843-41.06 49.93 6.953 85.748 46.605 85.748 95.928 0 49.412-35.942 89.573-85.757 96.473-39.817 5.515-76.134-12.532-108.039-45.255zm-8.658-51.424a209.053 209.053 0 0 0 4.178 6.203c6.57 9.398 14.183 18.803 22.703 27.541 26.825 27.514 56.01 42.018 86.32 37.82 37.379-5.179 63.834-34.739 63.834-71.358 0-36.482-26.29-65.586-63.844-70.815-30.753-4.283-58.996 8.632-84.371 33.895-9.147 9.107-17.227 19.169-24.12 29.395a191.043 191.043 0 0 0-4.7 7.319z"
- fill="#4A90E2"
+ d="M70.813 21.375h6.124a1.313 1.313 0 0 0 0-2.625h-8.75c-.724 0-1.312.588-1.312 1.313v8.75a1.313 1.313 0 0 0 2.625 0v-4.98A32.043 32.043 0 0 1 77.375 45c0 17.88-14.495 32.375-32.375 32.375-17.88 0-32.375-14.495-32.375-32.375 0-17.88 14.495-32.375 32.375-32.375A1.313 1.313 0 0 0 45 10c-19.33 0-35 15.67-35 35s15.67 35 35 35 35-15.67 35-35a34.641 34.641 0 0 0-9.188-23.625z"
/>
<path
- d="M95.758 2.983c39.816-5.515 76.133 12.532 108.038 45.255 9.553 9.799 18.017 20.255 25.33 30.717a223.362 223.362 0 0 1 6.73 10.18c1.178 1.9 2.002 3.3 2.462 4.12l3.342 5.956-3.144 6.062c-.141.273-.38.719-.713 1.326a142.25 142.25 0 0 1-1.861 3.278 208.376 208.376 0 0 1-7.094 11.252c-7.758 11.51-16.85 22.833-27.257 33.195-30.495 30.36-66.022 46.606-105.842 41.06C45.817 188.431 10 148.78 10 99.456 10 50.044 45.942 9.883 95.758 2.983zm112.519 90.476c-6.57-9.398-14.183-18.803-22.703-27.541-26.826-27.514-56.01-42.018-86.32-37.82-37.38 5.179-63.835 34.739-63.835 71.358 0 36.482 26.29 65.586 63.844 70.815 30.754 4.283 58.996-8.633 84.372-33.895 9.147-9.107 17.226-19.169 24.118-29.395a190.58 190.58 0 0 0 4.702-7.319 209.05 209.05 0 0 0-4.178-6.203z"
- fill="#1CB569"
+ d="M21.375 45.438c0 13.289 10.773 24.062 24.063 24.062C58.727 69.5 69.5 58.727 69.5 45.437c0-13.289-10.773-24.062-24.063-24.062-13.283.014-24.048 10.78-24.062 24.063zm45.5 0c0 11.84-9.598 21.437-21.438 21.437C33.597 66.875 24 57.277 24 45.437 24 33.597 33.598 24 45.438 24c11.833.014 21.423 9.604 21.437 21.438z"
+ />
+ <path
+ d="M45 34.563v14.874c0 .531.3 1.01.76 1.212.46.203.988.09 1.34-.284L57.762 38.99a1.376 1.376 0 0 0-.03-1.823 1.176 1.176 0 0 0-1.709-.032l-8.562 9.135V34.562c0-.724-.551-1.312-1.23-1.312-.68 0-1.23.588-1.23 1.312z"
/>
</g>
- </svg>
- </div>
+ </g>
+ </svg>
</div>
</div>
</div>
`;
-exports[`Storyshots Molecules/Pin Text + Pin Composition 1`] = `
+exports[`Storyshots Organisms/FilterBar Filter Bar 1`] = `
+.c2 {
+ margin-left: 0;
+ padding-left: 0;
+}
+
.c3 {
- font-size: 0.20384615384615384rem;
- margin: 0.5rem auto;
- text-align: left;
- max-width: 240px;
- line-height: 1.55em;
+ -moz-appearance: none;
+ display: inline-block;
+ border-style: none;
+ border-radius: 3em;
+ min-width: 3em;
+ width: 100%;
+ padding: 0.5em 1em;
+ margin-right: 1em;
+ margin-top: 1em;
+ background-color: #1CB569 color:#FFFFFF;
}
-.c1 {
+.c0 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
- -webkit-transform: rotate(0deg);
- -ms-transform: rotate(0deg);
- transform: rotate(0deg);
+ -webkit-flex-direction: row;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ -webkit-flex-wrap: wrap;
+ -ms-flex-wrap: wrap;
+ flex-wrap: wrap;
+ -webkit-box-pack: start;
+ -webkit-justify-content: flex-start;
+ -ms-flex-pack: start;
+ justify-content: flex-start;
+ width: 100%;
}
-.c2 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- position: absolute;
- top: 30.76923076923077%;
- left: 30.76923076923077%;
- width: 15.384615384615383px;
- height: 15.384615384615383px;
- font-size: 0;
+.c1 {
+ min-width: 16em;
+ max-width: 16em;
+ margin: 2em;
}
-.c0 {
- position: relative;
+.c4 {
+ -webkit-appearance: none;
+ width: 100%;
+ background: transparent;
+ padding: 0.5em 0;
+ margin-right: 1em;
+ margin-top: 1em;
+}
+
+.c4::-webkit-slider-thumb {
+ -webkit-appearance: none;
+}
+
+.c4:focus {
+ outline: none;
+}
+
+.c4::-ms-track {
+ width: 100%;
+ cursor: pointer;
+ background: transparent;
+ border-color: transparent;
+ color: transparent;
+}
+
+.c4::-webkit-slider-thumb {
+ -webkit-appearance: none;
+ margin-top: -0.6em;
+ box-shadow: 0 1px 5px 0 rgba(0,0,0,0.2),0 3px 4px 0 rgba(0,0,0,0.12),0 2px 4px 0 rgba(0,0,0,0.14);
+ border: none;
+ height: 1.5em;
+ width: 1.5em;
+ border-radius: 1em;
+ background: #1CB569;
+ cursor: pointer;
+}
+
+.c4::-moz-range-thumb {
+ box-shadow: 0 1px 5px 0 rgba(0,0,0,0.2),0 3px 4px 0 rgba(0,0,0,0.12),0 2px 4px 0 rgba(0,0,0,0.14);
+ border: none;
+ height: 1.5em;
+ width: 1.5em;
+ border-radius: 1em;
+ background: #1CB569;
+ cursor: pointer;
+}
+
+.c4::-ms-thumb {
+ box-shadow: 0 1px 5px 0 rgba(0,0,0,0.2),0 3px 4px 0 rgba(0,0,0,0.12),0 2px 4px 0 rgba(0,0,0,0.14);
+ border: none;
+ height: 1.5em;
+ width: 1.5em;
+ border-radius: 1em;
+ background: #1CB569;
+ cursor: pointer;
+}
+
+.c4::-webkit-slider-runnable-track {
+ width: 100%;
+ height: 0.3em;
+ cursor: pointer;
+ box-shadow: 0 1px 5px 0 rgba(0,0,0,0.2),0 3px 4px 0 rgba(0,0,0,0.12),0 2px 4px 0 rgba(0,0,0,0.14);
+ background: #1CB569;
+ border-radius: 1.3px;
+}
+
+.c4:focus::-webkit-slider-runnable-track {
+ background: #1CB569;
+}
+
+.c4::-moz-range-track {
+ width: 100%;
+ height: 0.3em;
+ cursor: pointer;
+ box-shadow: 0 1px 5px 0 rgba(0,0,0,0.2),0 3px 4px 0 rgba(0,0,0,0.12),0 2px 4px 0 rgba(0,0,0,0.14);
+ background: #1CB569;
+ border-radius: 1.3px;
+}
+
+.c4::-ms-track {
+ width: 100%;
+ height: 0.3em;
+ cursor: pointer;
+ background: transparent;
+ border-color: transparent;
+ border-width: 16px 0;
+ color: transparent;
+}
+
+.c4::-ms-fill-lower {
+ background: #2a6495;
+ border: 0.2px solid #010101;
+ border-radius: 2.6px;
+ box-shadow: 0 1px 5px 0 rgba(0,0,0,0.2),0 3px 4px 0 rgba(0,0,0,0.12),0 2px 4px 0 rgba(0,0,0,0.14);
+}
+
+.c4:focus::-ms-fill-lower {
+ background: #1CB569;
+}
+
+.c4::-ms-fill-upper {
+ background: #1CB569;
+ border: 0.2px solid #010101;
+ border-radius: 2.6px;
+ box-shadow: 0 1px 5px 0 rgba(0,0,0,0.2),0 3px 4px 0 rgba(0,0,0,0.12),0 2px 4px 0 rgba(0,0,0,0.14);
+}
+
+.c4:focus::-ms-fill-upper {
+ background: #367ebd;
}
<div
@@ -11818,6438 +11413,815 @@ exports[`Storyshots Molecules/Pin Text + Pin Composition 1`] = `
<div
className="c1"
>
- <svg
- height="40px"
- version="1.1"
- viewBox="0 0 1000 1000"
- width="40px"
- xmlns="http://www.w3.org/2000/svg"
+ <label
+ className="c2"
+ htmlFor="from_language"
>
- <path
- d="M502.56508,868.364664 C511.93155,862.588075 523.095822,855.151458 535.04456,846.573064 C568.356448,822.657358 601.727957,794.366431 631.986836,762.739204 C670.449872,722.536816 701.168462,679.73622 721.677407,634.99991 C745.587052,582.845627 754.91721,529.57787 747.526139,475.323915 C729.599303,343.732453 626.596403,250 499.286261,250 C372.372238,250 270.864911,343.231572 252.772718,475.337398 C244.509241,535.675767 254.910456,593.178228 281.38033,648.043223 C303.726517,694.360915 336.875734,737.501264 378.116754,777.203565C406.461936,804.491177 436.782663,828.440662 467.722026,849.417211 C478.177327,856.505791 487.661494,862.556978 497.309147,868.437102C497.961101,868.834461 498.885903,869.394858 499.886582,870 C500.740299,869.484354 501.635452,868.937995 502.56508,868.364664 Z M787.143802,465.995818 C823.586498,728.435484 499.257577,912.23147 499.257577,909.979533 C499.257577,907.727596 174.642224,742.049383 213.178319,465.995818C233.93758,317.286714 351.05416,210 499.22782,210 C647.401481,210 766.506373,317.376739 787.143802,465.995818 Z"
- fill="#1CB569"
- />
- </svg>
- </div>
- <div
- className="c2"
- size={2}
- >
- <p
+ von Sprache
+ </label>
+ <select
className="c3"
- size={0.7692307692307692}
+ defaultValue=""
+ name="from_language"
+ onChange={[Function]}
+ placeholder="von Sprache"
>
- Linguala
- </p>
+ <option
+ disabled={true}
+ hidden={true}
+ value=""
+ >
+ von Sprache
+ </option>
+ <option
+ value="de"
+ >
+ Deutsch
+ </option>
+ <option
+ value="en"
+ >
+ Englisch
+ </option>
+ <option
+ value="nl"
+ >
+ Niederländisch, Belgisches Niederländisch
+ </option>
+ </select>
</div>
- </div>
- </div>
-</div>
-`;
-
-exports[`Storyshots Molecules/Rating FiveStarRating 1`] = `
-<div
- style={
- Object {
- "alignItems": "center",
- "bottom": "0",
- "display": "flex",
- "left": "0",
- "overflow": "auto",
- "position": "fixed",
- "right": "0",
- "top": "0",
- }
- }
->
- <div
- style={
- Object {
- "margin": "auto",
- "maxHeight": "100%",
- }
- }
- >
- <svg
- alt="1"
- aria-label="1"
- fill="none"
- role="img"
- style={
- Object {
- "width": "20px",
- }
- }
- viewBox="0 0 106 100"
- >
- <path
- d="M52.632 80.368L85.158 100l-8.632-37 28.737-24.895-37.842-3.21L52.631 0 37.843 34.895 0 38.105 28.737 63l-8.632 37 32.527-19.632z"
- fill="currentcolor"
- />
- </svg>
- <svg
- alt="2"
- aria-label="2"
- fill="none"
- role="img"
- style={
- Object {
- "width": "20px",
- }
- }
- viewBox="0 0 106 100"
- >
- <path
- d="M52.632 80.368L85.158 100l-8.632-37 28.737-24.895-37.842-3.21L52.631 0 37.843 34.895 0 38.105 28.737 63l-8.632 37 32.527-19.632z"
- fill="currentcolor"
- />
- </svg>
- <svg
- alt="3"
- aria-label="3"
- fill="none"
- role="img"
- style={
- Object {
- "width": "20px",
- }
- }
- viewBox="0 0 106 100"
- >
- <path
- clipRule="evenodd"
- d="M67.421 34.842l37.842 3.263L76.579 63l8.579 37-32.526-19.632L20.105 100l8.632-37L0 38.105l37.842-3.21L52.632 0l14.79 34.842zm-34.58 47.632l19.79-11.948 19.842 12L67.21 60l17.474-15.158-23.053-2-9-21.263-8.947 21.21-23.053 2 17.474 15.158-5.263 22.527z"
- fill="currentcolor"
- fillRule="evenodd"
- />
- </svg>
- <svg
- alt="4"
- aria-label="4"
- fill="none"
- role="img"
- style={
- Object {
- "width": "20px",
- }
- }
- viewBox="0 0 106 100"
- >
- <path
- clipRule="evenodd"
- d="M67.421 34.842l37.842 3.263L76.579 63l8.579 37-32.526-19.632L20.105 100l8.632-37L0 38.105l37.842-3.21L52.632 0l14.79 34.842zm-34.58 47.632l19.79-11.948 19.842 12L67.21 60l17.474-15.158-23.053-2-9-21.263-8.947 21.21-23.053 2 17.474 15.158-5.263 22.527z"
- fill="currentcolor"
- fillRule="evenodd"
- />
- </svg>
- <svg
- alt="5"
- aria-label="5"
- fill="none"
- role="img"
- style={
- Object {
- "width": "20px",
- }
- }
- viewBox="0 0 106 100"
- >
- <path
- clipRule="evenodd"
- d="M67.421 34.842l37.842 3.263L76.579 63l8.579 37-32.526-19.632L20.105 100l8.632-37L0 38.105l37.842-3.21L52.632 0l14.79 34.842zm-34.58 47.632l19.79-11.948 19.842 12L67.21 60l17.474-15.158-23.053-2-9-21.263-8.947 21.21-23.053 2 17.474 15.158-5.263 22.527z"
- fill="currentcolor"
- fillRule="evenodd"
- />
- </svg>
- </div>
-</div>
-`;
-
-exports[`Storyshots Molecules/Spinner Spinner 1`] = `
-.c0 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-box-pack: center;
- -webkit-justify-content: center;
- -ms-flex-pack: center;
- justify-content: center;
- -webkit-flex-direction: column;
- -ms-flex-direction: column;
- flex-direction: column;
- word-wrap: anywhere;
- height: 100%;
- width: 100%;
- margin-left: auto;
- margin-right: auto;
- vertical-align: middle;
- -webkit-animation: fTgkMB;
- animation: fTgkMB;
- -webkit-animation-duration: 2s;
- animation-duration: 2s;
- -webkit-animation-timing-function: linear;
- animation-timing-function: linear;
- -webkit-animation-iteration-count: infinite;
- animation-iteration-count: infinite;
- background: white;
- border: 1px solid #1CB569;
- border-radius: 50%;
- height: 80px;
- width: 80px;
-}
-
-<div
- style={
- Object {
- "alignItems": "center",
- "bottom": "0",
- "display": "flex",
- "left": "0",
- "overflow": "auto",
- "position": "fixed",
- "right": "0",
- "top": "0",
- }
- }
->
- <div
- style={
- Object {
- "margin": "auto",
- "maxHeight": "100%",
- }
- }
- >
- <div
- className="c0"
- >
- <svg
- alt="Time Icon for loading indication"
- aria-label="Time Icon for loading indication"
- role="img"
- style={
- Object {
- "width": "80px",
- }
- }
- viewBox="0 0 90 90"
+ <div
+ className="c1"
>
- <defs>
- <path
- d="M0 0h90v90H0z"
- id="Time_svg__a"
- />
- </defs>
- <g
- fill="none"
- fillRule="evenodd"
+ <label
+ className="c2"
+ htmlFor="to_language"
>
- <mask
- fill="#fff"
- id="Time_svg__b"
+ zu Sprache
+ </label>
+ <select
+ className="c3"
+ defaultValue=""
+ name="to_language"
+ onChange={[Function]}
+ placeholder="zu Sprache"
+ >
+ <option
+ disabled={true}
+ hidden={true}
+ value=""
>
- <use
- xlinkHref="#Time_svg__a"
- />
- </mask>
- <path
- d="M45 88.2C21.141 88.2 1.8 68.859 1.8 45S21.141 1.8 45 1.8 88.2 21.141 88.2 45 68.859 88.2 45 88.2z"
- fill="#1CB569"
- fillRule="nonzero"
- mask="url(#Time_svg__b)"
- />
- <g
- fill="#FFF"
- fillRule="nonzero"
- stroke="#FFF"
+ zu Sprache
+ </option>
+ <option
+ value="nl"
>
- <path
- d="M70.813 21.375h6.124a1.313 1.313 0 0 0 0-2.625h-8.75c-.724 0-1.312.588-1.312 1.313v8.75a1.313 1.313 0 0 0 2.625 0v-4.98A32.043 32.043 0 0 1 77.375 45c0 17.88-14.495 32.375-32.375 32.375-17.88 0-32.375-14.495-32.375-32.375 0-17.88 14.495-32.375 32.375-32.375A1.313 1.313 0 0 0 45 10c-19.33 0-35 15.67-35 35s15.67 35 35 35 35-15.67 35-35a34.641 34.641 0 0 0-9.188-23.625z"
- />
- <path
- d="M21.375 45.438c0 13.289 10.773 24.062 24.063 24.062C58.727 69.5 69.5 58.727 69.5 45.437c0-13.289-10.773-24.062-24.063-24.062-13.283.014-24.048 10.78-24.062 24.063zm45.5 0c0 11.84-9.598 21.437-21.438 21.437C33.597 66.875 24 57.277 24 45.437 24 33.597 33.598 24 45.438 24c11.833.014 21.423 9.604 21.437 21.438z"
- />
- <path
- d="M45 34.563v14.874c0 .531.3 1.01.76 1.212.46.203.988.09 1.34-.284L57.762 38.99a1.376 1.376 0 0 0-.03-1.823 1.176 1.176 0 0 0-1.709-.032l-8.562 9.135V34.562c0-.724-.551-1.312-1.23-1.312-.68 0-1.23.588-1.23 1.312z"
- />
- </g>
- </g>
- </svg>
- </div>
- </div>
-</div>
-`;
-
-exports[`Storyshots Molecules/TriShape TriShape Pin (default) 1`] = `
-.c8 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-transform: rotate(0deg);
- -ms-transform: rotate(0deg);
- transform: rotate(0deg);
-}
-
-.c4 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-transform: rotate(-45deg);
- -ms-transform: rotate(-45deg);
- transform: rotate(-45deg);
-}
-
-.c9 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-transform: rotate(45deg);
- -ms-transform: rotate(45deg);
- transform: rotate(45deg);
-}
-
-.c5 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- position: absolute;
- top: 30.76923076923077%;
- left: 30.76923076923077%;
- width: 23.076923076923073px;
- height: 23.076923076923073px;
- font-size: 0;
-}
-
-.c3 {
- position: relative;
-}
-
-.c1 {
- position: relative;
- top: 0.5em;
-}
-
-.c2 {
- overflow: hidden;
- width: 6em;
- height: 6em;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-pack: center;
- -webkit-justify-content: center;
- -ms-flex-pack: center;
- justify-content: center;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
-}
-
-.c7 {
- margin-top: 0;
- margin-bottom: 3em;
- margin-left: -1.9em;
- margin-right: -1.9em;
-}
-
-.c0 {
- background-color: seashell;
- box-shadow: 0 4px 5px 0 rgba(0,0,0,0.2),0 3px 14px 3px rgba(0,0,0,0.12),0 8px 10px 1px rgba(0,0,0,0.14);
-}
-
-.c6 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-pack: center;
- -webkit-justify-content: center;
- -ms-flex-pack: center;
- justify-content: center;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- margin: auto;
- height: 100%;
- width: 100%;
-}
-
-<div
- style={
- Object {
- "alignItems": "center",
- "bottom": "0",
- "display": "flex",
- "left": "0",
- "overflow": "auto",
- "position": "fixed",
- "right": "0",
- "top": "0",
- }
- }
->
- <div
- style={
- Object {
- "margin": "auto",
- "maxHeight": "100%",
- }
- }
- >
- <div
- className="c0"
- >
+ Niederländisch, Belgisches Niederländisch
+ </option>
+ <option
+ value="de"
+ >
+ Deutsch
+ </option>
+ <option
+ value="en"
+ >
+ Englisch
+ </option>
+ </select>
+ </div>
<div
className="c1"
- size={6}
>
- <div
+ <label
className="c2"
- size={6}
+ htmlFor="service"
>
- <div
- className="c3"
+ service
+ </label>
+ <select
+ className="c3"
+ defaultValue=""
+ name="service"
+ onChange={[Function]}
+ placeholder="service"
+ >
+ <option
+ disabled={true}
+ hidden={true}
+ value=""
>
- <div
- className="c4"
+ service
+ </option>
+ <optgroup
+ label="Ãœbersetzung"
+ >
+ <option
+ value="texttranslation"
>
- <svg
- height="60px"
- version="1.1"
- viewBox="0 0 1000 1000"
- width="60px"
- xmlns="http://www.w3.org/2000/svg"
- >
- <path
- d="M502.56508,868.364664 C511.93155,862.588075 523.095822,855.151458 535.04456,846.573064 C568.356448,822.657358 601.727957,794.366431 631.986836,762.739204 C670.449872,722.536816 701.168462,679.73622 721.677407,634.99991 C745.587052,582.845627 754.91721,529.57787 747.526139,475.323915 C729.599303,343.732453 626.596403,250 499.286261,250 C372.372238,250 270.864911,343.231572 252.772718,475.337398 C244.509241,535.675767 254.910456,593.178228 281.38033,648.043223 C303.726517,694.360915 336.875734,737.501264 378.116754,777.203565C406.461936,804.491177 436.782663,828.440662 467.722026,849.417211 C478.177327,856.505791 487.661494,862.556978 497.309147,868.437102C497.961101,868.834461 498.885903,869.394858 499.886582,870 C500.740299,869.484354 501.635452,868.937995 502.56508,868.364664 Z M787.143802,465.995818 C823.586498,728.435484 499.257577,912.23147 499.257577,909.979533 C499.257577,907.727596 174.642224,742.049383 213.178319,465.995818C233.93758,317.286714 351.05416,210 499.22782,210 C647.401481,210 766.506373,317.376739 787.143802,465.995818 Z"
- fill="#1CB569"
- />
- </svg>
- </div>
- <div
- className="c5"
- size={3}
+ Textübersetzung
+ </option>
+ <option
+ value="audiotranslation"
>
- <div
- className="c6"
- size={1.1538461538461537}
- >
- L
- </div>
- </div>
- </div>
- <div
- className="c7"
- size={3}
- >
- <div
- className="c3"
+ Audioübersetzung
+ </option>
+ <option
+ value="localisation"
>
- <div
- className="c8"
- >
- <svg
- height="60px"
- version="1.1"
- viewBox="0 0 1000 1000"
- width="60px"
- xmlns="http://www.w3.org/2000/svg"
- >
- <path
- d="M502.56508,868.364664 C511.93155,862.588075 523.095822,855.151458 535.04456,846.573064 C568.356448,822.657358 601.727957,794.366431 631.986836,762.739204 C670.449872,722.536816 701.168462,679.73622 721.677407,634.99991 C745.587052,582.845627 754.91721,529.57787 747.526139,475.323915 C729.599303,343.732453 626.596403,250 499.286261,250 C372.372238,250 270.864911,343.231572 252.772718,475.337398 C244.509241,535.675767 254.910456,593.178228 281.38033,648.043223 C303.726517,694.360915 336.875734,737.501264 378.116754,777.203565C406.461936,804.491177 436.782663,828.440662 467.722026,849.417211 C478.177327,856.505791 487.661494,862.556978 497.309147,868.437102C497.961101,868.834461 498.885903,869.394858 499.886582,870 C500.740299,869.484354 501.635452,868.937995 502.56508,868.364664 Z M787.143802,465.995818 C823.586498,728.435484 499.257577,912.23147 499.257577,909.979533 C499.257577,907.727596 174.642224,742.049383 213.178319,465.995818C233.93758,317.286714 351.05416,210 499.22782,210 C647.401481,210 766.506373,317.376739 787.143802,465.995818 Z"
- fill="#1CB569"
- />
- </svg>
- </div>
- <div
- className="c5"
- size={3}
- >
- <div
- className="c6"
- size={1.1538461538461537}
- >
- M
- </div>
- </div>
- </div>
- </div>
- <div
- className="c3"
+ Lokalisierung
+ </option>
+ </optgroup>
+ <optgroup
+ label="Dolmetschen"
>
- <div
- className="c9"
+ <option
+ value="conferencedolmetsch"
>
- <svg
- height="60px"
- version="1.1"
- viewBox="0 0 1000 1000"
- width="60px"
- xmlns="http://www.w3.org/2000/svg"
- >
- <path
- d="M502.56508,868.364664 C511.93155,862.588075 523.095822,855.151458 535.04456,846.573064 C568.356448,822.657358 601.727957,794.366431 631.986836,762.739204 C670.449872,722.536816 701.168462,679.73622 721.677407,634.99991 C745.587052,582.845627 754.91721,529.57787 747.526139,475.323915 C729.599303,343.732453 626.596403,250 499.286261,250 C372.372238,250 270.864911,343.231572 252.772718,475.337398 C244.509241,535.675767 254.910456,593.178228 281.38033,648.043223 C303.726517,694.360915 336.875734,737.501264 378.116754,777.203565C406.461936,804.491177 436.782663,828.440662 467.722026,849.417211 C478.177327,856.505791 487.661494,862.556978 497.309147,868.437102C497.961101,868.834461 498.885903,869.394858 499.886582,870 C500.740299,869.484354 501.635452,868.937995 502.56508,868.364664 Z M787.143802,465.995818 C823.586498,728.435484 499.257577,912.23147 499.257577,909.979533 C499.257577,907.727596 174.642224,742.049383 213.178319,465.995818C233.93758,317.286714 351.05416,210 499.22782,210 C647.401481,210 766.506373,317.376739 787.143802,465.995818 Z"
- fill="#1CB569"
- />
- </svg>
- </div>
- <div
- className="c5"
- size={3}
+ Konferenzdolmetschen
+ </option>
+ <option
+ value="simultaneousdolmetsch"
>
- <div
- className="c6"
- size={1.1538461538461537}
- >
- R
- </div>
- </div>
- </div>
- </div>
+ Simultandolmetschen
+ </option>
+ <option
+ value="consecutivedolmetsch"
+ >
+ Konsekutivdolmetschen
+ </option>
+ </optgroup>
+ </select>
</div>
- </div>
- </div>
-</div>
-`;
-
-exports[`Storyshots Molecules/TriShape TriShape Pin (sizeable) 1`] = `
-.c8 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-transform: rotate(0deg);
- -ms-transform: rotate(0deg);
- transform: rotate(0deg);
-}
-
-.c4 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-transform: rotate(-45deg);
- -ms-transform: rotate(-45deg);
- transform: rotate(-45deg);
-}
-
-.c9 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-transform: rotate(45deg);
- -ms-transform: rotate(45deg);
- transform: rotate(45deg);
-}
-
-.c5 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- position: absolute;
- top: 30.76923076923077%;
- left: 30.76923076923077%;
- width: 92.30769230769229px;
- height: 92.30769230769229px;
- font-size: 0;
-}
-
-.c3 {
- position: relative;
-}
-
-.c1 {
- position: relative;
- top: 2em;
-}
-
-.c2 {
- overflow: hidden;
- width: 24em;
- height: 24em;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-pack: center;
- -webkit-justify-content: center;
- -ms-flex-pack: center;
- justify-content: center;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
-}
-
-.c7 {
- margin-top: 0;
- margin-bottom: 12em;
- margin-left: -7.6em;
- margin-right: -7.6em;
-}
-
-.c0 {
- background-color: seashell;
- box-shadow: 0 4px 5px 0 rgba(0,0,0,0.2),0 3px 14px 3px rgba(0,0,0,0.12),0 8px 10px 1px rgba(0,0,0,0.14);
-}
-
-.c6 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-pack: center;
- -webkit-justify-content: center;
- -ms-flex-pack: center;
- justify-content: center;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- margin: auto;
- height: 100%;
- width: 100%;
-}
-
-<div
- style={
- Object {
- "alignItems": "center",
- "bottom": "0",
- "display": "flex",
- "left": "0",
- "overflow": "auto",
- "position": "fixed",
- "right": "0",
- "top": "0",
- }
- }
->
- <div
- style={
- Object {
- "margin": "auto",
- "maxHeight": "100%",
- }
- }
- >
- <div
- className="c0"
- >
<div
className="c1"
- size={24}
>
- <div
+ <label
className="c2"
- size={24}
+ htmlFor="fachgebiete"
>
- <div
- className="c3"
+ fachgebiete
+ </label>
+ <select
+ className="c3"
+ defaultValue=""
+ name="fachgebiete"
+ onChange={[Function]}
+ placeholder="fachgebiete"
+ >
+ <option
+ disabled={true}
+ hidden={true}
+ value=""
>
- <div
- className="c4"
- >
- <svg
- height="240px"
- version="1.1"
- viewBox="0 0 1000 1000"
- width="240px"
- xmlns="http://www.w3.org/2000/svg"
- >
- <path
- d="M502.56508,868.364664 C511.93155,862.588075 523.095822,855.151458 535.04456,846.573064 C568.356448,822.657358 601.727957,794.366431 631.986836,762.739204 C670.449872,722.536816 701.168462,679.73622 721.677407,634.99991 C745.587052,582.845627 754.91721,529.57787 747.526139,475.323915 C729.599303,343.732453 626.596403,250 499.286261,250 C372.372238,250 270.864911,343.231572 252.772718,475.337398 C244.509241,535.675767 254.910456,593.178228 281.38033,648.043223 C303.726517,694.360915 336.875734,737.501264 378.116754,777.203565C406.461936,804.491177 436.782663,828.440662 467.722026,849.417211 C478.177327,856.505791 487.661494,862.556978 497.309147,868.437102C497.961101,868.834461 498.885903,869.394858 499.886582,870 C500.740299,869.484354 501.635452,868.937995 502.56508,868.364664 Z M787.143802,465.995818 C823.586498,728.435484 499.257577,912.23147 499.257577,909.979533 C499.257577,907.727596 174.642224,742.049383 213.178319,465.995818C233.93758,317.286714 351.05416,210 499.22782,210 C647.401481,210 766.506373,317.376739 787.143802,465.995818 Z"
- fill="#1CB569"
- />
- </svg>
- </div>
- <div
- className="c5"
- size={12}
- >
- <div
- className="c6"
- size={4.615384615384615}
- >
- left
- </div>
- </div>
- </div>
- <div
- className="c7"
- size={12}
+ fachgebiete
+ </option>
+ <option
+ value="wirtschaft"
>
- <div
- className="c3"
- >
- <div
- className="c8"
- >
- <svg
- height="240px"
- version="1.1"
- viewBox="0 0 1000 1000"
- width="240px"
- xmlns="http://www.w3.org/2000/svg"
- >
- <path
- d="M502.56508,868.364664 C511.93155,862.588075 523.095822,855.151458 535.04456,846.573064 C568.356448,822.657358 601.727957,794.366431 631.986836,762.739204 C670.449872,722.536816 701.168462,679.73622 721.677407,634.99991 C745.587052,582.845627 754.91721,529.57787 747.526139,475.323915 C729.599303,343.732453 626.596403,250 499.286261,250 C372.372238,250 270.864911,343.231572 252.772718,475.337398 C244.509241,535.675767 254.910456,593.178228 281.38033,648.043223 C303.726517,694.360915 336.875734,737.501264 378.116754,777.203565C406.461936,804.491177 436.782663,828.440662 467.722026,849.417211 C478.177327,856.505791 487.661494,862.556978 497.309147,868.437102C497.961101,868.834461 498.885903,869.394858 499.886582,870 C500.740299,869.484354 501.635452,868.937995 502.56508,868.364664 Z M787.143802,465.995818 C823.586498,728.435484 499.257577,912.23147 499.257577,909.979533 C499.257577,907.727596 174.642224,742.049383 213.178319,465.995818C233.93758,317.286714 351.05416,210 499.22782,210 C647.401481,210 766.506373,317.376739 787.143802,465.995818 Z"
- fill="#1CB569"
- />
- </svg>
- </div>
- <div
- className="c5"
- size={12}
- >
- <div
- className="c6"
- size={4.615384615384615}
- >
- middle
- </div>
- </div>
- </div>
- </div>
- <div
- className="c3"
+ Wirtschaft
+ </option>
+ <option
+ value="marketing"
>
- <div
- className="c9"
- >
- <svg
- height="240px"
- version="1.1"
- viewBox="0 0 1000 1000"
- width="240px"
- xmlns="http://www.w3.org/2000/svg"
- >
- <path
- d="M502.56508,868.364664 C511.93155,862.588075 523.095822,855.151458 535.04456,846.573064 C568.356448,822.657358 601.727957,794.366431 631.986836,762.739204 C670.449872,722.536816 701.168462,679.73622 721.677407,634.99991 C745.587052,582.845627 754.91721,529.57787 747.526139,475.323915 C729.599303,343.732453 626.596403,250 499.286261,250 C372.372238,250 270.864911,343.231572 252.772718,475.337398 C244.509241,535.675767 254.910456,593.178228 281.38033,648.043223 C303.726517,694.360915 336.875734,737.501264 378.116754,777.203565C406.461936,804.491177 436.782663,828.440662 467.722026,849.417211 C478.177327,856.505791 487.661494,862.556978 497.309147,868.437102C497.961101,868.834461 498.885903,869.394858 499.886582,870 C500.740299,869.484354 501.635452,868.937995 502.56508,868.364664 Z M787.143802,465.995818 C823.586498,728.435484 499.257577,912.23147 499.257577,909.979533 C499.257577,907.727596 174.642224,742.049383 213.178319,465.995818C233.93758,317.286714 351.05416,210 499.22782,210 C647.401481,210 766.506373,317.376739 787.143802,465.995818 Z"
- fill="#1CB569"
- />
- </svg>
- </div>
- <div
- className="c5"
- size={12}
- >
- <div
- className="c6"
- size={4.615384615384615}
- >
- right
- </div>
- </div>
- </div>
- </div>
+ marketing
+ </option>
+ <option
+ value="recht"
+ >
+ recht
+ </option>
+ <option
+ value="technologie"
+ >
+ technologie
+ </option>
+ <option
+ value="medizin"
+ >
+ medizin
+ </option>
+ <option
+ value="sonstige fachgebiete"
+ >
+ sonstige fachgebiete
+ </option>
+ </select>
</div>
- </div>
- </div>
-</div>
-`;
-
-exports[`Storyshots Organisms/AddressBubble AddressBubble/default 1`] = `
-.c2 {
- font-size: 1rem;
- margin: 0.5rem auto;
- text-align: left;
- max-width: 240px;
- line-height: 1.55em;
-}
-
-.c7 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-transform: rotate(0deg);
- -ms-transform: rotate(0deg);
- transform: rotate(0deg);
-}
-
-.c6 {
- position: relative;
-}
-
-.c0 {
- background-color: white;
- padding: 1rem;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-align-items: stretch;
- -webkit-box-align: stretch;
- -ms-flex-align: stretch;
- align-items: stretch;
- -webkit-align-content: stretch;
- -ms-flex-line-pack: stretch;
- align-content: stretch;
- -webkit-box-pack: justify;
- -webkit-justify-content: space-between;
- -ms-flex-pack: justify;
- justify-content: space-between;
- -webkit-flex-direction: column;
- -ms-flex-direction: column;
- flex-direction: column;
- border-radius: 3rem;
- border-width: 0;
- border-style: solid;
- box-shadow: 0 1px 5px 0 rgba(0,0,0,0.2),0 3px 4px 0 rgba(0,0,0,0.12),0 2px 4px 0 rgba(0,0,0,0.14);
-}
-
-.c0 > * {
- -webkit-flex: 1 auto;
- -ms-flex: 1 auto;
- flex: 1 auto;
-}
-
-.c3 {
- background: #1CB569;
- padding-left: 0.5rem;
- padding-bottom: 0;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-align-content: stretch;
- -ms-flex-line-pack: stretch;
- align-content: stretch;
- -webkit-box-pack: justify;
- -webkit-justify-content: space-between;
- -ms-flex-pack: justify;
- justify-content: space-between;
- -webkit-flex-direction: column;
- -ms-flex-direction: column;
- flex-direction: column;
- border-radius: 3rem;
- border-width: 0;
- border-style: solid;
- box-shadow: 0px 4px 5px 0 rgba(0,0,0,0.2),0 3px 14px 3px rgba(0,0,0,0.12),0 8px 10px 1px rgba(0,0,0,0.14);
- margin: 0 0.5rem 0.5rem 0.5rem;
-}
-
-.c3 > * {
- -webkit-flex: 1 auto;
- -ms-flex: 1 auto;
- flex: 1 auto;
-}
-
-.c1 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-align-items: flex-end;
- -webkit-box-align: flex-end;
- -ms-flex-align: flex-end;
- align-items: flex-end;
- -webkit-box-pack: start;
- -webkit-justify-content: flex-start;
- -ms-flex-pack: start;
- justify-content: flex-start;
- margin: 1rem;
- margin-bottom: 0.5rem;
- color: #9B9B9B;
-}
-
-.c9 {
- color: #1CB569;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-flex-direction: row;
- -ms-flex-direction: row;
- flex-direction: row;
- -webkit-box-pack: start;
- -webkit-justify-content: flex-start;
- -ms-flex-pack: start;
- justify-content: flex-start;
- -webkit-align-content: space-around;
- -ms-flex-line-pack: space-around;
- align-content: space-around;
-}
-
-.c4 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- font-weight: light;
- text-transform: lowercase;
- font-size: 1rem;
- -webkit-box-pack: start;
- -webkit-justify-content: flex-start;
- -ms-flex-pack: start;
- justify-content: flex-start;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-flex-direction: row;
- -ms-flex-direction: row;
- flex-direction: row;
- margin: 0;
- font-family: Libre Baskerville,Helvetica,Arial,serif;
- color: #FFFFFF;
-}
-
-.c5 {
- width: 2rem;
- -webkit-box-pack: center;
- -webkit-justify-content: center;
- -ms-flex-pack: center;
- justify-content: center;
- padding-top: 0.5rem;
-}
-
-.c8 {
- padding-left: 0.5rem;
-}
-
-<div
- style={
- Object {
- "alignItems": "center",
- "bottom": "0",
- "display": "flex",
- "left": "0",
- "overflow": "auto",
- "position": "fixed",
- "right": "0",
- "top": "0",
- }
- }
->
- <div
- style={
- Object {
- "margin": "auto",
- "maxHeight": "100%",
- }
- }
- >
- <div
- className="c0"
- >
<div
className="c1"
>
- <svg
- alt="1"
- aria-label="1"
- fill="none"
- role="img"
- style={
- Object {
- "width": "40px",
- }
- }
- viewBox="0 0 106 100"
- >
- <path
- clipRule="evenodd"
- d="M67.421 34.842l37.842 3.263L76.579 63l8.579 37-32.526-19.632L20.105 100l8.632-37L0 38.105l37.842-3.21L52.632 0l14.79 34.842zm-34.58 47.632l19.79-11.948 19.842 12L67.21 60l17.474-15.158-23.053-2-9-21.263-8.947 21.21-23.053 2 17.474 15.158-5.263 22.527z"
- fill="currentcolor"
- fillRule="evenodd"
- />
- </svg>
- <svg
- alt="2"
- aria-label="2"
- fill="none"
- role="img"
- style={
- Object {
- "width": "40px",
- }
- }
- viewBox="0 0 106 100"
- >
- <path
- clipRule="evenodd"
- d="M67.421 34.842l37.842 3.263L76.579 63l8.579 37-32.526-19.632L20.105 100l8.632-37L0 38.105l37.842-3.21L52.632 0l14.79 34.842zm-34.58 47.632l19.79-11.948 19.842 12L67.21 60l17.474-15.158-23.053-2-9-21.263-8.947 21.21-23.053 2 17.474 15.158-5.263 22.527z"
- fill="currentcolor"
- fillRule="evenodd"
- />
- </svg>
- <svg
- alt="3"
- aria-label="3"
- fill="none"
- role="img"
- style={
- Object {
- "width": "40px",
- }
- }
- viewBox="0 0 106 100"
- >
- <path
- clipRule="evenodd"
- d="M67.421 34.842l37.842 3.263L76.579 63l8.579 37-32.526-19.632L20.105 100l8.632-37L0 38.105l37.842-3.21L52.632 0l14.79 34.842zm-34.58 47.632l19.79-11.948 19.842 12L67.21 60l17.474-15.158-23.053-2-9-21.263-8.947 21.21-23.053 2 17.474 15.158-5.263 22.527z"
- fill="currentcolor"
- fillRule="evenodd"
- />
- </svg>
- <svg
- alt="4"
- aria-label="4"
- fill="none"
- role="img"
- style={
- Object {
- "width": "40px",
- }
- }
- viewBox="0 0 106 100"
- >
- <path
- clipRule="evenodd"
- d="M67.421 34.842l37.842 3.263L76.579 63l8.579 37-32.526-19.632L20.105 100l8.632-37L0 38.105l37.842-3.21L52.632 0l14.79 34.842zm-34.58 47.632l19.79-11.948 19.842 12L67.21 60l17.474-15.158-23.053-2-9-21.263-8.947 21.21-23.053 2 17.474 15.158-5.263 22.527z"
- fill="currentcolor"
- fillRule="evenodd"
- />
- </svg>
- <svg
- alt="5"
- aria-label="5"
- fill="none"
- role="img"
- style={
- Object {
- "width": "40px",
- }
- }
- viewBox="0 0 106 100"
- >
- <path
- clipRule="evenodd"
- d="M67.421 34.842l37.842 3.263L76.579 63l8.579 37-32.526-19.632L20.105 100l8.632-37L0 38.105l37.842-3.21L52.632 0l14.79 34.842zm-34.58 47.632l19.79-11.948 19.842 12L67.21 60l17.474-15.158-23.053-2-9-21.263-8.947 21.21-23.053 2 17.474 15.158-5.263 22.527z"
- fill="currentcolor"
- fillRule="evenodd"
- />
- </svg>
- <p
+ <label
className="c2"
- style={
- Object {
- "margin": "0",
- }
- }
+ htmlFor="land1"
>
- basierend auf
- 0
- bewertungen
- </p>
- </div>
- <div
- className="c3"
- >
- <div
- className="c4"
+ Land
+ </label>
+ <select
+ className="c3"
+ defaultValue=""
+ name="land1"
+ onChange={[Function]}
+ placeholder="Land"
>
- <div
- className="c5"
+ <option
+ disabled={true}
+ hidden={true}
+ value=""
>
- <div
- className="c6"
- style={
- Object {
- "paddingBottom": "0.8rem",
- }
- }
- >
- <div
- className="c7"
- >
- <svg
- height="36px"
- version="1.1"
- viewBox="0 0 1000 1000"
- width="36px"
- xmlns="http://www.w3.org/2000/svg"
- >
- <path
- d="M787.143802,465.995818 C766.506373,317.376739 647.401481,210 499.22782,210 C351.05416,210 233.93758,317.286714 213.178319,465.995818 C174.642224,742.049383 499.257577,907.727596 499.257577,909.979533 C499.257577,912.23147 823.586498,728.435484 787.143802,465.995818 Z"
- fill="white"
- />
- </svg>
- </div>
- </div>
- </div>
- <div
- className="c8"
+ Land
+ </option>
+ <option
+ value="CH"
>
- <p
- className="c2"
- style={
- Object {
- "margin": "0",
- }
- }
- >
- n/a
- </p>
- </div>
- </div>
+ Schweiz
+ </option>
+ <option
+ value="DE"
+ >
+ Deutschland
+ </option>
+ <option
+ value="FR"
+ >
+ Frankreich
+ </option>
+ </select>
</div>
<div
- className="c3"
+ className="c1"
>
- <div
- className="c4"
- >
- <div
- className="c5"
- >
- <svg
- alt="n/a"
- aria-label="n/a"
- role="img"
- style={
- Object {
- "width": "26px",
- }
- }
- viewBox="0 0 25 25"
- >
- <g
- fill="none"
- fillRule="evenodd"
- >
- <circle
- cx={12.5}
- cy={12.5}
- fill="#1CB569"
- r={12.5}
- />
- <path
- d="M8.017 11.492a12.624 12.624 0 0 0 5.491 5.491l1.834-1.833a.829.829 0 0 1 .85-.2 9.506 9.506 0 0 0 2.975.475c.458 0 .833.375.833.833v2.909a.836.836 0 0 1-.833.833C11.342 20 5 13.658 5 5.833 5 5.375 5.375 5 5.833 5H8.75c.458 0 .833.375.833.833 0 1.042.167 2.042.475 2.975a.836.836 0 0 1-.208.85l-1.833 1.834z"
- fill="#FFF"
- fillRule="nonzero"
- />
- </g>
- </svg>
- </div>
- <div
- className="c8"
- >
- <p
- className="c2"
- style={
- Object {
- "margin": "0",
- }
- }
- >
- n/a
- </p>
- </div>
- </div>
- </div>
- <div
- className="c3"
- >
- <div
- className="c4"
- >
- <div
- className="c5"
- >
- <svg
- alt="n/a"
- aria-label="n/a"
- role="img"
- style={
- Object {
- "width": "20px",
- }
- }
- viewBox="0 0 28 28"
- >
- <g
- fill="none"
- fillRule="evenodd"
- >
- <path
- d="M14.5 27C7.596 27 2 21.404 2 14.5S7.596 2 14.5 2 27 7.596 27 14.5 21.404 27 14.5 27z"
- fill="#1CB569"
- fillRule="nonzero"
- stroke="#FFF"
- />
- <path
- d="M14 5c-4.968 0-9 4.032-9 9s4.032 9 9 9h4.5v-1.8H14c-3.906 0-7.2-3.294-7.2-7.2s3.294-7.2 7.2-7.2 7.2 3.294 7.2 7.2v1.287c0 .711-.639 1.413-1.35 1.413-.711 0-1.35-.702-1.35-1.413V14c0-2.484-2.016-4.5-4.5-4.5A4.502 4.502 0 0 0 9.5 14a4.502 4.502 0 0 0 7.686 3.177c.585.801 1.593 1.323 2.664 1.323 1.773 0 3.15-1.44 3.15-3.213V14c0-4.968-4.032-9-9-9zm0 11.7a2.696 2.696 0 0 1-2.7-2.7c0-1.494 1.206-2.7 2.7-2.7 1.494 0 2.7 1.206 2.7 2.7 0 1.494-1.206 2.7-2.7 2.7z"
- fill="#FFF"
- />
- </g>
- </svg>
- </div>
- <div
- className="c8"
- >
- <p
- className="c2"
- >
- n/a
- </p>
- </div>
- </div>
- </div>
- <div
- className="c3"
- >
- <div
- className="c4"
- >
- <div
- className="c5"
- >
- <svg
- alt="n/a"
- aria-label="n/a"
- fill="none"
- role="img"
- style={
- Object {
- "width": "28px",
- }
- }
- viewBox="0 0 25 25"
- >
- <mask
- height={25}
- id="Worldwideweb_svg__a"
- maskUnits="userSpaceOnUse"
- width={25}
- x={0}
- y={0}
- >
- <path
- d="M0 0h25v25H0z"
- fill="#fff"
- />
- </mask>
- <g
- mask="url(#Worldwideweb_svg__a)"
- >
- <path
- clipRule="evenodd"
- d="M24.5 12.5c0 6.627-5.373 12-12 12s-12-5.373-12-12 5.373-12 12-12 12 5.373 12 12z"
- fill="#1CB569"
- fillRule="evenodd"
- />
- </g>
- <g>
- <path
- d="M21.083 6.564c.23 0 .417-.191.417-.427a.422.422 0 0 0-.417-.428.422.422 0 0 0-.416.428c0 .236.186.427.416.427zM19.417 6.564c.23 0 .416-.191.416-.427a.422.422 0 0 0-.416-.428.422.422 0 0 0-.417.428c0 .236.186.427.417.427zM17.75 6.564c.23 0 .417-.191.417-.427a.422.422 0 0 0-.417-.428.422.422 0 0 0-.416.428c0 .236.186.427.416.427z"
- fill="#fff"
- />
- <path
- d="M1 9h23"
- stroke="#fff"
- strokeLinecap="round"
- strokeLinejoin="round"
- />
- <path
- clipRule="evenodd"
- d="M7.336 15.776c0 .212-.037.41-.11.592a1.411 1.411 0 0 1-.778.79 1.564 1.564 0 0 1-.607.113c-.269 0-.503-.057-.702-.17a1.255 1.255 0 0 1-.475-.475c-.116.202-.273.36-.47.474-.198.114-.43.171-.699.171-.222 0-.425-.038-.607-.114a1.411 1.411 0 0 1-.778-.79 1.57 1.57 0 0 1-.11-.591V13.27h.645v2.505c0 .253.077.462.232.626.154.165.36.247.618.247s.465-.082.619-.247a.878.878 0 0 0 .231-.626V13.27h.646v2.505c0 .253.077.462.231.626.154.165.36.247.619.247.258 0 .464-.082.618-.247a.878.878 0 0 0 .232-.626V13.27h.645v2.505zM15.186 15.776c0 .212-.037.41-.11.592a1.411 1.411 0 0 1-.778.79 1.564 1.564 0 0 1-.607.113c-.269 0-.503-.057-.702-.17a1.255 1.255 0 0 1-.475-.475c-.116.202-.273.36-.47.474-.198.114-.43.171-.699.171-.222 0-.425-.038-.607-.114a1.41 1.41 0 0 1-.778-.79 1.57 1.57 0 0 1-.11-.591V13.27h.645v2.505c0 .253.077.462.232.626.154.165.36.247.618.247s.465-.082.619-.247a.878.878 0 0 0 .231-.626V13.27h.646v2.505c0 .253.077.462.231.626.154.165.36.247.619.247.258 0 .464-.082.618-.247a.879.879 0 0 0 .232-.626V13.27h.645v2.505zM23.036 15.776c0 .212-.037.41-.11.592a1.411 1.411 0 0 1-.778.79 1.564 1.564 0 0 1-.607.113c-.268 0-.502-.057-.702-.17a1.255 1.255 0 0 1-.475-.475c-.116.202-.273.36-.47.474-.198.114-.43.171-.698.171-.223 0-.426-.038-.608-.114a1.41 1.41 0 0 1-.778-.79 1.57 1.57 0 0 1-.11-.591V13.27h.645v2.505c0 .253.078.462.232.626.154.165.36.247.618.247s.465-.082.619-.247a.878.878 0 0 0 .232-.626V13.27h.645v2.505c0 .253.077.462.231.626.154.165.36.247.619.247.258 0 .464-.082.618-.247a.879.879 0 0 0 .232-.626V13.27h.645v2.505z"
- fill="#fff"
- fillRule="evenodd"
- />
- </g>
- </svg>
- </div>
- <div
- className="c8"
- >
- <p
- className="c2"
- style={
- Object {
- "margin": "0",
- }
- }
- >
- n/a
- </p>
- </div>
- </div>
- </div>
- <div
- className="c4"
- >
- <div
- className="c9"
- >
- <div
- className="c8"
- >
- <svg
- alt="Facebook"
- aria-label="Facebook"
- fill="none"
- role="img"
- style={
- Object {
- "width": "60px",
- }
- }
- viewBox="0.5 0.5 100 100"
- >
- <path
- clipRule="evenodd"
- d="M100.5 50.5c0 27.614-22.386 50-50 50s-50-22.386-50-50 22.386-50 50-50 50 22.386 50 50zm-45.476-.06h8.546l1.131-10.994h-9.676V32.97c0-2.429 1.605-2.999 2.746-2.999h6.96v-10.68l-9.592-.041c-10.645 0-13.064 7.974-13.064 13.066v7.12h-6.158V50.44h6.158v31.31h12.949V50.44z"
- fill="currentcolor"
- fillRule="evenodd"
- />
- </svg>
- </div>
- <div
- className="c8"
- >
- <svg
- alt="Instagram"
- aria-label="Instagram"
- fill="none"
- role="img"
- style={
- Object {
- "width": "60px",
- }
- }
- viewBox="0.5 0.5 100 100"
- >
- <path
- clipRule="evenodd"
- d="M100.5 50.5c0 27.614-22.386 50-50 50s-50-22.386-50-50 22.386-50 50-50 50 22.386 50 50zM72.58 19.25H32.586c-5.063 0-9.17 4.108-9.17 9.18V68.42c0 5.063 4.107 9.171 9.17 9.171H72.58c5.063 0 9.171-4.108 9.171-9.17V28.428c0-5.071-4.108-9.179-9.17-9.179zm-6.203 6.748l7.33-.018h.017a1.264 1.264 0 0 1 1.277 1.26v7.355c0 .704-.565 1.268-1.268 1.268l-7.321.026a1.262 1.262 0 0 1-1.268-1.259l-.026-7.356a1.264 1.264 0 0 1 1.26-1.276zM44.26 42.438c-.226.312-.426.642-.617.972a10.124 10.124 0 0 0-1.329 5.011c0 5.662 4.603 10.265 10.265 10.265 5.662 0 10.274-4.603 10.274-10.265 0-1.815-.495-3.526-1.329-5.002a10.35 10.35 0 0 0-.617-.982c-1.867-2.587-4.898-4.281-8.328-4.281-3.422 0-6.452 1.694-8.32 4.281zM76.07 66.32a5.6 5.6 0 0 1-5.593 5.592H34.69a5.6 5.6 0 0 1-5.593-5.592V42.437h8.71a15.24 15.24 0 0 0-.564 1.642 15.61 15.61 0 0 0-.608 4.342c0 8.797 7.156 15.953 15.945 15.953 8.797 0 15.953-7.156 15.953-15.953a15.94 15.94 0 0 0-.608-4.342 17.409 17.409 0 0 0-.564-1.642h8.71V66.32z"
- fill="currentcolor"
- fillRule="evenodd"
- />
- </svg>
- </div>
- <div
- className="c8"
- >
- <svg
- alt="Twitter"
- aria-label="Twitter"
- fill="none"
- role="img"
- style={
- Object {
- "width": "60px",
- }
- }
- viewBox="0.5 0.5 100 100"
- >
- <path
- clipRule="evenodd"
- d="M100.5 50.5c0 27.614-22.386 50-50 50s-50-22.386-50-50 22.386-50 50-50 50 22.386 50 50zM74.706 37.525c2.5-.297 4.884-.961 7.1-1.944a25.064 25.064 0 0 1-6.169 6.398c.024.529.036 1.063.036 1.598 0 16.336-12.434 35.17-35.17 35.17a34.964 34.964 0 0 1-18.946-5.553c.965.115 1.952.173 2.947.173a24.801 24.801 0 0 0 15.353-5.291c-5.41-.1-9.974-3.675-11.547-8.584a12.375 12.375 0 0 0 5.582-.214c-5.654-1.135-9.916-6.13-9.916-12.12v-.156a12.273 12.273 0 0 0 5.6 1.547 12.36 12.36 0 0 1-5.5-10.288c0-2.265.61-4.39 1.674-6.215 6.098 7.48 15.206 12.401 25.479 12.917a12.336 12.336 0 0 1-.322-2.818c0-6.825 5.536-12.36 12.361-12.36 3.557 0 6.77 1.5 9.025 3.902a24.745 24.745 0 0 0 7.85-2.999 12.395 12.395 0 0 1-5.437 6.837z"
- fill="currentcolor"
- fillRule="evenodd"
- />
- </svg>
- </div>
- <div
- className="c8"
- >
- <svg
- alt="LinkedIn"
- aria-label="LinkedIn"
- fill="none"
- role="img"
- style={
- Object {
- "width": "60px",
- }
- }
- viewBox="0.5 0.5 100 100"
- >
- <path
- clipRule="evenodd"
- d="M100.5 50.5c0 27.614-22.386 50-50 50s-50-22.386-50-50 22.386-50 50-50 50 22.386 50 50zM74.706 37.525c2.5-.297 4.884-.961 7.1-1.944a25.064 25.064 0 0 1-6.169 6.398c.024.529.036 1.063.036 1.598 0 16.336-12.434 35.17-35.17 35.17a34.964 34.964 0 0 1-18.946-5.553c.965.115 1.952.173 2.947.173a24.801 24.801 0 0 0 15.353-5.291c-5.41-.1-9.974-3.675-11.547-8.584a12.375 12.375 0 0 0 5.582-.214c-5.654-1.135-9.916-6.13-9.916-12.12v-.156a12.273 12.273 0 0 0 5.6 1.547 12.36 12.36 0 0 1-5.5-10.288c0-2.265.61-4.39 1.674-6.215 6.098 7.48 15.206 12.401 25.479 12.917a12.336 12.336 0 0 1-.322-2.818c0-6.825 5.536-12.36 12.361-12.36 3.557 0 6.77 1.5 9.025 3.902a24.745 24.745 0 0 0 7.85-2.999 12.395 12.395 0 0 1-5.437 6.837z"
- fill="currentcolor"
- fillRule="evenodd"
- />
- </svg>
- </div>
- </div>
- </div>
- </div>
- </div>
-</div>
-`;
-
-exports[`Storyshots Organisms/AddressBubble AddressBubble/example 1`] = `
-.c2 {
- font-size: 1rem;
- margin: 0.5rem auto;
- text-align: left;
- max-width: 240px;
- line-height: 1.55em;
-}
-
-.c7 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-transform: rotate(0deg);
- -ms-transform: rotate(0deg);
- transform: rotate(0deg);
-}
-
-.c6 {
- position: relative;
-}
-
-.c0 {
- background-color: white;
- padding: 1rem;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-align-items: stretch;
- -webkit-box-align: stretch;
- -ms-flex-align: stretch;
- align-items: stretch;
- -webkit-align-content: stretch;
- -ms-flex-line-pack: stretch;
- align-content: stretch;
- -webkit-box-pack: justify;
- -webkit-justify-content: space-between;
- -ms-flex-pack: justify;
- justify-content: space-between;
- -webkit-flex-direction: column;
- -ms-flex-direction: column;
- flex-direction: column;
- border-radius: 3rem;
- border-width: 0;
- border-style: solid;
- box-shadow: 0 1px 5px 0 rgba(0,0,0,0.2),0 3px 4px 0 rgba(0,0,0,0.12),0 2px 4px 0 rgba(0,0,0,0.14);
-}
-
-.c0 > * {
- -webkit-flex: 1 auto;
- -ms-flex: 1 auto;
- flex: 1 auto;
-}
-
-.c3 {
- background: #1CB569;
- padding-left: 0.5rem;
- padding-bottom: 0;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-align-content: stretch;
- -ms-flex-line-pack: stretch;
- align-content: stretch;
- -webkit-box-pack: justify;
- -webkit-justify-content: space-between;
- -ms-flex-pack: justify;
- justify-content: space-between;
- -webkit-flex-direction: column;
- -ms-flex-direction: column;
- flex-direction: column;
- border-radius: 3rem;
- border-width: 0;
- border-style: solid;
- box-shadow: 0px 4px 5px 0 rgba(0,0,0,0.2),0 3px 14px 3px rgba(0,0,0,0.12),0 8px 10px 1px rgba(0,0,0,0.14);
- margin: 0 0.5rem 0.5rem 0.5rem;
-}
-
-.c3 > * {
- -webkit-flex: 1 auto;
- -ms-flex: 1 auto;
- flex: 1 auto;
-}
-
-.c1 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-align-items: flex-end;
- -webkit-box-align: flex-end;
- -ms-flex-align: flex-end;
- align-items: flex-end;
- -webkit-box-pack: start;
- -webkit-justify-content: flex-start;
- -ms-flex-pack: start;
- justify-content: flex-start;
- margin: 1rem;
- margin-bottom: 0.5rem;
- color: #9B9B9B;
-}
-
-.c9 {
- color: #1CB569;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-flex-direction: row;
- -ms-flex-direction: row;
- flex-direction: row;
- -webkit-box-pack: start;
- -webkit-justify-content: flex-start;
- -ms-flex-pack: start;
- justify-content: flex-start;
- -webkit-align-content: space-around;
- -ms-flex-line-pack: space-around;
- align-content: space-around;
-}
-
-.c4 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- font-weight: light;
- text-transform: lowercase;
- font-size: 1rem;
- -webkit-box-pack: start;
- -webkit-justify-content: flex-start;
- -ms-flex-pack: start;
- justify-content: flex-start;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-flex-direction: row;
- -ms-flex-direction: row;
- flex-direction: row;
- margin: 0;
- font-family: Libre Baskerville,Helvetica,Arial,serif;
- color: #FFFFFF;
-}
-
-.c5 {
- width: 2rem;
- -webkit-box-pack: center;
- -webkit-justify-content: center;
- -ms-flex-pack: center;
- justify-content: center;
- padding-top: 0.5rem;
-}
-
-.c8 {
- padding-left: 0.5rem;
-}
-
-<div
- style={
- Object {
- "alignItems": "center",
- "bottom": "0",
- "display": "flex",
- "left": "0",
- "overflow": "auto",
- "position": "fixed",
- "right": "0",
- "top": "0",
- }
- }
->
- <div
- style={
- Object {
- "margin": "auto",
- "maxHeight": "100%",
- }
- }
- >
- <div
- className="c0"
- >
- <div
- className="c1"
- >
- <svg
- alt="1"
- aria-label="1"
- fill="none"
- role="img"
- style={
- Object {
- "width": "40px",
- }
- }
- viewBox="0 0 106 100"
- >
- <path
- d="M52.632 80.368L85.158 100l-8.632-37 28.737-24.895-37.842-3.21L52.631 0 37.843 34.895 0 38.105 28.737 63l-8.632 37 32.527-19.632z"
- fill="currentcolor"
- />
- </svg>
- <svg
- alt="2"
- aria-label="2"
- fill="none"
- role="img"
- style={
- Object {
- "width": "40px",
- }
- }
- viewBox="0 0 106 100"
- >
- <path
- d="M52.632 80.368L85.158 100l-8.632-37 28.737-24.895-37.842-3.21L52.631 0 37.843 34.895 0 38.105 28.737 63l-8.632 37 32.527-19.632z"
- fill="currentcolor"
- />
- </svg>
- <svg
- alt="3"
- aria-label="3"
- fill="none"
- role="img"
- style={
- Object {
- "width": "40px",
- }
- }
- viewBox="0 0 106 100"
- >
- <path
- d="M52.632 80.368L85.158 100l-8.632-37 28.737-24.895-37.842-3.21L52.631 0 37.843 34.895 0 38.105 28.737 63l-8.632 37 32.527-19.632z"
- fill="currentcolor"
- />
- </svg>
- <svg
- alt="4"
- aria-label="4"
- fill="none"
- role="img"
- style={
- Object {
- "width": "40px",
- }
- }
- viewBox="0 0 106 100"
- >
- <path
- d="M52.632 80.368L85.158 100l-8.632-37 28.737-24.895-37.842-3.21L52.631 0 37.843 34.895 0 38.105 28.737 63l-8.632 37 32.527-19.632z"
- fill="currentcolor"
- />
- </svg>
- <svg
- alt="5"
- aria-label="5"
- fill="none"
- role="img"
- style={
- Object {
- "width": "40px",
- }
- }
- viewBox="0 0 106 100"
- >
- <path
- clipRule="evenodd"
- d="M67.421 34.842l37.842 3.263L76.579 63l8.579 37-32.526-19.632L20.105 100l8.632-37L0 38.105l37.842-3.21L52.632 0l14.79 34.842zm-34.58 47.632l19.79-11.948 19.842 12L67.21 60l17.474-15.158-23.053-2-9-21.263-8.947 21.21-23.053 2 17.474 15.158-5.263 22.527z"
- fill="currentcolor"
- fillRule="evenodd"
- />
- </svg>
- <p
- className="c2"
- style={
- Object {
- "margin": "0",
- }
- }
- >
- basierend auf
- 30
- bewertungen
- </p>
- </div>
- <div
- className="c3"
- >
- <div
- className="c4"
- >
- <div
- className="c5"
- >
- <div
- className="c6"
- style={
- Object {
- "paddingBottom": "0.8rem",
- }
- }
- >
- <div
- className="c7"
- >
- <svg
- height="36px"
- version="1.1"
- viewBox="0 0 1000 1000"
- width="36px"
- xmlns="http://www.w3.org/2000/svg"
- >
- <path
- d="M787.143802,465.995818 C766.506373,317.376739 647.401481,210 499.22782,210 C351.05416,210 233.93758,317.286714 213.178319,465.995818 C174.642224,742.049383 499.257577,907.727596 499.257577,909.979533 C499.257577,912.23147 823.586498,728.435484 787.143802,465.995818 Z"
- fill="white"
- />
- </svg>
- </div>
- </div>
- </div>
- <div
- className="c8"
- >
- <p
- className="c2"
- style={
- Object {
- "margin": "0",
- }
- }
- >
- se4 157 London, United Kingdom
- </p>
- </div>
- </div>
- </div>
- <div
- className="c3"
- >
- <div
- className="c4"
- >
- <div
- className="c5"
- >
- <svg
- alt="+44 176 234 567"
- aria-label="+44 176 234 567"
- role="img"
- style={
- Object {
- "width": "26px",
- }
- }
- viewBox="0 0 25 25"
- >
- <g
- fill="none"
- fillRule="evenodd"
- >
- <circle
- cx={12.5}
- cy={12.5}
- fill="#1CB569"
- r={12.5}
- />
- <path
- d="M8.017 11.492a12.624 12.624 0 0 0 5.491 5.491l1.834-1.833a.829.829 0 0 1 .85-.2 9.506 9.506 0 0 0 2.975.475c.458 0 .833.375.833.833v2.909a.836.836 0 0 1-.833.833C11.342 20 5 13.658 5 5.833 5 5.375 5.375 5 5.833 5H8.75c.458 0 .833.375.833.833 0 1.042.167 2.042.475 2.975a.836.836 0 0 1-.208.85l-1.833 1.834z"
- fill="#FFF"
- fillRule="nonzero"
- />
- </g>
- </svg>
- </div>
- <div
- className="c8"
- >
- <p
- className="c2"
- style={
- Object {
- "margin": "0",
- }
- }
- >
- +44 176 234 567
- </p>
- </div>
- </div>
- </div>
- <div
- className="c3"
- >
- <div
- className="c4"
- >
- <div
- className="c5"
- >
- <svg
- alt="translate@globalvoices.co.uk"
- aria-label="translate@globalvoices.co.uk"
- role="img"
- style={
- Object {
- "width": "20px",
- }
- }
- viewBox="0 0 28 28"
- >
- <g
- fill="none"
- fillRule="evenodd"
- >
- <path
- d="M14.5 27C7.596 27 2 21.404 2 14.5S7.596 2 14.5 2 27 7.596 27 14.5 21.404 27 14.5 27z"
- fill="#1CB569"
- fillRule="nonzero"
- stroke="#FFF"
- />
- <path
- d="M14 5c-4.968 0-9 4.032-9 9s4.032 9 9 9h4.5v-1.8H14c-3.906 0-7.2-3.294-7.2-7.2s3.294-7.2 7.2-7.2 7.2 3.294 7.2 7.2v1.287c0 .711-.639 1.413-1.35 1.413-.711 0-1.35-.702-1.35-1.413V14c0-2.484-2.016-4.5-4.5-4.5A4.502 4.502 0 0 0 9.5 14a4.502 4.502 0 0 0 7.686 3.177c.585.801 1.593 1.323 2.664 1.323 1.773 0 3.15-1.44 3.15-3.213V14c0-4.968-4.032-9-9-9zm0 11.7a2.696 2.696 0 0 1-2.7-2.7c0-1.494 1.206-2.7 2.7-2.7 1.494 0 2.7 1.206 2.7 2.7 0 1.494-1.206 2.7-2.7 2.7z"
- fill="#FFF"
- />
- </g>
- </svg>
- </div>
- <div
- className="c8"
- >
- <p
- className="c2"
- >
- translate@globalvoices.co.uk
- </p>
- </div>
- </div>
- </div>
- <div
- className="c3"
- >
- <div
- className="c4"
- >
- <div
- className="c5"
- >
- <svg
- alt="www.globalvoices.co.uk"
- aria-label="www.globalvoices.co.uk"
- fill="none"
- role="img"
- style={
- Object {
- "width": "28px",
- }
- }
- viewBox="0 0 25 25"
- >
- <mask
- height={25}
- id="Worldwideweb_svg__a"
- maskUnits="userSpaceOnUse"
- width={25}
- x={0}
- y={0}
- >
- <path
- d="M0 0h25v25H0z"
- fill="#fff"
- />
- </mask>
- <g
- mask="url(#Worldwideweb_svg__a)"
- >
- <path
- clipRule="evenodd"
- d="M24.5 12.5c0 6.627-5.373 12-12 12s-12-5.373-12-12 5.373-12 12-12 12 5.373 12 12z"
- fill="#1CB569"
- fillRule="evenodd"
- />
- </g>
- <g>
- <path
- d="M21.083 6.564c.23 0 .417-.191.417-.427a.422.422 0 0 0-.417-.428.422.422 0 0 0-.416.428c0 .236.186.427.416.427zM19.417 6.564c.23 0 .416-.191.416-.427a.422.422 0 0 0-.416-.428.422.422 0 0 0-.417.428c0 .236.186.427.417.427zM17.75 6.564c.23 0 .417-.191.417-.427a.422.422 0 0 0-.417-.428.422.422 0 0 0-.416.428c0 .236.186.427.416.427z"
- fill="#fff"
- />
- <path
- d="M1 9h23"
- stroke="#fff"
- strokeLinecap="round"
- strokeLinejoin="round"
- />
- <path
- clipRule="evenodd"
- d="M7.336 15.776c0 .212-.037.41-.11.592a1.411 1.411 0 0 1-.778.79 1.564 1.564 0 0 1-.607.113c-.269 0-.503-.057-.702-.17a1.255 1.255 0 0 1-.475-.475c-.116.202-.273.36-.47.474-.198.114-.43.171-.699.171-.222 0-.425-.038-.607-.114a1.411 1.411 0 0 1-.778-.79 1.57 1.57 0 0 1-.11-.591V13.27h.645v2.505c0 .253.077.462.232.626.154.165.36.247.618.247s.465-.082.619-.247a.878.878 0 0 0 .231-.626V13.27h.646v2.505c0 .253.077.462.231.626.154.165.36.247.619.247.258 0 .464-.082.618-.247a.878.878 0 0 0 .232-.626V13.27h.645v2.505zM15.186 15.776c0 .212-.037.41-.11.592a1.411 1.411 0 0 1-.778.79 1.564 1.564 0 0 1-.607.113c-.269 0-.503-.057-.702-.17a1.255 1.255 0 0 1-.475-.475c-.116.202-.273.36-.47.474-.198.114-.43.171-.699.171-.222 0-.425-.038-.607-.114a1.41 1.41 0 0 1-.778-.79 1.57 1.57 0 0 1-.11-.591V13.27h.645v2.505c0 .253.077.462.232.626.154.165.36.247.618.247s.465-.082.619-.247a.878.878 0 0 0 .231-.626V13.27h.646v2.505c0 .253.077.462.231.626.154.165.36.247.619.247.258 0 .464-.082.618-.247a.879.879 0 0 0 .232-.626V13.27h.645v2.505zM23.036 15.776c0 .212-.037.41-.11.592a1.411 1.411 0 0 1-.778.79 1.564 1.564 0 0 1-.607.113c-.268 0-.502-.057-.702-.17a1.255 1.255 0 0 1-.475-.475c-.116.202-.273.36-.47.474-.198.114-.43.171-.698.171-.223 0-.426-.038-.608-.114a1.41 1.41 0 0 1-.778-.79 1.57 1.57 0 0 1-.11-.591V13.27h.645v2.505c0 .253.078.462.232.626.154.165.36.247.618.247s.465-.082.619-.247a.878.878 0 0 0 .232-.626V13.27h.645v2.505c0 .253.077.462.231.626.154.165.36.247.619.247.258 0 .464-.082.618-.247a.879.879 0 0 0 .232-.626V13.27h.645v2.505z"
- fill="#fff"
- fillRule="evenodd"
- />
- </g>
- </svg>
- </div>
- <div
- className="c8"
- >
- <p
- className="c2"
- style={
- Object {
- "margin": "0",
- }
- }
- >
- www.globalvoices.co.uk
- </p>
- </div>
- </div>
- </div>
- <div
- className="c4"
- >
- <div
- className="c9"
- >
- <div
- className="c8"
- >
- <svg
- alt="Facebook"
- aria-label="Facebook"
- fill="none"
- role="img"
- style={
- Object {
- "width": "60px",
- }
- }
- viewBox="0.5 0.5 100 100"
- >
- <path
- clipRule="evenodd"
- d="M100.5 50.5c0 27.614-22.386 50-50 50s-50-22.386-50-50 22.386-50 50-50 50 22.386 50 50zm-45.476-.06h8.546l1.131-10.994h-9.676V32.97c0-2.429 1.605-2.999 2.746-2.999h6.96v-10.68l-9.592-.041c-10.645 0-13.064 7.974-13.064 13.066v7.12h-6.158V50.44h6.158v31.31h12.949V50.44z"
- fill="currentcolor"
- fillRule="evenodd"
- />
- </svg>
- </div>
- <div
- className="c8"
- >
- <svg
- alt="Instagram"
- aria-label="Instagram"
- fill="none"
- role="img"
- style={
- Object {
- "width": "60px",
- }
- }
- viewBox="0.5 0.5 100 100"
- >
- <path
- clipRule="evenodd"
- d="M100.5 50.5c0 27.614-22.386 50-50 50s-50-22.386-50-50 22.386-50 50-50 50 22.386 50 50zM72.58 19.25H32.586c-5.063 0-9.17 4.108-9.17 9.18V68.42c0 5.063 4.107 9.171 9.17 9.171H72.58c5.063 0 9.171-4.108 9.171-9.17V28.428c0-5.071-4.108-9.179-9.17-9.179zm-6.203 6.748l7.33-.018h.017a1.264 1.264 0 0 1 1.277 1.26v7.355c0 .704-.565 1.268-1.268 1.268l-7.321.026a1.262 1.262 0 0 1-1.268-1.259l-.026-7.356a1.264 1.264 0 0 1 1.26-1.276zM44.26 42.438c-.226.312-.426.642-.617.972a10.124 10.124 0 0 0-1.329 5.011c0 5.662 4.603 10.265 10.265 10.265 5.662 0 10.274-4.603 10.274-10.265 0-1.815-.495-3.526-1.329-5.002a10.35 10.35 0 0 0-.617-.982c-1.867-2.587-4.898-4.281-8.328-4.281-3.422 0-6.452 1.694-8.32 4.281zM76.07 66.32a5.6 5.6 0 0 1-5.593 5.592H34.69a5.6 5.6 0 0 1-5.593-5.592V42.437h8.71a15.24 15.24 0 0 0-.564 1.642 15.61 15.61 0 0 0-.608 4.342c0 8.797 7.156 15.953 15.945 15.953 8.797 0 15.953-7.156 15.953-15.953a15.94 15.94 0 0 0-.608-4.342 17.409 17.409 0 0 0-.564-1.642h8.71V66.32z"
- fill="currentcolor"
- fillRule="evenodd"
- />
- </svg>
- </div>
- <div
- className="c8"
- >
- <svg
- alt="Twitter"
- aria-label="Twitter"
- fill="none"
- role="img"
- style={
- Object {
- "width": "60px",
- }
- }
- viewBox="0.5 0.5 100 100"
- >
- <path
- clipRule="evenodd"
- d="M100.5 50.5c0 27.614-22.386 50-50 50s-50-22.386-50-50 22.386-50 50-50 50 22.386 50 50zM74.706 37.525c2.5-.297 4.884-.961 7.1-1.944a25.064 25.064 0 0 1-6.169 6.398c.024.529.036 1.063.036 1.598 0 16.336-12.434 35.17-35.17 35.17a34.964 34.964 0 0 1-18.946-5.553c.965.115 1.952.173 2.947.173a24.801 24.801 0 0 0 15.353-5.291c-5.41-.1-9.974-3.675-11.547-8.584a12.375 12.375 0 0 0 5.582-.214c-5.654-1.135-9.916-6.13-9.916-12.12v-.156a12.273 12.273 0 0 0 5.6 1.547 12.36 12.36 0 0 1-5.5-10.288c0-2.265.61-4.39 1.674-6.215 6.098 7.48 15.206 12.401 25.479 12.917a12.336 12.336 0 0 1-.322-2.818c0-6.825 5.536-12.36 12.361-12.36 3.557 0 6.77 1.5 9.025 3.902a24.745 24.745 0 0 0 7.85-2.999 12.395 12.395 0 0 1-5.437 6.837z"
- fill="currentcolor"
- fillRule="evenodd"
- />
- </svg>
- </div>
- <div
- className="c8"
- >
- <svg
- alt="LinkedIn"
- aria-label="LinkedIn"
- fill="none"
- role="img"
- style={
- Object {
- "width": "60px",
- }
- }
- viewBox="0.5 0.5 100 100"
- >
- <path
- clipRule="evenodd"
- d="M100.5 50.5c0 27.614-22.386 50-50 50s-50-22.386-50-50 22.386-50 50-50 50 22.386 50 50zM74.706 37.525c2.5-.297 4.884-.961 7.1-1.944a25.064 25.064 0 0 1-6.169 6.398c.024.529.036 1.063.036 1.598 0 16.336-12.434 35.17-35.17 35.17a34.964 34.964 0 0 1-18.946-5.553c.965.115 1.952.173 2.947.173a24.801 24.801 0 0 0 15.353-5.291c-5.41-.1-9.974-3.675-11.547-8.584a12.375 12.375 0 0 0 5.582-.214c-5.654-1.135-9.916-6.13-9.916-12.12v-.156a12.273 12.273 0 0 0 5.6 1.547 12.36 12.36 0 0 1-5.5-10.288c0-2.265.61-4.39 1.674-6.215 6.098 7.48 15.206 12.401 25.479 12.917a12.336 12.336 0 0 1-.322-2.818c0-6.825 5.536-12.36 12.361-12.36 3.557 0 6.77 1.5 9.025 3.902a24.745 24.745 0 0 0 7.85-2.999 12.395 12.395 0 0 1-5.437 6.837z"
- fill="currentcolor"
- fillRule="evenodd"
- />
- </svg>
- </div>
- </div>
- </div>
- </div>
- </div>
-</div>
-`;
-
-exports[`Storyshots Organisms/FilterBar Filter Bar 1`] = `
-.c2 {
- margin-left: 0;
- padding-left: 0;
-}
-
-.c3 {
- -moz-appearance: none;
- display: inline-block;
- border-style: none;
- border-radius: 3em;
- min-width: 3em;
- width: 100%;
- padding: 0.5em 1em;
- margin-right: 1em;
- margin-top: 1em;
- background-color: #1CB569 color:#FFFFFF;
-}
-
-.c0 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-flex-direction: row;
- -ms-flex-direction: row;
- flex-direction: row;
- -webkit-flex-wrap: wrap;
- -ms-flex-wrap: wrap;
- flex-wrap: wrap;
- -webkit-box-pack: start;
- -webkit-justify-content: flex-start;
- -ms-flex-pack: start;
- justify-content: flex-start;
- width: 100%;
-}
-
-.c1 {
- min-width: 16em;
- max-width: 16em;
- margin: 2em;
-}
-
-.c4 {
- -webkit-appearance: none;
- width: 100%;
- background: transparent;
- padding: 0.5em 0;
- margin-right: 1em;
- margin-top: 1em;
-}
-
-.c4::-webkit-slider-thumb {
- -webkit-appearance: none;
-}
-
-.c4:focus {
- outline: none;
-}
-
-.c4::-ms-track {
- width: 100%;
- cursor: pointer;
- background: transparent;
- border-color: transparent;
- color: transparent;
-}
-
-.c4::-webkit-slider-thumb {
- -webkit-appearance: none;
- margin-top: -0.6em;
- box-shadow: 0 1px 5px 0 rgba(0,0,0,0.2),0 3px 4px 0 rgba(0,0,0,0.12),0 2px 4px 0 rgba(0,0,0,0.14);
- border: none;
- height: 1.5em;
- width: 1.5em;
- border-radius: 1em;
- background: #1CB569;
- cursor: pointer;
-}
-
-.c4::-moz-range-thumb {
- box-shadow: 0 1px 5px 0 rgba(0,0,0,0.2),0 3px 4px 0 rgba(0,0,0,0.12),0 2px 4px 0 rgba(0,0,0,0.14);
- border: none;
- height: 1.5em;
- width: 1.5em;
- border-radius: 1em;
- background: #1CB569;
- cursor: pointer;
-}
-
-.c4::-ms-thumb {
- box-shadow: 0 1px 5px 0 rgba(0,0,0,0.2),0 3px 4px 0 rgba(0,0,0,0.12),0 2px 4px 0 rgba(0,0,0,0.14);
- border: none;
- height: 1.5em;
- width: 1.5em;
- border-radius: 1em;
- background: #1CB569;
- cursor: pointer;
-}
-
-.c4::-webkit-slider-runnable-track {
- width: 100%;
- height: 0.3em;
- cursor: pointer;
- box-shadow: 0 1px 5px 0 rgba(0,0,0,0.2),0 3px 4px 0 rgba(0,0,0,0.12),0 2px 4px 0 rgba(0,0,0,0.14);
- background: #1CB569;
- border-radius: 1.3px;
-}
-
-.c4:focus::-webkit-slider-runnable-track {
- background: #1CB569;
-}
-
-.c4::-moz-range-track {
- width: 100%;
- height: 0.3em;
- cursor: pointer;
- box-shadow: 0 1px 5px 0 rgba(0,0,0,0.2),0 3px 4px 0 rgba(0,0,0,0.12),0 2px 4px 0 rgba(0,0,0,0.14);
- background: #1CB569;
- border-radius: 1.3px;
-}
-
-.c4::-ms-track {
- width: 100%;
- height: 0.3em;
- cursor: pointer;
- background: transparent;
- border-color: transparent;
- border-width: 16px 0;
- color: transparent;
-}
-
-.c4::-ms-fill-lower {
- background: #2a6495;
- border: 0.2px solid #010101;
- border-radius: 2.6px;
- box-shadow: 0 1px 5px 0 rgba(0,0,0,0.2),0 3px 4px 0 rgba(0,0,0,0.12),0 2px 4px 0 rgba(0,0,0,0.14);
-}
-
-.c4:focus::-ms-fill-lower {
- background: #1CB569;
-}
-
-.c4::-ms-fill-upper {
- background: #1CB569;
- border: 0.2px solid #010101;
- border-radius: 2.6px;
- box-shadow: 0 1px 5px 0 rgba(0,0,0,0.2),0 3px 4px 0 rgba(0,0,0,0.12),0 2px 4px 0 rgba(0,0,0,0.14);
-}
-
-.c4:focus::-ms-fill-upper {
- background: #367ebd;
-}
-
-<div
- style={
- Object {
- "alignItems": "center",
- "bottom": "0",
- "display": "flex",
- "left": "0",
- "overflow": "auto",
- "position": "fixed",
- "right": "0",
- "top": "0",
- }
- }
->
- <div
- style={
- Object {
- "margin": "auto",
- "maxHeight": "100%",
- }
- }
- >
- <div
- className="c0"
- >
- <div
- className="c1"
- >
- <label
- className="c2"
- htmlFor="from_language"
- >
- von Sprache
- </label>
- <select
- className="c3"
- defaultValue=""
- name="from_language"
- onChange={[Function]}
- placeholder="von Sprache"
- >
- <option
- disabled={true}
- hidden={true}
- value=""
- >
- von Sprache
- </option>
- <option
- value="de"
- >
- Deutsch
- </option>
- <option
- value="en"
- >
- Englisch
- </option>
- <option
- value="nl"
- >
- Niederländisch, Belgisches Niederländisch
- </option>
- </select>
- </div>
- <div
- className="c1"
- >
- <label
- className="c2"
- htmlFor="to_language"
- >
- zu Sprache
- </label>
- <select
- className="c3"
- defaultValue=""
- name="to_language"
- onChange={[Function]}
- placeholder="zu Sprache"
- >
- <option
- disabled={true}
- hidden={true}
- value=""
- >
- zu Sprache
- </option>
- <option
- value="nl"
- >
- Niederländisch, Belgisches Niederländisch
- </option>
- <option
- value="de"
- >
- Deutsch
- </option>
- <option
- value="en"
- >
- Englisch
- </option>
- </select>
- </div>
- <div
- className="c1"
- >
- <label
- className="c2"
- htmlFor="service"
- >
- service
- </label>
- <select
- className="c3"
- defaultValue=""
- name="service"
- onChange={[Function]}
- placeholder="service"
- >
- <option
- disabled={true}
- hidden={true}
- value=""
- >
- service
- </option>
- <optgroup
- label="Ãœbersetzung"
- >
- <option
- value="texttranslation"
- >
- Textübersetzung
- </option>
- <option
- value="audiotranslation"
- >
- Audioübersetzung
- </option>
- <option
- value="localisation"
- >
- Lokalisierung
- </option>
- </optgroup>
- <optgroup
- label="Dolmetschen"
- >
- <option
- value="conferencedolmetsch"
- >
- Konferenzdolmetschen
- </option>
- <option
- value="simultaneousdolmetsch"
- >
- Simultandolmetschen
- </option>
- <option
- value="consecutivedolmetsch"
- >
- Konsekutivdolmetschen
- </option>
- </optgroup>
- </select>
- </div>
- <div
- className="c1"
- >
- <label
- className="c2"
- htmlFor="fachgebiete"
- >
- fachgebiete
- </label>
- <select
- className="c3"
- defaultValue=""
- name="fachgebiete"
- onChange={[Function]}
- placeholder="fachgebiete"
- >
- <option
- disabled={true}
- hidden={true}
- value=""
- >
- fachgebiete
- </option>
- <option
- value="wirtschaft"
- >
- Wirtschaft
- </option>
- <option
- value="marketing"
- >
- marketing
- </option>
- <option
- value="recht"
- >
- recht
- </option>
- <option
- value="technologie"
- >
- technologie
- </option>
- <option
- value="medizin"
- >
- medizin
- </option>
- <option
- value="sonstige fachgebiete"
- >
- sonstige fachgebiete
- </option>
- </select>
- </div>
- <div
- className="c1"
- >
- <label
- className="c2"
- htmlFor="land1"
- >
- Land
- </label>
- <select
- className="c3"
- defaultValue=""
- name="land1"
- onChange={[Function]}
- placeholder="Land"
- >
- <option
- disabled={true}
- hidden={true}
- value=""
- >
- Land
- </option>
- <option
- value="CH"
- >
- Schweiz
- </option>
- <option
- value="DE"
- >
- Deutschland
- </option>
- <option
- value="FR"
- >
- Frankreich
- </option>
- </select>
- </div>
- <div
- className="c1"
- >
- <label
- className="c2"
- htmlFor="ratingthreshold"
- >
- Mindestbewertung
- </label>
- <input
- className="c4"
- defaultValue={1}
- max={4}
- min={0}
- onChange={[Function]}
- type="range"
- />
- </div>
- </div>
- </div>
-</div>
-`;
-
-exports[`Storyshots Organisms/Menu Menu 1`] = `
-.c0 {
- display: block;
- position: relative;
- text-transform: lowercase;
- font-family: Libre Baskerville,Helvetica,Arial,serif;
-}
-
-.c1 {
- float: left;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- position: absolute;
- -webkit-flex-direction: row-reverse;
- -ms-flex-direction: row-reverse;
- flex-direction: row-reverse;
- -webkit-flex-wrap: no-wrap;
- -ms-flex-wrap: no-wrap;
- flex-wrap: no-wrap;
- -webkit-align-items: start;
- -webkit-box-align: start;
- -ms-flex-align: start;
- align-items: start;
- -webkit-transform-origin: top left;
- -ms-transform-origin: top left;
- transform-origin: top left;
- -webkit-transform: rotate(-90deg) translate(50px);
- -ms-transform: rotate(-90deg) translate(50px);
- transform: rotate(-90deg) translate(50px);
- bottom: 0;
- left: 0;
- height: 33px;
-}
-
-.c3 {
- position: relative;
- height: 100%;
- background-color: white;
- border-top-right-radius: 50px;
- border-top-left-radius: 50px;
- margin: 0;
- padding: 0 1rem;
-}
-
-.c3:before {
- content: '';
- position: absolute;
- background-color: white;
- width: calc(100% + 7px + 7px);
- height: 7px;
- bottom: -7px;
- left: -7px;
-}
-
-.c2 {
- color: #1CB569;
- padding: 0.5rem;
- margin: 0;
- font-weight: normal;
- opacity: 0.4;
-}
-
-.c4 {
- color: #4A90E2;
- padding: 0.5rem;
- margin: 0;
- font-weight: normal;
-}
-
-.c5 {
- float: left;
- background-color: white;
- border-radius: 100px;
- padding: 1rem;
- margin-left: 33px;
-}
-
-.c6 {
- color: #1CB569;
- margin: 2rem 0;
-}
-
-.c7 {
- color: #4A90E2;
- margin: 2rem 0;
-}
-
-<div
- style={
- Object {
- "alignItems": "center",
- "bottom": "0",
- "display": "flex",
- "left": "0",
- "overflow": "auto",
- "position": "fixed",
- "right": "0",
- "top": "0",
- }
- }
->
- <div
- style={
- Object {
- "margin": "auto",
- "maxHeight": "100%",
- }
- }
- >
- <div
- className="c0"
- >
- <div
- className="c1"
- >
- <div
- className="c2"
- >
- Branche
- </div>
- <h3
- className="c3"
- >
- <div
- className="c4"
- selected={true}
- >
- Profil
- </div>
- </h3>
- </div>
- <div
- className="c5"
- >
- <div
- className="c6"
- >
- Porträt
- </div>
- <div
- className="c7"
- selected={true}
- >
- Banner
- </div>
- <div
- className="c6"
- >
- Bezahlung
- </div>
- <div
- className="c6"
- >
- Kontakt
- </div>
- <div
- className="c6"
- >
- Blog
- </div>
- </div>
- </div>
- </div>
-</div>
-`;
-
-exports[`Storyshots Organisms/ProfileBubble ProfileBubble/Luigi 1`] = `
-.c13 {
- font-size: 1rem;
- margin: 0.5rem auto;
- text-align: left;
- max-width: 240px;
- line-height: 1.55em;
-}
-
-.c9 {
- font-size: 0.5884615384615384rem;
- margin: 0.5rem auto;
- text-align: left;
- max-width: 240px;
- line-height: 1.55em;
-}
-
-.c15 {
- font-size: 1rem;
- margin: 0.5rem auto;
- color: #1CB569;
- text-align: left;
- max-width: 240px;
- line-height: 1.55em;
-}
-
-.c19 {
- font-size: 0.85rem;
- margin: 0.5rem auto;
- text-align: left;
- max-width: 240px;
- line-height: 1.55em;
-}
-
-.c17 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-transform: rotate(90deg);
- -ms-transform: rotate(90deg);
- transform: rotate(90deg);
-}
-
-.c4 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-transform: rotate(0deg);
- -ms-transform: rotate(0deg);
- transform: rotate(0deg);
-}
-
-.c8 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-transform: rotate(180deg);
- -ms-transform: rotate(180deg);
- transform: rotate(180deg);
-}
-
-.c5 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- position: absolute;
- top: 30.76923076923077%;
- left: 30.76923076923077%;
- width: 53.84615384615384px;
- height: 53.84615384615384px;
- font-size: 0;
-}
-
-.c18 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- position: absolute;
- top: 30.76923076923077%;
- left: 30.76923076923077%;
- width: 46.153846153846146px;
- height: 46.153846153846146px;
- font-size: 0;
-}
-
-.c7 {
- position: relative;
-}
-
-.c3 {
- position: relative;
-}
-
-.c0 {
- background-color: white;
- padding: 1rem;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-align-items: stretch;
- -webkit-box-align: stretch;
- -ms-flex-align: stretch;
- align-items: stretch;
- -webkit-align-content: stretch;
- -ms-flex-line-pack: stretch;
- align-content: stretch;
- -webkit-box-pack: justify;
- -webkit-justify-content: space-between;
- -ms-flex-pack: justify;
- justify-content: space-between;
- -webkit-flex-direction: row;
- -ms-flex-direction: row;
- flex-direction: row;
- border-radius: 3rem;
- border-width: 0;
- border-style: solid;
- box-shadow: 0 1px 5px 0 rgba(0,0,0,0.2),0 3px 4px 0 rgba(0,0,0,0.12),0 2px 4px 0 rgba(0,0,0,0.14);
-}
-
-.c0 > * {
- -webkit-flex: 1 auto;
- -ms-flex: 1 auto;
- flex: 1 auto;
-}
-
-.c2 svg {
- -webkit-filter: drop-shadow(0px 2px 4px rgba(0,0,0,0.2)) drop-shadow(0px 1px 10px rgba(0,0,0,0.12)) drop-shadow(0px 4px 5px rgba(0,0,0,0.14));
- filter: drop-shadow(0px 2px 4px rgba(0,0,0,0.2)) drop-shadow(0px 1px 10px rgba(0,0,0,0.12)) drop-shadow(0px 4px 5px rgba(0,0,0,0.14));
-}
-
-.c1 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-flex-direction: column;
- -ms-flex-direction: column;
- flex-direction: column;
- -webkit-align-items: start;
- -webkit-box-align: start;
- -ms-flex-align: start;
- align-items: start;
- justify-self: start;
-}
-
-.c10 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-flex-direction: column;
- -ms-flex-direction: column;
- flex-direction: column;
- -webkit-align-items: start;
- -webkit-box-align: start;
- -ms-flex-align: start;
- align-items: start;
- margin: 0 1rem;
- -webkit-box-pack: center;
- -webkit-justify-content: center;
- -ms-flex-pack: center;
- justify-content: center;
- justify-self: center;
-}
-
-.c16 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-flex-direction: column;
- -ms-flex-direction: column;
- flex-direction: column;
- -webkit-align-items: start;
- -webkit-box-align: start;
- -ms-flex-align: start;
- align-items: start;
- justify-self: end;
-}
-
-.c11 {
- font-weight: normal;
- text-transform: lowercase;
- font-size: 2.5rem;
- margin: 0;
- font-family: Libre Baskerville,Helvetica,Arial,serif;
- color: #1CB569;
-}
-
-.c12 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-flex-flow: row wrap;
- -ms-flex-flow: row wrap;
- flex-flow: row wrap;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
-}
-
-.c14 {
- margin: 0 0.5rem;
-}
-
-.c6 {
- border-radius: 2000rem;
- max-width: 100%;
-}
-
-<div
- style={
- Object {
- "alignItems": "center",
- "bottom": "0",
- "display": "flex",
- "left": "0",
- "overflow": "auto",
- "position": "fixed",
- "right": "0",
- "top": "0",
- }
- }
->
- <div
- style={
- Object {
- "margin": "auto",
- "maxHeight": "100%",
- }
- }
- >
- <div
- className="c0"
- style={
- Object {
- "margin": "function (props) {
- return (0, _core.get)(props.theme, path, fallback);
- } function (props) {
- return (0, _core.get)(props.theme, path, fallback);
- }",
- }
- }
- >
- <div
- className="c1"
- >
- <div
- className="c2"
- >
- <div
- className="c3"
- style={
- Object {
- "marginBottom": "-1em",
- }
- }
- >
- <div
- className="c4"
- >
- <svg
- height="140px"
- version="1.1"
- viewBox="0 0 1000 1000"
- width="140px"
- xmlns="http://www.w3.org/2000/svg"
- >
- <title>
- Atoms/Icon/Pin
- </title>
- <defs>
- <filter
- filterUnits="objectBoundingBox"
- height="106.9%"
- id="filter-1"
- width="108.5%"
- x="-4.2%"
- y="-2.5%"
- >
- <feMerge>
- <feMergeNode
- in="SourceGraphic"
- />
- </feMerge>
- </filter>
- </defs>
- <g
- fill="none"
- fillRule="evenodd"
- id="Symbols"
- stroke="none"
- strokeWidth="1"
- >
- <g
- id="Atoms/Icon/Pin"
- >
- <g
- id="Group"
- transform="translate(1.000000, 0.000000)"
- >
- <g
- fill="#1CB569"
- fillRule="nonzero"
- filter="url(#filter-1)"
- id="Atom-Pin"
- transform="translate(210.000000, 219.000000)"
- >
- <path
- d="M577.143802,255.995818 C556.506373,107.376739 437.401481,0 289.22782,0 C141.05416,0 23.9375802,107.286714 3.17831886,255.995818 C-35.3577758,532.049383 289.257577,697.727596 289.257577,699.979533 C289.257577,702.23147 613.586498,518.435484 577.143802,255.995818 Z M40,290 C40,152.5 152.5,40 290,40 C427.5,40 540,152.5 540,290 C540,427.5 428.75,540 290,540 C152.5,540 40,427.5 40,290 Z"
- id="Pin-Main-Shape"
- />
- </g>
- </g>
- </g>
- </g>
- </svg>
- </div>
- <div
- className="c5"
- size={7}
- >
- <img
- alt="Profile picture"
- className="c6"
- size={2.692307692307692}
- src="https://yt3.ggpht.com/-kqCAcE59qSo/AAAAAAAAAAI/AAAAAAAAAAA/zy4skyAcVCo/s900-c-k-no-mo-rj-c0xffffff/photo.jpg"
- />
- </div>
- </div>
- </div>
- <div
- className="c7"
- style={
- Object {
- "marginTop": "-1em",
- }
- }
- >
- <div
- className="c8"
- >
- <svg
- height="140px"
- version="1.1"
- viewBox="0 0 1000 1000"
- width="140px"
- xmlns="http://www.w3.org/2000/svg"
- >
- <path
- d="M502.56508,868.364664 C511.93155,862.588075 523.095822,855.151458 535.04456,846.573064 C568.356448,822.657358 601.727957,794.366431 631.986836,762.739204 C670.449872,722.536816 701.168462,679.73622 721.677407,634.99991 C745.587052,582.845627 754.91721,529.57787 747.526139,475.323915 C729.599303,343.732453 626.596403,250 499.286261,250 C372.372238,250 270.864911,343.231572 252.772718,475.337398 C244.509241,535.675767 254.910456,593.178228 281.38033,648.043223 C303.726517,694.360915 336.875734,737.501264 378.116754,777.203565C406.461936,804.491177 436.782663,828.440662 467.722026,849.417211 C478.177327,856.505791 487.661494,862.556978 497.309147,868.437102C497.961101,868.834461 498.885903,869.394858 499.886582,870 C500.740299,869.484354 501.635452,868.937995 502.56508,868.364664 Z M787.143802,465.995818 C823.586498,728.435484 499.257577,912.23147 499.257577,909.979533 C499.257577,907.727596 174.642224,742.049383 213.178319,465.995818C233.93758,317.286714 351.05416,210 499.22782,210 C647.401481,210 766.506373,317.376739 787.143802,465.995818 Z"
- fill="#1CB569"
- />
- </svg>
- </div>
- <div
- className="c5"
- size={7}
- >
- <p
- className="c9"
- size={2.692307692307692}
- >
- Map
- </p>
- </div>
- </div>
- </div>
- <div
- className="c10"
- >
- <h2
- className="c11"
- >
- Luigi
- </h2>
- <div
- className="c12"
- >
- <p
- className="c13"
- >
- Japan
- </p>
- <span
- className="c14"
- >
- |
- </span>
- <p
- className="c15"
- >
- 3
- Sprachen
- </p>
- <span
- className="c14"
- >
- |
- </span>
- <svg
- alt="1"
- aria-label="1"
- fill="none"
- role="img"
- style={
- Object {
- "width": "20px",
- }
- }
- viewBox="0 0 106 100"
- >
- <path
- d="M52.632 80.368L85.158 100l-8.632-37 28.737-24.895-37.842-3.21L52.631 0 37.843 34.895 0 38.105 28.737 63l-8.632 37 32.527-19.632z"
- fill="currentcolor"
- />
- </svg>
- <svg
- alt="2"
- aria-label="2"
- fill="none"
- role="img"
- style={
- Object {
- "width": "20px",
- }
- }
- viewBox="0 0 106 100"
- >
- <path
- clipRule="evenodd"
- d="M67.421 34.842l37.842 3.263L76.579 63l8.579 37-32.526-19.632L20.105 100l8.632-37L0 38.105l37.842-3.21L52.632 0l14.79 34.842zM52.631 21.58v48.947l19.843 12L67.21 60l17.474-15.158-23.052-2-9-21.263z"
- fill="currentcolor"
- fillRule="evenodd"
- />
- </svg>
- <svg
- alt="3"
- aria-label="3"
- fill="none"
- role="img"
- style={
- Object {
- "width": "20px",
- }
- }
- viewBox="0 0 106 100"
- >
- <path
- clipRule="evenodd"
- d="M67.421 34.842l37.842 3.263L76.579 63l8.579 37-32.526-19.632L20.105 100l8.632-37L0 38.105l37.842-3.21L52.632 0l14.79 34.842zm-34.58 47.632l19.79-11.948 19.842 12L67.21 60l17.474-15.158-23.053-2-9-21.263-8.947 21.21-23.053 2 17.474 15.158-5.263 22.527z"
- fill="currentcolor"
- fillRule="evenodd"
- />
- </svg>
- <svg
- alt="4"
- aria-label="4"
- fill="none"
- role="img"
- style={
- Object {
- "width": "20px",
- }
- }
- viewBox="0 0 106 100"
- >
- <path
- clipRule="evenodd"
- d="M67.421 34.842l37.842 3.263L76.579 63l8.579 37-32.526-19.632L20.105 100l8.632-37L0 38.105l37.842-3.21L52.632 0l14.79 34.842zm-34.58 47.632l19.79-11.948 19.842 12L67.21 60l17.474-15.158-23.053-2-9-21.263-8.947 21.21-23.053 2 17.474 15.158-5.263 22.527z"
- fill="currentcolor"
- fillRule="evenodd"
- />
- </svg>
- <svg
- alt="5"
- aria-label="5"
- fill="none"
- role="img"
- style={
- Object {
- "width": "20px",
- }
- }
- viewBox="0 0 106 100"
- >
- <path
- clipRule="evenodd"
- d="M67.421 34.842l37.842 3.263L76.579 63l8.579 37-32.526-19.632L20.105 100l8.632-37L0 38.105l37.842-3.21L52.632 0l14.79 34.842zm-34.58 47.632l19.79-11.948 19.842 12L67.21 60l17.474-15.158-23.053-2-9-21.263-8.947 21.21-23.053 2 17.474 15.158-5.263 22.527z"
- fill="currentcolor"
- fillRule="evenodd"
- />
- </svg>
- </div>
- <div
- className="c12"
- >
- <p
- className="c13"
- >
- karting
- </p>
- <span
- className="c14"
- >
- |
- </span>
- <p
- className="c13"
- >
- mushrooms
- </p>
- <span
- className="c14"
- >
- |
- </span>
- <p
- className="c13"
- >
- mario
- </p>
- </div>
- </div>
- <div
- className="c16"
- >
- <div
- className="c7"
- style={
- Object {
- "marginBottom": "-1em",
- }
- }
- >
- <div
- className="c17"
- >
- <svg
- height="120px"
- version="1.1"
- viewBox="0 0 1000 1000"
- width="120px"
- xmlns="http://www.w3.org/2000/svg"
- >
- <path
- d="M502.56508,868.364664 C511.93155,862.588075 523.095822,855.151458 535.04456,846.573064 C568.356448,822.657358 601.727957,794.366431 631.986836,762.739204 C670.449872,722.536816 701.168462,679.73622 721.677407,634.99991 C745.587052,582.845627 754.91721,529.57787 747.526139,475.323915 C729.599303,343.732453 626.596403,250 499.286261,250 C372.372238,250 270.864911,343.231572 252.772718,475.337398 C244.509241,535.675767 254.910456,593.178228 281.38033,648.043223 C303.726517,694.360915 336.875734,737.501264 378.116754,777.203565C406.461936,804.491177 436.782663,828.440662 467.722026,849.417211 C478.177327,856.505791 487.661494,862.556978 497.309147,868.437102C497.961101,868.834461 498.885903,869.394858 499.886582,870 C500.740299,869.484354 501.635452,868.937995 502.56508,868.364664 Z M787.143802,465.995818 C823.586498,728.435484 499.257577,912.23147 499.257577,909.979533 C499.257577,907.727596 174.642224,742.049383 213.178319,465.995818C233.93758,317.286714 351.05416,210 499.22782,210 C647.401481,210 766.506373,317.376739 787.143802,465.995818 Z"
- fill="#1CB569"
- />
- </svg>
- </div>
- <div
- className="c18"
- size={6}
- >
- <svg
- alt="マリオ"
- aria-label="マリオ"
- fill="none"
- role="img"
- style={
- Object {
- "width": "46.153846153846146px",
- }
- }
- viewBox="0.5 0.5 100 100"
- >
- <path
- clipRule="evenodd"
- d="M50.5 100.5c27.614 0 50-22.386 50-50S78.114.5 50.5.5s-50 22.386-50 50 22.386 50 50 50zM16.125 73.417V60.552L57.167 19.51a2.579 2.579 0 0 1 3.698 0l9.218 9.22a2.578 2.578 0 0 1 0 3.697L28.99 73.417H16.125zm23.438 0h39.062V63H49.979L39.563 73.417z"
- fill="currentcolor"
- fillRule="evenodd"
- />
- </svg>
- </div>
- </div>
- <p
- className="c19"
- size={4}
- >
- マリオ
- </p>
- <div
- className="c7"
- style={
- Object {
- "marginBottom": "-1em",
- }
- }
- >
- <div
- className="c17"
- >
- <svg
- height="120px"
- version="1.1"
- viewBox="0 0 1000 1000"
- width="120px"
- xmlns="http://www.w3.org/2000/svg"
- >
- <path
- d="M502.56508,868.364664 C511.93155,862.588075 523.095822,855.151458 535.04456,846.573064 C568.356448,822.657358 601.727957,794.366431 631.986836,762.739204 C670.449872,722.536816 701.168462,679.73622 721.677407,634.99991 C745.587052,582.845627 754.91721,529.57787 747.526139,475.323915 C729.599303,343.732453 626.596403,250 499.286261,250 C372.372238,250 270.864911,343.231572 252.772718,475.337398 C244.509241,535.675767 254.910456,593.178228 281.38033,648.043223 C303.726517,694.360915 336.875734,737.501264 378.116754,777.203565C406.461936,804.491177 436.782663,828.440662 467.722026,849.417211 C478.177327,856.505791 487.661494,862.556978 497.309147,868.437102C497.961101,868.834461 498.885903,869.394858 499.886582,870 C500.740299,869.484354 501.635452,868.937995 502.56508,868.364664 Z M787.143802,465.995818 C823.586498,728.435484 499.257577,912.23147 499.257577,909.979533 C499.257577,907.727596 174.642224,742.049383 213.178319,465.995818C233.93758,317.286714 351.05416,210 499.22782,210 C647.401481,210 766.506373,317.376739 787.143802,465.995818 Z"
- fill="#1CB569"
- />
- </svg>
- </div>
- <div
- className="c18"
- size={6}
- >
- <svg
- alt="ã‚ノコ"
- aria-label="ã‚ノコ"
- fill="none"
- role="img"
- style={
- Object {
- "width": "46.153846153846146px",
- }
- }
- viewBox="0.5 0.5 100 100"
- >
- <path
- clipRule="evenodd"
- d="M100.515 50.515c0 27.614-22.386 50-50 50-27.615 0-50-22.386-50-50s22.385-50 50-50c27.614 0 50 22.386 50 50zm-49.41 30.261c.032.042.067.085.105.131l.13-.12c.07-.062.122-.11.172-.16l5.411-5.384c6.41-6.378 12.818-12.756 19.224-19.137 2.069-2.061 3.705-4.413 4.718-7.164 1.507-4.094 1.618-8.218.112-12.33-2.568-7.01-9.32-11.775-16.847-11.768-4.174.004-7.916 1.252-11.206 3.813-.398.31-.78.642-1.162.976-.178.155-.355.31-.535.463-.128-.117-.24-.22-.35-.323-3.939-3.678-8.638-5.332-13.981-4.855-6.042.539-10.724 3.483-13.884 8.64-2.75 4.49-3.248 9.324-1.727 14.352.98 3.239 2.813 5.958 5.203 8.334a41012.808 41012.808 0 0 1 24.43 24.315c.065.064.122.136.187.217z"
- fill="currentcolor"
- fillRule="evenodd"
- />
- </svg>
- </div>
- </div>
- <p
- className="c19"
- size={4}
- >
- ã‚ノコ
- </p>
- </div>
- </div>
- </div>
-</div>
-`;
-
-exports[`Storyshots Organisms/ProfileBubble ProfileBubble/default 1`] = `
-.c13 {
- font-size: 1rem;
- margin: 0.5rem auto;
- text-align: left;
- max-width: 240px;
- line-height: 1.55em;
-}
-
-.c9 {
- font-size: 0.5884615384615384rem;
- margin: 0.5rem auto;
- text-align: left;
- max-width: 240px;
- line-height: 1.55em;
-}
-
-.c15 {
- font-size: 1rem;
- margin: 0.5rem auto;
- color: #1CB569;
- text-align: left;
- max-width: 240px;
- line-height: 1.55em;
-}
-
-.c19 {
- font-size: 0.85rem;
- margin: 0.5rem auto;
- text-align: left;
- max-width: 240px;
- line-height: 1.55em;
-}
-
-.c17 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-transform: rotate(90deg);
- -ms-transform: rotate(90deg);
- transform: rotate(90deg);
-}
-
-.c4 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-transform: rotate(0deg);
- -ms-transform: rotate(0deg);
- transform: rotate(0deg);
-}
-
-.c8 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-transform: rotate(180deg);
- -ms-transform: rotate(180deg);
- transform: rotate(180deg);
-}
-
-.c5 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- position: absolute;
- top: 30.76923076923077%;
- left: 30.76923076923077%;
- width: 53.84615384615384px;
- height: 53.84615384615384px;
- font-size: 0;
-}
-
-.c18 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- position: absolute;
- top: 30.76923076923077%;
- left: 30.76923076923077%;
- width: 46.153846153846146px;
- height: 46.153846153846146px;
- font-size: 0;
-}
-
-.c7 {
- position: relative;
-}
-
-.c3 {
- position: relative;
-}
-
-.c0 {
- background-color: white;
- padding: 1rem;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-align-items: stretch;
- -webkit-box-align: stretch;
- -ms-flex-align: stretch;
- align-items: stretch;
- -webkit-align-content: stretch;
- -ms-flex-line-pack: stretch;
- align-content: stretch;
- -webkit-box-pack: justify;
- -webkit-justify-content: space-between;
- -ms-flex-pack: justify;
- justify-content: space-between;
- -webkit-flex-direction: row;
- -ms-flex-direction: row;
- flex-direction: row;
- border-radius: 3rem;
- border-width: 0;
- border-style: solid;
- box-shadow: 0 1px 5px 0 rgba(0,0,0,0.2),0 3px 4px 0 rgba(0,0,0,0.12),0 2px 4px 0 rgba(0,0,0,0.14);
-}
-
-.c0 > * {
- -webkit-flex: 1 auto;
- -ms-flex: 1 auto;
- flex: 1 auto;
-}
-
-.c2 svg {
- -webkit-filter: drop-shadow(0px 2px 4px rgba(0,0,0,0.2)) drop-shadow(0px 1px 10px rgba(0,0,0,0.12)) drop-shadow(0px 4px 5px rgba(0,0,0,0.14));
- filter: drop-shadow(0px 2px 4px rgba(0,0,0,0.2)) drop-shadow(0px 1px 10px rgba(0,0,0,0.12)) drop-shadow(0px 4px 5px rgba(0,0,0,0.14));
-}
-
-.c1 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-flex-direction: column;
- -ms-flex-direction: column;
- flex-direction: column;
- -webkit-align-items: start;
- -webkit-box-align: start;
- -ms-flex-align: start;
- align-items: start;
- justify-self: start;
-}
-
-.c10 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-flex-direction: column;
- -ms-flex-direction: column;
- flex-direction: column;
- -webkit-align-items: start;
- -webkit-box-align: start;
- -ms-flex-align: start;
- align-items: start;
- margin: 0 1rem;
- -webkit-box-pack: center;
- -webkit-justify-content: center;
- -ms-flex-pack: center;
- justify-content: center;
- justify-self: center;
-}
-
-.c16 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-flex-direction: column;
- -ms-flex-direction: column;
- flex-direction: column;
- -webkit-align-items: start;
- -webkit-box-align: start;
- -ms-flex-align: start;
- align-items: start;
- justify-self: end;
-}
-
-.c11 {
- font-weight: normal;
- text-transform: lowercase;
- font-size: 2.5rem;
- margin: 0;
- font-family: Libre Baskerville,Helvetica,Arial,serif;
- color: #1CB569;
-}
-
-.c12 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-flex-flow: row wrap;
- -ms-flex-flow: row wrap;
- flex-flow: row wrap;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
-}
-
-.c14 {
- margin: 0 0.5rem;
-}
-
-.c6 {
- border-radius: 2000rem;
- max-width: 100%;
-}
-
-<div
- style={
- Object {
- "alignItems": "center",
- "bottom": "0",
- "display": "flex",
- "left": "0",
- "overflow": "auto",
- "position": "fixed",
- "right": "0",
- "top": "0",
- }
- }
->
- <div
- style={
- Object {
- "margin": "auto",
- "maxHeight": "100%",
- }
- }
- >
- <div
- className="c0"
- style={
- Object {
- "margin": "function (props) {
- return (0, _core.get)(props.theme, path, fallback);
- } function (props) {
- return (0, _core.get)(props.theme, path, fallback);
- }",
- }
- }
- >
- <div
- className="c1"
- >
- <div
- className="c2"
- >
- <div
- className="c3"
- style={
- Object {
- "marginBottom": "-1em",
- }
- }
- >
- <div
- className="c4"
- >
- <svg
- height="140px"
- version="1.1"
- viewBox="0 0 1000 1000"
- width="140px"
- xmlns="http://www.w3.org/2000/svg"
- >
- <title>
- Atoms/Icon/Pin
- </title>
- <defs>
- <filter
- filterUnits="objectBoundingBox"
- height="106.9%"
- id="filter-1"
- width="108.5%"
- x="-4.2%"
- y="-2.5%"
- >
- <feMerge>
- <feMergeNode
- in="SourceGraphic"
- />
- </feMerge>
- </filter>
- </defs>
- <g
- fill="none"
- fillRule="evenodd"
- id="Symbols"
- stroke="none"
- strokeWidth="1"
- >
- <g
- id="Atoms/Icon/Pin"
- >
- <g
- id="Group"
- transform="translate(1.000000, 0.000000)"
- >
- <g
- fill="#1CB569"
- fillRule="nonzero"
- filter="url(#filter-1)"
- id="Atom-Pin"
- transform="translate(210.000000, 219.000000)"
- >
- <path
- d="M577.143802,255.995818 C556.506373,107.376739 437.401481,0 289.22782,0 C141.05416,0 23.9375802,107.286714 3.17831886,255.995818 C-35.3577758,532.049383 289.257577,697.727596 289.257577,699.979533 C289.257577,702.23147 613.586498,518.435484 577.143802,255.995818 Z M40,290 C40,152.5 152.5,40 290,40 C427.5,40 540,152.5 540,290 C540,427.5 428.75,540 290,540 C152.5,540 40,427.5 40,290 Z"
- id="Pin-Main-Shape"
- />
- </g>
- </g>
- </g>
- </g>
- </svg>
- </div>
- <div
- className="c5"
- size={7}
- >
- <img
- alt="Profile picture"
- className="c6"
- size={2.692307692307692}
- src="http://www.papersurfer.com/wp-content/uploads/2007/09/babelfish.jpg"
- />
- </div>
- </div>
- </div>
- <div
- className="c7"
- style={
- Object {
- "marginTop": "-1em",
- }
- }
- >
- <div
- className="c8"
- >
- <svg
- height="140px"
- version="1.1"
- viewBox="0 0 1000 1000"
- width="140px"
- xmlns="http://www.w3.org/2000/svg"
- >
- <path
- d="M502.56508,868.364664 C511.93155,862.588075 523.095822,855.151458 535.04456,846.573064 C568.356448,822.657358 601.727957,794.366431 631.986836,762.739204 C670.449872,722.536816 701.168462,679.73622 721.677407,634.99991 C745.587052,582.845627 754.91721,529.57787 747.526139,475.323915 C729.599303,343.732453 626.596403,250 499.286261,250 C372.372238,250 270.864911,343.231572 252.772718,475.337398 C244.509241,535.675767 254.910456,593.178228 281.38033,648.043223 C303.726517,694.360915 336.875734,737.501264 378.116754,777.203565C406.461936,804.491177 436.782663,828.440662 467.722026,849.417211 C478.177327,856.505791 487.661494,862.556978 497.309147,868.437102C497.961101,868.834461 498.885903,869.394858 499.886582,870 C500.740299,869.484354 501.635452,868.937995 502.56508,868.364664 Z M787.143802,465.995818 C823.586498,728.435484 499.257577,912.23147 499.257577,909.979533 C499.257577,907.727596 174.642224,742.049383 213.178319,465.995818C233.93758,317.286714 351.05416,210 499.22782,210 C647.401481,210 766.506373,317.376739 787.143802,465.995818 Z"
- fill="#1CB569"
- />
- </svg>
- </div>
- <div
- className="c5"
- size={7}
- >
- <p
- className="c9"
- size={2.692307692307692}
- >
- Map
- </p>
- </div>
- </div>
- </div>
- <div
- className="c10"
- >
- <h2
- className="c11"
- >
- Linguala
- </h2>
- <div
- className="c12"
- >
- <p
- className="c13"
- >
- Basel, CH
- </p>
- <span
- className="c14"
- >
- |
- </span>
- <p
- className="c15"
- >
- 5
- Sprachen
- </p>
- <span
- className="c14"
- >
- |
- </span>
- <svg
- alt="1"
- aria-label="1"
- fill="none"
- role="img"
- style={
- Object {
- "width": "20px",
- }
- }
- viewBox="0 0 106 100"
- >
- <path
- d="M52.632 80.368L85.158 100l-8.632-37 28.737-24.895-37.842-3.21L52.631 0 37.843 34.895 0 38.105 28.737 63l-8.632 37 32.527-19.632z"
- fill="currentcolor"
- />
- </svg>
- <svg
- alt="2"
- aria-label="2"
- fill="none"
- role="img"
- style={
- Object {
- "width": "20px",
- }
- }
- viewBox="0 0 106 100"
- >
- <path
- d="M52.632 80.368L85.158 100l-8.632-37 28.737-24.895-37.842-3.21L52.631 0 37.843 34.895 0 38.105 28.737 63l-8.632 37 32.527-19.632z"
- fill="currentcolor"
- />
- </svg>
- <svg
- alt="3"
- aria-label="3"
- fill="none"
- role="img"
- style={
- Object {
- "width": "20px",
- }
- }
- viewBox="0 0 106 100"
- >
- <path
- d="M52.632 80.368L85.158 100l-8.632-37 28.737-24.895-37.842-3.21L52.631 0 37.843 34.895 0 38.105 28.737 63l-8.632 37 32.527-19.632z"
- fill="currentcolor"
- />
- </svg>
- <svg
- alt="4"
- aria-label="4"
- fill="none"
- role="img"
- style={
- Object {
- "width": "20px",
- }
- }
- viewBox="0 0 106 100"
- >
- <path
- d="M52.632 80.368L85.158 100l-8.632-37 28.737-24.895-37.842-3.21L52.631 0 37.843 34.895 0 38.105 28.737 63l-8.632 37 32.527-19.632z"
- fill="currentcolor"
- />
- </svg>
- <svg
- alt="5"
- aria-label="5"
- fill="none"
- role="img"
- style={
- Object {
- "width": "20px",
- }
- }
- viewBox="0 0 106 100"
- >
- <path
- d="M52.632 80.368L85.158 100l-8.632-37 28.737-24.895-37.842-3.21L52.631 0 37.843 34.895 0 38.105 28.737 63l-8.632 37 32.527-19.632z"
- fill="currentcolor"
- />
- </svg>
- </div>
- <div
- className="c12"
- >
- <p
- className="c13"
- >
- translation
- </p>
- <span
- className="c14"
- >
- |
- </span>
- <p
- className="c13"
- >
- interpreting
- </p>
- <span
- className="c14"
- >
- |
- </span>
- <p
- className="c13"
- >
- lessons
- </p>
- </div>
- </div>
- <div
- className="c16"
- >
- <div
- className="c7"
- style={
- Object {
- "marginBottom": "-1em",
- }
- }
- >
- <div
- className="c17"
- >
- <svg
- height="120px"
- version="1.1"
- viewBox="0 0 1000 1000"
- width="120px"
- xmlns="http://www.w3.org/2000/svg"
- >
- <path
- d="M502.56508,868.364664 C511.93155,862.588075 523.095822,855.151458 535.04456,846.573064 C568.356448,822.657358 601.727957,794.366431 631.986836,762.739204 C670.449872,722.536816 701.168462,679.73622 721.677407,634.99991 C745.587052,582.845627 754.91721,529.57787 747.526139,475.323915 C729.599303,343.732453 626.596403,250 499.286261,250 C372.372238,250 270.864911,343.231572 252.772718,475.337398 C244.509241,535.675767 254.910456,593.178228 281.38033,648.043223 C303.726517,694.360915 336.875734,737.501264 378.116754,777.203565C406.461936,804.491177 436.782663,828.440662 467.722026,849.417211 C478.177327,856.505791 487.661494,862.556978 497.309147,868.437102C497.961101,868.834461 498.885903,869.394858 499.886582,870 C500.740299,869.484354 501.635452,868.937995 502.56508,868.364664 Z M787.143802,465.995818 C823.586498,728.435484 499.257577,912.23147 499.257577,909.979533 C499.257577,907.727596 174.642224,742.049383 213.178319,465.995818C233.93758,317.286714 351.05416,210 499.22782,210 C647.401481,210 766.506373,317.376739 787.143802,465.995818 Z"
- fill="#1CB569"
- />
- </svg>
- </div>
- <div
- className="c18"
- size={6}
- >
- <svg
- alt="Kontaktaufnahme"
- aria-label="Kontaktaufnahme"
- fill="none"
- role="img"
- style={
- Object {
- "width": "46.153846153846146px",
- }
- }
- viewBox="0.5 0.5 100 100"
- >
- <path
- clipRule="evenodd"
- d="M50.5 100.5c27.614 0 50-22.386 50-50S78.114.5 50.5.5s-50 22.386-50 50 22.386 50 50 50zM16.125 73.417V60.552L57.167 19.51a2.579 2.579 0 0 1 3.698 0l9.218 9.22a2.578 2.578 0 0 1 0 3.697L28.99 73.417H16.125zm23.438 0h39.062V63H49.979L39.563 73.417z"
- fill="currentcolor"
- fillRule="evenodd"
- />
- </svg>
- </div>
- </div>
- <p
- className="c19"
- size={4}
- >
- Kontaktaufnahme
- </p>
- <div
- className="c7"
- style={
- Object {
- "marginBottom": "-1em",
- }
- }
- >
- <div
- className="c17"
- >
- <svg
- height="120px"
- version="1.1"
- viewBox="0 0 1000 1000"
- width="120px"
- xmlns="http://www.w3.org/2000/svg"
- >
- <path
- d="M502.56508,868.364664 C511.93155,862.588075 523.095822,855.151458 535.04456,846.573064 C568.356448,822.657358 601.727957,794.366431 631.986836,762.739204 C670.449872,722.536816 701.168462,679.73622 721.677407,634.99991 C745.587052,582.845627 754.91721,529.57787 747.526139,475.323915 C729.599303,343.732453 626.596403,250 499.286261,250 C372.372238,250 270.864911,343.231572 252.772718,475.337398 C244.509241,535.675767 254.910456,593.178228 281.38033,648.043223 C303.726517,694.360915 336.875734,737.501264 378.116754,777.203565C406.461936,804.491177 436.782663,828.440662 467.722026,849.417211 C478.177327,856.505791 487.661494,862.556978 497.309147,868.437102C497.961101,868.834461 498.885903,869.394858 499.886582,870 C500.740299,869.484354 501.635452,868.937995 502.56508,868.364664 Z M787.143802,465.995818 C823.586498,728.435484 499.257577,912.23147 499.257577,909.979533 C499.257577,907.727596 174.642224,742.049383 213.178319,465.995818C233.93758,317.286714 351.05416,210 499.22782,210 C647.401481,210 766.506373,317.376739 787.143802,465.995818 Z"
- fill="#1CB569"
- />
- </svg>
- </div>
- <div
- className="c18"
- size={6}
- >
- <svg
- alt="Zu Favoriten hinzufügen"
- aria-label="Zu Favoriten hinzufügen"
- fill="none"
- role="img"
- style={
- Object {
- "width": "46.153846153846146px",
- }
- }
- viewBox="0.5 0.5 100 100"
- >
- <path
- clipRule="evenodd"
- d="M100.515 50.515c0 27.614-22.386 50-50 50-27.615 0-50-22.386-50-50s22.385-50 50-50c27.614 0 50 22.386 50 50zm-49.41 30.261c.032.042.067.085.105.131l.13-.12c.07-.062.122-.11.172-.16l5.411-5.384c6.41-6.378 12.818-12.756 19.224-19.137 2.069-2.061 3.705-4.413 4.718-7.164 1.507-4.094 1.618-8.218.112-12.33-2.568-7.01-9.32-11.775-16.847-11.768-4.174.004-7.916 1.252-11.206 3.813-.398.31-.78.642-1.162.976-.178.155-.355.31-.535.463-.128-.117-.24-.22-.35-.323-3.939-3.678-8.638-5.332-13.981-4.855-6.042.539-10.724 3.483-13.884 8.64-2.75 4.49-3.248 9.324-1.727 14.352.98 3.239 2.813 5.958 5.203 8.334a41012.808 41012.808 0 0 1 24.43 24.315c.065.064.122.136.187.217z"
- fill="currentcolor"
- fillRule="evenodd"
- />
- </svg>
- </div>
- </div>
- <p
- className="c19"
- size={4}
- >
- Zu Favoriten hinzufügen
- </p>
- </div>
- </div>
- </div>
-</div>
-`;
-
-exports[`Storyshots Organisms/SubHeaderHor Sub Header Hor 1`] = `
-.c0 {
- display: inline-block;
- position: relative;
- text-transform: lowercase;
- font-family: Libre Baskerville,Helvetica,Arial,serif;
-}
-
-.c1 {
- -webkit-box-pack: justify;
- -webkit-justify-content: space-between;
- -ms-flex-pack: justify;
- justify-content: space-between;
- background-color: white;
- border-radius: 3rem;
- padding: 1rem;
- box-shadow: 0 1px 5px 0 rgba(0,0,0,0.2),0 3px 4px 0 rgba(0,0,0,0.12),0 2px 4px 0 rgba(0,0,0,0.14);
-}
-
-.c2 {
- color: #4A90E2;
- display: inline-block;
- margin: 0.5rem;
- padding: 0.5rem;
- font-size: 2rem;
-}
-
-.c3 {
- color: #1CB569;
- display: inline-block;
- margin: 0.5rem;
- padding: 0.5rem;
- font-size: 1rem;
-}
-
-.c4 {
- color: #4A90E2;
- display: inline-block;
- margin: 0.5rem;
- padding: 0.5rem;
- font-size: 1rem;
-}
-
-<div
- style={
- Object {
- "alignItems": "center",
- "bottom": "0",
- "display": "flex",
- "left": "0",
- "overflow": "auto",
- "position": "fixed",
- "right": "0",
- "top": "0",
- }
- }
->
- <div
- style={
- Object {
- "margin": "auto",
- "maxHeight": "100%",
- }
- }
- >
- <div
- className="c0"
- >
- <div
- className="c1"
- >
- <div
- className="c2"
- selected={true}
- >
- Profil
- </div>
- <div
- className="c3"
- >
- Porträt
- </div>
- <div
- className="c3"
- >
- Banner
- </div>
- <div
- className="c4"
- selected={true}
- >
- Bezahlung
- </div>
- <div
- className="c3"
- >
- Kontakt
- </div>
- <div
- className="c3"
- >
- Blog
- </div>
- </div>
- </div>
- </div>
-</div>
-`;
-
-exports[`Storyshots Organisms/TranslationBubble TranslationBubble/default 1`] = `
-.c5 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-transform: rotate(360deg);
- -ms-transform: rotate(360deg);
- transform: rotate(360deg);
-}
-
-.c6 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- position: absolute;
- top: 30.76923076923077%;
- left: 30.76923076923077%;
- width: 30.769230769230766px;
- height: 30.769230769230766px;
- font-size: 0;
-}
-
-.c4 {
- position: relative;
-}
-
-.c0 {
- background-color: white;
- padding: 1rem;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-align-items: stretch;
- -webkit-box-align: stretch;
- -ms-flex-align: stretch;
- align-items: stretch;
- -webkit-align-content: stretch;
- -ms-flex-line-pack: stretch;
- align-content: stretch;
- -webkit-box-pack: justify;
- -webkit-justify-content: space-between;
- -ms-flex-pack: justify;
- justify-content: space-between;
- -webkit-flex-direction: column;
- -ms-flex-direction: column;
- flex-direction: column;
- border-radius: 3rem;
- border-width: 0;
- border-style: solid;
- box-shadow: 0 1px 5px 0 rgba(0,0,0,0.2),0 3px 4px 0 rgba(0,0,0,0.12),0 2px 4px 0 rgba(0,0,0,0.14);
-}
-
-.c0 > * {
- -webkit-flex: 1 auto;
- -ms-flex: 1 auto;
- flex: 1 auto;
-}
-
-.c7 {
- background: #1CB569;
- padding-left: 0.5rem;
- padding-bottom: 0;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-align-content: stretch;
- -ms-flex-line-pack: stretch;
- align-content: stretch;
- -webkit-box-pack: justify;
- -webkit-justify-content: space-between;
- -ms-flex-pack: justify;
- justify-content: space-between;
- -webkit-flex-direction: column;
- -ms-flex-direction: column;
- flex-direction: column;
- border-radius: 3rem;
- border-width: 0;
- border-style: solid;
- box-shadow: 0px 4px 5px 0 rgba(0,0,0,0.2),0 3px 14px 3px rgba(0,0,0,0.12),0 8px 10px 1px rgba(0,0,0,0.14);
- margin: 0 0.5rem 0.5rem 0.5rem;
-}
-
-.c7 > * {
- -webkit-flex: 1 auto;
- -ms-flex: 1 auto;
- flex: 1 auto;
-}
-
-.c3 {
- margin: 0 auto;
-}
-
-.c2 {
- display: grid;
- grid-template-columns: repeat(4,auto);
- grid-gap: 0.5rem;
-}
-
-.c8 {
- width: 80%;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-pack: justify;
- -webkit-justify-content: space-between;
- -ms-flex-pack: justify;
- justify-content: space-between;
- margin: 1rem;
- margin-bottom: 0.5rem;
-}
-
-.c8 * > {
- -webkit-flex: 1;
- -ms-flex: 1;
- flex: 1;
-}
-
-.c1 {
- font-size: 3rem;
- font-family: Libre Baskerville,Helvetica,Arial,serif;
- font-weight: lighter;
- color: #1CB569;
-}
-
-<div
- style={
- Object {
- "alignItems": "center",
- "bottom": "0",
- "display": "flex",
- "left": "0",
- "overflow": "auto",
- "position": "fixed",
- "right": "0",
- "top": "0",
- }
- }
->
- <div
- style={
- Object {
- "margin": "auto",
- "maxHeight": "100%",
- }
- }
- >
- <div
- className="c0"
- >
- <h1
- className="c1"
- style={
- Object {
- "fontSize": "2rem",
- "textAlign": "center",
- }
- }
- >
- n/a
- </h1>
- <p
- style={
- Object {
- "fontSize": "0.8rem",
- "maxWidth": 550,
- "textJustify": "justify",
- }
- }
- >
- n/a
- </p>
- <div
- className="c2"
- >
- <div
- className="c3"
- >
- <div
- className="c4"
- style={
- Object {
- "marginBottom": "1em",
- }
- }
- >
- <div
- className="c5"
- >
- <svg
- height="80px"
- version="1.1"
- viewBox="0 0 1000 1000"
- width="80px"
- xmlns="http://www.w3.org/2000/svg"
- >
- <path
- d="M502.56508,868.364664 C511.93155,862.588075 523.095822,855.151458 535.04456,846.573064 C568.356448,822.657358 601.727957,794.366431 631.986836,762.739204 C670.449872,722.536816 701.168462,679.73622 721.677407,634.99991 C745.587052,582.845627 754.91721,529.57787 747.526139,475.323915 C729.599303,343.732453 626.596403,250 499.286261,250 C372.372238,250 270.864911,343.231572 252.772718,475.337398 C244.509241,535.675767 254.910456,593.178228 281.38033,648.043223 C303.726517,694.360915 336.875734,737.501264 378.116754,777.203565C406.461936,804.491177 436.782663,828.440662 467.722026,849.417211 C478.177327,856.505791 487.661494,862.556978 497.309147,868.437102C497.961101,868.834461 498.885903,869.394858 499.886582,870 C500.740299,869.484354 501.635452,868.937995 502.56508,868.364664 Z M787.143802,465.995818 C823.586498,728.435484 499.257577,912.23147 499.257577,909.979533 C499.257577,907.727596 174.642224,742.049383 213.178319,465.995818C233.93758,317.286714 351.05416,210 499.22782,210 C647.401481,210 766.506373,317.376739 787.143802,465.995818 Z"
- fill="#1CB569"
- />
- </svg>
- </div>
- <div
- className="c6"
- size={4}
- >
- <svg
- alt="n/a"
- aria-label="n/a"
- role="img"
- style={
- Object {
- "width": "30.769230769230766px",
- }
- }
- viewBox="0 0 25 25"
- >
- <defs>
- <path
- d="M0 0h25v25H0z"
- id="Add_svg__a"
- />
- </defs>
- <g
- fill="none"
- fillRule="evenodd"
- >
- <mask
- fill="#fff"
- id="Add_svg__b"
- >
- <use
- xlinkHref="#Add_svg__a"
- />
- </mask>
- <path
- d="M12.5 24.5c-6.627 0-12-5.373-12-12s5.373-12 12-12 12 5.373 12 12-5.373 12-12 12z"
- fill="#1CB569"
- fillRule="nonzero"
- mask="url(#Add_svg__b)"
- />
- <path
- d="M18.75 13.75h-5v5h-2.5v-5h-5v-2.5h5v-5h2.5v5h5z"
- fill="#FFF"
- fillRule="nonzero"
- />
- </g>
- </svg>
- </div>
- </div>
- <p
- style={
- Object {
- "fontSize": "0.8rem",
- "marginTop": "-1em",
- "textAlign": "center",
- }
- }
- >
- n/a
- </p>
- </div>
- </div>
- <div
- className="c7"
- style={
- Object {
- "alignItems": "center",
- }
- }
- >
- <div
- className="c8"
- >
- <p
- style={
- Object {
- "color": "white",
- "fontSize": "1.5rem",
- "margin": "0",
- }
- }
- >
- n/a
- </p>
- <svg
- alt="Logo"
- aria-label="Logo"
- role="img"
- style={
- Object {
- "width": "80px",
- }
- }
- viewBox="0 0 400 200"
- >
- <defs>
- <path
- d="M0 0h400v200H0z"
- id="LingualaLogo_svg__a"
- />
- </defs>
- <g
- fill="none"
- fillRule="nonzero"
- >
- <path
- d="M196.667 151.912c-9.553-9.799-18.017-20.255-25.33-30.717a223.362 223.362 0 0 1-6.73-10.18 117.96 117.96 0 0 1-2.462-4.12l-3.342-5.956 3.144-6.062c.142-.273.38-.719.713-1.326.527-.96 1.148-2.057 1.862-3.278a208.376 208.376 0 0 1 7.093-11.252c7.758-11.51 16.85-22.833 27.257-33.195 30.496-30.36 66.022-46.606 105.843-41.06 49.93 6.953 85.748 46.605 85.748 95.928 0 49.412-35.942 89.573-85.757 96.473-39.817 5.515-76.134-12.532-108.039-45.255zm-8.658-51.424a209.053 209.053 0 0 0 4.178 6.203c6.57 9.398 14.183 18.803 22.703 27.541 26.825 27.514 56.01 42.018 86.32 37.82 37.379-5.179 63.834-34.739 63.834-71.358 0-36.482-26.29-65.586-63.844-70.815-30.753-4.283-58.996 8.632-84.371 33.895-9.147 9.107-17.227 19.169-24.12 29.395a191.043 191.043 0 0 0-4.7 7.319z"
- fill="#4A90E2"
- />
- <path
- d="M95.758 2.983c39.816-5.515 76.133 12.532 108.038 45.255 9.553 9.799 18.017 20.255 25.33 30.717a223.362 223.362 0 0 1 6.73 10.18c1.178 1.9 2.002 3.3 2.462 4.12l3.342 5.956-3.144 6.062c-.141.273-.38.719-.713 1.326a142.25 142.25 0 0 1-1.861 3.278 208.376 208.376 0 0 1-7.094 11.252c-7.758 11.51-16.85 22.833-27.257 33.195-30.495 30.36-66.022 46.606-105.842 41.06C45.817 188.431 10 148.78 10 99.456 10 50.044 45.942 9.883 95.758 2.983zm112.519 90.476c-6.57-9.398-14.183-18.803-22.703-27.541-26.826-27.514-56.01-42.018-86.32-37.82-37.38 5.179-63.835 34.739-63.835 71.358 0 36.482 26.29 65.586 63.844 70.815 30.754 4.283 58.996-8.633 84.372-33.895 9.147-9.107 17.226-19.169 24.118-29.395a190.58 190.58 0 0 0 4.702-7.319 209.05 209.05 0 0 0-4.178-6.203z"
- fill="#1CB569"
- />
- </g>
- </svg>
- <p
- style={
- Object {
- "color": "white",
- "fontSize": "1.5rem",
- "margin": "0",
- }
- }
- >
- n/a
- </p>
- </div>
- </div>
- </div>
- </div>
-</div>
-`;
-
-exports[`Storyshots Organisms/TranslationBubble TranslationBubble/example 1`] = `
-.c5 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-transform: rotate(360deg);
- -ms-transform: rotate(360deg);
- transform: rotate(360deg);
-}
-
-.c6 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- position: absolute;
- top: 30.76923076923077%;
- left: 30.76923076923077%;
- width: 30.769230769230766px;
- height: 30.769230769230766px;
- font-size: 0;
-}
-
-.c4 {
- position: relative;
-}
-
-.c0 {
- background-color: white;
- padding: 1rem;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-align-items: stretch;
- -webkit-box-align: stretch;
- -ms-flex-align: stretch;
- align-items: stretch;
- -webkit-align-content: stretch;
- -ms-flex-line-pack: stretch;
- align-content: stretch;
- -webkit-box-pack: justify;
- -webkit-justify-content: space-between;
- -ms-flex-pack: justify;
- justify-content: space-between;
- -webkit-flex-direction: column;
- -ms-flex-direction: column;
- flex-direction: column;
- border-radius: 3rem;
- border-width: 0;
- border-style: solid;
- box-shadow: 0 1px 5px 0 rgba(0,0,0,0.2),0 3px 4px 0 rgba(0,0,0,0.12),0 2px 4px 0 rgba(0,0,0,0.14);
-}
-
-.c0 > * {
- -webkit-flex: 1 auto;
- -ms-flex: 1 auto;
- flex: 1 auto;
-}
-
-.c7 {
- background: #1CB569;
- padding-left: 0.5rem;
- padding-bottom: 0;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-align-content: stretch;
- -ms-flex-line-pack: stretch;
- align-content: stretch;
- -webkit-box-pack: justify;
- -webkit-justify-content: space-between;
- -ms-flex-pack: justify;
- justify-content: space-between;
- -webkit-flex-direction: column;
- -ms-flex-direction: column;
- flex-direction: column;
- border-radius: 3rem;
- border-width: 0;
- border-style: solid;
- box-shadow: 0px 4px 5px 0 rgba(0,0,0,0.2),0 3px 14px 3px rgba(0,0,0,0.12),0 8px 10px 1px rgba(0,0,0,0.14);
- margin: 0 0.5rem 0.5rem 0.5rem;
-}
-
-.c7 > * {
- -webkit-flex: 1 auto;
- -ms-flex: 1 auto;
- flex: 1 auto;
-}
-
-.c3 {
- margin: 0 auto;
-}
-
-.c2 {
- display: grid;
- grid-template-columns: repeat(4,auto);
- grid-gap: 0.5rem;
-}
-
-.c8 {
- width: 80%;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-pack: justify;
- -webkit-justify-content: space-between;
- -ms-flex-pack: justify;
- justify-content: space-between;
- margin: 1rem;
- margin-bottom: 0.5rem;
-}
-
-.c8 * > {
- -webkit-flex: 1;
- -ms-flex: 1;
- flex: 1;
-}
-
-.c1 {
- font-size: 3rem;
- font-family: Libre Baskerville,Helvetica,Arial,serif;
- font-weight: lighter;
- color: #1CB569;
-}
-
-<div
- style={
- Object {
- "alignItems": "center",
- "bottom": "0",
- "display": "flex",
- "left": "0",
- "overflow": "auto",
- "position": "fixed",
- "right": "0",
- "top": "0",
- }
- }
->
- <div
- style={
- Object {
- "margin": "auto",
- "maxHeight": "100%",
- }
- }
- >
- <div
- className="c0"
- >
- <h1
- className="c1"
- style={
- Object {
- "fontSize": "2rem",
- "textAlign": "center",
- }
- }
- >
- übersetzung I dolmetschen
- </h1>
- <p
- style={
- Object {
- "fontSize": "0.8rem",
- "maxWidth": 550,
- "textJustify": "justify",
- }
- }
- >
- Global Voices ist specialisiert in Marketing und Technologie da dies vor allem beim Live Dolmetschen unsere Hauptkunden sind. Aber naturlich konnen wir auch in weiteren Bereichen ubersetzen , Sprache ist Sprache und wir sind fur Sie da bla bla bla
- </p>
- <div
- className="c2"
- >
- <div
- className="c3"
- >
- <div
- className="c4"
- style={
- Object {
- "marginBottom": "1em",
- }
- }
- >
- <div
- className="c5"
- >
- <svg
- height="80px"
- version="1.1"
- viewBox="0 0 1000 1000"
- width="80px"
- xmlns="http://www.w3.org/2000/svg"
- >
- <path
- d="M502.56508,868.364664 C511.93155,862.588075 523.095822,855.151458 535.04456,846.573064 C568.356448,822.657358 601.727957,794.366431 631.986836,762.739204 C670.449872,722.536816 701.168462,679.73622 721.677407,634.99991 C745.587052,582.845627 754.91721,529.57787 747.526139,475.323915 C729.599303,343.732453 626.596403,250 499.286261,250 C372.372238,250 270.864911,343.231572 252.772718,475.337398 C244.509241,535.675767 254.910456,593.178228 281.38033,648.043223 C303.726517,694.360915 336.875734,737.501264 378.116754,777.203565C406.461936,804.491177 436.782663,828.440662 467.722026,849.417211 C478.177327,856.505791 487.661494,862.556978 497.309147,868.437102C497.961101,868.834461 498.885903,869.394858 499.886582,870 C500.740299,869.484354 501.635452,868.937995 502.56508,868.364664 Z M787.143802,465.995818 C823.586498,728.435484 499.257577,912.23147 499.257577,909.979533 C499.257577,907.727596 174.642224,742.049383 213.178319,465.995818C233.93758,317.286714 351.05416,210 499.22782,210 C647.401481,210 766.506373,317.376739 787.143802,465.995818 Z"
- fill="#1CB569"
- />
- </svg>
- </div>
- <div
- className="c6"
- size={4}
- >
- <svg
- alt="Expertise"
- aria-label="Expertise"
- fill="none"
- role="img"
- style={
- Object {
- "width": "30.769230769230766px",
- }
- }
- viewBox="0 0 25 25"
- >
- <mask
- height={25}
- id="Expertise_svg__a"
- maskUnits="userSpaceOnUse"
- width={25}
- x={0}
- y={0}
- >
- <path
- d="M0 0h25v25H0z"
- fill="#fff"
- />
- </mask>
- <g
- mask="url(#Expertise_svg__a)"
- >
- <path
- clipRule="evenodd"
- d="M24.5 12.5c0 6.627-5.373 12-12 12s-12-5.373-12-12 5.373-12 12-12 12 5.373 12 12z"
- fill="#1CB569"
- fillRule="evenodd"
- />
- </g>
- <path
- clipRule="evenodd"
- d="M20.52 13.06l-.013.457h.003c.64.019 1.11.478 1.111 1.089 0 .612-.47 1.07-1.11 1.089-.349-.003-.702-.178-1.043-.487a3.507 3.507 0 0 1-.522-.6 3.111 3.111 0 0 1-.063-.097l-.152.096-.002-.002.15-.129a.607.607 0 0 0-.012-.012l-.001-.001-.002-.002.003.003-.003-.004-.02-.02-.05-.05-.138.147-.221-.204-.063.068-.004.004-.02.022-.181.195.215.204.002.002-.008.005c.167.262.402.558.69.82.443.402.93.642 1.453.642v-.208l.006.208c.959-.026 1.694-.744 1.697-1.686h-.6v-.006h.6c-.003-.942-.74-1.66-1.699-1.686l-.004.143zm-1.844 1.582l-.292.186.016.016.01.01a.736.736 0 0 0 .023.024l.002.003-.012-.014.231-.198.155.143.003-.004.063-.068-.01-.01-.134-.123-.055.035zm.18.105l.009-.016a1.679 1.679 0 0 0-.01.016zm-.519-.303l.01-.017-.01.017zm.53.02l.009.01-.009-.01zm1.652 1.623l-.01-.392h.01v.392zm0-2.57h-.008.008zM4.38 15.873l.013-.457h-.004c-.64-.018-1.11-.478-1.11-1.089s.47-1.07 1.11-1.089c.349.003.702.178 1.042.488.209.188.388.404.523.6l.063.096.152-.096.002.002-.15.129.012.012.001.002.002.001-.003-.002.003.003.02.02.05.05.138-.147.221.205.063-.068.004-.005.02-.022.18-.195-.214-.204-.002-.002.008-.004a4.088 4.088 0 0 0-.69-.82c-.443-.402-.93-.643-1.454-.643v.208l-.005-.207c-.959.025-1.694.743-1.697 1.686h.6v.005h-.6c.003.943.74 1.66 1.699 1.686l.003-.143zm1.844-1.582l.292-.186-.016-.015-.01-.011-.023-.024-.003-.002.013.013-.231.198-.155-.143-.003.004-.063.068.01.01.134.123.055-.035zm-.18-.104l-.009.015a.929.929 0 0 0 .01-.015zm.519.302l-.01.017.01-.017zm-.53-.02l-.009-.009.009.009zM4.38 12.846l.01.392h-.01v-.392zm0 2.57h.01-.01zM17.147 7.766l.315.332.002-.002c.466-.44 1.123-.447 1.556-.016.431.433.424 1.09-.015 1.555-.249.245-.623.37-1.082.393-.281.013-.56-.012-.794-.056a3.18 3.18 0 0 1-.113-.023l-.04.175h-.003l.015-.196a.33.33 0 0 0-.016 0h-.004.003-.004l-.029-.002h-.07l.006.202-.301.012.003.092v.006l.002.03.01.266.296-.008h.003l-.002.009a4.09 4.09 0 0 0 1.067.092c.598-.029 1.112-.203 1.483-.574l-.147-.146.15.143c.66-.697.673-1.724.008-2.392l-.424.424-.002-.002-.002-.002.424-.424c-.668-.665-1.697-.652-2.393.008l.098.104zm-.184 2.422l-.076.338h.038l.033.001h.003-.018l.023-.304.21-.008v-.006l-.003-.092h-.014l-.182.007-.014.064zm.2-.053l-.004-.017a.75.75 0 0 0 .004.017zm-.58.153l-.005-.02.005.02zm.388-.36H16.985h-.012zm2.317-.021l-.285-.27.002-.002.005-.006.278.278zM17.47 8.089l-.006.007.006-.007zM5.766 9.438l.332-.314-.002-.003C5.656 8.656 5.649 8 6.08 7.566c.433-.432 1.09-.425 1.555.015.245.248.37.622.393 1.082.014.28-.012.559-.056.793a3.15 3.15 0 0 1-.023.113l.176.04v.003l-.197-.015v.021-.004.005l-.002.028v.07l.203-.006.011.301.093-.003h.006l.03-.002.265-.01-.007-.296v-.003l.008.002c.068-.303.111-.679.092-1.067-.029-.598-.203-1.112-.573-1.482l-.147.147.143-.151c-.696-.66-1.724-.672-2.392-.007l.424.424-.002.002-.002.002-.424-.425c-.665.669-.652 1.697.009 2.393l.103-.098zm2.422.185l.338.075V9.66l.001-.032v-.004.018l-.304-.023-.008-.21h-.006l-.092.004v.014l.008.181.063.015zm-.052-.2l-.018.004.018-.005zm.152.58l-.02.004.02-.005zm-.36-.39v-.012.012zm-.021-2.315l-.27.284-.002-.001-.006-.006.278-.277zM6.089 9.115l.007.006-.007-.006zM11.03 6.43l.457.013v-.004c.019-.64.478-1.11 1.089-1.11.612 0 1.07.47 1.089 1.11-.003.348-.178.702-.487 1.042a3.509 3.509 0 0 1-.6.522 3.248 3.248 0 0 1-.097.064l.096.152-.002.002-.129-.15-.012.011v.001h-.001l-.002.003.003-.003-.004.003-.02.02-.05.05.147.138-.204.221.068.063.004.004.022.02.195.18.204-.214.002-.002.005.008c.262-.167.558-.402.819-.69.403-.443.643-.93.643-1.454h-.208l.208-.005c-.026-.959-.744-1.694-1.686-1.697v.6h-.006v-.6c-.942.003-1.66.74-1.686 1.699l.143.003zm1.582 1.844l.186.292.015-.016.011-.011.024-.022.003-.003-.014.013-.198-.231.143-.155-.004-.003-.068-.063-.01.01-.123.134.035.055zm.105-.18l-.016-.009a.924.924 0 0 0 .016.01zm-.303.519l-.017-.01.017.01zm.02-.53l.01-.009-.01.009zm1.623-1.653l-.392.01v-.01h.392zm-2.57 0v.01-.01z"
- fill="#fff"
- fillRule="evenodd"
- />
- <path
- clipRule="evenodd"
- d="M18.583 14.056c.108 0 .204.043.28.118.066.067.099.15.135.243l.014.036c-.01.204-.193.365-.407.365h-.858l-.01.086c-.044.44-.14.868-.28 1.276a.402.402 0 0 1-.036.074c-.116.314-.261.62-.437.913-.086.16-.172.214-.344.193a.395.395 0 0 1-.364-.215.374.374 0 0 1 .021-.407c.193-.3.3-.483.343-.569.161-.397.269-.815.322-1.244.022-.16.022-.493.022-.493l.005-.23a3.165 3.165 0 0 0-.025-.264 4.529 4.529 0 0 0-.976-2.349 4.53 4.53 0 0 0-3.035-1.662 4.946 4.946 0 0 0-.976 0 4.53 4.53 0 0 0-2.35.976 3.835 3.835 0 0 0-.696.686 4.529 4.529 0 0 0-.976 2.35c-.011.16-.022.332-.022.493 0 .171 0 .332.022.493.053.43.16.847.321 1.244.043.086.15.268.344.569a.375.375 0 0 1 .02.407.395.395 0 0 1-.364.215c-.171.021-.257-.032-.343-.193a5.323 5.323 0 0 1-.74-2.263l-.01-.086h-.891a.39.39 0 0 1-.279-.118.342.342 0 0 1-.107-.279c.01-.193.193-.354.407-.354h.859l.01-.086a5.277 5.277 0 0 1 1.212-2.917L8.448 11l-.633-.816a.375.375 0 0 1 0-.536.423.423 0 0 1 .268-.107c.097 0 .193.032.258.096l.643.826.075-.064a5.245 5.245 0 0 1 2.918-1.212l.085-.01v-.891c0-.236.204-.418.45-.375.172.032.301.193.301.386v.868l.086.011a5.277 5.277 0 0 1 2.917 1.212l.065.054.643-.644a.423.423 0 0 1 .268-.107c.129 0 .247.064.322.172a.393.393 0 0 1-.064.493l-.633.633.053.064a5.245 5.245 0 0 1 1.212 2.917l.011.086h.89z"
- fill="#fff"
- fillRule="evenodd"
- />
- <path
- d="M13.004 14.713h-.998a2.06 2.06 0 0 0-2.06 2.059v1.223l.033.075a.767.767 0 0 0 .515.461c.633.182 1.255.29 1.855.322a5.42 5.42 0 0 0 2.199-.311.793.793 0 0 0 .493-.472l.022-.075v-1.223a2.06 2.06 0 0 0-2.06-2.06zM11.44 14.022c.3.333.74.515 1.19.515a1.613 1.613 0 0 0-.01-3.228c-.407 0-.793.15-1.094.429-.322.29-.504.686-.515 1.126-.01.429.14.847.43 1.158z"
- fill="#fff"
- />
- </svg>
- </div>
- </div>
- <p
- style={
- Object {
- "fontSize": "0.8rem",
- "marginTop": "-1em",
- "textAlign": "center",
- }
- }
- >
- fachgebiete
- </p>
- </div>
- <div
- className="c3"
- >
- <div
- className="c4"
- style={
- Object {
- "marginBottom": "1em",
- }
- }
- >
- <div
- className="c5"
- >
- <svg
- height="80px"
- version="1.1"
- viewBox="0 0 1000 1000"
- width="80px"
- xmlns="http://www.w3.org/2000/svg"
- >
- <path
- d="M502.56508,868.364664 C511.93155,862.588075 523.095822,855.151458 535.04456,846.573064 C568.356448,822.657358 601.727957,794.366431 631.986836,762.739204 C670.449872,722.536816 701.168462,679.73622 721.677407,634.99991 C745.587052,582.845627 754.91721,529.57787 747.526139,475.323915 C729.599303,343.732453 626.596403,250 499.286261,250 C372.372238,250 270.864911,343.231572 252.772718,475.337398 C244.509241,535.675767 254.910456,593.178228 281.38033,648.043223 C303.726517,694.360915 336.875734,737.501264 378.116754,777.203565C406.461936,804.491177 436.782663,828.440662 467.722026,849.417211 C478.177327,856.505791 487.661494,862.556978 497.309147,868.437102C497.961101,868.834461 498.885903,869.394858 499.886582,870 C500.740299,869.484354 501.635452,868.937995 502.56508,868.364664 Z M787.143802,465.995818 C823.586498,728.435484 499.257577,912.23147 499.257577,909.979533 C499.257577,907.727596 174.642224,742.049383 213.178319,465.995818C233.93758,317.286714 351.05416,210 499.22782,210 C647.401481,210 766.506373,317.376739 787.143802,465.995818 Z"
- fill="#1CB569"
- />
- </svg>
- </div>
- <div
- className="c6"
- size={4}
- >
- <svg
- alt="Services"
- aria-label="Services"
- fill="none"
- role="img"
- style={
- Object {
- "width": "30.769230769230766px",
- }
- }
- viewBox="0 0 25 25"
- >
- <mask
- height={25}
- id="AdditionalServices_svg__a"
- maskUnits="userSpaceOnUse"
- width={25}
- x={0}
- y={0}
- >
- <path
- d="M0 0h25v25H0z"
- fill="#fff"
- />
- </mask>
- <g
- mask="url(#AdditionalServices_svg__a)"
- >
- <path
- clipRule="evenodd"
- d="M24.5 12.5c0 6.627-5.373 12-12 12s-12-5.373-12-12 5.373-12 12-12 12 5.373 12 12z"
- fill="#1CB569"
- fillRule="evenodd"
- />
- </g>
- <path
- d="M17 8h-3v3h-2V8H9V6h3V3h2v3h3v2zM5 15.665h1.385v4.611H5z"
- fill="#fff"
- />
- <path
- clipRule="evenodd"
- d="M19.068 14.96c-.36.172-2.209 1.038-3.116 1.446a1.08 1.08 0 0 1-1.066.956h-4.299v-.312h4.306a.768.768 0 0 0 .693-.498v-.118a.768.768 0 0 0-.769-.769h-1.772c-1.087 0-1.96-.616-3.13-.616-1.432 0-1.786.506-3.226 1.101v3.462a12.05 12.05 0 0 1 3.074-.395 9.53 9.53 0 0 1 2.77.277c.417.104.857.06 1.246-.125 1.571-.692 4.154-2.077 5.732-2.942 1.322-.782.38-1.855-.443-1.468zM21.587 14.385H7.097L5.79 13h17.107l-1.309 1.385z"
- fill="#fff"
- fillRule="evenodd"
- />
- </svg>
- </div>
- </div>
- <p
- style={
- Object {
- "fontSize": "0.8rem",
- "marginTop": "-1em",
- "textAlign": "center",
- }
- }
- >
- zusatzleistung
- </p>
- </div>
- <div
- className="c3"
- >
- <div
- className="c4"
- style={
- Object {
- "marginBottom": "1em",
- }
- }
- >
- <div
- className="c5"
- >
- <svg
- height="80px"
- version="1.1"
- viewBox="0 0 1000 1000"
- width="80px"
- xmlns="http://www.w3.org/2000/svg"
- >
- <path
- d="M502.56508,868.364664 C511.93155,862.588075 523.095822,855.151458 535.04456,846.573064 C568.356448,822.657358 601.727957,794.366431 631.986836,762.739204 C670.449872,722.536816 701.168462,679.73622 721.677407,634.99991 C745.587052,582.845627 754.91721,529.57787 747.526139,475.323915 C729.599303,343.732453 626.596403,250 499.286261,250 C372.372238,250 270.864911,343.231572 252.772718,475.337398 C244.509241,535.675767 254.910456,593.178228 281.38033,648.043223 C303.726517,694.360915 336.875734,737.501264 378.116754,777.203565C406.461936,804.491177 436.782663,828.440662 467.722026,849.417211 C478.177327,856.505791 487.661494,862.556978 497.309147,868.437102C497.961101,868.834461 498.885903,869.394858 499.886582,870 C500.740299,869.484354 501.635452,868.937995 502.56508,868.364664 Z M787.143802,465.995818 C823.586498,728.435484 499.257577,912.23147 499.257577,909.979533 C499.257577,907.727596 174.642224,742.049383 213.178319,465.995818C233.93758,317.286714 351.05416,210 499.22782,210 C647.401481,210 766.506373,317.376739 787.143802,465.995818 Z"
- fill="#1CB569"
- />
- </svg>
- </div>
- <div
- className="c6"
- size={4}
- >
- <svg
- alt="???"
- aria-label="???"
- role="img"
- style={
- Object {
- "width": "30.769230769230766px",
- }
- }
- viewBox="0 0 25 25"
- >
- <defs>
- <path
- d="M0 0h25v25H0z"
- id="Eye_svg__a"
- />
- </defs>
- <g
- fill="none"
- fillRule="evenodd"
- >
- <mask
- fill="#fff"
- id="Eye_svg__b"
- >
- <use
- xlinkHref="#Eye_svg__a"
- />
- </mask>
- <path
- d="M12.5 24.5c-6.627 0-12-5.373-12-12s5.373-12 12-12 12 5.373 12 12-5.373 12-12 12z"
- fill="#1CB569"
- fillRule="nonzero"
- mask="url(#Eye_svg__b)"
- />
- <path
- d="M13 6c-4.09 0-7.585 2.545-9 6.136 1.415 3.592 4.91 6.137 9 6.137s7.585-2.545 9-6.137C20.585 8.545 17.09 6 13 6zm0 10.227a4.092 4.092 0 0 1-4.09-4.09A4.092 4.092 0 0 1 13 8.044a4.092 4.092 0 0 1 4.09 4.091A4.092 4.092 0 0 1 13 16.227zm0-6.545a2.451 2.451 0 0 0-2.455 2.454A2.451 2.451 0 0 0 13 14.591a2.451 2.451 0 0 0 2.455-2.455A2.451 2.451 0 0 0 13 9.682z"
- fill="#FFF"
- fillRule="nonzero"
- />
- </g>
- </svg>
- </div>
- </div>
- <p
- style={
- Object {
- "fontSize": "0.8rem",
- "marginTop": "-1em",
- "textAlign": "center",
- }
- }
- >
- augen prinzip
- </p>
- </div>
- <div
- className="c3"
- >
- <div
- className="c4"
- style={
- Object {
- "marginBottom": "1em",
- }
- }
- >
- <div
- className="c5"
- >
- <svg
- height="80px"
- version="1.1"
- viewBox="0 0 1000 1000"
- width="80px"
- xmlns="http://www.w3.org/2000/svg"
- >
- <path
- d="M502.56508,868.364664 C511.93155,862.588075 523.095822,855.151458 535.04456,846.573064 C568.356448,822.657358 601.727957,794.366431 631.986836,762.739204 C670.449872,722.536816 701.168462,679.73622 721.677407,634.99991 C745.587052,582.845627 754.91721,529.57787 747.526139,475.323915 C729.599303,343.732453 626.596403,250 499.286261,250 C372.372238,250 270.864911,343.231572 252.772718,475.337398 C244.509241,535.675767 254.910456,593.178228 281.38033,648.043223 C303.726517,694.360915 336.875734,737.501264 378.116754,777.203565C406.461936,804.491177 436.782663,828.440662 467.722026,849.417211 C478.177327,856.505791 487.661494,862.556978 497.309147,868.437102C497.961101,868.834461 498.885903,869.394858 499.886582,870 C500.740299,869.484354 501.635452,868.937995 502.56508,868.364664 Z M787.143802,465.995818 C823.586498,728.435484 499.257577,912.23147 499.257577,909.979533 C499.257577,907.727596 174.642224,742.049383 213.178319,465.995818C233.93758,317.286714 351.05416,210 499.22782,210 C647.401481,210 766.506373,317.376739 787.143802,465.995818 Z"
- fill="#1CB569"
- />
- </svg>
- </div>
- <div
- className="c6"
- size={4}
- >
- <svg
- alt="Software"
- aria-label="Software"
- role="img"
- style={
- Object {
- "width": "30.769230769230766px",
- }
- }
- viewBox="0 0 25 25"
- >
- <defs>
- <path
- d="M0 0h25v25H0z"
- id="Software_svg__a"
- />
- </defs>
- <g
- fill="none"
- fillRule="evenodd"
- >
- <mask
- fill="#fff"
- id="Software_svg__b"
- >
- <use
- xlinkHref="#Software_svg__a"
- />
- </mask>
- <path
- d="M12.5 24.5c-6.627 0-12-5.373-12-12s5.373-12 12-12 12 5.373 12 12-5.373 12-12 12z"
- fill="#1CB569"
- fillRule="nonzero"
- mask="url(#Software_svg__b)"
- />
- <g
- fill="#FFF"
- >
- <path
- d="M12.858 18.96c.262-.246.5-.486.708-.755a5.496 5.496 0 0 0 1.163-3.03 5.554 5.554 0 0 0-4.631-5.888 5.363 5.363 0 0 0-2.167.07c-.11.026-.144.014-.145-.113a83.361 83.361 0 0 0-.026-2.088c-.013-.453-.005-.906-.023-1.359-.034-.82.555-1.546 1.441-1.712a2.1 2.1 0 0 1 1.085.067c.765.263 1.542.488 2.315.729 1.868.583 3.737 1.16 5.606 1.74l1.506.468c.22.069.286.159.286.39v10.088c0 .263-.13.39-.401.389-.261-.001-.396-.135-.396-.4V9.64c0-.504-.004-1.008.003-1.512.002-.129-.03-.188-.162-.229-2.63-.81-5.258-1.627-7.887-2.443-.388-.12-.774-.25-1.163-.368-.396-.12-.774-.1-1.087.206-.25.244-.236.705.016.947.05.05.113.076.179.097l8.26 2.582c.03.01.061.018.093.024.196.037.31.163.31.357 0 1.223.008 2.447-.01 3.67-.01.741-.005 1.483-.01 2.225-.01 1.255-.005 2.51-.007 3.766 0 .33-.012.66-.003.99.007.26-.18.482-.504.379-1.415-.452-2.836-.888-4.254-1.33-.025-.009-.049-.021-.095-.04z"
- />
- <path
- d="M4 14.772c.003-2.784 2.23-5.17 5.176-5.175 2.961-.005 5.25 2.427 5.184 5.301-.062 2.714-2.251 5.057-5.18 5.058-2.94 0-5.181-2.384-5.18-5.184zm5.184-1.374c-.768 0-1.385.61-1.386 1.372a1.375 1.375 0 0 0 1.373 1.385 1.38 1.38 0 0 0 1.395-1.379 1.38 1.38 0 0 0-1.382-1.378z"
- />
- <path
- d="M10.024 14.778a.855.855 0 0 1-.848.847.852.852 0 0 1-.836-.857.852.852 0 0 1 .838-.84.855.855 0 0 1 .846.85z"
- />
- </g>
- </g>
- </svg>
- </div>
- </div>
- <p
- style={
- Object {
- "fontSize": "0.8rem",
- "marginTop": "-1em",
- "textAlign": "center",
- }
- }
- >
- software
- </p>
- </div>
- <div
- className="c3"
- >
- <div
- className="c4"
- style={
- Object {
- "marginBottom": "1em",
- }
- }
- >
- <div
- className="c5"
- >
- <svg
- height="80px"
- version="1.1"
- viewBox="0 0 1000 1000"
- width="80px"
- xmlns="http://www.w3.org/2000/svg"
- >
- <path
- d="M502.56508,868.364664 C511.93155,862.588075 523.095822,855.151458 535.04456,846.573064 C568.356448,822.657358 601.727957,794.366431 631.986836,762.739204 C670.449872,722.536816 701.168462,679.73622 721.677407,634.99991 C745.587052,582.845627 754.91721,529.57787 747.526139,475.323915 C729.599303,343.732453 626.596403,250 499.286261,250 C372.372238,250 270.864911,343.231572 252.772718,475.337398 C244.509241,535.675767 254.910456,593.178228 281.38033,648.043223 C303.726517,694.360915 336.875734,737.501264 378.116754,777.203565C406.461936,804.491177 436.782663,828.440662 467.722026,849.417211 C478.177327,856.505791 487.661494,862.556978 497.309147,868.437102C497.961101,868.834461 498.885903,869.394858 499.886582,870 C500.740299,869.484354 501.635452,868.937995 502.56508,868.364664 Z M787.143802,465.995818 C823.586498,728.435484 499.257577,912.23147 499.257577,909.979533 C499.257577,907.727596 174.642224,742.049383 213.178319,465.995818C233.93758,317.286714 351.05416,210 499.22782,210 C647.401481,210 766.506373,317.376739 787.143802,465.995818 Z"
- fill="#1CB569"
- />
- </svg>
- </div>
- <div
- className="c6"
- size={4}
- >
- <svg
- alt="Membership"
- aria-label="Membership"
- role="img"
- style={
- Object {
- "width": "30.769230769230766px",
- }
- }
- viewBox="0 0 25 25"
- >
- <defs>
- <path
- d="M0 0h25v25H0z"
- id="Membership_svg__a"
- />
- </defs>
- <g
- fill="none"
- fillRule="evenodd"
- >
- <mask
- fill="#fff"
- id="Membership_svg__b"
- >
- <use
- xlinkHref="#Membership_svg__a"
- />
- </mask>
- <path
- d="M12.5 24.5c-6.627 0-12-5.373-12-12s5.373-12 12-12 12 5.373 12 12-5.373 12-12 12z"
- fill="#1CB569"
- fillRule="nonzero"
- mask="url(#Membership_svg__b)"
- />
- <path
- d="M18.9 5.5H6.1c-.888 0-1.6.712-1.6 1.6v8.8c0 .888.712 1.6 1.6 1.6h3.2v4l3.2-1.6 3.2 1.6v-4h3.2c.888 0 1.6-.712 1.6-1.6V7.1c0-.888-.712-1.6-1.6-1.6zm0 10.4H6.1v-1.6h12.8v1.6zm0-4H6.1V7.1h12.8v4.8z"
- fill="#FFF"
- fillRule="nonzero"
- />
- </g>
- </svg>
- </div>
- </div>
- <p
- style={
- Object {
- "fontSize": "0.8rem",
- "marginTop": "-1em",
- "textAlign": "center",
- }
- }
- >
- mitgliedschaft
- </p>
- </div>
- <div
- className="c3"
- >
- <div
- className="c4"
- style={
- Object {
- "marginBottom": "1em",
- }
- }
- >
- <div
- className="c5"
- >
- <svg
- height="80px"
- version="1.1"
- viewBox="0 0 1000 1000"
- width="80px"
- xmlns="http://www.w3.org/2000/svg"
- >
- <path
- d="M502.56508,868.364664 C511.93155,862.588075 523.095822,855.151458 535.04456,846.573064 C568.356448,822.657358 601.727957,794.366431 631.986836,762.739204 C670.449872,722.536816 701.168462,679.73622 721.677407,634.99991 C745.587052,582.845627 754.91721,529.57787 747.526139,475.323915 C729.599303,343.732453 626.596403,250 499.286261,250 C372.372238,250 270.864911,343.231572 252.772718,475.337398 C244.509241,535.675767 254.910456,593.178228 281.38033,648.043223 C303.726517,694.360915 336.875734,737.501264 378.116754,777.203565C406.461936,804.491177 436.782663,828.440662 467.722026,849.417211 C478.177327,856.505791 487.661494,862.556978 497.309147,868.437102C497.961101,868.834461 498.885903,869.394858 499.886582,870 C500.740299,869.484354 501.635452,868.937995 502.56508,868.364664 Z M787.143802,465.995818 C823.586498,728.435484 499.257577,912.23147 499.257577,909.979533 C499.257577,907.727596 174.642224,742.049383 213.178319,465.995818C233.93758,317.286714 351.05416,210 499.22782,210 C647.401481,210 766.506373,317.376739 787.143802,465.995818 Z"
- fill="#1CB569"
- />
- </svg>
- </div>
- <div
- className="c6"
- size={4}
- >
- <svg
- alt="Terms and conditions"
- aria-label="Terms and conditions"
- fill="none"
- role="img"
- style={
- Object {
- "width": "30.769230769230766px",
- }
- }
- viewBox="0 0 25 25"
- >
- <mask
- height={25}
- id="AGB_svg__a"
- maskUnits="userSpaceOnUse"
- width={25}
- x={0}
- y={0}
- >
- <path
- d="M0 0h25v25H0z"
- fill="#fff"
- />
- </mask>
- <g
- mask="url(#AGB_svg__a)"
- >
- <path
- clipRule="evenodd"
- d="M24.5 12.5c0 6.627-5.373 12-12 12s-12-5.373-12-12 5.373-12 12-12 12 5.373 12 12z"
- fill="#1CB569"
- fillRule="evenodd"
- />
- </g>
- <path
- clipRule="evenodd"
- d="M18.722 4.6h-3.715C14.633 3.672 13.656 3 12.5 3c-1.156 0-2.133.672-2.507 1.6H6.278C5.3 4.6 4.5 5.32 4.5 6.2v11.2c0 .88.8 1.6 1.778 1.6h12.444c.978 0 1.778-.72 1.778-1.6V6.2c0-.88-.8-1.6-1.778-1.6zm-6.222 0c.489 0 .889.36.889.8 0 .44-.4.8-.889.8s-.889-.36-.889-.8c0-.44.4-.8.889-.8zM6.278 7.8v9.6h12.444V7.8H6.278z"
- fill="#fff"
- fillRule="evenodd"
- />
- <path
- clipRule="evenodd"
- d="M9.434 12.204a1.001 1.001 0 0 0-.27-.693.912.912 0 0 0-.303-.213.949.949 0 0 0-.387-.078.934.934 0 0 0-.687.291.983.983 0 0 0-.273.693v.756h1.92v-.756zM9.944 15h-.51v-1.548h-1.92V15h-.51v-2.796c0-.208.037-.401.11-.579a1.42 1.42 0 0 1 .771-.777c.18-.076.377-.114.589-.114.212 0 .408.038.588.114a1.42 1.42 0 0 1 .77.777c.075.178.112.371.112.579V15zm4.77-2.268v.216c0 .32-.05.611-.147.873a1.943 1.943 0 0 1-.414.672 1.809 1.809 0 0 1-.64.429c-.247.1-.521.15-.821.15-.288 0-.557-.057-.807-.171a2.121 2.121 0 0 1-1.101-1.155 2.212 2.212 0 0 1-.162-.846 2.19 2.19 0 0 1 .606-1.53c.188-.196.407-.351.657-.465.25-.114.519-.171.807-.171.208 0 .41.029.606.087.196.058.378.145.546.261.168.116.319.261.453.435s.24.375.32.603h-.54a1.544 1.544 0 0 0-.554-.654 1.472 1.472 0 0 0-.831-.24c-.216 0-.42.044-.61.132-.19.088-.355.209-.497.363a1.752 1.752 0 0 0-.46 1.179 1.743 1.743 0 0 0 .459 1.185c.143.154.309.275.499.363.19.088.393.132.609.132.216 0 .412-.034.588-.102a1.366 1.366 0 0 0 .768-.717c.076-.166.124-.345.144-.537h-1.47v-.492h1.992zm2.988 1.056a.74.74 0 0 0-.186-.513c-.124-.138-.3-.207-.528-.207H15.89v1.44h1.098c.104 0 .2-.018.288-.054a.633.633 0 0 0 .225-.153.731.731 0 0 0 .201-.513zm-1.812-1.212h.888a.857.857 0 0 0 .267-.042.697.697 0 0 0 .228-.123.561.561 0 0 0 .156-.207.707.707 0 0 0 .057-.294.636.636 0 0 0-.22-.492c-.145-.132-.338-.198-.578-.198a.754.754 0 0 0-.318.066.86.86 0 0 0-.252.174.773.773 0 0 0-.228.558v.558zm2.316 1.212a1.211 1.211 0 0 1-.342.852c-.108.112-.24.2-.393.264a1.308 1.308 0 0 1-.507.096H15.38v-2.982c0-.176.034-.342.102-.498a1.294 1.294 0 0 1 .69-.684 1.468 1.468 0 0 1 1.041-.012 1.3 1.3 0 0 1 .41.246c.117.104.207.228.27.372a1.14 1.14 0 0 1-.02.957.95.95 0 0 1-.333.357 1 1 0 0 1 .498.405c.112.182.168.391.168.627z"
- fill="#fff"
- fillRule="evenodd"
- />
- </svg>
- </div>
- </div>
- <p
- style={
- Object {
- "fontSize": "0.8rem",
- "marginTop": "-1em",
- "textAlign": "center",
- }
- }
- >
- linguala agb
- </p>
- </div>
- </div>
- <div
- className="c7"
- style={
- Object {
- "alignItems": "center",
- }
- }
- >
- <div
- className="c8"
- >
- <p
- style={
- Object {
- "color": "white",
- "fontSize": "1.5rem",
- "margin": "0",
- }
- }
- >
- vietnamesisch
- </p>
- <svg
- alt="Logo"
- aria-label="Logo"
- role="img"
- style={
- Object {
- "width": "80px",
- }
- }
- viewBox="0 0 400 200"
- >
- <defs>
- <path
- d="M0 0h400v200H0z"
- id="LingualaLogo_svg__a"
- />
- </defs>
- <g
- fill="none"
- fillRule="nonzero"
- >
- <path
- d="M196.667 151.912c-9.553-9.799-18.017-20.255-25.33-30.717a223.362 223.362 0 0 1-6.73-10.18 117.96 117.96 0 0 1-2.462-4.12l-3.342-5.956 3.144-6.062c.142-.273.38-.719.713-1.326.527-.96 1.148-2.057 1.862-3.278a208.376 208.376 0 0 1 7.093-11.252c7.758-11.51 16.85-22.833 27.257-33.195 30.496-30.36 66.022-46.606 105.843-41.06 49.93 6.953 85.748 46.605 85.748 95.928 0 49.412-35.942 89.573-85.757 96.473-39.817 5.515-76.134-12.532-108.039-45.255zm-8.658-51.424a209.053 209.053 0 0 0 4.178 6.203c6.57 9.398 14.183 18.803 22.703 27.541 26.825 27.514 56.01 42.018 86.32 37.82 37.379-5.179 63.834-34.739 63.834-71.358 0-36.482-26.29-65.586-63.844-70.815-30.753-4.283-58.996 8.632-84.371 33.895-9.147 9.107-17.227 19.169-24.12 29.395a191.043 191.043 0 0 0-4.7 7.319z"
- fill="#4A90E2"
- />
- <path
- d="M95.758 2.983c39.816-5.515 76.133 12.532 108.038 45.255 9.553 9.799 18.017 20.255 25.33 30.717a223.362 223.362 0 0 1 6.73 10.18c1.178 1.9 2.002 3.3 2.462 4.12l3.342 5.956-3.144 6.062c-.141.273-.38.719-.713 1.326a142.25 142.25 0 0 1-1.861 3.278 208.376 208.376 0 0 1-7.094 11.252c-7.758 11.51-16.85 22.833-27.257 33.195-30.495 30.36-66.022 46.606-105.842 41.06C45.817 188.431 10 148.78 10 99.456 10 50.044 45.942 9.883 95.758 2.983zm112.519 90.476c-6.57-9.398-14.183-18.803-22.703-27.541-26.826-27.514-56.01-42.018-86.32-37.82-37.38 5.179-63.835 34.739-63.835 71.358 0 36.482 26.29 65.586 63.844 70.815 30.754 4.283 58.996-8.633 84.372-33.895 9.147-9.107 17.226-19.169 24.118-29.395a190.58 190.58 0 0 0 4.702-7.319 209.05 209.05 0 0 0-4.178-6.203z"
- fill="#1CB569"
- />
- </g>
- </svg>
- <p
- style={
- Object {
- "color": "white",
- "fontSize": "1.5rem",
- "margin": "0",
- }
- }
- >
- englisch
- </p>
- </div>
- </div>
- <div
- className="c7"
- style={
- Object {
- "alignItems": "center",
- }
- }
- >
- <div
- className="c8"
- >
- <p
- style={
- Object {
- "color": "white",
- "fontSize": "1.5rem",
- "margin": "0",
- }
- }
- >
- italienisch
- </p>
- <svg
- alt="Logo"
- aria-label="Logo"
- role="img"
- style={
- Object {
- "width": "80px",
- }
- }
- viewBox="0 0 400 200"
- >
- <defs>
- <path
- d="M0 0h400v200H0z"
- id="LingualaLogo_svg__a"
- />
- </defs>
- <g
- fill="none"
- fillRule="nonzero"
- >
- <path
- d="M196.667 151.912c-9.553-9.799-18.017-20.255-25.33-30.717a223.362 223.362 0 0 1-6.73-10.18 117.96 117.96 0 0 1-2.462-4.12l-3.342-5.956 3.144-6.062c.142-.273.38-.719.713-1.326.527-.96 1.148-2.057 1.862-3.278a208.376 208.376 0 0 1 7.093-11.252c7.758-11.51 16.85-22.833 27.257-33.195 30.496-30.36 66.022-46.606 105.843-41.06 49.93 6.953 85.748 46.605 85.748 95.928 0 49.412-35.942 89.573-85.757 96.473-39.817 5.515-76.134-12.532-108.039-45.255zm-8.658-51.424a209.053 209.053 0 0 0 4.178 6.203c6.57 9.398 14.183 18.803 22.703 27.541 26.825 27.514 56.01 42.018 86.32 37.82 37.379-5.179 63.834-34.739 63.834-71.358 0-36.482-26.29-65.586-63.844-70.815-30.753-4.283-58.996 8.632-84.371 33.895-9.147 9.107-17.227 19.169-24.12 29.395a191.043 191.043 0 0 0-4.7 7.319z"
- fill="#4A90E2"
- />
- <path
- d="M95.758 2.983c39.816-5.515 76.133 12.532 108.038 45.255 9.553 9.799 18.017 20.255 25.33 30.717a223.362 223.362 0 0 1 6.73 10.18c1.178 1.9 2.002 3.3 2.462 4.12l3.342 5.956-3.144 6.062c-.141.273-.38.719-.713 1.326a142.25 142.25 0 0 1-1.861 3.278 208.376 208.376 0 0 1-7.094 11.252c-7.758 11.51-16.85 22.833-27.257 33.195-30.495 30.36-66.022 46.606-105.842 41.06C45.817 188.431 10 148.78 10 99.456 10 50.044 45.942 9.883 95.758 2.983zm112.519 90.476c-6.57-9.398-14.183-18.803-22.703-27.541-26.826-27.514-56.01-42.018-86.32-37.82-37.38 5.179-63.835 34.739-63.835 71.358 0 36.482 26.29 65.586 63.844 70.815 30.754 4.283 58.996-8.633 84.372-33.895 9.147-9.107 17.226-19.169 24.118-29.395a190.58 190.58 0 0 0 4.702-7.319 209.05 209.05 0 0 0-4.178-6.203z"
- fill="#1CB569"
- />
- </g>
- </svg>
- <p
- style={
- Object {
- "color": "white",
- "fontSize": "1.5rem",
- "margin": "0",
- }
- }
- >
- englisch
- </p>
- </div>
- </div>
- <div
- className="c7"
- style={
- Object {
- "alignItems": "center",
- }
- }
- >
- <div
- className="c8"
- >
- <p
- style={
- Object {
- "color": "white",
- "fontSize": "1.5rem",
- "margin": "0",
- }
- }
- >
- italienisch
- </p>
- <svg
- alt="Logo"
- aria-label="Logo"
- role="img"
- style={
- Object {
- "width": "80px",
- }
- }
- viewBox="0 0 400 200"
- >
- <defs>
- <path
- d="M0 0h400v200H0z"
- id="LingualaLogo_svg__a"
- />
- </defs>
- <g
- fill="none"
- fillRule="nonzero"
- >
- <path
- d="M196.667 151.912c-9.553-9.799-18.017-20.255-25.33-30.717a223.362 223.362 0 0 1-6.73-10.18 117.96 117.96 0 0 1-2.462-4.12l-3.342-5.956 3.144-6.062c.142-.273.38-.719.713-1.326.527-.96 1.148-2.057 1.862-3.278a208.376 208.376 0 0 1 7.093-11.252c7.758-11.51 16.85-22.833 27.257-33.195 30.496-30.36 66.022-46.606 105.843-41.06 49.93 6.953 85.748 46.605 85.748 95.928 0 49.412-35.942 89.573-85.757 96.473-39.817 5.515-76.134-12.532-108.039-45.255zm-8.658-51.424a209.053 209.053 0 0 0 4.178 6.203c6.57 9.398 14.183 18.803 22.703 27.541 26.825 27.514 56.01 42.018 86.32 37.82 37.379-5.179 63.834-34.739 63.834-71.358 0-36.482-26.29-65.586-63.844-70.815-30.753-4.283-58.996 8.632-84.371 33.895-9.147 9.107-17.227 19.169-24.12 29.395a191.043 191.043 0 0 0-4.7 7.319z"
- fill="#4A90E2"
- />
- <path
- d="M95.758 2.983c39.816-5.515 76.133 12.532 108.038 45.255 9.553 9.799 18.017 20.255 25.33 30.717a223.362 223.362 0 0 1 6.73 10.18c1.178 1.9 2.002 3.3 2.462 4.12l3.342 5.956-3.144 6.062c-.141.273-.38.719-.713 1.326a142.25 142.25 0 0 1-1.861 3.278 208.376 208.376 0 0 1-7.094 11.252c-7.758 11.51-16.85 22.833-27.257 33.195-30.495 30.36-66.022 46.606-105.842 41.06C45.817 188.431 10 148.78 10 99.456 10 50.044 45.942 9.883 95.758 2.983zm112.519 90.476c-6.57-9.398-14.183-18.803-22.703-27.541-26.826-27.514-56.01-42.018-86.32-37.82-37.38 5.179-63.835 34.739-63.835 71.358 0 36.482 26.29 65.586 63.844 70.815 30.754 4.283 58.996-8.633 84.372-33.895 9.147-9.107 17.226-19.169 24.118-29.395a190.58 190.58 0 0 0 4.702-7.319 209.05 209.05 0 0 0-4.178-6.203z"
- fill="#1CB569"
- />
- </g>
- </svg>
- <p
- style={
- Object {
- "color": "white",
- "fontSize": "1.5rem",
- "margin": "0",
- }
- }
- >
- deutsch
- </p>
- </div>
- </div>
- </div>
- </div>
-</div>
-`;
-
-exports[`Storyshots documentation/overview atoms/button 1`] = `
-.c0 {
- color: white;
- background-color: #1CB569;
- -webkit-transition: background-color 0.1s linear;
- transition: background-color 0.1s linear;
- font-size: 1rem;
- padding: 0.5rem;
- margin: 0.5rem;
- line-height: 1.5em;
- box-shadow: none;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- cursor: unset;
- -webkit-transition: -webkit-transform 0.2s cubic-bezier(0.4,0,0.2,1);
- -webkit-transition: transform 0.2s cubic-bezier(0.4,0,0.2,1);
- transition: transform 0.2s cubic-bezier(0.4,0,0.2,1);
- text-transform: lowercase;
- border-style: unset;
- border-radius: 3rem;
- min-width: 240px;
- min-height: auto;
- padding: 0.5rem;
- min-height: 2.5em;
-}
-
-.c0:active,
-.c0:hover {
- background-color: #4A90E2;
-}
-
-.c0::-moz-focus-inner {
- border: 0;
-}
-
-.c0:active {
- -webkit-transform: scale(1.05);
- -ms-transform: scale(1.05);
- transform: scale(1.05);
-}
-
-.c0:focus,
-.c0:active {
- box-shadow: 0 1px 5px 0 rgba(0,0,0,0.2),0 3px 4px 0 rgba(0,0,0,0.12),0 2px 4px 0 rgba(0,0,0,0.14);
- outline: none;
-}
-
-<button
- className="c0"
- size={2}
- width="240px"
->
- Button
-</button>
-`;
-
-exports[`Storyshots documentation/overview atoms/link 1`] = `
-.c0 {
- -webkit-text-decoration: none;
- text-decoration: none;
-}
-
-color:#1CB569 .c0:hover {
- color: #4A90E2;
-}
-
-<a
- className="c0"
->
- Link
-</a>
-`;
-
-exports[`Storyshots documentation/overview atoms/subtitle 1`] = `
-.c0 {
- font-family: Libre Baskerville,Helvetica,Arial,serif;
- font-weight: lighter;
-}
-
-<p
- className="c0"
->
- Subtitle
-</p>
-`;
-
-exports[`Storyshots documentation/overview atoms/text 1`] = `
-.c0 {
- font-size: 1rem;
- margin: 0.5rem auto;
- text-align: left;
- max-width: 240px;
- line-height: 1.55em;
-}
-
-<p
- className="c0"
->
- Text
-</p>
-`;
-
-exports[`Storyshots documentation/overview atoms/title 1`] = `
-.c0 {
- font-size: 3rem;
- font-family: Libre Baskerville,Helvetica,Arial,serif;
- font-weight: lighter;
-}
-
-<h1
- className="c0"
->
- Title
-</h1>
-`;
-
-exports[`Storyshots documentation/overview molecules/fivestarrating 1`] = `
-Array [
- <svg
- alt="1"
- aria-label="1"
- fill="none"
- role="img"
- style={
- Object {
- "width": "20px",
- }
- }
- viewBox="0 0 106 100"
- >
- <path
- d="M52.632 80.368L85.158 100l-8.632-37 28.737-24.895-37.842-3.21L52.631 0 37.843 34.895 0 38.105 28.737 63l-8.632 37 32.527-19.632z"
- fill="currentcolor"
- />
- </svg>,
- <svg
- alt="2"
- aria-label="2"
- fill="none"
- role="img"
- style={
- Object {
- "width": "20px",
- }
- }
- viewBox="0 0 106 100"
- >
- <path
- d="M52.632 80.368L85.158 100l-8.632-37 28.737-24.895-37.842-3.21L52.631 0 37.843 34.895 0 38.105 28.737 63l-8.632 37 32.527-19.632z"
- fill="currentcolor"
- />
- </svg>,
- <svg
- alt="3"
- aria-label="3"
- fill="none"
- role="img"
- style={
- Object {
- "width": "20px",
- }
- }
- viewBox="0 0 106 100"
- >
- <path
- d="M52.632 80.368L85.158 100l-8.632-37 28.737-24.895-37.842-3.21L52.631 0 37.843 34.895 0 38.105 28.737 63l-8.632 37 32.527-19.632z"
- fill="currentcolor"
- />
- </svg>,
- <svg
- alt="4"
- aria-label="4"
- fill="none"
- role="img"
- style={
- Object {
- "width": "20px",
- }
- }
- viewBox="0 0 106 100"
- >
- <path
- clipRule="evenodd"
- d="M67.421 34.842l37.842 3.263L76.579 63l8.579 37-32.526-19.632L20.105 100l8.632-37L0 38.105l37.842-3.21L52.632 0l14.79 34.842zM52.631 21.58v48.947l19.843 12L67.21 60l17.474-15.158-23.052-2-9-21.263z"
- fill="currentcolor"
- fillRule="evenodd"
- />
- </svg>,
- <svg
- alt="5"
- aria-label="5"
- fill="none"
- role="img"
- style={
- Object {
- "width": "20px",
- }
- }
- viewBox="0 0 106 100"
- >
- <path
- clipRule="evenodd"
- d="M67.421 34.842l37.842 3.263L76.579 63l8.579 37-32.526-19.632L20.105 100l8.632-37L0 38.105l37.842-3.21L52.632 0l14.79 34.842zm-34.58 47.632l19.79-11.948 19.842 12L67.21 60l17.474-15.158-23.053-2-9-21.263-8.947 21.21-23.053 2 17.474 15.158-5.263 22.527z"
- fill="currentcolor"
- fillRule="evenodd"
- />
- </svg>,
-]
-`;
-
-exports[`Storyshots documentation/overview molecules/icon 1`] = `
-<svg
- alt="Agentur"
- aria-label="Agentur"
- role="img"
- style={
- Object {
- "width": "80px",
- }
- }
- viewBox="0 0 100 100"
->
- <defs>
- <path
- d="M0 0h100v100H0z"
- id="Agentur_svg__a"
- />
- </defs>
- <g
- fill="none"
- fillRule="evenodd"
- >
- <g
- transform="matrix(-1 0 0 1 100 0)"
- >
- <mask
- fill="#fff"
- id="Agentur_svg__b"
- >
- <use
- xlinkHref="#Agentur_svg__a"
- />
- </mask>
- <path
- d="M50 98C23.49 98 2 76.51 2 50S23.49 2 50 2s48 21.49 48 48-21.49 48-48 48z"
- fill="#1CB569"
- fillRule="nonzero"
- mask="url(#Agentur_svg__b)"
- />
- </g>
- <g
- fill="#FFF"
- >
- <path
- d="M84 58.661h-5.538v18.444H84z"
- fillRule="nonzero"
- />
- <path
- d="M27.73 55.837c1.44.692 8.833 4.154 12.46 5.788a4.32 4.32 0 0 0 4.265 3.821h17.197V64.2H44.428a3.074 3.074 0 0 1-2.77-1.994v-.47a3.074 3.074 0 0 1 3.074-3.074h7.09c4.347 0 7.836-2.465 12.516-2.465 5.733 0 7.145 2.022 12.905 4.403v13.846a48.185 48.185 0 0 0-12.295-1.578 38.105 38.105 0 0 0-11.077 1.107 7.421 7.421 0 0 1-4.985-.498c-6.286-2.77-16.615-8.308-22.93-11.77-5.288-3.128-1.522-7.42 1.773-5.87zm-10.08-2.299h57.96L80.842 48H12.415z"
- />
- </g>
- <circle
- cx={15}
- cy={15}
- fill="#FFF"
- r={15}
- transform="matrix(-1 0 0 1 64 15)"
- />
- <path
- d="M49.596 31.02l-1.976-2.014a14.181 14.181 0 0 0 2.91-5.262h2.278c.357 0 .535-.268.535-.803 0-.534-.178-.802-.535-.802h-5.445v-1.604c0-.357-.266-.535-.797-.535-.506 0-.759.178-.759.535v1.604h-5.445c-.356 0-.535.268-.535.802 0 .535.179.8.535.795h8.69a12.695 12.695 0 0 1-2.467 4.3c-.92-1.038-1.602-2.4-1.838-2.871-.183-.367-.183-.734-.733-.734s-.917.367-.733.734c.183.366 1.297 2.726 2.27 3.841-2.544 2.552-3.864 3.894-3.96 4.027-.144.2-.144.566.223.933.366.367.768.344.916.183.1-.107 1.384-1.436 3.855-3.988l2.42 2.495c.394.252.74.133 1.037-.355.325-.357.176-.784-.446-1.281zm4.87-3.655c-.184-.367-.367-.367-.715-.367-.386 0-.569 0-.752.367-.184.367-3.42 9.688-3.482 9.902-.062.213-.155.733.731.733.556 0 .64-.462.734-.733.053-.157.353-1.01.899-2.56h3.695c.524 1.46.826 2.313.906 2.56.121.37.184.733.917.733.77 0 .6-.595.55-.733-.049-.139-3.3-9.535-3.483-9.902zm-1.994 5.738l1.26-3.474 1.26 3.474h-2.52z"
- fill="#1CB569"
- fillRule="nonzero"
- />
- </g>
-</svg>
-`;
-
-exports[`Storyshots documentation/overview molecules/pinshape 1`] = `
-.c1 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-transform: rotate(90deg);
- -ms-transform: rotate(90deg);
- transform: rotate(90deg);
-}
-
-.c2 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- position: absolute;
- top: 30.76923076923077%;
- left: 30.76923076923077%;
- width: 61.53846153846153px;
- height: 61.53846153846153px;
- font-size: 0;
-}
-
-.c0 {
- position: relative;
-}
-
-<div
- className="c0"
->
- <div
- className="c1"
- >
- <svg
- height="160px"
- version="1.1"
- viewBox="0 0 1000 1000"
- width="160px"
- xmlns="http://www.w3.org/2000/svg"
- >
- <path
- d="M502.56508,868.364664 C511.93155,862.588075 523.095822,855.151458 535.04456,846.573064 C568.356448,822.657358 601.727957,794.366431 631.986836,762.739204 C670.449872,722.536816 701.168462,679.73622 721.677407,634.99991 C745.587052,582.845627 754.91721,529.57787 747.526139,475.323915 C729.599303,343.732453 626.596403,250 499.286261,250 C372.372238,250 270.864911,343.231572 252.772718,475.337398 C244.509241,535.675767 254.910456,593.178228 281.38033,648.043223 C303.726517,694.360915 336.875734,737.501264 378.116754,777.203565C406.461936,804.491177 436.782663,828.440662 467.722026,849.417211 C478.177327,856.505791 487.661494,862.556978 497.309147,868.437102C497.961101,868.834461 498.885903,869.394858 499.886582,870 C500.740299,869.484354 501.635452,868.937995 502.56508,868.364664 Z M787.143802,465.995818 C823.586498,728.435484 499.257577,912.23147 499.257577,909.979533 C499.257577,907.727596 174.642224,742.049383 213.178319,465.995818C233.93758,317.286714 351.05416,210 499.22782,210 C647.401481,210 766.506373,317.376739 787.143802,465.995818 Z"
- fill="#1CB569"
- />
- </svg>
- </div>
- <div
- className="c2"
- size={8}
- >
- <svg
- alt="Agent"
- aria-label="Agent"
- role="img"
- style={
- Object {
- "width": "61.53846153846153px",
- }
- }
- viewBox="0 0 100 100"
- >
- <defs>
- <path
- d="M0 0h100v100H0z"
- id="Agent_svg__a"
- />
- </defs>
- <g
- fill="none"
- fillRule="evenodd"
- >
- <mask
- fill="#fff"
- id="Agent_svg__b"
- >
- <use
- xlinkHref="#Agent_svg__a"
- />
- </mask>
- <path
- d="M50 98C23.49 98 2 76.51 2 50S23.49 2 50 2s48 21.49 48 48-21.49 48-48 48z"
- fill="#1CB569"
- fillRule="nonzero"
- mask="url(#Agent_svg__b)"
- />
- <path
- d="M21.407 60.762c15.822 3.12 27.412 1.007 34.77-6.342 8.061-8.061 8.294-21.305.51-29.088-7.783-7.784-21.114-7.55-29.175.511-7.142 7.937-9.177 19.577-6.105 34.92z"
- fill="#FFF"
- />
- <path
- d="M40.681 42.244l-2.195-2.237a15.758 15.758 0 0 0 3.232-5.847h2.533c.396 0 .594-.297.594-.892 0-.594-.198-.891-.594-.891H38.2v-1.783c0-.396-.296-.594-.887-.594-.561 0-.842.198-.842.594v1.783h-6.05c-.397 0-.595.297-.595.891 0 .594.198.889.594.883h9.655a14.106 14.106 0 0 1-2.74 4.777c-1.023-1.152-1.78-2.666-2.042-3.19-.204-.407-.204-.814-.815-.814s-1.019.407-.815.815c.204.407 1.442 3.029 2.522 4.268-2.826 2.835-4.292 4.327-4.399 4.474-.16.222-.16.63.247 1.037.408.407.854.382 1.019.204.11-.12 1.538-1.596 4.283-4.432l2.688 2.772c.438.28.822.148 1.153-.395.36-.396.195-.87-.496-1.423zm5.411-4.06c-.204-.408-.407-.408-.794-.408-.428 0-.632 0-.836.407-.204.408-3.799 10.765-3.868 11.002-.07.237-.172.815.812.815.618 0 .711-.513.815-.815.06-.174.393-1.122.999-2.844h4.106c.582 1.622.918 2.57 1.007 2.844.134.412.204.815 1.019.815.854 0 .666-.661.611-.815-.055-.154-3.667-10.594-3.871-11.002zm-2.215 6.375l1.4-3.86 1.4 3.86h-2.8z"
- fill="#1CB569"
- fillRule="nonzero"
- />
- <path
- d="M50.72 39.886l.854 2.25c.34.893.61 1.581.88 2.246.175.432.5.775.928 1.088 9.086 6.658 18.494 13.543 30.38 22.235 1.452 1.062 3.052 1.15 4.461.225 1.351-.887 1.983-2.52 1.467-4.046-.27-.797-.804-1.577-1.445-2.049-8.66-6.373-16.514-12.121-30.661-22.452a2.504 2.504 0 0 0-1.266-.476c-.633-.042-1.291-.08-2.095-.122l-2.61-.129-1.39-.07.496 1.3z"
- fill="#FFF"
- stroke="#1CB569"
- strokeWidth={1.815}
+ <label
+ className="c2"
+ htmlFor="ratingthreshold"
+ >
+ Mindestbewertung
+ </label>
+ <input
+ className="c4"
+ defaultValue={1}
+ max={4}
+ min={0}
+ onChange={[Function]}
+ type="range"
/>
- </g>
- </svg>
+ </div>
+ </div>
</div>
</div>
`;
-exports[`Storyshots documentation/overview molecules/spinner 1`] = `
-.c0 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-box-pack: center;
- -webkit-justify-content: center;
- -ms-flex-pack: center;
- justify-content: center;
- -webkit-flex-direction: column;
- -ms-flex-direction: column;
- flex-direction: column;
- word-wrap: anywhere;
- height: 100%;
- width: 100%;
- margin-left: auto;
- margin-right: auto;
- vertical-align: middle;
- -webkit-animation: fTgkMB;
- animation: fTgkMB;
- -webkit-animation-duration: 2s;
- animation-duration: 2s;
- -webkit-animation-timing-function: linear;
- animation-timing-function: linear;
- -webkit-animation-iteration-count: infinite;
- animation-iteration-count: infinite;
- background: white;
- border: 1px solid #1CB569;
- border-radius: 50%;
- height: 80px;
- width: 80px;
-}
-
-<div
- className="c0"
->
- Spinner
-</div>
-`;
-
-exports[`Storyshots documentation/overview molecules/statelesstoggle 1`] = `
-.c3 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-pack: center;
- -webkit-justify-content: center;
- -ms-flex-pack: center;
- justify-content: center;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- height: 20px;
- width: 20px;
- font-size: 15.384615384615383px;
- -webkit-filter: drop-shadow( 0 1px 1px #0007 );
- filter: drop-shadow( 0 1px 1px #0007 );
- -webkit-transform: rotate(-360deg);
- -ms-transform: rotate(-360deg);
- transform: rotate(-360deg);
- -webkit-transition: -webkit-transform 0.4s;
- -webkit-transition: transform 0.4s;
- transition: transform 0.4s;
-}
-
+exports[`Storyshots documentation/overview atoms/button 1`] = `
.c0 {
- display: block;
- position: relative;
+ color: white;
+ background-color: #1CB569;
+ -webkit-transition: background-color 0.1s linear;
+ transition: background-color 0.1s linear;
+ font-size: 1rem;
+ padding: 0.5rem;
margin: 0.5rem;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- background-color: currentColor;
- -webkit-transition: color 0.1s linear;
- transition: color 0.1s linear;
+ line-height: 1.5em;
+ box-shadow: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
- cursor: pointer;
- height: 20px;
- width: 57.400000000000006px;
- border-radius: 20px;
- border: 1.3333333333333333px solid currentColor;
- color: #BB2D00;
-}
-
-.c1 {
- display: inline-block;
- vertical-align: middle;
- -webkit-transition: left 0.4s cubic-bezier(0.4,0,0.2,1);
- transition: left 0.4s cubic-bezier(0.4,0,0.2,1);
- position: relative;
- left: 0;
-}
-
-.c2 {
- -webkit-clip: rect(0 0 0 0);
- clip: rect(0 0 0 0);
- -webkit-clippath: inset(50%);
- clippath: inset(50%);
- height: 1px;
- margin: -1px;
- overflow: hidden;
- padding: 0;
- position: absolute;
- white-space: nowrap;
- width: 1px;
-}
-
-<span
- className="c0"
- size={1}
->
- <span
- className="c1"
- size={1}
- >
- <input
- className="c2"
- onChange={[Function]}
- tabIndex={0}
- type="checkbox"
- />
- <img
- className="c3"
- size={1}
- src="test-file-stub"
- />
- </span>
-</span>
-`;
-
-exports[`Storyshots documentation/overview organisms/profilebubble 1`] = `
-.c13 {
- font-size: 1rem;
- margin: 0.5rem auto;
- text-align: left;
- max-width: 240px;
- line-height: 1.55em;
-}
-
-.c9 {
- font-size: 0.5884615384615384rem;
- margin: 0.5rem auto;
- text-align: left;
- max-width: 240px;
- line-height: 1.55em;
-}
-
-.c15 {
- font-size: 1rem;
- margin: 0.5rem auto;
- color: #1CB569;
- text-align: left;
- max-width: 240px;
- line-height: 1.55em;
-}
-
-.c19 {
- font-size: 0.85rem;
- margin: 0.5rem auto;
- text-align: left;
- max-width: 240px;
- line-height: 1.55em;
-}
-
-.c17 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-transform: rotate(90deg);
- -ms-transform: rotate(90deg);
- transform: rotate(90deg);
-}
-
-.c4 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-transform: rotate(0deg);
- -ms-transform: rotate(0deg);
- transform: rotate(0deg);
-}
-
-.c8 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-transform: rotate(180deg);
- -ms-transform: rotate(180deg);
- transform: rotate(180deg);
+ cursor: unset;
+ -webkit-transition: -webkit-transform 0.2s cubic-bezier(0.4,0,0.2,1);
+ -webkit-transition: transform 0.2s cubic-bezier(0.4,0,0.2,1);
+ transition: transform 0.2s cubic-bezier(0.4,0,0.2,1);
+ text-transform: lowercase;
+ border-style: unset;
+ border-radius: 3rem;
+ min-width: 240px;
+ min-height: auto;
+ padding: 0.5rem;
+ min-height: 2.5em;
}
-.c5 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- position: absolute;
- top: 30.76923076923077%;
- left: 30.76923076923077%;
- width: 53.84615384615384px;
- height: 53.84615384615384px;
- font-size: 0;
+.c0:active,
+.c0:hover {
+ background-color: #4A90E2;
}
-.c18 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- position: absolute;
- top: 30.76923076923077%;
- left: 30.76923076923077%;
- width: 46.153846153846146px;
- height: 46.153846153846146px;
- font-size: 0;
+.c0::-moz-focus-inner {
+ border: 0;
}
-.c7 {
- position: relative;
+.c0:active {
+ -webkit-transform: scale(1.05);
+ -ms-transform: scale(1.05);
+ transform: scale(1.05);
}
-.c3 {
- position: relative;
+.c0:focus,
+.c0:active {
+ box-shadow: 0 1px 5px 0 rgba(0,0,0,0.2),0 3px 4px 0 rgba(0,0,0,0.12),0 2px 4px 0 rgba(0,0,0,0.14);
+ outline: none;
}
+<button
+ className="c0"
+ size={2}
+ width="240px"
+>
+ Button
+</button>
+`;
+
+exports[`Storyshots documentation/overview atoms/link 1`] = `
.c0 {
- background-color: white;
- padding: 1rem;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-align-items: stretch;
- -webkit-box-align: stretch;
- -ms-flex-align: stretch;
- align-items: stretch;
- -webkit-align-content: stretch;
- -ms-flex-line-pack: stretch;
- align-content: stretch;
- -webkit-box-pack: justify;
- -webkit-justify-content: space-between;
- -ms-flex-pack: justify;
- justify-content: space-between;
- -webkit-flex-direction: row;
- -ms-flex-direction: row;
- flex-direction: row;
- border-radius: 3rem;
- border-width: 0;
- border-style: solid;
- box-shadow: 0 1px 5px 0 rgba(0,0,0,0.2),0 3px 4px 0 rgba(0,0,0,0.12),0 2px 4px 0 rgba(0,0,0,0.14);
+ -webkit-text-decoration: none;
+ text-decoration: none;
}
-.c0 > * {
- -webkit-flex: 1 auto;
- -ms-flex: 1 auto;
- flex: 1 auto;
+color:#1CB569 .c0:hover {
+ color: #4A90E2;
}
-.c2 svg {
- -webkit-filter: drop-shadow(0px 2px 4px rgba(0,0,0,0.2)) drop-shadow(0px 1px 10px rgba(0,0,0,0.12)) drop-shadow(0px 4px 5px rgba(0,0,0,0.14));
- filter: drop-shadow(0px 2px 4px rgba(0,0,0,0.2)) drop-shadow(0px 1px 10px rgba(0,0,0,0.12)) drop-shadow(0px 4px 5px rgba(0,0,0,0.14));
+<a
+ className="c0"
+>
+ Link
+</a>
+`;
+
+exports[`Storyshots documentation/overview atoms/subtitle 1`] = `
+.c0 {
+ font-family: Libre Baskerville,Helvetica,Arial,serif;
+ font-weight: lighter;
}
-.c1 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-flex-direction: column;
- -ms-flex-direction: column;
- flex-direction: column;
- -webkit-align-items: start;
- -webkit-box-align: start;
- -ms-flex-align: start;
- align-items: start;
- justify-self: start;
+<p
+ className="c0"
+>
+ Subtitle
+</p>
+`;
+
+exports[`Storyshots documentation/overview atoms/text 1`] = `
+.c0 {
+ font-size: 1rem;
+ margin: 0.5rem auto;
+ text-align: left;
+ max-width: 240px;
+ line-height: 1.55em;
}
-.c10 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-flex-direction: column;
- -ms-flex-direction: column;
- flex-direction: column;
- -webkit-align-items: start;
- -webkit-box-align: start;
- -ms-flex-align: start;
- align-items: start;
- margin: 0 1rem;
- -webkit-box-pack: center;
- -webkit-justify-content: center;
- -ms-flex-pack: center;
- justify-content: center;
- justify-self: center;
+<p
+ className="c0"
+>
+ Text
+</p>
+`;
+
+exports[`Storyshots documentation/overview atoms/title 1`] = `
+.c0 {
+ font-size: 3rem;
+ font-family: Libre Baskerville,Helvetica,Arial,serif;
+ font-weight: lighter;
}
-.c16 {
+<h1
+ className="c0"
+>
+ Title
+</h1>
+`;
+
+exports[`Storyshots documentation/overview molecules/fivestarrating 1`] = `
+Array [
+ <svg
+ alt="1"
+ aria-label="1"
+ fill="none"
+ role="img"
+ style={
+ Object {
+ "width": "20px",
+ }
+ }
+ viewBox="0 0 106 100"
+ >
+ <path
+ d="M52.632 80.368L85.158 100l-8.632-37 28.737-24.895-37.842-3.21L52.631 0 37.843 34.895 0 38.105 28.737 63l-8.632 37 32.527-19.632z"
+ fill="currentcolor"
+ />
+ </svg>,
+ <svg
+ alt="2"
+ aria-label="2"
+ fill="none"
+ role="img"
+ style={
+ Object {
+ "width": "20px",
+ }
+ }
+ viewBox="0 0 106 100"
+ >
+ <path
+ d="M52.632 80.368L85.158 100l-8.632-37 28.737-24.895-37.842-3.21L52.631 0 37.843 34.895 0 38.105 28.737 63l-8.632 37 32.527-19.632z"
+ fill="currentcolor"
+ />
+ </svg>,
+ <svg
+ alt="3"
+ aria-label="3"
+ fill="none"
+ role="img"
+ style={
+ Object {
+ "width": "20px",
+ }
+ }
+ viewBox="0 0 106 100"
+ >
+ <path
+ d="M52.632 80.368L85.158 100l-8.632-37 28.737-24.895-37.842-3.21L52.631 0 37.843 34.895 0 38.105 28.737 63l-8.632 37 32.527-19.632z"
+ fill="currentcolor"
+ />
+ </svg>,
+ <svg
+ alt="4"
+ aria-label="4"
+ fill="none"
+ role="img"
+ style={
+ Object {
+ "width": "20px",
+ }
+ }
+ viewBox="0 0 106 100"
+ >
+ <path
+ clipRule="evenodd"
+ d="M67.421 34.842l37.842 3.263L76.579 63l8.579 37-32.526-19.632L20.105 100l8.632-37L0 38.105l37.842-3.21L52.632 0l14.79 34.842zM52.631 21.58v48.947l19.843 12L67.21 60l17.474-15.158-23.052-2-9-21.263z"
+ fill="currentcolor"
+ fillRule="evenodd"
+ />
+ </svg>,
+ <svg
+ alt="5"
+ aria-label="5"
+ fill="none"
+ role="img"
+ style={
+ Object {
+ "width": "20px",
+ }
+ }
+ viewBox="0 0 106 100"
+ >
+ <path
+ clipRule="evenodd"
+ d="M67.421 34.842l37.842 3.263L76.579 63l8.579 37-32.526-19.632L20.105 100l8.632-37L0 38.105l37.842-3.21L52.632 0l14.79 34.842zm-34.58 47.632l19.79-11.948 19.842 12L67.21 60l17.474-15.158-23.053-2-9-21.263-8.947 21.21-23.053 2 17.474 15.158-5.263 22.527z"
+ fill="currentcolor"
+ fillRule="evenodd"
+ />
+ </svg>,
+]
+`;
+
+exports[`Storyshots documentation/overview molecules/icon 1`] = `
+<svg
+ alt="Agentur"
+ aria-label="Agentur"
+ role="img"
+ style={
+ Object {
+ "width": "80px",
+ }
+ }
+ viewBox="0 0 100 100"
+>
+ <defs>
+ <path
+ d="M0 0h100v100H0z"
+ id="Agentur_svg__a"
+ />
+ </defs>
+ <g
+ fill="none"
+ fillRule="evenodd"
+ >
+ <g
+ transform="matrix(-1 0 0 1 100 0)"
+ >
+ <mask
+ fill="#fff"
+ id="Agentur_svg__b"
+ >
+ <use
+ xlinkHref="#Agentur_svg__a"
+ />
+ </mask>
+ <path
+ d="M50 98C23.49 98 2 76.51 2 50S23.49 2 50 2s48 21.49 48 48-21.49 48-48 48z"
+ fill="#1CB569"
+ fillRule="nonzero"
+ mask="url(#Agentur_svg__b)"
+ />
+ </g>
+ <g
+ fill="#FFF"
+ >
+ <path
+ d="M84 58.661h-5.538v18.444H84z"
+ fillRule="nonzero"
+ />
+ <path
+ d="M27.73 55.837c1.44.692 8.833 4.154 12.46 5.788a4.32 4.32 0 0 0 4.265 3.821h17.197V64.2H44.428a3.074 3.074 0 0 1-2.77-1.994v-.47a3.074 3.074 0 0 1 3.074-3.074h7.09c4.347 0 7.836-2.465 12.516-2.465 5.733 0 7.145 2.022 12.905 4.403v13.846a48.185 48.185 0 0 0-12.295-1.578 38.105 38.105 0 0 0-11.077 1.107 7.421 7.421 0 0 1-4.985-.498c-6.286-2.77-16.615-8.308-22.93-11.77-5.288-3.128-1.522-7.42 1.773-5.87zm-10.08-2.299h57.96L80.842 48H12.415z"
+ />
+ </g>
+ <circle
+ cx={15}
+ cy={15}
+ fill="#FFF"
+ r={15}
+ transform="matrix(-1 0 0 1 64 15)"
+ />
+ <path
+ d="M49.596 31.02l-1.976-2.014a14.181 14.181 0 0 0 2.91-5.262h2.278c.357 0 .535-.268.535-.803 0-.534-.178-.802-.535-.802h-5.445v-1.604c0-.357-.266-.535-.797-.535-.506 0-.759.178-.759.535v1.604h-5.445c-.356 0-.535.268-.535.802 0 .535.179.8.535.795h8.69a12.695 12.695 0 0 1-2.467 4.3c-.92-1.038-1.602-2.4-1.838-2.871-.183-.367-.183-.734-.733-.734s-.917.367-.733.734c.183.366 1.297 2.726 2.27 3.841-2.544 2.552-3.864 3.894-3.96 4.027-.144.2-.144.566.223.933.366.367.768.344.916.183.1-.107 1.384-1.436 3.855-3.988l2.42 2.495c.394.252.74.133 1.037-.355.325-.357.176-.784-.446-1.281zm4.87-3.655c-.184-.367-.367-.367-.715-.367-.386 0-.569 0-.752.367-.184.367-3.42 9.688-3.482 9.902-.062.213-.155.733.731.733.556 0 .64-.462.734-.733.053-.157.353-1.01.899-2.56h3.695c.524 1.46.826 2.313.906 2.56.121.37.184.733.917.733.77 0 .6-.595.55-.733-.049-.139-3.3-9.535-3.483-9.902zm-1.994 5.738l1.26-3.474 1.26 3.474h-2.52z"
+ fill="#1CB569"
+ fillRule="nonzero"
+ />
+ </g>
+</svg>
+`;
+
+exports[`Storyshots documentation/overview molecules/pinshape 1`] = `
+.c1 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
- -webkit-flex-direction: column;
- -ms-flex-direction: column;
- flex-direction: column;
- -webkit-align-items: start;
- -webkit-box-align: start;
- -ms-flex-align: start;
- align-items: start;
- justify-self: end;
-}
-
-.c11 {
- font-weight: normal;
- text-transform: lowercase;
- font-size: 2.5rem;
- margin: 0;
- font-family: Libre Baskerville,Helvetica,Arial,serif;
- color: #1CB569;
+ -webkit-transform: rotate(90deg);
+ -ms-transform: rotate(90deg);
+ transform: rotate(90deg);
}
-.c12 {
+.c2 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
- -webkit-flex-flow: row wrap;
- -ms-flex-flow: row wrap;
- flex-flow: row wrap;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
-}
-
-.c14 {
- margin: 0 0.5rem;
+ position: absolute;
+ top: 30.76923076923077%;
+ left: 30.76923076923077%;
+ width: 61.53846153846153px;
+ height: 61.53846153846153px;
+ font-size: 0;
}
-.c6 {
- border-radius: 2000rem;
- max-width: 100%;
+.c0 {
+ position: relative;
}
<div
className="c0"
- style={
- Object {
- "margin": "function (props) {
- return (0, _core.get)(props.theme, path, fallback);
- } function (props) {
- return (0, _core.get)(props.theme, path, fallback);
- }",
- }
- }
>
<div
className="c1"
>
- <div
- className="c2"
- >
- <div
- className="c3"
- style={
- Object {
- "marginBottom": "-1em",
- }
- }
- >
- <div
- className="c4"
- >
- <svg
- height="140px"
- version="1.1"
- viewBox="0 0 1000 1000"
- width="140px"
- xmlns="http://www.w3.org/2000/svg"
- >
- <title>
- Atoms/Icon/Pin
- </title>
- <defs>
- <filter
- filterUnits="objectBoundingBox"
- height="106.9%"
- id="filter-1"
- width="108.5%"
- x="-4.2%"
- y="-2.5%"
- >
- <feMerge>
- <feMergeNode
- in="SourceGraphic"
- />
- </feMerge>
- </filter>
- </defs>
- <g
- fill="none"
- fillRule="evenodd"
- id="Symbols"
- stroke="none"
- strokeWidth="1"
- >
- <g
- id="Atoms/Icon/Pin"
- >
- <g
- id="Group"
- transform="translate(1.000000, 0.000000)"
- >
- <g
- fill="#1CB569"
- fillRule="nonzero"
- filter="url(#filter-1)"
- id="Atom-Pin"
- transform="translate(210.000000, 219.000000)"
- >
- <path
- d="M577.143802,255.995818 C556.506373,107.376739 437.401481,0 289.22782,0 C141.05416,0 23.9375802,107.286714 3.17831886,255.995818 C-35.3577758,532.049383 289.257577,697.727596 289.257577,699.979533 C289.257577,702.23147 613.586498,518.435484 577.143802,255.995818 Z M40,290 C40,152.5 152.5,40 290,40 C427.5,40 540,152.5 540,290 C540,427.5 428.75,540 290,540 C152.5,540 40,427.5 40,290 Z"
- id="Pin-Main-Shape"
- />
- </g>
- </g>
- </g>
- </g>
- </svg>
- </div>
- <div
- className="c5"
- size={7}
- >
- <img
- alt="Profile picture"
- className="c6"
- size={2.692307692307692}
- />
- </div>
- </div>
- </div>
- <div
- className="c7"
- style={
- Object {
- "marginTop": "-1em",
- }
- }
- >
- <div
- className="c8"
- >
- <svg
- height="140px"
- version="1.1"
- viewBox="0 0 1000 1000"
- width="140px"
- xmlns="http://www.w3.org/2000/svg"
- >
- <path
- d="M502.56508,868.364664 C511.93155,862.588075 523.095822,855.151458 535.04456,846.573064 C568.356448,822.657358 601.727957,794.366431 631.986836,762.739204 C670.449872,722.536816 701.168462,679.73622 721.677407,634.99991 C745.587052,582.845627 754.91721,529.57787 747.526139,475.323915 C729.599303,343.732453 626.596403,250 499.286261,250 C372.372238,250 270.864911,343.231572 252.772718,475.337398 C244.509241,535.675767 254.910456,593.178228 281.38033,648.043223 C303.726517,694.360915 336.875734,737.501264 378.116754,777.203565C406.461936,804.491177 436.782663,828.440662 467.722026,849.417211 C478.177327,856.505791 487.661494,862.556978 497.309147,868.437102C497.961101,868.834461 498.885903,869.394858 499.886582,870 C500.740299,869.484354 501.635452,868.937995 502.56508,868.364664 Z M787.143802,465.995818 C823.586498,728.435484 499.257577,912.23147 499.257577,909.979533 C499.257577,907.727596 174.642224,742.049383 213.178319,465.995818C233.93758,317.286714 351.05416,210 499.22782,210 C647.401481,210 766.506373,317.376739 787.143802,465.995818 Z"
- fill="#1CB569"
- />
- </svg>
- </div>
- <div
- className="c5"
- size={7}
- >
- <p
- className="c9"
- size={2.692307692307692}
- >
- Map
- </p>
- </div>
- </div>
- </div>
- <div
- className="c10"
- >
- <h2
- className="c11"
- >
- Linguala
- </h2>
- <div
- className="c12"
- >
- <p
- className="c13"
- >
- Basel, CH
- </p>
- <span
- className="c14"
- >
- |
- </span>
- <p
- className="c15"
- >
- 5
- Sprachen
- </p>
- <span
- className="c14"
- >
- |
- </span>
- <svg
- alt="1"
- aria-label="1"
- fill="none"
- role="img"
- style={
- Object {
- "width": "20px",
- }
- }
- viewBox="0 0 106 100"
- >
- <path
- d="M52.632 80.368L85.158 100l-8.632-37 28.737-24.895-37.842-3.21L52.631 0 37.843 34.895 0 38.105 28.737 63l-8.632 37 32.527-19.632z"
- fill="currentcolor"
- />
- </svg>
- <svg
- alt="2"
- aria-label="2"
- fill="none"
- role="img"
- style={
- Object {
- "width": "20px",
- }
- }
- viewBox="0 0 106 100"
- >
- <path
- d="M52.632 80.368L85.158 100l-8.632-37 28.737-24.895-37.842-3.21L52.631 0 37.843 34.895 0 38.105 28.737 63l-8.632 37 32.527-19.632z"
- fill="currentcolor"
- />
- </svg>
- <svg
- alt="3"
- aria-label="3"
- fill="none"
- role="img"
- style={
- Object {
- "width": "20px",
- }
- }
- viewBox="0 0 106 100"
- >
- <path
- d="M52.632 80.368L85.158 100l-8.632-37 28.737-24.895-37.842-3.21L52.631 0 37.843 34.895 0 38.105 28.737 63l-8.632 37 32.527-19.632z"
- fill="currentcolor"
- />
- </svg>
- <svg
- alt="4"
- aria-label="4"
- fill="none"
- role="img"
- style={
- Object {
- "width": "20px",
- }
- }
- viewBox="0 0 106 100"
- >
- <path
- d="M52.632 80.368L85.158 100l-8.632-37 28.737-24.895-37.842-3.21L52.631 0 37.843 34.895 0 38.105 28.737 63l-8.632 37 32.527-19.632z"
- fill="currentcolor"
- />
- </svg>
- <svg
- alt="5"
- aria-label="5"
- fill="none"
- role="img"
- style={
- Object {
- "width": "20px",
- }
- }
- viewBox="0 0 106 100"
- >
- <path
- d="M52.632 80.368L85.158 100l-8.632-37 28.737-24.895-37.842-3.21L52.631 0 37.843 34.895 0 38.105 28.737 63l-8.632 37 32.527-19.632z"
- fill="currentcolor"
- />
- </svg>
- </div>
- <div
- className="c12"
- >
- <p
- className="c13"
- >
- translation
- </p>
- <span
- className="c14"
- >
- |
- </span>
- <p
- className="c13"
- >
- interpreting
- </p>
- <span
- className="c14"
- >
- |
- </span>
- <p
- className="c13"
- >
- lessons
- </p>
- </div>
- </div>
- <div
- className="c16"
- >
- <div
- className="c7"
- style={
- Object {
- "marginBottom": "-1em",
- }
- }
- >
- <div
- className="c17"
- >
- <svg
- height="120px"
- version="1.1"
- viewBox="0 0 1000 1000"
- width="120px"
- xmlns="http://www.w3.org/2000/svg"
- >
- <path
- d="M502.56508,868.364664 C511.93155,862.588075 523.095822,855.151458 535.04456,846.573064 C568.356448,822.657358 601.727957,794.366431 631.986836,762.739204 C670.449872,722.536816 701.168462,679.73622 721.677407,634.99991 C745.587052,582.845627 754.91721,529.57787 747.526139,475.323915 C729.599303,343.732453 626.596403,250 499.286261,250 C372.372238,250 270.864911,343.231572 252.772718,475.337398 C244.509241,535.675767 254.910456,593.178228 281.38033,648.043223 C303.726517,694.360915 336.875734,737.501264 378.116754,777.203565C406.461936,804.491177 436.782663,828.440662 467.722026,849.417211 C478.177327,856.505791 487.661494,862.556978 497.309147,868.437102C497.961101,868.834461 498.885903,869.394858 499.886582,870 C500.740299,869.484354 501.635452,868.937995 502.56508,868.364664 Z M787.143802,465.995818 C823.586498,728.435484 499.257577,912.23147 499.257577,909.979533 C499.257577,907.727596 174.642224,742.049383 213.178319,465.995818C233.93758,317.286714 351.05416,210 499.22782,210 C647.401481,210 766.506373,317.376739 787.143802,465.995818 Z"
- fill="#1CB569"
- />
- </svg>
- </div>
- <div
- className="c18"
- size={6}
- >
- <svg
- alt="Kontaktaufnahme"
- aria-label="Kontaktaufnahme"
- fill="none"
- role="img"
- style={
- Object {
- "width": "46.153846153846146px",
- }
- }
- viewBox="0.5 0.5 100 100"
- >
- <path
- clipRule="evenodd"
- d="M50.5 100.5c27.614 0 50-22.386 50-50S78.114.5 50.5.5s-50 22.386-50 50 22.386 50 50 50zM16.125 73.417V60.552L57.167 19.51a2.579 2.579 0 0 1 3.698 0l9.218 9.22a2.578 2.578 0 0 1 0 3.697L28.99 73.417H16.125zm23.438 0h39.062V63H49.979L39.563 73.417z"
- fill="currentcolor"
- fillRule="evenodd"
- />
- </svg>
- </div>
- </div>
- <p
- className="c19"
- size={4}
+ <svg
+ height="160px"
+ version="1.1"
+ viewBox="0 0 1000 1000"
+ width="160px"
+ xmlns="http://www.w3.org/2000/svg"
>
- Kontaktaufnahme
- </p>
- <div
- className="c7"
+ <path
+ d="M502.56508,868.364664 C511.93155,862.588075 523.095822,855.151458 535.04456,846.573064 C568.356448,822.657358 601.727957,794.366431 631.986836,762.739204 C670.449872,722.536816 701.168462,679.73622 721.677407,634.99991 C745.587052,582.845627 754.91721,529.57787 747.526139,475.323915 C729.599303,343.732453 626.596403,250 499.286261,250 C372.372238,250 270.864911,343.231572 252.772718,475.337398 C244.509241,535.675767 254.910456,593.178228 281.38033,648.043223 C303.726517,694.360915 336.875734,737.501264 378.116754,777.203565C406.461936,804.491177 436.782663,828.440662 467.722026,849.417211 C478.177327,856.505791 487.661494,862.556978 497.309147,868.437102C497.961101,868.834461 498.885903,869.394858 499.886582,870 C500.740299,869.484354 501.635452,868.937995 502.56508,868.364664 Z M787.143802,465.995818 C823.586498,728.435484 499.257577,912.23147 499.257577,909.979533 C499.257577,907.727596 174.642224,742.049383 213.178319,465.995818C233.93758,317.286714 351.05416,210 499.22782,210 C647.401481,210 766.506373,317.376739 787.143802,465.995818 Z"
+ fill="#1CB569"
+ />
+ </svg>
+ </div>
+ <div
+ className="c2"
+ size={8}
+ >
+ <svg
+ alt="Agent"
+ aria-label="Agent"
+ role="img"
style={
Object {
- "marginBottom": "-1em",
+ "width": "61.53846153846153px",
}
}
+ viewBox="0 0 100 100"
>
- <div
- className="c17"
- >
- <svg
- height="120px"
- version="1.1"
- viewBox="0 0 1000 1000"
- width="120px"
- xmlns="http://www.w3.org/2000/svg"
- >
- <path
- d="M502.56508,868.364664 C511.93155,862.588075 523.095822,855.151458 535.04456,846.573064 C568.356448,822.657358 601.727957,794.366431 631.986836,762.739204 C670.449872,722.536816 701.168462,679.73622 721.677407,634.99991 C745.587052,582.845627 754.91721,529.57787 747.526139,475.323915 C729.599303,343.732453 626.596403,250 499.286261,250 C372.372238,250 270.864911,343.231572 252.772718,475.337398 C244.509241,535.675767 254.910456,593.178228 281.38033,648.043223 C303.726517,694.360915 336.875734,737.501264 378.116754,777.203565C406.461936,804.491177 436.782663,828.440662 467.722026,849.417211 C478.177327,856.505791 487.661494,862.556978 497.309147,868.437102C497.961101,868.834461 498.885903,869.394858 499.886582,870 C500.740299,869.484354 501.635452,868.937995 502.56508,868.364664 Z M787.143802,465.995818 C823.586498,728.435484 499.257577,912.23147 499.257577,909.979533 C499.257577,907.727596 174.642224,742.049383 213.178319,465.995818C233.93758,317.286714 351.05416,210 499.22782,210 C647.401481,210 766.506373,317.376739 787.143802,465.995818 Z"
- fill="#1CB569"
- />
- </svg>
- </div>
- <div
- className="c18"
- size={6}
+ <defs>
+ <path
+ d="M0 0h100v100H0z"
+ id="Agent_svg__a"
+ />
+ </defs>
+ <g
+ fill="none"
+ fillRule="evenodd"
>
- <svg
- alt="Zu Favoriten hinzufügen"
- aria-label="Zu Favoriten hinzufügen"
- fill="none"
- role="img"
- style={
- Object {
- "width": "46.153846153846146px",
- }
- }
- viewBox="0.5 0.5 100 100"
+ <mask
+ fill="#fff"
+ id="Agent_svg__b"
>
- <path
- clipRule="evenodd"
- d="M100.515 50.515c0 27.614-22.386 50-50 50-27.615 0-50-22.386-50-50s22.385-50 50-50c27.614 0 50 22.386 50 50zm-49.41 30.261c.032.042.067.085.105.131l.13-.12c.07-.062.122-.11.172-.16l5.411-5.384c6.41-6.378 12.818-12.756 19.224-19.137 2.069-2.061 3.705-4.413 4.718-7.164 1.507-4.094 1.618-8.218.112-12.33-2.568-7.01-9.32-11.775-16.847-11.768-4.174.004-7.916 1.252-11.206 3.813-.398.31-.78.642-1.162.976-.178.155-.355.31-.535.463-.128-.117-.24-.22-.35-.323-3.939-3.678-8.638-5.332-13.981-4.855-6.042.539-10.724 3.483-13.884 8.64-2.75 4.49-3.248 9.324-1.727 14.352.98 3.239 2.813 5.958 5.203 8.334a41012.808 41012.808 0 0 1 24.43 24.315c.065.064.122.136.187.217z"
- fill="currentcolor"
- fillRule="evenodd"
+ <use
+ xlinkHref="#Agent_svg__a"
/>
- </svg>
- </div>
- </div>
- <p
- className="c19"
- size={4}
- >
- Zu Favoriten hinzufügen
- </p>
+ </mask>
+ <path
+ d="M50 98C23.49 98 2 76.51 2 50S23.49 2 50 2s48 21.49 48 48-21.49 48-48 48z"
+ fill="#1CB569"
+ fillRule="nonzero"
+ mask="url(#Agent_svg__b)"
+ />
+ <path
+ d="M21.407 60.762c15.822 3.12 27.412 1.007 34.77-6.342 8.061-8.061 8.294-21.305.51-29.088-7.783-7.784-21.114-7.55-29.175.511-7.142 7.937-9.177 19.577-6.105 34.92z"
+ fill="#FFF"
+ />
+ <path
+ d="M40.681 42.244l-2.195-2.237a15.758 15.758 0 0 0 3.232-5.847h2.533c.396 0 .594-.297.594-.892 0-.594-.198-.891-.594-.891H38.2v-1.783c0-.396-.296-.594-.887-.594-.561 0-.842.198-.842.594v1.783h-6.05c-.397 0-.595.297-.595.891 0 .594.198.889.594.883h9.655a14.106 14.106 0 0 1-2.74 4.777c-1.023-1.152-1.78-2.666-2.042-3.19-.204-.407-.204-.814-.815-.814s-1.019.407-.815.815c.204.407 1.442 3.029 2.522 4.268-2.826 2.835-4.292 4.327-4.399 4.474-.16.222-.16.63.247 1.037.408.407.854.382 1.019.204.11-.12 1.538-1.596 4.283-4.432l2.688 2.772c.438.28.822.148 1.153-.395.36-.396.195-.87-.496-1.423zm5.411-4.06c-.204-.408-.407-.408-.794-.408-.428 0-.632 0-.836.407-.204.408-3.799 10.765-3.868 11.002-.07.237-.172.815.812.815.618 0 .711-.513.815-.815.06-.174.393-1.122.999-2.844h4.106c.582 1.622.918 2.57 1.007 2.844.134.412.204.815 1.019.815.854 0 .666-.661.611-.815-.055-.154-3.667-10.594-3.871-11.002zm-2.215 6.375l1.4-3.86 1.4 3.86h-2.8z"
+ fill="#1CB569"
+ fillRule="nonzero"
+ />
+ <path
+ d="M50.72 39.886l.854 2.25c.34.893.61 1.581.88 2.246.175.432.5.775.928 1.088 9.086 6.658 18.494 13.543 30.38 22.235 1.452 1.062 3.052 1.15 4.461.225 1.351-.887 1.983-2.52 1.467-4.046-.27-.797-.804-1.577-1.445-2.049-8.66-6.373-16.514-12.121-30.661-22.452a2.504 2.504 0 0 0-1.266-.476c-.633-.042-1.291-.08-2.095-.122l-2.61-.129-1.39-.07.496 1.3z"
+ fill="#FFF"
+ stroke="#1CB569"
+ strokeWidth={1.815}
+ />
+ </g>
+ </svg>
</div>
</div>
`;
+
+exports[`Storyshots documentation/overview molecules/spinner 1`] = `
+.c0 {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ -webkit-flex-direction: column;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ word-wrap: anywhere;
+ height: 100%;
+ width: 100%;
+ margin-left: auto;
+ margin-right: auto;
+ vertical-align: middle;
+ -webkit-animation: fTgkMB;
+ animation: fTgkMB;
+ -webkit-animation-duration: 2s;
+ animation-duration: 2s;
+ -webkit-animation-timing-function: linear;
+ animation-timing-function: linear;
+ -webkit-animation-iteration-count: infinite;
+ animation-iteration-count: infinite;
+ background: white;
+ border: 1px solid #1CB569;
+ border-radius: 50%;
+ height: 80px;
+ width: 80px;
+}
+
+<div
+ className="c0"
+>
+ Spinner
+</div>
+`;
+
+exports[`Storyshots documentation/overview molecules/statelesstoggle 1`] = `
+.c3 {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ height: 20px;
+ width: 20px;
+ font-size: 15.384615384615383px;
+ -webkit-filter: drop-shadow( 0 1px 1px #0007 );
+ filter: drop-shadow( 0 1px 1px #0007 );
+ -webkit-transform: rotate(-360deg);
+ -ms-transform: rotate(-360deg);
+ transform: rotate(-360deg);
+ -webkit-transition: -webkit-transform 0.4s;
+ -webkit-transition: transform 0.4s;
+ transition: transform 0.4s;
+}
+
+.c0 {
+ display: block;
+ position: relative;
+ margin: 0.5rem;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ background-color: currentColor;
+ -webkit-transition: color 0.1s linear;
+ transition: color 0.1s linear;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ cursor: pointer;
+ height: 20px;
+ width: 57.400000000000006px;
+ border-radius: 20px;
+ border: 1.3333333333333333px solid currentColor;
+ color: #BB2D00;
+}
+
+.c1 {
+ display: inline-block;
+ vertical-align: middle;
+ -webkit-transition: left 0.4s cubic-bezier(0.4,0,0.2,1);
+ transition: left 0.4s cubic-bezier(0.4,0,0.2,1);
+ position: relative;
+ left: 0;
+}
+
+.c2 {
+ -webkit-clip: rect(0 0 0 0);
+ clip: rect(0 0 0 0);
+ -webkit-clippath: inset(50%);
+ clippath: inset(50%);
+ height: 1px;
+ margin: -1px;
+ overflow: hidden;
+ padding: 0;
+ position: absolute;
+ white-space: nowrap;
+ width: 1px;
+}
+
+<span
+ className="c0"
+ size={1}
+>
+ <span
+ className="c1"
+ size={1}
+ >
+ <input
+ className="c2"
+ onChange={[Function]}
+ tabIndex={0}
+ type="checkbox"
+ />
+ <img
+ className="c3"
+ size={1}
+ src="test-file-stub"
+ />
+ </span>
+</span>
+`;
+
+exports[`Storyshots documentation/overview organisms/filterbar 1`] = `
+.c0 {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-flex-direction: row;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ -webkit-flex-wrap: wrap;
+ -ms-flex-wrap: wrap;
+ flex-wrap: wrap;
+ -webkit-box-pack: start;
+ -webkit-justify-content: flex-start;
+ -ms-flex-pack: start;
+ justify-content: flex-start;
+ width: 100%;
+}
+
+<div
+ className="c0"
+/>
+`;