diff --git a/package.json b/package.json index 1f0d6966..5b201f11 100644 --- 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 index 471eae15..f902bbde 100644 --- 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 = ({ children }) => ( diff --git a/src/molecules/Footer/index.tsx b/src/molecules/Footer/index.tsx index c945004e..1a9affbe 100644 --- 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; + CityContainer: React.SFC; + CityLink: React.SFC; LinkSection: React.SFC; SectionHeader: React.SFC; SectionLink: React.SFC; @@ -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 index cc4b628f..a7a50e96 100755 --- a/storybook/stories/Footer.stories.tsx +++ b/storybook/stories/Footer.stories.tsx @@ -21,6 +21,13 @@ storiesOf('Footer', module) + + London + New York + Los Angeles + Chicago + Seattle +