From 2b84762ea483dd1e8cf96d035fefab0e0d8ea020 Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Wed, 29 Sep 2021 04:41:46 +0900 Subject: [PATCH 1/4] Add story for TypographyPanel --- .../src/tools-panel/stories/index.js | 2 + .../tools-panel/stories/typography-panel.js | 217 ++++++++++++++++++ 2 files changed, 219 insertions(+) create mode 100644 packages/components/src/tools-panel/stories/typography-panel.js diff --git a/packages/components/src/tools-panel/stories/index.js b/packages/components/src/tools-panel/stories/index.js index 32e009a8940806..230a407bff6fc3 100644 --- a/packages/components/src/tools-panel/stories/index.js +++ b/packages/components/src/tools-panel/stories/index.js @@ -169,6 +169,8 @@ export const WithSlotFillItems = () => { ); }; +export { TypographyPanel } from './typography-panel'; + const PanelWrapperView = styled.div` max-width: 260px; font-size: 13px; diff --git a/packages/components/src/tools-panel/stories/typography-panel.js b/packages/components/src/tools-panel/stories/typography-panel.js new file mode 100644 index 00000000000000..e90ea1e14e37bc --- /dev/null +++ b/packages/components/src/tools-panel/stories/typography-panel.js @@ -0,0 +1,217 @@ +/** + * WordPress dependencies + */ +import { + __experimentalFontAppearanceControl as FontAppearanceControl, + __experimentalFontFamilyControl as FontFamilyControl, + __experimentalLetterSpacingControl as LetterSpacingControl, + LineHeightControl, +} from '@wordpress/block-editor'; +import { + FontSizePicker, + __experimentalRadio as Radio, + __experimentalRadioGroup as RadioGroup, +} from '@wordpress/components'; +import { useState } from '@wordpress/element'; + +/** + * Internal dependencies + */ +import { ToolsPanel, ToolsPanelItem } from '..'; +import Panel from '../../panel'; +import { ControlLabel } from '../../ui/control-label'; +import { FormGroup } from '../../ui/form-group'; + +// These options match the theme.json typography schema +const fontFamilies = [ + { + fontFamily: + '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif', + slug: 'system-fonts', + name: 'System Fonts', + }, + { + fontFamily: + 'Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace', + name: 'Monospace', + slug: 'monospace', + }, + { + fontFamily: + 'Hoefler Text, Baskerville Old Face, Garamond, Times New Roman, serif', + name: 'Serif', + slug: 'hoefler-times-new-roman', + }, +]; +const fontSizes = [ + { + slug: 'small', + size: '1rem', + name: 'Small', + }, + { + slug: 'normal', + size: '1.25rem', + name: 'Normal', + }, + { + slug: 'medium', + size: '1.5rem', + name: 'medium', + }, + { + slug: 'large', + size: '2rem', + name: 'Large', + }, + { + slug: 'extra-large', + size: '3rem', + name: 'Extra large', + }, +]; + +const LetterCaseControl = ( props ) => { + return ( + + Letter Case + + + AB + + + ab + + + Ab + + + + ); +}; + +export const TypographyPanel = () => { + const [ fontFamily, setFontFamily ] = useState(); + const [ fontSize, setFontSize ] = useState(); + const [ fontWeight, setFontWeight ] = useState(); + const [ fontStyle, setFontStyle ] = useState(); + const [ lineHeight, setLineHeight ] = useState(); + const [ letterSpacing, setLetterSpacing ] = useState(); + const [ textTransform, setTextTransform ] = useState(); + + return ( + <> +
+ + + !! fontFamily } + label="Font" + onDeselect={ () => setFontFamily( undefined ) } + isShownByDefault={ true } + > + + + + !! fontSize } + label="Size" + onDeselect={ () => setFontSize( undefined ) } + isShownByDefault={ true } + > + + + + !! fontStyle || !! fontWeight } + label="Appearance" + onDeselect={ () => { + setFontStyle( undefined ); + setFontWeight( undefined ); + } } + isShownByDefault={ true } + > + { + setFontStyle( style ); + setFontWeight( weight ); + } } + /> + + + !! lineHeight } + label="Line Height" + onDeselect={ () => setLineHeight( undefined ) } + isShownByDefault={ true } + > + + + + !! letterSpacing } + label="Letter Spacing" + onDeselect={ () => setLetterSpacing( undefined ) } + isShownByDefault={ true } + > + + + + !! textTransform } + label="Letter Case" + onDeselect={ () => setTextTransform( undefined ) } + isShownByDefault={ true } + > + + + + +
+
+ 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. +
+ + ); +}; From a6300b267e6f76bbacc7394a9875452c381b7872 Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Wed, 6 Oct 2021 12:49:00 +0900 Subject: [PATCH 2/4] Move wp-components imports to internal deps Co-authored-by: Marco Ciampini --- .../src/tools-panel/stories/typography-panel.js | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/packages/components/src/tools-panel/stories/typography-panel.js b/packages/components/src/tools-panel/stories/typography-panel.js index e90ea1e14e37bc..579588c2b6044c 100644 --- a/packages/components/src/tools-panel/stories/typography-panel.js +++ b/packages/components/src/tools-panel/stories/typography-panel.js @@ -7,20 +7,18 @@ import { __experimentalLetterSpacingControl as LetterSpacingControl, LineHeightControl, } from '@wordpress/block-editor'; -import { - FontSizePicker, - __experimentalRadio as Radio, - __experimentalRadioGroup as RadioGroup, -} from '@wordpress/components'; import { useState } from '@wordpress/element'; /** * Internal dependencies */ -import { ToolsPanel, ToolsPanelItem } from '..'; +import FontSizePicker from '../../font-size-picker'; import Panel from '../../panel'; +import Radio from '../../radio'; +import RadioGroup from '../../radio-group'; import { ControlLabel } from '../../ui/control-label'; import { FormGroup } from '../../ui/form-group'; +import { ToolsPanel, ToolsPanelItem } from '..'; // These options match the theme.json typography schema const fontFamilies = [ From 12a0fdff8071445e6f1ec61c4825e3991dbd9392 Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Wed, 6 Oct 2021 13:30:19 +0900 Subject: [PATCH 3/4] Use ToggleGroupControl for letter case --- .../tools-panel/stories/typography-panel.js | 38 +++++++++---------- 1 file changed, 19 insertions(+), 19 deletions(-) diff --git a/packages/components/src/tools-panel/stories/typography-panel.js b/packages/components/src/tools-panel/stories/typography-panel.js index 579588c2b6044c..01c5006465d29f 100644 --- a/packages/components/src/tools-panel/stories/typography-panel.js +++ b/packages/components/src/tools-panel/stories/typography-panel.js @@ -14,10 +14,10 @@ import { useState } from '@wordpress/element'; */ import FontSizePicker from '../../font-size-picker'; import Panel from '../../panel'; -import Radio from '../../radio'; -import RadioGroup from '../../radio-group'; -import { ControlLabel } from '../../ui/control-label'; -import { FormGroup } from '../../ui/form-group'; +import { + ToggleGroupControl, + ToggleGroupControlOption, +} from '../../toggle-group-control'; import { ToolsPanel, ToolsPanelItem } from '..'; // These options match the theme.json typography schema @@ -71,20 +71,20 @@ const fontSizes = [ const LetterCaseControl = ( props ) => { return ( - - Letter Case - - - AB - - - ab - - - Ab - - - + + { [ + { value: 'uppercase', ariaLabel: 'Uppercase', label: 'AB' }, + { value: 'lowercase', ariaLabel: 'Lowercase', label: 'ab' }, + { value: 'capitalize', ariaLabel: 'Capitalize', label: 'Ab' }, + ].map( ( { value, ariaLabel, label } ) => ( + + ) ) } + ); }; @@ -184,7 +184,7 @@ export const TypographyPanel = () => { > From e56bbba7448a6da928858370abd1ea1f66582320 Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Wed, 6 Oct 2021 14:51:45 +0900 Subject: [PATCH 4/4] Tweak panel label --- packages/components/src/tools-panel/stories/typography-panel.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/tools-panel/stories/typography-panel.js b/packages/components/src/tools-panel/stories/typography-panel.js index 01c5006465d29f..c57ac4c19e9d5d 100644 --- a/packages/components/src/tools-panel/stories/typography-panel.js +++ b/packages/components/src/tools-panel/stories/typography-panel.js @@ -101,7 +101,7 @@ export const TypographyPanel = () => { <>
- + !! fontFamily } label="Font"