diff --git a/src/components/containers/core/Section/Content.jsx b/src/components/containers/core/Section/Content.jsx index 3e7bb80f..959669ad 100644 --- a/src/components/containers/core/Section/Content.jsx +++ b/src/components/containers/core/Section/Content.jsx @@ -19,8 +19,8 @@ import CoreContent from "containers/core/Content"; * @since 0.3.0 */ const Content = styled(CoreContent)` - margin-top: ${({ compact }) => !compact && "5em"}; - margin-bottom: ${({ compact }) => !compact && "5em"}; + padding-top: ${({ compact }) => !compact && "5em"}; + padding-bottom: ${({ compact }) => !compact && "5em"}; `; export default Content; diff --git a/src/components/organisms/core/Footer/styled/Category.jsx b/src/components/organisms/core/Footer/styled/Category.jsx new file mode 100644 index 00000000..a1721820 --- /dev/null +++ b/src/components/organisms/core/Footer/styled/Category.jsx @@ -0,0 +1,58 @@ +/* + * Copyright (C) 2018-present Arctic Ice Studio + * Copyright (C) 2018-present Sven Greb + * + * Project: Nord Docs + * Repository: https://github.com/arcticicestudio/nord-docs + * License: MIT + */ + +import PropTypes from "prop-types"; +import styled from "styled-components"; + +import { colors, motion, themedMode, MODE_BRIGHT_SNOW_FLURRY, MODE_DARK_NIGHT_FROST } from "styles/theme"; + +import { sitemapCategoryFontSize } from "../styles"; + +const fontColor = themedMode({ + [MODE_BRIGHT_SNOW_FLURRY]: ({ isActiveRouteMatch }) => + isActiveRouteMatch ? colors.font.base[MODE_BRIGHT_SNOW_FLURRY] : colors.font.faded[MODE_BRIGHT_SNOW_FLURRY], + [MODE_DARK_NIGHT_FROST]: ({ isActiveRouteMatch }) => + isActiveRouteMatch ? colors.font.base[MODE_DARK_NIGHT_FROST] : colors.font.faded[MODE_DARK_NIGHT_FROST] +}); + +const borderBottomColor = themedMode({ + [MODE_BRIGHT_SNOW_FLURRY]: ({ isActiveRouteMatch }) => + isActiveRouteMatch ? colors.font.base[MODE_BRIGHT_SNOW_FLURRY] : "transparent", + [MODE_DARK_NIGHT_FROST]: ({ isActiveRouteMatch }) => + isActiveRouteMatch ? colors.font.base[MODE_DARK_NIGHT_FROST] : "transparent" +}); + +/** + * A container for the heading of a sitemap category. + * + * @author Arctic Ice Studio + * @author Sven Greb + * @since 0.5.0 + */ +const Category = styled.div` + align-self: center; + font-size: ${sitemapCategoryFontSize}; + color: ${fontColor}; + border-bottom: 2px solid ${borderBottomColor}; + transition: border-bottom ${motion.speed.duration.transition.base.themeModeSwitch}ms ease-in-out, + color ${motion.speed.duration.transition.base.themeModeSwitch}ms ease-in-out; +`; + +Category.propTypes = { + /** + * Indicates if the category matches the currently active route. + */ + isActiveRouteMatch: PropTypes.bool +}; + +Category.defaultProps = { + isActiveRouteMatch: false +}; + +export default Category; diff --git a/src/components/organisms/core/Footer/styled/Copyright.jsx b/src/components/organisms/core/Footer/styled/Copyright.jsx new file mode 100644 index 00000000..5f571a64 --- /dev/null +++ b/src/components/organisms/core/Footer/styled/Copyright.jsx @@ -0,0 +1,41 @@ +/* + * Copyright (C) 2018-present Arctic Ice Studio + * Copyright (C) 2018-present Sven Greb + * + * Project: Nord Docs + * Repository: https://github.com/arcticicestudio/nord-docs + * License: MIT + */ + +import styled from "styled-components"; + +import { colors, motion, themedMode, MODE_BRIGHT_SNOW_FLURRY, MODE_DARK_NIGHT_FROST } from "styles/theme"; + +const fontColor = themedMode({ + [MODE_BRIGHT_SNOW_FLURRY]: colors.font.faded[MODE_BRIGHT_SNOW_FLURRY], + [MODE_DARK_NIGHT_FROST]: colors.font.faded[MODE_DARK_NIGHT_FROST] +}); + +/** + * A container for copyright related metadata components. + * + * @author Arctic Ice Studio + * @author Sven Greb + * @since 0.5.0 + */ +const Copyright = styled.div` + display: flex; + flex-direction: column; + text-align: center; + font-size: 0.8em; + color: ${fontColor}; + transition: color ${motion.speed.duration.transition.base.themeModeSwitch}ms ease-in-out; + margin-top: 1.125em; + + ${({ theme }) => theme.media.tabletLandscape` + display: block; + text-align: start; + `}; +`; + +export default Copyright; diff --git a/src/components/organisms/core/Footer/styled/Grid.jsx b/src/components/organisms/core/Footer/styled/Grid.jsx new file mode 100644 index 00000000..be1f2c1c --- /dev/null +++ b/src/components/organisms/core/Footer/styled/Grid.jsx @@ -0,0 +1,35 @@ +/* + * Copyright (C) 2018-present Arctic Ice Studio + * Copyright (C) 2018-present Sven Greb + * + * Project: Nord Docs + * Repository: https://github.com/arcticicestudio/nord-docs + * License: MIT + */ + +import styled from "styled-components"; + +/** + * A footer container that defines the grid layout. + * + * @author Arctic Ice Studio + * @author Sven Greb + * @since 0.5.0 + */ +const Grid = styled.div` + display: flex; + flex-direction: column; + + ${({ theme }) => theme.media.tabletPortrait` + display: grid; + grid-template-columns: repeat(${({ categoryCount }) => categoryCount}, 1fr); + grid-template-rows: auto; + grid-row-gap: 1em; + `}; + + ${({ theme }) => theme.media.tabletLandscape` + grid-template-columns: 30% repeat(${({ categoryCount }) => categoryCount}, 1fr); + `}; +`; + +export default Grid; diff --git a/src/components/organisms/core/Footer/styled/Metadata.jsx b/src/components/organisms/core/Footer/styled/Metadata.jsx new file mode 100644 index 00000000..bb2ea635 --- /dev/null +++ b/src/components/organisms/core/Footer/styled/Metadata.jsx @@ -0,0 +1,32 @@ +/* + * Copyright (C) 2018-present Arctic Ice Studio + * Copyright (C) 2018-present Sven Greb + * + * Project: Nord Docs + * Repository: https://github.com/arcticicestudio/nord-docs + * License: MIT + */ + +import styled from "styled-components"; + +/** + * A container for the grid cell that contains metadata components. + * + * @author Arctic Ice Studio + * @author Sven Greb + * @since 0.5.0 + */ +const Metadata = styled.div` + display: flex; + grid-column: span ${({ categoryCount }) => categoryCount}; + flex-direction: column; + align-items: center; + + ${({ theme }) => theme.media.tabletLandscape` + grid-column: unset; + justify-content: space-between; + align-items: unset; + `}; +`; + +export default Metadata; diff --git a/src/components/organisms/core/Footer/styled/OrganizationBrand.jsx b/src/components/organisms/core/Footer/styled/OrganizationBrand.jsx new file mode 100644 index 00000000..d80bcf31 --- /dev/null +++ b/src/components/organisms/core/Footer/styled/OrganizationBrand.jsx @@ -0,0 +1,25 @@ +/* + * Copyright (C) 2018-present Arctic Ice Studio + * Copyright (C) 2018-present Sven Greb + * + * Project: Nord Docs + * Repository: https://github.com/arcticicestudio/nord-docs + * License: MIT + */ + +import styled from "styled-components"; + +/** + * A container for the grid cell that contains branding components. + * + * @author Arctic Ice Studio + * @author Sven Greb + * @since 0.5.0 + */ +const OrganizationBrand = styled.div` + display: flex; + align-items: center; + margin-bottom: 2em; +`; + +export default OrganizationBrand; diff --git a/src/components/organisms/core/Footer/styled/OrganizationBrandCaption.jsx b/src/components/organisms/core/Footer/styled/OrganizationBrandCaption.jsx new file mode 100644 index 00000000..1ad92bee --- /dev/null +++ b/src/components/organisms/core/Footer/styled/OrganizationBrandCaption.jsx @@ -0,0 +1,27 @@ +/* + * Copyright (C) 2018-present Arctic Ice Studio + * Copyright (C) 2018-present Sven Greb + * + * Project: Nord Docs + * Repository: https://github.com/arcticicestudio/nord-docs + * License: MIT + */ + +import styled from "styled-components"; + +import { organizationBrandCaptionFontSize } from "../styles"; + +/** + * A brand caption. + * + * @author Arctic Ice Studio + * @author Sven Greb + * @since 0.5.0 + */ +const OrganizationBrandCaption = styled.span` + font-size: ${organizationBrandCaptionFontSize}; + font-weight: 400; + margin-left: 0.7em; +`; + +export default OrganizationBrandCaption; diff --git a/src/components/organisms/core/Footer/styled/Sitemap.jsx b/src/components/organisms/core/Footer/styled/Sitemap.jsx new file mode 100644 index 00000000..8ff59a4c --- /dev/null +++ b/src/components/organisms/core/Footer/styled/Sitemap.jsx @@ -0,0 +1,33 @@ +/* + * Copyright (C) 2018-present Arctic Ice Studio + * Copyright (C) 2018-present Sven Greb + * + * Project: Nord Docs + * Repository: https://github.com/arcticicestudio/nord-docs + * License: MIT + */ + +import styled from "styled-components"; + +/** + * A container for sitemap components. + * + * @author Arctic Ice Studio + * @author Sven Greb + * @since 0.5.0 + */ +const Sitemap = styled.div` + display: flex; + flex-direction: column; + align-items: center; + margin-top: 1em; + margin-bottom: 1em; + + ${({ theme }) => theme.media.tabletPortrait` + align-items: unset; + margin-top: 0; + margin-bottom: 0; + `}; +`; + +export default Sitemap; diff --git a/src/components/organisms/core/Footer/styled/SitemapCategory.jsx b/src/components/organisms/core/Footer/styled/SitemapCategory.jsx new file mode 100644 index 00000000..8b6be8c9 --- /dev/null +++ b/src/components/organisms/core/Footer/styled/SitemapCategory.jsx @@ -0,0 +1,44 @@ +/* + * Copyright (C) 2018-present Arctic Ice Studio + * Copyright (C) 2018-present Sven Greb + * + * Project: Nord Docs + * Repository: https://github.com/arcticicestudio/nord-docs + * License: MIT + */ + +import styled from "styled-components"; + +import { colors, motion, themedMode, MODE_BRIGHT_SNOW_FLURRY, MODE_DARK_NIGHT_FROST } from "styles/theme"; + +const borderBottomColor = themedMode({ + [MODE_BRIGHT_SNOW_FLURRY]: colors.nord4, + [MODE_DARK_NIGHT_FROST]: colors.nord3 +}); + +/** + * A container for a sitemap category. + * + * @author Arctic Ice Studio + * @author Sven Greb + * @since 0.5.0 + */ +const SitemapCategory = styled.div` + display: flex; + justify-content: center; + border-bottom: 1px solid ${borderBottomColor}; + transition: border-bottom ${motion.speed.duration.transition.base.themeModeSwitch}ms ease-in-out; + margin-bottom: 1em; + width: 70%; + user-select: none; + + ${({ theme }) => theme.media.tabletPortrait` + width: unset; + `}; + + ${({ theme }) => theme.media.tabletLandscape` + justify-content: unset; + `}; +`; + +export default SitemapCategory; diff --git a/src/components/organisms/core/Footer/styled/SitemapLink.jsx b/src/components/organisms/core/Footer/styled/SitemapLink.jsx new file mode 100644 index 00000000..7d61883f --- /dev/null +++ b/src/components/organisms/core/Footer/styled/SitemapLink.jsx @@ -0,0 +1,54 @@ +/* + * Copyright (C) 2018-present Arctic Ice Studio + * Copyright (C) 2018-present Sven Greb + * + * Project: Nord Docs + * Repository: https://github.com/arcticicestudio/nord-docs + * License: MIT + */ + +import styled from "styled-components"; + +import { A } from "atoms/core/HTMLElements"; +import { colors, motion, themedMode, MODE_BRIGHT_SNOW_FLURRY, MODE_DARK_NIGHT_FROST } from "styles/theme"; + +const fontColor = themedMode({ + [MODE_BRIGHT_SNOW_FLURRY]: colors.font.faded[MODE_BRIGHT_SNOW_FLURRY], + [MODE_DARK_NIGHT_FROST]: colors.font.faded[MODE_DARK_NIGHT_FROST] +}); + +const fontColorHover = themedMode({ + [MODE_BRIGHT_SNOW_FLURRY]: colors.font.base[MODE_BRIGHT_SNOW_FLURRY], + [MODE_DARK_NIGHT_FROST]: colors.font.base[MODE_DARK_NIGHT_FROST] +}); + +/** + * A link for a sitemap page link. + * + * @author Arctic Ice Studio + * @author Sven Greb + * @since 0.5.0 + */ +const SitemapLink = styled(A)` + display: block; + padding: 0.4em 0; + font-size: 0.9em; + color: ${fontColor}; + transition: color ${motion.speed.duration.transition.text.fade}ms ease-in-out; + + &:active, + &:focus, + &:hover { + color: ${fontColorHover}; + } + + &:first-child { + padding-top: 0; + } + + &:last-child { + padding-bottom: 0; + } +`; + +export default SitemapLink; diff --git a/src/components/organisms/core/Footer/styled/SitemapList.jsx b/src/components/organisms/core/Footer/styled/SitemapList.jsx new file mode 100644 index 00000000..7eef7cee --- /dev/null +++ b/src/components/organisms/core/Footer/styled/SitemapList.jsx @@ -0,0 +1,27 @@ +/* + * Copyright (C) 2018-present Arctic Ice Studio + * Copyright (C) 2018-present Sven Greb + * + * Project: Nord Docs + * Repository: https://github.com/arcticicestudio/nord-docs + * License: MIT + */ + +import styled from "styled-components"; + +/** + * A container for sitemap page links. + * + * @author Arctic Ice Studio + * @author Sven Greb + * @since 0.5.0 + */ +const SitemapList = styled.div` + text-align: center; + + ${({ theme }) => theme.media.tabletLandscape` + text-align: start; + `}; +`; + +export default SitemapList; diff --git a/src/components/organisms/core/Footer/styled/SocialNetworking.jsx b/src/components/organisms/core/Footer/styled/SocialNetworking.jsx new file mode 100644 index 00000000..9f62c525 --- /dev/null +++ b/src/components/organisms/core/Footer/styled/SocialNetworking.jsx @@ -0,0 +1,40 @@ +/* + * Copyright (C) 2018-present Arctic Ice Studio + * Copyright (C) 2018-present Sven Greb + * + * Project: Nord Docs + * Repository: https://github.com/arcticicestudio/nord-docs + * License: MIT + */ + +import styled from "styled-components"; + +/** + * A container for the grid cell that contains social media & networking related components. + * + * @author Arctic Ice Studio + * @author Sven Greb + * @since 0.5.0 + */ +const SocialNetworking = styled.div` + display: flex; + justify-content: space-between; + + ${({ theme }) => theme.media.tabletLandscape` + justify-content: unset; + + * { + margin: 0 0.625em; + + &:last-child { + margin-right: 0; + } + + &:first-child { + margin-left: 0; + } + } + `}; +`; + +export default SocialNetworking; diff --git a/src/components/organisms/core/Footer/styled/index.js b/src/components/organisms/core/Footer/styled/index.js new file mode 100644 index 00000000..87fe26ae --- /dev/null +++ b/src/components/organisms/core/Footer/styled/index.js @@ -0,0 +1,34 @@ +/* + * Copyright (C) 2018-present Arctic Ice Studio + * Copyright (C) 2018-present Sven Greb + * + * Project: Nord Docs + * Repository: https://github.com/arcticicestudio/nord-docs + * License: MIT + */ + +import Category from "./Category"; +import Copyright from "./Copyright"; +import Grid from "./Grid"; +import Metadata from "./Metadata"; +import OrganizationBrand from "./OrganizationBrand"; +import OrganizationBrandCaption from "./OrganizationBrandCaption"; +import Sitemap from "./Sitemap"; +import SitemapCategory from "./SitemapCategory"; +import SitemapLink from "./SitemapLink"; +import SitemapList from "./SitemapList"; +import SocialNetworking from "./SocialNetworking"; + +export { + Category, + Copyright, + Grid, + Metadata, + OrganizationBrand, + OrganizationBrandCaption, + Sitemap, + SitemapCategory, + SitemapLink, + SitemapList, + SocialNetworking +}; diff --git a/src/components/organisms/core/Footer/styles.js b/src/components/organisms/core/Footer/styles.js new file mode 100644 index 00000000..bfa705bb --- /dev/null +++ b/src/components/organisms/core/Footer/styles.js @@ -0,0 +1,60 @@ +/* + * Copyright (C) 2018-present Arctic Ice Studio + * Copyright (C) 2018-present Sven Greb + * + * Project: Nord Docs + * Repository: https://github.com/arcticicestudio/nord-docs + * License: MIT + */ + +/** + * @file Provides component styles. + * @author Arctic Ice Studio + * @author Sven Greb + * @since 0.5.0 + */ + +import { css } from "styled-components"; +import { darken, lighten } from "polished"; + +import { colors, motion, ms, themedMode, MODE_BRIGHT_SNOW_FLURRY, MODE_DARK_NIGHT_FROST } from "styles/theme"; + +const socialNetworkingIconFillColor = themedMode({ + [MODE_BRIGHT_SNOW_FLURRY]: lighten(0.15, colors.font.base[MODE_BRIGHT_SNOW_FLURRY]), + [MODE_DARK_NIGHT_FROST]: darken(0.1, colors.font.base[MODE_DARK_NIGHT_FROST]) +}); + +const socialNetworkingIconStyles = css` + display: inline-block; + width: 1em; + height: 1em; + fill: ${socialNetworkingIconFillColor}; + transition: fill ${motion.speed.duration.transition.text.fade}ms ease-in-out; + + &:active, + &:focus, + &:hover { + fill: ${colors.nord8}; + } +`; + +const heartIconStyles = css` + width: 0.8em; + height: 0.8em; + vertical-align: middle; + fill: ${({ theme }) => lighten(0.2, theme.colors.nord11)}; +`; + +const organizationBrandLogoHeight = ms(4); + +const organizationBrandCaptionFontSize = ms(3); + +const sitemapCategoryFontSize = ms(1); + +export { + heartIconStyles, + organizationBrandCaptionFontSize, + organizationBrandLogoHeight, + sitemapCategoryFontSize, + socialNetworkingIconStyles +}; diff --git a/src/styles/theme/colors/font.js b/src/styles/theme/colors/font.js index f5523a8c..fb7452b8 100644 --- a/src/styles/theme/colors/font.js +++ b/src/styles/theme/colors/font.js @@ -14,6 +14,8 @@ * @since 0.2.0 */ +import { darken, lighten } from "polished"; + import nord from "./nord"; import { MODE_BRIGHT_SNOW_FLURRY, MODE_DARK_NIGHT_FROST } from "../constants"; @@ -22,6 +24,11 @@ const base = { [MODE_DARK_NIGHT_FROST]: nord.nord6 }; -const font = { base }; +const faded = { + [MODE_BRIGHT_SNOW_FLURRY]: lighten(0.2, base[MODE_BRIGHT_SNOW_FLURRY]), + [MODE_DARK_NIGHT_FROST]: darken(0.2, base[MODE_DARK_NIGHT_FROST]) +}; + +const font = { base, faded }; export default font; diff --git a/test/babel-config.js b/test/babel-config.js index 9ed268e8..e91bb2b6 100644 --- a/test/babel-config.js +++ b/test/babel-config.js @@ -18,7 +18,7 @@ const jestBabelConfig = { presets: ["babel-preset-gatsby"], - plugins: ["@babel/plugin-proposal-optional-chaining"] + plugins: ["@babel/plugin-proposal-optional-chaining", "@babel/plugin-proposal-export-default-from"] }; module.exports = require("babel-jest").createTransformer(jestBabelConfig); diff --git a/test/components/containers/core/Section/Content.test.jsx b/test/components/containers/core/Section/Content.test.jsx index 7a0f968c..dd5666b1 100644 --- a/test/components/containers/core/Section/Content.test.jsx +++ b/test/components/containers/core/Section/Content.test.jsx @@ -14,23 +14,23 @@ import { Content } from "containers/core/Section"; import { renderWithTheme } from "nord-docs-test-utils"; describe("theme styles", () => { - test("has top and bottom margin", () => { + test("has top and bottom padding", () => { const { container } = renderWithTheme(Nord); - const marginTop = stripUnit(getComputedStyle(container.firstChild).marginTop); - const marginBottom = stripUnit(getComputedStyle(container.firstChild).marginBottom); + const paddingTop = stripUnit(getComputedStyle(container.firstChild).paddingTop); + const paddingBottom = stripUnit(getComputedStyle(container.firstChild).paddingBottom); - expect(marginTop).toBeGreaterThan(0); - expect(marginBottom).toBeGreaterThan(0); + expect(paddingTop).toBeGreaterThan(0); + expect(paddingBottom).toBeGreaterThan(0); expect(container.firstChild).toMatchSnapshot(); }); - test("adjusts top and bottom margin to passed props", () => { + test("adjusts top and bottom padding to passed props", () => { const { container } = renderWithTheme(Nord); - const marginTop = stripUnit(getComputedStyle(container.firstChild).marginTop); - const marginBottom = stripUnit(getComputedStyle(container.firstChild).marginBottom); + const paddingTop = stripUnit(getComputedStyle(container.firstChild).paddingTop); + const paddingBottom = stripUnit(getComputedStyle(container.firstChild).paddingBottom); - expect(marginTop).toBeFalsy(); - expect(marginBottom).toBeFalsy(); + expect(paddingTop).toBeFalsy(); + expect(paddingBottom).toBeFalsy(); expect(container.firstChild).toMatchSnapshot(); }); }); diff --git a/test/components/containers/core/Section/__snapshots__/Content.test.jsx.snap b/test/components/containers/core/Section/__snapshots__/Content.test.jsx.snap index 644adda2..ffd34279 100644 --- a/test/components/containers/core/Section/__snapshots__/Content.test.jsx.snap +++ b/test/components/containers/core/Section/__snapshots__/Content.test.jsx.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`theme styles adjusts top and bottom margin to passed props 1`] = ` +exports[`theme styles adjusts top and bottom padding to passed props 1`] = ` .c0 { width: 100%; } @@ -18,11 +18,11 @@ exports[`theme styles adjusts top and bottom margin to passed props 1`] = ` `; -exports[`theme styles has top and bottom margin 1`] = ` +exports[`theme styles has top and bottom padding 1`] = ` .c0 { width: 100%; - margin-top: 5em; - margin-bottom: 5em; + padding-top: 5em; + padding-bottom: 5em; } @media (min-width:75em) { diff --git a/test/components/organisms/core/Footer/styled/Category.test.jsx b/test/components/organisms/core/Footer/styled/Category.test.jsx new file mode 100644 index 00000000..6e3e02b8 --- /dev/null +++ b/test/components/organisms/core/Footer/styled/Category.test.jsx @@ -0,0 +1,29 @@ +/* + * Copyright (C) 2018-present Arctic Ice Studio + * Copyright (C) 2018-present Sven Greb + * + * Project: Nord Docs + * Repository: https://github.com/arcticicestudio/nord-docs + * License: MIT + */ + +import React from "react"; + +import { renderWithTheme } from "nord-docs-test-utils"; +import { Category } from "organisms/core/Footer/styled"; + +describe("theme styles", () => { + test("has visible border-bottom when matching the active route", () => { + const { container } = renderWithTheme(Nord); + + expect(container.firstChild).toHaveStyleRule("border-bottom", expect.not.stringContaining("transparent")); + expect(container.firstChild).toMatchSnapshot(); + }); + + test("has invisible border-bottom when not matching the active route", () => { + const { container } = renderWithTheme(Nord); + + expect(container.firstChild).toHaveStyleRule("border-bottom", expect.stringContaining("transparent")); + expect(container.firstChild).toMatchSnapshot(); + }); +}); diff --git a/test/components/organisms/core/Footer/styled/Copyright.test.jsx b/test/components/organisms/core/Footer/styled/Copyright.test.jsx new file mode 100644 index 00000000..f45b427f --- /dev/null +++ b/test/components/organisms/core/Footer/styled/Copyright.test.jsx @@ -0,0 +1,42 @@ +/* + * Copyright (C) 2018-present Arctic Ice Studio + * Copyright (C) 2018-present Sven Greb + * + * Project: Nord Docs + * Repository: https://github.com/arcticicestudio/nord-docs + * License: MIT + */ + +import React from "react"; +import { em, stripUnit } from "polished"; + +import { renderWithTheme } from "nord-docs-test-utils"; +import { Copyright } from "organisms/core/Footer/styled"; +import { media } from "styles/theme"; + +describe("theme styles", () => { + test("has required CSS breakpoints", () => { + const { container } = renderWithTheme(); + const mediaQuery = `(min-width: ${em(media.breakpoints.tabletLandscapeLowerBoundary)})`; + + expect(container.firstChild).toHaveStyleRule("display", "block", { + media: mediaQuery + }); + expect(container.firstChild).toHaveStyleRule("text-align", "start", { + media: mediaQuery + }); + }); + + test("has reduced font size", () => { + const { container } = renderWithTheme(); + const fontSize = stripUnit(getComputedStyle(container.firstChild).fontSize); + + expect(fontSize).toBeLessThan(1); + expect(container.firstChild).toHaveStyleRule("font-size", `${fontSize}em`); + }); + + test("matches the snapshot", () => { + const { container } = renderWithTheme(); + expect(container.firstChild).toMatchSnapshot(); + }); +}); diff --git a/test/components/organisms/core/Footer/styled/Grid.test.jsx b/test/components/organisms/core/Footer/styled/Grid.test.jsx new file mode 100644 index 00000000..6f4850a4 --- /dev/null +++ b/test/components/organisms/core/Footer/styled/Grid.test.jsx @@ -0,0 +1,51 @@ +/* + * Copyright (C) 2018-present Arctic Ice Studio + * Copyright (C) 2018-present Sven Greb + * + * Project: Nord Docs + * Repository: https://github.com/arcticicestudio/nord-docs + * License: MIT + */ + +import React from "react"; +import { em } from "polished"; + +import { renderWithTheme } from "nord-docs-test-utils"; +import { Grid } from "organisms/core/Footer/styled"; +import { media } from "styles/theme"; + +describe("theme styles", () => { + test("has grid layout styles for defined CSS breakpoints", () => { + const categoryCount = "5"; + const mediaQueryTabletPortrait = `(min-width: ${em(media.breakpoints.tabletPortraitLowerBoundary)})`; + const mediaQueryTabletLandscape = `(min-width: ${em(media.breakpoints.tabletLandscapeLowerBoundary)})`; + + const { container } = renderWithTheme(); + + expect(container.firstChild).toHaveStyleRule("display", "grid", { + media: mediaQueryTabletPortrait + }); + + expect(container.firstChild).toHaveStyleRule("grid-template-columns", expect.stringContaining(categoryCount), { + media: mediaQueryTabletPortrait + }); + + expect(container.firstChild).toHaveStyleRule("grid-template-rows", expect.stringContaining("auto"), { + media: mediaQueryTabletPortrait + }); + + expect(container.firstChild).toHaveStyleRule("grid-template-columns", expect.stringContaining("%"), { + media: mediaQueryTabletLandscape + }); + }); + + test("has flexbox layout styles", () => { + const { container } = renderWithTheme(); + expect(container.firstChild).toHaveStyleRule("display", "flex"); + }); + + test("matches the snapshot", () => { + const { container } = renderWithTheme(); + expect(container.firstChild).toMatchSnapshot(); + }); +}); diff --git a/test/components/organisms/core/Footer/styled/Metadata.test.jsx b/test/components/organisms/core/Footer/styled/Metadata.test.jsx new file mode 100644 index 00000000..265f3ccf --- /dev/null +++ b/test/components/organisms/core/Footer/styled/Metadata.test.jsx @@ -0,0 +1,47 @@ +/* + * Copyright (C) 2018-present Arctic Ice Studio + * Copyright (C) 2018-present Sven Greb + * + * Project: Nord Docs + * Repository: https://github.com/arcticicestudio/nord-docs + * License: MIT + */ + +import React from "react"; +import { em } from "polished"; + +import { renderWithTheme } from "nord-docs-test-utils"; +import { Metadata } from "organisms/core/Footer/styled"; +import { media } from "styles/theme"; + +describe("theme styles", () => { + const categoryCount = "5"; + + test("uses automatic grid column assignment for defined CSS breakpoints", () => { + const mediaQuery = `(min-width: ${em(media.breakpoints.tabletLandscapeLowerBoundary)})`; + const { container } = renderWithTheme(); + + expect(container.firstChild).toHaveStyleRule("grid-column", "unset", { + media: mediaQuery + }); + }); + + test("spans all grid columns", () => { + const { container } = renderWithTheme(); + + expect(container.firstChild).toHaveStyleRule("grid-column", expect.stringContaining(categoryCount)); + }); + + test("has flexbox column layout styles", () => { + const { container } = renderWithTheme(); + + expect(container.firstChild).toHaveStyleRule("display", "flex"); + expect(container.firstChild).toHaveStyleRule("flex-direction", "column"); + }); + + test("matches the snapshot", () => { + const { container } = renderWithTheme(); + + expect(container.firstChild).toMatchSnapshot(); + }); +}); diff --git a/test/components/organisms/core/Footer/styled/OrganizationBrand.test.jsx b/test/components/organisms/core/Footer/styled/OrganizationBrand.test.jsx new file mode 100644 index 00000000..07d7eb2c --- /dev/null +++ b/test/components/organisms/core/Footer/styled/OrganizationBrand.test.jsx @@ -0,0 +1,35 @@ +/* + * Copyright (C) 2018-present Arctic Ice Studio + * Copyright (C) 2018-present Sven Greb + * + * Project: Nord Docs + * Repository: https://github.com/arcticicestudio/nord-docs + * License: MIT + */ + +import React from "react"; +import { stripUnit } from "polished"; + +import { renderWithTheme } from "nord-docs-test-utils"; +import { OrganizationBrand } from "organisms/core/Footer/styled"; + +describe("theme styles", () => { + test("has flexbox layout styles", () => { + const { container } = renderWithTheme(); + + expect(container.firstChild).toHaveStyleRule("display", "flex"); + }); + + test("has bottom margin", () => { + const { container } = renderWithTheme(); + const marginBottom = stripUnit(getComputedStyle(container.firstChild).marginBottom); + + expect(marginBottom).toBeGreaterThan(0); + }); + + test("matches the snapshot", () => { + const { container } = renderWithTheme(); + + expect(container.firstChild).toMatchSnapshot(); + }); +}); diff --git a/test/components/organisms/core/Footer/styled/Sitemap.test.jsx b/test/components/organisms/core/Footer/styled/Sitemap.test.jsx new file mode 100644 index 00000000..8e105bba --- /dev/null +++ b/test/components/organisms/core/Footer/styled/Sitemap.test.jsx @@ -0,0 +1,38 @@ +/* + * Copyright (C) 2018-present Arctic Ice Studio + * Copyright (C) 2018-present Sven Greb + * + * Project: Nord Docs + * Repository: https://github.com/arcticicestudio/nord-docs + * License: MIT + */ + +import React from "react"; +import { stripUnit } from "polished"; + +import { renderWithTheme } from "nord-docs-test-utils"; +import { Sitemap } from "organisms/core/Footer/styled"; + +describe("theme styles", () => { + test("has top and bottom margin", () => { + const { container } = renderWithTheme(); + const margingTop = stripUnit(getComputedStyle(container.firstChild).marginTop); + const marginBottom = stripUnit(getComputedStyle(container.firstChild).marginBottom); + + expect(margingTop).toBeGreaterThan(0); + expect(marginBottom).toBeGreaterThan(0); + }); + + test("has flexbox column layout styles", () => { + const { container } = renderWithTheme(); + + expect(container.firstChild).toHaveStyleRule("display", "flex"); + expect(container.firstChild).toHaveStyleRule("flex-direction", "column"); + }); + + test("matches the snapshot", () => { + const { container } = renderWithTheme(); + + expect(container.firstChild).toMatchSnapshot(); + }); +}); diff --git a/test/components/organisms/core/Footer/styled/SitemapCategory.test.jsx b/test/components/organisms/core/Footer/styled/SitemapCategory.test.jsx new file mode 100644 index 00000000..212c6445 --- /dev/null +++ b/test/components/organisms/core/Footer/styled/SitemapCategory.test.jsx @@ -0,0 +1,73 @@ +/* + * Copyright (C) 2018-present Arctic Ice Studio + * Copyright (C) 2018-present Sven Greb + * + * Project: Nord Docs + * Repository: https://github.com/arcticicestudio/nord-docs + * License: MIT + */ + +import React from "react"; +import { em, stripUnit } from "polished"; + +import { renderWithTheme } from "nord-docs-test-utils"; +import { SitemapCategory } from "organisms/core/Footer/styled"; +import { media } from "styles/theme"; + +describe("theme styles", () => { + test("resets width for defined CSS breakpoints", () => { + const mediaQuery = `(min-width: ${em(media.breakpoints.tabletPortraitLowerBoundary)})`; + const { container } = renderWithTheme(); + + expect(container.firstChild).toHaveStyleRule("width", "unset", { + media: mediaQuery + }); + }); + + test("resets justified flexbox content for defined CSS breakpoints", () => { + const mediaQuery = `(min-width: ${em(media.breakpoints.tabletLandscapeLowerBoundary)})`; + const { container } = renderWithTheme(); + + expect(container.firstChild).toHaveStyleRule("justify-content", "unset", { + media: mediaQuery + }); + }); + + test("has centered flexbox content layout", () => { + const { container } = renderWithTheme(); + + expect(container.firstChild).toHaveStyleRule("display", "flex"); + expect(container.firstChild).toHaveStyleRule("justify-content", "center"); + }); + + test("has visible border-bottom", () => { + const { container } = renderWithTheme(); + + expect(container.firstChild).toHaveStyleRule("border-bottom", expect.not.stringContaining("transparent")); + }); + + test("has bottom margin", () => { + const { container } = renderWithTheme(); + const marginBottom = stripUnit(getComputedStyle(container.firstChild).marginBottom); + + expect(marginBottom).toBeGreaterThan(0); + }); + + test("has reduced width", () => { + const { container } = renderWithTheme(); + + expect(container.firstChild).toHaveStyleRule("width", expect.any(String)); + }); + + test("has disabled user selection", () => { + const { container } = renderWithTheme(); + + expect(container.firstChild).toHaveStyleRule("user-select", "none"); + }); + + test("matches the snapshot", () => { + const { container } = renderWithTheme(); + + expect(container.firstChild).toMatchSnapshot(); + }); +}); diff --git a/test/components/organisms/core/Footer/styled/SitemapLink.test.jsx b/test/components/organisms/core/Footer/styled/SitemapLink.test.jsx new file mode 100644 index 00000000..cdb2c26e --- /dev/null +++ b/test/components/organisms/core/Footer/styled/SitemapLink.test.jsx @@ -0,0 +1,49 @@ +/* + * Copyright (C) 2018-present Arctic Ice Studio + * Copyright (C) 2018-present Sven Greb + * + * Project: Nord Docs + * Repository: https://github.com/arcticicestudio/nord-docs + * License: MIT + */ + +import React from "react"; +import { stripUnit } from "polished"; + +import { renderWithTheme } from "nord-docs-test-utils"; +import { SitemapLink } from "organisms/core/Footer/styled"; + +describe("theme styles", () => { + test("has top and bottom padding", () => { + const { container } = renderWithTheme(Nord); + + expect(container.firstChild).toHaveStyleRule("padding", expect.stringContaining("em")); + expect(container.firstChild).toHaveStyleRule("padding-bottom", "0", { + modifier: ":last-child" + }); + expect(container.firstChild).toHaveStyleRule("padding-top", "0", { + modifier: ":first-child" + }); + }); + + test("has reduced font size", () => { + const { container } = renderWithTheme(Nord); + const fontSize = stripUnit(getComputedStyle(container.firstChild).fontSize); + + expect(fontSize).toBeLessThan(1); + expect(container.firstChild).toHaveStyleRule("font-size", `${fontSize}em`); + }); + + test("changes color on hover", () => { + const { container } = renderWithTheme(Nord); + + expect(container.firstChild).toHaveStyleRule("color", expect.any(String), { + modifier: ":hover" + }); + }); + + test("matches the snapshot", () => { + const { container } = renderWithTheme(Nord); + expect(container.firstChild).toMatchSnapshot(); + }); +}); diff --git a/test/components/organisms/core/Footer/styled/SitemapList.test.jsx b/test/components/organisms/core/Footer/styled/SitemapList.test.jsx new file mode 100644 index 00000000..2d7bfd5e --- /dev/null +++ b/test/components/organisms/core/Footer/styled/SitemapList.test.jsx @@ -0,0 +1,38 @@ +/* + * Copyright (C) 2018-present Arctic Ice Studio + * Copyright (C) 2018-present Sven Greb + * + * Project: Nord Docs + * Repository: https://github.com/arcticicestudio/nord-docs + * License: MIT + */ + +import React from "react"; +import { em } from "polished"; + +import { renderWithTheme } from "nord-docs-test-utils"; +import { SitemapList } from "organisms/core/Footer/styled"; +import { media } from "styles/theme"; + +describe("theme styles", () => { + test("has 'start' text alignment for defined CSS breakpoints", () => { + const mediaQuery = `(min-width: ${em(media.breakpoints.tabletLandscapeLowerBoundary)})`; + const { container } = renderWithTheme(); + + expect(container.firstChild).toHaveStyleRule("text-align", "start", { + media: mediaQuery + }); + }); + + test("has centered text alignment", () => { + const { container } = renderWithTheme(); + + expect(container.firstChild).toHaveStyleRule("text-align", "center"); + }); + + test("matches the snapshot", () => { + const { container } = renderWithTheme(); + + expect(container.firstChild).toMatchSnapshot(); + }); +}); diff --git a/test/components/organisms/core/Footer/styled/SocialNetworking.test.jsx b/test/components/organisms/core/Footer/styled/SocialNetworking.test.jsx new file mode 100644 index 00000000..56e79ad9 --- /dev/null +++ b/test/components/organisms/core/Footer/styled/SocialNetworking.test.jsx @@ -0,0 +1,49 @@ +/* + * Copyright (C) 2018-present Arctic Ice Studio + * Copyright (C) 2018-present Sven Greb + * + * Project: Nord Docs + * Repository: https://github.com/arcticicestudio/nord-docs + * License: MIT + */ + +import React from "react"; +import { em } from "polished"; + +import { renderWithTheme } from "nord-docs-test-utils"; +import { SocialNetworking } from "organisms/core/Footer/styled"; +import { media } from "styles/theme"; + +describe("theme styles", () => { + test("sets children element margins for defined CSS breakpoints", () => { + const mediaQuery = `(min-width: ${em(media.breakpoints.tabletLandscapeLowerBoundary)})`; + const { container } = renderWithTheme(); + + expect(container.firstChild).toHaveStyleRule("margin", expect.stringContaining("em"), { + media: mediaQuery, + modifier: "*" + }); + }); + + test("unsets justified flexbox content for defined CSS breakpoints", () => { + const mediaQuery = `(min-width: ${em(media.breakpoints.tabletLandscapeLowerBoundary)})`; + const { container } = renderWithTheme(); + + expect(container.firstChild).toHaveStyleRule("justify-content", "unset", { + media: mediaQuery + }); + }); + + test("has flexbox layout styles", () => { + const { container } = renderWithTheme(); + + expect(container.firstChild).toHaveStyleRule("display", "flex"); + expect(container.firstChild).toHaveStyleRule("justify-content", "space-between"); + }); + + test("matches the snapshot", () => { + const { container } = renderWithTheme(); + + expect(container.firstChild).toMatchSnapshot(); + }); +}); diff --git a/test/components/organisms/core/Footer/styled/__snapshots__/Category.test.jsx.snap b/test/components/organisms/core/Footer/styled/__snapshots__/Category.test.jsx.snap new file mode 100644 index 00000000..40393797 --- /dev/null +++ b/test/components/organisms/core/Footer/styled/__snapshots__/Category.test.jsx.snap @@ -0,0 +1,39 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`theme styles has invisible border-bottom when not matching the active route 1`] = ` +.c0 { + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + font-size: 1.125em; + color: #7b88a1; + border-bottom: 2px solid transparent; + -webkit-transition: border-bottom 400ms ease-in-out, color 400ms ease-in-out; + transition: border-bottom 400ms ease-in-out, color 400ms ease-in-out; +} + +
+ Nord +
+`; + +exports[`theme styles has visible border-bottom when matching the active route 1`] = ` +.c0 { + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + font-size: 1.125em; + color: #4c566a; + border-bottom: 2px solid #4c566a; + -webkit-transition: border-bottom 400ms ease-in-out, color 400ms ease-in-out; + transition: border-bottom 400ms ease-in-out, color 400ms ease-in-out; +} + +
+ Nord +
+`; diff --git a/test/components/organisms/core/Footer/styled/__snapshots__/Copyright.test.jsx.snap b/test/components/organisms/core/Footer/styled/__snapshots__/Copyright.test.jsx.snap new file mode 100644 index 00000000..bf5585aa --- /dev/null +++ b/test/components/organisms/core/Footer/styled/__snapshots__/Copyright.test.jsx.snap @@ -0,0 +1,30 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`theme styles matches the snapshot 1`] = ` +.c0 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + text-align: center; + font-size: 0.8em; + color: #7b88a1; + -webkit-transition: color 400ms ease-in-out; + transition: color 400ms ease-in-out; + margin-top: 1.125em; +} + +@media (min-width:56.25em) { + .c0 { + display: block; + text-align: start; + } +} + +
+`; diff --git a/test/components/organisms/core/Footer/styled/__snapshots__/Grid.test.jsx.snap b/test/components/organisms/core/Footer/styled/__snapshots__/Grid.test.jsx.snap new file mode 100644 index 00000000..baccf296 --- /dev/null +++ b/test/components/organisms/core/Footer/styled/__snapshots__/Grid.test.jsx.snap @@ -0,0 +1,32 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`theme styles matches the snapshot 1`] = ` +.c0 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; +} + +@media (min-width:37.5em) { + .c0 { + display: grid; + grid-template-columns: repeat(,1fr); + grid-template-rows: auto; + grid-row-gap: 1em; + } +} + +@media (min-width:56.25em) { + .c0 { + grid-template-columns: 30% repeat(,1fr); + } +} + +
+`; diff --git a/test/components/organisms/core/Footer/styled/__snapshots__/Metadata.test.jsx.snap b/test/components/organisms/core/Footer/styled/__snapshots__/Metadata.test.jsx.snap new file mode 100644 index 00000000..f318aff9 --- /dev/null +++ b/test/components/organisms/core/Footer/styled/__snapshots__/Metadata.test.jsx.snap @@ -0,0 +1,36 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`theme styles matches the snapshot 1`] = ` +.c0 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + grid-column: span 5; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +@media (min-width:56.25em) { + .c0 { + grid-column: unset; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + -webkit-align-items: unset; + -webkit-box-align: unset; + -ms-flex-align: unset; + align-items: unset; + } +} + +
+`; diff --git a/test/components/organisms/core/Footer/styled/__snapshots__/OrganizationBrand.test.jsx.snap b/test/components/organisms/core/Footer/styled/__snapshots__/OrganizationBrand.test.jsx.snap new file mode 100644 index 00000000..a5b9cb23 --- /dev/null +++ b/test/components/organisms/core/Footer/styled/__snapshots__/OrganizationBrand.test.jsx.snap @@ -0,0 +1,19 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`theme styles matches the snapshot 1`] = ` +.c0 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + margin-bottom: 2em; +} + +
+`; diff --git a/test/components/organisms/core/Footer/styled/__snapshots__/Sitemap.test.jsx.snap b/test/components/organisms/core/Footer/styled/__snapshots__/Sitemap.test.jsx.snap new file mode 100644 index 00000000..69f01aac --- /dev/null +++ b/test/components/organisms/core/Footer/styled/__snapshots__/Sitemap.test.jsx.snap @@ -0,0 +1,34 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`theme styles matches the snapshot 1`] = ` +.c0 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + margin-top: 1em; + margin-bottom: 1em; +} + +@media (min-width:37.5em) { + .c0 { + -webkit-align-items: unset; + -webkit-box-align: unset; + -ms-flex-align: unset; + align-items: unset; + margin-top: 0; + margin-bottom: 0; + } +} + +
+`; diff --git a/test/components/organisms/core/Footer/styled/__snapshots__/SitemapCategory.test.jsx.snap b/test/components/organisms/core/Footer/styled/__snapshots__/SitemapCategory.test.jsx.snap new file mode 100644 index 00000000..fe17344c --- /dev/null +++ b/test/components/organisms/core/Footer/styled/__snapshots__/SitemapCategory.test.jsx.snap @@ -0,0 +1,42 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`theme styles matches the snapshot 1`] = ` +.c0 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + border-bottom: 1px solid #d8dee9; + -webkit-transition: border-bottom 400ms ease-in-out; + transition: border-bottom 400ms ease-in-out; + margin-bottom: 1em; + width: 70%; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +@media (min-width:37.5em) { + .c0 { + width: unset; + } +} + +@media (min-width:56.25em) { + .c0 { + -webkit-box-pack: unset; + -webkit-justify-content: unset; + -ms-flex-pack: unset; + justify-content: unset; + } +} + +
+`; diff --git a/test/components/organisms/core/Footer/styled/__snapshots__/SitemapLink.test.jsx.snap b/test/components/organisms/core/Footer/styled/__snapshots__/SitemapLink.test.jsx.snap new file mode 100644 index 00000000..08a99304 --- /dev/null +++ b/test/components/organisms/core/Footer/styled/__snapshots__/SitemapLink.test.jsx.snap @@ -0,0 +1,47 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`theme styles matches the snapshot 1`] = ` +.c1 { + color: inherit; + cursor: pointer; + -webkit-text-decoration: none; + text-decoration: none; +} + +.c1:active, +.c1:focus, +.c1:hover, +.c1:visited { + outline: none; +} + +.c0 { + display: block; + padding: 0.4em 0; + font-size: 0.9em; + color: #7b88a1; + -webkit-transition: color 200ms ease-in-out; + transition: color 200ms ease-in-out; +} + +.c0:active, +.c0:focus, +.c0:hover { + color: #4c566a; +} + +.c0:first-child { + padding-top: 0; +} + +.c0:last-child { + padding-bottom: 0; +} + + + Nord + +`; diff --git a/test/components/organisms/core/Footer/styled/__snapshots__/SitemapList.test.jsx.snap b/test/components/organisms/core/Footer/styled/__snapshots__/SitemapList.test.jsx.snap new file mode 100644 index 00000000..23d8bc41 --- /dev/null +++ b/test/components/organisms/core/Footer/styled/__snapshots__/SitemapList.test.jsx.snap @@ -0,0 +1,17 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`theme styles matches the snapshot 1`] = ` +.c0 { + text-align: center; +} + +@media (min-width:56.25em) { + .c0 { + text-align: start; + } +} + +
+`; diff --git a/test/components/organisms/core/Footer/styled/__snapshots__/SocialNetworking.test.jsx.snap b/test/components/organisms/core/Footer/styled/__snapshots__/SocialNetworking.test.jsx.snap new file mode 100644 index 00000000..5b74a9e5 --- /dev/null +++ b/test/components/organisms/core/Footer/styled/__snapshots__/SocialNetworking.test.jsx.snap @@ -0,0 +1,39 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`theme styles matches the snapshot 1`] = ` +.c0 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; +} + +@media (min-width:56.25em) { + .c0 { + -webkit-box-pack: unset; + -webkit-justify-content: unset; + -ms-flex-pack: unset; + justify-content: unset; + } + + .c0 * { + margin: 0 0.625em; + } + + .c0 *:last-child { + margin-right: 0; + } + + .c0 *:first-child { + margin-left: 0; + } +} + +
+`; diff --git a/test/utils/getSemVerFromGitDescribe.test.js b/test/utils/getSemVerFromGitDescribe.test.js index 339cb847..4e944c4f 100644 --- a/test/utils/getSemVerFromGitDescribe.test.js +++ b/test/utils/getSemVerFromGitDescribe.test.js @@ -9,8 +9,6 @@ import { getSemVerFromGitDescribe } from "utils"; -/* , "v0.1.0", "v0.1.0-123", "v0.1.0-123-abcd1234", "v0.1.0-abcd1234" */ - const CHANNEL_PRERELEASE = "pre-release"; const CHANNEL_RELEASE = "release"; const CHANNEL_SNAPSHOT = "snapshot";