Merge pull request #229 from sofarsounds/develop

Release 6.1.0
sofarsounds · Feb 11, 2020 · a649d7f · a649d7f
2 parents cf44fe4 + a63dd05
commit a649d7f
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 2 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@sofarsounds/maestro",
-  "version": "6.0.1",
+  "version": "6.1.0",
   "description": "The official sofar sounds react uikit library",
   "main": "dist/index.js",
   "scripts": {

diff --git a/src/molecules/Footer/Top.tsx b/src/molecules/Footer/Top.tsx
@@ -40,7 +40,32 @@ export const Subtitle = styled(H5)`
 export const CityInputWrapper = styled.div`
   width: 100%;
   max-width: 555px;
+  margin-bottom: ${({ theme }) => theme.ruler[2]}px;
+`;
+
+export const CityContainer = styled.div`
   margin-bottom: ${({ theme }) => theme.ruler[16]}px;
+  display: inline-grid;
+  text-align: center;
+
+  ${({ theme }) => theme.media.md`
+      display: flex;
+      justify-content: space-between;
+      width: 100%;
+      max-width: 555px;
+    `}
+`;
+
+export const CityLink = styled.a`
+  ${({ theme }) => css`
+    color: ${theme.colors.blueSmoke};
+    font-size: ${theme.fontSizes.body2};
+    padding: ${theme.ruler[1]}px 0;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  `}
 `;
 
 export const Top: React.SFC<any> = ({ children }) => (

diff --git a/src/molecules/Footer/index.tsx b/src/molecules/Footer/index.tsx
@@ -1,6 +1,13 @@
 import React from 'react';
 
-import { Top, Title, Subtitle, CityInputWrapper } from './Top';
+import {
+  Top,
+  Title,
+  Subtitle,
+  CityInputWrapper,
+  CityContainer,
+  CityLink
+} from './Top';
 import { SectionHeader, SectionLink, LinkSection } from './Section';
 import LogoWithSlogan, { LogoWithSloganProps } from './LogoWithSlogan';
 
@@ -22,6 +29,8 @@ interface Composition {
   Subtitle: React.SFC;
   CityInputWrapper: React.SFC;
   LogoWithSlogan: React.SFC<LogoWithSloganProps>;
+  CityContainer: React.SFC;
+  CityLink: React.SFC<any>;
   LinkSection: React.SFC;
   SectionHeader: React.SFC;
   SectionLink: React.SFC<any>;
@@ -41,6 +50,8 @@ Footer.Title = Title;
 Footer.Subtitle = Subtitle;
 Footer.CityInputWrapper = CityInputWrapper;
 Footer.LogoWithSlogan = LogoWithSlogan;
+Footer.CityContainer = CityContainer;
+Footer.CityLink = CityLink;
 Footer.LinkSection = LinkSection;
 Footer.SectionHeader = SectionHeader;
 Footer.SectionLink = SectionLink;

diff --git a/storybook/stories/Footer.stories.tsx b/storybook/stories/Footer.stories.tsx
@@ -21,6 +21,13 @@ storiesOf('Footer', module)
           <Footer.CityInputWrapper>
             <Textfield placeholder="Type to find your city" />
           </Footer.CityInputWrapper>
+          <Footer.CityContainer>
+            <Footer.CityLink href="#">London</Footer.CityLink>
+            <Footer.CityLink href="#">New York</Footer.CityLink>
+            <Footer.CityLink href="#">Los Angeles</Footer.CityLink>
+            <Footer.CityLink href="#">Chicago</Footer.CityLink>
+            <Footer.CityLink href="#">Seattle</Footer.CityLink>
+          </Footer.CityContainer>
           <Grid>
             <Footer.LogoWithSlogan href="/" />
             <Footer.LinkSection>