From a2ab49e07a7002dd3601a4dc7dbbee0fb266f522 Mon Sep 17 00:00:00 2001
From: "p.serrano" <pablo.s.toro@gmail.com>
Date: Wed, 11 Mar 2020 13:29:36 +0100
Subject: [PATCH 01/11] SubHeader Horizontal 2nd version + AddressBubble First
Draft
---
src/lib/components/organisms/AddressBubble.js | 241 ++++++++++++++++++
src/lib/components/organisms/SubHeaderHor.js | 67 +++++
src/lib/index.organisms.js | 2 +
.../organisms/addressbubble.stories.js | 28 ++
src/stories/organisms/subheaderhor.stories.js | 29 +++
5 files changed, 367 insertions(+)
create mode 100644 src/lib/components/organisms/AddressBubble.js
create mode 100644 src/lib/components/organisms/SubHeaderHor.js
create mode 100644 src/stories/organisms/addressbubble.stories.js
create mode 100644 src/stories/organisms/subheaderhor.stories.js
diff --git a/src/lib/components/organisms/AddressBubble.js b/src/lib/components/organisms/AddressBubble.js
new file mode 100644
index 0000000..3ddc727
--- /dev/null
+++ b/src/lib/components/organisms/AddressBubble.js
@@ -0,0 +1,241 @@
+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 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 Subtitle from '../atoms/Subtitle.js'
+import Text from '../atoms/Text.js'
+
+const heightSegment = '35px'
+const green = '#1CB569'
+
+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')};
+`
+const Flex = styled.div`
+ display: flex;
+ align-items: center;
+`
+const FlexDown = styled.div`
+ display: flex;
+ align-items: flex-end;
+`
+const SpacerSpan = styled.span`
+ margin: 0 ${themeGet('spacing.small')};
+`
+const AddressBubble = ({
+ rating = 5,
+ opinions = '10',
+ address = 'fake street 123, Nowhere, USA',
+ telephone = '+44 123 123 123',
+ email = 'email@email.com',
+ website = 'www.website.com',
+}) => (
+ <Bubble
+ shadow={'low'}
+ column
+ stretch
+ style={{
+ margin: `${themeGet('spacing.medium')} ${themeGet('spacing.large')}`,
+ width: '500px',
+ }}
+ >
+ {/* Opinions */}
+ <FlexDown
+ style={{
+ margin: '12px',
+ }}
+ >
+ <FiveStarRating rating={rating} size="2" />
+ <Text
+ style={{
+ color: '#919191',
+ fontSize: '10px',
+ margin: '0px 8px',
+ }}
+ >
+ basierend auf {opinions} bewertungen
+ </Text>
+ </FlexDown>
+
+ {/* Segment 1-Address*/}
+ <Bubble
+ row
+ style={{
+ backgroundColor: `${green}`,
+ padding: '0px',
+ margin: '5px 10px',
+ height: `${heightSegment}`,
+ boxShadow: 'none',
+ color: 'white',
+ }}
+ >
+ <Section>
+ <PinShape
+ size={1.8}
+ full
+ shapeColor="white"
+ style={{
+ paddingBottom: '5px',
+ }}
+ ></PinShape>
+ <Subtitle
+ style={{
+ margin: '0px',
+ }}
+ >
+ {address}
+ </Subtitle>
+ </Section>
+ </Bubble>
+
+ {/* Segment 2-Phone*/}
+ <Bubble
+ row
+ style={{
+ backgroundColor: `${green}`,
+ padding: '0px',
+ margin: '5px 10px',
+ height: `${heightSegment}`,
+ boxShadow: 'none',
+ color: 'white',
+ }}
+ >
+ <Section>
+ <Icon
+ icon={Phone}
+ alt={telephone}
+ size={1.3}
+ style={{ padding: '5px 4px 0px 6px' }}
+ />
+ <Subtitle
+ style={{
+ margin: '0px',
+ }}
+ >
+ {telephone}
+ </Subtitle>
+ </Section>
+ </Bubble>
+
+ {/* Segment 3-Email*/}
+ <Bubble
+ row
+ style={{
+ backgroundColor: `${green}`,
+ padding: '0px',
+ margin: '5px 10px',
+ height: `${heightSegment}`,
+ boxShadow: 'none',
+ color: 'white',
+ }}
+ >
+ <Section>
+ <Icon
+ icon={Email}
+ alt={email}
+ size={1}
+ style={{ padding: '4px 4px 0px 8px' }}
+ />
+ <Subtitle
+ style={{
+ margin: '0px 4px',
+ }}
+ >
+ {email}
+ </Subtitle>
+ </Section>
+ </Bubble>
+
+ {/* Segment 4-Website*/}
+ <Bubble
+ row
+ style={{
+ backgroundColor: `${green}`,
+ padding: '0px',
+ margin: '5px 10px',
+ height: `${heightSegment}`,
+ boxShadow: 'none',
+ color: 'white',
+ }}
+ >
+ <Section>
+ <Icon
+ icon={Worldwideweb}
+ alt={website}
+ size={1.4}
+ style={{ padding: '4px 4px 0px 6px' }}
+ />
+ <Subtitle
+ style={{
+ margin: '0px',
+ }}
+ >
+ {website}
+ </Subtitle>
+ </Section>
+ </Bubble>
+ <Section>
+ <Icon
+ icon={Facebook}
+ alt="Facebook"
+ size={3}
+ style={{
+ color: `${green}`,
+ margin: '6px 3px 0px 10px',
+ }}
+ />
+ <Icon
+ icon={Instagram}
+ alt="Instagram"
+ size={3}
+ style={{
+ color: `${green}`,
+ margin: '6px 4px 0px 9px',
+ }}
+ />
+ <Icon
+ icon={Twitter}
+ alt="Twitter"
+ size={3}
+ style={{
+ color: `${green}`,
+ margin: '6px 4px 0px 8px',
+ }}
+ />
+ <Icon
+ icon={Twitter} //SHOULD BE LINKEDIN
+ alt="Twitter"
+ size={3}
+ style={{
+ color: `${green}`,
+ margin: '6px 4px 0px 8px',
+ }}
+ />
+ </Section>
+ </Bubble>
+)
+
+AddressBubble.propTypes = {
+ profile: PropTypes.object,
+}
+
+export default AddressBubble
diff --git a/src/lib/components/organisms/SubHeaderHor.js b/src/lib/components/organisms/SubHeaderHor.js
new file mode 100644
index 0000000..5c35918
--- /dev/null
+++ b/src/lib/components/organisms/SubHeaderHor.js
@@ -0,0 +1,67 @@
+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: 100px;
+ 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')};
+`
+
+// tagged template literal
+
+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/index.organisms.js b/src/lib/index.organisms.js
index 3719f5a..48ad3dc 100644
--- a/src/lib/index.organisms.js
+++ b/src/lib/index.organisms.js
@@ -1,2 +1,4 @@
export { default as Menu } from './components/organisms/Menu'
+export { default as SubHeaderHor } from './components/organisms/SubHeaderHor'
+export { default as AddressBubble } from './components/organisms/AddressBubble'
export { default as ProfileBubble } from './components/organisms/ProfileBubble'
diff --git a/src/stories/organisms/addressbubble.stories.js b/src/stories/organisms/addressbubble.stories.js
new file mode 100644
index 0000000..3cf2380
--- /dev/null
+++ b/src/stories/organisms/addressbubble.stories.js
@@ -0,0 +1,28 @@
+import React from 'react'
+
+import { AddressBubble } from '../../lib/index.organisms.js'
+
+export default {
+ title: 'Organisms/AddressBubble',
+}
+
+export const AddressBubbleDefault = () => <AddressBubble />
+
+AddressBubbleDefault.story = {
+ name: '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.story = {
+ name: 'AddressBubble/example',
+}
diff --git a/src/stories/organisms/subheaderhor.stories.js b/src/stories/organisms/subheaderhor.stories.js
new file mode 100644
index 0000000..258d843
--- /dev/null
+++ b/src/stories/organisms/subheaderhor.stories.js
@@ -0,0 +1,29 @@
+import React from 'react'
+
+import { SubHeaderHor } from '../../lib/index.organisms.js'
+
+const data = {
+ headings: [
+ //{ item: 'Branche' },
+ { item: 'Profil', selected: true },
+ ],
+ entries: [
+ { item: 'Porträt' },
+ { item: 'Banner' },
+ { item: 'Bezahlung', selected: true },
+ { 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/SubHeaderHor',
+}
+
+export const _SubHeaderHor = () => (
+ <SubHeaderHor headings={data.headings} entries={data.entries} />
+)
--
GitLab
From ba209b338f1121ce07e52b84f71c323315f51c84 Mon Sep 17 00:00:00 2001
From: "p.serrano" <pablo.s.toro@gmail.com>
Date: Tue, 17 Mar 2020 18:25:48 +0100
Subject: [PATCH 02/11] Almost done
---
src/lib/components/organisms/AddressBubble.js | 11 +++--------
src/lib/components/organisms/SubHeaderHor.js | 2 --
2 files changed, 3 insertions(+), 10 deletions(-)
diff --git a/src/lib/components/organisms/AddressBubble.js b/src/lib/components/organisms/AddressBubble.js
index 3ddc727..41df5d0 100644
--- a/src/lib/components/organisms/AddressBubble.js
+++ b/src/lib/components/organisms/AddressBubble.js
@@ -30,17 +30,12 @@ const Section = styled.div`
margin: 0;
font-family: ${themeGet('fonts.title')};
`
-const Flex = styled.div`
- display: flex;
- align-items: center;
-`
+
const FlexDown = styled.div`
display: flex;
align-items: flex-end;
`
-const SpacerSpan = styled.span`
- margin: 0 ${themeGet('spacing.small')};
-`
+
const AddressBubble = ({
rating = 5,
opinions = '10',
@@ -222,7 +217,7 @@ const AddressBubble = ({
}}
/>
<Icon
- icon={Twitter} //SHOULD BE LINKEDIN
+ icon={Twitter}
alt="Twitter"
size={3}
style={{
diff --git a/src/lib/components/organisms/SubHeaderHor.js b/src/lib/components/organisms/SubHeaderHor.js
index 5c35918..3b3fd95 100644
--- a/src/lib/components/organisms/SubHeaderHor.js
+++ b/src/lib/components/organisms/SubHeaderHor.js
@@ -40,8 +40,6 @@ const Entry = styled(Item)`
font-size: ${themeGet('fontSizes.p')};
`
-// tagged template literal
-
const SubHeaderHor = ({ headings, entries }) => (
<MenuWrapper>
<EntryWrapper>
--
GitLab
From b6d4d10d6da0db839072263a50719061b625376c Mon Sep 17 00:00:00 2001
From: "p.serrano" <pablo.s.toro@gmail.com>
Date: Tue, 17 Mar 2020 18:37:22 +0100
Subject: [PATCH 03/11] Corrections made
---
src/lib/components/organisms/AddressBubble.js | 8 ++++----
src/stories/organisms/subheaderhor.stories.js | 9 +--------
2 files changed, 5 insertions(+), 12 deletions(-)
diff --git a/src/lib/components/organisms/AddressBubble.js b/src/lib/components/organisms/AddressBubble.js
index 41df5d0..704dd4f 100644
--- a/src/lib/components/organisms/AddressBubble.js
+++ b/src/lib/components/organisms/AddressBubble.js
@@ -71,7 +71,7 @@ const AddressBubble = ({
</Text>
</FlexDown>
- {/* Segment 1-Address*/}
+ {/* Segment_1-Address*/}
<Bubble
row
style={{
@@ -102,7 +102,7 @@ const AddressBubble = ({
</Section>
</Bubble>
- {/* Segment 2-Phone*/}
+ {/* Segment_2-Phone*/}
<Bubble
row
style={{
@@ -131,7 +131,7 @@ const AddressBubble = ({
</Section>
</Bubble>
- {/* Segment 3-Email*/}
+ {/* Segment_3-Email*/}
<Bubble
row
style={{
@@ -160,7 +160,7 @@ const AddressBubble = ({
</Section>
</Bubble>
- {/* Segment 4-Website*/}
+ {/* Segment_4-Website*/}
<Bubble
row
style={{
diff --git a/src/stories/organisms/subheaderhor.stories.js b/src/stories/organisms/subheaderhor.stories.js
index 258d843..62e6608 100644
--- a/src/stories/organisms/subheaderhor.stories.js
+++ b/src/stories/organisms/subheaderhor.stories.js
@@ -3,20 +3,13 @@ import React from 'react'
import { SubHeaderHor } from '../../lib/index.organisms.js'
const data = {
- headings: [
- //{ item: 'Branche' },
- { item: 'Profil', selected: true },
- ],
+ headings: [{ item: 'Profil', selected: true }],
entries: [
{ item: 'Porträt' },
{ item: 'Banner' },
{ item: 'Bezahlung', selected: true },
{ item: 'Kontakt' },
{ item: 'Blog' },
- // { item: 'Very long text' },
- // {
- // item: 'This text is an extremely long text that makes the menu very wide',
- // },
],
}
--
GitLab
From 7e95f5170152b7e1a8ecb25a482b02d84ff6c53e Mon Sep 17 00:00:00 2001
From: "p.serrano" <pablo.s.toro@gmail.com>
Date: Tue, 17 Mar 2020 18:41:28 +0100
Subject: [PATCH 04/11] Lint correction
---
src/lib/components/organisms/AddressBubble.js | 8 ++++----
1 file changed, 4 insertions(+), 4 deletions(-)
diff --git a/src/lib/components/organisms/AddressBubble.js b/src/lib/components/organisms/AddressBubble.js
index 704dd4f..386b510 100644
--- a/src/lib/components/organisms/AddressBubble.js
+++ b/src/lib/components/organisms/AddressBubble.js
@@ -71,7 +71,7 @@ const AddressBubble = ({
</Text>
</FlexDown>
- {/* Segment_1-Address*/}
+ {/*Segment_1-Address*/}
<Bubble
row
style={{
@@ -102,7 +102,7 @@ const AddressBubble = ({
</Section>
</Bubble>
- {/* Segment_2-Phone*/}
+ {/*Segment_2-Phone*/}
<Bubble
row
style={{
@@ -131,7 +131,7 @@ const AddressBubble = ({
</Section>
</Bubble>
- {/* Segment_3-Email*/}
+ {/*Segment_3-Email*/}
<Bubble
row
style={{
@@ -160,7 +160,7 @@ const AddressBubble = ({
</Section>
</Bubble>
- {/* Segment_4-Website*/}
+ {/*Segment_4-Website*/}
<Bubble
row
style={{
--
GitLab
From 5155061b707cf0ef683558ac379c55471d322118 Mon Sep 17 00:00:00 2001
From: "p.serrano" <pablo.s.toro@gmail.com>
Date: Tue, 17 Mar 2020 18:42:35 +0100
Subject: [PATCH 05/11] Deleted comments
---
src/lib/components/organisms/AddressBubble.js | 4 ----
1 file changed, 4 deletions(-)
diff --git a/src/lib/components/organisms/AddressBubble.js b/src/lib/components/organisms/AddressBubble.js
index 386b510..9a31aa0 100644
--- a/src/lib/components/organisms/AddressBubble.js
+++ b/src/lib/components/organisms/AddressBubble.js
@@ -71,7 +71,6 @@ const AddressBubble = ({
</Text>
</FlexDown>
- {/*Segment_1-Address*/}
<Bubble
row
style={{
@@ -102,7 +101,6 @@ const AddressBubble = ({
</Section>
</Bubble>
- {/*Segment_2-Phone*/}
<Bubble
row
style={{
@@ -131,7 +129,6 @@ const AddressBubble = ({
</Section>
</Bubble>
- {/*Segment_3-Email*/}
<Bubble
row
style={{
@@ -160,7 +157,6 @@ const AddressBubble = ({
</Section>
</Bubble>
- {/*Segment_4-Website*/}
<Bubble
row
style={{
--
GitLab
From 7542980d78c92300a229d17d00f3d3bdf896ac83 Mon Sep 17 00:00:00 2001
From: "p.serrano" <pablo.s.toro@gmail.com>
Date: Wed, 18 Mar 2020 09:23:49 +0100
Subject: [PATCH 06/11] Storyshots updated correctly
---
tests/__snapshots__/storyshots.test.js.snap | 1455 ++++++++++++++++++-
1 file changed, 1439 insertions(+), 16 deletions(-)
diff --git a/tests/__snapshots__/storyshots.test.js.snap b/tests/__snapshots__/storyshots.test.js.snap
index 7637568..3806bd9 100644
--- a/tests/__snapshots__/storyshots.test.js.snap
+++ b/tests/__snapshots__/storyshots.test.js.snap
@@ -12615,6 +12615,1318 @@ exports[`Storyshots Molecules/TriShape TriShape Pin (sizeable) 1`] = `
</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;
+}
+
+.c6 {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-transform: rotate(0deg);
+ -ms-transform: rotate(0deg);
+ transform: rotate(0deg);
+}
+
+.c5 {
+ position: relative;
+}
+
+.c7 {
+ font-family: Linguala-Title,Helvetica,Arial,sans-serif;
+ font-weight: lighter;
+}
+
+.c3 {
+ 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);
+}
+
+.c3 > * {
+ -webkit-flex: 1 auto;
+ -ms-flex: 1 auto;
+ flex: 1 auto;
+}
+
+.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;
+}
+
+.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: Linguala-Title,Helvetica,Arial,sans-serif;
+}
+
+.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;
+}
+
+<div>
+ <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);
+ }",
+ "width": "500px",
+ }
+ }
+ >
+ <div
+ className="c1"
+ style={
+ Object {
+ "margin": "12px",
+ }
+ }
+ >
+ <div
+ alt="1"
+ aria-label="1"
+ className=""
+ role="img"
+ size="2"
+ >
+ <svg
+ fill="none"
+ viewBox="0 0 106 100"
+ width="40px"
+ >
+ <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
+ alt="2"
+ aria-label="2"
+ className=""
+ role="img"
+ size="2"
+ >
+ <svg
+ fill="none"
+ viewBox="0 0 106 100"
+ width="40px"
+ >
+ <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
+ alt="3"
+ aria-label="3"
+ className=""
+ role="img"
+ size="2"
+ >
+ <svg
+ fill="none"
+ viewBox="0 0 106 100"
+ width="40px"
+ >
+ <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
+ alt="4"
+ aria-label="4"
+ className=""
+ role="img"
+ size="2"
+ >
+ <svg
+ fill="none"
+ viewBox="0 0 106 100"
+ width="40px"
+ >
+ <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
+ alt="5"
+ aria-label="5"
+ className=""
+ role="img"
+ size="2"
+ >
+ <svg
+ fill="none"
+ viewBox="0 0 106 100"
+ width="40px"
+ >
+ <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>
+ <p
+ className="c2"
+ style={
+ Object {
+ "color": "#919191",
+ "fontSize": "10px",
+ "margin": "0px 8px",
+ }
+ }
+ >
+ basierend auf
+ 10
+ bewertungen
+ </p>
+ </div>
+ <div
+ className="c3"
+ style={
+ Object {
+ "backgroundColor": "#1CB569",
+ "boxShadow": "none",
+ "color": "white",
+ "height": "35px",
+ "margin": "5px 10px",
+ "padding": "0px",
+ }
+ }
+ >
+ <div
+ className="c4"
+ >
+ <div
+ className="c5"
+ style={
+ Object {
+ "paddingBottom": "5px",
+ }
+ }
+ >
+ <div
+ className="c6"
+ >
+ <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>
+ <p
+ className="c7"
+ style={
+ Object {
+ "margin": "0px",
+ }
+ }
+ >
+ fake street 123, Nowhere, USA
+ </p>
+ </div>
+ </div>
+ <div
+ className="c3"
+ style={
+ Object {
+ "backgroundColor": "#1CB569",
+ "boxShadow": "none",
+ "color": "white",
+ "height": "35px",
+ "margin": "5px 10px",
+ "padding": "0px",
+ }
+ }
+ >
+ <div
+ className="c4"
+ >
+ <div
+ alt="+44 123 123 123"
+ aria-label="+44 123 123 123"
+ className=""
+ role="img"
+ size={1.3}
+ style={
+ Object {
+ "padding": "5px 4px 0px 6px",
+ }
+ }
+ >
+ <svg
+ viewBox="0 0 25 25"
+ width="26px"
+ >
+ <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>
+ <p
+ className="c7"
+ style={
+ Object {
+ "margin": "0px",
+ }
+ }
+ >
+ +44 123 123 123
+ </p>
+ </div>
+ </div>
+ <div
+ className="c3"
+ style={
+ Object {
+ "backgroundColor": "#1CB569",
+ "boxShadow": "none",
+ "color": "white",
+ "height": "35px",
+ "margin": "5px 10px",
+ "padding": "0px",
+ }
+ }
+ >
+ <div
+ className="c4"
+ >
+ <div
+ alt="email@email.com"
+ aria-label="email@email.com"
+ className=""
+ role="img"
+ size={1}
+ style={
+ Object {
+ "padding": "4px 4px 0px 8px",
+ }
+ }
+ >
+ <svg
+ viewBox="0 0 28 28"
+ width="20px"
+ >
+ <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>
+ <p
+ className="c7"
+ style={
+ Object {
+ "margin": "0px 4px",
+ }
+ }
+ >
+ email@email.com
+ </p>
+ </div>
+ </div>
+ <div
+ className="c3"
+ style={
+ Object {
+ "backgroundColor": "#1CB569",
+ "boxShadow": "none",
+ "color": "white",
+ "height": "35px",
+ "margin": "5px 10px",
+ "padding": "0px",
+ }
+ }
+ >
+ <div
+ className="c4"
+ >
+ <div
+ alt="www.website.com"
+ aria-label="www.website.com"
+ className=""
+ role="img"
+ size={1.4}
+ style={
+ Object {
+ "padding": "4px 4px 0px 6px",
+ }
+ }
+ >
+ <svg
+ fill="none"
+ viewBox="0 0 25 25"
+ width="28px"
+ >
+ <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>
+ <p
+ className="c7"
+ style={
+ Object {
+ "margin": "0px",
+ }
+ }
+ >
+ www.website.com
+ </p>
+ </div>
+ </div>
+ <div
+ className="c4"
+ >
+ <div
+ alt="Facebook"
+ aria-label="Facebook"
+ className=""
+ role="img"
+ size={3}
+ style={
+ Object {
+ "color": "#1CB569",
+ "margin": "6px 3px 0px 10px",
+ }
+ }
+ >
+ <svg
+ fill="none"
+ viewBox="0.5 0.5 100 100"
+ width="60px"
+ >
+ <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
+ alt="Instagram"
+ aria-label="Instagram"
+ className=""
+ role="img"
+ size={3}
+ style={
+ Object {
+ "color": "#1CB569",
+ "margin": "6px 4px 0px 9px",
+ }
+ }
+ >
+ <svg
+ fill="none"
+ viewBox="0.5 0.5 100 100"
+ width="60px"
+ >
+ <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
+ alt="Twitter"
+ aria-label="Twitter"
+ className=""
+ role="img"
+ size={3}
+ style={
+ Object {
+ "color": "#1CB569",
+ "margin": "6px 4px 0px 8px",
+ }
+ }
+ >
+ <svg
+ fill="none"
+ viewBox="0.5 0.5 100 100"
+ width="60px"
+ >
+ <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
+ alt="Twitter"
+ aria-label="Twitter"
+ className=""
+ role="img"
+ size={3}
+ style={
+ Object {
+ "color": "#1CB569",
+ "margin": "6px 4px 0px 8px",
+ }
+ }
+ >
+ <svg
+ fill="none"
+ viewBox="0.5 0.5 100 100"
+ width="60px"
+ >
+ <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;
+}
+
+.c6 {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-transform: rotate(0deg);
+ -ms-transform: rotate(0deg);
+ transform: rotate(0deg);
+}
+
+.c5 {
+ position: relative;
+}
+
+.c7 {
+ font-family: Linguala-Title,Helvetica,Arial,sans-serif;
+ font-weight: lighter;
+}
+
+.c3 {
+ 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);
+}
+
+.c3 > * {
+ -webkit-flex: 1 auto;
+ -ms-flex: 1 auto;
+ flex: 1 auto;
+}
+
+.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;
+}
+
+.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: Linguala-Title,Helvetica,Arial,sans-serif;
+}
+
+.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;
+}
+
+<div>
+ <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);
+ }",
+ "width": "500px",
+ }
+ }
+ >
+ <div
+ className="c1"
+ style={
+ Object {
+ "margin": "12px",
+ }
+ }
+ >
+ <div
+ alt="1"
+ aria-label="1"
+ className=""
+ role="img"
+ size="2"
+ >
+ <svg
+ fill="none"
+ viewBox="0 0 106 100"
+ width="40px"
+ >
+ <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
+ alt="2"
+ aria-label="2"
+ className=""
+ role="img"
+ size="2"
+ >
+ <svg
+ fill="none"
+ viewBox="0 0 106 100"
+ width="40px"
+ >
+ <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
+ alt="3"
+ aria-label="3"
+ className=""
+ role="img"
+ size="2"
+ >
+ <svg
+ fill="none"
+ viewBox="0 0 106 100"
+ width="40px"
+ >
+ <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
+ alt="4"
+ aria-label="4"
+ className=""
+ role="img"
+ size="2"
+ >
+ <svg
+ fill="none"
+ viewBox="0 0 106 100"
+ width="40px"
+ >
+ <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
+ alt="5"
+ aria-label="5"
+ className=""
+ role="img"
+ size="2"
+ >
+ <svg
+ fill="none"
+ viewBox="0 0 106 100"
+ width="40px"
+ >
+ <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>
+ <p
+ className="c2"
+ style={
+ Object {
+ "color": "#919191",
+ "fontSize": "10px",
+ "margin": "0px 8px",
+ }
+ }
+ >
+ basierend auf
+ 30
+ bewertungen
+ </p>
+ </div>
+ <div
+ className="c3"
+ style={
+ Object {
+ "backgroundColor": "#1CB569",
+ "boxShadow": "none",
+ "color": "white",
+ "height": "35px",
+ "margin": "5px 10px",
+ "padding": "0px",
+ }
+ }
+ >
+ <div
+ className="c4"
+ >
+ <div
+ className="c5"
+ style={
+ Object {
+ "paddingBottom": "5px",
+ }
+ }
+ >
+ <div
+ className="c6"
+ >
+ <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>
+ <p
+ className="c7"
+ style={
+ Object {
+ "margin": "0px",
+ }
+ }
+ >
+ se4 157 London, United Kingdom
+ </p>
+ </div>
+ </div>
+ <div
+ className="c3"
+ style={
+ Object {
+ "backgroundColor": "#1CB569",
+ "boxShadow": "none",
+ "color": "white",
+ "height": "35px",
+ "margin": "5px 10px",
+ "padding": "0px",
+ }
+ }
+ >
+ <div
+ className="c4"
+ >
+ <div
+ alt="+44 176 234 567"
+ aria-label="+44 176 234 567"
+ className=""
+ role="img"
+ size={1.3}
+ style={
+ Object {
+ "padding": "5px 4px 0px 6px",
+ }
+ }
+ >
+ <svg
+ viewBox="0 0 25 25"
+ width="26px"
+ >
+ <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>
+ <p
+ className="c7"
+ style={
+ Object {
+ "margin": "0px",
+ }
+ }
+ >
+ +44 176 234 567
+ </p>
+ </div>
+ </div>
+ <div
+ className="c3"
+ style={
+ Object {
+ "backgroundColor": "#1CB569",
+ "boxShadow": "none",
+ "color": "white",
+ "height": "35px",
+ "margin": "5px 10px",
+ "padding": "0px",
+ }
+ }
+ >
+ <div
+ className="c4"
+ >
+ <div
+ alt="translate@globalvoices.co.uk"
+ aria-label="translate@globalvoices.co.uk"
+ className=""
+ role="img"
+ size={1}
+ style={
+ Object {
+ "padding": "4px 4px 0px 8px",
+ }
+ }
+ >
+ <svg
+ viewBox="0 0 28 28"
+ width="20px"
+ >
+ <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>
+ <p
+ className="c7"
+ style={
+ Object {
+ "margin": "0px 4px",
+ }
+ }
+ >
+ translate@globalvoices.co.uk
+ </p>
+ </div>
+ </div>
+ <div
+ className="c3"
+ style={
+ Object {
+ "backgroundColor": "#1CB569",
+ "boxShadow": "none",
+ "color": "white",
+ "height": "35px",
+ "margin": "5px 10px",
+ "padding": "0px",
+ }
+ }
+ >
+ <div
+ className="c4"
+ >
+ <div
+ alt="www.globalvoices.co.uk"
+ aria-label="www.globalvoices.co.uk"
+ className=""
+ role="img"
+ size={1.4}
+ style={
+ Object {
+ "padding": "4px 4px 0px 6px",
+ }
+ }
+ >
+ <svg
+ fill="none"
+ viewBox="0 0 25 25"
+ width="28px"
+ >
+ <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>
+ <p
+ className="c7"
+ style={
+ Object {
+ "margin": "0px",
+ }
+ }
+ >
+ www.globalvoices.co.uk
+ </p>
+ </div>
+ </div>
+ <div
+ className="c4"
+ >
+ <div
+ alt="Facebook"
+ aria-label="Facebook"
+ className=""
+ role="img"
+ size={3}
+ style={
+ Object {
+ "color": "#1CB569",
+ "margin": "6px 3px 0px 10px",
+ }
+ }
+ >
+ <svg
+ fill="none"
+ viewBox="0.5 0.5 100 100"
+ width="60px"
+ >
+ <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
+ alt="Instagram"
+ aria-label="Instagram"
+ className=""
+ role="img"
+ size={3}
+ style={
+ Object {
+ "color": "#1CB569",
+ "margin": "6px 4px 0px 9px",
+ }
+ }
+ >
+ <svg
+ fill="none"
+ viewBox="0.5 0.5 100 100"
+ width="60px"
+ >
+ <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
+ alt="Twitter"
+ aria-label="Twitter"
+ className=""
+ role="img"
+ size={3}
+ style={
+ Object {
+ "color": "#1CB569",
+ "margin": "6px 4px 0px 8px",
+ }
+ }
+ >
+ <svg
+ fill="none"
+ viewBox="0.5 0.5 100 100"
+ width="60px"
+ >
+ <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
+ alt="Twitter"
+ aria-label="Twitter"
+ className=""
+ role="img"
+ size={3}
+ style={
+ Object {
+ "color": "#1CB569",
+ "margin": "6px 4px 0px 8px",
+ }
+ }
+ >
+ <svg
+ fill="none"
+ viewBox="0.5 0.5 100 100"
+ width="60px"
+ >
+ <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/Menu Menu 1`] = `
.c0 {
display: block;
@@ -12786,6 +14098,14 @@ exports[`Storyshots Organisms/Menu Menu 1`] = `
`;
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;
@@ -12810,14 +14130,6 @@ exports[`Storyshots Organisms/ProfileBubble ProfileBubble/Luigi 1`] = `
line-height: 1.55em;
}
-.c13 {
- font-size: 1rem;
- margin: 0.5rem auto;
- text-align: left;
- max-width: 240px;
- line-height: 1.55em;
-}
-
.c15 {
font-size: 1rem;
margin: 0.5rem auto;
@@ -13462,6 +14774,14 @@ exports[`Storyshots Organisms/ProfileBubble ProfileBubble/Luigi 1`] = `
`;
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;
@@ -13486,14 +14806,6 @@ exports[`Storyshots Organisms/ProfileBubble ProfileBubble/default 1`] = `
line-height: 1.55em;
}
-.c13 {
- font-size: 1rem;
- margin: 0.5rem auto;
- text-align: left;
- max-width: 240px;
- line-height: 1.55em;
-}
-
.c15 {
font-size: 1rem;
margin: 0.5rem auto;
@@ -14128,3 +15440,114 @@ exports[`Storyshots Organisms/ProfileBubble ProfileBubble/default 1`] = `
</div>
</div>
`;
+
+exports[`Storyshots Organisms/SubHeaderHor Sub Header Hor 1`] = `
+.c0 {
+ display: inline-block;
+ position: relative;
+ text-transform: lowercase;
+ font-family: Linguala-Title,Helvetica,Arial,sans-serif;
+}
+
+.c1 {
+ -webkit-box-pack: justify;
+ -webkit-justify-content: space-between;
+ -ms-flex-pack: justify;
+ justify-content: space-between;
+ background-color: white;
+ border-radius: 100px;
+ 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>
+ <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>
+</div>
+`;
--
GitLab
From 6985ddce63751d26f877a1c4dd4b60e7a2a82bee Mon Sep 17 00:00:00 2001
From: "p.serrano" <pablo.s.toro@gmail.com>
Date: Wed, 18 Mar 2020 10:46:19 +0100
Subject: [PATCH 07/11] Defaults corrected
---
src/lib/components/organisms/AddressBubble.js | 12 +++---
tests/__snapshots__/storyshots.test.js.snap | 42 ++++++++++++-------
2 files changed, 32 insertions(+), 22 deletions(-)
diff --git a/src/lib/components/organisms/AddressBubble.js b/src/lib/components/organisms/AddressBubble.js
index 9a31aa0..d34dc55 100644
--- a/src/lib/components/organisms/AddressBubble.js
+++ b/src/lib/components/organisms/AddressBubble.js
@@ -37,12 +37,12 @@ const FlexDown = styled.div`
`
const AddressBubble = ({
- rating = 5,
- opinions = '10',
- address = 'fake street 123, Nowhere, USA',
- telephone = '+44 123 123 123',
- email = 'email@email.com',
- website = 'www.website.com',
+ rating = 0,
+ opinions = '0',
+ address = 'n/a',
+ telephone = 'n/a',
+ email = 'n/a',
+ website = 'n/a',
}) => (
<Bubble
shadow={'low'}
diff --git a/tests/__snapshots__/storyshots.test.js.snap b/tests/__snapshots__/storyshots.test.js.snap
index 3806bd9..ecb1877 100644
--- a/tests/__snapshots__/storyshots.test.js.snap
+++ b/tests/__snapshots__/storyshots.test.js.snap
@@ -12800,8 +12800,10 @@ exports[`Storyshots Organisms/AddressBubble AddressBubble/default 1`] = `
width="40px"
>
<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"
+ 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>
@@ -12818,8 +12820,10 @@ exports[`Storyshots Organisms/AddressBubble AddressBubble/default 1`] = `
width="40px"
>
<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"
+ 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>
@@ -12836,8 +12840,10 @@ exports[`Storyshots Organisms/AddressBubble AddressBubble/default 1`] = `
width="40px"
>
<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"
+ 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>
@@ -12854,8 +12860,10 @@ exports[`Storyshots Organisms/AddressBubble AddressBubble/default 1`] = `
width="40px"
>
<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"
+ 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>
@@ -12872,8 +12880,10 @@ exports[`Storyshots Organisms/AddressBubble AddressBubble/default 1`] = `
width="40px"
>
<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"
+ 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>
@@ -12888,7 +12898,7 @@ exports[`Storyshots Organisms/AddressBubble AddressBubble/default 1`] = `
}
>
basierend auf
- 10
+ 0
bewertungen
</p>
</div>
@@ -12941,7 +12951,7 @@ exports[`Storyshots Organisms/AddressBubble AddressBubble/default 1`] = `
}
}
>
- fake street 123, Nowhere, USA
+ n/a
</p>
</div>
</div>
@@ -12962,8 +12972,8 @@ exports[`Storyshots Organisms/AddressBubble AddressBubble/default 1`] = `
className="c4"
>
<div
- alt="+44 123 123 123"
- aria-label="+44 123 123 123"
+ alt="n/a"
+ aria-label="n/a"
className=""
role="img"
size={1.3}
@@ -13003,7 +13013,7 @@ exports[`Storyshots Organisms/AddressBubble AddressBubble/default 1`] = `
}
}
>
- +44 123 123 123
+ n/a
</p>
</div>
</div>
@@ -13024,8 +13034,8 @@ exports[`Storyshots Organisms/AddressBubble AddressBubble/default 1`] = `
className="c4"
>
<div
- alt="email@email.com"
- aria-label="email@email.com"
+ alt="n/a"
+ aria-label="n/a"
className=""
role="img"
size={1}
@@ -13064,7 +13074,7 @@ exports[`Storyshots Organisms/AddressBubble AddressBubble/default 1`] = `
}
}
>
- email@email.com
+ n/a
</p>
</div>
</div>
@@ -13085,8 +13095,8 @@ exports[`Storyshots Organisms/AddressBubble AddressBubble/default 1`] = `
className="c4"
>
<div
- alt="www.website.com"
- aria-label="www.website.com"
+ alt="n/a"
+ aria-label="n/a"
className=""
role="img"
size={1.4}
@@ -13152,7 +13162,7 @@ exports[`Storyshots Organisms/AddressBubble AddressBubble/default 1`] = `
}
}
>
- www.website.com
+ n/a
</p>
</div>
</div>
--
GitLab
From 7f785bec7228b48b409acc635d44aded0f5bfaef Mon Sep 17 00:00:00 2001
From: "p.serrano" <pablo.s.toro@gmail.com>
Date: Wed, 18 Mar 2020 13:04:38 +0100
Subject: [PATCH 08/11] Less hard coded items
---
src/lib/components/organisms/AddressBubble.js | 166 +++--
tests/__snapshots__/storyshots.test.js.snap | 624 ++++++++----------
2 files changed, 355 insertions(+), 435 deletions(-)
diff --git a/src/lib/components/organisms/AddressBubble.js b/src/lib/components/organisms/AddressBubble.js
index d34dc55..4cab4c4 100644
--- a/src/lib/components/organisms/AddressBubble.js
+++ b/src/lib/components/organisms/AddressBubble.js
@@ -17,7 +17,17 @@ import Subtitle from '../atoms/Subtitle.js'
import Text from '../atoms/Text.js'
const heightSegment = '35px'
-const green = '#1CB569'
+const width = '500px'
+const smallfont = '10px'
+
+const white = 'white'
+const gray = '#919191'
+
+const GreenIcon = styled.div`
+ color: ${themeGet('colors.primary')};
+ display: flex;
+ flex-direction: row;
+`
const Section = styled.div`
display: flex;
@@ -29,12 +39,30 @@ const Section = styled.div`
flex-direction: row;
margin: 0;
font-family: ${themeGet('fonts.title')};
+ color: ${themeGet('fonts.primaryColor')};
`
const FlexDown = styled.div`
display: flex;
align-items: flex-end;
`
+const Bubblet = styled.div`
+ background-color: ${themeGet('colors.primary')};
+ padding: 0px;
+ display: flex;
+ align-items: ${({ stretch }) => (stretch ? 'stretch' : 'center')};
+ align-content: stretch;
+ justify-content: space-between;
+ flex-direction: row;
+ margin: 5px 10px;
+ height: ${heightSegment};
+ border-radius: ${themeGet('border.radius')};
+ border-width: 0;
+ border-style: solid;
+ > * {
+ flex: 1 auto;
+ }
+`
const AddressBubble = ({
rating = 0,
@@ -49,11 +77,9 @@ const AddressBubble = ({
column
stretch
style={{
- margin: `${themeGet('spacing.medium')} ${themeGet('spacing.large')}`,
- width: '500px',
+ width: `${width}`,
}}
>
- {/* Opinions */}
<FlexDown
style={{
margin: '12px',
@@ -62,8 +88,8 @@ const AddressBubble = ({
<FiveStarRating rating={rating} size="2" />
<Text
style={{
- color: '#919191',
- fontSize: '10px',
+ color: `${gray}`,
+ fontSize: `${smallfont}`,
margin: '0px 8px',
}}
>
@@ -71,22 +97,12 @@ const AddressBubble = ({
</Text>
</FlexDown>
- <Bubble
- row
- style={{
- backgroundColor: `${green}`,
- padding: '0px',
- margin: '5px 10px',
- height: `${heightSegment}`,
- boxShadow: 'none',
- color: 'white',
- }}
- >
+ <Bubblet>
<Section>
<PinShape
size={1.8}
full
- shapeColor="white"
+ shapeColor={white}
style={{
paddingBottom: '5px',
}}
@@ -99,19 +115,9 @@ const AddressBubble = ({
{address}
</Subtitle>
</Section>
- </Bubble>
+ </Bubblet>
- <Bubble
- row
- style={{
- backgroundColor: `${green}`,
- padding: '0px',
- margin: '5px 10px',
- height: `${heightSegment}`,
- boxShadow: 'none',
- color: 'white',
- }}
- >
+ <Bubblet>
<Section>
<Icon
icon={Phone}
@@ -127,19 +133,9 @@ const AddressBubble = ({
{telephone}
</Subtitle>
</Section>
- </Bubble>
+ </Bubblet>
- <Bubble
- row
- style={{
- backgroundColor: `${green}`,
- padding: '0px',
- margin: '5px 10px',
- height: `${heightSegment}`,
- boxShadow: 'none',
- color: 'white',
- }}
- >
+ <Bubblet>
<Section>
<Icon
icon={Email}
@@ -155,19 +151,9 @@ const AddressBubble = ({
{email}
</Subtitle>
</Section>
- </Bubble>
+ </Bubblet>
- <Bubble
- row
- style={{
- backgroundColor: `${green}`,
- padding: '0px',
- margin: '5px 10px',
- height: `${heightSegment}`,
- boxShadow: 'none',
- color: 'white',
- }}
- >
+ <Bubblet>
<Section>
<Icon
icon={Worldwideweb}
@@ -183,44 +169,42 @@ const AddressBubble = ({
{website}
</Subtitle>
</Section>
- </Bubble>
+ </Bubblet>
<Section>
- <Icon
- icon={Facebook}
- alt="Facebook"
- size={3}
- style={{
- color: `${green}`,
- margin: '6px 3px 0px 10px',
- }}
- />
- <Icon
- icon={Instagram}
- alt="Instagram"
- size={3}
- style={{
- color: `${green}`,
- margin: '6px 4px 0px 9px',
- }}
- />
- <Icon
- icon={Twitter}
- alt="Twitter"
- size={3}
- style={{
- color: `${green}`,
- margin: '6px 4px 0px 8px',
- }}
- />
- <Icon
- icon={Twitter}
- alt="Twitter"
- size={3}
- style={{
- color: `${green}`,
- margin: '6px 4px 0px 8px',
- }}
- />
+ <GreenIcon>
+ <Icon
+ icon={Facebook}
+ alt="Facebook"
+ size={3}
+ style={{
+ margin: '6px 3px 0px 10px',
+ }}
+ />
+ <Icon
+ icon={Instagram}
+ alt="Instagram"
+ size={3}
+ style={{
+ margin: '6px 4px 0px 9px',
+ }}
+ />
+ <Icon
+ icon={Twitter}
+ alt="Twitter"
+ size={3}
+ style={{
+ margin: '6px 4px 0px 8px',
+ }}
+ />
+ <Icon
+ icon={Twitter}
+ alt="LinkedIn"
+ size={3}
+ style={{
+ margin: '6px 4px 0px 8px',
+ }}
+ />
+ </GreenIcon>
</Section>
</Bubble>
)
diff --git a/tests/__snapshots__/storyshots.test.js.snap b/tests/__snapshots__/storyshots.test.js.snap
index ecb1877..4eae080 100644
--- a/tests/__snapshots__/storyshots.test.js.snap
+++ b/tests/__snapshots__/storyshots.test.js.snap
@@ -12643,39 +12643,6 @@ exports[`Storyshots Organisms/AddressBubble AddressBubble/default 1`] = `
font-weight: lighter;
}
-.c3 {
- 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);
-}
-
-.c3 > * {
- -webkit-flex: 1 auto;
- -ms-flex: 1 auto;
- flex: 1 auto;
-}
-
.c0 {
background-color: white;
padding: 1rem;
@@ -12709,6 +12676,17 @@ exports[`Storyshots Organisms/AddressBubble AddressBubble/default 1`] = `
flex: 1 auto;
}
+.c8 {
+ color: #1CB569;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-flex-direction: row;
+ -ms-flex-direction: row;
+ flex-direction: row;
+}
+
.c4 {
display: -webkit-box;
display: -webkit-flex;
@@ -12730,6 +12708,7 @@ exports[`Storyshots Organisms/AddressBubble AddressBubble/default 1`] = `
flex-direction: row;
margin: 0;
font-family: Linguala-Title,Helvetica,Arial,sans-serif;
+ color: white;
}
.c1 {
@@ -12743,6 +12722,40 @@ exports[`Storyshots Organisms/AddressBubble AddressBubble/default 1`] = `
align-items: flex-end;
}
+.c3 {
+ background-color: #1CB569;
+ padding: 0px;
+ 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;
+ margin: 5px 10px;
+ height: 35px;
+ border-radius: 3rem;
+ border-width: 0;
+ border-style: solid;
+}
+
+.c3 > * {
+ -webkit-flex: 1 auto;
+ -ms-flex: 1 auto;
+ flex: 1 auto;
+}
+
<div>
<div
style={
@@ -12770,11 +12783,6 @@ exports[`Storyshots Organisms/AddressBubble AddressBubble/default 1`] = `
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);
- }",
"width": "500px",
}
}
@@ -12904,16 +12912,6 @@ exports[`Storyshots Organisms/AddressBubble AddressBubble/default 1`] = `
</div>
<div
className="c3"
- style={
- Object {
- "backgroundColor": "#1CB569",
- "boxShadow": "none",
- "color": "white",
- "height": "35px",
- "margin": "5px 10px",
- "padding": "0px",
- }
- }
>
<div
className="c4"
@@ -12957,16 +12955,6 @@ exports[`Storyshots Organisms/AddressBubble AddressBubble/default 1`] = `
</div>
<div
className="c3"
- style={
- Object {
- "backgroundColor": "#1CB569",
- "boxShadow": "none",
- "color": "white",
- "height": "35px",
- "margin": "5px 10px",
- "padding": "0px",
- }
- }
>
<div
className="c4"
@@ -13019,16 +13007,6 @@ exports[`Storyshots Organisms/AddressBubble AddressBubble/default 1`] = `
</div>
<div
className="c3"
- style={
- Object {
- "backgroundColor": "#1CB569",
- "boxShadow": "none",
- "color": "white",
- "height": "35px",
- "margin": "5px 10px",
- "padding": "0px",
- }
- }
>
<div
className="c4"
@@ -13080,16 +13058,6 @@ exports[`Storyshots Organisms/AddressBubble AddressBubble/default 1`] = `
</div>
<div
className="c3"
- style={
- Object {
- "backgroundColor": "#1CB569",
- "boxShadow": "none",
- "color": "white",
- "height": "35px",
- "margin": "5px 10px",
- "padding": "0px",
- }
- }
>
<div
className="c4"
@@ -13170,108 +13138,108 @@ exports[`Storyshots Organisms/AddressBubble AddressBubble/default 1`] = `
className="c4"
>
<div
- alt="Facebook"
- aria-label="Facebook"
- className=""
- role="img"
- size={3}
- style={
- Object {
- "color": "#1CB569",
- "margin": "6px 3px 0px 10px",
- }
- }
+ className="c8"
>
- <svg
- fill="none"
- viewBox="0.5 0.5 100 100"
- width="60px"
+ <div
+ alt="Facebook"
+ aria-label="Facebook"
+ className=""
+ role="img"
+ size={3}
+ style={
+ Object {
+ "margin": "6px 3px 0px 10px",
+ }
+ }
>
- <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
- alt="Instagram"
- aria-label="Instagram"
- className=""
- role="img"
- size={3}
- style={
- Object {
- "color": "#1CB569",
- "margin": "6px 4px 0px 9px",
+ <svg
+ fill="none"
+ viewBox="0.5 0.5 100 100"
+ width="60px"
+ >
+ <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
+ alt="Instagram"
+ aria-label="Instagram"
+ className=""
+ role="img"
+ size={3}
+ style={
+ Object {
+ "margin": "6px 4px 0px 9px",
+ }
}
- }
- >
- <svg
- fill="none"
- viewBox="0.5 0.5 100 100"
- width="60px"
>
- <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
- alt="Twitter"
- aria-label="Twitter"
- className=""
- role="img"
- size={3}
- style={
- Object {
- "color": "#1CB569",
- "margin": "6px 4px 0px 8px",
+ <svg
+ fill="none"
+ viewBox="0.5 0.5 100 100"
+ width="60px"
+ >
+ <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
+ alt="Twitter"
+ aria-label="Twitter"
+ className=""
+ role="img"
+ size={3}
+ style={
+ Object {
+ "margin": "6px 4px 0px 8px",
+ }
}
- }
- >
- <svg
- fill="none"
- viewBox="0.5 0.5 100 100"
- width="60px"
>
- <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
- alt="Twitter"
- aria-label="Twitter"
- className=""
- role="img"
- size={3}
- style={
- Object {
- "color": "#1CB569",
- "margin": "6px 4px 0px 8px",
+ <svg
+ fill="none"
+ viewBox="0.5 0.5 100 100"
+ width="60px"
+ >
+ <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
+ alt="LinkedIn"
+ aria-label="LinkedIn"
+ className=""
+ role="img"
+ size={3}
+ style={
+ Object {
+ "margin": "6px 4px 0px 8px",
+ }
}
- }
- >
- <svg
- fill="none"
- viewBox="0.5 0.5 100 100"
- width="60px"
>
- <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>
+ <svg
+ fill="none"
+ viewBox="0.5 0.5 100 100"
+ width="60px"
+ >
+ <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>
@@ -13308,39 +13276,6 @@ exports[`Storyshots Organisms/AddressBubble AddressBubble/example 1`] = `
font-weight: lighter;
}
-.c3 {
- 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);
-}
-
-.c3 > * {
- -webkit-flex: 1 auto;
- -ms-flex: 1 auto;
- flex: 1 auto;
-}
-
.c0 {
background-color: white;
padding: 1rem;
@@ -13374,6 +13309,17 @@ exports[`Storyshots Organisms/AddressBubble AddressBubble/example 1`] = `
flex: 1 auto;
}
+.c8 {
+ color: #1CB569;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-flex-direction: row;
+ -ms-flex-direction: row;
+ flex-direction: row;
+}
+
.c4 {
display: -webkit-box;
display: -webkit-flex;
@@ -13395,6 +13341,7 @@ exports[`Storyshots Organisms/AddressBubble AddressBubble/example 1`] = `
flex-direction: row;
margin: 0;
font-family: Linguala-Title,Helvetica,Arial,sans-serif;
+ color: white;
}
.c1 {
@@ -13408,6 +13355,40 @@ exports[`Storyshots Organisms/AddressBubble AddressBubble/example 1`] = `
align-items: flex-end;
}
+.c3 {
+ background-color: #1CB569;
+ padding: 0px;
+ 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;
+ margin: 5px 10px;
+ height: 35px;
+ border-radius: 3rem;
+ border-width: 0;
+ border-style: solid;
+}
+
+.c3 > * {
+ -webkit-flex: 1 auto;
+ -ms-flex: 1 auto;
+ flex: 1 auto;
+}
+
<div>
<div
style={
@@ -13435,11 +13416,6 @@ exports[`Storyshots Organisms/AddressBubble AddressBubble/example 1`] = `
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);
- }",
"width": "500px",
}
}
@@ -13561,16 +13537,6 @@ exports[`Storyshots Organisms/AddressBubble AddressBubble/example 1`] = `
</div>
<div
className="c3"
- style={
- Object {
- "backgroundColor": "#1CB569",
- "boxShadow": "none",
- "color": "white",
- "height": "35px",
- "margin": "5px 10px",
- "padding": "0px",
- }
- }
>
<div
className="c4"
@@ -13614,16 +13580,6 @@ exports[`Storyshots Organisms/AddressBubble AddressBubble/example 1`] = `
</div>
<div
className="c3"
- style={
- Object {
- "backgroundColor": "#1CB569",
- "boxShadow": "none",
- "color": "white",
- "height": "35px",
- "margin": "5px 10px",
- "padding": "0px",
- }
- }
>
<div
className="c4"
@@ -13676,16 +13632,6 @@ exports[`Storyshots Organisms/AddressBubble AddressBubble/example 1`] = `
</div>
<div
className="c3"
- style={
- Object {
- "backgroundColor": "#1CB569",
- "boxShadow": "none",
- "color": "white",
- "height": "35px",
- "margin": "5px 10px",
- "padding": "0px",
- }
- }
>
<div
className="c4"
@@ -13737,16 +13683,6 @@ exports[`Storyshots Organisms/AddressBubble AddressBubble/example 1`] = `
</div>
<div
className="c3"
- style={
- Object {
- "backgroundColor": "#1CB569",
- "boxShadow": "none",
- "color": "white",
- "height": "35px",
- "margin": "5px 10px",
- "padding": "0px",
- }
- }
>
<div
className="c4"
@@ -13827,108 +13763,108 @@ exports[`Storyshots Organisms/AddressBubble AddressBubble/example 1`] = `
className="c4"
>
<div
- alt="Facebook"
- aria-label="Facebook"
- className=""
- role="img"
- size={3}
- style={
- Object {
- "color": "#1CB569",
- "margin": "6px 3px 0px 10px",
- }
- }
+ className="c8"
>
- <svg
- fill="none"
- viewBox="0.5 0.5 100 100"
- width="60px"
+ <div
+ alt="Facebook"
+ aria-label="Facebook"
+ className=""
+ role="img"
+ size={3}
+ style={
+ Object {
+ "margin": "6px 3px 0px 10px",
+ }
+ }
>
- <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
- alt="Instagram"
- aria-label="Instagram"
- className=""
- role="img"
- size={3}
- style={
- Object {
- "color": "#1CB569",
- "margin": "6px 4px 0px 9px",
+ <svg
+ fill="none"
+ viewBox="0.5 0.5 100 100"
+ width="60px"
+ >
+ <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
+ alt="Instagram"
+ aria-label="Instagram"
+ className=""
+ role="img"
+ size={3}
+ style={
+ Object {
+ "margin": "6px 4px 0px 9px",
+ }
}
- }
- >
- <svg
- fill="none"
- viewBox="0.5 0.5 100 100"
- width="60px"
>
- <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
- alt="Twitter"
- aria-label="Twitter"
- className=""
- role="img"
- size={3}
- style={
- Object {
- "color": "#1CB569",
- "margin": "6px 4px 0px 8px",
+ <svg
+ fill="none"
+ viewBox="0.5 0.5 100 100"
+ width="60px"
+ >
+ <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
+ alt="Twitter"
+ aria-label="Twitter"
+ className=""
+ role="img"
+ size={3}
+ style={
+ Object {
+ "margin": "6px 4px 0px 8px",
+ }
}
- }
- >
- <svg
- fill="none"
- viewBox="0.5 0.5 100 100"
- width="60px"
>
- <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
- alt="Twitter"
- aria-label="Twitter"
- className=""
- role="img"
- size={3}
- style={
- Object {
- "color": "#1CB569",
- "margin": "6px 4px 0px 8px",
+ <svg
+ fill="none"
+ viewBox="0.5 0.5 100 100"
+ width="60px"
+ >
+ <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
+ alt="LinkedIn"
+ aria-label="LinkedIn"
+ className=""
+ role="img"
+ size={3}
+ style={
+ Object {
+ "margin": "6px 4px 0px 8px",
+ }
}
- }
- >
- <svg
- fill="none"
- viewBox="0.5 0.5 100 100"
- width="60px"
>
- <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>
+ <svg
+ fill="none"
+ viewBox="0.5 0.5 100 100"
+ width="60px"
+ >
+ <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>
--
GitLab
From b4a206b164809278da900f6c529972b7c86857d7 Mon Sep 17 00:00:00 2001
From: Pablo Serrano <pablo.s.toro@gmail.com>
Date: Tue, 24 Mar 2020 15:51:53 +0100
Subject: [PATCH 09/11] access to themeGet alterations
---
src/lib/components/organisms/AddressBubble.js | 196 ++-
tests/__snapshots__/storyshots.test.js.snap | 1164 +++++++++--------
2 files changed, 688 insertions(+), 672 deletions(-)
diff --git a/src/lib/components/organisms/AddressBubble.js b/src/lib/components/organisms/AddressBubble.js
index 4cab4c4..63bfe7f 100644
--- a/src/lib/components/organisms/AddressBubble.js
+++ b/src/lib/components/organisms/AddressBubble.js
@@ -13,20 +13,25 @@ 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 Subtitle from '../atoms/Subtitle.js'
import Text from '../atoms/Text.js'
-const heightSegment = '35px'
const width = '500px'
-const smallfont = '10px'
-const white = 'white'
-const gray = '#919191'
+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`
@@ -42,20 +47,26 @@ const Section = styled.div`
color: ${themeGet('fonts.primaryColor')};
`
-const FlexDown = styled.div`
- display: flex;
- align-items: flex-end;
+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 Bubblet = styled.div`
background-color: ${themeGet('colors.primary')};
- padding: 0px;
display: flex;
- align-items: ${({ stretch }) => (stretch ? 'stretch' : 'center')};
align-content: stretch;
justify-content: space-between;
flex-direction: row;
- margin: 5px 10px;
- height: ${heightSegment};
+ margin: 0 ${themeGet('spacing.small')} ${themeGet('spacing.small')}
+ ${themeGet('spacing.small')};
+ padding-left: ${themeGet('spacing.small')};
+ padding-bottom: 0px;
+ height: ${themeGet('spacing.large')};
border-radius: ${themeGet('border.radius')};
border-width: 0;
border-style: solid;
@@ -80,130 +91,95 @@ const AddressBubble = ({
width: `${width}`,
}}
>
- <FlexDown
- style={{
- margin: '12px',
- }}
- >
+ <FlexDown>
<FiveStarRating rating={rating} size="2" />
- <Text
- style={{
- color: `${gray}`,
- fontSize: `${smallfont}`,
- margin: '0px 8px',
- }}
- >
+ <Text style={{ margin: '0px' }}>
basierend auf {opinions} bewertungen
</Text>
</FlexDown>
<Bubblet>
<Section>
- <PinShape
- size={1.8}
- full
- shapeColor={white}
- style={{
- paddingBottom: '5px',
- }}
- ></PinShape>
- <Subtitle
- style={{
- margin: '0px',
- }}
- >
- {address}
- </Subtitle>
+ <Item>
+ <PinShape
+ size={1.8}
+ full
+ shapeColor={'white'}
+ style={{
+ paddingBottom: '0.8rem',
+ }}
+ ></PinShape>
+ </Item>
+ <Item2>
+ <Text
+ style={{
+ margin: '0px',
+ }}
+ >
+ {address}
+ </Text>
+ </Item2>
</Section>
</Bubblet>
<Bubblet>
<Section>
- <Icon
- icon={Phone}
- alt={telephone}
- size={1.3}
- style={{ padding: '5px 4px 0px 6px' }}
- />
- <Subtitle
- style={{
- margin: '0px',
- }}
- >
- {telephone}
- </Subtitle>
+ <Item>
+ <Icon icon={Phone} alt={telephone} size={1.3} />
+ </Item>
+ <Item2>
+ <Text
+ style={{
+ margin: '0px',
+ }}
+ >
+ {telephone}
+ </Text>
+ </Item2>
</Section>
</Bubblet>
<Bubblet>
<Section>
- <Icon
- icon={Email}
- alt={email}
- size={1}
- style={{ padding: '4px 4px 0px 8px' }}
- />
- <Subtitle
- style={{
- margin: '0px 4px',
- }}
- >
- {email}
- </Subtitle>
+ <Item>
+ <Icon icon={Email} alt={email} size={1} />
+ </Item>
+ <Item2>
+ <Text>{email}</Text>
+ </Item2>
</Section>
</Bubblet>
<Bubblet>
<Section>
- <Icon
- icon={Worldwideweb}
- alt={website}
- size={1.4}
- style={{ padding: '4px 4px 0px 6px' }}
- />
- <Subtitle
- style={{
- margin: '0px',
- }}
- >
- {website}
- </Subtitle>
+ <Item>
+ <Icon icon={Worldwideweb} alt={website} size={1.4} />
+ </Item>
+ <Item2>
+ <Text
+ style={{
+ margin: '0px',
+ }}
+ >
+ {website}
+ </Text>
+ </Item2>
</Section>
</Bubblet>
<Section>
<GreenIcon>
- <Icon
- icon={Facebook}
- alt="Facebook"
- size={3}
- style={{
- margin: '6px 3px 0px 10px',
- }}
- />
- <Icon
- icon={Instagram}
- alt="Instagram"
- size={3}
- style={{
- margin: '6px 4px 0px 9px',
- }}
- />
- <Icon
- icon={Twitter}
- alt="Twitter"
- size={3}
- style={{
- margin: '6px 4px 0px 8px',
- }}
- />
- <Icon
- icon={Twitter}
- alt="LinkedIn"
- size={3}
- style={{
- margin: '6px 4px 0px 8px',
- }}
- />
+ <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>
diff --git a/tests/__snapshots__/storyshots.test.js.snap b/tests/__snapshots__/storyshots.test.js.snap
index 4eae080..769b026 100644
--- a/tests/__snapshots__/storyshots.test.js.snap
+++ b/tests/__snapshots__/storyshots.test.js.snap
@@ -12624,7 +12624,7 @@ exports[`Storyshots Organisms/AddressBubble AddressBubble/default 1`] = `
line-height: 1.55em;
}
-.c6 {
+.c7 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
@@ -12634,15 +12634,10 @@ exports[`Storyshots Organisms/AddressBubble AddressBubble/default 1`] = `
transform: rotate(0deg);
}
-.c5 {
+.c6 {
position: relative;
}
-.c7 {
- font-family: Linguala-Title,Helvetica,Arial,sans-serif;
- font-weight: lighter;
-}
-
.c0 {
background-color: white;
padding: 1rem;
@@ -12676,7 +12671,25 @@ exports[`Storyshots Organisms/AddressBubble AddressBubble/default 1`] = `
flex: 1 auto;
}
-.c8 {
+.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;
@@ -12685,6 +12698,13 @@ exports[`Storyshots Organisms/AddressBubble AddressBubble/default 1`] = `
-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 {
@@ -12711,28 +12731,25 @@ exports[`Storyshots Organisms/AddressBubble AddressBubble/default 1`] = `
color: white;
}
-.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;
+.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;
}
.c3 {
background-color: #1CB569;
- padding: 0px;
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;
@@ -12743,8 +12760,10 @@ exports[`Storyshots Organisms/AddressBubble AddressBubble/default 1`] = `
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
- margin: 5px 10px;
- height: 35px;
+ margin: 0 0.5rem 0.5rem 0.5rem;
+ padding-left: 0.5rem;
+ padding-bottom: 0px;
+ height: 2rem;
border-radius: 3rem;
border-width: 0;
border-style: solid;
@@ -12789,11 +12808,6 @@ exports[`Storyshots Organisms/AddressBubble AddressBubble/default 1`] = `
>
<div
className="c1"
- style={
- Object {
- "margin": "12px",
- }
- }
>
<div
alt="1"
@@ -12899,9 +12913,7 @@ exports[`Storyshots Organisms/AddressBubble AddressBubble/default 1`] = `
className="c2"
style={
Object {
- "color": "#919191",
- "fontSize": "10px",
- "margin": "0px 8px",
+ "margin": "0px",
}
}
>
@@ -12918,39 +12930,47 @@ exports[`Storyshots Organisms/AddressBubble AddressBubble/default 1`] = `
>
<div
className="c5"
- style={
- Object {
- "paddingBottom": "5px",
- }
- }
>
<div
className="c6"
+ style={
+ Object {
+ "paddingBottom": "0.8rem",
+ }
+ }
>
- <svg
- height="36px"
- version="1.1"
- viewBox="0 0 1000 1000"
- width="36px"
- xmlns="http://www.w3.org/2000/svg"
+ <div
+ className="c7"
>
- <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>
+ <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>
- <p
- className="c7"
- style={
- Object {
- "margin": "0px",
- }
- }
+ <div
+ className="c8"
>
- n/a
- </p>
+ <p
+ className="c2"
+ style={
+ Object {
+ "margin": "0px",
+ }
+ }
+ >
+ n/a
+ </p>
+ </div>
</div>
</div>
<div
@@ -12960,49 +12980,52 @@ exports[`Storyshots Organisms/AddressBubble AddressBubble/default 1`] = `
className="c4"
>
<div
- alt="n/a"
- aria-label="n/a"
- className=""
- role="img"
- size={1.3}
- style={
- Object {
- "padding": "5px 4px 0px 6px",
- }
- }
+ className="c5"
>
- <svg
- viewBox="0 0 25 25"
- width="26px"
+ <div
+ alt="n/a"
+ aria-label="n/a"
+ className=""
+ role="img"
+ size={1.3}
>
- <g
- fill="none"
- fillRule="evenodd"
+ <svg
+ viewBox="0 0 25 25"
+ width="26px"
>
- <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>
+ <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>
- <p
- className="c7"
- style={
- Object {
- "margin": "0px",
- }
- }
+ <div
+ className="c8"
>
- n/a
- </p>
+ <p
+ className="c2"
+ style={
+ Object {
+ "margin": "0px",
+ }
+ }
+ >
+ n/a
+ </p>
+ </div>
</div>
</div>
<div
@@ -13012,48 +13035,46 @@ exports[`Storyshots Organisms/AddressBubble AddressBubble/default 1`] = `
className="c4"
>
<div
- alt="n/a"
- aria-label="n/a"
- className=""
- role="img"
- size={1}
- style={
- Object {
- "padding": "4px 4px 0px 8px",
- }
- }
+ className="c5"
>
- <svg
- viewBox="0 0 28 28"
- width="20px"
+ <div
+ alt="n/a"
+ aria-label="n/a"
+ className=""
+ role="img"
+ size={1}
>
- <g
- fill="none"
- fillRule="evenodd"
+ <svg
+ viewBox="0 0 28 28"
+ width="20px"
>
- <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>
+ <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>
- <p
- className="c7"
- style={
- Object {
- "margin": "0px 4px",
- }
- }
+ <div
+ className="c8"
>
- n/a
- </p>
+ <p
+ className="c2"
+ >
+ n/a
+ </p>
+ </div>
</div>
</div>
<div
@@ -13063,182 +13084,181 @@ exports[`Storyshots Organisms/AddressBubble AddressBubble/default 1`] = `
className="c4"
>
<div
- alt="n/a"
- aria-label="n/a"
- className=""
- role="img"
- size={1.4}
- style={
- Object {
- "padding": "4px 4px 0px 6px",
- }
- }
+ className="c5"
>
- <svg
- fill="none"
- viewBox="0 0 25 25"
- width="28px"
+ <div
+ alt="n/a"
+ aria-label="n/a"
+ className=""
+ role="img"
+ size={1.4}
>
- <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)"
+ <svg
+ fill="none"
+ viewBox="0 0 25 25"
+ width="28px"
>
- <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>
+ <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>
- <p
- className="c7"
- style={
- Object {
- "margin": "0px",
- }
- }
+ <div
+ className="c8"
>
- n/a
- </p>
+ <p
+ className="c2"
+ style={
+ Object {
+ "margin": "0px",
+ }
+ }
+ >
+ n/a
+ </p>
+ </div>
</div>
</div>
<div
className="c4"
>
<div
- className="c8"
+ className="c9"
>
<div
- alt="Facebook"
- aria-label="Facebook"
- className=""
- role="img"
- size={3}
- style={
- Object {
- "margin": "6px 3px 0px 10px",
- }
- }
+ className="c8"
>
- <svg
- fill="none"
- viewBox="0.5 0.5 100 100"
- width="60px"
+ <div
+ alt="Facebook"
+ aria-label="Facebook"
+ className=""
+ role="img"
+ size={3}
>
- <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>
+ <svg
+ fill="none"
+ viewBox="0.5 0.5 100 100"
+ width="60px"
+ >
+ <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>
<div
- alt="Instagram"
- aria-label="Instagram"
- className=""
- role="img"
- size={3}
- style={
- Object {
- "margin": "6px 4px 0px 9px",
- }
- }
+ className="c8"
>
- <svg
- fill="none"
- viewBox="0.5 0.5 100 100"
- width="60px"
+ <div
+ alt="Instagram"
+ aria-label="Instagram"
+ className=""
+ role="img"
+ size={3}
>
- <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>
+ <svg
+ fill="none"
+ viewBox="0.5 0.5 100 100"
+ width="60px"
+ >
+ <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>
<div
- alt="Twitter"
- aria-label="Twitter"
- className=""
- role="img"
- size={3}
- style={
- Object {
- "margin": "6px 4px 0px 8px",
- }
- }
+ className="c8"
>
- <svg
- fill="none"
- viewBox="0.5 0.5 100 100"
- width="60px"
+ <div
+ alt="Twitter"
+ aria-label="Twitter"
+ className=""
+ role="img"
+ size={3}
>
- <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>
+ <svg
+ fill="none"
+ viewBox="0.5 0.5 100 100"
+ width="60px"
+ >
+ <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
- alt="LinkedIn"
- aria-label="LinkedIn"
- className=""
- role="img"
- size={3}
- style={
- Object {
- "margin": "6px 4px 0px 8px",
- }
- }
+ className="c8"
>
- <svg
- fill="none"
- viewBox="0.5 0.5 100 100"
- width="60px"
+ <div
+ alt="LinkedIn"
+ aria-label="LinkedIn"
+ className=""
+ role="img"
+ size={3}
>
- <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>
+ <svg
+ fill="none"
+ viewBox="0.5 0.5 100 100"
+ width="60px"
+ >
+ <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>
@@ -13257,7 +13277,7 @@ exports[`Storyshots Organisms/AddressBubble AddressBubble/example 1`] = `
line-height: 1.55em;
}
-.c6 {
+.c7 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
@@ -13267,15 +13287,10 @@ exports[`Storyshots Organisms/AddressBubble AddressBubble/example 1`] = `
transform: rotate(0deg);
}
-.c5 {
+.c6 {
position: relative;
}
-.c7 {
- font-family: Linguala-Title,Helvetica,Arial,sans-serif;
- font-weight: lighter;
-}
-
.c0 {
background-color: white;
padding: 1rem;
@@ -13309,7 +13324,25 @@ exports[`Storyshots Organisms/AddressBubble AddressBubble/example 1`] = `
flex: 1 auto;
}
-.c8 {
+.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;
@@ -13318,6 +13351,13 @@ exports[`Storyshots Organisms/AddressBubble AddressBubble/example 1`] = `
-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 {
@@ -13344,28 +13384,25 @@ exports[`Storyshots Organisms/AddressBubble AddressBubble/example 1`] = `
color: white;
}
-.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;
+.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;
}
.c3 {
background-color: #1CB569;
- padding: 0px;
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;
@@ -13376,8 +13413,10 @@ exports[`Storyshots Organisms/AddressBubble AddressBubble/example 1`] = `
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
- margin: 5px 10px;
- height: 35px;
+ margin: 0 0.5rem 0.5rem 0.5rem;
+ padding-left: 0.5rem;
+ padding-bottom: 0px;
+ height: 2rem;
border-radius: 3rem;
border-width: 0;
border-style: solid;
@@ -13422,11 +13461,6 @@ exports[`Storyshots Organisms/AddressBubble AddressBubble/example 1`] = `
>
<div
className="c1"
- style={
- Object {
- "margin": "12px",
- }
- }
>
<div
alt="1"
@@ -13524,9 +13558,7 @@ exports[`Storyshots Organisms/AddressBubble AddressBubble/example 1`] = `
className="c2"
style={
Object {
- "color": "#919191",
- "fontSize": "10px",
- "margin": "0px 8px",
+ "margin": "0px",
}
}
>
@@ -13543,39 +13575,47 @@ exports[`Storyshots Organisms/AddressBubble AddressBubble/example 1`] = `
>
<div
className="c5"
- style={
- Object {
- "paddingBottom": "5px",
- }
- }
>
<div
className="c6"
+ style={
+ Object {
+ "paddingBottom": "0.8rem",
+ }
+ }
>
- <svg
- height="36px"
- version="1.1"
- viewBox="0 0 1000 1000"
- width="36px"
- xmlns="http://www.w3.org/2000/svg"
+ <div
+ className="c7"
>
- <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>
+ <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>
- <p
- className="c7"
- style={
- Object {
- "margin": "0px",
- }
- }
+ <div
+ className="c8"
>
- se4 157 London, United Kingdom
- </p>
+ <p
+ className="c2"
+ style={
+ Object {
+ "margin": "0px",
+ }
+ }
+ >
+ se4 157 London, United Kingdom
+ </p>
+ </div>
</div>
</div>
<div
@@ -13585,49 +13625,52 @@ exports[`Storyshots Organisms/AddressBubble AddressBubble/example 1`] = `
className="c4"
>
<div
- alt="+44 176 234 567"
- aria-label="+44 176 234 567"
- className=""
- role="img"
- size={1.3}
- style={
- Object {
- "padding": "5px 4px 0px 6px",
- }
- }
+ className="c5"
>
- <svg
- viewBox="0 0 25 25"
- width="26px"
+ <div
+ alt="+44 176 234 567"
+ aria-label="+44 176 234 567"
+ className=""
+ role="img"
+ size={1.3}
>
- <g
- fill="none"
- fillRule="evenodd"
+ <svg
+ viewBox="0 0 25 25"
+ width="26px"
>
- <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>
+ <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>
- <p
- className="c7"
- style={
- Object {
- "margin": "0px",
- }
- }
+ <div
+ className="c8"
>
- +44 176 234 567
- </p>
+ <p
+ className="c2"
+ style={
+ Object {
+ "margin": "0px",
+ }
+ }
+ >
+ +44 176 234 567
+ </p>
+ </div>
</div>
</div>
<div
@@ -13637,48 +13680,46 @@ exports[`Storyshots Organisms/AddressBubble AddressBubble/example 1`] = `
className="c4"
>
<div
- alt="translate@globalvoices.co.uk"
- aria-label="translate@globalvoices.co.uk"
- className=""
- role="img"
- size={1}
- style={
- Object {
- "padding": "4px 4px 0px 8px",
- }
- }
+ className="c5"
>
- <svg
- viewBox="0 0 28 28"
- width="20px"
+ <div
+ alt="translate@globalvoices.co.uk"
+ aria-label="translate@globalvoices.co.uk"
+ className=""
+ role="img"
+ size={1}
>
- <g
- fill="none"
- fillRule="evenodd"
+ <svg
+ viewBox="0 0 28 28"
+ width="20px"
>
- <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>
+ <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>
- <p
- className="c7"
- style={
- Object {
- "margin": "0px 4px",
- }
- }
+ <div
+ className="c8"
>
- translate@globalvoices.co.uk
- </p>
+ <p
+ className="c2"
+ >
+ translate@globalvoices.co.uk
+ </p>
+ </div>
</div>
</div>
<div
@@ -13688,182 +13729,181 @@ exports[`Storyshots Organisms/AddressBubble AddressBubble/example 1`] = `
className="c4"
>
<div
- alt="www.globalvoices.co.uk"
- aria-label="www.globalvoices.co.uk"
- className=""
- role="img"
- size={1.4}
- style={
- Object {
- "padding": "4px 4px 0px 6px",
- }
- }
+ className="c5"
>
- <svg
- fill="none"
- viewBox="0 0 25 25"
- width="28px"
+ <div
+ alt="www.globalvoices.co.uk"
+ aria-label="www.globalvoices.co.uk"
+ className=""
+ role="img"
+ size={1.4}
>
- <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)"
+ <svg
+ fill="none"
+ viewBox="0 0 25 25"
+ width="28px"
>
- <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>
+ <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>
- <p
- className="c7"
- style={
- Object {
- "margin": "0px",
- }
- }
+ <div
+ className="c8"
>
- www.globalvoices.co.uk
- </p>
+ <p
+ className="c2"
+ style={
+ Object {
+ "margin": "0px",
+ }
+ }
+ >
+ www.globalvoices.co.uk
+ </p>
+ </div>
</div>
</div>
<div
className="c4"
>
<div
- className="c8"
+ className="c9"
>
<div
- alt="Facebook"
- aria-label="Facebook"
- className=""
- role="img"
- size={3}
- style={
- Object {
- "margin": "6px 3px 0px 10px",
- }
- }
+ className="c8"
>
- <svg
- fill="none"
- viewBox="0.5 0.5 100 100"
- width="60px"
+ <div
+ alt="Facebook"
+ aria-label="Facebook"
+ className=""
+ role="img"
+ size={3}
>
- <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>
+ <svg
+ fill="none"
+ viewBox="0.5 0.5 100 100"
+ width="60px"
+ >
+ <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>
<div
- alt="Instagram"
- aria-label="Instagram"
- className=""
- role="img"
- size={3}
- style={
- Object {
- "margin": "6px 4px 0px 9px",
- }
- }
+ className="c8"
>
- <svg
- fill="none"
- viewBox="0.5 0.5 100 100"
- width="60px"
+ <div
+ alt="Instagram"
+ aria-label="Instagram"
+ className=""
+ role="img"
+ size={3}
>
- <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>
+ <svg
+ fill="none"
+ viewBox="0.5 0.5 100 100"
+ width="60px"
+ >
+ <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>
<div
- alt="Twitter"
- aria-label="Twitter"
- className=""
- role="img"
- size={3}
- style={
- Object {
- "margin": "6px 4px 0px 8px",
- }
- }
+ className="c8"
>
- <svg
- fill="none"
- viewBox="0.5 0.5 100 100"
- width="60px"
+ <div
+ alt="Twitter"
+ aria-label="Twitter"
+ className=""
+ role="img"
+ size={3}
>
- <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>
+ <svg
+ fill="none"
+ viewBox="0.5 0.5 100 100"
+ width="60px"
+ >
+ <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
- alt="LinkedIn"
- aria-label="LinkedIn"
- className=""
- role="img"
- size={3}
- style={
- Object {
- "margin": "6px 4px 0px 8px",
- }
- }
+ className="c8"
>
- <svg
- fill="none"
- viewBox="0.5 0.5 100 100"
- width="60px"
+ <div
+ alt="LinkedIn"
+ aria-label="LinkedIn"
+ className=""
+ role="img"
+ size={3}
>
- <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>
+ <svg
+ fill="none"
+ viewBox="0.5 0.5 100 100"
+ width="60px"
+ >
+ <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>
--
GitLab
From c619052125f7cc5293f94c001552ebdc98684ee5 Mon Sep 17 00:00:00 2001
From: Damien Thill <D@0-2.local>
Date: Wed, 25 Mar 2020 10:01:37 +0100
Subject: [PATCH 10/11] remove fixed width from AddressBubble, refactor 0px to
0, refactor SubHeaderHor to use border radius from theme
---
src/lib/components/organisms/AddressBubble.js | 23 +++++--------------
src/lib/components/organisms/SubHeaderHor.js | 2 +-
2 files changed, 7 insertions(+), 18 deletions(-)
diff --git a/src/lib/components/organisms/AddressBubble.js b/src/lib/components/organisms/AddressBubble.js
index 63bfe7f..e29d743 100644
--- a/src/lib/components/organisms/AddressBubble.js
+++ b/src/lib/components/organisms/AddressBubble.js
@@ -15,8 +15,6 @@ import Icon from '../atoms/Icon.js'
import PinShape from '../atoms/Shape/PinShape.js'
import Text from '../atoms/Text.js'
-const width = '500px'
-
const FlexDown = styled.div`
display: flex;
align-items: flex-end;
@@ -65,7 +63,7 @@ const Bubblet = styled.div`
margin: 0 ${themeGet('spacing.small')} ${themeGet('spacing.small')}
${themeGet('spacing.small')};
padding-left: ${themeGet('spacing.small')};
- padding-bottom: 0px;
+ padding-bottom: 0;
height: ${themeGet('spacing.large')};
border-radius: ${themeGet('border.radius')};
border-width: 0;
@@ -83,19 +81,10 @@ const AddressBubble = ({
email = 'n/a',
website = 'n/a',
}) => (
- <Bubble
- shadow={'low'}
- column
- stretch
- style={{
- width: `${width}`,
- }}
- >
+ <Bubble shadow={'low'} column stretch>
<FlexDown>
<FiveStarRating rating={rating} size="2" />
- <Text style={{ margin: '0px' }}>
- basierend auf {opinions} bewertungen
- </Text>
+ <Text style={{ margin: '0' }}>basierend auf {opinions} bewertungen</Text>
</FlexDown>
<Bubblet>
@@ -113,7 +102,7 @@ const AddressBubble = ({
<Item2>
<Text
style={{
- margin: '0px',
+ margin: '0',
}}
>
{address}
@@ -130,7 +119,7 @@ const AddressBubble = ({
<Item2>
<Text
style={{
- margin: '0px',
+ margin: '0',
}}
>
{telephone}
@@ -158,7 +147,7 @@ const AddressBubble = ({
<Item2>
<Text
style={{
- margin: '0px',
+ margin: '0',
}}
>
{website}
diff --git a/src/lib/components/organisms/SubHeaderHor.js b/src/lib/components/organisms/SubHeaderHor.js
index 3b3fd95..db8a63a 100644
--- a/src/lib/components/organisms/SubHeaderHor.js
+++ b/src/lib/components/organisms/SubHeaderHor.js
@@ -21,7 +21,7 @@ const Item = styled.div`
const EntryWrapper = styled(Wrapper)`
background-color: white;
- border-radius: 100px;
+ border-radius: ${themeGet('border.radius')};
padding: ${themeGet('spacing.medium')};
box-shadow: ${({ shadow }) => themeGet(`shadows.${shadow || 'low'}`)};
`
--
GitLab
From 778194f32722e4fb7759dc8f9b9aa6a135920a51 Mon Sep 17 00:00:00 2001
From: Damien Thill <D@0-2.local>
Date: Wed, 25 Mar 2020 10:03:16 +0100
Subject: [PATCH 11/11] update snapshots
---
tests/__snapshots__/storyshots.test.js.snap | 32 +++++++--------------
1 file changed, 11 insertions(+), 21 deletions(-)
diff --git a/tests/__snapshots__/storyshots.test.js.snap b/tests/__snapshots__/storyshots.test.js.snap
index 769b026..c760fce 100644
--- a/tests/__snapshots__/storyshots.test.js.snap
+++ b/tests/__snapshots__/storyshots.test.js.snap
@@ -12762,7 +12762,7 @@ exports[`Storyshots Organisms/AddressBubble AddressBubble/default 1`] = `
flex-direction: row;
margin: 0 0.5rem 0.5rem 0.5rem;
padding-left: 0.5rem;
- padding-bottom: 0px;
+ padding-bottom: 0;
height: 2rem;
border-radius: 3rem;
border-width: 0;
@@ -12800,11 +12800,6 @@ exports[`Storyshots Organisms/AddressBubble AddressBubble/default 1`] = `
>
<div
className="c0"
- style={
- Object {
- "width": "500px",
- }
- }
>
<div
className="c1"
@@ -12913,7 +12908,7 @@ exports[`Storyshots Organisms/AddressBubble AddressBubble/default 1`] = `
className="c2"
style={
Object {
- "margin": "0px",
+ "margin": "0",
}
}
>
@@ -12964,7 +12959,7 @@ exports[`Storyshots Organisms/AddressBubble AddressBubble/default 1`] = `
className="c2"
style={
Object {
- "margin": "0px",
+ "margin": "0",
}
}
>
@@ -13019,7 +13014,7 @@ exports[`Storyshots Organisms/AddressBubble AddressBubble/default 1`] = `
className="c2"
style={
Object {
- "margin": "0px",
+ "margin": "0",
}
}
>
@@ -13149,7 +13144,7 @@ exports[`Storyshots Organisms/AddressBubble AddressBubble/default 1`] = `
className="c2"
style={
Object {
- "margin": "0px",
+ "margin": "0",
}
}
>
@@ -13415,7 +13410,7 @@ exports[`Storyshots Organisms/AddressBubble AddressBubble/example 1`] = `
flex-direction: row;
margin: 0 0.5rem 0.5rem 0.5rem;
padding-left: 0.5rem;
- padding-bottom: 0px;
+ padding-bottom: 0;
height: 2rem;
border-radius: 3rem;
border-width: 0;
@@ -13453,11 +13448,6 @@ exports[`Storyshots Organisms/AddressBubble AddressBubble/example 1`] = `
>
<div
className="c0"
- style={
- Object {
- "width": "500px",
- }
- }
>
<div
className="c1"
@@ -13558,7 +13548,7 @@ exports[`Storyshots Organisms/AddressBubble AddressBubble/example 1`] = `
className="c2"
style={
Object {
- "margin": "0px",
+ "margin": "0",
}
}
>
@@ -13609,7 +13599,7 @@ exports[`Storyshots Organisms/AddressBubble AddressBubble/example 1`] = `
className="c2"
style={
Object {
- "margin": "0px",
+ "margin": "0",
}
}
>
@@ -13664,7 +13654,7 @@ exports[`Storyshots Organisms/AddressBubble AddressBubble/example 1`] = `
className="c2"
style={
Object {
- "margin": "0px",
+ "margin": "0",
}
}
>
@@ -13794,7 +13784,7 @@ exports[`Storyshots Organisms/AddressBubble AddressBubble/example 1`] = `
className="c2"
style={
Object {
- "margin": "0px",
+ "margin": "0",
}
}
>
@@ -15441,7 +15431,7 @@ exports[`Storyshots Organisms/SubHeaderHor Sub Header Hor 1`] = `
-ms-flex-pack: justify;
justify-content: space-between;
background-color: white;
- border-radius: 100px;
+ 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);
}
--
GitLab