Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

653 654 collapsible header icon keyword #676

Merged
merged 13 commits into from
Jul 30, 2018
Merged

653 654 collapsible header icon keyword #676

Show file tree
Hide file tree
Changes from 12 commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
8b955e3
Code and CSS initial adjustments.
afercia Jul 26, 2018
69be577
Control left and right icons independently.
afercia Jul 26, 2018
dd46987
CSS adjustments.
afercia Jul 27, 2018
a4b2161
More CSS adjustments.
afercia Jul 27, 2018
7ae7427
Remove AnalysisCollapsible and use Collapsible directly.
afercia Jul 27, 2018
ad67adf
Make content style agnostic and start adjusting props docs.
afercia Jul 27, 2018
d4983f5
Merge branch 'develop' into 653-654-collapsible-header-icon-keyword
afercia Jul 29, 2018
92cf0f9
CSS adjustments.
afercia Jul 29, 2018
a22ccac
Adjust score icon vertical position.
afercia Jul 29, 2018
8c7d676
Handle the SVG icons viewBox internally.
afercia Jul 30, 2018
2d45021
Avoid to use props for the heading styling and use styled-components.
afercia Jul 30, 2018
e02533a
Group collapsible icon props.
afercia Jul 30, 2018
a6bb014
Removed superfluous props being passed to Button in IconButton component
abotteram Jul 30, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@ const components = [
},
{
id: "sidebar-collapsible",
name: "Sidebar Collapsible",
name: "Collapsibles",
component: <SidebarCollapsibleWrapper />,
},
{
Expand Down
2 changes: 1 addition & 1 deletion app/ButtonsWrapper.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@ export default class ButtonsList extends React.Component {
<Button>Button</Button>{ ' ' }
<IconButton icon="edit">IconButton</IconButton>{ ' ' }
<IconButton icon="edit" iconColor="#c00" aria-label="IconButton with icon only" />{ ' ' }
<IconsButton prefixIcon="search" suffixIcon="plus">IconsButton</IconsButton>
<IconsButton prefixIcon={ { icon: "search" } } suffixIcon={ { icon: "plus" } }>IconsButton</IconsButton>
<Separator />
<BaseLinkButton href="#someresource">BaseLinkButton</BaseLinkButton>{ ' ' }
<LinkButton href="#someresource">LinkButton</LinkButton>
Expand Down
224 changes: 173 additions & 51 deletions app/SidebarCollapsibleWrapper.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,26 +1,61 @@
import React from "react";
import styled from "styled-components";

import Collapsible from "../composites/Plugin/Shared/components/Collapsible";
import Collapsible, { StyledIconsButton } from "../composites/Plugin/Shared/components/Collapsible";
import colors from "../style-guide/colors.json";

export const SortableContainer = styled.div`
min-width: 255px;
width: 280px;
min-height: 250px;
position: fixed;
top: 56px;
right: 20px;
box-sizing: border-box;
const FullWidthContaniner = styled.div`
max-width: 1024px;
margin: 1em auto 5em;
// Emulate WordPress font metrics.
font-size: 13px;
line-height: 1.4em;

p {
line-height: 1.5;
}

// Switch everything to border-box as in Gutenberg.
* {
box-sizing: border-box;
}
`;

const SortableContainer = styled.div`
min-width: 255px;
width: 280px;
border-left: 1px solid #e5e5e5; // Gutenberg color
min-height: 250px;
margin: 0 0 0 auto;
`;

const WidgetContainer = styled.div`
position: relative;
background: ${ colors.$color_white };
box-shadow: 0 1px 1px rgba(0,0,0,.04);
`;

export const WidgetContainer = styled.div`
position: relative;
margin-bottom: 20px;
padding: 0;
line-height: 1;
border: 1px solid #e5e5e5;
background: white;
box-shadow: 0 1px 1px rgba(0,0,0,.04);
const StyledCollapsible = styled( Collapsible )`
border-top: 1px solid ${ colors.$color_grey };
border-bottom: 1px solid ${ colors.$color_grey };
margin-top: -1px;

${ StyledIconsButton } {
color: ${ colors.$color_black }
}
`;


const StyledContent = styled.div`
padding: 16px;

& > :first-child {
margin-top: 0;
}

& > :last-child {
margin-bottom: 0;
}
`;

/**
Expand All @@ -30,39 +65,126 @@ export const WidgetContainer = styled.div`
*/
export default function SidebarCollapsibleWrapper() {
return (
<SortableContainer>
<WidgetContainer>
<Collapsible
title="Insert some collapsible title here"
titleScreenReaderText="bad SEO score"
initialIsOpen={ true }
prefixIcon="circle"
prefixIconCollapsed="circle"
prefixIconColor="red"
>
<h4>Some content</h4>
<p>With some text under it of course. Otherwise this would not make much sense, right?</p>
<h4>Some other content</h4>
<p>I should start using lorem ipsum here to write my material.</p>
</Collapsible>
<Collapsible
title="Collapsible initially closed"
initialIsOpen={ false }
>
<h4>Some content</h4>
<p>With some text under it of course. Otherwise this would not make much sense, right?</p>
<h4>Some other content</h4>
<p>I should start using lorem ipsum here to write my material.</p>
</Collapsible>
<Collapsible/>
<Collapsible
suffixIcon="question-circle"
suffixIconCollapsed="question-circle"
suffixIconColor="purple"
>
<p>Maybe some help text here with a link <a target="_blank" rel="noopener noreferrer" href="https://yoast.com">Go to Yoast</a></p>
</Collapsible>
</WidgetContainer>
</SortableContainer>
<FullWidthContaniner>
<SortableContainer>
<WidgetContainer>
<StyledCollapsible
title="Insert some collapsible title here"
initialIsOpen={ true }
prefixIcon={ { icon: "circle", color: "red" } }
prefixIconCollapsed={ { icon: "circle", color: "red" } }
>
<StyledContent>
<h3>Some content</h3>
<p>With some text under it of course. Otherwise this would not make much sense, right?</p>
<h3>Some other content</h3>
<p>I should start using lorem ipsum here to write my material.</p>
</StyledContent>
</StyledCollapsible>
<StyledCollapsible
title="Collapsible initially closed"
initialIsOpen={ false }
>
<StyledContent>
<h3>Some content</h3>
<p>With some text under it of course. Otherwise this would not make much sense, right?</p>
<h3>Some other content</h3>
<p>I should start using lorem ipsum here to write my material.</p>
</StyledContent>
</StyledCollapsible>
<StyledCollapsible
title="No content"
/>
<StyledCollapsible
title="Focus keyword analysis"
titleScreenReaderText="good SEO score"
subTitle="Mountaineering in the catskills during high season"
prefixIcon={ { icon: "seo-score-good", color: colors.$color_green_medium } }
prefixIconCollapsed={ { icon: "seo-score-good", color: colors.$color_green_medium } }
>
<StyledContent>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</StyledContent>
</StyledCollapsible>
<StyledCollapsible
title="Additional awesome focus keyword analysis"
titleScreenReaderText="good SEO score"
subTitle="kittens"
prefixIcon={ { icon: "seo-score-good", color: colors.$color_green_medium } }
prefixIconCollapsed={ { icon: "seo-score-good", color: colors.$color_green_medium } }
>
<StyledContent>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</StyledContent>
</StyledCollapsible>
<StyledCollapsible
title="Help"
suffixIcon={ { icon: "question-circle", color: colors.$color_purple } }
suffixIconCollapsed={ { icon: "question-circle", color: colors.$color_purple } }
>
<StyledContent>
<p>Maybe some help text here with a link <a target="_blank" rel="noopener noreferrer" href="https://yoast.com">Go to Yoast</a></p>
</StyledContent>
</StyledCollapsible>
<StyledCollapsible
title="Different icons size"
prefixIcon={ { icon: "gear", color: colors.$color_purple } }
prefixIconCollapsed={ { icon: "gear", color: colors.$color_purple } }
suffixIcon={ { icon: "plus-circle", color: colors.$color_red, size: "30px" } }
suffixIconCollapsed={ { icon: "plus-circle", color: colors.$color_red, size: "30px" } }
>
<StyledContent>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</StyledContent>
</StyledCollapsible>
</WidgetContainer>
</SortableContainer>
<br />
<StyledCollapsible
title="Good!"
subTitle="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
titleScreenReaderText="Good SEO score"
prefixIcon={ { icon: "seo-score-good", color: colors.$color_green_medium } }
prefixIconCollapsed={ { icon: "seo-score-good", color: colors.$color_green_medium } }
>
<StyledContent>
<p>One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections.
The bedding was hardly able to cover it and seemed ready to slide off any moment. His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked.
“What’s happened to me?” he thought. It wasn’t a dream. His room, a proper human room although a little too small, lay peacefully between its four familiar walls. A collection of textile samples lay spread out on the table — Samsa was a travelling salesman — and above it there hung a picture that he had recently cut out of an illustrated magazine and housed in a nice, gilded frame. It showed a lady fitted out with a fur hat and fur boa who sat upright, raising a heavy fur muff that covered the whole of her lower arm towards the viewer.</p>
</StyledContent>
</StyledCollapsible>
<StyledCollapsible
title="Meh"
subTitle="Mountaineering in the catskills during high season"
titleScreenReaderText="OK SEO score"
prefixIcon={ { icon: "seo-score-ok", color: colors.$color_yellow_score } }
prefixIconCollapsed={ { icon: "seo-score-ok", color: colors.$color_yellow_score } }
>
<StyledContent>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</StyledContent>
</StyledCollapsible>
<StyledCollapsible
title="Bad"
subTitle="kittens"
titleScreenReaderText="Bad SEO score"
prefixIcon={ { icon: "seo-score-bad", color: colors.$color_red } }
prefixIconCollapsed={ { icon: "seo-score-bad", color: colors.$color_red } }
>
<StyledContent>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</StyledContent>
</StyledCollapsible>
<StyledCollapsible
title="None"
subTitle="Enter your focus keyword"
prefixIcon={ { icon: "seo-score-none", color: colors.$color_grey_disabled } }
prefixIconCollapsed={ { icon: "seo-score-none", color: colors.$color_grey_disabled } }
>
<StyledContent>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</StyledContent>
</StyledCollapsible>
</FullWidthContaniner>
);
}
4 changes: 2 additions & 2 deletions app/SvgIconsWrapper.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,8 +45,8 @@ export default function SvgIconsWrapper() {
const getIcons = () => {
return transform( icons, ( result, value, key ) => {
return result.push(
<SingleSvgContainer>
<SvgIcon icon={ key } key={ key } size="40px" />
<SingleSvgContainer key={ key }>
<SvgIcon icon={ key } size="40px" />
<span title={ key }>{ key }</span>
</SingleSvgContainer>
);
Expand Down
Loading